Durante los procesos de exploración y desarrollo de componentes para un Sistemas de Diseño de un producto digital, es común que dentro del equipo aparezcan preguntas tales como, ¿cómo nombramos los colores? ¿cómo tratamos los componentes aplicados en modo oscuro/claro? ¿diseñamos nuevos componentes o ajustamos los tonos de cada color?, entre otras muchas preguntas.
Y claro, seguramente encontrarás muchas recomendaciones, pero te aseguro que no habrá una respuesta mágica. Todo dependerá de cómo se acomoda la forma en la que el equipo de Diseño y Experiencia estructuran y ordenan su sistema. Habrá factores que influirán como la experiencia, buenas prácticas y visión de producto que tengan – o incluso todo podría ser muy distinto si es que eres solo tú el que realiza todas estas tareas.
Sin embargo, siempre llega un punto donde el diseño tendrá que converger hacia el paso a desarrollo, y en este proceso es fundamental que puedas establecer una buena comunicación, así como también, preparar un buen hand-off para que los desarrolladores puedan interpretar al 100% lo que se mostrará en el front.
Aquí es donde nacen algunas convenciones, como la de los colores semánticos.
¿Pero, qué son entonces los colores semánticos?
Cuando hablamos de colores semánticos nos referimos a una forma diferente de nombrar colores que se basa en su función en vez de su tono.
Por ejemplo. Asociamos el color amarillo con mensajes que en nuestra vida diaria representan advertencias o precaución.
Al desarrollar nuestro sistema de color, podemos utilizar este mismo insight para que los tonos amarillos, o una paleta de amarillos en específico los denominemos como “warning” (advertencia en inglés).
De hecho este insight es una aplicación de la Ley de Jacob: “Los usuarios prefieren que su sitio funcione de la misma manera que todos los demás sitios que ya conocen.“
¿Qué quiere decir esto? Que los usuarios reconocemos y asociamos ideas con conceptos que se presentan de forma cotidiana en nuestras vidas – como la señales de tránsito amarillas que vemos todos los días y que buscan advertirnos de un posible peligro.
Del mismo modo, en el mundo digital, las notificaciones y mensajes en color y tonos amarillos representan lo mismo: una advertencia.
Entonces, ¿por qué aprovechamos esto para clasificar y diferenciar los colores de nuestro Sistema de Diseño por su función en vez de por su nombre o tono?
Tenemos que pensar que cuando diseñamos una paleta de colores, eventualmente se convertirá en código, en un documento CSS por ejemplo, es decir, los colores tendrán una nomenclatura de nombre y código; aquí es donde toma importancia hacer un buen uso del naming.
Por ejemplo, si vamos a utilizar 3 colores para crear los componente de advertencia (warning), podríamos nombrar los colores en base a su nombre y tono:
- color-amarillo-100 o color-yellow-100
- color-amarillo-400 o color-yellow-400
- color-amarillo-700 o color-yellow-700
Con ese sistema estamos usando la terminación numérica en cientos para representar tonos, siendo 100 un tono de amarillo claro, 400 un tono más representativo del color, y 700 para un tono más oscuro.
Pero este tipo de nomenclatura, ¿es fácil de mantener en el tiempo? ¿es escalable y sostenible en el tiempo?
Usando un modelo de colores semánticos podemos organizar nuestros colores por su uso, de esta manera:
- color-warning-light
- color-warning
- color-warning-dark
Esto no solo ayuda a que el Desarrollador pueda usarlos de manera más sencilla, también nos da la posibilidad de realizar modificaciones en nuestra paleta sin tener que alterar el naming, otorgándole mayor consistencia a nuestro sistema de diseño.
Actualmente, los colores semánticos los podemos encontrar en prácticamente todos los Sistemas de Diseño, y están organizados psicológicamente para que percibamos los siguientes mensajes (es como una especie de convención universal):
- 🔴 Rojo: errores, peligro, alertas, proceso inconcluso.
- 🟢 Verde: éxito, seguridad, correcto, proceso completado.
- 🟡 Amarillo: alerta y precaución.
- 🔵 Azul: información.
Sobre los tonos exactos que debes utilizar, no hay una paleta absoluta – de hecho dependerá de cómo se relacione a nivel de branding. Lo que si podrás encontrar, son recomendaciones basadas por ejemplo en el uso de un buen contraste.
Si estás por comenzar o quieres algo de inspiración para renovar tus colores, te recomiendo revisar algunos referentes que utilizan los colores semánticos, para que así puedas construir tu propia e increíble paleta:
💡 Hint: Si están buscando ejemplos de colores semánticos, ojo, porque también los puedes encontrar como colores funcionales (functional colors) o colores de sentimiento (sentiment colours).
