Information Design - Project 1 & 2: Infographic Poster

Samantha Kristalyn / 0373905 / Bachelor of Design (Hons) in Creative Media 

Information Design 

Project 1 & 2: Infographic Poster (40%)

Week 6 - Week 10 

---

JUMPLINKS

1. INSTRUCTIONS (MIB)

2. LECTURES

3. TASK

4. FEEDBACKS

5. REFLECTION

---

INSTRUCTIONS

---

LECTURES

Week 6 (No Lecture)

Week 7

Typography in Information Design

Infographics are made of many parts that fit together to create a unified and balanced design that informs and hopefully impacts the viewer.  

The visuals, icons, charts and illustrations that you choose for your infographic are incredibly important.

Why Do Your Infographic Fonts Matter?

The first and most crucial point to take into consideration when choosing infographic fonts is your brand.

Below is an infographic visualizing a series of fonts and their perceived personalities. Some fonts in this infographic are also on the list of recommended infographic fonts to try. 

 

Using Legible Fonts

If a font isn’t legible, that font choice is a bust. How do you know if a font is legible or not? You have to test it.

There are a few factors that go into making a font readable. Some fonts are legible at every size, with any line spacing or even color. Others need a bit of customization to make them more legible.

Test Out Different Fonts

First, let’s talk about using brand fonts. You can experiment with size, weight, style (e.g., bold or italic), letter spacing, line spacing, and color.

If you have more freedom in choosing fonts, you can explore different font options. Try various styles—tall, condensed, thin, super bold, and more—to see what works best.

Find the Perfect Font Pair

A font pair is the combination of two fonts—or two styles of the same font (for example, bold/uppercase paired with regular/sentence case)—that work well together for a specific purpose.

Typically, you’ll use one font for titles and subtitles and a second font for body text. A smaller version of the body text can also be used effectively for footnotes.

Stick to the Same Fonts Throughout

Once you’ve settled on a font pairing after testing different options, stick to it!

Create a small reference graphic—like the examples above—to remind yourself which fonts you’re using.

This approach is especially helpful when working on an infographic with a team, ensuring everyone stays consistent.

Ensure Alignment and Visual Hierarchy

When designing the main title and the data points, it’s important to check the alignment and ensure a clear visual hierarchy.

Set a standard font size so that all data points use the same size consistently.

Alignment matters not only for individual data points but also for the overall layout of the infographic.

Conclusion

Typography is a form of two-dimensional architecture—shaped by experience and imagination, yet guided by rules and readability. The right typeface can elevate a design, while the wrong one can undermine it.

Experimentation and practice are key to mastering typeface selection. However, there are a few principles designers can follow to make choosing typefaces easier and more focused.

Week 8 (Independent Learning Week)

Week 9

Infographics Storyboard

Understanding the basics of storyboarding

Storyboards are mainly used in creative fields to enhance planning and communication. They help transform written scripts or ideas into visual formats, ensuring the story flows smoothly and that everyone involved shares the same understanding.

By serving as a reference throughout production, storyboards also minimize costly and time-consuming changes and promote better team collaboration.

7 Steps to Create an Effective Storyboard

Creating an effective storyboard is a fundamental step in bringing your creative visions to life, whether in film, animation, explainer video production or any visual storytelling medium. A well-crafted storyboard serves as a roadmap, helping you plan, visualize and communicate your narrative with precision. In this guide, I will touch base on seven essential steps to craft a compelling and impactful storyboard.

Step 1: Define your project and objectives

The first step in creating an effective storyboard is to define your project’s purpose and objectives. It’s crucial to define the project in detail before getting into the specifics of a storyboard.

Decide if you’re making a short film, a commercial, a feature-length film or something else entirely such as a novel or designing a website. Understand the story you want to tell and identify the main message or goals you intend to achieve through your project.

Step 2: Develop Your Script or Narrative

Create a clear script or storyline that outlines the sequence of events, dialogue, and key actions. A well-structured narrative provides a strong foundation for your storyboard, ensuring each scene effectively communicates your message.

Step 3: Storyboard structure and format

Choose a suitable storyboard format that aligns with your project’s needs. You can opt for traditional, digital, vertical, horizontal, or animatic formats depending on your project’s requirements. Determine the number of frames or panels you’ll need to represent each scene, shot, or sequence effectively.

Step 4: Sketch the frames
With your script or narrative as a reference, start sketching each frame. Visualize and draw the scenes, characters, objects, and backgrounds in each frame. Pay attention to composition, framing, and camera angles to convey the mood and emotion of each scene accurately.

Step 5: Add annotations and details 

Alongside each frame, include clear and concise annotations or notes that describe the action, dialogue, camera movements and any other relevant details.
Specify how scenes transition from one to another, including cuts, fades or other visual effects to ensure a smooth flow of the narrative.

Step 6: Review and revise 

Seek feedback from team members, collaborators or stakeholders to ensure that your storyboard aligns with the project’s goals and effectively communicates your vision. Be open to making revisions based on feedback, focusing on improving clarity, storytelling and visual composition.

Step 7: Finalize and share

Once you’ve gathered feedback and made necessary revisions, create a polished version of your storyboard with clean, legible drawings and annotations. Share the finalized storyboard with all relevant team members, including directors, animators, designers or anyone involved in the project’s production. Effective communication and collaboration are essential to bringing your creative vision to life.

Conclusion

Storyboarding doesn’t have to be a difficult process. Planning makes the process of creating a video, presentation or other visual storytelling project simpler from conception to execution.

All in all, mastering the art of storyboarding is a valuable skill that can significantly elevate your ability to bring ideas to life in various creative fields, from film and animation to advertising and design. 

---

TASK

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 design (that is not well design) from Internet

2. Redesign the poster into A4 size. Sketch the idea and process (5 Marks)

3. Redesign and simplify the poster based on visual hierarchy & typography (5 Marks)

4. Simplify the poster's design based on color, shape & pattern (5 Marks)

5. Attach your final poster on E-Portfolio with explanation and reflective writing (5 Marks)

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

PART 1: Infographic Poster (20%)

ORIGINAL INFOGRAPHIC POSTER

The original infographic uses real photographs, bright saturated colors, and a cluttered layout. Although the steps are presented in a sequence (1-7), the visual hierarchy is weak because:

• There are too many competing colors (yellow, green, purple, bright cyan).
• Real photos create inconsistent lighting and perspective.
• Text is thin and sometimes hard to read against the green background.
• Some ingredients such as ammonia are not safe for public DIY lawn use, which decreases reliability.

Fig. 3.1.1, How to Make Your Own Lawn Fertilizer (https://wp.klientboost.com/wp-content/uploads/2013/05/6.jpg)

The original design seems to rely more on decoration than on clarity, and its instructional purpose is visually overshadowed by intense color choices.

REDESIGN SKETCH

The sketch phase simplifies the information using:

• Minimal line-art icons
• Clear grouping of ingredients
• A more logical top-to-bottom reading flow
• Simplified titles and consistent text placement

Fig. 3.1.2, Simplified Redesign Sketch

This stage focuses on reorganizing content structure before focusing on color and style. The sketch helps solve problems from the original:

• Too many steps: condensed into clear three main application steps.
• Too many unnecessary ingredients: only the essential four remain.
• Consistency in icon style improves readability and reduces cognitive load. 

I also reimagined the poster size into A4 as instructed.

FINAL POSTER

The final poster demonstrates a complete visual redesign based on information-design principles:

a. Visual Hierarchy

Titles, ingredients, and steps are clearly separated using section blocks:

• Top section: Title + tagline
• Middle section: Ingredients
• Bottom section: Application guide

This helps guide the viewer's eye in a predictable, clean sequence.

b. Color Choice

A calm, natural green palette replaces the bright neon tones in the original. This improves readability (giving it better contrast), consistency (one palette instead of five), and aesthetic quality (looks more clean, modern, and professional).

c. Icon-Based Ingredients

Instead of real photos with inconsistent lighting, simplified icons make the information universal and easier to process. Icons also help on reducing distractions, allows faster visual recognition, and creates a cohesive graphic language.

d. Simplified Instructions

The steps are now limited to the essential actions: mix, pour, apply.

This makes the infographic easier for users to follow.

e. Typography Choice

1. Clean Sans-Serif for Clarity (Poppins) - Legibility

I switched to a simple sans-serif typeface for all the text (title, headings, and body) because sans-serif fonts are easier to read on screens and at small sizes. The original design used loud, decorative fonts that looked dated and competed with the images. A clean sans-serif matches the idea of simple DIY instructions and supports the "guide" feeling instead of looking like an advertisement.

 

2. Strong, Bold Title for Hierarchy

"HOME GROWN LAWN ENHANCER" is:

• Bold and all caps: creates a clear entry point and immediately tells the viewers what the poster is about.
• Centered at the top, with generous spacing: makes it feel stable and important.

This gives the poster a clear visual hierarchy: title, subheading, section headings, body text.

3. Lighter Weight for Subheading & Body

The subheading ("Simple D.I.Y Steps for a Healthier Yard") and the body text uses a lighter weight of the same font, mixed-case (not all caps), and possesses a slightly smaller size. This contrast in weight (bold vs regular) and case (caps vs sentence-case) helps separate information levels without changing fonts, keep the overall look consistent and calm, make long sentences easier to read.

4. Consistent Section Headings

"MATERIALS YOU'LL NEED" and "APPLICATION GUIDE" are all caps, bold, slightly larger than body but smaller than the main title. This gives each section a clear label and makes the layout easy to scan. Viewers can quickly see what they need and how to do it.

5. Simple Numeral for Steps

The step numbers (1, 2, 3) are large, clear numerals, has the same type style as the rest of the poster. This keeps the steps easy to follow in order, visually tied to the rest of the design, avoids the "cartoony" sun-shaped icons from the original, making it more straight-forward.  

6. Overall Typographic Goal

Overall, my typography choices aim to improve legibility (especially on screen and in animation), establish a clear hierarchy from title to details, create a modern trustworthy look that matches the natural, eco-theme of lawn care, and keep everything visually consistent by using one font family with different weights instead of many random fonts. 

   

Fig. 3.1.3, Final Infographic Poster (A4 Size)

Why I Removed Ammonia from the Ingredients List:

I removed ammonia from the redesigned infographic for three important reasons: 

1. Safety Concerns

Ammonia is a strong chemical that can burn grass if over-applied, irritate skin, release harmful fumes, and damage soil microbiomes. For a "Home Grown DIY Lawn Enhancer," this conflicts with the goal of a safe, simple, household-friendly mixture.

2. Unnecessary Ingredient

Research shows that the commonly recommended DIY mixture does not require ammonia to be effective. Beer, soda, dish soap, and mouthwash already serve the essential functions: sugar source (soda), bacterial/microbe activator (beer), surfactant for soil penetration (dish soap), antifungal/moss control (mouthwash). Ammonia does not significantly improve results and adds risk. 

3. Design Clarity

Removing ammonia reduces the ingredient count from 5 to 4, which makes the infographic simpler and easier to follow. It aligns with modern information-design principles: clarity over complexity. The newer version is safer, more practical, more user-friendly, and more visually consistent.

PART 2: Minimal Animated Infographic (20%)

RESIZED POSTER

I resized the original poster to 1080 × 1920px to suit the vertical social media format. After receiving feedback from Mr. Fauzi, I adjusted the layout by repositioning and resizing the block sections to reduce excessive white space. I also replaced some of the graphics to ensure the design stays within the safe zone for social media platforms.

Fig. 3.2.1, Resized & Recolored Final Infographic Poster (1080 × 1920px)

ANIMATING PROGRESS

To enhance the clarity and engagement of the poster, I incorporated simple motion effects using Canva.

For the ingredient border, I applied the “Pop” animation to each component. They appear one by one in sequence, which helps viewers understand the correct order of the ingredients more intuitively. This sequential popping effect makes the flow clearer and adds a sense of progression to the layout.

Fig. 3.2.2, left: Pop Animation Feature on Canva; right: Animate app on Canva

For the graphics in the step-by-step section, I used a combination of Lottie Animations (through the Lottie app in Canva) and Canva’s built-in Animate features. These lightweight animations add subtle movement to the icons, making each step more visually engaging without overwhelming the viewer.

Overall, the animations guide the audience through the content smoothly while keeping the design dynamic and easy to follow.

Fig. 3.2.3, left: Application Guide Graphics Animation; Lottie Animations on Canva

FINAL ANIMATED INFOGRAPHIC ON YOUTUBE

When converting the infographic into an animated format, the original colors did not transfer well because video screens and animation platforms display colors differently than static images. Here's why I changed the bright green to a darker green:

1. To Improve Readability and Contrast

Bright green reflects a lot of light, which makes white text look washed out, makes icons lose details, and makes the poster feel "glary," especially on screens. A darker green gives stronger contrast, so the text and line-art icons become clearer and sharper. 

2. To Look More Professional and Natural

Bright neon green may look cheap, outdated, and visually overwhelming. Darker green is usually associated with nature, soil, plants, growth, and eco-friendly design. This makes the final infographic appear cleaner, calmer, and more trustworthy. 

3. To Reduce Visual Noise

The original bright green competes with the icons, the images, and the title. Switching to a darker green "pushes the background back," allowing the important elements to stand out. This improves visual hierarchy, which is a core information-design principle.  

4. To Work Better in Animation

Bright green tends to flicker, glow too much, or shift color during rendering or compression. However, dark green stabilizes better in video format, keeping the text readable, shapes clear, and colors consistent across different screens.

5. To Create a Softer, More Modern Aesthetic

Modern infographic design avoids overly bright, saturated colors. The darker palette is easier on the eyes, fits current design trends, and gives a polished, minimalistic finish.

Below is the final animated infographic uploaded to YouTube in the YouTube Shorts format: 

Fig. 3.2.4, Final Animated Infographic on YouTube

Click here to access the video on YouTube.

---

FEEDBACKS

Week 6 (Absent)

Week 7

Mr. Fauzi approved the original poster I will be redesigning and provided guidance on selecting infographic posters to redesign, as well as on creating the initial sketch.

Week 8 (Independent Learning Week) 

Week 9 (Absent)

Week 10 (Submission)

Mr. Fauzi recommended aligning the title to the left to create better visual cohesiveness. He also advised adjusting the layout by repositioning and resizing the section blocks to minimize excessive white space. In addition, he suggested updating certain graphics to ensure they remained within the safe zone for social media formats.

---

REFLECTION

This project strengthened my understanding of how visual hierarchy, colour, and layout influence the effectiveness of an infographic. Reworking the original design made me more aware of how excessive colours, inconsistent imagery, and poor organization can hinder comprehension. By simplifying the content, restructuring the layout, and adopting a consistent icon-based system, I was able to produce a clearer and more coherent visual narrative.

The animation component further deepened my awareness of delivery mechanisms in information design. Sequencing elements with the Pop animation and integrating Lottie graphics demonstrated how motion can guide attention and support step-by-step understanding. Adjusting the colour palette for video output also highlighted the importance of considering screen behaviour and legibility in digital formats.

Overall, this assignment helped me apply information-design principles more deliberately and critically, reinforcing the need for clarity, consistency, and purposeful design decisions when transforming information into visual communication.