Visual Web Design
Lo scopo comune di ogni grafica, è quello di comunicare, di esprimere un messaggio ad un target più o
meno definito. Nel contesto progettuale più specifico del sito, la grafica Web dovrebbe sempre e
comunque assolvere alcune funzioni di base:
• Garantire la continuità dell’immagine. La grafica Web non deve essere a se stante ma riferirsi a un
progetto di comunicazione integrata online-offline chiaramente identificabile. Questo è particolarmente
vero per i siti Web aziendali o comunque professionali per i quali si può parlare d’immagine coordinata. È
evidente che per i siti personali c’è una libertà maggiore.
• Essere parte integrante del contenuto. Le scelte grafiche non devono essere relegate a un carattere
puramente descrittivo, ma svolgere anche funzioni di contenuto e di navigazione.
• Rendere più usabile il sito. La grafica non deve essere un elemento di disturbo, ma un elemento di
semplificazione e facilitazione nell’uso del sito
La più importante funzione della grafica, comunque, rimane quella della coerenza informativa.
Immagine coordinata: La grafica deve essere sviluppata nel rispetto delle scelte compiute per la
comunicazione su altri media.
Rapporto con il contenuto del sito: Pagine professionali richiedono testo e grafica dello stesso tipo, pagine
ironiche avranno maggiore libertà espressiva e meno vincoli, un sito di comunicazione vorrà
La grafica a sé: le scelte devono andare tutte nella stessa direzione e offrire una visione unitaria della
comunicazione.
Nella maggior parte dei casi, quando parliamo di “grafica su carta” o scopo principale di tali manifesti è
infatti quello di mettere in evidenza il marchio di un’azienda. Nel web tale scopo viene a mancare in quanto
la necessità primaria delle aziende è quella di fornire informazioni circa i propri prodotti e servizi, e di farlo
nel modo più esaustivo possibile, così che i potenziali clienti decidano di acquistare presso l’azienda.
Un Wireframe è una bozza in bianco e nero del lavoro che abbiamo intenzione di svolgere: non sarà
navigabile poiché consiste in un’immagine statica ed avrà la funzione di delineare la giusta posizione di ogni
elemento all’interno di una pagina web. Il wireframe ha la funzione di:
• Comunicare l’idea iniziale del progetto;
• Focalizzare l’attenzione solo su architettura e contenuti, senza le “distrazioni” che possono
provenire da “oggetti” grafici;
• Comunicare cosa si vedrà;
• Essere la base del prototipo
I prototypes sono il mezzo più potente nella fase di testing e di documentazione. Questo genere di bozza,
infatti, rappresenta un vero e proprio prototipo funzionante del sito, il quale verrà realizzato con i codici
HTML e CSS per permettere al cliente di testare con mano l’esperienza di navigazione. Le pagine proposte
saranno anche graficizzate in maniera molto simile al sito finale ma sarà pur sempre un prototipo, quindi
sarà composto da pochi contenuti, il minimo indispensabile per esporre in maniera esauriente il progetto.
Un Mockup è una rappresentazione statica del progetto finale dalla qualità medio-alta: di solito è un
progetto grafico molto dettagliato, a volte coincide con il progetto finale vero e proprio, così come verrà
presentato a lavoro finito.
Anatomia di una pagina web
Contaneir :La presenza di questo contenitore garantisce la possibilità di inserire correttamente il contenuto
nella pagina.
Logo: Il blocco logo che compare nel sito web deve contenere il logo o il nome dell’azienda e deve trovarsi
nella parte superiore di ogni pagina del sito
Navigation :Il sistema di navigazione deve essere semplice da individuare e da utilizzare. Gli utenti sono
abituati a trovarlo all’inizio della pagina. Potete mettere a punto menu’ verticali o orizzontali, ma in
entrambi i casi gli strumenti di navigazione devono essere il più vicino possibile all’inizio del layout.
Content
Il contenuto e’ il re della pagina web. Chi non trova quello che cerca passa ad un’altro sito. Il blocco del
contenuto deve essere sempre nella parte centrale del design del sito, in modo che chi visita le pagine
possa individuare le informazioni che sta cercando.
Footer
Ben visibile in fondo pagina, questo blocco contiene i dati del copyright, i modi per i contatti e le altre
informazioni legali.
Whitespace
Lo spazio bianco deve dare respiro al design della pagina accompagnando l’occhio dell’utente che visualizza
oltre a creare equilibrio e uniformità.
In un layout fisso, il contenitore principale ha la larghezza dimensionata in pixels. I layout a larghezza
variabile sono anche detti fluidi o liquidi e si progettano in base a percentuali. I layout a larghezza variabile
si adattano alla maggior parte delle risoluzioni e dei dispositivi. I layout dinamici sono la soluzione
alternativa tra fisso e fluido. Il concetto di fondo di questo tipo di layout tiene conto del fatto che il Web è
sempre più mobile e che per questo motivo le dimensioni delle finestre dei browser sono sempre meno
uniformi. Nasce quindi l’esigenza di definire layout fluidi che si adattano a larghezze diverse. La sezione
aurea o rapporto aureo, indica il rapporto fra due lunghezze disuguali, delle quali la maggiore è medio
proporzionale tra la minore e la somma delle due. un altro principio interessante, aiutarci a dare un
equilibrio visivo alle pagine web, è quello della cosiddetta “regola dei terzi”, che consiste nella suddivisione
di un’immagine – o comunque di un progetto grafico – in terzi, attraverso un reticolo definito da quattro
linee, due verticali e due orizzontali. i quattro punti di intersezione che la delimitano sono detti punti focali
(o fuochi). Quest’ultimi rappresentano le zone visive in cui l’occhio, dopo essere stato attratto verso il
centro dell’immagine, si concentra maggiormente. Un altro interessante metodo per posizionare in modo
semplice ed efficace gli elementi all’interno di un layout riguarda l’utilizzo delle griglie é praticamente
possibile creare elementi di dimensioni proporzionate e progettare un layout simmetrico e ordinato. Il
corretto uso dello spazio bianco consente
due cose:
• E’ possibile guidare l'occhio del visitatore del sito direttamente al contenuto chiave che si desidera che si
veda per primo;
• Si può indirizzare l'occhio del visitatore a ciò che si vuole far vedere dopo il contenuto chiave, e così via,
conducendoli alla prossima azione che si desidera farli intraprendere.
Possiamo classificare gli spazi bianchi in due tipologie ben distinte: i macro spazi e i micro spazi.
I macro spazi sono gli spazi bianchi che si vengono a creare tra gli elementi principali del progetto grafico:
nel nostro layout, per esempio, sono macro spazi lo spazio tra il contenuto della pagina e la sidebar e lo
spazio vuoto che si viene a creare prima del footer.
Come suggerisce il nome stesso, con “microspazi” ci riferiamo a quelle piccole spaziature che possiamo
trovare, ad esempio, tra i titoli, i paragrafi, le parole e le singole lettere che compongono quest’ultime.
Utilizzando in modo efficace gli spazi bianchi del nostro layout:
• E’ possibile valorizzare e mettere in risalto determinati elementi della pagina, e dare così enfasi ai
contenuti principali;
• Si migliora la leggibilità dei testi, in modo che la pagina appaia visivamente più ordinata, anche da un
punto di vista prettamente strutturale o gerarchico;
• La struttura del layout e dei suoi contenuti è più agevole e rilassante, di conseguenza per l’utente sarà più
semplice assorbire i contenuti in modo semplice e spontaneo.
• Si evita la sensazione di “sovraccarico” e di confusione della pagina, con il risultato di una pagina
armoniosa ed esteticamente gradevole.
La lettura dei siti web tramite computer è differente dalla lettura su carta. La lettura su schermo è più
faticosa e lenta perché si legge in modo discontinuo a colpire l’occhio sono soprattutto titoli, sottotitoli
immagini e colori; e sono proprio questi elementi che indirizzano la lettura.
SCHEMA COMPLEMENTALE O/ CONTRASTANTE
SCHEMA ACROMATICO/MONOCROMATICO/SCHEMA DI COLORE.
Fin dagli inizi la tipografia sul web ha manifestato diversi limiti rispetto a quella riservata alla grafica
tradizionale. La tipografia applicata al web design è adesso una vera e propria arte che consente ai web
designer una libertà d’azione particolarmente ampia. In pochi anni la mole di font disponibili è cresciuta in
modo esponenziale, e ciò ha reso necessaria la classificazione degli stessi in “famiglie”, sulla base delle loro
caratteristiche estetiche. Le principali categorie di font sono:
• Font con grazie (o “serif”);
• Font senza grazie (“sans-serif”);
• Font monospazio
• Font calligrafici.
• Font decorativi;
Generalmente i font sono proporzionali, ovvero ogni carattere occupa uno spazio varabile, sulla base della
larghezza del carattere stesso. Il contrasto di colore è un modo comune per distinguere tra navigazione,
intestazioni, link e corpo del testo. Si può anche usare del colore dissolto per indicare che qualcosa è
disabilitato o non disponibile. Alcune volte non c’è bisogno di rendere qualcosa più grande per catturare
meglio l’attenzione, basta creare enfasi usando colori più luminosi, come ad esempio il rosso. Lo spazio
gioca la parte più importante per mantenere il flusso nel design. Un buon utilizzo dello spazio comunicherà
al lettore dove iniziare, quando fare pausa, dove finisce, e cosa fare dopo. Ci sono vari modi per creare
spazio: spazio tra i paragrafi, spazio tra i caratteri delle parole, l’interlinea (spazio tra le righe) e
indentazione.
