El uso de la psicología del color en el diseño UX/UI

Un diseñador UX/UI tiene como principal objetivo garantizar una navegación fácil, cómoda e intuitiva para el usuario que entra en una  web o aplicación. La estructura de un sitio es importante, hay recursos como el Diagrama de Gutenberg que nos ayuda a saber cómo organizar nuestro sitio web. Si te interesan este tipo de recursos, te dejamos estos 7 aspectos claves para mejorar la usabilidad web.

No obstante, hay otros factores a tener en cuenta, uno de ellos consideramos imprescindible: el uso del color.

El color nos evoca emociones y sentimientos que son difíciles de conseguir con otros recursos. Una buena paleta de colores identificará tu web como un sitio de confianza, profesional, innovador, tecnológico, dependiendo del objetivo de la marca en cuestión.

La psicología del color ha sido de gran ayuda a lo largo de la historia, ya no solamente en el diseño, también en  las Bellas Artes, en la arquitectura y nos va a seguir acompañando muchos años más, por eso es importante que conozcas sus significados y veas algunos ejemplos de cómo respira el color dentro de la web.

El color dentro de la marca

Cuando se crea una marca el color no se elige porque sí. A lo largo de los años se les ha dado un significado a los colores y en el diseño UX/UI estos colores transmiten unas emociones claras.

Azul

Sin duda el azul es uno de los colores más usados por las grandes empresas e instituciones. Representa simpatía, armonía, paciencia, eternidad, inteligencia.

¿Qué empresas suelen usar estos colores? Los bancos.

¿Por qué? Porque quieren trasmitir esa idea de confianza duradera, combinándose con tonos claros que representan la honradez y la transparencia. Te invitamos a ver las webs de Barclays, BBVA, Banco Sabadell, BMN o Caixa Bank para comprobarlo. 

También las ONG como Unicef, Ayuda en Acción y Manos Unidas utilizan este color.

Rojo

Tradicionalmente relacionado con el amor, la pasión, la fuerza, el calor, el dinamismo y el valor.

¿Te has planteado qué empresas suelen usar este color? Las dedicadas a la automoción. Sí, las marcas de coches y motos más importantes del mercado suelen contar con este color. Tienes el ejemplo de Fiat, Mitsubishi Motors, Honda, Toyota o Ferrari.

Amarillo

Un color cálido que nos evoca a diversión, optimismo, energía (por su relación con el Sol), espontaneidad y alegría.

Aunque es tradicionalmente usado como un Call to Action porque es uno de los colores más vivos y que más llaman la atención hay empresas que lo utilizan como color corporativo y en su web lo tienen muy presente.

Te mostramos el ejemplo de Hertz.

Verde

Sin duda, el verde es uno de esos colores que fácilmente lo relacionamos con algo muy específico: naturaleza, esperanza  y juventud. Es inevitable encontrarnos aquí organizaciones ecologistas tan importantes como Green Peace, que transmiten su mensaje de sostenibilidad, como no podía ser de otra forma, a través del verde.

Naranja

El color naranja nos habla de creatividad, originalidad, calidez y hogar. ¿Sabes qué importante empresa utiliza este color en su web? McDonalds.

Sí, a pesar de que el gigante de la comida rápida no usa el color naranja en su logotipo, hace uso del rojo y amarillo para crear este naranja tan característico con el que inunda su web, atrapándonos, haciéndonos ver que sus restaurantes son sitios acogedores y donde casi podemos respirar ese olor tan característico.

Violeta

El violeta es un color que nos habla de elegancia, fantasía e imaginación. Es un color llamativo y  no es de extrañar que importantes marcas de dulces y chocolates utilicen este color para llegar a los más pequeños. Es el ejemplo de Milka y Cadbury.

Blanco

El blanco tradicionalmente se ha relacionado con la pureza. En diseño UX/UI es un constante, pero no suele funcionar como único color. El blanco suele ir acompañado de colores oscuros, para crear un contraste  y hacer las webs más memorables. Las marcas de moda lo saben, y lo llevan a sus webs. Es el ejemplo de Louis Vuitton, Chanel, Balenciaga o Zara. Esta última, usa el blanco como un constante, acompañándose de grandes textos en negro, creando  espacios “vacíos” dando una imagen limpia a la par que elegante. Este es el ejemplo de cómo una web y el uso correcto del color habla de tu marca.

Negro

Elegancia, sofisticación, seriedad, lujo. De todo esto nos habla el color negro. Pero, ¿qué empresa es capaz de inundar toda web de negro? Pues pocas, porque también se le ha relacionado históricamente con el color de la muerte y esto no convence del todo a las grandes empresas. Otra desventaja es que el ojo humano lee mejor un texto oscuro sobre un fondo claro que al contrario. Hay agencias de Publicidad y Diseño que sí usan este color para desmarcarse de sus competidores y eso es lo que vamos  a explicar a continuación.

¡Que la psicología del color no te limite!

La teoría del color, sin embargo, es en parte ciencia y en parte arte. El hecho de que un color se asocie generalmente con un sentimiento o estado de ánimo particular no significa que no se pueda percibir de otras maneras al combinarlo con diferentes colores, alterar el tono exacto o variar la forma en que se usa entre otros elementos de diseño.

Es también labor del diseñador entender cuál es el objetivo de la empresa y jugar con el color, crear variaciones, diferentes tonalidades, siempre respetando la filosofía de la empresa.

Te hemos puesto el ejemplo de que el rojo es usado por muchas empresas de automoción pero si de repente le das un color verde, amarillo o violeta no pasaría nada. Es decir, puede resultar beneficioso porque estás desmarcándote de tus competidores, haciendo que tu marca sea fácilmente recordable entre las demás.

Haz un estudio de tus competidores y desmárcate

Captura las webs de tus competidores y haz una revisión a los colores que utilizan, esta es la mejor forma de asegurarnos si estamos haciendo un diseño original dentro del sector o por si el contrario estamos repitiendo la vieja estructura aburrida ya aprendida que todos los demás utilizan. Haz que cada diseño que hagas sea memorable.

Aplica la regla 60 – 30 – 10

Si no tienes muy claro cómo combinar colores y en qué medida, deberías conocer esta regla.

La regla 60 – 30 – 10 es conocida como la proporción ideal del color y es aplicada en diferentes aspectos del diseño: gráfico, moda e interior.

Esta regla explica que podemos usar tres colores completamente distintos pero que lo verdaderamente importante es tener un control en la cantidad de color que usamos de cada uno.

• El color dominante de la marca, que normalmente será asociado como nuestro color corporativo, inundará el 60% de nuestra web.
• El 30% irá destinado a un color que acompañará al color dominante, pudiendo hacer juegos y composiciones de entre ambos.
• Y el último color, el menos presente en la web, tendrá solamente un 10% de protagonismo. Normalmente se usaría para Call to Actions que nos faciliten la navegación en la web.

En definitiva, haz caso a la psicología del color pero no tanto.

Ya conoces la psicología del color. A partir de ahí, puedes aprovechar estos nuevos conocimientos para crear paletas de colores más variadas y sofisticadas para tus diseños.

Una paleta de colores bien diseñada, particularmente es una que incluye algunos tonos inesperados, no es simplemente una elección estética. Puede tener efectos psicológicos significativos en los usuarios, que los diseñadores de UX/UI deberían aprovechar para crear mejores experiencias.