How to create a fake app or website with Keynote?

Responsive Website Application
Hybrid App
Android App
Apple App
Other techniques

Img 1340
Author: Bas Plasschaert

I'm a full stack Ruby-on-Rails developer, specialized in prototyping and creating Proof of Conversion. I would like to help you create the first proof of your vision, to make it easier for you to convince others.

Proof of conversion.002

There are many paid tools which help you create a prototype for your non-existing App or Online Application. But did you know that you probably already have a powerful (free) tool to do the exact same thing? I use Keynote (or Powerpoint) to create my first design and navigation ideas for a new project.


Most of us are probably using keynote in a classic way: whenever you press Enter, Space or the right-arrow the next slide of your slide deck will be shown (with or without animation). When you click on the document-settings icon (upper right corner) you will see the setting "Presentation Type". The default setting is "Normal". Besides that setting, you can also set the presentation in a "Self-Playing" mode and also in a "Links Only" mode. With this last mode, the presentation will only move to a next slide when you click on an object that is linked. The beauty of this is that you can determine to which slide it should move!

Linking Objects

You can add a link to any selectable object in your presentation. Just right-click (or Ctrl-left-click) on any object and select "Add Link". You should then select "Slide". In the popup menu, you can select the bottom-option and enter the number of the slide you want it to be linked to.
Now when you start the presentation in "Links Only" mode, it will only go to another slide when you click one of the linked objects!

Using Screenshots

In all of my App-simulations, I always add a home screen and in some cases screen-images that were created with other programs. In the case of the home screen, I just make a screenshot of my homepage and add it as my first slide.

Linking Transparent Boxes

So how do we link an icon within an imported screenshot to a specific slide? It's simple: create a Square-shape and give it transparency. You can do this by first create your square (Shapes > Square) and then go to its Format-settings (left button in the upper-right corner) and set the Fill-setting to "No Fill". Also, make sure that the border and shadow are turned off. Then just resize the shape to the proper size and place it over the part of the screenshot that you want to be clickable. As a final step you only have to add a link to the proper slide to it (right-click > Add Link > Slide).

And with these simple tricks, you can create almost any functional App or Online Application navigation. Create it, press play and enjoy your new (fake) App!