prototipado wireframes y información, arquitectura de · 2018. 10. 17. · prototipado ¡hola! mi...
Post on 01-Jan-2021
5 Views
Preview:
TRANSCRIPT
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
top related