Advanced Interactive Design - Final Project/ Completed Thematic Interactive Website
19.11.2024 - 08.01.2025 / Week 9 - Week 14
Siang Huey Yee / 0369549
Task 3 / Final Project - Completed Thematic Interactive Website
OUTLINE
INSTRUCTIONS
Module Information Booklet
FINAL PROJECT - COMPLETED THEMATIC INTERACTIVE WEBSITE
Requirements:
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.
-
Record a video walkthrough.
-
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.
Final Project
First, I finalized the colour scheme for the website before proceeding to Adobe Animate to create our final project. I also drew the footprints for the loading page and other necessary elements one by one. These elements were created using Adobe Illustrator.
Next, I began creating my thematic interactive website using Adobe Animate. I made some changes to the Figma prototype from Task 2 because implementing scroll animation in Adobe Animate was challenging. Instead, I changed the navigation to work by clicking to move to the next page. Additionally, I introduced a new idea by adding a Welcome page to the website, which was not included in the Task 2 prototype.
I have also come up with a name for this thematic website, which will be called Hogwarts Houses Chronicles.
Walkthrough Video
This is the recorded walkthrough video for the navigation for my completed thematic interactive website. I have provided two versions: one zoomed-in version that focuses mainly on the website itself and another showing the full website page on my computer screen. Please adjust your volume as background music has been applied to the website.
Figure 8 Walkthrough Video - Full Website Version (https://drive.google.com/file/d/1-llDIr3dHQXbxmNFWw0Ks6RlJYzOIyu1/view?usp=drive_link)
Netlify Website
For the Netlify website, I attempted to upload the file to the Netlify platform, but it did not work, displaying only a blank white page when clicking on the generated website link. Therefore, please refer to the walkthrough video provided above or download the Adobe Animate file for this final task.
Google drive link - Adobe Animate File: https://drive.google.com/file/d/1FUKotUoru5cCl0449HN_YXFLKwlyUnCt/view?usp=sharing
FEEDBACK
Week 11:
Mr. Shamsul suggested avoiding scrolling animations as they are quite difficult to implement in Adobe Animate. Instead, he recommended using buttons for navigation to the next page or sections. He also commented that the Loading Page and Starting Page look great and advised me to continue working on the rest of the project.
REFLECTION
I feel truly grateful for this module, as it provided me with the opportunity to choose an idea for my proposal and explore a topic that resonated with me for the thematic interactive website project. I decided to focus on Harry Potter, one of my favourite book and movie series, which allowed me to dive deeper into its rich background stories and lore. This module not only fuelled my passion for the Harry Potter universe but also gave me the chance to channel my creativity and skills into a meaningful project.
Additionally, this module is structured as a continuous learning experience. After completing the proposal phase, I was able to develop my initial prototype for the thematic interactive website using the Figma platform. This step helped me visualize and organize my ideas before moving to the implementation stage. Furthermore, we were able to apply the knowledge gained during class sessions and exercises led by our lecturer, Mr. Shamsul. Through his guidance, we learned various skills and techniques in Adobe Animate, which proved invaluable when creating the final project. Ultimately, this allowed us to produce a fully functional thematic interactive website in Adobe Animate, culminating in a satisfying and creative final submission.
Comments
Post a Comment