Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Paletas de colores en Material You
Diseño UX
13/6/2024
|
Torresburriel Estudio
Como ya hemos mencionado en artículos anteriores sobre Material You, no nos detendremos demasiado en esto, solo haremos un breve recordatorio de qué es Material You o Material Design 3.
Es un sistema flexible de directrices, componentes y herramientas que promueve las mejores prácticas en el diseño de interfaces de usuario. Respaldado por código fuente abierto, Material Design facilita la colaboración entre diseñadores y desarrolladores, permitiendo a los equipos crear productos atractivos de manera rápida y eficiente.
Colores dinámicos
Los colores dinámicos son una innovación crucial en Material You, ya que permiten una personalización profunda y automática de la interfaz de usuario, adaptándose a la paleta del fondo de pantalla seleccionado por el usuario.
Esta capacidad de personalización no solo enriquece la estética del dispositivo, haciéndolo más atractivo y único, sino que también mejora la coherencia visual y la experiencia del usuario al crear una apariencia unificada y armoniosa en todo el sistema.
Accesibilidad en los colores dinámicos
Os preguntaréis si estos colores afectan a la accesibilidad o cómo se soluciona esta parte tan importante en diseño UX. Material you ha desarrollado este sistema con un enfoque inclusivo, asegurando que los colores seleccionados automáticamente mantengan un alto contraste y cumplan con las pautas de accesibilidad.
Esto significa que, independientemente de la paleta de colores elegida, se garantiza que el texto y los elementos de la interfaz sean legibles y distinguibles para todos los usuarios, incluyendo aquellos con deficiencias visuales.
Además, los diseñadores pueden aprovechar el plugin de Material Theme Builder para Figma, que facilita la creación y visualización de paletas de colores personalizadas, permitiendo que cada aplicación mantenga su identidad visual mientras se integra perfectamente con el entorno o generar planetas con sus colores.
Si optamos por la selección automática de colores en nuestro teléfono, Material You no solo ajusta los tonos de la interfaz, sino que también nos ofrece la posibilidad de elegir entre diferentes niveles de contraste: estándar, medio y alto. Además, esta funcionalidad se extiende al modo oscuro, asegurando que los elementos de la interfaz sean claramente legibles y accesibles tanto en condiciones de luz como en ambientes oscuros.
Cómo se consiguen estos colores
Como mencionamos en el artículo anterior, Material You ofrece tres métodos para generar planetas de colores, mediante: colores generados por el usuario, colores basados en el contenido y colores personalizados o colores estáticos.
En esta ocasión nos centraremos en los colores personalizados o colores estáticos. Aunque la fórmula que utiliza y la estructura son la misma para los tres casos, como diseñadores UX utilizaremos el plugin creado para Figma para crear y visualizar estas paletas de colores de manera eficiente.
Una vez tenemos elegido nuestro color de marca, Material you y su algoritmo manipulan el tono y la croma del color de origen para generar cinco colores clave, llamados: primario, secundario, terciario, neutral y variante neutral.
Cuando nos ha generado estos colores base (en la siguiente imagen, los de la columna izquierda) nos genera un paleta de colores con su escala de tonalidades para cada color y mediante su algoritmo decide cual es la mejor relación de colores para el contraste.
En este caso la relación asignada, es la tonalidad de los 40, que es nuestro color de marca, y los 100. El algoritmo de color de Material you utilizan estas paletas para encontrar y combinar tonos contrastantes, creando combinaciones de colores accesibles.
Cuando ya tenemos generada la paleta principal, Material Theme Builder nos genera la paleta de colores para el modo oscuro.
¿Y qué pasa si ya tenemos unos colores específicos definidos por la marca y no simplemente un azul genérico? Por ejemplo, si ya contamos con un verde como color primario, además de un marrón como secundario y uno azul como terciario específicos. Podremos indicarle a Material Theme Builder estos colores y nos generará una paleta partiendo de nuestros colores, asegurándose de que las variaciones tengan el contraste necesario para la accesibilidad.
El uso de Material you dentro Material Theme Builder ofrece varias ventajas significativas. Permite a los diseñadores introducir colores específicos de la marca y generar automáticamente una paleta coherente, asegurando que las variaciones mantengan el contraste necesario para la accesibilidad. Además, facilita la visualización y ajuste de estas paletas dentro de Figma, lo que permite experimentar y perfeccionar el diseño antes de la implementación final.
Esto no solo garantiza una identidad visual consistente y accesible, sino que también agiliza la colaboración entre diseñadores y desarrolladores, mejorando la eficiencia y calidad del producto final.
¡Hora de experimentar!
Foto de portada de Maureen Sgro en Unsplash.