Information Design - Project 1: Animated Infographic Poster
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Information Design
Project 1: Animated Infographic Poster
Index
2. Instructions
Lectures
Instructions
|
| Fig1.1 Poster 1 |
Once I selected a few options, I reached out to my lecturer for approval before proceeding with the redesign. It was important to make sure the chosen poster met the project’s criteria, and I wanted to ensure I was heading in the right direction. After receiving permission, I felt more confident about my choice, but just to be safe, I decided to select an additional infographic as a backup. This extra option would give me the flexibility to change direction if needed.
|
| Fig1.2 Poster 2 |
Finding References
|
| Fig1.3 Infographic Poster References |
Since my selected infographic poster was food-related, the next step was to find references that could guide the redesign process. I focused on looking for other food-themed infographic posters that could inspire the design elements, layout, and presentation of data.
I came across several posters that shared similar themes. These posters often used vibrant colors like red, yellow, and green to indicate various states, such as danger or health, which helped convey the message effectively. These color schemes were particularly useful for representing nutritional information and categorizing food items according to their health impact.
One of the key features I found in these references was the use of charts. The charts provided a clear and structured way to present the composition of the food items, such as their calorie count, nutritional values, or ingredient breakdowns. This method of displaying data was not only effective but also made the information easy to understand at a glance.
Among the references I reviewed, I particularly liked the infographic in the top right corner. It presented food composition in a unique and visually appealing way, making complex data accessible and engaging. I found this approach to be very suitable for my redesign, as it demonstrated how different ingredients and their quantities could be presented in a straightforward yet creative manner.
These references provided a solid foundation for how I would approach the redesign of my own poster, allowing me to borrow elements like vibrant colors, clear charts, and engaging data visualization methods that would enhance the overall effectiveness of the infographic.
|
| Fig1.4 Sketch |
For the next stage, I summarized the content of the original poster. The poster featured four different types of fast food, along with their ingredients and the associated health risks. I focused on identifying the key elements of the content to ensure that the final design would effectively convey the most important information.
Below is my summary of the key components: the four types of fast food, each with a breakdown of its ingredients, and how these ingredients might pose health risks. This summary allowed me to focus on what truly needed to stand out in the redesign – the health risks and their potential impact on consumers.
|
| Fig1.5 Points in Original Poster |
Once I had a clear understanding of the content, I began sketching the layout of the redesigned infographic. My goal was to highlight the four fast food items, but the primary focus would be on the health risks and their connection to the food's ingredients. I wanted to make the health aspects more prominent and easier for the audience to grasp.
The sketch I created is a rough layout, serving as a visual guide for where each element would be placed. I made sure to emphasize the sections that highlighted the risks and health-related information, ensuring they would stand out in the final design. The use of vibrant colors and clear charts, as seen in my reference posters, would help to make these critical pieces of information pop.
|
| Fig1.6 Fonts and Color |
For the redesign, I decided to simplify the information to make it more digestible. I focused on presenting the health risks and ingredient breakdowns in a concise manner, reducing unnecessary details.
I also aimed to optimize the charts for better clarity and visual appeal. By adjusting colors and improving readability, I made sure the data would be easy to understand at a glance.
In addition, I planned to optimize the fonts and layout. I streamlined the typography for better readability and organized the layout to create a cleaner, more balanced design.
Lastly, I decided to incorporate more graphics to make the infographic more engaging and visually informative. Using icons and symbols would break up the content and enhance the overall message.
|
| Fig1.7 Fast Food and Ingredient risk |
I decided to emphasize the health risks caused by the ingredients in fast food. Based on the ingredients listed in the original poster, I planned to illustrate their effects on different parts of the body.
For example, sparkling water, which contains high levels of sugar and phosphates, can impact kidney function, potentially leading to diabetes or kidney failure. French fries, high in sodium and oils, affect the blood vessels, contributing to issues like arteriosclerosis. Burgers, rich in fat and calories, increase the risk of heart disease. Lastly, desserts, high in sugar and fat, can weaken bone health, leading to lower bone density and osteoporosis.
By visually connecting the ingredients to their effects on specific body parts (heart, kidneys, blood vessels, and bones), I aimed to create a clear, impactful infographic that highlights the health risks associated with each food item.
|
| Fig1.8 Further References |
To focus on the health risks more effectively, I decided to design the infographic with a focus on specific organs—bones, blood vessels, heart, and kidneys. I found some reference posters that took a similar organ-based approach, which helped inspire my design direction.
For the animation, I planned to illustrate the effects of fast food on the body, such as blood vessel blockage and bone weakening. These animations would visually represent the impact of ingredients like fats, sugars, and salts, making the health risks more vivid and engaging for the viewer.
Initially, I envisioned this as an introductory-style poster, focusing on presenting the key information about the health risks. I considered using a chalkboard style, with organs and the inner body as the background. This approach would allow me to highlight the fast food and its ingredients without drawing attention to the organs themselves.
However, I realized that this could lead to an inconsistency in style, so I decided to blur the background. This not only helps to maintain a cohesive style but also adds a sense of depth and perspective, making the fast food items stand out more prominently.
To further emphasize the fast food, I decided to frame the food items within boxes, creating a visual focus and ensuring they are the focal point of the poster.
|
| Fig1.9 Style |
|
| Fig1.10 Vector of Body |
To match the chalkboard style, I used light, chalk-like vectors in Adobe Illustrator. This subtle choice helps to create the illusion of writing on a blackboard, maintaining a simple and clean aesthetic. I made sure not to overcomplicate the design, as the primary focus of the poster is on the fast food and the health risks.
By keeping the illustrations minimal and using a light chalk effect, I ensured the design stayed consistent with the chalkboard theme while also drawing attention to the important elements— the food items and the risks they pose.
|
| Fig1.11 Vector of Fast Food |
To maintain continuity with the original poster, I decided to keep the same four types of fast food: hamburger, sparkling water, French fries, and for the dessert, I swapped the original choice with panna cotta, a dessert that I felt better highlighted the contrast between indulgence and health risks.
I made sure to emphasize the food items in the design by adding shadows and slight enhancements. While these effects may not be too noticeable on the poster at first glance, they help to make the food stand out more clearly against the background. This subtle detail adds depth and draws more attention to the items, reinforcing their importance in the overall message.
|
| Fig1.12 Background |
To begin with, I set the poster size to A4, following the project requirements. I then decided to use a black background to create contrast and make the vibrant colors of the food and health risks stand out. Initially, I had considered a chalkboard style, but after feedback from Mr. Shamsul, who mentioned that a chalkboard might not connect well with the themes of health and fast food, I opted for something more relevant.
I decided to use an X-ray style for the background, as it aligns better with the concept of showing the inner workings of the body, which I wanted to highlight. The X-ray theme also enhances the focus on the internal organs, creating a clear visual connection to the health risks associated with the food.
While the X-ray typically uses a top-to-bottom scanning effect, I thought using a radar-style circular scan would be more unique and visually striking. This circular radar design would give the poster a futuristic, high-tech feel, complementing the overall design and making it more engaging.
|
| Fig1.13 Information |
|
| Fig1.14 Background with information |
Once the background was complete, I began integrating the information from the original poster into the new design. I kept the hamburger, French fries, sparkling water, and panna cotta dessert as the main food items, aligning each one with the organ most affected by its ingredients—heart, kidneys, blood vessels, and bones, respectively. This helped to clearly connect each food item to the relevant health risks.
Instead of using pie charts to display the ingredients, I decided to use images to represent the components. Initially, I considered using pie charts, but I quickly realized that space was limited, and adding another circle would make the design too cluttered. Since the poster already had several circular elements, introducing more could disrupt the balance.
|
| Fig1.15 Vector of ingredients |
|
| Fig1.16 Redesign Infographic Poster |
To make the message clear and impactful, I decided on a simple and direct title: "Fast Food, Health’s Enemy." This title succinctly communicates the core message of the poster while capturing the attention of the viewer right away.
I also worked on filling some of the more empty spaces on the poster, adding glowing dots to add a dynamic feel to the design. These glowing elements helped enrich the composition and contributed to the futuristic, high-tech vibe that I was aiming for.
As for the fonts, I selected Orbitron for the title and Source Sans Pro for the body text.
-
Orbitron: This font has a futuristic and digital style, with sharp, geometric shapes that give it a high-tech, space-age appearance. It is bold and distinct, making it ideal for the title as it stands out and grabs attention.
-
Source Sans Pro: This font is clean, modern, and highly legible. It has a simple, sans-serif style, which makes it perfect for body text. It complements the more dramatic Orbitron font by maintaining a straightforward, easy-to-read appearance. The simplicity of Source Sans Pro ensures that the content is clear and not overwhelming, making it great for conveying information in a concise and readable way.
|
| Fig1.17 After Effect |
Instead of creating the animation directly in Photoshop, I decided to move to After Effects to achieve more dynamic and engaging effects. While Photoshop could work for simple animations, After Effects provided more control and flexibility, allowing for more sophisticated movement and interaction between elements.
When importing the layers from Photoshop into After Effects, I encountered an issue with layer importation. The layers weren’t importing correctly, and after some troubleshooting, I discovered that the issue stemmed from the color mode. I had initially used CMYK color mode in Photoshop, but After Effects requires the files to be in RGB color mode for successful importation. Once I switched to RGB and re-imported the layers, everything worked as expected.
I made sure the size of the project matched the A4 size of the poster, so it would stay consistent with the final design.
Given the complexity of the design, there were quite a few layers involved. Once everything was set up, I started with simple animations. These included the movement of the food elements, the subtle interaction of ingredients, and the introduction of the health risks. I focused on keeping the animations clean and impactful, ensuring they would enhance the overall message without overwhelming the viewer.
|
| Fig1.18 Animation |
The animation process began with the background slowly fading in. The X-ray style lines and human body silhouette gradually appeared to set the tone for the visual. After that, I introduced the organ detection effect, where the radar rotated to detect the affected organs, which then changed color to orange, signaling the health risks.
Next, I brought in the frames for the organs. I started with the heart and hamburger. To make the animation more cohesive, I synchronized the heartbeat animation of both the heart and the text frame for a consistent rhythm. Then, the hamburger layers began to fall into place, each ingredient stacking up one by one.
Following that, I moved to the arteries and French fries. For this part, I animated red blood cells and oils moving through the blood vessels, accumulating and contributing to the blockage effect. This helped visualize the impact of French fries on the blood vessels.
Then, I focused on the kidneys in the bottom left corner. The animation involved cola bubbles rising inside the glass, and the cap popping off, representing the harmful effects of soda on kidney function.
Finally, I worked on the bones and panna cotta dessert. I created an animation where sugar, sodium, and oil particles entered the bones, causing cracks to form, symbolizing the damage to bone health from desserts.
To wrap it up, I revealed the poster title and filled in the remaining spaces with lines and additional effects to enrich the overall composition and give the animation more depth.
|
| Fig1.19 Redesign Infographic Poster |
Feedback
Reflections
At the beginning of this task, I found it challenging to select a poorly designed poster. Most posters I found online were decent in design, and it was hard to identify one that would fit the brief of being "bad." Even if I found one, it wouldn’t always be suitable because the content might be too sparse or too overwhelming, making it difficult to work with for the redesign. During the sketching phase, Mr. Shamsul also pointed out that I needed to control the size of the information, emphasizing the most important points. Otherwise, if everything was emphasized equally, the poster would lose focus and look cluttered.
As for the design of the organs, I initially considered keeping the chalkboard style for the background. However, I thought using a blurred background to highlight the food was also a viable approach. In the end, I switched to an X-ray style, which indeed made a better connection with the food, health, and the concept of X-ray imaging.
Once the poster was completed, I moved on to the animation phase. I faced a challenge during the import process, as only one file could be imported at a time. After a lot of searching, I figured out that I needed to use RGB color mode for the files to import correctly. During the animation process, I also spent too much time focusing on details that, when viewed at the normal poster size, might not be visible or could easily be overlooked. This experience taught me that I need to focus on efficiency and avoid getting caught up in small details that do not affect the overall result.
Despite spending a lot of time making revisions, I consider this experience to be very valuable. Moving forward, I hope to complete tasks more quickly and directly, while producing even better final results.
Comments
Post a Comment