Über diese Vorlage
Portfolio About wurde bei 640x468 erfasst und als Spezifikation abgelegt, nicht als Galeriebild. Das Farbschema ist schwarz #0C0C0C darunter und weiß #D7E2EA für die Schrift, und die Seite ist in Kanit gesetzt. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Die Bewegung beschränkt sich auf Übergänge von 200ms. Starte beim erfassten Briefing und bearbeite dann den Eintrag Über-uns-Seite, statt von Grund auf neu zu bauen.
Gemacht für
- Produktteams, die die Über-uns-Seite-Copy selbst schreiben und jede Zeile auf die Länge halten müssen, die die Display-Schrift vorgibt.
- Gemacht für einen Solo-Gründer, der ein Über-uns-Seite-Design für eine Agentur oder ein Studio ausliefert und kein Designsystem im Rücken hat.
- Gemacht für Content-Leads, die ein Über-uns-Seite-Design neu betexten, dessen Headline so lang bleiben muss wie die von Portfolio About.
Was enthalten ist
- Das Briefing nennt die Stufen. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: Abstände in 160px-Schritten und 200ms Übergänge. Die Rahmenproportionen sind zusammen mit den Größen festgehalten, damit ein Nachbau auch das Seitenverhältnis trifft.
- Eine Pille für das eine Neue. Ein Badge, eine Botschaft: die Pille sitzt in Kanit 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.
- Die Komposition ist der Inhalt. Die ganze Komposition passt auf einen Screen und kommt als React und Tailwind CSS, mit Text, Medien und Bedienelementen, die das Briefing benennt. Die Seite ist eine Komposition bei 640x468, und deshalb hält sie zusammen, wenn sich der Text ändert. Über dem Falz hat nichts Dekoratives etwas zu suchen.
- Gemessen statt geschätzt. Die Abstände sind genauso zitiert (Abstände in 160px-Schritten und 200ms Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Dauern aus dem Briefing
Die Bedienelemente reagieren in 200ms, schnell genug, dass die Seite beim Antippen antwortet und nicht erst danach. Ändert sich das Easing, muss die Dauer mit angepasst werden.
Scroll-Reveals an die Bewegung gekoppelt
Der erste Bildschirm ist schon vor dem ersten Scrollen vollständig, und ein Sticky-Element hält seine Position, während der Inhalt darunter durchläuft kommt hinzu, statt ihn zu ersetzen. Die Komposition hängt nicht davon ab, dass der Effekt ausgelöst wird; schnelles Vorbeiscrollen kostet nichts. Die Referenz wurde mit 640x468 erfasst.
Was du in Portfolio About zuerst änderst
Setz den neuen Text in der Display-Größe, die das Briefing nennt (Abstände in 160px-Schritten und 200ms Übergänge), und der Rest der Skala folgt ohne Redesign. Schreib die Display-Zeile um, bevor du die Farbe anfasst.
Wie Portfolio About den ersten Blick ordnet
Setz deinen eigenen Text in diesen Eintrag Über-uns-Seite, und die Abfolge hält, weil die Elemente nicht austauschbar sind: das Ankündigungs-Badge, die Kennzahlen-Zeile und die Feature-Liste tragen jeweils eine Aufgabe. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Was hier für Agenturen & Studios funktioniert
Portfolio About funktioniert, weil die Hierarchie entschieden und nicht dekoriert ist. Das Briefing hat die Zahlen schon festgelegt: Abstände in 160px-Schritten und 200ms Übergänge, damit neuer Text in den Rahmen fällt, statt ihn wieder aufzureißen. Portfolio About nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Ist das Briefing zu Portfolio About dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 5.431 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Ist der Prompt zu Portfolio About eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 640x468, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Portfolio About hängt von React und Tailwind CSS ab?
Portfolio About 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.
