To begin by sketching on paper, download and print some of these useful sketching templates for iPhone, Android, iPad and web browsers provided by Smashing Magazine
POP Prototyping on Paper by Woomoo: free. Photograph your iphone sketch and make it interactive and viewable on your phone.
Aurasma app by Aurasma: Tag items to reveal content on your phone when scanned.
Keynotopia Tutorials
Good basic explanation of how Keynote works
Quick guide to prototyping in Keynote
Keynotopia is a collection of images useful for prototyping mobile apps and iPad apps. You can also use it to prototype websites. Prototyping in Keynote is similar to InDesign. You can create hyperlinks to buttons that move between slides. You can create simple animation to suggest, for example, someone enlarging an area of the screen. You can use page transition to simulate the slide motion of a mobile app. All of these options are found under the “inspector” icon at the top right of the tool bar.
Helen’s Keynote Quick Reference page from lecture: Keynote_Diagram
You can import imagery into keynote from photoshop or Illustrator. Once you finish your prototype, you can email to yourself as a pdf and then view it through Goodreader to simulate how the the app would feel on the actual device. (I’m still having trouble getting animation to work in the pdf, but I’m working on it)
Cropping in Keynote
To crop an image in Keynote, go to Format > Mask and then adjust as needed.
Some Random Things:
—iPhone keynotopia theme is the iPhone background file
—Inspector (Under Show in the nav menu) is the main palette for adding interactivity to your file
—Option drag to copy items
—Export as pdf for best results
—Use animation build palette to simulate scaling up and down and sliding. Animation needs to be really simple to work here. 
— Need to view pdfs in an app like GoodReader to make them work well on an iphone or ipad. Also, you can’t set up animation on click. It has to be on the opening of the screen or page.
—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


Leave a Comment