Google Material Design aggiornamenti, miglioramenti e nuovi strumenti

Parliamo di cosa c'è di nuovo, cosa è cambiato e cosa è stato migliorato nel nuovissimo Material Design di Google.

Guarda lo Screencast

 

Che cos'è Google Material Design?

Material Design è un linguaggio di progettazione visiva, sviluppato per la prima volta da Google nel 2014. Cresce dall'esigenza di avere maggiore coerenza tra i prodotti Google, multipiattaforma. Col tempo, si è evoluto, è stato rilasciato come open source e le sue idee continuano a crescere grazie a un numero enorme di collaboratori.

material.io

All'inizio di quest'anno, alla conferenza sugli sviluppatori I / O di Google 2018, hanno annunciato una versione aggiornata di Material Design. Secondo il team dietro di esso, il materiale è ora:

"Un sistema di progettazione adattabile, supportato da codice open source, che aiuta i team a creare esperienze digitali di alta qualità"

Material Design non è più solo un linguaggio di design. Si sta evolvendo in una serie di strumenti destinati a migliorare il flusso di lavoro di progettazione e sviluppo. Iniziamo guardando "Material Theming".

Presentazione del materiale Theming

"Material Theme Editor" è un plug-in per Sketch e ti dà (assumendo che tu sia un utente Sketch e quindi Mac OS) completo controllo su colori, tipografia, componenti e altro. Per scaricarlo, vai al sito Materiale e premi il pulsante principale. Fai doppio clic sul pacchetto da installare, quindi in Sketch puoi accedervi tramite Plugin> Materiale> Apri l'editor dei temi ...

Clic Crea un nuovo tema nella finestra di dialogo che si apre, dopo di che è possibile scegliere tra una selezione di temi predefiniti e premere Salvare

Selezione di un nuovo tema

Il salvataggio richiede un momento, in quanto Sketch crea essenzialmente un nuovo documento per te, popolandolo con gli asset e i componenti di Material Design, tutti disposti ordinatamente in pagine, simboli, stili e campioni.

L'ampia lista di simboli, organizzata perfettamente

Collabora e condividi con "Galleria"

Gallery è un'altra nuova funzionalità di materiale che ti consente di condividere e collaborare ai tuoi progetti. Questa è una piattaforma online a cui puoi accedere visitando https://gallery.io. Accedi utilizzando il tuo account Google:

Per aggiungere progetti alla tua Galleria, torna a Schizzo e vai a Plugin> Materiale> Carica nella galleria ...  Ti viene richiesto di selezionare un progetto o aggiungerne uno nuovo, lo stesso vale per la raccolta a cui desideri aggiungerlo. Questo è tutto! Il tuo progetto è ora disponibile per condividerlo con gli altri. I collaboratori possono lasciare commenti e persino ispezionare elementi all'interno dei progetti, dando loro l'accesso a dimensioni e dettagli senza bisogno di Sketch stessi.

Agli utenti verrà inoltre fornito un riferimento ai documenti per il componente che stanno ispezionando, ora è utile!

Facile progettazione con lo strumento Colore del materiale

Color Tool è l'offerta di Material Design per aiutarti a sperimentare combinazioni di colori e tavolozze in un ambiente intuitivo. Visita https://material.io/tools/color/ per accedervi.

Fai clic sulla tua interfaccia utente per definire un colore primario, un colore secondario e dettagli aggiuntivi come il testo sul colore principale e il testo sul secondario. Le anteprime ti danno aggiornamenti in tempo reale per mostrarti come appare.

C'è anche una scheda Accessibilità che ti avvisa di eventuali combinazioni di colori che non soddisfano le linee guida di leggibilità raccomandate.

Quando sei soddisfatto della combinazione di colori, puoi esportare su Android, iOS o sul Web (sotto forma di CodePen):

Opzioni di esportazione degli strumenti di colore del disegno materiale

Componenti nuovi di zecca

Un elenco completo di tutti i nuovi componenti che Material ha in offerta è disponibile sul sito web, ma qui ci sono una coppia che considero particolarmente interessante:

Barra delle applicazioni in basso

Questi sono usati per visualizzare la navigazione e le azioni chiave, nella parte inferiore degli schermi mobili.

fondali

Gli sfondi sono per i componenti visualizzati dietro altre superfici, utili per la visualizzazione di contenuti contestuali.

banner

Quindi abbiamo banner. Questi sono nuovi componenti che visualizzano messaggi e azioni correlate.

Elenchi di immagini

Gli elenchi di immagini sono anche una nuova aggiunta, sebbene fossero precedentemente noti come "elenchi di griglia" leggermente meno versatili.

Campi di testo

Infine, abbiamo campi di testo. Non esattamente nuovo, ma un sostituto per la generazione precedente, e ora disponibile in entrambi pieno e delineato sapori.

Conclusione

Bene, ce l'abbiamo; una rapida panoramica delle novità dell'ultima iterazione di Google Material Design. Non ha bisogno di dirlo, ma c'è molto altro da imparare e da prendere a bordo, quindi vai a dare un'occhiata, tuffati in profondità e facci sapere cosa ti colpisce di più delle novità.

link utili

  • material.io 
  • Conoscere il corso di material design su Tuts+