Material You (Material Design 3): colores dinámicos y personalización de la interfaz

Google marcó un cambio significativo con el lanzamiento de «Material You» en 2021 junto con Android 12, y desde su lanzamiento ha continuado evolucionando año a año. Este enfoque de diseño está intentando revolucionar la personalización y estética de los dispositivos, llevando la experiencia del usuario a un nuevo nivel de individualidad y capacidad de personalización.

«Material You» no solo funciona en los dispositivos Google Pixel, sino también en una amplia gama de dispositivos Android.

Además, se ha extendido a tabletas, relojes inteligentes y toda clase de dispositivos. Esto permite a los usuarios disfrutar de una experiencia coherente y personalizada en todos sus dispositivos.

¿Qué es Material You o Material Design 3?

Material Design es un sistema de diseño integral dirigido específicamente a diseñadores UX y UI. Este lenguaje o guía de estilos de diseño ofrece un marco cohesivo y estandarizado que combina principios visuales y funcionales para ayudar a los diseñadores a crear interfaces de usuario. Que sean tanto coherentes como atractivas en una amplia gama de plataformas y dispositivos. 

Su propósito es proporcionar un conjunto coherente y estandarizado de principios y directrices que combina los principios clásicos del buen diseño con la innovación y las posibilidades de la tecnología.

Material You trae consigo un enfoque más simplificado y minimalista al diseño de interfaces, caracterizado por menos sombras, menos estilos de letra, formas más redondeadas y una estética más limpia.

Principales actualizaciones

Algunas de la principales actualizaciones de «Material You» incluyen la personalización profunda de la interfaz, permitiendo a los usuarios ajustar colores, formas y tipografías según sus preferencias; los colores dinámicos que generan paletas automáticamente basadas en el fondo de pantalla del usuario y se aplican coherentemente a toda la interfaz; la adaptabilidad, asegurando que la interfaz se ajuste fluidamente a diferentes tamaños de pantalla y dispositivos; la coherencia visual, manteniendo una experiencia integrada y armoniosa incluso con cambios personalizados; y la interacción y movimiento significativo, con animaciones suaves y naturales que mejoran la usabilidad y proporcionan retroalimentación clara a los usuarios.

Temas personalizados 

Es la capacidad de crear temas personalizados. Que permite a los usuarios ajustar y personalizar la apariencia de su dispositivo de una manera profunda y dinámica, adaptando la interfaz a sus preferencias personales.

¿Cómo lo hace? Cuando un usuario selecciona un fondo de pantalla, Material You analiza los colores del fondo y genera una paleta de colores dinámica. Esta paleta incluye varios tonos y variantes que se aplican automáticamente a diferentes elementos de la interfaz.

Los colores generados se utilizan en toda la interfaz del sistema, incluyendo la barra de estado, las notificaciones, los botones, los menús y otras áreas, creando una experiencia visual coherente y personalizada. 

Te estarás preguntando, como diseñador UX/UI o desarrollador, si esta generación automática de colores y formas que el usuario puede elegir afecta a nuestros diseños cuidadosamente creados en un sistema de diseño. Pasas horas analizando, investigando, diseñando y programando la imagen de la marca, para que luego Google la cambie. ¿Qué pasa si quiero que mis botones sean de una manera específica? ¿Me los cambia?

Tranquilos, como diseñador, tenemos el control total. Puedes gestionar los colores dinámicos en tu aplicación web o móvil definiendo colores base y tokens de diseño. Además, es posible establecer limitaciones y excepciones para elementos críticos.

Incluso, una marca puede optar por no utilizar los colores dinámicos en su aplicación o sitio web si considera que pueden comprometer la identidad visual de la marca o la experiencia del usuario.

Colores dinámicos en Material You

Esta funcionalidad no solo permite a los usuarios personalizar la apariencia de sus dispositivos de manera profunda y automática, sino que también nos ofrece la capacidad de generar paletas de colores completas para nuestros proyectos. Material You ha desarrollado el plugin Material Theme Builder para Figma, para facilitarnos esta tarea.

Además, respecto a los colores dinámicos automáticos, Material You ha creado también un visualizador que permite a los diseñadores ver cómo se verían sus diseños si optaran por esta opción de personalización automática. 

¿Cómo genera Material You estas paletas de colores?

Pues mediante una serie de algoritmos y bases de datos. Los algoritmos manipulan el tono y la croma del color de origen para generar cinco colores clave complementarios. Posteriormente, el sistema manipula los valores de tono y croma para crear una paleta tonal para cada color clave.

¿De donde salen estos colores Base? 

Material you nos ofrece tres posibilidades. La primera, a través del color generado por el usuario, que proviene del fondo de pantalla. El fondo de pantalla se analiza digitalmente mediante un proceso llamado cuantificación y se selecciona un solo color como color de origen.

La segunda opción, se genera a partir del contenido de la aplicación. El color proviene del contenido de la aplicación o web, se analiza todo nuestro sitio y se extrae el color principal y mediante el algoritmo se genera la paleta de color.

Y la tercera opción que nos ofrece Material You, es la selección de un color a nuestra elección. Y a partir de este color nos generará toda la paleta cromática.

¡Si te parecen interesantes estas novedades o quieres que desarrollemos más alguno de estos temas, no dudes en dejarnos un comentario!

---

Foto de Felix Dubois-Robert en Unsplash.