Design Strategy & Moodboard.
Das visuelle Fundament für orthopaedie-wilhelmstrasse.de: Tonalität, Farben, Typografie und Bildwelt auf einer Seite.
Positionierung
Eine Privatpraxis-Ästhetik, die nicht laut sein muss.
Die Orthopädie Wilhelmstraße steht für medizinische Exzellenz im historischen Zentrum Wiesbadens. Der Webauftritt übersetzt diese Position in eine ruhige, kuratierte Bildsprache – mehr Kunsthandwerk als Klinikbroschüre.
Designstrategisch arbeiten wir mit drei Hebeln: einer warmen, gedeckten Farbpalette, einer markanten Display-Typografie im Kondensat-Schnitt und einer Bildwelt, die Architektur, Hände und Räume in den Vordergrund stellt.
Moodboard
Bildwelt & Atmosphäre.
Farbpalette
Pergament, Forest & Gold.
Eine warme, gedeckte Palette mit Tiefe. Pergament als Hintergrund, Tannengrün für Vertrauen, gedämpftes Gold als Akzent. Ergänzt durch Salbei und ein dunkles Sand-Braun für Sektionen mit Gewicht.
Sektionsfarben
Palette: Section Colors.
Drei Alternativen für Sektionshintergründe, die die bestehende Farbpalette harmonisch ergänzen.
Typografie
Roboto Condensed × System Sans.
Die schmale, hohe Display-Schrift gibt Würde und Tempo. Der System-Sans im Fließtext bleibt unaufgeregt und perfekt lesbar. Auf jedem Gerät, in jeder Sprache.
Display · 96 / 1.05
Heilung beginnt mit Haltung.
H2 · 48 / 1.1
Acht Persönlichkeiten, ein Anspruch.
H3 · 30
Wilhelmstraße 17 · Wiesbaden
Lead · 18 / 1.6
Die Wilhelmstraße 17 steht seit jeher für ärztliche Präzision und persönliche Zuwendung.
Body · 16
Roboto Condensed für Display, System-Sans für Fließtext. Eine klare Hierarchie, die auf jedem Endgerät trägt.
Designprinzipien
Fünf Prinzipien, an denen jede Designentscheidung gemessen wird.
Souveräne Ruhe statt Klinik-Klischee
Wir verzichten auf Stockfotos von Stethoskopen und sterile Glanzoptiken. Stattdessen: warme Naturtöne, viel Weißraum, ruhige Typografie. Die Praxis spricht aus Haltung, nicht aus Lautstärke.
Editorial vor Marketing
Layouts folgen Magazin-Logik: dramatische Hero-Bilder, ein klares Eyebrow-System, lange Lese-Abschnitte mit Atem. Inhalte werden kuratiert, nicht beworben.
Wilhelmstraße als Markenanker
Die Adresse ist Teil der Identität. Architekturfotografie der Fassade, des Treppenhauses und der Praxisräume zieht sich als wiederkehrendes Motiv durch alle Seiten.
Acht Persönlichkeiten, ein Anspruch
Das Ärzteteam wird individuell portraitiert und gleichzeitig als Kollektiv inszeniert. Persönliche Sprache, einheitliche Bildsprache, gemeinsame Designsignatur.
Bewegung mit Bedacht
Animation dient der Lesbarkeit: sanfte Fade-Ins, leichte Y-Verschiebung, sanfte Easing-Kurven. Klarheit statt Effekthascherei.
Voice & Tone
Auf Augenhöhe, ohne Floskel und niemals werbend.
Do
Souverän
Don't
Belehrend
Do
Persönlich
Don't
Anonym
Do
Präzise
Don't
Marketingfloskel
Do
Ruhig
Don't
Laut & dringlich
Changelog
Was sich bewegt hat.
Laufende Änderungen an der Website, für alle nachvollziehbar.
Added
- ·Stockfoto-Suche auch über Pixabay (PIXABAY_API_KEY); Pexels bleibt als Alternative
Changed
- ·Stockfotos werden in den eigenen Speicher übernommen statt dauerhaft von den Anbietern eingebunden; Bildnachweis nennt den Anbieter
Changed
- ·News-Editor: Titel der Formularfelder setzen sich deutlicher vom eingegebenen Text ab (klein, grau, Großbuchstaben)
Fixed
- ·KI-Vorschläge für News: robustere Anfrage (auch OPENAI_*-Variablennamen, Basisadresse ohne /v1, Modelle ohne temperature-Parameter) und verständliche Fehlermeldungen (Key abgelehnt, Guthaben aufgebraucht, Modell nicht verfügbar)
Fixed
- ·Passwort ändern schlug fehl: Prüfung des aktuellen Passworts läuft jetzt direkt am Auth-Endpunkt; Ablehnungsgründe von Supabase (z. B. unsicheres Passwort) werden verständlich angezeigt
- ·Pflicht-Passwortänderung: deutliche Bestätigung mit „Weiter zur Übersicht“, die Startpasswort-Warnung bleibt nicht mehr stehen
Added
- ·Interner Bereich: Übersicht unter /intern, gemeinsame Navigation, Passwort ändern für alle Nutzer
- ·Benutzerverwaltung (nur Administratoren): Benutzer anlegen, Rollen ändern, Passwörter zurücksetzen, Konten deaktivieren
- ·Rolle „Administrator“ getrennt von „Praxisteam“: Administratoren verwalten nur Konten, ohne Zugriff auf Anfragen und News
Changed
- ·Anfragen und News sind nur noch mit der Rolle „Praxisteam“ erreichbar
Fixed
- ·Detailseiten von Aktuelles und Ärzten öffneten sich beim Anklicken nicht (Übersichtsseite blieb stehen) – Übersichten sind jetzt eigenständige Index-Routen
Added
- ·Ältere News der früheren Website (2019–2021) übernommen, inkl. Titelbildern und PDFs; Corona-/Covid-Beiträge bewusst ausgelassen
- ·Beitragstexte unterstützen Zwischenüberschriften und Links
Added
- ·News-Verwaltung unter /intern/news: KI-Themenvorschläge passend zu den Leistungen, Bearbeitung, Freigabe mit Veröffentlichungstermin (automatisch, ohne Cron)
- ·Titelbilder: Stockfoto-Vorschlag (Pexels), austauschbar per Suche oder eigenem Upload
Changed
- ·Aktuelles, Beitragsseiten, Startseite und Sitemap lesen Beiträge aus der Datenbank
Fixed
- ·Anfahrtskarte lud weiterhin nicht: Karten-Worker fehlte eine intern referenzierte zweite Datei, die beim Bündeln durch Vite verloren ging – beide Dateien werden jetzt fest ausgeliefert statt über die Vite-Asset-Pipeline gebündelt
Added
- ·Fasttrack-Feature (/fasttrack) – dreistufiges Schulter-Schnellanfrage-Formular für Patienten mit vorhandener Bildgebung
- ·Englischsprachiges Pendant /en-contact für internationale Patienten
- ·Einstiegspunkte für Fasttrack in Navigation, Startseite und /en
- ·Lovable-Cloud-Backend (Supabase): quick_requests/quick_request_files, privater Storage-Bucket, strikte RLS (nur anon-Insert, Lesen nur für authentifizierte Praxisteam-Accounts)
- ·Formulare senden jetzt echte Daten inkl. Datei-Upload; MVP-Vorschau-Hinweise entfernt
- ·Interne Review-Seite /intern/anfragen (Login, Statuswechsel, Datei-Download, Löschfunktion)
- ·Benachrichtigungsmail bei neuer Anfrage via Resend (nur Link, keine Gesundheitsdaten im Mailtext)
Changed
- ·"Fasttrack" durchgängig zu "Schnellanfrage" umbenannt; Route /fasttrack bleibt unverändert
- ·"Fasttrack" aus Desktop- und Mobile-Navigation entfernt
- ·Termin-Button (Header, /en) verlinkt jetzt auf /kontakt bzw. /en-contact statt direkt anzurufen
- ·Datenschutzerklärung um Abschnitt zu den Schnellanfrage-Formularen ergänzt
Fixed
- ·Fehlender ArrowRight-Import auf /en behoben – verursachte einen Absturz der Seite über den Error-Boundary
Changed
- ·Startseiten-Titel entschärft: »Premium-Facharztpraxis« entfernt, nennt stattdessen die Hauptfachrichtungen (Orthopädie, Unfallchirurgie, Rheumatologie)
Added
- ·CLAUDE.md – Codebase-Guide für Claude Code (Commands, Architektur, SSR-Fehlerbehandlung, Motion-System, Design-Tokens)
Removed
- ·DevInspector-Komponente (FAB) samt Dev-Server-Endpoint vollständig entfernt
Changed
- ·Sage-Varianten-Sektion auf Moodboard-Seite: Text und Titel überarbeitet (→ Sektionsfarben / Palette: Section Colors)
- ·Farb-Swatches vergrößert (aspect-[3/4]), Grid-Abstand und Container verbreitert
Added
- ·DevInspector-Komponente – dev-only Tool zur Elementauswahl via Klick
- ·CHANGELOG.md
- ·ChangelogTimeline-Komponente – Timeline für die Moodboard-Seite
- ·Strukturierte Changelog-Daten (src/data/changelog.ts)
Changed
- ·H1-Claim Startseite: »Bewegung beginnt mit Vertrauen.« → »Bewegung ermöglichen. Vertrauen schaffen.«
- ·Selbstverständnis-Paragraph Startseite: Text überarbeitet
- ·Leistungsbeschreibung Startseite & /leistungen: komplett überarbeitet
- ·Operative Orthopädie Lead-Text: optimiert
- ·Operative Orthopädie Items neu sortiert: Arthroskopie & Handchirurgie nach oben
- ·Eyebrow Letter-spacing: 0.24em → 0.1em
- ·Design-Strategy PageHero: Hintergrundbild auf flur.jpg geändert (wie Kontaktseite)
- ·Aktuelles-Beitragsbilder durch neutralen Platzhalter ersetzt (Hero-Hintergründe unverändert)
Removed
- ·Wirbelsäulenchirurgie aus dem Leistungsangebot (Operative Orthopädie)
- ·Wechselendoprothetik aus Operative Orthopädie