Concept fictifAgence immobilière
Cadastre
Des maisons qui ont un auteur.
- Secteur
- Agence immobilière
- Offre
- Studio
- Durée
- 5 semaines
- Ville
- Paris
Agence indépendante spécialisée dans les maisons et appartements signés par des architectes : villas des années 1960 à aujourd’hui, lofts, hôtels particuliers réhabilités. Onze négociateurs entre Paris, Lyon, Bordeaux et le Pays basque, une centaine de mandats par an, dont 70 % en exclusivité. 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
- Le site de Cadastre ressemblait à un portail d’annonces : grille de vignettes, filtres en cascade, bandeau « coup de cœur ». Rien ne disait que l’agence documente chaque bien comme une œuvre (architecte, année, plans d’origine), ce qui justifie pourtant ses honoraires et ses exclusivités.
- Objectif
- Faire de la page d’accueil la preuve du métier : montrer en un écran qu’on cherche un bien précis, qu’on lit un marché au mètre carré près et qu’on sait estimer une maison d’auteur. Et convertir les propriétaires vers l’estimation.
- Public
- Acheteurs de 35 à 60 ans au budget compris entre 1 et 4 M€, souvent cadres ou professions libérales, sensibles à l’architecture. Et surtout des vendeurs : propriétaires de maisons singulières qui craignent qu’une agence classique ne sache pas les valoriser.
- Contraintes
- Afficher prix, surface, prix au mètre carré et DPE dès la première lecture, comme l’exige l’affichage des annonces
- Photos fournies par les vendeurs, de qualité inégale : la mise en page doit les unifier
- Recherche utilisable en trois champs, sans écran de filtres
- Un appel à l’estimation visible en permanence, sans fenêtre surgissante
(02) Direction artistique
Le calque de l’architecte
« La page est un papier calque posé sur une table d’architecte : un plan se trace derrière le titre, les annonces se lisent comme un registre cadastral, et un seul trait de surligneur désigne ce qui compte. »
- Plan
- Registre
- Didone
- Surligneur
- Exactitude
(03) Palette
Des couleurs qui ont un rôle.
Calque
Fond papier, trame millimétrée à 5 % d’encre, texte du bouton « Voir les biens »
- Contraste
- sur Encre de Prusse14,1:1 AAA
- sur Surligneur1,2:1 —
- sur Fiche1,0:1 —
- sur Vert DPE2,1:1 —
Encre de Prusse
Texte, traits du plan (13 %), bouton de recherche, pastille « Vendu », repère actif de la carte
- Contraste
- sur Calque14,1:1 AAA
- sur Surligneur11,9:1 AAA
- sur Fiche14,7:1 AAA
- sur Vert DPE6,8:1 AA
Surligneur
Bouton « Estimer mon bien », trait sous « auteur », parcelle sélectionnée, étiquettes « Exclusivité » et « Nouveau ». Toujours sous de l’encre, jamais en texte
- Contraste
- sur Calque1,2:1 —
- sur Encre de Prusse11,9:1 AAA
- sur Fiche1,2:1 —
- sur Vert DPE1,7:1 —
Fiche
Fond de la barre de recherche et de la fiche du bien, un ton plus clair que le calque
- Contraste
- sur Calque1,0:1 —
- sur Encre de Prusse14,7:1 AAA
- sur Surligneur1,2:1 —
- sur Vert DPE2,1:1 —
Vert DPE
Étiquette énergétique « B » en flèche, couleur réglementaire de la classe
- Contraste
- sur Calque2,1:1 —
- sur Encre de Prusse6,8:1 AA
- sur Surligneur1,7:1 —
- sur Fiche2,1:1 —
Valeurs en OKLCH, HEX calculé. Contraste WCAG 2.x pour du texte courant.
(04) Typographie
Les voix du site.
Titre, logotype en capitales espacées, noms des biens, intitulés du registre
Bodoni Moda
400 et 400 italique pour le titre, 500 pour le logotype et le registre, axe optique automatique
Villa Ondine
Une didone à fort contraste, comme les cartouches des plans anciens et les catalogues de vente. L’axe de taille optique affine les déliés en très grand corps et les renforce dans les petits titres du registre. Interlettrage à −3,5 % sur le titre.
Navigation, champs de recherche, prix
Switzer
400 et 500, 600 pour les montants
2 480 000 €
Une grotesque neutre pour l’information utile. Les prix sont en chiffres tabulaires afin que la colonne du registre reste alignée à la virgule.
Cotes, références, adresses, prix au mètre carré, étiquettes de statut
Geist Mono
400, capitales
RÉF. CD-0412 · 14,20 M
La chasse fixe rappelle les annotations d’un plan coté et sépare les données techniques du récit. Le lecteur sait d’instinct ce qui est mesuré et ce qui est raconté.
(05) Grille & mise en page
La structure sous l’image.
Deux colonnes 1,12 / 0,88 sur une trame millimétrée de 4 % de la largeur. À gauche le titre, la recherche et le registre ; à droite la photographie cotée, la carte et la fiche du bien.
- 01La carte du cadastre déborde de la photo sur la colonne de texte : le seul élément qui franchit la gouttière, pour lier la recherche au lieu.
- 02Le registre aligne cinq colonnes fixes (vignette, bien, prix, prix au m², statut) : on compare trois biens d’un coup d’œil, sans cartes.
- 03Une photographie est insérée dans le titre, entre « Des maisons » et « qui ont » : la promesse et la preuve se lisent sur la même ligne.
- 04Une cote « 14,20 m » au-dessus de la photo donne l’échelle, comme sur un plan.
- 05Sur mobile, le titre, une recherche réduite à deux éléments (lieu et bouton) et la photo occupent l’écran, la fiche du bien se pose sur l’image et le bouton d’estimation reste dans la barre de navigation.
(06) Composants
Les pièces de l’interface.
- C.01
Recherche en trois champs
Onglets Acheter / Louer / Vendre empilés, puis Où, Type et Budget, et un bouton encre « Voir 38 biens » dont le nombre se met à jour avec les critères.
- C.02
Registre des biens
Trois dernières entrées en lignes fines : vignette, type en didone, adresse et surface en mono, prix, prix au m², statut. « Nouveau » en surligneur, « Sous offre » en contour, « Vendu » en encre avec le prix barré.
- C.03
Carte cadastrale
Extrait de section au 1:2 000 : parcelles tracées, une route, cinq repères. La parcelle du bien est surlignée et son repère porte le prix « 2,48 M€ ».
- C.04
Fiche du bien
Verre papier sur la photo : commune, étiquette DPE en flèche, nom en didone avec italique, pièces, surface, terrain, prix et prix au m².
- C.05
Cote et référence
Ligne de cote avec ses taquets au-dessus de la photo, étiquette « Exclusivité » et référence du mandat en haut à droite.
- C.06
Bouton « Estimer mon bien »
Aplat surligneur dans la navigation, sur ordinateur comme sur mobile : c’est la conversion prioritaire, celle des vendeurs.
(07) Motion
Chaque mouvement a un rôle.
entrée
Plan tracé
Quatre groupes de traits (murs, cloisons, portes, cotes) se dessinent en 1,8 s, cubic-bezier(0.7, 0, 0.2, 1), à 60, 200, 340 et 440 ms. Ils restent à 13 % d’encre : une présence, pas un décor.
entrée
Titre et photo insérée
Les trois lignes montent hors de leur masque à 0, 80 et 160 ms ; la pastille photo s’ouvre de gauche à droite à 260 ms pendant que l’image dézoome.
emphase
Trait de surligneur
Le trait sous « auteur » s’étire de 0 à 100 % en 0,8 s à partir de 520 ms, une fois le titre posé : le geste du négociateur qui annote un dossier.
emphase
Compteur de biens
« Voir 38 biens » compte de 0 à 38 en 1,1 s (propriété CSS @property entière, sans JavaScript) à partir de 420 ms.
transition
Photo, carte, fiche
La photo se dévoile de bas en haut à 120 ms, la carte glisse depuis la gauche à 380 ms, ses repères apparaissent un par un toutes les 60 ms à partir de 480 ms, et la fiche arrive par la droite à 460 ms : tout est en place en 1,2 s.
boucle
Repère actif
Le repère de la parcelle sélectionnée pulse toutes les 1,6 s, les autres repères émettent une onde discrète à tour de rôle toutes les 2,8 s : le regard revient au bien en cours.
boucle
Visite simulée
En boucle de 13 s, un curseur ouvre le menu « Biens d’auteur », clique « Estimer mon bien » : la barre de recherche devient l’estimation sur place (adresse tapée, fourchette révélée), puis la page défile jusqu’à la sélection du mois, survole un bien et remonte, l’en-tête compact glissant en haut.
(08) Choix expliqués
Ce qu’on a décidé, et pourquoi.
Choix 1 : Un registre plutôt qu’une grille de vignettes
La grille d’annonces est le langage des portails. Une liste typographique avec prix et prix au mètre carré alignés montre que l’agence lit un marché, pas un catalogue, et elle se compare plus vite.
Choix 2 : Le prix au mètre carré à côté du prix
C’est le premier calcul que fait tout acheteur. L’afficher, c’est assumer la transparence, et c’est le meilleur argument pour un vendeur qui veut savoir où se situe son bien.
Choix 3 : Une didone, pas une grotesque de luxe
Le haut de gamme immobilier s’habille presque toujours d’une linéale fine en capitales. La didone à axe optique évoque les plans gravés et les catalogues d’art : on vend des maisons d’auteur, la typographie doit en avoir un aussi.
Choix 4 : Un seul accent, le surligneur
Le vert-jaune n’apparaît que là où l’on agit ou décide : estimer, nouveauté, exclusivité, parcelle choisie. Sur papier calque et encre bleue, il attire l’œil sans jamais porter de texte, donc sans problème de contraste.
Choix 5 : Unifier des photos inégales
Les photos viennent des vendeurs. Désaturation légère, voile d’encre en multiplication et cadrage fixe les ramènent dans la même lumière, et l’annonce reste fidèle au bien.
Choix 6 : Le DPE dans la fiche, pas en note de bas de page
L’étiquette énergétique est obligatoire et devient un critère d’achat. En flèche colorée à côté du nom, elle rassure dès la première lecture au lieu d’être découverte en visite.
Choix 7 : Le vendeur d’abord
Les acheteurs trouvent les biens sur les portails ; les mandats, eux, se gagnent sur le site de l’agence. D’où « Estimer mon bien » en aplat dans la navigation, et une recherche qui sert surtout à prouver la qualité du portefeuille.
Choix 8 : Animation réductible
Avec « réduire les animations », le plan est déjà tracé, le compteur affiche 38, le trait est posé et le repère ne pulse plus. Tout le contenu reste du texte réel, lisible par les lecteurs d’écran.
(09) Arborescence
8 pages, une intention chacune.
/ Cadastre
- AccueilChercher un bien, lire le marché d’un coup d’œil, et pour les propriétaires, demander une estimation.
- AcheterRegistre complet filtrable, avec bascule entre liste et carte cadastrale.
- Fiche bienRécit de la maison : architecte, année, plans d’origine, photos, DPE, prix au m² comparé au quartier, demande de visite.
- VendreMéthode de l’agence, honoraires, exemples de biens vendus avec délai et écart au prix affiché.
- Estimer mon bienFormulaire en quatre étapes (adresse, surface, architecte connu, photos), rappel d’un négociateur sous 48 h.
- Biens d’auteurIndex des maisons vendues classées par architecte, utile au référencement comme à la réputation.
- JournalChroniques d’architecture et notes de marché par ville, publiées chaque mois.
- L’agenceLes onze négociateurs, les quatre bureaux, les engagements.
(10) Objectifs
Ce qu’on vise.
Objectifs visés — projet fictif, aucun chiffre mesuré
- Demandes d’estimation
- +40 %
- Objectif à six mois, mesuré sur le parcours « Estimer mon bien » terminé.
- Part des mandats exclusifs
- > 75 %
- Le site doit convaincre les vendeurs avant le premier rendez-vous.
- Recherches lancées depuis l’accueil
- ×1,5
- Trois champs au lieu d’un écran de filtres.
- LCP sur mobile
- < 2,2 s
- Titre en texte, photo en AVIF de 28 Ko, plan en SVG inline.