Information Design: Project 2

Information Design: Project 2

-

2.2.2026 -  / Week 1 -Week 7

Dave Christian Moniaga / 0385630

Interactive Design / Bachelor of Design (Hons) in Creative Media

Information Design: Project 2

---

Table of Contents

1. Lectures
2. Instructions
3. Project 2
1. Kinetic Typography
2. Animation Chart
3. Vector Animation
4. Feedback
5. Reflection

Instructions

Kinetic Typoraphy

This exercise involves us working in a 7 person team to create a lyric animation video with the song of our choice. As each person would need to do 4 lines per song, we selected a few songs that would able to fit the criteria.

The song that was chosen by our group was Bones by Imagine Dragons. 

With my role as the group leader, I then separated the song lyrics into 7 parts all of which has 4 unique lines. The delegation of the workload are as listed:

1. Khalif Mikail Bin Mohd Ihwan
2. Yang Yang
3. Maira Aqilah Binti Mohd Hisham
4. Tan Khai Jiat 
5. Yong Wenyi
6. Dave Christian Moniaga
7. Li Muzhen

The list of numbers corresponds to the color coded lyric delegation guide.

Fig 1.1 Bones by Imagine Dragons lyrics delegation for Green Team

From there we started by creating thumbnail sketches of our parts. This step should help us to visualize whether the lyrics would match with our ideas and other groupmates as well.

Fig 1.2 Early thumbnail sketches of Part 6

As part of my contribution, I also did several testing of font choices to check which ones would fit our song the most. Based on preference and most of the group's decision, we ended up choosing Poster Cut Neue as our main font. 

Fig 1.3 Font choices taken from Adobe Fonts

With my final outcome finished, I then collected all of my other member's contribution for their kinetic typography and compiled them all to match the song in Premiere Pro. This way, I am able to add any transition between clips to make sure everything matches to the song's lyrics.

Fig All audio and video placed in Premiere Pro

On top of that, I also placed a few texture layers on top of all the video to further enhance the sketch-like aesthetic that our lecturer suggested during our last feedback. The final look also made the overall video more polished and cohesive. 

Fig Textures layers added on top of all the video layers

Animation Chart

The second exercise of Project 2 involves us to create a motion graphic chart based on a specific data that was given to each students. For mine, the task involves me to create a line graph from the data presented in this article about students under stress.

 Fig 2.1 Data about students who presented with depression, anxiety or a relationship problem.

With the guidance from this youtube video, I started by placing all of the base value of the chart first. The grid lines were made by adding a Repeater into one stroke, creating 10 copies to match the amount of data value spread.

Fig 2.2 The grid lines & axis labels are created

From there I drew a straight line, stopping at each year's plot point. This is important as each points will be used to create nulls using a specific plugin.

Fig 2.3 Creating nulls from paths that was drawn

With nulls set in place, each point is now available to be moved up and down freely, I then set each point to match with the data provided in the article.

Trim Paths are also added into the stroke line, which will become the main animation spanning from the start to the end of the stroke. The keyframes for the paths are also applied with Easy Ease for smoother animation.

Fig 2.4 Trim Paths with keyframes from start to end with easy ease

For the bullet points itself, I made a short bounce animation that is placed specifically in accordance to the movement of the line's trim path as it reaches each point.

Fig 2.5 bullet point animation on each data year

With this process, I then repeated the same steps for the other two line data from the article. In addition of a title, labels for the x and y axis are also placed with a key/legend information at the bottom left.

Fig 2.6 All data, line, points, and information displayed 

Inspired by another youtube guide, I added a few extra animation transition for the texts. I added a fading in animation using opacity and position. This animation paired with a stagger effect for each layer creates a gradual fade for each text. 

Fig 2.7 Usage of position & opacity animation (left), with staggered layers (right)

Lastly, I added a glowing effect for each element & text using color control & drop shadow as shown in the picture. This creates a retro and digital look to the final design.

Fig 2.8 Glow effect using Color Control & Drop Shadow

The final animation chart is done and is available for viewing as shown below.

Fig 2.9 Exercise 2 - Final Animation Chart

Vector Animation