9 Best Prototyping Tools for 2017: Which Is Right For Your Style?

There’s guesswork, there’s theory, and then there’s actual results. That’s where prototyping tools make the difference.

You could have the best — or worst — design in the world, but you won’t 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 doesn’t.

Prototypes serve a variety of functions in the web design process, but we can organize them into four main categories:

• Pitch an idea — You want to demonstrate how your idea works while presenting to clients.
• User testing — You want to fine-tune the product based on your target users’ preferences.
• Proof of concept — You want to get the rest of your team on board with your suggestion.
• Test logic — 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 won’t work for every situation.

While other articles simply list out their picks for best prototyping tools, we’re factoring in how they’ll be used. Each of our 9 entries includes what they’re recommended for, so you can pick the right tool for what you need.

1. InVision

Source: InVision

Cost:

• Single Project – Free
• 3 Projects (Starter) – $15/month
• Unlimited Projects (Professional) – $25/month
• Unlimited Projects, 5 Users (Team) – $100/month

Runs On:

• Web

Prototypes for:

• Web
• iOS
• Android

Recommended for:

• Team collaboration
• Workflow management
• Enterprises

We’ll start off with one of the most popular prototyping tools, InVision. It’s one of the most reliable all around, which explains its success.

Aside from a fine performance across the board, InVision’s main advantage over other tools is its collaboration features. It’s designed for enterprises and large teams, and offers them special features:

• comments directly on the prototype
• 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
• view previous histories

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.

2. Webflow

Source: Webflow

Cost:

• 2 Unhosted Projects – Free
• Personal – $16/month
• Pro – $35/month

Runs On:

• Web

Prototypes for:

• All

Recommended for:

• No coding
• All-inclusive prototyping, CMS, and hosting
• Independent designers

Webflow‘s main selling point is that you don’t 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 you’re designing an eCommerce site, you’ll need to use a third-party payment system. We’ve 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 you’re looking for.

3. JustInMind

Source: JustInMind

Cost:

• $19/month

Runs On:

• OS X
• Windows

Prototypes for:

• Web
• iOS
• Android

Recommended for:

• Offline work
• Medium-to-high intricacy in prototypes

Another popular prototyping tool, JustInMind is 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, don’t be fooled if you see it billed as a “free prototyping app”… The free basic version lacks all the features that make this worthwhile.

4. POP

Source: POP

Cost:

• 2 Projects – Free
• 10 Projects, 3 Users (Basic) – $10/month
• Unlimited Projects & Users (Pro) – $25/month

Runs On:

• Web
• iOS
• Android

Prototypes for:

• Web
• iOS
• Android

Recommended for:

• Digitizing paper prototypes
• Prototyping mobile devices

POP is 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 didn’t 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 phone’s camera and upload them directly into the app.

For collaboration, you can synchronize with Dropbox.

Aside from paper prototyping, though, don’t expect much from this tool. The fidelity level is unimpressive, but POP isn’t 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, it’s the best there is.

5. Axure RP

Source: GetApp

Cost:

• 30-day Trial – Free
• Pro – $29/month ($495 to purchase)
• Team – $49/month ($895 to purchase, per user)
• Enterprise (includes on-premise solutions) – $99/month

Runs On:

• OS X
• Windows

Prototypes for:

• All

Recommended for:

• Highest level of intricacy for prototypes
• Hands-on designers
• Designers familiar with the basics of coding

Axure RP is 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.

Related posts:  SEO Guide to Great eCommerce Site Architecture

There are always those designers who just want the best and won’t settle for anything else. They want to do everything themselves and don’t 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, you’re looking for a happy medium between functionality and usability, or if you value speed and simplicity over intricacy, you’re better off with another entry in this list.

6. Mockplus

Source: Mockplus

Cost:

• Basic – Free
• Pro – $29/month (less if billed annually)

Runs On:

• OS X
• Windows

Prototypes for:

• Web
• iOS
• Android

Recommended for:

• Rapid prototyping
• Designers who prefer simplicity and WYSIWYG interfaces
• Beginner designers (although it also works for expert designers who just prefer simple UIs)
• Low-cost projects

On the complete other end of the spectrum from Axure RP is Mockplus. 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 don’t have a lot of control… but it’s 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 you’re looking for easy and cheap (price, not quality), Mockplus is you.

7. Origami

Source: Origami

Cost:

• Free

Runs On:

• OS X

Prototypes for:

• iOS
• Android

Recommended for:

• Severe budgets
• Amateur designers breaking into the industry
• Mac users
• Individual or freelance designers

If Mockplus isn’t free enough for you, Origami is the only prototyping tool on this list that’s completely free.

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
• Animations

One of the harshest drawbacks, though, is the lack of collaboration features. There’s 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, Origami’s bare-bone spread might be frustrating to experienced and hands-on designers. Origami is a tool for quick and easy prototypes and doesn’t offer much for creating rich or substantial interfaces.

But it’s 100% free, so there’s that.

8. UXPin

Source: UXPin

Cost:

• 7-day Trial – Free
• Basic – $19/month
• Pro – $29/month
• Team (3 Users) – $99/month + $49 for every additional user
• Enterprise – Contact

Runs On:

• Web

Prototypes for:

• All

Recommended for:

• All-in-one tool for entire design process
• Projects prioritizing wireframes and mockups
• Early user testing

Despite its praise from Techcrunch, Wall Street Journal, and Fubiz, UXPin remains 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 don’t 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 you’re thinking beyond prototypes and looking for an all-inclusive tool, UXPin is worth checking out.

9. Balsamiq Mockups

Source: Balsamiq Mockups

Cost:

• 30-day Trial – Free
• Single User License – $89 (Single Purchase)
• Volume License – Varies by number of users
• *Discount for Atlassian Service Customers

Runs On:

• Web
• OS X
• Windows

Prototypes for:

• Web
• iOS
• Android

Recommended for:

• Rapid prototyping
• Low-fidelity, basic prototypes with a quick turnaround
• Designers who like sketching
• Brainstorming

We’ll end with another popular prototyping tool, Balsamiq Mockups. It’s 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.

Don’t 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 that’s not the point. Balsamiq Mockups is more about speed and creativity. It’s ease-of-use aids in generating and testing new ideas, and the web app allows for quick online testing. If you’re 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.

cc@https://blog.lemonstand.com/9-best-prototyping-tools-2017/