Putting Your UIs In Motion 
Val Head / @vlh
Helpful 
animation
Show structure 
Show relationships 
Show cause and effect
ANIMATION: 
Establishes location
ANIMATION: 
Guides tasks
ANIMATION: 
Demonstrates
ANIMATION: 
Gets (all the) attention
Adding animating 
with style
Keep Interface 
Animations 
Flexible
prototype! 
prototype! 
prototype! 
prototype! 
prototype! 
prototype! 
prototype!
Speed is more 
than numbers
.2s to .6s 
a happy place for “small” 
interactions
Ease-outs 
feel more “responsive”
“Sometimes when we release an 
update, I tighten up an old 
transition by ~50ms. 
! 
Result: “Wow, this new version 
feels faster.” 
- Cennydd Bowles
Complex easing needs 
more time to be readable.
Match motion to 
your message
Your choice of easing 
makes all the difference.
Think stage, 
not page
Animation is a 
design tool
This is just the 
beginning…
Make 
the awesomest 
of things!
valhead.com/ui-animation
Thanks! 
! 
@vlh 
!

Putting Your UIs In Motion On The Web (Animation & UX)