Probabilmente continui a sentire la frase "material design"? spuntando nelle conversazioni. Il concetto è abbastanza nuovo; è stato introdotto in estate e fa riferimento a un nuovo linguaggio di progettazione da parte di quelli di Google.
Ma il material design è più di una semplice idea; è probabile che induca i progettisti a ripensare completamente i processi di progettazione Web e delle app. I siti stanno già iniziando a delineare schemi di progettazione utilizzando la documentazione di progettazione materiale di Google. Quindi ora è il momento di imparare di cosa si tratta e se un framework di progettazione dei materiali è nel tuo futuro.
Cos'è il Material Design?
Il material design è un linguaggio visivo creato dal team di progettazione di Google per aiutare i designer a creare siti Web e app accessibili, pratici e utilizzabili. Il concetto si basa su un documento vivente che è pubblicamente disponibile. La documentazione viene costantemente aggiornata per riflettere i cambiamenti di ambito e tecnologia.
La progettazione dei materiali si basa su una serie di obiettivi e principi che sono più facili da pensare che da realizzare. (Ma va bene, l'idea è di pensare di più al design e di come migliorarlo.)
Obiettivi di progettazione materiale:
- Crea un linguaggio visivo che sintetizzi i principi classici del buon design con l'innovazione e le possibilità della tecnologia e della scienza.
- Sviluppa un singolo sistema sottostante che consente un'esperienza unificata su piattaforme e dimensioni dei dispositivi. I precetti mobili sono fondamentali, ma touch, voce, mouse e tastiera sono tutti metodi di input di prima classe.
Principi di progettazione dei materiali:
- Il materiale è la metafora: i segnali visivi dovrebbero essere radicati nella realtà
- Grassetto, grafico, intenzionale: la teoria del design di base (uso di tipo, griglie, spazio, scala, colore e immagini) dovrebbe guidare la visualizzazione
- Il movimento fornisce un significato: lo spostamento di oggetti o azioni non dovrebbe interrompere l'esperienza dell'utente e fornire coerenza
I fattori guida per la progettazione dei materiali sono molti. (La documentazione è abbastanza impressionante). Si scompone in una varietà di concetti e trattamenti specifici. Google ha messo a punto un insieme di? Regole? per come creare animazione, stile, layout, componenti, modelli e usabilità.
Tutte queste linee guida iniziano con la comprensione delle proprietà fisiche di base, di trasformazione e di movimento del design dei materiali. La teoria guida è che il materiale è basato sulla realtà, dove gli oggetti risiedono in uno spazio quasi 3D. In termini estetici, rientra tra la scala del design piatto e dello skeoumorphism.
Colore e tipografia
I concetti di colore del design dei materiali prendono in prestito un po 'dalla tendenza del design piatto. Le tavolozze sono audaci e luminose. La tipografia segue anche il tema piatto con semplici sans serif.
? Il colore è ispirato da affermazioni di colori audaci giustapposte ad ambienti tenui, che prendono spunti dall'architettura contemporanea, segnali stradali, nastro per la pavimentazione e campi sportivi? in base alla documentazione di progettazione del materiale. ? Enfatizza le ombre e le luci in grassetto. Introduci colori inaspettati e vibranti.?
La cosa bella dei concetti di colore è l'uso di un contrasto distinto. In ogni esempio, puoi vedere? Design School 101? teorie in azione. Google fornisce una tavolozza di colori completa con campioni scaricabili. I concetti di colore sono così basilari da chiedersi se Google pensi che i progettisti abbiano dimenticato la teoria dei colori.
Le linee guida tipografiche sono ugualmente di base. Un carattere predefinito per tutte le applicazioni - Roboto, l'impostazione predefinita per le applicazioni Android - viene fornito con un collegamento per il download e una scala per l'utilizzo dei font.
Layout e design
Il layout di base e la struttura di progettazione dei progetti di materiale nasce da concetti di design di stampa. I progettisti sono incoraggiati a creare e utilizzare una griglia di riferimento e una struttura matematica per il posizionamento di elementi.
Il layout si suddivide ulteriormente in regioni che suggeriscono come e dove posizionare gli elementi per l'interazione dell'utente ottimale. (Ci sono anche linee guida per quanto dovrebbero essere grandi gli elementi).
E ogni concetto ha un modello scaricabile per la creazione per Android. I rischi si stanno concludendo con un design troppo cookie-cutter o con un'app che sembra? Troppo-Android? spinto fuori per chi ama iOS.
Elementi comuni
Ogni elemento nella progettazione dei materiali è descritto in dettaglio. Da come crearlo a dove dovrebbe apparire sullo schermo, sarebbe difficile visualizzare qualcosa che non è qui. (L'elenco include 19 componenti per l'esattezza.)
- Fogli inferiori
- pulsanti
- Carte
- Patatine fritte
- Finestre di dialogo
- divisori
- griglie
- elenchi
- Elenco dei controlli
- menu
- Pickers
- Progresso e attività
- Sliders
- Snackbars e brindisi
- sottointestazioni
- Interruttori
- Tabs
- Campi di testo
- Tooltips
I designer che amano l'aspetto dei componenti in primo piano possono persino scaricare un file Adobe Photoshop di Illustrator contenente tutti gli elementi e le icone di sistema Android. I fogli adesivi sono completi di stili e aderiscono alla griglia suggerita.
Usabilità e interazione
"Un prodotto è accessibile quando tutte le persone, indipendentemente dalle abilità, possono spostarlo, comprenderlo e usarlo per raggiungere i propri obiettivi. Un prodotto di successo è accessibile al pubblico più vasto possibile.La documentazione sulla progettazione dei materiali ci apre gli occhi su schemi di interazione, usabilità e problemi di accessibilità in un modo abbastanza utile. Mentre molte delle proprietà estetiche attuali possono sembrare fondamentali per i progettisti esperti, alcuni dei concetti di usabilità e interazione sono cose che devono essere prese in considerazione.
La sezione dei modelli di interazione è particolarmente utile. Descrive dettagliatamente una serie di idee per rendere alcuni elementi universali attraverso i progetti. (Pensa a cose come scrivere un orario o una data o come dovrebbe funzionare la ricerca.) Questi sono alcuni degli strumenti più basilari che gli utenti si aspettano di lavorare e che funzionino in un modo specifico per tutti gli utenti è un vantaggio decisivo.
L'accessibilità è un'altra preoccupazione reale e quella che la documentazione relativa alla progettazione dei materiali ha delineato e ha fornito buone opzioni. Pensare agli utenti che potrebbero interagire con un web design in un modo che non include suono o colore, con alto contrasto attivato, con uno schermo ingrandito, senza uno schermo visibile o con il solo controllo vocale o persino una combinazione di questi elementi può tener conto una popolazione di utenti significativa.
10 risorse per la progettazione dei materiali
Il design dei materiali sta spuntando ovunque. Ci sono molte cose da scaricare direttamente da Google, ma altri stanno sviluppando modi per usarlo. Ecco alcune risorse per aiutarti a esplorare i concetti di design dei materiali.
- Modelli di layout di Google per strutture mobili, tablet e desktop
- Design del materiale per Bootstrap
- Angular.js Material Project
- Designer di polimeri
- Materializzare il framework front-end
- Tavolozza dei colori materiale
- Interazione materiale
- Design dei materiali sulla lista di controllo di Android
- Modello di schizzo di design materiale
- Kit UI materiale gratuito
Galleria di progettazione materiale
Come in ogni tendenza e concetto, ci sono molti siti Web e app mobili che utilizzano già i concetti delineati nel design dei materiali. Ecco cinque esempi che illustrano i principi e il modo in cui i designer possono lavorare e sperimentare con i concetti.
Runtastic Running and Fitness
Impostazioni di Google
Male coniglio
Cronologia del tempo
Conclusione
Il concetto di design dei materiali è buono. Le linee guida sono pulite e fresche. Ma i designer più esperti probabilmente non hanno bisogno di questo livello di guida. All'interno della documentazione, quasi ogni idea include un cheat scaricabile. Abbiamo veramente bisogno di tanto aiuto?
La documentazione è divertente da leggere, ti fa pensare ed è un'anteprima di cose che presto invaderanno il web. Gioca con i concetti, ma non sentirti sposato con loro. Il design, soprattutto quando si tratta di tendenze e tecnologia, sta cambiando velocemente come possiamo immaginare.
Come ogni altra tendenza, struttura o concetto di design, devi decidere da solo se i concetti sono utilizzabili nei tuoi progetti. Ti vedi usando il material design? Perché o perché no? Fateci sapere nei commenti.