Con l'ultima versione di Android, è stato introdotto il nuovo Google Material Design: si tratta di una serie di linee guida con l'obiettivo di uniformare l'aspetto grafico delle app di sistema, che ogni designer dovrebbe seguire in fase di progettazione dell'interfaccia di un'app moderna. Google ha pubblicato un documento molto dettagliato e in continuo aggiornamento, che argomenta ogni aspetto della realizzazione di layout, animazioni, icone e quant'altro.
In questo articolo ci concentreremo sulle icone: vedremo quali sono le linee guida di base suggerite da Google e le applicheremo con un semplice esempio pratico. Utilizzeremo Adobe Photoshop, ma il procedimento potrà essere facilmente adattato a software analoghi.
L'importanza dell'icona e del suo stile
Le icone di un prodotto, semplici, vivaci e amichevoli, ne comunicano l'idea centrale e lo scopo.
La frase precedente, tratta e tradotta dalle linee guida del Material Design, è certamente interessante ma può sembrare scontata: tutti, infatti, pensano a rappresentare l'idea centrale dell'app all'interno della sua icona. Ciò che a volte si tralascia riguarda, invece, lo stile dell'icona (o, in generale, del logo del prodotto): deve essere semplice e amichevole. Inoltre, esso deve permettere che l'app si uniformi al contesto in cui è eseguita. Consideriamo, ad esempio, le due icone seguenti:
Entrambe le icone, viste su uno sfondo bianco e fuori da un layout che le contestualizzi, possono essere ugualmente valide per un'app che gestisca il risparmio energetico. Su Android Lollipop, invece, se un utente si trovasse a scegliere tra una delle due come risultato di una ricerca su Google Play Store, probabilmente opterebbe per l'icona di sinistra. Ciò è dovuto alla maggiore somiglianza dell'icona con tutti gli altri componenti del sistema, suggerendo all'utente un più alto grado di professionalità da chi l'ha realizzata.
Dopo aver chiarito l'importanza di un'icona e della sua integrazione nel sistema che la utilizza, vediamo le linee guida per realizzarne una adatta ad Android Lollipop e, in generale, al mondo Google.
Le forme
Per disegnare un'icona, Google ha definito una griglia di riferimento (mostrata in Figura 2), dalla quale possono essere estratte alcune forme principali.
Le quattro keyline shapes, ovvero le forme di base su cui costruire le icone, sono proprio basate sulla griglia precedente. Nell'immagine seguente sono mostrate queste quattro figure di base, denominate square (un quadrato dagli angoli arrotondati), circle (un cerchio), vertical rectangle (un rettangolo arrotondato verticale) e horizontal rectangle (un rettangolo arrotondato orizzontale).
Una volta scelta una delle basi precedenti, sarà sufficiente aggiungere qualche forma geometrica semplice (triangoli, rettangoli, cerchi) per ottenere la nostra icona. Se pensiamo all'icona di GMail, è facile rendersi conto di come sia costituita a partire da un horizontal rectangle, sul quale sono poi opportunamente aggiunti due triangoli (a formare la caratteristica "busta") e un po' di colore.
Anche nella disposizione delle forme geometriche sopra la base, però, bisogna seguire le opportune linee guida. E proprio questo sarà l'argomento del prossimo paragrafo.
Struttura di un'icona
Secondo le linee guida dettate dal Material Design, ogni icona dovrebbe essere composta da una serie di componenti. Questi dovrebbero, inoltre, formare una struttura a livelli ed essere quindi posizionati gli uni sopra gli altri.
Nell'immagine precedente, si nota proprio la presenza di un componente di sfondo, sul quale è poi adagiato un quadrato, rifinito al centro da un cerchio. Questo tipo di struttura, estremamente semplice, favorisce anche la riconoscibilità dell'icona, consentendo inoltre una buona integrazione con il resto dell'ambiente.
Prima di procedere, è bene precisare che la struttura di un'icona non dovrebbe superare il numero massimo di tre livelli. Il motivo è ancora la volontà di mantenere l'icona semplice e chiara.
Applicare luci e ombre
Una volta compresa la struttura di un'icona, possiamo ovviamente colorarla come preferiamo. Infine, possiamo conferire maggiore dinamismo gestendo opportunamente gli effetti di luce e ombra. Secondo le linee guida del Material Design, abbiamo a disposizione due opzioni per gli effetti di illuminazione: la prima prevede un effetto dal basso verso l'alto, la seconda opzione ci consente di utilizzare un'illuminazione a 45 gradi, con sorgente in alto a sinistra. L'immagine seguente mostra quanto detto:
Analogamente agli effetti di luce, possiamo applicare a ognuno dei componenti dell'icona un'ombreggiatura. I parametri da applicare sono espressamente specificati da Google, e sono i seguenti:
- Metodo di fusione: Normale
- Opacità: 20%
- Offset orizzontale: 0px
- Offset verticale: 6px
- Blur: 6px
Il colore dell'ombra deve essere scelto in base a quello del componente a cui è applicata. Affronteremo questo aspetto in dettaglio nell'esempio che vedremo successivamente.
Un ultimo effetto che possiamo applicare alla nostra icona riguarda i bordi inferiori e superiori di ogni componente. Google suggerisce, infatti, di utilizzare un colore più chiaro per il bordo superiore (tinted edge) e uno più scuro per quello inferiore (shaded edge). Ciò garantisce all'icona una maggiore senso di profondità ed evidenzia le superfici.
Ci sono ancora molti altri dettagli che possono essere presi in considerazione. Anziché elencarli tutti, si proporrà un semplice esempio basato sia sulle linee guida finora elencate che su qualche altra regola non ancora vista.
Per chi volesse approfondire l'argomento, è comunque possibile consultare le linee guida ufficiali per la realizzazione delle icone.
Un'icona d'esempio
Come esempio, vedremo come realizzare un'icona che ricordi il logo di HTML.it, nello stile del Material Design. Utilizzeremo un quadrato arrotondato come base, sul quale posizioneremo un cerchio. I colori riprenderanno quelli del logo ufficiale: tenderanno, cioè, al giallo e al nero.
Possiamo iniziare facendo riferimento a un template creato da Graham Macphee, gratuitamente scaricabile. Una volta aperto il file, vedremo subito una serie di guide che ci aiuteranno nel disegno dell'icona.
Utilizziamo quindi le guide per tracciare le nostre figure: un quadrato arrotondato (con raggio 42 pixel, se utilizziamo il template appena citato) e un cerchio più piccolo al centro. Non assegniamo a nessuna delle due figure una traccia, ma occupiamoci soltanto di riempirle. Anziché utilizzare un giallo qualsiasi per il cerchio, scegliamo quello suggerito da Google nell'apposita sezione dei colori della guida, rappresentato dal valore esadecimale #FFEB3B. Seguendo lo stesso principio, riempiamo il rettangolo di sfondo con un grigio #404040.
Procediamo quindi aggiungendo tinted edge e shaded edge al rettangolo, utilizzando anche in questo caso i colori specificati da Google: a ognuno dei colori, infatti, corrispondono due tonalità, una più chiara e una più scura. La prima (che nel caso del grigio scelto, sarà #686868) viene utilizzata per il tinted edge e, in generale, per le luci. La seconda (nel nostro cosa, #383838) si utilizza per lo shaded edge e per le ombre. Aggiungiamo anche un'ombra al cerchio, applicando i parametri già visti e scegliendo il colore d'ombra corrispondente al giallo scelto in precedenza (facendo sempre riferimento ai colori predefiniti), ovvero #F2C732.
A questo punto, aggiungiamo al centro del cerchio l'immagine di un omino stilizzato (anch'essa tratta e riadattata dalle icone di sistema di esempio, nell'apposita sezione delle linee guida del Material Design), e ripetiamo il procedimento per l'ombra, applicandola anche a quest'ultimo elemento.
Per concludere, aggiungiamo un dog-ear, la tipica "orecchietta" che si vede spesso nelle icone dei documenti. Seguendo le linee guida di Google, la inseriremo nell'angolo destro dell'icona (e non a sinistra, perché non consentito). Coloriamo anch'essa e ripetiamo il procedimento visto per associarle un'ombra. Avremo così ultimato la realizzazione della nostra icona.
