Task 2: Interaction Design Planning and Prototype
07.10.2025 - 16.11.2025
Michael Chan Henn Loong / 0363611
Experiential Design / BA of Design (HONS) in Creative Media / Taylor's
University
Task 2: Interaction Design Planning and Prototype
INSTRUCTIONS
So as the previous proposal was approved by Mr. Shamsul. So I have to start
working on my prototype.
First of all, from the brief for Task 2, I'll need to change my proposal into
an interactive design plan and walkthrough demo, showing how the animations
and interactions will actually look and behave. So now I have to prepare one
interactive design plan that is built on my Task 1 proposal by focusing
specifically on the motion and interactivity:
1. Preparing Interactive Design Plan
Included in plan:
-
Each page + its animation
(For example: Home page → feathers fall on load, title fades in.) - Interaction type (scroll, hover, drag, click).
-
Trigger logic (On hover → feather glows, On scroll → background pans).
Reference examples - Find animation references on Behance, Dribbble, or Motionfolio.
- Or, record own small demos in Figma or Animate (GIF or short MP4).
2. Create a Walkthrough Video
This is the presentation video, just like the example showed in google
classroom.
- Record myself (or voiceover + screen share) explaining:
- Project overview - recap concept & myth (2–3 sentences).
- Each page wireframe - explain its animations/interactions.
- Animation references or short demos - show GIFs or short clips.
- End with a short reflection (what went well / what’s next).
3. Blogger E-Portfolio Post
So from here onwards I will be recapping my project including its tittle
and everything below I will be recording my progress under this section as
well. So below is how I would be doing my blog.
Title:
Advanced Interactive Design - Interactive Design Plan: The Fall Before
Dawn
Introduction:
For this semester's Advanced Interactive Design module, I’m working on
an interactive website called “The Fall Before Dawn.” It’s based on
the myth of Icarus, but rather then just retelling the story again
with plain texts, I plan to bring it to life through motion,
atmosphere, and emotion by crafting it into an interactive website.
The idea is to let users feel the rise and fall of Icarus through the
way the website moves, transitions, and reacts as they explore the
website.
To me, the story of Icarus isn’t just about flying too close to the
sun, it’s also about ambition, creativity, and learning from failure
and mistakes. That’s something I relate to as a designer, student and
also as a son. In a way, this project also kind of represents my own
life experience experimenting, making mistakes, and finding meaning in
how ideas evolve.
This blogpost records my planning journey for the website, from
developing the moodboard, wireframes, and color palette, to planning
out all the interactions and animations. I’ll also be sharing my
animation references, process sketches, and a walkthrough video that
shows how the final interactive experience will look and feel once
it’s finish building.
Moodboard & Style Direction:
When designing The Fall Before Dawn, I wanted the visuals to feel
emotional and cinematic like something that captures both the beauty
and tragedy of Icarus’s story. The moodboard combines elements of
Greek mythology, light and shadow, and modern minimalism style.
Fig 1.0, Moodboard
The color palette focuses on warm, glowing tones inspired by sunlight
and Icaru's ambition gold, amber, and soft cream, balanced out with
cooler navy blues and grays to represent the ocean and the moment of
descent. The balance between warm and cool tones helps tell the story
visually, showing the emotional shift from hope to loss, and finally
reflection.
Fig 1.1, Color Palette
The interface itself is meant to feel light and the smooth
transitions, floating elements, and soft glows that respond to the
users interaction, is something like a gentle breeze following the
users cursor.
Typography plays a big part too: I used Cinzel for titles, which feels
classical and dramatic, and paired it with Lato for body text to keep
everything readable and modern. Together, they reflect the blend of
ancient mythology and contemporary digital storytelling.
Fig 1.2, Font choice
Overall, the visual direction aims to make users feel like they’re
diving into Icarus’s world its like they are surrounded by light,
movement, and meaning but not just reading about him like reading a
book.
Wireframes & Layout Overview:
Before moving onto the animation, I started by sketching out the
wireframes for each page to plan how users would move through the
website. Since The Fall Before Dawn focuses on both storytelling and
my personal process, I made sure the layout feels balanced, part
narrative, part portfolio so the visitors can explore freely while
still feels interacted and it doesn't feels like dropping out.
The website consists of five main pages, each serving a different
purpose:
Home Page
The landing page introduces the theme of the project warm lighting,
falling feathers, and a calm sky setting the tone for the whole
experience. It includes direct navigation buttons that lead to other
sections, giving users freedom to explore.
Fig 1.3, Home Page Wireframe
Fig 1.4, Home Page and Menu (Updated)
About the Creator
This page focuses on me as the designer of this website introducing
who I am, what inspired the project, and how I connected with the
story of Icarus. The layout is simple, allowing text and visuals to
stand out so its easier to read.
Fig 1.5, About Me Wireframe
Fig 1.6, About Me (Updated)
Behind the Wings
Instead of explaining the myth, this section highlights my process the
sketches, coding experiments, and progress in Adobe Animate. Each part
opens on the right side, allowing users to see how the project
developed from concept to animation.
Fig 1.7, Behind the Wings Wireframe
Fig 1.8, Behind the Wings (Updated)
Interactive Story (Labyrinth → Flight → Fall)
This is the main part of the website. Each section uses simple
interactive moments interactions like clicking, scrolling, or hovering
to bring Icarus’s story to life to make it more interactive. The goal
is to make the viewer feel involved, like they’re part of his flight.
Fig 1.9, Interactive Story Wireframe
Fig 2.0, Interactive Story
Reflection Page
The final page ties everything together, both emotionally and
conceptually. It reflects on what Icarus’s story represents the
ambition, growth, and learning it also connects back to my journey as
a student designer.
Fig 2.1, Reflection Page Wireframe
Fig 2.2, Reflection Page
Each wireframe was created to visualize the page hierarchy and
transitions, focusing on clean layouts, centered storytelling, and
smooth motion flow. By mapping this out first, I can better plan how
each animation fits into the experience later in Adobe Animate.
Interaction Plan
This section explains how the website moves, how users interact, and
what animations are planned using Adobe Animate. It also includes
references and explanations for why each interaction was chosen.
The website uses simple, readable, and emotion-driven interactions
that support the storytelling.
My main goals were:
- to keep interactions light and intuitive,
- to let animations carry most of the emotional tone,
- to avoid overwhelming the user with complex controls,
- to create a smooth, guided narrative experience.
Page by Page Animation & Interaction Breakdown:
1. Home Page
Visual Elements Included
- Static feather illustration
- Static Icarus drawing
- Title of the website at the center
- Menu bar on the top right
- Logo on the top left, inspired by the Ouroboros symbol (linked with the myth of Icarus)
Animations
None (for now)
Interactions
- Users can click the menu bar to navigate to all other pages
- Homepage serves as the central hub for exploration
2. Labyrinth Page (Act 1)
Visual Elements
- A static drawing, created by you, depicting the labyrinth theme
- Flat/vector style consistent with the website
Animations
None
Interactions
- Scroll or click through the page
- Users can move on to the next chapter via navigation
3. Flight Page (Act 2)
Visual Elements
- Icarus in the sky
- Clouds drawn in vector style
- Icarus positioned above the clouds, looking toward the sun
- Warm color palette to show height, warmth, and ambition
Animations
None
Interactions
- Static scene with navigational access to continue the story
4. Fall Page (Act 3)
Visual Elements
- Icarus falling due to the heat of the sun
- Visual contrast between the sky and character
- Still maintaining the flat vector art style
- Direction of fall shows motion even though the artwork is static
Animations
None
Interactions
- Simple navigation to proceed or return
5. About the Creator Page
Visual Elements
- Your picture on the left
- A short paragraph introducing yourself on the right
- Balanced and clean layout
Animations
None
Interactions
- Scroll based reading
- Simple static layout
6. Behind the Wings (Process Work)
Visual Elements
- Images showing your working process
- (sketches, prototypes, coding screenshots, drawings, reference collection)
Animations
None
Interactions
- Users scroll or click through the gallery style layout
- Purely documentation based page
7. Reflection Page (Ending Section)
Visual Elements
- Quotes representing each act:
- Labyrinth
- Flight
- Fall
Animations
None
Interactions
- Static display
- Users read through the final message and conclude their experience
Flowchart or Architecture Map:
Walkthrough Video:
Reflection:
____
Resource Links:
Comments
Post a Comment