Recently, I asked my designer friends about design prototyping tools (for user testings, demos) they use at work.

The reason why I asked was that a few years ago, prototyping was just starting to be a very “hot” concept for digital designers and developers, and Axure was one of the hottest software. Companies were dying looking for Axure prototypers.

Nowadays, not so much, even though it’s still important, at least in my work life. You may notice that companies are looking more designers who have expertise in “motion design”, which, even though not exactly for the purpose of testing your products, is beyond the animation effects Axure can handle.

Animations have become a big part of digital design, since iPhones, Android and other smart phone took the market. Games used to be a field where animations were heavily use, nowadays, however, you find people are getting used to animations (transitions or effects, subtle or not subtle) in apps. It has become a necessity that apps live on.

Here’s a list of design prototyping tools my friends use, and I’ll briefly explain what each is good for: Axure, Balsamiq, Proto.io, Invision, FrameJS, Origami.

Axure

It’s probably a prototyping tool that’s most comprehensive, and thus one of most heavyweight ones. It’s probably the best tool, if you deal with complex logic on the page and have needs for consolidate different user flows into your prototype. Azure’s Dynamic Panel is one of my favorite features,if you have different popups appearing on the page in different scenarios, under different logics, it’s for you. A good example is enterprise level software.

However, it’s not as lightweight or animation-focused like other prototyping tools I’ll talk about in a second. Axure is good at adding transitions, or simple animations for objects, e.g. flipping cards. They’re also working pretty hard on enriching their own animation library. Compared to other tools though, like Framerjs, Origami, it’s still far behind.

(Just a note about my experience with Axure: Axure is one of prototyping tools I have been using most, literally from its 5th edition to current 8th edition. It’s clear that the Axure team has been improving it over time. However, as many prototyping tools start living in the cloud and allow team collaboration there, Axure still haven’t been able to follow up with this trend. The only thing that lives in the cloud is AxShare, where you publish your prototype and share short links to others. It has some rudimentary functions, like comments, but not as advanced as InVision, another team collaboration-based prototyping tool I’ll mention.

I’ve been using it to generate wireframes as well. So far so good. It’s not perfectly easy to use, but good enough that I don’t need to do wireframes in a separate tool, for that, I’m thankful.)

Balsamiq

A wireframing and prototyping tools in a hand sketch style. You can export your screens into images or PDFs, in which you can assign clickable areas for page jumps. Balsamiq has both desktop installer and cloud-based environment for team collaboration. It also has a viewer in Google Drive, which you are required to install a plugin.

Proto.io

This is probably the most commonly used prototyping tool my other colleagues use for their website and app design. It’s cloud-based, has a really neat interface and contains pretty cool animations. They’ve been using this for client presentations, and people love it.

InVision

If you only need to implement simple jumps between screens, such as to demonstrate user flows, InVision is good. It’s best used when you have all the comps ready. All you need is to dump the images into a project, specify clickable areas and other simple interactions. It’s super easy to use.

The coolest feature, in my opinion, is commenting. You can invite others (such as colleagues, clients) to comment on any of the screens you have in your InVision prototype. For this functionality, I only have two words: love it.

While I adore the easiness of this tool and the comment functionality, I can hardly believe that this tool is sufficient enough for all the prototyping needs in any company. You would probably need some other tools to do more advanced prototyping.

I see this tool is best for visual designers, rather than user experience designers, since user experience designers tend to prototype more than just page flows.

For animation prototyping needs for mobile apps, my friends recommended FramerJS and Facebook’s Origami.

Origami

Facebook’s Origami supports a variety of animations by allowing you drag and drop controls. It also supports the preview on the phone at the same time. I heard that it will roll out a new version at the end of this year (2016). It’s worth checking out.

FramerJS

FramerJS can do fine animation effects. In my friend’s words, “it can create any animation effects you want”. You can call APIs to load data to support responsive designs. It also supports importing from Sketch.

Other resources:

• Cooper has put together an excellent comparison chart on prototyping tools, check it out.
• Jixee also has an excellent article on their favorite prototyping tools in 2016, check it out.

It’s still not too late to get into the world of prototyping ;) Which tools best work for you?