Information Design / Project 1 / Animated Infographic Poster

19.2.2025 - 5.3.2025 (Week 3 - Week 5)
Elysa Wee Qi En / 0355060 / Bachelor of Design (Hons) in Creative Media / Taylor's University
Information Design
Project 1 / Animated Infographic Poster

LECTURES

Week 4 / Manuel Lima's 9 Directives Manifesto

This is helpful in understanding Information Visualisation through 9 directives, including why it differs from information art or infographics.

1. Form Follows Function
- When the work is centered around an explanation
- Start with a question, have the work be driven by a query

2. Interactivity is Key
- Allows for investigation and learning through discovery
- Make sure information is user-friendly and easy to understand

3. Cite Your Source
- Always share where your data comes from 
- Basically like citing the facts instead of creating the facts
- Include links in your website or E-portfolio so that your future self and future clients can easily see and reference

4. The Power of Narrative
- Elaborate your information into storytelling
- Makes it more interesting and memorable as humans love stories

5. Do Not Glorify Aesthetics
- Aesthetic "should always be a consequence and never a goal"
- In creating information design, you are creating designs around the information
- When going for aesthetics, you can forget your information
- Information is the most important part
- Don't design for designers, because it ends up being aesthetically-focused
- Design for the public, so that everyone can understand it
- As a designer, it is your job to make complex information easily digestible and understandable for others

6. Look for Relevancy
- Understand why you are visualising the information
- The in-between of UI (what customers see) and UX (what customers search for)
- Focus on what the customer searches for and not what you want to tell the audience
- E.g. Google
- Make the business model more effective to the audience

7. Embrace Time
- Time management is one of the key factors to organise and achieve better results for any decision-making
- Separate the process and set guidelines for when to do/finish what
- Brains can understand patterns, so have set routines

8. Aspire for Knowledge
- "A core ability of Information Visualisation is to translate information into knowledge"
- Seek new knowledge every day, it helps your brain generate more ideas

9. Avoid Gratuitous Visualisations
- Don't add too much
- "-should respond as a cognitive filter - and should never add more noise to the flow"
- Don't design something too cramped with information or too complicated
- Make everything simplified

Week 5 / Constructive Workflow

• Understand your active hours - your most productive time(s) 
• Work during those hours
• To train your brain to understand your workflow
• Understand how to work without technology first, use your hands

1. Understand the question
- Once you understand what to ask, you'll get a better result

2. Construct a strategic plan
- Evaluate data and information
- Identify any pros and cons
- Make a plan on how/when to create the content
    - Start with points, then make it a sentence, then a paragraph
    - Can draft your e-portfolios like that too
- Understand your outcome
- Build case studies
    - Make your e-portfolio understandable

3. Fill in the blank
- Create empty folders as a structure
- Fill in each folder with progress
- Sync up all working files for each software's requirements

4. Get some ideas and inspiration
- Explore existing ideas as guides and references
- This ensures you're on track with what you're doing

5. Set a parameter
- Ideas are limitless
- But time is a constraint
- Identify your strengths, do what you're good at 
- Your references should just be a benchmark
    - They should make you move forward
    - Don't keep changing ideas
    - Don't get too caught up in how good the reference is
- Work smarter, not harder
- Remember what the module is about and focus on that, not other aspects of your projects

• Understand your brain - if you are dominantly left or right-brained
• Delegate work based on your strengths
• Set time limits for yourself to get stuff done and manage submissions

INSTRUCTIONS

Fig. 1. Module Information Booklet

Part 1: Infographic Poster

For this assignment, our task was to pick a poorly designed infographic and redesign it. The content from this poster did not have to be all included in our new design, as picking the most important information was part of the challenge. 

This is the poster I ended up choosing to redesign:

Fig. 2. Original poster (19/2/2025)

The order of the years is a little strange, and the poster seems to be very old. The placement of the images is also quite messy, and there is a lot of text. 

I started by sketching some ideas for my poster:

Fig. 3.1. Idea sketches (10/3/2025)

I couldn't really get an idea to stick, so I decided to just get onto Adobe Illustrator and try out some of the ideas I had. 

Fig. 3.2. Attempt 1 (4-6/3/2025)

This was my first attempt, following sketch number 7. However, the assets didn't really fit in the poster and I felt they were kinda out of place. The idea was interesting, but I didn't go through with it. 

Fig. 3.3. Attempt 2 (6/3/2025)

My second attempt was kinda spontaneous and wasn't really in my sketches. Sketch number 4 would be the most similar. This approach has icons that match the content of the text, and is organised in a simple yet effective layout. At first, I had the years in the text boxes with the rest of the text, but I later changed this and put them on the rims of the circles instead.

Fig. 3.4. Draft 1 (8/3/2025)

I then tried a more complex layout for my second draft. It is somewhat similar to sketch number 1, but in a portrait layout instead of landscape.

Fig. 3.5. Layout 2 (8/3/2025)

Similar to the last layout, I had the years on the rims of the circles. The text went inside the circles, and the pictures went on the edges of the circles. 

Fig. 3.6. Draft 2 (8/3/3035)

I quite liked this design, but I thought it was a bit messy. The second circles at the bottom for the years 2001 and 2007 didn't quite fit, and had to be made smaller than the other circles. This isn't necessarily a problem, but the design ends up feeling very heavy on the bottom and therefore unbalanced. So I decided to try another approach instead.

My friend had suggested trying a 'graph'-like layout, with the years on one axis and the content on the other. With this in mind, I attempted another design. This actually ended up being my final design. 

It's not exactly like a graph as the information only really lies on one axis, but it is sort of inspired. It has the years on one side of a line and the content on the other. This is a simple layout, but seems more professional and kind of fits the aesthetic of Apple.

FINAL Infographic Poster

Fig. 4. Final Infographic Poster [A4 size] (10/3/2025)

Part 2: Minimal Animation

For the next part of the assignment, I have to animate this poster to make it suitable for a digital display. First, I had to resize/ reformat the poster into a 1920x1080 px size.

Fig. 5.1. Preparing the poster for animation (10/3/2025)

In Illustrator, I also renamed the layers so I would have an easier time in Adobe After Effects. I then imported the Illustrator file into After Effects to begin editing. 

Fig. 5.2. Keyframing the animations (10/3/2025)

I started by keyframing all the animations. I did this by separating the elements into groups, and then animating them group by group. I animated the title and logo first, then the lines, then the years, then the boxes, and lastly, the images.

Fig. 5.3. Adjusting the anchor points of images (10/3/2025)

For some of the images, I adjusted their anchor points in order to make them all zoom in along the same vertical axis. This was so the animation didn't look cheap or elementary.

Fig. 5.4. Adjusting the timing of the animations (10/3/2025)

Finally, I adjusted the timing of the animations by moving the keyframes around. 

FINAL Animation Infographic Poster

Fig. 6.1. Resized/ reformatted infographic poster [9:16 size] (10/3/2025)

Fig. 6.2. Animated Infographic Poster [MP4] (10/3/2025)

FEEDBACK

Week 3
Specific Feedback:
- The 'Evolution of Apple' poster has a lot of potential 
- Can be a good case study to practice grouping information, grouping multiple years of info into one group (like following Miller's Law)
- That poster has potential to have a big audience who wants to know about the info 
- Can do research and decide which poster to do 

Week 4
General Feedback:
- Don't have to include all the information from the original/ reference poster 
- Research on the topic so you know what information to include and what you can cut out
- The point of the assignment is to train that
- Make it legible, readable, easy to understand etc. 
- Don't push yourself to make something too complicated, take your time to go through the process so you can pick and create the best final info and product
- Designing infographics is not easy

Week 5 
General Feedback:
- Make it so that when viewing the animation, the audience can easily tell what's going on 
- Make the animated versions more simplified
- Remember that people don't want to read 
- For the poster, you can have more; for the animation, make it have less
- Imagine the still poster is for print and the animated one is for a billboard
- Text can be smaller or bigger, but remember we want people to read it so encourage readability but also visual interest

REFLECTIONS

Experience
Honestly, I struggled quite a bit with this project. For some reason, I could not find the motivation or inspiration to get it done. Despite how many sketches I had, none of them even ended up being used, and it shows just how badly my ideas didn't stick. In the end, I sort of had to force myself to continue. Thankfully though, I was able to come up with a final design and animation that I can say I'm proud of. My friends were also supportive while we were working on this project, and I am thankful for their ideas and encouragement that helped me get to my final product.

Observations
Using Adobe Illustrator to create the posters were useful, as I could then easily separate the elements into layers and rename them, then import them into After Effects to animate. This saves me a lot of struggle masking and such as the elements are in more than one layer. For this project, I keyframed the animations first and then properly readjusted the timing of them after all the keyframing was done. This was actually a good strategy and it helped me organise my thoughts and ideas to animate things in parts.

Findings
Sometimes, the muse just isn't there. But that doesn't mean the project is impossible to complete. Sometimes opening the program and just trying stuff out can lead to new ideas, or maybe some ideas just look better only when they're being created. You never know what idea will look good or bad until it is being made, so sometimes it is good to just try stuff out even if you can't get your sketches right. The idea might just be taking longer to arrive.