Information design / Project 1 & 2

07/2/2025 - 21/3/2025 (Week 1 - Week 7)

Rachel Ng Jie Ting/ 0378902

Bachelors of  design (Honours) in creative media

Information Design / Project 1 & 2: ANIMATED INFOGRAPHIC POSTER [20%]

---

Table of content 

Instructions

PART 1: Infographic poster (10%) 

PART 2: Minimal animated infographic (10%)

Feedback

Reflections

---

Instructions

Project 1 & 2: ANIMATED INFOGRAPHIC POSTER [20%]

DESCRIPTION: 

After time exploring media and learning about information design, you will now develop an infographic that presents a series of different processes as visuals rather than text.

REQUIREMENT:

Your main intention is to analyse the “delivery mechanism’s” that affect the outcomes of your infographics.

Though content is important, however the aim of this presentation is too look at what makes an infographic presentation work or does not work. This includes content but only as one of the many components of an infographic:

PART 1: Infographic poster (10%)           

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

PART 2: Minimal animated infographic (10%)

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

SUBMISSION:

1. Digital upload into your Google Drive.

2. Online posts in your E-Portfolio and your reflective writing.

(Please attach the E-Portfolio link here for submission.)

TIME FRAME: WEEK 03 - WEEK 05

DEADLINE: WEEK 05

MARK: 20%

REFERENCE:

1. Loop animation

https://fauziyusoff.com/wp-content/uploads/creative_process_loop.gif

2. https://i.pinimg.com/originals/dc/91/53/dc9153b13c57bd30999932d02a3b0a18.gif

3. https://www.pinterest.com/pin/162059286585500400/

Note: Make sure your poster graphics have information.

PART 1: Infographic poster (10%)   

Choosing infographic poster reference

For this task, I have selected a few not very well designed infographic from the internet to modify. I have found 3 posters and analyzed on what makes them badly designed.

Poster 1

Why is it not well designed:

1. Overwhelming Visual Complexity

The design is too cluttered with numerous elements crammed together, making it difficult to focus on one piece of information at a time.

2. Poor Readability

The text is small and difficult to read, especially in the timeline at the top.

3. Lack of Clear Structure

The infographic tries to present history, preparation, and brand variations all at once, making it confusing.

Fig 1.1 - Bad poster example 1

Poster 2

Why is it not well designed:

1. Lack of Clear Data Comparison

While different topics are covered (tap vs. bottled water, market trends, plastic waste), they are scattered around the bottle instead of being structured for easy comparison.

A simple comparison chart or infographic elements like bar graphs could improve clarity.

2. Poor Readability

Some of the text is too small and packed tightly around the bottle, making it hard to read.

Fig 1.2 - Bad poster example 2

Poster 3

Why is it not well designed:

1. Overcrowded Layout

The page is packed with multiple sections, illustrations, and text, making it visually overwhelming.

2. Poor Readability

Some text is in small font, making it difficult to read, especially in dense areas like the "Different Breeds" section.

3. Unclear Purpose

The infographic includes multiple topics (history, anatomy, breeding, gestation), but it lacks a clear focus.

Is it meant to educate about cat breeds, history, biology, or pet care? Trying to cover too much in one space reduces its overall impact.

Fig 1.3 - Bad poster example 3

After analyzing these posters, I decided to redesign Poster 3 to improve its focus and presentation.

Concept & Sketching

After selecting a poster to redesign, I first started with a sketch.

The original infographic includes multiple topics (history, anatomy, breeding, gestation), but it lacks a clear focus. So, I have decided to focus on the topic: Cat breeds. 

The idea is to move the title to the middle, and have the cat pictures, name, and information go around it as a circle. 

Fig 1.4 - Sketch 1

Digital Poster Design

Then, I used Canva to digitize the design.

First Version:

• Applied improved hierarchy and spacing.

• Simplified color and typography choices.

• Organized cat breeds clearly around the title.

Fig 1.5 - First progress

Fig 1.6 - Poster Final

PART 2: Minimal animated infographic (10%)

Animating the Poster

Using Canva's animation tools, I created a 25 second looping animation of the poster.

Animation created :  

• Ink line swiping across the title.

• Every 2 seconds, the name of the cat and it's information with appear slowly, starting from the first cat on the top middle, going clockwise.

Fig 1.7 - Animated poster version 1

Poster and animation redesign after feedback

After receiving feedback from Mr. Fauzi, I made the following improvements:

• Maintained the same fonts, colors, and overall concept as the original poster to ensure consistency.

• Cropped cat faces for a closer, clearer visual, matching the original poster’s style.

• Removed ink line swiping across the title as it doesn't fit with the new style of the poster.

• Refined animation to align with the updated design.

Also, I changed the video size from 1920p x 1080p to A4 as per instruction.

Fig 1.8 - Redesigned poster

Fig 1.9 - Animated poster version 2

 Animation redesign after feedback #2

After receiving another feedback from Mr. Fauzi, I made the following improvements:

• Starting from the Maine Coon, the image and text will slightly enlarge and return to normal 1 second after. Same goes for the other cat breeds, going in a circular, clockwise fashion. 

• Changed video size from A4 to 1920p x 1080p as per instruction. (I misread the instruction)

Fig 1.10 - Animated poster version 3

 Final poster

Fig 1.11 -  Final poster

 Final animated poster

Fig 1.12 -  Final animated poster

---

Feedback

Week 4 - 

"Please use the same fonts, color and concept from the original poster.

You may crop the cat faces so that it will be more close up, just like the original poster.

Remember, you're assigned to come out the second poster of the original poster. So that's means it will be the same look and feels."

Week 5 - 

"Looks great, though the animation video should be in 1920p x 1080p, not A4."

Try to leave some blank space at the header and footer of the animated poster, since that section will get blocked by social media platform's UI.

Can make the cat images enlarge for 1 second and then go back to normal, clockwise fashion.

---

Reflections

Experience: 

This project helped me understand the impact of visual hierarchy, typography, and animation on information design. I learned how to refine an infographic to enhance clarity and maintain consistency with an existing theme. Additionally, I became more familiar with using Canva’s animation tools, improving my ability to create visually appealing digital content.

Observations: 

Throughout the project, I noticed that visual clutter negatively impacts user engagement. Posters with too much information packed into one space are harder to digest, reducing their overall effectiveness. I also found out that that typography plays a crucial role—poor font choices and small text sizes make even well-structured posters difficult to read. Additionally, maintaining consistency in color and layout enhances comprehension and ensures a cohesive visual identity.

Findings: 

From this project, I learned that clarity and simplicity are key elements in effective infographic design. Overloading a design with too many elements can overwhelm the viewer, whereas a structured and well-balanced layout enhances information retention. I also found that animation should be purposeful and subtle, guiding attention without being distracting. Feedback was instrumental in refining my approach, reinforcing the idea that iteration is essential in achieving an optimal design outcome.