Les bases de Adobe Xd 2021 - cours de conception d'UI / UX | Aleksandar Cucukovic | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Les bases de Adobe Xd 2021 - cours de conception d'UI / UX

teacher avatar Aleksandar Cucukovic, Improving lives, one pixel at a time.

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Introduction du cours

      2:38

    • 2.

      Qu'

      1:02

    • 3.

      Mac Vs Pc

      1:37

    • 4.

      Écran de bienvenue

      3:56

    • 5.

      Interface

      1:47

    • 6.

      Les formes

      11:58

    • 7.

      Outil Plume

      3:41

    • 8.

      Outil de texte

      4:38

    • 9.

      Planches de art

      4:10

    • 10.

      Bibliothèques

      11:40

    • 11.

      Calques

      4:01

    • 12.

      Plugins

      8:26

    • 13.

      Grille de répétition

      6:08

    • 14.

      Masques

      4:17

    • 15.

      Fonctions 3D

      4:29

    • 16.

      Maquettes

      7:53

    • 17.

      Raccourcis

      2:54

    • 18.

      Travailler avec des fichiers

      5:27

    • 19.

      Travailler avec des ressources gratuites

      6:34

    • 20.

      Travailler avec des ressources Premium

      8:03

    • 21.

      Utiliser des kits UI

      3:36

    • 22.

      Créer un projet de conception

      17:26

    • 23.

      Créer un design

      6:59

    • 24.

      Prototypage de votre conception

      8:30

    • 25.

      Partagez votre conception

      7:23

    • 26.

      Exporter vos fichiers

      8:14

    • 27.

      Créer un système de conception

      8:22

    • 28.

      Créer des jetons de conception

      3:52

    • 29.

      Créer un guide de style

      3:21

    • 30.

      Créer de grandes présentations

      5:56

    • 31.

      Future of Outils de conception

      4:48

    • 32.

      PROJET DE COURS

      0:51

    • 33.

      Conclusion du cours

      0:49

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

819

apprenants

--

À propos de ce cours

Adobe Xd 2021 est un outil de conception UI / UX créé par Adobe et de géniaux, c'est que il fonctionne sur Mac et Pc, il reçoit des mises à jour régulières, vous pouvez concevoir, prototype et partager, en utilisant une applique et pour free.

.

Dans ce cours de base Adobe Xd 2021 : UX Design Design cours, nous aborderons non seulement les bases, mais également de mon processus de conception, de communication avec les clients et les développeurs, bonnes pratiques pour les études de cas et bien plus encore.

.

J'ai hâte de vous voir en cours !

.

Consultez Adobe Xd Masterclass ici, et améliorez vos compétences Adobe Xd au niveau supérieur.

.

Ayez une journée de créative.

Alex

Rencontrez votre enseignant·e

Teacher Profile Image

Aleksandar Cucukovic

Improving lives, one pixel at a time.

Enseignant·e

For the last 10 years i have designed websites, products and apps for different companies, big and small.

With my wife i have started 3 startup companies and through the process met some amazing people from all over the world.

For the last five years i have created over 500 design products, improved the lives and workflows of over 100.000 designers from around the world.

Now my mission is to improve the lives of others, and to pass on my knowledge back to the community and to all those who want to learn about the amazing worlds of design and business.

Thank you for reading and have a creative day!

Alex

Voir le profil complet

Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Introduction du cours: Hey designer et mon nom est Alex et bienvenue dans la classe de partage de compétences sur Adobe XD 2021. Dans cette classe, nous allons couvrir les outils de base d'Adobe XD. Et je vais vous guider tout au mon processus de conception et vous montrer tous les principaux outils et fonctionnalités qu'Adobe XD a à offrir afin que vous puissiez être un meilleur concepteur UX d'interface utilisateur. Je suis un créateur de produits de design et jusqu'à présent j'ai plus de 500 produits que j'ai créés. Je suis aussi créateur de cours et jusqu'à présent j'ai plus de 20 cours et j'ai plus de 30 mille étudiants inscrits à mes cours. Et dans ce cours gratuit Adobe XD, vous apprendrez ce qu'est Adobe XD, comment le télécharger et comment fonctionnent les mises à jour, Mac contre Windows. Et quelle est la différence ? Comment fonctionne l'interface et toutes les fonctionnalités clés de l'interface comme les formes, mental, dex, outil, barre Edwards, Bibliothèques, couches et plug-ins. Nous allons explorer une grille de répétition et ce qu'elle peut faire pour votre conception. Comment vous pouvez utiliser les masques, qui sont des fonctions 3D dans Adobe XD. Comment vous pouvez utiliser des maquettes, quels sont les raccourcis pour améliorer votre vitesse de travail avec différents fichiers et comment pouvez-vous ouvrir différents fichiers et travailler avec eux dans Adobe XD ? Comment pouvez-vous travailler avec des ressources gratuites et quelle est la différence entre les ressources gratuites et premium et pourquoi l'une est meilleure que l'autre. Utiliser des kits d'interface utilisateur pour améliorer votre flux de travail, créer des projets de conception et passer de la création de conception, prototyper votre conception, partager votre conception avec les clients et les développeurs, exporter votre conception, créer un système de conception, création de jetons de conception, création de guide de style, comment créer de superbes présentations. Et enfin, l'avenir des outils de conception. Nous allons couvrir beaucoup de choses dans ce cours gratuit. Donc, si à n'importe quel moment vous voulez accéder aux liens, PDF vous sera fourni. Donc, vous pouvez télécharger ce PDF et vous pouvez simplement cliquer sur les liens et visiter ce dont je parle dans ce cours gratuit afin que vous puissiez suivre votre projet de classe pour ce cours est d'utiliser conseils et les techniques que vous apprendrez de ce pour les appliquer à votre processus de conception. Et je voudrais vraiment que vous créez soit un site Web d'une page ou un écran unique pour l' application en utilisant les conseils et les techniques que vous apprendrez de ce cours et de les télécharger dans les projets de la classe. Adobe XD est l'un des meilleurs outils disponibles pour les concepteurs UI UX croient vraiment que parce que je l'utilise tous les jours. Sur ma chaîne YouTube, j'ai créé un tas de ces différentes vidéos expliquant tout sur Adobe XD, différents outils et techniques. Donc, si vous voulez, vous pouvez également vérifier cela pour l'instant sans plus tarder. Commençons par le cours. 2. Qu': Adobe XD est un outil de conception UI UX créé par Adobe. Vous pouvez concevoir, prototyper, partager et collaborer au sein d'une seule application. Vous n'avez pas besoin de modifier les applications. Vous n'avez pas besoin d'installer des éléments distincts sur votre machine. Vous pouvez tout faire à l'intérieur d'une application. C' est génial parce que c'est gratuit pour commencer. Et vous pouvez commencer simplement en téléchargeant et en installant Adobe XD sur votre machine. Je vais le montrer dans la section suivante. Mais fondamentalement ce que vous pouvez faire dans cet outil, si vous cochez ici et commencez à défiler vers le bas, vous pouvez voir que c'est quatre conception. Ainsi, vous pouvez créer la conception d'applications mobiles. Vous pouvez créer un site Web conçu tableau de bord quel que soit le type de conception UI UX que vous voulez, vous pouvez même créer des gars de style. Vous pouvez voir que vous pouvez prototyper, inclure différentes interactions, inclure différentes animations que vous pouvez partager avec les clients, avec les développeurs, avec vos coéquipiers, tout avec Adobe XD. Et vous pouvez cliquer ici gratuitement pour télécharger et installer Adobe XD. Et c'est de ça que nous allons parler ensuite. 3. Mac Vs Pc: Donc, comme je l'ai dit, Adobe XD fonctionne bien sur Mac et PC. Et la différence cruciale entre ces deux systèmes d'exploitation est leur apparence. Donc, fondamentalement sur les fenêtres, vous avez ce menu hamburger en haut à gauche. Et parce que je travaille sur Windows, je vais vous le montrer dans une seconde. Mais sur un Mac, vous avez plusieurs de ces options simplement pointillées sur la partie supérieure de votre écran. Et c'est vraiment la différence cruciale entre Mac et PC. Et une autre différence est l'enregistrement des prototypes, car Adobe XD a cette fonction où vous pouvez enregistrer vos prototypes et les partager sous forme de vidéo, soit à vos clients, soit vous pouvez les partager sur les réseaux sociaux juste pour créer un plus grand influencé autour de vous. Fondamentalement, la différence cruciale entre Mac et PC est que vous, dans le Mac, vous avez cette option native où vous pouvez simplement cliquer sur Enregistrer et il va l'exiger et vous pouvez cliquer sur arrêter et c'est fondamentalement la fin de celui-ci. Sur les fenêtres, vous devez utiliser leur fonction d'enregistrement de jeu et vous pouvez y accéder en appuyant sur la touche Windows et la touche G, puis vous pouvez démarrer votre enregistrement de cette façon. Je vais aussi le montrer un peu plus tard dans ce cours. Et enfin, ce que je voulais mentionner rapidement, c'est que si vous avez Windows sept Windows, huit Windows gaspiller, Adobe XD ne fonctionnera pas sur votre machine. Vous devez avoir Adobe XD installé sur votre machine de fenêtre Stan. De préférence, si vous pouvez l'installer sur la mise à jour Creator de votre machine Windows, alors cela fonctionnera parfaitement, mais il n'est pas pris en charge par les anciennes versions de fenêtres telles que 78 ou même sagesse. Donc c'est ce que vous devez savoir. 4. Écran de bienvenue: Lorsque vous ouvrez votre Adobe XD, vous êtes redirigé vers l'écran d'accueil et je vais vous montrer ce qu' est la crème de bienvenue et comment elle change au fil du temps. Voici donc l'écran de bienvenue et vous pouvez voir que vous êtes sur l'écran d'accueil ici. Vous pouvez cliquer sur Apprendre et accéder à certains tutoriels de l'équipe Adobe XD. Vous pouvez également cliquer ici pour en savoir plus sur leurs nouvelles fonctionnalités et découvrir certaines techniques de leur équipe. Harbin compétence lance, généralement chaque semaine, nouveaux tutoriels sur Adobe XD et c'est génial si vous voulez, vous pouvez le suivre sur Behance ainsi pour ces flux en direct sur Adobe XD. Fondamentalement, c'est ce que l'onglet Apprendre est, les documents cloud parce que XD est basé sur le cloud généralement, mais vous pouvez également enregistrer des documents locaux sur votre machine si vous voulez appeler des documents, sont tous vos documents qui sont à l'intérieur du nuage. Vous pouvez donc simplement cliquer ici pour y accéder. Les documents partagés avec vous sont partagés avec les clients ou vos coéquipiers. Supprimé, sont tous les fichiers que vous avez précédemment supprimés parce que rappelez-vous que vous avez un espace limité sur la version gratuite d' Adobe XD et que vous avez juste un seul prototype que vous pouvez partager avec vos clients ou parties prenantes. Afin d'avoir plusieurs prototypes en même temps à votre disposition, vous devez passer à une installation payante. Et c'est pour ça que je te montre ça sur un plan gratuit. Vous pouvez voir que je suis sur un plan gratuit car il dit mise à niveau et il dit commencer un plan. Mais je voulais vous montrer que vous pouvez faire toutes ces choses dans la start-up, surtout si vous commencez. Vous n'avez donc pas besoin de payer pour les versions premium dès le début. Vous pouvez tester cet outil. Vous pouvez voir si c'est bon pour vous, si l'interface utilisateur utilisateur est la bonne pour vous, puis si c'est le cas, vous pouvez ensuite procéder et payer pour cet outil. Donc, en descendant la ligne, nous avons géré les liens. Donc, fondamentalement, ce sont les liens que vous avez partagé avec vos clients ou parties prenantes. Et sur votre ordinateur, vous pouvez localiser les fichiers sur votre ordinateur. Ici, vous pouvez voir que les prototypes de conception partagent parce que c'est ce que fait Adobe XD et c'est ce qu'il est. Et en dessous, nous avons quelques aéroports que vous pouvez créer à partir d'ici. Ceux-ci sont préfabriqués nos cartes, et vous pouvez voir pour mobile, nous avons des tailles d'iPhone, nous espérons Google Pixel, iPad, Nexus et ainsi de suite. Ensuite, pour le Web, vous pouvez voir que nous avons 1920 par 1080. Et si je clique ici, vous pouvez voir qu'ils vous donnent ces options recomposées. Si vous voulez les utiliser, nous avons des tailles de médias sociaux. Ainsi, vous pouvez voir que nous avons des articles d'histoire Instagram, en-tête de messages Twitter, Facebook, couverture Facebook, et enfin la vidéo YouTube. Et enfin, nous avons une taille personnalisée. Vous pouvez donc utiliser cette taille personnalisée pour n'importe quelle taille que vous voulez. Vous pouvez entrer la valeur de pixel ici, et vous pouvez simplement cliquer dessus et puis il s'ouvrira comme un nouveau document. Et avec ça, notre taille de port à l'intérieur. Donc, comme je l'ai dit, vous pouvez utiliser l'un de ceux-ci ou vous pouvez simplement entrer une valeur personnalisée ici. Et enfin, nous avons des documents récents. Ce ne sont donc que les documents que vous avez ouverts. Et vous pouvez cliquer ici pour accéder à certains des articles les plus récents de leur blog et de leur post d'aide et ainsi de suite. Comme je l'ai expliqué, une chose à noter est que cet écran de bienvenue va changer au fil du temps. Assurez-vous donc de comprendre que si vous regardez cette vidéo ou ce discours à l'avenir et que vous vérifiez cela et que cela ne ressemble pas à la vôtre, assurez-vous de comprendre qu'ils mettent à jour tout le temps. Mais ce ne sont que les fonctionnalités de base et les outils que vous pouvez attendre ici sur l'écran d'accueil. Donc, pour commencer, je vais juste choisir un, rpart psi iso, peut-être 1920 par 1080. Et je vais l'entrer ici juste pour vous montrer à quoi ça ressemble. Donc c'est un 80. Vous pouvez cliquer sur Entrée ou cliquer ici pour l'ouvrir et l'ignorer. On dirait qu'une fois qu'il est ouvert, laissez-moi l'agrandir un peu. Et nous allons maintenant passer à Adobe XD est des outils et des fonctionnalités et ce à quoi vous pouvez vous attendre. 5. Interface: La beauté d'Adobe XD est qu'il a vraiment simple à utiliser l'interface. Donc, je suis sur une version Windows, comme je l'ai dit, et c'est la différence clé entre Windows et Mac, parce que sur Windows, vous avez ce menu hamburger et vous pouvez accéder à tous vos outils à partir d'ici. Vous pouvez également cliquer avec le bouton droit de la souris sur n'importe quelle partie de votre document pour accéder à certaines fonctionnalités supplémentaires comme celles-ci. Vous pouvez cliquer avec le bouton droit ici. Et puis vous avez des sous-menus que vous pouvez entrer et utiliser certaines des fonctionnalités. Sur Mac, vous allez avoir toutes ces options ici en haut et en dessous. C' est donc vraiment la différence cruciale entre XD sur un Mac et sur un PC. Donc, quand il s'agit d'interface, vous pouvez voir qu'il est divisé en trois parties. Ici, vous avez vos outils, donc vous avez votre outil de sélection pour sélectionner plusieurs choses. Vous avez vos formes ici. Ensuite, vous avez un crayon, textuel, notre outil de tableaux, et enfin l'outil de zoom. Et ci-dessous, nous avons des bibliothèques, nous avons des couches, nous avons des plugins juste ici en haut. Nous avons conçu des prototypes partagent, parce que ce sont les choses qui XD est célèbre par. Et vous pouvez simplement basculer entre ces trois onglets afin d'accéder aux différentes fonctionnalités d'Adobe XD. Enfin, nous avons ce panneau juste ici à droite. Et en fonction de ce que vous faites sur notre planche, en fonction de ce qui est sélectionné, ce panneau droit change constamment. Il a toujours quelques fonctionnalités à l'intérieur pour toutes les choses que vous faites, par exemple, le positionnement et ainsi de suite. Mais il continue à changer en fonction de ce que vous avez sélectionné. Que ce soit des prototypes de conception partagent, si vous travaillez quelque chose ici sur votre port R. Passons maintenant aux formes et je vais vous expliquer quel type de formes vous avez dans Adobe XD et ce que vous pouvez en faire. 6. Les formes: Commençons par les formes et les formes sont situées ici. Et vous pouvez vous voir comment rectangle vous avez des lèvres, vous avez un polygone, et enfin vous avez votre outil de ligne. Et enfin, vous pouvez créer des formes personnalisées en utilisant mental. Mais je vais consacrer un peu plus de temps au manteau lui-même. Donc, pour utiliser n'importe quelle forme à partir d'ici, tout ce que vous devez faire est simplement cliquer dessus pour le sélectionner, puis simplement dessiner sur vos planches. Et dès que vous le faites, vous avez quelques valeurs ici. Alors allons-y un par un et je vais vous montrer quelles sont ces valeurs pour chacune de ces formes. Tout d'abord, dessinons rapidement ces formes pour que je puisse vous montrer comment elles sont toutes des nucléides comme ça. Et j'utilise simplement le clavier v oméga pour utiliser l'outil Sélectionner afin de le positionner. Et enfin, allons de l'avant et créer une forme avec notre mental. Et laissez-moi vous montrer rapidement les différences. Vous pouvez donc voir ici dans votre panneau Calques que vous pouvez masquer en cliquant simplement ici. Nous avons un rectangle, qui est celui-ci, ligne de polygone d'ellipse. Et enfin partie, parce que nous utilisons l'outil plume pour créer cette pièce personnalisée. Maintenant, ce que vous pouvez faire avec toutes vos formes, c'est que si vous sélectionnez une forme, vous pouvez voir tous ces outils à votre disposition ici. Nous avons donc ici des outils de positionnement pour que vous puissiez positionner à n'importe quelle partie de l'aéroport que vous voulez. Nous avons une grille de répétition et je vais expliquer le grade de répétition un peu plus tard plus en détail et ce que vous pouvez en faire. Et puis nous avons des outils de fusion et des opérations booléennes. Donc, fondamentalement, vous pouvez sélectionner deux ou plusieurs de ces portes et vous pouvez ajouter, soustraire, croiser, et enfin exclure, se chevaucher. Et je vous encourage vraiment si vous ne savez pas ce que sont toutes ces choses, à choisir deux ou plusieurs formes et à jouer avec elles et à voir ce que vous pouvez faire. Mais fondamentalement, vous pouvez les combiner en une seule forme ou vous pouvez y ajouter plusieurs propriétés, comme par exemple, contour exclu et plus encore. Si nous descendons, alors nous nous sommes transformés. Vous pouvez changer votre largeur, vous pouvez changer votre hauteur. Positionnement sur les axes x et y, vous avez votre rotation. Donc, si j'entre 45 degrés, par exemple, vous pouvez le voir tourner, mais vous pouvez également passer le curseur ici, maintenez la touche Maj par exemple, et elle tournera par incréments. Ou vous pouvez appuyer sur le contrôle z pour revenir en arrière. Ensuite, nous avons retournement, alors retournez horizontal, retournez vertical. Ci-dessous, nous avons un défilement horizontal. Et je vous expliquerai ça un peu plus tard. Ce que c'est. Nous avons un défilement vertical et nous avons défilement dans toutes les positions. Enfin, nous avons une position fixe lors du défilement. Ainsi, lorsque vous créez des concepteurs de sites Web ou des conceptions d'applications, vous souhaitez que certains éléments soient corrigés dès que l'utilisateur commence à analyser. Donc, c'est pour cela que cela est utilisé et je vais vous le montrer dans des exemples ultérieurs aussi. dessous de cela, comme je l'ai dit, nous avons réactif redimensionner. Et je vais vous montrer un peu plus sur le redimensionnement responsive plus tard aussi. Ci-dessous, nous avons l'obésité. Ainsi, vous pouvez changer l'obésité de votre objet en utilisant simplement ce curseur ou vous pouvez utiliser des raccourcis clavier. Donc, on est pour 10%, pour, est pour le 40%, par exemple, huit est 4800% est pour 100%. dessous de cela, vous avez des modes de fusion et vous avez plusieurs modes de fusion, essentiellement les mêmes que dans Photoshop, Illustrator. Donc, si vous avez déjà utilisé pour la boutique, je vous encourage vraiment à tester ces modes de fusion parce qu'ils fonctionnent presque les mêmes que dans Photoshop, mais ils n'ont pas presque autant de fonctions que dans les arbustes forestiers, évidemment parce que dans xsd, il est simplement rationalisé pour le travail de l'interface utilisateur et de l'UX. dessous de ça. On a un rayon de coin. Donc, pour le moment, c'est 0, mais si vous voulez arrondir les coins, vous pouvez utiliser ces points et simplement cliquer et faire glisser. Et il va arrondir les coins. Et vous pouvez voir, pendant que je fais cela, les valeurs ici changent. Ou vous pouvez simplement entrer manuellement, par exemple, 24, le rayon d'angle et il exécutera vos coins à cette valeur. Vous pouvez également autour des coins de chacun vos coins. Donc, par exemple, je vais appuyer sur 0 et vous pouvez voir en haut à gauche est 0, juste ici. Et tu peux le faire pour tout l'Oregon. Il suffit de coef ici anti 20 et il arrondit sur tous les coins. Ensuite vient la couleur de remplissage. Vous pouvez cliquer ici et vous pouvez changer la couleur de remplissage. Vous pouvez entrer le code hexadécimal ici. Ainsi, par exemple, trois 0s, C6, FF pour un beau bleu. Et vous avez vos valeurs de bordure blanches ici. Mais avant de passer aux frontières, vous pouvez changer du spectre de couleurs. Pourquoi ici vous pouvez changer la lumière ou l'obscurité de votre couleur. Vous pouvez modifier l'opacité de votre couleur. Vous pouvez ajouter du code hexadécimal ou vous pouvez simplement cliquer ici pour enregistrer la couleur sous forme d'échantillon afin de pouvoir l'utiliser plus tard, mais simplement en cliquant dessus. Et cela s'appliquera à n'importe quel objet sélectionné ou dans votre aéroport. Ensuite, si vous cliquez ici, va ouvrir un dégradé linéaire ou un dégradé radial. Et fondamentalement, vous avez ces trois options. Donc, en ce moment, c'est la couleur unie. Si je clique ici, vous pouvez voir que nous avons un gradient linéaire et vous pouvez ajouter autant d'arrêts que vous le souhaitez. Vous pouvez simplement cliquer ici, puis faire pivoter votre dégradé pour passer d'un côté à l'autre. Et enfin, pour chacun de ces arrêts, vous pouvez ajouter une couleur différente ou vous pouvez ajouter une nuance différente de votre couleur. Vous pouvez également cliquer et réduire son obésité comme ça pour chaque couleur individuelle. Mais les gradients radiaux semblent fondamentalement exactement les mêmes, mais c'est inCircle. Mais je vais juste utiliser Carlos solide pour cet exemple pour garder les choses agréables et simples. dessous, nous avons la frontière. Et si je clique ici, vous pouvez voir que la frontière est en train de disparaître. Et si j'augmente la taille, donc par exemple dix, vous pouvez voir maintenant il est augmenté. Vous pouvez également cliquer ici pour changer la couleur de votre bordure. Même histoire, code hexadécimal de l'obésité. Vous pouvez également l'ajouter en tant qu'échantillon ou cliquer ici pour échantillonner une couleur où vous le souhaitez. Et laissez-moi rapidement échantillonné cette couleur bleue comme ma bordure. Mais revenons ici et laissez-moi vous expliquer tout ça. Donc, nous avons la largeur de course, ce qui est fondamentalement ce que vous voyez ici. Ensuite, nous avons le tableau de bord. Et si j'ai dit, je ne sais pas, 50 par exemple, vous pouvez voir qu'il est divisé en ces tirets et l'écart est aussi 50. Mais si j'augmente l'écart à 100, vous pouvez voir maintenant l'écart est beaucoup plus grand entre ces tirets. Vous pouvez toujours descendre à 0 et descendre à 0. Voyez à quoi ça ressemble. Et ici, nous avons différentes options de course. Donc Inner Stroke, notre AVC centre AVC. Et je vous encourage vraiment à le tester et à essayer par vous-même toutes ces options et à voir ce qu'elles font. Suivant. Nous avons bootcamp, bouchon rond et écart de projection. Et cela est vraiment utile si vous voulez avoir des bords arrondis sur vos lignes, par exemple. Ensuite, nous avons M. rejoint autour d'un joint et biseau. Et c'est essentiellement à quoi ressembleront les coins. Enfin, nous avons l'ombre. C' est donc l'ombre de fond de votre forme elle-même. Les solides entrent par exemple, quelque chose de vraiment énorme. Donc 202020, donc c'est l'axe des x, c'est l'axe des y, et c'est la quantité de flou que vous voulez utiliser pour votre ombre. Donc, si je, par exemple, augmente cela, vous pouvez voir qu'il descend sur l'axe y. Si je l'augmente à ici, vous pouvez voir qu'il va à droite sur l'axe des x. Et si je l'augmente jusqu'ici, vous pouvez voir que la valeur de flou augmente massivement à mesure qu'ils augmentent en taille et vous ne pouvez aller qu'à 100. C' est donc à quoi ressemble l'ombre. Et vous pouvez également enregistrer pour la couleur et la bordure. Vous pouvez changer sa couleur. Vous pouvez passer du spectre du carbone, vous pouvez interagir, vous pouvez utiliser l'échantillon de couleur et vous pouvez toujours l'abaisser dans l'obésité à partir d'ici. Enfin, nous avons l'option de flou d'arrière-plan et de flou d'arrière-plan est vraiment utile, mais vous devez avoir deux ou plusieurs éléments pour que cela fonctionne. Laisse-moi changer un peu ça. J' ai donc déplacé le rectangle au-dessus de l'ellipse juste pour que je puisse vous montrer à quoi cela ressemble. Donc, si je suis inférieur à ma quantité, inférieur à ma luminosité, vous pouvez juste commencer à voir le cercle derrière notre rectangle et vous pouvez voir à quoi cela ressemble. Donc, je peux baisser mon montant ou l'augmenter. Je peux augmenter ou diminuer ma luminosité et je peux augmenter ou diminuer mon obésité selon ce que je veux faire. Donc, fondamentalement, c'est comme ça que cela fonctionne et c'est à ça que ça ressemble. Si vous le souhaitez, vous pouvez utiliser le flou d'arrière-plan pour toutes sortes de choses à l'intérieur d'Adobe XD, particulièrement utile pour les images si vous voulez des arrière-plans flous. Si vous voulez utiliser quelque chose comme le morphisme du verre dans votre conception, vous pouvez utiliser cette option avec le flou d'arrière-plan. Enfin, nous avons Mark pour l'exportation juste ici. Et cela est vraiment utile si vous voulez exporter rapidement tous vos fichiers qui sont marqués pour l'exportation, vous pouvez simplement cliquer ici pour le vérifier. Ou vous pouvez toujours aller ici et dire Mark pour l'exportation. Ensuite, vous pouvez exporter rapidement tous vos fichiers qui sont marqués pour exportation ultérieurement pour les concepteurs, les développeurs ou les clients. Donc, si nous en déplaçons un vers le bas, vous pouvez voir que pour toutes ces options, nous avons certaines de ces options. Certains d'entre eux sont les mêmes, certains d'entre eux sont un peu différents. Et enfin, pour celui-ci, je voulais montrer parce que c'est l'outil polygone, qui est cet outil ici. Et vous pouvez partager un combien de coins vous voulez. Donc actuellement, il dit libre, donc c'est un triangle. Mais si je change à cinq, vous pouvez voir à quoi ça ressemble. Si je le change à huit, ça ressemble à ça. Vous pouvez également augmenter ou diminuer la taille de ses formes en maintenant simplement la touche Maj enfoncée et en cliquant dans l'un des coins pour augmenter ou diminuer la taille de votre forme. Comme nous l'expliquons, vous pouvez changer la taille de la frontière. Et enfin, nous avons un rayon de coin ici comme ça. Alors allons-y avec 20. Et vous pouvez voir que tous les coins de chacun de ces quartiers seront arrondis, quelle que soit la valeur que j'ai entrée ici. Enfin, nous avons le ratio étoiles et je ne sais pas, disons par exemple 50. Et vous pouvez voir qu'il crée ces différentes étoiles. Donc, si entrez, disons dix, vous pouvez voir une sorte de rouage ou 70. Donc, il crée ce genre de formes différentes ici. Mais si je vais à 100, va revenir à notre forme originale. Vous pouvez aussi faire ici est tenir comme ça et puis comme ça. Donc plus grand que et puis numéro trois, appuyez sur Entrée et il va créer un cœur, qui est un habitat simple Adobe XD adolescent créé juste pour vous faciliter la vie lorsque vous commencez à créer ces icônes. Donc, fondamentalement, nous avons les mêmes options que nous l'avons toujours fait. Donc maintenant vous pouvez créer, vous pouvez l'ajouter la couleur de remplissage, vous pouvez l'ajouter à la couleur de bordure. Et vous pouvez toujours revenir là où vous étiez auparavant. Vous pouvez donc créer toutes ces différentes options. Donc, par exemple, j'ai clairement trois ans. Je peux aller à ma couleur de remplissage pour quelque chose comme ça. Vous pouvez ajouter votre arrière-plan, ombre, flou d' arrière-plan, et toutes ces options que nous avons expliquées. Enfin, laissez-les rapidement couvrir ces parties de crayon et je vais y revenir en une seconde et expliquer un crayon. Donc, ce que vous pouvez faire avec est exactement le même pour toutes les formes, mais c'est juste une forme personnalisée que vous avez créée en utilisant mental. Et nous allons passer à autre chose et je vais vous expliquer ce qu'est l'outil de stylo maintenant. Ensuite, je vais vous montrer comment vous pouvez éditer formes complexes et comment nous pouvons créer des formes complexes à l'aide d'un crayon. 7. Outil Plume: Donc, comme je l'ai dit, vous pouvez utiliser le crayon pour créer toutes sortes de formes, mais généralement vous utilisez le crayon pour créer ces formes plus complexes comme celle-ci est celle qui est créée par. Allons-y encore une fois. Ainsi, vous pouvez cliquer sur votre crayon et vous pouvez cliquer où vous voulez, et vous avez ces points d'ancrage. Et une fois que vous avez terminé de compléter votre forme, vous pouvez glisser un clic sur l'aéroport et vous pouvez le déplacer où vous voulez. Disons que je veux déplacer celui-ci ici. Et si vous double-cliquez dessus, il deviendra cet arc. Ensuite, vous pouvez changer la façon dont vous voulez que cet arc soit positionné. Et vous pouvez également maintenir la touche Maj pour descendre dans ces incréments si vous le souhaitez. Ainsi, il gardera l'angle de vos points d'ancrage à l'angle que vous voulez. Ainsi, par exemple, 4517918 et ainsi de suite. Donc, vous pouvez le faire pour tous ces, Double-cliquez simplement ou si vous changez d'avis et n'importe quel point, vous pouvez simplement double-cliquer en arrière et il reviendra à droite. Mais ce que vous pouvez aussi faire, nous l'avons expliqué dans les sections précédentes. Vous pouvez changer la couleur de remplissage, la couleur de la bordure, mais revenons en arrière et je vais vous montrer à quoi ils ressemblent. Donc, je vais zoomer de très près et je vais cliquer sur Mon mouton comme ça. Alors allons à la casquette ronde. Et tu ne vois pas ça pour le moment. Mais par exemple, si je clique ici, puis ici, et ici, puis appuyez sur Escape Just pour créer cette ligne. Laissez-moi le sélectionner une fois de plus. Si je fais un zoom avant de très près. Maintenant, vous pouvez voir ceci est à quoi ressemble le bouchon bourgeon. On dirait. Donc, en gros, c'est vraiment plat. C' est à quoi ressemble le capuchon en saillie. Donc c'est vraiment plat, mais ça s'étend là où vous pointez est dans le bouchon de bourgeon, c'est juste au centre, mais ici, dans le capuchon en saillie, c'est juste ici. Donc c'est la différence où est votre point final. Avec une casquette ronde, vous pouvez le voir arrondir votre casquette et il court votre ligne dans votre forme. Donc, vous pouvez vraiment jouer avec ça de cette façon. Fondamentalement, si vous cliquez ici et cliquez autour de l'écart, vous pouvez être sûr que chacun de ces points d'ancrage contient ces majuscules rondes. Ou si vous, par exemple, voulez supprimer l'un d'entre eux, j'aurais pu mettre celui-ci. Vous pouvez voir qu'il contient cette casquette ronde et qu'il est toujours à l'intérieur de cette forme. Donc, comme je l'ai dit, vous pouvez jouer avec tous ces différents paramètres et vous pouvez cliquer et vous pouvez déplacer tous ces points d'ancrage. Et allons avec la couleur de remplissage et ajoutons une couleur de remplissage. Ajoutons une bordure différente. Donnons-lui dix. Donc tu peux voir ce qui se passe. Vous pouvez également cliquer où vous voulez ajouter un nouveau point d'ancrage. Vous pouvez les étendre, double-cliquer et modifier et créer des formes fondamentalement différentes. Si vous souhaitez dessiner à l'aide d'Adobe XD, vous pouvez placer votre esquisse dans Adobe XD. Alors imaginons que c'est la forme que vous créez. Vous pouvez le positionner oreo sketch comme ceci par exemple. Ensuite, vous pouvez baisser l'obésité, puis vous pouvez simplement cliquer sur votre forme et vous pouvez ensuite ajuster tous ces éléments plus tard, ce qui est extrêmement utile si vous travaillez en tant que concepteur UI UX. Si vous créez des icônes, par exemple, et que vous utilisez un stylo et du papier pour esquisser ces différentes icônes. Ensuite, vous pouvez utiliser Adobe XD pour ajuster tous ces éléments et vous pouvez ajuster l'épaisseur de la bordure, 2222 ou tout ce que vous voulez. Et fondamentalement, c'est ainsi que fonctionne l'outil de stylet et à quoi il ressemble dans Adobe XD. 8. Outil de texte: Quand il s'agit de saisir vos attaques plutôt que d'utiliser des textes dans Adobe XD, vous disposez de fonctionnalités exceptionnelles, mais ce n'est pas aussi avancé que quelque chose comme Illustrator ou InDesign, qui est utilisé pour l'impression. Alors vérifions ça. Vous avez des options de texte ici. Vous pouvez également appuyer sur t sur votre mot-clé. Donc, permettez-moi de taper quelques textes aléatoires jusqu'à ce que des idées juste pour que nous ayons du texte sur la page. Et pour que je puisse expliquer ce qui est. Donc, disons que nous avons terminé cela. Et si j'ai sélectionné, vous pouvez voir que nous avons ces options ici. Donc encore une fois, même pour les formes. Nous avons ces options positionnées en haut, nous avons ces options de transformation, retournement, rotation, et scie, redimensionner sans réponse. Et ici, nous avons le panneau de texte, qui est une partie importante de cette taxe. Vous pouvez augmenter la taille de votre texte en plaçant simplement le curseur sur ce point, en cliquant dessus et en faisant simplement glisser. Et c'est une chose vraiment utile à faire si vous voulez positionner votre texte, vous pouvez les utiliser comme un ensemble. Et enfin, passons maintenant au texte afin que vous puissiez choisir votre famille de polices ici. Allons donc avec quatre broches, par exemple, qui est une police de règle libre. Et je vais simplement positionner et au centre, comme ça. Ensuite, ce que vous pouvez faire est d'utiliser la taille. Donc, actuellement, c'est à 47. Vous pouvez utiliser Maj et flèche vers le haut pour sauter entre dix incréments différents de taille 5767 et ainsi de suite. Ensuite, nous avons à quoi ressemblera le poids de la police. Donc, selon la police que vous avez sélectionnée ici, vous pouvez avoir des poids différents. Somme, certains d'entre eux ont un ou deux quelque part ils ont 1020, donc en fonction de celui que vous avez sélectionné. Donc, allons par exemple avec de la lumière supplémentaire, voir comment cela ressemble à de la lumière. Et vous pouvez également utiliser la touche Maj ici aussi. Il suffit de monter ou de descendre et de voir à quoi ressemblent tous ces éléments. Ensuite, ce que nous avons est l'espacement des caractères, et c'est essentiellement l'espacement entre chaque caractère. Donc, si j'utilise ma touche Maj et mes incréments, vous pouvez voir à quoi cela ressemble. Donc, c'est vraiment utile si vous voulez faire ça. Ici, nous avons l'espacement des lignes. Donc espacement entre chacune de ces lignes de texte. Et enfin, ce que nous avons ici, c'est l'espacement des paragraphes, mais je dois créer un paragraphe pour le faire. Mais fondamentalement, il fait presque la même chose que l'espacement des lignes. Ici, nous avons un alignement à gauche de sorte que lorsque vous tapez, il va aller de gauche à droite. Ici, nous avons le centre aligné. Donc, vous pouvez voir à quoi ça ressemble. Et fondamentalement, il va aller du centre vers l'extérieur. Et ici, nous avons écrit alliance. Donc fondamentalement la même chose que la gauche alignée. Ici, nous avons la largeur automatique, donc peu importe ce que vous tapez, Allons avec la ligne gauche pour montrer que peu importe ce que vous tapez. Et quand vous quittez, vous pouvez voir sa largeur automatique. Ici, nous avons la hauteur automatique. Donc, disons, par exemple, que je veux taper quelque chose de plus. Vous pouvez voir qu'il va automatiquement en hauteur aussi. Et enfin, nous avons une taille fixe, qui est le paragraphe dont je parlais. Donc, si je clique ici et l'abaisse, vous pouvez voir que c'est une excellente option si vous avez plein de textes. Et par exemple, si j'ai fait quelque chose comme ça, et je sais qu'il y a plus de texte ci-dessous, je peux toujours cliquer ici. Et ça va me montrer le texte qui est en bas. Ce que nous avons ici est en majuscules. Nous avons des minuscules, casse de titre. Donc, chaque première lettre du monde va être intitulée. Ensuite, nous avons exposant. Permettez-moi donc d'ajouter un nombre à, par exemple. Et quand je clique sur super script, vous pouvez voir ce qu'il fait juste là. Nous avons l'indice. Donc fondamentalement même chose, mais ci-dessous, nous avons souligné. Donc, tout le texte va être souligné et nous avons biffé, donc il va passer par le texte lui-même. Vous pouvez toujours cliquer ici pour le modifier et ajouter ce que vous voulez. Mais fondamentalement majuscules, minuscules, casse de titre. Et laissons-le à ça. Pour l'instant. Ci-dessous, nous avons une apparence de base si même que ce que les formes que nous avons l'obésité. Donc, si un enfant à un mot Mickey va à 20 en mode de fusion de l'obésité, la couleur de remplissage, les couleurs de bordure, l'ombre, arrière-plan, le flou, et Marquer pour l'exportation. Donc fondamentalement toutes les mêmes choses que nous avions à l'intérieur de nos formes. Ensuite, passons à nos conseils d'administration et je vais vous expliquer rapidement ce que sont les aéroports et quels sont les avantages d'utiliser les aéroports plutôt que de ne pas les utiliser. 9. Planches de art: Comme nous l'avons expliqué dans une vidéo de bienvenue précédente, où j'ai dit à propos de nos cartes et où vous pouvez les créer et comment nous pouvons créer toutes ces différentes tailles à l'intérieur d'Adobe XD, il y a aussi une option de plus pour le rpart ainsi. Donc, lorsque vous cliquez ici sur votre gauche, vous allez être présenté avec toutes ces différentes tailles de planches, ce qui est fondamentalement exactement la même que ici sur la page d'accueil. Donc, toutes ces tailles sont situées ici aussi. Mais pourquoi nos conseils sont-ils si utiles ? Et ce que vous pouvez faire avec vos tableaux d'art, gros, vous pouvez cliquer ici. Vous pouvez changer la taille. Alors disons que c'est notre écran principal. Et vous pouvez choisir la taille de votre tableau d'art directement à partir d'ici. Vous pouvez le faire pivoter. Donc, vous pouvez cliquer comme ça ou comme ça. Et disons que je veux changer la taille pour que je ne sais pas. Disons quelque chose comme 2453 pour quelque raison que ce soit, ça va s'étendre jusqu'ici. Vous pouvez également cliquer sur Responsive Resize. Ainsi, lorsque vous commencez à redimensionner, vous pouvez voir comment le texte va agir. Et c'est vraiment utile. Évidemment quand vous faites un design réactif, sur lequel vous allez parler toucher un peu plus tard. Ensuite, vous avez également un manuel que vous pouvez cliquer et décider où vous voulez, redimensionner réactif et comment vous voulez qu'il fonctionne. Ensuite, quand je clique juste là, vous pouvez voir que nous avons un défilement vertical et nous n'en avons pas. Mais vous pouvez également utiliser ces options, que j'ai mentionnées précédemment, sur le défilement horizontal, vertical et le défilement dans toutes les directions. Et j'y reviendrai un peu plus tard. Ensuite, nous avons l'apparence. Donc, si nous cliquons ici, vous pouvez voir que c'est la couleur de votre aéroport lui-même. Tellement moche avec au blanc. Ou vous pouvez le changer à la couleur que vous voulez. Et enfin en dessous que nous avons la mise en page. Donc, si je clique ici, vous pouvez voir que nous avons mise en page ou nous avons carré. Si vous avez votre taille carrée, vous pouvez le changer en heres, taille de grille carrée de huit. Je peux le changer pour dimanche, énorme comme 80. Et vous pouvez voir à quoi cela ressemble s'il est plus facile pour vous d' aligner des éléments sur la grille comme ceci. Ou vous pouvez le sélectionner à partir d'ici. Et puis vous pouvez le changer de carré en mise en page. Et puis vous pouvez jouer avec ces colonnes. Donc, les colonnes sont généralement utilisées pour, pour la conception UI UX parce que vous pouvez aligner les choses deux colonnes différentes, et vous pouvez simplement compter les colonnes, ce qui est vraiment facilement traduit en code parce que les développeurs peuvent facilement comprendre en termes de colonnes, largeur de quelque chose, taille de quelque chose, et ainsi de suite. Donc ici nous avons 12 colonnes et nous avons cette belle 1920 par 1080, taille de notre planche, ce qui peut être vraiment utile pour la conception web par exemple. Donc, si je le choisis, je peux utiliser quelque chose comme huit colonnes. Je peux même le changer à quatre, mais revenons à 12. Et je peux changer la largeur de la gouttière à 60, par exemple, dans la largeur de la gouttière est fondamentalement l'espacement entre ces colonnes et colonnes sont ces bits bleus dans notre cas. Ainsi, vous pouvez modifier la largeur de la colonne, 260, par exemple, pour rendre vos colonnes encore plus étroites. Et vous pouvez modifier différentes marges. Les marges sont donc l'espacement entre ces colonnes. Donc, ici, à gauche et à droite, vous pouvez les changer automatiquement. Donc, par exemple, si je tape 200 et vous pouvez voir les marges sont maintenant vraiment énormes, mais vous pouvez aussi aller ici et changer différentes marges. Donc, si je survole, vous pouvez voir que nous avons marge, haut, marge, droite, bas et gauche. Vous pouvez également utiliser la valeur par défaut. Donc, si nous cliquons ici, c'est l'option par défaut, ou vous pouvez faire par défaut. Donc, si nous, par exemple, faisons ces changements, 6060, et utilisons ceci comme un 60 par exemple. Et nous voulons faire cela comme notre défaut. Vous pouvez simplement cliquer sur Rendre par défaut. Vous pouvez également lui donner un nom et il va faire une option par défaut pour cela. Enfin, si vous pensez que ces colonnes sont trop distrayantes, vous pouvez cliquer ici et vous pouvez abaisser l'obésité de ces colonnes afin qu'elles ne soient pas trop distrayantes à regarder et vous pouvez toujours afficher votre contenu à l'aise. 10. Bibliothèques: Les bibliothèques sont un atout exceptionnel dans Adobe XD car vous pouvez rapidement organiser tous vos fichiers, toutes vos couleurs, tous vos styles de personnages et bien plus encore dans un seul espace où vous pouvez facilement naviguez et vous pouvez accéder à tous ces fichiers en même temps. Donc, il est juste ici. Et si nous cliquons dessus, vous pouvez voir que vous pouvez ajouter des couleurs, vous pouvez ajouter des styles de caractères, et vous pouvez ajouter des composants. Laissez-moi vous montrer rapidement comment ça marche. Alors nous allons dupliquer. Ils frappaient le contrôle D et quand le chlore descend à 40, par exemple. Et passons du moyen à la lumière. Changons aussi la couleur pour ce noir vraiment foncé. Et changeons cela à une couleur plus claire ou encore mieux, utilisons quelque chose de complètement différent. Solitudes, divulgation, par exemple, et laissez-les cuisiner ici et là pour cacher mes guides. Donc, ce que vous pouvez faire à partir d'ici, c'est pour les couleurs que je peux cliquer ici, et je peux ajouter la couleur de mon texte comme échantillon de couleur. Et je peux aussi faire la même chose pour décimal. Pour les styles de personnages, je peux faire la même chose. Alors cliquez ici, puis ajoutez-le à ici. Donc parce que nous avons ceci et laissez-moi le supprimer. Comme ça, allons-y et changeons ça. Alors faisons un clic droit sur celui-ci. Frappe, supprime, comme ça. Donc maintenant, nous avons juste ce 157 et je vais aussi faire la même chose à partir d'ici. Donc on n'a plus cet indice. Donc, je peux cliquer ici et cela a ajouté, mais il a aussi ajouté. Donc, je peux toujours cliquer sur l'un de ces et appuyer sur supprimer ici. Et le troupeau laitier, en gros. C' est ainsi que vous ajoutez des couleurs. Ce Hj que vous aviez appelé styles de personnages, et vous pouvez le faire pour chaque forme unique. Donc, utilisons ceci par exemple, et utilisons ceci. Et supprimons la bordure par exemple. Et vous pouvez simplement cliquer ici pour ajouter cette couleur. Vous pouvez également double-cliquer ici et l'appeler, par exemple, route principale, appelé ce bleu principal par exemple. Comme ça. Et appelons ceci et la couleur du texte ou du texte principal ou autre. Et c'est vraiment utile à faire si vous faites affaire avec des développeurs plus tard, parce que Dan, vous pouvez créer ces jetons et cela va être facilement accessible pour eux. Maintenant, en termes de composants, disons que, par exemple, je voulais dupliquer cela, appuyez sur le contrôle D den Shift Alt et faites un clic gauche sur ma souris. Et je vais changer. Et par exemple, utilisons ces deux-là. Et au lieu de cela, créons quelque chose comme ça. Et aussi si je clique dessus, par exemple, peut-être que je peux le changer à 20. Et disons que c'est notre icône ou notre logo ou quoi que ce soit. Et je peux aller à ma palette de calques, double-cliquer ici et l'appeler logo, juste par exemple. Et ce que vous pouvez faire, c'est que vous pouvez cliquer ici pour l'ajouter en tant que composant. Vous pouvez également cliquer ici pour l'ajouter en tant que composant. Mais vous pouvez appuyer sur la touche Contrôle ou Commande votre clavier et vous pouvez l'ajouter en tant que composant. Donc, par exemple, si vous voulez créer un nouvel aéroport, et disons que nous voulons créer celui-ci. Vous pouvez cliquer quand votre logo, faites-le glisser et déposez-le ici. Et vous pouvez voir qu'il s'agit d'une instance d'un composant car il vous donne ce diamant creux que vous pouvez voir ici. Et parce que c'est notre composant principal, vous pouvez voir qu'il est rempli. Donc, si nous les prenons et les amenons ici côte à côte, vous pouvez clairement voir la différence. Supprimons celui-ci. Appuyez sur Contrôle 0 pour rétablir l'emplacement et l'espace, puis cliquez avec le bouton gauche pour naviguer. Donc, si nous cliquons ici, vous pouvez voir qu'il est rempli et c'est vide. Donc, ce que cela signifie essentiellement, c'est quand vous êtes le diamant est rempli, travaillez avec le composant principal et quand votre diamant est creusé, travailler comme une instance de ce composant principal, ce que cela signifie essentiellement en anglais simple, quels que soient les changements que vous créez et que vous effectuez le composant principal, ils vont automatiquement se traduire le composant enfant ou ce diamant creusé dans ce cas. Par exemple, si vous n'avez pas touché du tout les composants enfants, alors quelle que soit la modification que vous apportez au composant principal va se traduire automatiquement au composant enfant. Mais par exemple, si vous remplacez ces changements, si dans notre cas, par exemple, disons que peut-être si je double-clique ici, comme ça, et le change à dix ou même 0. Ensuite, je saute ici, double-cliquez à l'intérieur pour entrer ma forme et passe à 50. Vous pouvez le voir mis à jour ici, mais pas ici. Il a été mis à jour dans le composant principal, pas dans le composant enfant, car nous avons modifié manuellement cette valeur en composants enfants avant de le faire dans le composant principal. Vous pouvez donc imaginer que vous pouvez le faire pour tout votre travail dans Adobe XD. Imaginons donc que vous, par exemple, avez créé une navigation pour votre site Web. Et en tant que composant principal, vous l'avez en tant que tel. Mais en tant que composants enfants, disons que vous avez sélectionné des éléments dans votre navigation. Donc, il ne va pas changer dans le composant principal, mais il va changer dans un composant enfant. Mais dans le composant enfant, vous n'avez pas changé la couleur d'arrière-plan, par exemple. Ainsi, vous pouvez rapidement sauter dans le composant principal, changer la couleur d'arrière-plan va mettre à jour tous vos composants enfants. Et vous pouvez avoir autant de composants enfants que vous le souhaitez. Dans ce cas, je n'en ai qu'un pour montrer à quoi cela ressemble. Et disons que par exemple, dans le composant principal de navigation de la dette, vous voulez changer le style de caractère. Par exemple, vous souhaitez mettre à jour la famille de polices. Vous souhaitez mettre à jour la taille de la police. Peut-être que vous voulez mettre à jour la couleur de la police. Vous pouvez le faire dans le composant principal et il sera mis à jour dans l'ensemble de vos composants enfants. Peu importe le nombre de composants enfants que vous avez, juste imaginé, changements que vous apportez à ses composants enfants ne vont pas se traduire dans vos composants principaux, mais ils vont se traduire dans l'inverse. Donc, du composant principal aux composants enfants. Revenons vite à ici et laissez-moi vous expliquer un peu plus. Ainsi, vous pouvez voir sur ce composant principal, nous avons cette couleur rouge sélectionnée. Mais si je sélectionne cette couleur, par exemple, elle va être mise à jour. Composant enfant aussi. Et rendons cela un peu plus intéressant. Tenons notre ancien cube ou MAC en option. Mec, je peux faire un autre composant enfant. Donc, vous pouvez voir que ces diamants creux ne changent pas. Donc, fondamentalement, vous avez rempli ou vous avez tendu et c'est fondamentalement tout. Donc, disons que sur celui-ci, je peux sauter à l'intérieur, double-cliquer et je peux le changer en bleu. Alors mettons-nous à jour celui-ci pour lire. Mais ce bleu ne va pas changer car il est remplacé l'intérieur de ce composant enfant plutôt que dans ce composant principal. Donc, fondamentalement, vous pouvez voir à quoi ressemblent ces composants, comment ils fonctionnent, et ils sont vraiment utiles, surtout si vous travaillez avec, disons des icônes. Si vous travaillez avec des éléments complexes tels que la navigation. Parce que, par exemple, vous pouvez créer différents styles de composants et vous pouvez créer différents éléments. Nous sommes des composants, et ensuite vous pouvez passer à partir de là. Vous pouvez également créer quelque chose qui est appelé états de composant. Et cela signifie essentiellement que lorsque vous passez au prototypage plus tard, comment ce composant va changer. Laissez-moi vous montrer cela dans un vrai exemple. Donc, ici, nous avons ce composant et disons que je veux créer un état différent, par exemple, pour l'état de vol stationnaire. Donc, je peux simplement cliquer ici et ajouter un nouvel état ou un état de survol. Dans notre cas, je veux juste créer des données de cheval et je vais expliquer tous les états un peu plus tard dans le cours, un peu plus de détails. Mais pour l'instant, nous allons juste explorer rapidement les états Horace, juste pour que vous puissiez comprendre comment tout cela fonctionne. Donc, ici, nous avons des états de vol stationnaire. Une fois de plus, vous pouvez cliquer ici un état de clicker et modifier. Vous pouvez également le changer. Donc, par exemple, survolez. Et à l'intérieur de l'état d'horreur, ajoutons une bordure, ou ajoutons une ombre d'arrière-plan, ajoutons quelques éléments. Cliquez donc sur l'ombre. Apportons une taille ridicule ou 202020. Donc quelque chose de vraiment énorme comme ça. Et si je vous ramène à mon panneau Calques, vous pouvez voir lorsque vous cliquez ici, vous pouvez changer d'état de vos composants. Mais si vous cliquez ici, vous pouvez voir que vous avez également ces états de composant. Et ici aussi. Comme nous n'avons pas inclus d'états de composant auparavant, nous l'avons modifié et inclus dans notre composant principal, nous ne l'avons pas inclus dans nos composants enfants. Donc, une fois de plus, quel que soit le changement que vous apportez à votre Mink et cela va se traduire en composants enfants. Donc, nous sommes ici à l'état par défaut. Et si je clique ici, et juste pour prévisualiser ces changements, et si un survol rapide, vous pouvez voir qu'il change et qu'il se met à jour en temps réel. Mais aussi, vous pouvez planer ici. Et vous pouvez voir que cela change parce que nous avons fait ce changement ici. Et il met également à jour la même chose qu'avec le composant principal. Mais parce que nous avons ce rayon de coin ici, nous ne l'avons pas ici dans ces deux composantes. Lorsque je survole, vous pouvez voir qu'il se met à jour et nous donne ce changement parce que nous l'avons fait dans le composant principal. Donc, c'est fondamentalement tout pour les composants. Vous pouvez jouer avec eux. Vous pouvez ajouter différents états. Je vais vous expliquer qu'un peu plus tard dans ce cours, ce que vous pouvez faire avec ces composants, et ce sont la bibliothèque recherchée une fois de plus, si je vous ramène ici, vous pouvez voir que nous avons des couleurs. Vous pouvez avoir autant de couleurs que vous voulez. Styles de caractères. Vous pouvez en avoir autant que vous le souhaitez. Vous pouvez également cliquer ici pour changer entre GridView analyste vous, peu importe ce qui est plus facile pour vous. Peut-être que cette vue est beaucoup plus adaptée si vous avez plusieurs icônes, plusieurs abaissements, et ainsi de suite. Et vous pouvez également développer ce panneau pour vous donner un peu plus d'espace. Et vous pouvez toujours le cacher en cliquant simplement ici. Donc, ce n'est pas sur votre chemin. Et vous pouvez le faire aussi bien pour les bibliothèques, les couches et les plug-ins. Vous pouvez également rechercher un élément de document. Ainsi, par exemple, le logo. Ici, c'est. C' est donc beaucoup plus facile à trouver, surtout si vous avez des centaines d'icônes différentes. Disons que par exemple, j'ai 50 icônes de recherche différentes. Je peux taper la recherche, puis je peux trier entre ces icônes de recherche ici dans cette liste, plutôt que de faire défiler vers le bas et de rechercher entre toutes les icônes de mart. Enfin, vous pouvez avoir des ressources documentaires ici. Donc si je reviens, ça va t'emmener aux bibliothèques. Et ce sont les acides de documents. Donc, tous les actifs de notre document, que vous pouvez voir ici. Vous pouvez également créer une My Library, qui vous mènera vers le cloud. Et vous pouvez créer votre bibliothèque, par exemple, avec des images personnalisées, des couleurs personnalisées, des polices personnalisées, des icônes personnalisées, et bien plus encore dans le cloud. Et vous pouvez simplement cliquer là avec ma bibliothèque va tirer vers le haut leur bibliothèque à partir du nuage. vous pouvez simplement faire glisser et déposer les éléments du nuage directement sur votre document. C' est donc une grande fonctionnalité et avantage d'avoir lu ces bibliothèques en ligne. Fondamentalement, si vous êtes sur un forfait gratuit, vous avez cet accès aux bibliothèques en ligne, mais votre espace est limité. Si vous avez le forfait premium, vous disposez d'un espace illimité. Ainsi, vous pouvez avoir autant de fichiers que vous le souhaitez sur le cloud. 11. Calques: Lorsque vous travaillez en tant que concepteur UX d'interface utilisateur, il y a de fortes chances que vous ayez un tas de couches différentes. Une gestion de couche est vraiment important d'avoir comme une compétence, mais comme une sorte d'habitude, Guth habitudes d'avoir. Parce qu'à mesure que vos projets grandissent, mesure qu'ils s'agrandissent, la quantité de couches va être énorme. L' organisation des couches est donc vraiment une grande compétence à avoir en tant que concepteur UX d'interface utilisateur. Alors laissez-moi vous montrer dans un WASD, les couches sont situées juste ici. Ici, je n'ai qu'un projet pour ma chaîne YouTube et vous pouvez le vérifier. Je vais laisser le lien pour que vous puissiez aller le vérifier là-bas et voir comment j'ai créé ceci si vous voulez le créer pour vous-même. Mais les couches sont situées juste en dessous sur les bibliothèques. Et la même histoire pour les bibliothèques que vous pouvez cliquer pour afficher et cliquer pour les masquer. Vous ne pouvez pas voir de couches avant de sélectionner l'aéroport. Donc, si je sélectionne ce sont plus, par exemple, vous pouvez voir toutes ces couches ici. Permettez-moi donc de zoomer un peu plus près et d'expliquer ce qui se passe, par exemple, dans ce texte. Donc ici, j'ai le titre, j'ai l'Air Max, qui est ce texte ici, et j'ai ce masque, et nous allons retoucher les masques un peu plus tard. Vous pouvez sélectionner tous ces éléments, par exemple. Donc, si je vais d'ici à ici, maintenant la touche Maj et en appuyant sur Contrôle ou Commande G, pour que je puisse les regrouper en un groupe. Je peux double-cliquer ici et changer le nom de ce groupe en site Web par exemple. Et puis vous pouvez organiser vos couches en lourd. organiser en groupes est vraiment utile parce que si je suppose juste un peu, vous pouvez voir que j'ai un groupe pour ma navigation. À l'intérieur de ce groupe, j'ai trois articles et j'aime toujours passer de gauche à droite parce que la majorité de la population mondiale lit de gauche à droite. Donc donc une ont cette organisation. Donc, je vais du logo, qui est sur la gauche, recherche en haut à gauche, puis Menu. Tu n'as pas besoin d'avoir une organisation comme ça, c'est comme ça que je fais les choses. C' est vraiment à vous de choisir et comment vous voulez structurer vos couches. Mais j'aime les faire de cette façon. Donc vous pouvez voir que je les ai mis dans un groupe parce que c'est beaucoup plus facile de cacher ce groupe. Vous pouvez simplement le faire en cliquant ici. Si vous voulez, par exemple, repositionner certains de ces éléments et que vous ne voulez pas que cette navigation soit obstrueuse et qu'elle soit en place. Vous pouvez également le verrouiller afin de ne pas le déplacer. Donc, si je clique ici, vous pouvez voir qu'il reste en place et vous pouvez également le marquer pour l'exportation. Ainsi, vous pouvez cliquer ici et vous pouvez l'exporter plus tard si vous le souhaitez. Vous pouvez aussi laisser des objets en dehors des groupes, comme je l'ai fait ici. Mais vous pouvez les mettre, Par exemple, J'ai un groupe et notre élément, Je peux frapper le contrôle z et les mettre dans un groupe séparé. Donc, c'est vraiment à vous de choisir comment vous voulez structurer vos éléments. Vous pouvez, par exemple, diviser également la page deux. Partie supérieure, partie centrale, partie inférieure. Vous pouvez combiner vos éléments de cette façon. C' est donc à vous de choisir la façon dont vous souhaitez structurer vos éléments à l'intérieur du panneau des calques. Vous pouvez également réorganiser certains d'entre eux afin de sélectionner un groupe, par exemple en le glisser-déposer sous certains éléments. Et vous pouvez aussi le faire pour les éléments. Vous pouvez le mettre jusqu'ici et vous pouvez appuyer sur control z autant de fois que vous le souhaitez pour organiser toutes vos couches. C' est essentiellement ça pour les couches. Mais ils sont vraiment importants. Et je ne peux pas souligner assez combien c'est important, surtout si vous commencez, apprenez à nommer vos couches parce que vous allez être rapidement pris en charge dans ce moment où vous ne savez pas ce que c'est parce que vous l'avez fait, nommé correctement. Et maintenant, vous devez envoyer le fichier à votre client au lieu de perdre des heures à la fin, juste pour renommer vos calques, pour le renommer à mesure que vous vous déplacez, ou au moins essayer de les placer dans un groupe et renommer un groupe. Donc, lorsque vous envoyez un fichier au développeur, développeur sera facilement en mesure de comprendre ce qu' est tout et où tout se trouve sur la page. 12. Plugins: Plugins sont vraiment utile chose à avoir dans Adobe XD parce qu'il élargit les oeufs ces fonctionnalités et va de retour en arrière et loin des bases. Et vous pouvez vraiment faire des choses vraiment avancées dans Adobe XD en utilisant des plug-ins. Donc, les plugins sont situés juste ici. Sur la gauche, vous pouvez cliquer ici. Et il va vous montrer la liste des plug-ins actuellement installés. Maintenant, ce ne sont que des plug-ins d'esprit. Si vous installez simplement Adobe XD, cette liste sera vide. Vous devez donc commencer à installer des plugins sur votre machine. Et pour ce faire, vous pouvez simplement cliquer sur cette icône plus juste ici. Il va vous emmener ici et ici vous pouvez découvrir, naviguer et gérer. Si vous cliquez sur Gérer, vous pouvez évidemment voir tous vos plugins existants et vous pouvez mettre à jour le kit. Tout. Dans mon cas, j'ai ces deux qui doivent être mis à jour pour que vous puissiez naviguer. Et disons que je veux, je ne sais pas, inclure un texte. Et vous pouvez appuyer sur Entrée. Et vous pouvez voir tous ces différents plugins de texte que vous pouvez utiliser pour augmenter et améliorer votre vitesse ou comment lorem ipsum dans mon cas, que je vais vous montrer. Mais c'est essentiellement ainsi que fonctionne la fonctionnalité de navigation. Et découvrir est vraiment génial parce que vous avez le choix de l'éditeur, vous avez saut-start votre design. Alors collection future, quelle datation que tous les designers devraient avoir situé juste là. Ainsi, vous pouvez le vérifier ou vous pouvez créer vos propres listes. Cela dépend vraiment de ce que vous faites parce que les plugins j'utilise pour moi-même ne seront peut-être pas morts utiles pour vous. Ici, nous avons des plugins essentiels. Donc, document chat, cartes fantaisie, listes, plug-in et pépins. Je recommande vraiment d'utiliser des cartes fantaisie parce que vous pouvez, par exemple, installer une carte rapide juste là. Et il va extraire des informations de Google Maps et il va s'intégrer très facilement. Vous pouvez connecter XD à votre application préférée. Donc, si vous utilisez les craintes de scories dans Dropbox, etc., vous pouvez le connecter. Nous avons des collections, des plug-ins d'esquisse si vous faites du filage, par exemple, des tests de rédaction et de localisation et de convivialité. Donc, pour toutes ces différentes fonctionnalités et vous pouvez également parcourir les catégories. Ainsi, les outils de collaboration et l'automatisation, la convivialité et les tests, éditeur manipulé et conçu des actifs. Donc, disons que je veux cliquer sur le design car il va me montrer différents plugins qui sont dans la catégorie des actifs de conception. Ou je peux simplement cliquer ici et chercher entre ces différentes catégories ou chercher directement à partir d'ici. Fondamentalement, lorsque vous installez un plugin. Donc, disons que je veux utiliser cette interface utilisateur et que je peux cliquer dessus pour l'installer. Vous pouvez lire l'avis ou vous pouvez cliquer sur le plugin, vous pouvez voir ce qu'il fait. Vous pouvez voir tous ces exemples différents. Et vous pouvez voir les balises, ce qui est nouveau, SO mises à jour, évaluation. Vous pouvez voir qui l'a fait et bien plus encore. Donc, c'est fondamentalement tout. Comment pouvez-vous utiliser un plug-ins de mise à jour où ils se trouvent ? Et explorons maintenant quelques plug-ins. Donc ici, j'ai ce texte. Et disons que je veux éditer ce texte. Mais disons que je viens de le créer et que je ne sais pas quoi inclure. Osez, Ce que je peux utiliser est d'utiliser un plugin appelé Lorem Ipsum par exemple. Vous pouvez simplement sélectionner votre texte. Cliquez ici. Sentez le texte de l'espace réservé. Vous pouvez choisir ce que vous voulez d'ici. Et voyons voir. Et avec le signe de ponctuation, disons point, Inclure les sauts de ligne, vous pouvez décocher qui sont cochés à ce que vous voulez. Hauteur de la zone de texte ajustée pour s'adapter au texte inséré. Et j'ai deux lignes de texte, alors appuyez sur insérer, et il va insérer ce texte. Vous pouvez l'essayer à nouveau. Vous pouvez sentir le texte de l'espace réservé derniers paramètres, lorem rapide ipsum, lorem rapide, ipsum, hauteur de coupe, et bien plus encore. Donc disons que je veux avoir ma taille fixe. Disons que je veux l'augmenter jusqu'ici. Et par exemple, pour entendre, peut-être sentir avec le texte de l'espace réservé. Maintenant, il se remplit de texte. Vous pouvez également le couper trop haut aussi. Vous pouvez également faire une taille fixe. Tu peux faire comme ça. Et par exemple, j'ai besoin de plus de texte, alors je peux rapidement lorem ipsum va le remplir. Peut-être que je peux l'étendre un peu plus vers le bas à quelque chose comme ce lorem ipsum rapide va se sentir dans. Donc, c'est fondamentalement comment lorem ipsum fonctionne et comment fonctionne ce plug-in concret. Mais disons que tu veux, je ne sais rien d'autre. Ainsi, par exemple, nous avons ces faces d'interface utilisateur. Maintenant, annulons rapidement cela quelques fois. Alors annulez ceci à mon premier réglage original, qui était ceci. Donc, disons qu'un, j'ai besoin d'une interface utilisateur ici, peut-être une icône d'interface utilisateur, peut-être certains, notre pneu ou autre chose. Sortons rapidement de cette information. Donc quelque part par ici, disons que je veux inclure un visage d'une personne à l'intérieur. Je peux aller à quelque chose comme des visages d'interface utilisateur. Et je peux prendre ma source des États-Unis, béni par exemple, vous pouvez aller à Filters Entertainer. Je veux inclure une femme de, voyons, je ne sais pas, 30 à 40 ans et l'émotion est heureuse. Et tout ça, c'est une aide. Vous pouvez également aller à Avancé et disons appliquer au hasard sont des photos sélectionnées. Je choisirai d'appliquer au hasard. Ça marche en arrière-plan. Et après il scanne le site Web pour mes tâches spécifiques parce que je faisais confiance pour me trouver une femme dans cette certaine démographie. Vous pouvez voir qu'il a trouvé cette image libre de désintéressé. Et vous pouvez également le faire pour des images supplémentaires. Donc disons que je veux créer, je ne sais pas, deux ou plus. Donc, disons que je veux supprimer rapidement celui-ci. Allons vite à ici. Vous pouvez également utiliser la grille de répétition, mais je vais expliquer un peu, créer un peu plus tard. Et disons, je veux le remplir, dans ces trois filtres à rougir. Disons 230, je ne sais pas, mâle et femelle et appliquer au hasard faire travailler sa magie. Et évidemment, plus vous avez d'images à remplir, cela prendra plus de temps. Évidemment, votre vitesse de connexion Internet est prise en compte ici. Et ce qui a été fait depuis, vous pouvez voir ce qu'il fait ici. Ici, nous avons trois femelles, et j'ai aussi choisi un mâle. Donc disons que je veux que ce soit un homme et que je peux cliquer dehors. Ensuite, décochez la case Femme, cliquez sur Appliquer au hasard. N va appliquer un visage masculin aléatoire juste ici à cette image dès qu'elle est trouvée, les critères correspondants juste là. Donc là, vous l'avez. Ce sont les plugins. Et vous pouvez évidemment jouer avec ces différents plug-ins. Vous pouvez installer Combien d'entre eux que vous voulez. Vous pouvez voir que j'en ai juste quelques-uns ici, mais vous pouvez imaginer que vous pourriez avoir une liste de plugins ici. Et vous pouvez faire défiler vers le haut et vers le bas et essentiellement rechercher ces différents plug-ins et les appliquer. Et enfin, découvrez les plugins. Je peux aller à Gérer les plugins. Et disons que je veux supprimer ce potier, par exemple, parce que comme vous pouvez le voir, il continue d'apparaître ici. Je peux frapper une installation de 100. Il va le désinstaller. Et vous pouvez voir automatiquement, nous ne pouvons plus les voir ici. Donc, fondamentalement, les portes sont des déploiements et c'est vraiment à vous, le concepteur, comment vous allez utiliser ces plugins. Vous pouvez, par exemple, utiliser simplement lorem, ipsum et maps. Vous pouvez utiliser ceci, ce que nous utilisons des faces d'interface utilisateur pour ces phases pour générer ces avatars aléatoires, vous pouvez utiliser quelque chose comme une bordure blanche, ce qui est vraiment incroyable. Vous pouvez également utiliser différents plugins qui vont être en mesure de vous fournir différentes mises en page déjà pré-créées. Vous pouvez donc simplement glisser-déposer ces mises en page à l'intérieur de vos tableaux et commencer à créer des designs de cette façon. C' est vraiment à vous de décider comment vous allez utiliser ces plug-ins et plug-ins loose est toujours en expansion. Tout le monde peut créer un plug-in pour Adobe XD. Alors assurez-vous de toujours vérifier. Assurez-vous de suivre la vapeur d'Adobe XD sur Twitter, par exemple, lorsqu'ils lancent de nouveaux plug-ins, qui sont vraiment cool et qu'ils pensent que de plus en plus de gens devraient les connaître. Ils publieront toujours sur Twitter, par exemple, et sur leur page Facebook. Alors assurez-vous de tomber là-dedans pour tous les derniers plugins et nouvelles sur les plug-ins. 13. Grille de répétition: Répéter la grille est cet outil incroyable dans Adobe XD, qui est capable de couper court toutes ces tâches ennuyeuses d'un des éléments répétitifs. Donc, au lieu de copier et de coller différents éléments, puis de les positionner au-dessous de l'autre, vous pouvez simplement utiliser une grille de répétition pour effectuer ces tâches fastidieuses. Donc ici nous avons ce design et je commence avec un filaire. Et disons que je veux créer une liste de ces hôtels populaires. Tout d'abord, nous allons rapidement nous débarrasser de certains de ces éléments et je vais les déplacer dans un groupe. Alors contrôle g. Et puis je peux simplement les déplacer vers le bas. Et débarrassons-nous de ça. Donc, disons que je dois remplir cet espace et que je dois inclure quelques informations supplémentaires. Ce que je peux faire est simplement sélectionner ceci et appuyer sur la grille de répétition. Ce que c'est ce que ça va être, permettez-moi de faire, c'est d'augmenter la quantité de tous ces éléments différents. Disons que je veux en créer deux. Et je veux les aligner à gauche avec ceux-ci juste ici en bas. Et disons que je veux créer un trois ou quatre autres, par exemple, quelque chose comme ça. Et fondamentalement, c'est à quel point il est facile de répéter une grille de travail. Et puis si vous avez vos fichiers texte, que vous, alors vous pouvez facilement glisser-déposer un texte à l'intérieur et vous pouvez facilement le changer. Laissez-moi vous montrer rapidement comment ça marche. Disons que je veux créer un fichier texte. Alors laissez-moi rapidement en créer un sur mon ordinateur et l'appeler, par exemple, les villes. Et c'est à ça que ça ressemble. J' utilise simplement le Bloc-notes sur Windows. Vous pouvez utiliser l'option par défaut sur Mac. Et vous pouvez voir que nous avons Honolulu nous, disons que je veux utiliser celui-là. Mais je veux aussi utiliser un Londres, Royaume-Uni, Paris, France, Italie. Et donnons-en deux autres, par exemple, à Belgrade, en Serbie, et disons à Montréal, au Canada. Disons que c'est tout ce que nous avons créé. Et maintenant, comment pouvez-vous réellement utiliser ce fichier dans d'autres BSD vraiment rapidement. Donc ce que je vais faire, c'est fermer, frapper sauver. Et je vais simplement le faire glisser de mon bureau. Comme vous pouvez le voir, je l'ai appelé Cities et je l'ai simplement placé sur le premier parce que je ne veux pas qu'il le place juste ici. Je voulais le placer sur le premier parce que nous avons créé une grille de répétition à partir de ce premier. Donc, vous pouvez fondamentalement ici et vous pouvez le voir automatiquement mis à jour tout au long de ces. Vous pouvez donc avoir autant de documents que vous le souhaitez. Vous pouvez avoir fait, par exemple, pour les noms masculins, noms féminins, villes, pays, différentes références alimentaires, des recettes partout où vous faites dans Adobe XD, vous pouvez avoir différents fichiers pour la dette, différents decks. Vous pouvez également générer cela sur le web. Vous pouvez utiliser des sites Web aléatoires et vous pouvez générer cette information qui va être vraiment utile parce que alors vous pouvez créer un véritable site Web à la recherche, des applications réelles, nous sommes à la recherche de tableaux de bord vraiment rapidement parce que vous avez tous ces fichiers déjà préparés. Donc disons que je veux au lieu d'appeler cette vue sur l'océan et quoi que ce soit, disons que je veux en créer une autre pour, voyons, je ne connais pas de gens. Et je vais appeler les gens. Et vous pouvez voir si je double-clique, j'ai appelé ça des gens. Disons que je veux leur donner des noms. Jack, Mary n'importe pas, Mark. Stephanie, Jude, les analystes disent Graeme. Et maintenant que j'ai terminé tous ces noms, ce que je peux faire est de frapper de près et je peux localiser les images sur mon ordinateur, que je veux inclure à l'intérieur. Ou vous pouvez utiliser un outil aléatoire. Disons que je veux les inclure ici et aller aux faces de l'interface utilisateur, aller aux pixels cette fois. Et allons-y avec des filtres masculins et féminins. Et disons qu'ils sont tous heureux et cliquez sur Appliquer au hasard. Ce plugin va fonctionner sa magie, mais vous pouvez aussi faire la même chose à partir de votre ordinateur. Donc je vais vous montrer ça aussi. Donc, vous pouvez voir qu'il a rempli avec toutes ces différentes images. Mais comme je l'ai dit, vous pouvez le faire pour, disons mâle. Et voici quelques-unes de ces images pré-préparées. Et je peux simplement glisser et déposer Combien de ces images je veux. Disons que j'en ai six. Je peux sélectionner six images différentes, et je peux simplement les glisser et les déposer depuis mon ordinateur. Permettez-moi d'élargir cela une seconde. Donc six d'entre eux, je peux simplement cliquer, faire glisser et déposer dans le premier. Et il va remplir avec ces six images. Donc, comme vous pouvez le voir, la grille de répétition est vraiment extrêmement utile. Et quand vous travaillez avec différents composants, vous pouvez voir que j'ai décoloré sélectionné, peut-être que je veux éditer ce savant. Je peux cliquer avec le bouton droit de la souris et je peux simplement aller à Modifier. Et disons que je veux utiliser une version bleuâtre de ça. Vous pouvez voir où cette couleur est sélectionnée, elle va passer à cette couleur et se mettre à jour en temps réel. Donc, vous pouvez voir qu'il est vraiment utile de travailler avec la grille de répétition. C' est vraiment extrêmement simple. Tout ce que vous devez faire est simplement de créer une instance de la mise en page de conception que vous voulez. Appuyez sur la grille rapide, créez le nombre de variantes que vous voulez. Et vous pouvez également utiliser des fichiers comme je vous ai montré avec les fichiers texte, nombre illimité de fichiers. Donc, comme je l'ai dit, vous pouvez en faire un pour les noms, noms des noms de la ville des pays et bien plus encore. Ou vous pouvez simplement utiliser des plugins pour appliquer différentes mises en page, différents éléments à vos conceptions de grille de répétition. 14. Masques: Si vous souhaitez que des parties de vos éléments ou de vos conceptions vous soient cachées, vous pouvez toujours utiliser les mosquées dans Adobe XD pour y parvenir. Alors laissez-moi vous montrer sur mon exemple comment j'ai utilisé des masques et comment vous pouvez le faire. Donc ici, j'ai un exemple de l'animation sur mon bouton. Donc, si un coup juste ici, juste aperçu rapide et cliquez ici, vous pouvez voir beaucoup de cela se passe. Et vous pouvez voir tout ce tutoriel sur ma chaîne youtube. Mais fondamentalement beaucoup de ces choses différentes se produisent et tout cela à cause des masques. Donc si je saute ici et que je te montre sur mon panneau Calques ce qui se passe. Donc, évidemment, j'ai un composant différent et des états différents avec des animations différentes. Encore une fois, si vous voulez vérifier, Harvard est terminé, consultez ma chaîne YouTube. Cette vidéo sera là pour que vous puissiez apprendre comment j'ai fait ça. Mais ici, nous avons ce bouton et la chose qui nous intéresse est Musk. Donc, fondamentalement, comment fonctionnent les masques est vous pouvez voir que nous avons tous ces différents éléments à l'intérieur. Donc, nous avons l'icône du camion de livraison, qui est ici, les livraisons envoyées, qui est le texte que vous ne pouvez pas voir pour le moment. Burgess maintenant, qui est ce texte ici et évidemment bouton. Donc, comment j'ai créé ce masque, par exemple, permettez-moi de copier rapidement tout. Donc il avait le contrôle C. et disons que je veux frapper le contrôle D ici. Et supprimons toutes ces choses. Et je vais faire un clic droit sur le composant Ungroup. Un clic droit sur la mosquée de groupe, supprimer ici. Encore une fois, ce que nous avons ici, c'est ce camion de livraison. Disons que je veux le positionner ici. On peut envoyer la livraison et je veux la déplacer à quelque part ici. Et nous avons acheté maintenant avec lequel je veux bouger ici dans le centre. Alors, comment une mosquée tout pour que les gens ne puissent pas voir cette livraison envoyée. Et changeons même sa couleur parce que peu importe la couleur qu'elle est. Alors comment pouvez-vous faire cela est simplement dupliquer ceci, qui est le contrôle original Watson hit D. Et fondamentalement dans notre cas, parce que je veux voir ce qui se passe, je veux l'étendre juste un peu. Donc, Maj Alt et clic gauche. Je peux l'étendre jusqu'ici. Je peux inclure la bordure, enlever la couleur, juste pour que nous puissions voir ce qui se passe dans notre cas, les positions juste ici. Et tout ce que vous devez faire est simplement positionner vers le haut. Cliquez dessus. Maintenez votre touche Maj enfoncée, cliquez ici pour sélectionner tous vos éléments. Appuyez ensuite sur Maj Control M ou Maj commande sur un masque. Et il sera sur un maxillaire et il va créer un masque de tous ces composants. Donc, fondamentalement, ce qui s'est passé ici est masque a des composants et des éléments cachés qui sont en dehors de votre. Donc, fondamentalement, votre point de vue est votre masque. Et parce que notre mosquée est si grande, tout ce qui se trouve à l'extérieur de notre mosquée ne peut être vu. Tout ce qui est situé dans, peut être vu. Fondamentalement, vous pouvez voir que je peux déplacer ça ici peut-être. Et vous ne pourrez pas voir le camion entier quand je cliquerai dehors parce que c'est un masque d'ici, vous pouvez évidemment déplacer votre masque un peu vers le bas si vous le voulez, vous pouvez le déplacer vers le haut. Vous pouvez jouer avec elle et vous pouvez créer des masques en utilisant mentale, par exemple. Donc, si vous avez des formes complexes que vous devez sélectionner, vous pouvez évidemment utiliser un crayon pour cela. Et puis vous pouvez placer en forme de dette, vous avez créé en utilisant un crayon sur le dessus ou la pile de couche alimentaire comme je l'ai fait avec la copie de mon bouton ici. Ensuite, il suffit de le sélectionner, sélectionner tout en dessous, appuyez sur Maj Control, Maj commandez-les pour créer un masque et puis vous pouvez jouer avec elle. Évidemment, vous pouvez créer un état différent comme je vous ai montré ici. Et laissez-moi vous montrer une fois de plus dans notre exemple ce qui se passe ici. Donc, dans le premier état, lorsque les utilisateurs cliquent ou tapent sur Burgess maintenant va disparaître, camion va tomber. Disparaissent, le bouton va apparaître une fois de plus et nous avons cette livraison envoyée. Donc, comme vous pouvez le voir, tout est fait avec un masque. Tout est fait avec les états du composant. Donc, les masques sont vraiment importants, un outil vraiment puissant à avoir dans Adobe USD. Donc, je vous encourage vraiment à le tester et à l'essayer par vous-même et voir ce que vous pouvez créer en utilisant des masques. 15. Fonctions 3D: Adobe XD a quelques fonctionnalités 3D et bien qu'il soit vraiment limité, c'est génial d'avoir une option de mise à niveau pour avoir juste pour pimenter vos designs ici et là juste un peu. Mais il est important de noter qu'Adobe XD n'est pas un outil 3D par aucun moyen. Si vous voulez apprendre la 3D, je vous encourage vraiment à tester des outils gratuits tels que le mélangeur, par exemple, juste pour comprendre ce qu'est la vraie 3D et ce que vous pouvez faire avec. Mais dans Adobe XD, vous pouvez vraiment faire des trucs amusants. Permettez-moi donc de vous montrer rapidement un exemple. Voici la vidéo que j'ai créée récemment sur ma chaîne YouTube et vous pouvez la regarder là-bas comme un tutoriel pour voir comment cela est fait. Mais en gros, si je fais un zoom avant, j'ai toutes ces cartes. Et disons que je veux créer cette carte pour être 3D. Tout ce que j'ai besoin de faire, c'est simplement cliquer ici. Cette chose apparaît et vous pouvez cliquer et faire pivoter et vous pouvez voir que c'est vraiment basique. Donc, comme je l'ai dit, c'est 3D, mais en même temps, ce n'est pas vraiment si avancé, mais vous pouvez faire des choses assez cool avec cet outil. Donc, si je vous montre rapidement ce que j'ai créé pour ce tutoriel, si je clique ici, puis cliquez ici sur l'aperçu, et cliquez ici. Vous pouvez voir qu'il va de stock, qui est ce 12 3D avec un seul robinet. Ainsi, vous pouvez voir vos options sont vraiment limitées avec cette fonction 3D. Alors explorons ça un peu plus profondément. Donc encore une fois, si je clique ici pour aller à l'intérieur de mon option 3D, ce que j'ai ici, notre largeur et notre hauteur. Donc fondamentalement la même chose, x et y disent la peinture, mais ici nous avons ces trois. C' est donc l'axe de rotation, c'est la rotation y. Et enfin, c'est la rotation z ou la rotation souhaitée comme nous le voulons, et c'est la position du désert. Donc, au lieu de x et y maintenant, nous avons aussi la position Z. Donc, ce que vous pouvez faire est d'explorer un peu et de voir qui sont toutes ces rotations en cliquant simplement ici, puis en maintenant la touche Maj, puis les flèches haut ou bas. Donc, si je vous prends dix incréments à la fois, vous pouvez voir quel est l'axe des x. Si je fais la même chose, vous pouvez voir ce qu'est l'axe y et vous pouvez aller dans l'autre sens, trop négatif, et cela va changer de cette façon aussi. Et vous pouvez également cliquer ici et pour voir pourquoi, qu'est-ce que ça fait ? Donc, vous pouvez aller, par exemple, 30 comme ça. Et puis vous pouvez jouer avec 30 comme ça. Et peut-être, je ne sais pas, 30 comme ça. Et vous pouvez avoir ces formes folles en 3D, ou vous pouvez simplement cliquer sur 0, Tab 0, Tab 0. Et puis entrer va revenir à l'option par défaut. Et c'est vraiment important si vous voulez sortir de la 3D, vous avez vraiment besoin de frapper ici, qui est les transformations 3D. Ou vous pouvez utiliser Control ou Command T pour aller à l'intérieur, puis il va sortir de la 3D. Ce qui est vraiment génial, c'est que vous pouvez utiliser différents états de composants avec 3D. Donc, par exemple, c'est mon état par défaut, mais vous pouvez juste l'imaginer. Disons que je veux utiliser différents, disons l'arrière-plan, l'ombre ou des couleurs différentes ou quoi que ce soit d'autre. Dans mon prochain état, âme, disons que je veux, je ne sais pas que ce premier état soit comme ça. Mais quand ils cliquent sur Arrière-plan va changer la couleur, cela va changer la couleur et bien plus encore. Donc, disons que cet état va être appelé état cliqué. Maintenant, vous ne pouvez pas le faire ici et cela va se traduire en 3D, ce qui est vraiment un excellent ajout. Mais, en gros, c'est, c'est vraiment limité. Mais tu peux faire des trucs vraiment cool. Ce que vous ne pouvez pas faire au moment de la réalisation de cette vidéo est planer en 3D. C' est pour ça que je t'ai montré comment taper, mais tu ne peux toujours pas faire un vol stationnaire. Mais en attendant, lorsque vous regardez cette vidéo, peut-être l'équipe de sortie a lancé cette mise à jour ou ils vont la mettre à jour à l'avenir et lancé une mise à jour. Assurez-vous donc, comme je l'ai dit au début de ce cours, de vérifier vos mises à jour, vérifier l'équipe Adobe XD et de voir ce qu'ils travaillent actuellement et les mises à jour qu'ils lancent. Mais fondamentalement, c'est tout le 3D que vous allez avoir en ce moment dans Adobe XD. Mais peut-être que vous allez regarder cette vidéo dans un an et peut-être la mise à jour. Assurez-vous donc de vérifier votre mise à jour et de vérifier les options que vous pourriez avoir pour 3D. 16. Maquettes: Utiliser des maquettes dans Adobe XD est vraiment assez simple, mais le problème est pour le moment vous n'avez pas le choix d'une maquette. Donc, je recommande vraiment soit un outil en ligne gratuit ou si vous avez Photoshop, vos options sont essentiellement infinies parce qu'il y a des milliers et des milliers de maquettes différentes en ligne que vous pouvez télécharger gratuitement ou même acheter différents paquets et les utiliser directement dans Photoshop. Vous pouvez donc exporter des fichiers à partir de XD, les enregistrer en format PNG par exemple, ou JPEG, puis simplement les ouvrir dans des maquettes Photoshop, les placer dans des maquettes, puis créer des présentations différentes. Mais si vous voulez créer tout à l'intérieur d'Adobe XD, la seule excellente option que j'ai trouvée est l'angle. Cela fonctionne vraiment bien pour moi, mais j'ai trouvé des gens en ligne et je ne comprends pas vraiment. Ils ont la version gratuite, ils n'ont pas eu la version B. Alors prends-le avec un grain de sel. Ça marche pour moi et je vais te montrer que ça marche pour moi, mais ça pourrait ne pas marcher pour toi. Donc ici, j'ai mon UIKit bavard et vous pouvez obtenir ce kit d'interface utilisateur sur mon site si vous le souhaitez. Je peux appuyer sur le contrôle C pour copier celui-ci, par exemple. Et puis je peux revenir à l'angle, ou mieux encore, je peux prendre cette maquette par exemple, et vous pouvez voir que j'ai un bagage haut de gamme. C' est une version un peu plus ancienne. Ils ont une version plus récente et maintenant, mais disons par exemple, que je veux utiliser celui-ci d'un téléphone, appuyez sur Control-C pour le copier. Et vous pouvez voir que j'en ai plusieurs et ils ne sont même pas tous énumérés ici parce qu'ils manquent d'iMac, par exemple. Donc, si je vous ramène à mon chador UIKit, disons que je veux coller dans cette maquette juste ici et que je veux la positionner ainsi par ici. Et disons que vous créez nos solides de présentation cliquez ici. Et peut-être que votre présentation est 1920 d'ici 1080. Appelons ça une présentation. Comme ça. Déplaçons cette maquette à l'intérieur et donnons-lui quelques couleurs. Donc, si je vais ici, aller avec le ballon principal peut être. Et puis laissons-le comme ça par exemple. Vous devez donc positionner votre maquette de cet écran dans votre téléphone. Alors comment allez-vous faire ça ? Cliquez simplement sur Contrôle et cliquez sur Accéder à un panneau Calques. Vous devez être sur la couche d'écran, ce que j'ai en ce moment. Et puis voyons, cela s'appelle écran de démarrage. Donc, vous devez aller aux plugins. Vous devez trouver le plug-in d'angle, appliquer Mockup. Ensuite, vous devez sélectionner un écran de démarrage et appuyer sur Appliquer. Ça va faire sa magie. Et dans certains cas, ça va prendre beaucoup de temps. Mais dans mon cas, parce que c'est vraiment assez simple, il a appliqué la maquette et vous pouvez voir à quoi cela ressemble. Donc, si vous voulez, par exemple, utiliser ce fil numéro cinq, processus est exactement le même. Donc, je vais aller à la couche d'écran, aller aux plugins, appliquer maquette et nourrir numéro cinq. Nous sommes situés juste ici. Donc nourrir numéro 5 ici c'est. Et vous pouvez jouer avec l'orientation de qualité de densité de pixels. Donc, vous avez le meilleur et vous avez un peu mieux, vous avez la moyenne et ainsi de suite. Mais je choisis juste d'être au mieux touché, postuler. Et vous pouvez voir que ça a fonctionné sa magie. Et en fonction de la taille de votre écran ou de sa taille, nombre d'éléments différents qu'il y a à l'intérieur, cela vous prendra plus de temps ou moins de temps. Mais comme vous pouvez le voir, cela ne prend que quelques secondes dans mon cas. Donc, comme je l'ai dit, c'est vraiment une bonne chose à avoir. Et revenons à ça. Et disons que maintenant je veux utiliser cette maquette ou encore mieux, utilisons, je ne sais pas, celle-ci. Appuyez sur le contrôle C, et puis je peux retourner à mon fichier de présentation principal, étendre mon aéroport. Vous contrôleriez V pour le coller à l'intérieur. Peut-être qu'il va être situé ici. Et maintenant, je peux cliquer à l'intérieur, localiser ma couche d'écran, qui est ceci juste ici. Et disons que je veux inclure cela dans l'écran blanc accepté. Alors revenons à ici, appliquer maquette situé. Donc, en blanc, accepté. Voyons où il se trouve. Pour peut même le trouver ici sur la liste. Ici, il est en blanc accepté, appuyez sur appliquer. Ça va faire sa magie. Et peut-être que cela va prendre un peu plus de temps à cause de tous ces éléments différents, mais les voici. Donc, si je sélectionne la maquette entière, faites-la tomber. Vous pouvez voir que la qualité est assez décente, mais il va évidemment compresser un peu. Donc, ce ne sera pas aussi haute qualité que ça l'est, mais c'est vraiment génial et assez bon pour la présentation. Donc, en gros, c'est l'angle. Et vous pouvez aller à leur site Web, vous pouvez simplement taper l'angle pour les œufs D, par exemple, va vous y emmener. Comme vous pouvez le voir, cela fonctionne dans mon cas, mais j'ai trouvé en ligne certaines personnes disent que cela ne fonctionne pas. Donc, ce que vous pouvez faire est installé là, plug-in, comme vous pouvez le voir ici c'est, juste ici. Vous pouvez simplement aller à la liste des plug-ins. Vous pouvez aller à l'angle de direction de recherche. Et vous pouvez voir que c'est juste ici. Je l'ai installé. Et après l'avoir installé, allez sur leur site Web et consultez la version gratuite des maquettes. Ils l'ont fait. C Si tu es comme, tu verrais s'ils travaillent pour toi. Si elles le font, super, alors vous pouvez vraiment décider si vous voulez acheter le paquet premium complet. Et vous pouvez voir dans mon cas, si je vous le montre encore une fois, combien de ces maquettes il y a. Ce n'est pas non plus l'histoire par défaut car vous pouvez également obtenir tous ces papiers de vol. Donc c'est à ça que ça ressemble. Ainsi, vous pouvez obtenir ces papiers peints et vous pouvez les utiliser dans vos designs et ils sont extrêmement grands. Donc, disons ce flou numéro un, et revenons à notre angle, et revenons à notre design. Donc disons que je voulais inclure l'image ici. Et allons à l'intérieur dans ce contexte. Par exemple, je voulais inclure ce flou. Je peux simplement le glisser et le déposer à l'intérieur et vous pouvez voir à quel point c'est grand si je double-clique. Donc, vous pouvez vraiment le mettre à l'échelle. Et si je vérifie une fois de plus, je pense qu'il y a certains qui aiment 4K et 5K quand oui, phi 1202880 en taille. Donc, vous obtenez aussi ces papiers évolués et vous obtenez toutes ces maquettes d'angle différents. Et vous pouvez voir que nous avons montre, nous avons pixel nexus galaxie iMac et vu beaucoup plus. Donc, si vous le voulez, vous pouvez le vérifier, mais assurez-vous de le tester par vous-même. Parce que j'ai vu en ligne certaines personnes se plaignent qu'elles ne peuvent installer le plugin ou que les maquettes ne fonctionnent pas ou qu'elles ne fonctionnent pas dans leur cas, mais elles fonctionnent en France cas. Alors assurez-vous de tester cela par vous-même, mais c'est essentiellement pour les maquettes dans Adobe XD. Si vous avez Photoshop, si vous avez différentes options en ligne, je les recommande vraiment. Et parce que les portes sont beaucoup meilleures en qualité dans la gamme, vous pouvez également choisir différents appareils. Vous pouvez choisir, par exemple, de mettre votre camion d'impression designer ou de le mettre sur une maison ou sur un panneau ou autre. Mais vous n'avez pas encore cette option dans Adobe XD. Vous pouvez également sauter entre Photoshop et XD et enregistrer les conceptions de sauvegarde d'image en tant qu'images. Xsd puis sautez dans Photoshop, positionnez-les dans des maquettes là, puis appuyez sur le contrôle ou la commande car ils s'appliqueront automatiquement aux fichiers XD. Mais c'est vraiment une solution de contournement. Donc, vos options sont soit angle, soit si, au moment où vous regardez cette vidéo, peut-être que certaines options différentes apparaissent. Mais dans mon cas pour l'instant, c'est angle ou Photoshop ou un autre outil en ligne. Donc, une fois de plus, dans la campagne en raison de décider ce que vous voulez, ce que vous êtes le plus à l'aise avec l'utilisation. Et si vous voulez, vous pouvez payer pour l'angle ou vous n'avez pas à le faire, vous pouvez utiliser la version gratuite, qui est vraiment limitée. 17. Raccourcis: Savoir utiliser les raccourcis clavier est extrêmement important car cela va accélérer votre processus va accélérer votre flux de travail. Et il va rendre votre vie en tant que concepteur UI UX beaucoup plus facile si vous savez comment utiliser certains raccourcis pour le début, assurez-vous d'apprendre les plus importants. Mais plus tard, lorsque vous passez à la ligne et que vous améliorez vos connaissances sur l'UI UX ou Adobe XD en tant qu'outil, alors je recommande vraiment d'en apprendre certains, un peu plus avancés raccourcis. Donc, pour vous montrer ce que je veux dire, un peu avoir un design que j'ai créé sur ma chaîne YouTube. Donc, si vous voulez voir comment j'ai créé, rendez-vous sur la chaîne YouTube et regardez. C' est en fait une série de dessins. Nous passons de l'esquisse papier au filaire dans XD, puis à la conception et enfin au prototypage. Donc, si vous voulez, vous pouvez le vérifier là-bas. Et pour vous montrer ce que je veux dire, nous avons ici un tas de ces différents éléments, solides. Dites que je veux cliquer ici, puis cliquez avec le bouton droit de la souris. Vous pouvez voir à côté de tous ces raccourcis, vous pouvez voir ces raccourcis. Évidemment, l'utilisation la plus importante et la plus courante est l'annulation, qui est Control ou Command Z. Mais vous avez aussi le contrôle V, le contrôle C. Vous avez une commande, nous sommes la commande C bien sûr, mais vous avez plusieurs ceux-là. Donc, si je fais un clic droit ici, vous pouvez voir copie. Vous pouvez voir basé, l'apparence basée, dupliquer, supprimer, déplacer vers l'avant, déplacer vers l'arrière, grouper, dégrouper. Il y a donc beaucoup de ces différents raccourcis et je vous recommande vraiment d' en apprendre autant que vous le souhaitez et que vous en avez besoin, surtout lorsque vous développez votre flux de travail et quand vous voyez que vous utilisez les mêmes tâches encore et encore encore une fois, il est vraiment important de sauvegarder ces tâches en tant raccourcis, car cela va améliorer massivement votre vitesse. Pour apprendre ces raccourcis, vous pouvez évidemment faire ce que je fais ici. Vous pouvez donc cliquer avec le bouton droit de la souris et voir ce que tout est. Ou vous pouvez aller sur des sites comme celui-ci. Vous pouvez simplement les raccourcis Google Adobe XD dans. Cela va prendre votre aide officielle d'Adobe. Et vous pouvez voir les raccourcis clavier ici. Si vous le souhaitez, vous pouvez cliquer pour télécharger la version PDF de ces raccourcis. Et vous pouvez voir qu'il affiche à la fois les options Mac et Windows. Ainsi, vous pouvez voir un raccourci général pour le menu d'édition, pour le menu Fichier pour la pièce ou l'outil de plume pour les calques, les objets, les groupes et ainsi de suite. Vous pouvez donc télécharger les raccourcis PDF de cette façon ou les explorer via Adobe ASD. Il suffit d'apprendre ce qui est le meilleur moyen de gagner temps lorsque vous travaillez en tant que concepteur yo-yo dans Adobe XD est d'utiliser des raccourcis car vous verrez dès qu'ils entrent dans votre routine quotidienne, vous êtes verrez dès qu'ils entrent dans votre routine quotidienne, va pouvoir être beaucoup plus rapide, beaucoup plus productif, et vous allez profiter de XD beaucoup plus parce que vous n'allez pas penser à trop réfléchir à ce que vous faites parce que votre capacité mentale a augmenté avec tous ces raccourcis ASD. 18. Travailler avec des fichiers: Vous pouvez travailler avec plusieurs fichiers et types de fichiers dans Adobe XD scie à partir de types de fichiers image de base comme JPEG, PNG, vous pouvez ouvrir et enregistrer des fichiers PDF. Vous pouvez travailler avec des icônes SVG et bien plus encore. En outre, les types de fichiers sont vraiment importants lorsqu'il s'agit de fichiers de documents. Ainsi, par exemple, comme Adobe XD est évidemment créé par Adobe, vous pouvez facilement ouvrir et travailler avec des fichiers Photoshop. Vous pouvez également utiliser des fichiers Illustrator. Vous pouvez également travailler avec le croquis pendant des heures, car ils essaient de prendre grand nombre possible d'utilisateurs d'esquisse et de les amener à Adobe XD et de les faire rester là. Donc, si je vous montre ici sur notre écran d'accueil, ce que nous avons est sur votre ordinateur, vous pouvez cliquer là et vous pouvez clairement voir commence avec la conception existante. Donc c'est de ça que je parlais si vous avez un dossier. Ainsi, par exemple, notre équipe de développement client a fait que quelqu'un d'autre vous envoie le type de fichier et vous devez l'ouvrir dans Adobe XD. Vous pouvez le faire à partir d'ici. Donc, ici, nous avons b est d ou AI, donc Photoshop ou Adobe Illustrator fichier, nous avons XD évidemment, et c'est ce que, comme il ouvre le meilleur et le plus facile. Mais nous avons aussi des fichiers de croquis et c'est ce que je voulais vous montrer. J' ai donc un fichier de croquis d'imaginaire et je l'ouvrirai. Et une chose géniale à propos des fichiers Adobe XD, c'est qu'ils sont vraiment petits. Mais ici, avec ce fichier d'esquisse, avec tous ces différents composants, styles de calque et bien plus encore, nous avons un fichier volumineux. C' est pourquoi si tu jettes un coup d'oeil ici, ça prend beaucoup de temps à ouvrir. Mais ce qu'Adobe XD essaie de faire est d'ouvrir ce fichier d'esquisse et de le convertir en fichiers Adobe XD. Donc, comme vous pouvez le voir, il commence à se remplir avec ces composants et il va en montrer un peu plus. Maintenant, comme vous pouvez le voir. Et ce qui est en train de faire, c'est d'essayer de prendre des composants d'esquisse et de les amener ici. Donc, comme vous pouvez le voir, il nous manque toujours des couleurs, il nous manque toujours des styles de caractères. Mais si vous mettez à jour ces polices qui sont manquantes dans ce cas, elles apparaîtront ici dans le panneau Style de caractères. Mais fondamentalement, c'est à ça que ça va ressembler. Donc, nous avons écran de bienvenue, nous avons la version mobile. Si je fais défiler vers le bas, nous avons la version tablette. Et enfin, nous avons une version web ici aussi. Nous avons la couleur de l'interface utilisateur. Donc, c'est fondamentalement, ils sont une sorte de guide de style. Nous avons ces composants principaux et vous pouvez évidemment créer des composants à partir de ces éléments et vous pouvez voir qu'ils sont des bugs parfois comme une semaine, ce texte par exemple, mais nous l'avons comme un composant ici. Nous avons aussi des symboles qui sont esquissés une façon de dire des composants. Donc, il y avait aussi des symboles dans XD. Maintenant, ils sont sous les composants. Donc, fondamentalement, c'est à ça que ça ressemble. Donc, vous pouvez voir que cela semble un peu désordonné, mais vous pouvez toujours travailler avec ces fichiers. Vous pouvez les ouvrir, les enregistrer en tant que composants natifs dans Adobe XD, puis enregistrer le fichier ultérieurement et partager ce fichier avec les clients, les développeurs et vos coéquipiers. Enfin, laissez-moi vous montrer la structure. Donc, si nous prenons, par exemple, ce symbole ici, et si je passe à ma palette de calques ici, vous pouvez voir ce que nous avons. Donc nous avons ce formulaire. Donc, nous pouvons l'ajouter tous ces éléments. Disons que je veux les changer. Cependant, vous pouvez voir qu'il se met à jour assez facilement. Nous avons cette icône au centre, sorte que vous pouvez facilement l'ajouter. L' apparition de cette icône, par exemple, nous avons ce texte et disons que je veux mettre à jour ceci. Donc, disons que je veux étendre la base et le bouton. Alors amenons-le à ici. Apportons ce texte juste un peu maintenant. C' est donc 60 entre l'ICANN et ce texte et ce texte. Donc fondamentalement maintenant ce composant est mis à jour et je peux faire la même chose pour tous ces autres composants. Donc ce qu'on peut localiser, ça s'appelle un formulaire. Et je peux sauter ici. Je peux faire ce que je t'ai dit. Alors cliquez ici, tapez dans le forum parce que comme je l'ai dit, nous avons plusieurs d'entre eux. Ainsi, vous pouvez survoler, vous avez formé deux instances. Et enfin, nous avons formé deux instances de celle-ci. C' est peut-être une meilleure idée, et ils ne l'ont pas fait dans le premier cas. Parce que ce sont des composants moyens et des symboles mobiles, je vais appeler ce formulaire mobile. Alors testons ça. Formulaire mobile, ce qui est une fois de plus pourquoi il est important de bureau ou de vos éléments. Nous avons donc le forum, la forme et la forme. Mais si nous l'avons créé comme un formulaire mobile dès le début, alors peut-être que si nous étions en mesure de le trouver, mobile n'existe toujours pas. Donc, vous devez peut-être fermer à la sortie, puis l'ouvrir à nouveau, puis il va mettre à jour là et s'afficher là. Mais c'est fondamentalement tout. C' est à quel point il est facile de travailler avec des fichiers d'esquisse. Comme vous pouvez le voir, il y a clairement des bugs et vous devez trouver votre chemin autour de ces bogues. Par exemple, vous pouvez supprimer ces composants de ce fichier, puis recommencer. Ou vous pouvez faire ce que j'ai fait ici, puis éditer les composants. Fermez le fichier dxdy, ouvrez-le à nouveau et il s'affichera comme une aide au composant là. Ensuite, vous pouvez l'enregistrer comme un fichier x D et vous pouvez partager avec lequel nous développons une vidéo développeurs, clients ou coéquipiers. 19. Travailler avec des ressources gratuites: Lorsque vous travaillez en tant que concepteur UX, évidemment, dans chaque projet que vous faites, vous avez besoin de ressources. Maintenant, que ce soient des images, mais ce sont des icônes, des maquettes, quelle que soit l'autre ressource que vous voulez utiliser, vous avez deux choix. Vous pouvez travailler avec des ressources gratuites ou vous pouvez travailler avec des ressources payantes. Surtout les débutants et les concepteurs qui commencent à peine dans cette entreprise ont tendance à utiliser des ressources gratuites. C' est pourquoi la majorité des conceptions en ligne sont exactement les mêmes. Parce que tous ces désirs utilisent fondamentalement exactement les mêmes ressources que tout le monde. Et c'est le seul problème clé. Et l'autre problème clé est juste la sélection que vous avez en ligne. Donc, si je vous montre avec l'exemple des images, mais cela peut également être traduit deux icônes. Ici, j'ai ouvert sans épissure, qui est fondamentalement le standard d'or de ces images libres. Et vous pouvez voir que vous pouvez faire défiler vers le bas et trouver des images étonnantes. Donc, disons que par exemple, pour mon projet, je veux utiliser cette image. Je peux l'ouvrir. Je peux voir qui est le photographe et je peux le télécharger ici. Je devrai aussi laisser le lien vers le profil de ce photographe car je devrai les créditer. Vous n'avez pas besoin de le faire nécessairement. Mais comme le dit blush, il va être vraiment bien pour ce photographe en particulier et pour nous rougit les affaires aussi bien. Laisser le lien pour savoir où vous avez trouvé votre image afin que vous n'ayez pas à le faire, mais c'est vraiment agréable à faire. Paxos le fait ainsi que tous ces autres sites Web également. Donc, si nous revenons à l'image, disons que j'utilise cette image, mais par exemple, je veux utiliser une photo de cette fille dans d'autres positions. Ou disons que je veux utiliser la photo où vous pouvez voir cette fille dans son ensemble. Peut-être qu'elle est assise quelque part, elle debout solaire. Voyons si on peut trouver une photo. Donc vous pouvez voir que nous avons cette seule image et c'est la croissance, mais ne devrait pas, elle n'a pas ces fleurs. Voyons si on peut trouver autre chose. Et comme vous pouvez le voir, nous sommes maintenant coincés. Nous ne pouvons donc pas utiliser cette image dans une série d'autres images. Oui, c'est la même fille, mais ce sont des tenues indifférentes. Il n'a pas ça, ces fleurs sur son visage. Il n'a pas la même exposition. Les couleurs ne sont pas exactement les mêmes. La tenue n'est pas la même. Donc tout de suite, nous avons un problème. Alors, comment les concepteurs travaillent autour de ce problème ? Il y a simplement trouver d'autres modèles qui sont similaires avec l'exposition similaire sur ces images avec des couleurs similaires, styles, avec des températures et bien plus encore. Mais fondamentalement, c'est votre solution de contournement. Vos designs ne seront pas cohérents parce que vous allez prendre l'image de ce photographe avec cette exposition, ne photographe avec cette exposition. Et la même histoire vaut pour les maquettes. Donc, par exemple, si vous utilisez des maquettes qui ne sont pas de la collection comme je vous l'ai montré, collection d' angle est alors une maquette est une maquette va avoir, par exemple, je ne sais pas, iPhone dix. L' autre va avoir iPhone 11 , puis MacBook va être l'ancienne version. Et bien plus encore si vous utilisez des icônes, même histoire, disons que vous utilisez des icônes de contour dans votre cas. Et peut-être que vous aimez vraiment l'icône de recherche de ce contour en arrière. Mais par exemple, vous avez également besoin d'une icône de maison et vous ne pouvez pas trouver le même style d'icônes dans ce dos. Donc, ce que vous devez faire est d'utiliser complètement différent de quelqu'un d'autre qui l'a fait. Cela va être une corvée pour les développeurs parce que les icônes ne sont pas faites de la même manière. Peut-être que cette icône est disponible en SVG, cette icône est disponible en PNG. Et puis, lorsque vous envoyez ces fichiers au client, vous devez également dire au client si vous voulez utiliser ces éléments. Ainsi, par exemple, cette image, cette icône, cette maquette, Vous devez créditer tous ces designers parce qu'ils l'ont créé. Et sous certaines licences, vous devez faire certaines choses. Sinon, vous risquez un procès. Et c'est vraiment le principal problème avec ces ressources gratuites parce que nos 20 ans dans cette industrie, j'ai trouvé beaucoup, beaucoup, beaucoup de designers là-bas se plaignaient de quelqu'un d'autre qui les suivait. Ido photographe ou un autre concepteur ou un site Web parce qu'ils utilisent une ressource, en particulier de Google Images. Parce que lorsque vous utilisez des ressources provenant d'images Google, vous n'avez vraiment aucune idée de qui les a créées. Blanc et ils ont créé, encore moins avec des sites Web comme fourmis engagement par exemple, ou des sites Web icône comme icône plate par exemple, vous savez au moins qui a créé l'élément d'origine, où vous le téléchargez et qui vous pouvez créditer. Mais si vous utilisez des images Google, par exemple, ou des fichiers Google, alors vous avez de vrais problèmes parce que la plupart des fois vous n'avez vraiment aucune idée de qui a créé le design original ou l'icône ou autre. Et puis une fois que votre client l'utilise, ils sont risqués ou potentiels vont trier. Alors gardez ces choses à l'esprit. Numéro un, les collections, donc vos dessins ne vont pas paraître cohérents parce que vous pouvez prendre une image de dispersion, une image de cette personne. Donc, la conception va sembler assez désordonnée, en particulier sur les écrans avec une latence plus faible. Et surtout de nos jours, nous avons 120 écrans hertz. Donc, si vous utilisez l'icône PNG et l'icône SVG, les utilisateurs peuvent vraiment dire, et surtout avec ces poursuites. Il suffit donc de garder toutes ces choses à l'esprit lorsque vous commencez, lorsque vous utilisez ces éléments gratuits du Web. Alors assurez-vous de comprendre. Je ne dis pas que vous n'utilisez pas ces éléments gratuits, mais assurez-vous quand vous les utilisez, de les utiliser de manière responsable, simplement enregistrer toutes ces licences , toutes ces ressources, très, vous les avez trouvées. Vous pouvez ouvrir Google doc par exemple. Ensuite, vous pouvez répertorier les images dans une liste où vous les avez trouvées pour un ou plusieurs projets particuliers ou n'importe quelle autre ressource que vous utilisez. Et puis vous pouvez envoyer au moins à votre client et dire, si vous voulez utiliser ces ressources. Donc saines que j'ai fait dans ma conception, s' assure de suivre ces étapes, remercier ces personnes, mettre les liens sur leurs sites Web et ainsi de suite. Donc, en tant que designer, vous êtes couvert et ensuite vous assumez la responsabilité de vous-même envers vos clients et leur faire avoir un choix. Donc, s'ils veulent utiliser ces articles, ils le peuvent, mais ils connaissent maintenant les risques. Par exemple, appelons-le comme ça. Ou s'ils veulent utiliser d'autres éléments, alors vous êtes également autorisé parce que vous vous épargnez des poursuites potentielles et des problèmes potentiels à l'avenir. 20. Travailler avec des ressources Premium: Mais ce qui se passe après un certain temps quand vous gagnez une certaine traction, quand vous obtenez des clients plus précieux, quand vous économisez de l'argent qu'un vraiment, vraiment recommander que vous évitez toutes ces ressources gratuites, sauf par exemple, pour les polices, parce que vous pouvez utiliser des formulaires Google qui sont gratuits et open source et vraiment génial. Mais une fois de plus, la majorité des concepteurs sont là utilisent ces fonds. Assurez-vous donc de comprendre si votre design est assez similaire ou même exactement le même que certains de ces autres concepteurs. Il y a de grandes chances que vous ayez choisi la police que d'autres concepteurs ont également choisie, icônes, des images, et bien plus encore. Donc, encore une fois, si vous voulez utiliser des ressources premium, il y a beaucoup d'options différentes sont là, mais ce que je recommande vraiment est et des éléments vitaux. Donc c'est à ça que ça ressemble. N, vous obtenez tous ces articles que vous voyez ici sous un seul prix. Donc tu as 50 millions de photos supplémentaires. Vous avez leurs photos ici aussi. Vous avez des vidéos stock, des modèles vidéo, la musique, des effets sonores, graphique Dan sang. Donc imprimer des modèles, des sites Web, des infographies de vos enfants. Nous avons des graphiques, donc des arrière-plans, des textures, des modèles, des icônes, des présentations, des photos, des polices, des add-ons, modèles Web tels que des modèles de site. Vous avez également des thèmes WordPress. Nous avons 3D ici nous avons WordPress, CMS, trois fichiers. Nous avons des eBooks et des cours ainsi que sur les points Watteau plus, vous obtenez tous ces différents éléments à un seul prix. Vous payez le prix pour un an. Et puis dans cette année, vous avez une utilisation illimitée de ces fichiers. Parce que sur d'autres sites comme usaid, par exemple, lorsque vous payez, vous avez une limite de téléchargement quotidienne. Vous avez donc une limite au nombre d'éléments que vous pouvez télécharger en une seule séance, par exemple, ou pour un seul projet. Alors que Whitt et les éléments vitaux, vous n'avez pas besoin de cela et vous pouvez utiliser ce que vous voulez avec éléments Eduardo et vous êtes toujours couvert avec leur licence. Alors prenons des photos, par exemple, nous allons entrer ici, et voyons des photos. Une fois de plus, vous pouvez aller à ces 120 photos et ce sont 50 millions de photos supplémentaires là-bas. Alors disons que je veux utiliser cette photo. Je peux cliquer dessus. Et quand il s'ouvre, vous pouvez clairement voir tout de suite une énorme différence entre les photos premium et les photos gratuites. C' est la taille. Ainsi, vous pouvez utiliser ces photos, par exemple, dans une campagne. Disons que votre client a une campagne. Ils utilisent cette empreinte photo exacte sur de petites surfaces. Donc, disons sur une carte de visite ou sur un flyer sur de grandes surfaces. Disons d'un côté d'un bâtiment, d'un site web. Donc, les pages Web, et disons, par exemple, la conception mobile ainsi. Peut-être qu'ils l'utilisent dans une empreinte, peut-être qu'ils l'utilisent à la télévision. Donc, vous êtes vraiment couvert. Numéro un par la licence et numéro deux avec la taille du fichier, parce que la taille du fichier est énorme et vous pouvez travailler avec vraiment facilement. Maintenant, quand vient le temps de le télécharger, vous pouvez simplement cliquer ici pour le télécharger, vous pouvez créer un nouveau projet et appelons-le image r, ou une image de projet ou autre. Et vous pouvez simplement cliquer sur Créer, Project, notre image, votre annonce et votre dialogue. Et il va commencer à télécharger tout de suite. Vous pouvez télécharger sans licence, mais de cette façon, vous allez obtenir un filigrane partout sur cette image, comme vous le voyez ici. Vous pouvez donc l'utiliser et l'envoyer aux clients de cette façon, mais ils devront quand même acheter cette image. Donc c'est vraiment une traînée. Vous pouvez voir qu'il fait 70 mégaoctets, donc c'est vraiment assez énorme et laissez-les annuler rapidement. Donc tu ne t'embêtes pas parce que je veux te montrer encore plus. C' est par cette personne à 74 images. Donc on regarde cette fille. Ainsi, vous pouvez ouvrir le profil de cette personne. Vous pouvez également faire défiler vers le bas et voir tout de suite. Donc, voici, et vous pouvez voir à quoi ça ressemble. Donc, tout de suite, vous pouvez voir que c'est de cette série parce que l'éclairage est le même, les modèles sont les mêmes. Ainsi, vous pouvez commencer à faire défiler et voir où se trouve cette image. Donc, disons par exemple, vous avez besoin de ces images de ces personnes. Vous pouvez voir qu'ils sont tous dans ce bureau. L' éclairage est exactement le même. Les tailles sont énormes et vous pouvez également obtenir toutes ces images supplémentaires à utiliser à partir de cette même série. Donc, disons que vous avez à propos de nous section sur un site Web par exemple. Et vous voulez montrer à vos coéquipiers, vous pouvez utiliser ces personnes. Si vous voulez montrer votre environnement de travail, vous pouvez utiliser ces personnes. Et ça va paraître cohérent parce qu'il provient du même décor créé le même jour, sous le même éclairage par le même photographe, téléchargé sur un même endroit. Donc, dans ce cas, dans les éléments VO2, et vous pouvez les utiliser tous sous la même licence. Vous n'avez donc pas besoin de télécharger cinq images, avoir cinq licences différentes à envoyer à votre client, et ils doivent créditer chaque auteur de ces cinq images différentes. Ils peuvent simplement utiliser cette licence. Ils n'ont pas besoin de créditer quelqu'un. Ils ont juste cette licence au cas où ce photographe les approcherait. Et ils peuvent simplement lui montrer la licence de dire, jetez un oeil mon concepteur et a obtenu cela à partir d'un VO2 éléments sont ont la licence et ils sont couverts. C' est donc vraiment la différence principale et clé entre les ressources gratuites et payantes. Encore une fois, vous pouvez commencer avec des ressources gratuites. Assurez-vous juste de comprendre quand vous les utilisez. Il y a des risques et des niveaux professionnels impliqués, comme je l'ai expliqué. Mais lorsque vous utilisez des licences professionnelles et que vous payez pour ces services, vous n'avez vraiment aucune limite. Et le choix est vraiment énorme comme vous l'avez vu ici. Permettez-moi de vous montrer une chose de plus avec les icônes par exemple. Donc, si je vous ramène ici et disons, je ne sais pas, des icônes de démarrage par exemple. Et vous pouvez voir ici, il s'ouvre dans différentes catégories. Donc, disons que j'ai besoin de graphiques parce que j'ai besoin de ces icônes de démarrage, vous pouvez clairement les séparer comme ça. Vous pouvez également choisir le format de fichier que vous voulez. Et vous avez également un peu plus de ces formats de fichiers pris en charge, mais ils ne sont pas affichés ici pour le moment. Donc disons que j'aime vraiment ceux-là et j'aime comment ils ressemblent. Pour que je puisse simplement rendre visite à la personne qui les a faits. C' est juste une icône. Et vous pouvez clairement voir à quoi ressemblent ces icônes. Et je peux sauter ici et localiser les icônes que vous pouvez voir exactement dans le même style. Vous avez, toutes ces icônes différentes afin que vous puissiez les utiliser dans votre projet. Et votre projet va être beaucoup plus cohérent. En outre, vous pouvez clairement voir qu'ils sont fabriqués vraiment précisément et vraiment professionnellement. Mais vous obtenez également des icônes colorées ainsi que les icônes aberrantes sans aucune couleur. Vous pouvez donc les ajuster comme vous le souhaitez et comme vous le souhaitez. Vous obtenez également ces illustrations haut de gamme, ce qui est une grande tendance que je vois récemment, surtout au cours des une ou deux dernières années, les gens utilisent ce plug-in dans Adobe XD pour générer ces illustrations. Et chaque design est exactement le même parce que tous ces designers utilisent exactement les mêmes illustrations. Et ils vont si loin d'être paresseux, ne pas changer la couleur de ces illustrations et peut-être changer la pose, peut-être changer la taille, composition, ou autre chose. Ils utilisent ces icônes et illustrations gratuitement. Donc, en utilisant un élément Watteau par exemple, dans des services comme il vous donne cet avantage concurrentiel. Parce que non seulement vous êtes couvert par ces licences, mais vos designs vont avoir l'air frais, car vous avez tous ces exemples à choisir. Et ils vont paraître beaucoup plus professionnels parce que vous allez les prendre à des designers qui les ont créés à côté des collections. Donc, que ce soient des images comme je vous ai montré ou des icônes comme je vous ai montré dans ce cas, vos conceptions seront beaucoup plus polies et beaucoup plus professionnelles si vous utilisez des services haut de gamme comme des éléments d'onduleur, par exemple. 21. Utiliser des kits UI: Si vous ne voulez pas commencer à partir de zéro à chaque fois, la meilleure façon d'améliorer votre flux de travail et d'augmenter votre vitesse est d'utiliser des kits d'interface utilisateur. Et vous pouvez utiliser des kits d'interface utilisateur qui sont gratuits et vraiment petits, ou qui sont payés et vraiment gros. Laissez-moi vous montrer une comparaison rapide ici. Donc Cura ont un kit d'interface utilisateur bavard, qui est l'UIKit que mon équipe et moi avons créé il y a longtemps. Donc, vous avez tous ces éléments, vous avez tous ces composants, vous avez tous ces styles de personnage ici, sorte que vous pouvez commencer tout de suite. Donc, si je clique ici et prends certains d'entre eux. Donc, par exemple, utilisons ceci. Et disons que je veux utiliser, par exemple, sur une ancienne copie de BAR de bureau et collée ici. Je veux utiliser cette image, copier et coller ici. Et disons que je veux utiliser ce bouton, par exemple, copiez et collé ici. Donc, vous avez l'idée à quel point c'est rapide. Vous avez juste besoin de copier et coller des éléments et vous pouvez également utiliser des composants. Donc, si je vous ramène une fois de plus, par exemple, je peux aller ici et nous avons nav bar chat par exemple. Je peux le glisser et le déposer ici. Et je peux simplement le positionner pour qu'il soit juste ici. Ainsi, vous pouvez voir que vous pouvez commencer à construire ces éléments très rapidement. Vous pouvez modifier ces éléments. Vous pouvez changer les couleurs, vous pouvez changer les images, les icônes et bien plus encore. C' est pourquoi vous, pourquoi les enfants sont extrêmement utiles. Vous n'avez pas besoin de créer ces éléments à partir de zéro. Vous pouvez simplement les utiliser. Maintenant, c'était mon kit d'interface utilisateur, mais vous n'avez pas besoin d'acheter quoi que ce soit que nous avons créé. Ce que vous pouvez faire est simplement d'utiliser UIKit gratuit qui sont en ligne. Mais une fois de plus, vous rencontrez ce même problème que j'ai mentionné précédemment sur les articles gratuits et premium. Vos conceptions pourraient finir par être exactement les mêmes, mais pas dans tous les cas. Laisse-moi te montrer. Donc, si vous sautez ici, qui est des produits de barre oblique Adobe.com, XD futures UI, ou simplement taper des kits d'interface utilisateur Adobe XD en ligne et aller sur le site Web d'Adobe. Vous pouvez aller ici et voir le Royaume-Uni avoir le design Apple, qui est certifié Apple. Et c'est vraiment extrêmement utile si vous créez des applications iOS. Donc, je recommande vraiment vraiment que vous obtenez cette conception de matériel google, même histoire, mais pour les composants Android AGM. Donc tu peux faire ça. Microsoft UWB, si vous travaillez pour Microsoft, plates-formes, pour Amazon, Alexa, si vous travaillez avec la voix, qui est l'avenir, Adobe XD prend également en charge. Vous avez IBM Design et vous avez aussi Bootstrap. Donc, si vous travaillez avec bootstrap, vous ne pouvez pas commencer là. En outre, vous pouvez faire défiler tout le chemin vers le bas et vous pouvez voir que vous avez l'écran d' inscription Notes, application, filaires dessinés à la main. Donc, vous avez cette date des composants de présentation du système de conception. Ainsi, vous pouvez sauter ici et télécharger n'importe lequel de ces UIKit pour démarrer votre processus de création. Alors, une fois de plus, réfléchissez-y. Commencez toujours avec des libres qui, peu importe ce que vous faites, surtout si vous commencez. Donc juste de l'eau de bureau, voyez ce qui fonctionne pour vous, ce qui ne fonctionne pas. Et puis plus tard, vous pouvez acheter certains de ces kits et éléments d'interface utilisateur si vous le souhaitez. Mais comme vous l'avez vu, le libre choix est extrêmement énorme et c'est juste sur ce site officiel d'Adobe. Ce sont des sites tiers et des concepteurs qui créent toutes sortes de choses étonnantes. Donc, je vous exhorte vraiment à vérifier et à voir parce que vous êtes des enfants peut vraiment vous faire économiser beaucoup de temps et beaucoup d'énergie en travaillant sur n'importe quel projet, grand ou petit. 22. Créer un projet de conception: Lorsque vous créez des projets de design, il y a peu de choses à considérer, comme la taille du projet, combien de temps cela va vous prendre ? Mais aussi, combien de temps pouvez-vous aller avec la structure que vous avez en place ? Ce qui signifie que si le client pour quelque raison que ce soit, décide d'étendre ces projets à l'avenir. Donc, si vous faites un design de site Web, peut-être qu'ils veulent ajouter d'autres pages. S' ils font la conception d'applications, ils veulent peut-être ajouter plus d'écrans. Ils font la conception du tableau de bord. Peut-être voudrait-il ajouter quelques sections supplémentaires que vous ne comptiez pas auparavant. Alors, comment tout cela va ressembler à votre processus de conception et vos fichiers sont-ils suffisamment évolutifs ? Votre structure est-elle suffisamment évolutive pour prendre charge la charge d'endettement liée aux exigences de conception supplémentaires et aux commentaires de conception. Donc, je vais vous montrer un fichier qui vient de mon cours, masterclass Adobe XD, qui est à plus de 20 heures de masterclass. Et vous pouvez l'obtenir avec un énorme rabais. Ou si vous regardez ce cours sur l'une des plateformes, vous pouvez simplement vous inscrire dès maintenant. Et si vous êtes déjà inscrit dans la classe et que vous allez obtenir ce fichier inclus dans un fichier de classe. Alors voici à quoi ça ressemble. Et je commence habituellement par le dossier de conception. Nous n'avons pas de mémoire de conception ici dans ce fichier singulier car il s'agit d'un fichier externe. Et encore une fois, si vous êtes dans un cours, vous allez obtenir ce mémoire de conception. Vous pouvez ensuite répliquer ce fichier dans vos propres projets, qu'ils soient grands ou petits, vous pouvez utiliser ce fichier de projet pour les notes de conception de vos projets personnels et commerciaux. Donc, une fois de plus, vous allez obtenir ce fichier lorsque vous êtes inscrit à un cours. Mais ici, nous avons cette structure de fichiers. Et comme je l'ai dit, nous commençons généralement par un dossier de design. Et dans le dossier de conception, nous devons obtenir toutes ces informations importantes comme qui est le client, qui est son public cible, quel âge ils ont, où ils vivent, ce qu'ils font, comment ils vont interagir avec notre tableau de bord du site Web de l'application, quoi que nous fassions. Ensuite, nous allons poser au client toutes ces questions supplémentaires qui sont répertoriées et expliquées dans cette brève vidéo de conception. Donc, une fois de plus, vous pouvez le vérifier dans le cours et vérifier le fichier également. Ensuite, après avoir rassemblé toutes ces informations, ce que nous faisons, c'est que nous commençons, dans ce cas, l'architecture du site Web. Donc, ici, nous avons l'architecture du site web qui s'étend autour. Et je ne vais pas zoomer tout le chemin pour ne pas vous déranger, mais c'est juste un niveau de toutes les pages actuellement sur notre site Web, comment ils interagissent les uns avec les autres. Et c'est juste au niveau très basique sur la façon dont les pages interagissent les unes avec les autres. Si l'utilisateur clique sur une page, où les emporte-t-il ? S' ils cliquent sur une autre page, où est-ce qu'ils vont un peu d'une page à l'autre ? Ont-ils besoin d'aller à des pages séparées, des pages externes, et bien plus encore. Encore une fois, si vous vous inscrivez au cours, Tout est expliqué dans cette vidéo. Ci-dessous, nous avons des fils de papier. Et comme je l'ai dit plusieurs fois, j'aime vraiment commencer avec des fils de papier parce que c'est juste le processus si facile que vous, tout ce que vous avez à faire est simplement d'utiliser n'importe quel type de Ben, n'importe quel type de papier. Et vous pouvez simplement jeter vos idées que vous avez dans votre tête sur un morceau de papier. Et dès que vous commencez à le faire, vous commencez à réaliser nos idées SOM qui vont fonctionner. Peut-être que certaines idées pourraient ne pas fonctionner avec ce projet. Ensuite, vous serez en mesure de le comprendre rapidement, car vous pouvez faire beaucoup plus vite qu'avec n'importe quel logiciel, y compris Adobe XD, parce que tout ce dont vous avez besoin, une fois de plus, est juste un stylo et du papier. Ensuite, une fois que vous avez décidé sur le style global du projet, sur la structure globale du projet. Vous pouvez ensuite passer d'images filaires papier à Adobe XD. Et ici, nous avons des fils de papier juste ici. Je les ai scannés et les ai glissés et déposés à l'intérieur d'Adobe XD. Mais si vous n'avez pas de scanner, vous pouvez prendre une photo avec votre téléphone, puis l'apporter dans Adobe XD. Et à partir de là, nous pouvons passer aux trames filaires. Et vous pouvez voir que nous avons juste ces couleurs de base. Nous avons donc quelques nuances de gris, comme un gris clair, peut-être un peu plus foncé. Et puis ce gris foncé, Nous avons un logo parce que dans ce cas les clients centre le logo et nous avons quelques éléments structurels comme le pied de page ici. Et vous pouvez voir que nous venons de faire cette seule ligne dans les liens de pied de page parce que nous n'avons toujours pas réalisé à ce stade que la structure de pied de page va contenir, par conséquent, nous avons juste gardé très minime, mais en même temps cela fonctionne toujours comme un et vous allez toujours être en mesure de comprendre ce que tout est. Dan, ici nous avons une page de connexion et d'inscription, et ici nous avons la page principale du tableau de bord, qui est la page d'accueil du tableau de bord. Parce que lorsque les utilisateurs parcourent toutes ces pages, ils vont se connecter et s'inscrire à partir de l'une de ces pages parce que nous avons un bouton d'appel à l'action ici en haut. Ils peuvent ensuite y aller. De là, ils peuvent se connecter à leur tableau de bord et accéder à toutes ces informations importantes, telles que les informations de compte, les transactions, les cartes de prêt, etc. Parce que c'est une étude de cas sur le site de la banque. Donc, fondamentalement, les dettes, à quoi ressembleront les filaires et les filaires sont là. Encore une fois, à ce stade, vous pouvez commencer à partager avec votre client. Le client peut commencer à vous laisser des commentaires. Ils peuvent aussi le faire à l'étape du filage papier. Mais c'est beaucoup plus élégant et c'est beaucoup plus simple ici parce que vous l'avez fait dans Adobe XD. Vous pouvez partager le lien unique avec eux, puis ils peuvent laisser les commentaires. Peut-être peuvent-ils commencer à comprendre la structure du site, de l'application ou du tableau de bord, quoi que vous fassiez, puis vous laisser des commentaires concrets sur la structure de la dette ou sur une seule page d'une structure. Et vous pouvez facilement le changer parce qu'une fois de plus, jetez un oeil à ce n'est qu'un filaire. Ils n'ont pas d'images à craindre. Ils n'ont pas de couleurs à s'inquiéter. Peut-être même pas icône à s'inquiéter parce que vous pouvez voir dans ce cas, nous avons juste utilisé étoile juste pour indiquer que c'est là que l'icône va aller. Une fois que nous avons commencé avec le design, nous avons utilisé cette couleur pour toutes les images comme vous ne pouvez pas voir. Et vous devez expliquer cela à votre client une fois que vous faites cela parce que parfois ils ne comprennent pas et ils vont vous demander, en particulier les clients qui n'ont pas traité avec les designers avant, quel est ce que c'est alors que l'image et vous doivent leur expliquer et les guider à travers toute la structure et tout le processus de conception. Ok, c'est juste la partie idéative. C' est juste l'idée. Cela va représenter l'image, cela va représenter votre logo, cela va représenter l'icône et ainsi de suite et ainsi de suite. Donc, une fois qu'ils sont définis sur la structure, ou au moins partiellement définis, vous pouvez passer à la conception elle-même. Et ici, nous avons le design. Et comme vous pouvez le voir, nous avons inclus beaucoup d'images différentes, beaucoup de couleurs différentes Cette fois, nous avons également inclus différentes transitions, je vais vous montrer dans une seconde. Comme vous pouvez le voir, le pied de page est maintenant dans son ensemble parce que nous savons réellement que la structure globale de notre page où tout va plus haut classement est disposé afin que nous puissions inclure ce pied de page. Et encore une fois, en raison des propriétés de liaison, je peux simplement l'inclure en tant que composant. Et vous pouvez voir. Et cela comme un composant enfant. Et tous ces éléments sont des enfants composant de ce composant maître. Et tout changement que vous faites ici à la photo, par exemple, client change d'avis et ils ne veulent pas de cartes, cartes de débit, par exemple, peut-être que vous ne voulez pas changer pour autre chose, ou vous devez faire est simplement aller ici à un composant maître. Et une fois de plus, vous savez, c'est un composant massif à cause de ce champ en diamant, tandis que les composants enfants sont, ont ce diamant vide et holdouts. Donc, une fois de plus, s'ils veulent changer, par exemple, ces cartes de débit, vous pouvez les changer ici et elles seront mises à jour automatiquement en temps réel sur tous vos tableaux d'art. Mais vous pouvez également voir ici est nous avons inclus des animations ici. Et nous avons également créé différents écrans pour la conception du tableau de bord. Parce que maintenant avec les filaires, on en avait un. Mais c'est juste pour déterminer que nous avons ce style sonore. Nous savons ce que le tableau de bord va contenir. Et comment pouvons-nous le savoir ? Parce que nous avons posé à notre client un grand nombre de ces différentes questions qui, une fois de plus, n'ont pas été répertoriées dans le descriptif. Et quand vous commencez à créer votre aller à communiquer avec votre client, soit à vrai mou par e-mail, chats, whatsapp, y-bar, peu importe où vous prenez cette communication deux, vous êtes va leur poser beaucoup de questions différentes. Et puis à partir de cette page, vous condamnez la branche à toutes ces différentes pages parce que maintenant vous savez, quel est le maître et les informations requises ? Quelles sont les informations clés qu'ils vont garder sur cette page ? Et puis tu pourras sortir de là comme on l'a fait dans ce cas. Ainsi, vous pouvez voir que nous avons des comptes de tableau de bord, des longues transactions, et nous avons toutes ces pages parce qu'une fois de plus, nous avons demandé à notre client quels sont les principaux services. Nous avons inclus ces services et une succursale plus simple à partir de là. Et encore une fois, j'ai expliqué tout cela dans le cours pour que vous puissiez le vérifier pour voir par vous-même. Ensuite, ce que nous avons fait après le processus de conception est terminé. Parce que vous pouvez voir ceci est le design blanc car il est fait pour les périphériques de bureau tels que ces grands écrans et ainsi de suite. Nous sommes donc passés à la conception de sites web réactifs. Et ici, nous avons juste quelques exemples de différentes grilles. Et c'est exactement à quoi ressemble l'une de ces bases. Donc, ce n'est que la page d'accueil et j'ai montré dans le cours comment vous pouvez aller de cette mise en page large jusqu'à cette petite mise en page et adapter votre mise en page à toutes ces différentes pages. Maintenant, nous ne voulions pas toutes ces autres pages parce qu'alors le cours prendrait quelque chose comme, je ne sais pas, 100 heures ou quelque chose comme ça. Donc je viens d'expliquer la structure orale, comment tout fonctionne. J' ai guidé chaque élève à travers tout ce processus, expliqué comment tous ces différents éléments s'adaptent à ces différentes largeurs et hauteurs. Ensuite, nous sommes passés à la conception de sites Web réactifs pour notre écran de tableau de bord. Maintenant, nous avons aussi fait la même chose ici que nous l'avons fait ici. Donc, nous utilisons simplement l'écran d'accueil du tableau de bord et la même chose pour cette page. Donc tableau de bord, l'écran d'accueil et l'écran d'accueil du site Web ici aussi bien. Et nous les avons adaptés à travers toutes ces tailles différentes. Donc, fondamentalement, vous avez cinq tailles différentes. Et vous pouvez savoir combien de tailles votre client va prendre charge en leur demandant simplement si le client ne sait pas, s'il ne comprend pas, que, ils peuvent simplement demander, il y a des développeurs sur tous ces largeur différente. Ceci est particulièrement important dans la conception web, dans la conception d'applications aussi. Parce qu'imaginez juste que vous créez un design pour iPhone 12, par exemple. Et le client veut prendre en charge l'iPhone huit. Ils veulent aussi descendre à l'iPhone sept, mais ces vieux téléphones n'ont pas d'encoche sur le dessus. Par conséquent, vous devez adapter votre design aux besoins du plus petit écran. En outre, la densité de l'écran est différente. Donc, vous devez vous préparer en posant toutes ces questions à vos clients parce que c'est une chose différente. S' ils ont juste une page dans une taille et c'est tout. Ou s'ils ont comme nous le faisons ici. Alors vérifions ça. 246810121415, pages différentes, comme vous pouvez le voir, en cinq tailles différentes. Et nous faisons aussi des filaires comme ça. Et filaires sur un morceau de papier et de l'architecture de site web, tellement plus encore. Vous pouvez donc imaginer que ce projet vous prendra un mois ou deux à terminer, en fonction de l'activité du client et de la fréquence à laquelle il répond à vos commentaires. Donc, vous pouvez juste imaginer que cela va prendre beaucoup de temps pour terminer un projet comme celui-ci, plutôt que de simplement faire une seule page. Mais ça n'a pas vraiment d'importance. Le processus parle de lui-même et il est debout. Vous devez faire toutes ces choses si vous voulez garder une trace de ce que vous faites. Si vous voulez garder le client en boucle, si vous voulez les garder dans vos notes afin que vous puissiez faire toutes ces choses ou non. Mais une fois de plus, je l'ai dit au début, ils veulent faire plus de pages. Vous n'aviez aucune structure en place. Donc, ces pages vont sembler différentes de la page d'origine. Ensuite, vous devez également changer la page d'origine. Et maintenant, vous êtes à nouveau dans cette boucle. Donc avoir une structure solide en place dès le début. Donc, dès que vous commencez et commencez à concevoir va vous aider massivement plus tard et va aider votre client à évoluer et à développer ce projet à mesure qu'ils développent leur entreprise. Donc, après la conception responsive, comme vous pouvez le voir, nous avons guide de style de projet. Et le guide de style de projet contient tout, des appelants à la typographie en passant différentes tailles de police et poids de police, en passant par l'iconographie. Différents composants sont tellement plus. Et vous pouvez voir ici combien de styles de personnages nous avons, combien de couleurs nous avons. Et enfin, combien de composants nous avons. Vous pouvez voir qu'il y a beaucoup d'entre eux. Et enfin, une fois que cela est terminé, nous passons ensuite à la présentation du projet. Et je suis juste en train d'expliquer la 3D comment cela fonctionne dans l'espace. Et vous pouvez voir ici à quoi ressemblent ces trois composants. Donc, ce n'est qu'un seul composant. Ceci est l'état des composants Horace, mais nous parvenons à le créer en 3D pour donner ce genre de look. Après avoir expliqué la présentation, nous allons passer à Q et a. Et vous allez obtenir toutes ces informations supplémentaires, qui font partie du cours, et c'est essentiellement le cours lui-même. Une chose importante que je veux mentionner sont ces composants. Et je veux enfin te montrer à quoi ressemble tout ça. Les composants sont donc extrêmement importants car vous pouvez les mettre à l'échelle au fur et à mesure que vous vous déplacez. Laissez-moi vous montrer un exemple rapide. Si nous zoomons ici sur mon site web responsive design. Vous pouvez voir que ce sont des composants parce que si je double-clique ici, nous avons l'état du survol et nous avons l'état par défaut, et nous avons la même chose pour tous. Vous pouvez voir comment notre état et l'état par défaut. Donc, si nous passons de là, vous pouvez voir que nous avons la même chose pour ici. Donc, si je double-clique ici, vous pouvez voir que nous avons l'état d'horreur et nous avons l'état par défaut. Ce sont de gros appareils. Donc, une fois de plus, survolez l'état et l'état par défaut. Mais parce que ce sont des appareils moyens et des tablettes, nous avons seulement Horst, désolé, état par défaut parce que c'est tout ce dont nous avons besoin. Parce que sur la tablette, vous ne pouvez pas planer et la même chose vaut pour les mousses. Vous ne pouvez pas survoler l'écran du téléphone. Donc tu dois penser à toutes ces choses. Une fois que vous commencez à concevoir, vous devez adapter toutes vos pages. Et vous pouvez clairement voir que ce composant s'adapte bien. Vous pouvez voir comment le texte est vraiment bien enveloppé. La cote élevée s'étend pour remplir l'espace nécessaire. Tout semble en ordre et comme il se doit. Donc, fondamentalement, c'est tout au sujet des composants. Et enfin, laissez-moi frapper aperçu. Donc, je vais cliquer sur ce flux. Cliquez ici pour lancer mon aperçu. Et je vais vous montrer à quoi ressemblera tout cela si vous vous inscrivez à un cours et que vous allez obtenir toutes ces différentes animations. Donc, ici, nous avons un effet de vol stationnaire simple. Et vous verrez une fois que je commencerai à faire défiler, nous avons cet effet de morphisme de verre en arrière-plan et tout reste en place et reste fixe. Une fois que nous commençons à faire défiler. Ensuite, nous avons ces effets de survol avec ces icônes animées en arrière-plan. Nous l'avons aussi. Nous avons un effet de survol pour tous ces différents boutons. Vous pouvez voir une fois que vous survolez, ces flèches se déplacent. Et je peux aller à la page des comptes, par exemple, où que je sois. Et nous les avons ici. Nous avons donc un effet stationnaire ici et nous en avons aussi. Ainsi, lorsque vous cliquez sur certains d'entre eux, ils changent en fonction du service que le client offre à ce stade. Et désolé que mon ordinateur soit un peu bogué en C là. Donc, une fois que vous commencez à passer à travers toutes ces animations, vous allez obtenir toutes ces animations. Enfin, nous avons quelque chose comme des cartes et nous avons inclus quelques animations plus profondes ici avec le vol stationnaire, vous pouvez voir que le cœur est en expansion quelque chose comme un rythme cardiaque. Nous avons également cette animation avec l'ombre de fond ici ajouté également. De même pour ceux-ci, nous avons celui-là, donc la carte tourne. Nous avons des effets de survol sur tous ces différents boutons. Et une fois que vous avez parcouru toutes ces différentes pages, vous pouvez aller à la connexion. Vous pouvez cliquer sur Mot de passe oublié ou ne pas avoir de compte. Vous pouvez voir qu'il s'anime une fois que vous vous connectez, vous allez dans le tableau de bord et toutes ces différentes pages contiennent des informations différentes. Vous pouvez donc cliquer sur tous ces éléments. Par exemple, vous pouvez accéder à votre compte, disons, et vous pouvez basculer entre eux ici. Et c'est pourquoi les composants sont si importants comme un donjon expliquant, vous pouvez animer ces, vous pouvez obtenir l'effet plus élevé ici. Vous avez ces groupes défilants, comme ça. Et vous pouvez passer par tout ça. Et fondamentalement, c'est le design et la façon dont il est fait. Mais vous pouvez passer de l'un à l'autre. Vous pouvez changer différentes cartes, vous pouvez déposer des fonds à défausser et bien plus encore. C' est donc le design du cours. Vous pouvez vous inscrire à un cours. Et si vous regardez cela sur YouTube, une réduction massive va être liée ci-dessous. Alors assurez-vous de le vérifier et assurez-vous d'entrer ce code promo pour obtenir cette réduction massive parce que cette offre est limitée, alors assurez-vous de l'utiliser et c'est essentiellement tout pour tout ce projet. Je voulais juste vous montrer comment vous pouvez structurer vos projets de conception, comment vous pouvez les créer, et ensuite vous pouvez les mettre à l'échelle à plus grande échelle. Peu importe le nombre d'écrans que vous avez, peu importe le nombre de tailles que vous avez. Une fois que vous avez les bonnes bases en place, vous pouvez évoluer sans cesse. 23. Créer un design: Lorsque vous commencez à créer un design, comme je l'ai expliqué dans l'exemple précédent, vous pouvez faire beaucoup de ces différentes choses dans Adobe XD. Donc, je veux juste élaborer rapidement sur quelques-uns de ces différents conseils et astuces. Et tu peux toujours regarder mes cours. Vous pouvez toujours vérifier ma chaîne YouTube avec des tas de ces différents tutoriels si vous voulez aller en profondeur, c'est juste un cours de base et je veux juste garder agréable et court pour vous fournir le plus d'informations possible. Donc, si nous allons jeter un oeil à partir de l' exemple précédent ici, nous avons ce design de site Web. Je veux juste te montrer rapidement comment c'est fait. Donc, ce que nous avons ici, c'est cette navigation. Et vous pouvez voir ce que j'ai mentionné sur les états des composants. Vous pouvez avoir autant d'états de composants que vous le souhaitez. Vous pouvez inclure différents états de vol stationnaire. Tu peux faire ce que tu veux avec eux. Donc, dans cet exemple, comme vous pouvez le voir, nous avons des comptes d'Etat par défaut, des cartes de prêts, investir numérique. Donc, tous ces différents éléments de menu et plus nous avons inclus le composant à l'intérieur du composant, qui est pour ce bouton, qui a deux états. Donc, fondamentalement, cela peut devenir extrêmement compliqué ou il peut être extrêmement facile et simple quand vous venez de commencer, assurez-vous de garder les choses agréables et simples pour ne pas vous confondre. Mais une fois que vous obtenez une certaine exposition, une fois que vous avez une certaine compréhension de tout cela, assurez-vous d'essayer d'inclure les différents jours de composants parce que cela va vous rendre la vie beaucoup plus facile et beaucoup plus simple qu'avec un seul vous pouvez copier et coller partout ailleurs dans votre conception. Maintenant, en continuant, vous pouvez voir qu'il est corrigé lors du défilement. Donc, quand je clique ici pour ouvrir cet aperçu, vous pouvez voir quand je commence à faire défiler Que c'est corrigé parce qu'il dit à Adobe XD, assurez-vous de rester là où je vous mets quand il commence à ramper, assurez-vous d'être là. Vous pouvez voir que nous n'avons pas d'effet de vol stationnaire ici. Et c'est exprès parce que je ne voulais pas trop pendant mes étudiants. Mais j'ai expliqué que vous pouvez inclure différents effets d'horreur. Mais dans ce cas, je ne pense pas que cela fonctionne aussi bien à cause de cet effet de morphisme de verre que nous avons en arrière-plan. Je voulais inclure cet effet de fond juste pour garder les choses agréables et simples et le rendre un peu plus frais, parce que c'est tout le but de ce projet. Si vous allez à la courte vidéo de conception dans le cours, vous allez comprendre pourquoi, parce que c'est le public cible, public cible spécifique pour ce projet exact. Donc, un fond blanc ne va pas faire juste mort. Mais si vous faites un fond d'une couleur comme le blanc, gris, le gris foncé, le noir, quelle que soit la couleur que vous incluez, alors vous pouvez inclure un effet plus élevé pour chacun de ces éléments de menu, comme nous le faisons ici pour le bouton de connexion par exemple. Donc, c'est juste l'état par défaut. Il s'agit d'un état de vol stationnaire et vous pouvez voir qu'il fonctionne peu importe où vous vous trouvez. Mais avec cet effet de morphisme de verre, il n'a vraiment pas l'air si bien d'avoir cet effet de vol stationnaire. C' est ainsi que cela est terminé. Et ensuite, je veux vous montrer nos groupes défilants. Maintenant, vous pouvez voir ici que nous avons quatre drapeaux différents. Nous en avons quatre ici, mais nous en avons trois ici, nous en avons deux ici. Et c'est fait avec des groupes défilants. Donc, si je vous emmène ici à la page d'origine, vous pouvez voir à quoi ça ressemble. Nous avons donc 246 drapeaux différents avec six taux de change différents. Mais ici sur une version mobile, par exemple, nous avons juste à, alors laissez-moi rapidement vous emmener à la, celui-ci. Donc, il est 40 comprimés et pourrait cliquer agrandir. Et descendons où ils sont. Ils sont là. Donc, ce que les utilisateurs peuvent faire est simplement de taper. Et faites défiler entre tous ces, puis allez à gauche et à droite. Donc, ce que cela fait est que vous préparez votre conception pour différents appareils dans différentes tailles d'appareil et différentes tailles d'écran. Et vous faites cela, dans ce cas avec quelque chose qui s'appelle un parchemin. Et lorsque vous cliquez juste là, vous pouvez voir que ce défilement horizontal est inclus. Vous pouvez également inclure un défilement vertical. Et je peux même vous le montrer dans cet exemple, qui est pour notre tableau de bord responsive design. Ou on peut même monter ici. Si je clique ici et puis cliquez ici, aperçu, vous pouvez voir que nous avons un défilement vertical inclus ici, qui est génial parce que vous pouvez définir ce qui est génial parce que vous pouvez définirces points de coupure et vous n'avez pas besoin d'étendre votre conception jusqu'au bas. Vous pouvez simplement utiliser l'espace que vous avez. Et puis vous pouvez simplement inclure ces groupes défilants en place. Ainsi, vous pouvez montrer toutes ces données et informations différentes et supplémentaires plutôt que simplement étendre votre conception en faisant défiler votre conception dans son ensemble. Et enfin, vous pouvez faire beaucoup plus avec ça. Nous n'avons pas de carte à cet exemple concret. Mais ce que vous pouvez aussi faire est de faire ces animations. Donc, si je double-clique à l'intérieur, vous pouvez voir que nous avons l'état par défaut. Nous avons un état de vol stationnaire. C' est vraiment assez simple, mais il y a aussi quelques ombres portées incluses. Il y a un cercle inclus ici. Il y a donc beaucoup de choses qui se passent, mais ça a l'air assez simple et ça a l'air assez sympa. Et aussi avec cet exemple ici, par exemple, nous avons la même carte que ci-dessous, mais maintenant son effet de vol stationnaire est beaucoup plus grand. Et vous pouvez voir que cette ombre de fond devient beaucoup plus sombre une fois que vous êtes dans l'état d'horreur. Ainsi, vous pouvez faire toutes ces choses supplémentaires différentes avec vos composants. Et enfin, donnons à cela un monde par exemple. Donc, comme vous pouvez le voir, toute cette section est, Regardons cela dans le panneau des calques aussi. Donc nous avons besoin que j'ai besoin d'un prêt est, comme vous pouvez le voir, un composant. Et vous pouvez passer à l'état par défaut qui est fermé, alors toutes les icônes ne sont pas comme ça. Vous pouvez aller à ce premier état, il est sélectionné, les autres ne le sont pas. Et vous pouvez voir quand les utilisateurs commencent à cliquer entre toutes ces dates, ils changent en fonction de ce qu'ils ont cliqué ou ils peuvent passer à l'état par défaut. Et toutes ces informations ci-dessous vont s'effondrer jusqu'ici. Et puis, quand ils cliquent ici, par exemple, il va se développer et aller jusqu'au bas. Ainsi, comme vous pouvez le voir, vous pouvez faire beaucoup de choses différentes dans Adobe ASD en termes de conception. Rendez-le aussi simple que possible ou vous pouvez le rendre aussi complexe que possible en fonction de vos compétences et du projet en question. Certains projets ne nécessitent vraiment aucune animation complexe et dans des transitions complexes, des conceptions complexes, tandis que d'autres exigent que vous le fassiez. Assurez-vous donc que lorsque vous commencez à apprendre, lorsque vous commencez à grandir, lorsque vous avez commencé à gagner une certaine exposition et une certaine traction dans ce rôle de conception UI UX. Assurez-vous d'essayer de vous concentrer sur l'expansion de vos compétences autant que possible. Assurez-vous d'apprendre autant que possible les raccourcis car il est extrêmement important plus tard de connaître le plus grand nombre possible de ces raccourcis car ils vont vous aider massivement. 24. Prototypage de votre conception: La prochaine partie d'Adobe XD, que je veux couvrir est le prototypage. C' est vraiment important parce que par le passé, par exemple, si vous avez créé vos designs dans Photoshop, vous devez utiliser des ressources externes, quelque chose comme imaginer pour créer des prototypes. Donc, vous devez exporter tous vos fichiers Photoshop ou LinkedIn avec envision, puis y créer vos prototypes. Ensuite, vous devez envoyer une vision liée à votre client. Le client doit répondre. Là, vous avez notification par e-mail, ce qui est tout simplement trop compliqué pour aujourd'hui monde en développement rapide. Donc, Adobe XD a ces excellentes fonctionnalités incluses à l'intérieur, qui est le prototypage. Ainsi, vous pouvez créer, prototyper et partager ou collaborer avec vos clients ou coéquipiers au sein d'une seule application, sans avoir besoin de changer ces applications sans avoir besoin de payer pour des ressources externes, vous avez tout une application et vous pouvez commencer gratuitement. Alors laissez-moi vous montrer dans cet exemple, nous avons prototypé ici. Donc je t'ai montré un design. Lorsque vous cliquez sur prototype, vous pouvez voir que instantanément toutes ces broches bleues ont commencé à apparaître. Et c'est pour ces flux. Donc, vous pouvez voir que sur ce flux, nous n'avons aucun lien avec ce flux. Nous avons beaucoup de ces différents liens avec ce défaut. On n'en a pas. Et avec ce flux, nous n'en avons pas. Mais quand je clique ici, vous pouvez voir que nous le faisons toujours. Et aussi quand je clique sur ce notre tableau, vous pouvez voir que nous le faisons toujours et il est toujours connecté à certains de ces écrans principaux. Donc, ce que tout cela signifie dans la traduction vers l'anglais, c'est que vous pouvez connecter tous vos rapports entre eux. Vous pouvez les connecter avec une seule taille, comme je vous l'ai montré pour la taille du site Web. Mais vous pouvez également les connecter avec la taille responsive. Et vous pouvez montrer directement à vos clients comment tout cela va ressembler. Donc, lorsque vous commencez à partager et que nous allons arriver au partage dans un expert, alors vous pouvez partager soit un flux, ce qui est juste par exemple, conception de site Web pour les postes de travail, soit vous pouvez simplement partager tous les flux, qui est toutes les conceptions de sites Web dans toutes les tailles. Donc, si je vous montre à quoi ressemblent ces prototypes, laissez-moi passer à la conception de site web. Vous pouvez voir combien d'interactions nous avons ici. Donc, si nous zoomons vraiment agréable et fermons et cliquez sur ce rpart et vous pouvez voir sa conception de page d'accueil. Ceci est compté conception de prêts de concepteur et ainsi de suite et ainsi de suite. Chacun d'entre eux. Et encore une fois, vous pouvez aller dans le cours, vous pouvez jeter un oeil et parce que c'est plus de 20 heures de long. Et encore une fois, c'est juste un cours de base pour expliquer toutes les bases de D. d'Adobe Si vous vous inscrivez au cours, nous allons passer en revue toutes ces différentes pages et je vais expliquer les rapports sexuels. Toutes ces interactions, les Blancs connectés comme ça. White est terminé comme ça. Et ce que vous auriez dû faire mieux pour vos propres projets personnels. Donc, ce que vous voyez ici avec ces lignes bleues est fondamentalement, vous pouvez cliquer d'une partie de votre sont ennuyés, faites glisser cette ligne bleue à une autre. Une fois que vous êtes en mode prototypage. Puis ici dans le panneau d'interaction, qui apparaît et je vous ai déjà expliqué que ce panneau de droite change tout ce que vous sélectionnez. Donc, dans le mode de conception, il semble différent. Dans un mode prototype, il a l'air différent. Et dans le mode de partage va regarder différents à nouveau. Et je vais le montrer ensuite. Ici, ce que nous avons, c'est l'interaction. Donc d'abord, nous avons un déclencheur. Donc, ce que les utilisateurs font dans notre cas, ils doivent taper pour aller à cette page. Mais vous pouvez également choisir glisser, survoler, les touches et la manette et le sol de la voix. Il peut rapidement élaborer certains d'entre eux parce qu'ils peuvent obtenir un temps d'aura extrêmement complexe. Donc, une fois de plus, onglet, vous pouvez l'utiliser pour les bureaux ou vous pouvez les utiliser pour mobile. Donc, appuyez peut signifie essentiellement le robinet d'une souris ou le robinet de doigt. Donc, peu importe l'appareil que vous utilisez, vous pouvez utiliser l'onglet. Drag est fondamentalement celui que je vous ai montré précédemment dans la vidéo précédente avec ces drapeaux, par exemple. Donc, lorsqu'ils sont sur un appareil mobile, ils peuvent cliquer pour faire glisser vers la gauche ou la droite, ou ils peuvent même le faire sur la conception de site Web si vous avez besoin de couper quelque part pour qu'ils puissent faire glisser de gauche à droite. Par exemple, le survol est ce que nous avons expliqué plusieurs fois. Ainsi, par exemple, avec ces boutons, vous pouvez inclure différents effets de survol. Les clés, les lits de jeu de fin est fondamentalement, si vous créez une expérience pour un jeu, vous pouvez inclure quelque chose comme la manette PlayStation ou la manette Xbox. Et puis vous pouvez programmer ce que chaque clé fait. Et puis une fois que vous commencez à partager leur prototype avec votre client, s'ils ont la même manette, ils peuvent essentiellement jouer à ce jeu avec vous à l'intérieur d'Adobe XD, qui est extrêmement cool. Et enfin, nous avons la voix. Vous pouvez donc faire quelque chose comme Google Assistant, Amazon, Alexa ou Siri. Vous pouvez intégrer tous ces différents contrôleurs si vous concevez pour la voix. Ensuite, nous avons de l'action. Alors que se passe-t-il lorsqu'un utilisateur appuie sur l'action qui va prendre ? Re peut aller transition. Nous pouvons faire auto-animer oralement, faire défiler la lecture audio intégrée précédente ou la lecture vocale. La transition est essentiellement, il, des transitions d'une page à l'autre. L' animation automatique est ce futur magique d'Adobe XD, qui utilise l'IA pour apprendre ce que vous devez faire. Et vous pouvez regarder mes cours ou mes vidéos YouTube parce que j'utilise l'animation automatique tout le temps. J' adore vraiment ça. Et fondamentalement, il sait ce que vous devez faire entre deux états et ennemis sans faille, de sorte que vous n'ayez pas à créer quelque chose comme des images clés dans Adobe After Effects, par exemple, ou quelque chose du genre. Nous avons déjà, ce qui est génial si vous concevez pour mobile. Donc, vous avez ce menu sur le côté, par exemple, et vous devez appuyer sur l'icône de menu, puis cette superposition de menu apparaît. Donc, les dettes pourquoi c'est utile pour, mais vous pouvez également l'utiliser pour les éléments de menu dans la conception de site Web si vous avez besoin que la fonction orale en place, nous avons défiler trop, sorte que vous pouvez créer des liens d'ancrage. Par exemple, s'il s'agit d'une page singulière et que toutes ces sections sont différentes , les utilisateurs peuvent faire défiler toutes ces différentes conceptions. Et puis, par exemple, quand ils cliquent sur cette page, va faire défiler pour entendre. Quand ils cliquent sur cet élément de menu, il va faire défiler ici. Et bien plus encore. Les tableaux d'art précédents parlent de lui-même. La lecture audio est, Si vous avez besoin, par exemple, pour créer un état étroit. Quand ils tapent là, il va jouer que la lecture audio et la lecture vocale est géniale. Encore une fois, pour la voix, si vous concevez pour ces aides, conservée position de défilement fait essentiellement ce qu'il dit sur les dix. Si vous cliquez là, et par exemple, il va ici, va préserver la position de défilement. Dans ce cas, ça va être au sommet. Mais si vous le faites ici, par exemple, il sera à la même position lorsque le charbon osera destination. Ainsi, vous pouvez choisir celui de ces ports que vous voulez animation, vous avez un tas de ces différentes animations en place. Et enfin, nous avons facilité vu comment l'animation va ressembler. Est-ce qu'il va aller en dur, ne va pas à la guerre en doux est que vous allez sortir dur ou doux va rebondir. Est-ce que ça va se mettre en position ? Ainsi, vous pouvez choisir entre tous ces éléments. Et si vous cliquez ici, vous pouvez aller de non est facile un maintenant facile à accrocher, windup et rebondir. Vous avez toutes ces options différentes. Et enfin, nous avons de la durée. Alors, combien de temps cette action va prendre ? Donc, dans notre cas, quand ils tapent, il va passer à la conception de comptes à l'aide animation de dissoudre avec facilité l'assouplissement des notes. Et ça va durer 0,4 seconde. Maintenant, vous pouvez ajouter des actions supplémentaires ici, donc animation supplémentaire, mais je ne vais pas vous déranger à ce stade. Donc, fondamentalement, comment tout cela ressemble en place. Je vais cliquer ici, je vais cliquer sur l'aperçu. Je vais cliquer sur les comptes. Et il va passer à cette page en particulier. Une fois qu'ils cliquent sur le logo, par exemple, va les amener à la page d'accueil. Et vous pouvez voir une fois qu'ils cliquent sur les comptes, cela va apparaître. Mais une fois que vous cliquez sur le prêt va y passer et réduire en taille. Ainsi, vous pouvez faire toutes ces choses et bien plus encore dans Adobe XD avec ces fonctionnalités de prototypage sans avoir besoin d'aller à des outils externes comme la vision, par exemple, dans le passé. Ou vous n'avez pas besoin de payer pour des services supplémentaires. Vous avez tout cela inclus dans Adobe XD pour commencer tout de suite. 25. Partagez votre conception: Un autre outil étonnant qu'Adobe XD a est le partage. Donc, comme je l'ai dit, vous pouvez concevoir un prototype et partager tout au sein d'une seule application, et il est situé juste ici en haut. Donc, une fois que vous avez terminé la conception, une fois que vous avez terminé le prototypage et connexion de tous vos tableaux d'art dans différents états, sur différents écrans. Ensuite, il est temps de partager avec vos clients. Et il est important de noter que vous pouvez partager à tout moment de votre processus de conception. Ainsi, par exemple, si vous êtes en phase filaire, vous pouvez partager à partir d'oser obtenir des commentaires, puis passer à cette rétroaction et créer la conception sont mis à jour ce prototype, mettre à jour ce lien et le partager avec le client une fois de plus, ils peuvent ensuite vous fournir des commentaires sur la conception de sites Web ou la conception réactive et ont vu beaucoup plus encore sur les guides de style et la présentation de projets. Donc, à n'importe quel moment de l'étape du projet, ils peuvent vous fournir les commentaires. Alors, comment peux-tu vraiment le partager ? Eh bien, comme je l'ai dit au début, j'utilise une version gratuite juste pour illustrer que vous pouvez le faire peu importe où vous êtes dans un monde, vous pouvez commencer gratuitement avec cela. Donc, fondamentalement, avec la version gratuite, vous n'avez qu'une seule option de partage de liens. Donc, si vous travaillez sur plusieurs projets en même temps, vous devrez payer pour Adobe XD. Mais sur leur site, ça dit que c'est juste neuf dollars par mois. Ou si vous disposez d'un package Adobe Premium, si Creative Cloud est payé et qu'Adobe XD est également inclus dans cet abonnement Creative Cloud. Ainsi, lorsque vous voulez partager, vous pouvez simplement sélectionner ce que vous voulez partager. Dans notre cas, nous voulons partager la conception de ce site web. Vous pouvez également partager le jeu et la conception de tableau de bord, mais je veux partager cela. Et vous pouvez choisir différents paramètres. Donc, pour un examen de conception et obtenir des commentaires sur votre conception ou prototype, que les commentaires peuvent être fournis soit par les coéquipiers, vos parties prenantes client, même les développeurs, développement. Vous pouvez partager votre conception ou votre prototype avec des développeurs. Et ce que cela fait, c'est qu'il fournit des extraits de code pour vos développeurs. Ainsi, ils peuvent facilement voir, par exemple, à l'intérieur du CSS quels appels vous avez utilisés, espacant l'utilisation lourde, ce qui limite l'utilisation intensive. Ainsi, par exemple, avec la typographie, quelles tailles avez-vous utilisées pour qu'ils puissent commencer à l'intégrer immédiatement. Et si vous utilisez des polices basées sur le Web, par exemple, ces polices Google que nous utilisons dans ce cours. Ensuite, ils peuvent facilement intégrer le lien vers ces polices, puis commencer avec le code tout de suite. Ensuite, nous avons une présentation optimisée pour présenter vos designs, ce qui est génial. Si vous êtes, par exemple, allez au bureau de votre client et que vous voulez le présenter sur un grand écran, puis il passe en mode plein écran sans aucune distraction. Et vous pouvez présenter âme de sorte de comme une présentation PowerPoint par exemple. Ensuite, nous avons continué à tester les utilisateurs, ce qui est idéal pour tester votre prototype. Vous pouvez masquer dans ce mode de test utilisateur, par exemple, vous pouvez masquer tous ces différents éléments comme la navigation. Vous n'autorisez donc pas vos utilisateurs à voir où ils doivent cliquer. Ils doivent comprendre ça par eux-mêmes. Ils peuvent ainsi vous fournir les commentaires et vous pouvez savoir où vous devez aller de l'avant. Et enfin, vous avez personnalisé et vous pouvez créer une expérience personnalisée à partir de tous ces accès de lien combiné. Donc, n'importe qui avec le lien n'a invité que les gens. Vous pouvez les inviter par e-mail et toute personne avec le mot de passe peut protéger vos liens par mot de passe. Enfin, tout ce que vous devez faire est de cliquer sur Créer un lien. Et avant que je ne le fasse, vous pouvez simplement renommer ceci. Allons avec la nouvelle conception du site de la banque pour correspondre un peu. Ce que nous avons ici frappé créer un lien. Et en fonction de votre vitesse d'Internet, selon la taille de votre prototype, selon la quantité de données qu'Adobe XD doit télécharger dans le cloud. Cela peut prendre plus ou moins longtemps. Donc, peu importe ce que vous créez, assurez-vous de garder cela à l'esprit. Si vous êtes dans un calendrier serré, si vous avez un budget serré, assurez-vous de projeter cela dans cela. Parce que parfois il peut prendre beaucoup de temps pour télécharger et parfois il peut prendre beaucoup de temps pour vos clients pour les ouvrir s'ils ont une connexion Internet lente. Une fois le partage terminé, vous allez obtenir un lien comme celui-ci. Et ce que vous pouvez faire est de copier ce lien. Vous pouvez intégrer ce lien dans une présentation Behance, par exemple, vous pouvez le mettre dans votre propre site Web et encore une fois, vous pouvez accéder aux autorisations ici. Et n'importe qui avec le lien, vous pouvez changer ça. Vous pouvez leur donner accès ou non. Et fondamentalement une fois que vous copiez et collez ce lien dans votre navigateur ou l'envoyez au client. Voici à quoi ressemblera l'expérience globale en fonction de ce que vous avez sélectionné ici dans Adobe XD. Alors est-il pour la révision de la conception, est pour le prototypage, est-ce pour les développeurs ? Et bien plus encore. Donc, une fois de plus, ce qu'ils peuvent faire ici, c'est qu'ils peuvent faire défiler comme si c'était une vraie page. Ils peuvent cliquer sur n'importe lequel de ces liens. Vous pouvez voir que les effets de survol fonctionnent toujours. Ils peuvent faire un commentaire, ils peuvent faire glisser un stylo, par exemple, ici. Et ils peuvent dire, par exemple, supprime ce cercle. Et une fois qu'ils soumettent, vous pouvez voir que supprimer ce cercle est sur cette page. Donc, la conception de la page d'accueil, et vous pouvez naviguer votre chemin vers la conception de la page d'accueil. Vous pouvez également cliquer ici, et il va vous montrer toutes vos différentes pages de ce flux que vous avez partagé. Parce qu'une fois de plus, nous ne partageons ce flux qu'au sein d'une action, n'importe lequel de ces autres flux. C' est pour ça que ça montre ça. Et fondamentalement, vous pouvez aller à votre travail et continuer là où vous vous êtes arrêté, et vous pouvez cliquer là pour accéder à nouveau au prototype. Donc, fondamentalement, c'est comme ça que tout cela fonctionne. Et ce que vous pouvez également faire est de naviguer entre ces différentes pages pour montrer à vos clients comment les pages vont ressembler. Ce que vous pouvez faire est d'afficher ou de masquer des commentaires. Vous pouvez aller à la page d'accueil, qui est cette page dans ce cas, comme je l'ai dit, ils peuvent cliquer à travers différentes pages. Allons donc aux poumons, par exemple. Ils peuvent y aller et vous pouvez voir qu'il y a un commentaire sur la conception de la page d'accueil. Ils peuvent cliquer là et y accéder et vous pouvez voir qu'il est étiqueté numéro un. Si nous faisons un autre commentaire, il sera étiqueté numéro deux. Et bien plus encore. Qu' est-ce qu'ils peuvent aussi faire, c'est y retourner. Vous pouvez mentionner n'importe quel autre utilisateur ou coéquipier. Vous pouvez inviter les gens à entendre. Vous pouvez le développer pour qu'il soit en plein écran. Vous pouvez masquer des commentaires et bien plus encore. Fondamentalement, quand vous commencez avec le partage du développeur, comme je l'ai dit, vous allez obtenir des extraits de code. Vous allez obtenir du CSS, vous allez obtenir des états de composant. Vous allez obtenir toutes ces informations supplémentaires qui ne sont pas pertinentes pour votre client. Et sauf s'ils ne se citent pas eux-mêmes ou s'ils ne comprennent pas le code. Donc, ils veulent juste vérifier rapidement quelques choses ici et là. Mais fondamentalement, vous pouvez partager cela avec les développeurs. En ce qui concerne les tests de l'utilisateur, vous pouvez essentiellement tester cela en plein écran sans tout cela. Parce que comme vous pouvez le voir, si je clique quelque part à l'extérieur, cela montre où ils peuvent cliquer. Donc, s'ils cliquent ici, ça va les amener à cette page numérique. Mais dans la méthode de test de l'utilisateur, cela ne va pas les montrer, leurs utilisateurs doivent comprendre cela pour eux-mêmes et vous devez décider testant s'il est facile pour eux d'accéder à toutes ces pages ou non, et ce que vous devriez changer, ce que vous devriez garder. Enfin, la dernière partie cruciale de ce processus de conception est le partage de vos fichiers une fois qu'ils sont terminés. Une fois la conception terminée, prototypage, une fois que tout est terminé, vous devez partager ces fichiers avec vos clients et développeurs et c'est ce qui vient ensuite. 26. Exporter vos fichiers: Enfin, le dernier élément de l'agitation du projet de conception est de partager votre design avec les clients et les développeurs. Donc, une fois que tout est terminé, vous devez l'exporter et vous devez l'emballer de manière à être facile à comprendre tant pour vos clients que pour vos développeurs. Donc, dans notre cas, ce que nous avons ici, c'est que nous avons un grand bureau, nous avons un design réactif. Imaginez donc que nous avons créé ceci pour toutes ces autres pages. Le moment est donc venu de l'exporter et de le partager avec nos clients et développeurs. Donc, avant de le faire, je recommande toujours aux gens et à mes étudiants de créer une sorte de structure de dossier, modèle organisationnel pour pouvoir partager cela avec vos clients et développeurs afin qu'ils puissent facilement le comprendre comme dès qu'ils l'obtiennent afin qu'ils puissent commencer à travailler et ne pas enliser avec des questions et des commentaires supplémentaires. Donc, ce que j'aime faire, c'est que j'aime créer une structure de dossiers. À l'intérieur de cette structure de dossiers, j'aime avoir mon fichier principal, qui est le fichier Adobe XD. J' aime aussi créer un dossier comme celui-ci, qui s'appelle Assets. Sont tous des actifs ou ce que vous voulez. Et vous pouvez inclure des icônes, vous pouvez inclure des images, vous pouvez inclure un fichier PDF, et vous pouvez également le faire en les plaçant simplement à l'intérieur d'un dossier. Ainsi, les images, par exemple. Et copions et collons, et appelons ceci, par exemple, des icônes. Et à l'intérieur de la dose, par exemple, si vous utilisez à la fois des icônes SVG et PNG, vous pouvez les inclure. Si vous utilisez des images PNG et JPEG, vous pouvez les inclure. Si vous utilisez, par exemple, des fichiers PDF différents, vous pouvez les séparer. Donc, peu importe la taille de votre projet et la taille de la quantité de fichiers va obtenir. Vous pouvez simplement les diviser en dossiers et va être beaucoup plus simple pour vos clients et développeurs de naviguer vers cette structure de dossiers que de simplement leur envoyer tout dans un seul fichier zip. Donc ils doivent le comprendre par eux-mêmes. En ce qui concerne les tailles elles-mêmes, vous pouvez voir que nous avons toutes ces différentes pages juste ici. Et pour chacun de ces dossiers, j'ai créé une fois de plus, une structure de dossiers. Donc les grands ordinateurs de bureau, les ordinateurs de bureau, les grands périphériques, les périphériques moyens et les petits périphériques. C' est juste mon cas et le cas de ce projet particulier. Donc, si je vous ramène au fichier Adobe XD, vous pouvez voir à quoi cela ressemble, mais votre projet pourrait finir par paraître différent. Demandez simplement à vos développeurs quels types d'appareils et quelles tailles ils vont prendre en charge. Par conséquent, vous allez être en mesure de mieux comprendre comment pouvez-vous structurer votre structure de dossiers lorsque vous commencez à partager ces fichiers avec vos clients et développeurs, vu une fois de plus, avec la structure de dossiers, selon les tailles que vous allez créer, vous allez avoir un plus grand nombre ou petit nombre de ces dossiers dans la même chose pour les acides. Alors peut-être que vous n'utilisez qu'une seule icône, peut-être dix, vous pouvez les mettre ici. Ou si vous utilisez un grand nombre d'icônes comme nous le faisons ici. Donc, si je vous amène à mes ressources de documents et que je fais défiler vers le bas, vous pouvez voir combien d'icônes différentes nous utilisons. Par conséquent, nous devons exporter tous ces acides différents et dans la taille des actifs. Alors assurez-vous simplement de demander à vos développeurs, ont-ils besoin d'avoir ces icônes de différentes tailles ? Ou il peut simplement leur envoyer une icône SVG par exemple. Et puis ils peuvent les adapter à l'intérieur de toutes ces tailles. Parlez donc vraiment avec vos développeurs, parlez avec vos clients de ce dont ils ont besoin. Avant de commencer à les envoyer. Par conséquent, vous allez beaucoup réduire votre charge de travail. Donc, quand vient le temps de vraiment bien exporter ces différentes choses. Donc, ce que nous avons ici, c'est, par exemple, grands bureaux et je veux exporter cette image. Je sais que c'est une image PNG. Donc, ce que je peux faire est simplement sélectionné, je peux appuyer sur Control ou Command E ou peut clavier et je peux l'exporter en PNG parce qu'il n'a pas d'éléments d'arrière-plan. Juste ici est juste une image PNG. Si c'était juste une image plate comme celle-ci, ceci, ceci, et ceci par exemple, alors je choisirai ceci pour être JPEG. Si vous avez affaire à des icônes, il est toujours recommandé s'ils sont SVG de les exporter en SVG, ils sont PNG pour l'exporter en PNG. Mais une astuce rapide, assurez-vous d'utiliser autant que possible les icônes SVG parce qu'elles sont infiniment évolutives et qu'elles ne perdront pas de qualité une fois qu'elles seront réduites en taille. Donc, ce que nous avons enfin ici est PDF. Et ce que je peux vous montrer pour le PDF. Par exemple, vous souhaitez exporter ce guide de style de projet. Ce que vous pouvez faire est simplement de cliquer sur Control E, choisir pdf à partir d'ici, puis vous pouvez simplement l'exporter au format PDF. Ou PDF peut avoir plusieurs fichiers PDF ou pages. Ainsi, vos clients sont des développeurs, peuvent simplement faire défiler toutes ces différentes pages pour voir où ils sont. Mais revenons vite à ici. Donc, je vais encore une fois, vous pouvez, une fois que vous sélectionnez votre article, vous pouvez appuyer sur Contrôle E. Comme nous l'avons dit, c'est un PNG que vous pouvez choisir pour la conception va exporter à 1X. Si vous concevez ceci pour le web, ce que nous avons fait, il peut exporter cela comme un x et 2x. Mais une fois de plus, assurez-vous de parler avec vos développeurs à la nécessité de cette taille supplémentaire parce que nous avons design réactif en place et assurez-vous simplement de leur demander ce qu'ils ont besoin d'exporter ? Parce que cela va vous faire gagner beaucoup de temps parce que dans certains cas, vous avez juste besoin d'exporter l'image une fois et ensuite ils vont l'adapter à travers le code. Mais parfois, vous devez exporter cette image ou cette icône, peut-être une illustration, toutes ces tailles différentes parce qu'elles ne peuvent pas l'adapter dans le code vraiment bien et vous devez le faire dans la conception. Donc, une fois de plus, la communication est essentielle ici, et il est crucial pour vous, vos clients et les développeurs de passer un bon moment sur ce projet. Donc, ce que nous avons ici est iOS, sorte que vous pouvez sélectionner 123 x un x est la taille originale. Deux axes doublent la taille, ce qui est triplé la taille. Et enfin, où vous voulez exporter cela. Donc, si nous vous ramenons ici, par exemple, nous avons la page d'accueil et nous avons un grand bureau. Donc ça va être notre modèle de navigation. Donc, peu importe ce que vous choisissez ici, ça va vous emmener à cet endroit. Enfin, nous avons Android N va exporter avec toutes ces tailles différentes. Et il y a juste Android et comment il est organisé. Pour SVG est que vous pouvez avoir tous ces attributs différents et vous pouvez choisir, Voulons-nous utiliser CSS interne ou ils peuvent utiliser l'optimisation externe minifiée donc va réduire la taille du fichier encore plus PDF comme expliqué. Et enfin, ce que nous avons ici, c'est JPEG. Alors est-ce le design ou est-ce Web ? Encore une fois, si vous choisissez le web, il va exporter ces 1X et 2X. Et enfin, c'est là que vous voulez exporter vos fichiers aussi. C' est fondamentalement tout pour exporter, comme vous pouvez le voir, cela peut être assez simple. Ce que tu peux faire. Et laissez-moi rapidement vous montrer que aussi, est que vous pouvez sélectionner plusieurs d'entre eux. Donc, par exemple, nous avons ces drapeaux. Je peux aller dans ma palette de calques et voir où ils sont. Donc, ce que vous pouvez faire est simplement d'ouvrir tous ces éléments. Vous pouvez tenir votre ancien Kim ou option sur Mac. Vous pouvez faire défiler vers le bas, sélectionnez-les tous. Et une fois que vous aurez atteint le contrôle E, je sais que ce sera PNG. Je peux les utiliser pour le design parce que je n'ai pas besoin qu'ils soient à un x 2x et 3x. Et je peux simplement cliquer sur exporter une fois que j'ai sélectionné mon dossier désigné pour savoir où je veux qu'ils soient exportés, il suffit de cliquer sur Exporter et il va exporter dans toutes ces tailles différentes, dans ces différents formats de fichiers que vous avez sélectionné. Et chacun d'entre eux va être nommé comme votre nom eux juste ici. Donc, une fois de plus, nommer vos couches est crucial ici parce que, comme vous pouvez le voir, il vous rattrapera tôt ou tard. Donc ici vous envoyez ces fichiers aux développeurs. Vous devez nommer vos fichiers afin que les développeurs puissent comprendre ce que sont ces fichiers. Donc, ils peuvent réellement les utiliser dans le code. Peu importe si vous créez une conception de tableau de bord de conception de site Web n'a pas d'importance. Vous devez toujours nommer vos couches. Alors pourquoi ne pas commencer plus tôt que tard et arrêter de perdre votre temps ici après que vous avez terminé le projet et que vous voulez juste que ce soit en orbit. Donc c'est fondamentalement tout. C' est ainsi que vos fichiers d'exportation dans Adobe XD. Et ce sont les différents formats qui sont pris en charge par l'option native d'exportateur Adobe XD. 27. Créer un système de conception: Les systèmes de conception sont un excellent moyen d'organiser de grands projets car dès que vous commencez à mettre à l'échelle votre projet est dès que vous commencez à ajouter de nouvelles pages, de nouvelles tailles réactives, peut-être même une application mobile, tout doit paraître cohérent, tout a semblé cohérent, et tout doit regarder comme il appartient au même projet, qui le croient ou non, il peut être extrêmement difficile lorsque vous commencez à mettre à l'échelle. C' est alors que les petites et grandes entreprises, en particulier les grandes entreprises, ont tous ces systèmes de conception en place. Alors qu'est-ce qu'un système de conception est ajuster pour la conception, ou est-ce tellement plus ? Vérifions ça. Donc ici, j'ai ouvert le système de conception de carbone et vous pouvez réellement aller de l'avant et télécharger cela à partir de leur site Web. Donc, ce qu'est le système de conception carbone, c'est pour le système de conception open source d'IBM pour leurs produits et expériences numériques. Donc, vous pouvez voir que ce ne peut pas être seulement pour les produits. Il peut aussi être pour une expérience numérique. Cela peut être pour les expériences analogiques. Ainsi, le système de conception peut englober tous ces groupes et fonctionnalités supplémentaires. Donc, ce que nous avons ici, vous pouvez tout lire sur le carbone, mais quand il s'agit de concevoir, vous avez des enfants de conception, vous avez d'autres ressources, des tutoriels. Quand il s'agit de développer, vous pouvez commencer. Framework a tellement plus. Ce qui est intéressant ici est et les lignes directrices. Donc, si je clique ici, vous pouvez voir qu'ils ont discuté d'eux saluer créé pour eux-mêmes. Ils ont des règles d'accessibilité. Ils ont des rôles de contenu, des règles de couleur, des règles d'icônes, pictogrammes, de l'espacement des mouvements, des équipes, topographie, et ont vu beaucoup plus. Donc, vous pouvez faire toutes ces choses différentes. Fournir la dette, vous pouvez créer ce projet. Donc je ne sais pas pourquoi ça prend tant de temps à ouvrir. Alors ouvrons dans cet onglet pendant qu'il se charge. Laisse-moi te montrer ça rapidement. Donc, c'est comme cela que ces systèmes de conception. Donc, vous pouvez voir si je commence à défiler, que toutes ces expériences sont exactement les mêmes, peu importe les appareils que vous êtes, vous soyez sur ce gros appareil comme iMac ou sur un ordinateur portable, un téléphone mobile, une montre, ça n'a pas d'importance. Il a l'air exactement le même. Mais ce qui est plus important parce qu'Audi est une société automobile, il ressemble exactement à la même voiture. Ainsi, les utilisateurs ont exactement la même expérience peu importe s'ils utilisent l'application Audi, par exemple, s'ils ont visité leur site Web ou s'ils sont assis dans le produit Audi réel, c' est-à-dire la voiture, ils utilisent l'infodivertissement , par exemple. Ensuite, en utilisant la navigation, tout semble exactement le même, incohérent et comme s'il appartenait à toute cette expérience. Donc si je vous emmène ici, non ? Nous avons une interface utilisateur réactive, nous avons des composants d'outils étrangers. Donc, si je clique ici, nous avons des boutons, par exemple. Et vous pouvez voir à quoi ressemblent leurs boutons. Donc, ils ont petit, moyen, grand. Vous pouvez voir comment cela ressemble à nous avons secondaire, vous pouvez cliquer dessus. Vous avez toutes ces animations différentes. Donc, vous pouvez voir à quoi ça ressemble. Bouton de texte avec cette flèche, vous pouvez voir cet effet de survol fonctionne. Vous voyez toutes ces icônes différentes, solide C ou carte. La carte peut être quelque chose de vraiment, fondamentalement cette guerre est quelque chose comme ça. Ainsi, vous pouvez voir cet effet de pop-up sur le survol. Vous pouvez voir cette plus grande carte, donc l'action, vous pouvez cliquer sur eux. Vous pouvez voir à quoi ils ressemblent. Vous pouvez aller glisser et déposer, ce qui est également important, par exemple, pour leur interface utilisateur dans une voiture, peut-être que vous voulez faire glisser et déposer notre chanson juste là. Vous pouvez voir comment cela ressemble à un champ d'entrée, ce qui est également important. Lorsque vous cliquez juste là, vous pouvez voir ce texte va en haut. Cherchez à quoi il ressemble à plusieurs entrées de texte et bien plus encore. Si nous allons au joueur, par exemple, vous pouvez voir à quoi ressemble leur joueur, quoi cela ressemble. Icônes inversées et bien plus encore. Si nous passons à l'interface utilisateur réactive, vous pouvez voir qu'il y a une grille configurée et c'est pourquoi c'est important. Vous pouvez définir ces grilles pour suivre l'ensemble de ce projet. Parce que par exemple, si vous créez ce projet, disons en 2021. Et puis le client décide dans cinq ans de temps de revenir à vous et puis vous permettre de continuer et d'ajouter toutes ces pages supplémentaires, écrans supplémentaires, vous êtes coincé parce que soit vous mettez ce processus de conception en place et peut-être même créer ce système de conception sur une plus petite échelle. Ensuite, vous pouvez simplement reprendre là où vous vous êtes arrêté et continuer à partir de là. Ils veulent soudainement changer les couleurs, changer les styles. Vous pouvez facilement le faire parce que tout est en place. Vous avez ce système de conception en place. Vous avez tous ces composants en place. Vous avez le guide de style en place. Donc, encore une fois, si vous voulez tout apprendre sur ce projet, assurez-vous de vérifier mon cours dure 20 heures et je couvre toutes ces choses beaucoup plus en détail que je ne peux dans ce cours gratuit. Mais fondamentalement, ce que vous pouvez est facilement mettre à l'échelle cela. Donc, peu importe si vous revenez au projet dans un an ou cinq ans, vous pouvez simplement continuer là où vous vous êtes arrêté, ramasser, et simplement continuer à concevoir s'ils veulent changer, vous pouvez facilement changer les couleurs et les styles, les polices, les couleurs, le logo, quand vous le souhaitez, même les images, en quelques clics, plutôt que de simplement redémarrer partout une fois de plus. Donc, si nous regardons ici, vous pouvez voir comment ces cartes sont mises à l'échelle. Par exemple, vous pouvez voir ces lignes de grille, comme je vous l'ai expliqué. Ainsi, vous pouvez voir que vous pouvez utiliser Adobe XD pour cela. Vous pouvez voir comment elles ont diminué, qui est, quelles sont les bonnes pratiques, qui sont des mauvaises pratiques, et pourquoi ? Vous pouvez voir tout ce contenu espacement lignes, rythme, rythme vertical ou horizontal. Donc tout reste le même. Espacez à quoi ressemblent toutes ces colonnes et ces contenus, sorte que tout ressemble comme il se doit. Et enfin, une fois que cela se charge sur le carbone Design System, et je vous encourage vraiment à vérifier cela. Si nous cliquons sur une grille 2x et vous pouvez voir à quoi cela ressemble et comment il évolue. Donc, si je baisse cela vers le bas, cliquez sur Lire. Vous pouvez y voir deux x grille, qui est une fois de plus la grille qu'ils ont développée pour eux-mêmes. Vous n'avez pas besoin d'utiliser cette grille dans vos projets. Cela fonctionne dans leur projet, mais peut-être pour votre projet, vous devrez créer autre chose. Il s'agit essentiellement d'une grille 8 et vous pouvez facilement créer cela dans Adobe ASD. Et je vous l'ai déjà montré dans la section précédente de ce cours. Donc, fondamentalement, vous pouvez voir comment il évolue de haut en bas. On peut passer à la topographie. Vous pouvez voir le style d'échelle, couleur Ressources. Vous pouvez y voir une police de caractères et ce qu'elle est, quoi elle ressemble dans le code. Vous avez également ces familles de polices et à quoi cela ressemble. Les développeurs peuvent alors facilement choisir cela à partir d'ici et simplement passer à autre chose. Si nous allons aux icônes, par exemple, vous pouvez voir quelles icônes ils utilisent et le style global de ces icônes. Et vous pouvez simplement copier le nom de cette icône, par exemple. Et puis ils peuvent l'utiliser dans le code plus tard. Vous pouvez voir à quoi ils ressemblent et ils sont évidemment divisés en catégories. Donc, le commerce alphanumérique et cela est pertinent pour vous si vous utilisez quelque chose comme icônes de conception de matériel de Google parce que vous pouvez leur donner des noms ou utiliser des noms que Google utilise déjà si vous utilisez autre chose, comme Premium par exemple, à partir des éléments vitaux finaux ou n'importe quel autre endroit, il est vraiment important de donner à ces icônes des noms afin que les développeurs puissent facilement les utiliser plus tard. Donc vous pouvez voir que ça s'appelle bâtiment juste ici, mais ici c'est le bâtiment 32. Donc, c'est le nom réel qu'ils vont utiliser dans le code. Et si vous téléchargez simplement en tant que VG à partir d'ici, ce qui est une fois de plus une bonne pratique. Donc, je vous encourage vraiment à explorer ces systèmes de conception parce qu'il y en a beaucoup. Shopify en a un, adobe en a un, microsoft en a un, Apple en a un. Assurez-vous donc de les vérifier et de comprendre ce que font ces grandes entreprises. Donc, vous pouvez le faire pour vous-même, pas sur cette grande échelle, évidemment, surtout si vous travaillez seul parce que cela vous prendra des années pour créer tous ces trucs. Mais certains signifient dans des facteurs importants tels que la couleur, la typographie, l'iconographie, espacement ou les grilles de radon et bien plus encore que vous pouvez créer pour vos clients et vos petits projets. Alors assurez-vous de vérifier que si vous regardez cela sur YouTube, je vais laisser le lien vers le bas dans la description de certains de ces systèmes de conception, qui je pense qu'ils sont cool et que je pense que vous pouvez ramasser quelques informations à partir de. 28. Créer des jetons de conception: Une excellente façon d'organiser vos projets et de le rendre facile pour vous, vos coéquipiers, vos clients et enfin les développeurs est d'utiliser quelque chose qui est appelé jetons de conception. Donc, plutôt que de simplement nommer votre couleur Road, par exemple, vous pouvez vendre à vos développeurs ce que ce rouge est conçu pour faire. Donc, si je vous montre dans mon exemple ici, nous avons le rouge de danger, ce qui est quelque chose comme quand ils, quand les utilisateurs ont fait une erreur, alors il va leur montrer cette couleur rouge sous une forme, par exemple, dans un et un bouton. Mais le rouge de danger est fondamentalement décoloré parler que les développeurs peuvent ensuite utiliser pour intégrer dans le code. Et si je copie ce code hexadécimal, au lieu de le nommer comme ceci ou simplement lire, ils peuvent simplement le nommer rouge danger, ce qui est évidemment utile si vous avez plusieurs versions de cette couleur. Les développeurs doivent comprendre un besoin de savoir dans quel cas vous utilisez quelle couleur. Donc, donner ces jetons de conception est vraiment utile parce que, comme je vous l'ai montré dans l'exemple précédent avec les systèmes de conception, c'est extrêmement important, surtout avec les icônes, lorsque vous avez plusieurs versions de la même icône. Donc, vous pouvez vous souvenir de la section précédente du cours, lorsque je vous parle de systèmes de conception, vous pouvez voir qu'IBM a le numéro de bâtiment 32 parce qu'ils ont 32 icônes de construction différentes qu'ils utilisent dans leur système de conception. Donc, vous pouvez faire exactement la même chose. Vous pouvez nommer vos couches comme ça, et vous pouvez ensuite aider les développeurs à comprendre et développer rapidement en donnant des noms à vos jetons de conception. Donc, une fois de plus, vous pouvez voir au lieu du blanc, nous avons du blanc uni parce que, par exemple, à un moment donné, peut-être que nous voulons inclure le blanc plus foncé peut-être que nous voulons inclure, je ne sais pas, sur le blanc superposé ou autre chose. Nous avons gris foncé, gris clair, vert principal, vert secondaire, qui est également important parce que ce vert principal est la couleur principale de notre projet ou marque ou site Web. vert secondaire est la couleur de notre effet de vol stationnaire, par exemple, peut être vous pouvez le nommer en vert plané. Peut-être que vous pouvez le nommer gris foncé, vert en vol stationnaire. Peut-être que tu peux faire quelque chose comme ça. Mais une fois de plus, il est toujours préférable d'en parler avec les développeurs et de leur demander simplement comment préférez-vous que vos couleurs soient nommées et que tout ce Dawkins soit nommé, afin qu'ils puissent facilement les comprendre plus tard dans le code. Vous pouvez également le faire avec des styles de caractères. Donc ici, j'ai Poppins 16, mais dans certains cas peut-être que je veux nommer ce H1 Bob en 16. Peut-être que je veux juste le nommer H mai 1 être principal, H1, H2, H3, H4, H5. Donc, par exemple, si peut-être texte de paragraphe, donc vous pouvez l'appeler taille de paragraphe, peut être que vous avez des Dexter différents de différents endroits. Comme par exemple, dans les écrans de tableau de bord, peut-être que vous avez différentes tailles de texte là. Peut-être que vous pouvez même inclure quelque chose comme le texte promo. Peut-être que vous voulez l'inclure dans la bannière. Alors pensez à toutes ces choses différentes au fur et à mesure que vous concevez. Par conséquent, vous pouvez les inclure en tant que jetons de conception. Et enfin, pour les icônes et les composants, vous pouvez voir que nous avons mobile top nav, main, top nav, icône de menu principal, et nous avons icône de menu secondaire et bien plus encore. Mais voici la principale différence entre ces deux. Lorsque vous nommez des composants, Mobile top nav est important car il va sur mobile, tandis que le nav supérieur principal va ici sur une conception de site Web qui est instantanément facile à comprendre pour les développeurs parce qu'ils peuvent comprendre, ok, donc c'est pour un mobile, c'est pour le web et ils peuvent aller très vite. Ce sont donc les jetons de conception et je vous encourage vraiment à nommer à nouveau vos couches, parler avec vos développeurs et vos clients. Comment veulent-ils que vous nommez vos couches afin qu'elles puissent facilement comprendre et tirer cela dans le code afin qu'il puisse réduire votre charge de travail plus tard une fois que vous avez réellement terminé le projet. 29. Créer un guide de style: Les guides de style sont extrêmement utiles car ils peuvent aider vos clients et en particulier, les développeurs à comprendre les actifs que vous utilisez dans vos conceptions. Et ils peuvent suivre l'ancien style, ils peuvent suivre la couleur, ils peuvent copier et coller les couleurs de votre guide de style. Donc, si je reviens à notre exemple ici que nous réutilisons, nous avons un guide de style de projet juste ici. Donc, si nous zoomons de très près, vous pouvez voir que nous avons toutes ces couleurs différentes. Donc, ils peuvent voir blanc clair, qui encore une fois, si je vous prends ici, ici, il est gris clair afin qu'ils puissent rapidement jeter un coup d'œil et voir quel code hexadécimal vous utilisez. Ainsi, ils peuvent copier ce code hexadécimal collé directement dans le code, câblé tous ensemble, encoder, et ils vont avoir ces couleurs intégrées. L' autre option est parce que ce sera SDS gratuit et toujours le recommander aux développeurs, avec lequel je travaille au fil des ans, est simplement d'installer XD, ouvrir ce fichier, et simplement copier et coller cela directement dans le code s'ils le veulent. Parce que comme ça, ils peuvent simplement faire défiler et comprendre où ces couleurs sont utilisées. La même chose pour la typographie. Ainsi, vous pouvez voir différentes couleurs pour différentes tailles, différents espacements et différentes hauteurs de ligne est différente. Tout est différent ici. Donc, les développeurs peuvent facilement comprendre, OK, c'est ça, je peux l'utiliser ici. Je peux l'utiliser là, c'est utilisé pour cela. Souhaitant également noter, si vous partagez pour les développeurs va être beaucoup plus facile pour eux de leur donner ce lien car ils peuvent facilement copier et coller ces styles directement à partir de ce lien partagé dans le code. Mais encore une fois, ce guide de style de projet est vraiment utile pour garder les choses belles en un coup d'œil, l'iconographie. Une fois de plus, ils peuvent jeter un coup d'œil à t2, quelles icônes avez-vous utilisé ? Et dans ce cas, nous avons cette carte. Donc, si vous avez utilisé 50 cartes différentes, vous pouvez mettre le texte ci-dessous et appeler ceci par exemple, conception du site Web et la page de la carte, défiler trois ou quoi que ce soit. Ils peuvent donc savoir que vous avez utilisé cet élément concret dans votre conception. C' est donc là que les guides de style sont utiles. Et les clients peuvent également voir ces guides de style. Et c'est vraiment une version simplifiée, vous pouvez créer aussi complexe le guide de style que vous le souhaitez. Vous pouvez inclure différentes images dans votre guide de style. Vous pouvez créer différents tableaux d'humeur pour l'inspiration. Vous pouvez les inclure dans un guide de style. Vous pouvez en apprendre davantage sur les paragraphes, par exemple. Vous pouvez ainsi créer des paragraphes plus grands, des paragraphes plus petits. Vous pouvez afficher l'apparence du paragraphe, ligne centrale alignée à gauche et écrire la ligne afin de pouvoir placer autant d'informations que vous le souhaitez dans ce guide de style. Ou certains projets ne nécessitent pas du tout un guide de style. Donc, une fois de plus, vous devez parler avec vos clients et développeurs. Ils ont vraiment besoin du guide de style parce que s'ils ne le font pas, c'est juste un exercice de design pour vous-même. Ou si vous avez juste trop de temps libre sur votre main, vous pouvez créer ceci. Mais une fois de plus, le guide de style nécessite beaucoup de temps et beaucoup d'efforts et de réflexion mis en elle. Donc, si vous n'avez pas besoin de créer un Guide de style par tous les moyens, ne le créez pas, mais demandez à vos clients et développeurs, avez-vous réellement besoin de les créer ? Parce que lorsque vous commencez à partager, vous pouvez partager pour les clients et partager pour les développeurs. Et les deux peuvent obtenir l'image là-bas au lieu de vous créer en outre ce guide de style. Mais encore une fois, c'est une partie importante du processus de conception lui-même. 30. Créer de grandes présentations: Enfin, la dernière partie ou le processus de conception, nos présentations, vous devez avoir de bonnes compétences de présentation soit en personne, sur l'appel de zoom, appel Skype, ou dans la présentation elle-même. Vous devez donc expliquer quel est le problème. Comment accèdez-vous à ce problème ? Comment allez-vous à ce sujet ? Comment allez-vous trouver la solution ? Et puis comment as-tu résolu ce problème ? Vous devez tout montrer à l'intérieur de votre présentation. Et cela s'appelle généralement l'étude de cas. Et chaque projet est l'étude de cas pour lui-même. Mais comment savez-vous ce que vous devez présenter ? C' est vraiment facile. Il suffit d'aller sur Google. Avant d'aller à Google, assurez-vous de comprendre est cette présentation du projet avant de commencer à travailler ou après avoir commencé à travailler. Et vous devez l'utiliser pour votre portefeuille. Parce qu'avant de commencer à travailler, vous devez expliquer à votre client potentiel parce qu'il ne s'agit pas encore de votre client, mais que vous lui faites des présentations. Vous devez expliquer quelles sont vos capacités en tant que concepteur. Donc, vous devez vous vendre à eux essentiellement pour travailler pour eux sur leur projet. Vous devez donc expliquer vos compétences en résolution de problèmes et comment êtes-vous en mesure de les aider dans ce projet particulier ? Si cependant, de l'autre côté, vous avez terminé ce projet et que vous voulez juste montrer vos compétences en conception, tout votre processus lors de la conception de ce site, alors vous devez aller le faire dans l'autre sens. Donc, dans la première méthode, assurez-vous d'utiliser quelque chose comme une présentation PowerPoint. Vous voulez montrer autant de problèmes que vous pouvez résoudre que possible dans ce créneau particulier. Pour que le client puisse vous comprendre facilement. Si un vous donner un exemple, si vous approchez, parce que nous utilisons Dao De Dans l'exemple précédent, disons que vous allez à votre concessionnaire Audi local et que vous voulez reconcevoir leur site Web. Mais ce que vous avez fait précédemment est un redessiné un tas de ces sites de jeu. Ce n'est pas pertinent pour notre D. Ils ne vont pas vous embaucher sont peu importe à quel point vous êtes bon concepteur, parce que vous ne comprenez pas les problèmes auxquels ils sont confrontés à l'intérieur de cette industrie. Alors assurez-vous que lorsque vous lancez, peut-être sûr de lancer le bon terrain au bon client qui va comprendre les problèmes et qui va comprendre les solutions que vous offrez, donc, sera mieux adapté pour vous. Et ce sera un plus grand projet oral De l'autre côté quand vous finissez le projet et que vous voulez le montrer soit dans votre portfolio, dans votre page Behance ou même futurs clients, ce qui est également important. Vous voulez leur montrer comment vous avez résolu les problèmes vos projets précédents dans le même créneau qu'ils se trouvent, et là vous avez une combinaison gagnante. Alors laissez-moi aller rapidement parce que, et je vais vous montrer quelques bons exemples que j'ai rapidement trouvé. Mais vous pouvez également explorer et trouver différents exemples qui vous conviennent le mieux. Alors qu'est-ce qu'on a ici ? C' est ce projet mobile. Là, appelez ça de couleur, et ici vous pouvez voir ce que c'est. Vous avez cette belle animation de fond. Donc procédure de sauvetage numérisée afin que vous puissiez voir ce que fait l'application. Notre vision. Alors, quelle est notre vision ? Les problèmes ? Vous pouvez voir, ce que l'application peut faire tout de suite. Un clic peut sauver la vie de quelqu'un. C' est donc la solution. Ce que nous avons fait, notre approche, certains branding, design UX, conception interface utilisateur, et pour chacun de ces ce qu'ils ont fait, flux utilisateur. Donc, une fois de plus, où ils ont trouvé leurs utilisateurs, comment l'utilisateur se rend à cette application. Donc voyage utilisateur fondamentalement base de connaissances. Donc ce qu'ils ont incorporé, acheté et versé wat ce qu'ils ont créé. Ainsi, vous pouvez voir toutes ces différentes informations supplémentaires qu'ils utilisent à l'intérieur de l'application. Vous pouvez voir quelques points de légende ici. Débit rapide, présence virtuelle. Donc, fondamentalement aller encore plus loin que smartwatch coule à travers l'application. Et c'est à ça que ça ressemble. Donc, vous pouvez voir que c'est un exemple vraiment complexe de la présentation du projet est très bien fait. Ainsi, vous pouvez diviser votre temps supplémentaire pour les présentations car une bonne présentation représente la moitié de la vente. Assurez-vous de le savoir, assurez-vous de vous en souvenir. Parce que si vous avez une bonne présentation, qui communique vraiment bien et il semble vraiment bien, vous êtes déjà à mi-chemin oser prêter projet mort ou même ce projet futur. Un autre exemple que je veux vous montrer est la refonte du site de visa. Vous pouvez voir que c'est d'Ekaterina, MON halo. Et fondamentalement, elle a fait ça dans l'autre sens. Il s'agit de la conception du site Web plutôt que de cette conception de l'application. Donc, vous pouvez le faire pour tout ce que vous concevez fondamentalement dans ce qu'elle fait ici est de montrer que cette page ressemble à ceci sur mobile. Tout de suite. Elle l'a pris, elle prend la marque, elle répand encore plus. Elle a ces jolies animations entre les cartes. Elle montre à quoi ressemble le défilement sur la page. Peut-être même des effets d'horreur et bien plus encore. Cette page, à quoi il ressemble sur le web et mobile. Ici, nous avons la grille. Donc, vous pouvez voir qu'elle sépare les pages réelles et tous ces détails supplémentaires comme une taille de police entre tout cela tandis que ces gars ont tout séparé en sections. Donc, c'est vraiment à vous de décider comment vous voulez structurer vos présentations à vos clients et dire essentiellement ce que vous pouvez faire pour eux dans un cas particulier. Donc, c'est tout pour les présentations sont vraiment vous encourager à vérifier. Aller à B a un C dans votre industrie, dans votre niche, comment les présentations ressemblent, assurez-vous de se souvenir de l'exemple Audi, mais vous pouvez l'appliquer à n'importe quel exemple. Et dans chaque industrie dans laquelle vous êtes, assurez-vous de communiquer, d' écrire des idées, de bons problèmes et d'écrire des solutions avec les bons clients. Et Dan, tu vas être sur une série de victoires. 31. Future of Outils de conception: Donc, vous êtes peut-être juste en train de démarrer dans cette entreprise et vous pourriez juste vous demander quel est l'avenir de ces outils de conception ne devrait que mériter mon temps à Adobe XD. Dois-je même aller pour Sigma quatre sketch, peut-être Photoshop ou Illustrator ? Que dois-je rechercher dans ces outils et où dois-je consacrer mon temps aussi ? Je peux donc vous dire, d' après mes années et mes années d'expérience, près de deux décennies dans ce domaine, qu'il n'y a vraiment pas de bonne réponse. Tous ces outils évoluent au fil du temps. J' aime vraiment Adobe XD parce qu'il fait partie de la famille Adobe et ne sont vraiment pas endettés. Si j'ai mon abonnement Premium au package Adobe, Il va être pris en charge et je peux l'utiliser en conjonction avec, par exemple, Photoshop Illustrator. Si je dois réparer certaines de mes images, voyons, peut-être que je peux vraiment utiliser Lightroom. Donc, j'ai tout cela dans l'abonnement créatif appelé. Donc, j'aime vraiment Adobe XD d'ailleurs, aussi la polyvalence parce que , comme ils l'ont dit dans ce cours, vous pouvez passer du prototypage de conception et le partage de leurs fonctionnalités de collaboration. Et la chose la plus cruciale est que les mises à jour arrivent chaque mois. Et de grosses mises à jour arrivent une ou deux fois, peut-être trois fois par an, selon l'arriéré de l'équipe et ce qu'elle a créé jusqu'à présent. Assurez-vous donc de bien comprendre quand vous choisissez ces outils de conception. Assurez-vous de choisir celui qui vous convient. Peut-être que vous aimez vraiment utiliser l'esquisse, mais les esquisses ne sont pas prises en charge sur Windows. Donc, si vous êtes un utilisateur de Windows, alors ce n'est pas une option. Peut-être que vous aimez utiliser pour sigma, alors vous pouvez aller de l'avant et utiliser pour sigma dans le cloud. Mais si votre connexion Internet est beaucoup trop lente, dan, cette expérience ne va pas être génial avec une autre expérience qui a, par exemple, concepteur Sumatra qui a de meilleures vitesses de connexion Internet. Si vous êtes d'un autre côté, comme Adobe XD, comme moi, et que vous souhaitez utiliser certains des autres produits Adobe, alors allez-y. n'y a pas de bonne ou de mauvaise option ici. Je peux vous le dire par expérience, nous vivons dans un grand temps pour être un concepteur d'interface utilisateur et UX parce que nous avons tous ces outils à notre disposition, seule chose que nous avons à faire est simplement de travailler. Vous pouvez travailler sur vous-même, vous pouvez travailler sur vous améliorer. Et une chose clé à retenir de ce cours et à partir de cela, une partie du cours surtout est quand vous savez comment utiliser certains de ces outils, comme dans ce cas, ce sera x D. Il sera beaucoup plus facile pour vous de comprendre ces outils UDL comme FISMA ou sketch ou même Photoshop. Parce que tous ces outils sont fondamentalement les mêmes. C' est juste à vous et ce qui vous convient le mieux si vous gagnez des versions gratuites que XD et sigma sont excellente option si vous êtes sur un Mac dans un sketch réel ou si vous êtes une équipe vous oblige à utiliser sketch ou vous voulez vraiment utiliser sketch, alors vous devez payer pour le Scatchard. Alors assurez-vous de voir ce qui est le mieux pour vous. Dans mon cas, comme je l'ai dit, un réel comme Adobe XD. Et parce qu'il est léger, il me fournit ces excellentes options. Et si vous voulez, par exemple, faire un peu plus avancé et émissions et afficher des données ou des clients ou un développeur, vous pouvez alors choisir ce fichier Adobe XD, aller directement à Premier, par exemple, ou même après les effets. Et dans After Effects, vous pouvez ajouter tous ces détails étonnants et toutes ces animations étonnantes. Vous n'avez même pas à le faire car il y a tellement de plugins dans Adobe XD. Et puis vous pouvez aller avec des plugins pour, par exemple, des tests utilisateur. Il y a quelque chose qui s'appelle anima. Depuis récemment, vous pouvez exporter directement du code depuis Adobe XD. Vous pouvez travailler sur tant d'options différentes et tant de niveaux différents. Juste à l'intérieur, il sera sans jamais changer aucun de ces outils. Parce que je me souviens quand j'ai commencé et que nous avions l' habitude de créer des sites Web dans Photoshop et Illustrator. Ensuite, nous devons utiliser des outils comme envision, mais c'était bien plus tard. Avant d'envisager, nous devons expliquer à nos clients qui ne sont pas des concepteurs web, qui ne sont pas des développeurs à quoi ressemblera le design une fois développé. Il est donc très difficile de communiquer une idée comme celle-ci avec votre client, surtout s'il ne sait pas et ne comprend pas de quoi vous parlez. Mais avec des outils comme Adobe XD et tous ces outils, extensions, plugins et les ressources que nous avons maintenant à notre disposition, il est beaucoup plus facile pour les clients de comprendre car, comme vous l'avez vu dans le discours, est beaucoup plus facile pour eux de fournir et de vous guider à travers ce projet afin que vous puissiez obtenir le projet plus rapidement. Il est beaucoup plus facile de communiquer avec le développeur parce que dans le passé, c'était aussi l'agitation. Vous devez installer différents plugins pour polir et c'était vraiment un gâchis. Mais ici, vous avez des solutions intégrées pour exporter vos fichiers. Il est donc beaucoup plus facile de travailler avec les développeurs, avec les clients, avec les parties prenantes, avec vos coéquipiers en un coup d'œil, tout dans une seule application. Et vous pouvez commencer gratuitement. 32. PROJET DE COURS: Votre projet de cours pour ce cours consiste à utiliser les conseils et les techniques que vous apprenez de ce cours pour les appliquer à votre processus de conception. Et je voudrais vraiment que vous créez soit un site Web d'une page ou un écran unique pour l'application en utilisant les conseils et les techniques que vous apprendrez de ce cours et de les télécharger dans les projets de classe, assurez-vous de les enregistrer en JPEG simple, vous n'avez pas besoin d'inclure quelque chose de fantaisie comme une émission, quelque chose de fantaisie comme Geoff simplement les inclure comme images JPEG, les télécharger dans la section des fichiers de classe et moi et d'autres étudiants seront en mesure de vous fournir avec les commentaires. Personne n'est là pour te juger. Nous sommes tous ici en tant qu'amis pour nous entraider et nous aider mutuellement à grandir et à prendre de l'expansion dans ce domaine. Donc, une fois de plus, je vous encourage vraiment à créer ce que vous voulez que vous avez appris de cette classe et simplement le télécharger dans les fichiers de projet de classe. 33. Conclusion du cours: Merci d'avoir regardé ce cours. J' espère vraiment que vous y avez trouvé de la valeur. Si vous le souhaitez, vous pouvez consulter mon cours de master class Adobe XD ici. Vous pouvez vous y inscrire. Ensuite, vous pouvez trouver tous les outils et fonctionnalités dont nous avons parlé dans ce cours gratuit. Aussi, si vous voulez accéder aux liens et ressources que j'ai mentionnés dans ce cours, il y aura un lien dans un PDF. Assurez-vous de télécharger le PDF ouvert et vous pouvez simplement cliquer sur le lien qui vous intéresse et vous pouvez facilement y accéder jusqu'à la prochaine fois. Je vous remercie encore une fois d'avoir regardé et je vous souhaite bonne chance dans tous vos efforts. Vous avez choisi le bon champ car UI UX Design est le champ InDesign, qui se développe le plus rapidement et il existe de nombreuses opportunités différentes pour vous. Je vous souhaite donc toute la chance dans votre recherche d'emploi ou dans vos efforts d'amélioration de carrière. Merci. Et jusqu'à la prochaine fois, prenez soin de vous.