Über diese Vorlage
Lies Pixel Grid Hover als Spezifikation zum Thema Portfolio-Seite: Die Werte standen fest, bevor die Seite gebaut wurde. Sie beginnt mit „Brand Strategy & Product Design“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Das Farbschema ist weiß #EBEBEB darunter und schwarz #1A1819 für die Schrift, und die Seite ist in DM Sans gesetzt. Geliefert wird React und Tailwind CSS: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung ist Übergänge von 0.7s und cubic-bezier(0.22,1,0.36,1) und bleibt so zurückhaltend, dass die Texte weiter führen. Wenn du ein Briefing zum Thema Portfolio-Seite im Bereich Agentur schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Übernimm den 640x472-Rahmen und Schrift von 12px bis 14px und Abstände in 12px-Schritten aus diesem Portfolio-Seite-Design, bevor du irgendetwas anderes mitnimmst.
- Wer ein Modell mit einem Portfolio-Seite-Briefing versorgt, startet mit dem Prompt über 8.672 Zeichen.
- Gemacht für Content-Leads, die ein Portfolio-Seite-Design neu betexten, dessen Headline so lang bleiben muss wie die von Pixel Grid Hover.
Was enthalten ist
- Das Briefing nennt die Stufen. Das Briefing hält seine Größen bei der Aufnahme fest (Schrift von 12px bis 14px, Abstände in 12px-Schritten, 0.7s Übergänge und Easing cubic-bezier(0.22,1,0.36,1)), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern.
- Die Ankündigungs-Pille. Ein Badge, eine Botschaft: die Pille sitzt in DM Sans auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Die Pille steht auf der kleinsten Stufe im Briefing, damit sie als Label und nicht als zweiter Titel gelesen wird.
- Der Aufbau passt in einen Screen. Alles über dem Falz verdient seinen Platz. Das Briefing nennt den Text, den Rahmen von 640x472 und die Schriftgrößen und lässt nichts Dekoratives daneben konkurrieren. Die Seite ist eine Komposition bei 640x472, und deshalb hält sie zusammen, wenn sich der Text ändert. Behalte den Rahmen; wechsle das Thema.
- Eine Skala für Schrift und Rahmen. Die Abstände sind genauso zitiert (Schrift von 12px bis 14px, Abstände in 12px-Schritten, 0.7s Übergänge und Easing cubic-bezier(0.22,1,0.36,1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Nur ein Scroll-Verhalten
Parallax läuft, während die Seite in Bewegung ist; die Komposition hat damit einen definierten Ruhezustand. Es kommt nur ein Scroll-Verhalten zum Einsatz, deshalb wirkt die Seite nie wie eine Abfolge einzelner Effekte.
Zeiger-Zustände, mehr nicht
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. Ein Bedienelement, das interaktiv aussieht, verhält sich auch so; es gibt keine falschen Affordanzen. Die Referenz wurde mit 640x472 erfasst.
Wie der Eintrag Portfolio-Seite umbricht
Responsiv heißt hier, dass sich die Skala ändert, nicht die Hierarchie: die Schrift ist zwischen 12px und 14px begrenzt. Text bleibt über dem Fold, Bedienelemente bleiben groß genug zum Tippen, und reduzierte Bewegung wird berücksichtigt. Das schmale Layout ist eine Entscheidung und keine Quetschung, und die Hierarchie übersteht sie.
Was hier für Agenturen & Studios funktioniert
Wenn dein erster Screen gerade drei Dinge erklärt, ist das hier die Version, die eines erklärt. das Ankündigungs-Badge, die Kennzahlen-Zeile, das Kartenraster und der Footer sind in Leserichtung gestaffelt, und Schrift von 12px bis 14px und Abstände in 12px-Schritten geben den Takt vor. Es gibt einem Leser im Bereich Agentur den kürzesten ehrlichen Weg zum Angebot.
Pixel Grid Hover als Spezifikation lesen
Wenn ein Nachbau driftet, gehen zuerst die Abstände. Pixel Grid Hover vermeidet das, indem Schrift von 12px bis 14px, Abstände in 12px-Schritten, 0.7s Übergänge und Easing cubic-bezier(0.22,1,0.36,1) zusammen mit der Komposition veröffentlicht werden. Nichts in diesem Eintrag Portfolio-Seite hängt an einer Voreinstellung.
Häufige Fragen
Ist der Prompt zu Pixel Grid Hover eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 8.672 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?
Pixel Grid Hover 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 0.7s Übergänge in Pixel Grid Hover?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 0.7s mit cubic-bezier(0.22,1,0.36,1) angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
