Information Design - FLIP Classroom & Practical
11.01.2023 - 08.02.2023 / Week 1 - Week 4
Lim Rui Ying / 0358986
Information Design / Bachelor of Design (Hons) in Creative Media
FLIP Classroom & Practical
INSTRUCTIONS
FLIP CLASSROOM
FLIP 1: Types of Infographic & Online Tools
WEEK 1Group Task: Research on infographic
We are assigned to do research on infographics and find out the
different types of infographics, the kinds of information they're
applicable for and an example for each identified type of
infographic.
We are to re-design a poorly constructed infographic poster
chosen from the internet using a free online infographic tool from
the list provided by the lecturer. We should also record our
personal rating and review of the online tool we used in terms of
difficulty and intuitiveness, usefulness and choices of design
templates.
I found a poorly constructed infographic poster "How to
Meditate".
|
| Fig. 1.1 Chosen poorly constructed infographic poster, Week 1 (13/1/2023) |
Issues:
- looks ordinary
- the colours used do not match well
- numbers are too large
- the illustration does not fit in the infographic
Re-design process :
I created two sketches to re-design the chosen infographic poster. I included a meditation posture in both sketches, but distributed the steps of meditation differently.
I created two sketches to re-design the chosen infographic poster. I included a meditation posture in both sketches, but distributed the steps of meditation differently.
|
| Fig. 1.2 Left: Sketch #1; right: Sketch #2, Week 1 (15/1/2023) |
I decided to use the first sketch to re-design the poster and the
online infographic tool I chose to use is Canva.
|
| Fig. 1.3 Attempt #1, Week 1 (15/1/2023) |
In my first attempt, I included some meditation graphic elements
(meditation posture & chakra symbol) and the colour palette
provided by Canva. I insert the content of "How to Meditate" into
the boxes with a related icon beside it. However, the outcome of the
poster is unsatisfying regarding the composition and colours. The
boxes also take up too much space and cover the graphic
elements.
|
|
Fig. 1.4 Attempt #2, Week 1 (15/1/2023) |
In the second attempt, I worked on the composition first. I took off the boxes that take too much space and arranged the icons and text around the chakra symbol. But the poster looks packed on the left and right margins.
|
|
Fig. 1.5 Attempt #3, Week 1 (15/1/2023) |
So, I took off the icons and replace them with numbers. I place the numbers on the tips of the chakra symbol and arrange the text again.
|
|
Fig. 1.6 Final outcome, Week 1 (15/1/2023) |
Lastly, I toned down the chakra symbol and changed the colours
brighter so the information and the graphic elements can correspond
to each other perfectly.
Final re-designed infographic poster - How to Meditate
|
|
| Fig. 1.7 Final re-designed infographic poster - How to Meditate, Week 1 (15/1/2023) |
|
| Fig. 1.8 Infographics comparison, Week 1 (15/1/2023) |
Online infographic tool : Canva
Personal Rating & Review of Online Tool - Canva
Difficulty, Intuitiveness 4.5 / 5*
Canva is pretty easy to use as the usage of every tool is simple and
straightforward.
The guides are useful that help in alignment. Canva is useful and
suitable to create simple designs that are uncomplicated.
Canva provides various types of design templates and other elements
like graphics, illustrations and fonts, which help a lot when I
re-designed the infographic poster. Just that some elements are
payable to be used and downloaded.
FLIP 2: Saul Wurman's L.A.T.C.H
WEEK 2
We learned about L.A.T.C.H., a method of information organisation that
consists of these principles:
- Location
- Alphabet
- Time
- Category
- Hierarchy
Group task: Research on L.A.T.C.H
We were assigned to research L.A.T.C.H in groups with the definition
of each principle and provide an example for each.
FLIP 3: Miller's Law (Chunking)
WEEK 3Group task: Research on Miller's Law (Chunking)
FLIP 4: Manuel Lima's 9 Directives Manifesto
WEEK 4
Group Task: Research on Manuel Lima's 9 Derivatives
PRACTICAL
WEEK 1: Motion Graphic Exercise
We were asked to recommend three professional motion graphic videos
with a rationale and inspirations we got from each motion graphic
video.
Video 1: Make it Better by MotionDesignCommun
This motion graphic video only includes one sentence "I'm gonna make
it better". The designer animates the sentence by manipulating fonts
and shapes, matching well with the sound effects.
Video 2: Feul with reading, train with writing by Dan Koe
This motion graphic video uses lines and shapes to create simple
graphics which well-suited to the content. A circle is animated like
a ball bouncing and is used as the main flow in the whole video. The
video is short but well conveys the content with simple and creative
animation.
Video 3: ‘Orb it’ loop-series 모션그래픽 motion graphics by seven
This ‘Orb it’ loop series includes Impact, Reflect, Tunnel of eternity, Perpetual motion, Moebius strip, Birth & Death cycle and Balance. The designer uses light and shadow to create animations of 3D shapes. The background colour is purple, contrasting with yellow and orange. Shapes, colours, light and shadows flow smoothly, creating an illusion of unreal time and space.
WEEK 2: Kinetic Typography Exercise
Mr Martin guided us step by step on the kinetic typography
exercise using a small part of the song "So What" by P!nk.
|
| Fig. 3.1 Lyrics typed out |
First, we create a composition of 1920px x 1080px and type out the
lyrics.
|
| Fig. 3.2 Lyrics layout |
Arrange the lyrics text to form a layout within the guidelines.
Adjust the timeline of each lyric text to appear on time.
Next, we create a null object and named it "animation" to animate
the lyrics. A null object is an invisible layer that you can create
to be a super parent. We link all lyrics text to the null object so
the text will move together in the same animation. We manipulate the
position and size of the lyrics in the null object.
|
| Fig. 3.3 Each lyrics text is adjusted |
Adjust the timeline of each lyric text to appear on time.
|
|
|
|
|
Fig. 3.5 Keyframes of lyrics |
Lastly, turn on motion blur for the lyrics and easy ease on all keyframes to make the animation looks smooth.
Video 4: Kinetic typography - Rock Star, Week 2 (19/1/2023)
WEEK 3: Animation Chart Exercise
Types of charts: Pie Chart/Donut Chart, Bar Chart, Line Graph
We learn to do motion graphic charts in class following the demo video by Mr Martin. We are to do one of the motion graphic charts
assigned by Mr Martin.
I learned to create the animation of a pie chart and donut chart.
The animation of the pie chart and donut chart shares the same steps
to create but modifies in the strokes of the eclipses.
Video 5: Basic animated pie chart, Week 3 (26/1/2023)
Video 6: Basic animated donut chart, Week 3 (26/1/2023)
WEEK 4 : Vector Animation Exercise
We are to animate a vector illustration provided by Mr Martin by
following his tutorial video. We learn to animate the vector illustration regarding
the position, scale and rotation to
create basic animation. We also learn to create bounce
effect on each character.
|
| Fig. Vector illustration |
|
| Fig. Basic animation - GIF, Week 4 (2/2/2023) |
|
| Fig. Bounce effect animation - GIF, Week 4 (2/2/2023) |
Next, Mr Martin taught us to do advanced animation using wiggle and puppet position pin tool to animate the lady's head (nodding effect) and the right guy's
palm (waving effect).
Video 7: Vector animation, Week 4 (5/2/2023)
REFLECTION
From the FLIP Classrooms, I have learned the types of infographics
and the ways of organising data to be simple and straightforward.
L.A.T.C.H principles and Chunking are useful to classify, categorise
and group data. While Manuel Lima's 9 Derivatives tell us to present
data with purpose, interactivity, aesthetics and relevancy. All
these laws and principles are useful and helpful for me to complete
exercises in designing infographics.
I have learned animating basics from the class exercises such as using the properties of opacity, rotation, position and scale to create animation and bounce effects. Besides, motion blur and easy ease make the animation looks smoother and more dynamic. With Mr Martin's guidance in class, I could understand the animation basics very quickly. These class exercises are just a warm-up and they are useful for us to complete Exercises 3-5.
Comments
Post a Comment