Prototipado de Interfaces: Herramientas y Consejos Prácticos
Clase 30 de 38 • Curso de Design Sprint Aplicado
Contenido del curso
Preparación
Entender
- 7
Dinámicas de Entrevistas con Expertos en Procesos Innovadores
04:09 min - 8
Técnicas de Toma de Notas Efectivas en Entrevistas
00:29 min - 9
Comida Saludable: Recetas Fáciles y Accesibles a Domicilio
03:15 min - 10
Categorización de Ideas en Equipos de Trabajo
05:05 min - 11
Agrupación y Categorización de Notas en Miro
00:24 min - 12
Proceso de votación para priorizar notas en diseño Spring
02:22 min - 13
Votación silenciosa en Miro: cómo utilizar notas y círculos
00:20 min - 14
Definición de Metas a Largo Plazo para Negocios Exitosos
05:06 min - 15
Definición de Metas y Preguntas en Sprints de Proyectos
01:23 min - 16
Creación de Mapas de Experiencia del Usuario
09:48 min - 17
Compra de productos frescos en Food Market
00:38 min
Idear
Decidir
- 22
Decisiones Efectivas en el Día Tres del Sprint de Diseño
11:01 min - 23
Proceso de Decisión para Selección de Ideas en Prototipos
02:56 min - 24
Mapa de la Experiencia del Usuario: Evaluación y Mejoras
00:18 min - 25
Creación de Storyboards para Prototipos de Aplicaciones Móviles
09:00 min - 26
Creación de Storyboards para Prototipado Rápido
01:07 min
Prototipar
Testear
- 31
Evaluación de Prototipos: Cómo Realizar Entrevistas de Usuario
09:42 min - 32
Técnicas de toma de notas en sesiones de testing de usuarios
04:29 min - 33
Sesiones de Testing Efectivas: Toma de Notas y Entrevista
01:08 min - 34
Desarrollo de Prototipos de Aplicaciones de Recetas Saludables
12:51 min - 35
Transformación de Prototipos en Productos Mínimos Viables
01:51 min
Reporte
Tiempo total: 6 horas
Llegó el momento de dar vida a tu solución. Elige una herramienta para prototipar y crea tu propio prototipo.
Como te dije, mi herramienta preferida es Figma, principalmente por su capacidad de colaborar en tiempo real, además de permitir hacer transiciones básicas entre pantallas. También, con Figma Mirror puedo ver en mi teléfono exactamente cómo quedará el diseño. Cuando necesito hacer un prototipo más avanzado (que active el teclado o la cámara, por ejemplo), utilizo además ProtoPie.
Aquí te paso una lista de herramientas adicionales para que tú elijas las que te convenga:
Sketch - https://www.sketch.com/ Actualmente es la herramienta estándar de la industria. Se integra con casi todas las demás herramientas de prototipado avanzado. Requiere que tengas una Mac.
Adobe XD - https://www.adobe.com/products/xd.html Una herramienta bastante popular y gratuita, ofrecida por Adobe. Permite crear fácilmente microinteracciones (transiciones animadas).
JustinMind - https://www.justinmind.com/ ¡Excelente herramienta para principiantes!
Marvel - https://marvelapp.com/ Permite incluir video, audio, mapas a los prototipos. Además, permite fácilmente crear transiciones entre pantallas creadas en Sketch o en formato de imágenes.
Invision - https://www.invisionapp.com/ Permite crear fácilmente transiciones entre pantallas creadas en Sketch o en formato de imágenes.
ProtoPie - https://www.protopie.io/ Se integra con Figma y Sketch para proveer más realismo a los prototipos, permitiendo crear inputs de texto, activar el teclado, cámara y otros sensores del dispositivo, además de crear variables para almacenar datos.
Algunos tips finales antes de prototipar:
-
Enfócate solo en el flujo principal para el test (lo que está en el storyboard).
-
Elige una combinación de colores en base a alguna de las Demos Rápidas que hayas encontrado.
-
Limitate a lo sumo a dos tipos de fuente. Si aún no tienes experiencia diseñando interfaces, quédate con una sola fuente. Open Sans o Lato siempre funcionan ;-)