Una vez planteada la estructura y el contenido de nuestra web mediante un boceto (mockup), comenzamos con mi fase favorita; el diseño. Como sabéis, el diseño consta de muchos factores tales como tipografía, formas, fotografía… Y uno de los más relevantes, sin duda, se trata del color. En el siguiente artículo, te detallo cómo crear paletas de colores web, qué debes tener en cuenta y herramientas que te facilitarán el proceso, ¡arrancamos!
Nuestra marca, la protagonista – Como crear paletas de colores web
Una de las identidades más potentes de nuestra marca es el color. Si hemos realizado un branding correcto, contaremos con uno o dos colores corporativos fuertes que identificarán nuestra marca en base a unos criterios de comunicación (a quién queremos llegar, qué queremos transmitir, etc). Hemos de utilizar nuestro color corporativo con cierta predominación en la web, ya que es nuestro sello de identidad y queremos que el usuario memorice y nos recuerde por ello.
Uno de los colores de marca más famosos del mundo, sin duda es el rojo de Coca-Cola. En la imagen podemos ver cómo lo utilizan a modo de recurso para estructurar, destacar e identificar secciones/elementos en su página web.
La psicología del color – Como crear paletas de colores web
Cuando seleccionamos un color, debemos dejar de lado nuestras preferencias personales. Nuestro objetivo es centrarnos en el usuario y qué queremos transmitirle. Para ello, hemos de conocer bien las connotaciones de cada color y sus posibilidades.
A continuación, te cito los principales colores con su percepción y ejemplos de sectores a los que podemos aplicarlo:
- Azul: Confianza, calma, limpieza, seriedad. Sectores: Limpieza, bancos, abogacía, consultorias, etc.
- Rojo: Pasión, intensidad, agresividad, peligro, energía. Se puede aplicar a: Snacks, automóviles, deporte, etc.
- Verde: Naturaleza, serenidad, fresco, crecimiento. Se puede aplicar a: Alimentación, ecológico, naturaleza, etc.
- Amarillo: Calidez, amabilidad, positivismo, optimismo. Se puede aplicar a: marcas de transporte, mensajería, alimentación,etc.
- Naranja: Amigable, juventud, diversión, accesible. Se puede aplicar a: refrescos, equipos de salvamento marino, entretenimiento, etc.
- Morado: Creativo, delicado, fresco, intimidad. Se puede aplicar a: centros de estética, productos eróticos, magia, centros espirituales, etc.
- Marrón: natural, masculino, tradicional. Se puede aplicar a: productos como el café, chocolate, empresas artesanas, etc.
- Rosa: Femenino, amable, suave, cariño, amor, protección. Se puede aplicar a: centros de estética, zona infantil, productos femeninos e íntimos…
- Blanco: inocencia, divinidad, pureza, armonía, limpieza, salud. Se puede aplicar a: Productos de invierno, clínicas y centros de estética, masaje, hospitales…
- Negro: Elegancia, formal, tenebroso, fúnebre, estatus, firmeza. Se puede aplicar a: productos masculinos, perfumes, marcas de vehículos, moda, etc.
Jerarquizando elementos – Como crear paletas de colores web
Una vez seleccionados los colores principales para nuestra paleta (basándonos en los dos puntos anteriores) deberemos seleccionar otros tonos secundarios. Esto nos ayudará a crear composiciones más elaboradas y a jerarquizar los elementos según importancia. En total, podemos tener por ejemplo, una paleta de 5 colores aproximadamente con uno o dos colores principales, y el resto secundarios.
Vamos a ver un caso real para que puedas entenderlo mejor:
El color corporativo de getpocket sería el rojo, pero a su vez también utiliza un azul aguamar como color principal. El rojo se utiliza para destacar los elementos con más importancia (el botón que llama a la acción para registrarte mediante Google +) y el aguamar para destacar elementos relevantes, pero no tanto como el registro. En el caso de la 2ª captura (dentro de mi dashboard), se destaca la acción principal en rojo, y otro elementos como la sección o pestaña en la que me encuentro en azul.
Como colores secundarios, Pocket cuenta con una variedad de grises que nos ayudan a diferenciar secciones y cajas contenedoras de elementos, entre otras.
Herramientas de apoyo para seleccionar mi paleta – Como crear paletas de colores web
Antes de lanzarnos con esta importante decisión, te recomiendo que tomes inspiración de los colores de marca de los más grandes: brandcolors. En esta página, encontrarás ejemplos de los colores utilizados en empresas como Amazon, Blackberry, Carrefour, Shopify, etc.
Y para finalizar, el último regalo para hoy son mis tres herramientas preferidas para ayudarte a seleccionar colores para web:
- Flat ui color – flatuicolorpicker. Rápido y eficaz. No presenta una gran variedad de tonos, pero si no quieres arriesgar o dedicarle demasiado tiempo a tu búsqueda, es una buena opción para seleccionar colores funcionales y en tendencia.
- Coolors – coolors .Ideal para combinar. Selecciona el código de tu color corporativo y genera al instante una paleta de 5 colores para tu web. Hay infinidad de combinaciones.
- COLOURlovers – colourlovers. Para los más investigadores. Se trata de una comunidad con sugerencias de paletas según temáticas, tendencias, etc.
¡Y esto es todo por hoy! Seguro que tras estos consejos, te sientes más preparado para decidir qué colores utilizar en tu página web con un criterio objetivo. ¡Comparte con nosotros tus experiencias!
