SXSW: Animation and Experience Design

Digital experiences are increasingly using animation to delight users. I attended two sessions at SXSW that spoke about Disney’s principles of animation and how to better integrate animation with experience design.

SXSW Design

In the 1930’s Disney set out to answer the following question: How do you make animation good? To answer this question they observed animals in zoos and watched old films to better understand real world physics and motion. Their research ultimately led to the publication of a book titled, “The Illusion of Life, Disney Animation,” which introduced Disney’s 12 Principles of Animation.

The 12 animation principles are:

  1. Squash & Stretch
  2. Anticipation
  3. Staging
  4. Straight Ahead Action and Post to Pose
  5. Follow Through and Overlapping Action
  6. Slow In and Slow Out
  7. Arc
  8. Secondary Action
  9. Timing
  10. Exaggeration:
  11. Solid drawing
  12. Appeal

Examples of of these principles in motion are available here. A subset of these principle apply exceptionally well into digital experience design.

The first session was called “Think Like An Animation: Motion and Android” and it was co-presented by Kevin Grant, Android developer at Tumblr, and Zack Sultan, Lead Designer at Tumblr. The session was designed to provide a common vocabulary designers and developers can use to better understand animation. They deconstructed many of the Disney’s principles into 4 fundamental types that apply specially to digital: Slide, Rotate, Scale, Fade. These types were then used to critique the use of animation in various Android apps. During the critique, Kevin and Zack did a great job of tying the animation examples to Disney’s principles in a very accessible way.

The second session was called “The Principles of UX Choreography” and it covered the same material as the first, but it was structured differently. Glen Keane, former Disney Animator, led the session with Rebecca Ussai, Senior UX Designer at R/GA. As Rebecca spoke about animation with a fantastic emphasis on UX, Glen brought these principles to life by sketching on paper. It was remarkable watching a master animator bring Mickey Mouse to life with a few sheets of paper. Their presentation ended with a wonderful short film, the Duet, that Glen developed for Google.

The key take away from these sessions is that digital experiences need to be architected to support a system of animations. Thinking holistically, the animation architecture is ultimately an expression of your brand. Every aspect of your digital product, the copy, the experience, the functionality, and the animation, must be aligned. Finally, animation architecture must serve the dual goals of informing and delighting users.