Was macht Landingpage-Design?

Eine Landingpage ist keine Homepage. Eine Homepage dient mehreren Absichten. Eine Landingpage gewinnt eine Absicht:

Ein Angebot → Eine Zielgruppe → Eine primäre Aktion.

Diese Fertigkeit hat zwei Hälften. Teil A entscheidet, was die Seite sagt und wie sie strukturiert ist. Teil B ist das nicht verhandelbare visuelle System. Arbeiten Sie A durch, bevor Sie B anfassen.

Anwendungsbereich

Anwenden auf alle Web-UI-Arbeiten: Landingpages, Marketing-Seiten, Komponenten, Dashboards, Prototypen und Design-Reviews. Wenn eine Regel hier mit einem Framework-Standard kollidiert, gewinnt diese Datei. Wenn die explizite Eingabe des Benutzers mit einer Regel kollidiert, gewinnt der Benutzer.

Begleitende Fertigkeit. Für die Verbesserung einer bestehenden Website anstelle des Aufbaus einer neuen, verwenden Sie redesign-existing-projects (github.com/elayadesign/redesign-skill). Es erkennt generische Muster und verweist für jeden konkreten Wert auf diese Datei.

TEIL A — Strategie und Struktur

A1. Zielerfassung

Sammeln Sie diese vor dem Gestalten oder Schreiben. Fragen Sie nur nach dem, was fehlt, und zwar in einem Durchgang, nicht eine Frage nach der anderen.

Zweck

Was ist die EINE primäre Aktion? (Testversion, Demo, Kauf, Warteliste, Download)
Was ist das Angebot, genau das, was sie bekommen?
Was zählt als Konversion? (Klick, Anmeldung, Kauf)

Zielgruppe und Kontext

Wer ist das ICP?
Welches Problem versuchen sie zu lösen?
Die drei häufigsten Einwände: warum sie heute nicht konvertieren
Verkehrsquelle: Anzeigen, Suche, Social Media, E-Mail
Was wissen Besucher bereits, wenn sie landen?

Nachweise und Assets

Beweispunkte: Logos, Erfahrungsberichte, Zahlen, Fallstudien
Screenshots, Demovideo, Produkt-GIFs
Garantien, Rückgabebedingungen, Kündigungsbedingungen

Einschränkungen

Markenstimme: lässig oder professionell
Designrichtung: minimal editorial, verspielt 3D, Glas-UI
Mobile Priorität?

Wenn der Benutzer nicht antworten kann, treffen Sie eine vernünftige Annahme, geben Sie diese in einer Zeile an und fahren Sie fort. Halten Sie den Build nicht auf.

A2. Seitenstruktur

Above the Fold (erforderlich)

Überschrift, Ergebnis plus Zielgruppe
Unterüberschrift, klärt das Wie und fügt Spezifität hinzu
Primärer CTA, klares Verb plus das, was sie bekommen
Ein Beweissignal, Logo-Strip, Statistik oder kurzer Erfahrungsbericht
Hero-Visual, Produkt-Screenshot oder -Video oder eine starke Illustration

Mittlere Seite (das Argument) 6. Problem zur Lösung, ein Abschnitt 7. Vorteile, drei bis fünf, ergebnisorientiert 8. Wie es funktioniert, drei Schritte 9. Social Proof, Erfahrungsberichte oder eine Fallstudie

Unten (Einwandbehandlung) 10. FAQ, sechs bis zwölf Fragen 11. Risikoumkehrung, Testversion, jederzeit kündbar, Garantie 12. Finaler CTA, identisch mit dem oberen

Fügen Sie den obligatorischen Tagline-Reveal-Abschnitt aus B11 irgendwo im Argument der mittleren Seite ein, typischerweise direkt nach dem Hero oder nach den Vorteilen.

A3. Layoutauswahl

Wählen Sie eines aus und begründen Sie die Wahl.

Typ	Verwendung, wenn
A. Klassisches Hero plus Abschnitte	Das Produkt aus einem Hero-Screenshot verständlich ist. Am häufigsten.
B. Long-Form-Geschichte	Sie aufklären und Skepsis überwinden müssen.
C. Minimale Konversionsseite	Verkehr mit hoher Absicht (E-Mail an bekannte Nutzer) oder ein kurzes Angebot wie Download oder Warteliste.
D. Vergleichsseite	Die Suchabsicht Alternativen beinhaltet ("X vs. Y", "Am besten für"). Wird normalerweise mit SEO-Seiten kombiniert.

A4. Konversionsregeln

Botschaft an die Quelle anpassen. Wenn der Verkehr von Anzeigen kommt, spiegeln Sie die Anzeigenüberschrift im Hero wider und behalten Sie das gleiche Versprechen und den visuellen Ton bei.

Machen Sie den nächsten Schritt offensichtlich. Ein primärer CTA. Platzieren Sie niemals konkurrierende CTAs above the fold.

Schreiben Sie zuerst den Vorteil. Funktionen sind das, was es tut. Vorteile sind, was das für sie bedeutet.

Seien Sie spezifisch.

❌ "Zeit sparen und optimieren"
✅ "Reduzieren Sie Ihre wöchentliche Berichterstattung von 4 Stunden auf 15 Minuten"

Risiko reduzieren. Wählen Sie mindestens eines: kostenlose Testversion, kostenloser Plan, keine Kreditkarte, jederzeit kündbar, Geld-zurück-Garantie.

Behandeln Sie Einwände als Abschnitt, nicht als Fußnote. Verschieben Sie die FAQ bei Angeboten mit hoher Reibung nach vorne. Platzieren Sie Beweise direkt neben der Behauptung, die sie stützen.

A5. Texten

Überschriftenformeln

"{Ergebnis} ohne {Schmerz}"
"Die {Kategorie} für {Zielgruppe}"
"{Ergebnis} in {Zeit} liefern"

Unterüberschrift. Ein oder zwei Sätze. Klären Sie, was es ist und für wen es ist.

CTA. Verb plus das, was sie bekommen. Niemals "Mehr erfahren" oder "Absenden". Verwenden Sie "Kostenlose Testversion starten", "Demo buchen", "Checkliste herunterladen".

Vorteilsaufzählungen. Fetter Vorteil, dann der Beweis oder das Detail. Beispiel: Schnellere Iteration — generieren Sie drei Layout-Varianten mit einem Klick.

Hinweis: Die Kopierregeln in B1 gelten weiterhin. Keine Bindestriche in Sätzen, keine verwaisten Wörter.

A6. Build-Reihenfolge

Arbeiten Sie Abschnitt für Abschnitt in dieser Reihenfolge:

Hero
Vorteile
Wie es funktioniert
Beweise
FAQ
Finaler CTA

Bauen Sie die gesamte Seite bei jeder Iteration nicht neu auf. Abschnitt für Abschnitt behält die Kontrolle und hält Diffs überprüfbar.

A7. SEO und AEO

Nicht indizieren Sie reine Werbekampagnenseiten oder zeitlich stark begrenzte Angebote. Verwenden Sie noindex oder halten Sie sie hinter einem nicht indizierten Pfad.

Indizieren Sie zeitlose Angebote und Seiten, bei denen die Suchabsicht dem Versprechen entspricht. Fügen Sie einen klaren Titel und eine Meta-Beschreibung, interne Links von der Homepage und Feature-Seiten sowie die FAQ in einfacher Frage-und-Antwort-Form für AEO hinzu. Fügen Sie ggf. FAQ-Schema hinzu.

A8. Fallstricke

Zu viele CTAs above the fold
Vages Wertversprechen: "optimieren", "verbessern"
Eine große Liste von Funktionen ohne Ergebnisse
Beweise am Ende vergraben
Mobile Layout, das die Lesbarkeit beeinträchtigt
Kein klarer nächster Schritt

TEIL B — Visuelles System

Jeder visuelle Wert muss durch diese Regeln aufgelöst werden, anstatt ad hoc erfunden zu werden.

B1. Typografie

Schriftarten

Verwenden: Geist, Manrope, Geist Mono, Poppins.

Niemals verwenden: Inter, Roboto, Arial, Open Sans, Helvetica.

Niemals kursive Schriftarten irgendwo im Interface verwenden.

Eine Schriftart pro Website. Kombinieren Sie nicht zwei Schriftarten, es sei denn, die Eingabe fordert dies explizit an. Geist Mono ist neben einer primären Schriftart nur für Code, Daten oder numerische UI erlaubt, wo eine nichtproportionale Schriftart funktional erforderlich ist.

Niemals ultra fette Gewichte (900 / Black) verwenden. Maximal Semibold oder Bold.

Kopierregeln

Keine Bindestriche im Text. Verwenden Sie - nicht in Fließtext, Überschriften oder Labels. Formulieren Sie die Phrase stattdessen um.

Keine verwaisten Wörter. Ein einzelnes Wort darf niemals allein in der letzten Zeile stehen. Wenden Sie text-wrap: balance für Überschriften und text-wrap: pretty für Fließtext an.

Schriftgrößenskala

Lösen Sie Schriftgrößen immer auf Tailwinds Standard-Schriftgrößenskala auf. Belassen Sie niemals willkürliche Werte, einschließlich text-[19px], font-size: 22px oder 1.4rem.

Wenn eine vorhandene Größe nicht genau auf eine Stufe fällt, rasten Sie sie auf die nächstkleinere Stufe ein, wobei Sie sowohl die Größe als auch die zugehörige Zeilenhöhe berücksichtigen.

Klasse	Größe	Zeilenhöhe
`text-xs`	12px (0.75rem)	16px
`text-sm`	14px (0.875rem)	20px
`text-base`	16px (1rem)	24px
`text-lg`	18px (1.125rem)	28px
`text-xl`	20px (1.25rem)	28px
`text-2xl`	24px (1.5rem)	32px
`text-3xl`	30px (1.875rem)	36px
`text-4xl`	36px (2.25rem)	40px
`text-5xl`	48px (3rem)	1
`text-6xl`	60px (3.75rem)	1
`text-7xl`	72px (4.5rem)	1
`text-8xl`	96px (6rem)	1
`text-9xl`	128px (8rem)	1

Kombinieren Sie das Skaleneinrasten nicht mit unabhängig gesetzten benutzerdefinierten Zeilenhöhen an anderer Stelle in einem Audit. Zeilenabstand und Zeilenhöhe dürfen nur innerhalb des Werts, den die passende Stufe bereits liefert, angepasst werden, sodass die beiden Regeln niemals gegeneinander wirken.

Schaltflächentyp

Hauptschaltflächen: text-base (16px), semibold.
Kleinere Header-Schaltflächen: text-sm (14px), semibold.

B2. Abstände

Nur diese Werte. Nichts dazwischen, nichts außerhalb.

Token	Wert
Spacing-0	0
Spacing-25	2px
Spacing-50	4px
Spacing-75	8px
Spacing-100	12px
Spacing-200	16px
Spacing-300	24px
Spacing-400	32px
Spacing-500	40px
Spacing-600	48px
Spacing-700	64px
Spacing-800	80px
Spacing-900	96px

Hauptschaltflächen: 8px vertikaler Abstand, 12px horizontaler Abstand.

B3. Eckenradius

Verwenden Sie nur Tailwinds Radius-Werte.

Verschachtelte Radius-Formel. Wenn eine Form innerhalb einer anderen Form sitzt und der Abstand zwischen ihnen weniger als 32px beträgt:

innerer Radius = äußerer Radius − Abstand

Wenden Sie dies nur an, wenn das Ergebnis größer als 2 ist. Darunter lassen Sie die innere Form eckig oder unverändert.

Beispiel: Eine äußere Karte mit rounded-2xl (16px) mit 8px internem Padding ergibt für das innere Element einen Radius von 8px (rounded-lg).

B4. Rahmen und Hintergründe

Wenden Sie niemals einen Rahmen auf nur eine Seite einer Karte an. Rahmen gehen entweder ganz herum oder gar nicht.
Verwenden Sie niemals Verläufe in Hintergründen. Hintergründe sind flach.

Hintergrundfarben im Dunkelmodus

Verwenden Sie nur diese:

#000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

B5. Hero-Abschnitt

Überschriftfarbe

Dunkles Design: Links-nach-Rechts-Verlauf auf dem Überschriftentext, #FFFFFF → #9B9B9B.
Helles Design: Links-nach-Rechts-Verlauf auf dem Überschriftentext, #000000 → #666666.

Dies ist der einzige Ort, an dem Verläufe verwendet werden, und nur auf Text, niemals auf dem Hintergrund.

Layout

Überschrift und Unterüberschrift erhalten beide eine maximale Breite von 680px.
Lesen Sie den Überschriftentext und fügen Sie Zeilenumbrüche an sinntragenden Stellen ein.
Brechen Sie eine Zeile niemals so um, dass eine Phrase ungeschickt getrennt oder der Satz schwerer lesbar wird. Brechen Sie dort um, wo der Gedanke bricht.

B6. Symbole

Verwenden: Phosphor, Solar oder Iconamoon.

Niemals verwenden: Material Icons, Material Symbols.

B7. Bewegungschoreografie (Fluiddynamik)

Verwenden Sie niemals Standard-Übergänge. Jede Bewegung simuliert reale Masse und Federphysik durch benutzerdefinierte Cubic-Bezier-Kurven.

 transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]

Fluid Island Nav

Geschlossener Zustand. Die Navigationsleiste ist eine schwebende Glas-Pille, die vom oberen Rand gelöst ist: mt-6, mx-auto, w-max, rounded-full.

Hamburger-Morph. Bei einem Klick rotieren die Hamburger-Linien fließend und verschieben sich mit rotate-45 und -rotate-45 und absoluter Positionierung in ein perfektes X. Sie dürfen niemals einfach verschwinden.

Modale Erweiterung. Das Menü öffnet sich als bildschirmfüllendes Overlay mit einem starken Glaseffekt: backdrop-blur-3xl bg-black/80 oder bg-white/80.

Gestaffelte Masken-Enthüllung. Nav-Links innerhalb des erweiterten Zustands blenden ein und gleiten von einer unsichtbaren Box nach oben, translate-y-12 opacity-0 übergehend in translate-y-0 opacity-100, gestaffelt pro Element mit delay-100, delay-150, delay-200 und so weiter.

Scroll-Interpolation

Elemente erscheinen niemals statisch beim Laden. Wenn sie in den Viewport eintreten, führen sie ein sanftes, schweres Einblenden von unten aus:

translate-y-16 blur-md opacity-0 → translate-y-0 blur-0 opacity-100

über 800ms oder länger.

Verwenden Sie für JavaScript-gesteuerte Enthüllungen IntersectionObserver oder Framer Motions whileInView. Verwenden Sie niemals window.addEventListener('scroll') — es verursacht kontinuierliche Reflows und tötet die mobile Leistung.

B8. Inhaltsrealismus

Liefern Sie niemals Füllmaterial aus. Dies sind die Anzeichen dafür, dass eine Seite generiert und nicht erstellt wurde.

Kein Lorem Ipsum. Schreiben Sie echte Entwurfskopien.
Kein "Max Mustermann". Verwenden Sie vielfältige, realistische Namen.
Keine Platzhaltermarken wie "Musterfirma GmbH", "Nexus" oder "SmartFlow". Erfinden Sie kontextbezogene, glaubwürdige Namen.
Keine runden falschen Zahlen wie 99,99%, 50%, $100,00. Verwenden Sie organische Daten: 47,2%, $99,00, +1 (312) 847-1928.
Keine KI-Klischees. Niemals "Aufwerten", "Nahtlos", "Entfesseln", "Nächste Generation", "Game Changer", "Eintauchen", "Geflecht" oder "In der Welt von".
Überschriften im Satzfall, nicht in Groß- und Kleinschreibung.
Aktive Stimme. "Wir konnten Ihre Änderungen nicht speichern", nicht "Fehler wurden gemacht".
Keine Ausrufezeichen in Erfolgsmeldungen und kein "Hoppla!" bei Fehlern. Seien Sie direkt: "Verbindung fehlgeschlagen. Bitte versuchen Sie es erneut."
Einzigartige Avatare pro Person und variierte Blog-Beitragsdaten.

B9. Zustände

Jedes interaktive Element wird mit seinem vollständigen Zustandssatz ausgeliefert:

Hover — Hintergrundverschiebung, leichte Skalierung oder Verschiebung
Aktiv — scale(0.98) oder translateY(1px) für physisches Feedback
Fokus — ein sichtbarer Fokusring. Barrierefreiheitsanforderung, nicht optional.
Laden — Skelett-Ladeelemente, die wie das echte Layout geformt sind, keine kreisförmigen Spinner
Leer — eine zusammengestellte "Erste Schritte"-Ansicht, niemals ein leeres Panel
Fehler — inline und spezifisch. Niemals window.alert().

Keine toten Links. Ein Button, der auf # zeigt, ist entweder verlinkt oder visuell deaktiviert. Die aktuelle Seite muss in der Navigation angezeigt werden.

B10. Auslieferungsanforderungen

Dinge, die vergessen werden und eine Seite unfertig wirken lassen:

Datenschutzerklärung und AGB-Links in der Fußzeile
Eine benutzerdefinierte, markengerechte 404-Seite
Clientseitige Formularvalidierung für E-Mail-Format und Pflichtfelder
Ein Link zum Überspringen des Inhalts für Tastaturnutzer
Cookie-Einwilligung, wo die Rechtsordnung dies erfordert
Ein markengerechtes Favicon
<title>, Meta-Beschreibung, og:image und Social-Sharing-Tags
Alternativtext auf jedem sinnvollen Bild
Semantisches HTML: <nav>, <main>, <article>, <aside>, <section>
Ein Weg zurück von jeder Seite

B11. Tagline-Reveal-Abschnitt (obligatorisch)

Jede Landingpage enthält einen großformatigen Textabschnitt, der den Kernnutzen oder die Tagline angibt, getrennt vom Hero. Er sitzt weiter unten auf der Seite als eigener Moment, nicht direkt unter dem Hero gestapelt.

Text

Mindestens zwei Textzeilen.
Eine Nutzenaussage oder Tagline, verfasst im Stil von A5, keine generische Abschnittsüberschrift.

Typografie

Größe text-4xl bis text-6xl, abhängig von der Zeilenanzahl, gemäß der B1-Schriftgrößenskala.
Maximale Breite wie beim Hero begrenzt, sodass Zeilen an sinnvollen Stellen gemäß B5 umbrechen.

Animation

Text beginnt in einem subtilen, gedämpften Ton, etwa 25 bis 35 % Deckkraft der Grundtextfarbe des Designs.
Während der Abschnitt in den Viewport scrollt, wechselt jedes Wort einzeln von diesem gedämpften Ton zur vollständigen Textfarbe, in Lesereihenfolge.
Wörter werden einzeln aktiviert, während sie eine Auslöselinie überqueren, nicht der gesamte Block schaltet auf einmal um. Der Übergang verwendet die benutzerdefinierte Easing-Kurve aus B7, niemals ein lineares Einblenden.
Implementieren Sie es mit IntersectionObserver pro Wort oder einem einzelnen Scroll-Listener, der durch requestAnimationFrame gedrosselt wird. Niemals eine ungedrosselte scroll-Berechnung.

B12. Design-Review-Checkliste

Vor dem Abschluss eine letzte interne Prüfung:

B13. Rahmenbedingungen

In dieser Datei zuerst nachschlagen für jeden Wert und jede Entscheidung.
Diese Datei hat Vorrang, wenn Werte aus anderen Quellen (z. B. Tailwind-Vorgaben, Komponentenbibliothek) mit diesen Regeln kollidieren.
Nichts ad hoc erfinden. Jede visuelle Entscheidung muss auf eine der obigen Regeln zurückgeführt werden können.
Ausnahme: Ausdrückliche Benutzereingaben überschreiben alles.
Wachsen, nicht ersetzen. Wenn Sie eine neue Anforderung sehen, die hier nicht abgedeckt ist, fügen Sie sie hinzu, anstatt eine Ausnahme zu machen.

Diese Fertigkeit lebt unter github.com/elayadesign/landing-page-skill. Vorschläge und PRs sind willkommen.

In Ihrer bevorzugten KI fragen

Dokumentation