Information Design - Project 1&2 : Animated Infographic Poster
03/02/2025 - ( Week 3 - Week 5 )
Ho Winnie / 0364866
Information Design / Bachelor's of Design Honors In Creative Media
Project 1 & 2 : Animated Infographic Poster
1. Project 1&2 : Animated Infographic Poster
 |
| Fig 1.1 Reference Poster Selected |
This Barbie-themed infographic has several design flaws that contribute to its ineffectiveness. Here are the key reasons why it can be considered a poorly designed infographic:
- The infographic is overloaded with text, making it difficult for readers to quickly grasp the main points.
- The lack of proper text hierarchy and spacing makes the information appear cluttered and overwhelming.
- Key information is not distinguished effectively, causing readers to skim past important details.
- The large Barbie image at the top takes up significant space but does not add informative value.
- The icons and small images used throughout the infographic seem randomly placed without clear connections to the text.
- Visual aids, such as icons or simplified illustrations, could have been used to represent the timeline more effectively.
- The light pink background with varying shades of pink and white text reduces readability.
- Insufficient contrast between the text and background makes it tiring for the eyes and difficult to follow.
- Multiple font styles and sizes are used without a clear purpose, causing visual inconsistency.
- Important headers like "EVOLUCIÓN" and key dates are not emphasized effectively.
- The infographic’s layout lacks a natural flow, causing readers to struggle to follow the timeline and information.
- The absence of clear directional cues or dividers makes it unclear where to start and how to proceed.
 |
| Fig 1.2 References Of Timeline Poster |
For the first sketch, I wanted to experiment with a circular path layout to convey Barbie's evolution in a more dynamic and interconnected way. My idea was to use overlapping circles to represent different milestones in Barbie's history, creating a sense of continuity without a strict start or endpoint. I also included notes to add elements from Barbie, like themed decorations, to keep the design playful and true to the brand’s aesthetic. However, I’m a bit concerned that the compact arrangement of the circles might make it challenging to fit all the information clearly. Despite that, I think this layout has potential to visually express Barbie's evolving nature.
In the second sketch, I went for a winding road design to give a sense of a journey through time. I felt that the curved path, combined with consistently placed information boxes, could effectively show Barbie's progression over the years. I also made the "current Barbie" the focal point by placing it at the end of the path in a large circle, drawing attention to the present while hinting at the future. I think this design has a nice flow and could work well for guiding viewers smoothly from one era to the next.
For the third sketch, I explored a dual-path design to reflect the versatility and multiple phases of Barbie's evolution. My idea was to use branching paths to represent different themes or eras, with the "current Barbie" positioned at a key intersection to highlight a significant turning point. While I think this approach captures Barbie's adaptability, I realize that the parallel paths might risk splitting the viewer's attention. Using color coding or themed icons could help make the paths clearer and more engaging.
In the fourth sketch, I decided to go with a vertical layout that allows for a straightforward comparison between past and present. My goal was to make the contrasts in Barbie's evolution easy to spot, so I included a "Past vs Now" section with side-by-side figures. I think the vertical alignment helps keep things organized and clean, but I’m considering adding more dynamic elements or varying the box sizes to avoid making it look too static. I like how this design emphasizes transformation clearly and concisely.
 |
| Fig 1.3 Sketches 1- 4 ( from left to right ) |
I believe that using these colors will not only enhance the visual appeal of the poster but also make it instantly recognizable as part of the Barbie universe. By incorporating these shades consistently across the design, I can maintain a cohesive and branded look that resonates with Barbie's iconic style.
 |
| Fig 1.4 Color Scheme |
These are the vectors I created in Illustrator for the poster design. I focused on capturing the iconic and playful essence of Barbie by using a mix of fashion accessories, makeup items, and other elements closely associated with her brand. The color palette, dominated by vibrant pinks, soft pastels, and a few accent shades, helps maintain a consistent and recognizable Barbie aesthetic.
I included a range of elements—from the signature Barbie convertible and silhouette to lipsticks, high heels, and accessories like crowns and sunglasses—to ensure that the design feels rich and comprehensive. Each vector was designed with simplicity in mind to keep the overall look clean and allow the information on the poster to stand out.
 |
| Fig 1.5 Vectors Drew In Illustrator |
For typography, I decided to go with Bartex, which is the official Barbie font. Its playful curves and iconic style align perfectly with the theme, helping to reinforce the brand's identity throughout the poster. Using Bartex ensures that the text not only stands out but also feels authentic to the Barbie universe. I believe that incorporating this font will enhance the cohesiveness of the design, making it instantly recognizable and more engaging for the audience.
 |
| Fig 1.6 Bartex Font |
I decided to try merging the designs of sketch 2 and 3 into one after realizing that the space was quite limited. To make better use of the available space, I moved the column featuring Barbie to the middle and placed the timeline on both the left and right sides. This adjustment not only helps balance the layout but also creates a more organized and visually appealing flow of information.
 |
| Fig 1.7 Illustrator Workspace |
By positioning Barbie at the center, the design naturally draws the viewer's attention to her evolution as the focal point. The timelines flanking her allow for a clear and sequential representation of key milestones, making it easier to follow the story of Barbie’s transformation over the years.
 |
| Fig 1.8 Initial Draft #1 |
After showing my first draft to Mr. Shamsul, he provided valuable feedback on several areas for improvement. He suggested rearranging the timeline to flow from left to right instead of the current layout, which would create a more natural reading path and enhance clarity. He also pointed out that there were too many unnecessary vectors, which made the design feel cluttered. Additionally, he recommended moving the middle Barbie column to the right side to balance the composition better.
Another key piece of feedback was to rethink the presentation of the map, as the current top-down approach felt a bit plain. Mr. Shamsul encouraged me to explore more interesting ways to illustrate the evolution of Barbie, perhaps by integrating design principles like flow , alignment, and hierarchy more effectively.
Taking his comments into consideration, I decided to refine my approach by simplifying the vector elements to focus on key icons that add value to the timeline. I also started working on a new map style that incorporates more engaging design principles, aiming to create a layout that is both visually appealing and easier to follow.
D. Redesign Process :
In my new approach, I decided to completely rethink the map layout based on Mr. Shamsul's feedback. I replaced the static top-down style with a more dynamic, winding path that starts with a lipstick applicator, which I thought would be a playful and thematic touch. My goal was to create a sense of journey and progression that aligns with Barbie's evolving image over the years. By spacing out each version of Barbie along the path, I made sure that every era stands out clearly without feeling cramped, making the timeline easier to follow.
 |
| Fig 1.9 New Map Approach |
After establishing the path, I focused on placing the different versions of Barbie directly on the map. I wanted to visually connect each milestone to the path in a way that would naturally guide the viewer's eyes. Including brief descriptions next to each point was a deliberate choice to add context without overwhelming the design. I think this helped keep the timeline clean and organized while still providing enough information to tell the story of Barbie’s evolution effectively. However I am not too satisfied with the background here so I decided to explore more ways.
 |
| Fig 2.0 Drafting The Details |
For the background, I chose a gradient blue-yellow with soft clouds to add depth and prevent the design from looking flat. I felt that these adjustments introduced a fresh and vibrant feel, which made the timeline more inviting and aligned with the bright and playful essence of Barbie. I also added subtle vector icons to fill in empty spaces and enhance the storytelling aspect. My aim was to incorporate these elements without making the design feel too busy or distracting.
 |
| Fig 2.1 Refined Background + Colors |
Finally, I reimagined the logo with "The Evolution" to give the poster a more polished and complete look. I’m really pleased with how this new approach turned out. I think it not only addresses the feedback I received but also makes the poster more engaging and visually cohesive.
 |
| Fig 2.2 Final Refined Poster |
 |
| Fig 2.3 Process Of Redesign |
- Reason: I used a gradient blue background with vibrant pinks to create a strong contrast that makes the text, icons, and Barbie figures stand out. This not only enhances readability but also directs attention to key elements like dates and milestones on the timeline.
- Reason: I applied hierarchy by making the "Barbie" logo and main titles larger than other text, ensuring they catch the viewer's eye first. The chronological order of dates and the size variation between titles and descriptions guide the viewer smoothly through the timeline.
- Reason: I used repeated elements like the lipstick applicator, vector icons, and consistent pink tones throughout the poster. This repetition reinforces the Barbie theme and creates a cohesive design that feels unified rather than scattered.
- Reason: I achieved balance by placing Barbies and text evenly on both sides of the path. The symmetrical distribution of elements prevents the poster from feeling lopsided and makes it more visually pleasing.
- Reason: The winding path serves as a visual guide that leads the viewer’s eye from the start to the end of the timeline smoothly. This sense of movement aligns with the concept of evolution and progress, making the poster more engaging.
E. Animation + Sound Effects
The next step I planned was to incorporate minimalistic animation effects to make the poster more dynamic and engaging without overwhelming the viewer. I came up with a few ideas that I believe can enhance the storytelling aspect while keeping the design clean and cohesive.
One of my main ideas is to start with the lipstick applicator appearing first, as it sets the theme right away and acts as a playful introduction. After that, I want the roadmap to gradually unfold, guiding the viewer’s eye smoothly from the start to the end of Barbie’s evolution. I think this sequential reveal can create a sense of anticipation and make the timeline more engaging to follow.
Next, I thought it would be interesting to have each Barbie figure appear one by one in chronological order, almost like they’re stepping onto the path. This approach not only emphasizes the progression of time but also gives viewers a moment to absorb each milestone before moving on to the next.
For the finishing touch, I plan to add a subtle rotating effect to the circle vectors around the main Barbie silhouette in the center. By having them rotate in different directions at a slow pace, I can create a sense of motion that draws attention to the central element without distracting from the timeline itself. The software I am utilising is After Effects.
 |
| Fig 2.4 Animation Progress |
To enhance the animation effects, I mainly focused on tweaking the opacity and rotation of the vectors. I did this by adding different anchor points to control when and how each vector would appear. My goal was to make sure the vectors pop up at the right moments, creating a smooth and polished transition that complements the overall design.
For the opacity, I used a fade-in effect to make the vectors appear gradually rather than abruptly, which helps maintain a minimalistic and elegant feel. By adjusting the anchor points, I could control the timing of each vector’s appearance, ensuring that they pop up sequentially in sync with the unfolding roadmap and the Barbie figures. This approach not only prevents the screen from looking cluttered but also guides the viewer's attention naturally from one section to the next.
As for the rotation, I experimented with subtle spinning effects for the circle vectors around the main Barbie silhouette. By setting different anchor points, I managed to create a balanced rotation effect—some vectors rotate clockwise, while others go counter-clockwise. The key was to keep the rotation speed slow and controlled to avoid overwhelming the viewer or distracting from the main content.
 |
| Fig 2.5 BGM Sound in Premiere Pro |
F. Submission
 |
| Fig 2.6 JPEG Final Poster |
 |
| Fig 2.9 GIF On Loop |
2. Feedback
Another key piece of feedback was to rethink the presentation of the map, as the current top-down approach felt a bit plain. Mr. Shamsul encouraged me to explore more interesting ways to illustrate the evolution of Barbie, perhaps by integrating design principles like flow , alignment, and hierarchy more effectively.
3. Reflection
Comments
Post a Comment