Think Like a Motion Designer - FOWD London 2015
•
0 likes•900 views
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!
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (9)
More from Val Head
More from Val Head (11)
Recently uploaded
Recently uploaded (20)
Think Like a Motion Designer - FOWD London 2015
- 1. @vlh FOWD London 2015 Motion DesignerThink like a
- 2. @vlh FOWD London 2015 Motion DesignerThink like a
- 6. #FOWD @vlh Great UI animation has purpose and style.
- 7. How it looks
- 9. #FOWD#FOWD @vlh Ourgoal is relatable motion
- 10. #FOWD#FOWD @vlh
- 11. #FOWD#FOWD @vlh
- 13. #FOWD#FOWD @vlh Timing: appearing to obey the laws of physics
- 14. #FOWD#FOWD @vlh Timing: establishes mood, emotion, and reaction
- 16. cubic-bezier(0.42, 0, 0.58, 1);
- 20. #FOWD @vlh Everything is better with cubic beziers!
- 21. ease-in-out
- 22. #FOWD#FOWD @vlh
- 23. #FOWD#FOWD @vlh
- 24. #FOWD @vlh 2: Follow Through
- 25. #FOWD#FOWD @vlh Follow Through: not everything comes to a stop at once
- 26. #FOWD#FOWD @vlh
- 27. #FOWD#FOWD @vlh Random Aside: variables forkeeping yourbeziers sane
- 28. #FOWD#FOWD @vlh
- 29. #FOWD#FOWD @vlh
- 30. #FOWD @vlh 3: Secondary Action
- 31. #FOWD#FOWD @vlh Secondary Action: supplemental action, reinforces and adds dimension
- 32. #FOWD#FOWD @vlh
- 33. #FOWD#FOWD @vlh
- 34. #FOWD#FOWD @vlh
- 35. #FOWD @vlh One more thing!
- 36. #FOWD @vlh Speed it up.
- 37. #FOWD @vlh Speed it up!!
- 38. #FOWD#FOWD @vlh
- 39. How it behaves
- 40. #FOWD#FOWD @vlh 0.2 to 0.5 seconds is a good range forUI animations
- 41. #FOWD#FOWD @vlh Ease-outs feel more “responsive”
- 43. #FOWD#FOWD @vlh More complex easing needs more time to be readable
- 45. #FOWD @vlh prototype, prototype, prototype!
- 52. Be inspired!
- 54. capptivate.co
- 56. #FOWD @vlh There are crazy fun times ahead!