Qué es Material Design y cómo se aplica a un sitio web

Hace ya tres años que Google presentó el concepto Material Design, una evolución en el diseño Android. A lo largo de estos años se ha ido extendiendo y, a día de hoy, también se utiliza en aplicaciones iOS y web. En este artículo explicaremos qué es Material Design y cómo aplicar este lenguaje de diseño a nuestros sitios web.

En Junio de 2014 se presentó el lenguaje de diseño Material Design en el evento Google I/O. Con él se pretende facilitar la experiencia de usuario y tener un diseño unificado para las aplicaciones móviles. Pero, ¿qué es Material Design? ¿Cuáles son sus principios? ¿Qué relación tiene con el diseño web? Comencemos por el principio.

Como su nombre indica, se basa en objetos materiales. Estos objetos se agrupan a través de diferentes capas para conseguir una apariencia de relieve con sombras y colores planos. Otro de los pilares fundamentales es el uso de animaciones y transiciones lógicas, con el objetivo de dar la sensación de que los objetos se guían por las leyes de la física.

También es importante que, a través de su física, se adapten a todos los contenedores y, si es necesario, se desplacen en función del tamaño de la pantalla. A todo esto le sumamos un uso más cuidado de la tipografía (normalmente Roboto) y luces y sombras para conseguir una interfaz más agradable e intuitiva, lo que mejora la experiencia del usuario. En el siguiente vídeo podemos ver una demostración completa del significado de este concepto:

¿Cuáles son sus principios fundamentales, según Google?

Hemos dado una explicación tangible de en qué consiste este concepto pero, ¿cómo define Google Material Design? En su guía oficial establecen unos principios que, nos atreveríamos a decir, son casi filosóficos. Veamos cuáles son:

• Material es la metáfora. Es la teoría que unifica un espacio racionalizado y un sistema de movimiento. El material está basado en la realidad táctil, inspirado en el estudio del papel y tinta, pero tecnológicamente avanzado y abierto a la imaginación y magia.
• Superficies que se basan en la realidad. El uso de atributos táctiles ayuda a los usuarios a comprender rápidamente la interfaz. La flexibilidad de los objetos crea nuevas posibilidades que reemplazan las del mundo físico, sin romper las reglas de la física.
• Elementos gráficos e intencionales. Los elementos fundamentales del diseño basados en la impresión (tipografía, espacio, escala,…) hacen mucho más que agradar la vista. Crean jerarquía, significado y enfoque. El uso adecuado de colores, imágenes y espacios sumergen al usuario en una mejor experiencia.
• El movimiento proporciona significado. El usuario es el motor principal, el que inicia el movimiento, transformando el diseño.
• Toda acción tiene lugar en un solo entorno. Los objetos son presentados al usuario sin romper la continuidad de la experiencia a medida que se transforma y reorganizan.
• El movimiento sirve para enfocar la atención y mantener la continuidad. El Feedback debe ser sutil pero claro y las transiciones eficientes y coherentes.

¿Cómo se traslada este concepto a la web?

Otro de los objetivos de Google es conseguir que los sitios web también utilicen esta guía de estilos, para que no haya grandes diferencias con las aplicaciones de Android. Es por ello que, en 2015, el equipo de Google Developers desarrolló una librería destinada a implantar el estilo Material Design en nuestros sitios web. Su nombre es Material Design Lite (MDL) y cuenta con un conjunto de componentes (botones, menús,…) y plantillas, listos para ser usados.

Podemos obtener más información de Material Design Lite en su web oficial o repositorio de GitHub, donde también tenemos las posibilidad de descargar el kit. Además, a través de su sitio web podremos crear temas personalizados, seleccionando los colores que queramos utilizar.

También contamos con otros frameworks no oficiales como Material-UI o el conocido Materialize.

Más información sobre Material Design.

Para obtener más información sobre esta guía de estilos, recomendamos su sitio web oficial, material.io. Creada por Google, cuenta con guías y herramientas para entender a la perfección las reglas de este estilo. En el siguiente vídeo tenemos una presentación de la web:

Podríamos considerar que su guía es la «Biblia» del Material Design, ya que, a través de ella, se nos presentan multitud de ejemplos, animaciones, consejos,… así como una librería de iconos y componentes que podremos utilizar en nuestras aplicaciones.

Entre sus herramientas podemos encontrar un selector de color, medidas de dispositivos móviles, y un visor de sitios web responsive para comprobar si se adaptan a diversas resoluciones. Existen otras anunciadas pero que todavía no se han lanzado al público, por lo que tendremos que estar atentos.

Para finalizar.

No cabe duda de que Google apuesta fuertemente por este estilo y nos proporciona las herramientas necesarias para que lo utilicemos en nuestros diseños. Es aconsejable seguir sus recomendaciones en el desarrollo de aplicaciones y sitios web, sin dejar a un lado la innovación e imaginación.

También es importante recordar que Material Design no es solo colores planos llamativos y sombras. Como hemos visto, intervienen muchos más factores como el movimiento, físicas, experiencia de usuario,…

¿Habéis trabajado ya con este tipo de tecnología? Os invito a que dejéis vuestras impresiones en los comentarios del artículo.