Über diese Vorlage
Das hier ist der Eintrag Portfolio-Seite von Creative Portfolio, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Die Überschrift der Seite lautet „I craft bold brands and modern websites with purpose“, und die Komposition ist um genau diese Worte gebaut. Das Farbschema ist tiefes grün #181B17 darunter, weiß #DED9CF für die Schrift und helles blau #309ADA für die Akzente, und die Seite ist in Figtree gesetzt. Der Bau ist React und Tailwind CSS; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Das Briefing gibt sein Bewegungsbudget für Übergänge von 1200ms und cubic-bezier(0.16, 1, 0.3, 1) aus. Am nützlichsten ist es, wenn beim Eintrag Portfolio-Seite für Agenturen & Studios ein Textwechsel ohne Redesign möglich bleibt.
Gemacht für
- Entwickler, die das Portfolio-Seite-Design auch bei langsamer Verbindung am Leben halten müssen, planen 640x468 und die Schriftgrößen-Skala als Gewichtsbudget ein.
- Marketingverantwortliche, die ein Portfolio-Seite-Design übernehmen, ziehen Schrift von 28px bis 200px und Abstände in 80px-Schritten heran, um zu prüfen, ob eine Neufassung die Größenverhältnisse gehalten hat.
- Wer ein Modell mit einem Portfolio-Seite-Briefing versorgt, startet mit dem Prompt über 5.639 Zeichen.
Was enthalten ist
- Links vor der Aktion. Die Zeile setzt ihren Kontrast an genau einer Stelle: die Aktion in #309ADA, während Wortmarke und Links auf der Textfarbe zurücktreten. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #309ADA ist das einzige Element in der Leiste mit Gewicht. Eine Aktion pro Leiste.
- Größen im Briefing fixiert. Das Layout ist gegen feste Werte gelöst (Schrift von 28px bis 200px, Abstände in 80px-Schritten, 1200ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1)), und das hält den ersten Screen bei jeder Breite komponiert. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen.
- Eine Leiste ohne Beiwerk. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen. Die Referenz wurde mit 640x468 erfasst.
- Größen stehen im Briefing. Die Abstände sind genauso zitiert (Schrift von 28px bis 200px, Abstände in 80px-Schritten, 1200ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Kurze, aufeinander abgestimmte Zeiten
Zustandswechsel sind mit 1200ms angegeben, die Rückmeldung der Bedienelemente ist damit ein gestalteter Wert und kein Browser-Standard. Ändert sich das Easing, muss die Dauer mit angepasst werden.
Statisch mit Absicht
Das Briefing lässt Animation weg und überlässt die Seite dem 640x468-Layout, nur Hover- und Druckzustände ändern sich. Die Komposition steht still, die Hierarchie muss die Seite also tragen, und sie tut es.
Wie Creative Portfolio den ersten Blick ordnet
Setz deinen eigenen Text in diesen Eintrag Portfolio-Seite, und die Abfolge hält, weil die Elemente nicht austauschbar sind: die Navigation, die Kennzahlen-Zeile und der Hintergrund-Clip tragen jeweils eine Aufgabe. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
So wird der Eintrag Portfolio-Seite deiner
Die Komposition ist der wiederverwendbare Teil, das Thema gehört dir. Schrift von 28px bis 200px und Abstände in 80px-Schritten bleiben, Text, Medien und Markenzeichen werden ersetzt. Dein Akzent muss denselben Kontrasttest bestehen wie der der Referenz.
Die Zahlen hinter dem Eintrag Portfolio-Seite
Genau das macht die Referenz wiederverwendbar: Schrift von 28px bis 200px, Abstände in 80px-Schritten, 1200ms Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1). Nichts bleibt einem Standard überlassen, ein Ersatz mit denselben Zahlen behält also die Komposition. Nichts in diesem Eintrag Portfolio-Seite hängt an einer Voreinstellung.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Creative Portfolio kopiere?
Das erfasste Briefing umfasst 5.639 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.
Kann ich Portfolio-Seite von Creative Portfolio in einem anderen Stack nachbauen?
Creative Portfolio 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 Creative Portfolio behalten und nur die Zeitwerte ändern?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 1200ms auf cubic-bezier(0.16, 1, 0.3, 1) angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
