Information Design Project 1 & Project 2

3/2/2025 - 21/3/2025 Week 1 - Week 7

Wong Kai Xin / 0353027

Information Design / Bachelor of Design in Creative Media / The Design School

Project 1 & Project 2

---

INSTRUCTIONS

Timeframe :

Week 03 – Week 05

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.

Requirements 

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:

1. Infographic poster (20%)
2. Minimal animated infographic (20%)

Submission 

1. Digital upload into your Google Drive Folder
2. Online posts in your E-portfolio as your reflective studies

---

LECTURES

refer to lecturer and exercises

---

PROGRESS

PART 1: Infographic poster (20%)           
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

Week 3: 

pick a poster to improve + animate

poster 1: 

design is not good

information does not seem strategically organized

poster 2:

looks refined already

but would be fun to animate

can emphasize more on hierachy

poster 3:

can organize better

add more icons

too wordy

Consultation:

Poster 1 : graphic is already there, easy to execute, more catchy. Proceed

Week 4: 

sketch and design process

topic: healthy eyes

inspo: 

eye facts:

1. The Human Eye Can Differentiate Around 10 Million Colors

• The average person can perceive a vast range of colors, thanks to cone cells in the retina. Some people (with a rare condition called tetrachromacy) can see even more!

2. Your Eyes Blink About 15-20 Times Per Minute

• Blinking helps keep your eyes moist and clears away debris. This means you blink around 14,000–19,000 times a day!

3. Your Eye Focuses Faster Than a Camera

• The human eye can adjust focus in milliseconds, much faster than even the best cameras.

Week 5: 

sketch:

this is a rough sketch of how i wanted my poster to look like

However once I started to design my poster, my ideas grew more and more and I just kept thinking of more designs I could add to my poster. I became very stressed and overwhelmed as I had too many ideas on organizing my information. 

initial layouts I considered

I then realised it wasn't going to be effective and my information will look all over the place, the design isn't going to guarantee efficiency. So, I looked for some poster layouts to get some inspiration

I figured I could fit more information to my poster, which serves its purpose as an infographic poster. So I decided to reorganize everything and start again.

poster design:

original poster

poster draft 1

Week 5 feedback:

- simplify points 

- put numberings so it's easier for viewers to read

- info poster can be different with animated poster

Submission:

final refined poster (PNG)

PART 2: Minimal animated infographic (20%)

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

here is a rough plan on what i plan to animate:

some inspo of the animations:

I added simple animation to each point, (eg: rubbing eye action). I also added the fade in transition so viewers can view the information one by one without being too overwhelmed. Then, I included the clock + blinking animation for the eye, to indicate the time, as well as the yellow glow animation so the information pops out a bit more.

This was my initial final animated poster however, I felt like the transitions were too choppy, not smooth enough and it felt like it was too quick, so I added more frames. 

work progress in Adobe Illustrator

work progress in Adobe Photoshop

The two platforms I used for this exercise are:

1. Adobe Illustrator for frames

2. Adobe Photoshop for animating

Submission:

https://youtube.com/shorts/ODQCklw4sks?feature=share

---

REFLECTION

part 1: Creating this infographic was a really insightful experience for me. At first, I focused mainly on organizing the information in a clear and structured way, making sure it was easy to read and visually appealing. However, as I refined the design, I realized how much small details—like font choices, spacing, and color contrast—can impact how engaging and effective an infographic is.

One of the biggest takeaways for me was the importance of visual hierarchy. Initially, my text and icons felt balanced, but after getting feedback, I saw how making the title bolder, spacing sections more, and using stronger colors could drastically improve readability. It also reminded me that design isn't just about aesthetics—it's about guiding the viewer's eyes smoothly through the content.

I also enjoyed experimenting with icons and illustrations. Eye-catching visuals can help communicate information in a way that's both fun and informative. In the future, I’d like to explore even more creative elements, like subtle animations or interactive infographics.

part 2: Turning my static infographic into an animated loop in Adobe Photoshop was extremely challenging. Initially, I focused on making the design visually appealing, but once I started animating, I realized how movement can enhance storytelling and engagement.

One key lesson was the importance of layer organization. Since Photoshop requires each animated element to be on a separate layer, I had to carefully structure my file before animating. Now I have way too many layers in Adobe Illustrator so the next time I will definitely take note on that.

Experimenting with animations added a dynamic touch, making the infographic more engaging. My personal favorite was the blinking eye animation was a fun addition, giving the design subtle movement without being distracting. 

Overall, this exercise deepened my understanding of motion design and its impact on visual communication. It showed me how even simple animations can make static content more interactive and appealing. Moving forward, I’d love to explore Adobe After Effects for more advanced animation techniques, but this project was a great starting point!