Matt Ellis is a freelance content writer, specializing in web design and ecommerce. For details about his professional work, visit…
Theres guesswork, theres theory, and then theres actual results. Thats where prototyping tools make the difference.
You could have the best or worst design in the world, but you wont know it until you see it in action. Prototyping tools bridge that gap between the initial design and the finished product, a rough draft to identify what works and what doesnt.
Prototypes serve a variety of functions in the web design process, but we can organize them into four main categories:
You want to demonstrate how your idea works while presenting to clients.
You want to fine-tune the product based on your target users preferences.
You want to get the rest of your team on board with your suggestion.
You want to see for yourself whether or not an idea will work as you planned.
Different types of prototypes, with different end goals and audiences, mean the same prototyping tool wont work for every situation.
While other articles simply list out their picks for best prototyping tools, were factoring in how theyll be used. Each of our 9 entries includeswhat theyre recommended for, so you can pick the right tool for what you need.
3 Projects (Starter) $15/month
Unlimited Projects (Professional) $25/month
Unlimited Projects, 5 Users (Team) $100/month
Well start off with one of the most popular prototyping tools,InVision. Its one of the most reliable all around, which explains its success.
Aside from a fine performance across the board, InVisions main advantage over other tools is its collaboration features. Its designed for enterprises and large teams, and offers them special features:
auto-updates every time a file is edited
synchronization with Dropbox, Creative Cloud, Google Drive, and Slack
project management page with drag-and-drop workflow like Trello (i.e., To Do, In Progress, Needs Review, etc.)
the Boards feature, for housing all your projects, providing context, and even aiding in presentions
In addition to the collaborative benefits, InVision upholds the recognized values a good prototyping app should have. You can add interactions and animations to static images. You can upload multiple file types, including JPG, PNG, GIF, AI, and PSD. And you can also test mobile devices with gesture controls.
All these perks add up to a solid choice in prototyping tools, especially if your focus is teamwork.
Webflows main selling point is that you dont need any coding skills whatsoever. You can build, design, and publish the entire site using only the visual-based UI. After you refine your prototype how you like it, you can turn into a production-ready site with just a click. These features appeal to independent designers, who now have the option to export without needing developers on-hand.
You can also export the project into code if you choose.
The other benefits include automatic responsive design and animations that work on all browsers and devices. Webflow is also compatible with Slack, Zapier, Google Drive, Trello, MailChimp, and more than 400 other services.
The drawback is that if youre designing an eCommerce site, youll need to use a third-party payment system.Weve spoken out against external checkouts before; they take away the powerful benefits of a customized checkout, and tend to bring up security concerns with customers.
If coding is one of your main problems, then Webflow may be the solution youre looking for.
Another popular prototyping tool,JustInMindis known for creating high-quality work, though at the cost of a steep learning curve.
For starters, JustInMind can be downloaded onto your computer for offline work anywhere, which is a big plus.
The interface allows for rich and sophisticated prototypes, but takes some time to get used to. This is not an unpack-and-play tool, but rather one that requires investment to get the true benefits.
One great feature is that you can use items from UI libraries and download numerous add-ons, providing a versatile range of what you can do.
However, dont be fooled if you see it billed as a free prototyping app The free basic version lacks all the features that make this worthwhile.
POPis almost like a niche prototyping tool, serving designers that prefer the classic pen-and-paper approach. The name itself stands for Prototype On Paper.
Now a partner of Marvel, another prototyping app that didnt quite make our list, POP is the best tool for transferring your sketches (and also digital creations) into an interactive prototype. You can even take photos of your drawings with your phones camera and upload them directly into the app.
For collaboration, you can synchronize with Dropbox.
Aside from paper prototyping, though, dont expect much from this tool. The fidelity level is unimpressive, but POP isnt pretending to compete with the other final product quality prototyping tools on this list. POP is designed exclusively for pencil-and-paper designers to add gesture controls and interactions to sketches. And for this, its the best there is.
Pro $29/month ($495 to purchase)
Team $49/month ($895 to purchase, per user)
Enterprise (includes on-premise solutions) $99/month
Axure RPis the reigning heavyweight on this list. It offers the most options to designers and its interface provides the most functionality. Of course, this also gives it the most complicated user system with the hardest learning curve.
Aside from a robust internal library, Axure RP allows designers to add ready-to-use components from widget libraries, or upload their own files for integration. For each component, designers can modify the color, gradient, or transparency.
Another great feature of Axure RP is that it aids diagramming and documentation. The prototyping tool facilitates the creation of flowcharts, wireframes, mockups, user journeys, personas, idea boards, and more, according to the website. These, along with the prototype itself, can be shared with the team in either Axure Share or SVN, where members can add their two cents with annotation options.
There are always those designers who just want the best and wont settle for anything else. They want to do everything themselves and dont abide restrictions, and of course are willing to put the extra time in to get what they way. If this sounds all too familiar, then Axure RP is the perfect choice for you.
If, however, youre looking for a happy medium between functionality and usability, or if you value speed and simplicity over intricacy, youre better off with another entry in this list.
Designers who prefer simplicity and WYSIWYG interfaces
Beginner designers (although it also works for expert designers who just prefer simple UIs)
On the complete other end of the spectrum from Axure RP isMockplus. This prototyping app is designed for speed and simplicity, lacking the breadth of other prototyping tools, but making up for it with easy usability.
The goal of Mockplus is to offer intuitive design aids so that designers can focus more on creating their projects than how to use their tools. What Mockplus offers is limited compared to other design tools, so designers dont have a lot of control but its enough to make workable prototypes, and make them quickly.
The usability is often as easy as dragging and dropping, with a pre-loaded library of 200 components for common UI patterns like pop-ups, drawers, and image carousels. The final prototype is fully interactive as well.
The other main advantage is the price: the basic version can get you pretty far, and its free. You get a lot of functionality options, collaboration features, and basic importing/exporting capabilities. The Pro version gives you 3,000 extra icons, a lot more exporting options, mobile online previews, and Cloud Sync.
If youre looking for easy and cheap (price, not quality), M
ockplus is you.
If Mockplus isnt free enough for you,Origamiis the only prototyping tool on this list thatscompletelyfree.
Regardless, Origami still provides a surprising amount of the basic features for prototyping tools:
Pre-loaded component library of basic patterns
Gesture simulations (scrolling, tapping, swiping, etc.)
Sketch and Photoshop document integration with layers intact
One of the harshest drawbacks, though, is the lack of collaboration features. Theres little in the way of commenting and viewing version histories. This prototyping tool seems more attuned to freelancers or individuals just starting out in the business.
Keeping in mind that you get what you pay for, Origamis bare-bone spread might be frustrating to experienced and hands-on designers. Origami is a tool for quick and easy prototypes and doesnt offer much for creating rich or substantial interfaces.
But its 100% free, so theres that.
Despite its praise fromTechcrunch,Wall Street Journal, andFubiz,UXPinremains somewhat of an unsung hero when it comes to prototyping tools. Still, those that do use it, love it.
What UXPin offers that other prototyping tools dont lies in the stages preceding prototyping. UXPin allows designers to smoothly transition between each and every stage in the design process, all in the same document. Paper sketches, wireframes, mockups, prototypes and any unique combination of these you can think of.
For example, you can build a quick interactive wireframe in just a few minutes and begin testing your ideas immediately. You can then build on that same file, incorporating the results from the first test. Make a pixel-perfect mockup in Sketch or Photoshop, then upload it directly into the same document to create a high-fidelity prototype from the same original wireframe layout.
Like Mockplus, UXPin follows the ideology that easy-to-use design tools free up designers to focus more on the projects at hand. Their user-friendly interfaces consists of ready-made components with drag-and-drop, WYSIWYG usability.
The collaboration tools have all the standard requirements, with direct commenting and project tracking tools.
If youre thinking beyond prototypes and looking for an all-inclusive tool, UXPin is worth checking out.
Single User License $89 (Single Purchase)
Volume License Varies by number of users
*Discount for Atlassian Service Customers
Well end with another popular prototyping tool,Balsamiq Mockups. Its a tool that aims to replicate the speed, convenience, and free spirit of sketching on paper/whiteboards, but in a digital medium.
Balsamiq Mockups targets Agile and Lean followers with a quick and painless usability that leaves more time for discussion and writing code. Designers choose from more than 500 pre-made icons and items or components they draw themselves.
Dont expect any dressed-to-kill prototypes here. The interactions are basic, and the final, low-fidelity prototype feels more like an interactive, high-fidelity wireframe. The company actually agrees and markets themselves as a wireframing tool, not a prototyping one.
But thats not the point. Balsamiq Mockups is more about speed and creativity. Its ease-of-use aids in generating and testing new ideas, and the web app allows for quick online testing. If youre the kind of designer that prefers to pool a large amount of ideas before diving into one straightaway, Balsamiq Mockups will save you time and help you get it done.
These 9 prototyping tools each have their own special advantages and suit different needs. Thats why we included the Recommended for sections, to showcase which designers and which projects can benefit most from each tool. Its not about which one is best, its about which one is bestfor you.
Admittedly, we left out a few popular prototyping tools on this list. We know tools likeFramerPrinciple, andProto.ioall have strong followings, but we wanted to focus on the nine we choose instead.
Wed love to get a comprehensive list going, so please help us by adding your suggestions. If you feel like we misrepresented one of these tools, or want to recommend one we didnt mention, add your opinions in the comments section now.
Matt Ellis is a freelance content writer, specializing in web design and ecommerce. For details about his professional work, visit…
Hi Matt, thanks for this nice collection of prototyping toolsAs the start of new year 2017, Mockplus is offering up to 64% discount for its annual billing subscriptions from this page: code: MOCKPLUS-2017
Please take away the coupon code to enjoy it now!
Thats great low-cost projects will cost even less. Thanks, Grace!
You are most welcome! Hope thats be helpful to more people. No matter which tool they choose, that will definitely be a smart decision.
Some great options there. I am sure you have covered at least one option to suit everyone
Im glad you mentioned Keynote! Ive never used Keynotopia myself because Im not a big fan of PowerPoint, but Ive actually heard good things about it, so I was curious to see how it stacks up to exclusively prototyping software.
I tried many prototyping tools. ex) framer, principle, balsamiq..etc. but I recommend ProtoPie. That is code free prototyping tools. Im working prototyping with this tools.
Im not very familiar with ProtoPie Can you explain more about it? What makes it your top choice?
Some of the strong suits of ProtoPie ( would imo be
create interactions between multiple smart devices (prototyping chatting or payment apps)
support for IoT (prototypes communicating with a Philips Hue for example)
high learning curve, easy to pick up
the most advanced prototyping tool for now, will be Origami studio, it can do pretty much everything.
Yeah, Origamis a great choice if youre working independently. Cant beat that price, either!
i recommend trying mocking up & prototyping with UX-App, its a very powerful tool for a low one time price
Hi Matt, it is always interesting to see these reviews and see how users rate the different tools. It woudl be great to hear if youve tried Fluid UI if you have any thoughts on it.
This is a solid list of design tools, but these arent all prototyping tools. Sketch for example is great, but its not so much of a prototyping tool without external tools like FramerJS (which was not mentioned oddly enough).
Just want to point out that there are great prototyping tools, and some arent mentioned here.
@STEVES comment on 10 september 2017
this is why for me adobe XD is a no-brainer. i find it a nice basic program that you can design in AND test prototypes in. the recording function also comes in handy. i think its n beta right now but it seems like they are adding even more features. for me a long time user of adobe, i really do hope adobe XD becomes the industry standard. : = 🙂
Please review MockingBot also. Very good / easy to use prototype tool
hey ! you missed Mockflow Wireframepro.One of best.