Par définition, un inventaire est un ensemble d’articles suivis dans une liste. Ce terme n'a rien de nouveau, mais l'idée d'utiliser ce concept pour les interfaces l'est. Brad Frost, qui a inventé le terme «conception atomique», déclare que la création de modèles agnostiques permet de créer des composants beaucoup plus polyvalents pouvant être largement utilisés dans un système..
Dans ce court tutoriel, nous utiliserons InVision pour créer un inventaire d'interface. Nous travaillerons vers un produit fini avec des composants et des modules parfaitement réutilisables et portables..
Un «module» est un ensemble de pièces normalisées ou d'unités indépendantes pouvant être assemblées pour construire une structure plus complexe. Construire de cette façon rend les résultats prévisibles plus probables.
Pour atteindre ce sommet de l'utopie du développement, nous utiliserons la fonctionnalité de planches d'InVision..
Aaron Stump sur DribbbleLes tableaux sont faciles à créer et chacun peut être intitulé avec un nom et une description. Une fois que vos informations sont complètes, cliquez sur le bouton «Créer un tableau»..
Naturellement, les conseils peuvent être utilisés à différentes fins, que ce soit pour un audit d'inventaire tel que celui que nous créons, ou pour la découverte de marques, etc..
Nous nous concentrerons sur l'inventaire des interfaces dans le cadre de ce didacticiel, mais gardez à l'esprit que les cartes peuvent également être utilisées pour d'autres besoins contextuels..
Maintenant que notre conseil d'administration a été créé, il est temps de se mettre au travail et de commencer le vrai travail que nous avons accompli. l'audit d'inventaire d'interface. En fonction de votre flux de travail, cela peut être fait de différentes manières, mais cela commence généralement par des captures d'écran des «atomes» de l'interface, tels que des boutons, des titres, des entrées, des couleurs et même des icônes. Puisque Atomic Design inclut également des «molécules» et des «organismes», vous pouvez passer à chaque type selon le processus..
Dans la plupart des cas, les molécules et les organismes représentent un niveau d’inspection beaucoup plus élevé, qui comprend des pièces atomiques / moléculaires plus petites combinées de manière unique pour créer un tout plus grand..
Projet Alisa Law.L’organisation est sans aucun doute la partie la plus importante au début de vos audits. Comme vous pouvez le voir ci-dessus, j'ai décomposé une section particulière en motifs et en variations afin d'identifier les parties de l'interface qui se répètent, mais qui présentent une légère variation. C’est formidable lorsque vient le temps de coder, car vous pouvez trouver des modèles réutilisables afin de conserver votre CSS mince, ce qui permet de construire un système plus modulaire..
Projet Camp Shalom.Atoms vous aidera à identifier les variations et vous guidera même dans votre quête de conventions de nommage; la partie la plus difficile du travail. Lorsque vous découvrez vos atomes, pensez à ce qui constitue un «motif d'affichage» et à un «motif de contenu», car les deux seront très différents. Si vous ne répondez pas correctement à cette question, votre code risque de ne pas devenir une unité portable et modulaire adaptée à différents contextes..
Les nuances de couleurs sont également très utiles avec les cartes InVision. Cela peut être un guide très utile pour gagner du temps lorsqu’il est question de savoir si la cohérence des couleurs est utilisée dans une interface. Les échantillons peuvent également aider à garder une trace des valeurs de couleur requises lors de l’utilisation de variables pour stocker des informations de couleur afin de travailler avec des pré-processeurs CSS..
Projet Malts MurmurationTirez parti des conseils pour documenter et discuter des conventions de dénomination, des fonctionnalités, des plugins / bibliothèques et même identifier des modèles d'un niveau supérieur..
Identification de modèle utilisée parallèlement aux commentaires pour le projet Murmuration Malts Gif extrait de l'article de blog Invision Boards Design Collaboration ReimaginedLes commentaires et les croquis sont une caractéristique puissante qui peut également être utilisée avec des planches! Servez-vous de sketching pour souligner des parties de l'interface en question ou utilisez des commentaires pour discuter des modèles découverts afin de renforcer les exigences avant le développement. InVision propose de nombreuses autres fonctionnalités de commentaires remarquables. Je vous encourage à en lire davantage sur leur site..
Les tableaux sont vraiment pratiques à utiliser pour les découvertes initiales, qu’elles soient de développement ou d’intention visuelle. Si vous souhaitez en savoir plus, vous pouvez lire toutes les informations sur Boards sur le blog Invision. Comme toujours, bonne codification et merci de lire!