Über diese Vorlage
AI Designer Portfolio 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. Das Farbschema ist weiß #F6FCFF darunter und tiefes petrol #051A24 für die Schrift, und die Seite ist in Neue Montreal gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 604x476, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung ist Übergänge von 0.1s, cubic-bezier(0.4, 0, 0.2, 1) und eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Lass es beim Schreiben offen: Die 11.458 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Dieses Hero-Bereich-Design beantwortet die Frage, was Schrift von 22px bis 80px und Abstände in 40px-Schritten im Layout tatsächlich bewirken.
- Produktmarketer, die brauchen, dass die Komposition (Hero-Bereich) auch mit 17,2s Video in Schleife hinter dem Text lesbar bleibt.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von AI Designer Portfolio.
Was enthalten ist
- Eine Zeile, keine Schubladen. Die Leiste ist eine Zeile aus Text und einer Aktion, auf Schrift von 22px bis 80px und Abstände in 40px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 604x476, damit die Medien darunter bis an den Rand durchlaufen.
- Panels ohne Rahmen. Das Raster ist die Struktur: gleich große Panels, in Neue Montreal gesetzt, so angeordnet, dass das Auge quer statt nach unten wandert. Der Akzent innerhalb des Rasters markiert höchstens ein Element, deshalb konkurrieren die Panels nicht miteinander. Streiche ein Panel, bevor du die Schrift verkleinerst.
- Links vor der Aktion. Eine schmale Leiste liegt über der Komposition (Hero-Bereich), die Wortmarke links, die Links in Neue Montreal gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt.
- Feste Stufen statt einer Skala. Die Größen wurden am Render in 604x476 abgelesen: Schrift von 22px bis 80px, Abstände in 40px-Schritten, 0.1s Übergänge und Easing cubic-bezier(0.4, 0, 0.2, 1). Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
Bewegung & Interaktion
Ein Laufband trägt den Rhythmus
Ein Laufband zieht in einer Endlosschleife durch die Komposition, gesetzt in Neue Montreal, die Seite hat also Bewegung, auch wo beim Scrollen nichts animiert. Das Laufband nutzt dieselbe Schrift wie die Oberfläche, es liest sich also als Inhalt und nicht als Verzierung.
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung kommt aus der 17,2s-Schleife in 604x476 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Der Clip ist stumm und inline, das erste Bild ist also ohne Interaktion verfügbar.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Ein fertiges Animationspaket wäre schneller ausgeliefert gewesen. Das Briefing hält es stattdessen kurz: Übergänge von 0.1s, eine Medienschleife von 17,2s und ein Scroll-Reveal, und deshalb wirkt die Seite verfasst statt inszeniert. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Was hier für Agenturen & Studios funktioniert
Eine Tönung über den Medien wäre die billige Lösung gewesen. Das Briefing lässt sie weg. Das Medium ist eine Schleife von 17,2s in 604x476. Der Text hält trotzdem, weil Schrift von 22px bis 80px und Abstände in 40px-Schritten den Rahmen ruhig halten. AI Designer Portfolio nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
AI Designer Portfolio als Spezifikation lesen
Genau das macht die Referenz wiederverwendbar: Schrift von 22px bis 80px, Abstände in 40px-Schritten, 0.1s Übergänge und Easing cubic-bezier(0.4, 0, 0.2, 1). Nichts bleibt einem Standard überlassen, ein Ersatz mit denselben Zahlen behält also die Komposition. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu AI Designer Portfolio kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 604x476, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um AI Designer Portfolio nachzubauen?
AI Designer 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.
Wie gehe ich mit den Medien von AI Designer Portfolio in einem Kundenprojekt um?
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 604x476 erfasst.
