Information Design - Project 1

3.2.25 - 23.3.25  / Week 1 -  Week 7

Information Design / Bachelor of Design (Honours) in Creative Media
Aliah Farhana Binti Mohd Fauzi / 0357957

Project 1: Animated Infographic Poster

---

INSTRUCTIONS

Project 1: Animated Infographic Poster

Description:

Following some media exploration and information design education, we will have now to create an infographic that uses images rather than words to illustrate a number of distinct procedures.

Essential:

The primary goal is to examine the "delivery mechanisms" that influence our infographics' results.

The purpose of this presentation is to examine what makes an infographic presentation effective or ineffective, even though content is crucial. Content is included here, but just as one of the infographic's numerous components:

PART 1: Infographic poster (10%)           
INSTRUCTION:
1. We have to choose 1 infographic poster reference from Internet and needed to consult before proceed.
2. We need to redesign the poster into A4 size and sketch the idea as well as the 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 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 our own Youtube channel

Figure 1.1 The approved poster

MOODBOARD

Figure 1.2 Moodbard

SKETCHES

Figure 1.3 First Sketches

Figure 1.4 Second Sketches

Figure 1.3 and Figure 1.4 couldn't be proceed as the layout are messy as per feedbacks I received from Mr. Shamsul on week 4. Therefore, I've decided to come up with a new sketches where the layout have been throughly considered.

Figure 1.5 Third Sketches

Figure 1.6 Fourth Sketches

INFOGRAPHIC PROGRESS

Figure 1.7 - Figure 1.10 Progress Sketches (Figure 1.5)

This progress I've made inside adobe photoshop using the third sketches on Figure 1.5.

Figure 1.11 After Feedbacks

After the feedbacks from Mr. Shamsul during the class, overall the design looks clean but the layout can still be improved. I was a bit bewildered on how to improve the layout for this sketches thus, I've decided to continue with the sketches on Figure 1.6.

Figure 1.12 - 1.13 Progress for fourth sketches

Figure 1.14 Before feedback 

Figure 1.15 After feedback

After getting a feedbacks from Mr.Shamsul he said that he prefer this version of my poster instead of in Figure 1.11. He also asked me to extend the blue information box at the bottom to make it like a footer and more clean look.

ANIMATION PROGRESS

Figure 1.16 - 1.17 Animation progress in after effects

The progress of the video had been made in adobe after effects, it just a simple loop animation for me as I'm not really good at editing. I've decided to illustrate the cap to cover up the brain then the cap would be blown away and disappear, thus the brain will have the subtle throbbing to show that the brain is somewhat function. While not to miss the keywords would be show up on the second after the cap has blown away. 

FINAL SUBMISSION

Final Infographic Submission

Final Animated Infographic

---

FEEDBACKS

Week 4

The alignment and layout for Figure 1.3 & 1.4 are too messy, maybe can try find more references and improve on it.

Week 5

Figure 1.11 in terms of layout wise is clean and clear but there's slight issue with the alignment and some of the icon consistency that can be improved.

Figure 1.14 This design is much better to compare with the previous design on Figure 1.11, but maybe I can extend the blue box at the bottom until the end of the page just like in Figure 1.15.

---

REFLECTIONS

Observation

Throughout this project, I realized how important the iterative design process is. My initial sketches felt too cluttered, so I had to refine them multiple times to create a cleaner and more structured layout. I learned that feedback plays a huge role in improving my work through regular critique sessions helped me see issues with alignment, icon consistency, and overall composition that I might have overlooked. Each round of revision made my design stronger, and I saw firsthand how continuous refinement leads to a more polished final outcome.

Findings

One of my biggest takeaways was understanding the impact of visual hierarchy. Simplifying information and organizing elements strategically made the infographic clearer and easier to follow. I also noticed how crucial consistency is having uniform colours, typography, and icons made a big difference in making the design look professional. When elements weren’t cohesive, it distracted from the message, so I had to be extra mindful of those details.

Experience

Working on the animation part of the project was both exciting and challenging. Since I wasn’t entirely comfortable with motion graphics at first, using software like Adobe After Effects felt overwhelming. But as I practiced, I became more confident and started to enjoy bringing my designs to life. The whole process also taught me to be adaptable whenever I faced design obstacles, I had to think critically and make adjustments based on feedback. In the end, this project reinforced how essential iteration, feedback, and problem-solving are in design, and it pushed me to improve both my technical and creative skills.