Relevé
Le site produit d’un logiciel de chantier, dont l’interface est entièrement codée — nette à toutes les tailles.
- Prestations
- Développement front-end, Design d’interface, Accessibilité
- Service
- Développement front-end
- Technologies
- Astro, TypeScript, CSS moderne, ARIA
- Statut
- Étude — marque fictive, 2026 Pourquoi ?
Le brief
01 Le point de départ
Relevé est un logiciel fictif de comptes-rendus de chantier pour les entreprises du bâtiment. L’équipe produit a ses maquettes ; il lui faut un site capable de montrer le logiciel, de convaincre des conducteurs de travaux et de convertir en essai gratuit.
02 L’enjeu
Montrer un produit complexe sans captures floues ni vidéos lourdes, à une cible pressée, souvent sur mobile.
03 Notre réponse
L’interface reproduite en HTML et CSS, des onglets accessibles qui racontent le parcours, une tarification lisible en un clic.
04 Direction artistique
Une identité, pas un thème.
Un blanc net, un noir franc et un jaune de chantier comme unique accent. L’interface — tableau de bord, photos annotées, rapport, portail client — est reproduite en composants HTML et CSS pour rester nette, légère et animable.
- 01
Montrer, pas promettre
Chaque argument s’appuie sur un écran réel de l’application.
- 02
Trois temps, trois écrans
Terrain, bureau, client — des onglets accessibles au clavier racontent le parcours.
- 03
Un prix lisible
Mensuel ou annuel, la bascule met à jour les tarifs instantanément.
Blanc
#FFFFFF
Encre
#0B0D12
Jaune chantier
#FFD12B
Gris clair
#F5F6F8
Annotation
#FF5A3D
Le compte-rendu de chantier, en 3 minutes.
app.releve.fr/chantiers — 68 %
05 Le site
De haut en bas.
Onglets conformes au motif WAI-ARIA (flèches, Début, Fin), interface découpée en composants réutilisables, animations CSS coupées quand l’utilisateur réduit les mouvements.
06 Sur mobile
Pensé pour le pouce.
L’interface se recompose sur petit écran — la barre latérale disparaît, les photos passent sur deux colonnes, les onglets défilent horizontalement.
07 Détails
Là où se joue la différence.
— Ce que le projet démontre
En résumé.
- Une interface produit 100 % vectorielle, nette sur tous les écrans.
- Des composants réutilisables pour l’application et sa documentation.
- Un appel à l’essai gratuit présent à chaque étape du parcours.
Mesures
- Performance
- 99 / 100
- Accessibilité
- 100 / 100
- Affichage principal (LCP)
- 1,2 s
- Poids de la page
- 65 Ko
Mesuré le 27 septembre 2026 — Lighthouse 12, mobile simulé, build de production servi en local sans compression.
- Astro
- TypeScript
- CSS moderne
- ARIA