Laboratorio internet 8: Visual design

1,043 views

Published on

Slide per il corso di Laboratorio Internet tenuto da R.Polillo all'Università degli Studi di Milano Bicocca (info in www.rpolillo.it)

Published in: Education, Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,043
On SlideShare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
48
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • www.clubvacanze.it
  • Laboratorio internet 8: Visual design

    1. 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. 2. Fase 4: Visual design <ul><li>L’obiettivo di questa fase: definire l’aspetto grafico del sito e produrre un nuovo prototipo navigabile con questi layout (ancora vuoti di contenuti) </li></ul>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
    3. 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                                                                                          
    5. 6. Grafica: aspetti importanti da “progettare” <ul><li>Risoluzione video privilegiata </li></ul><ul><ul><li>Di solito, non meno di 1024x768 </li></ul></ul><ul><li>Logo e tag-line </li></ul><ul><ul><li>Analisi materiale esistente </li></ul></ul><ul><li>Paletta colori </li></ul><ul><ul><li>Non pochi, non troppi (best: 5, ma con uso discreto) </li></ul></ul><ul><ul><li>Colore di sfondo chiaro (non è il sito di una rock band…) </li></ul></ul><ul><li>Immagine header </li></ul><ul><ul><li>Compatibile con logo, paletta e “mestiere” della organizzazione </li></ul></ul><ul><li>Tipo di layout </li></ul><ul><ul><li>Fisso o liquido </li></ul></ul><ul><li>Scelta dei font </li></ul><ul><ul><li>Compatibile con tutto quanto sopra </li></ul></ul><ul><li>Problematiche di accessibilità </li></ul><ul><ul><li>Dimensione font </li></ul></ul><ul><ul><li>Daltonismo (rosso/verde) </li></ul></ul>
    6. 7. Tool per definire una propria palette
    7. 8. Un tool molto utile per palette, colori, [patterns, trends], … http://www.colourlovers.com/
    8. 9. Tipografia: alcune linee guida per massimizzare la leggibilità <ul><li>Per i testi: - usare font senza grazie (Verdana, Arial), 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 </li></ul><ul><li>Per i menu e intestazioni : - maggiore libertà </li></ul><ul><li>In tutti i casi: - attenzione al rapporto 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 </li></ul>
    9. 10. Demo: Franchitarre Amici dei randagi Gruppo Siviglia Incontri Bicocca
    10. 11. Cose da evitare (come l’acqua santa per il diavolo…) <ul><li>Splash page / splash video </li></ul><ul><li>Scrolling orizzontale alla risoluzione privilegiata </li></ul><ul><li>Animazioni di ogni tipo </li></ul><ul><ul><li>Scritte lampeggianti </li></ul></ul><ul><ul><li>Banner animati </li></ul></ul><ul><ul><li>(Se avete Flash, buttatelo via…) </li></ul></ul><ul><li>Musica </li></ul><ul><li>Header ingombranti </li></ul><ul><ul><li>Non sprecare spazio video </li></ul></ul><ul><ul><li>Rapporto equilibrato “cornice/contenuto” (es. 1/4) </li></ul></ul><ul><li>Texture ingombranti di sfondo </li></ul><ul><ul><li>… perché risulta impossibile mettere le fotografie </li></ul></ul>
    11. 14. Cose da curare “ossessivamente” <ul><li>Immagini pesanti </li></ul><ul><li>Rapporto immagini dei contenuti / header </li></ul><ul><ul><li>Lo stile deve essere coerente </li></ul></ul><ul><li>Rapporto armonico contenuti/sfondo </li></ul><ul><li>Allineamento degli elementi visivo </li></ul><ul><li>Enfasi sui contenuti </li></ul><ul><ul><li>Vendere il quadro, non la cornice </li></ul></ul>
    12. 15. Che cosa ho visto negli anni passati <ul><li>Grafica molto, molto carente (“siti di prima generazione”) </li></ul><ul><li>Nessuna attenzione a: </li></ul><ul><ul><li>Disposizione elementi sulla pagina </li></ul></ul><ul><ul><li>Coerenza stilistica elementi grafici </li></ul></ul><ul><ul><li>Scelta dei font </li></ul></ul><ul><ul><li>Colore sfondo vs colore testo </li></ul></ul><ul><li>Attenzione insufficiente a risoluzione video (800 x 600 vs 1024 x 768) </li></ul>
    13. 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….
    14. 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….
    15. 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….
    16. 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….
    17. 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….
    18. 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….
    19. 22. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
    20. 23. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
    21. 24. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
    22. 25. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
    23. 26. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
    24. 27. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
    25. 28. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
    26. 29. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
    27. 30. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
    28. 31. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
    29. 32. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
    30. 33. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
    31. 34. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
    32. 35. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii
    33. 36. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
    34. 37. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH
    35. 38. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH
    36. 39. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii

    ×