Requirements
Part 1: Infographic poster (10%)
1. Choose 1 infographic poster reference from Internet (Please consult
before proceeding)
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
Part 2: Minimal animated infographic (10%)
1. Animate your infographic poster into one static loop animation page
2. Loop duration in between 15-30 second
3. Size: 1080 x 1920px (Vertical Video) upload to your own YouTube
channel.
Project 01 - Part 1 [Redesign Infographic Poster]
During Week 3, we were
tasked with selecting an infographic poster from the internet and
consulting
Mr. Shamsul before
leaving class. The objective was to
redesign the chosen poster
into an
A4-sized format while
improving its visual impact and clarity.
For my project, I selected a
Kendrick Lamar infographic poster, as shown below. The redesign process allowed me to refine its
layout, typography, and overall composition to create a more
cohesive and visually compelling design.
Fig 1.1 Chosen poster (20/2/2025)
After selecting the poster, I began researching reference designs and
art styles before starting my sketch. Although I didn't create a mood
board, I explored various inspirations and had a clear vision of the
style I wanted to achieve during the research process.
Fig 1.2 Research Reference (24/2/2025)
After completing my research, I began sketching ideations before
moving on to the design process. Since this was my first time
designing a rapper poster, many of the styles and effects were new
to me, making it a challenging yet rewarding experience. It allowed
me to explore different techniques and expand my design skills.
Fig 1.3 Rough Sketch (25/2/2025)
In week 4, we had an online class where Mr. Shamsul reviewed our
progress. Since I had not started the design yet, I presented my
references and sketches while explaining my concept. Mr. Shamsul
provided valuable feedback, suggesting that I use a bold sans-serif
font for the title to align with the rapper poster aesthetic. After
the class, I conducted further research on typography to find a more
suitable font for my design. Ultimately, I decided on Druk, a
strong and impactful sans-serif typeface.
Fig 1.4 Chosen Font (27/2/2025)
Poster design progress
After receiving feedback from Mr. Shamsul, I began designing my
poster using Photoshop. Instead of strictly following my initial
sketch, I explored different layouts and drew inspiration from
various design references to refine the composition. This approach
allowed me to experiment with different styles and create a more
dynamic and visually engaging poster.
Fig 2.1 Design Progress 1 (28/2/2025)
I chose not to follow my initial sketch because, from past
experience, I learned that having too much text and minimal
graphics can make a poster feel cluttered. This time, I focused on
keeping only the key points while ensuring a strong visual impact.
The rapper’s name became the focal point, positioned on both the
left and right sides in bold, oversized typography to create
emphasis. I opted for a black-and-white design while incorporating
selective color accents in the text for contrast. Additionally, I
included the artist’s birth date and location beneath the name.
Since songs play a crucial role in a rapper’s identity, I also
featured 12 of the most popular tracks in the design.
Fig 2.2 Design Progress 2 (1/3/2025)
The next day, I continued refining my design
and decided to incorporate musical elements
into the poster. I chose to include a music
player, as it not only enhances the theme
but also provides an opportunity for
animation later. After completing the music
player, I added a selection of the rapper’s
most popular albums to further highlight his
musical achievements.
Fig 2.3 Design Progress 3 (1/3/2025)
To fill the remaining empty space in the bottom right, I decided
to showcase the rapper’s achievements, including awards such as
the Grammy Awards and notable worldwide records. Additionally, I
incorporated the rapper’s signature as a subtle decorative
element, placing it behind the image to enhance the overall
composition.
Fig 2.4 Design Progress 4 (2/3/2025)
After completing the poster design, I experimented with effects
on the image. Initially, I aimed for a brutalist-style poster,
but applying the effect to the entire design did not achieve the
desired result. Instead, I chose to incorporate the brutalist
aesthetic solely on the image, using the
Threshold
effect in Photoshop and adjusting the values to create a bold,
high-contrast look. If animation were not a requirement, this
styling could have been explored further, and I look forward to
experimenting with it in future projects.
Fig 2.5 Design Progress 5 (2/3/2025)
In the final step of the poster design, I applied the
Threshold effect
to the last image and adjusted the values accordingly. While the
result may not have met my expectations entirely, it was a
valuable learning experience in refining image adjustments in
Photoshop. This process allowed me to explore new techniques,
and I look forward to improving and achieving even better
results in future projects.
Project 01 - Part 2 [Create Animation]
Fig 3.1 Animation Progress 1 (3/3/2025)
For the first animation, I focused on the rapper's name.
Since the poster was designed in Photoshop, I decided to
experiment with creating the animation directly within the
software. I aimed for a glitch effect by duplicating the
text in different RGB colors—red, blue, and green—then
offsetting them slightly to the left and right. Once the
visual effect was set, I adjusted the timeline to create a
glitch motion that lasted around 1 to 2 seconds. However,
after testing the animation in Photoshop, I realized that
After Effects would provide better control and smoother
execution. As a result, I transitioned to After Effects to
refine and complete the animation.
Fig 3.2 Animation Progress 2 (4/3/2025)
After importing the design into After Effects, I began
animating several key elements. As previously mentioned, I
incorporated a music player into the design and planned to
bring it to life through animation. I created a looping
spin animation for the vinyl record to enhance the dynamic
feel of the composition. Additionally, to reinforce the
music theme, I animated the music bar to ensure it
visually responds as if playing. The completed animation
can be reviewed below.
Fig 3.3 Animation Progress 3 (4/3/2025)
At this stage, I decided to add animation to the border
surrounding the album. Initially, I considered applying
this effect to all borders, but I realized that
excessive animation could make the poster feel
unbalanced. Instead, I focused on enhancing the album
section. I used a neon outline effect, known as
Saber,
to create a glowing border. Additionally, I applied the
Mirror
effect to reflect the animation, flipping it upside down
for a more dynamic look. To enhance the visual appeal, I
adjusted the colors to purple and blue, creating the
illusion of four strokes running along the border.
Project 01 - Final Poster
Fig 3.4 Final Poster (5/3/2025)
Project 01 - Animated infographic poster
Finally, I have completed the animation and made final
refinements to the poster. As part of the
requirements, the animation was exported in
MP4 format (1920x1080)
and uploaded to my YouTube channel. For a detailed
review, please check it out on YouTube.
Animated infographic poster [YouTube]
FEEDBACK
Week 4
-
To enhance the
rapper-themed poster, incorporate bold typography, grunge
textures, and high-contrast imagery inspired
by hip-hop culture. Research rap album
covers and street art for authentic styling,
ensuring the design captures the genre’s raw
energy while maintaining clarity and impact.
-
Avoid using
Times New Roman
for a more contemporary and impactful
design. Instead, opt for bold
sans-serif fonts
like Helvetica, Futura, or Bebas Neue to
enhance readability and match the modern,
edgy aesthetic of rapper-themed posters.
Prioritize strong typography that
complements the visual style while
maintaining clarity and balance.
REFLECTION
Among the three exercises, the
Animated Infographic Poster
presented the greatest challenge, as it required me
to convey information effectively through motion.
Unlike static design, where elements remain fixed,
animation introduces movement, demanding a careful
balance between clarity and visual appeal. One of
the key challenges was ensuring that the audience
could follow the information seamlessly without
feeling overwhelmed.
To achieve this, I focused extensively on refining
timing, pacing, and transitions, making sure that text and visuals appeared in a
structured, engaging, and easily digestible manner.
Experimenting with different motion techniques
allowed me to emphasize key points without making
the animation feel rushed or cluttered. This process
deepened my understanding of
timing, easing, and composition, helping me refine my approach to animated
storytelling.
Overall, this project pushed me to think more
critically about
visual hierarchy in motion design
and reinforced the importance of
delivering information with clarity and
impact. The experience was both challenging and
rewarding, significantly enhancing my skills in
animated communication.
.webp)
Comments