Über diese Vorlage
Bold Studio ist die Referenz (Hero-Bereich) für dieses Publikum, also für eine Agentur oder ein Studio. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Sie beginnt mit „FSP DEMO - PODIUM Sharp 4.11“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette ist rot #A60D29 darunter und weiß #F6E9EB für die Schrift, gesetzt in Inter. Geliefert wird React und Tailwind CSS, erfasst bei 640x474, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung ist Übergänge von 100ms und bleibt so zurückhaltend, dass die Texte weiter führen. Lass es beim Schreiben offen: Die 6.067 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Bold Studio.
- Wenn deine Schrift nicht Inter ist, sollten Frontend-Entwickler die Headline neu ausmessen, bevor sie den Einstieg neu takten.
- Gemacht für Teams, die Inter schon geladen, einen 640x474-Export liegen und diese Woche einen Build-Slot haben.
Was enthalten ist
- Zurückhaltende Navigation. Die Leiste überlagert Hero-Bereich, statt Raum darunter zu belegen, damit die Komposition die volle Höhe des ersten Bildschirms behält. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x474, damit die Medien darunter bis an den Rand durchlaufen.
- Abstände als Werte genannt. Das Briefing nennt die Zahlen: Abstände in 30px-Schritten und 100ms Übergänge. Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Der kleinste und der größte Wert dieser Liste stecken den Bereich ab, in dem die Komposition arbeitet.
- Obere Zeile: Wortmarke, Links, eine Aktion. Das Mobilmenü ist Teil des Briefings, der eingeklappte Zustand ist deshalb gestaltet und nicht improvisiert. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
- Feste Stufen statt einer Skala. Die Abstände sind genauso zitiert (Abstände in 30px-Schritten und 100ms Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Das ganze Animationsbudget
Die Zeiten sind kurz und einheitlich: Übergänge laufen 100ms, deshalb lesen sich Hover- und Druckzustände als ein System und nicht als Sammlung einzelner Effekte. Die angegebene Zeit betrifft Zustandswechsel, die Rückmeldung ist damit der spezifizierte Teil der Bewegung.
Interaktion bleibt lokal
Interaktion spielt sich hier an jedem Bedienelement ab (Hover-Zustände auf Buttons und Links statt auf jeder Karte), nichts auf der Seite bewegt sich als Nebeneffekt. Ein Bedienelement, das interaktiv aussieht, verhält sich auch so; es gibt keine falschen Affordanzen. Halte die Zeiger-Effekte bei den Bedienelementen.
Die Reihenfolge im Eintrag Hero-Bereich
Sich auf einen Lesepfad festzulegen schließt andere Pfade. Das Briefing akzeptiert das: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip bleiben an ihrem Platz, und Abstände in 30px-Schritten und 100ms Übergänge werden dafür ausgegeben, die Route offensichtlich zu machen. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Was hier für Agenturen & Studios funktioniert
Angenommen, deine Medien sind lauter als dein Text. Genau dafür ist diese Komposition gebaut. Das Medium ist ein Standbild in 640x474. Der Rahmen bleibt ruhig, und Abstände in 30px-Schritten und 100ms Übergänge halten den Leser am Text. Bold Studio nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Was du in Bold Studio zuerst änderst
Vergleich das mit einem leeren Blatt. Hier sind der Rahmen (640x474) und Abstände in 30px-Schritten und 100ms Übergänge bereits entschieden, die Arbeit ist also Substitution und nicht Komposition. Schreib die Display-Zeile um, bevor du die Farbe anfasst.
Häufige Fragen
Ist der Prompt zu Bold Studio eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 6.067 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 Tailwind CSS überhaupt?
Bold Studio 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.
Kann ich eine aus Bold Studio nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
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 640x474 erfasst.
