Interactive Design（Final Project）
Interactive Design Final Project
21 November 2025 - 11January 2025
LI YUHAN (0379857)
LI YUHAN (0379857)
In Project 2 of the course, I designed a warm and elegant web interface for Bean Depart coffee shop using Figma. As the final assignment, I needed to bring this design to life through coding. After diligent work, I successfully completed this project in VSCode and now wish to share this journey from design to code.
1. Project Overview and Technology Selection
This project is a brand website that integrates display, interaction, and information acquisition functions into a cohesive digital platform. The core pages include Homepage, Product Showcase, Service Menu, Brand Story, Customer Testimonials, and Contact Us. Each page serves a distinct purpose while maintaining visual and functional consistency throughout the entire website experience.
Technically, I chose to use a pure native technology stack consisting of HTML5, CSS3, and Vanilla JavaScript, deliberately avoiding any frameworks or libraries such as React, Vue, or Bootstrap. There are three primary reasons for this fundamental decision: First, pursuing ultimate performance—native code requires no additional runtime libraries to be loaded, thereby achieving minimal file size and fastest possible rendering speed for end users. Second, as a comprehensive practice project, it aims to consolidate and deepen my understanding of core web technologies at their most fundamental level. Third, ensuring maximum flexibility and control, making the final product completely independent of third-party ecosystems with excellent long-term maintainability and predictability.
Code Example Page Structure (homepage.html):
2. Frontend Architecture and Modular Practices
2.1 CSS Architecture
A "base + page-specific" layered model is adopted for organizing the CSS architecture throughout this project. The styles.css file serves as the global foundation, defining reset rules that normalize browser defaults, establishing a consistent typography system, setting the color scheme, and styling common components such as the navigation bar to ensure brand visual consistency across the entire website. Each main page has its own dedicated stylesheet (e.g., homepage.css, products.css, menu.css), containing only the layout styles unique to that particular page. This isolation strategy effectively prevents global style pollution, keeps page styles highly cohesive, and significantly improves development efficiency and debugging convenience when working on specific pages.
 |
| Global Base Styles (css/styles.css) |
2.2 JavaScript Architecture
JavaScript logic is organized into three distinct functional modules, all encapsulated using the IIFE (Immediately Invoked Function Expression) pattern to completely avoid global variable pollution and maintain clean separation of concerns:
form-validation.js: This module is solely responsible for handling client-side form validation. It listens for submit events on all forms, validates input data including email format and required fields, and provides immediate visual feedback through border color changes and modal prompts when validation fails, thereby improving both data quality and user experience.
video-player.js: This module provides click interaction functionality for video preview areas, redirecting users to external video platforms to watch full content, ensuring that video resources do not impact the critical rendering path of the website.
feature-detection.js: This module serves as the core of compatibility handling. It proactively detects browser support for specific HTML5 and CSS3 features such as Flexbox, Grid, and WebP, then adds corresponding feature class names to HTML elements, supporting progressive enhancement strategies.
 |
| IIFE Encapsulation Pattern (js/feature-detection.js) |
3. Core Challenges and Solutions
3.1 Responsiveness and Cross-Browser Compatibility
Challenge: Achieving seamless responsive adaptation from large desktop screens to small mobile screens while simultaneously ensuring basic usability and core functionality across multiple browsers, from the latest Chrome to older versions of Internet Explorer.
Solution: Fully adopting CSS Flexbox as the primary layout model, leveraging its powerful alignment, distribution, and space allocation capabilities to efficiently construct adaptive components and page structures. Designing media query breakpoints based on content rather than popular device sizes—when content begins to break or becomes difficult to read at a certain viewport width, a breakpoint is set to make adjustments, achieving truly "content-first" responsive design. Using feature-detection.js to detect feature support and add class names (e.g., flexbox, no-flexbox), providing a foundation for writing CSS rules targeting different browser capabilities, practicing the "progressive enhancement" design philosophy.
 |
| Flexbox Layout and Media Queries (css/homepage.css) |
3.2 High-Performance Image Delivery
Challenge: The website contains large amounts of high-quality visual images. If not optimized, these would cause slow loading on mobile networks, waste bandwidth, and negatively affect user experience and core performance metrics.
Solution: Applying the srcset and sizes attributes of the `<img>` tag to establish a foundational architecture for responsive image loading. The srcset attribute allows specifying width descriptors for images, enabling browsers to intelligently select the most appropriate image file based on the user's device pixel ratio and network conditions. The sizes attribute informs the browser of the expected rendering dimensions of images at different viewports. By combining sizes information with the current viewport, the browser can precisely select from the srcset candidate list an image that meets display requirements while having the smallest download size. This architecture reserves expansion space for providing multi-resolution image versions in the future.
 |
| Responsive Images (products.html) |
3.3 Client-Side Form Validation
Challenge: Implementing strict yet user-friendly frontend validation to prevent invalid data submission while not interrupting user workflow with harsh error reporting.
Solution: form-validation.js implements a multi-layered validation strategy. First, event listening and interception—using querySelectorAll to obtain forms and binding submit events via addEventListener. In the event handler, preventDefault() is called first to stop the form's default submission behavior, creating space for validation. Second, validation and feedback—applying regular expression and logic checks to each input field. When validation fails, red border styles are added to input boxes and friendly prompts are displayed through modal dialogs, enabling users to immediately locate and correct problems. Third, experience optimization—after successful validation, the form automatically resets. The modal provides a confirmation button for users to close the prompt. The overall interaction is smooth and natural, and form data is only sent to the server after all validations pass.
 |
| Validation Logic (js/form-validation.js) |
4. Summary and Reflection
Through the complete development cycle of this project, I deeply realized that even with a seemingly "traditional" native technology stack, high-performance, highly maintainable web applications with excellent user experience can be built through rigorous architectural design, modular engineering thinking, and deep application of modern browser APIs.
The core conclusion from this practice is: mastering fundamental principles is the cornerstone for solving complex problems. Whether optimizing performance through srcset/sizes, organizing code through IIFE and modularization, or achieving graceful degradation through feature detection, all require developers to deeply understand browser mechanisms and language features. This ability to understand "why"—knowing not just how but the underlying reasons—is the key distinction between a framework user and a true frontend engineer. In the future, I can seamlessly apply the architectural thinking and performance optimization experience gained from this project to any technology stack or framework.
Website link:
GoogleDrive link:
DEMO Vedio:
Comments
Post a Comment