Concept fictifArchitecture
Atelier Onze
Béton, lumière, rien de plus.
- Secteur
- Architecture
- Offre
- Express
- Durée
- 10 jours ouvrés
- Ville
- Lyon 7e, Gerland
Agence d’architecture de six personnes, spécialisée dans l’habitat et la réhabilitation de bâtiments agricoles et industriels. Onze projets livrés, du béton coulé en place à la pierre de récupération, toujours laissés bruts. Marque, textes et chiffres sont inventés : ce concept montre notre méthode, pas un client réel.
(01) Brief
Le point de départ.
- Contexte
- L’agence présentait son travail sur un portfolio en ligne générique, en grille de vignettes carrées, où ses photographies d’architecture perdaient leur cadrage. Elle candidatait à deux concours publics et voulait un site à la hauteur de ses dossiers.
- Objectif
- Montrer les projets en grand, dans leur cadrage d’origine, avec les informations qu’un maître d’ouvrage cherche : lieu, année, surface, matériau. Le site doit aussi servir de pièce jointe aux candidatures.
- Public
- Particuliers qui font construire, collectivités et maîtres d’ouvrage publics, jurys de concours et confrères. Une consultation sur grand écran au bureau, et sur téléphone pour montrer un projet à quelqu’un.
- Contraintes
- Dix jours pour être en ligne avant la date de dépôt d’un concours
- Photographies lourdes, en très haute définition, fournies par les photographes
- Aucune animation qui détourne l’attention des images
- Ajout d’un nouveau projet en autonomie, sans casser la numérotation
(02) Direction artistique
Une grille suisse posée sur du béton brut
« Douze colonnes visibles, une grotesque très fine, un index numéroté et une seule grande planche photographique : le site est construit comme les bâtiments de l’agence, avec peu de matériaux et des proportions justes. »
- Grille
- Béton
- Lumière rasante
- Index
- Retenue
- Échelle
(03) Palette
Des couleurs qui ont un rôle.
Béton clair
Fond, parcouru par les douze colonnes de la grille
- Contraste
- sur Graphite14,2:1 AAA
- sur Minium2,7:1 —
- sur Chaux1,2:1 —
Graphite
Texte, filets de l’index et de la règle, fond de la planche
- Contraste
- sur Béton clair14,2:1 AAA
- sur Minium5,2:1 AA
- sur Chaux17,5:1 AAA
Minium
Carré devant « Projets » et numéro du projet actif : deux occurrences seulement
- Contraste
- sur Béton clair2,7:1 —
- sur Graphite5,2:1 AA
- sur Chaux3,4:1 AA large
Chaux
Texte sur la photo et fond du bouton de la planche
- Contraste
- sur Béton clair1,2:1 —
- sur Graphite17,5:1 AAA
- sur Minium3,4:1 AA large
Valeurs en OKLCH, HEX calculé. Contraste WCAG 2.x pour du texte courant.
(04) Typographie
Les voix du site.
Titre, nom du projet, compteur, logotype
Switzer
200 (compteur), 280 (titre), 300 (nom du projet), 520 (mot accentué), 600 (logotype)
Béton, lumière, rien de plus.
Une seule famille variable, réglée graisse par graisse. Le titre en 280 avec un interlettrage de −6,5 % a la finesse d’un trait de plan, et seul « rien de plus » passe en 520, sans italique ni couleur.
Index des projets, coordonnées, surfaces, heure de Lyon, échelle
Geist Mono
400, capitales
011 · MAISON BRUT · LYON, 2026
Le registre d’un cartouche de plan : numéros, lieux et dates alignés en colonnes, que l’on parcourt comme un sommaire.
(05) Grille & mise en page
La structure sous l’image.
Douze colonnes matérialisées par des filets à 8 % d’opacité (quatre sur mobile). Le héros coupe la page à 35 % : texte et index à gauche, planche photographique sur le reste. Une règle graduée de 0 à 10 m en pied de page.
- 01La grille n’est pas cachée : elle est dessinée en fond, comme sur une planche à dessin, et tout s’aligne dessus.
- 02Une seule image à la fois, la plus grande possible, au cadrage voulu par le photographe et sans recadrage carré.
- 03Les informations de la planche sont posées dans ses coins (programme, coordonnées, compteur, surface, matériau), à la manière d’un cartouche.
- 04Sur mobile, la planche passe en premier et l’index s’efface : le titre et la photo suffisent pour montrer un projet en rendez-vous.
(06) Composants
Les pièces de l’interface.
- C.01
Index numéroté
Les cinq derniers projets en lignes fines : numéro, nom, lieu et année. Le projet affiché est en noir avec son numéro en minium, les autres restent en gris à 45 %.
- C.02
Planche projet
Photographie plein cadre avec, en haut, le programme, les coordonnées GPS et un compteur géant « 01/11 », et en bas le nom du projet, sa surface et son mode constructif.
- C.03
Règle graduée
Une échelle de 0 à 10 m dessinée en CSS, avec graduations fines et principales. Elle rappelle le métier et donne un pied de page qui ne ressemble à aucun autre.
- C.04
Heure de l’agence
« Lyon 06:42 » en mono dans la navigation, à côté du choix de langue : une agence réelle, dans une ville réelle.
- C.05
Bouton « Voir les projets »
Bloc couleur chaux à angles vifs, posé dans le coin de la photo, avec une flèche.
- C.06
Index complet
Sous la planche, les onze projets en tableau (numéro, nom, lieu, programme, surface, année) avec des filtres en pastilles. Au survol, la ligne se décale en minium et une vignette du projet suit le pointeur.
- C.07
Page projet
« Voir les projets » ouvre la planche en plein cadre : la photo s’agrandit jusqu’aux bords, le nom du projet monte en très grand corps et le cartouche se range en quatre colonnes au pied de l’image.
- C.08
Logotype et exposant
« Atelier Onze » en 600, suivi de « (11) » en exposant : le nom de l’agence et son nombre de projets livrés.
(07) Motion
Chaque mouvement a un rôle.
entrée
Ouverture de la planche
La photo se dévoile de gauche à droite par clip-path dès 20 ms (1,3 s, cubic-bezier(0.7, 0, 0.2, 1)) pendant qu’elle dézoome de 118 % à 100 % en 2,4 s, comme un volet qu’on ouvre sur la lumière.
entrée
Titre
Trois lignes qui sortent de leur masque à 40, 120 et 200 ms, 1,1 s en ease-out-expo cubic-bezier(0.16, 1, 0.3, 1).
lecture
Index
Les lignes du sommaire entrent par la gauche une à une, de 300 à 500 ms (50 ms d’écart), à la vitesse de l’œil qui les parcourt.
emphase
Cartouche
Les informations du haut de la planche apparaissent en fondu à 360 ms, puis le nom du projet et le bouton montent à 400 et 460 ms.
entrée
Règle
L’échelle s’étire de 0 à 10 m à partir de 400 ms (1,2 s) : c’est la dernière chose qui entre.
boucle
Visite simulée
Toutes les 12 s, le pointeur survole « Atelier », la page défile jusqu’à l’index complet (en-tête qui se resserre, planche en parallaxe), une vignette suit le pointeur de ligne en ligne et le compteur passe à 02, puis « Voir les projets » ouvre la planche en plein cadre sur la page du projet avant de la refermer. Un trait de lumière balaie lentement le béton.
(08) Choix expliqués
Ce qu’on a décidé, et pourquoi.
Choix 1 : Une seule boucle, au rythme d’une visite
Pas de bandeau qui défile ni de fond vivant : la seule animation continue est une visite lente de l’index, projet après projet. Le mouvement montre le travail, jamais l’agence ; pour un atelier qui défend la retenue, c’est la seule agitation permise.
Choix 2 : La grille visible
Montrer les douze colonnes, c’est montrer la méthode. Les jurys et confrères y lisent une rigueur de composition, et les particuliers une agence qui sait où chaque chose va.
Choix 3 : Une famille, cinq graisses
Plutôt que d’associer deux familles, on joue sur les graisses variables de Switzer, de 200 à 600. Le contraste naît de l’épaisseur du trait, comme dans un dessin d’architecte.
Choix 4 : Un orange réservé au repère
Le minium marque devant « Projets » et sur le numéro du projet affiché, et ne revient qu’au survol, sur la ligne ou le bouton pointés. Il indique où l’on est, sans décorer.
Choix 5 : Des photographies traitées comme des originaux
Les photos sont encodées en AVIF et WebP à plusieurs largeurs et la bonne taille est servie selon l’écran : une planche nette sur grand moniteur, sans télécharger 1 024 px sur un téléphone. Elles sont chargées en différé et décodées hors du fil principal.
Choix 6 : Le cartouche plutôt qu’une légende
Surface, mode constructif, coordonnées : ce sont les questions d’un maître d’ouvrage. Les placer sur la planche, comme sur un plan, évite d’ouvrir une fiche pour savoir de quoi il s’agit.
Choix 7 : Accessible par construction
Graphite sur béton clair dépasse largement le contraste AA. L’index est une liste navigable au clavier. Avec « réduire les animations », la page s’affiche directement dans son état final.
(09) Arborescence
6 pages, une intention chacune.
/ Atelier Onze
- AccueilLe dernier projet en grand et l’index des réalisations.
- ProjetsLes onze projets, numérotés, filtrables par programme : habitat, réhabilitation, équipement.
- Fiche projetPhotographies, plans, surface, budget indicatif, matériaux, équipe et photographe.
- AtelierL’équipe, la méthode, les engagements sur les matériaux et le réemploi.
- JournalChantiers en cours, concours, publications et prix.
- ContactAdresse à Gerland, formulaire de premier projet, références à joindre.
(10) Objectifs
Ce qu’on vise.
Objectifs visés — projet fictif, aucun chiffre mesuré
- Demandes de premier rendez-vous
- +25 %
- Objectif sur un an, auprès des particuliers qui font construire.
- Temps passé sur une fiche projet
- > 1 min 30
- Signe que les photographies et les plans sont réellement regardés.
- Consultations lors des concours
- 100 %
- Le site cité dans chaque dossier de candidature, avec un lien direct vers les projets de référence.
- Affichage de la première planche
- < 2 s
- Malgré des photographies en haute définition.