The UX prototyping space is booming. Dozens of solutions are now available for a practice that was done largely with paper and flat deliverables less than a decade ago. Designers can now start building experiences earlier in a product’s lifecycle and get real results around decisions through testing these prototypes. These tools help bridge the gap between designers and developers, allowing for ideas to be communicated and realized.
Lean UX delivery process
A catalyst for these new tools is Lean UX — the process of quickly framing your ideas and solving fundamental design challenges without relying on style and pixel perfection. Even if you are not sold on Lean UX, you may want a quick and easy way to explore concepts and interaction. You’re in luck. The number of applications available for UX prototyping is staggering. The real challenge will be finding one that is best suited for you. Here are six designer-friendly tools for UX prototyping.
The evolution of front-end technologies and the popularity of cloud software in recent years has prompted a move from stand-alone applications to web-based tools. Web tools can be easily delivered and supported on demand, and are ideal for sharing and viewing prototypes through the browser.
Marvel – Probably one of the easiest applications to learn. Marvel lets you link screens together by defining hotspots. Transitions, gestures and animations can be added to create a realistic interaction experience. Prototypes are shared and viewed via a URL that is generated when your project is published. There are also iOS and Android apps available for managing projects on and offline. Marvel doesn’t contain any drawing tools or a UI library, so it requires that designs be completed in another tool such as Sketch or Photoshop. Marvel has integrated with Dropbox to allow for synchronization of the image files used in your prototypes. There is also a Marvel Sketch plug-in that allows for sending artboards directly to Marvel projects from within Sketch. Marvel’s big value is in its simplicity. Provided you have already designed your screens, plan to be up and running with Marvel in a matter of minutes.
Cost: Free, or premium plans starting at $ 9/month
InVision – One of the most popular of the new prototyping tools. Like Marvel, it contains no drawing or image creation tools, which allows for a smaller learning curve. Instead, InVision provides a robust set of cloud storage features, plug-ins, skins, transitions and gestures to support prototyping needs. Synchronization of files through Dropbox is supported, or you can use their own InVision Sync client to automatically update your prototypes as you make changes to your files. Photoshop and Sketch integrations make saving designs to projects quite easy. Browser plug-ins for capturing screens and sharing prototypes are also available. InVision’s approach focuses on capabilities and integrations to support prototyping rather than trying to replace the tools that are familiar to designers today. InVision has a fast-growing community that provides a good set of examples and solutions to reference.
Cost: Free, or premium plans starting at $ 13/month
Proto.io – Takes things a bit further by introducing a component library that provides multiple pre-built UI elements for a number of device platforms. Styling, interactions, gestures and transitions can be applied to simulate an experience. UI elements can adapt to the resolution of whichever device you are designing for. You can also apply these properties to your own visual assets that you add to the project. Screens can be created from within the Proto.io editor interface, and multiple states can be created for these screens. Projects are managed from a dashboard interface that supports a team workflow where various roles may be assigned. A Dropbox integration allows image assets to be easily added and managed. All these powerful features make Proto.io a bit more of a challenge to learn. Plan on spending some time getting used to the conventions used throughout the authoring environment.
Cost: $ 24-$ 199/month depending on plan
UXPin – Provides an extremely lightweight web-based prototyping environment and contains a UI component library that can be used to design screens for a number of devices. Properties, interactions and states can be applied to these components. Support for gestures and animation is quite robust, and versions of screens can be made responsive by defining breakpoints. Photoshop and Sketch plug-ins make adding design assets easy. UXPin has put a lot of focus on team workflow and collaboration through features such as screen-sharing and VOIP. Previewing and sharing prototypes is made easy from within the authoring environment. There is even an SMS feature that allows you to send a link to the prototype via a text message. Another stand out feature from UXPin is the ability to conduct user testing with prototypes using built-in video conferencing software. Having an understanding of vector drawing tools like Illustrator will help but if you wish to leverage the full power of UXPin, plan on spending some time getting comfortable with some conventions that you might not be familiar with.
Cost: $ 13.50-$ 36/month depending on plan
For years, UX design prototyping has involved stand-alone desktop applications that offer a robust set of drawing and editing features. These applications allow designers to work outside of other design programs such as Photoshop or Illustrator if they wish, and instead build rich interactions without having to write HTML code. A major benefit here is that these applications involve a one-time cost as opposed to the ongoing subscription needed for the web-based offerings previously mentioned. Also, copying and pasting work from your existing design applications makes getting assets into your prototypes very easy.
JustInMind – An elegant design application coupled with powerful interaction tools. Like many of the tools mentioned here, it will feel familiar to those who are already acquainted with Photoshop and Illustrator. Dynamic, data-driven content can be applied to designs. Other features include synchronization with Photoshop, integration with user testing tools and services, mobile gestures, transitions, mobile application viewers for iOS and Android, support for conditional logic and team workflow. JustInMind is very much a full-featured prototyping environment that will require a time commitment if you wish to get the most from it.
Cost: $ 495 per user, or $ 29/month
Axure – Very early on the scene and continues to be a dominant force in the space. A complete set of drawing and editing tools are available and you get a decent set of UI components out of the box. Adaptive views cater to those who are interested in building responsive prototypes. Axure’s user community is very large. Between their community forums and training resources, you’ll find countless examples and solutions that can be downloaded and added to your prototypes, along with UI components tailored for many devices. Axure has a robust system that can be leveraged to produce rich examples of interaction using dynamic data. A set of canned conditional cases are available for a number of interactions but if you’re comfortable with a little scripting you can construct your own. The deeper you go with Axure the more you’ll unlock powerful capabilities, but keeping things simple is very possible as well. Group workflow, version control, and team collaboration features are available in the Pro version. Publishing and hosting prototypes can be done through Axure Share. HTML can be generated from prototypes and saved locally as well.
Cost: $ 289 Standard, $ 589 Pro
This is by no means a comprehensive list but these tools are getting some traction from the design community today. When evaluating these tools it’s important to think about project objectives, team size, workflow, technical understanding and support.
All of the tools mentioned here are free to try. For further reading on these and other tools, Emily Schwartzman at Cooper has put together some detailed research on prototyping tools that may help in choosing the right solution for you.
Title image courtesy of Nevit Dilmen, via Wikimedia Commons