Information Design - Final Project: Animated Infographics
6.2.2024 - 29.3.2024 / Week 1 - Week 8
Chan Wan Qing / 0350928 / BA
of Design (HONS) in Creative Media
Information Design
Final Project
INDEX:
1.
Final Project: Animated Infographics
2. Feedbacks
3. Reflection
FINAL PROJECT: ANIMATED INFOGRAPHICS
In the final project, we need to do research for the given topic with our group and break down the information into parts - narrative and visualization to educate the viewers about the issue. During the process, we should use questions ‘What, why, where, when, who, and how’ into the building of the narrative before transferring the information onto your storyboard. We should use relevant visuals to create associations of information to the infographics.
Expected outcomes:
- An animated infographic informing the audience about a given topic (min 1.5 - max 3 min video)
- Must include some form of data/statistics.
- Must use the questioning technique and provide answers.
Task Division
- Research on Topic: Joey and Wan Qing
- Script: Han and Joey
- Storyboard: Wan Qing
- Assets: Adriena and Vanessa; Background: Joey
- Animation: Han and Wan Qing
- Background Music + SFX: Joey
- Voice Over: Adriena
Research
Our chosen theme is The Impact of Social Media on Society. As the topic is very broad, we narrowed it down into one direction and we will be examining how social media platforms facilitate cyberbullying, harassment, and online abuse, leading to detrimental effects on victims' mental health.
First, we did some information research about cyberbullying and how it relates to social media. We then compiled it together.
Information Research
Script + Storyboard + Assets
We narrowed down the information as we don't need all of them in our infographics. We created a presentation slide to include our research, moodboard, visual references, storyline and storyboard. Before sketching on the storyboard, we first wrote the storyline and the script with visual suggestion.
Script and Visual Suggestion
Following the script and visual suggestions, we sketched our storyboard and put them in the slides that contains all information and visuals we have collected through researches. Initially, the storyboard focuses too much on animation with storyline, sir advised us to include statistics such as graph, chart or so on to show the information.
We compiled all the information, visuals, storyboard, script and more into the slides and started to work on the assets. We divided our work to illustrating the assets, animating and background effects. We also discussed which typeface to use in our video together. We shared the file as we proceeded with our work.
.png)
Assets
Assets Progress 1 (Character)
Assets Progress 2 (Expressions)
Assets Progress 3 (Typeface)
In week 6, we showed sir our animatics, which is a really rough sketch with background music and voice over. We received feedbacks from sir and started to animate the assets. After receiving feedbacks, we did a few changes and add some more assets.
Animatics
Final Project Spreadsheet
Animation
After finishing the assets, we started to animate the assets in After Effects. I started to animate the scenes with static text first. Instead of fading in the whole text, our group decided to use 'typing out' effect on the scenes consist of static text. To make the effect, I added animation to the text and adjusted the values. Since the scene should be match with the duration of voice over, I adjusted the duration of the animations following the duration of the voice over. However, for some of the scene, where the voice over is too short, the text will be too rush if I followed the voices, so I adjusted each of the text animation to about 3 to 4 seconds.
Graph for S22
.png)
After animating the text, I started to animate the other scenes with the assets. I copied the assets and background and placed them into a new artboard in a different illustrator file according to the visual suggestions so that it will be easier to import, animate and export in After Effects.
Illustrator Progress (Assets - Scenes)
I placed every assets into different layers since I have to animate each elements differently. I also labelled each layers so that I will not be confused while animating in After Effects.
.png)
Illustrator Progress (Layers)
In After Effects, I imported the Illustrator file as composition (layer size) for each scenes. I used opacity, position to animate the scenes.
After Effects Progress 1 (Start of Scene 22)
After Effects Progress 2 (End of Scene 22)
Scene 22 (Progress)
After finishing the scenes (S16-S28), I matched each of the scenes according to the duration of voice over in Premier Pro.
For some of the scenes, the animation is too slow, so I adjusted the speed of the scene in After Effects and also in Premier Pro so that the duration of the scenes matches with the voice over.
Animated Infographics 1
In week 7, our group showed sir the animated infographics. Sir gave us some comments on the infographics on some of the scenes, graph and visuals. So, we did some amendments on the scenes which sir commented on. We added some of the assets too based on the feedbacks.
Final Animated Infographics
FEEDBACKS
Week 3 / Final Project
Use character related to the topic in the video.
Week 4 / Final Project
Include statistics (graph, bar chart, etc.) in the final animated infographics video.
Week 5 / Final Project
Remain consistency for all assets.
Week 6 / Final Project
Can include subtitles for certain word (points) with pop up effects, include sound effects. Do not let the animation stop at one scene for too long, around 3-4 seconds (for static scene) is enough. The assets are consistent. For sensitive scene (scene showing self-harm and suicide), can use statistic to show the context or use newspaper cuttings. Can play with the colours since we have the colour palette. The typeface is ok.
Week 7 / Final Project
- Put text in the phone screen
- Make the graph clear
- Hold the graph a bit longer
- Put two lines for title if too long
- Visual is confusing - show a bit more clearer (self esteem fall)
- Social isolation- crowd / one person
- Use color to show verbally abuse etc
- Make it look more like a classroom - add characters etc
- Add 20% of participants of survey
- Counsellor sitting taking notes
- Graph add title - put a blank color screen
- Make the titles all consistent
- Limiting exposure by using a clock or select some social media and put it in the trash - animation not very clear
REFLECTION
This is a project requires our group to work on together so that everything is on track and can be done within the time given. Working on the group project to create an animated infographics was an enriching and collaborative experience that provided valuable insights into the process of visual storytelling. From choosing the theme and selecting a topic, it was a both challenging and rewarding process, each of our members gave their opinions and ideas so that we could move to the next stage, research. From here, we started to divide our tasks so that the work could be done evenly. In the next stage, we started to have storyline, visuals for the infographics, which is a big step nearer to the final outcome. We navigated through the various stages of conceptualization, design, and production, each member contributed their skills and perspectives from script, illustrating to animating and video editing. Although there are some challenges and concerns throughout the process, we eventually got through based on the feedbacks given. This project not only taught us the importance of teamwork but also the power of visual storytelling in conveying complex information effectively.
Comments
Post a Comment