14/10/2015

Material design: comprendiendo el lenguaje visual de Google

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

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce