Advanced Interactive Design / Interaction Design Planning and Prototype

20.10.24 - 06.11.24 / Week 5 - Week 7

Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design (DST60804) 

---

INSTRUCTIONS

---

TASK 2

Interaction Design Planning and Prototype

For our second project of Advanced Interactive Design, we are required to work on our visual design and start planning our website’s interactive design elements and features.

The requirements are the following:

• Plan layout visuals
• Animation example or reference
• Build of animation or user-reference animation to demonstrate the intended idea

Process

Firstly, referencing my wireframes, I started off with the creation of the drawings for the website utilizing procreate. For my idea to work, I needed to break some of the drawings down into separate layers as they include the micro-interactions. In total, I created 12 drawings.

First, I drew the start page of the website, which is based off this video I watched where the pallas cat peeks out from the cave it is hiding in behind a rock. 

Fig 0.1 Silly Pallas Video

I thought this video was cute, and decided to use it in some creative way for my website as it would be a fun way for users to enter the website and at the same time, highlight one of the main features of this animal: its solitary nature.

To do this, I captured two frames from the video- one of the pallas cat hiding, and then another where it peeks out to reveal itself.

Fig 0.2 Pallas Cat Hiding

Fig 0.3 Pallas Cat Peeking Out

 

The plan and idea being that when the user hovers over the hidden pallas cat, it will pop out to reveal itself after being caught seen, then, they can click on the revealed pallas cat to enter the website.

In procreate, I separated this drawing into 3 layers, the cave the pallas cat is hiding in (background), the pallas cat, and the rock + grass its behind (foreground).

Fig 0.4 Start Peek Layer 1

Fig 0.5 Start Peek Layer 2

Fig 0.6 Start Peek Layer 3

Together, the combined layers create the complete picture:

Fig 0.7 Start Peek Complete 

Next is the overview drawing. For this, I drew a pallas cat sitting on a patch of grass, and in my wireframes, it sits next to the overview text to fill up space and make the overview less boring as without it, it would just be reading plain text, and also to give an "overview" context picture on what it looks like, and "set the stage" for what the rest of the website will look and feel like- which is filled with other cute drawings of pallas cats. 

Fig 0.8 Overview

First, I worked on the behaviour page drawing, which is of a pallas cat peeking out from the side of an invisible wall, which is where the text will be. I drew this to specifically point out the first and most characteristic feature of the pallas cat which is that they are solitary creatures, so everything in their behaviour, features, and adaptations highlights this. For the interactive element of this page, the pallas cat will appear slowly as if coming out from the text.

Fig 0.9 Behaviour

Then is the "predation" page drawings. For this, I had to create two drawings as there were two sections for this page as per the wireframe plans.

First is the hunting page, which details the hunting habits of the pallas cat. The pallas cat is a stealth predator, which means that to hunt their prey, they hide and stalk their prey for long periods and ensure undetectability before pouncing on their prey, catching them off guard. To illustrate their hunting habits, I created a drawing of a pallas cat behind a rock stalking its mouse prey and peeking behind the rock to view it. The interactive element here is that when the user hovers over to the pallas cat- it will peek above the rock with a slight bouncy animation: the interaction here effectively highlights how the pallas cats hunt in stealth.

For it to work, the drawing was separated into two layers; the pallas cat head, and then the rock, mouse and pallas cat paws.

Fig 1.0 Predation Layer 1

Fig 1.1 Hunting Layer 2

Combined they create the full image.

Fig 1.2 Hunting Complete

For the 2nd section of the predation page, it details their diet. They feed on small mammals, bu mainly, a pallas's cat diet typically consists of 3 things which can be found in the region they live in: voles, pikas, and birds. To highlight these 3 main foods, I created a drawing of a pallas cat pawing its paw above each animal as if it caught and cornered the animal and was about to eat it. I then drew the 3 animals.

Fig 1.3 Diet

Fig 1.4 Vole

Fig 1.5 Pika

Fig 1.6 Bird

Combined together, the full picture looks like this with one of the animal examples

Fig 1.7 Diet + Pika Example

The next page of the website is on the anatomy of pallas cats. For this, I looked at many reference images of pallas cats to grasp their distinct unique features as I will be labelling them later on- then, I created a drawing of it sitting- I felt it should be clear yet simple to effectively showcase all the features of a pallas cat, and to give room for the text labelling that will be added later on.

Fig 1.8 Anatomy

Finally, I created drawings of the 3 different kinds of habitats pallas cats live in: grasslands, steppes, and rocky mountains- these will be masked into a cube labelling each habitat later on. When the user hovers on one, it will reveal the drawing of what that specific habitat looks like.

Fig 1.9 Steppes

Fig 2.0 Grasslands

Fig 2.1 Rocky Mountains

Once all the drawings were completed, referring to my wireframes and website concept slide, I then created a figma prototype of the entire website to prototype my visual layout and animations.

Fig 2.2 Fig Start Page

To create the homepage, I first deposited all the separate layers of the drawing into a frame to create the full picture. Then, I moved the pallas cat to be more hidden behind the rock on the 1st starting page, and then only added the prototype to change to the 2nd page where I pulled the pallas cat up and it is revealed when the user hovers over it.

 I also added the heading text of the website "Pallas Cats" in an oval along with the subtitle "Click on the pallas cat to start" to help the user in navigation.

The interactive element is so that whenever the user hovers over the pallas cat, it will peek out from the rock, highlighting their hidden nature. When clicking on the pallas cat, the oval box will then expand to fill the whole screen and the rest of the information of the overview will appear. This is the reference transition of what it will look like

When the user clicks on the pallas cat, it then goes to the overview page- where beside the drawing, I added a box with some text about the brief summary and history of pallas cats.

Start > Overview Page

Fig 2.3 Overview Interactions

Clicking on the paw allows the user to go to the next piece of information for the overview. When hovering on the paw, it also changes colour from tan to brown. I used a paw instead of an arrow to match the stylised cute theme of the pallas cat.

Fig 2.4 Paw States

For the animation of the text changing, it will be a mask sliding transition like below, except horizontal instead of vertical.

Fig 2.5 Animation Example for Overview Page Interaction

After finishing reading the last piece of information of the overview, the user will then be brought to the information page where they can browse the different characteristics of the pallas cat by clicking on the 4 boxes:

Fig 2.6 Information Home Page

Hovering on each box will also change its colour to tan and make the text lighter.

Fig 2.7 Information Home Box States

When clicking on the left paw, the user can go back to the start of overview if they want to reread it, they will then have to click through the overview "next" arrow button paws to go back to the information page.

Fig 2.8 Information Home Left Paw Interaction

For the animation of each page when clicking on a box, it will look something like this, where the box expands to become bigger.

Fig 2.9 Animation Example for Box Interaction

Clicking the x button will exit out of the page the user is currently on and bring the user back to the information page instantly, and hovering on the x button also changes its colour to tan.

Fig 3.0 X Button States

Clicking on behaviour will bring the user to the behaviour page, where I have added information of general pallas cat behaviour and their temperament.

Fig 3.1 Behaviour Page

The interactive element in this page is in the drawing, first and foremost, pallas cats are solitary creatures, as I have mentioned before, everything about their behaviour and traits reflect this, so I wanted to make the animation reflect that. To do this, I made the animation look as if the pallas cat is peeking out of the text slowly.

Fig 3.2 Behaviour Animation

Then, for the predation page, there are two pages the user can navigate to; hunting and diet. The user first starts at the hunting page, and if they want to navigate to diet, they can click on the paw in the bottom right corner to do so. Vice versa, to go back to hunting, they can click on the paw to go back to hunting.

Fig 3.3 Hunting + Diet Pages Paw Interactions

The interactive element for the hunting page is the pallas cat hiding behind the rock. The text description for the hunting page talks about the hunting habits of the pallas cat, which is that they are ambush predators, meaning they hide and stalk their prey for a long time before finally catching them. I wanted to illustrate this, so using my drawing, I deposited all the layers, and made the first frame of the pallas cat in the hunting page more hidden behind the rock, then the second frame peeking above the rock. Whenever the user hovers over the pallas cat it will pop out with a little bounce animation.

Fig 3.4 Hunting Page Interaction

For the diet page, it details the diet of the pallas cat, and the interactive element is switching between the main 3 animals that the pallas cat eats; pikas, voles, and birds. To do this, the user can click on the small paw next to the name of the animal, and the transition will also be like this, but horizontal.

Fig 3.5 Animation Example for Diet Page Interactions (Animal)

Fig 3.6 Diet Pages Animal Diet Paw Interactions

When reaching the bird, if the user wants to go back to the other animals they can click the small paw and it will go back to the pika, then they can keep cycling through the animals.

Then, for the anatomy page, the drawing of the pallas cat will first appear in the middle of the screen and fade in, then the rest of the labelled information also fades in after one by one detailing the unique anatomical traits of the pallas cat.

Fig 3.7 Anatomy Page

Next is the habitat page which has a simple interactive animation of hovering. When hovering on any of the three habitats, it then shows a drawing of what the habitat looks like to illustrate the diversity of conditions the pallas cat lives in.

Fig 3.8 Habitat Page

Fig 3.9 Habitat Page Interaction

Then lastly, when returning to the home page with the x button, clicking on the right paw button brings the user to the last page which details the conservation efforts for the pallas cat as they are near threatened. In the site, I plan to have it so that when clicking on the logo it opens up the relevant conservation pages where users can read more about the pallas cat and how to help. Then, when you hover on the back to home button at the button, it changes from the tan colour to brown, and clicking on it simply leads back to the enter page of the website.

Fig 4.0 Information Home Right Paw Interaction

Fig 4.1 Conservation Page

Fig 4.2 Back to Home States

Final Interaction Design Planning and Prototype

---

REFLECTION

This was a really fun task since I got to make a lot of cute drawings of pallas cats for my website, I used drawings instead of images of the pallas cat like how I had it in my wireframes since I wanted the site to be more personalised and have a specific naturalistic aesthetic and be more cute/"kid-friendly" looking in a way. Figma is also really useful for prototyping the site since I could create everything on there for the design of the site, and make components for the hoverable interactive elements for example. As for animations, I looked for gifs online that best conveyed what I was thinking of visually, I hope I will be able to create them accurately with the vision I have in mind in the final task.