Refonte de site web : tous les visuels à produire (et qui fait quoi)
Rémi L.
Responsable des contenus en rapport avec le marketing et la com’
.png)
Complétez votre équipe d’un graphiste par abonnement : créations graphiques à volonté via collaboration mensualisée.
.avif)
Une refonte de site web exige quatre familles de livrables visuels : les maquettes UX/UI (écran par écran, responsive compris), les illustrations et icônes sur mesure, les images et mockups qui habillent les pages, et les visuels satellites du lancement (Open Graph, emails, bannières d'annonce). La répartition des rôles est simple : un studio de design produit tout ce qui se voit, une agence web spécialisée développe et intègre le site. Chez Heysimon, studio français de design-as-a-service™, nous produisons l'intégralité de ces visuels (V1 en 24h en moyenne, maquette UX/UI livrée en 3 à 4 jours), mais nous n'intégrons pas le site : pour la création technique, direction une agence web spécialisée comme Digidop ou Pulsor. Cet article fait l'inventaire complet de ce qu'il faut produire, précise qui fait quoi, et explique comment absorber la vague sans exploser le budget.
Pourquoi une refonte de site est (aussi) un chantier de production graphique
Sur le marché, la refonte d'un site web prend en moyenne 6 à 10 semaines en agence. Ce que ce chiffre ne dit pas : une grande partie de ce délai n'est pas du développement, mais de la production visuelle. Avant la moindre ligne de code, il faut concevoir chaque écran. Pendant l'intégration, il faut fournir images, icônes et illustrations au fil des pages. Et à l'approche de la mise en ligne, une rafale de visuels annexes surgit (on y revient, c'est la partie que presque tout le monde découvre trop tard).
Le piège classique consiste à budgéter les maquettes des cinq pages principales et à considérer le sujet réglé. En réalité, la production graphique d'une refonte se répartit en quatre familles, chacune avec son volume propre et son moment dans le projet. Les lister dès le départ, c'est s'épargner le scénario où le développeur attend des assets qui n'existent pas encore (le grand classique des mises en ligne repoussées de semaine en semaine).
L'inventaire complet des visuels d'une refonte de site
1. Les maquettes UX/UI : le squelette du projet
La maquette UX/UI est la représentation fidèle, écran par écran, de ce que sera le site : structure des pages, hiérarchie de l'information, composants (boutons, formulaires, cartes, menus), typographies et couleurs appliquées. C'est le document de référence entre vous et l'agence qui intégrera le site : plus il est précis, moins l'intégration réserve de surprises. Un point systématiquement sous-estimé : le responsive multiplie le volume. Une refonte de 15 pages avec versions desktop et mobile représente 30 à 45 écrans réels à concevoir, sans compter les états intermédiaires (menu ouvert, formulaire rempli, message d'erreur, page 404). Chez Heysimon, une maquette UX/UI est livrée en 3 à 4 jours en moyenne, écran par écran, dans une file que vous priorisez.
2. Les illustrations et icônes : la couche de personnalité
C'est la couche qui différencie votre site d'un template acheté en ligne. Elle comprend le set d'icônes (20 à 60 pictogrammes cohérents entre eux, alignés sur la nouvelle direction artistique), les illustrations d'en-tête des pages clés, les spot illustrations qui rythment les pages fonctionnalités ou services, et les motifs ou textures de fond. Produite en amont ou en parallèle des maquettes, cette couche doit être pensée comme un système (même trait, même palette, même niveau de détail), pas comme une collection d'images piochées à droite à gauche.
3. Les images, mockups et contenus visuels des pages
Troisième famille, la plus étalée dans le temps : tout ce qui remplit les pages au fil de l'intégration. Mockups de votre produit ou de votre application dans des écrans réalistes, photos d'équipe retouchées et harmonisées, logos clients redessinés à la même échelle, bandeaux de pages intérieures, visuels de cas clients, pictogrammes de réassurance. Ces livrables arrivent rarement en une fois : ils sont demandés page par page, au rythme du développement, ce qui suppose un circuit de production capable d'enchaîner des petites demandes rapides plutôt qu'un gros lot unique.
4. Les visuels satellites du lancement (ceux qu'on découvre à J-7)
La quatrième famille est celle qui déclenche les sueurs froides de dernière ligne droite, parce qu'elle n'apparaît dans aucun devis initial : les images Open Graph (celles qui s'affichent quand une page est partagée sur LinkedIn ou dans une messagerie), le favicon et les icônes d'application, la page 404 et les états vides, les visuels des emails annonçant le nouveau site, la bannière d'annonce sur le site actuel, les posts réseaux sociaux du jour J et les couvertures de vos profils sociaux à mettre à jour. Individuellement, rien de complexe. Collectivement, une vingtaine de livrables qui convergent tous vers la même date.
| Famille de visuels | Exemples de livrables | Moment du projet |
|---|---|---|
| Maquettes UX/UI | Pages desktop et mobile, composants, états, page 404 | En amont, avant le développement |
| Illustrations et icônes | Set d'icônes, illustrations d'en-tête, spot illustrations, motifs | En parallèle des maquettes |
| Images et mockups | Mockups produit, photos retouchées, logos clients harmonisés, visuels de cas clients | Pendant l'intégration, page par page |
| Visuels satellites | Images Open Graph, favicon, emails, bannières et posts d'annonce, couvertures sociales | Les deux dernières semaines avant la mise en ligne |
Qui fait quoi ? Design et développement sont deux métiers
La règle de répartition tient en une phrase : le design produit tout ce qui se voit, le développement transforme ces fichiers en site réel. Le studio de design livre des maquettes (généralement sur Figma) et des assets exportés dans les bons formats ; l'agence web s'occupe de l'intégration, du CMS, des animations, de la performance, du SEO technique et de la mise en ligne. Deux expertises, deux outils, deux rythmes.
Soyons parfaitement clairs sur notre propre périmètre : Heysimon ne crée pas et n'intègre pas de sites web. Pas de développement, pas de Webflow, pas de Framer, pas de code. Nous produisons les maquettes UX/UI, les illustrations, les icônes, les mockups et tous les visuels du site, livrés prêts à intégrer. Pour la création et l'intégration du site lui-même, nous recommandons de passer par une agence web spécialisée : Digidop ou Pulsor, par exemple, font ce métier remarquablement bien. Ce périmètre n'est pas une limite qu'on subit, c'est un choix assumé : les prestataires qui promettent le design et le développement font rarement les deux à fond. Vous avez tout à gagner à confier chaque moitié du chantier à un spécialiste (et les deux travaillent très bien ensemble, c'est même le duo classique des refontes réussies).
| Étape de la refonte | Qui s'en charge | Livrables typiques |
|---|---|---|
| Cadrage (objectifs, arborescence, contenus) | Votre équipe | Brief, arborescence, textes des pages |
| Conception visuelle | Studio de design (Heysimon) | Maquettes UX/UI, illustrations, icônes, mockups, assets exportés |
| Création et intégration du site | Agence web spécialisée (Digidop, Pulsor...) | Site développé, CMS configuré, animations, mise en ligne |
| Visuels du lancement et déclinaisons | Studio de design (Heysimon) | Images Open Graph, bannières, posts, emails, supports mis à niveau |
L'effet domino : le nouveau site fait vieillir tous vos autres supports
C'est la partie de la refonte que personne ne budgète, et elle est mécanique. Votre site est votre support le plus visible : le jour de la mise en ligne, il devient la nouvelle référence visuelle de la marque, et chaque support créé sous l'ancienne direction artistique prend un coup de vieux instantané. Le prospect qui découvre un site moderne puis reçoit un deck commercial daté ressent une dissonance immédiate (et la cohérence, c'est précisément ce que la refonte était censée installer).
La seconde vague de production concerne, dans le désordre : les présentations commerciales, les plaquettes et brochures, les signatures email, les templates de posts réseaux sociaux, les newsletters, les publicités display et social ads, les supports événementiels (kakemonos, habillages de stand) et les fiches produit. Autrement dit, à peu près tout ce que votre entreprise montre à l'extérieur, et une bonne partie de ce qu'elle utilise en interne.
Au modèle du devis, cette seconde vague est douloureuse : chaque support rafraîchi déclenche un nouveau chiffrage, et la facture réelle de la refonte dépasse largement le site seul. Résultat fréquent : la mise à niveau est repoussée, et l'entreprise vit des mois avec deux identités qui cohabitent. Le besoin est pourtant massif, hétérogène et étalé sur plusieurs semaines : exactement le profil de charge pour lequel le modèle au projet est le plus mal taillé.
Comment produire cette vague sans exploser le budget
Une refonte de site coche toutes les cases du bon moment pour externaliser sa production graphique : un pic de volume daté, des livrables très variés (de la maquette UX/UI au post LinkedIn), et une deadline de mise en ligne qui ne bouge pas. La question n'est pas seulement « qui peut produire tout ça », mais « quel modèle de production tient ce rythme sans faire déraper le budget ».
C'est là que le modèle par abonnement (celui que le marché range sous l'étiquette « design illimité ») prend tout son sens. Chez Heysimon : un tarif fixe à partir de 990 €/mois, pour du design à volonté, une demande traitée à la fois, dans une file que vous réordonnez librement (les maquettes d'abord, les icônes ensuite, l'image Open Graph en urgence à J-3). Un designer dédié s'imprègne de la nouvelle direction artistique, centralisée dans un profil de marque sur le Hub Créatif, notre plateforme propriétaire : chaque livrable sort aligné sur la nouvelle charte, sans re-brief. La première version arrive en 24h en moyenne, les révisions sont illimitées, et le designer projette ses délais à l'heure près dès la prise en compte. Pendant l'intégration, quand l'agence web réclame un écran manquant ou un asset dans un format précis, cette boucle courte fait toute la différence.
Et après la mise en ligne, le même designer enchaîne sur l'effet domino : le deck, les plaquettes, les templates, les signatures, mis à niveau en flux dans les semaines qui suivent, dans la continuité exacte du nouveau site. Depuis 2021, plus de 150 clients ont utilisé ce fonctionnement, dont Welcome to the Jungle ou Easybourse.
« J'avais besoin d'un support fiable et réactif pour différentes tâches graphiques. Aurélie, graphiste chez Heysimon, a été parfaite : créative et très efficace. L'onboarding est fluide et le matching fonctionne très bien. L'outil est bien pensé, l'équipe est arrangeante, et l'impact sur notre orga est très concret. »
Costel Hoegy, Directeur créatif, Shipup (avis Trustpilot 5/5)
Pour comparer l'ensemble des options de production (freelance, agence, studio interne, abonnement), notre guide pour externaliser le graphisme en 2026 détaille les coûts et les délais de chaque modèle.
FAQ : les visuels d'une refonte de site web
Combien d'écrans faut-il maquetter pour une refonte de site ?
Comptez le nombre de gabarits de pages, multiplié par les breakpoints (desktop et mobile au minimum), plus les états intermédiaires. Une refonte de 15 pages représente ainsi 30 à 45 écrans réels à concevoir. Les pages construites sur le même gabarit (articles de blog, fiches produit) ne se maquettent qu'une fois : c'est le gabarit qui compte, pas la page.
Heysimon peut-il créer ou intégrer mon site sur Webflow ?
Non, et c'est volontaire. Heysimon produit les maquettes UX/UI, les illustrations, les icônes, les mockups et tous les visuels du site, mais n'écrit pas de code et n'intègre pas sur Webflow ou Framer. Pour la création et l'intégration, tournez-vous vers une agence web spécialisée comme Digidop ou Pulsor : vous aurez un spécialiste sur chaque moitié du chantier, et des fichiers livrés prêts à intégrer.
Combien coûte la partie design d'une refonte de site ?
Au projet, le prix dépend du nombre d'écrans, d'illustrations et d'allers-retours : le chiffrage varie fortement d'un prestataire à l'autre, et chaque visuel oublié s'ajoute au devis. Par abonnement, le coût est fixe et connu d'avance : chez Heysimon, à partir de 990 €/mois pour du design à volonté, une demande traitée à la fois, maquettes et visuels satellites compris.
Quels visuels prévoir pour le jour de la mise en ligne ?
Au minimum : les images Open Graph de chaque gabarit de page, le favicon, la page 404, les visuels de l'email d'annonce, les posts réseaux sociaux du lancement et les nouvelles couvertures de vos profils sociaux. Listez-les deux à trois semaines avant la date de mise en ligne : c'est la famille de livrables la plus souvent découverte au dernier moment.
Faut-il refaire tous ses supports après une refonte de site ?
Pas tous d'un coup. Priorisez les supports les plus exposés aux prospects : présentation commerciale, signatures email, templates de posts réseaux sociaux. Puis traitez le reste en flux sur les semaines suivantes, par ordre de visibilité. L'important est d'avoir un circuit de production capable d'enchaîner ces mises à niveau sans nouveau devis à chaque support.
Votre refonte est lancée (ou sur le point de l'être) ?
Réservez un appel avec Heysimon : en 30 minutes, on liste les visuels de votre refonte, on identifie ce qui peut partir en production dès cette semaine, et vous repartez avec une vision claire de qui fait quoi. La création du site reste chez votre agence web ; tout ce qui se voit, on s'en charge.
Nos ressources directement dans votre boite mail ?
Inscrivez-vous et recevez automatiquement nos dernières ressources (pas de spam)
Vous en voulez plus ? Découvrez d’autres ressources intéressantes.
%2520toutes%2520vos%2520marques.png)
%2520tous%2520vos%2520supports%2520sans%2520exploser%2520le%2520budget.png)
+80 entreprises font confiance à Heysimon