Webinar Susanna Pepi | Come Scegliere Font e Colori per Creare Landing Page

FONT E COLORI PER CREARE LANDING PAGE EFFICACI

06 maggio 2015#webinar #1minutesite

Susanna Pepi

CHI SONO

WEB E GRAPHIC DESIGNER

responsabile grafica 1minutesitecollaboro con Sintraconsulting da più di 5 anni

master in grafica per l’editoria allo IED Istituto Europeo di Design di Firenze

mi occuopo diprogettazione e realizzazione siti web e ecommerce - UX design - brand identity

DI COSA PARLEREMO

ASPETTO GRAFICO

1) la scelta dei colori

2) la scelta delle immagini

3) tipografia per il web

LAYOUT

1) come strutturare una landing page:

a) usabilità e progettazione

b) "call to action"

3 MITI DA SFATARE

IL DESIGN CONSISTE NEL FARE UN SITO WEB CHE SEMBRA BELLO

3 MITI DA SFATARE

LE PERSONE NON SCROLLANO

3 MITI DA SFATARE

NON SI PUÒ FARE UN SITO WEB PROFESSIONALE CON UN CMS

ASPETTO GRAFICO

Determina le emozioni e le sensazioni che un sito web suscita nell’utente.

Bisogna individuare scelte grafiche che siano capaci di valorizzare il tipo di percezione che vogliamo dare al visitatore, attraverso:

1) colori

2) immagini

3) tipografia

LA SCELTA DEI COLORI

DUE POSSIBILITÀ

1) personal branding (logo, colori aziendali)

2) sensazioni e psicologia del colore


Personal Branding (logo, colori aziendali)


Sensazioni e Psicologia del colore

Il colore non è altro che un’elaborazione visiva generata da segnali nervosi ed è capace di provocare risposte emotive ed atteggiamenti psicologici diversi.

Per esempio:

● i colori caldi (giallo,arancione, rosso) sono stimolanti e positivi

● il grigio, il nero, il marrone e il bianco sono colori eleganti ma passivi un po’ freddi e distaccati

● i colori tenui, come le tonalità pastello, sono rassicuranti e ispirano fiducia come il verde e l’azzurro


Tutto questo cosa ha a che vedere con la grafica?

Il rosso e l’arancione sono conosciuti come intensi colori emozionali, che

stimolano l’aumento del battito cardiaco e del

respiro, per questo vengono spesso utilizzati

per incoraggiare il consumatore all’acquisto.

Sensazioni e Psicologia del colore

Analisi e scelta del materiale



ROSSO: il colore che l’occhio umano percepisce più rapidamente, rappresenta energia, velocità, eccitazione, forza, passione.

BLU: il colore preferito dagli europei, rappresenta sicurezza, responsabilità, fiducia.

GIALLO: caldo e stimolante, è il colore dei sentimenti positivi, della felicità, è particolarmente amato dai più giovani.

ARANCIONE: caldo e ricco di energia, rappresenta vivacità, dinamismo, ottimo per incoraggiare il consumatore all’acquisto.

VERDE: colore fresco associato alla natura, alla luminosità, alla speranza.

VIOLA: associato spesso alla religione, ma è considerato anche un colore regale ed elegante, viene associato alla spiritualità ed alla dignità.

ROSA: morbido e delicato, rappresenta amore e dolcezza, attenzione: un utilizzo eccessivo può essere considerato infantile.

BIANCO: purezza, pulizia, massima leggibilità. È una tinta decisamente impersonale, eppure capace di trasmettere una profonda eleganza.

NERO: sofisticato, elegante, se utilizzato in modo corretto, può creare un effetto molto esclusivo e chic.


La ruota dei colori

Uno schema di colore è una combinazione armoniosa e visivamente gradevole di colori, abbinati tra loro sulla base della loro posizione nella ruota dei colori.

Schema MONOCROMATICO

colori che si trovano accanto nella ruota


Schema COMPLEMENTARE

colori diametralmente opposti nella ruota


Schema CONTRASTANTE

colore immediatamente accanto a quello diametralmente opposto nella ruota


Adobe Color CC - https://color.adobe.com/it/create/color-wheel



Quindi, come sceglierli?

Non esistono colori giusti o colori sbagliati, esistono, invece, colori adatti

IN GENERALE:

• utilizzare al massimo tre colori

• seguire il principio del “60-30-10”:

il primo colore del sito dovrebbe riempire uno spazio di circa il 60% e essere una tonalità “neutra” (bianco, grigio, nero...)

il secondo colore dovrebbe occupare il 30% dello spazio rimanente e essere “di contrasto” al colore principale

nel 10% del layout, dovremmo usare un terzo colore, che si combini in modo adeguato con i due colori già utilizzati, principalmente in alcuni dettagli, quali testi, slogan, pulsanti...


SOURCE: http://blog.marketo.com/

http://blog.marketo.com/2012/06/true-colors-what-your-brand-colors-say-about-your-business.html

LE IMMAGINI

Per rappresentare al meglio qualsiasi tipo di azienda, foto reali sono sempre la scelta migliore.

Altrimenti:

1) ricerca avanzata google

2) ricerca avanzata flickr

diritti di utilizzo creative commons/risultati utilizzabilio condivisibili liberamente, anche a scopo commerciale

3) istockphoto (e simili)

GOOGLE: Ricerca Avanzata Immagini

LE IMMAGINI

ISTOCKPHOTO - http://italiano.istockphoto.com/

fonte di immagini, file multimediali ed elementi di progettazione royalty-free

LE IMMAGINI

LE IMMAGINI

Quando si naviga su internet ogni elemento che vediamo nelle pagine ha un peso. Ecco perché alcune pagine risultano più lente di altre.

Il peso degli elementi influisce non soltanto sulla pazienza del navigatore ma anche sull’indicizzazione della pagina e quindi sulla sua “ricercabilità”.

Tre parametri da rispettare:

1) risoluzione

2) peso

3) dimensioni

LE IMMAGINI

Risoluzione

La risoluzione di un’immagine è il numero di pixel per Pollici (o centimetri), per il web la risoluzione migliore in rapporto qualità/spazio occupato dal file è 72 PPI

Peso

Varia a seconda delle dimensioni, è importante scegliere il miglior rapporto possibile tra peso e qualità dell’immagine

Dimensioni

Qual è il limite di dimensioni di una foto? Lo spazio che occuperà sulla pagina.

LE IMMAGINI

Un’immagine vale più di mille parole...

TIPOGRAFIA

Secondo diversi studi la lettura su schermo è il 25% più difficile e più lenta rispetto alla lettura sulla carta stampata.

Per la scelta di un font è importante considerare:

1) Leggibilità

2) Attinenza

3) Dimensioni

4) Interlinea

5) Contrasto fra sfondo testo

TIPOGRAFIA

TIPOGRAFIA

SOURCE: http://www.joustmultimedia.com/

http://www.joustmultimedia.com/blog/post/the-art-of-combining-fonts



TIPOGRAFIA

1) dimensione: il corpo del testo non dovrebbe essere più piccolo di 12px(ILT - Information and Learning Technology fissa il corpo del testo a 16px)

2) interlinea equilibrata: in testi molto lunghi, un’interlinea molto ridotta può creare difficoltà di lettura, allo stesso modo, un’interlinea troppo alta costringe l’occhio ad aumentare il numero di sbalzi tra una riga e l’altra, di solito si stabilisce un’interlinea pari al 150% del corpo del font

3) gerarchia: pesi diversi, segnaleranno agli utenti l’importanza relativa di ogni elemento nella pagina.

COME CREARE UNA LANDING PAGE

Secondo ricerche recenti imprese con 30 o più landing pages generano 7 volte più

contatti rispetto a quelle con meno di 10 landing pages.

IMAGE SOURCE: https://blog.kissmetrics.com/

https://blog.kissmetrics.com/landing-page-design-infographic/


Spiega bene chi sei e cosa fai

1) scrivi un titolo interessante e pertinente

2) usa una gerarchia visiva nei testi

3) grammatica impeccabile

4) rendi le informazioni importantifacili da identificare

○ elenchi puntati

○ grassetto per le parole chiave

IMAGES SOURCE: https://www.goodui.org/

https://www.goodui.org/

Costruisci fiducia

1) includere testimonianze reali, garanzie,

certificazioni di sicurezza

2) fai vedere lavori svolti fino ad ora



Coinvolgi i tuoi utenti

Le immagini possono essere potenti comunicatori, utilizza immagini significative

e coerenti con il tuo messaggio.


Aiuta l’utente a trovare ciò di cui ha bisogno

1) utilizza una Call To Action evidente,

convincente ed esplicativa

2) rimuovi il menù (e tutti gli elementi che non

sono necessari)

3) evita link esterni che potrebbero distrarre e

confondere l’utente


Non far pensare troppo l’utente

Posiziona la Call To Action prima della fine della pagina in un posto in cui gli occhi dell’utente la troveranno facilmente.


1) utilizza anche lo spazio negativo (lascia

respirare il testo)

2) chiedi solo le cose di cui hai veramente

bisogno

3) ripeti la Call To Action se necessario

4) rendi la pagina accessibile da tutti i

dispositivi


Perchè realizzare landing pages?

Una sola landing pages, può portare al 37.5% in più di conversioni rispetto alla versione originale di un sito con più pagine perchè:

1) è più semplice, non c’è alcun modo per perdersi e tutto è solo a un paio di scroll di distanza

2) la pagina è più mirata e rende più facile comunicare il messaggio principaledel sito

3) si visualizza senza problemi su tutti i dispositivi, dal momento che la navigazione è solo a scorrimento e non c’è bisogno di fare molti click

UN ESEMPIO REALE

A highrisehq.com hanno testato questi e molti altri concetti di design misurandone l’impatto sulle conversioni (iscrizioni a pagamento)

UN ESEMPIO REALE

“To design the best UX, pay attention to what users do,

not what they say.

Self-reported claims are unreliable,

as are user speculations about future behavior.

Users do not know what they want.”

Jakob Nielsen

COME CREARE UNA LANDINGCON 1MINUTESITE


http://fortawesome.github.io/Font-Awesome/icons/


http://landingpage.oneminutesite.it/

Prossimo Appuntamento:

"Gli elementi essenziali di un e-commerce per piccole imprese"

Roberto Fumarola

giugno 2015

06 maggio 2015#webinar #1minutesite

Susanna Pepi

Webinar Susanna Pepi | Come Scegliere Font e Colori per Creare Landing Page

Internet

Transcript of Webinar Susanna Pepi | Come Scegliere Font e Colori per Creare Landing Page