Advanced Interactive Design | Task 2

on

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

CONTENTS

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.

Animation Reference:



Fig 1.1 Loading Screen Recreation (8/6/2024)


Fig 1.2 Loading Screen Comparision (8/6/2024)


Fig 1.3 Loading Screen Animation Frames (8/6/2024)


Fig 1.4 Loading Screen GIF (8/6/2024)


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.

Animation Reference:

Fig 2.1 Home Page Recreation (8/6/2024)


Fig 2.2 Home Page Comparision (8/6/2024)

Fig 2.3 Home Page Flower Animation Frames (8/6/2024)


Fig 2.4 Home Page Flower GIF (8/6/2024)


Fig 2.5 Home Page Bee Button Animation Frames (8/6/2024)


Fig 2.5 Home Page Bee Button GIF (8/6/2024)


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.

Animation Reference:


Fig 3.1 Care Page Recreation (8/6/2024)


Fig 3.2 Care Page Comparision (8/6/2024)


Fig 3.3 Care Page Fertilizer Animation Frames (8/6/2024)


Fig 3.4 Care Page Fertilizer GIF (8/6/2024)


Fig 3.5 Care Page Soil Animation Frames (8/6/2024)


Fig 3.6 Care Page Soil GIF (8/6/2024)


Fig 3.7 Care Page Sun Animation Frames (8/6/2024)


Fig 3.8 Care Page Sun GIF (8/6/2024)


Fig 3.9 Care Page Temperature Animation Frames (8/6/2024)


Fig 3.10 Care Page Temperature GIF (8/6/2024)


Fig 3.11 Care Page Water Animation Frames (8/6/2024)


Fig 3.12 Care Page Water GIF (8/6/2024)


Fig 3.13 Care Page Text Box Animation Frames (8/6/2024)


Fig 3.14 Care Page Text Box GIF (8/6/2024)


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

Animation Reference:



Fig 4.1 Varieties Page Recreation (9/6/2024)


Fig 4.2 Varieties Page Comparision (9/6/2024)


Fig 4.3 Varieties Page Idele Bee Animation Frames (9/6/2024)


Fig 4.4 Varieties Page Idele Bee GIF (9/6/2024)


Fig 4.5 Varieties Page Hover Effect Animation Frames (9/6/2024)


Fig 4.6 Varieties Page Hover Effect GIF (9/6/2024)


Fig 4.7 Varieties Page Selection Animation Frames (9/6/2024)


Fig 4.8 Varieties Page Selection GIF (9/6/2024)


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 (10/6/2024)


Fig 5.2 Anatomy Page Comparision (10/6/2024)


Fig 5.3 Anatomy Page Press on Flower Animation Frames (10/6/2024)


Fig 5.4 Anatomy Page Press on Flower GIF (10/6/2024)


Fig 5.5 Anatomy Page Press on Bubble Animation Frames (10/6/2024)


Fig 5.5 Anatomy Page Press on Bubble GIF (10/6/2024)

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.

Animation Reference:


Fig 6.1 Shop Page Recreation; Bloomed Flowers (11/6/2024)


Fig 6.2 Shop Page Recreation; Empty Flowerpot (11/6/2024)


Fig 6.3 Shop Page Comparision (11/6/2024)


Fig 6.4 Shop Page Flower Bloom (11/6/2024)


Fig 6.6 Shop Page Flower Bloom GIF (11/6/2024)


Fig 6.5 Shop Page Zoom in Flowerpot Animation Frames (11/6/2024)


Fig 6.7 Shop Page Zoom in Flowerpot GIF (11/6/2024)


Final Outcome

Fig 7.1 Task 2 Presentation Slides (12/6/2024)


Fig 7.2 Task 2 Video Presentation (12/6/2024)


FEEDBACK


Week 8
  • The presentation is good, very detail and explain the interactive elements clearly
  • Tone down some of the animation

REFLECTION

Experience
I find this module a time consuming and confusing experience. When it comes to presenting my work, I was concerned whether or not the viewer can understand me since verbal communication is one of my biggest weaknesses. So, I created GIF for every single animation that is going to be present in my website. It took me a very long time to create every frame on Procreate.

Observation
I notice that some parts I already did in Task 1. So, in Task 2 I decide to explain the interactive element in detail and to elaborate my idea.
  
Findings
Majority of my recourses came from Pinterest, and I find this website very helpful to find some inspiration. Also, some of the animation inspiration came from one of the websites provided by Mr. Razif.

Comments

Post a Comment