Il Material Design

Conosciamo il design realizzato dal colosso Google.

Di cosa parliamo?

Oltre ad occuparmi dello sviluppo back-end e front-end di progetti web, realizzo applicazioni mobile per il mondo di Android; per tanto mi è sembrato doveroso illustrare di cosa stiamo parlando quando dico Material Design. Quest'ultimo è un sistema adattivo di linee guide, componenti e strumenti che entrano in gioco con l'intento di "modernizzare" il design, quindi l'interfaccia grafica, di una determinata applicazione. Come già sottolineato, è stato sviluppato da Google nel non tanto lontano 25 Giugno 2014, in occasione del Google I/O.

Dopo questa breve premessa entriamo subito nel vivo dell'articolo, andando ad elencare tutte le funzionalità di questo design in costante miglioramento e sviluppo.

  • Toolbar inferiore e superiore:

  • Una semplice ma potente barra posta al fondo (o in cima) all'applicazione che consente di immagazzinare e gestire la navigazione e le funzionalità dell'app.


  • Pulsanti di navigazione:

  • Questo è un componente tanto utile quanto ormai noto a tutti, dato che moltissimi sviluppatori si affidano a questa interfaccia per ottimizzare al meglio l'applicazione mobile. In poche parole questa barra permette di spostarsi in maniera intuitiva ed agevole tra una schermata e l'altra.


  • Pulsanti:

  • Argomento semplice quanto estremamente importante, difatti non c'è bisogno di dire che i pulsanti, che ormai conosciamo benissimo, stanno alla base di qualsiasi cosa. Il Material Design però ci permette di realizzarli con un certo stile, come è possibile vedere in figura.


  • "Pulsanti galleggianti":

  • Traducendo si chiamerebbero in questo modo ma sarebbe più convenievole chiamarli con il loro nome nativo ovvero Floating action button. A mio avviso è il componente che rappresenta maggiormente il Material Design. Si sta parlando nuovamente di un pulsante, ma si differenzia da tutti gli altri perchè tendenzialmente è di forma sferica, di colore contrastante rispetto a tutta la schermata e che ha appunto lo scopo di attirare l'attenzione dell'utente.


  • Cards:

  • Questo è un componente che risulta particolamente importante nella gestione e nella predisposizione del layout dell'applicazione, illustrando in maniera pratica i contenuti e le azioni di un determinato "argomento". Una immagine vale più di mille parole.


  • Chips:

  • Questi sono elementi compatti che rappresentano esaustivamente un input, un attributo od una azione. Per intenderci, la chip nella figura sottostante è lo stile grafico che viene attribuito a "Peyton Smith".


  • Dialogs:

  • Chi non si è mai imbattuto nei dialogs? Questi informano l'utente riguardo un'azione che hanno intrapreso e contengono informazioni importanti, scelte da stabilire e passaggi da eseguire per adempiere ad un determinato scopo.


  • Liste:

  • Le liste sono una caratteristica fondamentale per ogni applicazione che si rispetti e vengono adoperate per garantire una intuitiva comprensione e navigabilità dell'app stessa.


  • Menù:

  • I menù, per quanto possono essere simili al componente citato subito sopra, le liste, si differenziano dal fatto che ogni voce contiene altre voci al suo interno, come è possibile vedere in figura.


  • Data pickers:

  • Semplicemente si parla di una funzionalità che permette di selezionare una data o un'insieme di date.


  • Checkboxes:

  • C'è poco da dire a riguardo, le checkboxes permettono all'utente di scegliere una (o più) determinata opzione oppure di espanderne una per visualizzarne altre più specifiche.


  • Radioboxes:

  • Molto simili alle checboxes, questi permettono all'utente di scegliere una singola opzione da un elenco.


  • Switches:

  • Componente famoso e piacevolmente estetico, permette all'utente di abilitare o disabilitare una determinata opzione da un elenco, usualmente per gestire le impostazioni generiche.


  • Sheets:

  • Stiamo parlando di menù con contenuto supplementare riferito ad un particolare argomento, al fine di fornire più dettagli e azioni possibili.


  • Sliders:

  • Gli sliders permettono all'utente di selezionare un valore da un determinato range.


  • Snackbars:

  • Gli snackbars provvedono a comunicare brevi messaggi riguardo l'esito di un'eventuale processo determinato dall'utente.


  • Tabs:

  • Questo è un componente visto e rivisto proprio perchè permette di organizzare al meglio tutti i contenuti al fine di rendere l'app veloce, semplice ed intuitiva.


  • Text fields:

  • I campi di testo, come ormai è ben noto, permettono all'utente di inserire del testo (o password, numeri, date e così via...). Tuttavia, con il Material Design, c'è una sottile ma "simpatica" differenza, come si può vedere in figura: il placeholder, ovvero la descrizione del campo di testo, anzichè scomparire del tutto quando l'utente ci clicca sopra, si sposta leggermente, andando a posizionarsi sopra il campo di testo stesso.


  • Time pickers:

  • I time pickers permettono all'utente di di selezionare e settare una specifica ora.


  • Tooltips:

  • I tooltips illustrano del testo aggiuntivo quando l'utente passa sopra (o clicca) su un determinato elemento.


  • Indicatori di progresso:

  • Gli indicatori di progresso indicano un tempo di attesa o informano sulla lunghezza di un processo.


  • Tabelle:

  • Le tabelle mostrano una serie di informazioni suddivise in righe e colonne.


  • Banners:

  • I banners hanno il compito di mostrare un messaggio immediato e azioni da intraprendere relative all'attività eseguita.


  • Backdrop:

  • Il backdrop è una schermata "parzialmente nascosta" che viene mostrata appena l'utente intraprende una determinata azione.


  • Navigation rail:

  • Questo componente è un menù di navigazione laterale che comprende da 3 a 7 destinazioni e, opzionalmente un floating action button.


  • Navigation drawer:

  • Il navigation drawer è un componente molto potente che permette una veloce navigazione tra più destinazioni presenti nell'applicazione.

Ed è solo l'inizio

Onde evitare di rendere l'articolo eccessivamente lungo ho deciso di fermarmi qui. Abbiamo visto i componenti che caratterizzano il Material Design di Google, pur sapendo che si tratta di pura teoria e che infatti ogni componente appena visto può essere naturalmente personalizzato sia dal punto di vista di design che di performance. Inoltre ci sono ancora un mondo di informazioni aggiuntive da analizzare dal punto di vista del design che non tarderò a pubblicare. Tuttavia vi invito vivamente a consultarle visitando Material.io, qualora vogliate anticipare i tempi.
Rimanete sintonizzati!

A presto, GG-CREATOR.


« Articolo successivo:
Come nacque il primo sito web?
» Articolo precedente:
Il CMS Wordpress