Flat design o Material design?

Contrast entre il·lustracions simples de flat i material design.

28 de maig de 2018

Flat design o Material design?

Segur que a hores d'ara ja coneixes, has sentit parlar o has vist algun producte de flat design o material design, però ... Saps els seus orígens? o perquè encara segueix sent tendència? T'expliquem d'on vénen, les principals diferències i exemples molt gràfics que t'ajudaran a diferenciar-los.



¿D'on venen?
Molta gent creu que el primer exemple de flat design va sorgir amb l'actualització de l'interfície de Windows 8, però aquest no és l'inici del disseny pla.

Podríem considerar els seus orígens en els anys 1920, on no va ser totalment acceptat, i va ser iniciat principalment per l'escola Bauhaus. Posteriorment conegut com a estil suís o també com a estil tipogràfic internacional, entre les dècades 1950 i 1960, on la seva influència i popularització va ser més gran.

 

Funcionalitat i minimalisme
són les seves característiques bàsiques”



 

A més a més del flat design, hi ha un altre concepte molt semblant, el material design. Podem considerar el material design com una variant del disseny pla, ja que tenen molts aspectes estètics i visuals semblants. El material design és un concepte "inventat" per Google per al disseny del seu sistema operatiu. 

En l'actualitat, són moltissíms els dissenys en els que trobem presents el flat i el material design.


 

Flat design
Flat design va començar com un disseny que trencava amb tot lo anterior, eliminant lo "superfluo". El seu ús es basa en la funcionalitat, i gràcies a això s'accelera el temps de carga.

Punts a favor:
- Dissenys molt més lleugers i senzills, sense gràfics innecessaris.
- Disminueix considerablement el temps de carga, el que es tradueix amb usuaris més satisfets.
- Llocs web amb elements gràfics més senzills = llocs web més senzills de fer responsive.

 

Punts en contra:
- El mal ús pot fer que un lloc web sigui massa simple o monòton.
- La manca de relleu requereix senyals visuals per guiar a l'usuari en els punts d'interactivitat o d'objectes seleccionables.


 

Material design
En el disseny web, on l'usuari té un paper important, és necessari ensenyar-li en quins punts pot interactuar, potser per això el material design ho fa més favorable que el flat design, ja que el material design inclou profunditat, superfícies, bordes, ombres i colors per diferenciar elements. 

Punts a favor:
- Jerarquia de llums i ombres. En incloure una nova dimensió es fa més fàcil per a l'usuari la comprensió de la jerarquia.
- En posseir normes per a gairebé tots els detalls és fàcilment utilitzable.
- Animacions com un punt fort, vénen incorporades i eliminen la necessitat de manipular manualment.
- Proporciona una experiència unificada a través de tots els dispositius.

Punts en contra:
- És un invent de Google, pel que està intrínsecament lligat a ell.
- No podem fer servir tant la creativitat, en tenir tantes directrius marcades.
- Les animacions fan un consum de bateria més gran.
 

 

“Les tipografies i els colors
com a protagonistes principals” 

 

 

¿Perquè són tendència?
El disseny pla es va popularitzar a partir del 2010, i alguns creien que seria una moda passatgera i que acabaria per anar-se'n ... Però, com és que encara segueix sent tendència?


Al marge de modes o tendències estètiques, un dels motius pels quals el disseny pla s'ha popularitzat és per la seva màxima compatibilitat amb el disseny adaptatiu / responsive. Sense elements decoratius, el disseny pla permet millorar els temps de càrrega de la web i reescalar fàcilment els elements en pantalla.

Tanmateix, el flat design planteja certs problemes d'usabilitat, ja que per exemple elimina les pistes visuals que permeten a l'usuari identificar ràpidament les zones on es pot fer clic en un web. Aquests problemes d'usabilitat es resolen gairebé del tot amb el material design.


 

En quins àmbits es troben i exemples
Aquests dissenys generalment són utilitzats per a aplicacions mòbils, així com també en banners, fullets, publicitat de productes i pàgines web. Et mostrem alguns exemples molt visuals per aprendre a diferenciar entre flat design i material design.

Iconografia

flat design vs material design

 

Il·lustració

flat design vs material design

 

Interfícies de apps i webs

flat design vs material design

 

¿Una mica d'ajuda?
I ja per acabar el post, si t'interessa aquests estils de disseny et deixem alguns links a pàgines web on trobar recursos molt interessants per als teus dissenys.


MATERIAL DESIGN COLORS

MATERIAL DESIGN ICONES

MATERIAL DESIGN TIPOGRAFIES

FLAT ICONS

EXEMPLES I RECURSOS FLAT



A Use It els utilitzem casi sempre per il·lustrar i dissenyar les nostres idees. Si tu també t'has enamorat d'aquests estils, i vols veure'ls en el teu dia a dia, parlem i segur que ens encantarà formar part del teu projecte!