1
[email protected] – www.pinocappellano.it1
v.1
[email protected] – www.pinocappellano.it2
v.1
Le regole della comunicazione
La progettazione
Gli elementi del layout Whitespace
Elementi grafici
Il colore
Il testo
La composizione
Bibliografia e sitografia
SommarioLa grafica
2
[email protected] – www.pinocappellano.it3
v.1
è impossibile non comunicare
mettersi nei panni del destinatario del messaggio
rendere coerente la presentazione con i contenuti
rendere leggibile la presentazione
fare “attenzione” ai centri di attrazione
Le regole della comunicazioneI principi base
[email protected] – www.pinocappellano.it4
v.1
Le basi della progettazione multimediale
3
[email protected] – www.pinocappellano.it5
v.1
Le basi della progettazione multimediale
Il processo di creazione di un prodotto editoriale multimediale
può prevedere diverse figure, professionalità e competenze:
Il committente
Il produttore
Il progettista multimediale
L’esperto dei contenuti
Il grafico
L’informatico
L’implementatore
Soggetti e professionalità
[email protected] – www.pinocappellano.it6
v.1
Le basi della progettazione multimediale
Il grafico
È colui che idea la parte visual del progetto.
Ha conoscenze umanistiche e matura un proprio stile personale.
Deve possedere:
conoscenze storico-artistiche
competenze di design
gusto estetico
competenze sull’uso di software
Elabora il layout
Suggerisce soluzioni estetiche a problematiche tecniche
Soggetti e professionalità
4
[email protected] – www.pinocappellano.it7
v.1
Le basi della progettazione multimediale
Pre-produzione studio del caso
analisi dell’esistente (benchmarking)
progetto (brief, flowchart, sketches e storyboard)
Produzione produzione ed elaborazione di testi,
grafica 2D e 3D, video, audio, musica
Implementazione
Post-produzione credits
help
fase di test
Fasi della produzione
[email protected] – www.pinocappellano.it8
v.1
4 domande fondamentaliLe basi della progettazione multimediale
a chi si comunica?Target di riferimento
che cosa si comunica?Categoria (consultazione, didattici, arte e cultura,
informazione, game, edutainment, ecc.) e contenuti
generali (qual è l’accento della comunicazione?)
come si comunica?Linguaggio, tono e scelta dei media
quale strumento e perché?È davvero la scelta giusta? Quali sono le peculiarità?
5
[email protected] – www.pinocappellano.it9
v.1
Gli elementi del layout
[email protected] – www.pinocappellano.it10
v.1
Gli elementi del layoutWhitespace
Il whitespace è lo spazio vuoto tra gli elementi di un layout grafico.Oltre a dare “respiro” ed equilibrio alla composizione, permettono anche un “viaggio” del lettore all’interno del layout stesso.
Whitespace in una fotografia
6
[email protected] – www.pinocappellano.it11
v.1
Gli elementi del layoutWhitespace
Un esempio di utilizzo è offerto dal confronto di due immagini pubblicitarie:
quella a destra si riferisce ad un prodotto di basso costo; quella di sinistra ad un prodotto di lusso.
Whitespace in una pubblicità
[email protected] – www.pinocappellano.it12
v.1
Elementi graficiGli elementi del layout
Linee, poligoni, cerchi, frecce, segni ed elementi grafici possono contribuire a:
definire gli spazi
distinguere elementi e contenuti
rendere equilibrato il layout attraverso compensazioni e riempimenti
identificare un brand o un’idea comunicativa
7
[email protected] – www.pinocappellano.it13
v.1
Elementi grafici
Gli elementi del layout
[email protected] – www.pinocappellano.it14
v.1
Gli elementi del layout
8
[email protected] – www.pinocappellano.it15
v.1
Il colore - fisica
Il colore è la percezione visiva generata dai segnali nervosi che i fotorecettori della retina mandano al cervello quando assorbono radiazioni elettromagnetiche di determinate lunghezze d'onda e intensità.
Gli elementi del layout
[email protected] – www.pinocappellano.it16
v.1
Nel 1931 la CommissionInternationale de l'Eclairage (CIE) ha definito uno spazio di colore che comprende tutte le tinte visibilidall'occhio umano, a prescindere dalla luminanza.
Lo spazio colore del CIE:
non viene molto usato a causadella sua complessità.
è preso come riferimento per tuttigli altri spazi di colore.
Il colore - CIE
Gli elementi del layout
9
[email protected] – www.pinocappellano.it17
v.1
E’ necessario distinguere, accanto allo spettro del visibile, altri sistemi di “rappresentazione”del colore, chiamati modelli colore:
RGB (Red, Green, Blu)
CMY (Cyan, Magenta, Yellow)
CMYK (Cyan, Magenta, Yellow, blacK)
HSB : Hue, Saturation, Brightness
HSI: Hue, Saturation, Intensity
HSV: Hue, Saturation, Value Exagon
LAB: L = luminosità - A e B cromaticità(colori opponenti)
YUV, YIQ, YCbCr : (televisivi)
Sui modelli colore si basano gli spazi colorecreati appositamente per specifici software come Adobe Photoshop, CorelDraw, QuarkXpress e altri.
Il colore – modelli colore
Gli elementi del layout
Diagramma CIE e gamut RGB e CMYK
[email protected] – www.pinocappellano.it18
v.1
In ambito grafico-artistico si considerano i colori primariRosso, Giallo, Blu.
Mescolati opportunamente, essi consentono di ottenere i colori secondariArancione, Verde e Viola(che, insieme all’Indaco, costituiscono i colori dell’arcobaleno) e i colori terziari.
Il colore – ruota cromatica
Gli elementi del layout
10
[email protected] – www.pinocappellano.it19
v.1
Attraverso l’utilizzo della ruota cromatica è possibile, grazie solo al rapporto che intercorre tra i vari colori, scegliere un appropriato accostamento degli stessi in una composizione cromatica che non sia casuale.
Il colore – ruota cromatica
Gli elementi del layout
Possiamo distinguere:
Colori armonici
Colori complementari
Colori contrastanti
Colori caldi e colori freddi
[email protected] – www.pinocappellano.it20
v.1
Il colore – ruota cromatica
Gli elementi del layout
Colori armonici
11
[email protected] – www.pinocappellano.it21
v.1
Il colore – ruota cromatica
Gli elementi del layout
Colori contrastanti
[email protected] – www.pinocappellano.it22
v.1
Il colore – ruota cromatica
Gli elementi del layout
Colori contrastanti
12
[email protected] – www.pinocappellano.it23
v.1
Il colore – ruota cromatica
Gli elementi del layout
Colori freddi
[email protected] – www.pinocappellano.it24
v.1
Il colore – ruota cromatica
Gli elementi del layout
Colori caldi
13
[email protected] – www.pinocappellano.it25
v.1
Per rappresentare i colori nell’editoria digitale rivolta al Web, si utilizza - per ogni valore di R, G e B - la notazione:
numerica (da 0 a 255)
alfanumerica (da #000000 a #ffffff )
Il numero di colori rappresentabili a videoè maggiore di 16 milioni.
Il colore – rappresentazione digitale
Gli elementi del layout
http://it.wikipedia.org/wiki/Lista_dei_colori
[email protected] – www.pinocappellano.it26
v.1
Per ogni progetto editoriale si dovrebbe applicare una determinata tavolozza di colori(color harmony) creata appositamente in funzione del messaggio e degli obiettivi di comunicazione prefissi.
Esistono dei siti dove è possibile creare e condividere set di colori:
http://kuler.adobe.com/
http://www.colourlovers.com/
Il colore – scale cromatiche
Gli elementi del layout
Esempi di set di colori
14
[email protected] – www.pinocappellano.it27
v.1
Gli elementi del layout
[email protected] – www.pinocappellano.it28
v.1
Vi sono diversi tipi di caratteri:
Times, Garamond, Goudy, Palatino, Baskerville
Bodoni, Onyx,
Arial, Franklin Gothic, Verdana, TahomaBradley Hand, Brush Script , Lucida Handwriting
ALGERIAN, Chiller, Hobo, Matura, Rosewood
Il testo – i caratteri (font)
Gli elementi del layout
Oldstyle
Modern
Sans serif
ScriptDECORATIVE
…
15
[email protected] – www.pinocappellano.it29
v.1
Il testo – i caratteri (font)
Gli elementi del layout
Utilizzo generico dei tipi di font:
“con grazie” o “serif”
carta stampata: testo
video (siti web, documenti pdf, ecc.): titoli e righe isolate
“senza grazie” o “sans serif” o “bastoni”carta stampata: non proprio opportuno per testo
video (siti web, documenti pdf, ecc.): testo
“script” e “decorativi”carta stampata: titoli e righe isolate
video: titoli e righe isolate
[email protected] – www.pinocappellano.it30
v.1
Utilizzare non più di 2 font (eccezionalmente 3)
Il testo – i caratteri (font)
Gli elementi del layout
esempio errato
16
[email protected] – www.pinocappellano.it31
v.1
Utilizzare non più di 2 font (eccezionalmente 3)
Il testo – i caratteri (font)
Gli elementi del layout
esempio corretto
[email protected] – www.pinocappellano.it32
v.1
TESTO IN MAIUSCOLO
DIFFICILE LETTURA: NON INDICATO PER PERIODI LUNGHI DI TESTOCOME QUESTO. NELLE CHAT E NEI FORUM EQUIVALE A GRIDARE.
Testo in minuscolo
Facile lettura: indicato per periodi lunghi di testo
Il testo – minuscolo e maiuscolo
Gli elementi del layout
Titoli:
GRAFICA GraficaCrea un pattern riconoscibile intorno al testo
17
[email protected] – www.pinocappellano.it33
v.1
CorsivoNon è opportuno usarlo con caratteri molto piccoli
Non è opportuno usarlo con caratteri molto piccoli
GrassettoUsato opportunamente e non eccessivamentecontribuisce ad enfatizzare e armonizzare il testo
SottolineatoNelle pagine Web può generare ambiguità (link o non link?)
Il testo - stile
Gli elementi del layout
[email protected] – www.pinocappellano.it34
v.1
Per una maggiore leggibilità:
Suddividere il testo in paragrafi distanziati con una doppia interlinea.
Utilizzare l’allineamento a sinistra
Il testo – il paragrafo
Gli elementi del layout
Il Grafico di redazione è la figura professionale che, in un quotidiano o un periodico, progetta e realizza la grafica delle pagine redazionali, pubblicitarie e di servizio. L'attività principale del Grafico di redazione è la progettazione del menabò, cioè della gabbia grafica ottimale per la redazione. Il Grafico riceve dal Redattore o dal Capo servizio le direttive di carattere generale per la costruzione delle pagine con indicazioni sull'importanza che le diverse notizie devono avere. Il Grafico di redazione sceglie le fotografie e i grafici da inserire nel servizio, anche su indicazione dell'Art director. Collabora anche alla definizione del progetto grafico, che viene modificato di solito ogni 3-5 anni, come scelta aziendale. Il Grafico di redazione ètenuto a controllare il rispetto delle regole definite nel progetto grafico.
Il Grafico di redazione è la figura professionale che, in un quotidiano o un periodico, progetta e realizza la grafica delle pagine redazionali, pubblicitarie e di servizio.
L'attività principale del Grafico di redazione è la progettazione del menabò, cioè della gabbia grafica ottimale per la redazione.
Il Grafico riceve dal Redattore o dal Capo servizio le direttive di carattere generale per la costruzione delle pagine con indicazioni sull'importanza che le diverse notizie devono avere.
Il Grafico di redazione sceglie le fotografie e i grafici da inserire nel servizio, anche su indicazione dell'Art director.
Collabora anche alla definizione del progetto grafico, che viene modificato di solito ogni 3-5 anni, come scelta aziendale.
Il Grafico di redazione è tenuto a controllare il rispetto delle regole definite nel progetto grafico.
esempio corretto
esempio errato
18
[email protected] – www.pinocappellano.it35
v.1
Gli elementi del layout
[email protected] – www.pinocappellano.it36
v.1
Le immagini fotografiche devono avere un taglio che permetta di porre l’accento sugli elementi del messaggio.
Le immagini e la fotografiaGli elementi del layout
photo by http://desktoppub.about.com/od/cropping/ig/Cropping/
19
[email protected] – www.pinocappellano.it37
v.1
Per ottenere una maggiore armonia cromatica, attribuire ai colori che circondano l’immagine tonalità “simili” a quelli, dominanti e/o “importanti”, presenti nella fotografia.
Le immagini e la fotografiaGli elementi del layout
Colori non armonici
Colori armonici
[email protected] – www.pinocappellano.it38
v.1
Molti software di editing testuale permettono di posizionare l’immagine in relazione al testo
Le immagini e la fotografiaGli elementi del layout
Word
20
[email protected] – www.pinocappellano.it39
v.1
Per inserire immagini in posizione “ravvicinata” si devono utilizzare formati che supportano la trasparenza: GIF, PNG (in Word il formato WMF delle clipart)
Le immagini e la fotografiaGli elementi del layout
[email protected] – www.pinocappellano.it40
v.1
Le immagini possono prendere posto dietro il testo ma, per garantire la leggibilità, devono essere opportunamente elaborate.
Le immagini e la fotografiaGli elementi del layout
Esempio di scarsa leggibilità
21
[email protected] – www.pinocappellano.it41
v.1
In genere un buon risultato si ottiene sottoponendo l’immagine dello sfondo alla seguente elaborazione:
Luminosità + 15%
Contrasto - 85%
Ulteriori elaborazioni dipendono dalla qualità e dal tipo di immagine.
Le immagini e la fotografiaGli elementi del layout
Esempio di buona leggibilità
[email protected] – www.pinocappellano.it42
v.1
Il layout grafico
22
[email protected] – www.pinocappellano.it43
v.1
La composizioneIl layout grafico
I principi base di una buona composizione grafica sono:
la prossimità
il contrasto
la ripetizione (consistenza)
l’allineamento
[email protected] – www.pinocappellano.it44
v.1
La composizione – Prossimità
Il layout grafico
Elementi e contenuti che hanno una relazione tra di essi dovrebbero essere raggruppati.
Quando alcuni oggetti sono in prossimità l’uno all’altro, diventano un’unica unità visiva piuttosto che diverse unitàdistinte.
Questo aiuta a organizzare le informazioni, riduce l'ingombro, ed offre al lettore una chiara struttura.
23
[email protected] – www.pinocappellano.it45
v.1
La composizione – Prossimità
Il layout grafico
prima
[email protected] – www.pinocappellano.it46
v.1
La composizione – Prossimità
Il layout grafico
dopo
24
[email protected] – www.pinocappellano.it47
v.1
La composizione – Prossimità
Il layout grafico
prima
[email protected] – www.pinocappellano.it48
v.1
La composizione – Prossimità
Il layout grafico
dopo
25
[email protected] – www.pinocappellano.it49
v.1
La composizione – Allineamento
Il layout grafico
Niente deve essere inserito nel layout in modo arbitrario.
Ogni elemento dovrebbe avere qualche collegamento visivo con un altro elemento della pagina.
In questo modo si crea un look pulito, raffinato e fresco.
[email protected] – www.pinocappellano.it50
v.1
La composizione – Allineamento
Il layout grafico
primadopo
26
[email protected] – www.pinocappellano.it51
v.1
La composizione – Allineamento
Il layout grafico
primadopo
[email protected] – www.pinocappellano.it52
v.1
La composizione – Allineamento
Il layout grafico
prima
27
[email protected] – www.pinocappellano.it53
v.1
La composizione – Allineamento
Il layout grafico
dopo
[email protected] – www.pinocappellano.it54
v.1
La composizione – Ripetizione
Il layout grafico
Ripetere elementi visivi del modello.
È possibile replicare colori, forme, texture, relazioni spaziali, spessori di linea, caratteri, le dimensioni, i concetti grafici, ecc.
Tale organizzazione sviluppa e rafforza l'unità.
28
[email protected] – www.pinocappellano.it55
v.1
La composizione – Ripetizione
Il layout grafico
dopo
prima
[email protected] – www.pinocappellano.it56
v.1
La composizione – Ripetizione
Il layout grafico
prima
29
[email protected] – www.pinocappellano.it57
v.1
La composizione – Ripetizione
Il layout grafico
dopo
[email protected] – www.pinocappellano.it58
v.1
La composizione - Contrasto
Il layout grafico
Il contrasto è spesso la più importante attrazione visiva di una pagina (web, di carta, ecc.).
L'idea che sta dietro il contrasto è quello di evitare che gli elementi sulla pagina siano soltanto simili.
Se gli elementi (tipo, colore, dimensioni, spessore linea, forma, spazio, ecc) non sono identici, è bene renderli molto diversi.
30
[email protected] – www.pinocappellano.it59
v.1
La composizione - Contrasto
Il layout grafico
prima
[email protected] – www.pinocappellano.it60
v.1
La composizione - Contrasto
Il layout grafico
dopo
31
[email protected] – www.pinocappellano.it61
v.1
La composizione - Contrasto
Il layout grafico
prima
[email protected] – www.pinocappellano.it62
v.1
La composizione - Contrasto
Il layout grafico
dopo
32
[email protected] – www.pinocappellano.it63
v.1
Bibliografia - SitografiaLa grafica
Robin Williams, The Non Designers Design Book, 2Nd Ed, 2004
De Felice S., De Felice P.E., Il linguaggio grafico, Falzea, Reggio Calabria, 2003
Fioravanti G., Il dizionario del grafico, Zanichelli, Bologna, 1993
Parra G., Disegno automatico, grafica elettronica, CLUA, Ancona, 1995
Moretti D., Il progetto grafico del libro, Editrice Bibliografica, Milano, 1994
Fioravanti G., Il nuovo manuale del grafico. Guida alla progettazione grafica del prodotto editoriale, Zanichelli, Bologna, 2002
Melli P., L' elaborazione digitale delle immagini : metodi, tecnologie e applicazioni , FrancoAngeli,Milano, 1991
Nidasio F., Villa M., Elementi di Tecnologia grafica: carta, caratteri, composizione, immagini, fotolito,prestampa, stampa, legatoria, cartotecnica, impaginazione, metodologia , Arti Poligrafiche europee,Milano, 2000
John T. Drew, Sarah A. Meyer, Colour Management - A comprehensive Guide for GraphicDesigners, Rotovision, Mies, 2005
Bob Gordon, Maggie Gordon (Consultant Editors), The Complete Guide to Digital Graphic Design,Thames & Hudson, Lewes, 2005
www.boscarol.com
www.html.it
www.scattodesign.com/blog/
www.draft.it/