Google Design
Published in

Google Design

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

Step 1: Sketch

Sketch

Step 2: Sketch2AE (now AEUX)

AEUX

Step 3: After Effects

After Effects

Step 4: Bodymovin

Bodymovin

Step 5: Lottie

google.com/chrome/productivity/

Step 6: Photoshop

Photoshop

Step 7: Optimization

ImageOptim

Done!

--

--

Stories by Googlers on the people, product, and practice of UX at Google. For editorial content and more visit design.google

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