9. Grafica e comunicazione

1,586 views

Published on

Slides del corso di Laboratorio Internet del prof.R.Polillo - Università di Milano Bicocca, A.A.2010-11

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

No Downloads
Views
Total views
1,586
On SlideShare
0
From Embeds
0
Number of Embeds
93
Actions
Shares
0
Downloads
128
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

9. Grafica e comunicazione

  1. 1. 9. GRAFICA E COMUNICAZIONE1 Corso Laboratorio Internet – Prof. Roberto Polillo Università degli Studi di Milano Bicocca – Anno Accademico 2010-11
  2. 2. • L’obiettivo di questa fase: definire l’aspetto grafico del sito e produrre un nuovo prototipo navigabile con questi layout (ancora vuoti di contenuti) 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: Visual design 2 R.Polillo – Ottobre 2010
  3. 3. documento dei requisiti gabbie visive Progettazione layout grafici Personaliz- zazione dei temi Test e approvazione Prototipo di comunicazione prototipo di navigazione mappa del sito layout grafici Temi grafici disponibili Inserimento immagini di layout Visual design: attività 3 R.Polillo – Ottobre 2010
  4. 4. Layout grafici: esempi R.Polillo – Ottobre 2010 4
  5. 5. R.Polillo – Ottobre 2010
  6. 6. Grafica: aspetti importanti • Risoluzione video privilegiata  Di solito, non meno di 1024x768 • Logo e tag-line  Analisi materiale esistente • Paletta colori  Non pochi, non troppi (best: 5, ma con uso discreto)  Colore di sfondo chiaro (non è il sito di una rock band…) • Immagine header  Compatibile con logo, paletta e “mestiere” della organizzazione • Tipo di layout  Fisso o liquido • Scelta dei font  Compatibile con tutto quanto sopra • Problematiche di accessibilità  Dimensione font  Daltonismo (rosso/verde) 6 R.Polillo – Ottobre 2010
  7. 7. Un sito molto utile per palette, colori, [patterns, trends], … http://www.colourlovers.com/ 7 R.Polillo – Ottobre 2010
  8. 8. COPASO: tool per definire una propria palette http://www.colourlovers.com/copaso/ColorPaletteSoftware R.Polillo – Ottobre 2010 8
  9. 9. Linee guida tipografiche per massimizzare la leggibilità  Per i testi: - usare font senza grazie (Verdana, Arial,Calibri), di corpo leggibile anche alla massima risoluzione scelta - non usare il tutto maiuscolo, tranne che per i titoli - non mischiare colori all’interno di uno stesso testo (difficoltà di messa a fuoco contemporanea) - Neretto: per evidenziare, ma con cautela - Corsivo: mai - Sottolineato: di norma solo per i link  Per menu e intestazioni: - maggiore libertà  In tutti i casi: - attenzione al rapporto di contrasto sfondo / testo (meglio caratteri scuri su fondo chiaro) - non supporre che gli utenti sappiano distinguere i colori (daltonismo, tipicamente rosso/verde) - coerenza nelle scelte all’interno di tutto il sito 9 R.Polillo – Ottobre 2010
  10. 10. Demo Franchitarre Amici dei randagi Gruppo Siviglia Incontri Bicocca 10 R.Polillo – Ottobre 2010
  11. 11. Cose da evitare  Splash page / splash video  Scrolling orizzontale alla risoluzione privilegiata  Animazioni di ogni tipo  Scritte lampeggianti  Banner animati  (Se avete Flash, buttatelo via…)  Musica  Header ingombranti  Non sprecare spazio video  Rapporto equilibrato “cornice/contenuto” (es. 1/4)  Texture ingombranti di sfondo  …perché risulta impossibile mettere le fotografie 11 R.Polillo – Ottobre 2010
  12. 12. R.Polillo – Ottobre 2010
  13. 13. R.Polillo – Ottobre 2010
  14. 14. Cose da curare con grande attenzione  Peso delle immagini  Coerenza stilistica fra immagini dei contenuti e header  Rapporto armonico contenuti / sfondo  Allineamento degli elementi visivi  Enfasi sui contenuti  Vendere il quadro, non la cornice 14 R.Polillo – Ottobre 2010
  15. 15. Che cosa ho visto negli anni passati  Grafica molto, molto carente (“siti di prima generazione”)  Nessuna attenzione a:  Disposizione elementi sulla pagina  Coerenza stilistica elementi grafici  Scelta dei font  Colore sfondo vs colore testo  Attenzione insufficiente a risoluzione video (800 x 600 vs 1024 x 768) 15 R.Polillo – Ottobre 2010
  16. 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…. R.Polillo – Ottobre 2010
  17. 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…. R.Polillo – Ottobre 2010
  18. 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…. R.Polillo – Ottobre 2010
  19. 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…. 19
  20. 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…. 20
  21. 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…. 21
  22. 22. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  23. 23. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  24. 24. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  25. 25. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  26. 26. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  27. 27. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  28. 28. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  29. 29. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  30. 30. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  31. 31. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  32. 32. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  33. 33. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  34. 34. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  35. 35. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  36. 36. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
  37. 37. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH
  38. 38. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH
  39. 39. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
  40. 40. Esempi non profit da discutere R.Polillo – Ottobre 2010 Siti statici: www.abcsverona.it www.africa70.org www.africamission.org www.puntoapunto.org www.iahm.org www.ice.it www.icsitalia.org www.lvia.it www.nuovispazialservire.it Siti interattivi: www.aispo.org www.actionaid.it www.aifo.it www.oafi.org www.icu.it Siti sociali: www.acra.it www.amref.it www.emergency.it www.manitese.it www.savethechildren.it www.soleterre.it www.wwf.it
  41. 41. Queste slides… R.Polillo – Ottobre 2010 41 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. 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. L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.

×