Über diese Vorlage
Cross-Border hält den Entscheidungsweg fest: Hinter dem Eintrag Landingpage stehen 6.698 Zeichen Briefing. Die Überschrift der Seite lautet „Complete the form and our team will contact you soon“, und die Komposition ist um genau diese Worte gebaut. Die Palette ist helles gelb #FFDA00 darunter, schwarz #1A1A1A für die Schrift und tiefes petrol #002A35 für die Akzente, gesetzt in Helvetica, Arial. Geliefert wird React und Tailwind CSS: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Das Briefing gibt sein Bewegungsbudget für Übergänge von 0.6s und eine Videospur in Schleife aus. Am nützlichsten ist es, wenn beim Eintrag Landingpage für Industrie ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Growth-Teams, die ein Landingpage-Design für ein Industrieunternehmen neu einfärben und den 1440x1080-Rahmen behalten wollen, während sich die Angebotstexte ändern.
- Agenturen, die Landingpage-Designs für ein Industrieunternehmen anbieten und 12vh hohe Sektionen und Abstände in 20px-Schritten schon im Angebot nennen wollen, damit die Kalkulation nach dem Kickoff noch trägt.
- Produktmarketer, die brauchen, dass die Komposition (Landingpage) auch mit 5,8s Video in Schleife hinter dem Text lesbar bleibt.
Was enthalten ist
- Eine Zeile, keine Schubladen. Die Links stehen in einer Zeile bei einer einzigen Größe, und die Aktion in #002A35 schließt die Zeile rechts ab, damit das Auge dort zur Ruhe kommt, wo die Navigation endet. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #002A35 ist das einzige Element in der Leiste mit Gewicht.
- Gemessen statt geschätzt. Die Liste bleibt kurz (12vh hohe Sektionen, Abstände in 20px-Schritten und 0.6s Übergänge), deshalb lässt sich das ganze System von Hand prüfen. Jeder Wert hat genau eine Aufgabe: eine Schriftstufe, ein Abstand, ein Eckenradius oder ein Übergang.
- Medien ohne Overlay. Der Hintergrund ist eine einzelne Schleife von 5,8s bei 1440x1080, auf Cover zugeschnitten und ohne Tönung. Alles andere schwebt darüber auf einer höheren Ebene. Die Schleife ist kurz genug (5,8s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Die Display-Größe trägt die Aussage. Die Größenstufen und Laufweiten im Briefing geben den Ton vor: Helvetica, Arial in enger Display-Größe, danach ein klarer Absturz zum Begleittext. Der Interface-Text bleibt auf einer Schrift, deshalb mischt die Seite nie zwei Stimmen in derselben Größe.
Bewegung & Interaktion
Eine Schleife, keine Timeline
Die Hintergrundbewegung ist ein Clip von 5,8s in 1440x1080, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Der Clip ist kurz genug, um ohne sichtbare Naht zu schleifen, und das zählt mehr als seine Auflösung.
Kurze, benannte Zeiten
Übergänge sind auf 0.6s festgelegt; dieser Wert gilt auch für die Bedienelemente. Das Easing steht zusammen mit der Dauer im Briefing (0.6s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Was hier für Industrie funktioniert
Wenn du ein Briefing zum Thema Landingpage im Bereich Industrie schreibst, ist das Schwierigste die Entscheidung, was der erste Screen nicht sagen soll. Cross-Border beantwortet das vorab: eine Display-Zeile, die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster dahinter. Es gibt einem Leser im Bereich Industrie den kürzesten ehrlichen Weg zum Angebot.
Die Zahlen hinter dem Eintrag Landingpage
Vergleich das mit einem Template, das seine Abstände eine Vorliebe nennt. Hier sind dieselben Werte benannt (12vh hohe Sektionen, Abstände in 20px-Schritten und 0.6s Übergänge), und eine Änderung behält sie entweder oder bricht die Komposition sichtbar. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Die Zeitwerte hinter dem Eintrag Landingpage
Das Briefing bindet jeden Übergang an einen Wert (Übergänge von 0.6s, eine Medienschleife von 5,8s und Hover- und Druckzustände). Genau das unterscheidet die Seite von einem Template mit aufgesetztem Animations-Preset. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Cross-Border?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1440x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um Cross-Border nachzubauen?
Cross-Border 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 ist dieser Eintrag zu Cross-Border aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 6.698 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
