Information Design Project 1: Animated Infographic Poster

Project 1: Animated Infographic Poster

[duration]

Rafa Maritza Hertrian [0364958]

Bachelor of Design (Honours) Creative Media/ Taylor's University

[course]

---

LECTURE

All lectures are in Exercises

---

INSTRUCTIONS 

---

RESEARCH 

BAD INFOGRAPHICS

In class, Mr Shamsul instructed us to search for bad infographic posters to redesign. I found 4 infographic posters from Google that I find unpleasing to view. 

First poster: The visuals on this poster were just placed out of nowhere. The illustrations do not match each other and the visual hierarchy is unpleasing. The text also felt too wordy and too cramped. 

Second Poster: The color scheme is visually unpleasing and the layout is unclear. Also, the image seems to not be placed correctly. 

Third Poster: The poster looks undone and the flow of the poster cannot be seen. It seems that the visual has no concept in it. The headings do not give a brief of the information at all. 

Fourth Poster: I felt like there was too much going on in this poster. There is no whitespace so the information looked cramped. 

After consulting with Mr. Shamsul, I decided to redesign the fourth one because the information is not too overwhelming to redesign. From my observation, this poster is a type of list infographic because it lists the causes of a bad hire but the list is strictly in order because the original designer uses "OUCH" as a catchy abbreviation. Hence, I searched for references for the list infographic to get inspiration. 

Visual References 

These are the visual references that I will use for this project. I will try some of these layouts because it would match the information on the original poster. 

---

PROCESS

Before redesigning this poster, I listed down the things I think can be improved from the poster. 

Things that I think should be fixed in this layout: 

1. Too much diversity of fonts for an infographic. It's too distracting and inconsistent 
2. Lack of whitespace making the poster look too busy and packed 
3. The visuals are irrelevant and do not tell anything about the information. 
4. lack of alignment, making the design look very messy and scattered

Sketches

To start the sketch, I created two versions of the grid system, the vertical version and the horizontal version. The vertical grid is 6x6 and the horizontal version is 8x8.  

This layout is not too different from the original layout. The texts are all left aligned and most of the images are placed in the right alignment. However. in this layout, all of the texts are in the same place instead of being scattered around the images and elements. 

But from that design, I felt like the ouch is too close to each other, making the title not stand out. Therefore, I made another version where the title, subheading, and caption center align.  

But from there I thought the text-align combination of that layout is a bit weird so I went back to having it all left align and giving up on the "OUCH" in the title so it wouldn't repeat. It made the title uninteresting because it is too long and not catchy. 

I made another design that would be more suitable for the center-aligned title by balancing the text and the image, putting them in zig-zag. I also ditched the single letters because no matter how hard I try, it would take the focus away from the title. 

From there, I thought it would look a lot better if everything is centered. So I made all of the text align to the center. 

Then I also tried to do horizontal layout but I realized that it takes too much space, which would make it hard to put images in the layout. 

Digitalization

Finally, I chose the 5th sketch and I proceeded to put the actual design in it. Initially, I was thinking of changing the font, but I thought Montserrat is already suitable for a corporate connected infographic. 

I made some adjustments for the final design. I change the title OUCH! to Montserrat black and change it to red color so that it would look more eye-catching. I also thought of changing the color palette to a corporate connected, but the topic is also somewhat emergency related, so I decided to stick with the red, black, and white, but I made the colors pop more. 

I also changed the sizing of the text so I can add more whitespace to this layout, because I didn't want the design to look cramped. Then I searched several vector images from Google that I think represent the information more and changed them to red. 

Design 1 in A4: 

Animating 

For the animation I simply thought to just animate all of the 4 images in a subtle way. Hence I decided to use after effects for this.

For the balance weigh tool I can only make it shake a bit because it is not an original shape but an image instead, so I cannot alter it too much. I used puppet tool to create this effect

The two person arguing is animated in a way that look like they are arguing. I used puppet tool for this. 

For the clock, I wanted to create an effect that would look like the alarm is going off. I did this by adjusting the rotation of the clock. 

I ran out of Ideas for this one so I just adjusted the scale.

Finally, I looped them:

Revision

Several things need to be improved in my design based on Mr Shamsul. 

1. Color palette does not portray the topic 
2. There might be too much white space 
3. The title is not highlighting the topic

First, I made other layouts that might minimize the white space, but a slight alteration made the design seem off. Hence, I decided to just add something to the background to minimize the whitespace.

For the color palette, I thought it might be more suitable if I chose color palettes that gives off a corporate feeling because the topic is connecting to that. 

I applied it in several ways. 

This is the final design of the infographic: 

Then I animated the poster the same way as I did before. 

---

FEEDBACK

Week 3

Mr. Shamsul selected the Ouch! poster because it got enough information to execute, while the others are either too much or too little. He also said that we should not deduct or add information to the poster.

Week 4

Mr. Shamsul said that it was good that I used a grid system to create my layout, but I haven't added any elements that show the style of the design, so he cannot comment on anything else. 

Week 5 

Mr. Shamsul suggested that I change the color palette because it does not match the concept. And he also suggested that I add something so that the layout does not look too empty. 

---

SUBMISSION 

Final Poster in A4:

Animation: 

---

REFLECTION

This project was challenging for me because I had to arrange something that I did not initially design.  Hence, I have to find a way to make all of the text neat without having to deduct the information. But overall this project allows me to reflect on my own understanding of design. It made me learn how to differentiate between good and bad design.