1. 6 Step per un Sito Funzionale: 3. Web Design e Layout |
Formazione Turismo
http://www.formaz ioneturismo.com/in- evidenz a/6- step- per- un- sito- funz ionale- 3- web- design- e- layout March 6, 2013
Altro appuntamento della Rubrica “Turismo 2.0 Navigando si Impara”, coordinate e linee guida
per districarsi nel mondo del Web 2.0, Muse Comunicazione®.
Dopo l’analisi dei Target e degli Obiettivi, la raccolta delle informazioni riguardanti la tua
comunicazione, l’organizzazione del lavoro progettuale, s’inizia a disegnare la vest e graf ica
del sit o web per il t uo Hot el.
Tutti in Carrozza… Partiamo con il Web Design
Siamo finalmente giunti alla terza fase del nostro percorso in 6 Step: vengono sintetizzati tutti
gli elementi raccolti e si iniziano le bozze grafiche per il tuo website.
Ecco ancora una volta i 6 passi per la creazione di un sito web di successo: evidenziata la
“puntata” odierna e linkati gli appuntamenti precedenti, per chi si fosse… distratto.
1. Analisi dei Dati
2. Progetto del Website
3. Web Design e Layout
4. Content is the king: l’importanza dei Contenuti
5. Promuovere il Website
6. Social Media Marketing
Estetica vs. Utilità? Il Web Design per il tuo Sito
Nelle puntate precedenti, abbiamo evidenziato:
• Come si raccolgono e si leggono/elaborano i dati
• Da Chi è composto lo staff che segue il tuo progetto
• Quali sono gli obiettivi dell’Analisi dei Dat i
• Che Cosa viene usato per raccogliere le info (l’Intervista)
• Quando si comincia a lavorare sull’Archit et t ura dei Cont enut i o dell’Inf ormazione
• Quanto sia importante la Mappa del Sit o
• Che differenza c’è tra Target e Tipologia di Ut ent e
Dopo questa fase analitico-progettuale, il tuo Staff di specialisti inizia a creare.
In modo parallelo, ossia contemporaneo e allineato, crea grafica, strategie marketing e
contenuti.
Uno degli elementi determinanti è il Web Design, mix tra arte e scienza della comunicazione
visuale, dedicato:
• Alla creazione della struttura visuale
• All’impostazione del Layout, o impaginazione degli elementi
• All’ideazione di colori, forme, elementi grafici e/o illustrati
• Alla scelta di elementi e risorse, quali immagini, video, font,… e alla loro armoniosa inclusione
nel Visual Design
• Alla cura della formattazione dei contenuti e dei titoli e sottotitoli, con una scelta accurata di
Font, dimensione dei caratteri, scelta di Bold o Italic, scelta di elenchi puntati o numerati, spazi
e paragrafi,…

2. La bussola che il tuo staff, ma soprattutto il web designer, non deve perdere mai è l’Obiet t ivo
di Usabilit à ed Ut ilit à che la grafica deve rivestire per il tuo utente.
Il risultato auspicabile è un equilibrio tra estetica e comunicazione, che si ottiene con un
lavoro di squadra più che un lavoro a catena di montaggio, tra web designer, project, SEO
specialist e il copywriter.
Il web design deve offrire:
1. Una soluzione gradevole
2. Una proposta attuale
3. Un risultato gradito dal committente (in linea di continuità con la tua Immagine, con i principi di
comunicazione integrata, ma non con i tuoi “capricci estetici”)
4. Un risultato, soprattutto, funzionale al processo cognit ivo dell’ut ent e e al suo Modello
Ment ale
N.B. Il tuo utente è in centro alla scena: ha lo scettro del comando del tuo sito web, con il mouse
in mano, sceglie, decide, compra. E non c’è vezzo ed effetto speciale che tenga: sceglie te se
rispondi alle sue esigenze
Web Design: 6 Punti Chiave nella Creazione del tuo Sito
La creazione del website parte dal disegno dell’interfaccia che utilizzerà il tuo lettore, che devi
disegnare intorno a lui.
Ecco 6 Post-it che devi sempre tenere incollati sopra la tua scrivania.
1. Creo la Graf ica come l’Ut ent e Pensa
Devi creare una grafica, con relativo Layout, che siano graditi, percepiti come accoglienti, sentiti
come utili e soddisfacenti. Il sito è la risposta rassicurante alle aspet t at ive del t uo let t ore. Se
hai fatto un buon progetto, il tuo lettore equivale al tuo target e ora lo devi mettere a suo agio
e farlo convertire.
Ricorda che una buona graf ica è ut ile anche a t e, ma soprat t ut t o al t uo Business!
2. Creo la Graf ica come l’Ut ent e Legge
Grafica e Layout devono tenere conto del sist ema di let t ura dell’ut ent e, che sul web si
muove sempre dall’alto verso basso, da sinistra verso destra, ma con modalità più rapida, più
intuitiva e non legge, ma scansiona (guarda i titoli, i sottotitoli, si sofferma su box, grafiche,
immagini, bottoni,.. e legge solo se trova ciò che gli occorre)
3. Creo la Graf ica come l’Ut ent e Gradisce
L’utente gradisce qualit à, semplicit à, af f idabilit à, condivisibilit à, immediat ezza.
Ha fretta e ha le idee chiare, non ammette perdite di tempo e “prese in giro”.
Ama anche la gratificazione estetica e i segni che possano stuzzicare la sua fantasia.
Dobbiamo dargli ciò che vuole e ciò che si aspetta, dopo averci trovato su Google e sui Motori
di Ricerca, anche attraverso web design e layout.
4. Creo la Graf ica come l’Ut ent e si Muove
Questo punto si collega a come l’utente legge. Ci sono studi che si soffermano sui f lussi di
let t ura dell’uomo, che ha una sequenza standard nella lettura di una pagina, per esempio di un
sito web.

3. Ci sono posizioni e dimensioni degli oggetti, sui quali il lettore si sofferma di più, con una
maggiore concentrazione/attenzione, con un ordine di priorità temporale…
Il Web Designer deve conoscere molto bene queste dinamiche.
5. Creo la Graf ica come l’Ut ent e
Cont rolla
Rispetta sempre il fatto che l’ut ent e
vuole il cont rollo del percorso di
navigazione, percependo che è
guidato da lui e dai suoi
bisogni/decisioni.
L’utente predilige:
• Tornare indietro con la funzione
“back”
• Avere sempre sott’occhio le macro-
aree e il menu di navigazione
• Poter tornare all’Home Page
Detesta l’apertura di pop–up,
soprattutto se non richiesti,
animazioni e intro non desiderate, musica ed altre risorse che partono senza il suo
esplicito intervento!
6. Creo la Graf ica come all’Ut ent e Piace
Il tuo lettore ama trovare una risorsa essenziale e chiara, libera degli eccessi che caratterizzano
il resto della comunicazione off line e che non gradisce, sceglie la semplicità, odia le barriere,
costituite anche dalla ridondanza, dalla sovrapposizione, dalla ripetizione inutile.
Ama la comunicazione di t endenza, non perché sia “cool”, ma perché è in linea con le sue
attese, gli dona sicurezza e dà all’azienda, di cui sta leggendo, un’aura di attualità, attenzione
al Brand e all’innovazione e amore per la customer care che non ha pari.
Lo Strumento Numero 1: La Palette dei Colori
Alla luce di tutte le informazioni raccolte ed analizzate, della tua comunicazione, della tipologia
del tuo business, della location in cui sei, della geo-localizzazione, del tuo target e delle sue
aspettative e reazioni emozionali, del layout del tuo hotel, del tipo di Core Business e Business
complementari, dell’analisi dei tuoi competitor, si realizza il primo strumento: la Palet t e dei
Colori.
Presenta una scelta di diverse soluzioni cromatiche con l’obiettivo di proporti differenti percorsi
comunicativi.
Eccoti un esempio di un Hot el t oscano. (clicca sull’immagine o il link
per guardarla ingrandita)
Approvata la palette colori, si passa al passo successivo: la Proposta del
Layout, con lo strumento Wireframe.
N.B. E’ auspicabile che ti venga anche suggerita una Mood Board,
ossia una selezione di immagini e una sorta di collage di soluzioni, che
faccia comprendere all’Hotel come si vuole procedere a livello di
suggestioni, emozioni, percorsi cognitivi e quindi grafica!

4. Il Wireframe: lo Scheletro del tuo Sito
Il Wireframe è uno schema che raffigura la disposizione di Logo, titoli, immagini, box, testi, titoli,
sottotitoli, paragrafi, all’interno del tuo sito web. Generalmente è realizzato per l’Homepage e
per le Pagine interne principali. Molto utile nel visualizzare come apparirà il sito e nel testare le
differenti scelte stilistiche e creative proposte.
Il Mockup: con le Bozze il tuo Sito prende Forma
Compreso e approvato il Wireframe, si passa alla realizzazione delle Bozze, o mockup grafici.
Approvato il Mockup, si inizia con lo sviluppo dei Template/Pagine principali del sito web, con
l’intervento del web designer e del programmatore.
Il tuo sito sta crescendo, dettaglio dopo dettaglio, anche se la strada è ancora lunga per la
pubblicazione on-line.
Cosa Manca alla Pubblicazione On–line del tuo Website?
Terminata la creazione delle pagine, sarà attivata e personalizzata la tua soluzione di CMS
(Content Management System) per la gestione dei contenuti dinamici e allineati i vari
“gestionali”, quali ad esempio il sistema di Booking On-line.
Poi si passerà all’inseriment o dei cont enut i t est uali (che nel frattempo il tuo copywriter ha
ideato in sinergia con web designer e specialista SEO) e delle altre risorse (es: immagini
fotografiche, realizzate dal fotografo e post-prodotte oppure video, girati, montati, post-
prodotti, ottimizzati per il web…). E non dimentichiamo la gestione di un sito multilingua.
Quando tutto è pronto, una squadra di editor, si preoccupa dell’edit ing e il t est ing f inale di
tutto il sito, che ovviamente dovrà funzionare su diversi monitor, browser (Internet Explorer,
Chrome, Firefox, Safari…).
Considerazioni Conclusive sul Web Design
In realtà ogni staff ha il suo metodo e/o strategie e qui ti abbiamo portato la nostra personale
esperienza. Il web design è soltanto uno dei pilastri principali sui quali poggia l’efficacia e il
successo del tuo sito web.
• Il percorso per creare il tuo website è stato totalmente diverso?
• Hai suggerimenti da darci per migliorare la relazione con i nostri “committenti”?
• Sei stupito da quanto lavoro e da quanto tempo ci voglia per creare un ottimo Website?
Lascia un commento e racconta la tua esperienza in merito, ti aspettiamo!
Nicoletta Polliotto Muse Comunicazione ® è una Web Media Agency specializzata in analisi,
pianificazione e realizzazione di progetti di promozione on-line per il settore Hotellerie e le
PMI in genere. Puoi contattarci a info@musecomunicazione.it