Information Design / Project 1

24/02/2025 - 03/03/2025 / Week 4 - Week 5

Eng Yan Ling

Bachelor's Degree in Creative Media (Hons) - (Taylor's University)

Information Design / Project 1

TABLE CONTENT

<span id="LIST"></span>

1. Instructions

2. Progression

    2.1 Part 1 : Infographic Poster

    2.2 Part 2 : Animated Infographic

3. Feedback

4. Reflection

5. Quick Links

INSTRUCTIONS

TIME FRAME: WEEK 03 - WEEK 05
DEADLINE: WEEK 05
MARK: 40%

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:
1. Choose 1 infographic poster reference from Internet (Please consult before proceed)
2. Redesign the poster into A4 size. Sketch the idea and process
3. Redesign and simplify the poster based on visual hierarchy & typography
4. Simplify the poster's design based on color, shape & pattern
5. Attach your final poster on E-Portfolio with explanation and reflective writing

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.)

REFERENCE:

1. Loop animation
https://fauziyusoff.com/wp-content/uploads/creative_process_loop.gif

2. https://i.pinimg.com/originals/dc/91/53/dc9153b13c57bd30999932d02a3b0a18.gif

3. https://www.pinterest.com/pin/162059286585500400/

Note: Make sure your poster graphics have information.

PROGRESSION

PART 1 : INFOGRAPHIC POSTER

1. Choice of Poster

Figure 2.1 Infographic Poster Reference
Source : Pinterest

2. Moodboard/Reference
Choice of Font : San Francisco
- Default font used by apple devices

Figure 2.2 Color Palette Range
Source : Pinterest

Direction : Apple default colors/existing mobile color range. 
Poster Direction : Clean and minimalist poster similarly to apple's layout.

Figure 2.3 Style Reference
Source : Pinterest

Ideation : A timeline-like poster that easily summarises the information to be understood.

Figure 2.4 Visual Elements

Image Reference Source :

3. Sketch

Figure 2.5 Sketches/Ideation

Sketch #1
- a timeline loop of apple's evolution in clockwise direction and each year is represented by a visual element that best defines the major evolution of that year.

Sketch #2
- similar to sketch #1 except in a semi-circle composition

Sketch #3
- a horizontal timeline stretch of the evolution of apple with each year alternating up and down.

4. Progression
Week 4 - 25/02/2025

Figure 2.6 Baseline/Guidelines

A guide to estimate the amount of space for each section.

Figure 2.7 Positioning

Images in Figure 2.4 is brought into photoshop to mask out the visual element as seen in Figure 2.7. According to the guidelines, the size of each image is adjusted within its respective section and the difference in size is to provide a variety of sizes throughout the poster. The year of each section is adjusted by inserting a circle shape and type on path tool applied. Then, the starting point of each year is adjusted, centered aline to its respective section.

Figure 2.8 Timeline

Timeline inserted according to the original poster.

Figure 2.9 Attempt #1 Overview

Applying the same method to the heading, a larger circle is placed around the timeline with its font size at 70pt and separated into 2 circles "evolution of" and "apple".
To balance the empty space beside both the headings, a curved stroke is added to "connect" the entire circle of the heading.

Background : Apple Logo

Figure 2.10 Evolution of Technology

To explore potential layouts, using several technologies that represents each era namely, 70s, 80s, 90s and 2000, it is masked and brought into illustrator to be used in the background layer of the poster.

Figure 2.11 Envelope Distort Elements

Using the guidelines of the poster, it is divided into a total of 4 sections : 70s, 80s, 90s and 2000. Layering each group of elements with the sections separated. Envelope distort -> Make with top object is applied to each respective group.

Figure 2.12 Envelope Distort

Envelope distort applied to all groups as seen in Figure 2.12.
Opacity : 40% applied to group to reduce the noise as a background of the poster.

Figure 2.13 Attempt #2 Overview

Overview of my poster layout exploration.

Week 5 - 04/03/2025
Feedback #1 Progression
Based on the feedback from Mr Shamsul, changes/improvements are applied to the the poster to achieve a better outcome.

Figure 2.14 Attempt #3 Overview

Based on the feedback given on the lack of context of the visual images, more elaboration/text of each visual image is included with the label of each product.

Figure 2.15 Evolution of Apple Logos
Source : Pinterest

To further explore potential layouts for the poster, the evolution of apple logos will placed inside the inner circle of the cycle of how apple logo has evolved to this day.

Figure 2.16 Position

Figure 2.16 shows the cycle of apple logos evolved throughout the years. The opacity of the center logo is lowered to reduce the focus and redirect it towards to evolution of apple logos. A lined circle and arrows are added to indicate the direction of it evolution.

Figure 2.17 Attempt #4 Overview

Overview of poster exploration.

Figure 2.18 Attempt #5 Overview

Consider the text labels appear to be scattered, lines are added to direct the text connected to which visual image and spread out as seen in Figure 2.18 to achieve a neat and direct poster.

Feedback #2 Progression
a) Consistent size in images

Figure 2.19 Consistency Comparison

The size of each visual image to adjusted to similar sizes based on the feedback. A comparison between the previous poster and the current changes can be seen in Figure 2.19.

Figure 2.20 Adjustment Overview

Overview of the visual images resized.

b) Heading

Figure 2.21 Heading Comparison

Headings placed in a straight line and broken into 2 lines. Comparison between the previous poster and current changes can be seen in Figure 2.21

Figure 2.22 Heading Position - Final

Overview of the headings amended.

c) Repositioning/Minor Adjustments

Figure 2.23 Text Rearrangement Comparison

As the position of the text labels follow according to the images, the text labels are adjusted according to a position that best fits the text without cluttering the rest of the information.

5. Final

Figure 2.34 FINAL PROJECT 1 : POSTER

PART 2 : ANIMATED INFOGRAPHIC POSTER

1. Ideation
a. Rotation on loop of apple's logo evolution.
b. Movement on text labels and heading.

2. Progress

Figure 2.35 Text Animation - Position

Positions applied : Up and down alternating, similar to a bouncing effect on the text labels. The same animation style is applied to the rest of the text labels around the infographic poster.

Figure 2.36 Text Animation - Opacity

On the same text labels, the opacity of the text is applied in the following order :
0% (0F) - 50% (15F) - 10% (1.00F)
The same order of opacity and keyframe is applied to the remaining text labels around the poster.

Figure 2.37 Logo Animation - Rotation on Loop

Apple Logo Evolution Animation
Setting in position the start and the end of the logo by applying keyframes at 0F and 2.00F of the start position. At 1.00F, a keyframe position is added to position the logo at the opposite center of the start position and divided half of the first half and second half applying the same method of positioning a center between the the start-midpoint and midpoint-end. Finally, an additional keyframe is added before and after the new midpoint added to achieve a smoother animation.

Breakdown of keyframe :
B - Breakdown
S - Section
Start - B1 - S1 - B2 - Midpoint - B3 - S2 - B4 - End

The same method and breakdown is applied to the entire loop of logos.

Figure 2.38 Animation Attempt #1

First attempt of Part 2 Animated Infographic.

Feedback #2 Progression
During Week 5, another session of feedback is provided to Project 1 progress. Changes/improvements are made according to the feedback given to achieve a better outcome.

Figure 2.39 Text Animation - Position

With the visual images readjusted, affecting text are also reanimated on the latest updated version of the poster. Same animation applied to the text of opacity gradually increasing at the start a slight bounce to the text box.

Figure 2.40 Logo Animation - Extension/Smoothness

To fulfill the requirement of the a 15-30s animation, the animation is extended with the logo's evolution continuously rotating on loop for 2 entire round hence additionally keyframes added to each logo.

Figure 2.41 Heading Animation

Similarly to the first attempt of the animation, the opacity is reduced from the start and gradually rises to the top.
The final position and opacity is set before adjusting the starting point of the heading.

Figure 2.42 Animation Attempt #2


Audio : Chill Guy Soundtrack
https://www.myinstants.com/en/instant/chill-guy-14363/?utm_source=copy&utm_medium=share

Audio inserted into video to give a soothing/calm/minimalist feeling of apple's minimalist style.

3. Final

Figure 2.43 FINAL ANIMATED INFOGRAPHIC

FINAL SUBMISSION

YouTube Link : Click Here
FEEDBACK
Feedback #1
- can use the product evolution of apple products in the background up until 2009 only
- ensure that the entire poster is visually appealing. can work with idea #1

Feedback #2
- so far looks better, but to maintain the minimalist concept from apple just make the heading in a straight line rather than a curve and probably consider breaking the heading into 2 lines.
- inconsistency in the visual images around the timeline, do not see a purpose to make it inconsistent
- animation looks good
REFLECTION

Reflecting my progress throughout this project, it was a learning curve for me as I was concerned while carrying out this project lacking confidence in my design skills. However, I researched existing posters by respectable designers to learn from and understand different methods I can apply to my design to best express the information of the poster. Moreover, with the guidance of Mr Shamsul's feedback and advice, it has allowed me to understand my weakness and areas to further improve as a designer. Therefore, applying the basic design principles to my design, the exploration was a journey for me to discover and refine my skills as a designer to achieve the best outcome. This project has challenged me in different ways such as designing the poster as well as applying the skills set obtained from previous semesters to produce an animated infographic. Besides that, it has also taught me the process that requires patience and dedication to work on a project.

QUICK LINK
Google Drive : Click Here

Blogs : 
Exercises : Click Here
Project 1 : Click Here
Final Project : Click Here

Comments

Post a Comment

Popular posts from this blog

Information Design / Final Project

Image
  03/03/2025 - 17/03/2024 / Week 5 - Week 7 Eng Yan Ling Bachelor's Degree in Creative Media (Hons) - (Taylor's University) Information Design / Final Project TABLE CONTENT <span id="LIST"></span> 1.  MIB 2. Progress     2.1 FLIP Presentation     2.2 Infographic Animation 3. Feedback 4. Reflection 5. Quick Links MIB PROGRESSION FLIP PRESENTATION Project Requirements TIME FRAME:  WEEK 01 - WEEK 07 DEADLINE:  WEEK 07 INSTRUCTION: Based on FLIP group topic research, produce a basic video animation. DESCRIPTION:  Using a processed design framework, you will now produce an infographic report to present the given information to a ‘target audience’ with the purpose of: 1. Creating awareness (such as Global Warming, Recycle, etc.) 2. Explaining a process (such as "how to" video) 3. Defining a concept (such as "What is Fast Fashion", "What is Color Wheel", etc.) Any time based media and softw...
Read more

Information Design / Exercises

Image
03/02/2025 - 03/03/2024 / Week 1 - Week 5 Eng Yan Ling Bachelor's Degree in Creative Media (Hons) - (Taylor's University) Information Design / Exercises TABLE CONTENT <span id="LIST"></span> 1.  MIB 2.  Lecture 3.  Exercise     3.1 Exercise 1 : Quantifiable Information     3.2 Exercise 2 : L.A.T.C.H Infographic Poster 4. Feedback 5. Reflection 6. Quick Links MIB LECTURE W1 - 10/02/2025 L.A.T.C.H Theory List of Infographic informational - written list info, numbering - data → visualize info a visual cannot entirely convey its message statistical infographic pie chart, bar graph, etc how to deliver message/set of info to your audience? how-to infographic step-by-step process timeline infographic movement from one point to another numbering → organic/linear/circular? comparison infographic map/location infographic flowchart infographic sequence of different step and action planning ...
Read more

Sonic Design / Exercises (Audio Fundamentals)

Image
21/04/2025 -  xx/05/25 / Week 1 - Week x Eng Yan Ling Bachelor's Degree in Creative Media (Hons) - (Taylor's University) Sonic Design / Exercises (Audio Fundamentals) TABLE CONTENT <span id="LIST"></span> 1.  Instructions 2.  Lecture 3.  Exercises     3.1 Exercise 1     3.2 Exercise 2     3.3 Exercise 3     3.4 Exercise 4 4.  Feedback 5.  Quick Links INSTRUCTION LECTURE Week 1 - 21/04/2025 Week 1 : Sound Fundamentals Reflection : Reflecting on the lecture videos from this week, I have learned and gain a solid understanding on the fundamentals in sound design in terms of its terminologies, transmission and how we process and identify sound from production to propagation to perception. Besides that, I have also learned the properties of sound in identifying its frequency/pitch, loudness, space and more. All in all, this week's lecture has opened new fields that I am...
Read more