Grid design, dalla tipografia al web

L'applicazione di principi di design tipografico al webdesign, come il Grid design o l'uso di gabbie tipografiche, hanno certamente favorito la diffusione del concetto di consistenza, struttura e coerenza anche su Internet.

La storia dell'arte, la fotografia, l'architettura, ma anche la matematica e la geometria hanno consegnato ai moderni designer un patrimonio di regole scritte e non, che possono esserci molto utili anche quando disegnamo un sito web.

Certamente avrete sentito da qualche vostro amico fotografo che rispettare la regola dei terzi nell'inquadratura del vostro scatto migliorerebbe molto la sua qualità complessiva.
Così come per molti ottimi scatti fotografici, anche per molti dipinti possiamo notare una certa ricorrenza di proporzioni.

Senza entrare troppo nel dettaglio, ma la successione di Fibonacci (vedi link utili) con il tendere all'infinito tende a un numero 1,618033... anche detto sezione aurea.
Questo numero piuttosto misterioso, è ricorrente in Medicina (il rapporto tra le falangi di una mano è una piccola successione di Fibonacci), in Chimica, in Musica e anche nella Geometria.

"Se si disegna un rettangolo con i lati in rapporto aureo fra di loro, lo si può dividere in un quadrato e un altro rettangolo, simile a quello grande nel senso che anche i suoi lati stanno fra loro nel rapporto aureo. A questo punto il rettangolo minore può essere diviso in un quadrato e un rettangolo che ha pure i lati in rapporto aureo, e così via.

La curva che passa per vertici consecutivi di questa successione di rettangoli è una spirale che troviamo spesso nelle conchiglie e nella disposizione dei semi del girasole sopra descritta e delle foglie su un ramo." (fonte Wikipedia italia)

Tutto questo per dire che molto spesso le proporzioni degli spazi pieni/vuoti rispondono alla sezione aurea (1,618 circa) o altre volte alla regola dei terzi.

In effetti, se riuscite a dividere il vostro spazio secondo questo principio, tutto sembrerà più armonico e consistente all'occhio.

È del tutto evidente che questa trattazione che facciamo non vuole essere esaustiva, ma solo un minimo apporto teorico per un approccio molto pratico

Applicato al webdesign questo concetto di divisione in griglia implica la necessità di definire una safe area (area in cui siete certi di avere lo spazio disponibile e visibile) entro la quale poter dividere lo spazio in moduli.
Ci torneremo più avanti.

Ciò anticipato il concetto dietro il grid design non è molto semplice da spiegare, ma è molto più facile da visualizzare.
Ed è ancora più confortevole da applicare: bastano alcune piccole regole e un approccio progettuale per poter trovare grandi vantaggi in questo metodo.

Il principio delle griglie è quello cioè di prendere lo spazio a disposizione del foglio, dividerlo in moduli separati dai rispettivi gutter (separazione), e quindi accoppiare e aggregare un certo numero di questi moduli in colonne fra di loro fino ad occupare orizzontalmente tutto lo spazio disponibile.

Quando dal foglio si passa al canvas di Photoshop, o di qualunque altro programma utilizziate per disegnare i vostri layout, il passaggio è semplice. Merita però alcune piccole attenzioni per rendere la vostra vita più facile e potersi avvantaggiare di questo metodo davvero.

Anche per il web il concetto delle griglie è tutto legato a quello di modulo-base; tipicamente un modulo è definito come una cella (grossolanamente un quadrato di 20px per lato), oppure una colonna (sempre di larghezza comparabile a 20px). Ogni modulo si distanzia da quelli limitrofi con uno spazio (gutter - aria) che permette all'occhio di riconoscere un pattern verticale e allo stesso modo avere "aria" tra i due moduli.

Non c'è dubbio comunque che la più naturale applicazione di queste tecniche le possiamo vedere su alcuni dei portali dei maggiori quotidiani e riviste nel mondo

Ma a ben vedere non solo le strutture di pagine, siti e portali più adatti a questi sistema, ma anche la diffusione di Blog e siti vetrina o portfolio si sono giovati di una struttura sistematica, coerente e ripetibile come quella fornita dal principio del design basato su griglie.

Guardando gli esempi qui sopra potrete notare una certa comune facilità di reperire le informazioni più importanti e potrete cogliere la modularità delle strutture, anche se non del tutto autoevidente ad una prima occhiata.

Questo fra gli altri è uno dei maggiori vantaggi di usare griglie tipografiche per disegnare le proprie pagine.
D'altra parte la divisione in moduli che abbiamo visto vale per occupare al meglio possibile lo spazio in orizzontale, ma nelle pagine web che conosciamo - soprattutto nell'era dei CMS e affini - abbiamo molto meno controllo dello spazio verticale.
Ciò non di meno, controllare il ritmo verticale è probabilmente l'operazione più importante che possa fare un webdesigner per creare il proprio design.

Permettere cioè all'occhio di ritrovare un pattern entro il quale veicolare le proprie scelte, gerarchie e informazioni, è il modo migliore per mettere a proprio agio il lettore/visitatore, e permettergli di fruire al meglio possibile del vostro lavoro.

Analogamente all'unità di misura orizzontale (cella o colonna che sia), possiamo definire l'interlinea o line-height l'unità di misura cardine per lo spazio verticale.

Per questo il paragone che facciamo più spesso in merito al grid design è quello con la tipografia, l'impaginazione e i libri in particolare.
Un libro per sua stessa definizione è un mezzo che permette la veicolazione di messaggi al lettore.
Allo stesso modo un sito web è uno strumento di informazione per chi lo usa, più che una lusinga visiva o uno specchietto per le allodole che deve impressionare a tutti i costi.

Il web è stato progettato per le informazioni, e per la loro fruizione. Il design ne deve essere al servizio per facilitarne il più possibile il compito.

Torniamo al paragone: leggereste con facilità un libro le cui righe sono troppo vicine tra loro o distanti sempre in maniera differente tra di loro? Beh allo stesso modo siete a disagio dinanzi a una pagina web che non cura il ritmo verticale.

Un altro ovvio vantaggio di questo approccio, se partite non con un foglio bianco su Photoshop, ma con un documento di Information Architecture, una mappa del sito che state disegnando e ancor di più con dei Wireframe, è che la struttura di quest'ultimi può riflette in maniera diretta il sistema di griglie scelto.

"Rules can be broken, but never ignored."

Apparentemente imbrigliare la vostra creatività in un sistema così apparentemente rigido può sembrare un problema. Come in moltissime altre occasioni però l'occhio e la psicologia umana però ci hanno abituato a una regola molto importante: la consistenza e la ripetizione sono importanti per assimilare alcuni concetti senza concentrarsi su repentini e continui cambi di paradigma visuale, e allo stesso modo sono un ingrediente fondamentale per far risaltare le eccezioni.

In breve: rispettare un metodo sistematico di strutturare le informazioni, oltre a permettervi la modularità delle informazioni, la consistenza e la coerenza - assieme alla facilità di implementazione che vedremo più avanti, più essere un ottimo modo per far risaltare alcune peculiarità con le quali condire i vostri design e colpire al massimo i vostri visitatori.

Link utili

• Successione di Fibonacci (fonte Wikipedia)
• Sezione Aurea (fonte Wikipedia)
• Information Architecture (fonte Wikipedia)
• Website wireframe (fonte Wikipedia)