Advanced Interactive Design / Task 1

September 14, 2023

Advanced Interactive Design / Task 1

Week 2 - Week 6

Riko Matsuyama 0351470

Advanced Interactive Design / Task 1

Bachelor of Design in Creative Media

Instructions

Task 1

Augmented Reality Experience Filter

AR is the latest form of interactive design nowadays. Students are required to develop an AR application with AR interactivity that will fit the Brand Experience of the product or services that you have chosen and will be carried forward to the Final interactive website project.

Week 2

I got a short briefing. Example of websites

https://www.findworkhappiness.com/explore

Week 3

What kind of brand or item do you want to promote

> Think about it at first

I came up with two ideas.

Fig1.1: proposal, google doc

Week 3 Feedback

- I chose idea 1 and he said this is fine

- Spark AR, try the tutorial, how to use it

- do more research about your idea and the effect that I want to

Week 4

Start creating an AR filter. Before that, I created frames using AI and Photoshop.

Fig1.2: create frame

At first, I created a frame with this size: 720 1280. It's the ratio of iPhone 8

Fig1.3-4: process, created frame

Simple Frame Filter!

Spark AR Studio Tutorial - Create a filter for Instagram and Facebook

Week 5

However, when I imported this file, there were no options for iPhone 8 and the proportions did not match, so I had to recreate the same design frame.

Fig1.5: fixed the size of frame

I changed the ratio and it fit well.

Fig1.6: applying

Fig1.7: created some options of filter

This is the video of the progression. I refer to the below youtube video. I used a personal image in Spark AR. But now the filter is a bit far from his face, I will fix it if I can.

Fig1.8: process 1

Spark AR: UI Interaction - Interactive with 2D object

Week 5 Feedback

- Create other filters that we can choose and enjoy

Week 6

Then, based on feedback, we created two other filters related to this brand and product. Also, selective features (?). were created. 50% milk mark, autumn leaves, cow ears.

Fig1.9: 50% milk

Fig1.10: cow

Fig1.11: leaf

Fig1.12: three filter options related product

I referred to the previous video. Created three UI options and inserted them to spark AR. Using this, we can choose the frame option.

Fig1.13: tutorial video

Fig1.14: Progress 2

Created option elements

Fig1.15: created three option, UI folder

Week 7

Based on the tutorial video, I added the option picker and option switch (?). Use the option switch to mark which button is tapped, for each button I will display the UI corresponding.