On ne spamme pas : 1 mail tous les 3 mois, avec des news et du contenu utile !

Exemple de site d'architecte : six index de projets décryptés

Par Alan Chevereau

Consultant SEO & rédacteur

@Metabole Studio

27 min de lecture

Index de projets d'une agence d'architecture présentés en liste, en tableau, en grille et en galerie sur des écrans flottants, dans un décor de béton sombre

Vous cherchez un exemple de site d'architecte pour briefer votre prochaine refonte. Vous ouvrez dix onglets. Des façades en pleine page, des noms en capitales, un menu caché derrière une icône.

Au bout d'une heure, tout se ressemble. Vous savez ce qui vous plaît. Vous ne savez pas pourquoi.

C'est le piège des galeries d'inspiration. Elles montrent la surface d'un site, rarement sa structure. Or ce qui sépare un site d'agence mémorable d'un simple album photo se joue ailleurs. Il se joue dans la manière de ranger les projets.

Nous avons donc relu six sites d'agences sous un angle précis : leur index de projets. Ce qui se voit en premier, ce qui se trie, ce qui se cache. Vous repartirez avec une grille de lecture, des exemples décryptés et une méthode pour l'appliquer à votre agence. Si vous voulez d'abord voir d'autres familles de sites créatifs, notre sélection d'exemples de portfolios de sites web complète bien cette lecture.

Votre site montre vos bâtiments, mais pas votre manière de penser ? Parlons de votre agence.

Les points essentiels de cet article :

  • Un exemple de site d'architecte vaut d'abord par son index de projets, c'est-à-dire la façon dont il classe et donne accès aux réalisations.
  • Lacaton & Vassal affiche ses projets en tableau, avec un statut visible comme réalisé, chantier en cours ou concours non réalisé.
  • Sur mobile, la page d'accueil médiane charge 911 Ko d'images contre 354 Ko pour une page intérieure, selon le Web Almanac 2025.
  • Snøhetta propose dans sa galerie un mode basse résolution et un mode simplifié, utiles aux visiteurs sur connexion lente.
  • Copier la sobriété d'une agence célèbre sans sa notoriété produit un site muet : la forme suit la réputation, pas l'inverse.

Qu'est-ce qui distingue un bon site d'architecte d'un beau portfolio ?

Un bon site d'architecte organise une œuvre, un beau portfolio expose des images. La différence tient en un mot : l'ordre. Le premier aide un visiteur pressé à trouver la preuve qu'il cherche, le second l'invite seulement à admirer.

Ce que ce n'est pas

Ce n'est pas un diaporama plein écran. Une suite de photos sans légende ne dit ni l'année, ni le programme, ni le statut du projet. Le visiteur ignore s'il regarde un bâtiment livré ou une image de concours.

Ce n'est pas non plus une plaquette commerciale mise en ligne. Les textes d'agence génériques, du type « une architecture à l'écoute », ne différencient personne. Le lecteur les a déjà lus ailleurs le matin même.

Enfin, ce n'est pas un site de marque comme les autres. Un site d'architecte s'adresse à des publics très différents dans la même journée. Un promoteur, un particulier, un jury, une école, un journaliste, un candidat.

Pourquoi cette exigence s'est durcie

La concurrence est dense et concentrée. D'après le ministère de la Culture (Chiffres clés, statistiques de la culture, 2024), plus de 29 500 architectes inscrits à l'Ordre exercent en France en 2023. Ce volume reste stable depuis 2010, autour de 30 000 inscrits.

La géographie accentue l'effet. La même source indique que l'Île-de-France regroupe environ un tiers des inscrits en 2023, soit 8 700 architectes. À Paris, un maître d'ouvrage peut donc comparer des dizaines d'agences en une soirée, sans quitter son canapé.

Dans ce contexte, le site sert de premier filtre. On voit souvent ce schéma chez les agences de taille moyenne. Elles gagnent leurs projets par le bouche-à-oreille et jugent le site secondaire. En réalité, la recommandation envoie justement le prospect vers le site, pour vérifier. Le site ne remplace pas la recommandation, il la confirme ou la fragilise.

Comment nous avons choisi ces exemples, et la grille qui en découle

Une sélection n'a de valeur que si son critère est clair. Le nôtre est simple : la logique d'index. Nous avons cherché des sites qui rangent leurs projets de façons franchement différentes, pour que chacun illustre un choix.

Nos critères de sélection

Nous avons retenu uniquement des sites officiels d'agences en activité, consultés le 26 octobre 2026. Chaque site devait présenter un index de projets accessible sans compte ni formulaire.

Nous avons écarté trois familles de résultats. Les galeries de modèles proposées par les éditeurs de constructeurs de sites, d'abord, car elles montrent des gabarits et non des agences. Les portfolios d'étudiants, ensuite, qui répondent à un autre besoin. Enfin, les agences dont le site ne s'ouvrait pas correctement au moment de l'analyse.

Deux des exemples sont des réalisations de notre studio, Apax et Mom Design. Nous le signalons clairement dans leurs sections, et nous ne décrivons que ce qui est publié sur leurs fiches projets.

Cinq façons de ranger une œuvre

De cette lecture ressortent cinq logiques d'index. Elles ne s'excluent pas, mais chaque site en privilégie une.

  • Le catalogue numéroté : chaque projet porte un numéro, comme dans les archives d'une agence.
  • Le tableau : les projets se lisent en lignes et en colonnes, triables par critère.
  • Le système de signes : chaque projet reçoit un pictogramme, qui devient une identité à part entière.
  • Le récit éditorial : chaque projet est présenté par une phrase qui en dit l'intention.
  • La sélection : l'agence choisit ce qu'elle montre d'abord, et garde le reste en second plan.

Cette grille sert à une chose : choisir consciemment. La plupart des sites d'agences mélangent ces logiques par accident. Les meilleurs en assument une.

Six exemples de sites d'architectes décryptés

Herzog & de Meuron, le catalogue numéroté

L'agence bâloise numérote ses projets sur son site. M+ à Hong Kong porte le numéro 415, Sotheby's Madison Avenue le 648, la Kinderspital de Zurich le 377. Ce numéro apparaît dans les vignettes et dans l'adresse des pages.

Le choix paraît austère. Il dit pourtant beaucoup. Il montre une production continue, archivée, revendiquée dans sa durée. Le visiteur comprend sans lire une ligne qu'il entre dans un fonds de plusieurs centaines de projets.

Le menu prolonge cette logique. À côté des projets, on trouve des rubriques Exhibitions, Monographs, Writings et Lectures & Talks. L'agence se présente comme productrice de pensée, pas seulement de bâtiments.

Autre détail utile : les vignettes créditent les photographes, comme Iwan Baan ou Maris Mezulis. C'est une marque de rigueur. C'est aussi une protection, car les droits d'une photographie d'architecture se négocient.

Enfin, l'actualité suit les chantiers. Des billets intitulés On-Site documentent un bâtiment pendant sa construction, à plusieurs dates. Un projet n'attend pas sa livraison pour exister en ligne.

Lacaton & Vassal, le tableau assumé

Le site de Lacaton & Vassal surprend au premier regard. Il ressemble davantage à une base de données qu'à une vitrine. Et c'est précisément sa force.

La page d'accueil est un tableau. Cinq colonnes, en français et en anglais : nom, lieu, année, catégorie, état. Chaque colonne permet de filtrer la liste des projets.

La colonne « état » mérite l'attention. Elle distingue un projet réalisé, un chantier en cours, des études en cours, un concours non réalisé ou un projet non réalisé. Le visiteur sait toujours ce qu'il regarde.

Cette honnêteté est rare. Beaucoup de sites d'agences mélangent rendus de concours et bâtiments livrés sans le dire. Ici, le statut est une donnée, au même titre que l'année.

Le menu tient en trois entrées : projets, publications, agence. Aucun slogan, aucune animation. L'économie du site fait écho à une démarche connue pour sa sobriété de moyens.

Ce modèle a une limite, et nous y reviendrons dans les erreurs. Il fonctionne parce que l'agence est déjà connue. Le visiteur arrive en sachant pourquoi il est là.

BIG, le système de signes

Sur le site de BIG, chaque projet possède son propre pictogramme. Une icône dessinée, reconnaissable, qui accompagne le nom et la ville. L'index entier devient un alphabet visuel.

Le procédé transforme une liste en marque. On ne parcourt pas des vignettes, on lit un vocabulaire de formes. Il suppose un travail de dessin considérable, projet par projet.

Le tri par discipline est discret mais complet : Architecture, Interiors, Landscape, Planning, Products. L'index mélange d'ailleurs bâtiments, plans d'aménagement et objets, comme des luminaires édités par Artemide.

Le détail le plus utile se trouve en bas de page. Les contacts sont séparés par intention. Une adresse pour les nouveaux projets, une pour la presse, une pour les conférences, une pour les expositions.

C'est une leçon de tri, transposable à n'importe quelle agence. Un promoteur ne devrait pas atterrir dans la même boîte qu'un candidat. Ce seul choix qualifie les demandes avant même la première lecture.

Snøhetta, le récit éditorial

Snøhetta se présente comme une pratique transdisciplinaire mondiale, dont la méthode s'affine depuis 1989. Son menu principal tient en trois mots : People, Process, Projects. Les personnes et la méthode passent avant les réalisations.

Chaque projet mis en avant est accompagné d'une phrase d'intention. Pour l'opéra et ballet national de Norvège, le site parle de rendre le front de mer au public. Le visiteur reçoit une idée avant une image.

Le site range aussi ses projets par discipline : architecture, paysage, architecture intérieure, design produit. Une rubrique Perspectives et une autre consacrée aux prix complètent le dispositif.

Le détail le plus rare se cache dans la galerie. Deux réglages s'offrent au visiteur : un mode simplifié et un mode basse résolution. Pour une agence qui publie de grandes images, c'est une attention concrète portée aux connexions lentes.

Nous n'avons trouvé ce réglage sur aucun autre site de notre sélection. Il répond pourtant à une question que tout site d'architecte devrait se poser. Que voit un client qui consulte vos projets dans un train ?

Apax, la sélection, une réalisation de notre studio

Apax est une agence d'architecture parisienne fondée en 1982. Elle a été reprise en 2025 par Antoine Morizot, avec une forte volonté de modernisation. L'agence Graphéine a repensé son identité et son nom pour poser ce nouveau positionnement.

Notre rôle a été de concevoir le site qui prolonge cette identité. L'objectif inscrit sur la fiche projet est net. Faire passer Apax d'une image traditionnelle à celle d'une agence contemporaine, plus affirmée et plus sélective.

Le mot « sélective » a guidé l'index. Sur le site en ligne, le lien Projets ouvre d'abord une sélection. L'agence choisit ce que le visiteur découvre en premier.

La fiche projet montre aussi plusieurs façons de parcourir l'œuvre : une liste, une grille, la sélection, et une déclinaison en mode sombre. Le visiteur pressé lit la liste. Le visiteur curieux parcourt la grille. Chacun garde la main.

Le menu, lui, tient en deux entrées : projets et agence. La sobriété ne vient pas d'un manque de contenu, mais d'un choix de hiérarchie. Le résultat décrit sur la fiche : un site qui positionne Apax comme une agence contemporaine et crédible, capable de s'adresser à une clientèle internationale.

L'avis de Matteo Courquin, co-fondateur et lead développeur : « Sur un site d'architecte, nous dessinons l'index des projets avant la page d'accueil. C'est lui qui fixe le modèle de données, donc tout le reste. Une agence qui ne sait pas dire comment elle range son œuvre n'a pas encore de site, seulement des images. »

Mom Design, l'architecture intérieure par la démarche, une réalisation de notre studio

Mom Design est un studio d'architecture intérieure et de scénographie. Il conçoit des espaces pour des particuliers et des entreprises, avec une approche fondée sur la durabilité et l'usage.

Le cas est différent d'Apax. Ici, notre studio a conçu à la fois l'identité visuelle et le site. La fiche projet décrit une identité construite autour d'un signe inspiré de formes organiques, d'une palette de couleurs naturelles et d'une typographie sobre.

Le site met en avant trois choses : les projets, les offres et la démarche du studio. Cette troisième entrée compte. Pour un client particulier, comprendre comment on travaillera ensemble pèse autant que les photos d'intérieurs livrés.

C'est la logique du récit appliquée à une petite structure. L'index de projets existe, mais il s'appuie sur une explication de la méthode. Le visiteur choisit un partenaire, pas seulement un style.

Vous hésitez entre une logique de tableau, de sélection ou de récit pour votre agence ? Échangeons sur votre index de projets.

Que coûtent vos images au chargement de la page ?

Plus qu'on ne le pense, et surtout sur la page d'accueil. L'architecture se vend par l'image, mais chaque image a un poids que le visiteur mobile paie en secondes d'attente.

Ce que disent les mesures

D'après le HTTP Archive (Web Almanac 2025, chapitre Page Weight), la page d'accueil mobile médiane charge 911 Ko d'images. Une page intérieure médiane n'en charge que 354 Ko. L'accueil concentre donc l'essentiel du poids visuel.

Le même chapitre compte 19 images sur une page d'accueil médiane, contre 13 sur une page intérieure. Les sites d'architectes dépassent souvent ces médianes, puisque leur accueil est fréquemment un mur de photographies.

Le seuil à viser est connu. Selon web.dev (Largest Contentful Paint, mis à jour en 2025), l'élément principal d'une page devrait s'afficher en 2,5 secondes ou moins. Google recommande de mesurer ce seuil sur 75 % des chargements, séparément sur mobile et sur ordinateur.

Ce que cela change pour un site d'agence

Une grande photographie en ouverture est presque toujours l'élément principal de la page. Si elle arrive lentement, toute la première impression arrive lentement. La beauté de l'image ne compense pas l'attente.

Le réglage basse résolution de Snøhetta prend ici tout son sens. Il ne sacrifie pas la qualité pour tous les visiteurs. Il laisse le choix à ceux qui en ont besoin.

Ce qu'on entend le plus souvent en premier brief, c'est la crainte de « dégrader les photos ». En réalité, une image bien préparée pour l'écran garde toute sa qualité perçue. Ce qui se perd, ce sont des pixels que personne ne voit.

Trois erreurs que les exemples célèbres font commettre

Les grandes agences inspirent, à juste titre. Mais leurs choix reposent sur une situation que la plupart des agences n'ont pas. Copier la forme sans la situation produit l'effet inverse.

Erreur 1, copier la sobriété sans la notoriété

Le site de Lacaton & Vassal fonctionne parce que le visiteur sait déjà qui ils sont. La sobriété y devient une signature. Le même tableau, sur le site d'une agence inconnue, se lit comme un manque de soin.

Un schéma revient chez les agences qui sortent d'une reprise ou d'une association. Elles veulent marquer une rupture et adoptent une esthétique minimale. Mais rien sur la page ne dit encore ce qu'elles font mieux que les autres. La sobriété suppose un message déjà installé.

Erreur 2, imiter un système graphique sans en avoir le volume

Le pictogramme par projet de BIG est spectaculaire. Il repose sur un fonds de projets très large et sur une équipe capable de dessiner chaque signe. Avec huit projets, le même système paraît décoratif.

Le principe transposable n'est pas l'icône. C'est l'idée qu'un index puisse avoir une identité propre. Pour une petite agence, cela peut passer par une typographie forte, un code de couleur par programme ou une légende systématique. Notre article sur la direction artistique web détaille comment construire ce type de règle.

Erreur 3, ouvrir le site sur l'actualité plutôt que sur l'œuvre

Herzog & de Meuron peut ouvrir son site sur des nouvelles de chantier, parce qu'il en publie plusieurs par mois. Une agence qui poste trois actualités par an affiche vite une page d'accueil datée.

Un cas fréquent illustre bien ce piège. L'accueil met en avant une actualité vieille de dix-huit mois. Le visiteur en conclut que l'agence tourne au ralenti. En réalité, elle est simplement trop occupée pour publier. Le format d'accueil doit suivre le rythme réel de l'agence, pas celui des grandes signatures.

Comment transposer ces exemples à votre agence, en cinq étapes ?

En partant de vos projets, pas des sites que vous admirez. Les étapes qui suivent demandent environ deux semaines de travail interne avant de briefer un studio, selon la taille de votre fonds.

Étape 1, inventorier le fonds de projets (2 à 4 jours)

Listez tous les projets que vous pourriez montrer. Pour chacun, notez l'année, le lieu, le programme, l'échelle et le statut. Ce tableau brut vous dira déjà quelle logique d'index vous convient.

Un fonds de cent projets appelle un tableau ou un catalogue. Un fonds de quinze projets solides appelle une sélection ou un récit. Le volume tranche souvent le débat esthétique.

Étape 2, nommer les publics et leur question (1 jour)

Écrivez la question principale de chaque public. Le promoteur veut des références comparables. Le particulier veut savoir comment se passera le projet. Le jury veut vérifier vite. Le candidat veut sentir la culture de l'agence.

Chaque question doit trouver sa réponse en deux clics maximum. Si une question n'a pas de page, c'est là que votre site perd des contacts.

Étape 3, choisir une logique d'index dominante (1 jour)

Reprenez les cinq logiques : catalogue, tableau, système de signes, récit, sélection. Choisissez-en une comme logique principale. Gardez-en éventuellement une seconde, comme vue alternative, à la manière d'Apax.

Ce choix se fait en équipe, avec les associés. Il engage l'image de l'agence pour plusieurs années.

Étape 4, rédiger un modèle de fiche projet (3 à 5 jours)

Une fiche projet efficace répond toujours aux mêmes questions. Quel était le contexte, quelle contrainte, quelle décision, quel résultat. Ajoutez les données du tableau et les crédits photo.

Rédigez trois fiches complètes avant d'écrire les autres. Elles serviront d'étalon pour l'équipe et pour le studio. Notre page consacrée aux sites de cabinets d'architecture détaille ce que nous mettons en place sur ce point lors d'un projet.

Étape 5, préparer les images pour l'écran (2 à 3 jours)

Sélectionnez une image d'ouverture par projet, puis trois à huit images de lecture. Vérifiez les droits de chaque photographie. Prévoyez des versions adaptées aux écrans de téléphone.

Cette étape est souvent repoussée à la fin. C'est une erreur de calendrier : les images conditionnent la mise en page, le poids et donc la vitesse du site.

Vos questions les plus fréquentes sur les exemples de sites d'architectes

Un constructeur de site suffit-il pour une agence ?

Pour une agence qui démarre avec une dizaine de projets, un constructeur de site peut suffire quelques années. La limite apparaît avec l'index : les modèles de sites d'architectes imposent souvent une grille unique, sans tri par statut ni vue alternative. Dès que l'agence veut une logique propre, le modèle freine. Notre comparatif entre site sur mesure et template détaille ce point de bascule.

Faut-il une version anglaise du site ?

Oui, dès que l'agence répond à des concours internationaux ou vise une clientèle étrangère. Une version anglaise ne doit pas être une traduction automatique, surtout pour les fiches projets, où le vocabulaire technique compte. Commencez par l'accueil, l'agence et vos cinq projets majeurs. Lacaton & Vassal montre qu'un simple doublement des libellés peut suffire pour l'index.

Peut-on publier un projet couvert par la confidentialité ?

Oui, avec l'accord écrit du maître d'ouvrage et un niveau de détail adapté. Certaines agences publient une fiche projet anonymisée : le programme, l'échelle, la ville, sans le nom du client ni les plans. D'autres attendent la livraison. Dans tous les cas, mieux vaut une fiche partielle et exacte qu'un projet absent de votre fonds.

Une vidéo en page d'accueil est-elle une bonne idée ?

Rarement en lecture automatique. Une vidéo d'accueil pèse lourd sur mobile et retarde l'affichage de l'élément principal. Elle se justifie quand le mouvement porte le propos, comme la traversée d'un espace public. Sinon, une photographie forte et une vidéo lancée au clic offrent le même effet sans pénaliser le chargement.

Qui doit rédiger les fiches projets ?

L'architecte en charge du projet, puis une relecture éditoriale. Lui seul connaît la contrainte réelle et la décision qui a fait le projet. La relecture rend ensuite le texte lisible pour un non-architecte. Une fiche projet rédigée uniquement par un rédacteur externe tombe vite dans les formules génériques que les visiteurs ont déjà lues partout.

Comment savoir si notre site fonctionne vraiment ?

Regardez trois indicateurs simples : les demandes qualifiées, la part de visiteurs qui ouvrent une fiche projet, et le temps d'affichage sur mobile. Un site d'agence efficace génère des demandes qui citent un projet précis. Si vos contacts disent seulement « j'ai vu votre site », l'index ne fait pas encore son travail.

Rangez votre œuvre avant de la montrer

Les sites d'architectes qui marquent ne se distinguent pas par leurs effets. Ils se distinguent par une décision prise tôt : comment ranger l'œuvre. Herzog & de Meuron archive, Lacaton & Vassal documente, BIG signe, Snøhetta raconte, Apax sélectionne.

Votre agence a sa propre réponse. Elle se trouve dans votre fonds de projets, dans vos publics, dans le rythme réel de votre activité. Commencez par là, et le reste du site suivra.

Pour élargir le regard au-delà de l'architecture, notre décryptage des meilleurs sites web de 2026 montre comment d'autres secteurs résolvent la même question d'ordre.

Alan Chevereau, consultant SEO. Il accompagne Metabole Studio sur sa stratégie de contenu et sa visibilité dans les moteurs de recherche.