Über diese Vorlage
Digital Director liefert für eine Agentur oder ein Studio einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. „Adam Roberts - Design & Engineering“ ist die Zeile, auf die das Layout gebaut ist. Die Palette umfasst schwarz #000000 darunter und weiß #FFFFFF für die Schrift, die Schrift ist Inter. Es kommt als React und Tailwind CSS, damit sich der ganze Portfolio-Seite ohne Design-Übergabe in ein Projekt heben lässt. Die Seite begrenzt die Bewegung auf Übergänge von 400ms, cubic-bezier(0.16,1,0.3,1) und eine Videospur in Schleife. Nimm es zur Hand, wenn im Fall Portfolio-Seite die Reihenfolge feststehen muss, bevor neue Sektionen dazukommen.
Gemacht für
- Product Manager, die den Aufwand schätzen müssen, lesen ein 1472x1080 Rahmen als Umfang der Arbeit.
- Gemacht für Product Manager, die ein Portfolio-Seite-Design auf einen Sprint und ohne neue Assets begrenzen müssen.
- Produktteams, die die Portfolio-Copy selbst schreiben und jede Zeile auf die Länge halten müssen, die die Display-Schrift vorgibt.
Was enthalten ist
- Leiste im Raster der Seite. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Inter gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1472x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Am Viewport gemessen. Die Größen sind zitiert und nicht vererbt: Abstände in 10px-Schritten, 400ms Übergänge und Easing cubic-bezier(0.16,1,0.3,1). Tauschst du die Schrift oder den Text, halten diese Verhältnisse trotzdem. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen.
- Zahlen als Typografie. Ein kompakter Zahlenstreifen trägt die Aussagen, die sonst einen Absatz bräuchten, und hält damit die Komposition (Portfolio-Seite) davon ab, zur Feature-Liste zu werden. Der Akzent liegt auf den Zahlen, die eine Aussage tragen, nicht auf der ganzen Reihe. Prüfe die Reihe bei der schmalsten Breite.
- Spalten, keine Linkhalde. Die Links sind zu Spalten gruppiert, die Wortmarke hat ihren eigenen Block, und das hält einen langen Footer lesbar, statt ihn zu einer Liste zu machen. Der Akzent wird für eine einzige Footer-Aktion wiederverwendet und nicht für das ganze Band. Gruppiere die Links, statt sie aufzulisten.
Bewegung & Interaktion
Zeiten in Millisekunden
Hover-, Druck- und Fokuszustände lösen sich alle in 400ms auf, deshalb wirkt die Oberfläche unmittelbar. Ändert sich das Easing, muss die Dauer mit angepasst werden.
Hintergrundbewegung ohne Scroll-Bibliothek
Ein einziger Clip von 7s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Die Schleife ist auf Cover zugeschnitten, die Komposition hängt also nicht an einer bestimmten Bildgröße.
Wie Digital Director den ersten Blick ordnet
Die Reihenfolge ist hier das Design. die Navigation, die Überschrift, die Kennzahlen-Zeile, die Feature-Liste und der Hintergrund-Clip stehen so, dass das Angebot vor dem Beleg landet, und Abstände in 10px-Schritten und 400ms Übergänge setzen den Abstand dazwischen. Ein Leser im Bereich Agentur bekommt das Angebot vor den Optionen.
So wird der Eintrag Portfolio-Seite deiner
Fang mit dem Text an, nicht mit der Farbe. Schreib „Adam Roberts - Design & Engineering“ zu einem Satz über dein Produkt um und setz ihn in Inter in der Größe, die das Briefing verwendet. Eine andere Marke kann den ganzen Rahmen wiederverwenden.
Wie der Eintrag Portfolio-Seite umbricht
Responsiv heißt hier, dass sich die Skala ändert, nicht die Hierarchie: die Navigation klappt zu einem mobilen Menü zusammen. Text bleibt über dem Fold, Bedienelemente bleiben groß genug zum Tippen, und reduzierte Bewegung wird berücksichtigt. Bedienelemente bleiben groß genug zum Tippen, und der Text behält bei jeder Breite seine Lesereihenfolge.
Häufige Fragen
Was steht eigentlich im Briefing hinter Digital Director?
Das erfasste Briefing umfasst 8.947 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.
Wie ist dieser Eintrag zu Digital Director aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 8.947 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie viel von Digital Director hängt von React und Tailwind CSS ab?
Digital Director 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.
