Information design / Project 1: Infographics poster

Week 3 - Week 6 

Riko Matsuyama 0351470 / Bachelor of design in creative media

Project 1: Infographics poster

---

Instructions 

---

Project 1: Infographics poster

Week 3 

Poster

An infographic poster for ONE recipe selected from 

Pasta Grannies @ https://www.youtube.com/user/pastagrannies/videos

Study one video, break down, and chunk the preparation and cooking process into an instructable poster. Try to capture each Grandma’s personality and unique dish identity in your poster as part of the narrative structure.

These infographics present complex information quickly and clearly, with symbols charts, and diagrams. 

Fig1.1: poster

I chose this video, Enjoy Enrica's easy flaky flatbreads called crostoli from Urbania!

Video: Enjoy Enrica's easy flaky flatbreads called crostoli from Urbania!

In the beginning, I took note of the recipe and ingredients while watching the video. I screenshot the video because it is easier to create with images. It helped me grasp the process.

Fig1.2: process, notion

Week 4

After that, I did a sketch of the poster. I wrote out the flow of the food again. Since it would be too much to incorporate everything into the poster, I summarized the parts that could be summarized. I created three sketches of the layout. We decided on the one on the far right.

Fig1.3: sketch, cooking process, ingredients

Step1. Make the dough

Step2. Roll out the dough

Step3. Grill the dough

Step4. Arrange the ingredients

Fig1.4: final layout sketch

Visual references

Fig1.5: visual references 1

Fig1.6: visual references 2

First, I collected images of the ingredients, hands, dough, and utensils. I created the illustrations based on them. 

Fig1.7: images

I created a unified illustration. The brush Charcoal-feather was applied to all illustrations. It was difficult to find images of hands kneading dough. I changed the color of the flour before and after mixing the ingredients.

Fig1.8: illustration

Fig1.9: illustration, crostoli

Week 5

After finishing making the illustration,  adding something like a road in the background makes the cooking process easier to understand.

Fig1.10: background

I decided on a background. I chose a dark background because I have many light-colored illustrations, such as light blue and yellow. This made it easier to see. 

Fig1.11: background-color

The paper texture was applied to the blue background using Photoshop. Then I added text. Since the poster is a modern-style concept, I used a handwritten typo.

Fig1.12: font

Week 6

Mr. Hafiz gave me feedback. He said the layout and illust look ok but the text was too small, so I enlarged the font.

This is the final outcome of the infographic poster.

(17/2/2023)

Motion graphic

Use the assets from Project 1 Instructable Infographic poster into a 60 secs motion graphic.

First I decided on a color pallet, based on the poster's background and text color. The below image is suitable for motion graphics. 

Fig2.1: color pallet

These are images of Scandinavian Illustration. Scandinavia is not the region where this dish was created, but it is the same in Europe. I used this as a reference because it is a very pretty illustration.

Fig2.2: Illustration references

Fig2.3: Illustration references

The layout is simple, using colors from the color palette.

Fig2.4: layout, motion graphics

To show how the colors change as the dough is kneaded, we prepared two illustrations of the same shape but with different colors. 

Fig2.5: dough, hand

Fig2.6: Ai files

Video: Italian music

The motion of pouring the milk, and dropping the olive oil and eggs was difficult.

Fig2.7: step 1

Use the scale tool because the dough rolling out motion with the stick. Make the dough larger to match the movement of the stick.

Fig2.8: roll out the dough, movement

To make the cooking process easy to understand, I have divided it into four steps, just like a poster.

Fig2.9: flower, 4 steps

I used the 3d function to create an animation for sandwiching the ingredients. moving the x's made the movement better.

Fig2.10: 3d, sandwich

---

Feedback

Poster

1st: The layout and illustrations look ok, but the type is too small

2nd: Looks better, the yellow font is hard to read across. Maybe make it bold

Motion graphic

Mr. Hafiz: The pace is a little slow. and could you increase the size of the text?

Mr. Martin: Very nice video, very pleased to watch it. Just my 2 cents here: can you introduce the ingredients one by one?

---

Reflections

It was an interesting project. At first, I had a hard time deciding on a concept for the illustrations. I am not good at it, so I decided not to make it too difficult or too easy. The content of the poster has been summarized from the video so as not to make it too long. I especially enjoyed creating motion graphics. The bgm and concept were appropriate for the culinary region. Complex movements such as sandwiches, grilling, and mixing were complicated.