Google’s Material Design Video Recreated in Keynote

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.