Advanced Interactive Design

October 27, 2020

Advanced Interactive Design - Final Project

28.10.20 - 2.12.20 (Week 10 - Week 15)
Abigail Bea Chong Ka Yee (0333966)
Advanced Interactive Design
Final Project

INSTRUCTIONS

FINAL PROJECT - SPARK AR APP AND MICROSITE

For this project, we had to create an AR app related to Taylor's University and a website that introduces the app we choose. The requirements for this project are listed below:

The final project is divided into two main areas:

Spark AR app
Adobe Animate Microsite

Spark AR app:

An AR app about Taylors. You can do any kind of app for Taylors University. Some example:

using "Fixed Target Tracker" for Taylor's logo/poster/merchandise tracking, which show AR graphic or AR map of Taylor's
using logic patch, to simulate a randomiser to make a "where to eat in Taylor's" ar app. (lots of tutorials online for this)
Virtual graduation, AR gown and cap using "Face Tracker"
AR objects/designs that could be placed in the real-world using "Plane tracker"
AR gallery, that could be placed in the real-world using "Plane tracker" and let the user visit a virtual exhibition
You can use Native UI Picker if you could think of a creative way to use them. like switching between graphic

Adobe Animate Microsite:

A microsite about the AR app you did
Some page/section idea that you can use (no need to do all, if you have a better idea, not in this list, you can include them as well)

Intro about the app
The objective of the app
Where to download
Step to use the app, etc

no number of page requirements.

* both Spark AR app and Adobe Animate microsite should follow the same theme/design. Please record a demo video of both microsite and spark ar filter.

I asked Mr Lun on discord if could create an AR app where students can scan a poster in each block to find the nearest toilet. He told me to go ahead with the idea but have the words on the map in a separate layer than the map.

Creating the assets and Importing them into Spark AR | Week 11 - Week 12 | 4.11.20 - 11.11.20

I downloaded the floor plan from Taylor's App and begin making outlines of the map in Illustrator. I also made a simple poster to be used as 'fixed target tracker'.

Fig 11.1 Process of creating different Blocks A, B and C

Fig 11.2 Poster process

I changed the maps to show blocks B, C, and D as it is used by more students instead of Block A in terms of toilet location. Aside from that on the poster, I added a download on the app store or google play badges, a QR code that can pretend to lead to the actual website, and Taylor's logo.

Fig 11.3 Final Block B Map

Fig 11.4 Final Block C Map

Fig 11.5 Final Block D Map

Fig 11.6 Final Poster Design

I moved the poster and the maps into Spark AR and wanted to type the names of the building in each block but when I used the 2D text layer the names don't follow the target image like I wanted it to (it is on a canvas so it sticks on to the phone and not the poster).

Fig 12.1 Testing out 2D and 3D text feature

The 3D text didn't give out the image I had in my mind so I went to Figma to type out the names instead.

Fig 12.2 Typed out the building names for each block in Figma

I imported the names into Spark AR and it worked perfectly.

Fig 12.5 Process in Spark AR #1

Fig 12.5 Process in Spark AR #2

Adobe Animate Microsite | Week 13 - Week 14 | 18.11.20 - 25.11.20

For the interactive microsite, I used Figma to create the layout as it was easier to export the SVG icons. The content of the microsite had to give an introduction of the app, the objective, how it works, and where to download it. As mentioned in the requirements, I needed to keep a consistent theme and style for both the app and microsite so I used white, off white, Taylor's logo colour's and slightly maroon/dark red. I also used the poster image of the toilet as the app icon.