Information Design / FLIP Classroom & Lectures

1.3.2022 - 02.03.2022 (Week 1 - Week 5)

Audrey Gracia Djohari / 0348120
Information Design
Bachelor of Design (Hons) in Creative Media / Taylor’s University

FLIP Classroom

JUMP LINKS

INSTRUCTION

LECTURES

WEEK 1 (1/2):

On the first day of Information Design class, we were briefed about the MIB by Miss Anis. She also explained all the upcoming projects and exercises for this semester.

Figure 1.0: Week 1 Lecture

After the module briefing, we started doing our first exercise: Quantify & Visualize Data. The documentation of my progression is in the Practical part. At the end of the class, we were separated into groups to discuss our group project for the whole semester.

WEEK 1 (2/2):

Introduction To Information Visualization

In nformation Design class we learn about how to display information visually. Visual information culture has actually existed since a long time ago going back to ancient Egypt and other cultures that used symbols.

Many fields like medicine, science, mathematics rely on visual information. Part of it is caused by how humans perceive information. 40% of humans on this planet respond more to visuals than text. That's when we as designers take part and do our job.

Figure 1.1: Week 1 Lecture

As a designer, when it comes to visualizing information, our main job is to make the complicated uncomplicated. Make the information simple and comprehend. On top of that, information design seeks to add knowledge to the information it displays through spatial, quantitative, and chronological relationships. Easy ways to create good and simple information design: Word Cloud, Mindmaps

Figure 1.2: The Importance of Visual Content

Figure 1.3: Charles Minard's 1869 chart showing the number of men in Napoleon’s 1812 Russian campaign army, their movements, as well as the temperature they encountered on the return path. Lithograph, 62 x 30 cm

WEEK 4:

Today, Miss Anis conducted a presentation about Misinformation in America.

Figure 1.4: America's Misinformation Crisis, By Tom Patterson

FLIP 1

WEEK 1: FLIP 1 (The Types of Infographics)

- Group Task

Instruction

In your group, find out what are the different types of infographics + the kind of information they’re applicable for + an example for each identified type.

Group 4:

1 0349423 Catherine Temba
2 0348120 Audrey Gracia Djohari
3 0346592 Nitish A/L Naveen Kumar
4 0349649 Cecilia Kuolin Supardi
5 0346821 Nor Alya Adriana binti Nor Azhar
6 0349913 Arwinda Nurul Izza
7 0344694 Zenab asif akberali

FLIP 1 Research & Script

Figure 2.0: Research & Script

FLIP 1 Presentation Slides

Figure 2.1: Final Slides in PDF

FLIP 1 Presentation Video (Youtube)

Youtube Link: https://youtu.be/f9G8zfZPuaI

Figure 2.2: Final Video on Youtube

- Individual Task

Instruction

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 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

Infographic Design Tool Selection:

Process

First I searched for any badly designed infographics on the internet. I saved several infographics so I can analyze which one I could design better.

Figure 2.3: Searching for Worth-Redesigning Infographic

And I decided to eliminate them into these 3 designs:

#1 Bad Infographic
This one is about "How Bad Weather Affects UK Businesses". It's more like a data visualization infographic. The whole color palette is not harmonious in my opinion. And there are also too many paragraphs so it makes the viewer easily tired and bored while reading it. I think some of the sentences can be eliminated and changed into simpler words. Some important words can be highlighted or emphasized with bigger font size or a different color. Other than that, the placement of the numeral datas can be better. The word "But Only" in the middle can be better designed.

Figure 2.4: #1 Bad Infographic

#2 Bad Infographic

Looking at the whole design and content, it looks like a comparison infographic. This one is about "GMOs" (FYI: GMO is genetically modified organisms). At the top of the frame, the title is cropped and it says "Side Effects". However, there is no information on what is being compared. After I read the whole paragraph, turns out the left group (green color) is about the good side effects when humans don't use GMOs. While the right group (brown color) is about the bad side effects of using GMOs. And the 3 icons in the middle indicate who is affected.

First of all, I think the design can be better by adding the title for each group. Secondly, The long paragraph can be reduced into single sentences in the form of bullet points so the viewer don't get easily bored. Also, important words can be emphasized by using bigger font size and different colors. Other than that, the selection of font and design elements can be more modern and simple.

Figure 2.5: #2 Bad Infographic

#3 Bad Infographic

This third infographic is Statistical Infographic. It's about "GMO: Our right to know". (FYI: GMO is genetically modified organisms that is usually found in package foods) Basically, the whole infographic shows facts and datas about how many people and countries demand labelling for GMO products. And there's a call for action to the viewer to support the organization in pushing the government to start labelling GMO products. However, it's quite difficult to understand the message immediately without reading the whole information. So, I think the title can be changed into clearer message.

Secondly, I think the whole data (the percentage, numbers, etc.) are too crowded. Some of them are even overlapping each other. The design lacks white space. Also, some of the paragraph can be reduced into simpler sentences. Lastly, I think the selection of the color palette and font are not good enough. There are no indication of type expression or any elements that relates to GMO itself. So it's very hard to educate people who does not know what GMO means. I think adding a visual representation of GMO can make people understand the information they are trying to convey.

Figure 2.6: #3 Bad Infographic

Finally, I decided to go with #3 Bad Infographic "GMO: Our right to know". Because I think I can experiment with different types of charts and make a mixed infographic. That would be interesting.

I chose Canva as my design tool because it seems to have the best design templates and I'm quite familiar with how it works. I came across this template that looks so cool and simple. And I can definitely create a statistical and mixed infographic using this template.

Figure 2.7: Original Canva Template

Figure 2.8: Changing the Colors

I decided to go with green and yellow colors because it represents GMO (the content) which relates to organic matters. After finding the right color palette, I proceed to the design process.

I start with the title, I added the phrase "GMO PRODUCTS MUST BE LABELED" because it's what the whole information is about. Calling people to vote and legalize the 37 proposition (which is a law that command GMO products to be labeled)

Next, I designed the definiton of GMO part. I also added a graphic element of a corn with a DNA logo to indicate what GMO means (organism + modified DNA). This is to make the viewer understand the concept easier.

I also make sections for each datas so it's clearer and neater for people to read.

Figure 2.9: Process on Canva

Next, I used a human Pictogram to show the first data: the percentage of the people who want GMOs to be labeled. It's actually 92%, but I want to experiment with pictograms so instead of a number, it shows 9 out of 10 people. I just felt it looks more unique and interesting.

For the second data, I only used a circle and a number with a huge font size so it is emphasized. The third and fourth data, I used Progress Bar so it looks simpler and easy to understand. It shows the percentage of how many USA states and countries in the world that support GMO labeling.

Lastly, I used Bar Chart to show the non-GMO sales in 3-year period.

I eliminated several sentences and only used the most important sentences. I highlighted the important numbers and information with yellow colors.

Lastly, I put the call for action at the very bottom together with the website of the organization. I used a yellow bracket so it's emphasized.

Final Outcome

Figure 2.10: Original Infographic (BEFORE), 01.07.2022

Figure 2.11: Redesigned Infographic (AFTER), 01.07.2022

Design Tool Rating

Difficulty, Intuitiveness (⭐9/10)

I'm definitely in love with Canva. They have the best UI and UX experience. I had the best time designing my infographic in Canva. I can access all of the tools very easily because they put everything in a very comfortable place. It was pretty easy for me to find out how to use things in Canva.

Usefulness (⭐10/10)

Canva is super useful for last-minute design, it can also be a design inspo. They provide so many design templates, from infographics, presentation slides, Instagram story templates, and even logo designs. Not only that, but they also have a presentation feature and it can also be animated. And what I admire the most about Canva is that it can be used by everyone, including those who never do design. I can create so many things in Canva so I really appreciate this useful website.

Design templates & choices (⭐8/10)

Compared to other design platforms, I would say Canva provides the best and most aesthetically pleasing templates. They are more towards modern design and they lean more toward minimalistic style, I like it. What I like about it is how easy it is for me to change the color palette and the elements. They have so many fonts and vector elements, so I can create almost everything. However, if there's one thing they can improve is adding more styles though, sometimes I can't find the design style I want in Canva. They can still add more varieties.

FLIP 2

WEEK 2: FLIP 2 (Saul Wurman's L.A.T.C.H)

Lecture Notes (from classmate's presentations)

LATCH is a concept coined in Mr. Saul Wurman's book titled "Information Anxiety" (1989), describing his proclaimed only ways to organize data, mostly used in infographics.

The 5 elements to organize information (L.A.T.C.H):

Location
Alphabet
Time
Category
Hierarchy

1) Location

The method of arranging information is based on its geography.
Typically presented as maps, bar charts, or line charts to provide visual clarity.

2) Alphabet

To arrange information by the initial letter of the item name in their alphabetical order.
Refers to the organization by alphabetical sequence.
Organizing information alphabetically works really well when people know specific terms and topics they are looking for.

3) Time

The scheme uses the temporal nature of the content of organizing information.

4) Category

A class or division of people or things regarded as having particular shared characteristics.
Use this when the information is similar in importance.
Gather information that belongs to their category

5) Hierarchy

Arranging information by any order.
Examples: size, cost, popularity, percentages, ratings, by order of importance, etc.
Useful to show how one piece of information is connected to another in order of importance & rank.
The hierarchy structure will save people the frustration of looking for ad understanding information.

FLIP 3

WEEK 4: FLIP 3 (Miller's Law of Chunking)

- Group Task

FLIP 3 Research & Script

Figure 4.0: FLIP 3 Script, 01.22.2022

FLIP 3 Presentation Slides

Figure 4.1: FLIP 3 Slides, 01.22.2022

FLIP 3 Presentation Video

Youtube Link: https://youtu.be/kynT17HjtDA

Figure 4.2: FLIP 3 Presentation Video, 01.25.2022

FLIP 4

WEEK 5: FLIP 4 (Manual Lima's Directive Manifesto)

Lecture Notes (from classmate's presentations)

Manuel Lima's 9 Directive manifesto

1. Form Follows Function

A design's function is the main objective of its creation.
Design aesthetics should not be heavier than the information and purpose of the design itself.
The shape (form) that something takes should be chosen based on its intended purpose and function.

2. Interactivity Is Key

Facilitate understanding + analysis of the data
Manipulation of visualization by users to reach desired insights
View topic from different perspectives

3. Cite your source

To avoid misconception you should always cite your source
cite where it originated from
provide a link
show how was it extracted
what was used

4. The Power of Narrative

Humans love stories and storytelling is one of the most effective and powerful methods of learning, discovering, and disseminating information.
Your project should be able to deliver the message and easily summarize a compelling narrative
The simplicity of comprehension: illustrate your work clearly by showing how the relationship between one piece of work and another.

5. Do Not Glorify Aesthetics

It is not a goal, but it is a consequence
Too many colors and visuals will result in a confusing and messy outcome

6. Look For Relevancy

Creators & Designers simplify points of view for the users.
Higher relevancy = higher comprehension, assimilation, and decision-making.
It all depends on the individual and how they consume. However, it would still be much more simple and more convenient for both the creator and designer.

7. Embrace Time

Consider the time when our work is affected by its progress, and use our time wisely so it does not go to waste

8. Aspire for Knowledge

Information -> Knowledge
To ease understanding and assist comprehension.
Provide updated reliable knowledge.
Allows us to completely assess the quality of the information's material.

9. Avoid Gratuitous Visualizations

Convey data without making it more complex than it already is.
Avoid unnecessary or unjustified visualizations that do not shed light on the portrayed subject.
Less is More

Figure 5.0: Good Infographic Design

FEEDBACK

WEEK 2:

(FLIP 1 Presentation) Miss Anis said our Flip Presentation can be a very helpful & popular video on Youtube. She said the information was clearly conveyed and she liked how we put music & professional slides in the video. Overall, she said our work was done well.

(Redesigned Infographic) Miss Anis said my design has a good visual hierarchy, very clear differences in terms of information delivery, simple and straightforward, and it has a proper aesthetic that fits the information theme. She said it's nicely done.

REFLECTION

Experience
FLIP classroom was a new method of learning that I found interesting and effective as I learned a lot about chunking and types of infographics by doing research for this presentation. All of my teammates were cooperative and the presentation went smoothly.

Observations
I observed that there are many types of infographics that we as a designer can design. Which one to use is based on what kind of information we want to deliver. it all goes back to the most important thing in designing an infographic: presenting datas effectively and easy to understand. Secondly, I observed that chunking (breaking big datas into small parts) is a great method to make our information easier to understand.

Findings
I found more ways to design information/datas. And it's a designer's job to find the most effective way. I also found that aesthetic can be a consequences. Too many colors and visuals will result in a confusing and messy outcome.

Audrey Gracia Djohari (0348120)

Search This Blog