Para ver el impacto que tiene el color en la experiencia general del usuario de un sitio web, solo es necesario quitar un tono para ver cómo se ve afectado el flujo visual.
Si bien el color crea el estado de ánimo y la sensación del sitio al dirigir la atención del usuario a ciertos elementos, hay muchas maneras de abordar el uso del color. Tono, valor y saturación son las tres dimensiones integradas del color que, cuando se usan correctamente, pueden mejorar el mensaje del sitio tan bien, si no mejor, que usar colores llamativos.
En este artículo, profundizaremos en la psicología del color en relación con el diseño web y veremos ejemplos de sitios que usaron el color de manera persuasiva en sus esfuerzos de creación de marca.
Para una introducción al color, uno debe referirse a la rueda de colores, ya que presenta una secuencia ordenada lógicamente de matices puros. Estoy seguro de que está familiarizado con los colores primarios: rojo, amarillo y azul; y secundarias: verde, naranja y púrpura, que se forman al mezclar las primarias.
Los colores terciarios se componen de los colores intermedios como el amarillo verdoso y el azul verdoso. Se crean mezclando un color primario y un color secundario. A menudo nos referimos a la rueda de colores porque se puede usar para crear esquemas de colores armoniosos, lo que lleva a una experiencia visual efectiva.
Las dos opciones de colores publicitarios más populares en Estados Unidos, azul y rojo, se utilizan con frecuencia en sitios web de todo el mundo. El azul connota confiabilidad, lealtad y sinceridad, y suele ser el favorito de los negocios debido a estos atributos.
Pero el azul no es para todos y el mejor método para determinar el color (o colores) correctos para su marca o sitio web es considerar primero el grupo objetivo al que intenta llegar.
Los colores tienen diferentes significados para varios grupos de edad, culturas y nacionalidades. Tienen el poder de ir más allá de las connotaciones y mantener la atención del espectador, comunicar de qué se trata el negocio y realizar una venta.
Cuando piensa en el impacto que tiene el color en una audiencia en particular, es fácil ver por qué las empresas dedican mucho tiempo y esfuerzo a elegir el correcto.
Una solución común para llamar la atención sobre los enlaces monocromáticos es darles un fondo tenue para resaltarlos de la página. Esta técnica se muestra en la navegación para AppZapper.
El enlace activo en la navegación para Font Explorer tiene un estilo diferente al resto, lo que le da al usuario un vistazo rápido de dónde se encuentra en el sitio web.
Bronto utiliza colores saturados para llamar la atención sobre su navegación. Este equilibrio funciona bien con el resto del sitio, que es más tenue pero ocupa más espacio en la pantalla.
Postbox utiliza rojo y azul en sus botones de llamada a la acción. Estos botones grandes y altamente saturados hacen un gran trabajo al llamar la atención sobre la acción prevista que debe realizar el usuario: descargar o comprar el software. Compare cómo le iría al botón menos saturado justo debajo ya la derecha si esos botones cambiaran de color.
El color azul complementario se usa en el botón de llamada a la acción en Live Resto para diferenciarlo del diseño y agregar énfasis.
El sitio web minimalista y limpio de Billings utiliza encabezados azules vibrantes para enfatizar.
una pequeña naranja hace uso de los colores de su marca en la lista de publicaciones de noticias recientes. El color no abruma, ya que se usa con moderación con un fondo blanco para suavizar su vitalidad.
Si el texto de su sitio está diseñado para escanear en lugar de leer, está bien tener texto gris sobre un fondo negro. En el sitio web para VersionesAppla monotonía se rompe mediante el resaltado y el uso de toques de color a lo largo del texto.
A veces, la mejor solución es tener texto oscuro sobre un fondo blanco. La legibilidad no es un problema con este método. Cuando sea necesario, puede incorporar color en comillas o viñetas como se muestra arriba para Webinpixels.
También deberíamos pensar en el color en términos de accesibilidad para usuarios daltónicos. Después de todo, estas deficiencias de color afectan aproximadamente al 8 % de los hombres y al 0,5 % de las mujeres.
Lo bueno de diseñar para este nicho es que todo lo que se necesita es un buen criterio de diseño. Por ejemplo, no utilice colores con valores de brillo similares a los de la base de su sitio web. Esto hace que el texto vibre y puede provocar ojos llorosos.
Además, si va a usar un cambio en el color de fondo para designar un estado de desplazamiento, asegúrese de que tenga suficiente contraste y que sea diferente en su brillo relativo.
También es una buena idea agregar otro elemento de diseño, como un trazo a un botón cuando este botón está activado, proporcionando más contraste.
Los botones de llamada a la acción en el sitio web de Notify cuentan con un trazo de brillo exterior que contrasta cuando el usuario se desplaza sobre ellos. Estos pequeños detalles añaden contraste al botón.
Hemos pasado la era del diseño web en la que tenemos que usar tantos colores llamativos como sea posible para captar la atención del usuario. Afortunadamente, hemos desarrollado una idea de cómo podemos transmitir un mensaje utilizando tonos de un color.
El uso de colores monocromáticos en los diseños es una práctica común para los diseñadores que desean representar una interfaz equilibrada mientras se enfocan en la UX general en lugar de simplemente colorear las cosas.
Como verá en los siguientes ejemplos, es posible crear un diseño atractivo e informado simplemente usando un color.
La máquina de facturas utiliza una escala de grises para el diseño del sitio web de su software de facturación. El azul, el color común para los enlaces, se usa como borde alrededor de los botones, enfatizando su importancia en relación con el resto del sitio. Esto hace que los botones se destaquen sin dar como resultado una apariencia tridimensional burbujeante.
Davroc Interiors crea una experiencia visual relajante en su sitio web. Pase el cursor sobre las fotografías para revelar imágenes a todo color que agregan una capa de interés al sitio web minimalista. El azul, el color de enlace universal, se utiliza en áreas de todo el sitio para mejorar la experiencia del usuario.
Laboratorio de metales también utiliza un esquema de color monocromático en su sitio web. Observe el uso de la saturación en el botón superior derecho. Los colores saturados son efectivos en botones, enlaces, alertas y mensajes del sistema porque captan la atención del usuario. Es importante usar estos colores con moderación, ya que demasiados pueden ralentizar al usuario.
Cuando se usa correctamente, la saturación puede ser emocionante y dinámica.
El gris es un color común que se usa en el diseño web en estos días porque no compite con los colores saturados y desaturados.
La ausencia de color en El sistema de cuadrícula sitio es una gran oportunidad para hacer uso de espacios en blanco y tipografía en negrita cuando sea necesario. Dichos elementos ayudan a crear una jerarquía al agrupar elementos según su importancia.
Puede haber millones de colores por ahí, y como diseñador mi objetivo es elegir aquellos que se ajusten a la misión y el negocio de mi cliente.
Mientras que algunas empresas adoptan el color como una herramienta para mejorar el dinamismo, otras se desaniman cuando se usa esporádicamente. A través de los ejemplos que he mostrado en este artículo, espero lograr un equilibrio entre estos extremos: uno en el que el color se pueda usar en toda su vitalidad pero aún así sea elegante, y enfoques alternativos para el uso del color, como el color monocromático. esquema.
¿Ha notado una tendencia de color que no se aborda en este artículo? ¡Házmelo saber en los comentarios!
Imagen cortesía de Viktor Hertz
