Google Material: Un lenguaje de diseño para (dominarlos a) todos

El omnipresente gigante de internet vuelve al ataque. Una de las novedades anunciadas en el pasado Google I/O 2014 fue la de la nueva capa de diseño para la próxima versión de Android. Aunque aún falta para ver esta nueva versión en el mercado, ya comienzan a aparecer aplicaciones con el nuevo estilo de diseño, y están documentándolo y promocionándolo, mientras van adaptando todo su ecosistema de servicios y aplicaciones (ya pueden verse algunas novedades en Drive, aunque aún no para todos los usuarios).

La gran novedad es que Material cambiará todo el ecosistema Google, no sólo Android. Desde hace unos años, en Google se están preocupando seriamente de mejorar la experiencia de usuario en todos sus servicios, pero hasta ahora cada equipo hacía la guerra un poco por su cuenta, lo que ha mejorado la experiencia en términos generales pero ha introducido aún más inconsistencia entre aplicaciones, servicios web y versiones de Android.

Después de tres años de trabajo e investigación, llega Material, con aspiraciones de ser algo más que una capa de pintura sobre lo que había: proponen un nuevo lenguaje de diseño para crear una experiencia consistente, no sólo entre aplicaciones, sino también entre diferentes dispositivos.

Recordemos lo que está por llegar: wearables (como relojes, anillos, ropa, gafas, etc), Google TV, Android en el ordenador del coche, y quién sabe cuantas novedades más. Tantos dispositivos diferentes podrían multiplicar los problemas de fragmentación de versiones e inconsistencia entre dispositivos, y no permitirán personalizaciones del fabricante en estos nuevos dispositivos. No sería de extrañar que pase lo mismo en un futuro también en móviles.

Reloj con sistema operativo Android

Reloj con sistema operativo Android (imagen de digitaltrends.com)

Material es el lenguaje común que Google propone para que los entendamos a todos. Aunque aún queda para que podamos verlo funcionando en toda su capacidad, ya podemos ver ejemplos circulando por internet. Muy pronto será una gran influencia en todo tipo de productos digitales, no solo apps para móviles y tablets, también en sitios web y aplicaciones de escritorio.

Porque ya vimos lo rápido que se extendió el diseño “flat” a raíz de IOS 7 y Windows 8, y Material es una evolución de esta línea de diseño. Pero no se queda en unas pocas mejoras. Es un sistema pensado para pantallas táctiles, que funciona también en equipos de escritorio, y que pretende ser lo más universal posible para poder trasladarse a cualquier ámbito.

¿Cuál es la evolución que traerá Material?

Aunque aún no se conocen todos los detalles, ya hay una guía de estilo que se puede consultar. Aunque hay elementos en común con IOS 7, también hay novedades muy interesantes, pensadas para facilitar la vida de desarrolladores y usuarios:

Un paleta de colores renovada

Google propone una paleta de colores muy saturados, buscando alto contraste para facilitar la navegación incluso en condiciones difíciles: exteriores, batería baja, etc. Aunque es previsible que no se siga al pie de la letra (¿Cuántas empresas no preferirán utilizar sus colores corporativos?), es una ayuda para crear aplicaciones con combinaciones de colores que funcionan.

Diseño flat, pero con profundidad

Aunque sigue la estética de flat design de otros sistemas operativos, utiliza más las sombras para crear sensación de profundidad. Esto ayuda a establecer jerarquías entre los elementos en pantalla, y en las transiciones.

Un curioso efecto es que en algunos botones la sombra simula que el botón “se eleva” al pulsarlo, lo que es el efecto contrario que pulsar un botón físico (que “se hunde” al apretarlo). Esto puede parecer desconcertante, pero tiene lógica cuando se trata de elementos que se pueden arrastrar. Al “acercarse”, está por encima del resto de elementos de pantalla, lo que facilita reposicionarlo.

Iconos creados en cartulina

Iconos creados en cartulina para estudiar las sombras. Imagen de designmodo

Movimiento con significado

Material trae interacciones y animaciones realmente novedosas, dirigiendo la atención por medio del movimiento. Esto ayuda a encontrar el siguiente paso, y a saber qué se ha seleccionado en la pantalla (en las pantallas táctiles, al no haber puntero como en un ordenador tradicional, a veces no sabemos dónde hemos pulsado). Entender esto no es fácil sin ejemplos, así que aquí hay unos cuantos.

Tipografía para establecer jerarquías

Esto no debería ser una novedad, ya que es una característica de un buen diseño desde siempre, pero ha tomado una importancia renovada a raíz de la multiplicación de dispositivos con pantallas cada vez más pequeñas. Además de resaltar los titulares respecto al texto, empezaremos a ver como los elementos seleccionados aumentan su tamaño mediante transiciones. La interfaz también se transforma para facilitar el siguiente paso.

Polymer: Material design en la web

Google ha preparado un API de componentes web preparada para funcionar con Material design, que permite crear aplicaciones web utilizando los servicios de Google de forma sencilla. Esta es su apuesta para sacar Material de los móviles y llevarlo a la web. Puedes ver un artículo aquí, ir al sitio web del proyecto, o probar su herramienta de prototipado.

Y a tí, ¿Qué te llama la atención de esta nueva interfaz? ¿Crees que influirá en el diseño web, o que sólo lo veremos en móviles?

Suscribete a Dispersium

curso Divi actualizado y en español