Resta aggiornato con le ultime news SAEP!

Schermata 2019-04-17 alle 11.47.57.png

Cos’è il Materiale Design

Il Material Design è uno stile, un codice, un linguaggio di design sviluppato da Google supportato nativamente a partire da Android 5.0.

Il Google material design è in qualche modo anche un linguaggio, che al posto di grammatica e sintassi utilizza transizioni, padding, effetti di profondità, tipografie tipiche: si tratta infatti di un sistema completo di design, studiato per fornire standard e risorse univoche per lo sviluppo multi-dispositivo (desktop, tablet o smartphone).

Il suo scopo è proprio quello di fornire gli standard di progettazione specifici per lo sviluppo di applicazioni su dispositivi Android, Web e iOS.

La metafora del material design

Abbiamo accennato alla metafora sottesa al nome stesso del “material design”: un vero e proprio “materiale” digitale, basato su una realtà tattile, connessa con il senso dello spazio, con il tatto, ispirato allo studio della carta e dell'inchiostro ma -rispetto alle gabbie fisiche di carta e inchiostro- più aperto e creativo nel comportamento e nelle reazioni all’interazione.
A differenza della carta reale, il “material” può essere diviso, riorganizzato e spostato se necessario.
Ma come la carta, al momento dell'interazione, del tocco dell’utente, è in grado di offrire un'esperienza più realistica.

Attributi come ombre e spigoli forniscono spunti visivi. L'uso di attributi tattili familiari al cervello umano (indizi su come l'oggetto deve essere usato), aiuta gli utenti a comprendere rapidamente e intuitivamente le possibilità dell’oggetto.

Le ragioni del Material Design

Perché Google ha sentito la necessità d’introdurre il material design?
Voglio dire: c’era già il flat design, l’approccio skeuomorfico. Perché introdurre un altro paradigma, per quale vantaggio?
Google risponde piuttosto chiaramente: il flat design? Bello, minimal - forse troppo.
Le interazioni sono limitate, quasi inesistenti le animazioni. Lo skeuomorfismo diventa critico nei tempi di caricamento.

Il Material Design vuole superare questi limiti: offrire palette di colori ampie, maggior varietà di iconografie e forme, spunti visivi più complessi, animati, interattivi al tatto.

Le caratteristiche base: tipografia, elementi, animazione

Veniamo ora ai dettagli. Che soluzioni ci propone, in pratica, il Material Design?

Gli elementi di la tipografia, le tabelle, l’uso degli spazi, le scale di colore sono progettate per creare gerarchia, attribuire significati, focalizzare l’attenzione.
La qualità dell’esperienza utente aumenta grazie alle scelte di colore, delle immagini end to end e dello spazio bianco intenzionale.

Il movimento, l’animazione, non è casuale, bensì sottende un significato: è anzi forse la parte migliore del design finale, in quanto non interrompe in alcun modo l'esperienza dell'utente, ma la semplifica rendendola intuitiva, scorrevole.
L'animazione gioca il ruolo fondamentale di mettere l’utente al centro, farlo sentire motore principale dell’azione mentre si muove nell’applicazione, avviandone le azioni.
Grazie al movimento ed al conseguente feedback visivo, l’utente si sente realmente connesso a ciò che ha fatto, prende coscienza dell’intenzionalità della sua azione.

Oltre ai componenti dell'interfaccia utente, l’approccio “material” offre anche molti modelli per migliorare l'interfaccia utente: pattern che migliorano l'interfaccia utente creata con i componenti base.
Alcuni modelli disponibili includono menu di navigazione, check di conferme/riconoscimento, schermate di avvio, effetti di scorrimento, ricerca, impostazioni, caricamento delle immagini, scorrimenti.

Material design: colori e icone


Il colore è l’elemento più distintivo di un’applicativo, ed è percio fondamentale sia per il designer che epr l’utente. Lo scopo di un colore va decisamente olire il “rendere gradevole l'aspetto dell'applicazione”.
I colori hanno una loro semantica, che il buon designer conosce e tiene a mente, e possono aiutare l’utente nella navigazione funzionale, oltre che nel gradimento estetico o nel riconoscimento di un marchio.
Il material design mette a disposizione una collezione di colori e relative palette che possono essere utilizzati all’interno dell'interfaccia utente.


Le icone sono diventate uno strumento di comunicazione universale: ormai presenti ovunque, ci aiutano a riconoscere il prodotto con "emoji" anziché con parole.
Utilizzate correttamente, miglioreranno l'usabilità ed il design dell’applicazione.
Il material design classifica le icone come due set:

  • Icone-prodotto: semplici e amichevoli, talvolta audaci. Comunicano l'idea-base e l'intento del prodotto. 48 dp di grandezza.
  • Icone di sistema: rappresentano un comando, file, dispositivo, directory e/o azioni base e trasversali. 24 dp di grnadezza.

Material design: scrittura e tipografia


È difficile immaginare un mondo senza testi.
Un testo conciso, leggibile e gerarchico rende l'interfaccia utente più navigabile, la lettura scorrevole, per campi. Sappiamo poi il ruolo centrale che i testi giocano nella SEO, essendo di fatto gli unici dati che possiamo dire con certezza che i motori di ricerca sono in grado d’interpretare.
Roboto e Noto sono i caratteri tipografici standard su Android e Chrome, progettati e sviluppati per gestire l'utilizzo multipiattaforma e la loro traduzione in diversi contenti di layout tipografico (full width, colonne, etichette, bottoni, tag e chi più ne ha più ne metta).

La progettazione material non manca di fornire linee guida precise per gestire la scrittura dei diversi elementi dell'interfaccia utente.

Componenti e layout

Il layout “material” si basa sui principi del design a stampa.
Ne utilizza alcuni strumenti come griglie di base e modelli strutturali per migliorare la coerenza tra gli ambienti. Questi layout sono in grado di creare app scalabili che possono adattarsi a qualsiasi dimensione dello schermo.

Tra i componenti base previsti dal material design:

  • Barra di navigazione in basso: semplifica il passaggio tra l'app delle visualizzazioni di primo livello con un solo tocco
  • Bottom sheets: Scivolano dal basso per rivelare più contenuto .
  • Pulsanti: i pulsanti comunicano l'azione che si verificherà dopo che l'utente lo ha toccato. Sono disponibili due serie di pulsanti nel Material design, uno flat e l'altro in rilievo.
  • Cards: sono “punti d’ingresso” per ulteriori informazioni.
  • Chips: contengono oggetti complessi in piccoli blocchi
  • Finestre di dialogo: contengono informazioni specifiche sull'attività da eseguire.
  • Dividers: è una “regola” verticale che raggruppa il contenuto in layout di pagina o elenco.
  • Finestre espandibili: consentono di modificare il contenuto. Possono essere indipendenti o in combinazione con altre cards.
  • Elenchi: strutturano il contenuto per riga e sono una ripetizione in colonna di ciascuna riga. Possono essere solo testo o testo + immagine + testi aggiuntivi.
  • Menu: emergono dai pulsanti che vengono utilizzati per scegliere l'azione o l'opzione
  • Progress bar: danno l'indicazione visiva e progressiva quando l'app sta caricando un contenuto
  • Cursori: consentono di selezionare il valore dall'intervallo di valori spostando il pollice del dispositivo di scorrimento.
  • Snack bar e Toast: forniscono feedback sotto forma di messaggio dopo l'esecuzione dell'operazione.
    Il riscontro può essere positivo o negativo.
  • Schede: consentono di passare da una vista all'altra. A elenco, raggrupate.
  • Tooltip: i tooltip sono etichette di testo che appaiono quando l'utente si posiziona su determinati elementi.

I vantaggi del Material Design

I vantaggi del Material Design? Perché abbiamo deciso di sfruttarlo nella progettazione di applicazioni web e mobile?

  • Perché fornisce linee guida stabili e minimali
  • Perché è strutturato in svariati componenti che danno gradevolezza grafica e coerenza a cui attingere
  • Perché è facile da integrare, mantenere grazie alle color palette e variabili globali
  • Perché è pronto all'uso

  • Categories:
  • Sviluppo WEB

Articoli correlati

sviluppo-single-page-application-milano.png__800x450_q85_crop_subject_location-800,495_subsampling-2.jpg#
Single Page Application: cosa sono, come funzionano e vantaggi
Le SPA o Single Page Application sono applicazioni web fruibili come singola pagina senza necessità di caricamento per pagine: scopriamone ...
software-gestionale.jpg#
Software Gestionale
Le soluzioni software gestionali Saep ICT e Saep Informatica nascono per soddisfare qualsiasi necessità di gestione aziendale: sommano l'esperienza di ...
pwa.png#
PWA: cosa sono le progressive web apps
Le PWA – Progressive Web Application sono applicazioni estremamente focalizzate sull’importanza della User Experience e che si distinguono per ben ...
consulenza-informatica-milano.png#
Cosa fa un Consulente IT nel 2019
La consulenza informatica: "IT Consulting" o "Business and Technology Consulting" è una forma di consulenza che consiste nella prestazione professionale, ...
sviluppo-ecommerce-responsive-mobile-first-indexing.jpg#
Perché avere un e-commerce responsive: il Mobile First Indexing
Se sul finire di questo 2018 qualcuno ancora stesse sottovalutando l'importanza di ottimizzare contenuti e servizi per la navigazione da ...
Consulenza SEO Milano#
Consulenza SEO a Milano
Che voi abbiate un sito aziendale o un'e-commerce da promuovere e rilanciare, probabilmente avete già sentito parlare del termine SEO ...
come-indicizzare-una-single-page-application.jpg#
Sviluppare applicazioni SPA compatibili con l’ottimizzazione SEO.
Le Single Page Application non vanno di pari passo con la SEO? Ni. Si possono sviluppare buone applicazioni SPA strizzando ...
sviluppo-app-android-ios-milano.png#
Come scegliere una società di sviluppo app
Ecco alcune linee guida per aiutarti a trovare la giusta azienda di sviluppo app cui affidarti per trasformare la tua ...
quanto-costa-una-software-house.png#
Quanto costa lavorare con una software house
Probabilmente ti sei chiesto quanto costa una collaborazione con un'agenzia di sviluppo software, la cosiddetta software house.La creazione di soluzioni ...
check-list-fattori-ranking-on-page.jpg#
Fattori di ranking on-page: la checklist
SEO o Search Engine Optimization è il nome dato all'attività che tenta di migliorare il posizionamento di un sito web ...
significato-acronimo-ict.png#
ICT significato e definizione
Ti sarà capitato di chiederti cosa significhi ICT, l'acronimo che identifica l'attività di molte aziende e software house che lavorano ...
sviluppo-software-personalizzato.jpg#
Sviluppo software personalizzato
Il processo di sviluppo software è un'attività complessa che richiede un’attenta pianificazione, un costante controllo e una documentazione specifica e ...
landing-page.jpg#
Landing pages: Cos'è una Pagina di Destinazione
Nel marketing digitale, una landing page è una pagina web autonoma, creata appositamente ai fini di una campagna pubblicitaria o ...
sviluppo-in-python-milano.jpg#
Sviluppo software in Python - perché ci piace.
Cerchi un team che possa supportarti nello sviluppo di software in Python? Sviluppiamo applicazioni WEB di tipo Enterprise in Python ...
dns_pubblico_di_google.png#
DNS Google pubblico diventa 8.8.8.8
Google Public DNS è un servizio gratuito offerto agli utenti Internet di tutto il mondo da Google. Il DNS Google ...
continuous-delivery-sviluppo-software.jpg#
Continuous delivery: uno standard di qualità dello sviluppo software
Continuous integration e continuous delivery: cosa sonoInnanzitutto definiamo il concetto di continuous integration o integrazione continua.Un esempio pratico?Quando sviluppiamo un ...
sviluppo-python-django-milano.jpg#
Sviluppo Python & Django, tutti i vantaggi: a tu per tu con chi programma
Ciao Matteo, innanzitutto raccontaci almeno un po’ di te: come sei arrivato in SAEP ICT e che tipo di percorso ...
sicurezza-ecommerce-milano2.jpg#
Sicurezza nell’eCommerce: principali rischi e come difendersi (parte 2)
Misure di sicurezza per i sistemi eCommerce: cosa dice il DGPR EuropeoLe misure di sicurezza nell’ambito di sistemi di eCommerce ...
app-per-offerte-commerciali.jpg#
App per la gestione delle offerte commerciali
Offerte e preventivi: i parametri utili per snellire i processiCome ogni commerciale o agente di commercio sa, la creazione dell’offerta ...
sicurezza-ecommerce-milano.jpg#
La sicurezza nell’eCommerce: tecniche e strumenti per tutelarsi
Controlli e verifiche periodiche: giocare d’anticipoControlli periodici consentono di agire tempestivamente, di anticipare eventuali attacchi, di scoprire eventuali falli e ...
sviluppo-applicazioni-angular-milano.png#
Sviluppo web application in Angular: tutti i vantaggi
Caratteristiche principali di AngularAngular è un framework opensource dedicato allo sviluppo di applicazioni WEB e sviluppato principalmente da Google. Dire ...