El diseño de Temas en Material Design (o Material Theming) es la capacidad de personalizar los componentes y elementos en el sistema de diseño para reflejar mejor la identidad de una marca, un producto o simplemente para personalizar la manera en cómo se ven sus componentes sin perder la funcionalidad que los usuarios ya conocen.

La creación de un tema en Material Design está basada en hacer ajustes a cuatro aspectos del sistema de diseño:

1. Tipografía
2. Color
3. Iconografía
4. Forma de los componentes

Material Design viene configurado con valores por default para cada uno de estos aspectos del diseño de la interfaz de sus componentes, que pueden ser fácilmente cambiados tanto en flujos de diseño con herramientas como Sketch o Figma, y también en el código en producción por medio de cambios en las hojas de estilo o en las librerías de componentes de desarrollo sin necesidad de reescribir el sitio web o la app.

Usando los estilos prestablecidos de los componentes se puede cambiar solo un poco o mucho cómo se ven para crear diferentes combinaciones. Ajustando esos cuatro parámetros se pueden generar muchísimas variantes, cada una un tema diferente de Material Design.

Personalización: antes y después

Como ejemplo de un tema personalizado de Material Design, modificaremos los valores de tipografía, color, iconografía y forma de un botón estándar, que tiene los siguientes valores:

• El color de base es #6200EE.
• La tipografía es Roboto Medium en mayúsculas a 14pt.
• El icono es de estilo relleno y monocromático.
• Sus esquinas son redondeadas y tienen un radio de 4dp.

Tipografía

La tipografía es un elemento visual muy importante en un sistema de diseño, y uno de los parámetros que más fácilmente pueden cambiarse en un sitio o aplicación. Gracias a servicios de tipografías en la Nube como Google Fonts se pueden contar con más opciones para cambiar y personalizar la tipografía de un diseños sin depender que los usuarios tengan las tipografía instaladas en sus dispositivos:

Color

El sistema de color de Material Design es extremadamente sencillo de usar y personalizar: se comienza con dos colores, uno de base y otro de contraste, para crear una paleta dinámica de 8 a 12 colores para diferentes usos, asegurando la mayor accesibilidad posible en múltiples pantallas. Para crear combinaciones de colores armónicas se puede utilizar la herramienta de color de Material Design.

Iconografía

Material Design cuenta con una de las bibliotecas de iconos más grande disponible para usarse sin costo. Como valor agregado, el diseño de los iconos ha sido validado en múltiples culturas y contextos para asegurar que la mayoría de la gente podrá entender su significado, además de que las aplicaciones de Google y Android los han vuelto muy conocidos.

Forma

El sistema de formas en Material Design en la versión actual admite dos tipos que pueden aplicarse a las esquinas de los componentes: formas redondeadas (con esquinas curvas) y formas cortadas(con esquinas en ángulo). Es posible personalizar el tamaño y tipo de la forma de cada una de las esquinas de un componente.

Aplicando estas reglas al resto de los componentes del sistema de diseño se obtienen los Temas en Material Design:

Es posible ver el contraste visual entre diferentes variaciones y cómo pequeños cambios en los parámetros de diseño pueden utilizarse para crear la identidad visual de una aplicación usando el mismo sistema de diseño como base.

Este año, debido a las condiciones por la pandemia de COVID19, todas las sesiones del evento estuvieron disponibles en el sitio web del evento mientras ocurrían, además de talleres, retos y otras actividades para los asistentes.

Todas las presentaciones del evento están disponibles en en el sitio de Google I/O 2022, pero dejo aquí una lista de las que tienen que ver con usabilidad, diseño de interfaces visuales o de voz, es decir, de diseño de Experiencia de Usuario:

• Pongámonos personales: diseñar la accesibilidad para las personas.
  Ponentes: Julia Feldman y Karen Ng.
• Diseño de aplicaciones para pantallas grandes.
  Ponente: André Labonté.
• Cómo crear una tipografía expresiva y legible con fuentes variables.
  Ponentes: Michael Gilbert, Sehee Lee y Tobias Kunisch.
• Migración a fuentes variables.
  Ponentes: Ivy Knight y Liam Spradlin.
• Lo que podemos aprender de los nuevos usuarios de Internet.
  Ponentes: Neha Malhotra y Nicole Naurath.
• Convertiendo una aplicación en Flutter de aburrida a hermosa.
  Ponentes: Khanh Nguyen y Rody Davis.
• Novedades en accesibilidad en Android.
  Ponentes: Nimer Jaber, Scott Adams, Vince Wu.
• Introducción a la accesibilidad y la inclusión de productos.
  Ponentes: Alex Wang y Shu Jiang.
• Depuración de accesibilidad con Chrome DevTools.
  Ponente: Cynthia Shelly
• Presentando el Marco de Diseño Accesible de Google.
  Ponente: Jenine Durland.
• Layouts básicos con Compose.
  Ponentes: Jolanda Verhoef y Simona Stojanovic.
• Novedades en Realidad Aumentada (AR) de Google.
  Ponentes: Eric Lai y Jared Finder.
• Creación de aplicaciones atractivas y eficientes para Wear OS.
  Ponentes: Chad Allen y Kseniia Shumelchyk.

También hay disponibles talleres y laboratorios sobre diseño y accesibilidad en el sitio de Google I/O 2022.

Cada año y durante tres días, los diseñadores e ingenieros de Google presentan en Google I/O las novedades de los productos, servicios y plataformas en las que trabajan para hacerlas disponibles al público general.

Todas las presentaciones del evento están disponibles en YouTube, pero dejo aquí una lista de las que tienen que ver con diseño de Experiencia de Usuario:

• Más allá del móvil: Material Design, interfaces de usuario adaptables y Flutter.
  Ponentes: Will Larche y Anthony Robledo.
  
• Prototipado de Experiencias basadas en Voz: Design Sprints para el Asistente de Google.
  Ponentes: Kai Haley y Wally Brill.
  
• Diseño de sonido y marca auditiva.
  Ponente: Conor O’Sullivan.
  
• Temas con Material Design: Construcción expresiva con componentes de Material Design.
  Ponentes: Yasmine Evjen, Michelle Alvarez.
  
• Diseño de aplicaciones de Realidad Aumentada.
  Ponentes: Alex Faaborg, Khushboo Hasija, Eugene Meng, Germaine Ruffle.
  
• Aumentando el realismo de AR con iluminación.
  Ponentes: Konstantine Tsotsos, Wan-Chun Alex Ma.
  
• Cómo llegar a los siguientes mil millones de usuarios con acciones para el Asistente de Google.
  Ponentes: Vladimir Vuskovic, Sachit Mishra.
  
• Diseño de productos de IA centrados las personas.
  Ponentes: Jess Holbrook, Kristie Fisher.
  
• Cómo se puede adoptar y medir Material Design para el éxito de un producto.
  Ponentes: Michael Gilbert, Clara Kliman-Silver.
  
• Voz y visual: cómo crear acciones para pantallas inteligentes y más dispositivos.
  Ponentes: Darla Sharp, Mandy Chan.
  
• Cómo diseñar un tema oscuro usando Material Design.
  Ponente: Javier Lopez.
  
• MLKit para Material Design: patrones de diseño para Machine Learning en móviles.
  Ponentes: Rachel Been, Philippe Cao, Kunal Patel.
  
• Crear aplicaciones para millones de usuarios (en regiones emergentes).
  Ponentes: Amrit Sanjeev, Yacine Rezgui, Rajeev Kumar.
  
• Hablemos: diseñando conversaciones de calidad para el Asistente de Google.
  Ponentes: Cathy Pearl, Jessica Earley-Cha.

Hay también una lista de sesiones de Google I/O 19 sobre accesibilidad disponible en el canal de Google Design en YouTube.