Abbiamo già parlato di griglie o grid system, ma oggi vorrei entrare ancora più nel dettaglio, parlando di un sistema che può davvero fare la differenza nella progettazione dei vostri layout: la griglia 8 punti.
Questo tipo particolare di griglia utilizza multipli di 8 pixel per spaziature, dimensioni e allineamenti nelle interfacce digitali.
Questo implica che tutti gli elementi dell’interfaccia (padding, margini, dimensioni dei pulsanti ecc) dovranno essere basati su numeri come 8, 16, 24, 32, 40 e così via (su Rtfm, non solo design, ma anche tabelline 👍).
Utilizzare spaziature orizzontali e verticali basate sui multipli di 8, porta alla progettazione di strutture visive coerenti e prevedibili, dando controllo completo su tutta la nostra composizione.
Perché “punti” e non “pixel?”
Quando parliamo di punti (pt), ci riferiamo a un’unità di misura che dipende dalla risoluzione dello schermo, non dalle sue dimensioni in pixel.
Risoluzioni diverse possono avere differenti densità di pixel.
Progettare alla dimensione più piccola (@1x) ci permette di scalare facilmente i nostri asset per tutti i tipi di display e dispositivi, mantenendo una resa pixel-perfect.
Perché usare la griglia 8 punti
La maggior parte delle dimensioni di schermo più popolari, a prescindere dal dispositivo, sono divisibili per 8.
Questo porta ad una maggiore adattabilità del layout progettato a un qualsiasi dispositivo.
Inoltre, con l’avanzare della tecnologia, vari dispositivi mostrano una densità di pixel sempre maggiore, rendendo la generazione degli asset sempre più complessa. Utilizzare multipli di 8 rende la scalabilità su diverse tipologie di dispositivi facile e consistente.
Ultimo, ma non meno importante: questo tipo di sistema facilita, a modo suo, la comunicazione tra designer e sviluppatori, portando ad un flusso di lavoro più scorrevole.
Un dev può facilmente calcolare ad occhio eventuali incrementi, invece di dover misurare ogni volta (anche se è sempre meglio controllare le specifiche, consiglio che do agli sviluppatori meno precisi).
Alcuni designer preferiscono utilizzare il sistema a 4 punti perché la griglia a 8 punti “perde” alcuni numeri più piccoli, utili per micro-aggiustamenti e per avere più controllo sui design.
La scelta dipende da alcune esigenze specifiche:
- 8 punti: perfetto per la maggior parte dei progetti, più semplice da implementare;
- 4 punti: utile quando hai bisogno di maggiore precisione nei dettagli per lavorare a spaziature più ridotte.
In questo video di UX Tshili potrete trovare una interessante e chiara dimostrazione dell’applicazione della griglia 8 punti.
Benefici e punti di forza
- Coerenza visiva: utilizzare una griglia consistente garantisce un’interfaccia visivamente bilanciata e armoniosa. Il risultato? Un layout più “arioso” e professionale;
- maggiore efficienza: velocizza il processo di design fornendo spaziature e dimensioni predefinite. Meno indecisioni e più tempo da dedicare alla creatività invece che ai dettagli tecnici;
- gerarchia più strutturata: questa griglia garantisce una gerarchia visiva chiara agli elementi e una scalabilità consistente, mantenendo un ritmo qualitativo. Quando progetti seguendo questo sistema, la UI appare più pulita e bella;
- ottimizzazione della User Experience: spaziature e allineamenti consistenti contribuiscono a un’esperienza utente più prevedibile e intuitiva. Gli utenti percepiscono inconsciamente l’ordine e la logica del vostri design;
- sviluppo semplificato: gli sviluppatori possono implementare facilmente i design creati con la griglia a 8 punti, riducendo errori potenziali e inconsistenze;
- design modulare: questo sistema promuove un approccio di design modulare, rendendo più facile riutilizzare componenti e mantenere la consistenza in tutta l’interfaccia.
