Landing Page Launch

Landing Page Start

Denken Sie wie ein auf Conversion ausgerichteter Produktdesigner und Texter: Machen Sie das Angebot klar und führen Sie den Besucher zur Hauptaktion, während Sie die Identität des Projekts wahren. Bringen Sie die Ausführung zum gewünschten Ergebnis: Angebot, lokaler Code oder veröffentlichte Seite. Ein Angebot, eine vorrangige Zielgruppe und eine Hauptconversion leiten die Komposition.

Einrahmen ohne zu blockieren

• Entnehmen Sie der Anfrage, dem Repository und vorhandenen Materialien: Produkt oder Dienstleistung, Zielgruppe, Nutzen, Angebot, Hauptaktion, Sprache, Identität und Zielseite. Lesen Sie die anwendbaren AGENTS.md und PRODUCT.md/DESIGN.md, falls vorhanden.
• Fragen Sie in einer einzigen Runde nur nach Lücken, die die Lösung materiell ändern. Setzen Sie die unabhängige Arbeit fort, während die Antwort aussteht. Treffen Sie bei umkehrbaren Entscheidungen eine kurze Annahme und fahren Sie fort; erfinden Sie keine Geschäftstatsachen.
• Unterscheiden Sie das Ziel des CTA von seinem tatsächlichen Ziel: Buchung, Kauf, Formular, Bewerbung, Download oder Kontakt. Bestätigen Sie die Existenz einer Integration, bevor Sie Lead-Erfassung oder einen abgeschlossenen Vorgang versprechen.
• Verwenden Sie die angeforderte Sprache; fehlt eine Angabe, folgen Sie dem Benutzer. In den Beispielen dieser Ausgabe verwenden Sie Portugiesisch aus Portugal; passen Sie es an die Anfrage an.
• Respektieren Sie den angegebenen Stack und das Hosting. Integrieren Sie in ein vorhandenes Projekt in die lokale Architektur. Bevorzugen Sie für eine einfache, eigenständige Seite HTML/CSS/JS ohne Build, wenn ausreichend; wählen Sie ein Framework, wenn das Verhalten oder das Projekt dies rechtfertigt.
• Wenn Sites das gewählte Ziel ist oder der verfügbare Workflow für eine neue Site ohne definiertes Ziel geeignet ist, verwenden Sie das Skill sites:sites für Implementierung und Veröffentlichung. Ein vom Benutzer gewähltes Repository oder Hosting hat Vorrang. Konsultieren Sie den aktuellen Workflow des Anbieters, bevor Sie die Veröffentlichung durchführen.

Das Argument der Seite definieren

Kommunizieren Sie vor der Implementierung kurz das Angebot, die Hauptaktion und die gewählte Richtung. Liefern Sie nur dann ein umfangreiches Strategie- oder Copy-Dokument aus, wenn dies Teil der Anfrage ist. Eine Bauanfrage sollte zu einer Implementierung führen.

Wählen Sie die Struktur entsprechend der Absicht des Besuchers:

Situation	Empfohlene Komposition
Warteliste, Download oder bereits informiertes Publikum	Kurze Seite: Angebot, wesentliche Details, Aktion und relevante Bedingungen
Produkt oder Dienstleistung, die eine Demonstration erfordert	Hero, Demonstration, Vorteile, Funktionsweise, verfügbare Nachweise, Einwände und abschließender CTA
Komplexes Angebot oder Entscheidung mit mehr Reibung	Längere Geschichte, Erklärung und Nachweise bei den Behauptungen, Bedingungen und antizipierte Einwände
Angeforderter Vergleich oder Suche nach Alternativen	Überprüfbarer Vergleich, explizite Kriterien und eine mit dieser Absicht kohärente Aktion

• Schreiben Sie eine Überschrift, die den Nutzen und für wen er bestimmt ist, wahrnehmbar macht. Der Untertitel erklärt das Angebot und wie es funktioniert. Der CTA beschreibt den nächsten Schritt, wie „Demo buchen“ oder „Auf die Liste setzen“.
• Passen Sie das Versprechen an die Anzeige, E-Mail oder ursprüngliche Veröffentlichung an, wenn dieses Material existiert.
• Priorisieren Sie eine kommerzielle Aktion. Navigation und Hilfsaktionen können existieren, ohne diese Hierarchie zu beeinträchtigen. Die Wiederholungen des CTA führen zum gleichen Ziel.
• Wählen Sie nur Abschnitte aus, die Informationen hinzufügen. Legen Sie keine feste Anzahl von Vorteilen, Schritten, Fragen oder einen animierten Abschnitt auf jeder Seite fest.
• Verknüpfen Sie Funktionen mit konkreten Ergebnissen. Verwenden Sie Zahlen, Testimonials, Logos, Preise, Garantien und Bedingungen nur, wenn sie durch die Materialien des Benutzers oder verifizierte Quellen gestützt werden.
• Fehlt soziale Beweise, demonstrieren Sie das Produkt, zeigen Sie ein als Beispiel gekennzeichnetes Beispiel oder erklären Sie den Prozess. Füllen Sie die Lücke nicht mit erfundenen Kunden, Metriken, Avataren, Knappheit oder Rabatten.
• Fehlt eine wesentliche Geschäftsbedingung, markieren Sie sie zur Entscheidung außerhalb des öffentlichen Textes und vermeiden Sie ein Versprechen, das davon abhängt. Veröffentlichen Sie keine Platzhalter als endgültigen Inhalt.

Eine eigene visuelle Richtung erstellen

Die Identität und die genehmigten Materialien des Projekts leiten die Entscheidungen. Die Referenz des Autors inspiriert die visuelle Sorgfalt; sie verpflichtet nicht alle Seiten dazu, Schriftarten, Farben oder Effekte zu teilen.

• Wählen Sie eine visuelle Idee, die mit dem Produkt verbunden ist: Demonstration der Oberfläche, Fotografie, Objekt, Illustration oder typografische Komposition. Lassen Sie den Hero mit dieser Idee und dem CTA funktionieren.
• Wenn die Anfrage auf einem Video mit Effekten oder Tiefe basiert, lesen Sie die Sequenz und identifizieren Sie die Verhaltensweisen, die die Referenz motivieren. Implementieren Sie diese Aspekte im geeigneten Medium und überprüfen Sie sie mit aktiver Bewegung; ein Austausch von Farben und Abständen erfüllt diese Anfrage nicht.
• Definieren Sie eine kleine Familie von Tokens für Typografie, Farben, Abstände, Radien und Bewegung. Verwenden Sie vorhandene Tokens und Komponenten, wenn verfügbar.
• Vermeiden Sie es, die Seite automatisch mit wiederholten Karten, funktionslosen Symbolen, dekorativen Verläufen oder Statistiken zu füllen. Verwenden Sie Komposition, Kontrast, Rhythmus und Inhalt, um Hierarchie zu etablieren.
• Verwenden Sie einen echten Screenshot, um ein vorhandenes Produkt zu demonstrieren. Verwenden Sie für neue Bilder das Skill imagegen, wenn verfügbar und angezeigt; für SVG, CSS oder andere native Elemente verwenden Sie das geeignete Medium. Präsentieren Sie kein generiertes Bild als Beweis für eine echte Funktion.
• Bereiten Sie Rahmung und Kontrast der Bilder für Mobilgeräte vor. Bewegung muss einen Zweck haben, prefers-reduced-motion respektieren und lesbaren Inhalt ohne Animation bewahren. Video benötigt ein Poster oder eine statische Alternative und angemessenes Laden.
• Lesen Sie references/art-direction.md, wenn die visuelle Identität fehlt oder der Benutzer eine Richtung nahe der Elaya-Referenz wünscht. Laden Sie dieses Rezept nicht, um ein bereits definiertes System zu ersetzen.
• Lesen Sie für professionelle Erfahrungen mit Scroll-Übergängen references/scroll-storytelling.md. Planen Sie den Weg zwischen den Abschnitten und validieren Sie die Bewegung entlang der Seite, anstatt die Behandlung auf den Hero zu beschränken.
• Lesen Sie für einen Protagonisten mit 3D-Erscheinung, der den Cursor durch Video oder Einzelbilder begleitet, references/interactive-video-hero.md. Bereiten Sie die Bewegung des Assets vor, bevor Sie es mit der Interaktion verbinden; wählen Sie eine Echtzeit-3D-Szene, wenn Ansichten oder Antworten erforderlich sind, die das Video nicht enthält.

Die echte Conversion implementieren

Erstellen Sie die Seite und passen Sie Abschnitte während der Überprüfung lokalisiert an. Bewahren Sie den angeforderten Umfang sowie die Implementierungs- und Abdeckungsanweisungen des Projekts.

• Verwenden Sie semantisches HTML, eine Hierarchie von Überschriften, native Steuerelemente, Labels, sichtbaren Fokus und Tastaturnavigation. Stellen Sie Lesbarkeit, Kontrast, hilfreichen Alternativtext und komfortable Touch-Ziele sicher.
• Verknüpfen Sie CTAs und Navigation mit echten Zielen. Verwenden Sie kein href="#" als kommerzielle Aktion und zeigen Sie keinen simulierten Erfolg an.
• Implementieren Sie für Formulare die erforderlichen Felder, Validierung sowie relevante Sende-, Erfolgs- und Fehlerzustände. Bestätigen Sie den Erfolg nach der Annahme durch den tatsächlichen Dienst. Setzen Sie keine Anmeldeinformationen auf dem Client frei.
• Ohne definierten Erfassungsdienst schließen Sie das lokale Layout ab und weisen auf die ausstehende Integration hin. Verwenden Sie eine echte Kontaktalternative, wenn diese bereitgestellt wurde und dem Zweck dient. Erklären Sie die Erfassung nicht als bereit, solange die Daten nicht an das Ziel übermittelt wurden.
• Fügen Sie Titel, Beschreibung, Favicon und relevante soziale Metadaten bei. Canonical, Domain und soziales Bild sollten auf bekannte, echte Ressourcen verweisen.
• Entscheiden Sie über die Indexierung basierend auf dem Seitenziel und den Projektanweisungen. Eine Kampagne impliziert nicht automatisch noindex; ein wenig bekannter Pfad verhindert ebenfalls nicht die Indexierung. Private Vorschauen und Seiten, die nicht in der Suche erscheinen sollen, müssen die entsprechenden Mechanismen verwenden.
• Erfinden Sie keine rechtlichen Richtlinien oder Fußzeilenlinks. Verwenden Sie echte Dokumente, wenn anwendbar, und identifizieren Sie diejenigen, die für den Start fehlen. Analytics und Tracker hängen vom angeforderten Umfang und Konfiguration ab.

Überprüfen und starten

• Führen Sie die vom Projekt geforderten Überprüfungen und die kleinste zusätzliche Menge durch, die die Änderung bestätigt: Build, falls zutreffend, und Tests des geänderten Verhaltens, falls erforderlich. Die obligatorische externe Abdeckung gilt weiterhin.
• Wenn der Browser verfügbar ist, überprüfen Sie die gerenderte Seite auf Desktop und Mobilgeräten: Hierarchie des Hero, Bildausschnitte, Textumbrüche, Überlauf, Menü, Tastatur, CTAs und Conversion-Pfad. Testen Sie Formulare mit Testdaten in der entsprechenden Umgebung, ohne versehentlich echte Kontakte oder Käufe zu erstellen.
• Bestätigen Sie, dass Schriftarten, Bilder und Videos geladen werden; dass der Inhalt ohne Effekte weiterhin zugänglich ist; und dass keine toten Links oder relevanten Konsolenfehler vorhanden sind.
• Wenn die visuelle Überprüfung nicht verfügbar ist, führen Sie die möglichen Checks durch und erklären Sie diese Einschränkung. Behaupten Sie nicht, eine Seite gesehen oder getestet zu haben, ohne dies getan zu haben.
• Schließen Sie für eine Startanfrage die Veröffentlichung am autorisierten Ziel ab, indem Sie dem aktuellen Workflow des Projekts oder Anbieters folgen. Wiederholen Sie keine bereits erteilten Autorisierungsanfragen. Eine Anfrage für ein Angebot, einen Mockup oder lokale Arbeit endet in diesem Umfang.
• Überprüfen Sie nach der Veröffentlichung den vom Anbieter zurückgegebenen Status und, wenn zugänglich, öffnen Sie die endgültige URL und bestätigen Sie die Seite und die Ziele der CTAs. Bewahren Sie das vorhandene Publikum; machen Sie eine Seite nicht ohne Autorisierung für diese Änderung öffentlich.
• Geben Sie bei der Übergabe an, wo das Ergebnis zu sehen ist, was überprüft wurde und etwaige konkrete ausstehende Punkte bezüglich Integration, Inhalt oder Zugriff. Unterscheiden Sie zwischen lokaler Version, privater Vorschau und öffentlicher Veröffentlichung.

Ursprung

Eigene Anpassung der Idee und des Workflows von landing-page-design, von Elaya, geteilt in diesem Beitrag. Die MIT-Lizenz des Originals ist in LICENSE erhalten.

Die Anpassung beschränkt den Umfang auf Landing Pages, bewahrt die Identität jedes Projekts, ersetzt universelle ästhetische Regeln durch kontextualisierte Entscheidungen und fügt echte Integration, Barrierefreiheit, Überprüfung und Start hinzu. Das Material des Autors ersetzt nicht die Anweisungen dieser Version.