INFORMATION DESIGN: WEEK 6-9

21/4/2025 - 16/5/2025 (Week 6 - 9)

Alicia Lo Yann Wei (0357917)

Information Design / Bachelor of Mass Communications in Digital Media Production (Hons)

PROJECT 1 & 2: INFOGRAPHIC POSTER

JUMPLINK

1.0 INSTRUCTION

2.0 LECTURES

2.1 W6: Visual Hierarchies

Visual Hierarchy in Infographics

Guides viewers through content.
Indicates most important content.
Shows how content is grouped or categorized.
Directs what to focus on first.
Applies to all types of content (text, icons, images, videos, etc.).

Components of Visual Hierarchy in Interactive Interfaces

Created through size, color, shape, distance, proportion, orientation.
Conveys meaning, mood, and concept of a design.
Essential for all visual designs (e.g., websites, mobile UIs).

1. Color in Visual Hierarchy

Most impactful creative element.
Conveys immediate meaning (e.g., red cross = protection).
Helps identify and highlight groups or key elements.
Evokes emotional and psychological responses.
Important in branding for triggering subconscious reactions.

2. Size in Visual Hierarchy

Larger elements attract more attention.
Used to show importance and priority of content.

3. Alignment in Visual Hierarchy

Creates a sense of order and structure.
Misaligned or unique elements stand out and gain significance.
Helps organize content like chapters in a story.

4. Shapes in Visual Hierarchy

Geometric shapes convey meaning quickly and universally.
Commonly used as icons/symbols in navigation and UI.
Preferred over text for efficiency and clarity in communication.

5. Motion in Visual Hierarchy

Moving elements have greater visual weight than static ones.
Cannot be used in print but valuable in digital UI.
Suggests interactivity or importance of elements.

2.2 W7 & W8
No Lecture.

2.3 W9: Infographics Storyboard

Understanding the Basics of Storyboarding

A storyboard is a visual sequence (sketches, drawings, photos) showing major events/shots/actions in chronological order.
Often includes comments/notes to provide context for each frame.
Used in creative fields (film, animation, etc.) to:
Plan and communicate ideas
Translate scripts into visuals
Ensure clarity and consistency among team members
Serve as a reference during production
Reduce costly mistakes through better collaboration

7 Steps to Create an Effective Storyboard

1. Define Project & Objectives

Clarify the purpose and goals of the project.
Identify the type of project (e.g., film, commercial, website, novel).
Understand the main message or story you want to tell.

2. Develop Script/Narrative

Write a detailed script (dialogue, action, sequence).
Break down script into key scenes and transitions.

3. Choose Storyboard Format

Select a format: traditional, digital, vertical, horizontal, animatic.
Determine how many frames/panels are needed per scene or shot.

4. Sketch the Frames

Draw each frame based on the script.
Focus on characters, objects, backgrounds, composition, camera angles.
Convey mood and emotion clearly through visuals.

5. Add Annotations & Details

Include notes on action, dialogue, camera movement, transitions.
Indicate visual effects (e.g., cuts, fades).

6. Review & Revise

Get feedback from team or stakeholders.
Make changes to improve clarity, flow, storytelling, composition.

7. Finalize & Share

Create a clean, polished version of the storyboard.
Share with all relevant team members (directors, animators, designers).
Ensure effective communication and teamwork for smooth production.

3.0 EXERCISES

3.1 Instruction

We're tasked with creating an infographic that presents a series of processes visually rather than through text. The main aim of this project is to examine the elements that make an infographic work or fail. These include not only the content but also visual hierarchy, typography, color, shape, and overall structure. The goal is to analyze and improve the way information is presented visually.

Part 1: Infographic Poster (20%)

For this section, we're required first choose a poorly designed infographic from the internet. Then, redesign it into an A4-sized poster. Begin by sketching our design process and ideas. Next, redesign the infographic using principles of visual hierarchy and typography, followed by simplifying it further through effective use of color, shape, and pattern. Finally, upload the completed poster to our E-Portfolio along with an explanation and reflective writing about our design choices and learning process.

Part 2: Minimal Animated Infographic (20%)

Turn our redesigned infographic into a simple looping animated visual. The animation should be a vertical video with a resolution of 1080 x 1920 pixels and loop continuously for 15 to 30 seconds. The animation must include typography and must be uploaded to our own YouTube channel.

3.2 Choosing Infographic Poster Reference

To begin, I selected a few infographic posters as references and evaluated each one carefully. I eventually chose the design that I felt was the most visually unappealing. After making my selection, I analyzed the poster in detail to identify which elements could be modified or improved.

Fig 3.2.1 Bad Example

Advantages of the Poster

Bright and Eye-Catching Colors

The use of vibrant colors (like orange, red, blue, and green) immediately grabs attention and may engage a younger audience.

Use of Visual Icons

It covers a wide range of subtopics including causes, effects, statistics, and solutions related to climate change—all in one visual.

Disadvantages of the Poster

Overcrowded Design

There’s too much text and too many icons crammed into a single space. This creates visual clutter and makes it hard for the viewer to focus on key points.

Inconsistent Font Sizes and Styles

Varying font sizes and styles (bold, caps, different alignments) break the visual hierarchy, making it difficult to tell what’s most important.

Poor Visual Flow

The layout lacks a clear direction (left to right, top to bottom, or circular). The reader's eye doesn’t naturally know where to look next.

Clashing Color Choices

Some colors used for text (e.g., light blue or yellow on a white or light background) have low contrast, making it hard to read.

Too Many Elements Competing for Attention

The central image (split-face Earth) competes with many side elements, resulting in a loss of focus. Instead of supporting the main message, it distracts from it.

Lack of Visual Hierarchy

Key messages (e.g., “Solutions to Climate Change”) don’t stand out as much as they should due to poor spacing and sizing.

3.3 Redesign Plan of Transforming the Unappealing Poster

To begin with, I explored various infographic posters and selected a few that stood out to me due to their appealing visuals and informative content.

Fig 3.3.1 Poster Reference #1

Fig 3.3.2 Poster Reference #2

Fig 3.3.3 Poster Reference #3

Based on the references I found, I was particularly drawn to the layout of the first poster, as it presented the information in a vibrant and eye-catching way. However, to make the content more audience-friendly and relevant to everyday life, I decided to use the third poster’s information as my primary reference. Its focus on practical solutions and the impact of climate change on public health felt more relatable. Visually, I also drew inspiration from both the first and second posters, combining their use of color, icons, and layout structure to create a design that is both engaging and easy to understand.

For the redesign, I plan to restructure the content to make it more engaging and relatable for the audience. Instead of overwhelming viewers with too many technical terms and statistics, I’ll shift the focus toward practical, everyday actions people can take to fight climate change. Inspired by the reference posters, I’ll adopt a cleaner, more organized visual layout that guides the reader smoothly from one section to another. Following Mr. Fauzi’s suggestion, I aim to transform the original information into audience-friendly material by simplifying complex topics and using friendly icons and visuals that are easier to understand.

3.4 Information to be Included in the Poster

Title: Climate Change: The Biggest Threat of our Health

Who is At Risk?

(All populations, but some are vulnerable than others.)

Children
Elderly
Those already ill
Low-income community

Climate Change Risk Factors of our Health

UV Radiation
Animal or plant allergens
Ozone particular matter
Heat
Animals: Vectors, resercoir animals
Environmental media: food, water

What can we do?

Switch to Clean Energy

The way we produce energy has a huge impact on both our health and the environment. Burning fossil fuels like coal, oil, and gas releases toxic air pollutants that can trigger asthma, heart disease, and other serious health issues. It also emits greenhouse gases that contribute to climate change. By shifting to clean energy sources such as solar, wind, and hydropower, we can reduce harmful emissions, improve air quality, and slow global warming. Clean energy is not only better for the planet — it creates safer, healthier communities and can lead to long-term savings on energy costs.

Eat for the Planet

Our diet choices affect more than just our personal health — they shape the world we live in. Eating more plant-based foods like vegetables, fruits, whole grains, and legumes can lower the risk of chronic diseases such as heart disease, diabetes, and cancer. At the same time, it reduces the environmental impact caused by livestock farming, which is a major source of greenhouse gases. By cutting down on red and processed meats and choosing sustainable food options, we can protect both our health and the Earth. Sustainable eating is a simple, daily action that creates long-term benefits.

Make Buildings Healthier

Buildings play a vital role in our well-being, especially as climate change brings more heatwaves and extreme weather. Poorly insulated or ventilated buildings can trap heat and pollutants, making people more vulnerable to health risks. By improving energy efficiency and using eco-friendly designs, we can make homes and workplaces safer, cooler, and more comfortable. Renovating old buildings with climate-friendly materials also cuts down on energy use and lowers utility bills. When we design spaces with health and sustainability in mind, we create environments where people can thrive.

Walk or Cycle More

Transportation is one of the biggest contributors to air pollution and greenhouse gas emissions. Replacing car trips with walking or cycling helps reduce harmful emissions and offers major health benefits, like improved heart health, stronger muscles, and lower stress levels. It’s a simple and accessible way to stay active every day. Choosing public transport, biking, or walking instead of driving also reduces traffic congestion and makes our cities more livable. Investing in safe paths and bike lanes encourages people to move more and drive less — a win for both health and the planet.

What can the health sectors do?

The health sector has a unique responsibility and opportunity to lead the fight against climate change. Health professionals witness firsthand the growing health impacts of pollution, extreme weather, and unhealthy living environments. By using their voice, they can advocate for policies that prioritize clean energy, active transportation, sustainable food systems, and healthy buildings. Doctors, nurses, and public health experts should be included in decision-making spaces where climate-related policies are formed — from urban planning to agriculture — ensuring that health is always part of the conversation.

Beyond advocacy, the health sector itself can lead by example. Hospitals and clinics can reduce their carbon footprint by adopting renewable energy, improving energy efficiency, minimizing waste, and sourcing food responsibly. Health institutions can also educate communities about the links between climate and health, empowering individuals to make healthier, more sustainable choices. By speaking out, leading change, and modeling sustainability, the health sector can protect both people and the planet — creating a healthier future for all.

3.5 Sketch

First, I began by sketching my design. I placed the main elements, like the thermometer at the center, following the layout of the first poster, and kept the title positioned at the top. Inspired by the third poster, I incorporated guiding lines to create a clear and organized flow, leading the viewer's eye from top to bottom. For the visual style and content elements, I referred to the second poster, using 2D vector illustrations to present the information in a clean and visually engaging way.

Fig 3.5.1 Sketch

3.6 PROGRESSION IN ADOBE ILLUSTRATOR

Based on the references I found, I was particularly drawn to the layout of the first poster, as it presented the information in a vibrant and eye-catching way.

Fig 3.6.1 Background

However, to make the content more audience-friendly and relevant to everyday life, I decided to use the third poster’s information as my primary reference. Visually, I also drew inspiration from both the first and second posters, combining their use of colours and icons.

Fig 3.6.2 Title

Fig 3.6.3 Centre Elements

Fig 3.6.4 Lines

I then incorporated additional information, focusing on practical ways we can help prevent climate change, as well as its impact on the health sector. I arranged the content neatly and used a consistent font style, similar to the title, to maintain a clean and cohesive look throughout the design.

Fig 3.6.5 Added Text

Fig 3.6.6 Subtitles

Fig 3.6.7 Health Sectors

3.7 Animated Infographic Poster

My animation plan for these elements is as follows:

The thermometer’s meter will drop once the eco-friendly actions are implemented. Factory gas emissions will transition into clean, non-toxic energy releases, while car emissions will also appear harmless. The car and bicycle tyres will spin, with the car gently vibrating to simulate movement. A person riding the bicycle will also be animated. Additionally, wind turbines will rotate to represent wind energy in action, and the clouds in the background will slowly drift to add a sense of natural motion.

Fig 3.7.1 Elements Animated

Fig 3.7.2 Composition

Fig 3.7.3 Loop

3.8 Final Project 1 & 2 Submission

INFOGRAPHIC POSTER IN A4 SIZE

ANIMATED INFOGRAPHIC POSTER IN 1920X1080

Animated Infographic Poster

Youtube link: https://youtube.com/shorts/3pA1SeVBwhY

Google drive link: https://drive.google.com/drive/folders/1hKY9YIRjUohJOHDC3VzMSKCuW-o5hW7U?usp=sharing

4.0 FEEDBACK

Mr. Fauzi mentioned that although my chosen infographic poster was visually unappealing, it was a good choice for redesign. He pointed out that the original layout was overcrowded, but acknowledged that I can move forward with developing it into a more engaging poster.

5.0 REFLECTION

EXPERIENCE

Throughout this project, I gained a deeper understanding of how much design impacts the effectiveness of communication. At first glance, the original infographic I chose seemed informative with its vibrant colors and icons, but after analyzing it more closely, I realized how overwhelming and disorganized it felt. The lack of clear visual hierarchy, crowded layout, and inconsistent font styles made it hard to digest the important message about climate change and health. This made me more aware of how crucial it is to balance both aesthetics and function when designing – not just to look good, but to guide the viewer’s eye and help them absorb the information with ease.

OBSERVATION

During the redesign process, I found it helpful to reference posters that were visually clearer and more organized. I learned how layout, typography, color choices, and icon use can completely transform how information is received. It was a challenge to reframe complex data into something simple and accessible, especially without making it too plain or oversimplified. I focused on making the content more relatable by emphasizing actions individuals and the health sector can take, which not only made the infographic more personal but also more meaningful. Using Illustrator also helped me improve my skills in arranging and refining visual elements systematically.

FINDING

Animating the infographic was an exciting new layer of this project. Adding motion to elements like spinning tyres, floating clouds, and dropping thermometers brought the poster to life and helped reinforce key messages in a subtle but engaging way. It also made me realize how motion design can influence emotional connection – turning static facts into a dynamic narrative. Overall, this project allowed me to explore the intersection of design, storytelling, and advocacy. It pushed me to think beyond just making things look good and focus on making them work effectively for the audience.

Search This Blog

Alicia Lo Yann Wei (0357917)