L architettura della pagina Le griglie di impaginazione

L architettura della pagina Le griglie di impaginazione

Perché usare le griglie?

Le griglie permettono di organizzare i contenuti con chiarezza. Una buona base da cui partire, anche quotidianamente... Sarebbe pensabile pubblicare un quotidiano dovendolo riprogettare tutto ogni giorno?

Proprio come in natura sistemi ordinati governano lo sviluppo e la configurazione della materia animata e inanimata, così l attività dell uomo è contraddistinta fin dalle origini dalla ricerca dell ordine... Il desiderio di dare ordine al caos che ci circonda riflette un bisogno profondamente umano. Josef Müller-Brockmann, Grid System in Graphic Design

Compattezza Intellegibilità Chiarezza Ordine Precisione Velocità

Tacit knowledge Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis! Er zijn boekenkasten vol geschreven over typografie. Echter er is niemand die je een formule of vast recept kan geven. Dit hoorcollege is een wegwijzer in de wereld van de stille kennis Wim Wim Crouwel, Gridnik Alias Gridnik Co-fondatore dello studio Total Design. Co-founder Oltre che per of la qualità Total Design, della sua produzione, godfather of Dutch conosciuto Design. per il Very suo approccio well known funzionale of his functional e per i suoi approach progetti basati and sulle his griglie grid based designs.

1975 1961 1928 2009 2005-2009

Wim Crouwel, Josef Brockmann e altri non sono stati i primi ad usare le griglie... Johannes Gutenberg, Biblia latina, 1452-1455

Sistema modulare e pianificazione urbana Castrum romano Centuriatio

Sistema modulare e pianificazione urbana Castrum romano Tracciati urbani Centuriatio

Sistema modulare e pianificazione urbana Idelfonso Cerdà, Barcellona, 1859

Sistema modulare e pianificazione urbana Manhattan, New York, 1811-2011

Sistema modulare e architettura Pseudoperiptero Pseudodiptero Periptero Paestum (SA) Diptero

Sistema modulare e architettura

Sistema modulare e architettura

Sistema modulare e architettura

Sistema modulare e architettura

Sistema modulare e architettura MVRDV, Wozoco, Amsterdam, 1997

Sistema modulare e architettura MVRDV, Wozoco, Amsterdam, 1997

Sistema modulare e architettura Steven Holl, Simmons Hall, Massachusetts Institute of Technology (MIT), 1999-2002

Questa era solo una premessa

Una questione di proporzioni

L oggetto libro. Volumen e codex manoscritti Aula del Nuti, Biblioteca Malatestiana, 1447-1454, Cesena

L oggetto libro. Volumen e codex manoscritti

L oggetto libro. Volumen e codex manoscritti Codex Gigas, conosciuto come Bibbia del Diavolo, 1229 (?)

L oggetto libro. Volumen e codex manoscritti «La forma-libro è determinata dalla nostra anatomia. Ce ne possono essere di grandissimi ma per lo più hanno funzione di documento o di decorazione; il libro standard non può essere più piccolo di un pacchetto di sigarette o più grande di un tabloid. Dipende dalle dimensioni della nostra mano, e quelle almeno per ora non sono cambiate [...]» Umberto Eco, Perché si amano, si desiderano, si collezionano i libri?, LaRepubblica, 2006.

Iniziamo dalla proporzione Con proporzione si intende la relazione fisica o strutturale tra una parte e l intero, come nel rapporto tra la dimensione della gabbia di testo e la pagina nel suo complesso. È uno strumento utile per creare un layout armonico, perché aiuta a definire le relazioni dimensionali che governano i vari elementi grafici. La sezione aurea I layout basati su proporzioni auree risultano particolarmente appaganti per l occhio umano.

Iniziamo dalla proporzione Con proporzione si intende la relazione fisica o strutturale tra una parte e l intero, come nel rapporto tra la dimensione della gabbia di testo e la pagina nel suo complesso. È uno strumento utile per creare un layout armonico, perché aiuta a definire le relazioni dimensionali che governano i vari elementi grafici. a a b a a+b (a+b):a=a:b=φ φ=1,618033988... 1/2 a 1/2 a a b Il segmento a viene detto parte aurea del segmento a+b.

La sezione aurea in natura Il rapporto della sezione aurea è presente in natura e si può ritrovare nella crescita geometrica della conchiglia del nautilo o nei delfini

La sezione aurea in natura...ma anche nelle celle di un alveare o nei semi di un girasole

Iniziamo dalla proporzione Leonardo Da Vinci, Uomo vitruviano, 1490 ca Le Corbusier (1887-1965), Modulor

Iniziamo dalla proporzione Leonardo Da Vinci, Uomo vitruviano, 1490 ca Le Corbusier, Modulor, 1943-1955

Iniziamo dalla proporzione

I formati ISO ISO International Organization for Standardization Formato codificato dal fisico tedesco Georg Lichtenberg nel 1786 che si basa sul formato tedesco DIN 476. A0 1188x840 I formati ISO sono basati tutti su un unico rapporto d aspetto della radice quadrata di 2, o approssimativamente 1:1.4142 e il formato base A0 misura 1188x840 mm ed è pari a 1 mq. I sottomultipli sono i formati A1, A2, A3, A4, A5, A6 e A7. L utilizzo dei formati è uno standard funzionale. Esistono anche le serie B e C, ovvero per elementi quali buste e cartelle pensate per contenere gli oggetti della serie A. A3 420x297 A6 148,5x10,5 A7 A2 594x420 A7 A5 210x148,5 A4 297x210 A1 840x594

I formati ISO ISO International Organization for Standardization A0 1188x840 A3 420x297 A6 148,5x10,5 A7 A7 A5 210x148,5 A4 297x210 A1 840x594 A2 594x420

I formati commerciali 50x70 50x35 In commercio, in particolare per la stampa tipografica, troviamo anche altri formati: 70x100 cm 25x35 25x17,5 Dal formato 70x100 cm si possono ricavare: 2 locandine 50x70 cm 4 locandine 35x50 cm 8 pagine 25x35 cm 16 pagine 17,5x25 cm L impianto del foglio 70x100 cm è infatti la base per la stampa di un ottavo le cui pagine misureranno 24x34 cm (un centimetro è lo spazio relativo alla pinza di fermatura) Stampando fronte e retro ovvero in bianco e in volta si ottengono sedici facciate. 25x35 12,5x17,5 8,75x12,5

Griglie a una colonna

I principali elementi che caratterizzano la pagina. Griglia a colonna singola giustezza della colonna testa altezza della colonna cucitura taglio/esterno PAGINA SINISTRA piede PAGINA DESTRA

Tipografia classica: marginatura Concezione classica dei margini: in cucitura il margine corrisponde alla metà di quello in taglio; in testa una parte in più del margine di cucitura; al piede il doppio di quello di testa. Proporzioni della pagina 2:3.

Il canone di Van de Graaf Ricostruzione storica del metodo probabilmente adottato nei manoscritti medievali (ma anche nella bibbia di Gutenberg) per il progetto del rapporto tra testo e spazio della pagina. 3 È possibile suddividere la pagina solo con l uso di riga e squadra, senza calcoli e strumenti di misura. Il risultato è una pagina con margini 1/9 e 2/9 della dimensione del foglio e un area di stampa delle medesime proporzioni. a b 2 4 6 b

Applicazione del canone di Van de Graaf Il sistema delle due diagonali non è legato a formati particolari: esso può essere applicato a qualsiasi formato e le proporzioni dei margini come dell area di stampa rimangono inalterate: 2:4=3:6

Il canone aureo di costruzione della pagina di Jan Tschicold Jan Tschicold interpreta la proporzione di 2:3 che Raùl Rosarivo descrisse nel Divina proporción tipográfica nel 1947 (la Plata, Argentina). Il canone segreto dei manoscritti medievali e, ancora, nella Bibbia di Gutenberg! Partendo da una pagina di proporzioni 2:3, ne suddivido l altezza e la larghezza in 9 parti. L altezza della gabbia di testo A1 corrisponde alla larghezza della pagina. Le proporzioni dei margini sono 2:3:4:6. Cfr. Jan Tschichold, Golden Canon of page construction, 1953. Laboratorio di Design della comunicazione

I numeri di Fibonacci 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711, 28657... Sono quei numeri che formano una successione in cui ogni numero è la somma dei due che lo precedono nella sequenza. Fibonacci, detto anche Leonardo da Pisa, osservò la serie nel mondo naturale. I numeri di Fibonacci hanno un collegamento diretto con la sezione aurea poiché se si fa il rapporto tra un numero qualunque della serie e il precedente si ottiene un risultato che si avvicina (o in eccesso o in difetto) sempre più a φ, man mano che si procede con i termini situati più avanti nella serie.

I numeri di Fibonacci I pattern di Fibonacci Formazione di quadrati costruita in base alla sequenza di Fibonacci producendo in ogni quadrato un numero di celle interne basato sulla successione.

I numeri di Fibonacci I formati di pagina mostrati sulla griglia si basano su coppie successive di numeri di Fibonacci. A 8x13 elementi B 21x34 elementi C 34x55 elementi 21 21 13 8 13 13 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711, 28657...

I numeri di Fibonacci

Applicazione del metodo delle diagonali Qualsiasi spazio venga scelto, i margini conservano un rapporto 1/2 costante tra cucitura e esterno, testa e piede del foglio. Formato pagina in esempio: A4 (210x297 mm) scalato. B D centro armonico della pagina A C C A D B AA BB = CC DD

La regola dei terzi zona aurea linee di forza linee di forza linee di forza linee di forza punti focali o punti caldi Henri Cartier-Bresson

Centro visivo centro matematico centro visivo Raffaello, Il ritratto di Bindo Altoviti, 1514

Buon senso! Considerare il tipo di contenuto da veicolare FILM FILM FILM FILM

Impaginazione simmetrica Lo spazio ricavato nella pagina di destra con il metodo della diagonale viene riportato simmetricamente nella pagina di sinistra.

Impaginazione simmetrica. Ulteriori esempi Margini esterni e in cucitura uguali. Margini esterni e in cucitura invertiti. Composizione con maggiore tensione. Margini uguali in testa e al piede. Margini uguali in testa e al piede, in cucitura e taglio.

Impaginazione asimmetrica I margini della pagina di sinistra rimangono uguali nella pagina di destra. Diversa distanza dalla cucitura. Rapporto tra pagine non proporzionato.

Impaginazione asimmetrica. Ulteriori esempi

Griglie a più colonne

I principali elementi che caratterizzano la pagina. Griglie a più colonne giustezza della colonna canalette verticali o gutter (distanza tra le colonne canalette orizzontali o linee di flusso altezza della colonna PAGINA SINISTRA PAGINA DESTRA

Griglie a più colonne La suddivisione in colonne consente di distribuire i contenuti in modo funzionale e di rendere più varie le pagine. Distanza tra le colonne pari a 1/3 dei margini. Margini costanti su tutti e quattro i lati, particolarmente utilizzato per libri o riviste di tipo moderno. Ulteriori esempi di suddivisione a 3, 4 o 5 colonne con distanza tra le colonne pari a 1/3 dei margini.

Griglie a più colonne 1/4 dello spazio. La rimanente parte divisa in due 1/5 dello spazio. La rimanente parte divisa in tre Talvolta per gestire differenti tipi di contenuti e quindi enfatizzare livelli di lettura, è opportuno progettare gabbie con colonnne di differente giustezza.

Righe Analogamente si può procedere per suddividere lo spazio verticale. La distanza tra i vari spazi è pari a 1/3 dei margini. A seguire lo spazio verticale è suddiviso in 2, 3, 4, 5, 6 e 7 parti.

Righe In questi tre esempi la parte inferiore dell ingombro è costituita da un quadrato suddiviso poi in due o tre parti. Questa soluzione viene spesso utilizzata per pubblicazioni o cataloghi d arte, per disporre le fotografie o i disegni.

Spazi modulari

Spazi modulari S i v s p n r Sovrapponendo la suddivisione in colonne a quella degli spazi verticali, si ottengono varie soluzioni di GABBIA o GRIGLIA per impaginare testi, immagini, fotografie o disegni, con le relative didascalie

Spazi modulari. Layout d autore Grids, Margins, Columns and Modules 40 For us Graphic Design is organization of information. There are other types of graphic design more concerned with illustration or of a narrative nature. Nothing could be more useful to reach our intention than the Grid. The grid represents the basic structure of our graphic design, it helps to organize the content, it provides consistency, it gives an orderly look and it projects a level of intellectual elegance that we like to express. There are infinite kinds of grids, but just one - the most appropriate - for any problem. Therefore, it becomes important to know which kind of grid is the most appropriate. The basic understanding is that the smaller the module of the grid the least helpful it could be. We could say that an empty page is a page with an infinitesimal small grid. Therefore, it is equivalent to not being there. Conversely a page with a coarse grid is a very restricting grid offering too few alternatives. The secret is to find the proper kind of grid for the job at hand. Sometimes, in designing a grid we want to have the outside margins small enough to provide a certain tension between the edges of the page and the content. After that we divide the page in a certain number of columns according to the content, three, two, four, five, six, etc. Columns provide only one kind of consistency, but we also need to have an horizontal frame of reference to assure certain levels of continuity throughout the publication. Therefore, we will divide the page from top to bottom in a certain number of Modules, four, six, eight, or more, according to size and need. Once we have structured the page, we will begin to structure the information and place it in the grid in such a way that the clarity of the message will be enhanced by the placement of the text on the grid. There are infinite ways of doing this and that is why the grid is a useful tool, rather than a constricting device. However, one should learn to use it so as to retrieve the most advantageous results. 2x4 Grid 3x6 Grid 4x8 Grid 5x4 Grid 6x6 Grid Massimo Vignelli, The Vignelli Canon

Spazi modulari Questo esempio mostra un applicazione di quanto visto finora.i margini sono uno il doppio dell altro. 6 colonne 9 righe che generano moduli quadrati

Spazi modulari. Layout d autore Il Politecnico, 1945, studi e pagina d apertura del primo numero diretto da Elio Vittorini. Layout grafico de Il Politecnico di Albe Steiner.

Applicazione del metodo delle diagonali Qualsiasi spazio venga scelto, i margini conservano un rapporto 1/2 costante tra cucitura e esterno, testa e piede del foglio. Formato pagina in esempio: A4 (210x297 mm) scalato. B D centro armonico della pagina A C C A D B AA BB = CC DD

Spazi modulari. Layout d autore the HERALD The Herald, 1971. Layout grafico del quotidiano scozzese The Herald che utilizza una griglia di 102 (6x17) moduli. Layout di Massimo Vignelli.

Spazi modulari. Layout d autore Josef Müller-Brockmann, Manifesti.

Spazi modulari. Layout d autore ABDIPHARMA Mr. Recepient s name, Recepient s Title Recepient s address City, Province Zip code City, Date, Year Mr. Recepient s name Recepient s Title Recepient s address City, Province Zip code City, Date, Year Dear Mr. Smith, Mr. Recepient s name, Recepient s Title Recepient s address City, Province Zip code City, Date, Year Fax From To Vignelli D. Fernando Siña Company Fax number CorpVida (56-2) 330 4001 Date N. of pages 11 Octubre 2006 1 Subject Presentación Identidad Corporativa Dear Mr. Smith, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lup tatum zzril delenit augue duis scing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Sincerely, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lup tatum zzril delenit augue duis scing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Sincerely, Andrew Smith Director of Communication Address information Telephone +0 00 000 0000 Fax +0 00 000 0000 andrew.smith@company.com Dear Mr. Smith, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lup tatum zzril delenit augue duis scing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Sincerely, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lup tatum zzril delenit augue duis scing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Sincerely, Massimo Vignelli Massimo Vignelli Massimo Vignelli Massimo Vignelli Aziende Agricole Spa Via Filande, 6 Località Pianodardine 83100 Avellino T. +39 0825 626406 F. +39 0825 610733 E. acasa@cantineacasa.it www.cantineacasa.it Kore Şehitleri Caddesi No:00 00000 Zincirlikuyu - Istanbul T. +00 000 000 0000 F. +00 000 000 0000 www.abdiibrahim.com.tr Rosario Norte 660 Las Condes, Santiago Chile Teléfono (56-2) 330 4100 / 330 4000 Fax (56-2) 330 4001 www.corpvida.cl Rosario Norte 660 Las Condes, Santiago Chile Teléfono (56-2) 330 4100 / 330 4000 Fax (56-2) 330 4001 www.corpvida.cl Massimo Vignelli, Esempi di carte intestate, The Vignelli Canon

Spazi modulari. Layout d autore Massimo Vignelli, The Vignelli canon

Griglia delle linee di base Crea le invisibili fondamenta grafiche su cui si costruisce il progetto e fornisce una guida visiva per collocare e allineare gli elementi della pagina con un accuratezza maggiore di quella possibile procedendo semplicemente a occhio.

Griglia delle linee di base Mantenere una relazione

Griglia delle linee di base

Un rapido sguardo al web

Suggerimenti bibliografici Gavin Ambrose, Paul Harris, Il libro del layout, Bologna, Zanichelli, 2009, pp. 232. Ellen Lupton, Caratteri, testo, gabbia. Guida critica alla progettazione grafica, Bologna, Zanichelli, 2010, p. 192. Sergio Polano, Pierpaolo Vetta, Abecedario. La grafica del Novecento, Milano, Electa, 2002, pp. 248. Massimo Vignelli, The Vignelli Canon. http://www.vignelli.com/canon.pdf