Por qué usar Flat Design 2.0 en tus proyectos
Flat Design fue la respuesta a todos los elementos hiperrealistas (skeuomorphic) que llenaban la web el año 2010. Esta estética realista venía en gran medida desde Apple, con el estilo de sus iconos en sus dispositivos. Eventualmente ellos también migraron al Flat Design.
Flat Design es un enfoque minimalista con énfasis en la usabilidad. Presenta espacios limpios, abiertos, colores brillantes e ilustraciones en dos dimensiones.
Microsoft fue uno de los primeros en aplicar este estilo de diseño a sus interfaces. Surgió en respuesta al popular diseño skeuomorphic que Apple presentó con su interfaz de iOS.
El problema con el verdadero Flat Design es que algunos usuarios consideran que este enfoque no les da la información necesaria. Pero aun así los diseñadores lo aman. Este enfoque es probablemente una de las más grandes y revolucionarias tendencias visuales de la última década.
Ventajas e inconvenientes del Flat Design
- Para el diseñador: Esta metodología se traduce en menos horas frente a herramientas como Photoshop e Illustrator. También significa mayor complejidad en diseño y abstracción. Menos horas de producción, pero más horas de creatividad.
- Para el usuario: Se corre mayor riesgo de que el usuario no sepa interpretar los niveles de abstracción, por lo que requiere de un nivel distinto de atención e interpretación.
- Para el navegador: El Flat Design es por lejos el ganador, por las siguientes razones:
- Menos reglas en nuestro CSS, lo que implica un menor número de caracteres. Por lo tanto, nuestra hoja de estilos pesará menos.
- El navegador no tiene que renderizar los degradados y demás elementos complejos. Ahorramos recursos de dispositivos.
- Mayor compatibilidad con navegadores antiguos. La mayoría de estilos para trabajar con Flat Design no requiere elementos complejos ni reglas CSS3, por lo tanto, mayor compatibilidad con Internet Explorer en sus versiones anteriores.
Material Design
Entre las principales críticas que se le hacen al Flat Design es que lleva el minimalismo demasiado lejos. Por esto nace el Material Design, que es un enfoque de diseño creado por Google que puedes ver en este documento. Toma las mejores partes del Flat Design y añade toques sutiles de profundidad y dimensión. El concepto está enfocado en asegurar la usabilidad e interacción del usuario.
Ventajas e inconvenientes del Material Design
- Al contrario que el Flat Design, el Material Design viene con una extensa y muy detallada guía entregada por Google. No hay espacio para dudas.
- Si planeas diseñar para diferentes plataformas, como un sitio web o una aplicación, este enfoque te asegurara una experiencia de usuario unificada. Sin dudas, facilitara el branding de tu marca.
- Nos guste o no, Material Design está atado a Google. Si quieres distanciarte de eso y crear una identidad única para tu sitio o aplicación será mucho más difícil si usas las guías de Google.
- Las animaciones consumen mucha de la batería de los móviles de los usuarios.
- Obligar a los diseñadores a mantenerse dentro de las guías de Google puede ir en desmedro de la creatividad y ralentizar el proceso de creación al agregar más animaciones y elementos ornamentales.
Bienvenido Flat 2.0
Es por esto que el Flat Design se vio obligado a evolucionar. El Flat 2.0 es más fácil de usar puesto que combina lo mejor del Flat Design con efectos y detalles en la interfaz de usuario que ayudan a crear un diseño hermoso y funcional. Es altamente adaptable y funciona casi con cualquier concepto.
Según las palabras del diseñador Ryan Allen, “ El Flat 2.0 es una evolución, no una revolución. Los días en que Flat Design era un movimiento totalmente radical del skeuomorphism ya pasaron. Si Flat Design es el árbol de navidad, el Flat 2.0 son los ornamentos, los bastones de dulce y los regalos”.
El Flat 2.0 permite a los diseñadores romper las estrictas reglas asociadas al Flat Design y usar técnicas que logran mayor atracción visual.
- Luces y sombras.
- Gradientes.
- Cualquier color de la paleta (no solo colores fuertes).
- Multiples tientes y valores de color.
Flat 2.0 les da a los diseñadores mucha más flexibilidad para la usabilidad. Esto era lo que le faltaba al Flat Design, que, si bien se veía divertido y creativo, no siempre se traducía en un aporte a la experiencia del usuario.
Algunos ejemplos de Flat 2.0
Flat 2.0 es sólo un paso más adelante en la evolución de este estilo, que nace desde la raíz más pura del minimalismo. Lo que es tan atractivo de él, es el factor de diversión innato que conlleva.
De igual forma que sucede con el uso de las tipografías web, el Flat 2.0 es algo positivo. Trae elementos y atributos nuevos: desde colores brillantes, hasta botones más planos para «Call to Action» (Descubre la psicología detrás del color del botón, aquí). Es por eso que este enfoque es importante, práctico, usable y funcional. Pero recuerda, todo depende del proyecto, de los usuarios y los test asociados. No sólo pienses en hacer algo “lindo”, sino que tu diseño realmente resuelva los problemas del usuario.