Griglie e Web Design: l’allineamento degli elementi in una pagina web è un aspetto molto importante di un buon web design! Usare le griglie consente stabilità e conferisce una solida struttura al layout Web, dando al progettista un modello logico per costruire il sito.
Usare le griglie non significa strutturare un design noioso. Un buon progettista applica le norme fondamentali del layout usando un modello grid-based, ma sa anche rompere queste regole in modo corretto!
Griglie e layout web: le basi
Una griglia è la suddivisione di un layout tramite linee guida verticali e / o orizzontali, che servono per organizare gli spazi e delimitare i margini e le colonne in modo da fornire un quadro per l’organizzazione dei contenuti.
Le griglie sono tradizionalmente presenti nei lavori di stampa, ma sono molto versatili anche per il web design. Una griglia non deve rendere un sito come il layout di un quotidiano, ma può essere certamente di aiuto nella creazione di una struttura uniforme con cui avviare il progetto grafico.
L’idea di griglia non è certo qualcosa che nasce sul web. In realtà, essa deriva da uno dei principi più antichi e alla base del Graphic e del Visual Design: l’allineamento.
Il nostro cervello tende a semplificare le cose per renderle facilmente comprensibili. È per questo che cerchiamo di imporre un ordine su cose che sembrano caotiche. Naturalmente, più è facile imporre l’ordine, più velocemente il nostro cervello è in grado di identificare un modello e andare avanti.
Le griglie sono così organizzate e ordinate, che non richiedono quasi alcuna interpretazione da parte nostra.
Una griglia è semplicemente uno strumento per aiutare il disegn, ma non deve diventare qualcosa con cui la progettazione si debba scontrare!
Sezione aurea: il web e la proporzione divina!
Fin dal Rinascimento, molti artisti e architetti hanno proporzionato le loro opere seguendo il rapporto aureo – in particolare sotto forma di rettangolo aureo, in cui il rapporto tra il lato più lungo al più corto è il rapporto aureo: 1.618. La logica alla base è la convinzione che questa proporzione sia organica, universale, armonica ed esteticamente piacevole. Infatti, essendo evidente in tutto l’universo (in realtà, molte cose che ci circondano possono essere espresse in questo rapporto), la proporzione divina (che è anche chiamata rapporto aureo, sezione divina, sezione d’oro o di Fidia) è probabilmente la legge delle proporzioni più conosciuta, con cui migliorare notevolmente la struttura del vostro layout web.
Layout Web a colonne: risorse e tool online
Senza l’utilizzo dei CSS3 o di jQuery per le colonne, non è esattamente facile spezzare una pagina in colonne senza entrare in noiosi calcoli matematici.
Per esempio, se si dispone di un contenitore da 1000 pixel di larghezza e si vuole dividerlo in tre colonne, ogni colonna avrà è 333 e 1 / 3 pixel di larghezza (non esattamente un bel numero intero). Inoltre, per distanziarle uno dall’altra, dobbiamo aggiungere un margine su ogni lato.
Se aggiungiamo un margine di 10 pixel per ogni lato di ogni colonna, dobbiamo sottrarre anche che 20 pixel dalla larghezza di ciascuna colonna. Questo ci dà 3 colonne di circa 313 pixel di larghezza ciascuna, con un margine di 10 pixel per ogni lato (arrivando così a 999px e non 1.000 px).
E questo è solo un semplice esempio, che non contempla layout complessi, con gabbie diverse o barre laterali!
Ecco quindi di seguito tool e risorse web che permettono di avere layout web a colonne senza troppi calcoli!
Gridulator
Avete problemi per la creazione di una griglia perfetta al pixel? Allora dovreste provare Gridulator. Questa applicazione web permette di generare una bella griglia rosa in formato .png. È possibile personalizzare la larghezza complessiva della griglia, nonché il numero di colonne.
Come si regola ogni parametro, il sito mostrerà tutte le griglie di pixel possibili che possono essere create con tale combinazione.
Per ogni risultato vengono visualizzate la corrispondente larghezza delle colonne e la larghezza della griglia di pixel.
Un’altra caratteristica molto utile messa a disposizione da Gridulator è la possibilità di vedere in anteprima tutte le griglie di pixel possibili che possono essere create e confrontare ogni risultato simultaneamente, per poter decidere quale sia il più adatto alle esigenze del progetto.
Una volta deciso qual’è la griglia di pixel scelta, basta fare clic sul pulsante "Crea PNG" per generare l’immagine.
Grid Designer
Grid Designer è il tool più completo per calcolare al volo la larghezza delle colonne, per ottenere un layout perfetto al pixel!
Esso infatti permette di calcolare la larghezza del layout di pagina, delle colonne e dei margini intercolonna e di pagina: basta inserire numero di colonne, dimensione in pixel della colonna, gutters e margini. Il servizio consente modificare in tempo reale anche la tipografia del progetto, e di esportare il layout completo sotto forma di fogli di stile CSS.
960 Grid System
Grid System 960 è semplicemente un metodo per creare siti web utilizzando una griglia larga 960 pixel.
L’utilizzo di 960 pixel di larghezza è dovuto al fatto che il numero 960 permette un sacco di divisioni utilizzando numeri interi, se si considera la larghezza delle colonne e dei margini. E si adatta bene sulla maggior parte degli schermi.
La GS 960 è disponibile in due varianti principali: una griglia a 960 di 12 colonne e una griglia di 16 colonne (è inclusa anche una versione a 24 colonne per coloro che necessitano di controlli extra).
Grid System Generator
Il servizio offerto da gridsystemgenerator.com raccoglie il sopracitato 960 GS, assieme a un generatore di griglie basato sulla Regola Aurea, uno su 1Kb Grid e uno su SimpleGrid.
Gridr Buildrrr
Gridr Buildrrr offre uno strumento rapido per la creazione di griglie per layout web, con un controllo perfezionato dei margini, e con elementi segnaposto drag-and-drop per i banner pubblicitari.
GridFox
GridFox è un’estensione per Firefox che sovrappone una griglia su qualsiasi sito web. Facile da personalizzare, consente di creare una griglia esatta disegnata sul layout del sito web.
Grid overlay bookmarklet for 960.gs
Questo bookmarklet aggiunge una griglia in overlay di 12 o 16 colonne su qualsiasi pagina, venendo in aiuto alla progettazione, per testare i pixel alla perfezione.
Per installare il bookmarklet è sufficiente trascinare il link sulla barra degli strumenti.
Design by grid
Il magazine online designbygrid.com offre risorse e tutorial per creare perfetti layout grid-based.