Cómo usar los Colores en tu Web o Blog para sacar el Máximo Partido

Read this article in English

Hace ya más de dos meses fuimos invitados para escribir en Octuweb. Un proyecto en el que diversos profesionales del diseño web compartían sus conocimientos sobre el tema. Tanto Ricardo como yo fuimos invitados, y claro, imposible negarse! 😉 Ricardo ya os contará más adelante, pero yo, como no podía ser de otra manera, me decante por compartir algunos comentarios sobre los colores, esta vez aplicados al diseño web.

Os animo a todos que entréis en Octoweb y leáis el articulo completo, así como todos los de nuestros compañeros. La temática es muy variada y completa y seguro que os gustan!
Pero, complementariamente a que os leáis Octuweb, hoy voy a hacer un pequeño resumen, con los puntos fundamentales del artículo anterior, pero añadiendo algunos importantes detalle nuevos. ¿Comenzamos?

¿Qué color escojo para mi web o blog?

Creo (y espero) que nadie de los aquí presentes, tenga alguna duda sobre la psicología de los colores. Ya sabemos el significado de cada uno de ellos, las cualidades que trasmiten y los sentimientos y sensaciones que despiertan, por lo que es fundamental que usemos esos sentimientos para transmitir lo que queremos en nuestro diseño web.

Por si algú[email protected] [email protected] necesita recordar algunos datos sobre los colores, os dejo estos artículos a modo de resumen (también podéis acceder a los artículos de cada color en particular) y algunos en las que comentamos como combinarlos. Porque claro, tan importante es saber qué color he de usar para mi web, como saber con qué colores he de combinarlos:

Guía rápida sobre el uso de colores en el diseño

Combinaciones de Colores con ayuda del Círculo Cromático

Colores más usados y favoritos: Infografía

El color es un arma poderosa del diseño, con el podemos transmitir de manera muy sencilla, distintos sentimientos, si aprendemos a usarla, captaremos a nuestra audiencia de una manera más eficaz.

Combinación de colores en mi web

Antes de elegir los colores usados en nuestra web y que por lo tanto serán nuestros colores corporativos, hemos de tener claro algunos conceptos que nos ayudarán a tomar esa decisión.

¿Para quién destino mi web?

Como ya hemos hablado en numerosas ocasiones, no es lo mismo diseñar para hombres que mujeres, adultos, adolescentes o niños, o para la educación que la sanidad. Hemos de tener claro el público objetivo de nuestra web y pensar en ese segmento y sus características y gustos.

Cuanto mejor hagamos esta primera definición, más fácil será que acertemos con los colores que usemos. Si es una web para niños, quizá el negro no sea el mejor colore, y si es para victimas de maltrato, quizá el rojo sea muy agresivo…

infografia-psicologia-colores

Elige los colores que solo pueden ser tuyos.

Ya sabéis que “verde” así en general significa más bien poco, o mejor dicho, demasiado. Dentro de cada uno de los colores tenemos tantas gamas que hemos de escoger la nuestra, la única con la que nuestra marca tendría sentido. Ese color singular y único para ti.

Cuanto más específicos sean estos más reconocibles se harán con tu marca y por lo tanto contigo.

El color en mi web

Una vez que ya tenemos los colores perfectamente escogidos y hechos nuestros, tendremos que decidir la ubicación de cada uno de ellos en los elementos de la web. Aunque luego hablaremos específicamente de algunos elementos, comencemos por unas nociones generales!

Úsalo para centrar la atención en aquello que desees

El color puede servirnos para que nuestro visitante centre la vista en aquel objeto que queramos destacar. Por ejemplo si en nuestra cabecera encontramos una imagen en blanco y negro, podemos usar nuestro color corporativo para un botón “Call To Action”.

O quizás, podemos usarlo al revés, siendo el color predominante en nuestra cabecera, barra de menú… Obviamente, si nos decantamos por esta opción tenemos que ser conscientes que no podemos ser invasivos. El uso del color en grandes cantidades puede resultar agresivo o aburrido. El que no lo sea, dependerá de como dispongamos los distintos elementos de la web. Hay webs donde predomina un color, como puede ser el caso de  Gagasymphonyorchestra , pero que como veis, solo hace acompañar a los distintos elementos del diseño.

color-predominate-diseno-web

Como decíamos, tenemos que tener claro, cuáles van a ser los elementos que den color a la web y combinarlos entre sí.

Que sea el que de cohesión y flujo

Al igual que veníamos diciendo que podemos usarlo para dar hacer que el usuario centre la visión en el, también podemos (y debemos) utilizarlo para que sea el conductor a través de la web. Con el podemos ir guiando al usuario para que llegue al lugar que nosotros queremos.

Por supuesto, siempre usando nuestra gama de colores y aplicando el mismo tono a todos los elementos de la web.

Imprime tu color a las imágenes

Es muy común que en una web o blog, acompañando al texto encontremos imágenes o ilustraciones. Ellas lo complementan y le dan un estilo más creativo, por lo que ¿porque no usamos esas imágenes para introducir nuestros colores?

Por ejemplo, si nuestros colores son rojizos, podemos intentar introducir imágenes que tengan esos tonos, o que tengan todas un filtro muy parecido que las haga más personales y características. Podemos conseguir que con las imágenes estemos recordando nuestra marca personal e imprimiendo nuestros colores

Elección de colores para los elementos web

Ya hemos decidido cuales serán los colores de nuestra web, y sabemos donde debemos disponerlos, por lo que es el momento de analizar cuáles son algunos de los elementos webs más importantes y cómo podemos introducirles color.

Botón de llamada a la acción

Cuando hablamos de llamada a la acción el naranja es el mejor color para convertir. Aunque hay que tener claro que siempre debe ir en concordancia con nuestro diseño y gama de colores escogida. Como hemos visto antes, podemos usar el color para llamar la atención, sobre un fondo de blancos y grises, al final lo importante es que el botón convierta.

llamada-accion-cabecera

Color de los links

Es normal usar el color corporativo para los link, pero hay que tener claro que no siempre podemos usarlo directamente cambiando el color de las palabras. Si el color es muy claro, podemos utilizar otros diseños de link que harán que nuestros texto se lean perfectamente. Podemos subrayarlos o ponerles fondo por ejemplo.

color-enlaces-legibilidad-web

Fondo de la web

Ya lo hemos hablado en numerosas ocasiones, aunque son muchas las opciones que tenemos para el color de fondo de la web, hemos de tener claro que cuando hablemos de fondo sobre el que irá texto, la mejor opción siempre es sobre blanco: debemos crear contraste y legibilidad. Ya sabéis patrones sí, pero el texto sobre blanco.

combinacion-color-fondo-texto

Conclusiones

No quisiera repetirme más, pero lo diré una última vez (por hoy!) 🙂 Ya que los colores van unidos a nuestros sentimientos y sensaciones, utilicémoslos! Tenemos que diseñar siempre pensando en nuestro público objetivo y teniendo en cuenta los diversos elementos del diseño web.

Comentarios (6)

  1. Muy buen articulo. Muchas veces por desconocimiento ignoramos la importancia de los colores y de manera sencilla lograron transmitir lo esencial.

Deja un comentario

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