Designing with Keynote

by Luke Wroblewski July 20, 2010

Recently, an increasing number of designers (myself included) are turning to Apple's presentation making software, Keynote, to design and prototype software applications. Here's a few reasons why and some tips learned along the way.


Why Keynote?

Product strategy and design consultant, Stephen P. Anderson provides an overview of what makes Keynote a compelling design tool.

Efficiency The biggest reason I prototype in Keynote? You can work at an insane pace! I can render something at a high level of fidelity in not much more time than it would take me to sketch that same concept. It's really the little details unique to Keynote that make this an efficient tool, things like: alignment, auto distribution of elements when cutting and pasting, smart guides, being able to click into grouped objects, and so on! Also, the ability to manage tabular data is really helpful for laying out Web apps that use data grids.

Hi-Fidelity You can easily drag in images (for icons or textures). And for what is essentially a presentation tool, the drawing tools are fairly powerful. Put these together and the first thing people see is almost identical–visually–to what gets implemented.

Narrative Structure Because Keynote is a presentation tool, it's suited for designing Web apps where you need to show process flows and interactions. And, the animation tools make it easy to show how things like transitions and rich interactions might actually work.

Combine all these and you've got a tool that allows you to quickly communicate how something will look and work! For me, the big switch came while prototyping several iPhone apps. Switching from Photoshop mockups to using MockApp allowed me to continue rendering comps at the same level of fidelity, but in a fraction of the time.

Every tool we use influences the final design in some way. I've noticed that designs I create in Keynote lack some of the subtleties I add when working in Photoshop. However, the hi-fidelity comps made in Keynote can generally be implemented in code–there are very few graphics used. For applications, especially on the first few passes where we'll iterate many times over, this can actually be a good thing. If you do "draw" something crazy in Keynote, you do have to recreate that image in Photoshop, which can slow things down. But, all things considered, I can explore more options in less time.

Keynote on the iPad

Director of Mobile User Experience at Salesforce.com, Craig Villamor, shares why and how he designs applications using Keynote on the iPad.

I use Keynote to prototype iPad and iPhone applications because it is the shortest path to representing iOS applications in a fairly accurate manner. The animations built into Keynote map well to animations available in iOS, so I can be pretty confident that what I am depicting in the prototype is available in the OS. I've discovered that prototyping iPad apps using Keynote for iPad is a great way to work and gives you a nice tight feedback loop that lets you evaluate and iterate your design and interactions right on the device itself.

  1. Authoring and viewing your Keynote prototype on the iPad gives you an end result that looks and feels like a real app.
  2. You can use the Magic Move animation to re-create a pinch / spread gesture. Start with a stack of objects in the first slide, then distribute them in a fan or grid in the second slide. Magic move will tween between the two slides creating a convincing spread animation.
  3. Keynote for iPad's image "Replace..." feature lets you easily swap out images while retaining any animation and ordering that is already in place. This is a huge time saver when iterating the design.

Wireframing in Keynote

User Experience Designer, Travis Isaacs, espouses the benefits of using Keynote as a wireframing tool in his talk on Keynote Kung-Fu. Among his tips for using Keynote, Travis suggests:

  • Use master slides for page layouts/types: Avoid endless cut-and-paste by putting static elements, like navigation, backgrounds, and site "chrome" in master slides.
  • Create a library of components: Store common UI components like buttons, form controls, tabs, text treatments, etc in master slides for easy reuse.
  • Group items whenever possible: Grouped items are easier to move, delete, and manipulate. Double-clicking on an item inside a group makes that item editable.
  • Copy/Paste styles & properties to save time: Copy style (option + ⌘ + c) will copy all of the element’s properties, including: fill, border, font face, font size, font color, stroke, stroke style.

Fast Prototpyes

User experience consultant, Amir Khella details how to prototype an iPad application in Keynote in 30 minutes.