Designing Meaningful Animation

Val Head, a designer and web animation consultant and author of The Pocket Guide to CSS Animations, gave this talk at beyond tellerrand in 2016. Her case is that motion design is now a necessary skill for designing and building the web: the character and energy that motion brings to an interface is becoming as expected online as it is in other media.

Good web animation, she argues, comes from thinking like a motion designer and a brand steward, so that the motion you add matches your message and design goals rather than being decoration. The talk works as a crash course in key animation principles applied to interface design decisions, including timing, offsets and secondary action, along with motion principles for animated interactions.

Animation often supports interface patterns such as morphing controls and input feedback, where movement explains what just changed.