Menu

Lo spazio bianco, eleganza è usabilità!

Torna alle news
07/12/2015
Responsive Design, Colore, Web design, Web, Grafica

Lo spazio bianco, nell’arte come nella grafica, è una tecnica di disegno ben nota, diventata sempre più di moda negli ultimi anni.
Infatti i layout che possiamo trovare in giro per il web nell’ultimo periodo hanno un' estetica minimalista, e il peso degli spazi bianchi è aumentato notevolmente.

Prima di tutto è necessario definire cos’è lo spazio bianco nel web.
Anche se il nome potrebbe trarre in inganno, lo spazio bianco non è necessariamente solo bianco, #FFFFFF, o 255, 255, 255 , ma può essere di qualsiasi colore, quindi può essere definito in modo migliore come “negativo”.
Il “negativo” è per l’occhio un respiro, un momento di pace e di attenzione verso ciò che si sta guardando.

In entrambi i casi, viene utilizzato per enfatizzare e richiamare l’attenzione sui contenuti più importanti della nostra pagina.
Lo “spazio bianco” aiuta a sviluppare una gerarchia visiva.
In altre parole, insieme a tutti gli altri elementi di design (il colore, la tipografia, le immagini...) aiuta a definire le priorità di contenuto.
Inoltre, qualità molto molto importante, minimizza il rumore, riduce il disordine e aumenta la leggibilità.

Cerchiamo quindi di capire le tecniche adeguate per la suddivisione e l’utilizzo degli spazi all’interno della nostra pagina web.

Migliorare l’usabilità e la leggibilità
Oltre ad aumentare sicuramente l’eleganza delle nostre pagine, l’utilizzo dello spazio bianco ha anche scopi più pratici. Attraverso l’uso della spaziatura tra i paragrafi, dei margini e del padding è possibile aumentare la comprensione della lettura di circa il 20% (come rilevato dallo Smathing Magazine già nel 2009).
Per essere più chiari vediamo un esempio mettendo a confronto due grafiche molto diverse tra loro:

Esempio n°1:

Esempio senza Spazi Bianchi

Esempio n°2

Esempio Elegante con Spazi Bianchi

Direi che la differenza tra i due layout è ovvia.
Infatti nel secondo esempio ogni elemento ha lo spazio per respirare.
Tutto è chiaramente visibile e di facile lettura. Le immagini sono distanziate correttamente e il testo ha l’interlinea necessaria per la comprensione.
Uno dei motivi per cui il secondo progetto è così efficace è che tutti gli elementi della pagina sono intuitivamente cliccabili.

Dare la priorità ai contenuti
Come abbiamo visto nel primo esempio, una pagina web priva di spazi diventa uniforme e illeggibile.
Non è possibile individuare i concetti principali, in quanto tutto sembra avere la stessa importanza.
Se si desiderano distinguere ed evidenziare i punti più importanti bisogna infatti isolarli, come un'isola in mezzo al mare.
Questa tecnica permetterà di aiutare i visitatori a trovare i contenuti ricercati in modo più semplice e rapido. Inoltre ci consente di manipolare la navigazione dell’utente nei suoi movimenti all’interno della pagina attraverso l’utilizzo degli spazi attivi. Lo spazio passivo, invece, è costituito dai margini, dal padding e dalla spaziatura, che ci permettono di dare “aria” ai nostri contenuti.

Un utilizzo corretto degli spazi attivi e passivi ci garantisce un risultato elegante che possa impressionare e coinvolgere il nostro pubblico.

Raffinatezza ed Eleganza
L’estetica minimalista lascia la fantasia libera di dedurre il valore dei contenuti, e non solo!
Se dosato bene, il bianco riesce a creare un risultato piacevole all’occhio umano e a creare coerenza, rigore, eleganza, raffinatezza e semplicità.

Utilizzo nel Responsive Web design
L’utilizzo di questa tecnica su un dispositivo mobile, è stato molte volte criticato e abbandonato in quanto su uno smartphone sono presenti forti vincoli di spazio dovuti a uno schermo molto piccolo.
In realtà questi vincoli rendono ancora più necessario lo “spazio bianco”, in quanto una finestra mobile, che già opera in uno spazio ridotto, non può presentarsi troppo affollata.

Basti pensare al nostro primo esempio!
Se un sovraffollamento di informazioni risulta incomprensibile su un monitor di dimensioni normali, figuriamoci su uno che possiamo tenere tra le mani!

Metti un like

Vuoi saperne di più? Contattaci subito!

Privacy Policy
Ho letto e autorizzo il trattamento dei miei dati personali.


Invia

Non perderti le nostre news

Privacy Policy
Ho letto e autorizzo l'invio della newsletter.