9. Grafica e comunicazione

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


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


Layout grafici: esempi4



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


Un sito molto utile per palette, colori, [patterns, trends], …

http://www.colourlovers.com/ 7

http://www.colourlovers.com/


COPASO: tool per definire una propria palettehttp://www.colourlovers.com/copaso/ColorPaletteSoftware

8

http://www.colourlovers.com/copaso/ColorPaletteSoftware




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


Demo

FranchitarreAmici dei randagiGruppo SivigliaIncontri Bicocca

10


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



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



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


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


21

Gkgkjhh hkjhkjh kiuouoiu

iuoiupioupoiupo

IPOIéPOIoièièoièopii


iuoiupioupoiupo



iuoiupioupoiupo



iuoiupioupoiupo


Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo





IPOIéPOIoièiè

Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò


IPOIéPOIoièiè



IPOIéPOIoièiè



IPOIéPOIoièiè



IPOIéPOIoièiè



IPOIéPOIoièiè



IPOIéPOIoièiè



iuoiupioupoiupo



IPOIéPOIoièiè



IPOIéPOIoièiè


AFDGH


IPOIéPOIoièiè


AFDGH


iuoiupioupoiupo



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

http://www.abcsverona.it/

http://www.africa70.org/

http://www.africamission.org/

http://www.puntoapunto.org/

http://www.iahm.org/

http://www.ice.it/

http://www.icsitalia.org/

http://www.lvia.it/

http://www.nuovispazialservire.it/

http://www.aispo.org/

http://www.actionaid.it/

http://www.aifo.it/

http://www.oafi.org/

http://www.icu.it/

http://www.acra.it/

http://www.amref.it/

http://www.emergency.it/

http://www.manitese.it/

http://www.savethechildren.it/

http://www.soleterre.it/

http://www.wwf.it/

Queste slides…


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.

Education

9. Grafica e comunicazione