TARINGUEROS! Encontré un artículo muy útil sobre cómo usar el color en Diseño Web, muy util para quienes trabajamos en Diseño Gráfico de manera freelance, o no hicimos la carrera de Diseño Gráfico pero zafamos jaja..
Desafortunadamente estaba en inglés, pero lo traduje para que los que no entienden el original puedan usarlo igual (si, fue un laburito importante la traducción, el texto es muy largo jaja!)
Así que espero que les sirva así como a mi!



Aclaración: El texto original fue escrito por Ben Gremillion, un diseñador web freelance que aprendió que una fecha de entrega es inversamente proporcional a la cantidad de modificaciones pedidas a última hora.







COMO LOGRAR UN ASPECTO PROFESIONAL CON COLOR


Qué hace que un diseño 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 usarán, y de que manera.
El color es el elemento de diseño que más facilmente se escapa. Un "buen" color está muy atado al gusto personal y la intuición, tanto como a las consideraciones técnicas, tales como el contraste y la calibración del monitor.
Pero el color es vital al contenido. Si considerás que un sitio web es lo suficientemente importante como para gastar tiempo refinandolo, entonces sus usuarios lo considerarán lo suficientemente imporrtante como para participar de él. Los buenos colores hacen que eso pase.
En éste artículo revisaremos algunas técnicas para lograr hermosas paletas de color para tus diseños 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 influenciarán su actitud más alla del contenido de la página. Es esta página emocionante? Relajante? Atrevida? Suave? Politica? Formal?
El color afecta las interpretaciones de la gente, casi tanto como la tipografía.
Encontrar los colores adecuados no es fácil, pero el proceso puede ser sistemático.
La estrategia de un buen diseño involucra un esquema de color (por ejemplo, un rango de colores seleccionados para comunicar un humor o mensaje) y la organización de ese esquema.
Digamos que te pidieron que diseñes una web profesional. (Y ésto podría convertirse fácilmente en un juego de beber: Tomás un shot cada vez que el cliente usa la palabra "profesional", "limpio" o "moderno". Dos shots si dice "Me gusta esta otra página, copiala"
El esquema de color dependerá de la naturaleza particular de la web. Por ejemplo, tanto bancos como floristas pueden tener una página profesional, pero la gente tendrá menos inclinación a comprar flores de una pagina que usa azul y gris corporativo.. E imaginate la página del Banco de América en lila y verde manzana!
Un diseño profesional les dice a sus visitantes que han encontrado una web que se toma su negocio en serio, aún 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 diseño revela problemas fundamentales que deberían ser resueltos antes de preocuparse por "que sombra del monasterio funciona mejor" (por ejemplo). Si el diseño no se ve bien en blanco y negro, entonces es hora de hacer algunos cambios.
Tiene cada página un propósito claro? Guía el diseño a los lectores a través del contenido? Es el contenido irresistible, inspirador o informativo? Son claros los títulos? Contrastan los links con el resto del texto? El color mejora estos efectos, pero los problemas de la disposición del diseño no pueden resolverse solo con el color.
Para hacer un rediseño, 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, deberías empezar un rediseño evaluando tus objetivos y el contenido, pero es es otro tema).
A veces sacar el color es una solución por si misma.
Una vez trabajé con una compañía de diseño web para rediseñar su propia web. Los dueños eran personales acerca del proyecto y estaban dispuestos a resolverlo. Pero si pensás que diseñar para vos mismo es dificil, intentá hacerlo con un comité!. Para el final del trabajo, nos encontramos los tres en tras nuestro noveno día 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 diseño al estilo "cobre y marina" en escala de grises. Para la sorpresa de todos, funcionó.
Para el final de la semana, teníamos un "cálido" diseño en grises con detalles en rojo. Sabíamos que teníamos al "diseño ganador" cuando antiguos clientes los felicitaron por el nuevo look, y entraron más 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 páginas 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 más cantidad de colores dominantes, más pesada es entonces la paleta de colores para la mente del usuario.
Una vez que la disposición y organización del diseño 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, saturación y valor (a veces llamado iluminación)
La saturación sería cuán rico un matiz es: Los colores neón son muy saturados, mientras que los pasteles son menos saturados.
El valor denota cuán 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 diseño puede tener cientos de sombras de un solo matiz, desde pastel a neón, y seguir pareciendo planeado. Pero si los matices están 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 más seguro, porque la escala de grises tiene un matiz neutral: Podés coordinar cualquier parte del arcoitis con bnegro, blanco y gris.
Una segunda solución es usar los matices en distintas proporciones. Si una paleta tiene, digamos, violeta y marrón, entonces el diseño puede tener muchos valores de marrón con algunos toques violaceos.
Otra oción es variar los valores. Un azul puro y un cian luminoso pueden hacer una combinación 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 distinción.
Desafortunadamente, evitar una mala combinacion de colores no es lo mismo que elegir un buen color. Una paleta es exitosa no cuando estás satisfecho con ella, sino cuando tu audiencia se siente cómoda 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 diseñadores de pequeñas webs sacarán el color del contenido. Por lo general usan fotos.
El diseño de una web de ocho páginas 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 más oscuras y más 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 diseñar tan bien la página (y tan rápido), 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 pequeñas, los diseñadores de páginas más grandes y dinámicas deberán buscar inspiración 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 encontrarás los colores indicados. Si la página es, por ejemplo, de un equipo de algún deporte, averigua que colores suele usar la gente para ir a los juegos, más que los colores que usan para la vida diaria..
Si sos los suficientemente afortunado como para encontrar fotos de la audiencia, miralas en masa, estás buscando el color promedio de la multitud. Pero si las fotos no están disponibles, anda al shopping.
Los diseñadores 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 buscás en Google "tiendas de caping, "ropa de bebe", o "ropa de natacion y ski" o "estilo casual", verás muchas buenas combinaciones de color.
La gente usa ropa de acuerdo a sus gustos. Si usas colores que les gustan, se sentirán mas cómodos con la página.



USÁ TEXTURAS




Leves variaciones en los matices, saturación o valore, crean texturas.
Las texturas monocromáticas (tecturas de un solo matiz) y los patrones proveen sutiles dimensiones a muchas webs sin chocar.
Los fondos de texturas simples, particularmente, son fáciles 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.
* Podés ponerle cualquier nombre a la capa. También podrías jugar con más de una foto, pero evitá darle a las capas nombres como "textura de pared" o "textura de papel". Tenés que concentrarte en el efecto de la web, no de donde viene.


CREANDO UNA BUENA PALETA


Una buena paleta de color tiene ciertas características. Pensalo como la estructura de un set de lineas guia que mantienen un diseño consistente. El esquema debería:
* Tener de dos a cinco matices que funcionen bien juntos
* Describir cuan lejos puede ir el diseño con esos matices.
* Tener distintos tonos para cada matiz
* Funcionar bien junto con negro y blanco.
Éste es un ejemplo:



La diseñadora empezó por elegir en su mayoría matices mas cálidos que se vieran bien juntos. No hubo lógica, sólo el vago objetico de lucir "otoñal", y su intuición.



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 también 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 cambiarán si la "tinta" de la capa está puesta abajo de las capas blancas y negras.)



Esto le dio a la diseñadora 15 colores para elegir. Ella eligió cuatro que tenían un rango de tonos y matices
Acá, los colores se ven contra el blanco.



Las variaciones son importantes, así que la diseñadora experimentó. Cómo se verían los colores contra el negro? Qué pasaría si les cambiaramos el tono un poco?



Y qué si los cambiaramos todos juntos? Usando Imagen--> Ajustes-->Tono/Saturación en las capas "tinta", se crea una sensación de otoño, pero los colores siguen estando coordinados. Quizás esta paleta se podría 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. Podés bajar el archivo de ejemplo ACÁ



USANDO LA ESTRUCTURA


Funcionarán los gráficos, fotos e íconos de mañana con las paletas de color de hoy? Qué imagenes necesitará un sitio web en seis días, seis semanas o seis meses? Es difícil saberlo, pero el contenido es una parte de tu paleta de color.
Podrías 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, aún con fotos, es una genial manera de lograr un look unificado a traves de las páginas.
La solución más fácil es encontrar imagenes que se ajusten a tu paleta. Recordá que una paleta permite un márgen 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 más 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 técnica 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; estarás mejorando la apariencia de tu página, pero te estás tomando libertades con el arte de otra persona..)


LUCIENDO PROFESIONAL


Ningún set de colores se ve "profesional" por si solo; tendrás que seguir un proceso para llegar a la coordinación y a la sensación de planificación.
No importa sobre qué sea el sitio, la audiencia sabrá si se toma en serio su negocio.

TIPS FINALES

* Cuando pienses que tenés una buena paleta de color, probala por al menos una semana. Evaluar los colores requiere de intuición, que se construye con el tiempo. Date tiempo para absorber la personalidad de la paleta.
* Cuando pienses que tenés 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 después de cuatro meses. Luego preguntate, todavía son apropiados? Si no lo son, que cambió? Que factores infuenciarán tu cambio?
* Usá colores brillantes con moderación. Un toque de algo iridescente atraerá visitantes, pero si lo ven por todos lados, vagarán sin rumbo por la página...
* Algunas personas piensan que las paletas de color tiene un rango angosto. Permití un margen de maniobra para darle a tus diseños más profundidad.
* Evitá los colores primarios puros. Dales un dejo de personalidad: rojo, pero vistosamente violeta, azul, pero con un "touch" de verde, un amarillo cálido con un tinte naranja.
* Asegurate de que tus colores se vean bien cuando se esfumen. Si elegís 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 marrón oscuro El azul oscuro es misterioso, y el azul claro es relajante, o electrico si lo sobresaturás.
* 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 estén en humor de "cine negro".
* No importa cuán dinámica querés que se vea tu web, usá un fondo neutral. Negro, blanco o gris funcionarán con casi cualquier matiz.
* Si querés un texto pequeño, (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 intuición 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.






ESPERO QUE LES HAYA SIDO ÚTIL!
Consejos para usar paletas de color {Diseño Web}







HASTA LA PRÓXIMA!














Fuente: http://www.webdesignerdepot.com/2009/12/how-to-get-a-professional-look-with-color/