lc3-2010-clase no.1

Diseño de Medios Digitales

@jorgebarahona

junio, 2010

miércoles 30 de junio de 2010

Qué es un MD?• Pantallas

• Internet

• Móviles

• TV

• Juegos

• Consolas de comando


E S T R A T E G I A

C O M P O R T A M I E N T OD E L A S

P E R S O N A S

A R Q U I T E C T U R A D EL A I N F O R M A C I Ó N

D I S E Ñ O D EI N T E R A C C I Ó ND I S E Ñ O D E

I N T E R F A Z

D I S E Ñ O D EC Ó D I G O S

D E I N T E R F A Z

es

tr

uc

tu

ra

r

pr

od

uc

ir

p l a n i f i c a r

1

2

3

4

5

6

Brie

fin

g > C

om

po

rta

mie

nto

De

l C

on

sum

idor

> Benchm

arking Expert Review > Evaluación Heurística > Eyetracking Diseño de C

ontenid

os > Map

as d

e N

av

eg

ació

n > W

ire

fra

me

s d

e C

on

ten

ido

s

Pro

gra

ma

ció

n X

HT

ML

> CS

S > C

apa A

jax Tipografía > Cromática > Diseño de Iconografía > Maquetación Modelo

s Menta

les > M

apas

de I

nte

racció

n > W

ire

fra

me

s

M E TO D O L O G Í ADiseño de Experiencia Digital


Estrategia

• Breif

• Entrevistas guiadas

• Benchmark


E S T R A T E G I A

B R I E F I N G

C O N V E R S A C I O N E SG U I A D A S

B E N C H M A R K

¿ q u é ?

1

2

P LA N

I FI C

A R

BRIEF >> B

rief > DeBrief > Contra Brief CONVERSACIONES >> Etnografía > Personas y Escenarios

BENCHMARK >> Calificación de los servicios > Anotaciones d

el expert

o > T

rack

ing

de la

mar

ca


P E R S O N A S¿ q u i é

ne s ?

¿ c uá n

do

?

¿ c ó m o ?


Comportamiento de las personas

• Expert Review

• Personas & Escenarios

• Evaluación Heurística

• Eyetracking


E X P E R TR E V I E W

E VA L U A C I Ó NH E U R Í S T I C A

E Y E T R A C K I N G

1

2

3

PL A

NI F

I CA

R

E S T R U C T U R A R


P E R S O N A S

A R Q U I T E C T U R AD E L A

I N F O R M A C I Ó N

E S T R A T E G I A


Arquitectura de la Información

• Diseño de Contenidos

• Mapas de Navegación

• Wireframes


D I S E Ñ O D EC O N T E N I D O S

M A PA S D EN AV E G A C I Ó N

W I R E F R A M E S D E C O N T E N I D O S

1

3

4

PL A

NI F

I CA

R


DISEÑO

DE

CO

N

TE

NID

OS

>> Ca

rd

so

rtin

g > L

ing

ûis

tic

a

A R Q U I T E C T U R AD E L A

I N F O R M A C I Ó N

E S T R A T E G I A

D I S E Ñ O D EI N T E R A C C I Ó N


Diseño de Interacción

• Mapas de la Interacción

• Wireframes ricos

• Modelos mentales


M O D E L O SM E N TA L E S

M A PA S D EI N T E R A C C I Ó N

W I R E F R A M E S R I C O S

1

4

5

PL A

NI F

I CA

R


C O N S T R U I R

D I S E Ñ O D E I N T E R A C C I Ó N

E S T R A T E G I A

D I S E Ñ O D EI N T E R F A C E S


Diseño Visual

• Diseño Tipográfico

• Diseño Cromático

• Lenguaje de Iconos

• Maquetación


T I P O G R A F Í A

C R O M Á T I C A

D I S E Ñ O D EI C O N O G R A F Í A

1

5

6

PL A

NI F

I CA

R

C O N S T R U I R

D I S E Ñ O D E I N T E R F A Z

E S T R A T E G I A

M A Q U E T A C I Ó N

D I S E Ñ O D EC Ó D I G O S

D E I N T E R F A Z


Diseño de Códigos de la Interfaz

• XHTML

• CSS

• Ajax


P R O G R A M A C I Ó NX H T M L

P R O G R A M A C I Ó NC S S

P R O G R A M A C I Ó NC A PA A J A X

1

6P

L AN

I FI C

AR

C O N S T R U I R

D I S E Ñ O D E C Ó D I G O S D E

I N T E R F A Z

E S T R A T E G I A

O T R O SL E N G U A J E S


preguntas


lc3-2010-clase no.1

Education