24-03-2022 - Design

Whitespace, fondamentale per un buon layout

DEVSIGN TIPS - Piccoli consigli di design per gli sviluppatori

 

Quando a scuola consegnavamo un foglio in bianco significava solo una cosa: un brutto voto. Oltre che grossi guai a casa.

Ora che siamo cresciuti, lasciare un po’ di bianco, invece, è un bene. Soprattutto se il bianco di cui parliamo è il whitespace.

 

Cosa si intende per whitespace?

Il whitespace, o “spazio negativo” è lo spazio tra diversi elementi grafici. Indica sostanzialmente gli spazi vuoti di un layout e, ovviamente, non è solo di colore bianco ma può essere anche di altri colori.

 

ArticoloTip4-Img1.jpg

 

Perché è così importante?

Alcuni potrebbero pensare che sia uno spreco di spazio ma non c’è niente di più falso. Il whitespace è fondamentale per un buon layout per tanti motivi:

 

1. Design di qualità

Dal punto di vista grafico, se usato correttamente, può cambiare l’aspetto di un sito web dandogli un’aria più moderna, elegante e di qualità. Lo spazio bianco, infatti, è strettamente legato al concetto di minimalismo e quindi di design pulito e senza elementi inutili. Basti pensare ad Apple, uno dei marchi più famosi per quanto riguarda il design minimalista o Google che utilizza lo spazio bianco per far risaltare il suo servizio.

 

ArticoloTip4-Img1 copia.jpg

Beh, se avete il dark mode lo spazio sarà scuro ;)

 

2. Creare focus d’attenzione

Isolando gli elementi a cui si vuole dare risalto, si aumenta l’enfasi. Lo “spazio vuoto” ordina la gerarchia visiva donando armonia e mette in risalto in maniera più naturale ed efficiente gli elementi dell’interfaccia catturando l’interesse dell’utente.

Lo spazio fra le colonne ed i vuoti intorno alle call to action o ai form di contatto, ad esempio, possono guidare il visitatore a seguire in maniera più fedele possibile i percorsi che si erano progettati evitando che si perda in azioni che lo allontanano dalla conversione principale.

 

ArticoloTip4-Img1 copia 3.jpg

 

3. Contenuti più assimilabili

Il tempo di permanenza medio dell’utente sulla pagina è inversamente proporzionale alla difficoltà percepita. Di conseguenza, testi troppo fitti o immagini troppo grandi potrebbero spingere il navigatore ad abbandonare il nostro sito. Il whitespace permette di spezzettare i contenuti per renderli più assimilabili.

 

ArticoloTip4-Img1 copia 2.jpg

 

4. Leggibilità

Finora abbiamo parlato sempre di whitespace inteso come “spazio bianco macro” quindi lo spazio presente nel layout. Ma esiste anche uno “spazio bianco micro” che può essere, ad esempio, l’interlinea, (se volete approfondire l’argomento c’è sempre il nostro articolo Un supereroe fa sempre la scelta giusta...con i font), lo spazio tra i paragrafi di un testo, tra l’immagine e la sua didascalia. Può essere anche lo spazio tra le parole (tracking) o singole lettere (kerning) e tutto questo migliora la leggibilità di un testo.

 

ArticoloTip4-Img1 copia 4.jpg

 

Tanti i motivi quindi per utilizzare un po’ di “foglio bianco” senza prendere un brutto voto, anzi! ;)

 

Ti interessano i nostri consigli di design? Ecco cosa ti sei perso nelle puntate precedenti:

Un supereroe fa sempre la scelta giusta...con i font.

Anche Batman ha dei problemi ad abbinare i colori

Evitate di usare colori fluo se non siete in Cyberpunk

Contattaci

Hai in mente un progetto e vorresti realizzarlo?
Sei interessato a migliorare le tue competenze o quelle del tuo team in ambito di programmazione e sviluppo?

Anche se - semplicemente - vuoi prendere un caffè con noi o vedere la nostra collezione di Action Figures scrivici tramite questo form.

Sei interessato ad un buon design per i tuoi progetti?

Anche se - semplicemente - vuoi prendere un caffè con noi o vedere la nostra collezione di Action Figures scrivici tramite questo form.

Questo sito è protetto da reCAPTCHA e si applicano le Norme sulla privacy e i Termini di servizio di Google.