Advanced Interactive Design Final Project: Completed Thematic Interactive Website
Advanced Interactive Design Final Project: Completed Thematic Interactive Website
22/11/2025—07/01/2026 (Week 9-Week 15)
Advanced Interactive Design / DST60804
Bachelor of Design in Creative Media / Taylor's University
TABLE OF CONTENTS
1. Instructions
2. Lecture
3. Final Project: Completed Thematic Interactive Website
4. Feedback
5. Reflection
Instructions
Students will synthesize the knowledge gained in tasks 1, 2, and 3 for application in task 4. Students will create and integrate visual assets and refine the prototype into a complete, working, and functional product experience.
Requirements
1. Deploy the final website to Netlify or GitHub.
2. Upload the project folder to Google Drive as well.
3. No video walkthrough is required for this submission.
Lecture
Week 10:
Mr. Shamsul taught us how to use GSAP in Adobe Animate so that when navigating, it features unique effects and animations.
 | |
|
Final Project: Completed Thematic Interactive Website
First, I created a loading page using tea leaves as a design element. The overall visual style is dominated by green and leaf elements, and I used a looping animation with a movie clip and timeline to make the loading process appear smoother, rather than static. This loading page functionally informs users that content is loading and also helps users have a more comfortable experience before entering the website.
 |
| Fig. 1.1 Loading page |
I used
this.stop() to control the main timeline and an event to detect when the loading animation finished, then move to the next page to ensure a smooth transition. |
| Fig. 1.2 Action |
This page serves as the main visual entry point for the "Story of Longjing Tea" project. I've employed a centered layout to highlight key images of the tea garden and used grid lines to ensure alignment and visual balance. Multiple layers are organized along the timeline to separate background, text, and animation elements, creating a clear, easy-to-understand, and manageable structure. The animation, where the text slides down from above, is simple and fluid, guiding the user's attention to the main content before moving to the next section.
 |
| Fig. 1.3 Loading page |
On this all-timeline page, I used button symbols with three states—click, hover, and press—to create interactive navigation between different history chapters. Each button triggers a frame-based interaction, allowing the user to navigate through the timeline content step by step. By separating the interactive elements into separate layers, I can clearly control user input and avoid interfering with visual animation. This interactive design makes the timeline easy to use and improves the clarity of the overall navigation.
 |
| Fig. 1.4 Timeline page |
 |
| Fig. 1.5 Timeline page Action |
Mr. Shamsul told me that the animation for "How to make a page" was a bit difficult to implement in Android, so I changed it. I replaced it with the GSAP function discussed in class.
 |
| Fig. 1.6 Before layout |
Use a timeline and keyframes to manage animations, use different layers to distinguish production steps, control step switching using gotoAndStop() and gotoAndPlay(), and use button state changes to provide interactive prompts.
 |
| Fig. 1.7 How to Make Page |
The two-column layout, coupled with a "Get Start" button, stimulates the user's desire to explore. A staggered background layer is added to the image, creating the texture of stacked paper cards. Keyframes for the "Get Start" button's Over and Down frames are fine-tuned to ensure natural feedback when the user hovers over or clicks the mouse.
 |
| Fig. 1.8 Tasting Page |
After completing these steps, I started uploading to Netlify. The first five uploads failed. After consulting with my instructor, I realized it was my carelessness in not reading the messages and missing important information. Thanks to my instructor's reminder, I finally succeeded.
 |
| Fig. 1.9 Netlify |
Netlify link: (Be patient and wait, because it's a bit slow.)
Drive Link:
Feedback
Week 10:
The website lacks a prominent logo and title for quick identification of its theme. The loading page elements are too small and need appropriate scaling. Mr. Shamsul told me the "How to Make Page" animation was a bit complex and difficult to implement in Android, so I changed it. I replaced it with a GSAP feature discussed in class.
Reflection
This "The Story of Longjing Tea" project was also my first time learning Adobe Animate from scratch. Initially, I had no idea how to operate it; the timeline, layers, and keyframes seemed incredibly complex, leaving me somewhat helpless. However, as I gradually worked on the animations and interactions, I became familiar with the various tools and was able to control the movement and rhythm of elements. Special thanks to Mr. Shamsul for his patient guidance.
While creating the website, I truly realized that design is not just about making pages look good or writing beautiful copy; more importantly, it's about the user experience. For example, in the "tea tasting" interaction, the animations of the teacup gently floating, the card slowly unfolding, and the aroma of tea rising—seemingly small changes—required repeated adjustments to speed and rhythm to create a smooth and natural feel to the page. Gradually, I realized that dynamic effects and interactive rhythms are like the "breathing" of a website, immersing users and giving the entire design a sense of life.
Looking back on the entire process, I think my biggest takeaway was an understanding of design principles and interaction thinking: every decision regarding visuals, copy, and animation needs to find a balance between aesthetics, functionality, and user experience. This project not only taught me new skills, but also made me understand the core of design—to evoke the user's feelings through details and rhythm, rather than simply piling on effects.
Comments
Post a Comment