26/11/2024 - 8/1/2025 (Week 10 - Week 14)
Lee Wing Kie / 0364251
Advanced Interactive Design/ Bachelor of Design (Hons) in Creative
Media
Task 3: Completed Thematic Interactive Website
INSTRUCTION
Final Project: Thematic Interactive Website
In the final project, we need to synthesize the knowledge gained from Tasks
1 and 2 to apply in Task 3. We will create integrated visual assets and
refine the prototype into a fully functional and complete product
experience.
Process
While working on this website, I applied the techniques Mr. Shamsul taught
us during the tutorial classes. When I encountered debugging issues, I also
sought help from my senior to resolve them. My website features interactive
elements and animations such as hover effects, automatic horizontal
scrolling text, and page transitions. The development process has been quite
challenging and required extensive testing.
1. Loading Page
For the loading page, I developed a loading animation featuring a can
jumping into the screen. This design highlights the product and reinforces
the website's focus on can cakes, making it more visually engaging.
|
|
Fig 1.1 Loading page timeline
|
2. Landing Page
For the loading page, I initially planned to include a button in my
prototype that would take users directly to the preorder page when clicked.
However, I later changed the preorder button to a "menu" button, allowing
users to explore more products and other flavor options. Additionally, I
animated the details of the cake layers so that when the mouse enters a
certain position, the ingredients for each layer appear.
|
|
Fig 1.2 Landing page
|
3. About Us Page
For the about us page since it is an informational page, I kept the design
simple. When users click on the page, the content fades in, adding a subtle
animation to make the page more engaging and less boring.
|
|
Fig 1.3 About us page
|
4. Product Page
The product page is one of the most challenging parts for me because I need
to make the product photo animate and appear larger when the mouse enters.
When the mouse exits, the animation should revert to its normal state.
|
|
1.4 Product page
|
5. Contact Us Page
I would say this page is very important because it needs to include
different social media links that users can access by clicking specific
buttons. I added links to WhatsApp, email address, and Instagram.
Additionally, users can navigate back to the homepage, about us page, or
product page by selecting their desired option.
|
|
Fig 1.5 Contact us page
|
Page Transitions
Contact us page transition
Final Submission
Walkthrough Video
REFLECTIONDeveloping this website was challenging at first because I wasn’t very proficient in using Adobe Animate and working with hover animations, which were quite difficult for me. I had to spend a significant amount of time experimenting and troubleshooting, which sometimes felt overwhelming. However, I’m really grateful to my lecturer and coursemates for their guidance and support. They not only helped me improve my technical skills but also encouraged me to stay motivated when I faced difficulties.
Looking back, I realize there is still room for improvement, especially in the overall design and user experience. I would have liked to spend more time refining the aesthetics and ensuring every detail aligned perfectly with my vision. However, managing multiple modules and assignments made it challenging to dedicate as much time as I wanted to this project.
Through this process, I’ve learned the importance of time management and prioritization. Balancing creativity with efficiency is a skill I’m continuing to develop, and I’m proud of the progress I’ve made.
Comments
Post a Comment