Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. 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. upcoming SmashingConf San Francisco, 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.

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,
  • 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 breakdown2

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

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 interactivity4

Individual elements can interact with one another. (Image: Daniel Waters5) (View large version6)

Good Fit Link

Some mobile tools are capable of clickthrough prototypes via hotspot linking. Presentation software such as Keynote977 and the paper-in-mobile tools POP8 and Marvel969 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 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.

Interactive motion17

Animation can communicate complex interactions. (Image: themonie18) (View large version19)

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.

Gestural input28

Mobile experiences require prototyping for gestural input. (Image: Nicolas Nova29) (View large version30)

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.

Color has meaning.40

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

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.

Prototype in context54
A prototype should be tested contextually. (Image: K2_UX55) (View large version56)

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.

Teamwork70
Collaborative prototyping requires teamwork. (Image: Kevin Dooley71) (View large version72)

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.

Prototype documentation80

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

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.

Responsive design92

Responsive prototypes require testing on real devices. (Image: Jeremy Keith93) (View large version94)

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.

Greater flexibility can be accomplished with front-end responsive frameworks, such as Bootstrap104 and Foundation105. Other tools that have responsive support include HotGloo106 and WebFlow107.

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 pivoting108

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

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, 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.

Resources129

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

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.

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 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!

Resources

High-Level Comparisons of Tools Link

Deeper Dives Into Pros and Cons Link

(da, ml, al, il)

Footnotes Link

  1. 1 #mobile-resources
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/02/02-prototyping-opt.png
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/02/02-prototyping-opt.png
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/02/03-part-interactivity-opt.jpg
  5. 5 https://www.flickr.com/photos/feidhli/14005915142/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/02/03-part-interactivity-opt.jpg
  7. 7 http://www.apple.com/mac/keynote
  8. 8 http://popapp.in
  9. 9 http://marvelapp.com
  10. 10 http://www.pixate.com
  11. 11 http://www.proto.io
  12. 12 http://www.axure.com
  13. 13 http://www.justinmind.com
  14. 14 http://getboostrap.com
  15. 15 http://jquerymobile.com
  16. 16 http://www.framerjs.com
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/02/04-interactive-motion-opt.jpg
  18. 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. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/02/04-interactive-motion-opt.jpg
  20. 20 http://www.groosoft.com/blueprint/
  21. 21 http://www.popapp.in/
  22. 22 https://developer.apple.com/xcode/
  23. 23 http://www.axure.com
  24. 24 http://www.justinmind.com
  25. 25 http://www.proto.io
  26. 26 http://www.framerjs.com
  27. 27 http://www.w3schools.com/css/css3_animations.asp
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/02/05-gestural-input-opt.jpg
  29. 29 https://www.flickr.com/photos/nnova/15972323994/
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/02/05-gestural-input-opt.jpg
  31. 31 http://www.popapp.in
  32. 32 http://www.groosoft.com/blueprint/
  33. 33 http://www.appcooker.com/
  34. 34 http://www.proto.io
  35. 35 http://hammerjs.github.io
  36. 36 http://www.axure.com
  37. 37 http://www.justinmind.com
  38. 38 http://www.pixate.com
  39. 39 http://www.framerjs.com
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/02/06-color-meaning-opt.jpg
  41. 41 https://www.flickr.com/photos/seeminglee/4556156477/
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/02/06-color-meaning-opt.jpg
  43. 43 http://www.popapp.in
  44. 44 http://www.groosoft.com/blueprint/
  45. 45 http://framerjs.com/
  46. 46 http://www.w3schools.com/css/css3_animations.asp
  47. 47 http://www.flinto.com
  48. 48 http://www.pixate.com/
  49. 49 http://www.invisionapp.com
  50. 50 http://www.sketchapp.com/
  51. 51 http://www.adobe.com/photoshop
  52. 52 http://www.axure.com
  53. 53 http://www.justinmind.com/
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/02/07-prototype-context-opt.jpg
  55. 55 https://www.flickr.com/photos/k2_ux/8446526859/
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/02/07-prototype-context-opt.jpg
  57. 57 https://jquerymobile.com/
  58. 58 http://www.w3schools.com/css/css3_animations.asp
  59. 59 http://www.protosee.com
  60. 60 http://www.axure.com
  61. 61 http://www.invisionapp.com
  62. 62 https://itunes.apple.com/us/app/proto.io/id854504039?mt=8
  63. 63 https://itunes.apple.com/us/app/pixate/id883304734?mt=8
  64. 64 https://itunes.apple.com/us/app/flinto/id972238373?mt=8
  65. 65 http://www.framerjs.com
  66. 66 http://www.appcooker.com/
  67. 67 http://www.groosoft.com/blueprint/
  68. 68 http://www.popapp.in
  69. 69 http://www.marvelapp.com/
  70. 70 https://www.smashingmagazine.com/wp-content/uploads/2016/02/08-team-work-opt.jpg
  71. 71 https://www.flickr.com/photos/pagedooley/7007372665/
  72. 72 https://www.smashingmagazine.com/wp-content/uploads/2016/02/08-team-work-opt.jpg
  73. 73 http://www.pixate.com
  74. 74 http://framerjs.com/
  75. 75 http://www.popapp.in
  76. 76 http://www.marvelapp.com/
  77. 77 http://www.invisionapp.com
  78. 78 http://www.justinmind.com/
  79. 79 http://www.axure.com
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2016/02/09-prototype-documentation-opt.jpg
  81. 81 https://www.flickr.com/photos/domiriel/5888652979/
  82. 82 https://www.smashingmagazine.com/wp-content/uploads/2016/02/09-prototype-documentation-opt.jpg
  83. 83 http://www.flinto.com/
  84. 84 http://www.pixate.com
  85. 85 http://www.proto.io
  86. 86 http://www.appcooker.com/
  87. 87 http://www.groosoft.com/blueprint/
  88. 88 http://www.axure.com
  89. 89 http://www.justinmind.com/
  90. 90 http://framerjs.com
  91. 91 https://jquerymobile.com/
  92. 92 https://www.smashingmagazine.com/wp-content/uploads/2016/02/10-responsive-design-opt.jpg
  93. 93 https://www.flickr.com/photos/adactio/12674230513/
  94. 94 https://www.smashingmagazine.com/wp-content/uploads/2016/02/10-responsive-design-opt.jpg
  95. 95 http://www.popapp.in
  96. 96 http://marvelapp.com
  97. 97 http://www.apple.com/mac/keynote
  98. 98 http://www.groosoft.com/blueprint/
  99. 99 http://www.invisionapp.com/
  100. 100 http://www.pixate.com/
  101. 101 http://www.axure.com
  102. 102 http://www.proto.io
  103. 103 http://www.justinmind.com
  104. 104 http://getbootstrap.com/
  105. 105 http://foundation.zurb.com/
  106. 106 http://www.hotgloo.com
  107. 107 https://webflow.com/
  108. 108 https://www.smashingmagazine.com/wp-content/uploads/2016/02/11-learning-pivoting-opt.jpg
  109. 109 https://www.flickr.com/photos/warrenlynn/296429627/
  110. 110 https://www.smashingmagazine.com/wp-content/uploads/2016/02/11-learning-pivoting-opt.jpg
  111. 111 http://www.axure.com/buy
  112. 112 http://www.invisionapp.com/plans
  113. 113 http://www.proto.io/en/pricing
  114. 114 http://www.justinmind.com/pricing
  115. 115 http://www.pixate.com/billing-faq/
  116. 116 http://www.pixate.com/academic/
  117. 117 http://www.axure.com/edu
  118. 118 https://proto.io/en/pricing/
  119. 119 https://proto.io/en/webinars/
  120. 120 http://www.axure.com/learn
  121. 121 http://framerjs.com/docs/
  122. 122 http://framerjs.com/examples/
  123. 123 http://www.framerjs.com
  124. 124 http:/www.axure.com
  125. 125 http://www.axure.com/c/forum.php
  126. 126 https://protoio.zendesk.com/forums
  127. 127 https://getsatisfaction.com/justinmind
  128. 128 https://www.facebook.com/groups/framerjs/
  129. 129 https://www.smashingmagazine.com/wp-content/uploads/2016/02/14-resources-opt.jpg
  130. 130 https://www.flickr.com/photos/zionfiction/8069716607/
  131. 131 https://www.smashingmagazine.com/wp-content/uploads/2016/02/14-resources-opt.jpg
  132. 132 http://www.axure.com
  133. 133 http://www.framerjs.com
  134. 134 http://www.axure.com
  135. 135 http://www.justinmind.com
  136. 136 http://www.framerjs.com
  137. 137 https://jquerymobile.com/
  138. 138 http://www.flinto.com/
  139. 139 http://www.proto.io
  140. 140 http://www.pixate.com
  141. 141 http://www.groosoft.com/blueprint/
  142. 142 http://www.appcooker.com
  143. 143 http://www.popapp.in
  144. 144 http://principleformac.com/
  145. 145 http://blog.invisionapp.com/motion-prototype-animation/
  146. 146 http://landing.adobe.com/en/na/products/creative-cloud/comet/229818-notifyme.html
  147. 147 http://www.cooper.com/prototyping-tools
  148. 148 http://uxdesign.cc/ux-tools/
  149. 149 http://mikemcdearmon.com/portfolio/techposts/uxui-prototyping-tools
  150. 150 http://www.prototypingtools.co/
  151. 151 http://stephenmeszaros.com/posts/prototyping-tools.html
  152. 152 http://moneysummit.mx.com/the-summit/2014/12/10/9-mobile-prototyping-tools-every-designer-should-consider
  153. 153 http://uxmag.com/articles/comparing-popular-layer-based-and-code-based-prototyping-tools
  154. 154 http://uxmag.com/articles/comparing-four-popular-page%E2%80%93based-interactive-prototyping-tools

↑ 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.

    0
  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 – XRespond.com 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.

    0
  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.

    Link: https://itunes.apple.com/in/app/demonstrate-mobile-prototyping/id726285449?mt=8

    0
  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.

    -8
  5. 5

    Christian Klaucke

    April 27, 2016 3:56 pm

    Adobe Comet is now Adobe xD (experience design).

    0
  6. 6

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

    2
  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 (http://konceptapp.com) 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.

    0

↑ Back to top