Consejos para mantener la consistencia visual en tus diseños de interfaz
Que una interfaz sea agradable y funcione bien depende muchísimo de la consistencia visual. En el blog de Flaticon hablamos a menudo sobre la importancia de la consistencia en los iconos. Es porque la consistencia visual le aporta una personalidad y un mensaje implícito a cada diseño UI.
Durante tu carrera como diseñador UI te cruzarás con todo tipo de proyectos. Sin importar la magnitud, el contenido o la industria, el hilo conductor dentro de cada uno siempre será la consistencia visual.
Si te unes a una empresa ya constituida, tus diseños UI deberán seguir una guía de estilos y de marca. Pero si el proyecto es nuevo o no está vinculado a una marca, debes crear una identidad visual que represente el mensaje y propósito del proyecto.
En esta guía te compartimos los elementos fundamentales que te ayudarán a crear y mantener consistencia visual en todos tus diseños.
Paleta de Colores
Los diseños transmiten emociones a través de los colores. Igualmente, tambien es importante cómo todos los demás elementos se relacionan con ellos. Cuando diseñas para una marca, ya tendrán paleta de colores, pero deberás igual crear jerarquías para el uso en la interfaz.
Una paleta de diseño UI no debe tener muchísimos colores, ya que esto perjudica la usabilidad. Entre 2 y 5 colores máximo está bien. Pero sí que puedes experimentar con tonalidades de los colores base para crear textura o profundidad.
En una paleta de tres colores, un color cumple la función de color principal, el segundo es menos importante y el tercero es solo para algunas cosas puntuales o menores. Crea una guía con reglas para el uso del color, por ejemplo asignando un color a un tipo de boton y un color para todos los enlaces dentro de textos.
Elegir la paleta—cuando no hay trabajo de marca—toma un poco de trabajo. Averigua bien el propósito de la interfaz y el trabajo de estrategia y producto antes de elegir una paleta de colores.
Combinación de Fuentes
En el diseño UI de aplicaciones móviles es siempre más efectivo utilizar fuentes sutiles con bajo elemento dramático. Las fuentes que elijas deben ser fáciles de leer y componer dentro de botones y en texto de varios tamaños.
El UI de páginas web tiene más libertad de creatividad en las fuentes. Hay más espacio visual para jugar. De igual manera, es mejor siempre utilizar fuentes que cualquier dispositivo pueda mostrar, ya que las fuentes a veces no cargan como te imaginas.
La combinación de fuentes debe tener una jerarquía visual y operativa. Hay que ser consistente en el uso de las fuentes. Si un título H2 está en una fuente, mejor emplear esta misma regla a todos los títulos H2. Así es como las fuentes influyen en la consistencia visual.
Unificación de Márgenes
La alineación visual de los elementos en la interfaz debe ser consistente en todas la vistas o pantallas de la aplicación o página web. Los márgenes son los espacios que rodean el contenido visual. Es el aire entre elementos o un marco visual de una pantalla.
Por ejemplo, en el blog de Flaticon utilizamos un margen que marca el ancho máximo de la interfaz y luego el contenido textual del blog tiene otro margen. La idea es que utilices el margen como marcador de tamaño y composición. Cuando el margen no está definido, cambia el mensaje visual de la interfaz, se vuelve más abstracto. Los márgenes le dan un camino visual concreto al contenido dentro de tu interfaz.
Cuadriculas (o Retícula) de Soporte
Los márgenes ayudan, pero aún mejores son las cuadrículas de soporte. Una cuadrícula es un conjunto de líneas verticales y horizontales que separa un espacio en cuadrados del mismo tamaño. Con las líneas a su vez se puede crear una composición de columnas con la cual alinear todos los elementos en la interfaz.
La cuadrícula más común en el diseño UI es la de 8 puntos. La retícula de ocho puntos se creó durante el auge de las aplicaciones móviles. Buscando consistencia visual entre los sistemas Apple y Android, se llegó a un acuerdo de recomendar a los diseñadores que utilicen la cuadrícula de 8 puntos.
Sistema de Diseño / Design Systems
Todos los elementos que mencionamos en esta guía podrían forman parte de un sistema de diseño. Muchas veces tu diseño de interfaz es parte de un proyecto más grande, donde hay muchas pantallas o páginas de interacción. Para un proyecto como ese, es mejor implementar un sistema de diseño.
Un sistema de diseño es una herramienta versátil, reutilizable, y editable que ayuda a que equipos puedan diseñar asincrónicamente, manteniendo la consistencia visual. Con un sistema de diseño no tendrás problemas en mantener la consistencia visual, ya que ese es su mayor propósito.
Utiliza tu cuenta Figma y los Uicons de Flaticon en conjunto para crear sistemas de diseño efectivos y de alta calidad.
