Labels

Information Design - Exercises


Apr'26
Brendan Fedya / 0376283
Information Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Information Design / Exercises

TABLE OF CONTENTS

 I. Lectures

II. Tasks

III. Feedbacks

IV. Reflections

I. LECTURES

➼    Lecture 1: Motion Graphics

Set on music first before animation so it will be in sync with the video. Storyboard is also important to provide visual reference on key scenes. Keyframe use easy ease helps alot.

➼    Lecture 2: Vector Animation

Separate vectors into several layers before animating in After Effects, so we can animate those layers differently.
Figure 1.1: Vector separation.

➼    Lecture 3: Vector Animation

Continue to put the motions in order, parent-child link could also make 2 vector layers work together, add motion blur and slight bounce mechanics to make it smoother. Puppet tool could also be used to move the vector in a specific motion.
Figure 1.2: Motion blur and puppet tool.

➼    FLIP 1: Types of Infographics

On this week, we formed groups according to Mr. Martin and are supposed to find information regarding different types of infographics. This is essential for us to ground our knowledge before diving deeper into the module.

Here are our presentation slides:

➼    FLIP 2: L.A.T.C.H

After knowing more about infographics, we are now researching more about aspects that build a good infographic design—which is the 5 factors in L.A.T.C.H. This is the system to structure information visually.

Here are our presentation slides:

➼    FLIP 3: Miller's Law

More towards organizing information, Miller's Law focuses on chunking information so the human brain can process information easily.

Here are our presentation slides:

➼    FLIP 4: Manuel Lima's Nine Directives Manifesto

This emphasize that visual choices made in a design must be meaningful, not for the sake of aesthetics only.
Here are our presentation slides:

II. TASKS

➼    5% Quantifying

The first task seems like an icebreaker, we got our hands into physical paper and pens, to create an infographic before starting digitally through software. I decided on quantifying different types of cash money as I have that due to me recently came back from vacation.

Figure 2.1: Quantifying process.

I want to arrange it in a categorization of cash money from different countries, and try to make it fit the paper as well. The advantage of cash money is that every country has a visually distinct design. 
Figure 2.2: Final quantifying design.

Looks pretty neat overall—as long as it is chunked accordingly, it won't confuse the viewers.

➼    5% L.A.T.C.H Infographic

Since L.A.T.C.H principles caters a lot to Pokemon settings, we are asked to do according to that theme. We are free to choose others, but I'm comfortable with it because I actually like about Pokemon also, and have the basic knowledge about how things work in that setting.
Figure 2.3: Time aspect of L.A.T.C.H.

I thought about different generations of Pokemon, which suits the Time aspect. From that, I expanded to the Location aspect, where I illustrated different locations in the map itself. I will then show different Pokemons affiliated with their respective areas.
Figure 2.4: Location aspect of L.A.T.C.H.

After illustrating the base vectors, I added some layers of shades to make it more interesting. 
Figure 2.5: Detailing vectors.

Here is how it turned out:
Figure 2.6: Pokemon infographic with location attached.

Tried to find pokemon that is unique to each of the areas, and group them according to their categories (elements) and hierarchy (evolution). I only find one for each area so the information will not be too overload for the viewers.
Figure 2.7: Adding pokemons.

Preserve the original colors of pokemon's elements, I used the eyedropper tool.
Figure 2.8: Pokemon elements.

Here's the final pokemon infographic:
Figure 2.8: Pokemon elements.

➼    5% Vector Animation

We were asked to do a simple vector animation for this task—vector illustrations are already provided, and we work around that. I was assigned to this image shown below, where I think it would be great if the animation revolves around the sun rising and setting which changes the whole environment.
Figure 2.9: Vector illustration

I put those elements in separate layers through Illustrator, make another version where it shows nighttime (when the sun is not out yet). So what I'm going to do next is just tweak the opacity between two static images so it appears that its moving.
Figure 2.10: Sorting out layers in After Effects

Adding position keyframes for sun and clouds so the image comes to life.
Figure 2.11: Animating keyframes

And here's the final result :
Figure 2.12: Final vector animation.

➼    5% Animated Chart

For this chart, I was assigned to create an animated pie infographic chart. We were taught to use trim paths to strokes in order to animate a chart expanding in a circular motion, which is realtively easy to execute.
Figure 2.13: Pie chart reference.
Then, trim paths are set for each percentage amount, until it totals up to 100% which creates a full circle.
Figure 2.14: Trim paths.

As it is an infographic, we need to add the necessary texts.
Figure 2.15: Adding texts

Here's the final result:
Figure 2.16: Animated pie chart.

III. FEEDBACKS

No major feedback for the exercises.

IV. REFLECTIONS

Immersing ourselves in these exercises are quite fun, it's like an introduction to motion graphic design. Results may not be the best, but it feels like it's a good start to dive deeper into the world of motion graphics. I enjoyed it a lot, hence I might try exploring more things like these during my free time since usual graphic designs has started to get boring...

Labels:

Comments

Post a Comment

Popular Posts