Information Design - Exercises , Flip Classroom & Practical

11/01/2023 - 22/02/2023
Week 1-Week 7 
Tan Pei Yun / 0345386
Information Design /Bachelor of Design in Creative Media
Exercises , Flip Classroom & Practical 

---

Instructions

Breakdown : 

60% Continuous Assessments (Individual)

• MLO 1: Exercises
• Exercise 1: Quantify data (10%)
• Exercise 2: L.A.T.C.H infographic (10%)
• MLO 2: Project 1 
• Instructable poster (20%)
• MLO 3: Project 2
• Exercise 3: Kinetic Typography (5%)
• Exercise 4: Weather Forecast (5%)
• Animated instructable poster (10%)

40% Summative Assessments

• MLO 4: Final Project (Group)
• Animated infographic video (30%)
• MLO 4: E-Portfolio (Individual)
• Blog (10%)

Exercise 1 - 

Quantifying & Visualize data (10%)

For our first exercise, we are required to count our chosen items, in my case, coins ! I then arranged them into a presentable layout or chart. We were reminded to keep it simple, present the information as clear as possible and as interesting as possible. Aesthetic is the key but so does information delivery!

Fig  1.0 Arrangement of coins 

Fig 1.1 Final Quantifying & Visualize data

After searching around my room I had found my pouch that filled with coins then I gathered the coins and sorted and tabled them according to the new and old version of the 10 sen , 20 sen and 50 sen coins. I decided to remain the simplicity form and arrange them into shape of flower petals and drew the stem and leaf into swirl. 

Exercise 2 - 

L.A.T.C.H Infographic (10%)

Visual Research 

Pikachuuuus that relate to my happy emotion 

Fig 2.0 Example of list of categories of Pokemon 

(source : https://bulbapedia.bulbagarden.net/wiki/Pok%C3%A9mon_category#List_of_categories )

I was super excited when I saw there was an assignment about making an infographic about Pokemon!  I rate myself as a small fan of Pokemon since I watched it as a kid and it can be considered as my childhood memory too. It's probably because it's a first generation and a lot of people still like it because of nostalgia. Pikachu, of course, is from the first generation, and it's also the generation that has the most famous starters.

Fig 3.0 Breakdown of generation 1 Pokemon

Pokemon Gen 1 Starters :

• Pokemon Red
• Pokemon Green
• Pokemon Blue
• Pokemon FireRed
• Pokemon Leaf Green
• Special Edition Pokemon Yellow

There are different type of pokemon in different category ,While doing the research, I found that there are 1008 of pokemon in total , but due to large amount , I will be focusing on generation 1 Pokemon as I am more familar with the gen 1 types of pokemon .The first generation of the Pokemon franchise features the original 151 fictional species of creatures introduced to the core video game series in 1996 Game Boy game Pokemon Red and Blue.

Fig 4.0 Pokemon type chart

Starter type in Pokemon :  

• Grass is super effective against Water-types, resists Water attacks, and is weak against Fire attacks.
• Fire is super effective against Grass-types, resists Grass attacks, and is weak against Water attacks.
• Water is super effective against Fire-types, resists Fire attacks, and is weak against Grass attacks.
• Normal moves are not super effective against any Pokemon , but normal type are weak to fighting type Pokemon 

Poster visual reference 

Fig 4.0 Pokemon infographic poster

For inspiration, I looked at some basic versions of pokemon infographic posters before going on to more complicated versions. My final decision was to remain basic and focus on only four starter types of Pokemon which are grass, fire, fairy, and water. In class , Mr Martin also showed us lots of good example from previous senior which is also a good for inspiration.

Progress

1. Background

Fig 5.0 Inspiration from Pokemon Game 

Fig 5.1 Background Progress in Procreate 

As I was looking for background ideas for the infographic poster, I realized most Pokemon game covers use sky backgrounds, so I got the idea to do one as well. I used cloud brushes that I had in Procreate and pasted them together in a surrounded manner. My next step is to use Adobe Photoshop and Illustrator to do the symbols after I have finished the background. 

Fig 5.2 Background Progress in Photoshop 

Moving on to the next step in Photoshop, I added the background that I made as a base and using the Pokemon map that I found from their game website in the Pokemon scarlet and violet (due to limited of time to do the map so I decided to use their original map for the infographic poster)

Pokemon map Image source : https://scarletviolet.pokemon.com/en-us/news/the_paldea_region/

Fig 5.3 Added the chosen Pokemons to the poster

Next, I added the chosen 4 types of Pokemon to the poster. All of the Pokemon with its number are : 

Grass type -  

Balbasaur (#0001) > Ivysaur (#0002) > Balbasaur (#0003)

Fire type -  

Charmender (#0004) > Charmeleon (#0005) > Charizard (#0006)

Water type -  

Squirtle (#0007) > Wartortle (#0008) > Blastoise (#0009)

Fairy type -  

Cleffa (#0173) > Clefairy (#0035) > Clefable (#0036)

2. Symbol

Fig 6.0 18 types of Pokemon 

Fig 6.1 Create the Symbol in Illustrator 

While doing research, Pokemon do have their own symbol and each symbol represent different types of Pokemon type. I decided to create my own version of symbol of the 4 Pokemon type in grass, fire,water and fairy in using illustrator. 

Fig 6.2 Added the bevel & emboss in Photoshop

In photoshop, I added the symbol that I had made and add bevel and emboss to create like a "3D" effect to stand it out the poster. I show the differences of the symbol after adding the effect.

Fig 6.3 Add the text and pokemon numbers

After everything was arrange in order with the Pokemon evolution, I also add each of their name and number to complete the total 4 LATCH Principle (Location , Evolution , Types and Number) after that I able to saved it and submitted to drive. 

Fig 6.4 Saved and uploaded to drive

 

Final Outcome of  L.A.T.C.H  Infographic 

Fig 7.0 Final Outcome of  L.A.T.C.H Infographic in JPG

Fig 7.1 Final Outcome of  L.A.T.C.H Infographic in PDF

---

Information Design - Flip Classroom

Week 01 (12/01/2023) 

Flip 1 - Different types of infographic & online tools 

During week 1, we had our very first flip classroom session , where we split into a group and have to find out what are the different types of infographic + the kind of information they’re applicable for plus an example for each identified type. Below are the google slides we have made , and beside we also have an individual task where we need to redesign a poorly designed infographic poster that we personally chosen and redesigned it using infographic tools like Canva.

Individual task 

Pick one free online infographic tool and re-design one poorly constructed infographic poster through your own experimentation with the selected tool

Fig 8.0  Chosen Infographic Poster 

After searching for quite a while to looking for a poorly constructed infographic poster, here are the one I chose. There a few reason :

Fig 8.1 Close-up Poster Look 

Colour Scheme

Although it use green to represent the natural or trees theme but somehow it look uninteresting and the choice of colour that adds to the clutter while misleading and distracting the reader.

Complicated Comparison 

Noticed there's too many information in this poster (information , chart and illustration) all over the place which causing the reader to do more work to look at the poster

Fig 8.2 Progress in Canva 

In this step, I had used Canva to help me to redesign with its template given, there are quite amount of nice and aesthetic template and element in Canva which was really helpful to make the inforgraphic poster in a short time.Finally, I had choose one and re-arrange their information to make it look more appealing. Below are the final infographic design :

Fig 9.0 Final Infographic Design 

Week 02 (19/01/2023) 

Saul Wurman's L.A.T.C.H 

During week 2 , we have to present an explanation on the topic and provide examples or scenarios of what information best utilized with each principle. Below are the google slides we have made :

Week 03 (26/01/2023) 

Miller's Law : Chunking 

During week 3 , finally will be our group 5 turn to present what we had understand about Miller's Law. Beside Mr Hafiz also showed us about the video that are some game that can trained with our brain using the chunking tricks. From my understanding , Miller's Law it's just like organising and presented the information and it also can be seen when we visit a website or access an application. While the user will be presented with lots of information on the page. As a result, we must try to learn to operate the website that we are aiming for. From navigation, layout, or slider. Everything is set by the designer so that users are not burdened by the amount of information they have to digest. Therefore, we must try to arrange and accommodate so that users are easy to use or digest information available on our products.

Fig 10.0 The Chunking Tricks - Brain game

Week 04 (02/01/2023) 

Manuel Lima's 9 Directives Manifesto

In week 4 , we get to know about Manuel Lima's 9 Directives Manifesto, that is a set of principles for effective visual communication and information design. Manuel Lima is a designer, author, and speaker who specializes in data visualization and information design. His manifesto outlines nine key directives that he believes designers should follow in order to create effective and impactful visual representations of data.

Manuel Lima's 9 Directives Manifesto encourages designers to create visualizations that are rich in detail, provide context, highlight the most important information, and tell a compelling story. By following these principles, designers can create visualizations that are not only aesthetically pleasing but also informative and impactful.

Information Design - Practical 

Week 2 - Kinetic typography music video 

Fig 11.0  Practical - Kinetic Typography Demo - P!nk So what 

During week 2, we were given a practical weekly task where we learnt about how to do the simple text animation in using null object in After effects.

First Trial 

Fig 11.2 Week 2 Practical (first trial)- P!nk So what 

The first trial of the outcome wasn't something I'm looking for plus it was my very first time after using After Effect for quite awhile and I began to redo it until called it as my final outcome. 

Fig 11.3 Progress in After Effect P!nk So what 

Final Outcome of  Kinetic typography - P!nk So What

Fig 11.4 Final Kinetic Typography - Rock Star Demo

Week 4 - Character Animation 

Progress :

Fig 15.0 Separate the layers in Illustrator 

During week 4, we have a tutorial and practical session where Mr Martin showed us a recorded tutorial on how we can animate the vector into few different effect like Bounce effect , wiggle , puppet movement. 

Fig 15.1 Wiggle - Group layers (Palm and Sleeve)

Fig 15.2 Wiggle - Group layers (Palm and Sleeve)

Final Outcome of  Vector Animation 

Fig 15.3  Final Vector Animation (Bounce effect + wiggle +puppet)

Reflection 

Through these exercises, I learnt the basic on how to organise information. The coin one was especially fun, it felt like a throwback to my primary class in school. It was enjoyable while doing the L.A.T.C.H especially the part where we can do something about Pokemon.  Overall ,the tasks were relatively simple, being the first 2 exercises of this module for this semester.