Assignments Documentations

|| Bertrand Alden Gani / 0370471

|| Information Design

|| Bachelor Of Design In Creative Media

|| Assignments Documentations

TABLE OF CONTENTS

1. Instructions

2. Exercises

• Exercise 1 - Quantify & Visualize Data
• Exercise 2 - L.A.T.C.H

3. Project 1

4. Project 2

• Exercise 3 - Kinetic Typography
• Exercise 4 - Donut Chart
• Exercise 5 - Vector Animation

5. Final Project

6. Reflection

INSTRUCTIONS

Fig 1.0 MIB

<< back to top >>

EXERCISES

Exercise 1 - Quantify & Visualize Data

For this exercise, I was tasked to choose an item to quantify/count and then we needed to arrange the objects into a presentable layout or chart with relevant indicators written out with pens.

Research

I began by searching for items that are suitable for this exercise. At first, I was thinking of using coloured cotton balls that I used for other past project, but then I realised that I can only group them to 1 category which is colours. The lecturer suggested to have atleast 3 categories, so I tried to come up with other ideas. My other ideas was straws, coins, cereals and screws. In the end, I decided to use screws cause they have a lot of varieties and they are not hard to find.

Process

First, I gathered several kinds of screws. Some have different colours, some have different head shapes, and some have different size.

Fig 2.0 Collected Screws

After that, I sorted them to groups and counted each of them. So there were:

• Gold-Phillips-Large = 15
• Gold-Phillips-Small = 30
• Silver-Phillips-Large = 12
• Silver-Phillips-Small = 12
• Silver-Slotted-Large = 8
• Silver-Slotted-Small = 15

Fig 2.1 Sorting & Counting Screws

Then, I began thinking how am I going to present them. I wanted a unique/creative shape. The first idea that came to me was "Yin-Yang shape". At first, I wasn't sure if it's going to work but after arranging it, it turns out working.

So one side is Gold and Phillips while the other is Silver and Slotted. I placed the large screws outside of the small circle and the small screws inside of the small circle. Between the two sides, there were the outliers which have one category taken from each side. In this case, they are Silver (from right side) and Phillips (from left side). Here is what the final arrangement look like:

Fig 2.2 Final Arrangement

<< back to top >>

Exercise 2 - L.A.T.C.H

For this exercise, I was tasked to organize a group of information into a visual poster that combined and utilizes the L.A.T.C.H principles. The lecturer suggested few ideas such as Pokemon, FFXIV, and Dinosaurs.

Research

I decided to go with Dinosaurs, not the one from real life world, but instead the one from ARK: Survival Evolved game because I played the game before. So, I began researching for information about the dinosaurs. Here's what I found:

• https://ark.fandom.com/wiki/Creatures
• https://www.dododex.com/dinosaurs
• https://ark.fandom.com/wiki/Spawn_Map_(The_Island)

Process

The requirement of the exercise was to to use at least 4 of the 5 principles. So I used Spawn Habitat for Location, Name Alphabet for Alphabet, Diet Type for Category and Size for Hierarchy.

• Habitat was divided to 3 biomes which were Jungle, Swamp, Volcanic/Mountain. 
• 2 alphabet group for each biome.
• Diet was divided to herbivores indicated as green and carnivores indicated as red.
• Size was divided to small, medium and large.

For the dinosaur images, I got it from Dododex. As for the map, I created my own. I sketched it in Procreate.

Fig 2.3 Map Sketch

Then I coloured it and put everything in Adobe Photoshop. For typeface, I used Acadian Runes from Dafont. Here is what the final poster looks like:

Fig 2.4 Final L.A.T.C.H Poster

<< back to top >>

PROJECT 1

Instructable Poster

For this exercise, I was tasked to create an infographic that visually explains a complete recipe, guiding viewers step-by-step so they can understand it through both graphics and text. I must focus on selecting the most important information and presenting it clearly and effectively, using suitable visual elements.

Requirements

• An infographic poster for ONE recipe selected from Pasta Grannies@: https://www.youtube.com/user/pastagrannies/videos
• Poster size: 1240 × 1750 pixels or 2048 × 2048 pixels 
• Transmit a set of instructions and at the same time educate the audience.

Research

The lecturer have provided source for the recipes which was from Pasta Grannies on Youtube. So I began searching Pasta Grannies on Youtube. Then I picked a random video to watch which was "100 yr old Verina makes a traditional Sardinian dessert | Pasta Grannies"

Ideation

After watching the video, the main things that I got was:

• Verina used to be a beekeeper.
• Pardulas is a Sardinian delicacy made by baking dough filled with fillings.
• The main difference of Verina's pardulas recipe was she coated her pardulas with honey syrup made of mix of orange peel,  homemade honey, and water.

So the first the idea that I got was to make the theme about either "bee/honey" or "orange" or even perhaps both.

Moodboard

I began searching for moodboards/references in Pinterest. I wanted something that is like hand-drawn style. Here was what I found:

Colour Palette

As for the colours, I chose some warm colours that are related to honey or orange and some darker colours for contrast.

Typeface

For typeface I chose "ChicRoyale" as the main font and "Breathing" for accent. I downloaded both typefaces from DaFont.

Sketch

I began doing sketching in Procreate. The method that I used was trace a reference then modify it according to what I need.

I did the same for the others, I separated them to different layers:

Some reference images:

Adobe Illustrator

I began by adding the recipe title.

Then I import every assets that I have draw in Procreate. They are all in png format. I tried to arrange the layout as neatly as possible with the available space. I organised the spacing so the steps flow are easy to understand.

After that, I added the step by step instructions and some details to make the infographic more interesting.

The recipe consists of 3 steps so I divided them by colours so they are easier to identify. Here are the full step by step instructions:

1. Step 1: Prepare the Filling

• Pour 200g sheep milk ricotta in a bowl.
• Crack 2 eggs, whisk them, then mix into the ricotta.
• Add 1Tbsp grated orange zest, 1/2tsp ground saffron, 100g sugar, 1tsp vanilla essence, 1Tbsp semola flour.
• Mix until well-combined.

2. Step 2: Knead the Dough

• Mix 125g of semola rimacinata  and 125g of 00 flour with 100ml  of water to form a dough. Knead the dough, add 15g of lard  while kneading until smooth.
• Cover and let the dough rest  for 30 minutes.
• Roll out the dough to about 3 mm thickness and cut into circles.
• Place the ricotta mixture in the center, then pleat the edges to form a star-shaped pastry shell.
• Bake at 180 °C for 30 minutes, or until golden.

3. Step 3: Make the Honey Syrup

• Peel an orange and place the peel in a bowl.
• Add 3 Tbsp of proper honey to the bowl. Then pour in 50ml of water.
• Stir well until fully combined.
• Gently dip the pardulas in the honey syrup until coated.

Final Instructable Poster

<< back to top >>

PROJECT 2

Exercise 3 - Kinetic Typography

For this exercise, we were tasked to choose a song and create a lyric video for it in group. We need to animate the typography using Adobe After Effect.

Research

The first thing that we did was deciding a song. There were a few recommendations by the members which were:

• Killer Queen by Queen
• Viva La Vida by Coldplay
• Shape of My Heart by Sting
• Fluorescent Adolescent by Artic Monkeys

We made a poll in Whatsapp group and the winner was Killer Queen by Queen.

Fig 4.0 Poll Result

Then we needed to choose colour palettes. There were several options, in the end we chose warmer colour palettes:

Fig 4.1 Colour Palette 1

Fig 4.2 Colour Palette 2

After that, we needed to choose typeface. We wanted a elegant typeface because we think that it will suit the song, so we decided to go with Monograph.

Process

First, we divided the lyric parts to each of the members using Google Docs. Here is the link: Part Distribution

The part that I got was:

To avoid complications

She never kept the same address

In conversation

She spoke just like a baroness

Met a man from China

Went down to Geisha Minah

Then again incidentally

If you're that way inclined

So I opened Adobe After Effect and started experimenting. It's been a while since I used Adobe After Effect so I tried to learn again. Thankfully, it's not that different from Adobe Animate.

For the first line, I just played with Scale, Position, and Opacity. I tried to match the animation with the beats of the song.

Fig 4.3 Animating First Line

For the second line, I wanted to visualize the lyrics so I added a vector of a girl walking. To animate it, I used the Puppet Tools that the lecturer have taught previously.

Fig 4.4 Using Puppet Tools

For the third line, I added soundwave vector to match the guitar sound because during this part there is a sudden loud guitar. For the fourth line, I added mouth vector to visualize "speak like a Baroness". The mouth vector started as not visible then will gradually become bigger as the melody goes up especially during the "Baroness" part.

Fig 4.5 Adding Vector

For the fifth line, I added a few oriental style vector to match the lyrics. Then the transition from fifth line to sixth line will looks like as if it's going down matching the sixth line lyrics. For the seventh line and last line, I suddenly got the idea of animating small circles then the words will slowly pop up then will smack the circles to the side. I thought that the idea is pretty creative so I just went with it. I also added Motion Blur to make it more impactful.

Fig 4.6 Adding Motion Blur

Fig 4.7 Layers

Here is the final video after we compiled all the member works:

Fig 4.8 Final Kinetic Typography Video

<< back to top >>

Exercise 4 - Donut Chart

For this exercise, I was tasked to create an animation for chart. The lecturer have given different type of chart to each student. I got the Donut Chart.

Research

For the data of the chart, the lecturer have provided it. Here is the link: Data

Process

First, in Adobe After Effect I created a circle with no fill and just outline. Then I increased the outline stroke.

Fig 4.9 Creating Circle

After that, I change the circle colours, added trim paths and put the trim paths end value according to the data. But I made it (data value-0,5) because I used the 0,5 to make a separation between the colours because in the example each of the colour is separated/does not stick to each other.

Fig 4.10 Adding Trim Paths

Fig 4.11 Setting Trim Paths End Value

I duplicated the the object 7 times, 3 for the remaining data and 4 for border/separation. For each data, I changed the colours to different colours and put the trim paths end value according to the data-0,5. For the 4 border, I changed their colour to the background colour.

Fig 4.12 Duplicated Objects

Fig 4.13 Donut Chart

Lastly, to make it similar to the example, I added the title, and I also  animate each of the data name and percentage. They will appear following the chart animation. Here is what the final animation looks like:

Fig 4.14 Final Donut Chart Animation

<< back to top >>

Exercise 5 - Vector Animation

For this exercise, I was tasked to animate vector. The lecturer have given different vector to each student. I got the D vector.

Research

For the vector asset, the lecturer have provided it. Here is the link: Asset

Process

First, I opened the vector asset in Adobe Illustrator, then I separate all the object that I want to animate to different layers.

Fig 4.15 Separating Object to Different Layers

Then I opened Adobe After Effect and created a new composition. I imported the AI file to the composition and all the object is already separated.

I started to animate them one by one. For all the object except the hour hands, I mainly use scale to animate them cause I felt that it's the most suitable. I also added easy ease so the animation look smooth.

Fig 4.16 Using Easy Ease

Fig 4.17 Animating Objects

For the hour hands animation, I used rotation as well.

Fig 4.18 Animating Hour Hands

Here is what the final animation look like:

Fig 4.19 Final Vector Animation

<< back to top >>

FINAL PROJECT

<< back to top >>

REFLECTION

<< back to top >>