Labels

Application Design II / Final Project

15/12/2024 - 7/01/2025 / Week 13 - Week 15
Iman binti Kamarudin / 0364014
Application Design II / Bachelors of Design (Hons) in Creative Media
Final Project:
INSTRUCTIONS


FINAL PROJECT
Task: Refine the prototype into a complete working and functional product experience.

I decided not to completely do all the pages from my file and only the most interesting/important ones such as details of the book when you select 'read more' as well as the library, write page, login and splash page. Therefore, the sub-sections in the library will not be functional nor the account page.

SPLASH PAGE
I simply inserted the Wattpad logo in the index file and coded it using gsap to fall in from the top and change from 0 opacity to 1. I then made it go to the onboarding html file after 5 seconds

Fig 1.1 - Splash Page GIF


LOGIN PAGE
I followed the tutorial from w3schools on creating input boxes for the username and password. I then added in the bottom section to easily log in other ways using buttons as well. Then I added in the smaller details such as the 'Forgot Password?' text and 'Sign Up Here' below the login button. To do the lines beside the 'or', I used empty divs and adjusted the css so they would look like thin lines.

Fig 1.2 - Final Login Layout

After doing the page layout, I then used GSAP to animate it as if it's sliding in from the right using the 'fromto' code.

Fig 1.3 - Login GIF


BOOK INFO PAGE
I started off with importing all the elements that would stay the same such as the bottom navigation bar as well as the header in the chapter reading page. I then sized up the book cover and text and added two sections for the author username and profile picture and the book statistics. Afterwards, I wrote the book statistics, bolded the numbers and positioned them in a row.

Fig 1.4 - Book Information WIP

Next, I added in the book description and two buttons; one to start reading and one to add it to your reading list. I added padding to make the buttons the size I wanted. Then I added in the tag section and used position: relative to close the space between the rows. I continued on with setting up the reviews and rating section.



Fig 1.5 - Final Book Information Page #1

Fig 1.6 - Final Book Information Page #2

Once everything was placed, I added GSAP to animate the page sliding in from the right using 'fromto'.

Fig 1.7 - Book Information Page GIF


LIBRARY PAGE
I copied over the first 3 books from the carousells in the home page and made them slightly bigger. I also removed all the scroll functions as the page can only scroll vertically. I then created the top navigation with 3 text and modifying them to look like buttons.

Fig 1.8 - Library Major Elements

After I got all the major elements done, I added in all the smaller details such as the saved quotes button next to the top tabs as well as the filter and cloud icons. I used position: absolute and adjusted the top, left and right values so the cloud icons would stay at the bottom right of each book.

Fig 1.9 - Final Library Page

Fig 1.10 - Library Page Scroll GIF


WRITE PAGE
I implemented the top section just like the homepage and changed the slider to a simple card. I then used the same book sizes from the library and removed the progress bar. 

For the second row, I changed the opacity of the right most book to 0 and got rid of the shadow in the middle book. I then replaced the cover image to the one from Figma so it looks like you can start writing a new book.

Fig 1.11 - Final Write Page

I used the same animation method as the home page with the top section sliding in from the left and the bottom section sliding up.

Fig 1.12 - Write Page GIF

I had an issue with the pages that slide in from the right as it creates a lot of extra space for some reason on the top and on the right. It also doesn't let the navigation bar stay at the bottom of the screen even if I separated the navigation from the rest of the content on the page. After hours of trying to figure it out, I decided to leave it alone and keep it as is so it'll look kinda weird when you scroll vertically on those 2 pages.


FINAL


Fig 2.1 - Progression Slides

Fig 2.2 - Final Presentation


REFLECTION

My experience with this task was quite okay. It was really refreshing having an assignment that didn't make me want to rip my hair out. I also feel like I learned a lot about organising and layouts when coding and animating.

I found that there are a lot of things you can accomplish with GSAP but that there's not a lot of clarification on how to set it up within the website itself. I mostly learnt through looking at other people's stuff on the forums and only utilising the 'fromto' code.

It was also really satisfying to be able to see an actual functional prototype that I coded myself and it was really nice to have gone through all the stages to get to this point from last semester.
Labels:

Comments

Post a Comment

Popular Posts