Advanced Interactive Design / Task 1: Thematic Interactive Website Proposal
WEEK1-WEEK
NAME: JIN RONG
I.D: 0361701
COURSE: Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media
Advanced Interactive Design - Task 1: Thematic Interactive
Website Proposal
INSTRUCTION
LECTURES
WEEK2
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.
week3
This week, we studied the fundamentals of using animation with Adobe Animate. During class activities, we worked on producing the shapes moving and using ease-out and ease-in effects at various keyframes.
week4
This week, we learned how to use guide layers to create path animations. Under Mr. Shamsul’s guidance, we first animated a beach ball to bounce, and then, combining what we learned last week, made it follow a curved path from the top left to the bottom right. After that, we were tasked with animating a car to move in a continuous loop along a road image.
INSTRUCTION
Introduction:
Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website is a website that focuses on a specific theme or concept to incorporate interactive elements to interact with users. Most websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements with 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, and promotional campaigns to product launches. For example, a thematic interactive site could be a museum. Users can visit a virtual exhibition space through interactive tours, game simulations, or questionnaires. If 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. Any such site aims 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)
Submission:
1. Completed UI/UX proposal document.
2. All processes (concept, wireframes, mood board, flow chart)
TASK 1: THEMATIC INTERACTIVE WEBSITE PROPOSAL
Workflow of My Thematic Interactive Website Proposal Project
1. Choices of Topics, Research & Visual References
2. Selected Topic - Concept
3. Moodboard
4. Wireframes
5. Flowchart
6. UI/UX Design
During week 2, I think of 3 possible topics:
1. An Interactive Website Connecting Pet Owners with Pet Sitting Service Providers
2. An Interactive Website for Promoting New Game Characters in “Delta Force: Hawk Ops”
3. Movie Recommendation: LILO & STITCH
1. Pet home care interactive website
Concept
A platform that connects pet owners and caregivers, allowing users to get to know their pets through interaction and then apply for home care tasks.
Introduction
Each pet has its own introduction page, including photos, personality, habits and other information. Users can browse and interact first, and then decide whether to apply for care services.
Interactive elements
Pet card (photo + personality label)
"I want to know him/her" interactive button
Emotional voting (such as "so cute", "I want to take care of him/her")
Care application form (simple authentication)
Daily pet recommendations
Target audience
Pet owners with temporary care needs
Pet lovers who want to take care of their pets part-time
Young users who like to browse pet content
2. VALORANT Agent Role Promotion Website
Concept:
Design an immersive promotion platform, focusing on the agent roles of "VALORANT", helping players to deeply understand the character's personality and skills, and enhance participation and character popularity.Introduction:
Through dynamic web pages, the background story, positioning style, skill mechanism, and other core information of the agent are displayed, combined with visual animation and interactive experience, to strengthen the player's impression of each agent and stimulate the desire to explore and use.
Interactive Elements:
Dynamically present the character's appearance animation or background story clips to create an immersive atmosphere.
Skill simulation and display
Demonstrate skill effects in an interactive way, such as flash, control, reconnaissance, teleportation, etc. Players can click on the skill icon to view tactical demonstrations.
Poster display area
Provide high-definition agent theme posters, support scrolling or click to enlarge. Players can download and collect, or share to social platforms. Poster styles include: official style, season theme, player submission, etc.
Target Audience:
Tactical shooting game enthusiastsExisting VALORANT players, especially those who are keen on role-playing and competitive strategy
New players interested in fast-paced competition and hero skill systems
3. Movie Recommendation – LILO & STITCH
Concept:
Recommend a classic animated movie suitable for parents and children, full of warmth and imagination.
Introduction:
LILO & STITCH tells the story of the friendship and family bond between a lonely little girl and a naughty alien pet. It is a touching and relaxing animated movie.
Interactive elements:
Character introduction cards (Lilo, Stitch)
GIF carousel of famous scenes
Message board recommends other similar movies
Target audience:
Family audiences who like animated movies, teenagers, and people who like healing works.
I selected the topic 2：
Font
Font matching instructions
Visual References of Website
Wireframe
User Flow Overview
VALORANT Agent Promo Website – User Flow Overview
1. Character Overview Page – AGENTS Overview Page
Purpose:
Display all agent characters and guide users to explore different tactical styles and personality settings.
User Operation:
Click any character card → Change background color
Click more icon → Go to detailed information page
2. Agent Detail Page – Agent Information Page
Purpose:
Introduce the background, skills, positioning and visual style of each agent to enhance the sense of substitution.
Interaction Process:
User Operation:
Video Area: Click to play character skill animation (zoom + transition effect)
Skill Area: Click skill icon → Switch sample animation
Click character → Go to poster visual page
3. Visual Gallery Page – Poster Visual Page
Purpose:
Display high-precision illustrations/battle posters of agents to enhance the charm of characters.
Interaction Process:
User operation:
Click the thumbnail on the left → switch roles to view related posters
Slide the paging point at the bottom → switch different posters
Click the back arrow → return to the home page
REFLECTION
In the design process of this pet home care themed interactive website, I thought deeply about how to integrate service functions with warm emotions. Users not only need a convenient booking platform, but also hope to feel the care and peace of mind for their pets. Therefore, I create a warm and trusting atmosphere through warm visual colors, friendly fonts, and interactive elements (such as pet profiles and care progress displays).
In my observation, I found that successful interactive websites can often increase user stay time and participation through personalization and emotional connection. For example, modules such as pet dynamic updates, caregiver introductions, and map reservations can enhance users' sense of participation and trust.
This project made me realize that UI/UX design is not only the layout of the interface, but also the construction of the user's psychological experience. Good visual consistency, clear traffic guidance, and thoughtful interactive details can effectively enhance users' recognition and loyalty to the service, and ultimately achieve the transmission of brand value.
评论
发表评论