Conception de produits numériques : Créez un système de conception flexible et durable

1. Introduction: m'appelle Brad Frost, et je suis concepteur web, conférencier, auteur et consultant basé à Pittsburgh, en Pennsylvanie. Et la classe d'aujourd'hui consiste à créer des systèmes de conception performants et à introduire la méthodologie de conception atomique. Un système de conception est l'histoire canonique de la façon dont votre organisation conçoit et construit des produits numériques. systèmes de conception permettent aux équipes de lancer un travail de qualité supérieure plus rapidement que jamais. Beaucoup et beaucoup d'organisations investissent dans ce domaine, ce qui est formidable. Mais en même temps, maintenant que c'est une sorte de mot à la mode, vous voyez beaucoup et beaucoup d'équipes qui vont créer des boutons, cartes, des en-têtes, et toutes sortes d'autres composants isolés. Puis après le fait, ils les branchent en quelque sorte dans leurs produits réels seulement pour trouver qu'ils tombent sur leur visage. La conception atomique est une méthodologie que j'ai créée pour aider les équipes avec lesquelles je travaille à penser à l'interface utilisateur comme un ensemble réfléchi de pièces interconnectées. Au cours des cinq dernières années, conception atomique a émergé comme une vague assez solide pour certainement mes propres projets, mais aussi des organisations à travers le monde pour aider à établir leurs systèmes conçus et penser à des systèmes de conception dans un façon connectée. Cette classe s'adresse aux concepteurs et aux développeurs et à toutes les personnes impliquées dans le succès des produits numériques dans une organisation. Après avoir suivi ce cours, vous comprendrez comment lancer avec succès une initiative de système de conception. Vous serez armé de la méthodologie pour créer de manière réfléchie composants de systèmes de conception qui peuvent vous aider à soutenir votre système de conception initial, ainsi que la gouvernance au fil du temps. Alors merci d'avoir rejoint ce cours, et plongons dedans. 2. Que sont les systèmes de conception ?: Donc, la première chose que nous allons faire est rafraîchir rapidement ce qu'est exactement un système de conception. Ceci est couvert dans beaucoup d'endroits ailleurs , mais c'est en fait une chose difficile à épingler exactement. Qu' est-ce qu'un système de conception ? La définition que j'ai tendance à utiliser est qu'un système de conception est l'histoire canonique de la façon dont votre organisation conçoit et construit des produits numériques. J' aime mettre ça dans la lentille d'une nouvelle embauche. Vous engagez une personne intelligente et talentueuse et ils vont inévitablement vous demander comment faire les choses ici ? Comment concevons-nous comment ? Est-ce qu'on se développe ? Lorsque vous disposez d'un système conçu, vous pouvez répondre à cette question en les orientant vers le système de conception. Vous pouvez dire, «  Voici l'histoire de la façon dont nous faisons les choses ici, voici quel langage de conception nous utilisons, voici mes conventions de code que nous utilisons, voici toutes les autres choses qui aident à peindre l'image pour toute personne qui conçoit et construit des produits numériques au sein de l'entreprise. Il y a beaucoup d'ingrédients différents un système de conception et généralement ils prennent la forme de quelques choses différentes. Il y a les artefacts tangibles d'un système de conception. composants de l'interface utilisateur réels qui sont le pain et beurre d'un système de conception ainsi que des ressources de conception, des icônes, et des choses comme ça. Mais il y a aussi les directives générales sur la façon d'utiliser ces artefacts. Pensez-y comme des meubles Ikea. Vous avez les pièces réelles des meubles Ikea que vous avez jetées sur la table et finalement assembler dans le produit fini. Mais sans manuel d'instructions, ça va être difficile. Donc, techniquement, vous pouvez le faire avec juste un kit de pièces, mais en même temps, ce manuel d'instructions aide à fournir un contexte et des conseils pour comment soigneusement mettre ces choses ensemble pour sauver vos cheveux et votre santé mentale. Les ingrédients de votre système de conception dépendront de ce que votre organisation, de ce dont vos équipes ont besoin pour concevoir et construire des produits avec succès. Ainsi, votre système de conception peut inclure des éléments tels que les principes de conception, les jetons de conception, les directives UX, les directives écriture, les directives de voix et de tonalité, directives de développement, les composants d'interface utilisateur codés réels, les ressources de conception comme un kit d'interface utilisateur de croquis, système d'icônes ressources internes et externes à d'autres choses liées aux meilleures pratiques sur les sites de ressources populaires comme le magazine Smashing ou CSS-astuces choses comme ça. Modèles de page, flux courants et modèles UX, directives de marque. Il y a tellement d'ingrédients différents dans un système de conception et encore une fois, les ingrédients contient votre système de conception dépendront beaucoup des besoins de votre organisation et de votre équipe. Il n'est pas surprenant que tant d'organisations investissent dans des systèmes de conception parce qu'elles offrent une tonne d'avantages différents. Ils procurent des avantages à l'utilisateur final en fournissant des expériences plus cohérentes et plus cohérentes. Comme les utilisateurs voyagent d'une partie du site à l'autre ou d'un produit à l'autre, ils sont accueillis avec une expérience très similaire et cela est important pour beaucoup de raisons différentes car chaque fois qu'un utilisateur doit réapprendre un nouveau modèle d'interface, Supposons qu'ils rencontrent un sélecteur de dates dans quatre sections différentes d'un site et que chaque fois que ce sélecteur de date est différent, ils doivent réapprendre. Cependant légèrement, réapprenez les conventions d'interface utilisateur pour sélectionner une date. Mais en ayant un sélecteur de date fourni par le système de conception, la cognition impliquée dans la prise de cette décision en choisissant cette date diminue ce qui leur permet de se faire ce dont ils ont besoin pour se faire plus rapidement, qui est bien sûr bon pour eux mais aussi bon pour l'entreprise parce qu'ils peuvent peut-être vérifier plus rapidement, réserver un vol ou réserver un hôtel. Quelle que soit la tâche à accomplir est bonne pour les résultats de l'entreprise ainsi que pour le temps et l'attention de l'utilisateur. Alors que les avantages pour les utilisateurs sont importants, les avantages réels d'un système de conception sont principalement internes. Ils sont pour le bénéfice des équipes qui produisent le travail. Les concepteurs, les développeurs, les responsables de l'assurance qualité, les gens du produit, tous ces gens bénéficient grandement d'un système de conception. Le premier grand avantage d'avoir un système de conception pour une équipe est qu'il leur permet de lancer le travail plus rapidement, et pourquoi c'est le cas, c'est que nous avons dû répéter beaucoup de travail redondant inutile. Nous avons une unité de héros pour notre page d'accueil et nous avons ces trois tendues ou ces trois cartes et chaque fois que nous avons une nouvelle page qui a besoin de ces composants, ces héros ou ces tendus, nous avons dû les réinventer encore et encore et encore et encore et avec des détails d'implémentation subtils ou même parfois complètement différents. Donc, plutôt que d'avoir à réinventer le composant de carte pour la 15e fois, l'équipe pourrait à la place saisir le composant de carte existant du système de conception, le brancher, puis concentrer ses efforts sur des tâches plus grandes et meilleures. systèmes de conception offrent l'avantage de lancer un travail de qualité supérieure, car encore une fois, ils ne réinventent pas les choses, réinventent la roue encore et encore , ce qui signifie qu'ils peuvent à la place itérer sur ces mêmes composants d'interface utilisateur dans ces mêmes modèles de cuisson dans une meilleure accessibilité , flexibilité, trucs réactifs, localisation, animation, tout cela signifie que la qualité du travail, la qualité de ces composants d'interface utilisateur sont élevés avec chaque nouveau itération. Les systèmes de conception fournissent un vocabulaire partagé qui permet de réunir différentes disciplines et différentes équipes de produits afin qu'elles soient toutes sur la même page et parlent tous la même langue. Donc, plutôt que le développeur appelle un composant la barre d'utilitaires, le concepteur l'appelle la barre d'administration, et l'équipe produit l'appelle la barre grise en haut, vous êtes en mesure d'établir un vocabulaire commun pour ce que chose s'appelle en fait. Permettre aux équipes de ne pas avoir à avoir une réunion pour discuter de la nomenclature pour s'assurer que nous sommes tous sur la même page. systèmes de conception facilitent également les tests, ce qui permet aux équipes d'isoler un composant individuel et de le tester en fonction des meilleures pratiques de conception réactive, meilleures pratiques en matière d' accessibilité, des meilleures pratiques en matière de performances, etc. Ainsi, en testant des choses au niveau des composants et en faisant la cuisson dans ces meilleures pratiques au niveau des composants, partout où ces composants sont inclus, ces avantages seront automatiquement gratuitement. Les systèmes de conception et les guides de style qui les accompagnent constituent également une référence utile pour les équipes, les concepteurs et les développeurs à utiliser dans leur travail quotidien. Quand choisissez-vous un accordéon par rapport aux onglets ? Vous pouvez vous référer à votre guide de style pour savoir quand utiliser un composant ou autre, quoi nommer un composant ou quelles conventions vous souhaitez utiliser. En disposant de cette ressource partagée, il aide toutes les équipes à se dérouler plus facilement. Enfin, un système de conception fournit une base amicale pour l'avenir sur laquelle s'appuyer pour les années à venir. C' est une grande chose à propos des systèmes de conception, c' est qu'il est très fondamental. Vous ne résoudrez pas tous les problèmes de votre organisation et v1 de votre système de conception. Mais ce qui permet d'avoir un système de conception, c'est d' améliorer l' itération au fil du temps en établissant des conventions, en établissant des composants et en s'appuyant sur eux au fur et à mesure que le temps passe, l'équipe et la qualité du travail sont capables de monter et de monter. et au fur et à mesure que le temps passe. Même si vous deviez faire une refonte massive de votre organisation entière, identité visuelle, de votre palette de couleurs , et tout ça, vous aurez toujours des boutons, vous aurez toujours des cartes, vous allez toujours avoir la topographie, l'iconographie et des choses comme ça. Donc, vous n'avez pas à jeter le bébé avec l'eau du bain. Ainsi, le système de conception peut rester au fur et à mesure que votre langage de conception continue évolue. Il y a évidemment tellement d'avantages à concevoir le système, donc il n'est pas surprenant que tant d'organisations investissent lourdement dans leurs propres systèmes de conception. Certains exemples célèbres comprennent la conception matérielle de Google, système Carbon Design par IBM et diable même le gouvernement américain a un système de conception pour alimenter les plus de 30 000 sites Web produits par le gouvernement fédéral. C' est donc juste une mise à jour rapide de ce qu' est un système de conception et des avantages qu'il offre. Dans la prochaine leçon, nous allons parler de la façon de lancer une initiative de système de conception réussie. 3. Lancement d'une initiative de système de conception: Alors, comment diable lancez-vous une initiative de système de conception ? Il y a tellement de facettes différentes pour concevoir le système qu' il peut devenir presque paralysant pour même commencer. J' ai trouvé qu'une grande première étape est de simplement obtenir un peu de la terre de ce dont sont faits vos produits numériques. Quel est l'ADN de vos produits numériques ? Il existe plusieurs outils et tactiques pour arrondir tous les différents composants et styles d' interface utilisateur contenus dans vos produits numériques. Le premier est un site appelé cssstats.com. Ce que CSS STATS fait est d'imprimer toutes les règles de style différentes contenues dans la feuille de style de votre site Web. Donc, vous pouvez aller sur cssstats.com et simplement brancher votre URL ou à importe quel domaine de vos produits numériques et appuyer sur le bouton go et ce qu'il fera est de cracher toutes vos règles de style. Donc, si vous regardez cette page, vous pouvez réellement brancher divers sites populaires, nous allons rester avec Facebook pour l'instant et ce qu'il va faire est qu'il crachera toutes les règles de style qui est sur facebook.com, qui comme vous pourriez imaginez qu'ils sont nombreux. Donc, non seulement cela vous donne toutes les différentes règles de style et sélecteurs, il souligne également toutes les 85 couleurs uniques, y compris ce qui ressemble à 50 nuances de gris et différentes saveurs de bleu Facebook. Cela donne aux équipes la possibilité de rassembler ces différentes couleurs et de commencer à les normaliser. Discutez de ce qui devrait être à l'intérieur et de ce qui devrait peut-être être modifié afin de réduire ce nombre. La même chose vaut avec les couleurs d'arrière-plan, quelle est la bonne couleur de rouge pour les états d'erreur ou de vert pour les états de succès ? Encore une fois, quel est le bleu Facebook droit ? Quelles sont les couleurs neutres dans notre palette de couleurs ? Quelles sont les différentes tailles de police ? Quelles sont les différentes familles de polices et comment pouvons-nous les réduire. Parce que toutes ces familles de polices, les déclarations sont un résultat de performance. Alors, comment pouvons-nous réduire ces chiffres de façon réfléchie et tout au long du processus. Donc, c'est un excellent outil. Nous obtenons juste un instantané de la composition de vos interfaces utilisateur et aide l'équipe à faciliter une conversation sur propriétés de conception qui devraient rester et ce qui devrait se passer. La prochaine tactique pour obtenir un terrain est de faire ce que j'appelle un inventaire d'interface. Qu' est-ce qu'un inventaire d'interface, est un exercice de capture d'écran que l'ensemble de l'équipe va à une chasse aux œufs de Pâques à travers toutes vos propriétés numériques, et il arrondit et recueille et affiche l'ensemble de l'interface utilisateur unique et les met tous sous un même toit. Je vais parcourir les différentes étapes de la réalisation d'un inventaire d'interface. La première étape consiste à arrondir toutes les troupes, arrondissant tous les différents membres de l'équipe qui sont responsables du succès de votre système de conception. C' est une première étape importante parce que parfois un concepteur individuel prend sur eux-mêmes pour sortir et arrondir tous les styles de boutons uniques et les composants de carte et des choses comme ça, mais ce n'est pas très utile dans l'isolement parce que un des principaux avantages des systèmes de conception est d'établir ce vocabulaire partagé. Donc, avoir des perspectives différentes dans la salle aide à galvaniser cette initiative de système de conception et à lancer ce vocabulaire partagé entre les différents membres de l'équipe. Ainsi, incluez les concepteurs et les développeurs, les personnes AQ et les chefs de produit et les chefs de projet et toutes les personnes responsables du succès de vos produits numériques. Donc, essentiellement un exercice d'inventaire d'interface est vraiment juste une capture d'écran d'un tas de choses. La deuxième étape se prépare à la capture d'écran. J' aime m'assurer que tout le monde utilise le même outil pour capturer des captures d'écran. Disons que cela peut être un modèle PowerPoint ou un modèle keynote ou Google Slides ou autre mécanisme qui permet à l'équipe de ramasser toutes leurs captures d'écran en un seul endroit, sorte que vous pouvez les combiner toutes à la fin de l'exercice . J' ai créé un modèle Google Slides que vous pourriez utiliser pour lancer votre propre exercice d'inventaire d'interface. Maintenant, pour l'événement principal. La troisième étape consiste en la capture d'écran de tous ces différents composants d'interface utilisateur distincts. Donc, la façon dont cela a tendance à fonctionner est que nous assignons une catégorie différente de composant d'interface utilisateur à un autre membre de l'équipe. Ainsi, plus vous avez de gens dans la pièce, mieux c'est, plus vous avez de globes oculaires sur vos propriétés numériques. Il y a un tas de différentes catégories à capturer d'écran. Il existe des composants d'interface utilisateur globaux, tels que différents en-têtes et pieds de page. Ainsi, une personne ou une équipe de personnes peut être responsable de parcourir et de capturer tous les différents types d'en-têtes, pieds de page et états de ces composants dans leurs propriétés numériques. Une autre équipe pourrait être responsable de la capture de différents types d'images. D' autres personnes peuvent trouver des icônes, comme différentes icônes de boutons de loupe ou des icônes hamburger ou des icônes de flèche sur vos différentes propriétés numériques. D' autres personnes peuvent se concentrer sur la typographie. D' autres personnes peuvent se concentrer sur des blocs, comme des héros, des cartes et des choses comme ça. Quelqu' un d'autre pourrait être sur des contrôles de formulaire comme des zones de texte et des entrées de texte, des boutons radio et des cases à cocher et des choses comme ça. Une autre personne peut être en service de bouton. Vous avez l'idée, mais l'idée est encore une fois d'aller loin dans toutes vos différentes propriétés parfois même en incluant vos propriétés natives, dans vos propriétés Web, dans les propriétés internes, dans les propriétés de parement externe. L' idée est qu'il rampe vraiment dans les coins sombres de vos interfaces utilisateur pour capturer tous les différents composants qui ont tendance à apparaître. J' ai trouvé cet exercice utile en tant qu'exercice chronométré. Vous pourriez facilement passer des jours ou même des semaines à ramper dans les jungles de vos interfaces utilisateur. Mais pour le temps, il est utile de simplement obtenir un instantané de l'ADN de vos interfaces utilisateur. J' ai trouvé qu'une heure ou deux est suffisante pour avoir une empreinte assez large de ce dont vos interfaces utilisateur sont faites. Une fois que vous avez effectué l'exercice de capture d'écran, quatrième étape consiste à présenter vos résultats. Ainsi, chaque membre de l'équipe qui était responsable de trouver les boutons remontera à l'avant de la pièce et présentera ce qu'ils ont trouvé. C' est une partie vraiment utile de l'exercice parce que c'est là que tout le monde est capable ressentir la douleur de tous ces composants de boutons différents à travers vos différentes propriétés numériques. C' est aussi ici que ce vocabulaire partagé commence à émerger, non ? Différents membres de l'équipe ou disciplines différentes vont avoir des noms différents pour les mêmes composants. Donc, c'est dans cette présentation et discussion que les équipes capables de commencer à réfléchir sur le nom de ces composants, pourquoi ces composants semblent d'une certaine façon ou devraient-ils rester ou commencer à aller. D' accord. Donc, cela fournit une conversation très utile pour toute l'équipe pour se lancer derrière l'initiative du système de conception et commence à anticiper l'ensemble du projet de système de conception qui viendra plus tard. Ensuite, la dernière étape d'un inventaire d'interface consiste à regrouper et à établir les étapes suivantes. y a évidemment que tellement de choses que vous pouvez faire en quelques heures ensemble. Ainsi, l'équipe de travail qui est en train de créer le système de conception pourrait commencer à prendre les résultats de cet exercice et à déterminer comment faire transition vers la feuille de route des systèmes de conception. Une des meilleures choses que vous pourriez faire à la fin de l' exercice d'inventaire de l'interface est de rassembler tous les résultats de cet exercice sous un même toit, dans un fichier PDF géant. C' est vraiment génial parce que cela devient un outil pour aider à vendre l'initiative du système de conception au reste de vos équipes ainsi qu'aux personnes qui contrôlent les finances, n'est-ce pas ? Vous n'avez pas besoin d'être un concepteur pour comprendre qu'avoir 70 styles de boutons uniques est une mauvaise idée. Ainsi, vous pouvez littéralement déposer un PDF ou une impression de l'exercice d'inventaire de l'interface sur votre bureau PDG et ils comprendront pourquoi un système de conception est nécessaire. Donc, en résumé, un exercice d'inventaire d'interface aide à souligner l'incohérence et à obtenir cette position de la terre de ce dont vos interfaces utilisateur sont réellement constituées. Il met en évidence ces incohérences pour que l'équipe de conception puisse commencer à s'effacer et à déterminer ce qui doit rester et ce qui doit être fait. C' est le début de ce vocabulaire partagé entre les membres de l'équipe qui sera codifié dans le système de conception lui-même. Il aide également à déterminer quelle sera la forme du projet de système de conception, quels composants de l'interface utilisateur devront être contenus dans le système de conception, et quelle est leur priorité générale ? Y a-t-il beaucoup de forums, y a-t-il beaucoup de tables de données, y a-t-il beaucoup de cartes, et des choses comme ça. Peut-être que cela peut aider à avoir une idée de ce que devrait être la priorité des composants. Donc, une fois que vous avez une idée de ce que vos interfaces utilisateur sont faites, il est super tentant pour les concepteurs et les développeurs simplement plonger dans les mauvaises herbes et de concevoir et de construire. Mais il est important de ne pas agir sur cet instinct et de prendre du recul et de parler aux gens pour comprendre ce que le système de conception doit faire. Tout bon projet de conception commencera par la recherche, et il en va de même pour une initiative de système de conception. Lorsque nous avons tendance à penser à la recherche des utilisateurs, nous avons tendance à penser aux personnes qui utilisent notre logiciel. Bien que cela soit vrai et qu'ils devraient être impliqués dans une recherche sur les systèmes de conception, les vrais utilisateurs d'un système de conception sont les concepteurs et les développeurs, ainsi que les équipes qui construisent ces interfaces utilisateur. En parlant à ces personnes, vous pouvez avoir une idée des tâches que le système de conception doit accomplir pour réussir au sein de l'organisation. Encore une fois, c'est pourquoi il est si important de ne pas simplement plonger dans les composants de construction et de conception de composants parce que honnêtement, vous ne savez pas si les composants que vous finissez par concevoir et construire vont réellement pour relever les véritables défis organisationnels auxquels font face les vrais membres de l'équipe. Il y a une idée fausse que la recherche doit être chose formelle énorme, mais qu'en fait, il s' agit de parler aux gens. Ainsi, vous pouvez vous asseoir face à face avec différents membres de l'équipe, qu'ils soient concepteur, développeur, responsable de l'assurance qualité, chef de projet, propriétaire de produit, et avoir une idée de leur flux de travail, quelles parties de leur flux de travail ils ne sont pas exactement heureux avec, ce que les choses les frustrent, ce qu'ils aimeraient voir hors du système de conception ? Quels sont les éléments qu'ils considèrent comme des aspects importants de la réussite de l'initiative du système de conception ? Quelles sont les menaces potentielles qui pèsent sur l'initiative du système de conception ? En d'autres termes, ce qui va couler le vaisseau si on ne le fait pas bien. Toutes ces conversations aident à brosser le tableau des tâches que le système de conception doit accomplir afin de résoudre avec succès frustrations des gens et de les amener à améliorer la conception et le développement des produits. Une fois que vous avez terminé votre recherche, vous pouvez immédiatement passer un atelier de lancement officiel pour l'initiative du système de conception. Nous avions l'habitude de faire l'erreur de lancer une séance sans faire de recherche d'abord. Ces séances de coup d'envoi ont fini par se déchaîner vers les voix les plus bruyantes de la salle, surcharger le reste de tout le monde, et mettre les choses hors de la piste avec un tas de projets d'animaux de compagnie. En faisant d'abord des recherches, puis en faisant un atelier de lancement, vous pouvez utiliser la séance de lancement pour obtenir un large consensus sur l'initiative du système de conception. L' atelier de lancement consiste donc à réunir tous les acteurs de l'initiative du système de conception dans une pièce. À partir de là, vous pouvez présenter les résultats de vos recherches. Ce que vous aurez tendance à trouver, c'est qu'en parlant à un tas de gens, différentes équipes vont émerger, non ? Peut-être que le flux de travail du concepteur et du développeur est rude et qu'ils sont dans leurs propres silos. Peut-être que les développeurs sont frustrés par trop de piles technologiques concurrentes différentes. Peut-être que les concepteurs utilisent de nombreux outils différents et il devient difficile de collaborer ensemble. Toutes ces informations permettent de brosser une image de ce que le système de conception doit faire. Nous avons donc tendance à intégrer ces enseignements tirés de nos recherches et à les intégrer dans ces grands thèmes. Nous avons tendance à nous retrouver avec environ 12 à 20 thèmes pour le système de conception, résultats potentiels pour l'initiative du système de conception. Ce que nous faisons, c'est que nous accrochons ces thèmes au mur et que tous les acteurs du pieu votent sur les thèmes les plus importants. Sur tous les résultats de l'initiative du système de conception ces 10 à 20 choses, quelles sont les choses qu'il a vraiment besoin de clouer ? Quelles sont les choses qui ont vraiment besoin pour aller bien ? Ce que nous faisons, c'est que nous donnons à chacun trois notes post-it et que tout le monde vote sur les trois objectifs du résultat qu'ils jugent les plus importants. Ce qui est génial dans ce processus, c'est qu'il est très démocratique. Vous n'avez pas à vous soucier des personnes les plus extraverties ou les mieux payées de la pièce roulent la conversation et distrayent tout le monde. Tout le monde obtient un vote sur ce qui, selon lui, est le résultat le plus important de l'initiative du système de conception. À la fin de cet exercice, vous êtes en mesure de prendre du recul et d'avoir une carte thermique des priorités du système de conception, n'est-ce pas ? Si cette chose devait faire trois choses vraiment, vraiment bien, quelles sont ces trois choses ? Droit ? Quelle est la douleur et la frustration que ce système de conception doit résoudre ? Ce n'est pas pour dire que les autres objectifs ou résultats de l' initiative du système de conception ne sont pas importants ou que l'équipe ne va pas les aborder, c'est juste que quand vient le coup de pousser avec des ressources de temps et de l'argent limités, il faut que vous réussissiez certaines choses. Tu ne pourras pas tout couvrir avec la même priorité. Ainsi, en effectuant cette recherche et ces exercices de lancement, l'équipe est mieux en mesure de comprendre ce qu' est le système de conception et les tâches qu'elle doit accomplir. Dans la prochaine leçon, nous allons parler de la façon de traduire les enseignements tirés de cet exercice de lancement en choisissant projets pilotes pour préparer votre système de conception à la réussite. 4. Le projet pilote: Donc, vous avez maintenant effectué un inventaire des interfaces qui vous donne une idée de la composition de vos interfaces utilisateur, et vous avez effectué des recherches et effectué un exercice de lancement qui aide à avoir une idée générale des priorités du système de conception. Donc, la prochaine étape est en fait de plonger et de commencer à construire le système de conception. Il pourrait être tentant d'entrer et de commencer à construire composants individuels comme des boutons, des cartes et des en-têtes et des choses comme ça. Mais un système de conception vraiment réussi n'est pas créé dans le vide. Il est relié aux produits qu'il sert, et c'est l'importance des projets pilotes. Les projets pilotes offrent l'occasion de construire le système de conception à l'aide d'un logiciel de travail réel. C' est seulement en utilisant des projets pilotes que nous pouvons vraiment dire que le système de conception peut réellement alimenter des produits de travail réels. Ainsi, par exemple, un projet pilote pourrait être une refonte de la page d'accueil de votre site Web ou il pourrait être redessiner l'écran du tableau de bord ici ou il pourrait être redessiner la page de questions fréquemment posées ou quelque chose comme ça. Ces tranches de produits vous donnent l' occasion d'établir tous les composants nécessaires à la construction de ces écrans. Alors, comment choisissez-vous les projets pilotes pour lancer votre projet de système de conception ? Il y a beaucoup de critères différents dans le choix d'un projet pilote et l'un des principaux est l'endroit où ce projet figure dans sa feuille de route. Si des travaux de conception et de développement ont déjà eu lieu et qu'ils sont commencés, ce navire est probablement déjà navigué. Donc, vous voulez être dans cet endroit doux où vous savez que le projet est en cours et l'équipe prévoit de construire ce projet comme une refonte de la page d'accueil ou quelque chose comme ça, mais ils n'ont pas vraiment commencé la conception et qui devient l'occasion pour l'équipe du système de conception de s'accrocher à ce projet et d'aider à créer ce projet ainsi que les composants du système de conception naissants. Il y a beaucoup d'autres critères impliqués dans le choix des projets pilotes et mon ami et collègue Dan Moll a écrit un excellent article expliquant ces différents critères. Certains de ces critères comprennent le potentiel de composants communs. Donc, nous avons parlé de la réalisation d'un inventaire d'interface qui vous donne une meilleure idée de fabrication de vos produits Uls et donc vous voulez que le projet pilote puisse prendre certaines de ces boîtes. Si votre inventaire d'interface a montré que votre organisation a des charges et des charges de formulaires et de tables de données, vous voulez probablement avoir un projet pilote qui vous donnera la possibilité de créer des composants de formulaire et des composants de table de données . La portée du projet pilote compte aussi beaucoup. Vous ne voulez pas reconcevoir l'ensemble du site en tant que projet pilote, c'est trop grand. Vous voulez quelque chose que vous pourriez mettre la main et terminer dans quelques semaines ou quelques mois. Vous voulez également vous assurer que c'est réalisable d'un point de vue technique. Vous ne voulez pas avoir à mordre toute une replate-forme CMS ou mise à jour vers un tout nouveau framework comme un projet pilote qui pourrait être un peu trop lourd à surmonter dans ces premiers jours du système de conception. Vous voulez également réfléchir au potentiel marketing de votre projet pilote. Est-ce quelque chose d'un projet que vous pourriez tenir à la fin de ce processus pour le reste de l'organisation ? Demandez à tout le monde de le regarder et de dire « Hooh, je veux faire ça aussi » ? Couplé à cela est l'idée d'avoir un champion disponible, n'est-ce pas ? L' équipe produit avec laquelle vous travaillez, vous voulez qu'elle soit intégrée avec le concept d'un système de conception, car elle peut devenir pom-pom girl et évangéliste pour le reste de l'organisation. En ce début de journée du système de conception, vous devez avoir des gens à bord avec nous et des gens qui sont capables de rouler avec les coups de poing, parce que dans les premiers jours du système de conception, vous construisez lentement l'avion Tu es en train de voler. Donc, vous avez besoin de gens qui sont prêts à venir avec vous pour ce voyage. Vous ne voulez pas travailler avec les gens les plus sceptiques pour vos projets pilotes initiaux. Donc, encore une fois, le choix de projets pilotes permet de connecter le système de conception à vrais logiciels de travail, ce qui est absolument essentiel au succès de votre système de conception. Donc, une fois que vous avez choisi vos projets pilotes, vous pouvez maintenant vous mettre au travail et construire votre système de conception, ce qui nous amène à la méthodologie de conception atomique. 5. Méthodologie de l'Atomic Design: Le cœur et l'âme d'un grand système de conception est un ensemble de composants réutilisables, flexibles et résilients. La plupart des gens comprennent l'importance d' une conception pilotée par des composants dans le processus de développement. Mais comment arrivez-vous exactement à ces composants spécifiques qui seront contenus dans votre système de conception ? Entrez la conception atomique. La conception atomique est une méthodologie pour penser à l'interface utilisateur comme un ensemble réfléchi, hiérarchique et interconnecté de composants qui construisent des écrans réels. Afin de comprendre la conception atomique, nous allons faire un détour rapide vers votre classe de chimie au lycée. Toute la matière dans l'univers est composée d'un ensemble fini d'éléments atomiques : l' hydrogène, le carbone, le fer et des choses comme ça. Ces atomes se combinent pour former des molécules et finalement des structures plus complexes pour créer toute la complexité de notre monde et de notre univers. C' est un concept incroyablement puissant. En fait, nous pouvons appliquer ce même concept à nos interfaces. Dans le monde de la conception de l'interface utilisateur, n'importe quelle interface utilisateur peut être décomposée en un ensemble fini d'éléments atomiques. Des choses comme les étiquettes, les entrées et les boutons. Tous ces autres éléments qui ne peuvent pas être décomposés plus loin, servent de fondement, les éléments de base de notre interface utilisateur. Mais la conception atomique est plus que des atomes. Il y a en fait cinq étapes distinctes de la conception atomique. Il y a des atomes, des molécules, des organismes, des modèles et des pages. On va passer par chaque étape. Comme nous venons de le mentionner, les atomes sont les éléments de base de notre interface utilisateur. Donc, des choses comme les étiquettes, les entrées, les boutons , la topographie, les en-têtes, les images et autres choses, ils servent de matières premières. Mais c'est abstrait en soi de voir juste un tas de boutons ou d'étiquettes flottant dans l'abstrait. Donc, à l'étape suivante, au stade molécule, nous prenons ces éléments atomiques et les combinons ensemble. Ainsi, par exemple, une étiquette, une entrée et un bouton peuvent se joindre pour former un seul formulaire de recherche de champ ou un formulaire d'inscription à la newsletter. Tout d'un coup, ces atomes ont un but, non. Cette étiquette définit cette entrée, en cliquant sur ce bouton, vous soumettrez ce formulaire. Donc, maintenant vous avez ce joli composant encapsulé que vous pouvez déposer partout où vous avez besoin du formulaire de champ unique. Un organisme est un composant plus complexe qui comprend des molécules plus petites. Ainsi, un organisme d'en-tête, par exemple, pourrait être composé d'un atome de logo, d'une molécule de navigation primaire et d'une recherche d'une molécule. Toutes ces choses se réunissent sous un même toit pour former ce morceau discret d'interface utilisateur. Passer à l'étape du gabarit, ce que nous faisons là, c'est de prendre nos organismes et les combiner ensemble et de déposer tout dans une mise en page. Donc, ici, vous commencez à voir une page complète prendre forme. Mais il est important de souligner qu'au niveau du modèle, nous ne faisons que définir l'échafaudage de contenu ou le système squelettique d'une page plutôt que le produit final ou la sortie finale. Au stade de la page, nous sommes en mesure de prendre cet échafaudage de contenu ou ce système squelettique , puis d'y verser du contenu et des données représentatifs réels. Maintenant, l'étape de la page est super importante parce que c'est évidemment ce que vos utilisateurs finaux vont voir et interagir avec. Ils vont voir votre page d'accueil avec des images réelles et de vrais appels à l'action et de vrais titres impliqués en eux. Mais c'est aussi au stade de la page que nous sommes en mesure tester la résilience du système de conception sous-jacent. On peut voir si un type d'image spécifique est versé dans une unité de héros, est-ce que cette unité de héros se lève ? droite. Et si c'était une photo de montagnes et que c'était agréable et paisible, qu'il y avait beaucoup d'espace blanc et qu'il y avait un texte qui superpose ces montagnes ? Cela pourrait être agréable et facile à lire ce texte. Et si on remplacait cette image des montagnes par un groupe bruyant de gens ? Maintenant, il peut être beaucoup plus difficile de lire le texte qui est assis au-dessus de cette image. C' est pourquoi nous sommes en mesure d' arriver à des solutions robustes pour les composants sous-jacents. C' est également au stade de la page que nous sommes en mesure de jouer différents scénarios d'un modèle. Ainsi, par exemple, vous pouvez vous connecter à un tableau de bord de votre application Web, et pour un nouvel utilisateur, il peut souhaiter voir quelque chose de différent. Vous pouvez présenter un didacticiel ou un message d'alerte à un nouvel utilisateur que les utilisateurs vétérans peuvent ne pas voir. Votre système de conception doit être capable de gérer ce scénario réel. Donc, c'est à ce stade de la page que nous sommes en mesure de jouer scénarios de produits réels qui éclaireront et influenceront le système sous-jacent. Ainsi, la conception atomique pourrait être appliquée à n'importe quelle interface utilisateur. Qu' il s'agisse d'un site Web ou d'une application native ou d'un logiciel natif comme Sketch ou Photoshop ou même d'un guichet automatique bancaire de votre banque ou autre chose du genre. Donc, appliquons la conception atomique à une application que beaucoup de gens connaissent, Instagram. Donc, Instagram, comme nous le savons tous, est une application de partage de photos, et si nous appliquons la conception atomique à cette interface, et que nous explosons l'expérience de l'application Instagram dans ses éléments atomiques, nous sommes essentiellement laissés avec une poignée de , une poignée de textes atomes, et un pour la photo elle-même. Au niveau de la molécule, vous pouvez voir ces éléments atomiques se rassemblent pour former quelques pièces utilisables de l'interface. Mais au niveau de l'organisme, c'est là que les choses, la viande et les pommes de terre de l'expérience Instagram se rencontrent. Parce que c'est ici que l'organisme photo qui comprend toutes les métadonnées de l'utilisateur, la photo elle-même ainsi que les actions et commentaires de la photo où tout ce qui se réunit. Bien sûr, cet organisme photo est la chose qui est empilée l'un sur l'autre et on fait défiler vers l'infini, non. Donc, nous pourrions voir que se réunissent au niveau du modèle, qui est un modèle assez simple juste parce que c'est une application mobile. Donc, c'est juste ces choses empilées les unes sur les autres. Ensuite, au niveau de la page, est l'endroit où nous sommes en mesure de prendre notre système de conception et réellement verser du contenu représentatif réel dans ce modèle. C' est donc à ce stade que nous sommes en mesure de tester toutes les différentes variations, tous les scénarios de produits réels que nous allons rencontrer en tant qu'équipe de conception. Donc, par exemple, que se passe-t-il si votre identifiant utilisateur contient 10 caractères ? Comment ça marche ? Mais que se passe-t-il si quelqu'un essaie d'entrer le handle utilisateur qui fait 50 caractères ? Que se passe-t-il alors ? Est-ce que cela s'enroule sur deux lignes, avez-vous une conversation avec l'équipe backend pour limiter le nombre, la longueur des comptes utilisateur ? Que se passe-t-il si une photo a zéro aime à elle ? Que se passe-t-il si dans la photo a un 100 millions aime à elle ? Que se passe-t-il s'il n'y a aucun commentaire ? Que se passe-t-il s'il y a 14 couches de commentaires imbriqués ? Que se passe-t-il si la photo est un carré, un paysage ou un portrait, un diaporama ou un boomerang ? Tous ces scénarios sont de vrais produits auxquels l'équipe de conception et de développement Instagram doit répondre. Pour un autre exemple, jetons un coup d'oeil à Facebook. Donc, plus tôt, nous avons parlé de la façon dont vous pouvez appliquer conception atomique à littéralement n'importe quelle interface utilisateur. Une interface que nous connaissons tous, est Facebook. Donc, ce que nous allons faire, c'est que nous allons prendre l'interface de Facebook et la couper littéralement en morceaux. C' est ce qu'on appelle l'exercice de coupure des composants, documenté par la designer web Charlotte Jackson. Donc, ce que nous regardons ici, c'est l'étape de la page des conceptions atomiques, non. Nous examinons une instance spécifique d' une interface utilisateur avec des données réelles coulées à l'intérieur de celle-ci. Donc, la première chose que nous allons faire, c'est de déconstruire cette page en petits organismes. Nous ignorons l'étape du modèle juste parce que au modèle est essentiellement cet écran seulement avec certaines des données abstraites, à droite. Plutôt que ces personnes spécifiques dans ce profil blocs et ces histoires spécifiques dans mon flux, il serait essentiellement simplement grisé sur sorte de données de détenteur de lieu. Donc, comme nous ne pouvons pas articuler ça sur papier, nous allons juste sauter directement pour extraire nos organismes de cette page. Donc, ce que je vais faire, c'est me mettre au travail. D' accord. Donc, ce que nous avons fait, c'est que nous avons découpé cela en morceaux plus petits dans ces organismes plus larges. Donc, il vaut la peine de souligner que les organismes peuvent aussi contenir d'autres organismes. Donc, disons que les organismes de la barre latérale, par exemple, contiennent encore des morceaux assez complexes d'interface utilisateur comme le morceau de l'histoire et l'invitation de cet événement dans nos pages dans notre publicité ici. Donc, ce que nous pourrions faire, c'est en fait prendre cet organisme et le décomposer encore plus loin. Alors, allons-y et faisons-le. D' accord. Donc, maintenant, nous avons encore plus petits organismes, mais ce sont toujours des organismes. Donc, maintenant, à partir d'ici, nous pouvons prendre un organisme spécifique et commencer à en extraire nos molécules. Donc, je vais choisir l'organisme des histoires et en fait déconstruire cela encore plus loin. Alors, allons-y et faisons-le. Donc, maintenant, nous avons déconstruit l'organisme des histoires et l'avons soufflé en quelques petits composants. Donc, vous verrez qu'on a quelques boutons accrochés en haut à droite, on a un titre pour ce bloc ici. On va laisser ça tranquille pour l'instant. En bas, nous avons ce bouton pour voir plus de vos amis. Mais ce que je vais faire, c'est que je vais me concentrer sur cette composante spécifique ici. Donc, nous pouvons appeler cela une molécule de profil, ou nous pourrions l'appeler un bloc de média, qui est un nom plus générique pour ce composant spécifique. Mais essentiellement, ce que nous regardons est une image sur la gauche et un nom ou un titre d'une sorte quelconque et quelques métadonnées en dessous. C' est une pièce vraiment importante du puzzle de l'interface utilisateur de Facebook. Vous pouvez voir que nous avons notre liste de contacts ici en utilisant un peu de saveur de ce même composant. Nous l'avons utilisé ici, nous l'avons dans notre en-tête ici, nous l'avons ici dans notre barre latérale, et il a utilisé un tas d'endroits différents sur leur site. Donc, vous pouvez voir à quel point il est important de pouvoir traiter ce composant parce que c'est trompeusement simple. Si nous y regardons et que vous considérez qu'il y a 2,2 milliards d'utilisateurs, ce composant ici doit faire beaucoup de levage lourd. Donc, nous parlons de noms de toutes les formes et tailles, différentes langues, différentes directions de lecture, des choses comme l'arabe, le mandarin ou l'allemand ou d'autres choses qui ont tendance à ne pas suivre le style occidental de l'écriture. Il est vraiment important que ce morceau d'interface utilisateur soit capable de gérer tous ces différents scénarios. Je n'envie pas leur équipe au moindre pour cela parce que c'est une pièce d'interface utilisateur incroyablement complexe. Donc, maintenant que nous avons notre composant de bloc média ou une molécule de bloc média ou une molécule de profil, peu importe ce que nous voulons appeler cela, nous pouvons maintenant même déconstruire cela encore plus loin. Donc, ce que je vais faire, c'est couper ça en morceaux atomiques. Donc, nous avons déconstruit notre molécule de bloc médiatique ou notre molécule de profil vers le bas en éléments atomiques. Donc, nous avons cette icône d'image circulaire réutilisable que nous utilisons sur le site Facebook. Nous utilisons cet atome de titre qui est utilisé pour afficher les noms des gens mais aussi les appels à l'action, ainsi que beaucoup, beaucoup d'autres choses sur le site, ainsi que ce traitement général pour quelque chose que nous appellerons les métadonnées, ou c'est quelque chose d'un peu plus subtil. Il est destiné à indiquer soit un horodatage, soit ici, c'est un peu un texte de description. Mais vous pouvez voir que même à ce niveau d'atome, il y a beaucoup de travail en cours ici. Alors, que se passe-t-il si image de profil d' un utilisateur est rognée bizarrement et qu'elle coupe une partie de sa tête, ou que se passe-t-il s'il n'a pas d'image de profil du tout ? Quelle est la chose par défaut ? Et si nous voulons utiliser une sorte d'icône ou une image différente pour cela ? Tout cela, même au niveau de l'atome, il y a tellement de complexité qui se passe ici. Mais l'esprit de ceci est, en contrôlant tout cela à ce niveau d'atome, en étant capable de résoudre des problèmes très complexes et difficiles au niveau atomique, chaque fois que ces choses se réunissent pour former ces molécules, puis se rassemblent plus loin pour former ces organismes, puis se réunissent pour finalement former ces écrans finaux, toutes ces meilleures pratiques qui se produisent tout le chemin au niveau atomique bulle et se percolent dans toute l'interface utilisateur comme un tout. Ainsi, Atomic Design peut aider les équipes à prendre en charge ces gros problèmes épineux d'interface utilisateur, les décomposer en morceaux plus petits et plus digestes, leur permettant de concevoir et de construire des choses plus systématiquement puis de construire ces composants jusqu'à forment des produits très flexibles et résilients. Penser aux systèmes de conception d'interface utilisateur grâce à l'objectif d'Atomic Design offre de nombreux avantages. La première et la plus importante que j'ai répétée tout au long de cette leçon est qu'il est extrêmement important de connecter la conception et le développement de produits à la conception et au développement de systèmes. Atomic Design fournit un pont entre ces mondes parce que ce ne sont pas seulement les composants qui vivent dans le vide sur le côté dans une abstraction et ensuite vos produits qui vivent ailleurs, c'est tout ce qui se nourrit les uns les autres. La conception et le développement du système informeront et influenceront les produits qui sortent de l'autre extrémité, et les produits eux-mêmes informent et influenceront le système. Donc, par exemple, vous pourriez avoir une page d'accueil marketing qui contient quelques cartes, une unité de héros, et des choses comme ça, et ensuite, vous pourriez avoir un autre produit qui utilise des cartes d'une autre manière, toujours en utilisant la même molécule de carte ou organisme, mais il est appliqué à différents produits à des fins différentes. L' application d'Atomic Design au flux de travail de votre système de conception vous permet de construire l'ensemble et les parties de cet ensemble en même temps. Vous ne concevez pas une voiture en commençant par le enjoliveurs ou un écrou, puis en construisant à partir de là, cela commence à partir d'une image globale et cohérente de ce que sera cette voiture, et vous arriverez aux parties qui comprennent cette voiture en même temps. Un autre avantage de la conception Atomic est qu'elle offre une séparation claire entre la structure de vos composants d'interface utilisateur et le contenu qui y vit. Ainsi, par exemple, vous pourriez avoir un composant de carte réutilisable. Dans un cas, ce composant de carte peut contenir un tas de données de produit. Dans un autre cas, il peut contenir un tas de données d'événement. En créant cette séparation claire entre une structure de composant et son contenu, vous pouvez créer des composants d'interface utilisateur plus réutilisables, plus agnostiques et plus flexibles. Une autre chose qu'Atomic Design fournit est un langage commun pour considérer les composants comme une hiérarchie. termes comme composant et module et élément sont un peu trop abstraits, et il n'y a aucun sens de hiérarchie implicite ici. Mais des termes comme les atomes, les molécules et les organismes contiennent ce sens de la hiérarchie, où les atomes sont inclus dans les molécules et les molécules sont incluses dans les organismes. Maintenant, si vous trouvez que votre équipe a trébuché sur les termes atomes, molécules et organismes, ce n'est pas grave. Mettez à jour votre langue et votre nomenclature en quelque chose qui a du sens et qui aide tout le monde à intégrer ces concepts. Vous êtes capable de pratiquer la conception atomique sans utiliser les termes atomes, molécules et organismes. L' équipe de GE qui travaille sur le système de conception Predix a décidé d'adopter la méthodologie Atomic Design et de modifier le vocabulaire et d'y ajouter quelques étapes supplémentaires. Cela les a aidés à s'en sortir pour l'ensemble de l'initiative du système de conception. Donc, maintenant, nous avons couvert ce qu'est Atomic Design. C' est un modèle mental pour penser à nos interfaces utilisateur comme un ensemble hiérarchique et interconnecté de composants qui aide à construire des écrans de produits réels. Mais comment appliquer la conception atomique dans le monde réel ? Dans la prochaine leçon, nous allons parler de la façon dont les concepteurs et les développeurs peuvent travailler avec Atomic Design dans leurs flux de travail. 6. Les outils du métier: Donc, à son cœur, Atomic Design n'est qu'un modèle mental. Alors, comment les concepteurs et les développeurs appliquent-ils réellement ce modèle mental à leur flux de travail ? façon dont vous appliquez la conception atomique à votre flux dépendra du rôle que vous jouerez dans une initiative de système de conception. Les concepteurs ont tendance à travailler dans des outils tels que Sketch ou Envision Studio , Figma ou Adobe XD ou d'autres environnements de conception statique. Heureusement, ces outils ont évolué au cours des dernières années pour inclure éléments comme des symboles et des composants qui peuvent être imbriqués les uns aux autres. Ainsi, nous sommes en mesure d'accomplir la conception atomique dans ces outils de conception statique. Ainsi, dans un croquis semblable à un outil, nous sommes en mesure de définir nos atomes, de définir nos molécules, et aussi de définir que nos organismes sont des composants plus complexes, et ce que nous sommes en mesure de faire avec cela est maintenant faire un lien entre ces atomes, molécules et organismes. Donc, par exemple, si nous voulions changer le rayon de bordure de nos boutons, je pourrais venir ici mettre à jour notre valeur de rayon de bordure et appuyer sur « Enregistrer », et ce que je suis capable de faire est de voir comment faire ce changement impact sur notre composant teaser qui utilise notre atome de bouton, et vous pouvez voir que ces bordures sont maintenant arrondies, et puis si nous allons dans nos organismes qui font une liste de teaser qui est une collection d'éléments teaser, nous pouvons voir ces boutons mis à jour comme Eh bien. Donc, tout ce qui est à dire, vous êtes capable de créer ce système interconnecté de composants de ces symboles et apporter des modifications à un seul endroit et que ces modifications s'avèrent partout où ce composant est inclus. Alors que les concepteurs utilisent des outils tels que Sketch et Figma et Adobe XD et Envision Studio, les développeurs ont tendance à construire des composants dans un autre type d'environnement. J' ai tendance à appeler cela l'environnement d'atelier frontal, et ce qu'est un environnement d'atelier frontal est un endroit où vous êtes capable de définir des composants et de mettre les données dynamiques réelles dans ces composants sans nécessairement avoir à le brancher à l'application en fonctionnement réel. Il y a un tas d'outils différents qui fournissent ces environnements d'atelier front-end. Nous avons rassemblé une collection de ces outils d' atelier front-end sur un site appelé StyleGuides.io, qui est une collection de ressources sur les systèmes de conception. Il y a tout un tas d'environnements d'atelier front-end qui sont très populaires, y compris storybook, pattern lab, fractal, view DS et plus encore. Ce que nous allons faire est de montrer une démonstration de l'utilisation du laboratoire de modèle pour créer un système de conception des composants et des écrans de projets pilotes. Donc, ce que nous avons fait, c'est nous avons créé un site de commerce électronique fictif dans le laboratoire de modèles. Donc vous pouvez voir la page d'accueil ici a quelques photos de près de chaussures avec quelques images promo et un pied de page et toutes ces bonnes choses, et ensuite nous sommes en mesure de cliquer dans nos catégories de produits pour voir les chaussures femmes et les hommes chaussures et chaussures pour enfants, puis nous sommes en mesure de cliquer sur une page détaillée du produit qui montre le produit spécifique qu'un utilisateur souhaite acheter, tout au long de l'expérience de la carte d'achat et du flux de travail de paiement. Donc, c'est un excellent exemple d'un site Web qui a beaucoup de choses avec lui. On a plus de trucs de marketing. Nous avons des pages détaillées de produits plus utilitaires et bien sûr des forums pour les utilisateurs de vérifier. Donc, tout cela est créé avec 100 mensonges système de conception, et ce que le laboratoire de modèles nous permet de faire, est de visualiser les systèmes de conception sous-jacents composants. Ainsi, en sautant dans la page d'index, vous pouvez voir toutes les pièces subatomiques même comme notre palette de couleurs de marque et sont des couleurs neutres et couleurs utilitaires, ainsi que nos tailles de topographie et de polices et en-têtes et d'autres choses comme ça, et comme nous défilons ici, vous verrez des choses comme des icônes dans différents types d'images et différents blocs comme notre unité de héros et bloc promo que nous allons entrer dans un peu. Mais vous pouvez voir tous les atomes, molécules et organismes sous-jacents mis à nu pour que l'équipe puisse avoir des conversations à leur sujet. Donc, le truc cool, c'est que nous sommes capables d'utiliser laboratoire de modèles pour traverser ces différents modèles. Ces atomes, molécules, organismes, modèles et pages. Ainsi, par exemple, nous sommes en mesure de zoomer sur un atome individuel, ce qui nous aide à avoir une conversation sur ce composant d'interface utilisateur spécifique. C' est donc un endroit utile où les concepteurs et les développeurs sont en mesure de se réunir pour parler des dimensions que ces images de produits vont être. Donc, vous pouvez voir que c'est une image 600 par 400. Mais encore une fois, comme nous avons parlé de ces atomes ne sont pas terriblement utiles à eux seuls. Donc, ce que nous sommes capables de faire est d'utiliser la fonctionnalité de lignage des laboratoires de modèles pour montrer où ce modèle est réellement utilisé. Donc, il est dit que l'image de bloc de pile est utilisée dans notre molécule de bloc empilé. Donc, nous pouvons cliquer ici, et en fait maintenant voir ce composant de bloc empilé qui est une carte de produit ou quelque chose où nous pourrions mettre des informations sur le produit, mais aussi peut-être d'autres informations sur la route. Donc, à partir d'ici, on peut dire que nous avons la carte de bloc empilée, où est-ce que ça peut être utilisé ? Et il dit que cela est inclus dans notre liste de blocs de pile qui est une liste de ces composants qui se réunissent tous pour former cette grille qui pourrait être utilisée pour quelque chose comme une qualité de produit ou quelque chose comme ça. Maintenant, nous pouvons dire que les listes de blocs de pile sont incluses dans ces modèles suivants jusqu'au modèle de catégorie. Donc, maintenant, nous sommes en mesure de voir cette qualité de produit commencer à prendre vie. Nous pouvons voir que ces listes de blocs empilées commencent à être appliquées à quelque chose de très spécifique. Maintenant, à partir d'ici si nous regardons où ce modèle est utilisé, est de dire que nous l'utilisons pour notre catégorie d'enfants ou la catégorie des hommes et ainsi de suite et ainsi de suite. Donc, si je clique sur une page spécifique, nous sommes en mesure de visualiser à quoi ressemble ce modèle avec les données de chaussures pour hommes qui y sont versées. Donc, encore une fois, c'est un scénario de produits réels. Cette entreprise a besoin de vendre des chaussures pour hommes et cette interface utilisateur accomplit cela. Mais alors nous sommes également en mesure de naviguer vers différentes zones qui utilisent exactement le même modèle, mais en versant du contenu différent à l'intérieur de ces modèles d'interface utilisateur. Donc, que vous soyez un concepteur utilisant des symboles imbriqués soient composants dans une esquisse ou sigma de type outil ou que vous soyez un développeur utilisant un outil comme un laboratoire de modèles ou storybook pour imbriquer des composants les uns à l'intérieur de l'autre dans le code, vous construisez cet ensemble de composants interconnectés et interdépendants pour construire des écrans réels, et ces écrans seront dictés par vos projets pilotes. Si le concert est en train de construire une nouvelle page d'accueil, alors génial qui va vous donner la possibilité de créer un composant de héros et quelques composants de carte dans votre en-tête, dans votre pied de page et des choses comme ça. Si vous êtes le concert est en train de reconcevoir le flux de paiement qui va vous donner des champs de formulaire et d'autres choses. Donc, l'idée est que nous utilisons ces projets pilotes pour concevoir et construire tous les composants qui alimenteront finalement ces produits. En utilisant un environnement d'atelier frontal et en utilisant les outils de conception statique et ce sont des composants imbriqués, vous êtes en mesure d'accomplir des systèmes de conception atomique juste là sont tous sous un même toit. Donc, ce processus peut être utilisé pour construire votre système de conception initial, mais l'une des choses cruciales d'un système de conception est de s'assurer qu'il résiste à l'épreuve du temps. Comment définir votre système de conception non pas pour le succès à long terme et gérer non seulement les scénarios actuels de vos produits, mais aussi les résultats futurs de vos produits. Dans la leçon suivante, nous allons parler de la façon de le faire. 7. Utiliser votre système pour des travaux futurs: Ainsi, construire un système de conception à l'aide d'une poignée de projets pilotes est un excellent moyen d'établir un ensemble de composants réutilisables et flexibles qui pourraient aider à construire de vrais produits. Mais les projets pilotes sont exactement cela. Ce sont des pilotes. Ils ne répondront pas à tous les scénarios dans lesquels votre organisation va se retrouver. Parfois, vous allez vous retrouver à la recherche d'un composant, brancher, et trouver que cela vous amène peut-être 90 pour cent du chemin là-bas. Mais pour accomplir quelque chose, vous avez besoin ce 10 pour cent supplémentaire pour qu'il fonctionne correctement. Donc, ce que nous allons faire, c'est parler du travail produit en cours et façon de l'intégrer à l'évolution continue de votre système de conception. Revenons à notre hypothétique compagnie de chaussures. Disons juste que le patron a toujours été un peu réticent à offrir des choses qui étaient en vente. Donc, tout ce que nous voyons sur notre démo est un article plein prix, non ? Donc, notre catégorie pour hommes, notre catégorie pour femmes, notre catégorie pour enfants n'a rien d'autre que des articles à plein prix. Mais les temps ont changé. Et disons que, cette stratégie ne fonctionnait pas, alors, à contrecœur, le patron arrive, et il dit : « D'accord. Nous devons maintenant inclure une section de vente sur notre site Web. » Alors, comment ça marche ? Parce que cela implique en fait la mise à jour de notre interface utilisateur pour répondre à ce nouveau scénario commercial. Donc, ce que nous devons faire, c'est que nous devons mettre à jour notre navigation pour inclure une section commerciale. Et nous pourrions mettre à jour notre page d'accueil et inclure une nouvelle section sous nos principaux articles promotionnels, avec cette sorte de section « En vente ». Ensuite, nous pourrions également cliquer sur notre page de catégorie de vente, qui est exactement la même page de catégorie que les catégories femmes, hommes et enfants, mais nous avons quelques différences d'interface utilisateur qui deviennent claires. Donc, nous avons un changement à notre modèle de bloc empilé où nous incluons et ajoutons ce petit drapeau de vente dans le coin supérieur droit de notre composant et nous avons également cette mise à jour de notre prix. Que vous pouvez voir le prix d'origine assommé, et le nouveau prix de vente apparaissant à sa place. Donc, le truc cool est, c'est que nous sommes toujours en mesure réutiliser les bits principaux de ce composant, mais nous allons créer une variation de ce composant qui nous permet de résoudre ce scénario de vente. Donc, vous verrez que dans notre bibliothèque de modèles, nous avons maintenant un bloc empilé. Et puis nous faisons une variation de ce modèle, écrivant un peu de HTML et un peu de CSS, et en apportant ces changements pour répondre à ce scénario. Maintenant, ce bloc empilé pourrait traiter non seulement des produits normaux, mais aussi des produits vendus. Le résultat est un composant plus robuste, un composant plus flexible qui peut se déplacer à plus d'endroits sur le site Web. Donc - c'est génial - avec seulement quelques ajustements à un composant, nous sommes en mesure de répondre à un scénario de tout nouveau produit. C' est ce que Yesenia Perez-Cruz appelle Scenario Driven Design Systems. L' entreprise a un problème, a un objectif, qu'elle essaie d'atteindre, et le système de conception doit aider à atteindre ces objectifs. C' est donc grâce à l'objectif du travail produit en cours que le système devient plus fort et plus flexible au fil du temps. Utilisons un autre exemple d'un guide de cadeaux de vacances. Le patron arrive et dit : « C'est presque l'heure des vacances. C' est une période importante de l'année pour nous. Nous réalisons beaucoup de nos revenus. Mais, soyons honnêtes, nos pages de catégorie actuelles ne sont pas aussi splashy que nous le souhaiterions. » Donc, ce que nous voulons faire, c'est que nous voulons aborder cette question. Donc, si vous regardez nos pages de catégorie de produits existantes, il est possible de créer un guide cadeau de vacances comme titre, puis présenter les différents produits qui seront en vente pour les vacances. Mais on pourrait faire quelque chose de mieux. Parce que nous avons ces composants réutilisables - dont certains sont sur notre page d'accueil - qui sont plus grands et plus éclatants, peut-être que nous pourrions réutiliser certains de ces composants pour créer une section de guide de cadeaux des fêtes plus éclaboussures et élégantes. Donc, ce que nous allons faire, c'est que nous allons prendre ce composant de héros, et nous allons le brancher au-dessus de notre grille de produits. Et nous allons arriver à un tout nouveau design, en utilisant des composants existants dans notre système de conception. Donc, c'est vraiment, vraiment puissant parce que cela nous permet de mélanger et de faire correspondre les composants existants pour obtenir une expérience entièrement nouvelle, le tout en quelques minutes. Historiquement, créer quelque chose comme un guide de cadeaux des fêtes prendrait des semaines, voire des mois à accomplir. Mais une fois que vous avez un ensemble de composants réutilisables, flexibles et résilients que vous pouvez réorganiser de différentes manières, vous pouvez littéralement brancher ce truc en quelques minutes. C' est un énorme gain pour toute l'équipe. Maintenant, bien sûr, cela ne veut pas dire que, « C'est si facile que tout ce que nous avons à faire est de glisser et déposer quelques composants et d'aller déjeuner tôt. » Il y a encore, évidemment, beaucoup de travail de conception de produit qui doit se produire. Mais voilà le truc. Maintenant, que les concepteurs et les développeurs n'ont pas à reconstruire les composants du héros à chaque fois, ils sont capables de se concentrer sur des problèmes plus grands et meilleurs. Peut-être qu'il s'agit de traduire ce composant de héros dans deux langues différentes, peut-être qu'il s'agit de trouver des illustrations différentes ou peut-être de passer plus de temps à jouer avec l'animation ou d'autres choses, non ? C' est l'occasion de libérer les concepteurs et les développeurs pour un travail plus intéressant. En connectant votre travail continu de conception de produit à l'évolution de votre système de conception, chaque itération sur les composants de votre système de conception se traduit par un système plus robuste, plus flexible, plus résilient et plus puissant. C' est un concept incroyablement puissant. 8. Réflexions finales: Alors c'est ça. Vous êtes arrivé jusqu'à la fin du cours. J' espère que vous comprenez maintenant comment systèmes de conception aident à alimenter des produits réels et comment vous pouvez utiliser la méthodologie de conception atomique dans vos workflows de conception et de développement afin de créer votre système de conception initial, mais également pour vous aider à orienter vos efforts de conception continue du système. J' aurais aimé savoir comment vous utilisez la conception atomique dans votre propre flux de travail, et j'aimerais aussi savoir si vous êtes accroché ou frustré ou coincé dans une partie quelconque de votre initiative de système de conception. Alors n'hésitez pas à sauter dans la section de discussion ci-dessous et à continuer la conversation. Merci beaucoup de m'avoir rejoint dans ce cours, et j'espère vraiment que cela vous aidera dans votre propre parcours de système de signalisation. 9. Découvrez d'autres cours sur Skillshare: [ MUSIQUE]