Landing-Page-Design (Landingpage-Design)

Landingpage-Design

Eine Landingpage hat eine einzige Aufgabe: Einem bestimmten Fremden zu vermitteln, was dies ist, ihn davon zu überzeugen und den nächsten Schritt zu ermöglichen. Sie verdient sich Aufmerksamkeit mit einer klaren Idee und behält sie durch sachliche Fakten. Modelle scheitern auf zwei gegensätzliche Weisen. Meistens produzieren sie die austauschbare Seite: eine vage Überschrift, drei Symbolkarten, erfundene Testimonials und eine Logo-Wand, in einem Stil, der gerade modern wirken soll. Wenn man ihnen sagt, sie sollen das vermeiden, jagen sie „KI-Tells“ nach und tauschen einen Satz modischer Versatzstücke gegen einen anderen aus. Die Lösung für beide Probleme ist dieselbe: Vom Thema ausgehen, etwas Spezifisches und Wahres sagen und der Seite eine Idee geben, die nur dieses Produkt besitzen kann.

Wende die abgestuften Prinzipien von interface-guidelines an (jeder kann es nutzen > es sagt die Wahrheit > es sagt, was es meint > die Antwort kommt zuerst > Fehler sind überlebbar > es bleibt an Ort und Stelle > das Mögliche ist sichtbar > Konvention > Politur). Wenn dieses Skill installiert ist, lies zuerst dessen SKILL.md.

Briefing

Beantworte diese Fragen in unter 20 Zeilen, bevor du ein Layout erstellst. Wenn der Benutzer nicht antwortet, formuliere Annahmen und fahre fort.

• Wer kommt, von wo und mit welchem Vorwissen? Ein Werbeklick, eine Suche nach dem Problem, ein Link von einem Freund, ein Investor. Ihr Vorwissen bestimmt, wie viel der erste Bildschirm erklären muss.
• Der eine nächste Schritt und was er sie kostet: E-Mail, Karte, ein Anruf, ein Download. Alles andere auf der Seite ist zweitrangig.
• Die Behauptung: Ein Satz, der sagt, was es ist, für wen und was sich für sie ändert. Wenn du sie nicht schreiben kannst, ist die Seite noch nicht bereit für das Design.
• Vorhandene Beweise: Echte Kunden, Zitate mit Erlaubnis, Zahlen mit Quelle und Datum, eine Demo, ein kostenloser Tarif. Liste auf, was existiert. Fehlende Beweise sind eine Lücke, die man markieren, nicht füllen soll.
• Preis: Öffentlich, ab-Preis, repräsentative Fälle oder wirklich unbekannt.
• Markenstatus: Existiert die brand-identity-Ausgabe (Tokens, Logo, Schrift, Stimme)? Wenn nicht, führe sie zuerst aus oder arbeite mit einer vorläufigen Richtung und benenne dies.
• Das eigene Material des Themas: Wie das Produkt, seine Nutzer und seine Welt tatsächlich aussehen (Abschnitt „Kunstrichtung“).
• KI-Leser: Werden Assistenten dieses Produkt vergleichen, seinen Preis nennen oder jemanden anmelden? Nimm an: ja.
• Einschränkungen: Stack, CMS, Performance-Budget, Sprachen, Rechtliches (regulierte Behauptungen, Preisrecht, Einwilligung).

Kunstrichtung

Die Familie schreibt keinen Look vor. Kühn, seltsam, ruhig und maximalistisch sind alle erlaubt. Was erforderlich ist, ist, dass der Look aus einer Entscheidung über dieses Thema resultiert und dass er den Boden intakt lässt (lesbar, schnell, bedienbar). Führe diesen Schritt schriftlich vor dem Code durch; references/art-direction.md enthält die Methode und ausgearbeitete Beispiele.

1. Sammle das Material des Themas [J]. Liste 10 bis 20 konkrete Substantive aus dem Produkt und seiner Welt auf: Objekte, die es handhabt, was Nutzer damit machen, Orte, Artefakte, Geräusche, Texturen, die eigene visuelle Sprache der Domäne (eine Gezeitentabelle, eine Rezeptkarte, eine Leiterbahn, ein Versandetikett). Generische Wörter („Geschwindigkeit“, „Innovation“, „nahtlos“) zählen nicht.
2. Finde das Konzept [J]. Ein Satz, der dieses Material in eine Seitenidee verwandelt: „Die Seite ist die eigene Ausgabe des Produkts“, „ein Feldführer“, „eine Abflugtafel für Ihre Deployments“. Wende den Austauschtest an: Wenn ein Konkurrent das Konzept unverändert übernehmen könnte, schreibe es neu.
3. Wähle eine einprägsame Aktion [J]. Ein Element trägt das Konzept und bekommt das Budget für Kühnheit: ein echter Produktmoment in Großaufnahme, eine funktionierende Demo, eine typografische Geste der Marke, ein Objekt, das man anfassen kann, ein Foto, das nur dieses Unternehmen machen kann. Alles andere dient dem Lesen. Eine Seite mit fünf Markenzeichen hat keins.
4. Komponiere [J]. Entscheide über den Lesepfad jedes Bildschirms: wo das Auge zuerst, zweitens, drittens landet und welche Größe und Kontrast dies bewirken. Setze das Raster und brich es dann einmal, absichtlich, auf. Gestalte die Telefonkomposition als eigenes Layout, nicht als eingestürzten Desktop.
5. Präsentiere zwei oder drei Richtungen in jeweils wenigen Zeilen (Konzept, Markenzeichen, wie Marken-Tokens verwendet werden, das Risiko), wähle eine aus und begründe warum. Die Richtungen sollten sich in der Idee unterscheiden, nicht nur in der Palette.

Markengrenze. Farben, Schrift, Logo, Stimme und Tokens stammen aus brand-identity (seiner tokens.css oder tokens.json). Die Kunstrichtung entscheidet, wie diese Seite sie verwendet: Maßstab, Zuschnitt, Dichte, Rhythmus, Bilder, Bewegung. Füge keine neuen Markenfarben hinzu, zeichne das Logo nicht neu und tausche nicht für eine Seite die Schriftarten aus. Wenn die Seite etwas benötigt, das die Marke nicht hat (einen Illustrationsstil, eine fotografische Richtung), vermerke dies als eine Markenlücke und schlage es dem Markeninhaber vor.

Geschmack ist kein Beweis. Das Entfernen von Verläufen, Augenbrauen oder einer bestimmten Schriftart macht eine Seite nicht besser: Bei den eigenen Blindtests von taste-skill gewann es 4 von 16 Brief-Runden gegen kein Skill, obwohl es keinen Detektorfehler gab, und seine Modell-Juroren bevorzugten weiterhin reichhaltigere Seiten voller Vorlagen-Versatzstücke [E, Modell-Juroren nur]. Beurteile Richtungen daher nach dem Austauschtest und der Aufgabe des Lesers, nicht nach einer Liste verbotener Stilmittel.

Regeln

Nachricht

• Der erste Bildschirm sagt in Worten, die ein Fremder versteht, was es ist, für wen und was der nächste Schritt ist [E]. Besucher entscheiden innerhalb der ersten 10 bis 20 Sekunden, ob sie gehen (Liu, White, Dumais 2010, via NN/g), und der erste Bildschirm erhält etwa 57 % der Betrachtungszeit (NN/g 2018, n=120). Ein kluger Satz kann führen, aber ein einfacher beschreibender Satz muss direkt daneben stehen.
• Die h1 ist die Behauptung, nicht der Markenname oder eine Begrüßung [S]. Sie ist die Gliederungswurzel der Seite für Screenreader und Agenten (WCAG 2.4.6).
• Konkret schlägt werblich [E]. Prägnanter, überfliegbarer, sachlicher Text schnitt in der Benutzerfreundlichkeit 124 % besser ab als werblicher Text (Nielsen 1997, n=51; alt, aber die Richtung hat sich gehalten). Sage „Sendet Rechnungen aus Ihren Zeiterfassungsdaten“, nicht „Optimieren Sie Ihren Workflow“.
• Jeder Abschnitt macht eine Behauptung und zeigt ihren Beweis; lösche Abschnitte ohne einen [J]. Schreibe die Seite als Liste von Behauptungen, bevor du sie gestaltest (eine Idee, die von taste-skill übernommen wurde).
• Zeige das Produkt selbst [J]: echte Screenshots, echte Ausgabe, echte Fotos. Eine gezeichnete Abstraktion von „Produktivität“ sagt nichts, und eine erfundene Benutzeroberfläche stellt das Produkt falsch dar.
• Leute scrollen, vermeide daher falsche Böden [P]. Unterhalb des ersten Bildschirms fällt die Aufmerksamkeit ab, verschwindet aber nicht (NN/g 2018). Ein randloser Hero, der vollständig aussieht, verbirgt alles, was danach kommt.

Beweis und Ehrlichkeit

• Nur echte Beweise [S]. Gefälschte oder KI-generierte Bewertungen und Testimonials sind in den USA illegal (FTC 16 CFR Part 465, 2024), und Empfehlungen müssen echte Erfahrungen widerspiegeln (FTC Endorsement Guides, 16 CFR Part 255). Logos nur mit Erlaubnis und nur von tatsächlichen Kunden.
• Wenn Beweise fehlen, markiere sie [J]. Verwende sichtbare Platzhalter wie {{zitat: kunde, name, rolle}} und liste sie in der Übergabe auf. Schreibe niemals eine überzeugende Fälschung, um die Lücke zu füllen.
• Zahlen haben eine Quelle und ein Datum [J]. „12.000 Teams“ benötigt „Stand März 2026“. Eine Zahl, die niemand überprüfen kann, ist bestenfalls Dekoration.
• Keine künstliche Dringlichkeit [E]. Gefälschte Countdowns und falsche Knappheit gehörten zu den Täuschungsmustern, die in großem Umfang gefunden wurden (Mathur et al. 2019), und sie führen auch Agenten in die Irre: Sechs Web-Agenten fielen im Durchschnitt zu 41 % auf Dark Patterns herein (Ersoy et al. 2025, Preprint).

Preisgestaltung

• Zeige Preise [P]. Fehlende Preise treiben Käufer zu Wettbewerbern (Nielsen 2002). Wenn der Preis wirklich variiert, zeige repräsentative Fälle mit ihren Preisen (Nielsen 2006).
• Preise sind Text: Betrag, Währung, Zeitraum und was enthalten ist, niemals nur innerhalb eines Bildes [J]. Der Tarifvergleich ist eine echte <table> mit Funktionen in Worten.
• Gib den Gesamtbetrag an, den ein Käufer zahlen wird, einschließlich obligatorischer Gebühren [S]. US-Recht verlangt dies für Live-Event-Tickets und kurzfristige Unterkünfte (FTC Rule on Unfair or Deceptive Fees, 2025); anderswo ist es ehrliche Praxis. Rabattansprüche in der EU müssen den niedrigsten Preis der letzten 30 Tage anzeigen (Richtlinie 98/6/EG, Art. 6a).
• Abrechnungsumschaltungen zeigen Zustand und Standard [J]. Wenn die Jahresabrechnung standardmäßig angezeigt wird, schreibe neben den Betrag „jährlich abgerechnet“.

Nächster Schritt

• Eine primäre Aktion, wiederholt an Entscheidungspunkten, beschriftet mit dem, was passiert [J]: „14-tägige Testversion starten, keine Karte“, „Auf die Warteliste setzen“. Sekundäre Aktionen sehen sekundär aus.
• Wartelisten- und Anmeldeformulare fragen nach dem Minimum und sagen, was folgt [J]: was sie bekommen, wann und wie oft du eine E-Mail schicken wirst. Zustimmungsfelder beginnen unmarkiert. Gib längere Abläufe an form-design weiter.
• Erfolg ist ein Zustand, kein Toast [J]. Ersetze nach dem Absenden das Formular durch das, was passiert ist und was zu erwarten ist.

Geschwindigkeit und Robustheit

• Erfülle Googles Core Web Vitals im 75. Perzentil: LCP 2,5 s, INP 200 ms, CLS 0,1 [S]. Dies sind Ziele, die teilweise durch die Erreichbarkeit gesetzt werden, nicht durch Schwellenwerte der menschlichen Wahrnehmung. Schnellere mobile Seiten korrelierten in einer von Google in Auftrag gegebenen Studie mit einer höheren Einzelhandelskonversion (Deloitte 2020) [E, korrelational].
• Der Hero ist normalerweise das LCP-Element [S]: ein echtes <img> mit width, height und fetchpriority="high", niemals lazy-geladen, niemals ein CSS-Hintergrund hinter Text, der auf Skripte wartet (web.dev).
• Inhalt ist ohne JavaScript und ohne Bewegung sichtbar [J]. Bildlauf-Enthüllungen beginnen im sichtbaren Zustand und animieren nur, wenn unterstützt; bei reduzierter Bewegung verbirgt sich nichts. Agenten und Screenshots erhalten sonst Leerstellen.
• Keine automatisch weiterschaltenden Karussells [P]. Sich drehende Heroes versteckten das Angebot in Tests vor den Nutzern (Nielsen 2013), und Bewegung über 5 Sekunden benötigt eine Pausensteuerung (WCAG 2.2.2).

Der KI-Leser

• Fakten, die ein Assistent zitieren wird, sind Text auf der Seite: Was es ist, Preis, Tarifgrenzen, Plattformen, Testbedingungen, Kontakt [J]. Agenten vergleichen Produkte genau anhand dieser.
• Strukturierte Daten und Meta-Tags spiegeln die sichtbare Seite wider und fügen nichts hinzu [S]: title, Meta-Beschreibung, Open Graph und JSON-LD (Organization, SoftwareApplication oder Product) mit dem gleichen Preis und Namen, den die Seite zeigt. Angehängtes Markup half Agenten in Tests nicht (Affora, in interface-guidelines).
• Kein Text, der an KI-Agenten gerichtet ist, versteckt oder sichtbar [J]. Es liest sich wie Prompt-Injection, und verborgener Text ist ein Spam-Signal.

Bauabfolge

1. Briefing, dann die Liste der Behauptungen und Beweise mit Platzhaltern für Lücken.
2. Kunstrichtung: Themenmaterial, Konzept, eine Aktion, zwei oder drei Pitchvarianten, Auswahl.
3. Text-Wireframe: Abschnitte in Reihenfolge, jeder mit seiner Behauptung, seinem Beweis und seiner Aktion.
4. Semantisches HTML mit echtem Copy: eine h1, Landmarks, Überschriften, die das Argument gliedern, Preistabelle, Formulare mit Labels.
5. Marken-Tokens von brand-identity, dann Layout und die markante Aktion.
6. Zustände: Formularvalidierung, Erfolg, Fehler, ausverkauft oder geschlossene Warteliste, kein JS, reduzierte Bewegung.
7. Bilder, Schriftarten und Skripte innerhalb des Performance-Budgets.
8. Überprüfen, höchstens zweimal korrigieren, übergeben.

Überprüfen

• node <interface-guidelines>/scripts/audit.mjs <dist|url> --out audit-output, dann betrachte jeden Screenshot bei allen drei Breiten, hell und dunkel, wenn beides existiert.
• Erster-Bildschirm-Test: Zeige nur den Screenshot des ersten Bildschirms einer Person (oder einem frischen Agenten ohne Kontext) und frage, was es ist, für wen es ist und was als nächstes zu tun ist. Falsche Antworten bedeuten, dass die Botschaft fehlgeschlagen ist, egal wie gut es aussieht.
• Austauschtest: Ersetze den Produktnamen durch einen eines Konkurrenten. Wenn die Seite immer noch funktioniert, sind Konzept und Text generisch.
• Agententest: Lies allein aus dem Barrierefreiheits-Snapshot die Preise und Grenzen jedes Tarifs und schließe die Anmeldung ab. Vergleiche mit dem JSON-LD.
• Geschwindigkeit: Lighthouse oder PageSpeed Insights mit einem gedrosselten mobilen Profil; Felddaten (CrUX), wenn die Seite live ist.
• Robustheit: Lade mit deaktiviertem JavaScript und mit prefers-reduced-motion: reduce. Nichts Wichtiges darf fehlen.
• Beweisprüfung: Jedes Zitat, Logo, jede Zahl und Bewertung auf eine Quelle zurückgeführt oder als markierter Platzhalter dargestellt.

Fallstricke

• Erfundene Testimonials, Logo-Wände von Unternehmen, die keine Kunden sind, erfundene Benutzerzahlen oder Bewertungen.
• Eine Überschrift, die auf jedes Produkt passen würde („Gestalte die Zukunft der Arbeit“), mit der eigentlichen Erklärung drei Bildschirme tiefer.
• Jagen oder Verbannen von „KI-Tells“, anstatt vom Thema zu entscheiden. Eine neue Liste modischer Ersatzstücke ist der nächste Tell.
• Dekorationsquoten: Bewegung überall, ein Bild in jedem Abschnitt, ein anderes Layout pro Abschnitt um seiner selbst willen.
• Hero-Text oder CTA, der/die versteckt ist, bis eine Scroll-Animation ausgelöst wird; „Enthüllungs“-Text mit geringer Deckkraft, der bis dahin den Kontrast verfehlt.
• Preis nur in einem Bild oder „Kontaktieren Sie uns“ ohne Angabe der Größenordnung.
• Neudefinition von Markenfarben oder Neuzeichnen des Logos für eine Seite anstatt Verwendung von brand-identity-Tokens.
• Eine Preisschaltfläche, die stillschweigend jährliche/Monats-Beträge anzeigt.
• Eine Anweisung an KI-Assistenten, die auf der Seite versteckt ist.

Referenzen

Datei	Lesen, wenn
references/art-direction.md	Immer, vor der Wahl eines Looks: Methode, ausgearbeitete Beispiele, Komposition, Verwendung von Marken-Tokens, Beurteilung von Richtungen
references/structure-and-copy.md	Beim Schreiben der Seite: Abschnittsmuster nach Seitentyp, Überschriften, Beweise, Preisseiten, Wartelisten, Formulare
references/performance-and-agents.md	Beim Bauen und Ausliefern: Core Web Vitals, Bilder, Schriftarten, Bewegung, Metadaten, strukturierte Daten, kein JS
references/sources.md	Vor dem Zitieren einer Zahl oder wenn jemand fragt, warum eine Regel existiert