Final Task – Completed Thematic Interactive Website
16.11.2025 - 11.01.2026
Michael Chan Henn Loong / 0363611
Experiential
Design / BA of Design (HONS) in Creative Media / Taylor's University
Final
Task – Completed Thematic Interactive Website
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1DoD5hSdQlnH9zoPdNsoawq62rFX6vv9S/preview" width="640" height="480"></iframe>
INTRODUCTION
The Fall Before Dawn is an interactive website I created as a narrative and visual experience rather than a typical informational website. The idea behind this project was to explore how animation, sound, and interaction could be used to tell a story emotionally, without relying too heavily on text.
Instead of separating content into multiple pages, I designed the website as one continuous journey. Users move through different sections that represent different emotional stages, guided mainly by visuals, motion, and atmosphere.
CONCEPT DEVELOPMENT & NARRATIVE STRUCTURE
The conceptual foundation of the website is built around the idea of rise, fall, and reflection. These stages are represented through three primary sections:
The Flight (Sun) — ambition, aspiration, and elevation
The Fall (Moon) — loss, descent, and consequence
Reflection (Labyrinth / Behind the Wings) — understanding and acceptance
A recurring winged figure appears throughout the animations, acting as a visual metaphor for freedom, vulnerability, and transition. By reusing this character across multiple scenes, the narrative remains cohesive even as the emotional tone shifts.
The narrative avoids explicit explanations and instead relies on:
Direction of movement (upward vs downward)
Changes in speed and easing
Color temperature and contrast
Sound continuity
This approach encourages interpretation and emotional engagement rather than passive consumption.
.png)
VISUAL LANGUAGE & ART DIRECTION
Symbolism & Color Use
Color was used deliberately to support the emotional arc of the narrative. The Sun section features warmer gradients and brighter highlights to communicate vitality and energy, while the Moon section introduces cooler tones and reduced contrast to suggest isolation and weight.
Abstract shapes and atmospheric paths were layered behind the main character to enhance depth without distracting from the central figure. These elements act as environmental cues rather than literal scenery, reinforcing the dream-like quality of the experience.
.png)
.png)
ANIMATION DESIGN PROCESS
4.1 Adobe Animate Workflow
All core animations were created using Adobe Animate, exported as HTML5 Canvas animations powered by CreateJS. This approach allowed the use of traditional timeline animation techniques while ensuring compatibility with modern web browsers.
Each animation followed a consistent workflow:
-Initial motion blocking using keyframes
-Refinement with easing curves
(ease in, ease out)
-Layer separation for foreground, character, and
background
-Export as a CreateJS compatible canvas animation
-Sprite
were automatically generated during export to optimise performance and reduce
load times.
.png)
4.2 Motion & Pacing
Motion pacing was treated as a narrative tool rather than a purely visual one. The Flight sequence uses smoother, lighter movement with gradual easing to convey control and stability. In contrast, the Fall sequence introduces slower transitions and heavier easing, giving the impression of resistance and gravity.
The repeated appearance of the winged character across animations helps visually connect each stage while allowing the surrounding environment to evolve.
WEBSITE ARCHITECTURE & TECHNICAL STRUCTURE
5.1 Single Page Application Design
The website is structured as a single page application (SPA). Instead of navigating between separate HTML pages, all content sections exist within a single document.
-This design choice provides several benefits:
-Smooth transitions
between sections
-Persistent animation and audio state
-Reduced
loading interruptions
Navigation is handled through a custom function that updates active sections while managing animation playback.
5.2 Animation Lifecycle Management
To ensure performance efficiency, animations are paused when their corresponding section is inactive. This prevents unnecessary CPU usage while maintaining the integrity of the visual experience.
Canvas elements are dynamically resized and centered to accommodate different screen sizes while preserving their original aspect ratios. This ensures visual consistency across desktop and mobile devices.
USER INTERFACE & INTERACTION DESIGN
6.1 Navigation Experience
The navigation menu is designed as an overlay rather than a traditional header menu. This decision helps maintain immersion by reducing visual clutter and keeping focus on the animations.
Interactive states such as hover feedback and click transitions provide subtle cues that guide user interaction without drawing attention away from the narrative.
.png)
6.2 Sound & Immersion
Sound design plays a significant role in reinforcing the emotional atmosphere of the website. Background music begins automatically and continues seamlessly as users move between sections. A sound toggle allows users to mute or resume playback, with preferences saved for consistency.
By maintaining audio continuity, the website feels cohesive and uninterrupted, strengthening immersion.
BEHIND THE WINGS ( PROCESS )
The Behind the Wings section provides insight into the creative process by showcasing individual visual assets used in the animations. Users can interact with these elements to view them in isolation, encouraging appreciation of the design process behind the final outcome.
This section transforms the website from a purely narrative experience into a reflective documentation of creative development.
REFLECTIONS
One of the main challenges of this project was integrating complex animations into a web environment while maintaining performance and responsiveness. Learning to manage animation lifecycles, canvas scaling, and audio persistence required experimentation and iteration.
-Through this project, I gained practical experience in:
-Adobe Animate
HTML5 Canvas workflows
-Motion design principles for storytelling
-JavaScript
based navigation systems
-Responsive animation integration
This project reinforced the importance of aligning technical decisions with narrative intent, demonstrating that strong user experience design relies on both creative and structural considerations.
FINAL SUBMISSION
CONCLUSION
The Fall Before Dawn demonstrates how animation, sound, and interaction can be combined to create an emotionally driven web experience. By prioritising narrative flow and immersion, the website moves beyond traditional layouts and becomes a form of digital storytelling.
Future development could explore scroll-based animation control, deeper interactivity, or branching narrative paths, further expanding the expressive potential of the project.
.png)
Comments
Post a Comment