Once upon a time there was Photoshop, and designers used Photoshop to create explorations for user interfaces. These explorations turned into mockups, usually a flat image that would appear in a document, sometimes with lots of text explaining what is supposed to happen on the screen. Developers would often cringe every time one of these design specifications was delivered. As rich UI experiences evolved, it became more challenging to explain such things as interaction and motion through documentation in this format. Designers have evolved their skill sets to meet this need. They’ve simplified their design process by leveraging tools that make storytelling easier. It was always true that interacting with an interface is just as important as showing it. Fortunately, there are some rely on flat design specifications.

The Evolution of Design Delivery

We are in a new era of design where creatives can build rich experiences with less effort than was previously required to complete static deliverables. There has been an explosion of new tools on the scene that challenge a traditional approach to defining UX design. These tools allow for the validation of design, relying less on high fidelity while focusing more on interaction and flow. The new tools also fit into a process allowing designers more ownership of the end to end UX process.

A Lean UX delivery process

It could be said that a catalyst for these new tools was 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 have decided that you 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.

Image: Warfel, Todd Zaki. 2009. Prototyping: A Practitioner’s Guide. New York: Rosenfeld Media.

Tools of the Trade

2014 might have marked what will be known as the post­Photoshop era — a new age where designers are no longer relying so much on tools that have been the cornerstone for design delivery. This is a time when you can easily access lightweight cloud­connected software to solve both simple and complex problems. Because the options for either web­based or standalone desktop software are so abundant, I’ll summarize below the more popular tools available in these two categories.

Web Tools

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 which 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
http://www.marvelapp.com/

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
http://www.invisionapp.com

Proto.io

Takes things a bit further by introducing a component library which 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
http://www.proto.io/

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
http://www.uxpin.com/

Stand­Alone Tools

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

Cost: $495 per user, or $29/month
http://www.justinmind.com/

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
http://www.axure.com

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.

Image: Schwartzman, Emily 2013. Designer’s Toolkit: Road Testing Prototype Tools. Cooper

Why Not Just Code HTML?

The problem is that most designers aren’t comfortable writing HTML and CSS code. Further, simulating dynamic data, conditional states, and rich animations requires a deeper knowledge of front­end technologies than what most creatives understand. In most cases, these new prototyping solutions allow us to build and iterate on a functional simulation in a fraction of the time that it would take to write the code. When considering an end­to­end design process, these prototyping solutions can be useful in the validation of design­thinking earlier in the product lifecycle, something that might otherwise go unchecked.

User Testing

All of the tools mentioned here can be used to conduct testing. Worthy of note, UXPin has introduced a built­in user testing solution. Also of note, JustInMind integrates with third party testing services such as UserTesting.com and Userzoom, although these services require additional costs. If you’re comfortable with taking a DIY approach to user testing, prototypes can be shared and tested remotely through tools like GoToMeeting, Adobe Connect, and Skype.

Conclusions

The UX prototyping space is booming. Dozens of solutions are now available for a practice that was done largely with paper and flat deliverables not that long ago. Designers can now start building experiences earlier in a product’s lifecycle, and get real results around decisions through testing these prototypes. Aspects of the user experience that used to be difficult to communicate can now be simulated in a meaningful way. Further, these tools help bridge the gap between designers and developers, allowing for ideas to be communicated and realized.