Comment les développeurs frontend peuvent aider à combler le fossé entre les concepteurs et les développeurs

Au cours des neuf dernières années, presque tous les concepteurs avec lesquels j'ai travaillé m'ont exprimé leur frustration de devoir fréquemment passer des jours à donner des commentaires aux développeurs pour corriger les espacements, les tailles de police, les aspects visuels et de mise en page qui n'avaient tout simplement pas été implémentés correctement. . Cela a souvent conduit à affaiblir la confiance entre les concepteurs et les développeurs, et a causé des concepteurs démotivés ainsi qu'une mauvaise ambiance entre les deux disciplines.

Souvent, les développeurs semblent encore avoir la mauvaise réputation d'être trop techniques et ignorants lorsqu'il s'agit de faire attention aux détails que l'équipe de conception a trouvés. Selon un article d'Andy Budd, "[…] de nombreux développeurs sont dans la même position à propos du design - ils ne s'en rendent tout simplement pas compte." En réalité cependant (comme le souligne Paul Boag), "les développeurs [doivent] prendre des décisions de conception tout le temps".

Dans cet article, je fournirai des conseils pratiques aux développeurs frontend pour éviter la frustration et augmenter la productivité lorsqu'ils travaillent avec leur homologue créatif.

Regarder à travers les yeux d'un designer

Imaginons un instant que vous étiez un designer et que vous passiez les dernières semaines, voire des mois, à élaborer un design pour un site Web. Vous et vos coéquipiers avez subi plusieurs révisions internes ainsi que des présentations aux clients, et avez déployé des efforts considérables pour affiner les détails visuels tels que les espaces blancs, les styles de police et les tailles. (À une époque réactive - pour plusieurs tailles d'écran, bien sûr.) Les conceptions ont été approuvées par le client et ont été transmises aux développeurs. Vous vous sentez soulagé et heureux.

Quelques semaines plus tard, vous recevez un e-mail de votre développeur indiquant :

« Le site de staging est mis en place. Voici le lien. Pouvez-vous s'il vous plaît QA ? »

Dans un frisson d'anticipation, vous ouvrez ce lien de mise en scène et après avoir fait défiler certaines pages, vous remarquez que le site semble un peu décalé. Les espacements ne sont même pas proches de ce que votre conception suggérait et vous remarquez quelques défauts dans la mise en page : des polices et des couleurs incorrectes ainsi que des interactions et des états de survol incorrects. Votre excitation commence à s'estomper lentement et à se transformer en un sentiment de frustration. Vous ne pouvez pas vous empêcher de vous demander : « Comment cela a-t-il pu arriver ?

La recherche de raisons

Peut-être y avait-il juste beaucoup de malentendus malheureux dans la communication entre les concepteurs et les développeurs. Néanmoins, vous continuez à vous demander :

• À quoi ressemblait la remise des dessins ? Y avait-il seulement quelques fichiers PDF, Photoshop ou Sketch partagés par e-mail avec quelques commentaires, ou y avait-il une véritable réunion de passation de pouvoir au cours de laquelle divers aspects tels qu'un système de conception possible, une typographie, un comportement réactif, des interactions et des animations ont été discutés ?
• Existe-t-il des prototypes interactifs ou de mouvement permettant de visualiser certaines interactions ?
• Une liste d'aspects importants avec des niveaux de priorité définis a-t-elle été créée ?
• Combien de conversations ont eu lieu — avec les concepteurs et les développeurs réunis dans la même pièce ?

Étant donné que la communication et le transfert sont deux points clés très importants, examinons chacun de plus près.

La communication est la clé

Concepteurs et développeurs, veuillez vous parler. Parlez beaucoup . Le plus tôt dans le projet et le plus souvent, mieux c'est. Si possible, examinez ensemble le travail de conception en cours au début du projet (et régulièrement) afin d'évaluer en permanence la faisabilité et d'obtenir des contributions interdisciplinaires. Les concepteurs et les développeurs se concentrent naturellement sur différents aspects de la même pièce et voient donc les choses sous des angles et des perspectives différents .

L'enregistrement précoce permet aux développeurs de se familiariser avec le projet afin qu'ils puissent commencer à rechercher et à planifier à l'avance les termes techniques et à apporter leurs idées sur la manière d'optimiser éventuellement les fonctionnalités. Le fait d'avoir des check-ins fréquents rapproche également l'équipe sur le plan personnel et social , et vous apprenez à vous approcher les uns les autres pour communiquer efficacement.

Le passage de la conception au développement

À moins qu'une organisation ne suive un flux de travail véritablement agile, un transfert initial des compositions de conception et des actifs (de l'équipe de conception aux développeurs) se produira probablement à un moment donné d'un projet. Ce transfert - s'il est effectué de manière approfondie - peut constituer une base solide de connaissances et d'accords entre les deux parties. Par conséquent, il est essentiel de ne pas se précipiter et de prévoir du temps supplémentaire.

Posez beaucoup de questions et parlez de chaque exigence, page, composant, fonctionnalité, interaction, animation, n'importe quoi - et prenez des notes. Si les choses ne sont pas claires, demandez des éclaircissements . Par exemple, lorsque vous travaillez avec des équipes externes ou contractuelles, les concepteurs et les développeurs peuvent signer les notes prises comme document d'accord mutuel pour référence future.

Les compositions de conception plates et statiques sont bonnes pour montrer les aspects graphiques et de mise en page d'un site Web, mais manquent évidemment de la représentation appropriée des interactions et des animations. Demander des prototypes ou des démonstrations de travail d'animations complexes créera une vision plus claire de ce qui doit être construit pour toutes les personnes impliquées.

De nos jours, il existe une large gamme d'outils de prototypage disponibles que les concepteurs peuvent utiliser pour modéliser les flux et les interactions à différents niveaux de fidélité. Javier Cuello explique comment choisir le bon outil de prototypage pour votre projet dans l'un de ses articles complets.

Chaque projet est unique, ses exigences le sont aussi. En raison de ces exigences, toutes les fonctionnalités conceptualisées ne peuvent pas toujours être construites. Souvent, le temps et les ressources disponibles pour construire quelque chose peuvent être un facteur limitant. De plus, les contraintes peuvent provenir d'exigences techniques telles que la faisabilité, l'accessibilité, les performances, la convivialité et la prise en charge de plusieurs navigateurs, d'exigences économiques telles que le budget et les frais de licence ou de contraintes personnelles telles que le niveau de compétence et la disponibilité des développeurs.

Alors, que se passe-t-il si ces contraintes provoquent des conflits entre concepteurs et développeurs ?

Trouver des compromis et construire des connaissances partagées

Afin d'expédier avec succès un projet dans les délais et de répondre à toutes les exigences définies, il est presque inévitable de trouver des compromis entre les deux disciplines. Les développeurs doivent apprendre à parler aux concepteurs en termes non techniques lorsqu'ils expliquent les raisons pour lesquelles les choses doivent changer ou ne peuvent pas être construites dans une situation spécifique.

Au lieu de simplement dire « Désolé, nous ne pouvons pas construire cela », les développeurs doivent essayer de donner une explication compréhensible pour les concepteurs et, dans le meilleur des cas, préparer des suggestions pour une solution alternative qui fonctionne dans les limites connues. Étayer votre point de vue avec des statistiques, des recherches ou des articles peut aider à souligner votre argument. De plus, si le timing est un problème, peut-être que la mise en œuvre de certaines parties chronophages peut être déplacée vers une phase ultérieure du projet ?

Même si ce n'est pas toujours possible, le fait d'avoir des concepteurs et des développeurs assis côte à côte peut raccourcir les boucles de rétroaction et faciliter l'élaboration d'une solution compromise. L'adaptation et le prototypage peuvent être effectués directement via le codage et l'optimisation avec DevTools open.

Montrez à vos collègues concepteurs comment utiliser DevTools dans un navigateur afin qu'ils puissent modifier les informations de base et prévisualiser les petites modifications dans leur navigateur (par exemple, rembourrages, marges, tailles de police, noms de classe) à la volée.

Si la structure du projet et de l'équipe le permet, la construction et le prototypage dans le navigateur dès que possible peuvent donner à toutes les personnes impliquées une meilleure compréhension du comportement réactif et peuvent aider à éliminer les bogues et les erreurs au début du projet.

Plus les concepteurs et les développeurs travaillent ensemble longtemps, mieux les concepteurs comprendront ce qui est plus facile et ce qui est plus difficile à construire pour les développeurs. Au fil du temps, ils peuvent éventuellement se référer à des solutions qui ont fonctionné pour les deux parties dans le passé :

"Nous avons utilisé cette solution pour trouver un compromis dans le projet A. Pouvons-nous également l'utiliser pour ce projet ?"

Cela aide également les développeurs à avoir une meilleure idée des détails sur lesquels les concepteurs sont très spécifiques et des aspects visuels qui sont importants pour eux.

Les concepteurs s'attendent à ce que l'interface ressemble (et fonctionne) à leur conception

Le fichier de conception Vs. Comparaison des navigateurs

Une technique utile pour éviter la frustration des concepteurs consiste à faire une simple comparaison gauche-droite entre le fichier de conception qui vous a été remis et à quoi ressemble votre état de développement actuel. Cela peut sembler trivial, mais en tant que développeur, vous devez vous occuper de tant de choses qui doivent fonctionner sous le capot que vous avez peut-être manqué certains détails visuels. Si vous constatez des écarts notables, corrigez-les simplement.

Pensez-y de cette façon : chaque détail de votre implémentation qui ressemble exactement à ce qu'il a été conçu vous fait gagner à vous et au concepteur un temps précieux et des maux de tête , et encourage la confiance. Tout le monde n'a peut-être pas le même niveau d'attention aux détails, mais pour entraîner votre œil à remarquer les différences visuelles, un tour rapide de Can't Unsee peut être une bonne aide.

Cela me rappelle avec nostalgie un jeu auquel nous jouions il y a longtemps appelé "Find it". Vous deviez trouver des écarts en comparant deux images apparemment similaires afin de marquer des points.

Pourtant, vous pensez peut-être :

"Et s'il n'y a tout simplement pas de système notable de tailles et d'espacements de police dans la conception ?"

Eh bien, bon point ! L'expérience m'a montré qu'il peut être utile d'entamer une conversation avec le(s) designer(s) en demandant des éclaircissements plutôt que de commencer radicalement à changer les choses par vous-même et de créer des surprises indésirables pour le(s) designer(s) plus tard.

Apprenez les règles typographiques et de conception de base

Comme l'affirme Oliver Reichenstein dans un de ses articles, 95% de l'information sur le web est écrite. Par conséquent, la typographie joue un rôle essentiel non seulement dans la conception Web, mais également dans le développement. Comprendre les termes et concepts de base de la typographie peut vous aider à communiquer plus efficacement avec les concepteurs et vous rendra également plus polyvalent en tant que développeur. Je recommande de lire l'article d'Oliver car il explique l'importance de la typographie sur le Web et explique des termes tels que micro- et macro-typographie .

Dans le "Guide de référence pour la typographie dans la conception Web mobile", Suzanne Scacca couvre en détail la terminologie typographique telle que la police, la police, la taille, l'épaisseur, le crénage, l'interlignage et le suivi, ainsi que le rôle de la typographie dans la conception Web moderne.

Si vous souhaitez élargir davantage votre horizon typographique, le livre de Matthew Butterick "La typographie pratique de Butterick" pourrait valoir la peine d'être lu. Il fournit également un résumé des règles clés de la typographie.

Une chose que j'ai trouvée particulièrement utile dans la conception Web réactive est qu'il faut viser une longueur de ligne moyenne (caractères par ligne) de 45 à 90 caractères, car les lignes plus courtes sont plus confortables à lire que les lignes plus longues.

Les développeurs doivent-ils concevoir ?

Il y a eu beaucoup de discussions pour savoir si les concepteurs devraient apprendre à coder, et vous vous posez peut-être la même question dans l'autre sens. Je crois qu'on peut difficilement exceller dans les deux disciplines, et c'est très bien.

Rachel Andrew explique bien dans son article "Travailler ensemble : comment les concepteurs et les développeurs peuvent communiquer pour créer de meilleurs projets" que, pour collaborer plus efficacement , nous devons tous apprendre quelque chose du langage, des compétences et des priorités de nos coéquipiers afin que nous puissions peut créer un langage commun et des domaines d'expertise qui se chevauchent.

Une façon de devenir plus compétent dans le domaine de la conception est un cours en ligne appelé "Design for Developers" qui est offert par Sarah Drasner dans lequel elle parle des principes de mise en page de base et de la théorie des couleurs - deux domaines fondamentaux de la conception Web.

"Plus vous apprenez en dehors de votre propre discipline, c'est en fait mieux pour vous [...] en tant que développeur."

—Sarah Drasner

Le centre visuel

En collaborant avec des designers, j'ai appris la différence entre le centre mathématique et visuel. Lorsque nous voulons attirer l'attention du lecteur sur un certain élément, le point focal naturel de notre œil se situe juste un peu au-dessus du centre mathématique de la page.

Nous pouvons appliquer ce concept, par exemple, pour positionner des modaux ou tout type de superpositions. Cette technique nous aide à attirer naturellement l'attention de l'utilisateur et rend le design plus équilibré :

Nous sommes tous dans le même bateau

Dans les environnements d'agence au rythme rapide et pas si agiles avec des délais serrés, les développeurs sont souvent invités à mettre en œuvre des interfaces réactives entièrement fonctionnelles basées sur une maquette mobile et de bureau. Cela oblige inévitablement le développeur à prendre des décisions de conception tout au long du processus. Des questions telles que "A quelle largeur allons-nous réduire la taille de la police des titres ?" ou "Quand devrions-nous passer de notre disposition à trois colonnes à une seule colonne ?" peuvent survenir.

De plus, dans le feu de l'action, il peut arriver que des détails tels que les états d'erreur, les notifications, les états de chargement, les modaux ou les styles de pages 404 passent simplement entre les mailles du filet. Dans de telles situations, il est facile de pointer du doigt et de blâmer les personnes qui auraient dû y penser plus tôt. Idéalement, les développeurs ne devraient jamais être mis dans une telle situation, mais que se passe-t-il si c'est le cas ?

Lorsque j'ai écouté le fondateur et PDG d'Ueno, Haraldur Thorleifsson, parler lors d'une conférence à San Francisco en 2018, il a présenté deux de leurs valeurs fondamentales :

"Rien ici n'est le problème de quelqu'un d'autre."

« Nous ramassons les déchets que nous n'avons pas déposés.

Que se passe-t-il si davantage de développeurs commencent de manière proactive à modéliser les pièces manquantes mentionnées ci-dessus aussi bien que possible en premier lieu, puis à affiner avec le concepteur assis à côté d'eux ? Les sites Web vivent dans le navigateur, alors pourquoi ne pas l'utiliser pour créer et affiner ?

Bien que les pièces manquantes ou oubliées ne soient pas toujours idéales, j'ai appris dans mes expériences passées que cela nous a toujours aidés à avancer plus rapidement et à éliminer les erreurs à la volée - en équipe .

Bien sûr, cela ne signifie pas que les concepteurs doivent être rejetés dans le processus. Cela signifie que les développeurs doivent essayer de rencontrer respectueusement les concepteurs à mi-chemin en faisant preuve d'initiative dans la résolution de problèmes. En plus de cela, en tant que développeur, j'étais beaucoup plus apprécié par l'équipe simplement pour mon attention et ma responsabilité.

Bâtir la confiance entre les concepteurs et les développeurs

Avoir une relation de confiance et positive entre l'équipe créative et technique peut fortement augmenter la productivité et les résultats du travail. Alors, que pouvons-nous, en tant que développeurs, faire pour accroître la confiance entre les deux disciplines ? Voici quelques suggestions:

1. Montrez un oeil pour les détails .
   Construire des choses exactement comme elles ont été conçues montrera aux concepteurs que vous vous souciez de vous et leur fera sourire.
2. Communiquez avec respect .
   Nous sommes tous des êtres humains dans un environnement professionnel cherchant le meilleur résultat possible. Le respect de la discipline de l'autre devrait être la base de toute communication.
3. Vérifiez tôt et régulièrement .
   Impliquer les développeurs dès le départ peut aider à éliminer les erreurs dès le début. Grâce à une communication fréquente, les membres de l'équipe peuvent développer un langage commun et une meilleure compréhension des positions de chacun.
4. Rendez-vous disponible .
   Avoir au moins une fenêtre facultative de 30 minutes par jour pendant laquelle les concepteurs peuvent discuter d'idées avec les développeurs peut donner aux concepteurs le sentiment d'être soutenus. Cela donne également aux développeurs la possibilité d'expliquer des choses techniques complexes avec des mots que les personnes moins techniques peuvent mieux comprendre.

Le résultat : une situation gagnant-gagnant

Avoir à passer moins de temps en QA grâce à une communication efficace et à une bonne remise des conceptions donne à la fois à l'équipe de création et de développement plus de temps pour se concentrer sur la construction de choses réelles et moins de maux de tête. Cela crée finalement une meilleure atmosphère et renforce la confiance entre les concepteurs et les développeurs. La voix des développeurs frontaux qui montrent de l'intérêt et des connaissances dans certains domaines liés à la conception sera davantage entendue lors des réunions de conception.

Contribuer de manière proactive à trouver un compromis entre les concepteurs et les développeurs et à résoudre les problèmes en tant que développeur peut vous donner un sentiment plus large d'appropriation et d'implication dans l'ensemble du projet. Même dans l'industrie créative en plein essor d'aujourd'hui, il n'est pas facile de trouver des développeurs qui, en plus de leurs compétences techniques, se soucient des détails visuels et en ont l'œil. Cela peut être votre opportunité d'aider à combler le fossé dans votre équipe.

Ressources associées

• "Comment choisir le bon outil de prototypage", Javier Cuello
• "Un guide de référence pour la typographie dans la conception de sites Web mobiles", Suzanne Scacca
• "La typographie pratique de Butterick", Matthew Butterick
• "Travailler ensemble : comment les concepteurs et les développeurs peuvent communiquer pour créer de meilleurs projets", Rachel Andrew
• "Conception pour les développeurs", Sarah Drasner, Frontend Masters
• "Le Web Design est composé à 95% de Typographie", Oliver Reichenstein
• "Can't Unsee", un quiz sur navigateur pour entraîner votre sens de la reconnaissance des détails visuels.