PROJECT 1&2: ANIMATED INFOGRAPHIC POSTER

17.2.2024 - 08.3.2024 / Week 3 - Week 5

Wu Ziyang / 0368325

BA of Design (HONS) in Creative Media

Information Design

Project 1: ANIMATED INFOGRAPHIC POSTER

---

Instruction

---

PROJECT 1: ANIMATED INFOGRAPHIC POSTER

 

DESCRIPTION: 
After time exploring media and learning about information design, you will now develop an infographic that presents a series of different processes as visuals rather than text.

REQUIREMENT:
Your main intention is to analyse the “delivery mechanism’s” that affect the outcomes of your infographics.
Though content is important, however the aim of this presentation is too look at what makes an infographic presentation work or does not work. This includes content but only as one of the many components of an infographic:

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

SUBMISSION:
1. Digital upload into your Google Drive.
2. Online posts in your E-Portfolio and your reflective writing.
(Please attach the E-Portfolio link here for submission.)

---

Part 1: Infographic Poster

Mr Fauzi suggested that we select three infographic posters with unreasonable design for research, and conducted a series of exploration. I selected the following three posters.

Fig 1.1 Reference 1          Fig 1.2 Reference 2

Fig 1.3 Reference 3

This project required us to simplify the design of the poster. 

The Reference 1 poster contains abundant information, but its title "Retailer survey results" is relatively common and cannot attract the audience's attention effectively. For example, the visual level is not balanced, and the color contrast is not enough

The Reference 2 poster's design is pretty clear, and it uses color blocks and sections to help readers make sense of the data. However, the similar colors can make it hard to tell the information apart: it's got beige, dark blue, and black, but the contrast between different data categories isn't very strong. Plus, the way information is laid out feels a bit all over the place: "Personal strengths" and "Social competence" are in two separate spots without any arrows or paths to connect them. This means readers have to keep going back and forth just to figure out how different categories relate to each other. Also, those two bigger numbers—41% and 38%—should stand out more, but they look too much like the smaller numbers (23% and 14%), which doesn't really show their importance in relation to each other.

The design of Reference 3 is pretty soft and easy on the eyes, and the overall layout is clear. However, the way information is organized could be better. The TIP numbers (like TIP 1, TIP 2, etc.) are a bit small and not very intuitive. If those numbers were bigger or highlighted in different colors, it would help readers figure out the order of things much faster. 

Also, the text feels too uniform; it doesn’t really highlight any key points. Even though everything has a nice soft tone, there’s not enough contrast—especially in low light or on dim screens—making some text hard to read. Plus, some of the texts are just too long!

In addition, Mr. Fauzi gave us some references, and this simplified information poster caught my attention

Fig 1.4 Reference 4

This Reference 4 is really well-structured and easy to follow. It takes you through the creative process step by step, starting from identifying the problem all the way to the final deliverable, with clear logic that’s super easy to understand.

By numbering each stage from 1 to 6, it helps readers quickly catch on to the sequence and key points of the process. The dotted path guide lets your eyes naturally flow along with the information, making for a better reading experience.

The color choices are spot on: they use purple along with black and white so there’s not too much distraction, which makes important info stand out. Plus, each step has simple icons (like documents, data graphs, whiteboards, web layouts, flying paper airplanes—you name it!) that help you grasp the core concepts quickly.

The font hierarchy is also straightforward: the main heading "How does the creative process work?" uses a big bold font to grab your attention; then you've got subheadings (the names of each step) in uppercase blue font while the body text is in smaller black font for smooth reading.

Each step's description is short and punchy.This really helps me out with my design later on.

Finally I chose the third reference, I will design a simplified version of the information poster for it

When I was thinking about how to express the information more simply and intuitively, I looked for some references

Fig 1.5  Reference 5

The axis design of this poster gives me a lot of inspiration, which allows people to see the key point of information at a glance

When I have a preliminary idea, I start to do the sketch

   
Fig 1.6 Sketch 1                     Fig 1.7 Sketch 2

I intend to combine the axis design of the reference poster with some excellent aspects of the selected poster

When I finished the draft, I started to design and draw in the Ai

Fig 1.8 Progress 1

At first, I arranged all the elements according to the idea in the draft, without adding color

When I drew the illustration, I made each part a separate layer to make it easier to animate

Fig 1.9 Progress 2

During the production process, I made many adjustments to the font size, font selection and illustration size

Fig 1.10 Progress 3

When I showed it to my teacher, she said it was difficult to read, so I adjusted it by increasing the spacing between the words and darkening the colors

Fig 1.11 final outcome

I summarized my design ideas and thinking process in 4 points

• I think there are too many words in the original poster and the title does not highlight the key points. I have made improvements in this aspect and made bold design for the key contents

• The illustrations in the original poster did not match the text content, so I chose the line illustrations after considering the two aspects of matching the text content and facilitating the animation effect, so that they can more intuitively express how we should deal with our emotions

• After referring to the animation poster given by the teacher, I added a dotted line on the right side of the poster to connect the first point with the fifth point. I think this is a good design, reflecting that these five points of advice do not exist independently, but are interrelated

• When using colors, I draw on the orange color system in the original poster. I think this color is very mild and closely related to the theme of the poster. The blue axis design matches with the orange color, which can make people pay attention to the text content that the poster wants to express

---

PART 2: Minimal animated infographic

After the poster was finished, I imported the Ai file into adobe animation for animation

When drawing the illustrations, I already had a preliminary idea of animation production, for example, let the smiling face next to the title rotate, the person breathing can make the arrow move according to the direction of breathing, and the little girl standing on the seesaw can move according to the level of the seesaw. In addition, I also used the animation poster given by the teacher for reference. I made the dotted line on the right side of the poster a gradient effect.

Fig 2.1 Animation Progress

Youtube Animation

---

Feedback

Mr Fauzi think The text is not readable. Please make sure the Poster size is A4, the vertical video is 1080 x 1920px. and main title could stand out a bit more, and the visuals need to feel a little more balanced.  For example, the gesture illustration on the right is pretty big compared to the smaller vignettes on the left, which makes things look off-kilter.  You might want to shrink that gesture illustration just a tad or maybe make those illustrations on the left a bit bigger to even things out.

Also, some of that orange text doesn’t pop enough against the white background, which can make it hard to read.  It’d be better if you deepened that orange color or added some dark shadows to help with readability.

I made improvements based on these suggestions during production.

---

Findings

In the process of completing this infographic poster and animation, I summarized the following key findings that effective infographic design requires removing redundant information so that the audience can quickly access key information. The legibility of information can be improved by using short sentences, keywords and ICONS. Font size, color, and spacing all affect the audience's attention and reading experience.

Appropriate use of numbering, contrasting colors, and line guides can optimize the order in which information is presented and make reading smoother. The right amount of animation can improve the audience's attention, but too much dynamic effects can be distracting. Using simple animations such as fade in and fade out, path movement, and slight zooming can make the information appear more natural

Observation

While I was working on the production, I noticed something that got me thinking. The posters we were using had some really cool illustrations and colors, but in some spots, there was just way too much info packed in there, which made it hard to read. If the animation changes too fast, people might miss out on important stuff; but if it goes too slow, they could get bored. After checking out some great animated infographics, I've realized that the sweet spot for pacing is about 1.5 to 3 seconds per piece of information. This way, folks have enough time to actually read and understand what’s going on.

Refelction

This assignment gave me a deep understanding of the core principles of infographic design and animation, and made me realize that design is not decoration, but a tool for information transmission. The role of visual elements is to reinforce the message, not to add distraction. In the future design, I will pay more attention to the information structure to ensure that the inside is easy to read and intuitive.

When designing an infographic, you need to consider how it will look on different devices. Flexible typography and layout can ensure that information is delivered effectively across different platforms. Through this assignment, I not only improved my ability of information sorting and visual communication, but also learned how to balance static design and dynamic display