brokmann grid

L’utilizzo delle griglie in Graphic e Web Design

by • 17 ottobre 2014 • Focus, Web designComments (2)8288

Le griglie d’impaginazione, così come le conosciamo, vennero teorizzate a partire dagli anni ’50. Uno dei primi a teorizzarle fu il graphic designer Emil Ruder, le cui teorie vennero supportate e portate avanti dal graphic designer Josef Müller Brockmann.

Cosa è una griglia?

Il primo passo è conoscere la differenza che intercorre tra griglie e gabbieSi definisce gabbia una reticolato composto da più moduli accostati tra loro, in verticale e in orizzontale, in cui è assente il gutter, ovvero lo spazio presente tra un modulo e l’altro. La gabbie possono essere utilizzate ad esempio per realizzare pittogrammi, marchi e molti altri artefatti in cui il gutter risulta superfluo, se non addirittura d’intralcio.

erco_4_2404_342

Nell’immagine sopra, costruzione di un pittogramma con l’utilizzo di una gabbia, realizzato dal graphic designer Otl Aicher per le Olimpiadi di Monaco del 1972.

Nella griglia, invece, il gutter è presente e risulta fondamentale per creare una pausa visiva tra i vari elementi.

Per comprendere meglio cosa sia una griglia, vorrei citare un periodo estratto dal libro The Vignelli Canon (2010) , scritto dal graphic designer Massimo Vignelli:

“La gabbia (grid, raster) rappresenta la struttura base dalla nostra grafica: ci aiuta ad organizzare il contenuto, fornisce continuità stilistica, crea un’apparenza d’ordine e proietta quel livello di eleganza intellettuale che vogliamo esprimere.“

Come è possibile sfruttare una griglia? 

Brockmann, nel suo celebre libro Grid System (1981), dimostrò quante combinazione d’impaginazione siano possibili utilizzando una griglia composta da 4X8 moduli. Nell’immagine che segue vengono riportati alcuni degli esempi esposti da Brockmann.

 brokmann

Egli volle dimostrare che la griglia non deve limitare la progettazione del designer, ma semplicemente aiutarlo ad organizzare in maniera adeguata le informazioni.

Spesso mi capita di assistere a quanta confusione si riscontri nell’utilizzo corretto di una griglia, sopratutto quando la si utilizza per la prima in un progetto ed in quelli che seguono, se non vengono corretti i meccanismi di utilizzo. Vediamo quindi alcuni degli errori più comuni che ho riscontrato. Gli esempi, da me di seguito esposti, valgono sia per il posizionamento dei testi, che per quello delle immagini.

post grid

Nella griglia sopra riportata, la prima frase presenta un allineamento centrato occupando tre moduli. Quando si utilizzano le griglie  è un errore avvalersi di un allineamento centrato del testo. È preferibile quindi utilizzare un allineamento a sinistra o a destra, inoltre la frase non occupa, in larghezza, interamente i tre moduli.

La seconda frase si estende correttamente per intero lungo i tre moduli, l’errore riscontrato, in questo caso, è  nel posizionamento verticale. La frase risulta allineata centralmente e questo è  un ulteriore errore. Essa deve toccare sempre la parte superiore o inferiore di uno o più moduli, in caso contrario ci si avvale di sotto moduli, ovvero la suddivisone di un modulo in altro moduli.

Nella terza frase, il testo termina all’interno del gutter, occupandolo, anche questo è da evitare.

Vediamo ora un corretto esempio d’utilizzo di una griglia d’impaginazione.

post grid2

Nell’esempio sopra riportato, il titolo è correttamente posizionato nell’angolo alto a sinistra del primo modulo; il testo occupa 2×3 moduli e ha un allineamento a sinistra; l’immagine occupa i moduli restanti a destra ed è allineata con l’inizio del testo; infine la nota è stata posizionata in modo che tocchi l’angolo in basso a destra del modulo in cui è stata inserita.

Esempi di corretto posizionamento di un testo all’interno di un modulo

esx13 esx14 esx15 esx16

Le griglie non sono presenti solo all’interno dell’ambito della grafica stampata, ma anche in ambito digitale, come nella realizzazione dell’User InterfacesCome molti sapranno, il Web design ha una storia molto breve, in pochi anni il modo di concepire un sito web è cambiato più volte radicalmente. Quando iniziai a realizzare i primi siti web lo standard di larghezza era stato da poco fissato a 960 px. Con la crescente diffusione dei dispositivi mobile (smartphone e tablet) il mercato è stato invaso da device con diverse risoluzioni. In questo clima di evoluzione tecnologica, il Web si è dovuto adattare introducendo il concetto di responsive. Si è passati quindi a realizzare siti web con griglie statiche a 12, 16, 24 colonne a siti con griglie capaci di adattarsi in percentuale al tipo di risoluzione. Anche in ambito editoriale, con la nascita degli ebook, il concetto di responsive sta diventando sempre più radicato, ed oggi software come Indesign, dell’Adobe, hanno introdotto funzioni che permettono di ottenere una sorta di responsive nella realizzazione dei libri digitali.

La differenza sostanziale che intercorre tra le griglie usate in ambito grafico e web, risiede nel fatto che nelle seconde non esistono moduli, ma solo colonne. Inoltre, nel Web, griglie e gabbie vengono spesso utilizzate insieme, basti pensare ad alcuni siti portfolio in cui gli elementi presenti in testata vengono posizionati con una griglia, mentre le immagini dei vari lavori vengono disposti con l’ausilio di una gabbia. Per semplificare la realizzazioni del sito web esistono i framework (una struttura logica di supporto realizzata da terze parti), i quali permettono di avere griglie responsive già pronte all’utilizzo. In questo ambito i più celebri framework sono Bootstrap e FoundationA volte però essi potrebbero limitare la realizzazione di determinati layout, soprattuto in situazioni in cui ci si ritrova a realizzare siti web con strutture complesse, in questo caso i progettisti andranno a realizzarne un framework personalizzato, capace di soddisfare l’esigenze logistiche di progettazione.

Esempio di griglia, a 12 colonne, utilizzata in ambito Web

Esempio di griglia, a 12 colonne, utilizzata in ambito Web

 

Libri consigliati

Josef Müller Brockmann – Grid System in Graphic Deisgn
Ellen Lupton –  Caratteri, testo, gabbia. Guida critica alla progettazione grafica
Massimo Vignelli – Il canone Vignelli
Gravin Ambrose, Paul Harris – Il libro del layout, storia, principi e applicazioni

Pin It

Related Posts

2 Responses to L’utilizzo delle griglie in Graphic e Web Design

  1. Maurizio Audone ha detto:

    Post molto interessante che mi riporta ad una “vita precedente” quando i manuali di immagine erano di moda e non se ne poteva fare a meno. (E non solo per la grafica).

    In più di trent’anni di professione quel che mi ha stupito è come molte aziende (anche grandi e dotate di manuale) realizzino documenti a impaginazione casuale. Magari solo perché si tratta di una lettera e non di una brochure.

    Mi piacerebbe anche illustrare una griglia completamente modulare sia in verticale che orizzontale sviluppata molti anni fa, che ha risolto non solo i problemi di impaginazione ma anche uniformato la creazione dei contenuti cosa che negli ultimi vent’anni ho approfondito creando strumenti specifici. Ma…

    … la ragione del commento a questo post è un’altra.

    La griglia grafica, o il framework, con i moltiplicarsi dei media è andata sempre più perdendo importanza rispetto all’approccio relazionale e esperienziale. Diventa sempre più importante (nella mia esperienza beninteso) mantenere la continuità empatica e, a volte, la griglia impiegata pedestremente, diventa un ostacolo.

    Spesso sono più importanti i colori, il tono, le parole usate, il ritmo dell’ “impaginato” (print, web, storyboard che sia) la sequenza degli eventi, delle esperienze e delle emozioni.

    Esiste allora una griglia anche per le emozioni, ci siamo chiesti.

    La nostra risposta è si.

    Come la griglia grafica è oggi possibile (e necessario) creare un framework emozionale che tenga conto di tempi, luoghi e modalità di fruizione dei contenuti, che dovranno essere creati in funzione di microtarget e di quelli che ho definito emerging media (nuovi o vecchi utilizzati, o utilizzabili, in modo nuovo); es. TV e mobile, o evento fisico e virtuale, in contemporanea.

    E la griglia emozionale è fatta di segni, di segnali, di suoni, di simboli, e più che una melodia (griglia grafica) è una sinfonia.
    A presto.
    MAu

  2. Bartolomeo ha detto:

    Finalmente una spiegazione ben fatta e in poche righe. Ci sono tonnellate di articoli e video tutorial in giro che ci girano intorno ma non arrivano mai al dunque.
    Grazie

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *