Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal
25.04.2025 - 16.05.2025 / Week 1 - Week 4
Teo Mei Hui / 0358315
Advanced Interactive Design / Bachelors of Design (Honors) in Creative Media / Taylor's University
Task 1: Thematic Interactive Website Proposal
CONTENTS
INSTRUCTIONS
TASK
Thematic Interactive Website Proposal for Brand Engagement. A thematic
interactive website is a website that focuses on a specific theme or
concept with the aim of incorporating interactive elements to interact
with users. Most such websites utilize multimedia such as videos,
animations, interactive graphics displayed on the page, or other clickable
elements which have interactive components that provoke the user. This
dynamic experience is meant to keep the user interested in addition to the
thematic concept. Themes in such websites vary from educational, cultural,
promotional campaigns to product launch. For example, a thematic
interactive site could be a museum. Users can go through a virtual
exhibition space through interactive tours, games simulation, or
questionnaires. In the event that it is a movie, the site can simulate
movie universes offering virtual tours through time and space, or any
other subject previously created in the movie. The aim of any such site is
to keep the user engaged in the medium through interactive exploration.
Requirements:
Students are required to create a thematic interactive website proposal
with the topic of their choice that can be based on:
- A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder,
- Movie promotion
- Game release promotion.
- Gallery/Museum exhibit launch
- Band/Artist latest release.
Ideation
We were first tasked with thinking of three potential topics for our
thematic interactive website. I came up with the following ideas based on my
personal interest:
- The 12 Horoscopes
- Life of Black Widow (MCU)
- My Little Pony: Friendship is Magic
After showing Mr. Shamsul my ideas, he said I could proceed with either The
12 Horoscopes or Black Widow. I decided to choose Black Widow as I thought
it would be more interesting and fun.
Process
Concept
- The interactive website explores the life journey of Black Widow, a central yet often underappreciated figure in the MCU.
- Through themed chapters, users will scroll, click, and explore Natasha’s transformation — from a weaponized orphan to a self-sacrificing hero.
- This cinematic, emotionally driven website will combine minimalist design, interactive storytelling, transitions, and subtle animations to keep users engaged.
- The site’s goal is to deepen user connection with Natasha’s story by allowing them to interactively experience key emotional, moral, and action-driven moments.
Chapters
Chapter 1: The Broken Doll
Theme: Loss of Innocence
Key Content:
- Childhood in Russia
- The Red Room training program
- Psychological manipulation, sterilization, and the origin of her spy identity
Chapter 2: The Defector
Theme: Redemption Begins
Key Content:
- Budapest with Hawkeye
- Choosing to join S.H.I.E.L.D.
- First steps away from her dark past
Chapter 3: Spy Among Heroes
Theme: Trust and Identity
Key Content:
- Integration with the Avengers
- Spy background vs genuine friendship
- Battle of New York, working with Tony, Steve, and Bruce
Chapter 4: Haunted Past
Theme: Guilt & Humanity
Key Content:
- Flashbacks in Age of Ultron
- Struggles with her past and Bruce
- Her sense of “monstrosity” and shame
Chapter 5: Family and Forgiveness
Theme: Healing and Connection
Key Content:
- Events of Black Widow (2021)
- Reunion with Yelena, Melina, and Red Guardian
- Destroying the Red Room
- Finally forgiving herself
Chapter 6: The Final Act of Love
Theme: Sacrifice
Key Content:
- Vormir mission with Clint in Endgame
- Choosing to die to save the universe
- Heroism in its purest form
References
I looked for references online based on what I envisioned for my website to
look and feel like. I'm leaning towards a minimalistic, cinematic, and
darker style.
Moodboard
I looked up iconic pictures of Black Widow for inspiration, these can be
considered to be used as visual elements/background in the website. For the
color palette, it is based on black widow's character design such as her hair,
outfit and weapons. Lastly, I went on Google Fonts and picked out Saira font
for heading and Montserrat font for the body texts, as I thought they were the
most suitable.
Flowchart
Then, I created a flowchart of how users can interact with the website.
Wireframe
Lastly, I created the wireframe in Figma.
Final Proposal
FEEDBACK
Week 2:
- The Black Widow and 12 Horoscopes ideas are both interesting.
- For the 12 Horoscopes, maybe can focus the content on one specific area, for example talk about the gemstones/birthstone for each horoscope.
- For the Black Widow idea, maybe can talk about Black Widow from the comics as well. If based on the movies also okay.
- Both are okay, choose either one topic.
Week 4:
- Concept is not very clear and please improve on your wireframe.
- The layout is nor very organized and very rough.
REFLECTIONS
I'm really happy that I got to work on a topic I’m genuinely interested in. It
kept me motivated throughout the project and made the process feel more
personal and engaging. For this task, I learned about how to tell a story in a
more cinematic and emotional way, using interactive design elements to guide
users through a character’s journey. I also explored many award-winning
thematic websites, which inspired me to think more creatively about how
design, motion, and storytelling can work together to create an immersive
experience. This project pushed me to see websites not just as functional
spaces, but as storytelling platforms. It was a fun experience.
Comments
Post a Comment