Application Design II-Final Project

-
08.07.2024-04.08.2024 / Week 11-Week 15
Kor Qian Qian / 0359496
Application Design II / Bachelor of Design (Hons) in Creative Media
Final Project

INSTRUCTIONS



Final Project

After done planning the animation for how the app should looks like, I start to convert it into html, css and javascript. 

The pages that I'm going to code:

  • Preloader page
  • x3 Welcoming pages
  • Log in page
  • Main page
  • Side panel
  • Notification page
  • Transfer steps page (MVP)
  • Account page
  • Apply page
  • Profile page


Preloader page

Welcome page

Main page

I created the side panel, notification page, account page, apply page and profile page all in main page html. Each section in the main page can swipe horizontally to view more function or info.

When click the hamburger icon on top left of the screen, the side panel will slide out with a blurry background and the content animated sliding in one by one.



Transfer Page

For all the transfer page, I decided to do in one html, more easier for me to animate the page transition. I fixed the step indicator and the buttons at the position, and just animate the body content, so that every page using the same buttons and step indicator. 

I learned the step indicator from this channel: https://youtu.be/8M3Kox6nO64?si=_UwY6rSY356a7afY. I felt quite smooth with having several tutorial videos from youtube, and if encountered any difficulties, we can find the answer from the comment section or from AI.

For the text input field, I set to 'type="number"', so that only able to type number in those account number field or amount field.

For the account type selection, I added a slightly scale up animation of the box when user click on any of the option.


I created a pop up panel at step 6 proceed to the last payment page for user ensure is not misclick the button. If click "back" button, the screen will still stop at step6, when click confirm, only will proceed to the last step. In the last step, the prev and next button replace with a done button.


Log In page

The header, image and the account info slide in from the top and the blue box slide in from bottom.



Upload to Netlify





Final Submission

Netlify link: app2finalproject-korqianqian.netlify.app

Walkthrough video: https://youtu.be/jxqID4POH7U


Reflection

Reflecting on my experience coding an app with HTML, CSS, and JavaScript, I initially faced many challenges, especially with JavaScript. At the beginning, I was not familiar with JavaScript and encountered numerous issues with non-functional code. Each problem required slow and careful resolution, involving persistent attempts and troubleshooting.

Despite the initial struggles, the sense of accomplishment when successfully solving a problem was immensely rewarding. Gradually, I began to understand the logic and structure behind JavaScript, improving my skills over time.

As for HTML and CSS, my previous knowledge allowed me to reinforce and solidify my foundational skills. This experience not only strengthened my grasp on HTML and CSS but also significantly enhanced my proficiency in JavaScript, making the overall journey both challenging and fulfilling.

Comments

Post a Comment

Popular posts from this blog

Advanced Interactive Design-Final Project

-
Image
23.06.2024-03.08.2024 / Week 9-Week 15 Kor Qian Qian / 0359496 Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media Final Project INSTRUCTIONS Final Project -  Completed Thematic Interactive Website In tasks 1 and 2, we have fully expressed our ideas and plans. In this final project, we will transform our prototype into a real webpage using Adobe Animate. All animations must be completed in Adobe Animate. We will integrate visual assets and refine the prototype into a complete, working, and functional product experience. Process Preloader page At first, I created the layout in Adobe Illustrator and then imported it into Adobe Animate. However, because the layer arrangement in Illustrator was crucial, I had difficulty grouping the layers correctly. Ultimately, I decided to create the layout directly in Adobe Animate. For the preloader page, I created a new file specifically for it and, a...
Read more

Advanced Interactive Design-Task 1

-
Image
24.04.2024-29.05.2024 / Week 1-Week 4 Kor Qian Qian / 0359496 Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media Task 1 INSTRUCTIONS Task 1 - Thematic Interactive Website Proposal What to do:  Fig 1.1 Requirement Brainstorming Initially, I explored food brands such as Starbucks, McDonald's, and Burger King, but these themes didn't interest me. So, I looked into many luxury brands, and finally decided to base my assignment on Jo Malone's Mother's Day collection. Jo Malone's Mother's Day collection includes various products such as perfumes, scented candles, and cosmetics. I decided to focus solely on the perfumes from the same collection for the website I'm about to create. Fig 1.2 Main product ...
Read more

Minor Project-Pink Stuff

-
Image
24.04.2024-15.08.2024 / Week 1-Week17 Kor Qian Qian / 0359496 Minor Project / Bachelor of Design (Honours) in Creative Media Pink Stuff-Pinkify Instruction Important link MIRO Board Website Prototype Final Proposal Presentation Slide Final Project Presentation Research Question Google Form Pink Stuff Week 2 - Meet Client Met with the client to gather insights about their preferences for pink-themed products. Discussed the client's expectations from the project. Aligned on the overall vision and direction for the project. Every group members give their idea and opinion for the direction of our products, I suggested pet supplies and eco products. My idea These are the ideas of the team members. All members's ideas Week 3 Decided to focus on gaming accessories as the main product line. Discussed and finalised the specific products to be featured. Planned surveys or interviews to gather user feed...
Read more