11 - diseno interaccion - metodologia de diseno

20
Diseño de Interacción Diseño de Interacción Prof. Marcelo Santos Prof. Marcelo Santos - @celoo - @celoo Metodología de Diseño Digital 1er semestre - 2012

description

Algunas breves orientaciones para pautar el diseño digital de interfaces

Transcript of 11 - diseno interaccion - metodologia de diseno

Page 1: 11 - diseno interaccion - metodologia de diseno

Diseño de InteracciónDiseño de InteracciónProf. Marcelo Santos Prof. Marcelo Santos - @celoo- @celoo

Diseño de InteracciónDiseño de InteracciónProf. Marcelo Santos Prof. Marcelo Santos - @celoo- @celoo

Metodología de Diseño Digital

1er semestre - 2012

Page 2: 11 - diseno interaccion - metodologia de diseno

¿Cómo sintetizar todo el trabajo en

una interface?

Page 3: 11 - diseno interaccion - metodologia de diseno

3 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Métodos

• Referencias– Benchmark = mismo rubro– Otros rubros = mismo público, sensación, tipo de

interacción

• Tipos de referencias1.Conceptuales2.Visuales3.Multimedia4.Cinéticas5.Perceptivas

Page 4: 11 - diseno interaccion - metodologia de diseno

4 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

1. Referencias conceptuales

• Más que el mismo ¨rubro¨, identificar mismo ¨concepto¨

• Creatividad

• Seguridad

• Cercanía

• Sencillez, etc.

Page 5: 11 - diseno interaccion - metodologia de diseno

5 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

2. Referencias visuales

• Tipografía

• Paleta de colores

• Geometría

• Diagramación

Page 6: 11 - diseno interaccion - metodologia de diseno

6 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

AI + Diseño

Page 7: 11 - diseno interaccion - metodologia de diseno

7 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

3. Referencias multimedia

• Texto

• Documentos

• Audio

• Video

• Podcast

• Lenguajes híbridos

Page 8: 11 - diseno interaccion - metodologia de diseno

http://www.pbs.org/wgbh/pages/frontline/digitalnation/view/

Page 9: 11 - diseno interaccion - metodologia de diseno

9 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

4. Referencias cinéticas

• Movimiento

• Animación

• Interacción

• Estructura narrativa

Page 10: 11 - diseno interaccion - metodologia de diseno

10 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Map of the Market (13/11/08)

Page 11: 11 - diseno interaccion - metodologia de diseno

11 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Map of the Market (14/11/08)

Page 12: 11 - diseno interaccion - metodologia de diseno

12 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Manifiesto Primo

Page 13: 11 - diseno interaccion - metodologia de diseno

13 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Cognitus – Diagrama de las ciencias

Page 14: 11 - diseno interaccion - metodologia de diseno

14 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Cognitus = Arte + Ciencia + Filosofía

Page 15: 11 - diseno interaccion - metodologia de diseno

15 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Amazing Amazon

Page 16: 11 - diseno interaccion - metodologia de diseno

16 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

5. Referencias perceptivas

• “Look and Feel”

• Sentimientos

• Sensaciones

Page 17: 11 - diseno interaccion - metodologia de diseno

17 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Page 18: 11 - diseno interaccion - metodologia de diseno

18 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Page 19: 11 - diseno interaccion - metodologia de diseno

19 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Examen

• Desarrollar el diseño basado en:– Wireframe (AI) home y una interna (subhome)

– Objetivos– Público-objetivo– Referencias (inspiración)

• Empezar a preparar presentación– Presentación: Lunes, 25/06– Tiempo máximo = 30 minutos

Page 20: 11 - diseno interaccion - metodologia de diseno

20 Prof. Marcelo Santos - @celooUNIACC – 1º sem 2012

Examen – 25/06

• Presentación (aprox. 15-20 diapositivas)– Contexto (1)– Benchmark (2)– Objetivos (1)– Metodología (1)– Inventario de contenido (1)– Diseño de Información (6)

• Estructuras de clasificación• Card Sorting• Jerarquía de contenido• Wireframes

– Diseño de Interfaz• Referencias (2)• Concepto (1)• Diseño (3)