„Mach meine Website so wie diese“: Kopiere den Stil, nicht den Inhalt
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.

Was „Mach meine Website so“ wirklich bedeutet
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.
Was Kunden typischerweise meinen
Die meisten Kunden versuchen eines (oder mehrere) der folgenden Dinge zu kommunizieren:
- „Mir gefällt, wie einfach die Seite zu bedienen ist.“
- „Mir gefällt die visuelle Ausstrahlung.“
- „Mir gefällt, wie die Geschichte erzählt wird.“
- „Ich möchte so aussehen, als würde ich in diese Kategorie gehören."
Eine Referenzseite zu nutzen, um die Richtung festzulegen, ist normal. Der Knackpunkt ist, Prinzipien zu übernehmen, nicht Assets.
Stil vs. Inhalt vs. Layout (kurze Definitionen)
- Stil: das visuelle System — Typografie, Farben, Abstände, Bildbehandlung, Button‑Formen, Motion, Gesamttonalität.
- Inhalt: die Worte und Medien — Texte, Fotos, Illustrationen, Icons, Testimonials, Diagramme, Markennamen.
- Layout: wie Inhalte angeordnet sind — Seitenstruktur, Reihenfolge der Abschnitte, Grids und Komponentenmuster.
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.
Warum „nah dran“ trotzdem riskant sein kann
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.
Erwartungsmanagement früh setzen: gleiche Stimmung, andere Ausführung
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.
Was du kopieren kannst (und was nicht)
Was du sicher übernehmen kannst
Behandle andere Seiten als Richtwert für die Designrichtung:
- Farb‑Richtung (nicht exakte Paletten): „überwiegend neutral mit einer kräftigen Akzentfarbe“, „gedämpfte Pastelle“, „starker Kontrast“.
- Typografie‑Richtung: „fette, editorial Headlines“, „abgerundete, freundliche Sans“, „technisch und präzise“.
- Abstände und Dichte: großzügige Weißräume vs. kompakte, informationsreiche Blöcke.
- Interaktionsmuster: Sticky‑Navigation, dezente Hover‑Zustände, Akkordeon‑FAQs, kartenbasierte Grids.
- Komponentenkategorien: Pill‑ vs. eckige Buttons, Karten mit Rahmen vs. Schatten, Outline‑ vs. Solid‑Icons (als Kategorie).
Das sind „Design‑Zutaten“, mit denen du eine ähnliche Stimmung erreichst und dennoch ein originelles Ergebnis erzeugst.
Was du auf keinen Fall kopieren darfst
Wo Leute versehentlich die Linie überschreiten:
- Texte und Botschaften: Headlines, Produktbeschreibungen, FAQs, Microcopy — kein „suchen und ersetzen“.
- Bilder und Videos: Fotos, Hero‑Bilder, Hintergrundtexturen, Testimonial‑Headshots.
- Icons und Illustrationssets: besonders charakteristische oder kundenspezifische Stile.
- Charakteristische Visuals: proprietäre Diagramme, Infografiken, Signatur‑Muster, Custom‑Animationen.
- Markenassets: Logos, Slogans, Maskottchen und erkennbare Motive, die mit der anderen Firma verbunden sind.
Layouts: wann es „zu ähnlich“ wird
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.
Bessere Referenzen sammeln: Die 3–5‑Beispiele‑Regel
Eine einzelne Referenz kann dich in Details verfangen. Bitte um 3–5 Beispiele, das schafft Bandbreite und hilft, wiederkehrende Signale herauszufiltern.
Warum 3–5 Beispiele funktionieren
Mit mehreren Referenzen erkennst du Muster wie:
- „Sie alle wirken sauber und großzügig“ (Abstand + Grid)
- „Sie verwenden fette Headlines mit viel Weißraum“ (Typografie)
- „Sie zeigen ruhige, unaufgeregte Bewegungen“ (Animation)
- „Der Ton wirkt selbstbewusst und freundlich“ (Textton)
Sobald du das Muster siehst, kannst du die Stil‑Logik nachbilden, ohne eine einzelne Seite zu kopieren.
Bitte sie, zu kennzeichnen, was sie mögen (und was nicht)
„Ich mag das“ ist kein brauchbares Feedback. Bitte um schnelle Anmerkungen:
- Schriften: modern/klassisch/verspielt? fette oder subtile Headlines?
- Farben: gedämpft oder kräftig? hoher Kontrast oder weich? Lieblingsakzent?
- Einfachheit: minimal und ruhig oder inhaltsreich?
- Animation: keine, dezente Einblendungen oder dynamische Interaktionen?
- Ton: seriös, freundlich, premium, eigenwillig?
Ebenso wichtig: sammle die Negativbeispiele.
Beispiele für nützliche „Nein“-Aussagen:
- „Kein riesiger Hero‑Video.“
- „Kein winziger hellgrauer Text.“
- „Keine überladenen Hintergründe oder unruhigen Footer.“
- „Keine verspielten Kritzeleien — bleib professionell."
Nutze ein kurzes Intake‑Formular oder eine Checkliste
Eine leichte Checkliste reduziert Meetings und hält Feedback vergleichbar:
- Link + Screenshot
- 3 Dinge, die du magst (Typo, Farbe, Abstand, Layout, Bildsprache, Navigation, Bewegung, Ton)
- 3 Dinge, die du nicht magst
- Ein Satz: „Wenn sich unsere Seite so anfühlte, wäre sie…"
Übersetze die „Stimmung“ in klare Design‑Anforderungen
1) Mach aus Beispielen Adjektive (und definiere sie)
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:
- Ruhig = viel Weißraum, sanfter Kontrast, wenige visuelle „Rufe“ pro Bildschirm.
- Premium = zurückhaltende Palette, hochwertige Typo, starke Hierarchie, weniger, aber eindrücklichere Visuals.
- Editorial = größere Headlines, bedacht gesetzte Abstände, lesefreundliche Layouts.
Das wird deine Übersetzungsschicht von „Stimmung“ zu umsetzbaren Vorgaben.
2) Definiere Publikum und ein zentrales Ziel
Schreibe einen Satz für die Zielgruppe und einen Satz für das primäre Ergebnis.
Beispiele:
- Publikum: „Operations‑Manager in 50–200‑Mann‑Firmen, die weniger Lieferantenprobleme wollen.“
- Ziel: „Qualifizierte Erstgespräche für unser Service‑Paket buchen."
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.
3) Lege messbare Erfolgskriterien fest
Wähle 2–4 Metriken, die an das Ziel gebunden sind:
- Conversion‑Rate (Formulare, Buchungen, Käufe)
- Verweildauer auf relevanten Seiten (Leistungen, Preise, Case Studies)
- Lead‑Qualität (Passung, Budget, Bereitschaft)
- Scroll‑Tiefe oder Klick‑Rate zu kritischen Seiten
Metriken verhindern, dass Geschmacksschnitte das Projekt entgleisen.
4) Schreibe einen einprägsamen Style‑Brief
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."
Erstelle ein Moodboard und einen Mini‑Styleguide
Eine Referenzseite ist immer eine komplette Website. Um das Gefühl einzufangen ohne die Ausführung zu kopieren, zerlege das Feeling in beschreibbare Bausteine.
Baue ein fokussiertes Moodboard (kein Sammelsurium)
Dein Moodboard sollte beantworten: Wie soll sich die Website anfühlen, wenn jemand landet? Halte es kompakt.
Beinhaltet 3–8 Elemente aus diesen Kategorien:
- Typografie: 1–2 Headline‑Styles und 1 Fließtext‑Style (Gewicht, Größe, Zeilenabstand notieren).
- Farbe: Temperatur (kühl/warm), Kontrastniveau, wie Akzente eingesetzt werden.
- Fotografie/Illustration: Beleuchtung, Bildauschnitt, Sättigung, „echte Menschen“ vs. abstrakt.
- UI‑Muster: Buttons, Cards, Nav‑Stil, Hero‑Ansatz, Icon‑Stil, Abstandsdichte.
Füge Screenshots mit kurzen Notizen hinzu wie: „Große, selbstbewusste Headlines“, „Weiche Schatten, abgerundete Ecken“, „Eine Akzentfarbe nur für CTAs.“
Mach daraus einen Mini‑Styleguide, den du bauen kannst
Übersetze das Moodboard in konsistente Regeln:
- Typo‑Skala: H1/H2/H3, Fließtext, Kleinschrift (Größen + Zeilenhöhen)
- Buttons: primary/secondary, Radius, Hover‑Verhalten
- Cards: Innenabstand, Rahmen vs. Schatten, Bildbehandlung
- Formfelder: Rahmenstil, Fokus‑Zustand, Fehlerzustand
Wenn ihr Design‑Tokens pflegt, beginnt hier deren Nutzung (Font‑Sizes, Abstands‑Steps, Farbrollen).
Dokumentiere Do’s und Don’ts (mit Belegen)
Erstelle eine einfache Do/Don’t‑Liste mit Beispielen:
- Do: „Eine Akzentfarbe nur für primäre Aktionen nutzen.“
- Don’t: „Dieses exakte Layout oder Icon‑Set kopieren."
Diese Einschränkungen verhindern versehentliches Klonen und halten neue Seiten später konsistent.
Stil neu aufbauen mit Typografie, Farbe und Abständen
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.
Typografie: gleiche Stimmung, andere Fingerabdrücke
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:
- H1, H2, H3 Größen (und wann jede verwendet wird)
- Fließtextgröße und Zeilenhöhe
- Caption‑ und Kleinschrift‑Stile
Eine lesbare Basis: komfortable Fließtext‑Zeilenhöhe (~1.5–1.7), leicht dichtere Headlines und großzügige Absatzabstände.
Farbe: andere Farbtöne oder andere Proportionen
Viele „kopierte“ Designs verraten sich durch dieselbe Hero‑Farbe und denselben Akzent. Erstelle eine Palette, die euch gehört:
- Wähle andere Farbtöne (z. B. Referenz: Navy + Neon‑Grün; ihr: Tiefes Teal + warmes Limette)
- Oder behalte dieselbe Familie, ändere die Proportionen (Referenz überwiegend dunkel; ihr: überwiegend helle Neutrale mit kleinen kräftigen Akzenten)
Definiere auch Statusfarben: Link, Hover, Fokus, Fehler/Erfolg.
Abstände: das unsichtbare, das „premium“ erzeugt
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:
- Abschnitts‑Padding
- Abstände zwischen Cards und Spalten
- Button‑Padding und Formular‑Abstände
Wenn alles einem konsistenten Rhythmus folgt, wirkt das Design bewusst — auch wenn die Seitenstruktur sich von der Referenz unterscheidet.
Design‑Komponenten statt Seiten kopieren
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.
Fang an, die wiederkehrenden Bausteine zu erkennen
Die meisten Marketingseiten bestehen aus wiederverwendbaren „Lego‑Steinen“. Liste, was sich in deinen Referenzen wiederholt:
- Hero‑Section (Headline, Subhead, primäre CTA, sekundärer Link)
- Feature‑Blöcke (Icon + Titel + kurzer Text)
- Testimonials (Zitat, Name, Rolle, Firma)
- Pricing‑Cards (Planname, Preis, Features, CTA)
- FAQ‑Akkordeon
Das Benennen von Komponenten verschiebt die Arbeit von „kopiere ihre Homepage“ zu „bau unseren Hero, unser Pricing, unser FAQ“.
Baue dein eigenes Komponenten‑Set
Erstelle eine kleine Komponentenbibliothek, die du über Seiten hinweg wiederverwendest:
- Buttons (primary/secondary/tertiary, Hover‑ + Disabled‑Zustände)
- Navigation (Desktop + Mobile)
- Cards (Feature, Blog, Ressourcen)
- Formulare (Input, Textarea, Dropdown, Fehlermeldungen)
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.
Lege Variationsregeln fest (damit es kohärent bleibt)
Polierte Seiten nutzen kontrollierte Variation. Lege Regeln fest wie:
- Eckenradius: z. B. 8px für Cards, 999px für Pills, nie zufällig
- Schattenstufen: none / soft / elevated (maximal 3 Stufen)
- Iconstil: Outline vs. Solid, Strichstärke, Eckenausprägung
Dokumentiere es wie ein kleines Playbook
Eine einseitige Komponenten‑Übersicht reicht: Wozu dient jede Komponente, wo wird sie eingesetzt und welche Varianten sind erlaubt.
Struktur und Wireframes um deine Inhalte herum planen
Das Kopieren der Seitenreihenfolge der Referenz ist der schnellste Weg, Annahmen zu übernehmen, die nicht zu deinem Business passen.
Fang mit Nutzerbedürfnissen an (nicht mit der Referenz)
Bevor du skizzierst, liste, was Besucher wissen müssen, bevor sie kaufen:
- „Ist das für jemanden wie mich?“
- „Was kostet es und was ist enthalten?“
- „Kann ich euch vertrauen — Beweise, Bewertungen, Resultate?“
- „Was passiert als Nächstes, wenn ich euch kontaktiere?“
Diese Fragen bilden das Rückgrat deiner Struktur.
Erstelle eine einfache Sitemap und Seitenziele
Mappe die Seiten, die ihr wirklich braucht, und gib jeder eine einzige Aufgabe:
- Home: klärt, was ihr macht, für wen, und den nächsten Schritt
- Produkt/Leistung: erklärt Angebot, Nutzen und wichtige Details
- Preise: reduziert Unsicherheit mit klaren Tarifen, Inhalten und FAQs
- Kontakt: macht das Erreichen einfach; setze Erwartung an Antwortzeit
Füge unterstützende Seiten (Über uns, Case Studies, FAQ) nur dann hinzu, wenn sie einen klaren Zweck erfüllen.
Schreibe für jede Seite eine eigene Inhaltsstruktur
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.
Wireframe, damit es zu deinem Inhalt passt
Wireframes sind Layout‑Skizzen, keine Dekoration:
- Wenn du drei starke Case Studies hast, gib ihnen Raum.
- Wenn Preise individuell sind, plane einen Beratungsfluss statt einer Standard‑Tabelle.
- Wenn dein Produkt stark visuell ist, plane Galerie oder Demo.
Wenn die Struktur passt, wende den Stil der Inspirationsseiten an — ohne deren Blaupause zu übernehmen.
Originale Texte und Visuals erstellen (kein „Suchen & Ersetzen“)
Damit die Ausführung deutlich anders bleibt, müssen Texte und Bilder eigenständig sein.
Schreibe die Botschaft komplett neu (Nutzen, Beweise, CTAs)
Beginne mit dem, was für dein Business wahr ist. Ein einfaches Framework:
- Nutzen: Welches Ergebnis erhält der Kunde (schneller, einfacher, sicherer, zuversichtlicher)?
- Beweis: Was macht es glaubwürdig (Zahlen, Testimonials, Case Studies, Zertifikate)?
- Handlungsaufforderungen: Was ist der nächste Schritt (Call buchen, Test starten, Angebot anfordern) in eurem Ton.
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.
Nutze eigene Visuals (oder korrekt lizenzierte Assets)
Verwende keine Screenshots, Icons, Illustrationen oder Fotos von anderen — selbst wenn sie generisch wirken.
- Mache eigene Screenshots deines Produkts oder Prozesses.
- Nutze eigene Fotografie, wenn möglich.
- Falls Stock nötig ist, verwende lizenzierte Assets und dokumentiere die Lizenz.
Wenn du eine ähnliche Hero‑Stimmung willst, setze das Konzept neu um: gleiches Polished‑Level, anderes Motiv und andere Komposition.
Spiegle nicht Überschriften und Abschnittsreihenfolge
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.
Stimme beibehalten, Worte bleiben eure eigenen
Ton ist erlaubt; Formulierungen nicht. Legt eure Stimme fest (freundlich, premium, direkt, verspielt) und wendet sie konsistent auf Headlines, Buttons und Microcopy an.
Qualitätschecks: gleiche Stimmung, eindeutig andere Umsetzung
Du willst „gleiche Gattung, anderes Lied“. Bevor du live gehst, prüfe, ob du die Stimmung eingefangen hast, ohne Details zu kopieren.
Der „ähnliche Stimmung“‑Test
Öffne Referenz und deinen Entwurf 60 Sekunden nebeneinander. Schließe die Referenz und frage: Was bleibt hängen?
- Wenn du die Stimmung (sauber, verspielt, premium) erinnerst, liegst du richtig.
- Wenn du konkrete Details erinnerst (genau dieses Hero‑Layout, genau diese Icons), bist du zu nah dran.
Barrierefreiheits‑Sanitycheck
Eine Seite kann sich ähnlich anfühlen und gleichzeitig besser für Nutzer sein. Prüfe:
- Kontrast und Lesbarkeit (keinen winzigen, dünnen, kontrastarmen Fließtext)
- Klare Hover/Fokus‑Zustände für Links und Buttons
- Logische Tastaturnavigation durch Menüs, Formulare und Modale
Responsive‑Realitycheck
Mobile sollte bewusst gestaltet sein, nicht einfach „verkleinerter Desktop“. Prüfe:
- Mobile‑first Header mit klarer primärer Aktion
- Umbruch der Abschnitte (Stapeln, kürzere Zeilenlängen, größere Tap‑Targets)
- Keine kritischen Interaktionen, die auf Hover beruhen
Führe eine „zu nah?“‑Checkliste durch
Vor dem Launch:
- Verwendet ihr dasselbe Hero‑Layout‑Muster und wiederholt die nächsten 2–3 Abschnitte in der gleichen Weise?
- Schaffen eure Farben und Typografie eine eigene Marken‑Signatur?
- Sind Illustrationen, Icons, Fotos und Microcopy original oder lizenziert?
Wenn zwei oder mehr Antworten unsicher sind, überarbeite eine Ebene — Abstände, Typografie oder Komponentenformen — um das Klon‑Gefühl schnell zu beseitigen.
Rechtliche und ethische Leitplanken (einfach erklärt)
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 kurz (was meist geschützt ist)
Urheberrecht schützt typischerweise konkrete kreative Ausdrucksformen, nicht allgemeine Ideen.
- Text: Headlines, Absätze, Produkttexte, Slogans, Microcopy — nicht nach dem „Worte tauschen“‑Prinzip arbeiten.
- Bilder & Fotografie: standardmäßig geschützt. Nicht herunterladen, screenshotten oder übernehmen.
- Icons & Illustrationen: oft lizenziert; charakteristische, kundenspezifische Stile sind in der Regel geschützt. Vermeide Nachzeichnen.
- UI‑Muster: gängige Muster sind meist frei nutzbar, aber eine sehr charakteristische Kombination kann Probleme machen, wenn sie zu eng kopiert wird.
Trade Dress & Markenverwechslung (das „sieht aus wie sie“‑Problem)
Auch ohne exakte Kopie kannst du Ärger bekommen, wenn das Design Verwechslung stiftet.
Achte auf:
- eine nahezu identische Logo‑Platzierung, Farbpalette und Typo‑Kombi
- ein einzigartiges Hero‑Layout, Illustrations‑ oder Maskottchenstil, der unverkennbar „deren“ Stil ist
- ähnliche Produktnamen, Ton und Messaging‑Struktur, die auf Zugehörigkeit hinweisen
Ein einfacher Test: Wenn ein schneller Blick jemanden fragen lässt „Ist das dieselbe Firma?“, seid ihr zu nah.
Wann ein rechtlicher Check sinnvoll ist
Ziehe kurz juristischen Rat hinzu, wenn du:
- im selben Markt wie die Referenz operierst
- eine sehr wiedererkennbare visuelle Identität nachstellen willst
- unsicher bei Lizenzen für Fonts, Fotos, Icons oder Templates bist
- eine Beschwerde, Takedown oder ein „Cease and Desist“ bekommst
Dokumentiere deinen Prozess (hilft mehr als du denkst)
Führe eine kleine Papier‑/digitale Spur, die unabhängiges Arbeiten belegt:
- euer Brief (Ziele, Audience, Einschränkungen)
- das Moodboard (mehrere Referenzen)
- Wireframes und Entwürfe mit Iterationsnotizen
- Nachweise zu lizenzierten Assets (Belege/Links) und was intern erstellt wurde
Das ist keine Bürokratie — es schafft Klarheit und hilft, „inspiriert von“‑Arbeit ethisch einzuordnen.
FAQ
Was meint ein Kunde, wenn er sagt „mach meine Website wie diese“?
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.
Was ist der Unterschied zwischen Stil, Layout und Inhalt — und warum ist das wichtig?
Eine einfache, sichere Einordnung ist:
- Stil: als Referenz in Ordnung (Typ‑Richtung, Abstände, Komponenten‑Gefühl, dezente Bewegungen).
- Layout: in groben Mustern okay (Hero → Vorteile → Beweis → CTA), aber vermeide charakteristische „Signatur“-Strukturen.
- Inhalt: niemals kopieren (Texte, Bilder, Icons/Illustrationen, Diagramme, Screenshots).
Wenn du unsicher bist, behandle es als Inhalt und mache es originell.
Was kann ich sicher von einer Referenzseite übernehmen?
Leihe dir Prinzipien, nicht Assets:
- Typografische Richtung (z. B. fette Headlines + klare Fließtext)
- Abstand/Dichte (luftig vs. kompakt)
- Interaktionsmuster (Sticky‑Nav, Akkordeons, Hover‑Zustände)
- Komponentenkategorie (Cards, Pill‑Buttons, Outline‑Icons als Stilfamilie)
Baue dann mit anderen Fonts, einer eigenen Palette, eigenem Text und originalen Visuals neu, sodass es eindeutig eure Seite ist.
Was darf ich niemals von einer anderen Seite kopieren?
Vermeide alles, das wahrscheinlich geschützt oder charakteristisch ist:
- Headlines, Absätze, Microcopy, FAQs, Slogans
- Fotos, Videos, Hintergrundtexturen, Screenshots
- maßgeschneiderte Icons/Illustrationen/Maskottchen (und nicht nachzeichnen oder „clean room“ neu zeichnen)
- markante Diagramme, Infografiken, Animationen, Muster
- Markenelemente (Namen, Logos, erkennbare Motive)
Schon leicht „bearbeitete“ Versionen können zu nah sein — starte mit eigener Botschaft und eigenen Assets.
Warum ist ein ‚ähnliches‘ Layout riskant, selbst wenn ich alles neu gestalte?
„Zu ähnlich“ schafft zwei Probleme:
- Reputation: wirkt wie ein Billignachbau und schwächt Vertrauen.
- Verwechslungsgefahr: Nutzer könnten denken, ihr gehört zusammen.
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.
Warum sollte ich 3–5 Referenzseiten statt nur einer sammeln?
Eine einzige Referenz treibt dich in Richtung spezifischer Details. Mit 3–5 Referenzen findest du gemeinsame Signale wie:
- gemeinsame Typografie‑Stimmung
- konsistente Abstandsdichte
- wiederkehrende Komponentenmuster
- Bewegungsstil (keine vs. dezent)
- Tonalität (freundlich, direkt, premium)
Gestalte aus diesen Mustern, sodass du von einer Richtung inspiriert bist, statt eine einzelne Seite zu duplizieren.
Wie bekomme ich nutzbares Feedback von Nicht‑Designern zu Referenzseiten?
Bitte sie, pro Beispiel kurze Notizen zu hinterlassen:
- 3 Dinge, die sie mögen (Schrift, Farbe, Abstand, Layout, Bildsprache, Navigation, Bewegung, Ton)
- 3 Dinge, die sie nicht wollen („kein Hero‑Video“, „keinen winzigen hellgrauen Text“, „keine unruhigen Hintergründe")
- Ein Satz: „Wenn sich unsere Seite so anfühlte, wäre sie…“
So wird aus „Gefällt mir“ verwertbares Feedback und Revisionen werden seltener.
Wie baue ich ein Moodboard und eine Mini‑Styleguide ohne ein Sammelsurium?
Nutze ein Moodboard, um das Gefühl einzufangen, und übersetze es dann in umsetzbare Regeln.
Behalte eine kleine Auswahl für:
- Typografie (Headline‑ und Fließtext‑Charakteristika)
- Farbrollen (Neutrale, Akzentnutzung, Kontrastniveau)
- Bildstil (Real‑Fotos vs. abstrakt, Beleuchtung, Bildausschnitt)
- UI‑Muster (Buttons, Cards, Navigation, Abstand)
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.
Wie vermeide ich am besten, Seite für Seite zu kopieren?
Baue ein Komponentensystem, statt Seiten 1:1 nachzubauen:
- identifiziere wiederkehrende Bausteine (Hero, Feature‑Cards, Testimonial‑Modul, Pricing‑Card, FAQ)
- gestalte jede Komponente in eurer Marke (Schrift, Farben, Abstände, Bildstil)
- setze Variationsregeln (Eckenradien, Schattenstufen, Icon‑Stil)
So bleibt die Stimmung konsistent, die Umsetzung aber eindeutig originell — besonders wenn eure Inhalte nicht zu denen der Referenz passen.
Welche Prüfungen sollte ich vor dem Launch machen, damit die Seite kein ‚Klon‘ ist?
Mache einen schnellen „zu nah?“‑Check:
- Side‑by‑side‑Test: Erinnerst du dich eher an die Stimmung oder an exakte Details?
- Originalitäts‑Check: Sind Texte, Fotos, Icons und Illustrationen wirklich eure eigenen oder lizenziert?
- Struktur‑Check: Weicht die Reihenfolge/Hierarchie dort ab, wo sie es sollte?
- Barrierefreiheit: Kontrast, lesbare Typo, sichtbare Fokus‑Zustände, Tastaturnavigation
- Responsives Design: Mobile ist bewusst gestaltet, nicht einfach verkleinertes Desktop.
Wenn es zu ähnlich wirkt, verändere eine grundlegende Ebene (Typo, Abstandsrhythmus, Komponentenformen) statt vieler kleiner Anpassungen.