Über diese Vorlage
Das hier ist der Eintrag Hero-Bereich von Email Marketing, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Die Zeile lautet „Design Rocket Certificates“, und der Rest des Eintrags Hero-Bereich ordnet sich darum. Farbe bleibt auf schwarz #0A0A0A darunter, helles gelb #DCFF00 für die Schrift und helles gelb #D8F90A für die Akzente begrenzt, gesetzt in Instrument Serif. Geliefert wird React und Tailwind CSS, erfasst bei 800x702, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Lass es beim Schreiben offen: Die 7.972 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Wenn die Bewegung wegfallen muss, funktioniert das Hero-Bereich-Design trotzdem, weil dann Schrift von 12px bis 58px und Abstände in 18px-Schritten die Hierarchie übernehmen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Email Marketing.
- Wenn du nur einen Nachmittag hast, färbe das Hero-Bereich-Design auf #D8F90A um und lass 800x702 und das Raster unangetastet.
Was enthalten ist
- Größen im Briefing fixiert. Jedes Maß im Briefing ist eine Zahl, die du nachmessen kannst: Schrift von 12px bis 58px und Abstände in 18px-Schritten. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz. Übernimm die Werte zusammen mit dem Layout.
- Eine Zahlenreihe, keine Tabelle. Eine Zeile mit Zahlen sitzt über dem Falz, in Instrument Serif am oberen Ende der Skala, mit #D8F90A nur für die Ziffern, die eine Aussage tragen. Die Ziffern tragen den Akzent in #D8F90A, während alles um sie herum auf der Textfarbe bleibt. Rahme die Zahlen nicht ein.
- Der Aufbau passt in einen Screen. Die Komposition ist bei 800x702 vollständig: Text, Medien und Bedienelemente sind im Briefing benannt. Die Seite ist eine Komposition bei 800x702, und deshalb hält sie zusammen, wenn sich der Text ändert.
- Das Briefing nennt die Stufen. Die Abstände sind genauso zitiert (Schrift von 12px bis 58px und Abstände in 18px-Schritten) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Zeiger-Zustände, mehr nicht
Zustände werden pro Komponente behandelt (Hover-Zustände auf Buttons und Links statt auf jeder Karte) und nicht von einer globalen Animationsschicht. Ein Bedienelement, das interaktiv aussieht, verhält sich auch so; es gibt keine falschen Affordanzen. Animiere im Hover kein Layout.
Bewegung, die nicht stört
Diese Seite kommt als stehende Komposition in 800x702, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es. Im Briefing steht keine Animationsbibliothek, der Nachbau bleibt also klein. Keine Scroll-Timelines nötig.
Das Argument des Eintrags Hero-Bereich
Dass das für ein KI- oder SaaS-Produkt funktioniert, liegt daran, dass die Referenz dem Leser nie zumutet, die Botschaft selbst zusammenzusetzen. „Design Rocket Certificates“ leistet diese Arbeit ab dem ersten Frame. Layout, Schrift und Farbe sind entschieden (schwarz #0A0A0A und helles gelb #D8F90A, gesetzt in Instrument Serif), die erste Bildschirmfläche liest sich also als fertiges Argument und nicht als Haufen von Teilen. Email Marketing nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie der Eintrag Hero-Bereich umbricht
Eine feste Desktop-Skala wäre einfacher gewesen. Das Briefing nimmt dafür eine andere Entscheidung auf: eine Größe zwischen 12px und 58px, und genau das hält die Display-Zeile zwischen den Breiten proportional. Bedienelemente bleiben groß genug zum Tippen, und der Text behält bei jeder Breite seine Lesereihenfolge.
Die Reihenfolge im Eintrag Hero-Bereich
Wenn ein Leser im Bereich SaaS auf einem einzelnen Screen landet, scannt er, bevor er liest. Das Layout antwortet darauf: die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile, das Kartenraster und der Hintergrund-Clip sind auf das Scannen hin dimensioniert, und Schrift von 12px bis 58px und Abstände in 18px-Schritten halten jede Station unterscheidbar. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Häufige Fragen
Ist der Prompt zu Email Marketing eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x702, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Email Marketing wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
Wie gehe ich mit den Medien von Email Marketing in einem Kundenprojekt um?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 800x702 erfasst.
