Prototyping iOS apps with Keynote
Note: This was first published on silkpixels.com
After sketching some UI ideas and wireframing, the next step is usually to create some static mockups using something like Photoshop:
Although static images are certainly a step up from sketches, they don’t really give you a feel for how the UI works.
Keynote, which is essentially a Powerpoint alternative from Apple, makes it super-easy to animate your static mockups:
As you can see from the demo above, Keynote prototypes aren’t perfect[1], but they can certainly give you a better feel for how an app is supposed to work.
Turning sketches into Keynote slides
Now that you’ve decided to give it a go, the first step is to open Keynote and set the slide size to 640 by 1136 pixels[2]. Next, start creating slides for each “final state” of your prototype.
For example, there could be one slide for “share sheet down” and another for “share sheet up”:
This process is similar to creating static mockups, so you can use the method you prefer. I like to save time by using cropped screenshots from other apps as a starting point. You can use Keynote shapes, Photoshop, Sketch, or whatever method you prefer. The main thing to remember is to keep any UI elements you want to animate separate.
The share sheet, for example, is separate from its background as it pops up and down. No parts within the share sheet need to be animated, so it’s just one image cropped from a screenshot.
“Magic Move” Animations
This is what sets Keynote apart. “Magic Move” is a feature that makes it super simple to create custom animations that replicate the feel of native apps.
It works like this: If the same image is on two consecutive slides, but is in a different position or is a different size on the second slide, Magic Move animates it from the first position to the second. It’s a simple, but powerful concept. Here’s how it works with the share sheet example:
As you can see, the sheet starts under the first slide. On the next slide, it’s on top of the other images. The Magic Move setting animates the sheet so that it moves from the bottom of the first slide into its activated position:
That’s essentially all it takes to create animations with Keynote. Understanding exactly where to put each element takes some practice, but you’ll get the hang of it in no time. Here’s a better explanation from Apple about how Magic Move works.
Getting the prototype onto your iPhone
Surprisingly, this is the most frustrating part of the process. As far as I’m aware, there’s no way to rotate the Keynote presentation once it’s on your phone, so you have to do it on your Mac beforehand.
There are probably better ways to do this (please tell me if you know of any), but I create a new Keynote file with the slide size set to 1136 by 640 pixels, then copy over all the slides. I then group all elements on a slide, rotate them by 90 degrees, line them up, then ungroup:
Once you’ve made a landscape version of each slide, it’s time to get the file onto your phone. Ensure you’ve downloaded the Keynote iOS app, plug your phone into your Mac, open iTunes, then upload the file:
Once the file is on your iPhone, you’re all set! You can now get a feel for the UI on your iPhone and use it to get feedback from others.
As an extra example, I quickly recreated some animations from the Secret app:
When you’re demoing your prototype, remember that tapping anywhere on the screen progresses you to the next state!
I hope you found this guide useful and you’re inspired to turn some of your ideas into Keynote prototypes. If you want to download all of the Keynote files I used in this guide, including the Secret app mockup, add your email here and I’ll reply with a download link.
I’m more than happy to help you if you have questions or want help getting started – just get in contact.
[1] – There are two main issues with Keynote prototypes. The first is that you can’t use them to demonstrate scrolling, which is generally a part of most apps. The second issue is that a tap anywhere on the screen progress you to the next state.
[2] – This resolution assumes you’re optimizing for an iPhone 5/5S. You can use Keynote to prototype for any platform, but I’m focusing on iOS because it’s what I know.
