Material Design

Material Design: Un vistazo al diseño web de hoy

Publicado por Fran Marín el 9 de febrero de 2016 a las 12:00.

Fuente: http://www.creativosonline.org/blog/material-design-un-vistazo-al-diseno-web-de-hoy.html

Ya hace casi dos años desde que Google desarrolló y anunció en la conferencia Google I/O el Material Designcomo una normativa de diseño que se implantaría y que aunque en un principio estaba enfocada a la reproducción de contenidos en el sistema operativo Android, pretendía convertirse en una tendencia en la web y en cualquier plataforma, algo que hoy podemos confirmar. Aunque en alguna ocasión lo hemos mencionado, lo cierto es que nunca nos hemos detenido a ver esta codificación en profundidad por lo que hoy vamos a repasar sus principios y sus rasgos más característicos.

¿Cuáles son los rasgos definitorios del diseño material? ¿Qué tiene que ver con el movimiento Flat Design?

¿Qué decir de esta tendencia en diseño web?

Su nombre proviene de su sentido más práctico, la materia o los materiales necesitan ser organizados y estructurados de la forma más eficiente posible y se centrará en ello. Este movimiento busca ante todo la flexibilidad, la ergonomía y la capacidad para plegar y simplificar la construcción de un sitio web. Pero no sólo la dimensión espacial ocupará un lugar importante, sino que también lo hará la del tiempo ya que ahora los elementos ocuparán posiciones determinadas en tiempos determinados, es decir, el dinamismo también será un factor clave. Además estos factores serán ineludiblemente guiados por el intelecto y la lógica por lo que acaba derivando en una búsqueda del realismo y la representación espacial de la materia física, de hecho tiene en cuenta las leyes de la física y con él los elementos (imágenes, botones, paneles…) no pueden atravesarse unos a otros porque cuentan con mayor peso y densidad visual, en lugar de ello lo que harán será superponerse unos a otros.

Orden, claridad, legibilidad

Todos estos principios derivan por supuesto en el modo en que se gestionan y distribuyen los componentes gráficos incluyendo la tipografía que será ante todo una solución legible clara, la estructura textual resultará convencional y fluida, jerarquía visual motivada por el uso de tonalidades más o menos fuertes generando contrastes que también serán matizados a través del tamaño y el orden.

Iluminación y realismo

La lógica se manifiesta sobre todo en el uso de efectos lumínicos y la gestión tanto de luces como de sombras. La iluminación es un gran indicador de proximidad, relevancia y situación por lo que esta se convertirá en una herramienta fundamental para incidir en esa jerarquización de la que hablábamos. Ahor, botones, imágenes y todos los elementos contarán con sombras que nos indicarán el grado de proximidad y nos ayudará a situarnos en el escenario web.

El movimiento es la herramienta más eficaz para acaparar la atención y guiar al espectador

Su lenguaje resultará evidente, gráfico y esclarecedor a ojos del usuario. Al escoger una opción o herramienta esta se acercará a nosotros ampliando sus dimensiones y de forma inversa cuando dejemos de utilizarla. Asimismo, un elemento cambiará de color o parpadeará si es que necesita llamar nuestra atención de forma imperiosa.

Ritmo, orden, lenguaje

No olvidemos que en el fondo estamos hablando en una modalidad de discurso. Discurrimos a través de los recursos que nos ofrece el diseño web y por lo tanto todos los parámetros técnico-expresivos tienen un sentido: Desde el orden de aparición, por ejemplo primero las imágenes y luego los botones flotantes, hasta la velocidad en que aparecen, en qué dirección lo hacen y hacia qué fin se mueven. Todo esto es importante porque no sólo se indica al usuario el lugar del que proviene la información, sino que además se le facilita el trayecto, se le acomodan los elementos con el fin de hacer el proceso de lectura algo intuitivo, fácil y disfrutable. Sin lugar a dudas la animación y el dinamismo es un pilar básico.

Una codificación sin límites

Todos estos principios o normas que estamos repasando están pensadas y desarrolladas para su implementación en cualquier soporte y plataforma, independientemente de la naturaleza del mismo y del tamaño de pantalla que presente. Desde teléfonos móviles, tabletas u ordenadores. Todos los posibles soportes y destinos soportan este lenguaje visual y de hecho su transversalidad y su compatibilidad es uno de sus ingredientes esenciales.

Animaciones y movimiento, el elemento más característico

Seguidamente aquí van una serie de gifs donde vemos las animaciones de Material Design. Es importante fijarse en el tiempo en que aparecen las cosas, primero imágenes y luego botones flotante.

También en la velocidad, ya que los elementos no aparecen de repente. Finalmente está la direccióndesde la que aparecen ya que con ese movimiento se está indicando al usuario de donde proviene la información. Sin duda las animaciones son uno de los aspectos más llamativos de Material Design.

Flat design no es lo mismo que Material Design

A pesar de que comparten bastantes puntos en común como la apuesta por el minimalismo más rotundo, también hay enormes diferencias entre ambos códigos. Sin embargo no son incompatibles y ciertamente pueden ser combinados perfectamente para obtener los mejores acabados, pero de eso hablaremos en un post más adelante.