Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

12 Factors In Selecting A Mobile Prototyping Tool

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.

Further Reading on SmashingMag:

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 “Resources5” 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,
  • documentation,
  • responsiveness.

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.

Prototyping tool breakdown6

Breakdown of prototyping tools based on technical factors (View large version7)

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!

Parts interactivity8

Individual elements can interact with one another. (Image: Daniel Waters9) (View large version10)

Good Fit Link

Some mobile tools are capable of clickthrough prototypes via hotspot linking. Presentation software such as Keynote10111 and the paper-in-mobile tools POP12 and Marvel10013 are good examples.

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 Pixate14488774214 and Proto.io14310689382915, and desktop software, such as Axure13813610592836456402716 and Justinmind139107412817. Programming technologies such as Bootstrap18, jQuery Mobile19 and Framer14013712769433020 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.

Interactive motion21

Animation can communicate complex interactions. (Image: themonie22) (View large version23)

Good Fit Link

Mobile tools in this category often come with built-in animations but lack customizability (such as Blueprint1451029171483624, POP25 and Xcode26). Some of the more robust tools offer animation configuration, including timing and elasticity settings; Axure13813610592836456402716, Justinmind139107412817 and Proto.io14310689382915 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 Framer14013712769433020 or CSS3 animation625031. 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.

Gestural input32

Mobile experiences require prototyping for gestural input. (Image: Nicolas Nova33) (View large version34)

Good Fit Link

Built-in gestures can be found in POP1479979724735, Blueprint1451029171483624 and AppCooker907037 and in many cloud-based mobile tools, such as Proto.io14310689382915. 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 Hammer39 and Axure13813610592836456402716. A few tools even support multi-finger gestures: Justinmind139107412817, Pixate14488774214 and Framer14013712769433020 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.

Color has meaning.44

Color can convey different emotion in prototypes. (Image: See-ming Lee45) (View large version46)

Good Fit Link

Paper-in-mobile tools (POP1479979724735 and Blueprint1451029171483624), code-based tools (Framer7849 and CSS3 animation625031) and cloud-based tools (Flinto51, Pixate10452 and InVision816553) 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 Sketch54 or Photoshop55.

More Suitable Link

Some prototyping tools are capable of sophisticated visual design, including gradients, drop shadows, custom fonts and reusable styles (such as Axure13813610592836456402716 and Justinmind938257). 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.

Prototype in context58
A prototype should be tested contextually. (Image: K2_UX59) (View large version60)

Good Fit Link

Many code-based tools (jQuery Mobile1419561 and CSS3 animation625031) 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 ProtoSee63 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 Axure13813610592836456402716, InVision816553 and Proto.io66.

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. Pixate67, Flinto68 and even Framer14013712769433020 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. AppCooker907037, Blueprint1451029171483624, POP1479979724735 and Marvel8073 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.

Collaborative prototyping requires teamwork. (Image: Kevin Dooley75) (View large version76)

Good Fit Link

Many mobile prototyping tools are designed for single UXers and, therefore, do not support co-creation or capturing of feedback; Pixate14488774214 and Framer7849 come to mind. Some tools do not support co-creation but provide some level of collaboration; POP1479979724735, Marvel8073 and InVision816553 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 Justinmind938257 and Axure13813610592836456402716 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.

Prototype documentation84

Documentation captures minute details not visible in the prototype. (Image: Domiriel85) (View large version86)

Good Fit Link

Many prototyping tools rely on the prototypes to serve as the documentation (Flinto14287 and Pixate14488774214). 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.io14310689382915 does not have this feature, while AppCooker907037 and Blueprint1451029171483624 allow for custom notes and annotations.

More Suitable Link

The most flexible documentation comes from platform prototyping tools such as Axure13813610592836456402716 and Justinmind938257. 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 (Framer94 and jQuery Mobile1419561), 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.

Responsive design96

Responsive prototypes require testing on real devices. (Image: Jeremy Keith97) (View large version98)

Good Fit Link

Some mobile tools are incapable of showing screens for different breakpoints; POP1479979724735, Marvel10013 and presentation software such as Keynote10111 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. Blueprint1451029171483624, InVision103 and Pixate10452 are but a few.

More Suitable Link

Dedicated UX tools with support for responsive design are emerging. Axure13813610592836456402716 has a feature that allows you to create adaptive prototypes for multiple breakpoints. Fluid design is possible, although it requires some hacking. Proto.io14310689382915 and Justinmind139107412817 are capable of truly fluid designs.

Greater flexibility can be accomplished with front-end responsive frameworks, such as Bootstrap108 and Foundation109. Other tools that have responsive support include HotGloo110 and WebFlow111.

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!

Learnability Link

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.

Learning and pivoting112

Learning requires you to pivot in a difficult situation. (Image: wplynn113) (View large version114)

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!

Cost Link

For installable products, look into tiered pricing. For example, Axure115 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 InVision116 and Proto.io117 in this category. There are also hybrids, in both standalone and cloud-based versions, such as Justinmind118 and Pixate119.

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: Pixate120 used to have an “academic account” before its acquisition by Google; Axure has a good student program121; and offers a 50% educational discount122.

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. does an excellent job with its webinar monthly program123; Axure has detailed step-by-step walkthroughs124; and Framer has an API website125 and community-built examples126.

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, Framer14013712769433020 has many small updates for bug fixes and new functionality, whereas Axure128 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 Axure129, Proto.io130 and Justinmind131. Other vendors, including Framer132, use alternative solutions such as Facebook Groups.


Third-party resources can help you solve prototyping challenges. (Image: r. nial bradshaw134) (View large version135)

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 Axure13813610592836456402716, whereas Framer14013712769433020 has professional workshops in multiple cities and user-contributed GitHub repositories.

Summary Link

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.

Recommendations Link

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:

Strive to be the best in your discipline; stay curious about new interaction tools (such as Principle148, InVision Motion149 and Adobe Experience Design CC150); 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

Deeper Dives Into Pros and Cons Link

(da, ml, al, il)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5 #mobile-resources
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128 http:/
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145
  146. 146
  147. 147
  148. 148
  149. 149
  150. 150
  151. 151
  152. 152
  153. 153
  154. 154
  155. 155
  156. 156
  157. 157
  158. 158

↑ Back to top Tweet itShare on Facebook

Svetlin Denkov is a Chicago-based UX Designer who enjoys building highly interactive prototypes for mobile and tablet devices using different technologies. You can follow him on Twitter, where he posts on UX, Innovation, and Technology. You can also drop him a line via LinkedIn.

  1. 1

    There are a couple of tools that I have found very useful for quickly checking a project against multiple devices’ screens for some rapid, real device testing. Separate from tools or frameworks you might use to develop a project, being able to view your prototype in several viewports at one time can be really handy (if you have a few devices or more at your disposal).

    The two I have used are Ghostlab (not a free product, I am not affiliated with them), which is very user-friendly and requires minimal setup, good for practically anybody. The second tool is Browsersync, a free open-source tool that might require you to get your developer involved to help set things up. Both of these create a local server to which you can point any of your on-hand devices to, and they’ll all follow your interacting with the page for some great synchronized testing. While these tools are running, they’ll also refresh all your device’s browsers when you make any updates during your development process.

  2. 2

    As Scott mentioned in his comment, having a side-by-side comparison of a responsive prototype in different viewports can be a real time saver. While nothing replaces having a set of physical devices to refer to, it involves both time and cost to get the setup running.

    I’ve created a high-level solution to this problem – is a virtual device lab enabling you to see (almost) any website side-by-side in your browser at different widths. You can choose from a list of 20 common devices, or create custom ones for specific uses.

  3. 3

    We built Demonstrate – a mobile prototyping tool (powered by Dropbox) , which allows you to create native app demos on iOS without writing a single line of code. Do give it a try.


  4. 4

    The divine nexus of a daughter or a son with her/his mother gets lauded on the heyday of Mother’s Day. This is the day to esteem that connate tender heart of a mother which releases, during all times, plentitude of caress and heed. Arrives on Mother’s Day, a sublime spell to cosset, the real first lady of one’s life. The bout of Mother’s Day facilitates a daughter or a son to voice out to his/her mother an apropos “Thank You” for her fulsome, optimistic presence in the person’s life. Glut the heart of your mother with a profusion of mirth by showering her with riveting souvenirs of Mother’s Day. Send Mother’s Day Gifts to India by the e-shopping zones and fill the mind of your mom with vivacious joyousness.

  5. 5

    Christian Klaucke

    April 27, 2016 3:56 pm

    Adobe Comet is now Adobe xD (experience design).

  6. 6

    HI Svetlin, I was just wondering if you had tried Fluid UI?

  7. 7

    What an awesome overview, Svetlin!

    There is one tool I would like to add to the list since it is pretty unique and very important in this zone because of its focus on usability. Koncept ( is perfect for rapid creating of high-fidelity prototypes and getting accurate metrics on user behaviour (2 in 1). You decide which tasks to add to certain scenes, share the prototype with users and then sit and track precise data (task acceptance and completion rates, completion times, etc.) as well as heatmaps. Ideal prototyping formats are web and mobile (Android and iOS). Also, you can work alone or create teams. There is a 7-day free trial is on so you can check it out.


↑ Back to top