Como hacer un diseño “Flat”

El diseño flat es un poco difíicil de definir, ya que no se refiere realmente a un solo concepto. En su lugar, se puede considerar como el número de conceptos y prácticas que, en conjunto, constituyen un término genérico.

-Joseph Howard, pencilscoop.com

Desde la salida de Windows 8, el diseño flat o diseño plano ha adquirido muchísimo protagonismo. Actualmente, son numerosos los sitios web, programas y aplicaciones que han optado por abandonar los degradados, texturas y sombras, optando por un diseño limpio, elegante y minimalista.

Aunque son muchos los que opinan que sólo es una tendencia que más pronto que tarde desaparecerá, es bueno para cualquier diseñador estar al día y saber trabajar este tipo de diseños. Para hacerlo correctamente, nos basta con conocer 6 reglas básicas, según pencilscoop.com

 

-Elección del color:

El diseño flat se suele identificar con el uso de colores llamativos, aunque lo cierto es que otros colores con menos saturación y más ligeros, como los tonos pastel, funcionan también perfectamente.

En Flat Ui Colors podemos ver un ejemplo de una buena paleta de colores para usar en nuestros diseños flat.

paleta colores flat

 

 

-Tipografía:

Otro elemento muy importante es la elección de la tipografía. Además de las consideraciones básicas que debemos tener en cuenta a la hora de elegir una tipografía, para los diseños flat es muy importante usar una fuente moderna, limpia y sin serifa. Estos son algunos ejemplos, con su correspondiente enlace para descargar:

helvetica neue download

myriad pro download

open sans download font

champagne limousines font

ptsans font download

eight one font download

continuum font

melbourne font download

compass font download

aller font download

 

-Iconos:

Los iconos son una parte muy importante en cualquier diseño. En un diseño flat hay que evitar en la medida de lo posible que los iconos, logos y otros elementos del diseño contengan degradados, sombras, bordes y esquinas afiladas. Con las dimensiones no tenemos problema, podemos usar tanto iconos sobredimensionados como iconos muy pequeños.

En FlatIcon.com podemos encontrar varios packs con iconos flat para descargar y usar en tus proyectos.

 

 

-Imágenes:

Si necesitamos incluir imágenes hay que evitar el uso de bordes. Una buena idea es usar imágenes que ocupen el ancho completo de la página, como hacen muchas webs. También es interesante tratar antes las imágenes con algún filtro para estilizarla, como la del siguiente ejemplo:

mobile design flat

 

-Espacios:

Quizás una de las reglas más complicadas, los espacios. Y es que si abusamos de ellos, nuestro diseño se verá vacío, pero si usamos demasiada poca separación entre los elementos el diseño parecerá desordenado. En un diseño flat siempre es mejor usar buenos espacios entre los elementos, de forma que la imagen se vea amplia y agradable a la vista. Algo sencillo de conseguir si añadimos al diseño sólo lo realmente necesario, como la siguiente web:

flat web design

 

-Queda prohibido:

  • Usar degradados
  • Usar sombras.
  • Usar bordes.
  • Usar tipografías complejas.

 

Leave a reply