Interactive Design - Final Project: Final Working Website
26/11/2024 - 07/01/2024 | Week 10 - Week 14
Koh Sher Wei | 0353816
Interactive Design | Bachelor of Design in Creative Media
(MIB) Instructions :
Task :
The objective of this assignment is to develop a fully functioning website of our redesigned website from task 2. Through this website, we should be able to demonstrate our ability in implementing web design principles, front-end development techniques and best practices in user experience (UX) and accessibility.
Website Development:
HOMEPAGE
Firstly, I made the navigation bar in web view according to my prototype. I thought it was relatively easy considering we learned how to center and add padding/margin to different items. I actually wanted to take a navi bar from bootstrap but none of them really seemed suitable to my prototype which is why I decided to code it myself.
Once I was done with that, I moved on to add a carousel from bootstrap just below my navigation bar. It was relatively simple, but I had a problem with adding captions to each photo as I wasn't quite sure how their html/CSS was phrased. So I only managed to add captions to one item. Even then, I struggled quite a bit with making the word show up on top of the image, until I added "position: relative" to my CSS.
The next part was a card slider carousel which was a bit tougher as bootstrap doesn't provide anything similar. So I had to look up different tutorials online (Youtube, Github etc.), I tried a few different ones but some were too complicated, I wasn't sure how to manipulate it to the way I want it to look.
The slider carousel link I ended up using:
I did have to open a new "test" file so that I could modify the code without messing up my index html file, and also a new, clear file makes is easier for me to understand.
PRODUCT PAGE
For my product page, I opened a div (col) with two other divs (leftcol, colright) and set "col" to [display: flex and flex-direction: row] to separate the left and right columns. The left one for the category section and the right for the product display. For the product section, I used a grid display in CSS to display three cards in a row. Then I adjusted everything accordingly and added hover actions.
PRODUCT DETAIL
The product detail page, is accessible by clicking the "Canvas & Boards" card. This page wasn't initially in my prototype.
For this page, I wanted to keep it simple and clean. Which is why it may seem a bit plain. But, It was also because there isn't much photos that can be added in a description page for canvases . Then, I added a small section for users to navigate between product detail, shipping detail and reviews. I also added a small section "you may also like" for additional products that user may want to add to cart.
CONTACT PAGE
This page was also relatively simple. I just had to combine a few bootstrap forms to make the form that fits my website prototype. I would say this form took the least amount of time to complete. However, there is an issue which is that the active action for some of the input lines are different. But I didn't know how to fix it without messing up the form due to the fact that my CSS could have clashed with the Bootstrap code.
STORE PAGE
My last page, which was also not included in my website prototype is the "stores" page. This page essentially displays all the store locations that are available in the country you're in. Again, I used the grid display with cards for each location and made it as neat as possible.
RESPONSIVENESS
The one thing I'm not proud about my website is the responsiveness/mobile view. I did my best with changing the CSS for each page, but It honestly looks quite unorganised. Also the main issue I have is that I didn't take resposiveness into consideration when I was coding my navigation bar. So it looks awful and is not functional at all in mobile view. I tried to fix it and even added additional HTML codes to make a "hamburger navigation bar" but it wouldn't work out so I had to leave it as it is. (I tried my best sir)
Another issue I had was the product page, I couldn't figure out how to minimise the gap between my grid rows. I wasn't sure why changing the grid-row-gap didn't work, so I changed the height to auto so that whatever CSS code was present wouldn't block my row-gap from changing.
Conclusion:
The website I created can be said to be "fully functional" in terms of desktop view, but I can't say the same for mobile view. The imagery and design wise, I think it pretty consistent and looks relatively similar to my prototype. I would say I struggled most with the carousels, sliders and the overall alignment of objects. I switched between using vh/vw and px for different things because I didn't want it to move too much when the window is resized; although I'm not sure it worked too well. Nonetheless, I also tried my best to make the whole website look neat and tidy, as well as for it to at least be 50% responsive.
Final Website link:
