Interactive Design
December 12, 2025
Interactive Design: Final Project_Websites Redesign Development
21 November 2025- 13 January 2026
Ge Xianjing 0377636
Final Project Report: Redesign and Full-Stack Development of Richard Koh Fine Art (RKFA) Website
1. Project Overview & Objectives
The primary goal of this assignment was to transform the high-fidelity prototype of the Richard Koh Fine Art (RKFA) gallery into a fully functional, responsive, and multi-page website. This project brings the redesign concept to reality, resulting in a professional platform that includes five core pages: Home, Exhibitions, Exhibition Detail, Artists, Art Fairs, About, and Contact.
My objective was not just to write code, but to demonstrate my ability to apply web design principles, frontend development techniques, and UX best practices. I aimed to create a digital experience that reflects the gallery's minimalist and high-end aesthetic while ensuring the site works seamlessly across all devices, from large desktop monitors to compact mobile screens.
Tech Stack:
HTML5: Semantic structure and content organization.
CSS3: Custom styling, layout control, and complex responsive design.
Bootstrap 5: Rapid development of the grid system and interactive components (Carousel, Modal, Offcanvas).
JavaScript: Custom logic for navigation, dynamic filtering, and scroll interactions.
2. Design Philosophy & Visual Implementation
To maintain brand consistency and convey the gallery's sophisticated atmosphere, I established a strict design system at the beginning of the development phase.
2.1 Visual Consistency
I chose a warm "Gallery Cream" () for the background color to mimic the physical wall texture of an art space, avoiding the harshness of pure white. For typography, I utilized the Jost font family to ensure excellent readability and a modern feel.#F6F3EF
 |
| body font-family |
2.2 Performance Optimization
To ensure a smooth user experience, I optimized the font loading process. By adding the tag in the HTML head, the browser establishes an early connection to the Google Fonts server, significantly reducing text rendering delay.<link rel="preconnect">
 |
| index.html head |
3. The Learning Curve: From Research to Implementation
During the development, I encountered several design requirements that were beyond my initial knowledge. I spent significant time researching documentation and watching tutorials to implement these features correctly.
3.1 Mastering the Grid System & Card Layout
One of the initial challenges was figuring out how to arrange the exhibition cards perfectly. I wanted a four-column layout on desktop that would automatically stack on mobile. After researching the Bootstrap Grid system, I learned how to use classes like to control the layout at different breakpoints.col-12 col-md-6 col-lg-3
 |
| Exhibition Grid |
 |
| Artists Tags Highlight (Visual Feedback) |
3.2 Enhancing Depth with Shadows
To make the artwork images "pop" off the page without looking cluttered, I researched CSS shadow techniques. I discovered Bootstrap's utility classes and applied and to the images, creating a subtle 3D effect that mimics a hung painting.shadow-smrounded
 |
| Add Shadow |
3.3 Fixing Image Alignment
I noticed that some hero images were not centered correctly within their containers, cutting off important parts of the artwork. Through trial and error, I learned about the CSS property , which fixed the issue and ensured the focal point remained visible.object-position: center
 |
| object-position: center |
3.4 Search Dropdown Toggle (Top Nav)
 |
| Cards |
4. Critical Challenges & Problem Solving
This section documents the most difficult hurdles I faced during the project and how I overcame them.
🔴 Challenge 1: The "Responsive Nightmare"
The Problem:
Initially, when I finished the desktop version, I was confident. However, when I tested the site on a mobile view (using Chrome DevTools for iPhone 12), the layout completely collapsed.
The padding was way too wide (), crushing the content into a thin line.
54pxThe navigation links overlapped and looked messy.
The images were too large, causing horizontal scrolling.
The Solution:
This was a major headache. I realized that a "one size fits all" approach doesn't work. I researched Media Queries and wrote a dedicated "Mobile Fix Patch" at the end of my style.css.
I forced the container padding to on screens smaller than 991px.
20pxI used to stack text below images on mobile, improving readability.
flex-direction: column-reverse
Before change
 |
| Mobile page layout issue 1.1 |
 |
| Mobile page layout issue 1.2 |
 |
| Responsive Design |
 |
| Horizontal Track Controls |
 |
| Homepage_Deskop view |
 | ||
| Home Exhibitions_Deskop view |
 |
| Home Exhibitions_Mobile view |
🔴 Challenge 2: Broken Links & File Structure
The Problem:
During the final integration, I realized that many images were not loading (showing broken icons).
Root Cause:
I discovered that I had made a mistake in file management. I had dragged the images folder separately from the HTML folder, causing the relative paths (e.g., ../Project 2/) to break when the site was run locally.
The Solution:
I completely reorganized my project directory. I created a dedicated images folder inside the root project folder and updated all HTML src attributes to point to the correct relative path (images/filename.jpg). This taught me the importance of a clean file structure.
 |
| need a clean file structure |
🔴 Challenge 3: JavaScript Scope Error (bootstrap is not defined)
The Problem:
On the Contact page, I implemented a "Thank You" modal that should appear after form submission. However, nothing happened when I clicked submit. The console showed a red error: ReferenceError: bootstrap is not defined.
The Solution:
After digging into StackOverflow, I learned that because my site.js is a separate module, it couldn't "see" the global Bootstrap library loaded in the HTML. I fixed this by explicitly calling window.bootstrap.Modal, forcing the browser to look in the global window object.
 |
| Contact us |
 |
| Submit—thank you |
🔴 Challenge 4: Inline CSS Refactoring
The Problem:
To get quick results, I initially wrote a lot of styles directly in the HTML (e.g., style="border: 15px solid white"). This made the code messy and hard to update.
The Solution:
I performed a code refactoring session. I extracted all inline styles into style.css, creating semantic classes like .rk-contact-logo-card. This separated the structure (HTML) from the presentation (CSS), following industry best practices.
 |
| Logo Card (Left side) |
 |
| Form Inputs |
5. Core Features Implementation
5.1 Interactive Horizontal Scroll (Art Fairs)
Instead of a standard vertical list, I wanted the "Art Fairs" section to feel like a timeline. I implemented a horizontal scrolling container using JavaScript. I added logic to calculate the scroll position and update a page counter (e.g., "01/05") in real-time, providing users with clear feedback on their navigation.
 |
| Cross-browser Compatibility & Performance 1.1 |
 |
| Cross-browser Compatibility & Performance1.2 |
 |
| Slide |
 |
| Click the button to interact - switch colors |
5.2 Offcanvas Mobile Navigation
To solve the lack of screen space on mobile devices, I implemented the Bootstrap Offcanvas menu. I customized its style to match the site's cream background and added a search toggle inside it, ensuring mobile users have the same functionality as desktop users.
5.3 Other interactive functions
- Search is no longer a single text or link, but a custom floating dropdown
- Hover with introduction card
- Click to view more detail
- Click on the search pop-up in the side menu bar
6. Final Testing & Deployment
6.1 Testing
I conducted rigorous testing across multiple browsers (Chrome, Safari, Edge) and devices. I specifically checked the font rendering on iOS and the flexbox behavior on Safari to ensure consistency.
6.2 Deployment
The final website is hosted on Netlify. I uploaded the complete project folder, ensuring the was correctly named to serve as the entry point.index.html
7. Conclusion & Reflection
This project was a significant learning curve. Moving from a static high-fidelity design to a live, fully responsive website taught me valuable lessons about:
The importance of mobile-first thinking: Fixing the layout for mobile devices took up 50% of my development time.
Debugging skills: Learning to read the console errors and fix JavaScript scope issues was a major breakthrough.
File organization: Keeping assets organized is crucial for a working deployment.
The final result is a professional, functional website that accurately represents the Richard Koh Fine Art brand. I am proud of how I overcame the technical challenges to deliver a polished user experience.
Live Project URL: https://rkfa-03.netlify.app/
HTLM
Demo video_Desktop view
Demo video_Mobile search software view
Comments
Post a Comment