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

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

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

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

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

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

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

Comments

Post a Comment

Popular posts from this blog

9 Best Wireframe Tools for Mac UI/UX Designers Have to Know

Image
Production: Every morning, you can see people are rushing to their offices by different communications. Some people take a taxi for time-saving, some others take buses for cost-saving, and also some people chose to walk to office for exercising. This scene reminds me of the designers choose wireframe tools for Mac. In fact, this is the same reason for the designer to choose wireframe tools. Before making achoose, designers always consider the cost, effectiveness, and speed. What is wireframe? It is an indispensable part of job for  UI/UX designers . Thus, you should have a careful comparison of these wireframe tools. I learned that most of the designers prefer to design on mac. Here we've selected 9 of the best wireframe tools for Mac to get you started. Enjoy! 1.  Axure When we talk about prototyping tools, we should mention Axure in the first place. Everyone knows that it’s a powerful tool with a variety of functions. Such as wireframe, flow chart, and interacti...
Read more

Top 20 UX Design Blogs and Resource Websites of 2017

Image
The world of user experience and user interface has never stopped evolving and taken front stage where everyone seems to know about the buzzwords. It’s of utmost importance to stay up-to-date on the latest ideas and conversations happening in the industry, but the abundance of resources somehow makes it hard to find the truly helpful materials. That’s where blogs come in handy. The following list collects some of the best UX design blogs of 2017, providing a quick and easy way to remain current. Some of the picks are specially authored by only one blogger, while others pool the knowledge of industry experts and leaders. With no further ado and in no particular order, let’s get inspired in below. 1. UX Design These resource websites discuss the topic of UX design for both services and products, ranging from industry trends in UX field to reviews on tools and software for new practitioner and seasoned veteran. Awwwards ,  a site that awards the best of the best in mobile a...
Read more

20 of the Best Website Homepage Design Examples

Image
You never get a second chance to make a first impression - that's why the first screen of your homepage undoubtedly plays an important role in your website.  Flat design  is one of the most popular design trends today. In many ways, it is design stripped down to the basics and focused purely on the raw functionality. It gets rid of unnecessary graphical and animated elements, which requires you being good at the interplay of icons, typography, and color. Below, we have put together a list of 20 amazing website homepage design examples for designing an impressive homepage that will hopefully inspire your next project. Bigdropinc The typography on this website is very practical and frequently-used. It is simple, yet powerful. The bold typography is the best suited homepage style for simple and clean layout. Oribe LE28 LILLE Truedigital Text centered and filled the screen. Aaa The font design is elegant. What's particularly great about Aaa is that it will...
Read more