Wee Jun Jie / 0375271
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Task 3: Completed Thematic Interactive Website
INSTRUCTIONS
Week 11
.png)
Fig 1.1 Elements created on Illustrator
This week after consultation with Mr. Shamsul, we are required start our design in adobe illustration/ animate.
.png)
Fig 1.1 Elements created on Illustrator
Before jumping into Adobe Animate for website, I like to prepare certain visual elements in Illustrator especially those that are tricky or impossible to recreate directly in Animate. For this project, that includes the soft, blurred spheres and the frosted-glass-style navigation bar. These effects rely on Gaussian blur and background transparency, which Animate doesn’t support natively or efficiently.
By designing these components ahead of time in Illustrator, I can fine-tune their appearance and export them as ready to use assets. This not only preserves the visual quality I’m aiming for but also streamlines the animation process later on. It’s a small step that makes a big difference in maintaining consistency and polish across the final interactive layout.
By designing these components ahead of time in Illustrator, I can fine-tune their appearance and export them as ready to use assets. This not only preserves the visual quality I’m aiming for but also streamlines the animation process later on. It’s a small step that makes a big difference in maintaining consistency and polish across the final interactive layout.
Week 12 / Adobe Animate
Fig 1.2 start putting assets in Animate
This week, I imported my AI file into Adobe Animate and converted all the buttons to symbols to enable action scripting. Additionally, I arrange all the elements in the place that I previously designed in Illustrator.
1. INDEX PAGE (HOME)
Fig 1.3 home-page-text-color-motion
Fig 1.4 rec-mask-classic-tween
For the title animation, I’m using a classic tween together with a pink‑red rectangle as a mask. The rectangle moves across the text from front to back, revealing the title and creating a smooth wipe effect. My simple combination keeps the motion clean while adding a dynamic touch to the overall design.
2. ABOUT PAGE
Fig 2.1 slide-in-intersection
Fig 2.2 about-page
For the interface animations, I added a few simple but effective touches:
- Slide‑in effect: Key elements such as titles and banners enter the stage with a smooth slide‑in motion. This creates a dynamic first impression and guides the viewer’s attention naturally.
- Button hover & click: Navigation buttons respond to user interaction with subtle changes like color shifts or scale adjustments on hover, and a crisp feedback animation on click. These micro‑interactions make the interface feel more responsive and engaging.
- Slider animation: Product visuals and featured content are displayed in a slider that transitions seamlessly between items. The animation ensures each slide feels connected, maintaining flow while showcasing multiple pieces of content in one space.
3. Quiz (Card Selection)
Fig 3.1 quiz-card
Fig 4.1 model-showreel-png-sequence
Fig 4.2 model-showreel-video
Since I couldn’t find an official product showreel for my website, I used a product photo from the web and recreated it in 3D software to simulate a rotating effect. I then exported the animation as a PNG sequence, which allows me to import it into Adobe Animate. This approach works well because HTML doesn’t support video playback natively in this context, but PNG sequences give me full control over the visual flow while keeping everything lightweight and compatible.
5. Hotspots and Tips
Fig 5.1 hotspots-click-makeup-tips
REFLECTION
Experience
Throughout this project, I went through the complete process of designing an interactive thematic website, starting from concept development to visual design and interaction planning. I mainly used Figma for UI design and prototyping, and Adobe Animate (HTML5 Canvas) to create interactive animations and transitions. During the development stage, I experimented with different ways to present motion and interactivity, such as quizzes, loading transitions, and hotspot interactions. When facing limitations in handling video playback, I adapted my approach by using image sequences to simulate motion, allowing me to maintain the intended visual experience while working within the technical scope of the project.
Experience
Throughout this project, I went through the complete process of designing an interactive thematic website, starting from concept development to visual design and interaction planning. I mainly used Figma for UI design and prototyping, and Adobe Animate (HTML5 Canvas) to create interactive animations and transitions. During the development stage, I experimented with different ways to present motion and interactivity, such as quizzes, loading transitions, and hotspot interactions. When facing limitations in handling video playback, I adapted my approach by using image sequences to simulate motion, allowing me to maintain the intended visual experience while working within the technical scope of the project.
Observation
Throughout the project, I observed that interactive design requires careful planning beyond static layouts. Animations and interactions need to feel purposeful and should guide users smoothly from one section to another. I also noticed that visual consistency, such as color, glow effects, and typography, plays a major role in creating a strong brand experience. Additionally, designing interactions early especially quizzes and hotspot elements helped ensure that the final prototype felt coherent rather than fragmented.
Findings
From this project, I found that technical constraints can encourage more thoughtful design decisions rather than limiting creativity. Using image sequences instead of video gave me greater control over timing and visual flow. I also learned that interactive elements like quizzes and hotspot-based tutorials increase user engagement by making the experience more personal and exploratory. Overall, this project improved my understanding of interaction design and strengthened my ability to balance aesthetics, usability, and technical feasibility.
From this project, I found that technical constraints can encourage more thoughtful design decisions rather than limiting creativity. Using image sequences instead of video gave me greater control over timing and visual flow. I also learned that interactive elements like quizzes and hotspot-based tutorials increase user engagement by making the experience more personal and exploratory. Overall, this project improved my understanding of interaction design and strengthened my ability to balance aesthetics, usability, and technical feasibility.