| 5 min read

Motion Flow in Design

Image post

The rising popularity of rich media content sets video on the top of the list. In the web design world, this term is separated into motion and animation. Video content goes on the wide range of use - from stunning game graphics to Hollywood movies and unique designs.

The animation is the future of interfaces, it is so obvious with the evolution of VR and AR, where animation is the key property used to design them.

People don’t just buy products, they actually buy the interfaces, the lively designs, and those appealing interactions.


When digital experience is great it captures audiences attention and explodes their imagination.

An animated design has the power to entertain the user with a fun loader while they wait for the page to load, inform them with a progress bar, load the animated skeleton of the layout, seek attention with beautifully animated signals when needed, alert a user about an error, help them navigate and what not!


But what did it came from all this big massive of knowledge and techniques?

What did the world start from?

What was the first animation and who stands behind the process of animation evolution?


Like photography, for example, motion design is its own medium and yet it faces many of the same challenges photography faced over a century ago.


The approach to motion design is deeply rooted in traditional animation design, principles that were established by Disney animators Frank Thomas and Ollie Johnston back in the 1930s.


A long time before moving images were possibly projected with the magic lantern since its invention by Christiaan Huygens in 1659.

His sketches for magic lantern slides have been dated to that year and are the oldest known document concerning the magic lantern.

Next cool example is phenakistiscope. The first widespread animation device that created a fluent illusion of motion.

The phenakistiscope is regarded as one of the first forms of moving media entertainment that paved the way for the future motion picture and film industry.


Inventor Joseph Plateau did not give a name for the device, It is sometimes compared to GIF animation since both show a short continuous loop. The phénakisticope usually comes in the form of a spinning cardboard disc attached vertically to a handle.


Arrayed radially around the disc’s center is a series of pictures showing sequential phases of the animation. So that was some first prototypes of original motion devices. They are amazing. Do you agree? 

Welcome back to the 20 -21 century. The history of motion graphics goes back further than Adobe After Effects.


One of the first uses of the term “motion graphics” was by animator John Whitney, who co-founded Motion Graphics, Inc. in 1960 to create motion picture and television title sequences.

However, motion graphics dates back to before electronic media, sometime back in the 1800’s with presentation flipbooks.


Motion graphics, in a nutshell, is any graphics that use technology to create an illusion of motion, transformation, or rotation in order to communicate messages through video and audio storytelling.


Motion graphics includes things such as films, videos, animated text, and web-based animation, among other things and the field has quickly evolved as a direct result of improvements in technology. But today I see the errors of beginners a mile away.

The best thing to do for effective learning is to look at the storyboards of the gaits and reread the rules of Disney.

Our web-designer from motion department shares his professional vision.


Let’s talk about the exaggeration trend. Modern illustrators like to thrill and shock. The licked and accurate direction in the animation is now receding into the background.

Look at the living people for how they move - notice the details.


Motion Designer is not just a creative painter. Physics plays a very big role in our profession. Basic knowledge in this area is must have if you want to stay on the track!


You must understand the basics of the dynamics and interaction of objects in space. And if you really are passionate about what you do, go and get basic skills of programming.

Now we wanna describe all the differences between the classic approach of classic animation and interaction design.

In classic animation, you have two characters or more and some special environment where all of them are interacting.


In interaction design, there is the hidden hero named user and he is leading all the process. Everything here depends on his logic, moves, and mood.

The reaction has to be adequate. The user is interacting with the product and he has some expectations.

You as a motion creator had to provide all design system to work with understandable logic.


Interaction design is a kind of mix from good UX and classic animation. So do not try to ignore old Disney rules they work here too but in a special way.

My advice for the last - put a good cartoon on pause and discover every piece of the frame, analyze why objects are staying on their positions look at the composition and colors theme.


Divide tools. Principle - for the revitalization of interfaces. AE can be used for classic animation mainly. Use every soft concisely understanding for what result you might need.

Motion is innovation! Future of web and mobile stands hand in hand with it. Be a part! Touch, feel, learn and create.

4.15.0 Article rating
You May Also Like
/Facebook /Twitter /LinkedIn
/Facebook /Twitter /LinkedIn