202509 Advanced Interactive Design---Task 1: Thematic Interactive Website Proposal
Name: TANG YUYING
Student ID: 0370676
Programme: Bachelor of Interactive Spatial Design (Honours)
Task 1: Thematic Interactive Website Proposal
Date: 14-10-2025
Introduction
In the first week of the semester, Mr. Shamsul introduced us to the main task for this term: building a website with animations. The specific functions and direction of the website will be chosen by us, and the scope is very broad—it can be based on personal interests or current trends.
However, in this assignment, we are required to demonstrate a fairly complete UI/UX design and interactivity, as well as include essential animations. Therefore, throughout this semester, we will use tools such as “An (Animation),” HTML, CSS, and others to help us complete the project.
After visiting other students’ works, I became very interested, as the extensive use of animations makes websites much more engaging. At the same time, this has become one of the popular promotional methods that many companies prefer today. If I learn and apply these skills well, it could open up more choices and opportunities for my future career. That is why I will continue working hard this semester, with the hope of designing better projects.
Feed Back:
Previously, the three themes I considered were:
-
Pet Adoption
-
Illustration Design Website Promotion
-
Bread-Making Website
Personally, I really liked the pet adoption theme, but since many others had chosen the same topic, Mr. Shamsul suggested that I transform it into a tutorial-style website — presented in the form of a journey to guide first-time pet adopters. Therefore, my upcoming Task 1 will be developed based on this feedback.
Task 1
Requirement:
Topic chooses- “tutorial for pet adopters”
Moodboard
The website design adopts a warm, clean, and friendly visual style to create a welcoming learning environment. Secondly, I chose a hand-drawn illustration style because it better conveys the owner’s emotions and affection toward their pet.Of course, it will also be a completely new challenge for me, as I want to try creating some of the illustrations and animations myself.
Wireframe：
This page is what users will see when they first enter the website.
Page 1: A delivery box is shown first. I chose the delivery box design to represent animals that have been fostered or abandoned, symbolizing their longing for a home.
Page 2: The box starts to bounce up and down, signifying the pet’s vitality and excitement to meet its future owner.
Page 3: When the website finishes loading, a little kitten pops out of the box — symbolizing the moment the pet finally meets its owner, feeling both curious and a bit lost.
On the homepage, I plan to place an animated walking dog in the center, with some related decorative images on both sides. The logo will be positioned at the top left, while the navigation bar will be at the top right. The navigation bar will include the following sections in order: “Adoption process (journey), Pet types, Preparation checklist, and Health care.”
The reason I want to include a walking dog animation is to express the feeling of a pet searching for a home.
Adoption process (journey)：
This page represents a journey, so I plan to design it as a timer-style timeline, helping users understand that adoption is a complete process that requires learning and preparation.
Page 1: The user will first be asked whether they have enough space to care for the pet. For example, dogs generally need more space than cats. If the living area is too small, a dog’s activity range becomes limited, and without frequent outdoor time, the confined space may negatively affect its mood. The same applies to cats — they also need a certain amount of space to stay active and healthy.
Page 2: The user can then choose the most suitable pet based on their own needs and current living conditions.
Page 3: This section encourages users to visit a pet store to meet the pet they plan to adopt — to observe its appearance, personality, and overall condition. If they truly like it, they can start preparing supplies such as a pet bed, grooming and bathing tools, treats, and toys. I’ll also include short text guides to help first-time adopters understand what to prepare.
Page 4: Finally, the focus will be on preparing the home. The user should help the pet get familiar with its new environment and establish daily routines and boundaries. They can take the pet out at specific times each day to build a sense of routine. It’s also important to keep deworming medicine at home and bring the pet for regular vet checkups and vaccinations.
Pet Type：
In this section, I plan to use a dropdown menu under the “Pet types” navigation bar. When users click on “Pet types,” they can choose whether they want to view dogs or cats.
When the user selects dogs, an animation of a bouncing ball will appear at the top of the page — I chose a ball because playing fetch is one of dogs’ favorite outdoor activities. This animation adds a sense of interaction with the user. Below the animation, an image of a dog will appear to help users clearly recognize that they are on the dog page. Underneath, photos and information of dogs available for adoption will be displayed.
The cat page will function the same way. The difference is that a yarn ball animation will pop up at the top instead, as yarn balls are one of cats’ favorite toys. Below the animation, a cat image will appear, indicating that the user is browsing the cat adoption section.
Preparation checklist：
The content on this page mainly aims to help users understand the essential items they need to prepare in advance — such as a pet bed, food, and a leash. These are all basic necessities for adopting a pet.
Health Care:
On the first page, I’ll present basic pet health knowledge, as my target audience is first-time pet adopters who may not know much about pet care — for example, which foods are unsuitable for pets and which ones help maintain their health. I believe this information is essential for users to learn and understand. In the circular frame of the image, I’ll include a pet eating halfway through its food, which visually represents the theme of this section.
The second page focuses on vaccination information, since keeping pets healthy requires regular vaccinations. Actively learning about vaccination schedules and locations is a great way to protect both the pet and its owner at every stage of growth. On this page, when the user scrolls down to this section, I plan to animate syringe illustrations shooting out to enhance engagement and help users remember the topic.
The third page provides information about common pet illnesses. When users notice related symptoms in their pets, they can get a basic understanding of the situation and bring them to the vet in time. If the condition is mild and manageable, users can also refer to pet health knowledge for home care. For the animation on this page, I’ll use tag-style elements that unfold one by one as the user scrolls, creating a smooth and informative reading experience.
LOGO：
Choosing the “dog” and “star” elements is mainly to convey a sense of “expectation” — symbolizing the pet’s longing and anticipation to finally meet its owner.
All the ideas not very interesting. We discuss further in class
回复删除