INFORMATION DESIGN - PROJECT 1&2



18/02/2025 -9/03/2025 (Week 03-05)

Chan Suet Yee 0358427

Bachelor of Design (Honours) in Creative Media

Information Design | GCD60504 | Sec 01

Project 01 & 02

 LIST 

TABLE OF CONTENTS:

1. INSTRUCTIONS

2. TASKS

3.REFLECTION


 INSTRUCTIONS 




 TASKS 

PROJECT 01 & 02 - ANIMATED INFOGRAPHIC POSTER

 Instructions ( Part 1 ) 

          
1. Choose 1 infographic poster reference from Internet
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 our final poster on E-Portfolio with explanation and reflective writing

 Instructions ( Part 2 ) 

1. Animate our 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 our own Youtube channel

 Submission 
1. Digital upload into our Google Drive.
2. Online posts in our E-Portfolio and your reflective writing.

 Process 


Research and Selection

To begin, I researched existing infographic posters that needed redesigning. I shortlisted three designs and consulted Mr. Shamus for feedback. He suggested proceeding with Poster 2, which focused on the environmental impacts of fast fashion.


Fig 1.0 Project 1 Process



Visual Research & Inspiration

Before designing, I conducted visual research on fashion-related posters. I found several references, many of which had a magazine-style aesthetic with a slightly vintage feel. This inspired me to choose a color palette of black, white, and red.



Fig 1.1 Project 1 Process


Sketching & Concept Development
Next, I sketched out two different layout ideas. After evaluating both, I decided to proceed with Sketch 1, as its layout was more visually appealing and well-structured.


Fig 1.2 Project 1 Process


Digitalisation & Refinement
I then moved to Adobe Illustrator to digitise my chosen sketch. Once completed, I sought feedback from Mr. Shamsul. He approved the layout but noted that the font looked unusual.


Fig 1.3 Project 1 Process



Typeface Exploration
Taking his feedback into account, I explored several alternative fonts. However, after testing different options, I still preferred the initial typeface. To ensure my decision was well-founded, I sought opinions from a few friends, who also agreed that the original typeface was the best choice. Thus, I decided to keep it unchanged.


Fig 1.4 Project 1 Process



Animation Process
For animation, I used Adobe After Effects. I animated the elements by adjusting their opacity and position to create smooth transitions and engaging motion effects.


Fig 1.5 Project 1 Process



 Final Submission 


Fig 1.6 Final Redesign Poster



Fig 1.7 Final Animated Infographic Poster



 REFLECTION 

Experience

Working on this project was both challenging and rewarding. From the initial research to the final animation, I encountered various stages that required problem-solving and creativity. Selecting the right poster to redesign was a crucial step, as it determined the direction of my entire workflow. I enjoyed experimenting with different layouts and fonts, and while I faced some challenges in refining the typography, the overall process strengthened my design skills.

Observation

Through this project, I observed that visual research plays a significant role in shaping a design’s direction. Analyzing references helped me understand the characteristics of fashion-related designs and how to incorporate them effectively into my infographic. Additionally, feedback from Mr. Shamsul and my peers highlighted the importance of critique in refining a design. I also noticed how animation enhances the storytelling aspect of an infographic, making it more engaging and dynamic.

Findings

One key takeaway from this project is the importance of balancing aesthetics and readability. While I initially doubted my typeface choice, gathering multiple opinions confirmed my instincts. Another crucial finding is that animation should complement the content rather than overpower it. Adjusting opacity and positioning effectively created smooth transitions, making the final output visually appealing. Overall, this project reinforced my understanding of design principles, animation techniques, and the iterative nature of the creative process.

Comments

Post a Comment

Popular posts from this blog

GAMES DEVELOPEMNT - TASKS

Image
23/04/2025 -21/05/2025 (Week 01-14) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Games Development  | DST611104 | Sec 01  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. TASKS   INSTRUCTIONS   TASKS  TASK 01 & 02 : GAMES DESIGN DOCUMENT & GAME ASSETS  TASK 01  For  Task 1  of our Game Development module, our group was formed during  Week 2 . I teamed up with  Mei Hui  and  Emily , and together, we began brainstorming ideas for our 2D side-scrolling game. After some discussion, we decided to draw inspiration from a tabletop game we previously created in one of our past semester projects, titled  "Sudsprite Spin."  We felt that the characters and gameplay mechanics from that game had potential to be developed into a fun and whimsical digital experience. In our 2D game adaptation, the  Sudsprite  becomes the main character. We wanted to preserve the bubbly, playful the...
Read more

APPLICATION DESIGN 2 - TASK 2

Image
19/05/2025 -08/06/2025 (Week 05-07) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Application Design II | DST60504 | Sec 01 Task 02 | Interaction Design Proposal & Planning  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. TASKS 3.REFLECTION   INSTRUCTIONS   TASKS  INSTRUCTIONS For this assignment, we are required to develop a  comprehensive interaction design plan  for our final  web-based mobile application . The goal is to  visually and conceptually prepare the user interactions and animations  that will enhance the overall user experience. The key components of the assignment include: 1. Interaction Design Documents Create  detailed flowcharts and wireframes  to map out the user journey. Clearly show the  layout of each screen  and the  navigation structure  of the app. 2. Animation Prototyping Micro Animations : Design small interactive effects (e.g., button clicks, loading in...
Read more

ADVANCED INTERACTIVE DESIGN - TASK 02

Image
23/05/2025-13/06/2025 (Week 05-08) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Advanced Interactive Design | DST60804 | Sec 02 Task 2 | Interactive Design Planning & Prototype  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. EXERCISES 3. TASKS 4. REFLECTION   INSTRUCTIONS    EXERCISES  WEEK 5 - BOUNCING BALL ANIMATION In Week 5, we learned how to create a simple bouncing ball animation using Adobe Animate. The first step was to draw the ball using the  Oval Tool  and turn it into a  symbol . After that, we used the  Pencil Tool  to draw a curved path showing how the ball would bounce. Next, we added  keyframes  at the starting and ending points of the path. Then, we applied a  motion tween  so the ball would follow the path smoothly. To make the animation more realistic, we slightly adjusted the  speed and motion  using easing. This exercise helped me understand how keyframes an...
Read more