Top Banner
Basic Design: il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale Letizia Bollini, Università di Milano-Bicocca #CVeMM
49

Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Feb 17, 2019

Download

Documents

lamhanh
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design:il linguaggio della comunicazione visivaComunicazione Visiva e Multimodale 14 . Comunicazione digitaleLetizia Bollini, Università di Milano-Bicocca

#CVeMM

Page 2: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Il linguaggio visivo

Page 3: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

3 47

> Prossimità

> Allineamento

> Ripetizione

> Contrasto

> Tipografia

> Immagini

> Relazioni

> Contesto

> Interazione

Basic Design> Forma

> Colore

> Tratto e texture

> Dimensione

> Spazio

Page 4: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

La “grammatica”

Page 5: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

5 47

> Prossimità

> Allineamento

> Ripetizione

> Contrasto

> Tipografia

> Immagini

> Relazioni

> Contesto

> Interazione

Basic Design> Forma

> Colore

> Tratto e texture

> Dimensione

> Spazio

Page 6: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

6 47

La forma

Forme geometriche

Page 7: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

7 47

Forme astratteImpressionistiche e/o espressionistiche

La forma

Page 8: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

8 47

La forma

Forme naturali

Page 9: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

9 47

Armando TestaPunt e Mes, 1960

A G FronzoniBanca Popolare dell’Emilia Romagna brand

Page 10: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

10 47

Il colore

> Fisico

> Percettivo

> Linguistico

> Semiotico

> Culturale

Page 11: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

11 47

Il colore

Page 12: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

12 47

Il colore

Page 13: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

13 47

Il colore

Lorem ipsum

Lorem ipsum

Page 14: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

14 47

Vladimir ChaikaIkko Tanaka 1930-2002

Page 15: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

15 47

Tratto e texture

Page 16: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

16 47

AntiprimadonnaTomàs Maldonado

Page 17: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

17 47

Dimensione

Page 18: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

18 47

Dimensione

Page 19: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

19 47

Spazio

Lo spazio negativoLooking room

Page 20: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

20 47

Spazio

Orientamento nello spazioDirezione di lettura

Page 21: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

21 47

SpazioLo spazio negativoRapporto figura sfondo

Shigeo Fukuda, 1975

Page 22: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

La “sintassi”

Page 23: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

23 47

Basic Design> Forma

> Colore

> Tratto e texture

> Dimensione

> Spazio

> Prossimità

> Allineamento

> Ripetizione

> Contrasto

> Tipografia

> Immagini

> Relazione

> Contesto

Page 24: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

24 47

Prossimità> Unitarietà di elementi separati

> Raggruppamento e relazione

> Progressione logica

> Organizzare

Page 25: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

25 47

Dott. Mario Rossi

Edizioni Perditemo srl

Via Giuseppe Mazzini 7 20123 Milano

348 45670029

Dott. Mario RossiEdizioni Perditemo srl

Via Giuseppe Mazzini 720123 Milano348 45670029

Page 26: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

26 47

Allineamento> Connessione visiva tra elementi distanti

> Interrelazione

> Organizzazione logica

> Unificare

Page 27: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

27 47

>

>

Page 28: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

28 47

Report trimestrale

Edizioni Perditemo srl1° trimestre 2014

Redatto da Dott.ssa Maria Bianchi

Page 29: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

29 47

A G FronzoniTeatro del Falcone, 1979

Page 30: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

30 47

Ripetizione> Coerenza

> Gerarchia

> Ritmo

> Rafforzare

Page 31: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

31 47

Page 32: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

32 47

Massimo VignelliHabdibrhaim

Page 33: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

33 47

Contrasto> Differenza

> Focus

> Enfasi e forza

> Diversificare

Page 34: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

34 47

AA

Page 35: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

35 47

A 1

Max HuberLa Rinascente, 1950

Page 36: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

36 47

Walter BallmerNava, 1975

Page 37: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

37 47

Terence English

Page 38: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

L’insieme è più della somma

delle sue parti

Page 39: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

39 47

(Alcuni dei) principi gestaltici> Pregnanza/buona forma: la struttura percepita è sempre la

più semplice

> Prossimità/vicinanza: tendenza a raggruppare in funzione delle distanze

> Somiglianza: tendenza a raggruppare gli elementi simili

> Chiusura: tendenza a vedere come “chiuse” forme aperte

> Figura-sfondo: tutte le parti di una zona si possono interpre-tare sia come oggetto sia come sfondo

Page 40: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

40 47

Page 41: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

41 47

Page 42: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Manipolazioni ostensive

Page 43: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

43 47

Scopo della comunicazione

> Discriminazione

> Gerarchia

> Identità

Page 44: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

44 47

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

Page 45: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia
Page 46: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Less is more...

Page 47: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

47 47

“Complicare è facile, semplificare è difficile. Per complicare basta aggiungere [...], colori, forme, azioni, decorazioni… Tutti sono capaci di complicare.Pochi sono capaci di semplificare”

Bruno Munari, 1992

Page 48: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

Basic Design: il linguaggio della Comunicazione VisivaComunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM

?

Per approfondire1. Kepes, g. (197o). Il linguaggio della visione. Bari: Edizioni Dedalo

2. Arneheim, R. (1974). Il pensiero visivo. Torino: Einaudi

3. Williams, R. (2008). Non-Designer’s Design Book, The, 3rd Edition. Pea-chpit Press

Page 49: Basic Design - lbollini.it · il linguaggio della comunicazione visiva Comunicazione Visiva e Multimodale 14 . Comunicazione digitale ... > Ritmo > Rafforzare. omunicazione Visia

?