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.
- Upload the website to a web server.
- Online posts in your E-portfolio as your reflective studies
-
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
Post a Comment