El documento es un folleto de Product School que ofrece cursos en línea y capacitación corporativa en gestión de productos. Incluye información sobre certificados en gestión de productos a diferentes niveles, oradores invitados, software recomendado para wireframes y prototipos, y próximos eventos.

1. www.productschool.com
Part-time online Product Management Training Courses
and Corporate Training

2. O R G A N I Z A D O R E S
Omar Corona Ury Sarabia

3. Únete al grupo de
35,000+PMs en
Recursos gratuitos
Descubre increíbles
oportunidades en
Portal de empleo
prdct.school/PSJobPortalprdct.school/events-slack

4. Alumni graduated
across 17 campuses
Cities all over the world
100+
10,000+
¡Cursos en línea!

5. CERTIFICATES
Your Product Management Certificate Path
Product Leadership
Certificate™
Full Stack Product
Management Certificate™
Product Management
Certificate™
20 HOURS40 HOURS40 HOURS

6. C O U R S E S
Corporate
Training
Level up your team’s product
management skills

7. Chris Berber
T O N I G H T ’ S S P E A K E R
COMPANY
LOGO

9. WIREFRAMES & PROTOTIPOS CHRIS BERBER
ITEXICO PRODUCT SCHOOL
WIREFRAMES & PROTOTIPOS
Y el clásico título de qué son, para qué sirven y cómo se hacen.

10. WIREFRAMES
-
Representación visual simplificada de páginas y pantallas
de un sitio Web o aplicación móvil.
Consisten en formas simples como cuadrados, rectángulos
y líneas.

14. WIREFRAMES
Propósito
Comunicar ideas respecto al layout y jerarquía del contenido
rápidamente.
Evitar distracciones.
Los Wireframes son intencionalmente simples
para que las personas no se distraigan con otros factores
como el color, efectos, imágenes, etc.

16. WIREFRAMES
Cuándo se utilizan?
En las etapas tempranas de dentro de la etapa de Diseño.
Ya sea en proyectos nuevos, o implementaciones a proyectos ya
existentes.

17. WIREFRAMES
Niveles de Detalle
Low, Medium, High

18. WIREFRAMES
Niveles de Detalle
Low Fidelity: Estructura y distribución de contenido, cantidad y tipo de elementos. Desechables.

20. WIREFRAMES
Niveles de Detalle
Medium Fidelity: Componentes su comportamiento y proporción, textos, íconos, tipografía.
Reutilizables.

21. WIREFRAMES
Niveles de Detalle
High Fidelity: Mayor detalle, visión de UI, comunican funcionalidad a los Developers. Evolucionan.

24. Low Fidelity High Fidelity Diseño Final

26. WIREFRAMES
Low fidelity vs High fidelity
Cuándo utilizar Wireframes en Low o
en High Fidelity?

27. WIREFRAMES
Ventajas y Desventajas
Ventajas
-
Dirige a las usuarios a enfocarse en lo
es importante en el proceso de diseño:
● Contenido
● Información
● Jerarquía
● Layout
Permite explorar ideas con
relativamente menos tiempo
y costos.
Desventajas
-
A menudo se tienen que explicar a
los usuarios (clientes).
Debido a la falta de detalles,
debemos invertir tiempo
explicando cómo funcionan y
cómo se verán al final.
Puede ser tiempo consumido y
puede ser un paso extra durante
el proceso de diseño.

28. WIREFRAMES
Software
Posible, no ideal
-
Photoshop
Illustrator
Posible, recomendable
-
Adobe XD
Sketch
Figma
Invision Studio
Óptimo
-
Balsamiq
MockFlow
Wireframe.cc

29. WIREFRAMES
Software

30. WIREFRAMES
Wireflows
Unión de Wireframes y User flows

31. WIREFRAMES
Actividad
Apple.com hk.yahoo.comYoutube.com

32. WIREFRAMES
¿Están muertos?
Diálogo
"Los clientes
no los entienden"
"Ya no son tan rápidos"
"Son una pérdida de tiempo"
"Limitan la creatividad"

33. PROTOTIPOS
-
Son simulaciones de un producto real; usado para obtener
feedback o pruebas de testing.
Pueden ser:
● Low fidelity (menos detallados)
● High fidelity (más detallados).

38. PROTOTIPOS
Ventajas y Desventajas
Ventajas
-
Forma ideal de probar ideas y obtener
feedback de usuarios y clientes, antes de
alguna inversión.
Nivel adicional de interactividad sobre
prototipos.
Pueden ser usados como base del desarrollo
de producto. (HTML)
Valor emocional
Desventajas
-
Crear y probar prototipos aumenta
tiempos y costos.
No siempre reflejan lo que el usuario
obtiene.

39. PROTOTIPOS
c/Software
Invision (externo)
Adobe XD (on-device)
Figma
Sketch
WebFlow (code)
Principal

40. PROTOTIPOS
c/HTML
Recomendada para
diseñadores con
conocimiento en código.
Ventajas
-
Son base técnica para un
producto final.
Pruebas desde cualquier
dispositivo
Reduce costos en software
por ejemplo.
Desventajas
-
Depende de las habilidades
de código del diseñador.
Inhibe la creatividad.

41. PROTOTIPOS
Manuales

42. Q&A

43. WIREFRAMES & PROTOTIPOS CHRIS BERBER
ITEXICO PRODUCT SCHOOL
GRACIAS
Linkedin.com/in/chrisberberm/

44. C O M M U N I T Y
www.meetup.com/Product-School-Guadalajara
Let us know what you
thought of our event
prdct.school/EventSurvey

45. M O R E I N F O
To find out more
about the certificates
visit our website
www.productschool.com
Schedule a call
prdct.school/AdmissionsOr

46. PRÓXIMOS EVENTOS
Jueves, 20 de febrero
Desarrollo de
Productos para
público non-tec
Miércoles, 11 de Marzo
Documentación &
Entrega (Handoffs)
Jueves, 12 de Marzo
Preparaciones para
hacer pruebas a
usuarios

47. UPCOMING ONLINE CONFERENCE
prdct.school/GlobalVPS
Register now while
tickets are FREE

48. http://bit.ly/produkto-whatsapp-gdl
ChrisBerberM
OmarMCorona
UrySarabia

49. a call
http://bit.ly/produkto-
whatsapp-gdl
prdct.school/GlobalVPSprdct.school/Admissions
Cita una llamada
5/MAYO/2020