Design

Animating your UI designs in Keynote in 7 simple steps

by

on

View all posts

Motion in UI design isn’t new—but it’s definitely the next thing you should be getting familiar with. The future’s bright for those who can design and guide people with motion.

To get you started, I’ll show you how to mock up the animation in the video below using Apple’s Keynote. Along the way, we’ll cover principles you can use to create custom interactions that’ll add a whole new level of fidelity and interactivity to your prototypes.

Want to follow along? Download the source files.



Step 1: Design your beginning and end states

Animations in user interface design have a beginning, middle, and end. Since the middle’s where all the action happens, you’ll want to start designing your animations with their beginnings and ends. And that’ll usually happen in your favorite design program, be it Photoshop, Illustrator, or Sketch.

keynote-animation_0000_1

While you’re designing, identify which elements will move or change in your animation and export them individually. Then export everything else in a single base layer.

Here’s how that works with our design. Since the blue background layers (including the header bar) don’t change in the animation, you’ll export each of them as their own asset, and save out everything else separately.

layers3

Step 2: Fire up Keynote

Open a new blank Keynote file, click Document in the top right corner, and change your slide size to a mobile screen size, like 750×1334 for an iPhone 6.

keynote-animation_0001_2

Step 3: Position your assets

Now drop in your images and set up your screen to represent your interaction’s beginning state. If an asset gets in your way or isn’t part of the beginning state, just drag it off the canvas for now—you’ll animate it on to the canvas shortly.

keynote-animation_0002_3

Step 4: Start animating

To animate an object, select it, then click Animate, then Action, and add a Move animation.

Keynote will automatically add a 50% opacity layer next to your current one—it represents the “after” state of the object. Drag and position it somewhere else to create an animation.

keynote-animation_0003_4

Click Preview to see how it looks, then tweak your duration and acceleration settings till it works like you want it to.

Then just repeat the steps above for each part of your design. And feel free to experiment with the other animation options in the Action panel.

Because you’ll be animating several objects at once, you’ll want to click the Build Order button at the bottom of the Animation panel to give you more control over the animation sequence.

Step 5: Perfect your build order

Things will probably look a little weird, slow, and clunky until you address the build order. When creating this type of animation, you want things to be happening at pretty much the same time, which is where this panel really comes in handy.

keynote-animation_0004_5

See the With Build 2 option above? Set all your animations to happen “with” the original animation to create a smooth sequence. If some animations need more time to trigger, you can play with the Delay.

Step 6: Export your animation as a video

To add the animation to your prototypes, shoot it to Dribbble, or use it somewhere else online, we’ll need to turn it into a video, then a GIF.

Go to File > Export to > QuickTime, then change the format to Custom and type the width of your design. Keynote should get the picture and fill in the height for you.

You’ll also want to change the compression to Apple ProRes 422. Otherwise, you’ll have some color differences from your original designs.

keynote-animation_0005_6

Step 7: Convert the video to a GIF, then drop it in InVision

I’ve already written at length about optimizing your GIFs from video, so I’ll keep this short.

Open up Photoshop, go to File > Import > Video Frames to Layers… and pick the video file Keynote just created.

Then go to File > Save for Web… and export it as a GIF. If you plan to use this in a prototype, set the looping options to play only once, instead of forever.

And boom. Now you’ve got a prototype-ready animation to wow clients and stakeholders with.

But wait, what about Magic Move?

Keynote has a really neat feature called Magic Move that tracks an object’s changes across multiple slides.

So if your “beginning” slide contains everything you need to create the “end” slide, just duplicate that slide and rearrange the elements to represent the “end” state.

After that, return to your “beginning” slide, click Animate and add Magic Move as the page transition.

keynote-animation_0006_7

Depending on how complex or detailed your animation is, Magic Move might be a great choice, but here’s a comparison of how it worked out for my animation.

sidebyside

That’s all for now, but be sure to tune in for part 2 of this series, when we’ll look at creating animations using ScreenFlow!

P.S. We’d love to see what you come up with when you put these tips to use! Shoot us a link to your prototype on Twitter at @InVisionApp. Who knows, we might just retweet you!

Author

Andy Orsow
Designer and product marketer at InVision, resident GIF-ologist and video maker.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.