Task 1: Thematic Interactive Website Proposal

23.09.2025 - 07.10.2025
Michael Chan Henn Loong / 0363611
Experiential Design / BA of Design (HONS) in Creative Media / Taylor's University
Task 1: Thematic Interactive Website Proposal

INSTRUCTIONS

- MIB cant be updated need to wait till october only sir can update it.

Introduction

So on week 1 of the class Mr. Shamsul briefed us on what are we going to be doing for this whole semester, for this module we will only be working on one project and its a continuous project where it will be separated into 3 task. Task 1 the proposal, task 2 the prototype and task 3 the final product of the promised website in our task 1. This week we started our task 1 and there will be a 3 weeks duration for us to prepare all the stuff we need for our task 1 as we will be submitting our work for task 1 on week 3. The requirements for task 1 is:

Full UI/UX Proposal
All Process (Concept, Wireframes, Mood Board, Flow Chart)

On week 2 our progress will be checked during class and we will also be discussing on what topic will we be working on for this whole project it is smart to decide on our topic ASAP so that we have more time to work on the remaining parts of the task.

We've also joined the google classroom prepared by Mr. Shamsul where all the tasks and information will be shared at. We've also been told to prepare Adobe Animate for the next class it is crucial to have it as we will be using adobe animate for most of the time in this module it is the main application we will be using for all the animation and stuff.

And we were also told that the latest Adobe Animate are having some problem like causing crashes and stuff so if it happens to us we can try using the 2023 version it is the most stable version for normal laptop. Mr. Shamsul also mentioned that we can include a walk through at the end of our project for everyones convenience, as websites like these tend to take alot of time to load so having a full walkthrough of our very own website at the end of the project would help save alot of time.

So after all that introduction from Mr. Shamsul, I know that I need to create an interactive animated website using Adobe Animate. The project also requires a minimum of five pages with animations and interactive design.

At this stage, I started working on exploring possible topics and concepts that can be used for my final interactive website.

Topics Explored

So at first my directions are pretty broad I thought of doing a lot of different topics as mentioned by Mr. Shamsul all topics have potential it can be a problem or anything thats happening, I thought about a few potential topics, such as environment, education, mythology, music, and portfolio websites. After some time of thinking I decided to be working on Music, Portfolio and also Mythology website.

Music Album Showcase = An interactive gallery of music albums, each page with unique colors and vibes.
Personal Portfolio Website = An animated personal portfolio that highlights my portfolio
Interactive Folklore/Mythology (Icarus) = A narrative driven interactive site retelling the myth of Icarus with animations that enhance the story.

After getting the topics that I'm interested in I moved on with finding inspirations on how I'd like my website to look like I've gone through TheFWA website as well as Behance and accidentally I came upon a website named landing.love and I found a lot of fun animated websites there and a lot of them are useful for my inspiration so I dived in and gotten a few inspiration there.

Fig 1.0, landing.love website

At this point of the progress I've also started doing my proposal in Google Docs and I've inserted all my ideas as well as the concepts, Flow Charts, Wireframes, Mood Board, Tools and Inspirations into the document so that I have something to show Mr. Shamsul on week 2. Below is the embed PDF version of the Google Doc I've been working on till this point.

Fig 1.1, Proposal #1

After getting feedback from Mr. Shamsul saying that I can work on Idea #3 which is the icarus website, I proceeded and decided that I'll be doing an interactive animation website using Adobe Animate that focus on Greek mythology, specifically the story of Icarus. This concept stood out to me because it offered room for both visual storytelling and symbolic interaction themes that align perfectly with my background and interest in design and narrative experiences.

The chosen title for my project is “The Fall Before Dawn.” It captures the essence of Icarus’ story — the beauty of ambition and the tragedy of overreaching. My main goal was to retell this myth through motion, interaction, and emotion, allowing users to experience the rise and fall instead of just reading about it.

The website is designed to feel poetic and reflective, guiding users through the journey of Icarus’ creation, his flight, his downfall, and the lessons left behind.

So at first I was thinking that I will fulfill the 5 minimum pages requirement by just counting the story pages and also one home page which makes it 5. But after some time of thinking I'd rather start planning more pages now then starting to add in additional pages at the end of the semester just because I was lazy at first. So I added in a few pages the content of the website changed from:

Homepage – Intro to the myth + “Start Story” button.
Chapter 1: Labyrinth – Daedalus + Icarus introduction (torch animation, click to continue).
Chapter 2: The Wings – Users drag feathers onto the wing (basic interactivity).
Chapter 3: Flight – Icarus flying, clouds moving, background scroll.
Chapter 4: The Sun – Hover near the sun → wings start losing feathers.
Ending – Icarus falls, waves move gently

the one above is the old website I thought of which will be much easier comparing to the new one that i just came up with. The one below at User flow section is the new layout.

User Flow

The experience begins on the homepage, where users are asked a simple question “Are you ready to fly?” If they choose Yes, the story begins. If No, they can explore other areas such as About the Creator or Behind the Wings. Each story section includes transitions, simple interactions, and sound effects to maintain engagement.The journey ends on the Reflection page, where users can either replay the story or view the credits. I've also created a user flow on miro board.

Fig 1.2, User flow #1

I decided to do a yes/no situation user flow, at first I was only doing the five interaction pages as well as the home page but after that I noticed its too short like there is no content in my website so this is where I noticed rather then doing just the five story pages I should add in something else as well. After some time of thinking, I redesigned the structure. Instead of having five story pages, I created a more cohesive website architecture that balanced out the storytelling with context and creator insights like all the behind the scene stuff.

The new five main pages are:

Homepage – Animated title sequence “The Fall Before Dawn,” with floating feathers and ambient sound. Users can navigate to any other page from here.
About the Creator – A short self introduction explaining my inspiration behind this project and why I chose to explore mythology in an interactive format.
Interactive Story – The main experience. Users follow Icarus’ journey through four scenes: Labyrinth, Flight, Fall, and Reflection.The animations will be designed in Adobe Animate with transitions and light interaction.
Behind the Wings – A behind the scenes page showcasing my creative process, sketches, mood board, and screenshots of my Animate timeline.
Reflection / Credits – The final page concludes the experience with a poetic takeaway message and project credits.

This new setup allowed the website to feel more complete and personal — users can both experience the myth and also understand the story behind its creation. Once I had my final structure, I started mapping out the user flow.

At first, I made a simple flow homepage → about → story → reflection → credits. So that I understand the whole flow and its also easier for me to see how it should branch out. later, I changed it into a Yes/No branching flow so that the user could navigate more freely: from the homepage, they could go to any section they wanted (About, Story, Behind the Wings, Reflection, or Credits). Inside each page, users could continue the narrative or return to the homepage anytime.

I think this make the experience feel less rigid and more freedom like discovering the website at your very own pace. Below is the latest User flow:

Fig 1.3, User Flow Final

Design Process

I wanted the visual direction to feel poetic something between dreamy and tragedy. Cause Icarus’ story isn’t just about falling; it’s about how beautiful the flight was before the fall and how the greed of oneself leads to the fall and tragedy of oneself.

Mood & Style

Colors: Gold, Sky Blue, Deep Blue, and White (representing light, air, and hope).

Typography: Elegant serif for titles (like Greek inscriptions), and clean sans serif for the body text.

Visual Style: Soft gradients, glowing effects, light particles, and floating feathers for transitions.

Fig 1.4, Icarus website Moodboard

So I gathered these into my moodboard most of them are Icarus related and some are from the stuff that I think I will be using in the final work like the sunset the sea, as well as the labyrinth these are all the elements that I will be using for the website.

I've also kinda decided on what color I will be using for my website below are the color palette for Icarus website:

Soft Cream

Warm, parchment like base
#F3E9DA
Backgrounds / page base

Golden Hue

Sunlit tone representing warmth & flight
#F6C47C
Highlights / buttons / accents

Deep Amber

Represents Icarus’s ambition / the sun
#E89B3D
Hovering / decorative lines

Muted Coral

Adds emotional warmth
#D87A5A
CTA areas

Slate Blue

Calm contrast to warm tones
#4A5E75
Text / headings / dividers

Charcoal

Depth and structure
#2B2B2B
Primary text / navigation

Light Ash

Subtle neutral for spacing
#B5B5B5
Borders / secondary text

Wireframes

After I'm done with all these moodboard stuff I started to think on how should I do my moodboard and went on and explored a lor of various cool and breathtaking layouts but after giving myself some thoughts I knew I shouldnt be doing something too difficult as I personally is already new to this kind of interactive websites and I'm not familiar with animating stuff so I should just keep it clean and easy so that I can focus more on the animating side of the website so I'll be able to tell a good story.

Below are the wireframes I've created for this website:

Fig 1.5, Website wireframes

I've also explored a few other possibility for my pages but as mentioned above I think the layouts that I want are too complicated, so at the end I chose the easier out of all for my own layout. Below are the wireframes I've explored:

Fig 1.6, Home Page 1

Fig 1.7, Home Page 2

Fig 1.8,Home Page 3

Fig 1.9, Home Page 4

Fig 2.0, Behind the Scene

Fig 2.1, About me 1

Fig 2.2, About me 2

Fig 2.3, About me 3

I personally like Fig 2.0 the most because it looks pretty clean and the layout looks fun to play around as well but I'm afraid that I cant cope with the work as this semester I still have Game Dev to look out for so after all the thinking and stuff I decided to go with the easy layouts.

Search This Blog

Michael Chan Henn Loong (0363611)