A2C - Salerno

Oggi è fondamentale comunicare tramite immagini. E tutti quanti prima o poi arrivano al dubbio amletico: che colore metto a questo sfondo? Questo può valere per una presentazione in Powerpoint o per un sito web. Una delle risposte a questa domanda è il Material Design di Google. 

Si tratta di uno stile ed un linguaggio di design, con cui Google comunica, in contrapposizione con il Flat Design di Microsoft. Non si tratta di una regola, ma di uno spunto che si può cogliere. E' superfluo dire che non è casuale, cioè Google non se l'è inventato per caso, ma chiaramente c'è uno studio che risale al 2013.
Il sito cardine del Material Design è:

https://material.io/

Qui si possono trovare gratuitamente molti spunti di design e scaricare anche dei contenuti gratuiti come ad esempio set di icone.
Vediamolo insieme e cerchiamo degli spunti per le scelte grafiche.

Il concetto chiave del material design è la parola material. Dove material, cioè il materiale, è una metafora. Cioè allude al fatto che a differenza di altri stili, in questo caso c'è qualcosa di materiale e di concreto. Detto in altri termini, l'obiettivo è quello di fare in modo che le interfacce grafiche si comportino come i materiali reali, cioè come gli oggetti, con la peculiarità di adattarsi a qualsiasi contesto.
Vediamo i 7 concetti che sono alla base:

1. l'uso di una varietà di colori forti
2. utilizzo di massimo 3 colori
3. forme geometriche classiche, come il cerchio o il quadrato
4. molto spazio per i testi e adattabilità
5. profondità e tridimensionalità, tramite anche ombre a distanza variabile
6. sensazione di inchiostro digitale
7. il font "Roboto".

Come abbinare i colori

Andiamo sul sito material.io nella sezione "Resources" e poi su "Color Tool".
Material.io è di Google è ed Open Source. La parte più interessante è la sezione Resources, dove troviamo il Color Tool. Serve a trovare i 3 colori cordinati che inseriremo nella nostra presentazione o nella pagina web.
Oltre a trovare i colori cordinati ci consiglia se utilizzare la scritta bianca o nera e quindi verifica la leggibilità in varie condizioni.

Come fare?

Cliccare a destra su un colore a proprio piacimento, tra quelli designati da Google per il Material Design, ed in basso verranno visualizzati anche gli altri 2 colori coordinati. Inoltre andando in "accessibility" si può approfondire la leggibilità del bianco o del nero su questi colori. Il sistema ci indirizzerà sul colore del testo da utilizzare.
Ma non solo, possiamo anche verificare i colori consigliati, sulla base di un colore già utilizzato in altro.
Facciamo un altro esempio: il logo A2C ha il glifo color rosso codice esadecimale #cf0101. Andando nella sezione "Custom" e inserendolo ottengo che un colore da abbinare potrebbe essere il rosso scuro #950000 oppure il rosso chiaro #ff5031. Inoltre nella sezione accessibility, vedo che su un eventuale sfondo fatto con il rosso del glifo A2C il testo è preferibile sia bianco.

Concludendo

Il Material Design di Google è uno spunto per applicare uno stile gradevole. Tramite l'applicazione color tool del sito material.io si possono abbinare i colori con 1 click. Questo non è utile ai grafici, i quali fanno questo di mestiere, ma è fantastico per chi non ha competenze grafiche o ha poco gusto estetico.

Link al sito per il Material Design di Google:

https://material.io/resources/color

Per approfodnimento: