Advanced Interactive Design - Project 1 : Interactive Web Application

31.08.2022 -  28.09.2022 ( Week 1 - Week 5 ) 

Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative Media
Advanced Interactive Design
Project 1 : Interactive Web Application

---

INSTRUCTIONS

---

TASK 

In the first week, Mr. Razif gave a briefing on the Advanced Interactive Design module. We were explained that there would be 3 projects. The first project is making an application on a mobile phone, the second project is making an Instagram filter and the final project is making a web design. Then in the weeks that followed, Mr. Razif provides tutorials on how to use Adobe Animate. I felt Adobe Animate was so foreign, that at first I still had difficulty following the tutorial. And these are some screenshots of the existing exercises.

Figure 2.1 Practice 1


Figure 2.2 Practice 2


Figure 2.3 Practice 3


Figure 2.4 Practice 4

Figure 2.5 Practice 5 (Image Selector)

Figure 2.6 Practice 5 (Items)

For project 1 we are asked to create a (prototype) interactive application for an online store. For example, an online ticket booking system for cinema/football matches, a restaurant reservation system with an online menu, or a pizza ordering system. I decided to create a made-up bag store named Beebee Pops. First I made the logo in Illustrator and then I edit the mock-up for the bags using Photoshop.

Figure 2.7 Baguette Bag Mock-up

Figure 2.8 Sling Bag Mock-up

Figure 2.9 Tote Bag Mock-up

Then I worked on the UI design using photoshop. I create artboards for each of the screens that I want to create later on Adobe Animate.

Figure 2.10 UI Design on Adobe Photoshop

After working on Adobe Photoshop, I move to Adobe Animate and start to import all of the assets from Adobe Photoshop.

Figure 2.11 Progress on Adobe Animate

After finishing work, I saw a tutorial from Mr. Razif about how to publish the animated file and what needs to be submitted.

Drive Link : https://drive.google.com/drive/folders/1c2G6SRC3hbLKmWACAzhWjGDOCKZ0Uaaf?usp=sharing

---

REFLECTIONS

I thought that at first, the advanced interactive module would have coding that was more difficult than the interactive design module, but apparently not. We did work on this module using Adobe Animate and Spark AR. Coding is still there, but less. I'm confused why we don't use Figma or Adobe XD to design apps and the web. But in this module, we have to learn how to animate an interactive design application with the user. I'm having trouble working on Project 1, my application keeps getting errors where buttons can't be pressed or movie clips can't be played. But when I finished this project I felt very relieved.