9. Grafica e comunicazione
•Als PPTX, PDF herunterladen•
2 gefällt mir•943 views
Slides del corso di Laboratorio Internet del prof.R.Polillo - Università di Milano Bicocca, A.A.2010-11
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Ähnlich wie 9. Grafica e comunicazione
Ähnlich wie 9. Grafica e comunicazione (15)
Mehr von Roberto Polillo
Mehr von Roberto Polillo (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (17)
9. Grafica e comunicazione
- 1. 9. GRAFICA E COMUNICAZIONE1 Corso Laboratorio Internet – Prof. Roberto Polillo Università degli Studi di Milano Bicocca – Anno Accademico 2010-11
- 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. 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. Layout grafici: esempi R.Polillo – Ottobre 2010 4
- 5. R.Polillo – Ottobre 2010
- 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. Un sito molto utile per palette, colori, [patterns, trends], … http://www.colourlovers.com/ 7 R.Polillo – Ottobre 2010
- 8. COPASO: tool per definire una propria palette http://www.colourlovers.com/copaso/ColorPaletteSoftware R.Polillo – Ottobre 2010 8
- 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. Demo Franchitarre Amici dei randagi Gruppo Siviglia Incontri Bicocca 10 R.Polillo – Ottobre 2010
- 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. R.Polillo – Ottobre 2010
- 13. R.Polillo – Ottobre 2010
- 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. 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. 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. 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. 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. 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. 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. 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
- 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òòàò
- 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
- 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. 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.