Labels

Interactive Design | Final Project - Final Working Website

23/06/25 - 21/07/25 [ Week 10 - Week 14 ]

Nicco Chew Jin Xun (0366563)

Interactive Design | Bachelor of Design (Hons) in Creative Media | Taylor's University

Tutor: Mr. Shamsul

Table of contents

Final Working Website [ 40%]

Instructions

Process Work

This redesign project is a continuation of Project 2's prototype, and the final deliverable required a fully functional website consisting of five web pages:
1. Homepage
2. Contact
3. About Us
4. Services
5. More

For the Final Project, I began by finishing the remaining pages by bringing the total to five since Project 2 only required a minimum of three core content pages. I then proceeded with the web development process.


I decided to design five core content pages for my website which are "Home," "About," "Contact," "Services", and "More." Before beginning the development process, I separate HTML and CSS files for each page and organized all the images and icons from the prototype into a single folder.



Home Page
For the navigation bar, I started with Bootstrap’s built-in template and then customised certain parts to match my preferences. Following the prototype, I designed the navbar as a rectangular grid layout and arranged the items in an orderly sequence. Initially, the five pages included “Home,” “About,” “Green Chair Recycling,” “Services,” and “More.” However, I soon realised that “Green Chair Recycling” and “Home” essentially contained the same content. In addition, I recalled Mr. Shamsul’s advice that the “Contact” page should be placed in a prominent position to make it easier for audiences to find and reach out. Taking both points into account, I made adjustments to the navigation bar to improve clarity and usability.

Typography hierarchy:

  • Decorative script for emotional impact headings (.explora).
  • Clean sans-serif for subheadings and CTAs (.space-grotesk).
  • Serif for body text to improve long-form readability.
Color scheme: Background matches the brand’s soft beige tone (#ecdfcc-like), allowing green volunteer shirts and recycling bins to stand out in the hero image.


Speaking of the navigation bar, I also encountered some issues where the text would shift out of place or overlap with other elements. This made the layout look messy and inconsistent. To address the problem, I adjusted the spacing in the CSS by modifying properties such as margin, padding, and gap to ensure each navigation item had enough room. I also tested the layout across different screen sizes to make sure the text remained properly aligned and visually balanced on all devices.



On the homepage, I placed a prominent "Contact" button right at the centre to emphasise the importance of getting in touch. This strategic placement ensures that visitors can quickly notice and access the contact option without having to search through the navigation menu. In the CSS, I styled the button to stand out visually, using a rounded design, a bold font, and a contrasting colour scheme. I also implemented a smooth hover effect which slightly changes the background colour and enlarges the button with a subtle scaling animation,  so that it feels more interactive and engaging when users move their cursor over it.




Since Green Chair Recycling offers three main services, I designed the "Services" section to feature three separate rectangular boxes, each representing one service. Inside each box, I included a relevant image to visually communicate what the service is about, making the section more engaging and easier for visitors to understand at a glance. To enhance interactivity, I applied hover effects so that each box responds visually when the user moves the cursor over it, creating a more dynamic and inviting browsing experience.

I also encountered a layout issue where the service buttons were excessively long, stretching across the entire width of the page and disrupting the overall balance of the design. This not only looked unprofessional but also made the section feel visually heavy. I had to experiment with different CSS properties such as width, padding, display, and margin while repeatedly previewing the page to ensure the buttons looked neat and proportionate. After several rounds of fine-tuning, I successfully adjusted them to a more compact and consistent size, making the layout cleaner and more visually appealing.

The buttons were given a dark background with white text for contrast, and I added a hover effect that slightly reduces opacity, making it clear to the user that the element is clickable. These small design touches help maintain visual harmony while encouraging interaction across the services section.



Footer
The footer section of my website also presented several challenges during the design process. I spent a considerable amount of time repeatedly adjusting the spacing and the placement of text, as even a minor change in the CSS could cause the entire layout to shift unexpectedly. This required patience and precision to ensure that every element was aligned neatly and that the overall structure remained consistent across different screen sizes.

For the content, I included key contact information such as the company’s phone number and email address, each linked so that users can directly call or send an email with just one click. I also added social media icons for Facebook, Twitter, and Instagram, each embedded with links that open in a new tab. This way, visitors can easily navigate to Green Chair Recycling’s social media pages for updates and engagement without leaving the website.



Contact Page
On the left side, the contact form contains labelled fields for name, surname, email, and message. Each field includes a placeholder text to guide users in filling out the required information. The text area for the message is spacious enough to encourage longer, more detailed submissions. The "Submit" button is styled for high visibility and ease of interaction, ensuring that once users have filled in the form, they can quickly send their message without confusion.

On the right side, a short and welcoming text section titled "Get in Touch" reinforces the page’s purpose. The message - "We genuinely care about you and your wellbeing. Let us know how we can serve you better." encouraging visitors to feel comfortable reaching out.


From a design perspective, the .contact-container CSS class is responsible for aligning the two main sections side by side. I used display: flex to create a responsive layout, justify-content: center to keep the content horizontally centred, and gap: 3rem to ensure adequate spacing between the form and the text panel. The background colour #584738 was chosen to contrast with the lighter form box, drawing attention to the interactive elements. The container also has padding: 3rem for breathing space and min-height: 100vh to ensure it fills the entire screen height, creating a full-page feel.




About Us Page
The About Us page serves as an introduction to Green Chair Recycling, presenting the organisation’s identity, mission, and the inspiring story behind its creation. At the top of the page, the section titled "Who we are?" highlights the company’s Mission and Vision side by side in clean rectangular boxes. The mission emphasises inspiring, educating, and facilitating waste diversion to minimise collective environmental impact, while the vision paints a picture of a caring community striving for minimal waste and sustainable living. 

From a design perspective, the page uses a combination of warm, earthy tones and clean typography to reflect sustainability and professionalism. Sections are clearly separated with headings, imagery, and white space to make the reading flow comfortable. 


Founder Section (Liliana’s Profile):
This section is structured in two columns: the left column contains a circular founder portrait (border-radius: 50%), while the right column contains text describing her background, volunteer work, awards, and education. I used flex: 1 for the text container to control width and line-height for better readability.

Why Green Chair?: The right column contains a quotation from Liliana, while the left column displays a large image. I applied display: flex with a gap property to control spacing. The image has max-width: 100% and border-radius for responsive and smooth edges.



Services Page
One major challenge of services page was aligning text and images consistently. For example, in the hero section, I found that text would sometimes “jump” up or down compared to the image, especially on smaller screens. Adjusting margin, padding, and flex properties helped, but I still had trouble getting pixel-perfect alignment.

Another difficulty was controlling list item spacing. Some lists were too cramped while others had excessive space. I experimented with line-height, padding-left, and margin-bottom for <li> elements until they matched the intended design.


Event Waste Management:
This section uses a large <h2> heading styled with a heavier font weight and a slightly larger size for hierarchy. The image is placed above a text block containing a <ul> list of service features. The list uses custom bullet points and consistent line spacing (line-height: 1.6) for readability.

Consulting Services:
I structured this section in the same format for visual consistency which are a heading, an image, and a descriptive list. This prevents the page from looking fragmented and makes it easier to style globally.

Outreach Services:
Similar structure, but the list also includes nested items for "Past speaking events include:" followed by two bullet points. This required careful <li> formatting so indentation and spacing looked clean.



More... Page ( Engagement & Volunteering )
Actually, I encountered some problems with this page, as I couldn’t adjust it to the font I wanted.

Hero Image Section

  • Contained within .image-container with <img> scaled via max-width: 100% for responsiveness.



Netlify Deploying
After completing the HTML for all the pages, I proceeded to deploy the project on Netlify. This step allowed me to host the entire website online, making it accessible from any device with an internet connection. The process involved uploading my finalized files, ensuring all links and assets were functioning correctly, and verifying that the layout and styling were consistent across all pages after deployment.


All the Challenges I faced

1. Navigation Bar (Navbar) Issues
  • Text in the navbar was misaligned or overlapping.
  • Needed to adjust CSS spacing and positioning to achieve proper alignment across devices.

2. Footer Layout Difficulties

  • Spacing and placement of text and elements (email, phone, social icons) kept shifting whenever I made small adjustments.
  • Required precise CSS control to keep the layout consistent.
  • Adding clickable links for phone number, email, and social media icons while keeping the design clean.

3. Contact Pages Design & structures

  • Aligning form fields and text properly within the layout.
  • Ensuring that the design matched the style of other pages.

4. Font Styling Problem

  • Encountered difficulties applying the desired font style to certain pages despite adding font settings in CSS.

5. Responsive Adjustments

  • Making sure text, buttons, and layouts looked good on different screen sizes.

Final Outcome






Reflection

Experience
Throughout this assignment, I worked extensively on building and styling multiple HTML pages, ensuring each section of the website was functional, visually balanced, and consistent. The process required careful attention to detail, from creating headers, footers, and navigation menus to implementing interactive elements such as buttons with hover effects. I faced several coding challenges along the way like aligning text beside images, adjusting button sizes, managing spacing in the footer, and troubleshooting font issues in the Contact page. Each problem demanded patience, repeated testing, and incremental adjustments until I achieved the intended design. Finally, once all the pages were complete, I deployed the website through Netlify, marking the first time I had pushed a fully coded project online.

Findings
Through this project, I discovered the importance of precision in web development. Small changes in CSS such as padding, margins, or width can drastically alter the entire layout. I also learned that interactive elements like hover effects not only improve user engagement but also make the website feel more polished. The deployment stage revealed the significance of organizing files correctly to avoid missing assets or broken links. Additionally, I realized that problem-solving in coding often involves trial and error, and that visual design choices must always consider usability and user experience.

Observation
I observed that front-end development is not just about writing code, it’s a process of continuously refining and balancing design with functionality. Even a small component, like a button or a footer link, can impact how users perceive and navigate the site. Moreover, every adjustment affects the overall structure, so changes must be made thoughtfully. This assignment also highlighted the value of consistent styling across all pages, as it creates a cohesive brand image. Most importantly, I noticed that my workflow improved as I became more familiar with debugging and layout adjustments, making later stages of the project more efficient than the beginning.

Labels:

Comments

Post a Comment