Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

How To Prototype UI Animations In Keynote

Whether it’s playful refresh states, subtle icon movements or complex transitions, beautiful animation is all around us. Once considered an aesthetic luxury, animation is now used so commonly in modern web and mobile applications that entire1 websites2 are dedicated to UI animation patterns.

Further reading on Smashing: Link

While animations may have great visual appeal, they also make app experiences more intuitive and engaging. Animation can make an app feel more fluid and responsive by providing feedback on user interaction. This means that, for designers, creating authentic animations is increasingly becoming a part of the job description.

The Right Tool For The Job Link

Traditionally, designers have had to learn complex animation tools from scratch to produce even the simplest of motion graphics. In recent years, a slew of software has come out vying for the attention of prototypers and motion designers, such as Framer10, Origami11 and Pixate12, not to mention the old classics such as Adobe After Effects.

However, I found them all to be a bit of overkill for what I was trying to achieve. As a UI designer, I needed a rapid, easy-to-learn, familiar tool to animate my static designs. I needed to produce animations quickly, since my team was iterating quickly on a product we were working on. I also didn’t want to learn an entirely new software paradigm. A bonus would be a tool that integrates nicely in my existing static design workflow (I generally use Sketch and Photoshop).

In my quest to find a tool that is more suitable to these needs, I stumbled upon one that has been on my computer all along — Apple’s Keynote.

Keynote? Link

Most people know Apple’s Keynote as the PowerPoint equivalent on Mac OS X — presentation software. That is true, but it can also be used to produce surprisingly high-fidelity animations and prototypes. In fact, many employees at companies such as Google and Apple use Keynote13 on a daily basis for UI design, animation and prototyping.

Last year, Andrew Haskin, interaction designer at Frog, showed us just how powerful Keynote could be when he recreated Google’s material design animations entirely in Keynote.

Learning Keynote Link

Andrew’s video really piqued my interest in Keynote, and in the past year I’ve used the software to recreate many interactions seen in major apps, including Facebook Paper, Uber, Tinder, Snapchat and more. You can see a reel of that below.

Keynote is fairly easy to pick up, because most people have used some sort of presentation software in their life. It is very much like PowerPoint if you’re familiar with it, so the interface is recognizable and you will immediately understand how to create and edit slides.

One of my favorite aspects of animating in Keynote is that it is straight to the point — there is no code, complicated timelines with keyframes or unnecessary functionality for designers.

The major legwork of the animation is done with Keynote’s “Magic Move” transition effect. With Magic Move, all you need is a beginning and end slide, and you can edit any number of properties between them (scale, position, rotation, etc). Keynote takes care of the rest by intelligently filling in the gaps, creating a seamless transition from one slide to the next.

Magic Move saves a ton of time, and complex animations that would have taken much longer in other tools take seconds with Keynote.

Overall Workflow Link

To demonstrate how to use Keynote, I’ll recreate a very simple interaction model popularized by Tinder: the left and right swipe animation. Download the assets for this project14 (link fixed!) (ZIP, 360 KB).

The basic idea is to create the first screen of the animation (beginning) and the last screen of the animation (end). Keynote will intelligently take care of the rest with the Magic Move transition.

Set Up the Document Link

Open a blank white presentation. By default, Keynote will create a presentation-sized document (1024×768px). Let’s change that to more of an iPhone-sized document.

Go to the “Document” tab in the top right. Under the section “Slide Size,” go to “Custom Slide Size,” and make the size 350 (width) × 667 (height) pixels.

The “Custom Slide Size” in the “Document” menu15
Select the “Custom Slide Size” in the “Document” menu, and change it to 350 × 667. (View large version16)

Now, let’s import the images. This step is as simple as dragging the image files from your folder onto Keynote’s canvas.

First Slide Link

Once you’ve dragged your assets over, you can position them visually. Keynote has useful guidelines that appear contextually, helping you to align the design.

Keynote will assign a z-index to each asset according to when it was imported — it doesn’t have a layers panel. In case you need to change the ordering of the stack, all you have to do is select the asset and right-click (Cmd + click) to bring up the menu, then select “Bring to Front.”

Menu when selecting an asset17
Menu when selecting an asset. (View large version18)

If you want to lay out assets with pixel-perfect values, rather than by eye, go to the “Format” → “Align” section and input exact numerical values.

Arrange menu19
Arrange menu. (View large version20)

End Slide Link

The second screen will be the last frame of the animation. Rotate the top image and position it off screen — this will be the end position.

The first thing to do is duplicate the first slide we’ve been working with. In the left-hand panel, right-click and select “Duplicate” in the menu.

Right-click or use Control + click to bring up the menu to duplicate.21
Right-click or use Control + click to bring up the menu to duplicate. (View large version22)

Let’s begin by rotating the top asset. To rotate, hold down Cmd, and a rotated-arrow icon will appear in the corner of the selected asset. Then, click and drag to rotate.


Now, position the tile off screen.

Move the asset to its final position23
Move the asset to its final position. (View large version24)

Magic Move Link

Now that we have the start and end positions, let’s animate this.

Select the first slide, and go to the “Animate” tab on the left. Under “Transitions,” select “Add an Effect” and choose “Magic Move” in the dropdown.

The Magic Move transition effect in the “Animate” menu25
Select the Magic Move transition effect in the “Animate” menu. (View large version26)

Magic Move is a transition effect that moves an object from a position on one slide to a new position on the next slide. It intelligently fills the gaps between the slides by moving, fading and scaling the object.

Timing and Acceleration Link

Magic Move has only two settings, duration and acceleration, which really help your animation look the best it can.

Duration is self-explanatory — it refers to timing, and the correct value is determined case by case. I find that the sweet spot for UI animation is usually somewhere between 0.7 and 1.5 seconds.

The acceleration section has four options:


Demonstration of the various animation types.
  • “none”: Same speed throughout the animation
  • “ease out”: Starts slow, then speeds up
  • “ease out”: Starts fast, then slows down
  • “ease out and ease in”: Starts slow, speeds up, then slows down again

For our example, I am using 0.90 seconds for the duration, and “ease in and ease out” for the acceleration setting.

Magic Move settings27
Magic Move settings. (View large version28)

Our Animation Link

Below is the final animation, with some added effects. You can download the Keynote file29 (ZIP) to see how the rest was done.

What Else Is Possible? Link

Obviously it’s a very, very simple example. We’ve just scratched the surface of what can be done in Keynote. Magic Move is the simplest of techniques. For more finesse, you can use Keynote’s build ins and build outs.

Build Ins and Build Outs Link

Build in refers to how an object appears for the first time, and build out refers to how an animation leaves the screen. These are both object-based animations, rather than slide-based (like Magic Move). In other words, every asset can have its own independent animation.

For example, if you want an animation to scale in and bounce a bit, you would use a build-in effect called “Pop.” If you want the object to fade out, you would use the build-out effect “Dissolve.”

To apply a build-in or build-out effect, select any object on the screen and go to the “Animate” tab. There should be three sections: “Build In,” “Actions” and “Build Out.”

Accessing the build-in section.
30
Accessing the build-in section. (View large version31)

Build-in animations have a number of options. I use only a handful for UI design most of the time:

Complicated animations can have many build ins and build outs, and timing when each one appears is important. To do this, open the “Build Order” menu at the bottom of the “Animate” tab, and adjust the timing in the menu.

Build order menu32
Build order menu. (View large version33)

Sketch and Photoshop Integration Link

Keynote integrates in my design workflow nicely. Importing from Photoshop, Sketch or Illustrator is as simple as copying and pasting into Keynote. I often design in Sketch and copy and paste over to Keynote to quickly infuse some motion into my static mockups.

A few tips. Copy and paste layer by layer, or else Keynote will combine them, which you don’t want in most cases, especially if you’re animating individual pieces.

Also, if you copy and paste text, it will not retain its text properties, and you will not be able to edit it anymore. When dealing with text, make sure that your copy has been finalized or that you are able to recreate the text in Keynote.

Prototypes on Device Link

You can also create a prototype and put it on your device using the Keynote app for iOS. It’s as simple as using the “Adding Links” tool to link to different slides in a presentation. Below is an example of an app designed, animated and prototyped in Keynote.

When sharing prototypes with clients and stakeholders, you can export them as HTML and they will be clickable in a browser. Note that the code will not be production-ready; the design will have to be recreated for the final product.

Exporting to HTML from Keynote34
Exporting to HTML from Keynote. (View large version35)

Conclusion Link

Whether you’re a designer, product manager, developer or anyone else working on a product, Keynote is a great way to communicate ideas quickly. The speed, gentle learning curve and quality of output all make it an ideal tool for your arsenal.

To recap, Magic Move is the simplest and quickest of animation types in Keynote; it is used between slides to animate from a beginning state to an end state. Build ins, actions and build outs are used on individual objects in a slide; they control how things are presented for the first time and how they leave the screen.

With enough practice, you can do virtually any type of animation in Keynote. Many other36 examples37 show Keynote being used to create high-fidelity animations.

Keynote comes free with Mac OS X Yosemite and above. Give it a try, and happy animating!

(da, ml, al)

Footnotes Link

  1. 1 http://capptivate.co/
  2. 2 http://uigifs.com/
  3. 3 https://www.smashingmagazine.com/2015/12/animating-clipped-elements-svg/
  4. 4 https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/
  5. 5 https://www.smashingmagazine.com/2014/11/the-state-of-animation-2014/
  6. 6 https://www.smashingmagazine.com/2015/06/practical-techniques-on-designing-animation/
  7. 7 https://www.smashingmagazine.com/2011/10/quick-look-math-animations-javascript/
  8. 8 https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/
  9. 9 https://www.smashingmagazine.com/2015/06/creating-advanced-animations-in-photoshop/
  10. 10 http://framerjs.com/
  11. 11 https://facebook.github.io/origami/
  12. 12 http://www.pixate.com/
  13. 13 https://developer.apple.com/videos/wwdc/2014/#223
  14. 14 http://provide.smashingmagazine.com/2015-08_animating-in-keynote.zip
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/07/01-document-size-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/07/01-document-size-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/07/02-bring-front-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/07/02-bring-front-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/07/03-format-arrange-opt.png
  20. 20 //www.smashingmagazine.com/wp-content/uploads/2015/07/03-format-arrange-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2015/07/04-duplicate-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/07/04-duplicate-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/07/05-final-position-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/07/05-final-position-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2015/07/06-magic-move-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2015/07/06-magic-move-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/07/07-magic-move-settings-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/07/07-magic-move-settings-opt.png
  29. 29 https://www.dropbox.com/s/aebcpokvto659eg/Tinder%20-%20Design%20%2B%20Animation.key?dl=0
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/07/08-build-in-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2015/07/08-build-in-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2015/07/09-build-order-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2015/07/09-build-order-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2015/07/10-html-export-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2015/07/10-html-export-opt.png
  36. 36 https://vimeo.com/129807396
  37. 37 http://www.elizabethylin.com/khan/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Hamza Siddiqui is a designer based in the Bay Area. Currently, he leads the team at uxtree, a continuing education platform for UX designers, that has trained over 1000 designers including employees from Google, Spotify, Huge, and more. Prior to that, he worked at Adobe as an in-house mobile designer.

  1. 1

    There is something REALLY IMPORTANT to keep in mind when prototyping with Keynote, ESPECIALLY when you are doing a demo on an iPhone:

    Keynote for iOS will open your Keynote for Mac files, and you can demo them on your iPhone or iPad (and probably Apple Watch soon), BUT to make the demo believable on your iPhone, YOU HAVE TO ROTATE THE KEYNOTE FILE 90° so it appears correctly on your iPhone.

    You have to design your Keynote file in a rotated view – I usually do two versions: one normal and one rotated -90° that I can demo on my iPhone. I really wish Apple would fix this – it is one of the big pain points of Prototyping with Keynote… that, and no support for gestures – you have to fake your gestures when doing demo.

    11
    • 2

      I do not know if images are allowed, but here are a few screen captures that illustrate what I was talking about above. These are from a prototyping session I did at Geekend in 2014 – this is Facebook Paper, rebuilt and functioning in Keynote for iOS:

      Example 01: Keynote Workspace (when building for iOS)
      http://chsweb.me/ss-fbPaper-keynote (screenshot)

      Example 02: Keynote Workspace Zoomed Out
      http://chsweb.me/ss-fbPaper-keynote2 (screenshot)

      2
    • 3

      Yep, thanks for pointing this out. Unfortunately they haven’t fixed the rotation problem yet, but there are scripts that will auto-rotate your documents for you

      Here is the one I use:
      https://gist.github.com/ericallam/a5cd76651c327b116a6e

      0
    • 4

      Spot on! When I was reading the article, I was like ‘Wait, did Apple finally fixed that rotation issue on iOS?’ since the writer mentioned that it was very simple to export the prototype and *put it on your device* without mentioning how he manage to do that without doing the 90 degree rotation. I hope Hamza would provide a little more details on this if he found some way to export it to work correctly on iOS.

      2
  2. 5

    Hi Hamza,

    The link to download your assets file (ZIP) is broken. Looks like there’s a space between ‘in’ and ‘keynote’ that could be the culprit.

    0
  3. 7

    Surprised Keynotopia wasn’t mentioned – great tool to help with wireframing in Keynote – http://keynotopia.com/

    2
  4. 8

    Hi, I’m a Windows user. Any suggestions on what I can use besides KeyNote?

    3
  5. 9

    I design websites for desktops (not mobile) on Keynote and would love to know what custom slide size people find most useful. Now I use 1920 x 4000 to maximize vertical length, but this gives quite a narrow width. Can anyone provide me some guidelines on this?

    0
  6. 10

    I got all excited at the idea of having Keynote again–at no charge–as I recently upgraded to Yosemite on one of my machines. On investigation, however, it seems that this works for NEW purchases that come with Yosemite installed, not just by upgrading.

    I’d love to be wrong, though.

    0
    • 11

      You are right, only newer computers have KeyNote for free. I have a 2011 Mac with Yosemite and must pay if I want it.

      0
  7. 12

    Hello,

    I’ve tried several times to export my keynote animations in HTML but sometimes the animations are not functioning…

    Do you have any solution to that problem ?

    1
  8. 13
  9. 14

    i haven’t done much prototyping with that tool recently but as far as I remember the problem I always encountered is that one has to chronologically build the animations one wants to demonstrate, meaning it would not be possible to jump up and down through the slide deck, demonstrating those animations that the tester clicks.

    Correct or have it gotten something wrong back then? Thx

    1
  10. 15

    Very helpful article, and thanks for introducing us to Brock Berrigan through your video ;)

    0
  11. 16

    This was so unbelievably helpful, thank you! I wasted my morning struggling with swfs in InDesign until I found this article. :)

    0

↑ Back to top