Una introducción a teoría del color para los diseñadores web

Hoy vamos aprender la importancia del color en el Diseño Web y la forma de elegir un esquema de color agradable. Este artículo es parte de nuestra serie: “Básicos”. Tiene por objetivo proporcionar explicaciones prácticas y concisas de principios de diseño para las personas con poca experiencia de diseño… ¡Empecemos!

A quiénes se escribió este artículo:

Este artículo se escribió para personas que están empezando a aprender los principios formales de diseño. No significa que va a ser un estudio comprehensivo de cómo aplicar color a un diseño (vamos a tener un montón de esos artículos en el futuro), pero por ahora, es una revisión general para las personas que buscan un consejo práctico que los ayude a acercarse a la teoría del color dentro del contexto de un diseño de un proyecto web.

He estado escribiendo este artículo debido a que siempre he encontrado cierta dificultad para decidir sobre un esquema de color que funcione bien para un proyecto, y es, probablemente, una de las decisiones más difíciles que he tenido que hacer como diseñador. Sin embargo, aprendiendo las bases de la Teoría del Color y con algunas excelentes herramientas disponibles en la web he sido capaz de fortalecer mis diseños y de hacer a un lado esta debilidad.

Algunos candidatos para el público objetivo:

• Un programador que este buscando un consejo para ayudarle a crear un prototipo atractivo a la vista.
• Un aspirante a diseñador que quiere una breve descripción del tema.
• Alguien que no entiende la diferencia entre Desarrollo Web y Diseño Web.

En simples palabras… ¿Qué es la Teoría del Color?

La Teoría del Color actualmente ocupa un enorme número de temas, pero en el nivel más básico es esto: la interacción de los colores en un diseño a través de la complementación, contraste y la vitalidad.

“…es la interacción de los colores en un diseño a través de la complementación, contraste y la vitalidad”.

Mientras que la primera parte de esta definición (la interacción) es muy sencilla —y admitámoslo, muy suave—, es en al menos los 3 últimos términos que se define la Teoría del Color:

Complementación:

La complementación se refiere a la forma como vemos los colores, pero en términos de su relación con otros colores. Cuando los colores ocupan los extremos opuestos del espectro de color, llevan a la gente a considerar que es un diseño visualmente atractivo, mediante el establecimiento de un término medio el cual el ojo puede descansar. En lugar de esforzarse por acomodarse en un área particular del espectro de color, al ojo se le proporciona un equilibrio. Hay dos usos comunes de la complementación: el espectro de color Tríadico y el Compuesto, que vamos a discutir más adelante. La complementación puede llevarte a nuevos niveles de sofisticación del diseño cuando empiezas a dominar las complejidades de las combinaciones de color.

Contraste

El contraste reduce la fatiga visual y se enfoca en la atención de los usuarios mediante la presentación nítida de los elementos en una página. El ejemplo de contraste aparentemente mejor, es una efectiva selección de un color de fondo y uno de texto, como se muestra abajo:

Si tienes alguna duda, la mejor practica, usualmente, es seleccionar un color muy claro para el fondo y un color muy oscuro para el título. Esta es una de las áreas donde la teoría del color es crucial para la facilidad de uso de un diseño web. En la mayoría de los proyectos, “Las grandes áreas de texto no son un buen lugar para tratar de ser realmente creativo, sino para que sea simple y legible”.

Junto con el texto establecido para la lectura, el contraste también puede llamar la atención de los visitantes hacia un elemento específico de la página. Piense en resaltar un bloque de texto: ¿Cómo? Cuando quieras llamar la atención de los usuarios hacia una porción específica de la página haces que el área que lo rodea luzca diferente que el resto del texto, es decir; RESALTAS EL CONTENEDOR DEL BLOQUE DE TEXTO, no pongas mucho esfuerzo en el diseño del texto que tiene que ser sencillo, pero legible. El mismo principio se aplica al Diseño Web: Usando una variedad de colores de alto contraste puede ayudarte a centrar la atención de los visitantes a un elemento específico de la página.

Si tu sitio web tiene un fondo de color oscuro, enfócate en poner el contenido principal con un color claro.

Los principios también se aplican a los colores Análogos (los cuales discutiremos más adelante):

Vitalidad

Suena tonto, pero la vitalidad del color dicta la emoción de tu diseño. ¿Por qué? Veamos un ejemplo; los colores brillantes hacen que los usuarios se sientan más enérgicos como resultado de tu diseño. ¿Cuál es el resultado? Que es particularmente efectivo cuando estas intentando hacer una publicidad a un producto o provocar una respuesta emocional. Por otro lado, los tonos oscuros relajan a los usuarios. El objetivo: permitir que su mente se centre en otras cosas (el contenido por ejemplo). Un buen ejemplo de este punto, es la comparación entre el sitio web de CNN y el sitio de Ars Technica. Veamos: :

El sitio web de CNN cuenta con un banner de color rojo en la parte superior que conduce a la intensidad emocional de los usuarios ya que estos son estimulados mediante la vitalidad del diseño (y el contraste entre el color rojo y blanco, y blanco y negro es el esquema de color principal del sitio).

Ars Technica, utiliza un esquema de color oscuro para su fondo y para sus títulos para relajar a los usuarios y enfocar su atención hacia su contenido. Haciendo esto, su técnica y escritura detallada es considerada la vanguardia del sitio. Y aún más importante, los usuarios están autorizados a transferir la energía mental que tradicionalmente reservan para responder a los colores vibrantes para entender el contenido del artículo.

¿Cómo selecciono un Esquema de Color efectivo?

Aquí hay 3 de las comúnmente aceptadas estructuras de color para un buen esquema de color, son: Tríadico, Compuesto y Análogo.

Veamos cada uno de ellos, a continuación:

Esquema de Color Tríadico.

Compuesto de tres colores en los extremos separados del espectro de color. Hay una manera más fácil para crear un esquema de color Tríadico:

1. Toma una rueda de color y elige el color de base.
2. Dibuja un triangulo equilátero en este punto.
3. Los tres puntos del triangulo formaran tu esquema de tricolor

Usando un Triangulo Equilátero, puedes asegurarte de que los colores tienen igual vitalidad y se complementan entre si apropiadamente.

Esquema de Color Compuesto (Dividir complementario).

El Esquema de Color complementario esta basado en proporcionar una variedad de Colores Complementarios: Son seleccionados dos colores de los extremos opuestos del espectro de color. Al hacer esto, el diseñador ha conseguido más libertad en su diseño mientras que también se beneficia de la apariencia visual de los Colores Complementarios.

Análogos

Un esquema de color análogo esta basado en una selección cuidadosa de colores en la misma área del espectro de color. Usualmente, los colores son visualizados por su vitalidad y su contraste cuando se compara uno con otro.

Dos ejemplos de colores análogos son:

1. Tonos de Amarillo y Naranja.
2. Una selección Monocromática (tonos de un color base).

Apenas el principio…

La belleza del lugar donde estamos en la historia en este momento es que nos podemos beneficiar de siglos de investigación científica y las teorías artísticas del color. Hay volúmenes completos que han sido escritos sobre la minucia de la Teoría del Color, por lo que voy animar aquellos que realmente quieren profundizar en el tema para encontrar uno de los numerosos libros académicos disponibles para aprovechar algunos de los conceptos más profundos. También estaremos publicando artículos más profundos en el futuro sobre “la teoría del color para diseñadores web”, aquí en Webdesigntuts+ :).

Pero por lo pronto echemos un vistazo a algunas de las mejores herramientas que puedes usar para experimentar tu mismo:

Algunas formas para hacer tu vida más fácil

Gracias a Dios, que hay algunas herramientas a nuestra disposición y que hacen selecciones de color extremadamente fácil cuando se utilizan apropiadamente, por supuesto. Y lo mejor de todo, van ampliar nuestra comprensión sobre la Teoría del Color.

Al experimentar en un entorno guiado, tenemos la habilidad de aprender como aplicar estos principios sin tener que frustrarte cuando las cosas no marchen bien. Piensa en estas herramientas como una especie de “red de seguridad de la teoría del color”, para ayudarte a explorar tu propia creatividad sin la necesidad de alejarse de las normas establecidas para las combinaciones de colores agradables.

Kuler

Una herramienta desarrollada por Adobe, Kuler está dirigida a proporcionar una manera intuitiva para crear una paleta de color. Cada color en la paleta puede ser individualmente modificado, o seleccionado como color de base con un simple click. Las paletas pueden ser guardadas y publicadas y existe un gran número de entradas disponibles a la comunidad en este sitio. Debajo de cada color, son proporcionados los códigos de exportación (incluyendo hexadecimal). Sin embargo, la interface a veces puede ser incomoda. Por ejemplo, cuando estas ajustando la vitalidad de un color especifico puede alterar la paleta completa (de hecho, desearía que tuvieran una forma de bloquear con la cual pueda evitar que los demás colores cambien). En general, recomendaría esta herramienta para aquellos con una comprensión decente de los conceptos y paciencia para cuando las cosas no salgan tan bien como se esperaría.

Esquema de Color: Diseñador 3 (Paletton)

Esta herramienta de color se ha convertido en mi selección preferida absolutamente para principiantes; son aquellas personas con poca paciencia o personas con tiempos de entrega. Mediante la proporción de un selector muy simple y controlado; el programa CSD3, proporciona una barrera de entradas muy bajas y su elección de los principios de color presenta una variedad de opciones. A pesar de que no enseña a sus usuarios porque los colores trabajan bien juntos (la rueda dinámica de color de Kuler es mucho más efectiva a considerar). Sus resultados son un gran punto de partida y final para un prototipo.

Sus opciones más avanzadas son más útiles; características tales como la habilidad de ajustar la saturación y el contraste de la paleta completa, superposiciones de colores y una muestra para pre visualizar el sitio web son algunas de las cosas que espero que Kuler implemente muy pronto. De todos modos, creo que estas herramientas no deberían de ser la principal herramienta usada para aquellos que quieren aprender la Teoría del Color, como hace también gran parte del trabajo a los usuarios y no les permite experimentar intuitivamente manteniendo al mismo tiempo los principios básicos de cada principio de color.

Si, hay cientos y cientos de sitios en donde puedes encontrar grandes esquemas de color… y actualmente estamos probando esos sitios y analizándolos en el futuro cercano.

Caso de estudio: Los Jugadores con Empleos.

Para finalizar este artículo, examinemos un sitio web usando algunos de los principios que hemos discutido. Gamers with Jobs es un sitio dedicado a los análisis más altos de los video juegos, a través de sus características y fórums.

• El fondo gris de la página con el fondo de contenido blanco enfoca la atención de los usuarios hacia el centro del sitio web.
• La barra oscura que atraviesa la página (usualmente reservada para publicidad), captura y luego guía la vista de los usuarios hacia el contenido.
• El uso de rojo y naranja en los títulos dirige la vista de los usuarios a las categorías, títulos de características y aspectos del sitio web.
• El esquema de color neutral proporciona la suficiente estimulación visual para mantener a la audiencia interesada, entre tanto que tienen la suficiente libertad para disfrutar del contenido del sitio.

Palabras de cierre y resumen.

Uno de los aspectos más difíciles de trabajar con el color es que algunas veces cuando los colores no ha sido organizado en un diseño, tendrán la apariencia que no trabajan muy bien. Sin embargo, una vez que son aplicados su armonía visual se vuelve aparente. Personalmente he tenido una cantidad de frustraciones ajustando los colores seleccionando el Kuler antes de aplicarlos al diseño, solamente para encontrar que el esquema de color fue alterado lo suficiente para ser poco atractivo.

¡Confiar en la Teoría. Aplicar colores seleccionados a través de un principio de color, y ajuste según sea necesario. Haciendo esto ahorraras muchísimo tiempo, y fortalecerás tus habilidades de diseño así como empezaras a ver el color en una forma más refinada, artística he incluso en forma científica.

Resumen

• Seleccionando los colores de los extremos opuestos del espectro de color crea una armonía visual para los ojos
• Un alto contraste entre los elementos hace que los textos sean más fáciles de leer, y guía la atención de los lectores.
• Los colores brillantes, van a consumir más la energía mental.
• No temas usar herramientas tales como Kuler o Color Scheme Design 3, porque lo único que harán será tu vida más fácil y evitaras llegar a frustrarte con el proceso de aprendizaje.

Gracias por leer mi primer tutorial y todavía tengo como una tonelada de cosas interesantes por escribir. Pero por favor, deja tu comentario en la sección de comentarios si sientes que podría contribuir a mejorar los próximos tutoriales ya que deseo hacer estos tutoriales tan útiles como sean posibles.

Oh! Y si tienes ganas de leer más revisa otro magnificó artículo que está relacionado acerca de lo que estamos hablando: "“Comprensión de la Jerarquía Visual en Diseño Web”.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!