Information Design : Introduction

 

Information Designs

Date : Jan/11/2023

Name : Mabuchi Arata

Lecture : Video and Sound Production

Lecturer's name : Martin Chong Yuh Lin

ID : 0351579 

1, Introduction

From This week, I am going to learn about information design which is about the way to tell a stoy with data. Basically, information design can be used as providin much more detailed information with given text message. Unlike data visualization, the information design is used with particular purpose and particular message. To conclude about information design, it's about the tecnique of design to present or provide identified message/story. In this module, we're going to learn about teo different topic. Information design and Kinetic typography. This module is separated into two different part and each works have different work to do.

2, Information system

Infographic design

1, What is infographic?

First of all, What is Inforgraphic system? Basically infographic system is the way to represent tha research data to make the viewers easier to understand the data, the pie chart is the good example for this. Basically, inforgraphic is a visualiation of data collection for better understandings.

The purpose of this system is to providing the result of research that the writers want to tell to viewers much efficirentry. Efficient usage of inforgraphic can help better understanding of data collection, it can be used to provide quick overview, explain complex process, diplay research findings and so on.

There are many diffeent types of inforgraphic systems, there are mainly 8 different types of infographic systems exists as shown below. :

1, List inforgraphics : The infomational graphic that uses a written list to list several items. This is one of the simple way to represent elements or opinion for the readers. It can be used for providing opinion for the project. (such as SDGs)

2, Statistical inforgraphic : This may be the most well known infographic system, this infographic system uses pie charts, bar graphs, and any other visual representations of data to use as representing the result of data. This is most used data representation method, this kind og infographic is used in the company's research to finding out the audience's data or opinion or Nation's research.

3, How-to infographic : As the name suggests, this type of inforgraphic system explains about the method to do something to solve problem or perticular task. 

it explains the step to do something one by one by using both text and image to simplify things to do. Cooking recipe may be the good example for this.

4, Timeline inforgraphic : This is the one of the inforgraphic system that can be used for many urpose. Typicallly, marketing professionals will use it. Most likely, this inforgraphic system is used for :

・Show the historical development of a personal or them.

・Explain the evolution of a product or trend within their place.

・Demonstrate how a particular practise has evolced over time.

(Reference Wix Blog "8 Best Types of Infographics and When to Use Them", Jun 30, 2021)

As you may notice already, the timeline infographic is used for representing the date of evolution of particular people or things through the time.

This kind of inforgrahic system is mainly used for explaining the historical information for better and fun understanding.

5, Comparison infographic : This is the type of inforgraphic that compares two or more different element to contrast different opinions. Each elements  to be compared side-by-side in this inforgraphic system. This system isn't only used for comparison, but it is also used choosing best opinion.

The good example of this inforgraphic is promoting any products for company marketing to compare two different products to represent the advantage of the products.

6, Map and location infographic : As the name suggests, this infographic system focuses about geographic information. To explain more about this, in this infographic representation, the data is shown with map to represent location information. This can help to understand the data with geographical information.

In my opinion, this type of infographic is used in the explaining the sightseeing spot in the particular location, explaining famous buildings 

7, Flowchart infographic : This type of inforgraphic system is one of the infographic system that represents the sequence of different step of action. This infographic uses flowchart that expresses about the process to do with notising points, so viewers can understand the way to complete things.

This tye of inforgraphic can be used to explain the process of work or hw to use tools for new employees.

8, Process description infograhic : This type of infographic system visually discribe the main elements, action and steps of a process. It mainly focuses on the elements, actions, and steps of a process.

This infographic chart is also used for explaining process, it can be used to explain all process in the factory to prouce products.

Inthe exercise 1 in information design, we need to "Pick one free online infographic tool and re-design one poorly constructed infographic poster through your own experimentation with the selected tool." In this module, I take the role to redesign poorly designed comparison infographic.

2, What is comparison inforgraphics?

Before we move to the real process for redesigning the comparison inforgaphic poster, let's take a look closer to the comparison inforgraphic and "Bad infographic design".

First of all, comparison inforgraphic is that one of the inforgraphic design that compares and contrasts different opinions. It presenting two or more alternative element (People, elements, ideas and so on) side by side for readers to understand the differences betweeb various concepts and help making decision for best option for them.

This type of inforgraphic can be used such as marketing, comparison inforgraphic can be used to represent the different products or service to find out advantage or disadvantage over the competitions. Wisely used textm charts, format and icons are helpful o identify the similarities and differences of different items to make a perfect decision for them. This is the main function and advantage that comparison infographic has.

3, What is bad infographic design?

The infographic design may be very helpful to visualize data, however, if the design or data of research (or both) aren't organized well, the data is going to be something ununderstandable, I will show here about the example of bad inforgrahic design that should avoided when you design.

    1, Misleading data from bad inforgraohics

As I already mentioned, some inforgraphic uses graph or chart, but sometimes the data itself my be organized to mislead audience to provide different impressions. The example of this is inaccurate scale of the graph, the scale that reflects the data may lead different impression if the size of the chart is different. 

    2, Too much text

This doesn't mean that you shouldn't use text for you infographic poster, it's surely required to use text to explain each data you found in your research. The main issue of this point is that too much text information cause viewers to get confused. 

You must make sure to know that inforgraphics are visual tool, therefore you need to use the key ideas for identifying the main idea you want to represent. Notice that required texts are :

・Title of the infographic

・A short explanation about the topic and addressing the main point

・Short explanation about main content of research result

Minimaze your text to explain the point and use visual representation to make a easier inforgraphic.

    3, lack of visual hierarchy

This infographic poster may confuse you to understand where to start to read. This is because this inforgraphic doesn't have any proper visual hierarchy. Without hierarchy, readers can't understand where to read.

Provising a hierarchy of information can be efficient to create better inforgraphic, this is because a hierarchy of information can create a focal point where readers can understand the core idea for each research. Wisely used vidual element and organesed information canpresent the data of research efficiently an easily.

There are still other points you must notise for improving visual inographic system, however, I'd like to promote my infographic redesign.

4, Redesigning infographic

This is the main of the information design topics, I am talikg the part of redesigning comparison inforgraphic from poorly designed infographic poster into better infographic poster. I'm also going to record the the process of fixing and reviewing before after work.

Here is the short description about tools I used for redesigning the infographic I found.

Tool : Photoshop, Illustrator

Editing date : Saturday January 14, 2023

Site I found the inforgraphic to redesign : https://wearemarvellous.com/16-web-design-trends-for-2016/screen-shot-2016-01-18-at-14-54-31/ (A we design agency built in Leeds (site : https://wearemarvellous.com))

This may look a normal infographic poster that might look nice, however, there are some bad point in this infographic poster that leads comfusion for readers to understand the main idea of comparison between Web designers and Web developers.

・The hierarchy of information looks missing to identify main point of the comparison.

・The format to compare the difference between Web designers and Web developers may be seen not organized.

・Sometimes the title for information is missing, there could be some explanation for each data (even though there shouldn't so long text to explain...)

・It may be unnecessary point to notice for redesign, but the the text's size is too small and the some diagram can be replace into simple comparison.

The number of point I found may be less than you think, however these points surely leads confusion for readers to understand the core idea of this infographic poster.

I used these website as references to find out the point I found that could be improved so much as comparison inforgraphic. The main point about this redesign is just I am going to fix some point and recreate the poster, therefore I am not going to insert additional information because of the problems of time until deadline.

The image itself from original work is well designed, therefore I remain the image itself so it can visually explain the main theme of this comparison between web designers and web development. The title is empasize as vivid colour used in the original work, I also add the gray background so it can focus much more attention.

The compared opinions are combined in the lower part of the poster so readers can compare two differend web workers much easiler. The comparison items are sorted the importance of comparison between web designer and web developers. In the original work, the research data isn't organized well, therefore it was bit hard to compare at once for readers, organized comparison and sorted in order of importance must make the comparison between them much easiler and quicker.

As All of my progress I've done so far, I finally comlete my work as shown below.

5, References

・VENNGAGE, "Bad Infographics: The Worst Infographics of 2020 (+ Lessons for 2021)", LYDIA HOOPER, January 26, 2021 https://venngage.com/blog/bad-infographics/

・WiX Blog, "8 Best Types of Infographics and When to Use Them", June 30, 2021 https://www.wix.com/blog/2021/06/types-of-infographics/#:~:text=A%20comparison%20infographic%20is%20a,option%20is%20best%20for%20them.

・Icons8 Blog, "Bad infographics: 6 common design mistakes ruining your infographics" https://blog.icons8.com/articles/bad-infographics-6-common-design-mistakes-ruining-your-infographics/

・KlientBoost, "The Top 10 Worst Infographics Ever Created", Johnathan Dane, https://klientboost.com/marketing/worst-infographics/

6, Work

In this week, I had a work about data collection and make a poster about the theme I choose, I choose my pencil case as dataset and make a dataset about it.

3, Kinetic typography

This is the close work to the typography work and movie and sound production like music video shown below.

In this blog, I am going to tye down these things shown below. : 

・Recommend 3 Professional Motion Graphics on blog with Rationals & Inspirations.

・Share personal burnout experience on Blog.

As the issue of the time, I am going to show 3 kinetic typography once and how I as influenced from them and one burnout-like(I am not sure it is burnout experiences.) below.

1, 3 kinetic typography work

・Fall Out Boy - THE PHOENIX (Kinetic Typography Lyrics)

・Bohemian Rhapsody - Kinetic Typography - lyric video

・Sucker by Jonas Brothers | Kinetic Typography Animation

These 3 music videos are my kinetic typography video I can get some inspiration. All of these 3 movies have some animation beside moving texts and it surely helps the visual impression of the lyrics much better way, the impressive way is not just showing the image of the object such as Phoenix, gun or cars, but it appear with following the rythm of the music, of course it is not exactly 100% perfect, but the flow of the animation following the rythm. I hopw these 3 videos can help me in future work as inspiration.

2, Burnout experience

I don't think this isn't what the people want form burnout experiences, but I am telling about the my feelings similar to the burnout.

I am choosing the Taylor's because I was good at design in the previous school so I decided to learn much more about design things, therefore I start drawing things by using my laptop. Istart feeling nervous and feeling lower in status or quality than another or others (inferiority), because my sister's drawing skill is better than me and even I post my work online, I found much better work.

As I entered to the Taylor's university, I still feel inferiority yet, this is because of that I have ADHD (symptoms that hard to concentrate), so I am trying to follow the classes I have, but other people's work is much better than me, these kind of feeling jerous makes me upset or even stress.

I don't think this one is helpful, but this is my most burnout-like experience so far.