Labels

Advanced Interactive Design / Project 1

31.08.2022 - 30.10.2022 (Week 1 - Week 9)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design
Project 1: Interactive Web Application

LECTURES

Fig 1.0: Thumbnail

INSTRUCTIONS

Task 1: Interactive Web Application

Interactive Application Screen Design for Online Store
An interactive application is an application that allows users to interact with audiovisual information via an effective screen design layout. Students are required to create a (prototype) interactive multimedia application for an online store.

*Software Requirement:
Adobe Animate

Students are required 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. Students are only required to develop the front-end interaction, UI design, scripting, and animation. Backend programming is not required as it is meant to be a prototype.
Interactive applications should be able to communicate to the audience about the site's goals and objectives. Users should be able to navigate and use the applications without any difficulties.

For this project, I decided to choose a sunglasses brand so it can be easier for me to do the second project later. The sunglasses brand is a popular South Korean sunglasses brand named Gentle Monster.

I created 6 pages, or technically 5 pages, and one additional page which is a pop-up page. The pages are the homepage, product collection page, product purchase page, additional pop-up page for purchasing the product, and the payment successful page. Below is a glimpse of my work and its progression. I made the design first on Adobe Illustrator and then at last I copy paste it to Animate.

Fig 2.1: Layout-making process

Here's all the page layout I made on Adobe Illustrator.

Fig 2.3: Opening page

Fig 2.4: Landing page

Fig 2.5: 'Product List' page

Fig 2.6: 'Product Details' page

Fig 2.7: 'Add to Bag' page

Fig 2.8: 'Payment Success' page

Actually, I made the design in iPhone X size, but on Adobe Animate, I chose the Android 9:16 size instead. And here's my animating process.

Fig 2.9: Animating process

This is the walkthrough video of the Gentle Monster Mobile App.


And below is the Google Drive link to access my Animate file.
https://drive.google.com/drive/folders/1sesdhINe8xdblHv7XIE7e6y-W4eh_FMT?usp=share_link

REFLECTIONS

Actually, this is my very first time doing work in Adobe Animate, so this platform is very new to me. Since I'm a beginner, I really have 0 knowledge of the platform. However, during the physical class on campus, I learnt a lot from the lecturer to operate the platform. When doing this project, I also sought the tutorial on youtube to enhance my skill. It was a bit depressing, especially with the codes. I don't know why my button can't be clicked after I published the file. I searched everywhere to look for the solution because I have tried the one given by the lecturer, but it still stuck there. And finally, after many trials, it works. HOWEVER, this one really drives me stressed, sometimes it can be clicked but sometimes also cannot. This one I can't find the solution, so I assume it is just an error because it may work after you refresh the page several times. Anyways, I'm glad that I can finish this project with a satisfying outcome even though there were so many hurdles during the progress.