Blog >> Algunos consejos sobre Diseño Web (I): colores

Bueno, va siendo hora de seguir incluyendo contenido en el blog e intentar realizar algún modesto aporte sobre algunas de las técnicas o consejos relacionados con el diseño web. Esto viene a raíz de una conversación el otro día con María Berenguer en el cual salió a colación el tema del color y su importancia. Lo cual me ha llevado a replantearme el tema de colores de la web. En cuanto tenga un momento lo revisaré, prometido.

Para mí uno de los factores que más condicionan y es de lo más difícil elegir en muchos casos es el tema de los colores. La elección de colores no es algo aleatorio o que se pueda elegir a la ligera, pues es un condicionante tremendo luego a la hora de enfocar la web. Tengamos en cuenta que el efecto psicológico de una gama de colores influye tremendamente en la percepción del usuario.

Existe una gran cantidad de información sobre el peso psicológico y los diferentes sentimientos que despiertan en las personas los colores. ¡Ojo! El mismo color en diferentes personas pueden tener distintos significados. No os quiero contar en diferentes culturas,  así que atentos a eso.

Psicología de los colores

• Rojo: Toda la gama de los rojos se consideran colores con mucha energía, dinámicos, relacionados con la sangre. Sin embargo tened cuidado, pues un rojo demasiado brillante puede ser molesto a la vista. Por contra los colores granates están dotados de fuerza, pero son más conservadores. Combinaciones de rojo y blanco suelen ser bastante afortunadas. Sino, recordad los colores de la Coca-cola.
• Naranja: Es un color vibrante, enérgico y relacionado con la juventud y la diversión. También se suele combinar con el blanco. Ojo con las combinaciones con el negro y el gris oscuro. La de páginas de juegos que he visto con esa combinación. Suelen utilizarse en páginas muy agresivas. También se relaciona con la fruta y el sol.
• Amarillo: Son colores vibrantes (ojo con eso, si lo son demasiado pueden cansar si son muy brillantes) así que utilizar mejor tonos oscuros. Se suelen relacionar con la riqueza. Utilizadlo en combinación con colores oscuros, como complemento. También con colores ocres tienen relación con el otoño y la naturaleza. Si tuviera que hacer una página web de una casa rural me decantaría por los colores ocres fijo.
• Verde: Es un color vitalista, relacionado con el dinero, la primavera. Combina bien con el blanco y el negro, pero no con los colores cálidos (sino se acierta con los adecuados) porque se refuerzan, así que ojo con eso. Personalmente me gustan mucho los colores verdes saturados y los colores oscuros. Dan mucha viveza pero sin cansar.
• Azul: Es un color frío, tranquilo y que desde su gama más brillante a la más oscura suele quedar bien con casi cualquier color. Suele utilizarse mayoritariamente en sitios profesionales o de ventas. Transmite confianza y seriedad. Complementario: el amarillo.
• Morado y violeta: Relacionados con la infancia y lo femenino. Creo que es color favorito por el 90% de los niños. Los colores más oscuros se relacionan con el lujo y la exclusividad. Un sitio de juguetes en morado y blanco tiene mucho que ganar.
• Rosa: Relacionado tradicionalmente con las niñas, inocencia, los dulces. No es mi color favorito, para qué voy a mentir. Pero puede que en algún proyecto debáis utilizarlo. ¿En la página de Barbie?
• Marrón: Relacionado con la artesanía, los muebles, decoración, etc. Es un color acogedor porque recuerda la madera. En una tienda de muebles quedaría muy bien.
• Gris: Relacionados con la inteligencia, seriedad. También por convención se asocian con el estatus desactivado, así que no abuseis de él o vuestra web transmitirá una sensación de «apagado». Como fondo están muy bien los tonos claros sino queréis cansar la vista del lector. Muy recomendado en páginas con mucho texto.
• Negro: Relacionado con el lujo combinado con el amarillo. También con la noche, los vampiros, el heavy (como no) y la muerte. Pero claro, en el caso de las culturas orientales el color del luto es el blanco… Como veís la psicología del color es un mundo.

Para no cansaros, os incluyo un enlace a Wikipedia si queréis ampliar información: Wikipedia – Psicología del color.

Herramientas de selección de color

Bueno, hasta ahora nada nuevo bajo el sol. Hay miles de páginas en internet que hablan y explican la psicología del color. Y libros de diseño gráfico, para qué os voy a contar. Pero lo difícil de los colores no es sólo elegir cual, ¡sino además el tono y con cuales combinarlos! Y eso sí que es difícil.

Existen muchas normas escritas y básicamente son teoría del color y por suerte existen muchas herramientas en Internet que nos permiten elegir la gama de color. Vamos a repasar un par que conozco:

• http://colorschemedesigner.com/. Si existe una herramienta cuasi-definitiva es esta. Es muy sencilla y nos quita muchos quebraderos de cabeza. Directamente y tras elegir el color principal o colores que vamos a utilizar en la web nos muestra una lista de colores, ya sea una relación de colores en la misma gama, complementarios, triadas, etc. E incluso una vista previa de los colores elegidos en una web para que nos hagamos una idea del resultado. Después de elegir los colores solo es necesario copiar su código y ¡a diseñar!
• http://www.colorsontheweb.com/colorwizard.asp. Similar a la anterior herramienta también te permite elegir un color de base y jugar con diferentes tonos, complementarios, etc. Hasta obtener una paleta de colores que os satisfaga y se ajuste a lo que vais buscando.

Tip: Bueno un detalle a tener en cuenta. La calibración de los monitores. Realmente sólo un 5% de todos lo monitores del mundo están calibrados (y seguro que he sido optimista) con lo cual es muy difícil que el color que veas en tu monitor de diseño sea igual que el color que ven tus usuarios. Así que mucho cuidado con eso. Es más, en las antiguas configuraciones de 256 colores (8 bits) y algunos monitores antiguos de TFT, realmente en lugar de mostrar color verdadero (24 bits), solían mostrar muchos menos. Bastantes modelos de TFT se quedaban en 15 o 16 bits, con lo cual os podéis imaginar la diferencia que supone.

Para evitar estos problemas se utilizaban los denominados safe-colors. Una paleta de color de 256 colores que de algún modo garantizaba que se viera igual en todos los sistemas. Hoy en día está bastante superado, pero si queréis garantizar a todas luces que vuestro diseño sea lo más parecido posible a lo que habéis pensado podéis utilizar dicha gama. Si os interesa el tema, aquí tenéis un enlace a dicha paleta y sus códigos de color: Safe colors.

Tenemos logo y colores de empresa

Bueno, si tenemos logo y colores de empresa ya tenemos por donde empezar. Ayuda mucho a la hora de seleccionar los colores de una web, pues ya tenemos cuando menos uno de los colores corporativos y eso es intocable. Y si además tenemos un logotipo, mejor que mejor. Sin exagerar, tener un logotipo con unos colores corporativos es tener casi el 50% del trabajo de diseño hecho. Huid de los proyectos en el que el logo lo ha hecho «un amigo mañoso».

No nos engañemos, hacer un logo es algo muy difícil. Las pocas veces que me ha tocado preparar alguno se pierde realmente mucho tiempo y siempre hay que tener diversas versiones para que puedan opinar varias personas. Intentar transmitir por medio de una imagen y color el mensaje de una empresa no es ninguna tontería y en mi caso me he sentido afortunado si ha sido bien recibido.

Un buen logo si está cuidado y lo ha hecho un profesional te proporciona una imagen o un «feeling» sobre lo que quiere transmitir y a lo que se dedica la empresa o cliente que te ha encargado la web. Por eso, siempre que sea posible, pide que te envíen el logotipo y busca un lugar predominante en la web. Generalmente el lado superior izquierdo. A continuación introduce el código de color/es de la empresa en cualquier herramienta de las mencionadas anteriormente y verás cómo la creatividad comienza a correr por tus venas. Del mismo modo, un mal logotipo o unos colores que no pegan entre sí te pueden arruinar el trabajo.

Y creo que por hoy no está mal. Se aceptan sugerencias y críticas.

Autor: Oscar Gascón Arjol
Última actualización: 17 de febrero de 2013