Information Design-Project 1 /2

19/02/2025-5/03/2025

Yang Jiayi/0369288

Information Design / Bachelor of Design in Creative Media

Project 1/2

---

Introductions

---

Lectures

week 4

Manuel Lima’s 9 Directives Manifesto

Manuel Lima’s Information Visualization Manifesto, as published on the blog VisualComplexity.com, provides a working list that can help provide clarity on what Information Visualization through 9 directives, why information visualization differs from information art or infographics.

1. Form Follows Function:

“the purpose should always be centered on the explanation, which in turn leads to insight.” Start with a Question: Your work should always be driven by a query

2. Interactivity is Key:

Allows for investigation and learning through discovery

3. Cite Your Source:
Always disclose where your data originated.

4. The Power of Narrative: 

Humans love stories. Elaborate your information into storytelling to make it more interesting and memorable.

5. Do Not Glorify Aesthetics:

“should always be a consequence and never a goal”

6. Look for Relevancy:
Why are you visualizing the information?

7. Embrace Time:
Time is difficult to work with. That’s why time management is one of the key factor to organize and achieve better results for any decision making.

8. Aspire for Knowledge:
“A core ability of Information Visualization is to translate information into knowledge. It’s also to facilitate understanding and aid cognition.”

9. Avoid Gratuitous Visualizations: “should respond as a cognitive filter, an empowered lens of insight, and should never add more noise to the flow”

fig1.1 Avoid Gratuitous Visualizations

---

Exercises

PART 1: Infographic poster (10%)           
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 (10%)
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

Before we start the project, we need to show the teacher the topic we want to work on. I created a Google Doc to show the topic I want to express.

The theme I chose is an American TV series I like, called "Stranger Things". I want to show information about the show in the poster, such as the relationship between the characters, the story line, the place where it takes place, etc. Teacher Fauzi  suggested that I should make sure that the poster contains 3-4 principles of the latch principle I learned before.I will reflect four principles in this poster, such as location, time, level, and category.

PART 1: Infographic poster 

This is the reference I found. I feel like it has too much information, so I will edit it to make it simpler.

fig1.2 references

I searched for background images on this topic online. This is a topic about a different world. My style is more like black and red.In the background,

•  Hierarchy

I will reflect the hierarchical division. Dividing the story into three levels (the void world, the real world, and the other world) is very consistent with the setting of "Stranger Things".

 The top part of the poster is the void world, which is a higher dimensional existence and may be the source of supernatural power in the whole story. The middle part of the poster is the real world, the life of Hawkins town and its residents, such as schools, families, shopping malls, etc. The bottom part of the poster is about the other world, which is the core of supernatural events and the main source of monsters and supernatural phenomena.

fig1.3 process-hierarchy

I then added a timeline and a character relationship diagram. I searched online for headshots of the characters and annotated their relationships.

• Time

I listed several important timelines in the lower left corner of the poster. These events are arranged in the order in which they occurred.

fig1.4 process-time

• Category

Next I added a relationship diagram, adding arrows between their avatars and showing the relationship between them.

fig1.5 process-category

But I realized that although the map is shown above, the audience does not understand it, so I will introduce several important places in the map, mark them out, and introduce them.

• Location

fig1.6-location 

I marked the places I wanted to feature on the map, then I looked up information and marked them.I marked the main cases in these key locations so this can better understand this map.

fig1.7-location

I simplified the information in the later stage. I extracted the key words from the map so that the audience can directly understand the information.

Final Result

fig1.8 final result

In order to better animate in AE later, I separated different elements into independent layers in PS. After completing the design, I exported the PSD file and prepared to import it into AE.

PART 2: Minimal animated infographic

For the text box, I used Mask Reveal to make the text gradually emerge from the darkness, which is in line with the mysterious style of "Stranger Things". For the character line, I used arrows to make the head portrait appear from small to large, highlighting the key points and avoiding a dull picture.

fig1.9 process-part 2

Final gif

 Final results

Youtube Link：https://youtube.com/shorts/eMPj8UjulUk?feature=share

Google Drive Link：https://drive.google.com/drive/folders/1F0NJ86Xdb4AD1HNDbIRbXwvvqfNDzIBk

---

Reflections

Experience:

In this module, we centered on organizing and displaying data through visualization procedures, which permitted me to investigate the crossing point of plan and communication. All through the generation prepare, I learned how to inquire about references, analyze the qualities of existing work, and utilize these bits of knowledge to optimize and move forward my possess ventures. This involvement not as it were progressed my plan aptitudes, but too extended my understanding of how to form outwardly compelling and instructive substance. 

Observations：

One of the greatest challenges I experienced was utilizing Adobe After Impacts . At to begin with, I was not exceptionally recognizable with the computer program and felt it was very troublesome to utilize, which too moderated down my productivity in completing the task, but I learned a small bit through self-study.

In expansion to specialized aptitudes, this extend moreover pushed me to think more fundamentally almost visual narrating and data plan. I realized that effective communication isn't  around  aesthetics - it requires a adjust between symbolism, typography, format, and movement to direct the audience's consideration and guarantee clarity.  

Findings：

This learning encounter has been amazingly valuable to my scholarly and proficient development. As an liveliness understudy, understanding how to imagine and show data powerfully may be a key ability that goes past conventional narrating.