Collection No 1


Google’s Material Design Video Recreated in Keynote

During this year’s annual I/O conference, Google revealed Material Design, a responsive design language that aims to unify all their products, platforms, and devices.

Google’s promotional video amplifies the compelling theory of a rationalized space and system of motion found in Material. Videos like this are common in the industry, and are often made using Adobe After Effects — a very powerful video, motion graphics, and compositing application. As an interaction designer working at frog, I am tasked with communicating to clients how a system works and what an application looks and feels like. Producing a high fidelity animated video like the one Google created for Material is certainly a possibility, but it often requires additional time, scoping, and resources. Instead, I use Keynote because you can tell the same story just as effectively in much less time.

Many people underestimate the capability of Keynote (now free with OS X Mavericks), and reduce it as Apple’s alternative to PowerPoint. In my work, I have used it for so much more than a slide show presentation tool. To help me understand its limits, I took it on as a challenge to recreate Google’s Material Design video using Keynote.

The animations produced in Keynote may not reach the fidelity of those made in After Effects, but for the time and effort saved, it’s certainly close and definitely communicates the idea. I’m constantly debating what the best and hottest new design tools are with my peers. I’ve tried many, but in the end, I still keep coming back to Keynote. It’s easy to learn and use, swapping assets is a breeze (with media placeholder), and most complex animations can be created with the Magic Move slide transition (the secret to it all). Producing animations can span a range of fidelities; I can produce all the assets in Keynote, or I can copy out of Illustrator or drag and drop from Sketch (how seamless this works puts a smile on my face every time). As an interaction or visual designer, if you’re not using Keynote to bring your work to life, then I hope you’re inspired to try it now.

Note: The photos and text you see in the Keynote version are screen grabs from the original video. I didn’t reproduce them, but hopefully you can see how easy it would be to add any type of asset. Final editing was done in Final Cut Pro X to better match the original Google video set to music.

Keynote does Material Design (Complete) from Andrew Haskin on Vimeo.

Andrew Haskin

Andrew Haskin

Andrew Haskin is an interaction designer at frog.

Write a Comment

So great! Any chance you can post the Keynote file, so we can check out some of the animation settings to learn from your expertise?
Lance, 2015-09-24 17:44:09
fantasic, thank you for sharing with us and speaking about the power this tool can bring to our projects.
chris sanders, 2015-04-23 15:23:48
Hi Andrew - great stuff - I have long sound the praises of Keynote as a design tool beyond presentations. Question - Have you experienced Keynote crashes / corruption when working on ore complex material like this? Any tips or tricks if you HAVE for working around or preventing? thanks!
Chris Moore, 2015-04-20 17:11:39
This is Awesome !! Thanks for the inspiration.
Qian Mao, 2015-04-03 16:48:22

Recommended Stories