Website Design Process
Preview hub for the Dr. Jakob Schaad website. Each card is a fully isolated HTML page. The floating service menu in the bottom-right corner always lets you switch between versions.
Home page
Live development branch — evolving from the approved Concept 2. All ongoing work on the Startseite happens here.
Open ActiveÜber mich
About page — hero topper with portrait + photo strip, full Berufsbiografie in two layout variants (vertical stepper / editorial 4-col stations).
Open ActiveLesezeichen
Reading archive — editorial broadsheet layout. Featured latest reading on top, hairline-separated rows below. Typographic cover-plates as honest placeholders until real artwork arrives.
Open ActiveKontakt
Dark split — entire page is the studio backdrop. Headline + tags + meta-list left, form on a light paper tile right. Single-screen, no second white section.
Open LegalImpressum
Swiss-standard responsible-party page — Verantwortliche Stelle, Handelsregistereintrag, MwSt, disclaimers, copyright. Placeholder fields marked for client review.
Open LegalDatenschutzerklärung
revDSG + DSGVO compliant privacy boilerplate — server logs, contact form, external services, user rights, retention, security. Placeholders for client-specific values.
Open ApprovedConcept 2
Approved baseline (frozen reference). Private banking — centred Jakob portrait on dark navy with four overlapping service rings.
Open IterationConcept 1
Hybrid hero — photo-strip breathes on its own; cursor takes priority and randomises height per reveal; idle hands control back to auto-cycle.
Open ExperimentalSandbox
Experimental ground for alternate variants — Variante B of Leistungen (numbered dark circles) and other fragments under iteration.
Open FoundationsUI Kit
Single source of truth — design tokens, typography scale, colour palette, buttons, chips, and section components.
Open OriginalWireframe
Original HTML wireframe from the client (2026-04-15). Reference for structure and content.
OpenResources
Project stages
-
01WireframeComplete
-
02DesignComplete
-
03Front-endComplete
-
04Back-endPending
-
05TestingPending