gabbie_di_layout

Dobbiamo supporre che alla base di una gabbia ci sia un reticolo strutturale, o se preferite una griglia (a me questo termine ricorda piuttosto un bbq!). Qualcosa che regge e ordina tutto quello che poniamo al di sopra e che copre l’intera superficie della pagina, margini compresi.
Sistemati i margini, stabiliamo il numero delle colonne (una, due, tre, quattro, ecc) e – se più di una – lo spazio tra esse (3, 4, 5 mm, ecc). Stabiliamo la disposizione e la simmetria.
Il criterio più funzionale è quello modulare. La grafica modulare è stata introdotta dalle scuole grafiche moderne ed è alla base anche del web_design.

Le parti che compongono un tipico impaginato

Le parti che compongono un tipico impaginato

A questo punto la base della gabbia è pronta ad ospitare i nostri contenuti: testi (di ogni tipo), illustrazioni (grafica e fotografie) ed elementi grafici secondari e infografica.

bibbia mazarina

Elaborato didattico: ricostruzione della gabbia della Bibbia delle 42 linee, basata sul rettangolo” aureo”

Per i più curiosi, vediamo come si regolò un antico maestro, Johan Gutenberg, per la gabbia di layout (!) della sua Bibbia (il primo progetto di grafica editoriale della storia).
Il suo criterio si basò sulla costruzione del cosiddetto “rettangolo aureo”, noto sin dall’antichità e adoperato in età classica per la progettazione, ad esempio, del Partenone. Questo curioso rapporto matematico è riscontrabile in natura, come nel caso nella conchiglia del nautilo.

Prospetto frontale del Partenone

Prospetto frontale del Partenone

In che modo disporremo gli elementi nella pagina? Secondo quale criterio di composizione? Come equilibreremo i pesi? Con quale ritmo comporremo gli “oggetti” e gli spazi vuoti (le pause)? Già, una composizione è una composizione! E se pure non siamo musicisti, siamo pur sempre compositori-grafici.

Qualche esempio di impaginazione ci aiuterà nel discorso, illustrando alcuni aspetti già considerati, come i margini e le colonne, ma soprattutto la questione della composizione.

Francavilla p. 156

Esempio di doppia pagina, da C. Francavilla, Progettazione Grafica, Hoepli 2007

Le linee colorate evidenziano la struttura della pagina e come si compongono gli elementi grafici presenti. Nella pagina destra, il quadrato grigio in basso (arancione nell’originale, quindi visivamente più pesante) è collegato visivamente col quadrato più grande (nero, quindi meno pesante), posti in equilibrio tra loro. Nella pagina di sinistra, la & è inserita in un quadrato ideale, collegato col quadrato (arancione nell’originale), mentre i testi Muscoli-Zucchero formano una L rovesciata di peso molto equilibrato.

Esempio di impaginazione ben equilibrata per ritmo simmetrie

Esempio di impaginazione ben equilibrata per ritmo e simmetrie

Altrove abbiamo già discusso dell’importanza delle leggi della percezione visiva nella disposizione (configurazione) degli elementi nell’impaginato (si tratta di uno degli argomenti fondamentali nello studio del basic_design, l’insegnamento propedeutico al graphic design).

Vorrei insistere su un concetto. La fase esecutiva è oggi espletata con applicativi grafici (DTP) più o meno potenti (X-Press, InDesign, Scribus, … ad esempio). Questi software dispongono di ogni potenzialità di editing e per l’ impaginazione, per cui, ad esempio sarebbe semplice per chiunque replicare una impaginazione come quella nell’esempio (a sinistra). Quello che i software non sanno fare  – per il  momento – è progettare una gabbia di layout. Analizziamo ora la gabbia e l’impaginazione dell’esempio. Usandola come  modello la ricostruiremo con un applicativo vettoriale (Freehand o Inkscape).

Pagina ricostruita con Freehand

Pagina ricostruita con Freehand

La gabbia di layout può sostenere una impaginazione simmetrica – in alto nella illustrazione -, o asimmetrica come nello schema in basso.

Disposizione delle colonne in gabbia simmetrica e asimmetrica

Disposizione delle colonne in gabbia simmetrica e asimmetrica

Il principio della modularità, sviluppato dalla scuola grafica svizzera a partire dagli anni Cinquanta, si è imposto universalmente per la flessibilità e la chiarezza delle composizioni che su di esso si possono sviluppare.

Esempio di gabbia modulare

Esempio di gabbia modulare

Esempio di impaginazione (magazine)

Esempio di impaginazione. La linea nera indica il margine vivo della pagina. Alcune immagini si estendono intenzionalmente sul margine al vivo e verranno ritagliate

Nella sezione dedicata alla Gestalt_psychologie abbiamo esposto le leggi principali e illustrato gli esempi classici ad esse associati. Dovremo occuparci ancora di questi concetti chiave per renderli operativi nel corso delle lezioni e delle esercitazioni in laboratorio.

Rettangolo aureo (file pdf di approfondimento)

Annunci

Informazioni su vincegargiulo

Nato a Napoli dove ho studiato arte. Insegno grafica e fotografia nella scuola statale. I miei interessi spaziano dalla comunicazione visiva alla filosofia, fotografia, cinema ...
Digressione | Questa voce è stata pubblicata in appunti, Esercitazioni e contrassegnata con , , . Contrassegna il permalink.

Benvenuti su Classroom_news!

Effettua il login con uno di questi metodi per inviare il tuo commento:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...