AnalyseKonzeptSkizzen und PrototypenGuidelinesDesignEntwicklungSEO und GEO

creativecouch

In eigener Sache: Meine Website lief auf WordPress mit Page Builder. Heute ist sie maßgeschneidert und ohne Baukasten, mit vier klaren Schwerpunkten, eigenem Ratgeber und eigener Redaktion, entstanden über Skizzen, Wireframes und Prototypen.

Branche: In eigener Sache
Ort: Butzbach
Zeitraum: 2026
Website: creativecouch.de

creativecouch: Startseite creativecouch.de

creativecouch: Startseite auf dem Smartphone

Meine eigene Website, von WordPress zur maßgeschneiderten Seite für Google und KI-Antworten

Was gefragt war

Diese Website ist mein eigenes Projekt. Sie lief lange auf WordPress mit Page Builder und vielen Plugins und zeigte vor allem, was ich früher angeboten habe, nicht was ich heute mache.

Die neue Seite sollte meine Schwerpunkte Beratung, SEO und GEO, KI-Optimierung und Webentwicklung mit KI klar zeigen, schnell und ohne CMS laufen und dabei nichts von dem verlieren, was bei Google schon gefunden wird. Den Ratgeber wollte ich weiter im Voraus planen können.

Die Ziele

Klare Positionierung mit vier Schwerpunkten
Maßgeschneiderte Website ohne Baukasten und Plugin-Ballast
Alle Beiträge, Kategorien und Schlagwörter unter denselben Adressen
Von Anfang an lesbar für Google und KI-Systeme
Datenschutz ohne fremdes Cookie-Plugin

creativecouch: Guidelines mit Farben, Schriften und Breiten — Guidelines mit Farben, Schriften und Breiten

Was ich gemacht habe

Analyse
SEO- und GEO-Audit der alten Seite, jede der 186 Adressen einzeln geprüft, daraus ein Maßnahmenplan in Phasen.
Positionierung und Konzept
Vier Schwerpunkte und eine neue Dramaturgie für die Startseite, von der Frage „Kennst du das?“ bis zum nächsten Schritt.
Wireframes
Der Aufbau jeder Seite als Wireframe, bevor Farbe, Schrift und Bilder dazukommen.
Ideen und Skizzen
21 Skizzen allein zum Kopfbereich der Startseite, darunter vier Arten, Wörter hervorzuheben, vom zarten Marker bis zum Pinselstrich.
Prototypen
Klickbare Skizzen im echten Design, mit denen ich Varianten am Bildschirm verglichen habe, etwa vier Wege, die Projekte zu zeigen.
Guidelines
Farben, Schriften, Breiten und Bausteine als feste Regeln für jede Seite, die Schriften neu gewählt, weil sie besser zum Logo passen.
Design und Texte
Ein Designsystem mit Farben und Schriften als Variablen und neue Texte für alle Leistungs-, Regional- und Unterseiten.
Entwicklung
Statische Website in HTML, CSS, JavaScript und PHP, die ein Bauskript aus einmal gepflegten Bausteinen erzeugt. Gebaut mit KI-Agenten, jede Änderung von mir geprüft und freigegeben.
Ratgeber und Redaktion
136 Beiträge aus dem Page Builder in eigene Bausteine überführt, dazu ein eigenes Redaktionswerkzeug, mit dem Beiträge geplant und automatisch veröffentlicht werden.
SEO und GEO
Strukturierte Daten auf jeder Seite, sichtbare FAQ, llms.txt, Sitemaps und eine Weiterleitung für jede alte Adresse.
Datenschutz
Ein selbst gebautes Einwilligungsfenster, bei dem vor der Entscheidung nichts an Google, Microsoft oder den Terminkalender geht.

Was dieses Projekt ausmacht creativecouch im Detail

Brandguide creativecouchAuszug

Regel 1
Ein Blog ohne CMS, trotzdem planbar
Ich lege Beiträge in meiner eigenen Redaktion an, plane sie Wochen im Voraus und die Seite baut sie zum Termin.
Regel 2
Erst die Einwilligung, dann die Messung
Google Analytics, Clarity und der Terminkalender laden erst, wenn du zustimmst, jeder Dienst einzeln schaltbar.

Steckbrief creativecouchAuszug

159 alte Adressen: Keine Adresse geht verloren159 alte Adressen haben ein neues Ziel und führen mit einem Schritt dorthin. Beiträge bleiben unter ihrer bisherigen Adresse.
9 Bausteine: Aus 160 Varianten werden neunDie alten Beiträge nutzten 160 verschiedene Zeilenaufbauten. Heute setzt sich jeder Beitrag aus neun festen Bausteinen zusammen.

Zeitraum: 2026
Ort: Butzbach
Branche: In eigener Sache

Startseite nachher: maßgeschneiderte Seite mit zweizeiliger Überschrift und KI-Antwort — Vorher und nachher
Aus einer roten Fläche mit langem SEO-Text wurde ein Kopfbereich, der in einem Satz sagt, was ich mache. Daneben zeigt er, wie eine KI-Antwort über mich aussieht.

Startseite vorher: WordPress mit roter Fläche und langem SEO-Text — Vorher und nachher
Aus einer roten Fläche mit langem SEO-Text wurde ein Kopfbereich, der in einem Satz sagt, was ich mache. Daneben zeigt er, wie eine KI-Antwort über mich aussieht.

Vier Varianten für die Überschrift der Startseite — Erst entwerfen, dann bauen
Bevor eine Seite entstand, lagen Varianten nebeneinander. Allein für die Überschrift der Startseite gab es vier Arten, Wörter zu betonen.

Wie es lief

Analyse und Konzept
Ein Audit aller Adressen und vier neue Schwerpunkte bildeten die Grundlage für eine neue Seitenstruktur.
Wireframes und Skizzen
Für jede Seite entstand zuerst der Aufbau, für Kopfbereich, Projekte und Vertrauenselemente dann Skizzen in mehreren Varianten.
Prototypen und Guidelines
Klickbare Skizzen im echten Design zeigten, welche Variante trägt. Feste Regeln hielten alle Seiten zusammen.
Umsetzung und Umzug
Alle Seiten wurden gebaut und alle Beiträge zogen mit denselben Adressen in neue Bausteine und eine eigene Redaktion.
Livegang
Die neue Website ging auf creativecouch.de online.

Vom Konzept zur fertigen Seite

Jede Seite lief durch dieselben Stufen, vom Konzept bis zur fertigen Seite. Wähle eine Seite und klick dich durch.

Startseite

Stufe 01 von 06
Konzept
Kernsatz, Zielgruppe und Ziel der Seite, dazu die Dramaturgie in fünf Schritten: wer, was und wo, das Problem, die Lösung, die Belege und der nächste Schritt.
Nachträglich gezeichnet
Stufe 02 von 06
Skizze
Mit dem Stift auf Papier: wo die Überschrift steht, was rot betont wird und dass rechts eine KI-Antwort über mich erscheint.
Nachträglich gezeichnet
Stufe 03 von 06
Wireframe
Der Aufbau des Kopfbereichs: Leistungen, zweizeilige Überschrift, Einleitung, zwei Knöpfe, Bewertungszeile und rechts ein Feld für die KI-Antwort.
Nachträglich gezeichnet
Stufe 04 von 06
Design
Vier Arten, die Schlüsselwörter zu betonen: rote Schrift, zarter Marker, Pinselstrich und gedimmte Blöcke.
Stufe 05 von 06
Prototyp
Der Prototyp im echten Design, mit einer Beispielantwort eines KI-Assistenten neben der Überschrift.
Stufe 06 von 06
Final
Die fertige Startseite mit roter Unterstreichung, Bewertungszeile und KI-Antwort.

KI-Optimierung

Stufe 01 von 06
Konzept
Kernsatz und Ablauf der Seite: erst das Problem, dann der Röntgenblick, der zeigt, wie ein KI-Crawler dieselbe Seite liest wie ein Mensch.
Nachträglich gezeichnet
Stufe 02 von 06
Skizze
Mit dem Stift auf Papier: links der Text, rechts ein Kasten mit Reitern für Mensch und KI-Crawler und drei Stellen, an denen Maschinen stolpern.
Nachträglich gezeichnet
Stufe 03 von 06
Wireframe
Links der Text, rechts ein Kasten, der zeigt, an welchen Stellen Maschinen eine Website falsch lesen.
Nachträglich gezeichnet
Stufe 04 von 06
Design
Erster Entwurf: drei Stellen, an denen Maschinen stolpern, mit Reitern für Mensch, KI-Crawler und Optimierung.
Stufe 05 von 06
Prototyp
Der Prototyp als Röntgenblick, links die Ansicht für Menschen, rechts der Code, den ein KI-Crawler liest.
Stufe 06 von 06
Final
Die fertige Seite mit Schieberegler zwischen beiden Ansichten auf farbigem Grund.

Projekte

Stufe 01 von 06
Konzept
Kernsatz und Aufbau der Übersicht: erst die Logos, dann Filter und Verzeichnis, jede Case Study gleich gebaut.
Nachträglich gezeichnet
Stufe 02 von 06
Skizze
Mit dem Stift auf Papier: Logos in einer Karte, Filter nach Leistung und ein Verzeichnis statt einer Wand aus Kacheln.
Nachträglich gezeichnet
Stufe 03 von 06
Wireframe
Der Aufbau der Übersicht: Überschrift, kurzer Text und ein Raster mit allen Projekten.
Nachträglich gezeichnet
Stufe 04 von 06
Design
Ein Entwurf zeigt die Projekte als Entfernungskarte ab Butzbach, mit einer Lupe für die Ortsteile.
Stufe 05 von 06
Prototyp
Ein weiterer Prototyp als Wand aus Kacheln, Handyansichten und Zahlen.
Stufe 06 von 06
Final
Die fertige Übersicht: Logos in einer Karte, die sich beim Scrollen ordnen, darunter das Verzeichnis der Case Studies.

Das Projekt in Bildern

creativecouch: Ratgeber-Beitrag — 04 Ratgeber-Beitrag

creativecouch: Seite Beratung auf dem Smartphone — 05 Beratung auf dem Smartphone

creativecouch: Projekte-Übersicht — 06 Projekte-Übersicht

Was jetzt steht

Eine maßgeschneiderte Website auf creativecouch.de ohne CMS und ohne Baukasten
Zehn Leistungsseiten und 14 Regionalseiten für Mittelhessen und Rhein-Main
Ein Ratgeber, der mit 136 Beiträgen umgezogen ist, unter den bisherigen Adressen und mit eigener Redaktion
Ein Projekte-Bereich mit allen Case Studies, jede in der Farbe des Kunden
Strukturierte Daten und FAQ auf allen Seiten, dazu eine llms.txt für KI-Systeme
Ein eigenes Einwilligungsfenster ohne fremdes Plugin