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

-
23.09.2024 - 14.12.2024 / Week 8 - Week 12
Lim Rui Ying / 0358986
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 3: Interactive Component Design & Development

INSTRUCTIONS


TASK 3: Interactive Component Design & Development

In this task, we are required to develop 5-6 interactive components in our app using HTML, CSS and JavaScript. The interactive components include:
  • Navigation menu with interactive icons;
  • Side menu interaction;
  • Pop-up boxes;
  • Call to action buttons;
  • Page/Screen transitions, etc.


Process
After reviewing the NutriFit app and discussing it with Mr Shamsul, the chosen components for development include:
  • Splash Screen & Start Page: Logo animation
  • Home Page: Calories intake overview (radial progress bar), Water intake (droplet fill animation)
  • Sidebar: Pop-up logout confirmation
  • Quick Log Menu
  • Sliding animation for the Food Log Panel
  • Page transitions: Slide, Fade

I started coding the screens and later applied the animations using JavaScript and GSAP. I created one HTML file for each screen and linked it to a single CSS and JS file to handle the component styles and animations. The coding files include:
  •  index.html    Splash Screen, Start Page
  •  home.html    Home Page, Sidebar, Quick Log Menu, Food Log Panel
  •  food.html    Food Item Page
  •  confirmation.html    Confirmation Page
  •  style.css    Manage all component styles
  •  script.js    Handle animations and page transitions

Fig. 1.1 Code files framework

I first defined the text styles in the CSS file. The initial font I used is Avenir but it is not part of the Google Fonts, so I selected an alternative font Figtree for the app.

Fig. 1.2 Text styles, CSS


1) Splash Screen & Start Page
The Splash Screen displays the logo animation when users open the app, then transitions into the Start Page, which includes a tagline and options to sign in/sign up.

The main challenge with coding these two pages was the animation, where I first applied GSAP to JavaScript. For the app name, I created a mask for the reveal animation, instead of distorting the app name itself. Below is the outcome of the Splash Screen and Start Page.

Fig. 2.1 Splash & Start Screens - logo animation

Fig. 2.2 Splash & Start Screens, HTML & CSS

Fig. 2.3 Logo animation, JavaScript


2) Home Page
The Home Page features animations for the progress bars in the calorie intake overview and dynamic droplet fill/empty animations in the water intake section.

Calorie Intake Overview
This section features circular and horizontal progress bars that visualise the calories and macronutrients taken. I created on-load animations for the progress bars using GSAP.

Fig. 3.1 Calorie Intake Overview - Progress bars animations

Fig. 3.2 Home Page, HTML

Fig. 3.3 Progress bars animations, Javascript

Water Intake 
To include the droplet fill/empty animation, I exported it from Figma to Lottie Files as assets and embedded it into the HTML file. The water tracking logic is based on one droplet equaling 0.5 L. The water litre count in the top-right corner updates as users track their intake. When users reach their water goal, the goal reminder text changes to "You've reached your goal!".

Fig. 3.4 Importing into Lottie Files as assets

Fig. 3.5 Water Intake - droplet fill/empty animation

Fig. 3.6 Water intake logic & droplet fill/empty animations, JavaScript


3) Sidebar
Slide-in/out animation is applied to the Sidebar, with a dark overlay as the background. The sidebar is initially positioned off-screen, it slides in when users tap the hamburger menu, and slides out when the overlay is tapped.

Fig. 4.1 Sidebar - Slide in/out animation

Tapping the Logout button triggers a confirmation popup with an overlay background. The logout button navigates users back to the Start Page.

Fig. 4.2 Sidebar - Logout confirmation popup

Fig. 4.3 Sidebar, HTML

Fig. 4.4 Sidebar animation & Logout confirmation popup, JavaScript


4) Quick Log Menu 
The Quick Log Menu slides up with a dark overlay background when users tap the Add button at the bottom navigation bar. Each option slides up and fades in sequentially, while the Add button rotates into 45˚ into a Close button. The z-index for the Add button was set to 7 to ensure it stays above all layers.

Fig. 5.1 Quick Log Menu - Slide up/down animation

Fig. 5.2 Quick Log Menu, HTML

Fig. 5.3 Quick Log Menu slide up/down animation, JavaScript


5) Food Log Panel
The Food Log Panel slides up when users log a meal and slides down when tapping the Close button. The panel can also be accessed from the Quick Log Menu. At this point, only the panel animations are created while the food item functionality is yet to be added.

Fig. 6.1 Food Log Panel - Slide up/down animation

Fig. 6.2 Food Log Panel slide up/down animation, JavaScript

For the search feature, I implemented a focused state for the search bar. When users type, the search bar displays an outer border. Tapping the Clear button clears the input text.

Fig. 6.3 Food Log Panel - Search feature

Fig. 6.4 Search feature, JavaScipt

I also created the tab-switching animation between the Recent and Saved tabs, positioning an orange horizontal line below the active tab.

Fig. 6.5 Food Log Panel - Tab switching animation

Fig. 6.6 Tab switching animation, JavaScript


Progress Summary
Completed components:
  • Splash Screen & Start Page: Logo animation
  • Home Page: Calories intake overview (progress bar animations) and water intake (droplet fill animation)
  • Sidebar: Slide in/out animation and logout confirmation popup
  • Quick Log Menu: Slide in/out animation
  • Food Log Panel: Slide up/down animation

Things yet to be done:
  • Food Log Panel: Adding food items, swipe-to delete action and search results
  • Home Page: Updating calorie intake after logging a food item with progress bar animations
  • Confirmation Page: Slide in/out animation
  • Page transitions: Implementing slide and fade animations

Final Submission

Presentation Video - Task 3: Interactive Component Design & Development

FEEDBACK

WEEK 9
Use the radial progress component from DaisyUI and GSAP for animations. Each screen can have its own HTML file, while CSS can be organized in either a single file or multiple files.

REFLECTION

This task reminded me of the Interactive Design module, which also involved coding. Through this task, I built a stronger foundation in HTML and CSS and gained a better understanding of JavaScript basics with GSAP. The process was challenging and I am grateful to ChatGPT for helping me to achieve the desired outcome, particularly in creating animations and functionalities in JavaScript such as the water tracking logic and the sequential slide-up animation of the Quick Log Menu. I actually enjoy the coding process, where the effort translates into tangible results. I also realised the importance of animation planning to ensure a smooth execution process. I look forward to completing this project and seeing the final outcome.

QUICK LINKS



Comments

Post a Comment

Popular posts from this blog

Typography - Task 1: Exercises 1 & 2

-
Image
30.08.2022 - 03.10.2022 / Week 1 - Week 5 Lim Rui Ying / 0358986 Typography / Bachelor of Design (Hons) in Creative Media Task 1: Exercises 1 & 2 LIST Instructions Task 1: Exercises 1 & 2 Exercise 1: Type Expression Exercise 2: Text Formatting Feedback Reflection Further Reading LECTURES LECTURE LIST Lecture 1: Typo_0_Introduction Lecture 2: Typo_1_Development Lecture 3: Typo_2_Text_P1 Lecture 4: Typo_3_Text_P2 Lecture 5: Typo_Text_4_Basic Lecture 6: Typo_5_Understanding Lecture 7: Typo_6_Screen&Print Lecture 1: Typo_0_Introduction From this lecture, Mr Vinod gave us an introduction to Typography, which can be seen in our daily life and can be used in a wide range of different fields. For example, Typography is applied in animation, application design, web design, signs, etc. Typography has evolved f...
Read more

Typography - Final Compilation & Reflection

-
Image
30.08.2022 - 02.12.2022 / Week 1 - Week 14 Lim Rui Ying / 0358986 Typography / Bachelor of Design (Hons) in Creative Media Final Compilation & Reflection INDEX Task 1:  Exercises 1 & 2 Task 2:  Typographic Exploration and Communication Task 3:  Type Design and Communication (Font Design) Special Task:  Type Design & Communication (Angpow Design) SUBMISSIONS Task 1: Exercises 1 & 2 30.08.2022 - 03.10.2022 / Week 1 - Week 5 Task 1 - Exercise 1: Type Expressions Fig. 1.1 Final Type Expression - JPEG, Week 3 (13/9/2022) Fig. 1.2 Final Type Expression - PDF, Week 3 (13/9/2022) Task 1: Animated Type Expression ...
Read more