How to Create Mockups, Wireframes and Interactive App Prototypes With Apple Keynote
Why Apple 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.
Here is what the final prototype looks like
Bonus: Customize Your Keyboard Shortcuts
As you create more prototypes with keynote, it’s essential that you start customizing and using keyboard shortcuts to save time. To do this, go to System Preferences –> Keyboard then click the Keyboard Shortcuts tab. Select Application Shortcuts, from the left panel, then click the + button at the bottom left of the right panel to add a new shortcut. Select Keynote as the application, then type the menu item name you’d like to create a shortcut for *exactly* as it appears in Keynote (In the example below, I am assigning a shortcut for Align->Left menu item, so I typed “Left” – it’s case sensitive.
Here are the keyboard shortcuts I use:
|Group||CMD+G||Group objects together to easily select and edit them as a unit.|
|Ungroup||CMD+SHIFT+G||Ungroup grouped objects – Pressing it multiple times will ungroup nested groups|
|Send Backward||CMD+[||Place selected objects/groups behind others. The order of objects on the slide is defined by the order they were created.|
|Send to Back||CMD+SHIFT+[||Place selected objects/groups behind everything else.|
|Bring Forward||CMD+]||Does the opposite of Send Backward|
|Bring to Front||CMD+SHIFT+]||I’ll give you three guesses|
|Lock||CMD+L||locking enables you to pin selected objects to the slide so that you can select and edit other objects without accidentally selecting or editing the locked ones.|
|Unlock||CMD+SHIFT+L||Unlock selected objects or groups. You will notice that locked objects, when selected, will have “x” markers around their edges, instead of the square marker that enables you to resize them.|
|Zoom In||CMD+SHIFT+>||This is the standard zoom in shortcut for all iWork apps. CMD++ is already reserved for increasing text size, which I use more frequently.|
|Fit in Window||CMD+1||This shortcut is particularly useful if you’re working on a prototype with dimensions larger than the screen. For instance, I prototype iPad apps in portrait mode, and the 1024px height won’t fit on my 800px laptop screen.|
|Actual Size||CMD+0||This will zoom into the actual size of the slides|
→ Sample prototypes are included for free with the Keynote Prototyping Bundle