Information Design / Final Compilation & Reflection

Week 1 - Week 7

Wang Shengxiao/0369380

Bachelor of Design(Honours) in Creative Media

TABLE OF THE CONTENT

Lecture (The presentation slide weekly)
Instruction
Process
Submission
Feedback
Reflections

Lecture (The presentation slide weekly)

Week 1

Week 2

Week 4

Week 5

Instruction

Link to MIB

Process

Exercise 1: Quantify & visualize data

Exercise 1: Quantify & visualize data (10%): Arrange objects (Lego/ buttons/ coins etc) with relevant indicators written out with pens to help you visualize the quantity and data. Take a picture of the final assembly and upload into your Google Drive folder.

When I was dealing with the topic of data and quantification, I didn't want to be limited to ordinary materials and the patterns of arrangement and classification. So, at home, I collected three items that could be quantified.

The first one was the stars I folded using colored paper strips with dopamine color.

The second one was the leftover chocolate beans I bought during my previous trip but didn't finish.

The third one was the rainbow candies. Eventually, I chose the second one because the chocolate beans I bought from Shanghai were in the color I chose myself. I think this personal favorite cool color combination can provide me with more inspiration for quantifying them.

Fig.2.1 Data sorting and Arrangement (jpg)

Here is the thought process I went through from conception to completion of this M&M data sculpture:

Phase 1: Object Selection and Data Definition

M&M candies are the perfect candidates. They are uniform in size (for the most part), come in a wide range of colors, and their internal structure (the chocolate core and the coating) is revealed when they are "crushed", providing an additional dimension for classification. ：

Total: This is a fundamental quantitative starting point (82).
Color: Grey, Purple, Blue-Green, Blue, White.
Integrity: Whole beans vs. Broken (half) beans.
Internal Structure: The chocolate core exposed by crushing the beans (B represents the broken).

I want to fully demonstrate the depth of the data in the visualization.

Phase Two: Design Concept and Layout

I don't want to use a dull grid. I'd like to use a flowing layout, even with a touch of scientific feel (such as a double helix or a complex molecular structure). A layered, multi-spiral structure seems very appropriate. It can be like a story, gradually unfolding different data as it spirals forward. In the upper left corner, I will place a traditional, detailed data table as a reference, while the main visual will be a physical, multi-dimensional display.

Fig.2.2 Data Presented Visually (jpg)

Phase Three: Execution and Marking System

The actual implementation involves detailed classification and placement.

Category: First, I systematically classified and counted the chocolate beans by color and integrity, preparing accurate data for the table in the upper left corner.

Arrangement: I carefully placed the beans along a spiral path (guided by a slight pencil line). The black lines were used as clear divisions between different categories. I decided to start with the largest number of white beans to form the outer spiral, followed by blue, blue, purple, blue-green and gray, until the broken beans were placed at the center.

Marking System: This is a crucial part. I have developed a clear coding system, such as S.I.W. N.24 representing Small, Intact, White, Number 24. I used different colored pens (blue, purple, blue-green, gray, white) to mark the corresponding beans, which enhanced the visual connection between the text and the objects. I marked broken beans with a black pen (S.B.W. N.10, etc.) and external gray beans with B.I.G. N.4 to distinguish them.

Special attention: Placing and marking the broken beans in the center is a challenge. I must ensure the quantity is accurate while maintaining the appearance.

Flip class week 1: Re-design

Re-design one poorly constructed infographic poster with CANVA

Fig.2.3 The "bad" info design

Although the poster is visually engaging, it suffers from unclear visual hierarchy, excessive decorative elements, information overload, and limited accessibility, which reduce its effectiveness as an information design.

Fig.2.4 The redesigned poster of the first edition

Regarding the redesign of this poster, I extracted the key points from each sentence in the text, and then found the corresponding materials to design the first version of the poster.

For the first version of the poster, I mainly focused on the increase in temperature, its impact on pets, and the sun.

However, when I received feedback from Mr. Kannan, who thought the visual emphasis was clear enough and the color scheme was perfect, but that it would be better if the visual emphasis was balanced, I then created the second version of the poster.

Fig.2.5 The final version of the redesigned poster after feedback

Exercise 2: L.A.T.C.H

Design an infographic poster using the L.A.T.C.H information organization principles:
Location / Alphabet / Time / Category / Hierarchy,
and must combine at least 4 of these principles in the design.

Fig.2.6 The poster about Pokemon (png)

Fig.2.7 The poster about Pokemon (pdf )

The information structure is based on four principles of the L·A·T·C·H framework:

Location: Pokémon are linked to different regions such as Kanto, Unova, Alola, Kalos, and Paldea, And I also classified them according to their living environments..
Category: Pokémon are grouped by type (Ice, Water, Grass, Flying, Fire).
Hierarchy: Each Pokémon is presented through its three-stage evolution, creating a clear hierarchical structure.
Time: Pokémon from different generations (Gen 1, 5, 6, 7, 9) are selected to show the development of the franchise over time.

Exercise 3: Kinetic Typography

First of all, for this group assignment, our group adopted a very fair voting system to select the song "Killer Queen". Since we had two alternative options, but Mr. Kannan believed that this song had a more rhythmic and powerful feel and was more suitable for animation production, we ultimately chose it.

Fig.2.8 The screenshot for the song (png)

However, for me, this song was very unfamiliar, so I went out of my way to thoroughly learn it.

Next, everyone came up with various color palettes of different styles and color schemes and posted them in the group. Eventually, we chose the two color palettes with a retro style that I and another boy had sent.

Fig.2.9 Screen Shot for Color palette (png)

Then we selected the font that best matched the retro style from the three fonts provided by the team leader. I think this font is the most elegant.

Fig.2.10 info for the Font (png)

Then, in Illustrator, I edited out the lyrics of that part using the font we had chosen.

Fig.2.11 the screenshot for my part in illustrator (png)

Then, in Illustrator, I used some of the color palettes reasonably and created a small storyboard.

Fig.2.12 the screenshot for my part in illustrator (png)

Next, based on the content in Illustrator, I officially started working on the production in AE.
Overall, I incorporated several methods, such as having the characters fall one by one, or making them move in a wavy pattern, or showing them one by one.

Fig.2.11 the screenshot for my part in Ae (png)

Fig.2.12 the final animation for my part (png)

Link to final Exercise 3: Kinetic Typography (google drive)

Exercise 4: Line Chart Animation

Fig.2.13 The Process screenshot for Line Chart animation (png)

In this exercise, I was assigned to the practice of line graphs.

When creating the animated line graph, I first chose contrasting colors as the background and the color blocks for the intervals. As for the color of the lines, I also selected bright colors to make the visual emphasis clear.

Link to Line Chart Animation in Youtube

（Extra Practice — Pie Chart Animation）

Fig.2.14 The Process screenshot for Pie Chart animation (png)

Link to Pie Chart Animation in Youtube

After completing the line graph animation, I found this simple animation very interesting and it helped me improve my animation skills. Therefore, I additionally created a pie chart animation.
For this additional exercise, I found a pie chart about the Spring Festival travel rush in China on the internet, and I chose to have the text placed horizontally during the design process. Through this additional practice, I gained a deeper understanding of the knowledge related to adding anchor points.

Exercise 5: Vector Animation

Fig.2.15 The Process screenshot for Vector animation (png)

Link to Exercise 5: Vector Animation (google drive)

Project 1 : Instructable Poster

During the first feedback session, I showed Mr. Kannan the simple and elegant style that I prefer. I found many visual references on Pinterest and believed that all of them were in line with my personal style. He approved of my style and thought that I already had my ideas in mind, allowing me to go ahead and do it.

Fig.2.16 The screenshot for the references (png)

Immediately after that, I decided that I would use this type of downward perspective for most of my materials, because I believed that this perspective would make my layout clearer and enable readers to understand it at a glance.

Fig.2.17 The Perspective reference (png)

Immediately after that, I began to draw my materials by hand. During the drawing process, I used two types of brushes: one was an HB pencil and the other was a Procreate pencil. Because I wanted to achieve a slightly 2D feel, yet still maintain an advanced and concise style that readers can easily understand at a glance.

Fig.2.18 The screenshot for the elements in Procreate (png)

Fig.2.19 The screenshot for all elements (png)

Fig.2.20 The final instructable poster (pdf)

Fig.2.21 The final instructable poster (png)

Final Project : Animated Instructable Poster-Panettone

Firstly, for the final animation, we chose my partner's Project 1 as the theme for our final project. Because I believe that the materials created with Illustrator are more detailed, and they are also simpler and more straightforward for me to use in creating animations.

Fig.2.22 The elements for final animated instructable poster (png)

I chose a relatively neat yet adorable sans-serif font for the subtitles of our animation.

Fig.2.23 The Font for final animated instructable poster (png)

Then we created a storyboard, which included a timeline and captions.

Fig.2.24-2.27 The storyboard for final animated instructable poster (png)

I divided a complete animation sequence of about one minute into many different shots. For example, I have created a sequence diagram for the part from the beginning to the completion of preparing the ingredients, then made a sequence diagram for the part of mixing the dry ingredients and kneading the dough, and finally created a sequence diagram for the part of the second fermentation until it is placed in the oven.

Fig.2.28 The process screen shot for final animated instructable poster in Ae (png)

Fig.2.29 The process screen shot for final animated instructable poster in Ae (png)

Final Animation-Panettone

Submission