Advanced Interactive Design / Final Project
23.11.2022 - 11.12.2022 (Week 13 - 15)
Lew Se Win / 0347637 / Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design
Final Project: Interactive Website
TUTORIAL
Final Project: Interactive Website
We are required to create a website that is related to our previous interactive app for this project. In addition, as we did in project 2, we would need to include a promotional page for our AR filter.
I first started designing the website in Figma.
Figure 1.1 Website Wireframe
Figure 1.2 Website Design
After that, I transfer my designs into Adobe Animate CC in order and create animation for the website.
Figure 2.0 Progress in Animate CC
Figure 2.1 Progress (navigation bar script)
Figure 2.2 Progress (carousel script)
Figure 2.3 Progress (motion tween & mask)
Figure 2.4 First website outcome
Later, I'd like to try out the gsap scrolling technique demonstrated by Mr. Razif in the recorded tutorial. As a result, I decided to combine the featured series and filter page.
The procedure was difficult. I overlooked a few codes, resulting in the scrolling section not working. After many attempts, I was only able to scroll in a specific page sequence. As a result, I went to consult Mr. Razif, who gave me a very good solution in which I could create a new function that could also be written down in the same script.
Figure 4.0 Progress #1
Figure 4.1 Progress #2
After I published the web, I also used XAMPP as the web server to load my web.
Figure 5.0 XAMPP
Final Submission
Figure 5.1 Video walkthrough
https://drive.google.com/drive/folders/158Kuf4PpQu_eyC7pySXvhIPSfujACH2E?usp=share_link
FEEDBACK
REFLECTION
FEEDBACK
Mr. Razif said that 5 pages are enough, focus more on the animation.
REFLECTION
This project was fun but very time consuming as I kept overlooked the scripts. I also wanted to revise my previous filter in this project, but I was unable to do so because I was juggling assignments from the five modules I took this semester. I was fairly satisfied with the outcome and would definitely like to improve it in the future.
Comments
Post a Comment