Information Design - Project 2 Motion Graphic

on
Information Design

Information Design - Project 2 Motion Graphic

03/02/2026 - 02/03/2025 / Week 1 - Week 5
Emily Ong Su Yu / 0365304
Information Design / Bachelor of Design in Creative Media / Taylor's University

MODULE BRIEF

Figure 1 Module Brief, PDF.


YOUTUBE LINKS


PROJECT 2: MOTION GRAPHIC

EXERCISE 3: KINETIC TYPOGRAPHY
WEEK 1

In week 1 we were introduced first about what information design is all about. We were introduced to Types of Infographics as well. In week 1, we had to already form a group of mixed specialisation from 6-7 people per group.

Here are my group members:

  1. Emily Ong Su Yu (0365304) - UI/UX (leader)
  2. Ng Jia Xuan (0375273) - Entertainment Design
  3. Irdhina binti Mazli Sham (0366894) - Entertainment Design
  4. Lim Yeng San (0366316) - Entertainment Design
  5. Chan Zhi-Ren Zenndan (0369069) - Graphic Design
  6. Joel Chong Jun Yu (0341132) - Digital Animation
  7. Lu Zi Jian (0380401) - Immersive Design

Notes:

WEEK 2

Panaroia as chosen song

In week 2 each group had to pick one of the song for the kinetic typography to work on. So, I ask group members to suggest and share any songs they are interested in on our whatsapp group. And then we voted and discussed with each other.

After listening all the songs, we decided to choose Paranoia since it sounded really interesting and it has a fast beat which is suit with a kinetic typography exercise.

Figure 3.1 Vote for song.

After that, my group shared together a google docs to place all our ideas and progress there, but before, we drafted everything in Docs first so that it is neater. We did researches first about the song.

  • Videos and Website for Research

    • After that we had an online meeting for lyrics delegating, which who work on which part of the lyrics.

    • Lyrics Distribution
      • Joel – Intro and Verse 1 Part 1
      • Dhina, Lu Zi Jian – Verse 1 Part 2
      • Emily – Prechorus
      • Dhina – Chorus Part 1
      • Jia Xuan – Chorus Part 2
      • Yengsan – Verse 2 Part 1 and Bridge
      • Zenndan – Verse 2 Part 2
    • Emily, Dhina and Jia Xuan worked on the transition.
    • Joel created the moodboard and colour palette.

    Every member then share tutorial videos and asked questions to help each other during the process.

    Docs for our Initial Reseatch

    Figure 3.2 Initial Research and Lyrics Distribution, PDF.

    After that, we decided to work on our storyboard and share to each other in the next meeting.

    WEEK 3
    Storyboards of all group members

    Figure 3.3 Storyboards, PDF.

    In week 3, we had a debrief and meeting to show our storyboard:

    • We decided to focus on the lyrics, with some illustrations of characters and explosion effects.
    • We felt that some of our styles were different, so we decided to share our progress before the consultation and create transitions that could connect the parts of different members.
    • Illustration use silhouette and trace, simple.
    • Font use the one Zenndan used in his storyboard, Monument.

    My part was to work on the Prechorus. The prechorus is sung by Ezreal, a character in the game, and his colours are yellow and blue. In the original video, there are many frames featuring cars, factories and various effects.

    Thus, I drew the character and some elements in Illustrator.

    • Shuttle door at the beginning as a transition from Verse 1 to the Prechorus.
    • Car during the “Moving” lyrics and animated it in After Effects, with an explosion effect using three frames to show the explosion.
    • “Bite the bullet” illustrated with a mouth biting a bullet.
    • Ezreal in trouble, shown with messy graphics to represent the word “trouble”.

    Figure 3.4 Bite the Bullet, Illustration.

    Figure 3.4 Bite the Bullet, Illustration.

    Figure 3.5 Ezreal in Trouble, Illustration.

    Figure 3.6 Moving Car, Illustration.

    Figure 3.7 Shuttle Door, Illustration.

    Figure 3.8 Silver Lining, Illustration.

    Figure 3.9 Explosion in Crash a Party, Illustration.

    Figure 3.10 Ezreal leaning against the wall.

    After finishing illustration, I import them into After Effect File.

    I try to use 3D camera, Yengsan told me to use one node camera is easier than two mode.

    Figure 3.11 Camera in After Effects.

    Figure 3.12 Title with glitch effect.

    Figure 3.13 Content Warning in the intro.

    WEEK 4

    In week 4, we had a consultation with Mr Kannan, and he gave the following feedback:

    • Use Motion Blur.
    • Do not use pure black.
    • Use two fonts: one for the main lyrics, and another for the background vocals with a different colour and font to emphasize them.
    • Adjust the margins.
    • Below are specific feedback for each part:

    Figure 3.14 Feedbacks, PDF.

    WEEK 5

    We have submission in this week. We combined our parts and Jia Xuan uploaded in Youtube and I uploaded in Google Drive.

    FINAL OUTCOME OF EXERCISE 3

    Figure 3.15 Kinetic Typography Final Outcome from Group B Yellow Team, Youtube.
    Youtube Link: https://youtu.be/bTvfYphSA3M

    EXERCISE 4: MOTION GRAPHIC CHART

    For this task, we had to make a motion graphic animation chart and the graph type I assigned to work on was Line Graph.

    Links for Motion Graphic Chart:

    WEEK 4

    Data Compile:

    Before creating the animated chart in After Effects, I compile the data into a table.

    Figure 4.1 Data of Line Graph, Table

    Notes:

    • Creating Lines
      1. Pentool → Fill empty → Stroke colour → 10 px
      2. 3D Reference axes → Proportional grid
      3. Layer → New → Solid
    • Animate Lines
      1. Add → Trim Path
      2. Right click on Anchor → Keyframe Anchor → Easy Ease

    Figure 4.2 Process in After Effect #1.

    Figure 4.2 Process in After Effect #2.

    FINAL OUTCOME OF EXERCISE 4

    Figure Motion Graphic Chart - Line Graph, Youtube.
    Youtube Link: https://youtu.be/N-A4dw7Z5OU

    EXERCISE 5: VECTOR ANIMATION
    WEEK 5

    I rearrange the layers in Illustrator file before working in After Effects.

    Figure 5.1 Arrange layer.

    Animate in After Effect:

    • Cloud position: add wiggle(0.2,20) to let it float.
    • Flower and Chinese knot: use Puppet Pin to make them sway.
    • Rabbit dress: use Puppet Pin to make it sway.
    • Rabbit eye: use Puppet Pin to make it look like it is closing.
    • Fans: use Rotate to make them spin.
    • Red packets: use Scale and change the Anchor Point to make them bounce in and out.
    • Sparkling: add Glow Radius and Glow Intensity.

    Figure 5.2 Cloud Wiggle.

    Figure 5.3 Glow Intensity and Radius.

    Figure 5.4 Puppet Pin.

    * Easy Ease and Motion Blur are added.

    * Null Object is also added on rabbit eye and dress to follow the Rabbit.

    Figure 5.5 Null Object.

    FINAL OUTCOME OF EXERCISE 5

    Figure Vector Animation, Youtube.
    Youtube Link: https://youtu.be/s3fbdWLVOSY

FEEDBACKS

Week 1: Mr Kannan assigned us into groups and brief all projects.

Week 2: We showed Mr Kannan our chosen song. He said is suitable.

Week 3: Holiday.

Week 4: For Kinetic typography, use motion Blur, dont use pure black, can have two fonts, one is main lyrics, the back vocals diff colour and diff fonts (emphasize), margins.

Week 5: Well done for Kinetic typography. Work on project 1.


REFLECTIONS

In Kinetic Typography Project 2, I took on the role of the leader for my group. I learned how to better coordinate tasks, guide discussions, and ensure that everyone contributed effectively to the project. Being a leader helped me understand the importance of communication and responsibility in achieving a successful group outcome.

I would like to sincerely thank all my group mates for their hard work and cooperation throughout this project. Everyone contributed their ideas, supported each other, and stayed committed during the production process. Their teamwork made it possible for us to complete the project more smoothly and improve the overall quality of our kinetic typography work.

Through this project, I also improved my understanding of kinetic typography, especially in controlling the relationship between text, timing, and motion. I developed my skills in Adobe After Effects, including keyframing, easing, and timing transitions, while also learning to manage spacing, margins, and layer organization more carefully. Overall, this experience strengthened both my technical abilities and my confidence in leading and working within a team.

© 2026 Emily — Information Design - Project 2 Motion Graphic
Sem 1

Comments

Post a Comment