La semana pasada tuvo lugar Google I/O, el congreso anual orientado a desarrolladores que organiza Google cada año. En él se presentan y discuten las aplicaciones de Google y las tecnologías abiertas.
Entre muchas otras novedades, Google ha dado a conocer Material Design 2.0 (un nombre con bastante poca gracia, por cierto), la actualización de la primera versión lanzada en 2014.
Material Design es un sistema de diseño open source que ayuda a los equipos a construir fácilmente experiencias digitales de alta calidad.
La primera versión se lanzó en 2014 y hoy en día ya existen 1.5 millones de aplicaciones que lo utilizan.
Seguro que lo reconoces fácilmente: es el look&feel que tienen todas las aplicaciones nativas de Google y prácticamente todas aquellas diseñadas para Android:
Este 2018 se han presentado una serie de cambios que convierten Material Design en un sistema que se acerca todavía más a los desarrolladores, que hasta ahora tenían algún que otro problema para implementarlo correctamente.
Veamos los cambios, porque también hay algunos a nivel de diseño que son muy interesantes.
En algunos artículos de uiFromMars te he hablado de las librerías de Sketch y cómo compartir proyectos mediante Sketch Cloud para tener una «single source of truth«.
Pues bien, Google ha acercado Material Design a este concepto de Sketch mediante el Material Theming.
Hasta ahora, todas las aplicaciones que utilizaban Material Design eran clavadas unas a otras. Lo verás fácilmente si te das una vuelta por Google Play.
Con esta nueva filosofía, Google quiere que puedas utilizar Material Design y, además, customizarlo al 100% para adaptarlo a tu marca.
Piensa en Material Design como una plantilla que puedes utilizar como base y que es 100% personalizable.
Te permite cambiar la tipografía, paleta cromática, iconos, estilo de las figuras geométricas, integrar elementos de UI predefinidos pero customizados, etc.
Es fácil de usar. De hecho, ellos lo resumen en tres pasos:
¿Piensas que no es nada nuevo? Bueno… en realidad es todo casi automático.
Veamos cómo se hace 🙂
Puedes empezar a implementarlo instalando el plugin gratuito Material Theming Editor que puedes descargar en este enlace.
(Ojo, que para poder utilizarlo necesitas como mínimo tener instalado High Sierra (10.13)).
Como verás en el vídeo, lo primero que te pide es que guardes el archivo que tendrá el Theme en una ubicación compartida.
Sí, es justo para lo que piensas. Se generará automáticamente una librería de Sketch que podrás compartir con el resto del equipo para trabajar colaborativamente.
Como ves, con Material Theme Editor podrás crear fácilmente una librería compartida y usarla como base para diseñar el resto de pantallas de tu aplicación o web.
De esta manera, todo tendrá un lenguaje consistente y, lo que es mejor, no se producirá ninguna incoherencia con hexdecimales distintos, paddings y margins diferentes, etc.
Pero no acaba todo con Material Theming. Google ha lanzado también una herramienta que hasta ahora utilizaban solo a nivel interno: Gallery.
Si te leíste el artículo en el que te expliqué como funciona Sketch Cloud, lo verás fácilmente (si no lo has leído, hazlo primero… te será más fácil comprender Gallery).
Con esta nueva plataforma, Google permite que subas a la nube los diseños realizados con Material Theming y compartirlo con el resto del equipo.
En resumen, podrás:
Ligado al último punto, te cuento una novedad que me parece maravillosa… la implementación de un “hermano” de Zeplin.
Utilizando la funcionalidad de Inspect (Google lo ha llamado así), los desarrolladores podrán ver qué características tiene cada elemento: hexadecimal, tipografía, tamaño e interlínea, márgenes…
… e incluso tienen el enlace directo para descargar la tipografía y el set de iconos. Con un solo clic.
En realidad lo que ha hecho Google es “fusionar” distintas herramientas, pero lo ha hecho simplificando todos los pasos (solo tienes que bajar el plugin gratuito y hacer login en Gallery con tu cuenta de Google) y de forma gratuita.
Tengo curiosidad por ver cómo responde Apple, Sketch y/o Adobe a este movimiento.
En el Google I/O se presentaron muchas otras novedades, pero no podía obviar una mención al diseño propiamente dicho y a la experiencia de usuario:
No te descubriré nada si te digo que los teléfonos son cada vez más grandes, hecho que reduce substancialmente la reachability (en este caso prefiero usar el término en inglés ya que en castellano no tiene una traducción muy bonita: alcanzabilidad).
Aunque son modelos “viejos”, si te fijas un poco en la imagen ya ves dónde está el problema:
Cada vez es más complicado utilizar los elementos de navegación que por defecto siempre diseñamos arriba del todo, debajo de la barra de estado.
Así que Google ha empezado a implementar la App Bars Bottom en sus aplicaciones (que ya llevaban testeando unos meses), que no es otra cosa que mover la barra de navegación a la zona inferior de la pantalla:
Como ves, mueve su botón flotante al centro de la pantalla y la izquierda y la derecha incluyen los elementos que siempre encontramos arriba: menú, icono de búsqueda, etc.
Seguramente esto acabará siendo un estándar en poco tiempo, pero por ahora Apple no ha hecho ningún movimiento al respecto. La Tab Bar no cuenta, ya que Google ya tiene un equivalente, la Bottom Navigation.
A nivel gráfico puro y duro, esta segunda versión de Material Design trae principalmente cambios en los iconos. Ahora pueden utilizarse con más estilos: ángulos rectos, duotono, etc.
También han creado una herramienta para poder crear paletas de colores fácilmente: Color Tool. Simplemente debes seleccionar un color primario y uno secundario y automáticamente lo verás aplicado.
Es importante resaltar que han añadido una pestaña de Accesibilidad, en la que te informan de si la combinación que has escogido pasa el test 1.4.1 de WCAG.
La nueva propuesta de Google abre distintos caminos.
Por un lado, se agudiza la batalla de las herramientas y por el otro, sienta base para mejorar la usabilidad y la integración de diseño con los desarrolladores.
Como decía a mitad del artículo: habrá que ver cómo responden el resto de jugadores, porque la partida se está poniendo muy interesante.
¿Y tú? ¿Qué piensas de las novedades de Material Design 2.0.? 🙂
¿Cuándo está acabado un diseño?
Introducción a Framer: Primeros pasos
Design Tokens: qué son, ventajas y cómo diseñarlos e implementarlos
Me parece super interesante poner las App Bars en la parte de abajo, va a ser algo raro encontrárselo ahí a partir de ahora pero tiene todo el sentido del mundo, mola 😉
Muchas gracias Cris!!
¡Gracias por tu comentario Santos! La verdad es que sí, la App Bar será algo que provocará un buen cambio en el diseño de aplicaciones. Habrá que ver como lo aplican el resto…! 🙂
Este post me alegró el día!!
Me abrió una puerta para seguir explorando nuevas posibilidades y formas de abordar mis proyectos ❤️
Algo importante que suele pasar bajo de la mesa. La nueva implementación del App Bar Bottom ayuda a evitar conflictos visuales con los notch (gota), el espacio reservado que dejan para la cámara frontal cuando la pantalla ocupa todo el tamaño del dispositivo.
Por ende su implementación no solo es a favor de una mejor experiencia, sino que ayuda a Material a incorporarse mejor al ecosistema de dispositivos con base android y presencia de notch y también las portabilidades que hay para iOS/iPhone.
iOS en versiones –muy– viejas evita limitar con una caja visual todo el espacio superior, abandonaron la línea –especie de dropshadow de 1px– que delimitaba hasta donde abarca la Nav Bar. Esto ayudo a la incorporación de su notch sin tener fricción con la UI. Pasando así a usar un section Title súper grande, con un offset que se distingue claramente de las versiones anteriores, y a su vez una alineación a la izq en vez de central, logrando así mejorar la lectura, jerarquías y brindando aire.