Über diese Vorlage
Bevor du beim Thema Hero-Bereich für eine Lifestyle-Marke nachbaust, lies Dot: Komposition und Spezifikation stehen beide hier. Farbe bleibt auf weiß #DEF0FC darunter, schwarz #1A1A1A für die Schrift und helles blau #0871E7 für die Akzente begrenzt, gesetzt in Instrument Serif. Geliefert wird React und Tailwind CSS, erfasst bei 800x588, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Seite begrenzt die Bewegung auf Übergänge von 100ms. Wenn du ein Briefing zum Thema Hero-Bereich im Bereich Lifestyle schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Inhouse-Teams, die ein Hero-Bereich-Design erweitern und Schrift von 14px bis 72px und Abstände in 14px-Schritten unverändert in die neuen Blöcke übernehmen müssen.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 3.871 Zeichen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Dot.
Was enthalten ist
- Navigation in einer Zeile. Die Navigation ist ein schmaler Streifen und kein Band: Wortmarke links, Links rechts der Mitte, eine Aktion in #0871E7, alles über der Komposition (Hero-Bereich) und ohne eigene Hintergrundfläche. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #0871E7 ist das einzige Element in der Leiste mit Gewicht. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht.
- Eine Skala für Schrift und Rahmen. Die Werte sind die Spezifikation: Schrift von 14px bis 72px, Abstände in 14px-Schritten und 100ms Übergänge, aufgenommen bei 800x588 und nicht aus einem Screenshot abgeleitet. Schrift und Layout teilen dieselben Stufen, damit nichts verrutscht, wenn eines von beiden ersetzt wird.
- Schmale Navigationsleiste. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x588, damit die Medien darunter bis an den Rand durchlaufen.
- Gemessen statt geschätzt. Die Abstände sind genauso zitiert (Schrift von 14px bis 72px, Abstände in 14px-Schritten und 100ms Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Kurze, benannte Zeiten
Die Bewegung der Bedienelemente ist kurz und wiederholbar: 100ms bei jedem Zustandswechsel. Jeder Zustandswechsel nennt einen Wert, der Browser-Standard kommt nie zum Einsatz.
Hover, aber sparsam
Die interaktive Ebene ist klein und vorhersehbar: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Alles andere bleibt still, der Schwerpunkt liegt also auf der Komposition. Die Zustände stammen aus der Palette der Seite und nicht aus einem Komponenten-Standard. Wenn ein Zustand keine Aktion bestätigt, lass ihn weg.
Die Zahlen hinter dem Eintrag Hero-Bereich
Das Briefing ist eine Spezifikation: Schrift von 14px bis 72px, Abstände in 14px-Schritten und 100ms Übergänge, und der Medienrahmen ist bei 800x588 festgelegt, bevor irgendetwas darum herum entworfen wird. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Was eine Lifestyle-Marke hier gewinnt
Dass das für eine Lifestyle-Marke funktioniert, liegt daran, dass die Referenz dem Leser nie zumutet, die Botschaft selbst zusammenzusetzen. Layout, Schrift und Farbe sind entschieden (weiß #DEF0FC und helles blau #0871E7, gesetzt in Instrument Serif), die erste Bildschirmfläche liest sich also als fertiges Argument und nicht als Haufen von Teilen. Dot nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Was sich in Dot bewegt
Die Zeitwerte sind ausgesprochen: Übergänge von 100ms und Hover- und Druckzustände, alles im Briefing festgehalten und nicht nach Gefühl abgestimmt. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Häufige Fragen
Ist der Prompt zu Dot eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x588, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Dot 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 gehe ich mit den Medien von Dot in einem Kundenprojekt um?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 800x588 erfasst.
