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
Notes:
- text and music are not synced at 0:45–50
- add more information after 0:50
main_1.mp4
Edit description
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
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
Reflection
