Flat design e Scheumorfismo spiegati bene

Lorenzo MigliettaLorenzo Miglietta

42 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

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

Discussione:

Ci sono 42 commenti in “Flat design e Scheumorfismo spiegati bene”

  • “È quel famoso design che vediamo da Windows 7 in poi e su Windows Phone basato su una griglia di questo tipo:”

    in realtá é comparso prima su windows phone e successivamente su Windows 8, Windows 7 ha ben poco di Flat 🙂
    Per il resto ottimo articolo e molto interessante il sito!

    • Ciao!
      Si è un errore di digitazione. Intendevo scrivere un 8 al posto di quel 7. Grazie comunque per la segnalazione e per i complimenti 🙂
      Spero di rivederti ancora qui su Grafigata! 🙂
      L.

  • bell’articolo! mi ha chiarito le idee … me ne ha anche fatte venire di nuove e anche questo è un pregio

  • Ottimo articolo che chiarisce in modo perfetto le differenze sia concettuali che grafiche 😀 personalmente essendo un web designer sono più pro-flat, ma il material design dal canto suo è davvero interessante. Probabilmente a mio parere sarà esso stesso a definire le tendenze grafiche dei prossimi anni.

    • Ciao alessandro, grazie mille per il commento 🙂
      Direi che siamo sulla stessa lunghezza d’onda! Il material design di Google ha dimostrato come sfruttando gli aspetti migliori di due cose ben diverse tra loro si possa generare qualcosa di molto interessante.
      Staremo a vedere che succederà 🙂
      L.

  • Io sono neofita in questo mondo e fatico per trovarvi una collocazione. Sono alla ricerca di un mio stile e dove ho studiato non ho avuto molto modo di affrontare la teoria. È grazie a chi come te divulga informazioni di questo tipo che posso saperne di più, meglio ancora se l’argomento è affrontato in modo dinamico, chiaro e coinciso. Come hai fatto tu 🙂

    • Ciao Serena!
      Grazie mille per questo commento, davvero 🙂 Sei andata al centro di quello che è il mio desiderio: divulgare le mie conoscenze ed esperienze per aiutare tutti a realizzare la propria creatività 🙂
      Spero di rivederti ancora qui su Grafigata!
      L.

      • Ma tu stai su “Grafici Creativi”: ho riconosciuto il tuo logo, lo postasti nel gruppo, una volta XDComunque sì, credo che bazzicherò ancora il tuo sito 😉 E spero di trovare una collocazione anch’ io. A presto!

        —-Messaggio originale—-

        Da: [email protected]

        Data: 10-feb-2015 16.44

        A:

        Ogg: Re: Comment on Flat design e Scheumorfismo spiegati bene

        a:hover,
        a:hover span {
        color: #1188d2!important;
        }

        .button-cta:hover {
        color: #ffffff!important;
        background-color: #1188d2!important;
        }

        .button-cta:hover span {
        color: #ffffff!important;
        }

        #outlook a {
        padding: 0;
        }
        body {
        width: 100% !important;
        }
        .ReadMsgBody {
        width: 100%;
        }
        .ExternalClass {
        width: 100%;
        display:block !important;
        }

        @media only screen and (max-device-width: 480px) {
        html {
        -webkit-text-size-adjust: 100%;
        }
        .content {
        width: 100%;
        }
        table {
        border-collapse: collapse;
        }
        h2.headline {
        font-weight: 700;
        font-size: 20px!important;
        margin-bottom: 5px;
        }
        .button-cta {
        display: block!important;
        padding: 0!important;
        }
        div.header {
        padding-top: 20px;
        }
        div.footer {
        padding-bottom: 20px;
        }
        }
        }

        p.mod-tools a:hover {
        color: white!important;
        background: #8c989f!important;
        }

        @media only screen and (max-device-width: 480px) {

        td.avatar,
        td.spacer {
        width: 38px!important;
        }

        td.avatar img,
        td.spacer img {
        width: 28px!important;
        }

        }

        –>

        “Ciao Serena!
        Grazie mille per questo commento, davvero 🙂 Sei andata al centro di quello che è il mio desiderio: divulgare le mie conoscenze ed esperienze per aiutare tutti a realizzare la propria creatività 🙂 Spero di rivederti ancora qui su Grafigata!
        L.”

        Settings

        A new comment was posted on Grafigata.com

        Lorenzo M.

        Ciao Serena!
        Grazie mille per questo commento, davvero 🙂 Sei andata al centro di quello che è il mio desiderio: divulgare le mie conoscenze ed esperienze per aiutare tutti a realizzare la propria creatività 🙂 Spero di rivederti ancora qui su Grafigata!
        L.

        10:44 a.m., Tuesday Feb. 10

        |

        Other comments by Lorenzo M.

        Reply

        to Lorenzo M.

        Lorenzo M.’s comment is in reply to

        Serena Monfrecola:

        Io sono neofita in questo mondo e fatico per trovarvi una collocazione. Sono alla ricerca di un mio stile e dove ho studiato non ho … Read more

        You’re receiving this message because you’re signed up to receive notifications about replies to serena_monfrecola.

        You can unsubscribe
        from emails about replies to serena_monfrecola
        by replying to this email with “unsubscribe”
        or reduce the rate with which these emails are sent by
        adjusting your notification settings.

  • Non sono uno che commenta agli articoli. Evidentemente ne trovo raramente di così interessanti.
    RockOn Lorenzo!!

    P.s.
    Flat Design Rulez!!!

  • Ciao sto dando una letta ad alcuni tuoi articoli. Il tuo blog é interessante e scritto bene. Esponi argomenti che sono si trattati anche da molti altri, ma lo fai in maniera molto chiara ed esaustiva. E sei pure simpatico, ti meriti tutti i like che domandi 😉 Di solito non mi perdo in complimenti, ma te li meriti…ti ho messo tra i preferiti, continua cosí! Sei bravo!

  • Il flat design trovo sia una riduzione eccessiva di una grafica che pur essendo più complessa non era ridondante né superflua. Dato che mostrare oggetti 3D non è pesante come tempo fa, questa moda rimane tale per me e non ha un core di utilità che potrebbe conferirgli lunga vita.
    Sicuramente è più immediata da sviluppare, ma diciamolo chiaramente: è più brutta della grafica pre-Windows 8 (per chi ci era abituato) e soprattutto lo è in quanto all’epoca la grafica flat apparteneva agli albori della grafica da video terminale stile UNIX e DOS, perciò “antiquata” e “primordiale” direi, anche se riproposta con colori e stili modernizzati.

    Non c’è niente da dire: una barra di scorrimento flat in grigio chiaro su sfondo grigio scuro è non solo difficile da usare e da vedere, ma decisamente “brutta”!!!!

    Se l’estetica è un fatto di opinione, il contenuto di informazione e utilità associati a uno stile grafico è qualcosa di più oggettivo, che il tempo giudicherà buono o meno.

  • Grazie per questa guida Lorenzo!!
    Io sono un appassionato e non un professionista, e da poco tempo ho trovato il tuo fantastico blog. Complimenti davvero per il lavoro che fai sempre preciso, dettagliato ma leggero.
    Riguardo ai due tipi di desing personalmente uso il flat, ma probabilmente la via migliore è rappresentata dal material design di google.( questo è il parere di un neofita)

  • Ciao @Lorexo:disqus

    Intanto complimenti per l’ottimo articolo.

    Volevo comunicarti che sto linkando questa pagina in una lezione di un mio corso a pagamento per lo sviluppo di applicazioni iOS (www.xcoding.it). Dato che non sono un grafico, ho messo il tuo link come supporto ai miei studenti.

    Se è un problema fammi sapere 😉

  • Hai scritto tu l’articolo?
    Perchè io ho trovato questo qui: http://sachagreif.com/flat-pixels/ e il tuo è semplicemente tradotto.

    Credo che se tu abbia davvero fatto la semplice traduzione dell’articolo tu debba creditare l’autore che ha davvero speso giorni per scriverlo.

    • Ciao Denise!
      Certo è uno degli articoli che ho utilizzato come fonte 🙂 Quando 8 mesi fa ho scritto questo articolo ho anche avvisato Sacha Greif che avrei utilizzato quell’articolo come fonte. E infatti l’introduzione e il primo paragrafo sono in parte presi da lì 🙂
      Il resto dell’articolo è originato (come si capisce) da diverse fonti e da miei punti di vista e conoscenze.
      Hai comunque assolutamente ragione nel dirmi che vanno citate le fonti (lo faccio in tutti gli articoli). Qui ero ancora agli “inizi” e me le ero dimenticate. Spero che mi perdoni se le inserirò solo nei prossimi giorni appena avrò tempo 🙂
      Grazie ancora,
      Lorenzo.

      P.s.: ho riguardato il tutto e, in verità, ho dimenticato solo quella fonte! Le altre 4 o 5 sono inserite come sempre nel testo, ora inserisco le fonti a fine articolo! 😉

  • sono arrivato qui dall’articolo sul material design. ho trovato molte informazioni alle quali non mi ero mai interessato. un vero peccato perché sono risultate molto interessanti.

    (adesso vado a finire di leggere l’altro articolo! 🙂 )

  • Non so niente di design etc. ma devo dire che sei bravissimo nello spiegarlo ai principianti!
    Secondo te, lo stile di “In A Nutshell” (canale YouTube considerato come uno dei migliori nel campo della divulgazione scientifica e del debunking) è material design o flat design?

  • Complimenti per l’articolo come sempre! Io mi chiedo in effetti, cosa può seguire a questi tre “stili”? Ci si fermerà al material per i prossimi anni? Si tornerà alle classiche texture e sfumature a gogò dei siti anni 90?

    • Ciao Roberto!
      Ultimamente, secondo me, si sta pian piano evolvendo anche il Materiale design in qualcosa di sempre più “material”, cioè sempre più realistico. Staremo a vedere che succede! 🙂

  • Raramente commento articoli, mi occupo principalmente di Front-end e sono da tempo in cerca di maggiori informazioni sulla grafica digitale, finalmente ho trovato un articolo, ma la mia sete di informazioni non finisce qui, ci sono libri che parlano di questi tipi di design?

  • Ciao, so di essere molto in ritardo ahah
    Sono uno studente di ingegneria (sì, non siamo solo macchine apatiche) che si è appassionato al graphic/web design da qualche mese proprio grazie a questo e altri tuoi artici… volevo ringraziarti e farti tanti auguri per il futuro!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*