Prototipado de Interfaces: Herramientas y Consejos Prácticos

Curso de Design Sprint Aplicado

Contenido del curso

Introducción

Preparación

Entender

Idear

Decidir

Prototipar

Testear

Reporte

Tomar examen

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 ;-)

Prototipado de Interfaces: Herramientas y Consejos Prácticos