Lerne, wie du das Aussehen und die Stimmung einer Website nachbildest — ohne Texte, Bilder oder Layouts zu kopieren. Ein praktischer, ethischer Schritt‑für‑Schritt‑Leitfaden.
Wenn ein Kunde sagt „mach meine Website so“, meint er selten „kopiere jedes Pixel“. Meist zeigt er auf ein Gefühl: sauber und modern, mutig und editorial, freundlich und verspielt, premium und minimal.
Deine Aufgabe ist es, diese Reaktion in Entscheidungen zu übersetzen, die du begründen kannst — und diese Entscheidungen dann mit der Marke, den Inhalten, Beschränkungen und Zielen des Kunden neu aufzubauen.
Die meisten Kunden versuchen eines (oder mehrere) der folgenden Dinge zu kommunizieren:
Eine Referenzseite zu nutzen, um die Richtung festzulegen, ist normal. Der Knackpunkt ist, Prinzipien zu übernehmen, nicht Assets.
Stil‑Anklänge zu übernehmen ist meist sicher und erwartet. Inhalte zu kopieren ist ein klares No‑Go. Layouts zu übernehmen kann in groben Zügen akzeptabel sein (es gibt gängige Muster), aber eine auffällige Struktur zu klonen, birgt rechtliche und reputationsbezogene Risiken.
Auch wenn du alles neu zeichnest, kann eine nahezu identische Seite wie ein Abklatsch wirken — das schadet dem Vertrauen und lädt Beschwerden ein. Das Risiko ist nicht nur rechtlicher Natur; es ist auch reputationsbezogen. Menschen bemerken, wenn zwei Seiten wie Zwillinge wirken.
Eine klare Formulierung könnte so klingen:
„Wir treffen die Stimmung — klare Typo, großzügige Abstände, selbstbewusste Headlines — aber wir entwerfen originelle Seiten, schreiben eigenen Text und verwenden eure Bilder, damit klar wird, dass es eure Marke ist."
Dieser Satz erspart Wochen mit fehlgeleitetem Feedback.
Behandle andere Seiten als Richtwert für die Designrichtung:
Das sind „Design‑Zutaten“, mit denen du eine ähnliche Stimmung erreichst und dennoch ein originelles Ergebnis erzeugst.
Wo Leute versehentlich die Linie überschreiten:
Allgemeine Strukturen (Hero → Vorteile → Testimonials → CTA) sind üblich. Es wirkt nach Kopie, wenn du die gleiche Abschnittsreihenfolge, das gleiche Grid, dieselben Abstände und dieselbe visuelle Hierarchie übernimmst und die Seiten nebeneinander sofort vergleichbar sind.
Gute Regel: Behalte die Idee (z. B. „drei Benefit‑Cards“), ändere die Ausprägung (Inhalt, Proportionen, Typografie, Bildsprache und Komponentenstil), sodass es eindeutig eure Handschrift trägt.
Eine einzelne Referenz kann dich in Details verfangen. Bitte um 3–5 Beispiele, das schafft Bandbreite und hilft, wiederkehrende Signale herauszufiltern.
Mit mehreren Referenzen erkennst du Muster wie:
Sobald du das Muster siehst, kannst du die Stil‑Logik nachbilden, ohne eine einzelne Seite zu kopieren.
„Ich mag das“ ist kein brauchbares Feedback. Bitte um schnelle Anmerkungen:
Ebenso wichtig: sammle die Negativbeispiele.
Beispiele für nützliche „Nein“-Aussagen:
Eine leichte Checkliste reduziert Meetings und hält Feedback vergleichbar:
Wähle aus deinen 3–5 Referenzen 5–8 Adjektive: ruhig, premium, verspielt, editorial, mutig, minimalistisch, gemütlich, technisch, freundlich.
Definiere sie anschließend als Entscheidungen:
Das wird deine Übersetzungsschicht von „Stimmung“ zu umsetzbaren Vorgaben.
Schreibe einen Satz für die Zielgruppe und einen Satz für das primäre Ergebnis.
Beispiele:
Ein ‚premium‘‑Look für Luxus‑Retail und ein ‚premium‘‑Look für B2B‑Consulting können sehr unterschiedlich aussehen, sobald das Publikum klar ist.
Wähle 2–4 Metriken, die an das Ziel gebunden sind:
Metriken verhindern, dass Geschmacksschnitte das Projekt entgleisen.
Fasse das Obige in einen kurzen Absatz zusammen, den jeder Referenzieren kann:
„Wir wollen ein ruhiges, premium, editorial‑Gefühl für Operations‑Leiter. Die Seite soll schnell Vertrauen aufbauen und zu gebuchten Calls führen. Nutze einfache Layouts, starke Typo, zurückhaltende Farben und klare Hierarchie. Erfolg ist mehr qualifizierte Buchungen und höhere Interaktion auf Services und Case Studies."
Eine Referenzseite ist immer eine komplette Website. Um das Gefühl einzufangen ohne die Ausführung zu kopieren, zerlege das Feeling in beschreibbare Bausteine.
Dein Moodboard sollte beantworten: Wie soll sich die Website anfühlen, wenn jemand landet? Halte es kompakt.
Beinhaltet 3–8 Elemente aus diesen Kategorien:
Füge Screenshots mit kurzen Notizen hinzu wie: „Große, selbstbewusste Headlines“, „Weiche Schatten, abgerundete Ecken“, „Eine Akzentfarbe nur für CTAs.“
Übersetze das Moodboard in konsistente Regeln:
Wenn ihr Design‑Tokens pflegt, beginnt hier deren Nutzung (Font‑Sizes, Abstands‑Steps, Farbrollen).
Erstelle eine einfache Do/Don’t‑Liste mit Beispielen:
Diese Einschränkungen verhindern versehentliches Klonen und halten neue Seiten später konsistent.
Wenn du das Gefühl ähnlich haben möchtest ohne wie ein Klon zu wirken, baue es von Grund auf neu: Schrift, Farbe und Raum.
Ermittele, was die Referenz‑Typo bewirkt: editorial und ruhig? technisch und präzise? verspielt und abgerundet?
Wähle Schriften, die zur Stimmung passen, ohne den gleichen Font zu verwenden. Wenn die Referenz eine stark kontrastierende Serif für Headlines nutzt, wähle eine andere kontrastreiche Serif (oder eine scharfe, elegante Sans) statt derselben Familie.
Definiere dann eine Typo‑Skala, damit Seiten konsistent bleiben:
Eine lesbare Basis: komfortable Fließtext‑Zeilenhöhe (~1.5–1.7), leicht dichtere Headlines und großzügige Absatzabstände.
Viele „kopierte“ Designs verraten sich durch dieselbe Hero‑Farbe und denselben Akzent. Erstelle eine Palette, die euch gehört:
Definiere auch Statusfarben: Link, Hover, Fokus, Fehler/Erfolg.
Abstand ist einer der schnellsten Hebel, um Kohärenz ohne Layout‑Kopie zu erzeugen. Nutze ein Abstandssystem (z. B. 4/8/16/24 oder 6/12/24/36) und halte es für:
Wenn alles einem konsistenten Rhythmus folgt, wirkt das Design bewusst — auch wenn die Seitenstruktur sich von der Referenz unterscheidet.
Das Nachbauen einer Inspirationsseite Seite für Seite ist eine Falle: Entweder wirst du zu ähnlich, oder dein Inhalt passt nicht in die vorgegebenen Formen. Kopiere das System, nicht die Seite.
Die meisten Marketingseiten bestehen aus wiederverwendbaren „Lego‑Steinen“. Liste, was sich in deinen Referenzen wiederholt:
Das Benennen von Komponenten verschiebt die Arbeit von „kopiere ihre Homepage“ zu „bau unseren Hero, unser Pricing, unser FAQ“.
Erstelle eine kleine Komponentenbibliothek, die du über Seiten hinweg wiederverwendest:
Wenn du schnell vorankommen willst, können Vibe‑Coding‑Plattformen wie Koder.ai hilfreich sein: Du beschreibst die Zielstimmung und das Komponenten‑Set im Chat, generierst eine funktionierende React‑UI und iterierst, ohne dich an ein kopiertes Layout zu binden. Features wie Planungsmodus und Snapshots/Rollback helfen, Varianten sicher zu erkunden.
Polierte Seiten nutzen kontrollierte Variation. Lege Regeln fest wie:
Eine einseitige Komponenten‑Übersicht reicht: Wozu dient jede Komponente, wo wird sie eingesetzt und welche Varianten sind erlaubt.
Das Kopieren der Seitenreihenfolge der Referenz ist der schnellste Weg, Annahmen zu übernehmen, die nicht zu deinem Business passen.
Bevor du skizzierst, liste, was Besucher wissen müssen, bevor sie kaufen:
Diese Fragen bilden das Rückgrat deiner Struktur.
Mappe die Seiten, die ihr wirklich braucht, und gib jeder eine einzige Aufgabe:
Füge unterstützende Seiten (Über uns, Case Studies, FAQ) nur dann hinzu, wenn sie einen klaren Zweck erfüllen.
Gliedere Überschriften und Abschnitte basierend auf eurem Angebot, nicht auf dem Block‑Sequenz der Referenz. Entscheide, welche Beweise du zeigst, welche Einwände du behandelst und welche nächste Aktion du erwartest.
Wireframes sind Layout‑Skizzen, keine Dekoration:
Wenn die Struktur passt, wende den Stil der Inspirationsseiten an — ohne deren Blaupause zu übernehmen.
Damit die Ausführung deutlich anders bleibt, müssen Texte und Bilder eigenständig sein.
Beginne mit dem, was für dein Business wahr ist. Ein einfaches Framework:
Du kannst das Rhythmusgefühl der Referenz übernehmen (kurze, prägnante Zeilen vs. längere Erklärungen), während du die Ideen und Formulierungen änderst. Vermeide charakteristische Phrasen und markante Metaphern.
Verwende keine Screenshots, Icons, Illustrationen oder Fotos von anderen — selbst wenn sie generisch wirken.
Wenn du eine ähnliche Hero‑Stimmung willst, setze das Konzept neu um: gleiches Polished‑Level, anderes Motiv und andere Komposition.
Selbst mit neuem Text wirkt die gleiche Abschnittsreihenfolge wie Imitation. Ordne die Story neu passend zu euren Stärken: führ mit Beweis, kombiniere dünne Abschnitte oder füge ein Element hinzu, das die Referenz nicht hat.
Ton ist erlaubt; Formulierungen nicht. Legt eure Stimme fest (freundlich, premium, direkt, verspielt) und wendet sie konsistent auf Headlines, Buttons und Microcopy an.
Du willst „gleiche Gattung, anderes Lied“. Bevor du live gehst, prüfe, ob du die Stimmung eingefangen hast, ohne Details zu kopieren.
Öffne Referenz und deinen Entwurf 60 Sekunden nebeneinander. Schließe die Referenz und frage: Was bleibt hängen?
Eine Seite kann sich ähnlich anfühlen und gleichzeitig besser für Nutzer sein. Prüfe:
Mobile sollte bewusst gestaltet sein, nicht einfach „verkleinerter Desktop“. Prüfe:
Vor dem Launch:
Wenn zwei oder mehr Antworten unsicher sind, überarbeite eine Ebene — Abstände, Typografie oder Komponentenformen — um das Klon‑Gefühl schnell zu beseitigen.
Du kannst von einer bewunderten Seite lernen — Hierarchie, Rhythmus, Komponentenmuster. Was du nicht tun solltest, ist geschützte Werke zu übernehmen oder so ähnlich zu gestalten, dass Nutzer denken, es handle sich um dieselbe Marke.
Urheberrecht schützt typischerweise konkrete kreative Ausdrucksformen, nicht allgemeine Ideen.
Auch ohne exakte Kopie kannst du Ärger bekommen, wenn das Design Verwechslung stiftet.
Achte auf:
Ein einfacher Test: Wenn ein schneller Blick jemanden fragen lässt „Ist das dieselbe Firma?“, seid ihr zu nah.
Ziehe kurz juristischen Rat hinzu, wenn du:
Führe eine kleine Papier‑/digitale Spur, die unabhängiges Arbeiten belegt:
Das ist keine Bürokratie — es schafft Klarheit und hilft, „inspiriert von“‑Arbeit ethisch einzuordnen.
Meistens meinen sie das gleiche Gefühl (sauber, premium, verspielt, editorial), nicht eine pixelgenaue Kopie.
Deine Aufgabe ist es, ihre Reaktion in konkrete Entscheidungen zu übersetzen — Typografie, Abstände, Farbrollen, Komponenten, Ton — und diese dann mit ihrer Marke, ihren Inhalten und Beschränkungen umzusetzen.
Eine einfache, sichere Einordnung ist:
Wenn du unsicher bist, behandle es als Inhalt und mache es originell.
Leihe dir Prinzipien, nicht Assets:
Baue dann mit anderen Fonts, einer eigenen Palette, eigenem Text und originalen Visuals neu, sodass es eindeutig eure Seite ist.
Vermeide alles, das wahrscheinlich geschützt oder charakteristisch ist:
Schon leicht „bearbeitete“ Versionen können zu nah sein — starte mit eigener Botschaft und eigenen Assets.
„Zu ähnlich“ schafft zwei Probleme:
Wenn ein Vergleich nebeneinander dazu führt, dass Leute „das sind Zwillinge“ sagen, verändere schnell eine Ebene — Typografie, Abstands‑Rhythmus, Komponentenformen, Bildstil oder Seitenfluss brechen das Klon‑Gefühl.
Eine einzige Referenz treibt dich in Richtung spezifischer Details. Mit 3–5 Referenzen findest du gemeinsame Signale wie:
Gestalte aus diesen Mustern, sodass du von einer Richtung inspiriert bist, statt eine einzelne Seite zu duplizieren.
Bitte sie, pro Beispiel kurze Notizen zu hinterlassen:
So wird aus „Gefällt mir“ verwertbares Feedback und Revisionen werden seltener.
Nutze ein Moodboard, um das Gefühl einzufangen, und übersetze es dann in umsetzbare Regeln.
Behalte eine kleine Auswahl für:
Definiere anschließend einen Mini‑Guide: Typo‑Skala, Button‑Stile/Zustände, Card‑Padding/Schatten, Form‑Fokus/Error‑Zustände und eine kurze Do/Don’t‑Liste, um unbeabsichtigtes Kopieren zu vermeiden.
Baue ein Komponentensystem, statt Seiten 1:1 nachzubauen:
So bleibt die Stimmung konsistent, die Umsetzung aber eindeutig originell — besonders wenn eure Inhalte nicht zu denen der Referenz passen.
Mache einen schnellen „zu nah?“‑Check:
Wenn es zu ähnlich wirkt, verändere eine grundlegende Ebene (Typo, Abstandsrhythmus, Komponentenformen) statt vieler kleiner Anpassungen.
