Vue d'ensemble
Travailler pour soi est l'exercice où l'on triche le plus facilement, parce qu'aucun client ne demande de comptes. Nous avons donc remplacé le client par la mesure : chaque décision de ce projet a été tranchée sur un chiffre, et chacun de ces chiffres est vérifiable depuis votre propre navigateur. C'est la seule étude de cas de cette vitrine que vous pouvez contrôler sans nous croire sur parole.
Le projet
Concevoir le site du studio et l'identité qu'il porte, avec la méthode et le niveau d'exigence appliqués aux projets clients. Livré en avril 2026, repris en septembre.
Le défi
Pas de brief pour cadrer, pas de commanditaire pour arbitrer. Sans juge extérieur, un projet mené pour soi dérive vers le confortable ou ne sort jamais.
La méthode
Remplacer l'arbitrage client par la mesure. Une décision n'est retenue que si l'on peut dire ce qu'elle coûte, ce qu'elle rapporte, et sur quel chiffre elle repose.
Le résultat
Une page qui passe de 6,5 à 1,49 seconde, un poids divisé par deux, aucun tiers dans l'onglet réseau, et un logotype dessiné plutôt que composé.
Le signe
Notre logotype oppose un romain, « Artdan », à quatre lettres inclinées, « tech ». Jusqu'en septembre 2026, ces quatre lettres penchaient à +10°, c'est-à-dire du même côté que tous les italiques du marché. Le geste ne disait rien. Elles penchent désormais à −12°, vers « Artdan », donc vers l'art.
C'est le seul endroit de notre identité où notre position s'écrit sans être dite : depuis les premiers italiques vénitiens, une lettre penchée va vers l'avant, dans le sens de la lecture. La nôtre revient en arrière, vers ce qui la précède.
Pourquoi dessiner plutôt qu'incliner. Aucune police ne propose de contre-italique. La solution évidente consiste à cisailler l'italique existant, ce qui prend trois secondes. Comme il penche déjà à +10°, atteindre −12° demande un cisaillement de 22°. À cette valeur, le caractère perd 14 % de son plein, parce que le cisaillement conserve l'épaisseur horizontale mais réduit l'épaisseur perpendiculaire, la seule que l'œil mesure. L'axe de contraste, lui, passe de 2° à 24° : les jonctions s'écrasent d'un côté pendant qu'elles s'ouvrent de l'autre. Votre lecteur n'a pas les mots pour nommer ce défaut. Il lit une maladresse quand même.
Les arbitrages.
- −12° plutôt que −8°. À huit degrés, l'inversion n'est perceptible que d'un œil exercé, ce qui revient à payer le prix d'une décision sans en toucher le bénéfice. Douze degrés est le premier angle qui se voit sans se commenter.
- Redessiné plutôt que transformé. Squelette tracé en courbes de Bézier point par point, plume elliptique mesurée sur le Cormorant Garamond Italic réel, graisses calculées perpendiculairement à l'axe incliné et non horizontalement, jonctions reprises une par une.
- Attaques et sorties maintenues vers la droite. C'est le détail qui décide de tout : les fûts penchent en arrière, la plume avance. C'est la signature d'un contre-italique dessiné plutôt que penché. Sans lui, le mot semble reculer.
- Approches mesurées plutôt qu'estimées. La contre-inclinaison change entièrement les blancs entre les lettres. Les premiers essais donnaient 96, 162 puis 189 unités entre les quatre lettres, un déséquilibre visible sans être explicable. Les blancs ont été recalculés à surface égale et ramenés à 168 partout, calibrés sur ceux du mot « Artdan ».
Ce que cette décision nous coûte. Ce contre-italique ne se compose dans aucune police. Chaque nouveau format devra être redessiné plutôt que tapé, et un collaborateur futur ne pourra pas le reproduire au clavier. Nous l'avons accepté parce qu'un signe qu'on ne peut pas taper est un signe que personne ne peut copier.
Le même signe partout
Un logotype ne se juge pas dans un fichier vectoriel affiché en grand. Il se juge à l'endroit où il est le plus contraint. Le nôtre devait tenir d'une bannière de 1584 pixels à un favicon de 16, sur ivoire, sur noir, en or, et à 0,127 millimètre d'épaisseur sur du papier.
La bannière LinkedIn, et l'erreur que nous avons faite. La première version reprenait fidèlement la géométrie de nos supports imprimés. Elle était illisible. LinkedIn n'affiche jamais le fichier à sa taille : un visuel de 1584 pixels est rendu à 1128 sur bureau, 880 en affichage réduit et 390 sur mobile, soit des facteurs de réduction de 1,40, 1,80 et 4,06. Une baseline dimensionnée pour du papier disparaît au troisième. Nous avons mesuré les trois facteurs, puis redimensionné le bloc de texte sur le plus défavorable. C'est la seule étape du projet où nous avons livré une première version fausse.
Le système d'icônes. Moins il y a de place, moins il y a de lettres. En dessous de 64 pixels, le signe se réduit au A ivoire seul : son rapport de contraste sur fond noir est de 17,44:1, contre 6,27:1 pour l'or, et à cette taille la lisibilité prime sur la couleur de marque. Au-dessus de 180 pixels, le monogramme bichrome « At » redevient possible, dessiné dans une graisse plus ouverte pour que le contre-italique ne se bouche pas.
Les deux ors. #B8893F pour l'impression et les fonds clairs, #D8A34B pour l'écran sombre. Ce n'est pas une inconstance : un or qui tient sur papier s'éteint sur du zinc-950, et un or qui brille à l'écran vire au jaune en quadrichromie. Deux surfaces, deux problèmes de couleur, deux valeurs.
Le papier. Sur la carte de visite, le trait le plus fin du logotype mesure 0,127 millimètre, pour un minimum d'impression offset de 0,1. La marge est de vingt-sept pour cent, mesurée avant l'envoi du fichier plutôt que découverte au BAT.
Le problème
Concevoir son propre site est le projet le plus exigeant qui soit. Aucun brief ne pose de limites, aucune échéance extérieure ne force les arbitrages. Le perfectionnisme devient un piège, et le résultat risque soit d'être trop sage, soit de ne jamais paraître.
Deux pièges classiques étaient à éviter :
- Le site décoratif : beau mais creux. Des captures d'écran, des logos, aucune narration. Le visiteur admire, mais ne comprend ni votre méthode ni pourquoi vous choisir.
- Le site utilitaire : fonctionnel mais sans voix. Du texte, des liens, aucune personnalité. Le visiteur retient que vous êtes compétent, sans retenir ce qui vous distingue.
L'enjeu était de tenir une ligne plus difficile : sobre et mémorable, éditorial et concis, rapide et soigné.
Surtout, un site qui prouve ce qu'il vend. Si nous promettons des sites rapides, le nôtre doit l'être et le chiffre doit être public. Si nous promettons de la clarté, chaque page doit la démontrer plutôt que l'annoncer.
Notre approche
Ce projet a suivi le même processus que nos missions clientes.
1. Clarifier avant de dessiner
Avant la première maquette, les fondations stratégiques : positionnement, architecture des pages, parcours de conversion. Qu'est-ce qui nous distingue, pour qui travaillons-nous, comment un visiteur passe-t-il de la découverte à la prise de contact.
2. Structurer le contenu comme un outil de vente
Le contenu n'est pas venu après le design, il a été pensé en même temps. Sur un site de services, c'est le contenu qui vend.
- Études de cas structurées en narration : problème, méthode, résultat
- Pages services orientées bénéfices plutôt que fonctionnalités
- FAQ conçue pour lever les doutes avant qu'ils ne freinent le contact
3. Concevoir un système, pas des pages
- Composants MDX dédiés aux études de cas (SectionIntro, ResultsGrid, BeforeAfterTable, CaseStudyNote)
- Système typographique et chromatique unique sur tout le site
- Design responsive vérifié du bureau au mobile
4. Développer avec les standards les plus exigeants
- Next.js en génération statique
- MDX pour un contenu riche et éditable
- Tailwind CSS pour un système de design maintenable
- Polices auto-hébergées, aucun appel vers un fournisseur tiers
- API serverless pour le formulaire de contact
- CI/CD sur Vercel, déploiement en un commit
5. Intégrer SEO et accessibilité dès le départ
Pas en fin de projet, pas en phase d'optimisation. Dès la première ligne :
- Structure sémantique HTML5 complète
- Métadonnées et Open Graph par page, JSON-LD Organization et LocalBusiness
- Contrastes, navigation clavier, landmarks et textes alternatifs vérifiés
- Core Web Vitals suivis
6. Mesurer et corriger
Le site n'est pas un livrable figé. La reprise de septembre 2026 en est la démonstration : cinq mois après la mise en ligne, une mesure a montré que le site ne respectait pas une phrase que nous nous apprêtions à publier. Nous avons changé le site plutôt que la phrase.
Ce que nous avons retiré
En septembre 2026, la préparation d'un article sur les sous-traitants ultérieurs nous a conduits à ouvrir l'onglet réseau de notre propre site. Il chargeait Google Tag Manager et Google Analytics 4. Le conteneur pesait 382 kilo-octets et bloquait le fil d'exécution. Nous avions un bandeau cookies pour le déclarer, ce qui rendait la mesure défendable sans la rendre légère.
Nous ne présentons pas ce choix comme validé par une autorité : Vercel n'a publié aucune auto-évaluation dans le dispositif d'exemption de la CNIL, contrairement à Matomo. Nous le présentons pour ce qu'il est, un mécanisme vérifiable. Si une chaîne strictement européenne devenait un impératif, la réponse serait Matomo auto-hébergé, et nous le dirions ici.
Notre politique de confidentialité nomme les cinq sous-traitants dans l'ordre du trajet de la donnée, et signale les trois transferts hors Union européenne qui subsistent. Nous préférons une liste exacte à une formule rassurante.
Stack technique
- Next.js (App Router, génération statique)
- React
- MDX pour le contenu éditorialisé
- Tailwind CSS
- Polices auto-hébergées, aucun appel distant
- Optimisation d'images automatique
- API serverless pour le formulaire de contact
- Vercel Web Analytics, en première partie et sans cookie
- CI/CD Vercel
Le résultat
Ce site est la démonstration la plus concrète de ce que nous proposons. Non parce que nous l'affirmons, mais parce que tout ce qui précède se vérifie en quelques secondes depuis la page que vous lisez.
- Une page qui s'affiche en 1,49 seconde, contre 6,5 auparavant
- 34 requêtes et 1,21 Mo, toutes portant le domaine www.artdantech.fr
- Aucune ressource tierce : ni police distante, ni carte intégrée, ni lecteur vidéo, ni outil de mesure externe
- Aucun bandeau cookies, parce qu'il n'y a rien à faire accepter
- Un logotype dessiné, décliné et mesuré sur chaque support où il apparaît
- Un contenu éditable en quelques minutes, sans développeur
- Un SEO et une accessibilité intégrés dès la conception, pas ajoutés ensuite
Vérifiez-le. Ouvrez les outils de développement de votre navigateur, onglet réseau, et rechargez cette page. Toutes les requêtes portent notre domaine. C'est une phrase que nous avons dû retirer d'un article en août, parce qu'elle était fausse, et que nous avons pu rétablir le 2 septembre après avoir changé le site.
Ce que ce projet révèle
Un studio qui vend de l'exigence doit accepter d'être mesuré à la sienne. Ce projet contient une bannière ratée au premier essai, cinq mois de mesure d'audience que nous avons fini par retirer, et une phrase publiée qu'il a fallu corriger. Il contient aussi les chiffres qui montrent ce que ces corrections ont donné. C'est cette combinaison, et non l'absence d'erreur, qui vous indique ce que vous pouvez attendre d'un projet mené avec nous.
Vous parcourez notre travail depuis quelques minutes. Vous avez vu où nous mesurons, où nous nous sommes trompés, et ce que nous avons fait ensuite. Si c'est le standard que vous cherchez pour votre propre projet, parlons-en.