Advanced Interactive Design

Advanced Interactive Design - 202003

04.16.2020

Joseph (0336620)

Exercise

Week 1

We started with the MIB briefing, and then we proceeded to learning the Adobe Animate. Unfortunately, I haven't got the software yet. So I proceeded to take notes based on what our lecturer said about the software. Mr.Lun then proceeded to explaining our project one, which is actually shocking because he said that its due week 5 and we were pretty much rushing things. Our project was that we have to create an animation flow for a certain online shop.

So for this weeks objective we were told to update our blogs, and start working on what we wanna animate (online store or service). After that we are expected to make an animation workflow and a wireframe for the week.

So for my wireframe, I didn't exactly know what sort of apps or services or online stores that I wanna do, we were told to gain inspiration from a website called UI Movement and sort go through what sort of services that we wanna do. So upon thinking I decided that I wanna do Food Recipe app where people can post their recipes on the app.

I don't have a plan upon doing this so I'm mostly just winging it and hope for the best. I made some notes on what the UI is like and drew a few things thinking about what the animation is going to be like. In the meantime, we were also asked to learn and get used to using Adobe Animate, which is unfortunate because I only got the software on Tuesday (04.21.20) which sucks because I'm stressed out doing other assignments. Well now I'm probably gonna miss a lot of what the lecturer has to say and really start watching videos about Adobe Animate basics and catch up.

Week 2

We started week 2 with learning more in depth Adobe Animate lessons, it was hard for me to keep up with the lecturer, so I needed to rewatch most of the videos that he recorded and thats mostly about Adobe Animate. After the lessons to Adobe Animate, we were ask to practice Adobe Animate and at the same time we have consultation with Mr. Lun. I didn't have my plans sorted out yet but I had a few ideas to work on however I didn't have any reference. Eventually I made a flow chart for a pie shop and ask for feedback regarding the flow chart. Mr. Lun advised me to start on designing the UI based on the flow chart.

Fig 1.1 Flow Chart

Based on the flow chart, I made an UI based on ordering a pie shop online, although its not done yet there's still more to do .

Fig 1.2 Ordering Section

Fig 1.3 Payment Section

Fig 1.4 Payment Section

Fig 1.5 After Payment Screen.

So far there's more to be done, like including the address for delivery after ordering. That has to be included, while learning adobe animate and start on animating my project 1. I will try to improve on the design more because it really looks empty in my opinion. I can't tell what it is but I know it needs improvement.

Project 2 - Spark AR Ideation

For this project we are supposed to create an AR filter, the requirements include

- Usage of Native UI Picker

- Background Replacement

- Face/Head Tracker

For this week we are supposed to do our ideation for the AR filter, for my idea I had this idea of creating a Minecraft head filter for the AR filters. Especially iconic mobs from the Minecraft world, this is created just for fun. These mobs include :

1.) Villager

Fig 1.6 Villager

2.) Creeper

Fig 1.7 Creeper

3.) Wandering Trader

Fig 1.8 Trader

The next step for me was to actually create the 3D models, those are pictures above are just reference. Eventually, I went with Steve, Villager, and a Creeper. I then continued to find tutorials on blender and used it to work on my 3D Model.

Fig 1.9 Steve Head

Fig 2.0 Villager Head

The next step was to implement them onto Spark AR. Here is the process :

Fig 2.1 Creeper Head

Fig 2.2 Steve

Fig 2.3 Villager

I created each of the models and just put it in Spark AR, but then it seemed a little bit bland. The project required a background to be placed so that really helped. I added some extra effects, I added some small mini heads of the models to fly around their heads.

Final Project :

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 requirement.

That is the brief that's being given by Mr. Lun. For this project since there are 2 main sections of the project I focused on the microsite first. Since it was for Taylors I thought about following the Taylor's website for color palette. I started to build the microsite on Illustrator.

Fig 2.4 Design 1

Fig 2.5 Design 2

Those 2 pictures above are the initial designs for the microsite, I looked at it twice and there quite a few problems that I spotted :

1.) There was a lack of the Taylor's Red and black going on.

2.) The picture being chosen is very depressing looking.

So I asked some friends for advice to see what they recommend on changing and went to work with the refinements.

Fig 2.6 Design 3

This is the refinement that I made, and I figured that it looked better than the other ones that I made before so I decided to stick with this design and just continue on working on the other pages with this theme. These are the rest of the pages :

Fig 2.7 Home/About Page

Fig 2.8 Merch Page

Fig 2.9 How It Works Page

The next step is animating the microsite, for this I used Adobe Animate and just copy pasted the elements from Adobe Illustrator and animated them with simple animations. There's another download page that I made from Adobe Animate.

Fig 3.0 Download Page

Fig 3.1 Adobe Animate

With that done I proceeded to work on the AR Tracker, I decided to make some sort of a new logo for Taylor's Culinary students since in the Taylor's Merchandise shop most of it is just utensils and uniforms. The idea is that by tracking the Taylor's Logo, you would get some sort of graphic that appears during scanning. This was the first design that I made.

Fig 3.2 First Design

After doing this design I looked at it more and thought that something was missing from the design, so I looked through some other university designs and decided to add in the Taylor's University name to the design.

Fig 3.3 Second Design

With the design done the only thing left to do is implement all of this to Spark AR, for implementing it I needed to split the elements individually and here are the elements.