Case Study · Static Web · Interaktiver Törn-Planer
Konzeption, Gestaltung und Entwicklung des eigenen Studio-Auftritts: Eine bewusst schlanke, blitzschnelle statische Website im norddeutschen Editorial-Stil – mit dem interaktiven Törn-Planer als spielerischem Projekt-Konfigurator ohne Fachchinesisch.
Die eigene Studio-Website sollte genau das vorleben, wofür Coast Code steht: Keine überladene Agentur-Schablone, sondern eine einfache, funktionale und charakterstarke statische Website. Großzügige Editorial-Typografie, handgezeichnete maritime Illustrationen und echte Business-Fotografie verbinden sich zu einer klaren digitalen Geschichte mit norddeutscher Haltung.
Klassische Projektanfrage-Formulare überfordern oft mit technischen Fachbegriffen wie CMS, API oder Hosting-Architektur. Als zentrales Highlight führt der Törn-Planer Besucherinnen und Besucher stattdessen in neun maritimen Häfen spielerisch zum eigenen Projekt-Briefing: Ein Lückentext-Logbuch, ein Frachtdeck mit bewusstem 6-Kisten-Limit gegen Feature-Creep, eine mitwachsende Live-Seekarte in der zweiten Person und eine animierte Segelboot-Route münden in einer druckbaren Kurskarte samt strukturiertem JSON-Briefing für das Erstgespräch.
Unter der Haube arbeitet ein moderner Stack aus React 19, striktem TypeScript 5.7 (ohne any) sowie Vite 8 und Tailwind CSS v4, gegliedert nach Atomic Design (Atoms, Molecules, Organisms, Pages). Über ein eigenes Static-Site-Generation-Skript (SSG / Prerendering) wird jede Route beim Build als fertiges, statisches HTML-Dokument vorgerendert und im Browser nahtlos hydriert. Die gesamte Entscheidungs-, Plausibilitäts- und Scoring-Logik des Törn-Planers ist als reine TypeScript-Engine gekapselt und mit Vitest-Unit-Tests abgesichert.
Statt eines störenden Cookie-Banners setzt die Seite auf Privacy by Design: Lokal gehostete .woff2-Schriftarten (Syne & DM Sans) mit Preloading verhindern Drittanbieter-Requests an Google-Server, Umami misst die Reichweite komplett cookielos und Eingaben im Törn-Planer verbleiben bis zum aktiven Absenden lokal im Browser-Tab (sessionStorage). Semantisches HTML5, ARIA-Rollen, Tastatur-Navigation, Fokus-Management sowie dynamische Open-Graph-Meta-Tags, Schema.org JSON-LD und eine automatisch generierte Sitemap runden die technische Umsetzung ab.
Bereit für den nächsten Schritt?
