Information Design : Chunking


Information Designs

Date : Jan/31/2023
Name : Mabuchi Arata
Lecture : Video and Sound Production
Lecturer's name : Martin Chong Yuh Lin
ID : 0351579 

1, Introduction

In the last week, we've learnt about chunking which is basically breaking the given information down into small group and separating them depends on the category, hierarchy or any other features that can organize information much efficientry.
In this work, we work as team too create a google slide to introduce that week's information design topic "chunking". In this blog, (due to the problem that time I need to wrk on for next upcoming project to do) I am going to reuload previous slide we work as team and earange it as whole text. I'm also going to explain about wok I've done for Kinetic Typography.

 2, Chunking

1, Brief description

First of all, what is "chunking"?, this concept is basically process of breakig up the content (it's going to be information in this point) into small unit of information and rearrange it in order to improve the quality of information expression. In Miller's Law, it predits that normal people only keep 5~9 items in their working memeory, therefore if all information isn't organized and placed randomly, most of people can't recognize the information shown, chunking helps us to understand information be sorting information into same group or other features such as importance, category, herarchy and so on.

2, Chunking usage

Chunking is widely used in the many different types of media around the world, such as infograpic, UI/UX design, website design, videogame design and so on, I am going to take notes of usage of chunking each media shortly.

1, Infographic

This media is using the chunking system as basic ideas that other media refered to it. It divides all availlable informations are divided and applying bullet numbers, each parts are divided and having a different colour/tones to state different informations.
Sometimes it inserts images to help understanding about the given information for each oarts of informations. The most important point for this is that "chunked information can be organized in same group, in the database website, datas can be organizedin the same group".

2, UI/UX and website

The chunking process for both UI/UX and website is process of making format for screen. The information for both media can't be placed randomly for better using experience for user, the datas must be oganized by using chunking method.
The point you must notice is that in both website/UI, the datas are organized bu category, all same/similar informations are combined into the same location. Icon is also used as visual aid to navgate the equired information, the SNS is good example, even icon without text can be used to navigate user to access their equired information without using text that should be changed depends on the language that users used. 
The main point that you sould remember is that location to place each information is also necessary to consider for this, to explain more aboutt this much deeper, the main information that users mainly want to see is going to be placed in the middle of the screen, the related information is tends to be placed in the right hand side, the additional information tthat users might want to access is tend to place in left side, the twitter is good example for this, the main tweet is placed in the middle, and related tweet (or current trend) is placed on right hand side, finally other features like message, profile and setting is placed on left hand side.

1.1 Twitter chunking

3, Video game interface

Video game is also one of the media that uses chunking system efficientry. Wisely used chunked system is helpful for players to play comfortably.
The good example of chunking usage in video game is menu selection, all items that players get are all organized by group, all items are organized into same categories like weapons or portions to heal, then they are also sorted in some particular order such as alphabetic order, strength (used for weapons), and so on. All items organized in the menu have icons, it also helps to visualize information for beter understanding for users.
UI in video games are also using chunking system, the most imformation such as map, health bar, coin, items currently used, time or all other features that players need to know is showing in the part where player can attracts most. All other informations are also placed in the part where players can notise easily, but they are also placed in the location that can hide main screen so player can't notice what's going on the game.
1.2 Video game chunking

3, Brief summary

As we looked through about the chunking and its usage in the various media, chunking isn't used only for breaking datas into smaller pieces, but it also visualizes and organizes data so users can have a better understanding for each informations, additionally, it also manages the locations so it can naturally navigate the user to the correct information tha users want to access.
In this topics, we can conclude chunking as "method to beaking down all information depends on the same category and organize its locatiojn to show with icon depends on hierarchy to visualize all available informations much efficiently". 

3, Motion Graphic

In this week, we've learnt about motion graphic which is basically about the animation that uses adobe after effect, it is basically animation that makes different graphi moving. I was working on the project to make animated bar chart, here is the process I've done to make animated as shown below.

1, Draw a vertical line without filling any colour and increase stroke width.
↓
2, Add trim path to make a vertical animation (I also add reverse pat direction and make it smoother when it moves).
↓
3, Duplicate a bar and change x-axis and stroke colour to make a different bar chart result.

Here is my work as shown below.
1.3 Kinetic diagram example

4, Task to do.

1, Static Poster

In this section, I'm going to post the task to do or week 3, unfortunatelly due to the time issue, i can't explain about details for each work and process (although I may insert some information). 
The main task I have to do is "making infographic poster about one cooking recipe selected from Pasta Grannies". I need to watch the video from the YouTube link and breakdown and "chunk" the prparation and cooking process into an instructable poster. I also need to cature each Grandma's personality and unique identity in my poster as part of the narrative structure, terefore it can be said that I also need to use Gradma's identification as part of my recipe poster.
I decided to make a poster about "alla chitarra", and I decided to create a poster based on the poster shown in the provided slide.
1.4 Alla chittarra making movie
The reason for using this design style is because of that the flow of the pata and sause crealy represents the movement of sauce and pasta in a pan, after decidin the style of poster, I started to make my own draft work . I mainly the image on left side for reference.
The reason for choosing alla chitarra is because this is the one I found in the channel first and I like eating pasta.
1.5 Poster references
I decided to use the cutting board for background and tried to represent spiral like a keft side poster above shows fin my poster, this is because I thought the cutting board may be representive for home cutting and spiral can be good for visual poster.
I tried representing the spiral to represent the flow of pasta and sauce. I also mainly focuses the position and hierarchy of both text and image to represent the process of making alla chittara in order of how to cook without confusion.
1.6 Poster draft work 1
This is the general draft artwork for my cooking instructural poster, however, the image impression itself isn't stable enough for final work, therefore I draw outlines for each ingredients and foods. The text font itself is using the font set provided in adobe illustration. I separate different parts of ingredients of alla chittara  so I can use them as spirates for vector animation. I mainly focus design of image is symbolised simplify for much warmer impression.
1.7 Poster draft work 2
After making a draft work, I made a image cooking recipe of alla chitarra and import it into the adobe illustrator, then I add text to explain about the recipe of how to ccok "alla chitarra" briefly, the text itself is refered from the original Youtube video I found in the YouTube link I found fro provided link. Some of the text can't understand the amount of ingredients but I guess the instruction itself is quite accurate to the recipe on the original Youtube. I also try to maintain the visiblity of text so viewers can easily understand the instruction of the recipe. I tried my best to make the recipe understandable and readable so viewers may not confuse the order about how to cook the meal with designing unique poster. Here is my final work.
1.8 Poster 1 
The point of making a flow of order about how to cook a meal itself isn't bad, however, the text itself isn't enough to represent clearly, image is too big and it hodes important information. Additional point is the poster itself is too simple, even though it is representing cutting board, I should have much better decolation for that. The main problem about my work is that the image itself looks too simple and bored, therefore I realised that I need much more decoration for that, however, when I check the examle poster that shared in microsoft team, I found that my poster's quality isn't enough as provided one, so I decided to improve my poster much more. There are 2 points I mainly focus for my work's improvement. First point is decorating the Title to emphasise and another point is upper decoration.
To say about the title, the design itself was boring by just applying text directly, therefore I need to get ribbon design from freepik to decorate the design of title much better.
1.9 Title design
The second point is decorating upper part of a poster, the reason for this is because the references I found has all decoration around the recipe as frame, therefore I need to find out any good images of frame for my instruction poster, however, all I found internet for frame work isn't enogh for my work to dedcorate my poster, therefore, I decided to change my idea to use image of pasta tongs to decorate the upper part of my poster.
After applying the image of tongs, the poster now looks much beter I hope. The final work is as shown below.
1.10 Poster 2
As you can see my final output for the work, the quality itself has been improved much better than before, however, the text impressuin is still weaker than images of pasta and sauce. I regret the production that I can just spray the colour of cheese to decorate the surrounding of poster like the flour is covering the cutting board to make a dough, therefore I added some sprayed image of white-yellow colours that represents cheese (rather than whiter colour, I prefered to have much yellowish colour) on the cutting board and providing much better brighter and vivid impression that can emphasise viewers.
1.11 Poster 3
After making poster, I need to move on to create the animation form of my instruction about how to make  an alla chitarra, due to time issue (today is 2023/2/14), I need to move on to the creation of vector animation now.

2, Vector animation

The animation itself is the work I experienced before, so it shouldn't be so much big issue, however, without storyline, I can't make any good animation at all, therefore, I need to start my production from the brief stucture of whole video through to plan ehat to make, the first things I need to do is planing the whole video idea briefly which isn't meant that sketching details for each scens. 
Animation works I've done.
1.12 Kinetic movie task 1
1.13 Second kinetic diagram
In the video provided as a link uses illustration's vector images so it can be easiler to separate images to create one animation, At that time I made my own poster, I had no idea to create my poster by using vector path provided in illustrator, I think It'd be much better than I made and I regret it, whatever I do, I can't go past and I have to keep making my own animation work from the separated PNG images I made before to create vector animation.

1, Brief storyline

First of all, I need to start with the basic structure of storyline briefly, however the plan itself is already found as poster, which is basically spiral that going down. Additionally, I also want to add some effect I've done like turning effect. In the linetic typogrsphy work, I add sand effect that some text is erased like wind blows sand as shown below.
1.14 Kinetic Typography wirk
1.15 Kinetic Typography work I've done
However, before I move to the video creation, I need to check video again to take notes about ingredients and recipe to be used in my video. After watching the video again to understand the recipe, I'm finally able to create my own vector animation.

2, Real creation

First of all, I need to take notes about sprites I am going to use in my production. Luckily, I already made some of the PNG images that have transparent background so I can use it for animation, however, I still need to make these sprite shown below. 
Whole onion
salt
egg
flour
Green pepper
Rolling pin
Oil
Passata
Pasta dough
Cooking pan (for pasta & sauce)
Flying pan
Fire
Knife
The first point I need to do is making these sprite on adobe illustator, the reason for this is because the quality of adobe illustrator work itself is better then paint soft.
Here is my illustrator work I've done in for my final instructional video.
1.16 My vector work
After desining the sprites I need to video creation. I mainly forcused to make a smoother animation. and I also focused understandable video, the instruction is shown above and the image itself is big and understandable so everyone can maje food from this video I hope, the problem I found was there are too many time after effect crashes, it happens too many time so I have to plan some solution to avoid lose of my work, therefore I decided to separate my work into different kinetic work separately, after that, I start to combine them as one long work.
This is my video that I complete first.
1.17 First part of my movie work
As I mentioned earlier, my work is separating into three different part to make production much easier in Adobe After Effect, after making all of part of video, I will combine them into one big whole vide in Adobe Premiere.
The video I made as final work is shown below.
1.18 My final instructional cooking video
The main point I mainly focused was fluency and visibility. Each time ingredients are showing, I provided time to move each ingredients slowly so viewers can understand. I also adjust the size of each ingredients and tools to emphasise items in the movie.I also focus on the movement of each sprite to make easy to understand the process of cooking in order.
1.19 One scene from my video
I also make an animation of cooking process too, so it also helps understanding the process of cooking much better. It can be said that he animation and way o show each sprite helps better understandings for cooking process.
The point I could improve more is hierarchy or position of each ingredients. Even though the position of animation itself is going well to emphasise each ingredients to put in right order, the hierarchy could be much more improvement. the order to show each ingredients that should be put at same time doesn't have ay order and the details of cooking (amount to put) is also messed up. I paid too much effort to simplify process and lost details to cook right way, in the next time I should add more details on image and create hierarchy or other way to provide more information.
1.20 Newer poster
In the end, I am going to complete the task making cooking oster by showing this renewal poster which I fixed word to emphasize more, I also changed colour of some text so the words are not hidden in the background images. 
The image itself may be improved better tnan before, however, the poster image still has problems. I added some image from the internet to emphasise the movement of ingredient and makes the poster itself much better, however it is too much annoying for the image of process making a sauce in the poster and I use the decoration I made for kinetic movie and I edit some part to looks much better as shown below.
1.21 Final Updated Poster 
When I post my work, the poster work isn't enough to emphasise the text to understand how to cook and video is also required to add any audio sound, therefore I decided to add some improvement for my works.
1.22 Fixed Poster adding yellow background
I all Yellow background for each text to represent some stickers as note for each steps to explain way of cooking.
Additionall, I also add music and some sound effects to my YouTube Kinetic animations for my calendar. As the result, the work itself has beeen improved much better.
1.23 Alla chitarra instruction video with audio

5, Image reference

・Pasta grannies, "Maria makes spaghetti 'alla chitarra' with lamb sauce | Pasta Grannies" https://www.youtube.com/watch?v=GDUp5SBF7BM

コメント

コメントを投稿

このブログの人気の投稿