November 29, 2018Tech behind startups
12 min read

Finding The Best Mockup Tool to Prototype With

Finding The Best Mockup Tool to Prototype With

It is a proven practice to begin development of an app by drafting a mockup. Mockups give your client an early impression of what they will receive in the end, while enabling the project team, comprised of designers, programmers, and quality assurance engineers, to dive right in. This spares the time that would otherwise be wasted on talks and creating and learning project documentation explaining the behaviour of the new app.

Creating a mockup is one of the tasks that you need to assign to a team member, and you don’t want that person to focus on the task for too long. In this article, we analyze and compare several mockup creation tools to find the one that will not only be time-efficient, but also will meet certain criteria, such as:

  1. At least one container for browser, one for smartphone screen, and one for desktop application view.
  2. A set of tools powerful enough to deliver on various ideas. This includes basic interface elements and additional icons and images. We do not consider the aesthetic quality of mockups a criterion, but we will certainly share our thoughts on that to conclude this review.
  3. An element import feature, which is not frequently used, but still important.
  4. Additional features such as:
    — ability to create projects with multiple screens and folders;
    — ability to create interactive mockups with clickable links between interface elements and screens;
    — ability to view and preview created projects;
    — prototype export;
    — shared access, allowing project team members to comment on, discuss, and contribute to the new mockup.
  5. A user-friendly interface. It is important that basic use principles are clear without a manual or guide, and all key instruments are at hand.
  6. Must support PNG as the export file format. Other file formats are of secondary importance.
  7. Ability to integrate with basic corporate software tools such as Slack, Jira, and Confluence.
  8. Fair pricing policy.

Please refer to chart 1 to quickly review through the mockup design tools that we have chosen to compare, and their key features and characteristics.

Chart 1. Selected prototyping tools

Name

Platform

Pricing

Supported export file formats

Emulated platforms and devices

Supported corporate software

1. Moqups

Web

Single user: $13 per month

3-50 users: $19-$149 per month

Free Plan offers 1 project

Enterprise: individual cost

PNG, PDF

IOS,

Android,

Web,

Windows

Slack,

Google Drive, Dropbox,

Confluence Server,

Jira Server

2. Fluidui

Web

Single user:

$8.25/month, $99/year

Prof:
$19.08/month, $229/year

Team:
$41.58/month, $499/year

Free forever (1 project)

HTML, Screenflow, PNG

IOS (iphone 5-X, iPad, Apple TV);

Android (different screen size);

Windows;

Desktop;

Apple Watch,

Android Wear,

Galaxy Gear,

Pebble

-

3. Balsamiq

Web / Desktop

Web app:

Solo: $9/month or $90/year
Team:$49/month or $490/year
Bigger team:
$199/month or $1,990/year

Mac or window:

2-202 uses: $89 – $9,790

Plugin for Google Drive:

$5/month, $50/year

Plugin for Confluence or Jira: $50 –$12000

PNG, PDF, HTML

IOS, Android, Web, Windows

Google Drive,

Dropbox,

OneDrive,

iCloud,

Confluence Server/Cloud,

Jira Server/Cloud

4. Pencil Project

Desktop

Free

PDF, SVG, HTML, PNG,
OpenOffice/LibreOffice

IOS (iphone 5-X, iPad, Apple TV);

Android (different screen size);

Windows;

Desktop;

Apple Watch, Android Wear, Galaxy Gear, Pebble

-

5. Uxtoolbox

Desktop

£99 - 1 user
£249 - 3 user
£399 - 5 user
£749 - 10 user

PNG, HTML, XML, Word

Games console (DS, PSP, PSP Vita);
Generic Template;

Ipod (classic, nano 4G, touch 5G);

IPhone (3 - 6Plus);
Phones (sumsung, nokia, HTS, BlackBerry);

iPad;

Tablets (sumsung, microsoft, Asus, BlackBerry);

Web;

Windows;

Google glass;

Pebble

-

6. Axure RP

Desktop

Pro:

$29 per user per month, $495 per user;
Team: $49 per user per month, $895 per user;

Enterprise:

$99 per user per; month

PNG, JPG, GIF, BMP, HTML

-

-



Web-based Mockup Tools


Moqups

The first Web-based mockup tool we tried was Moqups.

Figure 1. Moqups interface

Strengths:

  • The Moqups app has all of the basic mockup elements, including fields, buttons, and check boxes. It also provides instruments to draw a sitemap or block diagram describing the behavior of a new app, which comes in handy.
  • This prototyping tool allows for team contribution on a UI mockup online and integrates with Slack, Google Drive, and Dropbox, which helps quickly engage the team. There are also app versions geared specifically toward Confluence Server and Jira Server available. With this option, you can paste mockups into Jira or Confluence with a single click, and even create new mockups within their own environment.
  • The ability to create folders and documents within a project further adds to the comfortable and easy navigation.

Weaknesses:

The most disappointing thing about Moqups is that it only allows the user to demonstrate the behaviour of the new app in a graphical way, with arrows (see Fig. 1) — while other similar prototyping tools allow you to create interactive mockups.



Fluidui

The next tool allowing to make mockups online is Fluidui.

Figure 2. Fluidui interface

Strengths:

  • The set of features Fluidui is equipped with is similar to, but not limited to, that provided by Moqups. This mockup tool takes a step further, from creating a model interface to visual app prototyping. Each new element on the current app screen can be associated with another screen through a clickable link, allowing you to navigate within the mockup.
  • The facility to open the prototype app on your phone through QR-code is one more noteworthy feature of this online mockup tool.

Weaknesses:

  • Integration with corporate software is not available.
  • Mockup elements cannot be exported.
  • The use of the element panel is somewhat complicated by some elements visually merging with each other.
  • The list of devices and relevant elements could be friendlier if it was more customizable. After we chose a target device by starting a project, we expected to be presented with only the elements relevant to this device throughout the work on the new mockup. Instead, we were prompted to select from the full list of devices every time we wanted to introduce a new element (see Fig. 3).

Figure 3. Creating a new project with Fluidui

Finding relevant elements on the extra long drop-down list becomes an annoying issue when you have to repeat this action every time the page is refreshed.

Figure 4. Selecting from the list of devices and elements



Balsamiq

Another online mockup design tool we came across is Balsamiq. It also has a desktop application, but we chose to try out the web app.


Figure 5. Balsamiq interface

Strengths:

  • Of all the similar prototyping tools we have tried, Balsamiq is the only one that allows you to create mockups online and on desktop.
  • The Balsamiq web app provides the same instruments featured by the two previously reviewed mockup tools. Access to the new prototype can be shared to team members, allowing them comment on it and make edits.
  • An outstanding feature of this web-based prototyping tool that is worth mentioning is the additional custom elements that can be loaded from the Balsamiq library. The library elements are ordered by categories, such as annotation and markup, controls, desktop applications, diagrams, fun, google, hardware, layout, templates, tutorials, web apps, and sites (see Fig. 6).

Figure 6. Balsamiq element library

  • Similar to Fluidui, Balsamiq supports clickable links between elements and screens within the prototype application.
  • Another feature that differentiates Balsamiq from other prototyping tools is the option to change the type of an element. A button type element can, for example, be converted into a combobox. Although a seemingly redundant feature, it proves useful compared to other similar tools that would have you do a lot of time-costly operations to change the element type. With Balsamiq, it only takes two clicks.

Weaknesses:

Although it allows for team contributions, Balsamiq does not store the history of edits and does not provide a flexible permission system. There is always a risk that the new Balsamiq mockup will be changed beyond repair and putting things back in order may be virtually impossible. In some situations, you can not take chances which renders the team contribution feature useless.



Desktop-based Mockup Tools


Pencil Project

Pencil Project is a free desktop-based prototyping tool supporting all platforms/devices.

Figure 7. Pencil Project interface

Strengths:

  • User-friendly interface.
  • Full set of required features, as listed in the beginning of this review.
  • Element import is available;
  • Like other prototyping tools, Pencil Project allows the mockup to emulate the behaviour of a new app with a clickable prototype.
  • One distinguishing feature of Pencil Project is integration with OpenClipart, an independent application equipped with a huge library of pre-set elements that can be loaded to a new prototype (see Fig. 8).

Figure 8. OpenClipart interface

  • When launching Pencil Project, you are presented with a list of the last eight prototypes that you created and/or pinned projects (see Fig. 9). This improves the experience using the offline app by sparing you the trouble finding a currently active project in a local folder. Although another seemingly simple feature, it is not provided by any of the other mockup tools that we tested


Figure 9. Pencil Project start screen


Weaknesses:

  • As an offline application, Pencil Project does not allow for team contribution.
  • Also, this mockup tool does not integrate with corporate software.



Uxtoolbox

Uxtoolbox is an offline-only app which is not much different from Pencil Project in its feature set.

Figure 10. Uxtoolbox

Strengths:

Allows commenting and changing the color of a note.

Weaknesses:

  • Team contribution is not possible.
  • The lack of an element import feature.
  • Integration with corporate software is not supported.
  • Another obvious weakness of Uxtoolbox is that it is limited to default shapes and elements, providing no additional icons or images — unlike the previously described similar mockup tools.


Axure RP

The last tool in our review, but not the least in terms of quality, is Axure RP: a desktop-only mockup tool.

Figure 11. Axure RP interface

Strengths:

  • User-friendly interface.
  • Full set of features as listed in the previously mentioned criteria list.
  • Team contribution enabled through the associated cloud storage. Unike any other mockup tool, Axure RP stores the edit history in the cloud.
  • Another perk of Axure RP is the vector drawing instrument which allows you to create unique images within the app interface. Engineers responsible for prototyping might find this to be a redundant feature, but designers and creative analysts will make a good use of it. Our analyst drew her name to demonstrate how it works (see Fig. 12).

Figure 12. Pixel drawing with Axure RP
(honestly, a rather useless dope feature)

Weaknesses:

Element import is not possible. This is where the vector drawing tool comes in, providing freedom to customize your prototype.

We have organized the features provided by all of the reviewed UI design mockup tools in a comparison chart below.


Feature / App

1. Moqups

2. Fluidui

3. Balsamiq

4. Pencil Project

5. Uxtoolbox

6. Axure RP

Crreating a project

+

+

+

+

+

+

Creating a mockup

+

+

+

+

+

+

Clickable links associating screens and elements with each other

-

+

+

+

+

+

Project view and preview

+

+

+

+

+

+

Project export

+

+

+

+

+

+

Team contribution

+

+

+

-

-

+

Creating diagrams

+

-

-

+

-

+

Drawing

-

-

-

-

-

+

Changing element type

-

-

+

-

-

(geometric figures only)

Element import

-

-

+

+

-

-

User-friendly interface

+

-

+

+

+

+


The review of the six most popular mockup applications can be broken down into the following bullet points:

  1. The feature set, similar for almost all of the apps, includes:
    — creating a prototype comprising screens and folders;
    — creating mockups;
    — association of screens and elements through clickable links;
    — project view and preview;
    — project export.
  2. Of all the offline software we reviewed, only Axure RP allows for team contribution on prototyping.
  3. Each of the mockup tools has its own benefits. We see the following as features that contribute to the utility:
    — changing element type with Balsamiq;
    — all prototypes presented within one screen in Pencil Project;
    — creating diagrams with Moqups, Pencil Project, and Axure RP.
  4. The most user-friendly interfaces are Moqups, Balsamiq, Pencil Project, and Axure RP.
  5. On the aesthetic side, Moqups, Balsamiq, Pencil Project, and Uxtoolbox excel at creating visually appealing mockup designs with default elements.
  6. Pencil Project provides the most comfortable price of $0. Moqups offers the best price compared to other web apps we reviewed.

And the winner is, according to this review by Devvela, Balsamiq: the Web-based prototyping tool that best meets our criteria. However, we must include Pencil Project and Moqups in our list of finalists because they are still great tools, particularly if your criteria varies from ours (see Fig. 13).


Conclusion

Our top three mockup tools:

Moqups would be the best option for a small company where team contribution on prototyping and/or integration with corporate software matter. The license is purchased per user.

Balsamiq, the very best mockup app for us at Devvela, is recommended to companies employing a lot of contributors because its license covers the whole company. There is one more thing you need to know before purchasing the license: the price skyrockets if you exceed the limit of 20 projects worked on in parallel. Should this be your case, you may prefer Moqups.

Pencil Project works fine in all other situations. This free-to-use prototyping tool, with the features and elements it provides, equals its fee-based alternatives.


Figure 13. Decision-making mind map to help you choose the mockup tool that meets your specific needs
(made with Pencil Project using elements by OpenClipart)

Got a ground-breaking website or mobile app idea?

Let's make it real!

Rate this article
Similar Articles
December 24, 2015Lifestyle & mindset

7 Tips to Cut Fear of Failure

Fear is one of the most common forces that prevent us from success. More specifically, fear of failure has power to immobilize us, to make us feel helpless and useless. But to move forward, one has to learn being able to do things despite it (getting rid of the fear completely is neither required nor helpful).

December 18, 2015Lifestyle & mindset

Feeling No Progress In Life And Work? Time To Look Around.

Being an entrepreneur means doing things that may seem weird, or at least unworthy to the majority. Even if you’ve found enough courage for the first step you still might end up feeling stuck, low in energy and unable to make any further progress - thanks to these people.

February 02, 2017Startup strategies

8 Steps To Validate Your App Idea

Most startups fail, and they fail because the ideas behind them haven't been properly validated against the market. As a technology services provider, what can WE do to prevent our clients from failure? This post sums up what we've learned from our experience checked against what successful founders say to help you validate your app idea like a pro.

November 19, 2015Startup strategies

10 Reasons Why Online Businesses Still Rock

​Private breweries and yoga studios growing popularity is no threat to online businesses. Due to rapidly developing technologies and other crucial reasons they keep booming. Both new eCommerce and mCommerce startups come and go before our very eyes. What makes online business so attractive? These 10 reasons are the most obvious ones:

December 29, 2015Devvela insights

What Youth Athletes Have In Common With Boats

​2015 is closing in and we would like to take a look back at it. At Devvela, we have worked on several projects over the year, but two of them are especially close to our hearts.

November 19, 2015Startup strategies

3 Reasons Not to Implement the Strategy of Being the Cheapest

There is a widespread belief that when starting a new business you have to offer goods or services at a lower price than your competitors do if you want to carve out your niche and build up your customer base. This belief does have some basis in truth and might really work in some cases. Yet there are three things to consider before taking this road.

November 26, 2015Lifestyle & mindset

10 Inspirational Quotes About Successful Startups and Business Values

Leading entrepreneurs talking about where amazing ideas come from and values behind successful startups.

December 03, 2015Lifestyle & mindset

13 Tips To Overcome Fear Of Public Speaking And Develop The King’s Speech

Ever heard of glossophobia? You may not know what the term stands for, but it doesn’t mean you have never experienced the feeling. Glossophobia is a common fear of public speaking a.k.a. “stage fright”. Most studies show that it has its place in the top 5 fears, and 3 out of every 4 people fear public speaking.

December 07, 2015Lifestyle & mindset

Procrastination: A Guide To Better Understanding

​Caught yourself putting off important tasks in favor of cute kitties pictures on the Internet or scrolling down the newsfeed again? Welcome to the i-will-do-it-later’s club, the place where personal development dies! We surfed the Web to find out if being a procrastinator is actually so bad and if it is, how we can cope with it.

December 11, 2015Lifestyle & mindset

Fight With The Couch, or How To Stay Productive After Work

Even if you aren’t involved into your own private business after work, you might like being able to spend your so-called free time wisely. We browsed the Web and read through forums to find out what experts suggest and what people actually do to stay productive after work. Here is what we have learned.

December 21, 2015Startup strategies

Startups That Failed In 2015

​90% of all startups fail. In 2015, we’ve seen the end of seemingly very promising online businesses. Let’s take another look at them and try to understand why they failed.

December 24, 2015Lifestyle & mindset

How To Stay Persistent

How many times have you heard that it’s important to stay persistent if you want to achieve great goals? Indeed, occasional success might bring opportunities, but it won’t bring you millions. Yet keeping on track is often easier said than done. We did a little research on the topic and came to the following tips.

December 29, 2015Startup strategies

4 Awesome Books on Entrepreneurship and Startups

There is always something to learn. And sometimes reading articles on the Internet is just not enough.

January 29, 2016Startup strategies

5 Tips On Finding The Right Development Company

Finding the right development team is one of the key challenges when building a web/mobile based startup. Our tips are based on 8 years experience as a web and mobile development company and meant to make the challenge easier for you.

February 20, 2016Lifestyle & mindset

Mastering These 6 Arts Will Help You to Become a More Influential Person

If influential people decide to launch a tech startup, Web and mobile development companies are ready to build their apps for equity, media rush to them hungry for details, and investors and funding crowd react like ‘shut up and take my money’. There’s certainly some kind of natural magic behind them.

March 18, 2016Startup strategies

13 Signs Of A Failing Startup

If your startup lasts longer than it should, it's burning a big deal of time, money, skill and talent which could certainly be more useful when working on a real big thing. These 13 signs will help you to determine whether to stay persistent or put your business to bed.

March 25, 2016Lifestyle & mindset

Top Entrepreneurs Share On How They Manage Stress

Every startup founder is put under a lot of pressure daily. Yet top entrepreneurs have found their ways to stay calm and in control at times of stress. Some of them are even sharing their secrets with others gladly. Here’s what they say.

February 10, 2017Startup strategies

Tools & Sources That Help Validate Your App Idea - Part I

As you validate your app idea, plenty of tools & sources come into play. Even though they might be easy to use, it still takes precious time to learn what exactly to do. That's why we came up with the idea of creating an ultimate guide on using these sources and tools to validate an app idea.

May 12, 2017Devvela insights

VoteSphere - Your GPS for A Complex Political World Built by Devvela

Amidst all the political uncertainty the world has been facing recently, Devvela is especially proud to present this new app that will help you navigate the sea of politics. Create your political portrait with VoteSphere, share it and see others’ spheres.

May 30, 2017Devvela insights

Make the most of Slack with Message.Pro Bot Built by Devvela

We keep on telling about Devvela's latest releases. This time this is neither website, nor mobile app. Meet Message.Pro the slack bot!

February 12, 2018Devvela insights

Play to live, live to win with a new Exantra World RPG Fitness game

Meet Exantra World - a new RPG fitness game that will change your fitness and gaming experience forever.

March 04, 2016Tech behind startups

2 Free Ways to Build a Tech Startup for Non-Tech Founders

Starting tech business with no money, no technical background and no tech co-founder? Sounds crazy! And yet it can work out.

April 12, 2016Tech behind startups

4 Athletic Injury Management Platforms and Their Founders

About 70% of children in the US participate in organized and team sports. More than 3.5 million kids ages 14 and younger get hurt in the process. Given these numbers, it comes as no surprise that entrepreneurs come up with web & mobile startups for monitoring athletic injuries.v

November 11, 2016Tech behind startups

Which Tool Is Best For Cross Browser And Cross Device Testing?

Know which online tool we called the best to test websites on different browsers, mobile devices and screen resolutions after we’ve tried Browsershots, Browser Sandbox, BrowserStack, CrossBrowserTesting, Litmus, Sauce Labs and 6 more alternatives to manual testing.

December 25, 2017Tech behind startups

Top 7 Social Features To Boost Your App’s Engagement

Looking to improve user engagement for your mobile app? Consider introducing these seven popular social media features that can be customized to your specifics.

January 24, 2018Tech behind startups

Creating a Chatbot for Your Business: Why and How

Unsure if you should create a chatbot for your business or not? This guide on chatbots sums up all you need to know before you start building your own bot

February 21, 2018Tech behind startups

Blockchain Technology Explained In Simple Language

Blockchain technology, smart contracts, cryptocurrency, other blockchain use cases... does this sound intimidating to you? If your answer is yes, you’re in the right place. Here’s the blockchain explanation you’ve been looking for — simple and clear. No kidding — see for yourself.

Enough wasting your time, let’s
Get in touch