Flat Design vs Material Design: Similitudes y Diferencias

Read this article in English

Si hasta hace muy poquito solo oíamos hablar del flat design, de un tiempo a esta parte, hay un nuevo concepto que se está imponiendo con fuerza: el material design. Seguro que todo el que tenga un dispositivo con Android sabe de sobra de lo que estoy hablando. Con la nueva actualización (la 5.0), el diseño del mismo cambio incluyendo esta nueva tendencia.

Si bien es cierto que es un concepto “inventado” por Google para el diseño del sistema operativo, al igual que paso con el flat design se ha extendido al diseño en general y podemos verlo aplicado por ejemplo en webs, apps, videojuegos… Por esto no queríamos dejar pasar la oportunidad de hacer una pequeña comparación con el flat design, pues desde mi punto de vista, tienen mucho en común y no podríamos entender el material sin la existencia anterior del flat.

Cuando comparamos los dos nos vienen diversas preguntas como por ejemplo, si uno es mejor que otro o en que caso usar cada uno de ellos. Tras leer estos puntos seguro que todo eso queda mucho más claro. Pero como siempre hay que volver a los antecedentes, recordemos porque comenzó el flat design y por lo tanto el fin del “realismo”. Comencemos!

NOTA: Sabemos que sois unos grandes expertos en flat design así que haremos una breve reseña y luego pasaremos a estudiar el material design.

Realismo (Skeuomorphism)

Si hace un minuto discutíamos el uso del flat contra el material design, en el caso del realismo la batalla está perdida desde hace mucho tiempo (y menos mal 😉 ). Atrás quedo el uso de elementos tan realistas y barrocos que quitaban importancia a los puntos que en realidad deberían destacar.

Esta decisión no se debe solo a lo estético (como en el caso del diseño gráfico) sino también a lo funcional: mejorando el tiempo de carga y la usabilidad de la web. El realismo ha quedado atrás y vamos hacia un diseño en el que con pocas líneas se exprese mucho.

flat-design-vs-realismo

Flat design

Que os vamos a contar que a estas alturas no sepáis del Flat design! Comenzó, como hemos dicho, como un diseño que rompía con todo lo anterior, despojándolo de todos aquellos elementos que no aportaban nada necesario como sombras, degradados y texturas para centrarse en los iconos, la tipografía y el color.

Su uso se basa en la funcionalidad: lo más importante en el diseño es que cumpla la función para la que fue diseñada. Así se acelera el tiempo de carga y consigue que se vea de una manera optima independientemente de la resolución de la pantalla. Consigue que las cosas sean más fáciles tanto para diseñadores como para usuarios.

elementos-flat-design

A nosotros el flat design nos encanta y como podéis ver la mayoría de nuestras plantillas para WordPress y nuestros logotipos están diseñadas bajo esa tendencia.”Menos es más” y nos gusta que sea así ;), buscando la sencillez y simplicidad con el menor número de líneas.

flat-design-colores

Pros
  • Los diseños son mucho más agiles y están despojados de elementos gráficos innecesarios.
  • De esta manera disminuye considerablemente el tiempo de carga lo que se traduce en un usuario más contento 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“.
Contras
  • El mal uso del mismo puede hacer que tu sitio web sea demasiado simple o demasiado monótono. Flat design no es sinónimo de aburrido, por lo que si el resultado es ese, lo has entendido mal 🙂
  • La falta de relieve requiere señales visuales para guiar al usuario. Al no existir bordes elevados puede hacer difícil al usuario saber si es un botón o un objeto seleccionable.

Material design

Como comenzábamos hablando en este artículo, la creación del material design viene determinada por el flat design, al quedar este, para algunos críticos, algo corto en lo que del diseño se trata.

Quizá con el flat design se eliminan todos los elementos de realismo, dejando el diseño demasiado simple. Esto puede ser beneficioso para el diseño gráfico y elementos como carteles o logos, pero para el diseño web, en el que el usuario tiene que interactuar, podemos encontrar elementos en los que necesitaríamos algo mas, que el flat no nos da.

material-design-movil

El material design, como su propio nombre indica se basa en objetos materiales. Podríamos decir que son diversas piezas geométricas simples (normalmente rectángulos y círculos) colocadas en un lugar concreto y con un movimiento determinado.

material-design-elementos

Así se incluyen distintos factores, que en el caso del flat no existían tales como: profundidad, superficies, bordes, sombras… Relacionadas entre sí de una manera lógica en los que los objetos se superpone pero no pueden atravesarse entre sí. Así estos son los dos elementos diferenciadores:

Sombras y luz

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 en el caso del flat design no estaba tan clara.

sombras-intensidades-material-design

Por ejemplo en el caso de las sombras, se usan para determinar las distintas posiciones de los objetos. Según la tonalidad de la misma sabremos si está por encima o por debajo de él, dependiendo de la proyección de la sombra. Esta se despoja del barroco que el realismo ofrecía, convirtiéndose en fondos planos, que aun haciendo de sombra, nos recuerdan a lo flat.

Animaciones

Sin embargo, quizás la principal 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 tanto distintas velocidades como direcciones de aparición.

Pros
  • Al incluir una nueva dimensión se hace más fácil para el usuario el entendimiento de la jerarquía. En un primer vistazo es mucho más fácil de entender.
  • Al poseer normas para casi todos los detalles es fácilmente utilizable independientemente de para el dispositivo que estemos diseñando.
  • Las animaciones es un punto fuerte a usar para extrapolar a otros puntos del diseño.
Contras
  • Como comenzábamos diciendo en este artículo, el material design es un invento de Google, por lo que está intrínsecamente ligado a él. Si seguimos sus directrices podremos caer en que nuestra web o aplicación se parezca en demasía a l diseño de Google.
  • Al estar tan claramente marcadas las directrices, no podemos usar tanto la creatividad.
  • Las animaciones hacen claramente un consumo de batería mayor 😉

Conclusiones

Como habéis podido observar ambos tienen muchos puntos en común. Dejamos de lado el realismo y vamos hacia un diseño más limpio y sencillo, que aumenta la funcionalidad y la usabilidad.

En principio no me convencía el material design, en la mayoría de los casos no encuentro necesario los efectos o animaciones y creo que podrían simplificarse aun mas. Sin embargo entiendo que algunos casos como sombras jerarquizan los elementos y hacen más fácil la navegación.

Personalmente abogaría por una mezcla de los dos, en los que tomemos las mejoras que el material design pueda aportar al flat. Si no te convencen las animaciones y no vas a usarlas en tu diseño, lo normal es que te aproximes más a un diseño flat. Si por el contrario te gustaría incluirlas, debes hacer partícipe al material.

En general, yo me quedo con el flat, de hecho la primera vez que use el material design, pensé que “era como flat pero complicándolo un poquito” 🙂 Cuando lo usas compruebas que hay algunos elementos que mejoran la usabilidad y que nos permiten opciones que el flat no tenia, pero aun así….

¿Con cuál te quedas tu?

Comentarios (12)

  1. Y yo pensando que era como tú bien dijiste, el flat pero más complicado o un flat 3D que le decía yo con las sombras y demás, gan post. En la versión móvil no veo la opción de share en Twitter y demás. Saludos.

    1. Muchas gracias Héctor!

      Creo que al principio fuimos muchos los que pensábamos así, y es que estábamos muy a gusto con el flat, y no queríamos cambiar! 😉

      Si, estamos trabajando para que aparezca la barra en la versión móvil. Gracias por apuntarlo!

      Un saludo.

  2. Me declaro fan absoluta del Flat!!!!… Aunque también me quedo con las sombras del Material. De eso se trata, no? 😉

    Fantástico artículo; corto y muy claro. Gracias!

  3. Muy buen artículo Verónica,
    sólo me gustaría aportar que al fin y al cabo todo queda determindo muchas veces por las modas, y que los diseñadores tenemos que estar al tanto de los nuevos conceptos, como estos, pero también saber y ser conscientes de cuándo debemos recurrir a su uso y cuando no. Lo digo también porque ahora abres muchas páginas web y a salvo del color o algún detallito, parece todo muy estandarizado. Por ello, muchas veces tenemos que pensar un poco y ser conscientes de que pese a ser lo que está en auge, igual no nos aporta nada a nuestro proyecto.

    1. Hola Candela!

      Muy buena aportación! Es cierto que ha veces nos podemos dejar llevar por las modas y perder un poco la objetividad. Pero al igual que cuando hablamos de colores siempre decimos que la subjetividad debe quedar de lado y debemos ponernos con la objetividad, con el tema de diseño web es absolutamente igual. Hay que pensar en la usabilidad y la funcionalidad y saber que a parte de la estética de la misma, la web debe funcionar.

      Muchas gracias por comentar.

      Un saludo 🙂

  4. Excelente Articulo!!!, justo me encuentro en ese dilema, si usar Flat Design o Material Design para mi siguiente desarrollo. Esto me aclaro un poco mas las cosas y me evito horas de lectura.

  5. Felicitaciones! un muy buen artículo y también de acuerdo que se puede sacar lo mejor de ambos, pero en mi parecer seguimos con diseño flat y las jerarquía de sombra del material design

Deja un comentario

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