Labels

Information Design - Project 1 & 2 / Animated Infographic Poster

19.2.2025 - 10.3.2025 (Week 3 - Week 5)
Chong Hui Yi / 0363195
Information Design / BDCM
Project 1 & 2 / Animated Infographic Poster


TABLE OF CONTENT


LECTURES

Week 4:

Manuel Lima’s 9 Directives Manifesto

Manuel Lima’s 9 Directives Manifesto:

  • Form Follows Function: The main goal is to explain and provide insight, not just make things look pretty. Always start with a clear question.
  • Interactivity is Key: Let people explore the data themselves—it makes learning more effective.
  • Cite Your Source: Be transparent about where your data comes from.
  • The Power of Narrative: People love stories! Use storytelling to make your data more engaging and memorable.
  • Do Not Glorify Aesthetics: Looks are important, but clarity comes first. Don’t focus only on making things beautiful.
  • Look for Relevancy: Ask yourself: Why does this data matter? If it’s not meaningful, don’t visualize it.
  • Embrace Time: Time is tricky, but handling it well helps organize data and improve decision-making.
  • Aspire for Knowledge: Good visualization turns information into knowledge and makes it easier to understand.
  • Avoid Gratuitous Visualizations: Your visuals should help people understand, not create confusion. If it’s just for decoration, it’s not useful.


INSTRUCTIONS


<iframe src="https://drive.google.com/file/d/1tBjuSKTjgPgjaSzESdBM9ivw2MrdrlTn/preview" width="640" height="480" allow="autoplay"></iframe>


Project 1 - Part 1: Infographic Poster

Instruction

"1. Choose 1 infographic poster reference from Internet (Please consult before proceed)
2. Redesign the poster into A4 size. Sketch the idea and process
3. Redesign and simplify the poster based on visual hierarchy & typography
4. Simplify the poster's design based on color, shape & pattern
5. Attach your final poster on E-Portfolio with explanation and reflective writing”

Research

In this project, I needed to choose an unappealing poster for redesign. I found four posters (Fig. 1.0), but none seemed extremely bad. Among them, the weakest design was the third one (from the left), "A Caloric to Moon Cake."

I liked its idea of using grids to organise content, but it looked too rigid. The red colour felt unsuitable, and the excessive text made it uninviting to read.

In Week 3, Mr. Fauzi gave me feedback: "The Honey Bee Fun Facts poster serves as a great example—it groups content effectively and follows Manuel Lima’s 9 Directives Manifesto. You could redesign the Mooncake Calories poster with these principles in mind."

Fig. 1.0 Poster for redesign

Based on this, I decided to redesign the Mooncake Calories poster.

Fig. 1.1 Final Poster Chosen for Redesign

Fig. 1.2 Mooncake Calories Poster Redesign Plan

Next, I sketched some drafts. All versions featured a large cross-section of a mooncake with labelled details, but the placement of the calories for different mooncake types and tips varied slightly.

In the original poster (Fig. 1.1), the calories per mooncake section used a bar chart with text descriptions of mooncake types. I felt adding images would make it easier to understand and allow for arrangement based on kcal levels.

I also tested a bar chart layout (Fig. 1.3, last sketch), but space was limited, so I discarded it. In the end, I chose the fourth layout (from the left), though the exact arrangement would be adjusted during the design process.

Fig. 1.3 Sketches

Then, I found a colour palette for the Mid-Autumn Festival.

Fig. 1.4 Colour Palette (from HERE)

Poster Design

I started designing the poster in Illustrator. On Xiaohongshu (link), I discovered that AI’s 3D and Materials feature can be used to create a 3D mooncake.

Fig. 2.0 Use Adobe Illustrator's 3D and Materials to create a 3D mooncake

Although the 3D mooncake was interesting, it didn’t look realistic enough. Since I needed many different mooncake types, I decided to use real photos instead. I also couldn’t find illustrations in a consistent style.

I searched for mooncake photos, but they all had different angles and didn’t match the flavours I needed. Then, I realised I could borrow high-quality images from the Tai Thong mooncake website—perfect! 

Fig. 2.1 Dropped 3D mooncake, sourced mooncake images from Tai Thong

I first designed the mooncake type calories section. The bottom part of Fig. 2.2 was my first attempt, but I felt the plain white circle backgrounds didn’t effectively convey the information.

So, I changed them to a red-to-green gradient from left to right—since red usually signals higher kcal and greater risk, making it more eye-catching, while green represents lower kcal and a healthier choice.

A friend gave me feedback, questioning if the lowest kcal should be on the left and the highest on the right. However, I believe the main purpose of this poster is to raise awareness that mooncakes are actually quite high in calories (one mooncake is roughly equivalent to a plate of fried kway teow or fish and chips). So, I think placing the highest calories on the left will serve as a better reminder.

Fig. 2.2 Mooncake Type Calories Design (First attempt below, improved version above)

Next, I started searching for a cross-section of a mooncake. I couldn’t find a three-quarter cut, so I chose the one in Fig. 2.3 and removed the background in Photoshop.

Fig. 2.3 Removed background in PS (original image from zhengpic.com)

I found an illustration of a rabbit holding a lantern on Freepik, and I plan to use it as decoration on the mooncake. After trying different placements, I decided that I liked the position in the top-right corner of Fig. 2.4 the most.

Fig. 2.4 Different placements of the rabbit (rabbit illustration from HERE)

For the labelled content, I tried two types of text hierarchies. Since I thought this was a calories-focused poster, I made the calories text larger than the Egg Yolk text. However, I realised that since Egg Yolk is the title, it should be larger to make it stand out more and better align with typographic hierarchy—where the most important information (the title) is given more prominence.

Fig. 2.5 Testing different text hierarchies

Finding a picture of fried kway teow was tricky. Since it's a simple, everyday dish, the images I found looked too plain. But I realised that adding banana leaves to the picture would make it look even more appetising.

Fig. 2.6 Looking for suitable photos

I found a fried kway teow photo that I liked, but it wasn’t complete, so I used Photoshop's Content-Aware Fill to fill in the gaps.

Fig. 2.7 Use PS Content-Aware Fill to fill gaps

I also found a fish and chips photo with the same angle as the fried kway teow one. At that point, I didn’t realise the text under the images (a plate of char kway teow and a plate of fish and chips) was swapped.  (´⊙ω⊙`)

Fig. 2.8 Add patterns on top of the background

Once everything was designed, I started adjusting the layout (Fig. 2.9). The first layout has the tips' stickers in the middle, while the second layout places them at the top. In the third layout, the tips are slightly tilted, giving it a more dynamic look. I also moved the mooncake type calories section to the top.

Fig. 2.9 Different Layouts

Afterwards, I tried different colour combinations (Fig. 2.10). In the end, I felt that the third option, with the gradient in the corners, looked more airy and balanced.

In Week 5, Mr. Fauzi’s feedback was:
  • Add subheadings, as UI/UX design usually includes them.
  • The empty space below the title makes the content feel unclear; consider adjusting it.
  • Move the mooncake types to the bottom for better design alignment.
  • Consider removing the tips section for animation.

Fig. 2.10 Try out different colour

For the title, I wanted to add some elements related to the Mid-Autumn Festival, so I placed a mooncake and a rabbit inside the letter “o”. I chose the last design in Fig. 2.11 as my final title design.

Fig. 2.11 Title Design

Based on Mr. Fauzi’s feedback, I added a subheading: "Are You Eating a Meal or a Dessert?" below the title to attract attention, added the "Mooncake Type Calories (7cm)" title, moved this section to the bottom.

I think the margin on the sides of the poster in Fig. 2.12 is a bit small, so I reduced the content size slightly. The final result is Fig. 3.0.

Fig. 2.12 Poster Design (not the final)

Final Outcome

Fig. 3.0 Final Mooncake Calories Infographic Poster



Project 1 - Part 2: Minimal Animated Infographic

Instruction

"1. Animate your infographic poster into one static loop animation page
2. Loop duration in between 15-30 second
3. Size: 1080 x 1920 px (Vertical Video) upload to your own Youtube channel"

Rearranged

For Project 1, Part 2, I rearranged the content layout because the size was 1080 x 1920 px, which was different from the A4 size of the poster. In the video, I removed the tips section to make the content more concise, and I used the rabbit illustration to fill the empty space.

For the animation, the large mooncake in the main content will highlight different sections, followed by lines and then the labels. After that, the rabbit illustration will animate. At the bottom, the mooncake type calories will animate the numbers, based on this reference: LINK. The colours will change from green to their corresponding colours to show the increasing kcal.

Fig. 4.0 Rearranged the poster for video

Rabbit Animation

I used After Effects for the animation, but it’s been a long time since I last used it, so I completely forgot how to work with it. This is actually my first time animating with AE. I learned how to import an AI file to AE from this YouTube Video Link.

I used the Puppet Warp tool in AE to make the rabbit's body swing back and forth. For the head, I adjusted the rotation and position keyframes. Since this is a looping animation, the beginning and end actions must be identical.

Fig. 5.0 Body & head animation

For the animation of the rabbit holding the lantern, I first animated its hand using the Puppet Warp tool, followed by animating the handle it’s holding, the lantern, and the hanging tassels. Breaking the lantern into separate parts for animation makes it smoother and less stiff.

Fig. 5.1 Lantern animation (split into handle, red lantern, and hanging tassels)

Next, I animated the other hand holding the fan, then gave the left ear a bouncy bend to finish off the animation.

Fig. 5.2 Final Rabbit Animation

After finishing the animation, I exported the video through AE’s render queue as QuickTime, with RGB+Alpha and Straight (Unmatted), choosing Apple ProRes 4444 for the format. 

I thought the video wasn’t exporting properly because I couldn’t open it on my computer, but turns out it’s a .mov file, so I can only view it in apps like CapCut. 

Fig. 5.3 Output Module Settings in AE Render Queue (select RGB + Alpha for transparency)

Mooncake Types Animation

Next, I started working on the Mooncake Types animation. Since this section has text, I found a tutorial on YouTube (LINK) about importing editable text from Illustrator to After Effects.

Fig. 6.0 Import PSD file into AE

When I import a PSD file, the text gets converted into compositions. But I ran into a problem. If I want to use text, I need to save it as a PSD file and import it, but to convert shapes from vector layer, I need to import an AI file. So, I copied the 'convert to editable text' composition and pasted it into the composition imported from the AI file. The problem is, I'm not sure if this is the best approach because the two compositions are different sizes, so I have to manually adjust and position everything.

PSD File:
  • Used for raster images (pixel-based)
  • Editable text layers in After Effects
  • Not scalable for shapes without losing quality

AI File:
  • Used for vector graphics (scalable without losing quality)
  • Converts text to vector shapes in After Effects
  • Best for illustrations, logos, and shapes
Fig. 6.1 When importing a PSD file, text layers may be converted into compositions

Fig. 6.2 Convert to Editable Text

I watched a tutorial on Xiaohongshu (LINK) and learned how to use expressions to make numbers increase quickly. It was my first time discovering this feature, and I found it both interesting and convenient. I originally thought I'd have to set the numbers frame by frame HAHA!

Expression:
StartNumber = 0;
EndNumber = 983;
StartTime = 0;
EndTime = 3;
t = linear(time, StartTime, EndTime, StartNumber, EndNumber);
Math.floor(t);

Fig. 6.3 Use an expression to animate a growing number

I added animation to the title, with the text bouncing in and the lines extending from both sides. In Fig. 6.4, I tried to make the speed of each number increase from left to right, creating the effect of a faster pause for lower kcal. However, I found the fast numbers too quick and the slow ones too slow, so I later adjusted everything to two seconds.

Fig. 6.4 Title and content animation test

By adjusting the "color" in the shape layer, I can create the effect of the colour changing from green to red.

Fig. 6.5 Adjust colours to create a gradient transition

Fig. 6.6 Added a colour transition from green to red

Finally, I staggered the timing for each circle's entrance, with the one on the far left appearing first. Staggering the timing makes the animation smoother and guides the viewer's eye across the screen, creating a more engaging flow.

Fig. 6.7 Final Mooncake Type Animation

Main Content Animation

For the main content, I first used red colour in Photoshop to highlight different parts of the mooncake.

Fig. 7.0 Highlight different parts of the mooncake in red using PS

In AE, track matte works like a clipping mask. For example, if you choose "Shape Layer 1" as the track matte for the "Mooncake..." layer (like in Fig. 7.1), it will use the shape in "shape layer 1" to hide or show parts of the "Mooncake..." layer.

Fig. 7.1 Track Matte in AE is like clipping mask

I also learned about the Graph Editor in After Effects:
  • Speed Graph: Adjust animation speed 
    • Smooth acceleration/deceleration (Ease In / Ease Out) for more natural motion.
    • Create dynamic speed changes (e.g., bounce, easing effects).
  •  Value Graph: Adjust value changes
    • Control motion paths, scaling, rotation, and other property curves.
    • Make value transitions smoother or more impactful.
Fig. 7.2 Speed Graph controls the speed changes

For animating lines, I used Trim Paths, which is very convenient.

Trim Paths:
  • Start: Controls where the path begins (0% = shown, 100% = hidden).
  • End: Controls where the path ends (0% = hidden, 100% = shown).
  • Offset: Moves the path’s start point for smoother animation.

Fig. 7.3 Use Trim Paths to create a line-drawing effect

Fig. 7.4 The result of using Trim Paths for line animation

Besides that, the final main content animation, where the mooncake image pops up, is shown in Fig. 7.5.

Fig. 7.5 Final Main Content Animation

Editing & Refinements

Since I completed the animations for different sections in separate files, I combined them all into one poster using CapCut. I chose CapCut because I'm quite familiar with it, and it’s easy to use compared to Premiere Pro.

In addition to the animations I had already done, I used masks in CapCut to create the effect of the title and subheading appearing from the left. I also added a subtle zoom effects to the two gradient circles in the corners of the background, to add some variation to the scene.

Fig. 8.0 Combine animations in CapCut & animate heading, subheading and gradient background circles

Final Outcome

Fig. 9.0 Final Mooncake Calories Animated Infographic Poster


FEEDBACK

Week 3:

The Honey Bee Fun Facts poster serves as a great example—it groups content effectively and follows Manuel Lima’s 9 Directives Manifesto. You could redesign the Mooncake Calories poster with these principles in mind.

Week 5:

Consider adding subheadings—UI/UX design typically includes a subtitle when there is a heading. There is also empty space below your title, and jumping straight into the content might feel confusing, as the first row’s information is unclear.

For the layout, placing the mooncake types at the bottom would better align with design principles. Regarding animation, you might consider removing the tips section.


REFLECTION

I found this project really fun and flexible since we could redesign a poster on any topic. Both the poster design and animated version were enjoyable, especially since I hadn’t designed a poster in a while since Advanced Typography.

The animation part pushed me to relearn After Effects, and I realised how time-consuming animation can be. For example, I spent 7 hours drawing the rabbit animation and another 4 hours figuring out how to import AI files into AE while keeping editable text and shapes. Of course, being a beginner, I needed extra time to familiarise myself with the tools.

Despite the challenges, I enjoyed the process and felt a great sense of achievement seeing the final result—especially since the rabbit animation was my first! I also learned a lot about AE's powerful tools like Trim Paths, the Graph Editor, and Expressions, which aren’t possible in CapCut. Overall, this project helped me better understand how to simplify content and present information effectively using infographics.
Labels:

Comments

Post a Comment

Popular Posts