Teoría de los colores en diseño UX

En este articulo te daré una breve guía acerca del uso de los colores en diseños de interfaces con buena experiencia de usuario (UX).

Muchas personas piensan que la elección de colores para una interfaz de usuario depende en gran medida del gusto del diseñador y el sentido de la belleza. Sin embargo, el proceso de selección del color es más complicado de lo que parece y juega un papel importante en el diseño.

La psicología del color afirma que los colores tienen un gran impacto en nuestro estado de ánimo y comportamiento. Es por eso que el éxito de un producto depende en gran medida de los colores elegidos para el diseño.

Una investigación realizada muestra que sólo toma 90 segundos para que la gente haga un juicio subconsciente sobre un producto y entre 62% y 90% de esa evaluación se basa solo en el color. Por lo tanto, los colores adecuadamente elegidos pueden ser útiles en el camino de la conversión mejorada para nuestro producto, así como la utilidad de avance del producto.

Para crear un buen diseño y emplear colores de manera más eficaz, es necesario comprender cómo se forman los colores y cómo se relacionan entre sí. Es por eso que los estudiantes de las escuelas de arte, colegios y universidades estudian la ciencia de la teoría del color dedicada a la naturaleza de los colores.

Hoy en día, te ofrezco el recordar (o tal vez incluso aprender) los conceptos básicos de la teoría del color acerca de la combinación de colores que puede aplicarse eficazmente en su proceso de creación de un diseño.

La rueda de colores


Si has recibido alguna clase relacionada con la pintura, debes haber visto el círculo que consta de diferentes colores. Esto se llama la rueda de colores que ayuda a entender cómo los diferentes colores se relacionan entre sí y cómo se pueden combinar.

El círculo del color se construye generalmente de colores primarios, secundarios y terciarios. Los primarios son esos tres colores del pigmento que no pueden ser formados por ninguna combinación de otros colores. Combinando los colores primarios, obtenemos los secundarios, y la mezcla de los colores primario y secundario nos da los colores terciarios que usualmente tienen nombres de dos palabras como el rojo-violeta.

circulo de colores


El círculo de colores fue creado en 1666 por Isaac Newton de una manera esquemática y desde entonces ha pasado por muchas transformaciones, pero sigue siendo la herramienta principal para la combinación de colores. La idea principal es que la rueda de color se debe hacer de esa manera para que los colores fueran mezclados apropiadamente.

Modelos de colores


Antes de empezar a mezclar colores hay que entender que el color tiene dos naturalezas diferentes: los colores tangibles que son la superficie de los objetos y los otros que son producidos por la luz como los haces de la televisión. Estos tipos crean dos modelos de color por los que se forma la rueda de color: aditivo y sustractivo.

El modelo de color aditivo considera rojo, azul y verde como los colores primarios por lo que también se conoce como sistema de color RGB. Este modelo es la base de todos los colores utilizados en la pantalla. La combinación de colores primarios en proporciones iguales de este sistema produce colores secundarios que son cian, magenta y amarillo, pero hay que recordar que cuanta más luz se añade, más brillante y más claro se vuelve el color. Los resultados obtenidos mediante la mezcla de colores aditivos son a menudo contraintuitivos para las personas acostumbradas al sistema de color sustractivo de pinturas, tintes, tintas y otros objetos tangibles.

El modelo de color sustractivo obtiene colores por la sustracción de la luz. Consta de dos sistemas de color. El primero es RYB (rojo, amarillo, azul) también conocido como sistema artístico utilizado con frecuencia en la educación artística, especialmente en la pintura. RYB fue la base de la moderna teoría científica del color que determinó que cian, magenta y amarillo son el conjunto más eficaz de tres colores para combinar. Así se ha formado el modelo de color CMY. Fue utilizado sobre todo en la impresión y cuando la impresión fotomecánica incluyó la tinta negra, el componente dominante, el sistema fue nombrado CMYK (ciánico, magenta, amarillo, y negro). Sin este pigmento adicional, la sombra más cercana al negro sería de color marrón lodoso.


Aditivo vs sustractivo


Siempre deberías recordar la diferencia principal entre estos dos sistemas: el aditivo es para las computadoras y el subtractive para las pantallas digitales. Si el proyecto de diseño en el que estas trabajando está destinado a ser impreso, no olvides la regla simple pero crucial: los colores que se ven en la pantalla nunca se ven iguales en la impresión. El espectro de color aditivo es más ancho que CMYK, razón por la cual se recomienda a los diseñadores que conviertan sus proyectos en el sistema sustractivo de colores antes de imprimir para que puedan ver el resultado cerca de lo que obtendrían. Sin embargo, si trabajas con productos digitales, el sistema de color RGB es la sabia opción porque permite crear cosas increíbles con su amplio espectro de color.

Armonía del color


La palabra "armonía" suele asociarse con algo ordenado y agradable. La armonía del color es acerca de la disposición de los colores en el diseño de la manera más atractiva y efectiva para la percepción de los usuarios. Cuando los colores están organizados, los espectadores se sienten complacidos y tranquilos, mientras que la falta de armonía en el diseño da la sensación de caos y disgusto. El equilibrio de color es vital en el diseño, ya que los usuarios hacen su impresión de la página web o la aplicación por primera vista, y los colores tienen la gran influencia. Los diseñadores distinguen los esquemas de color básicos que funcionan eficazmente.

Monocromo


Se basa en un color con varios tonos y tonos. La armonía monocromática es siempre una opción ganadora, ya que es difícil cometer un error y crear el esquema de color desagradable.

Diseño colores monocromo

Análogo


Para crear una armonía análoga, es necesario utilizar colores situados uno al lado del otro en la rueda de color. Este tipo de esquema de color se utiliza para el diseño donde no se necesita contraste, incluyendo el fondo de páginas web o banners.

Diseño color análogo

Complementario


El esquema complementario es la mezcla de colores colocados uno delante del otro en la rueda de color. Este esquema es opuesto al análogo y monocromático ya que pretende producir alto contraste. Por ejemplo, el botón naranja en el fondo azul es difícil de perderse en cualquier interfaz.

Diseño color complementario


Sub Complementario


Este esquema funciona de forma similar al anterior pero emplea más colores. Por ejemplo, si usted elige el color azul que usted necesita tomar dos otros que son adyacentes a su color opuesto que significa amarillo y rojo. El contraste aquí es menos agudo que en el esquema complementario pero permite usar más colores.



Triádico


Cuando el diseño requiere más colores puedes probar el esquema triádico. Se basa en tres colores separados que son equidistantes en la rueda de color. Para guardar el equilibrio en con este esquema, se recomienda utilizar un color como dominante, el otro como acentos.

Diseño color triadico

La teoría del color es una ciencia compleja que requiere más de un día para aprender. Sin embargo, es vital para entender los conceptos básicos para que pueda crear el diseño eficaz con el conocimiento de lo que está haciendo.

Espero que les haya gustado esta pequeña guía, te agradecería un comentario y opinión acerca del tema.

Comentarios