Ninety-three years ago The Walt Disney Company was founded. Bringing a revolution in animation with an impact that can be seen and experienced today, Disney has led the field of animation for decades. Despite its incredible impact, Disney is sometimes seen as being a bit outdated when it comes to interface animation. In fact, you might be asking yourself what a company that has specialized in full length animated movies even knows about interface animation?
It all comes down to the 12 classic (basic) principles of Animation. Pioneered by Frank Thomas and Ollie Johnston, these simple principles transcend styles and remain relevant in most animation venues. If you are interested in designing the best most eye popping interfaces for websites and apps, then keep reading. We get into how you can learn from the best and incorporate principles that will make your concept and designs stronger.
Incase you are unfamiliar, the 12 basic principles of animation include an appeal, solid drawing, exaggeration, timing, second action, arc, slow in and slow out, follow through and overlapping action, straight ahead action and pose to pose, staging, anticipation, and squash and stretch.
Why The 12 Basic Principles Are Relevant Today
You might be asking yourself how basic principles of animation have anything to do with a split second animation or even UX purposes. Even in extreme instances, the basic principles of design are still relevant. Simply put, they help to create a set of standards and rules that allow us to better communicate our ideas through the animations we create.
An animation is a representation of something real or imagined that is judged by human nature. What this means is that we as people have a universal “common sense” when it comes to what we expect out of objects moving. Everything obeys the laws of gravity, moves in predictable ways, etc. Stepping away from these things can cause interface animations to become jarring and stand out for the wrong reasons. While you can leave things up to defaults, you can gain more and communicate your message better by focusing on the 12 basic principles.
For example, take spacing and timing. These two classic principles can help you express things like causality, emotions, and even express weight or the gravitas of a particular moment. Stretch and Squash can show you how the traits of a particular objects shape can change how people react and identify with it. Anticipation and follow through can help you imply certain things with simple movements. The 12 basic principles can help you make something that distracts and turn it into something that effectively grabs attention.
Another way to consider how the 12 basic principles can affect your interface animation is to consider typography. The very words you are reading are written in a font that is specifically designed to convey meaning simple and straightforward. Behind the design of these words were countless rules and decisions that helped make it as popular as it is today. You can go with a simple typeface or create something that better expresses and works with the underlying meaning central to your project. Similar to the rules of typography, the 12 principles of animation can help you better understand why specific changes can make such dramatic changes in the representation of your animation.
It provides you with the vocabulary you need to understand your craft fully.
How You Can Benefit From The 12 Basic Principles
The 12 basic principles help you to understand better how the changes you make affect the final result. They also help you limit the potential of expression to create something that people can better relate to. For example, the principle of exaggeration provides a framework for you to overemphasize what is important without seeming overly comical or ludicrous. Instead of limiting yourself to a single principle, tying everything together in the 12 principles total will provide the full range of expression you are looking for.
For the longest time, web design was static. Having a way to talk about animations within this context is central to doing it right. It allows you to better convey your ideas to clients as well as makes your discussion more focused on changing specific things if something is wrong or out of place.
A shared vocabulary can save a lot of time. It becomes the starting point for your design team in which a more complex and nuanced understanding can emerge. It saves you a great deal of time trying to build up terms from scratch and provides an existing structure that is relatable well beyond interface animation.
The 12 basic principles of animation can provide the framework you need to better understand animation. At the same time, it is not without its limitations. While the 12 basic principles can teach us a great deal. They should not be followed too literally. They were designed within a context dating back several decades before many of the newer techniques we utilize were designed. Another thing to remember is that when dealing with interface animation, utility and purpose trump telling a story. The basic principles were designed with story telling in mind, and as a result, can be limiting if followed too strictly. Consider focusing on squash and stretch, anticipation, follow-through, appeal, and timing in particular.
The 12 basic principles form a tool for learning. How you incorporate them into your business and design will depend entirely on your needs and what your objectives as a designer and artist are. Your ultimate palette is the Internet, which is in and of itself constantly changing, updating, and expanding. These are all things that the original creators of the 12 basic principles of animation could have never guessed when they made their list.
Where Does That Leave Us?
Our toolset is dramatically different from what the original Disney animators used. Also, our goals are different. With these two important caveats in mind, you can begin integrating what you have learned from the 12 basic principles of animation into your work. Representing countless decades of research in their own right, you stand to gain a lot by learning from animators who came before you.
The best way to begin is by taking individual principles and playing around with them. See what each does to the final result and get a sense of how they can make your animations change. Doing so can give you the understanding you need to effectively change what you have created if your client has an issue with some part of it. The more you experiment with the techniques of the past, the more you’ll be ready for whatever comes next.