90% of startups without prototypes fail. With prototypes, only 89% do.

Jokes aside, I used to create prototypes for the last 18 years. My personal path was from Photoshop to Axure to Principle. Axure gave me a hard time; in this article, I’ll explain how Principle turned my life into cream and peaches.

My Personal Preferences

For beauty: Sketch + Principle (Mac only)
For complex interactions: Axure RP (Mac and Windows)

Sketch + Principle

It lets make demos like this:

A prototype in Sketch + Principle (of an app we have developed for a Hackathon).

When it comes to design, this prototype is far from winning prizes. However, by adding these micro animations it gains a lot of versatility.

Why Not Just Sketch?

Everybody likes Sketch, but using it alone raises two problems:

  1. Animations. I’ve noticed front-end developers don’t pay close attention to transitions, behavior of elements, etc. Dialogs fly from the wrong sides, some animations are completely absent, and some are even misleading.
  2. Behavior. I used to use Axure for explaining behavior, but it requires some extra work to guide my teammates through the prototype to make it clear which part is interactive and which part is not.

How Difficult is It?

It’s a little more difficult than making just a design. Imagine you’ve made this in Sketch:

2
To animate it, you duplicate the artboard:
3
…and import it into Principle:
4
Add a couple of animations (hint: right-click and click the lightning), you’ll get this in under 3 minutes:
5
Making complicated animations — with drag-n-drop, etc. — is just a little more complicated.
As a bonus, you can run prototypes on iPhone or Mac just like a regular app.

Axure

Axure lets you create web prototypes with quite complicated actions without programming.
6
An example of a prototype of our mobile website. You can try both the prototype and the mobile website that we created based on it. As you can see, it required some additional design.

Axure’s Pros

It’s super-convenient for documenting features: you can comment anything, similarly to commenting in Excel.
7
Axure prototypes are great for usability testing.

Axure’s Cons

  1. Axure prototypes are quite ugly (or maybe it’s just me). Whatever I do in Axure, looks quite rough. Here are couple more of our creations:
  2. You should guide users or put actions on everything; both are exhausting. The magic dust feature is a great help, but still.
8

The magic dust feature highlights clickable elements in Axure

Other Prototyping Tools

There are great many tools out there. Our personal theory is at some point too many UX designers were disappointed by the current selection of tools and started making their own. They all appeared about the same time.
I like this comparison by Cooper:
9
Not only did they rate each tool, they made their comparison interactive. You can filter the selection by features:
10
…then sort the results:
11
And they keep it updated! Bravo, Cooper.
Disclaimer: I’m not affiliated with Axure, Principle, or Sketch. However, we make a free app with icons that works with any of them.
What prototyping tools are you using in your practice? Please share your suggestions in comments, we are open to them!

Every prototype, once done, hugely benefits if tested on real people. Learn a few tips from our usability specialist in Don’t Listen to Users and 4 Other Myths About Usability Testing

By the way, here’s what happens when you don’t test your prototypes: How We Lost 47% of Our Users After a Redesign

Subscribe to
Icons8 Newsletter!