Über diese Vorlage
Infrastructure liefert für ein KI- oder SaaS-Produkt einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. „Ready to elevate your digital infrastructure?“ ist die Zeile, auf die das Layout gebaut ist. Die ganze Seite baut auf tiefes indigo #010002 darunter, weiß #DAD6DB für die Schrift und blau #0F2F65 für die Akzente auf. Geliefert wird React und Tailwind CSS, erfasst bei 2076x1498, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf Übergänge von 4s und eine Videospur in Schleife beschränkt. Nimm es als Briefing für ein KI- oder SaaS-Produkt: Der Eintrag Hero-Bereich muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Produktmarketer, die brauchen, dass die Komposition (Hero-Bereich) auch mit 8s Video in Schleife hinter dem Text lesbar bleibt.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 2.467 Zeichen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Infrastructure.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Wortmarke, Links und die Aktion in #0F2F65 teilen eine Grundlinie, was eine dünne Zeile nicht zufällig wirken lässt. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #0F2F65 ist das einzige Element in der Leiste mit Gewicht.
- Werte bis in den Build. Die Größen sind zitiert und nicht vererbt: Abstände in 10px-Schritten und 4s Übergänge. Tauschst du die Schrift oder den Text, halten diese Verhältnisse trotzdem. Die Liste ist kurz genug, dass eine Prüfung sie Element für Element durchgehen kann.
- Vollflächiges Video, keine Kachel. Ein stummer, loopender Clip füllt das Format von 2076x1498 über 8s, auf Cover gesetzt, der Text darüber gestapelt. Das Briefing lässt Overlays vom Video weg, damit es nicht ausgegraut wird. Das Poster bei 2076x1498 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Navigation ohne Hintergrund. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 2076x1498, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Zeiten in Millisekunden
Das Briefing legt den Übergangswert auf 4s fest, ein Nachbau kann also keinen langsameren Standard einsetzen. Das Easing steht zusammen mit der Dauer im Briefing (4s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Die Schleife übernimmt die Grundbewegung
Ein einziger Clip von 8s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Weil er stumm ist, kann die Schleife unter dem Text laufen, ohne um Ton oder Aufmerksamkeit zu konkurrieren.
Wie der Eintrag Hero-Bereich umbricht
Das Briefing beschreibt, was sich bei welcher Breite ändert (die Skala ist fließend statt gestuft); die Mobil-Version ist also eine Entscheidung und keine Quetschung. Der Kontrast liegt auf dem Akzent #0F2F65 über den Medien, und das Video ist stumm und inline. Das schmale Layout ist eine Entscheidung und keine Quetschung, und die Hierarchie übersteht sie.
Was du in Infrastructure zuerst änderst
Wenn deine Marke eine schwerere Palette fährt, prüf sie vor der Entscheidung gegen den Rahmen. tiefes indigo #010002 trägt die Seite, ein dunklerer Akzent braucht also mehr Kontrast als die Referenz. Die Komposition ist der wiederverwendbare Teil und übersteht eine andere Marke.
Die Zahlen hinter dem Eintrag Hero-Bereich
Der Preis einer festen Skala ist weniger Raum zum Improvisieren. Abstände in 10px-Schritten und 4s Übergänge halten die Komposition zusammen, aber ein neues Element muss eingepasst und nicht platziert werden. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Was steht eigentlich im Briefing hinter Infrastructure?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 2076x1498, 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?
Infrastructure 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.
Woher stammt das Design von Infrastructure?
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 2076x1498 erfasst.
