Comment les développeurs frontaux peuventils aider à combler le fossé entre concepteurs et développeurs
À propos de l'auteur
Stefan Kaltenegger est un développeur front-créatif qui aime travailler à l'intersection du design et de la technologie. En plus du travail, il partage son expérience dans… Pour en savoir plus sur Stefan …
Les développeurs sont généralement connus pour être les derniers à laisser leurs empreintes digitales avant qu'un site Web ou une sorte de produit Web ne soit expédié. De toute évidence, beaucoup de responsabilités sont en jeu et la qualité de leur travail peut faire un projet excellent ou échouer. Cet article contient des suggestions sur ce que les développeurs front-end peuvent faire pour mieux réduire l'écart entre les concepteurs et les développeurs.
Au cours des neuf dernières années, presque tous les concepteurs avec qui j'ai travaillé auparavant m'ont fait part de leur frustration à propos de Passez des jours à informer les développeurs sur la correction des espacements, de la taille des polices, des aspects visuels et de la mise en page qui n'ont tout simplement pas été mis en œuvre correctement. Cela a souvent conduit à affaiblir la confiance entre les concepteurs et les développeurs et a causé une mauvaise atmosphère entre les deux disciplines.
Bien souvent, les développeurs semblent toujours avoir la mauvaise réputation d’être trop techniques et ignorants. être attentif aux détails, l'équipe de conception a proposé. Selon un article de Andy Budd "[…] de nombreux développeurs sont dans la même position en ce qui concerne le design – ils ne le réalisent tout simplement pas." En réalité, Paul Boag «les développeurs [need to] prennent des décisions de conception à tout moment.»
Dans cet article, je donnerai des conseils pratiques aux développeurs front-end pour éviter les frustrations et augmenter la productivité lorsqu'ils travaillent avec leurs homologues créatifs.
Regard dans les yeux d'un concepteur
Imaginons un instant que vous soyez un concepteur et que vous ayez passé les dernières semaines – si ce n'est des mois – à concevoir un site Web. Vos coéquipiers et vous-même avez effectué de nombreuses révisions internes ainsi que des présentations de clients et déployé des efforts considérables pour peaufiner les détails visuels tels que les espaces, les styles de police et les tailles. (Dans une ère 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, votre développeur vous envoie un message indiquant:
«Le site de mise en scène est configuré. Voici le lien. Pouvez-vous s'il vous plaît faire un test de qualité? »
Dans un élan d’anticipation, vous ouvrez ce lien de mise en scène et, après avoir parcouru certaines pages, vous remarquerez que le site a un aspect un peu louche. Les espacements ne sont même pas proches de ce que votre conception suggérait et vous remarquiez quelques défauts dans la présentation: des polices et des faces de police incorrectes, ainsi que des interactions et des états de survol incorrects. Votre enthousiasme commence à s'estomper lentement et à se transformer en un sentiment de frustration. Vous ne pouvez pas vous empêcher, mais vous demandez vous-même: «Comment cela a-t-il pu arriver?»
The Search For Reasons
Il se peut qu’il y ait eu beaucoup de malentendus malheureux dans la communication entre les concepteurs et les développeurs. Néanmoins, vous continuez à vous demander:
À quoi ressemblait le transfert des dessins? Y avait-il seulement quelques fichiers PDF, Photoshop ou Sketch partagés par courrier électronique avec des commentaires, ou y avait-il une réunion de passation au cours de laquelle divers aspects, tels que le système de conception, la typographie, le comportement réactif, les interactions et les animations, étaient discutés? [19659015] Existait-il des prototypes interactifs ou animés 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 deux concepteurs et développeurs
Depuis la communication et le passation sont deux points essentiels très importants, examinons-les de plus près.
La communication est la clé
Designers et les développeurs, s'il vous plaît parler les uns aux autres. Parlez beaucoup . Le plus tôt dans le projet et le plus souvent, mieux c'est. Si possible, examinez ensemble (et régulièrement) les travaux de conception en cours au début du projet afin d’évaluer en permanence la faisabilité et d’obtenir un apport interdisciplinaire. Les concepteurs et les développeurs se concentrent naturellement sur différents aspects de la même partie et, par conséquent, voient les choses sous des angles et sous des perspectives différentes .
Arriver à l'avance permet aux développeurs de se familiariser avec le projet afin de pouvoir commencer à rechercher et planifier en avance sur les termes techniques et apporter leurs idées sur la façon d'optimiser éventuellement les fonctionnalités. Les enregistrements fréquents réunissent également l'équipe sur le plan personnel et social et vous apprenez à vous approcher pour communiquer efficacement.
Le passage du contrôle de la conception au développement
À moins qu'une organisation suit un flux de travail vraiment agile, un transfert initial de composants de conception et d’actifs (de l’équipe de conception aux développeurs) aura probablement lieu à un moment donné dans 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 le presser et de prévoir du temps supplémentaire.
Posez beaucoup de questions et discutez de chaque exigence, page, composant, fonctionnalité, interaction, animation, n'importe quoi – et prenez Remarques. Si les choses ne sont pas claires, demandez des éclaircissements . Par exemple, lorsqu'ils travaillent avec des équipes externes ou contractuelles, les concepteurs et les développeurs peuvent approuver les notes prises comme document d'accord mutuel pour référence future.
Les illustrations de conception non hiérarchique et statique permettent de montrer les aspects graphique et de présentation de un site Web mais manquent évidemment de la représentation correcte des interactions et des animations. Demander des prototypes ou des démonstrations actives d'animations complexes créera une vision plus claire de ce qui doit être construit pour toutes les personnes impliquées.
Il existe aujourd'hui un large éventail d'outils de prototypage disponibles que les concepteurs peuvent utiliser pour simuler des flux et des 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 détaillés.
Chaque projet est unique, de même que ses exigences. 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 multi-navigateurs, d'exigences économiques telles que le budget et les droits de licence ou de contraintes personnelles telles que le niveau de compétence et la disponibilité des développeurs. [19659005] Alors, que se passera-t-il si ces contraintes génèrent des conflits entre concepteurs et développeurs?
Trouver des compromis et développer des connaissances communes
Afin de réussir l'envoi d'un projet et de respecter toutes les exigences définies, il est généralement 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 des modifications sont nécessaires ou ne peuvent pas être intégrées à une situation spécifique.
Au lieu de simplement dire: «Désolé, nous ne pouvons pas créer cela, ”Les développeurs devraient essayer de donner une explication compréhensible pour les concepteurs et – dans le meilleur des cas – préparer des suggestions pour une solution alternative respectant les contraintes connues. Soutenir votre argument avec des statistiques, des recherches ou des articles peut aider à souligner votre argument. En outre, si le choix du moment est un problème, la mise en œuvre de composants fastidieux peut éventuellement être déplacée vers une phase ultérieure du projet
. Même si cela n’est pas toujours possible, il est possible de raccourcir la position des concepteurs et des développeurs. boucles de rétroaction et facilitent la recherche 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 de leur navigateur (par exemple, les marges, les marges, les polices de caractères).
Si le projet et la structure de l’équipe le permettent, la construction et le prototypage dans le navigateur le plus tôt possible peuvent permettre à toutes les personnes impliquées de mieux comprendre le comportement réactif et peuvent aider à éliminer les bugs. et erreurs au tout début du projet du projet.
Plus les concepteurs et les développeurs travaillent longtemps, plus les concepteurs seront nombreux à comprendre 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 côtés dans le passé:
"Nous avons utilisé cette solution pour trouver un compromis dans le projet A. Pouvons-nous également l'utiliser pour ce projet?" [19659011] Cela aide également les développeurs à mieux cerner les détails les plus spécifiques et les aspects visuels qui les intéressent.
Les concepteurs s'attendent à ce que l'interface soit semblable à leur conception (1965), ainsi qu'à leur conception
. Comparaison entre navigateurs
Pour éviter toute frustration des concepteurs, il est utile de faire une comparaison gauche-droite simple entre le fichier de conception que vous avez reçu et l'état actuel de votre développement. Cela peut sembler trivial, mais en tant que développeur, vous devez vous occuper de tellement de choses qui doivent fonctionner sous le capot que vous avez peut-être manqué certains détails visuels. Si vous constatez des différences notables, corrigez-les simplement.
Pensez-y de la manière suivante: chaque détail de votre implémentation qui a exactement l'aspect qu'il a été conçu vous fait gagner un temps précieux ainsi que les maux de tête . encourage la confiance. Tout le monde n’a peut-être pas le même niveau d’attention aux détails, mais pour vous entraîner à remarquer les différences visuelles, une petite série de Can't Unsee pourrait vous être utile.
(Crédits image: Can't Unsee ) ( Grand aperçu ) [19659044] Cela me rappelle avec nostalgie un jeu auquel nous jouions autrefois et qui s'appelait «Trouvez-le». Il fallait trouver des divergences en comparant deux images apparemment similaires pour marquer des points. (Crédits image: Mordillo les ont trouvées ) ( Grand aperçu )
Pourtant, vous pensez peut-être:
"Et s'il n'y avait tout simplement pas de système visible de tailles et d'espacements de police dans le dessin?"
Eh bien, bon point ! L'expérience m'a montré qu'il peut être utile d'entamer une conversation avec le ou les concepteurs en demandant de demander des éclaircissements plutôt que de commencer radicalement à changer les choses par vous-même et à créer ultérieurement des surprises non souhaitées pour le ou les concepteurs.
Apprenez les règles de base de conception et de typographie
Comme Oliver Reichenstein le dit dans l'un de ses articles, 95% des informations sur le web sont du langage écrit . La typographie joue donc un rôle essentiel non seulement dans la conception de sites Web, mais aussi 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 au cours duquel il explicite 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 de manière approfondie la terminologie de la typographie, telle que la police de caractères, la taille, le poids, le crénage, le classement et le suivi, ainsi que le rôle de la typographie dans la conception Web moderne.
Une chose que j’ai trouvée particulièrement utile en conception Web réactive est qu’il faut viser une longueur de ligne moyenne (caractères par ligne) de 45. Comptez jusqu'à 90 caractères car les lignes plus courtes sont plus faciles à lire que les lignes plus longues.
Comparaison de différentes longueurs de lignes ( Grand aperçu )
Developers Design?
Il a été beaucoup question de 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.
Un moyen de devenir plus Knowledgable dans le domaine du design est un cours en ligne intitulé " Design for Developers " proposé par Sarah Drasner dans lequel elle présente les principes de base de la mise en page et la théorie des couleurs – deux domaines fondamentaux. dans la conception web.
«Plus vous en apprenez en dehors de votre discipline, plus vous êtes développeur […].»
– Sarah Drasner
The Visual Center
En collaborant avec le design J’ai appris la différence entre le centre mathématique et le centre visuel. Lorsque nous voulons attirer l’attention du lecteur sur un certain élément, le point de focalisation naturel de notre œil se situe juste au-dessus du centre mathématique de la page.
Nous pouvons appliquer ce concept, par exemple, au positionnement de modaux ou de tout type de superpositions. Cette technique nous aide à attirer naturellement l'attention de l'utilisateur et à faire en sorte que le dessin apparaisse plus équilibré:
Dans des environnements d'agences rapides et agiles, avec des délais serrés, il est souvent demandé aux développeurs de mettre en œuvre des fonctionnalités complètes interfaces réactives basées sur une maquette de 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 "De quelle largeur réduirons-nous la taille de la police des titres?" Ou "Quand devons-nous passer de la disposition à trois colonnes à une seule colonne?" Peuvent se poser.
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 404 pages ne tombent tout simplement pas entre les mailles du filet. Dans de telles situations, il est facile de commencer à pointer du doigt et à blâmer les personnes qui auraient dû y penser plus tôt. Dans l'idéal, les développeurs ne devraient jamais être placés dans une telle situation, mais que se passerait-il si c'était le cas?
Lorsque j'ai écouté le fondateur et PDG d'Ueno, Haraldur Thorleifsson, prendre la parole lors d'une conférence à San Francisco en 2018, il en a présenté deux leurs valeurs fondamentales:
"Rien ici n'est le problème de quelqu'un d'autre."
"Nous récupérons les ordures que nous n'avons pas déposées."
Et si davantage de développeurs commençaient de manière proactive à se moquer des manquants susmentionnés les pièces 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 construire et peaufiner?
Bien qu’il soit peut-être inutile d’oublier des parties manquantes ou oubliées, j’ai appris au cours de mes expériences passées que cela nous a toujours permis d’avancer plus rapidement et plus efficacement. éliminer les erreurs à la volée – en tant qu'équipe .
Bien entendu, cela ne signifie pas que les concepteurs doivent être rejetés dans le processus. Cela signifie que les développeurs devraient essayer de rencontrer respectueusement les concepteurs à mi-chemin en faisant preuve d'initiative dans la résolution de problèmes. De plus, l'équipe appréciait beaucoup plus mes responsabilités de développeur.
Créer la confiance entre concepteurs et développeurs
Le fait d'avoir une relation de confiance et positive entre l'équipe de créateurs et le personnel technique peut augmenter considérablement la productivité. et résultat du travail. Alors, que pouvons-nous, en tant que développeurs, faire pour accroître la confiance entre les deux disciplines? Voici quelques suggestions:
Montrez un œil pour plus de détails . Construire des choses exactement comme elles ont été conçues montrera aux concepteurs que vous vous souciez d'eux et leur donnera un grand sourire.
Communiquez avec respect . Nous sommes tous des êtres humains, dans un environnement professionnel, qui aspirons au meilleur résultat possible. Faire preuve de respect pour la discipline de chacun devrait être à la base de toute communication.
Enregistrez-vous tôt et régulièrement . L'implication des développeurs dès le début peut aider à éliminer les erreurs plus tôt. 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.
Tenez-vous disponible . Disposez d'au moins une fenêtre facultative de 30 minutes par jour où les concepteurs peuvent discuter. les idées avec les développeurs peuvent donner aux concepteurs le sentiment d'être soutenus. Cela donne également aux développeurs l’occasion d’expliquer des choses techniques complexes avec des mots plus compréhensibles pour les non-techniciens.
Le résultat: une situation gagnant-gagnant
Obligation de passer moins de temps à l’assurance-qualité grâce à une communication efficace et une Un transfert adéquat des conceptions donne à la fois aux développeurs et aux développeurs plus de temps pour se concentrer sur la création de tâches réelles et moins de maux de tête. Cela crée finalement une meilleure atmosphère et instaure un climat de confiance entre les concepteurs et les développeurs.
Contribuer de manière proactive à trouver un compromis entre concepteurs et développeurs et à résoudre des problèmes en tant que développeur. peut vous donner un sens plus large d'appropriation et d'implication dans l'ensemble du projet. Même dans le secteur de la création en plein essor actuel, il n’est pas facile de trouver des développeurs qui, outre leurs compétences techniques, s’intéressent et s’intéressent particulièrement aux détails visuels. Cela peut être votre opportunité de contribuer à combler le fossé qui sépare votre équipe.
(dm, yk, il)