Top

Prototyping User Interfaces: Finding the Tool You Need

December 19, 2016

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.

Sponsor Advertisement
Continue Reading…

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
  • layered prototypes
  • code-based 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.

Layered 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.

Code-Based Prototypes

For designers who are passionate about prototyping in code, Framer and Origami are handy tools. But get ready to do some serious coding. You won’t be clicking any buttons or dragging and dropping elements to add features or links. Coding a prototype is a complex task requiring a lot of time and effort—and many designers don’t have the skills to do it or simply lack sufficient time or resources. Framer works with a simplified version of JavaScript called CoffeeScript.

If you want to create a prototype that’s a masterpiece, refresh your JavaScript knowledge and choose a coding tool. While the results can be impressive, keep in mind the time and money you will need to invest in creating these prototypes. The best prototype is the one that gives you what you need at a lower cost.

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.

Prototyping Trends

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.

Differentiating Features

Eight key features differentiate these prototyping tools:

  • design
  • importing
  • animations
  • navigation
  • transitions
  • data display
  • coding
  • sharing

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.

Closing Thoughts

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. 

Senior User Interface Designer at Erminesoft

Kharkiv, Ukraine

Simon BronnikovThrough 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

Chief Marketing Officer at Erminesoft

Kharkiv, Ukraine

Ellina BerezaEllina 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.  Read More

Other Articles on Prototyping

New on UXmatters