Information Design - Final Project: Animated Infographics

on

05/02/2025- 05/03/2025 (Week 1-Week 7)
Lizzie Tanaka (0362065)
Information Design | BDCM | Taylor's University
Final Project: Animated Infographic

INSTRUCTIONS



For our final project, we are to make a 1,5-3 minutes video of animated infographics in a group.

Using a processed design framework, you will now produce an infographic report to present the given information to a ‘target audience’ with the purpose of:

  1. Creating awareness (such as Global Warming, Recycle, etc.)
  2. Explaining a process (such as "how to" video)
  3. Defining a concept (such as "What is Fast Fashion", "What is Color Wheel", etc.)

Any time based media and software using photography, vector imagery.

Design Considerations:
  • Organization Principles – LATCH and Content Organization
  • Aesthetic Principles – Animation principles
  • Cognitive Principles – Principles of visualization

Pre Production

In week 1, we put ourselves in a group and we ended up with a group of 9 people. During offline tutorial, we consulted with Mr. Shamsul our topic ideas. 
  • Sea pollution but specifically in Southeast Asia
  • Digital security
Mr. Shamsul was fine with both and left the choice to us. We decided to go with sea pollution in Southeast Asia to narrow our topic down. 

In week 2, we prepared our powerpoint for our FLIP presentation in week 3 where we presented our proposal to Mr. Fauzi and Mr. Shamsul. We divided our tasks: 
  • Introduction: Pricillia, Lizzie
  • Reasons behind topic: Gabriela, Ying Ying
  • Objectives: Alya
  • Target Audience: Jordan
  • Key Information and Data: Jovan, Rafa
Here's our FLIP Presentation: 


We had a kiddish illustration style since we thought of making the target audience for kids. After the presentation, we got a few feedbacks:
  • The presentation is well designed. Mr. Fauzi likes the illustration style and we can go with this one and animate in Canva
With this feedback, we began by dividing the group into script and voiceover as well as the animation, I also assigned members to their tasks. The tasks are as stated below:
  • Animation (storyboard & animation): 
    • Storyboard: Rafa, Gabriela, Alya, 
    • Animation: Pricillia, Lizzie, Ying Ying
  • Script and voiceover: Justin, Jordan, Jovan, Pricillia, Lizzie

Production

We started by summarizing and compiling all the data we wanted to include in our Miro Board and into a Google docs for the script later on. Meanwhile, the storyboard is being drawn. After the storyboard is done (in the Miro Board), we began writing the script. At the end, me, Pricillia, and Ying Ying ended up writing most of the script. Here's our Miro Board:


Fig 1.2 Miro Board

Justin did the voiceover for the narrator while Jovan did the voiceover for the fish character. Once the voiceover is done, the animator team began. At first, we showed progress to Mr. Shamsul of our canva animation. However, he suggested to draw our own elements instead of using canva elements. There were some misunderstanding previously as we thought it was okay for us to use canva elements. 

Using Canva was also difficult for me personally, as I had attempted to use their animation tool. It wasn't as efficient and I find working in AE a lot quicker and efficient. 


With this, Pricillia was in charge of drawing almost all elements, with the exception of some elements from Ying-Ying's animation scenes that she drew herself. Rafa ended up taking Pricillia's place to animate as well since she was more familiar to After Effects. 

Fig 1.4 Elements Process (1)

Fig 1.5 Elements Process (2)

Fig 1.6 Elements Process (3)


Our first script: Voiceover Version 1

Fig 1.7 Voiceover Script Version 1

Work division on version 1: 
  • Lizzie: intro and the causes & impacts
  • Ying Ying: general info, actions done, and the prevention
  • Rafa: facts and figures (because she did the storyboard)
Rafa's facts & figures animation:

Fig 1.8 Rafa's Facts and Figures part


However, I discovered an issue when I was animating my part. The intro only reach 1 minute and Rafa's part also reached 1 minute. That leaves us only 1 minute left and with many parts that we havent animated yet. I counted the duration and turns out we exceeded the 3 minute limit. 

Because of this, we decided to change the flow of the script since there were some parts that felt repetitive and we could categorize the information better. Me and Ying Ying ended up meeting for a while at X-Space (it was unplanned) to work on the new script version. We counted as well the estimation of each line and counted the estimated duration of the video. 

After that, Justin and Jovan re-did the voiceover, and we continued on the animation.



Fig 1.9 Voiceover Script Version 2

New work division on version 2:
  • Lizzie: Introduction & Causes
    • I used puppet tool for the fishes to move the tails. At the end of the animation process, I changed all keyframes to easy ease. 
Fig 1.10 Intro with puppet tool

Fig 1.11 Process

Fig 1.12 Process (2)

Fig 1.13 Process (3)

  • Ying-Ying: General Info & Prevention
Fig 1.14 Process (4)

Fig 1.15 Process (5)

Fig 1.16 Process (6)


  • Rafa: Impacts & first scene of causes (since she has animated this part on version 1)
Fig 1.17 Process (7)

Fig 1.18 Process (8)

Fig 1.19 Process (9)


Post Production

After the animation is all done, we gave our videos to Jordan who volunteered to do the compiling, SFX, and subtitles. We've already put the voiceover in our videos since it made the animation duration more accurate anyway. 

Fig 2.1 SFX Process

Fig 2.2 SFX Process

Turns out, Premiere Pro couldn't detect a lot of words so it had to be done manually for the subtitles. Justin and Jovan ended up doing the subtitles, since they asked for other tasks. 

Fig 2.3 Subtitle settings

Fig 2.4 Subtitle process (1)

Fig 2.5 Subtitle process (2)

Fig 2.6 Subtitle process (3)

Fig 2.7 Subtitle process (4)


We made sure the font, font size, and text effects were the same and checked multiple times for punctuations as well before finally declaring the video done. 


Final Results
Fig 3.1 Final Project Proposal (Week 3)

Fig 3.2 Final Animation Video
Youtube Link Here

FEEDBACKS

Week 3
- Illustration is good
- Can try animating in canva

Week 5
- Add duration in storyboard 

Week 6
- Draw your own elements, don't use canva elements
REFLECTIONS:
Experience:
This is my first time being pointed as a group leader and there's more burden I felt as the leader since the smoothness and the result of this group project depends on me as well. There isn't much group projects so far and this one was quite challenging. I was torn on how to divide the work without making someone feel its too much for them or making someone feel like they're not regarded as much. However, I'm grateful for my members because even though I was worried if there were going to be some freeriders, all of them turned out great. Everyone worked their parts well and contributed and was cooperative. 

Of course, I may have done a few mistakes here and there but I'm grateful that the project went well at the end. In the future, I hope to learn more about leadership. 

Observations:
I observed that our team worked nicely because of all of us communicated well. If there's any problems we communicate to each other. I also observed that for a group to work smoothly until the end, it needs the cooperativeness of all the members. 

Findings:
I truly find that group projects when done well, makes the job easier and it makes the burden a lot less. It's nice not to have to rely only on yourself since the beginning until the end. 

Comments

Post a Comment