(Week 5 - Week 8)
Caitlin Ong Lynn Dee / 0343801 / Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design
Task 2

LECTURE

INSTRUCTION

Task 2: Interaction Design Planning and Prototype

Task 2 involves planning the websites interactive design elements and features. It should include layout visuals and animation examples and or references in order to demonstrate the idea.

Layout Visuals

Since the layout for my proposal is a low fidelity, I have created a colored illustration of the website's layout in order to explain my idea better. But at this moment the Illustrations present in the presentation, don't represent the final design on the website. I recreate all the website layouts and GIFs in Procreate.

Prototype link:
https://www.figma.com/design/SUqVzKAtvxvEA5Vg7SfoHT/AID%3A-Task-1-Final?node-id=0-1&t=uamSQusNqF9zMfMr-1

Loading Screen
The loading screen is simple I took inspiration on the classic loading screen and add in flower patterns. The users can press start to go into the Home page.

Fig 1.1 Loading Screen Recreation

Fig 1.2 Loading Screen Comparision

Fig 1.3 Loading Screen Animation Frames

Fig 1.4 Loading Screen GIF

Home Page

In the Home page the bees act as the buttons to go to different pages. Some of the animation is not accurate, as in the final version I plan for the animation to be smoother.

Fig 2.1 Home Page Recreation

Fig 2.2 Home Page Comparision

Fig 2.3 Home Page Flower Animation Frames

Fig 2.4 Home Page Flower GIF

Fig 2.5 Home Page Bee Button Animation Frames

Fig 2.5 Home Page Bee Button GIF

Care Page

In the Care page user can interact with pictures that represent the hibiscus' conditions. By clicking on the picture, a pop-up text box will paper to show Information about hibiscus conditions. Each of the icons present page will have a text box pop up by scaling up. However, I only apply that animation for water can only to represent all of the pictures in present in the page.

Fig 3.1 Care Page Recreation

Fig 3.2 Care Page Comparision

Fig 3.3 Care Page Fertilizer Animation Frames

Fig 3.4 Care Page Fertilizer GIF

Fig 3.5 Care Page Soil Animation Frames

Fig 3.6 Care Page Soil GIF

Fig 3.7 Care Page Sun Animation Frames

Fig 3.8 Care Page Sun GIF

Fig 3.9 Care Page Temperature Animation Frames

Fig 3.10 Care Page Temperature GIF

Fig 3.11 Care Page Water Animation Frames

Fig 3.12 Care Page Water GIF

Fig 3.13 Care Page Text Box Animation Frames

Fig 3.14 Care Page Text Box GIF

Varieties Page

Users can interact with the pictures of the different types of hibiscuses and by clicking on it can view information about it.

Fig 4.1 Varieties Page Recreation

Fig 4.2 Varieties Page Comparision

Fig 4.3 Varieties Page Idele Bee Animation Frames

Fig 4.4 Varieties Page Idele Bee GIF

Fig 4.5 Varieties Page Hover Effect Animation Frames

Fig 4.6 Varieties Page Hover Effect GIF

Fig 4.7 Varieties Page Selection Animation Frames

Fig 4.8 Varieties Page Selection GIF

Anatomy Page

The hibiscus will start as drawing and once user click on its certain parts of the hibiscus will be colored. And a bubble will appear showing a cross section of the hibiscus the by press the bubble it.

Fig 5.1 Anatomy Page Recreation

Fig 5.2 Anatomy Page Comparision

Fig 5.3 Anatomy Page Press on Flower Animation Frames

Fig 5.4 Anatomy Page Press on Flower GIF

Fig 5.5 Anatomy Page Press on Bubble Animation Frames

Fig 5.5 Anatomy Page Press on Bubble GIF

Shop Page

In the shop page I plan to have the user press on an empty labeled flowerpot and the flower will bloom out of the flowerpot. And it will zoom in on the flowerpot to show another page to buy the specific flower. For the animation I only animated one to represent all of the flowerpots.