Material design: cosa è e come usarlo

Cosa sono le immagini material design, dove trovarle, come usarle in pagine web e in siti, come ridimensionarle e come colorarle

Il Material Design è un linguaggio di design sviluppato da Google con animazioni, transizioni, effetti di profondità ottenuti con giochi di luce e ombreggiature. Le immagini realizzate con questa tecnologia mostrano delle superfici che sembrano fisiche e spigoli che danno l'idea di poter essere toccati.

Il Material Design è stato introdotto su Android a partire dal 2009 ed è stato successivamente esteso agli altri prodotti Google. Dal 2015 praticamente tutte le applicazioni di Google per Android utilizzano il Material Design come Chrome, Google Drive con le sue applicazioni, Gmail, Youtube e Google Maps.  Anche altri siti e applicazioni hanno recentemente adottato questa tecnica del Material Design che può essere usata anche dagli webmaster che amministrano siti grandi o piccoli.

Il material design è particolarmente adatto ai dispositivi mobili, senza però dimenticare i grandi schermi dei computer, visto che le immagini sono realizzate con la grafica vettoriale e che quindi mantengono la loro qualità all'aumentare delle dimensioni. La grafica cosiddetta raster utilizza invece una griglia di pixel che, quando si aumentano le dimensioni della immagine, provoca un fastidioso effetto sgranatura.

DOVE TROVARE LE ICONE MATERIAL DESIGN

Le icone material design possono essere scaricate da diversi siti anche in modo gratuito. Google offre le sue immagini gratis mentre in altri siti ce ne sono a pagamento, ma anche di libero download. Ecco un breve elenco:

1) GOOGLE MATERIAL DESIGN ICONS - Google ha pubblicato su GitHub tutta una serie di icone suddivise in categorie quali Action, Alert, Communication, Content, Editor, Image, Navigation, ecc. Le icone sono disponibili in formato SVG e possono essere scaricate andando sulla freccetta a destra di Clone or Download, per poi cliccare su Download ZIP. Ci sono anche  altri file tra cui quello della licenza. Per scaricare una icona singola, si clicca sulla cartella con il sinistro del mouse per accedere al file, quindi ci si clicca sopra con il destro del cursore, per poi scegliere Salva con nome. Tutte le icone sono contenute in un file ZIP da 62MB.

2) ICON FINDER - IconFinder è uno dei migliori siti in cui trovare icone gratuite e a pagamento. Le icone mostrate per prime sono a pagamento ma, scorrendo la pagina, si trovano anche quelle gratuite. Cliccando su un elemento possiamo poi scaricarlo nei formati SVG, PNG, AI, ICO, ICNS e Base64.

3) MATERIAL DESIGN ICONS - Si tratta di una community in cui i designer mostrano i propri lavori. Passando sopra a una icona si può conoscere il nome del suo autore e, cliccandoci sopra, scegliere l'opzione di download preferita. Si può optare per PNG di varie dimensioni, per SVG ottimizzate e per vettori XML.

4) ICON SHOCK -Icon Shock ha più di 4000 icone material design di cui circa 750 sono gratuite. Ogni icona può essere scaricata nelle dimensioni 24px, 32px, 48px, 64px, 72px, 128px, 256px, e 512px e nei formati SVG o PNG. Si va su Get Free Full Pack per quelle gratis.

5) ICONS8 - Sono a disposizione degli utenti 5.500 icone che possono essere filtrate dalla colonna di sinistra. Le icone possono essere scaricate in formato PNG o SVG oppure generare il codice HTML in Base64.

6) SKETCH - Con un set di icone material design di libero scarico. Si clicca sul pulsante Download Resource.

COME USARE LE ICONE MATERIAL DESIGN

Se siete degli webmaster che state costruendo un sito, l'utilizzo delle icone material design è consigliato perché di grande qualità e molto leggere, che rendono il sito più veloce. Nel seguito del post farò riferimento esclusivo alle icone, perché sono offerte con una licenza Creative Commons 4.0 molto permissiva con la possibilità di copiarle, modificarle trasformarle, anche per scopi commerciali.

USO DELLE ICONE COME IMMAGINI

Le icone material design possono essere usate come delle semplici immagini. Dopo aver scompattato il file ZIP che le contiene scaricato da GitHub, si cerca l'icona che ci piace in formato PNG. Le varie icone sono suddivise in categorie: action, alert, communication, content, device, hardware, navigatione, social, ecc...

Ciascuna categoria poi è suddivisa in sottocategorie per rendere la ricerca più mirata.

Ciascuna icona può essere caricata sul web, per esempio mediante l'Editor di Blogger, per poi trovarne il link diretto, che potrà poi essere usato nel codice per inserire una immagine in una pagina web.

<img src='LINK_DIRETTO_ICONA' title='titolo icona' alt='nome icona'/>

Se il nostro sito utilizza molte di queste icone, possiamo usarle come i caratteri di Google Fonts.

USARE LE ICONE MATERIAL DESIGN COME GOOGLE FONTS

Si possono caricare tutte le icone material design di Google nel nostro sito con questa riga di codice.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Possiamo poi richiamare una icona specifica tramite il nome del file relativo. Per esempio questo codice

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">ic_headset_black_48dp</i>

mostrerà l'icona selezionata nello screenshot precedente come verificabile in un Editor HTML Online.

Un utente di Blogger può andare su Tema > Modifica HTML e incollare sopra al tag  </head> la riga di codice evidenziata di giallo. Qualora nel Tema, o in un post del blog, volessimo inserire una icona Material Design, basterà incollare una semplice riga con il nome della icona in questo modo

<i class="material-icons">nome-icona</i>

ovvero inserire la seconda parte del codice evidenziata di verde.

COLORARE E RIDIMENSIONARE LE ICONE MATERIAL DESIGN

Le icone material design possono essere assimilate a un file .XML e infatti possono anche essere utilizzate in formato SVG, che non è altro che un file testuale. Quindi il colore non è una informazione presente nella icona e può essere personalizzato a piacere. Se per esempio incolliamo in una pagina web questo codice,

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"><style>
.material-icons {
font-size: 48px;
color: rgba(255, 0, 0, 0.5);
}
</style>
<i class="material-icons">face</i>

otterremo una icona di una faccia colorata di rosso, con una opacità del 50% e con dimensione di 48 pixel.

Al posto del codice RGB può anche essere usato il codice HEX per i colori. Per esempio questo codice,

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"><style>
.material-icons {
font-size: 128px;
color:#0f0;
opacity: 0.5;
}
</style>
<i class="material-icons">ic_public_black_24dp</i>

porta a questo risultato,

con l'icona di dimensioni 128 pixel, il colore verde #f0f e opacità al 50%.