Projects/ Advanced Interactive Design

-


DST 60804 | Advanced Interactive Design

25.08.20 - 25.11.20 | week 1 - week 14

Sia Man Sheng | 0333877

Instruction

Softwares that will be taught in Advance Interactive Design class are


Adobe Animate and Spark AR Studio

Lecture

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 related event..


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 the 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


Introduction to Spark AR

Mr Lunn 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 animation and click a button that will lead to the next page. Also how to animate a button.

Project One - Interactive Screen Design

For this project, we are required to create an interactive application screen design for an online store using Adobe Animate.

Basic requirement :

  •  5 screens / pages
  • interface transitions / animations
  • working button scripting


Initially, I was brainstorming on different ideas, which is a hotpot delivery order app, an app to order and introduce a boba drink and app to order Simply Chocolate online. After that, I realize ideas here are either has an existing app or way too common to be seen in daily life.


Then, I finalized my idea on project one, which is to propose a mobile application that serves as a platform for all events to showcase their details as well as ticket buying through the app. Below shows the flowchart of this app:


I started to collect necessary images such as poster and then, I created the user interface for this mobile application in illustrator.

Some of the events highlight picture and event poster I got from Riuh in the City:








       




Working on the variation of buttons and choosing of colour scheme:





Here is the interface I created for this mobile application:








Scripting to add background colour when opening up in the webpage:




Here is the demonstration video of the final outcome:


Project Two - 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:

- using native UI button ( minimum 3 options for filter )

- using face tracker

- background replacement

- using face interaction patch


Idea: Silly Family

How: Face Distortion and 3D Instagram Effect

Theme: Using traits extract from the family member: father, mother and child


Creating the visuals:

Constructing character using basic shapes

Progression of constructing character

"Silly Mother"

"Silly Father"


“Silly Son”

Background Attempt One

Background Second Attempt

Background Option 1


Background Option 2









Small Icons will be synthesized when eyes blink

Setting the face tracker assets:

Face assets for "silly son"

Face assets for "silly mom"

Face assets for "silly dad"

Working in Spark AR for face deformation and eye blinking feature:


Final Outcome

Final Project - Catch the Quack!

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 shows AR graphic or AR map of Taylor's

+ using the logic patch, to simulate a randomiser to make a "where to eat in Taylors" 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 real-world using "Plane tracker"

+ AR gallery, that could be placed in real-world using "Plane tracker" and let the user visit a virtual exhibition


Name: Catch the Quack!

Idea: A collaboration with the previous National Rubber Duck Day in Taylor's

Theme: Taylor's unofficial mascot - duck, goose, chicken, visualize in a cute way


Executing visual on illustrator:










Making Animated GIF in After Effects







Writing Script for the blinking game



Working on Spark Ar



Microsite User Interface Design











Working on Adobe Animate


Final Outcome



Comments

Post a Comment

Popular posts from this blog

Advanced Typography- Exercises

-
Image
Advanced Typography - Exercises 26/08/19 - 09/09/19 (Week 1 - Week 3) Sia Man Sheng 0333877 LECTURE NOTES Lecture 1: Typographic Systems 05/04/19 - week 1 Today's lecture is about 8 Typographic Systems, which are prepared and presented by us on the spot. Axial: All elements are aligned either to the left or right of a single axis but the axis could be place in any position even itself id not a straight line(e.g. zig-zag, irregular shapes, diagonal etc.) Radial: All elements extend from a point of focus and can be manipulated through different approaches: emphasize, transparent radial plane, spiral, groupings and hierarchy. Dilatational: All elements expend from a single point in a circular fashion which helps in built up texture and create pattern. Categorized into two: rotate in non-objective matters & aligned to a single axis. Random: Elements appear to have no specific pattern or relationship but could be achieve through the manipulation of
Read more

Interactive Design: Landing Page Design/ Project 1

-
Image
Interactive Design: Landing Page Design/ Project 1 10/09/19 - 17/09/19 (Week 3 - Week 4) Sia Man Sheng 0333877 LECTURE NOTES Lecture 3: Introduction to Module 10/09/19 - week 3 This week's lecture is about web standards and page structures. There is 3 factors that affects the performance of a website, including hardware and software: Browsers - Different Browsers contain variation of hdml at the early stage which result in the design of a web page to be vary. (e.g: google chrome, safari, firefox) Operating system -  Windows and IOS system could affect the presenting result of a web page as well. Screen Resolution - With thousands of variation from billboard to phones, different screen resolution has been developed. Besides, we did have a discussion on the differences between a static website and a dynamic website: Static Website Which can be only edited through changing the HDML source file For example: coachella, Apple official website, etc.
Read more

Publishing Design - Final Project

-
Image
Publishing Design - Final Project 17/06/20 -15/07/20 (Week 10 - Week 14) Sia Man Sheng 0333877 INSTRUCTIONS This project required us to generate an Ebook for an iPad reading purpose (1024 x 768). As we are working on a digital publication, therefore all the visuals made in project 1 should be all animated. The iPad layout should include a navigation bar. Ipad Layout | first attempt  |  Week 10 Figure 1: First attempt/ iPad layout Animation Progression | Week 10 After arranging layers by layers in Illustrators, it is then  imported  into After Effects for animation purpose. Figure 2: Arranging layers Figure 3: Arranging layers Figure 4: Animation progress Figure 5: Animation progress Figure 6: Animation progress Figure 7: Animated GIF (week 100 Figure 8: Animated GIF (week 10) Figure 9: Animated GIF (week 10) Figure 10: Animated GIF (week 10) Figure 11: Animated GIF (week 10)
Read more