Using Sketch & Keynote for Prototyping
Since several months, I’m trying to find the best global design workflow, that allows me to ship quickly, from first thoughts to delivery.
First of all, in terms of UI tool, I think that Sketch is definitively the best player out there, and I would love to talk about it but that is not the point of this post, so let’s move to the real topic…
The Pursuit of prototyping process
Yes, using the Keynote dinosaur with Sketch can seems weird…
But in fact, it’s a very effective and cheap combo. Here’s why:
You can build this, in less than 30 minutes.
In order to illustrate the simplicity of Sketch / Keynote combo for this article, I recreated that little Google Inbox transition effect to see how much time it will take me.
Result = about 25 minutes.
It is cheap.
Sketch will cost you 99$.
Keynote is free.
Man, you cannot beat this!
Sketch > Keynote = ⌘C, ⌘V
Yep, you can copy any Sketch element and paste it into Keynote.
It is just as simple as that.
That’s a priceless advantage because you will gain extra time when it comes to testing some transitions between two screen states of your design.
Work with vectors, not pixels.
The elements you will import from Sketch to Keynote will be created as vectorial elements (PDF).
It means that you will be able to manipulate them at any scale, using any Keynote transition effect you like.
Conclusion.
I am not trying to convince you that Keynote is the perfect tool for prototyping. In fact, if your goal is to fake a full product experience, including dozens of screens, it will suck.
To do that, you’d better use online tools like the very good InVision.
But if your goal is to animate some design pieces very quickly, trying some meaningfull transition effects with a minimum amount of effort, I am sure you will love Sketch + Keynote combo as I do ☺
If you use Sketch, I would love to hear about your own prototyping process.
Let’s discuss it!
Credits: The Sketch source used for the Google Inbox prototype demo was made by Erika Ito.
