Über diese Vorlage
Modern Agency: Landingpage für Agentur, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Die Überschrift der Seite lautet „We craft digital experiences for brands ready to dominate their category online“, und die Komposition ist um genau diese Worte gebaut. Die Palette ist weiß #FFFFFF darunter und helles orange #F26522 für die Akzente. Geliefert wird React und Tailwind CSS, erfasst bei 364x640, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung ist cubic-bezier(0.25,0.1,0.25,1) und bleibt so zurückhaltend, dass die Texte weiter führen. Nutze es als Referenz, wenn du eine Landingpage für dieses Publikum baust, also für eine Agentur oder ein Studio, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Gemacht für einen Solo-Gründer, der ein Landingpage-Design für eine Agentur oder ein Studio ausliefert und kein Designsystem im Rücken hat.
- Wer ein Modell mit einem Landingpage-Briefing versorgt, startet mit dem Prompt über 10.347 Zeichen.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Modern Agency.
Was enthalten ist
- Eine Zeile, keine Schubladen. Die Links stehen in einer Zeile bei einer einzigen Größe, und die Aktion in #F26522 schließt die Zeile rechts ab, damit das Auge dort zur Ruhe kommt, wo die Navigation endet. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #F26522 ist das einzige Element in der Leiste mit Gewicht. Gestalte den eingeklappten Zustand, bevor du einen sechsten Link ergänzt.
- Am Viewport gemessen. Hier ist nichts geschätzt. Die Spezifikation legt Abstände in 13px-Schritten und Easing cubic-bezier(0.25,0.1,0.25,1) fest, und der Rest des Layouts leitet sich aus diesen Werten ab. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System.
- Der Aufbau passt in einen Screen. Alles über dem Falz verdient seinen Platz. Das Briefing nennt den Text, den Rahmen von 364x640 und die Schriftgrößen und lässt nichts Dekoratives daneben konkurrieren. Die Seite ist eine Komposition bei 364x640, und deshalb hält sie zusammen, wenn sich der Text ändert.
- Obere Zeile, eine Aktion. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 364x640, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Das ganze Animationsbudget
Jeder Zustandswechsel in der Spezifikation hat eine Dauer: Übergänge laufen etwa 0 mit cubic-bezier(0.25,0.1,0.25,1). Nichts bleibt beim Browser-Standard, deshalb wirkt die Seite gesetzt und nicht animiert. Ändert sich das Easing, muss die Dauer mit angepasst werden.
Die Leinwand trägt den ersten Bildschirm
Das Herzstück wird live gerendert (ein WebGL-Canvas) und nicht als Bild ausgeliefert, die 364x640-Komposition reagiert also auf den Viewport, statt dahinter zu liegen. Die Szene reagiert auf den Viewport, statt als Bild dahinter zu liegen.
Was du in Modern Agency zuerst änderst
Wo ein Theme dir Komponenten gibt, gibt dieses Briefing dir eine Komposition: Abstände in 13px-Schritten und Easing cubic-bezier(0.25,0.1,0.25,1) und einen Medienrahmen, das Thema bleibt bei dir. Substitution ist billiger als Komposition, und darum geht es.
Die Reihenfolge im Eintrag Landingpage
Wenn deine Seite heute mit Features beginnt, ist das die Reihenfolge zum Übernehmen: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster vorn, das Stützdetail danach, und Abstände in 13px-Schritten und Easing cubic-bezier(0.25,0.1,0.25,1) bestimmen den Abstand. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
Die Zahlen hinter dem Eintrag Landingpage
Vergleich das mit einem Template, das seine Abstände eine Vorliebe nennt. Hier sind dieselben Werte benannt (Abstände in 13px-Schritten und Easing cubic-bezier(0.25,0.1,0.25,1)), und eine Änderung behält sie entweder oder bricht die Komposition sichtbar. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Modern Agency kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 364x640, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Tailwind CSS, um Modern Agency nachzubauen?
Modern Agency 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 eine aus Modern Agency nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
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 364x640 erfasst.
