Information Design| Project 1&2
03/02/2025 - ( Week 3 - Week 5 )
Wang Yifan / 0368363
Information Design / Bachelor's of Design Honors In Creative Media
Project 1 : Animated Infographic Poster
WEEK 3
- Chunking: Grouping information into meaningful sections improves memory.
- Cognitive Load: Too much information at once overwhelms the brain, causing confusion.
Applications in Design & Communication:
- UI Design: Limit menu items to 5-9 per section for better usability.
- Education: Break complex topics into smaller parts to aid learning.
- Marketing: Keep messages short and structured for better recall.
Limitations & Updates:
- Some research suggests memory holds about 4±1 chunks, especially for complex data.
- Attention, familiarity, and context influence how well information is remembered.
Manuel Lima's 9 Directives
Function Over Form: Design should prioritize data’s purpose over aesthetics.
Interactivity Matters: Users should explore and adjust data for insights.
Cite Sources: Providing sources ensures accuracy and credibility.
Tell a Story: Visualization should convey meaning, not just information.
Clarity Over Aesthetics: Design must never compromise data accuracy.
Stay Relevant: Focus on key data, avoid unnecessary details.
Show Time: Represent data changes over time.
Prioritize Knowledge: Visualization should enhance understanding.
Avoid Excess: Unnecessary visuals create confusion.
Tasks:
- Choose a reference, then redesign it using clear visual hierarchy, minimal text, and engaging graphics.
- Transform the static poster into a 15–30 second looping animation.
In this assignment, I'm going to create an instructable infographic poster for a pour-over coffee making process.
I studied several pour-over coffee tutorial videos and finally decided to create an infographic poster on “How to Make the Perfect Cup of pour-over coffee.”
 |
Figure 1.1 Watch videos to learn and record knowledge about hand-brewed coffee |
Research & information compilation
The first step is to watch the relevant video and organize the core steps of pouring coffee. I logged the following:
1.Utensils required for brewing (such as hand brewing pot, filter cup, filter paper, grinder)
2.Grinding degree of coffee beans (recommended medium grinding, similar to sea salt particles)
3.Powder to water ratio (1:15 or 1:16, 15g coffee powder to 225ml water)
4.Correct brewing steps (wetting filter paper, pre-soaking, water injection method, etc.)
 |
Figure 1.2 I searched and collected pictures of related items |
Visual Research & Reference
After organizing the basic information, I started looking for visual references to help me decide on the overall layout of the infographic.
1.Color scheme:Featuring warm coffee tones (dark brown, beige, cream)
2.Illustration style:flat illustration/line style to make information clear and easy to read
3.Font style:retro handwritten font, creating a boutique coffee shop atmosphere
 |
| Figure 1.3 Visual reference |
 |
Figure 1.4 Visual reference |
Sketch design
After looking at some visual references, I started sketching and trying to adjust the layout.
Main layout sketches include:
Title area (How to Brew the Perfect Pour-Over Coffee)
Utensil display (filter cups, hand brewing kettles, grinders, etc.)
Step-by-step instructions (grinding, pre-soaking, water injection, extraction, etc.)
Visual aid elements (icons, simplified diagrams)
After the teacher’s guidance, I decided to use vertical layout to make the reading order clearer.
 |
Figure 1.5 Sketch |
Digital design
After completing the sketch, I started designing digitally in Illustrator:
Draw illustrations of utensils (filter cups, hand brewing kettles, electronic scales, etc.)
 |
Figure 1.6 Drawing of coffee utensils |
Adjust the layout to make the step information more compact
 |
Figure 1.7 Adjusting the layout |
Optimize colors to make the overall style more harmonious
 |
Figure 1.8 Adjusting the color scheme |
Design Adjustments:
After consulting Mr. Fauzi Yusoff, I made changes. The excessive text in the first draft was reduced to key instructions
The steps were rearranged to make the reading smoother
Some decorative elements such as background color, coffee beans and steam effects were added to make the design more vivid.
 |
| Final A4 static poster.jpg |
%20Static%20Poster.jpg)
PART 2: Minimal animated infographic
Animated Infographics
The second project requires making an animated version of the infographic based on the infographic to make the content more vivid and intuitive.
Animation Concept
In order to make the animation more layered, I plan to use a step-by-step dynamic presentation:
Animation Key Scenes:
Coffee beans → Grinding (beans fall into the grinder and become coffee powder)
Water flows into the filter cup (simulating the real hand-brewed kettle pouring action)
Thermometer pointer changes (water temperature is adjusted to 90-96°C)
Coffee liquid slowly drips into the cup
|
 |
Figure 2.2 Water pouring animation slice |
 |
Figure 2.3 Animated slice of filter paper getting wet & more coffee |
 |
Figure 2.4 Animated slice of coffee becoming more |
 |
Figure 2.5 Animated slice of falling coffee |
Animation production
Animation process:
Separate the elements of the infographic in Illustrator to ensure that each part can be animated independently
Synthesize into a GIF animation in Photoshop to make the water flow, coffee beans, and grinding process appear naturally
Adjust the rhythm to ensure that each step is not too fast or too slow
Figure 2.6 Creating animated slices
Finally, I completed an information table gif animation that can intuitively show the process of making hand-brewed coffee.
Final A4 .gif
Experience
Working on this project allowed me to explore the effectiveness of visual storytelling in simplifying a step-by-step process. Designing the static infographic poster required careful planning of the layout, color scheme, typography, and visual hierarchy to ensure clarity and engagement. The challenge was to balance detailed information with clean visuals, making the instructions easy to follow. Transitioning to the animated infographic introduced a new layer of complexity—timing, transitions, and motion design all played a crucial role in guiding the viewer. Unlike a static design, animation demanded a clear sequence of actions, smooth pacing, and emphasis on key moments in the brewing process. This project helped me develop a deeper understanding of how movement enhances user experience, making complex instructions more engaging and intuitive.
Observation
Throughout the design process, I observed how structured visual guidance significantly improves comprehension. Initially, I found that many coffee brewing guides tend to be text-heavy or lack a clear visual sequence. To solve this, I used a linear flow with directional cues to guide viewers naturally from one step to the next. Additionally, I discovered that animated elements like steam rising, water pouring, and blooming coffee grounds added a sense of realism and immersion to the brewing experience. The biggest difference between static and animated infographics was engagement—while the poster effectively summarized the process at a glance, the animation allowed for a more dynamic and instructive experience. I also learned that animation should be purposeful—too much motion can be distracting, while well-paced transitions enhance clarity.
Finding
One key finding was how design choices influence user understanding and retention. For example, using warm, earthy tones in both the static and animated versions reinforced the comforting and artisanal feel of pour-over coffee. Typography also played a critical role—clear, legible fonts made step-by-step instructions easy to follow, while subtle size variations helped establish a hierarchy of information. Another discovery was the importance of pacing in animation. By timing the pouring and brewing stages realistically, the animation effectively mimicked the real-life coffee-making process, making it both informative and engaging. Overall, this project demonstrated how animation can transform instructional content into an intuitive and enjoyable learning experience.
.png)
评论
发表评论