Sommario - Città di Torino · colori primari Rosso, Giallo, Blu. Mescolati opportunamente, essi...

1

[email protected] – www.pinocappellano.it1

v.1


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


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


v.1

Le basi della progettazione multimediale

3


v.1


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à


v.1


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


v.1


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


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


v.1

Gli elementi del layout


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


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à


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


v.1

Elementi grafici



v.1


8


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à.



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


9


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


Diagramma CIE e gamut RGB e CMYK


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


10


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.



Possiamo distinguere:

Colori armonici

Colori complementari

Colori contrastanti

Colori caldi e colori freddi


v.1



Colori armonici

11


v.1



Colori contrastanti


v.1



Colori contrastanti

12


v.1



Colori freddi


v.1



Colori caldi

13


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


http://it.wikipedia.org/wiki/Lista_dei_colori


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


Esempi di set di colori

14


v.1



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)


Oldstyle

Modern

Sans serif

ScriptDECORATIVE

…

15


v.1



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


v.1

Utilizzare non più di 2 font (eccezionalmente 3)



esempio errato

16


v.1

Utilizzare non più di 2 font (eccezionalmente 3)



esempio corretto


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


Titoli:

GRAFICA GraficaCrea un pattern riconoscibile intorno al testo

17


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



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


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


v.1



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


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.


Colori non armonici

Colori armonici


v.1

Molti software di editing testuale permettono di posizionare l’immagine in relazione al testo


Word

20


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)



v.1

Le immagini possono prendere posto dietro il testo ma, per garantire la leggibilità, devono essere opportunamente elaborate.


Esempio di scarsa leggibilità

21


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.


Esempio di buona leggibilità


v.1

Il layout grafico

22


v.1

La composizioneIl layout grafico

I principi base di una buona composizione grafica sono:

la prossimità

il contrasto

la ripetizione (consistenza)

l’allineamento


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


v.1


Il layout grafico

prima


v.1


Il layout grafico

dopo

24


v.1


Il layout grafico

prima


v.1


Il layout grafico

dopo

25


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.


v.1


Il layout grafico

primadopo

26


v.1


Il layout grafico

primadopo


v.1


Il layout grafico

prima

27


v.1


Il layout grafico

dopo


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


v.1


Il layout grafico

dopo

prima


v.1


Il layout grafico

prima

29


v.1


Il layout grafico

dopo


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


v.1


Il layout grafico

prima


v.1


Il layout grafico

dopo

31


v.1


Il layout grafico

prima


v.1


Il layout grafico

dopo

32


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/

Sommario - Città di Torino · colori primari Rosso, Giallo, Blu. Mescolati opportunamente, essi...

Documents

Transcript of Sommario - Città di Torino · colori primari Rosso, Giallo, Blu. Mescolati opportunamente, essi...