INFORMATION DESIGN - PROJECT 1: ANIMATED INFOGRAPHIC POSTER

TAN YING YI / 0362425 / BACHELOR OF DESIGN (HONS) IN CREATIVE MEDIA
INFORMATION DESIGN
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

RESEARCH

We are required to find some infographic posters from the internet and redesign them. The posters first I found were good so I need to find new posters.

Fig 1.1 DimSum - Rejected

Fig 1.2 Ice-Cream - Rejected

Fig 1.3 Cat - Rejected

Then, I search for bad infographic posters on the internet.

Fig 1.4 Crocodile - Unchosen

Fig 1.5 Sheep - Unchosen

Fig 1.6 Cat - Chosen

I found a formal infographics poster as a reference.

Fig 1.7 Reference

PROGRESSION

I planned to have a neat and tidy layout, thinking about arranging the breeds of cats with frame or without frames. I think the layout with frames is more clearer.

Fig 2.1 Layout Sketches

Since the image of the original is blurry, I find images of cat breeds from Google. All the images are from the same artist, so they look consistent.

Fig 2.2 Layout With Frame and Without Frame

Fig 2.3 Use Shapes to Draw The Mass

The background is quite blank, so I added some paws.

Fig 2.4 Attempt 1

I asked ChatGPT for some lively colors, and I chose blue and orange. For the frames, this color seemed too heavy so I changed a lighter one.

Fig 2.5 Attempt 2

Fig 2.6 Attempt 3

Fig 2.7 Attempt 4

FINAL POSTER
After changing the color of the words, the words became clearer.

Fig 3.1 Final Poster

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

PROGRESSION
I separated the elements that I was going to animate into multiple layers. I didn't make all the cats move as it would have become a bit messy.

Fig 4.1 Seperate the layers

Fig 4.2 Use Timeline in PS to Animate

I used Premiere Pro to make a 17-second MP4 and upload to Youtube. It's quite boring without sound, so I add background music.

Fig 4.3 Premiere Pro

Fig 4.4 Animated Poster GIF Attempt 1

Fig 4.5 Animated Poster MP4 Attempt 1

FINAL ANIMATED POSTER

Fig 5.1 Final Animated Poster GIF

Fig 5.2 Final Animated Poster MP4

---

FEEDBACK

Week 4: The typeface of the topic looks playful, but the layout is formal. Change the colour to make the poster more lively.

Week 5: Not a great choice for the typeface for the title. Animation is okay. Layout is clean and organize. Color not so great

---

REFLECTION

In this task, I created an animated infographic poster about cats and made several adjustments during the design process to achieve a more harmonious and visually appealing final product.

First, I chose a yellow-green color scheme, which made the overall visual effect feel fresher and more vibrant. This combination not only enhanced readability but also matched the playful and lively nature of cats. Compared to my previous color choices, the yellow-green pairing made the design more engaging without being too overwhelming, ensuring that the information was easy to digest.

Next, I adjusted the headline font, changing it to Arial Black. This decision gave the typography a stronger visual impact and helped unify the overall layout. After making the switch, I found that the new font choice improved the clarity of the information hierarchy and made the design feel more cohesive and modern.

Lastly, when handling animation effects, I decided to animate only specific pieces of information instead of making everything move. This approach was intended to guide the viewer’s focus to key details without overwhelming them with excessive motion. By striking this balance, I was able to control the information flow more effectively and create a smoother viewing experience.

Overall, this task helped me gain a deeper understanding of the importance of color, typography, and animation in visual communication. I learned how small adjustments can significantly enhance the clarity and aesthetics of a design. Moving forward, I hope to continue refining these skills to create even more effective and engaging visual content.