Design is constantly evolving and becoming more complex. User interface design is no longer limited to wireframing and designing icons. Today, designers work with a broad array of useful tools that range from the simple to the sophisticated, including graphics software and prototyping tools. Whether you’re creating Web applications or mobile apps, prototyping requires preparation and specialized software. However, with the number of prototyping tools growing every year, you must make a difficult choice: Which tool would enable you to work most efficiently and effectively and create the most useful prototype. In this article, we’ll consider the pros and cons of some of the most popular prototyping tools.
We once asked the designers on our company’s UX team about their favorite prototyping tool and got several different answers. The creator of each tool focuses on certain attributes—such as fidelity, an easy-to-use user interface, or time-saving functionality—that help their solution stand out and stay competitive in the marketplace.
How can you choose the best prototyping tool for you? When choosing a tool, keep the particular requirements of your project in mind, first and foremost. When defining these requirements, make them as precise and exhaustive as possible to ensure you can create a prototype that provides a thorough representation of how a future product would look and behave. Don’t omit what may seem like minor technical details; they can affect the whole project.
Setting Your Priorities
The purpose of creating a prototype is to validate your design ideas and clarify the structural and aesthetic details of an entire user interface. Prototyping may occur at any time during the design process, but is especially important before usability testing. If you’re trying to cut costs, don’t just choose the more popular or complex tool. Think about the task you need to accomplish, the audience for which you’re creating the prototype, the time you have to do the work, and the required conditions for moving forward in the development process. Ask yourself the following questions:
Why do we need this prototype?
Who would use it?
How much time do I have to create it?
How can we integrate the prototype into our workflow?
How can I share the prototype?
Answering these questions will help you to understand, at a high level, what features you need in a prototyping product. Also, it is essential to consider what features would support an efficient prototyping process. Efficient prototyping tools are fast and typically let you create a single-use prototype that you will discard once you’ve used it to communicate a design concept to your audience.
Focus your prototyping effort on validating particular design concepts. When deciding what to prototype, a designer should consider the parts of a product design for which prototyping would deliver the greatest benefit. Once you’ve determined what kind of prototype you are going to create, the next step is choosing a prototyping tool that will give you the best balance of functionality and cost. Get as much power as you can for the price you can afford.
Choosing a Prototyping Tool
Prototyping lets you clearly define a future Web application or site or mobile app, eliminating much of the risk of misunderstandings about requirements and making the customer’s requests concrete. Prototyping is an essential part of a designer’s work. There are several different classes of prototyping tools that can make your prototyping work much easier to do, depending on exactly what you need to prototype, the type of prototype you’re creating—for example, concept, feasibility, vertical, or horizontal prototype—and the level of fidelity you want:
flat, clickable prototypes
Determining the right level of fidelity plays an important role in prototyping. You can create low-fidelity prototypes using paper and pencil, for which you don’t need to use software at all. Both the visual and interactive fidelity of paper prototypes are low. However, you can easily make adjustments to them. To achieve a medium level of visual fidelity, you have to work with a prototyping application—for example, Visio or OmniGraffle—but the interactivity of these prototypes will remain low. High-fidelity prototypes are the most realistic and interactive. Some may even mistake them for a real product. You need skill and knowledge to prototype a well-structured, functional prototype using these tools.
Flat, Clickable Prototypes
If you’re an inexperienced designer and don’t have the knowledge, confidence, or time to spend learning sophisticated prototyping tools, try InVision or Marvel. (We prefer InVision thanks to an awesome Sketch plug-in called Craft.) InVision is an easy-to-use, rapid prototyping solution that integrates with Sketch and Photoshop. You can create a prototype in just minutes. While the tool has limited functionality and creates bitmapped images, it works perfectly well for early-stages of design when you need to validate design concepts for a future product. With minimal effort, you can create a simple, clickable prototype in a short time. You can then share a link to the prototype and recipients will be able to open and explore it. The main disadvantage of InVision is the limited number of animations you can implement. Therefore, using InVision, you’ll likely create medium-fidelity prototypes.
For more advanced designers, Principle or Flinto for Mac deliver additional useful features that let you create high-fidelity, product-like prototypes. A number of prototyping tools let you work with more complex, detailed micro-interactions.
When using Principle, you’ll need more time for prototyping; however, you can create precise animations and work with separate elements. Principle detects changes in position, size, and color during transitions between screen states. It has the power to let you create realistic, dynamic interactions, which is impossible in the image-based InVision. As a result, you can create detailed, smooth animations. Principle’s main purpose is for designing user-interface animations, but it won’t be sufficient for creating more complex design solutions. To share a Principle prototype, you can create a video or GIF or share a prototype using the iOS app. InVision has much more convenient sharing options.
While Flinto resembles Principle in many ways, there are certain differences you should take into account. Flinto is more convenient when you’re creating prototypes comprising multiple screens and custom transitions. It offers more gestures such as swipe, which you won’t find in Principle. You can move artboards easily—just like in Sketch—which makes your work more convenient.
Principle connects layers automatically—if the application can identify two elements with identical names—which is very convenient for designers who keep their Sketch layer names in order. However, Flinto is a better choice for those who prefer to connect all animated elements when creating a prototype.
As you can see, both tools are valuable in their own right. Only by trying out both of them will you know which one would suit you best.
You can see that these tools differ in their functionality and, thus, differ in the types of prototypes you can create with them, the ways in which you can share prototypes, and the time creating them requires.
The market is currently full of tools for creating clickable prototypes. However, the industry is about to change.
Silverflows has decided to integrate prototyping throughout the design process rather than only at the very end of a project. Macaw is seeking a way to generate real, ready-to-deploy code from a design. Embracing the future, InVision has bought both of these companies.
In Pixate (RIP), Adobe XD, and Silverflows, you can creates designs and screen navigation in a single tool. So there’s no need to migrate or import your designs or send elements between tools. You can design and prototype simultaneously.
Eight key features differentiate these prototyping tools:
Once you understand your priorities, choosing the right prototyping tool for you becomes obvious. We recommend visiting uxtools.co for a chart comparing all of the most popular prototyping tools.
Dive in and find out what prototyping tool would best fit your needs. You may actually need several different prototyping tools, depending on the projects you’re currently working on. After trying out all the tools we’ve described in this article, we concluded that, for our work, we need three prototyping tools:
InVision—This tool lets us present prototypes to our clients in the most convenient way—by simply sharing a link.
Flinto—This tool is best for multiple-screen prototyping projects that require custom transitions and animations. The Flinto mobile app makes it easy to test our prototypes in native environments.
Principle—This tool lets us create and record complex animations. Plus, its Sketch plug-in makes this a powerful solution with which we can create breathtaking prototypes.
Whenever a new prototyping tool hits the market, we get excited about learning its capabilities and seeing whether it will be useful in our work. Don’t be afraid to experiment with new tools. At the moment, there is no single, universal tool that lets you do everything you need to do when prototyping. Let’s hope that, one day, there will be a prototyping tool that’s as good as Sketch.
Through more than three years of experience doing user interface design and more than five years as a graphic designer, Simon has learned that the only sure way to success is continuous self-development. He is always seeking new ideas and learning about new tools and approaches to tackling design problems. Read More
Ellina is a marketing specialist working in the field of Information Technology (IT). She focuses on content marketing and believes in the power of inbound marketing—a technique for drawing in customers by providing great content rather than interrupting their experience. A voracious reader, Ellina enjoys good articles, great books, and awesome stories.