Information Design - Project 1 & 2
Bachelor of Design (Honours) in Creative Media
Liang Lina 0347076
Information Design - Project 1 & 2
Liang Lina 0347076
Information Design - Project 1 & 2
INSTRUCTIONS
LECTURES
WEEK 9：
WEEK 10：
Project 1: Infographic poster
DESCRIPTION:
After time exploring media and learning about information design, you will
now develop an infographic that presents a series of different processes
as visuals rather than text.
REQUIREMENT:
Your main intention is to analyse the “delivery mechanism’s” that affect
the outcomes of your infographics. Though content is important, however
the aim of this presentation is too look at what makes an infographic
presentation work or does not work. This includes content but only as one
of the many components of an infographic:
PART 1: Infographic poster (20%)
INSTRUCTION:
- Choose 1 infographic poster reference from Internet
- Redesign the poster into A4 size. Sketch the idea and process (5 Marks)
- Redesign and simplify the poster based on visual hierarchy & typography (5 Marks)
- Simplify the poster's design based on color, shape & pattern (5 Marks)
- Attach your final poster on E-Portfolio with explanation and reflective writing (5 Marks)
Poster progress
I thought of the Starbucks process demonstrated by Mr. Fauzi in
class, Then, in the seventh week's class, Mr.Fauzi randomly searched
for an example of recycling.
So I wanted to create a "delivery mechanism" for garbage recycling and
transportation, and thus I began to look for a not-so-good poster based on
this.
- Sorting and disposing of garbage is the first step in garbage recycling, which can reduce the difficulty of subsequent processing.
- Garbage trucks collect garbage on time and load it up to take away. Keep the city clean and tidy.
- The garbage is transported to the processing center for classification or processing. Enter different processing lines.
- Recyclable materials are packed and reused, while non-recyclable materials will be incinerated here for disposal.
Then I began to look for some good references on pinterest, which greatly
improved my subsequent draft and layout.
.jpeg)
.jpeg)
.jpeg)
Then I drew my sketch on the ipad. It was a bit crude, but it established the direction of what I should do in my mind.
I chose to use adobe illustrator for digitization. On the one hand, I think
adobe illustrator is faster. On the other hand, adobe illustrator can
conveniently import Adobe after effects while still retaining my layers.
I'm not too picky about the description of the information. I mainly want to
express it clearly through objects. So I searched for relevant information
online based on my sketches. For example, in the first step, I hope to
highlight garbage classification, where people throw garbage into the trash
can. But I think only the trash can is too monotonous. So I found some
pictures of residential areas online for my reference.
The following is the first version of the final draft. To highlight the
text, I added a red border to the text box, and the number is also within
the red bottom box.
Also, regarding my title, I noticed that if I typed it directly, it would
look very monotonous. So I decided to add a little thickness to it, which
would be more in line with the overall style of the poster.
Finally, following Mr.Fauzi's suggestion, I changed the background color of
the text box to green, which is more in line with my environmental
protection theme of garbage recycling. Besides, the color of my text will
not be similar to the background color, which would cause the content to be
unclear. And the green I chose echoes the green on the garbage truck
and the chimney.
The Final poster：
Project 2: Minimal animated infographic
PART 2: Minimal animated infographic (20%)
INSTRUCTION:
1. Animate your infographic poster into one static loop animation page
2. Loop duration in between 15 - 30 second
3. Size: 1080 x 1920 px (Vertical Video) upload to your own Youtube
channel
SUBMISSION:
1. Digital upload into your Google Drive.
2. Online posts in your E-Portfolio and your reflective writing.
(Please attach the E-Portfolio link here for submission.)
Animation progress
After completing this static information poster, I began to make
animations. In the AI, I talk about fixed backgrounds, immovable houses,
factories, roads and other shareholders in one layer. Then I began to
think about making those moving items.
I gave priority to doing the movement process of three cars, then the
drifting of smoke, the presentation of words, and finally I found that I
had a conveyor belt.
Therefore, I created many layers in adobe illustrator, but I didn't name
them. Mr.Fauzi told me that each layer should be named so that I would
clearly know what each layer was. Obtain a better user experience in Adobe
after effects.
Since the size of the animation is slightly larger, I made some color
changes to the items in the animation. I don't want to have two cars of the
same color.
Adobe illustrator in Adobe after effects.
I was worried that the movement of that car might be too boring, so I made a
slight inconsistency in the speed and movement. Meanwhile, the smoke on the
right looks strange when using a mask, so I used zoom, and the effect is okay.
Regarding the garbage on the conveyor belt, I used the masking function and
copied one of the garbage on the conveyor belt at the same time. Because if 1
moves, the conveyor belt will be empty, so in order to maintain a continuous
animation, I copied one more, which kept the multiple animations of the
garbage on the conveyor belt relatively continuous.
I created the final animation in 1080 x 1920 pixel format and exported it as
MP4 and GIF files. Then, I uploaded the completed animation to YouTube:
LINK
Final submission:
Part 1: Infographic Poster：
Part 2: Minimal animated infographic
FEEDBACK
Infographic: The feedback on the poster is that the text box is too transparent, similar in color to the road below, and the font is white, which makes it easy to blur and hard to see clearly. Or it could be changed to green.
Minimal animated infographic: When making animations, make sure they are simple and smooth, with just some simple movements. Before importing the file for animation production, you can name each layer to ensure that you know what it is in the software.
REFLECTION
Experience
Making infographics is a very difficult thing for me. I choose a bad poster to modify. And it is required to be a progressive mechanism. For me, I screened a great many posters, including the content of the progressive mechanism. I thought of the life of a butterfly, making beverages, online shopping, the degree of obesity, the human sugar intake scale, the pregnant woman's cycle table, and so on. This made it very difficult for me to do this project. Just choosing out the current garbage recycling process wasted a lot of my time.
Meanwhile, my mild obsessive-compulsive disorder led me to constantly grasp some details when making 2.5D posters, which greatly tested my patience in this project. However, during the process of making animations, I recalled the software production that I had forgotten, which was a good thing for me.
Observation
I have observed that static information posters provide clear descriptions and expressions of information, while the dynamic animations make me think more about how to proceed next and what I can do to link them and make them move.
Meanwhile, I also need to observe how my animators are all smooth. How should I do the loop? How should I make this animation coherent and natural? And too much movement will distract attention. So I only set the appearance of text in the first few seconds of the animation, and then it's just a simple loop, giving people the opportunity to read the text content with the animation.
Findings
In this project, I found that animation can enhance the fluency in information design, including for storytelling. It can attract people's attention and guide them to the next part of the content through the direction of movement. Moreover, the progressive mechanism in this project is more conducive to attracting people's attention and guiding them to the next step.
I also found that some minor movements wouldn't cause much impact, but they would be visually interesting, so I deliberately made the smoke on the conveyor belt and chimneys float. Such a small number of actions can also ensure the clarity and prominence of key information.
Comments
Post a Comment