Visual Motion: Mrs Eaves

List of song names!
Initial Storyboard
  1. Introduction (0–20 seconds): Allusion to Sarah Eaves, common terms and the “forgotten” aspect of her character
  2. Progressional buildup (20–30 seconds): Shift to renewed terms: familiar, friendly, elegant etc.
  3. Dramatic climax (30–50 seconds): theme of revival and reincarnation through type: font analysis. Introduction to ligatures as a form of additional connection
  4. Reveal + ending (50–60 seconds): Mrs Eaves font reveal, tagline, credits
Planning the four parts: Using a whiteboard to map out the speed graphs, potential transitions, and connecting thumbnails to one another
Animation Color Palette
Figma board!
  • Script feels too separated between parts 1 and 2, how to make the bridge between woman and type more cohesive?
  • Use less styles, it can be distracting
  • Decrease font size for the header/body text section
  • For part 3, the violins are a good hint of what transitions to use. Think about easy-in, swoop, and fast-paced transitions
  • Use the green color more
  • Brighten up the colors a bit, use more of the green rather than the muted grey-pink.
  • Plan out the compositions, have “Mrs Eaves” sit higher
  • Prefers “labeled as:” over “a lady known as:” since it rolls off the tongue better
  • Regarding the script comment Yoshi mentioned, think about the leading headers for each section: labeled, inspired, reincarnated, etc.

ANIMATION/STORYLINE CONCEPT:

  • Focuses on the history, regards the person of Sarah Eaves rather than the font
  • Animation should ideally be simple, with blurred “splashes” of blown up characters. This section is the slowest part of the entire animation
  • Usage of ease-in, opacity, bleed and blur transitions and effects
  • Focuses on the reincarnation aspect, the qualities Mrs Eaves generates (the transitional blur between person and font)
  • Animation is still slightly simple, but more complex for the qualities of emphasis (elegant, familiar, stylized, etc.) More movement will transition well into the third, climactic seen
  • Usage of jump-cuts, typewriter effects, and quick-transitions; less opacity blurs and obvious ease-ins
  • Focuses on the type analysis, regards the typeface Mrs Eaves and not the person
  • Animation should be fastest and most complex! Rely on the line graphics from the previous section to transition into the rest of the parts
  • Usage of trim paths, fast ease-ins, masks, swoops, fast lines, etc.
  • Animation should be clean and simple. Have a couple jump cuts, but make sure everything is on just one or two lines. There’s not a lot of time left
  • Usage of opacity, typewriter effects, ease-ins
Grids!
Setting up precompositions

Scene 1: Introduction

“The Purpose of Quotes”: A conversation with a Senior

  • The blur is really good, but having it be revealed with the text at the same time lowers the “oomph” factor it creates. To get the full effect, maybe try staggering the reveal of the text so people read it first, and then have the character blur
  • Fix the colon issue, there’s an extra space between “others” and “:”

Scene 2: The Transition

Scene 3: The Analysis

Kinetic line
  • The stroke, combined with the size of the ligatures is much too loud. See how you can make it softer through opacity or size
  • Shift the “cky” ligature to match the x-height of your text

Scene 4: The Font Reveal

  • Modified the ending transition and end credits
  • Shifted the “it” ligature composition upwards
  • Shifted the “familiar” composition upwards
  • Modified the trim paths for the moving lines to make it smoother
  • Edited the blur bleed portion for the beginning ampersand
  • Color correction — it’s a little washed out once it exports :((

FINAL VIDEO

Final Video

Reflection:

Andrew: “Take a photo of your whiteboard planning. Cause that’s wild.”

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Create a User-Friendly Website: 5 Key Principles You Need to Know

Branding and Logo Design Examples for Inspiration — #29

Designers are editors, too

MiFID II — It’s not just about the pricing

Some proposed color heuristics

Financial Services Through Chat

The Importance of Empathy in Design

31 | Problem space

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shannon Lin

Shannon Lin

More from Medium

CS373 SPRING 2022: John Mackie

Brazil: The World’s Heart and Mine

A Guide To The History Of Video Games And Their Future

Is Recuva Safe to Recover Lost Files? Is There Any Alternative?