comments 4

Diseño web: Color de un call to action

Tras un primer artículo de bienvenida, nos ponemos manos a la obra con un tema de los densos: el color, y como afecta al diseño web (para bien y para mal).
Y es que elegir un color porque es bonito o porque queda bien es decoración, no diseño. El diseño requiere mucho más. El diseño es tomar una decisión estética en base a una función o un objetivo. Y eso es lo que vamos a hacer en este artículo, pero enfocado a un ejemplo web.

La interfaz de usuario (UI) en el diseño web es fascinante y compleja. Se conforma de diferentes elementos como son la tipografía, el color, imágenes, copywritting, el sistema de navegación, botones, iconos, animaciones, barras de búsqueda…etc. Y todos estos elementos tienen que estar en armonía para que realmente el sitio funcione, y podamos conseguir el efecto que estamos buscando en el usuario. Lo mismo ocurre con el color.

Un ejemplo práctico

El ejemplo práctico consiste en un cliente que tiene un servicio online de complementos alimenticios naturales. Este cliente está interesado en realizar una campaña de email marketing para notificar a sus subscriptores de una oferta temporal para vender un producto concreto. El correo tendrá un enlace a una landing page.
Una landing page es una página de aterrizaje, y es una página, generalmente temporal, sin navegación, cuyo objetivo es conseguir una acción por parte del cliente, ya sea una compra, una suscripción…etc.
Esta conversión, generalmente se realiza mediante lo que se llama un call to action, que básicamente es un botón que necesitamos que nuestro cliente pulse para realizar la conversión. Esa es nuestra misión. Nuestro objetivo, como diseñadores, es que el mayor número de visitantes a nuestra landing page, acabe pulsando el dichoso botón.

Así que en este post vamos a elegir, de forma razonada, una serie de colores para una landing page, buscando con el color, el máximo número de conversiones posibles.

Para nuestro ejemplo, y por resumir, vamos a suponer que partimos del siguiente wireframe de baja calidad:

Este es un wireframe rápido de la estructura de la landing page del ejemplo.

Este es un wireframe rápido de la estructura de la landing page del ejemplo.

La sección de la landing que vamos a estudiar se compone de una imagen principal con un claim (un eslogan), un texto de apoyo (descripción) y un botón de call to action.

¿Quieres seguirme paso a paso mientras diseño, desarrollo y lanzo al mercado un producto?
Únete a Diario de un Producto y conoce todos los detalles:

COMENZAR PROGRAMA

Antes de empezar a tomar decisiones, debemos de ver un poquito de teoría.

Una guía breve sobre el color y que te recomiendo encarecidamente leer es la Rocket Design: Guía de color de Rocket Design.

El color: un poco de teoría

La rueda de color

La rueda de color básicamente es un círculo que se compone de 12 colores. 3 colores primarios, (rojo, amarillo y azul), otros 3 secundarios que se forman como mezcla de los colores primarios y que son el naranja (amarillo + rojo) el verde (amarillo + azul) y el violeta (rojo + azul) y los seis colores restantes son los colores terciarios, y se forman de combinar los colores secundarios. Todos juntos quedan más o menos así:

La rueda de color con sus 12 colores.

La rueda de color con sus 12 colores.

Los colores cálidos y fríos

La mitad de la rueda de color la componen los colores llamados cálidos, y son el rojo, el naranja, el amarillo y sus terciarios, y la otra mitad los colores fríos, el verde, azul y el violeta y sus correspondientes terciarios.
Los colores cálidos siempre prevalecen sobre los colores fríos. Por eso verás muchas webs con fondos basados en colores fríos, y los call to action con colores calientes, con la intención de guiar al usuario siempre hacia ellos.

Los colores provocan sensaciones a nuestros usuarios, como por ejemplo, el rojo es una señal de peligro o de acción, por eso es tan usado en las páginas de deportes o noticias, y el azul representa confianza, por eso es tan usado como color principal en las web corporativas.

Fíjate en el color principal de estos diarios deportivos. ¿Casualidad? No.

Fíjate en el color principal de estos diarios deportivos. ¿Casualidad? No.

Para nuestro ejemplo, el verde está relacionado con la salud y la naturaleza, por lo cual será un gran punto de partida si lo elegimos como color principal.

Las Paletas de color

Para nuestros diseños, usamos paletas de colores que se componen del color o colores principales y los que usamos para la tipografía, etc.

Las paletas monocromáticas: basadas en un solo color, pero jugando con la saturación, el tono y el brillo. En la mayoría de ocasiones es más que suficiente este tipo de paletas. Elegimos un color principal, y jugando con la saturación y el brillo obtenemos nuevos matices de este color. En muchas ocasiones, y sobretodo en web, es contraproducente el introducir paletas de colores demasiado variadas, donde el color principal no está claro y definido, ya que provoca distracción y poca coherencia al usuario.

Análogos: los colores que se encuentran adyacentes en la rueda de color son análogos. Por ejemplo, los colores análogos del naranja son el rojo y el amarillo.

Complementarios: son los colores que están situados de forma diametralmente opuesta en la rueda de color. Por ejemplo, el color complementario del verde es el violeta. Se utilizan mucho para hacer diseños con mucho contraste y dinamismo.

Neutrales: el negro, el blanco y el gris son colores neutrales, y los utilizamos generalmente para fuentes y para completar nuestras paletas de colores. Son los que nos permiten fijar la atención en el contenido.

El contraste

El contraste es la clave de todo. En función de como manejamos el contraste controlamos y guiamos la vista de nuestro usuario a donde nos interesa. El contraste se puede conseguir con el color o con luz-oscuridad. Por poner un ejemplo, si en una web con fondo blanco, colocamos una sección con fondo oscuro es como poner un faro al usuario.

Ejemplos reales en la web

Vamos a ver ahora esta teoría en casos prácticos reales:

ejemplo 1 azul corporativo y analogos

En esta web de Hootsuite podemos ver que el color principal es el color azul oscuro, lo que le otorga un importante efecto corporativo y de confianza, aunque quizá demasiado frío. Para el call to action han usado un color análogo, en este caso el verde. El color azul y el verde, si te fijas en la rueda de color, están contiguos. Para guiar al usuario a la zona del claim y el call to action han utilizado un color neutro, casi blanco, enmarcando con el tanto superior como inferiormente con la barra de navegación y la zona de trust con los logos de sus clientes. Como ésta landing verás miles iguales…

www.tvsafety.org

Este ejemplo es perfecto para ver la relación entre fondo de color frío y call to action con color cálido. De hecho, para potenciar aún más este efecto, y llevar al usuario a estos botones, se han usado colores complementarios. Adivina que color hay justo enfrente del verde en la rueda de color: exacto, el rojo.

www.unbounce.com

www.unbounce.com

Este es otro ejemplo basado en los dos anteriores. Su color principal es el azul oscuro, aportando así un fuerte toque corporativo a la web, y para el call to action han usado un color complementario. Adivina cual es el color que está justo enfrente del azul en la rueda de color: correcto, el naranja.
Para potenciar al botón como protagonista se usa también la relación entre colores fríos como fondo y calientes para las zonas de interés para el usuario.

www.spotify.com

www.spotify.com

Spotify es uno de los clásicos usando colores análogos. Como vimos antes en la rueda de color, el azul y el verde son adyacentes. Según la teoría los colores análogos usados de forma conjunta no suelen ser tan impactantes. ¿Qué ocurre entonces en este caso?
El contraste. Esta es una de las landing con más contraste. Esta landing se lee desde el centro hacia abajo, hacia el botón del call to action, pero es realmente por el contraste del slogan en blanco en fondo oscuro y la inercia de ir leyendo hacia abajo.

La mejor manera de aprender es analizar lo que hacen otros, intentar estudiar lo que hay detrás de lo que proponen otros. Te invito a que a partir de ahora analices las landing que te encuentres y veas como realmente están funcionando. Es la mejor manera de aprender y descubrir nuevos usos.

El color en nuestro ejemplo

Vista un poco la teoría aunque sea muy por encima, y vistos algunos ejemplos del color y como se usan en algunas landing pages, vamos a analizar nuestros caso.

La primera reflexión es que de nada nos vale una combinación de colores para que destaque el botón del call to action. No ganamos nada si lo que más predomina en la página es un botón rojo que pone COMPRA!, porque no estamos informando al usuario de nada. El usuario no tiene ningún motivo para pulsar el botón por mucho que hagamos que le llame la atención. Necesitamos algo más.

De lo que se trata es de dar un mensaje al usuario y conducirlo hasta la acción que nos interesa en una secuencia. Es como contarle una historia, y el color debe guiar a nuestro usuario a través del mensaje completo para que sea efectivo y se convierta en un cliente.

Tenemos que tratar el call to action como si de una escena de una película se tratase. Tenemos que intentar conectar con el espectador para provocarle la emoción que estamos buscando en él. Una escena perfecta, con un guión perfecto, se puede echar a perder si elegimos mal la banda sonora. Lo mismo ocurre con el color en un call to action.

Y en nuestro ejemplo, para contar esta historia al usuario, vamos a usar el sentido de lectura natural, que en culturas occidentales es de izquierda a derecha y de arriba hacia abajo. Esto es muy importante para saber en que zonas utilizar un color u otro. El color debe ayudar a ser el hilo conductor de la historia.

Nuestra paleta de color va a contener como color principal el verde, por estar relacionado con la salud y la naturaleza.
La atención del usuario cuando entre en nuestra landing va a ir a la imagen superior y luego irá a la derecha (movimiento natural), y leerá el claim.
Irá primero a la imagen porque es el elemento más poderoso que presentamos, y por la localización que tiene según nuestro wireframe, en la zona superior, la zona más cara de nuestro “escaparate”. Al claim o eslogan llega por la inercia natural de la lectura.
Las zonas donde tenemos imágenes tienen mucha atracción para el usuario, pero nosotros necesitamos guiarle a la zona inferior, donde tenemos más detalles. Y para ello vamos a usar el contraste.

La paleta de colores que hemos creado manualmante.

La paleta de colores que hemos creado manualmante.

Según el wireframe de baja calidad adjunto, necesitamos que nuestro usuario haga el recorrido entre los puntos 1 al 4 para que la conversión sea efectiva. Como si de un juego de estrategia se tratara.

El wireframe de baja calidad propuesto

El wireframe de baja calidad propuesto

Como hemos usado un color neutro blanco para el fondo general de la landing, ahora oscurecemos la zona donde está el texto de apoyo, y nuestro cliente bajará a él tras leer el claim.
Es una de las formas más efectivas de guiar la vista de nuestro usuario tras una imagen.
Nuestro usuario leerá de izquierda a derecha de forma natural, perfecto, y ahora, dentro de dicha zona con contraste, a la derecha, cuando termina de leerlo todo, le ofrecemos el botón, para que de una forma sutil, y tras haber leído todo el contenido en el orden que queríamos, pulse el botón y … bingo! una conversión.

O no, porque la única forma de comprobarlo es utilizando métricas, y comprobando el porcentaje de conversiones en relación con las visitas totales que sean válidas (no accidentales). Esa será la única forma de comprobar si nuestra hipótesis ha sido correcta o no.
En estos casos es interesante realizar al menos otra propuesta, y mezclarla en la campaña de correo, para comprobar cual está siendo más efectiva. Es lo que se denomina A/B Testing, pero eso ya es otra historia que veremos en otros post.

En nuestro caso hemos creado una paleta manual de colores en base a un único color: el verde, y a partir de él han nacido los demás. Es decir, hemos creado una paleta monocromática verde con colores neutros obtenidos a partir de él.

La aplicación gratuita de Adobe para los diseñadores: Kuler

La aplicación gratuita de Adobe para los diseñadores: Kuler

Pero hay otras formas de crear paletas de colores, como por ejemplo con la herramienta Kuler, de Adobe.
Es una potente herramienta donde puedes generar paletas en base a la teoría que vimos anteriormente.

flat ui colors

Otra forma de crear paletas es visitando la web: Flat UI Colors donde tienes una serie de colores para empezar a crear tu paleta de colores.
En ocasiones es buena idea usar las paletas de colores de otras webs que te gusten y que consigan los objetivos que buscas, para ello puedes utilizar una captura de pantalla, y con cualquier editor de imágenes usar el picker para obtener el valor de color.

Calculando el color corporativo de Facebook desde Sketch

Calculando el color corporativo de Facebook desde Sketch

En esta imagen vemos como obtener el color principal de Facebook con una herramienta de obtención de color. En este caso mediante la app Sketch, que es exclusiva para Mac.

Otra forma interesante para crear una paleta de color es a través de una imagen:

Imagen de partida

Imagen de partida

En este caso vamos a crear una paleta a partir de una imagen con tonos de color marrón.
Para ello en photoshop, con la herramienta Filtro, hacemos un pixelizado, de tipo mosaico, tal y como muestra la imagen.

Aplicando el filtro

Aplicando el filtro

Le indicamos la cantidad del efecto, y voilá, ya tenemos paleta de colores. Ya podemos aplicarlo donde queramos.

tutorial 1 03

Solo falta elegir los tonos que se deseen.

Solo falta elegir los tonos que se deseen.

Espero que con este post teórico-práctico sobre el color hayas podido sacar conclusiones sobre qué colores usar en tus landing y porqué, y sobre todo cómo hacerlo.
Éste ha sido un artículo anormalmente largo. El motivo ha sido que, al ser el primer post, no quería dividirlo en diferentes partes, si bien las próximas entradas serán más breves.

Para cualquier aportación puedes utilizar los comentarios. Y si te ha gustado, por favor, comparte este artículo.

Clasificado como: Diseño

Sobre el autor

Escrito por

Me llamo Francisco Gallardo , y soy diseñador de productos de software, mobile y web. Soy diseñador de UX, de interfaces y desarrollador web y iOS.

4 Comentarios

  1. Eloy

    Grande Francisco! Me ha encantado la entrada. Enhorabuena! Muy profesional.

  2. FranciscoJGallardo

    Muchísimas gracias por tu comentario Eloy. Me alegra mucho que te haya gustado! Un saludo

Leave a Reply