IxD Lab Assignment 2

Animation Rules for UI Design

This week we talk about animation principles for UI design. For interaction designer, there is not way to escape animation part while implementing a interaction design prototype.

Illusion of Life

From Disney’s 12 animation principles, we have extract 5 of them as our UI design principles.

  1. Squash & Stretch: When object moves, the shape of object will change according its movement.
  2. Anticipation: When object starts to move, there will be a prepared stage to let viewer aware of its next movement.
  3. Follow through: When the main body of the object moves, other parts of object will follow it according to its property. For example, the antenna and feather will move in different way.
  4. Slow in & Slow out: Object moves in real world will have accelerate and decelerate stage other than just move in constant speed.
  5. Timing: Different frames numbers between keyframes will feel different.
1. Squash & Stretch 2. Anticipation
3. Follow through 4. Slow in and slow out
5. Timing

Apply in UI Design

This principles could apply in UI design as well. With motionLibraryV1 provided by Professor. We follow the build-in motion curve to make a UI prototype.

I create two pages of an simple UI design.

Apply motion with different elements by links them as parent layer


12 basic principles of animation


Like what you read? Give Jeffrey Chou a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.