Advanced Interactive Design | Final Website

 23 Apr 2026 - 31 July 2026  (Week 1 - Week 15 )
Advanced Interactive Design | Bachelor of Design (Honours) in Creative Media 
Final Website 
Chan Xiang Lam | 0358400 
TABLE CONTENT   

    1. Module Information Booklet (MIB)
    2. Final Website
    3. Reflection

Module Information Booklet (MIB)


Final Website

Requirements
Submit your final website using your E-portfolio Link (The final website link to be attached in the E-portfolio).

To demonstrate original authorship and verify that the project was not generated solely by AI, your E-portfolio must include a Process Documentation Section featuring:

  • Development Progress: Screenshots of your workflow, code snippets, or asset creation.
  • Reflection / AI Disclosure: A brief narrative explaining your design decisions (and a brief statement detailing any AI tools used and their specific role in your process).

Project Overview

This project is a thematic interactive website developed for Gentle Monster to provide users with an engaging digital experience. The website was designed to showcase the brand's eyewear collections through interactive navigation, animations, and multimedia elements.

The project began with designing the complete user interface and user flow in Figma. After the design was finalised, the website was developed in Adobe Animate (HTML5 Canvas), where animations, page navigation, and interactive functions were implemented using JavaScript. The final outcome is an interactive website that reflects Gentle Monster's minimalist aesthetic while providing a smooth and engaging user experience.


Website Features

After finalising the Figma prototype, I recreated every page individually in Adobe Animate. Each page was developed as a separate FLA file, allowing animations, interactions, and navigation to be managed more efficiently throughout the project.

The website is divided into several sections, each focusing on a different part of the Gentle Monster collection experience. To keep the site feeling engaging rather than like a static catalogue, I incorporated interactive elements such as clickable design swatches, hover feedback, and page-to-page navigation to encourage users to explore the collection rather than passively scroll through it.

1. Home Page 

The Home page provides a simple introduction to the website by presenting the Gentle Monster branding together with a hero banner. The clean layout allows users to focus on the main visual before entering the website.

Design Highlights
  • Brand logo
  • Hero banner
  • Explore button
Interactive Features
  • Clicking the Explore button directs users to the Collection section and begins the browsing experience.

2. Collection Page

The Collection page presents the three featured Gentle Monster collections in a single layout, allowing users to browse and compare them before selecting one.

Design Highlights
  • Three featured collections
  • Collection images
  • Collection titles
  • Short descriptions
Interactive Features
  • Selecting any collection opens its corresponding collection detail page.

3. Design Page

The Design page showcases eight eyewear designs in a gallery layout, providing users with an overview of the available products.

Design Highlights
  • Grid layout
  • Eight design thumbnails
  • Clean visual presentation
User Interaction
  • Clicking any design thumbnail opens its dedicated information page.

4. Campaign Page

The Campaign page highlights Gentle Monster's promotional visuals and artistic concepts, allowing users to explore the creative identity behind the collections.

Design Highlights
    • Campaign visuals
    • Minimal layout
    User Interaction
    • Users can browse the campaign content while continuing to navigate freely through the website.

    5. About Page

    The About page introduces the history and design philosophy of Gentle Monster. It provides users with background information about the brand and its creative vision.

    Design Highlights
    • Brand introduction
    • Company history
    • Supporting imagery
    User Interaction
    • Users can continue browsing other sections through the navigation menu at any time.

    6. Collection Detail Pages

    The website features three individual collection pages, each presenting a selected eyewear collection with detailed product information.

    Design Highlights
    • Product image
    • Product name
    • Price
    • Product description
    • Colour selection buttons
    User Interaction
    • Users can switch between different product colour variations by selecting the colour buttons.
    • The displayed image and product information update immediately according to the selected colour.

    7. Design Information Pages

    Each eyewear design has its own dedicated page containing more detailed product information.

    Design Highlights
    • Product image
    User Interaction
    • Each page can be accessed directly from its corresponding design thumbnail.
    • Users can continue navigating to other pages using the website navigation bar.

    Development Process

    The development process moved through three main stages: planning and visual design, building the site page by page in Adobe Animate, and testing the navigation across the whole site. Each stage shaped how the final website came together.

    Research & Planning

    Before development began, the concept, brand direction, and overall website structure were worked out during the proposal stage — including the mood board, concept, wireframe, and flow chart for the site.

    Visual Design (Figma)

    Before starting the website development, I use Figma to design how each page would actually look — the home page, the collection page, and the individual design layouts. This is where I worked out the layout, colours, and typography properly before building anything interactive.

    Fig.figma progress


    Figma Prototype
    Adobe Animate Development

    With the designs ready, I moved into Adobe Animate and built the site page by page:

    Home Page — set up the main navigation bar linking to Collection, Design, Campaign, and About.

    Fig.home page

    Fig.home.html


    Collection Page — connected each colour/design swatch button to its corresponding frame label using gotoAndPlay(), so clicking a swatch updates the design shown. Getting this to behave correctly took some trial and error, since a button's gotoAndPlay() call only works within its own timeline — buttons and their target frames needed to be on the same timeline, or explicitly targeted, for the jump to work.

    Fig.collection page

    Fig.collection html

    Fig.collection details 1 , 2 ,3 page

    Fig.collection details 1 , 2 ,3 html


    Design Overview Page — built the 8-item grid and linked each thumbnail to its own design info page, keeping instance names and frame labels consistent across all 8 so the navigation logic stayed manageable.

    Fig.design page

    Fig.design html


    Design Info Pages (x8) — built out each of the 8 individual pages with product details, mirroring the layout established in Figma.

    Fig.design Information


    About & Campaign Pages — added the remaining brand content to round out the site.

    Fig.campaign page

    Fig.about page

    Testing — went through each page checking navigation and click interactions. Along the way, I decided to leave out a background music on/off feature I had originally planned, and focused my remaining time on making sure the core navigation worked reliably across all pages.



    Final Outcome


    Source file: 

    Reflection

    Developing this thematic interactive website was a valuable learning experience that strengthened both my design and technical skills. Throughout the project, I learned the importance of planning before development. By designing the complete interface and prototype in Figma first, I was able to organise the website structure, navigation flow, and page layouts more effectively before recreating them in Adobe Animate.

    During the development stage, I gained hands-on experience using Adobe Animate to build an interactive website with animations, page transitions, and multiple webpages. I also learned how to use JavaScript to implement interactive features such as button navigation, page linking, and product colour switching. Although I encountered several challenges, including managing multiple pages and debugging navigation functions, these experiences helped me improve my problem-solving skills and understand the development process more clearly.

    Overall, this project has improved my confidence in designing and developing interactive websites. It also enhanced my understanding of how UI design, animation, and programming work together to create an engaging user experience. The knowledge and skills gained from this project will be valuable for my future studies and web design projects.


    Comments

    Post a Comment