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

material-design

Ya hace casi dos años desde que Google desarrolló y anunció en la conferencia Google I/O el Material Design como 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.

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.

¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

2 comentarios

  1.   Yerko Alfaro dijo

    Fran, me pareció super interesante tu publicación. No hay mucha información en español sobre este tema. Por lo que, si te interesa, tengo en mi blog la traducción al español de la especificación de Material Design. Al igual que tú, mi interés es que la información llegue al mayor número de personas, de manera que puedan sacar provecho de ella.

    Saludos

  2. Muy buen articulo!! No conocía nada sobre el “Material Design” pero si del “Flat Design”, aunque solo fuera por gustos particulares. Intentare seguir alguno de los consejos.

    Un saludo
    David

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *