Über diese Vorlage
Network Hero zeigt einen Weg, die Komposition (Hero-Bereich) für dieses Publikum zu bauen. Gedacht ist sie für eine Agentur oder ein Studio, und die Anweisungen dazu sind veröffentlicht. Sie beginnt mit „Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Das Farbschema ist tiefes indigo #070319 darunter, weiß #FFFFFF für die Schrift und indigo #A068FF für die Akzente, und die Seite ist in Inter gesetzt. Geliefert wird React und Vite: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung beschränkt sich auf Übergänge von 35ms und cubic-bezier(0.22, 1, 0.36, 1). Lass es beim Schreiben offen: Die 7.543 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Wenn du ein Modell statt eines Designers briefst, starte mit dem Hero-Bereich-Briefing und lass den Prompt ein 640x472 Rahmen festhalten.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Network Hero.
- Färbe zuerst #A068FF um und prüfe die Farbe erneut gegen #070319, dann erst das Layout darunter anfassen.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Navigation ist ein schmaler Streifen und kein Band: Wortmarke links, Links rechts der Mitte, eine Aktion in #A068FF, alles über der Komposition (Hero-Bereich) und ohne eigene Hintergrundfläche. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #A068FF ist das einzige Element in der Leiste mit Gewicht. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen.
- Feste Stufen statt einer Skala. Das Briefing hält seine Größen bei der Aufnahme fest (Abstände in 64px-Schritten, 35ms Übergänge und Easing cubic-bezier(0.22, 1, 0.36, 1)), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Der kleinste und der größte Wert dieser Liste stecken den Bereich ab, in dem die Komposition arbeitet.
- Die Komposition ist der Inhalt. Alles über dem Falz verdient seinen Platz. Das Briefing nennt den Text, den Rahmen von 640x472 und die Schriftgrößen und lässt nichts Dekoratives daneben konkurrieren. Die Seite ist eine Komposition bei 640x472, und deshalb hält sie zusammen, wenn sich der Text ändert.
- Schmale Navigationsleiste. Halte die Zeile einzeilig. Die Referenz wurde mit 640x472 erfasst.
Bewegung & Interaktion
Die Zeiten stehen im Briefing
Das Briefing legt den Übergangswert auf 35ms fest, ein Nachbau kann also keinen langsameren Standard einsetzen. Fokus-Zustände laufen mit demselben Wert wie Hover, Tastatur- und Zeiger-Rückmeldung passen dadurch zusammen.
Der Text kommt in Stücken
Die Bewegung konzentriert sich auf ein Verhalten (ein Typewriter-Durchlauf tippt die Einleitungszeile), die Seite wirkt dadurch nie wie ein Repertoire an Effekten. Der Effekt läuft einmal pro Element und wiederholt sich nicht, solange die Seite offen ist.
Was du in Network Hero zuerst änderst
Ändere zuerst den Inhalt und prüf danach den Rahmen. Abstände in 64px-Schritten, 35ms Übergänge und Easing cubic-bezier(0.22, 1, 0.36, 1) sind die Werte, die du beim Tauschen des Textes schützt. Setze den neuen Text in derselben Display-Größe und prüfe den Kontrast erneut, bevor du etwas ergänzt.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
So wenig Bewegung heißt, dass die Seite von Schrift und Rahmen lebt. Die Komposition steht auch dann noch, wenn die Bewegung entfällt; es bliebe nur Übergänge von 35ms, ein Typewriter-Durchlauf und Zeichentiming für die Überschrift. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Was der Eintrag Hero-Bereich richtig macht
Verglichen mit einem Template-Hero liegt der Unterschied im Weggelassenen. Es gibt kein Kartenraster, kein Karussell und keinen zweiten Call-to-Action: nur die Navigation, das Ankündigungs-Badge und die Kennzahlen-Zeile, und Abstände in 64px-Schritten und 35ms Übergänge geben die Maße vor. Network Hero nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Was steht eigentlich im Briefing hinter Network Hero?
Das erfasste Briefing umfasst 7.543 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 React und Vite überhaupt?
Die Referenz ist zufällig in React und Vite gebaut. Im Layout hängt nichts von dieser Entscheidung ab: Abstände, Schrift und Bewegungswerte übertragen sich auf das, was du bereits verwendest.
Kann ich die Übergänge von Network Hero behalten und nur die Zeitwerte ändern?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 35ms mit cubic-bezier(0.22, 1, 0.36, 1) abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
