WEB DESIGN

WOW
CHE CONVERTE
Progetta design accattivanti e sistema la
comunicazione del tuo sito web.

MARCHETTI DESIGN
www.marchettidesign.net
Intro
Ciao sono Andrea, in questo guida imparerai a
progettare siti web dal design accattivante, che
catturano l’attenzione, mettono l’utente a suo agio e lo
guidano verso l’obiettivo del sito.

Perchè questo è importante?

Perchè se vuoi ottenere risutlati online e avere un sito
che funziona è fondamentale dare una buona prima
impressione e comunicare le informazioni giuste in
modo chiaro.

Le Basi
Un sito dal design impattante che converte visitatori in
clienti/contatti) ha 3 aspetti che devono essere curati nel
dettaglio.

1) Design ( deve catturare l’attenzione e creare interesse)

2) Comunicazione (deve essere chiara e dritta al punto)
3) Parte Tecnica (il sito deve essere veloce e affidabile)

Se uno di questi aspetti da problemi stiamo perdendo

efficacia lasciando sul piatto risutlati. Per questo ognuno
di questi aspetti va curato nel dettaglio.
Comunicazione
Partiamo dalla comunicazione perchè questa
influenzerà le scelte di design che faremo dopo.

Qual’è l’obiettivo?
Il nostro sito può avere 3 principali obiettivi:
1 - Far conoscere l’azienda / realtà che stiamo presentando
2 - Ricevere contatti di potenziali clienti
3 - Vendere prodotti e servizi

AGISCI ORA!

Cosa offri?
Scelto l’obieittivo per es. Ricevere Contatti apri google docs e scrivi
in un unica frase Cosa fa il tuo prodotto/servizio per i tuoi
potenziali clienti? focalizzati sui vantaggi che porterai all’utente che
ti sceglierà, fatto questo chiediti:

- Quali sono i 3/4 prinicpali benefici? scrivili in massimo 3 righe.

- In cosa sei diverso dalla concorrenza? scrivilo in massimo 3 righe.

Descrivi poi i benefici che hai scelto in maniera più dettagliata,

elencando tutte le informazioni che potrebbero essere utili al nostro
utente senza diventare prolisso. Chiudi gli occhi e pensa di averlo di
fronte, utilizza temrini semplici e paragrafi brevi massimo 3 righe.

Bene fatto questo abbiamo la bozza della comunicazione!

Struttura di un sito Efficace
È fondamentale dare le info all’utente nel ordine giusto segui questo schema.

Cover di Introduzione (creo interesse):

Inseriamo la frase con cosa offriamo e
la descrizione breve dei benefici:
es. Con le nostre macchine xyz
risparmi materiale evitando sprechi

Benefici estesi (guido l’utente):

Qui continuiamo ad educare il cliente,
inserendo le descrizone estesa dei
benefici.
es. Grazie al nostro allarme a infrarossi
che scansiona a 360° gli ambienti di
casa tornerai a dormire sonni tranquilli

Dati satistici (per aumentare fiducia):

Se li abbiamo inseraimo dati:
es. 93% clienti soddifatti, oppure da
43 anni facciamo…

Testimonianze (per dare fiducia):

Inseiriamo testimonianze:
es. screenshot di commenti facebook

Azione:
Diciamo all’utente di contattarci:
es. Cosa aspetti? torna a saltare
come prima senza mal di schiena,
contattaci per una seduta
Web Design
Il design fa la differenza il 38% degli utenti smetterà di
navigare il sito se lo trova non attratente e amatoriale,
questa percentuale schizza alle stelle se le informazioni
non sono ben visibili e chiare.

Principi base del design

Quando si disegna un sito è importante creare un sito facile
da scansionare (gli utenti sul web non leggono scansionano),
per questo utilizziamo la gerarchia visuale:

1) La Gerarchia visuale
È la proporzione e relazione che abbiamo tra gli elementi sulla
nostra pagina, ecco un esempio di testo in un sito web:

Titolo importante Titolo importante

Sottotilo Sottotilo
Descrizione di test
Descrizione di test
lorem ipsum
lorem ipsum

Testi tutti con stessa Testo che devo leggere per

grandezza non ho gerarchia, primo più grande e boldato,
non capisco qual’è quello più sottotitolo diverso da
importante da leggere per descrizione, buona gerarchia
primo. dei contenuti.
 2) Colore
Il colore è uno strumento potentissimo può essere utilizzato per
attirare l’attenzione e mettere a suo agio l’utente.

Il pulsante grigio
scuro non è visibile,
ho poco contrasto
l’occhio dell’utente
non vede il pulsante,
se lo vede deve
sforzarsi molto per
leggere.

Il pulsante arancione
è ben contrastato e
salta subito all’occhio.

Il blu è il colore
associato alla
sicurezza è adatto a
siti del settore medico.

Un errore sarebbe
stato fare il sito rosso
il colore del sangue e
del pericolo.

PRO-TIP:
Per essere sicuri di utilizzare il colore giusto per la tipologia
di sito potete cercare su google:

Best _____ web design (inserisci nello spazio il settore)

N.B. Utilizza poi i colori dei migliori design come ispirazione

 3) Spazio e leggibilità
Lo spazio è un’ altro elemento fondamentale per un design
accattivante, può essere utilizzato per creare una buona
gerarchia tra i contenuti ragguppandoli e dividendoli,
aumentando la leggibilità del sito.

Titolo importante Titolo importante

Sottotilo Sottotilo
Descrizione di test Descrizione di test
lorem ipsum lorem ipsum

Pulsante

Pulsante
Sezione 2
Sezione 2 Descrizione di test
Descrizione di test lorem ipsum
lorem ipsum

Pulsante troppo spostato in Pulsante vicino al testo

basso, sembra non essere pertinente.
collegato al titolo
importanete. Sezione 2 con più “aria” in
torno, tutto è più leggibile e
Sezione 2 senza spazio di professionale.
contorno la lettura risutla più
difficile.
Fate “respirare”
il design
Esempio di sito con ampio uso di
spazi tra gli elementi, che rispecchia
la struttura efficace.

N.B. la gerarchia tra i testi e gli

elementi, l’uso di colori come il
bedje il giallo richiama il colore del
grano e della terra, colori inerenti
con il settore dei prodotti tipici.

PRO-TIP:
L’utilizzo di immagini dove ci
“mettiamo la faccia” aumenta la
fiducia degli utenti. Se potete
inserite persone nei vostri design e
immagini vere in alternativa usate:
unsplash.com

N.B. A fine pagina si intravedono le

testimonianze. Le testimonianze di
utenti reali sono fondamentali per
aumentare la fiducia e far
compiere all’utente l’azione.

PRO-TIP:
Per chiedere le testimonianze basta
che quando qualcuno vi fa i
complimenti o vi dice grazie, gli
chiedete di farvi sapere come si è
trovato lasciandovi un commento
su facebook.
Realizziamo il design!
AGISCI ORA!

Scaletta operativa
- Apri il tuo software di grafica preferito (io uso XD)
- Rileggi il file con la comunicazione che abbiamo realizzato
- Riguarda la ricerca di settore su google
- Se hai bisogno un ispirazione extra dai un occhiata a questi
profili instagram di top designers mondiali:

https://www.instagram.com/igorvensko/
https://www.instagram.com/brand0ngr0ce/

- Segui la struttura efficace e comincia sezione per sezione

!
PRO-TIPS (per aumentare la produttività e aiutare il processo)

A) Per ogni sezione chiediti qual’è il suo scopo: descrivere un

beneficio? presentare l’offerta? spiegare perchè devono
scegliere te? e usa sempre un immagine che supporti lo scopo
della sezione. (es. se parlo della bontà del salame ti metto un
immagine golosa del salame)

B) All’inizio non essere troppo preciso sui dettagli merglio

mettere giù le idee e poi revisionare dopo

C) Prenditi una pausa, non fare mai più di un ora di fila (a meno
che tu non sia in superman mode)
 È tutto ragazzi!
Vuoi progettare siti wow?
Con questa guida ti ho
mostratole basi…

Se vuoi fare il salto di qualità

e realizzare design super
professionali dai un
occhiata a:

NEXT LEVEL UX & CONVERSION WEB DESIGN

BONUS!
Una volta che il tuo design è pronto c’è una lista di controlli che
devi fare per essere sicuro che il tuo design sia ok, questa
“checklist” è il risutlato di anni di pratica sul campo.

N.B. la lista e le informazioni di questa guida sono una piccolo

estratto del corso “Next Level Ux & Conversion Web Design”, detto
questo se vuoi ricevere feedback sui tuoi lavori e migliorare come
web designer iscriviti alla community free ogni giorno parliamo di
questi argomenti:
ACCEDI ALLA COMMUNITY NEXT LEVEL

La Checklist è nella prossima pagina!

A presto, Andrea.
 Checklist di review Design e
comunicazione Sito!
Controlla queste cose per essere sicuro che il tuo design non abbia
problemi gravi:

1 - Nella cover del sito è chiaro il motivo per il quale venire da te?

2 - È chiaro cosa devo leggere per primo per secondo e cosi via?

3 - È chiaro qual’è l’obiettivo del sito?

4 - I pulsanti portano esplicitatamente all’obiettivo?

5 - È tutto leggibile? i pulsanti sono ben visibili?

6 - Le informazioni sono ben raggruppate? gli spazi sono corretti?

7 - I colori sono coerenti con il tipo di settore del sito?

8 - Le immagini supportano il messaggio di ogni sezione?

9 - C’è qualche altra informazione utile da dire all’utente?

10 - Senza scrollare vedo il messaggio principale e il primo

pulsante?

© Copyright 2021 Marchetti Design

www.marchettidesign.net