sketching - ux/ui

31
Sketching DÍA 4 ESDI Escola Superior de Disseny

Upload: xavi-cardet

Post on 14-Feb-2017

70 views

Category:

Design


4 download

TRANSCRIPT

Page 1: Sketching - UX/UI

Sketching

DÍA 4

ESDIEscola Superior de Disseny

Page 2: Sketching - UX/UI

Revisión

SKETCH TEST

ITERA sketch

WIREFRAME PROTOTYPE

DESIGN

DEVELOP

ITERA wireframe

ITERA prototipo

TEST TEST

COPY

QA

Producto

AI

Page 3: Sketching - UX/UI

¿Dónde nos encontramos

Fidelidad de tu diseño

Tiempo

Page 4: Sketching - UX/UI

Grandma's UX advice

Sketching = DrawingWireframing = Designing

Page 5: Sketching - UX/UI

“Sketching separa el diseño de las decisiones de proceso, no debemos aferrarnos al Alfa y Omega del diseño”

Es rápido, barato y con un nivel alto de iteración

Comunica lo suficiente como para que se pueda entender

Podemos rehacer las veces que queramos

Tus sketchs son exploratorios, según pase el tiempo menos ambiguos van a ser.

¿Dónde nos encontramos

Page 6: Sketching - UX/UI

Nunca empieces a hacer wireframes sin antes tener plasmada tu idea con un papel y un lápiz

Grandma's UX advice

Page 7: Sketching - UX/UI

Fíjate en el flujo, la navegación, las acciones y “estructura”

Page 8: Sketching - UX/UI

Sketching

Detect

Page 9: Sketching - UX/UI

Funcionalidades

FuncionalidadesDetecta todas las funcionalidades

(individualmente)

10 min

Page 10: Sketching - UX/UI

Funcionalidades“function box”

PosibleImposible

Necesaria (vital)

“nice to face”

Poner en común todas las ideas

5 min

Page 11: Sketching - UX/UI

Funcionalidades

Agrupa y relaciona las funcionalidades(Procesos)

10 min

Page 12: Sketching - UX/UI

Funcionalidades

LISTA todas las pantallasMarca las que son principales

5 min

Page 13: Sketching - UX/UI

Sketching

Define

Page 14: Sketching - UX/UI

Papel y lápiz

Page 15: Sketching - UX/UI

Anotaciones

Empieza por aquíResalta y pon atención

Mira aquí!

Push & Pull Navegación

Page 16: Sketching - UX/UI

HerramientasLineas

FormasSímbolos & iconos

texto

Sketching Pills

Page 17: Sketching - UX/UI

Palabras

Sketching Pills

MAYUSCULAS

Page 18: Sketching - UX/UI

PalabrasMuestra, NO hables

Bla bla bla

Sketching Pills

Page 19: Sketching - UX/UI

RÁPIDO no busques la perfección

Sketching Pills

Page 20: Sketching - UX/UI

Explora las ideas

No las refines

Sketching Pills

Page 21: Sketching - UX/UI

1 2

3 4 5

Page 22: Sketching - UX/UI

Aplica % para la priorización de contenido

20%Preguntas freq

30%Tabla de precios y contenidos

50%Título + CTA + Precio

Sketching Pills

Page 23: Sketching - UX/UI

Utiliza templates

Sketching Pills

http://sneakpeekit.com/

Page 24: Sketching - UX/UI

Utiliza templates

Sketching Pills

Page 25: Sketching - UX/UI

SketchingBoard

Sketching Pills

Page 26: Sketching - UX/UI

10 segundos x pantalla

Sketching Pills

Dibujar cada pantalla por separado(Individualmente)

Page 27: Sketching - UX/UI

Poner en común las pantallas

15 min

Sketching Pills

¿Tenéis diferentes versiones? ¡Guardarlas!

Page 28: Sketching - UX/UI

SketchingBoard

Sketching Pills

Page 29: Sketching - UX/UI

Simular el flujo y detectar si falta información o pantallas

10 min

Sketching Pills

Page 30: Sketching - UX/UI

“Sketchea” Conversa Itera Testea

Sketching Pills

Page 31: Sketching - UX/UI

¡Feliz navidad!