Qué es Material Design
Material Design es un manual de estilo para interfaces de usuario. Es una guía de recomendaciones que unifica los principios clásicos del buen diseño, con la innovación, ergonomía, psicología y...
Material Design es un manual de estilo para interfaces de usuario. Es una guía de recomendaciones que unifica los principios clásicos del buen diseño, con la innovación, ergonomía, psicología y tecnología.
Esta serie de recomendaciones de UI / UX, están en continuo desarrollo por el equipo de Google. Conozca la especificación de Material Design.
Su objetivo es crear directrices para dotar de mayor armonía, coherencia y usabilidad a las interfaces de las aplicaciones interactivas: web, móviles, hibridas o de escritorio.
No se trata “sólo” de un diseño, o de una estética. Tampoco es una moda, como el “flat design”. Es toda una ciencia de la relación humano/software.
Inspiración
Al primer vistazo, se aprecia que estas pautas están basadas en los principios clásicos de diseño. Sin intención de ser exhaustivo, estos son algunos de los trabajos que les han inspirado:
- Fundamentos del diseño, de Wucius Wong.
- Sistemas de retículas, de Josef Müller-Brockmann.
- Reglas de usabilidad de Jacob Nielsen.
- Principios de la animación, de Frank Thomas y Ollie Jonhston.
Existen otros precedentes de guías de interfaces, como las de Windows y la de IOS, pero ninguna llega al nivel de detalle, ni a la amplitud, del Material Design.
Google no ha inventado nada nuevo, pero lo ha puesto en orden, lo ha pulido, lo ha actualizado, lo ha adaptado y le ha dado esplendor. Ha creado una gramática lógica, natural y precisa para este lenguaje visual de UI/UX y Android Lollipop es el paradigma de su aplicación.
Lineas guias
El objetivo es disponer de unas pautas unificadas para diseñar interfaces en cualquier plataforma, dispositivos o tamaños de pantalla.
El modo es simular la realidad con elementos sólidos, similares a tarjetas de cartulina que contienen información y con las cuales interactuamos de modo realista y lógico.
Los elementos, su movimiento, su estilo y diseño responde a comportamientos físicos creíbles y naturales.
La metáfora del “material”
La interfaz es un entorno tridimensional con propiedades físicas.
Los elementos disponen de grosor y elevación, lo cual se manifiesta por sus sombras.
Los elementos son sólidos. Pueden superponerse, pero no ocupar el mismo espacio ni atravesarse.
Los elementos pueden cambiar de forma, encogiéndose o ensanchándose en su mismo plano. También pueden unirse o separarse.
Los elementos pueden moverse horizontalmente o en profundidad. Pueden aparecer o desaparecer espontáneamente.
El movimiento
Todo movimiento tiene significado. Ningún movimiento es gratuito.
El movimiento no es espontaneo. El movimiento es producido por la interacción del usuario.
El movimiento proporciona feedback en las microinteractiones.
El movimiento muestra cómo se organiza una aplicación y su funcionalidad. El movimiento favorece el enfoque, explica las relaciones jerárquicas y aporta fluidez a los cambios.
El movimiento es natural. El movimiento no es lineal. Los elementos se desplazan describiendo curvas. La velocidad no es constante, tiene aceleración y frenado (easeinout).
Los elementos se mueven de manera coreografiada. A un movimiento principal le pueden acompañar movimientos secundarios.
El estilo
Esquema de color limitado a tres variaciones de un tono primario y un tono secundario para resaltes.
Los iconos del sistema representan un comando, archivo, dispositivo, directorio o acciones comunes. Su forma se ajusta a una cuadricula y a un estilo.
Las imágenes deben proporcionar información relevante y deleitar.
La tipografía (Roboto), su peso y su color, indican la jerarquía de la información.
El lenguaje debe ser sencillo, directo y fácil de entender. Los textos deben ser concisos y precisos.
Maquetación
La unidad de medida es el DP (pronunciado «dips») que son píxeles independientes de la densidad. Son unidades flexibles que proporcionan dimensiones uniformes en cualquier pantalla.
Todos los elementos se maquetan en base a una retícula de 8DP. La retícula tiene diferente anchura para cada dispositivo. Se pueden utilizar hasta 12 columnas.
La estructura de la aplicación dispone de espacios para los elementos de la interfaz: escritorio, barras de herramientas, paneles de navegación.
Los elementos se adaptan para cada dispositivo, cambiando su visibilidad, su anchura o su posición.
Pautas de uso
Las especificaciones también proporcionan las reglas de uso de los casos concretos. Así, muestra cuales son las mejores prácticas, los usos desaconsejados, comportamientos o la integración con la interfaz.
La colección de elementos minuciosamente detallados abarca: botones, tarjetas, capsulas, tablas, galerías, listas, menús, selectores, sliders, pestañas, barras de herramientas, tooltips, etc.
También se detallan los comportamientos, animaciones derivadas, pasos a seguir, colocaciones, gestos y transiciones, de todos los procesos de UI. Así se detallan procesos y situaciones como: cambios de estado, notificaciones, técnicas de scroll, búsquedas, carga de multimedia, errores, selección, etc.
Cómo aplicar Material Design
Las especificaciones son adaptables a cualquier lenguaje en el que se desarrolle la interfaz. Actualmente están apareciendo múltiples frameworks que facilitan su aplicación en diferentes lenguajes.
Google ha desarrollado diferentes modelos de aplicación: Tema Material para Android, Web Componentes para Polymer, Angular Material para AngularJS e incluso un nuevo desarrollo para web basado solo en CSS: MD Lite.
Para aquellos que no trabajan con los frameworks de Google existen múltiples alternativas de aplicación. Las más recomendables son:
- Materialize. A día de hoy, el desarrollo más completo para web, basado en CSS y jQuery.
- Material-UI para React.
- MDB Material Design for Bootstrap.
Conclusión
Material Design no es el único lenguaje visual aplicable a UI/UX, pero aporta un salto cualitativo y cuantitativo en el modo de especificarlo, en los principios en los que se basa y en la lógica que subyace.
Son estos principios y esta lógica, los que hacen de Material Design una interfaz gráfica que durará largo tiempo, aunque sería deseable que aparecieran otros estilos alternativos, e incluso otras metáforas visuales.
