9. grafica e comunicazione
DESCRIPTION
Slides del corso di Laboratorio Internet del prof.R.Polillo - Università di Milano Bicocca, A.A.2010-11TRANSCRIPT
9. GRAFICA E COMUNICAZIONE1
Corso Laboratorio Internet – Prof. Roberto Polillo
Università degli Studi di Milano Bicocca – Anno Accademico 2010-11
R.Polillo – Ottobre 2010
• 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
Fase 4: Visual design2
R.Polillo – Ottobre 2010
documentodei requisiti
gabbie visive
Progettazione layout grafici
Personaliz-zazione dei temi
Test e approvazione
Prototipo di comunicazione
prototipodi navigazione
mappa del sito
layoutgrafici
Temi graficidisponibili
Inserimento immagini di layout
Visual design: attività3
R.Polillo – Ottobre 2010
Layout grafici: esempi4
R.Polillo – Ottobre 2010
R.Polillo – Ottobre 2010
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
Un sito molto utile per palette, colori, [patterns, trends], …
http://www.colourlovers.com/ 7
R.Polillo – Ottobre 2010
COPASO: tool per definire una propria palettehttp://www.colourlovers.com/copaso/ColorPaletteSoftware
8
R.Polillo – Ottobre 2010
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
Demo
FranchitarreAmici dei randagiGruppo SivigliaIncontri Bicocca
10
R.Polillo – Ottobre 2010
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
R.Polillo – Ottobre 2010
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
R.Polillo – Ottobre 2010
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
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
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
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….
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
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
AFDGH
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
AFDGH
Gkgkjhh hkjhkjh kiuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo – Ottobre 2010
Esempi non profit da discutere
Siti statici:www.abcsverona.itwww.africa70.orgwww.africamission.orgwww.puntoapunto.orgwww.iahm.orgwww.ice.itwww.icsitalia.orgwww.lvia.itwww.nuovispazialservire.it
Siti interattivi:www.aispo.orgwww.actionaid.itwww.aifo.itwww.oafi.orgwww.icu.it
Siti sociali:www.acra.itwww.amref.itwww.emergency.itwww.manitese.itwww.savethechildren.itwww.soleterre.itwww.wwf.it
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.