Information Design - Project 1&2: Animated Infographic Poster

3/2/2024 -  / Week 1 - 

Cindy Clarissa Leslie / 0367677
Interactive Design / Bachelor of Design (Hons) in Creative Media
Animated Infographic Poster

---

INSTRUCTIONS

Project 1: Infographic Poster

Initial Ideas

In this project, it was divided into two parts where the main theme is to remake an existing infographic poster design that exists online into a more functional one. Before we started on the remake, students were required to find posters online and consult with the lecturer to decide on.

Figure 1.1 First poster chosen

Figure 1.2 Second poster chosen

Figure 1.3 Third poster chosen

After consulting with my lecturer, he had chosen the third one as it specifically had more of a balance in graphics and also information. Since the language is different, he suggested I simply translate it and design the poster in English.

Before proceeding with the remake, I figured out some of the weaknesses of the poster that it can improve on. Using L.A.T.C.H., I retained some of the more important information and wanted to arrange the information more effectively. Visual wise, the main weakness for me is the lack of contrast and ineffective colour scheme, everything is in a shade of yellow, together with the small sized text, the infographic poster was rather difficult to read. Lastly, the design itself did not reflect on the information of the poster, it lacked any strong concept that makes it memorable.

References & Sketches

Surfing through online websites such as Pinterest, I saw a lot of good infographic posters that I can take inspiration from. Here are some reference I have chosen for the concept:

Figure 2.1 Collection of references taken online

Since the content of the poster I am remaking discusses Kurt Cobain's life, who is a public figure known for popularizing the grunge movement, I decided that the concept that would be most fitting would be 'Grunge'. I wanted the design to have a 'DIY' messy feel that grunge has, the grunge movement in music is described to be heavy, distressed and rebellious which is also applied onto grunge designs.

Figure 2.2 First sketch

Figure 2.3 Second sketch

Figure 2.4 Third sketch

I created sketches mostly to focus on the layout of graphics and information. In the end, I chose the third one as it had a more magazine feel that could reflect on the concept as it was rather popular back then in the 90s than now. I started to arrange them on Adobe Illustrator.

Design Process

Figure 3.1 Design process in Illustrator

I designed the poster based on different parts, firstly the title and heading. I started with the additional information first that had more of the support in the poster's visuals. I made the timeline of his life most important, setting it on the bottom that takes up a good amount of the space. I made all the graphics in black and white first before I set my decided colour scheme: black, white and yellow. I chose yellow as the accent to hold some resemblance to the original poster I am remaking.

Figure 3.2 Design process in Photoshop

As final touches, I moved to using Photoshop and hand drew some graphics myself with a pencil-like brush. Furthermore, I topped the design of with paper texture to fit the concept of grunge even more.

Final Project 1: Infographic Poster

Figure 4.1 Final Infographic Poster

Project 2: Minimal Animated Infographic

Animation Process

To finally animate my design, I opened my Photoshop file in After Effects so that I can retain the layers easily and make the animating process as effective as possible. Since the animation should be minimal, I focused on putting in effects onto the accents instead of emphasized graphics.

Figure 5.1 Creating overlay

Figure 5.2 Displacement map as jittery effcet

One of the most crucial part is creating an overlay video in AE solely from using S_TextureFolded. This is important as I will be applying this as texture for a lot of the accents in my poster, creating a wiggly and distorted effect when used with Displacement Map.

Figure 5.3 Main effects and elements

Next, during some of the animation, especially those that require position manipulation, I changed the speed graphs into a specific shape to ensure that it is smooth. I applied this onto the sticker and the rotation in the papers. 

Another main effect was using wiggle position and rotation for a simple yet continuous animation.

Lastly, I traced my graphics using the pen tool to create a mask and used the stroke effects & preset to make it seem like the graphics are being drawn on in real time.

Final Project 2: Minimal Animated Infographic

Final Google Drive Link

Figure 6.1 Final minimal animated infographic

---

FEEDBACK

Week 3

General Feedbacks

Again, try to utilise principles of design into the poster such as using contrast balance etc. 

Specific Feedbacks

Choose the Kurt Cobain poster, ensure that the design has a balance of both graphics and information. It would be difficult to choose designs with an overwhelming amount of information.

---

REFLECTION

The whole experience in creating this animated infographic poster was overall enjoyable for me, especially since the whole process aligned with my interest. Not only am I fond of grunge I also enjoy using my skills I've learned in the past using After Effects. Though my infographic design was rather unconventional, I thought that I was able to balance the graphics and information properly without it being too much.

Being able to improve an existing design into your own version is a good practice to constantly improve, furthermore, asking feedback from others and learn on how to take constructive criticisms. As a designer, we should always strive and find different ways to improve our own skills.