Type Motion

Project Brief:

After researching Arvo for my typeface spread, how can I communicate this information in an animation? For this project, I create a 60 second kinetic type animation focusing on timing of information and rhythm to create a strong narrative.

Sound

I began my project by searching for background music. For my music, I knew I wanted something with strong beats to portrait Arvo’s strength/reliability.

I went to https://freemusicarchive.org/ for exploring music options and went to the soul/rnb/instrumental music and downloaded 6 audio clips out of the 50–70 that I listened to. The next day (because I could get a fresher reaction to the chosen songs), I re-listened to the downloaded songs and ranked them.

When showing these songs to Yoshi, he found that Makaih Beats was strongest — Springdale by Audiobinger reminded him of Youtube vlog music.

Storyboard

Next, I created a rough storyboard to get myself familiar with how I can play around with composition of scenes and how I can imagine myself animating the letterforms. I used a royal blue as a primary color to represent Estonia’s flag colors. Something that I noticed with my storyboard is the amount of words on each slide — I may need to change my script over break up the text into different scenes. The animation may be easier consumed if there is less to read at once.

Vicki’s critique:

When showing Vicki my storyboard, she noticed that I can have a stronger color palette (blue is okay, but play around with different blues). Because of this, I went back to my typeface spread and selected colors from the image.

Because my storyboard was so wordy, I referenced my original 50 word statement again and made adjustments. Instead of writing it in a paragraph, I broke it up into bullet points of information.

Original 50 Word Statement

Arvo, designed by Anton Koovit in 2010, is a geometric slab serif that prioritizes readability due to its tall x-height, large counters, and monolinear letters. The slab serifs create a geometric, heavy feel. It is commonly used for headings, navigation bar menus, CTAs, advertisements, posters, billboards, and quotes.

Script Iterations

I had a few ideas for what information I wanted to include in my animation. Did I want to include the background information with the industrial revolution? Should Arvo be introduced in the middle or the very end? At the end, I decided to keep the industrial revolution information because I wanted a clear timeline in my animation (1800 →1810 →2010). I also found myself continuing to adjust my script as I iterated on my animation.

More music…

After creating the first 30 seconds of my animation, I was starting to feel frustrated with my music. I realized that beside the first 5 seconds, the song was too repetitive (it was the same 5 beats repeated throughout the minute). I found that I wanted more variation in the music and clear beat drops to reflect my script + emphasize certain information.

I went back to the drawing board (sigh) and listened for more songs. This time, I looked at Spotify playlists (instrumental hip hop) and really enjoyed Downtown by BouBou. It was upbeat and had four distinct sections: 0:00–0:25, 0:25–0:35, 0:35–0:45, 0:45–0:60. Because of this, I adjusted my script so the most important information would be at the beat drops/transition between sections.

C Lab After Effects Notes

Iterations

For my visual language, I wanted to play around the position and scale of a rectangle that serve as a transition between scenes while also playing off the timeline that is seen throughout the animation. I was also able to reference the rectangle in my spread (to lead the viewer’s eye to the beginning of the body copy) which I was very excited about when first achieving the transition.

Iteration 1.mp4

Edit description

drive.google.com

Notes:

  • text and music are not synced at 0:45–50
  • add more information after 0:50

main_1.mp4

Edit description

drive.google.com

Here, I ended up removing the letters from the first five seconds. My original intentions was to give a hint that this animation was about letterforms while not being obvious to what the letters were. However, I thought removing the letters looked a lot cleaner (the letterforms seemed like fluff to me)

Critique with Vicki:

  • change metric to optimal kerning
  • better use of color compared to Estonia blue
  • change pacing of information during “a new font was needed / bolder / expressive”

Based on Vicki’s feedback, I provided a pause before “a new font is needed” and had “bolder / expressive” follow a second after. I found that this timing makes it easier to read because the pause allows the reader to rest for a moment and the sequence of text that appears is more appropriate.

Additionally, I pushed my introduction to “ARVO” to the very end. I thought the hidden letters in “ANTON KOOVIT CREATED” had a greater impact, so having it as a final reveal as a conclusion would create more emphasis (having more information come after would make it feel awkward.

Critique with Vicki: decrease vertical spacing to improve readability(i.e. at “intended for web, perfect for print”)

main_4.mp4

Edit description

drive.google.com

Here, I made subtle refinements (adjusting text size and composition) and added a page effect during the “less broadsheets / books” scene. I also reintroduced “ARVO” in the beginning too as a little teaser, and I think there is a nice cycle since Arvo is only mentioned in the beginning and the end.

  • 0:35–0:45 needs improvement — not totally synced

ARVO_Dang_Michelle.mp4

Edit description

drive.google.com

Reflection

--

--

--

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

New Beginnings

Create to Regenerate

How to Add RSS Sitemap in WordPress (The Easy Way)

Free PMP Question of the day

BLUEWUD Primax Engineered Wood TV Entertainment Unit ,Wenge

women’s jackets best price | Orolay Women’s Thickened Down Jacket Winter Warm Down Coat

The airdrop has been fully distributed

Pre-Primary Schemes Of Work

Pre-Primary Schemes Of Work

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
Michelle Dang

Michelle Dang

More from Medium

Influencers had their grip on us in 2015 — and are we mad about it?

Christopher’s Christmas Cracker

The Long Game — Issue #251

Sandy Duncan, Today