Information Design - Exercises

on





24.04.26 - 15.05.26  (Week 1  - Week 4)

Nur Asma’ Binti Anuar / 0378095 / BDCM

Information Design

Exercises

____________________________

INSTRUCTIONS




Week 1:

This week we were taught to begin our module with the introduction to information design by using After Effects and doing a small animation practice using bouncing balls. We were taught to use motion blur and the 4 main points of key animation; scale, rotation, position, and anchor point. The second was the bouncing effect, which was to make the object move slightly above its original position and goes back to a frame later.

Fig. 1.1. W1 After Effects practice

Final Practice Outcome:

Fig. 1.2 W1 Final animation practice


Then we were given a group task work (FLIP) to learn and show our understanding of Types of Infographic Designs:

FLIP 1 link:

After that we were given the task to find any collection of objects to do our first exercise, which was to sort out a variety of data given and design it in a creative way.

I choose to use a small Lego set for my exercise. I first sort out the categories and count how many each piece set there is before sorting them. Then I placed them in a design which can showcase that it is used for a flower set piece.

Final Exercise Outcome:

Fig. 1.3. Exercise 1.1

Fig. 1.4. Exercise 1.2



Week 2: (Public Holiday)

This week we were self taught on how to do the L.A.T.C.H. exercise. We were given to use Pokemon as our prime example of data. I decided to showcase the 4 different types of Pokemon and habitat. I use the Location, Alphabet, Category, and Hierarchy from the 5 L.A.T.C.H. to demonstrate in the poster.

Final Exercise Outcome:

Fig. 1.5. Final Exercise 2


Week 3:

For this week we were given the task of our FLIP group task exercise on Miller's Law.

FLIP 3 link:

After that we had our vector animation practice on After Effects using the same formula in week 1 but for complex characters. We were supposed to placed the vector groups in different layers in Illustration first so that it could be easier to know which object to animate in After Effects. We were also taught about the Pin tool, so it's easier to move a specific area/joint of an object without the rest to move.

Fig. 1.6. Animation practice

Final Practice Outcome:

Fig. 1.7 W3 Final animation practice

After that we were divided into one of the 4 types of vector illustration to animate in After Effects. I got to do the D illustration. 

First I grouped the layers by layers in Illustrator and then I imported it as a composition in After Effects. I did the same tutorial follow as the class practice. I wanted to make the arms of the man to move up and down motion and his head to bob sideways. Then I wanted to make the ball on the ground to roll out of screen into the screen. I wanted to make the dog's ear to move while he bounced.

Fig. 1.8 Illustrator grouping

Final Exercise Outcome:

Fig. 1.9 Final D animation exercise




Week 4:

For this week we had our FLIP on Manuel Lima's 9 Directive Manifesto.

FLIP 4 link:

After that we had our pie chart animation practice. We were introduced to the Trim Path effect. There are 4 types of chart we had to do; Donut, Pie, Bar, and Line chart.

Our priority is to use the stroke tool instead and avoid the fill tool to have a better circular animation. We then had to place our anchor point in the middle of the circle to make the flow at the center. For the donut chart is the same thing but different stroke size.

Fig. 1.10. pie chart

Then came the bar chart animation practice. This one was a bit different and we use to offset each bar from the other, but it's the same thing as using the Trim Path tool. 

Fig. 1.11. bar chart

Then the last one was the line chart. We just draw a line chart and add in the Trim Path effect and done.

Fig. 1.12. line graph

Final Practice Outcome:

Fig. 1.13. W4 Pie practice

Fig. 1.14. W4 Bar practice

Fig. 1.15. W4 Line practice

Then we were again divided into one of the 4 types of chart. I had to do the Donut chart. First I studied the data, then I used the pie chart tutorial to make the donut animation using the Trim Path. I then planned the text animation to be animated like the vector animation practice in W3 with the bouncing ball practice in W1. I placed the text position out of frame and into the frame while the opacity went from 0 to 100%, after that I placed in the bouncing effect to add in more fun. I made the arrow using the pen tool and also used the same effect as the text. Finally I offset some of the texts and donut chart so that it all doesn't seem to move at the same start and end.

Fig. 1.16. Donut exercise

After getting feedback, I had to adjust the timing and length of the motion a second longer and give an enough resting time for viewers to read the information, so I set it to 8 seconds. And I also gave it a calm background color.

Fig. 1.17. exercise after feedback



Final Exercise Outcome:


Fig. 1.18. Final Donut Exercise

Comments

Post a Comment