Task 3: Interactive Component Design & Development

-

2 December 2024
Simon Ko Jing Liang
0364359
Bachelor of Design in Creative Media
Task 3: Interactive Component Design & Development



Instruction



Task 3: Interactive Component Design & Development


After finished the visualization of the app, I started to develop the component.

There have several of macro and micro animation to different pages:
  • CTA button
  • Interactive icons
  • Startup logo animation
  • Onboarding transition
  • Bottom menu bar navigation
  • Dropdown 

1. Logo animation

Fig 1
Logo



Fig 2
HTML


Fig 2
CSS



Fig 3
CSS 

2. Onboarding transition




Fig 4
Onboarding 

For my application, there have 3 onboarding pages and because of the transition is the same so I just put 1 page here. 



3. CTA Buttons


Fig 5
Welcome Page
 


Fig 6
Login 


Fig 7
Onboarding page button


4. Interactive icon


Fig 8
Home Page


Fig 9
Train Ticket Page

For the icon, I made them when the user hover or touch it, the notification icon and back button will zoom up and when the user click them, they also will zoom out.


5. Dropdown 

Fig 10
Choose Bank



6. Bottom menu bar navigation


Fig 11
Bottom navigation bar