Application Design II / Project 3

20/11/2024 - 14/12/2024 / Week 9 - Week 12
Iman binti Kamarudin / 0364014
Application Design II / Bachelors of Design (Hons) in Creative Media

Project 3:

---

---

INSTRUCTIONS

PROJECT 3

First we had to think about which components to proceed with. 

Selected Components:

1. Onboarding 

2. Loading screen 

3. Search page hover animations 

4. Book carousell (if possible) 

5. Star & bookmark animation

6. Navigation 

NAVIGATION
I started with making the navigation bar. I tried to follow the example on Daisy UI but I faced issues with my SVGs and spacing. When I figured out the visual design, I moved on to getting the icons to change color and stay that color when users click on it. However, no matter what method I used I couldn't get it to work. Since my icons were in a button instead of an unordered list, it wouldn't work. Therefore, I created a new navigation using an unordered list for the navigation bar instead

Fig 1.1 - Navigation Bar GIF

Fig 1.2 - Navigation Bar HTML & CSS

ONBOARDING

I set up the layout of my onboarding page and then put the dot indicators and the next button in a fixed position near the bottom of the screen. 

Fig 2.1 - Onboarding GIF

Fig 2.2 - Onboarding HTML, CSS & Javascript

LOADING

For the loading page, I imported the Wattpad logo and created 3 dots for the loading animation. After adjusting the CSS, I created the animations with GSAP.

Fig 3.1 - Loading Page GIF

Fig 3.2 - Loading Page HTML, CSS & Javascript

BOOK CAROUSELL

I set up the homepage top navigation and section for the 'continue reading' part. Afterwards, I followed this YouTube tutorial to create a simple card slider. Unfortunately, I couldn't find any references to get the desired effect I wanted with the left most book cover sizing up when the user is 'focused' on it and the description changing along with it.

I then copied over the carousell and added a script to slide the two areas in from the left and bottom using GSAP.

Fig 4.1 - Home Page GIF

Fig 4.2 - Home Page HTML, CSS & Javascript

SEARCH PAGE

For the search page, I created a div with two other divs for the left and right columns. Then I placed buttons inside each column. I also added an input text box above the category buttons.

Fig 5.1 - Search Page WIP

I then made 6 separate images for the background in Canva that was slightly longer than the actual width of the button. I then made ids for each image button and applied the corresponding background image to them. I also added a hover that changed the position of the background image to the center with a gentle transition.

Fig 5.2 - Search Page GIF

Fig 5.3 - Search Page HTML & CSS

STAR & BOOKMARK ANIMATIONS

I set up the whole reading page and then adjusted css for an active class that can be applied to the vote and bookmark icons. I then animated everything and added an if statement to check if the button already had the active class. If it did, it would remove the active class but if it didn't it would play the animation.

Fig 6.1 - Reading Page GIF

Fig 6.2 - Reading Page HTML, CSS & Javascript

---

FEEDBACK

Week 9

Specific Feedback - Try to see if its possible to make a carousell like that. Start with the navigation bar first.

General Feedback - Figure out the hardest component first and it will be easier to do the smaller ones.

---

REFLECTION

My experience with this task was quite okay. I feel like since I have a way better grasp at HTML and CSS it wasn't that tough to develop the components but it was confusing trying to animate them using GSAP. While I'm grateful for all the forums, there is still a lack of information/guides on how to apply their code into your scripts.

I faced a lot less issues with this task compared to others I've done in the past/am currently working on however there were some things that didn't really make sense to me like when I tried to animate the home page to slide the 'Continue Reading' category in from the right, it created a lot of empty space to the right of the file and you could zoom out and mess up the view of the page. It was only when I made it slide in from the left that it worked.

Overall, I'm satisfied with what I've done so far but I definitely need to dive deeper into Javascript and coding mobile apps specifically.