Information Design | Final Task: Infographic Video Animation
3/2/25 - 23/3/25 | Week 1 - 7
Iman Mikudim | 0338004 | Section 6 (Group 3)
Information Design | Bachelor of Design (Hons) in Creative Media
Final Task: Infographic Video Animation
SECTIONS
| Feedback
INSTRUCTIONS
Instruction: Based on FLIP group topic
research, produce a basic
video animation.
Description: Using a processed design
framework, you will now
produce an infographic
report to present the
given information to a
‘target audience’ with the
purpose of:
-
Creating
awareness (such as
Global Warming,
Recycle,
etc.)
-
Explaining a
process (such as
"how to"
video)
-
Defining a
concept (such as
"What is Fast
Fashion", "What is
Color Wheel",
etc.)
Any time based media and
software using
photography, vector
imagery.
Design Considerations:
-
Organization
Principles – LATCH and
Content
Organization
-
Aesthetic Principles
– Animation
principles
-
Cognitive Principles
– Principles of
visualization
Output Expectation: The presentation must be
deliberated on, consider
each assessment rubric of
sorts to your final
outcome:
-
Show
causality
-
Multivariate
graphics and
visuals
-
Integrate word
number and
images
-
Content count
-
Within
eyesight
-
Use multiple
charts
-
Do not
de-quantify
Requirement: Video resolution: 1920px x
1080px HD (min 1.5 mins max
3 mins).
Submission:
-
A ± 3 minute
animated infographic
uploaded into
YouTube
(unlisted)
-
Digital compilation
into your Google
Drive Folder
-
Online posts in
your E-portfolio as
your reflective
studies(Please
attach the
E-Portfolio link
here for
submission.)
Process
Fig 1.1 Group Meeting ScreenshotsIn week 1, we explored 3 potential topics for our infographic video animation:
- How to make a chocolate cake? (Explaining a process)
- What is procrastination? (Defining a concept)
- What is a balanced diet? (Creating awareness)
Fig 1.2 Task Process Development (PDF)Fig 1.2 presents a PDF document detailing the development of our task process, covering the pre-production, production, and post-production phases.
i) Proposal
Fig 1.3 Task Proposals
Fig 1.3 shows our proposal slide, which outlines the definition, the reasons for choosing this topic, the objectives, target audience, and essential information for each aspect.
After careful discussion and brainstorming three proposal topics in Week 1, we voted on "What is a balanced diet?" as our project focus due to its relevance and potential impact on public health awareness. This topic aims to raise health awareness and promote better eating habits.
ii) Moodboard
Fig 1.4 Moodboard
The pre-production phase focused on planning and designing the visual and structural elements of our animated infographic to ensure it would be visually engaging, informative, and easy to understand. To establish a cohesive look and feel, Esma and Jun Ming created a moodboard featuring our chosen colour palette, typography, and overall aesthetic. This served as a guide to maintain consistency throughout the animation.
Fig 1.5 Colour Scheme & TypographyFor the colour scheme, we selected warm and natural tones like brown, orange, and yellow to convey a friendly and healthy feel. We also chose a bold and playful font called ‘Super Foods,’ which adds a fun touch while remaining easy to read.
Fig 1.6 Visual ReferencesTo gather visual references, we compiled various food and nutrition infographics, including meal plate diagrams, which guided us in creating clear and engaging visuals for our animation.
iii) Storyboard, Wireframe & Sketches
Fig 1.7 Infographic Storyboard
To ensure a smooth animation flow and effective storytelling, I created a storyboard and wireframes to map out the sequence of scenes and transitions in our infographic. These wireframes served as blueprints for organizing visual elements and ensuring a clear information flow. They included layouts for a heptagon-shaped nutrition chart, an infographic on energy benefits, and a pie chart visualizing a balanced diet.
Fig 1.8 Refined
Sketches
Process
This process allowed us to refine our ideas before moving on to detailed illustrations and animation, with Yan Zhi Xuan sketching the initial visuals for the animated infographic.
v) IllustrationAfter finalizing our visual direction, storyboard, and design elements, we began the production phase by turning our sketches and wireframes into polished digital assets. Using Adobe Illustrator, we converted sketches into detailed vector illustrations, achieving a clean and cohesive visual style consistent with our theme. These assets were then animated to create dynamic visuals, enhanced by voiceovers for a more immersive experience.
Fig 1.9 Illustration Process in Adobe Illustrator
Fig 1.10 Final Illustrations
Fig 1.11 Final
Illustrations
(PDF)
vi) Animation
Click HERE for the link to the Individual Scenes Animation.
Fig 1.12 Animation
Process in After
Effects
(PDF)
After completing the illustrations, Natalie and Jun Ming animated them using After Effects, incorporating motion, smooth transitions, and visual effects to enhance engagement and create a lively, dynamic infographic.
Fig 1.13 Storyboard Voiceover Script (PDF)
With the animation completed, Jie Xuan and Xiang Lam proceeded with voice acting and editing to finalize the video. They began by recording the voiceover based on the script in Fig 1.13, ensuring the narration aligned smoothly with the visuals.
Click HERE for the link to the Sound Effects.
Fig 1.14 Background Music & Sound EffectsFor background music and sound effects, they sourced audio from Douyin and YouTube, enhancing the animation's overall engagement and liveliness.
After finishing the animation and editing, we entered the post-production phase to fine-tune our project, enhance transitions, and prepare it for final submission. This process involved carefully reviewing the animation to identify areas needing improvement.
Fig 1.15 Feedback RefinementsIn Week 6, we received feedback from Mr. Fauzi, who pointed out several issues: a spelling error in "Protein," the need to speed up the essential nutrients chart, and the suggestion to add numbering and enlarge text in Scene 4. He also mentioned that the ending felt abrupt, which prompted us to work on creating a smoother conclusion.
Building on this feedback, we made additional adjustments by Week 7. We addressed the unintended blank screen between Scene 3 and Scene 4, removed a pen element from Scene 4-1, added more animations to Scene 4-2, and improved the voiceover to synchronize better with the visuals. These revisions resulted in a more cohesive, engaging, and polished final animation.
Final Infographic Video
Animation (Submission)
Click HERE for the link to the Google Drive folder.
Fig 1.16 Final Infographic Video Animation Presentation Slides
We wrapped up our project with a final presentation in Week 7, where we showcased our progress and work.
Click HERE for the link to the Final Infographic Video Animation.
Fig 1.17 Final Infographic Video Animation (YouTube)
Instruction: Based on FLIP group topic research, produce a basic video animation.
- Creating awareness (such as Global Warming, Recycle, etc.)
- Explaining a process (such as "how to" video)
-
Defining a
concept (such as
"What is Fast
Fashion", "What is
Color Wheel",
etc.)
- Organization Principles – LATCH and Content Organization
- Aesthetic Principles – Animation principles
-
Cognitive Principles
– Principles of
visualization
Output Expectation: The presentation must be deliberated on, consider each assessment rubric of sorts to your final outcome:
- Show causality
- Multivariate graphics and visuals
- Integrate word number and images
- Content count
- Within eyesight
- Use multiple charts
-
Do not
de-quantify
- A ± 3 minute animated infographic uploaded into YouTube (unlisted)
- Digital compilation into your Google Drive Folder
-
Online posts in
your E-portfolio as
your reflective
studies(Please
attach the
E-Portfolio link
here for
submission.)
In week 1, we explored 3 potential topics for our infographic video animation:
- How to make a chocolate cake? (Explaining a process)
- What is procrastination? (Defining a concept)
- What is a balanced diet? (Creating awareness)
Fig 1.2 presents a PDF document detailing the development of our task process, covering the pre-production, production, and post-production phases.
i) Proposal
Fig 1.3 shows our proposal slide, which outlines the definition, the reasons for choosing this topic, the objectives, target audience, and essential information for each aspect.
After careful discussion and brainstorming three proposal topics in Week 1, we voted on "What is a balanced diet?" as our project focus due to its relevance and potential impact on public health awareness. This topic aims to raise health awareness and promote better eating habits.
ii) Moodboard
For the colour scheme, we selected warm and natural tones like brown, orange, and yellow to convey a friendly and healthy feel. We also chose a bold and playful font called ‘Super Foods,’ which adds a fun touch while remaining easy to read.
To gather visual references, we compiled various food and nutrition infographics, including meal plate diagrams, which guided us in creating clear and engaging visuals for our animation.
iii) Storyboard, Wireframe & Sketches
To ensure a smooth animation flow and effective storytelling, I created a storyboard and wireframes to map out the sequence of scenes and transitions in our infographic. These wireframes served as blueprints for organizing visual elements and ensuring a clear information flow. They included layouts for a heptagon-shaped nutrition chart, an infographic on energy benefits, and a pie chart visualizing a balanced diet.
This process allowed us to refine our ideas before moving on to detailed illustrations and animation, with Yan Zhi Xuan sketching the initial visuals for the animated infographic.
After finalizing our visual direction, storyboard, and design elements, we began the production phase by turning our sketches and wireframes into polished digital assets. Using Adobe Illustrator, we converted sketches into detailed vector illustrations, achieving a clean and cohesive visual style consistent with our theme. These assets were then animated to create dynamic visuals, enhanced by voiceovers for a more immersive experience.
vi) Animation
Click HERE for the link to the Individual Scenes Animation.
After completing the illustrations, Natalie and Jun Ming animated them using After Effects, incorporating motion, smooth transitions, and visual effects to enhance engagement and create a lively, dynamic infographic.
With the animation completed, Jie Xuan and Xiang Lam proceeded with voice acting and editing to finalize the video. They began by recording the voiceover based on the script in Fig 1.13, ensuring the narration aligned smoothly with the visuals.
Click HERE for the link to the Sound Effects.
For background music and sound effects, they sourced audio from Douyin and YouTube, enhancing the animation's overall engagement and liveliness.
After finishing the animation and editing, we entered the post-production phase to fine-tune our project, enhance transitions, and prepare it for final submission. This process involved carefully reviewing the animation to identify areas needing improvement.
In Week 6, we received feedback from Mr. Fauzi, who pointed out several issues: a spelling error in "Protein," the need to speed up the essential nutrients chart, and the suggestion to add numbering and enlarge text in Scene 4. He also mentioned that the ending felt abrupt, which prompted us to work on creating a smoother conclusion.
Building on this feedback, we made additional adjustments by Week 7. We addressed the unintended blank screen between Scene 3 and Scene 4, removed a pen element from Scene 4-1, added more animations to Scene 4-2, and improved the voiceover to synchronize better with the visuals. These revisions resulted in a more cohesive, engaging, and polished final animation.
Final Infographic Video Animation (Submission)
Click HERE for the link to the Google Drive folder.
We wrapped up our project with a final presentation in Week 7, where we showcased our progress and work.
Click HERE for the link to the Final Infographic Video Animation.
FEEDBACK
Week 3 (18/2/25)
Specific Feedback:- The wireframes were well-organized and effectively structured.
- After receiving approval, we moved on to the production phase, ensuring the animation adhered to the planned structure.
Week 6 (11/3/25)
- The wireframes were well-organized and effectively structured.
- After receiving approval, we moved on to the production phase, ensuring the animation adhered to the planned structure.
Specific Feedback:- Corrected a recurring spelling error in the word "Protein" throughout the video.
- Scene 1-2: Improved the flow by speeding up the transition of the essential nutrients chart.
- Scene 4: Added numbering for better organization and clarity, enlarged text for improved readability, and refined the ending sequence to create a smoother and more natural conclusion.
- Corrected a recurring spelling error in the word "Protein" throughout the video.
- Scene 1-2: Improved the flow by speeding up the transition of the essential nutrients chart.
- Scene 4: Added numbering for better organization and clarity, enlarged text for improved readability, and refined the ending sequence to create a smoother and more natural conclusion.
Week 7 (18/3/25)
Specific Feedback:- Scene 3 to Scene 4 Transition: Removed an unintended blank screen to ensure a seamless flow.
- Scene 4-1: Removed an unnecessary pen element to maintain visual consistency.
- Scene 4-2: Added more animations to enhance engagement and create a more dynamic experience.
- Adjusted the timing of the narration to ensure better alignment with the visuals for a cohesive presentation.
- Scene 3 to Scene 4 Transition: Removed an unintended blank screen to ensure a seamless flow.
- Scene 4-1: Removed an unnecessary pen element to maintain visual consistency.
- Scene 4-2: Added more animations to enhance engagement and create a more dynamic experience.
- Adjusted the timing of the narration to ensure better alignment with the visuals for a cohesive presentation.
REFLECTIONS
Experience
Working on the animated infographic project was a challenging yet rewarding experience that allowed the team to go through the entire production process, from concept development to final presentation. The project demanded teamwork, creativity, and adaptability, which helped enhance their skills and approach. Additionally, it strengthened their communication and project management abilities, instilling a sense of confidence and efficiency when approaching future tasks.
Observations
Throughout the project, teamwork proved to be a significant strength. Each member contributed to various aspects of the production, including ideation, visuals, animation, voice acting, and editing. The team successfully divided tasks and provided mutual support, ensuring a smooth and collaborative workflow. However, one of the most challenging aspects was maintaining clarity and engagement while ensuring a seamless animation flow. Feedback from Mr. Fauzi played a vital role in refining the work, particularly in enhancing scene transitions, pacing, and voiceover synchronization, ultimately making the project more polished and cohesive.
Findings
The project highlighted the importance of applying design principles, honing animation skills, and embracing the iterative process. It also reinforced the value of effective teamwork and communication in achieving successful project outcomes. Furthermore, constructive feedback proved essential in enhancing the overall quality of the work, demonstrating that guidance and iteration are crucial components of the creative process.
