Corso di Interazione Uomo MacchinaAA 2012-2013Roberto PolilloCorso di laurea in InformaticaUniversità di Milano BicoccaDip...
Queste slides…… si basano sul libro “Facile da usare”, dell’autore, dove si trovanotutte le necessarie spiegazioni. Vedi w...
La teoria della Gestalt3“Nella percezione visiva, il tutto è più dellasomma delle sue parti”Luci “in movimento”R.Polillo -...
Salvador Dalì, 1935“Face of Mae Westwhich may be used asan apartement”4 R.Polillo - Aprile 2013
Le leggi della gestalt (M.Wertheimer, 1923)5 Legge della continuità di direzione Legge della buona forma Legge dell’esp...
Legge della continuità di direzioneR.Polillo - Aprile 20136Quelle parti di una figura che formano una “curva buona” oche v...
Legge della “buona forma”7Il campo percettivo si segmenta in modo che risultinoentità per quanto possibile equilibrate, ar...
Legge della “buona forma”: altri esempiR.Polillo - Aprile 20138
Legge dell’esperienza passataR.Polillo - Aprile 20139L’esperienza passata influenza il modo con cui vediamouna immaginea b
Legge dell’esperienza passata: altri esempiR.Polillo - Aprile 201310a b
AmbiguitàR.Polillo - Aprile 201311
R.Polillo - Aprile 201312
R.Polillo - Aprile 201313
R.Polillo - Aprile 201314
Legge della vicinanza15Gli elementi del campo visivo che sono fra loro più vicinitendono ad essere raccolti in unitàR.Poli...
16 R.Polillo - Aprile 2013
Vicinanza: siete daccordo?R.Polillo - Aprile 201317
Da PowerPoint 2007Qual è il problema?R.Polillo - Aprile 201318
Legge della somiglianza19Gli elementi del campo visivo che sono tra loro simili tendonoad essere raccolti in unitàR.Polill...
20 R.Polillo - Aprile 2013
Siete d’accordo con questo uso dei colori?R.Polillo - Aprile 201321
Siete daccordo con questo uso delleicone?R.Polillo - Aprile 201322
Siete daccordo con questodesign?R.Polillo - Aprile 201323
Perché questa immagine non è comprensibile?R.Polillo - Aprile 201324
R.Polillo - Aprile 201325Per farla stare su una rigaMa la leggiamo così
Che cosa non va in questa homepage?R.Polillo - Aprile 201326
Legge della chiusura27Le linee delimitanti una superficie chiusa si percepisconocome unità più facilmente di quelle che no...
Esempio: conflitto fra chiusura e vicinanza28abR.Polillo - Aprile 2013
L’importanza dei riquadri: esempio (I )29 R.Polillo - Aprile 2013
L’importanza dei riquadri: esempio (II)30R.Polillo - Aprile 2013
Chiusura: come migliorare unmenuR.Polillo - Aprile 201331
Uso delle cornici nelle formCon corniciSenza corniciR.Polillo - Aprile 201332
Chiusura: esempioR.Polillo - Aprile 201333
34R.Polillo - Aprile 2013
35R.Polillo - Aprile 2013
Può essere migliorata?R.Polillo - Aprile 201336
A che cosa servono questeicone?R.Polillo - Aprile 201337aYahoo (2009)British-airways (2003)
E queste?R.Polillo - Aprile 201338iPhone 3GS
R.Polillo - Aprile 201339
Uso dei colori Usate il colore (ma non solo il colore:daltonismo) per veicolare dei significatiR.Polillo - Aprile 201340
41 R.Polillo - Aprile 2013
R.Polillo - Aprile 201342
Uso dei colori: esempioR.Polillo - Aprile 201343Windows Vista (2009)
Daltonismo: esempioR.Polillo - Aprile 201344
(segue)R.Polillo - Aprile 201345
Associazioni di colore Siate coerenti con le usuali associazioni disignificato ai diversi colori Attenzione: possono ess...
STOP EXITPERICOLO !AVANTI47 R.Polillo - Aprile 2013
48 R.Polillo - Aprile 2013
49 R.Polillo - Aprile 2013
Contrasto di colore Il contrasto di colore può essere usato perdirigere lattenzione su particolari elementR.Polillo - Apr...
51 R.Polillo - Aprile 2013
52 R.Polillo - Aprile 2013
53 R.Polillo - Aprile 2013
54 R.Polillo - Aprile 2013
Colori "caldi" e "freddi"COLORI CALDIazione,urgenzarichiesta di risposta,vicinanzaCOLORI FREDDIlontananza,tranquillità,inf...
Colori caldi e freddiSi dice che i colori caldi tendano ad avanzare,i colori freddi a recedereR.Polillo - Aprile 201356
R.Polillo - Aprile 201357
R.Polillo - Aprile 201358
Quanti colori in una pagina? Usate il colore con parsimonia, evitandoleffetto "music hall" Se i colori sono troppo, si c...
BannerFunzioniR.Polillo - Aprile 201360
61R.Polillo - Aprile 2013
R.Polillo - Aprile 201362
Texture di sfondo Attenzione alle texture di sfondo, che possonoridurre fortemente la leggibilità di testi econtrolliR.Po...
64 R.Polillo - Aprile 2013
Stile del design Definite lo stile complessivo del design e siatecoerente con esso (es.: brand image)R.Polillo - Aprile 2...
66 R.Polillo - Aprile 2013
CocaCola tedesca nel 200367 R.Polillo - Aprile 2013
CocaCola USA nel 200368 R.Polillo - Aprile 2013
www.cocacola.com nel 200369 R.Polillo - Aprile 2013
In sintesi…Una buona grafica dovrebbe: essere facilmente leggibile (testi, immagini) per tutti gliutenti a cui è destinat...
Linee guida1. Usare vicinanza, somiglianza e chiusura perorganizzare visivamente gli elementi in base alla lorofunzione e ...
Website: esempi da discutere http://www.denisechandler.com/portfolio.html http://naldzgraphics.net/inspirations/50-corpo...
Upcoming SlideShare
Loading in...5
×

12.Progettare la grafica (ii)

919

Published on

Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-13
Lezione del 23 aprile 2013
Vedi anche www.rpolillo.it

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
919
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
69
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "12.Progettare la grafica (ii)"

  1. 1. Corso di Interazione Uomo MacchinaAA 2012-2013Roberto PolilloCorso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e ComunicazionePROGETTARE LA GRAFICA (II)R.Polillo - Aprile 20131
  2. 2. Queste slides…… si basano sul libro “Facile da usare”, dell’autore, dove si trovanotutte le necessarie spiegazioni. Vedi www.rpolillo.itQueste slide sono disponibili con licenza Creative Commons(attribuzione, non commerciale, condividi allo stesso modo) achiunque desiderasse utilizzarle, per esempio a scopodidattico, senza necessità di preventiva autorizzazione:http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.itLa licenza non si estende alle immagini fotografiche e alle screenshots, i cui diritti restano in capo ai rispettivi proprietari, che sonostati indicati, ove possibile, nelle didascalie del libro. L’autore siscusa per eventuali omissioni, e resta a disposizione percorreggerle.R.Polillo - Aprile 20132
  3. 3. La teoria della Gestalt3“Nella percezione visiva, il tutto è più dellasomma delle sue parti”Luci “in movimento”R.Polillo - Aprile 2013
  4. 4. Salvador Dalì, 1935“Face of Mae Westwhich may be used asan apartement”4 R.Polillo - Aprile 2013
  5. 5. 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 chiusuraR.Polillo - Aprile 2013
  6. 6. Legge della continuità di direzioneR.Polillo - Aprile 20136Quelle parti di una figura che formano una “curva buona” oche vanno nella stessa direzione tendono a essere raccoltiin unità più facilmente delle altre
  7. 7. Legge della “buona forma”7Il campo percettivo si segmenta in modo che risultinoentità per quanto possibile equilibrate, armoniche, costi-tuite secondo un medesimo principio in tutte le loro partiR.Polillo - Aprile 2013
  8. 8. Legge della “buona forma”: altri esempiR.Polillo - Aprile 20138
  9. 9. Legge dell’esperienza passataR.Polillo - Aprile 20139L’esperienza passata influenza il modo con cui vediamouna immaginea b
  10. 10. Legge dell’esperienza passata: altri esempiR.Polillo - Aprile 201310a b
  11. 11. AmbiguitàR.Polillo - Aprile 201311
  12. 12. R.Polillo - Aprile 201312
  13. 13. R.Polillo - Aprile 201313
  14. 14. R.Polillo - Aprile 201314
  15. 15. Legge della vicinanza15Gli elementi del campo visivo che sono fra loro più vicinitendono ad essere raccolti in unitàR.Polillo - Aprile 2013
  16. 16. 16 R.Polillo - Aprile 2013
  17. 17. Vicinanza: siete daccordo?R.Polillo - Aprile 201317
  18. 18. Da PowerPoint 2007Qual è il problema?R.Polillo - Aprile 201318
  19. 19. Legge della somiglianza19Gli elementi del campo visivo che sono tra loro simili tendonoad essere raccolti in unitàR.Polillo - Aprile 2013
  20. 20. 20 R.Polillo - Aprile 2013
  21. 21. Siete d’accordo con questo uso dei colori?R.Polillo - Aprile 201321
  22. 22. Siete daccordo con questo uso delleicone?R.Polillo - Aprile 201322
  23. 23. Siete daccordo con questodesign?R.Polillo - Aprile 201323
  24. 24. Perché questa immagine non è comprensibile?R.Polillo - Aprile 201324
  25. 25. R.Polillo - Aprile 201325Per farla stare su una rigaMa la leggiamo così
  26. 26. Che cosa non va in questa homepage?R.Polillo - Aprile 201326
  27. 27. Legge della chiusura27Le linee delimitanti una superficie chiusa si percepisconocome unità più facilmente di quelle che non si chiudono(a parità di altre condizioni)R.Polillo - Aprile 2013
  28. 28. Esempio: conflitto fra chiusura e vicinanza28abR.Polillo - Aprile 2013
  29. 29. L’importanza dei riquadri: esempio (I )29 R.Polillo - Aprile 2013
  30. 30. L’importanza dei riquadri: esempio (II)30R.Polillo - Aprile 2013
  31. 31. Chiusura: come migliorare unmenuR.Polillo - Aprile 201331
  32. 32. Uso delle cornici nelle formCon corniciSenza corniciR.Polillo - Aprile 201332
  33. 33. Chiusura: esempioR.Polillo - Aprile 201333
  34. 34. 34R.Polillo - Aprile 2013
  35. 35. 35R.Polillo - Aprile 2013
  36. 36. Può essere migliorata?R.Polillo - Aprile 201336
  37. 37. A che cosa servono questeicone?R.Polillo - Aprile 201337aYahoo (2009)British-airways (2003)
  38. 38. E queste?R.Polillo - Aprile 201338iPhone 3GS
  39. 39. R.Polillo - Aprile 201339
  40. 40. Uso dei colori Usate il colore (ma non solo il colore:daltonismo) per veicolare dei significatiR.Polillo - Aprile 201340
  41. 41. 41 R.Polillo - Aprile 2013
  42. 42. R.Polillo - Aprile 201342
  43. 43. Uso dei colori: esempioR.Polillo - Aprile 201343Windows Vista (2009)
  44. 44. Daltonismo: esempioR.Polillo - Aprile 201344
  45. 45. (segue)R.Polillo - Aprile 201345
  46. 46. Associazioni di colore Siate coerenti con le usuali associazioni disignificato ai diversi colori Attenzione: possono essere diverse a secondadelle diverse culture!R.Polillo - Aprile 201346
  47. 47. STOP EXITPERICOLO !AVANTI47 R.Polillo - Aprile 2013
  48. 48. 48 R.Polillo - Aprile 2013
  49. 49. 49 R.Polillo - Aprile 2013
  50. 50. Contrasto di colore Il contrasto di colore può essere usato perdirigere lattenzione su particolari elementR.Polillo - Aprile 201350(MAC OS 8)
  51. 51. 51 R.Polillo - Aprile 2013
  52. 52. 52 R.Polillo - Aprile 2013
  53. 53. 53 R.Polillo - Aprile 2013
  54. 54. 54 R.Polillo - Aprile 2013
  55. 55. Colori "caldi" e "freddi"COLORI CALDIazione,urgenzarichiesta di risposta,vicinanzaCOLORI FREDDIlontananza,tranquillità,informazioni di statoNota: le associazioni di cui sopra vengononormalmente date per scontate, ma l’evidenzascientifica è dubbiaR.Polillo - Aprile 201355
  56. 56. Colori caldi e freddiSi dice che i colori caldi tendano ad avanzare,i colori freddi a recedereR.Polillo - Aprile 201356
  57. 57. R.Polillo - Aprile 201357
  58. 58. R.Polillo - Aprile 201358
  59. 59. Quanti colori in una pagina? Usate il colore con parsimonia, evitandoleffetto "music hall" Se i colori sono troppo, si crea rumore visivo, ele associazioni colore/signifcato nonfunzionano più…R.Polillo - Aprile 201359
  60. 60. BannerFunzioniR.Polillo - Aprile 201360
  61. 61. 61R.Polillo - Aprile 2013
  62. 62. R.Polillo - Aprile 201362
  63. 63. Texture di sfondo Attenzione alle texture di sfondo, che possonoridurre fortemente la leggibilità di testi econtrolliR.Polillo - Aprile 201363
  64. 64. 64 R.Polillo - Aprile 2013
  65. 65. Stile del design Definite lo stile complessivo del design e siatecoerente con esso (es.: brand image)R.Polillo - Aprile 201365
  66. 66. 66 R.Polillo - Aprile 2013
  67. 67. CocaCola tedesca nel 200367 R.Polillo - Aprile 2013
  68. 68. CocaCola USA nel 200368 R.Polillo - Aprile 2013
  69. 69. www.cocacola.com nel 200369 R.Polillo - Aprile 2013
  70. 70. In sintesi…Una buona grafica dovrebbe: essere facilmente leggibile (testi, immagini) per tutti gliutenti a cui è destinata aiutarci a comprendere chiaramente la struttura di unapagina video, trasmettendoci una sensazione disemplicità aiutarci ad associare facilmente contenuti fra loroomogenei utilizzare codici visivi e convenzioni familiari agliutenti a cui è destinata utilizzare codici visivi coerenti all’interno delprodotto (e del suo “ecosistema”) non contenere elementi ridondanti o ambiguiR.Polillo - Aprile 201370
  71. 71. Linee guida1. Usare vicinanza, somiglianza e chiusura perorganizzare visivamente gli elementi in base alla lorofunzione e significato2. Evitare ridondanza, confusione e rumore visivo3. Suggerire percorsi visivi coerenti con i casi duso4. Usare forme e stili di raffigurazione fra loro coerenti econtestualmente appropriate5. Inserire gli elementi grafici in una o più griglie logicheprogettate in modo coerente per tutta lapplicazioneR.Polillo - Aprile 201371
  72. 72. Website: esempi da discutere http://www.denisechandler.com/portfolio.html http://naldzgraphics.net/inspirations/50-corporate-website-examples/ http://www.webpagesthatsuck.comR.Polillo - Aprile 201372
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×