Advanced Interactive Design - Final Project : Completed Thematic Interactive Website

Advanced Interactive Design

20.6.2025 - 27.7.2025 (Week 9 - Week 14)

Qian Guoyi | 0353422

Bachelor of Design (Honours) in Creative Media

Final Project – Completed Thematic Interactive Website

INSTRUCTIONS

Final Project : Completed Thematic Interactive Website

Requirements :

Students will synthesise the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product

experience.

Design Process :

Home Page Section

Since the theme of my website revolves around tea culture, I chose to use an image of a traditional tea room as the homepage background. This helps to create a calm, natural, and immersive atmosphere. The overall color palette is kept consistent, using soft shades of earthy green and beige to convey a warm and organic aesthetic. In the top navigation bar, I added interactive effects—when the user hovers over the menu items, a subtle teaware clinking sound is played and the text slightly enlarges, adding both auditory and visual feedback. The site’s title logo rises from the bottom and scales up with an animation, creating a sense of ceremony. In the bottom left corner, there’s a music icon; clicking it will play ambient sounds that match the tea atmosphere, such as guqin melodies or flowing water, enhancing the overall immersive experience.

Fig1.1 Home Page

Music can run through the entire page.

Fig1.2 Music playback

Product Page- Tea Encyclopedia

This page is the "Tea Encyclopedia" section of the website, primarily dedicated to introducing users to different types of tea and related knowledge. In the upper half of the page, I designed buttons showcasing five major tea categories: green tea, black tea, white tea, oolong tea, and scented tea. Each type of tea is accompanied by a representative image. Users can click on any image to be redirected to a detailed introduction page for that tea type, offering further information on its origin, craftsmanship, taste, and brewing methods, creating a clear categorized navigation system.

At the bottom of the page, I placed three horizontally arranged rectangular images as preview modules for featured content, such as "tools," "match," and "menu." To enhance the user experience, these images feature a hover effect. When the mouse hovers over an image, it dims slightly and a concise white text description appears, encouraging users to click and explore. This design not only enhances the aesthetics of the interface but also increases user perception and engagement with the content.

Fig1.3 Tea Encyclopedia Page

Fig1.4 Dynamics on an

Fig1.5 animation effects

Product Page - Tea

Within the extended pages of the Tea Encyclopedia, I specifically designed two detailed pages, "Black Tea" and "White Tea," combining images, text, and dynamic interactions to enhance the user's immersive reading experience.

The Black Tea page uses a warm red hue as its primary visual element, conveying the rich, gentle flavors of black tea. A large, close-up image of the black tea infusion appears at the top, creating a rich atmosphere. A dynamic "image flip" effect is also included—users can click the arrows on the left and right sides of the image to flip through the pages, making the content more readable and engaging.

The White Tea page uses a more refreshing, elegant white and green color scheme, reflecting its "light fermentation" and "natural drying" production process. The page's light and tranquil style emphasizes the "natural and pure" qualities of white tea. The content structure is similar to the Black Tea page, covering the production process, key varieties (such as Silver Needle White and White Peony), taste characteristics, and storage methods. The page also features an image flip function, allowing users to easily browse through images of multiple production or brewing scenes, like browsing a photo album, enhancing visual depth and knowledge coherence.

Through these two pages, I tried to find a balance between visual language and user interaction, so that users can enjoy the beauty while browsing and truly understand the connotation of tea.

Fig1.6 Black tea page and white tea page

Fig 1.7 Black tea page and white tea page in An

Fig1.8 animation effects

This page is dedicated to Floral Tea, following the consistent interactive style and soft color scheme of the entire website. It showcases a selection of popular floral teas such as jasmine, rose, and chrysanthemum. Each image is a high-resolution photograph designed to evoke a fresh, natural feeling. For user interaction, I applied hover effects: when the cursor hovers over a tea image, it slightly darkens, and a brief description fades in—sharing key details like the tea’s benefits, flavor profile, or brewing advice. This interaction not only adds playfulness but also structures information delivery more effectively. The clean layout and generous use of white space keep the focus on the teas’ vibrant visuals, enhancing an immersive experience.