INFORMATION DESIGN / FINAL PROJECT / GCD60504

on

2/3/2026 -22/3/2026 / (Week 5 - Week 7)

Aricia Man Yi Xuan / 0375026

Information Design / Project 1 / GCD60504

Bachelor of Design (Hons) in Creative Media

Google Drive Link

JUMP LINKS

1. Flip Classrooms

2. Exercises

3. Project 1

4. Project 2

TABLE OF CONTENT

1. Lectures

2. Instructions

3. Final Project

5. Reflection

LECTURES

Jump Links:

INSTRUCTION

Fig.2.1.1 Module Information Booklet

FINAL PROJECT

Description:
Using Project 1 (Instructable Infographic Poster) ad the base, create a 60s animated infographic video in PAIR. 
  • Refine and upgrade the design based on Project 1.
  • Improve clarity, hierarchy, and aesthetics through motion.
Requirement:
  • Max 60s: 720p
  • 1280 × 720 px
  • Export: H.26 / MP4
  • Publish to YouTube (Unlisted)
Production Milestones:
| WEEK 5
  • Timing map: Timing plan for 60s
  • Storyboard: Show what appears and how it transitions
| WEEK 6
  • Animated wireframe motion
  • Visual system finalised
| WEEK 7
  • Rough cut+sound pass
  • Submission
PARTNER

Fig.3.1.1 Poster Selected / (Week 5, 5/3/2026)
Partner: Jiang Jiayu
Base Project Chosen: Montanarine Recipe Poster (Mine)

For final project, Jiayu and I transformed my instructable poster into a 60s animated infographic video. After comparing both works, we decided to use my Montanarine recipe poster as the base for animation. 

PLANNING STAGE

Fig.3.1.2 Separate Layered / (Week 5, 5/3/2026)

Before animating, I separated all elements into individual layers in Illustrator, such as:

  • Ingredients illustration
  • Cooking step illustrations
TIMING MAP

Fig.3.1.3 Timing Plan / (Week 5, 8/3/2026)

Later on, we started to discuss and create a detailed timing breakdown to ensure the animation stays under 60 seconds.

Canva Link: click [ here ]

STORYBOARD
Fig.3.1.4 Storyboard #1 / (Week 6, 13/3/2026)

Fig.3.1.5 Storyboard #2 / (Week 6, 13/3/2026)

Next, we moving on to create the storyboard, my partner Jiayu drew Scene 1, 4, 5, and I drew Scene 2, 3, 6 -10.

Storyboard Overview (Visual Flow):

  1. Title introduction
  2. Adding Ingredients
  3. Kneading the dough
  4. Rest & Rise
  5. Divide → Roll → Flatten
  6. Cook the sauce
  7. Fry dough
  8. Drain oil
  9. Add toppings
  10. Final presentation
ANIMATIC STORYBOARD

After preparing the storyboard, Mr. Kannan told us to create a rough and simple animatic in After Effects based on the storyboard. Therefore, we do a rough animatic in After Effects and arranged the scenes according to the storyboard and added basic transitions to show how the animation would progress. 

Fig.3.1.6 Separate images layers in AI (Week 7, 17/3/2026)

I drew all of the ingredients needed on a paper and use cam scanner & import them into Adobe Illustrator. Then, I separated the images based on storyboard and named the layers for each ingredients and equipment. Then, I imported AI file into After Effects to create the animatic storyboard.

Fig.3.1.7 Trim comp to work area tool (Week 7, 17/3/2026)

I started arranged each scene in sequence on the timeline according to the storyboard flow. I kept the animation simple and rough, mainly using basic position, scale, and opacity keyframes.

To refine the animation, I used the “Trim Comp to Work Area” tool to crop unnecessary parts of each elements to make sure that only the essential action was visible within the frame. For example, in the stirring scene, I cropped the spoon image (Fig.3.1.6) and repositioned it so that it appears to be naturally moving inside the bowl, same as the others.

Fig.3.1.8 Progression in After Effect (Week 7, 17/3/2026)

Fig.3.1.9 Animatic Storyboard (Week 7, 17/3/2026)

This is our rough animatic based on the storyboard, showing the overall flow, timing, and sequence of the animation. Based on the feedback (18/3/2026) given, we can now proceed to the final animation.

YouTube Link: click [here]

ANIMATION DEVELOPMENT

Fig.3.1.10 Storyboard Scene / (Week 7, 18/3/2026)

Before starting the final animation in After Effects, I first organized all of the storyboard scenes in Adobe Illustrator. I distributed each scene based on the storyboard to show the visual flow and structure.

Fig.3.1.10 Storyboard Scene / (Week 7, 18/3/2026)

After that, I created separate Illustrator (.AI) files for each scene so it would be easier for me to import each scene into After Effects.

Fig.3.1.11 Animation references / (Week 7, 18/3/2026)

Pinterest Link: https://pin.it/4Mb9oTy2r

We also found some references of the animation from Pinterest, some movement of stirring ingredients, frying, and pouring. 

Fig.3.1.12 Background references / (Week 7, 18/3/2026)


These were the references background of our animation used.

Fig.3.1.13 Background #1 / (Week 7, 18/3/2026)

Fig.3.1.14 Background #2  / (Week 7, 18/3/2026)

Then, we used Adobe Illustration to draw the background for animation.

Font Used:
  • Title: Segoe Print (Regular)
  • Subtitle: NoahGrotesque-LightItalic/Type1 (Light Italic)

Fig.3.1.15 Work distribute / (Week 7, 18/3/2026)

Work Distribution:
After discussion, we decided to split the animation based on the timeline (Fig.3.1.12).

  • Jia Yu  (0 - 25s)
  • Me (25 - 60s)

Fig.3.1.16 Issue encounter / (Week 7, 20/3/2026)

I waited for Jiayu to complete her part up to 25 seconds before continuing my section. After that, I used her file to proceed with my animation. However, when I opened the file on my computer, it crashed and the visuals became pixelated. As my computer has been experiencing this issue, I decided to go to Jiayu’s house and use her computer to complete the rest of my part.

Fig.3.1.17 Typography / (Week 7, 21/3/2026)

Font Used:
  • Title: Segoe Print (Regular)
  • Subtitle: NoahGrotesque-LightItalic/Type1 (Light Italic)

For this project, we chose Segoe Print (Regular) for the title and Noah Grotesque Light Italic for the subtitle. Segoe Print gives a handwritten, friendly, and casual feel that suits the recipe animation, while Noah Grotesque Light Italic provides a clean and modern contrast. 


Fig.3.1.18 Development #1 / (Week 7, 21/3/2026)

I started with my part, step 5 (Cooking tomato sauce):
I imported the background AI file and place the pan on the stove.

Fig.3.1.19 Development #2 / (Week 7, 21/3/2026)

Later on, I put the ingredients (Olive oil, plum tomatoes, salt) and created the animations using keyframes (Position, Rotation, Opacity). For the fire animation, I used Effect (Wave Warp) to created the movement.

Fig.3.1.20 Development #3 / (Week 7, 21/3/2026)

Next step was frying the dough. I also did the same thing, adjusting the keyframes as well. I added a shape layer on top of the frying dough and animated its opacity to change over time, so that it gradually turns golden as the dough fries.

Fig.3.1.21 Development #4 / (Week 7, 21/3/2026)

After frying the dough, I animated the step of draining excess oil by placing the dough onto a tray lined with kitchen paper. I then added a subtle animation to show the oil dripping out.

Fig.3.1.22 Development #5 / (Week 7, 22/3/2026)

Next, I animated the process of adding the toppings one by one onto the dough, with each ingredient appearing sequentially to clearly show the assembly of the final dish.

Fig.3.1.23 Development #6 / (Week 7, 22/3/2026)

For the final serving scene, I added the “Buon Appetito” text using the mask path tool. I animated the mask path to reveal the text gradually. 

Fig.3.1.24 Development #7 / (Week 7, 22/3/2026)

Finally, I animated the Montanarine pieces being eaten one by one. I made each piece a separate layer and set keyframes to gradually disappear in sequence. 

Fig.3.1.25 Transition / (Week 7, 22/3/2026)

For the transition between steps, I used multiple shape layers and position keyframes. On the timeline, I set the position keyframes for each layer so they move into the frame at specific times.

Fig.3.1.26 Sound Effect / (Week 7, 22/3/2026)

Then, we imported all the sound effect files and match the timing of the action in the animation.

Fig.3.1.27 Timeline Preview / (Week 7, 22/3/2026)

The layers were organized into pre-compose.

FINAL OUTCOME

Fig.3.1.28 Final Outcome / (Week 7, 22/3/2026)

During the progression, we slightly adjusted the timing of several scenes to create a smoother animation flow. For the beginning ingredient introduction, we decided to remove the step where ingredients pop up one by one and instead showed them directly pouring into the bowl. Thus, the final animation differs slightly from the original animatic.

FEEDBACK
Week 7 (16/3/2026)
Specific Feedback: You guys need to do a simple, rough animatic based on your storyboard. Just a very rough animation to show how they move in and the time arrangement. 

Week 7 (18/3/2026)
Specific Feedback: You know what you're doing, the placing looks good with what I watched, I could understand that it goes next and next. That is good so I don't have to go detail. Do you plan to have a tax slides out? Is there a change of colour of the background? Hope to see that you have variety of styles and please proceed to final. 

REFLECTION
Experience:
This final project was fun as I worked with my partner, also my friend, Jia Yu, and we created a 60 seconds recipe animation using After Effects together. We went through several stages, including planning, timing plan, storyboard drawing, rough animatic creation, and final animation. However, the rough animatic stage was quite rushed, as I initially did not realize that we were required to create one. Because of that, I completed the animatic within around four hours in a short period of time before consult with Mr. Kannan. Eventually, the animatic was done well and it helped us move forward with the project and provided a basic structure for the animation.

During the process, I also encountered a system issue where some elements crashed and couldn’t be viewed when I tried to open my partner’s file on my computer. To solve this, I had to use her computer to complete all of my parts, which delayed some workflow. Luckily, we were able to finish the work on time.

Observation:
During the process, I observed that having a clear planning and timing structure was very important because it guided the entire animation flow, so it won't look to slow or too quick. The storyboard helped us visualize each scene as well. The rough animatic allowed us to test pacing and transitions before moving into the final animation. However, although I had prepared a timing plan earlier, I noticed that some scenes did not have enough time when applied in the animatic. Therefore, I made small adjustments to the timing arrangement to ensure the animation flowed more smoothly. 

Findings:
I learned that pre-production stages was important to able create a successful final outcome. We need to have a proper planning to make the outcome more efficient and organized. Additionally, I learned that collaboration was very important, luckily my partner was my friend so we doesn't have any miscommunication. Overall, this project improved my technical skills in After Effects, especially creating animation, and also taught me to adapt when technical issues happens.



Comments

Post a Comment