Animations are a big part of the future of UX on the web and all web designers need to have some motion design skills. This talk is all about how to pull of interface animation well on the web. How to animate responsibly and with style! As seen at the wonderful Smashing Conf Whistler 2014.

1. Putting Your UIs In Motion
Val Head / @vlh

4. Helpful
animation

5. Show structure
Show relationships
Show cause and effect

6. ANIMATION:
Establishes location

9. ANIMATION:
Guides tasks

13. ANIMATION:
Demonstrates

17. ANIMATION:
Gets (all the) attention

20. Adding animating
with style

21. Keep Interface
Animations
Flexible

25. prototype!
prototype!
prototype!
prototype!
prototype!
prototype!
prototype!

26. Speed is more
than numbers

27. .2s to .6s
a happy place for “small”
interactions

28. Ease-outs
feel more “responsive”

30. “Sometimes when we release an
update, I tighten up an old
transition by ~50ms.
!
Result: “Wow, this new version
feels faster.”
- Cennydd Bowles

32. Complex easing needs
more time to be readable.

34. Match motion to
your message

38. Your choice of easing
makes all the difference.

39. Think stage,
not page

43. Animation is a
design tool

44. This is just the
beginning…

46. Make
the awesomest
of things!

47. valhead.com/ui-animation

48. Thanks!
!
@vlh
!