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.

Think Like a Motion Designer - FOWD London 2015

718 views

Published on

Motion design has become a necessary skill for the modern web. We’ve never had to understand animation principles like we do now. Beautiful animation comes from thinking like a motion designer when adding animations and transitions to our work on the web. There is a huge depth of motion design and animation knowledge we can pull from and apply to our work while we design new UIs of the web. In this session we will cover key animation principles like timing, offsets and secondary action as they apply to UI work on the web. Consider this your crash course into becoming a motion design pro!

Published in: Design
  • Be the first to comment

  • Be the first to like this

Think Like a Motion Designer - FOWD London 2015

  1. 1. @vlh FOWD London 2015 Motion DesignerThink like a
  2. 2. @vlh FOWD London 2015 Motion DesignerThink like a
  3. 3. #FOWD @vlh Great UI animation has purpose and style.
  4. 4. How it looks
  5. 5. #FOWD#FOWD @vlh Ourgoal is relatable motion
  6. 6. #FOWD#FOWD @vlh
  7. 7. #FOWD#FOWD @vlh
  8. 8. #FOWD @vlh 1: Timing !
  9. 9. #FOWD#FOWD @vlh Timing: appearing to obey the laws of physics
  10. 10. #FOWD#FOWD @vlh Timing: establishes mood, emotion, and reaction
  11. 11. #FOWD @vlh ease linear ease-in ease-out ease-in-out Timing function keywords
  12. 12. cubic-bezier(0.42, 0, 0.58, 1);
  13. 13. #FOWD @vlh TIME PROGRESSION
  14. 14. #FOWD @vlh Everything is better with cubic beziers!
  15. 15. ease-in-out
  16. 16. #FOWD#FOWD @vlh
  17. 17. #FOWD#FOWD @vlh
  18. 18. #FOWD @vlh 2: Follow 
 Through
  19. 19. #FOWD#FOWD @vlh Follow Through: not everything comes to a stop at once
  20. 20. #FOWD#FOWD @vlh
  21. 21. #FOWD#FOWD @vlh Random Aside: variables forkeeping 
 yourbeziers sane
  22. 22. #FOWD#FOWD @vlh
  23. 23. #FOWD#FOWD @vlh
  24. 24. #FOWD @vlh 3: Secondary 
 Action
  25. 25. #FOWD#FOWD @vlh Secondary Action: 
 supplemental action, reinforces and adds dimension
  26. 26. #FOWD#FOWD @vlh
  27. 27. #FOWD#FOWD @vlh
  28. 28. #FOWD#FOWD @vlh
  29. 29. #FOWD @vlh One more thing!
  30. 30. #FOWD @vlh Speed it up.

  31. 31. #FOWD @vlh Speed it up!!

  32. 32. #FOWD#FOWD @vlh
  33. 33. How it behaves
  34. 34. #FOWD#FOWD @vlh 0.2 to 0.5 seconds is a good range forUI animations
  35. 35. #FOWD#FOWD @vlh Ease-outs feel more “responsive”
  36. 36. #FOWD#FOWD @vlh More complex easing needs more time to be readable
  37. 37. #FOWD @vlh prototype, 
 prototype, 
 prototype!
  38. 38. Oh, hello 
 bettertools!
  39. 39. alltherightmoves.valhead.com
  40. 40. Be inspired!
  41. 41. artofthetitle.com
  42. 42. capptivate.co
  43. 43. #FOWD @vlh There are crazy fun times ahead!
  44. 44. #FOWD @vlh Thanks! ! @vlh valhead.com alltherightmoves.valhead.com

×