Sei sulla pagina 1di 84

#CVeDI

Iride:
il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce
Letizia Bollini, Università di Milano-Bicocca
Teoria & pratica
Le teorie del colore
> Fisico-matematiche > Simbolico-artistiche
Newton (1666) Goethe (1810)

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 3 64
Sintesi
Sintesi sottrattiva
O quadricromia (CMYB): sottrae luce a luce, sommando pigmento.
Si usa per i progetti a stampa

I colori primari sono:

> Cyan
> Magenta
> Yellow
> Black

Primari=100% > Nero


Primari=0% > Bianco

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 6 64
Sintesi addittiva
O tricromia (RGB): aggiunge luce a luce.
Si usa per i progetti a monitor

I colori primari sono:

> Red
> Green
> Blue

Primari=100% > Bianco


Primari=0% > Nero

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 7 64
(Itten) Color wheel Colori
Primari

Colori
Secondari

Colori
Terziari

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 8 64
Anatomia del colore
Tonalità (Hue)
È la caratteristica specifica di un colore
e corrisponde a una diversa lunghezza d’onda della luce

> Sinonimi: Colore, tonalità, Tinta, Croma, Cromaticità


#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 10 64
Saturazione (Saturation)
Corrisponde alla sua intensità o purezza: minore è l’intensità,
più il colore tende al grigio.

100% 80% 60% 40% 20% 0%

> Sinonimi: Purezza, Pienezza, Intensità (Intensity)


#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 11 64
Luminosità (Tint)
Quantità di luce che il colore sembra emettere apparendo
più chiaro se mixato col bianco.

> Sinonimi: Valore, Chiarezza, Brillanza

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 12 64
Ombra (Shade)
Quantità di luce che il colore sembra emettere apparendo
più scuro se mixato col nero.

> Sinonimi: Valore, Chiarezza, Brillanza

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 13 64
Tone
Nel caso in cui il colore venga mescolato col grigio
o con un colore complementare

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 14 64
Matrice della Tonalità
Saturazione

Luminosità
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 15 64
La semiotica del colore
Valori e significati
> Dimensione fisica/fisiologico-percettiva

> Valore simbolico e semantico di/nel contesto

> Dimensione semiotica e culturale (variabile)

> Valore progettuale di identità e connotazione

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 17 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 18 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 19 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 20 64
Analisi
> Incontri di brief tecnico, strategico, di business/marketing, di
branding con il cliente e raccolta materiali

> Analisi delle strategie di web marketing e obiettivi di progetto

> Analisi della concorrenza o benchmarking


> Analisi del target e dell’utenza

> Analisi delle piattafome tecnologiche

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 21 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 22 64
Il linguaggio del colore
Il colore come codice

Risposta Significato
emotiva funzionale

#CVeDI
{ Random vs. Pattern
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 24 64
Rosso

Valori positivi Valori Negativi Note

• passione • sangue È uno dei colori


• energia • guerra “salienti” ovvero
• amore • pericolo che sembrano
• forza • aggressività avvicinarsi
• azione all’osservatore.

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 25 64
Verde

Valori positivi Valori Negativi Note

• natura • inesperienza
• primavera • invidia
• fertilità
• tenacia
• prontezza

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 26 64
Giallo

Valori positivi Valori Negativi Note

• calore • malattia Visibile anche


• oro • vigliaccheria in situazioni limite
• ottimismo • azzardo e di contrasto
• disponibilità • invidia
• altruismo

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 27 64
Blu

Valori positivi Valori Negativi Note

• stabilità • depressione
• calma • conservatorismo
• soddisfazione
• armonia
• fedeltà

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 28 64
Bianco

Valori positivi Valori Negativi Note

• purezza • freddo
• innocenza • osperdaliero
• pace • sconosciuto
• positività • immateriale
• spiritualità

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 29 64
Grigio

Valori positivi Valori Negativi Note

• intelligenza • ombra Percepito come


• dignità • noia “neutro”
• maturità • depressione

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 30 64
Nero

Valori positivi Valori Negativi Note

• potenza • cattiveria
• formalità • timore
• profondità • morte
• stile • anonimato
• negatività

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 31 64
Viola

Valori positivi Valori Negativi Note

• metamorfos • nostalgia
• transizione • immaturità
• mistero • suggestione
• magia • lutto
• penitenza

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 32 64
Arancione

Valori positivi Valori Negativi Note

• esuberanza • inganno
• divertimento • diffidenza
• vitalità • aggressione
• infanzia • allerta

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 33 64
Rosa

Valori positivi Valori Negativi Note

• delicatezza • aggressività Legato agli


• comodità inibente stereotipi di genere
• morbidezza • sdolcinatezza

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 34 64
Marrone

Valori positivi Valori Negativi Note

• stabilità • sporco
• durata • vecchio
• natura

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 35 64
Progettare (con) il colore
Schemi cromatici
> Monocromatico

> Analogico

> Complementare

> Triadico

> Quadratico o doppio complementare

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 37 64
Schema monocromatico
Un solo colore variando SHADE e TINT

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 38 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 39 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 40 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 41 64
Schema analogico
Uso di colori contigui sulla ruota dei colori:
armonioso ed equilibrato

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 42 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 43 64
Schema complementare
Uso di colori opposti sulla ruota dei colori:
vibranti, vivaci e dinamici, contrasto

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 44 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 45 64
Schema triadico
Uso di colori posizionati sui vertici di un triangolo:
complesso, sofisticato

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 46 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 48 64
Schema quadratico
I colori sono disposti sui vertici di un quadrato o rettangolo:
complesso, sofisticato... o una pagliacciata!

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 49 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 50 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 51 64
I link
> LINK
colore come elemento di enfasi e visibilità

> ACTIVE LINK / HOVER


colore come elemento di evidenza e feed-back d’interazione

> VISITED LINK


colore come elemento di (in)visibilità

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 57 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 58 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 59 64
Feed-back

#CVeDI
60 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 61 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 62 64
Leggibilità e contrasto
Primo piano e sfondo

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 53 64
#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 54 64
Daltonismo e accessibilità

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 55 64
Analisi
> Incontri di brief tecnico, strategico, di business/marketing, di
branding con il cliente e raccolta materiali

> Analisi delle strategie di web marketing e obiettivi di progetto

> Analisi della concorrenza o benchmarking


> Analisi del target e dell’utenza

> Analisi delle piattafome tecnologiche

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 56 64
Per approfondire
[1] Albers J., Interazione del colore. Esercizi per imparare a vedere. Il Saggia-
tore Tascabili; 2009

[2] Brusatin M. Storia dei colori. Einaudi; 1999

[3] Garau A. Le armonie del colore: analisi strutturale dei colori. Hopeli Edi-
tore; 1999

[4] Pring R. www.colour. Uso efficace del colore per la progettazione di pagi-
ne web. Apogeo Editore; 2001:192.

[5] Romanello I. Il colore: espressione e funzione : guida ai significati Hopeli


Editore; 2002

#CVeDI
Iride: il linguaggio del colore
Comunicazione Visiva e Design delle Interfacce . Letizia Bollini, Università di Milano-Bicocca 63 64
?