Thematic Interactive Website Proposal
23/04/2026 - 14/06/2026 (Week 1 - Week 8)
Chang Wing / 0367807
Advanced Interactive Design / Bachelors of Design (Honours) in Creative Media / Taylor's University
Thematic Interactive Website Proposal
TABLE OF CONTENTS
INSTRUCTIONS
Thematic Interactive Website Proposal
Presentation Slides
Presentation Slides
Prototype
Figure 1.2 Figma Prototype
Illustration Process
To improve the efficiency of the illustration process, I used Gemini AI to generate visual references aligned with my original art style. This allowed me to quickly explore how the elements would look and better visualise the overall colour direction.
Figure 1.3 My original artwork style
Figure 1.4 AI speed up illustration visualisation
However, the generated illustrations were not perfect and still required significant manual adjustments to match my intended illustration style and composition.
Figure 1.5 Illustration process in Adobe Illustrator (Snippet)
Figure 1.6 Illustration process in Adobe Illustrator (Snippet)
Figure 1.7 Illustration process in Adobe Illustrator (Snippet)
To make the website feel more Malaysian-style, the state names were redesigned based on the typography and appearance of Malaysian road signboards (Figure 1.9).
Figure 1.8 State name design before (left) and after (right) refinement.
Figure 1.9 Malaysian road signboard. Image from online.
Figure 1.10 Storyboard sketches
Figure 1.11 Illustration process in Adobe Illustrator (Snippet)
Figma Process
Importing from Adobe Illustrator was pretty easy, the SVGs could be copy pasted directly into Figma which saved a lot of time. However, I still had to manually export text elements as PNGs in Adobe Illustrator, the rasterized text appeared blurry in Figma.
Figure 1.12 Importing assets from Adobe Illustrator to Figma
Figure 1.13 Figma Prototyping
To make a text label appear directly above a dot when it is hovered over, I used Absolute Position instead of using the Auto Layout or Frame approach. The Auto Layout approach would cause the text to be added below the dot, shifting the layout and making it difficult to keep the button in a fixed position while adjusting its hit area. By using Absolute Position, the text is taken out of the Auto Layout flow, allowing it to appear above the dot without affecting the layout or the button's position.
Figure 1.14 Component variants for hovering effect
Figure 1.15 Figma Absolute Position
Because I forgot to add a component structure at the start before duplicating the PlayBtn all across my design. Later on, I realised I needed to add a click interaction effect to the PlayBtn, but updating each duplicated element one by one would be inefficient and inconsistent.
Figure 1.16 The play button before component conversion
Figure 1.17 Click interaction component
To avoid manually replacing every duplicated button, I used two Figma plugins: Component Replacer and A Selector.
Figure 1.18 Figma Plugin: Component Replacer & A Selector
A Selector allowed me to quickly select multiple layers based on specific properties, such as their layer name, making it faster to identify all duplicated PlayBtn layers throughout the design.
Figure 1.19 Figma Plugin: A Selector
After selecting all the targeted layers for replacement, I use Component Replacer to replace them with instances of the click interaction PlayBtn component. The plugin also allows preserving the selected layers, meaning it adds the instance as a new layer on top without removing the original layer by checking the "Preserve Selection" option.
Component Replacer - Known Issues:
Wait for awhile before the component loads on the Component Replacer panel, sometime it doesn't appear immediately. The component names are also displayed in this format, so I simply clicked through them one by one to locate the correct one.
Figure 1.20 Figma Plugin: Component Replacer
Figure 1.21 Component Replacer options
FEEDBACK
Thematic Interactive Website Proposal
Week 1 (23/04/2026)
Feedback: Both 'Malaysia Food Adventure' and 'MH370 Commemorative Website' are strong ideas. You can use online images for photorealism, but edit them in Adobe Photoshop to make them your own, keep a balance between self-created assets and sourced visuals. Consider GSAP for scroll-based animations.
Week 2 (30/04/2026)
Feedback: -
Week 3 (07/05/2026)
Feedback: -
Week 4 (14/05/2026)
Feedback: Liked the character illustration style and animation moodboard, can proceed with the current direction. You can add small animation details, such as foot stepping on the floor during idle states and a step-back motion onto the motorbike before transitioning out of the screen so the animation feels more realistic.
Week 5 (21/05/2026)
Feedback: -
Week 6 (28/05/2026)
Feedback: -
Week 7 (04/06/2026)
Feedback: -
Week 8 (11/06/2026)
Feedback: Include all 13 states. Only 6 states need to be clickable for the prototype (Or else its too much for you to do). The reference websites look good, remember to include a clear website nav flow.
REFLECTION
The process of pitching and prototyping has helped me improve my communication and presentation skills, especially in expressing design ideas more clearly and confidently. It also gave me a chance to get back into Figma again, since it had been around 5 months since I last used it. Through this project, I became more familiar with its features again, especially Smart Animate, and understand more how animation can make interactions feel more engaging. I’m looking forward to developing this further in Adobe Animate for the final project.
Comments
Post a Comment