Information Design Project 1 - Animated Infographic Poster

on

18th February 2025 - 7th March 2025 (Week 3 - Week 5)

Sin Jun Ming 0364638

Information Design / Bachelor of Design in Creative Media / Taylor's University

Project 1 - Animated Infographic Poster

Instructions

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

1. Research 
For this project, I began by selecting an existing infographic poster from Pinterest to use as a reference. It was important that the reference aligned with the project’s objectives, ensuring that I had a solid foundation to analyze and improve upon.

Fig 1.1 Reference link:

While the chosen poster had a structured layout, I identified several key issues that could be improved upon:
  • Disadvantages of the poster:
  1. Lack of Strong Visual Hierarchy – The elements are evenly distributed, but the most important information doesn't stand out clearly. The title is bold, but the subtext and instructions blend in.
  2. Typography Inconsistency – The mix of different font styles makes the design less cohesive.
  3. Low Contrast in Subtext – The light gray text is hard to read against the white background.
Moving on, to gain further insights into effective infographic design, I searched for additional well-designed posters on Pinterest. These visual references helped me understand better ways to structure information, use typography effectively, and create an engaging visual hierarchy.

Fig 1.2 Visual References

2. Sketches
Once I had a clearer idea of the design direction, I moved on to the initial sketching phase. This step involved planning the layout, experimenting with typography, and selecting a suitable color scheme.

  • Color Palette
Since simplicity was key, I opted for a minimalistic three-color palette to maintain clarity while ensuring a visually appealing design. Using fewer colors prevents the design from becoming overwhelming and helps maintain a clean aesthetic.

Fig 2.1 Color Palette

  • Typography Selection
Typography plays a crucial role in infographic design as it directly affects readability and user engagement. Initially, I experimented with different fonts to find the best match for my design. After testing several options, I decided on Franklin Gothic, a clean and modern typeface known for its readability and bold presence.

Fig 2.2 Font used - Franklin Gothic

With the basic elements in place, I proceeded to create rough sketches to map out the composition. I aimed to establish a clear visual hierarchy that would guide the viewer’s eye through the information seamlessly. Using Adobe Illustrator, I sketched different layout possibilities, focusing on balancing text and visuals to enhance clarity and engagement.

Fig 2.3 Initial ideas and sketches

3. Poster Design
With the groundwork laid out, I moved on to designing the first draft of my poster. At this stage, I focused on applying my chosen color palette, typography, and layout structure.

Fig 3.1 Draft poster 1

After creating the initial draft, I realized that adding visual elements such as icons would make the information more engaging and easier to comprehend. I designed custom icons that corresponded with the information presented, ensuring they complemented the overall theme of the poster.

Fig 3.2 Draft poster 2

  • Refinements & Final Version
To finalize my design, I made several refinements to the icon illustrations and color choices to ensure better contrast and readability. By fine-tuning these details, I aimed to create a more visually appealing and functional design. Below is a comparison between the original poster and my redesigned version to highlight the improvements.

Fig 3.3 Poster comparison

After making the necessary refinements, I arrived at my final A4 poster design, which successfully addressed the initial issues I identified in the reference poster.

Fig 3.4 Final A4 Poster

4. Animation
With the static poster finalized, I moved on to the animation phase. In Week 5, I presented my progress to Mr. Fauzi, who provided positive feedback on my poster design. He also gave valuable suggestions for the animation process, which helped me improve the presentation of information dynamically.

Feedback & Improvements
  1. Animate the text sequentially (1-5) to create a structured flow of information.
  2. Introduce color transitions to enhance the text's visibility.
  3. Apply fade-in and fade-out effects to the icons for a smoother visual experience.
To implement these suggestions, I used Adobe After Effects to animate my poster.

Fig 4.1 After Effects progress - 1

To create smooth transitions, I utilized the "Generate" function in Effects & Presets for color changes in the text. This technique allowed for a more dynamic presentation of information.


For the icons, I focused on fade-in and fade-out effects, adjusting opacity at different keyframes to create a natural and visually appealing animation. By carefully timing these animations, I ensured that the audience could follow the sequence of information without feeling overwhelmed.

Final Animation Video:

Video 4.1 Final Animation Submission

Fig 4.2 Final Poster Submission

Feedback

Week 5

I showed my progress to Mr. Fauzi in Week 5 and he gave positive comments on my static poster. He also gave me some suggestions and guidance for the animation such as animate the text information following the sequence 1-5. The animation can be the transition of colors and icons can be animated by fade in and fade out.


Reflection

This project allowed me to apply design principles practically, reinforcing the importance of structure, clarity, and visual appeal in infographic presentations. Additionally, the process of converting a static poster into an animated format provided valuable insight into how motion can be used to guide the audience's attention and reinforce key information. Through multiple feedback from Mr. Fauzi, I was able to make adjustments that improved both the readability and engagement of the final piece.

Last but not least, this project helped me understand that an infographic is more than just an aesthetic piece—it is a communication tool that requires thoughtful design and animation choices. It is not enough for an infographic to look visually appealing; it must also effectively convey information in a clear and structured manner. The combination of research, iteration, and constructive feedback played a crucial role in shaping my final outcome, allowing me to produce a more refined and effective animated infographic. Through this process, I developed a deeper appreciation for the intricacies of information design and the ways in which static and dynamic elements can work together to enhance comprehension and user engagement.

Comments

Post a Comment