Este documento presenta una introducción al diseño de medios digitales. Brevemente describe los diferentes tipos de medios digitales como pantallas, internet, móviles y consolas de juegos. Luego resume las diferentes etapas del proceso de diseño de medios digitales, incluyendo la planificación estratégica, el análisis del comportamiento de los usuarios, la arquitectura de la información, el diseño de interacción y visual, y el desarrollo de códigos de interfaz.

1. Diseño de Medios Digitales
@jorgebarahona
junio, 2010
miércoles 30 de junio de 2010

2. Qué es un MD?
• Pantallas
• Internet
• Móviles
• TV
• Juegos
• Consolas de comando
miércoles 30 de junio de 2010

3. miércoles 30 de junio de 2010

4. Evaluación Heurística > Eye
ev iew > trac
pert R k in
g
Ex Dis
g eñ
kin od
ar eC
hm 2 on
enc te
ni
>B 3 d
or
os
id
>
m
M
su
ap
on
C O M P O RTA M I E N TO
as
lC
de
DE LAS
De
Na
to
veg
PERSONAS
ien
ac i
E S T R AT E G I A
am
ar
ón >
port
ur
Wire
ct
Com
ru
frames
st
Briefing >
e
planificar
de Contenidos
ARQUITECTURA DE
1 DISEÑO DE LA INFORMACIÓN
4
CÓDIGOS
DE INTERFAZ
s
Prog
e
ram
DISEÑO DE
ra
iref
ma
DISEÑO DE pr INTERACCIÓN
>W
ció
od
nX
INTERFAZ
n
uc
ció
HT
ir
ac
ML
er
nt
>
eI
CS
d
S
as
>C
ap
pa 6 M
a
Aj Dise l >
ño de Exp riencia Digita
METODOLOGÍA
ax es
al
T ip e 5
e nt
og sM
raf
ía d elo
> Cr Mo
omá ión
t ica > etac
D iseño de Iconografía > Maqu
miércoles 30 de junio de 2010

5. Estrategia
• Breif
• Entrevistas guiadas
• Benchmark
miércoles 30 de junio de 2010

6. miércoles 30 de junio de 2010

7. tra Brief
> Con CON
r ief VER
eB SA
CIO
f >D NE
rie S
>> E
F
>> B tn
I E og
BR ra
f
ía
>P
er
AR
so
na
IC
¿c
BRIEFING
sy
uá
NIF
Es
nd
cen
PLA
o?
?
ario
es
E S T R AT E G I A
én
s
ui
¿q
¿qué? CONVERSACIONES
GUIADAS
1
ca
¿cómo?
la mar
g de
BENCHMARK
kin
C O M P O R TA M I E N T O
rac
DE LAS
>T
to
PERSONAS
er
xp
le
de
e
s
n
io
2
t ac
A no
>
ios
BEN er vic
CHM
e los s
A R K >> C
alificación d
miércoles 30 de junio de 2010

8. Comportamiento de
las personas
• Expert Review
• Personas & Escenarios
• Evaluación Heurística
• Eyetracking
miércoles 30 de junio de 2010

9. miércoles 30 de junio de 2010

10. 2
C O M P O R TA M I E N T O
DE LAS
PERSONAS
R
E S T R AT E G I A
ICA
PLANIF
EXPERT
REVIEW
1
ARQUITECTURA
DE LA
INFORMACIÓN
E VA L U A C I Ó N
HEURÍSTICA
EYETRACKING
ES
TR
CT 3
U
UR
AR
miércoles 30 de junio de 2010

11. Arquitectura de la
Información
• Diseño de Contenidos
• Mapas de Navegación
• Wireframes
miércoles 30 de junio de 2010

12. miércoles 30 de junio de 2010

13. CT URAR
R U
E ST DI
SE
ÑO
3 DE
CO
N
TE
N
ID
ARQUITECTURA
O
S
DE LA
>> C
INFORMACIÓN
ar
dso
rtin
R
E S T R AT E G I A
ICA
g >L
PLANIF
ingû
DISEÑO DE
istica
CONTENIDOS
1
DISEÑO DE
INTERACCIÓN
M A PA S D E
N AV E G A C I Ó N
WIREFRAMES
DE CONTENIDOS
4
miércoles 30 de junio de 2010

14. Diseño de Interacción
• Mapas de la Interacción
• Wireframes ricos
• Modelos mentales
miércoles 30 de junio de 2010

15. miércoles 30 de junio de 2010

16. CT URAR
T RU
ES
4
DISEÑO DE
INTERACCIÓN
R
E S T R AT E G I A
ICA
PLANIF
MODELOS
M E N TA L E S
1
DISEÑO DE
INTERFACES
M A PA S D E
INTERACCIÓN
WIREFRAMES
RICOS
CO
NS
TR 5
UI
R
miércoles 30 de junio de 2010

17. Diseño Visual
• Diseño Tipográfico
• Diseño Cromático
• Lenguaje de Iconos
• Maquetación
miércoles 30 de junio de 2010

18. miércoles 30 de junio de 2010

19. R
ST RUI
C ON
5
DISEÑO DE
INTERFAZ
R
E S T R AT E G I A
ICA
PLANIF
TIPOGRAFÍA
DISEÑO DE
1 CÓDIGOS
DE INTERFAZ
M A Q U E TA C I Ó N
CROMÁTICA
DISEÑO DE
ICONOGRAFÍA
6
miércoles 30 de junio de 2010

20. Diseño de Códigos
de la Interfaz
• XHTML
• CSS
• Ajax
miércoles 30 de junio de 2010

21. miércoles 30 de junio de 2010

22. R
ST RUI
N
CO
6
DISEÑO DE
CÓDIGOS DE
INTERFAZ
R
ICA
PLANIF
E S T R AT E G I A
PROGRAMACIÓN
1 XHTML
OTROS
LENGUAJES PROGRAMACIÓN
CSS
PROGRAMACIÓN
C A PA A J A X
miércoles 30 de junio de 2010

23. preguntas
miércoles 30 de junio de 2010