APPLICATION DESIGN II - TASK 3: INTERACTION COMPONENT DESIGN & DEVELOPMENT

23/09/2024 - 16/12/2024 (Week 8 - Week 12)

Lee Wing Kie / 0364251

Application Design II/ Bachelor of Design (Hons) in Creative Media

Task 3: Interaction Component Design & Development

---

INSTRUCTION

In Task 3, we need to create the micro and macro animations planned in Task 2. Using the coding languages HTML, CSS and JavaScript, we will implement all the animations and transitions.

Interactive Components/Elements can be:

- Navigation Menu with interactive icons
- Side Menu interaction
- Pop Up boxes
- Call to action buttons
- Page/Screen transitions
- Etc. (discuss with the module coordinator for further clarification)

1. App Splash Screen

The splash screen displays a logo animation when users open the app, then transitions to the homepage.

HTML, CSS, JavaScript Code Detail

2. Sidebar

A slide-in/slide-out animation is applied to the sidebar. When users tap the hamburger menu, the sidebar slides in, and when they click outside the sidebar, it slides back.

Sidebar HTML

Slidebar HTML page2

Slidebar animation JavaScript

3. Date Picker

The date picker allows users to easily compare prices across different days. Each date option button is selectable, and users can scroll left or right to view more options.

Data Picker HTML

Data Picker JavaScript

4. Seat Selection Button

Seat Selection button HTML

Seat Selection JavaScript

5. Boarding Pass Screen Transition

Boarding Pass HTML

Boarding Pass JavaScript

Progress Summary

Completed Component:

- Splash Screen & Homepage

- Sidebar: Slide in/out animation

- Search Results: Date Picker scrolling button

- Seat Selection: Fade animation and seat selection button

- Payment: Pay transition loading animation

---

REFLECTION

This task taught me the importance of time management, as it involved a significant amount of coding and required considerable time to complete. I had to implement various animation, each needing careful attention to detail. Initially, I felt frustrated due to my limited proficiency in JavaScript, which made some parts of the task challenging. However, I am grateful for my friend's guidance, as they helped me solve problems and improve my coding skills. This experience not only enhanced my coding skills but also emphasized the importance of effective time management and a willingness to learn.