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
(clic per ingrandire)

Applicato al webdesign
griglia
visibile
Ci torneremo più avanti.
Ciò anticipato il concetto dietro il grid design
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
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
D'altra parte la divisione in moduli
Ciò non di meno, controllare il ritmo verticale
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.