Créez des systèmes de conception complexes dans Adobe Xd

1. Introduction du cours: Les systèmes de conception sont utilisés pour créer des expériences faciles à utiliser, faciles à évoluer et faciles à créer de manière cohérente à l'avenir. L'objectif principal d'un système de conception est de combler le pont et l'écart entre les concepteurs et les développeurs et d'être facile à intégrer et à développer pour une utilisation future en tant que compétences du système de conception et comme Les enfants de l'entreprise, je ne savais pas que je m'appelais Alex. Et dans cette classe Skillshare nous allons parler conception des systèmes et de la façon de créer des systèmes conception dans Adobe XD, je suis un créateur de produits de conception et jusqu'à présent j'avais créé. plus de 500 produits design. Je suis également créateur de cours et jusqu'à présent j'ai créé plus de 30 chevaux différents sur votre conception UX dans Adobe XD, nous allons parler des systèmes de conception , de leur objectif et de ce qu'est un bonne structure pour un système de conception. Ensuite, je vais vous montrer quelques exemples et normes phares du secteur que vous devez suivre lorsque vous créez vos propres systèmes de conception dans Adobe XD. Et après cela, je vais vous montrer comment créer votre propre système de conception à l'aide du WASD. Et je vais vous montrer mon système de conception initiale, comment je l'ai créé et ce que vous pouvez en apprendre. Ensuite, nous allons parler des jetons de conception, ce qu'ils sont, des raisons pour lesquelles ils sont utiles pour créer vos systèmes de conception. Et enfin, comment faire évoluer votre système de conception et le mettre à l'échelle. Et ce que vous devez faire attention lorsque vous mettez réellement à l'échelle votre système de conception. Votre projet de classe pour cette classe est créer votre propre système, mais rien de trop important, juste quelques composants ici et là. Et je suis vraiment ravi de voir ce que vous pouvez créer. Il y a une vidéo dans la classe qui explique davantage votre classe. Les systèmes de conception de projets sont plus utiles que jamais aujourd'hui, lorsque nous disposons de ces différentes tailles d'écran et appareils pour lesquels nous devons concevoir. Nous devons donc suivre la cohérence quant à ce que nous créons pour quelles tailles d'écran et comment tout cela fonctionne à la fin de la journée, pour nos utilisateurs finaux, en utilisant un système de conception pour conserver est vraiment important, surtout si vous utilisez l' outil qui est génial comme Adobe XD. J'ai hâte de vous voir à l'intérieur et créons de superbes systèmes de conception. 2. Qu'est-ce que un système de conception: système de conception, comme son nom l'indique, est une approche systématique de la création de conceptions d'interface utilisateur et d'interface utilisateur. L'objectif principal du système de conception de zones est de suivre ce que tout le monde dans l'équipe a créé. Le principal objectif du système de conception est l'évolutivité. Qu'il s'agisse de l'évolutivité immédiate ou l'évolutivité qui va venir à l'avenir. Mais la tâche principale du système de conception consiste à maintenir l'échelle de la dette cohérente. Cela signifie que chaque changement que vous apportez va refléter dans le reste de votre conception sera cohérent et il restera dans l'apparence de ce qui est déterminant . le tout début d'un système de conception. Chaque bon système de conception se compose de deux réservoirs, règles et de normes et de bibliothèques de modèles. Les règles et les normes sont à la disposition de tous les coéquipiers pour les suivre jusqu'au t parce que c'est la seule façon dont le système de conception va évoluer uniformément, qu'il va croître et qu'il va être cohérent tout au long de sa vie. Parce que la durée de vie du système de conception correspond à la durée de vie de l'entreprise. Cela n'est jamais fait, il n'est jamais fini. Ainsi, tant que l'entreprise ou le produit existe, le système de conception peut coexister avec ce produit ou cette entreprise, tandis que la bibliothèque de modèles, d'autre part, est là, et elle va évoluer tout le temps en fonction des besoins, besoins de Kubrick et des besoins futurs de chaque projet particulier et de chaque entreprise particulière. La principale idée fausse est que les systèmes de conception sont réservés aux grandes entreprises, ce qu'ils ne sont pas. Vous pouvez utiliser un système de conception pour les petites entreprises, vous pouvez utiliser le système de conception avec moins de composants. Nous avons moins de lignes directrices et de normes. Et ces lignes directrices peuvent être un peu rudes au début. Mais au fil du projet, mesure que l'entreprise grandit, les règles et les normes vont se resserrer et le système de conception va enfin prendre sa forme et sa forme, prévue à partir du au début et ça va tout simplement croître avec l'entreprise. Les systèmes de conception peuvent être destinés concepteurs et aux développeurs. Et cela peut être réalisé avec l'utilisation quelque chose qui s'appelle jeton. Nous allons en parler un peu plus tard dans ce cours. Mais fondamentalement, la collaboration entre concepteurs et développeurs est la clé chaque bon système de conception. Dès que le changement est effectué ou propagé, concepteurs et les développeurs doivent être sur la même longueur d'onde pour que ce système de conception fonctionne et pour le changement soit immédiatement mis en œuvre. Et c'est le plus simple possible. C'est extrêmement important pour les startups, mais aussi pour les entreprises établies, car vous ne voulez pas briser la conception et la fonctionnalité du produit en changeant simplement la conception. système trop important avec quelque chose qui n'est pas aligné sur tout le monde dans l'équipe. Il y a quelques éléments que tout bon système de conception devrait avoir. Et dans la prochaine vidéo, nous allons en parler. Quelle est la bonne structure pour chaque bon système de conception ? 3. Structure d'un système de conception: Comme je l'ai mentionné dans la leçon précédente, la structure d'un bon système de conception consiste en deux éléments règles et les normes et les bibliothèques de modèles. Les rôles dans les normes peuvent être présents sous différentes formes. Par exemple, chaque règle doit être coïncidée avec quelque chose que vous faites à l'intérieur de ce système de conception. Et disons que la règle peut concerner la grille, peut concerner la typographie. La règle peut concerner la couleur, l'espacement, le rythme horizontal ou vertical. Il peut s'agir de n'importe quoi. Et les règles peuvent bien sûr être enfreintes, mais elles peuvent être brisées au tout début d' un système de conception car plus tard, lorsque le projet est développé, lorsque le projet a grandi, c'est beaucoup difficile d' enfreindre une règle que lorsque vous commencez tout juste avec la conception. système. Les normes peuvent ressembler aux valeurs de l'entreprise. Ils peuvent ressembler à un ton, comme une ambiance du projet et hors du site Web du client ou de la marque de votre client. Et cela devrait être suivi jusqu'à l'intérieur d' un système de conception parce que vous ne voulez pas trop dévier, surtout dans le système de conception qui est vraiment Corporate. Vous ne voulez pas qu'ils changent trop parce que foule des entreprises est vraiment habituée à ce genre d'expiation, ce genre de porte de design porte des types d'érudits, ces topographies, ces hiérarchies et bien plus encore. La deuxième partie d'un bon système de conception est celle des bibliothèques de modèles. Et vous pouvez modifier ces bibliothèques de modèles fur et à mesure que vous progressez le long de l'astuce principale Dès que vous commencez créer des bibliothèques de modèles de systèmes de conception, vous n'avez pas besoin de créer des éléments qui ne sont pas nécessaires pour le moment. Par exemple, si votre projet ne possède pas de tableau de bord, vous ne créerez pas d' éléments tels que des graphiques et graphiques car ils ne sont tout simplement pas pertinents pour le moment. Vous n'allez pas remplir votre système de conception avec tous ces composants inutiles car rappelez-vous simplement de vous, car le concepteur est présent, votre équipe de conception est là pour créer ces designs. Mais ces conceptions doivent être accessibles et faciles à comprendre pour développeurs qui doivent développer tous ces éléments pour ce projet particulier. Il suffit donc de créer des éléments nécessaires à ce moment et de laisser le système de conception évoluer au fil du temps selon le projet. Comment pouvez-vous maintenant diviser tous ces composants dans la bibliothèque de composants ? En gros, il existe trois grandes catégories. Il existe des atomes, des molécules et des organismes. Et vous pouvez bien sûr ajouter des modèles. Vous pouvez, bien sûr, élargir le nombre d'autres variantes que vous souhaitez. Par exemple, diagrammes de flux ou filaires, filaires haute fidélité. Mais fondamentalement, les atomes, les molécules et les organismes sont présents tous les bons systèmes de conception et ils évoluent avec le projet. Et vous pouvez toujours ajouter plus de ces éléments, comme je l'ai dit plus loin dans l'alignement du projet. Maintenant, comme son nom l'indique, les atomes sont les plus petits du groupe et ils peuvent être quelque chose de très facile. Par exemple, la couleur ou la taille du texte , la largeur du bas ou quelque chose du genre. Ensuite, les molécules sont créées à partir d'atomes, allées aux atomes, se combinent. En gros, vous allez créer une molécule, par exemple un menu déroulant ou quelque chose du genre. Et puis les organismes sont, disons, un formulaire créé à partir de différents éléments, par exemple des champs de saisie et des boutons. Et ensuite, vous obtiendrez une forme qui est organisme créé pour divers atomes et molécules différents et se combinent en un seul organisme. C'est ce qu'on appelle la structure atomique et c'est vraiment nos normes industrielles depuis des décennies. Mais vous pouvez créer votre système de conception comme vous le souhaitez. Mais si vous utilisez cette approche atomique, il sera beaucoup plus simple pour vous de créer vos éléments et de les réduire à l'échelle à l'avenir. Le point principal de chaque système de conception est la cohérence. Il faut donc penser à la cohérence tout le temps. Où que vous créez simplement un bouton simple, vous devez réfléchir à la façon dont ce bouton va évoluer selon différentes tailles d'écran. Est-ce que ça va changer la largeur, va changer la hauteur. Est-ce que ça va changer la couleur va être avec des coins arrondis, sans coins arrondis. Vous devez donc penser à tous ces éléments lorsque vous construisez votre système de conception, vous devez réfléchir aux règles et aux normes, que nous avons mentionnées au début de cette leçon. Et vous devez également penser à d'autres éléments de votre bibliothèque de modèles. Comment vont-ils coïncider les uns avec les autres ? Vont-ils bien paraître sur la page ? Ainsi, chaque fois que vous créez un nouvel élément à l'intérieur de la bibliothèque de modèles , vous devez le mettre sur une page, vous devez immédiatement le tester, voir s'il fonctionne avec le reste de votre bibliothèque de modèles. Et si c'est le cas, vous pouvez le garder et sinon, vous pouvez toujours le mettre au rebut. C'est tout l'intérêt de notre système de conception. Elle va toujours évoluer, elle va toujours changer et elle ne ressemblera jamais à ce qu'elle était hier. Dans la prochaine leçon, je vais montrer quelques excellents exemples de systèmes de conception issus des leaders de l'industrie et des normes de l'industrie. Je vais vous montrer ce qu'il faut faire attention. Plus tard dans cette classe, je vais vous montrer comment créer votre propre système de conception dans Adobe XD et ce que vous pouvez réaliser avec création de systèmes de conception dans Adobe XD. Je vous y verrai. 4. Exemples de systèmes de design: La meilleure façon de créer votre propre système de conception est d' apprendre des normes de l'industrie et des géants de l'industrie. Et pour ce faire, je vais simplement vous montrer quelques exemples et vous trouverez ces exemples dans le PDF ci-joint. Vous pouvez simplement cliquer sur ces liens pour accéder à tous ces exemples que je vais vous montrer et simplement apprendre d'eux ce qu'ils créent. Mais avant de commencer, je ne me sens pas obligé de prendre tous les éléments que ces entreprises créent car, comme je l'ai déjà mentionné dans les leçons précédentes, ces composants sont là pour une raison. Donc, à moins d' utiliser l'un de ces composants, ne les créez pas. Lorsque vous commencez à créer un système de conception, il est vraiment important de commencer petit. Ensuite, au fur et à mesure que votre projet évolue, vous allez ajouter tous ces différents composants. Parce qu'à quoi sert la création de composants s'ils ne sont pas nécessaires pour le moment, ils vont simplement vous ralentir et vous n'allez pas optimiser votre temps sur ce projet en particulier si vous créez des composants qui ne sont pas nécessaires à votre projet. Permettez-moi donc de vous montrer tous ces exemples. Le premier exemple que nous avons est la conception matérielle de Google. Bien sûr, ce design matériel est utilisé dans leur système d'exploitation Android. Apple a le leur, c'est ce qu'on appelle des directives d' interface humaine, et vous pouvez le trouver également. Je relierai tous ces systèmes de conception mentionnés à quelques autres systèmes de conception qui ne seront pas mentionnés dans cette vidéo dans le PDF. Une fois de plus, ouvrez le PDF, cliquez sur ces liens pour y accéder et naviguer vous-même. Ce que nous avons ici, c'est de vous présenter du matériel au moment de la réalisation de cette vidéo. C'est la toute nouvelle et la norme de l'industrie dans le monde Android. Donc, en gros, continuez également à utiliser la conception des matériaux. Vous pouvez consulter des directives, des composants, des icônes, composants pour le Web, directives d'accessibilité et des didacticiels pour développeurs. Vous pouvez en apprendre davantage sur leur blog. Et passons rapidement en revue ces éléments et je n'entrerai pas trop dans les détails car la majorité de ces systèmes de conception sont fondamentalement les mêmes. Ils utilisent les mêmes normes, ils utilisent les mêmes directives, mais ils ont simplement un aspect différent. Parce que, par exemple, avec ce système de conception de matériaux, c'est pour Android, donc pour les appareils mobiles. Bien que d'autres systèmes de conception existent, par exemple, sites Web ou des projets Web ou des tableaux de bord ou des éléments comme ceux-ci. Bien sûr, tous ces éléments seront différents entre les systèmes de conception mobile et de bureau. Mais la clé est la même, les normes sont les mêmes. Supposons donc que vous ayez ces lignes directrices, principes, styles et bonnes pratiques. Ce que cela signifie pour chaque élément, quel est le meilleur moment pour l'utiliser ? Dans ce cas, par exemple, vous n'utiliserez pas certains sélecteurs de dates. Dans certains exemples, vous allez utiliser différents types de sélecteurs de dates dans ces exemples. C'est pourquoi ces principes et ces meilleures pratiques existent. Si vous avez déjà regardé un projet d'image de marque ou une présentation de marque d'une marque, vous pouvez les regarder sur Behance. Par exemple, vous pouvez rechercher des vidéos YouTube à leur recherche. Fondamentalement, les meilleures pratiques existent. C'est la raison principale, par exemple, pour laquelle vous utilisez le logo dans cette orientation plutôt que dans cette orientation. Pourquoi utiliser des images blanches ici et non ici ? C'est pourquoi ces meilleures pratiques existent. Pour atteindre ces meilleures pratiques ces principes et ces styles, il faut commencer par petit. Il faut commencer dès le début. Vous devez créer ces différents boutons et expérimenter. Voyez ce qui fonctionne, ce qui ne fonctionne pas, qu'est-ce qui fonctionne ? Assurez-vous de mettre à niveau à partir de là, assurez-vous d'ajouter de nouveaux éléments, assurez-vous d'ajouter de nouveaux styles, nouveaux composants à partir de ces éléments et de voir ce qui fonctionne et ce qui colle, ce qui ne fonctionne pas, lancez-le éloignez-vous et passez simplement à autre chose. Cela m'amène bien aux composants, aux conseils de conception et à la documentation des développeurs pour les blocs de construction interactifs de l'interface utilisateur. Et vous pouvez les voir ici. Il s'agit de boutons, d' images, de formulaires, champs de saisie, d'icônes et bien plus encore. Ces composants sont là pour vous faciliter la tâche. Et je vais vous le montrer dans une leçon ultérieure dans ce cours. Une fois que nous sommes arrivés à Adobe XD, les composants sont là pour accélérer considérablement les choses, car composants peuvent être utilisés dans l'ensemble votre système de conception, tout au long de votre projet. Et ils peuvent être utilisés par différents concepteurs de votre équipe en raison de la fonction d'édition principale d'Adobe XD, différents membres de l'équipe peuvent se trouver sur différents côtés de la planète. Et ils peuvent tous utiliser le même système de conception et utiliser les mêmes composants que ce système de conception particulier. Bien sûr, vous pouvez toujours modifier les composants. Vous pouvez toujours les mettre à jour. Vous pouvez ajouter différents composants, styles et bien plus encore. Mais c'est la clé ici pour créer des composants qui seront réutilisables dans l'ensemble de votre système de conception. Nous allons expliquer cela un peu plus tard, mais pour l'instant, passons à autre chose. Les icônes sont une ressource clé pour chaque bon système de conception. Bien sûr, parce qu'il s'agit de Google, ils ont leurs propres icônes matérielles. Lorsque vous commencez à utiliser votre système de conception, vous allez probablement utiliser d' autres icônes dans votre système de conception. Mais au fur et à mesure que ce système de design évolue, vous trouverez une voix pour une marque. Au fur et à mesure que vous trouverez la direction et les directives de la marque, vous allez également faire évoluer ces icônes. Si vous n'êtes pas expert en création d'icônes, votre client peut peut-être le faire. Embauchez quelqu'un qui l'est, puis vous pouvez utiliser ces icônes dans ce système de conception. Ensuite, nous avons des composants pour le Web. Implémente et personnalise donc applications Web matérielles avec notre code et notre documentation. Bien sûr, il s'agit d'évoluer depuis les appareils mobiles jusqu'au Web. Enfin, nous avons des directives d'accessibilité extrêmement importantes. J'ai appris comment aider les utilisateurs aux capacités diverses à naviguer, comprendre et à utiliser votre interface utilisateur, car tout le monde n' a pas la même vision. Certaines personnes ont une déficience visuelle, par exemple, certaines personnes ont de la difficulté à lire. faut penser à toutes ces personnes parce qu' il y a beaucoup de vos utilisateurs qui vont malheureusement avoir certains de ces problèmes, qui doivent penser à eux tout le temps lorsque vous créent votre système de conception. Enfin, nous avons des tutoriels pour développeurs, implémentez du matériel avec Java, Kotlin, Objective-C, Swift, et partout où le père se trouve, selon le système de conception, selon les développeurs, vous Je vais utiliser telle ou telle technologie. Donc, en gros, il n'y a pas de bonne ou de mauvaise réponse ici, vous devez parler à vos développeurs. Vous devez parler à votre client, une fois de plus, en fonction de ce que votre client va utiliser. Dans ce cas, pour le matériel, c'est majoritairement pour les appareils mobiles, pour Android. Donc, bien sûr, ils vont utiliser différentes technologies alors si vous utilisez, par exemple, , je ne sais pas, PHP, je ne sais pas, ou quelque chose comme ça pour WordPress ou autre. Ces technologies seront donc différentes et selon les technologues qui sont des développeurs qui vont utiliser, vous allez créer votre système de conception à ces fins de développement. Donc, en gros, vous pouvez sauter ici, vous pouvez cliquer sur le design, vous pouvez voir. Ainsi, fondement, aperçu, mise en page de l'environnement , navigation, couleur, typographie , son, iconographie, forme, mouvement. Comme je l'ai dit, et je vais continuer à le dire tout au long de cette classe. Ne vous laissez pas intimider par tous ces différents éléments, car encore une fois, il s'agit de Google. Ils comptaient littéralement des milliards d'utilisateurs sur leurs appareils et dans l'ensemble de leur entreprise. Bien sûr, ils vont utiliser tous ces différents éléments qui n'auront probablement jamais entendu parler, et encore moins les utiliser. Ne soyez donc pas intimidé. Dette trop grande largeur. Ensuite, nous avons des composants. Il s'agit de boutons, de cases à cocher de cartes , de puces, de tables de données, etc. Ensuite, nous avons développé pour Android, pour le web flutter iOS. Nous disposons de ressources et vous pouvez tout lire sur ces ressources. Donc, les outils de personnalisation de type hyper, de mise à l'échelle, de création ou de forme , etc. Ils ont le blog. Alors assurez-vous de le vérifier encore une fois, je crois que les liens vers tout ce que j'ai mentionné dans cette vidéo et plus encore dans le fichier PDF. Cliquez sur ces liens pour y accéder. Ensuite, nous avons un système de conception Atlassian, langage de conception de bout en bout pour créer des expériences simples, intuitives et magnifiques. Une fois de plus, vous remarquerez que nous avons des composants, que nous avons des modèles. Donc marque, ils ont une mission, ils ont de la personnalité, et ils ont promis, ce que j'ai mentionné dans la vidéo précédente. Vous n'allez pas parler aux deux mêmes personnes qui l'utilisent dans leur caleçon sur leur appareil mobile. Et deux PDG de grandes entreprises qui se trouvent, par exemple, dans un bureau coûteux. Donc, le ton n'est tout simplement pas le même. Vous devez donc parler à votre utilisateur dans la langue qu'il comprendra. Ensuite, nous avons des fondations. Donc, la couleur, l'iconographie, la typographie , encore une fois, selon qui est votre utilisateur, vous allez utiliser différentes couleurs, icônes et types différents, contenu, langue et grammaire, vocabulaire, style d'écriture. Une fois de plus, nous discutons avec l'utilisateur. Qui est votre utilisateur ? Vous devez parler à votre utilisateur dans un langage de dette qu'il va comprendre. Vous pouvez explorer cela et nous avons ici le contenu de base de la marque. Cliquons sur le contenu pour voir un langage inclusif, grammaire, un vocabulaire, vous pouvez cliquer ici. Composants. Nous avons notre terme, groupe externe, badge, et tout de suite, vous remarquerez que cela semble très différent celui-ci parce qu'il y a deux choses complètement différentes. conséquent, si je clique sur la bannière, par exemple , ici, vous pouvez voir à quoi ressemble cette bannière. Et tout de suite, nous pouvons voir le code, nous pouvons voir l'erreur, nous pouvons voir l'annonce. À quoi ressemble-t-il ? Comment évolue-t-il, comment se rétrécit-il ou grandit ? Et vous pouvez voir l'utilisation. Comment cela fonctionne-t-il ? Donc, l'anatomie, nous avons l' icône, nous avons le message et nous avons les actions qui sont facultatives dans ce cas. N'hésitez donc pas à parcourir toutes ces catégories pour en savoir plus sur la façon dont elles sont utilisées et comment elles sont intégrées ici. Ensuite, nous avons le système de conception polarisé Shopify sel. Allons d'abord avec les fondations. Des valeurs expérimentées, c'est ce que j'ai mentionné. Leur approche, ce qu'il faut considérer. Ils sont autonomes, fabriqués, efficaces, dignes de confiance et familiers. Ce sont donc toutes les valeurs qu'ils visent avec leur marque, donc leur système de conception. Ensuite, nous avons le contenu. Donc, voix et ton, Shopify est le reflet vocal de qui ils sont. Alors, qui sont-ils simplement mis là l'entreprise construite par de vraies personnes qui comprennent cette activité et se soucient d'aider les autres à réussir. Ce sont donc leurs valeurs. Nous avons le design. Encore une fois, concevez des couleurs, des principes. La communication est essentielle. Les couleurs ont un sens. Les couleurs suivent les directives d'accessibilité afin que vous puissiez voir les rôles de couleurs. Donc, surface essentiellement des éléments qui se trouvent derrière d'autres éléments en surface. Ce sont les éléments tels que les textes, par exemple, primaires, par exemple, pour les éléments, bouton secondaire pour les éléments qui sont, disons des coches ou des icônes ou quelque chose du genre. , interactif. Il y a peut-être une animation. Toutes ces couleurs sont donc là pour une raison. Une fois de plus, je reviendrai à chaque fois sur le point que j'ai déjà fait valoir. Et ne créez pas d' éléments qui ne sont pas nécessaires dans votre système de conception. Vous pouvez donc voir la variance des couleurs et vous pouvez voir ces couleurs implémentées ici. Une fois de plus, je vous encourage à consulter tous ces éléments et à en apprendre davantage à leur sujet. Vous pouvez voir des illustrations. Ils utilisent ces illustrations, mais pourquoi, pourquoi ils utilisent cette illustration particulière dans ce style particulier, utilisant ces couleurs particulières. Vous pouvez donc en savoir plus à ce sujet ici sur cette page. Ensuite, nous avons un système de conception carbone, créé par notre IBM, qui est une grande société. J'adore ce système de conception car vous pouvez cliquer ici et cliquer sur kits de conception et vous pouvez obtenir la version d'esquisse, mais vous pouvez également obtenir la version Adobe XD, qui se trouve quelque part aux alentours ici. Et vous pouvez vous ouvrir dans XD, voilà. Mais il est construit par la communauté du carbone. Ce n'est donc pas exactement le cas car il n'est pas créé pour Adobe XD plutôt que pour l'esquisse au début. Ils sont ensuite passés à Figma, mais ils prennent également en charge Adobe XD et Azure. Ainsi, vous pouvez atteindre les enfants juste là, ouvrir et vous pouvez également faire de même pour Shopify, design system, polaris. Et je suis presque sûr que vous pouvez aussi obtenir Atlassian. Vous pouvez l'ouvrir et vous en apprendre davantage sur son apparence. Mais revenons au carbone, essentiellement, open source ou au système de conception pour les produits et les expériences numériques. Le langage de conception est son système de base composé de code de travail, outils et de ressources de conception, directives d'interface humaine et d'une communauté dynamique de contributeurs. On y va donc. De nombreux concepteurs différents contribuent à ce système de conception. C'est pourquoi vous pouvez télécharger ces fichiers et les explorer gratuitement. Commencez donc à concevoir. Vous pouvez voir tous ces différents éléments, ce qu'ils utilisent, mais je suis plus préoccupé par les directives. Cela, ils commencent par la grille. Grid est au cœur de tous les bons systèmes de conception. Si je viens de lire cette vidéo, comme ça, vous pouvez voir deux grilles X et à quoi cela ressemble-t-il ? Fondamentalement, il s'agit d'une boîte et cette boîte peut s'étendre à d'autres boîtes, qui peuvent être plus grandes ou plus petites. Mais en gros, c'est par incréments de deux. Tout s'accroche bien à ces boîtes. En gros, vous pouvez voir l'espacement ici. Deux cases séparent le texte, les images, la mise en page et tout ce genre de choses. Alors, n'oubliez pas d' explorer tout cela. Et vous pouvez voir comment le rythme vertical, Brooks ici et comment la balance fonctionne ici même dans cette vidéo, je vous encourage vraiment à l'explorer davantage. Vous pouvez voir des icônes, des pictogrammes, mouvements, ce qui est vraiment important. Alors, comment ont-ils utilisé l'animation ? Donc, si je clique ici pour lire cette vidéo, vous pouvez voir comment ils utilisent le mouvement à l'intérieur de leur système de conception, comment fonctionne l'animation, comment fonctionne la transition, comment les choses fonctionnent. Par exemple, la facilité d'accès à l'animation est hors de l'animation et bien plus encore. Alors explorez-le, téléchargez-le et assurez-vous de le vérifier vous-même. Enfin, nous avons Salesforce. Vous pouvez commencer. Vous pouvez voir quelles plateformes sont des courants ou des forêts visuelles éclair, Heroku, Android et iOS. Donc, aperçu, générateur, saisie de données graphiques, affichage des données et beaucoup plus d'accessibilité, c'est ce que nous avons parlé de Blueprints de composants. Donc, vue d'ensemble, disons accordéon, je veux vérifier en conséquence, quoi cela ressemble-t-il ? C'est donc une bonne chose. Je peux cliquer ici et comprendre quelle était l'intention derrière tout cela en conséquence. Ainsi, dans ce cas particulier, vous pouvez voir que cet accordéon est fermé, mais lorsque je clique, toute cette section va se développer. Combien va-t-il s'étendre ? Par exemple, si vous utilisez cela pour une grille de pixels, vous avez mentionnée dans le système de conception carbone d' IBM , elle va s'étendre par incréments de deux. Et vous pouvez utiliser ces règles, ces normes et directives dans tout votre système de conception, quel que soit le type de création. Une fois de plus, vous pouvez cliquer sur l'alerte Par exemple, vous pouvez cliquer sur l'avatar ou les badges. Cliquons sur le panier et voyons à quoi ressemblent leurs cartes. C'est donc la voiture, c'est les nouvelles cartes plus petites, les cartes plus courtes, les cartes plus larges. Vous pouvez donc voir comment tous ces éléments sont implémentés, comment ils sont définis sur la page. Et si je clique ici, pour que nous ayons l'action 123, nous avons l'infobulle de ces différents éléments. Enfin, nous avons ceci qui est des utilitaires, de la marge, de la fonction de dimensionnement du texte, de la liste verticale. Enfin, nous avons conçu des jetons. Les jetons de design sont incroyables. Pensez aux systèmes de conception et nous en parlerons dans l'une des leçons ultérieures, car ils sont vraiment au cœur de chaque bon système de conception. Et ils sont vraiment le pont entre les concepteurs et les développeurs pour apprendre à connaître le système de conception, à l'utiliser au maximum et à continuer à l'utiliser à l'avenir. C'est pourquoi nous utilisons des jetons de conception dans nos systèmes de conception. Et je vais le montrer dans Adobe XD aussi dans la leçon ultérieure. Mais pour l'instant, consultez ces liens, comme je l'ai mentionné, ils seront dans le mélange PDF pour explorer autant que possible et apprendre le plus possible. Parce que vous pouvez voir que le système de conception n'est pas quelque chose que vous allez apprendre dans un jour ou deux. Il faut vraiment des mois et des années pour qu'un bon système de conception se développe. Mais ne laissez pas le matériau que vous créez votre propre système de conception, car les avantages sont énormes au fur mesure que vous construisez et développez, vous allez élargir le vôtre système de conception. Dans la prochaine leçon, nous allons parler d'Adobe XD. Que pouvez-vous créer dans Adobe XD en termes de systèmes de conception et comment faire évoluer votre système de conception dans Adobe XD ? Je vous y verrai. 5. Créer un système de conception dans Adobe Xd: Adobe XD est un outil génial car dans un seul outil, vous pouvez concevoir prototypes et partager avec vos clients, développeurs et parties prenantes. C'est idéal pour créer des systèmes de conception, et c'est ce dont nous allons parler dans cette leçon de la classe, comment créer vos propres systèmes de conception dans Adobe XD. Plus tard, nous parlerons de la mise à échelle de ces systèmes de conception dans Adobe XD. Commençons. Je suis ici dans Adobe XD et j'ouvre le tableau d'art 1280 par 800. s'agit simplement d'un tableau d'art basique que vous trouverez sur l'écran d'accueil ici sur un Adobe XD D D. Comment créer votre système de conception ? Eh bien, il faut commencer petit. Commençons par les grilles. Donc, si je me cache pour que vous puissiez le voir au lieu de lancer cette mise en page, je vais passer au carré n. C' est ce dont nous avons parlé précédemment pour le système des concepteurs d' IBM, ils utilisent cette itération de deux. Ce sera donc de très petits carrés ici, mais je vais m'en servir. Nombre de huit, par exemple, quelque chose comme la dette. Et puis je vais allumer ma calculatrice et je vais l' apporter ici. Nous avons donc 1284, la largeur. Donc 1280 divisé par huit, c'est 160. Cela signifie que lorsque je zoome ici, vous pouvez voir que ces carrés sont huit pixels car c'est la taille carrée. Si un bas à deux, vous pouvez voir qu'ils ont baissé dans le bouton de taille. Je vais les ramener à huit car huit pixels sont en quelque sorte une norme de l'industrie ou une grille 8 si vous le souhaitez. Et c'est ce que nous allons utiliser pour notre système de conception imaginaire ici même dans Adobe XD pour commencer Ce que nous pouvons créer est quelque chose de petit, comme un bouton par exemple. Commençons donc par la topographie d'abord. Je peux donc dire quelque chose comme cliquer ici, peut-être. Utilisons peut-être quelque chose comme Open Sans, car c'est une police Google gratuite et vous pouvez la trouver en ligne. Et je vais le positionner approximativement par ici. Allons avec 24, car 24 est divisible par huit, bien sûr. Ensuite, je vais créer mon bouton. Je vais donc créer un peu d'espacement autour de lui. Je vais cliquer avec le bouton droit de la souris, le renvoyer juste pour que nous puissions voir nos textes. Et maintenant, je peux commencer à jouer et à me positionner sur ma grille. Donc si je tiens ma touche Alt, vous pouvez voir que j'ai 16 ans de ce côté, 16 de ce côté par 78 de ce côté, c'est bien, mais sept, ce n' est pas tellement. Donc, ce que vous pouvez faire ici n' est pas vraiment important car outils de texte Adobe XD ne sont pas vraiment plus anciens développés comme Adobe Illustrator par exemple ou Adobe Photoshop. Mais cela va très bien fonctionner dans ce cas car nous ne faisons que créer notre projet de startup ici. La première chose à prendre en compte, est-ce que c'est votre type trop grand ? Si c'est le cas, vous pouvez augmenter l'espacement à 16 de chaque côté, par exemple, mais vous pouvez toujours voir 1515 ici. Donc si nous commençons comme ça, ça va encore être 15 car la façon dont Adobe XD traite les textes. Alors encore une fois, que pouvez-vous faire si vous travaillez avec la marque, qui nécessite cette langue, ce dont nous avons parlé précédemment, alors vous allez ajuster ce rayon d'angle à quelque chose comme huit par exemple. Et maintenant, nous avons les coins arrondis. Ainsi, 64 est la taille de notre bouton divisible par huit, bien sûr 144 divisible par huit. Nous pouvons donc maintenant procéder. prochaine étape est la sous-section de la convention de dénomination ce bouton est assez gros. Salt par exemple, vous allez le nommer btn. Laissez-moi vous donner une autre chance. Btn dash, BG, bouton, arrière-plan, tiret grand. Et vous devez le faire tout au long de votre système de conception pour tous vos éléments, car de cette votre système de conception pour tous façon, vous allez le savoir et les concepteurs de votre équipe vont savoir, s'agit-il de notre site Web, tablette, de notre montre mobile ou de quelle que soit sa taille. La prochaine étape consiste à les regrouper. La chose à considérer est donc d'où vient ce texte . Dans ce cas, il va vers la gauche. Donc, si je survole ici, on peut voir qu'il est aligné à gauche et qu'il est hors de ça. Il va donc automatiquement redimensionner le bouton et l'agrandir vers la droite. Ou vous pouvez le réparer si vous le souhaitez, vous pouvez cliquer sur les sites fixes et il ne va pas développer le bouton. Selon le but des boutons, disons BTN, grandes variables. Nous pouvons donc utiliser VAR par exemple, quelque chose comme ça, ou simplement l'appeler btn large. Et puis si nous voulons qu'il soit réparé, nous pouvons l'appeler btn grand fixe. Donc encore une fois, gardez une trace de ce fond BTN grand, btn grand. Si vous utilisez fixe, par exemple, ce sera pour l'arrière-plan du bouton, btn BG grand fixe ou BTN BG. Correction plus grande que vous vouliez l'appeler. La convention de dénomination est donc vraiment cruciale, car dès que vous commencerez à ajouter de plus en plus de ces éléments de plus en plus de ces éléments, il sera beaucoup plus compliqué pour vous de suivre ce que vous avez créé ensuite. parce que nous voulons que ce bouton s'agrandisse, je vais activer le rembourrage. La prochaine fois que quelqu'un dit quelque chose comme maintenant, vous pouvez voir que le bouton va se développer. Mais encore une fois, à cause de cet élément progressif que nous avons créé, si je clique ici, vous pouvez voir 16161516, il va se développer, mais vous pouvez toujours le remplacer. Donc, si je clique ici, et si je prolonge cela encore plus ici, si je clique ici et que je l'ai étendu à 20, peut-être que ça va migrer beaucoup mieux. Vous pouvez donc toujours apporter ces modifications pour vous assurer que nous sommes 3664, il est divisible par huit dans notre cas, si vous pensez à des grilles et à la façon de créer des grilles, vous pouvez bien sûr, utilisez ces grilles de huit pixels pour vos grilles solides, exemple 12 colonnes pour cette grande taille, huit colonnes pour la taille de la tablette, quatre colonnes pour la taille du mobile. Et en fonction des tailles que vous choisissez, vous allez choisir le nombre de colonnes et taille de ces colonnes. Bien sûr, nous ne faisons que commencer. Vous pouvez voir à quoi cela ressemble. Et avant de passer à autre chose, je cliquerai ici, sauterai ici dans mes bibliothèques et j'ajouterai couleur car c'est la couleur de mon texte. Dans ce cas, je vais ajouter un style de personnage. Alors, comment peux-tu nommer ça ? Et c'est vraiment important parce que nous arrivons maintenant sur le territoire des jetons de conception. Et je vais expliquer un peu plus les jetons de conception dans la prochaine leçon de cette classe. Mais en gros, je vais appeler ça h quatre par exemple, parce que c'est la taille de ce texte. Ici pour la couleur, je vais le renommer en quelque chose comme, je ne sais pas, gris ordinaire ou autre, tiret régulier et un gris, quelque chose comme ça. Tout le monde de mon équipe sait que, d'accord, c'est H pour ses 24 cents ouverts. Et quand ils survolent, vous pouvez voir des opposés, espacement de 24 caractères, la taille 24 points. Vous allez donc pouvoir le dire tout de suite. Le bouton avec la bordure ou sans bordure est la suivante . Comment allez-vous traiter cela, comment tous ces éléments vont s'accumuler, est-ce qu'ils ont, n' ont pas le tiret ou non. Vous devez donc réfléchir à toutes ces choses, mais assurez-vous de créer plusieurs copies de ce modèle. Voyez ce qui fonctionne, voyez ce qui ne s' arrête pas lorsque vous commencez à ajouter des éléments à ce bouton, assurez-vous de commencer par les composants. Ainsi, Control ou Command K sur votre clavier pour créer un composant. Il s'agit de l'état par défaut. Le premier composant à créer est peut-être l'état d'horreur. Je vais donc appeler ça « planer ». Et la prochaine fois que quelqu' un survole sur ce bouton, il va peut-être changer la couleur. Au lieu de blanc. On peut peut-être le changer en quelque chose comme ça. Cliquez ici, cliquez sur Contrôle Entrée pour prévisualiser ce que nous sommes en train de créer. Et maintenant, lorsque je clique sur ce bouton, vous pouvez voir qu'il a un état de survol. C'est donc à quel point il est facile de créer le début d'un système de conception. Et maintenant, je vais vous montrer ce que j' ai créé ces deux dernières années. Et il m'a fallu six mois pour créer dans Adobe XD. C'est ce qu'on appelle le système de conception Inception. Et c'est là. Il s'agit du fichier maître du système de conception initiale. Il m'a fallu six mois de travail continu pour créer. Et vous pouvez obtenir ce système de conception si vous le souhaitez. Je vais laisser le lien dans le PDF. Voici la page de création design system.co. Et encore une fois, je laisserai le lien dans le PDF. Vous pouvez cliquer ici et accéder à ma chaîne YouTube pour regarder le cours gratuit. Dedans. Je passe en revue tous les éléments. Je pense que c'est une heure ou quelque chose comme ça. Il se trouve sur ma chaîne YouTube et vous pouvez la regarder ici pour en savoir plus sur son fonctionnement et ce qui est inclus. Vous pouvez voir, vous pouvez concevoir plus rapidement. Vous pouvez lire quelques commentaires. Il est conçu pour l'échelle à l'aide d'une grille de huit pixels. Il a une structure moléculaire comme nous l'avons mentionné. Ce sont locaux et Clouds qui peuvent travailler à la fois localement et dans le Cloud avec vos coéquipiers. Il possède des diagrammes de flux, des modèles et des icônes Lottie, qui sont des icônes animées. Il utilise les dernières fonctionnalités telles que états des composants Stacks dans les ressources Document. Permettez-moi donc de revenir à Adobe XD et de vous montrer d' abord ce qui est inclus dans ce système de conception. Nous avons ici quelques informations et directives de base sur le système de conception lui-même, comment l'utiliser et où l'utiliser. Ensuite, nous avons ici les grilles, nous avons trois tailles d'écran différentes. Nous disposons de grands, moyens et petits, ou de bureau, de tablettes et de téléphones portables. Et selon la taille, nous avons différentes couleurs. Numéro de colonne. Pour les grands, nous avons 12 colonnes. Pour le médium, nous avons huit colonnes, et pour la petite, nous avons quatre colonnes. Nous avons ici les guides et vous pouvez facilement copier ces guides et les coller dans votre tableau d'art. Ensuite, nous avons la topographie et vous pouvez voir que j'ai divisé la topographie deux titres et les en-têtes de corps se présentent dans ces différentes tailles et corps dans ces différentes tailles. Ensuite, nous avons les couleurs, les couleurs principales et les couleurs de soutien. Vous allez remarquer que je n'ai pas d'ombre ici. Et c'est dans ce but car lorsque vous obtenez ce système de conception, vous pouvez ajouter vos propres ombres. Ils vont évoluer avec le système de conception lui-même. Ensuite, nous avons le logo que vous pouvez remplacer par le logo de vos clients. Nous avons ces différents logos que vous pouvez utiliser dans vos projets. Nous avons des icônes et tout de suite, vous allez remarquer ces grilles de huit pixels. Donc de taille carrée. Et si je le cache ici, juste pour que vous puissiez voir le système de conception lui-même un peu mieux. Ensuite, nous avons des icônes ici, et ce sont des icônes statiques. Et bien sûr, le système de conception également livré avec des icônes animées, qui fonctionnent nativement à l'intérieur d'Adobe XD, ce qui est fantastique pour le prototypage. Ensuite, si je zoom un peu, ce que nous avons ici, ce sont des atomes et des molécules, et vous pouvez les trouver ici. Si vous ouvrez cela, vous pouvez voir que nous avons des grilles, des icônes, des avatars, des listes déroulantes, images, des modèles, une pagination, une ligne d' enseignement selon la recherche et bien plus encore. Tous ces éléments sont donc des atomes et des molécules. Et si je zoome un peu plus près, vous pouvez voir. Nous avons donc des boutons, entrées de texte, des sélecteurs, des zones de texte, des cases à cocher, date radio, des sélecteurs, des commutateurs de contenu, des onglets, indicateurs de progression, des entrées de nombre, des accordéons, des images qui sont extrêmement important. Nous avons des blobs, des listes déroulantes, nous avons différents appareils, notifications, pagination solide ou est modèle et beaucoup plus dense. Sur le côté gauche, nous avons des diagrammes de flux situés ici. Donc, si je zoome avant, nous avons des diagrammes de flux de bureau, nous avons des diagrammes de flux mobiles, puis nous avons des éléments de flux de tâches. De toute évidence, pour les flux de tâches, nous avons des éléments de diagramme de flux utilisés pour connecter ces différents organigrammes. Et puis ce que nous sommes ici, nous avons ces formats de papier. Nous avons donc ici un portrait au format A4, paysage, un portrait aux lettres américaines et un paysage. Et chacun d'entre eux, si je passe au panneau Calques ici et que je clique à l'intérieur, il comporte différents éléments qui sont utilisés pour vous aider à créer plus rapidement à l'aide de ce système de conception. Donc, si je le sélectionne, vous pouvez voir ce que nous avons ici est une grille de points. Donc, si j'allume cette grille de points, vous pouvez voir à quoi elle ressemble. J'ai donc même un journal ici que je vais vous montrer en ce moment, qui est utilisé récemment pour l'un de mes diffusions en direct, et vous pouvez le trouver sur ma page YouTube. Donc, si je le rapproche, ce papier a été créé à l'intérieur de ce système de conception. Et il a été imprimé puis dessiné à l'aide du stylo ordinaire. Vous pouvez donc voir à quel point cela est polyvalent et utile lorsque vous créez de tels éléments dans votre système de conception. Revenons donc à ce que nous avons aussi les téléphones. Donc, si vous pouvez utiliser ces polices, imprimez-les comme je vous l'ai montré avec ce papier particulier. Et vous allez remarquer qu' ils vont être positionnés ici. Et évidemment, si le papier est un paysage comme celui-ci, il sera positionné différemment et il utilisé pour le câblage papier si vous le souhaitez. Ensuite, nous avons un navigateur pour réactif, nous avons un navigateur de bureau et un navigateur mobile, et cela va de même pour toutes ces tailles. Nous avons ensuite des informations de diagramme de flux. Nous avons le nom du projet client, la date limite, nombre de pages du site Web, le nombre d'écrans d'applications, et vous pouvez bien sûr combiner grille de points et le diagramme de flux pour changer de place, vous pouvez positionnez-les, imprimez-les et créez essentiellement des composants et des diagrammes de flux. Et enfin, ce que nous avons si je passe ici, nous avons les modèles. Nous avons ici des modèles en trois tailles différentes, comme je viens de le mentionner précédemment. Nous avons donc de grandes, moyennes et petites, et elles sont ici. Il s'agit donc de modèles volumineux dans 15 catégories différentes. Ce sont des modèles de petite taille dans ces mêmes catégories, mais juste ajustés en fonction de la taille de la tablette. Et ce sont des modèles, petits, donc c'est un moyen et ceux-ci sont petits pour les tailles de téléphone. Alors, comment tout cela fonctionne-t-il ? En gros, si j'ouvre cela, nous avons des couleurs, donc nous avons des couleurs principales et des couleurs de soutien. Comme je l'ai dit, ce sont les principaux composants. Si je change de couleur, ce bleu océan ici, par exemple, je peux simplement modifier ici et changer la couleur. Il va mettre à jour cette couleur en temps réel partout où cette couleur se trouve dans ce système de conception. Donc, à partir d'ici et de cette nuance jusqu'ici, ici et ici, il va se mettre à jour en temps réel et changer et mettre à jour cette couleur. Si vous décidez d'obtenir ce système de conception et que vous commencez à travailler sur un projet pour votre client. Vous pouvez simplement modifier ces couleurs par les couleurs de vos clients qu'elles vont changer tout au long de ce système de conception. même histoire vaut pour les styles de personnages. Donc, pour les titres, par exemple, si je décide de changer cela, c'est Proxima Nova en ce moment. Mais par exemple, si vous décidez de le transformer en open science, comme je l'ai dit, vous pouvez la mettre à jour en temps réel. Cela va changer tout au long de votre conception. Ensuite, nous avons ce que j'ai dit, atomes et des molécules, des organigrammes et des modèles, et comment pouvez-vous les utiliser ? C'est vraiment très simple. Alors permettez-moi de l'utiliser dans cette grande goutte jusqu'ici. Et je veux vous montrer si je clique ici. Et disons que je veux cacher ces colonnes juste pour que vous puissiez voir ce que je fais. Et disons que je voulais faire glisser et déposer certains éléments à l'intérieur, donc c'est bon pour les atomes et les molécules. Et allumons cette mise en page en fait. Mais allons avec la place juste ici, juste pour que vous puissiez voir ce que je fais réellement. Allons donc avec quelque chose comme le menu déroulant, le menu déroulant. Faites-le glisser et déposez-le à l'intérieur. Et vous pouvez voir à quoi ça ressemble pour que je puisse le positionner où je veux. Et ensuite, ramenons nos colonnes. Cliquez sur notre menu déroulant, positionnez-le ici. Et vous pouvez voir qu'il fonctionne tout de suite car il s'agit d'un composant avec plusieurs états. Examinons l'état de mise au point. Par exemple, passons à la caisse ouverte. Et je peux bien sûr sauter dans la science, m'adapter et changer n'importe lequel de ces états. Donc, au lieu de dire déroulant grand, peut-être pourrait-il indiquer la taille de votre chaussure ou la couleur de votre chaussure ou tout ce que votre projet exige que la beauté de ce système de design, sont des atomes et des molécules dans court. Fondamentalement, vous pouvez les adopter et les utiliser comme vous le souhaitez. Et laissez-moi vous montrer rapidement des modèles. Nous avons donc ici les modèles et utilisons de grands modèles. Ce dont nous avons besoin, c'est de la navigation. Faites glisser et déposez ma navigation par exemple. Je vais l'accrocher à la position. Fermez ça. Utilisons la section héros. Allons ici au numéro quatre par exemple. Placons-le ici et ici. Peut-être faire quelque chose comme ça. Ensuite, ce que nous pouvons faire, c'est utiliser l'appel à l'action peut être utilisé, alors utilisons l'appel à l'action cinq. Accrochez-le, assurez-vous qu'il est en position centrale jusqu'à ce qu'il rencontre notre section héros et que vous ayez l'idée. Vous allez simplement faire glisser et déposer ces éléments à l'intérieur. Vous allez les construire. L'avantage de tous les modèles et de tous les organigrammes, c'est qu'ils sont disponibles dans deux modes différents. État par défaut, c'est-à-dire le mode clair et le mode sombre. Donc, si je clique sur mon commutateur de navigation pour revenir en mode sombre, cliquez ici, passez à sombre , cliquez ici, passez au noir en quelques clics. Et si je cache ma grille juste pour que vous puissiez voir que nous avons cela. Donc, si je le prévisualise très rapidement, vous pouvez voir à quoi il ressemble en ETO en temps réel, il a ces effets d'horreur. Et bien sûr, lorsque vous modifiez et adaptez tous ces composants, par exemple, ce logo et que vous le modifiez en logo de ses clients. Vous pouvez ajouter différentes icônes, ajouter différentes images. Il va s'adapter en temps réel. Et c'est tout l'intérêt d'un système de conception qui consiste à vous épargner des milliers et des milliers d'heures de création de ces tâches ennuyeuses. Parce qu'il n'y a rien au monde que je déteste le plus. Et pour créer des pieds de page, et j'ai mes pieds de page ici. Cliquez ici, faites glisser et déposez le positionnement du pied de page ici, par exemple, accrocher en mode sombre, comme cela. Positionnez-le ici. Appuyez sur l'aperçu une fois de plus. Et ici, j'ai mon pied de page en place. C'est la beauté de ces systèmes de conception, c'est de créer rapidement, créer une échelle de largeur. Et c'est ce que vous pouvez voir avec ce système de conception initiale particulier, que j'ai créé au cours des six derniers mois, c'est que j'ai créé tous ces éléments. Permettez-moi donc de supprimer cela. J'ai créé tous ces éléments, mais je peux facilement les mettre à l'échelle. Je peux ajouter d'autres éléments ici en utilisant des éléments existants, je peux les repositionner, les réorganiser, changer leurs couleurs, modifier leur rayon d'angle. Parce que si un zoom est très proche de l'un de ces boutons, vous pouvez voir que le rayon d'angle est de quatre si un montre ici, mais peut-être que je veux changer le rayon du coin sur ce bouton principal à quelque chose d'un peu plus grand. Permettez-moi de supposer que vous puissiez voir tous les États un peu plus grands que 20. Appuyez sur Entrée. Et vous pouvez voir en temps réel qu'il va changer partout où il se trouve, ce bouton. Où que ce bouton soit utilisé, pas seulement ici, mais aussi dans mes modèles. Il va donc être mis à jour en temps réel. C'est l'élément clé de la conception de systèmes dans Adobe XD. Vous devez les modifier dans les composants par défaut et tous les composants que vous faites glisser et déposez qui vous montrent nos composants enfants. Nous pouvons changer et nous y adapter et utiliser ces changements locaux. Par exemple, dans la section héros que je viens de vous montrer précédemment, vous allez mettre à jour le texte. Vous voulez ajouter votre propre texte, les textes de vos clients, peu importe, puis cela va changer dans la composante de la dette. Mais si vous souhaitez apporter modifications plus globales comme la couleur d'arrière-plan, comme la police et autres, vous allez effectuer ces modifications ici même à l'intérieur des composants principaux, Inception Design System est livré avec deux fichiers, fichier maître et le fichier léger. Fondamentalement, la seule différence réside dans le fichier maître, que je viens de vous montrer, vous pouvez voir tous les éléments ici au même endroit, à l'intérieur du fichier lumineux. Vous ne pouvez pas le faire car je les ai délibérément supprimés de la toile pour garder autant de toile libre que possible afin que vous puissiez concevoir sans instructions, comme les regarder ici. C'est peut-être le plus sage de commencer par le fichier maître pour apprendre tous ces composants. Et bien sûr, j'ai fourni des images de tous ces composants qui peuvent naviguer d'un coup d'œil sur l'aspect du composant, à quoi ressemble le modèle avant de commencer à travailler avec ceux-ci. La dernière chose que je voulais vous montrer à ce sujet, c'est ces organigrammes. Laissez-moi les ouvrir ici. Fermons donc les modèles, ouvrons les organigrammes. Allons avec les organigrammes de bureau. Utilisons l' en-tête, par exemple, faites-le glisser et déposez-le ici. Utilisons du contenu. Je voulais peut-être le positionner ici. Utilisons autre chose comme un curseur. Positionnez-le ici. Ensuite, ce qui est génial avec ces composants, c'est que vous pouvez simplement dupliquer leur positionnement ici. Et comme ce sont les composants, comme je l'ai dit, vous pouvez simplement cliquer sur glisser et il va remplacer ce composant en temps réel. Donc portfolio, glissez-le et déposez-le ici. Je veux peut-être utiliser le formulaire numéro cinq. Mon client dit que je n' aime pas à quoi ressemble la formule d'un fichier. Vous pouvez peut-être essayer autre chose, d' accord, pour le numéro trois, voilà. Vous pouvez voir à quel point c'est super simple de les créer. Lorsque vous souhaitez connecter tous ces éléments, fermons cela. Nous allons donc utiliser les éléments du diagramme de flux. Utilisons, par exemple, des chiffres. Allons donc avec le numéro un. C'est peut-être la première page, par exemple, fermons ça. Utilisons des flèches. Je vais donc utiliser cette flèche, faire glisser et la déposer en place. Peut-être que lorsque les utilisateurs cliquent sur ce bouton ici, ils vont accéder à cette page. Je vais donc simplement étendre cela et sélectionner ma ligne et oser partir. C'est à quel point c' est super simple à utiliser et à créer. Par exemple, si vous laissez tomber ceci, disons flèche par erreur. Je voulais le remplacer. Je voulais le faire avec celui-ci. C'est là que tu y vas. C'est la flèche que je voulais, par exemple, de cette paire, de ce curseur ici, je veux qu'ils aillent dans ce portfolio. Vous pouvez voir à quel point c'est très simple à créer. Voilà donc la beauté de ces systèmes de conception. Il s'agit évidemment d'un extrême, comme je l'ai dit, il m'a fallu plus de six mois pour créer tout cela. Il m'a fallu plus de deux ans de recherche. Et si je vous montre certains de ces modèles, vous pouvez voir à quoi ils ressemblent. Nous avons donc un héros, nous avons un appel à l'action futur. J'ai donc fait mes recherches sur ce qui est le plus utilisé dans l'industrie. Quelles sont les normes de l'industrie et quelles sont les normes les plus utilisées ? Grilles de contenu, prix. Nous avons le blog, nous avons une connexion et nous avons des forums, contactez-nous et bien plus encore. Et tout cela est réactif en tant que court ici. Et tout cela utilise facilement x pour les discours. Donc, si je clique ici et que je saute à l'intérieur de ces images, vous pouvez voir que nous avons la pile, nous avons le rembourrage. Donc, si je choisis de changer la pile, par exemple, je peux cliquer ici, et cela va changer cette direction de cette pile dans cette direction. Et vous remarquerez qu'il va faire baisser ce contenu et qu'il va s' adapter uniformément à ce que je crée sur mon système de conception. Une fois de plus, si vous êtes intéressé, conçu le système est le système de conception d'initiation.console. Il existe un cours YouTube pour cela. Tout est expliqué beaucoup plus en détail et vous pouvez consulter cette page afin que vous puissiez voir les futurs comme je l'ai mentionné, atomes ou molécules, organismes, organigrammes, modèle, mode sombre, animé icônes, cours inclus. Tout est donc à l' intérieur du système de conception initiale. Si vous souhaitez créer votre propre système de conception, assurez-vous de faire attention à deux choses. Assurez-vous que lorsque vous commencez à effectuer une mise à l'échelle avec un objectif précis. Ne vous contentez pas d'évoluer dans un souci de mise à l'échelle et assurez-vous d'utiliser uniquement les éléments nécessaires dans votre système de conception. Pour mon système de conception ici même, j'ai utilisé des éléments de ma recherche que la majorité des designers utilisent. Mais pour votre système de conception, vous n'allez peut-être pas utiliser ces éléments lorsque nous allons utiliser d'autres éléments, quelque chose d'autre. Mais en gros, cela a commencé avec petits éléments comme des boutons comme je vous l'ai montré, puis développez à partir de là, ajoutez des composants, mais assurez-vous d' ajouter uniquement les composants qui sont vraiment nécessaire dans votre système de conception. Dans la vidéo suivante, nous allons parler des jetons de conception, ce qu'ils sont un peu plus élaborés à leur sujet et de la façon de les utiliser dans votre système de conception. Je vous y verrai donc. 6. Conception de tokens: Les jetons de conception sont au cœur de tous les bons systèmes de conception, car ils constituent un excellent outil de collaboration entre concepteurs, développeurs et parties prenantes. Dans cette vidéo, je vais vous montrer comment je le fais et comment certaines grandes entreprises le font, et quelles sont les meilleures pratiques concernant les jetons de conception ? Commençons donc. Nous sommes de retour dans Adobe XD et encore une fois dans mon fichier maître de système de conception initiale, que je vous ai montré dans la vidéo précédente. Et les jetons de design sont situés juste ici sur la gauche. En gros, ce que j'ai mentionné précédemment dans la leçon précédente, ils portent le nom. Ce nom est vraiment utile car lorsque vous collaborez avec d'autres designers, disons que je voulais utiliser cette couleur océan pour, exemple, la couleur de fond de notre modèle ou quelque chose comme ça. Et puis je dois dire à mon collaborateur de conception de mes coéquipiers de conception, disons utiliser cette couleur bleue à l'intérieur de ce fond de modèle. Mais nous avons plusieurs couleurs bleues. Quelle couleur bleue ? Utiliser ? Une MTD F9. Encore une fois, ce sera vraiment difficile pour les gens, surtout si vous travaillez avec eux très éloignés. Si vous travaillez de chez vous avec vos coéquipiers, il sera difficile pour eux de mettre en œuvre ce changement. Et il va être difficile pour tous les membres de l' équipe de se souvenir de ce code hexadécimal, par exemple. C'est pourquoi nous utilisons des noms. Dans ce cas, je peux simplement leur dire, utilisez le bleu océan pour le fond du modèle. Et tout le monde est sur la même longueur d'onde. Ocean est beaucoup plus facile à retenir que, par exemple, hashtag 1, BH EF, EF neuf ou autre. Les développeurs peuvent donc utiliser la même fonction et je vais le montrer en une seconde dans un grand système de conception. Mais en gros, c'est tout le point du design. Les jetons les utilisent judicieusement et les utilisent à mesure que votre système de conception évolue. Bien sûr, vous pouvez les utiliser pour du texte. Dans ce cas, je n'ai que titre et le corps, mais par exemple, vous pouvez utiliser la taille des caractères spécifiques pour des éléments spécifiques. Par exemple, si le personnage est juste en dessous, par exemple, des animations ou des illustrations encore mieux, vous pouvez les utiliser conjointement avec ces illustrations. Par exemple, l' illustration en titre, grande illustration en titre est petite ou autre. Et quand vous avez dit à vos développeurs, assurez-vous de changer l'outil d'illustration grand titre, disons 64 points. Tous les membres de l'équipe seront en mesure de comprendre cela beaucoup mieux que sinon ce que j'ai mentionné précédemment au sujet des composants et des différents noms de composants. Donc, si nous zoomons ici sur mes boutons, par exemple, basculer le panneau des calques, cliquez ici. Vous pouvez voir que nous avons le bouton par défaut grand, car ce sont de grands boutons, puis nous avons le bouton par défaut, moyen, bouton par défaut petit. Ce sont donc des boutons par défaut, mais si je passe à autre chose, par exemple, ici, nous avons un sélecteur. Sélecteurs, valeur en ligne, grands sélecteurs en valeur de ligne, sélecteurs moyens valeurs en ligne, disons petits ou autres. Vous devez donc prêter attention à tous ces détails. Et nous avons des images. Nous avons photographié de grandes dimensions et combien de colonnes votre image se place-t-elle dans cette cage ? L'image ? Grand, deux colonnes, grande image, neuf colonnes grande, 10124 avec support plein écran, la même histoire, petite la même histoire. Ensuite, nous avons des appareils, par exemple, un tableau de bord, un navigateur ou autre. Vous devez donc utiliser ces jetons de conception pour expliquer ce que vous créez dans votre système de conception et ce que chaque jeton de conception est conçu en premier lieu. Je vais donc maintenant vous montrer ceci, qui est un jeton de conception Salesforce Lightning Design System vous a déjà montré que dans la leçon précédente où nous avons parlé de tous ces systèmes de conception impressionnants, la façon dont ils l'utilisent est fondamentalement la même. Nous avons donc une variante sombre accessible la marque qui est accessible avec du blanc. Ils utilisent donc des combinaisons et ils utilisent ces supports. Vous pouvez ainsi voir un accès global disponible sur la plateforme. Ou si ce n'est pas le cas, je peux survoler ici en interne, donc disponible pour les développeurs Salesforce internes uniquement sujets à changement. Ils ont donc mis en place toutes ces règles lors de sa sortie, numéro de version 1234 et ainsi de suite, T-Mobile, si difficile à utiliser avec une équipe. L'utilisez-vous avec une application ? L'utilisez-vous pour le front-end ou le back-end ? Si vous l'utilisez pour ce que les visiteurs voient pour un tableau de bord interne ou pour le tableau de bord des visiteurs, vous devez étiqueter tous ces éléments. Et ici, vous pouvez voir une autre chose. Ils utilisent donc la valeur RVB en premier et la valeur hexadécimale, la majorité des marques utilisent l'inverse, donc elles utilisent d' abord la valeur hexadécimale, la valeur RVB ensuite. Vous devez donc prendre en compte tous ces éléments concernant votre propre système de conception. C'est pourquoi j'ai créé cette structure simple dans système de conception Inception car la majorité des gens sont capables de la comprendre. Nous nous sommes concentrés, donc c'est juste pour défocaliser, mais si je crée une variation sur la mise au point, par exemple, différentes nuances de focus, peut-être que je vais dire quelque chose comme la mise au point 80 % ou le bouton de mise au point ou concentrez-vous. Je ne sais pas, section héros ou autre. Vous allez le dire à l'intérieur du jeton de conception lui-même. Tous les membres de l'équipe vont donc pouvoir le comprendre. Et si je vous montre ici encore une fois, si nous faisons défiler un peu plus vers le bas, vous pouvez voir combien de couleurs différentes elles ont unies choisissent une au hasard. Par exemple, celui-ci, palette nuage bleu, 15. Ils ont donc 15 variantes différentes de cette palette. Couleur bleu nuage. Non, ce n'est pas T-Mobile et ici, ils l'utilisent en interne. Il s'agit de la version 2.14 et vous pouvez voir le bleu nuage en bouche, alors comment ils l'utilisent et comment ils fonctionnent. Donc, comme je ne cesse de le mentionner, tout dépend de votre projet, de vos besoins, vous n'aurez pas toutes ces couleurs différentes si vos clients, un projet n'en a pas besoin. Alors pourquoi prendre la peine de créer et de passer autant de temps à créer toutes ces couleurs, nuances, variations et bien plus encore quand vous pouvez vous en sortir avec quelque chose comme ça. Par exemple, quelques couleurs ici et là, et c'est la chose cruciale et Keating, lorsque le projet dépense, vous pouvez toujours ajouter plus de couleurs. Par exemple, permettez-moi de vous le montrer également. Cliquons sur ce bouton. Passons à ça, je ne sais rien, quoi que ce soit ici. Et si nous voulons ajouter cette couleur, je peux simplement cliquer ici. Et je peux dire quelque chose comme renommer, peut-être appeler ça blob violet, quelque chose comme ça. Est-ce ma couleur principale sur ma voiture secondaire ? Je vais appeler ça les couleurs principales. Alors mettez-le ici, blob violet. Et quand je sélectionne mon blob, prochaine fois que je cliquerai sur Blob. Purple va s' appliquer en même temps. Par exemple, si nous avons ces blobs dans la section héros de votre site Web, par exemple, ou dans votre application, vous pouvez indiquer votre conception. Coéquipiers, changez le blob numéro cinq en couleur violet blob. Cliquez sur, cliquez sur Terminé. C'est pourquoi les jetons de conception sont géniaux. C'est pourquoi ils sont utiles, car vous pouvez les utiliser pour créer tous ces éléments dans vos systèmes de conception beaucoup plus rapidement. Et tous les membres de votre équipe peuvent être sur la même longueur d'onde et comprendre ce que vous créez beaucoup plus rapidement que si vous n' utilisez pas ces jetons de conception. Dans la prochaine leçon, nous allons parler de la mise à l'échelle de votre système de conception. Quand devriez-vous le faire et comment devriez-vous le faire ? Je vous y verrai. 7. Améliorez votre système de conception: Lorsque vous mettez à l'échelle votre système de conception, vous devez toujours le faire mieux et vous devez toujours le faire étape par étape. Pourquoi le mettez-vous à l'échelle ? Où allez-vous le mettre à l'échelle ? Quatre ? Quelles pages pour quelles tailles, pour quels appareils vous devez penser à toutes ces choses au fur et à mesure que vous évoluez. Jetons un coup d'œil à Adobe XD et je vais vous montrer et vous donner quelques conseils sur le moment et la façon mettre à l'échelle vos systèmes de conception. Nous voici une fois de plus dans Adobe XD à l'intérieur de mon fichier maître de système de conception initiale. Si vous souhaitez consulter ce système de conception, assurez-vous de cliquer sur le lien dans le PDF et il est là, vous pouvez le vérifier si vous êtes intéressé. Pour ce cas, supposons que vous venez de créer ces boutons et que vous avez choisi ces trois tailles, grandes, moyennes et petites. Et à partir de là, vous voudrez peut-être ajouter une taille extra grande. Que devriez-vous faire ? Vous devez d'abord consulter vos développeurs, devrais-je créer différents boutons pour cette très grande taille, ou pouvez-vous les redimensionner et les repositionner ? Encoder, par exemple, la taille extra grande du bouton lui-même n' est peut-être pas vraiment nécessaire. Peut-être que l'espacement devrait être ajusté et qu'il s'adapte à une taille plus grande. C'est pourquoi la communication entre concepteurs et développeurs est essentielle. Vous n'investissez donc pas votre temps dans ces changements qui ne sont pas vraiment nécessaires et obligatoires. Donc, s'ils ne sont pas obligatoires et nécessaires, vous allez vous retrouver avec un aspect propre comme ça. Mais si c'est le cas, vous aurez peut-être 20 tailles de boutons différentes. Et plus tard, en bas de la ligne, vous allez décider que, par exemple, taille numéro sept n'est pas vraiment nécessaire. Quelles tailles utiliser. C'est assez simple. Vous devez parler à votre client et vous devez parler à l'entreprise pour laquelle vous travaillez. Quelles sont les tailles utilisées par vos utilisateurs ? S'ils utilisent, par exemple, une seule taille de la majorité, cela permet de concentrer toute votre attention sur cette taille unique. Et ensuite, lorsque vous mettez plus d'utilisateurs en bas de la ligne, par exemple, ces utilisateurs arrivent, la plupart d'entre eux arrivent, je ne sais pas, aux tailles de bureau. La majorité d'entre eux utilisent des ordinateurs portables et tout à coup, un grand afflux de nouveaux utilisateurs utilisent l'iPhone. Comment adopter cette taille de bureau aux tailles d'iPhone. Vous devez donc parler à vos clients, vos développeurs, vous devez faire vos recherches tout le temps. Et lorsque vous effectuez une mise à l'échelle, il n'est pas vraiment logique de passer à tablette si vos utilisateurs n'utilisent pas la taille de la tablette. Pensez donc à toutes ces choses, mais réfléchissez à ces choses au fur et à mesure que vous créez votre système de conception, car il n'y a pas de point d'échelle. Par souci d'échelle, il y a tout un point derrière cela, c'est d'évoluer avec un but précis. Il s'agit soit d'attirer nouveaux utilisateurs, soit d' accueillir de nouveaux utilisateurs, répondre aux besoins et aux désirs des nouveaux utilisateurs. C'est pourquoi vous devez évoluer avec cela à l'esprit. De plus, comme je le mentionne sans cesse tout au long de cette classe, ne créez pas d'éléments qui ne sont pas nécessaires. Par exemple, si vous ne prenez pas en charge les avatars, car vous n'avez peut-être pas de profils dans votre projet, dans votre produit, dans votre tableau de bord ou autre. Peut-être n' avez-vous pas la possibilité pour eux de se connecter à créer leur compte, alors pourquoi créeriez-vous des avatars ? Cela n'a pas vraiment de sens. Ne les créez pas simplement pour être ici, car ils sont nécessaires à votre projet. Et n'ayez pas trop peur. Si, par exemple, vous venez de créer une infobulle et que vous n'avez pas créé 50 infobulles différentes. Ils ne le sont peut-être pas forcément. Et Tooltip, comme son nom l'indique, c'est vraiment aussi simple que ça parce que c'est juste un peu d'information. Ne faites donc pas trop attention à toutes ces petites choses. Assurez-vous d'obtenir les grandes choses telles que la mise en page, comme les grilles, grille d'espacement et le rythme horizontal et vertical, toutes ces choses avant de vous inquiéter des infobulles. Et une dernière chose que je veux vous dire au sujet l'échelle de votre système de conception est d'utiliser ces modèles. Donc, si nous zoomons ici et que nous vous montrons ici, c'est les équipes d' appel aux actions Futures. Peut-être que nous avons des grilles de contenu, peut-être que nous avons un portefeuille, nous avons des prix. Par exemple, vous créez un tableau de bord. À l'intérieur de ce tableau de bord, vous aurez une seule page qui n'est qu'une vue d'ensemble, par exemple. Dans cette vue d'ensemble, vous allez leur donner la possibilité de voir Madonna, disons des dépenses mensuelles ou quelque chose du genre. N'entrez pas trop de détails sur adoption de nouveaux composants pour travailler avec cela, peut-être que vous pouvez utiliser des composants existants et ensuite permettre aux développeurs d'intégrer la solution qui n'est pas native. S'il est natif, contrairement aux graphiques, par exemple, vous devez créer un plan pour un graphique unique et ne pas soucier de créer plusieurs graphiques, effectuant plusieurs choses uniquement pour le si l'on veut avoir tous ces graphiques, on s'assure de se concentrer sur ce qui est nécessaire à ce projet. Ensuite, lorsque de nouvelles fonctionnalités sont ajoutées ultérieurement, assurez-vous d'évoluer avec ces nouvelles fonctionnalités et votre système de conception. Ne vous embêtez pas à créer les éléments qui ne sont pas nécessaires ou qui ne sont pas nécessairement nécessaires, car cela va simplement encombrer votre système de conception et cela va en fait ralentir vos progrès sur ce projet particulier et vos développeurs progressent. Parce que rappelez-vous, quelle que soit la conception d'un concepteur à l'intérieur de votre système de conception, les développeurs doivent développer, donc n'utilisez pas leur temps précieux si ces éléments ne se trouvent pas nécessairement dans le moment. Et vous pouvez créer un arriéré. Par exemple, ces éléments, disons, sont nécessaires pour le moment. Ces éléments sont nécessaires dans trois mois, ces éléments sont nécessaires en six mois. Vous pouvez donc créer des arriérés d'éléments. Et à mesure que le projet progresse, au fur et à mesure que vous avancez, vous pourrez aborder ces éléments un peu plus tard car ils ne sont pas nécessaires pour le moment. Une fois de plus, et enfin, l'échelle, car elle doit être mise à l'échelle, ne vous contentez pas d'évoluer dans l'intérêt de la mise à l'échelle. 8. Votre projet de cours: Votre projet de classe pour ce cours consiste à créer votre propre système de conception et à télécharger une image de celui-ci dans vos projets de classe. Maintenant, n'investissez pas trop de temps dans ce système de conception. Il suffit de créer quelques éléments ici et là et d' essayer de les organiser et de les considérer comme un système de conception. Vous pouvez en créer une capture d'écran ou exporter l'ensemble du plan de travail comme une précédente, vous montrer dans l'une des vidéos précédentes et simplement l'attacher à vos projets de classe. J'aimerais vraiment voir ce que vous avez créé. Donc, si je reviens à mon système de conception de création doit avoir un fichier. Vous pouvez peut-être créer quelque chose comme ça. Par exemple, vous pouvez créer trois boutons différents dans trois variantes différentes. Vous pouvez également créer une entrée de texte, par exemple, vous pouvez peut-être afficher différentes variations de cette entrée de texte ou un sélecteur ouvert et fermé en trois tailles différentes. Alors n'investissez pas trop de temps dans ce projet, mais j'adorerai quand même voir ce que vous pouvez trouver. J'ai donc hâte de voir vos créations dans vos projets de classe. 9. Conclu: On y va donc. Nous sommes arrivés à la fin de ce cours. Merci beaucoup de l'avoir regardé. J'espère vraiment que vous en avez tiré une certaine valeur et j'espère vraiment que vous comprenez le fonctionnement des systèmes de conception. Ne vous laissez pas intimider par ces grandes entreprises lorsque vous êtes à la recherche d'inspiration sur les systèmes de conception, veillez à démarrer en petite taille et à vous assurer d'évoluer au fil du temps. Même si vous créez un système de conception pour travailler en tant que freelance, par exemple sur sites Web ou des projets mobiles. Assurez-vous de créer uniquement les éléments nécessaires. Faites vos propres recherches, qui sont les éléments que vous utilisez tout le temps, qui sont ceux que vous n'utilisez jamais. Peut-être pourriez-vous créer un arriéré comme je l'ai expliqué dans la leçon précédente, puis attaquer à cet arriéré d' éléments au fur et à mesure que vous progressez et que vous construisez votre système de conception, vous disposez de tous les ressources, que j'ai mentionnées. Donc, tous ces systèmes de conception sont source d' inspiration et beaucoup plus d' informations à l'intérieur du PDF. Et vous avez également le lien avec le système de conception Inception. Si vous êtes intéressé, vous pouvez le consulter et adapter à vos besoins et à votre projet. Merci beaucoup d'avoir regardé ce cours. Merci beaucoup de vous y être inscrit et, jusqu'à la prochaine fois, prenez soin de vous.