Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Android ›› Comparing Four Popular, Page–Based, Interactive Prototyping Tools

Comparing Four Popular, Page–Based, Interactive Prototyping Tools

by Bona Kim
5 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

A review of four page-based prototyping tools—Flinto, Invision, Keynote, and Fluid UI—reveals strengths, weaknesses, and use-cases for each.

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.

post authorBona Kim

Bona Kim, Bona Kim is a Lead Product Designer on Sing! Karaoke at Smule, a maker of social music creation mobile apps such as Sing Karaoke, Autorap, Guitar and Piano. Bona’s main responsibility is to create delightful user experience and seek new opportunities on the edge of mobile music technology. With background in design and interactive technology, her passion is to create meaningful connection worldwide via non-verbal interaction. Before joining Smule, Bona was a UX consultant in E-commerce sphere and an active artist at Interactive Telecommunications Program at NYU. Her work was featured on Make magazine, Engadget, Gizmodo, Inhabitat and many more. You can follow her on Twitter at @artdesignlife and on Medium at @creativespirited.

Tweet
Share
Post
Share
Email
Print

Related Articles

In this article, I’ll share seven incredibly useful design resources that can elevate your skills as a UX designer in 2024 and make you a well-rounded designer overall. These resources not only help you work more efficiently but also automate repetitive tasks and enable you to create outstanding user experiences. So, let’s dive into this without further delay.

Article by Abhi Chatterjee
7 Must-Have Resources for UX Designers in 2024
  • The article explores seven indispensable resources for UX designers in 2024, offering insights into design methodologies, case studies, UX laws, and practical challenges to elevate designers’ skills and efficiency.
Share:7 Must-Have Resources for UX Designers in 2024
3 min read
Article by Josh Tyson
Meet the Intelligent Digital Worker, Your New AI Teammate
  • The article introduces the concept of Intelligent Digital Workers (IDWs), advanced bots designed to assist humans in various workplace functions, emphasizing their role in augmenting human capabilities and enhancing organizational efficiency.
Share:Meet the Intelligent Digital Worker, Your New AI Teammate
3 min read
Article by Josh Tyson
Everything I Really Needed to Know About Technology I Learned on a Skateboard
  • The article explores parallels between skateboarding and technology, highlighting lessons learned from embracing motion, failure, and inclusivity in navigating the dynamic landscape of AI and innovation.
Share:Everything I Really Needed to Know About Technology I Learned on a Skateboard
7 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and