Breaking Development: Web Designer, Motion Designer

by Luke Wroblewski July 29, 2014

In her presentation at Breaking Development in Nashville TN, Val Head talked about UI animations and how to use them effectively on the Web. Here's my notes from her talk Web Designer/Motion Designer.

  • Animation is a big part of design though we may not be thinking about it enough in our work.
  • Motion design can help you communicate what's going on in an interface and create a more memorable experience.
  • We have a lot of ways to make things move on the Web: Javascript, SVG, Canvas, WebGL, and CSS. These are native to the browser.
  • Good animation has two traits: it's in a place that helps/explains things and it is created with an appropriate or engaging style.

Principles of traditional animation

  • Timing: How does an object appear to obey the laws of "physics"? Animations appear more correct when they align with real world experiences.
  • Timing establishes mood, emotion, and reaction. Fast is active, slow is thoughtful, etc. The way things move says a lot about their personality.
  • Transforms can reposition things, scale them, rotate them, skew them in three dimensions and more. Transitions move things over time: set a beginning state and ending state and move things between them.
  • Cubic bezier functions can be tuned to massage the ease-in and out effects of animations. Tools like cubic-bezier.com can help you explore different functions.
  • Squash & stretch effects allow you to add a layer of realism to your transforms, this creates some fun and conveys a sense of energy as well.
  • When you are adding easing to keyframes, don't add it to the timing function as well.

Principles of UI animations

  • Don't be inflexible: once in a transition, don't block changes from user action. Its often easier to code things in an inflexible manner than a flexible one. But things can happen during a transition.
  • Don't create obstacles. For example menus that animate into modal states (Square). This creates a barrier to use.
  • Remember readability: if an animation doesn't feel right no matter how you speed it up, maybe you don't need it at all.
  • UI animations should be as fast as they can still be readable. There's no set number -try things out to find the right timing for your specific UI.
  • Make the message match your motion. Don't use an animation that doesn't align with your product, company, brand.
  • Prototype: test your ideas in context. Test your ideas early. Get things animating early so you can see how it works.