Years ago, a kid was trying to fashion a bow by cutting a twig with a knife. Upon seeing this struggle, his grandfather handed him a saw, saying, “Always use the right tool for the job!” As the kid in the story, I learned a valuable lesson in craftsmanship: When you’re picking a tool to solve a problem, there are many good tools, but some are better suited to the task than others!
In recent years, new prototyping tools have emerged, many for mobile design. The landscape is constantly changing, with some tools losing favor with UX designers (or UXers) and others taking their place. While this article will not serve as a complete paint-by-numbers manual for selecting a prototyping tool, we will discuss important factors that influence the selection process.
I will rely on my personal experience in using and researching various tools to explain how certain tools are a better fit than others. Near the end of the article, the “Resources1” section will point you in the direction of more specific comparisons to give you additional context for decision-making.
You Need a Mobile Tool. What Do You Do? Link
Even though you have many tools to choose from for your mobile project, picking one does not have to be a daunting task. You can narrow the possibilities by answering questions to form selection criteria.
The project’s needs will give you good initial constraints. Are you testing usability? Will visual design be a part of the prototyping? Will the prototype capture a high-level concept or full-blown production work?
UX designers constantly assess the given problem and chart a course. So, why don’t we apply the same process to choosing a prototyping tool? Breaking down the choice into smaller factors will build your confidence in the direction you eventually pursue. Each of the following can play an important role in your decision:
- interaction fidelity,
- animation and motion,
- gesture support,
- visual design,
- simplicity in demoing,
- digital collaboration,
Technical Factors To Consider Link
The mobile prototyping landscape is growing every year with exciting new tools. Each tool has diverse features that allow the designer to tackle a variety of problems. Some tools are more valuable for one set of tasks than another. No single tool is best at everything!
Below is one interpretation of how suitable common prototyping tools and technologies are, given our selection criteria. Keep in mind that your selection will depend on the project. You might find that tools labelled below as a “Good fit” (rather than “Most suitable”) are a better choice for your project.
A rating of “Good fit” simply indicates that a particular tool is highly recommended but that another tool (indicated as “Most suitable”) has slightly higher functionality, making certain tasks easier to accomplish.
1. Interactive Fidelity Link
Interactivity comes in different flavors. You might only need to communicate flow; thus, clickthrough prototypes would be ideal (which are typical for conceptual and usability testing). Rather, the project might require you to illustrate multi-step conditional interactions (if you need production-ready and documentation-focused prototypes). Whatever the case, a prototyping tool exists to help!
Good Fit Link
More Suitable Link
Interactive flexibility is gained when a tool supports variables for managing states, detailed event models, and reuse of elements. Tools that fit this bill include cloud-based ones, such as Pixate14084733810 and Proto.io13910285342511, and desktop software, such as Axure13413210188796052362312 and Justinmind135103372413. Programming technologies such as Bootstrap14, jQuery Mobile15 and Framer13613312365392616 also offer these, and their effectiveness depends on the speed with which you can build a prototype.
2. Animation And Motion Link
Animation plays a big role in communicating mobile interaction. At the onset of a mobile project, determine whether you are responsible for creating animations in the prototype or someone else is, like a developer or motion designer. Regardless of who will be handling this, it helps to know what level of control over the animation is required in the prototype.
Good Fit Link
Mobile tools in this category often come with built-in animations but lack customizability (such as Blueprint141988767443220, POP21 and Xcode22). Some of the more robust tools offer animation configuration, including timing and elasticity settings; Axure13413210188796052362312, Justinmind135103372413 and Proto.io13910285342511 have this functionality.
More Suitable Link
For extra control over an animation’s velocity, elasticity, friction and other physics-based properties, you could try coding tools such as Framer13613312365392616 or CSS3 animation584627. Many of these tools can also animate unique widget properties, including size, rotation, opaqueness, color and blur level.
3. Gestures Link
Mobile prototyping involves designing for gestural input, so consider whether your project requires this. Most UX-specific tools support this out of the box — one set of tools will have common gestures built in, while another set will support gesture creation and multi-finger input.
Good Fit Link
Built-in gestures can be found in POP1439575684331, Blueprint141988767443220 and AppCooker866633 and in many cloud-based mobile tools, such as Proto.io13910285342511. These tools support taps, swipes and flicks. Some have touch-and-hold and double-tap functionality. The gestures don’t have configurable parameters, which can be constraining if you need to trigger specific interactions upon gestural input.
More Suitable Link
If your prototype requires finer gestural control, including drag dampening, speed and directionality, then you’ll need to leverage mobile tools with some form of an API, whether it’s code-based or abstracted in the form of human-readable actions. Good examples are Hammer35 and Axure13413210188796052362312. A few tools even support multi-finger gestures: Justinmind135103372413, Pixate14084733810 and Framer13613312365392616 execute two-finger pinch and rotation.
4. Visual Design Link
When prototyping for mobile, identify the expectations for the deliverable’s visual fidelity. UXers are often tasked with visual design, a responsibility that is delegated to specialized designers in large organizations. The fidelity will be dictated by the project’s goals and the audience: high for pitches and production work, middle to low for usability testing, and low for proofs of concept.
Good Fit Link
Paper-in-mobile tools (POP1439575684331 and Blueprint141988767443220), code-based tools (Framer7445 and CSS3 animation584627) and cloud-based tools (Flinto47, Pixate10048 and InVision776149) create interactions around visual assets imported from external visual apps. Some of these tools are even capable of visual design via built-in widgets. In this type of workflow, UXers might find themselves switching between the prototyping tool and a visual application such as Sketch50 or Photoshop51.
More Suitable Link
Some prototyping tools are capable of sophisticated visual design, including gradients, drop shadows, custom fonts and reusable styles (such as Axure13413210188796052362312 and Justinmind897853). This makes for a standalone process, addressing most of your prototyping needs. However, for more involved visual design, including masking, multi-path vectors and photographic enhancements, UXers must rely on dedicated visual tools.
5. Simplicity In Demoing Link
Getting mobile prototypes in front of an audience is critical to validating a design. There are two main methods for demoing mobile prototypes: on a computer or directly on the target device. There are variations in between, such as mirroring from computer to device and vice versa. When kicking off a project, consider which method makes the most sense and which is supported by your prototyping tool.
Good Fit Link
Many code-based tools (jQuery Mobile1379157 and CSS3 animation584627) require a prototype to be hosted in the cloud and loaded on the target device via a link. This can create additional steps for demoing. Tools such as ProtoSee59 on iOS allow a generated prototype to be loaded directly on a device, making them a quicker solution. Some mobile tools go a step further by offering apps capable of pulling prototypes from the cloud onto a device, including Axure13413210188796052362312, InVision776149 and Proto.io62.
More Suitable Link
Many vendors have started coming out with companion apps for target devices. This allows a UXer to prototype on the desktop and, in real time, mirror the prototype on a mobile device over Wi-Fi. Pixate63, Flinto64 and even Framer13613312365392616 support this via native apps. Keep in mind Wi-Fi reliability and the overall size of the prototype.
Interestingly, mobile tools that allow you to create a prototype directly on the target device also offer one of the easiest ways to demo the prototype. AppCooker866633, Blueprint141988767443220, POP1439575684331 and Marvel7669 have built-in functionality to switch between editing and preview modes.
6. Digital Collaboration Link
Designers don’t work in a vacuum. UXers join forces with stakeholders and other professionals (including visual designers and developers) during a project’s lifecycle. Therefore, collaborative creation of prototypes is important. Find out up front how you are expected to work with others.
Good Fit Link
Many mobile prototyping tools are designed for single UXers and, therefore, do not support co-creation or capturing of feedback; Pixate14084733810 and Framer7445 come to mind. Some tools do not support co-creation but provide some level of collaboration; POP1439575684331, Marvel7669 and InVision776149 allow external feedback to be captured, which ultimately drives iteration.
More Suitable Link
The mobile prototyping tools that offer the most robust collaboration allow for shared projects, version control and distributed co-creation. Both Justinmind897853 and Axure13413210188796052362312 are capable of this. And both allow for reviewers to comment on prototypes.
7. Documentation Link
Not all mobile prototypes require documentation; the interactions and flows are sometimes adequate. For a system with a lot of business logic and complexity, documentation becomes an important tool to clarify details for developers. Documentation captures specifics that have not been implemented in the interaction design but that reside in the UXer’s mind.
Good Fit Link
Many prototyping tools rely on the prototypes to serve as the documentation (Flinto13883 and Pixate14084733810). Some tools go one step further by enabling UXers to export a design as a PDF or a stack of PNGs. In this category, tools have mixed support for annotation. For example, Proto.io13910285342511 does not have this feature, while AppCooker866633 and Blueprint141988767443220 allow for custom notes and annotations.
More Suitable Link
The most flexible documentation comes from platform prototyping tools such as Axure13413210188796052362312 and Justinmind897853. With them, you can annotate individual UI widgets or entire pages, create dynamic documentation categories, and generate complete specifications with a click of a button! Additionally, many code-based tools capture inline documentation (Framer90 and jQuery Mobile1379157), which can be helpful for developers.
8. Responsiveness Link
Determine whether your prototype will support a native experience or be responsive. Furthermore, if you are working on a responsive web design, consider whether the tool supports adaptive or fluid layouts, whether it has a library of responsive widgets, and how the responsiveness can be demoed within the tool.
Good Fit Link
Some mobile tools are incapable of showing screens for different breakpoints; POP1439575684331, Marvel969 and presentation software such as Keynote977 are good examples. However, breakpoints can be documented individually and shown in side-by-side comparisons.
Other tools support different orientations of a single breakpoint and even variations of the same design across breakpoints, but they do not yet dynamically switch across breakpoints during a demo. Blueprint141988767443220, InVision99 and Pixate10048 are but a few.
More Suitable Link
Dedicated UX tools with support for responsive design are emerging. Axure13413210188796052362312 has a feature that allows you to create adaptive prototypes for multiple breakpoints. Fluid design is possible, although it requires some hacking. Proto.io13910285342511 and Justinmind135103372413 are capable of truly fluid designs.
Hidden Influences On Your Choice Link
You have now completed your investigation of tools. You are pretty happy with your choice and want to jump into designing. The prospect of creating awesome work is a great motivator, but sometimes it prevents us from seeing the big picture! Aside from the technical aspects, we have to consider secondary factors. Let’s review these briefly before getting to the recommendations!
Picking a prototyping tool, especially one that you don’t have any experience with, is a tricky proposition. In addition to the time spent on the project itself, you will spend time learning the mobile tool’s intricacies and bugs and the process for reworking a design. This should not discourage you from diving in.
Becoming comfortable with the basics of a tool can take from six months to one year. Mastery comes with continual use, and with some tools, that can take up to two or three years. Mastery entails knowing immediately how to tackle a problem without having to research. These estimates derive from my personal experience but will depend on your own familiarity with coding and prototyping.
You will have to adopt a development-related mentality: Compartmentalizing, logic propagation, event detection and responding all take time to get used to. Each tool treats these aspects differently at the UI level, creating new design metaphors for you to tackle. With each successive tool you master, however, you will build up transferrable knowledge!
For installable products, look into tiered pricing. For example, Axure111 has standard and pro versions, which differ in cost and functionality. Other considerations include the number of machines a single license supports and the frequency of upgrades.
Cloud-based tools are priced per month. Calculate the cost for six-month and one-year periods, which is suitable for most mid-sized to large projects. The tools will vary in the number of projects, functionality and even number of reviewers permitted. Check out InVision112 and Proto.io113 in this category. There are also hybrids, in both standalone and cloud-based versions, such as Justinmind114 and Pixate115.
Don’t underestimate the power of free! Some cloud services offer free plans for one to three projects. Downloadable tools usually have one-month trial versions. For UXers who are still in school, companies provide free or discounted tools: Pixate116 used to have an “academic account” before its acquisition by Google; Axure has a good student program117; and Proto.io offers a 50% educational discount118.
If you are going to use a single tool for multiple projects, you will get the best return on investment by buying the tool rather than using a subscription. For individuals and small design workshops, this is the best option. With subscriptions, the total money spent over the lifetime of the tool might not be cost effective, unless your team is heavily distributed geographically and relies on real-time collaboration. Big design agencies and corporations have the financial flexibility to take this approach.
Technical Support Link
Your decision will be informed not only by a tool’s functionality, but by the technical support offered. I am referring to publicly available documentation in the form of video tutorials, step-by-step walkthroughs, API libraries and so on. Proto.io does an excellent job with its webinar monthly program119; Axure has detailed step-by-step walkthroughs120; and Framer has an API website121 and community-built examples122.
Another consideration is the speed at which tools are updated to accommodate evolving UX needs. Prototyping tools with minor releases every three months and major releases every six to twelve months are able to stay ahead of the design curve. For instance, Framer13613312365392616 has many small updates for bug fixes and new functionality, whereas Axure124 typically has major releases every twelve months, with incremental updates in between.
Third-Party Resources Link
Mobile prototyping tool vendors focus on community building. Designers often tackle the same problems; thus, knowledge-sharing is highly relevant. Many tools come with online forums where users can contribute their own prototypes and information, including Axure125, Proto.io126 and Justinmind127. Other vendors, including Framer128, use alternative solutions such as Facebook Groups.
Your choice should also be based on a tool’s reception by the UX community. The number of publications and professional events is a good indicator of designer interest. For more widely adopted tools, you will see certification courses and markets for selling design assets. For example, there are books, articles and an annual webinar for Axure13413210188796052362312, whereas Framer13613312365392616 has professional workshops in multiple cities and user-contributed GitHub repositories.
In this article, we’ve introduced practical considerations for selecting a mobile prototyping tool for UX, covering both technical factors and more strategic selection criteria. Keep in mind that there is no right or wrong decision — designers have different working styles, expertise and needs!
To make your choice even more informed, identify your strengths. Do you know coding? Are you an excellent visual communicator? How many requirements have you identified? Answering these questions and collecting information about the project will help you determine the right tool.
No one wants to be a one-trick pony. Therefore, we recommended having at least one of each of the following categories in your mobile prototyping toolkit:
- Full platform for tackling a variety of mobile problems: Axure13413210188796052362312, Justinmind135103372413
- Code-based tool for controlling interaction and animation: Framer13613312365392616, jQuery Mobile1379157
- Cloud-based tool for collaboration and distributed work: Flinto13883, Proto.io13910285342511, Pixate14084733810
- On-device prototyping tool for quick concept mockups: Blueprint141988767443220, AppCooker142, POP1439575684331
Strive to be the best in your discipline; stay curious about new interaction tools (such as Principle144, InVision Motion145 and Adobe Experience Design CC146); and continue prototyping great experiences for your business partners and end users. I look forward to hearing about your experience in picking prototyping tools for mobile!
High-Level Comparisons of Tools Link
- “Designer’s Toolkit: Prototyping Tools147,” Emily Schwartzman, Cooper
- “UX Tools148,” Fabricio Teixeira and Caio Braga, UXdesign.cc
- “The UX/UI Prototyping Tools List149,” Michael McDearmon
- Prototyping Tools150, Javier-Simón Cuello
Deeper Dives Into Pros and Cons Link
- “Breaking Down the Pros and Cons to Some of Today’s Most Popular Prototyping Tools and Applications151,” Stephen Meszaros
- “Comparing 9 Mobile Prototyping Tools Every Designer Should Consider152,” Dave Crow
- “Comparing Popular Layer-Based and Code-Based Prototyping Tools153,” Bona Kim, UX Magazine
- “Comparing Four Popular, Page–Based, Interactive Prototyping Tools154,” Bona Kim, UX Magazine
(da, ml, al, il)
- 1 #mobile-resources
- 2 https://www.smashingmagazine.com/wp-content/uploads/2016/02/02-prototyping-opt.png
- 3 https://www.smashingmagazine.com/wp-content/uploads/2016/02/02-prototyping-opt.png
- 4 https://www.smashingmagazine.com/wp-content/uploads/2016/02/03-part-interactivity-opt.jpg
- 5 https://www.flickr.com/photos/feidhli/14005915142/
- 6 https://www.smashingmagazine.com/wp-content/uploads/2016/02/03-part-interactivity-opt.jpg
- 7 http://www.apple.com/mac/keynote
- 8 http://popapp.in
- 9 http://marvelapp.com
- 10 http://www.pixate.com
- 11 http://www.proto.io
- 12 http://www.axure.com
- 13 http://www.justinmind.com
- 14 http://getboostrap.com
- 15 http://jquerymobile.com
- 16 http://www.framerjs.com
- 17 https://www.smashingmagazine.com/wp-content/uploads/2016/02/04-interactive-motion-opt.jpg
- 18 https://www.flickr.com/photos/themonnie/2495892146/in/photolist-4Ny6Md-pcstLd-dwgR1s-gKjyBx-cHbC2d-crigKA-q8Ni7D-75ZHcC-bVTK3V-q4ZvGz-AS4thM-u6YBsP-8NsVpr-5QmUqg-6xJtv5-7zv4tT-6bS7DD-eeMLbc-9Zqu4n-8MohVE-bWpQXL-pkwwGX-9CcBEC-5YfMW4-4PYoXe-pqQ19r-9ddRXx-oVABgn-6Ewmhz-7kRfMP-jVAw7X-tmmX5X-8YYbV2-7g1xqv-cBokwL-fZeKb3-a58dty-bhUaTr-cMw56G-drkTsm-2euPzE-bhgyGt-bxAjyx-4CQ8wq-bWa8Cy-d6WZfU-F9Br9-ahCApF-oLeRCT-73rxMw
- 19 https://www.smashingmagazine.com/wp-content/uploads/2016/02/04-interactive-motion-opt.jpg
- 20 http://www.groosoft.com/blueprint/
- 21 http://www.popapp.in/
- 22 https://developer.apple.com/xcode/
- 23 http://www.axure.com
- 24 http://www.justinmind.com
- 25 http://www.proto.io
- 26 http://www.framerjs.com
- 27 http://www.w3schools.com/css/css3_animations.asp
- 28 https://www.smashingmagazine.com/wp-content/uploads/2016/02/05-gestural-input-opt.jpg
- 29 https://www.flickr.com/photos/nnova/15972323994/
- 30 https://www.smashingmagazine.com/wp-content/uploads/2016/02/05-gestural-input-opt.jpg
- 31 http://www.popapp.in
- 32 http://www.groosoft.com/blueprint/
- 33 http://www.appcooker.com/
- 34 http://www.proto.io
- 35 http://hammerjs.github.io
- 36 http://www.axure.com
- 37 http://www.justinmind.com
- 38 http://www.pixate.com
- 39 http://www.framerjs.com
- 40 https://www.smashingmagazine.com/wp-content/uploads/2016/02/06-color-meaning-opt.jpg
- 41 https://www.flickr.com/photos/seeminglee/4556156477/
- 42 https://www.smashingmagazine.com/wp-content/uploads/2016/02/06-color-meaning-opt.jpg
- 43 http://www.popapp.in
- 44 http://www.groosoft.com/blueprint/
- 45 http://framerjs.com/
- 46 http://www.w3schools.com/css/css3_animations.asp
- 47 http://www.flinto.com
- 48 http://www.pixate.com/
- 49 http://www.invisionapp.com
- 50 http://www.sketchapp.com/
- 51 http://www.adobe.com/photoshop
- 52 http://www.axure.com
- 53 http://www.justinmind.com/
- 54 https://www.smashingmagazine.com/wp-content/uploads/2016/02/07-prototype-context-opt.jpg
- 55 https://www.flickr.com/photos/k2_ux/8446526859/
- 56 https://www.smashingmagazine.com/wp-content/uploads/2016/02/07-prototype-context-opt.jpg
- 57 https://jquerymobile.com/
- 58 http://www.w3schools.com/css/css3_animations.asp
- 59 http://www.protosee.com
- 60 http://www.axure.com
- 61 http://www.invisionapp.com
- 62 https://itunes.apple.com/us/app/proto.io/id854504039?mt=8
- 63 https://itunes.apple.com/us/app/pixate/id883304734?mt=8
- 64 https://itunes.apple.com/us/app/flinto/id972238373?mt=8
- 65 http://www.framerjs.com
- 66 http://www.appcooker.com/
- 67 http://www.groosoft.com/blueprint/
- 68 http://www.popapp.in
- 69 http://www.marvelapp.com/
- 70 https://www.smashingmagazine.com/wp-content/uploads/2016/02/08-team-work-opt.jpg
- 71 https://www.flickr.com/photos/pagedooley/7007372665/
- 72 https://www.smashingmagazine.com/wp-content/uploads/2016/02/08-team-work-opt.jpg
- 73 http://www.pixate.com
- 74 http://framerjs.com/
- 75 http://www.popapp.in
- 76 http://www.marvelapp.com/
- 77 http://www.invisionapp.com
- 78 http://www.justinmind.com/
- 79 http://www.axure.com
- 80 https://www.smashingmagazine.com/wp-content/uploads/2016/02/09-prototype-documentation-opt.jpg
- 81 https://www.flickr.com/photos/domiriel/5888652979/
- 82 https://www.smashingmagazine.com/wp-content/uploads/2016/02/09-prototype-documentation-opt.jpg
- 83 http://www.flinto.com/
- 84 http://www.pixate.com
- 85 http://www.proto.io
- 86 http://www.appcooker.com/
- 87 http://www.groosoft.com/blueprint/
- 88 http://www.axure.com
- 89 http://www.justinmind.com/
- 90 http://framerjs.com
- 91 https://jquerymobile.com/
- 92 https://www.smashingmagazine.com/wp-content/uploads/2016/02/10-responsive-design-opt.jpg
- 93 https://www.flickr.com/photos/adactio/12674230513/
- 94 https://www.smashingmagazine.com/wp-content/uploads/2016/02/10-responsive-design-opt.jpg
- 95 http://www.popapp.in
- 96 http://marvelapp.com
- 97 http://www.apple.com/mac/keynote
- 98 http://www.groosoft.com/blueprint/
- 99 http://www.invisionapp.com/
- 100 http://www.pixate.com/
- 101 http://www.axure.com
- 102 http://www.proto.io
- 103 http://www.justinmind.com
- 104 http://getbootstrap.com/
- 105 http://foundation.zurb.com/
- 106 http://www.hotgloo.com
- 107 https://webflow.com/
- 108 https://www.smashingmagazine.com/wp-content/uploads/2016/02/11-learning-pivoting-opt.jpg
- 109 https://www.flickr.com/photos/warrenlynn/296429627/
- 110 https://www.smashingmagazine.com/wp-content/uploads/2016/02/11-learning-pivoting-opt.jpg
- 111 http://www.axure.com/buy
- 112 http://www.invisionapp.com/plans
- 113 http://www.proto.io/en/pricing
- 114 http://www.justinmind.com/pricing
- 115 http://www.pixate.com/billing-faq/
- 116 http://www.pixate.com/academic/
- 117 http://www.axure.com/edu
- 118 https://proto.io/en/pricing/
- 119 https://proto.io/en/webinars/
- 120 http://www.axure.com/learn
- 121 http://framerjs.com/docs/
- 122 http://framerjs.com/examples/
- 123 http://www.framerjs.com
- 124 http:/www.axure.com
- 125 http://www.axure.com/c/forum.php
- 126 https://protoio.zendesk.com/forums
- 127 https://getsatisfaction.com/justinmind
- 128 https://www.facebook.com/groups/framerjs/
- 129 https://www.smashingmagazine.com/wp-content/uploads/2016/02/14-resources-opt.jpg
- 130 https://www.flickr.com/photos/zionfiction/8069716607/
- 131 https://www.smashingmagazine.com/wp-content/uploads/2016/02/14-resources-opt.jpg
- 132 http://www.axure.com
- 133 http://www.framerjs.com
- 134 http://www.axure.com
- 135 http://www.justinmind.com
- 136 http://www.framerjs.com
- 137 https://jquerymobile.com/
- 138 http://www.flinto.com/
- 139 http://www.proto.io
- 140 http://www.pixate.com
- 141 http://www.groosoft.com/blueprint/
- 142 http://www.appcooker.com
- 143 http://www.popapp.in
- 144 http://principleformac.com/
- 145 http://blog.invisionapp.com/motion-prototype-animation/
- 146 http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html
- 147 http://www.cooper.com/prototyping-tools
- 148 http://uxdesign.cc/ux-tools/
- 149 http://mikemcdearmon.com/portfolio/techposts/uxui-prototyping-tools
- 150 http://www.prototypingtools.co/
- 151 http://stephenmeszaros.com/posts/prototyping-tools.html
- 152 http://moneysummit.mx.com/the-summit/2014/12/10/9-mobile-prototyping-tools-every-designer-should-consider
- 153 http://uxmag.com/articles/comparing-popular-layer-based-and-code-based-prototyping-tools
- 154 http://uxmag.com/articles/comparing-four-popular-page%E2%80%93based-interactive-prototyping-tools