Principles of Animation Applied to Design
Making Meaningful Causalities that are Clear, Believable, and Engaging
Sindre Punsvik
Department of Product Design
Norwegian University of Science and Technology
ABSTRACT
Can designers learn something from the tradition of animation? Both animators and designers can be seen
as making causalities with meaning. By analyzing the traditional principles of animation, it was revealed
that they made the animation clearer, more believable, and more engaging. Therefor this paper will show
that one lesson designers can learn from animation is that they both should aim to create meaningful
causalities that are clear, believable and engaging.
KEYWORDS: Animation, Principles of animation, Design, Methods, Story
1.
INTRODUCTION
Both Disney and Pixar are famous for their
quality animated features that have captures the
heart of the audience. Can designers learn
something from the animators behind these films
that can be used to create better design?
Before Disney’s animators could make "Snow
White and the Seven Dwarfs"(Hand et al. 1937)
they needed to figure out how to make the
animation good enough to meet Walt Disney's
high standards. The animators eventually found
some techniques they could use to improve the
scene and motion. These techniques ended up as
the fundamental principles of animation, rules of
trades that are used by animators even today.
(Thomas and Johnston 1995, Lasseter 1987) This
paper will delve into how these principles
enhance the animation, and question if good
design can be improved in a similar manner.
The paper will first look at the background for the
principles of animation, before it will explain how
the effect of the principles on the animation can
Principle of animation applied to Design 1
be seen as creating clear believable and engaging
causalities with meaning.
After establishing an interpretation of how the
principles work, it is time to see if it is applicable
to design. There are several uses for animation
for designers. It can be found as a tool for testing
new concepts with simulations, for sharing
information and explanations, in the making of
GUIs (Baecker and Small 1990, Mirlacher,
Palanque, and Bernhaupt 2012, Wang, Juhlin,
and Johnson 2014). However, this paper is not
about how designers can use animation, but
rather what designers can learn from animation.
The paper will show that both animators and
designers will benefit working with the aim of
creating meaningful causalities that are clear,
believable, and engaging.
2. THE BACKGROUND FOR THE PRINCIPLES
OF ANIMATION
The principles of animation were created in the
period between the late 1920s and the late
1930s. The animators at Walt Disney studio were
working hard to refine their animation, since
Walt Disney demanded better animation from
them. Disney needed improvement to meet his
visions so he could tell the storied he wanted. He
needed convincing movement that could bring
the characters to life so that the audience would
get involved and care about the story. (Thomas
and Johnston 1995)
To meet Walt Disney’s standards the animators
started exploring how they could improve their
motion. They experimented with various
techniques; they shot movies of motion that
were studied repeatedly, and they shared and
discussed their findings. Eventually they gave
names to the most successful processes and
perfected them until they had 12 fundamental
principles of animation (Thomas 1984, Thomas
and Johnston 1995, Lasseter 1987):
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Squash and Stretch
Anticipation
Staging
Straight Ahead Action and Pose-To-Pose
Follow Through and Overlapping Action
Slow In and Slow Out
Arcs
Secondary Action
Timing
Exaggeration
Solid drawing
Appeal
and brought along as animation has moved to 3D
animation (Lasseter 1987), interactive games
(Tomlinson 2005), and interfaces (Chang and
Ungar 1993).
3.
THE ANIMATION AND THE PRINCIPLES
To understand what role the principles plays in
creating good animations, an understanding of
animation needs to be established. The word
animation comes from Latin from animare which
means ‘instill with life’. Animation uses a
sequence to create the illusion of motion.
(Animation, URL) The animation that Disney
created can also be seen as stories told through
pictures.
3.1 Animation need a meaning
Animation like any good story need a meaning. In
his book “Invisible Ink” McDonald writes about
how a story needs a point, a reason to be told,
and that this is what gives a story resonance with
the audience. McDonald calls this concept an
armature meaning the idea that the story is built
upon. Everything in the story is there to enforce
this idea to the receiver. The meaning of a story
doesn’t need to be spelled out, like the moral of
a fable, but should be the feeling the audience is
left with after the story has been told. It is
possible to make some animation with just
motion without much deeper meaning, however
without any clear point the animation becomes
shallow and will not stick with the audience.
(McDonald 2010).
3.2 Animation consist of causalities
The paper will come back to these principles in
more details, when it discusses their effect on
animation.
Thanks to these principles Walt Disney was able
to produce his first animated feature film “Snow
White and the Seven Dwarfs” which became a
great success. Later these principles have
become a standard in the animation industry,
Principle of animation applied to Design 2
The animation can be said to be made of
causalities, both in an overall arc of the story and
in every motion that the pictures creates.
A story typically has a start, middle and end. In
his book, McDonald (2010) presents seven steps
to a better story. These seven steps is about how
to create the start, middle and end of the story,
so that the story has a good and coherent
causality.
The start of the story should present to the
audience everything they need to know to
understand the story that is to follow, like the
main character, where the story takes place and
what the current situation is. The setup in the
beginning is essential for the rest of the story,
and often when the audience feels like there is
something off at the end; it was because
something was missing in the setup.
In the main part of the story, something has
happened to break the status quo that was
established in the beginning, and a chain of
events follows. One thing leads to another, and
the story unfolds.
At the end of the stories is the last chain of
events leading up to the climax. Following the
climax the story needs to be rounded off. This
can be done with a denouncement about how
the story’s causalities affected the world, or if the
protagonists lived happily ever after.
In additional to the causalities that drives the
story forward, each and every motion in the
animation has their own causality. Animation can
give visual cues to help the viewer understand
what is happening before during and after an
action (Chang and Ungar 1993). Several of the
principles of animation are about this causality.
Anticipation helps prepare the audience for the
next action. A character can look at a pit before
bending down making him- or herself ready for a
jump over the pit. Follow through and
overlapping is about how in a moving system like
a body, the different parts does not start and
stops their motion at the same time, the hair
might still be moving after the head has arrived
to its destination. Secondary action is about how
an action of one object result in an action of
another object, i.e. a character can push a class
so it falls down from the table. (Thomas and
Johnston 1995, Williams 2009)
Principle of animation applied to Design 3
3.3 The principles makes it clear
If a good animation can be said to consist of
causalities with meaning, the principles of
animation are used to enhance this. One way
they do this are by making sure an idea or action
is unmistakably clear. The audience's eye must be
led to exactly where it needs to be at the right
moment, so they do not miss the idea or action
(Lasseter 2001).
The principle of staging is all about presenting
the idea so that it is complete and unmistakable.
This is a very general principle that stems from
theater. Everything be it an action, personality,
mood or expression needs to be shown in a
manner that makes the audience aware and
affected by it. How everything is framed plays a
huge role in how well it can be understood, and
everything should be done considering how to
promote the point of the story. (Thomas and
Johnston 1995)
In additional to staging there are other of the
principles that help make the animation clearer.
Anticipation helps grab the audience’s eye and
prepare them for the action, however if it is not
timed properly it will be wasted (Lasseter 2001)
Exaggeration on the other hand is about
emphasizing the idea. Going to the heart of
something and develop its essence. Exaggeration
work like a caricature that emphasize the
important bits and downplay whatever that is
less important. A caricature of a person can be
faster and easier to read than a regular photo,
using exaggeration can in this manner make the
story clearer. (Thomas and Johnston 1995)
3.4 The principles makes it believable
The animators found the principles of
exaggeration after Walt Disney asked for more
realism in the animation again, and again. This
realism was not copying a real motion, but make
it convincing for the audience. At the same time
it was important that the exaggeration did not
make the motion phony, Disney would not
tolerate anything that destroyed believability.
(Thomas and Johnston 1995)
A lot of the principles of animation are there to
help make the animation more believable. Many
were found after careful study of motion in the
real world. One of the most influential new
discovery the animators found was the principles
of squash and stretch. This principle is about how
the motion affect the object. “When an object is
moved, the movement emphasizes any rigidity in
the object. In real life, only the most rigid shapes
(such as chairs, dishes and pans) remain so
during motion. Anything composed of living flesh,
no matter how bony, will show considerable
movement in its shape during an action.”
(Lasseter 1987) Squashing and stretching help to
convey the materiality of an object.
Since many of the principles of animation are
based on observation, they are also based on
physical laws, like follow through that is based on
the law of inertia, which is about how objects
keeps a constant motion unless a force act upon
it. However even if the motion is based on
reality, the animator should rather extract the
essence of what they need, instead of copying it.
(Garcia 2012)
There are several other principles that helps
improve the believability of the animation. Some
principles were based on observable causalities
like the earlier mentioned anticipation, follow
through and overlapping, and secondary action,
others were based on how things tend to move
like slow in and slow out.
The principles of solid drawing also helps
enforcing the idea and make the animation
believable. This principle is about observing how
objects works in three dimension and making
sure the drawings looks like it has volume, weight
and depth. (Thomas and Johnston 1995)
Principle of animation applied to Design 4
Figure 1: The principles of solid drawing illustrated, the
rightmost Mickey looks flat, while the leftmost have
more volume and therefore looks more believable.
(Thomas and Johnston 1995)
3.5 The principles makes it engaging
The animation might be clear and believable and
have good causalities with meaning, but unless it
is engaging so people will watch it, everything is
for naught. The audience need to become
invested in the animation and care about what
they are watching.
The principles of appeal is not about making
something cuddly, though this might have its
appeal. Appeal is about making anything that the
audience would like to watch, be it a quality of
charm, pleasant design, or a striking pose. A
drawing can lose appeal by being complicated or
hard to read. (Thomas and Johnston 1995) The
appeal can also be seen in the overall design of a
scene.
Another way of engaging the audience is through
using personality. If the audience cares about the
characters they get invested and curious about
their story. The animator can create personality
through use of anticipation that helps the
character looks like it thinks. If the character
leads his or her motion by using the eyes to focus
on their task beforehand the character will seem
more intelligent. How a character moves also
affect how the personality is perceived, so good
use of timing, squash and stretch, and
exaggeration can be useful to create a
personality for a character. (Lasseter 2001)
4. APPLIED TO DESIGN
The animation principles can bee seen as
improving the animation by making sure it has
clear, believable, and engaging causalities with
meaning. The paper will now try to see if and
how these aspect of a good animation can be
essential aspect for a designer as well.
In this paper design is understood as planning a
product (Design, URL). A product can be anything
that someone interacts with like a physical
object, an interface or a service.
4.1 Design need a meaning
Design as well as an animation need a meaning
or a purpose. In their book about the design
methods “Vision in Design” Hekkert and van Djik
tells us to remember that design is the act of
defining a vision of what to create. Designing
start with establishing the ‘Raison d’être’ (the
reason for existence) for the final design.
(Hekkert and van Dijk 2011) There needs to be
some kind of meaning behind a design, the
fundament that the rest of the design process
can be built upon.
4.2 Design consist of causalities
Norman talks about causalities in his book “The
design of everyday things”. He explain that
people looks for causes of events, to form
explanation and stories. From own experience
and stories from others people tend to form
generalizations about how people behave and
things work. When cause-and-effect pairings
make sense, people accept them and uses them
to understand future events. (Norman 2013)
Causality in design is also about how a user
interact with a product. Cause-and-effect is
created at every touchpoint where the user is in
contact with the designed product. This causality
can be exemplified with sequencing in service
design. This consist of three steps, a pre-service
period, the actual service period and the
subsequent post-service period (Stickdorn and
Principle of animation applied to Design 5
Schneider 2012). A products causalities might be
mapped by methods like user journey mapping
(Martin and Hanington 2012)
4.3 Clear
It is important to make design clear. Dieter Rams,
an influential designer that worked for Braun
formulated 10 principles for great design one of
them was: “Good design makes a product
understandable. It clarifies the product’s
structure. Better still, it can make the product
talk. At best, it is self-explanatory.” (Makovsky
2004) When the product is unclear it will make it
hard to use and bode for bas user experience.
“Keep it simple, stupid”, “Kill your darlings” and
Ockham’s razor are all expression that is about
keeping the focus on the meaning behind the
design, and remove elements that can distract
the user to create a simple design.
4.4 Believable
It is important that the user feel like they can
trust a design and to do this it is important that
the design is believable. One aspect of this is
about how the product is perceived by the users,
a spoon should not look like it will bend and melt
as soon as it is put into the soup, and an exclusive
brand lose credibility if it uses a kitsch
commercial.
The animators looked at real motion to get a
basic for their motion. Designer could do this as
well, they can use techniques like observation
and user testing (Martin and Hanington 2012) to
base their design in the real world, and make it
more credible.
4.5 Engaging
Just as animation needs to be engaging to have
an appeal to the audience, so do the design to
appeal its users. Norman explain this by showing
how great designers produce pleasurable
experiences. Experiences are critical to define
how people remember
(Norman 2013)
their
interaction.
There are several other methods and principles
of design that is about making the design
engaging, one of them is the aesthetic-usability
effect is about how aesthetic design are
perceived as easier to use. (Lidwell, Holden, and
Butler 2010)
5. COMMENTS
This paper concerns what a successful design or
animation might consist of, but have not
considered how to reach this point. The concrete
techniques and methods that the principles of
animation consist of are not applied directly on
design in this paper. Instead, the results and
concepts behind them have been tested to see if
they might be relevant for designers as well as
animators.
This paper shows that the traditional principles of
animation creates animation that have
meaningful causalities that are clear, believable
and engaging. This is only one interpretation, and
there might very well be other ways to
understand how the principles creates successful
animation. It might also be possible to create
fairly good and useable design or animation that
does not consist of meaningful causalities that
are neither clear, believable nor engaging.
There has been one principle of animation that
has not been considered in this paper, namely
the principle of straight ahead action and poseto-pose. The principle is about the approach of
the animator uses to animate, and in that sense
acts different from the rest of the principles that
all impact the end result. There are aspects of
Disney’s technical innovation that were used in
“Snow white and the Seven Dwarfs”, like how the
sound and music is synchronized with the
animation, technicolor and advance camera
techniques, that haven’t even been considered in
this paper. (Kaufman 2012)
Principle of animation applied to Design 6
6.
CONCLUSIONS
The traditional principles of animation can be
seen as making successful animation by making
sure it has meaningful causalities that are clear,
believable and engaging. The paper has tried to
show how this is something designers should
strive for in their work as well. The lesson derived
from the animation principle can hopefully help
designers to make better design, design that are
clear, believable, and engaging causalities with
meaning.
7.
ACKNOWLEDGE
I want to acknowledge Barbara Mones who
introduced me to the world of animation, Brian
McDonald who helped me open my eyes anew
when it comes to stories and Casper Boks who
have helped me as a designer and in writing this
paper. I also want to thank my friends and peers,
in particular Bo-Nicolai Gjerpen Hansen, which I
have discussed this topic with, and have helped
me refine this paper.
REFERENCES
"Animation."
Accessed
20.
November.
http://www.oxforddictionaries.com/defi
nition/american_english/animation.
"Design."
Accessed
20.
Nov.
http://www.oxforddictionaries.com/defi
nition/american_english/design.
Baecker, Ronald, and Ian Small. 1990. "Animation
at the interface." The art of humancomputer interface design:251-267.
Chang, Bay-Wei, and David Ungar. 1993.
"Animation: from cartoons to the user
interface." Proceedings of the 6th annual
ACM symposium on User interface
software and technology, Atlanta,
Georgia, USA.
Garcia, Alejandro L. 2012. "Principles of
animation physics." ACM SIGGRAPH 2012
Courses, Los Angeles, California.
Hand, David, William Cottrell, Wilfred Jackson,
Larry Morey, Perce Pearce, and Ben
Sharpsteen. 1937. Snow White and the
Seven Dwarfs. United States: RKO Radio
Pictures.
Hekkert, P., and M. van Dijk. 2011. Vision in
Design: A Guidebook for Innovators: BIS
Publishers.
Kaufman, JB. 2012. Snow White and the Seven
Dwarfs: Murdoch Books.
Lasseter, John. 1987. "Principles of traditional
animation applied to 3D computer
animation." ACM Siggraph Computer
Graphics.
Lasseter, John. 2001. "Tricks to animating
characters with a computer." SIGGRAPH
Comput. Graph. 35 (2):45-47. doi:
10.1145/563693.563706.
Lidwell, William, Kritina Holden, and Jill Butler.
2010. Universal principles of design,
revised and updated: 125 ways to
enhance usability, influence perception,
increase appeal, make better design
decisions, and teach through design:
Rockport Pub.
Makovsky, Paul. 2004. "Dieter’s Top Ten."
Accessed
1.
December.
http://www.metropolismag.com/Februar
y-2004/Dieter-rsquos-Top-Ten/
Martin, B., and B. Hanington. 2012. Universal
Methods of Design: 100 Ways to
Research Complex Problems, Develop
Innovative Ideas, and Design Effective
Solutions: Rockport Publishers.
McDonald, B. 2010. Invisible Ink: A Practical
Guide to Building Stories that Resonate:
Libertary Company.
Principle of animation applied to Design 7
Mirlacher, Thomas, Philippe Palanque, and
Regina Bernhaupt. 2012. "Engineering
animations
in
user
interfaces."
Proceedings of the 4th ACM SIGCHI
symposium on Engineering interactive
computing systems.
Norman, Donald A. 2013. The design of everyday
things: Revised and expanded edition:
Basic books.
Stickdorn, M., and J. Schneider. 2012. This is
Service Design Thinking: Basics, Tools,
Cases: Wiley.
Thomas, Frank. 1984. "Can classic Disney
animation be duplicated on the
computer?" Computer Pictures 2 (4):2026.
Thomas, Frank, and Ollie Johnston. 1995. The
illusion of life: Disney animation:
Hyperion New York.
Tomlinson, Bill. 2005. "From linear to interactive
animation: how autonomous characters
change the process and product of
animating." Computers in Entertainment
(CIE) 3 (1):5-5.
Wang, Jinyi, Oskar Juhlin, and Eva-Carin Banka
Johnson. 2014. "Previsualization with
computer
animation
(Previs):
communicating research to interaction
design practice." Proceedings of the 26th
Australian Computer-Human Interaction
Conference on Designing Futures: the
Future of Design, Sydney, New South
Wales, Australia.
Williams, R. 2009. The Animator's Survival Kit: A
Manual of Methods, Principles and
Formulas for Classical, Computer, Games,
Stop Motion and Internet Animators:
Faber & Faber.