Resta aggiornato con le ultime news SAEP!

Schermata 2019-04-17 alle 11.47.57.png

In linea col proprio mantra “focus on the user, all the rest will follow”, Google ha creato un linguaggio visivo essenzialmente incentrato sull’utente e le sue interazioni. Si chiama Material design ed è stato ufficialmente introdotto alla conferenza Google I / O del 2014: il nome deriva dal concetto stesso di “materiale” - un qualcosa, in questo caso una sorta di “tessuto digitale” omogeneo, capace di rispondere in base all’interazione dell’utente.



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.

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 esattamente 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?
Pensiamoci: 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 poi, diventa critico nei tempi di caricamento.
Il Material Design nasce dunque per 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 del Material Design

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, sottende invece un vero e proprio 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.

1. Colori e Icone


Il colore è l’elemento più distintivo di un’applicativo, ed è percio fondamentale sia per il designer che per l’utente.
Lo scopo di un colore va decisamente oltre 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.

2. 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.

3. 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 e semplice da mantenere grazie alle color palette e variabili globali
  • Perché è pronto all'uso

  • Categorie:
  • 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, ...
Le SPA o Single Page Application sono applicazioni web fruibili come singola pagina senza necessità ...
software-gestionale.jpg#
Software Gestionale
Le soluzioni software gestionali Saep ICT e Saep Informatica nascono per soddisfare qualsiasi necessità di ...
pwa.png#
PWA: cosa sono le progressive ...
Le PWA – Progressive Web Application sono applicazioni estremamente focalizzate sull’importanza della User Experience e ...
consulenza-informatica-milano.png#
Consulenza informatica - la figura ...
La consulenza informatica, "IT Consulting" o "Business and Technology Consulting" è una forma di consulenza ...
sviluppo-ecommerce-responsive-mobile-first-indexing.jpg#
Perché avere un e-commerce responsive: ...
Se sul finire di questo 2018 qualcuno ancora stesse sottovalutando l'importanza di ottimizzare contenuti e ...
come-indicizzare-una-single-page-application.jpg#
Single page application e la ...
Le Single Page Application non vanno di pari passo con la SEO? Ni. Si possono ...
sviluppo-app-android-ios-milano.png#
Come scegliere una società di ...
Ecco alcune linee guida per aiutarti a trovare la giusta azienda di sviluppo app cui ...
quanto-costa-una-software-house.png#
Quanto costa lavorare con una ...
Probabilmente ti sei chiesto quanto costa una collaborazione con un'agenzia di sviluppo software, la cosiddetta ...
check-list-fattori-ranking-on-page.jpg#
Fattori di ranking on-page: la ...
SEO o Search Engine Optimization è il nome dato all'attività che tenta di migliorare il ...
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 ...
sviluppo-software-personalizzato.jpg#
Sviluppo software personalizzato
Il processo di sviluppo software è un'attività complessa che richiede un’attenta pianificazione, un costante controllo ...
landing-page.jpg#
Landing pages: Cos'è una Pagina ...
Nel marketing digitale, una landing page è una pagina web autonoma, creata appositamente ai fini ...
sviluppo-in-python-milano.jpg#
Sviluppo software in Python - ...
Se sei atterrato su questo articolo è perché probabilmente cerchi un team che possa supportarti ...
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 ...
continuous-delivery-sviluppo-software.jpg#
Continuous integration e continuous delivery
Continuous integration e continuous delivery: cosa sonoInnanzitutto definiamo il concetto di continuous integration o integrazione ...
sviluppo-python-django-milano.jpg#
Sviluppo Python & Django, tutti ...
Ciao Matteo, innanzitutto raccontaci almeno un po’ di te: come sei arrivato in SAEP ICT ...
sicurezza-ecommerce-milano2.jpg#
Misure di sicurezza per i ...
Misure di sicurezza per i sistemi eCommerce: cosa dice il DGPR EuropeoLe misure di sicurezza ...
app-per-offerte-commerciali.jpg#
App per la gestione delle ...
Offerte e preventivi: i parametri utili per snellire i processiCome ogni commerciale o agente di ...
sviluppo-applicazioni-angular-milano.png#
Sviluppo web application in Angular
Caratteristiche principali di AngularAngular è un framework opensource dedicato allo sviluppo di applicazioni WEB e ...
sviluppo-software-linguaggio-python.png#
Python: un linguaggio in rapida ...
Il linguaggio di programmazione Python è confermato da O'Reilly come uno degli argomenti più cercati ...