Information Design - Exercises
25/09/2026 - 12/10/2026 (Week 1 - Week 4)
Information Design GCD60504 / Bachelor in Design (Hons) in Creative Media / Taylor's University
Information Design GCD60504 / Bachelor in Design (Hons) in Creative Media / Taylor's University
Anggia Tsani Rachmadiyanti, (0368487)
Exercises (1,2,3,4)
CONTENT LIST
- Instructions & Brief
- Lecture notes & Class exercise
- Exercises
- Feedbacks
- Overall Reflection
Instructions & Module Brief:
Lecture Notes & Class Demo
Week 1 - Class demo
- Mr Martin introduced to us what the module is about and briefed our tasks and exercises, as well as project 1,2,3.
- Information design is about breaking down process.
(Fig. 1) - Lecture Notes week 1
- Don't just think of final outcome and aesthetics.
- Motion Graphics means Graphics in Movement. Motion Graphics = Composition+Animation
- Composition= Graphics+Typography Animation= Movement+Rhythm
- 4 type of Animation: 2D animation. 3D animation. Stop motion animation. Motion graphics.
- Makesure that we sort out raw data first by categories and make it into an easily understandable data design for people to see and understand.
- For Project 1 makesure to always plan the typeface, colour palette, etc. Process of development and break down of data is important.
- Makesure the flow and layout is very clear.
- We must see alot of inspo and references
- Use AI to help understand a Data, not make the design.
In class we did a first tutorial on animating vectors in after
effects:
- First download the Illustrator file and separate the elements and vectors i want to move into individual layers so that it will be easier to animate in AE later on. For example: I made the guy's palm on a separate layers since i am going to animate it later. Artboard resolution should change to: 1920x1080
(Fig. 1.1) - Separating vector layers in AI
2. Then import the AI vector file into After Effects as
"Composition".. >> then click to see all the layers down
there.
(Fig. 1.2) - Importing AI file into after effects as Composition
3. Basic Transform Properties are:
Position, Scale, Rotation.
Here we first animate the lady where she appear from left side and
slide right appear with a "bounce effect". For this we used the
"Position" tool and adjust the x-axis and click the stopwatch to
make a keyframe.
In total we made 3 keyframes: the first is the lady out of the
frame, second is her positioned a bit more further than the ending
position and finally last keyframe is the final standing position.
>> to make smooth effect, I select all the keyframes and add
"Easy Ease" setting...
(Fig. 1.3) - Animating the lady with smooth bounce effect
To animate the head tilting back and forth, we used "Puppet position pin tool" where we put several pins on the lady
to stay in the same place and then I edit the first pin point on
the head to make it move. I add the first keyframe where the head
is back and another one when the head is in front. Then we just
copy and paste the frames to make it repeating and looping.
(Fig. 1.4) - Puppet pin tool
4. Then we animate the man on the right. We make him appear from
right to left using the same way as I did to the lady just now by
using "Position" axis tool and keyframes.
Since the palm and man is in different layers, we first link them
together by dragging and using parent-child, and drag the spiral icon to the "Man"
layer. Now the palm and man can move together as one.
(Fig. 1.5) - Parent layer linking
5. Then for the palm we want to wiggle and make it wave.
> We click the palm layer, press hold Option (mac) key and click
the stopwatch symbol to open the expression field for rotating
animation, and then type wiggle( ) with our own chosen values for
the frequency and amount of the wiggle.
Wiggle: Option Click(MAC), Alt Click(Windows) on Rotation
Stopwatch→ Open Expression→ wiggle( )
(Fig. 1.6) - Wiggle expression
6. Lastly, for the man sitting down we used the "Scale" tool to
appear him from the bottom (0) scaled down and then pop grow to
its place, also adding the Bounce effect too like the earlier one.
Since we want him to grow from the bottom middle, we first move
the anchor point to the bottom middle of the element by holding (
Y ) keyboard key, so he grows from the ground.
(Fig. 1.7) - Anchor position adjusting
This is the final demo outcome:
(Fig. 1.8) - Class Demo final outcome
Recommend Professional Motion Graphics with Rationals &
Inspirations:
(Fig. 1.9) - Extra Research 1
I found their animation very dynamic and fun to watch. IKEA
concentrates on animated typography. This ad have a lot of top
notch timings on all of the furniture/transitions. The animation
uses simple, playful visuals and smooth motion to communicate
IKEA’s idea of togetherness. The clean composition and clear
visual storytelling make the advertisement easy to follow while
keeping it engaging. There's simple geometric shapes and
objects, smooth transitions and movement. Minimal but expressive
visual style turning an everyday concept into an engaging
animated story.
(Fig. 1.10) - Extra Research 2
This Apple ad video is a talking about its every product becoming carbon neutral by 2030. This motion
graphics is mainly kinetic typography, with many motions,
movements on the text and minimal
doodle/icons. Apple combines kinetic typography, 2D graphics elements,
and motion to communicate a complex sustainability message
in a simple and engaging way. The animation keeps the
information visually clear while maintaining Apple’s clean
brand style. Dynamic kinetic typography, Minimal elements,
white and green colour palette. The video have smooth text
transitions and movement. It overall uses motion to make
data and facts more engaging. There's also clear order of
the information delivered and clear visual hierarchy that
guides the viewer’s attention.
Week 2 - Class exercise
- My Group (Group 1) presented on the Types of Infographics in class in canva slides:
Flip group 1 canva slides
(Fig. 2.1) - Group Flip 1 slides
- We did 3 exercises on AE on 3 of the chart types.
- 1) Animated pie chart
(Fig. 2.2) - Pie chart exercise
First, we make a composition >> Add Ellipse + hold
shift Shift for perfect circle >> no fill >>
add stroke (Solid colour) until the width covers fully and
make a filled circle.
(Fig. 2.3) - Pie chart exercise
Set anchor point to the center → Cmd/Ctl Double click on
Pan Behind (Anchor Point) Tool (Y) >> Click "Add" →
Trim Paths
(Fig. 2.4) - Pie chart exercise
Add keyframes & Easy ease: Trim Paths 1→ End→ 0%
& 100% >>
(Fig. 2.5) - Pie chart exercise
Repeat TWICE: Duplicate layer Choose colour from Stroke
Colour Option Rename new layer Change 2nd Keyframe to →
50% & 25%
** for donut chart, just reduce the stroke width
(Fig. 2.6) - Donut chart exercise
2) Animated Bar chart
For this we use Pen tool > no fill > adjust the
stroke width and colour to make the rectangle graphs
>> use Proportional Grid guides.
Then Add Trim Paths >> Add 2 keyframes
& Easy ease: : Trim Paths 1→ End→ 0% & 100%
>>
(Fig. 2.7) - Bar chart exercise
Duplicate Bar & Rename, >> Reposition and
distribute evenly on X-axis, >> Change Stroke
Colour, >> Change Trim Paths 2nd keyframe to
different value >> make the bar keyframe appear
one after the other..
3) Line Graph
For this we use pen tool too and strokes to
create the lines >> trim paths > Add
2 keyframes & Easy ease: : Trim Paths 1→ End→
0% & 100% >> and repeat for more lines
(Fig. 2.9) - Line graph exercise
Exercise 1 - Quantify & visualize
data
Instruction:
- Quantify (count) your chosen items and arrange the objects into a presentable layout or chart.
- You are required to arrange the objects with relevant indicators written out with pens to help you visualize the quantity and data. Take a picture of the final assembly and upload into your Google Drive folder.
My work:
- For this first exercise, I decided to use mixed gummy candies as there's many variety's of shapes and types to sort them out to categories.
- I first organized, sort and separated the mixed gummies into different groups for each same type.
Since it shouldnt be too complicated and just simple, I decided
that the main 2 categories will be the Coating >> ( Sugar Coated
v.s. Plain "No" Coating ).. Then the sub-category will be the
shape of the gummies.
(Fig. 3) - RAW data, Mixed gummy candy
These were my draft trials of the layout..
(Fig. 3.1) - Trials and drafts on paper
Final Exercise 1 Outcome:
(Fig. 3.2) - Final candy sorting and categorising
(Fig. 3.3) - Final Visualised Data
I finalised my visualizing of the candy data by categorising it
into 2 different groups: Coated with sugar and Plain coat, then i
labelled each shape and also the number for each type of
gummies.
Exercise 2 - L.A.T.C.H
For this exercise we had to make an infographic poster, while
implementing L.A.T.C.H method. We have to use at least 4 of the 5
LATCH principles in our poster. For the theme, we were told to do a
poster on Pokemon topic.
Before starting the poster, i first researched on Pokemons since I
don't know anything about Pokemon. I asked a little help from chat
gpt about the type of islands, pokemones there are.
(Fig. 4.1) - Chat Gpt help
After researching, I chose to work on Ula'Ula island pokemons. For
this I only chose 4 of them with each from different habitats and
types. The 4 pokemons I chose were from these categories: Flying,
Ice, Water, Ground.
Applying L.A.T.C.H:
Location - Map of Ula'Ula
with label of the habitat and arrow pointing
Alphabet - List Pokemon Names
in alphabetical order
Time - Show the Evolution of
growth cycle for each pokemon chronologically (young to adult)
Category - Categorizing the
pokemons by Type
Hierarchy - for each pokemon,
arrange the cycle from small to big (bottom to top)
I looked for some references first:
(Fig. 4.2) - References / inspo
I started doing my sketches and final map illustration digitally
using Procreate app on Ipad:
(Fig. 4.3) - Sketch and digital illustration of map in
Procreate
(Fig. 4.4) - Sketch and digital illustration of map in
Procreate
(Fig. 4.4) - Sketch and digital illustration of map in
Procreate
(Fig. 4.5) - finished digital illustration of map
Once I finished making the map habitats I imported it to an A4
poster on Canva where I start doing all the contents and
informations for the LATCH:
(Fig. 4.6) - Progressing into Canva
Final PNG Poster:
(Fig. 4.7) - finished PNG of poster
Final PDF LATCH Poster:
(Fig. 4.8) - finished PDF of LATCH poster
Exercise 3 - Vector/Character
Animation
- For this exercise, I got to do file A, which is to animate a car on the road with 1 man and 1 lady waiting by the roadside.
- I first changed the resolution size to 1920px and 1080px.
(Fig. 5.1) - Changing Artboard Resolution
- Then I separate the elements i want to animate into different layers. Once im done, I imported the AI file as Composition into After Effects.
(Fig. 5.2) - Separating layers in AI
I separated elements such as the car body, wheel, tree,
bush, man, lady, arms, head and the bags.
(Fig. 5.3) - Importing AI file to After
Effects
1) Bush and Tree
- I wanted to make the bushes and tree sway left and right on loop like theres wind effect by using Puppet pin tool >> Easy Ease tool to make it smoother.
2) Man & Women
- After the bush and trees, I made the 2 people appear and slide in from outside (right) to left inside the frame by using "Position" tool on x-axis.
- The Man will move in first and then the lady. I used 3 keyframe for both of them since I want to apply the Bounce effect >> Easy Ease.
(Fig. 5.5) - Animating the Man and
Lady
- Since I made the arms and body in different layers, I first link it to the Parent property:
(Fig. 5.6) - Linking Parent layer
For the man's head. i first move the anchor point to the
bottom right corner and applied the "Rotation tool" and
added and copy paste repeating keyframes where it will
animated the head nodding up and down.
For the man's thumbs up hand i also applied rotation tool
so the arms move up and down slightly. To make the
movement smooth, i selected the keyframes and applied
"Easy Ease".
(Fig. 5.7) - Animating man's arm and
head
Now for the lady, I animated the arm holding the
paper by first changing the anchor point to the edge
of the shoulder >> used "Rotation" tool, and
repeated the 2 keyframes so it looks like it is
waving.
For the other Left hand, I used >> puppet
tool since i only want the lower part of the arm
from elbow to move and wave the hand.
I also used Puppet Pin tool for the lady's head to
make it nod repetitively...
(Fig. 5.8) - Puppet Pin tool on lady's
head
(Fig. 5.9) - Puppet Pin tool on lady's hand
(Fig. 6) - Apply motion blur to man and
lady
Mr martin told us to apply motion blur
tool for the fast moving elements such as
the people.
Then I animated the bags after the 2 figures. I
moved the anchor to the middle bottom of the bag
and applied "Scale" tool to make it appear and
grow to its final form. I used 3 keyframes since I
want to add the Bounce and Easy Ease effect:
(Fig. 6.1) - Animating the Bag (pop up)
Lastly, I animated the car moving from left to
right (final position) by using "Position" tool.
Since I put the car body and wheels separated
layers, I link Parent the car body to the wheel.
For the car body, I wanted it to still move
slightly up and down even when it stopped, by
using "Position" to make it look like the engine
is still On and revving:
(Fig. 6.2) - Animating the Car movement
(Fig. 6.3) - Final MP4 Exercise 3 Vector Animation outcome
Exercise 4 - Chart Animation
For this exercise i got A: Donut Chart as assigned by mr martin. I
have to animate this:
I first made the keyframes for the popping up intro text about
the topic. I used Text took and then I clicked Animate >
Opacity to reveal the text. Then for the Source I used Opacity
and Position tool to make it appear form bottom..
(Fig. 7.1) - Donut chart process on After Effects
(Fig. 7.2) - Donut chart process on After Effects
After that I started making the round donut shape using Ellipse
tool, and adjusting the stroke width for the donut chart
background colour (dark red). >> Duplicated the same layer
4 times since the data in the chart has 4 different data. I did
this using "Trim Path" tool and adjusting the Start &
End.
(Fig. 7.3) - Donut chart process on After Effects
(Fig. 7.4) - Donut chart process on After Effects
Once I finished the donut, I animated the line to point on
each data using Pen Tool >> Trim Path (Repeated for all
the data on the chart for the labels). Then I used Scale tool
to pop up the numbers of the percentage on each data and for
the Label name I applied the Animate >> Opacity text
tool again:
(Fig. 7.5) - Donut chart process on After Effects
(Fig. 7.6) - Donut chart process on After Effects
Next I wanted to add the percentage loading from 1-100% in
the middle. I also watched a youtube tutorial for this. I
first add Text >> Double click effect controls panel
>> Expression Controls >> slider controls and
typed in the code for it. Then I adjusted the slider for the
numbers
(Fig. 7.7) - Donut chart process on After Effects
(Fig. 7.8) - Donut chart process on After Effects
(Fig. 7.9) - Donut chart process on After Effects
After all the donut chart and label have appeared, i scale it
smaller slightly so that I can add 2 lines of content text on
top of the chart again using Animate >> Opacity text
tool to make the words appear. Lastly, I typed in the Source
of the info under the donut chart, appearing it using scale
tool
(Fig. 7.10) - Donut chart process on After Effects
(Fig. 7.11) - Donut chart process on After Effects
Final Donut Chart Outcome:
(Fig. 7.12) - Donut chart process on After Effects
Feedbacks
Week 1:
General Feedback: Class exericse and module briefing
Week 2:
General Feedback:
Specific Feedback:
Mr Martin said my quantifying gummy candies was
good but for the vector exercise he told me to
animate the tree swaying when the car comes in.
Also add motion blur to the 2 people.
Week 3:
General Feedback: Start dping LATCH exercise by next week, and finalise
group kinetic proposal slides
Specific Feedback:
Mr Martin said my donut chart is good, just add the
website source text at the bottom.
Reflection
Experience:
As for a start to this module, doing these 4 exercises have
helped me get used to designing the basics and theory of
organising and presenting information in an effective and
presentable way. After doing exercises on After Effects, ive
gotten used to creating keyframes, basic motions and
animations, basic tools that are actually helpful for our
work later on. It was an enjoyable 4 exercises. I had fun
doing the first exercise as I got to be creative on how to
visualise and arrange the candies in a presentable way. As
for the pie chart and vector exercise it was a lot of trial
and error but it was quite easy after several exercises. My
favourite exercise was the LATCH as I found it enjoyable
illustrating the map, organising and playing around with the
compositions for the infographic pokemon poster.
Observations:
Throughout these exercises, I realised that the first
important thing before presenting datas or information is
organising them into categories first, making sure there's
clear order & hierarchy. I observed how important
planning is in design. When doing motions in after
effects, i need to makesure each object is in different
layer as it can cause a lot of errors and troubles later
on.
Findings:
When making infographics, do not think of the visual appeal
or design first. Making it only looking nice won't create an
effective infographic design. Making sure the information
are clear, organised is important. Before deciding on a
composition and design, always ideate first on how to
organise the data in clear order before starting the design
work
Comments
Post a Comment