IERI
Anni 60
Anni 70
Anni 80
Anni 90
OGGI
STORIA DELLA COMUNICAZIONE VISIVA
DIGITAL OPERA
WEB STYLE
ALERT !
Problem determination
Biografia
La grafica di un sito si caratterizza per la scelta dei caratteri, dei colori, del tipo di grafica e delle immagini.
Es:
Grafica Svizzera
- Font Helvetica
- Colori bianco/nero/rosso
- Gabbia simmetrica e modulare
- Impaginazione
semplice con grandi spazi bianchi
- foto realistica e scontornata
La Grafica deve avere uno stile unitario e deve ricorre in tutte le pagine.
Per stile si intende l'insieme visivo ed estetico (font, grafica, immagini e colori) che mostri delle relazioni tra le parti.
A seconda dell'argomento si deve ispirare ad uno stile legato al prodotto, alle epoche, ai costumi e mode.
Importante che lo stile dell'interfaccia sia orientata verso l'urente (User Oriented)
Ispirarsi ad un modello o ad un autore che si avvicina ai nostri contenuti.
Citare la fonte (autore o stile) è utile a rafforzare la nostra scelta di comunicazione visiva.
La fonte d'ispirazione deve essere colta e culturalmente autorevole (segno forte).
I colori delle font devono rispettare la leggibilità figura sfondo (vedi tabella)
Es negativo
Consorzio
Consorzio
|
Consorzio |
Es positivo
Consorzio
Consorzio
|
Consorzio |
1. Utilizza una font e i suoi stili (chiaro,normal, bold)
Font di sistema consigliate
Arial
Verdana
Times New Roman
| Rapporto tra corpi del carattere e dimensione (secondo FrontPage) |
|
| dimensione | corpo |
| 1 | 8 px |
| 2 Didascalie | 10 px |
| 3 Testo | 12 px |
| 4 Sommari | 14 px |
| 5 Titoli | 18 px |
| 6 Head | 24 px |
| 7 | 36 px |
2. Utilizza un colore e le sue sfumature (colori affini)
Esempio
3. Colori Complementari
Esempio
La grafica deve essere ottimizzata mantenendo una buona qualità. Per il formato Gif deve essere di 12k; per il formato jpg, compresso, quando l'immagine è aperta può avere un numero di K più alto.
La grafica deve essere semplice e suggestiva, chiara e logica per l'utente. Distinguere la grafica dei menu dalla grafica informativa. Lasciare dei spazi bianchi per dare respiro alla grafica e al testo, il tutto con equilibrio ottico.
Ogni immagine deve contenere il tag <Alt> per accessibile hai non vedenti attraverso gli Screen reader che leggono il testo alternativo all'immagine (alt)
Esempio: <img src="zurigo.gif" width="396" height="223" border="1" alt="Interfaccia grafica svizzera"> (immagine ABC)
pluritematico 3/4 colonne.
La gabbia, le font, i colori e l'impianto grafico della Home Page sono il modello per tutti gli altri livelli del sito
La home page non deve essere scrollabile. Le misura devono essere 760x440 pix per rispettare il monotor più piccolo di17" pollici con risoluzione dello schermo 800x600 pix
Inserire le informazioni più importanti nella parte superiore sinistra con logo-marchio e ragione sociale; il logo deve contenere il link assoluto della HP del sito.
In alto Titoli e link principali
Riportare in ogni pagina nelle stesse posizioni loghi, titoli, link