Embracing Your Animated Future
A UX Designer’s guide to learning UI Animation and animating Sketch designs.
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.
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?
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:
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.
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.
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.
An excellent and exhaustive article — ney, manifesto — outlining 12 principles for creating usability with motion. Extensive and filled with great visual examples.
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
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:
Though some would argue these principles are no longer relevant:
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
“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:
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:
Learn How to Animate Your Sketch Designs
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!
Create animations like these in minutes:
This tutorial introduces the concept of tracing shapes, while you build a nice animation for the CodePen logo.
In this Skype logo animation tutorial, you’ll learn about multiple rotations that you can set up in Sketch.
In this tutorial you’ll learn simple techniques for rotation, scaling and easing to bring the Twitter Logo to life.
Learn how to align / distribute keyvalues and animations in this Sketch logo animation tutorial.
Anchor point rotations are key in this simple tutorial, showing you how to lovingly animate the Vimeo logo.
Taking tracing a step further, learn how to coordinate the tracing of shapes by aligning their timing and rotations
Learn how to take an existing Sketch design, then restructure and rename its layers and artboards to be animatable.
Coordinate the scaling of multiple objects, and learn some visual tricks while animating the Github logo.
Learn how to create a launch animation in Flow, then neatly integrate into an existing Xcode project.
Building Brand Loyalty & Reducing Anxiety with UI Animation
Turn moments of anxiety into opportunities to delight users and build emotional bonds through animation.
MovingUI is a publication for UX Designers learning UI Animation. It is brought to you by Flow, a tool for animating Sketch files for iOS.