Layout e griglie: Gabbie che non ingabbiano

layout_scene

Introduzione

Abbiamo visto nei precedenti articoli che una buona progettazione si basa soprattutto sull’equilibrio e che esistono dei canoni che aiutano il progettista a prendere delle decisioni durante il processo creativo. Anche per un progetto di impaginazione esistono alcuni strumenti che aiutano il progettista ad organizzare il contenuto all’interno di una pagina pagina, come il layout. Doveroso, aprire una piccola parentesi sul termine pagina: Lavorando con sistemi diversi (carta stampata, web, app per mobile ecc…) si intende pagina, in questo caso, una qualsiasi area nel quale dover organizzare e distribuire un determinato contenuto.

Il layout

layout_esempi

Prima di procedere operativamente all’assemblaggio di un artefatto è opportuno progettare e sviluppare un layout.  Il layout è la struttura grafica del nostro artefatto, l’ossatura utile ad organizzare gli spazi e predisporli al montaggio finale. Quindi prima di inserire nella nostra pagina le immagini e il testo, dobbiamo organizzare lo spazio che abbiamo a disposizione, una fase del processo di impaginazione fondamentale per ottenere un risultato armonico. Nel caso di un libro o una rivista si possono anche realizzare una serie di varianti di layout nel quale si prevede dove disporre immagini (Indicate da un rettangolo con le diagonali) e il corpo dei testi (Indicato da delle linee orizzontali distanziate dall’interlinea interlinea.

La griglia di impaginazione

Per sviluppare un layout, dobbiamo costruire è la griglia di impaginazione che ci servirà per ottenere dei moduli da utilizzare per l’allineamento e la distribuzione di testi e immagini. La griglia sarà costruita attraverso l’intersezione di righe e colonne separate opportunamente da uno spazio (detto gutter). I moduli diventano la struttura portante in cui “ingabbiare” i vari elementi e diventeranno una sorta di unità di misura relativa del nostro layout. Procediamo con un esempio per capire meglio.

griglia
Griglia di impaginazione 8×8 su una pagina 210×210 mm con margini da 100 mm a giro. B. gutter C. riga. E. Colonna. F. modulo. H margine.

Nell’esempio abbiamo creato un margine dentro il quale scegliamo di costruire la nostra gabbia. Poi, tramite l’intersezione di otto righe e otto colonne, otteniamo una griglia da 64 moduli ovvero una griglia 8×8.

Dalla griglia al layout

All’interno di questa griglia disponiamo un testo da 6×1 sulla prima riga (il titolo) partendo dalla seconda colonna. Nella seconda riga, a cominciare dalla seconda colonna abbiamo predisposto un’immagine 6×3 e appena sotto (quindi a partire dalla terza riga) un’altra area di testo 6×3.

layout
Layout su griglia di impaginazione 8×8 di una pagina 210×210 mm con margini da 100 mm a giro. A area di testo 6×1. B gutter. C riga. D area immagine 6×3 E. Colonna F. singolo modulo G. area di testo 6×3. H. margine.

 

Come si vede, ogni elemento segna la posizione di un eventuale contenuto che quindi potrà essere messo all’interno e occupare l’area prevista. Una volta definito il layout possiamo facilmente procedere con l’impaginazione finale, nel nostro esempio il risultato potrebbe essere questo.

Manualedicomunicazionedimpresa_11feb16_interattivo

Conclusione

Con una singola griglia si possono realizzare una moltitudine di layout e su una singola pagina si possono realizzare infinite combinazioni di griglie. Deve essere il progettista che, tramite le sue conoscenze e la sua esperienza, dovrà scegliere come “architettare” il proprio lavoro. Anche se a volte può sembrare un passaggio noioso, in realtà è fondamentale sia per prodotti destinati alla stampa che per pagine web.

Autore dell'articolo: Roberto Maiolino

Formazione professionale da graphic designer, lavoro nel settore nel marketing tradizionale e digitale. Una figura unica per la grafica, la comunicazione e l’advertising. Da anni lavoro per le aziende sul territorio nazionale e per le agenzie di comunicazione del Trentino-Alto Adige. www.robertomaiolino.it

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.