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


Final Interactive Web: 
https://drive.google.com/drive/folders/158Kuf4PpQu_eyC7pySXvhIPSfujACH2E?usp=share_link 



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

Popular Posts