Usando los colores para aumentar la conversion

La primera impresi√≥n es la que cuenta ¬ŅCu√°ntas veces habremos o√≠do esta frase a lo largo de nuestra vida? ¬ŅCientos, miles? Pues bien, en el mundo del dise√Īo web, tambi√©n la oiremos otras tantas, porque la primera impresi√≥n que un usuario obtiene de nuestra web es la que cuenta.¬†Como ya sabemos, tenemos muy pocos segundos para convertir una visita en un nuevo cliente. De hecho, son menos de 10 segundos los que tarda un usuario en decidir si se queda en nuestra web o le da al bot√≥n ‚ÄúBack‚ÄĚ. ¬ŅNo es terror√≠fico?

Para conseguir que el usuario nos d√© una segunda oportunidad y lea nuestro contenido, se interese por nuestro servicio o compre nuestro producto, tenemos que captar su atenci√≥n de alguna manera. Y ¬ŅQu√© mejor forma de conseguirlo que llegando a √©l a trav√©s de los elementos m√°s visuales de nuestra web? Los colores.

Los colores, al igual que la tipografía de una web, influyen muchísimo en el usuario. Los tonos que utilicemos en nuestro site van a transmitir sentimientos, sensaciones e ideas a nuestros visitantes. De ahí la importancia de meditar detenidamente su elección.

La gama de colores que usemos en nuestro sitio web debe ser una decisión estudiada a fondo, no se puede tomar a la ligera. Hay que tener en cuenta muchos factores, tale como: nuestro logotipo, qué sensación queremos transmitir, qué tipo de web queremos ser, etc.

Los dise√Īadores web deben tener muy claro cada uno de estos aspectos para poder hacer la mejor selecci√≥n crom√°tica y conseguir transmitir lo que somos¬†con ayuda de los colores. Por esta raz√≥n, no hay que dejarse llevar por nuestras preferencias de color; sino por la eficacia que cada uno presente en relaci√≥n con nuestros objetivos.

En resumen, elegir el color adecuado para un proyecto de dise√Īo web requiere mucho tiempo y habilidad, as√≠ como el conocimiento del producto o servicio que queremos ofrecer.

En este post, vamos a tratar más a fondo la importancia de los colores. A continuación, resumiremos los conceptos que se asocian, en muchas ocasiones, a cada uno de ellos.

  • Blanco: sencillez.

  • Negro: seriedad, elegancia.

  • Gris: desgana, indiferencia.

  • Amarillo: claridad, esplendor.

  • Azul: calma.

  • Rojo: pasi√≥n.

  • Violeta: quietud.

  • Naranja: atenci√≥n.

  • Rosa: secreto.

  • Verde: esperanza, naturaleza.

También tendremos que tener en cuenta que su combinación puede evocar sensaciones distintas. No es lo mismo rojo sobre rosa, que nos transmitiría desagrado y malestar; que rosa sobre azul, que podría evocar dulzura.

Cuando hablamos de colores nos referimos a toda su gama, toda la paleta cromática que ofrecen. Sin embargo, esta gama se reduce un poco cuando hablamos de colores web o colores para la web ya que no todos los monitores pueden interpretar de igual forma los datos de color. Por ello, es muy recomendable que trabajemos siempre en el entorno RGB de color (entorno óptimo para trabajar en web).

Ejemplos del uso del color en el dise√Īo de p√°ginas web

Para poner en práctica todo lo que estamos comentando, pondremos ejemplos de webs que han conseguido transmitir su personalidad e identidad, gracias a la correcta utilización del color en su web.

Siempre debemos basarnos en los denominados colores neutros. Estos colores son el negro, el blanco y el gris (en todas sus tonalidades). Suelen usarse principalmente para los fondos.

Lo que se recomienda, en cuanto a colores, es que no utilicemos m√°s de tres diferentes en una misma p√°gina. Lo ideal es utilizar un color base (color neutro), un color complementario y un color de contraste. √Čste √ļltimo especialmente indicado para las llamadas a la acci√≥n o para resaltar espacios importantes del site. ¬†Por ejemplo, si tenemos una base de colores neutros y le a√Īadimos un toque de amarillo (como color de contraste), mostraremos un car√°cter elegante pero, a la vez, juvenil y dulce.

mea-cuppa

¬ŅQu√© os transmite? Los pasteles en amarillo le dan un toque dulce a la elegancia y clase de los tonos neutros.

Otra opción sería basar nuestra estrategia cromática en 4 colores básicos, pero con multitud de tonalidades. Con ello la paleta aumenta, pero no llega a producir sensación de agobio para el usuario.

Observa el uso de los colores en este ejemplo:

llenadegracia

Tiene muchos colores, pero realmente se corresponden con una misma escala crom√°tica compuesta por tonos azules, violetas y rosas.

No cansan la vista del usuario porque no se ha abusado de su utilizaci√≥n. Con ellos se ha creado un motivo floral que da un toque animado al site, pero no provoca, en ning√ļn caso, desagrado.

Observa el siguiente ejemplo basado en el uso de una sola escala de color:

el marisco

El color de toda la web est√° totalmente relacionado con su producto y, a su vez, es agradable para el usuario.

Si, por el contrario, le damos un toque verde a toda nuestra web, transmitiremos sencillez, confianza y seguridad a nuestros usuarios. Como prueban estos dos ejemplos:

northgate

leroymerlin

Si queremos evocar naturaleza, vida saludable y bienestar, se recomienda utilizar una paleta dulce y moderna. Colores pastel, azules y verdes serían perfectos para transmitir lo natural. Como puedes ver en el siguiente ejemplo:

floresylibros

Como ya hemos apuntado anteriormente, para llamar la atención del usuario en espacios concretos de nuestra web, debemos utilizar un color de contraste; especialmente si queremos incitar al usuario al desarrollo de determinadas acciones.

El color de contraste, en este ejemplo, es el naranja y sus derivados. Este color se usa, sobre todo, en las llamadas a la acción. Observa:

webpositer

Tambi√©n es imprescindible que el color de nuestra web no choque con el color de nuestro logotipo. Hay que ser coherente y mantener la gama de colores corporativa que identifica nuestra marca. ¬ŅOs imagin√°is la web de Coca-cola azul?

cocacola

¬ŅO la de Heineken en rojo?

heineken

El rosa es un color de fondo poco utilizado. Se le tiene miedo pero, bien combinado, da un refinado toque de buen gusto.

rosa

En resumen:

  • T√≥mate tu tiempo para seleccionar los colores de tu web.

  • Insistimos en la importancia de los contrastes para las llamadas a la acci√≥n.

  • Los colores brillantes han de utilizarse con moderaci√≥n, tienen mucho m√°s potencial para provocar una acci√≥n que los utilizados con frecuencia.

  • Un fondo neutro funciona bien con casi todo.

  • No es bueno distraer al usuario con muchos focos de color.

¬°Ahora te toca a ti! Da el paso definitivo con un correcto uso del color. ¬ŅComenzamos?