¿Qué es Material Design o Diseño Material?

Para todos aquellos que estén en el tema de diseño, especialmente para tecnologías móviles, las palabritas Material Design seguramente no les sonarán ajenas. Pero…. qué es ¿este diseño material?

Material Design es una mezcla de guía visual, marco teórico y plataforma o framework creada por Google. Según sus propias palabras en la portada del sitio oficial:

Material Design es un sistema unificado que combina teoría, recursos y herramientas para la creación de experiencias digitales

Dado que la definición es bastante amplia y ambigua, podemos sintetizar en que es una serie de guías de estilo basada en preceptos teóricos provenientes del Diseño de Interfaces de Usuario y el Diseño de Experiencias de Usuario. A eso se le agregan indicaciones provenientes del campo de la programación, con énfasis en su propio lenguaje llamado Polymer.

Es muy importante destacar que estas guías se entroncan en la filosofía de mobile first , por lo que la mayor parte de su contenido está orientado a la visualización en dispositivos móviles y es el marco por default para construir aplicaciones en Android.

Lo que sigue es un repaso y traducción de los documentos oficiales de Material Design dado que no existen en español

Objetivos del Diseño Material

Imagen: Google Material

Imagen: Google Material

  • Crear un lenguaje visual que sintetice principios clásicos del buen diseño con la innovación y las posibilidades que confieren la tecnología y la ciencia.
  • Desarrollar un sistema único subyacente que permita una experiencia unificada a través de plataformas y distintos tamaños de dispositivos. Los preceptos de las tecnologías de dispositivos móviles son fundamentales, pero tacto, voz, ratón y teclado son todos métodos de entrada de primera clase.

Principios

El Material es la metáfora

Imagen: Google Material

Imagen: Google Material

Una metáfora material es la teoría unificada entre un espacio racionalizado y un sistema de movimiento. El material está anclado en la realidad táctil e inspirado en el estudio del papel y la tinta, pero avanzado tecnológicamente y abierto a la imaginación y la magia.

Superficies y bordes del material proveen pistas visuales que están ancladas en la realidad. El uso de atributos táctiles familiares ayudan a los usuarios a entender la afordancia rápidamente. Aún así, la flexibilidad del material crea nuevas afordancias que superan a sus contrapartes en el mundo físico, sin romper las reglas de la física.

Los fundamentos de luz, superficie y movimiento son clave para comunicar cómo los objetos se mueven, interactúan y existen en el espacio y en relación a cada uno de ellos. La iluminación realista muestra costuras, divide espacios e indica partes móviles.

Audaz, gráfico, intencional

Imagen: Google Material

Imagen: Google Material

Los elementos fundacionales del diseño para imprenta – tipografía, mallas, espacio, color y uso de imágenes – guían a los tratamientos visuales. Estos elementos hacen más que agradar a la vista: proveen jerarquía, significado y enfoque. Elecciones deliberadas de color, imágenes borde-a-borde, tipografía a gran escala y el uso intencional del espacio vacío crean una interface gráfica audaz que sumerge al usuario en la experiencia.

Un énfasis en las acciones del usuario hace que las funcionalidades principales sean aparentes en forma inmediata y provee puntos intermedios o waypoints para el usuario.

El movimiento comunica significado

Imagen: Google Material

Imagen: Google Material

El movimiento respeta y refuerza al usuario como principal movilizador. Las acciones primarias del usuario son puntos de inflexión que inician movimiento, transformando el diseño en su totalidad.

Todas las acciones tienen lugar en un contexto único. Los objetos son presentados al usuario sin romper la continuidad de la experiencia, incluso cuando se transformen y reorganicen

El movimiento es significativo y apropiado, sirviendo para enfocar la atención y mantener continuidad. El feedback es sutil pero claro. Las transiciones son eficientes pero coherentes.