Advanced Interactive Design · Final Project · Completed Thematic Interactive Website

18 Nov 2024 - 3 Jan 2024 / Week 8 - Week 14

YANG ZHI CHING / 0365154

Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media

Final Project · Completed Thematic Interactive Website

INSTRUCTION

Doc 1.1 MIB

Final Project · Completed Thematic Interactive Website

Requirement |

Synthesise the knowledge gained in tasks 1 and 2 for application in task 3
Create integrated visual assets and refine the prototype into a complete working and functional product experience.

Topic |

Kuala Lumpur illustration fair (exhibition).

Fig 1.1 Kuala Lumpur Illustration Fair Poster 2024

Fig 1.2 Visual Collection Of KLIF 2024

Protoype in Figma |

First, I created the Loading Page animation in Adobe Animate, which gave me a foundation for the overall design style and animate. The following are screenshots of the Adobe animate. I used the font of the KLIF official poster as the loading theme, used a stroke and filled it with the same color, and then animated the ball rolling to each letter.

Fig 1.3 Loading Animation Timeline

After the loading page animation was done, I imported it into Figma as a starting point and reference, and prototyped the other page designs in Figma.

Fig 1.4 Visual Design in Figma

Fig 1.5 Different Animation in Home Page

Fig 1.6 Another Set of Animation

Vid 1.7 Animation without Cursor Following Effect

In figma, I originally wanted to make the windmill in the illustration move with the mouse, and the moving "fan" could disrupt and scatter the surrounding elements such as stars and planets. But I didn't find a relevant technical tutorial in figma, so I used another method: divide the picture into partitions, and when the mouse moves to the partition, the corresponding animation will be generated. First, I made a home page divided into 6 areas, and the mouse can generate 6 corresponding animations according to the 6 partitions.

Six-grid Version

Fig 1.8 Six-grid Seperation

Vid 1.9 Six-grid Version Animation

After the first version was completed, I found that if the mouse moved quickly, the animation switching would be very abrupt and dazzling (because the mouse was moving too fast, the position conversion animation was omitted), so I tried to reduce the partitions to make the animation switching easier.

Vertical Three-grid Version

Fig 1.10 Three-grid Seperation

Vid 1.11 Three-grid Version Animation

Although 3-gridis feasible, I think that the animation can only be triggered by horizontal movement of the mouse, which is a bit too monotonous, so I changed it to 2x2 partitioning, which can move both vertically and horizontally, and will not cause the screen to be cluttered due to too much switching (but moving the mouse too fast will still cause the transition animation to be omitted.)

Four-grid Version

Fig 1.12 Four-grid Seperation

Vid 1.13 Four-grid Version Animation

After the home page was completed, I started the layout of the Artwork page. The original plan was to make the artwork move with the mouse like the home page, but I didn't find a way to create a similar effect, so I changed the Artwork page to a horizontal animation effect (see the animation effect of Task 2 vid 1.3). The next step was directary, timetable and other consultations. I also completed them in Figma as a visual reference for the subsequent animation production using Adobe Animate.

Fig 1.14 Artworks Page Design Layout in Figma

Fig 1.15 Work Progress in Figma

Processing in Adobe Animate |

Then, I started to work on Adobe Animate. Tbh, I am not very familiar with Adobe Animate yet. Many functions require me to review the knowledge taught by the teacher and online tutorials to complete. Therefore, I was not able to do it exactly the same as the initial idea sketch and the prototype in Figma. In Animate, I changed some effects that I could not do, such as the simpler carousel display effect in Artpage.

Here is the loading animation I made before I made the prototype. I traced the KLIF words from the official poster and then finalized the design. I made the ball bounce up and land on each word, and when the ball landed on the word, the word would be pushed down.

Fig 1.16 Loading Page Timeline

Next, I made a lot of changes to the work page, changing the long animation I mentioned earlier to do in figma into a carousel. This is because I looked for a lot of website tutorials, but most of them were in Adobe XD or Figma, and very few in Adobe Animate, so I couldn't find an effect that could scroll left and right to see all the works, so I made a carousel effect.

Fig 1.17 Artworks Page Timeline

I used animation transformation and button click functions to complete the directory, timetable, tickets, and about us sections. Below is the animate timeline of each part.

Fig 1.18 Information Pages Timeline

Design Preview |

Fig 1.19 Full Design Preview

Final Netlify Submission |

https://klif.netlify.app

Final Presentation Recording |

Vid 1.20 Presentation Recording

REFLECTION

| Experience |

I’ve always been really interested in KLIF, so when I was working on the web graphic design for this project, everything went quite smoothly. Even when I faced challenges, I genuinely enjoyed the process. The hardest part of this project was turning ideas into reality—especially some concepts I thought were really great during the sketching phase, like having animations that move with the mouse. Unfortunately, I couldn’t figure out how to implement them, which felt like a missed opportunity. I realized I need more time to learn things beyond graphic design so I can bring my ideas to life.

This also made me understand something I often see online: behind every brilliant design by a designer, there’s probably a programmer losing their hair over it.

I’m really grateful to Mr. Hamimi for his guidance during this course. I’ve heard that you’ll be leaving soon—wishing you all the best in life and success in your future endeavors!

Search This Blog

YANG ZHI CHING (0365154)