Étude de cas · Construction + direction artistique
Wasabi Web Design : le site que vous visitez
Le site de l’agence, dessiné page par page puis construit sur WordPress. Pas d’avant ni d’après ici : tout ce que dit cette étude de cas se vérifie sur le site où vous êtes, à commencer par cette page.
- Projet
- Le site de l’agence
- Prestation
- Construction + direction artistique
- Mise en ligne
- Octobre 2026
- Stack
- WordPress · Etch + ACSS
Cette page, mesurée à l’instant dans votre navigateur
- Affichage de cette page
- Mesuré à l’instant, dans votre navigateur
- Poids téléchargé
- Ce que votre navigateur a reçu pour l’afficher
- Requêtes vers d’autres sites
- Ni police, ni statistique, ni publicité venue d’ailleurs
- Cookies
- Aucun cookie déposé chez le visiteur
Lighthouse, page d’accueil, le 11 octobre 2026 : 99 en performance sur mobile, 100 sur ordinateur, 100 en accessibilité, bonnes pratiques et SEO. Ne me croyez pas sur parole : lancez le test de cette page sur PageSpeed Insights (nouvel onglet).
01 Point de départ
Le défi
Un site d’agence est une promesse : s’il est lent, confus ou truffé de traceurs, aucun argument ne rattrape la première impression. Celui-ci devait donc démontrer plutôt qu’affirmer : rapide sur un téléphone ordinaire, utilisable au clavier et au lecteur d’écran, sans mouchard, avec des prix écrits en clair et des études de cas qui donnent leurs chiffres.
- Une première impression jouée en quelques secondes
- Des promesses de vitesse que personne ne vérifie
- Des prix souvent cachés derrière un devis
02 Direction artistique « Une pointe de wasabi »
Une pointe de vert, juste où il faut.
Le wasabi se sert en petite quantité, et c’est lui qu’on remarque. Le site suit la même règle : une encre presque noire, un papier de riz, une typographie qui fait l’essentiel du travail, et le vert du logo, posé d’un coup de pinceau sous les mots qui comptent. Le vert ne décore pas : il montre le bouton, le mot à retenir, le chiffre à vérifier.
- Le vert vif jamais en texte sur fond clair
- Trois polices, servies par le site lui-même
- Chaque chiffre affiché se vérifie
La palette
- Wasabi
#12EC37Boutons, coup de pinceau, chiffres - Encre
#0C110DTexte, sections sombres - Papier de riz
#F4F3ECFond des pages - Papier gris
#E8E7DDSections en retrait - Vert lisible
#0A6B1FRepères en vert sur fond clair - Sauge
#9AA69CTexte secondaire sur l’encre
Les typographies
Bricolage Grotesque · Titres
Graisse 500 à 800 · taille optique 12 à 96
Instrument Sans · Texte
Graisse 400 à 700
JetBrains Mono · Mesures et étiquettes
Chasse fixe, comme un relevé de mesures
Le décodeur
Ici, chaque détail sert à prouver quelque chose. En petit, où le trouver sur le site ; en gros, ce qu’il montre.
Sur le site · Les titres Le coup de pinceau Un trait de vert sous les mots qui comptent, dessiné en vecteur : il s’étire sous le mot, quelle que soit sa longueur, et ne pèse presque rien. -
Sur le site · L’accueil La page qui se chronomètre Affichage, poids, requêtes, cookies : l’accueil mesure son propre chargement dans votre navigateur, puis vous propose de tester votre site. -
Sur le site · Les questions fréquentes Une question à la fois Ouvrir une question referme la précédente, sans que la page saute : on lit une réponse, pas un mur de texte. -
Sur le site · Les tarifs Les prix écrits en clair Quatre formules au mois, création comprise, l’engagement écrit en clair, et plus bas ce qui se commande à la carte. -
Sur le site · Le blog Les collages Une illustration par article, toutes dans le même style de collage, le sujet écrit en grand : le blog se reconnaît au premier coup d’œil. -
Sur le site · Les réalisations Chaque carte à ses couleurs Sur la page des réalisations, chaque étude de cas prend les couleurs et les polices du site qu’elle présente. -
Sur le site · Les articles L’offre au bon endroit Au milieu de chaque guide, l’offre qui répond à son sujet ; à la fin, qui l’a écrit et ce qu’il a déjà réalisé. -
Sur le site · La demande de devis Quatre parties, trois minutes Vous, votre projet, budget et délais, documents : le type de projet se choisit d’un clic, le budget en fourchettes. -
Sur le site · Le bas des pages L’invitation Un bandeau vert sur toute la largeur : demander un devis, écrire un message, et le visage de celui qui vous répond.
03 La visite
Visitez le site, page par page
Choisissez une page : elle s’affiche en entier, sur ordinateur et sur téléphone. Faites défiler chaque écran pour la parcourir.
Accueil. La promesse, les services, les réalisations, le test de vitesse de la page, la méthode, les formules et le blog.
Un service. Le site vitrine : ce qui est compris, WordPress ou site statique, un exemple chiffré, la FAQ et les guides du blog.
Tarifs. Quatre formules au mois, création comprise, l’engagement écrit en clair, et ce qui se commande à la carte.
Article. Un guide du blog : l’essentiel en tête, le sommaire, l’offre qui répond au sujet, puis l’auteur.
Devis. La demande de devis en quatre parties, le type de projet d’un clic, le budget en fourchettes.
04 Méthodologie
L’approche en 5 étapes
Maquette
127 pages dessinées en local, de l’accueil aux articles du blog, validées le 1er octobre 2026.
Mise en ligne
Construite sur WordPress dans la nuit du 1er au 2 octobre, référencement compris.
Vérification
Chaque page contrôlée sur téléphone et ordinateur : titres, contrastes, liens, décalages, vitesse.
Blog
Des guides qui répondent aux questions des clients, chacun relié à l’offre qui va avec.
Banc d’essai
Les nouveautés passent ici avant d’être proposées aux clients.
Prestations mobilisées
Ouvert à de nouveaux projets
Un site qui se vérifie, comme celui-ci ?
Parlez-moi de votre activité : je vous envoie sous 48 h un devis gratuit et des recommandations concrètes pour vous lancer.
SébastienFondateur de Wasabi Web Design, à Arras