Down the Street Designs’ Motion Design Process

hdl-banner


The process of crafting a narrative and communicating messages for motion design work has distinct steps. Paul Zappia and Colin Ozawa of Down the Street Designs (or DTS) created a motion design for InMovement, whose goals are to reinvent the way we work and address the harmful effects of a sedentary day. A branch of Life Fitness company, InMovement makes workout equipment for desks and the work environment. This article will take you through the Down the Street Design’s step-by-step motion design process and show you behind the scenes aspects of the team’s creative workflow.

header_image

The Prompt

Before the creative process began, DTS was given a clear prompt around which to frame the motion design: “Create a two-minute video about the health risks involved with sitting all day and how InMovement is working to solve this problem. Make sure to stay consistent with InMovement’s brand guidelines.”

The Script

script_3
In this case specifically, InMovement and Column Five came to Down the Street Designs with a finalized script, a common occurrence with DTS clients. In other cases, DTS clients sometimes collaborate with them on their script and/or VO (Voice Over). If a client is still in the process of formulating the script, for example, DTS suggests ideas for visually-driven words (or words that provide easy-to-understand visual cues), which are always helpful.

Storyboard (This step is extremely important!)

storyboards
Storyboards are sketched keyframes that are used to create a simple and cohesive narrative before all the nitty-gritty design stuff. If the timeline provides for sketches, they can simplify the process of editing the visual narrative. Sketching each frame and adding notation helps illustrate the visual cues for the client, taking the guesswork out of the process. This step provides a visual bridge between what the client sees and what happens as DTS begins creating the motion design.

Moodboard

mood board
After the storyboards are created, moodboards are developed to show all stakeholders the visual style of the project. Gathering images and conducting research for visual inspiration provides design cohesiveness during the style frame development. This prevents the team from having to create multiple versions of a finalized visual ideation. DTS’ moodboards for InMovement show multiple influences: the Olympics pictograms (top left) show how basic shapes of body can communicate kinetic movement, while the bottom half of the moodboard shows examples of vivid yet simple color relationships that influence the color scheme.

Style Frames

style_frames
“Essentially — style frames are storyboards on the next level,” DTS says. “This allows us to see what each keyframe of the video will actually look like.” Style frames take the movement and language of the storyboard and color and shape of the graphics moodboard to show what the final keyframes of the motion will look like.

Create Assets

create_assets_2
When the style frames are set and test animations are complete, the creative assets can be formatted for individual animation components. These are the files that will be used to animate for the final motion in Adobe After Effects. Images can be created and brought into After Effects in two different ways: for flat color areas, the process is Adobe Illustrator to Adobe After Effects; for images that need textures built into them, the process is Adobe Illustrator to Adobe Photoshop to Adobe After Effects.

A NOTE (Create with original prompt in mind, don’t forget what you start.)
“For the style and animation — make sure that you’re keeping the prompt in mind. For example: In the InMovement style frames we used colors and graphic illustrations that matched their brand.”

Test Animations

Ready for the weekend. #tgif #downthestreetdesigns #dts #animation #aftereffects #illustrator #fitfridays

A video posted by Down The Street Designs (@dtsdesigns) on


Not all motion designs can be completely visualized in static storyboard format. Sometimes the feeling of movement must be established before the final visual assets are created. Test animations help visualize the timing and context through short motion designs that show aspects of the way the final animation will function. Since the final motion design will be created in Adobe After Effects, the test animations are completed in the same program.

Animation

With all the planning, creative ideation and refinement complete, the final motion piece is ready to go.

Rendering

Once everything has been animated, DTS renders the files out as H264 (best for web) with dimensions of 1920px by 1080px or 16:9 screen ratio. They often export file in Quicktime, which allows for easy compression. The final animation is typically rendered in After Effects, while Media Encoder is used more for rendering while the team views in-progress motion work. For in-process drafts, compressions can be at either 1020px or 780px.

Post Design Practice

collect_files
As a way of wrapping up the project and supplying the client with all the final creative assets, DTS uses the “collect files” function in After Effects. To collect files in AE, you simply select File, drop down to Dependencies and click on Collect Files to collect creative assets used in the final video. Once collected, the team sends everything over to the client for their reference and usage.

Final Thoughts

The team at Down the Street Designs says it believes in a clear process because “if you don’t have a set process you end up skipping steps, then you get too far along and have to back track to fix things.” The team stresses the importance of having the client sign off on each step of the process for a more collaborative, cohesive effort.

Credit

Content and Script: InMovement
Content and Visual Creation Process: Down the Street Designs
DTS worked along with Column Five on this project.

COMMENT