Concevoir un design conforme pour les dev

Innovantic, Atelier Digital à Bordeaux

LalyUI Designer

12 décembre 2022

Designers et développeurs, une collaboration indispensable

Dans un processus de conception web, on a souvent tendance à penser que le design et le développement existent sur deux plans différents et qu’ils ne sont pas liés. Pourtant, il s’agit de deux pôles dont la collaboration est plus qu’importante pour l’aboutissement d’un projet digital. 

Deux pôles indissociables qui ont pourtant parfois du mal à travailler ensemble 🤔

Alors, comment faire en sorte que cette collaboration se passe pour le mieux des deux côtés ? Comment faciliter la vie à vos développeurs pour qu’ils puissent reproduire au mieux les maquettes pour un rendu final idéal ?

Chez Innovantic, c’est une machine bien huilée.

Depuis des années, notre équipe design travaille étroitement avec les développeurs de l’agence. À force de projets, d'essais et d’erreurs, nous en sommes arrivés à amasser tout un tas de bonnes pratiques qui nous permettent aujourd’hui de livrer des maquettes de qualité pour faciliter le travail de nos développeurs.

Parce que même si le cœur de métier n’est pas le même, la finalité se rejoint : fournir un projet fini et parfaitement conforme. Il s’agit donc de voir, à travers cet article, toutes les actions que peut prendre une équipe design pour collaborer plus facilement avec les développeurs (internes ou externes) et leur fournir des maquettes idéalement pensées pour un développement en toute sérénité. 

Sur le terrain, comment fait-on ?

Les outils de conception

Aujourd’hui, quand on vous parle web-design et qu’on vous dit “Adobe xd”, “Figma” ou encore “Sketch”, ça vous parait un peu évident. Pourtant, pas forcément. On se rappelle encore douloureusement des maquettes sur Illustrator ou Photoshop. Et aussi surprenant que cela puisse paraître : ça se fait encore. Donc si nous pouvons donner ici un premier conseil pour faciliter la livraison de vos maquettes : prenez le bon outil !

Pourquoi ces trois là ? Et bien parce qu’ils sont clairement les pionniers en matière de conception design. Il s'agit là de logiciels spécifiquement pensés pour le design et pour la livraison de maquettes. On y retrouve la possibilité de créer des composants, des bibliothèques et de profiter d’une large collection de plug-in pour faciliter votre travail et également transmettre à l'équipe de dev tout le détail de l'organisation des layouts et de votre design system.

Ils ont également la spécificité de vous proposer directement le prototypage des maquettes : un indispensable pour montrer les parcours et faire comprendre les différents comportements attendus à votre équipe de dev. Des comportements qui, souvent, nous semblent évidents et naturels, mais qui ne le sont pas forcément pour les développeurs. Prototyper votre projet permettra donc de mettre en lumière toutes ces subtilités et de clairement faire comprendre l'objectif de l'interface. De l'apparence d'un élément d'action, à l’animation en passant par les composants fixes, il devient aujourd'hui essentiel de pouvoir se reposer sur le prototypage.

Si les trois logiciels précédents vous proposent un prototypage plus que décent (chaque mise à jour apportant un peu plus de fonctionnalités et d’actions) vous pouvez également choisir un logiciel externe comme par exemple Invision. Leader depuis plusieurs années maintenant, il n’y a que très peu de choses que cette solution ne vous permettra pas de faire.

Logo Figma Sketch AdobeXD InVision

Les comportements selon les appareils

Avant même de commencer votre design, il est essentiel de prendre en compte tous les appareils sur lesquels il verra le jour. Clairement, il s’agit d’une étape plus qu’importante pour le designer, on ne travaille pas pareil sur mobile et sur desktop, mais il est également important de noter que ce travail sera forcément en lien avec votre équipe web. 

Est-ce que le produit final sera sur ordinateur ? ou principalement sur mobile ? un produit mobile first utilisable sur l'ordinateur sera très différent d'un produit principalement destiné aux grands écrans des ordinateurs (même si ce dernier propose un usage simplifié pour mobile). D'ailleurs certains produits ont des usages totalement différents sur l'ordinateur et sur mobile et dans ce cas, il y a deux interfaces distinctes (principe de navigation différent et fonctions disponibles différentes). L’équipe web ne doit pas à avoir à se poser de questions en termes de design et de comportement. Par exemple, comment réagit notre design sur un petit écran et sur un plus large ? Est-ce que mes marges restent fixes et mon body s’agrandit ? Ou est-ce que mon body reste toujours de la même taille et mes marges augmentent pour s’adapter à un écran plus grand ? À partir de quelle taille mon menu disparaît-il pour passer dans sa version compacte ? 

De même, quand il s’agit d'applications mobiles, la taille varie énormément d’un téléphone à l’autre. Il est donc toujours important de designer sur un grand et sur un petit smartphone. Les boutons, tailles de typographies et autres subtilités peuvent en être grandement impactés. 

Toutes ces questions sont donc à réfléchir en amont. Ce n'est pas à votre équipe web de deviner le comportement de votre maquette. Ce sont donc autant d'écrans à réfléchir qu’à fournir, pensez donc bien à faire un récapitulatif au début et à la fin de votre design (vous pouvez très bien designer ces écrans en fin de projet et montrer seulement les comportements les plus singuliers). 

Responsive Design

La nomenclature

C’est le petit détail qui fait toute la différence. En tant que designer, parfois, on est un peu dans le jus, à faire ci et ça, à changer tel composant et à repartir en arrière, alors parfois, on en oublie presque la base : bien nommer ses éléments. Et bien sûr, dans une équipe design, ça aide, mais c’est surtout bien pratique pour votre équipe de dev. 

Il est donc essentiel de bien penser à nommer ses composants, ses icônes, illustrations ou autres. C’est un petit travail assez ennuyeux, mais qui peut faire gagner énormément de temps à vos développeurs ! Pensez-bien à le faire tout au long de votre travail, ce qui vous évitera de perdre du temps à revenir sur tous vos écrans pour tout vérifier à la fin de votre projet… (si vous changez les noms dans votre composant principal, celui-ci s'impacte dans tous ses états !)

On profite d’ailleurs de cet article pour vous rappeler les bases de la nomenclature pour vos éléments : 

  • En anglais
  • Pas d’accent, espace ou caractère spéciaux
  • Le nom doit illustrer l'élément le plus clairement possible

Le guide de style

Ici, nous allons regrouper quelques points essentiels qui se retrouvent tous dans le guide de style de votre projet. 

Les polices de caractères

Si votre projet n’a pas de font définie, ou si vous avez l’occasion d’en changer, essayez de privilégier les fonts de Google. Pensées pour le web, l’optimisation de ces polices de caractères en font des polices légères à charger pour votre site web. Seuls les styles utilisés seront appelés. Cela vous permettra de gagner quelques Ko essentiels pour la rapidité de chargement de votre page. Et c'est mieux pour la planète 😉

Vous évitez également les problèmes liés aux caractères spéciaux qui peuvent parfois arriver avec des polices venues d’ailleurs. 

Et pour les designers ?

N’oubliez-pas de nommer chacun de vos styles pour que votre équipe de développement s’y retrouve facilement une fois le projet exporté. Privilégiez les nommages simples et logiques que vous pourrez réutiliser dans tous vos fichiers (H1 au H5, “Body standard”, “Body small”...). 

⚠️  Attention, si vous dépassez la vingtaine de styles, alors vous en avez probablement trop. 

Les icônes

La grande question : bibliothèque d'icônes ou pas ?

L’un ou l’autre, il n’y a pas vraiment de bonne réponse. Si vous vous lancez sur un gros projet avec plus d’une vingtaine d'icônes, alors la librairie d'icône est définitivement une bonne idée. En revanche, pour les projets qui n’en demandent pas tant, vous pouvez créer des icônes sur mesure. 

Cela permettra aux développeurs d’avoir plus de liberté. Ils pourront ainsi optimiser les svg, concevoir des animations. Et évidemment, pour les designers, la customisation est bien plus intéressante par rapport à la bibliothèque qui nous limite fortement.

🎯 Petit conseil pour les designers : pensez bien à vectoriser vos icônes, les nommer et à les rendre exportables sur votre plan de travail !

Livrer votre travail

C’est bon. Après des jours de travail acharnés et d’heures à suer, les maquettes design sont terminées. Il est temps de boucler le tout et d'envoyer votre dur labeur à l'équipe web.

Quels sont donc les besoins pour l’équipe de développement en termes d’exports ?  

Selon les supports et les projets, les besoins peuvent varier. Principalement, il s’agira d’exporter la totalité des maquettes vers un outil spécifique qui permettra de faire le lien entre le travail des designers et celui des développeurs. Chez Innovantic, nous utilisons le logiciel Zeplin.

Parmi ces exports, certains seront spécifiques au projet, par exemple : un favicon si il y a un besoin ou, si vous travaillez sur une application : le splash screen et les écrans pour les stores. 

Une fois ces écrans correctement exportés, c'est enfin fini pour les designers (même s’il est toujours important de rester en lien avec l’équipe web !). Il ne faut pas non plus hésiter à laisser des commentaires et précisions via Zeplin pour faciliter la compréhension des maquettes.

Pour finir...

Vous l’aurez compris, chez Innovantic, notre équipe Studio est plus qu'habituée à travailler en étroite collaboration avec une équipe de développement. 

Équipe interne ou externe, nous avons toutes les compétences pour mener à bien votre projet et faciliter au mieux le travail de l’équipe de dev avec laquelle nous travaillons !

👋

Plus d'articles ?