Herramientas para hacer prototipos

Hace ya bastante tiempo que hablamos por primera vez de herramientas para hacer prototipos, más concretamente en 2009. En este post vamos a enseñaros cuáles son las herramientas que utilizamos en el Estudio.

Pero antes de ponernos a ello, veamos sus ventajas.

Ventajas de las herramientas de prototipado

Insistir en esto puede que no sea necesario, pero sí recomendable. 

La ventaja fundamental es clara: colaborar. Muchas de ellas permiten hacerlo en tiempo real, algo fundamental para equipos multidisciplinares como el nuestro. 

Esta colaboración permite que el product manager no sólo dirija el proyecto (que es a lo que debe dedicarse, no lo olvidemos), sino también solucionar de manera proactiva problemas antes de que estos sucedan. Si tus equipos de diseño visual, content design y desarrollo colaboran, pueden intercambiar ideas y evitar problemas posteriores en la implementación.  

Te recomendamos leer este post localización de textos, que contiene algunas herramientas para facilitar el flujo de content design entre todos los equipos de trabajo.

Además, los prototipos estarán disponibles en todo momento, evitando así que los papeles se pierdan. Porque aunque los prototipos en papel sigan siendo fundamentales para el día a día, el uso de algunas de las opciones que te presentaremos ayudará a el trabajo sea más fluido. Y para que no pierdas los papeles, literalmente.

Y, por supuesto, la posibilidad de que tu cliente vea siempre la última versión y hasta comparar con alguna anterior para ver de manera fácil el desarrollo de todo el proyecto.

¿Prototipos en baja o en alta?

La gran cuestión que se plantea en muchas ocasiones es qué tipo de prototipos usar. En general, los prototipos en baja son los wireframes, esquemas básicos del producto que nos permiten tomar decisiones sobre estructuras fijándose más en los procesos que en el diseño. 

Frente a esto, los prototipos en alta fidelidad ya son verdaderos diseños usables, en los que probar microinteracciones, aspectos visuales o incluso textos. 

Las herramientas que te vamos a mostrar, en general, permiten trabajar con ambos, así que puedes elegir cuándo o cómo trabajar. 

Porque en realidad, cada una podrá tener un momento. Como te decimos, quizá los wireframes te sirvan para validar ideas en el inicio de tus proyectos, mientras que los prototipos en alta fidelidad lo serán para validar el diseño de tu producto.

Herramientas para wireframes de baja fidelidad

Mural 

Nuestra más nueva herramienta favorita en el Estudio y uno de los new kids on the block. Aunque a primera vista pueda no ser una opción para realizar prototipos, en realidad sí lo es. 

Permite trabajar de manera colaborativa y sus integraciones sirven para que todo el mundo pueda trabajar como mejor le cuadre. Además, es una buena herramienta para realizar tests con usuarios, porque permite hacer sesiones en vivo y obtener feedback de manera directa.

Y si no sabes por dónde empezar, tienes a tu disposición un buen número de plantillas para casi cualquier proyecto. Estas plantillas las puedes importar también con datos para que te sea más fácil comprender su utilidad.

Balsamiq

Uno de los clásicos para hacer prototipos en baja fidelidad, que es uno de sus fuertes. Tanto en su versión cloud como la aplicación de escritorio es más que útil y, además, permite aprender a hacer wireframes con su documentación, tutoriales y hasta su centro de formación.

Lo que hace, lo hace bastante bien y podrás validar tus ideas con las características de user testing integradas por defecto. 

Miro

Aunque en este post hablemos de prototipado, en realidad es una navaja suiza para casi cualquier proyecto de UX. Con un modelo freemium muy agresivo, es funcional y permite trabajar (de momento) con un número ilimitado de usuarios bajo la misma organización.

Con multitud de integraciones con herramientas de uso común, su galería de plantillas para UX permite crear prototipos interactivos, card sorting, design sprints y hasta moodboards.

Moqups

Otra herramienta freemium que permite trabajar de manera colaborativa y con un precio más que asumible. 

Su galería de plantillas permite aplicarlo en cualquier proyecto, desde la conceptualización del producto con mapas mentales hasta las primeras validaciones con wireframes de webs y aplicaciones. 

Además, cuenta con extensiones para Chrome y Firefox que permiten hacer capturas o seleccionar colores y usarlos para proyectos. 

Whimsical

Con características bastante interesantes, como la posibilidad de aplicar temas con sus correspondientes colores a prototipos o tableros, en este caso nos quedamos con su galería de iconos para wireframes, que incluye un buscador muy bien afinado para encontrar el que hace falta en cada momento. 

Y, de remate, es perfecta para el trabajo con tarjetas para organizar ideas.

UX Pin

¿Nuestra solución preferida? Quizá. Al menos la que usamos, junto con Sketch. 

Su gran versatilidad viene por la gran cantidad de ventajas que nos aporta, como el trabajo colaborativo entre todos los miembros del proyecto, pero una nos subyuga de manera especial: la gestión de comentarios, ya que permite colaborar internamente entre el equipo y de manera independiente con el cliente. 

A esto también hay que unir su flexibilidad para generar sistemas de diseño (como uno en el que estamos trabajando ahora mismo), documentando de manera extensa todos los componentes del proyecto para que el uso sea lo más fácil y correcto posible.

Herramientas para prototipos de alta fidelidad 

Marvel

Una de las opciones freemium que permiten aprender lo básico y ponerlo en marcha. Especialmente pensado para freelances en sus planes de entrada, tiene opciones muy interesantes, como la posibilidad de exportar a CSS para que los desarrolladores puedan usar el código y capacidades para hacer tests con usuarios directamente sobre tus prototipos. Esta característica la vais a ver como developer handoff o sólo handoff.

Justinmind

Una herramienta española que ha optado por el modelo freemium y que está dando mucha guerra últimamente con clientes más que potentes. 

La versión gratuita permite crear prototipos tanto en alta como en baja fidelidad, aunque con ciertas limitaciones como microinteracciones o efectos.

¿Una ventaja que puede ser útil? La posibilidad de importar diseños desde Sketch para poder editarlos.

Sketch

La herramienta que lo cambió todo en su momento. Con Sketch se facilitó mucho la colaboración entre diseño y desarrollo. Es una de las herramientas más usadas hoy día, tanto por su relativa facilidad de uso como por la cantidad de extensiones de todo tipo que permiten llevarla más allá.

Una gran ventaja es que es una herramienta de un único pago, pero sí tiene una gran desventaja: sólo está disponible (de momento) para Mac, con una versión cloud limitada a sólo lectura e interacción con desarrolladores.

Usada en conjunto con Mural y UX Pin, nuestro equipo se coordina en todos los frentes, desde los UX researchers hasta los frontenders, con el equipo de diseño entre medias para que la parte más visual se adecúe a las necesidades de los proyectos. 

Figma

El nuevo contender. Si Sketch lo cambió todo, Figma ha venido a revolucionarlo. Gracias a una agresiva política de precios, puedes empezar gratis prácticamente sin límites, más allá de haber 2 editores y trabajar en 3 proyectos como máximo. Porque su gran ventaja es la capacidad de almacenamiento ilimitado en su nube, al menos de momento.

Su galería de plugins y el gran número de plantillas para casi cualquier cosa que se te pueda ocurrir, lo han convertido en la herramienta definitiva para casi cualquier proyecto, no sólo de prototipado, sino también para banners, sistemas de diseño y diagramas de usuario.

Adobe XD

Si Adobe ha sido siempre líder en materia de diseño y retoque fotográfico (con permiso de herramientas como Gimp o Photopea, por citar sólo un par de ellas), obviamente no iba a perder la oportunidad de meterse en un mundo para el que Photoshop o Illustrator no estaban preparados debidamente.

Adobe XD es la herramienta de prototipado que ha ido incorporando cada vez más funcionalidades, normalmente a través de plugins. Su gran ventaja es la integración con las bibliotecas compartidas de Adobe Creative Cloud, con lo que todos los elementos visuales se coordinan en un único sitio, algo especialmente útil y crítico para los equipos de diseño, ya que les permite tener a mano todos los recursos de un proyecto.

Axure RP

Axure tiene una de las soluciones más completas y versátiles. Desde diagramas y flujos hasta prototipos en alta fidelidad, es quizá una de las mejores herramientas para exportar tus diseños a código.

Su capacidad para integrar lógica condicional en las interacciones, permite que sus prototipos sean casi casi como el proyecto en producción. Y todo ello con un gran número de funcionalidades para colaborar entre todos los miembros del equipo y recursos de formación.

---

No están todas las que son, pero sí son todas las que están. Y cada vez surgen nuevas herramientas que permiten mejorar los flujos de trabajo. 

Elige la que mejor se adapte a tus necesidades, bien por ahorro económico, bien por el tipo de cliente al que te vayas a dirigir y, sobre todo, piensa en el futuro. Muchas herramientas freemium pueden ofrecerte una flexibilidad hoy que mañana puede limitarse. 

También puedes leer:

• ¿Por qué insisto tanto con los prototipos?
• Prototipos y wireframes en proyectos de UX
• Wireframes y prototipos
• Herramientas online para hacer prototipos

Artículo actualizado en marzo de 2022