¿Qué es Material Design?

Hace tiempo que Google comenzó con el proceso de rediseño de todas sus aplicaciones web y móviles a Material Design. Algo que venía haciendo desde hace tiempo y que han agilizado con el motivo del décimo aniversario de Google Chrome, con el rediseño también del popular navegador.

Tenemos claro que las aplicaciones de Google están más que presentes en nuestro día a día pero, ¿qué es el Material Design?

Según Google la definición es la siguiente: “Material Design es un lenguaje visual que sintetiza los principios clásicos del buen diseño con la innovación de la tecnología y la ciencia”. Pues bien, si te has quedado frío con la anterior definición, veamos qué quiere decir.

Coherencia estética y funcional

Como ya hemos hablado en anteriores posts Material Design es un sistema de diseño creado por Google con el fin de ser capaz de adaptarse a múltiples dispositivos y plataformas.

La idea de Google es la de incorporar este sistema de coherencia estética y funcional de forma progresiva a todos sus productos, incluyendo las aplicaciones web y móviles, con la finalidad de crear una experiencia similar en todas sus plataformas.

Material Design fue anunciado en 2014, junto con el lanzamiento de la versión 5.0 Android Lollipop y desde entonces se ha ido implementando en cada uno de sus aplicaciones para crear un sistema que ofrezca la misma experiencia de usuario en todas las plataformas y dispositivos.

Aunque esta guía es extrapolable al diseño web, en aplicaciones móviles Material Desing es utilizado desde la API 21 (Android 5.0 o Android Lollipop) hasta la actualidad y puede ser implementado en aplicaciones gracias a la v7 de la librería appcompat, que se utiliza en prácticamente todos los dispositivos android fabricados a partir de 2009.

Google Material Theme

Para llevar a cabo esta migración de diseño Google ha facilitado el trabajo a desarrolladores y diseñadores que nada tienen que ver con Google para que incorporarán Material Design a sus aplicaciones a través de multitud de herramientas, recursos y documentación procedentes de la guía de diseño Google Material Theme.

Material.io es la web donde Google ha unificado todo este material en el que, además, podemos disfrutar de análisis de aplicaciones de otros usuarios.

Google pone a nuestra disposición recursos para testear cómo responden nuestros productos digitales en los puntos de ruptura de diferentes tamaños de dispositivos a Material Design. Además, también podemos ponernos en contacto con Google para poder testear la UI y UX de nuestros productos. Aunque, como parece dejar ver en el formulario de contacto, no todos los que lo soliciten recibirán acceso.

Material Design ha preparado a los usuarios que poco a poco han interiorizado el UI y UX de Google, lo que facilita el camino de cara a plantear nuestros diseños web o de aplicaciones móviles con este sistema.

El gigante Google ha pretendido, y lo está consiguiendo, propagar su sistema: Material Design ha cambiado la forma en que vemos la web y las aplicaciones móviles en todo el mundo.

Pensado en el mundo físico

Matías Duarte, diseñador de interfaces y vicepresidente de diseño de Google, es uno de los impulsores de este sistema de diseño que ha transformado la IU y UX del entorno web y móvil en la actualidad. Según el propio diseñador Material Design está pensado en el mundo físico pero “a diferencia del papel, el Material Design se puede ampliar y redimensionar de manera inteligente. Material Design tiene superficies físicas y bordes. Las escenas y sombras proporcionan significado sobre lo que se puede tocar y cómo se va a mover”.

Es decir, Material Design está pensado para actuar como la realidad, como actuaría una superficie física: texturas y sombras son totalmente realistas de forma que parezca que se pueden tocar. Diseñadores y desarrolladores pensaron en el mundo real para crear este lenguaje de diseño, como puedes ver en el siguiente vídeo sobre el proceso creativo de Material Design.

Además, este sistema de diseño está influenciado por la base del diseño de impresión, es decir, fuentes, colores, imágenes, grids, escalas y espacio. Ellos crean una estructura jerárquica y significativa que se centra en la inmersión del usuario en la experiencia.

Es importante entender su concepción para desglosar sus características. Varios de sus puntos fundamentales podrían ser los siguientes:

• Como ya hemos explicado, los elementos están unidos a la realidad a través del espacio y movimiento. El entorno (la peculiaridad que sea un entorno web o móvil) puede aportar nuevas posibilidades que reemplazan las del mundo físico, pero no violan sus leyes.La existencia y la interacción de los objetos en el espacio son transmitidas a través de los principios de la luz, la superficie y el movimiento. En el mundo real, los objetos tienen sombras que indican la dirección del movimiento y la distancia entre las superficies. Este efecto de relieve en los elementos, ayuda a transmitir a simple vista que hay niveles diferentes de lectura.De esta forma, por ejemplo, cuando el nivel de elevación de objetos crece, las sombras se hacen más grandes y más suaves.

• En el caso del movimiento otorga significado y, para muestra, un botón:
  Las animaciones no interrumpen la experiencia de usuario sino que enriquecen y dan sentido a la experiencia, como en el caso anterior del botón.

  En Material Design es el usuario el encargado de dirigir el movimiento, sus acciones pueden llegar a cambiar, incluso, el diseño: transformándolo y reorganizándolo.

  

• Otra de sus principales características es la experiencia de usuario y animación de elementos. Como decíamos, es el usuario quien inicia el movimiento y transforma el entorno con sus acciones. Cuando se mueven y se transforman los objetos, sus transiciones permanecen coherentes, lo que asegura la continuidad de la experiencia.El movimiento es una consideración imprescindible en Material Design lo que inspira a, por ejemplo, animar iconos y pequeñas interacciones que hacen la navegación más agradable.
• Importancia de la jerarquía y la lectura visual, como decíamos sobre sus bases en el diseño editorial, a través de técnicas de diseño como el uso del color, el espacio en blanco, jerarquías tipográficas y el sistema de grid.

Siéntete libre

Destinado a todo tipo de aplicaciones, su fuerte es sin duda la transversalidad de un sistema capaz de adaptar todos sus elementos a múltiples dispositivos.

Una de las máximas de Material Design es la sencillez y el minimalismo, pero es difícil saber cuando parar en un diseño y Google podría seguir ampliando sus guías de manera que ya no fueran tan sencillas y minimalistas.

Además, resulta complicado seguir todos los consejos de Google Material Theme, que llegan en ciertos casos a no ser claros del todo o a ser bastante flexibles. Las incoherencias en los diseños existen incluso en las aplicaciones del propio Google.

A nivel creativo la implementación de Material Design puede hacer que en cierta medida las aplicaciones tengan una navegabilidad y diseño muy similares, llegando a parecer clones con pequeños cambios de estilo.

A pesar de todo esto, no hay que dejar de lado que Google ha ayudado a que los usuarios asimilen un lenguaje y una navegación que nos ha facilitado el trabajo a la hora de diseñar pensando en Material Design. En nuestra mano estará ahora interiorizar este sistema y aplicarlo de forma fiel, pero lo más creativa posible.

« ¿Qué es una página web, un alojamiento y un dominio? Las mejores aplicaciones para crear diseños desde el móvil »