Designer’s Guide to Prototyping [2016 edition]
A guide to the landscape of prototyping in 2016.
Here’s a roadmap of tools out there that can help you can best present your design ideas. There’s a sea of options out there and it can be difficult to navigate which is best for you.
Use the guide below to narrow down your choices as you choose the one that best suites your project and time constraints.
It’s hard to find a tool that does it all, sometimes the best we can do is use the best parts of one tool before transferring our work to a different tool. My advice is to find out what you need to demo, figure out your audience and determine fidelity. Sometimes coding is required, sometimes you just need to link screens.
Let’s go!
Paper
Spark Camera — More like capturing a demo video but can work with paper.
POP app — Easy to use and does the job well. All you need a paper and a phone.
Wireframe
Balsamiq — Rough lines for the next step after sketching. I prefer using Axure’s wireframe widget library so I don’t have to switch tools after making wireframes.
Keynotopia — A vast library of wireframe templates.
Illustrator — Gets the job done. Lots of freedom to make things, just stay in low fidelity while you wireframe.
Quick + Easy
Powerpoint/Keynote — Good for demos/presentation purposes.
Desktop/Mobile
Justinmind — Have heard raves about it, though I see it pretty similar to Axure. Liking that you can select what platform you’re designing for from the start.
Axure — A personal favorite. Has new collaboration features.
Motion
Atomic — Has moderate variety of interactions for web and mobile.
Macaw — Code up your web design!
AfterEffects — Tough ramp up but has the most customization.
Pixate — Can be used to generate 100% native prototypes. Powerful interactions and animations.
Framer — Can be a tough ramp up, and uses js
Proto.io — Creates high fidelity mock ups that can run on your device.
Origami (Plugin for Quartz Composer) — Mac only, made by Facebook.
Avocado (Plugin for Quartz Composer) — Mac only, made by IDEO.
Principle — Mac only, great for showing detailed interactions and flows
Adobe XD — Though still in beta, has many promising features for motion design as well as support for both Mac/Windows
Mobile Only
Flinto — Screen to screen linking. Quite speedy and efficient to use.
Screen Linking
Invision app— Desktop, mobile with nice variety of frames with simple transitions. Has collaboration features.
Marvel — iOS, Android, Web prototyping with simple transitions.
Fluid UI — Get the prototype running on your phone.
Prott — Link Screens. Share it.
