ADVANCED INTERACTIVE DESIGN FINAL PROJECT & E-PORTFOLIO
13.06.2025 - 27.07.2025 / Week 8 -Week 14
.png)
2. Navigation Bar
4. Exit button placement
While completing the project, I realized that the 'X' (exit) button should consistently be placed at the top right corner across all pages for better usability and consistency."
Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media
Advanced Interactive Design / DST60804 / Section 02
Final Project & E-portfolio
TABLE OF CONTENTS
1. INSTRUCTIONS
2. EXERCISES
3. TASKS
4. FEEDBACK
5. REFLECTION
INSTRUCTIONS
EXERCISES
All W1-W9 exercises are completed in Task 1.
TASKS
FINAL PROJECT & E-PORTFOLIO
In Task 4, we were required to synthesise the knowledge gained from Task 1 (research and ideation), Task 2 (visual and interaction planning), and Task 3 (prototype development) to create a fully functional and refined interactive website experience. This task involved integrating visual assets, applying interactive features, and polishing the overall user flow into a complete and cohesive product.
We were required to develop a minimum of five fully working pages, demonstrating both design and interactivity. The final project had to be deployed on either Netlify or GitHub, with the live link added to our blog (e-portfolio). Additionally, we were asked to upload the full project folder as a backup to Google Drive, ensuring the link was set to public. A video walkthrough was not required for this submission.
Throughout this task, the focus was on combining design principles with technical execution, resulting in a site that responds to user interaction while maintaining a consistent visual narrative.
After receiving feedback on my Task 2 prototype(physically cz Mr Shamsul missed giving comments in my blog), I made several adjustments and minor refinements. I also added more completed visuals to the prototype to better convey the story theme and provide clearer direction overall.
1. Layout of polaroid in Home Page
"Layout of the main screen feels messy, no design principle applied." The arrangement of polaroid is changed to look neater and consistent.
.png)
The original navbar displayed an underline beneath the active page text. I have updated it by removing the underline to achieve a simpler look and instead added a blue highlight to indicate the current page.
navbar: before and after
3. Star map
The stars on the 'Star' page initially felt too flat and childish, so I decided to use a more sparkle-shaped design to give a more mature appearance. I also added a glow effect using Figma and exported it as a PNG to be used in my Animate project. I experimented with different arrangements for the star map, but ultimately, I found that my original layout still looked the best (i hope!).
exploration of stars arrangement
While completing the project, I realized that the 'X' (exit) button should consistently be placed at the top right corner across all pages for better usability and consistency."
Final Figma Prototype:
Animate Process:
Setting Up the Project in Animate
I began by preparing the base layout in Adobe Animate. This included building the background with animated stars, as well as adding the navigation bar, logo, sound toggle button, and social media icons. To stay organized, I placed each element into its own layer and converted key UI components into symbols(mostly Buttons or MovieClips) to enable interactivity later on. I also assigned instance names to each symbol to prepare for scripting and functionality integration.
Navigation to Pages
Loading Vinyl
The loading screen features a spinning vinyl record animation, designed to immediately set the tone and aesthetic of the website. As the vinyl starts rotating, a subtle crackling sound plays in the background — mimicking the familiar audio texture of a record player warming up. This detail not only adds an interactive feel to the loading experience but also ties into the album's nostalgic, analog-inspired theme. The spinning vinyl acts as a visual cue to let users know the site is loading while immersing them in the mood of the Blur project right from the start, creating anticipation before transitioning into the main interface.
Sparkle stars animation effect when clicked to start
The initial idea was having a sparkle animation effect when users click on anywhere to start. However, this idea did not work out after many coding. Therefore, I changed it to just clicking on the button text and the sparkle animation effect appears (using the timeline method).
The initial idea was having a sparkle animation effect when users click on anywhere to start. However, this idea did not work out after many coding. Therefore, I changed it to just clicking on the button text and the sparkle animation effect appears (using the timeline method).
Sound Integration
Two background music tracks were used — one for the index.html (serving as a more dramatic or opening feel) and another for the home.html, which features a softer piano rhythm to match the calmer tone of the main experience. I implemented the audio using CreateJS and added a sound toggle button for mute/unmute control.
Initially, the mute/unmute function caused the icon to blink or glitch, especially when I placed the UI inside a MovieClip. After a lot of testing and troubleshooting, I restructured the setup using Option 2 — separating the navigation and avoiding wrapping everything inside a MovieClip. This change finally resolved the blinking issue.
The sound implementation turned out to be one of the most frustrating parts of the project and took a few days to properly fix, as the issue kept reappearing due to small structural mistakes.
Switching to Timeline Navigation
After facing issues with symbol-based navigation, I decided to use a frame-by-frame navigation approach on the main timeline. Each “page” — like Home, About, Star, and Petal — was placed on separate frames to avoid visual overlap. I added frame labels to control navigation and used gotoAndStop() in my button code to switch between them.
Page Content Design
I placed the content of each page (e.g., polaroids for Home, glowing stars for the Star Page) directly onto their respective keyframes. Each section had its own layer to keep things organized. I also standardized elements like the ‘exit’ button to always appear in the top-right for consistency across pages.
Deployment via Netlify
I exported the project and faced several issues while deploying to Netlify. I learned that I needed to include only the necessary files (like index.html, .js, images/, and sounds/) and leave out the Animate .fla file. After organizing my files into a new folder and deploying manually, the site finally worked as intended.
Netlify link: https://a-beautiful-blur-emilygohjy.netlify.app/
Walkthrough: https://youtu.be/ylN6n8U4WkU
FEEDBACK
WEEK 5
no feedback//online
WEEK 6
Specific Feedback(task 1)
- wireframe is messy
- theme should be more consistent
- more neater layout
- neater text placement
- less playful design(mature)
- need to focus on the theme because now feels like each page is different theme
- (after understanding the concept) no need to eliminate any pages except closing page
- research more on nostalgic theme
- ensure 'write you blur' is understandable, if not clear enough change the term
- don't include a 'thank you' page as this doesn't need to 'close'
- include a menu or navigation(hamburger/somewhere fixed)
- footer of socials
WEEK 7
no feedback//online
WEEK 8
no feedback//online
after submission feedbacks:
WEEK 9
Specific Feedback
- wireframe is overall fine and doable
- layout of the main screen feels messy, no design principle applied
- navigation bar not very nice, could be better
- can change colour when hover instead of having the lines under text
- can tell that the theme is minimalistic yet have polaroid as the main element
- background animation can be done on adobe animate or used a video but it might take up a lot of space
- create a folder and have separate files, this saves more space, avoids crash and lost of whole project
- name each file the page's name but first must be index
- the star page's stars feels too flat and childish, make glow effect
- look up for more inspirations
- focus on the UI interactions
- can be simple yet interesting
WEEK 10-14
no feedback
REFLECTION
Experience
This final task was where everything truly came together — and where the challenges got very real. Unlike Task 2, which focused more on concept refinement and visual planning, this phase pushed me to fully execute the beautiful blur website in Adobe Animate — all within just five days. It tested both my technical skills and creative patience in ways I hadn’t expected.
I began by structuring the main interface: layering the navigation bar, sound toggle, social icons, background visuals, and interactive polaroids. Making all these elements work together without visual clutter required ongoing adjustments. Eventually, I chose to manage navigation using a frame-by-frame method, placing each “page” (Home, About, Star, Petal, etc.) on its own labeled keyframe. This made it easier to control transitions with gotoAndStop() and kept everything organized within a single file.
One of the biggest struggles was getting the background music to work properly. I needed it to loop, respond to the mute button, and stop or start based on user actions. At one point, my sound button began blinking repeatedly due to how I had wrapped it inside a MovieClip. Fixing this took a lot of trial and error — and a total UI structure rework.
Deploying the project to Netlify brought a whole new set of obstacles. At first, I uploaded my entire folder (including the Animate .fla file), only to find it didn’t work. I eventually learned that I needed to create a clean export folder containing only the necessary files: index.html, .js, images/, and sounds/. It became a repetitive process of cleaning, organizing, and testing until the site finally loaded as expected.
Throughout this process, I truly came to understand how demanding interactive design can be. It’s not just about how things look, but also how they’re structured, how they behave, and how smoothly everything runs together. There were plenty of frustrating moments — from constant Animate crashes to ChatGPT giving me overly complicated solutions that I had to undo — but there were also rewarding ones when something finally worked as intended.
In the end, I’m proud of what I accomplished. I honestly didn’t think I’d manage to finish the whole site when I first started, especially considering how complicated it felt in the beginning. But despite the redos, tech issues, and moments of self-doubt, I made it work. This project taught me that building an interactive experience isn’t just about creativity — it’s about patience, problem-solving, and persistence. And maybe... learning when to trust your own method over AI advice sometimes too.
QUICK LINKS
Comments
Post a Comment