Advanced Interactive Design: Task 1_Thematic Interactive Website Proposal
GE XIANJING / 0377636 / Bachelor of Interactive Spatial Design (Honours)
Week 1｜Project Kick-off & MLO 2 Brief Understanding
Advanced Theory and Practice of Interactive Design
Contents
1. Understanding MLO 2｜Thematic Interactive Website Proposal
In Week 1, we were introduced to the main coursework for this module:
MLO 2 – Thematic Interactive Website Proposal.
The task requires us to design a theme-based interactive website that engages users through multimedia elements such as animation, sound, video, and interactive graphics.
Unlike traditional websites that focus on delivering information, this project emphasizes:
User engagement through interaction and exploration
A thematic interactive website is not just a platform for content display, but a designed experience where users actively participate, navigate, and respond to what they see.
Adobe Animate Learning Journey
Learning Content
During Week 3, we were introduced to the basic vector drawing workflow in Adobe Animate. The lesson focused on using tools such as the Pen Tool, Oval Tool, and Rectangle Tool to create simple characters and UI elements. We also learned how to organize layers properly and understand the structure of animation assets before animating them.
A major focus of the class was Object Drawing Mode. The lecturer explained that this mode is important because it keeps shapes separated instead of merging them together, making later editing and animation much easier. This became one of the core foundations for future tween animations and character construction.
Feedback & Reflection
This class helped me understand that animation production is not only about drawing visuals, but also about planning structures carefully from the beginning. I started paying more attention to layer organization and how different parts of a character need to remain independent for future movement and animation editing.
Week 4 – Basic Animation and Layered Motion Practice
Learning Content
In Week 4, the class moved into practical animation techniques in Adobe Animate. We learned Shape Tween animation, Movie Clip symbols, layered animation workflows, motion guide paths, and easing adjustments. Through classroom exercises, we practiced creating smooth shape transformations and organizing movable parts into separate layers.
The lecturer also introduced the concept of nested Movie Clips, showing how complex character animation can be separated into independent animated parts. In addition, we learned how motion guide paths and easing effects help animations feel more natural and less mechanical.
Feedback & Reflection
This week gave me a clearer understanding of professional animation workflow and timeline management. I realized that clean layer organization and proper symbol conversion are essential for building controllable animations. The practical exercises also helped me better understand how keyframes, timing, and motion paths work together to create smoother animation results.
Week 5 – Motion Graphics and Timeline Management
Learning Content
The lecturer demonstrated how to animate text elements using keyframes, alpha transitions, and timeline sequencing. Each word was converted into a Graphic Symbol and placed on a separate layer, allowing independent control over movement and timing. We learned how text could smoothly enter the stage, pause for readability, and then exit using fade-in and fade-out effects. Particular attention was given to maintaining consistent timing intervals and ensuring that registration points were correctly positioned to keep animations aligned throughout the sequence.
The lesson also introduced professional layer management techniques. Every text object was organized on its own layer, while decorative elements such as borders and lines were distributed into separate layers to maintain a clean and editable project structure. In addition, we explored publish settings, responsive scaling options, and testing animations through HTML preview to ensure that the final output displayed correctly across different screen sizes.
Feedback & Reflection
This week helped me understand that effective motion graphics rely heavily on timing, organization, and visual hierarchy rather than complex character movements. Through the exercise, I learned how small adjustments in opacity, positioning, and timing can significantly improve the clarity and professionalism of an animation.The lecturer repeatedly emphasized the importance of layer management and precise keyframe placement, which reinforced the idea that animation is not only about movement but also about structure and planning. The use of alpha transitions and consistent timing intervals made the motion graphics feel smoother and more readable, while the responsive publishing workflow highlighted the importance of testing animations in their final viewing environment rather than relying solely on the authoring workspace.
Overall, this lesson expanded my understanding of Adobe Animate beyond character animation and introduced me to the principles of motion graphics, which can be applied to website introductions, UI animations, and interactive digital experiences.
1.A specific product of a particular brandlaunch/special (i.e.: Nike brand new shoe),Beauty product launch (i.e.: Sephora compactpowder)2.Movie promotion3.Game release promotion.4.Gallery/Museum exhibit launch5.Band/Artist latest release.
1.Completed Ul/UX proposal document.2.All processes (concept, wireframes, mood board,flow chart/site map)3.Prototype
INSTRUCTIONS
Category: Educational
Concept
This concept aims to transform traditional children’s safety education into an interactive learning experience.
Instead of passively receiving information, children can explore and make decisions within simulated environments, helping them understand potential dangers in daily life.
The core goal is:
to help children build safety awareness through experience rather than memorization
Experience Design
The website will include interactive scenarios such as:
- Home environments (kitchen / bathroom)
Users can click on objects (e.g., kettle, sockets) to trigger animations and safety feedback - Traffic safety mini-game
Users make decisions based on traffic lights and road conditions
Moodboard
Interaction Strategy
- Correct actions → positive audio and visual feedback
- Incorrect actions → gentle guidance instead of punishment
- Drag-and-drop game (sorting safe vs dangerous items)
Visual Direction
- Bright, high-saturation cartoon style
- Clear information hierarchy
- Large interactive elements suitable for children
Theme 2｜Eco-Footprint Journey
Category: Lifestyle / Educational
Concept
This concept uses a timeline-based narrative to visualize how daily human behaviors impact the environment.
Core transformation:turning abstract environmental data into a visible and interactive experience
Moodbaord
Experience Design
- Daily journey (morning to night)
User choices (transport, energy, food) affect environmental conditions - Future comparison mode (What If)
Users can switch between different lifestyle scenarios to observe changes
Interaction Strategy
- Scroll-driven storytelling
- Click interactions that dynamically change the environment
- Data represented through visual elements instead of text
Visual Direction
- Flat design style
- Soft gradients
- Dynamic environmental transitions (polluted → green)
Theme 3｜The Vanishing Craft
Category: Cultural
Concept
This concept presents endangered traditional crafts through a digital museum experience.
Instead of only viewing content, users can actively participate in simulated crafting processes.
Core goal:transforming cultural presentation into immersive interaction
Moodbaord
Experience Design
- Virtual workshop
Users explore tools and materials in a simulated environment - Craft simulation
Users mimic crafting actions (e.g., tracing patterns) using mouse interaction
Interaction Strategy
- Gesture-based interaction (mouse movement simulation)
- Click-to-reveal process details
- Ambient sound to enhance immersion
Visual Direction
- Dark background to highlight content
- Museum-style lighting
- High-quality visual assets
Theme 4｜Nike Air Interactive Lab
Category: Product Launch / Brand Engagement
Concept
This concept is designed as an interactive product launch experience for a new sneaker series by Nike.
Instead of presenting the product through static images or promotional videos, the website allows users to:
explore, customize, and experience the product through interaction
The goal is not just to “show the product”, but to create a digital environment where users feel connected to it.
Moodboard
Target Audience
Teenagers and young adults
Sneaker enthusiasts
Brand-focused consumers
Experience Design
① 3D Product Exploration
Users can interact with the shoe in a virtual space:
Rotate and zoom the product
Click on different parts (sole, fabric, cushioning)
Reveal material details and technology
👉 This transforms product understanding into an exploratory experience
② Customization Mode（Design Your Own）
Users can personalize the shoe:
Change colors
Switch materials
Preview designs in real time
👉 Adds user participation and emotional attachment
③ Performance Simulation
A dynamic environment where users can test the product:
Running track simulation
Jump / movement animations
Visual feedback (speed, impact, cushioning response)
👉 Instead of telling users “this shoe is good”,
it allows them to feel the performance visually
Interaction Strategy
Hover / click → reveal hidden features
Drag interaction → rotate product
Real-time feedback → immediate visual updates
Smooth transitions → maintain immersion
Visual Direction
Dark background with neon highlights (tech-focused aesthetic)
High-contrast lighting to emphasize product form
Motion-based transitions
Refining the Project Direction: Kids' Safety Guardian
After exploring several thematic website ideas, I decided to further develop the concept of children's safety education and transform it into an interactive learning experience called Kids' Safety Guardian.
Initially, I considered covering a broad range of safety topics, including traffic safety, outdoor safety, and general emergency awareness. However, after conducting further research and evaluating the project's scope, I realized that a more focused approach would create a stronger and more meaningful user experience. As a result, I narrowed the theme down to home safety, a topic that is highly relevant to children's everyday lives.
Children are naturally curious and often explore their surroundings without fully understanding potential dangers. Within a home environment, common objects such as boiling kettles, gas stoves, electrical outlets, wet bathroom floors, and sharp kitchen tools can become safety hazards if used incorrectly. While parents frequently remind children to be careful, these lessons are often delivered through verbal instructions, warning signs, or educational posters that may not effectively capture children's attention.
This project aims to address that challenge by transforming traditional safety education into an interactive and engaging digital experience. Instead of simply reading safety rules, children will be encouraged to explore a virtual home environment where they can identify dangers, make decisions, and learn through direct interaction.
Project Title
Kids' Safety Guardian
Project Category
Educational Interactive Website
Project Concept
Kids' Safety Guardian is an interactive website designed to teach children basic home safety knowledge through exploration and play.
The website transforms a virtual home environment into a learning adventure where children can investigate different rooms, identify hazards, complete challenges, and earn rewards.
Rather than relying on lengthy explanations, safety concepts are communicated through visual storytelling, animations, sound effects, and interactive feedback.
The objective is to help children build awareness through experience rather than memorization.
Target Audience
Primary Audience
Children aged 5–8 years old.
Characteristics:
- Curious and exploratory
- Prefer visual learning
- Respond positively to rewards and animations
- Short attention span
Secondary Audience
Parents and guardians.
The website can be used as a supportive learning tool to help parents introduce home safety concepts in a more engaging way.
Home Safety Areas
To keep the project focused and manageable, the website will concentrate on three key household spaces.
Kitchen
Children will learn about:
- Boiling kettles
- Gas stoves
- Sharp kitchen knives
- Cleaning chemicals
Interactive examples include steam animations, warning effects, and object exploration.
Bathroom
Children will learn about:
- Slippery floors
- Running indoors
- Hot water
- Electrical devices near water
One planned animation demonstrates a child slipping while running on a wet floor to illustrate the importance of moving carefully.
Living Room
Children will learn about:
- Electrical sockets
- Glass furniture
- Scissors
- Jumping on sofas
The aim is to highlight common hazards that are often overlooked in everyday environments.
Design Direction
For this project, I chose a hand-drawn storybook illustration style rather than a realistic or highly technical visual approach.
The inspiration comes from children's picture books, where learning often happens through exploration, observation, and storytelling.
Instead of making safety education feel like a lesson, the website aims to feel like an adventure inside a friendly home.
Children are naturally curious. By presenting each room as an interactive environment, users are encouraged to discover hazards on their own, making the learning experience more memorable and engaging.
Why This Illustration Style?
The selected visual style features:
• Hand-drawn outlines
• Rounded shapes
• Soft textures
• Friendly characters
• Storybook-inspired environments
These elements help reduce fear and anxiety when presenting dangerous situations while maintaining children's attention throughout the experience.
The goal is not to scare children, but to help them recognize risks in a safe and playful way.
Inspiration and References
To better understand how interactive experiences guide users through content, I began exploring websites featured on FWA (Favourite Website Awards).
FWA-Style Interactive Web Design Reference
These website layouts are particularly worth referencing:
- Children's Interactive PBS Kids
- NASA Space Place
- KidSuper World
- https://www.netsmartzkids.org/
Gamified Safety Education
- Dumb Ways to Die
Refer to their use of:
- Cartoon characters
- Gamified tasks
- Achievement systems
My research focuses on:
- User engagement techniques
- Interactive storytelling
- Scroll-based experiences
- Motion design
- Information hierarchy
- Animation-driven navigation
These references will help inform both the visual design and user experience strategy of the project.
Planned Website Structure
Home Page
↓
House Map
↓
Kitchen Exploration
↓
Bathroom Exploration
↓
Living Room Exploration
↓
Safety Challenge Quiz
↓
Safety Hero Certificate
↓
Parent Guide
The structure is designed to support a simple and intuitive learning journey while maintaining user engagement through progressive exploration and rewards.
Wireframes and sketches
 |
| Procreate |
 |
| Figma |
Thematic Interactive Website Proposal
Canvas
Software and Tools
The following software will be used throughout the project:
Figma
- User interface design
- Wireframes
- High-fidelity mockups
- User flow diagrams
Adobe Animate
- Interactive animations
- Character movements
- Motion effects
- Interactive prototypes
Adobe Illustrator
- Vector illustrations
- Icons
- Graphic assets
Reflection
This week helped me understand that an effective thematic interactive website is not simply about presenting information. Instead, it requires creating an experience that encourages users to actively participate and explore.
By narrowing the topic from general safety awareness to home safety education, I was able to establish a clearer project scope and identify opportunities for meaningful interaction.
Moving forward, I will begin developing user personas, mood boards, information architecture, site maps, and low-fidelity wireframes to further refine the concept and prepare for prototype development.
Comments
Post a Comment