Information Design: Project 1&2

-

Infographic Poster & Minimal Animated Infographicㅤ  ㅤ ㅤ  ㅤ ㅤ ㅤ  ㅤ ㅤ  ㅤ   ㅤ ㅤ  ㅤ 

 Table of Contents 


Project 1: Infographic Poster

Project 2: Minimal Animated Infographic

 Instructions 



Find out other information about this module below

Module Information Booklet

 Lectures 
Week 3
We were introduced to the Information Design module, which consist of 4 tasks: Exercise 1, Exercise 2, Project 1 (individual work), and Project 2 along with the Flip presentation (group work). For Exercise 1, titled "Quantifiable Information", we need to select and prepare an object for analysis.

Week 4
In this week's lecture, we learnt about Manuel Lima's 9 Directives Manifesto, which outlines key principles for effective information visualisation. It emphasises that design should prioritise function over aesthetics, encourage interactivity, and always cite sources. Storytelling enhances engagement, while relevance and time management are crucial for clarity. The goal is to transform data into knowledge while avoiding unnecessary visual complexity. These principles help differentiate information visualisation from infographics or information art, ensuring that visuals serve as insightful cognitive tools rather than mere decoration. The lecture also references Manuel Lima's TED Talk and VisualComplexity.com for further explanation.

Week 5
During this week, we learnt about the Constructive Workflow concept by Fauzi Yusoff, emphasising the connection between thinking patterns and digital workflow efficiency. It highlights that understanding how your brain works 

 Project 1&2: Animated Infographic Poster 
Task Requirements

Part 1: Infographic Poster (10%)
  • Choose 1 infographic poster reference from Internet (Please consult before proceed)
  • Redesign the poster into A4 size. Sketch the idea and process
  • Redesign and simplify the poster based on visual hierarchy & typography
  • Simplify the poster's design based on color, shape & pattern
  • Attach your final poster on E-Portfolio with explanation and reflective writing
Part 2: Minimal Animated Infographic (10%)
  • Animate your infographic poster into one static loop animation page
  • Loop duration in between 15-30 seconds
  • Size: 1080 x 1920px (Vertical Video) Upload to your own YouTube channel
Objective: Create a static infographic using visual hierarchy, color, shape, and typography. Transform static infographic into a 15-30 second looping animated infographic.


Part 1 Work Progress

A. Concept Development (Mood board & Visual References)

After researching for some ideas, I decided to work on this poster that I found on Pinterest. The title of this poster is The Craft of a Latte. It breaks down steps to make a cup of latte. This includes: Beans, Milk, Technique & Latte Art.

1. Choose a Reference & Research
  • Study an existing infographic
  • Identify areas to improve in terms of clarity, layout, and visual design
2. Redesign the Poster Layout (A4 Size)
  • Utilize icons and minimal text instead of dense paragraphs
  • Clearly shows each stage of crafting a cup of latte
  • Maintain graphics, but good amount of information as well
3. Enhance Visual Hierarchy
  • Use typography styles to differentiate headings, key points, and descriptions
  • Arrange content so that it naturally guides the viewer's eyes
4. Apply Design Principles
  • Colour Palette:
  • Shapes & Patterns:
  • Illustrations:
5. Finalize & Submit
  • Ensure readability and a balanced composition
  • Export the final A4-sized poster in high-resolution (JPEG or PNG)
  • Upload minimal animated infographic video to YouTube

Proposal Document

Attached below is the proposal document:

Figure 3.1 Proposal Document


Visual References

I looked through Pinterest and chose 1 visual reference that I will be using to "re-design" the poster. I decided on this poster as I think there are many improvements that can be made. This includes visual hierarchy, choice of fonts, colour palette and so on. I made sure to analyse the strengths and weaknesses of this poster so that I can easily list things I can improve on.

Figure 3.2 Visual Reference

Analysis of Strengths and Weaknesses

Strengths
  • Visually Appealing: The poster uses warm colors and an engaging layout that fits the theme of coffee.
  • Clear Hierarchy: The title, subtitles, and body text are well-structured, making it easy to follow.
  • Informative Content: It covers key aspects of making a latte, from coffee beans to milk steaming and pouring techniques.
  • Use of Icons and Illustrations: The visual elements, like coffee beans, milk pitchers, and latte art, enhance readability and engagement.
  • Step-by-Step Instructions: The technique section is structured logically for beginners.

Weaknesses
  • Typography Contrast: The red and brown text may blend into the background, reducing readability. Using a more contrasting color for the text could improve clarity.
  • Font Choices: The combination of serif and sans-serif fonts is decent, but the title font is quite bold and large, which may overshadow the rest of the content.
  • Overlapping Elements: The milk pouring illustration blends into the background and text, making it a bit chaotic. Separating the text and illustration more clearly would enhance readability.
  • Spacing Issues: Some sections feel cluttered. Increasing spacing around key sections would improve the flow of information.
  • Lack of a Call-to-Action: The poster is informative but lacks a call-to-action, such as "Try making your own latte today!" or a QR code for more resources.


Improvements that can be made

  • Improve Contrast: Use a darker background or make the text a bit more distinct.

  • Refine Layout: Separate the text from the illustrations more clearly.

  • Enhance Readability: Use consistent fonts with a balanced mix of serif and sans-serif styles.

  • Add a CTA: Encourage engagement with a call-to-action or interactive elements.

  • Better Alignment: Ensure elements are evenly spaced to avoid clutter.


Sketches

I started off with sketching my ideas and proposing them to Mr Shamsul during online consultation. 
Figure 3.3 Sketches 1

Initially, these were my sketches and Mr Shamsul said the cup idea seems like the same as the original poster. It was recommended I sort of change it so it makes a difference from the original poster. Hence, I decided to draft up some ideas while playing around in Adobe Illustrator. 

Figure 3.4 Sketches 2

I drafted this idea when trying out in AI, then I decided to go with the box idea and make improvements to the typeface and arrangement of the body texts.


Digitisation in Adobe Illustrator

I first added the boxes and header text. After that I referred to the original poster and changed up the text sentences as I think some words weren't needed. There was also grammar error.

Figure 3.5 Progress

Figure 3.6 Progress

Then, to fill up the empty spaces, I decided to include graphic elements that are related to the topic. In which are coffee illustrations.

Figure 3.7 Illustrations

After that, I included the illustrations into the layout that I have done. But I also have to include the latte art information, so I drew up some latte art on Procreate using my iPad. I traced according to real latte art examples for these icons.

Figure 3.8 Progress

Figure 3.9 Latte Art on Procreate

After all the adjustments, here is my final outcome for Project 1.


Final Outcome

Project 1: Infographic Poster

Figure 3.10 Final Outcome (JPEG)

Figure 3.11 Final Outcome (PDF)


Part 2 Work Progress

Animating in Adobe After Effects

After completing the static infographic, the next step is to animate it into a 15-30 seconds looping infographic that visually explains the steps to creating a latte. Instead of just presenting static information, animation can help make the process more dynamic and engaging.

I begin by breaking down each layer and uploading into Adobe After Effects. The animation should start from the header text appearing, while the coffee illustrations pop in, and the coffee beans rotating a little throughout.

Figure 3.12 Progress

Final Outcome

Project 2: Minimal Animated Infographic

Figure 3.13 Final Project 2 (GIF)


Figure 3.14 Final Project 2 (MP4)


 Reflection 


Completing the design and animation of my infographic poster on "The Craft of a Latte" was both a creative and technical challenge that helped me refine my skills in visual storytelling and motion design. From conceptualization to final animation, the process involved careful planning, design decisions, and problem-solving to ensure clarity, engagement, and aesthetics.

At the start, I focused on crafting a visually appealing layout that would effectively communicate each step of the latte-making process. Choosing a warm, coffee-inspired color palette and a clean, modern font helped create an inviting and professional look. Icons and illustrations were essential in breaking down the steps into digestible visuals, making the information more accessible.

The animation phase added another layer of complexity. I experimented with motion effects such as smooth transitions, liquid pouring animations, and steam rising to enhance the storytelling aspect of the infographic. Timing was crucial—each step needed to flow seamlessly into the next without feeling rushed or too slow. Ensuring that animations complemented the static design rather than overpowering it was a key consideration.

One challenge I faced was balancing detail with simplicity. While I wanted to include all necessary information, I had to make sure the design didn’t feel overcrowded. Finding the right pacing for animations also required multiple revisions to maintain a natural and engaging flow.

Overall, this project was a rewarding experience that strengthened my ability to combine design and motion graphics effectively. It deepened my understanding of how animation can enhance static information, making it more engaging and dynamic. If I were to refine this project further, I would explore adding subtle sound effects or interactive elements for an even more immersive experience.

This project has given me greater confidence in my ability to create visually compelling educational content, and I look forward to applying these skills to future design and animation projects.