Über diese Vorlage
Lies CozyPaws als Spezifikation zum Thema Hero-Bereich: Die Werte standen fest, bevor die Seite gebaut wurde. Die Palette ist weiß #EFFDF0 darunter, tiefes grün #1A3D1A für die Schrift und helles orange #E86A10 für die Akzente, gesetzt in Inter. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Das Briefing gibt sein Bewegungsbudget für Übergänge von 0.8s, cubic-bezier(0.16, 1, 0.3, 1) und eine Videospur in Schleife aus. Am nützlichsten ist es, wenn beim Eintrag Hero-Bereich für E-Commerce ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Halte ein 1460x1080 Rahmen in der Übergabe-Notiz fest, damit der nächste Build die Angabe nicht aus der Seite herauslesen muss.
- Marketingverantwortliche, die ein Hero-Bereich-Design übernehmen, ziehen 70vh hohe Sektionen und Abstände in 60px-Schritten heran, um zu prüfen, ob eine Neufassung die Größenverhältnisse gehalten hat.
- Dieses Hero-Bereich-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für E-Commerce 4,8s Video in Schleife tragen kann.
Was enthalten ist
- Zurückhaltende Navigation. Die Links stehen in einer Zeile bei einer einzigen Größe, und die Aktion in #E86A10 schließt die Zeile rechts ab, damit das Auge dort zur Ruhe kommt, wo die Navigation endet. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #E86A10 ist das einzige Element in der Leiste mit Gewicht.
- Abstände als Werte genannt. Im Layout bleibt nichts dem Gefühl überlassen: Das Briefing nennt 70vh hohe Sektionen, Abstände in 60px-Schritten, 0.8s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1), und der Build muss genau diese Werte treffen. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen.
- Die Schleife als Hintergrund. Das Video liegt in der untersten Ebene der Komposition 1460x1080, die Schrift ist darüber angeordnet, dazwischen liegt nichts. Exportiere in 1460x1080 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter.
- Die Skala ist das Styling. Die Schrift ist Inter an der Spitze der Skala, der begleitende Text liegt deutlich darunter, damit die Hierarchie ohne Farbe lesbar ist. Die Laufweite ist pro Größe gesetzt, Display-Zeile und Bildunterschrift nutzen also nicht denselben Wert.
Bewegung & Interaktion
Das ganze Animationsbudget
Hover-, Druck- und Fokuszustände lösen sich alle in 0.8s auf, deshalb wirkt die Oberfläche unmittelbar. Das Easing steht zusammen mit der Dauer im Briefing (0.8s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Die Bedienelemente sind die interaktive Schicht
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. Die interaktiven Zustände verschieben kein Layout, unter dem Zeiger springt also nichts.
Die Zahlen hinter dem Eintrag Hero-Bereich
Der Preis einer festen Skala ist weniger Raum zum Improvisieren. 70vh hohe Sektionen und Abstände in 60px-Schritten halten die Komposition zusammen, aber ein neues Element muss eingepasst und nicht platziert werden. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Wie CozyPaws den ersten Blick ordnet
Die Seite hat eine bewusste Reihenfolge. die Navigation etabliert das Produkt und gibt Rückkehrenden einen vertrauten Weg. Die Headline bekommt die Display-Größe, die Stützzeile erklärt das Angebot, und der helles orange #E86A10 markiert die Hauptaktion, damit der nächste Schritt nie fraglich ist. Nichts konkurriert damit: Vor der ersten Entscheidung steht kein Kartenraster, und genau das hält die Komposition (Hero-Bereich) in E-Commerce-Arbeiten leicht. Ein Leser im Bereich E-Commerce bekommt das Angebot vor den Optionen.
Was der Eintrag Hero-Bereich richtig macht
Ein Standard-Hero und dieser Eintrag Hero-Bereich benutzen dieselben Teile. Hier geben die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster die Reihenfolge vor, und 70vh hohe Sektionen, Abstände in 60px-Schritten, 0.8s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1) liefern die Maße, sodass der Screen als Abfolge liest und nicht als Container. CozyPaws nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu CozyPaws kopiere?
Das erfasste Briefing umfasst 6.443 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 steht der Prompt von CozyPaws hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 6.443 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie viel von CozyPaws hängt von React und Tailwind CSS ab?
CozyPaws 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.
