FLIP Classrooms

|| Bertrand Alden Gani / 0370471

|| Information Design

|| Bachelor Of Design In Creative Media

|| FLIP Classrooms

TABLE OF CONTENTS

1. Instructions

2. Group Exercises

3. Individual Exercises

4. Reflection

INSTRUCTIONS

Fig 1.0 MIB

<< back to top >>

GROUP EXERCISES

Week 1 - Infographics

In this exercise, we were tasked to create a presentation slide about identifying different types of infographics, the kinds of information they are suitable for, and an example for each type.

So we identified 6 types of infographics:

- List Infographic

- Statistical Infographics

- How-to Infographics

- Timeline Infographics

- Comparison Infographics

- Process Description Infographics

I did the Comparison Infographics part. Based on my research, I learned that Comparison infographic is a visual that puts two or more things side by side so people can quickly differentiate them. It is often used in education, marketing, UI/UX design, business, and research to visually compare two or more options side by side.

Here is our presentation slide:

Group E Greeners Group Task

In the next day, we were instructed to create another presentation slides about the good, the bad, and the importance of information design. So we have to find 3 example of good infographics and 3 example of bad infographics. Then we need to analyse them and give explanation why we think they are good or bad.

I did the 2nd bad example part. It is a poster about SDG Goals, I think that the design is too cluttered and present too many information at once which can be overwhelming. Beside that, it also uses poor color contrast especially in some parts making some texts not very readable. The color palette also doesn't match with the target audience of gen z, I think it's more suitable for children.

Here is our presentation slide:

Green

Week 2 - L.A.T.C.H

During this week, we learned about L.A.T.C.H (Location, Alphabet, Time, Category, and Hierarchy) principles. 

We were tasked to present an explanation on the topic and provide examples or scenarios of what information best utilized with each principle. 

So for my part, I did the L(Location) principle. I began researching about the topic. The L(Location) principle means organizing data by place or geography. It's commonly used in maps, store branches, travel guides. For the example, I chose food delivery app and office building directory board.

Here is our presentation slide:

Group E green

Week 4 - Miller's Law

For this week, we learned about Miller's Law. Miller’s Law suggests that people can hold about 7±2 items in short-term memory, so grouping information improves memory and understanding.

Chunking

Chunking breaks information into small, meaningful groups, making it easier to understand and remember in UX and design.

Next, we were tasked to find good and poor example of Miller's Law application in well designed infographics, UI/UX, and processes.

For my part, I did the Miller's Law application in well designed infographics. So I began searching for infographic examples and found 2 examples. For the good example, it uses Miller's Law/Chunking by grouping the information into 4 categories to reduce cognitive load. As for the poor example, it didn't use Miller's Law/Chunking at all so the information presented is cluttered.

Here is our presentation slide:

Week 4 FLIP: Miller's Law

Week 5 - Manuel Lima's 9 Directives Manifesto

This week, we learned about Manuel Lima's 9 Directives Manifesto.

1. Form Follows Function: "the purpose should always be centered on the explanation, which in turn leads to insight." Start with a Question: Your work should always be driven by a query
2. Interactivity is Key: allows for investigation and learning through discovery
3. Cite Your Source: always disclose where your data originated
4. The Power of Narrative: Humans love stories
5. Do Not Glorify Aesthetics: "should always be a consequence and never a goal"
6. Look for Relevancy: why are you visualizing the information?
7. Embrace Time: Time is difficult to work with but rich
8. Aspire for Knowledge: "A core ability of Information Visualization is to translate information into knowledge. It's also to facilitate understanding and aid cognition."
9. Avoid Gratuitous Visualizations: "should respond as a cognitive filter, an empowered lens of insight, and should never add more noise to the flow"

We were tasked to present an explanation on this topic and find one example of how to best display and utilize design for each of the directives. We also needed to present one good designed infographic that best illustrate of the 9 directives for information visualizations and one poorly designed infographics that failed to address the directives.

For my part, I did the Form Follows Function and the good designed infographic example as well as several others. So I started doing research.

Form Follows Function

“The purpose should always be centered on the explanation, which in turn leads to insight.”— Manuel Lima. Design should be driven by a clear question. The function determines the visual form. Without a clear purpose, visualization becomes decoration instead of insight.

Here is our presentation slide:

Green E Group - Manuel Lima's 9 Directives Manifesto

<< back to top >>

INDIVIDUAL EXERCISES

Week 1

For this exercise, I were instructed to find one poorly constructed infographic poster, then I needed to redesign them in Canva.

So I began by searching for one poster that I think is poorly constructed. This is the poster that I chose to redesign:

Fig 2.0 Poorly Constructed Poster

Here are the reasons why I think that the poster is poorly constructed:

- Unsuitable Font Choice

Overall, I think the font choice doesn't really fit well with the theme of gaming. Especially, the font inside the white box, it's looks so out of place.

- Unsuitable Main Color Choice

The light blue as main color does not represent the gaming theme at all and it looks not very engaging.

- Unsuitable Image Choices

Some visual elements, such as emojis, make the infographic appear less professional.

- Poor Color Contrast

The use of white text on a light blue background creates low contrast, making certain sections difficult to read.

- Poor Hierarchy

I think that the hierarchy can be improve for example the "boys" and "girls" could be differentiated with different color to make reader easier to identify them.

I used Canva for the redesign and I chose this template as my base because it's game-themed.

Fig 2.1 Template

But I make some adjustment to it, for example choosing a different typeface that are more pixelated, as well as adding some "neon" colors. Here is the final redesigned poster:

Fig 2.2 Final Redesigned Poster

Week 3

In this week, the lecturer demonstrated tutorials on how to do chart animation. There were 4 kind of charts, namely Pie Chart, Donut Chart, Line Chart, Bar Chart. So I followed each steps from the tutorial video and here is the result:

Fig 2.3 Pie Chart Animation

Fig 2.4 Donut Chart Animation

Fig 2.5 Line Chart Animation

Fig 2.6 Bar Chart Animation

Week 4

During this week, the lecturer demonstrated tutorials about animating vector. First, I downloaded the vector file that the lecturer have provided. Then I opened it in Adobe Illustrator and separate each object to different layers. After that I proceed in Adobe After Effect and imported the vector file. The lecturer taught us animating using scale, position, etc. He also taught us several other features such as motion blue, wiggle, and puppet tool. Here is the result:

Fig 2.7 Vector Animation

<< back to top >>

REFLECTION

<< back to top >>