Nous avons bâti notre site comme nous bâtirions le vôtre.

Un studio qui vend des sites web sur mesure ne peut pas avoir un site qui ressemble à un modèle. Le nôtre devait en être la preuve.

Nous avons commencé par les questions que nous posons à chaque client. Pour qui est-ce? Des propriétaires exploitants au Canada et aux États-Unis qui ne savent pas quelle techno leur convient. De quoi ont-ils besoin? De réponses claires et de vrais prix, sans le langage d’agence. Que devraient-ils faire ensuite? Réserver un appel gratuit de 30 minutes.

Et une règle dès le départ : s’il ressemble à tous les autres sites générés par l’IA, c’est raté.

01 · Partir d’un lieu, pas d’une tendance

Nous avons dessiné quelques concepts de design et testé chacun avec une question simple : pourrait-il appartenir à n’importe quel studio, n’importe où? La plupart, oui. Un seul, non. Il s’inspirait de Montréal même : les maisons en rangée en pierre calcaire, les toits de cuivre devenus verts, les escaliers extérieurs en colimaçon du Plateau. Il a l’air haut de gamme sans avoir l’air d’un modèle, et il dit aux gens où nous sommes avant même qu’ils lisent un mot.

Nous avons aussi noté ce que nous éviterions, parce que les choix par défaut sont partout : crème et terre cuite, presque noir avec du néon, taches de dégradé, grilles de cartes identiques, un mot surligné dans chaque titre.

02 · Des images que personne d’autre n’a

Pas de photos de banque d’images. Nous avons choisi la gravure sur cuivre avec un léger lavis vert-de-gris : intemporelle, un peu inattendue, et un clin d’œil à ces toits de cuivre. Le style des gravures varie d’une image à l’autre, alors nous avons fait l’image de la page d’accueil en premier et l’avons utilisée comme référence pour les onze autres. Chacune a été vérifiée pour la couleur, le contraste avec le texte à côté et les marques parasites avant d’aller sur une page.

03 · Des caractères qu’on peut vraiment lire

Notre premier choix pour les titres était un empattement élégant à fort contraste. Sur téléphone, il était difficile à lire, alors nous l’avons changé. Gloock garde le même côté classique et se lie à notre logo, et Instrument Sans garde le texte courant net. Les petits textes ne descendent jamais sous 15 px. Une belle typo difficile à lire n’est que de la décoration.

04 · Un grand moment, pas vingt

Beaucoup de sites animent tout : des sections qui apparaissent en fondu, des arrière-plans qui glissent, un défilement qui semble glissant. Nous avons tout écarté et posé une meilleure question : si la page d’accueil n’a droit qu’à un moment, que devrait-il montrer?

La réponse, c’était le travail lui-même. La liste de tâches d’un propriétaire est posée sur un bloc-notes, et à mesure que vous faites défiler, un trait d’encre barre chaque tâche : réponse à la soumission envoyée, rappel de facture parti, mieux classé sur Google, article publié. Il reste une tâche : rappeler Mme Tremblay. C’est le travail que nous vous enlevons des mains, montré plutôt que décrit. Nous l’appelons « La journée réglée ».

Ensuite, nous avons réglé les détails. L’encre suit votre défilement, sans saccades ni défilement détourné. Si votre appareil demande moins de mouvement, vous voyez la liste terminée et rien ne bouge. Et la liste est du vrai texte, donc les lecteurs d’écran la lisent comme n’importe quelle autre liste.

05 · Un système, pour rester cohérent

Avant de bâtir les pages, nous avons écrit les règles : couleurs, tailles de texte, espacements, coins, boutons, formulaires, durée des animations. Chaque couleur de texte et de bouton respecte le contraste WCAG AA. Les boutons font au moins 48 px de haut pour être faciles à toucher. Des filets fins plutôt que des ombres de cartes. Chaque page suit les mêmes règles, donc le site a la même allure à sa cinquantième page qu’à sa première.

06 · Choisir la techno pour le travail, pas pour la mode

Le site d’une PME devrait être rapide, peu coûteux à faire fonctionner et facile à entretenir. Nous avons donc choisi des outils qui font une chose et la font bien. Astro bâtit des pages qui se chargent presque instantanément. Cloudflare les sert au plus près de chaque visiteur. Les réservations passent par Cal.com, les formulaires par Formspree, l’infolettre par Kit. Le code d’animation lourd ne se charge que près de la seule section qui l’utilise. La plupart de ces outils ne coûtent rien tant qu’on n’en a pas besoin.

07 · Bâti à l’interne

Notre équipe principale a conçu et bâti le site du début à la fin, avec un développement assisté par l’IA pour avancer vite sans tourner les coins ronds. C’est comme ça que nous gardons les projets rapides et les coûts raisonnables. Quand un projet demande plus de bras ou un spécialiste, nous faisons appel à des développeurs d’expérience en qui nous avons confiance.

• Un look montréalais : douze gravures originales, un logo sur mesure et une palette tirée de la pierre calcaire, de l’ardoise, du vert-de-gris et du laiton.
• Un système de design : un ensemble de règles documentées derrière chaque page, toutes les paires de couleurs conformes à WCAG AA.
• « La journée réglée » : un bloc-notes dessiné au défilement qui montre ce que nous faisons en un seul moment, avec une version calme pour le mouvement réduit.
• Rapide et accessible : bâti selon WCAG 2.2 AA, avec des contours de focus visibles, une utilisation complète au clavier, aucun clignotement, aucune lecture automatique, et des formulaires qui expliquent comment corriger une erreur juste à côté du champ. La page d’accueil livre très peu de JavaScript.
• Bâti pour être trouvé : chaque page lisible par Google et la recherche IA, une expression de recherche par page, des données structurées sur qui nous sommes et ce que coûte chaque forfait, ainsi qu’un fichier llms.txt et des tarifs en texte brut pour que les assistants IA citent nos prix correctement.
• Les prix dans votre devise : les visiteurs au Canada voient des dollars canadiens, tous les autres des dollars américains, avec un bouton pour changer.
• Prêt pour d’autres langues : bâti pour que des pages traduites puissent être ajoutées sans rebâtir le site.
• Un assistant qui répond et prend les rendez-vous : il ne parle que de Codify, répond aux questions sur les forfaits et les services, demande au visiteur ce dont il a besoin, rédige un court plan de projet et offre un lien pour réserver un appel. Chaque conversation coûte environ deux à trois cents. Chaque client potentiel arrive dans un tableur avec une note sur son degré de préparation, pour que l’appel commence là où la conversation s’est arrêtée. C’est le genre d’assistant que nous bâtissons pour nos clients, alors les visiteurs peuvent en essayer un avant d’en acheter un.

1. Capture d’écran à venir

2. Capture d’écran à venir

3. Capture d’écran à venir

4. Capture d’écran à venir

5. Capture d’écran à venir

6. Capture d’écran à venir

7. Capture d’écran à venir

• Astro
• Cloudflare Pages
• Cloudflare Workers
• Claude Haiku (assistant de clavardage)
• GSAP + ScrollTrigger (une section)
• Cal.com
• Formspree
• Google Sheets
• Kit (infolettre)