Il percorso di progetto, dalla strategia all'hand off:
La prima pagina di un quotidiano è costruita su una griglia a colonne: titoli, foto e articoli si appoggiano tutti sulle stesse linee verticali.
Un sito è impaginato esattamente come una pagina stampata: sotto la grafica ci sono colonne e spazi che allineano ogni elemento.
Una griglia è fatta di poche cose: colonne, spazi (gutter) e margini.
La griglia mantiene sempre la stessa larghezza: allargando la finestra crescono solo i margini ai lati, il contenuto resta ancorato alle stesse linee.
La griglia occupa una percentuale della finestra: allargando lo schermo si allargano le colonne, mentre i margini restano costanti.
Quattro combinazioni possibili di larghezza della griglia e dei margini, dallo schermo piccolo a quello grande.
Non c'è una regola fissa, ma ci sono griglie statisticamente più funzionali di altre (e per questo sono le più usate).
Puoi avere però massima libertà purché tu decida numero di colonne, dimensione degli spazi, tipo di griglia (fissa o flessibile), posizione (es. centro).
Nel caso di device come TV, totem interattivi, infotaiment delle automobili, iOT (Alexa con schermo), Watch e altri dispositivi, le misure delle griglie sono spesso custom (partendo da quelle web).
Lo stesso contenuto si riorganizza al variare della dimensione: Small, Medium, Large, Extra Large.
Learning by doing
Le griglie gestiscono lo spazio orizzontale di un prodotto digitale. Sulle griglie si poggiano gli elementi.
Gli spazi servono a gestire le distanze dentro e fuori gli elementi:
Sopra la griglia orizzontale si appoggia un ritmo verticale di distanze: margini, spazi tra i blocchi e altezze coerenti su tutti i breakpoint.
Ogni distanza, ogni spazio, ogni bordo, la maggior parte delle altezze (non tutte, e non la larghezza) sono multipli o sottomultipli di 8.
Motivo: creare interfacce coerenti, gerarchiche, piacevoli, ordinate.
Un elemento di UI ha:
Tecnica di progettazione di layout che permette ai siti web di adattarsi alle dimensioni dello schermo per una corretta visualizzazione su più dispositivi (smartphone, tablet, desktop pc, tv, ecc).
Significa progettare cose "flessibili".
Breakpoint: punti di interruzione che definiscono quando un layout deve cambiare per adattarsi alle dimensioni dello schermo.
Mediaquery: una funzionalità Css che fa adattare il layout di una pagina a diverse dimensioni di schermo/media.
/* Classic Way */ @media (min-width: 300px) and (max-width: 750px) { … } /* Rewritten using a Range Context */ @media (300px <= width <= 750px) { … }
Una mappa dei breakpoint standard: 0, 480, 600, 840, 960, 1280, 1440, 1600, 1920 — con 4, 8 e 12 colonne e le fasce xsmall, small, medium, large, xlarge.
Un elemento occupa una frazione della griglia a 12 colonne: 6/12, 4/12, 3/12, 2/12.
Gli elementi di destra vanno sotto quelli di sinistra. Ci sono anche eccezioni.
Non c'è una regola aurea su quale sia l'approccio migliore.
All'inizio progettare desktop first aiuta a ragionare meglio, purché si progetti bene anche la versione mobile.
È nato prima l'uovo o la gallina?
Crea le tue griglie in Figma
Studia come funzionano le griglie dentro Figma, creando le tue. Nel file degli esercizi trovi degli esempi che puoi anche copiare e incollare ma:
Microfoni ON
Asse verticale: definizione di progetto. Asse orizzontale: tempo / avanzamento.
Scala tipica: 0 2 4 6 8 12 16 20 24 32 40 48 64 80 — con raggruppamenti Small, Medium, Large.