ADVANCED INTERACTIVE DESIGN - PROJECT 1

26/08/20 - /09/20 (Week 1 - Week 4)
Neoh Kar Yan (0339338)
Project 1

---

LECTURE NOTES

Lecture 1: Introduction to Advanced Interactive Design

26/08/20 (Week 1)

Mr. Lun briefed us about the module and explained to us about each project requirement. He also showed us a few samples of our seniors work. 

Lecture 2: Tutorial on Adobe Animate

02/09/20 (Week 2)

Mr. Lun walked through step by step on Adobe Animate and the basics of what it takes to start project 1. He taught us how to create pages, buttons, animate shapes, and key in scripts for different functions.

Fig 1.1: Adobe Animate tutorial

---

INSTRUCTIONS

---

PROJECT 1

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

I decided to base my application screen design on a skincare store. The brand I chose was Aesop as I really like the look and feel of the brand products.

I started collecting the resources I needed such as the skincare product images. Then began to design the assets in Adobe Illustrator. 

Fig 1.2: Process of designing the wireframes #1

I designed the pages one by one and making sure every page looks consistent with the spacing, margins, button size, etc. Next, I proceeded to separate the assets into their respective layers and artboards. 

Fig 1.3: Process of designing the wireframes #2

Fig 1.4: Separating the assets into their respective artboards and layers

Final Wireframe Assets:

Fig 1.5: Final Wireframes #1

Fig 1.5: Final Wireframes #2

Once I'm done with the design, I exported everything and continued my project in Adobe Animate.

Fig 1.5: Process in Adobe Animate

Final Submission: