ovvero Layout, composizione - pitislab · ovvero Layout, composizione e gabbie — un po’ di...

ovvero Layout, composizione e gabbie — un po’ di regole base

3. INTERMEZZO TIPOGRAFICO:

Anno Accademico 2014/2015 LABORATORIO DI DESIGN DELLA COMUNICAZIONE 2 1/54

IL LAYOUT:

è la disposizione degli elementi graficiin relazione allo spazio che occupano all’internodi un progetto complessivo

Scopo del layout è offrire una presentazione degli elementi grafici e testuali che ne consenta la comprensione con il minor sforzo possibile


IL LAYOUT:

Un buon layout deve permettere all’osservatoredi orientarsi attraverso informazioni, anchecomplesse, su qualsiasi supporto

Il layout affronta gli aspetti pratici ed esteticidel lavoro e delle modalità di visualizzazionedel contenuto, che si tratti di una rivista, di un sitoweb, di un’etichetta ecc.


IL LAYOUT:

Il posizionamento dei vari elementi del layout è regolato da una griglia (gabbia), cioè dauna serie di linee di riferimento che permettonodi collocare gli elementi in modo rapidoe preciso e che assicurano la coerenza visivada pagina a pagina o da elemento ad elemento,in diverse gamme di prodotti


IL LAYOUT:

Un layout regolato da griglie crea un designinteressante e di grande impatto, anche se talvoltal’eccessiva aderenza ad esse può generare l’effettoopposto, producendo risultati opprimenti ed unacattiva visualizzazione delle informazioni

È molto importante che la pagina abbia un aspettobilanciato ed armonioso, il che può indurre, a volte,ad oltrepassare i limiti imposti dalla griglia



Margini

Primo passo per la creazione di una gabbia, rispecchiano già la funzione dell’artefatto.Es. I margini relativi ad un manifestosaranno, generalmente, uguali a prescindere dagli eventuali elementi al vivo. Quelli relativi ad un pieghevole devono tener conto di esigenze tecniche di stampa rispetto ai margini.

internoo cucitura

esterno

testa

piede


Margini uguali

Margini uguali: servono a sfruttare al massimo lo spazio. Poco bianco attorno alla composizione.

x

x

x x x x

x

x


Margini classici: la proporzione aurea

1

2

3

4

5

6

7

8

9

1 2 3 4 5 6

I diversi elementi della pagina sono in proporzione fra di loro: es. il blocco testo è proporzionale alla pagina


Margini

Il bianco del piede è il doppio del bianco in testa e il bianco di taglio è il doppio del bianco di cucitura.

n.b. y= ¾ x

x

y y 2y2y

2x

x

2x


Margini

margini speculari margini ripetuti


Margini

spazio superiore utilizzabile per numeri e testatine

spazio superiore utilizzabile per titoli


Colonne

1 colonna 2 colonne


Colonne

3 colonne 4 colonne 5 colonne


Colonne

Sovrapposizione di una gabbia a 2 colonne con una gabbia a 3 colonne

Sovrapposizione di una gabbia a 3 colonne con una gabbia a 4 colonne


Colonne e righe

Le gabbie sottendono qualsiasi progetto grafico, dal libro al manifesto, dal pieghevole alla pagina pubblicitaria, fino al web.

La scelta di come deve essere suddiviso lo spaziodipende da numerosi fattori: quantità di testi, quantità di immagini ed elementi grafici, peso delle informazioni da porre in rilievo.



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretiumLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in

myriad 6/6univers 55 6/6Century Schoolbook 6/6adobe garamond 6/6

adobe garamond 7/8

adobe garamond 10/12

adobe garamond 20/24

franklin gothic book 7/8


1/3

1/3

1/3

Il formato della pagina riguarda la formae l’orientamento e può dipendere dalle misuredella carta da stampa, dall’esistenza di un progettoprecedente, dalla convenienza (es. spedizionepostale)

La pagina non va considerata come una superficiea sé stante, ma come parte del campo “libroaperto”: quando si osservano due pagineaffiancate in un libro, una rivista, sonoda valutare come un unico campo visivo


COMPORRE UN TESTO: Conoscere alcune regole di base e saperle usare, permette a poco a poco di sapere anche quando e come romperle.

L’obiettivo delle scelte quando si progetta una pagina dipende dalla funziona che essa ha. Si devono considerare il formato della pagina, la gerarchia delle informazioni, l’importanza della leggibilità, il rapporto con le immagini...



Ever since people have been writing things down, they have had to consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were to be read by mainly other people (in official documents or inscriptions), just one other person (in a letter), or only the writer (in a notebook or diary). There would be less room for guesswork if letter shapes were made more formal as the diversity of the readership expanded.

Some of the first messages to be read by a large number of people were rendered not by pens but by chisels. Large inscriptions on monuments in ancient Rome were carefully planned, with letter drawn on the stone with a brush before they were chiseled. Even if white-out had existed in those days, it would not have helped to remove mistakes made in stone. A bit of planning was also more important then, since stonemasons were sometimes more expendable than slabs of marble.

Giustezza della riga: La lunghezza (o giustezza) della riga deve permettere una lettura facile, veloce. Righe molto lunghe rendono ad esempio difficile ritrovare l’acapo successivo.


Ever since people have been writing things down, they have had to consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were to be read by mainly other people (in official documents or inscriptions), just one other person (in a letter), or only the writer (in a notebook or diary). There would be less room for guesswork if letter shapes were made more formal.

Ever since people have been writing things down, they have had to consider their audience before actually putting

pen to paper: letters would have to look different depending on whether they

were to be read by mainly other people (in official documents or inscriptions), just one other person (in a letter), or

only the writer (in a notebook or diary). There would be less room for guesswork if letter shapes were made more formal.

Ever since people have been writing things down, they have had to consider

their audience before actually putting pen to paper: letters would have to look

different depending on whether they were to be read by mainly other people (in official documents or inscriptions),

just one other person (in a letter), or only the writer (in a notebook or diary). There would be less room for guesswork if letter shapes were made more formal.

Allineamento:

bandiera sinistra– no sillabazione!

epigrafe– no sillabazione!

bandiera destra– no sillabazione!

– da usare con moderazione

Scegliere un allineamento significa dare una direzione alla lettura e significa dare un ritmo al testo.

I testi a bandiera sono composizioni dinamiche; il testo a bandiera sinistra può essere usato anche per testi più lunghi e libri. Il testo a epigrafe normalmente è usato per testi brevi, a cui dare più enfasi (attenzione alla giustezza, se troppa, diventa difficile la lettura.)Il testo a bandiera destra invece può essere usato per piccoli testi, magari in copertine o manifesti; difficilmente in testi lunghi.


more formal. Ever since people have been writing things down, they have had to consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were to be read by mainly other people (in official documents or inscriptions), just one other person

more formal. Ever since people have been writing things down, they have had to consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were to be read by mainly other people (in official documents or

Allineamento: Vedove e orfani:Linee isolate create dai paragrafi che iniziano sull’ultima riga della pagina precedente sono dette orfane.Quando un paragrafo termina sulla prima riga di una nuova pagina si ha invece una vedova.

orfani vedove


Ever since people have been writing things down, they have had to consider their audience before actually putting pen to paper: letters would have to look different. Depending on whether they were to be read by mainly other people (in official documents or inscriptions), just one other. Person (in a letter), or only the writer (in a notebook or diary). There would be less room for guesswork if letter shapes....

Allineamento: Vedove e orfani: altri casi da evitare.La riga che non supera il 30% ca della giustezza è da evitare e correggere.


Ever since people have been writing things down, they have had to consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were to be read by mainly other people (in official documents.

Ever since people have been writing things down, they have had to consider their au-dience before actually putting pen to pa-per: letters would have to look different depending on whether they were to be read by mainly other people (in official documents or inscriptions), just one oth-er person (in a letter), or only the writer (in a notebook or diary). There would be less room for guesswork if letter shapes were made more formal.

Ever since people have been writing things down, they have had to consider their au-dience before actually putting pen to pa-per: letters would have to look different depending on whether they were to be read by mainly other people (in official documents or inscriptions), just one oth-er person (in a letter), or only the writer (in a notebook or diary). There would be less room for guesswork if letter shapes

were made more formal.

Ever since people have been writing things down, they have had to consid-er their audience before actually putting pen to paper: letters would have to look different depending on whether they were to be read by mainly other people (in official documents or inscriptions), just one other person (in a letter), or only the writer (in a notebook or diary). There would be less room for guesswork if letter shapes were made more formal.

giustificazione sinistra– sillabazione!

giustificazione centrata– sillabazione!

giustificazione piena– sillabazione!

Allineamento: Scegliere un allineamento significa dare una direzione alla lettura e significa dare un ritmo al testo.

I testi giustificati sono per lo più utilizzati nella composizione di testi lunghi.Sono percepiti come blocchi di testo, molto statici.Crimine tipografico: usare un testo giustificato senza sillabazione porta alla creazione di buchi fra le parole, o al contrario di una riduzione dello spazio.


Interlinea: Lo spazio fra le righe può aiutare la lettura o renderla più difficoltosa.

Ever since people have been writing things down, they have had to consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were to be read by mainly other people (in official documents or inscriptions), just one other person (in a letter), or only the writer

Ever since people have been writing things down, they have had to consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were to be read by mainly other people (in official documents or inscriptions), just one other person (in a

Ever since people have been

writing things down, they

have had to consider their

audience before actually

putting pen to paper: letters

would have to look different

depending on whether they

were to be read by mainly

Adobe Garamond 20/20– interlinea negativa (è sterlineato)

Adobe Garamond 20/23– interlinea positiva (interlinee che sono di 2/3 pt più grandi del corpo del carattere sono corrette per corpi dai 8-10pt. Con dimensioni maggiori si deve aumentare proporzionalmente. )

Adobe Garamond 20/30– interlinea positiva (Un’interlinea esagerata scompone il testo in righe, si perde cioè la percezione del blocco di testo.)


Ever since people have been writing things down, they have had to consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were.

To be read by mainly other people (in official documents or inscriptions), just one other person (in a letter), only the writer (in a notebo diary).

There would be less room for guesswork if letter shapes were made more formal as the diversity of the readership expanded.

Ever since people have been writing things down, they have had to consider their audience before actually putting pen to paper: letters would have to look different depending on whether were.



Rientri: Per facilitare la lettura e dare ritmo ad un blocco di testo si usano i rientri. L’inizio del paragrafo sporge in dentro o in fuori rispetto alla giustezza.attenzione: normalmente non si usa nei testi a bandiera. Il primo paragrafo di un blocco non deve avere il rientro.

prim

o pa

ragr

afo

rien

tro

posi

tivo

rien

tro

nega

tivo

prim

o pa

ragr

afo


Capolettera: Elemento della tradizione tipografica, la prima lettera di un paragrafo può essere evidenziata e “decorata”.attenzione: la lettera può richiedere un po’ di spazio in più per evitare contatti indesiderati con il testo.

Ever since people have been writing things down, they have had to

consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were.



E ver since people have been writing things down, they have had to

consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were.

ver since people have been writing things down, they have had to consider their audience

before actually putting pen to paper: letters would have to look different depending on whether they were.

E


E ver since people have been writing things down, they

have had to consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were.



E ver since people have been writing things down, they

have had to consider their audience before actually putting pen to paper: letters would have to look different depending on whether they were.



Capolettera: In alcuni casi anche la prima parola o frase può avere un trattamento speciale.

LASCIATE PERDERE QUALUNQUE REGOLA DI SILLABAZIONE E COMPOSIZIONE E IMPAGINAZIONE CHE NON GIOVI ALLE NECESSITÀ DEL TESTO!

—robert bringhurst


ACCOSTARE I CARATTERI



Gerarchia: La prima regola da tenere a mente è che comporre un testo significa dare una gerarchia alle informazioni. Questo rende di più facile lettura un testo.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.

TITOLO

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

titoletto

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.


Gerarchia: Dentro un testo, corsivi, grassetti, sottolineati danno diverse gradazioni di importanza.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus “et magnis dis parturient montes”, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. inizio paragrafo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

ACCOSTARE FONT DIVERSE: Molti i metodi. Per storia del carattere, per dimensione dell’occhio, per ottenere effetti diversi. Importante è assegnare un preciso ruolo ai caratteri.



Mescoliamo graziati con lineari


Assegniamo un ruolo diverso ai caratteri


Creiamo colori tipografici differenti (attraverso l’uso dei diversi stili)


Evitiamo font con caratteristiche troppo simili


Non esageriamo con la quantità di font in un documento. Spesso due/tre, nelle loro varianti, sono sufficienti


Hoefler & Frere-Jones Mix di caratteri dal diverso mood


Hoefler & Frere-Jones Mix di caratteri dello stesso periodo storico ma con diverse peculiarità


Hoefler & Frere-Jones Mix di caratteri con simili qualità ma diversa struttura geometrica


Hoefler & Frere-Jones Mix di caratteri con proporzioni simili e ruoli diversi


Layout

http://explorationsintypography.com/

Accostare i caratteri

http://www.typeconnection.com

http://www.typewolf.com/

http://bonfx.com/29-principles-for-making-great-font-combinations/

ESERCITAZIONE: Impaginiamo il bugiardino di un medicinale.


Fine

3. INTERMEZZO TIPOGRAFICO


ovvero Layout, composizione - pitislab · ovvero Layout, composizione e gabbie — un po’ di...

Documents

Transcript of ovvero Layout, composizione - pitislab · ovvero Layout, composizione e gabbie — un po’ di...