Web Design  »  Guide  »  Guida Web Design 

Gli aspetti visuali e l'interfaccia grafica del sito costituiscono il punto di contatto tra utente e brand del cliente. Con il visual design devi comunicare in modo efficace le informazioni offerte da sito attraverso una veste grafica adatta e gradevole, ma contemporaneamente devi rispettare i vincoli posti dalle tecnologie e dal budget, rispettando i tempi previsti dalla pianificazione.

Adotta sempre una grafica "leggera" in modo che il navigatore non sia disturbato nella ricerca delle informazioni che le servono e soprattutto fai in modo che l'aspetto grafico arricchisca di contenuto il sito stesso. Non dimenticare che c'è un'enorme differenza di efficacia tra una grafica d'effetto, anche se semplice e una grafica monotona e scontata.

Dopo queste considerazioni avrai capito che l'uso delle immagini deve essere studiato ad hoc, per far si che non influiscano a rallentare il caricamento della pagina, ma contribuiscano ad esaltare e armonizzarsi con il contenuto delle pagine stesse.

Anche le animazioni non devono essere troppo "invasive". Purtroppo molti web designer non sanno trattenersi dall'usare gli innumerevoli effetti speciali che offrono i vari tipi di software. Corri il rischio, se non ponderi bene le tue scelte, di utilizzare una grafica ridondante e conflittuale, che non contribuisce al raggiungimento degli obiettivi che ti poni.

La cosa migliore che puoi fare per compiere i tuoi primi passi nel web design è GUARDARTI INTORNO. Per capire quali sono gli standard a cui attenerti per realizzare una buona grafica basta studiare i 20 - 30 siti più visitati in Internet e osservare (meglio ancora studiare) come sono stati realizzati. Se troviamo delle caratteristiche o degli elementi comuni nel 90% dei siti che analizziamo puoi ritenere questi elementi degli standard di fatto. Considera sempre che gli utenti arriveranno al tuo sito dopo averne visitati altri e avendo imparato a utilizzare strumenti di navigazione e funzioni visive che gli sono oramai familiari. Sfrutta quindi la cultura che il tuo utente ha maturato navigando e pur stupendolo, non dimenticare che alcune consuetudini della Rete (pensa per esempio al posizionamento del marchio in homepage in alto a sinistra) possono essere funzionali per comunicare meglio.

Per non sbagliare

• Usa il logo e il nome del sito in tutte le pagine del sito in una posizione strategica, e collegali tramite link alla homepage del sito stesso.
• Se stai progettando il sito web di un'azienda, fai in modo che la grafica che stai usando sia coerente con l'immagine coordinata dell'azienda stessa, in modo tale che l'immagine dell'azienda sia riportata coerentemente anche sul web. Quando questa operazione non è possibile perché l'azienda non è dotata di un'immagine coordinata, fai si che almeno il sito sia caratterizzato da una certa coerenza grafica.
• I simboli e le funzioni che usi devono essere riconoscibili e identificabili in tutto il sito e non devono cambiare da una pagina all'altra.
• Quando il tuo sito diventa molto grande e comunque quando presenta un numero di pagine superiore alle 100, è bene usare una funzione di ricerca.
• Usa dei font standard, perché non tutte le macchine hanno installati tutti i font. Potresti incappare in un utente con un PC appena "sballato" dalla confezione con una dozzina di font preinstallati. La soluzione è indicare nel codice html i font in ordine di preferenza, da quello che vorresti a quello che sei "disposto ad accettare".

Hai a disposizione diversi tipi di carattere, raggruppati per famiglie:

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

Ricorda che dagli studi di usabilità fatti, la leggibilità dei caratteri sul monitor è 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 poi proprio non puoi fare a meno di usare i caratteri standard, allora trasforma il testo in immagine: solo in questo modo puoi essere sicuro che tutti lo visualizzeranno così come lo hai progettato. Ovviamente devi sempre ricordarti che le immagini pesano in termini di caricamento della pagina, per cui cerca di limitare l'uso di questo stratagemma solo ai titoli, ai bottoni, o per qualche scritta di rilievo.

• Scegli le dimensioni del testo prendendo in considerazione la sua visualizzazione. Come abbiamo già visto 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. Quindi non far apparire le scritte in dimensioni corrette sui PC e illeggibilmente su ogni altro computer.
• Puoi arricchire graficamente il sito anche usando i font solo standard. Ultimamente sta diventando abitudine diffusa (soprattutto nei siti legati al web design) usare coppie di sue punti (::) e i segni di maggiore e minore o parentesi uncinate (><) come elementi grafici decorativi, soprattutto nei titoli delle pagine.
• Non sottovalutare l'importanza che assumono, nell'ambito della schermata i titoli, abstract 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. In tal modo riuscirai a sfruttare lo "scanning" del lettore a tuo favore.
• Se devi 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.
• Non fare un uso smodato della tecnologia, a meno che il sito non lo richieda. Piuttosto fa' in modo che la grafica e i contenuti multimediali aiutino a far apprezzare all'utente i contenuti del sito.
• Cura la navigazione e il navigatore, in modo che l'utente riesca sin dalla prima visita a raggiungere le informazione di cui ha bisogno.

Altri articoli

Altre guide

Altre newsletter