Über diese Vorlage
GlobalBank: Hero-Bereich für SaaS, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Sie beginnt mit „Think Ahead. Move Fast. Exceed Expectations“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette umfasst weiß #FFFFFF darunter, tiefes grün #1A2E24 für die Schrift und grün #22C55E für die Akzente, die Schrift ist Inter. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1468x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Bewegungsbudget umfasst Übergänge von 4.1s und eine Videospur in Schleife. Lass es beim Schreiben offen: Die 31.093 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Product Manager, die den Aufwand schätzen müssen, lesen eine eigenständige HTML-Datei als Umfang der Arbeit.
- Marketingverantwortliche, die ein Hero-Bereich-Design übernehmen, ziehen Schrift von 14px bis 46px und Abstände in 14px-Schritten heran, um zu prüfen, ob eine Neufassung die Größenverhältnisse gehalten hat.
- Schreib deine eigene Headline und baue dieses Hero-Bereich-Design dann in eine eigenständige HTML-Datei mit unveränderten Maßen nach.
Was enthalten ist
- Schmale Navigationsleiste. Die obere Zeile trägt die Wortmarke, vier bis fünf Links und eine einzelne Aktion in #22C55E, knapp genug, um neben dem Rest der Seite leise zu bleiben. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #22C55E ist das einzige Element in der Leiste mit Gewicht. Halte die Zeile einzeilig.
- Gemessen statt geschätzt. Hier ist nichts geschätzt. Die Spezifikation legt Schrift von 14px bis 46px, Abstände in 14px-Schritten und 4.1s Übergänge fest, und der Rest des Layouts leitet sich aus diesen Werten ab. Jeder Wert hat genau eine Aufgabe: eine Schriftstufe, ein Abstand, ein Eckenradius oder ein Übergang.
- Ein Clip, keine Illustration. Der Rahmen 1468x1080 wird von einer einzigen Schleife gefüllt, die hinter dem Text läuft und keine Bedienelemente verlangt. Das Poster bei 1468x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Eine Zeile, keine Schubladen. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern. Die Referenz wurde mit 1468x1080 erfasst.
Bewegung & Interaktion
Schnell genug, um bewusst zu wirken
Die Zeiten sind kurz und einheitlich: Übergänge laufen 4.1s, deshalb lesen sich Hover- und Druckzustände als ein System und nicht als Sammlung einzelner Effekte. Das Easing steht zusammen mit der Dauer im Briefing (4.1s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Die Schleife übernimmt die Grundbewegung
Der Hintergrundclip läuft 4,9s in 1468x1080 als Endlosschleife, stumm und inline, deshalb bewegt sich die Seite weiter, während die Aufmerksamkeit auf dem Text liegt. Eine Scroll-Bibliothek ist nicht nötig, denn die einzige Hintergrundbewegung ist das Medium selbst. Weil er stumm ist, kann die Schleife unter dem Text laufen, ohne um Ton oder Aufmerksamkeit zu konkurrieren.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Die Zeitwerte sind ausgesprochen: Übergänge von 4.1s, eine Medienschleife von 4,9s und eine Überschrift Wort für Wort, alles im Briefing festgehalten und nicht nach Gefühl abgestimmt. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Die Reihenfolge im Eintrag Hero-Bereich
Lies den ersten Screen in einem Zug, und das Angebot ist bereits klar. die Navigation, die Überschrift und der Hintergrund-Clip kommen der Reihe nach, und Schrift von 14px bis 46px und Abstände in 14px-Schritten halten den Abstand statt dekorativer Trennlinien. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
GlobalBank als Spezifikation lesen
Fast jede Entscheidung hier ist ein prüfbarer Wert: Schrift von 14px bis 46px, Abstände in 14px-Schritten und 4.1s Übergänge. Das Medium ist eine Schleife von 4,9s in 1468x1080. Die Schrift bleibt in Inter, ein Ersatz muss also dieselben Proportionen behalten. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Wie viel von GlobalBank hängt von eine eigenständige HTML-Datei ab?
GlobalBank 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.
Ist der Prompt zu GlobalBank eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 31.093 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 GlobalBank ist animiert?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 4.1s angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
