Information Design - Project 1 & 2
Week 1-Week 7
Tan Pei Yun / 0345386
Information Design /Bachelor of Design in Creative Media
Project 1 & 2
Instructions
Individual task :
Week 2 - 19/03/2022
- Recommend 3 Professional Motion Graphics on blog with Rationals & Inspirations.
- Share my personal burnout experience on Blog.
1.Zach Pogrob (@behaviorhack)
Fig 1.0 Animation work #1 by @behaviourhack
Fig 1.0 Animation work #2 by @behaviourhack
The minimalist motion graphic of Zach Pogrob's animation caught my eye when I was watching his instagram reels. It's simple, informative, yet motivating. With his animation, I felt that animation is not simply moving illustrations, but we can use it and enhance it for a more attractive result.
2. Jaedoo Lee (@_jaedoo)
 |
| Fig 2.0 Animation work #1 by @_jaedoo |
 |
| Fig 2.1 Animation work #2 by @_jaedoo |
 |
| Fig 2.2 Animation work #3 by @_jaedoo
|
Jaedoo Lee is an illustrator and animator based in New York. I enjoyed how his work often uses thin outlines with bold saturated colours to his illustration animation work. Somehow, I really admired him where he seems like always have a weird but creative ideas into his artwork.
Link to https://jaedoolee.com/
3. Stephen Ong (@stephenonguk)
 |
| Fig 3.0 Animation work #1 by @stephenongkuk |
 |
| Fig 3.1 Animation work #2 by @stephenongkuk |
 |
| Fig 3.2 Animation work #3 by @stephenongkuk |
Stephen Ong is an animator, designer and film-maker based in the UK who uses playful design and animation to tell short stories. There is an immediate energy and vibrancy to his work that makes it stand above the crowd.
Link to https://stephenong.co.uk/
My personal burnout experience as a university student :
I had this similar burn out experience during last semester during August sem. It was mixed feeling during last semester. A feeling of mixed emotional exhaustion and feeling overwhelmed with bunch of assignment work and with my own part time job. Thinking back, I do not know how I able to manage to overcome it together bring back myself to normal. During that semester, I was way too stressful and do not know how to manage work life balance together with my own health and sleep habit. It was more onto academic stress, I constantly reminded myself to make sure to maintain the CGPA score, and eventually I do not know it actually secretly making me stressful to my mental health. It makes me become somehow lack of interest to my passion in design field and impaired ability to focus when having class.
Project 1: Instructable Poster
In the project 1 , we were tasked to do an infographic poster for one selected recipe from youtube .The project is to study one video, breakdown and chunk the preparation and cooking process into an intractable poster. In that, we have to try andf capture each Grandma’s personality and unique dish identity into the poster as part of the narrative structure.
Moving on we have to animate into a 60 seconds infographic video that can transmit a set of instructions and at the same time to educate the audience.
Note :
- Poster size : 1240 x 1750 pixels or 2048 x 2048 pixels
- Video : 720p : 1280 x 720 pixels published on Youtube (set to unlisted)
Chosen Granny - Anna Maggio.
Fig 4.0 Timballo Eggplants Oven Baked Pasta by Anna Maggio
Granny Anna lived in London and was born in southern Italy, and it's evident that her personality is very sweet, cheerful, and passionate when it comes to making her own recipe for Timballo eggplant pasta. Timballo is actually baked pasta dish in typical southern Italy.
Instructions & Ingredients
 |
| Fig 4.1 Key moments of the steps in making Timballo |
Ingredients :
- 2 eggs
- 2 eggplants
- 1 medium sized onion
- 1-2 garlic cloves
- 2 table spoons olive oil
- 1 handful basil leaves
- 1 jars of tomato sauce
- 500 ml tomato pulp or passata
- 1/4 teaspoon salt and pepper
- 2 ounces Mozzarella cheese
Steps :
Phase 1
- Firstly,cut the eggplants into slices and sprinkle the salt to the eggplants and put them to drain the juices for half an hour to let it dry.
- 2 eggs and dunk each slice in flour and add them inside the vegetable oil to let it fry until golden.
Phase 2
Second prepare the Tomato sauce
- Add the olive oil to the pan and cooked the onions.
- Add the garlics for flavouring and also add the passata ,tin tomatoes and salt to maximise the favour of the sauce and stir it well.
- Add fresh basil to the sauce and boil the sauce
- Boil the short pasta (either macaroni or penne)
Phase 3
Assemble the timbale
- Prepared a pot and layer the tomato sauce, onions, eggplants and pasta
- Sprinkling each layer with mozzarella cheese
- Finishing of with the mozzarella , fresh basil and remaining tomato sauce and lots of ground black pepper
Baked for 40 minutes
Lastly, Served with wine and sunshine, cheers !@pastagrannies , recipe by Anna Maggio.
Inspiration mood-board
 |
| Fig 4.2 Inspiration mood-board |
Looking for some ideas on Pinterest, I found myself enjoying the style of vintage-looking posters. Generally, the artsy style are more towards realistic, hence it gave me some idea that could apply into the infographic poster.
Progress (Procreate , Illustrator & Photoshop)
 |
| Fig 5.0 Progress of tracing the baked pasta in Procreate |
As for the mood-board, I initially thought of making them look vintage menu / recipe-like, and therefore the style should be more realistic. After tracing and illustrating the first pasta, I realized it took longer than I expected which is time consuming, but the outcome was nice and worth it, at this stage, it was quite heartache. I wasn't sure which style I should go for.
 |
| Fig 5.1 Idea 01 - Sketch and Rough outcome |
 |
| Fig 5.2 Idea 02 - Sketch and Rough outcome |
This second idea was my favourite, I love how the drop pasta adds movement to the poster. However, the steps did not have enough space to the poster, so I came up with a few other ideas before moving on to Adobe Illustrator.
 |
| Fig 5.3 Idea 03 & 04 sketches |
Illustration assets
 |
| Fig 5.4 Collected Reference |
While scrolling through google, I collected some references that I could trace and transform into my own illustration style. Below are some of the progress :
 |
| Fig 5.5 Illustrated Granny Anna |
 |
| Fig 5.6 Illustration Assets Progress |
Besides, I was having an idea to include Granny Anna to the intro of the animate video, so I try my very best to illustrate her that also holding the timballo pasta.
Fig 5.7 Illustration of Pasta Granny Timballo Ingredients and Assets in PDF
Poster Layout
 |
| Fig 6.0 Sketch and Poster layout in photoshop |
The final poster layout was derived from ideas 03 and 04, and I love how they turned out (that shown at the right side) Each gives a different feeling and direction.
Final outcome of Pasta Granny Intractable Poster
 | |
|
 |
| Fig 7.1 Final Outcome of Pasta Granny Intractable Poster 02 in JPG |
| Fig 7.2 Final Outcome of Pasta Granny Intractable Poster in PDF |
Project 1 Part 2 : Animated infographic
My Plan for animated infographic :
1. Illustrator & Photoshop - create the assets and background
2. After Effect - animate the illustration assets
3. Premiere Pro - focus on sounds effect, background music and texts
Illustrator & Photoshop - Assets & Background
 |
| Fig 8.0 Separating layers in Illustrator |
 |
| Fig 8.0 Background progress in photoshop |
In order to match the subject of the poster, I made a video background that could easier to animate and use the Illustrator assets that were already divided into their many layers. The background in the video was created using Photoshop.
Animate the illustration assets
 |
| Fig 9.0 Using Transform tool to animate in after effect |
I decided to split it where after effect I would only focusing on animate the illustration , while premiere pro focusing on text and sound effects. In after effect, I used most of the transform tool that are in opacity , scale , anchor point and position. There's also a part where I used puppet tool to do the cracking egg animation.
Texts, sounds effects, background music
 | |
|
After export the video in after effects , moving on to premiere pro , I start by doing the intro by adding the text that matches with my previous poster.
 |
| Fig 10.1 Type Writer Effect Fig 10.2 Tutorial on Type Writer Effect |
Mentioned in the project 1 part 1 , the idea is to make it "vintage" feel, therefore to keep it the video consistency I looked up a type writer effect to follow and transform into my own video. It was quite surprised, the tutorial was easy and straight-foward.
 | |
|
About the text parts, it is to focus on the steps and to make sure the sentence are clear and understandable, it does took me awhile to finish the text and keep checking the sentence and my "bad" grammar before moving on to add all the related sound effect.
Sounds Effects
 |
| Fig 11.0 Added the sounds effect in PR |
 |
| Fig 11.1 Overall Progress in PR |
 |
| Fig 11.2 Downloaded Sound Effects |
Final Outcome : ANIMATED INTRACTABLE POSTER
| Fig 12.0 Final Animated Intractable Poster |
Project 2: Motion Graphic
Exercise 3 - Kinetic Typography
Fig 13.0 Made you look official MV - Meghan Trainor
Fig 13.1 Made you look official lyrics MV - Meghan Trainor
After we finalize the kinetic typography and decide which song to use, which will be Made you look by Meghan Trainor. In addition, we realize the official version of the MV has its own lyrics video, but we believe our team can enhance or improve it. Following this, our team had gathered and discussed the art direction, combining references and moodboards into Miro-boards and Google Docs.
 |
| Fig 13.2 Moodboard in Miroboard |
In Miroboard , we had split into different sections that are in colour code inspiration of the MV , video background idea , font and moodboard. The font are also one of the important element into this video , so we had keep discussing about the typeface we would like to use :
Ideation :
- 7 rings by Ariana Grande
- Made you look by Meghan Trainor (Final Chosen Song)
 |
| Fig 13.3 Individual Task : Pre-chorus |
Our teams divide to split into different part and each of us have to do the Kinectic typography with roughly 4 line per person. I decided to choose the pre-chorus part where I think the lyrics is quite fun to do with few different lyrics.
Progress in after effect:
 |
| Fig 13.4 Progress in after effect - pre-chorus / colour code |
Followed with the colour code and mood-board that we had discuss in our miro-board, I had used the background colour that are mostly in pink, yellow and red and light purple .
 |
| Fig 13.5 Amendment - drop and walk part (Week 6 , 06/02/2023) |
During week 6 feedback session, there are some feedback given by Martin where during my part about the "drop,drop" and "walk,walk". My main idea was to emphasize mainly on the both words where the part walk , w and alk , both of them walk to each other , and the word drop onto the floor. However, Mr Martin suggest that the "drop,drop" could put it up to maintain the space of the video and wont look weird and awkward. I do my very last changes of both of it and submit it to the drive folder.
Final Outcome : KINETIC TYPOGRAPHY
| Fig 13.6 Final Kinetic Typography Video |
Drive link (individual ) : https://drive.google.com/drive/folders/19k1mKGIzhb-ley3EtYKCDjtMYiTFjYqm?usp=sharing
Exercise 4 - Motion Graphic Chart : Pie Chart
 |
| Fig 14.0 , Week 3 Task - Pie Chart |
Progress
 |
| Fig 14.1 Overall Pie Chart Progress in After Effect |
 | |
|
Steps I had followed :
Duplicate layer
Choose colour from Stroke Colour Option
Rename new layer
Change 2nd Keyframe to 75%
We had an individual task in week 3 where we had to follow the tutorial videos and slides provided by Mr Martin and create a motion graphic chart in Adobe Illustrator. In my case, I was assigned to do B, a pie chart. The process was easier than I expected, and I'm glad I was able to finish it within a day.
 |
| Fig 14.3 Added the title and label |
As soon as I did the pie chart and changed its color, I felt it was quite plain, so I added the title with its label and the data label in percentages. Text and data labels are both animated, with a fade-in effect for text.
 |
| Fig 14.4 Text animated in using opacity |
Final Outcome : PIE CHART INFOGRAPHIC
 |
| Fig 14.5 Final Pie Chart Infographic in GIF |
| Fig 14.6 Final Pie Chart Infographic Video |
Exercise 5 - Vector Animation
 |
| Fig 15.0 Vector Animation Drive Folder |
 |
| Fig 15.1 Separates the layer in Illustrator |
During week 4 task , I was chosen to animate the version B and to make it easier to animate in Adobe After Effect is it the best to always separate all the layers in Adobe Illustrator.
 |
| Fig 15.2 Puppet Pin Tools & Transform |
I applied transforms that are based on anchor point, position, rotation, scale, and opacity. My opinion is that vector animation B is easier to animate in puppet, especially with the hand of the girl holding the red packet. After clicking the puppet position pin tool, I created a few pins on the selected layers using the puppet position pin tool.
Final Outcome : Vector Animation (Version B)
| Fig 15.3 Final Vector Animation Version B |
| Fig 15.4 Final Vector Animation Version B (with song) |
Reflection
Comments
Post a Comment