Catégories

Modèle de composant de design

par Tony Starr, Responsable de la conception de contenu @ Atlassian

Créez une bibliothèque de composants de design soigneusement documentés

Utiliser le modèle
Modèle de composant de design

Il peut être difficile de garder une trace de tous les composants que votre équipe utilise dans ses designs, surtout lorsque votre équipe est en pleine croissance. Le modèle de composant de design vous aide à documenter chacun d'eux, des éléments de base comme le rôle et l'anatomie du composant, aux détails sur son apparence et son action dans différents contextes. Il y a même une section pour des conseils supplémentaires, où vous pouvez expliquer les règles spécifiques de chaque composant pour le contenu, l'accessibilité, le mobile, et plus encore. Créez une bibliothèque complète de composants à partir de zéro !

Comment utiliser le modèle Composant de design ?

Étape 1 : Commencez par les informations de base

Avant de pouvoir entrer dans le vif du sujet, il faut connaître les caractéristiques de base d'un composant. Commencez par remplir les lignes de la section « Bases du composant » : donnez un nom à votre composant, décrivez ce qu'il fait et téléchargez un diagramme anatomique avec des légendes numérotées. Utilisez ces légendes pour créer une clé et définir chaque élément de l'anatomie du composant. L'objectif de cette section est de permettre aux personnes qui utilisent le composant de comprendre comment tout s'y assemble.

Étape 2 : Établissez les spécifications

C'est à ce moment que vous commencerez à vous intéresser aux différentes façons d'utiliser un composant dans le cadre de vos designs pour une fonctionnalité plus importante. Décrivez comment le composant est utilisé, y compris sa fonction dans votre design dans son ensemble, puis expliquez comment il apparaît et agit dans différents contextes. Utilisez le code en direct du dépôt pour votre système de design afin d'afficher différentes variantes. Enfin, décrivez le style visuel du composant. Veillez à inclure des exemples de ce qu'il faut faire et ne pas faire.

Étape 3 : Renseignez les conseils, astuces et bonnes pratiques

Chaque composant a ses singularités. Enregistrez-les dans Conseils supplémentaires. Commencez par le contenu : y a-t-il des règles de ponctuation spécifiques de ce composant ? Qu'en est-il des étiquettes standard ? Notez-les, ainsi que les problèmes d'accessibilité spécifiques de ce composant et les conseils pour l'appliquer aux environnements mobiles. S'il existe de bonnes pratiques standard pour l'utilisation du composant, indiquez-les également. Enfin, ajoutez des liens vers tout composant ou modèle connexe.

Étape 3 : Renseignez les conseils, astuces et bonnes pratiques
Atlassian

Tony Starr

Responsable de la conception de contenu @ Atlassian


Tony est responsable de la conception de contenu chez Atlassian. C'est un rédacteur technique et de contenu pluridisciplinaire, qui aime fixer des normes et repousser les limites des conseils sur le contenu.

  • Content design glossary template

    Atlassian

    Content design glossary

    Teach writers how to use product names, industry terms, and other content with an A-Z guide.

  • Customer interview report template

    Atlassian

    Rapport d'entretien client

    Transformez les entretiens client en données exploitables grâce au rapport d'entretien client.

  • Design decision template

    Atlassian

    Design decision

    Use our design decision template to review design options, present design examples, and log design decisions.