Application Design II /Task 3: Interactive Component Design & Development

Start from 20.11.2024

13.11.2024 -04.12.2024 /Week 8- Week 11
Kong Cai Yi / 0363862 
Application Design II   / Bachelor of Design (Hons) in Creative Media 
Task 3: Interactive Component Design & Development

---

LECTURES

Week 9/ Task 3 Component

This week, we began working on Task 3, and Mr. Shamsul asked us to come up with at least six components for the task, such as interactive buttons or page transitions. Fortunately, we already prototyped the animations in Figma during Task 2. Now, we just need to translate those prototypes into HTML or GSAP to turn them into fully functional pages with animations. He also taught us how to export icons into SVG format, allowing us to copy the code for specific icons and use them directly in HTML.

Fig 1.1 Export SVG format  (20.11.2024-Week 9)

---

INSTRUCTIONS

Task 3/ Interactive Component Design & Development

Instructions:

• Students will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. 
• The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app. 
• The output of this task is a working animation element that are ready to be integrated in their final app. Meaning it’s no longer a visualisation like how it was in Task 2. This will be created using HTML/CSS and JavaScript with the use of animation framework if necessary.

Interactive Components/Elements:

• Loading Page (Bus animation)
• Navigation Menu with interactive icons.
• Pop Up boxes. (Ticket Details, Seats Details)
• Extension (Payment options)
• Call to action buttons. (Payment processing)
• Page/Screen transitions (Onboarding Page)

1. Navigation Menu with interactive icons

Fig 2.1 Navigation bar in HTML  (20.11.2024-Week 9)

Fig 2.2 Add Jawascripts  (20.11.2024-Week 9)

Fig 2.3 Outcome  (20.11.2024-Week 9)

Fig 2.4 HTML, CSS, JAWASCRIPTS Details (20.11.2024-Week 9)

2. Pop up window (Seat details)

Before adding media (Responsive):

Fig 2.5  Seats page in CSS (26.11.2024-Week 10)

When I click on the seat number, a pop-up window will appear from the bottom. For now, I have set it up so that clicking on a blank content page will also trigger the pop-up window. (iPhone 12 Pro size)

Fig 2.6  Outcome (26.11.2024-Week 10)

   

    

Fig 2.7 HTML, CSS, JAWASCRIPTS Details (26.11.2024-Week 10)

3. Extension of payment options

Fig 2.8 Prototype in Figma  (30.11.2024-Week 10)

Fig 2.9 Draw icon in Adobe Illustrator  (30.11.2024-Week 10)

Fig 2.10 Progress in Dreamweaver (30.11.2024-Week 10)

Fig 2.11 Success of creating the a similar layout design  (30.11.2024-Week 10)

Fig 2.12 Final Outcome  (30.11.2024-Week 10)

Fig 2.13 HTML, CSS, JAWASCRIPTS Details  (30.11.2024-Week 10)

4.Page/Screen transitions (Onboarding Page)

Fig 2.14 Prototype in Figma  (30.11.2024-Week 10)

Fig 2.15 Final Outcome  (30.11.2024-Week 10)

Fig 2.16 HTML, CSS, JAWASCRIPTS Details  (30.11.2024-Week 10)

5. Loading Page (Bus animation)

Fig 2.17 Draw Bus image using AI  (9.12.2024-Week 11)

Fig 2.18 Export it as SVG  (9.12.2024-Week 11)

Fig 2.19 Final Outcome  (9.12.2024-Week 11)

6. Call to action buttons (Payment processing)

I continue doing the call to action buttons in previous payment page. I added a javascript for when user click on the pay button will direct to different page which is the payment loading page.

Fig 2.17 Javascript added in HTML  (9.12.2024-Week 11)

Fig 2.18 Final Outcome  (9.12.2024-Week 11)

Fig 2.19  HTML, CSS, JAWASCRIPTS Details   (9.12.2024-Week 11)

More animation will be add:

• Scrolling page
• Keyboard 
• Digital Ticket Open overlay
• Payment Failed 

---

REFLECTION

While doing this task, I found that coding the page layout was not as easy as I thought. There were so many details to take care of, especially because my page had a lot of information.To overcome these challenges, I sought assistance from various resources, such as the DaisyUI website and AI tools. These proved invaluable in helping me implement complex animations and achieve the layout I envisioned. I really enjoyed working on animations, especially for the loading page. I learned how to control the timing, like deciding when my bus animation should stop or enter the page. I even added effects like ease-in and ease-out to make the animation smoother and more interesting. Sometimes, I wished I had chosen a simpler layout because it would have been easier to code! I spent a lot of time on small parts like the navigation bar, but I think it’s worth it because it will help a lot with my final project. At this point, I’ve completed most of the critical components for the task. Moving forward, my focus will be on designing the remaining pages, refining the existing ones, and ensuring that the overall design aligns with my vision.