Advanced Interactive Design: Final Project

01.11.2021 - 22.11.2021 (Week #11 - Week #14)

Seerat Tayyab Mukhtar Qureshi - 0345576 (BDCM)

Advanced Interactive Design

Final Project

---

Final Project

For this project, we need to create an interactive microsite and an AR filter that go together. Mr Razif said we could use our filter from Project 2 and improve it and use it for this project. I started by creating a layout of the microsite.

Fig 1.0: Website layout

Next, I had to create this layout in Adobe Animate and also start working on improving my filter in Spark AR. I added an animated background to my filter from Project #2. However, there was a problem with my face mesh at first.

Fig 1.1: Face mesh attempt

Thankfully, Mr Razif helped me solve it and I added in my face mesh from the previous project.

Fig 1.2: Face filter with background 

I also changed the icons of the buttons from my previous project. I changed them to one of the pictures from the background animation to make the link between the filter and theme a bit more clear. I need to clean up the lines a little bit more.

I changed the design too since it's so delicate, it wasn't showing up with the bold and flashy background so I made it a bit more detailed and the lines a bit thicker.

Fig 1.3: New Water filter

Fig 1.3: New Earth filter

Fig 1.4: New Fire filter

Fig 1.5: Trying out new templates in Spark AR

Since my brand is focused on nature and inspired by nature, I decided to add a serene forest sound that would play when you tap the screen.

Fig 1.6: Adding the sound

I submitted my filter for review to be published and worked on my layout in Animate

Fig 1.7: Animate layout

Below is my final submission.

Fig 1.8: Final Microsite

Fig 1.9: Final Instagram Filter

Feedback:

Week #11: Mr Razif helped us in learning Spark AR again so we can improve our filters from our previous projects.

Week #12: Mr Razif helped me solve a problem I was having with the face mesh. told me to experiment with the depth and it would work.

Week #13: We had no class this week since the semester is almost finished so we can reach out to Mr Razif for individual consultation if we need it.

Week #14: This week is the due date for this project. We are supposed to put all our files into a google drive folder and submit them. Including all fonts, sounds and textures etc.

Reflection: 

Week #11: I think I can shape a better brand identity than the previous project. Since we have to make a filter that is relevant to real life and since I am doing graphic design, branding could be an interesting use. 

Week #12: I was a bit panicked this week since all my deadlines are piling up and all the final projects from my semesters are due soon. I struggled a bit with Animate this week and I couldn't get some of the buttons to work.

Week #13: After struggling a little last week I have managed to add in the animations and interactivity. Overall I think my project is looking cohesive. I just need to tweak some things a little.

Week #14: At last the due date is finally here. I am done with the project and I actually quite like the Instagram filter I have created. As for the microsite honestly, it is a bit simple but because I was pinched for time I couldn't add too many elements to it and risk it going wrong. Overall this module has been a little stressful but I learnt a lot. I had no idea about Spark AR before this and now I have gotten a little hang of it. I think it is a really useful skill to have in the future.

Thank you, Mr Razif.