Prototyping Animation with Keynote

Andrew Cohen
Jan 30, 2017 · 6 min read

One look on Dribbble, and you’ll notice the abundance of animations that emphasize interaction. The increasing number of devices, screens, and use cases have required designers to think of new ways to improve the usability of applications. Animation can be a tool for solving these problems. A simple effect can help a user transition between screens, and understand a cohesive experience across an ecosystem of devices. A well-designed animation guides users to the most crucial areas of the product, and is just plain delightful!

I have always found myself envious of those who are able to bring life to their interfaces in After Effects. The detail and delight made me wish I could harness the clunky interface, but it never worked out for me. Recently, there has been an influx of applications that focus on being simplified tools that allow us to get the job done. Programs like Sketch, Pixate, Invision, and Flinto are a few examples. We’re no longer stuck having to use the sledgehammer when a ball-peen hammer is needed. We can choose the tools that fit our workflow best and allow us to get tasks done faster.

Really Keynote

This brings me to my new favorite animation program, Keynote. Yes Keynote, the prettier Apple version of PowerPoint. Keynote has been spoken about in the past as a great tool for creating wireframes and prototypes, but not much for animation. I love Keynote because it’s fast, free, easy to learn, and it works.

Image for post
Image for post

Recently Andrew Haskin of Frog Design recreated Google’s Material Design Video in Keynote. I was impressed with his ability to recreate complex animations in what seemed like a very simple program. Using his Keynote file as a guideline, I dug in to the mechanics and mastered animating in Keynote in roughly an hour.

Keep it Simple

Animation and motion can be very daunting. Many designers have a background that has made us very familiar with static layouts. For those first approaching animation, it’s easy to get overwhelmed. The most basic tool in your belt is the most powerful one, your pen. Start simple by sketching out ideas around your beginning state, your end state, and how you think content should animate in a logical fashion.

It is easy to go overboard with animation — think about the Flash days. Remember animation is a tool to create a seamless experience, not the experience itself. Look for ways you can guide users’ eyes to key interaction points or showcase the most important aspects of the interface. In the end, don’t overcomplicate to make things pretty.

Get Set Up

So your animation is planned, and you’re ready to push pixels.

Image for post
Image for post
  1. Fire up Keynote and create a blank slideshow.

Let’s Animate Something Basic

Now you’re ready to animate and should have a good idea of what you’re trying to achieve.

Image for post
Image for post
  1. Select the first object you want animated and head to the Animate palette in the top right. Keynote was created for slideshows, so the palette will reflect that with three options. When hunting down a specific effect, I find it helps to think of my animation as three key steps: building in (fade in), do something (action), building out (fade out). Animate Tab
Image for post
Image for post

Magic Move

Magic Move is probably the most effective and well… magical thing about animating in Keynote. It is a transition effect that animates objects from one slide to their positions on the next. It will then fill the gaps on the things you want by moving, fading, scaling, etc. So let’s give it a whirl.

Image for post
Image for post
  1. Take the slide you currently have and duplicate it. One of the slides will exist as the first state and the second as the final state. You want to make sure the objects you want to change exist in both slides.

Combine Them

Now that you’ve done basic animation effects on a single slide and played with magic move by combining two slides, you can move into animating your entire experience. There are tons of ways to build animations in Keynote, and there is no wrong way to do it. A great rule of thumb, is to try and link as many animations for a single screen in the build order palette. Then, when it comes to an entirely new screen, you create a new slide and continue from there. Magic Move is a great solution for a large amount of the transitions out there, but it is easy to go overboard. Fine tuning each step of the animation through build order and timing offers the most control.

Closing

Once you’re done, you can easily export your animation to a Quicktime .mov for sharing. In the end, it’s all about experimenting and seeing what works for you. Keynote wasn’t built for prototyping animation, so at times you’ll see some shortcomings, but overall it’s simple, powerful, and fast.

Lastly, I’ve attached an animation I recently did for our client, Martial Codex. Keynote has helped me convey the animations to our developers as we design and build out the Android app. Take a look, mess with my file, and you’ll quickly see it’s not that hard to get rolling in Keynote.

Download Martial Codex Animation


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store