Understanding the Motion Design Process

international2016


Digit // Saaaaaaavings from Giant Ant on Vimeo.

Motion Design is a powerful tool for communicating and explaining complex or new ideas in a condensed period of time. While motion designs are often very brief and involve graphics with minimum detail, the process is far from simple.

The creative team at Giant Ant in Vancouver Canada were kind enough to share their motion design process with HOW Design. James Pannafino sat down with the Producer Liam Hogan, Creative Director Jay Grandin and Jorge Canedo Estrada to get insights to the creative process behind DIGIT // SAAAAAAAVINGS motion design.

Context and Usage

Before the creative and development process starts, the context of usage must be clearly understood between client and design studio. For the Digit explainer video, the main context would be their home page, where it would appear as a introduction video. The secondary use would be other places such as email blasts and in-person presentations.

Creative Brief and Client Communication

The first step in the creative process is establishing a clear path of communication. In this case, Giant Ant worked with Bruno Miotto the contact for Digit. While meeting and coming to a verbal consensus is a good start, Giant Ant uses the Brief Creative Questionnaire below to clearly define in writing various creative touchpoints. Once the client has filled out the Brief Creative Questionnaire, concepting of the script can begin.

Brief_Creative

Brief Creative Questionnaire Touch Points:
01/ OVERVIEW
02/ GOALS & OBJECTIVES
03/ AUDIENCE
04/ MESSAGE
05/ REQUIREMENTS
06/ PERSONALITY
07/ BACKGROUND

Development of the Script

To develop a script, the creative leadership (creative and art director) and producer of Giant Ant met to create a basic outline. The team worked together to craft the essence of the message before defining words that would be spoken in the voice over. One of the influencers that came across the board was a commercial series for Google Chrome book narrated by actor Jason Schwartzman. The series of micro commercial were playful and self aware.

How to use a Google Chromebook from Aaron Langley on Vimeo.

After the creative team developed a first draft, one of the team members fleshed out the script.

Script_1st

Later, the script was shared with others via Google Docs, where anyone could make changes and add comments. The Google Docs collaboration step ended up changing around 50% of the words in the script.

Script_Final

Thumbnail Storyboard

Storyboard

Once the written script was fleshed out, a series of hand-drawn thumbnail storyboards were created. The Digit motion design was broken down into a series of scenes that each addressed a line of dialogue from the script. Frame-by-frame sequences of each scene show how the animation might work. For this project, Giant Ant created multiple thumbnail sketches that show different visual directions for the motion design. Giant Ant stresses not to get attached to digital tools in this stage, as pencil sketches give the most creative freedom.

Animatic

Animatic Original

The animatic is a proof of concept of motion to see if the thumbnail storyboard elements work when they are put in motion. The point isn’t to create smooth transitions, but to establish timing: where design elements will show up and work together in a live composition. It is also used to get a feel for how the visuals will align with the voiceover file. In some cases, Giant Ant used quick cuts to move from scene to scene, and in other cases the animatic showed a few more motion details, but in the end it never progressed beyond the pencil sketch style established in the thumbnail storyboard.

Moodboard

Mood_board

Instead of creating multiple full-color frames, a moodboard is used to give a look and feel for what the different frames and design elements will look like. Moodboards can use graphics created in-house, or they can include outside visual snippets to help define the mood of the visual design. Giant Ant used bright, bold colors and flat shapes to lend a fun yet welcoming feeling to their motion design.

Visual Assets and Style

Illustrator

At some point, full-scale and full-color design elements need to be created, Giant Ant used Adobe Illustrator to create color palettes, basic design elements and even final typography. They also created unique style frames, both for the client to see and for other designers to work from.

Test Animations and Motion References

animation AE

Once the visual assets and styles are created, test animations are created and used as a motion reference. These animations become a key motion reference for the other animators to base their animations off of. Similar to the style frames, the art director or lead animator will create the motion reference first, before other motion designers begin to create their scenes.

Project Management

Spreedsheet_Master

After the storyboard, visual style and key motion references are created, the scenes are often split between different animators to realize the motion design. Giant Ant uses Google Sheets as a project management tool to show who is working on what frame, the progress and what is completed so far.

Final Motion Design

Digit_homepage

After each scene is connected and the voiceover is properly implemented, the final motion design is ready for viewing. The final context for Digit’s motion design animation was the home page, right beneath the main navigation and above the call-to-action to sign up.

Creative and Management Tools used during the creation of the Digit motion design:

  • Google Docs and Sheets – For creation of script and project management.
  • Adobe Illustrator – For creating moodboard and visual assets.
  • Adobe After Effects – For creation of animatic and main motion design.
  • A little Adobe Flash as needed – For specific animation components.
  • Cinema 4D to create 3D movements – For specific animation components.

End Solution

Digit wanted a visual way to concisely communicate how their application worked and benefited the user. Through a tea- based creative process, Giant Ant worked to design and develop a motion design that easily tells the viewer how Digit works and the benefits of using it.


Online Course: Adobe After Effects I — Master the Art of Motion Graphics

After Effects is a powerful tool for creating motion graphics. In this course, you’ll discover how to create motion art by animating text and objects and compositing video and images, adding audio and effects. Important topics include how to set keyframes on a timeline, transform properties, and use motion paths, masks, and effects. Learn more and register.

COMMENT