Choosing a Prototyping Tool

For Web and Mobile Applications

There are numerous tools for the web and mobile apps prototyping out there. I invite you to have a sneak peek into my process of choosing the right tool for different prototyping projects.

The number of the platforms available for the application delivery grows all the time. However, I’d like to focus on the most ubiquitous segments, namely, native mobile apps and responsive web (desktop, tablet, and smartphone) applications.

What Do You Prototype?

The real question here is what do you want to test with your prototype. Do you want feedback on the clarity of the app structure and navigation? Do you want to test if the user scenario can be performed within a specific time frame? Or do you want to know which one of the new micro-interaction animations results in a better overall app experience for the users?

Whatever you want to test determines your prototyping strategy and therefore the toolset you want to use for the job.

All the testing tasks can be roughly grouped into two categories. Either the test assesses the macro-level interactions or the micro-level interactions.

Macro Level Interactions

On the macro level, you want to test the overall model of the application. It’s all about the app content, it’s structure and the length of the path the user has to take in order to get to the goal.

The tool I consider to be the best for quickly iterating and sketching the ideas on the macro level is a pen and a notebook. I tend to use paper when I need to quickly brainstorm with the team in order to shortlist a few solutions worth taking to the further design or prototyping phase.

When working with the team, it helps to sketch on a whiteboard and stick sheets of paper or sticky notes on it to show alternative states and interactive elements like dropdowns, context menus, flyouts and modal windows.

For the web segment prototypes, I tend to go with Axure RP. It is perfect for making a clear structure and defining some basic interactions. Despite having a few spots in the UI that might use some improvement, Axure definitely nailed the balance between flexibility and the time needed to get to a working prototype.

Mobile segment offers more prototyping tools to choose from. The task remains the same — to demonstrate the application structure. The tools that are pretty good at it are for example InVIsion or Marvel.

While I consider InVision to be more advanced, largely due to their LiveShare presentation mode, the fundamental functionality is quite similar and allows for quickly creating click-through prototypes and running them directly on the mobile device.

With Marvel however, you get to not only view your prototype on the device, but also edit it there as well, which I find quite a time saver when it comes to small fixes.

Micro Level Interactions

Microintereactions can be defined as everything happening in a single view — scrolling animations, elements reacting to user actions, visual feedback, etc.

On this level, it is required to break apart the view mockup and compose it back again in the prototyping tool, so that the elements can act and react independently from each other.

I love to experiment with all sorts of interactivity in Flinto in the smartphone context. Flinto is great for prototyping native apps. A couple of things I really like about Flinto is the support of 3D transformations and the way importing from Sketch works.

I am also a big fan of Framer which might be due to my passion for structure and precision as well as my past programming experience. I go with Framer when I need to prototype complex interactions with branching and conditions. In Framer, I can maintain the current state and act depending on what the user is doing, so it feels like a real app basically.

Another task for Framer is prototyping interactions where the element triggering the event and the element reacting to that event are different. Strangely enough, in most of the tools, you need to find workarounds for that.

For a web app prototype, it is essential to be viewable in the browser. I am actually missing a tool that would allow me to start with general functional interactions and increase the level of details later in the process. So depending on what interactions are needed in the prototype my current workflow uses Axure for the functional interactions, Hype for the isolated timeline animations and prototyping responsive behaviors and Framer for the power and flexibility of the code.

Example code describes the animation for the line array so that every next line starts to move slightly later than the previous one.

The advantage of Framer is that the prototype code helps a lot when communicating with the developers. It really works like a documentation specifying all the animation timing, easing parameters, and order.

Final Thoughts

When creating a prototype it is critical to define the goal in order to determine the way you want to work on the prototype and thus to set the stage for choosing the tool for implementing the project at hand.

I encourage you to explore, to experiment and to experience the variety of the prototyping apps available today to find the tools that fit your needs and your workflow best.

Disclaimer. I am in no way affiliated with any of the vendors of the mentioned products. All opinions expressed represent my personal experience only.

Useful Links

I appreciate your feedback in the comments, on Twitter or LinkedIn.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.