How long would it take to go from idea for an iPhone or iPad app to a prototype that you can test with users? A month? A week? Few days? How about 30 minutes?
What if you can prototype your next idea quickly and cheaply without learning any new tools or programming languages?
What if you can send your prototype to friends to play with and give you feedback, without having to install anything on their mobile device?
What if you can integrate your prototype into your presentation, and click through it to show your audience how it works, rather than boring them with bullet points?
And what if you can do all this without touching a design tool or writing a single line of code?
The following video shows a sample prototype created using nothing but Apple Keynote and Keynotopia‘s iPad prototyping templates. You can also see how I am testing the prototype on an iPad, tapping my way through different screens and dialogs.
Here are the UI elements I use in that presentation, which were all vector shapes created from scratch in Apple Keynote.
Why use Keynote?
The challenge with existing wireframing and prototyping tools is that you need to be a designer to create a good looking app prototypes. Additionally, most of them will help you create static screens, but not something that you can click through and test out.
Keynote includes powerful drawing tools, smart guides, styles, locking, and grouping. Master slides make it possible to reuse interface components across multiple screens, hyperlinks add “clickability” to the prototype, and slide transitions create cool interface animations with a single click. Finally, it works seamlessly with Adobe CS apps, so copying and pasting graphics works seamlessly across.
With the iPad prototyping templates for Keynote and PowerPoint, you can create a prototype simply by copying and pasting interface components on a slide, then creating hyperlinks to transition between slides, hence giving a prototype the needed interactivity and responsiveness to users’ actions.
How do you create a similar prototype in 30 minutes or less?
Download the iPad Prototyping template from Keynotopia , and install the file “iPad Prototype.kth” into <UserName> -> Library -> Application Support -> iWork -> Keynote -> Themes. Alternatively, you can double click the file to open it in Keynote, and choose file -> Save Theme. This will create a theme in Keynote that you can reuse to create new presentations, as shown below.
When you create a new presentation based on the iPad Prototype theme, you will see a single black slide. To access the assets, you need to go to the toolbar and click View -> Show master slides.
This will reveal the master slides panel above the slides panel, allowing you to click on a specific master slide and copy/paste assets into your slides.
Step 1: Sketching the user flow
To create your prototype, start by defining the different app screens that you will need and how the user will transition between them. I typically do this as a state diagram as shown below (Created on the iPad using Adobe Ideas).
It’s important that you get this diagram right because it will save you time doing modifications to your prototype later on.
Step 2: Putting together application screens
Next, you create a new slide for each screen, and copy/past components from the masters into each slide (Select a master slide > Select an object > Select target slide > paste object). Since all objects were created in Apple Keynote, they are fully editable (resize, change labels, change colors, add/remote elements, etc…). Each object is a group of building blocks that are grouped together. You can either double click on an object to select each sub-object, or ungroup using the Ungroup button on the toolbar, edit sub-objects, then group again. Grouping makes it easier to select and move objects.
Hint: After you’ve created each screen, you may find it at times easier to move the static components of that screen into its own master slide. That will save you time in making modifications in each slide if you decide to change something later. 
After creating each screen, you duplicate (CMD+D) slides and add additional elements to them (pop-ups, fill text, …).
Step 3: Adding interactivity
Finally, it’s time to create transitions between screens. You do this by going through your state diagram, and for each slide, select the element that would transition it to another slide. For instance, clicking a picture shows the profile pop-up, so you’d select the profile picture (you can select all pictures in the slide), and in the Inspector -> Hyperlink select the target slide. Do this for every transition that you have in your state diagram. Keynote will add a blue indicator on each hyperlinked element in your slides.
Hint: Keynote is smart enough to know when you rearrange your slide, and will keep track of the right slide you link to even if you change its sequence order. Test your presentation frequently to double check that you’re hyperlinking the correct slides.
That’s it! You now have an interactive prorotype within your presentation.
Test it on an iPad !
If you’d like to test this prototype with users and see how they’d use it, you need to export it as QuickTime as shown below (This will prevent screens from automatically advancing if the user clicks a spot that’s not hyperlinked. You then open the prototype in QuickTime Player 7, and interact with it.
If you’d like to test the prototype on the iPad, you need to export the prototype as PDF, email it to yourself or put it in DropBox, then open it on the iPad. In the video above, I use GoodReader to show the PDF file.
Hint: Unfortunately, the Keynote iPad app does not support hyperlinked navigation, so if you open this keynote file on the iPad it will only advance sequentially. 
Bonus Hint: Keynote has an automatic tweening/animation feature called Magic Move. If you want to have fun by adding animated transitions, fading pop-ups in and out, you can do so by copying and pasting the shape across two slides, select both slides then selecting the effect as shown below. I found this feature to be unpredictable at times.
Final Words
Remember that a prototype doesn’t need to be perfect. It just needs to convey your idea better than your words do. Don’t over-engineer it, and don’t prematurely optimize it. Just put together something that users can see and play with. You will get many more insights than spending hours in focus groups, market research and surveys.
Next time you’re giving a pitch, remember to show more and talk less. If a picture is worth a thousand words, a prototype is worth a thousand pictures.
Creating prototypes is like doing magic: once you understand that all magic happens in the spectator’s mind, you can focus on bringing what matters to the audience. Everything else is a distraction.
If you think this tutorial is useful, or if you have any feedback or questions, leave me a comment below. I will do my best to reply to every single one of them.
