Information Design

Jan 4th, 2022 - Jan 11th, 2022 (Week 1 - Week 2)
Rusydina Fazlin Athirah Binti Fauzi
Information Design
Week 1 [January 4th, 2022]
Exercise 1 / Quantify Data

INSTRUCTIONS

Lectures

Week 1 Lecture:

In the first week of information design, our lecturer Ms. Anis gave brief explanations throughout the exercise and projects that will be ongoing in the module. Other than that, Ms. Anis had us begin our first exercise for the week, which was to quantify and visualize data.

Ms. Anis also prepared an exercise and assignments brief slide as seen below;

Week 2 Lecture:

Introduction to information visualization

Display of elements that have information and data to them. (statistics shown visually)

A designer's job is to engage an audience.

Introduction

To Introduce the lecture that Ms. Anis covered in class today;

We live in a visual information culture. Meaning that there has never been such an eruption of visual images in history.

Visual information is also responsible for the rise of statistical thinking and widespread data collection for planning and commerce up until the nineteenth century.

From the earliest map-making and visual depiction to later thematic cartography, statistics, and statistical graphics, with the use of;

applications
innovations in many fields of medicine and science

Figure 1.1 - Statistic visual graphic

Figure 1.2 - graph-like visual graphic

The figure shown above displays the time distribution f events considered milestones in the history of data visualization, shown by a rug plot and density estimate.

Figure 1.3 - Visual information's importance in clarity

Visual information's ultimate goal is to simply;

reveal the intricacy of the world in uncomplicated terms
simple comprehension presentation to an audience

Other than that, information design seeks to add knowledge and information displaying it through;

spatial
quantitative
chronological relationships

Here is an example of a visual that conveyed its information with the aspects of clarity.

Figure 1.4 - points scored graph, visual info example

The importance of Visual Content, Ms. Anis shared a small video that the class watched briefly. Explaining the importance of visual content and also correlating to our upcoming project where we have to convey our chosen topic of information to later then be illustrated and animated into an informational visual video.

Later then, Ms. Anis explained how certain students without any kind of design or are a little rusty on visual depictions for ideas. A great way to start is by designing a word cloud as seen below;

Figure 1.5 - Word cloud example

Lastly, Ms. Anis covered the last subtopic regarding the example of an effective infographic that breaks down complicated numbers into visuals also known as 'The Greatest Infographic' with a video the class all watched together.

From what I understood when watching the video that Ms. Anis had us watch was, there are many ways to arrange the statistics, numbers, information, and elements all together to effectively convey a message to an audience giving them insight even through one whole big piece of canvas.

Leading up to our following exercise that involves individual work and group work

Exercise 1

Quantify Data
January 4th, 2022
-

For our first exercise, we are meant to:

-find chosen items
-arrange the objects into a presentable layout.

We had a small session after the class's lecture where Ms. Anis encouraged the class to look for a variety of the same items to use to quantify the data. I chose on using pipe cleaners.

Figure 1.1 - gathered data, pipe cleaners, January 4th,2021

It took me quite a while on what I wanted to analyze from the pipe cleaners, apart from the colors and the quantity of them. So I decided on arranging them first based on the colors there are, affirming the quantity of them as well, seen below.

Figure 1.2 - arranged pipe cleaners according to color, January 5th, 2021

The information I managed on accumulating was that there, were 13 orange, 12 dark yellow, 11 pinks, 1 gold/yellow, 16 green, 18 blue, 10 silver, 13 wine red, 15 light green, and 16 purple pipe cleaners.

Later on, I noticed how there were two types of pipe cleaners with different materials covering them. Therefore I labeled the difference between 'Non-reflective' and 'reflective' pipe cleaners.

Figure 1.3 - Final quantified data of pipe cleaners, January 6th, 2021

Finally, with a total of 129 pipe cleaners according to the number of colors along with the non-reflective and reflective pipe cleaners.

Final PDF compilation:

Exercise 2

L.A.T.C.H
January 11th, 2022
-

Ms. Anis covered over explanations on how we can start off our 2nd exercise, pertaining to L.A.T.C.H - is a method of information organization that consists of these principles:
Locations
Alphabet
Time
Category
Hierarchy
To begin this exercise there was a list of examples of contents prepared by Ms. Anis to use to organize those contents with those principles. But I decided to go with my own content that had everything to do with the well-known Cartoon Network cartoon series; Steven Universe.

It was a little messy at first when organizing and deciding which information would fit into a principle, so I did a quick messy sketch list to understand how many characters I'd use up and which information is a part of the following principle.

Figure 1.4 - listing L.A.T.C.H with steven universe, January 19th, 2021

The following, I finally brought forth into looking into the characters of the show;

Figure 1.5 - Listing down Steven Universe Characters, January 19th ,2021

There were a few characters that I added and took out in the final piece of the infographic poster, but for now, these characters were enough to categorize them into the hierarchy of the characters in the show.

Next up I slowly worked my way up into deciding the color palette of the infographic deciding how I wanted to portray the location of all these gems in this poster.

Figure 1.6 - Image tracing background, January 19th, 2021

I picked out an image that set the location of the contexts which was; Homeworld. In the show, Steven Universe has quite the art style of it being more solid rather than having a complete line to display its background, characters designs in the show. I wanted the infographic to focus on that for the background. So illustrator has a tool called "image trace" that conveniently transforms images into vectors, gaining that solid look to a piece. As seen above.

Figure 1.7 - Experimentation of background, January 19th, 2021

I experimented a little on the whole idea of displaying the planet of Homeworld to see if it could fit better but decided that it would be hard for me to fit in the information, so I went with the first background in figure 1.6.

Figure 1.8 - information progress #1, January 19th, 2021

Figure 1.9 - information progress #2, January 19th, 2021

Figure 1.10 - information progress #3, January 19th, 2021

Filling the contents that relate to the show and of course still wanting to display the method of the organization was quite simple and fun, there was one last messy sketch list that I did to cross off each of all the gems under categories of the Diamond authorities and listing the gem types in alphabetical order;

Figure 1.11 - check-listing characters/information, January 19th, 2021

After all, data had been attended to according to time and planning. Low and behold, the final piece.

Final PDF version:

FLIP Classroom (exercise)

Individual Task

January 6th, 2021

Different types of infographics & online tools

Pick one free online infographic tool
re-design one poorly constructed infographic poster
experiment the design through the selected tool
give a personal rating + review of the online tool for

Difficulty, intuitiveness
Usefulness
Design templates, choices

I decided on choosing Canva as my online tool to edit and redesign an infographic that was badly designed that I found through the internet. The infographic I found to redesign is seen below;

Figure 1.4 - Infographic on top cell phone manufacturers, January 9th, 2021

What I was able to identify from this infographic was the lack of graphics that could signify and emphasize the information being displayed with more elements, interesting shaped elements to be exact.

Figure 1.5 - Canva chosen infographic redesign, January 9th, 2021

Right off the bat after picking a template to work with when redesigning my chosen infographic, it was quite straightforward and I only had to reimplement the information that was given and give it a few decorative elements, making sure it relates to the info given as well.

Figure 1.6 - Redesigned infographic, January 9th, 2021

Finally, after a few adjustments and planning out how I wanted to execute the information into the newly designed infographic, I think it was arranged much neatly. I remained its color as the template, all I did was add in the logos of the cellphones that were stated, since it was a good opportunity to enhance the decoration of elements in the infographic while maintaining the relations of the info given and the visual graphics that are displayed.

Comparison of badly designed and Redesigned

Figure 1.7 - before and after redesigning, January 9th, 2021

I think what can be considered in the differences between the two is that the redesigned infographic is more of a list instead of a diagram. But other than that, there is more attraction in the 2nd one instead of the first one because of the elements and graphics having to do with cellphones, adding in visuals like those would be much more interesting to look at rather than just numbers and circles in the infographic before.

Online tool rating and reviewing:-

Difficulty: In my honest opinion, it was pretty straightforward to use. The interface of the online tool was easy to use. There were options of elements, uploading our own content, templates, and text, it had limited sub-attributes of tools for editing although it was less on the variety of tools. Implementing the elements to create a visual graphic is what the whole online tool is all about! I suppose to put it to words I understand that it's up to a user's way of creating a graphic with the big use of the elements or even text to create something out of the ordinary or something simple.

Usefulness: I'd say it's pretty useful for simple and quick graphic designing.

Design templates, choices: There were a few good design templates but most of the ones that would be ideal for a particular would need premium to access it, overall there is still a variety to choose from that are free.

Final PDF compilation:

FLIP 1 Classroom (Group 7)

January 6th, 2021

Other than this individual task. My group and I were also chosen to present to the classroom on our findings and understandings with the type of infographics there are, through our slides and video presentation.

Type of Infographics, slides:

Recorded video presentation:

FLIP 2 Classroom (Group 7)

January 13th, 2021

For the second part of group 7's FLIP recorded presentation, my group and I covered the topic of L.A.T.C.H. There is a clearer understanding of what our findings were about L.A.T.C.H when working together in filling up the slides as seen below;

L.A.T.C.H, slides:

Recorded video presentation:

Tutorial/Practical Session

Kinetic Typography in After Effects
January 11th, 2022
-

Mr. Martin thought the class how to practice and workout way through kinetic typographic in after effects. It was an exercise to work our way up into our second project and a little fun sub-activity and practice to work on individually and with our group members.

First, we practice with a lyric video to the song So What by Pink chosen by Mr. Martin. We had a small tutorial in class, where Mr. Martin showed the class step by step in syncing the words to the song and displaying the words kinetically as a final outcome.

It can also be looked back and referenced with a tutorial slide prepared by Mr. Martin, seen below:

There were two sets that Mr. Martin taught the class as we worked on the exercise. The first one was to the motion and the movement of the words. The other one was to practice the camera movement of the words/lyric layout of the composition acting as a null object.

Practical kinetic typography (individual task):

Not the best starting out, but with enough practice (and I did so) I'm sure improvements would be much more visible.

The next kinetic typography practice we did was one with the rest of the group members. My group, which was group 7, chose a song to work on the kinetic typography exercise together. We dissected the verses in the song.

The song chosen is called Revived by Dervikat:

Later then, we distributed the lyrics to each member in the group with the amounts of verses in the song.

Song lyric distribution:

After being aware of the lyrics that were assigned to each group member, I worked on my part which was the second verse part c. It took me a while to get the hang of the presets in the program and I have to admit I needed a little help, so one of my group members was happy to help on the basics in functioning the presets in adobe after effects.

But low and behold, I managed to finish my part of the song to later then be accumulated by the group leader to showcase the full song of each group member's kinetic typography part to the song.

My part(2nd verse - part C):

Group parts (accumulated):

Motion Graphic Chart in After Effects
January 20th, 2022
-

During week 3's tutorial and practice, Mr. Martin assigned the class practicing to animate a graph according to the slides provided by Mr. Martin himself. There was a google sheet, assigning each student on which chart to animate.

I got assigned to animate Chart D, a line chart shown in the slides below.

Final line chart motion animation:

Vector/Character animation in After Effects
January 25th, 2021
-

Our next motion graphic practice was to work out how to animate vectors/characters in after effects. Mr. Martin provided the slides and examples to see how we can practice it on our own. Again, this practice is to work our way up into the final project (group project) where we design vector characters and animate them into a motion graphic video.

Mr. Martin prepared an Ai file for individual tasks to be carried out as seen in the slides along with references and assistance (tutorials) as seen below:

Final vector/character animation:

Search This Blog

Athirah.blogspot