Application Design 2 / Final Project

  

31.10.2022 - 12.9.2022  (Week 11 - 15)
Lew Se Win / 0347637 / Bachelor of Design (Hons) in Creative Media
Application Design 2
Final Project - Completed App

---

TUTORIAL 

Week 12

We continued to learn about GSAP; today we learned about timelines. Besides, we also learned about the GSAP timeline implemented with DOM. 

Figure 12.0 GSAP timeline

---

INSTRUCTION 

We would be combining the previous task 2 with the final project due to our poor class progress. We will now need develop the app using web technologies such as HTML, CSS, and Javascript.

Final Project - Completed App

Figure 1.0 Interactive Prototype

Look back to the interactive prototype I created in project 2, I started by creating the pages based on my designs in Figma using HTML and CSS. I used Adobe Dreamweaver because it allow live view while I am writing the codes. 

I normally will use <div> to group or differentiate the different parts.

Figure 1.1 Progress - splash screen (html)

Figure 1.2 Progress - home page (css)

While coding the html and css, for home page, I realised that my elements would need to implement horizontal scroll. Hence, I consulted Mr. Razif on it. While waiting for his reply, I continue on coding the other pages. 

Figure 1.3 Setting up product page (html)

Figure 1.3 Setting up order summary page (css)

After I completed all the html and css parts, I now only started to work on the interactivity and animation part of the app. I did not do it together with html and css because javaScript are required and I am not familiar with it. 

I started by implementing simple GSAP timeline to create animation by changing the position, scale, opacity as well as implementing easing for my pages. 

Figure 1.4 GSAP Progress (timeline)

Figure 1.5 GSAP Progress (multiple timeline)

Besides animation, I also created the horizontally controllable section using GSAP, following Mr. Razif's tutorial. 

Figure 1.6 GSAP Progress (draggable)

Figure 1.7 Progress DOM Methods

Figure 1.8 Progress - Quantity indicator

Next, I worked on screen changing. This is the time where I faced some problems and I watched some online tutorials and luckily managed to solve it. 

To change screen after delay, I used different GSAP timeline and added delay to it. 

Figure 2.0 After Delay Page Changing

Moving on are the buttons, I used img src changing to check the button.

Figure 2.1 Check button script

I then revised my form validation because previously I had done form validation with alert and I now realise that it is improper to use in an app.

Figure 2.2 Revised form validation

Some animation and interaction planned for Project 2 were not included in this version because I realise the animation in the app should be more consistent. Another reason for this could then be a lack of technical skill in coding. I only managed to complete 8 pages in total and will be continue working after this to complete the other pages. 

Figure 3.0 Video walkthrough

After that, I continued to work on my app design 2 by completing other pages and fixing some parts from my previous submission. 

Figure 4.0 Check Button Fixed (using DOM method)

Figure 4.1 Product Details Page

Figure 4.2 Pop Up Grocery List

Final Submission

Figure 5.0 Final Grocey Video Walkthrough

---

REFLECTION 

I'd say I enjoy working on this project, but dealing with the codes sometime is torturous because even a minor mistake can cause the entire thing to stop working. Furthermore, this module is on Monday, and unfortunately, there are many Monday public holidays this semester, resulting in poor class progress. In comparison to other modules, I would say that I did not learn much in class, and I am heavily reliant on online tutorials to complete the project. Even though it is a simple one, I am happy that I have become more familiar with javaScript now. I also learned that I should be more proactive in getting started on the project so that I don't end up doing last-minute work.