À propos de ce modèle
Modern Agency donne à une agence ou un studio un premier écran fini et les valeurs qui l’ont produit. « We craft digital experiences for brands ready to dominate their category online » est la ligne que la mise en page doit porter. La palette est blanc #FFFFFF en fond et orange vif #F26522 pour les accents. La livraison est en React et Tailwind CSS, capturée en 364x640 pour que le cadre soit fixé avant la première ligne de code. Le brief consacre son budget d’animation à cubic-bezier(0.25,0.1,0.25,1). Partez du brief capturé, puis retouchez le contenu de landing page au lieu de repartir de zéro.
Conçu pour
- Cette base est calibrée pour un fondateur seul qui livre un design de landing page pour une agence ou un studio, sans design system derrière.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de landing page dont le titre doit rester aussi long que celui de Modern Agency.
- Quiconque briefe un modèle sur un design de landing page utilisera le prompt de 10 347 caractères comme point de départ.
Ce qui est inclus
- Une barre de navigation discrète. La barre est l’élément le plus discret de la composition, avec le nom de marque, une courte rangée de liens et une action en #F26522, le tout au plus petit corps de l’échelle du brief. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #F26522 est le seul élément de la barre à porter du gras. Ne donnez pas au nom de marque plus de place que sa typographie n’en demande.
- Rien n’est hérité ici. Le brief nomme les chiffres, des pas d’espacement de 13px et un easing cubic-bezier(0.25,0.1,0.25,1). C’est ce qui tient la composition, parce qu’aucun pas d’espacement inventé ne s’intercale entre la typographie et le cadre. Les proportions du cadre sont notées avec les tailles, une reconstruction obtient donc aussi le bon ratio.
- Les panneaux portent le milieu. Là où viendrait une suite de texte, cette page pose un ensemble de panneaux, ce qui garde la lecture de landing page balayable. Les panneaux partagent la fonte d’interface à un seul corps, ce qui évite que la grille ne devienne une seconde mise en page.
- Le texte d’abord, la décoration ensuite. Tout ce qui se trouve au-dessus de la ligne de flottaison mérite sa place. Le brief nomme le texte, le cadre 364x640 et les tailles de caractères, et ne laisse rien de décoratif les concurrencer. La page est une seule composition en 364x640, c’est pourquoi elle tient quand le texte change.
Animation et interaction
Des changements d’état minutés
Les timings sont courts et constants (0 en cubic-bezier(0.25,0.1,0.25,1)), donc les états de survol et d’appui se lisent comme un seul système et non comme une série d’effets séparés. Comme les valeurs sont courtes, une reconstruction qui les allonge se voit tout de suite.
Un canvas, pas une image
Le premier écran est construit par le navigateur plutôt que livré comme une image (un canvas WebGL). Prévoyez un budget pour le rendu, car c’est l’élément qui coûtera le plus de frames sur une machine modeste.
Adapter landing page à votre marque
La composition est la partie réutilisable, le sujet est le vôtre. Changez le titre, gardez l’échelle typographique (une échelle typographique fluide) et retestez l’accent #F26522 sur vos propres médias. Si un nouvel élément n’aide pas à expliquer la promesse ou l’action suivante, sa place est sous la ligne de flottaison. La substitution coûte moins cher que la composition, et c’est tout l’intérêt.
Ce qui bouge dans Modern Agency
Une bibliothèque d’animations prêtes à l’emploi donnerait plus de mouvement. Le brief en demande moins, des états de survol et de clic et un canvas animé, sans rien de décoratif en plus. Des durées courtes et une seule entrée, c’est ce qui évite à la page de ressembler à un template livré avec un preset.
L’ordre de landing page
Comparez le haut de cette page avec un premier écran agence classique. Les deux portent un titre et une action, mais ici l’ordre de la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes est fixe au lieu d’un affrontement au même poids. Un lecteur agence reçoit l’offre avant les options.
Questions fréquentes
Quelle est la longueur du prompt derrière Modern Agency?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 364x640, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Pourquoi la fiche mentionne-t-elle React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que Modern Agency 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.
Puis-je utiliser Modern Agency dans un projet client?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 364x640.
