Dire che una griglia è limitante è come dire che il linguaggio è limitante.
Ellen Lupton

Ogni progetto di design comporta la risoluzione di problemi sul piano visivo e comunicativo. Immagini, testi, titoli, video, tabelle. Per poter comunicare, tutti questi elementi devono essere integrati e l’uso della griglia è una soluzione.

I vantaggi delle griglie sono evidenti: chiarezza, efficienza, ordine, continuità. L’uso di una griglia aiuta gli utenti a prevedere dove trovare le informazioni da pagina a pagina o da interazione a interazione, e aiuta nella comunicazione di queste informazioni. Le griglie rendono più facile l’aggiunta di nuovi contenuti in modo coerente con una visione d’insieme.

La teoria e i principi sull’utilizzo delle griglie nel graphic design risalgono all’International Typographic Style di Brockmann, Bill e Baker degli anni 50.  Nel web design la teoria e i principi sull’utilizzo delle griglie è molto più recente. I web designer che hanno definito meglio l’uso e l’applicazione delle griglie nel web sono Khoi Vinh e Mark Boulton.

Il primo, ex designer director del New York Times, è anche l’autore del libro Ordering Disorder dove illustra le applicazioni dei principi delle griglie nel web design e dal quale prendo spunto per questo post.
Il secondo, web designer inglese, ha annunciato l’uscito di un libro sullo stesso tema, “A Practical Guide to Designing Grid Systems for the Web” e ha da poco lanciato un’interessante servizio online proprio sulle griglie: Gridset.

La griglia secondo Brockmann è la vera espressione del design: oggettiva, funzionale e densa di qualità estetiche legate a pensieri matematici.

“Il sistema di griglie è un aiuto, non una garanzia. Consente un certo numero di utilizzi possibili e ogni progettista può cercare una soluzione adatta al suo stile personale. Ma è necessario imparare come usare la griglia; è un’arte che richiede molta pratica.”

Khoi Vinh e Mark Boulton insieme, nel 2007 al SXSW fecero una ormai celebre presentazione: Grids are good, dove ridisegnavano il portale Yahoo basandolo sui principi di base delle griglie.

Uno delle attività principali di un utente sul web è cercare informazioni; un comportamento che vede nelle griglie la soluzione ideale per aiutare l’utente a trovare le informazioni e i web designer a metterle dove possono essere trovate.

Le griglie sono un sistema di ordine visivo che lavora su due livelli: prima sulla percezione, poi sull’esperienza. Un utente sente la griglia, poi la usa.

La progettazione grafica tradizionale è un modello di comunicazione basato sulla dichiarazione, quella per il web sulla conversazione. Soluzioni grafiche per una collana di libri, per una rivista, sono definitive e uguali per tutti, quelle per il web subiscono variazioni non controllabili direttamente dal progettista. Nel web una soluzione di design può avere un infinito numero di espressioni a seconda dell’hardware o del software che si usa per accedervi. Il contenuto di una pagina può cambiare da utente a utente, da browser a browser. Per questo motivo alcuni principi sulle griglie sono diverse rispetto alla stampa.

La griglia tipografica era uno strumento originariamente elaborato per risolvere problemi di progettazione dichiarativa, ma in questo contesto è anche un legittimo e utile strumento per risolvere problemi di progettazione conversativa, adeguando l’utilizzo dei suoi principi ai vincoli del web.

L’importanza dell’uso della griglia sul web è quindi ancora maggiore rispetto a quanto avviene per un libro o una rivista, nonostante alcuni sui principi sono snaturati dal mezzo.

• Una soluzione griglia sul Web è criticamente dipendente dalla tecnologia disponibile all’utente
• La tipografia, almeno per il momento, varia notevolmente da computer a computer e anche da browser a browser, lo stesso carattere si visualizza diversamente a seconda del sistema operativo o del browser
• Non esiste una dimensione canonica per un browser Web, sia perché la dimensione fisica di monitor degli utenti varia, sia perché l’utente può ridurre o ingrandire la finestra che contiene quel browser.
• Le preferenze e le impostazioni, che l’utente può cambiare passivamente e attivamente, possono alterare drasticamente i requisiti per una soluzione griglia online.
• La griglia sul web è limitata a incrementi di pixel e i pixel stessi variano in scala da dispositivo a dispositivo

La differenza che passa tra il design di una pagina web e quello su una rivista è la stessa che passa tra una presentazione registrata su un video e una fatta in pubblico impostato sulla conversazione, la prima è sempre uguale per tutti, la secondo è più imprevedibile e basata sul pubblico, l’esperienza è condivisa e partecipativa, senza pubblico non c’è nessuna conversazione. Nel web design senza gli utenti non c’è vero web design.

Nell’era del responsive, dei retina display, di pagine web che si devono adattare a più dispositivi e dove la base della progettazione è la fluidità, le griglie non sono meno importanti, anzi lo diventano ancora di più. Cambia però l’approccio di base. Non si ragiona più per misure ma per spazio. Un determinato contenuto, logo, testo, immagine non viene più gestita in base alla sua misura in pixel, ma necessariamente in base a quanto colonne occupa in una griglia.