Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


Published on

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.

Published in: Design

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

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