Le griglie: alla scoperta dello UI kit di Designers Italia, partendo dalle basi
La costruzione di un sistema di griglie è stata il primo passo verso il nuovo UI Kit di Designers Italia, uno strumento utile a chi disegna prototipi e applicazioni per i cittadini. In questo articolo vediamo come costruire un grid system e con quali criteri abbiamo realizzato quello contenuto all’interno del Kit.
di Daniela De Blasis
UI Kit: alle basi di un buon design per i cittadini
Stiamo lavorando a uno UI Kit più ampio e completo rispetto alla versione precedente (behance) e il sistema di griglie è il primo di una serie di file che contengono stili e componenti del nuovo Kit. I file, che verranno man mano implementati, si possono scaricare gratuitamente dal repository italia/design-ui-kit e utilizzare liberamente. Perché abbiamo cominciato dal grid system? Perché usare la griglia significa porre le basi per una buona user experience: fa parte di quel design “invisibile” che secondo Steve Krug evita di “dover pensare troppo”.
Leggi anche:
Il design collaborativo: dall’individuo al team, dal team al network: ecco come Designers Italia prova a ridefinire il ruolo del design nella trasformazione digitale della Pubblica Amministrazione.
Systemic design ≠ Design systems: che cos’è un design system? E perché è così importante? La risposta di Raffaele Boiano nel guest post per Designers Italia.
Cosa sono e perché avere le griglie
Una griglia è una rete di linee che si intersecano: è come un’armatura che il designer usa per creare forme, sistemare immagini, organizzare il testo. Così come scrivendo su un foglio le righe guidano la mano e l’occhio, allo stesso modo il designer si serve di linee orizzontali e verticali, colonne e margini per allineare gli oggetti gli uni agli altri.
La griglia è una struttura invisibile che serve non solo ad avere un processo efficiente di costruzione di un layout, ma anche a dare consistenza al design: è la griglia che permette a tutte le pagine, che siano su web o su carta, di avere una struttura uniforme. Attraverso la griglia organizziamo uno spazio vuoto e passivo, definendo il ritmo di tutto il progetto di design.
La griglia è uno strumento comune a molte discipline: architettura, tecnologia, topografia… Pensate all’organizzazione delle strade nelle città, alle facciate di moderni edifici o grattacieli che superano la simmetria e la staticità di quelli più antichi.
Oltre che all’estetica, l’uso della griglia è legato a una necessità di ordine e chiarezza: la visibile griglia rossa dell’elettrocardiogramma che ci aiuta a capire i valori dei nostri battiti cardiaci; le corsie di una piscina; le svariate funzioni dei meridiani e paralleli; il parcheggio di un centro commerciale; i divisori di un cassetto per separare forchette e cucchiai.
La presenza della griglia risponde al nostro bisogno di sistematizzare per capire, ricordare, rendere la vita meno complessa. Ecco perché la griglia è uno strumento fondamentale nel design: il designer deve rendere comprensibile quello che vuole comunicare, e l’utente deve trovare quello che sta cercando. La griglia serve a creare:
- ordine e comprensibilità;
- consistenza e armonia.
Vediamo più da vicino come questo sia possibile.
1. Ordine e comprensibilità
Le griglie sono uno strumento per organizzare lo spazio. Consentono di applicare i principi base del design e della percezione visiva (psicologia della Gestalt) e di realizzare una gerarchia visiva delle informazioni che faccia da guida all’utente che si trova davanti a molte informazioni.
Le griglie servono inoltre a far in modo che gli elementi e i testi siano ben allineati. Uno scorretto allineamento si nota subito, distraendo dalla funzione principale del sito: trasmette l’impressione di un design trascurato e poco professionale, e genera un rischioso senso di sfiducia.
2. Consistenza e armonia
Un design consistente è ciò che permette di navigare tra le pagine di un sito senza sentirsi disorientati: una volta costruita una mappa mentale della pagina, grazie alla consistenza è possibile ritrovare gli elementi principali anche in altre pagine, nella stessa forma e posizione. La consistenza, in altre parole, permette di riconoscere gli elementi ricorrenti e favorisce una maggiore comprensibilità dell’ambiente. Alcuni elementi diventano dei punti fermi con i quali orientarsi: pensate all’ header e al footer, o ai pulsanti che invitano a un’azione (call to action buttons). In un sito con una struttura complessa, le griglie fanno sì che tutte le pagine siano consistenti, mantenendo chiaro il filo conduttore e consentendo all’utente di orientarsi sempre con chiarezza.
Armonia significa equilibrio e ritmo: alcuni principi di design, come la regola dei terzi o la sezione aurea, trovano applicazione grazie alla costruzione di una griglia. I punti in cui si intersecano le linee di queste griglie specifiche sono i punti focali su cui inserire gli elementi principali del layout per avere un risultato piacevole, armonico. Nella figura seguente vedete a sinistra la regola dei terzi e a destra la sezione aurea: nelle immagini d’esempio notate la traccia delle griglie, che mette in risalto l’equilibrio armonico della composizione.
Griglie responsive e breakpoints
Il design responsive oggi è una caratteristica imprescindibile dei siti web. È subito chiaro quando ci capita di navigare da un dispositivo mobile e ci imbattiamo in un layout parzialmente visibile e difficilmente navigabile, e dobbiamo quindi fare uno zoom del testo o uno scrolling orizzontale.
Un layout responsive, invece, fa sì che un elemento cambi forma in maniera fluida: diminuendo la dimensione dello schermo occupa sempre più spazio in altezza e meno in larghezza. Se prima gli elementi venivano calcolati in pixel e inseriti nella pagina web con una misura precisa, per ottenere di fluidità è stato necessario abbandonare questo tipo di misurazione.
In un layout responsive lo spazio occupato da un elemento si deve considerare in percentuale rispetto allo spazio che si ha a disposizione. Per esempio: in una griglia di 12 colonne, un contenuto che si estende per 6 colonne occupa il 50% dello spazio, per 3 colonne, il 25% e così via.
C’è da dire che un elemento che occupa il 50% di un layout, non è detto che possa occupare sempre il 50% a qualsiasi risoluzione, anche su mobile. Per questo motivo bisogna stabilire dei breakpoint, ossia delle risoluzioni-tipo al di sotto e al di sopra delle quali il layout oltre a comprimersi o espandersi, cambia.
Se un container con testo, in un layout con risoluzione desktop, occupa 4 colonne, vuol dire che si estende per il 33.33% dello spazio totale a disposizione. Su mobile lo stesso container non potrà occupare allo stesso modo il 33,33%, per ovvie ragioni di leggibilità, ma sarà necessario a un certo punto (al breakpoint) cambiare il layout, in modo che il container possa occupare tutte le 12 colonne della griglia, quindi il 100%.
Come impostare un grid system
In media nella progettazione di un sito sono necessari dai quattro ai cinque breakpoint: di conseguenza ne derivano quattro o cinque variazioni della griglia, che determinano il grid system. Queste variazioni consistono nel cambiamento delle misure dei margini (lo spazio al di fuori della griglia) e dei gutter (lo spazio tra le colonne). Le colonne si adattano di conseguenza.
Va poi considerata la larghezza massima (max width) oltre la quale il contenitore principale non si deve estendere all’aumentare della risoluzione. Se un sito a risoluzione mobile occupa, com’è normale, tutto lo schermo, non sarebbe altrettanto sensato se occupasse tutto lo spazio di un monitor da 1920px o più.
Come si fa a stabilire i breakpoint e le misure della griglia? Diciamo subito che non c’è una risposta su quale sia la griglia migliore perché dipende sempre dalle specifiche esigenze e dalle librerie di componenti che si intende utilizzare. Possiamo procedere in due modi: costruendo una griglia ex novo con l’aiuto di strumenti online, oppure affidandoci a framework che offrono un grid system già pronto. Vediamo un esempio.
La griglia di Bootstrap
Un framework molto diffuso che offre un grid system già pronto è Bootstrap.
La griglia di Bootstrap prevede 12 colonne con un gutter di 30px, 15 per lato della colonna. La misura della colonna è il risultato conseguente all’impostazione degli altri parametri: la risoluzione, i margini, la larghezza massima del container e il gutter.
Il sistema di griglie dello UI Kit
Lo UI Kit di Designers Italia contiene i componenti di interfaccia per costruire prototipi e applicazioni web, ed è pensato tenendo in considerazione le esigenze della pubblica amministrazione. Al momento esiste un Kit base con un numero minimo di componenti, ma il progetto in corso di realizzazione è molto più ampio: stiamo implementando il Kit seguendo un elenco sistematico di più di trecento componenti. Periodicamente viene pubblicata una macrocategoria di componenti o stili all’interno di un repository: italia/design-ui-kit
Tutti i file pubblicati compreso quello relativo al sistema di griglie possono essere scaricati e utilizzati liberamente.
Come abbiamo costruito il grid system dello UI Kit
Fase uno: analisi
Nel costruire il grid system abbiamo analizzato per prima cosa le statistiche sulle risoluzioni più utilizzate per le tre tipologie di dispositivi (mobile, tablet, desktop). Questa analisi ci è servita per stabilire i breakpoint.
Dai grafici risulta che la risoluzione di 1280px è la misura più piccola di desktop utilizzata, oltre che una misura di tablet in orizzontale. Per i dispositivi di media dimensione la risoluzione più piccola utilizzata è 768x1024 px, mentre il 600x1024 px è la risoluzione di un mini tablet che si può attribuire a un dispositivo di taglia small.
La misura dei margini (o comunque la larghezza massima del “container”) e dei gutter è stata ricavata dopo una serie di prove di layout con blocchi di testo, bottoni, cards e altri elementi, per verificare le diverse soluzioni in termini di percezione visiva e principi del design. Abbiamo quindi scelto di avere a disposizione una misura variabile di gutter e margini.
Fase due: la personalizzazione della griglia
La scelta di personalizzare la griglia di bootstrap risponde alle necessità di avere margini e gutter variabili in base alla risoluzione e di disporre di una griglia basata su multipli di 4px.
- Margini e gutter
I margini e i gutter sono elementi importanti: se sono troppo stretti creano un senso di tensione, se troppo ampi creano un certo disorientamento. Rispetto alla griglia di Bootstrap che prevede un gutter fisso di 30px, abbiamo ritenuto una soluzione ottimale per le nostre esigenze quella di variare sia i margini che i gutter in relazione alle differenti risoluzioni.
2. I multipli
Le dimensioni di 12, 20 e 24 px scelte per i gutter si adattano bene a una griglia basata su multipli di 4px, vantaggiosa perché gran parte delle risoluzioni più diffuse si adattano a una griglia come questa e non da 3 o 5px, per esempio. Inoltre il design è scalabile anche in risoluzioni ad alta densità*: i contorni rimangono netti, su 4px, mentre con una griglia basata su 5px avremmo contorni sfocati sia per gli oggetti sia per il font.
La griglia orizzontale
Finora si è parlato di gutter e colonne, ma anche la griglia orizzontale contribuisce alla consistenza del design: in questo caso parliamo di consistenza verticale e ritmo verticale.
In un sistema condiviso come quello di uno UI kit, è necessario avere una metrica comune, per mantenere coerenza anche tra diversi siti web appartenenti a enti o pubbliche amministrazioni diverse.
Il ritmo verticale
Il ritmo verticale in un sito web determina i pattern di lettura, ossia il modo in cui scansioniamo con gli occhi una pagina per farci un’idea del contenuto. Dare equilibrio al layout, creare una gerarchia degli elementi, guidare l’occhio attraverso l’uso degli stili di testo: ecco le scelte di design che aiutano nella costruzione del pattern più efficace.
Costruire la griglia orizzontale: l’importanza del testo
L’elemento base con cui possiamo costruire una griglia orizzontale è la baseline del testo, ossia la linea dove poggiano le lettere del font scelto, nel nostro caso il Titillium. La baseline diventa una griglia a cui ancorare non solo il testo ma anche gli oggetti del layout. Abbiamo ritenuto che una misura del font di 16px con un’interlinea a 24px abbia una buona leggibilità. La baseline in questo caso è di 8px.
Basandoci sulla misura di 8 px e i suoi multipli per calcolare dimensioni, padding e margini dei vari elementi, possiamo ottenere un ritmo verticale armonico. Questo tipo di griglia è detta 8 point grid system.
Una comoda soluzione per sistemare gli elementi del layout è quella di posizionarli relativamente gli uni agli altri tenendo presente misure multiple di 8px.
UI Kit: un lavoro in evoluzione
Quanto scritto fin qui viene da riflessioni che ci piace vedere sempre in evoluzione, quindi se hai idee o proposte differenti saremmo felici di poterne parlare insieme nel forum.
Lavoriamo con metodi e strumenti di design collaborativo: la nostra idea è che solo un approccio come questo, basato su una piattaforma comune fatta di idee e supportata da kit e da software adeguato, possa dare una risposta al “bisogno di design” di una realtà complessa come la Pubblica Amministrazione.
* Molti dispositivi hanno una risoluzione ad alta densità di pixel per pollice (hdpi-high density), con un rapporto di 1:1.5 (1x = 160dpi, medium density; 1.5x = 240dpi, high density). In una risoluzione ad alta densità (1.5) una griglia basata su 5px ci farebbe avere una misura da mezzo pixel che genererebbe la sfocatura.
