I recently had an opportunity to research prototyping tools for my company, Smule. We make a slew of mobile music apps that let users create their own content, whether that’s singing via karaoke, rap battling, or playing a piano. When the company was still small, product designers used to prototype with engineers, sitting side-by-side and exploring new possibilities. Now, the company has taken on more ambitious features, leaving designers and engineers less time for prototyping.

This is why I’m on a mission to find a perfect prototyping tool that meets the need of all the product designers at my company. The most important criteria are: mobile friendly, easily sharable, no learning curve, and highly interactive. The tools that I’ll introduce in a series of two articles are ones I found discussed most often in UX groups online along with those that many experts and designer peers thought would best suit our needs.

Types of Prototyping Tools

After extensive research, I divided prototyping tools into three categories: page-based, layer-based, and coding-based. Tools in each category share distinctive features as well as pros and cons. This article will focus on two page-based prototyping tools as they offer the easiest adoption out of three categories, in future articles, I’ll explore layer-based and coding-based options.

Page-Based Prototyping Tools

layer-based prototyping

Page-based tools include Flinto, Invision, Keynote and Fluid UI. Using these tools, you can create multiple pages or import your static mocks, and then easily create hotspots to link to the next page with nifty transitions. These tools are best used for showcasing the entire flow for a big feature or an entire app. Since all of them support drag-and-drop with intuitive navigation, there is virtually no learning curve. However, these tools do not offer an ability to fine-tune fancy animations or control a single component within the page.

Flinto

After some consideration, we decided to use Flinto instead of other tools in this category. Flinto works best for us for several reasons. First, most of our apps are at a stable stage. With every release we build an exciting feature for an existing app rather than building a completely new one. We have UI elements, style guide, and screenshots ready to go.

Whenever we make changes to a mock in @Dropbox, it will be automatically updated in @flinto as well

We also find the Dropbox syncing feature in Flinto exceptionally useful, as we are able to save our mocks in Dropbox. This means whenever we make changes to a mock in Dropbox, it will be automatically updated in Flinto as well. Flinto is extremely easy to use, and you can build a prototype in mere minutes.

Flinto

Just like the other tools in this category, Flinto does not offer smooth animation on a page. For instance, the animation of a progress bar needs to be divided into many images and renders choppy rather than as a smooth animation.

Flinto

This simple progress bar with success message animation required eight mocks and still appeared really choppy

Invision

Invision is a close second to Flinto, and shares many of features we like in Flinto. It is easily sharable, highly collaborative, is optimized for mobile, offers syncing, and has version controlling from PSD files. Just like Flinto, you can drag-and-drop multiple images and create hotspots to make an interactive prototype in minutes.

Invision

The only reason we didn’t go with Invision is that it’s not as easy to manipulate pages. In Invision, you only see a single page in a browser then select the file name you want to link in a dropdown menu. This provides little visibility of the entire mocks we imported, which were often over 50 images. Also, linking pages based on filenames isn’t as intuitive as visually identifying files.

Invision

Unlike Flinto, you can only see one page at a time and select linking page from a dropdown menu

Keynote

If you’ve only used Keynote for presentation purposes, you haven’t discovered its powerful features for prototyping. Keynote offers animated transitions between slides, gestural control, editing capacity of alignment, auto distribution, and smart guides. The animations offered in Keynote are fairly well-mapped to standard animations you’d get in iOS development. The great thing about keynote is your likely familiarity with the program. It’s the most intuitive and self-explanatory tool in of this category, since there is (likely) zero learning curve.

Keynote

However, sharing Keynote prototypes is not as easy as one would think. Unlike Flinto or Invision, you need to export the prototype as PDF and upload it to you server, then send the link to the user testers or your clients. This means that not only do you need to take an additional step in the sharing process but you also don’t control how it will be displayed on recipients’ devices. If your user tester has an Android device, the PDF can be displayed in many different zoom levels or lose its interactivity entirely. The best method of deployment to keep the experience as high-fidelity as possible is to download keynote for iPhone or iPad on the recipients’ devices. This deployment process is not as efficient as other two tools above.

Fluid UI

Fluid UI is an excellent tool if you’re starting the prototype from scratch. It comes with over 2,000 ready-made wireframe UI widgets for phone and tablet for both iOS and Android. You can also export the entire view and use it as a flow document.

Fluid UI

You can also upload your high fidelity mocks and create hotspots just like Invision and Flinto. However, I must say that Fluid UI is best suited for prototypes made from scratch. Since uploading multiple images is not supported, you need to upload each mock one-by-one. Also, lack of ability to link your Dropbox folder means you need to switch mocks every time you make changes to your design.

In the next article, I will review layer-based and code-based tools’ pros and cons. Thanks for reading and stay tuned!

 

Be sure to check out Bona's reviews of popular layer- and code-based prototyping tools.

Article No. 1 349 | November 25, 2014
Article No. 1 345 | November 17, 2014
Article No. 1 255 | June 17, 2014

Add new comment

Comments

Hey guys, really nice article! i've been using ux-app pretty heavily lately and it really has the coolest & most fully featured event management system of any of the online tools.. you should check it out :)

 

Hi Bona,

Thank you for your nice article. Recommend you a new nice prototyping tool, Mockplus (http://www.mockplus.com/). It's an all-in-one tool which allows you to create prototypes for any mobile apps, desktop apps and web apps effectively. 

Hi Bona, thanks for the mention and a great article.

Eileen (from fluidui.com)

Screen Edition of MacA&D and WinA&D

 

* Desktop and Mobile app screen prototypes

* Website Mockups

* Integrates with UML, SASD, Data Models, etc.

* Instant live prototypes

* http://www.excelsoftware.com

A comment on your Flinto transition issue.

You can actually use the “Timer" feature and an animated GIF to create a smooth transition. See this: https://www.flinto.com/guide/links#timer-links

That's a great tip, Karsten! I love Flinto more and more as I use it. 

Should include Pixate in any discussion/comparison on prototyping tools.

Pixate is actually covered in the next article with other layer-based prototyping tools! :) 

http://uxmag.com/articles/comparing-popular-layer-based-and-code-based-prototyping-tools

We've been using Axure for a few years now. It has a steeper learning curve, but gives you the level of control of individidual elements of the screen.

The other four you mention are very good, but Axure wins for me because I dont have to work with files from photoshop (or equivalent) but I can also create and design directly in Axure.

Phil, Axure sure offers an all-in-one package with a sweet feature list and a passionate community. 

It is covered in the next article with other layer-based prototyping tools. 

Great post & very timely. I am teaching a "Mobile App Prototyping for Designers" workshop on Staurday. I've decused to use Keynote for the Workshop. We are going to rebuilds Facebook Paper.

 

One major flaw not mentioned in all of the apps above is their lack of support for orientation change. So far, the only prototyping apps that allow for orientation change are Pixate & Proto.io. 

 

Proto.io is the best prototyping app right now, definitely give it a look & watch some of their tutorials for the proof.

Hi Jono, 

I agree that Pixate and Proto.io are definitely more optimized for mobile prototyping. 

 

PROTO.IO http://Proto.io/

I have been using InVision for a project and I love it.  The Live Share feature is super easy to use, and mega helpful during meetings with people.  It's like we are sitting in the same room even if we are many many miles apart. It's awesome.

 

Ben, 

I haven't had a chance to use Live Share for meetings but heard from many people that it's very useful for collaboration. 

Would you say InVision is more optimized for remote collaboration than Flinto? 

 

Great job! Just one thing. That dropdown image from InVision is misleading as well as what you say about it. When you go through the screen selection on that dropdown you do get a thumbnail preview. Definitely not good enough as it does not provides a highlevel perspective, but it is not "non-existant like you say/imply ("linking pages based on filenames isn’t as intuitive as visually identifying files")Anyway, thank you for doing this comparison and above all sharing it!

Cheers!

Thanks for clarifying, Dan! I tried my best to be as clear as possible but agree that part could be misleading. 

But you nailed what I was trying to say. For me, thumbnail previews didn't feel as intuitive as getting highlevel perspective. How is it working for you? 

There's also Marvel: https://marvelapp.com

 

Thanks for the great comparison!

Hi Hugo, 

Thanks for letting me know! What do you love about Marvel?

I am curious as I haven't heard much about it from my design peeps.

I really love invision! Been using them at work for the past few weeks now, even submitted some feature requests, got an email today they were just released! Best prototyping app i've used hands down. Wasn't a big fan of flinto when I tried it out, needed more collaboration features, and some of the extra mobile stuff invision has.

Hi Jacob, 

I heard from a few people that they preferred Invision for collaboration features. 

What are the features you loved in Invision for collaboration?

Collaboration was not my criteria when choosing the tool because all of our designers are in-house but know it's very important for some organizations.  Any shout out would be helpful for them! 

 

Hi Bona, Did you also compare Marvel (https://marvelapp.com/)? It syncs with Dropbox as well. I'd be curious to know how it stacks up!

Hi Deanna, 

Would love to know what you love about Marvel!

 

FLINTO: "When you create a hotspot for the back button on page A, you can only choose to send the user back to one of three places users could have originated from."

 

This is not true, and hasn't been ever since I've used the product. When you create your hotspot, just press 'b' and it will automatically take you back from wherever you came.

Paul: Thanks for pointing out this oversight. We've updated the article.