Application Design II - Final Project & E-portfolio

31.05.2023 - 05.07.2023 ( Week 9 - Week 14 ) 

Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative Media
Application Design II
Final Project & E-portfolio

---

TASK

Instructions

Final Project – Completed App  – 30 % 
Students will synthesize the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience.   

E-Portfolio - 10 % 
Students describe and reflect on their social competencies within the design studio context, supported by evidence.  Reflect on how to empathize with others within group settings, interact positively within a team and foster stable and harmonious relationships for productive teamwork. The reflective writing is part of the TGCP. 

Progressions

For this final task, I worked on it using Visual Studio Code. First, I export any image assets I need such as icons from Figma. Then I created a folder for html and css files not forgetting also with a folder to accommodate existing images. Once that's done, I then start working on its HTML and CSS. I work on each page one by one by turning off the previous page by using display none so that the previous page does not appear. For example for the onBoarding page below.

For the font, I can't use google fonts as a reference, the font I use is TT Norm. So I downloaded the font file and connected it in css as follows.

Not to forget, I also included GSAP and connected the CSS in the head

After finishing working on the HTML and CSS I then started working on the Javascript using GSAP to animate it.

I put each function into the button in html.

When finished, I uploaded the file to Netlify and here is the link.

https://appdesignii-bcamobile.netlify.app/

---

REFLECTIONS

From task 1 to this one, this task is the task that takes the longest. I have to keep looking for the error where and find a way to fix it. Working on HTML and CSS is not as bad as when working on the GSAP because for animation I have to go through each page to check whether the animation works well or not. While HTML and CSS need not be so. I get frustrated when I have to redo the page to check for broken animations and it takes a while. But other than that, when I managed to finish it, I became very relieved because I had to complete tasks from other modules that were difficult as well.