Final Project

-

26 December 2024
Simon Ko Jing Liang
0364359
Bachelor of Design (HONS) in Creative Media


INSTRUCTION



Fig 1
INSTRUCTION - PDF

Final Project

After I had done the project 3 which is the Interactive Component Design & Development. I combined them together as an useable application.


Most of the animation and transition I put in the Onboarding and Logo transition. For the micro animation is made that the icon and buttons can change color and their scale when the users click and hover.

Logo HTML + JAVASCRIPT

Fig 2
Logo HTML + JAVASCRIPT

Onboarding page HTML + JAVASCRIPT

Fig 3
Onboarding HTML + JAVASCRIPT

    

Welcome HTML + JAVASCRIPT


Fig 4
Welcome HTML + JAVASCRIPT

CSS 


Fig 5
CSS



*Dimensions: Iphone 12 Pro for best perform

Presentation Video


Fig 6
Presentation Video


App Go Through


Fig 7
App Walk Through 

Reflection

Through this project, from the project 1 to final project, I had learnt about making an application by using HTML CSS & Javascript not an easy work. Starting from the first project, I reflected and observed the mobile application completed last semester. From then on, during the process of reflection and observation, I discovered some subtle problems and made improvements. 

The next step is to create a visual design for the improved mobile phone application and add some interactive buttons, transitions and so on that can stimulate the user's organs. Although this process looks simple, it is still a bit difficult to maintain a certain consistency for each interaction design. For me, the interaction design of the transition part is more difficult because my idea is that the transition interaction needs to be connected with the software so that users know what they are using when they start using it.

After that is to develop the interactive component through using HTML CSS and Javascript. This part also a bit of difficult because I need to develop the components followed by the visual I designed. In this process, I redevelop twice because of the problems such as the functions don't work and I also asked AI to help me found the problems and I also followed the step to solve the problems but still not working so I redeveloped them again.

For the final project is more simple because just need to connect every elements and every pages of the application. Through the project, I had learnt more about coding language which is Javascript. Even HTML and CSS can develop but Javascript can do more functions and elements to make the application more interesting.