Lezione 2 - Matteo Graser

Transcript

Lezione 2 - Matteo Graser
Digital Branding
2° Lezione
Computer Graphic 2 - Matteo
Graser - www.matteograser.com
Computer
Graphic 2 - Matteo Graser -
www.matteograser.com
“Non c’è una seconda occasione per
fare una buona prima impressione”
Oscar Wilde
2
Computer Graphic 2 - Matteo Graser - www.matteograser.com
1. scopo di un website
il sito web è prima di tutto un fenomeno di comunicazione
digitale. Il suo principale obiettivo è quello di comunicare
la propria identità.
3
Computer Graphic 2 - Matteo Graser - www.matteograser.com
A che domande risponde un sito?
chi siamo
cosa facciamo
scopo del sito, settore di business…
4
Computer Graphic 2 - Matteo Graser - www.matteograser.com
esempio
Senza aver mai sentito nomirare la marca,
il seguente sito non esprime al meglio quale sia il suo scopo principale
5
Computer Graphic 2 - Matteo Graser - www.matteograser.com
VOLI?
ALBERGHI?
AUTO?
6
Computer Graphic 2 - Matteo Graser - www.matteograser.com
VACANZE?
7
Computer Graphic 2 - Matteo Graser - www.matteograser.com
AUTO NOLEGGIO?
8
Computer Graphic 2 - Matteo Graser - www.matteograser.com
BUONI REGALO?
9
Computer Graphic 2 - Matteo Graser - www.matteograser.com
10
Computer Graphic 2 - Matteo Graser - www.matteograser.com
11
Computer Graphic 2 - Matteo Graser - www.matteograser.com
12
Computer Graphic 2 - Matteo Graser - www.matteograser.com
13
Computer Graphic 2 - Matteo Graser - www.matteograser.com
14
Computer Graphic 2 - Matteo Graser - www.matteograser.com
da dove si comincia?
Si parte dai principali obiettivi di marketing
e comunicazione della azienda
ES:
1° vendere voli aerei (ed esaurire tutti i biglietti)
2° riuscire a vendere qualsiasi altra cosa inerente
(tramite accordi commerciali e link tracciati)
è facile capire se un utente acquista su Hertz perchè
proviene da ryanair.com
15
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Cosa ci faccio qui?
Il grado di soddisfazione nasce dal confronto
tra aspettativa e realtà
Visto che questo continuo confronto mentale
si svolge a velocità elevata, se l’utente non
ottiene subito riscontro positivo, esce e
cambia sito (indice di rimbalzo)
16
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Focus
L’attenzione selettiva ogni istante elimina il
contenuto che meno serve allo scopo finale
17
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Focus
L’attenzione selettiva ogni istante elimina il
contenuto che meno serve allo scopo finale
18
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Serendipity
www
le web page devono essere pronte ad accogliere anche
i visitatori che “capiteranno” sul sito in modo casuale
19
Computer Graphic 2 - Matteo Graser - www.matteograser.com
il dominio
il primissimo impatto
Computer Graphic 2 - Matteo Graser - www.matteograser.com
la prima informazione importante
è il Site Name (nome del sito)
21
Computer Graphic 2 - Matteo Graser - www.matteograser.com
la prima informazione è il Site Name (nome del sito)
che funge da “vetrina”
22
Computer Graphic 2 - Matteo Graser - www.matteograser.com
… poi l’indirizzo (url), che riveste un ruolo importante
anche per la memorizzazione del sito, e per una
ottima indicizzazione S.E.O.
23
Computer Graphic 2 - Matteo Graser - www.matteograser.com
I criteri per un buon indirizzo
Memorabilità
Estensione
Brand Identity
Brand Protection
Trovabilità
24
Computer Graphic 2 - Matteo Graser - www.matteograser.com
i livelli dei domini
25
1°
www.nomesito.it
2°
www.nomesito.it
3°
blog. nomesito.it
Computer Graphic 2 - Matteo Graser - www.matteograser.com
La struttura
come si divide un sito web
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Struttura
27
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Struttura
HEADER
28
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Struttura
MENU
29
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Struttura
WRAP
30
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Struttura
SIDEBAR
31
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Struttura
CONTENT
32
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Struttura
FOOTER
33
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Logo
il cuore dell’identità aziendale
Computer Graphic 2 - Matteo Graser - www.matteograser.com
35
Computer Graphic 2 - Matteo Graser - www.matteograser.com
cos’è un logo?
l’espressione grafica (logotipo + pittogramma)
che rappresenta una azienda, in modo univoco.
36
Computer Graphic 2 - Matteo Graser - www.matteograser.com
cos’è un logo?
l’espressione grafica (logotipo + pittogramma)
che rappresenta una azienda, in modo univoco.
cos’è il payoff
o tagline, è il testo che riassume l’universo
dell’azienda
37
Computer Graphic 2 - Matteo Graser - www.matteograser.com
il logo in primo piano
• Sempre presente in un sito web
• È sempre linkato alla home page del sito
• Sempre riportato nelle pagine interne,
tendenzialmente nella stessa posizione, e quasi
sempre della stessa dimensione (si possono
pensare ad 1-2 variabili, per distinguere home page
dal resto del sito)
38
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Payoff e Value proposition
il payoff è il testo che accompagna un logo
(“perchè io valgo / perchè tu vali” - L’Oréal)
la value proposition è il segno distintivo che un
brand vuole comunicare rispetto ad altri
competitor
39
Computer Graphic 2 - Matteo Graser - www.matteograser.com
esempio Payoff
Perchè tu vali
40
Computer Graphic 2 - Matteo Graser - www.matteograser.com
esempio Value Proposition
41
Computer Graphic 2 - Matteo Graser - www.matteograser.com
esempi:
42
Computer Graphic 2 - Matteo Graser - www.matteograser.com
esempi:
43
Computer Graphic 2 - Matteo Graser - www.matteograser.com
esempi:
44
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Un sito web è una infrastruttura per il dialogo oppure è
una vetrina.
Se non riesci a descrivere in una frase a cosa serve un sito,
preoccupati.
Se non riesci a descrivere in una frase la funzione di ogni
pagina di cui è composto, preoccupati.
Federico Badaloni
resp. AI e UI del Gruppo Espresso
federicobadaloni.blog.kataweb.it
45
Computer Graphic 2 - Matteo Graser - www.matteograser.com
la 1° impressione
Computer Graphic 2 - Matteo Graser - www.matteograser.com
a che gioco giochiamo
per una comunicazione efficace, lo scopo del
nostro sito deve essere espresso in modo chiaro al
primo ingresso (su qualsiasi tipologia di pagina) Il tutto dev’esser coerente con il brand del sito
47
Computer Graphic 2 - Matteo Graser - www.matteograser.com
esempi: Luana kai Resort - Hawaii
48
Computer Graphic 2 - Matteo Graser - www.matteograser.com
49
Computer Graphic 2 - Matteo Graser - www.matteograser.com
50
Computer Graphic 2 - Matteo Graser - www.matteograser.com
esempi: Giuliana Teso - pellicce
51
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Trust
Capita d’incorrere nel problema di dispercezione tra marca
e come gli utenti vedono la marca. E visti gli elevati budget investiti, questo diventa un
problema importante oggi.
52
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Si risolve:
• curando tutti gli aspetti della comunicazione visiva (off/on
line)
• utilizzando tutti gli aspetti della comunicazione visiva
ovunque e in modo sempre coerente
• lasciando poco spazio ad altri fattori (es: le adv all’interno
del sito)
• interagendo coi social, dove persone qualunque possono
dare un giudizio sul operato svolto
53
Computer Graphic 2 - Matteo Graser - www.matteograser.com
Inoltre si può implementare:
54
•
inserendo un blog, costantemente aggiornato
•
NON togliendo la possibilità di agire e di scrivere commenti
•
prestando attenzione a non scrivere testi sgrammaticati e
affrettati
•
nascondendo o rendendo difficile da trovare la sezione contatti o
la modalità assistenza
•
utilizzando un web design consono
Computer Graphic 2 - Matteo Graser - www.matteograser.com
…
55
•
utilizzare spazi web / email gratuiti, non personalizzati con il
nome dominio.
•
non esponendo nell’eshop i marchi delle carte di credito, il certificato ssl
•
non mettendo i link alle cookie law, privacy policy, e altre norme
Computer Graphic 2 - Matteo Graser - www.matteograser.com