Menú Cerrar

Diseño Web: Flat

Si hasta hace muy poco solo escuchábamos dialogar del flat design, de un tiempo a hoy, existe una nueva percepción que se está imponiendo con fuerza: el material design. Seguro que todo el que tenga un terminal con Android sabe muy bien a lo que me refiero. Con la nueva actualización (cinco+), el diseño del mismo cambió, incluyendo esta nueva tendencia.

Es una nueva tendencia “inventada” por Google para el diseño de su sistema operativo, al igual que paso con el flat design se ha ampliado al diseño en general y podemos verlo aplicado por ejemplo en páginas webs, apps, videojuegos… Por ello no queremos dejar pasar la oportunidad de hacer una pequeña reseña con el flat design, pues desde mi punto de vista, tienen bastante en común y no podríamos entender el material design sin la existencia del anterior: flat.
Cuando comparamos ambos nos vienen algunas preguntas como, por ejemplo, si uno es mejor que otro o cuando 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,  le recordare del porque comenzó el flat design y por lo tanto el fin del “realismo”.

¡Comencemos!

Si hace un momento 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 cargados que quitaban importancia a los puntos que en realidad se 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 material design diferencias

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.

Flat design vs material design diferencias

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.

Flat design vs material design diferencias

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.

Flat design vs material design diferencias

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.

Flat design vs material design diferencias

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 hemos podido observar ambos tienen bastante en común. hacemos a un 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í….
¿Cuál eliges tu?

Top