![]() I principi di base del web designRivista: Applicando |
|
Il web odierno è caratterizzato per lo più da siti curati, talvolta maniacalmente
nel design, ma non altrettanto nella navigazione. Allo stesso modo esistono
molti siti dotati di ottime strutture di navigazione, che però non brillano
per design. Perché accade ciò? Il problema, ancor prima che nell’approccio,
è da ricercare spesso nelle conoscenze che il web designer mette in campo
durante la creazione di un sito. Molti di questi provengono dal mondo
del design cartaceo, e quindi “riciclano” le proprie competenze; essi
mirano quasi esclusivamente all’aspetto visivo, ignorando che, come per
la stampa, anche il web ha le sue regole… I secondi, sono invece in genere
sviluppatori, che guardano più alla funzionalità, alla pulizia del codice,
e alla leggerezza delle pagine, che all’aspetto visivo. In effetti, è
assai difficile trovare persone che abbiano entrambe le competenze; a
parte casi sporadici, la maggior parte dei siti web vincenti viene realizzata
da web-agency: società emergenti che nel proprio organico possono annoverare
designer, sviluppatori, esperti di accessibilità, esperti di contenuti,
etc.
Dal mattone al bit Se pensiamo per un attimo che un sito web
è come una casa, diventa semplice capire perché è importante prima di
tutto il progetto che ne sta alla base: un’abitazione deve rispondere
normalmente a requisiti precisi, come la solidità delle fondamenta, la
robustezza ed elasticità della struttura, la bontà del tetto, l’isolamento
termico delle pareti, oltre ad essere correttamente esposta rispetto
al nord. La buona riuscita di una tale costruzione nasce dal progetto
di un architetto, che attraverso un direttore di cantiere e un’impresa
di costruzioni, è in grado di realizzare la futura abitazione del cliente.
La bozza di strutturaPer prima cosa, si deve realizzare una bozza dell’architettura di navigazione: carta e penna vanno più che bene, ma se vogliamo partire con il piede giusto, un programma di design come Freehand MX è molto più adatto: grazie ai suoi strumenti di disegno può essere molto utile nella preparazione di uno schema della navigazione. Si crea una struttura ad albero partendo da un rettangolo che rappresenta la homepage; da qui si fanno discendere i canali principali, e sotto questi i canali secondari, avendo cura di collegare attentamente tra loro tutti gli elementi. In questo modo si ha una visione immediata della struttura del sito e dei suoi contenuti, inoltre lo schema realizzato è subito utiizzabile per illustrare al nostro cliente come si intende procedere.
Creare un layout funzionaleNella preparazione del modello principale è essenziale la scelta del tipo di layout; questo è rappresentato dalla suddivisione dello spazio visivo in aree distinte, ognuna creata per un contenuto specifico. Questa divisione non è standard; nel web si trovano layout tra loro diversi, l’importante è rispettare alcune semplici regole che ne garantiscono l’efficacia. Un tipico esempio di layout prevede la divisione in tre zone: la testata, la zona contenuti e la barra di navigazione. Bisogna comunque considerare che questa divisione non è così rigida come può apparire: gli elementi grafici possono andare oltre i margini delle divisioni, “eludendo” la rigida ortogonalità del layout.
Le domande “nascoste” degli utenti La divisione del layout in tre zone potrebbe non
essere valida per tutte le tipologie di siti web; in alcuni casi è possibile
operare maggiori suddivisioni. Ciò che però è importante capire, è che
il layout deve rispondere ad alcune necessità basilari degli utenti.
Dove sono ?La prima risposta viene naturale dalla testata: è li che viene identificata la titolarità del sito, sia che si tratti di un’azienda, di un professionista, di un portale, ecc. La presenza del marchio e di un claim favoriscono la fluidità della risposta.
Cosa fanno qui?Se la prima domanda viene soddisfatta spostiamo in genere gli occhi sulla zona dei contenuti, cercando affinità con ciò che abbiamo cercato.
Dove vado?Se anche la seconda domanda viene soddisfatta, non ci resta che capire come muoverci all’interno del sito: cerchiamo la barra di navigazione. Tutto ciò avviene in un tempo infinitesimamente piccolo; ecco perché è importante strutturare attentamente il proprio layout: fare in modo che un utente rimanga su un sito è così cruciale da essere considerata come la prima necessità di tutto il progetto.
Impostare correttamente la struttura dei canali I canali vanno organizzati secondo una logica ben
precisa, e il tipo di sito che si sta realizzando è determinante nella
loro disposizione: un sito web aziendale, un sito di un professionista
o addirittura un portale tematico sono estremamente diversi tra loro
ed è necessario adattarne correttamente i contenuti alle esigenze degli
utenti.
Pagine e modelli: il grande dilemma Una volta definito il progetto del sito e l’architettura
della navigazione arriva il momento in cui si devono creare le pagine
web che compongono il sito, e con questo momento arriva anche la necessità
di fare una scelta strategica: creare pagine singole caratterizzate ognuna
da un design specifico? oppure scegliere un modello di design generale,
dal quale “partorire” tutte le pagine che comporranno il sito?
I modelli: una scelta davvero saggia Un metodo veramente efficace per la realizzazione
di un sito web è quello di creare un modello XE "creare un modello" principale (anche
detto template) che diventa il “genitore” di tutte le pagine create.
Questo rapporto di “parentela” fa si che qualunque tipo di modifica
venga applicata al modello principale, verrà automaticamente applicata
anche a tutte le pagine legate al modello. Diventa quindi estremamente
semplice, ma soprattutto veloce, modificare il layout o aggiungere
nuovi canali di navigazione, anche a siti che contengono centinaia
di pagine web. La scelta di un modello permette inoltre al web designer
di concentrarsi molto di più sull’aspetto del sito, sulla scelta dei
colori più azzeccati, sulla scelta di un layout strutturato in maniera
equilibrata, sulla coerenza dei vari elementi visivi, ecc.
Dalla teoria alla praticaDopo aver fatto un excursus sui principi base del web-design viene il momento di mettere mano alla realizzazione vera e propria del sito web. Oltre alla scelta degli strumenti software più idonei emerge subito forte la necessità di stabilire un modello progettuale e costruttivo, che dalla tipica pagina HTML “bianca” di partenza, consenta di arrivare alla realizzazione completa del sito. Un buon metodo è quello di dividere il processo di creazione in tre momenti distinti:
Per ognuna di queste fasi viene in genere utilizzato un software specifico;
se questo però si integra con gli altri programmi, il processo diventa
molto più rapido e semplice. Partendo da questo assunto, la scelta diventa
abbastanza ovvia: Macromedia (ora Adobe) che grazie allo spirito collaborativo
di software come Dreamweaver, Fireworks, Flash e Freehand, garantisce
un processo di creazione dei siti veloce e libero da problemi di incompatibilità.
Il design Il design deriva generalmente da un sapiente mix
tra il layout, ovvero la divisione delle aree di pertinenza, e la vestizione
grafica vera e propria. Saper scegliere un buon design, e poi realizzarlo,
è sicuramente un’attività molto particolare, che troppo spesso nel web
odierno viene letteralmente presa sotto gamba. I migliori web designer
dei nostri tempi sono approdati ad Internet dopo aver quasi sempre lavorato,
prima di tutto, come designer della carta stampata. Sebbene i due media
siano diametralmente opposti, e abbiano logiche e linguaggi espressivi
diversi, una cosa è comune ad entrambi: l’armonia delle forme e dei colori.
Per questo, chi ha studiato le basi dello spazio compositivo, dell’impaginazione
e degli accostamenti di colori, può traslare la propria esperienza
in modo molto efficace sul web, purchè, come già detto, si muova all’interno
del linguaggio che al web stesso compete.
Freehand MX: dalla carta al webSebbene non sia ancora realmente chiaro, dopo la recente acquisizione di Macromedia da parte di Adobe, che fine farà questo software, resta indubbiamente uno degli strumenti più adatti per la preparazione della grafica di base di un sito. Tra l’altro, la sua indole ibrida, tra la stampa ed il web, lo rende adattissimo a preparare anche delle bozze di stampa da poter sottoporre al cliente, ancor prima che svilupparle in un formato per il web. Grazie ai vari strumenti di disegno, alla possibilità di creare campiture di colore molto efficaci, alla possibilità di inserire particolari effetti raster come ombre e luci e ad un incredibile controllo delle forme, la realizzazione della grafica di un sito, non solo è molto veloce, ma può anche diventare davvero divertente.
Un po’ di Flash nel cuore di Freehand C’è una funzione in Freehand MX che è davvero utile:
questa permette di pubblicare, un’animazione Flash, con una limitata
interattività, che mostra in anteprima come funzionano i link di un sito.
L’operazione è talmente semplice da realizzare che anche chi non conosce
affatto Flash può comunque effettuarla. Si parte con la creazione di
un design di base per la homepage, popolandola con contenuti fittizzi,
come testi finti ed immagini di prova. In seguito si duplica questa pagina,
con l’intento di produrre gli altri canali del sito, modificando come
necessario contenuti e disposizione degli stessi. Si ripete quest’ultima
operazione quanto serve per realizzare le pagine web relative ai canali
principali del sito.
L’implementazione dell’interattività di base: Fireworks Quando il processo di design di un sito è terminato,
e quindi il cliente ne ha validato la vestizione grafica, viene il momento
di aggiungere interattività e funzionalità specifiche. In pratica si
prende la grafica nuda e cruda che si è appena realizzata e si aggiungono
comportamenti alle varie parti che la compongono. Il software che fa
al caso nostro è Fireworks; vero ponte di collegamento tra il mondo “inanimato”
del puro design e quello invece interattivo dell’ipertesto. In effetti,
sebbene il programma consenta egregiamente di creare da zero anche
il design, come fa Freehand, il suo vero cavallo di battaglia è da
ricercare nella capacità di attribuire comportamenti interattivi a
qualunque elemento presente nel documento. Sia che si tratti di semplici
rollover su pulsanti, oppure di menu a comparsa, o ancora di piccole
animazioni gif, Fireworks ci permette di realizzare i nostri desideri
senza dover conoscere una singola riga di codice, grazie alle semplicissime
procedure guidate presenti nel programma.
Creare un semplice pulsanteCome già detto in precedenza, non è necessaria alcuna conoscenza particolare per realizzare pulsanti e menu a comparsa: le procedure sono interamente guidate. Per esempio, per realizzare un pulsante con un semplice rollover si procede in questo modo:
Questa semplice operazione ci può già aiutare a fare una interessante
riflessione.
Esportare in HTML Quando il documento di Fireworks è stato modificato
con l’aggiunta di tutti i comportamenti necessari si può passare all’esportazione
vera e propria in HTML. Questa operazione ha una grande rilevanza; per
poter capire perché è però necessario fare un salto nel passato.
La finalizzazione del sito ed il popolamento dei contenuti: Dreamweaver Il terzo passaggio nella composizione del sito
riguarda Dreamweaver: il software principe per il web design. Dando per
scontato che si è già predefinito un sito e che sono stati impostati
correttamente tutti i percorsi alle cartelle di quest’ultimo, è arrivato
il momento di aprire il file HTML generato da Fireworks per trasformarlo
in un Modello da utilizzare in tutto il sito.
Considerazioni finali Va detto subito che il workflow proposto, con la
sequenza Freehand – Fireworks – Dreamweaver non può essere preso come
standard universale per la creazione di siti web. Uno sviluppatore “puro”,
amante della programmazione, avrebbe sicuramente da obiettare non poco
sull’esportazione automatica di Fireworks, adducendo motivi legati alla
poca pulizia e pesantezza del codice generato. L’importanza di quanto
detto però, non è da ricercare tanto nei particolari più reconditi, quali
appunto il codice, o l’ottimizzazione delle immagini, o ancora l’accessibilità
delle pagine, o altro ancora.
Prima di scappare via, dai un'occhiata alla mappa del sito... potresti scoprire che ciò che cercavi è "nascosto" in un altra pagina, o potresti trovare altre cose interessanti, affini alla tua ricerca... un clic in più potrebbe avvicinarti alla soluzione... :-) |























