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.
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