COMPARTIR

Entendiendo la psicología del color para un diseño web impactante

PUBLICIDAD DIGITAL

Redactado por Mónica Angeles

Publicado el 13/07/2019

No es ningúnsecreto que la psicología del color se utiliza ampliamente en todos losaspectos del diseño.

Desde los colores que se utilizan en los artículos de comestibles del día a día hasta los logotipos de marcas y el diseño de sitios web, el color es un elemento importante que puede transmitir un mensaje específico a los usuarios.

SegúnKissmetrics, cuando vemos un color, nuestros ojos envían un mensaje a unaregión del cerebro llamada hipotálamo.

A su vez,esto envía más señales a la glándula pituitaria y luego a las glándulastiroides.

Esto indicala liberación de hormonas que causan fluctuaciones en nuestro estado de ánimo,emociones y, como resultado, nuestro comportamiento.

La ciencianos dice entonces que el color evoca emociones que pueden dar lugar asentimientos negativos, positivos o desiguales.

Kissmetricscontinúa diciendo que toma solo 90 segundos para que un visitante del sitioforme un juicio u opinión.

Además,“el 62-90% de esa interacción está determinada por el color de un productosolo”.

Como se describe en el libro electrónico gratuito Diseño web para el ojo humano, el color juega un papel innegable en la creación de una primera impresión fuerte en los usuarios:

Que significan los colores

Cada colorsignifica algo para cada persona, aunque este significado varía según nuestraspreferencias personales y nuestro entorno cultural.

Para una referencia rápida, eche un vistazo a la tabla de colores a continuación.

Lapsicología del color en el diseño no es una ciencia exacta y los estudios handemostrado que está afectado por las percepciones individuales.

Las consideraciones sociales como el género también tienen un impacto en cómo se percibe el color.

Otrosestudios han encontrado que no siempre es el color lo que produce un impacto,sino que también se trata de lo apropiado que el usuario considera que el colorusado es para la marca que lo usa.

Entonces, siestás diseñando para mujeres, entonces el púrpura es una apuesta bastantebuena, ya que lo prefieren las mujeres pero no les gustan los hombres (entérminos generales, por supuesto).

En la imagen de abajo, esto se usa con buenos resultados para L’Oreal Paris.

Como puedever, el encabezado y el pie de página son negros, lo que denota clase yelegancia, por lo que tiene la sensación general de que el producto no esbarato, sino de alta gama.

Además, elblanco se usa para el texto, que denota modernidad y una sensación de calma,mientras que el púrpura se ha elegido para denotar lujo, elegancia y feminidad,todo lo cual es claramente apropiado para un sitio como este.

(Paraobtener más información sobre el diseño minimalista y el uso del espacio enblanco como herramienta de diseño, consulte los libros electrónicos gratuitosLa elegancia del minimalismo y El zen del espacio en blanco en Diseño web).

En la imagende abajo, para la revista Salud de la Mujer, la pancarta superior es de colorrosa, pero, por lo demás, el sitio carece de color y se basa en imágenes ynavegación audaz. Esta es una opción interesante y que podría funcionar encontra del sitio.

Paraempezar, el rosa es un color muy estereotipado para usar cuando un sitio estádirigido a mujeres, y atrae a los golosos, por lo que el mensaje del sitio, enel sentido de que se trata de la salud femenina, podría perderse debido a esto.

Una vez queprofundizamos en el sitio, por supuesto, el color del encabezado se usa en cadapágina, pero una visita rápida a la sección de Pérdida de peso devuelve losiguiente.

Como puede ver, esta página es aún más rosada, lo que podría resultar contraproducente para la audiencia. Sin embargo, la primera imagen que vimos fue en un control deslizante, y esto cambia a medida que usted permanece en la página.

Determinarun esquema de color

Es pocoprobable que cree un sitio que tenga un solo color (a menos que vaya puramentemonocromático), por lo que debe considerar el esquema de color general y cadacolor individual, así como la forma en que funcionan bien juntos.

Consideratambién el impacto en el usuario y cómo los colores secundarios se ajustan alcolor primario que estás usando.

Teniendo esto en cuenta, debes tener cuidado al mezclar colores y, para ayudarte con esto, puedes guiarte por tres métodos básicos de mezcla de colores.

# 1:Triádico

Este es elmétodo más básico y equilibrado, que utiliza la vibración del color y lacomplementación.

Con la rueda de color de 12 pasos, puede seleccionar cualquiera de los tres colores que se encuentran a 120 grados uno del otro para el fondo, el contenido y la navegación.

# 2:Compuesto (Split Complementario)

El segundométodo es un poco más difícil y es posible que tenga que experimentar parahacerlo bien, pero puede ser muy efectivo si se hace bien.

Este concepto utiliza cuatro colores: dos pares contrastantes (cerca de la rueda de colores) y dos pares complementarios (a través de la rueda de colores).

# 3: Análogo

Este métodose enfoca solo en colores complementarios y debe tener cuidado al decidir quéquiere que el esquema le diga al usuario.

Como destaca la vitalidad de los colores elegidos, puede ser demasiado, ya que los colores son esencialmente exagerados.

Por lotanto, al considerar la psicología del color, es importante que considere todoslos colores como un todo y cómo trabajarán juntos, en lugar de elegir uno yesperar que funcione junto con otros, como el fondo, el texto y los botones.

Eche un vistazo a la página de abajo y considere lo que dice al usuario.

Color de fondo: el fondo negro denota clase, excelencia, formalidad y “corporativo”.

Claramente, cuando se considera un sitio que ofrece tutoría, la excelencia es algo que usted querría transmitir.

La formalidad sugiere que está vinculado al aprendizaje, mientras que “corporativo” sugiere que los usuarios podrían no estar aprendiendo a codificar como un pasatiempo, sino más bien como algo que llevarían adelante en su carrera.

Colores de los botones: el sitio utiliza botones rojos para los botones de la CTA que se destacan claramente sobre el fondo negro para fomentar el registro.

El negro se utiliza con un borde blanco para los botones menos importantes, de acuerdo con el esquema general.

Color del texto: para el texto, el blanco proporciona ese contraste tan importante, al mismo tiempo que combina el esquema de color.

Los iconos delineados en blanco (y los botones fantasma blancos) están colocados en la parte derecha para alentar a los usuarios a desplazarse hacia abajo para obtener más información si es necesario.

Los iconos delineados en blanco (y los botones fantasma blancos) están colocados en la parte derecha para alentar a los usuarios a desplazarse hacia abajo para obtener más información si es necesario.

En general, el diseño funciona muy bien; todos sabemos que el blanco y el negro van bien juntos y, en este caso, el sitio se siente elegante y relativamente formal.

El rojo, si se usa en exceso, podría quitarle un significado al mensaje general, por lo que, en cambio, se usa con mucha moderación para destacar y aclarar que la acción deseada es inscribirse en el servicio.

foto de Mónica Angeles

Mónica Angeles

Licenciada en Comunicación Social de la Universidad San Martín de Porres (USMP) con más de 10 años de experiencia, actualmente me desempeño como UX Content Strategist.

Diplomada en Community Manager y Social Media Management. Trabajo como gestora de contenido y estrategias digitales con marcas reconocidas del rubro cosmético, automotriz, hotelero y supermercados. Docente en diferentes centros de estudios superiores, destacando Toulouse Lautrec.


Suscríbete al Blog.

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *

Publicaciones relacionadas

imagen del post
Realidad Extendida: Diferencias entre la virtual, la aumentada y la mixta

Por Luisana Puy-arena

22/08/2019

La realidad extendida surge con el fin de englobar las distintas herramientas que parten de un mismo concepto tecnológico.

LEER MÁS
imagen del post
Ciberseguridad en la era digital: ¿cómo protegerse de un ciberataque?

Por Luisana Puy-arena

20/08/2019

Todos estamos expuestos a un ciberataque, por ello, es fundamental conocer cuáles medidas de ciberseguridad tomar para evitar ser una víctima.

LEER MÁS
imagen del post
Cómo generar leads de calidad mediante estrategias de Marketing Digital

Por Mónica Angeles

19/08/2019

¿Qué es exactamente la generación de leads y por qué hoy depende del marketing? Para dar respuesta a estas preguntas sigue leyendo el artículo.

LEER MÁS