SlideShare a Scribd company logo
1 of 39
Università degli Studi di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Laboratorio di Internet / Laboratorio di progettazione (mod.1) Anno Accademico 2009-2010 LEZIONE 8  FASE 4: VISUAL DESIGN  Roberto Polillo
Fase 4: Visual design ,[object Object],3 4 5 6 7 Web  design Visual  design Sviluppo Redazione dei contenuti Pubblicazione 1 Definizione dei requisiti Documento  dei requisiti Prototipo di  navigazione Prototipo  funzionale Prototipo  editoriale Sistema  on line Prototipo di  comunicazione 2 Avviamento del progetto Piano di  qualità Gestione  del sito
Fase 4: Attività documento dei requisiti gabbie  visive Progettazione  layout grafici Personaliz- zazione  dei temi Test e  approvazione Prototipo di comunicazione prototipo di navigazione mappa  del sito sviluppo della grafica layout grafici Temi grafici disponibili Inserimento  immagini  di layout
 
Layout grafici                                                                                          
Grafica: aspetti importanti da “progettare” ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tool per definire una propria palette
Un tool molto utile per palette, colori, [patterns, trends], … http://www.colourlovers.com/
Tipografia: alcune linee guida per massimizzare la leggibilità  ,[object Object],[object Object],[object Object]
Demo:  Franchitarre Amici dei randagi Gruppo Siviglia Incontri Bicocca
Cose da evitare  (come l’acqua santa per il diavolo…) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
 
Cose da curare “ossessivamente” ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Che cosa ho visto negli anni passati ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH
Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii

More Related Content

Similar to Laboratorio internet 8: Visual design (6)

13.Progettare il testo
13.Progettare il testo13.Progettare il testo
13.Progettare il testo
 
14.Progettare il testo
14.Progettare il testo14.Progettare il testo
14.Progettare il testo
 
Informatica umanistica 2016 - 4
Informatica umanistica   2016 - 4Informatica umanistica   2016 - 4
Informatica umanistica 2016 - 4
 
14. Progettare il testo
14. Progettare il testo14. Progettare il testo
14. Progettare il testo
 
Webinar Susanna Pepi | Come Scegliere Font e Colori per Creare Landing Page
Webinar Susanna Pepi | Come Scegliere Font e Colori per Creare Landing PageWebinar Susanna Pepi | Come Scegliere Font e Colori per Creare Landing Page
Webinar Susanna Pepi | Come Scegliere Font e Colori per Creare Landing Page
 
Corso Fse Itc Modulo Secondo Incontro I
Corso Fse Itc Modulo Secondo Incontro ICorso Fse Itc Modulo Secondo Incontro I
Corso Fse Itc Modulo Secondo Incontro I
 

More from Roberto Polillo

More from Roberto Polillo (20)

Future City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroFuture City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuro
 
Teaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsTeaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerations
 
Conclusioni del corso
Conclusioni del corsoConclusioni del corso
Conclusioni del corso
 
22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. Conclusioni del corso
 
ICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioni
 
Editoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleEditoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitale
 
21. Progettare per l'errore
21. Progettare per l'errore21. Progettare per l'errore
21. Progettare per l'errore
 
20. Principi e linee guida (II)
20. Principi e linee guida (II)20. Principi e linee guida (II)
20. Principi e linee guida (II)
 
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (I)
 
18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)
 
Wikipedia
WikipediaWikipedia
Wikipedia
 
Open internet
Open internetOpen internet
Open internet
 
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
 
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
 
20. Social networks
20. Social networks20. Social networks
20. Social networks
 
19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg
 
18. Content sharing sites
18. Content sharing sites18. Content sharing sites
18. Content sharing sites
 
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatori
 
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla grafica
 
16. Social media
16. Social media16. Social media
16. Social media
 

Recently uploaded

Recently uploaded (10)

Ostia antica da porta di Roma a porta d'Europa
Ostia antica da porta di Roma a porta d'EuropaOstia antica da porta di Roma a porta d'Europa
Ostia antica da porta di Roma a porta d'Europa
 
Stati Uniti PPT geografia power point..
Stati Uniti  PPT geografia power point..Stati Uniti  PPT geografia power point..
Stati Uniti PPT geografia power point..
 
AccessibleEU: oggi per l’accessibilità di domani
AccessibleEU: oggi per l’accessibilità di domaniAccessibleEU: oggi per l’accessibilità di domani
AccessibleEU: oggi per l’accessibilità di domani
 
Powerpoint tesi di laurea
Powerpoint tesi di laurea Powerpoint tesi di laurea
Powerpoint tesi di laurea
 
a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCO
a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCOa scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCO
a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCO
 
No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...
No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...
No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...
 
Accessibilità, tra miti e realtà: gli errori da non compiere e le azioni da i...
Accessibilità, tra miti e realtà: gli errori da non compiere e le azioni da i...Accessibilità, tra miti e realtà: gli errori da non compiere e le azioni da i...
Accessibilità, tra miti e realtà: gli errori da non compiere e le azioni da i...
 
MyEdu Club: il magazine di MyEdu dedicato ai genitori
MyEdu Club: il magazine di MyEdu dedicato ai genitoriMyEdu Club: il magazine di MyEdu dedicato ai genitori
MyEdu Club: il magazine di MyEdu dedicato ai genitori
 
Ticonzero news 149.pdf, maggio 2024, content
Ticonzero news 149.pdf, maggio 2024, contentTiconzero news 149.pdf, maggio 2024, content
Ticonzero news 149.pdf, maggio 2024, content
 
Lo Schema Diapositiva con LibreOffice Impress
Lo Schema Diapositiva con LibreOffice ImpressLo Schema Diapositiva con LibreOffice Impress
Lo Schema Diapositiva con LibreOffice Impress
 

Laboratorio internet 8: Visual design

  • 1. Università degli Studi di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Laboratorio di Internet / Laboratorio di progettazione (mod.1) Anno Accademico 2009-2010 LEZIONE 8 FASE 4: VISUAL DESIGN Roberto Polillo
  • 2.
  • 3. Fase 4: Attività documento dei requisiti gabbie visive Progettazione layout grafici Personaliz- zazione dei temi Test e approvazione Prototipo di comunicazione prototipo di navigazione mappa del sito sviluppo della grafica layout grafici Temi grafici disponibili Inserimento immagini di layout
  • 4.  
  • 5. Layout grafici                                                                                          
  • 6.
  • 7. Tool per definire una propria palette
  • 8. Un tool molto utile per palette, colori, [patterns, trends], … http://www.colourlovers.com/
  • 9.
  • 10. Demo: Franchitarre Amici dei randagi Gruppo Siviglia Incontri Bicocca
  • 11.
  • 12.  
  • 13.  
  • 14.
  • 15.
  • 16. Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
  • 17. Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
  • 18. Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
  • 19. Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
  • 20. Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
  • 21. Attenzione agli sfondi di colore variabile: sul chiaro vanno bene i testi scuri, sullo scuro vanno bene i testi chiari. In definitiva, non va mai bene niente….
  • 22. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  • 23. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  • 24. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  • 25. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  • 26. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  • 27. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  • 28. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  • 29. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  • 30. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  • 31. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  • 32. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  • 33. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  • 34. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  • 35. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  • 36. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  • 37. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH
  • 38. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH
  • 39. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii

Editor's Notes

  1. www.clubvacanze.it