0

Un’altro web design è possibile

Scritto per Dorotea il mar 21, 2009 in Web Design

Argomento della settimana è il web design. La nostra insegnante darà alcuni utili consigli su come approcciare il tema della grafica web. Quali sono i primi passi da fare, gli errori da non fare e un po’ di tracce da seguire…..

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.

Troppo spesso capita di visitare siti in cui c’è un abuso di animazioni flash, magari in pagine dove continue apparizioni e movimenti di immagine disturbano la lettura di un testo o la compilazione di un form.

Il web designer deve tenere sempre presente che un sito web non è un varietà televisivo: abbondare in effetti spettacolari rende meno diretto e fruibile il contenuto del sito.

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.

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.

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.

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.

Si consiglia di dare un’occhiata al sito http://www.piepmatzel.de/, dove troviamo è composto da uno splendido mosaico di anteprime del meglio del meglio tra i siti web. Ottimo per trarre qualche ispirazione per cimentarsi in questa attività, che già alcuni considerano una forma d’arte a tutti gli effetti

best-web20-web-design

Tags: , , ,

 

 

 

 

Creative Commons License Questo blog è tutelato con la licenza di Creative Commons

Copyright © 2010 Sole Costa Studio All rights reserved. Theme by Laptop Geek modified by La pequena Chouns.