lunes, 1 de julio de 2013

Importancia del color en el diseño de espacios Web

En este post, encontrará algunos lineamientos esenciales a tener en cuenta en el momento de realizar el diseño gráfico de un sitio Web, sea éste una página como tal o un Blog. Una primera parte describe la teoría básica del color y en una segunda se presentan algunas herramientas en línea que le serán de mucha utilidad para escoger los colores deseados.


Teoría básica del color

El color en cualquier forma visual de expresion, tiene mucho poder de atracción o rechazo dependiendo del uso que se le dé. Las emociones y sensaciones que plasmemos en estos espacios, pueden hacer sentir al espectador. El color, como elemento evidenciado en la comunicación visual, puede ser la clave de éxito en el mensaje. Cuando se elige un color, se está dando significado sicológico al mensaje.

Para entender un poco el concepto sicologico del color, revisaremos brevemente el círculo cromático, el cual se puede dividir en colores cálidos y fríos, los cuales forman parte fundamental de la base de un buen diseño web. Un diseño web con excesiva combinación de colores cálidos y fríos, genera una percepción cargada, sucia y poco armoniosa.


Colores cálidos



El ardiente remite al rojo de máxima saturación en el círculo cromático; es el rojo en su estado más intenso. Los colores ardientes se proyectan hacia fuera y atraen la atención. Por esta razón, a menudo se usa el rojo en letreros y el diseño gráfico. Los colores ardientes son fuertes y agresivos y parecen vibrar dentro de su espacio propio. El poder de los colores ardientes afecta a la gente de muchas maneras, como el aumento de la presión sanguínea y la estimulación del sistema nervioso.

Colores fríos




El frío remite al azul en su máxima saturación. En su estado mas brillante es dominante y fuerte. Los colores fríos nos recuerdan el hielo y la nieve. Los sentimientos generados por los colores fríos: azul, verde y verde azulado son opuestos a los generados por los colores ardientes; el azul frío aminora el metabolismo y aumenta nuestra sensación de calma.

Colores claros




Los colores claros son los pasteles más pálidos. Toman su claridad de una ausencia de color visible en su composición, son casi transparentes. Cuando la claridad aumenta, las variaciones entre los distintos tonos disminuyen. Los colores claros descubren los alrededores y sugieren liviandad, descanso, suavidad y fluidez. Se parecen a las cortinas transparentes de una ventana, y envían un mensaje de distensión. Son el color marfil, rosa, celeste, beige ...

Colores oscuros



Los colores oscuros son tonos que contienen negro en su composición. Encierran el espacio y lo hacen parecer más pequeño. Los colores oscuros son concentrados y serios en su efecto. En cuanto a las estaciones, sugieren el otoño y el invierno. Combinar juntos los claros y los oscuros es una manera común y dramática de representar los opuestos de la naturaleza, tales como el día y la noche.

Colores brillantes



La claridad de los colores brillantes se logra por la omisión del gris o el negro. Los colores azules, rojos, amarillos y naranjas son colores de brillo pleno. Los colores brillantes son vívidos y atraen la atención. Un bus escolar amarillo, un racimo de globos de colores, el rojo de la nariz de un payaso nunca pasan inadvertidos. Estimulantes y alegres, los colores brillantes son colores perfectos para ser utilizados en envases, moda y publicidad.

Significado de los colores

Blanco: Se halla en el extremo de la gama de los grises. Es un color latente por su capacidad de potenciar los otros colores vecinos. El blanco puede expresar paz, soleado, feliz, activo, puro e inocente.

Negro: Al igual que el blanco, también se encuentra en el extremo de la gama de grises. Es el símbolo del silencio del misterio y, en ocasiones, puede significar impuro y maligno. Confiere nobleza y elegancia, sobre todo cuando es brillante.

Gris: Simboliza la indecisión y la ausencia de energía, expresa duda y melancolía. Los colores metálicos tienen una imagen lustrosa, adoptando las cualidades de los metales que representan. Dan impresión de frialdad metálica, pero también dan sensación de brillantez, lujo, elegancia, por su asociación con los metales preciosos.




Amarillo: Es el color más luminoso, más cálido, ardiente y expansivo. Es el color del sol, de la luz y del oro, y como tal es violento, intenso y agudo. Suelen interpretarse como animados, joviales, excitantes, afectivos e impulsivos.

Naranja: Posee fuerza activa, radiante y expansiva. Tiene un carácter acogedor, cálido, estimulante y una cualidad dinámica muy positiva y energética.

Rojo: Significa la vitalidad, es el color de la sangre, de la pasión, de la fuerza bruta y del fuego. Está ligado al principio de la vida, expresa la sensualidad, la virilidad, la energía; es exultante y agresivo. El rojo es el símbolo de la pasión ardiente y desbordada de la sexualidad y el erotismo.




Azul: Es el símbolo de la profundidad. Inmaterial y frío, suscita una predisposición favorable. La sensación de placidez que provoca el azul es distinta de la calma o reposo terrestres, propios del verde. Expresa armonía, amistad, fidelidad, serenidad, sosiego... y posee la virtud de crear la ilusión óptica de retroceder. Este color se asocia con el cielo, el mar y el aire. El azul claro puede sugerir optimismo.

Violeta: Es el color de la templanza, de la lucidez y de la reflexión. Es místico, melancólico y podría representar también la introversión.
Verde: Es el color más tranquilo y sedante. Evoca la vegetación, el frescor y la naturaleza. Es el color de la calma indiferente: no transmite alegría, tristeza o pasión. Cuando algo reverdece suscita la esperanza de una vida renovada.

Marrón: Es un color masculino, severo, confortable. Es evocador del ambiente local otoñal y da la impresión de gravedad y equilibrio. Es el color realista, tal vez porque es el color de la tierra que pisamos.


Modelo de color HSL

En las herramientas de dibujo y edición digital de imágenes, se manejan principalmente dos formas de generar o representar el color. Una de ellas es el modelo de color HSL, donde a travez del matiz, la saturación y el brillo, se puede representar cualquier color.

Fuente de imagen: Pixel Editor, http://pixlr.com/editor/

Fuente de imagen: Pixel Editor, http://pixlr.com/editor/ 

Hue - Matiz: Es el color en sí mismo, supone su cualidad cromática, es simplemente un sinónimo de color. Es la cualidad que define la mezcla de un color con blanco y negro. Según su tonalidad se puede decir que un color es rojo, amarillo, verde...

Saturation - Saturación: Está relacionada con la pureza cromática o falta de dilución con el blanco. Constituye la pureza del color respecto al gris y depende de la cantidad de blanco presente. Cuanto más saturado está un color, más puro es y menos mezcla de gris posee.

Lightness - Brillantez: Tiene que ver con la intensidad o el nivel de energía. Es la luminosidad de un color (la capacidad de reflejar el blanco), es decir, el brillo. Relaciona la claridad u oscuridad de un tono. La luminosidad puede variar añadiendo negro o blanco a un tono.

Modelo de color RGB - RVA

Otra de las formas para representar el color, es el modelo RGB o RVA, rojo, verde y azul, en donde a diferencia del HSL, aquí los colores se representan con la combinacion de la cantidad del verde, del rojo y del azul. En cada canal del color, se tienen 256 grados o niveles, que va desde negro puro hasta el tono del color intenso.

Fuente de imagen: Pixel Editor, http://pixlr.com/editor/
Fuente de imagen: Pixel Editor, http://pixlr.com/editor/ 

La descripción RGB de un color, hace referencia a la composición del color en términos de la intensidad de los colores primarios con que se forma: el rojo, el verde y el azul.

Es un modelo de color que representa un color mediante la mezcla por adición de los tres colores de luz primarios.

Para indicar con qué proporción mezclamos cada color, se asigna un valor a cada uno de los colores primarios, de manera que el valor 0 significa que no interviene en la mezcla y a medida que ese valor aumenta, se entiende que aporta más intensidad a la mezcla.

La intensidad de cada una de las componentes se mide según una escala que va del 0 al 255, en 8 bits.

Herramientas para seleccionar un color para nuestro sitio Web

Bien, luego de haber realizado un repaso rápido por la sicología del color y los modelos de color, definiremos para nuestro sitio web un esquema de color base, pensando fundamentalmente que es lo que deseamos transmitir a las personas a las cuales va dirigido el sitio. Para realizar esto, nos apoyaremos en una herramienta web, denominada Color Scheme Designer.


En el círculo cromático, mueva el selector de color, hasta llegar al color deseado. Después podrá ajustar la tonalidad, desde Adjust Scheme.


Luego haga clic en ejemplo de página, oscura o clara. Allí se presentará un modelo de pantalla que presenta una aproximación de como se verá el sito. Visualice esta opción, tantas veces como sea necesario.


Luego de haber definido el color deseado, haga clic en lista de colores, en la parte inferior de la aplicación. Allí encontrara la combinación de colores y los códigos respectivos, con los cuales podrá configurar si sitió web, más adelante.


Si no desea una sola tonalidad de color, podrá generar varias paletas con colores complementarios. En la parte superior, haga clic en la opción Complement, para obtener los otros colores.


Otra forma de seleccionar colores para su sitio web, es a partir de una imagen digital, la cual puede ser el logo de la compañía o algún fondo que haya seleccionado previamente. Si ya tiene la imagen definida, entonces, podrá utilizar esta otra herramienta, desde la cual, al cargar el archivo respectivo, el programa le presenta una paleta de colores a utilizar. La aplicación se llama Color hunter. En la parte superior, encontrara el botón para cargar la imagen y luego se presentarán los colores relacionados.


Luego de escoger la paleta de colores, fíjese bien y anote los códigos que tiene cada color, los cuales los necesitaremos para configurar nuestra página, por ejemplo #FF4400 o #2B5A0B. Estos códigos de color, se definen siempre bajo el modelo RGB, donde los dos primeros números, corresponden a la tonalidad de rojo, los dos siguientes, al verde y los ultimos dos, al azul.

De aquí en adelante es necesario que aplique los colores correspondientes desde la herramienta que esté utilizando para realizar su trabajo.

Espero que la información haya sido de utilidad.