Motion UI Principles

1,872 views

Published on

a few tips I got about Motion UI principles

Published in: Mobile, Business, Technology

Motion UI Principles

  1. 1. Motion UI Design Principles 2nd UX Meet-up May 27,2014
  2. 2. What is Motion UI? Basically… interface animations and transitions source: http://capptivate.co/
  3. 3. “Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” –Steve Jobs
  4. 4. What am I gonna share? 12 basic principles of animation Tips for applying animation principles
  5. 5. 12 basic principles of animation
  6. 6. Squash and stretch source: http://capptivate.co/
  7. 7. Anticipation source: http://capptivate.co/
  8. 8. Staging source: http://capptivate.co/
  9. 9. Straight ahead action & pose to pose source: http://capptivate.co/
  10. 10. Follow through & overlapping action source: http://capptivate.co/
  11. 11. Slow in and slow out source: http://capptivate.co/
  12. 12. Arcs source: http://capptivate.co/
  13. 13. Exaggeration source: http://capptivate.co/
  14. 14. 12 basic principles of animation Squash and stretch Anticipation Staging Straight ahead action and pose to pose Follow through and overlapping action Slow in and slow out Arcs Exaggeration Secondary action Timing Solid drawing Appeal
  15. 15. Tips for applying animation principles
  16. 16. Tips Exercise restraint. Complementary principles. Animation in a supporting role. Convey distinct characters whilst keeping consistency. Keep the user orientated. Responsive and intuitive.
  17. 17. Thanks for your attention!!! anlpnguyen@kms-technology.com

×