La collaboration entre développeur et designer, c’est l’un des points clés d’un projet web réussi. Mal gérée, elle vire au cauchemar : maquettes infaisables, intégrations bâclées, frustration mutuelle. Bien gérée, elle produit des sites qui marchent et qui font la fierté des deux.
Voilà ce que j’ai appris en collaborant avec des dizaines de designers en dix ans.
Le malentendu de base
Le malentendu classique : le designer pense en pixels, le développeur pense en code. Le designer crée une maquette parfaite à 1 440 pixels de large, le développeur l’intègre, et trois choses arrivent.
Premièrement : la maquette ne se transpose pas exactement. Les polices ne rendent pas pareil, les ombres sont différentes selon les navigateurs, certains effets ne sont pas réalisables proprement.
Deuxièmement : la maquette n’a pas pensé au mobile. Sur 375 pixels, certains éléments ne tiennent plus, certaines mises en page doivent être complètement repensées.
Troisièmement : la maquette n’a pas pensé aux états interactifs. Que se passe-t-il quand on hover un bouton ? Quand on clique ? Quand un formulaire échoue ? Quand le contenu est vide ?
Si ces trois sujets ne sont pas anticipés, le développement devient une bataille permanente entre fidélité au design et faisabilité technique.
Les designers que j’aime travailler avec
Trois caractéristiques qui font la différence.
Première caractéristique : ils livrent une maquette responsive. Pas juste une version desktop. Au minimum desktop et mobile, idéalement tablette aussi. Et avec des adaptations claires entre les versions.
Deuxième caractéristique : ils livrent les états interactifs. Hover, focus, active, disabled, loading, success, error. Pas juste l’état normal de chaque élément. Sur Figma, ça prend la forme de variants ou de composants documentés.
Troisième caractéristique : ils communiquent en amont sur les contraintes techniques. « Cette animation est-elle faisable proprement ? » « Cette police a-t-elle un poids variable disponible ? » « Cette ombre fonctionne-t-elle avec ton tooling ? » Le bon designer pose ces questions au lieu de présupposer.
Les développeurs avec qui les designers aiment travailler
Symétriquement, du côté dev.
Première caractéristique : ils respectent le design. Si la maquette dit 24 pixels de marge, le code met 24 pixels, pas 20 ou 25. La discipline visuelle se respecte sauf raison technique justifiée.
Deuxième caractéristique : ils communiquent les écarts. Quand un détail est techniquement impossible ou très coûteux, ils l’expliquent au designer plutôt que de simplifier en douce. Le dialogue ouvre des solutions.
Troisième caractéristique : ils livrent une intégration fidèle dès la première version. Pas une version approximative qu’il faudra retravailler dix fois. Le développeur qui livre du « à peu près » use le designer.
Le workflow qui marche
J’ai stabilisé un workflow en cinq étapes avec les designers réguliers.
Étape 1 : kick-off à trois (client, designer, développeur). On aligne sur les contraintes techniques, le calendrier, les rôles. Le designer comprend ce qui est possible, le développeur comprend la direction artistique attendue.
Étape 2 : design en autonomie. Le designer travaille sur Figma. Pendant cette phase, le développeur n’intervient pas, sauf pour répondre à des questions précises. Le designer doit avoir l’espace créatif.
Étape 3 : revue technique avant validation client. Avant que les maquettes ne partent au client, le développeur les revoit. Faisabilité, performance, responsive, états manquants. Cette étape est cruciale et négligée. Une revue technique d’une heure évite des semaines de bricolage en intégration.
Étape 4 : intégration en mode itératif. Le développeur intègre les pages dans l’ordre prioritaire. Le designer valide le rendu intégré au fur et à mesure (pas seulement à la fin). Les ajustements se font live.
Étape 5 : passes de finition partagées. Une fois l’intégration faite, designer et développeur passent ensemble sur les détails : alignements, espacements, transitions. C’est cette phase qui distingue les bons sites des excellents.
Les points de friction classiques
J’ai listé les disputes les plus fréquentes que je vois entre dev et designer, pour les anticiper.
Friction 1 : le designer livre une maquette desktop seule. Le développeur doit deviner le mobile. Conflit garanti. Solution : exiger les maquettes mobiles dès le brief initial.
Friction 2 : le designer demande une animation complexe. Le développeur dit « trop coûteux ». Conflit. Solution : la revue technique en amont, où on chiffre ensemble ce que ça coûte vs simplification possible.
Friction 3 : le développeur prend des libertés en intégration. « C’est pas exactement comme la maquette mais c’est pareil dans l’esprit. » Le designer voit rouge. Solution : tout écart par rapport à la maquette doit être explicité et validé.
Friction 4 : le designer fait des changements de dernière minute. « Tiens en fait il faudrait changer la police partout. » Le développeur explose. Solution : geler le design à un moment précis. Au-delà, c’est un avenant.
Le rôle du chef de projet
Sur les projets où j’interviens en tant que freelance et où j’ai un designer freelance comme partenaire, on s’organise sans chef de projet officiel. On se parle directement, on s’aligne, on tranche.
Sur les projets plus gros avec une agence ou un client structuré, un chef de projet (interne ou externe) facilite la coordination. Il s’assure que les bons sujets se discutent au bon moment, sans laisser les non-dits s’accumuler.
Mais attention : un chef de projet qui s’interpose entre dev et designer peut aussi nuire. Si chaque échange technique passe par un intermédiaire non-technicien, on perd de la précision. Idéalement, le chef de projet facilite, ne filtre pas.
Ma recommandation pratique
Si vous êtes client et que votre projet implique designer et développeur (souvent deux freelances différents), trois conseils.
Conseil 1 : choisissez d’abord le développeur, demandez-lui de recommander un designer avec qui il a déjà travaillé. La relation existante évite des semaines de friction.
Conseil 2 : prévoyez du temps pour la revue technique avant la validation finale. Pas un quart d’heure, mais une à deux heures dédiées.
Conseil 3 : assistez à au moins une session live entre les deux. Vous comprendrez mieux les enjeux, et vous trancherez plus efficacement quand on vous demandera votre avis.
Le résultat quand ça marche
Quand designer et développeur collaborent vraiment bien, le résultat se voit. Les détails sont nets, les transitions sont fluides, l’expérience utilisateur est cohérente, le site se sent fini, pas bricolé.
Ce sont les projets dont je suis le plus fier, et probablement ceux dont les designers avec qui j’ai bossé sont aussi le plus fiers. Cette qualité ne se décrète pas. Elle se construit, projet après projet, dans une vraie collaboration.