Advanced Interactive Design - Final Project
18.06.20 - 17.07.20 (Week 10 - Week 14)
Tamara Audrey Saputra (0335846)
Advanced Interactive Design
Final Project
Instruction
Final Project
Week 10 | Proposal
In this project, we are expected to come out with both an AR app and a website that introduces the app. Below are the requirements for this project:
Final project are divided into two main area:
Final project are divided into two main area:
- Spark AR app
- Adobe Animate Microsite
Spark AR app:
An AR app for Taylors Merchandise Shop
- You can pick one merchandise from their website or design a completely new merchandise for them https://www.taylorsmerchandiseshop.com/
- Must use "Fixed Target Tracker" for logo/poster tracking.
- Only one merchandise option is needed (for example, 1 notepad design) This is due to the limitation of Spark AR couldn't track multiple logo
- -However, you can still use Native UI Picker, if you could think of creative way to use them.
Adobe Animate Microsite:
- A microsite about the AR app you did for Taylors Merchandise Shop - Some page/section idea that you can use (no need to do all, if you have better idea not in this list, you can include them as well) -
- Intro about the app
- 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.
Proposal Deck
Below is the proposal for the Final Project. It was directly approved and I proceed to work on it.Week 11-12 | AR Spark Studio
For the AR app, I first made the target tracker design which is supposed to be printed on a carton box that will be given out to new students on their first orientation day. It was inspired by how on my first day Taylor's gave us a goodie bag filled with mostly their merch. And so I thought it would be cool if they come in a starter-pack box type filled with their merch and new-normal kit.
This is the mock-up I made with the first design attempt:
I then tried it in AR spark to check if it is scannable, it turns out that the design lacks patterns and sharp edges that would help the system to detect the surface. Below is the design iterations that I did hoping that it would be more detectable:
And finally, I decided to stick with this design since it has more contrast and sharp edges:
As for the pop-up objects, all of them are created in Adobe Illustrator. Below is the process of it.
I also planned to add a running text type of element to the AR, so I created this animation sequence that welcomes new students.
After all of the elements are done, I proceed to export them to the Spark AR Studio. In Spark AR Studio, I place them on top of a Fixed Target Tracker layer and added loop animation to them. Mr. Lun told me to make more layers in order to create that parallax effect and also to incorporate animations into the layers.
This is the mock-up I made with the first design attempt:
 |
| fig 1: merch mock-up |
I then tried it in AR spark to check if it is scannable, it turns out that the design lacks patterns and sharp edges that would help the system to detect the surface. Below is the design iterations that I did hoping that it would be more detectable:
 |
| fig 2: attempt 1 |
 |
| fig 3: attempt 2 |
 |
| fig 3: attempt 4 |
And finally, I decided to stick with this design since it has more contrast and sharp edges:
 |
| fig 4: final attempt |
As for the pop-up objects, all of them are created in Adobe Illustrator. Below is the process of it.
 |
| fig 5: making assets in Illustrator |
I also planned to add a running text type of element to the AR, so I created this animation sequence that welcomes new students.
 |
| fig 6: making assets in Illustrator |
After all of the elements are done, I proceed to export them to the Spark AR Studio. In Spark AR Studio, I place them on top of a Fixed Target Tracker layer and added loop animation to them. Mr. Lun told me to make more layers in order to create that parallax effect and also to incorporate animations into the layers.
 |
| fig 7: the process in Spark AR Studio |
 |
| fig 8: the process in Spark AR Studio |
Week 13-14 | Adobe Animate
For the interactive microsite, I first created it in Illustrator to know what kind of layout will work. The microsite introduces what the app is about, how it works, and where to download them. To keep both the AR and Animate looking consistent, I stick to the color black, white, and red. I also tried to adopt the elements that were used in the AR to the microsite.
 |
| fig 10: layout in Illustrator |
 |
| fig 11: layout in Illustrator |
 |
| fig 12: layout in Illustrator |
After that, I translated the design in Adobe Animate again and added all of the animations.
 |
| fig 13: process in Adobe Animate |
 |
| fig 14: process in Adobe Animate |
After I did all of the pages and the scripts, I asked for Mr. Lun's feedback. He suggested adding a section talking about Taylor's Merch.
I looked at Taylor's merch website and decided to include the section about their stationery merch.
 |
| fig 15: Taylor's Merch website |
I downloaded their photos and changed the background to black in Photoshop. From there, I exported them again to Adobe Animate and adjusted the previous navigation animations.
 |
| fig 16: the process of adding merch section in Adobe Animate |
Final Outcome
Spark AR App
Youtube Link: https://www.youtube.com/watch?v=8bAFPB2-u5M
Adobe Animate Microsite
Youtube Link: https://youtu.be/cFnaLsNHG6E
Comments
Post a Comment