Qué hace que un diseño se vea combinado, planificado y profesional? La respuesta es: El Color.
Planificar el color significa crear un boceto que describa cuáles colores usar y cómo usarlos.
El color es el elemento de diseño más resbaladizo. "Buen color" se le llama a aquella combinación que hace alusión al gusto personal y la intuición, así como también a consideraciones técnicas como el contraste y la calibración del monitor.
Pero el color es vital para el contenido. Si consideras a una website lo suficientemente importante como para invertir tiempo en ella refinándola, entonces los lectores la considerarán lo suficientemente importante como para invertir tiempo en leerla.. Un abuena selección del color logran que esto ocurra.
En este artículo revisaremos algunas técnicas para obtener una bella paleta de color para un diseño web.
En la imágen superior vemos que diferentes tonos pueden parecer descombinados. En la imagen inferior, diferentes valores de saturación de un tono se verá planificado.
La mejor forma de hacer que el aspecto de una web no parezca planificado es escoger sus colores en forma aleatoria.
Cuando un visitante llega por primera vez a la página principal de un website, los colores influencian su actitud hacia el contenido. Es esta web excitante? Tranquilizante? Atevida? Política? Formal?
El color afecta la interpretación de lo que las personas ven así como también lo hace la tipografía.
Encontrar los colores correctos no es fácil, pero el proceso puede ser sistemático.
Una buena estrategia de diseño involucra un esquema de color (ejem. un rango de colores seleccionados para comunicar una emoción o mensaje) y una ordenación de ese esquema.
El esquema de color dependerá de la naturaleza particular de la web. Por ejemplo, los bancos y tiendas de flores pueden tener webs de aspecto profesional.
Pero las personas se inclinarán menos a comprar flores en una web que utiliza azul corporativo y gris oceano. E imagina la web del Banco de América en lila y amarillo verdoso.
Un diseño "profesional" le dice al visitante que encontraron una web que los toma en serio. sean como sean los tonos y valores, "profesional" significa combinado, planificado y pensado.
La Escala de Grises
La mejor forma de trabajar con un color es comenzar con nada.
Eliminar colores de un diseño revela los problemas fundamentales que deben ser direccionados antes de cometer errores. Si el diseño no se siente bien en blanco y negro, entonces es momento de hacer cambios.
Cada página tiene un propósito claro? El diseño guía a los lectores a través del contenido? El contenido es importante, inspirador o informativo? Tiene encabezados claros? Tiene links que contrastan con el resto del texto? El color mejora esos efectos, pero los problemas en estructura, tipo y organización no pueden ser resueltos son por el color.
Para hacer un rediseño, primero quita el color. El simple acto de lavar los primarios sobre saturados realmente muestra donde está la web detenida.
A veces remover el color es una solución por sí misma.
Analiza tu esquema de color con el test de Photoshop:
- Toma fotos de al menos tres páginas de tu website. Ábrelas en Photoshop.
- Duplica la capa de fondo en cada foto (Layer → Duplicate Layer, or Command + J en Mac, o Control + J en Windows).
- Aplica un desenfoque Gaussiano de unos 10 pixels a la nueva capa.
- En Image → Adjustments → Posterize. Usa de 8 a 12 niveles o ve a Filter → Pixellate → Mosaic. Usa de 15 a 30 pixels.
Esto te mostrará cuáles colores son realmente dominantes. El color más dominante, el color má spesado del esquema se imprimirá en la mente de los visitantes.
Una vez que la plantilla y la organización trabajan sin color, es el momento de escoger una paleta. Pero cuál? Y cómo usarla?
Alineando tus Tonos
El color tiene tres propiedades: tono, saturación y valor (a veces llamado iluminación).
Saturacion es la riqueza del tono: los colores de neón están muy saturados, los tonos pasteles son menos saturados.
Valor denota cuánto brillo tiene un color (ejem. cuán cerca está del blanco o el negro).
Tono se refiere a qué parte del arcoiris pertenece un color, tales como rojo o verde.
Nada asesina un esquema de color como los tonos que chocan. Un diseño puede tener cientos de variaciones de un tono, desde pastel hasta neón, y aún así se verá planificado. Pero si los tonos están mezclados de forma equivocada, el esquema se desmorona.
Una forma de evitar el choque de tonos es separarlos con un tercer color. Un poco de negro, gris o blanco es más seguro, porque la escala de grises tiene tonos neutros: puedes combinar cualquier parte del arcoiris con negro, blanco o gris.
Una segunda solución es usar tonos en diferentes proporciones. Si un esquema de color tiene violeta y marrón, entonces el diseño debe tener muchas sombras de marrón con algunos brillos violeta como iluminación.
Otra opción es variar los valores. Azul puro y cyan brillante hacen una combinación mediana, pero azul oscuro y cyan suave (azul cielo) hacen suficiente contraste entre uno y otro. Rojo y violeta pueden ser lo suficientemente diferentes como para no chocar pero lo suficientemente cercanos para no parecer intencional. El rojo suave (rosado) y y un violeta oscuro crean distinción.
Desafortunadamente, permitir una mala combinación de color no es lo mismo que es escoger una buena. Un esquema de color es exitoso no cuando tú estas satisfecho, sino cuando tu audiencia se siente cómoda.
Descubrir Grandes Esquemas
De dónde surgen los grandes esquemas? Por cuántos cientos de colores y miles de combinaciones tenemos que decidir?
Los diseñadores de webs estáticas pequeñas deben establecer el color desde el contenido. Esto normalmente significa fotos.
Imaginemos que diseñamos una web de ocho páginas, por ejemplo, que está encabezada por unos elaborados andamios metálicos contra un cielo índigo. Si configuramos la herramienta cuentagotas de Photoshop a un promedio de 5x5, podemos tomar muestras de las partes mas oscuras y más iluminadas del cielo que se usarán para la barra lateral, los vínculos, encabezados y pie de página con algunas sombras.
Cuándo el cliente pregunte cómo fuimos capaces de diseñar tan bien la web - y con tanta rapidez - nuestra respuesta puede ser "Este es nuestro trabajo" Pero el color ya estaba alli. Lo único que hicimos fue mirarlo.
Mientras las fotografías ayudan para websites rápidas, los diseñadores de webs más grandes y dinámicas deben buscar la inspiración en su audiencia.
Un excelente indicador de cuáles colores son atractivos a nuestra audiencia es su ropa diaria. Observemos lo que nuestros visitantes visten, y sabremos qué colores los hacen sentir cómodos. Si la website es por ejemplo de deportes, observa cómo se visten las personas para los juegos, en lugar de su vestimenta de trabajo.
Si eres lo suficientemente afortunado como para obtener fotografías de tu público objetivo, obsérvalos en masa; obtén un promedio de la multitud. Pero si no tienes fotos disponibles, ve a las tiendas.
Los diseñadores de ropa tienen un excelente sentido del color para cada humor y estilo de vida. Una búsqueda en Google de "tiendas de campamento", "ropa de bebe", "ropa de esqui y natación" y "ropa casual" nos revelará muchas buenas combinaciones de color.
Las personas se visten de acuerdo a su gusto, Si utilizas los colores que les gusta, se sentirán más cómodos en tu web.
Uso de Texturas
Leve variación en tono, saturación o valor crea texturas.
Las texturas monocromáticas (ejem. texturas con un solo tono) y patrones brindan una sutil dimensión a la mayoría de las webs.
Fondos con texturas simples, en particular, son fáciles de construir:
- Toma una foto de una pared interna, o algo que se sienta rugoso.
- Ábrela en Photoshop.
- Duplica la capa de fondo y llámala "textura 1"
- Rellena la capa de fondo con colores de tu esquema.
- Configura el estilo de capa de la capa "textura 1" a Luz Suave y su opacidad a 30%.
- Pruébala en tu web. Si no se ve bien, prueba con otro porcentaje de opacidad.
Crear un Buen Esquema
Un buen esquema de color tiene ciertas características. Piensa en ello como en un boceto o un grupo de lineamientos que te permiten un diseño consistente. El esuqmea debe:
- Listar de dos a cinco tonos que trabajen bien juntos,
- Describir cómo el diseño puede variar esos tonos,
- Contar las sombras de cada tono,
- Trabajar bien en blanco y negro.
El diseñador comenzó escogiendo principalmente tonos cálidos que sintió apropiados. No hubo lógica, sólo un vago objetivo de representar el "otoño" y su intuición.
En Photoshop, dos capas suministran las sombras de negro y blanco. Cada estilo de capa fue configurada como "Luz Suave". El negro puro era muy oscuro para ser el color más apropiado, así que se ajustó la opacidad.
Para unificar los colores, se crea una nueva capa y es rellenada con rojo puro. Su estilo de capa se configuró a “Color” y su opacidad a 40%. (Nota: el orden de las capas es muy importante. Los colores cambian si la capa de "tinte" está debajo de la capa blanco y negro.)
Esto nos da 15 colores para escoger. De los cuales seleccionamos cuatro y los contrastamos con el blanco.
Las variaciones son importantes para el diseñador experimentado. Cómo se ve el color contra el negro? Qué pasa si los sombreamos?
Qué ocurriría si los cambiamos totalmente? Usamos Image → Adjustments → Hue/Saturation en la capa "tinte" para dar una sensación distinta al otoño, pero los colores están aún combinados. Esta paleta podría ser usada para Semana Santa.
El resultado final es un esquema de color: una referencia que suministra diferentes tonos y un rango de sombras que trabajan bien juntas
Usar el Boceto
Los gráficos, fotos e íconos de mañana trabajarán bien con el esquela de color de hoy? Qué imágenes podría necesitar la web en seis días o seis meses? Es difícil decirlo, pero el contenido es parte del esquema de color.
Puedes resolver ese problema si haces que cada una de tus imágenes siga el esquema de color o hacer que el esquema de color siga las imágenes.
La aplicación del esquema de color, incluso con fotos, es una gran manera de obtener un aspecto unificado a través de todas las páginas.
La solución más fácil es encontrar imágenes que cumplan con tu esquema. Recuerda que un esquema de color permite un márgen de maniobra. Muchas fotos pueden buscarse en los bancos de imágenes por color.Si una imágen no cumple con tu esquema de color, cámbiale el tinte:
- Abre la imágen en Photoshop.
- Crea una nueva capa. Configura a estilo de capa “Color.”
- Rellena esa capa con uno de los colores de tu paleta, preferiblemente el que sea más parecido a los colores de la imagen.
- Configura la opacidad de la capa a 50%.
- Juega con la opacidad hasta que obtengas un buen balance entre el color original de la imagen y el color de tu paleta.
- Esta técnica funciona para fotos, ilustraciones e íconos - cualquier imagen basada en pixeles
Aspecto Profesional
Ningún grupo de colores se ve "profesional" por si mismo. Debes seguir un procedimiento para lograr una sensación coordinada y planificada.
Tips
- Cuando pienses que tienes un buen esquema de colores, pruébalo al menos por una semana. La evaluación del color requiere intuición. Date tiempo para absorber la personalidad del esquema.
- Cuando pienses que tienes un buen esquema de color, no lo dejes secar. El gusto de tu púlico, como el tuyo, cambia constantemente. Revisa los colores dentro de cuatro meses. Entonces pregúntate si aún es apropiado. Si no, qué hay que cambiarle? Qué factores influenciarán su ajuste?
- Usa colores brillantes con moderación. Una salpicadura de algo iridiscente transportará a tus visitantes, pero si lo ven por todas partes, van a vagar sin rumbo.
- Algunas personas piensan que el esquema de colores tiene un rango estrecho. Permite un rango de maniobra para dar profundidad a los diseños.
- Permite primarios puros como rojo, verde, azul y amarillo. Dales un toque de caracter real: rojo pero ligeramente violeta, azul con un toque de verde, amarillo "cálido" con un tinte naranja.
Asegúrate que tus colores trabajan bien cuando se degraden. Si escoges rojo, ten cuidado que el rojo claro puede ser femenino y el rojo oscuro puede parecer sangre. El amarillo va desde el amarillo sol hasta el marrón oscuro. El azul oscuro es misterioso, y el azul claro es tranquilo - o electrico si está sobresaturado.
0 comentarios:
Publicar un comentario
*** Gracias por dejar tu comentario *** Si deseas que publiquemos alguna información adicional deja tu mensaje ***