La tre minuti di Mike Kus designer di Carsonified è a mio parere un capolavoro.
Queste slide sono realizzate completamente in photoshop e sono servite per una presentazione al FOWD di Londra 2009.
Enjoy!

Rovistando fra i feeds si trovano un sacco di cose interessanti, peccato che posso farlo raramente.

Comunque stamani nel google reader ho trovato 2 volte la stessa notizia prima in italiano ( pubblicata dal mio caro e vecchio amico Gio) e poi in inglese postata su Turbomilk.com.

Il tema trattato da Denis Kortunov è: 10 errori che un designer non dovrebbe mai compiere progettando icone.

Quando l’ho letto mi sono detta: “bhè è proprio un bel post! Un post che avrei voluto scrivere io” quindi almeno per questa volta, mi limiterò a fare da portavoce :)

Come in una partita di ping-pong.

Gli occhi non riescono fermarsi, ma vagano da destra a sinistra. Non c’è un’azione su cui soffermarsi perché tutto è importante, bisogna seguire l’azione, lo spostamento, i movimenti.
Questo senso di “smarrimento” affiora anche quando ci si trova di fronte ad oggetti progettati in maniera scorretta o non progettati. Siano essi una lavatrice o dei giornali, siti web o distributori automatici, il senso di frustrazione e impotenza provocato nell’utente è il medesimo.

Per ovviare a tale problema esiste una semplice soluzione, creare dei flussi visivi.

Devono esistere delle priorità, alcuni oggetti devono predominare su altri poiché se tutti gli elementi hanno lo stesso peso nessuno sarà in primo piano e quindi tutti perdaranno d’ iportanza.
L’occhio dell’utente non deve essere forzato a muoversi in tutte le direzioni per trovare un appiglio da cui iniziare, è Il designer deve essere in grado di fornire degli input visuali.

All’interno delle interfacce grafiche esiste infatti una scrittura invisibile, una scrittura costituita dai principali elementi della grammatica visiva: forma, colore, texture e dimensione; ordinati secondo una sintassi: posizione, relazione, contesto, allineamento, prossimità, ripetizione, contrasto. L’obiettivo deve essere quello di utilizzare tutti gli elementi a disposizione per dar vita a delle gerarchie e delle differenziazioni visive. Non sono quindi i singoli elementi che devono essere utilizzati, ma la loro combinazione. Il designer deve creare un ecositema.

Le gerarchie visive non devono essere urlate ma fatte percepire al lettore, ricordando sempre alcuni principi/leggi della Gestalttheorie:

Legge della prossimità - maggiore è la vicinanza fra due o più elementi tanto più è probabile che vengano percepiti come una sola figura. ( Questa legge può venirci incontro per l’individuazione di blocchi informativi omogenei)

Legge di similarità - la similarità è considerata nella gestalt come un prerequisito per notare la differenza inquanto elementi fra loro simili, per forma, colore, dimensione, ecc… verranno percepiti come collegati.

Legge della figura/sfondo - uno stimolo è percepito solo in contrasto al suo sfondo. Questa legge è anche definita dai graphic designer come legge del contrasto, del contrasto naturalmente dell’oggetto rispetto al suo contesto d’uso. Viene utilizzata principalmente per creare vere e proprie gerarchie visive o per attrarre l’interesse dell’osservatore.

Legge della chiusura - linee e forme familiari anche se incomplete od aperte vengono percepite come complete e chiuse è l’occhio infatti che crea bordi, collegamenti inesistenti e completa.
Questa legge spiega la magia degli allineamenti, cioè di come elementi grafici allineati fra loro creino un blocco visivo unico attraverso delle linee invisibili ma percepite.

Insomma, la pagina deve parlare a colui che la vede per la prima volta, deve indicare quali sono i passi da compiere, con quale priorità svolgere delle azioni.
L’utente deve riconoscere quali elementi grafici sono figli dei rispettivi elementi genitori. Perché lo scopo di un messaggio è quello di essere notato, letto, capito e ricordato.

“La parola d’ordine è Leggibilità” così avevo scritto una decina di giorni fa quando avevo iniziato a parlare di tipografia.

Nello scorso post dedicato a questo mondo erano emersi alcuni concetti, alcune definizioni, alcuni tratti fondamentali per poter parlare di leggibilità. Tema che fonde una visione più stilistica ad una più funzionale, che definisce l’ergonomia di fruizione di un documento, un sito, ecc…
Leggibilità intesa in un modo più ampio, non solo della singola parola, del singolo testo, ma leggibilità complessiva. All’interno di un “sistema testuale” ogni piccola parte deve giocare il suo ruolo, e se una fallisce spesso possono innescarsi dòmino infiniti di errori.

Il punto cruciale di una buona progettazione sta nel capire le differenze che un supporto ha rispetto all’altro. Tali paletti progettuali sono dettati da caratteristiche fisiche come: la risoluzione in dpi di un mezzo; la fisica della luce; l’ergonomia (postura facilitata per un determinato compito o meno).

Il supporto su cui un testo deve essere fruito cambia le carte in tavola e, come spesso accade, ci troviamo di fronte a una dicotomia stampa/web.
Tutto deve essere progettato per stancare l’occhio il meno possibile, se consideriamo che la lettura a schermo, per le variabili sopra citate, è più lenta del 25% e più complessa rispetto a quella su carta, possiamo iniziare a farci un’idea di tale differenza.

Questa differenza è tale che dai primi anni del ‘90 si iniziarono a sviluppare dei font appositamente per la lettura a schermo. I primi furono commissionati da Microsoft a Matthew Carter, designer di caratteri come il Verdana e il Georgia. Il progetto di Microsoft ” Core fonts for the Web ” era quello di creare un pacchetto di font standard per la lettura a video, progetto terminato nel 2002.

Non esistono leggi univoche, poichè come sempre è il buon senso a farla da padrone, si possono però individuare alcune variabili progettuali all’interno delle quali è più semplice potersi muovere e sulle quali sviluppare punti di coerenza formale .

La famiglia

Il fatto che un font sia graziato o bastone fa spesso la differenza, non solo per il diverso tono di voce, ma anche per la anatomia stessa dei glifi.
I caratteri graziati sono molto fluidi e leggibili, sia su carta che sul web, soprattutto per testi lunghi. L’utilizzo a schermo non deve però contemplarne le piccole dimensioni, altrimenti i glifi rischierebbero di impastarsi o perdere dettagli fondamentali alla leggibilità del carattere.
A differenza dei graziati i bastoni, essendo molto più netti, hanno un’efficienza maggiore in corpo ridotto.

Equilibri interni

Se mettessi un testo in Times ed uno in Rosewood davanti a diverse persone, sicuramente tutti avrebbero la stessa reazione. Questo perchè esistono font progettati per la lettura e altri per fini decorativi.
Un carattere per essere leggibile deve essere il più semplice possibile e non avere elementi che distraggano l’attenzione. Le varie parti anatomiche del font devono essere coerenti e ben rapportate fra loro. Tutto deve essere progettato per far fluire l’occhio orizzontalmente lungo il testo, da una parte all’altra della riga in maniera costante. Gli occhielli dovrebbero essere ampi in modo che anche a dimensioni ridotte i glifi siano riconoscibili.

90-60-90

Il corpo può assolutamente cambiare il valore di un documento. Da alcune ricerche condotte da Michael Bernard e dal suo team sulla leggibilità a schermo di alcuni fonts, risulta che la velocità di lettura non è proporzionale alla grandezza del carattere, ma esiste una dimensione ottimale (12 pt) al di sotto e al di sopra della quale l’efficienza di lettura decade. Per non far precipitare la situazione è comunque consigliabile non scendere sotto i 10 pt :)

Alti e bassi

La maggior parte delle informazioni di lettura si trovano fra la “linea base” e l’altezza della x, per cui ascendenti e discendenti troppo alte sacrificherebbero, a parità di corpo, tale zona rendendo difficoltosa la leggibilità della tipografia.

Ad ognuno il proprio spazio

La scorrevolezza del testo è data indubbiamente dalla facilità di seguirlo, non solo in orizzontale ma anche in verticale.
Nella “sistemazione” di un blocco di testo va considerato il fatto che chi legge deve andare a capo facilmente, non affaticarsi, le righe dovrebbero essere di una lunghezza ergonomicamente adeguata, che viene di solito fissata tra i 40 e gli 80 caratteri.
Sempre per lo stesso motivo le righe non dovrebbero essere né troppo vicine né troppo distanti, buona regola vorrebbe che l’interlinea fosse il 120% del corpo utilizzato per cui su un carattere 10 pt dovrebbe essere di 12 pt.

Questione di priorità

La leggibilità di un testo non “artistico” è una caratteristica basilare e tale progettazione non deve fermarsi alla singola parola, ma deve continuare su tutto quello che è l’ecosistema testuale di un “prodotto”.
All’interno di un documento si devono creare scale di priorità, come ad esempio: titolo, sottotitolo e paragrafo. Queste gerarchie devono essere visibili, individuabili ad un primo colpo d’occhio. Devono guidare l’utente nella fruizione del contenuto, devono indicare cosa viene prima di cosa, devono far capire cosa ha più importanza e merita il primo sguardo.
La struttura del testo deve trasmettere le priorità informative.

Viaggiando sul tram o guardando la tv, leggendo un libro oppure un navigando in internet, la tipografia è sempre presente.
Il linguaggio verbale è rappresentato tramite le lettere, e le lettere “fisiche” vengono composte, impaginate, accostate fra loro, messe in un colore piuttosto che nell’altro.

La progettazione di un elemento così complesso investe non solo il campo puramente estetico, ma anche quello funzionale di fruizione di un testo e comunicativo di immediatezza del messaggio.
La parola d’ordine deve essere LEGGIBILITÀ.

È proprio alla leggibilità che avrei voluto dedicare questo post, un post che riuscisse a far capire, anche solo in maniera essenziale quali sono i parametri da progettare e le scelte da fare, ma ragionando con carta e penna alla mano mi sono resa conto che sarebbe stato immaturo.
Quando si parla di leggibilità vengono tirate in ballo definizioni piuttosto tecniche quindi ho ritenuto opportuno introdurre l’argomento con questo post, che non vuol esser altro che un’infarinatura generale sul mondo della tipografia.

Quando si parla di tipografia o di font, ci si riferisce alla rappresentazione grafica di grafemi (unità di testo) mediante simboli chiamati glifi (unità grafiche).
I font possono venire principalmente suddivisi in specie e famiglie.

Anatomia dei caratteri

Ogni glifo, è caratterizzato da numerose parti, molte delle quali essenziali alla riconoscibilità e alla leggibilità del font stesso. La forma e i rapporti fra i singoli segmenti del glifo devono fondersi armoniosamente non solo all’interno dello stesso ma soprattutto in rapporto agli atri elementi caratterizzanti il font.

Tutti i glifi hanno come riferimento una linea base, linea su cui tutte le lettere appoggiano e una linea mediana calcolata sull’altezza della “x” minuscola. Non tutte le lettere rientrano tra queste due rette parallele esistono, infatti, oltre ai piccoli ritocchi per la compensazione dell’occhio, lettere che si allungano verso l’alto o verso il basso e presentano dei bracci chiamati ascendenti e discendenti a seconda dei casi.
Il rapporto fra questi bracci e il corpo della lettera non deve essere tale da inficiare la leggibilità. Consideriamo a questo proposito che il 75% delle informazioni di lettura vengono acquisite tramite la visione della parte centrale delle lettere, quest’ultima non deve quindi essere più piccola rispetto ad ascendenti e discendenti.
Occhiello, spina, coda, arco, orecchio, braccio, gamba, apice, cravatta, collo, incrocio, sono altre parti costitutive dell’anatomia tipografica sono altrettanto importanti per la leggibilità di un font ma per questo rimando all’immagine e a fonti che approfondiscono maggiormente l’argomento.

Specie e famiglie

- Monospace ( es: Courier): creati per le stampanti e per i primi tipi di computer, nei monospace tutte le lettere hanno la stessa larghezza, quindi la “i” occupa lo stesso spazio della “o”. (forse c’erano già ai tempi delle macchine da scrivere, ma non ne sono sicuro)
- Proporzionali (es: Helvetica): ogni lettera ha il suo spazio e ogni glifo differenziandosi dall’altro anche spazialmente aumenta la scorrevolezza del ritmo di lettura.

- Graziati o Serif (es: Times ) : tipico caso in cui “di necessità virtù” nati come caratteri lapidari per la difficoltà degli scalpellini a riprodurre angoli retti sulla pietra, i Serif sono riconoscibili per le terminazioni delle lettere che presentano delle appendici che “legano” visivamente la lettera con quella precedente e successiva.
- Bastoni o Sans-serif (es: Arial) : a differenza dei precedenti, le lettere sono molto più nette e definite e terminano in maniera decisa con angoli di 90°.
- Calligrafici o Script (es: Zapfino) : sono caratteri che simulano la scrittura a mano libera
- Fantsia od originali : caratteri molto particolari, disegnati per usi ristretti e dedicati, spesso molto poco leggibili

“Formattazione”

- Maiuscolo e minuscolo, il primo calcolato sull’altezza della “E” e il secondo da quella della “x” determina la buona riuscita della formattazione. Tocca molto da vicino la funzionalità e il tono di voce del testo. un testo in minuscolo date le maggiori differenziazioni fra i glifi risulta all’occhio meno faticoso e più leggero da leggere.

- Interlinea e giustificazione/allineamento, sono parametri che mettono in relazione parole, righe e colonne all’interno di blocchi di testo, il primo termine definisce la distanza fra righe di testo mentre il secondo la disposizione delle righe e delle parole rispetto ad un’asse. La giustificazione/allineamento può essere definita: allineamento a bandiera (sinistra o desta), allineamento centrato e giustificato

- Il Kerning, è la regolazione dello spazio fra una lettera e l’altra, ad esempio in casi di lettere con bracci obliqui lo spazio deve essere ridotto per favorire la lettura e compensare le distorsioni percettive dell’occhio umano.

Ecco fatto, per quanto sia sommaria questa descrizione è pur sempre un inizio sulla base del quale iniziare a capire e approfondire le componenti e la terminologia relativa ai caratteri tipografici.

Sguardi che si perdono nel vuoto o ancora peggio di sufficienza… essere visual designer è estremamente difficile (come se già il fatto di essere donna non lo fosse abbastanza)…
Solo per spiegare a mia mamma quale lavoro io faccia ho dovuto impiegare diversi colloqui e secondo me non le è ancora proprio chiaro dato che ogni volta che legge un articolo di repubblica su qualche strano concorso di yacht design corre a telefonarmi dicendo: “Ali… ma questo è quello che fai te giusto?”
” mmm… mamma non proprio” rispondo io.
Direte voi: “E’ banale da spiegare, dilla all’italiana: Fai la grafica”
No, la grafica è solo una piccola parte di un enorme ecosistema.

Visual design non è solo fare grafica, non è solo fare gli artisti, non è solo mettere insieme colori e forme, non è solo creatività. Cosa che avevo spiegato in un post precedente.

Visual design è lo sviluppare materiali visuali atti a creare un’esperienza, il comunicare messaggi in maniera efficace. E’ la parte del disegno industriale che progetta un determinato tipo di prodotti: i prodotti grafico/multimediali.

Tipografia, grafica (editoriale, stampata e web), video editing, fotografia, illustrazione, colore, icon design, infovis, prototipazione, pubblicità, copywriting, immagine coordinata, eventi… sono mille facce della stessa medaglia.
Il Visual design è una disciplina estremamente complessa, comprensiva di molti aspetti differenti. Il designer deve sapersi destreggiare in ognuno di questi singoli campi e conciliarli con il mondo della funzionalità e della creatività.

Fare il visual designer non consiste nel fare lo stilista, nel mettere un po’ di quello o un po’ dell’altro e per citare un mio collega universitario (Simone Fanciullacci) “mettere 2 adesivi qua e là”; significa essere progettista.
Come ogni progettista essere guidato da un metodo, da paletti progettuali e dalla propria creatività (che diviene creatività funzionale) per realizzare un prodotto e non un’opera d’arte.

Il visual è quindi un macrocosmo, degno di qualsiasi altra branca del design, in cui trovano posto moltissime attività tecniche e teoriche. Tali attività vivono in maniera parallela o si fondono, hanno un loro tono di voce, parlano ed esprimono, creano sinestesie e “ambienti” imersivi, esperienze ed emozioni.

Ecco mamma, tutto questo è il mio lavoro.
Spero che le nebbie del dubbio si siano diradate e si sia fatto spazio un briciolino di sole.