A continuación, le daré una breve descripción de los puntos obligatorios a los que debe prestar atención al crear un diseño web para su posterior transferencia al diseño.
Ellos te ayudarán:
- piensa más profundamente en tu diseño
- evitar preguntas innecesarias
- obtener un mejor resultado
- mantente amigo del desarrollador frontend
General
- Los diseños de nombres (páginas, marcos, requeridos) deben transmitir claramente la esencia y el propósito y estar vinculados a las páginas lógicas del sitio u otras entidades grandes.
(Ejemplo: "inicio - tableta", "principal - móvil", "botones")
[pantalla-ejemplo] - Es necesario observar la estructura del documento cuando se trabaja con capas, grupos, componentes y pantallas, asígneles nombres completos.
(Ejemplo: fondo principal, configuración, botón, página de registro móvil)
(Mal ejemplo: marco 1, grupo 45, iphone XR)
[pantalla-ejemplo] - Si necesita una versión móvil , se debe desarrollar un diseño de 320px de ancho (iPhone SE) para cada pantalla, además del cual puede crear diseños de alta resolución.
[pantalla-ejemplo] - Los íconos (svg, ...) deben poder descargarse y abrirse correctamente en el navegador. El tamaño de la mesa de trabajo svg debe coincidir con el contenido y el flujo. Puede recopilar conjuntos de iconos en tableros de arte individuales.
[pantalla-ejemplo] Las imágenes (contenido gráfico) deben cargarse. Tener una resolución de al menos 2x. Descargado sin preprocesamiento. (Tales como: bordes redondeados, transparencia, sombra). Excepto cuando dicho procesamiento se haya solicitado explícitamente.
[pantalla-ejemplo]
- Es necesario tener en cuenta el tamaño del área de contenido y el hecho de que este tamaño varía de una resolución a otra. Por lo tanto, el "punto de apego" debe ser pensado.
- Las imágenes de contenido deben cargarse como una sola imagen.
(Por ejemplo: tenemos un bloque rectangular con [fondo] que cambiará. En consecuencia, la imagen debe descargarse completamente con el fondo, como en el ejemplo anterior).
- Los colores de fuente no deben contener un canal alfa (transparencia), a menos que la fuente se use en diferentes fondos (gradientes o imágenes) y, por lo tanto, debe tener esta lógica.
- En primer lugar, se debe proporcionar una lista completa (zip.archive) de las fuentes utilizadas en el proyecto (antes de comenzar a trabajar en el frente).
- Tampoco hace daño elegir una fuente segura (que está disponible en todos los Windows, Mac, Linux, etc.), similar a la fuente personalizada, de modo que pueda sustituirse en caso de un error de carga de fuente personalizada
(Ejemplo: 'Roboto', sans-serif) - Si se trata de una fuente de ícono personalizada , entonces los íconos deben manejarse en consecuencia, a saber: debe alinearlos a lo largo de las líneas de base para que varios íconos en la fila no sean de diferentes tamaños y con sangrías diferentes. Además, el número de caras, el grosor de la base de las caras, el nivel de detalle se debe preservar de un icono a otro, de lo contrario se verán heterogéneos, como si fueran de diferentes conjuntos de fuentes.
- En ausencia de requisitos especiales para la lógica del comportamiento , los bloques en la secuencia deben mantener la secuencia de su ubicación cuando se adaptan a las resoluciones que se reflejan en los requisitos.
- La lógica debe reflejarse en el diseño . Por ejemplo, varias tarjetas idénticas, en cada una de las cuales se muestra una cantidad diferente de contenido, diferentes imágenes, diferentes estados, etc., para que sea posible rastrear la dependencia.
- Además del diseño, una descripción textual del funcionamiento de los elementos es bienvenida.
- Especifique el comportamiento de los elementos cuando se desborde con texto
(Por ejemplo, recorte texto largo con puntos suspensivos en un bloque, etc.) - Deje comentarios y descripción (de cualquier manera) sobre elementos animados y elementos cuyo comportamiento no pueda determinarse únicamente por el diseño.
- Las páginas 404 , 500 y otras pantallas estándar deben estar presentes.
Todos los siguientes párrafos de la guía y las cuadrículas se pueden dibujar en la página de estilos, donde se estructurará todo esto.
Guía, GUI, UI-kit, Guía de estilo
- La descripción y los diseños de los bloques conectados por una funcionalidad común se dan en una sección del documento.
(Por ejemplo, todas las ventanas emergentes tienen un fondo blanco y esquinas redondeadas de 10 píxeles, botones ...) - La tipografía se debe describir y dibujar adicionalmente en una mesa de trabajo separada.
(Ejemplo: todos los encabezados del primer nivel tienen una sangría de 24 px por debajo de 40 px. Todos los encabezados del segundo nivel ..., párrafos ..., etc.) - Todos los enlaces, botones, casillas de verificación y otros elementos interactivos deben dibujarse en un estado pasivo, inducido y activo. Del mismo modo, debe haber estados para el teléfono celular (dispositivos táctiles): pasivo, apremiante. Estados: (enlace, desplazamiento, activo, foco, visitado, deshabilitado, proceso).
[Casilla de verificación-ejemplo]
[Ejemplo de botones] - Las migas de pan se deben dibujar en todos los estados (activo, anterior, bloqueado, ...) y teniendo en cuenta los saltos de línea.
- La paginación se debe representar en todos los estados (en el primer, último paso intermedio) y con un número diferente de pasos (1, muchos), teniendo en cuenta un número grande de dígitos (más de 3 caracteres).
- Entradas (campos de entrada), los formularios se deben dibujar en todos los estados: de forma predeterminada, con foco, cuando se presiona, se bloquea, mensaje de error, mensaje de corrección, etc.
[Ejemplo de entrada] Limite la cantidad de colores y tonos utilizados
[Ejemplo de nivel de color] .
- Todos los colores utilizados deben hacerse una guía.
(Cualquier color nuevo en el diseño se considerará un error y se igualará al más cercano de la guía) - Los colores que son únicos en términos de funcionalidad deben describirse o vincularse a la esencia.
(Por ejemplo, un widget de acciones de halloween con un solo fondo naranja: naranja es el color para las acciones de halloween)
Malla
- Los tamaños de sangría y elementos deben ser múltiplos del mismo valor.
(2px, 4px, 8px, 5px ...)
[pantalla-ejemplo]
[post-ejemplo] - La cuadrícula (si la hay) debe describirse y no contradecirse
diseños. Tamaños de columnas, su cantidad, etc. - Las dimensiones del contenedor deben describirse en cada una de las
permisos - Se deben describir los valores de los puntos de interrupción .
- El relleno vertical de bloques en la secuencia debe ser estandarizado. (similar a la tipografía)
Cartas, correo, listas de correo, correo
- Es necesario hacer que el diseño de la carta sea lo más simple posible . Es importante comprender cómo funcionan el diseño y la etiqueta <table> . Las cartas se colocan en las mesas. (pantalla: bloque, flexión, posición absoluta - no se puede aplicar en la letra). El adaptativo es lo más simple posible sin que los bloques cambien su posición en la secuencia. Deseable "goma" ordinaria y 1 conjunto de estilos
- No use fuentes personalizadas en la carta
Por supuesto, si dibujas para un "regate", etc. puede hacer lo que quiera, pero para un proyecto serio, estos elementos son 100% necesarios.