Documenter vos composants de Design System

Transcript

1. Monia Huet UX Designer @Talend mhuet@talend.com Fabien Rassinier Frontend Dev @Talend frassinier@talend.com Comment bien initier son Design System ? Documenter vos composants
2. Talend Éditeur logiciel permettant de manipuler et gouverner la donnée. 8 produits sur le Cloud. Une équipe R&D de plus de 400 personnes. Équipe UX sur Sketch, composants implémentés avec React sur Storybook.
3. Plan Introduction Zoning Style États Contenu éditorial Code Interactions Accessibilité Changelog
4. Nom du composant Vecteur de communication principal Décision commune Consensus entre les différents acteurs Concis et générique Il faut que ce soit parlant pour tous Titre Introduction
5. Description Doit rester la plus succincte possible et répondre aux 5w. What? Why? Who? Where? When? Introduction
6. Zoning Permet de se rendre compte de la composition Permet d’identifier les dépendances et ce qui est optionnel ou non
7. Style Illustre tous les cas limites Composé de Design tokens Définit ce qui est customisable ou non pour les thèmes
8. Etats Squelette animé Liste vide Cas d’erreur Chaque élément HTML interactif a une liste d’états connus, ils doivent être illustrés. ...
9. Contenu éditorial Précise les règles de terminologies à utiliser ainsi que le ton.
10. Code Les valeurs par défaut Les descriptions pour chacune des propriétés Le type de valeur accepté
11. Interactions Pour garantir une UX cohérente
12. Accessibilité Interactions avec le clavier Zoom texte Contraste de couleurs Indicateurs autres que la couleur Texte ou description alternatifs
13. Changelog Ne concerne que la partie documentation.
14. Qu’est-ce qu’on retient ? Ce modèle de contenu ne fonctionne que si vous avez des garants du Design System. On a fait le choix d’appliquer ce modèle à tous nos composants. Même si certaines parties sont non-applicables. Chacun doit trouver son organisation, c’est avant tout une histoire de consensus.
15. Merci :)