Advanced Interactive Design

DST 60804 | Advanced Interactive Design
Week 15 - Week 28
Sangeetha A/P V Supramaniam | 0339644

Instructions:

Advance Interactive Design Discord Channel
https://discord.gg/FbhNrPS

Project and exercise submission will be keep track via Google Classroom

Alternatively a Facebook group is create as well
https://www.facebook.com/groups/513845739286600/

Software that will be teach in Advance Interactive Design class are
Adobe Animate and Spark AR Studio

Lectures

Week 1 (16/4)
Introduction to Module
Mr Lun took us through the Module Information Booklet and highlighted on the projects we would be working on. Starting with Project 1 worth 30% (w1 - w5) which will be focusing on the usage of Adobe Animate. We are meant to create screen design for an interactive online store using the software and scripting. Project 2 worth 30% (w6 - w10) focuses on the usage of Spark AR. We will be producing Facebook/Instagram filters or even simulations for an online store as you test out products. Project 3 worth 40% (w10 - w14) uses the combination of both software to produce an interface for Taylors Merchandise Store.

Figure: Here is a look at our online class on Discord as Mr Lun explains Project 1.

Introduction to Adobe Animate
We were introduced to the software and Mr Lun explained the basics of its usage. He explained regarding Tweening (shape, motion and classic) and within Classic tween consists of movie clip, button and graphic. Some key takeaways are:
F5 - Add Frame
SHIFT F5 - Remove Frame
F6 - Add Key Frame
F7 - Add Empty Key Frame

Figure: We were given advice and inspiration ( https://uimovement.com/) on Project 1.

Week 2 (23/4)
Introduction to Project flow and Scripting
Mr Lun briefed us further on Project 1. The resolution for Project 1 is 720x1280.
We would need a basic flowchart and wireframe to ensure we have enough content in the blog (which is 10% of total scores). Regarding the scripting, we were taught how to stop an animation and click a button that will lead to the next page. Also how to animate a button.

Figure: Question asked during lecture and answered with step by step guide.

Week 3 (30/4)
Scripting for Project 1
Mr Lun taught us how to create 'date and time booking' and 'quantity increase/decrease'.

Figure: File sent to show how the 'quantity increase/decrease' works.

Week 4 (07/5)
No lecture due to public holiday (Wesak Day).

Week 5 (14/5)
Submission preparation for Project 1.

Week 6 (21/5)
Project 2 Briefing.
Basic requirement - using native ui button (3 options for filter) - using face tracker - background replacement **Record a video of you(or someone) using the filter **Zip / archive your project folder, upload it and submit the link on Google Classroom.

Week 7 (28/5)
Face mesh, Environment Map & Background.

Week 8 (04/6)
Project 2 Proposal.
Provide a simple proposal on the topic/theme for AR filter, update in blog and review with Mr Lun next week. The "technical" requirement for project 2 are: - usage of native ui picker (button option) - background replacement - face/head tracker Some ideas to play with: - campaign awareness - online shop (testing different glasses, lipstick, eyemakeup) - selfie/fun filter - mask

Week 9 (11/6)
Extension of Project 2 deadline.
New Project 2 deadline - 25 June 2020 New Final Project deadline - 23 July 2020

Recap of tutorials based on Spark AR update.

Week 10 (18/6)
Recap of tutorials and Project 2 consultations.
Project 3 briefing.

Week 11 (25/6)
Project 2 submission.

Week 12 (02/7)
Project 3 brief recap.

Project 1

Week 1 - Week 7
Interactive Application Screen Design for Online Store
The business I decided to go with is an online store app called Fresh Fruits. Below are my sketches and wireframes for the screen design.

Figure: A rough sketch of the design and wireframe of the Fresh Fruits online store app.

On week 2, I was trying to save my file and view it via HTML, however, the HTML file would not play. After consulting with Mr Lun, we discovered the root of the issue and rectified it.

Figure: The solution to the problem.

If you are using Animate CC2020. Go to Publish Settings, image settings, change the "Texture" to "Image Assets". This is to prevent Adobe Animate from converting your vector graphic into image, which cause problem on buttons.

On week 3, I showed Mr Lun the flowchart of my app interface. Also, I consulted him on the adding to cart page and the flow from there to the cart page. His response is shown below.

Figure: Flowchart

Figure: Advice on the add to cart option and flow to the cart page.

Below shows the compiled idea, design moodboard, user interface design and visual assets that includes logo, imagery and illustrations that are used for the Fresh Fruits Online Store.

Final compilation in a form of a video shown below:

Project 2

Week 7 - Week 11
Augmented Reality (AR) Filter
We need to do up a proposal on the topic/theme that we want for an AR filter.
The "technical" requirement for project 2 are:- usage of native ui picker (button option)- background replacement- face/head tracker Some ideas you can play with:- campaign awareness- online shop (testing different glasses, lipstick, eyemakeup)- selfie/fun filter- mask.

Idea: Modern Princess Fun Filter
Theme: Female empowerment and positive vibes.
To feel like a princess everyday through the usage of the filter. Princess characters chosen based on Disney. Also, the choice of princesses demand their strong personalities and character. Furthermore, a variation of their backgrounds so to provide a diverse choice e.g: Jasmine, Mulan, Tiana and Merida.

Feedback: Mr Lun approved my idea but also advised not to overdo it and limit to 3/4 options.

Image: Setting the face tracker asset. There are four different variation of makeup that was created.

Image: The first thing i set out to do was set the backgrounds for the filter based on the respective princess environments from which they cam from. Initial background options were images, however, it dd not jive well with the overall look therefore the switch to vector based.

Image: Saving face tracker assets as PNG to be placed on Spark AR.

Image: Spark AR work in progress

Final compilation: Below shows the compiled idea, design moodboard, filter design and visual assets that includes face assets, textures, background imagery and illustrations that are used for the AR filter.

Final Project

Week 11 - Week 14
Taylor's Merchandise AR App
Using both Adobe Animate and Spark AR to create a microsite that leads to a filter. The process includes the user to scan the Taylor’s logo on the merchandise to activate the AR engagement.

Proposal:

Feedback:
Good to proceed to do a test. The log alone might not be trackable. Consider putting the shapes around to make it more so.

Image: The colour pallete used for the design of notebook, website and filter.
In order to ensure similar tone and manner across the channels and
resonates with the Taylor's brand.

Image: I designed a new notebook design that will carry on to set the art direction
of the microsite and filter. Emphasizing on the shapes, sizes and textures.