Advanced Interactive Design(MLO)

Week 1 

The final project for this semester is to create a thematic interactive website (microsite) around a specific concept, engaging users through interactive exploration. In class, Mr. Shamsul showed us some FWA examples, which gave me a clearer idea of what a microsite can look like.

Our current tasks are to install Adobe Animate and prepare three ideas for the Task 1 proposal. I’ve come up with the following three directions.

MLO 1:

1. About a Puppy

I have a puppy myself, so I’d like to create a small scene set in a corner of a home, featuring my puppy as the main character. Items such as a food bowl, a leash, and a chew toy are scattered around. When the user clicks on different objects, the puppy responds accordingly: clicking the bowl makes the puppy come to eat; clicking the leash makes it spin excitedly. Behind each interaction, there is a simple piece of dog‑care knowledge (e.g., suggested daily walking time). The overall style is warm and hand‑drawn, aiming to resonate with dog owners.

2. About Environmental Protection

Rather than a lecturing approach, I want to tell the story of a T‑shirt – from the cotton field to the wardrobe, and finally to being discarded or recycled. The user slides a timeline to see water consumption and carbon emissions at each stage. The user can make choices (e.g., wash with cold or hot water), and different choices change the final numbers. At the end, the T‑shirt either enters a recycling stream or ends up as waste. I hope to deliver the message without being too heavy, yet still provoke some thought.

3. About Music

I will design a virtual drawer cabinet, where each drawer represents a music genre. When the user pulls open a drawer, a corresponding music loop starts playing, and the background colour changes. Multiple drawers can be opened at the same time, allowing the user to mix tracks on the fly. Finally, the user can record and download their own mix. This idea is not tied to any specific band or album – it’s more of an exploratory sound toy.

Link to PPT of project1:https://canva.link/1bingvsn534v65u

MLO 2: 

Thematic Interactive Website Proposal – T‑shirt Lifecycle 

1. Concept Overview

For my thematic interactive website proposal, I chose the sustainable fashion theme. The website is called “T‑shirt Lifecycle” and is designed for a fictional eco‑friendly brand named EcoWear. The core idea is to tell the story of a single cotton T‑shirt – from the cotton field, through manufacturing, transport, daily use, and finally to disposal or recycling.

Instead of just reading facts, the user interacts with a timeline slider, makes choices about washing and drying, and sees how their decisions change the total water and carbon footprint. At the end, they can generate a “My Impact Report” to share. This makes abstract environmental data feel personal and actionable.

2. Flow Chart

1. Welcome Page:User lands, reads short intro, clicks “Start Journey”.
2. Main Experience Page:User drags timeline, makes wash/dry choices, sees real‑time water/carbon data, gets ending, generates report modal.
3. Impact Archive Page:User views past reports (simulated), can start a new journey.


3. Figma



4. Concept Overview



5. Prototype

Comments

Popular posts from this blog

{Interactive Design}Exercise 1

Interactive Design(Final Project)