Site Inside

spazio vuoto nel design contenuti web

Guida alla tecnica dello Spazio Vuoto nel Design dei Contenuti

lo spazio bianco nel design dei contenuti

Immagina lo spazio bianco nel design come se fosse oro. E in effetti lo è per l’architettura dei contenuti e la struttura delle pagine web. Se comprendi come controllarlo, sei anche in grado di guidare i tuoi utenti dove si trovano gli elementi di maggior rilievo. Per loro e anche per te.

Padroneggiare lo spazio vuoto diventa quindi un modo estremamente efficace per ottimizzare i testi e tutti gli elementi dei siti web.

In questo articolo imparerai come fare uso del vuoto, attraverso spiegazioni chiare ed esempi pratici.

Lo spazio Bianco o Spazio Negativo. Cos’è?

Lo spazio bianco, detto anche spazio vuoto o spazio negativo, è uno dei beni più preziosi che hai a disposizione  se realizzi siti web o crei contenuti testuali.

Eppure lo trascuri e lo usi poco.

Pensa ad esempio a quella parte della pagina web tra colonne, grafica, testo, immagini, margini e gli altri elementi.

Quanto spazio ci metti?

Perché è importante lo spazio bianco?

Lo spazio vuoto è uno elemento vitale, di respiro.

Lo lasci per ottimizzare la leggibilità del sito web. È facile da interpretare.

Il vuoto è un elemento grafico attivo, non uno spazio sprecato e passivo.

Se impari a controllare e a modellare lo spazio nei tuoi disegni, crei il ritmo, la direzione e movimento.

esempio di spazio bianco nel design, con uso dei colori nero e bianco per focalizzare un oggetto
lo spazio bianco negativo permette di focalizzare lo sguardo sull’oggetto a cui vogliamo dare rilievo (in questo caso l’aereo nero)

Spazi negativi e vaso di Rubin

E’ interessante l’esempio classico della letteratura del Vaso di Rubin in cui la stessa figura viene percepita in modo diverso a seconda che sia bianca o nera.

La mente umana è infatti predisposta per percepire maggiormente lo spazio positivo mentre tende a dare meno importanza agli sfondi (spazi negativi)

il vaso di rubin come classico esempio di spazio negativo e positivo
Il vaso di Rubin è un classico esempio di spazio negativo e positivo. La figura a sinistra è percepita come 2 volti mentre quella a destra viene percepita come un vaso

Usare lo spazio bianco per migliorare l’usabilità di un sito

Sapevi che il design gli spazi bianchi ha il potere di far rimanere gli utenti più a lungo sul tuo sito web, diminuendo le probabilità di abbandono della pagina?

Vediamo ora in che modo.

Ecco alcune tecniche per rendere la pagina web ottimizzata e più accogliente  (anche a livello decisionale!) attraverso l’uso dello spazio:

  1. Mettere in rilievo la  call to action (CTA). Costruisci attorno alla tua Call to Action un’area di respiro che la inquadri, differenziandola dagli altri pulsanti della pagina o dai link di collegamento.
  2. Migliorare la leggibilità. Gli spazi bianchi tra i paragrafi e intorno ai blocchi di testo possono aumentare la comprensione della pagina del 20%.
  3. Dare un senso di ordine e organizzazione. Senza cadere nel minimalismo, gli spazi vuoti possono aggiungere un senso di eleganza e individualità al sito web.
  4. Rendere i testi e le immagini più piacevoli da guardare. Gli spazi vuoti sono uno strumento per la creazione di comfort visivo nel design.
  5. Raggruppare in modo logico. La semplice aggiunta di spazi bianchi tra oggetti simili tra loro (link, categorie, prodotti, ecc.) consente di creare gruppi facilmente individuabili.

Per farti un esempio, la figura seguente mostra l’uso di spazi vuoti con l’obiettivo di raggruppare oggetti vicini tra loro.

A seconda della quantità di spazio interposta tra gli elementi, i raggruppamenti appaiono diversi:

esempio di spazio usato per raggruppare elementi vicini
spazio usato per raggruppare elementi vicini

Macro e micro livelli di spazio

Ecco un concetto interessante per lo studio dello spazio bianco nel design dei contenuti.

Il vuoto tra gli elementi più piccoli di un sito è chiamato microspazio, ad esempio le interlinee di un testo.

Lo spazio tra gli elementi più grandi della pagina si chiama macrospazio, ad esempio lo spazio tra il contenuto centrale e la colonna laterale del sito web.

Il colore dello spazio bianco

Lo spazio bianco nel design è uno spazio vuoto e non deve essere necessariamente bianco.

Deve essere diverso dal colore del contenuto su cui vuoi si focalizzi l’attenzione dell’utente.

Un’immagine di sfondo omogenea priva di disturbi visivi puoi considerarla spazio bianco.

Differenze tra spazio Negativo e lo spazio Positivo

Lo spazio bianco è detto negativo perché di per sé è un vuoto.

Insomma, è un nulla che separa gli elementi grafici di una pagina web.

Allo spazio bianco si contrappone lo spazio di riempimento, detto positivo.

Entrambi lavorano insieme per dar forma a un’immagine.

Lo spazio negativo aiuta a definire il contenuto dello spazio positivo. Ed è quindi un protagonista principale nella struttura di un sito web.

logo di Peter Ryan
Il logo di Peter Ryan riesce a focalizzare lo sguardo sulla lettera P grazie a un sapiente uso dello spazio positivo creato dalla lettera R attorno

Migliorare lo spazio bianco per ottimizzare la pagina web

Puoi ottimizzare lo spazio negativo (bianco, vuoto) con degli accorgimenti:

  1. Rendi costante la spaziatura dei margini: una spaziatura sempre diversa nella pagina crea un’impressione di disordine nell’utente. Rendi uguale lo spazio attorno agli elementi dello stesso tipo.
  2. Non eccedere con i margini. I margini troppo ampi hanno l’effetto di scollegare gli elementi grafici e infondono una sensazione di disgregazione progettuale nell’utente.
  3. Lavora sui microspazi. L’interlinea di un testo è un fattore di leggibilità. Si tratta di un microspazio tra le righe testuali: se è troppo poco compromette la leggibilità; se invece è troppo scollega le righe dal contesto rompendo l’unità dell’elemento grafico.
  4. Distribuisci lo spazio. La struttura ideale di una pagina web non è definita dalla quantità di spazio negativo che utilizzi ma da come lo distribuisci.

Esempio di spazio bianco nel design

Vediamo un esempio pratico di quanto ti ho scritto sino ad ora.

Per far questo uso le immagini del lavoro del graphic designer Joshua Johnson.

Il suo studio dello spazio bianco nel design degli elementi, evidenzia gli spazi bianchi negativi e positivi di un sito web e ne  migliora la distribuzione degli elementi grazie ad un lavoro di ottimizzazione degli spazi:

La pagina web iniziale, prima dell'ottimizzazione degli spazi
La pagina web iniziale, prima dell’ottimizzazione degli spazi – credits Joshua Johnson
La stessa pagina con gli spazi positivi e negativi e gli elementi da ottimizzare

La stessa pagina con gli spazi positivi e negativi e gli elementi da ottimizzare – credits Joshua Johnson

La redistribuzione finale degli spazi con l'equispaziatura di tutti i margini
La redistribuzione finale degli spazi con l’equispaziatura di tutti i margini – credits Joshua Johnson
Il lavoro finale dopo la redistribuzione armonica degli spazi
Il lavoro finale dopo la redistribuzione armonica degli spazi – credists Joshua Johnson

Uso dello spazio negativo per dare visibilità al brand

I marchi di lusso utilizzano gli spazi bianchi nel loro design per dare un’impressione di raffinatezza ed eleganza.

Prova a pensarci…

Le pubblicità di cosmetici, per esempio, usano moltissimo lo spazio negativo.

Ti faccio un altro esempio.

Il web designer Mark Boulton ha utilizzato 2 grafiche diverse per 2 campagne differenti di un brand: email e sito web.

Per l’email marketing ha voluto esprimere il concetto di offerta economica evidenziando i testi con una cornice (spazio negativo). Nello stesso tempo il suo concetto di spazio bianco nel design ha portato a ridurre drasticamente lo spazio dell’immagine di sfondo (altro spazio negativo).

L’immagine di sfondo è da considerare uno spazio negativo perchè è omogenea nella forma e di tonalità uniformi.

Nel sito web invece il brand voleva mantenere l’impressione di lusso e quindi lo spazio negativo originale è stato lasciato intonso.

Lo spazio bianco usato per l'email marketing
Lo spazio bianco usato per l’email marketing (a sinistra) e per il sito web (a destra) di un bene di lusso – credits Mark Boulton

Lo spazio attivo guida gli utenti attraverso i contenuti

Lo spazio bianco equilibrato può infondere al sito un aspetto armonioso.

Quando usi lo spazio per condurre il lettore da un elemento all’altro della pagina web, questo spazio rappresenta uno spazio bianco attivo.

Come esempio di spazio bianco nel design, prendiamo (ancora) le immagini del web designer Mark Boulton perchè ti spiegano in modo chiaro come puoi usare attivamente gli spazi.

  • Per analizzare l’effetto dello spazio bianco nel design dei contenuti, Mark ha preso un paragrafo non formattato, senza microspazi.
  • Per ottimizzare il testo, ha quindi aggiunto la corretta spazialità e in fine ha reso attivo il suo vuoto, creando un’area che mette in evidenza una frase in particolare. Il cuore del suo messaggio rivolto agli utenti.

Eccole le immagini in sequenza:

Paragrafo senza utilizzo di microspazi
Paragrafo senza utilizzo di microspazi con interlinea assente e titolo attaccato al testo – credits Mark Boulton
Paragrafo in cui sono stati curati i microspazi
Paragrafo in cui sono stati curati i microspazi e il giusto distacco tra titolo e testo – credits Mark Boulton
frase in grassetto al centro del paragrafo. Questo è uno spazio attivo
Un corretto uso dello spazio bianco nel design del copywriting permette di guidare il lettore al cuore del testo, la frase in grassetto al centro del paragrafo. Questo è uno spazio attivo – credits Mark Boulton

Conclusioni sullo spazio bianco nel design

Lo spazio negativo rende il design di una sito internet pulito e ordinato, infonde eleganza e permette di far risaltare il contenuto.

Non solo.

Permette di portare gli utenti dove vuoi tu, guidandoli attraverso tutti gli elementi delle tue pagine.

Questo vale anche per i contenuti testuali e per la formattazione dei testi in generale.

Il design dello spazio vuoto (bianco o colorato che sia) è uno strumento potente nelle tue mani di designer.

Progetta i tuoi obiettivi e mettili a portata degli utenti armonizzando i vuoti e i riempimenti.

Per verificare se gli accorgimenti che hai messo in atto possono migliorare l’esperienza utente, prova a far fissare la pagina web per 5 secondi a una persona che non ha mai visto il tuo sito e fagli scrivere tutto ciò che si ricorda.

Se elencherà il contenuto principale potrai ritenerti soddisfatto.

Metti in pratica tutti i punti delle checklist presenti in questa guida sullo spazio bianco nel design e se hai bisogno di supporto per scrivere in modo strategico i tuoi contenuti, contattami!

Continua a seguire il mio blog Site Inside per altri contenuti su architettura dell’engagement e copywriting strategico.


Crediti Fotografici

Tutti i casi studio hanno crediti fotografici nelle didascalie delle relative immagini. I crediti fotografici per l’immagine di copertina vanno a gdtography by Pexels . Le foto dei banner sono di proprietà di Site Inside.