De vos maquettes à un site en ligne
Webdesign29 intègre vos maquettes Figma, Sketch, PDF, Canva ou générées par IA, et les met en ligne depuis son agence de Brest. Le design est codé fidèlement, et ce qu'une maquette ne peut pas dire est comblé : états, largeurs, vrais contenus.
De l'intégration d'un écran à la mise en production
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. Bout à bout, le site ne ressemble plus à la maquette. Nous ne réinterprétons pas votre design : nous le rendons habitable.
Chaque intervention s'appuie sur notre savoir-faire en développement web et en design UX/UI. Pas encore de maquette ? Voyez par où commencer. Déjà un prototype codé avec l'IA ? C'est notre page prototype IA en production.
- Vous voulezVos écrans codés exactement comme dessinésNotre intervention
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.
Développement web HTML, CSS, React ou WordPress selon le projet. - Vous voulezUn design cohérent sur toutes les pagesNotre intervention
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.
Design d'interface Le dixième écran coûte moins cher que le premier. - Vous voulezModifier vos contenus vous-mêmeNotre intervention
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.
Qui modifie les textes Formation au back-office à la livraison. - Vous voulezUn site accessible, rapide et bien référencéNotre intervention
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.
Accessibilité RGAA Contrastes, clavier et poids des pages vérifiés.
On lit 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, puis on monte les écrans.
- Vos intentions sont des contraintesGrille, typographie, couleurs et espacements sont relevés dans vos fichiers, pas approchés à l'œil.
- Les écarts sont écritsQuand 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.
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.
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 étatsUne 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éelVous 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 contenusEn 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 performanceUne 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-officeQui 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.
Ce que vous récupérez à la fin
Une intégration réussie ne se juge pas le jour de la livraison. 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 maquettesEt une liste écrite, validée avec vous, des endroits où nous nous en sommes écartés et pourquoi.
- Vos composants, réutilisablesVos boutons, cartes et formulaires codés une fois, cohérents partout, prêts pour les pages suivantes.
- Le code sourceSur votre dépôt Git, à votre nom, documenté. Vos fichiers de design restent votre propriété, évidemment.
- Un back-officePour changer un texte, une photo, ajouter un article, sans nous solliciter ni risquer de casser la page.
- Des vérifications, pas des promessesContrastes mesurés, navigation clavier testée, poids des pages relevé, sur chaque écran livré.
Envoyez-nous vos maquettes
Nous les regardons, nous vous disons ce qui manque pour en faire un site, et nous chiffrons, sans engagement.
Graphiste, studio ou agence de communication ? Nous intégrons aussi en marque blanche : vous gardez la relation client et la signature, nous devenons votre équipe technique.
- Un lien vers vos maquettes Figma
- Un PDF, un Canva ou des captures d'écran
- Un export de maquettes générées par IA
- L'adresse de votre site actuel, s'il existe
De la maquette au site : vos questions
Les réponses courtes ici, et la version détaillée sur la page de chaque question.
01Le site sera-t-il exactement identique à ma maquette ?Réponse complète
Fidèle, oui ; identique à chaque largeur, non, et c'est normal. Une maquette fige un écran à une largeur donnée, avec un contenu choisi, alors qu'un site doit tenir à toutes les largeurs avec des contenus réels, souvent plus longs. Webdesign29 respecte à la lettre la grille, la typographie et les couleurs, et propose une solution pour chaque situation non dessinée avant de la coder.
02Peut-on faire un site à partir d'un PDF ou d'un Canva, sans Figma ?Réponse complète
Oui. Un fichier Figma fait gagner du temps, parce que les mesures, les couleurs et les composants s'y lisent directement. À partir d'un PDF, d'un Illustrator ou d'un Canva, ces valeurs sont relevées à la main : c'est un peu plus long, chiffré comme tel, et le résultat est le même. Sans maquette du tout, il s'agit d'un travail de design, et le devis le précise.
03Mes maquettes ne couvrent que l'ordinateur : qui conçoit la version mobile ?Réponse complète
L'intégrateur propose les adaptations mobiles écran par écran : ce qui se replie, ce qui se cache, ce qui passe en accordéon, ce qui change d'ordre. Vous validez, puis elles sont intégrées. C'est un vrai poste de travail, dont le prix dépend du nombre d'écrans concernés : il est donc annoncé après la revue de maquettes.
04Une agence web peut-elle intégrer des maquettes en marque blanche ?Réponse complète
Oui. Chez Webdesign29, le graphiste ou l'agence de communication garde la relation client, la direction artistique et la signature du projet. L'agence intervient comme équipe technique : intégration, back-office, hébergement et maintenance. Elle s'engage par écrit à ne pas démarcher les clients, et peut rester invisible si c'est souhaité.
05Qui pourra modifier les textes du site une fois en ligne ?Réponse complète
Vous. Chaque zone de contenu à faire évoluer devient un champ dans un back-office simple, avec une formation à la livraison. Ce qui est modifiable se décide ensemble : rendre tout modifiable est le meilleur moyen de voir un design soigné se dégrader en quelques mois.
06Des maquettes générées par une IA peuvent-elles devenir un site ?Réponse complète
Oui. Les maquettes générées par IA sont souvent belles mais rarement cohérentes : les espacements varient d'un écran à l'autre, les composants se ressemblent sans être identiques, et les états manquent presque toujours. La première étape consiste à en extraire un système cohérent de couleurs, d'espacements et de composants, puis le site est intégré comme à partir d'une maquette dessinée.
07Combien de temps faut-il pour intégrer une maquette ?Réponse complète
Cela dépend du nombre d'écrans et d'états à coder, pas du nombre de pages. Une page d'accueil riche en composants uniques demande plus de travail que dix pages qui réutilisent les mêmes blocs. C'est pourquoi la revue de maquettes précède le devis : les composants sont comptés un par un, et le calcul est montré avant de s'engager.
08Combien de temps pour concevoir une interface ?Réponse complète
Quatre à huit semaines pour un projet de design complet : recherche, arborescence, wireframes, maquettes, système de composants. Le nombre d'écrans compte moins que le nombre de gabarits réellement différents. Une boutique de 500 produits n'en demande souvent que six ou sept.
Une autre question ? Posez-la à l'équipe, ou consultez toutes les questions fréquentes.
Des entreprises de secteurs variés nous font confiance


















