INTERACTIVE DESIGN: PROJECT 02
07/06/2022 - 18/06/2022 (Week 11 - Week 12)
ALICIA TENG YI LING / 0345159 / BDCM
INTERACTIVE DESIGN
Project 02 / Working Landing Page
PROJECT 02: WORKING LANDING PAGE
Project 2 is a continuation of our project 1, which was creating a static wireframe of our landing page. In this assignment, it is to create a working prototype of the landing page using whatever platform you desire.
To start off, Mr. Shamsul taught us how to use Bootstrap for coding our landing pages.
Creation Process
For this project, I used Adobe Dreamweaver. I began by creating an outline in my code by labelling each section to keep things organised and so I would not get confused. I prefer to work section by section, meaning that I'd write the HTML for the header then finish the CSS before moving on to the "My Purpose" section, repeat this, and so on. While, Mr. Shamsul recommended we stick to Bootstrap, I found that a lot of the design elements I wanted to include in my website could not be executed through Bootstrap. So, I took to the internet and learned all the new things primarily through YouTube and Google.
Navigation Menu:
 |
Fig 1.1 Navigation Menu |
I made the navbar fixed to the top because I believe it looks more aesthetically pleasing but also so it would be less distracting to viewers and take up less screen space. Additionally, I added <transition> to the hover in CSS so the line would take 0.5 seconds to fill up instead of instantly.
For smaller devices, I minimized the navbar and made it so when clicked it would toggle a pop up menu instead by clicking on the three lines icon on the top right of the page. I used icons from fontawesome for the bars and the cross.
 |
Fig 1.2 Smaller Device Header |
 |
Fig 1.3 Smaller Device Pop Up Menu |
 |
I decided to add a hover colour change effect to the logo in the top left corner to match the hover effect that the navbar words have.
Call to Action Buttons:
I have five. The main one being "Shop more". The others: Read More About Me, Browse More, Submit. When hovered, the colours inverse to show that it is being highlighted (e.g. White text with black background reverses).
 |
Fig 1.4 Button Hover Effect |
Further Development
I delved into some Javascript and CSS for the "Latest Arrivals" Carousel by following some YouTube Tutorials which was a bit painful because the original code had been outdated or had some other error. I tried two other carousel codes but they did not work and instead messed up my entire code. Luckily, I made six extra copies of everything because I am paranoid and rightly so. JavaScript I used and worked: jQuerry and Lightslider.
Here is the one that worked for me:
Fig 2.1 Very useful Javascript and CSS Carousel Tutorial
When the images in the carousel are hovered over, it darkens the image to allow for a "Buy Now" action button. In a real life situation when using this website, it would take the user to the product page for purchase.
 |
Fig 2.2 Final Carousel |
I made the "Shop" a dropdown menu for ease of navigation and access for viewers. Similarly to the rest of the navbar, a line underlines the word that is hovered over.
 |
Fig 2.3 Dropdown Menu |
All Collections Section
I used cards for this section and made it so when the user hovers over the image, the name of this clothing type pops up. The colours of the hover effect in the carousel and cards are the same neutral dark colour (rgba(27, 30, 35, 0.5)) so I can use white coloured text because I believe it is more aesthetic. The three types are: Clothing, Shoes, and Accessories.
 |
Fig 2.4 Final Cards |
Fixed Issues
- Navigation bar: I had issues creating the dropdown menu
- "Latest Arrivals" and "All Collections" kept colliding because of <min-height>
- Footer: It was hard to centre the three things at the bottom
- It was hard to learn how to hover over an image (my logo at the top) and make it change colour
- The website looked wonky on my monitor but then Mr. Shamsul said it was because the screen is massive and looks okay on regular laptop screens. (For reference, my screen is 27 inches).
There were a few deviations from the original design but they were approved by Mr. Shamsul because they look better aesthetically and practically.
Updates to the design:
- Mr. Shamsul suggested enlarging the call to action buttons and making it black background with white text (instead of black text with plain background) so it stands out more to viewers.
- Moved the first "Shop Now" button to the centre of the header, below the logo, so everything looks more aligned and neat
- Removed the line below the paragraph and instead put a black button with white text that says "Read More About Me" and it will lead to the "About" subpage.
- Slightly changed the carousel design as I prefer the aesthetic and it worked unlike the other JavaScript.
- The contact form appearance is different due to available text fields.
HTML CODE
Fig 2.5 Final Working Landing Page HTML Codes
CSS CODE
Fig 2.6 Final Working Landing Page CSS Codes
Final Working Landing Page Submission:
 |
Fig 3.1 Final Landing Page Header |
It is ideally viewed on laptops.
Netlify Link: https://project-2-aliciateng.netlify.app/
FEEDBACK
Week 12
- Change home icon to my logo
- Use justify content to centre the logo in the footer
- Shorten the navbar extension height
- change set height to min-height its probably because of position (collision between latest arrivals)
- It is okay to deviate from design a bit as long as you are improving the design
REFLECTION
Honestly, this was a pretty daunting task at first as I had to do quite a few things by myself, meaning I had never learnt it in class so I suffered a lot. But when it all worked out it was super fun and I enjoyed it thoroughly. I learned that this module teaches me to be really meticulous with my work as even one small mistake can destroy your entire code or make it wonk. There were a lot of times I didn't understand what I was doing wrong no matter how much I went over the code but I realised that when I slowed down and took my time to properly go through each line, the mistake was very clear to see and fix. Other technical issues were that I was completely new to the code so I had to learn how to tweak it to fit what I wanted to display on my website. All in all, it was a very insightful assignment and I hope that future coding projects go more smoothly.
Comments
Post a Comment