Advanced Interactive Design — Final Project: Completed Thematic Interactive Website

26.11.2025 - 11.01.2026 / Week 10 — Week 16

Chan Zhi-Ren Zenndan / 0369069

Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Final Project: Completed Thematic Interactive Website

Table of Contents

    1. Instructions

    2. Process

    3. Reflection

1. Instructions

Document 1.1 Module Information

2. Process

For Task 3, these are the exact instructions we were given:

Students will synthesise the knowledge gained in tasks 1 and 2 for application in task 3. Students will create integrated visual assets and refine the prototype into a complete working and functional product experience, a minimum of 5 working pages.

Deploy the final website to Netlify or GitHub. Add the link to your blog (e-portfolio). As a backup plan, upload the project folder to Google Drive as well. Make sure that the Google Drive link is set to public. No video walk-through is required for this submission.

Essentially, we are to review back our Task 2 and construct a fully functional website on Adobe Animate.

I started by looking back at my prototype in Task 2. Below is my Figma prototype from Task 2.

Live Figma Preview 2.1 Figma Prototype

Then, I proceeded to create my Animate file and adjust the publish settings according to Mr. Shamsul's recommended settings, which was to set Center stage and Make responsive to "both" and Scale to fill visible area to "Fit in view." This will prevent any issues in the final product.

Figure 2.1 Publish settings

Right after that I tried to replicate as much as I can from my prototype to Animate.

Figure 2.2 Replicating from Figma

Then I had to add in code to make the buttons and the overall interactivity work. I had to research quite a bit doing this part.

Figure 2.3 Adding code

Below is what my timeline looks like. I wasn't utilizing it properly as I kept forgetting what layer I was on, but just by having different layers helped me a lot.

Figure 2.3 Timeline

I had also set up many symbol types, mostly buttons and movie clips, to make my website functional. It looks messy but that's part of the process.


Figure 2.4 Symbols setup

Figure 2.5 More progress

It took me a few weeks to get everything done but I was ready to publish the website on Netlify.

I exported my work folder and uploaded it on Netlify.

Figure 2.6 Uploaded to Netlify


Please click here to view my website.





3. Reflection

This project was a real climb from the start when I first sat down with Mr. Shamsul to figure out a topic. We talked about moving away from the usual "overused" ideas, and since manual coffee brewing isn't exactly a huge thing in Malaysia, it felt like a cool, unique direction to take. Transitioning from the Figma prototype to actual coding in Animate was a huge wake-up call, though. I definitely enjoyed Task 2 more because Figma feels familiar and fun, whereas starting from scratch on Animate was a massive struggle. I realized early on that my 1:1 vision had to change because of how the timeline and layers actually work compared to a static design tool. I ended up making some big calls, like cutting the navigation bar entirely to keep the flow simpler and moving the sticky note tips to the selection screen when the code got too messy.

The technical side was definitely the hardest part, and there were times I spent hours staring at buttons that just wouldn't click for no apparent reason. I eventually figured out that most of my "technical walls" were just layer conflicts or missing keyframes that I couldn't see because I was too stressed. I learned that the best way to fix a bug was actually to just walk away, get some air, and come back with a clear head. Usually, the fix was right in front of me once I stopped overthinking it. While I appreciate this module for teaching me the ropes of a new software, I can definitely see myself hitting more hurdles if I use Animate again in the future. Even though I had to compromise on some of the original design, I’m proud that I managed to bring the core idea to life. It was a lot more of a challenge than my previous modules, but seeing everything finally come together made it all feel worth it in the end.

Comments

Post a Comment

Popular posts from this blog

Brand Corporate Identity

Image
23.09.2025 - 17.12.2025 / Week 1 — Week 13 Chan Zhi-Ren Zenndan / 0369069 Brand Corporate Identity / Bachelor of Design (Honours) in Creative Media / Taylor's University Table of Contents     1. Lectures     2.  Instructions     3. Process Work          3.1.  Task 1: Breaking Brand          3.2. Task 2: Logo          3.3. Task 3: Positioning & Identity     4. Reflection 1. Lectures Lecture 1: Introduction This lecture introduced the Brand Corporate Identity module and helped me understand what branding actually involves beyond just designing a logo. I learned that brand identity starts with a symbol or mark and slowly develops into a full visual system that represents a brand’s values and positioning. Key takeaways from the lecture: Branding is about visual identity and consistency A symbol represents an idea or meaning, not just decoration Identity desig...
Read more

Publishing Design

Image
24.09.2025 - 17.12.2025 / Week 1 — Week 13 Chan Zhi-Ren Zenndan / 0369069 Publishing Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Table of Contents     1. Lectures     2. Instructions     3. Process Work          3.1  Task 1: Exercises          3.2  Task 2: Content Generation          3.3  Task 3A: Book          3.4 Task 3B: eBook     4. Reflection 1. Lectures Formats The focus this semester is solely on the book format, simply due to its historical significance, it is the oldest format of publishing. Designing a book requires you to have a comprehensive understanding of typography , a good sense of space , an eye for details , and a good understanding of a publishing software . Fig 2.1 Lectures notes on 'Historical formats' (8/10/2025). History of Print Fig 2.2 Lecture notes on the 'History ...
Read more

Advanced Interactive Design — Task 1: Thematic Interactive Website Proposal

Image
24.09.2025 - 15.10.2025 / Week 1 — Week 4 Chan Zhi-Ren Zenndan / 0369069 Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Table of Contents     1. Lectures & Activities     2. Instructions     3. Process 1. Lectures & Activities Week 1 Mr. Shamsul gave a brief introduction of the module and what's to be expected in the coming weeks. In regards to the first task, we were to come up with at least 4 ideas/themes and choose 1 to settle with through the entire continuous project. We were also advised to install Adobe Animate for an activity next week. Week 2 I presented my ideas for the project and decided on 'Manual Coffee Brewing.' No practice on Adobe Animate due to Mr. Shamsul having a flu. Week 3 We learned how to set up our document in Animate, and started getting used to the tools. Figure 1.1 Setting up a new document (08/10/2025). Figure 1.2 Getting started (08/10/2025). After drawi...
Read more