Architecte de Concept de Site Web
Conception de concept pré-code pour sites personnels, portfolios et pages d'atterrissage. Cette compétence produit de la direction, pas du balisage. Le livrable est un petit ensemble de documents de concept distincts parmi lesquels l'utilisateur choisit ; le concept choisi alimente ui-ux-architect pour l'implémentation.
Quand l'utiliser
L'utilisateur démarre un nouveau site web et veut décider ce qu'il est avant d'écrire du code. Pas pour les refontes de sites existants, sauf si le brief est « repenser à partir de zéro ». Pas pour les décisions UI au niveau des composants — celles-ci relèvent de ui-ux-architect.
1. Principe de fonctionnement — marcher, ne pas déverser
Exécutez les six étapes de manière interactive, une par une. Après chaque étape, présentez le menu, faites une pause, attendez le choix de l'utilisateur, puis avancez. Ne regroupez jamais plusieurs étapes en une seule question. Ne sautez jamais d'étape, même si l'utilisateur donne des informations volontairement — présentez ce qu'il a dit comme une valeur pré-sélectionnée et confirmez.
L'intérêt de la marche est de forcer les décisions que l'utilisateur aurait autrement reportées. Sauter une étape signifie un document de concept vague plus tard.
2. Les six étapes
| # | Étape | Objectif | Résultat |
|---|---|---|---|
| 1 | Objectif | À quoi sert le site pour ? | 1-2 choix dans la liste des archétypes |
| 2 | Public | Qui le lit ? | 1-2 choix, détermine le ton et la densité |
| 3 | Inventaire du contenu | Qu'est-ce qui y vit ? | Menu coché des sections |
| 4 | Ton et personnalité | Comment ça se ressent ? | 2-3 adjectifs issus d'une liste organisée |
| 5 | Direction visuelle | À quoi ça ressemble ? | 1 archétype (suggestions classées, liste complète affichée) |
| 6 | Synthèse | Documents de concept | 2-3 directions de concept distinctes + wireframe ASCII |
3. Étape 1 — Objectif
Présentez ces archétypes. L'utilisateur choisit 1-2 (combinables, par ex. portfolio + hub d'écriture) :
- Portfolio / vitrine — les artefacts de travail sont le point central ; les projets sont l'épine dorsale de l'IA.
- Hub d'écriture — les essais / blog / notes sont l'épine dorsale ; tout le reste est navigation.
- Carte de visite professionnelle — page unique ou quasi-unique ; les recruteurs / clients atterrissent, apprennent, contactent.
- Jardin numérique — notes interconnectées persistantes ; la structure est le réseau, pas la chronologie.
- Lanceur de projet — un produit ou projet spécifique est le héros ; « à propos de moi » est une note de bas de page.
- Terrain de jeu expérimental — le site est lui-même un artefact créatif ; la convention est l'ennemie.
Si l'utilisateur choisit 2 archétypes incompatibles (par ex. terrain de jeu expérimental + carte de visite professionnelle), signalez-le et demandez lequel l'emporte sur la page d'accueil — le perdant devient une sous-section.
4. Étape 2 — Public
Les choix déterminent la quantité d'explications nécessaires et la voix appropriée.
- Recruteurs / clients — lecture rapide, met en avant les diplômes, peu de jargon, contact évident.
- Développeurs pairs / collègues — suppose un vocabulaire partagé, tolère la densité, les extraits de code sont bienvenus.
- Amis / communauté — informel, axé sur la personnalité, les clins d'œil autorisés.
- Futur-vous / archive — conçu pour rechercher votre propre passé, densité avant la finition.
- Le web ouvert — visiteur générique, doit s'expliquer, le référencement compte.
Le multi-public est normal. S'ils en choisissent 3 ou plus, demandez pour quelle audience la page d'accueil est optimisée — les autres sont accommodées sur les sous-pages.
5. Étape 3 — Inventaire du contenu
Présentez ce menu. L'utilisateur coche ce qu'il souhaite ; proposez d'ajouter des éléments personnalisés.
Sections standard :
- À propos / bio
- Page « maintenant » (ce sur quoi vous vous concentrez actuellement)
- Index des projets
- Études de cas individuelles de projets
- Essais / blog / écrits
- Notes / jardin numérique / wiki
- Liste de lectures / bibliothèque
- Page « utilisations » (outils, matériel, configuration)
- CV / résumé (ou lien vers PDF)
- Contact (email, réseaux sociaux, formulaire)
- Inscription à la newsletter
- Flux RSS / Atom
- Journal des modifications (site ou mises à jour de vie)
- Galerie de photos
- Conférences / podcasts / apparitions
- Livre d'or / webring (esthétique rétro-web)
Pour chaque section sélectionnée, posez une question de suivi : cela existe-t-il déjà ? Les sections sans contenu sont marquées [reporté] dans le document de concept afin que l'utilisateur ne publie pas de pages vides.
6. Étape 4 — Ton et personnalité
Choisissez 2-3 adjectifs. Ceux-ci ancrent les suggestions visuelles de l'étape 5 et la voix rédactionnelle de l'étape 6.
Présentez-les sous forme de paires opposées afin que les choix imposent des compromis :
- minimal ↔ dense
- ludique ↔ sérieux
- chaleureux ↔ clinique
- brut ↔ soigné
- intime ↔ public
- expérimental ↔ conventionnel
- rapide / scannable ↔ contemplatif / longue lecture
- confiant ↔ auto-dérisoire
Un utilisateur qui choisit minimal + ludique + chaleureux reçoit des suggestions très différentes de dense + sérieux + clinique. Enregistrez les choix textuellement — ils entrent dans le document de concept en tant que brief.
7. Étape 5 — Direction visuelle
Huit archétypes. Classez les 3 premiers par adéquation sur la base des étapes 1 à 4, mais montrez la liste complète afin que l'utilisateur puisse passer outre.
| Archétype | Sensation | Convient quand les étapes 1-4 disent... | Sites de référence |
|---|---|---|---|
| Terminal / CLI | monospace, épuré, ligne de commande | public développeur, minimal, brut, archive | sive.rs, wiki.nikiv.dev, ratfactor.com |
| Éditorial / Suisse | typographie forte, grille, blanc généreux | soigné, sérieux, carte de visite professionnelle | rauno.me, paco.me, linear.app |
| Brutaliste | HTML brut, styles par défaut, pas de chrome | expérimental, brut, intime, public développeur | brutalist-web.design, motherfuckingwebsite.com |
| Zine / maximaliste | collage, polices mélangées, textures superposées | ludique, expérimental, public communautaire | cassie.codes, lynnandtonic.com |
| Portfolio minimaliste | colonne unique, grandes images, beaucoup de blanc | portfolio, soigné, recruteurs/clients | nombreux portfolios de designers |
| Carnet / jardin | type wiki, liens denses, persistants | jardin numérique, public archive, dense | gwern.net, andymatuschak.org |
| Magazine / récit | récit en défilement long, direction artistique, imagerie héros | lanceur de projet, contemplatif, web ouvert | longs articles de pitchfork.com, fonctionnalités de the verge |
| Base de données / index | tableau filtrable, presque une UI | dense, archive, beaucoup d'artefacts | profils are.na, répertoire /now de derek sivers |
Affichez le classement avec une phrase de justification par choix, par ex. « Terminal/CLI convient car vous avez choisi public développeur + minimal + brut. » L'utilisateur en choisit un ; s'il passe outre le classement, demandez pourquoi et enregistrez-le (le dépassement révèle souvent une contrainte non exprimée auparavant).
8. Étape 6 — Synthèse
Produisez 2-3 directions de concept distinctes, pas une seule. Même si l'utilisateur a déjà décidé, les alternatives exposent ce qu'il sacrifie.
Format du document de concept
Pour chaque direction, rédigez un document markdown avec ces sections :
# Concept : <nom>
## Pitch en une ligne
<le site en 15 mots ou moins>
## Brief
- Objectif : <choix de l'étape 1>
- Public : <choix de l'étape 2, en priorité le premier>
- Ton : <adjectifs de l'étape 3>
- Archétype visuel : <choix de l'étape 5>
## Architecture de l'information
<arborescence des pages/sections, max 2 niveaux de profondeur>
## Stratégie de la page d'accueil
<ce que fait la page d'accueil en 2-3 phrases — première impression, action principale, ce que le visiteur sait en partant>
## Exemple de voix rédactionnelle
<2-3 phrases dans la voix choisie — ouverture de la section à propos, ou tagline + sous-titre de la page d'accueil>
## Ce que ce concept sacrifie
<liste honnête de ce qui est dépriorisé par rapport aux autres concepts — chaque concept fait un compromis>
## Wireframe ASCII de la page d'accueil
<voir §9>
Les trois directions doivent différer sur un axe réel, pas être des variantes cosmétiques :
- Concept A = la lecture évidente des choix de l'utilisateur
- Concept B = optimise davantage pour le public principal (souvent plus minimal)
- Concept C = une extension délibérée — et si le cadran expérimental était poussé d'un cran supplémentaire ?
Si deux des trois finissent presque identiques, abandonnez-en une et expliquez pourquoi.
9. Wireframe ASCII de la page d'accueil
Un par concept. Gardez-le sur 80 colonnes de large, étiquetez les régions avec [CROCHETS]. Montrez la hiérarchie avec des traits de boîte ou des tirets simples.
Exemple pour un portfolio terminal/CLI :
+------------------------------------------------------------------------------+
| ~ example.dev [now] [writing] [/] |
+------------------------------------------------------------------------------+
| |
| jane doe |
| backend developer · tooling · open-source CLIs |
| |
| > currently building a small build-cache tool in Go |
| |
| --- recent ---------------------------------------------------------- |
| 2026-05-18 shipped: cachetool v0.3 |
| 2026-05-02 essay: why I keep my tools in one repo |
| 2026-04-21 project: build-cache internals |
| |
| --- projects -------------------------------------------------------- |
| cachetool incremental build cache [→] |
| notes short write-ups on tooling [→] |
| |
+------------------------------------------------------------------------------+
| email · github · rss |
+------------------------------------------------------------------------------+
Les wireframes concernent la proportion et la hiérarchie, pas la disposition en pixels. Pas de couleurs, pas de polices, pas d'icônes au-delà de l'ASCII. Si une section nécessite une explication, ajoutez une note d'une ligne en dessous du wireframe, pas à l'intérieur.
10. Anti-patterns
- Sauter des étapes parce que « l'utilisateur a déjà dit ». Présentez leur entrée comme valeur par défaut et confirmez ; ne présumez pas. La moitié de la valeur consiste à forcer l'utilisateur à regarder ce qu'il n'a pas dit.
- Un seul document de concept au lieu de 2-3. Les alternatives sont comment l'utilisateur comprend ce qu'il choisit. Un résultat à concept unique est un échec.
- Archétype visuel avant le ton verrouillé. L'ordre des étapes compte — le visuel est en aval de l'objectif/public/ton, pas en parallèle.
- Remplir le contenu des sections
[reporté]. Si l'utilisateur n'a pas écrit les essais, n'inventez pas de listes de sujets — le document de concept s'engage sur la structure, pas sur le contenu. - Wireframes avec des détails d'implémentation. Pas de « utiliser shadcn Card ici » — c'est le travail de ui-ux-architect. Les wireframes montrent ce qui va où.
- Suggestions génériques. « Un portfolio moderne et propre » n'est pas un concept. Chaque document de concept doit s'engager sur des choix spécifiques sur chaque axe.
11. Relais
Une fois que l'utilisateur a choisi un des 2-3 concepts, le document de concept sert de brief pour :
- ui-ux-architect — pour les tokens, composants, accessibilité, les quatre états requis.
- La compétence intégrée
frontend-design— pour le code réel si la production est visée.
Le document de concept doit être enregistré dans le dépôt du projet (par ex. docs/concept.md) afin qu'il survive en tant que justification de conception.
12. Liens entre compétences
- ui-ux-architect — normes de niveau implémentation ; cette compétence lui fournit le brief.
- demo-presentation-architect — structure interactive similaire, domaine différent.
- demo-script-architect — principes narratifs (public d'abord, révélation progressive) s'appliquent également au texte de la page d'accueil.