Questo documento spiega le finezze artistiche delle icone di Haiku. Se non vi chiarisce tutto, su quali regole seguire nel disegno di un’icona per il sistema operativo Haiku, per favore riportate le vostre perplessità alle nostre intenzioni e proveremo a migliorare questo testo. Le icone già esistenti vi daranno un’idea abbastanza buona su quale direzione seguire. Questo documento intende ulteriormente definire in forma scritta il look distintivo delle icone di Haiku ed essere un utile risorsa in caso di dubbio. Inoltre, se disegnate un icona, e vi sembra che non si adatta al resto del sistema, probabilmente questo documento vi fornirà aiuto per quello che vorreste cambiare o migliorare.

Per favore tenete presente che gli utenti Haiku ritengono importante un aspetto armonioso. Più trasformate la vostra icona per adattarla al resto del sistema, più sarà apprezzata dagli utenti.

Prospettiva

Le icone di Haiku ereditano la prospettiva di BeOS e vi aggiungono la propria. Se immaginate un cubo posato sul pavimento, gli angoli dei relativi bordi sono definiti come segue: la linea dove si incontrano il lato frontale sinistro e il pavimento ha un angolo tale che per ogni due pixel nella direzione destra va giù un pixel. La linea del lato destro incontrando il pavimento va un pixel su per ogni pixel verso destra. Le linee che puntano su sono dritte senza angolo per contribuire a rendere le icone vivaci (realisticamente le icone dovrebbero essere più larghe nella parte superiore ma non lo sono).

La prospettiva che le icone di Haiku aggiungono a quella originale del look di BeOS deriva dal tirare le linee che non toccano il pavimento (e non puntano in alto) per aggiungere una prospettiva piuttosto drammatica. Così i bordi degli spigoli degli oggetti essendo più vicini all’osservatore seguono ancora la prospettiva di BeOS con gli angoli descritti precedentemente. Tutti gli altri bordi sono leggermente tirati per liberarsi da un aspetto rigorosamente isometrico. La cosa più importante è ancora la vivacità ecco perché non c’è una prospettiva rigorosamente definita. Non esagerate troppo, cercate di adattarla al resto delle icone. E’ a volte più facile progettare un icona con il conseguente aspetto isometrico e modificarne la prospettiva come ultimo passaggio del lavoro. Inoltre è preferibile mantenere la conseguente prospettiva ed il corretto aspetto nell’icona.

Luci

Ci sono due sorgenti di luce che illuminano un’icona di Haiku: la sorgente di luce principale illumina con una luce neutra dalla parte superiore di sinistra. Una seconda fonte di luce illumina dal lato opposto con una luce ambientale che può essere un po colorata (ad esempio un tono più caldo). I cui effetti non sono visti sulle superfici che sono direttamente illuminate dalla luce principale.

Gradienti

I gradienti usati sull’icona dovrebbero derivare dagli effetti delle sorgenti luminose come precedentemente descritto. Non avete bisogno di utilizzare gradienti su tutti i lati — ovviamente utilizzano più spazio di memorizzazione che i colori uniformi, ma senza gradienti le icone sembrerebbero troppo rigide.
Dovreste usarne quanto sufficiente a rendere l’aspetto delle vostre icone moderno. Come regola generale, le superfici che si trovano di fronte all’osservatore dovrebbero essere più chiare nella parte superiore mentre le superfici superiori dovrebbero risultare più chiare nella parte sinistra. Le superfici sulla destra che non sono direttamente illuminate dalla fonte di luce principale dovrebbero avere i colori più scuri. Sono illuminate dalla sorgente di luce principale e dalla riflessione del pavimento, ma l’effetto dovrebbe essere molto sottile e visibile solo ad un’esame ravvicinato. Queste superfici ottengono i colori più scuri dove toccano le superfici illuminate direttamente.
In generale i colori dovrebbero essere luminosi e modificati per aiutare il contrasto all’interno dell’icona. La direzione del gradiente non deve essere allineata con un angolo specifico per rendere le icone meno rigide. Invece dovreste modificare la direzione del gradiente per migliorare il contrasto.

Colori

Ovviamente i colori sono un argomento difficile.

Al momento, non c’è una palette (tavolozza) definita di colori da cui poter prendere i colori dominanti per la vostra icona. Nelle icone esistenti, i colori puri vengono quasi completamente evitati, con l’eccezione del grigio, che non è modificato in nessun modo. La maggior parte dei colori dominanti sembrano saturi in qualche parte nelle icone, ma i colori sono sempre una miscela, mai puro rosso, verde o blu. Dove si sbiadiscono in un tono più chiaro, sono principalmente de-saturati e simili a pastelli. Nella tonalità, i colori sono ancora principalmente saturi, mirando ad un’illuminazione credibile, ma i colori possono cambiare nel tono per apparire in uno stato di luce più calda o più fredda nell’ombra, che principalmente dipende dalla colorazione generale e dal “gut feeling” (istinto, emozione viscerale)

Ombre

Prima di tutto un’ombra è la proiezione della siluette del corpo come visto dalle sorgenti di luce. Lanciata sul pavimento piano, l’ombra è soggetta ad ulteriori distorsioni a causa della prospettiva dell’osservatore. E’ consigliato l’auto-ombreggiamento degli oggetti dell’icona, poiché può migliorare il contrasto. Talvolta i gradienti funzionano bene per questo. Un ombra naturale è preferibile a meno che non sia troppo complicata e distragga dalla parte principale dell’icona. L’icona people è un esempio di forma semplificata dell’ombra. Evitare di realizzare ombre tagliate giusto al bordo dell’icona lasciando abbastanza spazio per loro. Non è così importante che le ombre abbiano approssimativamente la stessa lunghezza in tutte le icone, ma devono avere tutte la stessa direzione: diritta a destra. Esattamente come le ombre generate dal sole , anche loro non diventano più larghe all’aumentare della distanza dall’oggetto.

Ciascuna delle quattro icone visibili qui sopra ha qualcosa di interessante che si può dire circa la sua ombra:

• Nell’icona Font, l’ombra non ha linee orizzontali diritte, ma questo succede perché la figura A non ha bordi che puntino diritto in su. La direzione dell’ombra è ancora verso destra.
• L’ombra dell’icona Person è semplificata dall’aiuto delle curve.
• L’ombra nell’icona di ShowImage è più bassa del corpo del proiettore ma questo perché è sollevato da terra.
• L’icona di Expander ha come caratteristica più effetti d’ombreggiamento delle altre icone. Si noti che l’ombra sul lato destro segue una direzione diversa poiché è prodotta dalla sorgente di luce ambientale. Potrebbe anche venir realizzata con un gradiente perché normalmente tali ombre non hanno bordi taglienti.

Profili

Le icone di Haiku usano almeno un profilo nero principale intorno alla siluette della figura dell’icona. Il profilo è largo un pixel al formato 32×32. Mentre i profili possono separare le figure all’interno dell’icona se sovrapposti, usateli con parsimonia. Se ogni bordo ne ha uno l’icona apparirà troppo complicata. Confrontate a quelle di BeOS, le icone di Haiku usano pochi profili. L’icona
Magnify è un buon esempio.

I profili contribuiscono a dare risalto alla siluette di un oggetto, così saltate i profili che vanno contro quest’idea. Se una determinata caratteristica di un’icona non dovrebbe avere tanta enfasi quanto un profilo nero gli darebbe, tale profilo può essere costituito dalla versione scura del colore usato per le superfici che include. un esempio di ciò sono le icone Folder e Workspaces. Nell’icona Workspaces, il piede della lampada è troppo piccolo per giustificare un profilo nero; nell’icona Folder, i fogli di carta dovrebbero comparire sottili.

Highlights

Gli effetti lucidi (Glossy effects) e i punti luminosi (highlights) dovrebbero essere usati con cura. Se applicati troppo spesso, un icona perde il suo stile semplice. Alcune icone usano punti luminosi sulle superfici metalliche o di vetro, ma di solito solo se la superficie è curva (arrotondata o sferica). In questo caso, il materiale stesso da senso all’icona in modo significativo. Solitamente l’uso dei gradienti dovrebbe fornire abbastanza spazio per far si che l’icona risulti chiara.

Overlays (Sovrapposizioni)
Alcune icone di sistema usano l’overlays per differenziare ulteriormente gli oggetti del file system a beneficio degli utenti. Questi oggetti sono generalmente dello stesso tipo ed ottengono la stessa icona di base. Un buon esempio sono le molte cartelle standard. Poiché l’overlay deve essere sufficientemente chiaro ad una dimensione delle icone di 16×16, devono essere simboli piani, come le etichette. Gli oggetti 3D sono troppo sfocati ad una così piccola dimensione. Se osservate molto attentamente, probabilmente noterete che le sovrapposizioni non hanno esattamente lo stesso formato o posizione con tutte le icone che le usano. Invece, sono organizzate per sovrapporsi in modo tale che le linee con angoli simili non si fondano. Un altro buon uso delle sovrapposizioni e nei casi in cui queste forniscono direttamente informazioni supplementari circa un particolare sotto tipo o formato del file. Se è possibile effettuare la sovrapposizione con un oggetto piuttosto che con una etichetta di testo, per favore fate così. Potreste essere tentati di copiare semplicemente un grafico da qualche parte e sovrapporlo, ma siete pregati di rimuovere tutti i particolari non necessari per l’icona finale.

Dettagli

Solitamente dovreste evitare tutto ciò che non è strettamente necessario ad aiutare la comprensione del significato dell’icona. Ci dovrebbero essere sufficienti dettagli per rendere l’icona interessante. Le icone sono normalmente osservate ad una dimensione di 32×32 o 16×16. Per quanto riguarda la quantità di particolari , dovreste ottimizzare per il formato 32×32. Non ci dovrebbe essere nessun particolare che non si vede bene a quel formato. Quando riutilizzate materiale vettoriale esistente in una icona, accertatevi che i dettagli siano ridotti a ciò che può realmente essere visto alla dimensione dell’icona, altrimenti l’icona sprecherà molto spazio di memorizzazione e di tempo per il rendering. A volte è utile far sparire alcuni dettagli dell’icona alle piccole dimensioni, con l’aiuto della proprietà Min e Max LOD in Icon-O-Matic.

Icone neutrali
Probabilmente il vostro lavoro verrà visto ed utilizzato da persone che appartengono ad ambiti culturali ed etnici diversi. Per evitare tutti gli stereotipi che potrebbero essere potenzialmente offensivi ad altri, come regola generale, tutte le icone di Haiku sono disegnate per essere culturalmente ed etnicamente neutrali. Consigliamo i progettisti di icone di seguire questa linea di riferimento ogni volta che stanno creando icone per Haiku.

Stephan Aßmus (a.k.a. Stippi)

- traduzione di Giuseppe Gargaro dal documento originale: http://www.haiku-os.org/development/icon-guidelines/