Flat Desing

Flat Desing

Comparte tus artículos favoritos

La tendencia más buscada sobre diseño web este año ha sido el Flat Desing, pero, ¿Exactamente qué es el Flat Desing?
 
Flat Design es sencillamente diseño plano. Así sin más, por ejemplo cuando hablamos del flat web design, estamos hablando del diseño de una página web que decide usar formas geométricas, colores planos o infografías planas. El flat web design elimina sombras, efectos ya sean tridimensionales, de profundidad o cualquier otro tipo. Lo minimalista y sencillo pasa a un primer plano.
 
Sin ir mas lejos un buen ejemplo lo tenemos en las paginas de Google, como Gmail o Google+, y no solo lo podemos ver en la web, ya que desde hace algunos años, las interfaces de los principales operativos (IOS 7, Windows 8, Windows Phone, Android)
 
Sin entrar en definiciones, el flat design supone un cambio en la conceptualización de las formas y objetos en el diseño gráfico, sea para la utilización en aplicaciones móviles, diseño de páginas web o en el ámplio mundo del diseño gráfico.
 

Ventajas e inconvenientes del Flat Design

 
Para el usuario: se requiere un esfuerzo para interpretar lo que estamos mostrando, frente a la realidad o imitación de la realidad. Los niveles de abstracción son grandes por tanto dejamos en la mano del usuario su comprensión.
 
Para el diseñador: supone mayor diseño y abstracción pero menos horas de trabajo frente a la herramienta (photoshop, illustrator, etc…).
 
Para el navegador: 
 
– Menos reglas en nuestro CSS, lo que implica un menor número de caracteres, por lo tanto, nuestra hoja de estilos pesará menos.
 
– La mayoría de estilos para trabajar con Flat Design no requiere elementos complejos ni reglas CSS3, esto ofrece una mayor compatibilidad con navegadores antiguos como Internet Explorer en sus versiones anteriores.
 
App LiveBoard Pizarra para varios dispositivos - Facoria Creativa
 

Flat design y la Experiencia de Usuario

Vamos a definir dos botones imaginarios. El primero de ellos con degradados, gradientes, bordes redondeados, filtros, transparencias y sombras.
 
Por otro lado un botón con diseño plano. Bordes rectactugalres. Fondo verde plano. Cuando pasamos el ratón por encima, el verde se vuelve más claro. Simplemente eso.
 
La diferencia entre un botón y otra a nivel de tamaño en el archivo CSS puede suponer 1kb, pero si multiplicamos ese tamaño por el número de visitas que recibe nuestra web al día (1000) ya tenemos 1000kb al día.
 
Se trata en este punto de definir aquellos elementos o decisiones que se toman en la fase de diseño según el comportamiento o experiencia de los usuarios.  La elección entre una u otra tendencia no es aleatoria.  Será adecuada la opción que más facilite a los usuarios llegar al contenido que hay detrás de ese botón.
 
Aquí solo toca medir y testear cada caso concreto para tener datos sobre las que apoyar las decisiones del diseño, aunque parte con ventaja el Flat Desing.
 

WordPress y flat design

 
Recordad que el objetivo aquí es la experiencia de usuario, y con WordPress siempre vamos a tener una serie de elementos comunes a los que podemos dar estilo: el sidebar, la paginación de las páginas de archivos (archive.php, index.php, category.php…) e incluso la gestión de comentarios.
 

Recuerda, menos es más.

 
Flat design sí, flat design no. Es un debate que da para mucho. Podríamos estar horas vertiendo tinta sobre el tema, y no llegaríamos a ninguna conclusión concreta, pues en términos absolutos, no la hay. Dependerá del proyecto, de los usuarios y los test que se hagan a posteriori.
 
Aunque el flat design se caracteriza por ser un diseño simple, desprovisto de elementos decorativos esto no quita para que no se pueda combinar con otras nuevas tendencias, como el uso de vídeos de fondo, o el tan de moda efecto parallax. Aquí os dejamos algunos ejemplos interesantes.
 
Olympic Story
 
La historia de los juegos olímpicos de invierno combinando flat design y vídeos de fondo.
 
olympic story
 
FlatGuitars
 
Un buen ejemplo de ilustraciones planas creadas por David Navarro en colaboración con Ingamana.
 
flatguitars
 
Flat Design VS. Realism
 
Creado por inTacto usando una combinación entre parallax y flat design.
 
Flat Design VS Realism
 
A formula 1 history
 
15 años de formula 1 expresados en ilustraciones planas de sus vehículos gracias a Nicolo Bertoncin. Flat design en estado puro.
 
a furmula 1 history
 
The Good Man
The Good Man es una animación en diseño plano y css3 creada por Pedro Ivo Hudson.
 
the good man
 
Resumen interactivo de Robby Leonardi
Portafolio interactivo de Robby Leonardi inspirado en los juegos 2d tipo Mario Bros. Mueve el scroll y observa como la animación cobra vida.
 
robby leonardi
 
Agencia Digital Fillet
 
Jquery, HTML5, y mucha imaginación para dar vida a este diseño plano, creado por la agencia digital brasileña Fillet.
 
fillet
 
Fubiz para ipad y android tablets
 
Página web con video e imagenes xxl, sin dejar de lado el flat design.
 

 
Dream On
 
Espectacular combinación entre parallax, animaciones, y flat design.
 
Dream On
 
Web oficial del equipo McLaren Mercedes
 
Web oficial de este equipo de Formula 1, basada en un diseño plano.
 
Mclaren Mercedes
 
Minimal Monkey
 
En esta web de Stephen Burgess, las coloridas transiciones css3 y el flat design, se mezclan a la perfección con un sistema de navegación poco convencional.
 
Minimal Monkey
 
Windows of New York
 
Un proyecto de ilustración que nos muestra las ventanas de Nueva York con diseños planos.
 
Windows of New York
 
Vtcreative
 
Un buen ejemplo de web responsiva es la de  Vincent Tantardini, el cual hace uso de gráficos SVG para configurar un diseño limpio y poco sobrecargado, acorde con el flat design.
 
Vtcreative
 
Cube Slam
 
Para terminar, una de esas paginas interactivas, con la que podemos perder un buen rato. Cube Slam, es un experimento de Chrome, con el que se puede jugar cara a cara con algún amigo.
 
Cube Slam
 
Conclusión
 
Como se puede ver, aunque el flat design se base en un diseño minimalista y sencillo, los resultados obtenidos con esta nueva tendencia poco tienen que envidiar al anterior realismo o skeuomorphism. En cualquier caso, esta claro que este año las lineas rectas y las figuras geométricas  van a predominar sobre el arte de imitar la realidad, por lo que habrá que adaptarse a esta nuevo modo de ver la web.
 
 

Comparte tus artículos favoritos
superadmin


Factoria Creativa - Agencia de diseño gráfico y marketing online located at Casp 90 , Barcelona, España . Reviewed by 86 customers rated: 4.5 / 5