immagine grafica web

Immagini come icone

Il problema principale del web design rimane comunque quello di fornire degli indicatori di percorso che consentano una buona navigazione.
Spesso un'immagine è più immediata delle parole: è normale perciò, anche nella progettazione di pagine Web, il ricorso a icone che simboleggiano concetti e funzioni di vario genere.

Tuttavia la scelta dell'immagine più appropriata non è sempre immediata: ciò è dovuto al fatto che esse rappresentano in genere oggetti quotidiani, non tutti ugualmente familiari a chiunque.
Altro vantaggio delle icone è che aiutano gli ospiti internazionali, che non conoscono la lingua usata nel nostro sito.

Per fare degli esempi, le frecce avanti e indietro sono sensi comuni della navigazione da pagina a pagina.
L'icona di una matita o di una penna può collegarsi al concetto di una cartolina o di un messaggio da scrivere, un'icona di un foglio può richiamare il concetto del download o della stampa, e così via

L'uso delle immagini deve essere studiato ad hoc, per far si che non influiscano a rallentare il caricamento della pagina, ma contribuiscano ad armonizzarsi con il contenuto delle pagine stesse.
Anche le animazioni flash non devono essere troppo "invasive".

Strategie

• Usare il logo e il nome del sito in tutte le pagine del sito in una posizione strategica, e collegarli tramite link alla homepage del sito stesso.
• Progettando il sito web di un'azienda, fare in modo che la grafica usata sia coerente con l'immagine coordinata dell'azienda stessa; quando questa operazione non è possibile cercare almeno che il sito sia caratterizzato da una certa coerenza grafica.
• I simboli e le funzioni usati devono essere riconoscibili e identificabili in tutto il sito e non devono cambiare da una pagina all'altra.
• Quando il sito diventa molto grande e comunque quando presenta un numero di pagine superiore alle 100, è bene usare una funzione di ricerca.
• Usare font standard, perché non è detto che il computer dell' utente possieda tutti i font.
  La soluzione per la migliore usabilità è indicare nel codice html i font in ordine di preferenza, da quello che si vorrebbe a quello che si è "disposti ad accettare".

Diversi tipi di font standard, raggruppati per famiglie:

• Times New Roman, Times, Georgia, Serif
• Courier New, Courier, Mono
• Verdana, Arial, Helvetica, Geneva, Sans-serif

Dagli studi sulla leggibilità dei font risulta che sul monitor essa è diversa dalla leggibilità sulla carta.
Mentre sulla carta i caratteri più leggibili sono quelli con le grazie (Serif), sul monitor la lettura è più agevolata dai caratteri Sans serif. In modo particolare i caratteri in assoluto più leggibili sono il Verdana e il Trebuchet.

Se proprio è necesario usare un font particolare, allora è bene trasformare il testo in immagine: solo in questo modo si puòessere sicuri che tutti lo visualizzeranno così come è stato progettato.
Ovviamente le immagini "pesano" di più in termini di caricamento della pagina, per cui è meglio limitare l'uso di questo stratagemma solo ai titoli, ai bottoni, o per qualche scritta di rilievo.

Torna su

Dimensioni di testo e immagini

• Le dimensioni del testo vanno scelte prendendo in considerazione la sua visualizzazione.
  Non tutti usano un pc con Windows, quindi non tutti i font appaiono ai visitatori con la stessa dimensione.
  L'aspetto di un font Verdana di dimensione 10 su PC è uguale all'aspetto di un font Verdana ma di dimensione 12 su Macintosh. Questo dipende dal fatto che un PC definisce la risoluzione a 96 punti per pollice, mentre tutti gli altri sistemi operativi usano la risoluzione standard a 72 punti per pollice.
• Non sottovalutare l'importanza che assumono, nell'ambito della schermata i titoli, sottotitoli e trafiletti.
  Ogni testo che abbia importanza o rilievo deve far capire a colpo d'occhio il senso di tutta la sezione a cui fa riferimento.
• Se è necessario inserire delle immagini molto grandi è utile creare dei bottoni o delle icone, che possono essere resi sotto forma di miniatura dell'immagine stessa, e che richiamano lo zoom dell'immagine.
• Impostare sempre immagini con risoluzione a 72 dpi, in modo tale da permettere a tutti i tipi di computer di poter visualizzare correttamente le immagini.
• Nel ridimensionare un'immagine, è bene ricordare che nel passaggio da un'alta risoluzione a una bassa risoluzione non c'è sostanziale perdita di qualità, ma da una più bassa a una più alta risoluzione il rischio è di perdere qualità dell'immagine.
• Qualsiasi sia la soluzione adottata definire sempre le dimensioni dell'immagine nel codice, in questo modo si facilita il browser a strutturare la pagina accelerando il caricamento.
• Non si deve dimenticare di usare l'ALT TEXT, cioè il testo alternativo: specifica un testo alternativo da visualizzare al posto dell'immagine nei browser che non supportano la modalità grafica oppure sono configurati per lo scaricamento manuale delle immagini.
  Per gli utenti non vedenti che utilizzano sintetizzatori vocali con browser in modalità testo, questo testo viene riprodotto ad alto volume. In alcuni browser, questo testo appare anche quando il puntatore si trova sopra l'immagine.
  Questa funzione è inoltre comoda perché alcuni motori di ricerca usano questo strumento per catalogare le pagine, usando questo testo come le parole chiave.