Cómo elegir colores para su interfaz

Este artículo apareció originalmente en onepixelout.com

Las tendencias de color van y vienen. Las compañías como Spotify e Instagram son conocidas por su uso reciente de gradientes brillantes, mientras que compañías como SAP y Linkedin juegan un poco más seguro. Lo primero que debe recordar al armar un esquema de color es recordar quién es el usuario. Saber quién es su usuario objetivo y su personalidad ayudará en gran medida a comprender qué combinación de colores usar en su producto. Dicho esto, todavía hay algunas pautas cuando se trata de esto.

Publicado originalmente en OnePixelOut.com

Solo un diseñador muy experto puede hacer que muchos colores brillantes diferentes funcionen juntos en la misma pantalla. Como diseñador, su objetivo es guiar al usuario a través del producto. El color puede desempeñar un papel importante en unir su interfaz al tiempo que se mantiene fiel a la marca de la empresa.

Cómo elegir colores para su interfaz

Este artículo describirá cómo tomar el logotipo de una empresa existente y crear un esquema de color para su interfaz de usuario. Cuando se trata de crear una aplicación o un sitio web y crear una interfaz intuitiva con controles que atraigan y guíen al usuario en su viaje por el sitio.

1. Elige tu color primario

El color primario es para la funcionalidad principal en su sitio web. Por lo general, sería una buena idea utilizar el color de marca principal de la empresa. Botones, encabezados, campos de entrada resaltados en formularios: todos usarán este color para crear una experiencia unificada en su producto que también refleje la marca.

El color primario debe ser un color brillante

Si es posible, el color primario debe ser brillante. He trabajado con compañías en el pasado que tenían el gris como su color de marca principal, ya que este era el color de la mayoría de su logotipo. El gris es una mala elección para el color primario de un sitio web, porque también es el color de un botón inactivo. Intente ver si hay otro color en la marca de las empresas (que no sea gris) que pueda usarse como color primario para el sitio web.

El color primario debe ser legible

Lo que quiero decir con esto es que si su color primario es amarillo, el texto amarillo no funcionará contra un fondo blanco. Si desea verificar el contraste de la legibilidad del color primario, use la herramienta de accesibilidad aquí.

Marcas como Selfridges han logrado utilizar el amarillo en su sitio web con gran efecto, utilizando el amarillo como color primario y el negro como color de texto en los botones y para la iconografía. Si está atascado con el amarillo o cualquier color pálido, intente ver si hay formas creativas de evitarlo y al mismo tiempo mantener la accesibilidad.

2. Elija colores de apoyo

El siguiente paso será elegir colores de apoyo para su color primario. Al seleccionar los colores de soporte, generalmente tendrá que seleccionar un color secundario y, potencialmente, un color de acento.

Un color secundario

Uno de los colores de soporte será su color secundario. Esto se puede usar para compensar el uso del color primario; por lo tanto, si el color primario se usa para los botones primarios y el texto, los colores secundarios se usan para los encabezados de segundo nivel, los botones que tienen menor prioridad,

No debería ser tan brillante como el color primario, porque los colores no deberían competir entre sí. El color secundario debe ser más pálido, o más neutro, o ligeramente más opaco que el color primario.

Un color de acento

Otro de los colores de apoyo debe ser su acento. El acento debe ser casi opuesto a su color primario y debe destacarse. Si su color primario es azul, el color de acento puede ser naranja. El color de acento puede ser fuerte, como el color primario, pero su caso de uso es muy diferente. El objetivo del color de acento es usarse con moderación y usarse como advertencia, mensaje de error o como notificación de algún tipo. Debe intentar usar el color de acento que usará cuando necesite romper el ruido o los colores primario y secundario.

3. Elija colores neutros

Para terminar, finalmente debes elegir un par de colores neutros. Elegir deliberadamente los neutros hará que su combinación de colores parezca completa y le dará coherencia a la interfaz visual. Los colores neutros se refieren a los colores muy oscuros para el texto y los colores muy claros para los fondos.

Los colores neutros deben hacer referencia al color primario.

Los colores neutros deben hacer referencia al color primario. Si su color primario es rojo o naranja, el color neutro oscuro podría ser un marrón muy oscuro, y el color neutro claro podría tener tonos naranjas o amarillos. Si su color primario es azul, el color neutro oscuro podría ser un azul marino muy oscuro, y el neutro claro podría ser un gris muy pálido con tonos de azul. Siempre puede usar colores grises completamente simples para estas partes de su esquema de color, pero solo para saber que siempre es posible hacer que estos colores también sean compatibles con su color primario.

Un color neutro oscuro

Este es un color muy oscuro que usará para la mayoría del texto, los elementos del formulario y los contornos y bordes. El color neutro oscuro también se puede utilizar para crear contraste en el sitio web, tal vez utilizándolo como fondo del pie de página o como fondo de la navegación.

Un color neutro claro

Este es un color muy claro que usarás ocasionalmente para los fondos. Es posible que necesite un color claro para agrupar elementos y crear alivio entre las diferentes partes de una página. El color neutro claro no debe usarse para texto o incluso elementos inactivos, ya que los usuarios siempre deben poder ver al menos elementos inactivos y leer texto.

Solo como una advertencia: es mejor oscurecerse o aclararse cuando se trata de colores neutros. He visto que los sistemas de diseño hacen referencia a los grises medios, que terminaron siendo utilizados como colores para el texto (a pesar de que no son legibles). Si debe usar un gris medio, indique específicamente cómo debe usarse, para que no termine siendo usado de manera incorrecta.

Poniendolo todo junto

Entonces, en este punto, es de esperar que tenga un color primario, un color secundario, un acento, un neutro claro y un neutro oscuro. Póngalos todos juntos para ver cómo se ven uno al lado del otro. Lo importante para recordar al usar estos consejos es tener en cuenta a su cliente. Los colores deben reflejar y apoyar su marca en todo momento.

Existen muchas herramientas que pueden inspirarte y ayudarte a orientarte en la dirección correcta, y he enumerado algunas a continuación. La próxima vez que use sus aplicaciones y sitios web favoritos, preste mucha atención al uso de colores.

https://material.io/collections/color/#

https://colorhunt.co/tab/ (uno de mis favoritos personales)

https://colourco.de/

https://coolors.co/

http://colorsafe.co/

Gracias por leer, espero que esto haya sido útil. Como siempre, el mejor lugar para comunicarse conmigo es en Twitter si tiene alguna información que le gustaría compartir. También voy a comenzar a usar Instagram pronto, así que sígueme allí si quieres.