stoa : un site concept pour une agence d’architecture à Moscou et Dubaï

stoa est une agence d’architecture fictive, avec des ateliers à Moscou et à Dubaï, qui conçoit des bâtiments, des espaces publics et des intérieurs. VITON¹³ a réalisé son site comme un concept, pour montrer comment nous construisons un portfolio éditorial pour une agence de conception : un site où les projets portent la page et où le texte reste en retrait.

Le nom s’écrit en minuscules, c’est voulu. Une stoa était un portique couvert dans une cité de la Grèce antique, une salle publique sans murs, et le site garde la même retenue : noir et blanc, typographie anglaise en minuscules, boutons entre crochets. Le mouvement devait paraître lent et pesant, sans empêcher d’atteindre un projet, un article ou une offre d’emploi.

Dix pages : accueil, projets, page projet, agence, journal, article, recrutement, contact, confidentialité et 404. Le contenu est fictif mais complet : 10 projets, 5 articles dans le journal, 6 postes ouverts et 2 ateliers sur une carte sombre.

L’accueil s’ouvre sur un compteur de chargement et une vidéo plein écran, puis enchaîne les valeurs « we » qui s’allument au défilement, les services, l’histoire de l’agence avec des compteurs, des projets choisis avec une image flottante, les prix en accordéons [ + ] et un carrousel du journal que l’on fait glisser. La page projets filtre par discipline et passe d’une grille décalée à une liste avec aperçu sous le curseur. Chaque projet a sa fiche, un chapeau, une image en parallaxe, une galerie à faire glisser et un lien vers le projet suivant. Le journal filtre par rubrique, les postes s’ouvrent en accordéons avec un formulaire de candidature, et la page contact réunit une carte sombre, les deux adresses et un formulaire de demande.

Un parcours type va de la liste des projets à un projet, puis à un article du journal. Le texte est découpé en lignes mesurées qui apparaissent une à une ; les images se dévoilent par le bas et se posent après un léger zoom ; la vidéo d’ouverture rétrécit et s’assombrit quand on la quitte. Chaque lien interne ferme la page avec un panneau clair qui compte jusqu’à 100, le menu plein écran se déroule depuis le haut avec une photo par entrée, et un curseur personnalisé affiche les libellés [ view project ] et [ read ].

Le site est écrit en HTML, CSS et JavaScript, sans étape de build. L’en-tête, le pied de page et les calques viennent d’un seul script partagé, si bien qu’ils restent identiques sur toutes les pages. L’animation repose sur GSAP avec ScrollTrigger et le défilement fluide Lenis ; la carte utilise Leaflet. Les formulaires fonctionnent en mode démo : l’état reste dans le localStorage du navigateur et rien n’est envoyé. Les photos Unsplash et les vidéos Pexels sont des images de banque sous licence, chargées par liens CDN directs.

Le concept existe sous la forme de 10 pages terminées, en anglais. Le 22 septembre 2026, VITON¹³ en a vérifié 9, rendues dans Chrome, sans la page 404 : les 9 ont un titre unique et une langue déclarée, la mise en page tient à 390 px sans défilement horizontal, 100 % des images ont un texte alternatif et aucun lien interne n’est cassé.

Lighthouse sur la page d’accueil. Sur mobile : performances 88, accessibilité 95, bonnes pratiques 77 et SEO 100, avec un LCP de 2,9 s, un CLS de 0,008 et un TBT de 0 ms. Sur ordinateur : performances 99, LCP de 0,9 s et CLS de 0,003. Sur mobile, la page d’accueil pèse 13,4 Mo pour 21 requêtes, à cause de la vidéo Full HD d’ouverture.

stoa est un concept, pas une commande. L’agence, ses équipes, ses projets, ses prix et ses adresses sont fictifs ; les photos et vidéos sont des images de banque sous licence, issues d’Unsplash et de Pexels. Le site n’a ni domaine, ni visiteurs, ni trafic de recherche, ni demandes : cette étude ne dit rien des positions, des contacts ou de l’usage qu’en feraient les clients d’une agence d’architecture.

Le score SEO de 100 dans Lighthouse ne couvre que les bases. Il manque encore les URL canoniques, Open Graph, JSON-LD, sitemap.xml et robots.txt ; 8 titres sur 9 sortent de la plage de 30 à 65 caractères ; et les chiffres Lighthouse sont des mesures de laboratoire d’une seule page, un seul jour, pas des données de vrais visiteurs.

Comment vérifier le portfolio d’une agence web →