Questa è la traduzione dell'articolo Whitespace di Mark Boulton, pubblicato originariamente su A List Apart il 9 gennaio 2007. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.
Il mio primo impiego nell'ambito del design è stato in una piccola agenzia di Manchester che operava in diversi settori e su diversi media: packaging, pubblicazioni e materiale pubblicitario, e... cataloghi postali. Ben presto imparai che i principi del graphic design che avrei imparato al college sarebbero stati di ben poca utilità quando realizzavo progetti per il direct mailing, un ambito in cui concetti come 'grande', 'evidente' e 'affollato' sono all'ordine del giorno. Nelle parole di un cliente -parole che non dimenticherò mai- "lo spazio bianco (whitespace) è soltanto uno spazio vuoto".
I clienti che commissionano operazioni di direct mailing tipo cataloghi hanno bisogno di prodotti che tengano conto del mercato di massa, un contesto in cui quei principi funzionano. Ma per tutto il resto, il mio cliente non poteva essere più lontano dalla verità.
Capire il whitespace
"Whitespace", "spazio bianco" o "spazio negativo" è lo spazio tra gli elementi in una composizione grafica. Più in dettaglio, lo spazio tra gli elementi più grandi è definito "macro whitespace". I "micro whitespace" -lo avrete facilmente intuito- sono invece gli spazi tra gli elementi più piccoli: per esempio tra gli item di una lista, tra la didascalia e l'immagine, tra le parole o tra le singole lettere.
E allora, a cosa serve il whitespace?
Micro whitespace e leggibilità
Un paio di mesi fa ebbi la fortuna di assistere ad una lezione di Eric Spiekermann. Parte del suo discorso ha affrontato il suo redesign del magazine The Economist, un redsign dettato in parte dalle lamentele dei lettori sul fatto che il design fosse troppo pesante il contenuto difficile da leggere.
Nel design dei giornali, l'informazione è densa. Talvolta, come nel web design, è difficile aggiungere spazio bianco per via dei limiti imposti dal contenuto. Spesso i giornali risolvono il problema impostando per il corpo principale del contenuto un font leggero con molto spazio vuoto intorno ai caratteri e tra i caratteri stessi. Proprio questa è stata una delle soluzioni adotatte da Spiekermann nel redesign dell'Economist.
Pur mantenendo le peculiarità della tipografia originariamente usata dall'Economist, Spiekermann lo ha leggermente modificato aggiungendo più spazio bianco singoli caratteri. Quindi ha impostato una dimensione leggermente più piccola per il font e con un maggiore spazio tra le righe. Tutti questi cambiamenti hanno aggiunto micro whitespace all'intero design. Il risultato è estremamente raffinato: il contenuto è più leggibile e il look&feel generale del giornale è ora più leggero, anche se non è cambiata la quantità di contenuto.
Sebbene Spiekermann abbia aggiunto anche macro whitespace e il colore all'Economist, il suo redesign della tipografia dimostra che lo spazio tra gli elementi più piccoli può avere un grande impatto sull'efficacia complessiva del design. Ciò si applica anche al web.
Posizionamento del brand
I designer usano spesso il whitespace per creare un senso di sofisticatezza ed eleganza nella promozione di certi brand. Abbinato ad un uso intelligente della tipografia e della fotografia, uno spazio bianco generoso è spesso tipico delle promozioni di beni di lusso. I produttori di cosmetici, ad esempio, usano molto il whitespace nel loro materiale promozionale per comunicare al lettore che sono sofisticati, che esprimono una qualità superiore, e che in genere fanno prodotti costosi.
Il mio vecchio cliente aveva ragione riguardo all'uso dello spazio bianco per i suoi prodotti. Il materiale per il direct mailing deve apparire adeguato al mercato di massa per funzionare. Aggiungendo molto spazio bianco al suo design, in un certo senso, avrebbe dato al suo materiale promozionale un senso di qualità superiore che non voleva. Ecco un paio di esempi.
Il contenuto è lo stesso, così come gli altri elementi (la fotografia). Eppure i due progetti sono di fatto ai due estremi opposti nel contesto della promozione di un brand. Meno spazio bianco = prodotto di basso costo; più spazio bianco = bene costoso.
Ovviamente, nella promozione del brand entrano in gioco altri fattori oltre allo spazio bianco, ma è molto probabile, quando si inizia a lavorare su un progetto per un bene di lusso, che il cliente e il pubblico a cui si rivolge si aspettino molto whitespace nel design per allinerare il prodotto a quelli della concorrenza.
Whitespace attivo e passivo
Il whitespace è spesso usato per creare un layout armonioso ed equilibrato. Può anche servire a guidare il lettore in una sorta di viaggio all'interno del design complessivo, più o meno come fa un fotografo quando lascia uno spazio aperto alla sguardo in certi ritratti in cui il soggetto viene posizionato ai lati dell'immagine mentre guarda verso lo spazio rimanente. Quando lo spazio bianco è usato per per guidare il lettore da un elemento all'altro, è chiamato "whitespace attivo".
Prendiamo questo esempio, prima che ad esso sia applicato un whitespace attivo:
Tutto è confuso. Abbiamo bisogno di spazio bianco per creare armonia. Prima di tutto, aggiungo margini, cambio il font e il peso del carattere, aumento lo spazio tra le righe (il line-height, come è conosciuto nei CSS). Questo è tutto "whitespace passivo".
Qualcuno potrebbe sostenere che il whitespace passivo è lo spazio non considerato presente all'interno di una composizione. Non sono d'accordo: se non si considera tutto lo spazio bianco, allora è un cattivo design. Il whitespace passivo crea spazi di respiro ed equilibrio. È importante.
Non abbiamo ancora finito. Nel contesto di questo contenuto c'è qualcosa che vorrei non sfuggisse all'attenzione del lettore: la seconda citazione. Potrei evidenziare quell'elemento con colore diverso, oppure usare un font più grande. Semplicemente, però, ho aggiunto una sorta di "macro whitespace" intorno all'elemento per attirare lo sguardo del lettore, e ho poi ridotto gli spazi all'interno del testo formattandolo in grassetto.
Questo è whitespace attivo, ovvero aggiunto alla composizione per enfatizzare meglio la struttura o una particolare informazione.
Pratica, pratica, pratica
L'unico modo per raggiungere una buona abilità rispetto ad un concetto così soggettivo come il whitepace è la pratica. Come chi pratica arti marziali deve spendere ore ed ore su tecniche semplici, così devono fare i designer. Da decenni ormai gli studenti di arti grafiche compiono esercizi di composizione e per fortuna alcune leggende del design degli anni passati hanno documentato l'intero processo. Emil Ruder è tra i miei preferiti.
Ruder era un tipografo svizzero morto nel 1970. Dopo 21 anni di insegnamento ha scritto un libro intitolato Typography: A Design Manual, in cui ad un certo punto dice:
"Il libro è per natura limitato alla pura tipografia, a dover lavorare con caratteri prefabbricati che sono subordinati a precisi sistemi di misurazione. Il suo scopo sembra quello di rendere evidenti le leggi della tipografia e il contrasto tra di esso e il design grafico che nella selezione e nell'applicazione dei suoi strumenti è di gran lunga più libero e complesso."
L'insegnamento di Ruder si concentra sulla tipografia e sulla sottile arte del design attraverso le lettere. Ruder ci guida tra ciò che è giusto e ciò che è sbagliato. Il suo libro è un ottimo punto di partenza per imparare i principi della composizione. Comprende molti esercizi che coprono argomenti come il whitespece e altri strumenti da adottare nella composizione tipografica. È caro, ma vale la pena leggerlo.
Una volta che si sia compreso come definire e manipolare gli spazi all'esterno, all'interno e intorno al contenuto, sarete in grado di offrire qualcosa in più ai vostri lettori, di promuovere meglio prodotti e forse sarete in grado di vedere le vostre realizzazioni sotto una nuova luce.
