À propos de ce modèle
Digital Director résout le problème de portfolio pour une agence ou un studio à partir d’un seul brief capturé. Le titre affiché est « Adam Roberts - Design & Engineering », et le reste de portfolio s’organise autour de lui. La palette repose sur noir #000000 en fond et blanc #FFFFFF pour le texte, et la page est composée en Inter. L’ensemble est livré en React et Tailwind CSS, ce qui permet de transposer un design de portfolio dans un projet sans passation de design. La page s’en tient à 400ms de transitions, cubic-bezier(0.16,1,0.3,1) et un fond vidéo en boucle. Empruntez la structure et pas le sujet, car les valeurs de portfolio passent à votre marque sans modification.
Conçu pour
- Cette composition convient aux agences qui défendent des projets agence et doivent citer un cadre 1472x1080 dès la première réponse au client.
- Équipes produit qui rédigent leurs propres textes de Portfolio et doivent garder à chaque ligne la longueur sur laquelle la typo display a été calibrée.
- Les responsables de studio qui mènent plusieurs projets de front utiliseront ce design de portfolio comme le motif que toutes les autres pages recopient.
Ce qui est inclus
- Un bandeau de nav volontairement fin. Une barre fine se pose en tête de portfolio, avec le nom de marque à gauche et les liens composés en Inter, si bien que la composition se lit d’abord comme du contenu, la barre ensuite. Une surcouche mobile prend le relais sous le breakpoint tablette. La barre se pose sur la composition 1472x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
- Des tailles fixées par le brief. Le brief énonce ses tailles à la capture (des pas d’espacement de 10px, des transitions de 400ms et un easing cubic-bezier(0.16,1,0.3,1)), une reconstruction peut donc être vérifiée au lieu d’être approximée. Une reconstruction qui atteint ces chiffres ressemble à la référence sans réglage supplémentaire.
- La preuve sur une seule rangée. Une bande de chiffres compacte porte les affirmations qui exigeraient sinon un paragraphe, ce qui évite de transformer portfolio en liste de fonctionnalités. La rangée s’aligne sur la même marge que le titre au-dessus. Vérifiez la rangée à la largeur la plus étroite.
- Des colonnes, pas un dépotoir de liens. Les liens sont regroupés en colonnes avec le nom de marque dans son propre bloc, ce qui garde lisible un pied de page long au lieu de le transformer en liste. Les colonnes s’alignent sur la même grille que la page au-dessus, le pied de page paraît donc issu du même design. Donnez au nom de marque sa propre colonne.
Animation et interaction
Des durées en millisecondes
Les transitions sont fixées à 400ms avec cubic-bezier(0.16,1,0.3,1), et c’est la durée à laquelle les contrôles sont tenus. Rien n’attend une position de scroll, donc la page répond dès que vous la touchez.
Une ambiance sans bibliothèque de scroll
Le clip de fond tourne 7s en 1472x1080 sur une boucle sans fin, en sourdine et en inline, donc la page reste en mouvement pendant que l’attention du lecteur est sur le texte. Aucune bibliothèque de scroll n’est nécessaire, parce que le seul mouvement d’ambiance est le média lui-même. Rien d’autre sur la page n’anime en continu, donc le média est le seul élément qui demande l’attention.
L’ordre de portfolio
L’attention est canalisée plutôt que dispersée. La page le dit sans détour, « Adam Roberts - Design & Engineering ». L’œil se pose d’abord sur la ligne display, puis sur le texte de soutien, puis sur l’action. La preuve sociale, quand elle apparaît, reste un bandeau ou une ligne plutôt qu’un mur de témoignages. Cette séquence est le design. Un lecteur agence reçoit l’offre avant les options.
Par où commencer dans Digital Director
Commencez par le texte, pas par la couleur. Réécrivez « Adam Roberts - Design & Engineering » en une phrase sur votre produit, puis composez-la en Inter au corps utilisé dans le brief. Réécrivez le texte et les médias avant de recolorer quoi que ce soit.
Le réagencement de portfolio
La composition desktop est résolue contre 1472x1080, et la mise en page étroite est dessinée au lieu d’être héritée, la navigation se replie en menu mobile. L’animation dispose d’une branche reduced-motion et le média porte une image d’attente, la page communique donc encore quand la lecture automatique est indisponible. La largeur change les mesures, pas le parcours de lecture.
Questions fréquentes
Que contient réellement le brief derrière Digital Director?
Comptez 8 947 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Comment cette fiche de Digital Director est-elle organisée?
Tout ce qui est cité sur la page provient du brief capturé de 8 947 caractères, et non d’un texte rédigé après coup. C’est pourquoi les chiffres et la prose concordent.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Digital Director a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
