El flat design y el material design

Si bien provengan de la misma línea estética, el flat design y el material design, en tendencia y ampliamente difundidos en el ámbito del diseño, comparten similitudes a la vez que presentan algunas diferencias.

 

FLAT DESIGN

El flat design consiste en crear interfaces minimalistas, coloridas y allanadas con el propósito de potenciar la visibilidad. Uno de los primeros ejemplos difundido había sido el sistema operativo Windows 8. En aquel entonces, era tendencia en diseño web acercarse lo más posible al realismo, particularmente con el 3D. El flat design supuso un desvío de esta corriente al pretender simplificar lo real a través de la fuerza de los símbolos.

Como elementos esenciales del flat design, resaltamos la importancia de los colores (generalmente de tonos pasteles), de las imágenes e ilustraciones, de las tipografías empleadas y de los íconos. Todo ello fluidifica y dinamiza la navegación de cara a mejorar la experiencia de usuario. El diseño contribuye a la comprensión de uso y a vehicular la información de forma clara.

A favor del flat design

  • Los diseños son mucho más ágiles y sencillos, sin gráficos innecesarios.
  • Disminuye considerablemente el tiempo de carga, eso se traduce en usuarios más satisfechos y menos porcentaje de abandono.
  • Al ser los sitios mucho más simples, con poca carga en los elementos gráficos, son mucho más sencillos de hacer responsive.

 

 

MATERIAL DESIGN

Seguidamente, el material design, un término definido por Google, si bien inspirado por el flat design comprende algunos matices que cabe destacar. Por ejemplo, se busca el realismo de las sombras, así cada elemento emula una hoja superpuesta a otra y el sombreado se rige por precisas reglas físicas. El acento sustenta las acciones de usuarios; simple intuitivo y depurado, el diseño contribuye a que se evidencian las posibles interacciones con los elementos. En este sentido, el movimiento se inicia en el punto de interacción sin romper con la continuidad ya que se caracteriza por su dinamismo, fluidez y cadencia alineados a un determinado tempo.

Estos son sus puntos fuertes a destacar:
–Jerarquía de luces y sombras
Aunque guarda muchas similitudes con el flat design: tipografía cuidada, orden… tiene una diferencia importante y es que la inclusión de sombras y luz dan lugar a una jerarquía que con el flat design no estaba tan clara.

Por ejemplo, en el caso de las sombras, se usan para determinar las distintas posiciones de los objetos. De esta forma se deshace de todo realismo para convertirse en fondos planos que, aun haciendo de sombra, nos recuerdan al flat.

–Uso de movimiento
La gran diferencia con el flat design es el uso de las animaciones. Ya no todo es estático, ahora existen botones flotantes en los que podemos apreciar gran variedad tanto de velocidades como de direcciones de aparición. El movimiento es la mejor forma de guiar al usuario y llamar su atención.

Estos son unos ejemplos de animaciones de material design donde se puede apreciar el tiempo, la velocidad y la dirección.

 

 

Fuente: www.avisualconcept.es y www.ondho.com