El color, como la tipografía son fieles representantes de la personalidad de una marca y son pasados por alto todo el tiempo, se considera que es una elección de «gusto» y no una decisión «consciente».
La importancia del color y del diseño grafico va más allá de una opinión, o un gusto, todo tiene un significado más profundo pero sobre todo una técnica que dicta reglas específicas que condicionan el éxito de cualquier soporte de comunicación visual.
Además hoy en día el color en pantalla exige mayor conocimiento del contexto de uso del mismo, es decir no es lo mismo diseñar para una aplicación móvil que para una aplicación en un smart TV, el color funciona distinto según el tipo de pantalla/monitor en que se use y a su vez se suman temas importantes como la accesibilidad.
Y aquí la pausa para anécdota…
Resulta, curioso e incluso frustrante el poco conocimiento que diseñadores gráficos principiantes con aires de expertos tienen hoy en día sobre el tema, damos por hecho que el color es solo abrir nuestra ventana de adobe Illustrator y elegir al azar y por gusto el mejor color (o el color de moda )para usar en un diseño, y peor aún resulta cuando el mayor porcentaje de producción en diseño va dirigido a diseño para pantalla , ya sea para contenido en RRSS o para algo más avanzado como interfases digitales.
Recientemente he preguntando a más de un diseñador si sabe de accesibilidad, si sabe por qué su diseño falla en accesibilidad y la respuesta es una cara de «WTF» seguido de ojos en pánico, porque no tienen idea de que contestar, ya que ni siquiera conocen el concepto.
¿Por qué es tarea del diseño la accesibilidad?
Porque hasta donde sabemos aun diseñamos para humanos, que tiene capacidades distintas y diversas debilidades físicas, y tan solo centrándonos de momento en debilidades visuales, tenemos la miopía y el daltonismo encabezando la lista. Y aquí retomo el tema del color, y te pregunto..¿Cuando diseñas algo (lo que sea, no solo web, es decir video, post de facebook, un e-book, etc) sometes tu diseño a pruebas de accesibilidad para daltónicos? ¿Si quiera sabes cómo verán ellos los colores?
En error frecuente que comentemos, es crear algo para que «se vea bien» pero su función la pasamos por alto, al final todo lo que hacemos tiene una función base, que es comunicar y colores que contrastan poco, no comunican adecuadamente. Porque alguien con debilidad visual no lo leerá apropiadamente, por ejemplo: textos pequeños en tipografías light con colores claros sobre colores claros no se leen y no pensamos si quiera en donde será colocado nuestro diseño, y por ello fracasa la función.
La accesibilidad debe ser la piedra angular de un sistema de color, por sistema de color comprendamos la paleta que toda identidad, aplicación y/o marca, debe tener y respetar, ya que otro error frecuente de las marcas es no proporcionar a sus empleados un manual o un design system (según sea el caso) que les indique que colores usar y como usarlos, esto convierte todo eventualmente en un caos donde Apps, websites, contenido de RRSS de la misma marca utilizan colores parecidos al del logo pero no unificados, provocando una inconsistencia que recae en una personalidad pobre y poco profesional de la marca.
El contraste
Una decepción más a la lista de la nueva generación de «diseñadores» es la falta de conocimiento de la palabra «contraste» ni por sentido común se les viene a la mente que contraste significa «diferente» colores que contrastan, son colores que por su naturaleza difieren entre si, ejemplo, una combinación efectiva en navidad es el rojo y el verde, y la razón de que sean buenos juntos no es porque «que bonitas es la navidad», la razón viene de la teoría y la técnica del color, no del buen gusto.
El rojo y el verde son colores complementarios, es decir forman un contraste complementario, lo que significa que se encuentran en lados opuestos del círculo cromático, por ello funcionan muy bien juntos. Y como ese, muchos otros que los diseñadores tienen la obligación de conocer, y me gusta pensar qué así es y que solo me he topado con casos excepcionales que no tienen ni idea de lo que son.
Teoría del color aplicada
Gracias a la teoría pura y dura del color tenemos herramientas maravillosas que nos facilitan el día a día cuando de crear paletas de color se trata…y no, no hablo de Pinterest, enlistemos algunas:
Adobe Color
El círculo cromático en su máxima expresión, que se remonta a las reglas escritas hace años y aplicadas de manera magistral en esta cosita que alguna vez habrás viso en tiendas de arte:
Si observas la imagen al centro, hay diversos triángulos y flechas que indican contrastes ideales, sin embargo pocos saben usarlo y sin saber usarlo se adentran a usar Adobe Color, cuando es precisamente la herramienta que tradujo toda la función del círculo cromático físico a su version digital.
Sin conocimiento básico de colores y contrastes todas las opciones en pantalla te rebasarán, es importante saber distinguir que las opciones enlistadas a la izquierda de la pantalla, son los tipos de contrastes obtenibles (análogos, monocromos, triadas, complementarios, etc), por esa razón al mover un nodo del círculo todo se mueve en una u otra forma. En el menu superior Adobe Color te da herramientas de accesibilidad, que te mostrarán como personas con daltonismo verán tu paleta original:
Además te muestra los niveles de legibilidad y te ofrece sugerencias útiles para diseñar de manera responsable y apegada a standards dictados por los Web Content Accessibility Guidelines (WCAG) 2.0; estos guidelines son de gran ayuda para que los contenidos sean más accesibles para las personas con discapacidades. Como mencioné antes, accesibilidad aborda una amplia gama de discapacidades; visuales, auditivos, físicos, cognitivos y más. La documentación relacionada puedes consultarla en el sitio de w3.org, al igual que muchos otros standards relacionados al diseño web.
:
Pero como todo en esta vida, si no conoces el origen del todo, no podrás hacer un uso correcto de la tecnología y te terminarás quejando de que nunca aprueban tus diseños y claro culpas al cliente o a tu jefe.
Para completar el cuadro de una buena herramienta, Adobe Color también te proporciona paletas ya armadas y en tendencia, con la posibilidad. de seleccionarla y exportarla directo a tus documentos de cualquier software de la Suite Adobe.
Coolors
Popular y favorita, genera paletas de color de manera supuestamente «aleatoria» y digo supuestamente porque la realidad es que las combinaciones las genera con base en reglas dictadas por el círculo cromático y tomando como base las triadas, tetradas y análogos según sea el caso.
Coolors te permite bloquear algunos colores que no quieras que cambien, y usando tu barra espaciadora saltas entre alternativas de paletas y te proporciona el color hexadecimal de los colores para que los uses en tus documentos.
Oto 255
0to255 es una herramienta de color que facilita la búsqueda de colores más claros y más oscuros, también llamados tintas y matices, en función de cualquier color. Esto lo hace perfecto para usarse en estados de botones, degradados, bordes y más al momento de diseñar interfaces.
Esta aplicación apela al manejo de HSL (tono, saturación, luminosidad) de un color. Para un diseñador, la verdadera identidad de un color debe ser el Hue. Normalmente, vemos esas iniciales en software de diseño y alteramos sus valores de manera aleatoria, pero debería hacerse de manera consciente, para ello observemos el diagrama del sistema de color Munsell:
El modelo HSL facilita el desarrollo de diferentes tonos para un color seleccionado (Oto255 lo hace por ti). Para cualquier color, por ejemplo, todo lo que tenemos que hacer es elegir un color. Y luego podemos ajustar la luminosidad para crear diferentes tonos y construir una paleta. La saturación juega un papel importante en la apariencia armónica de los diferentes colores.
Color Hunt
Esta herramienta simplifica la tarea de buscar paletas. ya predefinidas, gracias a su amplia clasificación que va desde colores de tendencia hasta paletas ideales para hacer gradientes. Además Color Hunt te permite agregar una extension a chrome para tener la herramienta a mano en todo momento.
Para cerrar por ahora:
La selección de color de manera profesional, va más allá de tener buen o mal gusto, implica conocimiento profundo de la teoría del color, incluyendo no solo su psicología, si no los contrastes y accesibilidad y por supuesto conocimiento de sistemas de color.
En tu camino como diseñador te enfrentarás a dos escenarios:
- Uno en el que recibes un manual de identidad o un design/color system indicándote como usarlo: en este escenario es tu responsabilidad respetar las reglas porque se crearon por una razón, la consistencia y fortalecimiento de la identidad de marca, y esto ya tomando en cuenta las bases antes mencionadas, leyes de contraste, buenas prácticas y de nuevo accesibilidad.
- Otro en el que eres tú el responsable de la marca o de la App y te corresponde pensar, analizar y desarrollar escenarios de uso, y paletas efectivas que tomen en cuenta lo que el color comunica, cómo lo comunica y cómo se desempeña a lo largo de diversos soportes visuales.
Posdata
Si bien en este artículo te hable más de la teoría y técnica del color, no dejes de lado al crear lo que el color puede significar o representar, existe mucha bibliografía al respecto, sin embargo como adicional a este contenido te recomiendo The Secrets Lives of Color un libro lleno de historias peculiares de múltiples colores y sus tonos específicos, una joya que debes leer y tener en tu biblioteca personal.
alexandrahsite.wordpress.com 