INTERACTIVE DESIGN/ FINAL ASMT

Naura / 0356798 / Interactive Spatial Design
GCD60904 / Interactive Design
Assignment 03: Website Redesign Development

JUMP LINKS:

• Homepage
• Job Listings
• Detailed Job Listing
• Other Countries
• Contact Page
• The website

__________________________________________________________

Instruction:

• Develop a fully functional website based on the previous prototype, reflecting all design and UX decisions.
• Requirements:
• Build the website using HTML, CSS, JavaScript, and frameworks like Bootstrap.
• Match the approved prototype in typography, colors, imagery, and layout.
• Ensure adaptability to desktops, tablets, and mobile devices.
• Test functionality on major browsers.
• Features:
• Create intuitive navigation for easy access.
• Add forms, buttons, and dynamic features to boost engagement.
• Technical Task:
• Minimize file sizes and use efficient coding.
• Conduct usability, browser, and responsiveness tests; resolve issues.
• Host on a live server (e.g., GitHub Pages, Netlify); provide a public URL.
• Submission:
• A live URL to the website.
• An 800–1,000-word report on the development process and challenges, included in your E-Portfolio.

__________________________________________________________

After submitting my prototype, I quickly started coding my website because I had another project on my plate—and working with Unity is a nightmare.

For this final assignment, I initially coded without Bootstrap. I completed my contact page first since it was the simplest, and then moved on to the homepage. However, I realized the pages weren’t responsive across screen sizes, particularly the FAQ section, which became completely misaligned. I started worrying about my marks. At this point, I decided to redo everything using Bootstrap. Thankfully, I hadn’t progressed too far yet.

Learning Bootstrap’s 12-column grid system was initially challenging, but it simplified responsiveness. For instance, col-lg-8 specifies that a column occupies 8 out of 12 slots when the screen width is 992px or larger, while smaller screens stack columns vertically. Once I grasped how the grid worked, I started implementing it across pages.

Homepage:

I began with the navigation and footer, knowing I could reuse them across all pages. A tricky part was the newsletter section. The subscribe button initially overlapped with the input field, so I adjusted the CSS to match the prototype’s color scheme and reduced the text size for better balance.

Fig 1.0 | First Iteration of My Footer

Fig 1.1 | Second Iteration of My Footer

Fig 1.2 | Final Iteration of My Footer

Bootstrap’s navbar-expand-lg and navbar-toggler made handling mobile views much easier. Inspired by a mobile-first design approach I saw in an Instagram reel, I used classes like col-md-4 and col-lg-6 for scaling, while img-fluid ensured images resized correctly. The h-100 class maintained consistent card heights, and gy-5 added spacing between elements.

Fig 1.3 | Countries Section

One of the toughest tasks was achieving the blurred effect for the “Best Gigs” section. I wrapped job cards in a div I named blurred-cards to apply a clean blur. For the “More Countries” section, I used Flexbox to align country names and codes, applying modular classes like .country-name and .country-code for cleaner control.

The companies section gave me a headache because the logos had inconsistent dimensions. I used this website to have all of them having the same height. Then I wrapped each logo in a company-logo-wrapper div - creating a consistent square (or rectangular on larger screens) container. Using a padding-bottom trick, object-fit: contain, and absolute positioning, I achieved consistent sizing without stretching or cropping.

Fig 1.4 | Companies Section

Job Listings:

This page was the most frustrating. I struggled to make the tag filtering system match my prototype. I wanted 2-3 tags per row, so I updated the container to a flexbox with d-flex, flex-wrap, and gap-2. Adding d-inline-flex ensured buttons aligned correctly. Initially, the spacing still looked uneven, so I experimented with margins and padding to achieve a clean, organized look.

Detailed Job Listings:

The Job Overview and Skills Overview sections were the most time-consuming. The skills progress bar initially failed when I experimented with clip-path and overflow: hidden. I almost resorted to images but pushed myself to code it. Using a conic-gradient, I created a 75% filled circular bar. A white cutout made it look like a ring, and adjusting sizes achieved the desired thickness.

Fig 3.0 | First Graph

Fig 3.1 | Second Graph

Fig 3.2 | Third Graph

Fig 3.3 | Fourth Graph

This approach required a lot of trial and error. At one point, the circular bar misaligned with the text inside, so I used position: relative and transform to center it perfectly. Once completed, it looked professional and dynamic, which made the struggle worth it.

The “Similar Vacancies” section reused card layouts from the homepage. However, when I set a teal background, unintended gaps appeared on the sides. After hours of debugging, I realized the container restricted the background width. Moving the cards into a new section while leaving the title in the original container fixed the issue. Negative margins initially seemed like a quick fix, but they broke other elements, so I opted for this cleaner solution.

Fig 3.4 | The "Cropped" Background

I literally spent hours trying to remove those gaps on the sides. I tried extending the teal background to full width using negative margins (as ChatGPT suggested) and even setting the width to 100vw, but nothing worked. That's when I realized the container was inside a section that wraps everything to a specific width, which is why the gaps appeared. So, I decided to take it out of the main section and create a new one, leaving the title with the original container. This way, the background covers just the cards and not the title. I took the easier route here because I feel like I’ve already lost too many brain cells over this!

Other Countries:

Formatting the alphabet filter and positioning the sorting section were tricky. Initially, the alphabet stretched across the viewport. I capped its width at 600px, ensuring it wrapped neatly. I also reduced the search bar’s border-radius, adjusted padding, and resized the globe icon for better alignment. 

Fig 4.0 | Alphabet Filter Spanning Across the VW.

Fig 4.1 | My First Adjustment

 

Fig 4.2 | Positioning the Sorting Filter and Rounding the Tag Filter

A persistent issue was a white gap below the sorting filter. I resolved this by adding padding and extending the background color to match the hero section. Another minor adjustment was ensuring the filter buttons were square and evenly spaced using flexbox and fine-tuning the borders. If it works, it works!

Contact Page:

This page was straightforward, but adding a Google Map link broke my layout. The issue stemmed from an improper grid structure and missing flex properties—a mistake I quickly fixed after revisiting my Bootstrap setup. I also ensured the form elements stacked correctly on mobile screens by applying responsive classes like col-12 and col-md-6.

Fig 5.0 | Contact Us Form Problem

Since one of the requirements is to conduct usability, browser, and responsiveness tests, I tested it on three different browsers, in addition to Google Chrome, across various devices. It worked on all of them, and the loading time was minimal.

Iphone (portrait - safari)

Ipad (landscape - firefox)

Laptop (Microsoft edge)

Reflection:

This project challenged me to rethink my approach to responsive design. Initially hesitant to use Bootstrap, I now appreciate its efficiency and structure. Debugging issues like overlapping elements, misaligned sections, and unintended gaps taught me valuable lessons about grid systems, Flexbox, and CSS adjustments. I also learned the importance of clean, modular code, as it saved me time when reusing components across pages. 

Although there were moments of frustration—like the misaligned logos or the stubborn gaps—finding solutions felt rewarding. Pushing through these challenges made me a more confident developer. Understanding Bootstrap’s potential for building responsive and user-friendly designs was a turning point for me. While exhausting at times, the effort paid off, and I’m proud of the final product.