Prototypez des applications Atlassian avec le kit UI d’Atlaskit

Bonjour mon ami ! Il est payant de savoir comment concevoir un excellent logiciel de gestion de projet. Pourquoi ? Parce qu’il y en a partout de nos jours, avec de nouveaux outils qui apparaissent chaque semaine comme un jeu de cartes. Cependant, s’il y en a un qui règne en maître, c’est bien l’Ozzie Atlassian !

Avec des millions d’utilisateurs qui s’appuient chaque jour sur ses produits pour la collaboration, le développement de logiciels et la gestion de projets, vous pouvez vous retrouver à devoir concevoir une interface pour l’un des produits d’Atlassian. C’est là que le kit UI Atlaskit de Justinmind entre en jeu ! Lisez la suite pour savoir ce que contient notre kit et comment vous pouvez concevoir des UI Atlassian avec.

Tout le monde a entendu parler d’Atlassian et de ses produits JIRA, Confluence et Trello, mais qu’est-ce qu’Atlaskit exactement ? Atlaskit est le système de design d’Atlassian qu’ils déploient dans toutes les gammes de ces produits.

Atlaskit est un ensemble de directives qui aide les designers et les développeurs à modifier et à adapter les produits d’Atlassian aux besoins d’entreprises spécifiques. Elles sont accompagnées d’instructions sur la manière de concevoir des éléments et des UI. Avec le kit UI Atlaskit de Justinmind, vous pouvez concevoir des prototypes Atlassian rapidement et facilement, car presque tous les éléments UI ont été créés pour vous, ce qui signifie que vous n’avez pas à les faire à partir de zéro.

En fait, de nombreux éléments, widgets et composants de notre kit sont déjà dotés d’interactions de base. Il vous suffit donc de les glisser et de les déposer sur un canevas, de les relier à la page ou à l’action correspondante, et le tour est joué pour les développeurs.

Notre kit UI Atlaskit vous permet de gagner beaucoup de temps. Que vous ayez besoin de concevoir une UI Agile pour JIRA, un écran de collaboration pour Confluence ou une fonctionnalité de gestion de projet pour Trello, vous trouverez votre bonheur ici. Vous découvrirez tout, des avatars aux composants entièrement montés en passant par les boutons avec interactions qui vous aideront à faire votre travail rapidement et efficacement.

Dans cette catégorie, vous trouverez des icônes qui permettent d’afficher des informations relatives à un utilisateur à un moment donné, telles qu’un avatar vide et un avatar avec une photo, ainsi que diverses icônes de mise à jour du statut telles que « présence disponible », « occupé », « approuvé/désapprouvé » et même la palette de couleurs du système de design d’Atlaskit.

Il ne s’agit pas de simples boutons, mais de petits gains de temps ! Dans cette catégorie, vous trouverez des boutons que vous pouvez utiliser sur n’importe quel écran de l’UI d’Atlassian, tels que les boutons primaires, par défaut, désactivés, de danger et d’édition. Le plus intéressant est qu’ils sont livrés avec des interactions mineures déjà ajoutées, telles que la mise en surbrillance lorsque la souris les survole. Vous trouverez même des composants montés tels que des groupes de boutons et des boutons d’onglet pour les tableaux de bord, en plus des badges d’émission, typiques du logiciel JIRA.

Dans la catégorie des composants, vous pouvez tout utiliser, depuis les icônes de badge, les fils d’Ariane de navigation et le texte de balise jusqu’aux boîtes de dialogue en ligne, aux fenêtres modales et aux composants de pagination. De plus, ils comprennent tous des interactions de base ! En outre, vous trouverez également les pastilles typiques de la gestion de projet, telles que IN PROGRESS, REMOVED, SUCCESS et bien d’autres encore.

La véritable cerise sur le gâteau, cependant, est peut-être une grande table de référentiel qui s’accompagne d’un effet de défilement et d’une barre de pagination avec interaction déjà ajoutée !

Comme pour toute autre appli ou logiciel, le design des formulaires dans les produits Atlassian est crucial. Pour ce type de design UI, il est important de placer la simplicité et la fonctionnalité sur un piédestal.
C’est pourquoi, dans la catégorie des formulaires de ce kit, nous avons pris soin de tous les éléments simples pour vous, tels que les champs de type Atlassian, les menus déroulants et les listes, les sélecteurs de date et d’heure, les boutons à bascule et les tourniquets. Vous trouverez même une boîte de mot de passe avec validation de texte et de couleur en ligne, ainsi qu’une zone de texte simple qui inclut déjà les interactions nécessaires, permettant à l’utilisateur d’écrire des paragraphes de texte.

La cerise sur le gâteau est peut-être le sélecteur de données et d’heures, qui est déjà accompagné d’un calendrier pré-conçu et d’un sélecteur d’heures déroulant permettant à l’utilisateur de choisir la date et l’heure. Une fois la date et l’heure choisies, la sélection de l’utilisateur apparaît dans le champ. Vous n’avez donc plus besoin d’ajouter vous-même ces designs et ces interactions.

Les messages réguliers informant les utilisateurs de l’état d’un projet ou d’un bogue sont assez courants dans les applications Atlassian. C’est pourquoi nous avons dédié une catégorie complète pour vous aider à concevoir des messages qui affichent des informations utiles à l’utilisateur. Vous trouverez ici des bannières colorées affichant des messages d’information, de danger et d’avertissement. Vous pourrez même vous débarrasser du composant typique de message à drapeau déroulant, l’interaction étant déjà ajoutée à l’icône de flèche déroulante, au message personnalisable et au bouton doté d’une fonction de mise en surbrillance.

Pour commencer à concevoir vos prototypes d’applications web Atlassian, la première chose à faire est de télécharger notre outil de prototypage! Ensuite, il vous suffit de suivre les étapes courtes et simples ci-dessous :

1. Téléchargez le kit UI d’Atlaskit à partir de notre page kits UI.
2. Ouvrez Justinmind sur votre bureau
3. Naviguer vers les widgets dans la barre de menu
4. Sélectionnez « Ajouter/supprimer des bibliothèques »
5. Sous « Default libraries », descendez jusqu’à ce que vous voyiez le kit Atlassian.
6. Cliquez sur « Ajouter aux widgets »
7. Amusez-vous à concevoir vos écrans !

Pour démontrer ce que vous pouvez faire avec notre kit UI Atlaskit, nous allons examiner deux exemples d’écrans que vous pouvez créer. Pour le premier écran, nous allons rapidement créer une page de gestion de projet. Tout ce que nous avons à faire est d’ouvrir un nouveau « prototype web ». Nous y glisserons ensuite un menu latéral, une « icône hamburger », un « plus » et une « icône de recherche ». Cela constituera la navigation de base de l’application.

Ensuite, bien glisser et déposer une « entité avatar » pour dénoter cette tâche comme des tâches de conception. Nous ajouterons ensuite quelques étiquettes de texte afin que les utilisateurs puissent naviguer vers différents endroits de l’application Atlassian, tels que les backlogs, les sprints et les nouveaux lancements. Plus à droite de l’écran, nous ferons glisser quelques autres petites icônes d’avatars pour montrer qui est impliqué dans les tâches. Ajoutez ensuite un composant de lien vers les onglets. Ce composant comporte des interactions intégrées qui mettent en évidence les options au survol de la souris et les mettent en évidence lorsque l’utilisateur les sélectionne. Pour les cartes de projet, il suffit de glisser-déposer un composant « Message de drapeau » sur le « canevas », puis de le dupliquer afin d’en avoir huit par page. Il ne reste plus qu’à modifier le texte ! Enfin, sous les cartes, nous ajouterons un composant de pagination avec interaction pour que notre application puisse avoir dix pages de tâches ou plus.

Pour notre deuxième exemple, nous allons créer un écran de gestion de projet simple et clair. Tout d’abord, nous allons glisser et déposer sur le canevas une bannière d’information du kit qui informe l’utilisateur de ce qui se passe sur la page (dans ce cas, il s’agit de l’apparition de la nouvelle tâche qu’il a créée). Ensuite, nous ajouterons un « bouton par défaut » que nous dupliquerons quatre fois, renommerons et réorganiserons de manière à ce qu’ils apparaissent comme dans l’image ci-dessus. Il ne nous reste plus qu’à ajouter un « champ de texte » éditable, pour décrire la tâche, et un autre champ en dessous pour que les utilisateurs puissent ajouter des commentaires. Nous pouvons ensuite jouer un peu plus, en ajoutant un « composant de sélection » pour que les utilisateurs puissent sélectionner le département, ainsi que quelques autres éléments tels que des « boutons d’étiquette » et de « marqueur ». Enfin, l’ajout des sélecteurs de date et d’heure dont nous avons parlé plus haut sera une touche agréable, car il permettra à l’utilisateur de sélectionner une date et une heure pour, disons, une réunion de sprint ! Il ne reste plus qu’à lancer la simulation ! Cliquez sur quelques éléments et voyez à quoi ressemblent vos écrans Atlassian et comment les éléments fonctionnent !

Voici quelques conseils pour le design d’une interface de produit Atlassian avec le kit UI Atlaskit de Justinmind. En suivant ces conseils, vous pourrez concevoir l’UI de manière à ce qu’elle corresponde à leur système de conception Atlaskit et que les débutants comme les utilisateurs chevronnés s’y reconnaissent et aient la même expérience.

Atlassian n’est pas un produit qui hésite à utiliser des couleurs vives et audacieuses, même si c’est dans un but précis. Ils utilisent la couleur pour attirer l’attention de l’utilisateur sur une partie importante de l’UI. Parlons maintenant des palettes de couleurs. La palette de couleurs primaires qu’Atlassian utilise pour ses produits est audacieuse et vive, tandis que les couleurs secondaires sont des couleurs chaudes qui contrastent agréablement et aident les couleurs plus vives à se fondre dans l’ensemble. Cela signifie également que les éléments tels que les pastilles de gestion de projet, les balises et les badges d’émission sont plus attrayants. La palette de couleurs de base de ces palettes se compose de huit couleurs.

La palette étendue comprend diverses nuances des palettes primaires et secondaires, ce qui vous laisse une grande marge de manœuvre pour la création d’éléments et d’illustrations. Cette palette étendue comprend jusqu’à 24 couleurs. En outre, il est important de noter qu’Atlassian prend au sérieux l’utilisation de combinaisons de couleurs qui respectent les rapports de contraste standard de l’AA. Vous devez toujours vous assurer que toute UI que vous concevez dans Justinmind présente un contraste de couleurs suffisant entre le texte et l’arrière-plan, ainsi qu’entre les éléments pour aider les personnes malvoyantes et daltoniennes.

En ce qui concerne les polices de caractères dans les produits Atlassian, le statu quo est assez simple : tout est en code-barres sans-serif, pour lequel ils préfèrent utiliser des polices monospaces. La raison en est de créer des textes lisibles dans l’ensemble de ses produits afin que l’utilisateur puisse assimiler rapidement les informations. Pour Windows, vous utiliserez UI Segoe, pour Mac, n’importe laquelle des variations de San Francisco ou Helvetica Neue et pour Chrome ou Android – Roboto, Noto ou Droid Sans.

Enfin, en ce qui concerne l’iconographie, vous veillerez à utiliser des icônes qui aident l’utilisateur à comprendre l’UI et ses fonctions. Par exemple, Atlassian utilise à la fois des icônes remplies et des icônes à contours. Normalement, lorsqu’un élément de l’UI est « allumé », une icône remplie est utilisée pour l’indiquer. Au contraire, une icône non remplie signifie souvent que quelque chose est « éteint ». La seule exception à cette règle est lorsque les icônes se trouvent sur le panneau de navigation, auquel cas elles doivent toujours être soulignées afin de bien contraster avec la couleur d’arrière-plan de l’UI.

Lorsqu’une icône représente un groupe de sous-éléments, il convient d’ajouter de la profondeur pour signifier qu’il existe des options plus détaillées derrière elle. Les petits éléments tels que les cercles doivent être pleins pour améliorer la lisibilité lors de la réduction d’échelle.

Si vous cherchez à adapter les interfaces UI d’Atlassian, Justinmind vous aide à le faire rapidement et facilement, tout en tenant compte des utilisateurs. Vous serez en mesure de créer en un rien de temps de superbes prototypes interactifs Atlassian qui démontrent la fonctionnalité et sont prêts à être transmis aux développeurs. Pourquoi ne pas tester le kit UI Atlaskit de Justinmind dès aujourd’hui ?