La consistencia hará que su diseño sea mejor, más fácil de usar y prácticamente invisible. Le da al usuario mucho espacio para experimentar el diseño de la manera que usted pretende.
Diseñar para la coherencia es una obviedad en algunos casos y un poco más difícil de entender en otros. Sencillamente, la consistencia es el hilo que une los elementos en un solo diseño. También une los diseños en una sola campaña o marca, creando un producto que es distinguible, utilizable y efectivo. Tome nota especial de todos los ejemplos a continuación, cada marca es líder cuando se trata de un diseño consistente y utilizable.
1. Colores y tonos dominantes y secundarios
Hay una razón por la que hay tanta información disponible para crear excelentes paletas de colores. El color puede ser uno de los factores visuales clave que vincula una marca con el tratamiento visual.
Un identificador de color especial puede indicar a los usuarios quién es usted de un vistazo. Solo piense en cómo algunas de las marcas más grandes del mundo (Coca-Cola, Facebook, T-Mobile) se identifican con un color. ¿Reconocerías estas marcas sin su color característico?
El buen uso del color también ayuda a los usuarios a moverse a través de un sitio web y saber que todavía están en la ubicación correcta. Si cada clic lo llevara a una página con una nueva paleta de colores, ¿le preguntaría si estaba en el lugar correcto?
Para crear una gran paleta de colores, elija un color dominante y use los conceptos de la teoría del color para agregar uno o dos colores secundarios. Luego anote un conjunto rápido de reglas de estilo y uso para cada color y cómo se utilizará en todo el diseño. Sigue las reglas y tienes color consistente. (Bonus: Crea una divertida paleta de colores de verano.)
2. Tamaño de la tipografía, espaciado y posición.
Al igual que el color debe basarse en una paleta con reglas de estilo, la tipografía necesita el mismo tratamiento. Y fácil para ti, el concepto es el mismo que con el color.
- Elija un tipo de letra dominante y el tamaño.
- Elija tipos de letra y tamaños secundarios.
Puede ser un poco más complejo que eso para la tipografía para la web, pero entiendes la idea, ¿verdad? Cuando se trata de estilos web, debe asociar tratamientos de tipo específico, tamaño, espaciado y posicionamiento con el CSS para que cada etiqueta (como h1, h2, h3, cuerpo, etc.) llame la opción de tipo correcto.
El tipo adicional que se usa en una sola ubicación, como la navegación, debe ser consistente en todo el elemento. Los usuarios estarán bastante confundidos si cada elemento de navegación utiliza un tipo de letra diferente. Esta consistencia se aplica en todo el sitio; Todos los artículos similares deben usar los mismos tratamientos de texto.
3. Tamaño y relaciones de los elementos.
¿Qué tan grandes son los elementos en su diseño? ¿Son todos los botones del mismo tamaño? ¿Qué tal titulares y fotos?
El tamaño de los elementos debe ser dictado por el estilo y permanecer igual para cada uso. (Solo piense lo divertido que se verá su deslizador si intenta colocar fotos con diferentes formas. No va a funcionar).
El tamaño común y las relaciones entre los elementos ayudan a los usuarios a ver patrones y crear un flujo visual. Estos elementos comunes crean armonía y equilibrio que hacen que un diseño sea fácil de digerir y mantener a los usuarios comprometidos.
4. El espacio y cómo se utiliza.
Tan importante como el tamaño de los elementos es el espacio entre ellos. No hay nada que distraiga más que un diseño en el que los elementos simplemente se vierten en el lienzo sin organización o reglas: algunas fotos se superponen, mientras que otras pueden tener mucho espacio entre ellas.
La mejor manera de establecer (y atenerse a) las reglas de espaciado comunes es mediante un sistema de cuadrícula. Este conjunto de líneas invisibles lo ayudará a determinar dónde y cómo colocar los elementos para que un bloque muy simple, desde el texto a los botones a las imágenes, quede en perfecta armonía.
Mientras piensa en el espacio, recuerde verificar el espaciado consistente tanto vertical como horizontalmente. Esto incluye observar la relación entre los elementos similares y los que son diferentes. (Está bien tener reglas de espaciado para cada uno).
5. Visuales que cruzan los medios
Los visuales de marca, como imágenes e ilustraciones, deben transmitirse a través de los medios. Ya sea que esté diseñando un proyecto para un sitio web o folleto, cartelera o redes sociales, la identidad visual de la marca no debe cambiar.
Esto a menudo implica el uso de un conjunto de fotos común. Algunas marcas tienen reglas detalladas sobre cómo se utilizan los elementos visuales, desde superposiciones de color o marcas de agua en todas las imágenes hasta una determinada relación de aspecto para todas las fotos. Independientemente de cuál sea su estilo, lo importante es utilizarlo independientemente de la ubicación.
Para hacer esto de la manera más efectiva, es importante tener una gran plataforma visual con imágenes de alta resolución y alta calidad que pueda usar y reutilizar.
6. Patrones de usuario que funcionan naturalmente
Su diseño debe funcionar como otros diseños similares y seguir los patrones de usuario aceptados. Muy a menudo los diseñadores quieren hacer algo diferente con la forma en que funcionan las cosas; No caigas en esta trampa.
Si un sitio web o aplicación o elemento impreso funciona como los usuarios esperan, pueden interactuar con él fácilmente. Sabrán qué hacer y el diseño se vuelve algo invisible a medida que brilla la facilidad de uso. (Este es tu objetivo real como diseñador.)
Hay cuatro tipos de patrones comúnmente aceptados para pensar:
- Patrones de contenido: estilo y tono del contenido y su marca.
- Patrones de marcado: HTML y CSS que necesita diseñar en todas las páginas y en todo el sitio web
- Patrones de diseño: el aspecto de cada elemento en el diseño y todos los estilos asociados
- Patrones de usuario: cómo los usuarios se involucran con elementos de diseño como botones, menús o iconos
7. Elementos de la interfaz de usuario que se pegan
Esto no es una navegación pegajosa, pero es una idea similar.
Cada elemento de interacción e interfaz debe comportarse de la misma manera.
- Los enlaces se abren directamente o en una nueva pestaña (elija uno para cada enlace)
- Los botones son del mismo color en todo
- La navegación permanece en la misma ubicación e incluye las mismas opciones.
- Los pies de página y las barras laterales deben contener una ubicación y tamaño específicos (no haga que el pie de página sea enorme en una página y pequeño en la siguiente)
- Los iconos son reconocibles y hace lo que los usuarios esperan.
- Los elementos a los que se puede hacer clic siempre se pueden hacer clic (como las fotos que enlazan)
La lista sobre es un trampolín que muestra todos los pequeños detalles que debe considerar en términos de pegajosidad y facilidad de uso. Recuerde, si permite que un elemento realice una acción, probablemente debería ser universal.
Conclusión
La consistencia del diseño crea la estructura que los usuarios desean. También crea un marco que los usuarios entienden, contribuyendo a la usabilidad y el compromiso en general.
Comienza con un conjunto de reglas y una guía de estilo para cada proyecto. Incluso si trabaja solo, cree una lista de reglas sobre cómo un proyecto usará color, tipo, tamaño, espacio, elementos de la interfaz de usuario e interacciones. Acelerará el proceso de diseño para usted y lo llevará a un diseño mejor y más utilizable.