Nachher — Corporate-Website auf einer Linie mit der Marke
Kurzfassung
Replace. brauchte eine Corporate-Website, die so präzise sitzt wie die Marke dahinter: Services verständlich, Craft sichtbar, Kontakt erreichbar. Wir haben Informationsarchitektur, UI und Frontend aus einem Guss gebaut — Inter, Picton Blue und ein Anfragepfad, der auf jeder Seite nachvollziehbar bleibt.
Ausgangslage
Vor dem Relaunch wirkte die digitale Präsenz fragmentiert: Marke und Site zogen nicht an einem Strang, der Weg zur Anfrage war nicht klar genug, und die Leistungen wirkten austauschbar. Ziel war eine Surface, die Vertrauen aufbaut, bevor das erste Gespräch stattfindet.
Marke stark · Site noch nicht auf einer Linie
Ziel und Erfolgskriterien
Besucher:innen verstehen in unter einer Minute, was Replace. macht und für wen.
Jede Service-Seite führt natürlich zur Kontaktanfrage — ohne CTA-Labyrinth.
UI und Brand Tokens (Inter, Picton Blue, Licht-Thema) sind konsistent und pflegbar.
Vorgehen
Orientierung & IA
Angebote, Zielgruppen und Conversion-Pfad kartiert. Site Map auf kurze englische Slugs und klare Hierarchie verdichtet.
Ohne klare Struktur wirkt auch gutes Design beliebig — erst der Pfad, dann die Surface.
UI & Designsystem
Komponenten, Typo-Skala und Farbsystem aus der Brand Identity auf die Site übertragen. Soft Bento, ein Primary-CTA pro View.
Die Site ist die digitale Surface der Marke — Tokens müssen im UI sitzen, nicht nur im PDF.
Build & Launch
Next.js App Router, lokalisiertes DE/EN, Performance und A11y von Anfang an mitgedacht. Kontakt als klarer Endpunkt.
Craft endet nicht im Figma — die Site muss schnell, lesbar und wartbar sein.
Designentscheidungen
Ein Conversion-Pfad mit verdienten Zwischenschritten
Problem
Zu viele Einstiege und konkurrierende CTAs verwässern den Weg zur Anfrage.
Optionen
Hard-Sell auf jeder Section vs. verdiente Zwischenschritte (Service → Detail → Kontakt).
Entscheidung
Ein Conversion-Pfad mit verdienten Zwischenschritten
Begründung
Nicht jede Seite muss hart verkaufen. Orientieren, vertiefen, dann Kontakt — fühlt sich verdient an und hält die Hierarchie ruhig.
Hero mit einer klaren nächsten Aktion
Soft Bento statt Card-Spam
Problem
Agentur-Sites rutschen leicht in Badge-Clutter und generische Feature-Grids.
Optionen
Dashboard-Style mit Stats und Pills vs. offene Bento-Struktur mit Craft-Fokus.
Entscheidung
Soft Bento statt Card-Spam
Begründung
Cards nur, wenn sie Interaktion tragen. Sonst Spacing, Typo und echte Bilder — soul through craft, not chrome.
Ein Token-System für Brand und Site
Problem
Marke und UI drohten zwei Systeme zu werden — Guidelines hier, Site dort.
Optionen
Separates Web-Theme vs. Brand Tokens 1:1 in globals/@theme.
Entscheidung
Ein Token-System für Brand und Site
Begründung
Picton Blue, Inter und Licht-Thema leben in einem System. Die Site entscheidet nicht neu, was die Marke schon gelöst hat.
Farbsystem als UI-Tokens
Designsystem-Auszug
Farbe
Malibu#7CC6FEPrimär · Akzent & Signal
Mirage#101828Text · Headlines
Zircon#EBF0F9Fläche · ruhige Hintergründe
AaMirage auf Zircon
15.5:1AAA
AaMirage auf Malibu
9.6:1AAA
Typografie
Corporate-Website mit klarer Nutzerführung
Inter Display40040–64 pxHero & Section Titles
Eine Site, die Angebot, Team und Kontakt in einem ruhigen Pfad verbindet — ohne Agenturtheater.
Leer · Klick öffnet das Feld · Focus mit schwebendem Label
Raster
4pt-Raster, weite Section-Abstände, max. Measure ~65ch. Soft Bento für Services und Portfolio — keine gleichmäßigen 3er-Feature-Karten.
Umsetzung
Umsetzung als Next.js App Router mit TypeScript und Tailwind v4. Locale über /de und /en, kurze englische Slugs. Server Components by default — Client nur wo Interaktivität wirklich nötig ist.
CMS-Konzept
Content nah am Code (Dictionaries & Content-Module) — schnell iterierbar, ohne CMS-Overhead für ein kleines Team.
Kunde pflegt
Texte und Cases über Content-Module; Bilder unter public/ — klar getrennt von Layout-Komponenten.
Besonderheiten
Proxy statt Middleware (Next 16), Design Tokens in globals.css, Motion nur transform/opacity mit prefers-reduced-motion.
Visuelle Strecke
Desktop
Desktop — Landing mit Brand und klarem Angebot
Desktop — Wortmarke und Signalpunkt im Layout
Ergebnis
Orientierung
Vorher
Leistungen und Einstiege wirkten verstreut
Nachher
Drei klare Angebote, ein nachvollziehbarer Pfad
Zeitraum
Launch 2025
Methode
IA-Review & Content-Walkthrough im Team
Marke ↔ Site
Vorher
Guidelines und UI zogen auseinander
Nachher
Ein Token-System für Brand und Website
Zeitraum
Designsystem-Phase
Methode
Token-Abgleich Brand Guidelines ↔ globals.css
Blog und Case-Studien wachsen weiter — die Struktur ist da, Content wird laufend geschärft.
Kundenstimme
Die Site sollte sich anfühlen wie wir arbeiten: klar, ehrlich, ohne Theater. Wenn du nach dem Scroll weißt, was wir machen und wie du uns erreichst — dann sitzt sie.
Wir nutzen technisch notwendige Speicherung und — nur mit deiner Einwilligung — Google Analytics, damit wir die Seite verbessern können. Mehr dazu in der Datenschutzerklärung. Datenschutz
Nachher — Corporate-Website auf einer Linie mit der Marke
Kurzfassung
Replace. brauchte eine Corporate-Website, die so präzise sitzt wie die Marke dahinter: Services verständlich, Craft sichtbar, Kontakt erreichbar. Wir haben Informationsarchitektur, UI und Frontend aus einem Guss gebaut — Inter, Picton Blue und ein Anfragepfad, der auf jeder Seite nachvollziehbar bleibt.
Ausgangslage
Vor dem Relaunch wirkte die digitale Präsenz fragmentiert: Marke und Site zogen nicht an einem Strang, der Weg zur Anfrage war nicht klar genug, und die Leistungen wirkten austauschbar. Ziel war eine Surface, die Vertrauen aufbaut, bevor das erste Gespräch stattfindet.
Marke stark · Site noch nicht auf einer Linie
Ziel und Erfolgskriterien
Besucher:innen verstehen in unter einer Minute, was Replace. macht und für wen.
Jede Service-Seite führt natürlich zur Kontaktanfrage — ohne CTA-Labyrinth.
UI und Brand Tokens (Inter, Picton Blue, Licht-Thema) sind konsistent und pflegbar.
Vorgehen
Orientierung & IA
Angebote, Zielgruppen und Conversion-Pfad kartiert. Site Map auf kurze englische Slugs und klare Hierarchie verdichtet.
Ohne klare Struktur wirkt auch gutes Design beliebig — erst der Pfad, dann die Surface.
UI & Designsystem
Komponenten, Typo-Skala und Farbsystem aus der Brand Identity auf die Site übertragen. Soft Bento, ein Primary-CTA pro View.
Die Site ist die digitale Surface der Marke — Tokens müssen im UI sitzen, nicht nur im PDF.
Build & Launch
Next.js App Router, lokalisiertes DE/EN, Performance und A11y von Anfang an mitgedacht. Kontakt als klarer Endpunkt.
Craft endet nicht im Figma — die Site muss schnell, lesbar und wartbar sein.
Designentscheidungen
Ein Conversion-Pfad mit verdienten Zwischenschritten
Problem
Zu viele Einstiege und konkurrierende CTAs verwässern den Weg zur Anfrage.
Optionen
Hard-Sell auf jeder Section vs. verdiente Zwischenschritte (Service → Detail → Kontakt).
Entscheidung
Ein Conversion-Pfad mit verdienten Zwischenschritten
Begründung
Nicht jede Seite muss hart verkaufen. Orientieren, vertiefen, dann Kontakt — fühlt sich verdient an und hält die Hierarchie ruhig.
Hero mit einer klaren nächsten Aktion
Soft Bento statt Card-Spam
Problem
Agentur-Sites rutschen leicht in Badge-Clutter und generische Feature-Grids.
Optionen
Dashboard-Style mit Stats und Pills vs. offene Bento-Struktur mit Craft-Fokus.
Entscheidung
Soft Bento statt Card-Spam
Begründung
Cards nur, wenn sie Interaktion tragen. Sonst Spacing, Typo und echte Bilder — soul through craft, not chrome.
Ein Token-System für Brand und Site
Problem
Marke und UI drohten zwei Systeme zu werden — Guidelines hier, Site dort.
Optionen
Separates Web-Theme vs. Brand Tokens 1:1 in globals/@theme.
Entscheidung
Ein Token-System für Brand und Site
Begründung
Picton Blue, Inter und Licht-Thema leben in einem System. Die Site entscheidet nicht neu, was die Marke schon gelöst hat.
Farbsystem als UI-Tokens
Designsystem-Auszug
Farbe
Malibu#7CC6FEPrimär · Akzent & Signal
Mirage#101828Text · Headlines
Zircon#EBF0F9Fläche · ruhige Hintergründe
AaMirage auf Zircon
15.5:1AAA
AaMirage auf Malibu
9.6:1AAA
Typografie
Corporate-Website mit klarer Nutzerführung
Inter Display40040–64 pxHero & Section Titles
Eine Site, die Angebot, Team und Kontakt in einem ruhigen Pfad verbindet — ohne Agenturtheater.
Leer · Klick öffnet das Feld · Focus mit schwebendem Label
Raster
4pt-Raster, weite Section-Abstände, max. Measure ~65ch. Soft Bento für Services und Portfolio — keine gleichmäßigen 3er-Feature-Karten.
Umsetzung
Umsetzung als Next.js App Router mit TypeScript und Tailwind v4. Locale über /de und /en, kurze englische Slugs. Server Components by default — Client nur wo Interaktivität wirklich nötig ist.
CMS-Konzept
Content nah am Code (Dictionaries & Content-Module) — schnell iterierbar, ohne CMS-Overhead für ein kleines Team.
Kunde pflegt
Texte und Cases über Content-Module; Bilder unter public/ — klar getrennt von Layout-Komponenten.
Besonderheiten
Proxy statt Middleware (Next 16), Design Tokens in globals.css, Motion nur transform/opacity mit prefers-reduced-motion.
Visuelle Strecke
Desktop
Desktop — Landing mit Brand und klarem Angebot
Desktop — Wortmarke und Signalpunkt im Layout
Ergebnis
Orientierung
Vorher
Leistungen und Einstiege wirkten verstreut
Nachher
Drei klare Angebote, ein nachvollziehbarer Pfad
Zeitraum
Launch 2025
Methode
IA-Review & Content-Walkthrough im Team
Marke ↔ Site
Vorher
Guidelines und UI zogen auseinander
Nachher
Ein Token-System für Brand und Website
Zeitraum
Designsystem-Phase
Methode
Token-Abgleich Brand Guidelines ↔ globals.css
Blog und Case-Studien wachsen weiter — die Struktur ist da, Content wird laufend geschärft.
Kundenstimme
Die Site sollte sich anfühlen wie wir arbeiten: klar, ehrlich, ohne Theater. Wenn du nach dem Scroll weißt, was wir machen und wie du uns erreichst — dann sitzt sie.
Wir nutzen technisch notwendige Speicherung und — nur mit deiner Einwilligung — Google Analytics, damit wir die Seite verbessern können. Mehr dazu in der Datenschutzerklärung. Datenschutz