12.Visione e progettazione grafica
-
Upload
roberto-polillo -
Category
Education
-
view
737 -
download
1
description
Transcript of 12.Visione e progettazione grafica
![Page 1: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/1.jpg)
Corso di Interazione Uomo MacchinaAA 2013-2014
Roberto Polillo
Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
VISIONE E PROGETTAZIONE GRAFICA
R.Polillo - Aprile 2014
1
Edizione 2
013-14
![Page 2: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/2.jpg)
Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano tutte le necessarie spiegazioni. Vedi www.rpolillo.it
Queste slide sono disponibili con licenza Creative Commons (attribuzione, non commerciale, condividi allo stesso modo) a chiunque desiderasse utilizzarle, per esempio a scopo didattico, senza necessità di preventiva autorizzazione:
http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it
La licenza non si estende alle immagini fotografiche e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che sono stati indicati, ove possibile, nelle didascalie del libro. L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.
R.Polillo - Aprile 2014
2
![Page 3: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/3.jpg)
La teoria della Gestalt3
“Nella percezione visiva, il tutto è più della somma delle sue parti”
Luci “in movimento”
R.Polillo - Aprile 2014
![Page 4: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/4.jpg)
Salvador Dalì, 1935
“Face of Mae West which may be used as an apartement”4 R.Polillo - Aprile 2014
![Page 5: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/5.jpg)
Le leggi della gestalt (M.Wertheimer, 1923)
5
Legge della continuità di direzione Legge della buona forma Legge dell’esperienza passata Legge della vicinanza Legge della somiglianza Legge della chiusura
R.Polillo - Aprile 2014
![Page 6: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/6.jpg)
Legge della continuità di direzione
R.Polillo - Aprile 2014
6
Quelle parti di una figura che formano una “curva buona” o che vanno nella stessa direzione tendono a essere raccolti in unità più facilmente delle altre
![Page 7: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/7.jpg)
Legge della “buona forma”7
Il campo percettivo si segmenta in modo che risultino entità per quanto possibile equilibrate, armoniche, costi-tuite secondo un medesimo principio in tutte le loro parti
R.Polillo - Aprile 2014
![Page 8: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/8.jpg)
R.Polillo - Aprile 2014
8
Legge della “buona forma”: altri esempi
![Page 9: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/9.jpg)
Legge dell’esperienza passata
R.Polillo - Aprile 2014
9
L’esperienza passata influenza il modo con cui vediamo una immagine
a b
![Page 10: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/10.jpg)
Legge dell’esperienza passata: altri esempi
R.Polillo - Aprile 2014
10
a b
![Page 11: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/11.jpg)
Ambiguità
R.Polillo - Aprile 2014
11
![Page 12: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/12.jpg)
R.Polillo - Aprile 201412
![Page 13: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/13.jpg)
R.Polillo - Aprile 201413
![Page 14: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/14.jpg)
R.Polillo - Aprile 201414
![Page 15: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/15.jpg)
Legge della vicinanza15
Gli elementi del campo visivo che sono fra loro più vicini tendono ad essere raccolti in unità
R.Polillo - Aprile 2014
![Page 16: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/16.jpg)
16 R.Polillo - Aprile 2014
![Page 17: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/17.jpg)
Vicinanza: siete d'accordo?
R.Polillo - Aprile 2014
17
![Page 18: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/18.jpg)
Da PowerPoint 2007
Qual è il problema?
R.Polillo - Aprile 2014
18
![Page 19: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/19.jpg)
Legge della somiglianza19
Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità
R.Polillo - Aprile 2014
![Page 20: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/20.jpg)
20 R.Polillo - Aprile 2014
![Page 21: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/21.jpg)
Siete d’accordo con questo uso dei colori?
R.Polillo - Aprile 2014
21
![Page 22: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/22.jpg)
Siete d'accordo con questo uso delle icone?
R.Polillo - Aprile 2014
22
![Page 23: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/23.jpg)
Siete d'accordo con questo design?
R.Polillo - Aprile 2014
23
![Page 24: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/24.jpg)
Perché questa immagine non è comprensibile?
R.Polillo - Aprile 201424
![Page 25: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/25.jpg)
R.Polillo - Aprile 201425
Per farla stare su una riga
Ma la leggiamo così
![Page 26: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/26.jpg)
Che cosa non va in questa home page?
R.Polillo - Aprile 2014
26
![Page 27: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/27.jpg)
Legge della chiusura27
Le linee delimitanti una superficie chiusa si percepiscono come unità più facilmente di quelle che non si chiudono(a parità di altre condizioni)
R.Polillo - Aprile 2014
![Page 28: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/28.jpg)
Esempio: conflitto fra chiusura e vicinanza
28
a
b
R.Polillo - Aprile 2014
![Page 29: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/29.jpg)
L’importanza dei riquadri: esempio (I )
29 R.Polillo - Aprile 2014
![Page 30: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/30.jpg)
L’importanza dei riquadri: esempio (II)
30
R.Polillo - Aprile 2014
![Page 31: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/31.jpg)
Chiusura: come migliorare un menu
R.Polillo - Aprile 2014
31
![Page 32: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/32.jpg)
Uso delle cornici nelle form
Con cornici
Senza corniciR.Polillo - Aprile 2014
32
![Page 33: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/33.jpg)
Chiusura: esempio
R.Polillo - Aprile 2014
33
![Page 34: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/34.jpg)
34
R.Polillo - Aprile 2014
![Page 35: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/35.jpg)
35R.Polillo - Aprile 2014
![Page 36: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/36.jpg)
Può essere migliorata?
R.Polillo - Aprile 2014
36
![Page 37: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/37.jpg)
R.Polillo - Aprile 2014
37
A che cosa servono queste icone?
aYahoo (2009)
British-airways (2003)
![Page 38: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/38.jpg)
E queste?
R.Polillo - Aprile 2014
38
iPhone 3GS
![Page 39: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/39.jpg)
R.Polillo - Aprile 201439
![Page 40: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/40.jpg)
Uso dei colori
Usate il colore (ma non solo il colore: daltonismo) per veicolare dei significati
R.Polillo - Aprile 2014
40
![Page 41: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/41.jpg)
41 R.Polillo - Aprile 2014
![Page 42: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/42.jpg)
R.Polillo - Aprile 201442
![Page 43: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/43.jpg)
Uso dei colori: esempio
R.Polillo - Aprile 2014
43
Windows Vista (2009)
![Page 44: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/44.jpg)
Daltonismo: esempio
R.Polillo - Aprile 2014
44
![Page 45: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/45.jpg)
(segue)
R.Polillo - Aprile 2014
45
![Page 46: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/46.jpg)
Associazioni di colore
Siate coerenti con le usuali associazioni di significato ai diversi colori
Attenzione: possono essere diverse a seconda delle diverse culture!
R.Polillo - Aprile 2014
46
![Page 47: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/47.jpg)
STOP EXIT
PERICOLO !
AVANTI47 R.Polillo - Aprile 2014
![Page 48: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/48.jpg)
48 R.Polillo - Aprile 2014
![Page 49: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/49.jpg)
49 R.Polillo - Aprile 2014
![Page 50: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/50.jpg)
Contrasto di colore
Il contrasto di colore può essere usato per dirigere l'attenzione su particolari element
R.Polillo - Aprile 2014
50
(MAC OS 8)
![Page 51: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/51.jpg)
51 R.Polillo - Aprile 2014
![Page 52: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/52.jpg)
52 R.Polillo - Aprile 2014
![Page 53: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/53.jpg)
53 R.Polillo - Aprile 2014
![Page 54: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/54.jpg)
54 R.Polillo - Aprile 2014
![Page 55: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/55.jpg)
Colori "caldi" e "freddi"
COLORI CALDI
azione,urgenza richiesta di risposta, vicinanza
COLORI FREDDI
lontananza,tranquillità,informazioni di stato
Nota: le associazioni di cui sopra vengono normalmente date per scontate, ma l’evidenza scientifica è dubbia
R.Polillo - Aprile 2014
55
![Page 56: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/56.jpg)
Colori caldi e freddi
Si dice che i colori caldi tendano ad avanzare, i colori freddi a recedere
R.Polillo - Aprile 2014
56
![Page 57: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/57.jpg)
R.Polillo - Aprile 201457
![Page 58: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/58.jpg)
R.Polillo - Aprile 201458
![Page 59: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/59.jpg)
Quanti colori in una pagina?
Usate il colore con parsimonia, evitando l'effetto "music hall"
Se i colori sono troppo, si crea rumore visivo, e le associazioni colore/signifcato non funzionano più…
R.Polillo - Aprile 2014
59
![Page 60: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/60.jpg)
Banner
Funzioni
R.Polillo - Aprile 201460
![Page 61: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/61.jpg)
61
R.Polillo - Aprile 2014
![Page 62: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/62.jpg)
R.Polillo - Aprile 201462
![Page 63: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/63.jpg)
Texture di sfondo
Attenzione alle texture di sfondo, che possono ridurre fortemente la leggibilità di testi e controlli
R.Polillo - Aprile 2014
63
![Page 64: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/64.jpg)
64 R.Polillo - Aprile 2014
![Page 65: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/65.jpg)
Stile del design
Definite lo stile complessivo del design e siate coerente con esso (es.: brand image)
R.Polillo - Aprile 2014
65
![Page 66: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/66.jpg)
66 R.Polillo - Aprile 2014
![Page 67: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/67.jpg)
CocaCola tedesca nel 200367 R.Polillo - Aprile 2014
![Page 68: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/68.jpg)
CocaCola USA nel 200368 R.Polillo - Aprile 2014
![Page 70: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/70.jpg)
In sintesi…
Una buona grafica dovrebbe: essere facilmente leggibile (testi, immagini) per tutti gli
utenti a cui è destinata aiutarci a comprendere chiaramente la struttura di una
pagina video, trasmettendoci una sensazione di semplicità aiutarci ad associare facilmente contenuti fra loro
omogenei utilizzare codici visivi e convenzioni familiari agli
utenti a cui è destinata utilizzare codici visivi coerenti all’interno del
prodotto (e del suo “ecosistema”) non contenere elementi ridondanti o ambigui
R.Polillo - Aprile 2014
70
![Page 71: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/71.jpg)
Linee guida
1. Usare vicinanza, somiglianza e chiusura per organizzare visivamente gli elementi in base alla loro funzione e significato
2. Evitare ridondanza, confusione e rumore visivo
3. Suggerire percorsi visivi coerenti con i casi d'uso
4. Usare forme e stili di raffigurazione fra loro coerenti e contestualmente appropriate
5. Inserire gli elementi grafici in una o più griglie logiche progettate in modo coerente per tutta l'applicazione
R.Polillo - Aprile 2014
71
![Page 72: 12.Visione e progettazione grafica](https://reader034.fdocuments.net/reader034/viewer/2022051616/5539d5bd550346bf308b4a2f/html5/thumbnails/72.jpg)
Website: esempi da discutere http://
www.denisechandler.com/portfolio.html
http://naldzgraphics.net/inspirations/50-corporate-website-examples/
http://www.webpagesthatsuck.com
R.Polillo - Aprile 2014
72