The Best (Free) Prototyping Tool of 2018
This article was originally posted on Keynotopia.com
There is no shortage of great prototyping tools out there, and choosing the right one has become a dilemma, and almost a subject of debate among designers and product managers.
I initially wanted to do a comparison of the top prototyping tools, as I did in 2017, and leave it up to you to find the best one for your needs. This year, I’ve decided instead to provide a deep dive into what I believe to be the best prototyping tool of 2018.
But before we get into it, let’s look at what a prototyping tool is, and what makes a good one.
A prototyping tool shortens the time between inspiration and validation, making it easy for anyone, regardless of their skill level, to execute their ideas quickly and cheaply.
A good prototyping tool makes you feel that you’re getting 80% of the result with 20% of the effort, hence allowing you to validate multiple ideas, making lots of mistakes, and throwing away most of your prototypes, without feeling attached to them.
A great prototyping tool enables you to design a user interface, animate it, and enable user interaction, all in one place. You shouldn’t need to design your UI in one tool, export it to another one to animate it, and then export it to a third one to add user interaction.
And the best prototyping tool is the one that everyone already knows how to use, so anyone can jump in to design or give feedback as soon as they have an idea.
After playing with the newcomers, revisiting established tools, and reviewing my notes from last year, I’ve concluded that the best prototyping tool for 2018 is Apple Keynote.
Here is why…
Keynote is an all-in-one Swiss Army Knife for designing interfaces, animations and user interaction. It can be used by anyone on your team (or at least, anyone who knows how to create a presentation). It makes you accomplished so much with little effort, almost giving you the feeling that you have an unfair advantage over others who use other complex tools to accomplish similar results.
It’s no surprise that Apple design team uses Keynote for rapid UI prototyping
Designing user interfaces and icons
Keynote provide vector tools and shapes that make it easy to do most design tasks, from blocking high level screen layouts, to creating quick wireframes, and to designing high fidelity interfaces and icons.
By creating a slide for each screen, you can design complex interfaces for apps and websites in a fraction of the time it would take to do the same with other tools.
The screenshot below shows three iOS screens design from scratch in Keynote (every icon was also drawn using Keynote’s vector tool), and are part of Keynotopia prototyping templates
Creating UI Animations
Almost every prototyping tool I’ve tested requires you to export the UI design into a different tool to create the animations, making it time consuming to do design iterations.
Your unfair advantage of using Keynote is that it provides you the ability to create UI animations without leaving the tool, and with a few simple clicks.
Using magic move, all you need is to specify the object’s location, rotation, size and color on the target slide, and Keynote will magically animate that object between both slides. It sounds simple, but it leads to cool and powerful UI animations.
You can also add animations to individual UI components using builds and effects, and specify the order and duration of each animation, without messing with timelines and keyframes.
Adding User Interaction
Unlike other tools, you don’t need to export screens into online tools, create hyperlinks, re-upload screens when you modify them, and having to choose between showing the animations or demonstrating the user interactions.
With Keynote, you can create user interactions through hyperlinks between slides, include animations, and test it directly on a mobile device, without doing any extra work.
Sharing and collaboration
Sharing a UI design created in Keynote doesn’t require exporting to a different format. You simply move your file into iCloud, and invite others to collaborate from within Keynote. This ensures that all collaborators are seeing the same version of the file, and that anyone can give feedback, or directly modify the file, without installing any extra tools, or signing up for additional services.
Testing on device
One of my favorite features of Keynote is the ability to run the same file, without needing to export/upload, on the actual device, and interact with it as if it were a real working app. If you already have your Keynote file on iCloud, simply open the file in Keynote on iOS, and press run.
That’s all you need.
You can then interact with it instantly, and show it to people to get feedback.
Limitations
Keynote comes with some limitations. Here are the most notable ones:
- You cannot prototype gestures (swipe, pinch, etc.)
- You cannot integrate live data into a slide (for instance, dynamically generating a list of avatars and names)
- You cannot export your graphics into app-ready assets
- Pages have fixed length, which make it a bit challenging to prototype scrolling
Those limitations were not a deal breaker for me. While pinch and swipe are essential for some interactions, creating a click that simulates them does the trick. For live data, I use hardcoded data, and for input, I transition to a slide that has the user input already filled out. And when it comes to long pages, I divide them into two slides, and also transition between them using a hyperlink region at the bottom of the first slide.
What about PowerPoint?
PowerPoint shares lots of advantages with Keynote, like layouts, shapes, animations, and hyperlinks.
The biggest difference is the absence of “magic move” animation from PowerPoint, but you can still create lots of cool UI animations manually.
If you’re on a Windows machine, and don’t want to invest in a new prototyping tool, PowerPoint would do the job.
Here’s a video that shows how to prototype an Android app with PowerPoint.
Final thoughts
Keynote rocks!
It’s by far the most productive prototyping tool I’ve ever used: easy to learn and use, simple UI, powerful design and animation features, and 100% free.
I highly recommend it as the best prototyping tool for 2018.
And if you’re considering either Keynote or PowerPoint as your UI prototyping tool of choice for 2018, grab your UI prototyping kit to prototype your apps 10X faster!
