Home

Keynote Prototype

Design a Simple App

Keynote Prototype

In Keynote, create a prototype of your app.

Estimated time to complete this tutorial:

40 mins

Create your Keynote prototype.

Use the blank slide provided in the Keynote Prototype section of the project presentation Keynote to make your prototype. Duplicate the slide if needed.

Explore Keynote tools.

Learn about the following features of Keynote that you might want to use in your app. Each section uses the Affirmations app as an example.

Add elements.

Add text, lines and shapes.

Step 1

To add text, lines or shapes, tap Shapes and choose an element.

Step 2

Tap Media to add images, audio, drawings or video.

Step 3

To resize a shape or image, drag the blue corners to the desired location.

Step 4

Double-tap on a shape to add text.

Step 5

Add all the elements for your app and size them correctly.

Consider titles, images and buttons.

Add colour.

Edit the colour and transparency of elements in your prototype.

Step 1

Show the slide navigator.

Step 2

Change the background by selecting the slide and tap Format .

Step 3

Tap Background and choose a colour, gradient or image.

Step 4

Tap Dynamic to add a moving background.

Step 5

Change the colour of a shape.

Tap the shape or multiple shapes, tap Format, then tap Fill.

Step 6

Use the opacity slider to adjust the transparency of an element.

Select the element, tap Format, and slide the opacity slider to the desired transparency.

Step 7

Use the provided controls to edit the text style.

Tap to select the text, tap Format, then tap Text.

Step 8

Continue editing the design of your prototype until you’re proud of it.

Make elements interactive.

Make your app prototype interactive by adding links between slides.

Step 1

Decide if your app needs any transitions or interactivity.

Tip

To make your prototype interactive, use multiple slides to add or change elements.

Step 2

To add a slide, tap the slide, then tap Duplicate.

Step 3

To create a link, select the element, then select Link.

Step 4

Decide where the link should go. You can link to a slide, a webpage, an email or a phone number.

Tip

To make your prototype behave like an app, only allow navigation via links.

Step 5

To select a presentation type, tap the name of your presentation, tap Presentation Options, then tap Presentation Type.

Step 6

Tap Links Only.

Step 7

Continue making slides and links until your app is complete. Tap Play and test the links as you add them.

Step 8

Tap Play and follow all possible paths through your app. Are there any dead ends? If so, add a link to ensure your user never gets stuck.

Add animations.

Use animations to add, enhance or remove elements.

Step 1

To add an animation, tap the element you want to animate and select Animate.

Step 2

Explore the different animation options.

Add Build In adds the element to the screen.

Add Action performs an action.

Add Build Out removes the element from the screen.

Step 3

Try the different animations from the menu to see what fits.

Tap Back when you’re done.

Step 4

Tap on your animation and adjust the settings to your liking, then tap Done.

Tip

If you’re using the Links Only presentation type, animations will only play consecutively after a transition.

Step 5

Tap Build Order to edit the build settings.

Step 6

On the first animation, tap After Transition.

Step 7

On all other animations, tap After Build.

Step 8

Tap Preview to test your animations. Continue editing until your app looks and functions correctly.

Up next: