┬┐QU├ë ES EL FLAT DESIGN? EJEMPLOS, ORIGEN Y CARACTER├ŹSTICAS

┬┐Qu├ę es el flat design o dise├▒o plano? Ejemplos y caracter├şsticas

┬┐Qu├ę es el Flat Design?Ôťö´ŞĆ Caracter├şsticas del dise├▒o plano Ôťö´ŞĆ Ejemplos de Flat Design, sitios web que lo utilizan creativamente.

El flat design (dise├▒o web plano en espa├▒ol) es es una est├ętica minimalista que se viene utilizando en dise├▒o web desde hace unos diez a├▒os y que sigue siendo tendencia.

En este art├şculo analizaremos ┬┐Qu├ę es el dise├▒o plano? sus caracter├şsticas, las ventajas que aporta y unos cuantos ejemplos de p├íginas web que lo utilizan.

┬┐QU├ë ES FLAT DESIGN O DISE├ĹO PLANO ?

Origen del flat design o dise├▒o plano

El flat design es un estilo de dise├▒o minimalista, centrado en la usabilidad. Utiliza elementos simples, colores brillantes e ilustraciones bidimensionales. 

Este estilo utiliza la decoraci├│n estrictamente necesaria, no hay lugar para sombras, reflejos adicionales ni luces altas para que las im├ígenes se vean tridimensionales. El dise├▒o plano adopta un estilo bidimensional y elimina elementos decorativos con el fin de comunicar la informaci├│n lo m├ís r├ípidamente posible.

El dise├▒o plano tiene una visi├│n minimalista, se despoja de todo lo que no aporte valor, eliminando distracciones y mejorando la experiencia de usuario.

 Con menos elementos de dise├▒o, los sitios web son capaces de cargar m├ís r├ípido y cambiar de tama├▒o f├ícilmente creando un ┬źdise├▒o adaptable┬╗ a los diferentes dispositivos m├│viles con facilidad.

La belleza del dise├▒o plano se encuentra en los mensajes simples y directos, una paleta de colores brillantes, el contraste, las im├ígenes minimalistas y las tipograf├şas sans-serif que refuerzan su car├ícter funcional.

El diseño plano vuelve a los fundamentos del diseño. Un buen diseño es aquel que funciona, que cumple la función para la que fue creado, no el más llamativo o el que mejor apariencia tiene.

A partir de diseño plano surgen tendencias que consideran que el estilo flat es perfecto para diseño gráfico pero que queda un poco corto para diseño web. Las dos principales son:

Long shadow design

Esta tendencia consiste en a├▒adir sombras alargadas a los iconos. Estas sombras no son como las del dise├▒o realista y se utilizan para que el icono que las proyecta llame la atenci├│n.

Material design

Esta concepto ┬źinventado┬╗ por Google, a├▒ade sombras y luz, as├ş sabemos que objetos est├ín encima y debajo. Tambi├ęn incluye animaciones, como botones flotantes.

­čśë Lectura recomendada: DISE├ĹO WEB MINIMALISTA: EJEMPLOS,PRINCIPIOS Y VENTAJAS

­čśë Lectura recomendada: C├│mo Crear una P├ígina Web Profesional Desde Cero

Origen del flat design

Bauhaus – Estilo suizo

El dise├▒o plano tiene sus antecedentes en otras tendencias de dise├▒o como el Estilo suizo y la Bauhaus.

El Estilo suizo o Estilo Tipográfico Internacional, no incluye ningún elemento en el diseño que no sea completamente necesario.

La Bauhaus con el uso de formas geom├ętricas, colores planos y mensajes directos, sent├│ las bases del dise├▒o gr├ífico actual con formas geom├ętricas, colores planos y comunicaci├│n efectiva.

La forma sigue a la funci├│n
Walter GROPIUS

El diseño plano nació como contraposición al diseño realista (skeumorfismo). Este tipo de diseño utiliza imágenes realistas, con sus sombras, luces, reflejos y toda la gama de trucos posibles para dar una imagen tridimensional. Todo lo contrario al diseño flat como hemos visto.

  dise├▒o realista VS dise├▒o plano
Skeumorphism VS Flat Desing

Microsoft fue uno de los primeros en aplicar este estilo de dise├▒o: En 2002  lanz├│ Windows Media Center, y en 2006, el reproductor de MP3 Zune, ambos conten├şan elementos de dise├▒o plano.

Esta tendencia continu├│ con Windows Phone a finales del 2010 (mientras que Apple utilizaba el dise├▒o skeum├│rfico en la interfaz iOS) y sigui├│ en 2011 con la nueva interfaz de XBOX 360 y en 2012 con Metro para Windows 8.

Los de Apple se acercan al dise├▒o plano con la aparici├│n de iOS 7.

Flat design
Evoluci├│n de Apple

Google tambi├ęn se ha ido adaptando al cambio poco a poco, al igual que Android que desde su versi├│n 5 utiliza material design.

Hoy en d├şa los elementos de dise├▒o plano se utilizan en dise├▒o de logos, dise├▒o de imagen corporativa, dise├▒o de cat├ílogos, tiendas online, dise├▒o editorial, ilustraci├│n, dise├▒o publicitario y dise├▒o de interfaces .

Video: ┬┐Qu├ę es el Dise├▒o Flat ?

CARACTER├ŹSTICAS DEL FLAT DESIGN

Las caracter├şsticas principales del dise├▒o plano son:

  • Colores s├│lidos y vivos en paletas pastel
  • Fuentes tipograf├şa sans-serif grandes
  • Ilustraciones bidimensionales
  • Im├ígenes minimalistas, de frente o perfil.
  • Texto conciso y directo, llamadas a la acci├│n claras
  • Botones y enlaces claros y visibles

Video: Caracter├şsticas del dise├▒o plano

VENTAJAS DEL FLAT DESIGN

┬┐Cu├íles son las ventajas del flat design?

  • Aporta un mensaje claro
  • Mejora los h├íbitos de navegaci├│n
  • Mejora la experiencia de usuario
  • Aumenta la velocidad y reduce tiempos de carga
  • Mejora el posicionamiento web
  • Proyecta una imagen limpia y moderna
  • Facilita la creaci├│n de dise├▒os responsive ┬źresponsive design┬╗

FLAT DESIGN EJEMPLOS

Te traigo unos cuantos ejemplos de flat design, para que te inspires.

Svkariburnu

Flat desing ejemplo: Svkariburnu

Sparkbox

Flat desing ejemplo: Sparbox

Webflow

Flat desing ejemplo: Webflow

Twelve

Ejemplo de flat design: Twelve

Lander

Ejemplo de flat design: Lander

CONCLUSIONES

El diseño gráfico plano es una tendencia que ha venido para quedarse, que se aplica al diseño gráfico, a la ilustración y al diseño publicitario.

Seguiremos viendo diseño web plano puro o con alguna variante como Long shadow design o el material desing, en el diseño de páginas web y en el diseño de interfaz de aplicaciones móviles.

Imagen Post: Promotion vector created by vectorjuice – www.freepik.es

Si te ha gustado, por favor compartelo:

Te leo en los comentarios.

Deja un comentario

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

Responsable » Sergio Carreño -  Finalidad » moderar los comentarios -  Legitimación » tu consentimiento -  Destinatarios » tus datos serán guardados en los servidores de Lucushost,  nuestro hosting -  Derechos » por supuesto tendrás derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos

 

Ir arriba