Advertisement
  1. Web Design
  2. Keynote
Webdesign

How to Demo an iOS Prototype in Keynote

by
Difficulty:IntermediateLength:MediumLanguages:
What You'll Be Creating

Modeling an up-and-coming app can be a very difficult task if you’re unfamiliar with professional animation software and techniques. Fortunately, Keynote delivers a very effective animation toolkit which isn’t too difficult to use. In this tutorial I will demonstrate how to use Keynote to prototype iOS UI animations; we’re going to build a map-based app demo. 

Note: Keynote version 6.6.2 was used in the making of this tutorial. 

Getting Started

Downloading Resources

First, you’ll want to find an iPhone mockup to show off your app demo. Most quality iPhone mockups are shape objects in PSD format, so they are scalable to whichever size is needed. Raw PSD files are not compatible with Keynote, however, a few alterations to the iPhone PSD will be needed for the demo to work properly.

Depending on the PSD, you’ll possibly need to rasterize and delete the necessary layers so only an iPhone “frame” remains. Delete the background image so it becomes transparent. Save the file as a PNG.

The iPhone mockup should look like this when its demo-ready
The iPhone mockup should look like this when it's demo-ready.

Aside from the iPhone, the only other resources you’ll need to keep on hand are maps, icon sets, and other images that you used in your app mockups. The rest of the UI elements will be recreated in Keynote in order to best ensure animations work properly.

Configuring the Keynote

Open Keynote. At the top of the Choose a Theme window, click Wide. This will create a slideshow with a widescreen aspect ratio, giving us a finished product which we can happily upload to Youtube in HD. Then, select the White template.

Select the White theme
Select the White theme.

In the Format panel to the right-hand side of the screen, click Change Master and select Blank.

Select the Blank layout from the Change Master drop-down.

Creating the Base Slide

Now, start creating the base slide. Insert the iPhone image either by dragging the PNG file into your Keynote or by clicking Insert > Choose… and finding the file in the Finder window that appears. Center the iPhone on the slide.

Next, insert a map image on the slide. Right-click on the image and select Send to back. This will create the illusion of an image inside the iPhone’s screen.

Right-click on the map and select Send to Back to create the illusion of an image inside the screen.

You will also want to add any UI element that would appear point-blank in your app. For my purposes, I added the search bar with a search query and a loading wheel, which I created using Keynote’s shape and text tools.

The completed base slide.

Putting it All Together

After creating the base slide, you may begin the framework of the animation in the slideshow. The most important thing to keep in mind at this stage is to tackle the major animations before dealing with the minor, detail-oriented ones.

Creating the Search and Pan Effect

To create the search and pan effect, duplicate the base slide by right-clicking on its thumbnail in the sidebar and selecting Duplicate.

Duplicate the base slide.

In the newly duplicated slide, delete the loading wheel by selecting it and pressing the Delete key. Next, shift the photo of the map so that the destination you are searching for appears in the upper half of the iPhone’s screen.

Insert the pin image into the Keynote and place it above the preferred destination. In the Format menu, add a Contact Shadow. Tweak the shadow to your liking. Then, Right-click on the pin and select Send to back. Do the same for the map image.

Add a contact shadow to the pin.

Duplicate this slide, and move it up to the second slide position. Take the pin and move it off the screen, keeping it directly above its original placement. This can be done most easily by pressing and holding the Up arrow key, or by altering the Y position in the Arrange panel of the Format menu.

Move the pin off the screen, keeping it directly above its intended position.

Commence Animating!

Now that everything is in place, you can begin animating. The most significant tool that will be used in doing this is the Magic Move animation, which creates smooth transitions for an element that appears on multiple slides. Magic Move will create the smooth pan and pin-drop effects we’re aiming for.

Return to Slide 1, and apply Magic Move by opening the Animate menu and clicking Add effect > Magic Move. Tick Fade Unmatched Objects. Select Match By Object. Set Acceleration to Ease In & Out. Set Start Transition to Automatically with a 0s Delay. Duration is up to your discretion—I set it to 1.50s for the pan.

Configure Magic Move animations.

Repeat this on Slide 2, but set the duration shorter than the previous slide. I set this one to 0.60s.

Tip: Test the durations by clicking the Preview button to help discern the desired animation length.

With Magic Move settled for this portion of the tutorial, return to Slide 1 to create the searching animations. Select the text on the slide. In the Build In panel of the Animate menu, click Add an effect. Select Typewriter from the drop-down menu, and set Duration & Direction to 0.60s and Forward.

Add a Build In animation to the text.

The Loading Wheel

The loading wheel requires a bit more animation to accurately portray one found in an app. First, add a Build In animation. Select Dissolve from the drop-down menu, and set its Duration to a quick speed, something along the lines of 0.20s.

Add a Build In animation to the loading wheel.

Next, open the Action panel and Add an Effect. Select Rotate from the drop-down menu. Select Ease Both from the Acceleration drop-down menu. I set Duration to 1.00s, and Angle & Rotation to a 359˚ Angle and 0 Rotations, but this can be altered to personal preference. 

Add an Action to the loading wheel.

Finally, open the Build Out panel and Add an Effect. Select Dissolve from the drop-down menu, and set its Duration to a quick speed, something along the lines of 0.30s.

Add a Build Out animation to the loading wheel.

Build Order

Once the animations are added, click the Build Order button at the bottom of the Animate menu. This will display the order in which all the animations on the current slide will play and can be used to automate the slide.

Click on the first animation, and select After Transition from the Start drop-down menu. Adjust Delay to your discretion—this will cause the animation to start automatically after a certain amount of time has elapsed. 

Selecting After Transition will start the animations automatically when presenting the Keynote
Selecting After Transition will start the animations automatically when presenting the Keynote.

Click on the second animation, and select With Build 1 from the Start drop-down menu. This will cause the loading wheel to build in while the typewriter animation plays. You may choose to add a slight delay by adjusting the time in the Delay field.

Set the Build In animation to start With Build 1
Set the Build In animation to start With Build 1

For the third animation, select After Build 2 from the Start drop-down menu, and set Delay to 0s. Repeat for the fourth animation.

Select After Build X from the drop-down menu for the successive animations
Select After Build X from the drop-down menu for the successive animations.

With that, the search and pan effect is completed. 

Creating the Information Panel Effect

The information panel effect is a bit trickier to create, but it polishes the demo nicely. On the third slide of the Keynote, use the shape and text tools to build an information panel with the width of the iPhone’s screen. Don’t add photos quite yet, but be sure to leave a space for them. Control-click to select all of the elements, right-click and select Group to combine the elements. This makes the information panel much easier to manipulate in animation.

Group the information panel elements
Group the information panel elements.

Next, insert three or four photos that you want to display in your demo. Resize them to fit height-wise in the gap you left on the information panel. Don’t worry if they don’t all fit on the panel—this is where animation will come in a bit.

Insert pictures you want to display
Insert pictures you want to display.

Control-click to select the information panel and the photos and group them. Move the group so the edges of the panel fall in line with the screen. On this slide, keep the information panel just below the iPhone’s screen so it isn’t visible. Then, right-click on the iPhone and select Bring to front. This will give the appearance of the information panel being displayed on the screen.

Align the panel with the edges of the phone
Align the panel with the edges of the phone. 

Duplicate the slide, and shift the panel higher up on the slide so that just the basic information about the location appears.

Shift the panel so just the basic location information peeks out from the bottom of the screen
Shift the panel so just the basic location information peeks out from the bottom of the screen.

Then, duplicate the slide, and shift the panel even higher, so the entire panel appears within the iPhone’s screen.

Create a duplicate of this slide. Then, right-click on the panel and select Ungroup. This should ungroup the photos while keeping the rest of the panel intact. Do not move any of the elements on the slide.

Ungroup the photos from the information panel
Ungroup the photos from the information panel.

Again, duplicate the slide, then shift the photos so that the last photo in the line finally appears on the screen. This is the last bit of framework that needs to be done before you may begin animating.

Shift the photos to the left so the last one appears on the screen
Shift the photos to the left so the last one appears on the screen.

Magic Move

Luckily, creating the animation for this effect is quite simple, as it relies solely on Magic Move.

Return to Slide 3, and select Add an Effect > Magic Move from the Animate menu. Make sure Fade Unmatched Objects is checked off, Match By Object, Acceleration is set to Ease In & Ease Out, and the transition starts Automatically with a 0s delay. Like the rest of the animations, Duration is to your discretion—I set it to 1.50s for the initial peek of the information panel.

Add Magic Move animations. 

Add Magic Move animations to Slides 4 and 6, keeping everything the same except for Duration, which can be altered to your liking. I set mine to 2.00s and 1.00s respectively.

Slide 5 should contain no animation, but be sure to make sure Start Transition is set to Automatically with a 0s delay for the demo to run smoothly. Slide 7 requires no animation as it is the last slide of the Keynote.

Set Start Transition to Automatically with a 0s delay
Set Start Transition to Automatically with a 0s delay.

And voila—there’s the information panel effect, completed.

Polishing Up

Once all of the content is in place and everything is animated as it should be, it’s time to clean up. 

The easiest way to do this is to create a background for the video. To do so, create four rectangles using the Shape tool which frame the iPhone but don’t overlap with the iPhone’s screen. Use the tools in the Format panel to make each of the boxes look identical to one another.

Create a background by framing the iPhone
Create a background by framing the iPhone.

Tip: A color fill that complements the colors reflected in your app works best for the background. Gradients and image fills tend to look messy and inconsistent. Avoid using shadows as well.

Select each of the boxes by control-clicking. Right-click on one of the selected boxes and click Group to create one shape. Then, click on the iPhone image to select it, right-click, and click Bring to front to create the image of a background behind the iPhone. Copy the background shape and paste it on each slide. Be sure to bring the iPhone to front on each slide to complete the effect.

The background adds finishing touches to the demo
The background adds finishing touches to the demo.

Recording the Demo

All that’s left to do is export the slideshow as a video. To do so, click File > Export To > QuickTime.

To export the video select File  Export To  Quicktime
To export the video, select File > Export To > Quicktime.

Set Playback to Slideshow Recording. Format determines quality of video, which can be set to your preference. Once you've configured these options to your liking, click Next to export your video.

Configure the export settings.

All work in Keynote is now complete. The recording can be used as-is or edited further in other applications, such as Final Cut or iMovie, if you want to add audio or other video elements.

Conclusion

In this tutorial, I instructed how to demo map animations for an iOS application in Keynote. Using Keynote’s Magic Move animation, you can create smooth animations modeling search-and-pan and information panel effects that can be found in a map-based iOS application. 

If you have any further questions or concerns, or would like to see what other types of animations that can be modeled in Keynote, feel free to leave a comment down below!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.