Advanced Interactive Design / Final Task: Completed Thematic Interactive Website

13.11.2024 - 08.01.2024 (Week 9 - Week 15)
Gunn Joey / 0366122
Advanced Interactive Design / Bachelor of Design (Hans) in Creative Media
Final Task: Completed Thematic Interactive Website


TABLE OF CONTENTS

1. Module Information Booklet
2. Final Task: Completed Thematic Interactive Website
3. Final Submission
4. Reflection


MODULE INFORMATION BOOKLET



Final Task: Completed Thematic Interactive Website

Instructions

Students will synthesise the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience.
  1. Upload the website to a web server.
  2. Online posts in your E-portfolio as your reflective studies
  3. Make sure to embed or provide a link to the website and the video from the blog post.

Progress

A. Figma

Before starting my final task in Adobe Animate, I did some adjustment and finalised my wireframe. I changed my background colour for each Dyson Hair Care product pages to a deeper tone. Also, I changed my font and some images in Figma. I searched for more high quality images of Dyson Hair Care products to avoid blurred images in my wireframe.



Click here to view wireframe and prototype in Figma.

Click here to view Task 2 moodboard.

B. Adobe Animate

1. Loading Page

To begin with the website, I created keyframe for loading page, just like my wireframe, which only include the Dyson logo. I felt the loading page appears very boring. Then, I created a button to enter the home page. I also created a hover animation for the button. When the mouse reach the button, the white enter button will changed to a gold metallic colour to match with Dyson colour theme.


2. Home Page

For home page, I created a hover animation for the arrow button. Clicking the arrow button will show the animation for the button before showing the next product. There are four product images which I also created a hover animation in action layer. When the mouse reach the products, they will become bigger. Clicking the products will straight away link to product page.




3. Product Page

I mainly use Gsap and Javascript to code the action layer. In past week, Mr. Shamsul taught us to create button to change the item colour. I applied what Mr. Shamsul taught us and create buttons to change the different colour of the Dyson Hair Care product.


There are accessories for Dyson Supersonic and Dyson Airwrap. To make the product page more interactive, I created a hover animation in my action layer. When mouse reach the accessories image, it will appear bigger.


4. Hair Care Preferences

Clicking the Hair Care Preferences on navigation bar will link to the Hair Care Preferences page. I refer to senior's work which given by Mr.Shamsul and get the idea to create a clicking effect by changing the colour of the selection.


To make sure my website looks neat, I align all the elements carefully.


5. Gsap

Clicking the "About Us" on navigation bar will link to Dyson Hair Care website. I added the link into Actions.


I insert this coding to every first and last frame of every section to avoid the website run by itself automatically. By adding this code, every page will stop playing repeatedly.


I made the enter button leads to my home page by adding this Gsap.



Final Submission

Presentation Video:



REFLECTION

This module has been both challenging and rewarding. I started with no knowledge of Adobe Animate, but thanks to the step-by-step guidance from Mr. Shamsul. I learned how to create animations and apply different effects. It was amazing to see my final task come together from just an idea to a finished website. I never thought I’d be able to do it, but I’m proud of how much I’ve learned.

Working on the Dyson Hair Care website project was a creative journey. I used Figma to design the wireframes, then create keyframes, add animation in action layer and add Gsap and Javascript in Adobe Animate. Mr. Shamsul's guidance is very helpful. I started with zero knowledge of animation, but with each class, I learned new skills, like creating buttons and using Gsap in coding. This project taught me how fun it is to bring exercises during Mr.Shamsul's tutorial into a completed animate website. I’ve learned so much throughout this process from the technical skills of using Adobe Animate. It’s been challenging but also incredibly satisfying. This experience has given me confidence in my abilities and made me excited to continue learning and creating in the future.

Comments