Advanced Interactive Design - Final Project: Thematic Interactive Website
ADVANCED INTERACTIVE DESIGN DST 60804
WEEK 10 - WEEK 14 (19.12.2024 - 03.01.2024)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 01
Advanced Interactive Design - Final Project: Thematic Interactive Website Proposal
- LIST -
TABLE OF CONTENT
1. Instruction1. INSTRUCTION
Module Information Booklet (MIB)
Module Information Booklet (MIB)
To-Do List:
- Students are required to create integrated visual assets and refine the prototype into a complete working and functional product experience.
Submission requirements:
- Upload the Adobe Animate file into Netlify, and then attatch the link in E-portfolio.
- Prepare a walkthrough video presenting the website.
2. FINAL PROJECT: THEMATIC INTERACTIVE WEBSITE
During Week 10 after we finnished our Task 02, our class started to conduct on
the Final Project. Based on what I have submitted on Task 02, I tried
to recurrence the whole Figma Prototype into the Adobe Animation.
Working Progression
Firstly, I start to create a new file inside the Adobe Animate and named it as
"index". And then, starts from the layout.
Figure 2.1 New file named index
Loading Page:
I insert the picture that I have found on Pinterest that match this topic as
the background of the Loading Page. After that, created an interactive "Enter"
button that navigates to the next page of the website, which is "Home Page".
Figure 2.2 Loading Page
Home Page:
As the main content of the website are more specific on movie and character, I
therefore put the summary of the movie and character pictures (Howl, Sophie,
Witch of the Waste and Calcifer). Since I do not put the "Next" button but I
have created a navigation bar that stick on top of the website.
Figure 2.3 Home Page
Figure 2.4 Navigation Bar
Character Page:
I first make an interactive spinning wheel, make the users feel involved.
Figure 2.5 Spinning Wheel on the Character Page
Then, in Character profile, I have made several interactive buttons that
represent each of the character (Howl, Sophie, Witch of the Waste and
Calcifer) and the Home Page button that allows user go back to the Home Page.
Figure 2.6 Character Section
Gallery Page
Moreover is Gallery Page, I arrange the pictures that related to the movie and
put them nicely.
Figure 2.7 Gallery Page
Plot Page
Lastly was the Plot Page, I put all the information about the plot and
important event inside this page.
Figure 2.8 Plot Page
Later on I have added a link into the "Trailer Button", which lead users to
Youtube.
Figure 2.9 Trailer button
Upload Netlify
After publishing the file, I then upload the file to Netlify.
*ps: When open this link please give the site 1 minute to load.
Click
HERE
to access the file in Netlify.
Walkthrough Video
After uploading the file to Netlify, I then record the walkthrough video.
Video 01 Walkthrough Video
3. FEEDBACK
There is no feedback given from Mr Shamsul.
4. REFLECTION
Experience
It was a huge challenge for me while conducting this Final Project, as I
have no idea on how to complete this task, which I am not skilful to the
software. Although Mr Shamsul have given his best effort to teach us about
the software, it still hard for me to conduct the project individually. For
me, this is a both challenging and rewarding experience.
