Über diese Vorlage
Blog Showcase hält den Entscheidungsweg fest: Hinter dem Eintrag Blog-Bereich stehen 4.151 Zeichen Briefing. Die Palette ist weiß #FCFCFC darunter und rot #7D1A4A für die Schrift, gesetzt in Outfit. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Die Bewegung ist Übergänge von 0.5s und cubic-bezier(0.33, 1, 0.68, 1) und bleibt so zurückhaltend, dass die Texte weiter führen. Nimm es zur Hand, wenn im Fall Blog-Bereich die Reihenfolge feststehen muss, bevor neue Sektionen dazukommen.
Gemacht für
- Externe Teams, die ein Blog-Bereich-Design übernehmen und ein 640x478 Rahmen im Repository festhalten müssen, bevor der erste Commit läuft.
- Gemacht für einen Solo-Gründer, der ein Blog-Bereich-Design für eine Agentur oder ein Studio ausliefert und kein Designsystem im Rücken hat.
- Gemacht für Content-Leads, die ein Blog-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Blog Showcase.
Was enthalten ist
- Werte bis in den Build. Im Layout bleibt nichts dem Gefühl überlassen: Das Briefing nennt Abstände in 20px-Schritten, 0.5s Übergänge und Easing cubic-bezier(0.33, 1, 0.68, 1), und der Build muss genau diese Werte treffen. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz. Tausch die Schrift oder den Text, aber nicht die Skala.
- Die Skala ist das Styling. Die Schrift ist hier das Styling-System: Outfit in der Display-Größe, dieselbe Schrift durch die ganze Oberfläche, und keine zweite Akzentfarbe, die die Arbeit übernimmt. Ein Schrifttausch ist möglich, die Proportionen müssen ihn aber überstehen. Behalte die Größenstufen, auch wenn du die Schrift tauschst.
- Erst der Text, dann die Dekoration. Die Komposition ist bei 640x478 vollständig: Text, Medien und Bedienelemente sind im Briefing benannt. Die Seite ist eine Komposition bei 640x478, und deshalb hält sie zusammen, wenn sich der Text ändert. Behalte den Rahmen; wechsle das Thema.
- Nichts davon ist geerbt. Die Abstände sind genauso zitiert (Abstände in 20px-Schritten, 0.5s Übergänge und Easing cubic-bezier(0.33, 1, 0.68, 1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Kurze, aufeinander abgestimmte Zeiten
Eine Dauer deckt alle Interaktionen ab (0.5s auf cubic-bezier(0.33, 1, 0.68, 1)); so wirken Hover und Druck als ein System. Das Easing steht zusammen mit der Dauer im Briefing (0.5s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen. Wenn du das Easing änderst, ändere es überall.
Hover nur, wo er etwas bedeutet
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. Jeder Zustand ändert eine Eigenschaft, das hält die Rückmeldung lesbar.
Was hier für Agenturen & Studios funktioniert
Das Design argumentiert auf einem einzigen Screen. Das Medium ist ein Standbild in 640x478. Die Medien tragen die Atmosphäre, der Text trägt das Angebot, und Abstände in 20px-Schritten und 0.5s Übergänge halten beides auseinander. Blog Showcase nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Die Reihenfolge im Eintrag Blog-Bereich
Die Aufmerksamkeit wird gelenkt, nicht verstreut. Das Auge landet zuerst auf der Display-Zeile, dann auf der Stützzeile, dann auf der Aktion. Diese Abfolge ist das Design. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen. Die Referenz wurde mit 640x478 erfasst.
Wie der Eintrag Blog-Bereich umbricht
Die Schrift ist hier geklemmt und nicht gestuft (eine Größe zwischen 17px und 20px); die Display-Zeile springt deshalb nicht zwischen Breiten. Die Hierarchie ist das, was den Umbruch übersteht.
Häufige Fragen
Ist der Prompt zu Blog Showcase eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 4.151 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.
Brauche ich React und Tailwind CSS, um Blog Showcase nachzubauen?
Blog Showcase 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 die Übergänge von Blog Showcase behalten und nur die Zeitwerte ändern?
Auftritte und Zustandswechsel liegen im Bereich von 0.5s auf cubic-bezier(0.33, 1, 0.68, 1). Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
