Advanced Interactive Design / Task 3: Final Project

26/6/2026 - 31/7/2026 (Week 9 - 15)

Rachel Ng Jie Ting/ 0378902

Bachelors of  design (Honours) in creative media

Advanced Interactive Design /  Task 3: Final Project

---

---

Table of content

Instructions

Task 3: Final Project

Feedback

Reflections

---

Instructions

Module Information Booklet

 Task 3: Final Project (30%)

Submission Requirement:

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).

--------------------------------------------------------------------------------

Development Progress

Drawing assets...

Before I start drawing the assets in adobe animate, I went out to find some reference photos first.

After that, I moved the reference images into adobe animate to get started with the assets, 

I used a dedicated file to draw on, separated from the actual website pages file. 

Once the asset is ready, I would make it into a symbol, and copy paste it into the targeted file.

Sometimes, I would just straight draw in the targeted file, merge layers, ctrl +B to break everything, and wrap in a symbol.

Finding website bgm...

I scoured the internet for free background music that is suitable for my website, and found this.

Below is music credit.

----------------------------------------------------

♪ stream cafe - boba date

link: youtu.be/kj1MDJXJ7-I

website: streamcafemusic.com

----------------------------------------------------

Code snippets showcase...

My website has 5 unique door transition for each page of the website, depending on the button clicked, the corresponding door will close, and open when the user is sent to the specific page.

With all the transition doors across my website, I had the AI to optimize my code, so that universal items like the navbar can be reused across separate file, and allow me to easily customize the transition animation.

Just need to make sure everything is labeled properly.

Final Task 3: Final Project 

Final website link

https://thedairydiary.netlify.app/

---

Feedback

-

---

Reflections

Levelled up my Adobe Animate and animation skills alot. 

I enjoyed drawing and creating assets for the website, maybe I would enjoy it more if there isn't a deadline looming so close.

Structuring my website so that each page runs off its own Animate file saved me from potential disaster when the thunderstorm took out my electricity, my pc, and my animate file. Remember to always backup files.

Taking on too many subjects at once created a massive bottleneck, forcing a rush across multiple projects. Better workload balance will save my sanity next term.


AI Disclosure

AI tools, such as gemini) were used in the coding part of my website making. 

They helped me understand, troubleshoot, and optimise parts of the website's code. 

All AI-generated suggestions were reviewed and tested to suit my website requirements, with the final implementation and decisions remaining my own.