I principi della progettazione grafica: lavorare con le griglie

di sarah | 15 Ott 2012 | in: Design

Nello scorso articolo abbiamo dato uno sguardo ai principi della sezione aurea e alla sua applicazione in un progetto di Web Design. Oggi vedremo quali altri metodi di lavoro possono aiutarci a dare un equilibrio visivo alle pagine web che dobbiamo disegnare: in questo articolo vediamo cosa è la famosa regola dei terzi e parleremo dell’utilizzo delle griglie.

La regola dei terzi

Chiusa la parentesi dedicata alla sezione aurea, un altro principio interessante è quello della cosiddetta “regola dei terzi”, che consiste nella suddivisione di un’immagine – o comunque di un progetto grafico – in terzi, attraverso un reticolo definito da quattro linee, due verticali e due orizzontali.

In questo modo l’immagine sarà equamente suddivisa in una griglia composta da nove sezioni uguali tra di loro, come é possibile vedere nella figura 10.

Figura 1 – Sovrapposizione della griglia

La sezione centrale che otteniamo grazie alla sovrapposizione di questa griglia immaginaria sull’immagine prende il nome di sezione aurea e i quattro punti di intersezione che la delimitano sono detti punti focali (o fuochi).

Quest’ultimi rappresentano le zone visive in cui l’occhio, dopo essere stato attratto verso il centro dell’immagine, si concentra maggiormente.

Figura 2 – I quattro punti focali ottenuti dalla griglia

Da un punto di vista prettamente estetico, sempre secondo la tesi, ponendo il soggetto in uno dei punti di intersezione della griglia (come nell’immagine che abbiamo appena visto), l’immagine risulta essere più dinamica e armoniosa. In poche parole, più accattivante.

La regola dei terzi applicata al web design

Se è vero che i quattro punti di intersezione rappresentano le zone in cui l’occhio si concentra maggiormente, perché non sfruttare questa potenzialità nella progettazione del nostro layout, magari posizionando proprio sui punti focali gli elementi a cui vogliamo dare maggior risalto?

Proviamo a dare un’occhiata ai fuochi del layout di esempio e vediamo che cosa succede.

Figura 3 – Sovrapposizione della griglia nel nostro layout di esempio

Le intersezioni della griglia sovrapposta al layout danno maggior risalto:

All’immagine dell’header;
Allo slogan testuale inserito nell’header;
Al contenuto della pagina;
Ad un punto imprecisato delle news laterali.

Non è male, ma possiamo senz’altro migliorare le potenzialità dell’interfaccia. Per esempio, è un bene che uno dei punti focali sia posizionato sull’immagine della testata, in quanto questa è fortemente evocativa ed accattivante per l’attività del nostro ipotetico cliente.

Tuttavia occorre spostare lo slogan leggermente a sinistra, e sarebbe preferibile che nella sezione inferiore uno dei punti focali evidenziasse la promozione, visto che la stessa è fondamentale per attirare un flusso maggiore di clienti e per attirare l’attenzione.

Apportiamo dunque le opportune modifiche fino ad ottenere il risultato desiderato:

Figura 4 – La nuova disposizione degli elementi sulla base dei punti focali

Modificando alcune parti della struttura della pagina abbiamo ottimizzato al meglio il design sulla base dei punti focali, ponendo in evidenza tutte le sezioni più importanti: il testo, la bella foto nella testata, lo slogan e il box con la promozione.

Il sistema delle griglie

Un altro interessante metodo per posizionare in modo semplice ed efficace gli elementi all’interno di un layout riguarda l’utilizzo delle griglie, ovvero la suddivisione del layout in un numero definito di colonne verticali, tutte della stessa dimensione, separate l’una dall’altra da una distanza costante.

La griglia offre una discreta versatilità nei blocchi del layout e rende molto più semplice la suddivisione dell’area di design tra contenuti testuali, contenuti decorativi e spazi bianchi. Grazie alla simmetria delle griglie, é praticamente impossibile creare elementi di dimensioni sproporzionate o progettare un layout asimmetrico e confuso.

Sul sito thegridsystem.org é possibile scaricare alcuni templates di griglia da importare in Photoshop o Firework. Il pacchetto comprende numerose griglie, da quella a 3 colonne a quella a 16 colonne: non esiste la più adatta o la meno adatta, esiste solo quella più indicata al tipo di layout che stai progettando ed é per questo che a seconda del disegno é possibile appoggiarsi su una griglia piuttosto che su un’altra.

Se nella sezione inferiore del layout, per esempio, sono presenti tre box con i servizi dell’azienda, è senz’altro più indicato utilizzare la griglia da 12 colonne rispetto a quella da 16, essendo 12 un numero divisibile per tre.

Viceversa, se i box da rappresentare fossero 4 potremmo optare sia per la griglia da 16 colonne sia per quella da 12, scegliendo quella più adatta sulla base delle dimensioni che vogliamo assegnare ad ogni singolo box.

Figura 5 – Se dobbiamo posizionare quattro box possiamo farlo con la griglia a sedici colonne.

In questo modo le quattro sezioni avranno una larghezza di 220 pixel e saranno composti da quattro colonne ognuno.

Figura 6 – Se invece utilizzassimo la griglia a dodici colonne, ognuna delle nostre sezioni sarebbe composta da tre colonne, anche se le dimensioni rimarrebbero comunque invariate.

Proviamo ad applicare una griglia al layout che abbiamo realizzato come supporto a questa guida e guardiamo cosa succede:

Figura 7 – sovrapposizione della griglia sul nostro layout

Ogni elemento è allineato in modo corretto: applicando la regola dei terzi e la sezione aurea sono riuscita a dare una simmetria efficace e chiara al mio layout, anche senza l’utilizzo delle tradizionali griglie.

In questo esempio abbiamo utilizzato una griglia di 960 pixel per motivi che vedremo più avanti, tuttavia ultimamente – grazie all’evoluzione delle risoluzioni dei monitor maggiormente in uso e alla nascita del concetto di web design “responsive” – sempre più web designer scelgono di progettare i loro layout basandosi su griglie di dimensioni leggermente più grandi (generalmente 1140 – 1170 pixel). Se vuoi sperimentare con misure diverse – e più “attuali”, su questo sito puoi scaricare una griglia “fluida” adatta per un layout di 1140 pixel e su questo un’altra griglia responsive (ottimizzata per risoluzioni dai 240 ai 2560 pixel addirittura!)

Griglia si, griglia no: pro e contro

Sull’utilizzo della griglia il mondo del web design si divide in due: i web designer (o più propriamente, i grafici) sono spesso restii ad utilizzare le griglie, perché quest’ultime tendono ad “imbrigliare” l’estro creativo, ponendo non pochi limiti sul posizionamento degli elementi. Di tutt’altro avviso sono gli sviluppatori, che vedono le griglie come un sistema di ottimizzazione del processo di sviluppo, che diventa cosi più semplice e immediato.

In un piatto della bilancia abbiamo quindi layout simmetrici – con i vari elementi allineati tra di loro – e tempi di sviluppo più brevi; dall’altra una limitazione nella fase della progettazione grafica che, ve lo dico per esperienza, può rivelarsi decisamente frustrante (provate a posizionare cinque box in una griglia di dodici colonne, e poi ne riparliamo!)

Un’altra critica piuttosto comune all’utilizzo delle griglie riguarda la standardizzazione dei design che, dovendo seguire determinate misure e paletti nel posizionamento di box, testi, immagini e quant’altro, tendono ad assomigliarsi un po’ tutti, ad ovvio discapito della qualità finale del layout (basta dare un’occhiata a showcases come questo per renderse conto). Ormai il web sembra prolificare di siti tendenzialmente simili (colonne testuali, immagini allineate, ecc.), segno che la comodità delle griglie sta avendo la meglio sul processo concettuale e creativo? Lascio a voi l’ardua sentenza.

(Io, si sa, sono di parte.)

Indice del corso

Dalla carta al web: i diversi modi di concepire la grafica
I principi della progettazione grafica:
La teoria del colore
Comunicare con i font: la tipografia sul web
- Le basi: anatomia di un carattere tipografico
- Font decorativi, calligrafici e dingbats
Giocare con le immagini in un design emozionale
Mockup e…to sketch
Let’s design: progettiamo il nostro layout
Analisi ed esercitazione: i design più comuni
Dalla grafica al codice: è ora di ottimizzare
I dettagli che fanno la differenza? vediamoli insieme
Gli errori (e orrori) grafici più comuni
Appendice: alla ricerca delle risorse giuste

Scarica articolo in PDF

Tag: corso grafica, Design

L'autore

Web designer, lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.

Sito web dell'autore | Altri articoli scritti da sarah

34 commenti

Mirco

15 ottobre 2012 a 09:17

# 1

Sempre cose nuove da imparare! Bene, bene.

Rispondi
- sarah
  
  15 ottobre 2012 a 09:33
  
  # 2
  
  …chi non ha più niente da imparare, è perduto. :)
Francesco

15 ottobre 2012 a 09:23

# 3

Un articolo sulle griglie non me lo aspettavo da te, una che “sente la propria creatività limitata da quelle colonne” =P

[cit. Nando]

Rispondi
- sarah
  
  15 ottobre 2012 a 09:34
  
  # 4
  
  …eh, infatti non ho mancato di lasciare una piccola postilla sull’uso – e il non uso – delle griglie. Ma se devo tenere un corso di grafica non posso evitare l’argomento ;)
AG webdesign

15 ottobre 2012 a 09:23

# 5

Ottimo articolo, personalmente utilizzo le griglie quando voglio fare un sito web che richiede una certa sobrietà e pulizia nei contenuti. Se già dovesse essere qualcosa “fuori dai soliti schemi” sono il primo ad abbandonare le griglie per dare spazio alla creatività.

Sicuramente aiutano, sia nella fase di progettazione del layout che nella fase di coding, avendo già tutte le classi predisposte con misure, dimensioni, margini, ecc…

Ps: dove si possono trovare le griglie con i fuochi (quella di questo articolo in pratica) e quella sulla sezione aurea? C’è un sito con dei template in photoshop/illustrator/fireworks? Grazie mille…

Rispondi
- sarah
  
  15 ottobre 2012 a 09:38
  
  # 6
  
  Ciao Alessandro, le griglie con i fuochi le ho disegnate io, a quanto pare sul web non si trova niente di simile. In realtà realizzarne una è molto semplice, devi solo dividere larghezza e altezza del tuo layout in 3 sezioni orizzontali e verticali (chi fa da sè fa per tre, mai detto fu più veritiero!).
  
  Per la sezione aurea ho invece sovrapposto l’immagine della spirale aurea che puoi trovare anche su google, niente di particolarmente elaborato :)
Carlo D'Angiò

15 ottobre 2012 a 09:25

# 7

(Io, si sa, sono di parte.)

Io sono dalla tua parte. Di certo le griglie velocizzano lo sviluppo. Ma disegnare con le griglie è punitivo. E’ come dire a un creativo che può essere “creativo” ma non troppo.
Bell’articolo!

Rispondi
- sarah
  
  15 ottobre 2012 a 09:39
  
  # 8
  
  …chi disegna deve essere per forza dalla mia parte, non c’è storia. Sono gli sviluppatori – razza meschina e priva di fantasia, ahinoi – a osannare l’uso smodato delle griglie. Ci vogliono imbrigliare la creatività, ci vogliono.
  
  Ecco. ;)
Alex

15 ottobre 2012 a 10:02

# 9

grazie Sara, molto molto utile!

Rispondi
- sarah
  
  17 ottobre 2012 a 14:47
  
  # 10
  
  Ne sono felice :)
Ilaria

15 ottobre 2012 a 16:53

# 11

Non riesco a crederci, questa guida era esattamente quello che mi serviva…sono quasi commossa :’-)

grazie ragazzi!

Rispondi
- sarah
  
  17 ottobre 2012 a 14:48
  
  # 12
  
  su su, non piangere :D sono felice di esserti cosi utile!
Simone

15 ottobre 2012 a 23:21

# 13

Ottimo articolo!
Vi consiglio il seguente sito, http://www.blueprintcss.org/, per gli sviluppatori è un ottimo framework e ovviamente ti permette di lavorare con le griglie.

Rispondi
- sarah
  
  17 ottobre 2012 a 14:48
  
  # 14
  
  Grazie per la segnalazione :)
michele sforza

22 ottobre 2012 a 09:38

# 15

Ma la regola dei terzi non dovrebbe essere applicata alla parte visibile del sito dello schermo?
In quanto se la applico a tutto il sito come se fosse una semplice foto, può succedere che una parte del sito si trovi sotto la linea che demarca il limite dello schermo e quindi diventa non applicabile che l’occhio non guarderà mai al secondo terzo!
Spero di essere stato chiaro e di non aver detto corbellerie!
grazie

Rispondi
- sarah
  
  22 ottobre 2012 a 12:18
  
  # 16
  
  Ciao Michele, certo, dici benissimo, infatti nell’esempio ho sovrapposto la griglia solo nel layout visibile (i classici 960 pixel) :)
mex

6 novembre 2012 a 08:54

# 17

Io sto dalla parte opposta, ma non perchè voglio imbrigliare chi fa la parte grafica. Lo hai già detto, ma lo ridico: creare un layout da zero ha i suoi costi di tempi relativamente lunghi soprattutto perchè bisogna che sia cross-browser e sappiamo tutti le magagne di Internet Explorer. Ciò significa perdere molto tempo solo per lo stile. Ciò può avere senso se il progetto è importante o viene pagato bene (il tempo è denaro, giusto?). In realtà credo che in un gruppo, per equilibrare, debbano coesistere sviluppatore, web designer e grafico e non solo sviluppatore-grafico.

Rispondi
francesca

5 dicembre 2012 a 15:53

# 18

Consiglio un libro che mi ha aiutato tantissimo sulle griglie!
Making and Breaking the grid – Timothy Samara

Rispondi
maxlovegods

20 dicembre 2012 a 12:03

# 19

Prima domanda: Ottima la spiegazione della griglia e dei punti focali. La mia domanda è: la griglia deve riguardare la parte immediatamente visibile del sito da parte dell’utente, oppure deve comprendere anche la parte di sito che si va a vedere solo quando si scorre in basso? Se fosse la seconda, come viene considerato quel sito dinamico che si allunga in base ai contenuti? Altra domanda: Il menu di un sito, in questo contesto dei punti focali, perde quindi di importanza?

Rispondi
Michele

22 marzo 2015 a 17:32

# 20

Salve vorrei creare un web che tratta di fumetti e anime (cartoni animati) potete darmi una mano come impostarlo.

Rispondi