Why & How to Choose the Right Prototyping Tool?

Initially coming from the manufacturing world, Prototype has become a buzzword with a range of connotative meanings collected. It’s often used when making a model of something before finally committing to full-scale production. Its original definition “protos=first+typos=impression” actually provides a framework of how it works in the development process of digital products.

The prototyping or testing process is of great necessity as it’s way more time-efficient and flexible for both designers and engineers to make changes in their design tools and coding. Then a much better use of your efforts would be spent on mocking up an initial design and running a user test to validate previous assumptions so as to figure out the right direction.

Actually the word “prototype” is loosely defined and it’s pretty to get overwhelmed with lots of choices out there. Therefore, the following parts will cover five common types of prototypes along with the pick of the bunch to help you choose the most demanded and right tool.

Types of Prototypes Used in UX Teams

Generally there are five main types, some of which might not need a prototyping tool at all. Now, let’s dive deeper into more details:

1. Paper Prototype. This appears very early in the design process and often can be much quicker to generate a simple yet rough prototype. Believe it or not, it still remains to be a popular choice for small time investments, high collaboration and rapid iteration as well. That only works well when users have some level of expertise.

2. Animated/Animatics Wireframes. They are the first step to contextualize the product during the development process. Fairly speaking, time/cost investments will increase down the road and huge changes in direction/approach are also plausible. Also team members can discover what questions to ask and what tool to go.

3. Functioning Prototypes. They are fully code mixture of functional and static screens, which are usually presented when other prototypes have been accepted. It’s the best way to transfer knowledge to the developer team by manifesting how an experience and code will be.

Aside from that, there are other more types existing, such as Click-Throughs, Proof of Concept and Interaction Vignettes, etc. Obviously paper prototyping doesn’t require any prototype tools to test out a low-fidelity design, and it may make more sense to make an HTML prototype for those wanting to become a web coding ninja.

Top Picks for Desktop, Mobile & Web Prototypes

For anyone in need of using a UX prototyping tool, there are a handful of options for selection. Though those UX prototyping tools come in various sizes and shapes, it almost depends on the type of prototype mentioned above. Given that most designers seeking a tool for prototyping website, mobile as well as desktop projects, below are several recommendations for reference.

Prototyping Desktop Apps

For many years, UX prototyping has already involved desktop apps, which include a decent set of editing and drawing features. Those tools always let designers work outside of design programs and even create rich interaction without writing any HTML code. Instead of mentioning old-fashioned names liking “Axure” or “Balsamiq”, here are two new players recommended for fresh ideas out of the box.

Justinmind

Website: http://www.justinmind.com/

As an elegant application familiar to most Illustrator and Photoshop users, Justinmind provides a way to create functional prototypes and wireframes at a well-balanced pricing. Not only will data-driven and dynamic content be applied to the designs, but also other features lick Photoshop synchronization and integration are available. It’s great to get some sophisticated design works, though the interface seems to be an Adobe clone. This tool does a full-featured prototyping environment.

Currently there are two optional packages — Professional & Enterprise — to choose from, starting from $19 per month on regularly basis. Note that, the Perpetual license costs up to $495 per user, and the free version is pretty limiting in features.

Mockplus

Website: http://www.mockplus.com/

Likewise, Mockplus is one of the most popular of the new prototyping tools in recent years. It quickly turns your mockups, images and sketches into prototypes which look and feel like the completed project. It’s possible to make prototypes for all major desktop, mobile or customized screen sizes. Over 400+ icons and almost 200 components are ready for use, making the whole process of prototyping fully visualized, namely WYSIWYG.

A big benefit is anyone can see his/her prototype running in real mobile device by scanning the generated QR code, no remote publishing or USB cable required. Plus there are multiple options for exporting the finished project, and the cloud solution gives the flexibility of carrying prototypes anywhere needed. Those newly-added interaction functionalities, such as Slider Drawer, Slider Image and Popup Panel, will surely rock the world.

Prototyping Websites

InVision

Website: http://www.invisionapp.com/

With a robust set of cloud features, transitions, skins so well as plugins, InVion does appear as a strong competitor in the world of prototyping tools. This tool lets audiences make interactive prototypes even from imported projects and offers an convenient way to collect feedback. It mainly focuses on integrations and capabilities to support prototyping instead of replacing those well-known design tools.

Though billing itself as the industry-leading prototyping, collaboration and workflow platform, InVision includes no image creation or drawing tools. There are several selectable plans at various pricing points, and only 1 prototype allowed within a free account. The elite plan charges for $99 per month with unlimited prototypes for five team members.

Marvel

Website: https://marvelapp.com/

Marvel probably can be one of the easiest online applications to learn, and it attracts most designers with the clean and simple design solution. They allows users to link different screens together via defining gestures, transitions as well as animations. With this tool, people can sync with Dropbox and have the access to projects for the whole team.

Android users are allowed to export the given prototype as an .apk file to run them offline. It’s free for unlimited projects and offers fixed footers and headers on the screen. Downside is there are no any customizable animations, nor a wide range of default transitions.

Prototyping Mobile Apps

Pixate

Website: http://www.pixate.com/

Pixate, owned by Google now, is a complete free mobile app for creating native mobile prototypes. This tool allows users to see prototypes on screens as close to the actual thing as possible. Note also that, it needs assets to be imported and in this case people need to have created UI elements/components already.

On the flipe side, there will be a high learning curve within this app, and it’s pretty time-consuming to click a lot so as to get things working. The lack of screen overview will definitely bring more or less inconvenience.

Origami

Website: http://facebook.github.io/origami/

As a product of Facebook, Origami is also a free tool for making modern-look user interface. They will put together a prototype and let users run on both iPad and iPhone, making it possible to export code snippets for developing purpose. It’s created to help make design works within Instagram, Facebook Messenger, Rooms, Groups and more.

However, it’s not user-friendly when testing out an interactive prototypes and people will have to download another companion app named Origami Live to perform the task. Its extent functionality still needs great improvements to better share mockups with others