Advanced Interactive Design: Final Project

01/09/2022 - 11/12/2022 / Week 1 - Week 14
Darren Liga / 0351480
Advanced Interactive Design: Final Project

---

Link to Final Project - Google Drive
https://drive.google.com/drive/folders/1gtTse289SAGIGbnS1OfRY4e2eAFbHnQe?usp=share_link

---

INSTRUCTIONS

 

Design

For the final project, we were tasked with something similar to the first project. We were asked to create a website in FullHD format (1920x1080) size and ratio instead of the portrait mobile app aspect ratio.

As usual, following the recorded tutorial. We were suggested to start designing in Figma. I started the final project in Figma for the design process. It was so much easier to do it in Figma than in my first project in adobe illustrator.

Fig 1.1: Design in Figma

Animating

I exported the needed elements from Figma and directly dragged them into adobe animate. I started with the base of all websites, its navigation panel. The script for the navbar would be the challenging part of this assignment, in conjunction with the needed anchoring of the timeline. But since I have familiarized myself with adobe animate due to the first project, the process of creating this website was pretty easygoing.  

Fig 1.2: Navbar

Fig 1.2a: Navbar Script

I then proceed to export another page from Figma, the home page. I added slight animation inspired by professional websites like apple.com. I tried my best not to have the animations com here and there and be somewhat like a PowerPoint presentation.

Fig 1.3: Home Page

continued doing it for the about page.

Fig 1.4: About Page

and again for the our coffee page.

Fig 1.5: Our Coffee Page

For the most important page, the call to action page, I added some cool animation with the help of mockups for my SparkAR filter. 

Fig 1.6: Filters Mockup Animation

Inside the Download App page, I have another CTA button that will bring the user into Instagram to try out my Instagram filter. But in thought, since this is a website, computers/laptops cannot use the filters. It would need to be opened on a mobile phone. I then got an idea to implement the QR code from SparkAR and show it when the user hovers over the CTA download button. While still having the filter linked to the button when clicked.

Fig 1.7: Download App Page

Page when hovered.

Fig 1.8: Download CTA hover 

Publishing

Published File.

Fig 1.9: Published Final Project

Video Walkthrough

Final Project Website (Video Walkthrough)

Vid 1.1: Final Project - Video Walkthrough

Link to Final Project - Google Drive

https://drive.google.com/drive/folders/1gtTse289SAGIGbnS1OfRY4e2eAFbHnQe?usp=share_link