Task 1: Animated Infographic Poster

19/02/2025 - 05/03/2025/ Week 3 - Week 5
Reema Arif Hamza / 0362792
Information Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 1: Animated Infographic Poster

Content

Week 3: Lecture on Miller's law of memory
Week 4: Lecture on Manuel Lima's nine directives manifesto
Week 5: Lecture on having a Constructive workflow

Instructions

Part 1: Infographic Poster

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.

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:

  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


Process

In week three we showed our selected "badly designed" infographic poster to redesign. I found a couple of posters I thought would be good, below are the options I had in mind. They weren't on one specific topic, but just posters that I thought could be improved upon and had things to possibly animate.

Fig. 1.1 Red Panda, Week 3 (18/02/2025)

Fig. 1.2 Summer vs Winter Tent, Week 3 (18/02/2025)

Fig. 1.3 How to light and build a campfire, Week 3 (18/02/2025)

After showing them to Mr. Fauzi during class he recommended picking the "How to light and build a campfire" poster (Figure 1.3). He mentioned how I could simplify the process to 4 steps since step 5&6 were unnecessary. 

Why I choose this poster

Good:
  • Clear, structured layout
  • Defined steps/instructions
  • Easy to understand visuals
Bad:
  • Typography consistency: The title font style is playful but inconsistent with the rest of the text
  • Text is too small to read in some sections (like the materials)
  • Low contrast: The white text is hard to read against the orange and teal backgrounds.
  • Visual balance: The top feels cluttered with illustrations compared to below.

Most of the information is already within the poster. So I just took it and made it clear and simple so I could reference this later when designing.

Existing Information

A Fire Needs
  • Heat (Lighter or Matches)
  • Oxygen (Airflow)
  • Fuel:
    • Tinder – Dry leaves or paper
    • Twigs, sticks, and small branches
    • Chopped wood
Steps to Build a Campfire
  1. Make a loose pile of tinder.
  2. Build a tee-pee of twigs.
  3. Light tinder from all sides.
  4. As the fire grows, add more sticks and eventually wood.

Could add Essential Safety Tips:

  • Never leave a fire unattended 
  • Keep water or sand nearby to quickly extinguish the fire if needed.
  • Fully extinguish the fire – Pour water, stir the ashes, and ensure everything is cold before leaving.

Having selected my poster I found some visual references of good posters (layout, composition, colors) to help me brainstorm some layout ideas.

Fig. 1.4 Visual References, Week 3 (20/02/2025)
Fig. 1.5 Sketches, Week 3 (20/02/2025)

I made some rough sketches for some of my ideas. I think B or C have a good layout. I like the steps format in B because you can clearly see each graphic. Then for materials needed maybe I can combine come parts of C into B. Overall, I went forward with B because the layout flow was good.

I started designing the poster in illustrator. I followed the layout from my sketches and then created my own illustrations for all the steps and materials. Then I played around with colors and found that the one on the right had better contrast and overall color balance (Figure 1.7).

Fig. 1.6 Progress, Week 3 (20/02/2025)

Fig. 1.7 Updating Colors, Week 3 (20/02/2025)

Final Infographic Poster

Below is the final infographic poster.

Fig. 1.8 Original Poster, Week 3 (20/02/2025)

Fig. 1.9 Final Infographic Poster, Week 3 (20/02/2025)

Fig. 1.10 Final Infographic Poster PDF, Week 3 (20/02/2025)

Part 2: Animated Infographic Poster

  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


Process

In week four/five we began to animate our infographic poster into a static loop animation page. I altered my poster to fit the 19:6 format and animated using adobe animate.

Fig. 2.1 Infographic Poster in 9:16 Format, Week 4 (26/02/2025)


Final Animated Infographic Poster

Final animated poster below.

Fig. 2.2 Animated Infographic GIF, Week 4 (26/02/2025)

Fig. 2.3 Animated Infographic, Week 4 (26/02/2025)

Feedback

Week 3: It's good that you're thinking of what you can animate beforehand. I think the how to start a campfire is a good one. You can simplify the steps (step 5 "done") is unnecessary. 

Reflection

Experience
Overall this task went pretty well, I think I managed to structure the information clearly. The illustrations were based off some from the original poster and some from other sources + with my own take on it. The hardest part I had was probably balancing the colors, and at the end I wasn't sure if the design felt too flat. I played around a lot with different things (which I didn't include in the blog because it was a bit messy). But I ended going back to my first design.

Observation
I think when looking at infographic references it's great to look at how they structure their information. And that carries to any design, but looking at that in particular helped me come up with a lot of great sketches. It also helped to write down what information I had to include.

Finding
I found animating actually really hard. It's been so long since I used adobe animate I think like the last time was for advanced interactive in Sem 3. So it took me a while to relearn how to use it again. Definitely a sign to practice using it so the skill sticks. Since the deadline was soon, I ended up just simplifying the animations to do and execute what I could. 

Comments

Post a Comment