El documento discute los aspectos fundamentales del diseño emocional en las páginas web. Explica que el diseño debe generar emociones positivas en los usuarios a través de elementos como el ritmo visual, los colores evocadores, las tipografías con personalidad y la usabilidad. También analiza los factores que definen un buen diseño como la armonía, la jerarquía clara y el cuidado de los detalles.

1. El
Diseño
Emocional
en
la
web
por María José Castañer

2. El
Diseño
Emocional
en
la
web
INDICE
Antecedentes
Diseño
EMOCIONAL
¿cuál
es
buen
diseño
y
cuál
malo?
Ofrecer
EXPERIENCIAS
El
PROCESO
de
diseño
María
José
Castañer

3. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
¿cómo
es
eso
de
que
las
webs
generan
emociones?
La
emoción
es
“agitación
de
ánimo
—violenta
o
apacible—
que
nace
de
alguna
causa
pasajera.”
“Diccionario
de
palabras
afines”.
Josep
M.
Albaigès.
Ed.
Espasa.
María
José
Castañer

4. El
Diseño
Emocional
en
la
web
[antecentes]
SolluBa:
399
días Publiasa:
960
días
XION
FotograGa
y
Publicidad:
87
días Vuelta
y
Media:
54
días
Color
Comunicación:
323
días Index
Producciones:
56
días
Grupo
Camaleón:
219
días Visualtwoeyes:
desde
los
19
años
Actúa
CreaBvidad
(actualmente
Thinkin):
91
días MAGS:
1.500
días
TOTAL:
3.726
días
María
José
Castañer

5. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
EL
SENTIDO
COMÚN:
las
modas
y
tendencias.
“—Cuando
empezó
a
coleccionar
arte
¿era
sólo
para
decorar
su
casa?
—
Si
y
no.
Tenía
algunas
cosas
y
las
colgué
en
la
pared.
Pero
cuando
compras
algo
que
no
encaja
en
tu
casa
y
Genes
que
guardarlo
en
el
trastero,
te
conviertes
oficialmente
en
coleccionista.”
“Me
llamo
Charles
Saatchi
y
soy
un
artehólico”.
Charles
Saatchi.
Ed.
Phaidon.
María
José
Castañer

11. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
LA
ARMONÍA:
la
Sucesión
de
Fibonacci.
Es
la
pauta
que
siguen
determinados
fenómenos
de
la
naturaleza
y
que
permite
construir
la
espiral
de
Alberto
Durero
—arGsta
alemán
del
Renacimiento
conocido
por
sus
grabados—
en
la
que
los
puntos
sobre
los
que
se
traza
se
corresponden
con
rectángulos
cuyos
lados
son
dos
números
de
la
sucesión
de
Fibonacci.
María
José
Castañer

13. M wM C
C w n f.
n
n M é
a e e3
té¿ M

16. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
Básicamente...
Aquello
que
nos
resulte
agradable
a
la
vista
‘seguramente’
tendrá
una
buena
proporción
áurea.
María
José
Castañer

17. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
También
existen
otros
factores...
el
ritmo
visual
emoGvidad
de
los
colores
personalidad
de
las
6pogra8as
la
gesGón
del
espacio
el
orden
de
las
jerarquías
de
importancia
el
mimo
por
los
detalles
la
usabilidad
María
José
Castañer

18. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
RITMO:
Esencialmente
repeGción
y
estructura
(separa
al
orden
del
caos).
María
José
Castañer

22. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
COLORES:
Genen
la
capacidad
de
evocar
ciertos
aspectos
emocionales
y
fisiológicos.
María
José
Castañer

29. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
TIPOGRAFÍAS:
son
transmisores
de
mensajes
muy
efecGvos.
Gracias
a
sus
formas,
jerarquías,
rasgos
diferenciadores,
inclinaciones...
pueden
llegar
a
evocar
un
recuerdo,
un
senGmiento.
Cada
detalle
de
una
Gpo
está
pensada
para
transmiGr
o
reforzar
un
mensaje.
María
José
Castañer

34. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
ESPACIO:
transmite
volúmenes,
realza
el
mensaje,
crea
interés
y
llama
la
atención.
María
José
Castañer

39. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
La
JERARQUÍA
en
los
elementos
de
nuestro
diseño
puede
ser
determinante
a
la
hora
de
clarificar
la
lectura
de
la
información.
No
separarlas
adecuadamente
pone
en
riesgo
nuestro
mensaje
y
la
fidelidad
de
nuestro
lector.
María
José
Castañer

44. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
USABILIDAD
Cuando
nos
surja
la
oportunidad,
hagamos
la
vida
fácil
a
los
demás,
así
nos
querrán
más.
María
José
Castañer

49. El
Diseño
Emocional
en
la
web
[¿cuál
es
buen
diseño
y
cuál
malo?]
Mimar
LOS
DETALLES
“Sin
personalidad,
eres
una
mosca.”
“Piensa,
es
grabs.”
Principio
72.
Ed.
Planeta
María
José
Castañer

52. El
Diseño
Emocional
en
la
web
¿Y
por
qué
todo
cambia
constantemente?
¿acaso
las
webs
caducan?
“Si
en
los
úlGmos
años
no
has
descartado
una
opinión
mayoritaria
o
bien
adoptado
una
nueva,
comprueba
si
Genes
pulso.
Es
posible
que
estés
muerto”.”
Frank
Geleg
Burgess,
escritor
y
humorista.
María
José
Castañer

53. El
Diseño
Emocional
en
la
web
¿Y
por
qué
son
tan
importantes
las
emociones?
Todos
nuestros
pensamientos
influyen
en
nuestro
desarrollo
humano.
Desde
el
aspecto
isico,
las
experiencias
que
vivimos,
las
personas
que
se
cruzan
con
nosotros
en
la
acera,
las
acbvidades
que
realizamos...
hasta
nuestros
pensamientos
y
deseos
más
profundos
afectan
a
grados
superiores
de
nuestras
conexiones
sociales.
Por
ello,
comienza
por:
“...decir
algo
posiGvo
para
obtener
algo
posiGvo.”
María
José
Castañer

54. El
Diseño
Emocional
en
la
web
[ofrecer
experiencias]
Ofrezcamos
EXPERIENCIAS.
Las
sensaciones
visuales.
¿Qué
sen]s
al
ver
esto?
apaka alegría
aprensión diversión
agobio sabores
estrés felicidad
desasosiego pracbcidad
anbpaka armonía
María
José
Castañer

60. El
Diseño
Emocional
en
la
web
[ofrecer
experiencias]
Ofrezcamos
EXPERIENCIAS.
Las
conexiones
emocionales.
¿A
qué
os
recuerda
o
evoca
lo
siguiente?
a
mi
ex-­‐novia a
mis
futuras
vacaciones
al
clásico
seiscientos a
mi
negocio
a
las
botas
de
agua a
mi
familia
al
tapete
almidonado
del
comedor
de
mi
abuela a
mi
nueva
casa
al
CASIO
de
toda
la
vida a
mi
futura
profesión
María
José
Castañer

65. usabilidad
feeling
armonía

66. El
Diseño
Emocional
en
la
web
[ofrecer
experiencias]
Consecuencias
racionales
(lógicas)
de
nuestro
diseño.
Si
lo
que
la
gente
percibe
es
un
feeling
posiGvo,
estaremos
construyendo
una
Lovemark.
Sino,
seamos
realistas,
somos
cutres.
María
José
Castañer

67. El
Diseño
Emocional
en
la
web
[ofrecer
experiencias]
Las
LOVEMARKS
empaka
+
prescriptores
+
fidelidad
“Todos
necesitamos
un
poco
de
Sur
para
poder
ver
el
Norte.”
Campaña
Cruzcampo
Verano
2011.
Contrapunto
Madrid.
María
José
Castañer

69. El
Diseño
Emocional
en
la
web
[ofrecer
experiencias]
Realmente
el
Sur
es
aquel
6món
que
nos
lleva
de
un
modo
inconsciente
por
caminos
que
nos
hace
senGr
realizados.
¿Por
qué
no
ayudar
a
que
el
resto
de
las
personas,
que
están
cerca
de
nosotros,
sientan
lo
mismo?
El
posiGvismo
se
contagia
en
un
porcentaje
mayor
que
el
negaGvismo
y,
según
Eduard
¡SE
POSITIVO!
Punset,
está
demostrado
que
son
más
felices
aquellos
que
6enen
muchos
¡SE
AUTÉNTICO!
“amigos”
aunque
estos
sean
superficiales.
¡SE
HONESTO!
María
José
Castañer

71. El
Diseño
Emocional
en
la
web
[ofrecer
experiencias]
¿Qué
bene
de
especial
una
LOVEMARK?
‣ transmite
op6mismo
(cosa
que
nos
hace
“feel
good”).
‣ comunica
una
promesa
(que
cumplirá).
‣ Gene
esencia,
propósito,
misión
y
visión...
6ene
valores.
‣ nos
senGmos
iden6ficados
con
ella
(secretos
de
amigos)
‣ seríamos
capaces
de
pelear
por
ella
(lealtad/fútbol/amor)
‣ Genen
un
misterio
que
las
hace
interesantes
y
llamaGvas
‣ generan
sueños
idílicos,
historias
y
experiencias
memorables
‣ tocan
nuestros
5
sen6dos
‣ dialogan
ínGmamente
conGgo
mediante
mensajes
que
sólo
tú
enGendes
(experiencia/heart)
María
José
Castañer

72. El
Diseño
Emocional
en
la
web
[el
proceso
de
diseño]
Valoremos
LOS
PROCESOS
de
diseño.
Pero
de
verdad,
que
no
es
cosa
de
5
min.
“Todo
el
mundo
pinta
y,
además,
es
arGsta.”
María
José
Castañer

73. El
Diseño
Emocional
en
la
web
[el
proceso
de
diseño]
PROCESOS.
Desde
el
cliente.
Haz
tus
deberes
y
desarrolla
tu
marke6ng
interno
porque,
si
tu
familia
no
cree
en
],
¿dónde
demonios
vas? A
Encuentra
tu
FARO,
elabora
tu
Plan
Estratégico. B
Sé
curioso
y
sincero,
no
le
tengas
miedo
al
DAFO.
¡Es
diverGdo
y
revelador!
C
María
José
Castañer

74. El
Diseño
Emocional
en
la
web
[el
proceso
de
diseño]
PROCESOS.
Desde
el
estudio
de
diseño.
Poned
en
marcha
un
COHERENTE
Plan
de
Acción:
con
el
CORE
del
cliente.
con
el
producto/servicio.
con
el
PO
(¿hablamos
el
mismo
idioma?).
con
el
entorno
de
vuestro
cliente.
María
José
Castañer

75. El
Diseño
Emocional
en
la
web
[el
proceso
de
diseño]
PROCESOS.
Desde
el
estudio
de
diseño.
Crea
un
EQUIPO,
aunque
sólo
seáis
dos:
Coordinación
del
equipo
de
diseño
con
el
cliente.
Partnership
(desarrollar
la
confianza,
‘hablar
el
mismo
idioma’,
adquirir
prácGca
y
opGmizar
el
rendimiento).
María
José
Castañer

76. El
Diseño
Emocional
en
la
web
[el
proceso
de
diseño]
Valoremos
EL
RESULTADO
del
trabajo
de
los
especialistas.
Pero
de
verdad,
que
a
veces
se
necesita
inverbr
más
de
6
meses.
María
José
Castañer

94. El
Diseño
Emocional
en
la
web
[el
proceso
de
diseño]
MI
parBcular
CONCLUSIÓN:
cuando
el
cliente
parbcipa
del
proceso
como
parte
del
equipo
creabvo,
nos
enriquecemos
todos
y
pasamos
a
ser
unas
Lovemarks
mútuas.
Así
que...
¿repebmos?
María
José
Castañer

95. El
Diseño
Emocional
en
la
web
Muchas
gracias
por
María
José
Castañer
twifer:
@castaner
vuestra
atención. blog:
visualtwoeyes.tumblr.com
work:
www.manuelgaldon.com