Trend web design 2015

24
Trend per siti web nel 2015 Come creare un sito che i tuoi visitatori ameranno.

Transcript of Trend web design 2015

Page 1: Trend web design 2015

Trend per siti web nel 2015

Come creare un sitoche i tuoi visitatori ameranno.

Page 2: Trend web design 2015

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

Page 3: Trend web design 2015

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

Page 4: Trend web design 2015

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

Page 5: Trend web design 2015

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

Page 6: Trend web design 2015

Google PENALIZZA i siti non responsive!

Page 7: Trend web design 2015

#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

Page 8: Trend web design 2015
Page 9: Trend web design 2015

www.agenziawebancona.it

Page 10: Trend web design 2015

#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

Page 11: Trend web design 2015

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

Page 12: Trend web design 2015

bonobos.com

risotteriamelottinyc.com

swellspecialized.com

Page 13: Trend web design 2015

#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)

Page 14: Trend web design 2015

#6 One-Page Website

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

Page 15: Trend web design 2015

greenhousego.net

www.simplygum.com

getrest.co

Page 16: Trend web design 2015

#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

Page 17: Trend web design 2015

#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

Page 18: Trend web design 2015

Top Left:www.newblack.me

Top Right:bauart.ch/projects/

Bottom Left:dblg.co.uk

Page 19: Trend web design 2015

#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

Page 20: Trend web design 2015

#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

Page 21: Trend web design 2015

# 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

Page 22: Trend web design 2015
Page 23: Trend web design 2015

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.

Page 24: Trend web design 2015