INFORMATION DESIGN / FLIP CLASSROOMS / GCD60504

on


4/2/2026 - 4/3/2026 / (Week 1 - Week 8)

Aricia Man Yi Xuan / 0375026

Information Design / Flip Classroom / GCD60504

Bachelor of Design (Hons) in Creative Media

Google Drive Link

JUMP LINKS

1. Exercise

2. Project 1

3. Project 2

TABLE OF CONTENT

1. Lectures

2. Instructions

3. Practices

4. Reflection

LECTURES

Week 1 (4/2/2026)
Today, Mr. Kannan introduced the exercises and assignment brief. We were arranged into groups and my groupmates are:

Fann Wong Jing En
Lee Lok Yi
Pan Rui Ning
Teng Yu Meng
Alexis Hew Yu Chen
(I'm the group leader)
 
Later on, we were assigned group exercises and given 1 hour to prepared a presentation on "What is Infographic?", after which selected groups presented. Below is our group presentation slides.

The next exercise is an individual task where we:
  • Exercise 1: Quantify & Visualize Data
  • Exercise 2: Re-design a poorly constructed infographic using a free online tools

Week 2 (9/2/2026)
Today, we sat it groups and made slides comparing "Bad infographic vs Good infographic" within 30 minutes and then presented our slides. We also discussed Project 2, deciding on which song to use for our kinetic typography animation. Then, Mr. Kannan uploaded an After Effect tutorial for us to learn. Finally, we have a consultation session.

Week 2 (11/2/2026)
Today’s lecture focused on kinetic typography and information organization. Mr. Kannan demonstrated how to create kinetic typography using Adobe After Effects, explaining the basic process of animating text, controlling timing, and creating movement. He also shared examples of previous students’ works to help us understand different styles. After the demonstration, our group presented a slides of the "LATCH Principle", explaining how information can be organized in a clear and structured way.


Week 3 (16/2/2026)
Today’s class was changed to an online session. Mr. Kannan taught us about motion graphic animation for charts, demonstrating how to use After Effects to design a static chart. Then, we started to do our Project 2 exercise 2.

Week 4 (23/2/2026)
Today lesson Mr. Kannan taught us about "Vector/Character Animation". We do an exercise of a simple vector animation using Illustration & After Effects. [click here for tutorial]

(25/2/2026)
Today, we had an online lecture where we presented and discussed Miller’s Law, also known as the chunking principle. Our lecturer explained that Miller’s Law suggests that humans can typically hold 7 ± 2 pieces of information in their short-term memory at a time. In the session, we did a presentation slides of explaining how Miller's Law can applied in different approach, and then we presented it in a group.

Then, we were assigned to do our Project 1: Instructable Poster.


Week 5 (4/3/2026)
We were introduced to the topic "Manuel Lima's 9 Directives Manifesto" and we had a presentation of this topic.


Week 6 (9/3/2026) - On leave
This week we have consultation with Mr. Kannon on our project.


Week 7 (16/3/2026)
This week we have consultation with Mr. Kannon for our final project (animatic storyboard) and he gave us feedback.

INSTRUCTION

Fig.2.1.1 Module Information Booklet

FLIP CLASS (1): RE-DESIGN INFOGRAPHIC

Description: Re-design one poorly constructed infographic poster with CANVA.

BEFORE
Fig.4.1.1 Infographic chosen (Before) (Week 1, 6/2/2026)

Poster chosen: Myths & Facts About Depression

Introduction:
The infographic I chose to redesign is titled “Myths & Facts About Depression.” This is a comparison infographic, it talks about common wrong ideas people have about depression and explains the correct facts.

Why I Chose This Infographic (Problems):
I think the design is not very effective. Depression is a serious and sensitive topic, so the information should be clear and easy to understand. Below are the problems I think can be improved:
  • Too text-heavy: Each section has long sentences and it's hard to read quickly.
  • Visual Hierarchy could be improved: The myths and facts look very similar, it's not very clear which information is more important.
  • Icons not helpful enough: Some of them do not clearly explain the content.
  • Colors are too strong: Both colours are eye-catching, can be tiring to look at.

AFTER

Fig.4.1.2 Re-design (After) (Week 1, 6/2/2026)
Link to Canva: [click here]

Canva was generally user-friendly, while the redesign process need careful thinking. The most challenging part was deciding what text to keep and what to remove, as I don't want to change it's origin meaning. Also, placing the icons in a balanced and consistent way was struggling as some icons felt not align well with the text, so I had to adjust their size and position several times to make sure they're not overwhelming the overall look.

Improvements I made:
I focused on making the information clearer, easier to read, and more visually engaging (changing illustrations).
  1. Adjusted color palette by using softer colors.
  2. Improved layout & structure by using two-column comparison format.
  3. Simplified paragraphs into title & short explanation.
  4. Used meaningful illustration icons that relate to each contents.

VECTOR ANIMATION EXERCISE

Fig.4.1.3 Progression in After Effects / (Week 4, 23/2/2026)

Steps:

  1. Separate different characters layers in AI (1920x1080)
  2. Import "composition" into After Effects
  3. Add keyframes in timeline (Position, scale, rotation)
  4. Adjust anchor point for scale
  5. Apply motion blur & Easy Ease
  6. Create "Palm" layer > Parent "palm" layer to "man stand"
  7. Adjust anchor point > "Alt" Rotation Stopwatch > Wiggle (0.5,20)
  8. Puppet position pin tool > Pin the woman
FINAL OUTCOME

Fig.4.1.4 Final Outcome / (Week 4, 23/2/2026)

REFLECTION

Experiences:

This semester honestly felt quite packed but also learn a lot. For all of the PPT slides we've done, we did it in groups and worked on it during class time. To be honest, not everyone in the group was very active. Only around 2–3 people were really doing the slides and presenting. It was a bit frustrating at first and I'm the group leader, I've tried my best to encourage them. But the most importantly was I truly learned a lot about different design principles and how they actually work in practice. I got to learn the LATCH principle, Miller's Law, Manuel Lima's 9 directives manifesto and more.

For the infographic redesign exercise, I enjoyed it more because it felt more hands-on and individual. We had to analyze what was wrong with the original poster, then redesign it properly. 

For the vector animation exercise in After Effects, we downloaded the AI file, separated layers properly, then imported into AE to animate. This was my first time really understanding how important layer organization is. If the AI file is messy, the animation process becomes messy also. I played around with keyframes and graph editor, it was fun.

Observation:

Throughout the semester, I realized that when designing infographic, we had to consider a lot of design principles before placing the elements and layout. Many posters weren't confusing because they were ugly, but because the information hierarchy was messy or too exaggerated. So, applying principles would definitely made the content much easier to understand.

Findings:

From all the projects I've done, I found that understanding design principles is crucial for making effective infographics. Also, redesigning is harder than creating from scratch because you need to analyze what's wrong first. So, it does help me understand and learn a lot. Overall, this semester let me do a connection between design theory and practical application, from static infographic to motion graphics. 

TAP ME BACK TO TOP









Comments

Post a Comment