Material Design, el sistema de diseño creado por Google en 2014, se ha vuelto una de las opciones más populares para diseñar sitios web y apps para casi cualquier plataforma, pero con el tiempo todos esos sitios y apps comienzan a verse iguales. Para resolver esto y hacer el sistema de diseño más flexible y fácil de personalizar, el equipo de diseño en Google creó Temas para Material Design.
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:
- Tipografía
- Color
- Iconografía
- 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.
