Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FONT E COLORI PER CREARE
LANDING PAGE EFFICACI
06 maggio 2015
#webinar #1minutesite
Susanna Pepi
CHI SONO
WEB E GRAPHIC DESIGNER
responsabile grafica 1minutesite
collaboro con Sintraconsulting da più di 5 anni
master in...
DI COSA PARLEREMO
ASPETTO GRAFICO
1) la scelta dei colori
2) la scelta delle immagini
3) tipografia per il web
LAYOUT
1) c...
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 graf...
LA SCELTA DEI COLORI
DUE POSSIBILITÀ
1) personal branding (logo, colori aziendali)
2) sensazioni e psicologia del colore
LA SCELTA DEI COLORI
Personal Branding (logo, colori aziendali)
LA SCELTA DEI COLORI
Sensazioni e Psicologia del colore
Il colore non è altro che un’elaborazione visiva generata da segna...
LA SCELTA DEI COLORI
Tutto questo cosa ha a che vedere con la grafica?
Il rosso e l’arancione sono
conosciuti come intensi...
Sensazioni e Psicologia del colore
Analisi e scelta del materiale
LA SCELTA DEI COLORI
LA SCELTA DEI COLORI
ROSSO: il colore che l’occhio umano percepisce
più rapidamente, rappresenta energia, velocità,
eccita...
LA SCELTA DEI COLORI
La ruota dei colori
Uno schema di colore è una
combinazione armoniosa e visivamente
gradevole di colo...
Schema MONOCROMATICO
colori che si trovano accanto nella ruota
LA SCELTA DEI COLORI
Schema COMPLEMENTARE
colori diametralmente opposti nella ruota
LA SCELTA DEI COLORI
Schema CONTRASTANTE
colore immediatamente accanto a quello diametralmente opposto nella ruota
LA SCELTA DEI COLORI
Adobe Color CC - https://color.adobe.com/it/create/color-wheel
LA SCELTA DEI COLORI
LA SCELTA DEI COLORI
Quindi, come sceglierli?
Non esistono colori giusti o colori sbagliati, esistono, invece, colori adat...
LA SCELTA DEI COLORI
SOURCE: http://blog.marketo.com/
LE IMMAGINI
Per rappresentare al meglio qualsiasi tipo di azienda, foto reali
sono sempre la scelta migliore.
Altrimenti:
...
GOOGLE: Ricerca Avanzata Immagini
LE IMMAGINI
GOOGLE: Ricerca Avanzata Immagini
LE IMMAGINI
ISTOCKPHOTO - http://italiano.istockphoto.com/
fonte di immagini, file multimediali ed elementi di progettazione royalty-f...
LE IMMAGINI
Quando si naviga su internet ogni elemento che vediamo nelle pagine ha un peso.
Ecco perché alcune pagine risu...
LE IMMAGINI
Risoluzione
La risoluzione di un’immagine è il numero di pixel per Pollici (o centimetri), per il
web la risol...
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 cart...
TIPOGRAFIA
TIPOGRAFIA
TIPOGRAFIA
TIPOGRAFIA
TIPOGRAFIA
TIPOGRAFIA
SOURCE: http://www.joustmultimedia.
com/
TIPOGRAFIA
1) dimensione: il corpo del testo non dovrebbe essere più piccolo di 12px
(ILT - Information and Learning Techn...
COME CREARE UNA LANDING PAGE
Secondo ricerche recenti
imprese con 30 o più landing
pages generano 7 volte più
contatti ris...
COME CREARE UNA LANDING PAGE
Spiega bene chi sei e cosa fai
1) scrivi un titolo interessante e pertinente
2) usa una gerar...
Costruisci fiducia
1) includere testimonianze reali, garanzie,
certificazioni di sicurezza
2) fai vedere lavori svolti fin...
COME CREARE UNA LANDING PAGE
Coinvolgi i tuoi utenti
Le immagini possono essere potenti comunicatori, utilizza immagini si...
COME CREARE UNA LANDING PAGE
Aiuta l’utente a trovare ciò di cui ha
bisogno
1) utilizza una Call To Action evidente,
convi...
COME CREARE UNA LANDING PAGE
Non far pensare troppo l’utente
Posiziona la Call To Action prima della fine della
pagina in ...
COME CREARE UNA LANDING PAGE
1) utilizza anche lo spazio negativo (lascia
respirare il testo)
2) chiedi solo le cose di cu...
COME CREARE UNA LANDING PAGE
Perchè realizzare landing pages?
Una sola landing pages, può portare al 37.5% in più di conve...
UN ESEMPIO REALE
A highrisehq.com hanno testato questi e molti altri concetti di design misurandone
l’impatto sulle conver...
UN ESEMPIO REALE
UN ESEMPIO REALE
UN ESEMPIO REALE
UN ESEMPIO REALE
UN ESEMPIO REALE
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 use...
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
http:
//fortawesome.
github.io/Font-
Awesome/icons/
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
COME CREARE UNA LANDING
CON 1MINUTESITE
http://landingpage.oneminutesite.it/
COME CREARE UNA LANDING
CON 1MINUTESITE
http://landingpage.oneminutesite.it/
Prossimo Appuntamento:
"Gli elementi essenziali di un e-
commerce per piccole imprese"
Roberto Fumarola
giugno 2015
06 mag...
Upcoming SlideShare
Loading in …5
×

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

47,167 views

Published on

Susanna Pepi, Wed and Graphic Designer, ci ha parlato di come Scegliere Font e Colori per Creare Landing Page Efficaci.

Una vera e propria lezione pratica su come creare pagine web capaci di raggiungere il target selezionato.

Published in: Internet

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

  1. 1. FONT E COLORI PER CREARE LANDING PAGE EFFICACI 06 maggio 2015 #webinar #1minutesite Susanna Pepi
  2. 2. CHI SONO WEB E GRAPHIC DESIGNER responsabile grafica 1minutesite collaboro con Sintraconsulting da più di 5 anni master in grafica per l’editoria allo IED Istituto Europeo di Design di Firenze mi occuopo di progettazione e realizzazione siti web e ecommerce - UX design - brand identity
  3. 3. 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"
  4. 4. 3 MITI DA SFATARE IL DESIGN CONSISTE NEL FARE UN SITO WEB CHE SEMBRA BELLO
  5. 5. 3 MITI DA SFATARE LE PERSONE NON SCROLLANO
  6. 6. 3 MITI DA SFATARE NON SI PUÒ FARE UN SITO WEB PROFESSIONALE CON UN CMS
  7. 7. 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
  8. 8. LA SCELTA DEI COLORI DUE POSSIBILITÀ 1) personal branding (logo, colori aziendali) 2) sensazioni e psicologia del colore
  9. 9. LA SCELTA DEI COLORI Personal Branding (logo, colori aziendali)
  10. 10. LA SCELTA DEI COLORI 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
  11. 11. LA SCELTA DEI COLORI 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.
  12. 12. Sensazioni e Psicologia del colore Analisi e scelta del materiale LA SCELTA DEI COLORI
  13. 13. LA SCELTA DEI COLORI 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.
  14. 14. LA SCELTA DEI COLORI 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.
  15. 15. Schema MONOCROMATICO colori che si trovano accanto nella ruota LA SCELTA DEI COLORI
  16. 16. Schema COMPLEMENTARE colori diametralmente opposti nella ruota LA SCELTA DEI COLORI
  17. 17. Schema CONTRASTANTE colore immediatamente accanto a quello diametralmente opposto nella ruota LA SCELTA DEI COLORI
  18. 18. Adobe Color CC - https://color.adobe.com/it/create/color-wheel LA SCELTA DEI COLORI
  19. 19. LA SCELTA DEI COLORI 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...
  20. 20. LA SCELTA DEI COLORI SOURCE: http://blog.marketo.com/
  21. 21. 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 utilizzabili o condivisibili liberamente, anche a scopo commerciale 3) istockphoto (e simili)
  22. 22. GOOGLE: Ricerca Avanzata Immagini LE IMMAGINI
  23. 23. GOOGLE: Ricerca Avanzata Immagini LE IMMAGINI
  24. 24. ISTOCKPHOTO - http://italiano.istockphoto.com/ fonte di immagini, file multimediali ed elementi di progettazione royalty-free LE IMMAGINI
  25. 25. 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
  26. 26. 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.
  27. 27. LE IMMAGINI Un’immagine vale più di mille parole...
  28. 28. 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
  29. 29. TIPOGRAFIA
  30. 30. TIPOGRAFIA
  31. 31. TIPOGRAFIA
  32. 32. TIPOGRAFIA
  33. 33. TIPOGRAFIA
  34. 34. TIPOGRAFIA SOURCE: http://www.joustmultimedia. com/
  35. 35. 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.
  36. 36. 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/
  37. 37. COME CREARE UNA LANDING PAGE 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 importanti facili da identificare ○ elenchi puntati ○ grassetto per le parole chiave IMAGES SOURCE: https://www.goodui.org/
  38. 38. Costruisci fiducia 1) includere testimonianze reali, garanzie, certificazioni di sicurezza 2) fai vedere lavori svolti fino ad ora COME CREARE UNA LANDING PAGE
  39. 39. COME CREARE UNA LANDING PAGE Coinvolgi i tuoi utenti Le immagini possono essere potenti comunicatori, utilizza immagini significative e coerenti con il tuo messaggio.
  40. 40. COME CREARE UNA LANDING PAGE 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
  41. 41. COME CREARE UNA LANDING PAGE 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.
  42. 42. COME CREARE UNA LANDING PAGE 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
  43. 43. COME CREARE UNA LANDING PAGE 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 principale del 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
  44. 44. UN ESEMPIO REALE A highrisehq.com hanno testato questi e molti altri concetti di design misurandone l’impatto sulle conversioni (iscrizioni a pagamento)
  45. 45. UN ESEMPIO REALE
  46. 46. UN ESEMPIO REALE
  47. 47. UN ESEMPIO REALE
  48. 48. UN ESEMPIO REALE
  49. 49. UN ESEMPIO REALE
  50. 50. UN ESEMPIO REALE
  51. 51. “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
  52. 52. COME CREARE UNA LANDING CON 1MINUTESITE
  53. 53. COME CREARE UNA LANDING CON 1MINUTESITE
  54. 54. COME CREARE UNA LANDING CON 1MINUTESITE
  55. 55. COME CREARE UNA LANDING CON 1MINUTESITE
  56. 56. COME CREARE UNA LANDING CON 1MINUTESITE
  57. 57. COME CREARE UNA LANDING CON 1MINUTESITE
  58. 58. COME CREARE UNA LANDING CON 1MINUTESITE
  59. 59. COME CREARE UNA LANDING CON 1MINUTESITE
  60. 60. COME CREARE UNA LANDING CON 1MINUTESITE
  61. 61. COME CREARE UNA LANDING CON 1MINUTESITE
  62. 62. COME CREARE UNA LANDING CON 1MINUTESITE
  63. 63. COME CREARE UNA LANDING CON 1MINUTESITE
  64. 64. COME CREARE UNA LANDING CON 1MINUTESITE
  65. 65. COME CREARE UNA LANDING CON 1MINUTESITE
  66. 66. COME CREARE UNA LANDING CON 1MINUTESITE
  67. 67. COME CREARE UNA LANDING CON 1MINUTESITE
  68. 68. COME CREARE UNA LANDING CON 1MINUTESITE
  69. 69. COME CREARE UNA LANDING CON 1MINUTESITE
  70. 70. COME CREARE UNA LANDING CON 1MINUTESITE
  71. 71. COME CREARE UNA LANDING CON 1MINUTESITE
  72. 72. COME CREARE UNA LANDING CON 1MINUTESITE
  73. 73. COME CREARE UNA LANDING CON 1MINUTESITE
  74. 74. COME CREARE UNA LANDING CON 1MINUTESITE
  75. 75. COME CREARE UNA LANDING CON 1MINUTESITE http: //fortawesome. github.io/Font- Awesome/icons/
  76. 76. COME CREARE UNA LANDING CON 1MINUTESITE
  77. 77. COME CREARE UNA LANDING CON 1MINUTESITE
  78. 78. COME CREARE UNA LANDING CON 1MINUTESITE
  79. 79. COME CREARE UNA LANDING CON 1MINUTESITE
  80. 80. COME CREARE UNA LANDING CON 1MINUTESITE
  81. 81. COME CREARE UNA LANDING CON 1MINUTESITE
  82. 82. COME CREARE UNA LANDING CON 1MINUTESITE
  83. 83. COME CREARE UNA LANDING CON 1MINUTESITE http://landingpage.oneminutesite.it/
  84. 84. COME CREARE UNA LANDING CON 1MINUTESITE http://landingpage.oneminutesite.it/
  85. 85. Prossimo Appuntamento: "Gli elementi essenziali di un e- commerce per piccole imprese" Roberto Fumarola giugno 2015 06 maggio 2015 #webinar #1minutesite Susanna Pepi

×