Interactive Design / Project 2: Working Landing Page

on
25.10.12 - 23.11.22 (Week 9- Week 13)
Janaan Ahmed / (0353333)
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2: Working Landing Page
Instructions
  

PROJECT 2: WORKING LANDING PAGE
As the title suggests, this task requires us to create coding for our landing page design from Project 1. I will be using Visual Studio Code with Bootstrap 4.6.

Fig 1.1: Landing Page Design 

1. Navigation & Main
I use the standard nav-bar code on Bootstrap but change my alignment of the links to the right. I also added custom icons from FontAwesome to two of the nav links (search and bag). As for the main, I didn't quite know how to get the h1 to overlap the image as they are placed in two different columns, hence made a slight change in design. The rest of the content including the CTA buttons are placed in rows within the main right column. All columns are col-sm.

Fig 1.1: Progress with navigation and main

2. Value Proposition
For the next section, I place all the elements into two rows within a container. I add a card component to each column in the second row and style them accordingly after giving relevant class names. I did however have issues with alignment when checking the responsiveness every so often. I also tried adjusted the width of the cards.

Fig 1.2: Progress with section 2
Fig 1.4: Coding progress of section 2

3. Products
I decided to slightly alter the design on of this section. This one of the harder parts to figure out as I needed to get card elements within a carousel. After some extensive searching, I happened across a tutorial that explained how to do it. 

Fig: 1.5: Progress of section 3

Fig 1.6: Coding progress of section 3 (visual studio code)

Basically, we replace each image of the carousel with a div (class name card-wrapper). The 3 cards are then placed within this card wrapper. The process is repeated for the each slide. I also looked up how to move the carousel indicators slightly below the carousel so it is more visible, as well as changing the style of the 'next' and 'previous' arrows.

4. Featured
This section was tricky in terms of alignment. The images on the right had to fit within the height of the one of the left. Therefore, I changed their dimensions accordingly (roughly half the height of the longer one). I also needed the button links to be above the image and so added the class name 'card-img-overlay' to the div containing the link. This turns the image into the card background.  I also added 'd-flex align-items end' to get the links to sit at the bottom of the card.

Fig 1.7: Progress with section 4

Fig 1.8: Coding progress with section 4

5. Review & Footer
The review section was equally difficult as section 3 (products). I decided to alter the design a bit as I had some trouble coding my initial design to work responsively. After completing section 5, I moved on to make the footer. I had trouble getting the footer to sit at the very bottom, however did not want to apply sticker footer. I was somehow able to solve this problem by giving it a border on CSS.

Fig 1.9: Issue with footer not sitting at bottom

Fig 1.10: Fixing footer problem using CSS

I then added the content of the footer. The 1st column has the social media icons. Like the nav links, I added icons from FontAwesome, and styled them to the colour I needed on CSS. The middle column required a form input, which I also included a custom icon in. The 3rd column is fairly straightforward.

Fig 1.11: Adding custom icons from Font Awesome

After checking the responsiveness of the footer, I discovered that there was a problem with alignment of the third column. I was able to fixed it by changing the left padding and margin of all the columns on CSS to 0.

Fig 1.12: Issue with footer column alignment


Fig 1.13: Footer column alignment fixed

I then decided to turn my 'leave a review' button into a dropdown button. I added a form group into where the dropdown items sit. I also added custom icons alongside the radios. The dropdown itself however sat above the footer, which is not I wanted.
Fig 1.14: Attempt at making dropdown form

After some troubleshooting, I realised that I needed to add a collapse feature to the dropdown, so it pushes the footer down. 

Fig 1.15: Dropdown form with collapse

After completing all the sections I made adjustments to the fonts, links, buttons, etc.

FINAL OUTCOME:


Fig 1.16: Final HTML [PDF] - (25.11.22)
Fig 1.17: Final CSS [PDF] - (25.11.12)

Reflection
EXPERIENCE
I found this task to be simultaneously exciting and difficult to wrap my head around. However I have learned much and am proud to have completed my first ever working landing page. Though I was able to grasp many basic components through our in-class tutorials, there were so many customisations that needed to be made to match my design: that weren't on the Bootstrap site. Luckily, the forums on stackoverflow, and other sites like w3schools and CodePen helped me find a solution to make said customisations. 

OBSERVATION
I observed that the task became increasingly enjoyable once I began to understand what I was doing (kinda like math). I also tried not to blindly copy-paste codes I found without trying to understand how the tags related to each other. I'm glad I labelled my script as I made several mistakes and had to discard many pieces of code.

FINDINGS
I've learned that it's important to make the base structures/containers before adding the details (like font styling, colour), as alignment and spacing are crucial. It's also super important that I constantly check the responsive of my design throughout the process so I don't end up fixing everything at the last minute and getting stuck.

Comments

Post a Comment