{"id":2428,"date":"2026-07-28T12:27:05","date_gmt":"2026-07-28T10:27:05","guid":{"rendered":"https:\/\/koredesign.studio\/?page_id=2428"},"modified":"2026-07-30T00:35:00","modified_gmt":"2026-07-29T22:35:00","slug":"seafairing","status":"publish","type":"page","link":"https:\/\/koredesign.studio\/en\/seafairing\/","title":{"rendered":"SeaFairing"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \n \t\t\t

Web Development<\/p>\n\t\t\n<\/a>\n

\n\t\t\t\t\t
\n\t\t\t\t\t

SeaFairing<\/h2>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n
\n \t\t\t

Overview<\/h2>\n\t\t\t\t\t

As part of the Mayerfeld Practicum Program, our 4-person team was tasked with building a full multi-page responsive web application named SeaFairing<\/strong> based on client specifications. The objective was to recreate provided visual design references with precise fidelity while structuring a dynamic 3 to 5-page website architecture entirely from scratch.<\/p>\n\t\t\t\t\t

The Challenge<\/h2>\n\t\t\t\t\t

The client provided specific visual layouts, target typographic hierarchy (Roboto font integration), and color palettes without pre-defined web content or code dependencies. The main constraint was strict technology limitation: frameworks, CSS preprocessors (SASS), or external UI libraries were prohibited, requiring pure Vanilla HTML5 and CSS3. Additionally, coordinating a 4-developer team on a single codebase required strict Git workflows to avoid styling conflicts, ensure cross-device responsiveness, and maintain uniform design execution across all subpages.<\/p>\n\t\t\t\t\t

Our Approach<\/h2>\n\t\t\t\t\t

To ensure structural clarity and efficient teamwork, we executed a phased development strategy:
     - UX Prototyping & Wireframing:<\/strong> Prior to writing code, we proactively designed a foundational wireframe in Figma. This established a unified visual grid, structural breakdown, and page flow to align the team's execution.

     - Progressive Semantic HTML:<\/strong> Following best development practices, we mapped out section-by-section HTML structures before applying styles, ensuring clean DOM trees and proper content flow.

     - Vanilla CSS System & Typography:<\/strong> Configured global CSS custom variables for strict adherence to client guidelines (colors, line heights, font weights, and Roboto typography integration).

     - Layout Architecture (Flexbox):<\/strong> Implemented modern CSS Layout modules (Flexbox) section-by-section (Header\/Navigation, Hero Section, Content Blocks, Multi-Page Views, and Footer) to achieve responsive alignment across device breakpoints.

     - Git Collaboration:<\/strong> Managed a shared GitHub repository with component-based ownership and peer code reviews, ensuring consistent CSS naming conventions and clean merge conflict management.<\/p>\n\t\t\t\t\t

Project Gallery<\/h2>\n\t\t
\n
\n
\n \t\t\t\"\"\/\t\t\n \t\t\t

Visit the Website<\/p>\n\t\t\n<\/a>\n\n<\/div>\n

\n \t\t\t\"\"\/\t<\/a>\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\t\t\t

Results<\/h2>\n\t\t\t\t\t

The finished SeaFairing<\/strong> web platform was successfully delivered within the practicum scope, providing an intuitive, multi-page web experience:
     - High Visual Fidelity:<\/strong> Replicated the client's design blueprints with high precision in spacing, typographic hierarchy, and visual consistency.

     - Responsive Multi-Page Architecture:<\/strong> Delivered a fluid four page structure featuring seamless navigation and cohesive branding across all viewports.

     - Clean & Framework-Free Codebase:<\/strong> Built a light, accessible, pure HTML5\/CSS3 application operating with optimal load speed and zero external dependencies.

     - Streamlined Team Synergy:<\/strong> Managed a clean collaborative GitHub repository among all 4 members, demonstrating effective workflow organization and version control.<\/p>\n\t\t\n<\/div>\n

\n
\n
\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

YEAR<\/p>\n\t\t\n<\/div>\n\t\t\t

2026<\/p>\n\t\t\n<\/div>\n

\n
\n \t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n
\n \t\t\t

SERVICES<\/p>\n\t\t\n<\/div>\n\t\t\t

Web Design & Development
UX\/UI Design & Wireframing
Responsive Web Development<\/p>\n\t\t\t\t\t

TOOLS & TECHNOLOGY<\/p>\n\t\t

\n
\n \t\t\t

Figma<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

HTML5<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

CSS3<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Git<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

GitHub<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

VS Code<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\t\t\t

TAGS<\/p>\n\t\t

\n
\n \t\t\t

Web Development<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

UX\/UI Design<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Responsive Design<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

HTML5<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

CSS3<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Figma Wireframing<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

Frontend Project<\/p>\n\t\t\n<\/div>\n

\n \t\t\t

GitHub Collaboration<\/p>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n

\n \t\t\t

Interested in a similar project?<\/p>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tGet in Touch<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Web Development SeaFairing Overview As part of the Mayerfeld Practicum Program, our 4-person team was tasked with building a full multi-page responsive web application named SeaFairing based on client specifications. The objective was to recreate provided visual design references with precise fidelity while structuring a dynamic 3 to 5-page website architecture entirely from scratch. The […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2428","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/2428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/comments?post=2428"}],"version-history":[{"count":37,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/2428\/revisions"}],"predecessor-version":[{"id":2574,"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/pages\/2428\/revisions\/2574"}],"wp:attachment":[{"href":"https:\/\/koredesign.studio\/en\/wp-json\/wp\/v2\/media?parent=2428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}