Week 3 – Week 5 | 18/02/25 – 04/03/25
Emily Soh Ching-Ling | 0359478
Bachelor of Design (Honours) in Creative Media
Information Design | Section 01 | GCD60504
Project 1 & 2 — Animated Infographic Poster
TABLE OF CONTENTS
1.0 INSTRUCTIONS
2.0 LECTURES
*Sidenote: All lectures have been completed in Exercises.
3.0 PROJECT 1 — INFOGRAPHIC POSTER
Instructions:
- Choose one badly designed infographic poster as reference.
- Identify the design flaws of the poster.
- Redesign and simplify the poster based on visual hierarchy, typography, colour, shape, and pattern.
- Requirements: Size: A4.
3.1 RESEARCH
 |
| Figure 3.1-1: Bad Infographic Design, Week 3 (18/02/25) |
Why I chose this poster:
- There is no hierarchy to the information. Text is bolded and capitalised at random, and some important information is pushed to the sides.
- There are too many fonts and font sizes used, making the poster look all over the place.
- There is no cohesive colour palette. The eight accent colours do not go well with the grey background and black text.
.png) |
| Figure 3.1-2: Mood Board — Visual Design, Week 3 (21/02/25) |
%20(1).png) |
| Figure 3.1-3: Mood Board — Layout Design, Week 3 (21/02/25) |
Surprisingly there are very few good yoga infographic reports on the interwebs, so I reference yoga posters only for the visual design (i.e. fonts, colour palette, graphics, etc.). For the layout design, my infographic had a lot of statistics, so I had analysis reports on my mind while sketching.
3.2 SKETCHES
Figure 3.2-1: Poster Information, Week 3 (22/02/25)
Before sketching, I organised the information from the original poster into groups. This is to help with hierarchy when I block out the layout.
 |
| Figure 3.2-2: Sketches, Week 4 (25/02/25) *Not final colour palette |
Sketch #1 was based on the reports in Figure 3.1-3. It's very organised, but there's not much space for graphics + it looks like a newspaper. I do like the different background colour for the title and acknowledgements though as it frames the content, so I brought that over to Sketch #2.
The layout of #1 was very grid-like — all straight lines and boxes. In Sketch #2, I changed the background shape behind the title to a curve and made space for a centrepiece graphic. I prefer this sketch as there's a sense of movement to the design — the viewer sees the title and centrepiece, then the "80 million...", then the "36.7..." and so on.
3.3 DIGITISATION
 |
| Figure 3.3-1: Colour Palette — Original VS Revised, Week 4 (26/02/25) |
Initially, I intended for the colour palette to be pastel like my poster design references, however, I ran into an issue where the skin tone and clothing of the major graphic didn't contrast well against the rest of my infographic.
I later changed the colour palette to warmer colours and earth tones, which gave the infographic a bohemian look. Appropriate, as yoga and hippie culture are related. This resolved the colour issue.
 |
| Figure 3.3-2: Attempts 1.0, Week 4 (27/02/25) Software: Adobe Illustrator |
Title & Heading Font: Bumblebee
Body & Subtitle Font: Poppins
Graphics: Canva
Icons: Flaticon (recoloured in Photoshop)
Icons: Flaticon (recoloured in Photoshop)
The original infographic was very wordy in places where they should have used graphics. I used progress bars and rings to supplement the text for "gender division", "36.7...", and "$16.8...".
The "36.7..." and "$16.8..." information groups gave me a headache. For the life of me, I couldn't figure out how to make the subheading and body text look not awkward. The subheading for "$16.8..." stuck out no matter where I positioned it.
I figured the heading being too large was the issue. I took Attempt #2 and resized + repositioned the text, which led to:
 |
| Figure 3.3-3: Attempts 2.0, Week 4 (29/02/25) |
I'm pretty satisfied with this attempt. I added a border around "36.7..." and "$16.8..." so separate this information group from the "80 million...". The green border in Attempt #5.1 drew too much attention IMO, while the yellow box in #5.3 blended into the background. I went with the middle ground: Attempt #5.2.
I was also advised to change the colour of the body text in the two orange boxes as the low contrast made it hard to read, so I did that as well.
3.4 FINAL SUBMISSION
.png) |
| Figure 3.4-1: Project 1 — Final Design (Final Submission), Week 4 (01/03/25) |
4.0 PROJECT 2 — MINIMAL ANIMATED INFOGRAPHIC
Instructions:
- Animate your Project 1 infographic poster into a static loop animation.
- Requirements:
- Length: 15–30 seconds, looped.
- Size: 1080 × 1920 px.
- Upload to YouTube.
4.1 ANIMATION
.png) |
| Figure 4.1-1: Poster — A4 to 1080 × 1920, Week 5 (08/03/25) |
Due to the difference in resolution requirement for this project and Project 1, I adjusted the poster to fit the new aspect ratio. I'm not too fond of how empty the top and bottom of the poster look, but alas.🫠
Figure 4.1-2: WIP, Week 5 (09/03/25)
Most of the animation is focused around the intro. Body text and graphical elements shoot up from the bottom, title bursts out while subheadings roll out from the left. I did the same thing for the outro but in reverse.
The two progress rings spin throughout the video. I also gave the icons and the "80 million" a heartbeat effect, however, Mr Shamsul advised not to for the "80 million" because it made the infographic look unserious, so I removed it. This led to the left side of the poster looking static, so I gave the orange border a fade-in/fade-out effect in the final design to balance the animation.
4.2 FINAL SUBMISSION
Figure 4.2-1: Project 2 — Final Design (Final Submission), Week 6 (11/03/25)
5.0 FEEDBACK
5.1 WEEK 3
Specific Feedback: Choice of poster approved.
5.2 WEEK 4
Specific Feedback: Increase the contrast between the "Americans believe that..." and "Top 5 places..." headings and body text.
5.3 WEEK 6
Specific Feedback:
- @ Layout: Static poster layout is excellent. Animated poster is a bit loose but still OK.
- @ Animation: The heartbeat effect for the “80 million” isn’t so appropriate because your poster is serious, whereas the animation is playful. Perhaps can change it to fade-in instead.
6.0 REFLECTION
I'm quite happy with how the infographic turned out. The animated poster is not my best work as the poster wasn't designed to be in a 9:16 aspect ratio, but all things considered, I think it turned out alright.
8/10.💯
7.0 FURTHER READING
7.1 WEEK 3 — ANIMATED INFOGRAPHICS
 |
| Figure 7.1-1: Animated infographics: How to bring your content to life by Dom Hennequin |
Reference: Hennequin, D. (2019, August 12). Animated infographics: How to bring your content to life. 99designs. https://99designs.com/blog/video-animation/animated-infographics/.
Comments
Post a Comment