COS'È IL MATERIAL DESIGN?
introduzione al material design
introduzione al material design
Oggi vi parleremo del Material Design figlio del Flat che come ci spiega Google: "è un linguaggio visivo che sintetizza i principi classici di buon design con l’innovazione e le possibilità della scienza"; che vediamo per la prima volta nel nuovo sistema operativo Android L.
INTRODUZIONE
Il materiale è la metafora
Una metafora materiale è la teoria unificante di uno spazio razionalizzato e un sistema di movimento. Il materiale è fondato in realtà tattile, ispirato dallo studio di carta e inchiostro, ma tecnologicamente avanzato e aperto alla fantasia e magia.
Superfici e bordi del materiale forniscono indicazioni visive che sono radicate nella realtà. L'uso di attributi tattili familiari aiuta gli utenti a comprendere rapidamente l'affordance. Eppure la flessibilità del materiale crea nuove affordance che sostituiscono quelli del mondo fisico, senza rompere le regole della fisica.
I fondamenti di luce, superficie, e movimento sono la chiave per trasmettere come si muovono, interagiscono, ed esistono nello spazio e in relazione reciproca. Illuminazione realistica, mostra cuciture, divide lo spazio, e indica parti in movimento.
Grassetto, grafica, intenzionale
Gli elementi fondamentali del design tipografico basato sulla stampa, le griglie, lo spazio, la scala, il colore, e l'uso di immagini guida atte ai trattamenti visivi. Questi elementi fanno molto di più che il semplice piacere degli occhi. Creano gerarchia, significato, e messa a fuoco. Scelte di colore intenzionale, tipografia su larga scala, e spazio bianco (intenzionale) creano un' interfaccia grafica audace e che immerge l'utente in questa esperienza.
Movimento fornisce significato
Il movimento rispetta e raffonza l'utente come se fosse il motore primo. Le azioni primarie dell'utente sono un punto di svolta per compiere quel movimento che trasforma l'intero design. Tutte le azione hanno luogo in un singolo ambiente. Gli oggetti vengono presentati all'utente senza rompere la continuità dell'esperienza anche quando si trasformano e si riorganizzano. Il movimento è significativo e appropriato, e serve a focalizzare l'attenzione e mantenere la continuità. Il feedback è sottile ma chiaro. Le transizioni sono sia efficienti sia coerenti.
COS’è IL MATERIAL DESIGN?
Le proprietà del material design
Questo tipo di design ha determinate caratteristiche immutabili e comportamenti inerenti. Comprendere queste qualità vi aiuterà a manipolare il materiale in un modo che è coerente con la visione del material design.
Luci e ombre
All’interno dell’ambiente materiale, le luci virtuali illuminano la scena e permettono agli oggetti di proiettare ombre. Una luce “chiave” crea un’ombra direzionale, mentre una luce ambientale crea ombre coerenti, morbide, da tutte le angolazioni. Tutte le ombre nell’ambiente sono formate da queste due fonti di luce.
Proprietà fisiche
Gli elementi variano sull’asse x e y (misurata in dps) e uno spessore uniforme (1DP) e non hanno mai uno spessore di 0, quindi proiettano ombre. Le ombre derivano naturalmente dalla elevazione relativa (posizione-z) tra elementi.
Il contenuto viene visualizzato sugli elementi, in qualsiasi forma e colore, senza aggiungere spessore agli elementi.
Il comportamento del contenuto può essere indipendente dal comportamento dell’elemento. Tuttavia, i limiti dell’elemento possono limitare la visualizzazione del contenuto. Gli elementi sono solidi. Gli elementi multipli non possono occupare lo stesso punto dello spazio simultaneamente e nemmeno passare attraverso un altro elemento.
Gli elementi si trasformano
Gli elementi possono cambiare forma, crescere e restringersi solo lungo il loro piano; non si piegano in due e non subiscono pieghe.
Vari fogli possono unirsi per diventare un unico foglio.
Quando si dividono, i vari elementi possono ri-unificarsi.
Se si rimuove una porzione da un foglio, il foglio potrà diventere nuovamente un foglio intero.
L’elevazione è il valore relativo tra gli oggetti principali e secondari. L’elevazione è tipicamente misurata nelle stesse unità come le assi x e y, quindi in densità pixel indipendenti (DPS). Poiché il material design ha uno spessore 1DP, le distanze elevazione sono misurate da una superficie superiore ad un'altra superficie superiore.
Tutti gli oggetti materiali hanno una elevazione d'origine, sia se l'oggetto è un piccolo componente sia un foglio che copre l'intero display.
Nello stato statico, l'elevazione d'origine per un oggetto non cambia. Se un oggetto cambia elevazione, deve tornare alla sua altezza d'origine non appena possibile. Tuttavia, lo stesso tipo di componente può avere differenti altezze di appoggio da una piattaforma all'altra a seconda della profondità dell'ambiente (ad esempio, la TV ha una profondità maggiore rispetto il mobile o il desktop).
Ombre funzionali
Le ombre forniscono alcune importanti indicazioni visive circa la disposizione degli oggetti nello spazio. Le ombre sono l'unica affordance visiva che indica la quantità di separazione tra le superfici. L'elevazione di un oggetto determina l'aspetto visivo della sua ombra. In movimento, le ombre forniscono anche spunti circa la direzione dell'oggetto stesso. Questo è un altro strumento utile per indicare se la distanza tra le superfici sta aumentando o diminuendo.
ANIMAZIONE
Animazioni Autentiche
Percepire la forma tangibile di un oggetto ci aiuta a capire come esso può essere manipolato. Osservando il movimento di un oggetto ci dice se è leggero o pesante, flessibile o rigido, piccolo o grande. Il movimento nel mondo del material design non è solo bello, costruisce cioè sulle relazioni spaziali, funzionalità e l'intenzione del sistema.
Dettagli piacevoli
L’animazione può esistere all'interno di tutti i componenti di un app e in tutte le scale, dalle icone finemente dettagliate alle transizioni e azioni chiave. Tutti gli elementi lavorano insieme per costruire un’esperienza senza soluzione di continuità e funzionalità.
L'uso base dell' animazione è in transizione, un app può veramente stupire un utente quando l'animazione viene utilizzata in modi oltre l'ovvio. Gli utenti notano questi piccoli dettagli.
STILE
Colore
Il colore è ispirato dalle dichiarazioni audaci di colori giustapposti con ambienti tenui, prendendo spunto dall'architettura contemporanea, segnaletica stradale, pavimentazione e campi sportivi. Enfatizzare le ombre e luci con il grassetto. Introdurre colori inaspettati e vibranti.
Tavolozza dei colori
La tavolozza dei colori comprende i colori primari che possono essere utilizzati per l'illustrazione o per sviluppare il vostro marchio. Sono stati progettati per lavorare in armonia l’uno con l'altro.
La tavolozza dei colori inizia con i colori primari e riempie lo spettro per creare una tavolozza completa e utilizzabile per Android, Web e iOS. Google suggerisce di utilizzare i “500” (Tipo di colore) come i colori primari del vostro lavoro e gli altri colori come accenti, definite e personalizzate la vostra tavolozza. Limita la selezione dei colori, scegliendo tre tonalità di colore dalla tavolozza primaria e un accento di colore dalla tavolozza secondaria. Il colore accento può o non può avere bisogno di opzioni di fallback.
Per trasmettere una gerarchia di informazioni, è possibile utilizzare diverse tonalità per il testo. Il valore alfa standard per il testo su uno sfondo bianco è 87% (#000000). Il testo secondario, che è più basso nella gerarchia visiva, dovrebbe avere un valore alfa del 54% (# 000000). Altri suggerimenti alternativi per campi di testo e etichette, hanno un risalto visivo ancora più basso e dovrebbero avere un valore di alfa del 26% (# 000000).
Altri elementi, come le icone e divisori, beneficiano anche loro di avere un valore alpha di nero, per assicurarsi che funzionino su sfondi di qualsiasi colore.
Usa il colori secondari (più chiari) per il pulsante d'azione primario e componenti come interruttori o cursori, se è troppo chiaro o scuro per il colore di sfondo la regola generale del fallback è quella di scegliere una tinta più scura o più chiara del colore accento.
Temi
I temi consentono di applicare un tono costante di un app. Il tema specifica l'oscurità delle superfici, il livello di ombra e l’adeguata opacità degli elementi.
Approccio al design
Le icone si ispirano alla qualità tattile e fisica dei materiali. Ogni icona è tagliata, piegata e illuminata come se fosse vera, ma rappresentata da semplici elementi grafici. La qualità del materiale è robusta, con pieghe pulite e bordi netti. La finitura opaca, interagisce con la luce attraverso luci sottili e ombre coerenti.
La griglia del prodotto è stata sviluppata per facilitare la coerenza e stabilire una chiara serie di regole per il posizionamento di elementi grafici. Con questa standardizzazione si ottiene un sistema flessibile ma coerente.
Le keyline sono le fondamenta della griglia. Utilizzando queste forme come linee guida, è possibile mantenere una proporzione visiva coerente tra le icone di prodotti correlati. I dispositivi visualizzano le icone dei prodotti in 48DP. Quando si crea l'icona, si deve mantenere la misura di 48 unità, ma in scala al 400% a 192 x 192 px.
L’anatomia di un’icona descrive gli elementi grafici che compongono quella icona. La consistenza di questi elementi attraverso le icone è fondamentale per il mantenimento di un linguaggio visivo comune. La familiarità con questi elementi rende più facile capire le caratteristiche di ogni logo e le sottili differenze tra di loro. Essa contribuirà inoltre ad educare l'occhio a riconoscere la struttura sottostante di un design di un logo:
- Lo sfondo
- Materiale di sfondo
- Materiale in primo piano
- Colore
- Ombra
I bordi superiori e inferiori dell’ elemento forniscono un senso di profondità e di superficie. Gli elementi hanno uno spessore 1DP standard. Tutte le distanze dei bordi sono misurate dal bordo interno di un elemento. La tinta evidenzia il bordo superiore di tutti gli elementi. Il bordo sinistro, destro e inferiore non hanno una tinta applicata. L’ombra oscura il bordo inferiore di tutti gli elementi. I bordi di sinistra, destra e quello superiore non hanno un’ombra applicata.
Finitura
Lo strato finale è un risultato della luce virtuale posta a 45 °. Si estende dall'angolo in alto a sinistra fino al bordo esterno ed è sempre contenuta all'interno di questi confini.
Tinte, ombre e valori dell’ombra
Ogni colore reagisce in modo diverso quando si aggiungono tinte e sfumature. Ogni bordo tinta, bordo ombra e l'ombra devono essere adeguate per ogni colore che si trova dietro di esso. Per garantire l'armonia del colore, bisogna seguire il valore appropriato per ciascuna.
Modelli icona del prodotto
Influenzate dal comportamento del materiale fisico, le semplici convenzioni forniscono un senso di superficialità e tattilità. Le interazioni di materiale e colore consentono numerose composizioni uniche.
Colore
Non impreziosire gli elementi con bordi o ombre colorate. Gli elementi devono creare profondità, con bordi e ombre.
Strato
Non superare più di due strati. Averne troppi complica l'icona e manca di messa a fuoco.
Dog-ear
Un angolo della cartella, o dog-ear, viene utilizzato con forme associate a documenti o tradizionali metafore cartacee.
Non utilizzare un trattamento dog-ear in alto a sinistra di un'icona. L'ombra da questa posizione interrompe l'armonia dell'icona.
Elevare
Elevare un elemento chiave in cima a una semplice silhouette di sfondo concentra l'attenzione al centro. Non ritagliare elementi elevati all'interno un'altra forma.
Punto
Gli elementi hanno l'illusione di profondità senza perdere la loro forma geometrica, incentrati su forme simmetriche, non multiple e fuori centro.
Sovrapposizione
Gli elementi sovrapposti creano silhouettes uniche. Tutti gli elementi, i bordi e le ombre sono confinati all'interno della silhouette.
Non formare più di due sovrapposizioni. Averne troppe complica l'icona e manca di messa a fuoco.
----------
Spero che questa guida sia stata di vostro gradimento e soprattutto d'aiuto.
Buona Giornata ^^
Questa guida è stata creata dall'Inforge Designer Team per seguire altri nostri progetti guarda
in questo topic. http://www.inforge.net/xi/threads/project-designer-team.424127/
----------
Spero che questa guida sia stata di vostro gradimento e soprattutto d'aiuto.
Buona Giornata ^^
Questa guida è stata creata dall'Inforge Designer Team per seguire altri nostri progetti guarda
in questo topic. http://www.inforge.net/xi/threads/project-designer-team.424127/
----------
In futuro ci potranno essere degli aggiornamenti.
Per segnalarci errori all'interno della realese potete lasciare UN post o contattarmi in privato
.