5 técnicas para afinar UX con color
El color es uno de los elementos clave en cualquier sistema de diseño. En los sitios web o en las aplicaciones, el color se puede usar de varias maneras: a veces el color se puede usar para crear un punto focal a través del contraste o limitando el color a un lugar seleccionado; el color también puede ayudar a establecer la jerarquía y, por lo tanto, influir en el aspecto del usuario.
En este artículo, hablaremos sobre cómo usar el color de manera estratégica.
1. Creando un punto de enfoque a través de proporciones
Un buen ejemplo de las proporciones de color es el diseño de Viporte . A medida que se desplaza hacia abajo en su página de inicio, cada sección está decorada con una letra grande en el centro. La letra se llena de un bello color antes de que entren las animaciones de las secciones. El color de las diferentes imágenes que animan están relacionadas con el color de las letras. El centro de atención es sin duda en el centro de las secciones gracias, en parte, al uso concentrado del color. Las proporciones varían: a veces hay un poco de color y, a veces, hay mucho. De cualquier manera, las proporciones se utilizan para llamar la atención en un punto focal. Si el color fuera más evidente en todo el lugar dentro de cada sección, el punto focal no sería tan claro.
2. Llamar la atención a través del contraste
Otra cosa que el color puede manipular es el contraste. Cuando los colores del diseño general son tranquilos o suaves, agregar un color que contraste atraerá mucha atención a las imágenes.
Eso es exactamente lo que está sucediendo dentro del diseño de Thinx . En la página de inicio, el esquema de color general de la interfaz es en realidad en blanco y negro. Sin embargo, el diseño depende en gran medida de numerosas fotos. Especialmente en la parte superior de la página de inicio, las fotos de la ropa interior tienen un fondo rojo oscuro. Comparado con todo lo demás en la página, eso es bastante atrevido. Sin duda, lo que se destaca aquí es el rojo oscuro. El rojo tiene un contraste mucho mayor contra el esquema de color blanco y negro. Me gusta usar Thinx como ejemplo porque demuestra que los colores brillantes y de neón no son los únicos adecuados para llamar la atención de alguien a través del contraste. Realmente es solo un acto de equilibrio de dos colores que hará que uno de ellos realmente se destaque.
3. Usar color para crear patrones UX
La mejor manera de crear patrones visuales es a través de la consistencia. Los patrones, a su vez, crean relaciones a las que un usuario puede acostumbrarse. Es la misma manera en que los usuarios están acostumbrados a los iconos de certina que están relacionados con ciertas acciones, es decir, una papelera significa eliminar. Los colores son mucho más subjetivos porque cada sitio web o aplicación puede hacer su propio significado para los colores.
Tomemos la relación con el color azul en Sitio web de la cartera de Underbelly . Es un ejemplo simple y es perfecto para hacer mi punto. Todo lo que se puede hacer clic en el sitio web de Underbelly es azul. Habiendo utilizado el sitio web durante unos segundos, se hace evidente rápidamente que sus enlaces son azules. Y así es como creas patrones a través del color. Los patrones son buenos porque permiten a los usuarios y visitantes reconocer fácilmente algo. Cuanto más fácil sea el reconocimiento, menos pensarán las personas y, a esta altura, todos sabemos lo feliz que es Steve Krug .
4. Crear jerarquía a través del color
Otro color de cosa puede ser bueno para configurar una jerarquía. En Página del producto de Skore , casi todas las secciones tienen elementos verdes. El repetidor verde no solo es repetitivo, lo que crea un patrón reconocible, sino que también ayuda a distinguir las partes importantes de cualquier sección. Muchas veces es fácil explicar la jerarquía a través del tamaño del tamaño de fuente. Pero la intensidad de un color, además de montar un color en uso, también puede ser muy útil para configurar una jerarquía.
En el ejemplo de Skore, el verde tiene un buen contraste con el texto gris y el fondo blanco. Se destaca. Además, su esquema de color no se basa en otros colores de acento que hacen el primario verde. Todo eso contribuye a la forma en que cada sección muestra la jerarquía. Por lo tanto, el color verde ayuda a guiar a los ojos del usuario hacia los elementos importantes, proporcionando una buena jerarquía dentro de cada sección. Los elementos verdes le dicen a un usuario dónde mirar primero.
5. Utilizando similitudes de color
De todas las diferentes cosas que hacemos con el color como diseñadores, lo usamos principalmente y lo reutilizamos para mantener la coherencia dentro del diseño. Echemos un vistazo a El fin del año de InVision página de destino. En la parte superior de la página hay un degradado rosa y violeta que se utiliza como imagen de fondo. Más abajo en la página, el rosa y el violeta se usan también para los colores de los botones. Además, la página de destino reutiliza el blanco sobre los fondos de color rosa y morado. También reutiliza el color de texto negro y gris sobre los fondos blancos. Si los colores fueran diferentes cada vez, no se verían tan bien.
Echemos un vistazo a otro ejemplo, específicamente Co-movimiento . En su página de inicio, el estudio creativo usa algunos colores diferentes. Pero todos son lo suficientemente similares en su tono para proporcionar un flujo cohesivo. En este ejemplo, no hay nada que se destaque específicamente, que también puede ser un buen objetivo. En este caso, el énfasis con el color se realiza en un flujo bueno y coherente de la página, donde intenta mantener al usuario ocupado y desplazándose.
Conclusión
El color puede ser una gran herramienta para ayudar a lograr diversos objetivos de diseño. El color puede ayudar a definir y establecer una jerarquía y proporcionar un punto de enfoque. El énfasis en el color viene en varias formas. De cualquier manera, trabajar con color puede ser muy divertido. Influir a dónde van los ojos del visitante o del usuario puede ser más fácil con la ayuda de un esquema de color estratégico.