Information Design - Exercises
TANG LILIN (0376668)
- MI
- EXERCISE 1: Quantify & visualize data (5%)
- EXERCISE 2: L.A.T.C.H (5%)
- EXERCISE 3: Vector/Character Animation (5%)
- EXERCISE 4: Animation Chart (5%)
- FEEDBACK
- REFLECTION
- Purple
- Pink
- Small
- Medium
- Large
- Smooth
- Matte
- Glossy
- Pearl
- Gradient Pearl
- Nature Retreat: Beau, Fauna, Molly
- Civic & Culture Town: Ankha, Marshal, Raymond
- Sunny Leisure Coast: Marina, Stitches, Tangy
- Adventure Ridge: Apollo, Cherry, Roald
- Location is shown through the central island map. The island is divided into four zones: Nature Retreat, Civic & Culture Town, Sunny Leisure Coast, and Adventure Ridge.
- Alphabet is shown through the arrangement of villagers within each zone. For example, in Nature Retreat, the villagers are arranged alphabetically as Beau, Fauna, and Molly.
- Time is represented through each villager’s birthday date. I did not add a separate timeline. Instead, I placed the birthday information directly under each villager as a tag. This makes the time information feel more natural and easier to connect with the characters.
- Category is shown through the villager tags. Each villager is classified by personality, species, and house style.
- Hierarchy is reflected in the overall information structure: island → zone → villager → tags. This helps readers move from the main island map to the specific details in the poster.
- Green represents personality.
- Beige represents species.
- Blue represents house style.
- Pink represents birthday.
Before importing the file into After Effects, I divided the illustration into different layers, such as the windmill, windmill shadow, trees, mountains, mountain shadow, sun, clouds, grass, and background elements. This step was necessary because each object needed to be animated separately in After Effects.
After organising the layers in Illustrator, I imported the file into After Effects using Composition – Retain Layer Sizes. This allowed the separated Illustrator layers to remain editable and independent in the After Effects timeline. I also enabled Continuously Rasterize for the Illustrator layers to keep the vector artwork sharp during animation.
The whole animation was created within a short duration of two seconds. In the timeline, I mainly used the basic Transform properties, including Position, Scale, Rotation, and Opacity. These four properties helped me create a simple but clear motion sequence.
The animation begins with several objects entering the scene through Position keyframes. Some elements move in from outside the composition, while others shift slightly into their final placement. This gives the animation a sense of movement instead of showing the full illustration immediately.
I also used Scale keyframes to make certain objects appear gradually. For example, some landscape elements and shadows were scaled from a smaller size or from 0% to their final size. This created a growing or revealing effect within the short animation.
For the windmill, I used Rotation keyframes to animate the blades. The rotation makes the windmill feel active and becomes one of the main moving elements in the scene. This part helps add energy to the overall animation.
I used Opacity keyframes for several layers so that objects could fade in smoothly. Instead of appearing suddenly, the elements gradually became visible. This made the animation feel softer and more polished.
After setting the keyframes, I applied Easy Ease to all keyframes. This helped the movement become smoother because the objects no longer moved in a stiff or mechanical way. The motion starts and ends more naturally, which makes the two-second animation feel less abrupt.
Finally, I turned on Motion Blur for the moving layers. This added a slight blur to fast-moving objects, especially during position changes and windmill rotation. The motion blur helped the animation look more natural and reduced the harshness of the movement.
Below is my final work:
For this task, I created a motion graphic pie chart based on the given data about mental health and personal concerns reported by students. The chart includes several factors, such as stress, sleep difficulties, anxiety, depression, relationship difficulties, finances, roommate difficulties, alcohol use, and physical injury. My main goal was to transform a static pie chart into a clearer and more engaging animated data visualisation.
First, I arranged the overall layout in After Effects. I used a black background to create strong contrast and make the chart, text, and connecting lines stand out more clearly. The title was placed at the top of the composition, while the source information was positioned at the bottom. The pie chart was placed in the centre, with labels arranged on both the left and right sides. This layout helped the information feel more balanced and allowed each data label to connect clearly to its corresponding pie slice.
After setting up the layout, I created the pie chart using separate shape layers. Each slice of the pie chart was separated into its own layer so that every data section could be animated individually. This allowed me to control the timing, colour, and movement of each slice more precisely. I also added white connector lines from the chart to the text labels, helping the viewer understand which category each slice represents.
To animate the pie chart, I used effects such as Radial Wipe and Trim Paths. The pie slices were animated to appear gradually, creating the effect of the chart being built up piece by piece. Instead of showing the full chart immediately, I staggered the timing of each layer in the timeline so that the data appeared in sequence. This made the animation easier to follow and helped the viewer understand the chart progressively.
The text labels were also animated separately. I adjusted their Position and Opacity keyframes so that the labels faded in and appeared after their related pie slices. This prevented too much information from appearing at once and made the motion graphic feel more organised. The connector lines were animated to extend outward, linking the pie chart to the labels in a clean and readable way.
During the process, I realised that the original colours looked too random and visually messy. To improve the overall design, I changed the pie chart into a more unified blue colour palette. Different shades of blue were used to separate the categories while still keeping the chart visually consistent. The larger and more important sections were given brighter blue tones, while the smaller sections used darker shades. This made the chart look more modern and professional while maintaining clear data separation.
Finally, I refined the timing of the whole animation in the timeline. The layers were arranged in stages, starting with the chart elements, followed by the labels, connector lines, title, and source. By controlling the order and duration of each layer, the final animation became smoother and easier to read. The completed motion chart presents all the data in the pie chart while using animation to guide the viewer’s attention through the information step by step.
Overall, this process helped me understand how motion graphics can improve data visualisation. Instead of simply presenting a static chart, animation can make the information clearer, more engaging, and easier for the audience to follow.
Comments
Post a Comment