![Page 1: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/1.jpg)
Arquitectura de Información, Wireframes y Prototipado
![Page 2: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/2.jpg)
¡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
![Page 3: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/3.jpg)
¿Cómo asegurar que comunicamos exitósamente el scope del proyecto con cada
uno de ellos?
3
Cada cliente es diferente
![Page 4: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/4.jpg)
“Yo pensé que funcionaría
diferente— El cliente viendo el sitio de pruebas
(o el de producción)
4
![Page 5: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/5.jpg)
##WCGDL
5
Mi actual proceso de planeación está formado por 4 pasos
![Page 6: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/6.jpg)
Definir el alcance del
proyecto
6
Diseñar el Wireframe
Desarrollar el Prototipo
Repetirusando el feedback
![Page 7: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/7.jpg)
##WCGDL
7
¿Por qué funciona este proceso?No somos los primeros intentando resolver el problema
![Page 8: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/8.jpg)
##WCGDL
Varias metodologías han surgido como respuesta y aunque diferentes, en su esencia comparten los mismos principios.
8
![Page 9: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/9.jpg)
“Early Delivery &
Continuous improvement— Agile
9
![Page 10: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/10.jpg)
“Proceso Iterativo
para validar una idea— Design Thinking
10
![Page 11: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/11.jpg)
“Indudablemente fallaremos,
la clave es fallar rápido y barato
— A Senior Developer
11
![Page 12: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/12.jpg)
“Echando a perder
se aprende— A Windows Vista Developer
12
![Page 13: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/13.jpg)
##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
![Page 14: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/14.jpg)
##WCGDL
14
Regresemos a los 4 pasosShow me what you got
![Page 15: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/15.jpg)
Regresemos a los 4 pasos
Less bulshit, more action
![Page 16: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/16.jpg)
##WCGDL
▫ Levantamiento de requerimientos▫ Entender la audiencia
16
1 Definir el alcance del proyecto
![Page 17: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/17.jpg)
##WCGDL
Diseñar el Wireframe
▫ Aquí se define la Arquitectura de información▪ Propuesta de contenidos▪ Prioridades▪ Acciones principales
17
2
![Page 18: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/18.jpg)
##WCGDL
Diseñar el Wireframe
▫ Aquí se define la Arquitectura de información▪ Propuesta de contenidos▪ Prioridades▪ Acciones principales
18
2
![Page 19: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/19.jpg)
##WCGDL
Diseñar el Wireframe
▫ Aquí se define la Arquitectura de información▪ Propuesta de contenidos▪ Prioridades▪ Acciones principales
19
2
![Page 20: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/20.jpg)
##WCGDL
20
Herramientas▫ Adobe XD ( It’s Free! )▫ Photoshop▫ Sketch▫ Draw.io▫ MockFlow▫ Lápiz y papel
Diseñar el Wireframe2
![Page 21: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/21.jpg)
##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
![Page 22: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/22.jpg)
##WCGDL
Desarrollar el Prototipo
▫ La clave está en mostrar los puntos claves de funcionalidad e interacción
22
3
![Page 23: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/23.jpg)
##WCGDL
Desarrollar el Prototipo
▫ Obtén retroalimentación del cliente directo en tu prototipo
23
3
![Page 24: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/24.jpg)
##WCGDL
Repetir usando el feedback
24
▫ Recopila comentarios internos y externos. Después ajustas
▫ Refina el plan de contenido y mensajes
4
![Page 25: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/25.jpg)
Definir el alcance del
proyecto
25
Diseñar el Wireframe
Desarrollar el Prototipo
Repetirusando el feedback
![Page 26: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/26.jpg)
#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
![Page 27: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/27.jpg)
#WCGDL
Resultado
27
![Page 28: Prototipado Wireframes y Información, Arquitectura de · 2018. 10. 17. · Prototipado ¡Hola! Mi nombre es Ramón Lopez Fundador de Mijo! Brands en donde, desde hace 10 años, hemos](https://reader033.vdocuments.co/reader033/viewer/2022052814/609f2db5f635a03e0a4eba0d/html5/thumbnails/28.jpg)
28
¡Gracias!¿Tienes preguntas?
@amatzinmijo.mx