Embracing Your Animated Future

A designer’s guide to learning UI Animation and animating Sketch designs.

Flow

Follow

Published in

MovingUI

8 min readJan 8, 2019

--

A collection of articles and guides for UX designers getting serious about UI animation. We cover UI animation principles and best practices, what-not-to-do, and a new tool for animating Sketch designs.

Moving UI is brought to you by Flow: Animate Sketch designs in seconds and generate production-ready code.

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?

Transitional Interfaces

by 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:

Motion Design Doesn’t Have to be Hard

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.

Good to great UI animation tips

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.

Sculpting Software Animation

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.

Creating Usability with Motion: The UX in Motion Manifesto

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.

The Ultimate Guide to Proper Use of Animation in UX

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?!

Disney’s 12 Basic Principles of Animation

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:

Disney’s motion principles in designing 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:

UI Animation Principles: Disney is Dead

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.

Jedi Principles of UI Animation

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:

Microinteractions for Macroresults

by Tubik Studio

Hamburger Menu Animation by Valentyn Khenkin

“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.”

Bringing Micro-Interaction & UI Animation to Life Through Developer–Designer Collaborations

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:

Stop Gratuitous Animation

by 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:

Your UI isn’t a Disney Movie

by Sophie Paxton

Learn How to Animate Your Sketch Designs

Move from Sketch design to animation to code. It’s easy with Flow.

Great — now you’re all studied up and the next Disney of UI Animation.

But how do we go about doing the actual animating? Just like in the UX design field there are a wide range of tools available. Most are bloated, not geared for interface animations, or they are focused on prototyping rather than creating refined, production-ready animations.

If you are a Sketch user designing for iOS apps, then Flow is your best bet. Flow is incredibly easy to learn and integrates with Sketch to animate your interfaces and export them to production-ready code developers can actually use.

Download a 30-day free trial for Mac here: http://www.createwithflow.com/download

Now let’s get you started with some easy tutorials!