COMO LOGRAR UN ASPECTO PROFESIONAL

CON COLOR
Qu hace que un diseo luzca coordinado, planificado y profesional? La respuesta
es: "color"
No todo proyecto necesita usar un "azul corporativo" para verse profesional.
Panificar el color significa crear una estructura que describa que colores se usarn,
y de que manera.
El color es el elemento de diseo que ms facilmente se escapa. Un "buen" color
est muy atado al gusto personal y la intuicin, tanto como a las consideraciones
tcnicas, tales como el contraste y la calibracin del monitor.
Pero el color es vital al contenido. Si considers que un sitio web es lo
suficientemente importante como para gastar tiempo refinandolo, entonces sus
usuarios lo considerarn lo suficientemente imporrtante como para participar de l.
Los buenos colores hacen que eso pase.
En ste artculo revisaremos algunas tcnicas para lograr hermosas paletas de color
para tus diseos web.

La mejor manera de hacer que un sitio web parezca que no ha sido planeado es
elegir los colores al azar.
Aunque los visitantes entren al home del sitio por primera vez, los colores
influenciarn su actitud ms alla del contenido de la pgina. Es esta pgina
emocionante? Relajante? Atrevida? Suave? Politica? Formal?
El color afecta las interpretaciones de la gente, casi tanto como la tipografa.

Encontrar los colores adecuados no es fcil, pero el proceso puede ser sistemtico.
La estrategia de un buen diseo involucra un esquema de color (por ejemplo, un
rango de colores seleccionados para comunicar un humor o mensaje) y la
organizacin de ese esquema.
Digamos que te pidieron que disees una web profesional. (Y sto podra
convertirse fcilmente en un juego de beber: Toms un shot cada vez que el cliente
usa la palabra "profesional", "limpio" o "moderno". Dos shots si dice "Me gusta esta
otra pgina, copiala"
El esquema de color depender de la naturaleza particular de la web. Por ejemplo,
tanto bancos como floristas pueden tener una pgina profesional, pero la gente
tendr menos inclinacin a comprar flores de una pagina que usa azul y gris
corporativo.. E imaginate la pgina del Banco de Amrica en lila y verde manzana!
Un diseo profesional les dice a sus visitantes que han encontrado una web que se
toma su negocio en serio, an si ese negocio no es tan corporativo. Sin importar los
matices y valores, "profesional" significa coordianado, planeado y pensado.

US LA ESCALA DE GRISES
La mejor manera de trabajar con color, es empezando con ninguno.
Removiendo el color de un diseo revela problemas fundamentales que deberan ser
resueltos antes de preocuparse por "que sombra del monasterio funciona mejor"
(por ejemplo). Si el diseo no se ve bien en blanco y negro, entonces es hora de
hacer algunos cambios.
Tiene cada pgina un propsito claro? Gua el diseo a los lectores a travs del
contenido? Es el contenido irresistible, inspirador o informativo? Son claros los
ttulos? Contrastan los links con el resto del texto? El color mejora estos efectos,
pero los problemas de la disposicin del diseo no pueden resolverse solo con el
color.
Para hacer un rediseo, primero saca el color. El solo acto de sacar los colores
primarios sobre-saturados realmente muestra en que estado se encuentra la
web. (De hecho, deberas empezar un rediseo evaluando tus objetivos y el
contenido, pero es es otro tema).
A veces sacar el color es una solucin por si misma.
Una vez trabaj con una compaa de diseo web para redisear su propia web. Los
dueos eran personales acerca del proyecto y estaban dispuestos a resolverlo. Pero
si penss que disear para vos mismo es dificil, intent hacerlo con un comit!. Para
el final del trabajo, nos encontramos los tres en tras nuestro noveno da de hacer
horas extra, mirando fijamente una captura de pantalla luego de unos cuantos
tragos.. Abruptamente, acopl todas las capas de Photoshop, las desatur,
convirtiendo el vibrante diseo al estilo "cobre y marina" en escala de grises. Para la
sorpresa de todos, funcion.
Para el final de la semana, tenamos un "clido" diseo en grises con detalles en

rojo. Sabamos que tenamos al "diseo ganador" cuando antiguos clientes los
felicitaron por el nuevo look, y entraron ms llamadas de nuevos clientes.

Analiz tu esquema de color con la prueba del

"vistazo" de photoshop:
* Tom capturas de pantalla de por lo menos tres
pginas de tu sitio web. Abrilas en Photoshop.
* Duplic la capa de fondo de cada captura
(Capa--> Duplicar capa, o Comando+J en Mac, o
Ctrl+J en Windows)
* Aplic un Desenfoque Gaussiano de
aproximadamente 10 pixels a las nuevas capas.
* And a Imagen Ajustes Posterizar. Usa 8 a
12 niveles o and a Filtro Pixlar Mosaico.
Usa de 15 a 30 pixels.

sto te mostrar qu colores son realmente dominantes. A ms cantidad de colores

dominantes, ms pesada es entonces la paleta de colores para la mente del usuario.
Una vez que la disposicin y organizacin del diseo funcionan sin color, entonces
es hora de elegir una paleta. Pero cual? Y qu cantidad usar?

ALINE TUS MATICES

El color tiene tres propiedades: Matiz, saturacin y valor (a veces llamado
iluminacin)
La

saturacin sera cun rico un matiz es: Los colores nen son muy

saturados, mientras que los pasteles son menos saturados.

El

valor denota cun brillante (por ejemplo, cuan cerca del blanco o negro) un

color es.
El

matiz se refiere a que parte del arcoiris pertenece el color, as como rojo o

verde.

Nada mata una paleta de color como mezclar matices. Un diseo puede tener
cientos de sombras de un solo matiz, desde pastel a nen, y seguir pareciendo
planeado. Pero si los matices estn mal mezclados, el esquema se cae.
Una manera de evitar mezclar matices es separarlos con un tercer color, un
amortiguador negro, gris o blanco es ms seguro, porque la escala de grises tiene
un matiz neutral: Pods coordinar cualquier parte del arcoitis con bnegro, blanco y
gris.
Una segunda solucin es usar los matices en distintas proporciones. Si una paleta
tiene, digamos, violeta y marrn, entonces el diseo puede tener muchos valores de
marrn con algunos toques violaceos.
Otra ocin es variar los valores. Un azul puro y un cian luminoso pueden hacer una
combinacin medio floja, pero un azul oscuro (azul marino) y un cian claro (celeste),
contrastan lo suficiente como para no opacarse entre ellos. Rojo y violeta pueden
ser lo suficientemente diferentes, como para chocar, pero lo suficientemente
alejados para no lucir intencionales; mientras que un rojo claro (rosa) y un violeta

oscuro, logran distincin.

Desafortunadamente, evitar una mala combinacion de colores no es lo mismo que
elegir un buen color. Una paleta es exitosa no cuando ests satisfecho con ella, sino
cuando tu audiencia se siente cmoda con la misma.

DESCUBRIENDO GRANDES PALETAS

De donde vienen las grandes paletas de color? Con cientos de colores y miles de
combinaciones, como decidir?
Los diseadores de pequeas webs sacarn el color del contenido. Por lo general
usan fotos.
El diseo de una web de ocho pginas que recientemente arm fue armado con la
foto de un elaborado andamio de metal puesto enfrente de un cielo color indigo.
Ajustando la herramienta cuentagotas de Photoshop en un promedio de 5 x 5, tom
las partes ms oscuras y ms claras del cielo, y us esos colores en la barra lateral,
links, titulos, usando esos tonos de base.
Cuando el cliente pregunt como hicimos para disear tan bien la pgina (y tan
rpido), nuestra respuesta fue, "Esto es lo que hacemos". Pero el color ya estaba
ah. Solo tuve que buscarlo.
Mientras que las fotos de stock funcionan para webs pequeas, los diseadores de
pginas ms grandes y dinmicas debern buscar inspiracin de sus visitantes.
Un excelente indicador de que colores son atractivos para ellos es su vestimenta
diaria. Averigua que ropa suelen usar los usuarios, y encontrars los colores
indicados. Si la pgina es, por ejemplo, de un equipo de algn deporte, averigua que
colores suele usar la gente para ir a los juegos, ms que los colores que usan para
la vida diaria..
Si sos los suficientemente afortunado como para encontrar fotos de la audiencia,
miralas en masa, ests buscando el color promedio de la multitud. Pero si las fotos
no estn disponibles, anda al shopping.
Los diseadores de moda que hoy trabajan tiene un excelente sentido del color para
cada humor y estilo de vida. Y no tiene que ser un negocio de alta costura de la
Quinta Avenida (o ac en Argentina, Palermo Hollywood, por ejemplo)
Si buscs en Google "tiendas de caping, "ropa de bebe", o "ropa de natacion y ski"
o "estilo casual", vers muchas buenas combinaciones de color.
La gente usa ropa de acuerdo a sus gustos. Si usas colores que les gustan, se
sentirn mas cmodos con la pgina.

US TEXTURAS

Leves variaciones en los matices, saturacin o valore, crean texturas.

Las texturas monocromticas (tecturas de un solo matiz) y los patrones proveen
sutiles dimensiones a muchas webs sin chocar.

Los fondos de texturas simples, particularmente,

son fciles de construir:
* Tomale una foto a una pared de un interior, o
algo que est "pelado", pero que se sienta
rugoso.
* Abr esa foto en Photoshop.
* Duplic esa capa fondo y nombralo "Textura
1".
* Llena la capa fondo original con colores de tu
paleta.
* Sete la capa "Textura 1" en Luz Suave en la
parte de Mezclas, y pon la opacidad al 30%.
* Probalo en tu sitio. Si no se ve bien, jug con la
pacidad de la capa.
* Pods ponerle cualquier nombre a la capa.
Tambin podras jugar con ms de una foto, pero
evit darle a las capas nombres como "textura de
pared" o "textura de papel". Tens que

concentrarte en el efecto de la web, no de donde

viene.
CREANDO UNA BUENA PALETA
Una buena paleta de color tiene ciertas caractersticas. Pensalo como la estructura
de un set de lineas guia que mantienen un diseo consistente.

El esquema

debera:
* Tener de dos a cinco matices que funcionen
bien juntos
* Describir cuan lejos puede ir el diseo con esos
matices.
* Tener distintos tonos para cada matiz
* Funcionar bien junto con negro y blanco.
ste es un ejemplo:

La diseadora empez por elegir en su mayora matices mas clidos que se vieran

bien juntos. No hubo lgica, slo el vago objetico de lucir "otoal", y su intuicin.

En Photoshop, dos capas proveyeron tonos de blanco y negro. Cada modos mezcla
de las capas fueron ajustados en "Luz Tenue"
El negro puro era demasiado para ser el color adecuado, as que la opacidad de la
capa tambin fue ajustada.

Para unificar los colores, una nueva capa fue creada, y se lleno con un rojo puro. El
modo mezcla se sete en "color", y la opacidad qued en 40% (Nota: el orden de las
capas es muy importante. Los colores cambiarn si la "tinta" de la capa est puesta

abajo de las capas blancas y negras.)

Esto le dio a la diseadora 15 colores para elegir. Ella eligi cuatro que tenan un
rango de tonos y matices
Ac, los colores se ven contra el blanco.

Las variaciones son importantes, as que la diseadora experiment. Cmo se veran

los colores contra el negro? Qu pasara si les cambiaramos el tono un poco?

Y qu si los cambiaramos todos juntos? Usando Imagen--> Ajustes->Tono/Saturacin en las capas "tinta", se crea una sensacin de otoo, pero los
colores siguen estando coordinados. Quizs esta paleta se podra usar para
Pascuas.
El resultado es una paleta de color: Una referencia que provee diferentes (pero no
tanto) matices y un rango de tonos que funcionan bien juntos.

USANDO LA ESTRUCTURA
Funcionarn los grficos, fotos e conos de maana con las paletas de color de hoy?
Qu imagenes necesitar un sitio web en seis das, seis semanas o seis meses? Es
difcil saberlo, pero el contenido es una parte de tu paleta de color.
Podras solucionar este problema haciendo que tus imagenes sigan tu paleta de
color o haciendo que tu paleta de color siga a tus imagenes.
Reforzando tu paleta de color, an con fotos, es una genial manera de lograr un look
unificado a traves de las pginas.
La solucin ms fcil es encontrar imagenes que se ajusten a tu paleta. Record que
una paleta permite un mrgen de maniobra: Mientras que los principales matices de

una imagen encajen, entonces la imagen funcionar. Muchas webs de stock de

imagenes te dejan buscar por color (por lo general por colores primarios)

Si una imagen no se ajusta a tu paleta de color,

cambiaselo.
* Abr la imagen en Photoshop
* Crea una nueva capa, y setea el modo Mezcla
en "color"
* Llen esa capa con uno de los colores de tu
paleta, preferentemente uno que sea ms
parecido a los colores de la imagen.
* Ajust la opacidad a un 50%
* Jug con la opacidad hasta que consigas un
buen balance entre el color original de la imagen
y la paleta de tu web.
sta tcnica funciona con fotos, ilustraciones e
conos -cualquier cosa que est basada en
pixels. (Si la imagen no es tuya, asegurate de
obtener el permiso antes de alterarla; estars
mejorando la apariencia de tu pgina, pero te
ests tomando libertades con el arte de otra
persona..)
LUCIENDO PROFESIONAL
Ningn set de colores se ve "profesional" por si solo; tendrs que seguir un proceso
para llegar a la coordinacin y a la sensacin de planificacin.
No importa sobre qu sea el sitio, la audiencia sabr si se toma en serio su negocio.

TIPS FINALES

* Cuando pienses que tens una buena paleta de color, probala por al menos una
semana. Evaluar los colores requiere de intuicin, que se construye con el tiempo.
Date tiempo para absorber la personalidad de la paleta.
* Cuando pienses que tens una buena paleta de color, no la dejes que se "ponga
vieja". Los gustos de los usuarios, as como los tuyos, cambian a traves del tiempo.
Acordate de revisar los colores despus de cuatro meses. Luego preguntate, todava
son apropiados? Si no lo son, que cambi? Que factores infuenciarn tu cambio?
* Us colores brillantes con moderacin. Un toque de algo iridescente atraer
visitantes, pero si lo ven por todos lados, vagarn sin rumbo por la pgina...
* Algunas personas piensan que las paletas de color tiene un rango angosto. Permit
un margen de maniobra para darle a tus diseos ms profundidad.
* Evit los colores primarios puros. Dales un dejo de personalidad: rojo, pero
vistosamente violeta, azul, pero con un "touch" de verde, un amarillo clido con un
tinte naranja.
* Asegurate de que tus colores se vean bien cuando se esfumen. Si elegs rojo, ten
cuidado de que el rojo iluminado no sea femenino y el rojo oscuro no parezca
sangre u xido. El amarillo pasa de un color "rayo de sol" esfumado a un marrn
oscuro El azul oscuro es misterioso, y el azul claro es relajante, o electrico si lo
sobresaturs.
* Usuarios de Mac, ajusten su pantalla. Vayan a "Preferencias de sistema", y clickeen
en "Acceso universal". Seteen en "Usar escala de grises". sto es muy til cuando
estn en humor de "cine negro".
* No importa cun dinmica quers que se vea tu web, us un fondo neutral. Negro,
blanco o gris funcionarn con casi cualquier matiz.
* Si quers un texto pequeo, (digamos, 14 puntos o menos) para usar con un gran
campo de color, hace el texto un poco mas oscuro que lo normal. sto contrastar
los caracteres con el fondo.
* Us mas tonos, o menos matices.
* Lo que se ve "bien" es intuitivo. Pero la intuicin es una batalla entre tu ego, las
elecciones de la audiencia, y la autoridad de tu cliente.
* Us fondos apagados para hacer que el contenido se destaque.