progettare le icone

tecnica web design
f Simona De Robertis • [email protected] e Silvia Burigana • [email protected]
progettare le icone
I siti sono come
edifici virtuali.
I graphic designer
sono gli architetti
che arredano
le stanze.
Si comincia
con gli accessori
L
e icone giocano un
ruolo fondamentale in
un sito: rappresentano
in chiave grafica e
simbolica concetti
e funzionalità. Se
correttamente
disegnate, possono agevolare
notevolmente la comprensione
dell’ambiente Web da parte dei
suoi utenti. I graphic designer
modellano l’iconografia del sito a
partire dalle suggestioni cromatiche e
morfologiche del logo, dell’immagine
coordinata e del target di riferimento
del cliente. Le pagine progettate
su misura di un’azienda che
commercializza abbigliamento per
un target adolescenziale offriranno,
quindi, suggestioni e soluzioni
differenti rispetto a quelle pensate
per una società che commercializza
apparecchiature hardware.
La coerenza stilistica
e funzionale
Le icone della Webmail di Libero presentano
tratti stilistici comuni, volti a comunicare
l’unitarietà del gruppo: la forma geometrica
e lineare degli oggetti rappresentati,
l’utilizzo di sottili linee nere per definire i
contorni e l’applicazione di cromatismi ocra
per evidenziare lievissimi e sintetici effetti
chiaroscurali
Le icone devono far capo a due
differenti precetti base: la regola
della coerenza stilistica e la regola
della coerenza funzionale. La prima
coinvolge soprattutto il trattamento
grafico degli elementi visuali e
sancisce la necessità di arredare
le schermate attraverso elementi
(pittorici, bidimensionali, grafici ecc.)
stilisticamente coerenti e identificativi.
La regola della coerenza funzionale,
invece, evidenzia la necessità di
associare ai simboli funzioni univoche:
la stessa icona deve rimandare a
un’unica funzione così come una
precisa funzione dev’essere richiamata
da un’unica icona. Un ambiente Web
arredato con icone coerenti dal punto
di vista stilistico e funzionale lo si può
rintracciare all’interno della Webmail
del portale Libero [www.libero.it],
che presenta un’iconografia
immediatamente comprensibile
anche da parte di un target piuttosto
vasto e inesperto. Gli elementi visuali
che connotano l’interfaccia grafica
e richiamano le icone di un desktop,
infatti, rievocano al primo sguardo
oggetti d’uso comune. Anche le icone
delle categorie merceologiche dell’eshop di bluefly [www.bluefly.com],
realizzate attraverso uno stile
maggiormente pittorico, sono state
progettate per arredare con coerenza
stilistica e funzionale l’interfaccia Web
del negozio online.
Il rapporto con l’interfaccia
I navigatori non cercano la
complessità gratuita e, anzi,
prediligono edifici virtuali facilmente
esplorabili. L’arredo delle stanze
online, pertanto, dev’essere costituito
da elementi che consentono
all’utente di controllare con
immediatezza le funzionalità e i
percorsi offerti. La Gui (Graphical
User Interface) pone i visitatori in una
situazione di assoluta padronanza
dell’interfaccia dialogica poiché
determina convenzioni che
consentono all’utente un facile
apprendimento circa l’utilizzo
dell’interfaccia stessa. Attraverso
l’applicazione della Gui, in
sostanza, un edificio virtuale si
trasforma in un ambiente familiare
e noto, connotato da elementi
metaforici che richiamano oggetti
e contesti d’azione quotidiani.
Gli elementi iconografici scelti
metaforizzano modelli mentali
acquisiti nel contesto reale,
rendendo immediato e prevedibile
l’effetto dell’interazione con essi.
Gli elementi della Gui applicati agli
edifici Web devono essere di facile
utilizzo, proprio come accade nei
sistemi operativi da cui derivano,
che siano o meno accompagnati da
etichette verbali esplicative.
Un esempio di sito strutturato
sulla base delle GUI è quello
Le icone pittoriche rimandano a specifiche aree del negozio virtuale e si presentano
quali oggetti d’arredo stilisticamente coerenti e connotanti. Hanno, inoltre, particolarità stilistiche
universalmente decodificabili, poiché facilmente comprensibili da visitatori appartenenti
a culture anche molto distanti fra loro
78
Internet News gennaio 2003
Uno dei fondamentali principi della progettazione delle GUI sancisce la necessità di conservare
le conoscenze acquisite dagli utenti nel corso delle loro esperienze informatiche. Un sito può
indubbiamente simulare funzionamenti consolidati, ma è anche vero che a volte è sufficiente
sfruttare le potenzialità offerte dall’Html per fornire all’utente funzionalità di base, lasciando
ad altre tecnologie il compito di svolgere attività specifiche e secondarie all’interno dell’interfaccia
della Web agency Bodekaer
[www.bodekaer.dk], che sfrutta
Flash per riprodurre un ambiente
d’immediata riconoscibilità e utilizzo.
I meccanismi di funzionamento e
i risultati dati dall’interazione con
gli oggetti dell’interfaccia sono
prevedibili, sulla base di esperienze
consolidate da parte dell’utente
circa la manipolazione delle icone,
delle schede virtuali e degli elementi
caratteristici del desktop. Wireframe
Studio [www.wireframe.co.za]
presenta i suoi contenuti attraverso
un meccanismo di apertura delle
cartelle molto familiare e offre altri
divertenti effetti di movimento che
si attivano al passaggio del mouse
e che richiamano gli oggetti tipici
del desktop e della quotidianità:
l’apertura della busta della mail o la
stratificazione dei foglietti virtuali ne
sono un valido esempio.
Disegnare icone per il Web
Creare icone è un’operazione creativa
tanto importante quanto divertente,
che può essere effettuata grazie
all’utilizzo di appositi programmi per
la grafica vettoriale (Adobe Illustrator,
CorelDRAW, Macromedia Freehand
ecc.) o di fotoritocco.
Fra questi ultimi i più importanti ed
efficaci sono Jasc Paint Shop Pro e
Adobe Photoshop, che consentono
di disegnare ogni elemento dell’icona
su livelli differenti e offrono,
quindi, la possibilità di modificarli,
spostarli e colorarli singolarmente
e autonomamente. Le regole-base
per la creazione di icone efficaci
e compatibili con le esigenze di
fruizione online sono:
. disegnare simultaneamente tutte
le icone, al fine di garantire scelte
di forma, cromatiche e di posizione
reciproca coerenti;
. utilizzare un numero limitato
di colori (fra i  colori Web
safe), scelta che garantisce
un’esportazione leggera e
uniformità di visualizzazione
all’interno di tutti i browser;
. esportare simultaneamente tutte
le icone disegnate, per essere certi
di utilizzare gli stessi parametri di
esportazione per ogni oggetto
iconico.
Vizzavi [www.vizzavi.it] è un valido
esempio di rappresentazione
iconografica delle aree tematiche,
che si integrano all’interno del top
della pagina e diventano oggetti
di navigazione coerenti, univoci e
privilegiati rispetto alla percezione
degli utenti del sito.
Il sito, molto semplice e lineare, diventa un ambiente
da scoprire e le icone, che si attivano al passaggio del mouse,
sono vissute quali oggetti con cui interagire divertendosi
Quando le icone di un sito parlano un linguaggio comune,
rafforzano il messaggio e diventano protagoniste dell’interfaccia grafica,
condizionando la percezione e provocando un’immediata riconoscibilità
grafica circa i contenuti del contesto d’inserimento
Pescare le icone dalla Rete
In Rete esistono molti siti che consentono di scaricare gratuitamente file .ico
(elementi grafici di sistema che possono essere utilizzati per personalizzare
la propria interfaccia desktop) o immagini bitmap, in formato .png, .gif e .jpg.
Utilizzando un programma di grafica evoluto – Paint Shop Pro e Photoshop, per
esempio, soddisfano lo scopo – è possibile aprire le immagini scaricate oppure
incollare all’interno di un nuovo documento una capture del monitor e ridisegnare
su un livello differente la nuova icona, ricalcando le forme che interessano,
selezionando porzioni di pixel specifici, modificando dimensioni e colori, fino a
raggiungere la soluzione desiderata.
L’elaborazione di una nuova icona in Photoshop
Internet News gennaio 2003
79
tecnica web design
Icone
fai da te
La progettazione delle icone parte dalla delimitazione dell’area
grafica in cui andranno inserite, all’interno della quale dovranno
essere integrati tutti gli elementi grafici che la costituiscono: il
logo, gli oggetti grafici, le componenti testuali e così via.
5
1
6
2
7
3
8
4
9
g Strutturare lo spazio
All’interno dell’area si tracciano le linee guida che
frammentano lo spazio in cui le icone saranno inserite,
al fine di determinare una separazione omogenea e
logica fra i differenti oggetti presenti. Le linee guida
sono strumenti di lavoro estremamente utili, poiché
consentono di tracciare una mappa visiva degli
ingombri; le linee guida calamitate, inoltre, agevolano
il percorso e il disegno delle icone all’interno degli
spazi prefissati (immagine ).
g Creare le icone off
Prima di procedere con il disegno della prima serie
di icone, è necessario creare una cartella all’interno
dei livelli di Adobe Photoshop, attribuendole un
nome che la identifichi quale contenitore delle icone
spente. Questa cartella consente di strutturare in
modo ordinato e logico il file .psd creato. Il disegno
delle icone è a tutti gli effetti un intervento sul pixel
e l’identità grafica della prima icona deve essere
80
coerente con lo stile del sito e con i cromatismi in esso
utilizzati (immagine ). Una volta definita la prima
icona, è sufficiente duplicare gli eventuali elementi
comuni (in questo caso il riquadro che la contiene) e
procedere al disegno di tutte le altre icone grafiche
previste (immagine ).
g Creare le etichette grafiche
Nel caso si scelga di applicare all’effetto rollover
anche la comparsa di etichette verbali grafiche, è
sufficiente creare una nuova cartella e procedere
con la definizione di eventuali componenti grafiche
e con il posizionamento dei diversi testi descrittivi
(immagine ).
g Creare le icone on
Al fine di creare un documento psd strutturato, è
necessario creare un’ulteriore cartella all’interno dei
livelli di Photoshop per contenere tutte le icone che si
attivano al passaggio del mouse, duplicando gli elementi
di base disegnati per la prima icona e modificando i
suoi attributi. In questo caso, per esempio, si è scelto
di riempire il riquadro con il colore simbolico del sito
- l’arancione (immagine ) e di cambiare il colore
all’icona, conferendole un cromatismo fortemente
contrastante con il colore di base (immagine ).
g Esportare velocemente
gli elementi grafici
Grazie alla creazione di un unico file Photoshop molto
ordinato, è quindi possibile esportare in modo veloce
ed efficace tutti gli elementi iconici e verbali creati.
Tagliando dall’immagine i vari elementi grazie allo
strumento ritaglia (immagine ) e accendendo e
spegnendo i differenti livelli, l’esportazione
sarà molto rapida, uniforme e dimensionalmente
precisa. Lavorando su un unico file, inoltre,
gli attributi dell’esportazione dei differenti oggetti
risulta identica e, quindi, consente di impostare
Internet News gennaio 2003
il formato, il numero di colori e le caratteristiche
dell’immagine iconica solamente la prima volta.
Il file psd salvato immagazzina anche questi parametri,
pertanto laddove risulti necessario intervenire
in un secondo tempo sul file, i dati di esportazione
degli oggetti saranno memorizzati e proposti quali
dati di esportazione precedentemente adottati
(immagine ).
g Integrare gli elementi grafici
all’interfaccia del sito
La creazione di icone grafiche omogenee e coerenti
consentono di strutturare un’area interattiva
fortemente riconoscibile anche per chi accede al sito
per la prima volta. L’esportazione e i tagli simultanei
garantiscono non soltanto un’omogeneità visiva
ma, soprattutto, un’impaginazione rapida e priva
di problematiche o conflitti nella pagina Html
(immagine ).