14/10/2015
Material design: comprendiendo el lenguaje visual de Google
Aplicación de SoundCloud basada en material design
El éxito de Google no se debe solo a sus extraordinarios recursos tecnológicos y la habilidad de sus programadores: también se sostiene en un especial cuidado por la experiencia de usuario. De hecho, de los diez principios que guían a la compañía de Palo Alto, el primero es: «Piensa en el usuario y lo demás vendrá solo». El buscador, su producto insignia, refleja este valor: la página principal apenas tiene una imagen, un formulario de búsqueda y algunos enlaces, por lo que resulta fácil de usar y no tarda mucho en cargar.
Con la experiencia de usuario en mente, Google creó material design: un lenguaje de diseño de interfaces digitales que imita el comportamiento del papel impreso. Los elementos de la interfaz siguen los lineamientos del flat design, pero sus características de luz, sombra, superficie y movimiento son semejantes a las del papel en el mundo físico. El uso de tipografías, grillas, espacio, escala, color e imágenes se basa en los principios del diseño editorial. Material design brinda una experiencia cercana a la de una publicación impresa, pero con el potencial de los medios digitales.
En material design, los botones, los cuadros de diálogo, los menús, las modal windows, las barras de herramientas, las grillas, las listas y cualquier otro elemento de interfaz simulan tener espesor y profundidad, como si fueran tarjetas de papel apiladas una encima de otra. En el siguiente ejemplo, a través de sombras y opacidad se nos brinda la ilusión de que la barra púrpura, el contenido principal y los botones rectangulares están en tres niveles de profundidad diferentes:
Actualmente, Google está aplicando estos principios a todos sus productos, incluyendo la última versión de Android, Lollipop. Pero también pretende que muchos diseñadores externos los adopten para sus propios proyectos. Para ello publicó una extensa guía donde se explican en detalle las normas de material design. Para facilitar el trabajo, también ofrece elementos de interfaz ya implementados con diseño material en sus frameworks Angular Material y Polymer Project. De allí podemos tomar botones, formularios, menús y otros elementos diseñados y codificados oficialmente según las normas de Google. También existen frameworks de terceros, como Materialize.css y Material UI, que brindan aun más componentes que las opciones oficiales. Google espera que material design se imponga como un enfoque habitual en todo tipo de aplicaciones (incluso para relojes y anteojos inteligentes), e incluso premia a los diseñadores que mejor apliquen sus principios.
Utilizar material design para nuestros propios proyectos tiene dos ventajas importantes:
- Ahorro de tiempo y problemas de usabilidad, ya que los principios de material design ya han sido ampliamente probados y refinados por una empresa líder.
- Óptima integración visual y funcional con versiones de Android que usen material design.
Sin embargo, todavía se trata de un lenguaje visual nuevo, y no son pocos los que señalan sus problemas para la experiencia de usuario (por ejemplo, se han criticado sus botones flotantes y su consumo de recursos). Por otra parte, las aplicaciones con material design solo se integran bien a sistemas operativos que también sigan ese modelo; y, por el momento, Android es el único ejemplo. Probablemente no sea una buena idea aplicar material design a una aplicación de iOS o Windows Phone. Más allá de estos inconvenientes, material design ha tenido una buena aceptación general y siempre debería ser una opción a tener en cuenta.
0