WebsitesReplace.

Replace.

Corporate-Website mit klarer Nutzerführung

Eine Site, die Angebot, Team und Kontakt in einem ruhigen Pfad verbindet — ohne Agenturtheater.

Leistungen
UX/UI, Corporate Website, Frontend
Zeitraum
2025 · 8 Wochen
Rolle
Design & Umsetzung (End-to-End)
Stack
Next.js · TypeScript · Tailwind
Branche
Digitalagentur · München
Replace. Corporate-Website auf MacBook — klare Struktur und digitale Surface
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.

Replace. Wortmarke auf dunklem Glas-Ribbon — Brand Surface

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

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

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

  3. 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.
Replace. Corporate-Website auf MacBook — klare Struktur und digitale Surface
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.
Replace. Farbsystem Picton Blue — Palette als Design-Token
Farbsystem als UI-Tokens

Designsystem-Auszug

Farbe

  • Malibu#7CC6FEPrimär · Akzent & Signal
  • Mirage#101828Text · Headlines
  • Zircon#EBF0F9Fläche · ruhige Hintergründe
Mirage auf Zircon
15.5:1AAA
Mirage 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.

    Inter Body30018 pxFließtext & Support

Komponenten

  • Primary Button

    Idle · Hover (leicht angehoben) · Focus-Ring sichtbar

  • Textfeld

    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

Replace. Corporate-Website auf MacBook — klare Struktur und digitale Surface
Desktop — Landing mit Brand und klarem Angebot
Replace. Banner mit Wortmarke und blauem Punkt
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.

Jonas Wandel
Jonas Wandel

Geschäftsführer, ReplaceWEB.

Team und Credits

  • Jonas WandelDesign & Direction
  • Felix HaffnerDesign & Frontend
  • Nicola MorgantiFrontend & Content

Nächste Case Study

k2.kommWebsite, die Wissenschaft und Wirtschaft gleichermaßen ansprichtCase ansehenk2.komm — Frau mit Brille und Dackel vor modernem Gebäude, neben Website-MockupZurück zur ÜbersichtAlle Website-Projekte