Website Design
Content
Cum
sa
faci
un
website
AGENDA
• Ce
prinicipii
sa
aplicam
ca
website-‐ul
sa
devina
un
instrument
u:l
de
marke:ng
• Ce
sa
includem
intr-‐un
brief
de
realizare
de
website
Nu
toate
site-‐urile
sunt
la
fel
J
INTERNET
EXTRANET
INTRANET
Nu
toate
companiile
sunt
la
fel
J
Nivel
de
adop:e
Internet
Transformare
Integrare
Prospectare
Prezenta
E-‐mail
• Intregul
business
este
sprijnit
de
ac:vita:
bazate
pe
internet
(intern,
in
rela:a
cu
furnizorii
si
consumatorii)
• Site-‐ul
companiei
permite
op:uni
avansate
(de
comanda,
interac:une
online
etc.)
• Se
folosesc
casutele
de
e-‐mail
• Compania
isi
cauta
clien:
pe
Internet
• Compania
are
site
si
ofera
informa:i
si
despre
produse
si
servicii
• Compania
are
si
o
pagina
pe
internet
simpla
sau
e
prezenta
in
directoare
online
• In
companie
se
folosesc
casute
de
e-‐mail
• • • • •
E-‐business
E-‐commerce
E-‐marke:ng
E-‐communica:on
E-‐mail
Tipuri
de
site-‐uri
• Comert
electronic
(e-‐commerce)
• Emag.ro,
amazon.com
• Imagine
de
marca
(brand
building)
• prieteniis:udece.ro,
ariel.ro
• Firmax.ro
• realitatea.net,
iqads.ro,
hotnews.ro,
wall-‐street.ro
• Servicii
• Portal
/
site
media
• Aplica:e
/
soPware
• Social
media
• Facebook.com,
hi5.com
USABILITY
ACCESIBILITY
DESIGN
MARKETING
Cine
realizeaza
site-‐ul?
INTERN
• • • • CEO
Director
de
marke:ng
Director
de
comunicare
Departament
IT
EXTERN
• • • • • • Agen:i
de
comunicare
interac:va
Agen:i
de
web
design
Companii
de
soPware
Designeri
Programatori
Un
baiat
:)
DOs
in
alegerea
furnizorilor
Fa
o
lista
cu
mai
mul:
posibili
furnizori
(10-‐15)
Alege
maxim
3
pentru
a
cere
o
oferta
Verifica
portofoliile
si
proiectele
anterioare
Verifica
ce
servicii
pot
sa
ofere
(din
cele
de
care
tu
ai
nevoie)
• Intreaba
la
al:
clien:
• Intalneste-‐te
cu
ei
pentru
briefing
• Semneaza
contracul
• • • •
Ce
trebuie
sa
con:na
brief-‐ul
de
website?
PROCESUL
EVALUEAZA
SIT.
ACTUALA
CERCETEAZA
AUDIENTA
SETEAZA
OBIECTIVELE
DEFINESTE
STRATEGIA
IMPLEMENTEAZA
PROMOVEAZA
FRONTEND
BACKEND
(CMS)
WEBSITE
• • • • • •
SITUATIA
ACTUALA
ASPECTE
TEHNICE
OBIECTIVELE
SITE-‐ului
ASPECTE
CREATIVE
CONTINUTUL
SITE-‐ului
PROJECT
MANAGEMENT
SITUATIA
ACTUALA
• • • • • • • • • Despre
companie
Despre
piata
/
piete
Despre
produse
/
servicii
Despre
brand-‐uri
Contextul
lansarii
/
relansarii
site-‐ului
Performanta
actuala
a
site-‐ului
(par:
bune/par:
rele)
Istoria
site-‐ului
actual
Compe::e
Modalita:
anterioare
de
promovare
ASPECTE
TEHNICE
• Hos:ng
• Domenii
• Baza
de
date
(nivelul
de
integrare
cu
noua
versiune)
• Integrarea
cu
alte
site-‐uri
partenere
OBIECTIVE
• Obiec:vele
site-‐ului
la
nivelul
planului
de
marke:ng
• Obiec:vele
de
comunicare
ale
site-‐ului
• Cum
va
fi
masurat
succesul
noii
versiuni
ASPECTE
CREATIVE
• • • • • • •
Pozi:onarea
marcii
Indica:i
despre
strategia
de
comunicare
a
marcii
Elemente
de
design
obligatorii
Concept
crea:v
(daca
exista)
Layout
tehnic
(Wireframes)
Restric:i
corpora:ve
/
legale
etc.
Integrarea
cu
alte
ac:vita:
de
marke:ng
CONTINUT
• Arhitectura
informa:ei
• Specifica:i
pentru
CMS
(Content
Management
System)
• Con:nutul
propus
• Cine
va
furniza
con:nutul?
Pana
cand?
• Cine
va
administra
con:nutul?
• Cat
de
des
va
fi
actualizat
con:nutul?
• Ce
con:nut
va
fi
ob:nut
de
la
u:lizatori?
PROJECT
MANAGEMENT
• • • • • Buget
Timing
Cine
aproba
Contacte
(tehnic,
marke:ng)
Cine
a
completat
brief-‐ul
COSTURI
COSTURI
• Inregistrarea
domeniului
(hep://rotld.ro)
• Gazduire
/
hos:ng
• Crearea
site-‐ului
(design,
programare,
produc:e
foto/audio/text
etc.)
• Promovare
• Intre:nere
USABILITY
USABILITY
SATISFACTIA
PENTRU
USER
EFICACITATE
EFICIENTA
• • • •
Unde
ma
aflu?
De
unde
vin?
Unde
as
putea
sa
ma
duc?
Unde
este
home
page-‐ul?
Cum
faci
un
site
mai
usable?
• • • • • • • • Status-‐uri
in
pagina
Copywri:ng
pentru
web
Limbaj
pe
intelesul
publicului
:nta
Scenarii
extreme
Consistenta
si
standarde
Mesaje
de
eroare
specifice
Op:uni
de
navigare
vizibile
Design
Cum
testezi
usability?
• Exper:
• Consumatori
• Iden:ficarea
acestora
• Navigarea
prin
site
• Observa:e
TARGET
TARGET
• Fa
o
lista
cu
principalele
publicuri
ale
site-‐ului
• Priori:zeaza
principalele
categorii
de
public
• Fa
o
lista
cu
nevoile
fiecarei
categorii
de
public
in
rela:a
cu
website-‐ului
• Alege
reprezentan:
ai
categoriei
si
intreaba-‐i
ce
si-‐ar
dori
de
la
site
TARGET
• Cine
sunt
cei
mai
importan:
u:lizatori
ai
site-‐ ului?
• Care
sunt
mo:vele
pentru
care
acceseaza
site-‐ul?
• Care
este
frecventa
cu
care
acceseaza
site-‐ul?
• Ce
experienta
au
pe
Internet?
(durata)
• Ce
exper:za
au
in
rela:a
cu
computer-‐ul?
• Din
ce
tara
vin?
• Cum
obisnuiesc
sa
consume
informa:a?
PERSONAS
PERSONA
• Demografice
• Varsta,
sex,
educa:e,
ocupa:e,
venituri
etc.
• Psihografice
• Mo:va:i,
ac:vita:
frecvente
• Webografice
• • • • • Experienta
pe
internet
Locul
de
unde
acceseaza
site-‐ul
(acasa,
birou)
Tipul
de
conexiune
Site-‐urile
favorite
Etc.
SCENARII
DE
UTILIZARE
MARKETING
• ACHIZITIE
• RETENTIE
• CONVERSIE
ACHIZITIE
• • • • • • • Search
Engine
Op:miza:on
CAUTARI
Pay
Per
Click
MARKETING
AFILIAT
CAMPANII
DE
BANNERE
E-‐mail
MARKETING
PR
ONLINE
CAMPANII
OFFLINE
CONVERSIE
• • • • • • • Site
usability
Site
accesability
Design
Promisiunea
marcii
Crearea
de
con:nut
Oferirea
de
produse
relevante
Rela:i
cu
clien:i
RETENTIE
• • • • • • Promisiunea
marcii
E-‐mail
marke:ng
Managementul
clien:lor
Programe
de
fidelizare/loializare
Personalizarea
con:nutului
Personalizarea
serviciilor
DESIGN
When
I
am
working
on
a
problem,
I
never
think
about
beauty.
I
think
only
of
how
to
solve
the
problem.
But
when
I
have
finished,
if
the
solu:on
is
not
beau:ful,
I
know
it
is
wrong
Layout
tehnic
CREATOR
–
Brands
&
People
CAREGIVER
–
Brands
&
People
RULER
–
Brands
&
People
INNOCENT
–
Brands
&
People
EXPLORER
–
Brands
&
People
SAGE
–
Brands
&
People
HERO
–
Brands
&
People
OUTLAW
–
Brands
MAGICIAN
–
Brands
&
People
REGULAR
GUY
–
Brands
&
People
THE
LOVER
–
Brands
&
People
THE
JESTER
–
Brands
&
People
ACCESIBILITY
• • • • • •
Browsere
Sisteme
de
operare
Rezolu:i
Tipul
de
conexiune
Versiunea
de
flash
Java
Support
FAQ
Sa
faci
un
website
bun
nu
este
neaparat
iePin
Nu
toate
site-‐urile
se
afla
pe
internet
Un
website
are
un
front-‐end
si
un
back-‐end
(back-‐end-‐ul
poate
fi,
in
unele
cazuri,
chiar
mai
important)
Tipul
de
website
pe
care
il
propui
trebuie
sa
se
potriveasca
nivelului
de
integrare
a
instrumentelor
digitale
in
companie
Existenta
layout-‐ului
tehnic
mareste
sansele
ca
procesul
de
design
sa
nu
se
prelungeasca
inu:l
La
realizarea
unui
website
trebuie
implicat
departamentul
de
comunicare/PR
si
departamentul
de
management
Exista
4
aspecte
fundamentale
in
crearea
unui
website:
usability,
accesibility,
design
si
marke:ng
Un
site
trebuie
sa
aiba
indeplineasca
simultan
3
:puri
de
obiec:ve:
achizi:e,
conversie,
reten:e
sa
faci
un
website
AGENDA
• Ce
prinicipii
sa
aplicam
ca
website-‐ul
sa
devina
un
instrument
u:l
de
marke:ng
• Ce
sa
includem
intr-‐un
brief
de
realizare
de
website
Nu
toate
site-‐urile
sunt
la
fel
J
INTERNET
EXTRANET
INTRANET
Nu
toate
companiile
sunt
la
fel
J
Nivel
de
adop:e
Internet
Transformare
Integrare
Prospectare
Prezenta
E-‐mail
• Intregul
business
este
sprijnit
de
ac:vita:
bazate
pe
internet
(intern,
in
rela:a
cu
furnizorii
si
consumatorii)
• Site-‐ul
companiei
permite
op:uni
avansate
(de
comanda,
interac:une
online
etc.)
• Se
folosesc
casutele
de
e-‐mail
• Compania
isi
cauta
clien:
pe
Internet
• Compania
are
site
si
ofera
informa:i
si
despre
produse
si
servicii
• Compania
are
si
o
pagina
pe
internet
simpla
sau
e
prezenta
in
directoare
online
• In
companie
se
folosesc
casute
de
e-‐mail
• • • • •
E-‐business
E-‐commerce
E-‐marke:ng
E-‐communica:on
E-‐mail
Tipuri
de
site-‐uri
• Comert
electronic
(e-‐commerce)
• Emag.ro,
amazon.com
• Imagine
de
marca
(brand
building)
• prieteniis:udece.ro,
ariel.ro
• Firmax.ro
• realitatea.net,
iqads.ro,
hotnews.ro,
wall-‐street.ro
• Servicii
• Portal
/
site
media
• Aplica:e
/
soPware
• Social
media
• Facebook.com,
hi5.com
USABILITY
ACCESIBILITY
DESIGN
MARKETING
Cine
realizeaza
site-‐ul?
INTERN
• • • • CEO
Director
de
marke:ng
Director
de
comunicare
Departament
IT
EXTERN
• • • • • • Agen:i
de
comunicare
interac:va
Agen:i
de
web
design
Companii
de
soPware
Designeri
Programatori
Un
baiat
:)
DOs
in
alegerea
furnizorilor
Fa
o
lista
cu
mai
mul:
posibili
furnizori
(10-‐15)
Alege
maxim
3
pentru
a
cere
o
oferta
Verifica
portofoliile
si
proiectele
anterioare
Verifica
ce
servicii
pot
sa
ofere
(din
cele
de
care
tu
ai
nevoie)
• Intreaba
la
al:
clien:
• Intalneste-‐te
cu
ei
pentru
briefing
• Semneaza
contracul
• • • •
Ce
trebuie
sa
con:na
brief-‐ul
de
website?
PROCESUL
EVALUEAZA
SIT.
ACTUALA
CERCETEAZA
AUDIENTA
SETEAZA
OBIECTIVELE
DEFINESTE
STRATEGIA
IMPLEMENTEAZA
PROMOVEAZA
FRONTEND
BACKEND
(CMS)
WEBSITE
• • • • • •
SITUATIA
ACTUALA
ASPECTE
TEHNICE
OBIECTIVELE
SITE-‐ului
ASPECTE
CREATIVE
CONTINUTUL
SITE-‐ului
PROJECT
MANAGEMENT
SITUATIA
ACTUALA
• • • • • • • • • Despre
companie
Despre
piata
/
piete
Despre
produse
/
servicii
Despre
brand-‐uri
Contextul
lansarii
/
relansarii
site-‐ului
Performanta
actuala
a
site-‐ului
(par:
bune/par:
rele)
Istoria
site-‐ului
actual
Compe::e
Modalita:
anterioare
de
promovare
ASPECTE
TEHNICE
• Hos:ng
• Domenii
• Baza
de
date
(nivelul
de
integrare
cu
noua
versiune)
• Integrarea
cu
alte
site-‐uri
partenere
OBIECTIVE
• Obiec:vele
site-‐ului
la
nivelul
planului
de
marke:ng
• Obiec:vele
de
comunicare
ale
site-‐ului
• Cum
va
fi
masurat
succesul
noii
versiuni
ASPECTE
CREATIVE
• • • • • • •
Pozi:onarea
marcii
Indica:i
despre
strategia
de
comunicare
a
marcii
Elemente
de
design
obligatorii
Concept
crea:v
(daca
exista)
Layout
tehnic
(Wireframes)
Restric:i
corpora:ve
/
legale
etc.
Integrarea
cu
alte
ac:vita:
de
marke:ng
CONTINUT
• Arhitectura
informa:ei
• Specifica:i
pentru
CMS
(Content
Management
System)
• Con:nutul
propus
• Cine
va
furniza
con:nutul?
Pana
cand?
• Cine
va
administra
con:nutul?
• Cat
de
des
va
fi
actualizat
con:nutul?
• Ce
con:nut
va
fi
ob:nut
de
la
u:lizatori?
PROJECT
MANAGEMENT
• • • • • Buget
Timing
Cine
aproba
Contacte
(tehnic,
marke:ng)
Cine
a
completat
brief-‐ul
COSTURI
COSTURI
• Inregistrarea
domeniului
(hep://rotld.ro)
• Gazduire
/
hos:ng
• Crearea
site-‐ului
(design,
programare,
produc:e
foto/audio/text
etc.)
• Promovare
• Intre:nere
USABILITY
USABILITY
SATISFACTIA
PENTRU
USER
EFICACITATE
EFICIENTA
• • • •
Unde
ma
aflu?
De
unde
vin?
Unde
as
putea
sa
ma
duc?
Unde
este
home
page-‐ul?
Cum
faci
un
site
mai
usable?
• • • • • • • • Status-‐uri
in
pagina
Copywri:ng
pentru
web
Limbaj
pe
intelesul
publicului
:nta
Scenarii
extreme
Consistenta
si
standarde
Mesaje
de
eroare
specifice
Op:uni
de
navigare
vizibile
Design
Cum
testezi
usability?
• Exper:
• Consumatori
• Iden:ficarea
acestora
• Navigarea
prin
site
• Observa:e
TARGET
TARGET
• Fa
o
lista
cu
principalele
publicuri
ale
site-‐ului
• Priori:zeaza
principalele
categorii
de
public
• Fa
o
lista
cu
nevoile
fiecarei
categorii
de
public
in
rela:a
cu
website-‐ului
• Alege
reprezentan:
ai
categoriei
si
intreaba-‐i
ce
si-‐ar
dori
de
la
site
TARGET
• Cine
sunt
cei
mai
importan:
u:lizatori
ai
site-‐ ului?
• Care
sunt
mo:vele
pentru
care
acceseaza
site-‐ul?
• Care
este
frecventa
cu
care
acceseaza
site-‐ul?
• Ce
experienta
au
pe
Internet?
(durata)
• Ce
exper:za
au
in
rela:a
cu
computer-‐ul?
• Din
ce
tara
vin?
• Cum
obisnuiesc
sa
consume
informa:a?
PERSONAS
PERSONA
• Demografice
• Varsta,
sex,
educa:e,
ocupa:e,
venituri
etc.
• Psihografice
• Mo:va:i,
ac:vita:
frecvente
• Webografice
• • • • • Experienta
pe
internet
Locul
de
unde
acceseaza
site-‐ul
(acasa,
birou)
Tipul
de
conexiune
Site-‐urile
favorite
Etc.
SCENARII
DE
UTILIZARE
MARKETING
• ACHIZITIE
• RETENTIE
• CONVERSIE
ACHIZITIE
• • • • • • • Search
Engine
Op:miza:on
CAUTARI
Pay
Per
Click
MARKETING
AFILIAT
CAMPANII
DE
BANNERE
E-‐mail
MARKETING
PR
ONLINE
CAMPANII
OFFLINE
CONVERSIE
• • • • • • • Site
usability
Site
accesability
Design
Promisiunea
marcii
Crearea
de
con:nut
Oferirea
de
produse
relevante
Rela:i
cu
clien:i
RETENTIE
• • • • • • Promisiunea
marcii
E-‐mail
marke:ng
Managementul
clien:lor
Programe
de
fidelizare/loializare
Personalizarea
con:nutului
Personalizarea
serviciilor
DESIGN
When
I
am
working
on
a
problem,
I
never
think
about
beauty.
I
think
only
of
how
to
solve
the
problem.
But
when
I
have
finished,
if
the
solu:on
is
not
beau:ful,
I
know
it
is
wrong
Layout
tehnic
CREATOR
–
Brands
&
People
CAREGIVER
–
Brands
&
People
RULER
–
Brands
&
People
INNOCENT
–
Brands
&
People
EXPLORER
–
Brands
&
People
SAGE
–
Brands
&
People
HERO
–
Brands
&
People
OUTLAW
–
Brands
MAGICIAN
–
Brands
&
People
REGULAR
GUY
–
Brands
&
People
THE
LOVER
–
Brands
&
People
THE
JESTER
–
Brands
&
People
ACCESIBILITY
• • • • • •
Browsere
Sisteme
de
operare
Rezolu:i
Tipul
de
conexiune
Versiunea
de
flash
Java
Support
FAQ
Sa
faci
un
website
bun
nu
este
neaparat
iePin
Nu
toate
site-‐urile
se
afla
pe
internet
Un
website
are
un
front-‐end
si
un
back-‐end
(back-‐end-‐ul
poate
fi,
in
unele
cazuri,
chiar
mai
important)
Tipul
de
website
pe
care
il
propui
trebuie
sa
se
potriveasca
nivelului
de
integrare
a
instrumentelor
digitale
in
companie
Existenta
layout-‐ului
tehnic
mareste
sansele
ca
procesul
de
design
sa
nu
se
prelungeasca
inu:l
La
realizarea
unui
website
trebuie
implicat
departamentul
de
comunicare/PR
si
departamentul
de
management
Exista
4
aspecte
fundamentale
in
crearea
unui
website:
usability,
accesibility,
design
si
marke:ng
Un
site
trebuie
sa
aiba
indeplineasca
simultan
3
:puri
de
obiec:ve:
achizi:e,
conversie,
reten:e
