Home
Flat contro Material

24 Giugno 2016

Flat contro Material

di

Che stile dare all'interfaccia di una app? A ognuno il suo: piatto, animato o scheumorfico. Seguendo Microsoft, Google, Apple.

È ormai diventato comune e istintivo interagire con le app dei device tramite interfacce sempre più intuitive, che sembra indichino quali sono gli oggetti da toccare e quali sono invece solo contorno, layout grafico non interattivo.

Gli elementi grafici invitano ad essere toccati attraverso il loro aspetto. Possiamo identificare tre aspetti principali:

  • Scheumorfico (il più vecchio).
  • Flat.
  • Material design.

Il design scheumorfico precorre le interfacce utente in ambito mobile (smartphone e tablet) e fa somigliare un oggetto a un altro oggetto per richiamarne la funzione. Nel caso specifico delle interfacce digitali, pensiamo alle classiche icone dei primi sistemi operativi iPhone. Queste avevano un aspetto stondato con un effetto in rilievo per assomigliare il più possibile a un pulsante fisico di una tastiera, con un ulteriore effetto riflettente e lucido (gloss) come se fossero state di vetro (così come lo schermo touch dei device).

L’esempio più facile e probabilmente noto a tutti è la calcolatrice degli iPhone di prima generazione. I pulsanti della tastiera avevano un effetto lucido applicato alle icone, che invitava al tocco. Donald Norman lo definisce affordance: usare l’aspetto di un oggetto per suggerirne l’uso e renderlo quindi più usabile.

La calcolatrice del primo iPhone

La calcolatrice del primo iPhone.

Nel tempo però qualcosa è dovuto cambiare e si è deciso di applicare soluzioni più flat. Per convenzione possiamo identificare questa soluzione di design con l’arrivo, nel 2010, di Microsoft Windows Phone 7 negli smartphone, e successivamente con Windows 7 e 10 anche in ambito desktop PC.

A differenza del design scheumorfico, la grafica flat simula effetti tridimensionali con disegni (icone) bidimensionali. Non viene data importanza a come l’oggetto grafico riproponga un altro oggetto fisico (come nel design scheumorfico), anche se viene riproposto l’effetto tridimensionale con la creazione di ombre. In questo modo si ha la percezione di un effetto tridimensionale ma su uno stesso piano.

Nel design flat viene data inoltre importanza alla semplicità e alla facilità di lettura di icone ed elementi tipografici (che diventano spesso i protagonisti delle icone). I colori che vengono preferiti nella progettazione delle icone sono quelli primari (rosso, giallo, blu) con diverse gradazioni e abbinati ai rispettivi colori secondari.

long-shadow-icon-designs.jpg

Alcuni esempi di icone in flat design
(Twitter, Instagram, iTunes) con l’effetto ombra
applicato agli elementi grafici.

Seppure il flat design sia stato applicato anche da iOS 7, dobbiamo dare il merito a Microsoft per l’adattamento più performante. La soluzione delle icone flat disposte in tile (cui abbiamo accennato anche in Interazioni da Smart TV) è quella più adatta al responsive design (per siti e app che si adattano a seconda dello schermo di smartphone, tablet e desktop).

windows-phone-8-screenshot-3.jpg

Tile e Flat Design in Windows Phone per smartphone e tablet.

 

win8-live-tiles_610x343.jpg

Tile e Flat Design in Windows 10 Desktop.

Ma non finisce qui. Così come il design scheumorfico si è evoluto in flat design, anche quest’ultimo è mutato. Parliamo del material design, opera ufficiale di Google. È con questo trailer che Google la ha introdotto durante Google I/O del 2015.

Il material design intende unire gli effetti e gli aspetti di un oggetto materiale, tattile, ispirato dallo studio di carta e inchiostro, aggiungendo soluzioni tecnologiche avanzate, fantasia e magia. Nel mondo reale gli oggetti possono essere attaccati o staccati tra loro, ma non possono attraversare gli uni negli altri. Hanno luci e delle ombre che ne trasmettono le dimensioni e lo spazio che occupano nell’ambiente. Per questo motivo il material design ripropone ogni elemento grafico con luci, ombre, movimenti e transizioni disposti sui tre assi spaziali (x, y, z). Il material design vuole essere una nuova prospettiva tra il mondo digitale e quello reale.

alarm_material_ui.gif

Un esempio di material animation design: la sveglia di Google.

In questo video Google spiega come progettare un elemento grafico che riproponga un effetto animato e tattile. Nella pagina dedicata a come progettare secondo i crismi del material design, è possibile trovare altre indicazioni. L’effetto voluto e studiato da Google è far sembrare che icone, pulsanti e interfaccia vadano verso l’utente. Così come viene spiegato nella sezione Elevation and shadows.

Come viene definito invece il material design dai designer? La risposta si trova in questo video.

Possiamo concludere che sia il flat design che il material design siano le due soluzioni più adatte per progettare interfacce utente intuitive. Queste due soluzioni risultano essere le più coerenti per progettare siti e app in responsive design. La risposta alla domanda qual è la migliore? in realtà non esiste. La scelta si basa, come sempre, su quale device si vuole rilasciare l’app (Apple, Windows, Android) e quale stile si vuole comunicare. In entrambi i casi è sempre bene seguire le GUI fornite da Google per il tattile e animato material design, oppure ispirarsi al lavoro di Microsoft ed Apple per un design flat di facile comprensione.

L'autore

Iscriviti alla newsletter

Novità, promozioni e approfondimenti per imparare sempre qualcosa di nuovo

Gli argomenti che mi interessano:
Iscrivendomi dichiaro di aver preso visione dell’Informativa fornita ai sensi dell'art. 13 e 14 del Regolamento Europeo EU 679/2016.