Documentation design : L’importance d’une documentation claire et détaillée pour faciliter la compréhension et l’implémentation des designs.

Une documentation claire et précise est essentielle dans les projets UX/UI pour assurer une collaboration efficace entre designer·euse·s et développeur·euse·s. Elle permet de s’assurer que tous les membres de l’équipe comprennent les intentions derrière les designs, les comportements attendus des éléments interactifs, et les spécifications techniques nécessaires pour une mise en œuvre correcte.

Comment concevoir une bonne documentation ?

✅ Générer le styleguide (couleurs et typo) à l’aide d’un plugin

Un styleguide bien structuré aide à maintenir la cohérence visuelle et facilite l’intégration des maquettes. Des plugins peuvent automatiser ce processus, générant des frames détaillant toutes les couleurs et typographies utilisées dans le projet.

Sur Figma, le plugin Automatic Style Guides est un outil gratuit et efficace qui génère des frames avec les styles de couleurs et de textes créés dans le fichier Figma, offrant un gain de temps significatif.

✅ Décrire les comportements complexes avec des pages de spécifications

Les interactions et comportements complexes nécessitent des explications détaillées pour être correctement implémentés. Créer des pages de spécifications pour décrire ces comportements en profondeur permet d’éviter les questions ou une mauvaise intégration des designs.

Il est recommandé d’impliquer les développeur·euse·s dès le début de la conception pour s’assurer de la faisabilité technique.

Par exemple, pour une animation au scroll sur mobile, on pourrait créer une page expliquant comment l’animation se déclenche, ses étapes, et ses conditions de fin.

✅ Utiliser un plugin pour générer les spécifications

Les plugins peuvent également générer automatiquement les spécifications techniques telles que les marges, les espacements, et les tailles des éléments. Cette automatisation réduit le risque d’erreurs lors de l’implémentation et optimise le temps de travail.

On laisse la technologie faire le travail fastidieux pour nous !

✅ Préciser le comportement des composants variables

Les composants variables, comme les titres pouvant s’étendre sur plusieurs lignes, doivent être décrits clairement pour éviter toute ambiguïté. Il est important d’indiquer comment ces composants doivent se comporter dans différentes situations.

Prenons l’exemple d’un composant de titre variable. On pourrait spécifier :

• Comportement sur une ligne : Taille de police 24px, hauteur de ligne 1.2
• Comportement sur deux lignes : Taille de police réduite à 20px, hauteur de ligne 1.3
• Troncature : Après trois lignes, ajouter des points de suspension (…)

On pourrait inclure une note comme : “Le titre doit s’adapter dynamiquement. Il commence à 24px sur une ligne, passe à 20px s’il s’étend sur deux lignes, et est tronqué avec des points de suspension après trois lignes. L’espacement entre les lignes doit être ajusté pour maintenir la lisibilité.”

✅ Définir une nomenclature identique aux développeur·euse·s

Adopter une convention de nommage pour les composants qui correspond à celle utilisée par les développeur·euse·s est crucial pour une communication claire et efficace. C’est comme parler la même langue !

Par exemple, si les développeur·euse·s utilisent des conventions de nommage en kebab-case (comme “primary-button”), il est judicieux d’utiliser la même convention dans les documents de design et spécifications. Cela évite les confusions et facilite l’intégration des designs dans le code.

TL;DR

Une bonne documentation est essentielle pour assurer une collaboration efficace entre designer·euse·s et développeur·euse·s. Voici comment y parvenir :

• Générer un styleguide avec un plugin : Utilisez des plugins pour automatiser la création des guides de style (couleurs, typo), assurant la cohérence visuelle.
• Décrire les comportements complexes : Créez des pages de spécifications pour expliquer en détail les interactions et animations.
• Utiliser un plugin pour les spécifications : Automatisez les détails techniques comme les marges et espacements.
• Préciser les comportements des composants variables : Décrivez clairement comment les éléments adaptatifs doivent réagir.
• Aligner la nomenclature : Utilisez une convention de nommage identique à celle des développeurs pour une meilleure communication.

Explorez toute la série d’articles :

• (1/5) — Optimisation des images : Comment choisir, optimiser et transmettre les assets graphiques
• (2/5) — Gestion des polices de caractères : Les meilleurs pratiques pour sélectionner, utiliser et partager les polices de caractères
• (3/5) — Animations et interactions : Les cas, états et interactions à prévoir pour une expérience utilisateur sans faille
• (5/5) — Organisation des fichiers Figma : Comment structurer les fichiers Figma pour une collaboration optimale et une meilleure gestion des projets

Qui sommes-nous ?

Nous sommes Chloé, UX/UI Designer et Julien, UI Designer, travaillant au sein de l’agence web ekino. Cette série d’articles a été réalisée dans le cadre d’un chantier interne visant à améliorer la qualité de nos livrables et nos méthodes de travail entre designer·euse·s et développeur·euse·s.

Nous tenons à remercier celles et ceux ayant participé et contribué à nos tables rondes : Martin, Lucie, Marie, Joana, Jonathan, Yohann.

Créer une synergie durable entre Designers et Développeurs (4/5) was originally published in ekino-france on Medium, where people are continuing the conversation by highlighting and responding to this story.