El color es una de las herramientas más críticas en el conjunto de herramientas de un diseñador. Es una parte esencial del habla visual que utilizan los diseñadores de productos para comunicarse con su audiencia. El color de la interfaz de agraciado puede tener fines funcionales, como dar a los usuarios sugerencias visuales sobre dónde deben mirar a continuación cuando escanean una página, pero además puede tener fines decorativos, como transmitir un estado de actitud específico.

En este artículo, quiero compartir 10 consejos prácticos sobre cómo nominar colores y usarlos en el diseño de su interfaz de agraciado.

1. Use los colores de la marca como colchoneta para su paleta de colores

La mayoría de las marcas tienen una paleta establecida de colores de marca. Esos colores se utilizan normalmente en el logotipo de la marca, el material impreso y promocional, la presencia en cadena y el empaque. Vale la pena reutilizar los colores de la marca en el diseño de la interfaz de agraciado porque hacen que la interfaz de agraciado parezca común para las personas familiarizadas con su marca.

Por ejemplo, podría usar el color primario de una marca como color para fundamentos funcionales como los chico de indicación a la movimiento. Observe cómo McDonald’s usa la transformación de su icónico color amarillo para el Ordenar ahora y Descarga la aplicación chico en su sitio web:

McDonalds usa activamente tintes de su color amarillo en su sitio web.  Imagen de McDonalds.McDonalds usa activamente tintes de su color amarillo en su sitio web.  Imagen de McDonalds.McDonalds usa activamente tintes de su color amarillo en su sitio web.  Imagen de McDonalds.
McDonalds usa activamente tintes de su color amarillo en su sitio web

Si desea utilizar un color de marca como embellecedor factor, podría usarlo para el fondo. Por ejemplo, a continuación, puede ver cómo Slack usa uno de sus colores primarios (# 4A154B) como color de fondo para la página de destino. Este violado refuerza la esforzado identidad visual de Slack.

Página de destino floja.  Imagen de Slack.Página de destino floja.  Imagen de Slack.Página de destino floja.  Imagen de Slack.
página de inicio de holgura

Cómo crear su propio esquema de color basado en la marca

Puede usar herramientas como ColorBox de Lyft para crear un esquema de color de interfaz de agraciado despierto para usar a partir de los colores de su marca. Defina los colores de Inicio y Fin de la serie de colores de su marca y deje que el sistema genere un esquema para usted.

Crear un esquema de color a partir de los colores de la marca usando ColorBox.  Imagen de ColorBox. Crear un esquema de color a partir de los colores de la marca usando ColorBox.  Imagen de ColorBox. Crear un esquema de color a partir de los colores de la marca usando ColorBox.  Imagen de ColorBox.
Creación de un esquema de color a partir de los colores de la marca con ColorBox

2. Inspírate en la naturaleza

¿Qué debe hacer si no tiene los colores de la marca establecidos? Puedes inspirarte en la naturaleza. Una cosa buena de los esquemas de color de la interfaz de agraciado creados a partir de la naturaleza es que están proporcionadamente equilibrados desde el principio. El proceso de creación de un esquema de color es sencillo: tome una fotografía de la naturaleza y use herramientas como Adobe Extract Theme para extraer colores de ella.

Color extraído de la toma del bosque otoñal.  Imagen original de Sebastián Unrau (UnSplash)Color extraído de la toma del bosque otoñal.  Imagen original de Sebastián Unrau (UnSplash)Color extraído de la toma del bosque otoñal.  Imagen original de Sebastián Unrau (UnSplash)
Color extraído de la toma del bosque otoñal. Imagen diferente de Sebastián Unrau (UnSplash)

3. Considere la psicología del color

Diferentes colores pueden significar cosas diferentes, y las personas asocian los colores sin querer con todos los aspectos de sus propias experiencias. Por ejemplo, en los países occidentales, las personas suelen asociar el rojo con la energía y el peligro, mientras que el zarco generalmente se asocia con la calma y la laxitud.

Si diseña una aplicación de meditación, usar el rojo como color primario puede ser una mala idea. Por eso es importante rememorar los detalles del producto y el significado del color en los mercados en los que pretende estar.

Aplicación móvil de meditaciónAplicación móvil de meditaciónAplicación móvil de meditación
Blues relajante en este kit de interfaz de agraciado de aplicación de meditación

4. Manténgase alejado del texto frito puro

El texto en frito puro (n.° 000000) sobre fondo blanco (#FFFFFF) puede provocar fácilmente asma visual cuando los usuarios tienen que ojear texto durante períodos prolongados. Esto sucede porque el frito puro sobre un fondo blanco crea demasiado contraste de luminancia y hace que el ojo trabaje más. A menudo, puede reemplazar el frito puro con plomizo complicado sin ningún problema con el esquema de color de la interfaz de agraciado.

Usar negro puro vs.  gris oscuro para lectura.  Imagen de Nick Babich.Usar negro puro vs.  gris oscuro para lectura.  Imagen de Nick Babich.Usar negro puro vs.  gris oscuro para lectura.  Imagen de Nick Babich.
Usar frito puro vs. plomizo complicado para ojear

5. Limite la cantidad de colores primarios en su sistema de diseño

Los colores primarios (como nos referimos a ellos aquí) son los que más prevalecen en su interfaz de agraciado. Todavía puede verlos llamados “colores colchoneta”.

Usar demasiados colores primarios es uno de los errores críticos que cometen muchos diseñadores de IU. El exceso de todo es malo. Usar demasiados colores primarios en la interfaz de agraciado es como destinar muchas señales diferentes a sus usuarios. El uso excesivo de colores primarios hará que los usuarios ignoren los colores que ven. Se recomienda que comience con una pequeña cantidad de colores primarios: apunte a uno o dos que representen perfectamente su marca.

Sistema de diseño FigmaSistema de diseño FigmaSistema de diseño Figma
Variantes de color en una plantilla de sistema de diseño en Envato Elements

Cada vez que creas que necesitas otro color primario o colchoneta, debes detenerte y probar con colores ya existentes. Es relativamente claro crear bonitos acentos con los colores primarios. Todo lo que necesita hacer es mezclar el color primario con blanco (tinte) o frito (sombra). Por ejemplo, a continuación se muestran algunos acentos de un zarco primario creado con Adobe Color.

Colores de énfasis creados con Adobe Color.  Imagen de Nick Babich.Colores de énfasis creados con Adobe Color.  Imagen de Nick Babich.Colores de énfasis creados con Adobe Color.  Imagen de Nick Babich.
Colores de acento creados con Adobe Color. Imagen de Nick Babich.

6. Aclarar reglas para usar colores individuales

El color se puede utilizar para adiestrar a los usuarios a través del producto y les ayuda a comprender el significado de los fundamentos individuales en la interfaz de agraciado. Por ejemplo, cuando los usuarios se enteran de que el texto coloreado en zarco en su sitio web representa enlaces, no tienen ningún problema para encontrar enlaces en su sitio web. Pero esto funciona solo cuando usa el color de modo consistente.

Una vez que defina los colores y sus reglas en la interfaz de agraciado, debe incluir esas reglas en las pautas de diseño de su producto y compartir las pautas con todas las personas involucradas en el diseño del producto. Esto aumentará la posibilidad de que el equipo siga las reglas al diseñar un producto.

El sistema IBM Carbon Design tiene reglas bien definidas para el uso de colores.  Imagen de IBM. El sistema IBM Carbon Design tiene reglas bien definidas para el uso de colores.  Imagen de IBM. El sistema IBM Carbon Design tiene reglas bien definidas para el uso de colores.  Imagen de IBM.
El sistema IBM Carbon Design tiene reglas proporcionadamente definidas para el uso de colores. Imagen de IBM.

7. Asegúrese de que sus colores sean accesibles

El diseño accesible permite todos usuarios utilicen su producto, y el color juega un papel fundamental en la creación de productos accesibles. El contraste de color deficiente es un problema de accesibilidad popular de muchas interfaces de agraciado. Crea una experiencia terrible para las personas con discapacidad visual, lo que dificulta distinguir la información en la pantalla.

Debe probar constantemente el contraste de color para el texto y los íconos en su interfaz de agraciado. Hay muchas herramientas que pueden ayudarte con eso. WebAIM Contrast Check es una utensilio que lo ayudará a cerciorarse de que su interfaz de agraciado cumpla con las Pautas de accesibilidad al contenido web (WCAG).

Prueba de contraste de color con WebAIM Contrast Checker. Prueba de contraste de color con WebAIM Contrast Checker. Prueba de contraste de color con WebAIM Contrast Checker.
Prueba de contraste de color con WebAIM Contrast Checker.

Al probar su interfaz de agraciado, preste distinto atención a los estados deshabilitados. Un estado deshabilitado generalmente se crea con bajo contraste, lo que crea una mala legibilidad para el texto y los íconos que se muestran. WCAG requiere al menos un contraste de 4.5: 1 para texto e imágenes de texto, ¡incluso para estados deshabilitados!

Contraste de color deficiente frente a contraste de color adecuado para las etiquetas de los botones deshabilitados.  Imagen de Nick Babich.Contraste de color deficiente frente a contraste de color adecuado para las etiquetas de los botones deshabilitados.  Imagen de Nick Babich.Contraste de color deficiente frente a contraste de color adecuado para las etiquetas de los botones deshabilitados.  Imagen de Nick Babich.
Contraste de color deficiente frente a contraste de color adecuado para etiquetas de chico deshabilitados

Lea las pautas de accesibilidad del color con estos tutoriales:

8. No use colores solos para comunicar el estado del sistema

Nunca use el color solo para comunicar estados del sistema como error, información o éxito. Los usuarios que sufren de discapacidad visual, como acromatopsia rojo-verde, tendrán dificultades para comprender lo que sucede en la interfaz de agraciado simplemente porque no pueden distinguir los colores.

Cuando muestre un mensaje de error, o un mensaje sobre una operación exitosa, agregue siempre una marbete o un ícono que lo acompañe para ayudar a los usuarios a comprender lo que está sucediendo. Chrome DevTools ofrece herramientas que le permiten probar su producto de la misma modo que lo experimentan las personas con discapacidades.

Usar color solo para comunicar un mensaje de error vs.  usando color junto con un mensaje de error y un icono.  Imagen de Nick Babich. Usar color solo para comunicar un mensaje de error vs.  usando color junto con un mensaje de error y un icono.  Imagen de Nick Babich. Usar color solo para comunicar un mensaje de error vs.  usando color junto con un mensaje de error y un icono.  Imagen de Nick Babich.
Usar color solo para comunicar un mensaje de error vs. usando color próximo con un mensaje de error y un ícono

9. Pruebe su combinación de colores

Debe cerciorarse de que los colores que elija usar en su interfaz de agraciado funcionen en concordia. Si proporcionadamente es técnicamente posible usar herramientas automáticas para probar su interfaz de agraciado, es mucho mejor realizar una observación manual. La mayoría de los diseñadores tienen un ojo entrenado y pueden darse cuenta rápidamente cuando poco no se ve proporcionadamente. Por lo tanto, se recomienda incluir pruebas de combinación de colores como parte de las actividades manuales de control de calidad que realiza el equipo ayer de difundir un producto al mercado.

Al probar un esquema de color de la interfaz de agraciado, compruebe siempre cómo funciona el esquema de color de su producto en diversas condiciones de iluminación. Un esquema de color a menudo se ve mal cuando los usuarios acceden a los productos en el exógeno, bajo la luz del sol.

10 Realice un inventario de la interfaz de forma regular

El número de colores utilizados en un producto crecerá a medida que evolucione el tesina. Cuantos más colores uses, más difícil será controlar cómo se usan. Es por eso que se recomienda realizar un procedimiento de inventario de interfaz al menos una vez durante el ciclo de emanación. Este procedimiento le permite categorizar los componentes y estilos que componen su producto.

Este es un procedimiento sencillo; todo lo que necesita hacer es usar una utensilio que le dirá cuántas fuentes, colores y componentes únicos se usan en su interfaz de agraciado.

Si diseña un sitio web, puede usar herramientas como CSS Stats para ver cuántos colores únicos tiene en sus hojas de estilo en cascada (CSS). El ulterior paso es entender cómo se usan esos colores. Recuerde que debe comprender tanto el contexto de uso como la cantidad de veces que se usa el color. Si descubre que un color en particular se usa solo una vez en su interfaz de agraciado y es casi el mismo color que se usa varias veces, puede duplicar el primer color y eliminarlo.

Conclusión

El color tiene un tremendo impacto en la percepción de un producto. Próximo con la tipografía, el flujo visual y el holgado, los colores crean una colchoneta sobre la cual se construye cada producto. Los colores seleccionados correctamente no solo mejoran la facilidad de uso del producto, sino que además afectan positivamente la experiencia del agraciado.

Pero nominar los colores correctos no es una actividad de una sola vez. Es probable que itere varias veces ayer de encontrar una paleta de colores de interfaz de agraciado que funcione proporcionadamente para su audiencia. Por eso es tan importante resumir comentarios de los usuarios y realizar cambios en función de esos comentarios.

Deja una respuesta