Color System
Parámetros de color para mejorar la accesibilidad de los usuarios.
Sistema de Color
El color es una parte fundamental de cualquier sistema de diseño, pero puede descontrolarse fácilmente. Con un número aparentemente infinito de tonalidades y matices, la variabilidad de los diferentes espacios de color y los distintos métodos de selección y muestreo de colores, es fácil que los equipos acaben con docenas de valores de color que se utilizan de forma incoherente.
Al definir un sistema de colores, puede asegurarse que se tendrá una paleta controlada (y consolidada) de colores aceptables, un uso coherente y adecuado, y también mejorar la facilidad de mantenimiento. Como punto de partida sencillo, se definirán los colores de la marca. La incorporación de los colores de la marca permitirá mantener la personalidad de Elektra en toda la interfaz de usuario. Nos aseguraremos de tener matices de estos colores para poder utilizarlos cuando no sea apropiado o ideal usar los colores en su intensidad total.
El color es un elemento muy importante de la comunicación visual, por ello, es necesario hacer un uso inteligente e intencional del mismo.
Las paletas de colores deben crearse mediante un algoritmo definido que tenga en cuenta todas las dimensiones:
Tono: Esto dicta como variará el tono en las muestras de la paleta. Puede mantener el valor del tono del color base en todas las muestras o añadir una ligera variación.
Saturación: Definir la variación de la saturación, es el mismo proceso para el matiz, se aplica también a la saturación y al brillo.
Brillo: Definir la variación del brillo es a medida que se desciende en la paleta, el brillo irá disminuyendo. Un rango de 100 a 35 serviría para la mayoría de los colores.
Principios:
Basado en las recomendaciones de Material Design es importante mantener los siguientes principios para un uso correcto y útil de los colores en nuestros productos digitales:
Jerarquía
El color indica qué elementos son interactivos, cómo se relacionan con otros elementos y su nivel de importancia. Los elementos importantes deben destacarse más.
Legible y Accesible
El texto y los elementos importantes, como los íconos, deben cumplir con los estándares de legibilidad y accesibilidad cuando aparecen en fondos de colores.
Expresivo
Es importante mostrar los colores principales en momentos memorables o clave que refuercen la imagen de nuestra marca.
Colores primarios y secundarios:
En este sistema de colores, se denomina el color primario y secundario que representa la marca, así como las tonalidades del color neutro para diferentes aplicaciones, basado en las recomendaciones de usabilidad publicadas por Material Design en una escala de 900 como más obscuro a 50 siendo el más claro.
Las variantes obscuras y claras de cada color se pueden aplicar a la interfaz de usuario de diferentes maneras y motivos, los cuales se muestran más adelante.
Colores semánticos:
Estos colores están presentes en todos los diseños, ya que psicológicamente envían los siguientes mensajes:
- Verde: éxito, seguridad y válido
- Amarillo: alerta y precaución
- Rojo: errores, peligro y alertas
- Azul: información
No hay un estándar sobre qué tonos exactos deben tener, pero es importante la definición de estos colores para comunicar el tipo de mensaje que requiere el usuario en cada momento.
Definición de la paleta de colores:
La definición de una paleta de colores también deben llevar algún tipo de clasificación, ya que definen el estilo visual de nuestro sistema de diseño, diferenciando la identidad de la marca del resto de efectos y elementos visuales.
Para escoger estos colores debemos tener en cuenta los colores de la marca, los colores principales, secundarios, los neutros y los colores de fondo, incluyendo la posibilidad de utilizar un Modo Obscuro.
El trabajo puede parecer un poco complicado cuando tenemos en cuenta todos estos colores, pero el resultado será mucho mejor, los colores funcionaran correctamente entre todos generando una armonía en todas nuestras pantallas.
A continuación se presenta una selección de los colores requeridos que utilizaremos para crear la paleta de colores a partir de la escala mostrada y, por lo tanto, los estilos en Figma para trabajar con ellos en todo momento, asegurando la coherencia en todo el e-commerce de Elektra:
Color Styles
Después de tener definida la escala cromática y la definición de la paleta de colores a utilizar, generamos los estilos que serán el estándar del e-commerce, intentando contar con las suficientes variantes de tono y color que cubran las necesidades de comunicación de nuestro producto:
Neutral / Grayscale
Aplicados en fondos, superficies y textos.
Primary / Rojo EKT
Color principal de la marca. Se aplica en elementos principales como botones, menús, etc.
Secundary / Amarillo EKT
Color secundario de la marca. Se aplica exclusivamente como acento en elementos o acciones secundarias.
Feedback / Success
Se aplica para mensajes de confirmación, transacciones o validaciones correctas.
Feedback / Caution
Se aplica en mensajes preventivos o aviso de alguna acción pendiente.
Feedback / Negative
Se aplica en mensajes de error o validaciones incorrectas.
Feedback / Information
Se aplica en links y mensajes informativos para el usuario.
Dark Mode
Tonos utilizados en superficies cuando se aplica el modo obscuro.
Uso de Dark Mode
Es importante tener en cuenta un tema Dark Mode en cualquier producto digital que muestre superficies obscuras y color de bajo contraste con la finalidad de disminuir la fatiga visual, el ahorro de energía en los dispositivos móviles como el uso de nuestro producto en entornos con poca luz.
Para más documentación acerca de este modo acceder a la siguiente sección: Dark Mode
¿Dónde encuentro los estilos de color?
Todos estos estilos los podrás encontrar directamente en la biblioteca de assets del Design System de Elektra en Figma en la sección: Color Styles
Usos correctos e incorrectos:
Una vez creados los Estilos de color en la librería podrás encontrarlos fácilmente en el catálogo de colores en el panel de herramientas del lado derecho de tu pantalla.
El uso incorrecto en colores puede demeritar nuestro producto, quitar visibilidad al usuario y crear frustraciones provocando usuarios desertores. Procura hacer buen uso de los colores tanto de marca como semánticos.
También puedes consultar
Typography
Iconography
A través de nuestro sistema de diseño establecemos prácticas que nos permitan el diseño de una interfaz más aceptable y que ayuden a mejorar la experiencia de nuestro usuario para el e-commerce de Elektra.mx
Aquí puedes encontrar el portal digital y las apps disponibles:
