Cuando Larry Page tomó el rol de CEO de Google en 2011, una de sus prioridades fue estandarizar los criterios de diseño en los productos de la compañía, dando los primeros pasos hacia la creación de Material Design, el sistema de diseño de Google.

En 2011, Google ya tenía varios productos para usuarios finales, desde su buscador web, Google Maps hasta GMail o Google AdWords. Los usuarios de estos servicios podían utilizarlos en un navegador web, o como apps para Android o iOS.

El problema entonces es que las diferentes versiones de un mismo producto era manejados por equipos diferentes, con ideas y enfoques que no siempre estaban alineados, por lo que el mismo servicio tenía muchas inconsistencias en su diseño entre diversas plataformas.

Comparación de las vistas de GMail en desktop, app para Android y web móvil.

El primer intento de Google para estandarizar criterios de diseño se llamó Project Kennedy, con el objetivo de enfocar el diseño en todos los productos y servicios de la empresa con los conceptos de refinamiento, espacio, limpieza, elasticidad, utilidad y sobre todo, simplicidad.

Sin embargo, Project Kennedy se quedó corto en su alcance, al comenzar a surgir más inconsistencias entre plataformas, y problemas de usabilidad e implementación con los equipos de producción.

Material Design

En 2014, un equipo de diseñadores dentro de Google, lidereados por Matías Duarte, comenzaron a trabajar en un proyecto con el nombre «Quantum Paper«, con el objetivo de crear un sistema de diseño que estuviera más alineado a los procesos de creación de productos y a los principios de la marca de Google. En el evento de Google I/O de ese año se presentó una versión refinada llamada Material Design.

Desde entonces, Material Design ha sido adoptado por todos los equipos de diseño y desarrollo en Google, y todos han colaborado al sistema de diseño para hacerlo más robusto, flexible y consistente. Google comenzó a publicar guías y componentes de Material Design para que otros diseñadores pudieran utilizarlo para crear aplicaciones dentro del ecosistema de Google o incluso usarlo como punto de partida para crear sus propias versiones del mismo.

Principios de Material Design

Material Design está basado en 3 objetivos:

  1. Crear un lenguaje visual que sintetice los principios clásicos de buen diseño con la innovación y posibilidades que ofrecen las nuevas tcnologías y la ciencia.
  2. Unificar el desarrollo en un mismo sistema que integre la experiencia de usuario a través de múltiples plataformas, dispositivos y métodos de interacción
  3. Ser personalizable y extensible para proveer una base flexible para la innovación y la expresión de la marca.
https://www.youtube.com/watch?v=NPjzUyax4tw

A su vez, Material Design está basado en 5 principios de diseño:

  1. El Material es la metáfora. Material Design se inspira en el mundo real y en sus texturas, incluyendo cómo el material refleja luz y proyecta sombras. Este material es una interpretación de medios como el papel y la tinta en el mundo digital.
  2. Es atrevido, gráfico e intencional. El diseño en Material Design se guía por los métodos de diseño para impresos: tipografía, rejillas, espacio, escala, color e imágenes, para crear jerarquías, significado y enfoque que meta los usuarios en la experiencia.
  3. La animación tiene significado. La animación enfoca la atención del usuario y ayuda a mantener la continuidad, por medio de retroalimentación muy sutil y transiciones coherentes. Mientras los elementos de la interfaz aparecen en la pantalla, se transforman y reorganizan a través de la interacción, generando así nuevas transformaciones.
  4. Una base flexible. El sistema de diseño de Material Design fue creado para permitir que una marca pueda usarla como un medio de expresión. Se integra con una base de código hecho a la medida que permite la integración natural de componentes, plug-ins y elementos de diseño.
  5. Es multi-plataforma. Material Design mantiene el mismo diseño de interfaz en diferentes plataformas, utilizando componentes en Android, iOS, Flutter y para la web.

Ejemplos de Material Design

Como sistema de diseño, Material Design no solo es utilizado por Google, sino que ha sido adoptado por muchas empresa de todos tamaños como base para la creación de su propia identidad visual.

Recursos de Material Design

Material Design tiene su sitio web oficial en material.io, en el que se pueden revisar las guías completas y la documentación del sistema de diseño, así como guías para diseño e implementación para web, Android, iOS y Flutter.

El sitio ofrece muchos recursos para diseño y desarrollo con Material Design, como bibliotecas de iconos, una herramienta para creación de paletas de color, y casos de estudio de implementación del sistema de diseño para diferentes industrias.

Publicado por Mauricio Angulo S.

Mauricio es diseñador de experiencia de usuario desde el año 2004. Es front-end developer, sprintmaster y entusiasta de AI. Es mentor en el programa Google for Startups y parte de la iniciativa de Microsoft Regional Director como mentor para corporativos y startups en diseño de experiencia de usuario, usabilidad y desarrollo de software. Es co-fundador de UX Nights. También es escritor, ponente internacional y profesor.