Prototipado de Interfaces: Herramientas y Consejos Prácticos

Clase 30 de 38 • Curso de Design Sprint Aplicado

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

Comentarios

Maria Alejandra Sanchez Tejeda

student•

Alejandro Sol Villaseñor

student•

Me gustó mucho el diseño que haz creado 💚

Kevin Mauricio Merchan Ruiz

student•

esta bastante interesante la paleta de colores!

Hanz Rodriguez Emiliani

student•

Adriana Forero Castelblanco

student•

Comparto el prototipo que realicé para mi sitio web, el próximo paso será experimentar con las herramientas propuestas por alberto

Emily Valentina Gaitan Velasco

student•

Ivan Camilo Martinez Mendieta

student•

Recuerda que entre menos colores, mejor definida la paleta.

Laura Rocha

student•

Aarón González

student•

Comenzaré a experimentar con Figma, siempre uso XD y Skecth. Veamos que tal me va

Eyner Jorge Eduar Córdova Plasencia

student•

Jajajaja cuando leo XD primero parece que te ries y luego parece el prorgama xddd

Aarón González

student•

El link de Sketch es el mismo de Adobe XD

Franco Damián Malsenido

student•

Figma es una herramienta colaborativa, lo que realmente la hace muy eficiente para el trabajo en equipo

Pedro Isaac Aguilar

student•

Sketch, InVision y Adobe XD tienen lo suyo, son muy buenas para prototipar también, aunque como muchos, sigo prefiriendo más a Figma por su alta versatilidad en colaboración y comunidad creada.