Über diese Vorlage
Cordex liefert für ein Industrieunternehmen einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Die Zeile lautet „We protect transport safer across all industries“, und der Rest des Eintrags Landingpage ordnet sich darum. Die Palette umfasst schwarz #0A0A0B darunter, #F7F7F8 für die Schrift und rot #E23B32 für die Akzente, die Schrift ist Inter. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1920x1416, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung beschränkt sich auf Übergänge von 0.7s und eine Videospur in Schleife. Wenn du ein Briefing zum Thema Landingpage im Bereich Industrie schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Gemacht für Agenturen, die nach Runden abrechnen und Schrift von 12px bis 21px und 100vh hohe Sektionen vor der ersten Runde verbindlich haben wollen.
- Teams, die den Auftritt eines Wettbewerbers als Landingpage im Bereich Industrie nachbauen und eine eigenständige HTML-Datei festlegen wollen, bevor sich jemand auf ein Framework festlegt.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für Industrie 6,8s Video in Schleife tragen kann.
Was enthalten ist
- Navigation in einer Zeile. Die Leiste trägt die Wortmarke, die Links der Sektion und einen Button in #E23B32 und kommt über Schrift von 12px bis 21px und 100vh hohe Sektionen nicht hinaus, damit aus ihr kein zweiter Header wird. Die Labels passen bei 480px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht.
- Ein Medien-Element trägt die Stimmung. Die Medien leisten Atmosphäre statt Erzählung: eine Schleife von 6,8s in 1920x1416 hinter allem anderen. Exportiere in 1920x1416 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Ein Breakpoint für die Links. Unter 480px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Werte bis in den Build. Hier ist nichts geschätzt. Die Spezifikation legt Schrift von 12px bis 21px, 100vh hohe Sektionen, Abstände in 14px-Schritten und 0.7s Übergänge fest, und der Rest des Layouts leitet sich aus diesen Werten ab. Das Briefing nennt Werte und keine Proportionen, damit die Komposition ihre Verhältnisse behält, wenn der Text länger oder kürzer wird.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung ist ein Clip von 6,8s in 1920x1416, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt.
Kurze, benannte Zeiten
Die Bewegung ist hier in Millisekunden angegeben: 0.7s. Das ist das gesamte Animationsbudget, und es fließt in Zustandswechsel statt in eine Scroll-Timeline. Das Easing steht zusammen mit der Dauer im Briefing (0.7s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Wie Cordex den ersten Blick ordnet
Ein feature-getriebenes Layout listet, was das Produkt tut; dieses führt den Leser zu einer einzigen Entscheidung. Die Route zeigen die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster, und Schrift von 12px bis 21px und 100vh hohe Sektionen staffeln sie. Ein Leser im Bereich Industrie bekommt das Angebot vor den Optionen.
Die Zahlen hinter dem Eintrag Landingpage
Der Preis für Wiederholbarkeit sind feste Zahlen: Schrift von 12px bis 21px, 100vh hohe Sektionen, Abstände in 14px-Schritten und 0.7s Übergänge. Genau darum geht es bei dieser Referenz: dieselbe Seite in einer anderen Marke, ohne einen neuen Satz Vermutungen. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Wie der Eintrag Landingpage umbricht
Wo ein Template auf eine Spalte zusammenklappt und hofft, sagt dieses Briefing, was passiert (die Schrift ist zwischen 12px und 21px begrenzt, das Layout wechselt bei 480px und der Bereich wird auf 100vh gehalten), und lässt die Reihenfolge intakt. Beide Zustände sind im selben Briefing beschrieben.
Häufige Fragen
Kann ich Landingpage von Cordex in einem anderen Stack nachbauen?
Cordex wurde in eine eigenständige HTML-Datei 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.
Warum steht der Prompt von Cordex hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 29.696 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie lang ist der Prompt hinter Cordex?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1416, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
