We stand with Ukraine and our team members from Ukraine.

The Community Of Over 578,000

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

Comparing Four Popular, Page–Based, Interactive Prototyping Tools

by Bona Kim
Share this post on
Share on twitter
Tweet
Share on linkedin
Share
Share on facebook
Post
Share on reddit
Share
Share on email
Email
Share on print
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.

Share on twitter
Tweet
Share on linkedin
Share
Share on facebook
Post
Share on reddit
Share
Share on email
Email
Share on print
Print

Related Articles

Artificial intelligence (AI) could soon surpass human intelligence. Having both advantages and disadvantages, it still creates powerful opportunities and produces more accurate customer-behavior models.

Time to reflect on my future in the age of AI
  • Since AI-driven processes can create powerful opportunities to improve producing more accurate customer-behavior models, many traditional businesses will soon transform their core processes and business models to take advantage of ML.
  • Sonia P., People-Centric Design Enthusiast, brigs up such questions related to the role of AI in the future:
    • What’s exciting about AI?
    • What’s worrying?
    • How will we work with machines?
  • In order to make machines that behave better for humans is for UX designers to take all factors into considerations, bridge the gap and merge the knowledge from all sides to define the best solution.
Share:Time to reflect on my future in the age of AI
Time-to-reflect-my-future-in-the-age-of-AI.-article-image.png

There are numerous qualitative methods with students as users. Finding the right AAC system and implementing it effectively is essential to give every student access to communication.

How I Use UX Research in Speech Therapy
  • Kate Paolini, UX Researcher, and Speech-Language Pathologist digs deeper into how her students using augmentative and alternative communication (AAC) can benefit from a UX research approach.
  • Communication is much more than speech; therefore, finding the right AAC system and implementing it effectively is essential to give every student access to communication.
  • Kate Paolini conducted the research with the help of the following methods:
    • Buy-In & Initial Methods
    • Designing the AAC System for the User
    • Access & Education
    • Observations & Data Tracking
    • Heuristic Evaluation
    • Assess, Adapt, Repeat
Share:How I Use UX Research in Speech Therapy

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