Information Design — Project 1

 Information Design — Project 1

INFORMATION DESIGN

2/2/2026 - 22/3/2026| Week 01 - Week 7

LONG BOJIANG / 0375362/ Bachelor of Design (Honours) in Creative Media

Information Design / Taylor's University 

Table of Content :

 

INSTRUCTIONS

PROJECT 1

·FINAL POSTER

·ANIMATED INSTRUCTABLE POSTER

REFLECTION

INSTRUCTIONS

MIB for Information Design 2026

PROJECT 1

For this project, I had to design an instructable infographic poster using a video from the Pasta Grannies YouTube channel. The goal was to share clear cooking steps and teach the audience through visual storytelling—so I had to study my chosen video closely, break down the full cooking process into simple, structured steps, and chunk the info to make the recipe easy to follow while keeping the design engaging.

Besides being functional, the poster also needed to capture the featured grandma’s personality and her dish’s unique vibe. It wasn’t just about listing steps; I had to tell a story—one that shows the tradition, warmth, and authenticity of homemade Italian cooking.

After watching a few videos, I picked Franca’s “95yr old Rosa makes an easy pasta with stewed peppers and tomatoes!” I loved how her process was detailed but straightforward, turning basic ingredients into a simple, comforting meal with patience and technique—perfect for highlighting the charm of traditional home cooking.

For my pasta-focused infographic, I turned Franca’s process into a clear visual system. I organized the steps from ingredient prep to baking, making the info easy to understand and visually appealing. I also used design choices to reflect the dish’s homely, authentic feel—emphasizing that this isn’t just a recipe, but a tradition-rich cultural experience.

Information Breakdown

To start developing my idea, I rewatched the Pasta Grannies video several times to fully grasp the entire cooking process. Instead of just watching casually, I closely analyzed each step—paying attention to the order, timing, and key techniques needed to make the dish.

Next, I turned the video’s visual steps into simple written instructions. This helped me clearly map out the recipe’s structure, from prepping ingredients to the final cooking step. I then split the process into small, easy-to-follow sections, making sure each step was concise and logical for the audience.

This approach let me effectively chunk the information—critical for infographic design. It helped me tell apart major stages (prep, cooking, assembly) and small actions within each, which later became the basis for my poster layout, ensuring the recipe was clear, visually appealing, and easy to follow.

Visual Research

After that, I carried out some visual research using Pinterest and Google Images to gather ideas for my food infographic design. My main goal was to understand how different designers approach layout, visual hierarchy, and illustration styles, especially in recipe-based infographics.

I explored a range of examples and focused on how information was structured and presented visually. One thing I found particularly useful was how complex cooking steps were broken down into smaller, manageable sections, making the process easier to follow. I also looked at how the flow of information guided the viewer step by step, ensuring the sequence felt natural and clear.

Many of the references I selected showed strong organization and clarity. Their layouts effectively guided the viewer’s eye through the content using spacing, alignment, and visual cues. I also noticed that combining text with illustrations made the instructions more engaging and easier to understand.

These inspirations influenced my own design direction. I started to focus more on clarity, logical order, and visual storytelling. They also helped me experiment with presenting the cooking process in a structured and visually appealing way, turning it into an effective infographic poster.

Fig 1.0 Poster Reference

Fig 1.1 Poster Reference

Color Platte

Fig 1.2 Color Platte

For my tubular pasta infographic, I chose a color palette based on creamy off-white and cyan, while mainly relying on the natural colors of the ingredients. I felt this approach connects more directly to the dish itself, since the pasta, sauce, and toppings already have strong visual appeal. Keeping their original colors helps the design feel more authentic, while the background keeps everything looking clean and fresh.

I intentionally avoided using overly bright or saturated colors. Instead, I focused on softer, more natural tones to maintain a balanced and cohesive look. This makes the overall design more comfortable to view, while still having enough contrast to clearly separate different sections and guide the viewer through the content.

For the text, I used white for the main body copy. It contrasts well with the cyan and off-white background, but feels less harsh than black. This choice fits better with the light and fresh visual style I was aiming for.

To improve visual hierarchy, I placed colored blocks behind each section heading. I used different shades from the same palette, inspired by the ingredients, so each step is visually distinct. This makes it easier for viewers to follow the sequence and also supports the idea of chunking by breaking the information into clear sections.

Lastly, I added subtle grey shadows beneath key elements to introduce a bit of depth. This helps avoid a flat look and gives the infographic a slightly more dynamic and layered appearance.

Layout Development

Based on the visual references I collected earlier, I started developing the overall composition of my infographic poster by focusing on how to clearly present a step-by-step cooking process. Instead of using a strict grid, I adopted a more flow-based layout, allowing the viewer to follow the recipe through directional arrows and visual cues.

I chose a soft cyan background placed within a rounded central area, surrounded by a textured off-white border. This helps frame the content while keeping the main focus in the center. The layout is organized in a circular flow, guiding the viewer from ingredients, to preparation, cooking, and finally to the plated dish at the bottom. This structure makes the process feel continuous and easy to follow.

To organize the information, I grouped related steps into small sections and used arrows to connect them. This creates a clear visual path, allowing the viewer to understand the sequence without relying too much on text. The placement of elements such as ingredients in the center and steps around them helps maintain balance while reinforcing the idea of process flow.

For the title, I used a bold red “ITALIAN PASTA” combined with a contrasting handwritten-style “HANDMADE” in dark blue. This pairing creates a strong visual hierarchy and adds personality to the design. The contrast between the two styles also reflects the combination of tradition and homemade cooking.

Fig 1.3 Process of Layout

After finalizing the layout direction, I moved on to creating all visual assets digitally using Adobe Illustrator. I illustrated each element, including ingredients, utensils, and food, using simple shapes and clean outlines. This helped me maintain a consistent illustration style across the entire poster.

I focused on making the visuals clear and recognizable rather than overly detailed. The colors were chosen based on real ingredients, such as the red of tomatoes, green of vegetables, and yellow of pasta, while still keeping them slightly muted to match the overall soft color scheme. This approach keeps the design visually cohesive and not too overwhelming.

Asset Digitization：

Fig 1.4 Process of Asset

Once all assets were created, I placed them into the composition following the cooking sequence. I carefully adjusted their positions, sizes, and spacing to ensure the layout felt balanced and easy to navigate. The arrows played an important role in connecting each step and guiding the viewer’s eye naturally across the poster.

I also made sure that important elements, such as the final dish at the bottom, were larger and more prominent to create a clear focal point. Supporting elements like decorative leaves and utensils were added around the edges to enhance the overall theme without distracting from the main content.

Fig 1.5 Process of Poster

In the final stage, I refined details such as alignment, spacing, and consistency in illustration style. I adjusted text placement and contrast to ensure readability, especially within colored boxes. I also reviewed the overall visual hierarchy to make sure each step was clear and easy to distinguish.

After several rounds of adjustments, I finalized the design by ensuring all elements worked together cohesively. The final outcome is a structured and visually engaging infographic that clearly communicates the pasta-making process, while also maintaining a warm and approachable aesthetic.

Fig 1.6 Process of Poster

·FINAL POSTER

Fig 1.7 Final Poster

·ANIMATED INSTRUCTABLE POSTER

1. Max 60 seconds infographic video 720p: 1280x720 pixels (H26/mp4) published on YouTube.
2. Capture the aesthetics and narrative of the poster with movements, SFX, and music.

Since the animation video is a group task, my teammate Lu Yiheng and I discussed our overall approach and decided to base our animation on his MONTANARA Neapolitan Fried Mini Pizza poster. After confirming this direction, we began by analyzing his design in detail to better understand how it could be translated into motion.

At the early stage, we carefully studied the poster to extract key information, such as the main visual elements, the sequence of cooking steps, and how the process was structured visually. We focused on how each step was presented and how the viewer’s attention was guided across the layout, as this would directly influence the flow of the animation.

During this process, we also paid attention to aspects like visual hierarchy, color usage, and typography. We considered how these static design elements could be adapted into animation, especially in terms of transitions, timing, and movement. For example, we thought about how ingredients could appear, how steps could connect smoothly, and how to maintain clarity while adding motion.

This analysis stage helped us build a clear understanding of the poster’s structure and gave us a solid foundation for planning the animation. It ensured that our final video would stay consistent with the original design while effectively communicating the cooking process in a more dynamic and engaging way.

Motion Graphic – Scene Breakdown

Following the research stage, we developed a storyboard and timing map based on the MONTANARA Neapolitan Fried Mini Pizza poster.

The storyboard helped us plan each scene and visualize how elements like ingredients and steps would appear and transition. At the same time, the timing map allowed us to control the pacing, deciding how long each step should last to keep the animation smooth and easy to follow.

Together, they gave us a clear structure and helped ensure the animation had a logical flow and clear presentation.

Timing Map：

 

Story board：

 

AE animation production

Materials

Once we had the basic timeline and storyboard ready, our group split up the animated characters and started the production work. I took on the latter section of the project—covering everything from preparing the coffee all the way to finishing the tiramisu.

For my part, I used Illustrator to design and create all the illustrations I needed to bring that section to life.

Fig 1.8 Animation icons Prepare

Once I wrapped up designing all the icons, I moved on to the illustration part of the project. I started by splitting every design element into separate layers—this way, I could keep everything organized and have better control over each part. Being able to work on one component at a time meant I didn’t accidentally mess up other parts, which made it way easier to tweak shapes, adjust small details, and add colors exactly how I wanted. It also made revising way less of a hassle, since I could edit each element on its own without throwing off the whole design’s consistency.

Animation production

 After completing the illustrations, I moved on to the animation stage using Adobe After Effects. My teammate Lu Yiheng and I imported all the layered assets and arranged them based on our storyboard and planned timing. During this process, we kept reviewing and adjusting our work to make sure the sequence of each step was clear and the overall flow felt smooth.

For the animation, we mainly worked with basic properties such as position, scale, rotation, and opacity to create movement and transitions between steps. We also repeatedly previewed the animation and refined the timing and transitions to avoid anything feeling too fast or disconnected, making the process easier for viewers to follow.

Once the animation in After Effects was completed, we exported all the clips and moved to Adobe Premiere Pro for final editing. In this stage, we focused on trimming, arranging the sequence, and fine-tuning the overall pacing to ensure the video felt consistent and complete.

Although the final animation looks quite simple, the production process actually took a significant amount of time. We spent close to two weeks working on it, continuously making improvements and discussing ideas together. We also referred to YouTube tutorials for inspiration, especially for transitions and animation styles, which helped us explore different approaches. In addition, the basic techniques we learned in class were very helpful in supporting the workflow.

Technically, I mainly used basic animation properties to create motion, and I also applied Trim Paths to animate lines, which was useful for showing step-by-step processes more clearly. Through continuous adjustments and refinements, we were able to produce an animation that is clear, structured, and visually engaging.

Fig 1.9 AE Process

Fig 1.10 AE Process

Fig 1.11AE Process

Some details

Fig 1.12 AE Process

I made an animation of the falling motion using what the teacher taught.

Fig 1.13 AE Process

The knowledge used in creating vector animations is drawn from the gesture of waving one's hand.

Fig 1.114 AE Process

The knowledge used was combined and coordinated with each other, and together with my teammates, we came up with this animation.

Final Video：

 

REFLECTION

Experience
During the poster design process, I initially focused more on the overall visual appearance, aiming to make the design look rich and visually appealing. However, based on my lecturer’s feedback, I realized that my layout did not clearly communicate the message at first glance. Although it looked good overall, it appeared somewhat messy when examined more closely. To address this, I revised the layout by adding numbered steps, improving the organization of information, and creating a clearer reading flow. This helped enhance the clarity of the design.

Observation
Through this revision, I noticed that while my original design was visually attractive, it lacked clarity in communication. There were many visual elements, but without clear guidance, it was difficult for viewers to quickly understand the content. This showed me that without a strong hierarchy and structure, even a visually interesting design can negatively affect readability.

Findings
From this experience, I learned that clarity and logical structure are more important than just visual aesthetics in infographic design. A design should not only look good but also communicate information effectively. I also realized the importance of feedback and iteration, as they help identify problems and improve the overall quality of the work. In future projects, I will focus more on balancing visual appeal with clear communication to create designs that are both engaging and easy to understand.