putting your uis in motion on the web (animation & ux)
TRANSCRIPT
Putting Your UIs In MotionVal 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!
!
@vlh !
Thanks!