How to create an iPhone app prototype in 13 minutes using Apple Keynote [Video Tutorial]



After posting the previous tutorial on prototyping an iPad app in 30 minutes , I was asked by several peeps to put together a video tutorial on how I’d create an iPhone app prototype using the same technique:

  • No design tools
  • Zero lines of code
  • Prototype can be tested on the iPhone
  • All created under 30 minutes

The video below shows how to use Apple Keynote and Keynotopia interface libraries to create a prototype for an iPhone apartment hunting application in 13 minutes.


The video goes through the same steps from the iPad post:

1- Create a new presentation based on the iPhone template (480×960 resolution)

2- Create main application screens

3- Add pop-ups,  highlights, etc…

4- Create hyperlinks to make the interface clickable

5- Export as a PDF file and test on the iPhone (I use the free version of GoodReader to render the final prototype)

And here are some of the UI controls used in the video (courtesy of Keynotopia).

Note: The UI controls are available in both Keynote and Powerpoint formats.

Give it a try, I guarantee it will dramatically improve your productivity. And if you have any questions, leave me a comment below.

Related posts:



I highly recommend Keynotopia for designing interface mockups for web and mobile apps

Keynotopia is a user interface design toolkit that enables you to use Apple Keynote or Microsoft PowerPoint to prototype, test and demo your application ideas quickly and cheaply, without doing any design work or writing a single line of code.

It includes thousands of wireframe and high fidelity vector user interface components and royalty free icons for mobile, web and desktop apps, all designed from scratch in Keynote and PowerPoint, and can be edited and customized without needing any design tools.

Keynotopia is used by 40,000 entrepreneurs, designers, and developers in more than 80 countries.

1 Comment

  1. Interestingly when you do File -> Save As, and then choose PDF, this doesn’t create a PDF with active hyperlinks when viewed in GoodReader. I have the same experience when saving PowerPoint files with the Save As method (no active hyperlinks). Any idea how to get the hyperlinks active using PowerPoint?? There is no “Export” option in the PowerPoint menu from what I can see…

    Reply

Trackbacks/Pingbacks

  1. How to prototype iPad applications in 30 minutes or less using Apple keynote | Amir Khella - [...] I am almost done with the iPhone prototyping toolkit for Keynote. Here is a sneak peek*** [...]
  2. Keynote SLAM Reflection | HCID Prototyping Class - [...] by arguments for and resources John Wayne Hill presented regarding rapid prototyping with Apple Keynote, I wanted to design …

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>