Was macht Landing Page Design?

Übersicht

Erstelle Landing Pages, die konvertieren UND fesseln. Dieser Skill kombiniert konversionsorientierte Struktur mit unverwechselbarem visuellem Design, um Seiten zu schaffen, die in einer KI-gesättigten Welt hervorstechen. Das Ziel: Seiten im Wert von 50-100 $, auf die du stolz wärst, sie zu verkaufen.

VERPFLICHTEND: Vibe Discovery (Mach das zuerst)

BEVOR du Code schreibst, MUSST du den Vibe Discovery-Prozess durchführen. Dies ist keine Nachschlagetabelle – es ist ein kreativer Prompt, der jedes Mal eine EINZIGARTIGE ästhetische Richtung generiert.

Das Ziel: Keine zwei Landing Pages sollten gleich aussehen, selbst für ähnliche Produkte.

Der Vibe Discovery-Prozess

Stelle dem Benutzer diese Fragen und SYNTHETISIERE dann eine einzigartige Richtung. Bilde Antworten nicht einfach auf Voreinstellungen ab.

Schritt 1: Kontext sammeln (Frage dies)

F1: Was ist ein realer Ort oder Gegenstand, den diese Marke darstellen würde?

Nicht "welche Branche" – ein tatsächliches, spezifisches Ding. Ein Tokioter Convenience Store um 2 Uhr nachts. Eine Großmutters Küche. Ein brutalistisches Parkhaus. Ein Korallenriff. Das Cockpit einer 747. Ein Flohmarkt in Marrakesch. Ein Tonstudio aus den 1970ern.

F2: Was ist DIE eine Emotion, die jemand in den ersten 3 Sekunden fühlen sollte?

Wähle EINE aus: Ruhig. Energiegeladen. Neugierig. Vertrauend. Entzückt. Beeindruckt. Rebellisch. Nostalgisch. Inspiriert. Amüsiert. Anspruchsvoll. Willkommen. Fasziniert. Zuversichtlich.

F3: Wähle ZWEI unerwartete Einflüsse, die kollidieren:

Beispiele: "Medizinverpackungen + Skateboard-Grafiken", "Tabellenkalkulationen + Street Art", "Luxushotel + Punk-Fanzine", "NASA-Missionskontrolle + Kindergarten", "Japanischer Convenience Store + Viktorianische Bibliothek"

F4: Womit sollte diese Seite NIEMALS verwechselt werden?

Nenne 2-3 spezifische Dinge, die du aktiv vermeiden solltest. "Ein Krypto-Projekt", "Eine Wellness-App", "Etwas von einer Bank Gemachtes", "Alles mit lila Farbverläufen"

Schritt 2: Erfinde die Ästhetik (Nicht nachschlagen – erschaffe)

Basierend auf den Antworten ERZEUGE einen einzigartigen Vibe, indem du entscheidest:

FARB-ERFINDUNG (Verwende keine auswendig gelernten Paletten – leite sie vom Ort/Gegenstand ab)

Welche Farben existieren in diesem realen Ort/Gegenstand aus F1?
Extrahiere 3-4 Farben, die sich authentisch für diese Referenz anfühlen
Erfinde frische, spezifische Hex-Codes – verwende keine Codes aus früheren Projekten wieder
Gib deiner Palette einen evokativen Namen (nicht "blau und orange" sondern "Mitternachts-Bodega" oder "Rostgürtel-Morgen")

TYPOGRAFIE-ERFINDUNG (Passe die Stimme der Kollision an)

Wie würde Text an diesem Ort klingen?
Finde eine Display-Schriftart, die die Kollision aus F3 verkörpert
Standard nicht auf deine üblichen Schriften zurück – durchstöbere Google Fonts mit neuen Augen
Berücksichtige: Stärke, Breite, Kontrast, Eigenheiten

LAYOUT-ERFINDUNG (Leite vom physischen Raum ab)

Wie ist der Raum in dem Ort aus F1 organisiert?
Ist er beengt oder weitläufig? Gitterartig oder organisch? Vertikal oder horizontal?
Welche unerwartete Layout-Entscheidung würde die Kollision aus F3 verkörpern?

BEWEGUNGS-ERFINDUNG (Passe die Emotion an)

Wie bewegt sich die Emotion aus F2?
Ruhig = kaum wahrnehmbar. Energiegeladen = kinetisch. Anspruchsvoll = langsam und bewusst.
Was ist EINE charakteristische Bewegung, die diese Seite definiert?

Schritt 3: Schreibe deine Vibe-Spezifikation

Bevor du codest, schreibe dies explizit auf:

VIBE-NAME: [Erfinde einen 2-3 Wörter langen Namen]
REFERENZ: [Der Ort/Gegenstand aus F1]
EMOTION: [Aus F2]
KOLLISION: [Aus F3]
ANTI-PATTERNS: [Aus F4]

FARBEN:
- Primär: [hex] - [warum diese Farbe]
- Sekundär: [hex] - [warum]
- Hintergrund: [hex] - [warum]
- Akzent: [hex] - [warum]
- Palettenname: [evokativer Name]

TYPOGRAFIE:
- Display: [spezifischer Schriftname] - [warum er passt]
- Fließtext: [spezifischer Schriftname] - [warum]
- Charakter: [beschreibe die Stimme]

LAYOUT:
- Dichte: [spärlich/ausgeglichen/dicht]
- Formen: [scharf/abgerundet/organisch/gemischt]
- Signaturelement: [eine ungewöhnliche Layout-Entscheidung]

BEWEGUNG:
- Level: [still/subtil/mäßig/dynamisch/chaotisch]
- Signatur-Animation: [eine spezifische Animation, die diese Seite definiert]

WILDCARD:
- Ein unerwartetes Detail, das nicht "passt", aber es einprägsam macht

Schritt 4: Der Frische-Check

Bevor du fortfährst, überprüfe:

Ich habe KEINE Hex-Codes aus meinen letzten 3 Projekten wiederverwendet
Ich bin NICHT zu meinen "bequemen" Schriften zurückgekehrt (prüfe: Verwende ich Inter? Nunito? Space Grotesk? Wenn ja, finde etwas anderes)
Die Kollision aus F3 ist tatsächlich in meinen Entscheidungen sichtbar
Jemand könnte diese Seite NICHT mit meinen vorherigen Landing Pages verwechseln
Ich habe eine Wildcard eingebaut, die sogar mich überrascht

Beispiel Vibe Discovery

F1 - Ort/Gegenstand: "Ein japanischer Bahnhof zur Hauptverkehrszeit"

F2 - Emotion: "Zuversichtlich"

F3 - Kollision: "Transit-Beschilderung + Haute Couture"

F4 - Niemals verwechseln mit: "Einer Meditations-App, allem Verspielten, Startup-Bruder-Tech"

Generierte Vibe-Spezifikation:

VIBE-NAME: Shinjuku Runway
REFERENZ: Japanischer Bahnhof zur Hauptverkehrszeit
EMOTION: Zuversichtlich
KOLLISION: Transit-Beschilderung + Haute Couture
ANTI-PATTERNS: Keine weichen Farbverläufe, keine verspielten Illustrationen, keine abgerundeten freundlichen Formen

FARBEN:
- Primär: #1a1a1a - das Schwarz der Zugtüren
- Sekundär: #f5f5f0 - Bahnsteigbeton, abgenutzt glatt
- Hintergrund: #fafaf8 - fluoreszierend beleuchtetes Weiß
- Akzent: #e60012 - JR-Linienrot, das Aufmerksamkeit erzwingt
- Palettenname: "Bahnsteigkante"

TYPOGRAFIE:
- Display: Darker Grotesque - zuversichtlich, leicht kondensiert, europäische Kante
- Fließtext: Noto Sans JP - saubere Nützlichkeit, transit-inspiriert
- Charakter: Autoritär, aber nicht kalt. Klar. Direktional.

LAYOUT:
- Dichte: Reichhaltig, aber organisiert - wie ein Bahnhofsplan
- Formen: Scharf mit absichtlichen runden Ausnahmen (wie Zugfenster)
- Signatur-Element: Starke horizontale Bänder, die Abschnitte wie Zugfahrpläne unterteilen

BEWEGUNG:
- Level: Subtil, aber präzise
- Signatur-Animation: Elemente gleiten von der Seite herein wie ankommende Züge - horizontal, sanft, mit exaktem Timing

WILDCARD:
- Ein Element verwendet eine stoffartige Texturüberlagerung - die Haute Couture-Kollision

Inspirations-Starter (Wenn du bei F1 feststeckst)

Die Anti-Konvergenz-Regeln

Kein Hex-Code-Gedächtnis - Generiere Farben frisch aus der Referenz, erinnere dich nicht an "mein übliches Blau"
Schriftrotation erforderlich - Kann die gleiche Display-Schrift nicht in aufeinanderfolgenden Projekten verwenden
Kollision muss sichtbar sein - Wenn jemand nicht BEIDE Einflüsse aus F3 sehen kann, streng dich mehr an
Wildcard ist obligatorisch - Jeder Vibe braucht ein Element, das nicht "passt", es aber einzigartig macht
Benenne es - Ein unbenannter Vibe wird generisch. Ein benannter Vibe hat Identität.

Schnelle Kontextfragen (Minimale Version)

Wenn der Benutzer einfach sagt "Mach mir eine Landing Page" ohne Kontext, frage:

"Was ist ein Ort oder Gegenstand, der die Energie dieser Marke einfängt?"
"Welche Emotion sollte dominieren?"
"Wie sollte das NIEMALS aussehen?"

Dann synthetisiere einen Vibe aus diesen drei Antworten.

VERPFLICHTEND: Copy-Strategie (Mach das mit Vibe Discovery)

Führe dies PARALLEL mit Vibe Discovery durch. Vibe Discovery gibt dir das Aussehen. Copy-Strategie gibt dir die Worte. Beides muss vor dem Code erledigt sein.

Die Konversionsgleichung

Jede Copy-Entscheidung folgt daraus:

Kaufrate = Verlangen - (Aufwand + Verwirrung)

Verlangen steigern → Wert klar und spezifisch kommunizieren
Aufwand verringern → Kürze, scanbare Struktur, offensichtliche nächste Schritte
Verwirrung verringern → Genau sagen, was es ist, Buttons unübersehbar machen

Wenn du bei einer Copy-Entscheidung feststeckst, frage: "Steigert dies das Verlangen oder verringert es Aufwand/Verwirrung?"

Schritt 1: Einwandsermittlung

Bevor du eine einzige Überschrift schreibst, identifiziere die Kaufeinwände. Frage den Benutzer:

"Was hat Ihre Kunden fast vom Kauf abgehalten?" "Warum haben Nicht-Kunden noch nicht gekauft?"

Häufige Einwandkategorien:

"Ich habe nicht die Fähigkeiten/Zeit dafür"
"Das funktioniert nicht für meine spezifische Situation"
"Es ist zu teuer für das, was ich bekomme"
"Ich vertraue dem noch nicht genug"
"Ich verstehe nicht, was das eigentlich tut"

Notiere die Top 3 Einwände. Diese steuern deinen Headline-Hook, Feature-Text und CTA-Rahmen.

Schritt 2: Headline-Formel

Jede Hero-Headline folgt: Wertversprechen + Hook

Das Wertversprechen muss diesen Lackmustest bestehen:

Wenn ein Besucher NUR die Headline und sonst nichts sieht, wird er genau wissen, was du verkaufst?

❌ "Verbessere deinen Workflow" (Firmen-Geschwafel — Workflow wofür?) ❌ "Die Zukunft der Produktivität" (sagt nichts Konkretes) ✅ "Lebensmittel in 1 Stunde geliefert" (spezifisch, konkret, klar) ✅ "Gestalte Websites visuell — kein Code erforderlich" (was es tut + Haupteinwand behandelt)

Der Hook ist einer von zwei Typen:

Typ A — Kühne, spezifische Behauptung (löst Neugier aus):

"Verkürze die Bereitstellungszeit von 4 Stunden auf 12 Minuten"
"10.000 Teams haben letzten Monat schneller ausgeliefert"

Typ B — Einwand behandelt (entfernt das #1 Kaufhindernis):

"Keine Kreditkarte erforderlich" (behandelt Vertrauenseinwand)
"Funktioniert mit deinen bestehenden Tools" (behandelt Wechselkosten-Einwand)
"Einrichtung in 5 Minuten" (behandelt Aufwands-Einwand)

Verwende deinen Top-Einwand aus Schritt 1, um den Hook-Typ auszuwählen.

Schritt 3: Untertitel-Regeln

Der Untertitel macht genau zwei Dinge:

Erklärt, was das Produkt ist (wenn die Headline nutzenorientiert war)
Erklärt, wie die kühne Behauptung möglich ist (wenn die Headline eine Behauptung aufgestellt hat)

Maximal: 1-2 Sätze. Halte es locker. Wenn du drei Sätze brauchst, leistet deine Headline nicht genug Arbeit.

Schritt 4: Feature-Text-Struktur

Jedes Feature bekommt genau drei Elemente:

Element	Regeln
Feature-Überschrift	Nur kurzes Wertversprechen. Sei direkt. ❌ "Befähige dein Team" ✅ "Echtzeit-Zusammenarbeit"
Feature-Absatz	Präzise Beschreibung + adressiere EINEN kritischen Einwand. Verlinke zu Details, falls nötig — keine Textwände.
Feature-Bild	Zeige das Produkt IN AKTION. Für Software: GIFs > Screenshots > abstrakte Kunst. Für physische Güter: Anwendungsfälle + Nahaufnahmen der Verarbeitungsqualität.

Jedes Feature sollte auf das dominante Wertversprechen der Hero zurückführen. Features sind nicht zufällig – sie sind Beweise für die Behauptung, die du above the fold gemacht hast.

Schritt 5: CTA-Text

CTAs müssen die Erzählung der Hero fortsetzen, nicht generisch sein.

❌ "Loslegen" / "Demo anfordern" / "Registrieren" (faul, kontextfrei) ✅ "Essen in meiner Nähe finden" (setzt eine Liefererzählung fort) ✅ "Mit Design beginnen" (setzt eine Design-Tool-Erzählung fort) ✅ "Deine Ersparnisse sehen" (setzt eine Finanzerzählung fort)

Der CTA-Button-Text sollte sich wie der natürliche nächste Satz nach dem Lesen der Headline anfühlen.

Schritt 6: Strategie für soziale Beweise

Wenn du bemerkenswerte Kunden/Presse hast:

Zeige Logos in einem Laufband – erzeugt FOMO ("jeder weiß bereits davon")
Hebe beeindruckende Kennzahlen hervor (Kundenzahl, verarbeiteter Umsatz usw.)

Wenn du NOCH KEINE bemerkenswerten sozialen Beweise hast (Kaltstart):

Biete 3-5 bekannten Unternehmen kostenlosen Zugang an und zeige dann ihre Logos
Verwende spezifische Erfahrungsberichte mit echten Namen und Fotos (auch von Beta-Benutzern)
Zeige aggregierte Statistiken ("Von 500+ Teams verwendet" schlägt eine leere Logoleiste)
Ziehe "Wie gesehen in" mit allen Presseerwähnungen, Podcasts oder Newslettern in Betracht

Fälsch es nicht. Ein leerer Abschnitt für soziale Beweise ist schlimmer als gar kein Abschnitt.

Schritt 7: Routing für mehrere Zielgruppen

Wenn dein Produkt verschiedene Personas bedient (z. B. Einzelpersonen vs. Teams, Entwickler vs. Designer):

Füge ein "Wähle dein eigenes Abenteuer"-Element nahe der Spitze der Seite hinzu, das Besucher zu relevanten Abschnitten leitet. Beispiele:

Registerkarten: "Für Entwickler" / "Für Designer"
Geteilte Hero: "Ich bin ein [Rolle A]" / "Ich bin ein [Rolle B]"
Segmentierte Landing Pages, die von der Hero aus verlinkt sind

Zwinge nicht alle durch denselben Trichter, wenn sie unterschiedliche Bedürfnisse haben.

Copy-Strategie-Spezifikation

Schreibe dies zusammen mit deiner Vibe-Spezifikation auf:

TOP 3 EINWÄNDE:
1. [Einwand] → behandelt in: [Headline/Feature/CTA]
2. [Einwand] → behandelt in: [Headline/Feature/CTA]
3. [Einwand] → behandelt in: [Headline/Feature/CTA]

HEADLINE:
- Wertversprechen: [was du verkaufst, konkret]
- Hook-Typ: [kühne Behauptung / Einwand behandelt]
- Vollständige Headline: [der tatsächliche Text]
- Lackmustest: Würde jemand wissen, was wir verkaufen, allein daraus? [ja/nein]

UNTERTITEL: [1-2 Sätze - was es ist + wie die Behauptung funktioniert]

CTA-TEXT: [narrative Fortsetzung der Headline]

ZIELGRUPPE: [einzeln / mehrere Personas]
- Wenn mehrere: [wie wir sie leiten]

Die 50%-Regel

Verbringe 50 % deiner Zeit mit dem Hero-Bereich. Es ist das Titelbild für soziale Medien, der erste Eindruck, der Hook. Alles andere ergibt sich daraus, den Hero richtig hinzubekommen.

Abschnittskomposition (Von oben nach unten)

1. Hero-Bereich (Primärer Fokus)

Das Entscheidende Element. Muss enthalten:

Headline: Wertversprechen + Hook aus deiner Copy-Strategie-Spezifikation (siehe oben). Muss den Lackmustest bestehen – wenn jemand NUR dies sieht, weiß er, was du verkaufst?
Untertitel: Erklärt, was es ist + wie die Behauptung funktioniert. Maximal 1-2 Sätze, locker halten.
CTA-Button(s): Narrative Fortsetzung der Headline (nicht "Loslegen" – siehe CTA-Text-Regeln oben). Optionaler sekundärer CTA.
Sozialer Beweis: Logoleiste, Erfahrungsberichte oder Vertrauensabzeichen. Wenn Kaltstart, siehe Strategie für soziale Beweise oben.
Visuelles Element: Produktaufnahme, Illustration oder animierter Hintergrund

Hero-Varianten:

Geteiltes Layout (Text links, visuell rechts)
Zentriert mit schwebenden Elementen
Hintergrund über die ganze Breite mit überlagertem Text
Asymmetrisch mit dekorativen Elementen

2. Features/Nutzen-Abschnitt

Zeigen, was das Produkt tut. Jedes Feature braucht drei Elemente: Überschrift (kurzes Wertversprechen, kein "Befähigen/Revolutionieren")

Landing Page Design

Was ist Landing Page Design?

In Ihrer bevorzugten KI fragen

Dokumentation