Using Keynote For App Mockups

Using Keynote For App Mockups

How to prototype an app using Keynote and an iPhone

Written up for my own reference really.

This is how I built a rough interaction prototype for a simple mobile app concept using Keynote on a Mac and an iPhone.

1. Set up the slide size to your target mobile screen. For my iPhone 5S this was 320 x 568 (logical resolution from here). In Keynote, select the "Document" tab/panel > Slide size > Custom
2. Mock up the prototype with a slide for each screen or interaction that changes something. To show interactions and changes you will move between these slides using links.
3. Make your buttons or controls. If your button/control is made of several objects then group them together. You could also add an invisible filled square behind it to make the touch target larger. This is also needed if the button shape has a hole in it!
4. To activate the button or control, select the object and control-click to select "Add link". Choose "Link to Slide" and then choose previous, next or a particular slide — whichever slide this interaction should move to.
5. Finally, go back to the Document tab and choose Presentation Type as "Links Only". This will stop the presentation advancing when clicking/tapping elsewhere on the slide.
6. I found the easiest way to get in onto my phone was to save to iCloud and then open this in Keynote on the phone. Hit play and you've got what looks like a working prototype on your phone.

I've yet to explore whether you can do all of this from Keynote on the phone itself.

The simple six slide prototype

Using Keynote For App Mockups

Source: https://blog.prototypr.io/how-to-prototype-an-app-using-keynote-and-an-iphone-367ef725ad45