adv. interactive design: final project - interactive microsite

Advanced Interactive Design 30.11.22 - 11.12.22 (Week 13 - Week 15)

Wendy Seto / 0348805
Bachelor of Design (Hons) in Creative Media / Taylor's University

Final Project: Interactive Microsite

PRACTICAL

Final Project

In this final project, we were assigned to create an interactive microsite for our AR filter promotion purpose. I didn't really have to design much for this one since I already have all the assets from Project 1 & 2 and can just start developing it into a different form.

figure 1 microsite pages design draft

figure 2 final microsite pages design.pdf

It was a bit tough going back to Adobe Animate again because I kinda have forgotten how to use the software but it didn't take long to recall what I've learned previously.

figure 3 animating process

figure 4 final interactive microsite.html

figure 5 interactive microsite walkthrough.mp4

---

FEEDBACK

Overall, it's okay but can do a bit more of interactivity.

adv. interactive design: project 2 - interactive ar application

Advanced Interactive Design 19.10.22 - 20.11.22 (Week 10 - Week 12)

Wendy Seto / 0348805
Bachelor of Design (Hons) in Creative Media / Taylor's University

Project 2: Interactive AR Application

PRACTICAL

Project 2

The next project is about making an Instagram filter of whatever we are promoting in Project 1 which is the Interactive Web Application. I have used Spark AR before and created a bunch of filters so I thought this wasn't as difficult compared to the first project with Adobe Animate. The filter I wanted to create was the "Which one are you" thing that can help the audience or users to decide on which cake they want to purchase.

figure 1 "which cake are you" assets

I also got these few ideas about making a frame effect, one is birthday polaroid and the other one is 4 collage photobooth. However, I didn't end up finalizing nor using them.

figure 2 frame ideas

Because in my opinion, the "Which one are you" filter alone is too basic, I wanted to create something more advanced and complicated but also fun and interesting at the same time. Therefore, I decided to make an interactive game filter which audience can play and engage with. 

I quickly began designing the assets starting from the character. I used my childhood teddy bear (on the left side of the picture below) as a reference for it without any particular reason hahahah.

figure 3 little me and my stuffed animals

And then I adapt the basket icon from the app design into a trolley.

figure 4 character + trolley assets

At first I was thinking of using cherries and strawberries as the colliders but then I felt like the creams work better. 

figure 5 collider explorations

I attempted to make a score counter as well to motivate the users when they play the game but until now I don't know why it isn't working! (which is why I don't have it in the final result :() I literally worked for the score counter for so many days but achieved nothing.

figure 6 score counter attempt

figure 7 complete script including score counter

Here are my final patches for each thing.

figure 8 the "which cake are you" patches

figure 9 the kekiku game patches

figure 10 the background music for keiku game patches

figure 11 the filter segmentation icon patches

figure 12 ar filter working file overview

Another "me" thing, creating lots of file copies just to confuse myself in the end. Hehehe.

figure 13 file copies

link to the published filter

figure 14 kekiku filter walkthrough.mp4

---

FEEDBACK

That looks fun.

Adv. Interactive Design: Exercises & Project 1 - Interactive Web Application

Advanced Interactive Design 31.8.22 - 30.10.22 (Week 1 - Week 9)

Wendy Seto / 0348805
Bachelor of Design (Hons) in Creative Media / Taylor's University

Exercises: Adobe Animate & Project 1: Interactive Web Application

PRACTICAL

Exercises

After being introduced briefly to Adobe Animate and went through the basic functions including the tween tools, Mr. Razif told us to create a square in and gave a list of instructions on how we should animate it. 

1. Animate the box from top left to top right.

2. Animate the box from top right to bottom right.

3. Animate the box from bottom right to bottom left.

4. Animate the box from bottom left to top left.

5. Animate to the center.

6. Animate to become a rabbit.

7. Blink the rabbit 3 times.

8. Shape into a circle.

9. Animate to the top center.

10. Make it bounce.

11. Use easy ease.

fig 1.1 in-class practice 7/10/22

*my rabbit eyes look a bit cacat and I can't stop laughing at it in class.

Project 1

After deciding on going with a cake business, I began collecting cake pictures and mask them one by one using Adobe Photoshop.

fig 2.1 masking the product images in photoshop

fig 2.2 images to use

Then, I started designing my app interface in Adobe Illustrator.

fig 2.3 design draft

fig 2.4 colour exploration

fig 2.5 final designs

Finally, the most traumatizing stage was the animating process. I was very new to Adobe Animate and everything was just very confusing especially when the interactive buttons didn't work.

fig 2.6 animating progress

I had so many copies of the animating file which stressed me out even more *wondering why did I do this to myself*.

fig 2.7 file copies // a mess

fig 2.8 interactive web application.html

fig 2.9 interactive web application walkthrough.mp4

---

FEEDBACK

Good job!