Création de kit d'interface utilisateur dans Adobe Xd

1. Introduction du cours: Les kits UI sont vraiment utiles si vous travaillez sur un petit ou de gros projets parce qu'ils vont vous faire gagner un tas de temps avec ces tâches répétitives. Ils vont vous aider à le livrer à vos clients et développeurs beaucoup plus rapidement. Et ils vont te laisser plus de temps libre pour toi-même. Les enfants entrent, je m'appelle Alex, je suis le créateur d'un produit et jusqu'à présent j'ai créé quatre ou 500 produits de design ainsi que notre créateur de cours. Et jusqu'à présent, j'ai créé plus de 20 cours. Dans cette classe Skillshare, nous allons parler des kits d'interface utilisateur et de leur utilité. Nous allons couvrir ce que nos kits d'interface utilisateur et ce pour quoi ils peuvent être utilisés. Quels sont les trois principaux types de kit d'interface utilisateur et pourquoi chacun d'eux est bon pour. Quelle est la différence entre les kits d'interface utilisateur et les systèmes de conception ? Comment choisir des composants importants pour vos propres kits d'interface utilisateur, comment structurer, créer et enregistrer votre kit d'interface utilisateur dans Adobe XD. Et enfin, quelle est la différence entre les kits d'interface utilisateur gratuits et premium et comment vous pouvez vendre les vôtres si vous le souhaitez, et bien plus encore. Votre projet de classe pour cette classe est de créer votre propre kit d'interface utilisateur. Vous pouvez utiliser Adobe XD ou tout autre logiciel pour une question, vous pouvez simplement choisir quelques éléments, les enregistrer comme un JPEG et les télécharger dans vos projets de classe. Et je suis vraiment excité de voir ce que vous pouvez trouver et quels sont les conceptions que vous pouvez créer pour ce projet de classe. J' ai donc hâte de vous voir en classe pour vous montrer comment vous êtes des enfants peuvent être utilisés pour améliorer votre productivité, quel que soit le type de projets d'interface utilisateur sur lesquels vous travaillez. Alors je te vois en classe. 2. Qu'est-ce que les kits d'UI et en raison de leur utilité: Les kits UI sont essentiellement une collection de différents éléments que vous pouvez utiliser pour vos projets de conception d'interface utilisateur. Ces projets peuvent varier des projets de conception mobile aux projets de conception de sites Web en passant par des projets de conception de produits tels que des tableaux de bord et des applications Web et des projets de cette nature. Ils peuvent venir dans différents types de fichiers. Par exemple, Photoshop, Sketch, Illustrator, Figma, Adobe XD. Et dans ce cours, nous allons nous concentrer sur Adobe XD. Ils peuvent également être des images de largeur et sans images. Et nous allons explorer quelques différences entre ces deux types. Pourquoi l'un est meilleur que l'autre et l'inverse ? Et surtout, vous allez utiliser ces kits d'interface utilisateur pour accélérer votre flux de travail, car vous allez effectuer ces tâches répétitives, en particulier dans la conception de l'interface utilisateur. Par exemple, vous allez créer des navigations pour tous vos projets. Donc, au lieu de recréer cette navigation en soi pour chaque projet particulier, vous allez juste créer un type de navigation et ensuite simplement étendre votre idée à partir de ce type de navigation, que je vais également vous montrer plus tard dans cette classe. Donc, fondamentalement vont accélérer votre flux prochaine fois que vous démarrez un projet de conception, parce que vous allez avoir tous ces différents types de fichiers enregistrés dans votre ordinateur. Et puis fondamentalement vont être en mesure d'utiliser et de réutiliser tous ces différents éléments pour tous vos différents projets. Maintenant, parce que nous allons travailler dans Adobe XD, nous allons travailler avec des composants et vous allez pouvoir réutiliser ces composants pour changer les couleurs, changer les types de fichiers, changer la structure, pour changer l'ombre d'arrière-plan, par exemple, pour changer les couleurs et bien plus encore. Avec vos enfants, vous allez pouvoir vous adapter à différents projets. Donc, une fois de plus, par exemple, si vous créez dans Adobe XD en soi, vous pouvez créer des composants pour, par exemple, conception de site Web en plein écran, disons 1920 par 1080, alors vous pouvez descendre et créer redimensionne les tailles de vos projets de design responsive. La même chose vaut pour les conceptions mobiles. Par exemple, vous créez votre kit d'interface utilisateur pour les applications iOS. Ensuite, vous voulez créer ce même kit d'interface utilisateur pour travailler sur Android. Cela va être beaucoup plus simple lorsque vous avez réellement les types de fichiers et les fichiers déjà préparés, puis de le faire à partir de zéro. Et cela vous permettra de facturer plus cher pour vos projets car vous serez en mesure de livrer plus rapidement. Parce que vous venez préparé avec ces enfants et que vous préparez tous ces éléments pour vos projets futurs. Donc, dans la prochaine vidéo, nous allons explorer ces différences entre les kits d'interface utilisateur avec des images et sans images. Quels sont les avantages et les inconvénients de chacun d'entre eux ? Et je te verrai dans la prochaine vidéo. 3. Types de kits d'interface utilisateur: Dans cette vidéo, nous allons explorer les principales différences de kits d'interface utilisateur avec des images et sans images. Quels sont les principaux inconvénients et points de vente pour chacun d'eux ? Alors commençons. Donc ici, j'ai ouvert UI 8, qui est un site Web où vous pouvez réellement acheter ces kits d'interface utilisateur. Et nous allons appeler un doc sur ces sites un peu plus tard dans cette vidéo particulière, je veux juste me concentrer sur les différences entre les kits d'interface utilisateur avec des images et sans images. À quoi peut-on utiliser chacun de ces éléments ? N, ce que vous pouvez apprendre sur la création de ces kits d'interface utilisateur pour vos différents types de projets. Donc, ce que nous avons ici est cet UIKit quantique, qui est, comme on dit, une énorme bibliothèque de vos cartes pour les services Web. Et ce qu'ils ont réellement créé ici, comme vous pouvez le voir, sont tous ces différents composants, qui sont essentiellement un site Web à la recherche de modèles que vous pouvez utiliser et réutiliser pour vos futurs projets. Alors pourquoi cela est utile pour, si je clique avec le bouton droit de la souris et ouvre dans le nouvel onglet et zoom avant afin que vous puissiez voir un peu de ces détails. Vous pouvez voir que ici, nous avons, par exemple, ce Sony Dual amortisseur pour contrôleur noir. Nous avons le prix, nous avons cette icône. Donc, fondamentalement, ce que vous pouvez faire avec cette conception est que vous pouvez tout simplement travailler avec cette conception exacte. Il suffit de créer un composant, par exemple, pour ce contrôleur dual show. Et disons que vous voulez remplacer cela à l'intérieur du composant, par exemple, pour ajouter un produit différent. Disons peut-être que vous voulez vendre l'iPhone, alors vous pouvez créer un composant de dette de cette carte particulière. Vous pouvez simplement glisser-déposer votre image iPhone. Vous pouvez glisser-déposer les informations de cet iPhone que vous avez à vendre. Et Dario, vous n'avez pas à créer la carte une fois de plus, vous n'avez pas besoin d'ajouter l'ombre portée. Vous n'avez pas à choisir la police spécifique. Vous n'avez pas à choisir la mise en page typographique, vous n'avez pas à choisir la hiérarchie. Tout cela est fait pour vous dans le projet précédent par vous-même. Et maintenant, vous pouvez simplement utiliser et réutiliser ce même composant dans vos futurs projets. Je vais vous expliquer cela un peu plus tard dans la leçon spécifiquement sur Adobe XD, comment vous pouvez mettre à l'échelle ces composants, comment il peut les modifier, les utiliser et les réutiliser, etc. Mais dans cet exemple, comme je l'ai dit, nous voulons nous concentrer sur les kits d'interface utilisateur avec des images et sans images et ce que vous pouvez utiliser chacun de ces quatre. Donc, en revenant à cet exemple, vous pouvez voir combien d'entre eux ils ont. Ils ont cette voiture de vente, par exemple, ils ont cette charge plus de composants. Donc, fondamentalement, tous ces composants sont extrêmement cruciaux à créer dans un kit d'interface utilisateur parce que vous allez les utiliser et les réutiliser pour chaque projet. Donc, dans les négations, les pieds de page, les cartes de blog, ce sont des éléments pointus et ainsi de suite. Donc, tout cela va être vraiment utile à avoir pour vos futurs projets. Si nous vérifions celui-ci qui est appelé plate-forme notre kit filaire. Quelle est la différence entre celui-ci et celui-ci ? Fondamentalement, les enfants sont ces kits d'interface utilisateur sans aucune image et vous pouvez les trouver en ligne où que vous recherchiez. Et je vous recommande vraiment de créer ces types filaires ou kits d'interface utilisateur. Pourquoi ? Parce que vous pouvez toujours glisser-déposer des images dans les endroits de ces kits filaires et que vous n'avez pas à vous connecter avec ces types de fichiers énormes parce que évidemment quels sont les logiciels que vous utilisez si vous n'avez pas d'images incluses dans vos conceptions, vos types de fichiers vont être beaucoup plus petits. Il va être beaucoup plus facile de travailler avec ces fichiers. Ensuite, si vous les avez avec des images, cela va aussi être beaucoup plus simple. Pour montrer ces enfants filaires à vos clients et simplement leur dire, imaginez simplement inclure des images à l'intérieur de l'espace réservé de l'image, par exemple, vous pouvez changer la couleur. Donc, disons que vous pouvez parler à votre client, il peut communiquer cette idée. Par exemple, cette image va être bleue, comme dans ce cas ici, pour qu'ils puissent savoir, ok, donc ce fond va être une image. Il va donc être beaucoup plus simple pour eux de comprendre et de visualiser dans leur tête que l'image va aller là-bas. Ce qu'il y a dedans pour vous est, va être beaucoup plus simple à changer et à apporter des modifications à ces kits filaires puis aux kits d'interface utilisateur parce que vous obtenez avec les images vont être beaucoup plus difficile à changer parce que vous allez toujours suivre une sorte de structure d'image. Vous allez toujours impliquer une sorte d'image, vous n'allez peut-être pas goûter vos couleurs à partir de vos images. Donc, il est bon d'être beaucoup plus simple d'utiliser couleurs dans l'utilisation de tous ces éléments des enfants filaires parce que vous n'avez pas d'images en place plus tard lorsque vous déterminez la structure avec votre client pendant votre travail sur ce vous pouvez simplement faire glisser et déposer des images à l'intérieur, puis ajuster simplement un peu le design. Par exemple, inclure l'ombre portée ici et là, juste pour faire le bouton, par exemple, se démarquer ou la navigation ou l'image de héros ou le texte. Peut-être que vous devriez changer la couleur du texte de l'obscurité à la lumière et l'inverse en fonction de l'image de votre choix. Donc, les enfants filaires sont beaucoup plus utiles, à mon avis. Et puis les kits d'interface utilisateur parce que vous êtes des enfants, comme je l'ai dit, suivent la structure des images et donc s'adaptent à cette structure et à ces images, tandis que les enfants filaires utilisent simplement la structure elle-même et ne s'adaptent à rien. Vous pouvez simplement faire glisser et déposer des images à l'intérieur plus tard. Enfin, il y a une autre chose que je voulais mentionner, et ce sont des organigrammes. Et fondamentalement pour les organigrammes viennent dans différents types de tailles de fichiers, différents types d'éléments. Et c'est quelque chose appelé schéma de flux mobile. Et je peux vous montrer un de mes produits organigrammes un peu plus tard parce que je le dois, et je vais vous montrer comment je les ai créés et comment vous pouvez les utiliser pour communiquer des idées avec vos clients en revenant à celui-ci, parce que vous ne peut pas le voir. Ici. Je l'ouvre dans un nouvel onglet, et ici vous pouvez voir qu'ils n'utilisent pas de vrais textes, ils n'utilisent pas de vraies images. Ils utilisent juste ces espaces réservés. Par exemple, cela va être paragraphe, va être sous-titre titre. C' est l'image, c'est le bouton, c'est la pagination, c'est que vous pouvez voir qu'ils utilisent des icônes pour la navigation et pour la recherche. Utilisation de ces icônes sociales pour Facebook et Twitter. Et ce que cela va vous permettre de faire, c'est que vous êtes capable de communiquer vos idées et beaucoup plus rapidement avec votre client. Parce qu'une fois de plus, comme avec les kits filaires et les nouveaux enfants IA, vous ne perdez pas votre temps en choisissant ces images, en choisissant ces couleurs. Vous créez simplement des mises en page que vous pouvez communiquer et partager avec votre client. Une fois ces mises en page approuvées, vous pouvez travailler sur les détails. C' est pourquoi ces kits filaires, kits d'interface utilisateur et ces organigrammes sont si cruciaux pour vous de les créer. Vous pouvez donc imaginer que vous pouvez commencer à travailler sur un organigramme, par exemple, pour votre client. Ensuite, une fois ce projet terminé, vous pouvez simplement réutiliser cet organigramme en termes de création UIKit pour votre prochain projet, vous pouvez simplement créer des composants pour les formes, les couleurs, les polices, les images, les boutons, et ainsi de suite. Et vous pouvez simplement utiliser et réutiliser ces composants dans vos futurs projets, ce qui à son tour va vous faire gagner beaucoup de temps et il va vous aider à avancer avec vos projets plus rapidement va vous permettre de charger beaucoup plus parce que vous allez passer beaucoup moins de temps dans chaque projet parce que vous avez déjà créé tous ces composants. 4. Quels composants sont importants: En ce qui concerne la structure, ces composants sont vraiment importants et moins importants. Donc, c'est vraiment à vous de décider quels types de composants vous voulez utiliser. Donc, disons que vous travaillez sur des projets de blog tout le temps. Il suffit de jeter un oeil à vos travaux précédents et comprendre quels types de composants vous avez utilisés dans le passé. Évidemment, une sorte de barre de recherche, une sorte de pied de page de navigation, peut-être même des curseurs, des images de héros, des portes sont vraiment obligatoires parce que ce sont des types d'éléments que vous allez utiliser tout le temps dans vos projets. Mais selon le créneau, vous êtes indépendant des projets pour lesquels vous travaillerez précédemment et sur lesquels vous êtes celui qui va déterminer les types de ces éléments que vous allez utiliser dans vos kits d'interface utilisateur. Donc je vais vous montrer avec les exemples précédents que je vous ai montrés. Et vous pouvez déterminer en regardant les types d'éléments que vous pouvez choisir. Et dans les prochaines vidéos de cette classe, je vais vous montrer quels sont certains types d'éléments qui sont utilisés dans le passé et ce que vous pouvez apprendre de cela. Donc, en revenant à ces exemples que j'ai montrés précédemment, vous pouvez voir qu'ils ont le commerce électronique ici. Et si je fais défiler tout le chemin ici, pour que nous puissions voir le commerce électronique. Et si je fais défiler tout le chemin vers le bas, vous pouvez voir Tableau de bord. Donc, si vous travaillez sur des projets qui nécessitent tous ces éléments, vous pouvez juste imaginer à quel point l'objectif de ceux-ci sont fastidieux. Ainsi, vous pouvez les créer une fois et ensuite simplement les réutiliser en changeant de couleur, en changeant par exemple, la position de ces différents textes et ainsi de suite. Si on fait défiler tout le chemin vers le bas, on a des cartes d'entreprise. Ainsi, il peut s'agir, par exemple, portefeuille d' équipe À propos de nous, témoignages, de fonctionnalités, de prix, et d'autres choses comme ça. Si on fait défiler tout le chemin vers le bas, on peut voir de la musique et des cartes vidéo. Ils ne sont donc peut-être pas aussi importants que les précédents, et ils peuvent varier d'un projet à l'autre. Nouvelles et cartes de magazines. Encore une fois, si vous travaillez sur des projets de blog tout le temps, ceux-ci sont vraiment cruciaux. Donc, une fois que vous en créez un, il sera beaucoup plus simple de les réutiliser et de les réutiliser pour des projets futurs. Et vous pouvez voir ici, donc nous avons différents types de navigation. Nous avons ces cartes sociales qui, une fois de plus, en fonction du projet sur lequel vous travaillez, peuvent être importantes ou moins importantes. Nous avons des éléments de base et des cartes de style. Nous avons donc des éléments de base tels que la navigation, les pieds de page, les miettes. Nous avons ces différentes icônes, chargeurs, curseurs, boutons, couleurs. Et enfin, vous avez ces exemples de pages dans ce UIKit quantique particulier. Et vous pouvez regarder ces pages pour vous inspirer et voir où ils ont utilisé tous ces différents éléments. Si nous jetons un coup d'oeil à la plateforme, nous avons des en-têtes, nous avons du contenu. Donc, une fois de plus, des blocs de Contenu, des curseurs, des grilles simples. Donc, fondamentalement, les images dans une grille gauche et droite. Nous avons cette grille maîtresse. Nous avons des fonctionnalités futures à gauche, à droite. Par exemple, avec maquette de téléphone mobile, avec maquette de site Web, désolé, maquette d' ordinateur portable avec maquette de tablette. Nous avons encore une fois différents portefeuilles, selon l'endroit où vous travaillez sur quelle nature, quand utiliser l'un ou l'autre. Nous avons le commerce électronique, particulièrement important si vous travaillez avec des sites Web de commerce électronique. Nous avons des cartes de blog. Et évidemment, vous pouvez utiliser et réutiliser ces différents composants. Par exemple, ces cartes de bloc. Vous n'avez pas à les utiliser pour les sites Web de blog. Vous pouvez les utiliser, par exemple, pour des sites de commerce électronique. C' est la beauté de ces kits d'interface utilisateur. Vous pouvez simplement réutiliser ces cartes dans vos projets futurs et simplement les adapter pour fonctionner pour ce projet particulier. Pour que nous puissions avoir des témoignages d'équipe, des prix stables, des appels à l'action. Ces tables de prix sont particulièrement ennuyeux à créer parce que vous êtes fondamentalement, disons que vous avez, par exemple, 20 exemples différents de ces tables de prix en ligne. Et tous ces autres exemples ne sont que des variations de ces exemples. Pourquoi perdre du temps à recréer tout le temps ? Tous ces éléments créent simplement, par exemple, cinq ou six tables de prix à la fois dedans, il suffit de les réutiliser pour vos futurs projets va vous faire gagner un tas de temps, surtout avec ces détails ennuyeux où vous ont la majorité de ces différents choix, en particulier avec la table de tarification. Donc vous avez des options, vous avez des prix, un plan mensuel, un plan annuel. Donc, tous ces détails vont vous prendre beaucoup de temps à créer pour chaque projet particulier. Donc, les avoir dans un kit d'interface utilisateur va vous faire gagner beaucoup de temps. Si nous jetons un coup d'oeil ici, appelez à l'action, particulièrement important avec toutes ces cartes promotionnelles, nous avons des formulaires et des contacts. Encore une fois, avec ces formes, combien de ces variations pouvez-vous réellement avoir ? Donc, disons que vous pouvez créer, par exemple, 1520 formulaires de contact. Voilà, tu y vas. Vous pouvez les utiliser pour tous vos projets futurs. Et les en-têtes et les pieds de page, en particulier sont ennuyeux pour moi de créer en raison de la répétitivité et ils utilisent tous ces différents éléments. Par exemple, le logo du client va être à gauche, droite, au centre en bas, et c'est fondamentalement tout. Ainsi, vous pouvez voir quand vous commencez à créer ces kits d'interface utilisateur, vous pouvez obtenir l'image de quels types d'éléments vous devez créer un plus, quels types d'éléments vous devez créer moins évidemment pour n'importe quel type de niche dans lequel vous êtes, une sorte de formulaire de contact sera utile à inclure. Mais fondamentalement, une fois que vous commencez à créer, vous pouvez utiliser le formulaire de contact pour cela, à partir de ce projet. Vous pouvez utiliser le formulaire de contact de ce projet et simplement adapter au travail pour vos futurs projets. C' est tout le point de vue que je gamine, et c'est pourquoi je pense qu'ils sont extrêmement utiles à avoir et à créer. Et évidemment, cette création UIKit ne va pas venir facile, ne va pas venir vite. C' est le processus que vous allez utiliser et réutiliser tout au long de votre carrière. Donc, vous pouvez fondamentalement mettre au rebut certains éléments qui ne sont plus pertinents en termes de style, en termes de fonction. Peut-être que certains éléments ne sont pas utilisés dans l'industrie ou dans plus, sorte que vous pouvez simplement les jeter. Utilisez des éléments qui sont finis, adaptez-vous simplement et s'adaptez à ce kit d'interface utilisateur que vous utilisez. C' est donc la beauté des kits d'interface utilisateur et c'est pourquoi je les aime tellement. Et je pense que vous devriez commencer à les explorer aussi. 5. Structure du kit UI dans Adobe Xd: Dans cette vidéo, je vais vous montrer quelques idées de structure pour vos kits d'interface utilisateur dans Adobe XD. Je vais vous montrer mes exemples parce que je crée ces enfants UI et UX depuis des années maintenant. Et j'ai plus de 500 produits de design dans ma boutique web aube à dotnet, je vais laisser les liens vers tout ce dont je parle dans le PDF. Vous pouvez simplement cliquer sur ces liens et visiter et explorer si vous êtes intéressé, même Burgess, tous ces différents produits que j'ai mentionnés n, que je vais mentionner à l'avenir. Une fois que vous avez réellement accès à ces types de vente et à ces profils sur ces sites Web, vous pouvez vendre vos designs. Mais pour l'instant, explorons la structure de ces enfants, comment ils peuvent travailler dans Adobe XD et comment vous pouvez en apprendre et en créer les vôtres. Donc, ce que j'ai ici est le constructeur de page de destination de conversion, qui est le produit que nous avons créé il y a un certain temps. Et c'est le kit filaire, évidemment, comme vous pouvez le voir. Et si je zoom un peu plus près, mais vous pouvez voir ici, nous avons la navigation, nous avons les en-têtes, histoire, caractéristiques, avantages, promo, témoignages, équipe, prix, autres. Et pour tout cela, nous avons plusieurs options, évidemment parce que c'est le générateur de page de destination. Ce sont les éléments qui vont utiliser pour la majorité des pages de destination. Et cela est destiné à quelqu'un qui crée ces pages de destination tout le temps parce que la majorité de ces entreprises sont là, créent ces pages de destination tout le temps, par exemple, pour leurs campagnes de lancement, pour leurs lancements de produits, pour leur produit à une promotion pour toutes ces campagnes, pour les annonces Facebook, pour les annonces Instagram, annonces YouTube et ainsi de suite. Les pages de destination sont donc extrêmement importantes pour cela. Ce produit particulier est conçu pour fonctionner avec les pages de destination. Une fois de plus, on retourne à la niche. Quel est votre créneau et quel est votre type de projet sur lequel vous travaillez ? Vous allez créer des composants qui vont fonctionner dans ce créneau. Si nous revenons ici, par exemple, je vois que c'est 1400. Et je peux sauter ici pour créer un nouveau plan de travail. Et je peux sauter ici, créer celui-là. Cliquez ici et simplement ajusté à 1400, comme ça. Pour que tous nos éléments fonctionnent. Et je vais l'étendre plus loin. Donc, ce que je peux faire est que je peux, par exemple, cliquer sur ce contrôle de navigation C, cliquer ici, contrôler V. Et je peux, par exemple, cliquer ici, contrôler C, contrôler V, et ajuster cela pour s'adapter. Je peux même les mettre à l'intérieur de la pile, puis je peux simplement glisser et déposer à l'intérieur d'une pile, mais nous pouvons aussi le faire plus tard. Par exemple, je veux montrer ces différentes fonctionnalités. Voyons donc où sont les fonctionnalités. Ils sont là. Donc, par exemple, je peux utiliser celui-ci contrôle C, contrôle V. Et vous pouvez voir à quel point la création de ces sites est facile. Disons que celui-là, des positions juste ici. Peut-être que je veux utiliser celui-ci maintenant. Positionnez juste ici. Peut-être que je veux l'utiliser ici. Comme ça. Et disons que maintenant vient le moment de la tarification, mettez-le ici. Et peut-être quelque chose comme ça. Je veux persuader les gens encore plus de pied de page ici. Et la position n'a pas d'importance. Attendez un moment et vous allez voir pourquoi dans une seconde. Alors mets-les ici. Et disons que maintenant que votre page de destination est terminée, vous pouvez tous les sélectionner, appuyer sur Contrôle G pour les placer dans un groupe, puis les placer dans une pile. C' est la pile verticale et je peux mettre la distance de 150, par exemple, entre eux et appuyer sur Entrée ou Retour. Et maintenant, nous avons un espace uniformément espacé entre tous nos éléments. Je peux les mettre en haut de la page comme ça. Et par exemple, je ne veux pas que ce soit 150 pour ça. Donc, je peux simplement ajuster celui-ci à 0. Et tous ces autres auront 150 pour l'espacement. Ainsi, vous pouvez voir à quel point il est simple de créer votre page de destination. Vous pouvez double-cliquer ici pour le fermer ici. Et par exemple, disons que la copie est prête et que vous voulez apporter quelques modifications aux images. Vous pouvez simplement glisser et déposer vos images à l'intérieur d'ici, les placer dans, puis simplement apporter des modifications. Par exemple, nous avons cette icône d'image juste ici. Je peux simplement appuyer sur Supprimer pour le supprimer. Et je peux, par exemple, abaisser l'opacité de mon image pour la faire ressortir un peu plus. Par exemple, je veux ajouter une image supplémentaire à ici. Peut-être que cette image, je veux ajouter quelque chose pour la vidéo. Peut-être. Peut-être que cette image va fonctionner pour que vous puissiez voir à quel point il est simple de travailler avec ces différentes images. Donc, je peux le sélectionner pour peut-être, pour 40 pour cent d'obésité. Peut-être que je peux utiliser une autre icône d'œil ici. Et peut-être que je veux dire que c'est, je ne sais pas, quelque chose d'un peu plus rond. Donc je peux sauter ici, taper en 2004, le rayon du coin. Si je veux faire cela, vous pouvez ajuster cela pour obtenir l'image à quel point il est simple de créer ces éléments. Donc, c'est essentiellement ma structure et comment mon équipe et moi travaillons pendant des années sur ces structures. Et je vais vous montrer une structure différente pour les enfants mobiles. Et c'est un UIKit bavard. Et vous pouvez voir que nous avons des images ici. Évidemment va être assez simple pour remplacer toutes ces images. Vous allez juste utiliser exactement la même structure. Donc, si je jette un coup d'oeil ici, peut-être que je veux ajuster ces images afin que je puisse la sélectionner et celle-ci, et peut-être que je peux sélectionner deux images différentes, faire glisser et déposer à l'intérieur. Et je veux utiliser celui-ci par exemple, pour que vous ayez l'idée à quelle vitesse il est. Mais ce que vous pouvez aussi faire est de cliquer ici, et ici nous avons tous ces différents éléments. Maintenant, les éléments sont vraiment utiles. Nous avons ce bleu principal et je veux faire un clic droit, cliquer sur Modifier, et peut-être que je veux le changer en rouge. Donc, il suffit de remarquer comment il s'applique tout au long de nos différents changements et simplement ajusté pour lire. Je peux aussi aller Control Z. pour annuler ça. Nous pouvons également modifier la taille de police et les choix de police. On peut changer les poids des polices. Nous pouvons changer tous ces éléments différents. Donc, ce que je peux faire est d'appuyer sur Modifier. Par exemple, je veux choisir d'autres formulaires comme Open Sans, par exemple, appuyez sur Entrée, et il va appliquer ce changement tout au long de notre conception. Ainsi, vous pouvez voir à quel point c'est facile et simple. En outre, nous pouvons avoir tous ces différents composants. Nous pouvons changer indépendamment. Donc, vous pouvez voir, par exemple, que nous avons ces points qui sont noirs, juste ici, juste ici, juste ici. Donc, tout au long de notre conception et tout le reste, qui est noir, nous voulons le changer pour quelque chose de sauvage, comme lire une fois de plus par exemple. Ainsi, vous pouvez voir où nous avions cette couleur, elle va s'appliquer tout au long de la conception artistique. Et ça va s'appliquer partout où nous l'avons eu en premier lieu. C' est pourquoi tous ces composants sont extrêmement utiles. Et dans l'exemple suivant et dans la vidéo suivante, je vais vous montrer comment vous pouvez transformer votre conception existante en UIKit parce que vous n'allez pas acheter ces kits d'interface utilisateur où chaque projet, et je pense que c'est beaucoup mieux même si je vends ces enfants UAC, c'est beaucoup, beaucoup mieux approche pour commencer avec un UIKit premium juste pour votre structure, juste pour cet élément, juste pour certains éléments ennuyeux, que vous pouvez ensuite réutiliser pour vos propres projets , puis de créer votre propre UIKit en utilisant ces éléments, en utilisant ces tactiques et techniques, qui va fonctionner pour votre cas d'utilisation particulier. Parce que je retourne au créneau une fois de plus. Comme vous êtes, par exemple, dans un créneau de voyage, éléments qui ont fonctionné pour vous dans votre projet peuvent ne pas fonctionner pour quelqu'un qui se trouve dans un créneau de blog, par exemple, parce qu'ils peuvent avoir besoin d'éléments différents. Donc, dans la prochaine vidéo, je vais vous montrer comment vous pouvez transformer votre projet existant en kits d'interface utilisateur. 6. Création de kit UI dans Adobe Xd: Dans cette vidéo, je vais vous montrer comment vous pouvez transformer votre projet existant en UIKit et le réutiliser pour vos futurs projets. Cette approche peut être utilisée pour différents projets si grands et petits. Et vous pouvez utiliser certains éléments ou vous pouvez utiliser tous les éléments et ensuite simplement continuer à partir de là. Vous pouvez utiliser un type d'élément, par exemple, la navigation. Si c'est quelque chose qui se répète tout le temps dans votre projet, ou vous pouvez utiliser différents types d'éléments. Par exemple, les deux navigateurs, les images de héros, pieds de page, les coeurs de blog et tous ces types d'éléments. Donc, je vais vous montrer dans cet exemple ou pour le projet existant comment vous pouvez le transformer en un kit d'interface utilisateur. C' est donc le projet que j'ai créé pour l'un de mes cours précédents. Je vais le laisser, laissez le lien dans le PDF pour que vous puissiez jeter un coup d'oeil si vous êtes intéressé. Donc, tous ces éléments sont créés dans cette classe. Donc, il est déjà 20 heures de long n une fois de plus, je vais laisser le lien dans le PDF afin que vous puissiez y accéder rapidement. Et ce que nous avons ici sont différents composants pour les couleurs, les styles de personnages, tous ces composants pour toutes ces différentes cartes, nous avons différentes icônes, nous avons des structures différentes ici. Nous avons le logo, nous avons les cartes de flèches et bien plus encore. Donc ce que vous pouvez faire pour cela, c'est si je clique ici, encore une fois, nous sommes à 1920 au lieu de 1400, comme nous l'avons fait la dernière fois. Ce que je peux faire, c'est cliquer sur mon plan de travail pour créer un nouvel aéroport. Ou je peux simplement dupliquer celui existant. Ce qui fait encore mieux, ce que je peux faire est d'aller directement ici au dossier. Et puis Nouveau, désolé si elle est un peu en retard parce que je cours tous ces éléments dans ma machine. Et ce fichier est assez énorme. Donc, je vais créer un nouveau fichier, et je vais simplement réutiliser certains de ces différents éléments dans mon projet. Ou c'est un ajout, nous avons fait créer ce projet. Ce que je vais faire est de sauter ici à la conception de ce site Web. Et je vais sauter jusqu'ici, frapper Control C. Et puis je vais passer au projet que nous venons de créer, frapper Control V. Donc je peux juste coller à l'intérieur de ce design. Et ce que je peux aussi faire, c'est revenir ici. Et peut-être que je peux m'en servir un autre. Utilisons ce contrôle C et je vais sauter dans ce projet, frapper le contrôle V. Et puis une fois là, juste pour nous sauver un peu de temps, ce que je vais faire, c'est que je vais vraiment éteindre ça. Donc, skillet, et comme vous pouvez le voir, certains éléments sont déjà collés dans notre projet précédent, comme toutes ces icônes différentes. Mais nous n'avons pas de couleurs et de styles de personnages et nous pouvons les travailler séparément. Ce que je voulais te montrer, c'est ça. Donc, je vais l'agrandir. Et disons que je veux utiliser cette navigation, mais tout d'abord, utilisons la même grille. Donc si je l'allume, nous avons, voyons, 12 colonnes. Donc 60, 82, et je vais faire la même chose pour ça. Donc, nous avons 60, 82. On y va. Donc c'est la même chose que celle-ci. Et je vais abaisser votre basicité de ces lignes de grille comme ça. Donc, disons que je veux utiliser ce cercle de navigation, appuyez sur Contrôle C, collez-le ici. Et ce que je peux faire, c'est le positionner ici. Et disons que c'est notre première navigation. Allons à nos couches. Donc, nous pouvons utiliser, par exemple, Nav 1. Et ce que je peux aussi faire est de le dissocier. Alors faisons un clic droit. Laisse-moi voir où c'est. Seul composant. On y va. Donc, c'est la seule fin. Nous pouvons le créer pour être un composant local. Donc nous pouvons frapper le contrôle K si nous le voulons, et nous pouvons créer différents états à partir de lui. Donc, je peux cliquer ici et taper, par exemple, disons gros bouton, gros btn. Et ce que je veux faire ici, c'est que je veux juste double-cliquer à l'intérieur et étendre ce bouton pour entendre et peut-être déplacer nos éléments de navigation plus. Disons que je veux les aligner ici, ou peut-être même mieux au centre comme ça. Donc, si nous regardons cet état par défaut et cet état, nous avons ces deux états distincts. Donc, ce que vous pouvez faire avec celui-ci est simplement de maintenir Alt dans votre état par défaut. Positionnez ici aussi. Je ne sais pas, disons 60, puis utilisez cet état. Et déjà vous avez deux types de navigation différentes. Disons que je veux en créer un autre. Donc, nous pouvons revenir à l'état par défaut, qui est celui-ci, créer un nouvel état. Et par exemple, je peux quelque chose comme sans texte, quelque chose comme ça. Donc, dans cet état, ce que nous allons faire est fondamentalement d'entrer et de supprimer nos textes. Alors ouvrez, sélectionnez notre texte, appuyez sur Supprimer. Donc maintenant, il nous reste juste avec notre bouton. Et on peut soit étendre ce bouton, laisser ça comme ça. C' est vraiment à toi de décider. Donc, ce que je vais faire est de sélectionner celui-ci, déplacer à 60, et de cliquer sans texte. Alors on y va. Nous avons déjà créé nos trois éléments différents et trois éléments de navigation différents. Mais vous pouvez aussi faire est d'organiser ces. Et j'aime vraiment faire ça. Donc c'est maintenant un, c'est maintenant deux. Et ça va être nav trois. Et laissez-moi vous donner juste un exemple de plus afin que nous puissions revenir à ce par défaut et créer un sans bouton ou pas de btn pour abrégé. Donc, ce que nous allons faire est fondamentalement de faire un point sélect. Donc, à partir de là, nous sommes 40 et je vais sélectionner un bouton supprimé et sélectionner tous nos éléments de navigation. Comme ça. Positionnez-les au décalage de bord 1234. Donc nous sommes à 40 de ce bord, comme nous sommes avec cette poussée. Et fondamentalement, je vais le faire encore une fois. Donc, je vais tenir mon ancienne option, sélectionner savoir BTM et Terry aller, je peux revenir à l'état par défaut et vous pouvez voir à quel point c'est rapide, quelle vitesse c'est. Et ça va vous faire gagner du temps. Je vais passer à un gros bouton comme ça. Donc ça va vous faire gagner un peu de temps plus tard pour vos futurs projets. Et vous avez déjà vu à quel point c'est simple de simplement copier et coller dans la vidéo précédente. Mais vous pouvez aussi faire pour ces images de héros, par exemple. Alors frappons Contrôle C. Je vais à V. Et ce que je vous recommande de faire est de renommer cela navigation et de créer un aéroport séparé pour ces images de héros par exemple. Donc, dans ce cas, disons que nous avons ces gens de ce côté-ci. Et nous allons le dupliquer. Contrôle J, désolé, Contrôle D, comme ça et positionnez-le comme 60. Donc, une fois de plus, cela va être dans des plans de travail séparés, alors créons cela. Donc je vais enlever ces deux-là. Et vous pouvez positionner les pieds de page à l'intérieur de votre navigation si vous le souhaitez. C' est déjà à vous de décider comment vous voulez les créer. Et je vais appeler ce héros, par exemple. Parce que ces images de héros sont quelque chose sur lequel vous allez passer la majorité de votre temps. Disons donc que pour ce deuxième exemple, qui va être Hero 2. Donc, ce héros. Notez comment je ne crée pas de composants à partir de ceux-ci. Je veux vous montrer cette deuxième approche. Donc, comme je vous l'ai déjà montré avec ceux-ci, les composants sont évidemment extrêmement simples à créer, mais vous pouvez aussi aller sans composants et vous pouvez simplement créer ces éléments séparés pour vous-même. Disons donc que je veux positionner ce texte vers la droite. Ce que nous pouvons faire avec ceux-ci, c'est que nous pouvons positionner ces deux-là dans un groupe, les mettre dans une pile, et simplement inverser l'Ordre, comme ça. Et maintenant le texte est de ce côté-ci, les gens sont de ce côté-ci. Et ce que nous pouvons également faire est d'utiliser ces éléments de fond. Donc cette forme de héros, peut-être que je veux la retourner comme ça, et je veux la positionner comme ça. Et tous ces éléments différents. Donc Hero Elements, je vais les positionner juste ici. Donc, vous obtenez l'image à quel point c'est simple. Et j'ai aussi un masque ici avec mon cercle de héros à l'intérieur. Donc je vais le positionner ici. Alors on y va. On a juste quelques clics. Nous avons deux options différentes que nous pouvons montrer à nos clients. Ce que cela va faire pour vous une fois de plus, c'est que nous faisons pour vous permettre de travailler beaucoup plus rapidement sur ces projets, surtout avec ces tâches répétitives comme je l'ai mentionné. Ainsi, la navigation, les images de pied de page, et tous ces différents éléments qui vont se répéter tout le temps, comme les tables de tarification par exemple. Il est donc beaucoup plus facile pour vous en tant que concepteur de créer toutes ces variations dans votre style, en utilisant vos composants, en utilisant votre langage de conception, en utilisant votre police préférée, en utilisant vos couleurs préférées, puis réutilisez simplement ces composants pour vos projets futurs. C' est de la tricherie pour vos clients ? Sachez, parce que vos clients veulent juste le résultat final. Ils se foutent de la façon dont vous arrivez à ce résultat final. C' est quelque chose que tu as réorienté ? Évidemment, c'est le cas, mais assurez-vous de ne pas utiliser les logos que vous avez précédemment utilisés dans votre projet et de ne pas utiliser de marque. Par exemple, certaines couleurs dans vos livres de marque que vous obtenez avec vos clients. Par exemple, certaines couleurs sont des marques déposées, certaines polices sont des marques de commerce. Assurez-vous donc d'utiliser, par exemple, polices Google gratuites lorsque vous commencez à les créer, puis adaptez-les simplement aux spécifications de votre client. Par exemple, pour les couleurs et les polices. Laisse-moi te montrer encore une chose. Donc, avec la puissance de x D, nous avons tous ces différents éléments. Imaginez donc que nous voulons utiliser cette image. Donc Control-C, Control-V juste ici. Et disons que c'est notre première carte. Appelons ça la carte 1. Lambda. Et ici, nous avons la pile, comme vous pouvez le voir. Alors je vais frapper Alt. Quoi de mieux ? Je peux le créer en tant que composant. Donc Control K, nous avons cet état par défaut est avec l'image sur la gauche. Donc nouvel état, bonne image. Et puis simplement ajusté à ici. Comme ça. Et ce que je vais faire pour celui-ci, c'est que je vais simplement les retourner. Alors on y va. Et je vais ajuster cette carte, je vais m'assurer que mon image est juste là, et on y va. C' est donc notre état par défaut. C' est notre bonne image. Et encore une fois, je vais en créer un de plus. Donc, l'image centrale comme ça. Et je vais faire un changement comme ça. Donc 123, donc on est à 60 ans comme ça. Et évidemment, pour celui-là, je vais aller avec l'image centrale. Donc ce que je vais faire, c'est sauter ici. Et je vais changer la position de ma pile. Ce que je vais faire, c'est les mettre dans un groupe. Je vais utiliser une seconde pile verticale comme ça. Et fondamentalement, il suffit d'étendre l'image sur les bords comme ça. Double-cliquez à l'intérieur positionné par exemple, juste ici. On y va. Le texte sera au centre dans un instant. Alors passons à l'état par défaut, et nous allons travailler sur l'image centrale ici. Parce que c'est notre composante. Ce que je veux faire est fondamentalement ajusté ce texte. Alors allons-y, voyons la largeur automatique. Donc, ce que je vais faire est de double-cliquer à l'intérieur et d'ajuster ce bit de bingo texte à l'extérieur. Mais vous pouvez aussi faire est de créer ou à la hauteur et vous pouvez l'ajuster comme ceci. Et amenez simplement ce dont vous n'avez pas besoin ici comme ça. Donc, nous ne sommes qu'en quelques clics. Nous allons pouvoir l'ajuster. Et vous pouvez faire devrait attendre. Vous pouvez faire la hauteur automatique, tout ce que vous voulez. Et je vais m'assurer que c'est aligné au centre comme ça. Et je vais peut-être positionner ça au centre et positionner mon bouton au centre aussi. Et assurez-vous que nous sommes 40 de tout ça. Et assurez-vous juste que nous sommes parce que nous sommes dans une pile, par exemple, 64 décimales. Et vous pouvez aussi l'entrer ici. Donc, si je sélectionne mon groupe ici, sélectionnez 60, et il est sélectionné. Donc, vous y allez en quelques clics. Vous avez trois cartes différentes que vous pouvez utiliser. Donc, fondamentalement, nous avons l'image par défaut, l'image droite, l'image centrale. Donc tu peux faire ce que tu veux avec ça. Ainsi, vous pouvez voir à quel point il est simple de créer ces éléments dans Adobe XD. Et une fois de plus, je vous exhorte à commencer à penser à votre projet, à commencer à penser à votre niche, qui sont des éléments qui battent déjà tout le temps. Nos éléments SWOT qui sont extrêmement ennuyeux. Pouvez-vous acheter quelque chose ou télécharger quelque chose gratuitement qui va améliorer votre flux de travail, ce qui va accélérer votre flux de travail ? Ou avez-vous à créer tout à partir de zéro en fonction de l'urine soignée, en fonction de votre style de conception. Si c'est le cas, commencez simplement par créer tous ces éléments réguliers comme je vous ai montré dans cet exemple. Par exemple, la navigation, le pied de page, toutes ces différentes voitures qui vont se répéter en tout temps et ensuite simplement se développer à partir de là tout au long du temps. Enfin, ce que je veux vous montrer, c'est que si nous revenons à Adobe XD, vous pouvez voir qu'il a enregistré ce fichier dans le Cloud. Ceci est extrêmement important, surtout si vous partagez cela avec vos collègues de conception, avec vos clients, ou si vous travaillez à distance des formulaires, par exemple, vous avez le bureau et vous travaillez également sur un ordinateur portable. Mais ce que je recommande également est d'enregistrer cela sur votre bureau. Pour ce faire, vous pouvez simplement écrire ici dans Fichier, Enregistrer sous, et vous pouvez choisir aussi sûr que document local sur votre bureau. Ce que cela va vous permettre de faire, c'est que vous pouvez simplement avoir ce fichier. Par exemple, si l'électricité a disparu, vous pouvez l'emmener à votre ordinateur portable et vous pouvez emmener votre ordinateur portable où vous voulez. Si vous devez ajuster et faire quelques changements rapides, si Internet est parti, ce qui est vraiment le principal avantage des documents locaux, vous pouvez simplement l'enregistrer localement et simplement travailler ou non. Si vous n'avez pas de connexion Internet. 7. Systèmes de conception UI Kit VS: Il y a aussi un autre type de modèle qui est disponible en ligne, qui est appelé système de conception. Et le système de conception est fondamentalement mort. Il implique différents types de polices, différents types de règles, différents types de grilles dans de nombreux autres projets, surtout si vous travaillez avec du code. Donc, vous allez assigner des extraits de code différents. Vous allez assigner différents jetons pour les couleurs, pour les polices et bien plus encore. Donc, le système de conception est beaucoup plus complexe bête que l'UIKit. Donc, en fonction des projets sur lesquels vous travaillez, vous pouvez créer un système de conception qui est plus petit si vous travaillez sur de petits projets ou si vous travaillez avec des projets plus importants, je recommande certainement de travailler avec le système de conception. Mais la différence clé entre UIKit et le système de conception est UIKit a déjà ces composants pré-fabriqués déjà créés. Donc, comme vous l'avez vu dans la vidéo précédente, nous avons déjà créé cette navigation. Alors c'est prêt. Il a le logo à l'intérieur duquel vous pouvez échanger avec votre prochain projet client. Il a le type à l'intérieur, donc tout est déjà positionné. Vous pouvez simplement renommer certains de ces types. Vous pouvez changer la police, vous pouvez changer les styles, vous pouvez choisir la taille et tout le reste. Et il avait déjà ce bouton en place. Vous pouvez donc simplement ajuster la largeur, la hauteur, la couleur du bouton, l'ombre d'arrière-plan et tous ces éléments. Et c'est l'UIKit en un mot. Avec le système de conception, vous devrez recréer cette navigation à partir de zéro. Et parce qu'à l'intérieur du système de conception, vous avez une structure beaucoup cohérente. Une fois de plus, je reviens au plus grand projet, surtout sur l'énorme projet où la majorité des designers travaillent sur ce même projet. Ensuite, le système de conception est vraiment crucial parce que vous devez avoir un référentiel central d'éléments à utiliser pour tous ces différents concepteurs au sein de votre équipe. Alors que si vous travaillez seul ou si vous travaillez avec un autre concepteur, ou si vous travaillez directement avec des clients, vous que je reçois est une bien meilleure solution à mon avis, car une fois de plus, cela va accélérer votre flux de travail massivement parce que vous avez tous ces éléments déjà créés. Vous n'avez pas à les créer à partir de zéro tout le temps. Alors que la conception de systèmes est extrêmement importante, extrêmement précieuse et extrêmement utile, à mon avis, pour ces petits projets, vous n'avez pas vraiment besoin de créer ces systèmes de conception parce que vous avez les composants. Ainsi, vous pouvez simplement ajuster les composants. Vous pouvez simplement ajuster la taille de la police. Vous pouvez simplement ajuster la famille de polices. Vous pouvez ajuster la couleur. Vous pouvez ajuster tous ces éléments différents, par exemple, les icônes. Disons que vous utilisez ces icônes d'image tout au long de votre conception et que vous voulez juste l'échanger très rapidement. Eh bien, vous pouvez créer un composant et la prochaine fois sur le projet suivant, si vous voulez changer cela, vous pouvez simplement glisser et déposer une icône différente à l'intérieur va permuter ces composants. Et voilà. Vous n'avez pas besoin d'un système de conception pour tous ces petits projets. Donc, une fois de plus, cela dépend de vous quel genre de projets vous travaillez, quel genre de niche vous êtes , surtout pour ces petites niches, ces systèmes de conception ne sont pas vraiment utiles. Encore une fois, tout dépend de vous et je vais laisser les liens vers certains des systèmes de conception les plus connus dans un PDF, vous pouvez télécharger la version XD. Vous pouvez les ouvrir dans Adobe XD et vous pouvez simplement explorer ce que sont ces systèmes de conception et ce que vous pouvez apprendre d'eux. Parce que tous ces éléments sont créés par de grandes entreprises. Et une fois de plus, ces grandes entreprises ont créé ces systèmes de conception parce qu'elles ont plusieurs concepteurs travaillant en équipe en même temps. Ils ont donc besoin de ce dépôt central d' éléments pour être utilisé par tous ces différents concepteurs. Sinon, si vous n'êtes qu'un seul groupe d'hommes, si vous travaillez avec des projets plus petits, vous pouvez simplement utiliser des kits d'interface utilisateur et cela va très bien se passer. 8. Kits d'interface utilisateur gratuits dans Premium: C' est bien et bon de créer ces kits d'interface utilisateur par vous-même. Mais il est parfois plus facile d'aller de l'avant et télécharger ou d'acheter ces différents kits d'interface utilisateur que vous allez utiliser pour vos futurs projets, peut-être pour ces éléments ennuyeux comme nous avons parlé précédemment, comme la navigation, comme le pied de page, comme les tables de tarification et ainsi de suite. Donc, où vous pouvez trouver ces kits d'interface utilisateur, je vais vous montrer dans la prochaine leçon où nous allons réellement discuter de la vente de vos propres kits d'interface utilisateur personnels sur ces sites Web. Mais fondamentalement ce que je voulais partager dans cette leçon, c'est ces kits d'interface utilisateur premium sont faits avec juste une marque stupide à l'esprit. Je veux dire par cela est qu'il n'y a pas de lien certain entre la dette UIKit et une certaine marque. Vous pouvez juste imaginer que si iOS publie leur UIKit va être spécifique à ces directives de marque, à ces grandes lignes directrices, à ces directives topographiques et à tous ces différents éléments qui comprennent ce UIKit particulier et de ce système d'exploitation particulier dans ce cas. Donc c'est la même chose. Si Facebook, par exemple, lance son propre UIKit, il sera reconnu par cette couleur bleue, par la police de la dette et tous ces éléments. Alors qu'avec ces kits d'interface utilisateur premium et gratuits, que vous pouvez trouver en ligne, il n'y a pas de marque certaine à l'esprit. Pourquoi c'est ça ? Parce qu'il est destiné à être utilisé par d'autres designers. Il va être assez simple pour vous de changer les couleurs, changer les polices et tous ces éléments dont vous avez parlé auparavant. C' est donc tout le point du kit d'interface utilisateur premium ou gratuit. Maintenant, quelle est la différence entre l'UIKit gratuit et premium ? Évidemment, le numéro 1 est dans le prix. Les kits d'interface utilisateur gratuits peuvent être téléchargés gratuitement, évidemment, et la prime peut être achetée. Et la principale différence, à mon avis, est le nombre d'éléments. Habituellement, ces enfants de l'autoroute viennent juste avec dix ou 20 éléments différents. Alors que les kits d'interface utilisateur premium comme le quantique UIKit, surtout que je vous ai montré avant, est livré avec, par exemple, 11000 éléments différents. En outre, il y a une différence dans les types de fichiers. Par exemple, avec des kits d'interface utilisateur gratuits, il est généralement livré avec un seul type de fichier. Par exemple, il y aura XD ou Adobe Photoshop ou Sketch ou Figma ou autre chose. Alors qu'avec les désirs premium on s'efforce généralement d'inclure tous ces différents types de fichiers. Donc, peu importe ce que vous utilisez, vous serez couvert. En outre, il y a une différence dans la différenciation des éléments. Donc, en libre vous, je suppose que vous allez simplement obtenir, par exemple, 23 catégories. Alors qu'avec des kits d'interface utilisateur premium, vous allez généralement obtenir 10, 20, 50 catégories différentes. Et enfin, je veux mentionner le soutien. Si quelque chose se brise, si quelque chose ne marche pas. Semaine trois, kits d'interface utilisateur, fondamentalement, qui se soucie, C'est gratuit et vous n'allez pas obtenir de soutien du concepteur. Alors qu'avec les marchés premium, surtout si vous les achetez directement sur leur site Web, vous allez avoir droit à l'assistance. Et vous serez le premier à obtenir de l' aide de ces concepteurs qui ont créé ces kits d'interface utilisateur. Donc, dans la prochaine vidéo, je vais parler de la vente de vos propres kits d'interface utilisateur. Et nous allons essentiellement parcourir ces différents sites Web. Et je vais vous montrer où vous pouvez obtenir les kits d'interface utilisateur premium pour vous-même. Et vous pouvez également vendre vos propres kits d'interface utilisateur sur ces sites Web particuliers. 9. Créer et vendre votre kit d'interface utilisateur: Quand il s'agit d'acheter des kits d'interface utilisateur premium en ligne, ou quand il s'agit de vendre vos propres kits d'interface utilisateur en ligne. Il y a juste une poignée de sites Web où vous pouvez le faire avec succès. Il y a beaucoup de sites Web différents là-bas. Et mon conseil en tant que quelqu'un qui est là depuis six ans est de ne pas essayer de vendre partout parce que tu vas juste te laisser de l'étain. Vous allez passer trop de temps perdu sur ces sites Web qui ne vont pas générer vos ventes. J' ai suivi ce conseil. Suivez cette vidéo de quelqu'un qui l'a fait depuis, comme je l'ai dit, six ans maintenant et j'ai ou 100 mille ventes sur tous mes différents produits. Je devrais savoir où vous devriez vendre et où est-ce que c'est rentable ou non. Donc, dans cette vidéo, je vais vous montrer, comme je l'ai dit dans une vidéo précédente, ces sites Web où vous pouvez acheter des kits d'interface utilisateur premium et où vous pouvez vendre vos propres kits d'interface utilisateur. Maintenant, tout d'abord, pourquoi vous devriez vendre vos propres kits d'interface utilisateur en premier lieu. En fait, c'est juste un bon sens de le faire, et c'est juste une bonne source de revenus supplémentaires pour vous-même. Si, par exemple, vous avez créé un joli kit d'interface utilisateur pour l'un de vos projets précédents. Vous pouvez simplement le développer en utilisant les conseils et les techniques dont nous avons parlé plus tôt et simplement le préparer et le vendre sur l'un de ces différents sites Web. Vous pouvez le mettre en vente pour le prix de ce qui est représenté sur tous ces différents sites Web. Vous pouvez simplement ajuster le prix du marché. Vous pouvez explorer ce que les autres font et simplement vous ajuster. Donc, si vous avez, par exemple, 100 éléments dans vos kits d'interface utilisateur et que vous n'offrez qu'un seul type de fichier, à savoir Adobe XD, assurez-vous de ne pas charger trop car vous êtes en concurrence avec quelqu'un d'autre qui le crée dans Adobe XD sketch Figma pour le magasin. Alors peut-être que votre enfant va vendre beaucoup mieux que votre UIKit parce qu'ils offrent tous ces différents types de fichiers. Alors passons à l'intérieur et je vais vous montrer tous ces différents sites Web et où vous pouvez vendre vos produits. Et tout d'abord, l'hébergement cellulaire. Donc, fondamentalement, l'auto-hébergement est l'endroit où vous hébergez les produits et vous êtes en charge de faire entrer vos clients. Vous êtes donc en charge de la promotion, vous êtes en charge de la vente, vous êtes en charge de la livraison de tout le reste. Et ce sont aussi des sites de vente où vous pouvez vendre sur tous ces différents sites de vente et ils font tout le travail pour vous. Donc, commençons par auto-hébergé dans fondamentalement le site Web que j'utilise depuis des années est la route de la gomme. Vous pouvez ajuster, vous pouvez télécharger tous ces différents produits. Vous pouvez créer des liens personnalisés, des remises personnalisées, des couleurs personnalisées. Vous pouvez créer ces différents boutons d'appel à l'action, comme il est dit ici, commencer à vendre ou acheter maintenant, ou acheter maintenant, tout ce que vous voulez. Et vous pouvez essentiellement attacher cela avec la présentation des balises, avec présentation dribble, vous pouvez simplement emmener vos spectateurs ici et ils peuvent acheter à votre boutique d'appareils photo. Ou vous pouvez faire ce que j'ai fait avec mon équipe est de créer un site Web. Et sur ce site, vous pouvez créer, par exemple, UIKit. Et disons que vous pouvez voir UIKit ici, vos enfants juste ici. Donc on en a un tas. Et disons que les utilisateurs veulent acheter celui-ci, par exemple, ils peuvent simplement cliquer. Il va les amener à la page spécifique de leur produit, ce qui va avoir. La description ici, qu'est-ce qui est inclus ? Il fonctionne dans quel logiciel et quand je clique sur Acheter maintenant, il va les amener à la page de route de la gomme. Ils peuvent simplement cliquer, je veux cela et ils peuvent acheter ce produit. Et comme vous pouvez le voir, il est assez simple d'aller du site pour entendre. Ce que vous pouvez également faire est la vente intégrée. Cela signifie que lorsqu'ils cliquent sur Acheter maintenant, une fenêtre va s'ouvrir ici et ils peuvent acheter directement à partir de là. Mais assurez-vous juste de comprendre si vous utilisez Gmail, en particulier, et que vous utilisez quelque chose comme Google Analytics par exemple, ces deux vont planter. Donc fondamentalement, assurez-vous juste, et c'est pourquoi je dis qu'il vous redirige vers une page d'achat sécurisée. Alors je vais y aller. Comme vous pouvez le voir, la route de gomme est vraiment sécurisé car c'est mon site Web, mais je veux juste avoir cette couche supplémentaire de sécurité parce que les gens quittent leurs numéros de carte de crédit, sont des adresses e-mail PayPal. Donc je ne veux pas qu'il arrive quelque chose à ça. Donc, en gros, c'est mon opinion. Vous avez aussi un site Web appelé sulfure, qui est fondamentalement assez similaire à la route de la gomme, mais à mon avis, route de la gomme est là depuis le début de ce jeu en ligne et vous pouvez, comme je l'ai dit, sont ajustés pour s'adapter à tout ce que vous faites, quel que soit votre produit ressemble, dans ce cas, UIKit, mais vous pouvez vendre toutes sortes de choses différentes. Passons maintenant aux marchés. Et je vais vous montrer quels sont les principaux marchés là-bas. Et comme je l'ai dit, vous pouvez explorer tous ces autres marchés, surtout quand vous commencez à vendre, quand vous commencez à gagner de la traction. Tous ces gens de marché différents vont vous approcher et dire qu'ils ont ce nouveau site Web révolutionnaire qui va vous apporter tellement d'argent. Tu ne sauras pas quoi en faire, mais ne les écoutes pas. Assurez-vous de commencer à vendre sur ces principaux sites Web, puis de les étendre aux petits sites Web. Mais juste avec un produit à la fois. Si vous avez 500 produits comme moi, il est littéralement impossible de télécharger tous ces produits sur tous ces différents sites Web. Et pourquoi devriez-vous même vouloir faire cela s'ils n'ont pas, par exemple, un million de vendeurs différents ou s'ils ne vous apportent pas assez de ventes. Donc, pour commencer, ce que nous avons est le marché Envato et ce site est Graphic River. A l'intérieur de cela, vous avez des éléments Web et vous avez des interfaces utilisateur. Vous pouvez sauter à l'intérieur de là. Et vous pouvez voir à quoi ressemblent certains de ces différents produits. Comme je l'ai dit précédemment, vous n'avez pas à vendre des kits d'interface utilisateur. Tu peux vendre ce que tu veux. Mais cette classe est tout sur les kits d'interface utilisateur. Ensuite, nous avons conçu modèle et ces gars sont sans crainte sélectifs sur ce qui est capable d'aller sur leur site Web. Et vous pouvez voir que tous ces éléments sont vraiment de haute qualité, vraiment haut de gamme, surtout pour ces kits d'interface utilisateur n, Par exemple, si je clique ici juste pour vous montrer ces différentes présentations parce que vous travaillez avec eux pour créer ces présentations. Vous pouvez voir qu'ils sont vraiment plein écran. Le vrai look poli, le look vraiment professionnel. Ils ont vraiment l'air haut de gamme, et c'est la chose clé à leur sujet. Et je pense que vous pouvez également ajouter une animation différente lorsque vous créez avec eux. Ensuite, nous avons Creative Market et fondamentalement rivière graphique et Creative Market, ou sont là depuis le début des temps. Et vous pouvez parcourir tous ces différents modèles. Allons donc avec des modèles web par exemple. Vous pouvez voir combien il y en a. Mais si nous allons avec des modèles et je vais avec Laissez-moi me rappeler où sont tous ces modèles. Donc les éléments web graphiques. Et si je clique là, on peut filtrer. Allons-y avec Adobe XD. Et vous pouvez voir tous ces différents éléments pour Adobe XD. Et nous pouvons même pour filtré cela plus loin en allant à modèles de sites de médias sociaux. Et nous avons des enfants filaires, par exemple. Je peux choisir ça. Et vous pouvez voir les enfants filaires, comment ils ressemblent, combien y a-t-il ? Voici les miens. Et vous pouvez les parcourir si vous êtes intéressé. Et c'est fondamentalement tout. Vous allez simplement ici et voir ce que ces autres concepteurs font C, laquelle de leurs catégories qu'ils utilisent, C dans quel logiciel ils créent ces enfants filaires, vos enfants et ainsi de suite. Et en gros, commencez à partir de là et explorez ce qui fonctionne pour vous. Enfin, ce que nous avons aussi, c'est l'UI 8, qui est bien connu dans l'industrie. Ils sont également haut de gamme, de haute qualité, et ils sont vraiment frugaux quand il s'agit de sélectionner qui est capable de vendre sur leur site Web afin que vous puissiez les consulter. Je les recommande vraiment. Enfin, nous avons des éléments Envato et nous avons conçu des faisceaux et des éléments d'eau est juste la partie du marché Envato. Donc, vous devez postuler séparément pour vendre sur les éléments Envato. Mais une fois que vous le faites, vous êtes essentiellement payé par le montant que quelqu'un télécharge votre produit. Donc, si je recherche le kit d'interface utilisateur par exemple, vous pouvez voir tous ces différents éléments. Et fondamentalement, la différence entre ce marché et tous ces autres sites de est à l'exception de l'UA parce qu'ils ont tous accès pass, mais ils ont des limites sur le nombre d'articles que vous pouvez télécharger par semaine, par mois, par jour, et ainsi de suite. Bien que les éléments Envato n'aient aucune limitation, vous pouvez maintenant charger ce que vous voulez, où vous voulez, et vous payez un abonnement annuel plutôt que trois mois, six mois, un mois, peu importe. Tous ces autres sont en gros juste payer comme vous allez. Donc, si vous choisissez d'acheter ce produit, par exemple, vous l'achetez simplement. Ou si vous choisissez d'acheter mes produits, vous pouvez simplement l'acheter. Et la même histoire avec tous ces autres, et la même histoire avec la route de la gomme, mais Vidkun route, vous pouvez choisir de créer des paquets séparés. Donc, si nous revenons ici, je fais défiler vers le bas, par exemple, je peux créer un bundle UIKit à partir de tous mes produits. Et je peux choisir de créer un paquet iframe massif, comme la moitié fait. Et vous pouvez le faire assez facilement à l'intérieur de la route des gommes, alors que vous ne pouvez pas le faire dans tous ces différents sites Web. Maintenant, revenant aux éléments Envato, comme je l'ai dit, vous ne gagnez pas de l'argent pour un produit séparé que quelqu'un d'autre achète, mais vous gagnez de l'argent. Mais combien de vos produits que quelqu'un a téléchargés et combien de téléchargements avez-vous dans cette catégorie pour votre bonus contributeur ? Donc, par exemple, combien de ces différents produits que vous avez dans la majorité de ces autres choses. Et encore une fois, si vous êtes intéressé, vous pouvez simplement naviguer sur leur site Web. Et une fois de plus, voici mon kit produit et Austria UI. Et enfin, je veux partager des packs de conception avec vous, qui est l'un des sites les plus récents de l'industrie, mais cela vaut la peine d'être poursuivi car ici vous pouvez également vendre tous ces produits. Hé les enfants, comme nous l'avons mentionné, mais ils ont aussi différents paquets qu'ils courent de temps en temps. Et fondamentalement bundle est quelque chose d'un paquet et vous pouvez acheter un paquet. Par exemple, 10 concepteurs différents ont 10 kits d'interface utilisateur différents. Ils utilisent tous ceux que vous êtes enfants les mettre à l'intérieur d'un paquet appelé le paquet slash le prix vers le bas vraiment dur et ensuite simplement commercialisé comme fou. Et fondamentalement que Mundell va apporter quelques milliers de ventes et ensuite la discipline diviser cet argent de ce paquet particulier à travers ces concepteurs, généralement ce qui se passe est qu'il y a deux modèles différents. Soit 50, 50, 50 va aux paquets de conception. Dans ce cas, dans 50 va à tous les autres concepteurs. Et il y a aussi un modèle 50 et le reste, 50 pour cent va aux faisceaux de conception, et le reste va à celui qui a le plus grand UIKit obtient le plus d'argent, qui a les plus petits enfants de joie obtient le plus petit montant d'argent. Donc, fondamentalement, selon le site Web, selon l'accord, selon le paquet, vous allez obtenir un certain pourcentage de l'argent. Je vais créer un cours distinct à l'avenir, expliquant, expliquant comment préparer des présentations, des tags, comment préparer des descriptions, comment choisir votre ciblage, comment décrire au mieux votre produit, comment créer ces listes de plans, comment créer ces images de couverture et tous ces éléments. Surtout, je vais parler de support, pourquoi le support est important, comment vous pouvez vous déplacer en fournissant un support en fournissant une bonne description et en fournissant un bon produit en premier lieu, ce qui rend un grand produit et bien plus encore. Donc si vous êtes intéressé par ce cours pour l'avenir, suivez-moi sur les réseaux sociaux ou vous pouvez me laisser un message. Vous pouvez me suivre ici où que vous regardiez ce cours et rester à l'écoute pour l'avenir. Et vous pouvez également suivre ma chaîne YouTube. Je vais lui laisser un lien aussi. Dans le PDF. Je mets toutes sortes de contenu Adobe XD là-bas. Donc si vous êtes intéressé, assurez-vous de me suivre là-bas et je vais annoncer ce cours dans le futur. 10. Votre projet de cours: Votre projet de classe pour cette classe est de créer votre propre kit d'interface utilisateur. Vous n'avez pas besoin de créer la majorité de ces éléments, vous n'avez donc pas à créer 50 éléments différents. Vous pouvez simplement créer un, deux ou trois, peut-être cinq éléments. Ainsi, vous pouvez commencer, par exemple, avec la navigation, avec l'image de héros, puis vous pouvez continuer à partir de là et vous pouvez simplement l'enregistrer comme une image JPEG et la télécharger dans les projets de classe. J' aimerais vraiment voir ce que vous pouvez trouver et juste pour m'entraîner à créer des kits d'interface utilisateur pour l'avenir. Parce que comme je l'ai dit, une fois que vous commencerez à le faire, vous allez l'apprécier de plus en plus parce que cela va vous faire gagner un tas de temps dans le futur pour tous vos projets futurs va vous permettre de travailler sur vos projets beaucoup plus rapidement. Donc, comme je l'ai dit, j'ai hâte de voir nos projets de classe et vraiment excité de voir ce que vous pouvez trouver. 11. Conclusion et ressources: Merci d'avoir regardé ce cours et j'espère vraiment que vous y avez trouvé une certaine valeur, et j'espère vraiment que vous avez compris comment vous êtes. Les enfants peuvent vraiment vous aider à augmenter votre temps consacré à ces projets. Comment ils peuvent améliorer votre flux de travail, comment ils peuvent augmenter le temps que vous avez passé avec votre famille, avec vos amis, et diminuer le temps que vous passez dans ces projets. Encore une fois, commencez à créer des kits d'interface utilisateur. Petit style, a commencé à les créer une largeur. Tous ces éléments que vous allez utiliser dans tous vos projets. Par exemple, pied de page de navigation, tables de tarification comme nous avons déjà parlé. Et puis vous pouvez simplement ajouter un ajustement et inclure différents éléments. Et c'est pourquoi Adobe existe si bien. Et je vous ai montré dans la vidéo précédente comment vous pouvez facilement créer votre propre kit d'interface utilisateur et assurez-vous de l'ajuster et de le changer au fur et à mesure. Et ce qui est le plus important, c'est de trouver votre style. Certains concepteurs n'aiment pas créer de composants. D' autres jurent par des composants. Donc, tout ce que vous voulez, quoi que vous soyez, ce que vous ressentez le plus à l'aise pour vous. Utilisez cette technique, utilisez cette approche pour créer votre propre kit d'interface utilisateur. Aussi, assurez-vous de sélectionner votre niche et assurez-vous d'explorer votre niche et de voir quels types d'éléments votre niche nécessite le plus, comme je l'ai expliqué dans l'une des vidéos précédentes, ce ne sera pas la même chose pour tout. Certains sites Web de blog ne vont pas utiliser des éléments de sites Web de boutique et vice versa. Bien sûr, il y aura des éléments qui sont compatibles avec toutes ces différentes niches. Mais dans la majorité des cas, vous allez créer pour un créneau spécifique. Assurez-vous donc de le faire une fois que vous commencez à créer votre kit d'interface utilisateur. Une autre chose à mentionner est que les ressources vont être dans un PDF, comme je l'ai expliqué dans les vidéos précédentes, il suffit de cliquer sur le lien qui vous intéresse. Ça va t'y emmener. C' est à l'intérieur de ce PDF. Et je vous souhaite bonne chance dans la création de vos kits d'interface utilisateur. Et j'espère vraiment qu'ils vont vous faire gagner du temps comme ils l'ont fait pour moi dans tous vos projets futurs. Prends soin de toi.