202509 Advanced Interactive Design---Task 2: Interaction Design Planning and Prototype

Name: TANG YUYING

Student ID: 0370676

Programme: Bachelor of Interactive Spatial Design (Honours)

Task 1: Thematic Interactive Website Proposal

Date: 21/10-11/11

In Task 2, I will continue with the topic from last time, "Tutorial for Pet Adopters".

In this assignment, I needed to draw a lot of pictures, so I mainly used two drawing software programs:

Procreate
Figma Draw

Doodle style:
My overall illustration style leans toward a hand-drawn look, using warm color tones. For the brushes I choose, I prefer ones that create a soft, fuzzy texture, which also gives the artwork a storybook-like effect.

-Figma Draw

For Figma Draw, I first tried following its tutorial videos to understand the features, then experimented with drawing some images using it. I connected my drawing tablet to sketch inside the tool, but I wasn’t very used to it, so my line control wasn’t very good. Because of that, I mostly used some of the built-in brushes to draw icons, and I also used some of the Effects to create certain visual styles for my images.

（For example, the circle in the picture is an effect created using texture）

(The above icons were all created using Figma Draw)

Then I was creating these icons, effects, and some outlines. The brushes I mainly used were:

Both of these brushes share a similar characteristic: they create a soft, furry appearance. However, Screamo has larger up-and-down fluctuations in its strokes, while Honky has smaller but denser fluctuations, giving the impression of thicker and more compact fur. So I mainly used a combination of both brushes together to achieve different effects.

-Procreate

Procrate is my primary drawing tool. The vast majority of my pictures were drawn using Procrate. These are the main brushes I use.

Here are the pictures I drew using Procrate:

（Some medicines and pet supplies）

（Small icons of animals）

（Background image）

（Pictures used for decoration）

Loading page

For my loading page, I used a delivery box as the opening element. As the box begins to shake, a small cat slowly crawls out from inside. When the cat appears, a sentence also pops up: Welcome to PawPath. Are you ready to meet me? along with a Start button.

Animation:

（GIF）

（Layers）

（Onion skin）

Button：

（Button1）

(Button2)

I created two different sets of buttons. The first set has a more game-like and animated style, while the second set leans more toward a futuristic, tech-inspired look, similar to the buttons we learned about in Week 6, which have moving lines around the edges. After comparing both styles and considering which one fits better with my overall art direction, I decided to use the first set of buttons.

Navigation bar bottom

（Navigation bar bottom）

For these buttons, I mainly designed a color-change interaction. When the user does not click the button, the text color remains black. Once the user clicks it, the text changes to brown. This design helps users clearly understand which page they have selected and where they will be directed next.

Logo:

After looking through many references, I noticed a design feature that I really liked: clicking the logo in the navigation bar brings the user back to the homepage. I applied this idea to my own project by adding the same interaction to my logo. I also designed a size-changing animation—when the user’s mouse hovers over the logo, it enlarges, and when the mouse leaves, it returns to its original size. I added this interaction to help users clearly understand where their cursor is, while also creating a more engaging and interactive experience between the logo and the user.

Main Page

In my main interface, I illustrated a running dog and a running cat. I chose this drawing style to show the pets’ lively energy and the joyful feeling of running toward their owner. For the navigation bar, I used an off-white color to match the overall art style.

Drop down manu：

Here, I created a dropdown menu under the “Preparation Checklist” in the navigation bar, making it easier for users to jump to different pet display pages. I also set it so that when the mouse hovers over an option, it gets highlighted, helping users make their selection.

Animation:

（layers）

(onion skin)

Adoption process page

On this page, I created a tutorial-like guide for pet adoption, helping users understand the steps of adopting a pet and what they need to do, step by step.

（Progress bar）

On the Adoption Process page, I incorporated a progress bar. As users complete each step and move to the next page, a star lights up and the progress bar advances. This makes the experience more engaging and helps users understand how many steps they need to complete. Additionally, by clicking on a star, users can go back and review previous steps. Once all steps are completed, all four stars light up, clearly indicating that the entire process has been finished.

Pet type page

This section is mainly designed to help users choose a pet, divided into two categories: cats and dogs. On this page, users can select their preferred cat or dog breed. Each pet’s page displays its name, preferences, and age.

Animation:

Here, I mainly created animations for the balls and yarn balls at the top of the page. The overall motion is a ball bouncing and then pausing at a certain angle. It’s very similar to the ball animation we learned in class, but the one I made stays at the top of the page rather than on the ground.

（Motion reference）

Here, I took design inspiration from the dontboardme website, which also incorporates many ball elements. It’s very engaging, and it gave me a lot of creative ideas. Based on this, I used ball designs as well, modifying some to look like yarn balls and tennis balls, and added animations so that the balls move and then pause at the top of my page.

（Web Design Reference）

(GIF)

（Tennis ball layer ）

(GIF)

（Ball of yarn layer）

Preparation checklist page

In this section, I mainly created a sticky-note style information display. As users browse this page, they can check whether they have prepared each item. By ticking the circles below, they can see which pet supplies they still need to get.