When it comes to animation, it doesn’t get better than Disney.
Whether it is the Emperor’s new groove or Toy Story, name your top three favorite movies, and chances are at least one of them is Disney. And how can it not be? Through the years Disney has provided us with amazing movies that not only entertained us but shaped our childhood!
But is that all Disney animation has done?
Not exactly, as it turns out, Disney’s twelve basic principles of animation, written by Ollie Johnston and Frank Thomas in their book have affected the way UI designers use principles of UI animation on the web and mobile platforms as well. These principles based on the works of Disney since 1930 define the rules that bring animation to life. But how are these principles affecting the UI designs of numerous web and mobile platforms? Let’s see.
The Twelve Principles Of Animations: Changing UI Animation Forever
There’s no doubt that Disney stands as the pioneer of all animation movies. And the fact that they are affecting the UI animation principles is nothing surprising. Read on as we explore the principles of Disney animation and how they can improve your UI animation effects.
Squash & Stretch: Bring A Tinge Of Life
Ever thought how animations always looked so lively when you watched them as a child?
Well, most of the liveliness can be attributed to the squash and stretch principle. This is the first of the twelve UI animation principles the designers can apply when it comes to animating the interface.
The squash and stretch provide users with an illusion of physical volume and mass to any element when they are moving. A cube that squashes when drops to the floor and stretches when jumps up to give us an idea that it is something physical with its own weight, gravity, and mass. Similarly, when a UI button expands while hovering over it, and returns to its normal position gives us a feeling of sustainability of the button. These small material UI animations improve the quality of app experience far more than you can imagine.
Little Bit Of Anticipation Makes Things Exciting
Ever hovered over a button and saw its color or text changing?
That’s the use of anticipation principles. This is a small interactive animation in the UI animation prototyping that lets the users know what they can anticipate by clicking the button. It’s a lot like a character pulling their arm back as they throw a ball.
Without the application of anticipation in UI animation, the interaction with animated UI elements would fall flat on their face. The lifelessness of the interface is elevated by the small animation that indicates something marvelous will happen when the users click on that button.
Timing Is Key To It All
Timing is a principle followed by traditional animators to determine how many frames will be drawn to create the perfect animation.
The smoothness of the animation is directly related to how many frames there are to complete one motion. The more frames there are, the smoother the animation will be, but it will also take a long time to load the UI interactions effect. Needless to say, this delay in loading can be quite harmful to the UX.
And that’s why you need to hire an experienced web design company based in New York or some other major city who can find that sweet spot between too much and too little when it comes to animation speed. A UI animation that whizzes by on the screen is not going to serve them right purpose, but at the same time, something that takes too long to load will test the user’s patience. To find the right balance for optimal effect.
Slow In & Slow Out: Transition Made Easy
A movement never starts abruptly. It always starts slow and gains momentum, and then slows out of the frame. Imagine dribbling a ball.
It will start off from a slow, almost static phase, bounce hard for a moment before losing its momentum and rolling away slowly. Since this rule is not only applicable to animation but real life as well, adding a bit of ease in and ease out effect will add more life to the animated interface elements.
It will also assist the users to comprehend what is happening on the screen. The abrupt movement might often surprise the users and make them feel overwhelmed. But with this effect, designers can prototype UI animations that the users will see coming, but also be delighted with.
Staging The Elements For The Perfect Effect
It can often be challenging to draw the user’s eye towards a specific element on the screen full of animation. But not with staging.
Staging is a principle used widely in theater and movies, as well as animation. It is the use of movement and lines to draw the audience’s eye to a specific element on the stage/screen or material UI animations. Imagine someone pointing a hand upwards; with that movement, your eye will automatically be drawn to whatever the character is pointing at, even if it is the empty sky.
Through the usage of staging, you can easily enhance the interface and draw the user’s eye towards the important animated UI elements on the screen, perhaps the CTA for conversion. Even though it is often overlooked, this principle is crucial to make the interface and CTAs on it functional. However, make sure that there are not too many animations; otherwise, the users might get a little too confused.
Create An Organic Arc Movement
Humans don’t move in straight lines. In fact, no one does. From the smallest of animals to the biggest ones, we are all moving in the organic and natural way, which is often circular or in an arc motion.
And that’s why the principle of arc motion is important to introduce an organic smooth transition into the interface. Rather than having a straight line as the progress bar on the app, you can add a circular or half circle animated UI elements and this small change will add a touch of life and grace to the design.
Secondary Action To Emphasize The First
Often just a single action is not enough. It needs to be emphasized with another secondary action that enhances the importance of the effect of the previous one.
Imagine laughing at a joke, but then doubling over when laughing because the joke is just too funny. While laughing was the primary reaction to the joke, denoting its quality, doubling over in laughter denotes that the joke is indeed very funny.
When integrating animation on UI, the application of the secondary action principle in UI animation helps emphasize the effect of the primary action. This makes the primary animation more prominent and improves the quality of the micro-interaction.
Exaggerate For Better Emphasis
Subtle is often the suggested way of designing UI elements. But, sometimes you need to exaggerate some animated UI elements to get the desired effect.
Imagine the exaggerated expression of a certain character and how it accentuates the importance, or rather their reaction to the situation. It has a certain effect of drawing the audience’s eye to the scene and examines it more closely. And that’s exactly what you can do by adding exaggerated animation to the interface.
Rather than just altering the text when the screen changes, change the entire color through subtle animation. It will help to draw the eye of the users to the screen and whatever else has transformed on the animated interface elements, making them go through all the content on the page rather than just vaguely scrolling. Applying exaggeration to UI animation can often engage the users better.
Follow Through & Overlapping: The Crucial Combo
Follow through and overlapping are two action-based animation principles that help the scene look more realistic. Consider the GIF below.
Marie, the famous cat from the Aristocats, walks while moving her tail slightly. But her tail does not stop moving when she stops moving. It keeps on waving for a little while, giving a sense of continuity to the scene.
The action of walking is an overlapping movement, where the different limbs move simultaneously but differently. And the tail waving is the follow-through action. This principle makes for a better effect. The elements can be made to easily follow through with other overlapping elements on the screen, increasing UI interactions.
The Illusionary Effect Of Solid Drawing
This principle helps the UI artists to add more depth and weight to the animated interface elements, even if they are drawn as two-dimensional designs.
The expert use of light, shadows, and line drawings can make the buttons seem more real than a mere 2D animation. Following this principle of UI animation adds more depth to the animation and improves the overall experience of the users.
Create An Appeal No One Can Ignore
Who does not like looking at beautiful and appealing things?
Animations are often created to make a static scene look lifelike, that’s understandable. But often you need to add a little appeal to the design or the animation to draw the audience’s eye and please their aesthetic senses. And that’s why appeal happens to be an important rule among the 12 principles of animation.
So don’t be afraid of adding a bit of design to the animation. The added swish effect as the text appears on the screen, that little bouncing effect when users tap on a button makes the UI interactions all the more engaging and enjoyable.
Wrapping Up: Animation Makes Everything Enjoyable
From animated movies to small animations on UI screens, the art of making static things come to life has shaped our preferences for entertainment. And that’s why UI animation prototyping when designing the interface of a web or mobile platform is not going to be a bad idea. However, do not forget the matter of functionality. The perfect balance among animation and functionality in UI is going to make your online platform the true champion of the market.