CREATIVA 3 (9)

Desde la edad media, científicos han documentado los efectos emocionales de los colores. No debería ser sorpresa que diferentes colores evoquen diferentes emociones.

Para dominar un medio visual como el diseño web centrado en la experiencia de usuario, también debes dominar los colores. Desafortunadamente, no todos tienen el tiempo de zambullirse en las tecnicismos de la teoría del color o arte.

Para empezar, hemos recopilado una pequeña guía que cubra los principios básicos de los efectos únicos de cada color y cómo relacionarlos con el diseño web centrado en UX.

Rojo

Agresión, importancia, pasión

Uno de los colores más empoderantes, atribuidos simultáneamente al amor y la guerra, el color rojo ofrece los efectos psicológicos de incrementar la circulación sanguínea y acelerar la respiración y el metabolismo, ya sea bueno o mal.

Solo piensa en el concepto de la alfombra roja.

Fuente: Playtlka

Fuente: Playtlka

Cuando se usa el rojo con cuidado, puede ser bastante útil. Es una buen resaltador de elementos que necesitan atención, pero en exceso inhibirá la relajación. El rojo claro quita energía, es bueno para temas como juventud y amor, mientras que el obscuro enfatiza el poder y la durabilidad, como la sangre o los ladrillos.

Anaranjado

Energía, jocosidad, accesibilidad.

Como puedes haber adivinado, color colores varían en grados por la ubicación en el espectro, así que los colores como el rojo, anaranjado y amarillo (colores «cálidos») tienen efectos similares, pero en diferentes niveles. El anaranjado comparte los aspectos estimulantes del rojo, pero en un menor grado. Esto brinda un aura energética sin la agresión del rojo.

crear-emociones-diseño-web-centrado-ux-2

En anaranjado es un color jocoso y optimista, genial para páginas web casuales, pero no siempre la mejor opción para páginas web empresariales. Encontrarás diferentes interpretaciones del anaranjado: algunos dicen que promueve la impulsividad, otros dicen que incrementa el apetito (para páginas web culinarias), mientras que otros dicen que demuestra accesibilidad económica, para bien o para mal.

Amarillo

Amigabilidad, felicidad, atención.

De forma extraña, el amarillo representa tanto alegría como ansiedad, activando ambos en el cerebro.

Al igual que otros colores cálidos, es generalmente energético y optimista, pero en escalas más brillantes puede ser un colo usado para señales de advertencia.

crear-emociones-diseño-web-centrado-ux-3

Si usas amarillo, puedes intentar bajarle la intensidad o aumentarle el brillo para una experiencia más dulce. El amarillo claro recuerda a los usuarios el sol y la felicidad, y sus tonos obscuros (como el dorado) son más serios y brinda la sensación de antigüedad.

Verde

Crecimiento, naturaleza, éxito

Las asociaciones más obvias con el verde son las plantas (y por ende, naturaleza).

Pero más que eso, el verde llena el vacío entre colores cálidos y fríos (azul y morado), haciendo el color más balanceado.

crear-emociones-diseño-web-centrado-ux-4

El balance del verde se presta para ser usado en llamadas a la acción, usando la visibilidad de los colores cálidos por las relajantes cualidades de los colores fríos. En sus connotaciones naturales, brinda una sensación de crecimiento y prosperidad.

Azul

Confianza, confort, relajación.

Sin duda alguna, el azul es uno de los colores más importante en el diseño web centrado en la UX, y uno de los más frecuentes. Esto se debe, particularmente, a su rango, donde el azul claro y oscuro ofrecen diferentes características.

Sus asociaciones con el agua le brindan un efecto calmante, lo que lleva a la amistad que «invita» a los usuarios a visitar una página web.

No es coincidencia que las dos redes sociales, Facebook y Twitter, usen el azul como su color principal. Esta amigabilidad relajante también se traduce en confianza inherente, razón por la cual es usado por bancos —piensa en el branding de Citybank, BBVA o Banco de crédito (junto con el anaranjado)

crear-emociones-diseño-web-centrado-ux-5

El azul claro acentúa las cualidades amigables y puede ser energizante si fuese lo suficientemente brillante, mientras que el obscuro en más sombrío, enfatizando los aspectos de seguridad y confianza (razón por qué encaja bien en el mundo empresarial).

Aunque el azul ofrece una riqueza de beneficios, tiene una limitación: es un supresor comprado del apetito.

Morado

Lujo, romance, misterio.

Históricamente relacionado con la realeza, el morado retiene este aire de realeza en la actualidad. El morado insinúa que un producto o página web es de alga gama, aunque no lo sea —el efecto opuesto del anaranjado.

crear-emociones-diseño-web-centrado-ux-6

Debido a que el morado regresa al rojo en el espectro, comparte algunas de sus características románticas, especialmente en tonos más claros, como el lavanda. El morado obscuro, por otro lado, genera misterios y subtonos más sensuales.

Rosado

Feminidad, inocencia, juventud.

Saliendo de los colores primarios, el rosado en tanto único como lo suficientemente común para mencionarlo.

El rosado es más conocido por sus asociaciones con lo femenino, pero tiene lazos fuertes con la juventud y la inocencia que va con ella. No obstante, está siendo usado de forma independiente de su relación de géneros.

crear-emociones-diseño-web-centrado-ux-7

El rosado es el color de los dulces, así que este color brinda un aire de jocosidad casi infantil. Como un matiz del rojo, también puede ser usado para temas románticos más relacionados al «amor joven» en lugar de un amor clásico. El rosado no siempre significa feminidad.

De hecho, usar rosado en exceso por sus «cualidades femeninas» puede fácilmente irritar a los usuarios al consentir roles tradicionales de género.

Marrón

Estabilidad, rústico, tierra.

El marrón no funciona para la mayoría de las páginas web, pero con las que sí funciona lo hace a la perfección.

Por sus fuertes lazos con la tierra y los árboles, genera una sensación rústica, antigua y perfecta para productos relacionados con actividades al aire libre, incluso productos orgánicos . Las connotaciones con la madera también sugieren estabilidad y confianza.

crear-emociones-diseño-web-centrado-ux-8

Con sus temas de naturaleza, barro, suciedad y tierra, el marrón es similar al verde, aunque más masculino y menos estético.

Negro

Poder, sofisticación, provocador.

El negro es el más fuerte de todos los colores y requiere algo de cuidado —esta es la razón por qué es usado comúnmente solo en texto y acentos. El negro atrae la atención más rápido que los otros colores, incluso el rojo, así que puede mejorar o empeorar la jerarquía visual que intentas usar.

imagen (Fuente: Cartelle)

Cuando es usado como un componente principal en un esquema de color, como un fondo, el negro crea su propio lazo emocional como cualquier color.

Puede tomar un tono misterioso, incluso terrorífico, pero esto puede ser llevado a los extremos. Por lo general, el negro es visto como maduro y sofisticado. El negro acentúa los colores que usa en conjunto, así que es un resplandor colorido es más potente con un fondo negro.

Blanco

Virtud, esterilidad, salud

Al igual que su opuesto, en color negro, el blanco acentúa los colores a su alrededor, lo que lo convierte en una opción popular como color secundario.

Cuando es usado mucho, el blanco brinda una sensación de limpieza,lo que puede ser usado para brindar un efecto de esterilidad. Esto lo hace una opción popular para hospitales y la industria médica, tanto en medio tradicionales como digitales. En algunas culturas, en especial la occidental, el blanco representa virtud e, incluso, santidad.

imagen (Fuente: ETQ Studios Amsterdam)

Aunque el blanco es un color dominante, su esterilidad puede ser abrumadora. Si tu página web blanca parece muy austera, trata de una usar una rama del blanco. El color marfil y el crema pueden funcionar bien en estos casos: son más suaves, pero brindas las mismas ventajas.

Gris

Formalidad, neutralidad, profesionalismo.

Como puede adivinar, el gris representa la neutralidad.

Aunque corre el riesgo de lucir aburrido, los buenos diseñadores de páginas web lo reconocen como una buena herramienta: al alterar su tono, el gris puede tomar las características de tanto el negro como el blanco, hacia cualquier grado.

Por ejemplo, si el negro es muy fuerte, usa un gris obscuro.

imagen (Fuente: Galvan Mobill)

Cuando es usado como un colo primario, el gris brinda la impresión de formalidad, que fácilmente puede ser convertido en profesionalismo o tradición.

Beige

Acentuación de otros colores

Cerraremos este artículo con un colo especial, beige. No tiene propiedades por sí solo, pero crea el complemento perfecto para acentuar otros colores dominantes.

imagen (Fuente: Beige Alain Ducasse)

Aunque es blando por sí solo, el beige mejora las características de cualquier otro color con el que sea emparejado. Es el color de respaldo perfecto para mantener la atención en el color primario.

Conclusión

Cada color lleva sus propios significados. Depende de ti usarlos con prudencia.

Traducido y adaptado de Studio UX Pin. Si encuentras un artículo interesante en idioma inglés sobre Diseño Web, Redes Sociales, Imagen Corporativa o Programación, háznoslo saber en los comentarios y nuestro equipo considerará su traducción y publicación.

Deja una respuesta