Advanced Interactive Design / Final Project – Completed Thematic Interactive Website

 Final Project – Completed Thematic Interactive Website

• 40% individual 
• Week 09 – Week 14 

1. ASSIGNMENT BRIEF

• For this final assignment, we are required to combine the knowledge and skills developed from Tasks 1 and 2 to produce a fully functional website prototype. The project must include at least 5 working pages and feature integrated and refined visual assets to deliver a complete user experience.

2. PROCESS

Button & Asset Preparation

To begin the assignment, I decided to prepare all the pages in Adobe Animate. I started with the button design by creating both the hover and pressed effects. I made sure that the button’s clickable area covered the whole space I drew, not just the text itself—this way, users can easily trigger the button’s animation when hovering over the entire button area.

Here’s an overview of the button design process:

Figure 2.1 Example of the button in its normal state.

Figure 2.2 Example of the button when hovered.

Figure 2.3 Example of the button when pressed.

Home Page Animation

After finishing the button setup, I began animating the homepage. Initially, I created a slide-in animation that triggered after the user clicked on the band logo—the page would slide upward with low opacity, and then fade fully visible. However, during testing, I found that the slide-in effect looked a bit awkward, almost like a “door opening” motion.

So, I made some adjustments to improve it:

• Removed the awkward sliding motion and changed it to a smooth opacity fade-in instead.
• Modified the homepage layout compared to my prototype:
• The page is shorter in height.
• The home button placed near the center of the page instead of directly in the middle.

Figure 2.4 Home Page Timeline Example

About Album

Adding fade in out when hover the song cover is being hover 

Figure 2.5 Create Fade in and out when hover song Image

Design Changes & Improvements

Halfway through the process, I consulted with my lecturer for feedback. He suggested two improvements:

• Add a footer to the website for better structure and balance.
• Make the animations feel less static—he recommended using a staggered fade-in effect for elements, where each part fades in slowly one by one.

I applied these suggestions to improve the overall flow and user experience of the site.

Linking All Pages Together

Initially, I tried to link the pages by using frame numbers for navigation. However, as I kept adjusting the animations and timelines, the frame numbers kept changing, which made everything quite messy and hard to manage.

To solve this, I switched to using frame labels instead. I added clear labels to each page, making it much easier to jump between pages without worrying about frame changes during edits.

Figure 2.6  Example of Frame Labels (showing one page for reference)

Final Timeline Overview

Here’s a glimpse of the full timeline after setting up all pages and animations:

Figure 2.7  Overall Timeline View (Part 1)

Figure 2.8 Overall Timeline View (Part 2)

3.FINAL OUTCOME

Google Drive - CLICK HERE (Adobe Animate Folder)

5 Pages I did 

• Home Page
• About Album (With Hover Effect)
• About Album Page 2 (inside)
• About Album Page 3 (song Page) after hover for Matter +
• About Band
• Upcoming Event
• Merchandise

4.REFLECTION 

In this final assignment, I have gained a deeper understanding of what makes a website interactive and how important interactive elements are in enhancing user experience. Throughout this project, I also improved my skills in using Adobe Animate — especially compared to when I first started.

Although I faced challenges along the way, particularly when trying to link all the pages together or create hover effects, I managed to overcome these difficulties through problem-solving and persistence. This experience has not only strengthened my technical skills but also helped me better understand the process of developing interactive websites and the role of animation tools in  a more engaging results.