Advanced Interactive Design - Final Project

 

4/11/2020 - 4/12/2020 (Week 7-Week 15)
Chan Qian Hui 0334447
Advanced Interactive Design
Final Project

---

Instructions

---

Final Project

Research

Filter

I started out by creating the assets in Adobe Illustrator. I used bubble design and created the assets separately so that I could make use of the plane object and layer the depth of target tracking.

Fig 1.0 Creating Assets in Adobe Illustrator

Then I move on to create the animation sequence for the title of filter. I started the video animating on Adobe After Effects.

Fig 1.1 Animating in Adobe After Effects

Then I shifted the file to Adobe Photoshop to generate video frames so that I can compile and put into Spark Ar.

Fig 1.2 Creating frame sequence in Photoshop

After it is done then I moved to Spark Ar and added target tracking. I added the animation sequence in and also the assets created.

Fig 1.3 Target Tracking Patch

Timetable

Fig 1.4 Object Tap Timetable

Fig 1.5 Timetable placement

Email

Fig 1.6 Object tap email

Fig 1.7 Email placement

Map

Fig 1.8 Object tap mail

Fig 1.9 Animation for small icons

Fig 1.10 Map Placement

Notes

Fig 1.11 Icon animation

Fig 1.12 Animation placement

Microsite

I started by creating assets in Adobe Illustrator for the thumbnail image since it had to be rotated. 

Fig 2.0 Creating asset in Adobe Illustrator

After that, I shifted to Figma to work on my prototype design since it is easier to export on figma and I created a total of 5 different pages and 4 pop ups for the design.

Fig 2.1 Creating asset in Figma

After that i move on to editing in Adobe Animate. I started out by creating the animations for transition. I wanted the animation to match the look which is clean sharp and quick. So i kept the animation fairly simple.

Fig 2.2 Animating in Adobe Animate

Then i move on to coding for the buttons and also adding hover to indicate which are the clickable areas for users.

Fig 2.3 Coding in Adobe Animating

---

Final Videos

Final Filer Video

Final Microsite Video