Trend web design 2015

Post on 09-Aug-2015

77 views 1 download

Transcript of Trend web design 2015

Trend per siti web nel 2015

Come creare un sitoche i tuoi visitatori ameranno.

Chi siamo

➔ Agenzia Taurus Ancona➔ www.agenziawebancona.it➔ Sviluppo siti, SEO, gestione

social network, newsletter, SEM

➔ Lavoriamo come freelancer e come agenzia web da oltre 5 anni

Perché questa guida ti interesserà

➔ Devi creare un nuovo sito➔ Devi aggiustare un vecchio sito➔ Devi aggiornare le tue offerte➔ Devi migliorare le performance del tuo

hotel➔ Devi diffondere il tuo brand aziendale

Spesso gli albergatori trascurano l‘importanza di un sito web ben scritto e ben indicizzato. Ricordate che la grafica di un sito non è tutto!

#1 Responsive Web DesignIl contenuto del tuo sito web si DEVE adattare correttamente a tutti i dispositivi- PC- Laptop- Tablet- Smartphone

Google PENALIZZA i siti non responsive!

#2 Foto, Video e testi

I tuoi visitatori dovrebbero poter capire cosa offri in 5 secondi.

➔ Usa immagini persuasive e video „leggeri“

➔ Usa titoli corti e chiari➔ 1 o 2 frasi per descrivere il tuo

prodotto turistico

www.agenziawebancona.it

#3 Occhio al design

Le immagini a schermo intero e i video generano un messaggio più chiaro e dall‘impatto maggiore. Specialmente per i siti su Desktop, consigliamo l‘uso di immagini da 1920 px o più.➔ Immagini o video nella sezione Header➔ Colori di sfondo diversi per contenuti

diversi tra loro

Dai al tuo contenuto una „stanza in cui respirare“. Sfrutta al massimo lo spazio della tua pagina e non accorpare il messaggio in poche righe.

➔ Pianifica un solo messaggio visibile nello schermo

➔ Rimuovi le informazioni non necessarie. (sidebar)➔ Separa sempre Chi siamo, Promozioni e Home

page➔ Inserisci bottoni call to action (Prenota)

#4 Contenuti divisi in blocchi

bonobos.com

risotteriamelottinyc.com

swellspecialized.com

#5 Contenuti & Webfont

Il contenuto e il font sono il maggior fattore di successo per un sito web che si rispetti

Regole d‘oro per un contenuto efficace:➔ Font da 16px o più ➔ 11-16 parole per linea (da 55 a 80

charatteri)➔ Usa Webfont con un‘alta leggibilità e

attuali (Verdana ad esempio)

#6 One-Page Website

Usa una single page per racchiudere il messaggio in un‘unica, semplice vetrina. Spiega perché dovrebbero sceglierti in modo semplice

greenhousego.net

www.simplygum.com

getrest.co

#7 Storytelling

Fai sì che il tuo visitatore viva l‘esperienza del viaggio, già visitando il tuo sito, raccontagli una storia. Cosa stanno cercando dal tuo sito? Immaginalo e dai loro ciò che cercano.➔ Mostra l‘esperienza che vivono i turisti

nel fare l‘attività➔ Metti il consumatore/utente al centro

della storia

#8 Layout a griglia

Per i siti con tante foto consigliamo il layout a griglia.

➔ Aggiungi le descrizioni delle immagini e non scordare il tag ALT per l‘indicizzazione

➔ Separa le foto dalla home page, per non perdere chiarezza

➔ Usa dimensioni fisse per non dimenticare la simmetria

Top Left:www.newblack.me

Top Right:bauart.ch/projects/

Bottom Left:dblg.co.uk

#9 Navigazione

Il menu hamburger ormai è fondamentale. Importante che la navigazione non infici l‘usabilità del sito.

➔ Navigazione facilitata anche da cellulare

➔ Contenuto ottimizzato➔ Meno distrazioni per gli utenti

#10 Animazioni

Utilizza animazioni, grafici, video ed effetti per rendere il tuo sito attraente e attuale.

➔ Fade-In o slide-in nel caso di blog➔ Numeri e grafici➔ Effetto Hover o zoom-in per le immagini

# Nice to Have

Accresci il valore del tuo design con alcuni accorgimenti.

➔ Icon-Font (FontAwesome) per maggiori dettagli

➔ CSS3 per transizioni o elementi intelligenti

➔ Sticky menu per una miglior navigazione

Compatibilità con vecchi browser

Spesso le agenzie curano la compatibilità con browser obsoleti, come Internet Explorer 8, concentrati piuttosto sulla compatibilità con smartphone e tablet, che sono il futuro della navigazione web.Pensa poi se ha senso pianificare l‘uscita di un‘app.