Advanced Interactive Design Task 1
- September 22, 2025
September 21,2025
21/09/2025 - 31/12/2025(Week 1 - Week 14 )
ZHANG TIANYAO/0376838
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 1
LIST
1. Lectures
2. Instructions
3.Task 1
4. Feedback
5. Reflections
Lectures
Instructions
Task 1
Assignment Overview — Thematic Interactive Website Proposal
Objective
Students are required to develop a proposal for a thematic interactive website designed for brand engagement.
The website should focus on a specific theme or concept and integrate interactive elements to engage users.
These elements may include videos, animations, interactive graphics, clickable components, or other forms of dynamic media that encourage exploration and participation.
Core Concept
A thematic interactive website aims to deliver an immersive and engaging user experience through interactive exploration rather than passive viewing.
The theme can vary across different contexts such as education, culture, promotion, or product launches.
The goal is to keep users interested, emotionally involved, and connected with the thematic concept or brand message.
Possible Topics
Students may choose one of the following directions or propose their own topic (subject to lecturer approval):
A specific brand product launch or special campaign (e.g., Nike new shoe, Sephora beauty compact)
Movie promotion website
Game release or launch promotion
Gallery or museum exhibition site
Band or artist’s latest music release
Submission Requirements
A complete UI/UX proposal document must be submitted, which includes:
Concept Development – theme, objectives, target audience, brand identity, interaction ideas.
Wireframes – layout and page structure to visualize navigation flow.
Mood Board – visual tone, color palette, typography, and atmosphere references.
Flow Chart – showing user journey and interaction pathways.
Reflective Documentation
All creative and design processes (conceptualization, sketching, prototyping, etc.) must be:
Documented clearly in your proposal, and
Posted on your E-Portfolio as part of your reflective studies to demonstrate your design thinking and process development.
Theme: Malaysian National Treasures
1. Project Overview
This project uses a simple yet expressive web interaction to introduce Malaysia’s national treasure animals.
Users can click or swipe to enter each animal’s dedicated page, experiencing the beauty of nature and cultural symbolism through visual storytelling.
The design focuses on light interaction, strong visuals, and emotional resonance, creating an immersive experience.
2. Background & Inspiration
Malaysia is one of the most biodiverse countries in the world, home to many rare species that represent its natural and cultural identity.
Among them, five animals are considered the nation’s symbolic treasures:
Malayan Tiger – The national symbol of Malaysia, representing strength, courage, and national spirit.
Orangutan – The guardian of the rainforest, symbolizing wisdom, family bonds, and ecological balance.
Asian Elephant – A symbol of gentle strength and harmony between humans and nature.
Rajah Brooke’s Birdwing Butterfly – Malaysia’s national butterfly, representing freedom, beauty, and the vitality of nature.
Green Sea Turtle – The traveler of the ocean, symbolizing life cycles, endurance, and renewal.
These animals reflect both the ecological richness and cultural heritage of Malaysia.
However, they are facing increasing threats from habitat loss and human activity.
This project aims to raise awareness through interactive design, guiding users to move from understanding → feeling → empathy → protection.
3. Project Objectives
Knowledge Sharing: Introduce Malaysia’s national treasure animals and their cultural significance.
Environmental Awareness: Encourage users to pay attention to endangered species and ecosystem protection.
Emotional Connection: Build a warm bond between humans and nature through visuals and animation.
User-Friendly Interaction: Maintain simplicity for a smooth and intuitive user experience.
4. Target Audience
Students (secondary to university level)
Environmental education and tourism audiences
General public interested in Malaysian nature and culture
5. Design Concept
Concept Title: Nature’s Guardians – The Breath of Protection
The website centers around five national treasure animals, each with its own interactive section.
The homepage features a natural gradient background (forest, ocean, and sky tones) with five illustrated animal names displayed in the center.
Hover: Text enlarges slightly and reveals the animal’s brief description.
Click: A soft ripple or light effect expands, leading the user to the animal’s information page.
Animal Page
Each page presents a static illustration with a simple, nature-inspired background.
The content includes:
Basic information (species, habitat, protection level)
Symbolic meaning (cultural or spiritual representation)
Environmental insights (conservation efforts or fun facts)
A “← Back to Home” button is placed at the bottom for easy navigation.
6. Click Interaction Effect: Color Breathing Transition
When users click on an animal name, the background color gently transitions from cool tones to warm tones and then returns.
This gradual shift feels like a natural breath, symbolizing life, hope, and protection.
It allows users to subconsciously feel the rhythm of nature, adding both emotional warmth and visual depth to the experience.
7. Expected Outcomes
Create a web interaction that combines artistic expression and educational value.
Use light effects, animation, and text interaction to deliver a “breathing with nature” experience.
Help users understand the importance of Malaysia’s national treasure animals while appreciating the beauty of its ecosystem.
8. Extended Significance
The project can serve as an educational and promotional tool for schools, museums, or environmental organizations.
It encourages more people to appreciate biodiversity and take part in protecting endangered species.
Feedback
Week 1
Specific feedback:
During the class, Mr. Hamimi outlined the next stage of the project. We were asked to brainstorm and prepare 4–5 potential themes for the upcoming interactive website assignment. In addition, he emphasized the importance of installing Adobe Animate in advance and encouraged us to consciously integrate the five usability principles into our design thinking and practical work.
General feedback:
Overall, the session provided a clear overview of the module structure and expectations, helping us better understand the scope of the final project. The lecturer advised us to set realistic goals in consideration of time and technical constraints, while still inspiring us to explore creative and engaging ideas when selecting our project themes.
Week 2
Specific feedback:
In Week 2, class feedback highlighted that my initial ideas were too broad and needed further refinement. Based on this, I began developing “Protected Animals in Malaysia” as a more focused theme for my interactive website. At this stage, the project is intended to be a knowledge-based interactive site, using elements such as maps and information cards to present educational content rather than a game-style experience.
General feedback:
From this discussion, I realized that interactive design should balance engagement with education. Focusing on protected animals in Malaysia allows the website to convey strong local relevance while raising awareness of conservation issues. Moving forward, I plan to present factual content such as species backgrounds and habitats, supported by light interactive elements like maps and information cards, to create an experience that is both informative and meaningful.
Week 3
Specific feedback:
During Task 1, I focused on developing my initial proposal for the interactive website on protected animals in Malaysia. The feedback emphasized creating wireframes that are detailed and visually clear, including navigation, visuals, and rough sketches to illustrate the design direction. I also plan to prepare three different layout variations to explore and compare the best structure for the final site.
General feedback:
In class, we explored Adobe Animate, learning basic drawing and coloring techniques through exercises like creating a ball and a boat. These activities helped me understand how light, shading, and layering contribute to visual depth and motion design. Overall, the week reinforced the importance of planning visuals early and integrating creativity with technical skills.
Week 4
Specific feedback:
In Week 4, we practiced basic motion principles through exercises like the bouncing line, bouncing ball, and shape tweening. I learned how timing, spacing, and the “Squash and Stretch” principle bring life and rhythm even to simple shapes. For the after-class task, creating a smooth shape tween reinforced the importance of in-between frames and consistent pacing in animation.
General feedback:
This week’s lessons deepened my understanding of animation fundamentals and motion timing. The bouncing ball exercise showed how small changes in easing and spacing can alter an animation’s feel, while the shape tween task taught practical techniques with Object Drawing Mode and vector shapes. Overall, I gained confidence in using Adobe Animate and saw how technical accuracy supports creative motion design.
Experience
During the first few weeks, I developed both conceptual and technical skills through practice and reflection. Under class guidance, I refined my initial ideas into a more focused theme: Protected Animals in Malaysia, emphasizing clear storytelling, usability, and visual flow for an interactive website. Meanwhile, Adobe Animate exercises, such as drawing and shading simple shapes, helped me understand how light, layering, and motion create visual depth in animation.
Comments
Post a Comment