INFORMATION DESIGN | EXERCISES

07/01/19 - 31/01/19 | Week 1 - Week 4
Yeoh Xiao Shi (0331577)
Information Design
Exercises

---

LECTURE

Lecture 1 : Introduction to Module 
07/01/19 (Week 1)

To start off the first class, Mr Shamsul briefed us on the module outline and explained the breakdown of what we can expect for our upcoming projects. Thus, we would have a better idea for it. From the briefing, I got to know there are two exercises and one project that we were required to finish individually and one final project which will be completed in a group for this semester.

After that, Mr Jeffrey gave us an in-class exercise which we were required to create a simple infographic and animate it with After Effects. This exercise is basically aimed for us to recall back what we have learned in the previous semester as well as to be familiar with After Effects again after a long time.

Embedded PDF of week 1 assignment briefing slides.

Lecture 2 : Brief History of Information Visualisation
08/01/19 (Week 1)

In today's class, Ms Anis started it by briefing us on the future assignments in detailed. Then, she moved on to give us a lecture on the history of information visualisation. Throughout the lecture, I'm able to learn about how images are widely used in our surroundings since we live in a visual information culture. As we can see, we always rely on the Internet with the development of information technology as to fulfil our daily needs. Hence, we are said to be living in a no boundary world.

Besides that, I learned about how visual is effective in transmitting the information to our brain as people respond more to visuals than text. This is because the information that our brain accepted at a high percentage of 90% is visual and it usually processed 60,000x faster than the text. Moving on from that, the goals of using visual information were also stated which is to reveal the intricacy of the world in uncomplicated terms and to add knowledge to the information displays through spatial, quantitative, and chronological relationships. In the past, images were used as tools to contact spirits and has been played an important role at that time. Around 3000 BCE, pictographic alphabets wherein the images stood for words were developed in Sumer, Mesopotamia and these images have been transformed into common repetitive strokes that are known ad cuneiform script later on. 

Other than that, maps are primitive form of information design. It is the visual representations of geography of the heavens and the earth to guide humans. Formerly, it has been used to guide soldiers along newly conquered territories, to shows the number of cholera deaths and their location in London and as navigation for Londoners to explore their city more easily. Lastly, there is an Austrian political anthropologist believe that "words make divisions, pictures make connections". Thus, he created a visual language called ISOTYPE (International System of Typographic Picture Education) for the purpose of aiding in international understanding.

Embedded PDF of week 1 lecture slides.

Lecture 3 : Manuel Lima's 9 Directives Manifesto
10/01/19 (Week 1)

In the previous class, we were spilt into 4 groups and I have teamed up with CK, Sam, Jessy, Farzana and Jun Won. As for the task, each of the group was required to prepare a presentation slides and explain on Manuel Lima's 9 Directives Manifesto for today's lecture. From what my classmate present and what I have read through, I managed to understand the nine directives manifesto much better than before.

Here are my lecture notes and the compilation slides for today's lecture below.

Lecture Notes : 

Compilation PDF slides for week 1 presentation : Manuel Lima's 9 Directives Manifesto.

Lecture 4 : No Lecture (Dynamic Numbers Exercise)
14/01/19 (Week 2)

There was no any lecture being conducted since it was a tutorial class. So, we were given an hour to discuss the final project with our group mates. Then, Mr Jeffrey started the class by teaching us on how to add effects to the numbers along with the bar chart by adjusting value/offset random max, scale and so on. Exercise was then given in the class which we need to come up a simple animation to show the information on the topic given.


Lecture 5 : Saul Wurman's L.A.T.C.H
15/01/19 (Week 2)

Today, we were required to deliver a presentation on Saul Wurman's L.A.T.C.H which includes the five principles of information organisation. Among many ways of showing the data, L.A.T.C.H has been proven to be the efficient one because nearly all organisation schemes of the data can be organised by following it.

Throughout the lecture, I got to hear my classmates' ideas on these principles and have a better understanding of how I could apply them when organising information for the upcoming projects.

Below are my lecture notes and the compilation slides for today's lecture.

Lecture Notes : 

Compilation PDF slides for week 2 presentation : Saul Wurman's L.A.T.C.H.

Lecture 6 : Chunking
17/01/19 (Week 2)
In the same week, we were assign to present on the topic of chunking which is the concept originates from the field of cognitive psychology by George Miller. From the lecture, I am able to learn and understand how chunking works to improve our memory by applying few techniques. Also, I got to have a better understanding on the methods to utilise the techniques with the examples listed by my classmates.

Here are my lecture notes and the compilation slides for today's lecture below.

Lecture Notes :

Compilation PDF slides for week 2 presentation : Miller's Law (Chunking)

Lecture 7 : 
29/01/19 (Week 4)
In today's class, we were told to create a presentation slide explaining on the topic of isometric design and provide one example of how to best utilise these techniques in terms of visual delivery. Through the lecture, I got to understand that isometric is a method for visually representing 3 dimensional objects in 2 dimensions and it is intended to combine the illusion of depth and show the undistorted presentation of 3 dimensional spaces. Generally, this technique used by engineers, technical illustrators and architects as it allows them to show their sketches in 3 dimensions to the clients.

Here are my lecture notes and the compilation slides for today's lecture below.

Lecture Notes :

Compilation PDF slides for week 4 presentation : Isometric Design As Good Design Practice

Lecture 8 : No Lecture (After Effects Animation Exercise)
31/01/19 (Week 4)

We didn't have any lecture in today's class. Instead, we were introduced to the free plug-in that consists a lot of motion presets, pre-comps and sounds that can makes the animation process easier and faster in Adobe After Effects. In the class, we were also given some time to explore with all the presets.

---

INSTRUCTIONS

---

EXERCISES
After Effects Basic Practise (Week 1)

Week 1 (07/01/19)
As a warm up, simple exercise was given in the class which we will need to create an infographic with any topic and animate it in After Effects later on. Before creating the composition, I try to look for some references through online as to get ideas for the topic. Then, I began to design the composition of my infographic in Photoshop. Moving on from that, I import the composition that has been done in Photoshop to After Effects and add subtle movements to animate it.

Here are some images showing my progress on this exercise below :

Fig.1.1: References.

Fig.1.2: Process of designing the composition in Adobe Photoshop.

Fig.1.3: Outcome of the composition.

Fig.1.4: Process of importing Photoshop file in Adobe After Effects.

Fig.1.5: Process of animating in Adobe After Effects.

Final Outcome.

Quantifiable Information (Week 1)

Week 1 (08/01/19)
After the lecture, we were instructed for an exercise which we would need to quantify the buttons given according to their sizes, texture, number of holes and more. Moving on from that, we were required to use the data collected to create an information poster for it. The information should be presented in an illustrative visual manner and we were allow to use any method like hand-drawn, digital illustration, pictures, collages or others as long as it fits in an A4 paper.

Since we only have one week for this exercise, we were advised to keep the design simple but present the data in a clear and interesting way. Two examples were also provided in Google Classroom for us as a reference.

Fig.2.1: References provided.

Fig.2.2: Buttons given & the data collected.

Week 1 (12/01/19)

Today, Ms Anis posted the compilation data of our buttons findings in Google Classroom and we were required to use that information to create a button infographic poster. To start off, I choose the five colours that I wanted to use in my poster and compile the relevant data. Then, I began to sketch for the layout of the infographic poster to have a better idea of the style and design.

Moreover, I created a board for the selection of my colours and typefaces as the reference for me while styling the poster. Once I done with that, I proceed to illustrate the buttons and creating the composition for my poster in Adobe Illustrator.

Fig.2.3: Data of translucent buttons.

Fig.2.4: Data of beige buttons.

Fig.2.5: Data of pale red buttons.

Fig.2.6: Data of light blue buttons.

Fig.2.7: Data of hot pink buttons.

Fig.2.8: Sketches.

Fig.2.9: Selection of colours & typefaces.

Fig.2.10: Process of illustrating the buttons.

Fig.2.11: Process of editing the layout in Adobe Illustrator.

Fig.2.12: Process of editing the layout in Adobe Illustrator.

Fig.2.13: Process of editing the layout in Adobe Illustrator.

Fig.2.14: Final Outcome.

Dynamic Numbers (Week 2)

Week 2 (14/01/19)
In today's class, we were taught on adding effects to the numbers along with the bar chart in Adobe After Effects. Mr Jeffrey shows us the basic steps of adding effects to the numbers and we were required to give it a try under his guidance. Moving on from that, we also got to try with adding effects to the bar chart so that it could runs with the numbers at the same time. It was hard to catch up at first, but I manage to work on it after failing for few times.

Fig.3.1: Trying to add effects to the numbers.

Fig.3.2: Trying to add effects to the bar chart.

Final Outcome.

After that, each of the group was assigned with a topic and my group got a topic regarding weather. As for the task, we were required to create a composition to showcase the information on the topic received and animate it with After Effects. I decided to design the composition in Adobe Photoshop first and then import it to the After Effects for the animation.

Below are some images showing my progress on this exercise :

Fig.3.3: References.

Fig.3.4: Process of designing the composition in Adobe Photoshop.

Fig.3.5: Process of designing the composition in Adobe Photoshop.

Fig.3.6: Outcome of the composition.

Fig.3.7: Process of animating in Adobe After Effects.

Fig.3.8: Process of animating in Adobe After Effects.

Final Outcome.

L.A.T.C.H (Week 2 - Week 4)

Week 2 (15/01/19)
In this class, we were given a brief on our second exercise in which we need to organise four Pokémon characters into a silent animated video by following L.A.T.C.H principles. I started it by going through the Pokémon's website with the link provided as to select the characters that I would like to use. I ended up choosing the seventh generation Pokémon with the Melemele Island map. With the informations gathered, I move on to organise them with L.A.T.C.H principles. 

Here are some images showing my progress on this exercise below :

Fig.4.1: Selecting Pokémon characters from the official website.

Fig.4.2: Map selected from the website.

Fig.4.3: Organising Pokémon characters with L.A.T.C.H Principles.

Week 3 (27/01/19)
With the selected Pokémon characters and map, I began to sketch the compositions to have a better idea of the final outcome. Moving on from that, I design the composition in Adobe Photoshop by referring to the sketches done previously. 

Below are some images showing my progress on this exercise :

Fig.4.4: Sketches of the composition.

Fig.4.5: Process of designing the composition in Adobe Photoshop.

Fig.4.6: Process of designing the composition in Adobe Photoshop.

Fig.4.7: Outcome of the composition.

Week 4 (31/01/19)
This week will be the submission day of this exercise. Hence, I proceed to import the composition that has been done in Photoshop to After Effects and start to animate it into a video.

Here are some images showing my progress on this exercise below :

Fig.4.8: Process of animating in Adobe After Effects.

Fig.4.9: Process of animating in Adobe After Effects.

Final Outcome.

After Effects Animation Exercise (Week 4)

Week 4 (31/01/19)
In today's class, Mr Kannan introduced us a plug-in for Adobe After Effects which we can download and use for free. It is said to be useful for our upcoming projects as it contains lots of motion presets, pre-comps and sounds that can makes our progress easier and fast.

Fig.5.1: Mister Horse homepage.

After downloading, Mr Kannan showed us how to work with the presets in Adobe After Effects. We were also given some time to explore and get used with the presets in the class. Overall, it was fun to explore with all the presets but I think I still need more practice to be familiar with the plug-in.

Fig.5.2: Process of animating with the plugin in Adobe After Effects.

Final Outcome. 

Fig.5.3: Process of animating with the plugin in Adobe After Effects.

Final Outcome. 

---

FEEDBACK

Week 1 : For the group's presentation, Mr Kannan said that we should have teamwork among the group members by cooperating with each other and having a good planning for the part to be present. In addition, we should have eye contact with the audience and avoid reading from the slides or notes.

Week 2 : For the first presentation of the week, my group has chosen one representative to give the presentation. However, Ms Anis said that we should all try to present as this section is the time for us to improve our presentation skills. While for the second presentation, we got a feedback that our slides have covered all the expected contents thoroughly. In class, Ms Anis also mentioned that we should do more researches and readings before presenting as this will help us to increase our confidence.

Week 3 : No feedbacks were given this week as there was an ongoing field-trip for another course.

Week 4 : No feedbacks received in this week class.

---

REFLECTION

Experiences :

Week 1 : In the first week of class, I got to get used with After Effects with a simple exercise given. It was hard for me to start at first since it has been a long time using it to animate. In the meanwhile, I also got to experienced with quantifying the buttons according to their sizes, textures and more in the class. Other than that, I would need to prepare the slides on the nine directives manifesto and deliver a presentation with my group members for this week lecture.
Week 2 : This week, we were given a brief on the second exercise and also our first project. We were required to organise four Pokémon characters into a silent animated video by referring to L.A.T.C.H. Also, come up with a food recipe infographic poster for our first project. Besides that, I got the opportunity to learn the five principles of information organisation and chunking techniques which would be a useful guide for me to complete the exercise and projects. While in the tutorial class, I manage to learn some new techniques by adding effects to the numbers and bar chart in After Effects. 
Week 3 : We didn't have any class for information design this week since there was an ongoing filed-trip for another course. However, we still have to work on the exercise and project given during this period.
Week 4 : This week, I continue to work on for the exercise and project before submitting it. In the class, I manage to understand isometric drawings much more better through the process of researching and presenting. Other than that, I got to learn about the way to animate the text with the plug-in for Adobe After Effects.

Observations :

Week 1 : I realised it was hard for me to be familiar with After Effects after a long time. Hence, I have to keep trying and watch some Youtube videos to recall back my memories. As for the buttons exercise, I was confused when categorised them into groups as some buttons are having similar design but they are actually not. However, I still try my best to observe the differences and quantify them as group. While for the presentation, I noticed I'm nervous when presenting in front of the class and this cause me to rely on my notes.
Week 2 : I realised there are limited times for me to complete the exercise and projects since there will be a field trip for another course next week. Hence, I would need to arrange my time wisely in order to complete it. For the dynamic numbers exercise, I noticed it was challenging for me as I couldn't catch up the step in class. But, I am able to work on it after trying for a few times and asking help from the lecturers.
Week 3 : I noticed I didn't manage to work on the ongoing exercise and project after a tiring day of filed trip. Hence, I have to plan my timetable again in order to complete all of my work.
Week 4 : I realised I didn't manage to come out a good idea in creating the composition for both of my exercise and projects as I started to panic and stress when there is more than one work to be complete. I ended up wasting a lot of time to think of the idea as well as the composition. While for the after effects animation exercise, I enjoyed the process of exploring with all the presets and the result was pretty fun.

Findings :

Week 1 : I learned that it is important to do some practices for what we have learned previously so that we won't forget it. In addition, I found that it is needed for me to ask others when I'm confused during the learning process. At first, I'm having difficulties to understand the nine directives manifesto but I manage to understand all of it with the help of my friends.
Week 2 : I found that learning through researching and lecture would definitely help me to gain some  new knowledges that could be use to improve myself in designing. Also, I am able to learn on how I could organise the information well in designing the infographic through five principles of information organisation and chunking.
Week 3 : I found that having a good time management is important when there are lots of things to be complete at the same time.
Week 4 :  I realised it was a bit hard for me to concentrate when there was lots of work that I have to complete at the same time. Although the process is quite tough and tiring, but I still try my best to complete them. Moreover, I managed to explore with the presets of animation composer and I noticed I need more practice to be familiar with the plug-in.