The distant future. 🤖

The year, 2000!

… and nineteen?! How did that happen?

All we know for sure is, the future is now and the future of UX, is animated. With delightfully (or terribly) animated UI experiences becoming increasingly ubiquitous, UX designers are now tasked with designing and, often, executing on the animated aspects of interfaces. This is both a great opportunity for UX designers to enrich their work, and a daunting new skillset to master. Like it or not, it doesn’t matter:

You’re going to need to become a better, more efficient animator because, like most of us, you’re no Walt Disney.

You can do better. We all can. So, we’ve put together a set of articles and resources to help you get started. This guide is by no means exhaustive… we wouldn’t want to exhaust you.

Just a quick start. To help you get a solid foundation quickly, we’ll cover:

UI Animation Principles & Best Practices

What Not To Do

Animating Your Sketch Designs

Let’s do this.

UI Animation Principles & Best Practices

Understanding a few fundamental ideas and techniques behind UI animation will get you pretty far. Far enough to do some damage, anyways. Here is a collection of articles and resources to help you up your UI animation game.

🚀 Getting The Lay of The Land

A few great articles to get you started. When should I use animation? Why? How do I make it not suck?

by Pasquale D’Silva

Transitional Interfaces. Credit: Pasquale D’Silva

A witty, entertaining introduction to some of the fundamental ideas behind moving interfaces. Lots of great visual examples. Pasquale also expanded on this article in this a 50 minute, equally witty, talk. Take a look:

by Jonas Naimark

A peek into the animated cues underpinning Google’s Material Design Language. Credit: Jonas Naimark

The primary function of UI animation is to help users navigate an app by illustrating the relationship between UI elements. This article outlines some of the patterns and principles underpinning Google’s Material Design Language. Google’s MDL makes excellent use of animations in a consistent and understated fashion.

by Pablo Stanley

This animation shows a subtle, but important difference. Credit: Pablo Stanley

Over 1 billion people use apps and services built with Google’s Material Design Language every single day. This article has covers some of Google’s principles applied to standard interfaces like lists and menus. It includes excellent animated examples, like the one above, to help illustrate subtle refinements that will take your animations from good to great.

by Pasquale D’Silva

Animation helps lead your users’ eyeballs where they need to be. Credit: Pasquale D’Silva

Another great article from Pasquale. This one goes more in depth into some of the methods employed in animation like rhythm, timing, tempo, composition, texture and dynamics. Lots of great visual examples.

👷‍♀️ Let’s Dig Deeper

Dig into these detailed articles that break down UX animation conventions into a catalogued set of principles.

by Issara Willenskomer

12 principles for creating usability with motion. Credit: Issara Willenskomer

An excellent and exhaustive article — ney, manifesto — outlining 12 principles for creating usability with motion. Extensive and filled with great visual examples.

by Taras Skytskyi

A helpful guide for the appropriate speed or duration of different kinds of animations. Credit: Taras Skytskyi

UI Animation principles laid out with great “Good vs. Bad” examples. Not only does this guide cover the most important principles, it also gets into some of the techniques behind different kinds of easing, speed and UX choreography.

🧞‍♂️⭐️ Disney & Star Wars

Wait, what?!

by Animation Mentor

The Twelve Basic Principles of Animation are essential “guidelines” created by Disney animators Ollie Johnston and Frank Thomas in 1981. How do you go about using these principles in your work? How can you keep track of them all, and what’s the best way to approach them once you know them? Animation Mentor has put together 12 articles that will help you get a solid foundation in expressive animation.

Here we have these principles explored in the context of interface animations:

by Ruthi

An example using “Staging” to help give the “LIKE” button more importance. Credit: Ruthi

Though some would argue these principles are no longer relevant:

by Issara Willenskomer

An interesting article exploring the relevance of our aforementioned 12 Principles of Animation in the medium of UI animation.

More of a George Lucas fan? Fine, enough about Disney.

by Kit Oliynyk

A thoughtful article on why, when, and how to use animation in your UI, what UX Choreography is, and what all of this has to do with Star Wars.

Microinteractions?! 🐜 🧐

What are these? Interactions for ants?! UI animations are often used to augment “micro-interactions”, which just means every individual action made by the user within a UI experience. We are now seeing the animations themselves increasingly being referred to as “microinteractions”. That word is a train wreck. Enjoy reading it over and over again:

by Tubik Studio

“Microinteractions are one of the key things to care about in UI/UX design. They are, perhaps, the best proof that attention to small details is able to give big and powerful result.”

by Kyo Kim

A series of animated microinteractions in a user flow. Credit: Kyo Kim

“Unlike other forms of animation that exist solely to create the illusion of movement, micro-interactions directly engage the user, enabling him/her to accomplish a variety of tasks and interact with the product in an intuitive and effective way.”

🤦‍♂️ What Not to Do

Remember when they first introduced filters in Photoshop? You probably don’t, it was over 200 years ago. But if you do remember, then you probably also remember finding that sweet sweet “Render Lens Flare” filter and abusing the absolute shit out of it. Everything was better with lens flare! Until, you realized it really wasn’t.

What we are trying to say is:

Don’t over do it. 🤨

Here are some guidelines to help you avoid over-animating your interfaces:

by Sophie Paxton

( Please don’t. ) Credit: Sophie Paxton

This mini essay explores the over-use of animation in UI design, show comparisons with early visual design and offer some suggestions for effective GUI motion design.

And here’s a lovely expansion on that article:

by Sophie Paxton