laboratorio internet 8: visual design
DESCRIPTION
Slide per il corso di Laboratorio Internet tenuto da R.Polillo all'Università degli Studi di Milano Bicocca (info in www.rpolillo.it)TRANSCRIPT
![Page 1: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/1.jpg)
Università degli Studi di Milano BicoccaDipartimento 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
![Page 2: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/2.jpg)
Fase 4: Visual design
• 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 7Web
designVisual design
Sviluppo Redazionedei contenuti
Pubblicazione
1Definizionedei requisiti
Documento dei requisiti
Prototipo di navigazione
Prototipo funzionale
Prototipo editoriale
Sistema on line
Prototipo di comunicazione
2Avviamentodel progetto
Piano di qualità
Gestione del sito
![Page 3: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/3.jpg)
Fase 4: Attività
documentodei requisiti
gabbie visive
Progettazione layout grafici
Personaliz-zazione dei temi
Test e approvazione
Prototipo di comunicazione
prototipodi navigazione
mappa del sito
sviluppo della grafica
layoutgrafici
Temi graficidisponibili
Inserimento immagini di layout
![Page 4: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/4.jpg)
![Page 5: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/5.jpg)
Layout grafici
![Page 6: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/6.jpg)
Grafica: aspetti importanti da “progettare”• 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)
![Page 7: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/7.jpg)
Tool per definire una propria palette
![Page 8: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/8.jpg)
Un tool molto utile per palette, colori, [patterns, trends], …
http://www.colourlovers.com/
![Page 9: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/9.jpg)
Tipografia: alcune linee guida per massimizzare la leggibilità • 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
• Per i menu e intestazioni:- maggiore libertà
• 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
![Page 10: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/10.jpg)
Demo:
FranchitarreAmici dei randagiGruppo SivigliaIncontri Bicocca
![Page 11: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/11.jpg)
Cose da evitare (come l’acqua santa per il diavolo…)• 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
![Page 12: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/12.jpg)
![Page 13: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/13.jpg)
![Page 14: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/14.jpg)
Cose da curare “ossessivamente”
• Immagini pesanti• Rapporto immagini dei contenuti / header
• Lo stile deve essere coerente
• Rapporto armonico contenuti/sfondo• Allineamento degli elementi visivo• Enfasi sui contenuti
• Vendere il quadro, non la cornice
![Page 15: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/15.jpg)
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)
![Page 16: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/16.jpg)
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….
![Page 17: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/17.jpg)
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….
![Page 18: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/18.jpg)
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….
![Page 19: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/19.jpg)
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….
![Page 20: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/20.jpg)
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….
![Page 21: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/21.jpg)
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….
![Page 22: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/22.jpg)
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
![Page 23: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/23.jpg)
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
![Page 24: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/24.jpg)
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
![Page 25: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/25.jpg)
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
![Page 26: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/26.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
![Page 27: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/27.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
![Page 28: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/28.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
![Page 29: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/29.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
![Page 30: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/30.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
![Page 31: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/31.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
![Page 32: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/32.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
![Page 33: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/33.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
![Page 34: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/34.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
![Page 35: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/35.jpg)
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
![Page 36: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/36.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
![Page 37: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/37.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
AFDGH
![Page 38: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/38.jpg)
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
AFDGH
![Page 39: Laboratorio internet 8: Visual design](https://reader033.vdocuments.site/reader033/viewer/2022061206/5481b387b4af9f70638b4922/html5/thumbnails/39.jpg)
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii