Refonte site web : qui produit le design ?

Dans une refonte site web, le design produit six livrables identifiables : audit de l’existant, arborescence, wireframes, maquettes, système de composants, puis accompagnement de l’intégration. Le développement et le contenu suivent. Savoir qui fabrique quoi évite les deux factures les plus fréquentes, la maquette inexploitable et les droits jamais cédés.

Ce que le design fabrique dans une refonte site web

Le mot design recouvre deux chantiers que les devis mélangent : l’identité de marque, qui vit bien au-delà du site, et la conception des interfaces, qui s’arrête à ses écrans. Une refonte site web ne touche que le second. Six livrables jalonnent le parcours, et chacun se valide avant que le suivant démarre.

L’audit de l’existant, avant toute maquette

Le travail commence par regarder ce qui tourne déjà. Pages les plus vues, parcours qui décrochent, formulaires abandonnés, contenus sans lecteur : ces éléments sortent de l’outil de mesure d’audience et de la Search Console, pas d’une réunion de cadrage.

Cet audit produit une liste de décisions : chaque gabarit existant est conservé, redessiné, fusionné ou supprimé. Le nombre d’écrans à dessiner tombe souvent de moitié, ce qui déplace le devis autant que le calendrier.

Le classement des rubriques se tranche également ici, avant toute refonte graphique. Ce chantier relève de l’arborescence du site, pas du goût.

Wireframes : la structure avant l’esthétique

Le wireframe pose les blocs, leur ordre et leur hiérarchie, en gris. Aucune couleur définitive, aucune photographie. Cette pauvreté est volontaire : elle force la discussion sur ce que la page dit, dans quel ordre, avec quelle action en sortie.

Sauter l’étape coûte cher. Les remarques arrivent alors toutes ensemble sur des maquettes web terminées, et « le bleu est trop froid » se traite dans la même réunion que « le bouton de devis devrait remonter ». La seconde remarque casse une structure, la première change une teinte.

Un jeu de wireframes couvre des gabarits, pas des pages. Accueil, page de rubrique, page de service, article, formulaire, contact : cinq à huit gabarits décrivent un site vitrine entier.

Maquettes et système de composants, deux livrables distincts

La maquette montre un écran fini. Le système de composants décrit les pièces qui le composent : échelle typographique, palette et ses usages, grille, boutons et leurs états, champs de formulaire, cartes, messages d’alerte, espacements.

Beaucoup de projets s’arrêtent au premier livrable. Le site part en ligne, une page nouvelle arrive six mois plus tard, dessinée par personne, assemblée à la main. Les écarts s’accumulent : trois nuances de bleu, quatre tailles de bouton, deux styles de formulaire.

Un projet de refonte sérieux livre les deux. Le système coûte quelques jours de conception supplémentaires et se rembourse dès la première évolution.

L’intégration, frontière mouvante avec le code

L’intégration transforme les maquettes en pages réelles. Ce poste tombe tantôt chez le designer, tantôt chez le développeur, et beaucoup de devis restent muets sur ce point précis.

Tranchez-le par écrit. Trois répartitions coexistent : le concepteur s’arrête aux maquettes ; il intègre lui-même balisage et styles ; le développeur intègre et le concepteur valide écran par écran. La troisième donne les meilleurs résultats, à condition de budgéter la validation.

Le poids des visuels se décide aussi là. Une maquette pleine de photographies plein écran se paie en secondes de chargement, sujet traité dans la gestion des images du site.

Qui produit le design : freelance, studio ou abonnement

Comparer un indépendant, une agence et un abonnement suppose de savoir ce qu’un devis de design recouvre vraiment. Le studio parisien Design Elite, qui vend justement de la conception graphique par abonnement, décompose sur son blog le tarif graphiste en postes distincts : nature du livrable, expérience du praticien, cession de droits, allers-retours inclus. Cette grille de lecture reste l’offre commerciale d’un acteur, pas un baromètre de marché, mais elle nomme les lignes qu’un devis de refonte de site regroupe trop souvent en un forfait unique.

Chacun des trois modèles échoue sur un profil de projet différent. Le choix se joue moins sur le prix affiché que sur la nature du besoin, un chantier borné ou un flux continu d’écrans.

Le designer indépendant

Un indépendant travaille seul, avec un coût de structure faible et un interlocuteur unique. Le format convient à un site vitrine, à une famille de gabarits à redessiner, à un système de composants léger.

Deux limites reviennent. La disponibilité d’abord : un profil chargé décale les jalons sans mauvaise volonté. Le périmètre ensuite : rares sont les praticiens qui couvrent à la fois la recherche utilisateur, la direction artistique et l’intégration. Vérifiez lequel des trois domine dans le portfolio présenté.

Le studio ou l’agence

Une agence aligne plusieurs métiers sur le même projet : cadrage, direction artistique, conception d’interface, parfois développement. La coordination se facture, et elle achète une capacité à tenir un jalon contractuel.

Le risque tient au décalage entre l’équipe qui vend et celle qui produit. Demandez le nom du concepteur affecté et son taux d’occupation sur la période. Le cadre contractuel se travaille comme pour tout fournisseur technique, selon la méthode décrite dans choisir et piloter un prestataire.

L’abonnement mensuel

Un forfait mensuel achète une capacité de production continue, pas un projet livré à date fixe. Les demandes se déposent dans une file, se traitent l’une après l’autre, et le contrat se suspend quand le flux se tarit.

Le modèle sert surtout l’après-projet : gabarits supplémentaires, déclinaisons saisonnières, visuels de campagne, écrans d’une nouvelle offre. Il s’accorde mal avec un jalon unique assorti de pénalités de retard, puisqu’une file d’attente ne se contractualise pas comme un planning. Une refonte complète menée sous ce format demande un pilotage interne serré.

Comment le design s’articule avec le contenu et le code

Un dessin juste à l’écran peut échouer en ligne pour trois raisons : le texte réel, les états oubliés, l’absence de recette. Les trois se traitent avant la mise en production.

Le contenu réel avant la maquette

Une maquette remplie de faux texte ment sur deux points. La longueur des titres d’abord : un intitulé de trois mots dans le gabarit devient une ligne et demie en production. Le volume ensuite : la page de service dessinée avec quatre paragraphes en reçoit onze.

Le remède tient à une règle de calendrier. Le texte des gabarits principaux se rédige avant la maquette finale, même à l’état de brouillon. À défaut, demandez au concepteur de tester chaque bloc avec un contenu court et un contenu long, puis de montrer les deux versions.

Les états que les maquettes oublient

Une refonte du design se juge sur ses cas dégradés autant que sur sa page d’accueil. Les écrans à réclamer explicitement :

• le formulaire en erreur, champ par champ, avec le message affiché
• la page de résultats vide, quand la recherche interne ne trouve rien
• l’attente, quand une carte ou un flux tiers met du temps à répondre
• la page de rubrique avec deux éléments, puis avec quarante
• le menu quand un intitulé passe sur deux lignes

Chacun de ces états correspond à une page réelle. Absents de la maquette, ils seront improvisés par le développeur, avec un résultat visuellement étranger au reste du site.

La recette du design, écran par écran

La comparaison entre la maquette et la page intégrée se fait à l’écran, jamais de mémoire. Ouvrez les deux côte à côte, sur téléphone puis sur écran large, et notez les écarts dans un document partagé.

Cette recette réclame un espace dédié, distinct du site en production, tel que décrit dans l’environnement de préproduction. Corriger un espacement sur le site vivant, en réunion, reste la meilleure façon de casser autre chose.

Livrables et droits : ce que vous récupérez vraiment

La fin du projet se prépare à son début. Ce que vous emportez dépend de trois lignes écrites dans le devis, jamais d’une négociation de dernière minute.

Les fichiers sources à exiger

La liste tient en cinq points, et se recopie telle quelle dans la commande :

• le fichier de conception complet, composants nommés, calques organisés, écrans à jour
• les exports vectoriels des icônes et du logotype dans toutes ses variantes
• les images d’origine, en pleine résolution, avec leur provenance
• les spécifications d’espacements, de tailles et de couleurs, en valeurs exploitables
• les fichiers de police ou, à défaut, la référence exacte de la licence acquise

Un prestataire qui livre des images aplaties et rien d’autre vous rend dépendant de lui pour la moindre virgule.

La cession de droits ne va pas de soi

Payer une prestation ne transfère aucun droit d’auteur. En droit français, l’auteur d’une création graphique en reste titulaire tant qu’un écrit n’organise pas la cession, et l’article L. 131-3 du code de la propriété intellectuelle impose un formalisme précis : chaque droit cédé fait l’objet d’une mention distincte, et le domaine d’exploitation se délimite quant à son étendue, sa destination, son lieu et sa durée.

Une facture intitulée « création graphique », même acquittée, ne remplit aucune de ces conditions. Le contrat de refonte du site énumère donc les droits transmis, reproduction, représentation, adaptation, puis les supports couverts, écran, impression, réseaux sociaux, enfin le territoire et la durée. Un logotype cédé pour le seul usage web se transforme en litige au premier dépliant imprimé.

Polices et images : des licences à vérifier

Une police de caractères s’achète sous licence, et la licence destinée au web se compte souvent en pages vues mensuelles. Dépasser le palier souscrit sans le savoir arrive vite après une campagne réussie.

Même vigilance sur les photographies. Une image de banque acquise en licence standard interdit certains usages, la revente d’un produit dérivé notamment. Le concepteur choisit, mais le titulaire du site supporte le risque : demandez les justificatifs au moment de la livraison, pas deux ans plus tard.

Les pièges qui déclenchent une deuxième refonte

Trois erreurs de méthode expliquent la plupart des sites redessinés deux fois en trois ans. Aucune ne relève du talent du concepteur.

Le mobile traité en dernier

Dessiner l’écran large puis adapter la version mobile inverse la contrainte. Le petit écran impose des arbitrages utiles : ce qui ne tient pas dans une colonne étroite ne mérite probablement pas la moitié haute de la page.

Commencez par le gabarit mobile, validez-le, puis élargissez. L’ordre d’affichage des blocs sur téléphone devient alors une décision assumée plutôt qu’une conséquence. Des maquettes de refonte livrées en deux largeurs minimum évitent l’improvisation au moment de l’intégration.

L’accessibilité découverte à la recette

Le référentiel français applicable aux sites web s’appelle le RGAA, référentiel général d’amélioration de l’accessibilité, adossé aux normes européennes. Le décret n° 2019-768 du 24 juillet 2019 impose l’accessibilité aux organismes publics et aux entreprises privées dont le chiffre d’affaires annuel réalisé en France atteint 250 millions d’euros.

Le périmètre s’est élargi depuis. La directive européenne 2019/882, transposée par la loi du 9 mars 2023 et applicable depuis le 28 juin 2025, couvre certains services vendus aux consommateurs, dont le commerce en ligne, avec une exemption pour les microentreprises de moins de dix salariés. Un site vitrine de TPE reste hors du champ contraignant, ce qui ne rend pas ses contrastes lisibles pour autant.

Les décisions concernées se prennent dans la maquette : rapport de contraste des textes, taille des zones cliquables, style du focus, information jamais portée par la seule couleur. Les vérifier après intégration revient à repayer les écrans. Le détail figure dans les contrôles d’accessibilité à mener page par page.

Le comité qui arbitre sur les couleurs

Une refonte web meurt rarement d’un mauvais dessin, souvent d’une gouvernance floue. Six personnes commentent la maquette, chacune sur un détail, personne ne tranche, et le troisième aller-retour repart de zéro.

Nommez un décideur unique avant le premier livrable. Les retours se rassemblent dans un document unique, formulés en problèmes plutôt qu’en solutions : « le bouton de devis passe inaperçu » vaut mieux que « mets-le en rouge ». Le nombre d’allers-retours inclus s’écrit dans le devis, et le prix des tours supplémentaires aussi.

Le modèle Design Elite

Design Elite est un studio parisien de design graphique et UX/UI qui travaille par abonnement mensuel. Son catalogue couvre le logo et le branding, les créations publicitaires, le design print, l’UI et l’UX, les maquettes web, la vidéo et le motion design. Le studio est installé au 9 rue des Colonnes, 75002 Paris, et se joint au 01 89 62 39 15. Son fonctionnement repose sur un forfait mensuel à demandes illimitées, décliné en plusieurs formules, sans engagement long. Le positionnement revendiqué est celui d’une alternative au recrutement d’un graphiste interne et au freelance facturé à la tâche. Sur un chantier de refonte, ce format s’adresse aux équipes qui continuent de produire des écrans après la mise en ligne.

Les questions qui reviennent avant une refonte

Faut-il refaire le design avant ou après le contenu ?

Les deux avancent en parallèle, avec une règle simple : la structure des pages se fixe avant les couleurs, et le texte réel arrive avant la maquette finale. Un concepteur qui reçoit les titres et les paragraphes définitifs dessine des gabarits qui tiennent en ligne. Celui qui travaille sur du faux texte livre des écrans harmonieux qui se déforment à la première publication. Prévoyez la rédaction dans le calendrier, au même rang que la conception graphique.

Combien coûte la partie design d’une refonte de site ?

Aucune fourchette publique ne fait autorité, parce que le prix dépend du nombre de gabarits à dessiner, de la présence ou de l’absence d’un système de composants, du volume d’allers-retours et de l’étendue de la cession de droits. Un devis lisible détaille ces lignes séparément. Un forfait global sans décomposition empêche toute comparaison et masque presque toujours un périmètre restreint, révélé au premier écran supplémentaire demandé. Exigez le détail avant de comparer deux propositions.

Que récupérez-vous à la fin d’une refonte graphique ?

Trois choses, et elles se réclament par écrit dès le devis. Les fichiers sources de conception, avec les composants nommés et non aplatis. Les exports exploitables ensuite, icônes vectorielles, images aux bonnes dimensions, spécifications de couleurs et d’espacements. La cession de droits enfin, rédigée dans un contrat qui énumère les usages autorisés. Sans ces trois éléments, la moindre évolution vous ramène chez le prestataire d’origine, en position de faiblesse.

Un système de composants est-il utile pour un site vitrine ?

Une version allégée suffit et reste rentable. Fixez l’échelle des titres, deux ou trois styles de bouton avec leurs états, le traitement des liens, la grille d’espacements et les règles d’usage de la palette. Ce document tient en quelques écrans. Il évite qu’une page ajoutée un an plus tard invente sa propre mise en forme, ce qui reste la cause la plus banale de dérive visuelle sur les petits sites.

Qui doit vérifier l’accessibilité des maquettes ?

Le concepteur, pendant la conception, plutôt que le développeur à la recette. Les contrastes de texte, la taille des zones cliquables, la visibilité du focus et le fait qu’une couleur ne porte jamais seule une information se décident dans la maquette. Corriger ces points après intégration suppose de reprendre les écrans, donc de repayer une partie du travail. Inscrivez ce contrôle dans les livrables attendus, au même titre que les versions mobiles.