LAYOUT PER LA STAMPA E PER IL WEB

 

Cosa hanno in comune il lavoro del copywriter, del web designer e graphic designer?

Tante cose accomunano le professioni della nostra agenzia e purtroppo anche una crisi a volte può colpire ognuno di noi: la crisi da foglio bianco.

In L+V Design per superarla usiamo la progettazione.

La progettazione spesso si traduce in griglia (grafica, di testo o web).

 

COS’È UNA GRIGLIA?

 

Una suddivisione dello spazio di lavoro attraverso linee orizzontali e verticali.

 

A COSA SERVE?

 

Distinguere diversi tipi di informazione così da rendere più semplice la loro fruizione.

Partiamo dall’analizzare come è fatta una pagina e una pagina web.

Layout per la stampa e per il web griglia 1

Layout per la stampa e per il web griglia 2

 

LA STRUTTURA DELLA GRIGLIA:

 

Le colonne: sono gli allineamenti verticali. Possono essere tutti della stessa dimensione o no, ogni colonna è separata da uno spazio chiamato intercolonna.

Le righe: sono il risultato della suddivisone dello spazio tra margine superiore e inferiore, tra loro si interpone sempre un ulteriore spazio detto interlinea.

Le linee guida: suddividono lo spazio e possono essere usate per agganciare la fine o l’inizio dei testi e delle immagini.

Moduli: le unità create dall’intersezione tra righe e colonne.

Sezioni: sono l’insieme di più moduli, righe o parti di colonne che compongono un’area specifica a contenere una data informazione.

Marcatori: linee per le sezioni di testo subordinate, numero di pagina e titolo autore della pubblicazione.

 

MA COME SI COSTRUISCE UNA GRIGLIA?

 

Ti propongo cinque step per costruire una griglia, ma la cosa fondamentale è che ci sia una logica compositiva e che si definiscano proporzioni spaziali matematiche.

Layout per la stampa e per il web griglia 3

COSTRUIRE UNA GRIGLIA IN 5 STEP:

 

1 – CONOSCI IL CONTENUTO E IL FORMATO

 

Questo ti permetterà di anticipare problemi che si verificheranno quando metterai il contenuto nella griglia, titoli lunghi, immagini che non si possono tagliare, punti morti senza testo, superamento del numero di pagine a disposizione.

Puoi creare una tabella o una lista prefigurandoti le ipotesi con maggiore contenuto e le ipotesi con minore contenuto.

Ad esempio 1 pagina oppure 15/30 pagine, un’immagine piccola o 10 immagini, o addirittura una galleria.

 

2 – FAI UNO SCHIZZO

 

Ti consiglio di fare un veloce schizzo a mano con pochi elementi chiave importanti.

Lo schizzo a mano è sempre una prerogativa importante quando si progetta, perché non ci si perde in dettagli inutili, lo schizzo deve essere sommario e di sintesi per avere semplicemente una visione d’insieme.

 

3 – SCEGLI UNA REGOLA MATEMATICA PER FARE LA TUA GRIGLIA

 

Puoi partire dalla dimensione del foglio e suddividere proporzionalmente.

Layout per la stampa e per il web griglia 6

Oppure puoi usare la sezione aurea.

Layout per la stampa e per il web griglia 6

 

4 – SII CREATIVO

 

La griglia non deve essere un limite alla creatività.

Una griglia va seguita senza rigidità, ci si può allontanare quando ci sono buoni motivi per farlo.

Infatti, si può progettare anche senza griglia, seguendo altre valide logiche compositive, ma le affronteremo in un prossimo articolo.

 

5 – GIOCA A TETRIS CON GLI ELEMENTI

 

Ci sono tanti trucchi per rendere meno noiosa una griglia e dare rimbalzo.

Puoi mettere nella doppia pagina, in quella di sinistra le immagini in alto e, in quella di destra le immagini in basso, puoi alternare immagini piccole, medie e grandi. Puoi uscire dai margini per alcune immagini o disporre il testo diversamente.

Layout per la stampa e per il web griglia 4

Infine per quanto riguarda il layout responsive nel web valgono gli stessi step precedenti. Una cosa è però fondamentale: progettare il look partendo dal piccolo, quindi dallo smartphone, per poi passare al desktop.

Layout per la stampa e per il web griglia 5

Lo smartphone sarà una sezione o un modulo da ripetere all’interno della griglia per il browser desktop.

 

Libri che dovete assolutamente acquistare e leggere se vi interessa l’argomento:

Siti di risorse utili:

Per carta

http://gridulator.com/

Per web

http://grid.mindplay.dk

https://markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-4/