Information Design: Project I + II - Animated Infographic Project

 MODULE GCD60504: Information Design Project I

Tristan Vaughan Sleep - 0365120

Information Design - 2025 / Bachelor of Design (Hons) in Creative Media

Project I: Animated Infographic Project & Design Theories

---

MODULE INSTRUCTIONS:

5

“UPDATED FEB 2025: GCD60504 / INFORMATION DESIGN MODULE INFORMATION BOOKLET”

Module Project I: Animated Infographic Project (Weighted 20%)

Infographic Project: Students of the cohort are expected to transform their studies on Information design into a fully developed infographic capable of presenting a series of different processes. By utilising existing media, students are to build an understanding of ‘Information Delivery Mechanisms’ and how this encourages the arrangement of points and/or data on the page. Students are to reference an existing infographic from the internet and must restructure + redesign it and its content. This should be a simplification process, not having the intention to add additional information. Following their redesign, Students are then expected to animate elements of the infographic to make it more appealing and readable on online spaces. Once completed, students are to photograph the end result and publish their works to their working e-portfolios.

---

PARTICIPATED LECTURES:

WEEK III: Project I - Miller’s Law of Memory + Delivery Mechanisms

Understanding Miller’s Law: From a basic understanding, Miller’s Law of Memory was a proposed cognitive study which suggests how individuals retain points of information in their Short-Term Memory. In terms of an individual’s working mental capacity, George A. Miller suggested that most people can immediately recall around 7±2 units of information (ranging from letters, words, numbers etc.) This can normally be remembered for roughly 30 seconds.

Adding to his study, Miller introduced the concept of “Chunking” which is a strategy designed to organise Information into larger units. It is proposed that by grouping or breaking data down into chunks, we are able to extend the Working Memory Capacity of people. This is most commonly seen in information such as Phone Numbers, Credit Card Numbers (numbers with breaks), Addresses (numbers broken up by words), Routines (tied to weather/time) etc.

WEEK IV: Project I - Manuel Lima’s 9 Directives Manifesto

Directives Manifesto: In summary, Manuel Lima’s 9 Directives Manifesto is a published set of principles designed to support the development of effective and useful information visualisations. This is mainly achieved by highlighting 9 different sections of design and how they should influence the visual display of Information:

Form Follows Function: This principle suggests that the visualisation should be designed by its purpose and the information being conveyed. It suggests that designs need to display the appropriate amount of information in a manner understandable at the time such as warning/hazard signs near work areas. 

Interactivity is Key: This principle suggests that interaction/interactive elements can enhance understanding and engagement towards the information. It suggests that designs which encourage the audience to be more engaged are more effective in portraying important information.

Cite Your Sources: This principle suggests that all information should be clearly referenced and sourced as it ensures transparency and credibility to the audience. This is more important when discussing crucial topics and where claims need to be supported and to be cited as legitimate.

Embrace Complexity: This principle suggests that forms of complex data or information should not be ignored due to their complexity and should instead, find methods to better represent it. This can be done by chunking pieces of information or displaying them in ways which connotes progression such as timelines.

Be Skeptical: This principle suggests that researchers should always approach data critically and should question its accuracy, relevance and its potential bias. This is important in discussing crucial topics as the designer/researcher should minimise the spreading of false or un-based claims.

Tell a Story: This principle suggests that visualisation can be used to tell a compelling narrative which is capable of guiding the audience through the data and its implications. This appears to be based on how humans have been passing information through stories for thousands of years.

Designs for the Audience: This principle suggests that the information should not be templated and should be tailored to the needs or preferences of the intended audiences. It suggests the importance of knowing your audience and understanding what they need.

Iterate and Improve: This principle suggests that the designer is capable of Continuously refining and improving their visualisations based on feedback provided. It suggests that a final design takes time to be developed and can be made more effective from outside assistance.

Strive for Beauty: This principle suggests that the aesthetics or visual elements of the visualisation are important as it can enhance its understanding or make it more engaging to the audience. While sounding straight forward, this can be made challenging when presented with certain audiences or limitations.  

---

PROJECT ONE: ANIMATED INFOGRAPHIC PROJECT

PROPOSAL PHASE: Finding Existing Examples + Drafts

Finding Existing Sources: As previously mentioned in the sections above, one of the requirements for this task is for students to find suitable infographics for which they can base their own designs on. It has also been advised that students find infographics with small, animated elements to get an understanding of what the end goal should look like. With their samples selected, Students are then to submit these designs as a proposal which needs to be approved by the overseeing lecturer. From there, the students could complete their designs and finish their own infographic which will be animated afterwards.

In this project, I would begin by looking online for examples of animated infographic designs in order to have reference material for the final design as well as a base to start. When selecting these infographics, it is important to look at various aspects of the design - adhering back to both the LATCH Principles from the previous exercises as well as looking for examples of Miller’s Law + ML9DM within the design. With these requirements, these were the designs I was able to reference:

Visual News: 7 Ways To Hack A Drought by Column Five n.d.

“Reference Design I: Visual News - 7 Ways to Hack a Drought”

First Design: In this first infographic, the designer is informing their targeted audience how to limit the amount of water consumed during times of drought as well as expressing what can be done to prevent them. 

The information presented is broken into chunks - each contains a short phrase in large text with an accompanying image. This is an important design feature as it is small bits of information which can be recalled with ease by the audience (further supported by there only being 7 examples.) Additional information is provided in each section should the audience need a description as to why this limitation is important. 

The arrangement of the information is unique as the chunks are organised by number yet some are of a larger size than others. This can be used to stress its importance or to make the design more visually striking and engaging for the audience. This is further supported by the colours vivid oranges are used to contrast the blue background.  

“Rough Sketches for Water Droughts”

With these details in mind, I would begin drafting some concept sketches on how to redesign the infographic. As this infographic is designed rather well, the only major changes would come from making it more universal as it was originally designed for California and their consistent droughts.

Government Spending Public-to-Private - Where the 2020 Budget Is Going to Be Spent

“ Reference Design II: Government Spending Public-to-Private”

Second Design: While outdated, this second infographic breaks down how governments allocate their budgets and intend to improve the standards of living in their country. 

Similar to the first example, the designer has broken the information into chunks however, each one consists only of an image, title and minor elaborations. Interestingly, the statistics for each category are instead arranged into a small table in the bottom corner of the infographic. This suggests that infographics may be used more to show what the government spends its budget on rather than suggesting how much is spent and why these are important.

The arrangement of the information mainly seems centred around the smaller web-flows rather than the entire piece. All items are uniformly sized with large images being used for the general category while smaller designs are used for more specific costs. One possible change could be grouping these categories based on the sector it influences such as the private, public, security sector.

With these details in mind, I would begin drafting some concept sketches on how to redesign the infographic. While the infographic is able to display its information quite well, there is still the ability to make alterations. 

SHORT ANIMATION PROCESS ADVERTISEMENT

“ Reference Design III: So you want to make a Short Animation”

Third Design: In this third infographic which doubles as an advertisement, the infographic informs the audience on how to structure the development phase of an animated project. 

The Information presented in the infographic is separated into smaller categories which have been arranged to flow in either horizontally (at the bottom) or vertically (at the top). This change in flow can be useful in defining a section of the creative process, allowing for the information to be broken in chunks while still feeling a part of the whole. Colour is also used to communicate a change in section and the moving out the creative process into the post-production process.

The arrangement of the information follows a more zig-zag-like pattern vertically which can add minor engagement to the audience and ensure that they’re reading. To reduce the tedium of reading, the designer has placed the text in a more ‘playful’ manner such as in text bubbles or in quick phrases to make the reading more energising.

“Rough Sketch ideas for Animation Pipeline”

With these details in mind, I would begin drafting some concept sketches on how to redesign the infographic. As this infographic is designed rather well, the only major changes would come from changing the arrangement of information as well as changing its style to look less like an older poster.

INFOGRAPHIC PHASE: Redesigning Infographic & Layout

Chosen Designs & Plans: Following the investigation and making rough sketches for the project, I would need to pick a design to complete a final design which later would be animated. Looking at the sketches I’d previously made, I decided to go with the first design for the “Hack a Drought” infographic as the reference had a decent amount of segmented data and would also for small, isolated animations which would be a requirement for the following step. For this final design, It is important to consider the existing design features presented in the original design: the colour palette for each panel is unique compared to the background - light and bright colours vs. the cold blue colours.

When working to recreate the design, it is important to consider which elements will be animated later in the design. When making designs in Adobe Illustrator, all elements have been organised to each of their panels with all being grouped together. This process would need to be changed later as the animating software is unable to import these groups and would need them to be simplified. For now however, this is alright as it allows me to alter and move any of the panels with no need to mess up the outline of everything.  

“Elements created for the infographic using Adobe Illustrator”

Completed Design: With the design carefully considered and all elements being re-designed by hand, the final infographic poster was completed and had been prepared for animation in the next step. With some minor tweaks, this was what the final design came out to be.

“Completed Infographic design - 5 ways to Prepare for a Drought”

ANIMATION PHASE: Adding minor Animations & Edits

Animated Elements: When considering the inclusion of animated elements, I wanted to add minor animations into each panel (including the title and warning panels.) For the middle panels, I wanted to add small elements such as the plant being able to wave, water running from the tap/sink or small text bubbles. The more creative ideas I had were for the top and bottoms panels which would also influence the pipe that would run in between the small panels: in this larger animation, I wanted the water from the top panel to drain which would then lead to the water in the pipe slowly disappearing as well. This animation would then end with the person at the bottom unable to get water and would then stand up in confusion.

“Alternated Elements required for Animation Import”

Animation Software: When it came to animating, I had originally intended to work within Adobe After Effects due to having some prior experience and doing some prior study into methods of animation using After Effects. In addition to this, After Effects also seemed like the better choice as it would allow the immediate importing the Illustrator file which would save me needing to save individual elements needed for animating. Unfortunately, I would be unable to use After Effects based on technical difficulties with the software: the main problem being that an error in its design would prevent me from creating new files, importing files or even saving existing files. This would also later escalate with constant crashing which led to my computer force shutting-itself down.

To continue the animated requirement for this project, I then decided to continue using Adobe Animate, a similar software which was not as capable as I’d liked due to it being unable to match my original design. It would also be due to Animate that I would need to restructure the elements in the Adobe Illustrator file before crudely importing it. Despite these setbacks however, Animate proved to be a more reliable software and it had some simple designs which made animating less difficult.

“Adobe Animate Assets timeline”

Animated Styles: For this project's animation, I decided it would be easiest to animate using Adobe’s ‘classic tweens’ setting which creates start and ending points for each element which then is translated over an amount of time. While this could lead to the project feeling a bit stiff, Adobe Animate’s tween feature also offered different pacing times which made the animation more smooth and more pleasant to watch.

When it came to animating individual elements, I found it useful to animate all elements on factors of 24 to match the frame-rate and to allow for easy scaling of the animation time. This can best be seen in the minor animations and the larger animation with the larger ones requiring a few seconds to complete while the smaller ones seamlessly repeat to stay in sync.

“Final Video Design”

With all the elements being created and having them edited + animated, the design has been fully completed. Despite the limitations, I’m quite happy with how the final product came out. Although I could not animate all the elements I wanted due to technical difficulties, I believe that the final product is still good enough for the final submission.