refonte de site web

#23 – Les 5 grandes étapes pour créer (ou faire la refonte) d’un site web : Le cas du site de DHS Digital avec Dylan Mura et Davina Lorenzano

Épisode diffusé le 10 mai 2021 par Danilo Duchesnes

Écouter l'épisode :

0:00 --:--
Vitesse

Une refonte de site web, ça prend rarement le temps prévu. Danilo Duchesnes, fondateur de l’agence Facebook Ads DHS Digital, l’a appris à ses dépens : objectif décembre 2020, site mis en ligne fin avril 2021. Cinq mois de glissement, une identité visuelle reconstruite de zéro, et une équipe de trois personnes qui a dû se coordonner sans filet. Ce que raconte cet épisode du Rendez-vous Marketing avec Dylan Mura (développeur) et Davina Lorenzano (Digital Ads Creative) n’est pas un tutoriel parfait. C’est un retour de terrain, avec les erreurs de timing, les arbitrages douloureux et les fonctionnalités abandonnées en cours de route.

Ce qui est intéressant dans ce cas concret, c’est que Danilo n’est pas développeur, pas designer. Il est avant tout média – et il s’est retrouvé à piloter un projet créatif avec des contraintes qu’il ne maîtrisait pas totalement. Du coup, la méthode qu’il décrit – cinq étapes, dans l’ordre, sans en sauter une – est moins une méthode de chef de projet qu’une méthode de survie. Et ça change tout à la façon dont on l’écoute.

Voilà ce qu’on va décortiquer. Pas étape par étape comme un listicle. Vraiment.

Avant de toucher à Adobe XD : la plateforme de marque, cet exercice que personne ne fait vraiment

La plateforme de marque. Tout le monde en parle, personne ne la fait correctement. Danilo admet lui-même qu’il savait vaguement que ça existait – il appelait ça un MVP, un document qui résume la mission, les valeurs, la tonalité – mais qu’il ne l’avait jamais mis sur papier de façon rigoureuse pour DHS Digital.

Ce qu’il a construit en juillet 2020 comprend quatre sections : la mission de la marque, le descriptif de l’activité, la différenciation concurrentielle, et les valeurs. Rien de révolutionnaire sur le papier. Mais le déclencheur, c’est ce qu’il dit ensuite :

« Quand je l’ai fait, je me suis dit, il y a plein de choses en fait pour lesquelles je suis pas totalement clair. »

Voilà. C’est exactement le problème. On croit savoir qui on est jusqu’au moment où on doit l’écrire.

Davina, qui avait déjà bossé sur des plateformes de marque durant ses études et en stage dans une agence de graphisme, précise ce qui compte vraiment côté brand book : le choix des couleurs, les typographies (« une typo ça raconte une histoire »), la tonalité, et la décision illustrations vs photos. Ce sont des choix qui semblent anodins jusqu’à ce qu’on réalise qu’une maquette sans ces réponses ne tient pas. Tu ne peux pas designer dans le vide.

Le truc que j’aurais voulu qu’on me dise – enfin, que Danilo aurait voulu entendre plus tôt – c’est que sans plateforme de marque solide, le brief ne veut rien dire, la maquette part dans tous les sens, et le développeur reçoit des instructions contradictoires. C’est pas une question de formalisme. C’est une question de cohérence en cascade.

Pour DHS, la couleur principale était l’orange – la même que sur le site personnel de Danilo Duchesnes. Problème : les deux sites se ressemblaient trop. La refonte de site web devait justement créer une séparation visuelle nette. C’est là que la plateforme de marque a vraiment joué son rôle de boussole, pas de check-list.

Le benchmarking : regarder ailleurs pour éviter de copier ses voisins

Avant d’ouvrir un seul fichier de design, Danilo a passé du temps sur une dizaine de sites d’agences digitales. Pas nécessairement des concurrents directs – des agences digitales au sens large. L’objectif : identifier les sections récurrentes, les propositions de valeur mises en avant, les visuels utilisés.

Ce qu’il a observé : la plupart des agences média utilisent beaucoup de texte, peu de visuels originaux, et des méthodologies présentées comme uniques alors qu’elles se ressemblent toutes. Les agences créa, à l’inverse, ont des sites visuellement impressionnants mais souvent illisibles d’un point de vue copywriting.

DHS devait naviguer entre les deux. Mi-média, mi-créa. Ce n’est pas une position simple à tenir sur un site web – et c’est Davina qui l’explique le mieux :

« C’était soit des agences à 100 % média soit des agences à 100 % créa. Alors que nous en fait on a le média et la créa. Donc c’était une difficulté en fait d’allier les deux donc de ne pas perdre une des deux expertises. »

C’est exactement le problème. Et la solution est venue d’un endroit inattendu : le site d’Apple. Dylan mentionne que les animations – ces écrans qui pivotent – n’ont pas été trouvées chez des concurrents mais chez Apple. (Ce qui est rare dans le secteur, et c’est précisément pour ça que ça marche.)

Le benchmarking n’est pas un exercice pour copier ce que font les autres. C’est un exercice pour identifier les angles morts du marché – et décider délibérément où on se place. Danilo a fait le benchmarking depuis un angle copywriting et structure de page. Davina l’a complété avec un regard créatif orienté agences de création. Les deux perspectives combinées ont produit quelque chose que ni l’un ni l’autre n’aurait trouvé seul.

Est-ce que toutes les équipes qui font une refonte de site web prennent le temps de faire ça à deux avec des angles différents ? Rarement.

Le brief : la partie que les agences font à votre place – et c’est souvent une erreur

Troisième étape. Et c’est là que ça devient intéressant, parce que Danilo a fait un choix que peu de clients font spontanément : il a rédigé lui-même le brief, avec le copywriting complet de chaque section, avant de le soumettre à Davina et Dylan.

Concrètement, le document Word contenait : le nom de chaque section, des exemples visuels issus du benchmarking, et le texte définitif – titres, paragraphes, accroches. Cinq pages de site. Une dizaine de sections par page. C’est un travail de fond.

Davina explique pourquoi c’est crucial pour la maquette :

« J’avais la longueur exacte en fait des titres ou des paragraphes et donc pour créer la maquette, c’est beaucoup plus facile parce que je sais directement quelle place vont prendre les éléments. Par contre, si j’avais dû mettre un faux texte, je n’aurais pas réussi à avoir peut-être à être exacte sur la maquette en fait. »

Dit comme ça, ça a l’air simple. Mais la règle derrière est contre-intuitive : copywriting avant design, toujours. Pas l’inverse. Ce n’est pas le designer qui doit imaginer ce que vous voulez dire – c’est vous qui devez le dire, et le designer qui doit le mettre en forme.

Dylan est direct là-dessus : développeur ou maquettiste, ils n’ont pas l’expérience pour faire du copywriting à votre place. Si vous déléguez ça à une agence de développement, vous prenez un risque sérieux sur la clarté du message final.

Et la leçon entrepreneuriale ici est plus large : le brief n’est pas une formalité administrative. C’est le moment où vous forcez votre propre clarté. Danilo le dit explicitement – faire le brief l’a obligé à structurer sa pensée sur ce que DHS voulait vraiment montrer. Avant ça, c’était flou.

La maquette : refonte de site web sans Adobe XD, c’est construire sans plan

Ici on entre dans le cœur technique du projet – côté design, pas développement. Et la première chose à comprendre, c’est la séquence que Davina a suivie.

D’abord, la homepage. Uniquement la homepage. Pas les cinq pages d’un coup.

Sur Adobe XD, elle a construit le squelette : placement des titres, des illustrations, des animations, validation des tailles de typographie. L’idée : établir un système visuel cohérent qui pourra ensuite se décliner sur les autres pages sans recommencer à zéro chaque fois. C’est de la rigueur d’atelier de design – pas de la sur-ingénierie.

Une fois la homepage validée, les autres pages deviennent une déclinaison. Mais Davina insiste sur un point :

« Il faut pas oublier d’apporter une certaine touche de créativité aux autres pages. Donc il doit y avoir une cohérence entre toutes les pages mais elles doivent quand même être différentes et être cohérentes l’une entre elles. »

Cohérence sans uniformité. C’est l’équilibre exact que la plupart des sites ratent – soit tout se ressemble et c’est ennuyeux, soit chaque page a sa propre logique et c’est chaotique.

Sur les couleurs : la transition de l’orange dominant vers un bleu très foncé – quasiment du noir – comme couleur principale répond à un double objectif. D’abord, différencier visuellement DHS du site de Danilo Duchesnes (les deux partageaient le même orange). Ensuite, monter en gamme : le noir évoque le premium, l’expertise, la qualité – là où l’orange seul pouvait sonner startup de 2017.

L’orange reste, mais comme couleur d’accent. Et ça fonctionne précisément parce que le contraste avec le noir est fort. (Le blanc joue aussi un rôle, pour aérer les sections les plus denses.)

Côté univers réseaux sociaux – et c’est une idée que je trouve vraiment bien trouvée – Davina a glissé dans la maquette des éléments visuels directement empruntés à Instagram et Facebook : la façon dont les photos d’équipe sont présentées, les boutons « envoyé », les boutons « liker ». Des codes connus de tout le monde, qui signalent immédiatement la spécialité de l’agence sans qu’on ait besoin de le lire.

Certains éléments ont été abandonnés en cours de route – les petits cœurs animés sur les sections, les likes interactifs. Dylan l’explique sans détour : ressources limitées, arbitrages nécessaires. C’est une limite réelle de tout projet de refonte de site web avec une petite équipe. On ne peut pas tout faire. Et savoir quoi couper sans détruire la cohérence, c’est une compétence à part entière.

Pour ceux qui veulent approfondir la mécanique de coordination dans ce type de projet, la chronique sur la refonte DHS et le deep work donne un autre angle sur comment Danilo a géré ce projet en parallèle de son activité.

Le développement WordPress : quand la maquette est bonne, le dev respire

Dylan Mura travaille avec DHS Digital depuis un an et demi au moment de l’épisode. Il gère le site de Danilo Duchesnes, le site DHS, et le podcast. Un périmètre technique cohérent pour une petite structure.

Ce qu’il dit sur le développement est finalement assez court dans l’épisode – et c’est révélateur. Quand la maquette est bien faite, le développement est moins chaotique. Les décisions sont déjà prises. Le dev n’a pas à interpréter des intentions floues ou combler des vides dans le brief.

WordPress comme plateforme, une maquette Adobe XD validée, un brief avec copywriting complet. C’est le triptyque qui a tenu le projet – avec quand même cinq mois de retard sur le planning initial, pour être honnête. Décembre 2020 → avril 2021. Les erreurs de communication évoquées dans la FAQ de fin d’épisode, les tâches sous-estimées, les allers-retours sur certaines sections : tout ça a du coût en temps.

Et c’est peut-être la leçon la plus utile de tout cet épisode : même avec une bonne méthode, une refonte de site web prend plus longtemps que prévu. Toujours. Si quelqu’un vous dit le contraire, il ment ou il n’a pas encore commencé.

Pour ceux qui pilotent ce type de projet en solo ou en petite équipe, le sujet de déléguer avec confiance sans perdre le contrôle est directement lié – la question de qui fait quoi, et comment on brief quelqu’un correctement, revient dans les deux contextes.

Ce que ça change vraiment de suivre les 5 étapes dans l’ordre

La tentation, dans une refonte de site web, c’est de sauter directement au design. Tu as une idée de ce que tu veux, tu trouves un développeur, tu lui montres deux ou trois sites que tu aimes bien et tu lui dis « fais quelque chose dans ce style ».

Résultat classique : le site est joli mais ne ressemble pas vraiment à ta marque parce que ta marque n’a pas été définie en amont. Les sections ne racontent pas la même histoire parce que le copywriting a été fait après le design, pour remplir les zones de texte. Et six mois plus tard tu trouves que le site vieillit mal, sans trop savoir pourquoi.

Ce que montre le projet DHS, c’est que les étapes 1 et 2 – plateforme de marque et benchmarking – ne sont pas des bonus pour les équipes qui ont du temps. Ce sont les fondations qui déterminent si les étapes 3, 4 et 5 vont tenir.

Franchement, la plupart des petites agences et des entrepreneurs passent à côté de ça. Ils traitent la refonte de site web comme un projet de production – des livrables à cocher – plutôt que comme un exercice de clarification stratégique. Et ça se voit sur le résultat final.

Mais bon – même Danilo, avec cette méthode en tête, a mis cinq mois de plus que prévu. Alors on relativise.

Pour aller plus loin sur la question de l’identité de marque et de la façon dont elle structure toutes les décisions marketing, le bilan 2020 de l’agence DHS donne un contexte utile sur d’où partait Danilo avant ce projet. Et si la question du positionnement freelance vous parle – comment construire une image cohérente quand on travaille seul – l’épisode avec Alexis Minchella de Tribu Indé traite exactement ce sujet sous un angle communauté et personal branding.

Questions fréquentes

Combien de temps prend une refonte de site web pour une petite agence ? +
Ça dépend de la taille du site et de l'équipe, mais le projet DHS Digital - 5 pages, 3 personnes impliquées - a pris environ 8 mois au total, avec 5 mois de retard sur le planning initial. La phase de maquette seule prend plusieurs semaines si elle est faite correctement, avec plusieurs cycles de feedback. En règle générale, prévoyez au moins le double de votre estimation initiale.
Qu'est-ce qu'une plateforme de marque et pourquoi c'est utile avant une refonte de site web ? +
Une plateforme de marque est un document qui formalise la mission de l'entreprise, le descriptif de son activité, sa différenciation concurrentielle et ses valeurs. Elle sert de boussole pour toutes les décisions de design et de copywriting. Sans elle, les designers et développeurs travaillent dans le flou et produisent un site qui ne reflète pas vraiment l'identité de la marque. C'est l'étape que la plupart des entrepreneurs sautent - et c'est souvent là que ça plante.
Faut-il faire le copywriting avant le design pour un site web ? +
Oui, systématiquement. Le copywriting avant le design, c'est la règle. Quand le texte définitif est écrit en amont, le designer sait exactement quelle place prendront les éléments sur la page. Avec un faux texte placeholder, la maquette n'est jamais vraiment représentative du résultat final, et on passe du temps à tout réajuster après.
Quel outil utiliser pour créer une maquette de site web ? +
Adobe XD est l'outil utilisé par Davina Lorenzano pour la maquette du site DHS Digital. Ce n'est pas Canva - une maquette professionnelle demande un outil adapté au prototypage d'interfaces. Figma est une alternative très utilisée aujourd'hui.
Comment se différencier visuellement lors d'une refonte de site web dans un secteur concurrentiel ? +
Le benchmarking est la clé, mais pas uniquement chez vos concurrents directs. DHS Digital a trouvé l'idée de ses animations d'écrans sur le site d'Apple, pas sur des sites d'agences Facebook Ads. Regarder en dehors de votre secteur d'activité produit des idées que vos concurrents n'ont pas - par définition.
Peut-on faire une refonte de site web sans maquette et aller directement au développement ? +
Techniquement oui. En pratique, c'est ce que Danilo Duchesnes appelle une approche 'barbare'. Sans maquette validée, le développeur prend des décisions design pour lesquelles il n'est pas forcément qualifié, les allers-retours explosent, et le résultat final s'éloigne de ce que le client avait en tête. La maquette coûte du temps en amont pour en économiser beaucoup en développement.

Épisodes similaires

  • Business & Entrepreneuriat