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.
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:
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.
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:
To animate it, you duplicate the artboard:
…and import it into Principle:
Add a couple of animations (hint: right-click and click the lightning), you’ll get this in under 3 minutes:
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.
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.
Axure prototypes are great for usability testing.
Axure’s Cons
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:
You should guide users or put actions on everything; both are exhausting. The magic dust feature is a great help, but still.
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.