Final Project / Final Working Website
April 21,2025
ZHOU BOYING / 0369087
20/06/2025 - 20/07/2024(Week 10 - Week 14)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Final Project / Final Working Website
LIST
1. Lectures
2. Instructions
3.Final Project / Final Working Website
4. Feedback
5. Reflections
Lectures
Week 10
Notes:
1. Basic HTML Structure
Learned the basic structure of an HTML webpage, including the head and body sections.
2. Common HTML Tags
Heading tags: h1 to h6
Paragraph tag: p
List tags: unordered list (ul), ordered list (ol)
Emphasis tags: bold (b), italic (i)
Line break tag: br
Horizontal line tag: hr
3. Responsive Design Basics
Learned how to use media queries to make webpages adaptable to both mobile phones and computers.
Responsive design helps webpages automatically adjust their layout on different devices.
4. Web Layout and Arrangement
Learned how to arrange images in a horizontal row.
Footer content, including copyright information and social media icons, should be aligned in the same row.
5. Hamburger Menu Design Requirements
The hamburger menu button should be round in shape.
When clicking the menu button, the color should change (for example, turn white or another color).
6. Additional Web Design Details
Avoid using gray backgrounds in web design.
Make sure the webpage font adapts well to different screen sizes and devices.
Reflection
In this week’s Interactive Design class, Mr. Shamsul taught us the basic structure of HTML and how to use common HTML tags. We also learned the fundamentals of responsive design, which allows webpages to work on both mobile and desktop screens. Mr. Shamsul explained how to arrange images in a row and how to align footer content like copyright and social media icons in one line. He also guided us on designing a hamburger menu with a round button that changes color when clicked. Additionally, he reminded us to avoid using gray backgrounds and to ensure that the webpage font displays well across different devices.
Week 11
In Week 11, Mr. Shamsul reviewed our Final Project progress and guided us on refining the structural layout of the website. During this week, I finalized most of the main sections including the homepage, company introduction, services page, and quotation module. I implemented a responsive layout using HTML, CSS, and Bootstrap, and also optimized the navigation bar to remain fixed and centered on the screen. Mr. Shamsul commented positively on the overall clarity of my layout and appreciated the clean section divisions. However, he reminded me to pay attention to image alignment, mobile responsiveness (especially for button padding), and to double-check all hyperlinks. He also emphasized improving accessibility by ensuring font contrast and legibility across all devices.
Week 12
In Week 12, we presented our final working website in front of the class. I showcased my redesigned website for a fencing company located in California. I explained how I improved the visual hierarchy by introducing a hero banner with a strong headline, used grid systems for the services section, and embedded a “Get a Free Quote” button early in the user journey to drive engagement. The website was fully responsive, and I demonstrated its mobile and desktop versions live in class. I also added interactive elements such as hover effects for buttons and icons, and ensured smooth scrolling across sections.
Mr. Shamsul praised the professional appearance of the site and noted that the new service section with short descriptions and relevant icons made it easier for users to scan and understand. He also acknowledged the improvement in typography and color harmony. However, he reminded me to compress large images for faster loading speed and to make sure that all external links open in new tabs. Before final submission, he suggested validating my HTML and CSS code, checking for browser compatibility, and preparing a reflective blog post to explain my design decisions.
Instructions
Final Project / Final Working Website
1. Introduction
For this final project, I redesigned a website for a real fencing company called Pacific Coast Fence. Their old website looked outdated, had too much text, and was not mobile-friendly. My goal was to build a modern, clean, and responsive website that is easy for users to navigate.
2. Development Process
I began this project by analyzing the problems in the original website. In my earlier presentation, I proposed a redesign strategy that focused on visual clarity, user experience, and responsive layout. Based on the approved prototype, I started developing the final version using HTML, CSS, and Bootstrap.
The final website includes five main pages:
- Home
- Services
- Products
- About
- Contact
I followed my prototype design closely by applying a consistent layout, clean typography, and a natural wood-and-grey color scheme to reflect the brand’s identity. I used Bootstrap’s grid system to structure the content and ensure responsive behavior. I also made the navigation bar sticky at the top of the page to improve usability, and added enough spacing between sections to enhance readability.
Homepage layout with a full-width hero banner and a clear CTA. The top navigation is sticky, and the main sections are spaced for easy scanning.
The Services page displays all fence categories using an icon grid layout. Each category is clickable and clearly labeled.
Products page showing detailed fencing options in a consistent format. Users can easily compare product types visually.
About page introduces the company’s story and values using balanced text and imagery, maintaining the overall color theme.
Contact page includes a clean form, embedded Google Map, and key contact information, optimized for both desktop and mobile.
3. Features and Design Choices
- Responsive design: The layout adjusts for desktop, tablet, and mobile screens
- Sticky navigation bar: The nav bar remains visible while scrolling
- Hero banner: Full-width banner image with a bold headline
- Service section: Organized in a grid with clear icons and labels
- Interactive buttons: All main buttons include hover and click effects, such as color change and soft shadow rendering, to give users visual feedback
- Contact form: Includes user input and Google Map
- Back to top button: For better navigation on long pages
- Consistent design: Same color scheme, fonts, and spacing throughout the site
- Mobile Interaction: Dropdown and CTA Behavior
4. Challenges and Solutions
Mobile Compatibility Fixes
One of the biggest challenges in this project was making the website display properly on mobile devices. At first, the layout looked broken on smaller screens. The content was pushed to the left, and some rows were misaligned.
To solve this, I added custom media queries targeting mobile breakpoints. For example, I manually set margin-left: 0for .row elements only on mobile screens. This helped re-center the content and fix the alignment issue.
I also created a separate CSS file called logo-nav.css to organize the mobile layout of the logo and navigation bar. I used the position property to fix both the logo and the nav bar to the top of the screen, and adjusted the heights of the surrounding div elements to avoid overlap.
To improve readability on smaller screens, I reduced font sizes and element heights specifically for mobile view. These adjustments significantly improved the layout and usability of the site on Android devices.
Mobile layout comparison before and after breakpoint adjustment. The left image shows oversized text and broken layout before media query fixes. The right image shows the improved version with balanced font size and a clear navigation bar.
Safari & iOS Compatibility Issues
After deployment, I discovered that the layout appeared correctly on Android phones, but some issues persisted on iOS devices—especially with image scaling using object-fit,Images looked distorted or failed to maintain aspect ratio.
To resolve this, I implemented the -webkit-object-fit: cover; prefix to ensure compatibility with older Safari versions. I also added object-position: center; to keep the images centered properly. These changes helped maintain layout consistency across platforms.
In addition, I used @supports rules in CSS to detect Safari-specific rendering behavior, ensuring graceful fallback styles.
As a final step, I included a device detection script using JavaScript:
Fig 2.9 JavaScript Device Detection Script
Left: Display on iOS (Safari). The object-fit property fails to work properly, causing the hero image to crop incorrectly and misalign with the layout. This highlights Safari’s partial support for object-fit, especially on iOS devices.
Right: Display on Android (Chrome). The hero image scales correctly using object-fit: cover, preserving the layout’s intended visual balance and maintaining proper alignment between image and text.
Fig 2.11 Final Mobile Layout (After Fixes)
Mobile view after all compatibility adjustments were applied. The image is correctly scaled and centered using object-fit: cover and object-position: center. Navigation bar and content are properly aligned, ensuring visual consistency across Android and iOS devices.
5. Final Testing and Deployment
I tested the website on Chrome, Firefox, and Safari to make sure it looked and worked the same across browsers. I also used responsive design tools to preview the layout on tablets and smartphones.
The final version of the website is hosted on GitHub Pages:
Pacific Coast Fence.
I also uploaded the full project folder to Google Drive and shared the link in my E-Portfolio as required.
https://drive.google.com/drive/folders/1ahpt4Gq07zOIb7X0cGra04BAXGnV4lec?usp=sharing
6. Reflection
Experience
In this project, I experienced the full process of turning a design prototype into a real, functional website. From making a proposal and creating a prototype to developing the final version using HTML, CSS, and Bootstrap, I learned how to combine design thinking with technical skills. During the development, I faced challenges like mobile responsiveness, layout misalignment, and overlapping elements. I solved these issues by adjusting breakpoints, separating CSS files, and refining structure step by step. This helped me realize that web development is not a one-time task—it’s a process of testing, fixing, and improving.
Observation
Through this project, I observed how important user experience and visual hierarchy are in web design. Before, I only focused on whether the page looked nice. But now, I understand that things like information structure, navigation clarity, button visibility, and white space can all affect how users interact with the site. For example, in the original site, there was no clear quote button, which made it hard for users to take action. In my new design, I added a “Get a Free Quote” button and placed it clearly, which improved the site’s usability and professional feel.
Findings
This project helped me realize that web development is not just about layout or coding. It’s about solving problems through design. For example, when users couldn’t find service information, I improved the information structure. When the navbar covered content on mobile, I fixed it with CSS position and padding. When text was too small to read, I wrote media queries to adjust font sizes. These small adjustments taught me that web design is a user-centered process. I also grew from someone who could only design screens to someone who can now build a usable, working website.
Semester Reflection – Interactive Design Course
Exercise 1 – Website Analysis and Comparison
In Exercise 1, I analyzed a variety of websites with different branding and design goals. I learned how visual hierarchy, content structure, and interaction design reflect the values and priorities of each brand. For instance, sites like NITE RIOT and AMANATION use immersive visuals to capture attention, while platforms like ALPBIO and Dass focus on clarity and professionalism. This comparison taught me that web design is not just about making things look good—it’s about strategic communication and audience alignment.
Exercise 2 – Web Replication Practice
In Exercise 2, I focused on replicating the layouts of two websites—DASS and WeMake. This task helped me sharpen my visual analysis skills and understand layout systems like grids, spacing, and alignment. I practiced using Adobe Illustrator to rebuild UI components and developed stronger sensitivity to typography, color use, and interface structure. The contrast between the structured grid of DASS and the minimal, airy design of WeMake deepened my understanding of stylistic variations in web design.
Project 1 – Real-world Website Redesign
Project 1 challenged me to redesign a real fencing company website. I began with a proposal and prototype in Figma, then developed the site using semantic HTML, external CSS, Flexbox, and Bootstrap in Dreamweaver. I practiced solving layout and mobile responsiveness issues, and experimented with UI animations and interactive elements.
Although some areas like image consistency could be improved, this project gave me hands-on experience in full-stack interface building—from structure to style to interaction—and boosted my confidence in combining design and development effectively.
Project 2 – Web Replication of DASS & WeMake
In Project 2, I replicated the homepages of two websites—DASS and WeMake—to study layout systems, typography, color use, and modular UI structure. DASS features bold color contrast and strong grid control, while WeMake uses whitespace and flowing rhythm.
I used Adobe Illustrator to precisely rebuild elements and maintain visual consistency. Through this hands-on process, I learned how different design decisions impact the readability, hierarchy, and user experience of a website.
Overall Reflection
Through this course, I not only improved my technical coding skills, but more importantly, I developed a new mindset: designing for the user. I learned how visual design, layout logic, and interactive behavior all work together to enhance the user experience. Now, I feel more confident combining creativity with functionality to build websites that are both beautiful and practical.
I’m also really thankful to Mr. Shamsul for all the support throughout the semester. His feedback was always clear and helpful—even when I got stuck with Dreamweaver issues or wasn’t sure if my layout worked well. I appreciated his patience during our progress checks, and how he gave us the freedom to explore our own design direction. His guidance truly helped shape this learning journey.
Comments
Post a Comment