Information Design - Final Project: Infographic Video Animation

03/02/2025 - /02/2025 | Week 01 - Week 07

Wong Jia Yi Carmen | 0357198 | Section 04 Group 04

Information Design | Bachelor of Design (Hons) In Creative Media

Project 2 - Infographic Video Animation 

---

LECTURES

Week 1: Types Of Infographics

fig 1.0 Types Of Infographics Week 1 (07/02/2025)

Infographics work wonders when it comes to raising engagement and captivating the audience's attention. 

An infographic is one of the powerful ways to convey an idea through visualization. In design and marketing, various forms of infographics are used to represent information in a simple and visually appealing manner. They can be effective alternatives to regular text-based content.

There are 8 types of infographics. Which are:

1. List infographics
2. Statistical infographics
3. How to infographic
4. Timeline infographics
5. Comparison infographics
6. Map and location infographics
7. Flowchart infographics
8. Process description infographics

01. List Infographics

fig 1.1 Example of a List Infographic Week 1 (07/02/2025)

A list infographic is a type of informational graphic that conveys information through written lists. It's full of written copy but highly visual.

Like other types of graphics, it is catchy and usually comprises a wide range of design elements. Putting information into context with visuals appeals to reading and retains the statistic more efficiently.

02. Statistical Infographics

fig 1.2 Example of a Statistical Infographic Week 1 (07/02/2025)

A Statistical Infographic is an infographic that contains pie charts, bar graphs, and any other visual representation of data.

It's easier to make sense of anything through a statistical infographic when there is a presentation of information through visual means in front of anyone.

Place percentage radials alongside brand illustrations in order to draw the audience in and hook them into reading the information.

03. How to Infographics

fig 1.3 Example of a How To Infographic Week 1 (07/02/2025)

A how-to infographic is an image that details a method for doing something, such as solving a problem or completing a process.

This is quite useful as an alternative to lengthy blocks of text describing step-by-step details, such as proper hand washing or proper workplace setup, without overwhelming the viewer. The steps involved in the process are easier to internalize with a how-to infographic compared to those described by either a paragraph or written list.

04. Timeline Infographics

fig 1.4 Example of a Timeline Infographic Week 1 (07/02/2025)

The timeline infographic is not only useful and informative but also catches the eye. Timeline infographics are one of the most diverse regarding their usage. When working on this type of infographic, icons and illustrations along a full length of a timeline, representing each point are very important.

05. Comparison Infographics

fig 1.5 Example of a Comparison Infographic Week 1 (07/02/2025)

Comparison Infographics are one of the best types of infographics. It is the manner of comparing and contrasting 2 or more different options in a visually friendly way.

This type of infographic presents 2 or more alternatives side by side, hence helping the readers to understand the distinction between various concepts and, in many cases, choose which option that will suit them the best.

06. Map or Location Infographics

fig 1.6 Example of a Map/Location Infographic Week 1 (07/02/2025)

A map/location infographic is amongst the most commonly utilized forms of infographics when talking about business or organizational context.

These can be utilized for several reasons, Commonly, people would resort to this in instances wherein demographic data and other location-related information need to be communicated.

07. Flowchart Infographics

fig 1.7 Example of a Flowchart Infographic Week 1 (07/02/2025)

An infographic of a flow chart is basically graphically presenting some stream of information, for example, different steps of action.

A flowchart enhances the levels of engagement, although it does simultaneously provide a person with an outright clear view with respect to the process involved.

Since it guides people one by one, it tends to be personal, thereby striking familiarity with the potential.

08. Process Description Infographics

fig 1.8 Example of a Process Description Infographic Week 1 (07/02/2025)

A Process Infographic visually describes key elements, actions and steps of a process in order. It is a process of communicating technical information or a complex series of actions.

It's useful because it highlights the most important steps and simplifies the complex ideas by breaking them down, and then grouping them by category.

Week 2: L.A.T.C.H Theory

fig 1.9 L.A.T.C.H Theory Week 2 (10/02/2025)

"Information may be infinite, however... the organization of information is finite as it can only be organized by LATCH: Location, Alphabet, Time, Category, or Hierarchy. I've tried a thousand times to find other ways to organize, but I always en up using one of these five." - Richard Saul Wurman.

fig 1.10 The Latch System Week 2 (10/02/2025)

One of the most difficult tasks still a UX designer faces is how to organize information meaningfully and effectively. We might have worked on multiple projects spanning different industries, yet even today, when we start either organizing or restructuring information for a new website, we cannot but think: "Is this really making sense?" or "Am I using the organization principles properly?"

L.A.T.C.H Theory

01. Location

fig 2.0 Example of A Location Information Week 2 (10/02/2025)

This is the technique of organizing information based on its location. This give a spatial order to the information.

L.A.T.C.H Theory

02. Alphabet

fig 2.0 Example of A Alphabet Information Week 2 (10/02/2025)

Using an alphabetical organization scheme proves to be the most straightforward sorting method since every person recognizes the alphabet. 

We should verify that the genuine labels are capable of forging connections with user mental models.

L.A.T.C.H Theory

03. Time

fig 2.1 Example of A Time Information Week 2 (10/02/2025)

This scheme relies on the temporal; nature of the content to organize information in it. This works pretty well on Social Media Websites, where people would want to know about the most recent events in their contacts' lives.

L.A.T.C.H Theory

04. Category

fig 2.2 Example of A Category Information Week 2 (10/02/2025)

Organizing content on websites is done this way more than any other technique. 

The concept of Category applies to any distinctive grouping process from both website and audience viewpoints. Users must grasp the categories they create. The process of category design benefits from using the Card Sorting tool.

L.A.T.C.H Theory

05. Hierarchy

fig 2.3 Example of A Hierarchy Information Week 2 (10/02/2025)

Hierarchy refers to arranging information by any order, such as size, cost (Low to High or High to Low), popularity etc.

Week 3: Miller's Law Of Memory

fig 1.0 Miller's Law Of Memory Week 3 (17/02/2025)

The delivery of messages to others becomes affected by the interruptions together with misunderstandings which cause interruptions and misunderstandings in communication systems.

Short-term memory storage capacity amounts to seven items in accordance with Miller's law and the temporary information disappears within thirty seconds.

fig 1.1 The Magical Number Seven, Plus or Minus Two Week 3 (17/02/2025)

"The Magical Number Seven, Plus or Minus Two"

It shows human brains contain a limit of 7 items for short-term memory retention at one time although Miller called this phenomenon the "Magical number seven with a range of plus or minus two." The human brain reaches its information retention capacity when it surpasses seven items which then leads to detail omission.

fig 1.2 Validating Miller's Rule: The Paradox of Choice Week 3 (17/02/2025)

According to Miller's law humans experience restricts in their mental processing abilities.  

During communication periods brain processing stays limited but does not ensure complete understanding of received information.

fig 1.3 The Art of Refining Options Week 3 (17/02/2025)

Making choices is challenging. The process of creating excellent choices becomes particularly challenging to accomplish. The combination of many options in our world makes selecting good choices an impossibly difficult task.

You stand to forget information presented to you more than seven times within a short period of time while struggling to recall it within 30 seconds

fig 1.4 The Art of Refining Options Week 3 (17/02/2025)

The human brain functions with restricted information intake when communicating and fails to grasp all elements of discourse thoroughly.

People divide information into smaller sections to conform to Miller's rule of thumb. The message becomes easier to understand when broken down into smaller parts through which our brains can handle information in short-term memory limits.

Week 4: Manuel Lima's 9 Directives Manifesto

fig 1.5 Manuel Lima's 9 Directives Manifesto Week 4 (24/02/2025)

The Information Visualization Manifesto by Manuel Lima, which was posted on the site 'VisualComplexity.com', lists 9 essential guidelines that aid in defining the fundamentals of information visualization. It provides a clear framework for comprehending the goal and methodology of information visualization, setting it apart from infographics and information art.

fig 1.6 Form Follows Function Week 4 (24/02/2025)

Form Follows Function: "The explanation, which leads to insight, should always be the main focus." Begin with a Question: A question should always guide your effort.

fig 1.7 Interactive is Key Week 4 (24/02/2025)

Allows for investigation and learning through discovery.

fig 1.8 Cite Your Source Week 4 (24/02/2025)

Always remember to disclose where your data originated.

fig 1.9 The Power of Narrative Week 4 (24/02/2025)

Humans are naturally drawn to stories. Transform your information into a compelling narrative to make it more engaging and memorable.

fig 2.0 Do Not Glorify Aesthetics Week 4 (24/02/2025)

Do Not Glorify Aesthetics: "Should always be a consequence and never a goal".

fig 2.1 Look For Relevancy Week 4 (24/02/2025)

What is the need to visualize the information?

fig 2.2 Embrace Time Week 4 (24/02/2025)

Effective time management is essential for planning work and making better decisions to attain the best results because managing time can be difficult.

fig 2.3 Aspire for Knowledge Week 4 (24/02/2025)

Converting data into knowledge, improving comprehension, and assisting cognitive processes are all essential functions of information visualization.

fig 2.4 Avoid Gratuitous Visualizations Week 4 (24/02/2025)

Avoid Gratuitions Visualization: "Should react as an empowered lens of insight, and should never introduce additional noise to the flow."

Week 5: Case Studies (Constructive Workflow)

1. Understand the question

2. Construct a strategic plan

• Evaluate data & information.
• Identify the pros and cons.
• Create a content creation plan.
• Understand your outcome.
• Build case studies.

3. Fill in the blank

• Create empty folders as a structure.
• Fill in each folder with progress.
• Synchronize all working files for each software requirement.

4. Get some Ideas & Inspiration

5. Set a perimeter

• Ideas are limitless.
• Time is a constraint.
• Identify your strengths.
• Reference is just a benchmark.
• Solution is the answer.

The key to focus is to balance your Left and Right brain.

Week 6: Recap Week 5 Lecture

Week 7: No Lecture

---

INSTRUCTIONS

fig 1.0 Information Design's MIB Week 6 (13/02/2025)

Timeframe: Week 01 - Week 07

Description: Using a processed design framework, you'll will now produce an infographic report to present the given information to a 'Target Audience' with the purpose of:

1. Creating awareness ()/such as Global Warming, recycling, etc.)
2. Explaining a process (such as a "How To" video)
3. Defining a concept (such as "What is Fast Fashion", "What is Color Wheel", etc)

Design Considerations:

• Organization Principles - LATCH and Content Organization
• Aesthetic Principles - Animation principles
• Cognitive Principles - Principles of visualization

Output Expectation:

The presentation must be deliberated on, consider each assessment rubric of sorts to your final outcome:

• Show casuality
• Multivariate graphics and visual
• Integrate word number and images
• Content count
• Within eyesight
• Use multiple charts
• Do not de-quantify

Mr Shamsul opened up a Google Sheet for us to put our name in a group so we could start thinking of the topic we wanted for our animated video to be.

fig 1.0 Information Design's MIB Week 1 (06/02/2025)

After I've found my groupmates, we quickly settle down and find topics for our animated video and we all lay out our ideas.

fig 1.1 Laying out Ideas with Groupmates Week 1 (06/02/2025)

After getting consulted with Mr Shamsul, he suggested that we should relate our topic to web accessibility.

fig 1.2 Laying out Ideas with Groupmates Week 1 (06/02/2025)

Sherwei, our group leader, makes a list for us to put down our names of the tasks we wanted to do for our flip presentation slides.

fig 1.3 List of Task for the Presentation Slides Week 1 (06/02/2025)

I chose to do the objectives part, and here are everybody's tasks for the presentation.

fig 1.4 Everybody Task for the Presentation Slides Week 1 (06/02/2025)

We opened up a Google Docs so it's easier for everyone to put down their information.

 

fig 1.5 Information in Google Docs Week 1 (07/02/2025)

Here are our completed slides in Canva.

fig 1.5 Information in Google Docs Week 1 (09/02/2025)

fig 1.6 Flip Presentation PDF Week 1 (09/02/2025)

We decided to have an online meeting to volunteer to present and see where we needed to improve in the slides. I forgot to screenshot our meeting, but here is our conversation about it.

fig 1.7 Online Meet Conversation Week 1 (09/02/2025)

After getting our slides approved by Mr Shamsul, we moved on with the video, and our group leader put out a list for us to put down our names for the tasks of the video.

fig 1.8 List Of Tasks of the Video Week 3 (18/02/2025)

I chose to be the Voiceover and here are everybody's tasks for the video.

fig 1.9 Everyone's Task for the video Week 3 (18/02/2025)

We opened up a Miro Board as per Mr Shamsul's request. 

fig 1.10 Progress in Miro Board Week 4 (25/02/2025)

We then decided to improve on the illustration.

fig 2.0 Changes on The Illustration in Miro Board Week 5 (07/03/2025)

We decided to have an online meeting again to check everybody's progress and suggest ideas and explain how the illustration is gonna be for other group members who are not in charge in the illustration team.

fig 2.0 Online Meeting to check Progress Week 6 (11/03/2025)

For Week 6 tutorial class, Mr Shamsul wanted to check our progress. He suggested that we should start with the voiceover first as the transition its not gonna match up with the speed of the voiceover.

fig 2.1 Week 6 Tutorial Class Week 6 (13/03/2025)

And so I started with the voiceover.

fig 2.2 Voiceover Week 6 (14/03/2025)

After I'm done with the voiceover. I put them in a folder in Google Drive and send it to the group for the editing to work their magic.

fig 2.3 Voiceover Week 6 (14/03/2025)

Due to the voiceover doesn't match with the illustrations because of the script. Sherwei made some changes and inform me so I could re-record Scene 4's voiceover.

fig 2.4 Problems with the script Week 7 (23/03/2025)

Here's the updated Scene 4 script in the miro board.

fig 2.5 Updated Scene 4's script Week 7 (23/03/2025)

After I got all the information, I began with the recording on my phone and sent it to Sherwei through Google Drive as it is much easier this way.

fig 2.6 Re-record Scene 4's Voiceover Week 7 (23/03/2025)

fig 2.7 Scene 4 Updated Voiceover Sent Week 7 (23/03/2025)

Here is the link for our Final Animated Video:

Colour Blindness Categories and How It Affects Web Accessibility

fig 2.8 Animated Video: Colour Blindness Categories and How It Affects Web Accessibility Week 7 (23/03/2025)

---

FEEDBACK

It's an interesting topic, love the colourfulness and its very lively. Make sure to do the voiceover first so it could match up the transitions of the video when editing.

---

REFLECTION

We worked together with my groupmates on our final project in a sizable group of nearly ten people, which at first worried me. I was worried that we might run into the some problems because I had a difficult time working in a group this size in a previous semester. But I was pleasantly relieved at how smooth it was. Each person took ownership of their work, made steady progress, and handled their responsibilities on their own. Our group leader was particularly outstanding, she gave clear instructions and offered suggestions for how to make the slides and the video better, which I greatly appreciated.

My contribution to the project was providing the video's voiceover. Despite the fact that it took several attempts to get it right, I truly enjoyed the task. Because I wasn't happy with my voice and how I sounded, I had to re-record a few times. However, this process forced me to consider the script and make minor changes to better fit the illustrations. All in all, it was a fulfilling experience, and I appreciate how well our team worked together to complete the project.