Impaginazione

L'impaginazione è l'atto di disporre un testo composto e corretto, e ogni elemento che l'accompagna, nella sua giusta posizione sulla pagina^[1]. L'impaginazione è la fase della lavorazione immediatamente successiva alla composizione.

Nell'editoria, indica la modalità con cui uno stampato viene organizzato plasticamente o armonicamente. Il procedimento mira ad assemblare testo e immagini al fine di realizzare il prodotto finito (giornale, rivista, dépliant o anche una pagina web). Quando l'impaginazione è ricca di fotografie e di movimento viene definita macchiata. In senso lato si intende per impaginazione la progettazione di uno stampato^[2].

Impaginazione con tecnologia meccanica

L'impaginazione di un periodico necessita di standard predefiniti per garantire uniformità alla testata; questo permette di rendere riconoscibile il singolo periodico ed offre un orientamento facilitato al lettore. Per esempio, importanti elementi d'impaginazione sono la testata, il titolo, il riquadro (box in inglese, manchette in francese), il trafiletto e la didascalia.

Oggi l'impaginazione avviene quasi esclusivamente al computer, gli elementi d'impaginazione quindi possono essere fissati mediante l'uso dei cosiddetti fogli di stile.

Prima del computer

Il primo passo per creare un progetto impaginato da stampare era stendere un cartoncino bianco sul tavolo da lavoro e misurare le dimensioni esatte in cui il disegno sarebbe stato stampato con una matita 4H che difficilmente si vedeva sulla carta. Gli angoli erano contrassegnati da trattini (i moderni segni di taglio in InDesign). Se il layout aveva colonne o righe, queste dovevano essere misurate esattamente in modo che tutti gli elementi si adattassero alle rispettive aree. I trattini di misurazione permanenti sui bordi del progetto erano eseguiti con il righello a T e i triangoli, quindi la Rapidograph con una cartuccia di inchiostro nuova era utilizzata per tracciare le linee. Le penne Rapidograph avevano punte in ceramica di diversi spessori, per poter tracciare diversi tipi di linee. I designer avevano scelte limitate per quanto riguarda i tipi ma poiché dovevano aspettare di solito tutta la notte per ricevere il carattere, chiedevano ai tipografi 2 o 3 scelte di dimensioni e, forse, due o tre caratteri come Helvetica, Garamond o Times. Quando fu introdotta la linotipia, la composizione e la stampa divennero molto più veloci perché la tastiera della macchina da scrivere era collegata coi caratteri metallici e stampava intere righe. Il carattere doveva essere tagliato con un coltello esattamente al bordo dell'area stampata per massimizzare lo spazio nel layout. I pezzi di carattere erano posizionati con l'aiuto di cemento gommoso o cera calda. Tutte le fotografie e le immagini venivano anche tagliate al bordo con un coltello x-acto misurato al millimetro, quindi il retro veniva ricoperto di cemento gommoso o cera calda e posizionato al suo posto. Se il posizionamento non era corretto, delle pinzette erano utilizzate per staccarlo e posizionarlo nel posto corretto. I layout non erano creati con foto originali, ma di solito con fotocopie in bianco e nero^[3][4].

Una volta che l'impaginazione era pronta, il cemento gommoso o la cera extra venivano tolte, le macchie cancellate o coperte con tempera bianca, l'intero progetto ricoperta di carta glassine come "sovrapposizione" dove il designer aveva segnato i numeri Pantone per i colori degli elementi. Il carattere a colori era dipinto con matite colorate specificando l'esatto colore PMS (Pantone Matching System) da utilizzare, le immagini erano contrassegnate sulla sovrapposizione come una stampa a 4 o 2 colori, lo sfondo era contrassegnato come un colore specifico PMS o bianco e nero^[5][6].

Il progetto impaginato veniva fotografato e trasformato in bozze negative su pellicola e anche stampato su carta fotografica in bianco e nero. Quello era l'unico modo per vedere come sarebbe apparso il pezzo finale prima della stampa. Le bozze negative su pellicola erano molto importanti per controllare ogni dettaglio, i correttori controllavano con una lente d'ingrandimento sopra una scatola luminosa. Se risultavano degli errori, i designer usavano le pinzette x-acto per correggerli. Una volta che tutto era stato controllato, i negativi erano nuovamente trasformati in positivi e le pagine venivano stampate^[7].

Impaginazione con tecnologia informatica

L'impaginazione è una fase del desktop publishing^[8].

Esistono software sviluppati appositamente per l'impaginazione; i programmi più usati sono QuarkXPress, Adobe InDesign (che è l'erede dell'altrettanto famoso Adobe PageMaker) e i sistemi redazionali da essi derivanti. Nel mondo open source esistono due software avanzati, Scribus e LaTeX, quest'ultimo più adatto per le pubblicazioni scientifiche.

Formato

Esempio di impaginazione di un giornale

I giornali sono variamente impaginati a seconda del formato. In genere, i quotidiani in formato lenzuolo hanno nove colonne, quelli in formato berlinese sei, i tabloid quattro, mentre le riviste sono impaginate su un numero di colonne variabile da due a cinque.

Foliazione e fascicolazione

L'impaginazione comporta la distribuzione degli argomenti sulle pagine del giornale: ciascuna pagina contiene uno specifico argomento. Prima ancora che essa venga effettuata, però, viene stabilito il numero di pagine che formeranno il giornale. La foliazione è quasi sempre un multiplo di 4 per esigenze tipografiche. Oggi le pagine interne sono dotate di un titolo (ad esempio, "Il fatto del giorno"), spesso stampato in maiuscolo nella parte alta della pagina. Esso indica al lettore la sezione in cui è arrivato ed è chiamato testatina^[9].

Da quando l'impaginazione avviene con tecnologia informatica molti giornali riescono a comporre le pagine in luoghi diversi. Viene quindi realizzata una seconda fascicolazione oltre a quella principale. Ad esempio, le notizie sportive o quelle locali sono realizzate autonomamente (e fascicolate separatamente), poi vengono aggiunte e piegate assieme all'edizione principale. In gergo tipografico ogni fascicolo viene chiamato dorso^[10]. Si hanno, in questo caso, un dorso principale e un secondo dorso. Per quanto riguarda la distribuzione nelle edicole, in Italia non è invalsa l'abitudine di distribuire i dorsi separatamente (come nei paesi anglosassoni): il lettore gradisce che il secondo fascicolo sia incluso in quello principale.

Tecniche

Regola dei terzi

Esempio di regola dei terzi nell'impaginazione

La regola dei terzi è applicabile all'impaginazione di un progetto (che sia una pagina web o un progetto editoriale). Si posiziona una semplice griglia sovrapposta (divisa equamente in terzi, sia in orizzontale che in verticale) sullo spazio da utilizzare per il progetto. Questo crea una griglia di nove riquadri delle stesse dimensioni^[11][12].

Griglie

Esempi di griglie

Una griglia, o gabbia, è una suddivisione dello spazio di lavoro tramite linee verticali ed orizzontali volta ad organizzare gli spazi e delimitare gli elementi che andranno a comporre un progetto^[13][14].

Sezione aurea

Esempio di sezione aurea nell'impaginazione^[15]

La sezione aurea o rapporto aureo o numero aureo o costante di Fidia o proporzione divina, nell'ambito delle arti figurative e della matematica, indica il numero irrazionale 1,6180339887... ottenuto effettuando il rapporto fra due lunghezze disuguali delle quali la maggiore ${\displaystyle a}$ è medio proporzionale tra la minore ${\displaystyle b}$ e la somma delle due ${\displaystyle (a+b)}$:

${\displaystyle {\frac {a+b}{a}}={\frac {a}{b}}\ {\stackrel {\text{def}}{=}}\ \varphi }$

Regole della Gestalt

La psicologia della Gestalt è una corrente psicologica incentrata sui temi della percezione e dell'esperienza che può essere usata per l'impaginazione^[16][17][18].

Layout web basato su diversi principi della Gestalt

Regola della prossimità (Gestalt) usata nel layout in alto

Gerarchia visiva

Secondo diversi studi, comprese le pubblicazioni del Nielsen Norman Group (dai nomi di Jakob Nielsen e Donald Norman, considerato uno dei pionieri di questo campo), il team UXPin e altri, ci sono diversi modelli di scansione molto usati per disegnare le pagine Web e cartacee, tra cui i modelli "F" e "Z"^[19][20].

Modello a F

Esempio di modello a F

Il modello a F è il modello più comune di scansione visiva, in particolare per le pagine con una grande quantità di contenuti. Di solito si verifica su pagine come blog, piattaforme di notizie, editoriali tematici, ecc. Si crea posizionando le informazioni di fondamentale importanza o di interesse centrale nei punti più scansionati e cercando di utilizzare titoli brevi e intestazioni in grassetto per attirare l'attenzione degli utenti e dei lettori^[19][20].

Il modello di comportamento generale del lettore o dell'utente solitamente è il seguente^[21]:

• Inizia nell'angolo in alto a sinistra.
• Legge/scansiona la prima riga (intestazione) del testo.
• Scansiona il lato sinistro della colonna finché non trova qualcosa di interessante.
• Legge la cosa interessante con più attenzione.
• Continua la scansione verso il basso.

Modello a Z o Diagramma di Gutenberg

Esempio di modello a Z o Diagramma di Gutenberg

La regola di Gutenberg (o modello a Z) viene utilizzata per mostrare un comportamento dell'utente noto come gravità di lettura. È basato sull'abitudine di leggere da sinistra a destra, dall'alto verso il basso. È un tipico modello di scansione per pagine che non richiedono lo scorrimento, il che significa che tutti i dati principali sono visibili nell'area di pre-scorrimento. Il layout a Z è una comprensione del design che tenta di anticipare l'utente, astraendo qualsiasi distrazione e presentando azioni incoraggianti il più rapidamente possibile. In questo caso, i progettisti posizionano le informazioni di base nei punti di maggiore attenzione come gli angoli superiori; posizionano gli altri punti che richiedono attenzione lungo le linee superiore e inferiore. Si rappresenta dividendo l'area del contenuto visibile in 4 quadranti, così denominati^[20][22]:

1. Area ottica primaria. La parte in alto a sinistra della pagina è l'obiettivo principale dell'utente o del lettore: è dove gli occhi si concentreranno, indipendentemente dal fatto che l'utente stia cercando qualcosa, voglia leggere o semplicemente eseguire una rapida scansione della pagina;
2. Forte area incolta. La seconda fase della prassi di lettura riguarda la parte in alto a destra della pagina. Non è consigliabile rompere l'esperienza del lettore creata dal punto di partenza. Ciò significa che se si ha un invito all'azione, l'utente o il lettore si fermerà a questo punto e agirà;
3. Area cieca. La parte in basso a sinistra è la parte cieca del diagramma di Gutenberg. Sebbene sia leggibile, l'utente o il lettore non darà molta importanza al contenuto in quest'area della pagina;
4. Area terminale. Quando l'utente raggiunge la parte in basso a destra della pagina si verifica un'interruzione nel processo di lettura, o scansione della pagina, e l'utente dovrà intraprendere un'azione. Questo è il punto adatto per inserire inviti all'azione (come pulsanti, collegamenti, moduli, video, ecc. se si tratta di una pagina web) oppure inserire i contatti dell'azienda, dell'evento, del negozio e così via se è una pagina cartacea.

Nel web

Esempio di un layout HTML base

Impaginazione responsiva (adattabile ai dispositivi mobili)

Per creare layout di pagine web si utilizzano HTML, CSS, JavaScript e/o dei CMS. In aggiunta si usano anche linguaggi dinamici come PHP o ASP^[23].

Esempio di un layout base in HTML e CSS:

<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* testata  */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* navigazione */
nav {
  float: left;
  width: 30%;
  height: 300px;
  background: #ccc;
  padding: 20px;
}

/* menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; 
}

/* colonne */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* parte finale della pagina */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* parte responsiva del layout (rende adattabile la pagina ai dispositivi mobili)*/
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<header>
  <h2>Città</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">Londra</a></li>
      <li><a href="#">Parigi</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>Londra</h1>
    <p>Londra è la capitale dell'Inghilterra. È la città più popolosa del Regno Unito, con un'area metropolitana di oltre 13 milioni di abitanti.</p>
    <p>Situata sul fiume Tamigi, Londra è stata un importante insediamento per due millenni, la sua storia risale alla sua fondazione da parte dei romani, che la chiamarono Londinium.</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

Note

1. Giuliano Vigini, Glossario di biblioteconomia e scienza dell'informazione, Milano 1985, pag. 59.
2. «Lessico tipografico», in Vittorio Russo e Biagio Scognamiglio, Informazione e quotidiani, Liguori Editore, Napoli 1978.
3. (EN) Vintage In-Design: How magazines and books were designed before computers, su Freepik Blog, 6 giugno 2017. URL consultato il 31 agosto 2021.
4. (EN) Then and Now: Graphic Design Before Computers by the NetMen Corp, su thenetmencorp.com. URL consultato il 31 agosto 2021 (archiviato dall'url originale il 7 aprile 2022).
5. (EN) Mika, How Was Graphic Design Done Before Computers, su DesignyUp, 17 ottobre 2018. URL consultato il 31 agosto 2021.
6. (EN) Design Before Computers Ruled the Universe, su Webdesigner Depot, 29 febbraio 2012. URL consultato il 31 agosto 2021.
7. (EN) Layout before computers, su handandeye.co.uk, 3 febbraio 2021. URL consultato il 31 agosto 2021.
8. Desktop Publishing: chiarire l’argomento., su Base Grafica, 28 maggio 2011. URL consultato il 30 agosto 2021 (archiviato dall'url originale il 30 agosto 2021).
9. testatina: significato e definizione - Dizionari, su testatina: significato e definizione - Dizionari - La Repubblica. URL consultato il 30 agosto 2021.
10. bricoportale.it.
11. (EN) Muriel Garreta Domingo, The Rule of Thirds: Know your layout sweet spots, su The Interaction Design Foundation. URL consultato il 30 agosto 2021.
12. canva.com.
13. Come usare le griglie nel graphic design, su Grafigata!, 30 aprile 2015. URL consultato il 30 agosto 2021.
14. (EN) Sam Hampton-Smith14 September 2020, How to create balanced page layouts, su Creative Bloq, 14 settembre 2020. URL consultato il 30 agosto 2021.
15. La sezione aurea in Grafica: cos'è, e come può aiutarci, su Shiny Blog, 29 marzo 2018. URL consultato il 30 agosto 2021.
16. La Gestalt nel Graphic Design - Corso di Grafica, su Andrea Loddo Design, 2 maggio 2019. URL consultato il 18 settembre 2021.
17. (EN) Annika Oeser, Improve Your Layout Design with Gestalt Principles, su Evolving Web. URL consultato il 18 settembre 2021.
18. Gestalt: i suoi principi e come vengono applicati al Design., su Agenzia di Comunicazione, Branding e Web Marketing a Roma - Branding Addicted, 3 ottobre 2017. URL consultato il 18 settembre 2021.
19. (EN) LINE, Visual Hierarchy, Gutenberg Diagram, F & Z Pattern, su Medium, 17 maggio 2019. URL consultato il 30 agosto 2021.
20. (EN) Improve Your Digital Marketing Designs With Visual Hierarchy, su Pugo Design Studio, 3 aprile 2020. URL consultato il 30 agosto 2021.
21. admin, Gutenberg Diagram, Z-Pattern, e F-Pattern, su Gianluca Tramontana Blog, 20 dicembre 2015. URL consultato il 30 agosto 2021.
22. (EN) Mário R. Andrade, The Gutenberg Diagram in Web Design, su Medium, 2 marzo 2018. URL consultato il 30 agosto 2021.
23. HTML.it | Guide, download, tutorial e news, su HTML.it. URL consultato il 24 agosto 2021.

Voci correlate

• Editoria
• Imposizione tipografica
• Menabò
• Tipografia

Altri progetti

Altri progetti

• Wikimedia Commons

• Wikimedia Commons contiene immagini o altri file su impaginazione

Controllo di autorità	Thesaurus BNCF 9479 · LCCN (EN) sh85106791 · GND (DE) 4269003-1 · J9U (EN, HE) 987007536360205171 · NDL (EN, JA) 00569342