Blog

El uso de colores en diseño web: lo bueno, lo malo y lo feo

Atrás quedaron los 90 con sus feos diseños y combinación de colores de página web. Hoy en día, las plataformas para desarrollo de sitios son bastante amigables y con cientos de diseños preestablecidos para elegir. Estas plantillas son editables, permitiendo introducir imágenes, cambiar el tipo de letra e incluso el color en general.

El problema surge cuando en el diseño color página web no se toma en cuenta que existe toda una teoría y reglas para elegir y combinar colores. Si se hace una selección al azar el resultado puede ser contraproducente, porque no va de acuerdo con la marca, no luce bien o dificulta la lectura. Esto solo provocará que los usuarios no permanezcan por mucho tiempo en tu sitio.

 

Pero ¿por qué es tan importante una correcta elección de colores? Según Kissmetrics, el 85% de los compradores colocan al color como la razón primaria para elegir un producto. Para hacer una correcta elección de color diseño web es importante comprender algunos principios básicos:

Psicología del color

Cada color tiene un significado y pueden emplearse para transmitir diferentes mensajes y emociones. Por ejemplo:

  • Rojo: Es un color que denota intensidad, pasión y se utiliza al igual que el naranja para estimular el apetito, por ello son tan empleados en las cadenas de comida rápida.
  • Amarillo: Jovialidad, optimismo y juventud.
  • Azul: Tranquilidad, profesionalismo.
  • Verde: Naturaleza, dinero y salud.
  • Negro: Elegancia y formalidad.

Es importante emplear cada color dentro del contexto adecuado. Nunca utilizaremos un rojo o negro como color diseño web de un hospital o un amarillo para un despacho de abogados que busca lucir serio y profesional.

Gamas de colores y combinaciones

Las combinaciones complementarias se forman con aquellos colores que se encuentran situados en el extremo contrario del circulo cromático, por ejemplo el naranja y azul, el rojo y verde o el amarillo y morado.

Los colores complementarios crean un efecto visual más vibrante e intenso cuando se colocan cerca uno de otro, sobre todo en un monitor o dispositivo que emite luz, por ello su uso debe ser limitado para alguna zona donde desees llamar la atención. Puedes utilizar distintas intensidades de dos complementarios para crear una gama de colores vibrante.

 

Las combinaciones análogas se producen con los colores que se sitúan a un lado en el círculo cromático, por ejemplo el amarillo con el naranja o el morado con el azul.

 

Una combinación monocromática es aquella en la que se eligen diferentes intensidades de un mismo color. Estos tonos se encuentran en la misma línea del círculo cromático.

 

Si aún tienes dudas, a continuación te damos algunos ejemplos sobre lo que es funcional y estético y lo que definitivamente no lo es en un diseño color página web.

1. En bloques de texto

Lo bueno

Utilizar colores neutros y que contrasten con el fondo, que de preferencia debe ser blanco o muy claro.

Lo malo

Texto y fondo con colores que hagan poco contraste dificultando la lectura. El color de los links en tono similar al resto del texto o que no resalten del color de fondo.

Lo feo

Texto con colores brillantes. Colores complementarios entre texto y fondo.

  1. En el fondo

Lo bueno

El infalible blanco o colores claros tomando en cuenta los principios de la piscología del color

Lo malo

Fondos de colores brillantes u obscuros. Si deseas emplear un color oscuro para el fondo procura que la tipografía sea lo suficientemente gruesa y en un color claro.

Lo feo

Fondos con textura, que además de lucir muy poco profesionales producen fatiga visual. Fondos con una fotografía y, peor aún, una fotografía que se repite formando un patrón.

  1. En la cabecera

La parte superior del sitio web por lo general se coloca el logotipo de la empresa con algún slogan y el menú de navegación

Lo bueno

El color detrás del logo  en una gama similar o que haga un contraste agradable con el fondo.

Lo malo

Logotipo y fondo en colores poco contrastantes. Menús en colores poco atractivos. Color de logo que no vaya de acuerdo a la identidad corporativa.

Lo feo

Llenar la cabecera de elementos, fondo con texturas, demasiados colores.

Un último consejo: cada monitor varía un poco las tonalidades, así que, después de elegir la paleta de colores que utilizarás, procura observar cómo lucen en distintos dispositivos y hacer las correcciones necesarias para que se vea bien en cualquier parte.

Un buen diseño se caracteriza por expresar, con la menor cantidad de elementos, sin ruido visual, de forma armónica y simple, la imagen corporativa de la empresa. Los colores de página web no son la excepción, estos deben ser lo más ad-hoc al perfil de la marca, favorecer la lectura y evitar la fatiga ocular.

email
¿Quieres recibir todas las novedades de nuestro blog directamente en tu correo? ¡Suscríbete Ahora!
¿Te gustó este artículo? Compártelo en tu redes:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Contestando esta pregunta

¿Es necesario contar con un sitio web para publicar en Google Ads?

Seleccionaremos al ganador entre todos los participantes. Revisa los  términos y condiciones de nuestro concurso.

Contestando esta pregunta

¿Es necesario contar con un sitio web para publicar en Google Ads?

Seleccionaremos al ganador entre todos los participantes. Revisa los  términos y condiciones de nuestro concurso.