Advanced Interactive Design: Proposal
30.4.2026 - 14.6.2026 / Week 1 - Week 8
Aw Wen Chia / 0368828
Advance Interactive Design / Bachelor of Design (Honours) in Creative Media / Graphic Design
Aw Wen Chia / 0368828
Advance Interactive Design / Bachelor of Design (Honours) in Creative Media / Graphic Design
TABLE OF CONTENTS
INSTRUCTION
LECTURE
Refer to
Exercises
PROTOTYPE
For this assignment, we have to make a proposal and prototype of a
thematic interactive website with the topic of our choosing.
- 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.
- Or anything else you have in mind (subject to the module coordinator’s approval)
Description
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.
Submission
Completed UI/UX proposal document.
All processes (concept, wireframes, mood board, flow chart/site
map)
Prototype
I chose to do a game promotion, the game I chose was Honkai: Star
Rail. A turn-based RPG with sci-fi elements. I chose this topic as
I liked playing the game and thought the art style and elements
could fit nicely into a thematic website.
Fig 1, Honkai: Star Rail poster
I first did a really rough flow chart to see if it was possible
for the website to flow.
Fig 2, Rough flow chart
Then I used Canva's whiteboard feature to make a
moodboard/compilation.
Link to the Canva whiteboard: https://canva.link/bkyws9glwqchycv
Fig 3, Moodboard/compilation
Then I started making the Website Proposal in Canva:
Website References:
Fig 4, Website references
Making the Website:
For the website prototype, I used Adobe XD, approved by my tutor. For the website, I wanted to make the graphics in Illustrator and transfer to XD. So I made an Adobe Illustrator file to make the graphic in before transferring to XD. I first made the sketches of characters before making the graphics in Illustrator.
Fig 5, Progress
Fig 6, Progress
Fig 7, Progress
After making the graphics, I went into Adobe XD and transferred the graphics and started with the animations and made the connections.
Fig 8, Progress
For the website prototype, since the requirements were 3 pages, Factions and Character remain empty.
Adobe XD Prototype Website:
FEEDBACK
For the first feedback, my tutor approved my topic and assured me I can use Adobe XD for the prototype.
He then told me to find image references for the website, as I needed to have graphics that I made and not just rely on the pre-existing art of the game.
I showed him the graphic I made of the website, and he approved of it.
REFLECTION
This was definitely a reminder of the first assignment I had using Adobe XD during Interactive Design. This assignment was less stressful than the first website proposal and prototype, maybe due to me already familiarising myself with how the software worked.
The topic was also more refreshing as I actually liked the topic this time around, which makes me have more motivation to complete it. However, looking at the weight of Interactive Design and Advanced Interactive Design, I feel like the two difficulties are completely different, we are using two different software after all. So I am bracing myself to execute the website in Adobe Animate.
.png)
Comments
Post a Comment