Prototyping User Interfaces: Finding the Tool You Need

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.