Flat Design vs Material Design: Similitudes y Diferencias

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

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.

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.

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.

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.

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.

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?