Über diese Vorlage
VaultShield ist die Referenz (Hero-Bereich) für dieses Publikum, also für ein Fintech-Produkt. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Farbe bleibt auf grau #CFC8C5 darunter, abdunkelung #192837 für die Schrift und abdunkelung #7342E2 für die Akzente begrenzt, gesetzt in Helvetica Now Display. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Die Bewegung beschränkt sich auf Übergänge von 0.45s. Nimm es als Briefing für ein Fintech-Produkt: Der Eintrag Hero-Bereich muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Growth-Teams, die ein Hero-Bereich-Design für ein Fintech-Produkt neu einfärben und den 640x468-Rahmen behalten wollen, während sich die Angebotstexte ändern.
- Dieses Hero-Bereich-Design beantwortet die Frage, was 100vh hohe Sektionen und Abstände in 24px-Schritten im Layout tatsächlich bewirken.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 4.734 Zeichen.
Was enthalten ist
- Schmale Navigationsleiste. Die Leiste ist der leiseste Teil der Komposition: Wortmarke, eine kurze Linkreihe und eine Aktion in #7342E2, alles auf der kleinsten Schriftstufe des Briefings. Unter 560px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Das Verhalten ist pro Breite definiert. Breitenänderungen stecken in der Schrift selbst: eine Größe zwischen 72px und 24px trägt die Headline vom Smartphone bis zum Desktop, ohne eigene mobile Komposition. Bedienelemente bleiben groß genug zum Tippen, und der Text behält seine Lesereihenfolge bei jeder Breite. Behalte die Hierarchie; ändere die Skala.
- Schriften mit je einer Aufgabe. Die Schriften sind Rollen zugewiesen und nicht gemischt: Helvetica Now Display trägt Display und Oberfläche zusammen. Die Schrift ist mit festen Größen gepaart, und das hält die Display-Zeile und den Oberflächentext aufeinander bezogen. Behalte die Stufen, tausche die Schrift.
- Leiste im Raster der Seite. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht. Die Referenz wurde mit 640x468 erfasst.
Bewegung & Interaktion
Dauern aus dem Briefing
Das Briefing legt den Übergangswert auf 0.45s fest, ein Nachbau kann also keinen langsameren Standard einsetzen. Das Easing steht zusammen mit der Dauer im Briefing (0.45s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Interaktion bleibt lokal
Nur die Bedienelemente reagieren auf den Zeiger (Hover-Zustände auf Buttons und Links statt auf jeder Karte), die Seite wirkt also reaktionsschnell, ohne jedes Element zur Zielscheibe zu machen. Weil die Zustände einfach sind, lassen sie sich in jedes Komponentensystem übertragen. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Was du in VaultShield zuerst änderst
Wiederverwendbar ist die Komposition, das Thema gehört dir. Tausche die Headline, behalte die Schriftgrößen-Skala (eine fluide Schriftgrößen-Skala) und prüfe den Akzent #7342E2 erneut über deinen eigenen Medien. Hilft ein neues Element nicht, das Angebot oder den nächsten Schritt zu erklären, gehört es unter den Fold. Setze den neuen Text in derselben Display-Größe und prüfe den Kontrast erneut, bevor du etwas ergänzt.
Die Zahlen hinter dem Eintrag Hero-Bereich
Das Briefing ist eine Spezifikation, kein Moodboard. Es legt 100vh hohe Sektionen, Abstände in 24px-Schritten, 0.45s Übergänge und ein Breakpoint bei 560px fest und benennt das Medienformat: 640x468. Diese Tiefe ist der Grund, warum das Design einen Nachbau übersteht: Ändere den Text, und die Verhältnisse halten trotzdem. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Wie VaultShield den ersten Blick ordnet
Vergleich den Seitenkopf mit einem typischen Landing-Screen im Bereich Fintech. Beide tragen eine Zeile und eine Handlung; hier stehen die Navigation, die Kennzahlen-Zeile, die Feature-Liste und der Hintergrund-Clip in fester Reihenfolge, statt mit gleichem Gewicht zu konkurrieren. Ein Leser im Bereich Fintech bekommt das Angebot vor den Optionen.
Häufige Fragen
Was steht eigentlich im Briefing hinter VaultShield?
Das erfasste Briefing umfasst 4.734 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.
Wie viel von VaultShield hängt von React und Tailwind CSS ab?
VaultShield 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.
Was steuert die Bewegung in VaultShield?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 0.45s abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
