Information Project - Project 1 & Project 2

17/2/2025 - 3/3/2025 (Week 3 - Week 5)

Low Li Vern/ 0362678

Information Design / Bachelor of Design (Honours) in Creative Media

Project 1 & Project 2

---

INSTRUCTIONS

---

LECTURES

WEEK 3

1. Miller’s Law: Humans can remember about 7±2 pieces of information in short-term memory.
2. Memory Limit: Information lasts only 30 seconds before being forgotten.
3. Paradox of Choice: Too many options overwhelm the brain, making decisions harder.
4. Solution: Chunking information into smaller groups improves retention and understanding.
5. Application: Helps in designing better communication and user experiences.

Week 4

1. Form Follows Function – Focus on explanation and insight, starting with a question.
2. Interactivity is Key – Encourages discovery and learning.
3. Cite Your Source – Always disclose data origins.
4. The Power of Narrative – Use storytelling to make information engaging and memorable.
5. Do Not Glorify Aesthetics – Design should serve function, not just look good.
6. Look for Relevancy – Ensure the visualization has a clear purpose.
7. Embrace Time – Time management is crucial for effective decision-making.
8. Aspire for Knowledge – Information visualization should aid understanding.
9. Avoid Gratuitous Visualizations – Keep visuals meaningful and avoid unnecessary complexity.

---

Project 1

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 (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

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.)

#Research

Key Factors to Analyze in Infographic Poster

1. Clarity & Readability

   • Is the information easy to understand at a glance?

   • Are the fonts, colors, and spacing making it visually clear?

2. Visual Hierarchy

   • Are the most important elements standing out?

   • Is there a logical flow (left to right, top to bottom, or circular)?

3. Data Visualization

   • Are you using effective charts, graphs, icons, or diagrams to represent data?

   • Are unnecessary details removed to avoid clutter?

4. Color & Contrast

   • Are colors used strategically to emphasize key points?

   • Is there good contrast between background and text?

5. Icons & Imagery

   • Do the visuals help explain the process rather than just decorate the poster?

   • Are they universally understandable?

6. Engagement & Storytelling

   • Does the infographic keep the viewer engaged?

   • Does it tell a story rather than just listing information?

7. Delivery Medium

   • Will this be printed or shared digitally?

   • Does the design adapt well to different platforms (e.g., mobile, web, poster format)?

#Ideation

I searched for posters on Google and Pinterest that contain too much information and lack a good layout. I found some of the posters with great graphics but overly crowded content. To improve my understanding, I researched these designs and selected a topic I’m most interested in redesigning. Besides, I studied well structured infographic posters with clean layouts and easy to read information, learning valuable design principles from them.

Fig 1.1 Reference Poster

Fig 1.2 Reference Poster

Fig 1.3 Reference Poster

Fig 1.4 Reference Poster

Fig 1.5 Reference Poster

Fig 1.6 Reference Poster

Fig 1.7 Reference Poster

After my research, I found it interesting to redesign a poster about food. I specifically looked for food posters that caught my attention and decided to focus on burgers since they are my favorite fast food.

The weakness of this poster:

1. Heavy Text – Too much explanation in paragraphs rather than concise visual storytelling.
2. Lack of Data Visualization – There are no numbers, percentages, or comparisons to make the information more engaging.
3. Image Placement – The burger is well-placed, but the text feels scattered around it, making it slightly hard to follow.
4. Typography Hierarchy – Some key points (e.g., “Melt the Cheese” or “Don’t Forget the Mustard”) blend in instead of standing out.
5. Flow & Direction – While arrows help, a more structured step-by-step flowchart might make the process clearer.

Fig 1.8 Redesign Po

So, I decided to redesign this poster because while it has good information, it feels too cluttered with too much content.

#Sketch

Fig 2.1 Sketch Grayscale

Fig 2.2 Sketch

I started by arranging the visual elements and information to ensure the poster isn't too crowded and remains easy to read. The topic of my poster is "How to Build the Best Burger." I sketched the burger in separate layers to clearly present its ingredients. I positioned the burger on the left since viewers typically focus on graphics first before moving to the text. This creates a smooth visual flow, aligning with design principles for better readability and engagement.

#Progress

For my progress, I started by finding a burger picture on Pinterest. Then, I used Photoshop to select and mask each ingredient into separate layers. This allows me to arrange and present the ingredients clearly in my redesigned poster.

Fig 3.1 Separate layer in Photoshop

Fig 3.2 Burger 

After masking out the burger ingredients, I moved on to designing the background of the poster. I experimented with different colors and found that a warm yellow made the burger look more appetizing. I took inspiration from McDonald’s color palette, yellow and red since these colors are known to stimulate appetite more effectively than cooler tones like blue or purple.

Warm & Tasty (Classic Food Colors)

1. Yellow & Gold (Cheese, Bun) – #FFC107, #FFB300
2. Brown & Deep Red (Patty, Bacon) – #8B4513, #B22222
3. Green (Lettuce, Freshness) – #4CAF50, #81C784
4. Red (Tomato, Ketchup) – #E53935, #D32F2F
5. White & Black (Text & Contrast) – #FFFFFF, #212121

Fig 3.3 Poster layout

Next, I worked on the information section. I summarized the content from the reference poster to make it clearer and easier to read. To enhance readability, I used icons like a knife and ingredient symbols to visually support the text. Instead of long sentences, I used bullet points, making the information more concise and digestible for viewers.

The information I summarize for the poster：

Step 1: Prepare the Bun

• Cut the bun into two equal halves.
• Toast the inside on a pan for 10-15 seconds for extra crunch.

Step 2:Slice the Vegetables

• Tomato & Onion: Thin, even slices (0.5 cm)
• Lettuce: Tear or chop into layers

Step 3: Cook the Patty

• Season with salt & pepper only (extra seasoning burns).
• Cook on high heat (450°F / 232°C) for 2-3 minutes per side.

Step 5: Assemble the Burger

• Bottom Bun → Sauce → Patty → Cheese → Pickles → Onions → Tomato → Lettuce → Top Bun

Next, I placed the burger in the poster as planned in my sketch, and it looked great with the chosen colors, just as I expected. However, the charts I wanted to include didn’t fit well with the design. So, I decided to incorporate more data into the information section instead, ensuring the layout remained clean and visually balanced.

#Poster Final Outcome

Project 2

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

#Progress

While designing the poster, I also considered the animation loop. However, I felt it wasn’t dynamic enough, so I decided to add more elements to loop. I chose not to animate the text since it’s the main focus for viewers, constant movement could make it harder to read and absorb the information. Instead, I focused on animating other visual elements to enhance engagement without distracting from the content.

Fig 4.1 Burger loop

Fig 4.2 Keyframes

I animated the burger ingredients to loop by stacking them together and then returning to their original positions using Adobe After Effects. I used position keyframes and applied the F9 key to create smooth easing. And also I adjusted the speed of the loop based on what I learned in my motion graphics class to make the animation feel more natural and visually appealing.

Fig 4.3 Lines png

Next, I edited the lines that connect the ingredients to the information text. This looping animation helps guide viewers smoothly from the visual on the left to the information on the right, creating a natural flow for better understanding.

Fig 4.4 Mask progress

Fig 4.5 Mask Progress

Fig 4.6 Mask Keyframes

For the information section, I felt it would be too static if it just stayed in place. So, I applied some cool effects using mask layers to enhance the visual appeal.

#Project 2 Final Outcome 

Youtube Link : https://youtube.com/shorts/jTQV20F0nDs?si=jIJtCDPE4DS8xv9R

---

REFLECTIONS

Throughout this project, I explored the principles of information design, focusing on clarity, readability, and engagement. In Project 1, I redesigned an infographic poster, applying what I learned about Miller’s Law and chunking information for better retention. I improved visual hierarchy by restructuring the layout and simplifying the text while enhancing engagement through colors and imagery inspired by McDonald's branding. Moving into Project 2, I transformed my static infographic into an animated loop. Using Adobe After Effects, I animated the burger ingredients and guiding lines to create smooth transitions without overwhelming the viewer. I also applied motion graphics techniques, such as easing and masking, to maintain readability while adding visual appeal. This project reinforced the importance of balancing aesthetics with functionality, ensuring that the design serves its purpose effectively.

---

THE END