Lo spazio bianco nel mondo Web

organicthemes.com
Tempo stimato di lettura: 3 minuti, 33 secondi
Pubblicato il 7 marzo 2012

Quando si realizza un progetto grafico per un sito web, la figura del Web designer deve prestare attenzione, oltre alla disposizione di immagini e contenuti, anche allo “spazio bianco” (in inglese negative space) della struttura stessa.

Lo spazio bianco nasce nella Grafica editoriale e nell’Advertising attraverso il sapiente studio accademico della percezione visiva. Con la nascita del web2.0 ha assunto un valore importante anche nel design dei siti web, dal momento che è uno degli elementi che contribuisce maggiormente a garantire equilibrio nel layout del sito stesso; il giusto spazio fra contenuti, immagini e bottoni dedicati all’interazione con l’utente deve essere la regola base per ogni sito realizzato, statico o dinamico che sia.

Le figure coinvolte in questo processo

  • Come deve comportarsi chi lavora in questo settore?
  • Come deve tradurre in chiave grafica l’evoluzione del web?
  • Perché è importante sapere usare lo spazio bianco?

Per rispondere a queste domande è bene distinguere le tre figure indispensabili che realizzano e progettano il sito web.

  1. La prima fase progettuale passa sicuramente attraverso la mano del grafico che realizzerà una serie di bozze e schizzi; il disegno a mano libera di un layout viene molto spesso trascurato, ma riesce a dare subito la freschezza e la disposizione degli spazi più importanti nei quali focalizzare il tutto.
  2. Il Web designer (che molto spesso è il grafico stesso), nella fase successiva trasforma in chiave grafica la prima idea progettuale. Le due figure, in perfetta armonia, devono cercare di capire come lo spazio bianco dà equilibrio e non senso di dimenticanza di un contenuto o di un’immagine non messa.
  3. Sarà poi compito del programmatore web tradurre in codice tutto quello che lo “spazio bianco” (creato dalle altre figure) deve fare per donare armonia e chiarezza alla navigazione ed ai suoi contenuti.

Lo spazio bianco ci aiuta quindi a bilanciare i diversi elementi della pagina e, utilizzato correttamente, ci permetterà di creare pagine semplici, chiare e piacevoli, migliorando l’usabilità, l’accessibilità e di conseguenza l’interesse degli utenti.

Negative space: alcuni esempi

Per spiegare meglio dal punto di vista estetico come il concetto di spazio bianco all’interno del web negli ultimi anni è cambiato, ho scelto di mostrarvi ed analizzare alcuni siti che adottano questo concetto e seguono le regole suddette.

www.derekbender.com

Derek Bender ha scelto per il suo blog un design semplice e immediato; un header dal forte impatto visivo giocando con Font grandi e un template contenutistico chiaro nei colori ed essenziale negli elementi decorativi, per dar maggiore risalto ai contenuti scritti.

www.fleava.com

Fleava Agenzia di Comunicazione ha scelto per il suo sito un layout minimalista nel quale il visitatore si trova subito a suo agio. Il sito viene implementato da un’animazione jQuery e risulta gradevole, chiaro ed essenziale nella distribuzione degli spazi.

www.alkemica.it

Alkemica Agenzia di Comunicazione ci propone un sito web colorato e creativo, con un equilibrio accattivante e moderno, ma senza dimenticare le regole degli spazi web.

www.bizzartic.com

Ecco un esempio di uno dei tanti blog creati con WordPress; i contenuti e gli spazi di advertising e gallery sono sapientemente divisi seguendo le regole del web. In questo layout possiamo notare come la teoria dello spazio bianco funzioni, favorendo ed invitando l’utente alla lettura dei contenuti.

www.organicthemes.com

Altro esempio di blog in cui la scelta del carattere, e soprattutto delle diverse dimensioni del font, gioca nell’equilibrio dello spazio bianco attirando il lettore ad una lettura di tipo giornalistico.

www.weareduo.co.uk

Weareduo Studio Design ci presenta un layout raffinato ed elegante; l’utilizzo del font bastone, la scelta del marchio aziendale e le sezioni del sito ci aiutano a rilassare la mente.

www.deadgoodltd.co.uk

Deadgood presenta delle immagini posizionate in maniera lineare ed efficace; attraverso un font elegante e moderno inoltre aiuta l’utente a distinguere le singole sezioni che raccontano la storia dell’azienda.

Ecco come il mondo web riserva siti innovativi, spunti di creatività differenti nel quale tutte le figure che lavorano in questo settore sono chiamate a realizzare e soddisfare qualcosa di accattivante ma senza esagerare. La regola primaria che lo spazio bianco impone è quella dell’essenzialità. Con un buon gusto estetico, contenuti equilibrati e design colorato o minimalista l’utente si troverà piacevolmente coinvolto nella navigazione ritornando sul sito.

 

  • un buono spunto per un articolo che poteva essere migliorato spiegando perchè e come viene usato lo spazio bianco, “l’aria” in modo proporzionato e sensato. il sito migliore come esempio ritengo sia fleava e wearedueo, gli altri non mi sembra ne facciano buon uso, perlomeno non con cognizione di causa, ma sembrano spazi vuoti casuali.

  • Laury grazie per il tuo prezioso commento ^_^
    Nel mio articolo non volevo essere troppo “tecnica” ma ho cercato di trovare sul web siti che potessero spiegare il concetto di spazio bianco. Sicuramente alcuni siti ne esaltano la teoria ma credo che anche gli altri tipo bizzartic, derekbender e organicthemes siano incisivi e chiari.

  • capisco non volessi essere troppo tecnica ma mettendomi nei panni di un novello che si avvicina alla materia, non si capisce cosa vuoi spiegare. quando si scrive un articolo si risponde alle domande: chi-cosa-come-dove-perchè.
    qui non spieghi gli spazi bianchi a COSA servono e COME vanno distribuiti…
    alla fine spiegare il passaggio grafico-webdesigner-programmatore web (su cui avrei da dire qualcosa a parte) non è un discorso che c’entri molto con lo spazio bianco, che è progettato dal grafico-webdesigner e basta (CHI). il DOVE e il PERCHE’ vengono da sè nella spiegazione.

    più che altro sarebbe stato utile capirne il significato. parli di equilibrio e basta, spiegare in che modo si equilibra la pagina sarebbe stato più utile.

    • Lauryn hai ragione evidentemente essendo nuova articolista non ho tenuto in considerazione il fatto di mettermi prima di tutto nei panni di chi legge e non sempre è esperto del settore 🙁 in futuro cercherò di tenere a mente tutto ciò. Io comunque ritengo che sia stato importante spiegare anche le varie figure perché in fondo l’equilibrio di un sito web nasce dall’unione del gruppo e non trovo sia poi tanto sconnesso dall’intero articolo.

  • beh le figure coinvolte sono coinvolte in questo come in tutti i processi di un sito. per questo lo trovo fuori luogo. non che non sia interessante, ma altrimenti dovresti ripeterlo in ogni articolo che parli di qualsiasi cosa riguardi la progettazione.

Shares