Information Design/Project 1&2

17/02/2025 - 04/03/2024 (Week 03 – Week 05)

Shao Han / 0369187

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

Project 1&2

CONCENT

• INTRODUCTION
• LECTURE
• PROJECT 1&2

PART 1: Infographic poster

PART 2: Minimal animated infographic

• FEEDBACK
• REFLECTION

INTRODUCTION

LECTURE

WEEK 3

Key Concepts:

1. Chunking – People can better remember information when it is grouped into meaningful chunks rather than presented as individual elements.

2. Cognitive Load – If too much information is presented at once, it exceeds the brain’s processing capacity, leading to confusion or forgetfulness.

3. Applications in Design & Communication:

• User Interface (UI) Design: Menu options or navigation links should be grouped into 5-9 items per section for better usability.
• Education & Learning: Breaking down complex concepts into small, manageable chunks enhances comprehension and retention.
• Marketing & Advertising: Product messages should be short, concise, and structured within the memory limit to maximize impact.

Limitations & Modern Updates:

• Some later research suggests that working memory capacity is often closer to 4±1 chunks, especially for complex information.
• Factors like attention, familiarity, and context affect memory retention—well-organized and meaningful information is easier to recall.

WEEK 4

Manuel Lima's 9 Directives Manifesto

Form Follows Function

• Core Idea: The design of a visualization should be driven by the purpose and function of the data, rather than merely focusing on aesthetics.

Interactivity is Key

• Core Idea: Visualization is not just a static image; it should allow users to explore data, adjust views, and gain deeper insights.

Cite Your Source

• Core Idea: Every visualization should provide a data source to ensure accuracy, transparency, and credibility.

The Power of Narrative

• Core Idea: Data visualization is not just about presenting information but also about storytelling, helping audiences understand the meaning behind the data.

Do Not Glorify Aesthetics

• Core Idea: While aesthetics are important, they should never compromise data clarity and accuracy.

Look for Relevancy

• Core Idea: Visualization should focus on key information rather than adding unnecessary data or visual elements.

Embrace Time

• Core Idea: Data is often dynamic and evolves over time, so visualizations should incorporate a time dimension to show trends and changes.

Aspire for Knowledge

• Core Idea: The ultimate goal of visualization is to enhance knowledge and understanding of the world.

Avoid Gratuitous Visualizations

• Core Idea: Not all data needs visualization; unnecessary visualizations can create noise and mislead audiences.

PROJECT 1&2

Requirement：

PART 1: Infographic poster        
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

PART 2: Minimal animated infographic
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

Process：

PART 1: Infographic poster

I am going to make an information chart about my favorite animation "GINTAMA". According to the teacher's request, I wrote down my thoughts in Google Docs and waited for the teacher's instructions.

Under the direction of Mr. Fauzi, I started the next step of production.

I first looked for the black-and-white original picture as the background, which is in line with the cartoon style I want, and can help me set the tone of the whole poster.

Fig1.1 Background selection,Week 4 (27/2/2025)

Then I added the character elements and added the text introduction. In the choice of the text box, I used a pattern design similar to the dialog box, which echoed the cartoon style.

Fig1.2 Background selection,Week 4 (27/2/2025)

But in the fifth week of class, through the advice that Mr. Fauzi gave to other students, I found that the content of my message was inaccurate. My theme was to express the relationship between the protagonists. I did not set a title for the information chart poster to facilitate readers to understand the content of the poster.

In order to highlight the relationship between the three characters, I separated the character pictures and changed the layout of the poster. I divided the background into three areas of cartoons, echoing the three characters.

In the choice of color, I used the representative colors of three roles to highlight the characters.

Fig1.3 Modify the scheme,Week 4 (27/2/2025)

When making on the basis of the revised scheme, I deleted some unimportant elements, which can help make the picture more concise and will not affect the reading of the information. 

Fig1.4 Further modification,Week 4 (27/2/2025)

In the last step of the improvement, I decided to add some arrows to reflect the relationship between the characters more intuitively and make the expression of the poster easier to understand. at the same time, I modified the size of the two characters on the left to highlight the central position of Gintoki, so that the poster can present more information in pictures and text.

In order to keep the world less cluttered, I deleted the animation profile in the lower right corner, so that the whole information poster focuses on showing the relationship between the three protagonists, and at the same time, it leaves space for the title of the poster. I moved the title at the top to the lower right corner. The proportion of title is larger and more eye-catching, so that the audience can see and quickly understand the theme of the poster.

I also need a title that shows the purport of the poster more intuitively.

Fig1.5 Further modification,Week 4 (27/2/2025)

Mr. Fauzi told me that there were too many words in the poster for the audience to read easily, so I streamlined the poster information, extracted key words, and enlarged the text to ensure that the content was not cluttered.

Infographic poster

Fig1.6 Final poster,Week 6 (11/3/2025)

PART 2: Minimal animated infographic

Then I started to make dynamic circular posters. I imported all the layers of the poster into AE and began to think about how movement could guide the audience visually.

In the whole poster, the key to visual guidance is the arrow in the picture, so when doing the dynamic effect, I am going to do a circular magnification of the arrow to highlight the close relationship between the three people and guide the audience to read the information very well.

For the title of the poster, I have designed the effect of constantly zooming in and out, so that the audience can more quickly notice the theme of the whole poster.

Fig2.1 Dynamic information,Week 5 (5/3/2025)

I choose to insert the dynamic effect of the note in the upper right corner after the arrow animation cycle, so that it not only does not affect the transmission of other information, but also can well transmit the information in the note to the audience.

Fig2.2 Dynamic information,Week 5 (5/3/2025)

After Mr. Fauzi made a suggestion for my poster, I modified the dynamic loop screen accordingly, so here is the final effect.

Minimal animated infographic

YOUTUBE LINK（click）

Final Output

Final outcome - Infographic poster

Final outcome - Infographic poster,PDF

Final outcome -Minimal animated infographic,GIF

Final outcome -Minimal animated infographic,VIDEO (YOUTUBE LINK）

GOOGLE DRIVE LINK（clik)

FEEDBACK

Week 3

I may proceed accordingly. Make sure you have number point for each step.

Week 4

no feedback

Week 5

Just like Mr.Fauzi mentioned before during every classes, please make sure the text is readable and less. At the moment, there's so many text in my poster and it cannot be read.
I need to simply and put a simple point instead of paragraphs.

REFLECTION

Experiences

This assignment allowed me to explore the mechanics of effective infographic design, focusing not only on the content. Choosing a reference poster was the first challenge, as I needed to analyze its structure, hierarchy, and design principles, and then modify it. Through sketching and redesigning, I tried different visual hierarchies, typography, and color schemes to improve clarity. Simplifying the poster while still communicating the information effectively was a valuable learning experience. And in the process of creating a minimal animated infographic, I further understood how motion design can increase user attention.

Observations

Amid the design prepare, I caught on that infographics ought to be a blend of being simple to get it and having sufficient data. Making the plan less complex can offer assistance individuals studied it way better, but in the event that it's as well straightforward, vital data could be cleared out out, and individuals may not completely get it it. So, when I abbreviate the substance, I got to make beyond any doubt that the vital data is still there and simple to get it. 

Within the liveliness segment, I taken note that the way something moves and the speed of its activities truly influences how curiously the data is. Controlling the speed and changes within the liveliness can offer assistance share data more effortlessly and clearly.

Findings

Through this assignment, I realized that an excellent infographic should be beautiful, clear and functional.

In addition, I also found that designing static infographics and animated infographics requires different considerations. In static design, visual hierarchy and readability are the most critical, while in animated design, rhythm, transition effects and time control are more important.