A Recipe for Designing Animations—Without Sacrificing Performance
For a redesign of the Google Chrome homepage, I took on the challenge of producing high-quality animations without contributing to latency
Last year, Google Chrome celebrated a big milestone, and turned 10. I work on UI design, visual design, and content strategy to continuously improve Google Chrome’s web presence, and in September 2018, my team—the Chrome Growth division of Creative Engineering—launched an extensive redesign of the Chrome homepage to celebrate the anniversary.
For the redesign, we focused much of our effort on product education. Chrome is a fast and powerful browser, and the nuances of how it works are inherently technical. But you shouldn’t need a computer science degree to appreciate Chrome’s benefits. So I worked with Laura Polkus, Melissa Castaño, and Lydia Weber to create a new visual language for Chrome that aims to engage all users, even those who may not be technically savvy.
Our framework was grounded in basic geometry and the core Google brand palette. We built upon the work of the Chrome product team, the Google hardware team, and internal illustration guidelines to give Chrome a unique identity that included a set of animations for the product education pages. Each animation is meant to tell a story to succinctly communicate a Chrome benefit.
That said, animations and site performance aren’t always agreeable. We’re committed to ensuring that everyone can download Chrome quickly and easily, even in areas with low bandwidth. (Our achievements in performance were recently featured at Google I/O ’19.) But even after compression, GIFs and MOVs tend to run very large, and multiple network requests for large files would derail site performance. I feel strongly that good design shouldn’t come at the cost of good performance, so I took on the challenge of producing high-quality animations without contributing to latency. Here’s my workflow:
Step 1: Sketch
I started by designing a set of illustrations in Sketch, to set up each animation. Like many, I typically use Illustrator for graphic design, and Sketch for UI design. But because Sketch is so well-suited for flat, geometric vectors, I gave it a shot for these illustrations. I used Illustrator very sparingly—only for certain Pathfinder operations.
I also copied each artboard and created a set of static fallbacks, which I exported as PNGs. Fallbacks are useful for older browsers and in cases of animation failure. Also, fallbacks should be served to users who provide reduced motion requests for accessibility reasons.
Step 2: Sketch2AE (now AEUX)
I then used Sketch2AE, the precursor to AEUX, to import all of my Sketch layers into After Effects. In AE, I use a lot of precomps and null objects. Rather than copying all of my layers into AE at once, I used Sketch2AE to copy groups of layers at a time. This made it easy to isolate the components I wanted to animate without manually sorting through a long layer list.
Step 3: After Effects
In After Effects, I animated each 5-second composition to tell a story about Chrome. I leveraged internal Material motion guidelines to ensure smoothness and consistency. I also used trim paths to create a trail of the core brand colors, and incorporated this trail into every animation for narrative continuity.
Step 4: Bodymovin
I then used the Bodymovin extension in After Effects to generate a JSON file for each animation. Each JSON file contains coded instructions for the entire composition. For safekeeping, I also rendered an MOV for each comp—more on this later.
Step 5: Lottie
I handed off the JSON files to our creative developers, who used the Javascript library Lottie to generate an SVG for each animation. SVGs themselves are another form of coded instructions for animations, and can be written inline in HTML code. This means that no network requests are needed to render each animation—no huge GIFs or video files.
Our developers also wrote functions to trigger animation playback on scroll, and restart playback on click. This makes for a more intentional user experience than endless looping would have.
If you don’t have programming experience, you can use an online platform such as LottieFiles to upload a JSON file and preview its animation.
Step 6: Photoshop
For presentation purposes, I like to create a GIF for each animation. This makes it easy to share work internally for feedback throughout the design process. To do so, I imported each rendered MOV from After Effects into Photoshop using File > Import > Video Frames to Layers. I then used the Photoshop Timeline panel to create frame animations, and exported each animation as a GIF using Save for Web (Legacy).
If you have a long animation with thousands of frames, Photoshop may be slow to convert your frames to layers. In this case, I would use an online MOV to GIF converter. Keep in mind that these online converters are sometimes lossy, so your GIF may not have the same quality as your MOV.
Step 7: Optimization
I have a habit of optimizing all my exports for good file hygiene. I always start with a lossless compression tool, such as ImageOptim. Lossless compression will reduce file size without impacting quality. If the file size is still too large post-compression, I typically use a lossy compression tool such as ezGif on the lowest compression setting, to preserve quality.
Done!
At the end of this process, you’ll have a lightweight SVG animation supported by a JSON file. You’ll also have an MOV and an optimized GIF for easy sharing, as well as a static PNG fallback.
These steps allowed us to successfully incorporate animations into the Chrome homepage without impacting performance. I used the same workflow to create an animation for the download confirmation page, and a variant for a landing page experiment. Plus, I’ve also shared this workflow with other teams at Google, who have since incorporated animations into their websites—hopefully you and your team find it useful, and if you have tips and tricks of your own, please share in the comments.
❧
Neil Shankar is a designer on Creative Engineering at Google, embedded through Left Field Labs. Visit tallneil.io.
