Design component template screenshot preview

Modèle Composant de design

Créé par :

Atlassian logo

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

Catégories

  • Conception
  • MODÈLE DE PAGE

FONCTIONNALITÉS CLÉS

  • Documentation

  • Exigences

  • Base de connaissances

Design component template screenshot preview

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 de composant de design

  1. 1

    Commencez par l'essentiel

    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 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.

  2. 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.

  3. 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.

Modèles connexes

Conception

glossaire sur la conception de contenu

Apprenez aux rédacteurs à utiliser les noms de produits, les termes du secteur et tout autre contenu avec un guide complet.

Conception

stratégie de contenu

Cartographiez votre stratégie de contenu et organisez votre calendrier éditorial

Gestion de produit

Rapport d'entretien client

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