Advance Interactive Design

-

 


26/08/20 - 3/12/20 (WEEK 1 - WEEK 15 )
Qaezie Ramlan (0332981)
Digital & Social Media Comms

Lecture Notes

Week 1 - Briefing
Mr Lun briefed us on the module and what to expect from this module. HE also showed some of the senior's work.

Week 2 - Tutorial on Adobe Animate
Mr Lun gave us a tutorial on how to use Adobe Animate and the basics of the software. He taught us how to create pages, buttons, animate shapes and key in scripts for different functions.

Instructions


Project 1

Week 1 - Week 4

For this project we were asked to use Adobe Animate to create a prototype UI animation for a service application. For my service app, I've decided to recreate Ikea's App & the interface.
Basic requirement :
- 5 screens / pages
- interface transitions / animations
- working button scripting

I began my execution by designing the wireframe on Adobe Illustrator.

Fig 1.1 Fidelity wireframe on Adobe Illustrator

Fig 1.2 Fidelity wireframe on Adobe Illustrator

Fig 1.3 Fidelity wireframe on Adobe Illustrator


After finalising the design, I moved on my execution to Adobe Animate.

Fig 1.4 Process on Adobe Animate

Fig 1.5 Process on Adobe Animate

Fig 1.6 Process on Adobe Animate

Submission

Project 2

Week 5 - Week 8

For this project we were required to create a filter using Spark Ar, following is the basic requirements for this project.

Basic requirement :
- using native ui button ( minimum 3 options for filter )
- using face tracker
- background replacement
- using face interaction patch
My idea to create a filter that would go along with an event that i've created for my Creative Brand Strategy Class.
Fig 2.1 Background, Button & rotating head sign design on Adobe Illustrator


Week 5 - Week 8
I then proceed to execute my filter on Spark AR


Fig 2.2 Spark Ar process

Fig 2.3 Patch Editor in Spark Ar

Fig 2.4 Patch Editor in Spark Ar

Fig 2.5 Spark Ar process


Submission




Final Project

Week 8 - Week 11

For this final project we were assigned to create a microsite and prototype ar application of a campaign for Taylor's University. We were to create the microsite using Adobe Animate and the AR application with Spark AR.

Final project are divided into two main area.
- Spark AR app 
- Adobe Animate 
Spark AR app 
- An AR app about Taylors You can do any kind of app for Taylors University.


Adobe Animate Microsite 
- A microsite about the AR app you did 
- Objective of the app 
- Where to download 
- Step to use the app, etc 
- No number of page requirement.


My idea was to create a game that would pick a place for you to eat within the campus. It's simple and not too complex. 

Face Filter

I began my execution by designing the cards with names of restaurants on Adobe Illustrator.

Fig 3.1 Card design on Adobe Illustrator

Fig 3.2 Card design on Adobe Illustrator


From there I brought my assets to Spark AR

Fig 3.3 Applying illustrator to face


Fig 3.4 Process on Spark Ar

Fig 3.5 Adding cards design to animation sequence

Fig 3.6 Patch settings


Micro Site

After settling the filter i then moved on to designing my microsite on Ai. 

Fig 3.7 Microsite design in Ai

Fig 3.8 Microsite design in Ai

Fig 3.9 Microsite design in Ai

The mock up was done up in Photoshop

Fig 3.9 Microsite button hover design in Ai

Submission

Face Filter:

Microsite:

Comments

Post a Comment

Popular posts from this blog

Advance Typography - Final Compilation & Reflection

-
Image
Week 35 - Week 48 Qaezie Ayeman Ramlan (0332981) Advance Typography - Final Compilation & Reflection Instructions Compilation Links Exercises Project 1 - Troublemakers Manifesto Colloquium Project 2 - Troublemakers Manifesto Colloquium Event Collateral Final Project - Design Exploration Typographic System Fig 1.1 Axial Fig 1.2 Radial Fig 1.3 Dialatational Fig 1.4 Random Fig 1.5  Grid Fig 1.6 Modular Fig 1.7 Tarnsitional Fig 1.8 Bilateral Final PDF Compilation: Type & Play (Part 1) Fig 2.1 Letter "F" Fig 2.2 Letter "V" Fig 2.3 Letter "Y" Fig 2.4 Letter "I" Fig 2.5 Final letter 'V' Fig 2.6 Final letter 'F' Fig 2.7 Final letter 'Y' Fig 2.8 Final letter 'I' Fig 2.9 Final letter 'L' Final PDF Compilation : ...
Read more

Digital & Social Media Comms

-
Image
  25/08/20 - 2/12/20 (WEEK 1 - WEEK 15 ) Qaezie Ramlan (0332981) Digital & Social Media Comms Lecture Notes Week 1 This week Mr Asrizal briefed us on what to expect for this module. He also did a lecture on what is analytics. Week 2  Data collection Week 3 Today we're lectured on  Web Analytics 101 and also briefed for our project. We are meant to dissect the current Taylors University wireframes and analyse social media platforms to figure the best method to drive people to Taylors Uni Youtube Channel. How to promote, grow engagement and hype for Taylors. Week 4  Empathy Mapping. We had a lecture on how we can go about filling in the empathy mapping chart. We were introduced on the first of the 4 len's which is: Consumer. In which lies the persona who interacts and participates with the brand. They are our core consumers, people who we are trying to relate to. Persona's are fictional characters, however, their characteristics and details are not and are not...
Read more

Creative Brand Strategy - Final Project (Project 3)

-
Image
  12/10/20 - 04/12/20 (WEEK 8 - WEEK 15) Qaezie Ramlan (0332981) Creative Brand Strategy Project 3 - Final Project Instruction Project 3 Based on Project 1 and 2, students are required to create an e-brand book for the chosen campaign / event branding. Additionally, students are to apply the proposed branding strategy to at least three (3) applications (creativity and relevancy is crucial) as well as produce at least three (3) impression artworks of how the brand strategy will be applied(think customer journey and engagement). Last but not least, you are to create a brand promotional video that is 30 seconds but no longer than one (1) Minute. Week 8 - 12  I started the project with the creation of Adobe Illustrator's main art visuals for the case. I moved on to designing the poster for the event after finalising the main artwork. It took me a while to design and assemble the poster. I have made sure that for the poster, the call to action is clear. Fig 1.1 First Attempt at Key...
Read more