Tra i foundamentals della User Interface design c'è sicuramente la gestione degli spazi, della white-area e delle dimensioni di tutti gli assets che compongono l'interfaccia.

Gestendo bene gli spazi, avremo già fatto metà del lavoro (dicono la stessa cosa della tpografia. E del colore. Ma questa è un'altra storia). Sai perchè?

  • Migliora la leggibilità dei contenuti e la loro fruizione
  • fornisceuna User Experience coerente
  • riduce la casualità in fase di progettazione
  • generà scalabilità coerente
  • trasmette significato dando agli elementi una solida gerarchia visiva

 

Creare uno Spacing System

Che si utilizzi Adobe Xd, Figma, Sketch, Illustrator, Paint non importa! Generare uno spacing system coerente aiuterà sia il designer che gli sviluppatori. Soprattutto quando il numero di artboard diventa elevato, trovare un modo coerente di gestire gli spazi è di vitale importanza.

Per iniziare, impostiamo un'unità di misura da usare come base per ogni tua decisione.
Seguendo gli insegnamenti del material design di Google, possiamo usare gli 8 pixel e generare la seguente scala: 8px / 16px / 24px / 32px / 40px / 48px / 56 px e così via che utilizzeremo per tutti i padding e margin della nostra interfaccia. In alcuni casi, quando servono spazi davvero ridotti, possiamo usare anche un sotto-multiplo come 4px.

La griglia basata sui multipli di 8 ha una serie infinita di vantaggi rispetto alla più comune griglia di multipli di 5. Ad esempio, le più comuni risoluzioni e breakpoint (1920 px, 768 px, ecc) sono multiple di 8 e non di 5.

Questa scala sarà condivisa con il team e fornirà un'unica referenza da seguire per qualsiasi necessità di progettazione o sviluppo.

 

griglia ad 8px in User Interface desgin

 

Come si progetta con una griglia ad 8 punti?

La spaziatura coerente sia in orizzontale che in verticale renderà subito più armonioso il tuo progetto. Per mantenere coerenza verticalmente puoi creare una griglia con una baseline di 8 o 4 pixel. Tutti gli elementi saranno progettati in modo da rientrare perfettamente nel nuovo system: H1, H2, H3, paragrafi, ecc. in modo da creare delle regole scalabili e funzionali (ad esempio: H3 è 2x H4; H2 è 1.5x H3). Teniamo sempre a mente che gli sviluppatori non ragionano come i designer e viceversa, quindi creare ordine ci permetterà una migliore comunicazione.

Non solo dimensione del testo. Anche l'interlinea adopererà le stesse dimensioni.
La regola d'oro per l'interlinea nel web (per garantire un'ottima leggibilità del contenuto) è di moltiplicare la font-size x 1.5. Il risultato sarà:

  • font-size: 16px; line-height: 24px
  • font-size: 24px; line-height: 36px
  • font-size: 32px; line-height: 48px

Teniamo a mente che molti software di design (come ad esempio Adobe Xd o Figma) permettono di inserire direttamente nella casella dell'interlinea un'espressione matematica come 16*1.5 in modo da far eseguire il calcolo al software.

Pro-Tip: in CSS possiamo far si che l'interlinea si adatti automaticamente alla font-size utilizzando unità di misura dinamiche. Ad esempio anzichè specificare una line-height di 24 px potremmo semplicemente impostarla di 1.5em. in questo modo sarà il browser a calcolare l'altezza dell'interlinea in base alla dimensione del testo.

Ma applichiamo la griglia solo alla tipografia? Ovviamente no.

Per le icone (avendo un ottimo supporto browser e un bassissimo peso, consiglio l'utilizzo del formato SVG), useremo diverse misure, ma sempre tutte in linea con la nostra griglia: 16x16 px, 32x32 px, 64x64 px, 128x128 px, 512x512 px. 

Anche i padding degli elementi (ad esempio lo spazio interno di un pulsante, di una scheda, di un container) e i margin tra essi (lo spazio tra due schede, due pulsanti, due icone) saranno calcolati in questo modo.

 

griglia ad 8px in User Interface desgin

 

Messa in pratica

Sin dalle prime fasi di design e dai primi sprint conviene ragionare sulla griglia ed investire del tempo nella sua progettazione, per poter poi scalare successivamente con maggiore velocità. Ecco alcuni consigli:

  • Spiegare agli stakeholder i benefici della progettazione di una solida struttura: scalabilità, efficienza, prototipazione più rapida.
  • Investire tempo subito progettando una griglia per risparmiarne tantissimo in fasi successive.
  • Confrontarsi con gli sviluppatori e decidere assieme lo spacing system più adatto al progetto.
  • Crea dei template molto basici (ad esempio: testo/elementi grafici/spazi) in modo da visualizzare concretamente la tua griglia
  • Condividi le informazioni con l'intero team e assicurati che tutti siano allineati.