In most cases, you’ll want the biggest bang for your buck: whichever method most accurately answers your question with the least investment. Because after all, all design knowledge has a cost.

Prototyping in Practice

My team at Lucid Software is constantly analyzing and adjusting our process to deliver the maximum design value possible. This means being quick to adopt new practices and, in many cases, new tools. I’ve personally experimented with multiple prototyping apps, and I’ve seen the value each app can provide in different situations.

InVision

A quick and easy solution to a prototype is to stitch pages together with simple hotspots InVision. It’s a lightweight, quick building process that results in a simple, guided walkthrough. It integrates nicely with Sketch and Photoshop, and lets you build a working prototype within minutes.

Notice the blue box that appears when a user tries to explore other parts of the design? These prototypes tend to require some handholding, and are often used for very constrained actions and transitions, like switching pages and opening menus.

Don’t expect to animate individual assets and elements, though. These prototypes are limited to basic, raster images like JPG and PNG. They work perfectly for early ideations and proofs-of-concept.

Principle for Mac

Many prototyping tools allow you to move beyond screen transitions, and employ more intricate and detailed micro-interactions. I recently proposed one such animation that was difficult to communicate using static assets and hotspots. I needed consensus from product management, so I wasn’t overly concerned about remote testing or sharing capabilities.

Because I’m designing for a robust web app, Lucidchart, hover states and mouse movements are crucial. Several of these apps have gone the well-traveled road of mobile-only design platforms, so my attention quickly turned to Principle. It was desktop-friendly, worked on Mac, and touted its ability to handle micro-interactions.

Principle has taken a more fine-grained approach than InVision. A prototype takes more time to build in Principle, but allows for very fine tuned animation and easing of individual elements. Check out this GIF I produced in about 20 minutes:

If you’re familiar with Keynote’s Magic Move you’ll feel right at home. Principle detects the changes in position, size, color, and more as it transitions between various screen states. These features afford realistic, dynamic interactions that can’t be replicated with InVisions image-based platform.

Once I was finished, I exported the above GIF and fired it off in a Slack message. From conception to consensus this idea took under an hour, the results was high-fidelity, polished animation.

Principle is top notch for UI motion design. It’s obvious that it was designed from the ground up with this end in mind. For more involved design solutions like remote usability testing with data, however, Principle didn’t quite fill my needs.

HTML/AngularJS in Codepen

When I was tasked earlier in the year with improving the page tab experience in the Lucidchart Beta, I needed to get my ideas into the hands of customers. I wanted to send a working, dynamic version of my design to users and ask them to use it themselves.

Customers needed to create real pages and rearrange those pages to their liking. They needed to create, delete, and sort pages like they would in their own workflow. They needed to measure my design against their own priorities.

Only a select few of the available apps on the market take user input, and the input is often a simple field that can be typed into. My prototype needed user input that could be stored, manipulated, and presented in different locations throughout the prototype. I needed code.

I’m very vocal in my support of designers that code their own prototypes, like when I talked about using Codepen to user test. Creating a coded prototype is often a big investment, though, and not all designers have the time nor resources to do it. For that reason, InVision and Principle are great alternative for a simpler, guided experiences.

In the end I used our Angular component system Lucid Particle to code a realistic experience in Codepen:

The results were phenomenal. Instead of a guided walkthrough, participants were able to simulate their own working environment. Some customers average 3–5 pages while others use over 100, and each was able to evaluate the prototype through their own experiences.

With a realistic, dynamic prototype these participants gave extremely detailed and invaluable feedback that allowed me to craft the experience to their benefit. I was also able to share this prototype with the engineering team to communicate exactly how the interaction should work. The work I had done to write the CSS and time the animations quickened the development process.

Even though this prototyping experience was immensely successful, it doesn’t mean that a coded prototype is always the best prototype. The best prototype is the prototype that yields the most information and knowledge with the least investment.

The Current State of Prototyping

As you can see from the diagrams above, the market is currently stacked with “Clickable Prototype” tools. Several forward thinkers have set out to solve the same problem, and the design world is benefitting immensely from it. A few outliers are already rethinking how prototypes should be made, however, and I think this industry will look very different even within the next year.

Silverflows turned the issue on its head as it brought prototyping inside of the design process rather than after it. Macaw seeks to take the process a step further by generating real, usable code from the designs themselves. I’m usually skeptical of the one-size-fits-all approach, but this quote by Mike Finch has me convinced otherwise.

“I don’t know what sorcery [Macaw is] using to make the code but it’s amazing and beautiful.”

Consider the possibilities now that InVision has purchased both of these companies. The prototyping space will likely look much different even within the next year.

Google also purchased Form and Pixate, both competitors in the industry. Their recent update to Form suggest that these programs will be used to further their efforts with Material Design, and give designers and developers more access to platforms with which to create their Android/Material apps.

I also enjoy creating hybrid apps in my spare time with the Ionic Framework. They’ve been hard at work adding to their suite of tools with Ionic Creator. With Creator, a designer will be able to design with Ionic components, and export to App Store-ready code. These apps work on both iOS and Android, and so offer a full start-to-finish solution for building hybrid apps.