Advanced Interactive Design / Final Thematic Website
%20(2).gif)
Daphne Lai Yu Cheng / 0366380
DST 60804 / Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors' University
All lectures & class activities are documented in Advanced Interactive Design / EXERCISES.
INSTRUCTIONS
Final Thematic Website
Instructions
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).
Process (Asset Creation)
- B&W images,
- Polaroid frames
- Torn paper
- Images with hue effect
- Vivienne Westwood logo
- Tartan pattern (Vivienne Westwood's signature design element)
- Vibrant starbust shapes (I applied colour halftone effect on them too)
Figure 1.1 Collage
2) Buttons
- Logo button (Vivienne Westwood logo drawn in IbisPaintX)
- Audio buttons
- Back to top button
- Scroll button
- Close button
%20%207_8_2026%204_01_08%20AM.png)
%20%207_8_2026%204_01_22%20AM.png)
Figure 1.2 Buttons
3) Headline
For the headlines, I want to create animations for them instead of making them static. I selected a ransom font and typed them in different letter case variations.
%20%207_8_2026%204_01_58%20AM.png)
Figure 1.3 Headlines
4) Photos
For the photos in the website, I initially wanted them without frames when I created the prototype in Figma, but they looked too plain and minimalistic in the website.
I think adding frames give more of a junk journal/scrapbook aesthetic which also matches the chaotic editorial direction I'm going for.
I added frames for them after testing them in the website. (Last minute improvements)
%20%207_8_2026%204_02_20%20AM.png)
Figure 1.4 Photos
This is the overall of my asset creation which is kind of messy...
Figure 1.5 Asset creation workspace
5) Vivienne Westwood Orb 3D Model
For my History page, I created a 3D model of the Vivienne Westwood orb. This took the longest because my laptop was crashing throughout the modelling process but I got it done eventually and finally.
I used ChatGPT's help and step by step guide on how to model it. It was quite a fun and easy process to be honest.
I started with creating a sphere and torus shape, adjusted the size of the torus surrounding the sphere.
Figure 1.6 Setting up sphere & torus
Figure 1.7 Flattening torus & adding more torus
Creating the maltese cross was the hardest process. I tried modelling it on my own but I failed. I used an alternative method which was to use an SVG of the cross and extrude iit, add some depth to it and smoothen it.
After that's done, I applied colours and materials/textures to them. For the orb, I applied a glass transparent material and appplied a metallic material for the cross and ring.
Figure 1.8 Creating maltese cross shape & adding colours and materials/textures
Figure 1.9 Creating gemstones
I exported it as GLB file and uploaded into VSCode to view the outcome. The colours were not what I expected because they're too light.
Figure 1.10 Preview in website
I went back to blender to change the colours into darker tones.
Figure 1.11 Changes in Blender
Finally, this is the final outcome of the orb. I was satisfied with how it looked like.
Figure 1.12 3D model final outcome
Before starting on coding, I renamed all the assets so I won't mess them up later.
Process (Coding the website)
Figure 1.2 Setting up pages in VSCode
Codes that are shared for all pages:
1) Navigation Bar
I made the navigation bar to be consistent across all pages and used "active" class for each current page to allow users to identify which page they are on.
2) Background Audio
I added background music across all pages and created my own audio buttons and used them as custom controls for users to play or mute the music. The <audio> element functions to load and loop the background music.
3) Image Pop Up + Close Button (History, Punk! & Craftsmanship)
4) Animated Ransom Title (History, Punk! & Craftsmanship)
1) Loading Page
2) Home Page
3) History Page
4) PUNK! Page
5) Craftsmanship Page
6) Collections Page
SUBMISSION
Google Drive: https://drive.google.com/drive/folders/1c4O4e2DvoCGsbKTc2fSZb1-CWzMDUZm7?usp=sharing
Week 13 (16/7/2026)
Assets are not that important than content. Focus more on the website's content.
Working on this final website was both fun and challenging. There were definitely moments where I struggled because coding is not my strongest skills.
Using VS Code helped make the development process much easier and saved me a lot of time but still had to relied on AI throughout the project to troubleshoot issues and help me understand how the codes worked because I am still new to JavaScript and GSAP. This made it much easier for me to learn while building the website. GSAP was another tool that helped to bring my animation ideas to life and made the website feel more interactive.
Overall, I really enjoyed this module despite the challenges. My biggest difficulty was managing my time but it was a valuable learning experience. It also made me interested in creating more websites in the future and continuing to improve my coding skills.
Comments
Post a Comment