Advanced Interactive Design - Task 1

Advanced Interactive Design - Task 1

23/9/2024 - 14/10/2025 (Week 1 - Week 4)


WangJiheng / 0378904

Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design - Task 1 

---

INSTRUCTIONS

---

Week 1

Instructions:

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

2. Movie promotion

3. Game release promotion.

4. Gallery/Museum exhibit launch

5. Band/Artist latest release.

6. Or anything else you have in mind (subject to the module

coordinator’s approval)

Project Topic Selection and Progress Explanation: 

Why Choose This Website

I chose 《nside Out 2》 as the theme because it visually presents adolescent emotions and growth through "emotional characters," which naturally aligns with the goal of a "thematic interactive website": using interaction and multimedia to make abstract emotions experiential and relatable. 

This theme features a distinct color system and glowing particle style visually, and can create an immersive experience through interactive modules such as scroll narratives, emotion cards, and memory orb maps. Additionally, it easily extends to participatory functions like "user self-emotion mapping," offering creative space and feasibility.

Fig 1-1 In out 2

Week 2 

No classes this week. I was self-studying and collecting materials: sorting out the film settings, taking stock of visual elements (emotion color palettes, memory orbs, control panels), and organizing cases of similar interactive websites to lay the foundation for subsequent plans.

Fig 2-1

Fig 2-2

Fig 2-3

Week 3 (Topic Review and Direction Confirmation)

I presented to the teacher the initial concept of the "Inside Out 2 Emotional Growth Interactive Station" (homepage structure, emotional character modules, memory core, and scrolling narrative). The teacher suggested that while maintaining the core of the emotional theme, we should expand it, just like a classmate's F1 theme, extending multiple pages to different dimensions of "characters/scenes/mechanisms".

After considering the expansion project, I decided on the following pages:

Emotional portal, role center, music player, questionnaire, and growth journey

Feedback 

Week 1: Topic Selection & Proposal

Specific Feedback: During the initial stage, I explored two distinct directions: a movie promotion site for Inside Out 2 and a personal photography portfolio. Mr. Hamimi advised that the chosen topic must allow for deep interactivity beyond simple information display

General Feedback: I learned that a good thematic website starts with a strong visual "hook." I eventually chose Inside Out 2 because its vibrant color system and emotional characters provide a perfect foundation for immersive interactive modules^.

Week 2: Research & Asset Collection

Specific Feedback: This week focused on self-study and visual audit. I collected core film elements such as the emotion-based color palettes (Joy Yellow, Sadness Blue, etc.) and memory orb assets^.

General Feedback: I realized that consistent branding is key. Organizing a mood board with hex codes like #FFD93D for Joy helped ensure that my later design work remained faithful to the film’s aesthetic

Week 3: Direction Confirmation & Site Map

Specific Feedback: Based on teacher feedback, I expanded my initial homepage concept into a multi-dimensional site structure including an Emotional Portal, Character Center, and a Music Player

General Feedback: Defining the site map early on was crucial. It transformed my abstract ideas into a concrete development plan, ensuring that each page served a specific narrative purpose, such as the "Emotion Sound Player" for auditory immersion

Reflection

Design Concept & Purpose:

The original intention of this project was to transform the abstract theme of "emotional growth" into a visual and experiential web design9. My goal for Task 1 was to establish a narrative flow where users don't just read information but "feel" the characters' personalities through the layout and upcoming animations

Learning Outcomes:

Thematic Consistency: I learned how to translate film visual characteristics into UI elements, such as using a dark-purple gradient to simulate the "space in the brain"

Interactive Planning: Planning the "What Emotion Are You Today?" quiz and the music player taught me to think about user engagement from the very beginning

Visual Hierarchy: Creating wireframes for the character modules helped me understand how to guide a user's eye through a page using large illustrations and glowing particle styles

Conclusion:

Task 1 laid a solid foundation for my project. By clearly defining the design goals—such as narrative emphasizing growth and encouraging user self-projection—I have a clear roadmap for the technical development in the following weeks.