Labels

Application Design II Final Project

 24/9/2024-3/1/2025 Week 1 - Week 14

Wong Kai Xin / 0353027

Application Design II / Bachelor of Design in Creative Media / The Design School

Final Project

INSTRUCTIONS


FINAL PROJECT

After gathering my interactive components from task 3, I tried bringing them to life in Dreamweaver using html, css and jvs. Although I didn't managed to use all of my interactive components, I still tried my best to do whatever I can. 


Interactive components
1. onboarding pages animation
- using the move in as well as ease




2. interactive login page
- i made the option of typing in your password visibly or hide it according to the users' preference

initially I used the emojis 👁️ 🔒 ,  but for the final look, I changed to icons for a more nicer look overall.


3. interactive navigation bar
- when clicked, 
the logo will change color (indicating which page you are currently on)
                                                   + 
words will appear (to let users know what each logo stands for)


initially my plan was to do the ordering process, however I faced an issues with my file. My "menu button" cant seem to direct me to my "menu page", therefore I can't add the following interactive components into my final flow.
 
Interactive components I didn't manage to include: 
1. order confirmation page
- the highlight here is the dropdown menu for the payment method, the buttons change color as well when clicked. I also changed the icons from task 3 to the same one as the current ones I am using




2. favorites page
- the heart changes color, as well as slightly enlarges when clicked




3. pre-loader
- i followed a tutorial on youtube on how to make a simple pre-loader using html css and jvs



html css and jvs code from tutorial of preloader

4. track order
- this is incomplete but initially I wanted to included the track order page as well. The flow of the process was quite rigid and not smooth so I would improve it by adding a smooth animation next time




Current walkthrough (will update if i manage to fix the menu button problem)

flow displayed: 
  1. onboarding screen 1
  2. onboarding screen 2
  3. onboarding screen 3
  4. login or register page
  5. login page
  6. home page



Html css jvs work proof




REFLECTION

This exercise has been quite a journey. It started with a seemingly simple task - making a button navigate to another page. But as I delved deeper, I encountered a roadblocks.

Initially, I had it all planned out with a flow. But, things didn't work out and it was really frustrating when the code does not work, resulting into me being impatient. I spent a good amount of time double-checking the HTML, making sure I did not make a mistake (I definitely did 😭). It was driving me crazy,  I was banging my head against a wall.

However, each time I encountered an issue, I took a step back, carefully reviewed the code, and tried to break down the problem into smaller, more manageable parts. This approach, while sometimes tedious, proved to be very helpful in identifying the root cause of the errors.

Overall, this exercise was a valuable learning experience. Coding has always been my least favorite thing to do, but it is what brings an interface to life.This exercise showed me how important it is to calm down, and pay close attention to even the smallest details in my code. I also learned how valuable it is to break down problems into smaller steps and solve them one by one. Putting all the frustration aside, it was really satisfying to finally figure out the solution and see my code working as expected whenever I encountered an issue. 

Labels:

Comments

Post a Comment

Popular Posts