Oggi navigare su siti internet o app è diventato per noi quasi scontato. Milioni sono le pagine e le applicazioni che visitiamo ed usiamo tutti i giorni, ma cosa c’è dietro tutto quello che vediamo? Sicuramente una lunga ed attenta progettazione, specialmente per quanto riguarda l’interfaccia grafica che visualizziamo. Il design che ci appare non è solo un qualcosa di puramente estetico, ma è studiato per permetterci di usufruire al meglio del servizio, prodotto o semplicemente pagina che andremo a visualizzare. Il Material Design, nasce ad opera di Google ed ha come intento proprio quello di dare una maggiore definizione al concetto di progettazione delle interfacce grafiche per supporti virtuali.

Material Design: nella creazione di interfacce, l’esperienza utente è al centro di tutto

Citando Google

il Material Design è un linguaggio visivo che sintetizza i principi classici del buon design con l’innovazione della tecnologia e della scienza.

 

Leggi anche Come migliorare l’esperienza utente usando la Heatmap

 

Viene presentato nel 2014 alla conferenza Google I / O, come un design innovativo che pone l’esperienza dell’utente al centro di tutto il processo di creazione, creando un aspetto grafico in grado di risultare:

• Intuitivo
• Elegante
• Interattivo.

Inoltre, è pensato per essere utilizzato ed adattato a dispositivi di dimensioni diverse come tablet, smartphone, desktop e visualizzato da sistemi operativi come Android, iOs, Windows, fino alle piattaforme Web, mantenendo, per ogni dispositivo, tutti gli aspetti estetici tipici di questo design.

Dallo Scheumorfismo passando per il Flat design: ecco come nasce l’idea del Material design 

Fino a prima dell’avvento di questo nuovo modo di progettare le interfacce virtuali, esistevano due tipi di design, tutt’ora utilizzati: lo scheumorfismo ed il flat design.

Lo scheumorfismo è quella corrente del design che si propone di rappresentare un oggetto nella sua forma reale. Il nome deriva dal greco ed indica è un ornamento fisico o grafico apposto su un oggetto, allo scopo di richiamare le caratteristiche estetiche di un altro. Questo tipo di design era molto diffuso in passato, specialmente sui supporti Apple e puntava all’idea di familiarità. L’utente si approcciava più facilmente all’uso del digitale, in quanto vi ritrovava forme di uso quotidiano.

Lo scheumorfismo tuttavia presenta alcuni problemi, come la lentezza nella realizzazione e la poca compatibilità con i linguaggi web. Dal 2010 in poi si assiste ad un cambio di tendenza, diffuso ad opera di Microsoft, con l’avvento del Flat design. Tutto il concetto di realistico viene messo da parte, in favore di un design “piatto” (appunto flat), semplice, definito ed altamente stilizzato. Il Flat design non si pone più come imitazione della realtà, ma crea un design a sé, perfetto per i supporti digitali. Tuttavia questo tipo di design ha alcune carenze a livello di usabilità, spesso non è semplice e intuitivo per l’utente.

Ed è in questo quadro che si colloca il Material design, interpretando il ruolo di un design che risolve ed innova rispetto ai suoi predecessori.

Material Design, perché Material e perché design?

Sempre citando Google,

Material è una metafora, un bisogno di dare un senso materiale ad un design immateriale.

Come abbiamo già visto, la problematica del flat è appunto l’usabilità, in quanto un design troppo “piatto” non riesce a farsi comprendere perfettamente dall’utente. Ed è qui che nasce la sfida di Google, con il suo nuovo design, ispirato al mondo fisico, con superfici che riflettono la luce e le ombre e si comportano in modo dinamico. Il materiale, in questo caso, è un tessuto digitale che risponde in base a come interagisce con l’utente.

Alla base della filosofia del Material vi è l’esperienza tattile, infatti è pensato principalmente per essere usato su tutti quegli applicativi touch nel modo più fluido e semplice possibile. Ombre, spigoli, dimensioni e soprattutto la dinamicità contribuiscono a rendere l’esperienza dell’utente ancora più realistica.

 Leggi anche Fare una App: le 10 regole d’oro per creare una interfaccia utente efficace

 

Le 6 caratteristiche del Material design

Numerosi sono i tratti distintivi scelti da Google per rappresentare l’interfaccia grafica del Material design. Scelte assolutamente non casuali, ma frutto di un lungo ed attento studio, rivolto all’usabilità e all’adattabilità. Inoltre, fornisce tutti gli standard di progettazione specifici per lo sviluppo di applicazioni su dispositivi Android, Web e iOs.

1) Il Colore, ovvero la Google color palette

Il Material dedica ampio spazio alla scelta del colore, proponendo una vastissima gamma di scelte, in particolar modo vengono fornite delle palette con varie gamme cromatiche, per distinguere al meglio gli elementi UI e le varie parti dell’interfaccia. E’ possibile scegliere fra sfumature di un solo colore primario o mettere in contrasto un colore primario ed uno secondario. In base a ciò vengono poi definiti i colori per superfici, sfondi e messaggi di errore. Tutto il processo di scelta è assistito attraverso un apposito generatore di colori che permette di creare la combinazione adatta in base a ciò che più preferiamo.

 

2) Le Icone, ovvero gli elementi base dell’usabilità app e web

Le icone sono ormai parte del linguaggio del web, sono universalmente comprensibili e ci aiutano a riconoscere le funzioni senza l’utilizzo di parole. Sono elementi base per quanto riguarda l’usabilità di un’applicazione o di un sito web. Il Material design considera due tipi di icone:

• Icone “Product”, con dimensioni di 48 dp che comunicano l’idea alla base del prodotto e che rappresentano l’applicazione stessa
• Icone di sistema, con dimensione 28dp, che, invece, individuano i comandi e le azioni possibili, all’interno dell’applicazione. Numerose sono le linee guida che riguardano l’uso e la creazione di queste icone, anche per quanto riguarda il colore e la forma.

 

3) La Tipografia: non solo esigenza stilistica

Il testo è un elemento grafico fondamentale ed il Material non lascia nulla al caso, nemmeno per quanto riguarda la tipografia. Il testo è essenziale, soprattutto per il posizionamento sui motori di ricerca e la scelta della Font non soddisfa solo un’esigenza stilistica, ma anche di immediatezza e leggibilità. Roboto e Noto sono i caratteri scelti da Google e, la progettazione Material, indica linee guida chiare per gestire la scrittura di tutte le parti dell’interfaccia utente.

 

5) Il Layout che migliora la coerenza tra gli ambienti

Il layout nel Material design utilizza strumenti come griglie di base e modelli strutturali per migliorare la coerenza tra gli ambienti. Questi layout sono in grado di adattarsi alle varie dimensioni dei supporti su cui sono visualizzati in modo da creare un design completamente responsivo.

Infatti attraverso l’uso di colonne, spazi e margini, che si adattano in base ai vari “breakpoint”, vengono definite le dimensioni dei singoli supporti come tablet, smartphone o desktop ed è possibile creare un design dinamico in grado di adattarsi ad ogni device, mantenendo le caratteristiche di usabilità, anche attraverso la trasformazione degli elementi che lo compongono.

 

Insomma, il Material design è un vero e proprio metodo di progettazione che ogni User designer dovrebbe praticare

Indubbiamente il Material design ha posto le basi per la creazione di un modo di disegnare e progettare tipico dei prodotti destinati al web, considerando tutta una serie di aspetti che fino ad ora non erano stati considerati ufficialmente e cercando di colmare tantissime lacune, creando un vero e proprio metodo di progettazione.

Sicuramente oggi è un grandissimo riferimento per tutti i designer che si approcciano all’User Interface, in quanto offre numerosissimi spunti, raccogliendo tutta una serie di principi ed informazioni che un User designer non dovrebbe mai trascurare.

Guest post a cura di Giorgia di Serafino