DÉJAME TU EMAIL Y RECIBE GRATIS

Mi Ebook con los "5 elementos esenciales que tiene una web profesional de Desarrollo Personal para conseguir clientes"

Además, recibe una sorpresa para crear tus propias páginas de venta.

Cómo elegir los colores adecuados de tu web aún sin ser diseñador

como combinar colores

Al fin has logrado montar tu web después de mucho tiempo invertido.

Ya publicas posts, instalas tus propios plugins y en general te manejas bien con WordPress.

Ha llegado el momento de personalizar tu plantilla.

O quizá ya lo hiciste. Elegiste un color que a tí te gustaba. Tal vez un verde, o quizá un azul. Te parecía que se veía bien, pero después de volverle a echar un vistazo no quedas convencido. ¿Será mejor el azul o el verde?

Incluso puede que haya pasado el tiempo y que lo hayas cambiado un par de veces más. Ya no lo haces porque has quedado confundido e indeciso, pero aún te queda la espinilla sobre qué color elegir.

Mi respuesta: Depende. Pero no del color que más te guste a tí, sino del que mejor proyecte lo que eres como negocio y cómo quieres que te perciban tus clientes.

Sé que esto puede sonarte muy abstacto, por eso vamos a verlo a detalle.

Antes de elegir colores, ten en cuenta…

Pero antes quiero explicarte algo que es imporante que conozcas.

Y es que es escencial que tú como profesional autónomo conozcas qué es lo que ofreces como negocio:

  • ¿Qué productos y/o servicios ofreces?
  • ¿Cuál es el sector o nicho en el que estás inmerso?
  • ¿Cuáles son los valores de tu negocio?
  • ¿A qué audiencia están dirigidos tus productos/servicios?
  • ¿Qué emociones quieres transmitir?

Te estarás preguntando ¿y esto qué tiene que ver con los colores que quiero elegir para mi web?

Todo. Para ser más clara te pondré un ejemplo.

Imagina que eres un psicólogo especializado que ayuda a otras personas a mejorar su autoestima.

A tí te puede parecer que el azul es un color que va para un psicólogo, pero ¿realmente estás atrayendo a tu público a través de este color?

Ya que el azul es un color frío y una de sus simbologías se relaciona con la serenidad y tranquilidad, quizá no sea la mejor elección ya que lo que tú buscas es motivar.

Un color de la gama de colores cálidos cumpliría mejor este propósito.

Lo mismo sucede con el nicho en el que te mueves. Un psicólogo infantil no usaría los mismos colores que un psicólogo que realiza terapias de pareja. Son públicos distintos.

Primero, elige un color de base

Ya tienes claro lo que ofreces, a quién va dirigido y lo que quieres transmitir como marca. Vale, ¿cuál es el siguiente paso?

Es importante que conozcas de antemano esta información porque una vez que tienes claro tus servicios, sector, audiencia y valores, lo que sigue es elegir el color principal de acuerdo al significado del color que mejor transmita tu marca.

A esto se le llama psicología del color. Seguramente lo habrás escuchado. Pero ¿qué es la psicología del color?

Los colores evocan emociones. Si queremos proyectar una imagen de marca adecuada es necesario conocer qué sentimientos provoca qué color.

Por eso te dejo un listado con la emoción que está asociada a cada color.

Quiero aclararte que el uso del color puede tener distintos significados dependiendo del contexto.

El azul por ejemplo puede evocar tanto tranquilidad como sensación de limpieza. Es por ello que tanto una marca de un odontólogo como la de un banco pueden utilizar azul. Lo que los va a diferenciar es el tono que usen, pero eso ya será tema de otro post.

Sin más preámbulo te presento la lista de las emociones que transmite cada color para que puedas elegir mejor tu color principal.

Rojo

Se asocia con la pasión, energía, peligro, agresión, calor, lo erótico. Muchas cadenas de comida rápida usan este color para despertar estímulos de apetito.

Azul

El azul es uno de los colores que más se asocia con colores corporativos porque representa profesionalismo, seguridad, tranquilidad, autoridad. El azul también s muy usar en productos de limpieza.

Amarillo

El uso del amarillo requiere cautela, ya que usado en exceso puede parecer excesivo. Este color es asociado con el sol, y por lo mismo, con la alegría y felicidad, energía. Puede quedar bien su uso para una audiencia infantil.

Verde

Las asociaciones que tenemos con el color verde tienen que ver con lo natural, ecológico, orgánico, fresco, vegetariano. Dependiendo del tono, también se usa para promocionar productos financieros.

Naranja

El naranja es utilizado como un color representativo de la juventud, vitalidad, diversión. Se asocia también con la alimentación sana de frutas con este color.

Blanco

El blanco tiene una fuerte asociación con la pureza, la limpieza, simpleza, el minimalismo, la luz. Es importante tomar en cuenta el blanco y su combinación con otro para resaltar el uso de otros colores cuando se tenga un fondo de color y se empleé el blanco.

Negro

El negro representa la elegancia, el poder, sofisticación y la formalidad. Pero también representa el duelo por una pérdida, la muerte. Es muy usado para marcas personales.

Morado

Este color es muy usado para representar el misterio y la magia, pero también es muy usado para diseños que tienen que ver con lo femenino. Sin embargo, también ha sido usado como sinónimo de lujo a lo largo de la historia por el uso que le daban a este color la iglesia.

Rosa

En la actualidad es muy asociado con lo femenino.

Café

Es un color asociado con la vida rural y exteriores.

Si te quedó alguna duda te recomiendo que leas este artículo de Entrepreneur sobre La piscología de los colores para darte una idea de los múltiples significados que evoca un mismo color.

Llegó el momento de combinar colores

Ahora que ya sabes lo que quieres transmitir como marca e incluso ya has elegido qué color te representa mejor, es momento de combinarlo con otros colores. ¿Por qué? En el mundo del diseño web hay que ser intencional para dirigir a tus usuarios a los mensajes más importantes.

Mi recomendación personal es que elijas 3-5 colores:

  • Un color principal, que es el que representará a tu marca y con el que las personas te van a reconocer y recordar
  • Un color secundario que contraste para llamadas a la acción y mensajes importantes
  • 2 o 3 colores neutrales o pasteles para remarcar tus mensajes principales en fondos o formas pero sin quitar atención de los colores principales.

Con esta información ya puedes elegir qué armonías de color usar, así que aquí va un poco de teoría del diseño.

Teoría del color aplicado al diseño web

La teoría de la armonía del color que nos sirve para combinar colores pero manteniendo una relación con los colores elegidos aunque sean distintos.

Las principales armonías son:

  • Monocromáticos
  • Complementarios
  • Triádica
  • Tetrádica
  • Análoga

Colores monocromáticos

Esta combinación utiliza un mismo color pero el resto de colores a combinar tienen un grado mayor o menor de saturación obteniendo así diferentes tonalidades.

Esta combinación es útil cuando quieres destacar un solo color y combinar el resto de colores con diferentes tonos del mismo.

Combinación análoga

Esta combinación utiliza dos o más colores que están uno al lado del otro en el círculo cromático.

Combinación complementaria

Esta combinación utiliza colores opuestos. Es llamado complementario porque si observamos el círculo cromático, los colores complementarios son los que se encuentran exactamente al lado opuesto del color que hayamos elegido.

Esta combinación resulta útil para crear contraste entre el color principal de tu marca y las llamadas a la acción en botones, ya que cumplen su función de llamar la atención.

Por ejemplo:

Combinación triádica

Esta combinación, como su palabra lo indica, utiliza tres colores diferentes.

Combinación tetrádica

Esta combinación utiliza 4 colores: dos pares de colores complementarios.

Su uso es más complejo, pero usado de forma adecuada puede traer grandes beneficios.

tipos-de-colores

 

Elementos web en los que considerar la elección de colores

Eligir un color que refleje tu marca ya conociendo el significado de los colores y aplicándolo a tu plantilla está bien, pero no es suficiente.

Eso sólo es para que tu audiencia se acuerde de tí a través de ese color que te representa, pero en el mundo del diseño web, necesitas aprender a combinarlos para resaltar los mensajes importantes, las llamadas a la acción, los elementos secundarios, etc.

Para definir la paleta de color principal de tu web necesitarás 4 a 5 colores: Los 2 o 3 principales para tu logo y que también utilizarás para resaltar texto en bold o formas, el color secundario para las llamadas a la acción y un color terciario para ornamentos o decoraciones.

Botón de llamada a la acción

Uno de los elementos más importantes en el diseño web estratégico es el botón de la llamada a la acción, o en inglés “Call to Action”.

Este elemento es el botón clave que guiará tu estrategia. En cada web, lo primero que tienes que ver es un call to action que te invite a realizar una sola acción.

Sí, sólo una. ¿Por qué? Porque si tuvieras más de una, puedes crear en el usuario una confusión que no quieres.

Parte de tu estrategia debe ser tener definido un sólo objetivo para la primera sección que verá tu usuario y encaminarlo a ello.

Un objetivo básico en toda página web que sea un negocio online es invitar a sus usuarios a susbribirse. Esta acción debe quedar clara desde el inicio y la manera de encaminar a tu usuario es mediante los colores.

Un botón de un color que contraste con el color principal de tu marca funcionará bien y garantizará las conversiones.

Debido a la importancia que tiene esta llamada a la acción, estos botones pueden encontrarse en varios lugares de tu sitio web. En todos los casos es recomendable utilizar el mismo color para estos botones.

Algunos lugares comunes donde colocar esa Llamada a la acción son:

  • Home
  • Pop-up
  • Antes de finalizar el footer
  • Sidebar
  • Al finalizar o en medio de un post o página

Color de links

Los links son otro de los elementos importantes en una web y que además añaden ese toque de personalización que ayuda a resaltar la marca.

Una manera de resaltarlos es hacer que los links de tu web sean del mismo color que tu marca principal o subrayándolos.

Elementos de diseño en imágenes

Para añadir un toque mayor de personalización, es común ya encontrar muchas webs y blogs con imágenes personalizadas que llevan algún elemento decorativo de la marca.

En este caso es recomendable que estos elementos de marca sean o del mismo color que tu logotipo para que tus usuarios relacionen ese color con tu marca o un color complementario para la estética general de la web.

Ejemplo de caso de éxito

A modo de inspiración quiero compartir contigo la página web de Cristina Viartola, psicóloga especializada en temas de autoestima y salud emocional.

ejemplo-de-como-combinar-colores

¿Te das cuenta del papel que juegan los colores? En el mundo online, aunque no tenemos un lugar físico, tu página web es como el consultorio que visita tu usuario y en donde pasa tiempo leyendo tus contenidos, es por ello que debes transmitirle confianza al reflejar lo que eres como negocio.

Y tú ¿cómo elegiste la combinación de colores para tu web? ¿te gustó? ¿qué tips nos darías para mejorar la manera en que combinamos colores? Cuéntamelo en los comentarios ;).

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Compartir5
Twittear
Compartir12
17 Compartir