Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal

22/4/2025 - 13/5/2025- WEEK1-WEEK4

ZHANG HANYUAN / 0363727

Information Design / Bachelor of Design (Hons) in Creative Media

Task 1: Thematic Interactive Website Proposal


List

LECTURES

INSTRUCTIONS

FEEDBACK

REFLECTION


LECTURES

Week 2: Adobe Animate (Exercise 1)

In our Week 2 lesson, we learned how to draw with Adobe Animate. We were trained on how to utilize several tools, including the form tool, selection tool, and paint bucket tool. After the tutorial, Mr. Shamsul asked us to draw a boat for practice purposes.

Week 3: Adobe Animate (Exercise 2)

Week 4: Adobe Animate (Exercise 3)









INSTRUCTIONS:


Task 1 

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:
 
1.     A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder,
2.     Movie promotion
3.     Game release promotion.
4.     Gallery/Museum exhibit launch
5.     Band/Artist latest release.

Or anything else you have in mind (subject to the module coordinator’s approval)

Proposal (at least 3 ideas)

For the second week, I came up with 3 possible topics:


Here is my draft proposal:

After that, I selected Topic 1:《SONIC》(Movie Promotion)

Further concept development

Concept


Moodboards
Typography

I chose 4 font families:

Ⅰ.Permanent Marker Ⅱ.IBM Plex Sans CondensedⅢ.Bebas NeueⅣ.Rowdies


Color scheme

I extracted the theme colors in Adobe Color.


Wireframe
Figma Screenshots

Flow chart

Boardmix Screenshots

Final Proposal

Here is my final proposal:


FEEDBACK

Week4

Mr. Shamsul said we needed to work on the visual design and start planning the interactive design elements and functionality of their website. He suggested that I annotate the wireframes to describe the concept of the page.


REFLECTION

Experience

I have found working on themed interactive websites to be a fascinating journey that has allowed me to explore the intersection of creative storytelling and interactive media design, and deepened my understanding of the relationship between user experience and thematic expression. This experience has particularly strengthened my understanding of the importance of aligning website functionality with content themes - in this case, we successfully captured and delivered the energy and vitality of the film through carefully constructed interactive features with the unique IP of Sonic the Hedgehog, creating an immersive and fun digital experience.

Observation

While researching existing interactive websites, I noticed some successful examples that significantly increased user stay time and engagement. These websites often incorporate functional modules such as character customization, unlockable content, and real-time interaction with media content, which effectively enhances the emotional connection between users and narratives. They are also good at guiding users to actively explore the content through clever and interesting interactive mechanisms, thereby deepening the immersive experience.

Findings

This project highlights the importance of effective narrative through UI/UX design, personalised experiences and clear navigation to build immersive interactive experiences.Taking "Sonic the Hedgehog" as an example, this kind of thematic interactive website does not need to rely on lengthy textual narratives, but can use vivid visual elements and intuitive interaction to present a colourful world full of personalities, stimulating users' desire to explore and emotional resonance.We found that the well-designed interactive mechanism not only enhanced users' engagement, but also deepened their emotional connection with the story and the content of the site.Overall, interactivity is not only a form of expression, but also a narrative strategy that can effectively introduce users to the virtual world and enhance the depth and memory of the overall experience.


Comments

Popular posts from this blog

Advanced Typography/Task 1

Information Design - PROJECT 1