The 5 Best Wireframing And Prototyping Tools For 2016

“Tell me and I forget. Teach me and I remember. Involve me and I understand.” – Benjamin Franklin

Wireframes and prototypes for 2016

Whenever you’re building an app or website you need to communicate your concept with a lot of different people. These stakeholders include end users, investors, media, designers and the developers who will build the technology.

What was previously the exclusive domain of designers and product managers is becoming increasingly accessible to tech creators without these backgrounds.

Words only take you so far and do a poor job of communicating what’s in your head. The best way to share your concept is to put it in someone’s hands and let them use it. Building the entire solution is not efficient when it comes to cost or time. The optimal solution is to build prototypes and wireframes.

It’s extremely rare that the concept you start with is identical to the app or website you end up building. Wireframing and prototyping is an excellent way to capture your initial concept and begin the iteration process.

As you show your ideas to your customer through these visual and interactive mediums you’ll gain insights that you’ll naturally want to incorporate into the product as you move forward.

In the past decade we’ve seen an explosion of inexpensive web tools, widespread conversion from waterfall to agile/lean software development process and mass awareness of design and product thinking (hat tip to Apple). As a result, there has driven the creation of a lot of new wireframing and prototyping tools.

Here are four of the best and most important solutions that you should evaluate for your current or next technology project.

InVision: The Free Design Powerhouse

Invisionapp for wireframes and prototypes.

This is the tool we recommend our customers use if they’re going to wireframe their concept. Their product is beautifully designed and they’ve clearly eaten their own dog food when it comes to prioritizing features that serve the user.

If you’re looking for external validation then knowing that companies like Uber, Twitter, Shopify, and Hubspot are using them should put your mind at rest on that front.

In 4 short years the company has gone from founding to raising $79.1m in venture capital — a testament to it’s popularity and growth.

But if it takes more than social proof to get you excited then sign up for free and take the product for a spin. What you’ll see are some of the most impressive design prototyping features you can find.

While InVision certainly has paid options (which let you create multiple prototypes at once), their free option gives you access to every single one of their fantastic prototyping features.

Invisionapp on mobile.

InVision’s transitions and animations support features one of the most comprehensive, useful tools in the world of mobile app design: the customizable “hotspot”.

Basically, you can turn any spot on the screen to into a clickable link to another screen. That’s where it goes from wireframes and mockups to being a clickable prototype.

Just a few months after acquiring code-focused design tool Macaw, InVision went on to acquire Silver Flows, a design tool that streamlines the designing process by removing one of the most tedious aspects of mobile apps: designing in Sketch and then having to switch tools to turn that design into a prototype (a previously high friction process).

Combine all of that with their no-nonsense approach to design communication (ex: real-time design collaboration, incorporating contextual feedback, threaded conversations) and their custom board creation tools, and it’s clear that InVision is about more than just designing an elegant mobile app–it’s about changing the way we mobile apps are designed.

Axure: The Detail Oriented Designer’s Paradise

axure-screenshot

Axure is targeted at people who build wireframes and prototypes for a living and the learning curve is steep for folks without a design background.

In contrast with Invision, Axure’s focus is less on ease of use and more on offering a fully comprehensive and robust set of tools to satisfy the most obscure of design edge cases.

Don’t get us wrong — Axure is still an efficient service you can use to build your next app. To their credit, Axure manages to avoid overloading the average mobile app designer with too many features.

Still, the designers that are going to get the most out of this platform are the ones who are excited by things like semi-transparent fills, robust interaction event options and all kinds of designer dream tools.

The pricing is obviously geared toward people who use this software in the course of their work and uses a pre-SaaS world structure of paying for a license per version (a standard plan costs $289/license, with their pro plan coming in at $589/license). The price includes a feature heavy toolkit, in-depth support documentation and a built-in library of customizable widgets.

For professionals the pricing makes sense but it’s probably best to start on InVision and then try out Axure once you’re interested in seeing what else is out there.

Flinto Lite: Where Efficiency Meets High Fidelity

flinto-screenshot

Flinto Lite was built with according to the thesis that the app design process is broken. Their thesis is that while prototyping is slowly becoming a more respected aspect of app development it still isn’t being introduced into the process until after development has begun.

Prototyping and wireframing should be used to define the scope and discover what the product should be. When you introduce it late in the process and after the scope has been defined then it won’t have the impact and benefit it should have.

Basically, Flinto argues that prototyping shouldn’t be something tacked on to the end of your app–your business should be testing with interactive prototypes from the very start. Flinto Lite has been built to avoid disrupting your workflow, with simple and easy prototype creation as one of its cornerstone features.

Flinto Lite enables allows you to update your screens as you create them, reorganizing without any hassle or headache. Beyond that, you can build links instantly between screens (or just connect screens visually).

For the price of $20/month (per member), Flinto Lite helps you make as many prototypes as you need. They’ll even let you share them with anyone!

By understanding that the app design process has a long way to go (especially when it comes to using prototyping properly), Flinto has managed to create an intuitive platform that makes development-long prototyping easier than ever before.

Protoshare: The Ultimate Collaborative Prototyping Tool

We couldn't find any good screenshots on Protoshare's website so we included a picture of a happy dog instead. Enjoy.

We couldn’t find any good images to use on Protoshare’s website so please enjoy this picture of a happy dog instead.

App design collaboration is an important and often neglected consideration when evaluating prototyping tools. It may not be the most exciting aspect of building an amazing app, but it’s definitely a critical part of the development stage.

Apps and websites, with rare exceptions, are intended to be used for multiple people and to drive user behaviors that align with the goal of the business creating the technology. Creating apps is already, by definition, collaborative.

Protoshare recognizes and enables collaboration amongst the key stakeholders (including clients) on a technology project. That reduces organizational complexity and risk — these are the issues most likely to derail or kill a technology project. By centralizing key information and streamlining discover, input and decision-making Protoshare lets projects move faster.

Protoshare is first and foremost a prototyping tool and while collaboration is a key focus that’s not to take-away from it’s main feature-set.

Protoshare’s design features are just as strong as their collaboration workflow and includes drag-and-drop components, the ability to create annotations on your prototypes and robust on-page interactivity. Their business level pricing option is $59/month (per editor) making it a popular choice in the prototyping industry.

Pen And Paper

The author's attempt at producing a hand-drawn wireframe.

The fastest, cheapest and easiest way to begin prototyping is also the one that’s been around the longest — pen and paper. Even if you lack any artistic ability you shouldn’t underestimate the value of committing your ideas to paper.

If nothing else you can sit side-by-side with other stakeholders to walk them through your concepts. It’s also a great way to do a mental dump and untangle your initial thoughts. You’ll need to move to something more sophisticated as you go but this is an important and useful first step.

Once you have these you can also use the mobile aptly named mobile app: PoP (Prototyping On Paper) to take pictures of your sketches and turn them into clickable wireframes.

Moving Forward

New apps or websites have to iterate to find their product-market fit. During this process it’s important to continuously iterate to incorporate feedback and realizations that arise.

That means leveraging technology that makes easy to redesign your product so you can continue learning at high speed. Once you land on a strong product design the wireframes and prototypes you have will be instrumental in communicating with developers so they can build the product.

If you’re a creator then the tools discussed above are the ones you should evaluate when you begin building your technology.