Motion

Our approach to motion design utilizes both design and illustration principles to accentuate otherwise static elements into a kinetic form of visual communication that enhances the user experience. This also gives us an opportunity to inject Burton’s unique personality. 

Read main content

Motion Principles

These principles should always be considered while working on a motion project. 

  • Natural
  • Intelligent
  • Tempo

Natural

The animation and motion work should have a natural and organic feel to it. Consider easing keyframes to mimic organic and natural movement within your composition. Elements and objects shouldn’t start at full speed—there should be a natural build up from slow-to-fast, or fast-to-slow. 

Your motion work should feel natural and mimic how objects from nature move in the real world through forces such as gravity.

Intelligent

Motion should enhance the user experience. It should surprise and delight. It should be smart. It should not be distracting.

In this example of our brand site navigation—notice how the animation is purposeful in helping highlight sections for the user making navigation easier. Motion should not exist just to exist.

Tempo

Motion should either set the tempo for the project or be cohesive in tempo to the additional elements and assets within the composition. 

DON’T: Notice how the type and logo are set at the same speed. This doesn’t accomplish setting the tempo and results in a lackluster animation.
DO: In this animation the type and logo elements set a more engaging tempo that is easier to digest and result in a more interesting overall composition.

If you’re setting the tempo of the project with your motion design—make sure the tempo expresses the right tone. Any additional elements and assets, if included in the composition, such as video, music and sound, also need to reflect that tone.

If you’re not setting the tempo of the project with your motion design—make sure that the tempo of the elements in your motion design are cohesive with the additional elements and assets within the composition, such as video, music and sound. For example, if the video within your composition is moving at a mellow tempo—you want to match that mellow tempo with your motion design to ensure cohesiveness. 

Tone + Style

There are two main styles we use in our motion design. Determining the right style to use will help you achieve the right tone—ensuring that you’re enhancing the user experience with your motion design, and not distracting from it.

Our two motion styles borrow and utilize principles from our two illustration types: expressive and technical.

See how we use our two illustration types. → 

  • Our traditional style of motion work is seen as more expressive in application.
  • Our modern style of motion work is seen as more technical in application.

Traditional

The motion work that looks like it is hand drawn is what we refer to as traditional. The traditional style doesn’t necessarily have to be hand drawn, as there are effects within motion design software to mimic the hand drawn look and feel.

Motion designers and animators have different processes to achieve a traditional style—use the process that works best for you, and what is best for the project. Some projects may be under a tight deadline and will limit the amount of time you can put into hand drawing motion elements—this might be the opportunity to mimic the traditional style through effects within your motion design software (most likely Adobe After Effects), which will be a time saver—willing it doesn’t negatively effect the quality of the work. 

Akin to our expressive illustration type of communicating emotionally—drawing our inspiration from what we know best: having fun in the mountains—the traditional style is used to express our brand personality by injecting the playfulness of the brand through the look and feel that hand drawn elements best capture. When the elements of your motion design aren’t perfect vectors and shapes it conveys a sense of humanness. 

A project with a tone that require you to communicate in a playful and human manner—use the traditional style in your motion and animation work. 

Modern

The motion work that prioritizes the use of clean shapes is what we refer to as a modern style of motion design.

Akin to our technical illustration type of communicating information without holding any emotional weight—the modern style is used similarly, as a way to better the user experience and journey through functional and complementary motion design.

Examples of this modern style of motion design can be observed on web through the animation of diagrams and UI elements—and also through broadcast motion design, for example the animation of lower third graphics of a televised/web-streamed event.

A project with a tone that places the emphasis on clear, concise and functional communication over playfulness—use the modern style in your motion and animation work.

Motion Summary

01
We have three overarching motion principles that always need to be considered while working on a motion project: natural, intelligent and tempo.

02
Utilize the easing of keyframes and the speed graph.

03
Your motion work should not be distracting—it should exist to enhance the user experience.

04
We use the traditional style of motion design to communicate emotionally in a playful and human manner drawing on principles from our expressive illustration type.

05
We use the modern style of motion design to communicate information in a functional and complementary manner drawing on principles from our technical illustration type.