24/04/26 - 17/06/26 (Week 6-8)
SUN YUTONG (0377440)
ADVANCED INTERACTIVE DESIGN / Bachelor of Design (Honours) in Creative Media
TASK 1 - THEMATIC INTERACTIVE WEBSITE PROPOSAL
JUMP LINK
TASK 1 - THEMATIC INTERACTIVE WEBSITE PROPOSAL
Website idea:
These are the three ideas I initially conceived:
1. Explore Music:
This is an interactive website that helps users explore and
understand different music genres through visual, auditory, and
emotional experiences. The website introduces various music genres,
each accompanied by a clear description, key characteristics, and
cultural context. While exploring each genre, users can listen to
representative musical excerpts that embody its unique style and
atmosphere. The website includes genre exploration, a timeline, and
personalized discoveries.
2. Personality Lab:
My idea is to create a website based on the MBTI personality type,
explaining the different personality types through a story. The
content will include an overview, detailed explanations, and
comparisons. For interactivity, I plan to use simple animations, such
as scrolling effects, hover interactions, and smooth transitions, to
enhance the user experience and facilitate the introduction.
3. MoodSpace:
This is a website about emotional experiences, allowing users to
explore different emotional states, such as happiness and sadness,
through an immersive experience. The website content will include an
overview of emotions, pages for each emotion, and animated transitions
between different emotional states. For interactivity, I plan to use
simple animation effects, such as color changes, scrolling effects,
and smooth transitions, to reflect the differences in emotions.
Next, I chose the first option and made some modifications. Introducing
all music genres would be too broad, so I chose to introduce the music
corresponding to each era.
After deciding on the website theme, I completed the website's
moodboard.
Site map:
Next, I completed the sitemap for the website.
.jpg)
I drew music players related to each era to add a sense of time to the
relevant pages.
Next, I added a music recommendation page, where users can choose their
favorite albums to enjoy on the website.
Final proposal
Final Prototype
FEEDBACKS
WEEK 4: Mr. Shamsul said my website was good, and he thought the
quiz section could be an option.
REFLECTION
Experience:
This phase gave me my first complete experience of planning and proposing a
thematic interactive website. I initially brainstormed three distinct
concepts: Explore Music, Personality Lab, and MoodSpace. Ultimately, I chose
the music theme but refined it from exploring "all music genres" to an
"era-based music culture exploration" to make the scope more manageable and
focused. Throughout this proposal stage, I went through the entire
pre-development process, which included creating a moodboard, mapping out
the sitemap, and building an interactive Figma prototype. I also
specifically designed era-specific music players and an album recommendation
page to enhance the sense of time travel and user immersion.
Observations:
Throughout this planning process, I observed that attempting to cover too
broad a topic can make the website's scope overwhelming; narrowing the focus
to specific eras created a much clearer and more engaging user journey. I
also realised that creating a sitemap and moodboard before designing the
prototype is crucial for maintaining visual consistency and logical
navigation. In addition, during the Week 4 feedback session, Mr. Shamsul
mentioned that the website structure was strong .
Findings:
Through this proposal task, I discovered that a successful interactive
website requires rigorous planning and conceptualization before any actual
development begins. A well-structured Figma prototype greatly helps in
visualizing the final product and testing user flows early on. I also found
that custom visual details, such as designing unique nostalgic music players
for each era, significantly strengthen the website's thematic identity. Most
importantly, I realised that receiving and integrating early feedback is
invaluable.
.jpg)
.png)
.jpg)
Comments
Post a Comment