Information Design

WANG JIHENG | 0378904

Bachelor of Design (Hons) in Creative Media

Taylor's University

GCD60504 Information Design

Semester Timeline: 24/04/2026 – 12/06/2026 (Week 1 – Week 9)

---

TABLE OF CONTENTS

INSTRUCTIONS

LECTURE

EXERCISE 1

EXERCISE 2

EXERCISE 3

EXERCISE 4

---

INSTRUCTIONS

---

EXERCISE 1: Quantifying & Visualise Date (5%)

Title:
Quantify & Visualize Data

Concept:
I chose buttons as my data objects.

Reason:
Buttons have different colours and sizes, which makes them suitable for sorting and comparing visually.

Process:
1. Purchased mixed buttons.
2. Sorted them by colour.
3. Counted each category.
4. Arranged buttons into bar-chart composition.
5. Added hand-written labels and statistics.
6. Took final top-view photograph.

Final Data:

White = 20
Pink = 14
Yellow = 10
Green = 9

Red = 5
Blue = 2

Total = 60 Buttons

Size Data:

Large = 6
Medium = 16
Small = 38

Outcome:
Successfully created a physical infographic using real objects.

Fig 1.1 Final composition for Exercise 1 – Button Data Visualization.

As part of our group work, each team needs to create a presentation that explores and explains infographics.

Our first group task was to research and present on the core types of infographics. The goal of this assignment was to build a shared understanding of different visualisation formats, their strengths, and their applications in communicating complex information clearly.

Team & Work Division

We worked in a 5-person team, with each member responsible for researching and presenting 2 infographic types, ensuring even distribution of work and deep focus on each category:

• Alicia Low Ker Chia (0376231)
• Gladys Chung Jing Tian (0383192)
• Lin Lexuan (0370729)
• Wang Jiheng (0378904)
• Ma Xiai (0387304)

Presentation Content & Structure

Our presentation covered 10 key infographic types, organised by their function and use case:

1. List Infographic: For presenting sequential or unordered data in a clear, easy-to-scan format.
2. Comparison Infographic: For highlighting similarities and differences between two or more subjects.
3. Flow Chart Infographic: For visualising processes, workflows, or decision-making paths.
4. Visual Article Infographic: For transforming long-form text into visual, scannable content.
5. Map Infographic: For visualising geographic data, locations, or regional patterns.
6. Timeline Infographic: For showing chronological events, histories, or progress over time.
7. Hierarchy Infographic: For displaying organisational structures, rankings, or layered relationships.
8. Anatomical Infographic: For explaining the structure, parts, or inner workings of an object or system.
9. Animated Infographic: For adding motion to static visuals to improve engagement and highlight key data points.
10. Statistics Infographic: For presenting numerical data, trends, and comparisons in a visual format.

For each type, we included:

• A clear definition of the format
• Common use cases and ideal scenarios
• Key design characteristics
• Real-world examples and best practices

In this exercise, I used Adobe After Effects to create a simple bouncing ball animation.

First, I created a new composition with a size of 800 × 800 pixels and set the duration to 5 seconds. Then, I used the Rectangle Tool to create a background and adjusted the colour to make the composition look clean and simple.

Next, I used the Ellipse Tool to create a circle. I held the Shift key to make sure the shape was a perfect circle and placed it in the center using the Align panel.

After that, I selected the circle layer and pressed “P” to open the Position property. I added the first keyframe at the beginning of the timeline. Then, I changed the Y position of the circle at different time points to create an up and down bouncing motion.

At first, the animation looked very stiff and mechanical. To improve this, I selected all keyframes and applied Easy Ease (F9), which made the movement smoother and more natural.

I also experimented by duplicating the circle and changing its color and position timing slightly. This made the animation more dynamic instead of having only one object moving.

Figure 1-2: Progress Making AE animation

EXERCISE 2 : L.A.T.C.H (5%)

This exercise required us to use the L.A.T.C.H principles: Location, Alphabet, Time, Category, and Hierarchy to organize information into a visual infographic poster.

For my topic, I decided to use Pokémon because the Pokémon world contains many clear information systems such as regions, evolution, types, and rankings. These systems are suitable for applying the L.A.T.C.H method in information design.

In my poster, I used four main sections: Location, Alphabet, Time, and Category. I arranged the information around a central Pokémon world map to create a clear visual structure.

The Location section shows different Pokémon regions including Kanto, Johto, Hoenn, and Sinnoh. Each region is paired with representative Pokémon characters. This helps viewers understand how information can be organized based on place.

The Alphabet section arranges Pokémon names in alphabetical order from A–Z, such as Abra, Bulbasaur, Charmander, Eevee, Pikachu, and Squirtle. This demonstrates how alphabetical systems help users quickly search and find information.

The Time section uses the evolution line of Pichu, Pikachu, and Raichu to show how Pokémon change over time. This represents chronological organization.

The Category section classifies Pokémon by type, including Fire, Water, Grass, and Electric. This shows how information can be grouped based on similar characteristics.

In terms of visual style, I wanted the poster to feel colorful, playful, and easy to understand, similar to the visual style of Pokémon games. I used a soft background color, rounded information boxes, and colorful category panels to create a cleaner infographic layout.

During the design process, I adjusted the layout several times. At first, the Pokémon logo was too large and the information sections felt unbalanced. Later, I resized the logo, adjusted the spacing, and simplified the layout to improve readability and hierarchy.

I also added connecting lines between the map and the information panels to help viewers understand the relationship between the central map and each L.A.T.C.H section.

Process Development

During the design process, I first arranged the basic layout and placed the Pokémon world map in the center of the poster. I then added the Location and Time sections to test the visual balance and information hierarchy. At this stage, some sections were still incomplete, such as Category and Alphabet. This process helped me experiment with spacing, alignment, and the relationship between the infographic panels and the central map.

Figure 1. Early layout development for the Pokémon L.A.T.C.H infographic poster.

During the later stages of development, I continued adding Pokémon characters, category information, and alphabetical arrangements. I also refined the color palette and adjusted the panel sizes to make the infographic look more balanced and visually organized.

Finally, I checked the alignment, typography, and spacing of each section to ensure consistency throughout the poster. I also simplified some elements to avoid visual clutter and improve readability.

Through this exercise, I learned how the L.A.T.C.H principles can help organize complex information into a clearer and more effective visual system. This project also improved my understanding of infographic layout, hierarchy, and information organization.

Below is my final poster:

EXERCISE 3: Vector/Character Animation (5%)

Figure 1. Layer organization in After Effects.

Before importing the file into After Effects, I received the vector file provided by the lecturer and divided the illustration into different layers using Adobe Illustrator. For this character animation, I separated the elements such as the main character, the chair, the laptop, the clock, the potted plant (including individual leaves), and the floating background decorations like stars and text bubbles. This step was necessary because each object needed to be animated independently in After Effects.

After organising the layers in Illustrator, I imported the file into After Effects using Composition – Retain Layer Sizes. This allowed the separated Illustrator layers to remain editable and independent in the After Effects timeline. I also enabled Continuously Rasterize for the vector layers to keep the artwork sharp and maintain its high quality during the animation.

The whole animation was created within a short duration. To bring the scene to life, I mainly used the basic Transform properties, including Position, Scale, Rotation, and Opacity. These four properties helped me create a dynamic and engaging motion sequence.

The animation features several background elements floating around the character. I used Position keyframes to give these decorative elements (like the stars and graphic shapes) a subtle, continuous drifting movement. This gives the animation a sense of liveliness instead of having a completely static background.

Figure 2. Keyframe configuration and properties timeline.

I also used Scale keyframes to make certain UI elements and bubbles pop up dynamically. By scaling them from 0% to their final size, it created a revealing effect that added energy to the composition.

For this specific scene, Rotation was a crucial property. I used Rotation keyframes to animate the hands of the clock on the wall, showing the passage of time while the character is working. Additionally, I applied subtle Rotation keyframes to the individual leaves of the potted plant so they sway gently, making the indoor environment feel much more natural.

I used Opacity keyframes for several graphic layers so that objects could fade in and out smoothly. Instead of appearing abruptly, these elements gradually became visible, which made the overall animation feel softer and more polished.

After setting all the keyframes, I applied Easy Ease to them. This helped the movement become much smoother because the objects no longer moved in a stiff, mechanical, or linear way. The motion starts and ends more naturally, making the short animation feel less abrupt.

Finally, I turned on Motion Blur for the moving layers. This added a slight blur to fast-moving objects, especially during the clock's rotation and the quick scale-ups of the background elements. The motion blur helped the animation look more realistic and reduced the harshness of the movement.

Below is my final work:

Figure 3. Final rendered animation showcase.

EXERCISE 4: Animation Chart (5%)

INSTRUCTIONS

For this exercise, we were required to create an animated chart using After Effects. The purpose of the task was to transform static data into a motion graphic so that the information could be presented in a clearer and more engaging way.

PROGRESS

For this task, I created an animated bar chart based on survey data about students' concerns and stress-related factors. The chart includes categories such as fear of failure, university work, finding a job after university, family, jobs and relationships, and friends. My main goal was to use animation to guide the viewer through the data step by step instead of showing all the information at once.

I first arranged the basic bar chart layout in After Effects. The chart was placed in the centre of the composition so that the data could remain the main focus. I used a clean white background with horizontal grid lines to make the percentages easier to read. The category labels were placed below the bars, while the percentage values were shown directly on the bars so that the viewer could understand the information quickly.

After setting up the main layout, I separated the chart elements into different layers. The bars, grid lines, labels, title, and decorative details were organised individually in the timeline. This helped me control each part of the animation more easily. By separating the elements, I could adjust the timing of each bar and make the chart appear gradually instead of appearing as one static image.

For the animation, I used keyframes to control the timing and movement of the chart elements. The grid lines and frame appear first, followed by the bars. Each bar is animated in sequence so that the viewer can compare one category at a time. This makes the animation easier to follow and prevents too much information from appearing on screen at once.

I also adjusted the visual style of the chart to make it look more personal. I changed the bar colours into a brighter and more varied colour palette, using green, red, yellow, purple, cyan, and red tones to separate the categories clearly. I added a small title label at the top of the chart and simple accent lines to make the layout look more complete. These changes helped the final design look different from the original chart template while still keeping the data readable.

During the refinement stage, I adjusted the scale, spacing, and timing of the composition. I wanted the chart to feel balanced inside the frame, so I made sure the bars, labels, and title had enough space. I also checked the animation in the timeline to make sure the sequence played smoothly from beginning to end.

Below is my final work:

Figure 4. Final animated bar chart.

REFLECTION

Through this exercise, I learned how motion graphics can improve data visualisation. A static chart can show the information, but animation helps guide the viewer's attention and makes the data easier to understand. I also learned that layer organisation is very important in After Effects, especially when animating different chart elements separately. Overall, this exercise helped me understand how timing, colour, and layout can make a data chart clearer and more engaging.

PROCESS IMAGES TO ADD

【Figure 4.1：请截一张原始数据/原始静态柱状图画面，展示这个动画是从哪一个 chart 开始制作的。】

Figure 4.1: Original bar chart data reference.

【Figure 4.2：请截一张 After Effects 合成画面，能看到白色画布、柱状图、网格线和顶部标题的整体 layout。】

Figure 4.2: Overall chart layout in After Effects.

【Figure 4.3：请截一张 After Effects 时间轴图层截图，重点显示 bars、labels、title、grid lines 等不同图层已经分开。】

Figure 4.3: Layer organisation in the After Effects timeline.

【Figure 4.4：请截一张关键帧/时间轴动画截图，最好能看到不同柱子不是同一时间出现，而是有前后顺序。】

Figure 4.4: Keyframe timing for the animated bar chart.

【Figure 4.5：请截一张改完颜色和标题后的画面，展示彩色柱子、顶部标题和个人化装饰元素。】

Figure 4.5: Refined colour palette and personalised chart design.

【Figure 4.6：请放最终导出的 MP4，或者截一张最终视频画面作为封面图。】

Figure 4.6: Final animated bar chart.