Über diese Vorlage
Bevor du beim Thema Feature-Bereich für ein KI- oder SaaS-Produkt nachbaust, lies Vela Ul: Komposition und Spezifikation stehen beide hier. Die Palette umfasst #16120C darunter und #F7F5F2 für die Schrift, die Schrift ist Arial, Helvetica. Es kommt als eine eigenständige HTML-Datei, damit sich der ganze Feature-Bereich ohne Design-Übergabe in ein Projekt heben lässt. Die Bewegung bleibt auf Übergänge von 720ms, cubic-bezier(.22,1.36,1) und eine Videospur in Schleife beschränkt. Wenn du ein Briefing zum Thema Feature-Bereich im Bereich SaaS schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Gründer, die eine Agentur briefen, nehmen den 1920x1418-Rahmen als Abnahmekriterium für die erste Runde.
- Wenn die Bewegung wegfallen muss, funktioniert das Feature-Bereich-Design trotzdem, weil dann eine feste Display-Größe von 25px und 100vh hohe Sektionen die Hierarchie übernehmen.
- Die Seite richtet sich an Frontend-Entwickler, die ein Feature-Bereich-Design für ein KI- oder SaaS-Produkt in eine eigenständige HTML-Datei nachbauen und die Zahlen hinter der Optik suchen.
Was enthalten ist
- Navigation in einer Zeile. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Arial, Helvetica gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System. Die Labels passen bei 410px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Das Posterbild ist entscheidend. Das Video liegt in der untersten Ebene der Komposition 1920x1418, die Schrift ist darüber angeordnet, dazwischen liegt nichts. Die Schleife ist kurz genug (4,7s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Das Verhalten ist pro Breite definiert. Das obere Ende der Skala ist fließend (eine Größe zwischen 14px und 20px), der Rest ist fest, damit der Rahmen auch bei schmalerem Viewport komponiert bleibt. Das mobile Menü gehört zum selben Briefing, der eingeklappte Zustand ist also mitgeplant.
- Schmale Navigationsleiste. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen. Die Referenz wurde mit 1920x1418 erfasst.
Bewegung & Interaktion
Zustandswechsel mit Zeitwert
Zustandswechsel sind mit 720ms angegeben, die Rückmeldung der Bedienelemente ist damit ein gestalteter Wert und kein Browser-Standard. Nichts wartet auf eine Scroll-Position, deshalb reagiert die Seite, sobald du sie berührst. Übernimm die Zeiten in deinen Nachbau.
Eine Schleife, keine Timeline
Ein einziger Clip von 4,7s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Der Clip ist stumm und inline, das erste Bild ist also ohne Interaktion verfügbar.
Was du in Vela Ul zuerst änderst
Eine reine Substitution hat eine Grenze: Wenn dein Produkt eine andere Hierarchie braucht, arbeiten eine feste Display-Größe von 25px und 100vh hohe Sektionen dagegen. Ändere in dem Fall zuerst die Reihenfolge und danach die Werte. Die Komposition ist der wiederverwendbare Teil und übersteht eine andere Marke.
Warum diese Komposition für SaaS trägt
25.889 Zeichen Briefing ergeben einen Screen ohne Füllmaterial. Die Werte darin sind ausgeschrieben (eine feste Display-Größe von 25px und 100vh hohe Sektionen), und deshalb liest die Komposition auch dann noch, wenn der Text wechselt. Vela Ul nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie der Eintrag Feature-Bereich umbricht
Es gibt kein separates Mobil-Design zu pflegen. die Skala ist fließend statt gestuft, das Layout wechselt bei 410px und der Bereich wird auf 100vh gehalten, und dieselbe Hierarchie trägt über alle Breiten. Die Mobil-Version ist eine Entscheidung und kein Notfallplan.
Häufige Fragen
Wie lang ist der Prompt hinter Vela Ul?
Das erfasste Briefing umfasst 25.889 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Warum nennt der Eintrag eine eigenständige HTML-Datei überhaupt?
Vela Ul 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.
Was kann ich mit dem Briefing zu Vela Ul machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 25.889 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
