Aller au contenu
5 place de la Liberté, BrestLun–Ven, 9h–18h +33 7 60 48 51 21 contact@webdesign29.net Espace client
Figma · Maquette · Design

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.

Nos interventions

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.

  1. Vous voulezVos écrans codés exactement comme dessinés
    Notre 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.
  2. Vous voulezUn design cohérent sur toutes les pages
    Notre 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.
  3. Vous voulezModifier vos contenus vous-même
    Notre 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.
  4. 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.
La méthode

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.
  1. 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.

  2. Fondations

    Extraction des couleurs, espacements et typographies en variables. Les composants récurrents sont codés une fois, puis réutilisés partout.

  3. 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.

  4. 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.

Livrables

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é.
Vos maquettes

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.

Ce que vous pouvez nous envoyer
  • 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
Questions

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.

Design UX/UI
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.

Design UX/UI
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.

Design UX/UI
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é.

Design UX/UI
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.

Design UX/UI
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.

Design UX/UI
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.

Design UX/UI
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

La Poste
Air Liquide
Armor-Lux
Bose
Cabasse
Maileva
Brest Métropole Habitat
Brest Bretagne Handball
Open Brest Arena
Mairie de Crozon
AMF 29
ORB
Coliposte
Haliotika
Sparfel
Ucopia
Escapia
Byzantine