¿Qué es Material You? ¿Un nuevo Material Design?

Material Design etapas

En 2014 en Android los diseños digitales no tenían uniformidad y, en general, tenían una baja usabilidad. No había unos criterios sólidos que dieran al diseño y el espacio la importancia que tienen, y que consiguieran un estilo único que diferenciara las aplicaciones Android de la competencia.

En el mundo Apple, por el contrario, se llevaba el “flat design” que marcaba tendencia y apostaba por un diseño minimalista. Uso de fuentes claras, pocos colores y acciones intuitivas que facilitaban la navegación.

Google, pensando cómo ponerse a la altura, comenzó a trabajar en un rediseño profundo de la interfaz de su nuevo sistema operativo Android Lollipop y extendió las mismas guías de diseño al resto de sus productos: Google Drive, Google Docs, Google Search, etc. La guinda del pastel la puso liberando un API para que cualquier desarrollador pudiera aplicarlo a sus aplicaciones. Así es como nació Material Design.

Índice:

Principios fundamentales de Material Design

Lo material como una metáfora

Lo material acerca la realidad a la tecnología. Bajo esta premisa el equipo de diseño de Google, liderado por Matías Duarte, comenzó a definir conceptos basándose en formas básicas y movimientos naturales tales como cuadrados, círculos, rectángulos y también las sombras que aparecen al jugar con ellos y los movimientos y transiciones que se pueden generar al moverlos (por ejemplo, el swift para descartar una card con información basándose en cómo se cierra un cajón) para después, llevarlos a la pantalla.

Diferentes elementos de Material Design

Llamativo e intencional

El uso del color, de los espacios en blanco, el tamaño de los textos, etc. guía la jerarquía, importancia y espacio que ocupan los elementos en los servicios digitales y sirven de ayuda para situarnos dentro del espacio de acción.

Una paleta de colores creada a la medida, imágenes de calidad, el uso intencional del tamaño de la tipografía y un correcto uso de los espacios en blanco permiten la creación de una interfaz donde el usuario puede sentirse seguro con las acciones que toma y disfrutar de la experiencia de uso (UX).

Ejemplos de paletas con colores sólidos y como se comportan en los diferentes elementos Material Design

El movimiento otorga significado

Si bien las animaciones tienen la capacidad de captar la atención de los usuarios, es importante que éstas no interrumpan o bloqueen la experiencia de usuario de ninguna forma. 

En Material Design se usan cuando los diseños cambian o los elementos se reorganizan y tienen como objetivo guiar la atención del usuario y mejorar su experiencia de uso. Una transición bien diseñada debe ser suave y natural y ayudar a entender dónde se debe centrar la atención de la acción.

El uso más básico de la animación son las transiciones, pero una aplicación puede conectar con el usuario cuando transmite una pequeña respuesta. Por ejemplo: un icono del menú que se convierte en una flecha lo que tiene una doble función: informar y agradar.

Animaciones sencillas y gestos Material Design

Más allá de estos grandes bloques, se puede hablar de otros puntos generales que ayudan a la comprensión de Material Design, a saber:

  •  Elementos ordenados e imágenes claras 
  • Uso de luces y sombras para ayudar a la comprensión 
  • Creación de paletas de colores personalizada y tipografías propias 
herramienta Color Tool de Material Design

Material Design 2: Material Theming

Cuatro años más tarde, en 2018, en el Google I/O que se organiza cada año, Google dio a conocer la actualización a la 2.0. Esta versión de Material Design evolucionó en la estética permitiendo mayores niveles de personalización, pero manteniendo el estándar minimalista y colores planos.

Se creó el concepto de Material Theming, con el que Google quiso acercar y facilitar el diseño al desarrollo proporcionando un editor capaz de generar librerías de Sketch (programa para diseñar interfaces) con las guías de diseño, que se puede compartir con el resto del equipo de trabajo para trabajar de forma colaborativa y poder conseguir así un diseño más homogéneo y coherente.

Otra novedad relevante fue Gallery, una herramienta que usaban en Google a nivel interno y que se hizo pública con esta versión de Material Design.

En cuanto a diseño de interfaz, los cambios más relevantes fueron: más variedad de iconos, nuevas barras de navegación para navegar en la zona inferior de las pantallas y la herramienta Color Tool para poder crear con facilidad paletas de colores identificando colores primarios y secundarios.

Diferentes diseños de aplicaciones móviles usando Material Design

Material Design (3) vs Material You

En 2021, y aunque se puede considerar que Material Theming no se haya quedado obsoleto, Google ha publicado lo que se puede considerar una nueva versión de Material Design de la mano de Android 12: Material You.

Con esta actualización, Google quiere dar algo más de personalidad y expresividad a los diseños que se crean con las guías de Material Design, permitiendo conectar emocionalmente al producto con el usuario. 

En cuanto a la customización de los temas, aparece la creación de paletas a partir de los fondos de pantalla para su posterior aplicación en la app, consiguiendo un diseño personalizable 100% y variable de un dispositivo a otro dependiendo no solo del diseño creado ad hoc por el equipo de diseño, sino de los gustos del usuario final.

Fuente: Material Design

A nivel gráfico, Material You introduce cambios en colores, formas y sombras. Por ejemplo, botones y chips que antes eran redondos, ahora son cuadrados con bordes redondeados. Los botones estándar eran cuadrados y ahora son redondos; y los botones flotantes que antes eran redondos, ahora son cuadrados.

Otro cambio es que para diferenciar elementos y jerarquías, se prioriza el uso de distintas tonalidades de color en lugar de las tradicionales sombras que provocaban elevaciones en el espacio.

Por último cabe mencionar los widgets. Con Material You son más personalizados y útiles que nunca, ya que se adaptan a las preferencias de estilo del usuario. Visualmente se muestran  con bordes redondeados, colores dinámicos y diseño que se adapta a varios tamaños. También hay mayor uso de interruptores, checkboxes y radiobuttons.

Apariencia de diferentes widgets Material You

Ejemplos de Material Design

Google

Cuando pensamos en Material Design, el ejemplo más representativo de estas guías de estilo es, obviamente, Google. Todos los productos de Google se basan en este sistema de diseño, siendo su ejemplo más representativo y conocido a gran escala su gestor de correo electrónico: Gmail.

En Gmail podemos encontrar una amplia representación de los elementos más característicos y representativos de Material Design: colores planos, jerarquías bien definidas, iconografía, menús y pestañas de navegación

Whatsapp

Otro ejemplo de sitio que la mayoría de usuarios conocen y que usa Material Design es Whatsapp. La aplicación de mensajería instantánea actualizó sus guías de estilo y navegación, basándose en Material Design, en el año 2014, ofreciendo desde entonces una nueva interfaz de usuario más moderna y con una mejorada experiencia de uso.

Asana

Como aplicación comercial que sigue las pautas Material Design y que ha sido premiada en los propios Material Awards es Asana.

Creada por el co-fundador de Facebook Dustin Moskovitz, es una aplicación móvil y web colaborativa para la gestión de tareas. Permite gestionar flujos de trabajo de inicio a fin conectando a los equipos que la utilicen. Esto lo hace mediante una interfaz sencilla que, apoyándose en las guías de estilo de Material Design, busca una experiencia de uso amigable e intuitiva.

asana
Fuente foto: Buitwithmaterialdesign

En NTS SEIDOR nos apoyamos en las guías de Material Design cuando consideramos que suma y facilita la ejecución del proyecto, para conseguir productos digitales robustos, usables y con la menor curva de aprendizaje posible.