a few tips I got about Motion UI principles

1. Motion UI Design
Principles
2nd UX Meet-up
May 27,2014

2. What is
Motion UI?
Basically… interface
animations and transitions
source: http://capptivate.co/

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. What am I gonna share?
12 basic principles of animation
Tips for applying animation principles

5. 12 basic principles of
animation

6. Squash and stretch
source: http://capptivate.co/

7. Anticipation
source: http://capptivate.co/

8. Staging
source: http://capptivate.co/

9. Straight ahead action &
pose to pose
source: http://capptivate.co/

10. Follow through &
overlapping action
source: http://capptivate.co/

11. Slow in and slow out
source: http://capptivate.co/

12. Arcs
source: http://capptivate.co/

13. Exaggeration
source: http://capptivate.co/

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. Tips for applying
animation principles

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. Thanks for your attention!!!
anlpnguyen@kms-technology.com