What’s the best way to prototype an iPad application? My recent experience has me convinced that creating your prototype on the iPad is the way to go.

In the beginning…

I started my design in OmniGraffle, defining the layout and a few high level interactions. Once the design was underway, I consulted my visual designer, Grant. While Grant iterated on visual designs, I started to think about how best to capture the multitude of interactions in the design. I would need to be able to model some fairly sophisticated animated transitions and gestures. Static mockups were not going to cut it.

The “Aha!” moment

It was around this time in the project that Grant and I realized something important. He was already creating assets sized for 1024×768, the dimensions of the iPad display. If we could run the prototype on the iPad itself, it would look like a working app. Could we do this with Keynote? Was it possible to prototype for iPad on the iPad? Turns out it’s not only possible, it’s highly desirable.

Why Keynote

First, let me start by professing my love for Keynote on the iPad. This was my first experience using the app and it exceeded my every expectation. It’s absolutely stellar and well worth the $9.99 price. If you plan to create any sophisticated authoring applications on iPad, I recommend buying this app, studying it carefully and using it as your benchmark design (I’m talking to you, OmniGraffle!).

Keynote is loaded with beautiful animations that are highly flexible and precise. More importantly, many of the animations built into Keynote are also available in iPhone OS and those that aren’t can be reasonably faked.

Working with Keynote

The workflow is pretty efficient, albeit a bit unusual. The visual designer e-mailed me design assets which I then saved to my photo library. Once in the photo library, they were available in Keynote. From there I assembled the slides and added animations.

It’s fairly easy to prototype sophisticated interactions to see how well they work, fine tune the timing, etc. Because I was modeling the UI directly on the device, I could rapidly iterate through ideas. Thanks to the “replace” feature, swapping out images was simple and allowed me to retain any animation and ordering I had already completed. This saved me a ton of time and is a significant improvement over the desktop version of Keynote.

In the screenshot below, you can see Keynote’s animation mode. Using Magic Move I was able to re-create the pinch / spread gesture.

Animation mode in Keynote for iPad. In this screen I am using Magic Move to replicate the pinch/spread gesture.

The result

I created a screencast of my prototype, embedded below. The screencast adds gesture icons for clarity, but when demoing the prototype to co-workers, I was able to hold the device in my hands and mimic the gestures as if I had a working product. As a result, the demo generated a lot of excitement.

Next Steps

We’re not done yet. With sufficient excitement generated from the prototype, we are now moving on to implementation. That means a lot more prototyping and specifications yet to be completed.

See Also…

Use of Keynote as a prototyping and design tool seems to be gaining in popularity. Here are some more resources on the topic.

Have you been using Keynote as a design tool? Have more resources to share? Let me know! Leave a comment or ping me @cvilly.