3 Prototyping Tools You Need To Know

Just recently I did a review of a number of prototyping & wire framing tools that would enable me to create many rough sketches during ideation phase together with Product Managers I work with and then move on and refine gathered ideas to a higher fidelity both visually and conceptually. Depending on the context, you should have a different tool or rather a pair of tools as they usually complement each other nicely.

InVision

This tool is at the same time powerful and simple to use. Within minutes you can transform your static assets into dynamic prototypes. It features not just hotspots but also hover states, which allow for even more realistic interactions. In the mean time, while you do all this stuff, you can get feedback from your colleagues, another team or clients seamlessly. And, we are just getting started. Invision has also great LiveShare feature, which enables you to present your latest developments with the entire team or collaboratively gather ideas with Whiteboard/Freehand mode. Inspect feature on the other hand lets your DEV team to get all the details, copy, assets and measurements without opening the designs ever again.

freehand

Strenghts:

  • Powerful & Easy
  • Great plugins (CRAFT) for Sketch and Adobe Photoshop to remove tedious tasks from your work flow
  • Versioning & Syncing
  • Dedicated team adding new great features

Weaknesses:

  • Might be a bit overwhelming to get your head around all those great features:)

Learning Curve:

  • Easy

Balsamiq Mockups

Balsamiq is the very basic wire framing tool. It helps to focus on ideas and not the pixel perfection or color palettes. By default all wireframes created with it are grey. Of course you can add colors if you wish to. It has been made to quickly prepare a digital equivalent of paper sketches and prototypes with all the added benefits of being able to share it with your team and get feedback. For some it might be too simplistic. I myself have been using elements from the assets library in a somewhat creative way. All in all, the first tool that comes to my mind when I want to express quickly my ideas and share it during a brainstorming session.

balsamiq

Strenghts:

  • Simplicity
  • Speed
  • Great way to express first ideas in ideation phase

Weaknesses:

  • Low number of assets related to mobile UI

Learning Curve:

  • Very Easy

Axure RP 8

This is a very mature product, which has been around since 2003. You can do almost everything with it, however it is a difficult tool to master. Specifically the more advanced features like: conditional flow interactions, dynamic content and responsive design require quite a learning curve and sometimes even some basic javascript skills to get the prototype right. Loved by interactive agencies and hated by the younger generations of UX designers which turn to more lightweight tools like Invision combined with Sketch or Adobe Photoshop.

widget-libraries-2-wb

Strenghts:

  • Strong community of advanced users
  • A huge number of asset libraries available for iOS, Android and Web.
  • lo-fi to hi-fi as needed

Weaknesses:

  • Weak collaboration options (checking in/checking out)
  • A lot of time needed to get started and even more to get value out of more advanced features

Learning Curve:

  • Difficult

Happy with the content?

Comments