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

-
13 Jun 2024 - 08 Jul 2024 (Week 08 – Week 12)
Vincent Lee // 0359386
Application Design II // Bachelor of Design (Hons) in Creative Media // Taylor's University
Task 3: Interactive Component Design & Development
INDEX

- Component Design and Development
- Task 3 Submission and Video Presentation
 
Instructions

<iframe src="https://drive.google.com/file/d/1COQkOLwNVO6voHJm6IWqCMo1icYqm2Oj/preview" width="640" height="480" allow="autoplay"></iframe>


Task 3: Interactive Component Design & Development
For this task, we are tasked to make our application came alive by adding interactive and visually engaging elements, using HTML/CSS/JavaScript. This task allow us to explore and make decision regarding the intended interactions (micro and macro animations) mentioned in the previous task , whether they are still applicable.

Interactive Components/Elements:
  1. Navigation Menu with interactive icons.
  2. Side Menu interaction.
  3. Pop-Up Boxes.
  4. Call to Action Buttons.
  5. Page/Screen Transitions.
  6. Other Interactions (subject to approval from the module coordinator).

Submission Requirements:
1. Project Files & Video Walkthrough
  • Submit all project files, including HTML, CSS, and JavaScript files.
  • Provide a video walkthrough demonstrating the interactions and animations.
2. Single HTML File
  • Include all components in a single HTML file. 
  • Link to external CSS and JavaScript files as needed.

Component Design and Development

Figure 1.1 - Components and Elements of Each Screen

Figure 1.2 - Components in Figma

Total Screen: 6
left to right: Menu Page, Customise Page, Cart Page, Activity Page, Order Status Page, Tracking Page

In accordance with the task requirements, I have narrowed down the design of each screen to emphasize and showcase my components and elements within the given timeline. This focused approach ensures that each interactive element is highlighted effectively, allowing for a clear demonstration of the micro animation. By doing so, I can better illustrate how these interactions enhance the overall user experience of the application.

For the macro animations, I found it more convenient to first build and create all the buttons and integrate them into a complete design. Once the design is finalized, I then apply the OnLoad animations as visualized in my Task 2 prototype.


Screen 1 - Loading Screen
Progress:
  • Using AI to create the logo
  • Import to AE, convert to shape
  • Animate with mask and keyframes
  • Extensions - Lottiefiles - Render
  • Copy code and paste in Web Player - Get Code
Figure 1.3 - Making of Loading Animation in AE

Figure 1.4 - Outcome: Loading Screen



Screen 2 - Home Page
Progress:
  • Built the layout with the title, menu tab, and bottom navigation bar.
  • The tab buttons are functional, displaying different states correctly.
Problems:
  • Forgot to frame the layout to my screen size. As a result, when opened in the browser, the navigation bar expands to the entire screen.
Solutions/ Further Development:
  • Constrain the width and height to my device screen size.
  • Change the font to match the one used in my prototype.
  • Integrate the product cards and link them to the menu tab. This way, upon pressing, users will be navigated directly to the corresponding category.
  • Change of icons and colour of text of pages, as the current one shows the same colour/ brightness.
  • Apply animations to the presentation of product card, when sliding in from the bottom.
Figure 1.5 - Menu Page



Screen 3 - Customise Page
Progress:
  • Built the page with horizontal and vertical scrolling, including a functional CTA button.
Problems:
  • The customising options are under a container with the description and text, sharing the same padding settings. As a result, when scrolling vertically, the customising buttons slide out within the padding instead of the side of the screen.
  • Upon selecting a specific customizing button, the button does not slide to the left and fade out as desired. It stays in the pressed position and sometimes lags.
Solutions/ Further Development:
  • Refine and complete the design with additional buttons such as 'Return' and 'Wishlist'.
  • Include the product rating panel and animate it with Lottiefiles.
  • Align the text to the left.
  • Fix the issues with the customizing buttons.
  • Make the 'Quantity' and 'Add to Cart' buttons functional.
Figure 1.6 - Customise Page 



Screen 4 - Cart Page
Progress:
  • Integrated components and received feedback.
  • Added a 'Pulsing' animation effect to the CTA button.
Problems:
  • While coding the product card, the spacing of the 'Quantity' button and the number was inconsistent, even though both buttons have the same settings. This might be due to the text and price container affecting the quantity container.
Solutions/ Further Development:
  • Ensure the font, font and button size and spacing adhere to my prototype formatting.
  • Add animations for button presses.
  • Complete the calculation details and the 'You Might Want' section.
Figure 1.7 - Cart Page



Screen 5 & 6 - Pop-up Window and Activity Page
Progress:
  • Integrated the coding animation GIF and transformed it into a 'Tick' icon.
  • Updated the state of the CTA button.
  • The top and bottom navigation bars are now responsive upon pressing.
Problems:
  • The most tedious part of coding this screen was identifying the size of the panel and the spacing between text. Using the measurements from Figma, the results were not as expected and required further testing. This leads to inconsistent spacing throughout the entire application design.
Solutions/ Further Development:
  • Animate the loading animation and 'Tick' icon with Lottiefiles.
  • Ensure consistent spacing between text.
  • Complete the design and change the state of the 'Receive' button after users navigate back from the Order Status and Tracking Page.
Figure 1.8 - Activity Page 



Screen 7 - Order Status Page
Progress:
  • Integrated the buttons and completed half of the structure of the page.
Problems:
  • This page is quite similar to Screen 4 - Cart Page, hence no major issues have been found at this point.
Solutions/ Further Development:
  • Complete the full design with animations.
  • Animate the buttons with different states and upon pressing.
Figure 1.9 - Order Status Page



Screen 8 - Tracking Page
Progress:
  • The main structure has been constructed with buttons, icons on the image, and delivery info.
Problems:
  • I adjusted the placements of 'Pin' icons without accurate measurements, placing them at desired positions. However, there must be a proper way to ensure accurate route visualization.
Solutions/Further Development:
  • Complete the full design with animations.
  • Animate buttons when entering the page and change their state upon pressing.
Figure 1.10 - Tracking Page



Application Design II_Task 3 Submission: Interactive Component Design & Development

Google Drive Folder: Link

Device: 
  • Iphone 13 (390px x 844px)
Summarise of Current Progression:
  • Coded the structure of each page, but design issues such as font, font size, alignments, and spacing do not adhere to my Figma prototype.
  • More interacting and responsive components (icons & buttons etc.)
  • Applied transitions to each page.
 
Video 1.1 - Task 3 Video Presentation

Reflection

Starting this task was the most stressful and tiring experience I've had, mainly because I didn't grasp the coding concepts perfectly in my previous semester and required help from my lecturer and peers. The prospect of diving back into coding filled me with reluctance and anxiety.

However, I am grateful for the assistance of ChatGPT 4.0. It enabled me to code most of my screens and learn how to identify and solve problems independently. While the task wasn't entirely produced from scratch by me, I realized that coding isn't an exam. Using AI tools is an invaluable aid that eases our tasks, especially at this point in my learning journey.

As I continued coding, my confidence grew. I began to understand the basic concepts that had previously eluded me. One valuable aspect of working with ChatGPT was the process of troubleshooting. When the AI couldn't achieve what I intended, I argued with it and then found and fixed the problems myself. This interaction helped me progress, even when the AI's stubbornness required me to use my own solutions to move forward.


Materials
1. KOI Logo Animation: Link
2. AI to AE: Link
3. Donut Pie Chart: Link
4. Add Circle: Link

Popular posts from this blog

Typography - Task 1: Exercise 1 & 2

-
Image
30 Aug 2022 - 26 Sept 2022 (Week 1 -Week 5) Vincent Lee // 0359386 Typography // Bachelor of Design (Hons) in Creative Media // Taylor's University (TDS) Task 1: Exercises (Text Expression and Text Formatting) Instructions Exercise 1: Type Expression Exercise 2: Type Formatting Feedback Reflection Further Reading LECTURES LECTURE LIST Lecture 1:  Typo_0_Introduction Lecture 2: Typo_1_Development Lecture 3: Typo_2_Basic Lecture 4: Typo_2_Text_P1 Lecture 5: Typo_3_Text_P2 Lecture 6: Typo_5_Understanding Lecture 7: Typo_6_Screen&Print Week 1 Class Summary 1 Mr. Vinod showed us how to use the Typography Facebook group and create an e-portfolio using a YouTube video. He also gave us advice on how to succeed in his class by explaining the dos and don'ts in the Module Information Booklet. Mr. Vinod suggested that we read not only our own feedback but also feedback given to others. This ...
Read more