Information Design / Exercises

-
04.01.2022 - 20.01.2022 (Week 1 - Week 3)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Information Design / Taylor's University 
Exercise 1 & 2
Week 1 
(04/01/2022):

In the first meeting of the Information Design Class, Ms. Anis introduced us to the MIB and explained us brief information about our upcoming tasks and activity.

Then, Ms. Anis lectured us about the way how data were arranged:
fig 1.1, step by step data arrangement, Week 1 (04/01/2022)

(06/01/2022):

Based on the data, 90% of information transmitted to the brain is visual, which we can conclude that people are living in a visual information culture. This make infographics have very big role in delivering information and data.
fig 1.2, how humans perceive informations, Week 1 (06/01/2022)

Knowledge added from information displayed through spatial, quantitative, and chronological relationships. Ms. Anis also taught us about the importance of visual, she gave us this video:
fig 1.3, how humans perceive informations, Week 1 (06/01/2022)

To make a good visual information, we can add variation to color, size, and placement, which can help to add meaning in just a glance. This is one of a good infographic example provided:
fig 1.4, how humans perceive informations, Week 1 (06/01/2022)
Week 2
(11/01/2022):
Ms. Anis played some of the video that have been made by group 3,4, and 5 about the last FLIP task. From the presentation provided, there're lot types of infographics more than I imagine, and they all have their own characteristic.

(13/01/2022):
Today, we were introduced to Saul Wurman's L.A.T.C.H. We were shown a presentation of Group 1 and 2 about Saul Wurman's L.A.T.C.H. 

Week 3
(20/01/2022):
Before going to the L.A.T.C.H. explanation, we were recap-ed with our projects briefing. Then, we were given a time to summarize our Grannies recipe.

PRACTICAL
<back to top>

Week 1
(06/01/2022):

Mr. Martin introduced us to motion graphic. Motion : movement, Graphic : graphic. So, motion graphic means graphic in movement. Motion Graphic contains of composition (graphic and typography) and animation (movement + rhythm). Here're some examples provided by our lecturer:
fig 2.1-3, examples, Week 1 (06/01/2022)

Source:
1.3 https://youtu.be/inYq9QfWydU
1.4 https://youtu.be/S4gStLmi1K8
1.5 https://youtu.be/_ri7JMP9KdE
HOW TO MAKE IT?
Here're some steps to make motion graphic:
  1. Write a Script That Tells a Story. 
  2. Storyboard While You Brainstorm the Visual Treatment. (storyboard: sequence of sketches for visual references of the motion graphic) (pre-visualisation: breakdown the scene and running times)
  3. Take Your Storyboards into Design. 
  4. Animate the Final Designs.
  5. Moodboard!!! 
Here're some example of questions to guide:
fig 2.4, questions, Week 1 (06/01/2022)

Week 2
(11/01/2022):

Mr. Martin taught us about Motion Graphics again. So, what's the difference between motion graphic and animation? What're the things that make them different?

ANIMATION VS MOTION GRAPHIC

The difference between animation and motion graphic are the storyline. Motion graphics aren't driven by characters of storyline. There're no need to mimic body movement or facial expression. They mostly focused on graphic elements, shape, and text movement. They're mostly used for ads, television promotion, explainer video, animated logo, etc. 
ANIMATION EXAMPLE
fig. 2.5, animation example, source; (https://images.app.goo.gl/iQ1ZAd7d7E71JiwbA), Week 2 (12/01/2022)
MOTION GRAPHIC EXAMPLE
fig. 2.6, motion graphic example, source; (https://images.app.goo.gl/nwcBKsPQKATM9CXd9), Week 2 (12/01/2022)

Based on the lecture given, motion graphics anatomies are divided into 4:
  • Text Animation : kinetic typography
  • Graphic Animation : graphic elements
  • Chart Visualization
  • Character Animation : wiggling
In this lecture, we're focused on kinetic typography.

KINETIC TYPOGRAPHY

Kinetic typography can be divided into:
  • Word to word
fig. 2.7, word to word example, source; (https://youtu.be/Kt8vGm8_ekQ), Week 2 (12/01/2022)
  • Paragraph
fig. 2.8, word to word example, source; (https://youtu.be/kD73GVXwLXg), Week 2 (12/01/2022)
  • Mixed both
fig. 2.9, mixed kinetic typography example, source; (https://youtu.be/kD73GVXwLXg), Week 2 (12/01/2022)

HOW TO MAKE KINETIC TYPOGRAPHY?

After that, we moved on to the demonstration on how to create kinetic typography. This week, Mr. Martin still introduce us to a single word animation. We were asked to make while following our lecturer's demonstration. Here's mine:
fig. 2.10, single word motion, Week 1 (06/01/2022)

Then, in the end of the lecture, Mr. Martin assigned us to create a final composition for the PINK song, so we can practice while being explained in the next meeting.

(13/01/2022):
First thing first, Mr. Martin asked us to download an audio clip for the PINK song. Then, Mr. Martin demonstrated us how to make the paragraph kinetic typography animation. Using the composition we had, we were asked to make the animation using techniques that have been taught:
fig. 2.11, single word motion, Week 1 (06/01/2022)

So, this is my first attempt:
fig. 2.12, paragraph motion 1, Week 2 (13/01/2022)

Then, I made my second attempt because I want it to be using various setting (landscape-portrait):
fig. 2.13, paragraph motion 2, Week 2 (13/01/2022)

I also tried the squared layout version (the typography) and tried to animate it. It looked like this:
fig. 2.14, paragraph motion 3, Week 2 (13/01/2022)

Week 3
(20/01/2022):
Mr. Martin introduced us to Motion Graphic Chart. There're lots of chart visual; bar, pie, line, graph, etc. We're focusing on 3 types of them:
fig. 2.14-16, chart motion , Week 3 (20/01/2022)
  1. Pie / Donut Chart (left)
  2. Bar Chart (right)
  3. Line Chart (middle)
Then, we're also taught the steps on how to make them.

INSTRUCTIONS
<back to top>


Information Design Module Information Booklet

Exercise and Assignments Brief

MIB EXERCISES:

✅ Find some box of miscellaneous things around us and divide them based on something : due 14 January 
✅ Make a Pokemon / Dinosaur / Bestiary / any infographics digitally using L.A.T.C.H. : due 21 January

WEEK 1 TASK:
  • Individual:
✅ Recommend 3 Professional Motion Graphics on blog with Rationals & Inspirations.
✅ Install After Effects & Illustration.
  • Group:
✅ Create Mood board.
✅ Style Frames (still, not animated) for 3 most “challenging” scenes.

WEEK 2 TASK:
  • Individual:
✅ Practise AE’s text animation: 
(posted on practical)
  1. Single Word Kinetic Typography : https://youtu.be/b1_p2qQf_Ts (TUE)
  2. Paragraph Kinetic Typography : https://youtu.be/kD73GVXwLXg (THU)
  • Group:
✅ Split Lyrics for text animation (TUE):
✅ Breakdown Final Project’s Script (THU):

WEEK 3 TASK:
  • Individual:
✅ Create motion graphic chart (5%) https://docs.google.com/spreadsheets/d/18sbnw4Qdk_lGpXZWIOww-tljvKXfW1PRq7BbEE5RVqU/edit?usp=sharing
  • Group:
✅ Finalize Kinetic typography MV
✅ Final Project’s Storyboarding (before Tue)

FLIP TASK:
Week 1:
  • Individual:
✅ Pick one free online infographic tool and re-design one poorly constructed infographic poster through your own experimentation with the selected tool. Record the process into the your blog and present the redesigned infographics with before and after comparison and their personal rating + review of the online tool for:
    • Difficulty, intuitiveness
    • Usefulness
    • Design templates, choices
  • Group:
✅ In your group, find out what are the different types of infographic + the kind of information they’re applicable for + an example for each identified type.

Week 3:
✅ FLIP Presentation Task - FLIP topic 3: Miller's Law (Chunking)

FLIP Classroom

TOPIC 1: DIFFERENT TYPES OF INFOGRAPHICS AND ONLINE TOOLS
Week 1
(06/01/2022):
Thus, we were assigned some group tasks to do, it's about finding out the difference of any kind of infographics and online tools.

FLIP INDIVIDUAL TASK:
I found this infographic online. It's about trading.
fig. 3.1, Original Infographic, source; (https://www.akademijl.com/2020/05/15/5-rules-of-trading/), Week 2 (11/01/2022)

I wanted to make it to look more visual and interesting, so I used Canva.
fig. 3.2, Remade Infographic, Week 2 (11/01/2022)

DESIGN LINK: https://www.canva.com/design/DAE1Vnp_VDU/pjBXjygs7m7biYM47xfLyA/view?utm_content=DAE1Vnp_VDU&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink
fig. 3.3, Canva Features, Week 2 (11/01/2022)

For an amateur designer like me, Canva is a very recommended platform to make design graphics, especially infographics. As you can see in fig.2.13, they offer various templates based on our need. They also provide users with lots of variety of graphics, or even real photos. When we select a photo, they give us a feature of "magic recommendation," which recommend us a similar things / style for us to look. The UI of Canva is easy to understand too. I'm not an expert of using Canva but surely, this platform is really helpful. The choices of typefaces, graphics, templates, colors are limitless.

FLIP GROUP TASK:
This is the final result of my group's video:
fig. 3.4, Group 4's Infographic Video, Week 2 (11/01/2022)

TOPIC 2: SAUL WURMAN L.A.T.C.H.
Week 2
(13/01/2022):
We were shown a presentation of Group 1 and 2 about Saul Wurman's L.A.T.C.H. They stand for Location, Alphabet, Time, Category, and Hierarchy.

Example for L.A.T.C.H from lecturer:
fig. 3.5, LATCH example, Week 2 (13/01/2022)

This is the example of Group 2's presentation:
fig. 3.6, LATCH presentation, Week 2 (13/01/2022)

EXERCISES

1.Week 1 Task : 3 Professional Motion Graphics

    1. Something Just Like This - The Chainsmoker & Coldplay
fig. 4.1, motion graphic 1, Week 1 (04/01/2022)

This video offers a good concept of kinetic typography. It's one of my favorite song. The lyric music video brings up a childish concept using chalk styled font and doodles; which can show a "dreamy" concept in the song.

    2. Lagu Hari Ini - GAC
fig. 4.2, motion graphic 2, Week 1 (04/01/2022)

It's a local song from my country, and the motion graphic style are something that elegant and aesthetic. It uses that kind of style because the song itself means something like "beauty". The color scheme uses mostly warm color because it suggest positive feeling. 

    3. Big Bang - Weird Genius (ft. Letty)
fig. 4.3, motion graphic 3, Week 1 (04/01/2022)

The third motion graphic choice is a local song of my country named Big Bang. The motion there are using graphics, not typography. The vibes shown are space, referring to the music meaning. It shows a great motion, the graphical transition which can let people now the story about the song.

2. Exercise 1: Quantifiable Information (Week 1)
In the week 1, we were asked to find some miscellaneous things, for example; a jar of candy, a jar of buttons, stationeries, tools, etc. Thus, I searched some items in my room, and I couldn't find anything else other than stationaries. So, here they are:
fig 4.4, stationaries 1, Week 1 (04/01/2022)

After that, I divided them based on the color. To be honest, this's one of some activities that I do when I'm bored. It's so fun. So, this is the preview after I sort them based on color:
fig 4.5, sorted stationaries 1, Week 1 (04/01/2022)

I thought it looked effortless and so little, so I try to find more pen and markers around my house. Then I add them:
fig 4.6, stationaries 2, Week 1 (04/01/2022)

I identified them and again, I sort them based on colors. Here they go: ^^
fig 4.7, stationaries 2, Week 1 (04/01/2022)

Then, I arranged them similar like rainbow colors, so we'll know the division of warm color scheme and cold. color scheme, and which one is neutral color.
fig 4.8, arranged stationaries 2, Week 1 (04/01/2022)

After that, to deliver the data, I arranged them into a circular shape. Then, I place the data into a table.
fig 4.9, shaped 1, Week 1 (05/01/2022)

I thought it need some more adjustment, and the table seems to be unreadable. So, I changed it into this:
fig 4.10, shaped 2, Week 1 (05/01/2022)

As in the first week I asked for feedback, Ms. Anis recommended me to mark the area of division, so the separation is clear between the black and navy blue. Thus, I create it using ribbon to look neat:
fig 4.11, shaped 3 (final), Week 1 (05/01/2022)

3. Motion Exercise (SINGLE WORD - PARAGRAPH)
We were asked to make while following our lecturer's demonstration. Here's mine:
fig. 2.10, single word motion, Week 1 (06/01/2022)

So, this is my first attempt for the paragraph motion animation:
fig. 2.12, paragraph motion 1, Week 2 (13/01/2022)

Then, I made my second attempt because I want it to be using various setting (landscape-portrait):
fig. 2.13, paragraph motion 2, Week 2 (13/01/2022)

I also tried the squared layout version (the typography) and tried to animate it. It looked like this:
fig. 2.14, paragraph motion 3, Week 2 (13/01/2022)

4. GROUP TASK : KINETIC TYPOGRAPHY
We were tasked on making a kinetic typography of a song. First, we searched for some songs:
fig. 2.15, suggestion 1, Week 2 (11/01/2022)
fig. 2.16, suggestion 1, Week 2 (11/01/2022)

But the lyrics for 1st song is too long and 2nd is a little bit inappropriate. So, we searched for another song. I remembered my favourite song back when I was little, then I recommend it to them:
fig. 2.17, suggestion 3, Week 2 (11/01/2022)

Thus, we divided into 5 parts:
fig. 2.18-19, part divisions, Week 2 (11/01/2022)

We decided our mooodboard and motion style. Our group leader, Hussain, recommended some style to choose on:
fig. 2.20, suggestion 1, Week 2 (12/01/2022)
fig. 2.21, suggestion 1, Week 2 (12/01/2022)
fig. 2.22, suggestion 1, Week 2 (12/01/2022)

We've agreed to use the first style animation, so we started to make the color scheme from some inspirations:


fig. 2.23-26, suggestion 1, Week 2 (12/01/2022)

Our typefaces: Staatliches
We did a group call to decide the overall idea. It was something like this:
fig. 2.27, suggestion 1, Week 2 (12/01/2022)

So, I started to make my part. I mostly use the motion that Mr. Martin have taught. Here's the result:
fig. 2.28, my part, Week 2 (16/01/2022)

This is the final output after it have been compiled:
fig. 2.29, compiled final, Week 2 (19/01/2022)

5. Exercise 2: L.A.T.C.H (Week 2)
On the week 2 we were proceeding to our second exercises, L.A.T.C.H Infographic about Pokemon / Bestiary / Dinosaur / anything. I choose Pokemon, because I really like it.

On the week 2, I started to breakdown on what I want to make, about Pokemon:
fig 4.12, mind mapping, Week 2 (12/01/2022)

I breakdown all my ideas, thus, I found out which one I want to talk about. I planned to do a specified subject, which is focused on Pokemon in only 1 area; Turnback Cave. The L.A.T.C.H will be:
  • Location : The area (first pillar, second pillar, etc)
  • Alphabet : The Pokemon's Pokedex number 
  • Time : Pokemon day and night
  • Category : Pokemon types
So, I made this sketch idea. I make like a some kind of floating island to show as if the earth is ripped and broken down into some part. It was inspired from this:
fig 4.13, inspiration 1, source; https://images.app.goo.gl/TFepkqverWrbwzrd7, Week 2 (12/01/2022)
fig 4.14, inspiration 2, source; https://images.app.goo.gl/irPGd58RwSuqwMkPA, Week 2 (12/01/2022)

Thus, I finalize my concept, and here's how it looked like:
fig 4.15, inspiration 2, source; https://images.app.goo.gl/irPGd58RwSuqwMkPA, Week 3 (19/01/2022)

Inspired from the environment design of the cave, 
fig 4.16, inspiration 2, source; https://images.app.goo.gl/irPGd58RwSuqwMkPA, Week 3 (19/01/2022)

I began to make the color palette, using the help of coolors. I created an earth inspired scheme.
fig 4.17, inspiration 2, source; https://images.app.goo.gl/irPGd58RwSuqwMkPA, Week 3 (19/01/2022)

First, I created all the layout of the infographic. I used some typefaces that I download online; DeadFontWalking and also a Pokemon Unown font; unown.
fig 4.18, layout, Week 3 (20/01/2022)

Then, I started to make the island in both photoshop and Illustrator; illustrator for making the clear line, Photoshop for creating the color, and masking.
fig 4.19, terrain, Week 3 (20/01/2022)

Then, I started to adjust things in Adobe Illustrator.
fig 4.20, adjusted terrain, Week 3 (20/01/2022)

After that, I added the Pokemon:
fig 4.21, terrain, Week 3 (20/01/2022)
fig 4.22, reference, Week 3 (20/01/2022)

Also, I changed the color to show day - night, also added some details:
fig 4.23, day night, Week 3 (20/01/2022)

Then, adjust a bit more, and here's my final:
fig 4.24, final, Week 3 (20/01/2022)
fig 4.25, final (PDF), Week 3 (20/01/2022)

DATA REFERENCE:

StrategyWiki. (2016, August 1). Pokémon Diamond and Pearl/Turnback Cave — StrategyWiki, the video game walkthrough and strategy guide wiki. https://strategywiki.org/wiki/Pok%C3%A9mon_Diamond_and_Pearl/Turnback_Cave

Turnback Cave - Bulbapedia, the community-driven Pokémon encyclopedia. (n.d.). Bulbapedia. https://bulbapedia.bulbagarden.net/wiki/Turnback_Cave 

6. MOTION CHART (Week 3)

In week 3, we were randomly tasked to make:
A: donut chart
B: pie chart
C: bar chart
D: line chart

I got A, donut chart. First, I made the basic shape using stroke and trim paths:
fig 4.26, base, Week 4 (23/01/2022)

Then I make it moving and just copy and adjust the "start" so it become a chart. Finally this is my output:
fig 4.27, motion (GIF), Week 4 (23/01/2022)
fig 4.28, motion (Video), Week 4 (23/01/2022)

I was so excited and I want to try to add typography:
fig 4.29, motion & typography (GIF), Week 4 (23/01/2022)
fig 4.30, motion & typography (video), Week 4 (23/01/2022)

I thought it looks so effortless, so I tried to add some more, using data from Worldometer; "Population by Country 2022)", and so, here're my final:
fig 4.31, donut chart (final), Week 5 (30/01/2022)
FEEDBACKS

Week 1: 
Nice and neat, will be better if there's a separation between colors and neutral colors (mark/sign it).

Week 3: (group) 
The kinetic typography deserve higher mark, because it's complete. Although each parts are not completely the same, it still shows consistency.

Week 6: 
All well done, submit them.

REFLECTION 

This exercises for 3 weeks made me learn more about infographic. Also, for technical, I learnt new skill on making kinetic typography. It was a lot of fun in my opinion, it gives a satisfactory when I succeed on making them on beat. I also learnt that it's better to do things little by little rather than postponed it.

Comments

Post a Comment

Popular posts from this blog

How to Create Jump Link

-
Image
What's a Jump Link? Jump Link or sometimes known as Anchor Link is a link that can direct user to a specific section of the post. Steps: Prepare your blog Add the HTML code Copy Permalink / Link Add the permalink + # Breakdown: 1. THE BLOG To create a jump link, first, create the documents, so it'll be easier to plan the jump link 2. HTML Add html code:  <span id="LIST"></span>  on a specific part where you want to jump to 3. PERMALINK Open permalink and copy the link 4. JUMP LINK Choose the text to place the link, then paste it like this: Link#NAME https://abigailkartikadarmowinoto.blogspot.com/2021/12/how-to-create-jump-link.html#NAME
Read more