Amb l’aparició el setembre de 2013 d’iOS 7, el que fins llavors era una tendència més en disseny -ja utilitzada per exemple per Microsoft en el sistema operatiu Windows Phone-, va assolir la categoria de moda. Parlem del disseny pla (en anglès, flat design), un moviment estètic que ha aconseguit deixar tocat de mort un dels paradigmes en el disseny d’interfícies: l’esqueuomorfisme.
El disseny pla fa referència a un estil en el disseny d’interfícies que elimina tots els elements estilístics que donen la sensació de tridimensionalitat i se centra en un ús minimalista d’elements senzills, tipografies i colors plans. Els primers exemples de disseny pla els podem trobar en les dècades dels quaranta i cinquanta del segle passat a Suïssa i Alemanya. (Font: Wikipedia).
Disseny pla en la nova interfície de Windows (font: Microsoft.com)
El disseny pla es caracteritza pel següent:
- Absència de textures, ombres, gradients, bisells o qualsevol altre element que provoqui sensació de profunditat.
- Disseny minimalista, en què els elements “respiren” i no s’amunteguen els uns damunt dels altres.
- Ús de formes geomètriques simples (quadrats, rectangles, cercles, etc.) per a estructurar la informació o dissenyar elements de la interfície (botons, icones, etc.).
- Ús destacat de la tipografia: en absència d’elements decoratius, la tipografia adopta un paper protagonista en el disseny pla, amb preferència per famílies sense serifa (de pal sec), usades en diferents mides i variants.
- Ús de colors uniformes, vibrants. La paleta de colors s’amplia, però en el seu format més pur (colors primaris i secundaris).
Al marge de modes o tendències estètiques, un dels motius pels quals el disseny pla s’ha popularitzat és la seva màxima compatibilitat amb el disseny adaptatiu. Despullat d’elements decoratius, el disseny pla permet millorar els temps de càrrega del web, i reescalar fàcilment els elements en pantalla.
Tot i així, el disseny pla 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. Per aquest motiu, molts dissenyadors estan optant per un camí intermedi, això és “gairebé-pla”, en el qual es pren el millor dels dos mons.
Més informació i enllaços relacionats:
– The history of flat design: how efficiency and minimalism turned the digital world flat
– Principles of flat design
– Flat design: an in-depth look
Eines i recursos
- The ultimate guide to flat design. Inclou una generosa llista d’UI kits gratuïts i de pagament, com també jocs d’icones i altres recursos “plans” per als nostres dissenys web i el mòbil.
- Flatdsgn.com. Exemples de disseny pla i recursos gratuïts per als nostres projectes.
- Flat inspiri. Àmplia galeria de projectes de disseny pla, organitzats per categories. Útil per a trobar inspiració.
- Flat UI Design. Mur en Pinterest amb exemples d’aplicacions mòbils i pàgines web creades segons criteris de disseny pla.
- Flat UI colors. Elegant paleta de colors plans per a usar en els nostres dissenys.