Motion UI Design Principles2nd UX Meet-upMay 27,2014

What is Motion UI?Basically interface animations and transitionssource: http://capptivate.co/

Most people make the mistake of thinking design is what it looks like. Thats not what we think design is. Its not just what it looks like and feels like. Design is how it works.Steve Jobs

What am I gonna share?12 basic principles of animationTips for applying animation principles

12 basic principles of animation

Squash and stretch

source: http://capptivate.co/

Anticipation

source: http://capptivate.co/

Staging

source: http://capptivate.co/

Straight ahead action & pose to pose

source: http://capptivate.co/

Follow through & overlapping action

source: http://capptivate.co/

Slow in and slow out

source: http://capptivate.co/

Arcs

source: http://capptivate.co/

Exaggeration

source: http://capptivate.co/

12 basic principles of animationSquash and stretchAnticipationStagingStraight ahead action and pose to poseFollow through and overlapping actionSlow in and slow outArcsExaggerationSecondary actionTimingSolid drawingAppeal

Tips for applying animation principles

TipsExercise restraint.Complementary principles.Animation in a supporting role.Convey distinct characters whilst keeping consistency.Keep the user orientated.Responsive and intuitive.

Thanks for your attention!!!anlpnguyen@kms-technology.com