Über diese Vorlage
Für ein Industrieunternehmen löst Interactive Discovery das Thema Hero-Bereich mit einem einzigen erfassten Briefing. Das Farbschema ist schwarz #000000 darunter, weiß #FFFFFF für die Schrift und helles orange #E8702A für die Akzente, und die Seite ist in Inter gesetzt. Der Bau ist React und Tailwind CSS; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Das Bewegungsbudget umfasst Übergänge von 1.1s und cubic-bezier(0.16,1,0.3,1). Nutze es als Referenz, wenn du eine Hero-Bereich für dieses Publikum baust, also für ein Industrieunternehmen, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Übernimm den 640x474-Rahmen und 100vh hohe Sektionen und Abstände in 28px-Schritten aus diesem Hero-Bereich-Design, bevor du irgendetwas anderes mitnimmst.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 6.894 Zeichen.
- Gemacht für Designer, die lieber #E8702A nachjustieren, als das Hero-Bereich-Design vom Raster aus neu zu bauen.
Was enthalten ist
- Links vor der Aktion. Die Navigation ist ein schmaler Streifen und kein Band: Wortmarke links, Links rechts der Mitte, eine Aktion in #E8702A, alles über der Komposition (Hero-Bereich) und ohne eigene Hintergrundfläche. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #E8702A ist das einzige Element in der Leiste mit Gewicht.
- Werte zum Nachmessen. Das Briefing legt 100vh hohe Sektionen, Abstände in 28px-Schritten, 1.1s Übergänge und Easing cubic-bezier(0.16,1,0.3,1) fest und überlässt den Rest der Anordnung, das Gegenteil einer Skala, die von selbst wächst. Jeder Wert hat genau eine Aufgabe: eine Schriftstufe, ein Abstand, ein Eckenradius oder ein Übergang. Ändere das Thema, nicht die Stufen.
- Der Aufbau passt in einen Screen. Die ganze Komposition passt auf einen Screen und kommt als React und Tailwind CSS, mit Text, Medien und Bedienelementen, die das Briefing benennt. Die Seite ist eine Komposition bei 640x474, und deshalb hält sie zusammen, wenn sich der Text ändert.
- Obere Zeile, eine Aktion. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern. Die Referenz wurde mit 640x474 erfasst.
Bewegung & Interaktion
Bewegung lässt sich abschalten
Reduzierte Bewegung ist festgelegt und nicht nachgerüstet: Ist sie aktiv, kommt die Bewegung, sprich der Auftritt, zum Stillstand, und die Komposition hält ihren Endzustand. Die Rückmeldung der Interaktion funktioniert auch bei reduzierter Bewegung; weggelassen werden nur die Auftritte.
Leinwand statt Bild
Die Tiefe kommt aus dem Rendering und nicht aus einer Illustration: ein WebGL-Canvas. Die Szene reagiert auf den Viewport, statt als Bild dahinter zu liegen.
Was sich in Interactive Discovery bewegt
Ein kurzes Bewegungsbudget kostet Drama im ersten Frame. Es kauft Lesbarkeit, und es heißt, dass Übergänge von 1.1s, Hover- und Druckzustände und eine live gerenderte Canvas ohne Bibliothek portierbar sind. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Wie Interactive Discovery den ersten Blick ordnet
Sich auf einen Lesepfad festzulegen schließt andere Pfade. Das Briefing akzeptiert das: die Navigation, das Ankündigungs-Badge und die Kennzahlen-Zeile bleiben an ihrem Platz, und 100vh hohe Sektionen und Abstände in 28px-Schritten werden dafür ausgegeben, die Route offensichtlich zu machen. Ein Leser im Bereich Industrie bekommt das Angebot vor den Optionen.
So wird der Eintrag Hero-Bereich deiner
Eine Zeile, eine Schrift, ein Akzent: Diese drei Substitutionen ändern das Design am stärksten. 100vh hohe Sektionen, Abstände in 28px-Schritten, 1.1s Übergänge und Easing cubic-bezier(0.16,1,0.3,1) sind die Werte, die sich nicht bewegen sollten. Schreib die Display-Zeile um, bevor du die Farbe anfasst.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Interactive Discovery kopiere?
Das erfasste Briefing umfasst 6.894 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.
Kann ich Hero-Bereich von Interactive Discovery in einem anderen Stack nachbauen?
Interactive Discovery 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.
Wie verhalten sich die 1.1s Übergänge in Interactive Discovery?
Auftritte und Zustandswechsel liegen im Bereich von 1.1s auf cubic-bezier(0.16,1,0.3,1) mit einem Reduced-Motion-Zweig im Briefing. Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
