The document discusses the importance of animations in user interfaces, emphasizing their role in showing structure, relationships, and guiding tasks. It highlights the need for flexible animations, proper timing, and effective use of easing to enhance user experience. The message encourages designers to consider animation as a vital design tool for creating engaging user interactions.

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
!