Final Project
Interactive Design Final: GRAY SNOWBOARDS Website Construction
Project Documentation | HTML5, CSS3, Responsive Design
1. Project Requirements
The objective of this project is to develop a fully responsive, static website based on a specific set of requirements, ensuring cross-browser compatibility and strict adherence to the design prototype.
2. Design Phase (Figma LOFI)
Before coding, High-fidelity prototypes were created in Figma to establish the visual identity: a minimalist black-and-white aesthetic focusing on "Tech" and "Performance".
2.1 Homepage & Visual Style
The homepage features a large visual banner and a clean list layout for news/information.
2.2 Product & Technology
2.3 Riders & Catalog
3. Code Implementation
3.1 Infrastructure & Global CSS
The project starts with defining the folder structure (css, images, js) and setting up the global styles (Reset, Font, Colors) in `style.css`.
3.2 Header & Navigation
The header uses Flexbox to align the Logo and Navigation. A hamburger icon (`.menu-toggle`) is included for mobile interactions.
3.3 Hero Banner
The main visual section uses relative positioning for the image and absolute positioning for the centered text overlay.
3.4 Information List & Album
The news section uses an unordered list (`ul`) with bottom borders. The photo album below it displays images in a row.
3.5 Product Lineup
Products are displayed in a responsive grid using `flex-wrap: wrap`. Each item takes up 21% width to fit 4 items per row.
3.6 Technology Section
Layout for complex text-image combinations, using `aspect-ratio` to maintain image stability during loading.
3.7 Team Riders
Features hover effects (`transform: scale`) and a dynamic underline for the active menu item using the `::after` pseudo-element.
3.8 Catalog Archive
A two-column layout for the latest catalog, followed by a grid for the archive history.
3.9 Footer
The footer includes copyright info, links, and circular social media icons created with `border-radius: 50%`.
4. Responsive Adaptation
Finally, Media Queries (`@media max-width: 1024px`) are used to adapt the layout for tablets and mobile phones. Key changes include resizing fonts and converting the navigation bar into a hamburger menu.
REFLECTIONS
This project served as a bridge between my design vision and technical implementation. The process of translating the minimalist "Gray Snowboards" aesthetic from a LOFI prototype into a responsive website was full of learning curves. Navigating the intricacies of CSS Flexbox and media queries was challenging at times, but it taught me to appreciate the precision required in front-end development. The journey from a blank editor to a fully rendered page was both demanding and exciting.
I feel that my technical confidence has grown substantially. I’ve become more adaptable in my problem-solving, learning to look for efficient coding practices rather than just quick fixes. The fear of breaking the layout has been replaced by the curiosity to understand how different properties interact.
Overall, I am pleased with the visual consistency and functionality of the final product. It represents a significant milestone in my interactive design journey. I look forward to applying these refined skills to future projects, continuing to bridge the gap between creativity and code.
Comments
Post a Comment