Information Design - Project 1 & 2
28/10/2025 - 18/11/2025 / Week 6 - Week 9
Tay Yue Chern / 0373215
Information Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 1 & 2 - Infographic Poster
TABLE OF CONTENT
1. INSTRUCTIONS
2. LECTURES
3. PROCESS WORK
4.
REFLECTION
INSTRUCTIONS
DESCRIPTION
After time exploring media and learning about information design, we will
now develop an infographic that presents a series of different processes as
visuals rather than text.
REQUIREMENT
Our main intention is to analyse the “delivery mechanism’s” that affect the
outcomes of our infographics. Though content is important, however the aim
of this presentation is too look at what makes an infographic presentation
work or does not work. This includes content but only as one of the many
components of an infographic:
PART 1: Infographic poster (20%)
1. Choose 1 infographic poster design (that is not well design) from
Internet
2. Redesign the poster into A4 size. Sketch the idea and process (5 Marks)
3. Redesign and simplify the poster based on visual hierarchy &
typography (5 Marks)
4. Simplify the poster's design based on color, shape & pattern (5
Marks)
5. Attach your final poster on E-Portfolio with explanation and reflective
writing (5 Marks)
PART 2: Minimal animated infographic (20%)
1. Animate your infographic poster into one static loop animation page
2. Loop duration in between 15 - 30 second
3. Size: 1080 x 1920 px (Vertical Video) upload to your own Youtube channel
Example of loop animation poster:
2.
https://i.pinimg.com/originals/c3/31/1e/c3311e940662cc1710108bed89b2d827.gif
(this is for animation reference only. Typography is required)
LECTURES
Week 6 - Visual Hierarchy
Fig 1.1 Week 6 Lecture Slides (Week 6, 28/10/2025)
Week 7 - Typography in Information Design
Fig 1.2 Week 7 Lecture Slides (Week 7, 4/11/2025)
Week 8 - Independent Learning Week
Week 9 - Infographics Storyboard
Fig 1.3 Week 9 Lecture Slides (Week 9, 18/11/2025)
PROCESS WORK
Project 1 - Infographic Poster
|
| Fig 2.1.1 Infographic Poster from Pinterest (Week 6, 28/10/2025) |
I chose this poster because I am quite interested in its topic, and I
also feel that its design has a lot of room for improvement. The first
and the biggest issue for this poster is that the information is
scattered everywhere, making it hard to follow.
So my first step was to extract all the information and simplify it by
selecting only the most relevant points based on the theme. I then
categorised the information according to LATCH.
|
|
|
Since the topic is related to gaming, I organised the content into
progressive “levels” (Level 1, 2, 3) to match the gaming style. This
also helps create a clear hierarchy, starting from wider general ideas
and moving towards more specific information.
Figure 2.1.2 shows my draft. However, when creating the final version, I
removed a small amount of extra content based on what was needed.
Fig 2.1.3 Information Content Draft (Week 6, 28/10/2025)
I started sketching based on the content I had organised. My initial idea
was to use a symmetrical layout (approximate symmetry) and arrange the
information in a zig-zag pattern, which helps create a clear visual
hierarchy while maintaining balance. I also planned to include small
graphs, icons, and graphic elements to highlight the key points in each
section and enhance overall visual clarity.
|
| Fig 2.1.4 Sketch #1 (Week 6, 28/10/2025) |
After consulting Mr Fauzi in Week 7, he approved my direction and said I
could proceed with the design. I chose a blue–purple and orange–yellow
contrast colour palette because the theme focuses on the “brighter side
of gaming”. The transition from dark blue to blue-purple and then to
orange and light yellow creates a sunrise effect, symbolising how the
brighter side of gaming is gradually being understood.
|
| Fig 2.1.5 Colour Palette (Week 7, 4/11/2025) |
|
|
Fig 2.1.6 Working Progress (Week 7, 4/11/2025) |
|
| Fig 2.1.7 Infographic Poster First Attempt (Week 7, 4/11/2025) |
After Week 8 Feedback Session, Mr Fauzi suggested that I can try
arranging the content from bottom to top because the background colours
move from light to dark, which makes more visual sense. This was
challenging for me, as I myself am also used to reading information
from top to bottom.
|
| Fig 2.1.8 Sketch #2 |
To test this approach, I placed the word “gaming” as the title at the
bottom, enlarged it, and used a highly saturated orange to emphasise
it. The aim was to attract the viewer’s attention to the bottom first,
then guide their eyes upward through the levels as the colour
gradually shifts from light to dark.
I also replaced my original balanced symmetrical zig-zag pattern with
a more dynamic Z-shaped layout, to break the overly formal structure
and made the design more playful, which fits the theme better.
|
| Fig 2.1.9 Adjustment (Week 8, 11/11/2025) |
I also created pixel-art style graphic elements for each section of the
infographic. I chose to make them myself because I wanted the graphic
elements to have a consistent style and level of detail, without some
looking very detailed while others looked less refined, and it is also
easier for me to animate them later.
|
| Fig 2.1.10 Pixelated Graphic Elements (Week 8, 11/11/2025) |
|
|
|
To compare the effectiveness, I also created a version that arranges the
information from top to bottom using the same design logic, so I could
see which one works better.
|
|
|
After the Week 8 consultation, Mr Fauzi still preferred the
bottom-to-top reading direction for my design and suggested that I can
try adding more graphic elements around the title and extend to the
content upward.
I also experimented with a single-colour background and increased the
saturation at the bottom to draw attention to the starting point. However,
the effect did not work as well as I expected, as the visual focus was
still not strong enough.
|
|
|
I realised that my layout still did not immediately communicate that the
infographic should be read from bottom to top. To improve this, I
experimented with a new colour scheme, choosing a warmer purple tone. I
also applied a simple gradient for the title. I avoided overly complex
decoration because a visually heavy title could distract viewers and
reduce clarity.
|
| Fig 2.1.13 Infographic Poster Refinement #2 (Week 9, 18/11/2025) |
Based on this, I added a few simple visual elements. At the bottom, I
placed a graphic element using the same colour family as the title to
reinforce its importance. I also added upward-pointing arrows to guide
the viewer’s eye. The bottom arrow is solid and more visible, while the
top arrow has lower opacity. This helps establish a clear visual
hierarchy, so that the viewer’s attention is first drawn to the bottom,
then naturally follows the arrows upward.
|
| Fig 2.1.14 Infographic Poster Refinement #3 (Week 9, 18/11/2025) |
During the Week 9 consultation, Mr Fauzi suggested reducing the number
of arrows, as too many could distract the viewer’s attention. After
refining the design based on his feedback, I adjusted the arrows to keep
only the essential ones for guiding the reading direction. With these
changes, the composition feels cleaner and the visual flow is clearer.
|
|
|
For Project 2, we had to animate our infographic poster into a loop
animation in Instagram Story/YouTube Shorts size (1080 × 1920 px). I
started by resizing the artboard and simplifying the text to make it more
suitable for animation.
I placed the title at the centre to emphasise it, then rearranged the
content into a clearer and more intuitive layout. This helped ensure that
the animation remains easy to read and visually focused even when looping.
|
|
Fig 2.2.1 Refinement Process (Week 10, 25/11/2025) |
As suggested by Mr Fauzi, instead of using common guide lines to show
direction, I switched to constellation-style elements since my
background concept was the sky. I first blended a subtle star-sky
texture at the top and faded it downward, just to strengthen the idea of
a night sky and to make sure the constellation elements would not feel
out of place.
|
|
Fig 2.2.2 Star-sky Texture on top (Week 10, 25/11/2025) |
Then, based on my reference images, I created the constellation
graphics. To make the later animation process easier, my initial idea
was to let the constellations light up one by one to guide the
viewer’s eye upwards. When the animation reaches each level, the
corresponding button would also change colour to give a subtle
hover/pressed effect, signalling progress and interaction.
|
|
Fig 2.2.3 Constellation Graphic Elements (Week 10,
25/11/2025) |
|
|
Fig 2.2.4 Button Hover Effect (Week 10, 25/11/2025) |
After that, I started working on the animation. For the glowing effect
on the constellations, I used Gaussian Blur, which was quite smooth to
create since I had done similar animations before.
|
|
Fig 2.2.5 Animation Process in Illustrator (Week 10,
25/11/2025) |
Once I completed all the frames in Illustrator, I exported them and
imported everything into Photoshop to assemble the final loop
animation.
|
|
Fig 2.2.6 Animation Process in Photoshop (Week 10,
25/11/2025) |
 | |
|
Fig 2.2.8 Final Animated Infographic Poster - MP4 (Week 10, 25/11/2025)
Back to top
REFLECTION
Overall, I really enjoyed this project. It was slightly challenging, especially because in Project 1 Mr Fauzi suggested that I try a bottom-to-top layout. I was honestly unsure at first, since my natural reading habit is also top-to-bottom, which I think is the same for most people. Figuring out how to make the design override that habit became one of the main challenges. But step by step, I tried different solutions based on my own logic and design thinking, and the process felt very fun. I also experimented with many different combinations, and I am satisfied with the final outcome.
One thing I learnt from both projects is the importance of making subjective decisions when handling information. My Project 1 poster had a lot more content, and because both projects have different aims, I had to adjust my approach. The static infographic poster focused on presenting information clearly, using design to enhance the theme and guide the viewer. The animated infographic, however, was more about visual delivery, like how to use design and looping animation to communicate the key information in the shortest amount of time.
So I had to selectively filter the content, reorganise it, and redesign the layout. I think this process of thinking, refining, and trying different methods was the most interesting part. Learning how to communicate information in a clear, direct, and accurate way is very important, and I feel that I learnt a lot through these two projects. There is still room for improvement, but I am genuinely happy with the outcome.
Comments
Post a Comment