How to Design UI Mockups, Wireframes and Interactive App Prototypes With Apple Keynote In 30 Minutes

Why Keynote?

Apple Keynote is one of the simplest and most powerful tools out there. But it’s not just a presentation tool, it’s also a great tool for creating mockups, wireframes, and interactive prototypes. You can quickly layout shapes on slides to create interface screens, add links to create interactivity between screens, and use slide transitions to animate the interface. You can then export your prototype to your iOS/Android device to interact with it, demo it to others, and get feedback as if it were a real working app.

Keynote is the fastest and cheapest way to prototype your app ideas, and Keynotopia makes it 10x faster and your prototypes will look 10x better!

Here is how you create an app prototype with Keynote in under 30 minutes.

Step 1: Plan It

Create a diagram with each interface screen as a state, and create links to specify how users will transition between them.

For instance, let’s say we’re creating an app that enables multiple friends to find a place to eat on a Friday night that is close enough to all of them.

Here’s what the user flow diagram looks like for this application:

Step 2: Sketch It

Grab a marker and a stack of papers (or your favorite tablet), and sketch a high level layout for each screen in your user flow diagram.

Step 3: Design It

Open the .Key file that comes with your Keynotopia Templates side by side with a blank new presentation.

Start by creating a slide for each screen (each state in the diagram) by copying interface elements from the keynotopia template and pasting them onto your presentation. To edit the label of an interface element, simply double click it and start typing.

You can also modify element sizes, colors, and effects using the shape inspector in Keynote.

After putting together the main screens, you can move them to master slides so that you can reuse them in other screens without doing much copy/paste, and update multiple screens with a single change.

Step 4: Add Hyperlinks

To make an interface element clickable, select it, then open the hyperlink tab in the inspector, and specify the target slide.

I recommend using slide numbers, instead of next/previous slides, since Keynote is smart enough to update these numbers if you end up inserting a slide in the middle later on.

Make sure you test the interactivity every once in a while to make sure the app behaves as you’d expect it to.

You can add some slide transitions or magic moves to create interface animations. But remember not to get too distracted by these features.

Before testing your final presentation, make sure that clicking anywhere on the slide doesn’t cause it to advance to the next one. To do this, select “Hyperlinks only” in the presentation settings in the inspector.

Step 5: Export It & Test It

If you’ll be testing your prototype on an iOS device, save your prototype to iCloud, DropBox, or your favorite file sharing service, and open it in Keynote on iOS, then hit the play button and test it on the device. Hyperlinks and animations will make it feel like a real working app. If you’re testing it on an Android device, export your prototype as PDF and open it in your favorite PDF reader on the device.