Information Design | Project 1 & 2: Infographic Poster
30.10.25 - 23.11.25 / week 6 - week 10
Subhana Salim / 0375936
Information Design/ Bachelor's of Design (Honours) in Creative Media / Taylor's University
Project 1 & 2: Infographic Poster
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Project 1 & 2: Infographic Poster
4. Reflection
LECTURERS
Lecture 4: Visual Hierarchies
1. Visual Hierarchy: Visual hierarchy allows an person to know which
part of the content is the most important, and how the content is
organized. There are different components of visual hierarchy is size,
color, shape, distance, proportion and orientation.
2. Color: Color can be used to highlight certain elements over others.
It can also be used to identify groups. Finally color is used to
elicit certain emotions in the viewer's subconscious.
3. Size:
4. Alignment: Alignment in visual hierarchy communicates a sense
of order by connecting elements spatially. Sometimes a single element
may break the establish structure in order to make it stand out from
the rest.
5. Shapes: Instead of text, aspects such as icons, geometric shapes
can allow for quick and universal communication.
6. Motion: A moving element will carry greater visual weight in a
group of stagnant elements. However its use is limited to digital
media.
Lecture 5: Information Architecture
1. Manuel Lima’s 9 Directives Manifesto: Manuel Lima’s Information Visualization Manifesto provides a working list that can help provide clarity on what is
'Information Visualization' through 9 directives, which are as
follows-
2. Form always follows function: the purpose should always be centered on the explanation
3. Interactivity is Key:
Allows for investigation and learning through discovery
4. Cite Your Source: Always disclose where your data originated.
5. The Power of Narrative: Elaborate your information into storytelling to make it more
interesting and memorable.
6. Do Not Glorify Aesthetics: should always be a consequence and never a goal
7. Look for Relevancy:
Understand why you are visualizing the information
8. Embrace Time: Time management is one of the key factor to organize
and achieve better results for any decision making.
9. Aspire for Knowledge: A core ability of Information Visualization
is to translate information into knowledge. It’s also to facilitate
understanding and aid cognition.
10. Avoid Gratuitous Visualizations: should respond as a cognitive
filter, an empowered lens of insight, and should never add more noise
to the flow.
Lecture 6: Typography in Information Design
The first and most crucial point to take into consideration when
choosing infographic fonts is your brand:
1.Make sure your font is legible
2.Experiment with different types of Fonts
3.Find the best combination of fonts
4.Stay consistent with the font chosen
5.Ensure alignment and visual hierarch
Lecture 7: Infographics Storyboard
1. Storyboard:- A storyboard is a graphic depiction or series of sketches, drawings or photographs that lists the major events, shots and actions in a narrative, frequently in chronological order.
2. 7 steps to create an effective storyboard :-
a. Step 1: Define your project and objectives
b. Step 2: Develop your script or narrative
c. Step 3: Storyboard structure and format
d. Step 4: Sketch the frames
e. Step 5: Add annotations and details
f. Step 6: Review and revise
g. Step 7: Finalize and share
INSTRUCTIONS
Project 1 & 2: Infographic Poster:
Project 1: Infographic Poster: This assignment
requires you to choose an infographic poster design from the
internet and redesign it better using design principles in an
A4 size format
Project 2: Minimal animated infographic: This
assignment requires animated the previous infographic poster
into one static loop animation between 15 to 30secs
PROJECT 1 & 2: INFOGRAPHIC POSTER
Step 1: Finding the Chosen Infographic
Figure 1.1 Reference Image
For my choice, I went with this infographic about
AI art. Some of the information is rather
scattered with images placed everywhere. There may
be hard time for viewers to identity the important
elements of the poster. Along with this the poster
is in a different dimension from
A4.
Step 2: Inspiration
.png)
Figure 1.2 Moodboard
Since the reference infographic was talking
about the negative effects of AI art, I was
inspired to go for styles that looked very
hand drawn. The colors I want to use in my
palette I wanted to go for is greens, blacks
and yellows.
Step 3: Sketch
For the sketch I was inspired by combining
imagery of TV/electronics with human. I
decided to center a drawing of a TV head
with a human body. The main title of the
infographic 'What is AI Art' will be
placed on the television screen.
Figure 1.3 Traditional Sketch
Step 4: Illustrating
For the making of the poster, I
decided to combine Clip studio paint
and Adobe Illustrator. The digital
illustration was to be done in CSP
while the assembling was to be done in
Illustrator. I began by sketching out
the main character in CSP.
Figure 1.4 Sketching in
CSP
Then I gave it lineart and
colored it.
Figure 1.5 Coloring in CSP
Step 5: Assembling
Then I began setting up the poster
elements in Illustrator. I first
started with placing a green
background and then added ink blot
texture to make it look more
handmade.
Figure 1.6 Adding
background and
texture
Then I inserted the
drawing of the character
and placed it in the
center.
Figure 1.7 Adding
illustration
Then I began adding
the first category of
text, which is the
heading and the
description.
Figure 1.8 Adding
Text 1
I then added a
small box of text
in the bottom as a
subline
text.
Figure 1.9 Adding
Text 2
Finally I added
all the other
categories of
information in
this
infographic.
Figure 1.10
Adding Text
3
Finally I added some
tiny details and
textures to finish
it off.
Figure 1.11 Adding
Finishing details
INFOGRAPHIC POSTER
Figure 1.12 Infographic Poster
Png
FINAL INFOGRAPHIC POSTER
AFTER FEEDBACK
From the final feedback from Mr.
Fauzi, he suggested that I move
around the text in the poster to
is spaced more and bigger first
without the hands. After the
placement of text is done, then
the hand can be placed. He also
suggested I change the style of
the word 'AI' So it pops from the
rest.
Figure 1.13 Final
Infographic Poster Png
after feedback
Step 6: Animation
For project 2, we were
required to change the
dimensions and create
an animation of the
poster to fit the
youtube shorts
dimensions.
First I started by
adjusting the elements
in the poster to fit
the new vertical video
dimensions.
Figure 1.14
Changing the
dimensions of the
Poster
Then I began by
creating the
keyframes for
the animation in
the poster. The
elements I
decided to
elements were
the arrows,
hands, the
sparks in the
TV, the circles
and the letters
in the
title.
Figure 1.15
creating
keyframes
Figure 1.16
Animating on
Illustrator
Then I
began
animating
the hands on
After
effects. To
do this I
exported the
hands layer
as a
transparent
PNG. After
exporting
the
animation
from
Photoshop, I
imported it
into After
Effects. I
began
adjusting
the
animation to
6 seconds by
copying and
pasting the
animated
file.
Figure
1.17
Animating
on After
Effects
Then
I
begin
by
importing
the
hands.
I
imported
the
transparent
image
of the
hand
separately
so
that I
can
adjust
its
movement
individually.
Figure
1.18
Importing
the
hands
Using the
transform
tool, I
adjusted the
position and
angle of the
hands.
Figure
1.19
Adjusting
the
position
and
angle of
the
hands
FINAL
ANIMATED
POSTER
Figure 1.20 Final Animated poster
REFLECTIONS
This assignment has taught me a lot in terms of composition. Information design focuses on text more than the illustration which is considered just additional elements. One of my main flaws working on this was trying to adjust the illustrative elements and text within the same canvas. I initially felt very tight, with no room for the text to breathe. With the help of Mr. Fauzi's feedback, I was able to edit the elements to improve composition, visual weight and hierarchy. After working on this assignment I was able to better balance text on the image.
Aside from this, I initially had trouble animating the poster. I also animated the text, which made it incredibly difficult for the poster to be able to be read. According to Mr. Fauzi, he suggested that I only animate on non textual elements to allow for the text to be easily read. Overall this assignment improved my overall skills in visual balance and composition, enabling me to make better infographic posters.
Comments
Post a Comment