Muy seguramente, todos hemos interactuado con algún producto digital que implemente el concepto de Material design, que como lo define su creador Google: es un lenguaje visual que sintetiza los principios básicos del buen diseño y la innovación de la ciencia y tecnología.
Esta filosofía de diseño fue anunciada por primera vez en el año 2014 y aunque inicialmente estaba pensada para el sistema Android, después de su creación se ha extendido hasta casi toda la web.
Material design está inspirado en el papel, en el mundo físico y las texturas que lo componen, incluyendo la luz y la sombra: “a diferencia del papel verdadero, nuestro material digital se puede ampliar y reformar de forma inteligente. El material tiene superficies físicas y bordes.” – Explica Matías Duarte, vicepresidente de diseño de Google.
Al basarse en el papel y las propiedades de los materiales, todo su entorno se desarrolla teniendo en cuenta las cualidades del espacio 3D: superficies, profundidad y luces y sombras.
- Superficies: En Material design, todos los elementos tienen profundidad y se mueven horizontalmente, verticalmente y con profundidades variables a lo largo del eje Z. De la misma manera estas superficies tienen dimensiones, sombras cuando hay elevación, resolución infinita y propiedades físicas que corresponden a cómo se comporta un material en realidad:
- Puede cambiar de forma
- Puede cambiar la opacidad
- Crece y se encoge mientras se mantenga en su mismo plano
- Se puede doblar y plegar siempre y cuando no sobrepase la profundidad de la interfaz del usuario.
- Puede generarse y desaparecer en cualquier lugar del entorno así como puede moverse a lo largo de cualquier eje.
- Dos elementos pueden coordinar sus movimientos.
- Elevación: En Material design, la elevación se define como la distancia entre los diferentes elementos y superficies. Se mide a lo largo del eje z desde las partes frontales de cada superficie y se muestra de manera predeterminada utilizando sombras o señales visuales como rellenos de superficie u opacidades.
Todos los elementos tienen valores de elevación diferentes ya que esto permite que se muevan hacia adelante y atrás de otras superficies además de enfocar la atención del usuario en la elevación más alta.
- Luz y sombra: En la interfaz de usuario de Material design, hay dos tipos de luces: Clave (crean sombras precisas) y Ambientales ( que aparecen desde los ángulos y crean sombras más difusas y suaves).
Uno de los grandes problemas que tiene un producto digital, es la dificultad de lograr coherencia entre el diseño y la experiencia que tiene el usuario. Material design nace como una respuesta a esta necesidad unificando todos los criterios de diseño y desarrollo que debe seguir un equipo para lograr un resultado exitoso. En resumen, algunas de las características más importantes son:
- Atractivo visual: más allá del funcionamiento de la aplicación, Google busca que cuando el usuario vea la aplicación, se enamore. No importa aún el momento en el que interactúe con ella, simplemente tiene que verla y amar su diseño.
- Movimiento: Todo lo que se toque dentro del producto debe tener un movimiento o reacción. El usuario debe darse cuenta que cuando haga un click o ingrese a alguna sección: algo suceda.
- Diseño interactivo: Esta interacción del usuario con la aplicación es transmitida a través de diferentes principios: luz, superficie y movimiento.
Todas las pautas de diseño de Material Design, han sido reunidas por Google en la web “www.material.io”, en la que se encuentran todos los sistemas, principios, tipografías, reglas, colores, botones, iconografías, sombras, movimientos y ejemplos gráficos que complementan cada explicación. Adicionalmente se incluye una sección para los desarrolladores con recursos y tutoriales para realizar su tarea.
Mira proyectos dónde hemos aplicado Material Design: Aquí
