Basically, when creating a prototype or wireframe you create a preliminary version of your
final product. Through prototyping and wireframing you introduce your idea to the world,
pass the purpose of the project to users through its basic functionalities and
interactivity, get valuable feedback, and discover whether your project satisfies customers’
needs or must be improved. So, it is definitely worth it. However, there is a huge number of
prototyping and wireframing tools on the market, and choosing the right and perfectly
suitable one for your project may prove to be a tricky task.
It always depends on your skills and what exactly you want to create. You can start from one
of the oldest and simplest option – pen and paper and draw you design, illustrating your idea
on paper. If you are proficient enough and able to code, you can do more with framework like
Bootstrap, Foundation or their lightweight alternatives. So, if you come to decision to use,
here is what you need to know.
To begin with
There are some factors, which you should define before making your decision. Learning curve. In order to implement the right tool you have to learn how to use it. At this moment, it is important to consider what knowledge you already have about it and what you still need to learn. What are you going to prototype. Is this a website, a mobile application or a desktop one?
Level of fidelity. You should consider to what extent your prototype must
reflect the final product. It may have low level of fidelity with the aim just to test your
idea, high level of fidelity when it visually looks like your final product with different
animations, transitions and interactions included, or something in between.
Collaboration and communication. Some tools prioritize collaboration, and
some don’t involve it at all. Probably, when you work alone on your prototype, you won’t
give this factor a huge meaning. However, while working with a team, you need to communicate
with your counterparts constantly, leaving and receiving feedback in real-time, so this part
of prototyping tool may be rather important.
Ease of use. Eventually, the tool you choose must be convenient and
suitable for you. Apparently, it will take some time to get used to it, but in the end you
must feel comfortable using and working on a model of your product.
When you decide on your priorities, it’s time to look at the options the market offers you. So,
here you have 8 options to compare and choose the right one just for you.
Axure
Axure is definitely one of the most popular prototyping tools on the market. It is of those
UX tools with the help of which you can create truly advanced interactive prototypes. With
Axure you can create both simple diagrams and rich prototypes with a lot of functions and
complicated interactions. It allows creation of rapid prototypes without writing a line of
code. Axure is aimed at web and desktop applications and is not suitable for mobile ones.
Overall, its broad set of tools, superb training and support documentation, solid library of
widgets, and enabling to add interactivity and complex interactions make Axure highly competitive
among other prototyping tools. Meanwhile, its steep learning curve makes it quite tricky to use
Axure without some design background.
Platform: Mac, Windows
Price: Pro edition – $495 or $29 per month; Team edition – $895 or $49 per month;
Enterprise edition – $99 per month.
InVision
InVision is often considered to be the most popular prototyping tool out there. Its clients are Uber, Twitter, Hubspot, Evernote, and other famous brands, which already means something. InVision has got a huge number of useful features and constantly continues adding new ones. It is relatively easy to learn, has a fast setup and a simple web display of a prototype. InVision is excellent in facilitating collaboration and feedback processes. Clients and team members are able to make comments directly on the prototype. With its LiveShare feature it all can be done in real time within a screen sharing integration.
Although InVision works with existing modes only and it doesn’t support creating and editing
designs directly, it enables transforming static screens into interactive and clickable
prototypes. Moreover, it provides synchronization with Photoshop and Sketch, so design files
can be imported from there. It also offers clickable hotspots, hover states, animation and
transition options, mobile prototyping complete with gestures, real-time to-do lists,
syncing with Dropbox, Slack and other apps, as well as much more. With such a powerful
features package InVision stays a strong competitor on nowadays prototyping tools market.
Platform: Web
Pricing: ranging from $0 (for 1 prototype in a month) to $99 (unlimited number
of prototypes + up to 5 members in a team)
JustInMind
Justinmind is meant to be an all-round
prototyping tool. It supports different types of devices, enabling creating web and mobile wireframes.
With Justinmind you can build both simple click-through prototypes and more complicated ones.
It is your decision to use either existing mocks or create your own screens – both options are
possible. There is large widget library including buttons, forms, checkboxes, list etc. With
this tool, it is possible to make interactive wireframes with different interactions and animations
without coding. Justinmind may be difficult to get into, however it provides a tutorial section
with helpful educational materials and community support.
Platform: Mac, Windows
Pricing: ranging from $19 per user per month (billed annually or $29 month-to-month)
to $495 per user (multi-user discount)
Marvel
Marvel is a web-based prototyping tool for creating fast, simple, and click-through prototypes for web and mobile applications. Prototypes can be created from existing mocks uploaded into Marvel directly or via Google Drive, Sketch, or Dropbox in such formats as PSD, GIF, JPG. Meanwhile, there are no features for creating or modifying elements.
Still, Marvel’s competitive advantage lies in its simplicity. Of course, being simple to use
and learn means its reduced functionality, but this tool has got all the needed basic
functions. With Marvel it is possible to add screens and hotspots without much effort,
include simple animations to page transitions, visually link screens and drag and drop them
for rearranging, edit and view prototypes on mobile app using basic mobile gestures etc. One
more advantageous feature of Marvel is its mobile companion app. With this app you can
transform your sketches on paper into prototypes only by taking a photo of them.
Therefore, Marvel is a good option for those who want to create simple and quick mockups as well
as for newcomers in web design.
Platform: Web
Pricing: starting from $0 per month (for 2 free projects) and getting higher
depending on what you need (there are Pro, Plus, and Company versions) and how many users are
in your team (for instance, Company version for 3 users costs $45)
Flinto Lite
Flinto Lite is another prototyping tool
that is about simple and fast prototype creation. This tool is ideal for mobile apps and it allows
creating prototypes for Android, iPad, and iPhone.
By using only existing mocks imported into Flinto Lite you can create your prototype in
about 5-10 minutes. The philosophy of this company states that it is of the utmost
importance to create a prototype of your final product on the early stages before
development starts, so test your product from the start. That is why it offers rapid and
easy prototypes creating without disrupting your workflow using the screens, which have
already been designed.
Apparently, having simple and fast prototyping style it provides only basic functionality. But
sometimes it is all you need. Flinto Lite allows connecting screens visually, sharing prototypes
with others in one click, dragging and dropping new screens over the old ones, adding transition
effects to links etc. There is also Flinto for Mac version – app prototyping tool for creating
both simple prototypes and more comprehensive ones including interactions. Flinto for Mac has
such features as Sketch plugin, live preview on your desktop, Behaviour Designer feature for
creation of micro-interactions within screens, customizable image sizes and others.
Platform: Web
Pricing: $20 per member per month
Proto.io
Proto.io is a web-based prototyping tool made for creating fully-interactive prototypes with a high level of fidelity. It has a truly extensive library of built-in widgets for iOS 7 and 8, Android 4, and Windows 8 devices. Proto.io is about building prototype elements within the tool, not uploading existing mockups. You can begin with a bare template and create the final version of your prototype, feeling free to customize your prototype in the way you choose.
Proto.io enables to add interactivity to individual elements, including animations,
transition effects, and scrollable containers. It also supports mobile gestures and
transitions. Moreover, it has Dropbox syncing for assets and provides support for Sketch and
Photoshop plugins. Proto.io supports commenting and conversations but it does not allow
setting detailed required documents. It may be difficult for the first-time users to work
with Proto.io because of its great deal of options and functions that can be a little
overwhelming, but it provides proper training and support documentation.
Platform: Web
Pricing: starting from $29/month (1 user and 5 active projects) ending with
$199/month (10 users and 30 active projects). There is also up to 20% discount for annual billing.
Protoshare
Protoshare is a browser-based tool
for creating wireframes and prototypes. It focuses on collaboration between team members and
clients, enabling them to put their comments, opinions, ideas, and decisions in real-time. It
makes the working process more effective and faster, as communication problems and misconceptions
are often the reason projects face some difficulties or even fail.
Protoshare is not a Flash tool and it uses HTML, CSS, and Javascript. It is good for creating
prototypes with multiple states and animated transitions for web, mobile, and tablet. This prototyping
online tool also enables building interactive and clickable prototypes, adding animations to
individual elements, using custom CSS and including your own elements there, exporting prototypes
to an HTML file or Word document and so on. In addition, it has a considerable library of drag-and-drop
components. What is more, it is not about using existing mockups, but more about creating new
screens within the tool. Meanwhile, with all its features and complexity Protoshare may be a
bit difficult for beginners.
Platform: Web
Pricing: offers Standard plan for $29/month; Professional plan for $49/month,
Business plan for $59/month and free 30-day trial for all the plans
UXPin
UXPin is one more web-based tool for prototyping web, desktop, and mobile apps. Both static wireframes and fully interactive and animated prototypes with a low or high levels of fidelity may be built with this tool. It has a truly extensive library of UI elements and UX patterns, which are available for various devices and frameworks. It also supports importing designs from Sketch or Photoshop. You can create prototypes either by importing existing mocks, Photoshop and Sketch files or within UXPin with the help of its UI libraries. What is more, UXPin offers a clean drag-and-drop interface, usability testing, live presentation for your stakeholders, and supports collaboration enabling commenting and annotation.
Apart from all the advantages UXPin offers, apparently there must be some drawbacks. This
prototyping tool has a moderate learning curve, so it may not be clear enough for the
first-time users, it may provide no support for gesture-based interactions, and no support
for creating master elements. Nonetheless, UXPin provides really good blog with a lot of
valuable information about UI and UX.
Platform: Web
Pricing: ranging from $19/month per user (Basic) to $98/month for 2 users +
1 for free and $49 for every next user (Team)
Fluid
Fluid is a web-based prototyping tool,
which is ideal for creating mobile application prototypes. It has a lot of users so far, and
such well-known brands as Google, Samsung, Xerox, and eBay are among them. Fluid has 16 built-in
libraries for all modern mobile platforms, such as Android, iOS, Windows, and wearable devices.
You can create your prototype from existing mocks or by building screens within Fluid using its
libraries. Furthermore, Fluid is a great visualization tool. You can map out your ideas by creating
screen flaws, building diagrams, and illustrating how it works.
In general, it has an intuitive and clean interface, easy drag and drop functioning, extensive
UI widgets library, support gesture-based interaction between pages, ability to add transition
effects to links, ability to share your project with your team members and clients, version history
etc. However, it does not support adding interactivity to individual elements, and its learning
curve may be characterized as moderate, as it will take some time to get oriented for not really
experienced users.
Platform: Web
Pricing: starting from $8.25/month or $99 a year for a Solo plan (3
projects) ending with $41.58/month or $499 a year for a Team plan (unlimited number of
projects)
Therefore, the above mentioned tools are only bright representatives of those existing on the
market. There are plenty of wireframing and prototyping tools out there with their advantages
and disadvantages. It’s impossible to determine the one that beats them all, because the best
solution for you will not be the best for your neighbor. It is all about what you need and what
you are looking for, so you have to consider your priorities, choose the most appropriate option
and give it a try.