Un design est un instantané. Un site est un système.
Vos écrans montrent le meilleur moment de l'interface. Le travail d'intégration consiste à traiter tous les autres, et il commence par les nommer.
Les états
Une maquette montre le bouton au repos. Il lui faut aussi un survol, un focus clavier, un état désactivé, un état de chargement, et l'écran quand la liste est vide.
Le responsive réel
Vous avez dessiné le 1440 et le 390. Le site vit à toutes les largeurs intermédiaires, et c'est entre les deux que les grilles cassent.
Les vrais contenus
En maquette, le titre fait deux mots et la photo est parfaite. En production, le titre en fait douze, l'image est verticale, et le nom de client déborde.
L'accessibilité
Contrastes réels, navigation au clavier, ordre de lecture, libellés de champs. Le RGAA ne se dessine pas, il se code, et il se vérifie.
La performance
Une maquette ne pèse rien. Une page si : polices, images, animations, scripts. Un design magnifique qui met quatre secondes à s'afficher ne convertit pas.
Le back-office
Qui changera ce texte dans six mois, et sans nous appeler ? Chaque bloc dessiné doit devenir un champ modifiable, ou une décision assumée de ne pas l'être.
On ne réinterprète pas votre design. On le rend habitable.
Rien n'abîme plus vite un beau design qu'une intégration approximative : un espacement arrondi ici, une nuance de gris rapprochée là, une police de remplacement parce que la vôtre était longue à charger. Bout à bout, le site ne ressemble plus à la maquette, et personne ne sait dire où ça a dérapé.
Nous commençons donc par lire vos maquettes comme un système : combien de couleurs réellement distinctes, combien de tailles de texte, combien de composants qui n'en sont qu'un seul déguisé. Ce système devient des variables et des composants dans le code. Ensuite seulement, on monte les écrans. C'est ce qui rend l'intégration fidèle, et c'est aussi ce qui rend la page suivante deux fois moins chère.
- Vos intentions sont des contraintes : grille, typographie, couleurs et espacements sont relevés dans vos fichiers, pas approchés à l'œil.
- Les écarts sont écrits : quand une contrainte technique impose un compromis, il est documenté et validé, jamais subi.
- Les manques sont proposés : états, largeurs intermédiaires, cas d'erreur : nous les dessinons dans votre langage visuel et vous les validez.
Quatre niveaux d'intervention
De la simple intégration d'un écran à la mise en production complète, back-office et hébergement compris.
Intégration fidèle
Vos écrans codés au pixel près, en HTML, CSS et React ou WordPress selon le projet. Ce qui n'est pas dans la maquette vous est proposé, jamais improvisé en silence.
Design system et composants
Vos couleurs, espacements, typographies et composants extraits en variables réutilisables. Le dixième écran coûte alors bien moins cher que le premier.
Contenus modifiables
Le design branché sur un back-office : vos textes, images, articles et pages se modifient sans toucher au code, et sans casser la mise en page.
Accessibilité, performance, SEO
Contrastes et navigation clavier vérifiés, images optimisées, balisage sémantique, Core Web Vitals surveillés. Le design reste, la dette technique n'arrive pas.
De la maquette au site, en quatre temps
La revue de maquettes précède toujours le devis : c'est elle qui rend le prix ferme, et qui évite les surprises des deux côtés.
Revue de maquettes
On ouvre vos fichiers et on liste, écran par écran, ce qui manque : états, largeurs, contenus longs, cas d'erreur. Livrable : cette liste, et un devis qui la chiffre.
Fondations
Extraction des couleurs, espacements et typographies en variables. Les composants récurrents sont codés une fois, puis réutilisés partout.
Intégration et recette
Les écrans sont montés, puis testés avec vos vrais textes et vos vraies images, sur des vraies tailles d'écran, au clavier comme à la souris.
Mise en ligne
Hébergement, back-office, formation, mesure. Vous repartez avec le code, les accès, et de quoi faire évoluer le site sans nous.
Nous partons de ce que vous avez
Un fichier Figma nous fait gagner du temps. Un PDF, un Canva ou un export d'IA fonctionnent aussi, et le devis en tient compte.
Outils de design
- Figma
- Sketch
- Penpot
- Adobe XD
Fichiers plats
- Illustrator, Photoshop
- PNG, JPG
- InDesign
Sans outil professionnel
- Canva
- PowerPoint, Keynote
- Google Slides
- Un croquis papier photographié
Maquettes générées par IA
- Figma Make
- Uizard, Galileo
- v0 (Vercel)
- Midjourney, exports d'images
Ce que vous récupérez à la fin
Une intégration réussie ne se juge pas le jour de la livraison, quand tout est neuf et que les contenus sont ceux de la maquette. Elle se juge six mois plus tard, quand vos textes ont doublé, qu'une page s'est ajoutée, et que le design tient toujours.
- Un site fidèle à vos maquettes : et une liste écrite, validée avec vous, des endroits où nous nous en sommes écartés et pourquoi.
- Vos composants, réutilisables : vos boutons, cartes et formulaires codés une fois, cohérents partout, prêts pour les pages suivantes.
- Le code source : sur votre dépôt Git, à votre nom, documenté. Vos fichiers de design restent votre propriété, évidemment.
- Un back-office : pour changer un texte, une photo, ajouter un article, sans nous solliciter ni risquer de casser la page.
- Des vérifications, pas des promesses : contrastes mesurés, navigation clavier testée, poids des pages relevé, sur chaque écran livré.
Vous êtes graphiste, studio ou agence de com ?
Nous intégrons régulièrement les maquettes d'autres créatifs, en marque blanche. Vous gardez la relation client, la direction artistique et la signature. Nous devenons votre équipe technique : intégration, back-office, hébergement, maintenance. Engagement écrit de non-démarchage de vos clients, et nous restons invisibles si c'est ce que vous préférez.
Discuter d'une collaborationQuestions fréquentes
Ce qu'on nous demande avant de nous confier un design.
Le site sera-t-il exactement identique à ma maquette ?
Je n'ai pas de Figma, juste un PDF ou un Canva. C'est possible ?
Mes maquettes ne couvrent que le desktop. Vous faites le mobile ?
Je suis graphiste ou agence de communication. Vous travaillez en marque blanche ?
Qui pourra modifier les textes une fois le site en ligne ?
Mes maquettes ont été générées par une IA. Ça change quelque chose ?
Combien de temps faut-il pour intégrer une maquette ?
Des entreprises bretonnes nous font déjà confiance
Découvrez aussi
Envoyez-nous vos maquettes
Un Figma, un PDF, trois captures d'écran : peu importe. Nous les regardons, nous vous disons ce qui manque pour en faire un site, et nous chiffrons. Sans engagement.