Voici un fichier de texte brut. A partir de celui-ci, créer une page de case study web (c'est une des pages d'un portfolio de Product Designer UX/UI) intégrant parfaitement le texte ci-joint. Tout le texxte doit être intégré aavec une parfaite exactitude (pas de reformulation, pas de manque de texte etc).
Est-ce que tu saurais appliquer un style UI de type editorial à cette page ?
est-ce que tu as des questions ?
Avant de me lancer, j'ai bien tout lu. Le texte est riche et très structuré (11 sections + nav + footer), avec beaucoup de références à des visuels (sitemaps V1/V2, mockups, audit, personas, diagramme AttrakDiff, états de boutons, etc.) qui ne sont pas fournis. Quelques questions rapides pour viser juste :
Le texte référence beaucoup de visuels (sitemaps, mockups, audit, personas, diagramme AttrakDiff, états de boutons...) mais aucune image n'est fournie. Comment veux-tu les gérer ? Placeholders éditoriaux légendés
Quelle direction éditoriale visuelle préfères-tu ? Éditorial sobre & raffiné
Une couleur d'accent souhaitée ? Au choix (tu décides)
Le corps est en anglais avec des extraits de modale en français. On garde tel quel ? Garder exactement tel quel
Parfait, merci pour les réponses. Je relis le contenu intégral pour l'intégrer mot pour mot.
J'ai tout le contenu. Je vérifie les fichiers de base avant de construire.
Tout est clair. Je pars sur un éditorial sobre & raffiné : fond crème chaud, titres en serif (Fraunces), corps en sans (Inter), grille magazine avec numéros de section, accent terracotta discret, et des figures-placeholders légendées avec les légendes exactes du texte. Je commence par les fondations (couleurs + polices).
Now the layout with fonts and metadata:
Maintenant les composants réutilisables. D'abord la figure-placeholder éditoriale et la nav :
Maintenant la page complète. Je l'écris en intégrant le texte au mot près :
Let me verify it renders correctly in the browser.
Looks great. Let me check the decision section (modal copy, button states) and footer.
La page éditoriale est complète et fonctionne. Je remonte légèrement la saturation de l'accent terracotta pour qu'il soit plus présent (actuellement un peu trop discret sur les boutons et libellés).
La page de case study est terminée. Voici ce que j'ai construit :
Style éditorial sobre & raffiné
- Fond crème chaud, titres en serif (Fraunces), corps en sans (Inter), accent terracotta discret — soit 4 couleurs au total.
- Grille type magazine avec sections numérotées (
01 —à11 —), filets de séparation et libellés en mono espacés. - Header collant avec la nav exacte (Case studies · Resume · About · Contact).
Intégration intégrale du texte
- Les 11 sections, le hero, le sommaire « On this page », les cartes de problèmes/améliorations V1/V2, les chiffres d'audit (29–34, 6–12, 1–2) et de recherche (9, 11h, 288), la citation de l'ingénieur, les insights, les ateliers, les 3 décisions avec leurs blocs Evidence / Trade-off / Alternative / Decision, l'extrait de modale en français (champs, instructions, actions Annuler/Enregistrer), les états de boutons (Default → Disabled), la navigation de page et le footer — tout est repris au mot près, EN et extraits FR conservés à l'identique.
- Tous les visuels référencés (sitemaps V1/V2, mockups, persona, diagramme AttrakDiff, pyramide d'Aaron Walter, sémiologie d'icône, etc.) sont rendus en placeholders éditoriaux légendés avec la légende exacte du texte et des tags V1/V2 — prêts à recevoir tes vrais visuels.
Tu peux maintenant remplacer les composants <Figure> par tes propres images quand tu les auras. Souhaites-tu que je rende ces zones cliquables/uploadables, ou que j'ajoute un sommaire latéral collant avec liens d'ancrage vers chaque section ?