prototipado wireframes y información, arquitectura de · 2018. 10. 17. · prototipado ¡hola! mi...

Arquitectura de Información, Wireframes y Prototipado

¡Hola!Mi nombre es Ramón Lopez

Fundador de Mijo! Brands en donde, desde hace 10 años, hemos desarrollado más de 200 proyectos web y apps

2

¿Cómo asegurar que comunicamos exitósamente el scope del proyecto con cada

uno de ellos?

3

Cada cliente es diferente

“Yo pensé que funcionaría

diferente— El cliente viendo el sitio de pruebas

(o el de producción)

4

##WCGDL

5

Mi actual proceso de planeación está formado por 4 pasos

Definir el alcance del

proyecto

6

Diseñar el Wireframe

Desarrollar el Prototipo

Repetirusando el feedback

##WCGDL

7

¿Por qué funciona este proceso?No somos los primeros intentando resolver el problema

##WCGDL

Varias metodologías han surgido como respuesta y aunque diferentes, en su esencia comparten los mismos principios.

8

“Early Delivery &

Continuous improvement— Agile

9

“Proceso Iterativo

para validar una idea— Design Thinking

10

“Indudablemente fallaremos,

la clave es fallar rápido y barato

— A Senior Developer

11

“Echando a perder

se aprende— A Windows Vista Developer

12

##WCGDL

No todo es plug&play

Las metodologías suelen funcionar bien hacia adentro del equipo, pero deben ser adaptadas al involucrar al cliente

13

##WCGDL

14

Regresemos a los 4 pasosShow me what you got

Regresemos a los 4 pasos

Less bulshit, more action

##WCGDL

▫ Levantamiento de requerimientos▫ Entender la audiencia

16

1 Definir el alcance del proyecto

##WCGDL

Diseñar el Wireframe

▫ Aquí se define la Arquitectura de información▪ Propuesta de contenidos▪ Prioridades▪ Acciones principales

17

2

##WCGDL

Diseñar el Wireframe

▫ Aquí se define la Arquitectura de información▪ Propuesta de contenidos▪ Prioridades▪ Acciones principales

18

2

##WCGDL

Diseñar el Wireframe

▫ Aquí se define la Arquitectura de información▪ Propuesta de contenidos▪ Prioridades▪ Acciones principales

19

2

##WCGDL

20

Herramientas▫ Adobe XD ( It’s Free! )▫ Photoshop▫ Sketch▫ Draw.io▫ MockFlow▫ Lápiz y papel

Diseñar el Wireframe2

##WCGDL

▫ Desktop App (Windows y MacOS)▫ Si usas Photoshop e Ilustrador,

esta es tu app▫ Exportar assets o todo el proyecto▫ Genera Design Specs▫ Guías dinámicas

21

Adobe XD

Diseñar el Wireframe2

##WCGDL

Desarrollar el Prototipo

▫ La clave está en mostrar los puntos claves de funcionalidad e interacción

22

3

##WCGDL

Desarrollar el Prototipo

▫ Obtén retroalimentación del cliente directo en tu prototipo

23

3

##WCGDL

Repetir usando el feedback

24

▫ Recopila comentarios internos y externos. Después ajustas

▫ Refina el plan de contenido y mensajes

4

Definir el alcance del

proyecto

25

Diseñar el Wireframe

Desarrollar el Prototipo

Repetirusando el feedback

#WCGDL

Resultado

26

▫ Versión final de prototipo aprobado, incluyendo design-specs.

▫ Reducción del margen de dudas en el proceso de desarrollo.

▫ Aprobación de cliente documentada

#WCGDL

Resultado

27

28

¡Gracias!¿Tienes preguntas?

@amatzinmijo.mx