Design: Animation Design

In bygone days, motion design was circumscribed by aesthetics. But, in today’s world, motion design is a crucial element in making users’ interactions with a brand’s digital products more streamlined and intuitive. Companies aim to provide better narratives through their product user experiences, making motion design an essential part of modern user-interface design.

“Motion tells stories. Everything in an app is a sequence, and motion is your guide. For every button clicked and screen transition, there is a story that follows,” says Craig Dehner, formerly on the Human Interface team at Apple. Designers need to begin thinking about such moments in an interaction from the very beginning of the design process. Read More

This is a sample chapter from Val Head’s new book Designing Interface Animation: Meaningful Motion for User Experience. 2016 Rosenfeld Media.

Chapter 3: Modern Principles of Interactive Animation

The classic principles of animation teach us so much about creating natural and pleasing animation, but they fall short in guiding us in one particular area: interactive animations. It’s not their fault, of course, because they were written for a different era of animation when interaction wasn’t a thing to consider.

Designing interactive animation—which interface animations often are—requires approaching animation just a little differently and working with a different set of rules for behavior. The way your animations behave during an interaction affects how your users perceive them just as much as how they look. The core of what the 12 principles cover still applies to your work, but you also have to consider the interactive context of your work. Your work won’t just be watched in the classic definition of animation—like feature films and cartoons—it will be interacted with, too. And that means you have to consider factors beyond the classic principles—or any other motion graphics techniques—when designing quality interface animations.

This chapter covers the principles of interactive animation: the factors that ensure that animations work with the expectations that come with interaction, not against them. Read More