Information Design // Project 1 & 2: Recipe Infographic & Animation

 

26/01/21 - 21/02/21  (Week 4 - Week 7)
Caitlyn Aurelia Tjandra (0339381)/BDCM
Information Design
Project 1 and 2: Recipe Infographic and Animation

Instruction


Project

Task 1: Recipe Infographic (Week 4 - Week 5)

Our project 1 task is to make a recipe infographic extracted from YouTube channel called Pasta Grannies. We were told to pick one video in which we will make infographic out of it. I choose video called "Dollari Pasta" by Granny Marche. This video catch my views because of the unique name that sounded like dollar. As expected, the final pasta outcome was similarly shaped like a dollar hence the name.



The first thing I did was breakdown information from the video and write down recipes, colour scheme, character appearances, locations, motifs and other information that we could take from the video and compiled them into a mood-board. 

After that, I went ahead and  research some visual reference on Pinterest which would help me in guiding my ideas and what I wanted to do for this assignment. I also consider the possible colour scheme and typography which's plays an important role in typography. A suitable typography could help enhance the readability and visual presentation of my infographic design.

Next, I did sketches of my layouts and ideas on my iPad. since we are allowed to use software of our choice, I use procreate because that's what I am comfortable with. I straight away did sketch on an A3 paper that way it is easier to visualise what it would looked like. 

Before coming up with layout sketches, I went ahead and sketch the assets needed from my video breakdown docx. I did simple sketch on ingredients and equipments needed for my infographic.

Sketches
Fig 1.0

I came up with 2 layout sketches. Based on my reference, I wanted to put the granny in the middle and centralise everything around her. Since my recipe has quite amount of process, I breakdown my recipe into three main process which is dough, sauce, filling and finishing. 

Fig 1.1

Fig 1.2

Fig 1.3 

After showing this to Ms. Anis, we agreed that Fig 1.1 looks more interesting and it was what I wanted to do since beginning. Therefore, after deciding my layout, I finalise all my assets and the character visualisation. For the grandma I did three sketch, however I decided to go with the second one.

Video

Fig 1.4

Since Ms Anis said we need to take any assets from the video, I take motifs and colour scheme from the video and apply it into my infographic.

Illustrations

Fig 1.5

Fig 1.6

Next, I went ahead and Illustrate the Ingredients and Equipments one by one. This looks the most times, since I need to illustrate each items detailedly to make it looks realistic and pleasing to the eye. Following the grandma art style, I kept in mind to have my ingredients and equipments following the same style which is bright coloured, cartoony Illustration, without outline and has shadow and higlight. After that, I combine my assets into process making for instruction part. 

Progress

Fig 1.7

Fig 1.8

Fig 1.9

This was my progress for the infographic. The background colour I got from the video colour scheme. Moreover, I made the granny as closely similar to Granny Marche appearance. Starting from apron, her clothes motifs, chef hat and her rounded square glasses. I also put an extra character of the sous chef peeking on left top since I find it funny how he said 'Yum Yum'. I wanted an interesting title, so instead of typing out the title, I emphasise the baking aspect by creating the title inside rolling pin. To further emphasis where granny Marche came from, I put the flag of Italy in the centre of the rolling pin to symbolise how she is from Central Italy. 

Furthermore, I thought  the background would be too plain if it's just colour. Thus, I was reminded by the flour packaging on the video, how it has black and blue stripes in which I included it vaguely into the background.
Draft

Fig 2.0

I finally finished my final infographic exactly on the day we need to move on into our project 2. However, when I looked at my poster, it seems to lack a hint of something. Therefore, I ask around my friend and my parents, they all said it lacks some dimension. My final draft seemed flat and therefore I added a white fill on instruction to separate it from the rest and also putting emphasis on the steps.

Final Outcome

Fig 2.1

Task 1: Recipe Infographic (Week 6 - Week 7 )


Now, It's time to animate the poster. I decided to use the same background and fonts for the animation as in the poster so there are no changes. Since Ms. Anis told us that our animation needs to convey the same vibe as our poster. To animate this, I use After Effects since I am quite fond of this software now after several animation project.


First thing I did was importing my procreate file into adobe illustrator. This is easy because procreate has .psd features which I could change later in my laptop as .ai. Then, in illustrator, I separated each scene into one file. This is because, it would be easier for me to animate each object individually.
Fig 3.0 
Before I went ahead and animate my infographic, I plan my ideation first and I also went to Youtube to search several BGM and animation tutorials I wanted to use for my infographic. I first decide on my background music in order to figure out the beat I wanted to play with. I found Italia song called 
Tarantella Napoletana. This song has up beat rhythm which would help me later in animation. 

Then I went ahead and put several animation ideas that I had in my presentation slides. 


Fig 3.1

For the brush strokes title and transition, I follow the animation in YouTube tutorials which I found after looking into several key words. I also found several sound effect I'm going to use in YouTube video which I turn into mp3.

After preparation, it was time to animate. I start out by putting in the basic information such as time, size and quality. Then I import in my Adobe Illustrator files into my Adobe After Effect software and start animating.

Fig 3.2

This takes a really long time to make and adjust because some of the animation was out of my comfort zone. However, I did learn several new animation tricks and tips which will help me in the future. In the end I come up with 2 final animation. One is 1.05 minutes long and one is 1.15 minutes long.

Fig 3.3 Final Draft

Fig 3.4 Final outcome 


Feedback

Week 4

Ms Anis like the idea that the granny would be in the middle and surrounded by recipes. She also told me I did a good job on my video breakdown since I have a very detailed analysis over the steps and instruction. 


Week 5
Ms anis liked sketch fig 1.1 and told me that the grandma is too big.

Week 6
- Ms anis said my illustration is cute. She also mention to make the title bigger. overall, it Looks okay proceed to project 2

Week 7
- Ms anis said " she winked at me" for the animation. She liked how I make the grandma interact with the viewers. She said my animation is really good.

Reflection

Experience: It was a new experience for me, especially in designing a recipe infography. When we were given our topic which is from granny pasta, I was unsure if I would be able to create a decent infographic. This project relies a lot on our illustration and animation skills in which I actually lacked. However, by guidance of Ms Anis, I was able to overcome that. Ms Anis has helped me a lot by providing feedback for my progression and showing us some examples.

Observation: I observe that I was able to learn a lot of new animation skills through this project. I was also being put in a new perspective where I needed to think objectively. I was perceptively watching the video and looking for some Easter eggs that I could put on my infography. We were also learn how to make data from certain video into our own infographic which was really fun and satisfying.

Findings:  I find this module and project really fun. I was having fun in creating and trying out new thing for my infographic. I was also able to see myself improving in illustration and animation criteria. 

Comments

Popular Posts