Lorenzo MigliettaLorenzo Miglietta

Flat design e Scheumorfismo spiegati bene

41 COMMENTI

Flat design e Scheumorfismo

Se negli ultimi anni sei vissuto nello stesso mondo in cui sono vissuto io, sicuramente hai assistito (magari in modo inconsapevole) allo “scontro” tra lo scheumorfismo e il flat design.

Se la tua reazione alla precedente affermazione è stato un qualcosa del tipo “scheu-che-coooosa?” allora sei sicuramente nel posto giusto.

In questo articolo voglio spiegare per bene che cos’è lo scheumorfismo, che cos’è il flat design e perché se ne parla e soprattutto perché se ne parla come due cose “in lotta” tra loro.

Se invece ne sai già qualcosa voglio partire con un piccolo indovinello: osserva le due immagini qui sotto e dimmi quale di queste interfacce grafiche di una app calcolatrice è scheumorfica?

Flat design e scheumorfismo

Se la tua risposta è stata ancora una volta “scheu-che-coooosa?” (però questa volta con più insistenza) tranquillo, tra poco ti spiego bene tutto.

Se invece hai risposto “vabbè, facile! Quella a destra!” mi spiace dirti che ti sbagli pure te!

Sai qual è la risposta esatta? È che entrambe le interfacce sono scheumorfiche! E nel corso di questo articolo ti spiegherò bene perché. Pronto ad iniziare? Dai!

Cos’è lo scheumorfismo

scheumorfismo icone

Questa strana ed oscura parola, che si può dire anche scheuomorfismo e deriva dal greco, indica un ornamento fisico o grafico apposto su un oggetto allo scopo di richiamare le caratteristiche estetiche di un altro (come dice Wikipedia).

In modo ancora più specifico, però, lo scheumorfismo fa riferimento quasi sempre a caratteristiche estetiche del passato o comunque di oggetti “superati”.

Ci sono centinaia esempi di ciò, come appunto le app per i bloc notes con una grafica che rimanda ai post-it oppure un software per leggere i libri che simula il gesto di sfogliare un libro. Certo, post-it, fogli di carta e libri non sono oggetti del passato (o almeno per ora), ma sono oggetti, già conosciuti dalle persone, i quali aiutano a familiarizzare con interfacce che invece non sono ancora conosciute.

Lo scheumorfismo ha quindi lo scopo di fare da tramite tra quello che già si conosce e quello che si deve ancora capire come funzioni.

Come visto sono numerosissimi gli esempi di interfacce grafiche scheumorfiche che simulano oggetti del mondo fisico. Ma gli scheumorfismi non riguardano per forza di cose la grafica visiva, ma, come nel caso del rumore dello scatto quando gli smartphone fanno una foto, anche sonori.

Dall’altra parte, come vedremo, c’è il flat design, basato sul minimalismo e la rappresentazione degli oggetti tramite forme piatte e monocolore, ma ci arriviamo con calma.

Scheumorfismo è realismo?

Lo scheumorfismo vero e proprio fa solitamente riferimento ad oggetti del passato. Lo scheumorfismo diventato trend alcuni anni fa, invece, aveva più a che vedere con il realismo che cerca appunto, come suggerisce il nome, di simulare gli oggetti reali.

Flat design e scheumorfismo

Quindi, tornando velocemente all’esempio di inizio post, quello delle app delle calcolatrici, entrambe sono scheumorfiche perché simulano la forma e le funzioni di una reale calcolatrice, ma solo quella a destra è anche visivamente realistica.

Ovviamente le due tendenze vanno di pari passo. Dove il design scheumorfistico tende al realismo (per rendere più immediata la comprensione del riferimento), il design realistico tende allo scheumorfismo (per non far sembrare il realismo fuori luogo).

Quindi, mentre il realismo è qualcosa di puramente visivo, lo scheumorfismo è qualcosa che pregna il design in un modo molto più profondo.

I pro e i contro dello scheumorfismo

Come in ogni cosa, anche nello scheumorfismo ci sono sia aspetti positivi che negativi.

Presupponendo una buona e corretta progettazione (deve essere fatto bene), i “pro” dello scheumorfismo sono:

  • Aiuta gli utenti a comprendere meglio lo scopo e l’utilizzo di un’app grazie alla sua grafica che rimanda a quella di un oggetto esistente;
  • Quando fatto bene, conferisce un aspetto di eleganza e di pulizia molto piacevole;
  • Grazie a tutti gli aspetti di cui ti ho parlato fino ad’ora si può definire un approccio familiare con l’utente da parte del designer.

Ovviamente ci sono anche gli aspetti negativi. Questi “contro” hanno forse fatto passare molto velocemente la moda dello scheumorfismo (della quale ti parlo tra un po’, tranquillo!) sbocciata qualche anno fa nel mondo del design. Eccoli:

  • È un processo creativo mooolto lento e macchinoso. Creare textures fotorealistiche non è per nulla semplice e richiede molto tempo;
  • I file generati in modo scheumorfico richiedono molto spazio su disco (sono molto più pesanti perché rasterizzati e non vettoriali, se non sai di cosa parlo te lo spiego bene qua);
  • È poco adatto al web e soprattutto ai codici di programmazione CSS e HTML5 usati per rendere i siti web responsive, cioè adatti ad ogni supporto (computer, tablet, cellulare);
  • È troppo legato al cambiare delle mode per essere qualcosa su cui vale la pena spendere tempo e soldi. Una texture in pelle marrone scura può essere all’ultimo grido oggi e noiosa domani, mi spiego?

Si va bene Lorenzo e allora se lo scheumorfismo ha tutti questi difetti che cosa ne parli a fare? 

Te ne parlo perché, prima di tutto, è pur sempre un valido strumento di progettazione in determinati casi. Poi è anche stata una delle tendenze più in voga negli ultimi anni, anche se, nel corso del 2014, è stata soppiantata da un’altra tendenza nel mondo della grafica: il flat design.

Aspetta. Prima di spiegarti che cos’è il flat design, forse è il caso che ti spiego un po’ da dove cavolo spunta fuori questo “scontro” all’ultimo sangue tra Flat e Scheumorfismo.

Flat vs Skeu – Perché se ne parla?

Tutto ebbe inizio con la forgiatura dei magici anelli. Tre vennero dati agli elfi…

Ah no, scusate ho sbagliato storia eheh. Ricominciamo.

Tutto ebbe inizio con l’iPhone. Ebbene si. Ancora Apple.

Iphone scheumorfismo

Prima dell’uscita del primo iPhone, nel 2008, lo scheumorfismo e il realismo nelle interfacce grafiche era estremamente inusuale, con la sola eccezione dei videogiochi. Infatti lo scheumorfismo era molto utilizzato nel game design, specialmente nei giochi di ruolo tipo War of Warcraft o robe del genere, per facilitare la comprensione delle varie dinamiche di gioco.

Apple introdusse fortemente lo scheumorfismo nelle sue interfacce grafiche di iOS per due valide ragioni:

  1. Lo scheumorfismo era attraente. Certo, adesso ne abbiamo fin sopra i capelli, ormai, di vedere quelle superfici con texture di legno, di finta pelle o di carta ingiallita, però all’inizio era una grossa innovazione! Quando uscì l’iPhone, nessuno era abituato ad una tale ricchezza visiva su un cellulare.
  2. L’iPhone era un dispositivo completamente nuovo per chiunque. Aveva bisogno di collegarsi al mondo reale per essere compreso ed essere utilizzato da tutti. Lo scheumorfismo è il modo migliore per far comprendere all’utente le funzioni di un’interfaccia, ormai dovresti saperlo! 🙂
Un'app di lettura di e-book che simula una libreria. Interfaccia molto scheumorfistica.
Un’app di lettura di e-book che simula una libreria. Interfaccia molto scheumorfistica che fa capire immediatamente che cosa stai utilizzando.

Tra il 2008 e il 2012, nel mondo della grafica c’è stato quindi il proliferare quasi incontrollato dello scheumorfismo sulla scia del modello Apple. Ma non tutti erano d’accordo.

L’avvento del flat design

Se l’avvento dello scheumorfismo si può ricollegare ad Apple, quello del flat design è sicuramente attribuile al rebranding di Microsoft dal 2010 in poi.

Piccolo inciso: se non sai cos’è il rebranding puoi leggerlo qui, mentre se già sai cos’è forse ti può interessare come farlo nel modo più efficace.

Infatti, qualche anno fa, forse per differenziarsi dal design di Apple, forse perché sinceramente reputava questo nuovo stile il migliore, Microsoft adottò uno stile completamente nuovo che venne inizialmente chiamato Metro Style. Il nome è stato poi cambiato per questioni di copyright ma chissene, ormai tutti lo ricordano come Metro design.

È quel famoso design che vediamo da Windows 8 in poi e, ancora prima, su Windows Phone, basato su una griglia di questo tipo:

Flat design Microsoft

Questo nuovo Metro Style della Microsoft, si sbarazzò di tutte quelle texture, sfumature e ombre semi-realistiche che andavano tanto di moda qualche anno prima grazie ad Apple. Esso era parte di quello che viene chiamato Flat design.

Ma che cavolo è sto flat design?

Cos’è il flat design

Flat design icone

Il flat design è un approccio, uno stile di design basato su sagome geometriche “flat” (piatte), spazi netti e definiti, colori brillanti, illustrazioni e interfacce bidimensionali e minimaliste.

Ovviamente non sono stati i designer della Microsoft a inventarlo. È qualcosa che molti, tra cui Cole Peters, fanno risalire al De Stijl olandese o al design svizzero degli anni ’50.

La differenza tra scheumorfismo e flat design, oltre che visiva, è anche profondamente concettuale: mentre il primo tende a creare collegamenti tra il mondo reale e quello della grafica e della tecnologia, il flat design vuole rompere totalmente ogni tipo di legame tra i due mondi.

Invece di rappresentare la app di un calendario cercando di simulare la forma dello stesso, nel flat design si tende a rappresentarla attraverso un segno grafico molto sintetico e minimalista, ad esempio.

Anche il flat design può essere scheumorfico!

Ta-daah! Rivelazione! Ebbene si, come abbiamo visto nell’esempio a inizio articolo delle due app calcolatrici, una delle due app è progettata secondo gli stili grafici del flat design ma entrambe sono scheuomorfiche perché rimandano ad un oggetto reale e cioè la calcolatrice.

I pro e i contro del flat design

Grafigata flat design

Il flat design è sicuramente uno stile a cui vengono associati i concetti di semplicità, pulizia e modernità, ma vado adesso ad analizzare un po’ più nel dettaglio gli aspetti positivi e quelli negativi di questa tendenza.

Iniziamo con i “pro”:

  • Il flat design è di moda. La gente è abituata a vederlo e ben disposta nei suoi confronti. Insomma, flat fa figo!
  • È adattabile. E intendo estremamente adattabile. Una grafica flat può essere adattata senza problemi ad interfacce grafiche di ogni tipo, magari semplicemente modificando le dimensioni della forma geometrica di base (ad esempio il quadrato di un’icona);
  • È perfetto per il web e per i cellulari, sia perché è adattabile, sia perché la sua semplicità lo rende leggero per il caricamento, ad esempio, di un sito web;
  • C’è la possibilità di focalizzarsi su della tipografia figa nella progettazione poiché l’immagine leggere rende adatto l’utilizzo non solo dei classici font preferiti dai designer, ma anche di font innovativi o di grande impatto visivo.

Però calma, niente è perfetto, nemmeno il flat design, giuro! Ecco quali possono essere i “contro”:

  • L’estrema semplicità e il forte minimalismo possono far risultare questo stile troppo semplice, mancante di personalità o addirittura poco professionale;
  • Il flat design è di moda. Lo so, è sia nei pro che nei contro ma, si sa, quando una cosa va di moda dopo un po’ inizia a stufare!
  • A volte l’usabilità dell’interfaccia ne risente, specialmente quando ci sono tante informazioni da dover trasmettere. Si finisce addirittura a non capire più dove si possa e dove non si possa cliccare.

Questi aspetti negativi fanno capire come il flat design possa cambiare leggermente o radicalmente nei prossimi anni o addirittura nei prossimi mesi.

Una possibile alternativa dopo lo scontro tra Flat e Skeu è quella proveniente dal nuovo stile introdotto da Google, il nuovo contendente nella sfida delle tendenze grafiche del design.

Siore e sioriiii… Un “nuovo” contendente!

Ebbene si, all’incirca uno/due anni fa (nel corso del 2013) Google è entrata in pompa magna nella sfida con un nuovo stile, da alcuni hanno definito quasi flat (almost flat – Matthew Moore) e altri scheuminimalismo (Edward Sanchez).

Infatti, la linea seguita da Google nella sua immagine coordinata pare offrire il meglio di entrambi gli stili: da un lato gli efficaci riferimenti al realismo, dall’altro la purezza e la semplicità del minimalismo.

Gli stessi designer di Google hanno chiamato questo stile Material Design e ne hanno tracciato addirittura il brand manual (qui ti spiego cos’è un brand manual).

Material design google

 

Comunque sia, al di là del nome nuovo, i designer di Google non hanno creato nulla di pionieristico ma sono stati capaci a rielaborare nel modo giusto quello che già esisteva. Seppur in modo geniale e pieno di innovazioni, invece, nell’ambito del design delle interfacce.

Vuoi approfondire?

Scopri che cos’è il material design!

Conclusioni

A mio parere questo modo di fare di Google, e cioè il prendere spunto dalle migliori caratteristiche senza fossilizzarsi su dogmi e veti incrociati è il modo secondo cui ogni designer dovrebbe procedere in un progetto.

Infatti ogni logo, ogni interfaccia, ogni impaginato necessitano di diverse caratteristiche grafiche. Conoscere le tendenze è importante ma è ancora più importante non fossilizzarsi su alcune di esse ignorando il resto.

D’altronde pure Apple, di recente, ha abbandonato lo scheumorfismo in favore del flat dimostrando un’ottima propensione al cambiamento e all’adattamento.

Anche questo articolo è concluso, fammi sapere come utilizzi questi stili di design o cosa ne pensi di essi. Sei pro-skeu o pro-flat? Quale sarà secondo te la prossima tendenza?

Alla prossima, Lorenzo.

Fonti utilizzate

239 Condivisioni

Discussione: