Material Design: creare icone per Android

14 marzo 2015

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:

Figura 1. Icone a confronto

Icone a confronto

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.

Figura 2. Griglia di riferimento per le icone (click per ingrandire)

Griglia di riferimento per le icone del Material Design

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).

Figura 3. Le forme di base (click per ingrandire)

Le forme di base

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.

Figura 4. Schema e realizzazione dell’icona di GMail (click per ingrandire)

Schema e realizzazione dell'icona di GMail

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.

Se vuoi aggiornamenti su Material Design: creare icone per Android inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Material Design: creare icone per Android

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy