Blog

Hör auf, Website-Beispiele zu kopieren. Stiehl ihr Skelett.

Entschlüssele Website-Beispiele zu wiederverwendbaren Entscheidungen – nicht zu Screenshots –, damit jede Kunden-Website individuell ist und konvertiert.

Zusammenfassung

Die meisten Ratschläge zu Website-Beispielen sind eine Falle. Sie sagen dir, du sollst kopieren, was funktioniert, also fügst du einen SaaS-Hero auf die Website einer Anwaltskanzlei ein und wunderst dich, warum es floppt. Ein Beispiel ist ein Beleg für eine Entscheidung, keine Vorlage zum Nachahmen. Der Prozess, der funktioniert, ist Reverse Engineering: Ziehe die Begründung hinter dem Hero, dem Beweis und dem Call-to-Action heraus und baue diese Entscheidungen dann für die Käufer jedes Kunden neu auf. Dieser Artikel zeigt dir, was du aus SaaS-, Agentur- und Portfolio-Beispielen übernehmen solltest und wie du eine Swipe-Datei mit Entscheidungen aufbaust, die das System für jeden Kunden wiederholbar macht.

Die meisten Ratschläge zu Website-Beispielen sind eine Falle. Sie sagen dir: „Finde Websites, die dir gefallen, und stiehl sie." Also legst du einen Ordner mit Lesezeichen an und baust dann denselben Hero, dasselbe Layout, dieselben Hover-Effekte für einen Dachdecker, eine Anwaltskanzlei und einen B2B-SaaS-Kunden nach. Ergebnis: teure Klone, die alle gleich aussehen und gleich schlecht konvertieren. Ein Beispiel ist keine Vorlage. Es ist ein Beleg für eine Entscheidung, die ein kluges Team für ein bestimmtes Publikum, einen bestimmten Moment und ein bestimmtes kommerzielles Versprechen getroffen hat. Der Prozess, der wirklich funktioniert, ist Reverse Engineering: Lies das Beispiel auf die Entscheidungen dahinter, schreibe diese Entscheidungen in einfachen Sätzen auf und baue sie dann für die Käufer jedes Kunden von Grund auf neu auf.

Lies den Hero wie einen Vertrag

Beginne jede Beispielprüfung, indem du den Hero-Bereich wie einen Vertrag liest. Notiere das Versprechen in der Überschrift, den Beweis in der Unterüberschrift und den einzelnen Call-to-Action. Alles andere ist Dekoration. Frage dich, welche Entscheidung der Ersteller über den Besucher getroffen hat, bevor er diese Überschrift geschrieben hat. Die Antwort ist der Teil, den du wiederverwenden kannst.

Calendlys Slogan – „Termine planen ohne E-Mail-Hin und Her" – funktioniert, weil der Ersteller entschieden hat, dass der Besucher ein vielbeschäftigter Profi ist, der im E-Mail-Tennis ertrinkt. Das Versprechen ist Zeitersparnis. Der CTA ist „Meeting buchen." Diese Entscheidung ist auf ein Dienstleistungsunternehmen übertragbar. Der Besucher eines Buchhaltungskunden ist ein Geschäftsinhaber, der Papierkram hasst; die Überschrift sollte „Bücher abschließen ohne Tabellen-Chaos" versprechen und der CTA sollte „Kostenlose Aufräumaktion erhalten" sein. Gleiche Entscheidung, andere Worte. Notion zielt mit derselben Disziplin auf einen einzigen CTA, „Notion kostenlos erhalten": eine Seite, eine Aktion, keine Ablenkungen. Beachte, was du nicht siehst – kein Karussell, keine sekundären „Mehr erfahren"-Buttons, kein Formular, das nach einer Telefonnummer fragt. Jede Auslassung ist eine Entscheidung, und Auslassungsentscheidungen sind am billigsten zu kopieren, weil sie nichts kosten.

Linears Hero treibt dieselbe Disziplin noch weiter. Eine Überschrift, eine Unterüberschrift, ein Button – keine Screenshots, bis du scrollst. Die Entscheidung: „Dieses Publikum kennt das Problem bereits, also ist unsere Aufgabe, die Passung zu kommunizieren, nicht zu erziehen." Speichere diese Entscheidung. Wenn die Käufer eines Kunden anspruchsvoll sind, übernimm die Zurückhaltung. Wenn nicht, weißt du, dass du mehr Erklärung hinzufügen musst, bevor du um den Klick bittest. Auch die Anzahl der Wörter in einem Hero ist eine Entscheidung. Ein Hero, der drei Dinge sagen will, kommuniziert nichts. Wenn ein Beispiel zu viele Ideen above the fold hat, behandle es als Warnung, nicht als Vorbild.

Gehe ein echtes Beispiel durch. Du bewunderst eine SaaS-Homepage. Der Hero hat eine kurze Überschrift, eine Unterüberschrift, einen Button. Schreibe die Entscheidungen in Reihenfolge auf: Wer ist der Besucher, was ist sein Schmerz, was ist die eine Aktion, die ihn voranbringt. Wende das nun auf einen Dachdecker-Kunden an. Der Besucher ist ein Hausverwalter mit einem undichten Dach mitten im Winter. Schmerz ist Risiko und Ausfallzeit. Aktion ist „Begutachtung erhalten." Wenn das SaaS-Beispiel entschieden hat, dass „der Besucher das Produkt in Bewegung sehen muss", tauschst du die Produktanimation gegen ein Foto der fertigen Arbeit. Gleiche Entscheidung, anderes Medium. So stiehlst du ohne den Lookalike-Fehler. Allein für die Disziplin der einen Seite mit einer Aktion tauche ein in die bewährten SaaS-Landingpage-Praktiken.

Es geht nicht um die Branche, sondern um die Absicht

Hör auf, Beispiele nach Branchenlabel zu klassifizieren. „Das ist eine SaaS-Seite" sagt dir fast nichts Nützliches. „Das ist eine Seite für eine komplizierte Entscheidung, bei der der Käufer drei Optionen vergleicht, bevor er sich festlegt" sagt dir, was du stehlen kannst. Klassifiziere nach der Käuferabsicht deines Kunden und ordne dann den Beispieltyp dieser Absicht zu.

BeispieltypBesucherintentionDavon stehlenDas überspringen
SaaS„Entscheiden, ob das zu mir passt"Disziplin des Nutzenversprechens, einzelner CTA, Feature-zu-Nutzen-TexteNur-Produkt-Animationen, Preisseitenstruktur, Demo-zuerst-CTAs
Agentur„Kann ich dieser Firma vertrauen?"Fallstudien, Kundenbeweise, benanntes Team, klarer Weg zur ZusammenarbeitLangatmige Prozessseiten, jargonlastige Ansatztexte
Portfolio„Ist ihr Geschmack so gut wie die Arbeit?"Starke Projektgeschichten, Vorher/Nachher, zurückhaltende PräsentationDürftige Kontaktdaten, persönlichkeitslastige Texte, versteckte CTAs

Hier machen Agenturen Fehler: Sie ordnen das Beispiel dem eigenen Ehrgeiz zu, statt der Käuferabsicht des Kunden. Ein Kunde einer Anwaltskanzlei bittet um „eine Portfolio-Seite", weil ein Konkurrent eine hat. Führe den Intent-Test durch. Eine Person, die einen Anwalt einstellt, hat Angst. Sie will den Beweis, dass der Anwalt ähnliche Fälle gewonnen hat, fair abrechnet und sie sich nicht dumm fühlen lässt. Das ist ein Agentur-Muster – Beweise, Glaubwürdigkeit, Ergebnisse – kein Portfolio-Muster. Stiehl aus Agentur-Beispielen: Fallergebnisse, Kundengeschichten, Kammerzugehörigkeiten, einen klaren Abschnitt „Wie die Zusammenarbeit beginnt." Wenn du entscheiden musst, welches Format für einen bestimmten Kunden wirklich gewinnt, arbeite das Format-Auswahl-Framework durch, bevor du ein Beispiel öffnest.

Die Tabelle ist ein Triage-Werkzeug, kein Gefängnis. Für einen Bauunternehmer, der sich um kommerzielle Projekte bewirbt, ist die Käuferabsicht: „Kann diese Crew zu Zeit und Budget liefern?" Das ist Agentur-Vertrauen mit Portfolio-Beweisen. Hybride entstehen ständig. Der Fehler ist zu denken, man müsse ein einziges Format wählen. Du wählst, welches Muster dominiert, nicht welches einzelne Format du verwendest. Eine Bau-Website kann Vorher/Nachher-Fotos (Portfolio-Muster) zeigen und dennoch mit Sicherheitszertifizierungen und Gewerkschaftsmitgliedschaften (Agentur-Muster) führen. Entscheide das Verhältnis nach der Absicht und lass dann die Markenstimme des Kunden das endgültige Layout festlegen.

Gehen wir ein zweites Szenario durch: eine Fractional-CFO-Beratung. Der Käufer ist ein Gründer, der von einem früheren Berater verbrannt wurde. Das ist ein Agentur-Problem. Studiere Agentur-Websites, die Kunden und präzise Ergebnisse nennen. Dein Kunde kann nicht immer Kunden nennen – NDA –, also überträgt sich die Entscheidung, aber der Beweis ändert sich: anonymisierte „Portfoliounternehmen im Fintech-Bereich" und Ergebnissprache statt Logos. Schreibe „Vertrauen hängt von der Spezifität der Beweise ab" in den Plan. Jetzt weiß der Kunde, warum jedes Element existiert.

Übernimm die Entscheidung, nicht das Design

Die meisten „Best-Practice"-Artikel sagen dir, Designentscheidungen seien übertragbar. Das sind sie nicht. Ein randloser Video-Hero funktioniert in einem Drohnenfotografie-Portfolio, weil die Aufgabe des Publikums darin besteht, Bilder zu beurteilen. Platzierst du dasselbe randlose Video auf der Startseite eines Rechtsdokumenten-Dienstes, hast du das Produkt versteckt. Der schlechteste Ratschlag, dem du folgen kannst, ist „Stiehl wie ein Künstler." Gestohlenes Output erzeugt Ähnlichkeiten. Gestohlene Entscheidungen erzeugen individuelle Arbeit, die zufällig konvertiert.

Schreibe für jede bemerkenswerte Entscheidung in einem Beispiel einen Satz, der mit „weil" beginnt. Der Weißraum: „weil dieses Publikum Raum mit Premium gleichsetzt." Der dunkle Hintergrund: „weil dieses Publikum in Technik denkt und Dunkelmodus technisch wirkt." Die lächelnde Person: „weil dieses Publikum die Transaktion fürchtet und Wärme will." Jetzt ist die Entscheidung übertragbar. Eine Premium-Kanzlei könnte die Weißraum-Entscheidung brauchen; ein Rabatt-Rechtsdienst muss sie ablehnen. Du hast jetzt eine Regel, die du anwenden kannst, kein Screenshot zum Kopieren.

Schreibe den Weil-Satz auf, bevor du einen Screenshot machst. Dein Gedächtnis wird den Screenshot unter „schönes Design" ablegen und die Begründung innerhalb einer Woche verlieren. Der aufgeschriebene Weil-Satz zwingt dich, einen Mechanismus zu artikulieren. Wenn du keinen schreiben kannst, hast du das Beispiel nicht verstanden – du hast es nur gemocht. Diese Unterscheidung ist das ganze Spiel.

Nimm ein konkretes Beispiel. Du siehst eine Portfolio-Site für einen Solo-Designer. Jedes Projekt beginnt mit einem großen Bild, dann das Ergebnis, dann der Name des Kunden. Die Entscheidung: „Dieses Publikum kauft Ergebnisse, indem es das Ding ansieht." Jetzt gestaltest du eine Website für Hausumbauten neu. Die Aufgabe des Käufers ist es ebenfalls, sich das Ding anzusehen – die Veränderungen. Also überträgt sich die Entscheidung: Führe mit einer Galerie von Vorher/Nachher-Projekten. Aber der Käufer muss auch vertrauen, dass die Crew pünktlich auftaucht, also fügst du eine Entscheidung aus der Agentur-Spalte hinzu: einen Beratungs-CTA und ein Testimonial above the fold. Das ist die Skelett-stehlen-Methode: zwei übernommene Entscheidungen, null übernommenes Design.

Du wirst Widerstand von Kunden erleben, die eine Website wollen, die wie das preisgekrönte Beispiel aussieht, das du ihnen gezeigt hast. Widerstehe höflich. Sage ihnen, dass das Beispiel für seine Entscheidungen ausgezeichnet wurde, nicht für seine Pixel, und dass ihre Käufer nicht die Käufer des Beispiels sind. Das Gespräch ist einfacher, wenn du auf den Ein-Satz-Weil-Satz zeigen und sagen kannst: „Diese Entscheidung funktioniert; dieses Bild funktioniert nicht für dein Publikum."

Vorbehalt: Wenn die Käufer des Kunden visuell anspruchsvoll sind – Architekten, Kreativdirektoren, interne Markenteams – ist Geschmack das Produkt. Übernimm wörtlicher. Die Frage ist nie: „Gefällt mir dieses Beispiel?" Sondern: „Braucht der Käufer meines Kunden diese Entscheidung?" Wenn nein, verwerfe es ohne Schuldgefühle.

Baue eine Swipe-Datei mit Kontext auf

Einmalige Inspiration ist nutzlos, wenn du viele Websites pro Jahr baust. Baue eine Swipe-Datei, die Entscheidungen speichert, nicht Screenshots. Verwende eine einfache Tabelle: Beispiel, URL, Zielgruppe, Absicht, Versprechen, Beweis, CTA und „Nicht verwenden für". Füge eine weitere Spalte für den Ein-Satz-Weil-Satz hinzu. In dieser Spalte liegt der Wert.

Jede Zeile braucht: die Beispiel-URL, einen Screenshot, den Ein-Satz-Weil-Satz, die dominante Käuferabsicht, das Versprechen, den Beweis, den CTA und eine „Nicht verwenden für"-Warnung. Tagge jede Zeile mit einem Absichts-Label: „dringender lokaler Service", „überlegter Kauf", „vertrauenssensibler Profi", „geschmacksgetriebener Kreativer". Wenn ein neues Kundenbriefing eintrifft, filtere zuerst nach dem Absichts-Label. Die Branche ist nur ein Tiebreaker. Ein Dental-Kunde und ein Klempner-Kunde können die Absicht „Jetzt Angebot anfordern" teilen – die Klempner-Beispiele können der Dental-Seite besser dienen als eine ausgefallene zahnarzt-spezifische Website, die du letzte Woche gespeichert hast.

Überprüfe die Datei vierteljährlich. Lösche Beispiele, die nicht mehr konvertieren oder veralten. Füge jede Woche eine Erkenntnis hinzu, auch wenn es ein einzelner CTA ist. Nach zwei Quartalen besitzt du eine interne Entscheidungsbibliothek, die kein einzelnes Beispiel bieten kann.

Verwende die Datei in Kunden-Kickoffs. Präsentiere eine gefilterte Ansicht: „Wir haben dieses Seitensystem aus drei Entscheidungen aufgebaut, die zu deinen Käufern passen." Es zeigt, dass deine Agentur ein System hat, nicht nur Geschmack. Allein das gewinnt mehr Aufträge als das Kopieren eines trendigen Layouts.

Bevor du etwas auslieferst, prüfe das Ergebnis so, wie es ein Kunde tun würde, dem es egal ist. Dieses Audit fängt jede gestohlene Designentscheidung auf, die ihren Platz nicht verdient.

Fazit

Hör auf, Websites zu sammeln. Fang an, Gründe zu sammeln. Wenn du das nächste Mal ein Kundenbriefing bekommst, öffne die Swipe-Datei, finde die Absicht, die zu ihren Käufern passt, und stiehl die passenden Entscheidungen. Das Design wird zwangsläufig ihres sein – weil ihr Markt, ihre Marke und ihr Budget anders sind. Genau darum geht es. Eine reverse-engineerte Website konvertiert, weil sie aus Entscheidungen aufgebaut ist, die für das Publikum eines anderen wahr waren und gegen deines neu getestet wurden.

Sources (5)