Developing a lightweight prototype/mockup is a crucial step in the iOS app development process. Using your iOS device plus Keynote allows almost anyone to create a clickable high-fidelity prototype in under 30 minutes.

As an example for this post I’m going to create a Hot or Not for YouTube videos. Basically users are shown YouTube videos randomly and can quickly cycle through videos until they find the video they want to watch.

Here are the steps you needs to take in order to create a clickable iOS prototype.

1) Take screenshots of your favorite iOS apps.

2) Insert these iOS screenshots into Keynote.

Go to “Insert” > “Choose” then select the screenshots.

3) Make a core iPhone slide that you can continually duplicate.

Your screenshots will be in front of the iPhone. We add the iPhone to make the mockup more realistic.

4) Now start using Keynote to mask, chop, edit, and remix the iOS screenshots.

The primary Keynote features you will be using are the Inspector for color matching, the Mask tool for cropping, and the Alpha tool to remove backgrounds etc. You can also take additional screenshots on your OS X machine of specific parts of the iOS screenshot and insert them into Keynote (instead of cropping/masking everytime). Sometimes this is faster and cleaner. Make sure to mockup each screen on a different slide so that you can use the full real estate and leverage Keynote’s hyperlink feature.

5) Now that you have everything mocked up. Go to the inspector and use the hyperlink feature.

(In this example I created a transparent shape to allow me to hyperlink a specific part of the screen. Almost any Keynote element can be hyperlinked to another slide within the presentation.)

6) Sync it up!

Once all the associated hyperlinks are setup you should have a clickable iOS prototype. See the short video below.

This is a guest post written by Matt Smith. Matt runs partnerships for StackSocial. StackSocial offers exclusive promotions on mac bundles and other Apple related products.