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.
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.
