dsf.png
1.gif

The Task

The task is to develop motion design guidelines for a system, starting from the scratch. The process begins with the inspiration from a real life movement and finally developed as template for UI animation. 
fds.png

Exploring principles of animation

A basic shape was explored over various principles of animation to understand the anatomy of the graphic motions.

Inspiration Motion "Automatic Door"

A motion from the real life is selected to be used in the basis of animation to be developed for a User Interface.
9f8fef106410003.5fd5c19e9d560.png
9fe08b106410003.5fd5c19e9cedd.gif

Replicated Animation of Inspiration Motion

The motion of opening and closing of the automatic door is replicated in animation 
9fe08b106410003.5fd5c19e9cedd.gif
e3982e106410003.5fd5b7aa9cb4e.gif

Selected System "News Portal"

A system is selected for the animations to be executed on. The system is an interface where the animation and the selected motion language will be execute. 
c4eaf2106410003.5f8f454ab4ddf.gif
Iterations of various styles of motions inspired from "automatic door" with various shapes

Selected System "News Portal"

A system is selected for the animations to be executed on. The system is an interface where the animation and the selected motion language will be execute. 
Layer 48.png

Final Motion

Final motion is derived using an information quadrant that uses a comparison among of "motion" and "shapes" on the basic of the selected system i.e. a "news portal application"
Layer 43.png
Comp 1_2.gif

Utilities Selection

A number of utilities are selected with in the already selected application, which will be provided with animations. 
1.gif

Utilities Selection

A number of utilities are selected with in the already selected application, which will be provided with animations. 
layer 4.png

Utilities Selection

A number of utilities are selected with in the already selected application, which will be provided with animations. 
Layer 5.png
2.gif
4.gif

Utilities Selection

A number of utilities are selected with in the already selected application, which will be provided with animations. 
layer 4.png

Utilities Selection

A number of utilities are selected with in the already selected application, which will be provided with animations. 
layer 4.png
3.gif
5.gif

Utilities Selection

A number of utilities are selected with in the already selected application, which will be provided with animations. 
end.png

Motion Design Guidelines

Based on the above study, following motion design guidelines are developed that can be used as a template to create further animation in the same application.
Group 30.png

Thanks for Visiting | Have a look at more projects