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. Delta Force Character Promo Website
Concept:
Introduction:
Display the character's background story, tactical style, weapon skills and other information through dynamic web pages, and use visual animations and interactive content to deepen the player's impression and increase the popularity of the character.
Interactive elements:
Character background animation/video
Skill simulation display
Player comments/votes for favorite characters
Target audience:
FPS game enthusiasts, existing players of Delta Force, and new players who are interested in trying new tactical characters.
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 1：Pet home care interactive website
Moodboard
Font
Font explanation — PetLink
Rounded Mplus 1c Bold
This font has rounded lines and moderate thickness, giving people a friendly and warm feeling. It is suitable for use as a title or emphasized text, which can make the website atmosphere more friendly and relaxed, in line with the affinity of the pet platform.
Rubik Spray Paint
This is a modern font with a spray paint effect, which is fun and energetic. It is suitable for use in subtitles or decorative text parts to enhance visual interest and make the interface more personalized and dynamic.
Visual References of Website
Wireframes
User Flow Overview
1. Homepage – Welcome and Guidance
Purpose: Attract users to the reservation process and show service features
Interaction process:
Loading animation: Pet illustration runs into the center → drags the "Reservation Service" ribbon (with the "Reservation" button at the end)
User operation:
Click the "Reservation Service" button → Jump to the service reservation page
Hover the mouse over the pet → Wag the tail / blink
Click the decorative icon (ball, bone, nest) → Pop up the introduction of service highlights
Use the "Pet Selector" at the bottom → Switch between different types of pet illustrations (no jump)
2. Pet Profile Page – Manage Pet Information
Purpose: View/Add Pet Information
Interaction process:
View card-style pet information (avatar, name, label, age, habits, etc.)
Hover the mouse over the card → Shake head / blink micro animation
Click the card → Enter the pet information editing page
Click the "+ Add New Pet" button (with illustration) → Pop up the add form or jump to the add page
3. Service Reservation Page – Arrange care service
Purpose: Select time and make an appointment with a caregiver
Interaction process:
Select date on illustration calendar (click to switch animation)
Map illustration shows caregiver location (avatar bubble style)
Click on caregiver avatar → Pop up brief information card
Select time + caregiver → Click "Confirm appointment" button (highlighted)
4. FAQ page - answer questions
Purpose: Help users understand the service
Interaction process:
View category navigation (such as "appointment process", "caregiver questions", etc.)
Each question is accompanied by a small pet icon
Click on the question → Expand the answer content
Click "Pet Question Mark Assistant" in the lower right corner of the page → Pop up a recommended question pop-up window (Q&A Assistant)
5. User evaluation page - build trust
Purpose: Show other users' satisfactory evaluations and encourage comments
Interaction process:
Browse illustration dialog box + pet avatar's message content
Mouse hovers over the evaluation → Micro-magnification effect
Click the paw print "Like" button → Display animated feedback
Click the "I want to leave a message" button → Pop up a message form or jump to the message 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.
评论
发表评论