Application Design II - Task 3: Interactive Component Design and Development

13.11.2024 - 4.12.2024 / Week 08 - Week 11
Tan Zhao Yi / 0363285
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 3: Interactive Component Design and Development


LIST

Task 3: Interactive Component Design and Development



INSTRUCTION


Task 3: Interactive Component Design and Development

In this task, we are required to explore and make creative decisions on the type of interactions they would want to integrate into their app. The outcome of this task is a fully functional animation element that is ready to be integrated into the final app. Unlike the visual mockups created in Task 2, this deliverable represents an actual implementation. It will be developed using HTML, CSS, and JavaScript, with the option to utilize animation frameworks if needed.

The six interactive elements I have chosen are:
  • Startup Logo Animation
  • Slide Up Box
  • Side Menu Interactions
  • Carousel Menu
  • Page Transition
  • Notifications Interactions
A. Startup Logo Animation
I started with illustrating the logo in Adobe Illustrator, then animate in After Effect. I plan to export the GIF file and import it into Dreamweaver. 
Fig 1.1. Animating Public Bank logo in After Effect
Since this was my first time writing JavaScript independently, the process of creating this animation took longer than expected. There were several challenges I encountered along the way, but through trial and error, I was able to refine the code. Fortunately, the final result was successful, and the animation works as intended.
Fig 1.2. Comparison between font size in Chrome and Figma
One issue I encountered was with the font size. In Figma, I had planned for the heading to be 32px and the body font to be 15px. However, when I applied these sizes in CSS, they appeared much larger than I had anticipated. This discrepancy required me to adjust the font sizes to better fit the design and ensure the layout looked consistent across different screen sizes. Therefore, I changed the font size of the heading to 25px and the body font to 12px.
Fig 1.3. HTML - Startup Logo Animation

Fig 1.4. CSS - Startup Logo Animation

Fig 1.5. JavaScript - Startup Logo Animation

Outcome - Startup Logo Animation

Fig 1.6. Outcome - Startup Logo Animation
B. Slide Up Box
After I done with styling the website, I started exploring how to write the script of a CTA button. When users clicked on the log in button, the box will slides up from the bottom, asking users to enter their details. Additionally, I added a function of tapping outside the box to slides down the box.
Fig 2.1. HTML and JavaScript - Slide Up Box

Fig 2.2. CSS - Slide Up Box

Outcome - Slide Up Box

Fig 2.3. Outcome - Slide Up Box
C. Side Menu Interaction
The side menu interaction includes the transition and hover effect. 
First I start with styling the transfer page, following by the side menu. For the list in side menu, I set them as <li> except for the last one. This was because I wanted to avoid having a border line appear beneath the final list item, as it would disrupt the visual flow and make the design look less polished. Instead of applying the same <li> styling to the last item, I adjusted it separately by using <p> to remove the border and create a seamless ending to the menu. This approach maintained the overall aesthetics and gave the side menu a more refined and intentional appearance.
Fig 3.1. HTML and JavaScript - Side Menu Interaction
Fig 3.2. CSS - Side Menu Interaction

Outcome - Side Menu Interaction

Fig 3.3. Outcome - Side Menu Interaction
D. Carousel Menu
While working with the UI at the bottom of the page, I discovered that different phone size may affect the padding, therefore I decided to change the "International Banking" to "Global Banking"to minimise the possibility of overlapping the text.
Fig 4.1. HTML - Carousel Menu
I initially attempted to assign a single class to all the icons and style them collectively to save time and ensure consistency. However, I quickly realized that each icon had unique dimensions, with varying widths and heights. As a result, a uniform styling approach didn't work as intended. To address this issue, I had to individually style each icon, carefully adjusting their properties to maintain a balanced and cohesive appearance within the design. Although this process was more time-consuming, it ensured that every icon fit perfectly within the layout.
Fig 4.2. CSS - Carousel Menu

Outcome - Carousel Menu

Fig 4.3. Outcome - Carousel Menu
E. Page Transition
This section pertains to the transition within the Fund Transfer process, where the page smoothly swipes to the left as the user proceeds to the next step. This motion provides a clear and intuitive sense of progression, enhancing the user experience by visually indicating a shift to a new phase in the workflow. To make the process more thorough and user-friendly, I added a detailed confirmation page after the user inputs the recipient's information. This confirmation page allows the user to review and verify all entered details, such as the recipient's name, account number, and the transfer amount, ensuring accuracy before finalizing the transaction. This addition not only minimizes errors but also builds trust and confidence in the transfer process.
Fig 5.1. Transaction Confirmation Page

Fig 5.2. HTML - Page Transition
The collapsed part in the CSS file could be referred to Fig 3.2, which is the first step of transferring funds.
Fig 5.3. CSS - Page Transition

Outcome - Page Transition

Fig 5.4. Outcome - Page Transition
F. Notification Interaction
My original plan for the notification page was to implement a sliding red line beneath the active label. When a label is selected, the red line would appear underneath it, and when the user clicks on another label, the red line would smoothly slide to the new label.
 
To achieve this effect, I consulted AI for conceptual guidance and discovered a new tool called DOMRect. DOMRect represents the size of an element and its position relative to the viewport, which is essential for positioning the red line accurately. I plan to implement DOMRect in my script to track and update the position of the red line dynamically, allowing for the desired sliding effect as the user navigates between labels. Also, I added a smooth easing effect for the content to enhance user engagement.
Fig 6.1. HTML - Notification Interaction
Fig 6.2. JavaScript - Notification Interaction
Fig 6.3. CSS - Notification Interaction

Outcome - Notification Interaction

Fig 6.4. Outcome - Notification Interaction


REFLECTION

Experience
At first, I struggled with the logic of making the preloader transition smoothly to the main content. It was frustrating when things didn’t work as expected, especially when the animations didn’t play correctly. However, with patience and guidance, I learned to properly reference elements using document.getElementById and control animations with GSAP. It felt rewarding to see the final transition work as planned, and I gained more confidence in my ability to solve coding problems.

Observations
One key observation I made is how important it is to reference elements correctly in JavaScript. Missing even a small detail, like an incorrect ID, can stop the entire script from working. I also noticed that GSAP animations require proper timing and sequencing to look smooth. Another observation was how the combination of HTML, CSS, and JavaScriptworks together. While I thought CSS wasn’t necessary at first, I realized it plays a big role in setting the initial visibility of elements like #main-content.

Findings
I discovered that small errors can cause big problems, but they are often easy to fix once identified. I learned that using console.log() can help track errors and see where things go wrong. I also realized how powerful GSAP is for making animations smooth and professional. Most importantly, I found that clear structure and well-named elements (like using #preloader and #main-content) are essential for a working and understandable script. This experience taught me to stay patient, double-check my references, and test small parts of my code step by step.

Comments

Post a Comment