Landing Page Design

Übersicht

Erstelle Landing Pages, die konvertieren UND fesseln. Diese Kombination aus konversionsorientierter Struktur und unverwechselbarem visuellen Design erschafft Seiten, die in einer KI-gesättigten Welt hervorstechen. Das Ziel: Seiten im Wert von 50-100 $, die du stolz verkaufen würdest.

PFLICHT: Vibe Discovery (Zuerst erledigen!)

BEVOR du Code schreibst, MUSST du den Vibe Discovery-Prozess durchführen. Dies ist keine Nachschlagetabelle – es ist eine kreative Aufforderung, die 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 User diese Fragen, SYNTHETISIERE dann eine einzigartige Richtung. Ordne die Antworten nicht einfach voreingestellten Werten zu.

Schritt 1: Kontext sammeln (Diese Fragen stellen)

F1: Was ist ein realer Ort oder Gegenstand, der diese Marke verkörpert?

Nicht "welche Branche" – ein tatsächliches, spezifisches Ding. Ein Tokyo-Convenience-Store um 2 Uhr morgens. Die Küche einer Großmutter. Ein brutalistisches Parkhaus. Ein Korallenriff. Das Cockpit einer 747. Ein Flohmarkt in Marrakesch. Ein Aufnahmestudio aus den 1970ern.

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

Wähle EIN(E)s aus: Ruhig. Energisch. Neugierig. Vertraut. Erfreut. Beeindruckt. Rebellisch. Nostalgisch. Inspiriert. Amüsiert. Kultiviert. Willkommen. Fasziniert. Selbstbewusst.

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: Wofür sollte diese Seite NIEMALS gehalten werden?

Nenne 2-3 konkrete Dinge, die du aktiv vermeiden willst. "Ein Krypto-Projekt", "Eine Wellness-App", "Etwas von einer Bank", "Alles mit lila Verläufen"

Schritt 2: Die Ästhetik erfinden (Nicht nachschlagen – erschaffen)

Basierend auf den Antworten, erschaffe einen EINZIGARTIGEN Vibe, indem du festlegst:

FARBERFINDUNG (Keine auswendig gelernten Paletten verwenden – leite sie von dem Ort/Gegenstand ab)

Welche Farben existieren in dem realen Ort/Gegenstand aus F1?
Extrahiere 3-4 Farben, die sich authentisch auf diese Referenz beziehen
Erfinde spezifische Hex-Codes neu – verwende keine Codes aus früheren Projekten wieder
Gib deiner Palette einen evokativen Namen (nicht "blau und orange", sondern "Midnight Bodega" oder "Rust Belt Morning")

TYPOGRAFIE-ERFINDUNG (Passe die Stimme an die Kollision an)

Wie würde Text an diesem Ort klingen?
Finde eine Display-Schriftart, die die Kollision aus F3 verkörpert
Verwende nicht standardmäßig deine üblichen Entscheidungen – durchstöbere Google Fonts mit frischen Augen
Berücksichtige: Stärke, Breite, Kontrast, Eigenheiten

LAYOUT-ERFINDUNG (Leite es von dem physischen Raum ab)

Wie ist der Raum an 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?

BEWEGUNGSERFINDUNG (Passe sie der Emotion an)

Wie bewegt sich die Emotion aus F2?
Ruhig = kaum wahrnehmbar. Energisch = kinetisch. Kultiviert = langsam und bedächtig.
Was ist EINE charakteristische Bewegung, die diese Seite definiert?

Schritt 3: Dein Vibe-Spezifikation schreiben

Schreibe dies explizit auf, bevor du codest:

VIBE-NAME: [Erfinde einen 2-3-Wort-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 sie passt]
- Fließtext: [spezifischer Schriftname] - [warum]
- Charakter: [beschreibe die Stimme]

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

BEWEGUNG:
- Niveau: [still/subtil/mäßig/dynamisch/chaotisch]
- Signaturanimation: [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 es weitergeht, überprüfe:

Ich habe KEINE Hex-Codes aus meinen letzten 3 Projekten wiederverwendet
Ich bin nicht auf meine "bequemen" Schriftarten zurückgegriffen (Prüfung: 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 selbst überrascht

Beispiel Vibe Discovery

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

F2 - Emotion: "Selbstbewusst"

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

F4 - Nie verwechseln mit: "Einer Meditations-App, etwas Verspieltem, Startup-Bro-Tech"

Generiertes Vibe-Spezifikation:

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

FARBEN:
- Primär: #1a1a1a - das Schwarz der Zugtüren
- Sekundär: #f5f5f0 - Bahnsteigbeton, glatt gelaufen
- Hintergrund: #fafaf8 - leuchtstoffröhrenbeleuchtet weiß
- Akzent: #e60012 - JR-Linien-Rot, befiehlt Aufmerksamkeit
- Palettenname: "Platform Edge"

TYPOGRAFIE:
- Display: Darker Grotesque - selbstbewusst, leicht kondensiert, europäische Kante
- Fließtext: Noto Sans JP - sauberer Nutzen, transit-inspiriert
- Charakter: Autoritär, aber nicht kalt. Klar. Direktional.

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

BEWEGUNG:
- Niveau: Subtil, aber präzise
- Signaturanimation: Elemente gleiten von der Seite herein wie ankommende Züge - horizontal, glatt, mit exaktem Timing

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

Inspirations-Starter (Wenn du bei F1 nicht weiterkommst)

Die Anti-Konvergenz-Regeln

Kein Hex-Code-Gedächtnis - Generiere Farben frisch aus der Referenz, rufe nicht "mein übliches Blau" ab
Schriftartenrotation erforderlich - Kann nicht dieselbe Display-Schriftart 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", aber ihn einzigartig macht
Gib ihm einen Namen - Ein namenloser Vibe wird generisch. Ein benannter Vibe hat Identität.

Kurze Kontext-Fragen (Minimal-Version)

Wenn der User 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?"

Synthetisiere dann einen Vibe aus diesen drei Antworten.

PFLICHT: Copy-Strategie (Gleichzeitig mit Vibe Discovery erledigen)

Führe dies PARALLEL zum Vibe Discovery durch. Vibe Discovery liefert das Aussehen. Die Copy-Strategie liefert die Worte. Beide müssen erledigt sein, bevor Code geschrieben wird.

Die Konversionsgleichung

Jede Copy-Entscheidung folgt daraus:

Kaufrate = Wunsch - (Aufwand + Verwirrung)

Wunsch steigern → kommuniziere den Wert klar und spezifisch
Aufwand verringern → Kürze, scanbare Struktur, offensichtliche nächste Schritte
Verwirrung verringern → sage genau, was es ist, mache Buttons unübersehbar

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

Schritt 1: Einwandsfindung

Bevor du eine einzige Überschrift schreibst, identifiziere die Kauf-Einwände. Frage den User:

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

Häufige Einwand-Kategorien:

"Ich habe nicht die Fähigkeiten/Zeit dafür"
"Das wird in meiner spezifischen Situation nicht funktionieren"
"Es ist zu teuer für das, was ich bekomme"
"Ich vertraue dem noch nicht genug"
"Ich verstehe nicht, was das eigentlich macht"

Schreibe die Top 3 Einwände auf. Diese treiben deinen Überschrift-Haken, den Feature-Text und das CTA-Framing.

Schritt 2: Überschrift-Formel

Jede Hero-Überschrift folgt: Wertversprechen + Haken

Das Wertversprechen muss diesen Lackmustest bestehen:

Wenn ein Besucher NUR die Überschrift sieht und sonst nichts, weiß er dann genau, was du verkaufst?

❌ "Verbessere deinen Workflow" (Corporate Fluff – Workflow wofür?) ❌ "Die Zukunft der Produktivität" (sagt nichts Konkretes) ✅ "Lebensmittel in 1 Stunde geliefert" (spezifisch, konkret, klar) ✅ "Design-Websites visuell – kein Code erforderlich" (was es tut + wichtigster Einwand behandelt)

Der Haken 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 waren letzten Monat schneller unterwegs"

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

"Keine Kreditkarte erforderlich" (behandelt Vertrauenseinwand)
"Funktioniert mit deinen vorhandenen Tools" (behandelt Wechselkosten-Einwand)
"In 5 Minuten eingerichtet" (behandelt Aufwands-Einwand)

Verwende deinen wichtigsten Einwand aus Schritt 1, um den Hakentyp zu wählen.

Schritt 3: Unterüberschrift-Regeln

Die Unterüberschrift macht genau zwei Dinge:

Erklärt was das Produkt ist (wenn die Überschrift nutzenorientiert war)
Erklärt wie die kühne Behauptung möglich ist (wenn die Überschrift eine Behauptung aufstellte)

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

Schritt 4: Feature-Text-Struktur

Jedes Feature bekommt genau drei Elemente:

Element	Regeln
Feature-Überschrift	Nur kurzes Wertversprechen. Sei direkt. ❌ "Ermächtige dein Team" ✅ "Echtzeit-Zusammenarbeit"
Feature-Absatz	Prägnante Beschreibung + gehe auf EINEN kritischen Einwand ein. Verlinke bei Bedarf auf Details – 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 sich auf das dominante Wertversprechen des Helden beziehen. Features sind nicht zufällig – sie sind Beweise für die Behauptung, die du above the fold aufgestellt hast.

Schritt 5: CTA-Text

CTAs müssen die Erzählung des Helden fortsetzen, nicht generisch sein.

❌ "Jetzt starten" / "Demo anfordern" / "Anmelden" (faul, kontextlos) ✅ "Essen in meiner Nähe finden" (setzt eine Liefer-Erzählung fort) ✅ "Mit dem Design beginnen" (setzt eine Design-Tool-Erzählung fort) ✅ "Deine Ersparnisse sehen" (setzt eine Finanz-Erzählung fort)

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

Schritt 6: Social-Proof-Strategie

Wenn du namhafte Kunden/Pressemitteilungen hast:

Zeige Logos in einem Marquee – erzeugt FOMO ("jeder weiß schon davon")
Hebe beeindruckende Metriken hervor (Kundenzahl, verarbeitete Umsätze, etc.)

Wenn du NOCH KEINE nennenswerten Social Proofs hast (Kaltstart):

Biete 3-5 bekannten Unternehmen kostenlosen Zugang an und zeige dann ihre Logos
Verwende spezifische Testimonials mit echten Namen und Fotos (auch von Beta-Testern)
Zeige aggregierte Statistiken ("Von über 500 Teams genutzt" schlägt eine leere Logoleiste)
Erwäge "Zu sehen in" mit allen Presseerwähnungen, Podcasts oder Newslettern

Tu nicht so. Ein leerer Social-Proof-Abschnitt ist schlimmer als gar keiner.

Schritt 7: Multi-Audience-Routing

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

Füge ein "Wähle dein Abenteuer"-Element nahe dem oberen Seitenrand hinzu, das Besucher zu relevanten Abschnitten leitet. Beispiele:

Umschalt-Reiter: "Für Entwickler" / "Für Designer"
Geteilter Hero: "Ich bin ein [Rolle A]" / "Ich bin ein [Rolle B]"
Segmentierte Landing Pages, die vom Hero aus verlinkt sind

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

Copy-Strategie-Spezifikation

Schreibe dies zusammen mit deinem Vibe-Spezifikation auf:

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

ÜBERSCHRIFT:
- Wertversprechen: [was du verkaufst, konkret]
- Hakentyp: [kühne Behauptung / Einwand behandelt]
- Vollständige Überschrift: [der tatsächliche Text]
- Lackmustest: Würde jemand von allein wissen, was wir verkaufen? [ja/nein]

UNTERÜBERSCHRIFT: [1-2 Sätze – was es ist + wie die Behauptung funktioniert]

CTA-TEXT: [narrative Fortsetzung der Überschrift]

ZIELGRUPPE: [einzeln / multi-persona]
- Wenn multi: [wie wir sie leiten]

Die 50%-Regel

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

Abschnittszusammensetzung (Von oben nach unten)

1. Hero-Bereich (Primärer Fokus)

Das entscheidende Element. Muss enthalten:

Überschrift: Wertversprechen + Haken aus deiner Copy-Strategie-Spezifikation (siehe oben). Muss den Lackmustest bestehen – wenn jemand NUR das sieht, weiß er, was du verkaufst?
Unterüberschrift: Erklärt, was es ist + wie die Behauptung funktioniert. Maximal 1-2 Sätze, halte es locker.
CTA-Button(s): Narrative Fortsetzung der Überschrift (nicht "Jetzt starten" – siehe CTA-Text-Regeln oben). Optionaler sekundärer CTA.
Social Proof: Logo-Marquee, Testimonials oder Vertrauensabzeichen. Wenn Kaltstart, siehe Social-Proof-Strategie oben.
Visuelles Element: Produktaufnahme, Illustration oder animierter Hintergrund

Hero-Varianten:

Geteiltes Layout (Text links, visuell rechts)
Zentriert mit schwebenden Elementen
Vollflächiger Hintergrund mit überlagerndem Text
Asymmetrisch mit dekorativen Elementen

2. Features/Vorteile-Abschnitt

Zeige, was das Produkt kann. Jedes Feature braucht drei Elemente: Überschrift (kurzes Wertversprechen, kein "Ermächtigen/Revolutionieren")

…

[truncated for translation]

Landing-Design — Vibe Discovery + Anti-AI-Slop

Was ist Landing-Design — Vibe Discovery + Anti-AI-Slop?

In Ihrer bevorzugten KI fragen

Dokumentation