1. www.productschool.com
Episodio 10 de 12 - Exploramos
Wireframes & Prototipos @ iTexico

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

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

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

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

7. 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.

8. 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.

12. 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.

14. 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.

15. WIREFRAMES
Niveles de Detalle
Low, Medium, High

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

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

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

22. Low Fidelity High Fidelity Diseño Final

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

25. 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.

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

27. WIREFRAMES
Software

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

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

30. 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"

31. 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).

36. 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.

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

38. 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.

39. PROTOTIPOS
Manuales

40. Boceto de Wireframe en
papel y pluma
Wireframe hecho con
software

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