Credit: Unsplash

How to Level Up Your Design Skills

Part 4: Foundations in Interface Animation

Joanna Ngai
3 min readNov 20, 2017

--

The modern web allows designers to play with a wide range of motion design. Here’s some guiding principles for working with interface animation.

Principle 1: Go Back to the Traditional Animation

One go-to resource for animators is found in the 12 Basic Principles of Animation, first introduced in the book The Illusion of Life: Disney Animation. It was authored by Disney animators Ollie Johnston and Frank Thomas, two out of a team of core animators referred to by Walt Disney as the “Nine Old Men” who created Disney’s most famous animated cartoons.

Even though the principles of traditional animation may be explored in more detailed in the book, they are a great place to start to transition into digital animation. The principles include Timing, Anticipation, Follow Through and more help you to achieve motion that is believable, natural and fluid.

Principle 2: Motion Should be Tied to a User Goal

Think of motion is just another design tool in your UX toolbox — it must be crafted in a way to help your user achieve their goals. Motion design shouldn’t be obtrusive or excessive. In other words, if it gets in the way of the user…

--

--