Principes de base de la conception de l'expérience utilisateur - Adobe XD UI UX Design

1. Introduction à le cours de formation sur Adobe XD: [MUSIQUE] Bonjour à tous. Je m'appelle Dan Scott et je suis instructeur certifié Adobe. Ensemble, vous et moi allons apprendre à devenir concepteur UX à l'aide du logiciel Adobe XD. Désormais, ce cours s'adresse aux personnes totalement nouvelles du logiciel Adobe XD. Il s'adresse également aux personnes qui sont complètement nouvelles dans le design UX en général. Nous commencerons le cours dès le début et nous travaillerons étape par étape. abord, nous allons décrire le mémoire et comment nous allons travailler avec un personnage UX. Vous apprendrez ensuite comment créer des filaires simples. À partir de là, nous apprendrons comment implémenter correctement les couleurs et les images dans vos conceptions. Vous apprendrez à faire et à ne pas faire en choisissant des polices pour les applications Web et mobiles. Vous apprendrez comment créer vos propres icônes, boutons et tous les composants de l'interface utilisateur. Je vais partager avec vous toutes les astuces secrètes d'Adobe XD qui vous aideront à accélérer votre flux nous faciliter la vie en utilisant kits d'interface utilisateur gratuits et des modèles préexistants dans XD. Nous allons descendre de l'ordinateur et je vais vous montrer comment tester vos conceptions sur votre téléphone. Nous allons créer un guide de style simple prêt pour le transfert d'un client. Nous allons nous amuser à réaliser ces micro-indirections, transitions de pages et ces animations. Avant la fin de ce cours, nous disposerons d'un prototype entièrement interactif pour collaborer avec d'autres membres de l'équipe et exporter les bons fichiers prêts à être transmis à notre développeur ou ingénieur logiciel. Tout au long du cours, je couvrirai certaines des attentes de vous en tant que nouveau concepteur UX. J'ai maintenant des devoirs tout au long du cours pour vous aider à mettre en pratique ce que nous apprenons au fur et à mesure que nous travaillons, ainsi que pour créer quelque chose d' unique pour votre portefeuille. Très bien, il est temps de passer d'Adobe XD zéro à celui de héros UX, de me rejoindre en classe. Maintenant, honnête opinion, pensez-vous : « C'est une lumière fraîche qu'il a là. Est-ce que c'est cool ? » Ou [RIRES] c'est tout au long du parcours, pensez-vous : « À quoi sert la lumière rose boiteuse ? » 2. Commencer avec votre projet Adobe XD.: Bonjour à tous. Bienvenue dans la vidéo de démarrage. La première chose à faire est de télécharger les fichiers d'exercices. Il y aura un lien sur cet écran ici, alors cliquez sur, téléchargez-les avant de passer à autre chose. De plus, je peux parler très vite quand je suis excité. Il y a un rouage de cette façon. [RIRES] Il y a une petite icône d' engrenage ici. Vous pouvez m'accélérer ou me ralentir, si je parle trop vite, je parle trop vite. Assurez-vous également d'avoir installé Adobe XD. Nous allons utiliser la version complète de celui-ci. Il existe une version gratuite, ils l'appellent, pour le moment, le plan de départ. C'est nouveau, il peut disparaître, ils pourraient en changer le nom. Vous devrez peut-être le comprendre. le moment, la différence est qu'elle est réservée à un usage personnel, cette version gratuite appelée plan de départ. Il existe également des restrictions quant nombre de personnes avec lesquelles vous pouvez partager le document et avec qui vous pouvez collaborer. Mais pour le moment, vous pouvez suivre ce cours à 100% avec. Ils changent cela tout le temps. Nous allons nous concentrer sur la version principale. Vous pourriez rencontrer quelques petits changements si vous utilisez cette version de démarrage tout au long du cours, mais pour le moment, vous pouvez totalement le faire. Une autre chose à noter est qu' Adobe XD est relativement nouveau. Ils sont en train de le mettre à jour. Chaque fois que je fais un cours, ils changent de nom ou quelque chose comme ça. S'il s'agit d'un changement fondamental, je réenregistrerai une des vidéos. S'il s'agit d'un léger ajustement et qu'il change de forme ou se déplace un peu, je vais faire une note, soit une petite fenêtre contextuelle comme celle-ci, [BRUIT], soit vérifier les commentaires en dessous. C'est peut-être quelque chose de nouveau et d'autres élèves l'ont compris. Il suffit donc de vérifier en dessous. Je vais essayer de le garder à jour autant que possible, mais il y a peu de changements qu'ils font tout le temps avec Adobe XD. Enfin, Mac contre PC, de quoi avez-vous besoin ? Cela n'a pas d'importance. Vous pouvez suivre ce cours sur PC ou Mac. Toutes les fonctions sont identiques, l'interface utilisateur est légèrement différente, mais pas un changement important. Je vais utiliser un Mac dans ce cours sans bonne raison [RIRES] à part ça semble cool. [RIRES] Je suis vendu pour ressembler à un designer, regarder les lunettes, j'ai eu le MAC, c'est sur le stand. J'ai eu la lumière, la lumière est éteinte. [RIRES] Regardez ça. Ne fait absolument rien à la qualité de votre travail, sauf que mon ambiance est cool. [RIRES] Mais Mac, C.-B., ça n'a pas d'importance. Passons à la vidéo suivante. 3. Qu'est-ce que Adobe XD pour et le fait de codage: Bonjour, tout le monde. Parlons de ce que sert Adobe XD. Pouvez-vous simplement exporter le code et disposer l'application ou du site Web directement depuis Adobe XD ? C'est une question qui me pose beaucoup. Non, Adobe XD est un outil de conception, puis une fois la conception réalisée, vous le transmettez à la phase suivante, qui consiste à le coder, soit en Xcode, en PHP ou n' importe quel langage utilisé pour développez cette application ou ce site Web. Vous pourriez penser, eh bien, pourquoi ne pas le faire directement dans le code ? C'est une façon de le faire. C'est comme construire une maison et la concevoir en même temps, il est très difficile d'apporter des changements. En tant que concepteur, je peux déplacer les choses, changer les couleurs, ajouter une page supplémentaire, et cela prend des minutes ou des heures selon [RIRES] combien de changements doivent se produire. Mais faire exactement les mêmes changements une fois qu'il est codé est très important et nécessite plus de talent que moi en codage. Je peux faire du codage frontal de base , mais rien ne va construire un site complexe. Souvent, je travaille en équipe. Je fais le côté de la conception et des tests, ainsi que l'interface utilisateur et l'UX, dont nous discuterons dans la vidéo suivante, puis je le remet à un développeur un ingénieur ou à un codeur ou à ce que vous allez appeler, et ils le construiront sur la base de cette conception. Vous seriez comme, eh bien, on dirait que deux personnes font un travail. C'est l'une des façons dont je le regarde, mais ce qui est vraiment efficace, c' est que mes compétences en tant que concepteur sont de prendre le mémoire, de comprendre le mémoire, de formuler des hypothèses. Ce n'est pas une bonne journée. Vous connaissez le mot que je veux dire. Définissez certaines choses que vous voulez qui, selon vous, permettront résoudre ce problème, puis de les tester. C'est vraiment sympa avec Adobe XD. Si vous m'avez donné une idée en ce moment, vous m'avez dit, j'ai eu une nouvelle idée pour une page d' inscription à notre site Web, pouvez-vous la créer ? Je pourrais prendre ce mémoire et je pourrais le faire très rapidement. Disons que cela pourrait être fait en quelques heures, que je pourrais maquer ce type de page d'inscription différent sur votre site Web, l'envoyer à des clients potentiels et les faire tester. Il ne fonctionne pas vraiment, il n'est pas entièrement intégré, mais pour la personne qui le teste, c' est suffisant pour obtenir des commentaires. Je peux soit les regarder le faire , soit enregistrer l'écran avec eux, trouver des bugs et me dire, je pensais que nous allions là-bas, ils ne le sont pas. Tout ce processus est effectué via Adobe XD. Vous pouvez voir à quelle vitesse cela peut être fait, et je peux créer 20 versions différentes avant que je ne sois comme, le succès, ils savent comment s'inscrire, c'est la meilleure façon de s'inscrire. Ensuite, je peux me diriger vers le développeur avec une chose et dire : allez faire ça pour moi. Je le remet au développeur, ils vont le construire. Il s'agit d'un flux de travail efficace. codage et la même chose prendraient beaucoup de temps, et les compétences que je n'ai pas à faire un processus d'inscription complexe, je ne peux tout simplement pas le faire. [RIRES] Nous avons besoin de quelques personnes impliquées dans le processus. C'est ce que fait Adobe XD. Il s'agit de prototyper rapidement, et vous pouvez travailler avec un client, peut s'inscrire, ils peuvent dire que j'adore ce site, puis vous le donnez pour obtenir. Vous devez être clair avec votre client que ce processus, même s'il peut le voir, vous entendrez un lien, qu' il ne s'agit pas réellement du produit fini. C'est quelque chose qui doit se développer et se développer ensuite. Maintenant, vous pourriez être comme, je n'ai pas développeur [RIRES], ni d'ingénieur ou de codeur. Vous pouvez faire ces choses vous-même. Cela dépend du travail, de l'identité du client et de la taille de l'entreprise. Vous allez créer dans Adobe XD, obtenir la bonne conception, puis si vous ne vous adressez pas à un développeur codeur et que vous voulez tout faire vous-même, il n'y a pas d'options de code, comme Webflow et Elementor et WordPress. J'ai des cours sur beaucoup de choses dont je parle, en particulier celles, soit maintenant, soit bientôt disponibles pour que vous puissiez, en tant que concepteur, faire le package complet, livrer un site Web complètement. Mais il y aura d'autres fois où vous travaillerez avec un développement au sein d' une plus grande entreprise ou avec un développeur qui crée des éléments personnalisés. Votre rôle dans XD va confier cela au développeur. Les choses que vous pouvez faire pour les aider, vous pouvez leur donner beaucoup de code de style, nous ferons dans ce cours, vous leur donnez toutes les images et les éléments dont ils ont besoin pour se lancer. Vous pouvez le coder vous-même. Si vous concevez un site Web simple, j'ai un cours sur Dreamweaver et VS Code. Le code VS est probablement le meilleur apprendre à faire du HTML et du CSS vous-même et à construire vos propres choses, ou à opter pour les options sans code. Il y en a beaucoup. Squarespace, Wix, Webflow, Elementor, les deux sur lesquels je me concentre, WordPress, il n'y a pas beaucoup d'options de conception de code. Vous le concevez toujours dans XD parce qu'il est rapide et génial, puis vous le construisez ensuite une fois que le client a obtenu l'approbation, ce qui prend un peu plus de temps. Il n'exporte pas de code vers un développeur, mais il lui donnera des éléments il a besoin ou que vous utiliserez si vous le codez vous-même. C'est cette vidéo terminée. 4. Quelle est la différence entre l'interface utilisateur et l'interface utilisateur dans Adobe: Bonjour. Dans cette vidéo, nous allons parler de l'interface utilisateur par rapport à l'UX. Si vous êtes déjà très clair sur ces termes, vous pouvez continuer à passer à la vidéo suivante. Pour ceux qui ont besoin d'un peu d' explication pour le dire clairement , passons maintenant à ce point. Nous commencerons par l'interface utilisateur, fait partie de l'UI/UX. C'est un terme. Ces deux termes sont souvent abordés, et ensemble, ils sont similaires mais différents dans Adobe XD. Tout est mélangé là-dedans. conception de l'interface utilisateur ou la conception de l' expérience utilisateur est un terme utilisé lorsque vous concevez l'apparence d'un site Web ou d'une application ou quoi que ce soit. Je travaillais en tant que concepteur d'interface utilisateur pendant longtemps. Avant que UX ne devienne populaire et que je ne m'y intéresse, je n'étais purement qu'un concepteur d'interface utilisateur. quoi cela ressemblait, c'est que je reçois un mémoire de la part des clients, recherches sur ce dont ils avaient besoin, il y avait beaucoup de ma propre expérience, comme ce qui devrait aller, où et ce que leur les clients adoreraient. Le client le signait et nous le ferions fabriquer par un développeur ou je le ferais moi-même. C'était moi en tant que concepteur d'interface utilisateur. où l'expérience utilisateur est différente, c'est qu'il s'agit souvent du même type d'outils. J'utiliserais mon expérience pour faire ce que je pense, mais c'est beaucoup plus humilité dans ce que je pense être une bonne solution pour le client. Je dois penser que c' est mon hypothèse, c'est ce que je pense que le client va adorer, au moins leurs clients vont adorer, puis la mettre à l'épreuve. C'est là que nous commençons à passer à l'UX. C'est un grand champ. Je vais essayer de couvrir autant de design UX que possible dans ce cours. Mais c'est dire que est ce que je pense trouver les bons utilisateurs pour tester mon hypothèse ou ma conception, puis trouver ce qui a fonctionné, ce qui n'a pas fonctionné, puis j'irai là-dessus. Pas seulement une fois, pas seulement deux fois, autant de fois qu'il en a besoin. Imaginons qu'il s'agisse d'un processus d'inscription à un site Web qu'on vous a demandé de créer, ou d'un site Web entier ou d'une application pour quelque chose de complètement nouveau. Le client veut quelque chose, vous avez une idée de la façon de le livrer. C'est mettre ces idées à l'épreuve, c'est là que nous commençons à devenir concepteur UX. Travailler avec les clients, tester, déterminer ce qui fonctionne, puis itération. C'est pourquoi Adobe XD est vraiment bon. C'est très rapide. Vous pouvez itérer très rapidement, vous pouvez retourner à ces mêmes personnes pour tester à la volée ou apporter quelques modifications, les envoyer puis le lendemain, le faire tester à les envoyer puis le lendemain, le faire tester à nouveau jusqu'à ce que vous arriviez à un point où vous accomplissez vos tâches que vous avez dites. C'est peut-être le moment le plus rapide pour s'inscrire, ou du moins le plus grand nombre de personnes inscrites. Quel que soit votre objectif, vous pouvez tester avec le client pour effectuer ce processus. C'est la différence entre l'interface utilisateur et l'UX. La conception de l'interface utilisateur de l'interface utilisateur est à quoi elle ressemble, mais l'ajout de ce niveau de conception d'expérience utilisateur est endroit où vous allez réellement tester cela. Il existe plusieurs façons de tester, mais c'est la version simpliste. façon dont elle recherche l'interface utilisateur et l'expérience utilisateur dépend davantage du test et de l'itération. Est-ce logique ? Nous l'expliquerons un peu plus au fur et à mesure que nous suivrons le cours, mais c'est l'UI/UX par là. Je ne sais pas pourquoi, mais c'est eux. Passons à la vidéo suivante. 5. Ce que nous faisons dans ce cours Adobe XD: Bonjour à tous. Dans cette vidéo, je veux vous montrer où nous allons. C'est ce que nous allons faire dans ce cours. Nous allons commencer par créer un filaire. Juste un simple filaire pour mettre les bases de XD sous notre ceinture. Il y aura quelques transitions, et nous ferons des tests sur les téléphones, et nous construirons des éléments de base et des animations simples. Juste pour nous mouiller les pieds dans Adobe XD, nous commencerons à construire notre mood board, à le présenter aux clients, puis à commencer notre version haute fidélité. expliquerai tous ces termes plus tard dans le cours. Mais jetons un coup d'œil à ces questions. J'ai plusieurs options pour la couverture. Jetons un coup d'œil. En tant qu'animations, vous pouvez voir ce que nous réalisons. Jetons un coup d'œil. Il y a une navigation, nous avons des boutons Acheter maintenant, nous avons des choses fonctionnelles, interrupteurs [RIRES] qui s' allument et s'éteignent sans raison ici, [RIRES] mais ils ont l'air cool, avec quelques animations aussi. C'est ce que nous construisons dans ce cours. Je veux vous donner un aperçu très tôt que nous sachions où nous allons. Vous aimez l'interrupteur à bascule, vous avez l'air cool, [RIRES] que faisait la camionnette ? Vous aussi pouvez créer des animations comme la mienne, avec le camion qui fait de la petite roue. [RIRES] Quoi qu'il en soit, passons et commençons. 6. Qu'est un flux de personne et de tâche dans la conception UX: Bonjour à tous. Dans cette vidéo, nous allons parler du mémoire, de la persona et du flux de tâches de ce cours, ainsi que de la signification de ces termes. Le thé vert Scotts, bref, agréable et simple. C'est une petite entreprise locale située à Limerick, en Irlande, où je vis, et ils livrent du thé vert à votre porte. C'est le bref mémoire. Parlons de persona qui est ce prochain morceau. Qu'est-ce que persona ? Persona est un mot utilisé pour décrire le client cible. Dans notre cas, lisons-le ensemble. Notre client idéal est une femme nommée Zoe. Zoe a la quarantaine , elle est mariée, elle a un doctorat, le Dr Zoe, et travaille dans une équipe occupée. Elle vit à Limerick et elle est un peu familière avec leur produit, mais aime passer du temps à envisager le prochain achat. Pourquoi est-ce utile ? Tout d'abord, lorsque nous allons faire nos tests UX, ne sert à rien de m' amener à faire les tests parce que je suis Dan. Je vis à Limerick mais je n'ai pas de doctorat et je ne suis pas une femme de 40 ans mariée. Cela nous permet de trouver les bonnes personnes pour tester ce qui est très important. Ce qui est aussi important, c'est en tant que designer, ce que j'ai eu tendance à faire, surtout au début de ma carrière, que j'ai conçu pour moi, essayant de m'imaginer aimer le thé vert. Je vis à Limerick, ce qui est bien, mais je ne suis pas de Limerick, je viens de Nouvelle-Zélande. Il y a eu cette déconnexion où je conçois ce que je pense être génial, puis je me battrais avec ce que le client pense qu'il devrait vouloir. Le client n'a pas raison, je n'ai pas raison, Zoe a raison. Il s'agit de mettre un personnage pour que le client et moi puissions parler de Zoe, et cela devient un peu moins passionné. Je n'aime pas le vert ou le violet. Eh bien, qu'est-ce que Zoe aime ? Vous pouvez avoir une discussion tierce sur cette autre personne, et cela devient un peu moins. Vous êtes un peu moins blessé en tant que designer parce que vous parlez de cette autre personne qui est pratique. Mais cela vous permet également de prendre des décisions concernant les types de polices, les types de couleurs, la façon dont leur site Web ou application est construit parce qu'elle connaît un peu le produit, mais aime vraiment passer du temps à envisager le prochain achat. Nous allons devoir nous assurer qu'il y a beaucoup de détails sur ce produit. L'idée ici n'est pas d'être l'application de commande la plus rapide au monde, car ce n'est pas ce que veut notre personnage. Notre personnage aime passer du temps à y réfléchir. Il y aura peut-être un certain potentiel par rapport à cela, des comparaisons. Ces choses ont vraiment encadré ce que je vais concevoir ici, et ce ne sont que quelques phrases. Sinon, je finis par concevoir soit pour le client, ce qu'il veut, et ils ne sont pas utilisateurs. Ils sont le client qu'il vous faut, mais pas le client de cette application ou du site Web que vous créez. Ou je conçois pour moi-même. Ou vous finissez, le pire endroit est de concevoir pour tout le monde, tous les groupes de besoins. Concevoir pour tous, c'est concevoir pour personne. Vous vous retrouvez avec ce site Web ou une application qui ne fait vraiment rien pour qui que ce soit, [RIRES] et encore moins un groupe. C'est ce qu'un personnage. Cela vous donne de l'empathie pour le client, pour des choses que vous, thé vert, je n'aime même pas le thé vert. [RIRES] Notre personnalité me permet de comprendre, qu'en est-il de Zoe pourrait s'intéresser au thé vert et me permettre de développer son design, son apparence, son toucher et flux en fonction de ses désirs et de ses besoins. C'est la version courte de Persona. Vous pouvez aller beaucoup plus en profondeur. C'est un conseil. Je vais vous donner mon conseil tout au long de ce cours est de, s' il y a des choses que vous aimez, j'ai compris cela, [RIRES] il a expliqué cela. Faites une petite note dans votre carnet de notes et dites que je vais faire des recherches après cette vidéo ou après ce cours. Personas est l'une de ces choses où il y a beaucoup plus que ce que j' ai vécu et je suis capable de communiquer dans l' une de ces courtes vidéos, alors allez en savoir plus sur les personas. Mais c'est la version courte. Ensuite, parlons des flux de tâches. C'est la tâche qu'on nous a demandé de concevoir. En tant que designer, on vous a demandé de donner à une entreprise, à qui elle est destinée. C'est ce que nous devons produire ou maquette dans Adobe XD, c'est que nous avons besoin d'une page d' accueil/de marketing. Nous avons besoin de notre page de détails sur le thé vert. Nous avons besoin d'une page de paiement et d' une confirmation de commande. Il s'agit du flux de tâches. Un flux de tâches est assez linéaire. Sinon, si vous n'êtes pas accord sur une chose pour laquelle vous êtes en train de concevoir, que ce soit à partir de votre chef de produit , de votre patron, ou du client, vous finissez par créer beaucoup trop. Vous pouvez finir par concevoir la page des termes et conditions, qui n'est pas utile pour ce dont nous avons besoin et de tester des personnes de type Zoe ou Zoe. Utile à la fin, mais il n'est pas utile faire tester cela entre les mains des clients. Nous avons un flux de tâches convenu, et c'est tout pour ce cours. Désormais, le flux de tâches est un terme, habituer à cette approche linéaire étape par étape. Examinons un autre terme, le flux d'utilisateurs. Flux de tâches par rapport au flux utilisateur. C'est vraiment un bon article. Merci, Erika Harano. Jetez un coup d'œil. Il y aura un lien sur l'écran qui apparaîtra dans le coin inférieur. Pourquoi ne développons-nous pas de flux d'utilisateurs dans ce cours particulier ? C'est intéressant. Eh bien, il est utile de connaître la différence entre les flux de tâches et les flux utilisateur. Celui-ci a un très bon exemple de ce flux de tâches. Trouver une recette de crêpes. Vous allez sur la page d'accueil où vous recherchez des crêpes. Dans les résultats de recherche, ils trouvent quelque chose pour une page de recettes de crêpes super bananes. Il s'agit d'un flux de tâches, que nous pouvons concevoir à cet égard. Mais un flux d'utilisateurs est la même chose. Même début, même fin. Mais jetons un coup d'œil à ce sujet ici. Il s'agit d'un flux d'utilisateurs. Il comporte les mêmes éléments. Vous commencez par la page d'accueil, ils vont aux résultats de recherche, ils trouvent la recette super banane. Mais ce flux de tâches original néglige tous les autres chemins vers lesquels l' utilisateur peut accéder, disons qu'il doit arriver au bout ici. Pouvez-vous voir cet organigramme ? Puis-je zoomer avant ? Je peux le faire. Page d'accueil, et dans notre flux de tâches, nous supposons qu'ils utiliseront les résultats de la recherche. Mais vous pouvez voir ici qu'il y a cette décision. Vous pouvez voir les petites icônes ici. Il s'agit de nœuds de décision. Il s'agit d'interactions avec les sites Web. Ce sont des pages différentes qu'ils ont fini. Page d'accueil, ont-ils réellement utilisé la barre de recherche ? En testant, il se peut que très peu de personnes qui utilisent réellement la barre de recherche. Ils finissent par ici. Non, s'ils utilisent ces catégories de navigation, vous risquez de passer beaucoup plus de temps créer une option de navigation par catégorie très claire. Ou bien, c'est peut-être le contraire. Vous pouvez créer cette incroyable extravagance déroulante de navigation d'un menu déroulant. Personne ne l'utilise. Tout le monde utilise la recherche, ou c'est un mélange des deux. C'est pour cela que ces flux d'utilisateurs sont là pour trouver des impasses. Vous pouvez supposer cela, mais les gens essaient de trouver autre chose que ce n'est pas là. C'est là que quelque chose comme ce flux d'utilisateurs peut être bon au début, lorsque vous définissez une tâche. Vous arrivez toujours au bon endroit et vous ne concevez toujours pas la page des conditions générales , ce qui n'est probablement pas important pour l'application ou le site Web que vous faites à ce stade. [RIRES] Vous pourriez trouver cela très important. Mais à ce stade initial, il s'agit d'un travail plus important de faire un flux d'utilisateurs plutôt qu'un simple flux de tâches. Mais nous gardons ce cap concis et faisons une petite partie du flux. Le flux de tâches est assez linéaire, étape par étape et un flux utilisateur est souvent arbre de décision non linéaire. Il s'agit d' une option de test plus complète pour passer aux tests utilisateur. Plus complexe. Plus simple. Cela dépendra du travail qu'on vous a demandé de faire. Dans notre cas, c'est ce travail. Nous pouvons concevoir ces quatre pages. J'ai gardé cela assez simple pour faciliter ce cours. Mais vous pouvez entrer beaucoup plus en détail avec le brief, surtout. Vous obtiendrez peut-être des emplois qui n'ont pas de mémoire. Je veux un site Web. C'est peut-être votre mémoire. Vous en aurez peut-être des très détaillés. Ils peuvent passer par une plus grande entreprise où il y a eu une équipe de personnes, des chercheurs UX. Vous avez peut-être des chefs d'équipe, des chefs de produit et, je ne sais pas, VP et tous ceux qui travaillent sur un projet et vous recevrez un projet assez détaillé à réaliser. Pour moi, je travaille souvent avec de petits produits, petits clients, et souvent j' ai l'option sans brève ou très limitée. Je ne sais pas. Voyez-vous ici que, avec un personnage, un bref et un flux de tâches, je sais ce que je dois faire maintenant. Une grande partie du travail est accompli. Même s'il est assez simple de regarder à l'écran, il est très clair ce que le client va obtenir et ce que je dois fournir. Si vous ne le faites pas et que vous êtes nouveau dans ce domaine, c'est difficile à faire quand vous êtes nouveau, mais vous devez penser à repousser le client ou votre patron, quoi s'agit-il, de qui est le personnage ? Quelles sont les pages que je suis en train de concevoir ? S'agit-il d'un flux utilisateur, flux de tâches ? À quoi ressemble-t-il ? L'autre dernière chose qui est négligée ici, c' est des choses comme les valeurs de la marque et les énoncés de mission. Nous ne savons pas grand-chose sur le thé vert Scotts. Nous ne savons pas, s'agit-il d'une question d'efficacité ? Leur robot leur servit-il ? Ou s'agit-il de revenir à l'agriculteur et l'agriculteur reçoit les prix plus élevés, mais l'agriculteur reçoit un salaire équitable ? Ce personnel est très important. Découvrez que si vous travaillez pour une plus grande entreprise, elle aura un énoncé de mission, des valeurs, lignes directrices et beaucoup de documentation pour vous donner une idée de l'entreprise. Pour une petite entreprise, cela va être beaucoup plus difficile. Il s'agira probablement d'une conversation avec le propriétaire de ce qu'il veut faire, ce qu'il essaie de faire et de comprendre un peu de cette façon. Pour moi maintenant en tant que concepteur UX plus mature, vieux [RIRES], je vais repousser toutes ces choses parce que je sais que ma vie est vraiment difficile, si je ne sais pas vraiment pour qui concevoir. Si je suis vraiment clair qui est le marché cible, qui est le personnage et ce que je suis censé faire, je peux éliminer ce genre de choses clairement, je peux me lancer dans les tests très rapidement et livrer un super produit. Tous mes problèmes tout au long ma carrière, que ce soit en tant que graphiste , artiste de graphisme animé ou retoucheur photo, ou concepteur web, toutes ces choses que j'ai faites, la plupart des problèmes sont dus à des attentes peu claires, soit par un bref bref. C'est surtout parce que j' aime avoir peur. [RIRES] C'est bon de repousser. Vous êtes, pouvez-vous faire ce travail ? Vous allez, d'accord. Vous partez et vous réalisez que vous n' avez pas assez d'informations à ce sujet. fur et à mesure que vous devenez de plus en plus expérimenté en conception UX, il y a un gros trou dans ma compréhension et retournez au client tôt et rapidement afin que ce n'est pas la veille de sa livraison, mais commencer les conversations avec ces éléments tels que des mémoires, personas et des flux de tâches. Ouah, c'était long et un peu long. Commencez à me montrer : « [RIRES] C'est comme cliquer sur les boutons, Dan. » ce que nous allons faire. Est-ce que nous le faisons ensuite ? Je pense que nous serons peut-être très bientôt au moins. [RIRES] Vidéo suivante. 7. Projet de cours 01 - Créez votre propre mémoire: Bonjour à tous. C'est l'heure du projet de classe. Ne considérez pas ces devoirs. C'est comme des devoirs, mais c'est un moyen pour vous de suivre ce cours, pas seulement de suivre aveuglément et de regarder des vidéos qui vous amènent à faire des choses. Ce que j'ai fait, c'est que je m'assure que tout le monde soit un peu unique. Dans vos fichiers d'exercices, vous verrez qu'il n'y a pas grand-chose là-dedans maintenant parce que je suis en train de construire le cours, là-dedans maintenant parce que je suis en train de construire le cours, mais il s'agira de projets de classe. Ouvre ça et ça ressemblera à ça. Il vous indiquera ce que vous devez faire pour ce projet de classe particulier. Celui-là est assez facile. Il génère votre propre mémoire et votre personnalité. J'ai créé un site Web. Eh bien, l'équipe Bring Your Own Laptop a créé un site Web pour vous. C'est ce qu'on appelle randomprojectgenerator.com. Allez-y et générez votre mémoire. En gros, une fois que vous êtes ici, je veux que vous alliez à celui qui dit Adobe XD , saisissez votre nom. Utilisez votre nom de famille, le nom de votre ami, le nom votre animal de compagnie, quelque chose pour donner à votre entreprise un nom unique. me connecte au mien. Scott est mon nom de famille, c'est ce que je vais utiliser, puis entrer chez vous. Je vis à Limerick , puis nous avons touché « Generate Project ». C'est le produit que vous allez vendre. Nous sommes dans le thème de la livraison de nourriture. Dans ce cas, c'est le fromage de Scott. Vous avez vu dans la dernière vidéo que j'ai faite, je l'ai déjà fait et j'ai fini avec le thé vert de Scott. C'était ça. Le vôtre sera différent. Ce sera unique, sauf le nom et l'endroit où l' entreprise est détenue. C'est dans votre région parce que vous saurez à quoi ressemblera la région. Mais ici, ce sera différent. Maintenant, si vous êtes comme, je ne fais pas de fromage, vous pouvez cliquer sur « Réessayer », mais juste une fois. Vous pouvez décider des croustilles, c'est celle que je veux. Plus rien. Vous savez que je passe par là et que je continue de cliquer sur « Réessayer » et d'en trouver un, utilisez le premier ou le second. Ne le frappez pas la troisième fois. Il y aura des problèmes. Une fois que vous avez obtenu votre mémoire, c'est très pratique lorsque vous obtenez quelque chose dont vous n'êtes pas sûr. Si vous avez envie, je n'ai jamais mangé de croustilles de ma vie, c'est un excellent produit avec lequel travailler, parce que vous allez devoir vraiment comprendre Sebastian et ce qu'il est à la fin de la vingtaine et trouver ce qu'il aime en tant que pigiste. Une fois que vous avez obtenu votre mémoire, prenez une capture d'écran ou cliquez sur « Télécharger en PNG », et c'est ce que vous allez travailler avec ce cours. Nous allons construire les mêmes choses, mais ce que je ne veux pas faire, c'est que tout le monde ressemble à moi avec du thé vert. Nous allons tous suivre le chemin. Vous allez choisir des images, des polices et des couleurs qui sont différentes des miennes parce que je veux que vous construisiez quelque chose de génial pour votre portfolio à la fin de cela. C'est juste pour que lorsque vous soumettez vos devoirs, nous ne faisons pas tous exactement la même chose. C'est un peu de créativité là-bas. Il est dit de faire ça. Il est indiqué que vous saisissez votre nom et votre emplacement, enregistrez le mémoire sur votre ordinateur et les livrables. Il y aura des livrables sur tous ces éléments. Il suffit de télécharger votre capture d'écran JPEG ou PNG dans les devoirs les projets ou la section commentaires de ce site Web. C'est tout ce que vous avez à faire, rien d'autre. Je vous verrai dans la vidéo suivante. Obtenez votre mémoire, soyez excité par votre fromage ou quoi qu'il soit. Nous vous verrons dans la vidéo suivante. 8. Qu'est-ce que Lo Fi Wireframe vs de haute fidélité dans Adobe XD: Bonjour, tout le monde. Dans cette vidéo, nous allons parler de LoFi contre HiFi ou, alias, filaires contre haute fidélité ou jolies versions. Une image filaire est l'endroit où nous allons commencer dans ce cours et par où vous devriez commencer en tant que designer. Ça pourrait me prendre quelques minutes pour me moquer de ça. Quelques boîtes simples et je peux mettre entre les mains de quelqu'un pour tester et itérer très rapidement la puissance de la conception UX, d'un MVP, du produit Minimum Viable, et de le sortir et de le faire tester avant vous passez des âges à faire toutes les choses où vous finissez par passer une demi-journée à créner [RIRES] ou à diriger ou à choisir des images. Cela ne me donnera pas un test plus expérimenté. Cette version ne me donnera pas un résultat de test meilleur et plus rapide de la part de mon utilisateur que cela ne le fera. Cela, très rapide et facile, effectue des ajustements pendant qu'ils sont assis là. Cela supprime également beaucoup de choses lorsque vous faites vos concepts initiaux, remettant quelque chose comme ça au client, ils peuvent l'utiliser, ils peuvent le tester, mais ils ne reviennent pas avec étrange des choses comme « Hey, c'est la mauvaise police », « Je ne sais pas où est la couleur », car au début du processus, ce n'est pas notre objectif est de ne pas choisir les couleurs, c'est de s'assurer que les fonctionnalités correctes. Prenons le noyau juste avant commencer à consacrer du temps à la tête et au crénage. Les couleurs, elles ne le font pas ou n'aiment pas, vous pouvez voir qu'il aurait été supprimé du texte. C'est mon message marketing pour que nous ne plongeons pas « Oh, nous ne pouvons pas dire cela » ou « nous aimerions appeler cela autre chose ». Nous obtenons simplement la fonctionnalité de cette tâche, qui est un flux de tâches et le flux de tâches est très simple. Nous ne faisons que ces quatre choses. Une fois que nous avons obtenu la bonne mécanique, nous pourrons passer du temps. C'est toujours important, mais ce n'est pas important au début. Sautez le tronçon de câblage du processus à vos risques et périls. Maintenant, c'est le filaire que j'ai créé. Regardez les coins arrondis fantaisie. [RIRES] Essayez de vous éloigner. Mousse ennuyeuse, couleurs ennuyeuses. Passez-le en noir et blanc, sans coins arrondis. Ce n'est pas le seul look. Jetons un coup d'œil. C'est à vous de déterminer ce que le travail exige. Est-ce que ça va être super simple, ou va-t-il être un peu plus avancé ? Reste toujours à l'écart du design. Mais vous pouvez dire que celui-là passe beaucoup plus de temps à faire en sorte que cette chose soit belle. filaires ne sont pas tous égaux. Je suis dans le but de le faire rapidement et sortir à moins que ça ne soit dans mon portefeuille. Ensuite, je vais rendre le filaire joli, et acheter joli, je veux dire quelque chose de plus comme ça où il y a un peu plus de design, beaucoup plus de temps avec le menage et le crénage, mais c'est un pièce de portefeuille. Gardez cela à l'esprit. Filaires ou faible fidélité, haute fidélité, et ici, c'est ma version haute fidélité ou ma belle vision HiFi. C'est ce que nous fabriquons en classe. Ça va être amusant. [RIRES] Voici un exercice amusant. De toute façon, c'est tout. Off, Hi-Fi. Passons à la vidéo suivante. 9. Les tableaux d'art et la largeur de mon site Web ou de mon application dans Adobe XD: Salut tous. Dans cette vidéo, nous allons dessiner quatre rectangles blancs [RIRES], ce sera excitant. Nous allons explorer ce que sont les plans de travail. Nous parlerons d' abord de la conception d'une tablette mobile ou d'un ordinateur de bureau et de quelques raccourcis de navigation de base pour vous aider, mais allons créer des boîtes. Pour commencer, ouvrez Adobe XD, et nous allons commencer un nouveau fichier qui ne vous donnera qu'un fichier de démarrage générique ou vous pouvez choisir parmi l'un des paramètres prédéfinis ici. Je vais juste vous montrer. Je clique sur « Nouveau fichier » et il correspond par défaut à ce qu' il pense que vous voulez. Il va dire : « Hé, vous avez une page de taille de site Web », et vous pourriez dire  : « Ce n'est pas ce que je veux. » Le fichier le ferme, et ce que nous allons faire, c'est choisir parmi les préréglages. Des trucs mobiles, des contenus Web, tailles de médias sociaux, beaucoup de conception sont réalisés dans Adobe XD au lieu de peut-être quelque chose comme Illustrator parce que les gens s'y habituent. C'est assez rapide. Souvent, vous avez déjà beaucoup de couleurs et de ressources dans Adobe XD, donc les gens font beaucoup de choses sur les réseaux sociaux, travail de conception dans XD. n'y a rien de mal à cela, et évidemment, vous avez une taille personnalisée que vous pouvez taper. Maintenant, je vais commencer par mobile pour ce cadre métallique, et ici jusqu'à vous. Je vais commencer par iPhone 8, cette taille SE, car c'est juste une taille vraiment générique pour le moment. À l'avenir, certaines de ces tailles hautes ou plus minces, vous pourrez peut-être regarder cela et il pourrait y avoir un iPhone 50. Il suffit de Google quelle est la taille de téléphone la plus courante et commencez à travailler avec cela. Celui-ci est bon pour les tailles Apple et Android, donc je vais commencer par iPhone 8. Maintenant, ce que nous pouvons faire ici, c'est que nous pouvons cliquer sur le nom en haut. Cliquons sur Désactivé, cliquez à nouveau. Par ici, pouvez-vous voir cela s'ajuster ? Il est contextuel, ce qui signifie qu'il change en fonction de ce que vous avez sélectionné. Si vous devez modifier le tableau d'art, cliquez dessus. Vous pouvez dire ici que j'ai besoin que ce soit cette nouvelle taille qui mesure 400 pixels, un peu plus large. Je vais défaire ça, ce n' est pas ce que je veux. Annuler, c'est Modifier. Je vais utiliser Command Z sur un Mac, Control Z sur un PC pour le reste de ce cours, mais vous connaissez probablement Annuler. L'autre chose que vous pouvez faire est que vous pouvez dessiner votre propre taille personnalisée. Vous entrez ici, c'est le mauvais. Vous pouvez cliquer dessus ; cliquez sur le nom, appuyez sur « Supprimer » sur votre clavier et vous accédez à cette matrice blanche générique ; pas de terrain, et vous pouvez aller ici. Il s'agit de votre outil de tableau d'art. Votre outil de tableau d'art ; cliquez dessus et nous obtenons toutes ces valeurs par défaut. Là encore, ils sont tous disposés de cette façon. Il y a des montres sur leurs réseaux sociaux, mais supposons que nous voulions revenir à l'iPhone 8 SE. On y va. Il s'agit de ceux par défaut, vous pouvez simplement les faire glisser vers l'extérieur. Vous êtes peut-être en train de concevoir quelque chose qui doit être traîné. Vous pouvez simplement cliquer et faire glisser ces éléments comme vous le souhaitez. Cliquez sur les noms en haut et vous pouvez les supprimer. Pour une raison quelconque, la mienne ne s' ouvre pas assez large. Maintenant, juste une note sur le choix de la taille, générique ou le choix de ce que possède votre client. Si votre client va tester cette chose et qu'il a une taille de téléphone spécifique, vous pouvez dire qu'il a un iPhone 13. Concevez cette taille car ils vont pouvoir l'utiliser facilement. Plus tard, quand il s'agit de codage et que votre développeur le construit plus avec votre aide avec une conception réactive, il s'adaptera en fait à différentes tailles de téléphone. Vous devez choisir une taille pour commencer, et quand elle sera en développement, elle s' adaptera à différentes tailles de téléphone. Ce que nous voulons faire maintenant, c'est que nous voulons le renommer. Ce que nous pouvons faire, c'est là où il est écrit iPhone 8 ou tout ce que vous avez sur le dessus, double-cliquez dessus et passons à celui-ci. Ce sera ma page d' accueil/ma page marketing. Je vais entrer sur mon clavier que nous puissions nommer nos plans de travail. Les plans de travail n'est qu'un autre mot pour dire notre page. Maintenant, vous pouvez les voir ici. Si vous ne pouvez pas, vous pourriez être sur cette chose, cette chose, ou cette chose, nous allons donc être sur cette option de couche ici et cela me montre mes différents plans de travail. Nous allons maintenant créer quatre pages. Bien avant de passer à autre chose, je veux remuer ma page. Nous n'allons pas entrer dans trop de raccourcis dès le début, mais il y en a certains essentiels. Maintenez la touche de la barre d'espace enfoncée pour obtenir cette petite main, puis cliquez et maintenez la souris enfoncée, puis faites glisser votre souris. Maintenez « Barre d'espace » enfoncée, cliquez, maintenez et faites glisser la souris parce que ce que je veux faire est de cliquer en haut. J'ai cliqué sur tout le plan de travail. Je vais aller sur Mac, Commande C, Commande V ; copier-coller. Sur un PC, c'est Control C, Control V. Double-cliquez dessus ici, et je vais remplir mon flux de tâches différent. Vous pouvez vérifier le flux de tâches, il se trouve dans nos fichiers d'exercices ici. Nous construisons celui-ci : page d'accueil, détails du produit, paiement et confirmation. Le prochain sera appelé Détails du produit. Copier le collage. [RIRES] Si vous cliquez une fois avec votre outil de plan il suffit de le jeter là où il en a envie, donc je vais cliquer sur « Supprimer » sur mon clavier. Barre d'espace [inaudible]. Double-cliquez ici. C'est ce qu'on appelle, je ne m'en souviens plus. [RIRES] Laissez-moi vérifier, puis le dernier. Est-ce qu'on a trop de raccourcis ? Ou encore un petit raccourci. Deux fois plus tôt dans le cours en veille. Lorsque votre outil de plan de travail est sélectionné, je peux le faire glisser comme un objet, comme un carré. Je vais défaire pour le faire revenir. Je peux maintenir ma touche Option enfoncée sur un Mac, la touche Alt sur un PC et simplement faire glisser une autre version de celui-ci. Vous pouvez voir si je m'en approche, il y a une partie de la magie de XD. Regardez-moi ça. Vous le rapprochez d'ici. Il est écrit : « Voulez-vous vous aligner et aimeriez-vous être dans le même espacement ? » Vous êtes comme, « Oui », même espacement. [RIRES] Je trouve ça excitant. Notre dernier s' appelle Confirmation. Est-ce que je l'ai bien orthographié ? Je n'ai pas [RIRES]. Je reviendrai tout de suite. Je suis de retour, je ne peux pas épeler. [RIRES] Si vous avez suivi l'un de mes autres cours, vous le savez déjà, mais c'est une confirmation. Vous y allez. Nous avons nos quatre plans de travail. Ils ne s'intègrent pas tout à fait. Ma technique de barre d'espace ; souvenez-vous de maintenir « Barre d'espace », cliquez et faites glisser. Le zoom arrière est un autre raccourci, le dernier que je promets. Maintenez la touche Commande enfoncée sur un Mac, la touche Ctrl sur un PC et appuyez sur moins sur votre clavier pour sortir. Vous pouvez probablement deviner comment y aller, c'est plus. Maintenez la touche « Commande » sur Mac, « Contrôler » sur un PC et appuyez sur plus ou moins. Il y a des tableaux intelligents. Nous allons maintenant nous concentrer sur le mobile. Il n'y a aucune raison pour que vous ne puissiez pas maintenant saisir votre outil de plan et dire que je vais déterminer taille de ma tablette et que j'utilise iPad Pro. Je vais commencer à faire ça, je vais travailler sur iPad. Vous pourriez décider en fait que je vais déplacer ça ici. N'oubliez pas de saisir le nom et de le faire glisser. Cliquez et déplacez la chose , et je pourrais faire la même chose. Je peux copier et coller, et créer une page d'accueil, des détails du produit, confirmation de paiement et commencer à créer la tablette, puis la version de bureau. Dans ce cours, nous allons faire une version de bureau, et vous devrez probablement faire une version tablette et ordinateur pour votre maquette en fonction de votre maquette. S'il s'agit d' une application pour téléphone, alors non. Vous n'avez pas besoin d'une version de bureau. Ce que nous faisons ici, c'est un site Web mobile, pas une application. Il va falloir qu'il y ait une tablette et une version de bureau parce que nous voulons que nos clients puissent commander notre fromage ou notre thé vert depuis leur ordinateur, leur téléphone ou leur tablette, Mais pour l'instant, nous allons simplement nous en tenir au mobile. Eh bien, brièvement, nous utilisons le design mobile d'abord. Nous appelons cela mobile d'abord parce que nous allons concevoir et déployer nos efforts dans la conception de ce design mobile, puis l'adapter plus tard à la tablette et au bureau. Nous ferons du bien pour eux, mais nous concevons d'abord le mobile parce que nous savons que grâce à la recherche des utilisateurs, devinant bien que la plupart des gens vont commander via leur téléphone . Nous concevons d'abord pour cela. Si vous concevez une application de bureau et que vous savez que les utilisateurs accèdent d'abord à votre site ou à ce produit via un ordinateur de bureau, procédez d'abord à une conception de bureau. Je vais le présenter en version bureau. Quand je dis bureau, je veux dire ceux-ci ici : bureau Web. Si vous ne savez pas quoi concevoir, il serait vraiment courant de le faire ici : 1366, mais aussi google. Quelle est la taille de bureau la plus courante actuellement ? Google vous dira que vous pouvez concevoir pour cela. La dernière chose que nous allons faire est de le nommer, sinon nous aurons sans titre. Mec, tu finiras avec beaucoup de sous-titres. Ne vous inquiétez pas. Nous allons le nommer en double-cliquant dessus en haut ici. Nous allons lui donner un nom, je vais appeler celui-ci. Je n'appelle pas ça un Checkout, je l'appelle Scott pour le nom du client. Scott Tea est le nom de notre client. C'est comme ça que je le nomme. Vous pouvez le nommer comme vous voulez, sauf que vous l'appelez Final. [RIRES] Finale V1, V2, terminée. Vous l'avez déjà fait avant [RIRES]. Donnez-lui quelque chose de beau et d'itératif. Au lieu de l'appeler comme ça, j'appelle cela mon flux de tâches de paiement parce que c'est ce on nous a demandé de concevoir et qu'il va être V1, ou A1, ou tout ce que vous voulez utiliser. Lorsque nous apportons des modifications importantes, nous pouvons le modifier en V2 et continuer à le mettre à jour de cette façon. Ne l'appelez pas Final. Nous allons cliquer sur « Sauvegarder » et nous sommes partis. Ça va être ça. Je ne vais pas fixer de bons devoirs. Je veux juste que vous dessiniez quatre pages. Je ne vais pas le vérifier, mais nommez-le avec le nom que vous avez obtenu du générateur de projet aléatoire. Nommez-le et préparez vos quatre pages ici pour la prochaine vidéo. Ne sautez pas les devoirs, c'est comme ça que vous finirez par vous souvenir ces choses plus longtemps. Je vous verrai dans la prochaine vidéo. 10. Travailler avec des caractères dans vos wireframes XD: Bonjour mon ami. Si vous pensiez que quatre rectangles blancs étaient passionnants, vous attendez cinq morceaux de tiques. [RIRES] Nous allons examiner les bases du type. Nous n'allons pas entrer dans les mauvaises herbes. Tout ce qu'il y a à voir avec le type dans cette vidéo. Nous allons en avoir assez pour nous faire partir. Beaucoup de choses que je ne vais même pas expliquer parce que c'est comment démarrer et souligner, cliquez sur le bouton souligner. Cela donnera des choses étranges pour Adobe XD. Notez également que nous allons entrer dans les mauvaises herbes avec eux. Quand je parle de mauvaises herbes, entrez dans les détails du type plus tard dans le cours. Il y a une autre vidéo appelée Font and Text Level 2 plus loin dans le cours où nous abordons un peu plus en détail. Je veux juste nous faire avancer rapidement et oui, passons à l'introduction au texte dans cette vidéo. L'outil de type, c'est celui-ci ici, ressemble à un T. Vous le saviez. Les raccourcis de ce cours, pouvez-vous voir si vous survolez l'un de ces outils, ceux-ci et très souvent, vous apprendrez le raccourci. Ce T, que vous pouvez voir entre parenthèses, est pour l'outil de type. V est vraiment courant, vous ramène à l'outil de sélection ici. Parce que la sélection commence par V. Mais certains d'entre eux sont un peu plus de rectangle Alpha. Vous savez, ce sera un cercle, non, ce sera une ellipse, E pour ellipse. T pour l'outil Type. Il existe deux façons de placer des zones de texte. Cliquez une fois et vous obtiendrez une boîte qui s'allume pour toujours. Si vous revenez à l'outil Type et que vous cliquez dessus et faites glisser une zone vers le bas, et si vous cliquez et faites glisser la zone, elle a ce qu' on appelle une largeur fixe et cela signifie que lorsque je tape, il se brisera et descendez à la ligne suivante. Bon pour le texte de paragraphe. Beaucoup de copies, et c'est bon pour les trucs génériques, les boutons et les boutons [RIRES]. Nous faisons beaucoup de boutons. Vous pouvez les changer. Vous devez d'abord sélectionner la case alors saisissez votre outil de sélection, cliquez sur la case une fois, et vous pouvez voir que vous êtes maintenant la largeur automatique. Maintenant, quand je commencerai à taper dessus, ça va durer éternellement. Il en va de même pour celui-ci ici. Sélectionnez-le avec votre outil de sélection. Cliquez sur ce type et dites en fait que vous êtes en fixer automatiquement la hauteur ou la hauteur automatique, désolé. Cela signifie qu'il arrivera à la fin, puis se brisera. C'est ces deux-là. Ce dont nous avons besoin maintenant, c'est que nous avons besoin de deux choses. Je vais cliquer sur les supprimer. Je vais prendre mon T pour mon outil de type, puis je clique une fois. Nous allons mettre le logo de notre espace réservé, donc nous avons Scott. En fait, je vais faire des capitales, du thé vert Scott, alors tapez votre version. Ce que nous allons faire, c'est prendre mon outil de section, le déplacer ici. Lorsque vous concevez, surtout si l'entreprise est nouvelle, n'a peut-être pas de logo. Il suffit de le taper, avoir juste une version texte. N'essayez pas à moitié de le concevoir à ce stade. L'autre chose est que si l' entreprise possède déjà un logo, essayez simplement d'utiliser une version en noir et blanc, afin de ne pas introduire de couleur à ce stade. Les filaires doivent être simples à tester, rapides, sans couleur, et en parlant de cela, vous n'êtes pas autorisé non plus à choisir des polices. Pas de polices ? Mais je ne suis pas prêt à mentir maintenant, je veux faire des polices. Vous pourrez faire des polices plus tard lorsque nous réalisons notre version haute fidélité, dont nous parlerons plus tard. Mais à ce stade, vous voulez en retirer n'importe quel design. Il s'agit de fonctionnalités de test, donc même si vous aimez vraiment Brush Script, vous n'êtes pas autorisé à l'utiliser ici, vous devez choisir quelque chose de simple. En termes de simple, mien est par défaut Helvetica Neue parce que je suis sur un Mac. Mais quelque chose comme si vous n'êtes pas sûr de ce qui est beau générique parce qu'Arial, je n'aime même pas Helvetica. Ne le dites à personne. Je pense que j'ai commis un péché de designer, mais Helvetica est ennuyeux. Roboto, je sais que ce n'est pas tellement [RIRES]. Moins ennuyeuse, mais c'est juste une bonne police à utiliser pour les filaires, pour n'importe quoi, n'importe quelle copie corporelle. C'est clair, il est très accessible, il est gratuit si vous ne l' avez pas sur votre ordinateur, vous pouvez maintenant le télécharger. C'est le nouvel Arial, je ne sais pas, je l'aime mieux. autres bonnes sont Open Sans est une police générique très courante. Sans ouvert, Sans Source, Source Sans Pro. Tous ces éléments peuvent être trouvés en ligne. Je suis presque sûr qu'ils sont tous gratuits, vous pourrez les télécharger de quelque part. Ce que vous ne voulez pas faire, c'est quand vous commencez tester vos filaires, ce qui se produira très rapidement au début, c'est que vous ne voulez pas, surtout lorsque vous avez un client et qu'ils sont comme , oh, ce n'est pas la police d'entreprise ou bon, nous ne pouvons pas l'utiliser ou si vous avez ajouté du caractère aux polices à ce stade, vous pouvez vous retrouver dans des conversations avec le client sur les types de polices, ce n'est pas le bon, et cela vous ôtera du temps pour être rapide. Gardez les choses simples. Choisissez une seule police, vous n'avez qu'une seule police. Vous pouvez jouer avec le blanc. C'est à voir avec ici, si gras et noir gras. C'est pourquoi j'aime bien Roboto. Roboto. Jetons un coup d'œil. Roboto est vraiment pratique pour, il en a beaucoup et vous pouvez également obtenir davantage sur Roboto. Open Sans est également assez décent. En termes d'italique, mincir et de choisir quelques médiums. [RIRES] Je disais qu'il ne faut pas choisir les polices ici. Je vais chercher différentes polices et leurs différents poids. De toute façon. Placez votre titre en haut. Je vais choisir Roboto pour le mien. Vous choisissez ce que vous voulez. J'ai cliqué une fois et j'ai eu celui-là. Je vais ajouter un autre peu de texte ici et je vais en faire une largeur fixe parce que ce sera mon message marketing et je veux qu'il reste dans cet espace. Je vais taper, c'est mon marketing. Il se souvient de la dernière police que vous utilisiez, donc je vais devoir changer cela. C'est mon message marketing. Je vais sélectionner tout le texte, faire glisser une boîte autour de lui. Je vais aller Roboto et je ne vais pas devenir audacieux. Je vais juste passer à la moyenne. Je n'arrête pas de dire la largeur fixe. C'est ce qu'on appelle la hauteur automatique. C'est celui qu' on appelle la taille fixe. Adobe aime l'appeler différemment dans différents programmes. La seconde, la hauteur automatique, je ne vais pas couvrir correctement toutes les choses comme les tailles de police ici. Vous savez comment choisir la taille de police, je vais choisir 48. C'est trop gros [RIRES]. Je vais le centrer, travailler à travers ça. Les petites icônes le donnent. Ici, c'est l' espace entre les lettres. Si je l'ouvre jusqu'à 20, vous pouvez voir l'espace entre les lettres s'ouvrir, je vais annuler. Il s'agit de votre interligne ou de votre interligne. Pour le moment, je vais l'ouvrir un peu. Il s'agit de l'espace après les paragraphes. Nous en parlerons plus tard. Vous pouvez cliquer dessus, c'est terriblement dur. Soulignez. [RIRES]. La seule chose vous choisissez ici, c'est que vous n'êtes pas censé les coiffer. Même si j'ai fait un peu, est-ce que vous choisissez des tailles parce que c'est mon principal message marketing. Je veux peut-être être un peu plus petit. Nous allons descendre à 16 ans. Je vais le rendre audacieux. Je prends maintenant des décisions quant à l'ampleur de cette opération. Cela se résume à la lisibilité, quel point il est facile à lire, peut-être à des problèmes d'accessibilité. Je vais dire accessibilité tout au long de ce cours. Nous ne le couvrons pas avec beaucoup de détails, mais c'est s'assurer que les gens peuvent réellement le lire. Les autres boutons sont assez gros. Dans ce cas, ce message marketing est-il suffisamment important ? C'est tout à fait vrai, mais est-ce assez important pour faire passer mon message marketing ? Maintenant, vous pouvez passer beaucoup de temps à concevoir cela, mais que se passe-t-il lorsque je fais un zoom arrière ? Si vous concevez de cette façon, vous allez finir par choisir tailles de police à cette taille. Maintenant, ce que vous pensez aller, je vais cliquer là-dessus, je vais aller à 100 %. Parfait. Cela dépend de l' endroit où il est affiché. Si je décroche mon téléphone ici, vous ne pouvez pas me voir, mais j'ai mon téléphone, je le décroche, mets dans mes moniteurs maintenant et il est environ deux fois plus gros. Je sais si je continue de tenir mon téléphone à côté et que je vais commander moins ou contrôler moins. C'est à peu près juste. Quand je fais des choix de design maintenant, est-ce que c'est assez grand ? Si je suis à 75 %, je sais que je suis proche. Le vôtre sera différent, vôtre pourrait être à 100 %. Vous devrez peut-être être beaucoup plus petit. Cela dépend de vos paramètres sur votre moniteur. Ce qui est vraiment vrai, c'est que vous devriez tester sur l'appareil. Nous allons également le faire dans cette classe, pas pour l'instant, mais je vais vous montrer comment vous pouvez publier sur vos téléphones. Vous pouvez vraiment faire de très bons choix. On va juste entrer sur le terrain de balle ici. a quelques autres choses pour nous aider à copier et coller du texte, Il y a quelques autres choses pour nous aider à copier et coller du texte, donc je le sélectionne avec mon outil de sélection sur une commande Mac C, commande V ou un contrôle C, contrôle V sur un PC, vous remarquerez qu'il n'a vraiment rien fait. Il y en a deux versions , il y a du thé vert Scott là-bas, il y a du thé vert Scott, mais ils sont au-dessus de l'autre, juste pour que vous sachiez. Cela ne les remet pas sur le côté. Celui-là va s'appeler ma photo de produit. Je vais avoir une photo ici. Nous utilisons le texte comme espace réservé pour le moment. Je déplace ça vers le bas. Vous remarquerez également que c'est centré parce que nous l'avons fait plus tôt. Alignement à gauche centré. Vous remarquerez que dans XD, chaque fois que je fais glisser quelque chose à l'aide de mon outil de sélection, vous voyez, regardez ça, il veut vraiment être au milieu de la page ou au milieu de la page double. Super pratique. Je vais mettre ça là bas. Maintenant, je veux envoyer un texte ici pour les boutons, donc au lieu de copier et de coller la même astuce que nous avons faite pour nous souvenir d'avoir dupliqué cela. Qui se souvient de ce que c' était ? C'est vrai. Vous maintenez enfoncée la touche Option sur un Mac, la touche Alt sur un PC, lorsque vous faites glisser quelque chose. Vous pouvez le dupliquer sur la même instance que le déplacement. Celui-là va être mon achat maintenant. Je vais dupliquer ça. Celui-ci sera mon bouton En savoir plus. Très bien, ce sera tout pour l'instant. D'autres choses intéressantes qui sont très spécifiques à Adobe XD. Je vais zoomer. Voyons le thé vert ici. Vous avez ce petit point blanc en bas pour un fixe, je n'arrête pas de l'appeler largeur fixe. C'est ce qu'on appelle la hauteur automatique, n'est-ce pas ? Boîte de hauteur automatique. Rappelez-vous celui qui passe sur la ligne suivante. Vous n'avez pas les mêmes contrôles, en quelque sorte. Il y a quatre points blancs pour que vous puissiez l'étendre. Celui-ci parce que nous avons cliqué une fois et qu'on s'appelle une largeur automatique, a un point et vous êtes comme, Oh, qu'est-ce que ça fait ? fait quelques choses, c'est un gars étrange. Zoom avant. Je peux le faire glisser vers le bas et le redimensionner. Intéressant, au lieu de l'utiliser, vous pourriez simplement y aller, vous y allez. L'autre chose qu'il fait, c'est plutôt de cliquer dessus, regardez ceci. Si je viens de m'y déplacer. Vous voyez que l'icône change ? Trop loin, c'est ça, le point magique. Vous pouvez réellement le faire pivoter. Vous pouvez faire toutes ces choses ici. Vous pouvez simplement dire que j'ai besoin qu'il soit à 45 degrés et tapez ça. Ou vous pouvez simplement planer là-haut. C'est ce qu'il fait. Vous pouvez le faire ici, sélectionnez celui-ci. Si je fais glisser le bas, il ne fait pas la taille, mais il fait la rotation. On y va. Très bien. J'ai promis de ne pas entrer dans les mauvaises herbes de celle-ci et j'ai eu un peu dans les mauvaises herbes, mais voilà. Très bien, c'est tout pour le texte. Passons à la vidéo suivante. 11. Rectangles, cercles, boutons et coins arrondis dans Adobe XD: Bonjour, bon retour. Vous êtes toujours là, ce qui est bon signe. Cette vidéo, nous allons regarder des rectangles de dessin. Nous allons ajouter des coins arrondis aux arêtes, nous allons dessiner des ellipses et quelques-uns des raccourcis seront également lancés ici pour la navigation. Ne sautez pas si vous pensez pouvoir dessiner un rectangle avec le meilleur d'entre eux, et il y a quelques raccourcis de navigation que je vais vous montrer tout au long. Allons-y. Pour dessiner un rectangle, il n'est pas surprenant que vous appuyez sur l'outil Rectangle, puis vous le faites glisser vers l'extérieur. Souvent, lorsque vous faites une image filaire, vous ne mettrez pas réellement les images. Je ne fais que mettre un espace réservé pour les images. Dans ce cas, ce sera une boîte. Cela va nous amener à l' ordre des calques car j'ai dessiné une boîte, et par défaut, toutes les cases ont un remplissage blanc et cette bordure grise. Vous pouvez désactiver le remplissage pour voir le texte, mais ce que nous voulons savoir, c'est comment jouer avec l'ordre des calques. Ici, je vais récupérer mon outil de sélection, et je veux le déplacer derrière le texte. Il y a environ mille façons de le faire. Je vais vous montrer les voies courantes. Sachez simplement que tout au long de ce cours, je vais vous donner le moyen le plus approprié à votre niveau ou le moyen le plus courant. Il y aura quatre ou cinq [RIRES] autres façons de faire les choses dans les divisions des logiciels. Si vous découvrez une autre façon et que vous vous dites : « Pourquoi Dan ne m'a-t-il pas montré ainsi ? » Ma méchante. [RIRES] Je vais essayer de vous donner la meilleure façon, et/ou la façon dont c'est approprié à ce niveau du cours, et nous deviendrons plus avancés au fur et à mesure. Je veux déplacer ça à l'arrière. Le moyen le plus simple est probablement de cliquer dessus avec le bouton droit de la souris et de dire « Envoyer à l'arrière », et c'est derrière ce texte. Je vais vous montrer quelques autres façons. Faites-nous simplement travailler et faire des trucs dans XD, donc je vais défaire. Ce que vous pouvez faire aussi, c'est le format long. Ici, je peux aller à l'objet, je pense que c'est le cas, puis aller à Arrangement, et le renvoyer. C'est la même chose, il fait le même travail. L'autre moyen est que je vais annuler est ici dans le panneau de mes calques. Vous pouvez voir ma page d'accueil, et c'est la page sur laquelle je travaille ici. Vous pouvez voir qu'il y a un rectangle, et il est au-dessus de ma photo de produit. Si je clique sur Hold and Drag sous la photo de mon produit, c'est déjà le cas ? Regardez ça, c'est en dessous comme Photoshop fonctionne. La façon dont j' utilise toujours est un raccourci. Annulons cela, si je le sélectionne, et vous pouvez indiquer les raccourcis. Si je clique avec le bouton droit, vous voyez que vous le renvoyez. Il y est là. Tout ce que vous utilisez assez souvent, vous apprendrez à le savoir. Je n'utilise jamais assez le Masquer pour savoir que le raccourci l'est. Je dois cliquer dessus avec le bouton droit de la souris. Mais j'utilise Send To Back tout le temps et Send To Front. Dans mon cas, ces hiéroglyphes ici sont Shift Command et le crochet carré, et c'est le crochet carré situé près de votre touche P. Sur un PC, il s'agit d'un support carré Control Shift. C'est ce que je fais [BRUIT]. Allons défaire ça. Support carré Command Shift. avant, en avant, en avant, en avant, en arrière. J' utilise cette clé carrée. [BRUIT] Beaucoup de façons de faire la même chose. Mettons ça là-dedans. Allons chercher ça. Vous pouvez aligner les choses officiellement, mais pouvez-vous voir qu'elles veulent juste être au milieu. C'est vraiment pratique de cette façon. Mais vous pouvez les aligner correctement, de sorte que vous les sélectionnez et dites ici, Align Center, Align This Way. [RIRES] Cela ne fonctionne pas s'il est déjà là. Vous pouvez voir que je peux aligner ces gars au centre. À vous de décider, mais vous trouverez qu' en fait, c'est plutôt sympa dans Adobe XD. Il veut juste trouver le milieu de tout sans demander. Prochaine étape, les coins arrondis. J'utilise mon outil de sélection, en cliquant sur cette case. Vous devrez peut-être effectuer un zoom avant car nous ne pourrons pas les voir. Si vous effectuez un zoom avant, ces petits cercles, ils sont toujours là. [RIRES] Ils deviennent plus difficiles s'il s'agit d'un objet vraiment petit sur la page. Je fais un zoom avant suffisant pour voir ces choses. Ceux-ci, si je clique sur « Maintenir » et que je les fais glisser vers les coins arrondis vers la droite, regardez ça. Vous pouvez décider. Vous pouvez les taper manuellement, donc je vais l'annuler. Où est-il ? [RIRES] Voyez ce que je faisais là ? Je faisais glisser cela et je voyais où il se trouvait dans le panneau Propriétés. C'est là. [RIRES] Si vous avez besoin qu'il soit exact, vous utilisez 15, vous pouvez simplement le taper, appuyer sur « Entrée », [BRUIT] et ce sera 15 pour tous. C'est une bonne chose lorsque vous souhaitez les faire correspondre entre différents documents. Une autre chose que vous pouvez faire simplement parce que c'est intéressant, si vous maintenez enfoncée la touche Option sur un Mac, touche Alt sur un PC, cliquez et faites glisser l'un d'entre eux, et que vous pouvez cliquer et faire glisser l' une d'entre elles à la fois. [BRUIT] Je peux décider celui-ci et celui-ci. Regardez-moi ça. [RIRES] Je vais tous les remettre à zéro. Vous pouvez le voir ici, il est divisé en différents, sorte que l'un est fixé à 29. Déplacons-le ici, pour que nous puissions l'éditer joliment. Regardez ça. Si je fais glisser ça, [BRUIT] ça les fait tous. Maintenez la touche Option enfoncée sur un Mac, touche Alt sur un PC. Voyez-vous que cela n'affecte que cela ? Il tourne en haut à gauche, en haut à droite, en bas à droite, [RIRES] en bas à gauche. Je peux le faire. C'est ça. Réinitialisez-le. Je vais revenir à tout et dire que vous êtes tous à zéro. Merci beaucoup. Est-ce que je veux des coins arrondis sur la scène ? J'en veux un peu. [BRUIT] Juste un petit indice là. Je veux deux d'entre eux pour les boutons, donc au lieu de dessiner un rectangle puis d'en taper cinq par la suite, je vais utiliser la touche Option enfoncée, la touche Alt sur un PC, juste pour que nous soyons cohérents. Vous voyez, même lorsque je le redimensionne à l'aide de mon outil de sélection et simplement glisser un des coins, que je fais simplement glisser un des coins, il reste collé à ces cinq. Il n'évolue pas avec lui. Je fais beaucoup de mes douces compétences de duplication. Dans ce cas, sont-ils au centre ? Probablement. Allons vérifier. Peut-être pas. là que tu y vas. [RIRES] Coins arrondis. Regardons le dernier, le cercle, qui n'est pas appelé cercle. C'est ce qu' on appelle une ellipse. Je vais sélectionner tout cela à l'aide de mon outil de sélection et simplement vous déplacer vers le bas, donc j'ai un peu d'espace. Je vais prendre l'outil ellipse, E pour ellipse. Cela doit m'apporter un point où si je clique et que je fais glisser, vous obtenez un ovale ou une ellipse. Si vous voulez qu'il s'agisse d'un cercle parfait, maintenez la touche Maj enfoncée pendant que vous faites glisser le curseur, et elle verrouillera la hauteur et la largeur. C'est la même chose pour l'outil Rectangle. Pour l'outil Rectangle, maintenez la touche Maj enfoncée, carré parfait. [BRUIT] J'ai un cercle parfait. J'en ai besoin pour y aller. Je veux que ce soit là. Je veux un petit symbole plus dedans. Nous n'allons pas tirer un avantage. Nous allons simplement taper un plus, donc Tapez Tool, plus. C'est [RIRES] clairement un signe égal. Je vais choisir un poids approprié. On y va. En ce qui concerne la taille, vous pouvez peut-être faire glisser le bas. Cela semble bizarre, mais en fait, vous utilisez ce petit plus, le petit point blanc, beaucoup, donc, je pense que c'est un bon poids, [BRUIT] alors allez là-bas. Un autre bon point, c'est parce qu'il est assez heureux, vous vous dites : « Arrêtez de vous accrocher à tout. » Vous pouvez le rapprocher, puis l'utiliser avec votre outil de sélection. Il suffit d'utiliser les touches fléchées. Sur votre clavier, vous avez le haut vers le bas, la gauche-droite, le haut vers le bas, la gauche et la droite, et vous le rapprochez suffisamment. Effectuez un zoom arrière. Je n'allais pas faire de raccourcis. Nous allons juste les présenter. Je ferai ensuite des charges pour que tu te souviennes d'eux. Si vous me dites : « Mec, ce type me fait flipper avec les raccourcis », ne vous inquiétez pas. [RIRES] Je vais juste continuer à dire qu'ils sont chargés. Ils finiront par entrer dans votre cerveau. Très pratique pour aller jusqu'au bout, il y a quelques raccourcis. Commande 1, passe à 100 %. La commande 2, que je n'utilise jamais, va à 200 %. Commande 0, maintenez la touche Commande enfoncée sur un Mac, c'est Contrôle sur un PC et appuyez sur 0 vous montre tout, ce qui est probablement le plus pratique. Commande 1 et Commande 0, j'utilise beaucoup parce que ça vous sort d'une normale. Si vous tapez vraiment ici, que vous travaillez sur quelque chose, vous pouvez passer à la commande 0 ou à la commande 1 pour atteindre 100 % ou à la commande 0 pour tout voir. Nous allons avoir une organisation relative dans ce cours. Il serait cependant très courant [RIRES] en tant que designer d'avoir tout ce qui se passe partout. Je les copie et les colle. Vous finissez avec de la cochonnerie partout. Si je suis ici, [BRUIT] en supposant que ce n'est pas le bon moment, si je clique sur Commande ou Contrôle sur un PC 0, pouvez-vous voir que cela me montre tout, et c'est juste super pratique. Adieu tous ces plans de travail, et encore la commande 0. là que tu y vas. C'est très pratique. Un peu plus de navigation pour vous. C'est ça. Nous avons dessiné quelques rectangles. Nous avons dessiné un cercle. C'est fini l'excitation. Passons à la vidéo suivante. 12. Comment utiliser la couleur dans Adobe XD: Bonjour à tous. Dans cette vidéo, nous allons examiner l'utilisation de la couleur dans Adobe XD. Nous allons nous retrouver avec de simples boîtes vertes, mais nous parlerons un peu de ce qui se passe ici et différentes choses pour Adobe XD en termes de couleurs, nous allons commencer par l'un des raccourcis que j'ai totalement J'ai oublié de vous montrer dans la dernière vidéo. Nous commencerons par cela , puis nous allons plonger dans la couleur. Nous allons commencer par rien au sujet de la couleur. Nous allons faire un raccourci que j'ai oublié plus tôt. Nous nous souvenons que si vous maintenez la touche Commande sur Mac enfoncée, Contrôler sur un PC et appuyez sur « 1 », cela passe à 100 %. Vous pouvez voir ici. Rappelez-vous cette même clé dans « 2 », soit 200 %. Qui se souvient de la façon dont nous voyons tout cela ? C'est un test. C'est vrai. Maintenez la touche Commande enfoncée sur un Mac, touche Ctrl sur un PC et appuyez sur « 0 ». Ça me montre tout. Il y a une chose que je n'ai pas partagée avec vous, c'est que j'utilise des charges. Je vais prétendre que je l'ai laissé jusqu'à maintenant, mais j'ai juste oublié. Je vais cliquer sur le nom d'un document, puis cliquer sur « Commande » ou « Control 3". Cela met en pleine vue la seule chose que vous avez sélectionnée . C'est juste un autre petit raccourci que je vais finir par utiliser et vous allez y aller, comment faites-vous cela ? On y va, Commandement ou Contrôle 3. Nous y sommes. Ajoutons de la couleur. Je vais cliquer dessus, par défaut, tout est blanc avec une bordure grise. Tout d'abord, je vais vous convaincre ne pas utiliser de couleurs, mais vous pouvez voir dans l'introduction que nous avons fini par l'utiliser. Lorsque vous avez affaire à des cadres métalliques, vous voulez également garder des choses comme la couleur hors de la conversation. Le fil est comme des polices. Si vous choisissez une gamme de couleurs, vous pouvez discuter non pas la fonctionnalité de notre flux de tâches et de son fonctionnement, mais des gens qui choisissent des choses comme, hé, c'est le mauvais vert pour votre entreprise ou moi n'aime pas le rouge. Est-ce que le rouge communique vraiment ? C'est une discussion pour plus tard, après les cadres de fil. Gardez les cadres métalliques super simples. Je l'ai sélectionné ici, je vais cliquer dessus. Maintenant, vous en avez probablement déjà utilisé un. Si ce n'est pas le cas, vous avez votre curseur de teinte ici pour obtenir votre couleur dans la gamme. Disons que vous voulez du bleu, vous obtenez ce petit point dans la gamme bleutée. Ensuite, vous cliquez ici. Vous pouvez cliquer une fois ou souvent, je clique simplement et faites-le glisser. Vous pouvez le voir s' ajuster ici. Cela permet de corriger votre teinte, et ensuite, dans cette teinte, vous pouvez choisir des choses comme vraiment saturées, super-duper bleues ou désaturées, ce qui est partout ici, le blanc et les variations de lumière, foncé, saturé, non saturé. Travaillez ici, obtenez quelque chose pour votre particulier. Mon conseil est que vous devriez utiliser le gris. Grays sont partout ici. Il peut être sur n'importe quel curseur de teinte, peu importe si vous l'avez fait glisser jusqu'au bout, et vous n'avez pas besoin de l' obtenir parfait. , il y En fait, il y a un peu de vert dedans. Mais si vous le faites glisser et que je maintiens ma touche de souris enfoncée et que je claque sur le côté, alors je lâche prise, alors c'est complètement désaturé et c'est un gris que je peux utiliser ici. Si vous voulez un blanc complet, cliquez sur « Maintenir » et faites-le glisser en haut à gauche jusqu'à ce que vous dépassiez l' endroit où vous devez être. C'est tout blanc, de même avec du noir en bas. En fait, le noir a deux taches. Choisissez une couleur, juste une. Essayez de ne pas en utiliser plus d'un. Utilisez le gris. Le gris est la couleur officielle non, mais il serait courant d' ajouter une seule couleur. C'est peut-être la couleur de la marque sur laquelle vous travaillez, juste une. Je vais choisir une couleur. Je vais choisir l'orange. [RIRES] Il a été trop long de cueillir de l'orange. Vous y allez. C'est la couleur que je vais choisir. [RIRES] Ne passez pas de temps à choisir des couleurs. Nous avons notre couleur. L'autre chose, c'est la transparence. C'est à quel point il est transparent, à quel point il est transparent. Si vous souhaitez le taper manuellement, vous pouvez le faire en bas ici. Maintenant, si vous n'avez pas l'habitude d' utiliser la teinte, la saturation et la luminosité, c'est ce HSB, vous pouvez utiliser le RVB. La couleur réelle est exactement la même. n'y a rien de différent là-dedans. Cela dépend de la dernière chose que vous aviez eue. Vous pouvez utiliser le numéro hexadécimal. Si vous êtes un développeur Web ou un concepteur Web, vous connaissez peut-être ces couleurs et être en mesure de mieux les utiliser, ou vous pouvez copier et les coller à partir d' un manuel de spécifications de l'entreprise, quoi que ce soit ici. Vous pouvez saisir vos valeurs RVB. Je finis par traîner ça à ce stade. Si c'est une couleur que vous allez réutiliser, vous appuyez probablement sur ce petit bouton Plus, car il reste ici et vous pourrez la réutiliser plus tard. L'autre est la pipette. Utilisons correctement l' outil pipette. Cliquez dessus, cliquez sur ce type et vous me dites, je ne veux pas qu'il soit blanc. Il y a plusieurs façons d' obtenir l'outil pipette. Vous pouvez entrer ici, cliquer sur cette version et ensuite la voir zoomer pour que vous puissiez être assez précis ? Il est assez facile d' obtenir un grand carré ici, mais vous pouvez le faire de cette façon. Vous pouvez le fermer et en fait, ça va tout droit. Coupez à la poursuite, donnez-moi l'outil pipette. Boom. Ce que vous pourriez trouver au fil du temps parce que je vais annuler cela, c'est le I de votre clavier, pas la pipette comme un E-Y-E, la lettre I. Si vous avez cliqué dessus d' abord, je dois la sélectionner, appuyez sur le bouton « I » puis cliquez dessus, c'est une façon assez courante de faire les choses. Beaucoup de façons de faire exactement la même chose. Maintenant, avant de partir, je ne sais pas que XD le veut vraiment. [RIRES] Pour être un peu rentré là-dedans, il ne cesse de le faire par défaut. Pour le border ici, vous pouvez cliquer sur exactement les mêmes fonctionnalités. Encore une fois, vous pouvez voir qu'il y a mon truc réutilisable, la couleur. Je pourrais le rendre vert pour qu'il corresponde ou je pourrais probablement l'éteindre. Comment éteindre la bordure, vous pouvez la rendre complètement invisible. C'est une façon, probablement pas la meilleure façon, de réduire la taille à zéro. Non, c'est une mauvaise façon , il suffit de le décocher là. Il n'a pas de frontière. Vous, je vais faire la même chose pour celui-là. Maintenant, comment puis-je en sélectionner deux en même temps ? Maintenez la touche Maj enfoncée. J'ai mon outil de sélection, je vous ai sélectionné, maintenez « Maj », cliquez sur cet autre, et ils sont tous les deux sélectionnés. Maintenant, je peux dire que les deux n' ont pas de frontières. Joli. Nous allons aborder les traits un peu plus loin et nous aborderons plus tard des couleurs plus fantaisistes, dégradés, et nous examinerons les styles de couleurs et ces choses plus tard dans le cours. Mais pour l'instant, c'est les couleurs 101. N'utilisez pas de couleurs [RIRES] peut-être une seule, mais ne me laissez pas vous attraper en utilisant deux. Il y aura des problèmes. C'est ça. Je vous verrai dans la vidéo suivante. 13. Les coups et l'apparence copier et coller dans Adobe XD: Bonjour, tout le monde. Dans cette vidéo, je vais vous montrer comment créer des lignes et toutes les choses que vous devez savoir sur l'utilisation de ces bordures ou de ces traits ou lignes, quel que soit le nom que vous voulez appeler. De plus, je vais également vous montrer comment tout changer en même temps, car pour le moment, tout est défini par défaut sur cette ligne blanche avec la bordure grise. Je vais vous montrer comment faire des raccourcis sympas pour copier l'apparence de ceci et la faire correspondre ici. Allons-y. L'ajout d'un trait est facile. Eh bien, en gros, tout vient avec un accident vasculaire cérébral. Dessinez un rectangle, et regardez, vous obtenez un trait autour de l'extérieur. Pour ajuster la taille du trait, commençons par quelque chose de simple. Revenons à ce rectangle ici, [BRUIT] Commande 3. Effectuez un zoom avant sur la chose que vous avez sélectionnée, peut-être revenez à une seule. Avec cette option, vous pouvez voir que j'ai une bordure. Allumez-le. La bordure de couleur ici est normalement appelée trait de trait, mais je vais appeler ça un trait parce que c'est ce que je connais. Nous allons choisir une couleur que nous pouvons voir. La taille est là. Nous pouvons le changer à zéro ou nous pouvons le faire monter. Maintenant, vous pouvez simplement le taper ici. Si je veux 10 points, je peux toucher 10 et appuyer sur Entrée. Souvent, c'est pratique pour n'importe lequel de ces petits champs qui l' ont tapé, je peux cliquer ici. Vous voyez que mon petit curseur clignote, puis je peux utiliser les flèches haut et bas, donc vers le haut pour l'ajouter. Parce que souvent, à ce stade de la conception, vous ne savez pas ce dont vous avez besoin. Tu sais que si tu sais que ça doit être cinq ans plus tard, c'est génial. Tapez-le, mais souvent au début vous êtes comme là. Vous y allez. Je vais en utiliser deux. Vous pouvez tout comme une autre petite astuce intéressante est que si vous maintenez Shift et que vous l'utilisez, cela va en morceaux de 10. Voyez si vous maintenez la touche Maj enfoncée et utilisez la flèche vers le haut , [BRUIT] 32 , [BRUIT] 42 et [BRUIT] qui fonctionne sur tout. Si j'ai ceci et que je me dis : « Je veux juste que ce soit un peu plus gros 16 , choisissez ma flèche vers le haut, [BRUIT] vers le haut, haut, haut, haut, haut, haut, haut, haut, maintenez Shift, et je passe de 22 à [BRUIT] 32, [BRUIT] 42. [BRUIT] C'est dans n'importe lequel de ces éléments. Vous voulez le déplacer sur un pixel ? [BRUIT] En haut. [BRUIT] Cela prend beaucoup de temps. Maintenez Maj. [BRUIT] Bam, se déplace à travers les charges. a complètement détruit. Je n'ai aucune idée ce que c'est censé être ni de l' endroit où il est censé être, mais vous comprenez l'idée. Notre borde/trait, vous pouvez évidemment faire des tirets, donc je veux espacer cinq pixels [BRUIT], et c'est par défaut cinq du tiret, puis un écart de cinq, mais vous pouvez ajuster cela. Vous pourriez dire que c'est 15 ou juste un, [RIRES] cinq. Ce sont des tirets. Je vais passer à zéro, [BRUIT] et à un écart de zéro. [BRUIT] Vous y allez. Ajout de traits. Ajoutons une ligne au milieu. Maintenant, nous allons utiliser cet outil de ligne. Je vais cliquer dessus, et je vais cliquer sur maintenir et faire glisser de ce côté. Je veux, encore une fois, devenir noir, alors je vais cliquer sur la couleur. Allez-y comme ça. N'oubliez pas, faites glisser juste au-delà de ce coin. Ensuite, la taille, je vais monter une, et ça va être ma ligne noire à travers elle. Maintenant, il est très courant de ne pas écrire Product Shot. Je vais supprimer cela et tracer une ligne dans cette boîte ici. Une ligne traversant une boîte est code de concepteur secret pour l'image réservée à laquelle l'image va aller. Nous sommes réticents à mettre des images dans ce mode filaire. La raison pour laquelle nous ne voulons pas utiliser de couleurs et polices, c'est que nous finissons discuter de l'image que nous devrions utiliser. Est-ce les bons porteurs d'images ? Nous voulons juste un filaire très rude et très rapide pour être approuvé par le client ou faire des tests avec juste de vrais tests rapides de base, donc nous allons mettre une image d'espace réservé ici. Maintenant, une chose que vous allez devenir fou est que chaque fois que vous tracez une ligne, le moment, vous ne pouvez pas modifier les valeurs par défaut. Mec, ça me tue à propos de XD, mais c'est ce que nous avons. À l'avenir, vous verrez peut-être s' il existe un moyen de modifier les valeurs par défaut, mais pour le moment, la façon la plus simple d'arrondir est de faire l'une ou l'autre des choses. L'une consiste simplement à dupliquer. Il suffit de voir cette ligne ici. Je pourrais l'attraper, le dupliquer, et je peux le faire pivoter. Maintenant, voyez ce petit point ici. Où est-il ? Nous y allons. Il ne fait rien. Vous pouvez le faire glisser et essayer de l'aligner ou pouvez-vous le voir ici ? C'est un reflet. Il y a un reflet horizontal et vertical, et vous pouvez le faire pour le dupliquer. Une autre bonne façon est quelque chose appelé Copy and Coller Properties. Je vais supprimer celui-là. Celui-là, cette ligne ici, [BRUIT] c'est ce dont j'ai besoin. Je peux simplement utiliser mon raccourci, commande C sur un Mac, contrôle C sur un PC, juste une ancienne copie régulière. Au lieu de simplement coller [NOISE], puis de le déplacer et de le retourner, [NOISE] ce que nous allons faire, c'est que je vais supprimer cela, c'est que nous l'avons copié. C'est génial de cliquer sur cette autre chose. C'est celui-ci qui a une mauvaise taille, une mauvaise couleur, et il y a une option ici, c'est-à-dire Modifier, Coller l'apparence. Vous apprendrez ce raccourci éventuellement, et cela signifie simplement que vous pouvez copier et coller l'apparence. [BRUIT] Nous l'avons toujours copié. Je peux cliquer sur vous. Comment puis-je en sélectionner plusieurs ? C'est vrai, maintenez la touche Maj enfoncée et cliquez sur les deux. Ensuite, en utilisant mon raccourci doux sur un Mac, c'est l'option de commande V, sur un PC, c'est Control Alt V, ou vous pouvez accéder au menu Edition, [NOISE] et regarder ça. Peu importe, on se souvient que le trait était noir, et peu importe si le trait était dessus ou s'il est sur les boutons. Vous pouvez sélectionner un grand nombre de choses et appliquer cette apparence. Est-ce logique ? [BRUIT] Est-ce que je reçois trop de détails trop tôt dans le cours ? Oh, eh bien. L'autre chose est que nous sommes ici maintenant, donc ce que vous pouvez faire, c'est que vous pouvez dire : « En fait, j'ai aimé ça, mais j'ai fini par prendre du noir parce que j'ai le droit d'utiliser une seule couleur. » Mais disons que j' ai quelque chose ici, tapez l'outil autre chose, et que c'est une autre police. C'est ça, et c'est 10 points, et c'est la mauvaise couleur. Vous pouvez faire la même chose. Sélectionnez-le, allez dans Copier, [NOISE] juste une ancienne copie normale, puis sélectionnez celle-ci. Vous pouvez modifier ou utiliser le raccourci ou cliquer dessus avec le bouton droit de la souris. Rappelez-vous, beaucoup de façons d'aller au même endroit. Regardez ça. Il le fait pour les polices ainsi que pour les rectangles, les remplissages, les bordures autour des polices extérieures, apparence de copier-coller. Ce sont mes répliques ici. J'ai des accidents vasculaires cérébraux là-bas. Regardons d' autres coups. Nous allons mettre ce petit menu de hamburgers dans le coin supérieur droit. Je vais zoomer un peu, [BRUIT] pour que nous puissions voir ce que je fais. [BRUIT] N'oubliez pas que c'est Command Plus ou Control Plus sur un PC. Je vais prendre mon petit outil de ligne, et je dessine une ligne, grise sanglante [RIRES] qui fait un pixel. Ça ne fait pas attention. Je vais revenir à mon outil de sélection, et j'en ai besoin de trois. Une chose que je viens de briller là-bas , c'est que je saisis l'outil de ligne. Si vous cliquez et faites glisser vers le haut, il sera probablement proche d'être droit. Ce n'est pas [RIRES]. Comme nous l'avons fait auparavant, n' oubliez pas qu'avec l'outil rectangle ou l'outil ellipse, si je maintiens la touche Maj enfoncée, elle la place dans une hauteur et une largeur parfaites. [BRUIT] E pour l'outil ellipse, maintenez la touche Maj enfoncée, hauteur et largeur parfaites. Ce même outil [NOISE] lors du dessin d'une ligne le rendra droit. Supprimons tous ces pourriels, maintenons l'outil ligne, [NOISE], puis cliquez sur maintenir et faire glisser. Si je maintiens Maj enfoncée, regarde , claque, ça veut bien aller. Une fois qu'il se verrouille à différents degrés comme différents. Est-ce 90 degrés ? Quarante-cinq degrés. , là, là, là, là. Je maintiens le quart de travail tout le temps. Je ne lâcherai pas ma souris, et je peux obtenir quelque chose de clair. Vous y allez. Je vais les mettre en position. Je vais dire en double U. J'utilise mon Alt sur un glissement PC ou Option sur un glissement PC. Je vais en faire un autre. Ce que vous remarquerez, c'est que vous voyez tout ce qui est dit : « Voulez-vous que ce soit exactement 11 pixels comme celui qui se trouve au-dessus ? » Je me dis : « Oui, oui. Bon travail. » Ce sera mon petit menu hamburger ou mon sandwich nav ou je ne sais pas, icône de navigation mobile. Quoi que vous vouliez appeler ça, ce sont ces petites lignes rayées. Cela va me permettre de faire deux ou trois choses. Tout d'abord, je vais utiliser ma taille. Pour moi, c'était environ 75 % la bonne taille sur mon téléphone par rapport à mon écran. La plupart des gens appellent ça le menu des hamburgers. J'appelle ça un sandwich nav. Je l'ai entendu plus tôt et ça m'a collé. [RIRES] Je suis peut-être le seul à appeler ça un sandwich à la navigation, mais voilà. Vous regardez cette taille, vous vous dites : « Ce coup, eh bien, c' est trop bas. Je peux y aller. Je vais faire de la taille. Est-ce à peu près juste ? Oui. Il correspond à tout ce que je fais. Peut-être encore une fois. C'est trop gros, mais encore une fois, rappelez-vous que vous devriez tester sur votre téléphone. Mais je vais zoomer, Command ou Control 3 pour être sur la chose que vous avez sélectionnée. Zoomez directement, mais trop près. Je vais faire un zoom arrière un peu parce que je veux vous montrer d'autres choses. Nous allons choisir le noir, et aussi sélectionner ces types et ces options ici. Cela arrive. Nous l'avons malheureusement nommé premier. C'est la valeur par défaut. C'est là la ligne se termine et se met jusqu'à la fin. Le prochain est la casquette ronde. Regardez ça. Votre ligne est aussi longue, mais elle circule jusqu'à la fin. Vous pouvez voir ce qui se passe. [RIRES] Il y a aussi l'extrémité carrée. Il y a des moments où vous les utilisez tous, principalement les deux premiers. Je vais utiliser des casquettes arrondies car elles sont jolies et correspondent à mes coins arrondis. Je commence à me glisser dans le design supplémentaire où nous devrions simplement garder les choses simples pour notre navigation. [BRUIT] Mais bon, tu n'es pas le patron de moi. Je suis le patron, et je peux décider de mettre des coins arrondis si je veux. Vous pouvez voir qu'il semble trop épais, mais revenons à 75, et mon ordinateur semble à peu près la bonne taille. vôtre peut être à 100 %, donc ça se sent encore un peu gros. Maintenant, vous pouvez tous les ajuster. [BRUIT] Je peux tous les sélectionner, et simplement aller comme ça. [BRUIT] Il n'y a pas de taille officielle, [BRUIT] mais vous pourriez aller vérifier icônes de quelqu'un d'autre si vous [RIRES] trouvez vraiment difficile de dessiner trois lignes qui ressemblent à un vrai menu de navigation normal. Allez vérifier en ligne ce qu'ils ont utilisé par d'autres personnes. Une autre chose pendant que nous sommes ici, c'est que je m'en tiens aux lignes. Les lignes sont assez courantes, mais en fait, il serait courant de placer une icône ici au lieu de ces lignes. Nous allons faire des icônes plus tard dans le cours, mais je le voulais, pendant que nous parlons ici lignes et d'images d'espace réservé, je l'ai googlé, c'est là. Il serait courant de mettre une icône comme celle-ci. Vous n'avez pas besoin de le dessiner. Je vous montrerai plus tard comment obtenir la plupart de ces informations gratuitement depuis des endroits, [BRUIT], mais vous pourriez vous débarrasser de ces lignes et y jeter cette icône. C'est tout ce que j'ai à parler d'accidents vasculaires cérébraux. Oui, je vais faire correspondre ces textes. Je vais tous les sélectionner en maintenant ma touche Maj enfoncée et dire : « Toi, mon ami, encore une fois, en noir. » Parce que je vais régler ça. En fait, je vais sélectionner ceci, revenir en arrière, copier, U Command Option V sur un Mac, Control Option V sur un PC. Ce que je pourrais vraiment faire, c'est de l'amener au premier plan. Il y a plusieurs façons d'utiliser ce que vous voulez. Je suis un nerd de raccourci, donc Commandement Maj entre crochets à l'avant. Oh, non. [RIRES] Le texte est derrière. Vous à l'avant. Vous, derrière. On y va. C'est un point intéressant. Disons que je veux revenir en arrière, je voulais le déplacer derrière ça, mais pas ça. Vous l'avez peut-être vu là-dedans. Je peux le faire sélectionner au lieu de dire un clic droit, Envoyer à l'arrière, ce qui va derrière tout. Vous dites : « Non, juste derrière ce cercle. » [BRUIT] Vous pouvez dire renvoyez-le en arrière. Vous y allez. Nous ne reviendrons qu'à un niveau. Vous pouvez revenir en arrière plusieurs fois en fonction de [BRUIT] où vous avez besoin de votre ordre de calque. Encore une fois, noir, [BRUIT] et quelque part comme ça. [BRUIT] C'est ça. Passons à la vidéo suivante. 14. Projet de cours 02 - Wireframe: Bonjour à tous, c'est le temps du projet de classe, un peu plus grand à faire. En fait, avant de passer à autre chose, si vous êtes comme si je ne faisais pas les devoirs, et je saute. Avant de faire cela, avant que je me renseigne sur les raisons pour lesquelles vous devriez faire vos devoirs, il y a en fait des choses utiles la fin de la vidéo, donc si vous allez sauter le méchant, mais vous ne pouvez pas passer à la fin car nous parlerons de la façon dont je vais allonger les pages, des triangles et des trucs. Mais pour ceux d'entre vous qui pensent, je ferai les devoirs plus tard après avoir regardé les vidéos, vous ne le ferez pas parce que personne ne le fait, et c'est génial de pratiquer ce que vous avez appris et cela aide vraiment, il reste avec vous plus d'un jour après cette vidéo. Faites-le et ce que j'aimerais voir, c'est votre projet à la fin de cela, ce que vous en faites parce que nous utilisons notre propre générateur de projet aléatoire, il sera unique pour vous, donc C'est mon jeu. Allons-y. Vous devriez être capable de tout faire ici. Il y a quelques exemples, c'est juste un rectangle avec un remplissage et un regard blancs et rien de fantaisie qui se passe. Ces choses, ces boutons radio, ce ne sont pas des boutons radio, ce ne sont que deux cercles. Cela n'a pas besoin de ressembler exactement à la mienne, mais la structure rugueuse est la même, car tout au long de ce cours, je veux pouvoir vous accompagner dans ce voyage, mais j'aimerais que vous construisiez quelque chose est unique pour votre propre portefeuille. Donc, au lieu de faire du thé vert Scott, utilisez ce que vous avez obtenu du randomprojectgenerator.com, au cas où le vôtre serait du miel Smith, du thé pétillant, ou quoi que ce soit était. Victoria m'a dit que le thé pétillant était cool et branché. C'est pourquoi c'est une option là-dedans. Je ne sais pas ce que c'est, mais j'essaie d'être cool et branché. Utilisez votre propre nom. Vous pouvez choisir votre propre couleur, vous pouvez choisir votre propre police, mais restez vraiment simple et voyez si vous pouvez créer cette chose. Il y a quatre pages. Il s'agit de vos besoins réels. Je veux que vous construisiez ce filaire. Si vous ne le voyez pas, vous pouvez soit mettre en pause la vidéo il y a une seconde, la mettre en pause ici, ou dans vos fichiers d'exercice, j'en ai créé un PDF à partir duquel vous pouvez copier si vous ne pouvez pas tout à fait voir la petite version. C'est ce qu'on appelle un exemple filaire, donc quatre pages. Ce sont les quatre pages, votre propre couleur, votre propre police. Lorsque vous avez terminé, prenez une capture d'écran de ce que vous faites et téléchargez-la ici , soit dans les commentaires, soit dans les devoirs des projets, en fonction de l' endroit où vous nous regardez. Si vous n'avez jamais fait de capture d'écran auparavant, sur Mac, je sais de quoi il s'agit. J'ai cliqué sur Command Shift 4, puis je peux faire glisser une boîte autour de cela, et sur votre bureau avec capture d'écran que vous pouvez télécharger. Si vous êtes sur un PC, je n'en suis pas sûr. Je pense que vous faites un écran d' impression et vous le collez dans quelque chose, mais Google comment faire une capture d'écran. Vous pouvez prendre une photo avec votre téléphone de votre écran, c'est très bien. Faites ces choses, il y a deux choses qui pourraient vous donner un petit hoquet, c'est comment dessiner une flèche ? Vous ne pouvez pas dessiner de flèches dans XD. J'ai honte de le dire pour le moment. C'est juste l'outil polygone, voir ici, et j'ai dessiné un triangle, je l'ai fait pivoter. Comment l'ai-je fait pivoter ? Vous pouvez utiliser cette chose ou vous pouvez planer dans les coins et simplement faire glisser et c' est une bonne chose que je devrais probablement mentionner. Vous pouvez simplement survoler les objets autour des bords et les faire pivoter ou les taper là-dedans. L'autre chose, la chose vraiment importante, la raison pour laquelle vous écoutez toute cette vidéo, même si vous ne faites pas les devoirs méchants, c' est que la page est très longue ici. Si vous avez une page qui ne correspond pas à la mienne, vous pouvez cliquer sur le nom de la page et vous pouvez simplement la faire glisser plus grande. Ensuite, vous obtenez cette ligne pointillée. Ignorez cela pour le moment. Ne le bougez pas, vous pouvez le déplacer, mais ne le bougez pas encore. Nous en parlerons ultérieurement, mais vous pouvez simplement cliquer sur le nom de la page ou du tableau d'art et rendre plus longue selon vos besoins, et nous vous montrerons comment procéder le défilement et les choses plus tard. Vous pourriez tout presser là-haut. Je ne sais pas pourquoi j'ai fait ça. Regardez, il y a beaucoup de place. [RIRES] Mais c'est tout. C'est vos devoirs. N'appelons pas cela des devoirs, des exercices amusants pour vous aider à pratiquer et à apprendre des choses. Mais de toute façon, c'est tout. Je vous verrai dans la vidéo suivante une fois que vous aurez fait cela. 15. Icônes gratuites pour vos projets Adobe XD et UX UI: Bonjour, là. Cette vidéo, nous allons voir où obtenir des icônes gratuites pour votre maquette filaire, comment les choisir, une introduction à certaines licences autour de certaines des licences gratuites, et en termes de quel format vous devriez trouver vos icônes. Dans ce cas, PNG contre SVG. Très bien, passons à l'intérieur. Trouver des icônes gratuites. Surtout à ce stade du cadre filaire, nous ne voulons pas être assis ici à concevoir nos propres icônes, ce que vous pouvez totalement faire. Ce que nous voulons faire, c'est partir et obtenir le moins d'espaces réservés. Il y a beaucoup d'endroits où trouver des icônes gratuites en ligne. Je vais vous montrer iconfinder.com, j'aime vraiment ça. Mais si ce n'est plus là ou si la qualité n'est pas à la hauteur de vos normes, vous pouvez utiliser ce que nous apprenons ici sur recherche gratuite d'icônes pour n'importe quel site Web. Dans ce cas, je vais chercher une icône de compte. Je veux ce petit truc de personne sur lequel vous cliquez lorsque vous voulez entrer dans vos coordonnées. À ce stade, je cherche des trucs gratuits. Ils ont aussi des trucs payants incroyables , ce qui en vaut vraiment la peine. Mais pour le moment, je cherche gratuitement parce que je ne fais que sortir cette maquette. Ce que je cherche également en tant que licence. C'est là l'élément important. Il y a une utilisation commerciale, appelée licence Creative Commons. Vous devrez vérifier ce que vous utilisez. Dans ce cas, je souhaite utiliser non seulement une utilisation commerciale car cette utilisation commerciale nécessite un back-link. Je veux celui qui dit qu'il n'y a pas de lien arrière requis. Vous pouvez voir ici l'utilisation commerciale et ne nécessite aucune sorte de back-link vers le créateur d'origine. dit, mais ce n'est pas ce à quoi je suis prêt en ce moment. J'ai juste besoin de quelques trucs rapides pour une maquette ou du moins mon cadre métallique. Mais cela réduit ce qui est disponible. Dans ce cas, il y a beaucoup de choses à faire pour commencer. Quelque chose qui ressemble un truc de personnie que je vais chercher. Maintenant, [RIRES] seulement moi et la note éditée que je regardais l'écran pendant environ deux minutes. J'espère que l'éditeur a supprimé cette section [RIRES]. Je suis très vite en choisir un, mais je ne l'ai pas fait. J'ai passé des lustres à en choisir un. Évidemment, nous essayons d' éviter des trucs très haut de gamme parce que cela va commencer une conversation sur les couleurs, est-ce vraiment ce que nous voulons ? Nous voulons quelque chose de générique, mais je voulais que ce soit sympa. Cela nous amène à l' une des plus grandes choses. Outre les licences, ce que vous devez faire est de formater. Le PNG est quelque chose que les gens connaissent et aiment déjà, et le SVG que vous connaissez peut-être déjà ou non. Nous allons les examiner tous les deux. Je vais télécharger ce PNG 48 pixels de taille appropriée PNG 48 pixels de taille et je vais télécharger cette version SVG et je vais vous montrer la différence juste là. Très bien, j'ai donc téléchargé la version PNG et la version SVG. Comment les faire entrer ? C'est un bon point. Dans XD, il y a l'importation de fichiers à long terme ou le raccourci. Vous pouvez aller les trouver. Ils sont là. Vous pouvez en apporter plusieurs en touche « Maj » enfoncée et en cliquant sur deux d'entre elles. Je vais les amener tous les deux. Ils sont là. Voici nos deux petits gars. Ce que nous voulons faire maintenant, c'est les regarder un peu. Commandez trois pour zoomer dessus. Ensuite, je suis de retour à ce petit moment parce que c'est un peu proche. Vous pouvez voir la différence. PNG mauvais, SVG bon. Les PNG ne sont pas nécessairement mauvais, j'ai exagéré cela en téléchargeant un petit, mais il est composé de ces petits cubes appelés pixels alors que SVG signifie Scalable Vector Graphic. Vous connaissez peut-être le mot vecteur. bien avec le vecteur, c'est que lorsque j'essaie de le mettre à l'échelle, maintenez « Maj » pour verrouiller la proportion. Je peux le rendre beau et grand et il ne perd pas de qualité. C'est vraiment grand, il peut être aussi grand qu'un bus, une montagne. Dans la taille du fichier sera encore relativement petite et il aura encore de superbes bords nets. Alors que cela, même si vous en téléchargez un plus grand, revenons sur le site. J'ai téléchargé le bas. Nous allons télécharger le très gros. Nous allons jeter un coup d' œil là-dessus. Je viens télécharger la version volumineuse. La différence, c'est que ça aura fière allure et je vais vous montrer comment j'importe des choses dans XD. C'est la méthode non officielle. Ce que je fais, c'est que je n'utilise pas tous les raccourcis. Je suis paresseux, je ne sais pas. Je le traîne dessus. Cela fonctionne [RIRES]. Ouah, c'est grand. C'est ça. J'ai téléchargé la version très volumineuse et vous seriez comme, oui, c'est de bonne qualité. Le problème est que le compromis est la taille du fichier. Je peux vérifier cela dans mes fichiers d'exercices et nous l'utilisons. Il s'agit des deux PNG, c'est le petit et deux kilo-octets, juste de la même taille que le SVG. Alors que la grande version, regardez à quel point elle est grande, très grande en termes de taille Web. Multiples plus grands que le format PNG plus petit. format PNG n'est pas correct, pas évolutif. L'autre grande chose que vous ne pouvez pas faire avec le PNG, c'est que vous ne pouvez pas le colorer. Revenons ici. « Commande » ou « Ctrl+3 » [NOISE] zoom arrière un peu. C'est bizarre, c'est comme ça que je fais de toute façon. Vous effectuez un zoom avant comme vous le souhaitez. Cette chose ici ne peut pas être colorée. Vous pouvez l'intégrer dans Photoshop et le colorer. Alors que vous pouvez cliquer dessus et dire, je veux que vous soyez quelle que soit la couleur que j'aime. SVG sont bons. Assurez-vous d'avoir la licence nécessaire pour les utiliser. N'ayez pas peur de payer pour eux. Je ne veux pas dire que vous ne devriez pas payer pour eux, mais à ce stade, pour ce cadre filaire, je n'en suis pas à ce stade, nous ne nous engageons envers aucun d'entre eux. Nous en avons juste besoin ici pour des tests de base et pour l'approbation du client, ce genre de choses. La dernière chose lorsque nous sommes en train de regrouper les icônes SVG par rapport aux icônes PNG, c'est que cela est modifiable. Celle-ci ici ne peut pas être modifiée. Vous ne pouvez pas le déplacer. Nous le ferons dans notre dernière vidéo dans un ou deux d'entre eux. Mais je veux le jeter ici aussi. J'ai double-cliqué dessus et vous pouvez le déplacer. C'est l'autre avantage pour les SVG. Coupe sauter. reviendrai ici parce qu'il y a une autre chose importante trouver pour vos icônes que j'ai oublié de mentionner quand j'étais ici. Nous avons trouvé cela comme une icône de compte. Bien souvent, chaque fois que vous aurez besoin de plus d'une seule icône. Si vous recherchez des icônes gratuites, avant de vous engager, jetez-les en fait un coup d'œil. ce site Web, vous pouvez cliquer sur l' icône réelle et y accéder. Vous pouvez le trouver ici, regardez, il fait partie d'un paquet plus grand. qui est bien, c'est que je peux ensuite aller chercher parce que je vais avoir besoin, n'aime pas le grand menu mais le panier d'achat que j'aime bien. Il existe une alternative pour le compte. Il y a un plus et tous les autres types d' icônes dont j'aurai probablement besoin dans le même genre. C'est assez pratique quand vous faites un choix, c'est d'en trouver un qui n'est pas seulement un ranger solitaire tout seul. Il doit faire partie d'un groupe plus vaste pour vous faciliter la vie. Mais préparez-vous également à ce qu'il y ait des icônes qui ne font pas partie de chaque pack que vous aurez besoin de fabriquer vous-même et que vous finissez parfois recréer tout le set éventuellement parce que vous voulez changer de style et qu'il n' y en a pas assez qu'il n'y en a pas assez ou hors marque. [RIRES] Commencez avec des icônes gratuites à cette étape de câblage, mais préparez-vous à créer les vôtres plus tard. Nous le ferons aussi dans ce cours. Je vais vous montrer comment. C'est pour des icônes gratuites. La dernière chose que je veux y jeter c'est qu'ils n' ont pas besoin d'être libres. Vous pouvez payer pour cela surtout si vous travaillez dans une entreprise, l'argent que vous payez pour des icônes est assez faible et cela soutient les personnes qui en font. Ce que j'ai tendance à faire, c'est que j'ai un abonnement à certains sites boursiers. actions sont les choses préfabriquées qui sont payées. Je paie un abonnement mensuel à deux places, bizarrement Adobe Stock et Envato Elements. Ces deux endroits ont des saveurs différentes de bonnes choses. Je peux aller là-dedans et vérifier et au lieu d'avoir à m'accrocher parce que vous regardez des trucs gratuits et que vous ne recevez pas l'icône que vous voulez vraiment. J'ai des abonnements à ces sites. Je paie tous les mois et ça veut dire que ça ne me coûte plus cher d'obtenir un grand ensemble d'icônes qui peuvent faire du sport, les artistes/designers qui les rendent [inaudibles] C'est pour des icônes gratuites. Je vous verrai dans la vidéo suivante. 16. Comment trouver et utiliser les kits d'interface utilisateur existants dans Adobe XD: Bonjour, là. Cette vidéo, nous allons regarder quelque chose qui s'appelle des kits d'interface utilisateur. Ils ont d'autres noms et je les décrirai dans une seconde, mais au lieu de chercher des jeux d'icônes individuels, c'est regarder les fichiers XD d'autres personnes que vous pouvez ouvrir et emprunter. icônes de. J'en ai un couple ici que nous allons examiner, et je vais vous montrer ce qu'il faut chercher, comment les obtenir et nous pouvons les utiliser pour notre projet. terme le plus simple pour Google est probablement les kits XD UI. Kits est le mot que nous voulons, le kit préfabriqué et il y aura des icônes dedans. Mais il y aura également d'autres éléments dont nous pourrions avoir besoin. Jetons un coup d'œil à ceux que j'ai téléchargés. Celui-ci ici, vous pouvez voir qu'il a des boutons prêts à être utilisés. Il y a un peu trop stylisé, mais on pourrait les coiffer. Mais il y a un gros kit et celui-ci à télécharger. Toutes sortes de choses que vous aimez. Oui, j'ai besoin d'un objet de chargement et j'ai besoin d'un espace réservé aux images. Je n'aime pas ça. J'ai besoin d'un cœur. Vous y allez. Toutes les cases à cocher, toutes ces, où allez-vous, mes boutons radio pour lesquels [RIRES] vous pourriez avoir besoin d'aide. Il est difficile de savoir à quoi il devrait ressembler exactement. Les kits d'interface utilisateur ne sont qu'un mot. Un autre mot que vous recherchez peut-être est la feuille d'autocollants. C'est ce que les gens appellent parfois ça aussi, ils appellent ça une feuille d'autocollants. C'est comme ça. Il s' agit d'une feuille d'autocollants. Toutes sortes de choses partout vous aider à construire des choses. Un autre est un système de conception. Maintenant, le système de conception est assez grand. Nous parlerons de systèmes de conception vers la fin du cours. C'est ce qu'une grande entreprise produira pour aider à décrire ce qu' construit lorsqu'il s'agit d' une grande entreprise. Mais vous pouvez également utiliser ce terme pour trouver des trucs, même si vous voulez simplement en retirer des icônes. vol est le mauvais mot, approprié, emprunter. Comme celui-ci, voici le kit d'interface utilisateur Google, et Google Android pour être spécifique. Si vous essayez de ramasser un téléphone et d'utiliser tous les boutons qui se trouvent naturellement sur un téléphone, il est bon de l'utiliser car il ressemble au lieu d'essayer de copier ce à quoi il pourrait ressembler. en termes d'interface utilisateur, vous pouvez utiliser ces dialogues qui correspondent aux polices et au bon positionnement et au style. Oubliez que j'ai dit le mot vol, l'appropriation est meilleure. Kits d'interface utilisateur, feuilles d'autocollants , systèmes de conception, c'est ce que nous recherchons. Ce que nous obtenons, c'est que j'ai fait cette recherche ici et j'ai fini avec ces résultats. Ils peuvent être difficiles. Pourquoi sont-ils délicats ? Trouver des trucs gratuits en ligne et beaucoup de gens font de bonnes et de mauvaises choses. Parfois, on finit par trouver cette pépite. Super, j'ai trouvé ce site. J'aime bien XD Guru, ils sont vraiment bons et ils ont des kits d'interface utilisateur gratuits. Super, celui-ci que nous recherchons et il va probablement s'agir de XD car il s'appelle XD Guru. Mais certains liens ne fonctionnent plus. Celui-là dit gratuit, mais je viens de le chasser [RIRES] et ce n'est plus gratuit, c'est 5$. Je ne pense pas que cette personne devrait le vendre gratuitement, elle dit gratuitement et ce n'est pas ce qui est décevant. De plus, beaucoup d'entre eux se sont inscrits pour recevoir des e-mails. Ce sont des gens payés pour cela. C'est ce que je veux que vous disiez, c'est que c' parfois un peu spammy cette façon où vous avez un téléchargement et une connexion et inscrivez gratuitement quelque chose ou plutôt, tout est gratuit, mais vous partez pour entrer [RIRES] beaucoup de données personnelles. Certains d'entre eux fonctionnent, certains ne le font pas. Ce que j'ai tendance à faire, c'est Adobe. Je l'ai ici. Cela va changer. Ils semblent changer cela. Ils pourraient le mettre à jour. Adobe.com/Products/XD/Features/UI-Kits.html. Je vais maintenant poster ce lien dans les fichiers d'exercices. Je vais l'appeler XD UI kit link [RIRES]. Cherchez ce dossier. Peut-être que vous finissez ici et c'est cool car il y a le kit pour Apple. Je vous ai montré le kit pour lequel nous avons besoin, ils l'appellent Google Material. Google Material est le nom de tous les systèmes de conception pour appareils Android. Je suis une personne Android, c'est pourquoi nous avons celui-ci. Si vous êtes une personne Apple, téléchargez le kit Apple, vous vous retrouverez ici avec un style similaire, choses seront bien agencées que vous pourrez saisir. Ici aussi, en bas, il y a un tas d' autres, ceux-ci. Les kits ne sont qu'un lien direct. Pour valider votre confidentialité, il vous suffit de les télécharger. J'ai téléchargé l'un d'entre eux. Lequel ? Je pense avoir téléchargé le kit d'interface utilisateur dessiné à la main dans vos fichiers d'exercices afin que vous puissiez y jeter un coup d' œil. Où est-il ? Dans nos dossiers d'exercices. J'ai ces deux kits d'interface utilisateur juste pour vous faire gagner du temps si vous voulez en regarder un. Mais c'est le matériel de Google, souvenez-vous d'Android, et il y a l'interface utilisateur dessinée à la main. Dans un fichier, il suffit de double-cliquer dessus et de les ouvrir, ils s'ouvrent dans Adobe XD. Regardons l' autre dessiné à la main. C'est ce que c'est celui-là. Écoutez, c'est un tas d'icônes. C'est juste une bonne façon de commencer à trouver les kits d'interface utilisateur d'autres personnes. C'est déjà un XD. Ce ne sont pas seulement des icônes, il peut s'agir de boutons et vous pouvez construire votre image filaire complète avec tout cela. Comment faire un zoom arrière pour voir du tout ? Quelqu'un se souvient ? Vous vous souvenez. Commandez ou contrôlez zéro. Regardez ça, c'est assez complet et comment l'utilisez-vous ? Vous le copiez et collez. Parfois, ils peuvent être regroupés. Nous examinerons le regroupement et quelques autres éléments dans une seconde. Mais disons que vous voulez vraiment cette chose. C'est l'icône au milieu. Vous pouvez voir que cela fait partie de tout cela. Je peux cliquer dessus avec le bouton droit et dire : dissocions. Toujours groupés. [RIRES] Dissociez-le encore une fois. Maintenant, tout est en morceaux. Je vais les sélectionner, maintenir la touche Maj enfoncée et cliquer sur ces deux. [RIRES] Je laisse ça là-dedans parce que c'est ce qui arrive. Ils sont regroupés et parfois pour les séparer, vous devez les dissocier plusieurs fois, cliquer dessus en maintenant la touche Maj enfoncée, les rejoindre. Je vais les sélectionner, les regrouper à nouveau et les copier. Passez à mon autre projet et collez-le. Il y est là. Vous pourriez utiliser ça au lieu de ma petite croix et je vais dire que vous êtes noir et que je vais me débarrasser de ces lignes. On y va. Effets sonores durables. Les kits d'interface utilisateur sont pratiques. Construisez rapidement des choses avec un certain style, ce truc esquissé dessiné à la main, je ne serais pas réticent à utiliser le style dessiné à la main. Pourquoi ? Parce qu'il y a forcément une icône que je n'ai pas, ce n'est pas ici qui aura à faire et je vais devoir essayer de la faire paraître entièrement dessinée à la main. Je vais finir par dépenser des âges pour quelque chose qui n'aidera pas mon utilisateur à tester le processus de test lorsque les gens vérifient cela et s'assurent que mon filaire fonctionne. Ils ne se soucient pas que ce soit à la main, mais ça va me causer des problèmes. Quand je dis cela, je le ferais probablement , je l'ai déjà fait auparavant, parce que ça a l'air cool, esquissé. C'est ça. Vous recherchez des kits d'interface utilisateur, des feuilles d'autocollants ou des systèmes de conception en particulier pour Adobe XD. Ouvrez-les et commencez à s'approprier des pièces. C'est ça. Je vous verrai dans la prochaine vidéo. 17. Les groupes et les icônes de montage dans Adobe XD: Bonjour, tout le monde. Cette vidéo parle des choses bizarres qui se produisent dans Adobe XD. Le problème, c'est que lorsque vous êtes autodidacte ou dans cette partie du cours, il y a des choses qui auront du sens plus tard à la fin lorsque nous serons géniaux plus tard à la fin et que nous savons tout, mais qui va nous attraper très tôt. Je veux les décrire ici maintenant et si vous arrivez à la fin de cette vidéo et que vous êtes comme, j'ai compris, mais pas vraiment, c'est exprès, présentez-le tôt et nous le couvrirons encore et encore tout au long du parcours et ce sera très facile à la fin. Tout d'abord, c'est ce petit panel ici. Nous avons 1, 2 et 3. Nous allons couvrir les plugins dans un peu. Nous allons regarder comme c'est un tout petit peu ici, car cela va nous montrer d' autres problèmes, puis il y a ce panneau de calques sur lequel nous allons passer la plupart de notre temps. Nous avons une confirmation. Voyez ce sont des plans de travail, alias des pages. Il y a notre marketing de page d'accueil que j'aime en haut et les détails du produit que j'aime dans l'ordre chronologique, aussi. n'y a pas de véritable drame, donc ce sont les pages. Qu'est-ce que cette plaque de pâte ? C'est parce que vous ne l'avez peut-être pas. Regardez ça. Si je le supprime, je retourne à mes plans de travail. Eh bien, je n'ai rien sélectionné. Écoutez, pas de plaque de pâte. Si je le défais, écoutez, nous avons cette plaque de pâte. C'est comme sa propre page, tout ici. Vous aurez toujours une plaque de pâte. Personne n'est jamais aussi bien rangé. Les choses se retrouvent sur une page, même avec ces fous rouages partout. Si vous faites cela, ne vous inquiétez pas, je le fais aussi. C'est ce truc bizarre de plaques de pâte. Rien de trop bizarre à ce sujet. Ça devient bizarre quand on fait ça, à moitié, à moitié. Regardez-moi ça. Vous pouvez parfois avoir quelque chose dessus. Allons-le ici. Pouvez-vous le voir ? Où est-ce qu'il est allé ? C'est la plaque de pâte. C'est juste ce type. On dit qu'il n'y a pas de plaque de pâte, cette chose est en bas. Il s'accroche juste la plus petite liste visible un peu à la plus petite liste visible sur cette page ici. C'est ce qui arrive. Parfois, vous finissez par y aller, je travaille juste sur ce projet et vous comprenez cela. C'est l'un des problèmes. Ce n'est même pas un problème. C'est juste maintenant que vous savez et c'est ce qu'est le truc de la plaque de cuisson. La prochaine chose que je veux vous montrer est quand vous copiez et collez d'un document à l'autre, en fait, je finis par faire ça pas mal et vous êtes genre, comment saute-t-il entre les documents ? Sur un Mac, c'est « Commande » et la touche grave, ou « Contrôle » et la touche grave. Vous êtes comme, le cintre est la clé « Grave ». C'est la clé « Tilde » et vous êtes comme, ce n'est pas plus utile, c'est cette clé ici. Je pense que c'est ici, mais ils sont souvent combinés à cela. Je pense que c'est le « Tilde » et c'est la clé « Grave ». Je n'en suis pas sûr, mais vous le cherchez sur votre clavier. Si vous maintenez la touche « Commande » enfoncée et que vous le frappez sur un Mac, cela changera entre les documents ouverts et appuyez sur « Contrôle » et le frappera sur un PC et il le fera. C'est ainsi que je bascule entre et copier-coller rapidement. Quoi qu'il en soit, c'est un peu une piste latérale. Revenons à la bizarrerie. Je vais devoir échanger. Disons ceci ici et disons que vous voulez l' attraper et que vous voulez le copier, le coller et l'utiliser dans votre document. Tu es génial, je vais juste l'attraper et tu vas ignorer ce petit diamant dans le coin supérieur gauche parce que le coin supérieur gauche tu es comme, je ne sais pas ce que c'est. Cela va causer des problèmes. Nous allons passer à notre document. Je vais le coller et regarder ici, il est dit, eh bien, si vous collez des liens entre des documents, vous pouvez publier une bibliothèque. C'est bien au-dessus de ce dont nous avons besoin en ce moment. Trop hardcore, donc on va le fermer. Nous examinerons plus tard les bibliothèques et les composants. Ce que vous devez vraiment faire, c'est que si vous apportez des informations et que cet avertissement apparaît et/ou que vous passez à cette petite option ici, pouvez-vous le voir dans les bibliothèques ? Si je clique dessus, vous avez ces composants ici. Nous apprendrons les composants plus tard et ce sera facile, mais pour l'instant, nous devons simplement les démonter afin de pouvoir travailler avec eux et ne pas nous causer de problèmes. Le problème est que si je copie et que je colle ceci et que j'en ai deux, si j'en met à jour un, ils sont tous les deux mis à jour. Ce qui est cool plus tard quand nous sommes plus expérimentés , mais pour l'instant cela ne nous pose que des problèmes. Ce que nous faisons, c'est que nous apportons des composants qui entrent dans notre bibliothèque de composants ou dans nos couches. Voyons maintenant si je le sélectionne. Vous voyez qu'il y a l'icône du diamant, il fait des trucs amusants. Tout ce que nous avons à faire est de cliquer dessus avec le bouton droit de la souris et de dire dissocier le composant, puis cliquez avec le bouton droit de la souris et vous dites qu' il y en a encore un autre, il y a des composants dans les composants ici. Le concepteur qui a créé l' autre kit d'interface utilisateur l'a fait. Parfois, vous devez continuer jusqu' à ce qu'il n' y ait pas de composants dissociés. Maintenant, ce n'est qu'un vieux cercle ordinaire avec un rectangle qui vous causera moins de problèmes. Si vous ignorez qu'il s'agit d'un composant, cela fonctionnera probablement toujours, mais vous finirez par changer une icône et tout le monde mettra à jour, et il y a cet avertissement en bas, donc je suppose que je l'ai dit plus tôt dans le cours parce que cela pourrait être troublant. Parce que je vais vous faire créer des icônes dans une seconde, vous allez rencontrer ce problème. C'est pourquoi je l'ai fait ici. Si vous ne comprenez pas encore quels sont les composants, ne vous inquiétez pas, nous allons les couvrir plus tard dans le cours. Ce que je vais faire maintenant, c' est que je l'ai trouvé ici, je vais dire qu'il suffit de les regrouper. Maintenant, c'est juste un vieux interrupteur stupide. Il ne fait rien de fantaisiste. Je vais lui donner un nom. Ici, je vais appeler cet interrupteur à bascule et l'autre chose, c'est que cela dépend de votre niveau de TOC. Je vais cliquer sur mon panneau « Actifs » et nous allons le couvrir plus tard, mais il y a ces petits composants. Nous n'avons pas besoin d'eux. Nous avons transformé cela en son propre petit groupe, ils ne sont pas connectés maintenant. Je sais qu'ils ne sont pas connectés parce qu'il n'y a pas de petit diamant dans le coin et si je clique dessus avec le bouton droit de la souris, cela ne dit pas de dégrouper le composant, juste vieux dégrouper régulièrement et vous pouvez voir tous ces trucs, Je les ai tous sélectionnés avec la touche « Maj », et je vais vous débarrasser. Super bien rangé. Regardez à quel point nous sommes bien rangés. Cela a-t-il été utile ? Ce n'était peut-être pas le cas. Si ce n'était pas le cas, continuez. Continuez avec le cours, vous apprendrez les composants plus tard et vous ne rencontrerez probablement pas trop de problèmes, mais c'est le problème des composants que vous pourriez rencontrer. Vous trouverez comme celui-ci ici, si je copie ceci à partir de l'interface utilisateur de cette personne, c'est celui qui a créé le kit d'interface utilisateur, les a-t-il tous transformés en composants ? Les gens de Google l'ont fait. Celui-là, si je le copie et le colle , tout d'abord, je sais que ce n'est pas parce qu'il n'a pas le petit diamant dans le coin et si je le colle ici, où est-il, voilà, mettez mon vous pouvez voir qu'il n'apparaissait pas sur mes composants et dans le panneau de mes calques. C'est juste un groupe, il n'a pas ce petit diamant. Je sais que c'est un groupe. Pouvez-vous voir cette petite icône de dossier ? C'est le signal d'être un groupe. Vous pouvez double-cliquer dessus pour regarder à l'intérieur du groupe. C'est un groupe dans un groupe , puis il y a quelques chemins qui le composent. C'est vrai. Mais je sais que ce n'est pas un élément. Ça ne va pas me causer de problèmes. Passons à quelques montages. Je vais ignorer ceux là bas. Je vais apporter quelques icônes. C'est donc à vous de décider comment les introduire, importer des fichiers ou utiliser le raccourci. Je vais faire ce que je fais et j'y vais, que voulons-nous ? Dans vos fichiers d'exercice, je veux que vous apportiez le compte 1 et peut-être le panier 1, ces deux-là et que vous les glissiez avant de le faire. Lorsque vous apportez des icônes de différents endroits, il y aura différentes tailles. C'est une chose, ce sont des couleurs différentes. La prochaine étape consiste à essayer de faire correspondre ces choses, et certains des problèmes que vous pourriez rencontrer parce que je vais vous demander de créer des icônes et de faire un petit ensemble de correspondance. Ce que je veux, c'est d' abord leur donner la bonne taille. Maintenant, croyez-moi quand je dis qu'il est plus facile de travailler sur eux quand ils sont vraiment grands. S'ils sont vraiment petits, disons qu'ils sont vraiment petits comme ça. Jetons un coup d'œil à eux. Ils sont toujours vecteurs, donc c'est génial, je fais un zoom avant. Disons que je veux déplacer ce petit cercle ici parce que ça m'agace. Pour y entrer, je peux faire l'une des deux choses suivantes. Je peux cliquer dessus avec le bouton droit de la souris et dire dissocier , dissocier, dissocier, dissocier jusqu'à ce qu'il soit dans les enchères, ou je peux modifier des objets. Je peux y entrer en double-cliquant dessus. Je peux double-cliquer dessus, double-cliquer dessus . Vous y allez. C'est une façon de passer à l'intérieur d'un groupe sans avoir à le dissocier car je peux le déplacer maintenant , puis double-cliquer sur l' arrière-plan et sortir. C'est à vous de décider si vous souhaitez dissocier des objets ou double-cliquer dessus pour y accéder. Vous pouvez le voir ici. Je suis entré à l'intérieur en double-cliquant dessus, j'ai encore double-cliqué dessus, et j'ai cette chose ici. Remplissez 112, c'est cette roue, et nous devons courir au problème avec sa petite taille. J'ai exagéré qu'il soit très petit pour exacerber le problème , je pense que c'est le mot que je veux. Regardez ça, si je vais me déplacer un peu plus haut [inaudible], l'obtenir ? Il est si petit qu'il essaie de s'aligner sur les pixels, si vous savez de quoi ils sont. Il n'y a nulle part où aller. Il doit s'aligner sur l'un des pixels en bas. On ne les voit pas, ce sont petits carrés avec lesquels il essaie de s'aligner, donc ce n'est pas vraiment amusant de toute façon. Ce que vous pouvez faire, c'est saisir les deux car ce sont des SVG. N'oubliez pas la commande moins pour effectuer un zoom arrière ou contrôler moins sur un PC. Je vais les traîner gentils et grands, tenant le quart de travail, pour qu' ils deviennent gentils et grands. Une autre astuce pendant que nous sommes ici, maintenez Maj et option sur un Mac ou Maj et Alt sur un PC, au lieu de passer par le haut à droite, il ira du centre. Il s'agit de l'option Maj sur un Mac et déplacer alt sur un PC pendant que vous le faites glisser. Je fais ces charges et je le ferai beaucoup plus dans le cours. Faisons en sorte que ça soit beau et grand. Allons vous rendre gentille et grande aussi. Donnez-leur à peu près la bonne taille pour essayer de faire correspondre ces choses . Ça m'a l'air bien. Maintenant, lorsque je double-clique dessus pour entrer à l'intérieur, double-cliquez dessus à nouveau, regardez, je peux avoir beaucoup de réglages. Allons là-dedans. Charges de réglage. Nous pouvons le déplacer en petits morceaux et le rendre plus grand. Pour obtenir ce réglage dont vous avez besoin, vous pouvez utiliser votre touche fléchée, appuyez, touchez, touchez, touchez, touchez , touchez, touchez, touchez, touchez, elle bougera un pixel à la fois. Je vais rendre les miennes un peu plus grosses, gigantesques icônes, d'accord, on les réduira dans une seconde. Nous allons commencer à dessiner plus tard dans le cours, mais pour le moment, nous en faisons assez pour nous en sortir pour rendre nos filaires utilisables pour le client et le client pour les tester. Montez-les à l'échelle. L'autre chose que nous allons faire c'est que nous allons essayer et comme ça, ça sort un peu maintenant. Pour le modifier, je vais double-cliquer dessus , double-cliquer dessus, ce peu et je vais cliquer dessus une fois de plus. Je vais entrer dans la forme réelle. Dans ce cas, il y a un groupe, il est là. C'est mon chariot. Si je double-clique dessus, je rentre dans cet autre groupe. Je n'y suis pas arrivé, quelqu'un l'a fait. Groupe à l'intérieur d'un groupe. Puis à l'intérieur de cela se trouve cette partie ici, qui est remplie 110. Si je passe le dernier petit peu, je peux commencer à voir tous les points d'ancrage et je peux faire quelques ajustements. C'est ce que vous pouvez faire. Celui-ci comporte deux points , ce qui est bizarre. Encore une fois, je n'y suis pas arrivé. Ce sont les choses que vous allez rencontrer. Celui-là, ici. Regardez, c'est caché derrière, et c'est génial. C'est ainsi que vous effectuez vos ajustements. Vous pourriez décider que, en fait celui-ci qui tient le quart de travail, je peux cliquer sur tous ces éléments et peut-être, vous y allez. Déplacez ça un peu vers le bas. Jouez-le et déplacez-le et faites-le comme vous voulez essayer de faire correspondre ces deux-là. L'autre chose que vous pourriez faire est d' le poids du coup ou au moins de correspondre. Voyez-vous que celui-ci est légèrement plus épais que celui-ci ? Ce n'est pas vraiment le cas, mais je vais l'imaginer. Je vais vous montrer ce que vous devez faire. Une ou deux choses que je veux faire , c'est que je veux que ces couleurs correspondent. Je clique sur « Nouveau », j'utilise ma petite pipette. Nous savons comment faire cela. Excellent. Ils correspondent à la même couleur. Disons que je veux que ce soit un peu plus épais. C'est un peu mince et tenace pour ce dont j'ai besoin ou du moins celui-ci doit être plus épais, faisons-le pour celui-là. Pour le moment, c'est ce remplissage que je peux ajuster, mais je peux ajouter une petite ligne autour de l'extérieur. Regardez ça. J'ai cliqué en arrière-plan, je l'ai désélectionné, cliqué dessus une fois, et disons, ajoutons une grosse bordure. Il doit être de la bonne couleur, alors je vais cliquer dessus et vous dire. Dans mon trait ou la bordure correspond au remplissage, donc je ne peux pas vraiment le voir, mais regardez ceci, je peux cliquer ici et utiliser ma flèche vers le haut. Vous pouvez voir que je le rends plus complet ou plus léger. Je pourrais décider que c'est ce dont j'ai besoin pour la taille ou la façon dont elle est vue. Je vais dire la même chose avec celle-ci, et j'ajoute une bordure. Je vais, dans ce cas, copier les propriétés parce que c'est essentiellement la même chose, éditer, copier, modifier l'apparence de coller, et vous pourriez décider que celle-ci doit être un petit carré, Celui-ci a 11 ans, et je vais le ramener à 10, et maintenant ils sont parfaits. C'est comment obtenir la correspondance. Examinons la dernière petite bizarrerie qui se produit dans Adobe XD lorsque je suis en train de dimensionner. Ils sont massifs maintenant. Je vais zoomer tout le haut, me souvenir de la commande zéro ou de contrôler zéro, tout. Regardez-les sur la balance. Je veux les réduire, alors prenons deux d'entre eux. Je les ai dupliqués, et je vais vous rendre gentils et petits. Regardez ça. Réduisez-le à la taille de l'icône. Regardez ce qui se passe. Je l'exagère pour vous montrer ce qui se passe. Souvent, ce que les gens font, ils vont simplement partir et ne se rendent pas compte qu'ils ont réellement fait ce que je vais expliquer maintenant. Allons-y vraiment petit. Parce que ce qui finit par se produire, c'est l'accident vasculaire cérébral ou la frontière est encore 11. Il a 11 ans, et il a 11 ans, donc il ne descend pas proportionnellement. Il y a un moyen de contourner cela. Laissons ce type là où il était. Ce type ici, nous allons cliquer dessus avec le bouton droit de la souris et nous allons dire quelque chose qui s'appelle un trait de contour. Cela va cesser d'être cet ajustement, nous ne pourrons plus ajuster la taille facilement, vous le ferez une fois que vous aurez fini de les faire correspondre. Mais si je dessine le trait, rien ne semble se passer différemment, mais sauf que lorsque je le redimensionne, vous pouvez voir qu'il diminue proportionnellement, et c'est une taille plus appropriée. Difficile de cliquer, mais c' est la différence. Les coups ne se décalent pas, ils restent exactement ce que vous les mettez comme. C'est également le cas de ces boutons ici. C'est par défaut très pratique car cela signifie que je peux créer un gros bouton et qu'il n'est pas proportionnellement plus épais que ce bouton, c'est de la même taille. C'était une vidéo qui devait être réalisée avec des choses étranges qui se produisent. Qu'étaient-ils ? Lorsque vous copiez et collez, ils se présentent parfois sous forme de composants. Cliquez avec le bouton droit sur eux et dissociez le composant jusqu'à ce qu'il soit parti, et si vous êtes vraiment bien rangé, supprimez-le des composants. Vous n'êtes pas obligé de le faire, juste si vous voulez être gentil et bien rangé. L'autre chose, c' est le tableau d'art. C'est cette page ici sur notre panneau Calques. C'est considéré comme une page en soi, et c'est là que ces gars vivent quand ils ne sont pas sur une page et qu'ils peuvent parfois être accidentellement sur une page et que vous ne le réalisez pas et disparaissent, disparus. Qu'avons-nous appris d'autre ? Nous avons appris que nous pouvions dissocier ou simplement double-cliquer sur une icône pour y entrer et effectuer des ajustements, et si nous continuons à cliquer, nous pouvons éventuellement commencer à modifier des formes. La dernière était que les traits ne sont pas mis à l'échelle, ils restent les mêmes et nous pouvons cliquer avec le bouton droit et contour si nous avons besoin qu'ils restent fixes. J'espère que c'était utile, si c'est un peu trouble et que vous êtes comme, je l'ai compris ? Au fur et à mesure que nous suivons ce cours, vous serez comme, et pourquoi avons-nous même eu cette vidéo plus tôt ? Ce sera clair. J'espère que si je fais bien mon travail. C'est ça. Je vous verrai dans la vidéo suivante. 18. Projet de cours 03 - Icônes: Bonjour, tout le monde. C'est l'heure du projet de classe. Celui-ci est livré avec quelques trucs et astuces bonus , alors ne sautez pas celui-ci. Parlons de ce que vous devez faire. Nous avons besoin de quatre icônes en haut et trois en bas. Vous finirez probablement par les utiliser à la maison. Un utilisateur peut se connecter et modifier le mot de passe et les autres. Un panier qui les amène à la page d'achat ou à ce qu'ils ont dans leur panier et je vais sortir du menu que nous avons déjà conçu. Ce que je veux que vous fassiez, c'est qu'ils correspondent à chacun, en utilisant les techniques que nous avons apprises jusqu'à présent, obtenir les bons coups. Vous pouvez même les obtenir tous du même endroit. Je peux trouver un bon ensemble. Je suis d'accord avec ça, de même pour les icônes des réseaux sociaux. Choisissez les icônes des réseaux sociaux qui conviennent à votre public cible. Jetez un coup d'œil à votre profil d'utilisateur et dites s'il s'agit d'une personne Linkedln , de Twitter ou de partager sur Tiktok ou quoi que ce soit ? Ajoutez un peu de texte pour qu'ils puissent partager leur achat, puis ajoutez les icônes de médias sociaux appropriées. Ensuite, je veux que vous preniez une capture d'écran et que vous la téléchargiez dans la section commentaires ou dans les devoirs cette page ou dans la section suivante, selon l'endroit où vous faites cela, et ce n'est qu'un exemple. Ce n'est pas forcément comme ça, mais quelque chose comme ça. Je t'ai promis des trucs de bonus-y. Regardons ça. Pendant que vous y travaillez, l' une des choses que vous pouvez faire est de trouver une icône d'accueil. Il ne faisait pas partie de ce groupe que j'ai trouvé. Je trouve que c'est un moyen de l'obtenir d'un autre. J'ai dû ajouter un coup à l'extérieur. Je vais l'apporter dans Command Shift I est le raccourci sur un Mac et Control Shift sur un PC à importer ou vous pouvez le glisser comme si j'avais fait un petit devoirs. La différence entre celle-ci est qu'elle n'était pas assez épaisse. Voyez-vous que c'était assez mince ? Vous savez comment j'ai dit de l'augmenter et de commencer à travailler. Je ne voulais pas m'embêter parce que tout ce que j'avais à faire c'est ajouter un petit coup à l'extérieur et je voulais partager avec vous, j'étais comme, oh, c'est très pratique. Est-ce que lorsque vous ajoutez une bordure et que vous choisissez la bonne couleur, ce n'est pas la plus petite taille. Vous pouvez descendre à 0,5. C'est pourquoi je veux en parler, vous pouvez descendre à 0,1. Dans ce cas, je pense que j'ai choisi 0,25, et j'essaie de le mettre à l'échelle et de faire correspondre ces icônes ici. C'est juste ce que je voulais faire valoir. Vous pouvez utiliser de minuscules tailles fractionnées pour le coup. Ensuite, sur mes trucs et astuces, vous voulez probablement regrouper des trucs. Surtout si vous voulez utiliser ces prochaines astuces de, pouvez-vous voir qu'elles ne sont pas tout à fait alignées. Il est difficile de les aligner visuellement. Vous les sélectionnez tous et vous dites que je veux qu'ils soient partout ici, vos outils d'alignement sont alignés sur le haut, les aligner au milieu. Vous pouvez le voir parce que ce n'est pas groupé, ça les écrase complètement. Je vais dire que vous naviguez avec le bouton droit de la souris et accédez au groupe. C'est l'une de ces choses. Vous l'utiliserez probablement suffisamment pour obtenir le raccourci Command G sur un Mac, Control G sur un PC. Maintenant, quand ils sont regroupés, je peux tous les sélectionner. J'utilise simplement mon outil de sélection et fais glisser une boîte par-dessus tous. Je vais dire, alignez-les à travers le milieu, s'il vous plaît. Maintenant, ce n'est pas toujours vrai visuellement. Parfois, tu aimes que ça marche, mais ce type doit monter en couple. Cela est également totalement autorisé. Il n'est pas nécessaire que ce soit mathématiquement correct. Il doit être assez proche visuellement correct. L'autre, est-ce qu'ils sont distribués ? Ils ne le sont pas. Celui-ci est un peu plus proche que celui-ci. Encore une fois, vous pouvez le faire s' ils sont tous regroupés individuellement, groupés séparément les uns des autres. Je peux les sélectionner, et il y a cette option ici. Il s'agit d'une distribution horizontale. Il y a un raccourci que vous n'apprendrez jamais. Qu'est-ce que c'est ? Commande de l'option H. Je ne me souviendrai jamais de celui-ci. Je n'en utilise pas assez. Je peux le faire et nous allons essayer les séparer individuellement. Mais parce qu' il y a parfois ces espaces négatifs ici, parfois vous, ce type a juste besoin d' aller un peu comme ça. C'est permis. Je vous donne la permission de booster les choses, mais il faut que ça remonte. Il s'agit de l'alignement et de la distribution. Vous pouvez également tous les sélectionner et les copier. Parce que ce que je dois faire c'est de zoomer complètement vers le haut. Qui se souvient de ce que c'est ? Commande Z ou Control Z sur un PC. Je les ai tous copiés. Ce que vous pouvez faire, c'est que vous pouvez dire en fait, je veux me débarrasser de vous, ce gars est parti. Je peux dire que vous pouvez cliquer sur le nom de celui-ci et cliquer sur Coller. Il le placera exactement au bon endroit sur la page, à condition qu'il s'agisse de pages de la même taille. C'est pratique pour mettre à jour les pages au lieu d' essayer de les aligner. L'autre chose que vous pouvez faire, c'est que vous pouvez faire plus d'une. Je vais défaire ça. Je peux dire que vous maintenez la touche Maj enfoncée sur mon clavier et cliquez sur les noms de ces trois, puis appuyez sur Coller. Ce sont vos bonus. Maintenant, allez faire vos devoirs et mettez ces icônes. Je vous verrai dans la vidéo suivante. 19. Comment ajouter une interaction à votre prototype dans Adobe XD: Bonjour, tout le monde. Dans cette vidéo, nous allons regarder le prototypage notre petit site Web mobile et tous ces petits fils ici quand ils sont tous connectés comme ils le sont. Je peux passer en revue et dire, en savoir plus, retourner à la page d'accueil, aller à la page du panier. L'ajout d'un peu de navigation pour prototyper notre conception est ce que nous allons faire. Allons-y. Pour ajouter l'interaction, nous allons passer de la conception, ce qui serait le moment de prototyper. Rien ne semble vraiment changer si ce petit panneau change un peu. Maintenant, pour tout activer, cliquez sur le nom de l' un des plans de travail. Faisons la première page, la page d'accueil. Ce que nous allons faire, c'est que lorsque vous cliquez sur cette page, nous allons la faire accéder à ce plan de travail ici. Il suffit de cliquer et de faire glisser cette petite chose bleue pour que vous puissiez voir celle-ci. Ensuite, nous allons lui donner un aperçu, alors passons un aperçu ici, en appuyant sur ce petit bouton « Play », puis cliquez dessus et votre plan de travail se chargera. Cool. Pour le moment, il suffit de cliquer n'importe où pour passer au plan de travail suivant. Là, jusqu'à là. Simple. Cliquez à nouveau et cela ne va nulle part car nous n'avons monté qu'un plan de travail. Ce que nous pouvons faire, c'est que vous n'avez pas vraiment à fermer ça. Cela peut rester ouvert. Pour moi, gardez-le souvent sur mon autre écran ici que vous ne pouvez pas voir, ou nous pouvons simplement le garder ici dans ce cas et il survole tout. Vous pouvez le fermer à nouveau et l'ouvrir, pas de problème, mais c'est tout. L'autre chose à noter, c'est qu' il peut commencer sur la mauvaise page. Vous êtes peut-être comme, ce n'est pas la page d'accueil. Il ne présume pas que vous voulez commencer à l'extrême gauche, car vous pouvez en avoir un ici. Il ne sait pas vraiment par lequel commencer. Ce que vous faites, c'est de le lancer, si je veux commencer par la page de paiement pour prévisualiser cela, suffit de sélectionner cette page ou de sélectionner le plan de travail. Vous pouvez laisser cela ouvert, vous n'avez pas besoin de le réinitialiser. Vous pouvez simplement cliquer ici. [RIRES] Vous voyez que cela s'ajuste en fonction du plan de travail que vous avez sélectionné, donc cette chose n'a pas besoin d'être fermée. Ce que nous allons faire sur la page Détails du produit c'est que nous allons dire que vous y allez, puis sur la page de paiement, vous allez y aller, donc une vraie plate-forme de base. Pour recommencer au début, je vais cliquer sur cette « Page d'accueil » et dire cliquer. Regardez-moi ça. Fancish. [RIRES] Mais pour le moment, bien que cela utilise le tout, en cliquant n'importe où. Ce que nous voulons faire, c'est avoir ces boutons pour aller à des endroits. Ce que nous allons faire, c'est que nous allons fermer ça , donc ce n'est pas déroutant. Pour s'en débarrasser, il y a plusieurs façons. La façon dont je le fais de toute façon est de cliquer sur la page d'accueil. Pour supprimer cette connexion, il suffit cliquer enfoncée et de la faire glisser vers nulle part. Pas là, juste ici. Vous pouvez rentrer chez vous, n'importe où ici, et lâcher prise, et cela rompt ce lien. C'est une façon de le faire. Le plus officiel est que j'ai sélectionné Checkout, et ici, il a ajouté un déclencheur de touches. en faisant glisser cette petite chose c'est supposer quelques choses ; que vous allez cliquer quelque part ou toucher, sur un téléphone, c'est évidemment un toucher, pour cliquer sur un bureau. Il va ajouter une transition à la page Confirmation et elle va utiliser la valeur par défaut pour la dissolution. On peut dire qu'on ne va nulle part. Vous pouvez voir qu'il ne va nulle part maintenant. Vous y allez. Nous avons décomposé tout cela parce que ce que nous voulons faire, c'est travailler sur des objets réels. Ce que nous voulons faire, c'est au lieu de cliquer sur toute la page, pour accéder à la page Détails du produit sera mon bouton En savoir plus, et ce que je vais faire, c'est que je ne vais pas avoir le texte sélectionné, effectuons un zoom avant. Appuyez sur le bouton sélectionné, juste pour qu'il y ait un peu plus de zone cliquable et que vous puissiez la faire glisser ici. Allez-y. Page d'accueil marketing, cliquons sur « Jouer » et rien n'est cliquable à part ce gars. C'est la base du prototypage. Maintenant, ce que nous pourrions faire, c'est que je veux revenir sur cette page d'accueil, je vais vous y retourner mon ami. Vous y allez. Nous acceptons toutes les valeurs par défaut, nous parlerons de simplification et d'autres choses dans une prochaine vidéo, mais pour le moment, c'est ce que vous finissez par faire ; page d'accueil, En savoir plus. Page d'accueil, et il suffit de truquer cette chose avec tous vos fils musicaux, et ils sont connectés à différentes pages. Une autre chose que vous pouvez faire dans cet aperçu est au lieu d'essayer de tout brancher uniquement pour votre propre navigation, vous pouvez utiliser les flèches gauche et droite pour les parcourir. Si vous voulez simplement voir à quoi ressemble la page de paiement, vous ne voulez pas utiliser toutes les interactions, vous pouvez simplement utiliser la gauche et la droite et vous les parcourir toutes. qui est vraiment génial à ce sujet c' est parce qu'il est toujours ouvert, regardez ça, le design peut réellement changer. Vous voyez, vous pouvez le prototyper, travailler là-dessus et voir à quoi il ressemble sur cette conception sans avoir à le fermer, et voir à quoi il ressemble sur cette conception à le redémarrer ou à l'actualiser. n'y a pas de vrai bouton de rafraîchissement, j'aimerais qu'il y ait un retour à la page d'accueil [RIRES] mais il n'y en a pas. Vous cliquez dessus pour revenir au début, nous utiliserons ces touches fléchées. Pendant que je travaille, j' aurai toujours cet écran ouvert et je l'aurai juste ici sur mon autre moniteur et je vais travailler. Il me montre juste à quoi ça ressemble tout le temps. Un dernier petit conseil pour le prototypage est que nous avons fait la page d'accueil, où l'avons-nous fait ? Eh bien, deux petits conseils maintenant que j'y pense, je vais tout sélectionner ; alors commandez A sur un Mac, contrôlez A sur un PC, où est-il ? Sélectionnez tout, si vous êtes en mode prototype, il sélectionne tout et vous montrera tous les fils qui peuvent être utiles pour savoir ce que vous avez ou non. Ce sera comme si j'ai fait ça chez moi, mais vous pouvez voir que celle-ci n'a pas été connectée. Cela arrive beaucoup avec la navigation. Supposons que nous n' ayons pas de page de comptes, donc nous n'allons pas utiliser celle-ci. Cela ne fait pas partie de notre flux de tâches, mais celui-ci le fait ici. Nous allons dire que vous allez sur la page de paiement. Vous pouvez simplement y aller, vous allez à la page d'accueil et c'est très bien avec seulement quatre plans de travail. Mais ce que vous pouvez faire, c'est uniquement si vous êtes en mode prototype, si vous sélectionnez tous ces quatre ou quatre ou copiez les. Nous avons supprimé cette bande plus tôt, et nous les supprimons, cliquons sur le titre et les collons. Voyez-vous qu'il ramène les liens, cela ne ramène pas celui-ci car nous sommes déjà sur la page d'accueil. Si je vais sur celui-ci, supprimez ces gars, collez-les, celui-ci n'a pas payé parce que nous sommes sur la page de paiement. Il ne peut évidemment pas montrer que le fil entre en lui-même, mais la page d'accueil fonctionne. Celui-ci va me montrer des tas de choses. Tu as compris ce que je veux dire ? Voir la page d'accueil et la page du panier est là. Si vous faites beaucoup de choses répétitives, assurez-vous de copier le collage dans un prototype. La raison pour laquelle je vous montre que c'est de le faire dans l' autre sens pour qu' on ne l'ait pas. Si je le fais en mode design et que je vais ici et que je vais, où en est un, celui-ci ici, copiez. Il ne passera pas tous ces fils. Si je vais ici, supprimez le collage. Si j'ai un mode prototype, pouvez-vous voir qu'il n'a pas copié et collé ces fils ? Vous devez être en mode prototype pour copier et coller des fils. Vous serez éventuellement pris en compte et vous demanderez pourquoi l'interaction ne se produit pas, devez simplement être en mode prototype lorsque vous copiez et collez. Dans ce cas, on se moque d'un téléphone portable. Peu importe que vous vous moquiez d'un téléphone portable d'un site Web ou d'une tablette, cette petite chose apparaît de la même façon. Nous prenons simplement le mobile maintenant parce qu' il devient le plus populaire pour beaucoup de choses en particulier pour ce commerce électronique. Je finis par commencer beaucoup plus sur mobile, mais cela ne veut pas dire qu' une version de bureau ou une version horizontale rectangulaire n'est pas là où vous devriez commencer et prototyper. Les trucs et astuces que nous apprenons ici fonctionnent tous de la même manière. Très bien, c'est tout, passons à la vidéo suivante. 20. Animation et simplification de prototypes dans Adobe XD: Bonjour, tout le monde. Dans cette vidéo, nous allons aller un peu plus loin dans le prototypage. Nous allons examiner les différents types d'animation, ce qu'est l'assouplissement, et nous allons créer quelque chose comme ça. Regardez ces choses pousser au lieu simplement se dissoudre si je reviens à l'aide de mes flèches. Nous allons également créer cette monstruosité. Prêt ? [RIRES] C'est mauvais. C'est cool, c'est mauvais. Permettez-moi de vous montrer comment procéder dans Adobe XD. Pour créer cette animation incroyable, nous allons simplement approfondir le prototypage. Maintenant, vous remarquerez que celui-ci s'appelle niveau 1 de prototypage de cette vidéo car il y a le niveau 2 plus tard dans le cours parce que nous y jetons l'évier de cuisine maintenant. J'aimerais que vous ayez un peu de compétence dès le début du cours, et nous pourrons ensuite approfondir certaines de ces choses, comme le prototypage plus tard. C'est un peu plus maintenant. première chose est qu'il s'agit d'une assez petite quantité de plans de travail, mais disons que maintenant il peut s'agir de 30 pages ou 50 pages. Au lieu d'essayer de les faire glisser et d'arriver à tous les endroits différents, ce que vous pouvez faire, c'est que vous pouvez simplement cliquer sur le bouton et ici, eh bien, cliquons dessus et dire, j'aimerais que le transition pour aller au plan appelé la page très bien nommée Artboard, également à la caisse et il ira là. Si vous ne nommez pas vos pages, cela s'appelle Artboard 1-52, ce qui se produira. Je nomme le mien ici principalement parce que tu regardes. Mais cela facilite la tâche. Si vous les nommez, vous pouvez réellement les choisir à partir de la destination. C'est une chose. L'autre chose que je veux expliquer ici, c'est que par défaut, c'est une transition de dissolution. Changeons le nôtre en glissant vers la gauche. Nous ne les parcourrons pas tous, mais regardons Glisser à gauche par rapport à Push Left parce qu'ils semblent très similaires. Je veux que le bouton Acheter se trouve ici. Vous remarquez qu'il se souvient de la dernière chose que vous avez faite. Si vous modifiez quelque chose et que vous continuez à l'ajouter, il va continuer à glisser vers la gauche. C'est bien, en fait. Si vous obtenez quelque chose que vous aimez, vous pouvez continuer à l'ajouter et il se souviendra de la dernière chose que vous avez appliquée. Je vais changer le mien en Push Left. Jetons un petit coup d'œil et voyons parce qu'ils semblent pareils. Vous jouez, jetons un coup d'œil à Acheter maintenant, glissez à gauche, où en êtes-vous ? Glissez par-dessus le haut et Purchase est une poussée vers la gauche, il n'y a pas de chevauchement, il suffit de pousser vers la gauche pour que vous décidiez ce que vous voulez. Vérifiez également que vous ne concevez pas quelque chose qui ne peut pas être réalisé au moins facilement par votre développeur. Si vous le vendez dans le rebond de votre client et que vous l'avez vu au début et que les développeurs sont comme si nous ne pouvons pas le faire, et que le client est prêt à rebondir, vous allez avoir problèmes. Parlez à votre développeur. Ayez très tôt un bon dialogue sur ce que vous pouvez et ne pouvez pas faire. Laissons ça ici. Nous allons le laisser là. Regardons l'autre chose appelée « assouplissement ». Je vais vous laisser jouer avec les autres animations. Ce n'est pas très excitant. Dissoudre ou None, aucun ne signifie simplement qu'il va sauter dessus comme une coupe de saut et que vous pouvez jouer avec ces différentes. Examinons l'assouplissement car sans l' assouplissement, c'est rigide. Nous allons le prévisualiser. Regardez ça maintenant, il n'y a pas de finesse. assouplissement, c' est le ralentir dans ce cas, ralentir l' assouplissement signifie que lorsqu' il se rapproche la fin, il va ralentir un peu parce qu'il ressemble à une sensation naturelle, même bien que ce soit numérique. Nous pouvons l'exagérer, passons jusqu'à deux secondes, ce qui est trop long, mais cela aidera à mieux comprendre l' assouplissement. Jouons à ce type, achetons maintenant. Voyez-vous qu'il ralentit à mesure qu' il se rapproche de la fin ? Exactement comment fonctionne la gravité réelle [RIRES] si la gravité pouvait la glisser latéralement. Quoi qu'il en soit, c'est facile et vous pouvez vous débrouiller avec ce que vous ressentez, ça a l'air agréable. Une chose qui vous est interdite, c' est que vous pouvez l'essayer une fois dans ce cours, et alors vous n'êtes plus autorisé à l'utiliser, c' est le rebond. [RIRES] Le rebond est le pire. Le rebond de deux secondes est encore pire. Allons y jeter un coup d'œil. Si vous avez mon cours de montage vidéo Premier Pro ou quelles sont les portes liées, une autre mauvaise transition ? Peel de page. C'est l'équivalent d'Adobe XD. Prêt ? [RIRES] C'est cool pendant environ trois ou quatre clics le bouton , puis ça devient fatigant. Je ne juge pas, vous pouvez utiliser Bounce. D'autres là dedans. Je vous laisserai tous passer par eux. Je vais juste en faire un de plus avec vous, des choses intéressantes. Prêt ? C'est bon, comment appellent-ils ça ? Laissez-moi réfléchir. J' y ai pensé. [RIRES] J'y ai réfléchi pendant des lustres. J'ai dû anticiper les règles d'animation Google. Si vous ne connaissez pas les règles de l'animation, il est pratique de le savoir en tant que concepteur, en particulier en tant que concepteur UX. Allez voir Lucas Ridley, il a un excellent cours sur les bases de l'animation. L'anticipation est que lorsque vous vous penchez sur vos talons avant d'avancer, vous mettez votre poids en arrière pour aller de l'avant. Cela aide les gens à anticiper ce qui va se passer parce que personne ne se lance juste en avant. Vous mettez votre poids dans le pied arrière avant de vous pousser vers l'avant. C'est ce qui se passe ici. Jetons un coup d'œil maintenant, finissons. Faisons une seconde, et c'est prêt maintenant, avant qu'il ne recule ou vice versa. voyez-vous ? C'est bien. Je pense que ça va être le cas pour celui-là. Jouez avec les différentes animations, jouez avec les différents types d' assouplissement et combien de temps elles prennent, trouvez un peu ce que vous aimez. Nous ferons plus de prototypage plus tard dans le cours, quelques trucs plus hardcore. Mais pour le moment, je pense que nous en avons assez pour continuer. Faisons ça. Continuons. 21. Comment voir votre design sur l'application XD sur iPhone et Android: Bonjour, tout le monde. C'est moi dans la nature. Il s'agit d'une vidéo qui montre comment obtenir une statistique sur un arbre sur votre appareil mobile. Parce que, eh bien, nous devons voir à quoi cela ressemble sur l'appareil pour choisir des éléments comme polices et faire les tests plutôt que d'essayer de l'utiliser à l'écran. C'est ma configuration, c' est à quoi ça ressemble de l'autre côté. Normalement, c'est en partie désordonné, mais pas trop désordonné, ça s'aggrave. Ce que nous devons faire, je vais vous montrer deux façons différentes de le faire. Cette mise à jour en direct avec le cordon USB. Vous savez ce qu'est le cordon USB ? [RIRES] Nous faisons ainsi , puis je vous montrerai une façon de le faire via le Cloud. Les deux ont leurs avantages et leurs inconvénients. C'est la façon la plus excitante. Je vais vous le montrer. C'est facile. Quelle que soit la façon dont nous le faisons, vous devez télécharger l'application pour votre téléphone. Si vous êtes sur Android ou Apple, peu importe, accédez à votre App Store ou à votre Play Store en fonction de votre type de téléphone et téléchargez l'application Adobe XD. Pour le télécharger, vous devez vous connecter avec votre Adobe ID et votre mot de passe, que avec votre Adobe ID et votre mot de passe, vous aurez toujours oublié, et vous aurez besoin d'un mot de passe réinitialisé. Une fois que vous avez fait cela, [RIRES] et que vous y êtes connecté. C'est assez facile. Vous devez trouver un cordon USB. Vous savez ce que c'est, puis vous les branchez. En fait, ce que je vais faire, c'est que je vais configurer ça, pour que la caméra puisse les voir tous les deux, j'espère. Vous attendez là. De retour à l'intérieur de l'ordinateur ici une seconde. Une fois que vous avez connecté votre cordon USB à votre téléphone, montez en haut ici, pouvez-vous voir ce petit appareil ? J'espère que vous devriez voir votre petit appareil ici et cliquer dessus. Voici mon Pixel 4, cliquez dessus, puis revenons à l'autre caméra. C'est ma petite configuration ici. [RIRES] J'ai ouvert l'application sur mon téléphone. J'ai ouvert mon Adobe XD, j'ai cliqué sur la petite icône que vous venez de voir dans le coin supérieur. En fonction de parfois, il saute juste dessus, mais parfois voyez en bas, il y a cette petite icône. C'est un appareil connecté. Regardez ça. Ils correspondent. Ils le font, ils correspondent exactement. Ce qui est vraiment sympa, c'est de regarder ça. C'est une mise à jour en direct. Une façon cool. Vous pouvez le brancher et travailler sur des éléments tels que les tailles de police. Vous pouvez dire que cela ne fonctionne pas très bien. La taille de police est peut-être trop grande ici, donc je vais descendre à 30. Il est tellement plus facile de concevoir des icônes maintenant parce que vous pouvez commencer à les toucher et partir, est-ce assez grand pour toucher ? Cliquez dessus. Cliquons sur le « Panier d'achat ». Oh, je suis allé au panier. Est-ce que c'est cool ? J'adore ça. C'est comme si j'avais fait quelque chose et que j'avais l'air, ça marche, et c'est là. Page d'accueil, en savoir plus. [RIRES] Même un effet de rebond. [RIRES] C'est du prototypage en direct sur votre appareil. Vous pouvez évidemment le mettre à jour et il sautera également sur les pages sur lesquelles vous travaillez. Pouvez-vous voir dans les noms des pages ici ? Je ne sais pas pourquoi j'ai fait ces charges, mais c'est juste quelque chose de magique dans sa mise à jour. L'autre chose à noter, c'est que nous avons bien notre étiquette. Vous pouvez avoir la version de votre tablette assise là, horizontale, verticale. Vous pouvez brancher plusieurs appareils et les connecter à tous. Génial. Une chose est qu'il y a deux choses. La première est si, disons, parce que ce que nous utilisons c'est pour que vous puissiez concevoir avec elle. C'est comme cette fonction ici. Vous pourriez demander au client de s'asseoir avec vous et l'utiliser sur son téléphone. Vous pouvez le faire avec des tests utilisateur, afin que vos employés puissent l' utiliser et les brancher à l'ordinateur. Je vais vous montrer un autre moyen dans une seconde, c'est probablement mieux pour ça. Mais il y a des choses comme des indices. Ce qui est si je clique quelque part, pouvez-vous voir en haut ? Ça va être un peu dur. Je ne suis pas sûr que l' éditeur puisse effectuer un zoom avant. Mais il y a un peu de points forts là-bas. Revenons à la page d'accueil. C'est un peu élevé parce que je ne tiens pas mon téléphone. Je ne veux pas écraser le coup de feu. Mais pouvez-vous voir si je clique dessus, voyez ces choses surligner pour donner un aperçu visuel de ce que vous pouvez cliquer parce que nous n' allons pas tout arranger. Je ne veux pas créer de page de compte. n'a pas demandé d'en faire un. Cela va aider les gens à savoir où ils sont autorisés à aller dans cette maquette et comment s'en sortir. Vous êtes comme, mon téléphone était coincé ici. Vous pouvez cliquer trois fois, prêt, un, deux, trois. Il vous donne des trucs. Vous pouvez dire ces indices de hotspot, que je viens de vous montrer, vous pouvez les désactiver. Navigation par balayage, nous n'avons pas encore obtenu de navigation par balayage. Nous le faisons. Par défaut, vous constaterez que vous allez passer de la page suivante à la page suivante sans avoir à l'installer avec les fils. C'est une chose. Mais les trois clics vous amènent là-dedans. Cela vous donne quelques contrôles supplémentaires, nous ne les examinerons pas tous. Ils sont relativement explicites, prennent une capture d'écran, ce qui est cool, et un prototype de sortie. C'est la façon de sortir d'ici. Ce qui est assez cool, c'est que je peux débrancher ça maintenant. Bizarrement, même si nous n' étions pas mis à jour en direct maintenant, je ne peux pas le mettre à jour en direct. Pouvez-vous me voir le déplacer ? Probablement pas, mais il ne sera pas mis à jour en direct, mais je peux reprendre l'aperçu et il le mettra en cache et s'en souviendra. Je peux maintenant prendre cela dans ma réunion et il sera toujours là. S'il s'agit d'un document très volumineux, disons qu'il s'agit de nombreuses images et qu'il s'agit d'un document de 100 pages ou 100 téléchargements. Branchez-le et attendez longtemps et parcourez les différentes pages, alors assurez-vous que tout est chargé avant débrancher, il finira par se charger. Pour ce truc parce que c'est assez simple, il s'est chargé très rapidement. Mais oui, tout fonctionne même avec le débranchement. [RIRES] C'est la seule version qui consiste à le brancher. Permettez-moi de vous montrer l'autre version. Nous sommes de retour. Laissez-moi vous montrer dans l'autre sens. C'est assez similaire, mais vous devez faire quelques choses. L'inconvénient est qu'il n'y a pas de mise à jour en direct. Cela signifie que vous n'allez pas bouleverser les choses et qu'il est totalement mis à jour, mais c'est utile lorsque vous concevez. Mais supposons que vous l' apportiez à la réunion du client ou à l'un de vos utilisateurs potentiels pour effectuer des tests. Ce que vous devez d'abord faire, c'est de vous assurer que ces petites icônes ici ne sont peut-être pas mises à jour comme la mienne, ce sont de petites icônes Cloud. Ils peuvent supprimer cela. Mais je suis enregistré dans le Cloud en ce moment. Il s'agit de la valeur par défaut pour Adobe XD. Vous êtes peut-être l'une des personnes qui luttent contre ça vous êtes Fichier Enregistrer sous mon document local. Cette mise à jour ne fonctionnera pas. Vous devez l'enregistrer dans le Cloud car cela va être téléchargé votre bibliothèque Creative Cloud ou dans le panneau de vos ressources dans le Cloud, comme par magie, l'application Adobe XD que nous venons de télécharger. Vous devez toujours télécharger cette application, aurez accès où que vous soyez. Ne sera pas mise à jour en direct. Jetons un coup d'œil. Si vous les avez enregistrés sur votre ordinateur. Jetons un coup d'œil. J'ai une version de bureau que j'ai créée. Écoutez, pas de nuage. Ce que vous devez faire pour que cela fonctionne, vous devez l'enregistrer dans le Cloud. Fichier, Enregistrer sous. Ce faisant, il sera utilisé par défaut dans Creative Cloud et il sera associé à tous les autres documents. Il va le faire. Ce qui est génial avec l'économie dans le Cloud, c'est qu' il s'agit toujours d'une sauvegarde automatique. Je n'économise jamais en XD. Il économise simplement par magie tout seul sans avoir à le faire. Vous pouvez le faire. Eh bien, s'il est grisé, cela signifie que c'est déjà fait pour vous. Mais regardez ceci, si je déplace cela, vous remarquerez que de temps en temps, il va essayer de se mettre à jour. Il y a toujours une mise à jour en direct dans Adobe Cloud. Vous pouvez cliquer sur « Enregistrer manuellement ». Si vous en avez toujours l'habitude, vous pouvez le voir y faire. Cela signifie maintenant que nous allons passer à l'application et à l'autre appareil photo. Nous sommes sortis et parce que cela n'est plus mis à jour en direct. C'est comme une déconnexion. Ce qui se passe, c'est que vous l' enregistrez comme nous venons de le faire dans le Cloud, puis d'ouvrir votre application Adobe XD, la même. Mais au lieu de cette troisième icône vous utilisez cette première, c' est-à-dire vos documents Cloud. Il y a mon petit gars mis à jour. Écoutez, il a été mis à jour il y a deux minutes. Ouvrez-le. J'espère que nous y allons. Nous avons notre petite animation en cours. Nous avons notre petit prototype en cours. Vous pouvez toujours interagir avec elle comme l'autre. Il est là. [RIRES] Il est toujours là. La seule différence est qu' il n'est pas mis à jour en direct, mais cela signifie également que vous n'avez pas besoin de cordon USB, vous décidez de ce que vous voulez faire. Cela pourrait changer à l'avenir. Il peut utiliser la technologie sans fil au moment où il utilise une connexion USB filaire pour effectuer cette mise à jour en direct. Mais bon, c'est très bien. Souvent, je le fais simplement de cette façon parce que je ne conçois pas. En même temps, je veux juste jeter un coup d'œil sur un test étapes plutôt que sur le live. Même chose, triple clic pour sortir. Mettons-le à jour. Parce qu'il ne se met pas à jour en direct, que faites-vous ? Ce que vous pouvez faire, c'est que même si vous êtes ici, ce que je vais faire, c'est dire que nous voulons changer. Je vais dire que jusqu'à l'évidence, je vais lire que vous allez sur mon ordinateur ici et je vais changer la couleur de cela. Vous ne pouvez pas me voir faire ça, mais je vais choisir cette couleur. On y va. Je vais cliquer sur « Enregistrer » sur mon ordinateur, juste pour le forcer à mettre à jour vers le Cloud. Je l'ai fait maintenant. Je l'ai modifié sur mon bureau , double-cliquez puis quittez et chargez-le simplement. Il va chercher le bon. C'est rose. Je trouve que c'est une bonne façon de le faire. L'autre chose, c'est que chaque fois qu'il démarre, il commence sur cette page. Pourquoi ? Permettez-moi de revenir sur l'ordinateur maintenant et je vais vous montrer comment le forcer à démarrer sur une page en particulier. Pour qu'il démarre sur une page particulière, il faut que vous soyez en mode prototype. Alors, si vous cliquez sur ces pages, ce qui finit par se passer est, voyez-vous ici ? Voyez cette petite icône ici, qui va simplement indiquer à l'application, mais c'est la façon de commencer. Ignorez le flux, nous en parlerons plus tard. Mais l'essentiel est que c'est là que le flux commence. Vous pouvez avoir plusieurs flux en cliquant sur deux d'entre eux. Ensuite, vous pouvez décider quel flux suivre. Nous le ferons probablement plus tard. Mais pour l'instant, n'ayez qu'un seul flux. Vous pouvez l'activer et l'éteindre. Il suffit de l'avoir sur la page que vous souhaitez afficher en premier dans votre prototype. C'est ainsi qu'il faut s'assurer que cela se produise. right est un test sur un appareil. Il n'est pas nécessaire que ce soit un téléphone portable, il peut s'agir d'une tablette, évidemment de tester sur un ordinateur, vous pouvez simplement le faire sur votre ordinateur. Vous exécutez Adobe XD sur. C'est ça. Je vous verrai dans la vidéo suivante. 22. Projet de cours 04 - Test sur votre téléphone: Bonjour à tous, heure du projet de classe. Nous allons tester sur votre téléphone. Nous, vous l'êtes. suppose, je veux que vous téléchargiez l'application et que vous testez votre prototype dessus et lorsque vous aurez fini, je veux que vous preniez une photo de votre téléphone avec elle. Cela peut être délicat car vous êtes probablement le seul appareil photo que vous avez sur votre téléphone, alors empruntez le téléphone de quelqu'un d'autre ou voyez si vous pouvez faire de la magie avec l'appareil photo de votre ordinateur portable. Si rien de tout cela ne fonctionne, vous pouvez simplement prendre une capture d'écran, juste une capture d'écran plat de votre écran qui convient également. Je veux que vous le tessiez sur votre téléphone. Faites vos propres tests, assurez-vous que tout clique et je veux que vous soyez excité par ce que vous avez fait sur un téléphone qui fonctionne. C'est tellement cool quand il sort de l'ordinateur et commence à être, je ne sais pas vraiment. De toute façon, je suis excité. Maintenant, il y a quelques choses que vous pourriez rencontrer lorsque vous effectuez vos tests et nous allons les couvrir maintenant. Examinons Adobe XD. Vous avez peut-être remarqué dans la dernière vidéo que certains des boutons sur lesquels je cliquais, j'ai dû cliquer plusieurs fois, ce qui n'est pas bon. [RIRES] Il y a quelques choses que vous pouvez faire en fonction de votre icône. Celui-là est relativement facile à cliquer parce que c'est assez carré , mais il y a beaucoup de gaspillage d'espace ici. Ce que vous pouvez faire, c'est que cette chose ici s'appelle la maison. C'est en groupe. Qu'y a-t-il dans ce groupe ? Rien, pas beaucoup. Ce que je vais faire, c'est l'outil Rectangle et je vais simplement dessiner une zone cliquable plus grande. Il y a ça, je peux enlever la bordure. Je vais également enlever le remplissage pour qu' il n'y ait pas de remplissage, pas de bordure. Il est toujours là, mais je ne peux pas vraiment le voir. Ce sera ma zone cliquable. Je vais les sélectionner tous les deux, je vais les regrouper en appuyant sur Command G ou Control G sur un PC ou vous pouvez cliquer dessus avec le bouton droit de la souris. Donnons un nom, parce que pourquoi pas ? Soyons fantaisies. J' appelle le mien Icon-Home. J'ai d'abord utilisé le nom générique puis les choses les plus identifiantes, alors celui-ci est mon Icon-Cart. C'est juste une meilleure façon de le faire. Vous pouvez clairement voir où se trouvent les icônes et comme mon bouton d'affichage maintenant ou le bouton principal ou quelque chose du genre. Quoi qu'il en soit, passez en revue, ajoutez un peu plus aux boutons si vous devez tester au début, cela pourrait fonctionner parfaitement. Vous pouvez aussi décider que, je ne sais pas, ils sont trop proches ou que vous avez de gros doigts. [RIRES] Vous ne pouvez pas vous empêcher de cliquer sur deux d'entre eux. Effectuez des tests par vous-même sur votre téléphone. Maintenant, il y a une application impliquée et je ne suis pas sûr que le téléphone de tout le monde puisse le faire, donc vous obtenez une partie entière comme si ça ne fonctionnait tout simplement pas, mais j'aimerais que vous l'essayiez. L'autre chose que je veux que vous fassiez attention c'est la taille des polices, car je vais passer à la commande à 100%. Je sais que ce n' est pas la bonne taille pour mon écran. Je l'ai conçu à cette taille, vous pourriez regarder sur votre téléphone aller, trop grand, il est vraiment facile à voir et vous êtes comme « trop petit ». Il est très courant d'en avoir 16 comme taille de copie corporelle, mais vous pouvez décider qu'elle doit être plus grande pour cette chose particulière ou plus petite. Jetez un petit coup d'œil sur votre téléphone, effectuez des tests, ajustez la taille des polices. Nous n'en faisons pas trop en termes de style, mais nous faisons un test. Assurez-vous que tous les boutons fonctionnent. Est-ce qu'ils vont aux bouts ? Souvent, vous cliquez, vous l'installez, puis vous commencerez tester et vous réalisez que vous pouvez être piégé sur une page. Vous avez oublié de régler la caisse, fait toutes les autres pages, mais il n'y a aucun moyen de sortir de cette page. Faites un test, effectuez une capture d'écran, téléchargez-la dans les commentaires, les devoirs ou les projets en fonction de l'endroit où vous effectuez cette opération. L'autre chose que vous pourriez faire est que, j'ai fait de la taille pour mon téléphone qui est un téléphone de taille Android générique, vous utilisez peut-être une taille plus ou je ne sais pas, les iPhones sont beaucoup plus longs, donc vous êtes autorisé à le faire. Rendez-le parfait pour votre téléphone. Vous pouvez cliquer dessus et modifier la hauteur et la largeur. Vous pouvez Google quelle est la largeur et la hauteur des pixels pour votre téléphone. Vous pouvez consulter la valeur par défaut. Avec cette option sélectionnée, vous pouvez accéder à l'outil Apple et, en fait, il ne se met pas à jour, mais vous ne pouvez pas le voir ici. Si vous savez que vous avez un iPhone 13, voilà, vous pouvez les taper. Eh bien, vous n' avez pas à vous souvenir, vous pouvez simplement commencer à les taper ici. Qu'est-ce que c'est ? Taillez-le un peu plus large, 390 et faites-le simplement pour chacun d'eux. Réajustez-le pour qu'il soit bien sur votre téléphone. La seule chose que vous pourriez devoir faire c'est de jeter un coup d'œil. Nous allons le faire correctement plus tard. Mais une chose que vous pourriez rencontrer un problème. Voyons à quel point il est grand, 844 est beaucoup plus long. [RIRES] Wow, beaucoup plus gros. Ce téléphone. Je ne sais même pas lequel j'ai choisi. iPhone 13. Cette chose ici, c'est votre fenêtre d'affichage en bas. Vous pouvez voir ici que votre fenêtre d'affichage correspond à la hauteur de votre téléphone. S'il s'agit de 844, faites-le 844, sinon il va le rogner un peu. Il suffit de faire ce que c'est la hauteur et j' expliquerai la fenêtre d'affichage. Vous pouvez simplement passer à la fenêtre d'affichage si vous êtes totalement bousculé par elle. Il y a une vidéo qui arrive, mais c'est une chose que vous pourriez changer. Testez sur votre téléphone. Soyez enthousiaste à l'idée de votre design, d'être dans le monde, tester, de faire des ajustements, de faire une capture d'écran, et je vous verrai dans la prochaine vidéo. 23. Débuter avec les animations auto-animations dans Adobe XD: Salut les gens. Êtes-vous prêt pour votre première animation ? Nous avons fait de l'animation. Plus de transitions, c'est ce que nous avons fait. La transition de page est terminée. Maintenant, ce que nous voulons faire, c' est une animation de page entière, ce sont des objets individuels. Êtes-vous prêt ? Comment puis-je m'y rendre ? [RIRES] Nous y voilà. Vous êtes prêt maintenant ? Eh bien, regardez ça. Cela tombe, la flèche se déplace, s'estompe. C'est de l'animation dans Adobe XD, et vous et moi allons le faire maintenant. Allons-y. Faisons cette animation. Voyons donc cette petite flèche ici, donc notre page de confirmation. La façon dont cela fonctionne est bizarre, n'est pas comme une animation normale si vous venez de l'époque Adobe Flash ou Adobe Animate ou After Effects, ou tout autre [RIRE] qui contient une animation. Il s'agit d'une animation non chronologique, nous dupliquons des plans de travail et nous les connectons. Si ça semble bizarre, c'est un peu bizarre, un peu maladroit, mais ça marche. Ce que nous allons faire, c'est sur cette première page que je vais avoir cette flèche. Le mien est en deux morceaux. Je vais l'avoir de ce côté, garder sur le plan de travail pour le moment. L'une des bases de cette vidéo, puis dans la vidéo suivante, nous allons aller un peu plus extrême, ou surtout vous montrer qui pourrait vous attraper. Nous allons avoir cette flèche sur le côté et nous dupliquons ce plan de travail. Vous pouvez sélectionner le nom, cliquer dessus avec le bouton droit de la souris et le dupliquer , le copier, le coller. J'utilise simplement la commande C ou Control Z sur un PC et V. Copier, coller. Donc, ils sont tous les deux. Tiret 1, on devrait probablement appeler ça mieux, mais bon trait d'union fonctionne pour moi. Ce que nous devons faire pour savoir si cela fonctionne, il y a quelques choses qui doivent se produire. Vous avez besoin plus d'un plan de travail et l'autre est ce que vous voulez animer doit être nommé de la même façon des deux côtés. Dans notre cas, je veux que la mienne soit groupée parce que je ne veux pas animer la flèche séparément du bit de traque ; c'est à vous de décider, donc je vais les sélectionner tous les deux en maintenant « Maj ». Eh bien, frappez. Je vais cliquer sur « Groupe » pour que vous puissiez cliquer dessus avec le bouton droit de la souris ou passer à la commande G, Control G sur un PC pour les regrouper. Ici, celui-ci s'appelle Groupe 13 et celui-ci s'appelle Polygone 1, Path 1 et Path 2. Cela ne va pas marcher. Il recherche les noms, donc c'est comme ça qu'il fait sa magie lorsque vous utilisez quelque chose appelé animation automatique et qu'il ne fonctionnera pas sans elle. Encore une fois, regroupez-les ici. L'un a appelé 13 et celui-ci s'appelle 14, donc ça ne marchera pas. Appelons-les tous les deux 13. C'est pratique si vous les nommez avant de dupliquer le plan de travail, mais je veux vous montrer le chemin difficile [RIRES] afin que vous puissiez le faire facilement plus tard. Ce sont les mêmes. Quelque chose doit être différent, je fais passer celui-ci. Si vous maintenez la touche « Maj » enfoncée pendant que vous le faites glisser, elle le fera en ligne droite. Maintenant, rien ne va se passer, il faut ajouter l'animation. Cliquons sur la flèche, passons en mode Prototype. Je ne veux pas être trop difficile pour les raccourcis, mais pouvez-vous voir ici si je le survole sur mon Mac, c'est l'option 1, option 2. Il y a beaucoup de choses quand on fait des trucs. Sur un PC, c'est Alt 1 et 2, donc 1, 2, 2, 1 , 2, 2, 1, 2. Basculez entre la conception et le prototype, ou cliquez simplement sur le bouton. Prototype, je vais dire que vous allez ici. Par défaut, c'est en transition, et c'est ce que nous avons fait dans les dernières vidéos. Nous avons fait la transition de la page entière et divisé et nous avons ajouté la facilité. Dans ce cas, nous allons passer du type à l'autre. Cela cherche très bien le même nom et comble toutes les lacunes pour nous. C'était dans le groupe 13 et cherche le groupe 13, et il essaie simplement de combiner les deux. Il suffit de le prévisualiser. Cliquons sur le nom « Conformation » et cliquons sur « Jouer ». Nous allons le faire quelques fois, donc je vais laisser ça ouvert définitivement ici. Faisons un claquement. Nous y sommes, nous l'avons fait [RIRES]. Première partie de l'animation. Félicitations, vous allez y aller. Il y a de l'animation, c'est la base de toute façon. J'utiliserai mes touches fléchées pour revenir en arrière. Vous pouvez aller ici et acheter. Cliquez sur, [BRUIT] il se déplace. Il fonctionne. Ce n'est pas ce que je veux, je veux qu'il passe automatiquement. Faisons ce truc à côté. Pour le moment où nous avons ceci quand il est tapé, effectuez cette animation automatique cette autre page appelée Conformation aussi. Ce n'est pas ce que je veux. Ce que je vais faire, c'est briser ce lien. Vous vous souvenez de le faire reculer, et c'est pourquoi je le fais. Ce que nous allons faire, c'est toute la page plutôt que la flèche, car je veux cliquer dessus. Je veux que la page entière aille ici. Il devrait se souvenir de la dernière chose que vous avez faite. Il va dire toute la page Auto- Animer quand elle est touchée, et cela fonctionnera. Allons ici, alors cliquons sur celui-ci pour passer à la caisse. Quand je clique n'importe où, il se déplace. Ce n'est toujours pas tout à fait correct. Ce que je veux faire sur cette page c'est que je voulais animer automatiquement, mais je ne veux pas qu'elle touche. Je veux juste le régler après un certain temps, et dans mon cas, zéro seconde. De cette page à cette page après zéro seconde, animez automatiquement cette autre page. C'est logique, alors passez à la caisse. Cliquez sur. Hé, regardez-nous. Nous l'avons fait, et nous l'animons automatiquement. Pour l'utilisateur, si nous revenons en arrière quelques flèches, il ne voit qu'une seule flèche se déplacer. Ce n'est pas vraiment un problème, c'est juste la façon dont XD a décidé de le faire ; c' est qu'ils ont décidé que chaque image clé est un véritable plan de travail et c'est ainsi que vous l'animez. L'animation complexe à l'intérieur de XD est gênante. J'ai fait des animations où ils peuvent être 10 ou 20 de ces plans de travail, et ce n'est pas génial. Il existe d'autres outils pour réaliser des animations pour le Web. Des choses comme Adobe Animate sont bonnes, mais avez-vous entendu ce prototype ? Je dois également noter que nous faisons de l'animation ici. Nous ne devrions pas vraiment le faire au cadre métallique, mais c'est un cours et c'est amusant. Je ne ferais pas d'animation à ce stade simplement parce que ce n'est pas le moment de ravir les clients. Ce genre d'animations, de micro-interactions ou petites choses à succès devraient se produire plus tard dans les développements finaux. C'est la cerise sur le gâteau, pas le filaire, mais nous devons apprendre ces choses pour ce cours. Donc, la flèche bougeante est. Nous avons fait du mouvement, vous pouvez faire beaucoup de choses. Je vais revenir en mode Design, et je vais le réduire. Eh bien, ça n'a pas fonctionné parce qu'il essaie de garder taille de notre trait, de l'aligner et d'être fantaisiste. Par défaut, nous examinerons cette question plus tard. Responsive Resize, c'est fantaisiste. Il essaie de faire des choses que nous ne voulons pas faire en ce moment. Avec cette sélection, je vais dire éteindre cette chose, donc je vais vous dire là-bas. Il va être plus grand ici, on va y aller. Cliquons sur ce plan de travail ici. Cliquez sur « Acheter ». Hourra. Il s'agrandit et se déplace. Vous pouvez faire d'autres choses, vous pouvez décider de la rotation. Je vais décider de le faire. Il va commencer à 180 à partir de là où il se trouve, il va tourner autour. Jetons un petit coup d'œil. Que voyez-vous là ? Je l'ai raté. Vous cliquez sur un, cliquez sur un autre. Hourra. [RIRES] Vous comprenez l'idée comme ça. N'oubliez pas de faire pivoter les choses. J'ai eu mon outil de sélection. Survolez-le juste à l'extérieur d'ici, vous pouvez le faire manuellement. Je vais éteindre le mien parce que ce n'était pas souhaitable. Les autres choses. La taille, vous pouvez le faire. Vous pouvez faire de la rotation et faire de l'opacité. Ce que je ne peux pas faire, c'est que je ne peux pas le supprimer d'ici. Si je le supprime du côté espérant qu'il est parti d'ici et qu'il apparaîtra ici et qu'il s'estompera peut-être comme par magie, ça ne le fera pas. Allons acheter, et il apparaît. Il ne sait pas quoi faire, car je ne sais pas où se trouve l'original. Je vais juste m'estomper par défaut. Ce que nous devons faire, c'est annuler cela, c' est que nous ne le supprimons pas. Nous tournons simplement l'apparence ; cette opacité ici, tournez-la bas ou autant que vous le souhaitez. Il va commencer par là et passer à celui-ci. Allons y aller maintenant, à la caisse. Prêt. S'estompe et se déplace. Maintenant, nous n'avons pas joué avec l'assouplissement, alors regardons un peu. La page de confirmation va passer au prototype, et elle va faciliter l'entrée et la sortie. De quoi cela ressemble-t-il ? Ça a l'air assez joli, vous pouvez peut-être vous détendre. Adoubler, c'est comme si vous imaginez ajouter de la colle collante à l'intérieur ou à l'extérieur. La sortie est de ce côté ; la partie finie de l'animation et la facilité d'entrée sont de l'autre côté. Si je me débrouille si je clique dessus et que je vais ici. Regardez-le. Il va commencer vite, puis collé. Prêt ? Il peut être difficile de voir votre assouplissement car la durée est assez courte, alors passons à une seconde. Nous l'avons vu, ils n'ont pas entendu. Vous pouvez voir qu'il commence rapidement et qu'il va plus lentement à la fin. Je déteste mon animation, mais [RIRES] la taille des choses me tue. Allons dans Design et annulons cette taille. C'est difficile à voir, je devine juste la taille. Oui, ça a l'air moindre. Ayez un jeu avec l' assouplissement par vous-même. Jetons un coup d'œil au prototype, pour que nous puissions vous soulager. Joue avec eux. Vous savez ce que fait un rebond. Jetez un coup d'œil à l'enclenchement et à la fin, et la plupart du temps, si vous n' êtes pas sûr d'entrer et de sortir facilement. Il met de la colle aux deux extrémités, donc il est lent aux deux extrémités et il va plus vite au milieu et souvent ça a l'air vraiment beau. Il s'agit souvent d'un mouvement naturel, puis numérique [inaudible]. Les règles de l'animation, vous avez besoin d'au moins deux plans de travail. Sur ces plans de travail, vous avez besoin de quelque chose qui porte le même nom. Faisons juste un petit exemple. Nous avons deux plans de travail. Ce truc s'appelle ici. Ici, celui-ci s'appelle Icon-Twitter. Super, donc je n' ai pas eu à le changer. Si vous avez nommé manuellement des choses, il s'en souvient et dit : « Il veut probablement conserver ce nom. » Alors que s'il s'agissait d'un groupe aléatoire ou d'une ligne aléatoire, il suffit de le dupliquer et vous vous retrouvez avec les groupes 10, 11, 12, ces choses. Même nom, c'est la flèche, deux plans de travail. Quelque chose entre les deux. Dans notre cas, faisons le rebond ici, donc ça va juste baisser. Ce n'est que la différence. Êtes-vous prêt pour cela ? Nous allons tous les deux vous ravir et soulever un autre problème que je veux involontairement couvrir. L'équilibre, donc vous êtes prêt ? Cool. Regardez-moi ça. Vous voyez, vous vous dites : « Oh, c'est bien pour ça , mais la flèche est bizarre. » Puis-je le faire séparément ? Non. C'est assez rudimentaire comme dans l'animation ou tout le tableau d'art doit faire son truc. Vous ne pouvez pas appliquer des bits distincts d'accélération et d'animation à des parties individuelles principalement. Je vais vous montrer dans la prochaine vidéo. Nous allons faire une plongée un peu plus profonde, mais deux plans de travail doivent être nommés de la même manière, quelque chose de différent. Vous pouvez utiliser la couleur, rotation, l'opacité et les nommer de la même manière. Est-ce que je les vois ? De toute façon. C'est tout pour cette vidéo, passons à la suivante. 24. En savoir plus sur l'animation dans Adobe XD: Bonjour, tout le monde. Nous allons faire passer notre animation au niveau supérieur. Ne soyez pas trop excité. Mais allons « Acheter » des diapositives hors écran, puis vérifier s'affiche. C'est pour vous montrer la prochaine étape. Nous avons fait quelque chose de très simple dans la dernière vidéo, et cela va nous montrer comment faire un timing différent, comment le démarrer à partir du plan de travail et quelques problèmes que vous allez rencontrer. C'est peut-être un peu avancé pour cette étape du cours, mais nous devons couvrir ces choses assez tôt pour pouvoir les répéter quelques fois, et je vais mettre en place projets de classe et vous allez probablement rencontrer quelques problèmes que je vais clarifier du mieux que je peux dans cette vidéo. Si vous êtes prêt, je suis prêt. Faisons ça. Pour faire cette animation et regardons ça. Donc, si vous voulez que les choses se produisent comme en ce moment, tout se passe en même temps, qui est comme les choses qui se produisent et elles se produisent toutes en même temps ; même assouplissement, même moment. Ce que je veux faire, c'est vraiment que je veux que les choses se produisent. Je veux que cette petite coche n'arrive qu'une fois la flèche disparue. Ce que je vais faire, c'est ranger les choses et vous montrer comment ranger les choses. Je ne veux pas que ça rebondisse pour Twitter car c'est juste un peu distrayant pour ce tutoriel. Ce que je vais faire, c'est enlever ça, je viens de le supprimer, donc vous remarquerez qu'il est parti maintenant. Revenons en arrière. Il est là et il ne sait pas quoi en faire, donc je l'ai supprimé. Il s'estompe juste. Ce que je vais faire, c' est de l'attraper, copier, de le coller ici, vérifier qu'il porte le même nom, parfois il est ajouté un petit numéro par la suite. Mais non, ce n'est pas la même chose. Nous allons le prévisualiser à nouveau. Oui, vas-y. Juste les flèches fonctionnent, mais ce que je veux faire c'est que je veux que la case à cocher apparaisse. Ce que je vais faire est fini sur le côté, je vais revenir au design. Je vais faire, alors que ma petite flèche ? La flèche va être à l'opposé. Je veux qu'il commence puis s' estompe. Essayons ça. Soyez toujours en test. J'ai l'impression d'être super douée dans ce genre de choses. Si j'essaie de faire cinq étapes en pensant que ça va être génial, je le prévisualiserai et je réaliserai que quelque chose a mal tourné. Il suffit donc de tester après chaque petit changement que vous avez apporté juste pour vous assurer que vous n'avez pas tout corrigé. Parce que ce n'est pas amusant de frapper annuler 10 fois pour recommencer pour quelque chose de simple que vous auriez pu corriger au début. Nous avons cette animation. Ensuite, nous voulons que la case à cocher apparaisse. Ce que nous finissons par faire, c'est copier et coller et en avoir un autre. Il va ici, il s'estompe. Il reste effacé et ce que je veux, c'est que la tique apparaisse. Ce que je dois faire, c'est de cocher sur celui-ci et sur celui-ci. Mettons-le dans notre importation de fichiers, Command Shift I. Je suppose que c'est Command Shift I, et vos fichiers d'exercice, où sont-ils ? Il y en a un qui s'appelle l'icône. Vous pouvez obtenir le vôtre. Une tique géniale. Maintenez la touche Maj enfoncée, réduisez-la pour que ça commence ici. Je vais le copier, le coller ici, donc il est exactement dans la même position, et celui-ci, je veux que l'opacité soit réduite. Regardez-moi ça. Allons y aller, donc nous en avons 1, 2, 3. Case à cocher maintenant et rien ne se passe. Savez-vous pourquoi ? [RIRES] Je vais prétendre que je l'ai fait exprès pour vous donner une leçon. Mais non, j'ai oublié. Il y a cette page ici. Si nous passons en mode prototype, il est dit y aller après un certain temps, exactement zéro seconde y va. Celui-ci ne savait pas la même chose, il arrive juste ici et s'en va, je ne sais pas quoi faire. [RIRES] Nous pouvons en fait aller ici après qu'il se soit souvenu de la dernière chose que j'ai faite zéro seconde et je ne vais pas le faire rebondir. Je vais commencer. Lorsque les choses s'estompent, à part rebondir, ce n' est pas vraiment important si vous vous détendez, que vous vous sentiez douceur ou qu'il n'y en ait pas. C'est si difficile de dire un assouplissement avec des choses qui s'estompent. Ne transpirez pas, alors commençons par cette page. Allons jouer. Allons acheter ce truc, glisser à travers, puis ça s' estompe. Regardez-moi ça. Si vous êtes comme tout ce qui s'est passé, je voulais que la flèche disparaisse pendant un petit moment avant l'apparition de la tique. Vous pouvez faire de petites choses comme ça. Donc celui-ci ici, nous disons, quand il arrive sur cette page, commencez à avancer tout de suite, vous pouvez dire qu'en fait, attendez deux secondes, mec, détendez-vous. Vous attendez là. Allons-y. À présent, cette page joue les deux premiers, attend un peu, joue la seconde. Deux secondes, c'est trop long. [RIRES] Vous avez le sentiment, je ne sais pas. Nous l'avons porté à un autre niveau. Nous en avons ajouté trois. Vous pouvez en avoir 15 si vous voulez essayer en sorte que XD fasse votre animation, pliez à votre volonté. Cela devient cependant beaucoup compliqué, mais faites-le pas à pas. C'est très bien. La dernière chose que je veux vous montrer , c'est assez compliqué. J'aimerais que ce soit plus tard dans le cours, mais je sais que je vais créer un projet de classe et que vous allez rencontrer ce problème. Nous allons donc l'identifier et y entrer maintenant. Encore une fois, s'il semble que c'est un peu trop dur, c'est un peu trop difficile plus tôt dans ce cours. Nous le referons plus tard et cela deviendra plus facile et plus facile. Je prétends que je suis toi, je suis tes mains lui-même et je vais aller Design, je vais aller sur mon plan de travail. Puis j'ai dit que je devais faire de l'animation, je vais choisir ce téléphone. Je vais me déplacer ici sans raison juste pour le garder séparé. Je sais que je vais prendre un cercle, le dessiner. Je vais choisir une couleur de remplissage et ce sera mon animation. Je vais choisir, je ne sais pas. Quelle est cette couleur ? C'est la couleur. Les règles étaient que vous avez besoin de deux d'entre eux. Je vais copier et coller deux d'entre eux et ce que je vais faire, c'est je dois m'assurer que c'est le même nom, donc celui-ci s'appelle Elipse 6. Nous appellerons cela Animation 1 et je l'appellerai Animation 2. Vous n'avez pas besoin de les nommer, juste pour le préciser dans ce cours. Sur Animation 1, il y a quelque chose appelé Elipse 6. C'est ce qu'on appelle Elipse 6, c'est génial. Ça va marcher. Ce que je vais faire, c'est que je veux vous mettre hors écran et c'est là que le gros problème se produit. C'est là que nous avons fait une erreur parce que vous aimez, je vais les démarrer hors écran et ensuite je vais les déplacer. Commence ici, souvenez-vous que Dan a dit, je veux passer au prototype. Je veux connecter ces deux pages. Je veux que le déclencheur soit juste après un certain temps, peut-être après zéro seconde pour commander l'animation ici. Parce que le nom est le même, ça va marcher. Quand je clique sur « Play », il s' estompe au lieu d'emménager. Le problème, c'est que ce n'est pas réellement sur Animation 1. Il est allumé, vous vous souvenez de la plaque de pâte ? Rappelez-vous que j'ai toutes mes pages et puis il y a un Pasteboard 1 aléatoire. C'est là le problème. Comment réparez-vous cela ? Tout est question de timing. Si je défais ça, je suis donc de retour ici. Je n'ai pas ajouté mon déclencheur et je ne l'ai pas déplacé hors écran. Avant de faire quoi que ce soit, c'est toute cette animation. Si je dis maintenant avant de le déplacer hors de l'écran, si j'ajoute cette animation qui indique l'heure de déclenchement, j'ai fait tout cela, et si je l'éteins maintenant, il : « Hé, il va essayer de déplacer ça hors de l'écran pasteboard, mais ça va casser mon animation automatique. Donc je ne vais pas le laisser faire, c'est hors de l'écran, mais ce n'est plus sur la planche à pâte. C'est toujours allumé. Mon nom est devenu trop [inaudible], mais vous comprenez l'idée. Souvenez-vous du tiret 1, du tiret 2. C'est toujours sur le trait d'union 1, même si je l'ai poussé ici. Assurez-vous donc d'ajouter l' animation automatique avant de commencer à passer l'autre et il essaiera de le garder connecté pour vous. Le seul autre problème, c'est comment c'est qu' il a disparu dans la plaque de cuisson ici. Vous pouvez le sélectionner. C'est un peu délicat. Ici, comme je l'ai dit, il y a des bizarrerie amusantes pour le XD et l'animation, mais je l'ai sélectionné. Jouons-le maintenant. Il se déplace. Il faut un peu d'assouplissement. Allons faciliter le claquement. Nous allons regarder celui-là. Prêt ? Jouer. Il a cette facilité. Il avance un peu et recule un peu, recule un peu en arrière, ça a l'air assez joli. C'est ça. Si vous faites de l' animation, accédez aux pages et ajoutez simplement l'animation automatique dès le début, ce qui signifie que si vous finissez par faire glisser quelque chose du bord vers le panneau de montage, il restera connecté. Pouvez-vous le faire glisser vers la bonne page ensuite ? Je n'arrive pas à trouver un moyen. Vous pouvez trouver un moyen, mais vous devez le casser et recommencer, ajouter l'ordre d'animer tôt. Maintenant, cette version ici va totalement fonctionner principalement parce que j'ai d'abord ajouté l'animation automatique avant de le faire glisser . Laissez-moi juste vous montrer. Je vais ajouter un peu d'espacement ici pour pouvoir le déplacer hors écran. Rappelez-vous qu'il commence ici et regardez, il fait toujours partie de cette page de confirmation car animation automatique est déjà appliquée avant de le faire glisser. Est-ce utile ? J'ai l'impression que c'est assez compliqué jusqu'ici dans le cours, mais nous y arriverons. Où êtes-vous encore ? Hé, ça commence hors écran, rebondit un peu, s' estompe et on attendra que notre petite tique apparaisse. Cela prend trop de temps. Il s'agit d'une animation de niveau supérieur. Nous avons un plan de travail supplémentaire pour jouer avec le timing, car nous savons que nous devons faire le même assouplissement et le même type d' animation entre un plan de travail entier, pas un plan de travail individuel, mais nous pouvons Fais-le en ayant plus d'un plan de travail, et vous risquez problèmes si vous essayez de retirer quelque chose sur le côté et de le faire glisser si vous n'ajoutez pas l'animation automatique en premier. Il finit sur la plaque de pâte, ce qui est mauvais. Cela va devenir de plus en plus utile lorsque nous faisons des choses comme la navigation. Plus tard dans le cours, nous allons cliquer dessus, et toute la navigation va glisser, pas seulement une flèche boiteuse, et nous devons faire cette astuce, sinon elle se retrouvera sur le plateau. C'est ça. Je vous verrai dans la vidéo suivante. 25. Projet de cours 05 - Ma première animation: Ok, heure du projet de classe. Vous allez créer votre première animation. Si vous débutez dans l' animation et que vous trouvez ce peu délicat, recréez simplement ce que nous avons fait dans la vidéo et téléchargez-le. Si vous vous sentez courageux et confiant et que vous allez faire quelque chose, je veux que vous fassiez quelque chose de légèrement différent. Faire glisser les flèches et il n'y a pas de plaisir. Pensez à ce que vous pourriez faire. Vous pourriez le faire venir d'une autre direction. Il peut s'agir d'une forme différente, peut-être d'une autre icône. Réfléchissez un peu à la façon dont vous transmettriez l'idée de commande reçue et j'aimerais la voir. Selon votre ordinateur, votre Mac et votre PC, vous pouvez enregistrer votre animation et la télécharger. Je vais vous montrer comment le faire. Dans XD, vous pouvez prévisualiser votre animation, donc je vais vous donner. Ce que vous pouvez faire. Pouvez-vous voir ce petit bouton d' enregistrement sur un PC, c'est sur ce côté gauche. Sur un Mac est relativement simple, vous cliquez dessus. Il va me demander de surpasser mes préférences système. Laissez-le faire l'enregistrement, c'est très bien. Vous leur avez raison. Ouvrez les paramètres sous mon seul XD a besoin d'autorisation, quittez et rouvrez plus tard. Cela semble fonctionner lorsque vous le faites plus tard. Maintenant, si je clique sur l'enregistrement, pouvez-vous régler un petit minuteur ? Je vais y aller et c'est mon animation. Je vais arrêter ça. Il va me demander où l'enregistrer. Laissez-moi mettre le mien sur mon bureau pour le moment. Allons voir ce que nous avons obtenu. Donc, sur le bureau, vous avez un peu MP4 qui me montre ma petite animation et c'est celle que je veux que vous téléchargeiez les deux sur votre [inaudible]. Il s'agit maintenant d'un cercle car il est destiné à représenter un doigt l'aide de votre pavé tactile ou au moins en touchant votre écran. Donc, sur un Mac, c'est relativement facile. Sur un PC, ce n'est pas aussi facile. Je pense que les boutons d'enregistrement à gauche peuvent vous demander d'utiliser le logiciel de quelqu'un. Je pense qu'il utilise le logiciel Microsoft Xbox Records et voit jusqu'où vous partez. Si vous êtes comme ça, j'ai besoin d'installer des trucs trop difficiles. Si tout le monde est dans le panier trop dur, je vous adore à essayer car j' aimerais voir votre animation. Mais ce que vous pouvez faire, c'est simplement capturer tous ces trois de votre animation ou deux si vous en avez déjà fait deux. Si vous avez le temps et que vous voulez vous entraîner, faites 10 types de choses différentes. Mais si vous voulez simplement les bases, faites simplement cette animation simple et prenez une capture d'écran, téléchargez-la. J'aimerais bien voir celui-là. Jusqu'à présent, vous l'avez téléchargé dans les commentaires et toutes les fonctions de devoirs sur le site Web. Ce que vous pouvez faire maintenant, c'est que j'aimerais commencer à voir des choses sur les réseaux sociaux. Dans vos fichiers d'exercices, il existe une page de groupe appelée Bring Your Own Laptop Online. C'est un groupe Facebook. Il existe un groupe LinkedIn similaire. Il s'appelle le groupe LinkedIn Bring Your Own Laptop. Tout ce sont mes anses pour Instagram et Twitter, je les identifie et j'aime vraiment le voir. Vous pouvez également y jeter un coup d'œil et voir ce que d'autres personnes ont fait. Utilisez le hashtag XD, il vous aide à rechercher des choses et à voir le travail des autres. Mais oui, faites-le, téléchargez-le à l'endroit habituel, mais cherchez aussi à le télécharger sur les réseaux sociaux, et lorsque vous téléchargez sur les réseaux sociaux, vous l'installez comme, hé, c'est ma première animation . J'aimerais avoir des commentaires et nous sommes vraiment sympathiques. Si vous êtes un peu inquiet à ce sujet, nous ne savons pas que vous l'avez mis en place. Nous veillons à modérer notre groupe. Je sais que nous définissons de bonnes valeurs là-dedans : c' est pour les nouvelles personnes, si vous êtes une nouvelle personne, téléchargez-la, recevez des commentaires. Dites-nous quels problèmes vous avez eu, quelles sont les choses que vous aimeriez faire. Comment cette personne a-t-elle fait ça ? Pouvez-vous me montrer ou que pouvez-vous me dire ? C'est ce genre de groupe Facebook. C'est moins du spectacle glamour Instagram et plus de, regardez ce que j'ai fait. Je suis excité, même si peut-être dans le grand monde de l'animation, ce n'est peut-être pas le meilleur du monde, mais c'est bon. Nous sommes là pour apprendre, demander des critiques si vous le voulez, sinon le poster et dire que c' est ce que j'ai inventé. Dites-nous comment vous trouvez le cours. Une chose est que lorsque vous la téléchargez à différents endroits, certains médias sociaux vous permettront de jeter la vidéo directement dans eux et de la faire fonctionner. Mais certains commentaires et certains des téléchargements d' affectation, vous devrez d'abord les télécharger sur quelque chose comme YouTube, Behance comme YouTube, Behance, Vimeo ou autre chose, puis coller le lien. Il sera visionné via le lien plutôt que par la vidéo elle-même. Si cela vous semble trop dur, faites des captures d'écran. C'est très bien. Mais j'aimerais le voir se souvenir et le publier sur un compte YouTube gratuit ou Vimeo ou Behance ou tout ce que vous pouvez faire pour l'héberger quelque part, votre vidéo, puis poster simplement le lien. C'est donc ça. Faites votre première animation, simple ou avancée, téléchargez-la, j'aimerais la voir. C'est ça. Allez à vos devoirs et je vous verrai dans la vidéo suivante. 26. Partage des maquettes pour commentaires dans Adobe XD: Bonjour à tous. Dans cette vidéo, nous allons partager notre filaire avec notre client dans ce cas. Nous allons leur envoyer ça. Ils vont pouvoir exprimer son nom, Neil et ils vont ajouter des commentaires et des épingles différentes. Celui-ci ici, ils peuvent ajouter des épingles pour se moquer de choses spécifiques pour me dire, oui, pour me donner des commentaires. En tant que concepteur, je vais vous montrer comment créer le lien, envoyer à eux et comment vous travaillez avec ces commentaires entre vous et votre client. Allons-y pour y aller. Passons à ce troisième onglet ici. conception, critiques de prototypes, regardons maintenant partager. Share nous permet de ce côté-ci d' envoyer un lien à, appelons-le Neil. Neil est un personnage fictif. C'est une créature simple. Je l'utilise comme exemple parce que je veux garder ça simple pour ceux à qui je l'envoie. Parce que je ne connais pas leur niveau d' expertise sur ordinateur, ce genre de choses, donc c'est un Neil. La première chose que nous devons faire, c'est que nous devons mettre bizarre cette animation commence. De retour ici dans le prototype, cliquez sur l'endroit où vous voulez que cette chose aille. Si vous en avez deux comme je viens de le faire, vous en éteignez un et vous en avez juste un. Vous pouvez avoir plusieurs flux. C'est trop pour ce que nous sommes actuellement, mais nous n'allons avoir qu'un seul flux, au moins sur l'une de ces pages. C'est ici que ça va commencer. Je peux partager, je vais choisir le flux 1, et le plus courant est la revue de conception. Cela va permettre de commenter, ce qui est important. C'est à vous de décider à quel point vous devez être sûr, qu'il soit protégé par mot de passe, vous lui donnez simplement un mot de passe ou des personnes que vous avez envoyées par e-mail, toujours pas protégées par mot de passe mais pas Toute personne disposant du lien peut y accéder. Je veux que tous ceux qui ont un lien y accèdent. Tout ce que vous faites est de cliquer sur « Créer un lien  », il y réfléchit une seconde et vous devriez obtenir une petite URL. C'est ce que vous voulez partager. Vous pouvez l'envoyer à Behance, vous pouvez l'intégrer sur un site Web si vous le souhaitez. Nous allons juste envoyer un lien. Nous allons copier le lien, et je vais l'ouvrir et prétendre être Neil. Attendez, je vais mettre mon chapeau Neil. Je suis Neil et j' ai le lien dans un courriel ou un DM ou quelque chose comme ça, tu l'as envoyé à lui. Je l'ouvre pour lui et c'est ce que Neil voit. bien, c'est que Neil n'a pas besoin de se connecter, ce qui est probablement l'un des plus grands avantages ici. Cela tombe un peu lorsque vous devez vous inscrire à un Adobe ID juste pour passer en revue votre travail. Celui-là, ils peuvent tout faire en tant qu'invité. Ils peuvent commencer à interagir avec elle. Je suis Neal, je passe par là et je vais dire que ça semble bien. [RIRES] Revenons en arrière. Je n'ai aucun de mes liens triés. Mauvais, mauvais, mauvais. Je n'ai pas mes liens qui fonctionnent, ce qui est mauvais, je devrais les réparer pour Neil mais il y a une navigation de base. Vous devrez peut-être informer un peu votre client sur la façon dont cela fonctionne. Page d'accueil, parcourez le vélo. Ils peuvent utiliser les touches fléchées et là où ça devient agréable disons qu'ils décident que c'est, allons en apprendre plus, ce rebond, et j'aime l'homme, ils veulent ajouter un commentaire. Ils peuvent ajouter deux types de commentaires, un simple générique, cliquer sur « Soumettre », et ils peuvent décider s'ils vont se connecter avec votre Adobe ID pour être un peu plus officiel. Il est gratuit de s'inscrire à un Adobe ID. Vous n'avez pas besoin d'avoir une licence Creative Cloud, une licence payante, vous pouvez utiliser simplement un identifiant gratuit ou ils peuvent le faire. Nous allons le faire pour Neil. Ce qui est génial, c'est Neil peut interagir, ajouter des commentaires sans tomber dans le trou du lapin de s'inscrire, des mots de passe le trou du lapin de s'inscrire et ça. C'est vraiment cool. Vous pouvez faire un générique pour cette page en particulier, mais vous pouvez également en faire une plus spécifique. Voir cette page, placer l'épingle, c'est là que l'éducation doit être avec le client. Expliquez que vous pouvez effectuer des épingles et des commentaires génériques. Selon ici, vous pouvez décider de celui-ci ici. Ils vont dire quelque chose comme ça n'est pas notre logo, n'est-ce pas ? Soumettre. C'est un peu plus précis avec une épingle. C'est en fait pointer quelque chose, alors que celui-ci est juste un peu plus partout comme des commentaires génériques. Comment y accéder sur votre site en tant que designer ? Plus Neil, au revoir Neil. Je vais être Dan le designer. Pas pour le moment. Nous continuons d'en parler, mais ils vont potentiellement apporter commentaires à l'intérieur de l'application ce que vous aimeriez dire, pourquoi est-ce là ? Ce n'est pas le cas pour le moment. Ce que vous faites en tant que concepteur, c'est vous recevez un e-mail expliquant que quelqu'un a ajouté un commentaire à votre lien. Vous recevrez un e-mail pour l' avertir. Ou vous pouvez simplement accéder à la version Web. Même si ce lien est destiné à Neil, vous pouvez simplement l'utiliser vous-même . Je vais copier le lien. Vous y allez. Je suis le même lien que Neil, mais comme je suis connecté avec mon Adobe ID, je peux faire quelques choses supplémentaires. Je peux voir les commentaires des invités de Neil, ce qui est cool. Jetons un coup d'œil. C'est dans notre logo. Si je clique dessus, vous voyez que ça m'a amené à la page et il y a une petite épingle qui s'aligne. Plus d'une épingle, vous aurez des numéros différents. Cool. Je peux y retourner et dire non. Soumettez-le, et cela ajoutera à cette histoire ici. Maintenant, Neil peut revenir en tant qu'invité et continuer à ajouter commentaires et à vérifier également. Eh bien, je pourrais décider que j'ai tout fait et je vais vraiment y aller et résoudre ce problème, donc c'est parti de cette liste. parti, c'est fini, je l'ai coché sur ma liste. C'est ainsi que vous commentez. Vous pouvez décider de le faire en tant qu'invité ou demander à la personne de se connecter, un peu plus de détails supplémentaires pour elle car elle sera avertie lorsqu' une mise à jour a eu lieu ou qu' elle postule pour vous. Disons que je décide que quoi que ce soit ici, je vais arranger ça. En tant que designer Dan, je vais entrer ici et c'est cette page ici. Je vais revenir au prototype. Cette page contient ce bouton ici, n'est-ce pas ? Zoomons avant. C'est ce bouton ici. Il a un rebond à gauche. Nous allons simplement faire une pause, et nous allons le sauver. Comment le mettre à jour ? Il ne se met pas à jour automatiquement. Vous devez le dire pour le mettre à jour. Vous allez partager et vous allez à celui-ci. Pouvez-vous voir le lien de mise à jour ? Il ne fait que regarder votre document et mettre à jour n'importe quoi. Le lien est toujours le même. Vous n'avez pas à en envoyer un nouveau , et vous pouvez dire, « Hé, Neil, vérifiez encore ce lien », ou envoyer à nouveau et lui dire : « Hé, vérifiez ça. Que pensez-vous de cela ? » Je suis de retour en tant que Neil, et je suis reparti sur le lien. Je peux toujours voir mon commentaire car le concepteur standard n'y a pas répondu, mais regardons un peu. Page d'accueil, cliquons dessus et plus à l'aise. Que pensons-nous de cela ? Je dis : « Bon travail, Dan. » [RIRES] Il s'agit de commentaires ou de base des commentaires dans Adobe XD. La seule chose à garder un œil ouvert, c'est qu'ils peuvent à un moment donné l' intégrer dans l'application. Je veux vraiment qu'ils le fassent, ils ne le font pas pour le moment. Je suis dans Adobe XD plutôt que dans un navigateur, je veux pouvoir les voir ici. Allez, les gars. Mais jusqu'à cela, utilisez simplement ce lien Web pour voir les commentaires. Vous serez averti par e-mail quand ils y seront publiés. C'est partager vos filaires avec Neil. Au revoir, vous. Au revoir Neil, et adieu moi. Je vous verrai dans la vidéo suivante. 27. Planches d'inspiration et ressources pour la conception d'interfaces utilisateur haute fidél: Bonjour à tous. Cette vidéo nous allons parler de nous inspirer de votre travail de haute fidélité. Jusqu'à présent, nous avons cherché une faible fidélité. Nous en avons parlé plus tôt. N'oubliez pas que les filaires à faible fidélité et les mots fantaisie haute fidélité pour toutes les images, couleurs et polices, ressemblant à une application finie. Avant de commencer à concevoir quoi que ce soit, j' aime avoir un peu de mood board pour quelques raisons. Un pour avoir mes propres idées ce que ces choses vont ressembler, le sentiment pour cela, mais aussi pour les envoyer au client. Avant de commencer à concevoir, j'aime partager un mood board pour assurer que je suis sur la bonne voie. Nous sommes tous les deux alignés et nous sommes tous les deux dans la même direction. Partager un mood board dès le début de la pièce avec votre client ou votre chef de produit, qui que ce soit, afin qu'ils puissent dire, oui, c'est ce que je ressens. Alors que vous pourriez descendre tout ce style de thé indie rock, des marques de patineurs. Parce que c'est ce que vous ressentez Zoe Owl, persona aimerait, mais le client est complètement en désaccord avec cela et ce n'est peut-être pas que vous avez raison et qu'ils ont tort, c'est plus que vous doivent au moins se comprendre les uns les autres ou au moins comprendre la personne ensemble. Faire une planche d'humeur rapidement et tôt pour le client vous empêchera de dépenser pour toujours 10 versions et de les envoyer au client et j'espère que l'une d'elles est bonne. . l'inspiration, tout ce mood board, où est-ce que vous l'obtenez ? Il y a beaucoup d'endroits. Chaque fois que je suggère une vidéo sur l' une de ces vidéos, ils vont la fermer ou ajouter un paywall ou quelque chose comme ça. Je vais m'en tenir aux deux grands principaux. Si vous en avez un qui vous plaît, pour lequel vous êtes inspiré, en particulier autour de l'interface utilisateur ou de l'interface utilisateur, ajoutez un commentaire ci-dessous avec une URL pour que d'autres personnes puissent y jeter un coup d'œil. Si c'est vous, allez jeter un coup d'œil et voir ce qu'il y a en bas. Voici les deux principaux groupes alimentaires : Dribbble et Behance et je vais décerner des prix parce qu'il est là depuis longtemps. Dribbble est surtout devenu un style d'interface utilisateur où les gens partagent leur travail. Vous avez juste un coup d'œil, trouvez des choses que vous aimez et aimez, oh, c'est cool. J'aime bien cet avatar, j'aime la façon dont il se plie ici. Nous ne sommes pas là pour voler des idées, nous sommes ici pour nous inspirer et même si nous aimons ce truc branché, nous sommes comme si cette personne ne va pas être le logo là-dedans. Le logo signifie une couleur différente et vous finissez par l'utiliser comme poste de départ. Mais ce que vous pourriez faire, c'est d'y aller et de dire capture d'écran. N'oubliez pas que sur mon Mac, c'est Command, Shift 4 et buvez le plus de détails possible. Pour moi personnellement, parce que vous voulez pouvoir revenir à cette URL. Dans ce cas, je veux que mon mood board soit très joli, alors je vais juste capturer ce morceau ici. Vous venez de rassembler des captures d'écran pour votre mood board. Si vous êtes sur un PC, vous devrez vérifier comment effectuer une capture d'écran. Mais oui, c'est comme ça que vous commencez. Maintenant, ils sont tous très différents mais similaires. Si vous êtes dans ces deux cas, ils ont une saveur différente et je les utilise donc tous les deux. Ce qui devient plus excitant , c'est quand on devient un peu plus précis. Disons ici que je cherche du thé. Peut-être du thé même dans l'interface utilisateur, alors faites des recherches spécifiquement autour de la chose que vous faites et cela réduit les choses que vous aimez. Oh oui, j'adore cette idée les grains de café se répandent sur le type, mais peut-être que je vais le faire avec des feuilles de thé. C'est une autre façon d'obtenir des planches d'ambiance un peu plus spécifiques, les capturer, dans la vidéo suivante, nous les jetterons sur une page à la recherche d'un mood board. Exactement la même chose pour Behance, effectuez des recherches spécifiques. Nous l'avons fait dans Dribbble lorsque nous avons examiné la catégorie en termes de nourriture et de thé. Celui-ci ici que vous effectuez peut-être votre flux de tâches est beaucoup autour de la caisse, donc ce que nous pourrions dire l'interface utilisateur du panier, juste pour voir un peu plus spécifique. Chariots, probablement le mauvais mot dans ce cas, il y a un peu de panier en cours, mais probablement, regardons l'interface utilisateur ou la page de paiement. Vous devrez peut-être trouver la bonne langue pour obtenir la bonne langue, puis commencer à passer et aller, cool, c'est là. Vous remarquerez peut-être des choses que vous avez oubliées d'ajouter, vous êtes comme, oh, oui, nous avons besoin de cette récupération ou du sous-total. Vous pouvez être très précis dans ces domaines et c'est pourquoi j'inclut des prix. prix sont avec trois ws et Les prix sont avec trois ws et ce qui est cool à ce sujet, c'est que c'est vraiment drôle de naviguer, mais une fois que vous y êtes, c'est vraiment pratique. Dans le menu ici, je vais voir tous les nominés. C'est une récompense. Les nominés, jetons un coup d'œil, et vous pouvez passer par catégories. Vous pouvez dire que je veux voir des choses qui ont, vous pouvez le voir, je ne peux pas le voir, la nourriture et les boissons. Ça va boucler, et il est cloué. l'ai amené ici et ce qui est cool à ce sujet, c'est qu'il très organisé, tellement beau. Vous pouvez également aller plus loin et regarder les balises et aller en fait, je veux trouver des choses qui ont une page de contact parce que c'est ce sur quoi je travaille. Vous pourriez avoir des idées sur des choses spécifiques. Encore une fois, lorsque je clique sur un exemplaire juste pour avoir des idées, faites couler nos jus créatifs. Beaucoup de captures d'écran, videz-les dans un dossier, puis nous vous verrons dans la vidéo suivante. Oh, non, nous ne le ferons pas. Une chose que j'ai oublié de mentionner, c'est que nous cherchons des trucs sur un site Web et il est très important regarder aussi sur votre téléphone, car ce que je fais souvent sur mon téléphone et prends des captures d'écran n'est pas tellement à la recherche d'inspiration, mais plutôt de concurrents. J'en ai déjà fait. Laissez-moi vous montrer. J'ai créé ce dossier appelé Mood Board, et j'allais juste sur mon téléphone et j'ai tapé acheter du thé vert. J'ai pris des captures d'écran d'endroits où vous pouviez acheter du thé vert. Maintenant, le problème et le mal. [RIRES] Certains d'entre eux sont bons, d'autres mauvais. Juste pour avoir un regard et s'en inspirer. Ce que je trouve cependant, c'est que souvent ce que je vais devoir faire, c'est si j'achète du thé vert en ligne, ça va me donner un résultat très localisé et je ne vis pas dans la partie la plus branchée et la plus branchée du monde entier. Je vis à Limerick, en Irlande, qui n'est ni branché ni branché, mais je ne sais pas. Certains des motifs peuvent l'être, je ne sais pas. Appelons-les prévisibles, ennuyeuses, prévisibles, mais c'est un meilleur mot. Souvent, ce que je vais faire, c'est que, avec ces autres captures d'écran, les vois ici, je ne sais pas. Avez-vous l'impression qu'ils sont un peu plus excitants ? J'ai tapé acheter du thé vert de New York en ligne. J'ai choisi New York. Je ne sais pas. Pour moi, [RIRES] Paris, New York, je choisis juste des endroits qui semblent fantaisistes, et je vais probablement avoir la bonne ambiance que je veux. Zoe, la personne que je conçois à partir de mon personnage, elle est à la recherche de ce style. Cherchez Paris et Los Angeles et si vous vivez dans un endroit qui n'est peut-être pas un peu la hauteur du design international, mettez-le en d'autres termes, prenez des captures d'écran, même s'ils ne sont pas bons, juste les choses pour éviter les couleurs que vous pourriez aimer car nous devrons peut-être faire ce logo dans le cadre de notre design. Peut-être qu'on adore ces bobines Instagram bloquées, truc Pinterest, donc tu as l'idée. regardant les concurrents aussi parce qu'ils doivent faire face à beaucoup des mêmes problèmes que vous, les mêmes choses. Parcourez le panier, prenez des captures d'écran, regardez le menu. Menu à gauche, je n'en suis pas sûr. C'est ce qui va être le cas. Est-ce que c'est ça ? Non. Il y a une dernière chose. La dernière fois que je promets, c'est Instagram. Même si vous n'êtes pas une personne Instagram, vous êtes comme, hé, je ne fais pas Instagram. Vous pourriez l'essayer. Faites quelques recherches pour trouver des balises pour UX, conception d' interface utilisateur, et c'est incroyable. Il commencera à vous livrer des trucs vraiment cool comme ça. Les bonnes choses bouillonnent au service, je me suis retrouvé à prendre beaucoup de captures d'écran pour travaux que je ne le faisais peut-être même pas. Je regarde juste Instagram, l'homme est une police cool, il faut savoir ce que c'est. Capture d'écran, envoyez-vous à moi-même. Il suffit de passer un peu de temps dans un endroit comme celui-ci même si vous y êtes déjà, c'est évidemment parfait. Mais c'est un endroit tout à fait visuel. Bon endroit, trouvez de jolis designs, suivez quelques hashtags comme la conception de l'interface utilisateur, la conception UX, inspiration quotidienne de l'UX, des choses comme ça, et vous rencontrerez potentiellement des trucs qui vous inspireront. Très bien, c'est tout pour la façon dont je m' inspire avant de commencer à faire mes maquettes haute fidélité, je la partagerai avec le client pour m'assurer que nous sommes sur la bonne voie ensemble. Très bien, c' est tout. Jetons un coup d'œil et construisons une planche d'ambiance. 28. Comment créer un moodboard dans Adobe XD: Bonjour à tous. Nous allons créer quelques planches d'ambiance dans Adobe XD. Ce premier ici, vraiment simple, juste des images jetées sur une page pour votre propre référence, puis nous vous montrerons comment et pourquoi vous pourriez créer ce tableau d'ambiance plus organisé qui va à un client. Allons-y. Comment faire un Mood Board. Il y a deux versions que je vais partager avec vous. Il y aura l'homme des cavernes fera pour moi-même, et ensuite je ferai une façon légèrement plus réfléchie qui pourrait aller à nos clients ou à nos parties prenantes. Je l'ai fait et j'ai fait mes captures d'écran. Je les ai assis dans mes dossiers d'exercices. Je les ai laissés là pour vous aussi, juste au cas où vous vouliez l'avoir fait. Découvrez les miennes, affectées à des fichiers d'exercices. Il y en a un qu'ils appellent Mood Board. C'est exactement ce que j'ai fait le tour d'Internet et que j'ai cherché et des choses qui m'intéressaient bien. Certains concurrents y sont également. Ce que je veux faire, je vais vous montrer le chemin de l'homme des cavernes. Sélectionnez tout, attrapez-le, faites-le glisser sur XD, lâchez-le. [RIRES] C'est tout, le mood board fait. Je m'en sers. Souvent, je vais baisser l'échelle, donc je vais zoomer complètement. Souvenez-vous de la commande 0 et saisissez tout cela, puis je vais la déplacer et la réduire à l'échelle. C'est assez bon lorsque je travaille uniquement pour mon propre mood board. Mood Board terminé. Command Plus ou Control Plus pour zoomer, et c'est ce que j'utilise lorsque je commence à créer mes créations. Je suis comme, oui, mais c'est comme ça que j'ai fait. Il n'est allé nulle part, Mood Board terminé. Si vous voulez le faire de cette façon, vous apportez toutes ces images, il y a un petit problème. ici, avez-vous remarqué à époque que c'était jusqu'au bord ? En fait, c'est parti de la plaque de cuisson. La plaque de cuisson n'est pas infinie. Si vous me dites : « Hé, il y en a autant, mais regardez tous ces éléments. » Je les ai tous sélectionnés. Pouvez-vous voir qu'ils sont sur ma planche à pâte, ils ne sont sur aucune planche d'art, mais ils font partie de mes planches à pâte. Mais il y a tout ça comme où vont ces gars. Ils étaient juste hors de la page, ne savaient pas quoi en faire. Vous pouvez faire l'une des deux choses suivantes. Si cette étape suivante est vraiment difficile, il suffit de faire glisser un couple à la fois, alors ils n'apparaîtront pas hors de la page et voilà . Je sais que tous ces éléments sont sélectionnés, donc je peux voir ces armoires. Je clique dessus, maintenez la touche Maj enfoncée , cliquez sur ce haut , puis je devrais pouvoir cliquer sur O. [RIRES] Comment faire ? [RIRES] U, U, U. Puis-je zoomer encore plus loin ? Je ne peux pas, comment on vous fait traverser ? [RIRES] Attendez là. Je ne peux pas y penser. J'ai cette façon, maintenez la touche Maj enfoncée et utilisez la flèche gauche. Cela a vraiment bien fonctionné. [RIRES] Comment je le fais dans le passé, je ne m'en souviens plus. Tout ce que j'ai fait était de défaire , c' est que j'ai juste frappé la flèche gauche et ça s'est passé, je suis jusqu'ici et je vais sauter jusqu'au bout. Vous faites de la même façon, alors sélectionnez-les tous ici. Utilisez l'une de vos touches fléchées et elles se lancent simplement sur le pad ici. Réduisez ces derniers et ajoutez-les à mon mélange. C'est ce que je fais lorsque je fais mon propre tableau artistique personnel et que c'est suffisant pour y aller. Quand je mets à l'échelle cela, un bon point est que j'en ai sélectionné beaucoup et si je saisis le bord, ils font des choses bizarres de redimensionnement. Ce que je veux faire, c'est maintenir Maj enfoncé et saisir le coin et il les redimensionnera tous ensemble comme nous le voulons. C'est la planche d'humeur Caveman. Disons que maintenant, je veux envoyer cela à mon client parce que c'est important pour obtenir mes propres idées, un mood board, mais il est également très important de transmettre où vous allez dans un direction à votre guise, le mot parties prenantes s'utilise beaucoup dans conception UX et les parties prenantes sont tous ceux qui sont le client, les clients, tous ceux qui ont un intérêt dans ce domaine. Il peut s'agir de votre patron, de votre chef de produit, d'autres membres de l'équipe, ils auront un intérêt dans ce projet. C'est une partie prenante, un mot que je déteste. Mais oui, disons donc que nous l'envoyons au client dans ce cas. Ce n'est pas le cas, A parce que nous les chargeons. [RIRES] Ils veulent voir mieux que les choses jetées sur notre page. De plus, cela doit être plus pris en compte parce que cela est très déroutant pour les parties prenantes ou les clients parce qu'ils sont comme, je ne veux pas ressembler à ça. Il est difficile de dire que c'est la direction lorsqu'ils comparent ces deux-là. Nous allons devoir passer par là et dire que c' est juste pour moi et non pour le client. Ce que je veux faire, c'est au client la direction que je prends, et dans mon cas, c'est surtout celles qui se trouvent en haut ici, je vais les asseoir un peu plus gentilement. Nous allons couvrir les images et les recadrer plus tard dans le cours. Nous faisons du Mood Board, donc je vais vous montrer ce que je vais faire. Je vais ajouter une page. Je vais accéder à mon nouvel outil de page. Je vais ajouter juste ce bureau de site Web, et je vais l' appeler Mood Board. Ce que je vais faire, c'est que je vais créer des rectangles et vous y attendez. Je vais juste dessiner des rectangles avec l' outil Rectangle. Vous les écrivez. À quoi sert cette cochonnerie ? Juste quelques rectangles et ce que nous pouvons faire, c'est que j'aime utiliser cette méthode de glissement. Il y a du masquage et des trucs dans une vidéo ultérieure, mais si vous voulez faire rapidement et facilement, trouvez ceux qui vous intéressent vraiment et faites-les glisser depuis votre Finder sur Mac ou PC et faites-les glisser simplement. directement dans une boîte. Cela nous permet de choisir celles que nous aimons vraiment et cela les rend un peu plus jolies. Je vais en traîner quelques-uns. Ce que je fais ici, c'est que je m'en assure parce que pour moi , j'aime bien celle-ci, j'aime les couleurs ici, mais il sera très difficile de communiquer au client que c'est une direction. alors qu'il s'agit également d'une direction. Je vais être un peu plus clair sur ce que j'ai mis ici parce que je veux essayer de titre ensemble impression de frapper d'une certaine façon. Ce que vous voulez faire, c'est trouver celui qui est le plus proche de la direction et en faire la plus grande , quelques petits morceaux, un personnel de soutien plus petit juste pour avoir une idée de tout cela, essayez de communiquer votre à travers des images de la direction que vous prenez. Pour cela, ces petites choses ici, vous pouvez passer par et utiliser l' outil pipette et en fait partir. Je veux en tirer quelques couleurs. Nous reproduirons des couleurs plus tard, mais vous pourriez en tirer quelques exemples de couleurs juste pour avoir une idée du goût des couleurs que vous pourriez utiliser ici. Ce document sera envoyé au client. Vous en avez peut-être plus d'un. Il peut y avoir ici une direction que vous avez l'impression que le client a demandé et peut-être une autre que vous faites, autre mood board avec quelque chose que vous pourriez être plus approprié pour l'utilisateur, et envoyez quelques options de cartes d'humeur créatives différentes. Maintenant, certaines des compétences en matière de création de ce mood board et avec vous encore pour recadrer des images et les déplacer , travailler sur les couleurs. Nous le ferons au fur et à mesure que nous suivrons le cours. Mais je voulais vous montrer à cette étape de mon processus, mon mood board et le mood board un peu plus organisé que je partagerai avec le client aux formes aléatoires, mais [RIRES] joliment alignées. . C'est tout pour mes planches d'humeur à ce stade. Passons à la vidéo suivante. 29. Projet de cours - Planche d'inspiration: Bonjour à tous, c'est l'heure du projet de classe. Je veux que vous construisiez un mood board. Vous pouvez en faire un exemple fantaisiste comme cet exemple de partie prenante que nous avons fait dans la dernière vidéo, mais sachez que nous ne possédons pas certaines compétences en matière de recadrage et de sélection de couleurs. Nous le ferons plus tard. À ce stade, nous pourrions juste faire le grand vieux qui les a tous mis là-dedans. Maintenant, j'ai tout jeté le mien. Vous pouvez simplement accéder à l'Import de fichiers et les intégrer de manière plus raisonnable. Mais une fois que vous les avez tous inclus, prenez une capture d'écran et téléchargez-la dans les commentaires ou les devoirs selon l'endroit où vous effectuez cette opération. C'est ça. Créez un Mood Board. Une chose que je n'ai pas abordée, c'est avec tout ce flux de tâches dans tout ce projet que nous faisons, nous supposons une nouvelle entreprise qui n'a pas déjà une marque vraiment forte. S'il existe une marque existante, ce que vous pourriez faire, c'est que vous ne sautez pas le mood board, mais cela pourrait être beaucoup plus restrictif. Ils peuvent être des exemples de documents imprimés que j'ai, leur site Web existant avec lequel vous avez un lien. Le Mood Board peut ne pas être aussi excitant ou différent que celui-ci. L'autre chose que vous pourriez avoir, c'est des photos de produits. Je vais utiliser des images de stock pour un thé vert, mais s'il s'agit d'un vrai client, ils ont peut-être déjà les photos. Ils peuvent être photographiés d'une manière spécifique pour aider à piloter la conception. Ils ont peut-être déjà un logo que nous n'avons pas. Tirer un logo dans votre tableau d'ambiance et tirer les couleurs sera également utile. Mais pour le moment, nous avons une entreprise flambant neuve. Il n'a pas de logo, donc nous pouvons aller un peu plus excitant et plus large avec notre mood board. Faites-le et je vous verrai dans la vidéo suivante. 30. Comment travailler avec les colles et les grilles dans Adobe XD: Bonjour à tous. Dans cette vidéo, nous allons parler de colonnes, de ces trucs sarcelants. Pourquoi ils sont 12. Pourquoi parfois vous en utilisez six. Pourquoi utiliser une grille plutôt que des colonnes ? Tout est lié à la conception web réactive et à des points d'arrêt. Maintenant, si c' est le cas, si vous le souhaitez, je suis concepteur web, je comprends que cette vidéo va être rapide et facile. Si vous débutez dans la conception Web et la conception UX, et que vous n'avez pas connu conception web réactive et ces colonnes auparavant, je vais essayer tout expliquer en une seule vidéo. C'est pourquoi celui-ci est un peu plus long que les autres parce qu' il y a un peu de théorie qui se déroule ici. Je vais faire de mon mieux pour essayer de tout expliquer. J'espère faire du bon travail. Commençons. Va prendre une tasse de thé, asseyez-vous. Vous devrez peut-être regarder celle-ci deux fois. J'espère que non. Allons-y. Parlons des colonnes, et c'est plus facile à commencer. Nous parlons de colonnes sur ordinateur de bureau, puis nous travaillerons sur mobile. Je trouve ça plus facile à comprendre de toute façon. Nous allons faire un outil ascendant ici. Nous allons choisir la taille de notre site Web. Ceux-ci sont très courants en ce qui concerne la taille d' un site Web de bureau. taille la plus courante de Google pour ordinateur de bureau ou navigateur Web, l'année où vous êtes, et cela apparaîtra, je vais choisir 1920 ici. Il s'agit également d' une autre chose courante. 1920 va me donner suffisamment d'espace pour faire mon site web. Je vais le faire glisser ici, et je vais appeler celle-ci ma page d'accueil. Nous allons également devoir développer notre site Web ou notre version de bureau de notre site Web mobile notre version de bureau de notre site Web mobile, car il sera affiché sur les deux. Nous allons probablement commencer par le mobile d' abord et concevoir pour cela, puis nous chercherons à faire une version de bureau par la suite. Mais en ce qui concerne les colonnes, commençons par cela. J'ai eu mon bureau. Je vais cliquer sur le nom ici. Si vous ne savez pas comment je les déplace, je clique sur le nom et je les fais glisser simplement avec l'outil de sélection. Maintenant, pour ajouter les colonnes avec elles sélectionnées ici, il y a cette chose appelée grille. Pouvez-vous allumer cette petite tique ? Il y a un carré ou une disposition. La mise en page est ce que nous voulons, et elle utilise des colonnes. La valeur par défaut doit être 12 s'il n'utilise pas 12. Tout d'abord, pourquoi utilisons-nous 12 ? La première raison est que tout le monde l'utilise et c' est suffisant pour une raison comme n'importe quelle autre. Si vous décidiez que vous vouliez faire des colonnes de 13, je ne sais pas, vous auriez des ennuis avec quelques personnes, et surtout avec votre développeur, parce que 13 est un nombre bizarre pour diviser les choses. Il est difficile de diviser en deux au fur et à mesure que les colonnes vont. Il n'est pas non plus divisible par lots. C'est un vieux numéro drôle. L'autre raison est que votre développeur va être fou. Principalement parce qu'un développeur ne codera souvent pas complètement votre site Web ou votre application à partir de zéro. Ils vont utiliser des raccourcis ou des frameworks déjà existants pour accélérer le flux de travail. Beaucoup de ces frameworks nous utiliserons des éléments comme un système de colonnes préexistant, et il sera probablement 12. Parlez d'abord à votre développeur, assurez-vous d'être sur la bonne voie. Dites, je suis nouveau dans ce domaine. Si j'utilise une grille de 12 colonnes, est-ce que ça va aller ? Probablement, oui. L'autre raison pour laquelle c'est vraiment bon c'est la même raison pour laquelle vous dites, la mise en page de magazine. Il vous donne de la cohérence entre les pages. Cela signifie que les choses posées sur cette page lorsque j'ai sauté, disons ma page de contact, tout est remanié. Il y a un peu de cohérence de conception, un peu de flux. autre raison est que 12 est bonne et divisible. Je vais allonger cette page un peu. Disons que je vais aller à l'outil Rectangle. Je vais me moquer d'un site web vraiment rudimentaire. J'ai ma barre de navigation en haut. J'ai ma boîte de héros en haut. Nous avons de l'espace pour travailler. C'est un grand appel à l'action, vente maintenant, consultez notre dernière boîte de héros de produits ici. Ensuite, en bas, nous avons notre boîte de fonctionnalités, et je vais en concevoir une qui l'a. Maintenant, ce sont souvent des cartes comme petites unités répétables que vous pouvez utiliser pour différents produits, peut-être différents services. Ce que je vais faire, c'est que je vais les dupliquer, donc j'ai 1, 2, 3. Vous pouvez voir comment 12 est une taille pratique car cela signifie que je peux aller en pleine largeur. Je peux en avoir trois en bas ici. Disons que si j' en ai besoin de quatre, ce que je peux faire est de diviser ce 12, voilà, et je peux en faire un, et je peux en faire un, sélectionnant tous les deux en maintenant ma touche Alt ou Option enfoncée sur un PC. En fait, c'est le contraire. Alt sur un PC et option sur Mac. Vous pouvez voir à quel point 12 est pratique pour cela. Je peux dire que nous y allons. Vous pourriez en faire deux, vous pouvez en faire un, vous ne pouvez pas en faire cinq. C'est l'un des inconvénients ici. Comme si je voulais cinq boîtes, alors tu peux. C'est pourquoi nous en avons 12. Cela s'améliore encore lorsque nous faisons ce qu'on appelle la conception web réactive. Parce qu'il va falloir comprendre à quoi ça ressemble sur mobile. Disons que nous disposons cela sur mobile. Nous allons juste en faire un nouveau. Faisons un nouveau. Allez-y. Un nouveau plan de travail. Nous allons en faire la taille laquelle vous êtes en train de concevoir. Sur celui-ci. Disons que j'utilise également 12 parce qu' il utilise le même framework, peu importe qu'il s'agisse d'une tablette, d'un mobile ou d'un ordinateur de bureau. C'est le même site Web qui répond simplement à la taille de l'appareil, à la conception réactive. Examinons 12. Je vais me débarrasser de mes marges. C'est le truc sur les bords ici, zéro et même conception pour cela. J'ai conçu ce site. À quoi ressemble-t-il ? Un mobile, essentiellement le même. J'ai ma barre de navigation en haut ici. J'ai ma boîte de héros légèrement différente parce que nous avons tellement d'espace sur la version de bureau, j'ai cet énorme rembourrage blanc de grande colonne, alors que celui-ci je dois aller plein sur les bords parce que nous n'avons tout simplement la taille pour jouer sur mobile. Quand on arrive à ces gars, en bas ici, il n'y a aucun moyen que je puisse en disposer quatre le long du bas. Je pourrais le faire. Le problème, c'est qu'ils seront trop petits, difficiles à lire. On y va. Cela ne va pas marcher. Ce que vous faites souvent, c'est que vous allez aller sur mobile, nous allons obtenir cette boîte juste pour faire quelque chose de différent au lieu de cette boîte en essayant de traverser les trois colonnes, nous le disons dans le code pour dire : vous n'avez pas à vous soucier de cela, mais c'est un aperçu pour le développeur. Vous connaissez peut-être déjà un meilleur codage, donc cela peut être facile pour vous, mais si ce n'est pas le cas, votre développeur va aller dans cette boîte au lieu d' être trois colonnes, disons six colonnes. Il suffit de changer cela dans le code de l' appareil appelé mobile B6 au lieu de trois. Cela signifie qu'il est très facile de mettre en œuvre différentes conceptions sur différentes tailles. Vous avez décidé qu' au lieu de quatre, vous avez décidé de le faire comme quatre boîtes, mais empilées l'une sur l'autre. Ou vous pouvez décider qu'en fait, vous voulez que l' énorme appareil mobile soit que vous allez les empiler tous les uns sur les autres, quatre d'entre eux. Le codeur peut passer en revue et dire en fait que la première boîte, vous êtes en fait la largeur totale de 12. Ce qui finit par se passer, là où vous concevez, si cette grille à 12 colonnes, même si elle est utilisée, il est difficile de concevoir dessus car ces colonnes sont vraiment petites, et peut être vraiment courant pour dire que je vais faire semblant et en écrire six. Même si 12 peuvent être utilisés, il reste six fois en 12, ou il peut parfois être quatre comme ce qui est utilisé, encore une fois quatre est divisible par 12. Vous pouvez simplement concevoir quatre pour créer choses parce que vous n'avez pas besoin beaucoup de détails quand il en arrive là. Je le fais souvent jusqu'à six. Il est vraiment courant de le faire à quatre, à vous de choisir. Nous ne pouvons pas trop approfondir ce qu'est le design réactif, mais permettez-moi de vous faire une brève démo ici. Ce site ici, HubSpot, a de très bonnes ressources ici pour la conception Web et la conception UX. Mais c'est leur grande version de site Web. Vous remarquerez qu' ici, sur les côtés, il y a cette grande zone vide, donc le site Web n' occupe que ce milieu. Lorsque nous concevons sur une version de bureau, vous pouvez souvent voir ici par défaut cela me donne ces marges supplémentaires ici. Vous pouvez décider que vous avez également ces marges, ou vous pouvez décider que vous concevez pour un très grand écran. Je vais dupliquer cela, et je vais dire que je veux que la largeur soit beaucoup plus grande, donc au lieu de 1 920, je vais en faire 2 000. Ce n'est pas vraiment plus grand. Trois cents. C'est une mauvaise journée. Allez. Nous pouvons le faire alors. Allez. On y va. Trois mille. Vous pouvez décider de concevoir pour ce très grand écran parce que vous avez un très grand écran et vous savez que votre client le fait. Mais à l'intérieur d'ici, vous allez avoir de très grandes marges de chaque côté. Vous pouvez réellement concevoir ce site Web ici. Il reste en fait à l'intérieur de ce petit morceau, et vous le faites rentrer dans vos 12 colonnes. Mais vous pouvez ajouter quelques trucs en arrière-plan ici. Dans ce cas, ils n'ont rien de grand chose. Cela s'étend, il y a de la couleur, il y a une boîte colorée, vous pouvez ajouter des graphiques différents ici, mais sachez que sur certains appareils, ils ne verront que cette version. Vous pouvez concevoir pour cette version , mais conservez cette version ici. C'est pourquoi vous avez ces marges sur les bords ici. Ces marges ici, vous pouvez simplement créer un très grand site, concevoir à l'intérieur de vos colonnes ici, mais sachez que quelque chose doit apparaître ici sur très grands écrans et cela pourrait juste être probablement une extension, couleur d'arrière-plan ou un motif répété ou quelque chose comme ça. C'est une chose. Lorsque vous concevez, concevez avec un peu de marge là-dessus. Lorsque vous concevez des tablettes, disons que le concepteur de cette page d'accueil HubSpot a dû concevoir en XD, la version de la page Web, la grande version, la petite version, puis regardez ce qui se passe quand nous arrivons ici. Regardez ça. La version design était sur cet écran de taille, ce graphique devient simplement plus petit et est poussé vers la droite. Plus loin, regardez ça. Il est passé d'un site Web à l' hypothèse que vous soyez sur une tablette ou un appareil mobile. Pouvez-vous voir le grand changement ? Le menu a été un grand changement. Regardez ça. Il est très courant de concevoir une version mobile, une version tablette et une version de bureau. Si vous travaillez dans une grande entreprise, ils appellent des points d'arrêt. Ils peuvent être conçus pour cinq tailles différentes : petit mobile, grand mobile, tablette, petit écran, grand écran. Vous devrez peut-être leur parler de cela, de ce que le développeur veut de vous. Fondamentalement, il s'agit simplement d'un mobile et de bureau et de laisser tomber la tablette il s'agit simplement d'un mobile et de bureau et de laisser tomber supposer qu'il s'agira de la version du site Web, mais c'est pour les petits travaux. Mais si vous faites un client plus important avec un site Web plus exigeant, vous devrez peut-être finir par faire cinq points d'arrêt, sept. J'espère que pas bientôt. Mais pour que vous sachiez, nous sommes en train de le faire dans ce cours. Nous allons simplement faire des ordinateurs de bureau et des appareils mobiles, mais il pourrait y avoir une attente pour la tablette entre les deux. D'autres choses que nous devons savoir sur ces colonnes, c'est l' espace entre elles. Cet espace entre ici dépend de vous, juste pour que vous connaissiez un espace vraiment commun. Ce sont les gouttières, ce sont vos marges, et ce sont vos colonnes. Pour le moment, la largeur des colonnes s'agrandit simplement pour s'adapter à l' espace prévu. Vous contrôlez la gouttière et les marges, vous laissez simplement la colonne remplir l'espace laissé derrière. Il serait très courant d' avoir une largeur de gouttière de 18. Sur un appareil mobile, c'est peut-être quelque chose de plus comme si j'avais une largeur de huit. Sur un bureau, il peut être 16, 24. Vous travaillez par incréments de huit. Vous verrez simplement que dans la conception web, il y a beaucoup d' incréments de huit. Donc 8, 16, 24, ça arrive. Eight est un autre nombre facilement divisible. Lorsque nous nous lançons dans la conception d'applications plutôt que dans la conception de sites Web mobiles, il s'agit également d'une taille de grille assez courante. Parlons vraiment de ça. Avant de parler des tailles de conception d' applications, je vais juste le faire , je ne sais pas. J'ai une page d'accueil, il y a 12 colonnes. J'utilise une largeur de gouttière de 16, 24 ou huit, peu importe ce que vous voulez utiliser, la rend divisible par huit pour faciliter les choses. En ce qui concerne la marge, vous devez vous rappeler si vous utilisez 140 des deux côtés, donc c'est 280, vous enlevez cela parce que vous êtes en train de concevoir ou je ne peux pas faire ce calcul. 1 920 moins 280. Vous pouvez réellement faire des mathématiques dans ces domaines. Vous êtes en train de concevoir un site Web pour 1 640 personnes. Je vais défaire. C'est cet espace là-dedans, 1 640. Est-ce qu'il le dit n' importe où ? Ce n'est pas le cas. Mais vous avez moins la marge des deux côtés, donc c'est la taille au milieu ici. Mais ne vous accrochez pas trop à la largeur exacte car nous savons tous que tout le monde a des écrans d'ordinateur de taille différente, écrans d'ordinateur portable, des appareils mobiles, vous pouvez les tourner sur le côté, portrait paysage. Il suffit de les procurer génériques et votre développeur vous aidera avec toute la réactivité ou vous le ferez si vous comprenez la conception web réactive de base. Mais c'est CSS. Si cela vous intéresse, peut-être que vous êtes intéressé, et même si vous n'allez pas devenir développeur Web, comprendre une conception Web frontale est très pratique en tant que concepteur UX, surtout lors de la conception de sites Web et de sites Web mobiles. Si cela vous intéresse, vous voudrez peut-être consulter mes autres cours sur la conception web. Il existe un cours de conception web réactif. Le meilleur est probablement Visual Studio Code. Il existe des éléments essentiels pour les concepteurs de sites Web qui vous permettront de comprendre les bases de la conception Web à portée de main. Le dernier dont je veux parler est conception d'un téléphone portable. Au lieu de trouver une conception de site Web mobile dont nous disposons, qui est un site Web qui vient d'être consulté sur un ordinateur de bureau, une tablette ou un mobile, nous concevons en fait une application. Ce que nous voulons faire ici, c'est au lieu de concevoir des colonnes, car elles ne seront pas réactives, ce sera une mesure assez fixe, Android ou iPhone, et ils utilisent quelque chose différemment, au lieu d'essayer de répondre, ils utilisent ce système carré très rigide, et ils utilisent huit pixels comme taille carrée. Utilisez-le pour espacer les choses. Espace loin des côtés, éloignez les choses les unes des autres. est ce que votre développeur utilisera lorsque vous utiliserez les frameworks qu'il utilisera pour la conception de son application mobile. Colonnes pour sites Web et ce système de grille pour applications. Un peu plus rigide et spécifique pour la conception d'applications. La fumée sacrée, était-ce utile ? Une dernière petite chose, c'est que j'en fais une nouvelle. Il y a cette fourchette et tu es genre, je veux celui-là. Ce que vous pouvez faire, c'est que vous pouvez sélectionner sur celui-ci et dire, en fait, je veux en faire la valeur par défaut, puis cliquer sur celui-ci et dire, utiliser la valeur par défaut. C'est une façon de le placer sur plusieurs plans de travail différents pour s'assurer qu'ils sont tous identiques. C'est ça. Je sais que c'était long et un cintreur de cerveau. J'espère que c'était utile. Passons à la vidéo suivante. 31. Voir la ligne à pointillé aka sur la page Adobe XD: Bonjour, tout le monde. Dans cette vidéo, quelle est cette ligne pointillée qui apparaît parfois, mais pas d'autres fois ? Que fait-il ? Je peux le déplacer, ça ne semble rien faire. La version courte est qu'il y a une version vidéo plus longue [RIRE], mais la version courte est, c'est comme quoi prévisualiser lorsque j'appuie sur ce petit bouton d' aperçu, mon port d'affichage est ce qu'il est appelé. C'est l'une de mes critiques, et les gens peuvent faire défiler vers le bas ici. Mais si vous le déplacez ici, regardez ce qui se passe. Je peux dire, sortez de mon chemin. Cela signifie que lorsque vous la démorez, votre vue est énorme et qu'elle essaie de vous montrer, ce qui est un peu bizarre. C'est ce qu'il fait. Permettez-moi d'entrer un peu plus en détail dans cette vidéo. Regardons ces lignes pointillées. Tout d'abord, éteignons les colonnes. Ils sont géniaux lorsque vous obtenez une mise en page, une fois que vous avez une structure de base et que vous voulez les désactiver. Il y a ceci [inaudible], cliquez sur le titre et vous pouvez simplement désactiver cette coche. Il les éteint de tout. Il y avait une vue de raccourci, c'est celle-ci ici, affichez la grille de mise en page et vous verrez sur un PC que c'est différent et ce sera Control Shift'. Sur un Mac, c'est « Command Shift ». Cool. On les a enlevés. Quelle est cette ligne pointillée bizarre ? Nous l'avons dit plus tôt, c'est ce qu'on appelle le port de vue. En gros, rappelez-vous que j'ai fait glisser ça vers le bas, c'était ici et je l'ai traîné vers le bas. Il n'apparaît qu'une fois que vous avez fait glisser quelque chose vers le bas. Celui-là, il ne va pas l' avoir . Où est ma ligne pointillée ? là qu'il est là. Parce que ce qui doit se passer, c'est qu'il faut savoir deux choses. Quelle est la durée de votre page et que voulez-vous afficher sur votre aperçu ? Je vais vous montrer ce que je veux dire. Si je l'ai ici et que je vais à Aperçu, ai le nom, prévisualisez cette page. Regarde ça, ça me montre mon design mobile. Mais si je fais ça plus gros, et que je pose quelque chose ici que nous pouvons voir, je vais juste faire une boîte rouge. Même chose. Prévisualisez ceci. Cela va bien fonctionner, mais sauf qu'il y a maintenant un peu de défilement. Mais si je suis comme, mec, ces lignes pointillées nous ennuient, je vais juste le déplacer en bas ici. Débarrasse-toi de ça. Tu y vas, tu es parti. Que va-t-il se passer ? Regardez ça. [RIRES] Effet visuel des fils de haie. Vous dites que le port de vue est vraiment grand, alors je vais essayer de tout montrer pour vous. C'est ce que c'est. Je vais défaire ça. Vous pouvez le modifier ici pour le saisir. Voyez-vous la hauteur du port de vue ? Vous pouvez décider que vous travaillez sur une taille plus grande et qu'elle doit être 750 ou vous pouvez simplement la faire glisser. C'est ce qu'il fait. Laissez-moi ouvrir l'aperçu en permanence, alors ne partez pas, regardez ça. C'est ce qu'il fait. C'est juste bizarre si vous ne savez pas ce qu'il fait. La même chose pour les ordinateurs de bureau. Si je clique dessus, il me montre tout mon bureau sur ce petit écran, donc je vais le fermer , l'ouvrir à nouveau. Grande version. C'est là, là. Vous pouvez décider que votre port de vue sera un peu plus grand. Il ne modifie pas la sortie du côté, c'est juste l'aperçu. Lorsque vous créez des aperçus que vos clients pourront vérifier, ils auront la même taille de port de vue. Assurez-vous simplement que si vous l'avez foiré, prévisualisez-le, vérifiez qu'il fait choses correctes et ne s'affiche pas. Ce serait délicat, comme je l'ai déjà fait lorsque vous obtenez une page très longue, vous concevez des charges parce qu' il y a beaucoup de défilement sur le site et que vous venez de partir, sortez le **** d'ici. Vous l'envoyez au client et à son visage avec ça quand ils vont en avant-première et ils se disent, Dan, qu'est-ce qui se passe avec ça ? [RIRES] Vous devez entrer et dire, quelle est la taille appropriée pour mon port de vue ? Dans ce cas, ce sera 1080. Vérifiez ce qu'est une taille standard normale pour la taille la plus courante des sites Web et Google vous dira de quoi il s'agit, change tout le temps, mais c'est ce que fait cette petite ligne pointillée. Je n'aime pas ça parce que c'est toujours allumé quand on travaille. Je veux m'en débarrasser. Actuellement, il n'y a pas de ligne de port show view. Il se peut que vous soyez plus tard dans le futur. Souvent, je le conçois ici et je le déplace ici parce que je frappe la petite ligne pointillée sur mon chemin. Je dois être conscient que lorsque je envoie pour créer un lien, je dois faire glisser leur port de vue vers le haut, puis créer le lien et le partager. Est-ce logique ? C'est ce que fait le port de vue. C'est tout, je vous verrai dans la vidéo suivante. 32. Comment ajouter et supprimer des guides à Adobe XD: Bonjour à tous. Si vous êtes comme, mec, ces colonnes, je ne veux pas que les colonnes me donnent juste de vieux guides de base. Comme ces guides, il suffit de les faire glisser et de se déplacer et de faire ce que vous voulez. Si vous ne voulez pas faire de colonnes, c'est très bien. Il n'y a pas de règles que vous devez faire des colonnes, surtout si vous faites un projet auto-dirigé ou si c'est un peu plus artistique. n'y a pas un énorme site Web structuré qui a besoin tout ce contrôle rigide avec des colonnes, vous avez besoin de quelques guides, c'est le support lourd. Laissez-moi vous montrer comment les fabriquer. En fait, l'alerte spoiler, il suffit de les faire glisser du bord ici. Vous y allez. Pourquoi cette vidéo est-elle si longue ? Parce qu'il y a des trucs, des astuces et d'autres choses, mais c'est comme ça que tu les obtiens. Laissez-moi vous montrer comment. Pour créer quelques guides, j'ai créé une page blanche juste pour commencer. Il s'agit d'un iPhone 13, tout d' abord, vous devez être sur votre outil Déplacer, ne fonctionnera pas si vous utilisez d'autres outils, ou l'outil Sélection, la petite flèche en haut au-delà de celui-ci, vous avez peut-être déjà trébuché à travers elle. Ils viennent d'apparaître un jour dans XD. Regardez ceci, si vous survolez juste en dehors de la page, ils sont là. Cliquez sur Maintenir, faites-le glisser vers l' intérieur, vous avez créé un guide. C'est ça. Vous pouvez continuer par le haut, glisser par le haut. Je clique sur Entrée pour m'en débarrasser. S'ils n'apparaissent toujours pas, vous êtes peut-être sous Affichage, sous Guides et vous êtes peut-être allé mon cas, je peux les voir pour que je puisse aller sur mon cas, je peux les voir pour que je puisse aller à en faire glisser un. Je peux donc dire que quelqu'un que vous avez peut-être accidentellement utilisé le raccourci pour la hauteur ou les guides. Donc, ils ne fonctionnent pas, pas de guides. Vous entrez ici et vérifiez que c'est le bon. Show hide, vous avez l'idée. Assurez-vous de pouvoir les voir. Soyons un peu plus précis. Supposons que vous vouliez vous en débarrasser. Comment vous en débarrasser ? Cliquez dessus et cliquez sur Supprimer, cela ne fonctionne pas. Vous cliquez sur Maintenir et il suffit de les faire glisser dans cette zone ici. Regardez une petite icône, poubelle, voilà, c'est comment vous en débarrasser. Soyons un peu plus précis. Supposons donc que vous vouliez placer une bordure de 24 pixels autour. Je vais donc cliquer et faire glisser dessus, et vous pouvez voir que je peux être très précis et j'ai 24, parfait. Je peux le faire là aussi. Si vous avez un pavé tactile sur lequel vous essayez de réaliser votre travail de conception ? Je le fais tout le temps quand je conduis . Vous ne pouvez pas être aussi précis. Ce que vous pouvez faire, c' est que vous pouvez l'être, il est parfois facile de saisir l'outil carré, faire glisser quelque chose, de le taper là-dedans, 24 et si vous tabulez, vous pouvez descendre de la largeur à la hauteur 24. Ce n'est pas essentiel, juste une astuce pratique. Saisissez l'outil Sélection, faites-le glisser dans le coin, puis regardez ceci. Supposons un zoom avant un peu, il s'accrochera à mon carré. Tu as l'idée, glisse, accroche, top one, accroche, attrape ce gars, les coupe ici, collez ce gars, mettez-le dans le coin. C'est juste un moyen rapide de ne plus les faire glisser par le bas ou le haut. Il y a donc un peu de plaisir à faire défiler. N'oubliez pas, maintenez la barre d'espace enfoncée, cliquez et faites glisser la souris enfoncée ou utilisez l'une des méthodes que vous utilisez [RIRES] jusqu'à présent dans ce cours. Vous êtes arrivé jusqu'ici, vous avez travaillé à une façon de vous déplacer. Je maintiens la barre d'espace enfoncée. C'est un peu ce qui se passe, comme le déplacer vers le bas, le glisser un peu vers le haut. Alors, ce gars, désolé mon pote, tu es parti. Je n'ai plus besoin de toi. Commande 0 pour s'éteindre, sélectionnez-le, Commande ou Contrôle 3 clique sur ce tableau d'application. Avec ça, nous avons des guides. Si vous ne voulez pas utiliser les grilles comme nous l'avons fait dans la dernière ou dans les colonnes. Vous voulez juste quelques petits guides, puis voilà, faites-les glisser vers l'extérieur, supprimez-les et faites-les glisser vers l'arrière. Vous pouvez simplement les éteindre parce qu'ils sont parfois pratiques pour commencer , puis vous voulez les désactiver. Accédez à Afficher les guides et vous avez masqué les guides. Vous pouvez également les verrouiller parce qu'ils sont mobiles. Vous pouvez cliquer dessus et les faire glisser. Vous pouvez décider de cesser de faire cela s' il vous plaît. Allez dans View et verrouillez-les pour le moment. Si vous avez un autre projet et que vous devez copier les guides, vous l'avez probablement vu là. Allons-y vers toi. Vous pouvez voir que mes guides ne sont pas tombés sur eux. Ils se rencontrent si vous dupliquez évidemment le plan de travail, n'oubliez pas de maintenir l' Option enfoncée sur un Mac Alt sur le PC. Je veux juste les copier pour que vous puissiez les sélectionner sur le plan de travail, vous voulez les prendre depuis View Guides, Copier les guides, cliquer sur celui-ci, afficher les guides, coller les guides. Guides, voilà. Vous pouvez les éteindre simplement parce que c'est une douleur dans les fesses. Vous continuez accidentellement à traîner les choses du haut et du bas et vous y allez. C'est Guides dans Adobe XD. 33. Inspiration des couleurs et the d'œil dans XD: Bonjour à tous. Cette vidéo nous allons nous pencher sur l'inspiration des couleurs. Nous allons travailler sur la couleur dans cette section suivante. Par où commencez-vous ? Comment choisir les couleurs qui vont ensemble ? Oui, c'est de ça qu'il s'agit. Vous pouvez aller n'importe où sur Internet, inspirer la couleur, le taper. Vous trouverez des charges. Où je vais, Color Hunt. Je l'aime bien pour les échantillons de couleurs qui correspondent. Ce que vous pouvez faire, c'est que vous pouvez aller jeter un coup d'œil et dire que c'est pour moi. Vous pouvez voir ce petit code ici. C'est un nombre hexadécimal, un petit code de hachage. Si je clique dessus, il indique qu'il est copié. Joli. Si je retourne maintenant dans XD et que je prends un rectangle et je le dessine et cliquez ici mon remplissage. Vous verrez ici que nous utilisons HSB pour les pièces. Il y a ce numéro hexadécimal et je peux le coller là-dedans, appuyer sur « Entrée » sur mon clavier, et je l'ai apporté. Vous pouvez simplement continuer à copier et coller, et vous commencerez à les ajouter à votre document et commencer à l'utiliser, base de vos couleurs. Vous pourriez finir par les changer, bien sûr, mais c'est un endroit où commencer. Maintenant, un autre endroit que j' utilise beaucoup est Adobe color ou color.adobe.com. C'est gratuit. Vous n'avez pas besoin d'une licence payante pour celle-ci. Ce que j'aime vraiment, c'est des choses comme explorer, le long du haut, ils parcourent ce site Web, donc vous devrez peut-être trouver où les explorations se déplacent, mais vous pouvez faire des recherches. Vous pouvez décider comme, regardons le thé et inspirez-vous des couleurs de thé que d'autres personnes ont décidées. Vous pouvez décider cela, voilà. Voici quelques couleurs de thé et des couleurs de thé douteuses. C'est pour faire couler les jus créatifs. Ce sont de la couleur du thé et, oui, certaines choses manquent. Disons que vous décidez que c'est ça, vous êtes comme, oui, j'ai du mal à choisir différents Browns qui vont ensemble, regardez ceci, celui-ci [RIRES]. Celui-là, je l'aime bien. Vous pouvez aller « Entrée » et copier et coller les nombres hexadécimaux comme nous l'avons fait dans le dernier. Il suffit de cliquer dessus, de le copier et de le coller. Ce que vous pouvez faire, c'est que vous pouvez utiliser la bibliothèque Adobe. Je vais annuler. Avant de dire « Ajouter à la bibliothèque » nous devons simplement nous assurer que vous êtes connecté à votre compte Adobe, adobe.com. Vous pouvez voir mon petit visage en haut. C'est là. Ce que vous devez faire, c'est vous assurer que les bonnes bibliothèques sont sélectionnées. Créez une bibliothèque, vous pouvez en ajouter une. J'ai cette classe XD 1 ici, et cela signifie qu'elle va s'ajouter à cette bibliothèque. Sinon, il y a un peu de mystère savoir à quelle bibliothèque va être ajoutée. Allons « Ajouter à la bibliothèque » et il n'y a pas grand-chose qui se passe [RIRES]. C'est juste la bibliothèque. Comment accéder à la bibliothèque dans XD ? À l'intérieur d'ici, nous avons ces différents éléments, nous avons passé entre les couches et notre panneau des ressources, et nous n'avons pas encore vraiment utilisé de plug-ins. Mais ce top ici, qui est normalement des actifs, vous pouvez en revenir à un. C'est un endroit étrange pour ça. Si vous pensez que c'est un endroit étrange pour cela, c'est le cas. Voici les ressources de vos documents, revenez dans les bibliothèques. Documentez les ressources, revenez aux bibliothèques, juste pour que vous sachiez qu'il est facile de se perdre ici. Vous pouvez voir toutes les bibliothèques et si vous êtes comme moi, vous avez un million de bibliothèques. Voici mon cours XD et il y a cette couleur, celle du thé que je viens de faire. Comment l'utiliser ? Cliquons sur un rectangle. Vous pouvez simplement survoler et aller vers celui-ci. Vous allez dans celui-là. Vous pouvez aller chercher un tas de couleurs différentes et commencer expérimenter l' utilisation de ces couleurs. La seule chose que j'ai dit, c'est que vous pouvez copier et coller le numéro hexadécimal. choisissons totalement au hasard, rien de thé lié à celui-ci. Mais copions-le et ici, quand je l'ai dit, il suffit de le coller comme nous l'avons fait auparavant. Vous devez le changer, je vous l'ai déjà dit, n'est-ce pas ? [RIRES] Mon cerveau est en train de fondre. Je vous ai déjà montré comment faire de l'hexadécimal. Je vais vous montrer deux fois. Vous y allez. Il s'agit de choisir cinq échantillons hors contexte. Ce que j'aime faire, c'est utiliser soit notre mood board, soit juste un site comme le dribble et vous cherchez simplement des couleurs plutôt que du style. Vous pourriez être comme, j' adore ces couleurs noires violettes, même si leur contenu n' est pas tout à fait correct, vous pouvez décider que les couleurs vous conviennent. Il suffit de prendre une capture d'écran et de faire ce que nous avons fait avec le mood board et d'apporter votre capture d'écran dans XD. J'ai déjà des trucs. Ce que j'ai fait pour le mien, c'est nous savons ce qu'il y a sur mon humeur. J'ai été captivé par quelques couleurs. J'aime bien ça. C'est une couleur fumée vert sarcelle et il y a aussi un peu de thé au café chaud là-dedans, donc ce sont les couleurs que je voulais voler, je veux dire, appropriées, emprunter. Pouvez-vous voler une couleur ? Ce que vous pouvez faire, c'est que vous pouvez saisir votre outil rectangle, dessiner quelque chose. Alors, par ici, voyez-vous, je vais me débarrasser de ma frontière. Voyez que la pipette clique sur l'outil « Pipette », puis vous pouvez simplement la déplacer et dire : Je veux vous [RIRES]. Il a l'air noirâtre. Mais si vous entrez ici, pouvez-vous voir que cela fait partie de cette teinte et que vous décidez que je veux vraiment le déplacer jusqu'ici. Vous pouvez voir que c'est cette couleur, juste plus saturée. Le haut à droite est plus saturé. Même largeur. Allons en faire un autre. Laissez-moi prendre quelques couleurs d'ici. Je vais décider de l'outil pipette. Je vais prendre ce brun ici. Vous pouvez l'attraper au pixel, deux, un a l'air bien. Oh, donnez-moi le pixel [RIRES]. On y va. Encore une fois, vous décidez peut-être que j' aime cette couleur, mais je veux aussi une version plus légère. Pour être honnête, c' est souvent comme ça que je finis avec mes idées de couleurs. Ce n'est pas toujours, mais souvent, je suis genre, mec, j'adore ce qu'ils ont fait ici et j'irai emprunter les couleurs et j'ai fini par y aller, ok, j'aime cette couleur, mais il fait trop chaud. Je veux le déplacer de cette façon. Vous pouvez voir que vous pouvez le désaturer en le déplaçant vers la gauche et en aller à l'intérieur. Vous pourriez vous retrouver avec cette palette de couleurs entièrement costumée que vous pourriez commencer. Vous allez arriver à un point où vous êtes comme, j'ai besoin d'une version plus sombre, j'ai besoin d'une version plus légère. parce que vous avez besoin d'un bouton ou le contraste n'est pas suffisant pour un bouton au-dessus d'ici ou le texte est trop clair ou trop sombre et que vous finissez par l' ajuster au fur et à mesure, mais c'est un bon endroit pour commencer. Adobe Color, Color Hunt et beaucoup de captures d'écran et de couleurs appropriées d'autres personnes. L'autre chose à considérer est que vous pourriez être motivé par la photographie de produits existants, couleurs de marque existantes, de sorte que la couleur de votre marque ou votre parcours d'inspiration couleur pourrait être assez retardé. Vous devrez peut-être choisir les couleurs que l'entreprise utilise déjà ici. Vous pourrez peut-être vous faufiler dans une couleur complémentaire ou une couleur secondaire par rapport à leur couleur existante. S'ils utilisent du rouge, vous pourriez être mesure de vous faufiler dans quelque chose qui supporte ce rouge pour vous donner un peu de contraste sur le site, surtout s'ils n'ont pas fait beaucoup de trucs Web auparavant. Il y a tellement d'éléments qui ont besoin de couleurs différentes pour montrer une hiérarchie de besoins tels que ce qui est important, ce qui n'est pas important, ce que pourrait être la prochaine étape, les boutons, souvent dans différentes couleurs d' autres éléments non cliquables, ce qui indique aux utilisateurs, les aide à naviguer sur le site. Je suis en train de babiller maintenant, c'est tout. Je vous verrai dans la vidéo suivante. 34. Comment créer une palette de couleurs dans Adobe XD: Bonjour à tous. Dans cette vidéo, nous allons créer ce système de nuancier, les couleurs primaires, secondaires et accentuées, plus de créer des nuances de gris. Vous pouvez probablement dire que c'est un ensemble plus frais de gris que je vais utiliser et de blancs. Permettez-moi de vous montrer pourquoi nous les fabriquons et comment les fabriquer. Allons-y. Pour commencer, j'ai un tas de choses que nous utilisons dans dernières vidéos qui sont des espaces réservés et qui font de cet endroit un gâchis, encore plus désordonné qu' il ne l'est actuellement. J'utilise simplement mon outil de sélection, glisser une boîte autour d'eux, en appuyant sur « Supprimer » sur mon clavier. Ce que nous allons faire, c'est que j'aime cette couleur, à partir de la dernière vidéo, je l'ai volée à partir de là, pas dans ce brun pour le moment, donc j'aime cette couleur bronzée qui se cette couleur, à partir de la dernière vidéo, je l'ai volée à partir de là, pas dans ce brun pour le moment, trouve là-dedans. Laissez-moi saisir ça. Vous attendez là. Il s'empare de l' outil pipette et je vais prendre quelque chose là-dedans. J'aime bien cette petite combinaison. Ce toboggan est là aussi, mais je creuse peut-être cette chose. Lorsque nous traitons des couleurs pour un projet UI/UX, vous avez souvent besoin d'une couleur principale et d'une couleur secondaire, que j'ai ici. Souvent, vous aurez également besoin d'une couleur d' accent. Jetons un coup d'œil. Disons que la couleur primaire est cette ardoise sombre en arrière-plan ici, noire, pas tout à fait et c' est la couleur secondaire. Il y a du gris, on s' y habitue, il y arrive, et puis la couleur d'accent est ce jaune ici. C'est ainsi qu'ils diffusent des informations, des éléments en vrac, des éléments importants, des éléments cliquables ou de petites choses modifiables. Il y en a d'autres, ce vert est gris en arrière-plan, primaire, secondaire. Est-ce qu'ils ont une couleur d'accent sur ce bleu ? La couleur d'accent peut souvent être une version assez forte , une couleur assez distinctive et s'utilise assez, seulement un peu utilisée. Cela aide vraiment les choses importantes, peu de couleur d'accent. Maintenant, je vous donne des indices sur la façon de le faire. n'y a aucune raison pour que vous ne puissiez pas utiliser un million de couleurs, deux couleurs, une couleur noir et blanc. n'y a pas de police des couleurs. Personne ne m'a encore arrêté [RIRES] même si j'ai commis beaucoup de crimes contre la couleur. Je vous donne juste ma façon de le faire. Si vous voulez faire de la théorie des couleurs d'une manière un peu plus scientifique et réfléchie, consultez Sarah Parkinson, elle a un cours de théorie des couleurs, Google là où vous le regardez maintenant et vous trouverez son cours là-dessus. Elle est brillante et mieux que moi. Je vous donne mes conseils et astuces sur la façon dont je travaille. J'ai ces deux couleurs, je veux une troisième couleur d'accent. Je ne sais pas encore ce que c'est. J'ai joué avec ce jaune faible ici, et tu es comme, oui, c'est bien. J'aime bien celui-là aussi. C'est jaune que je ne choisirais probablement pas ça comme une couleur canari jaune citronné. J'aime bien Kiddish. Je n'en suis pas encore sûr. n'y a aucune raison pour que vous deviez le choisir et ne pas le changer. Cela va juste nous donner un point de départ. Je n'aime pas déjà ça. [RIRES] Il y en a deux dans ce vert. Je vais juste le ramener un peu plus aux jaunes. Je vais même le traîner un peu. Vous y allez. Je n'en suis pas sûr. De toute façon. Souvent, une fois que vous aurez vos couleurs, vous aurez besoin d'une couleur plus foncée et plus claire comme nous l'avons vu au début. Ce que je vais faire, c'est que je vais faire une petite grille de neuf colonnes. Celui-ci est déjà assez léger, donc je vais probablement aller plus sombre avec ça. Je vais probablement y aller, rappelez-vous avant HSB, j'aime bien celui-ci, la luminosité de saturation des teintes. En termes de luminosité, je vais utiliser ma flèche vers le haut et vers le bas. Je ne peux utiliser ma flèche vers le bas, dans ce cas, que pour l'assombrir. Je pourrais trouver que je n'utilise pas réellement la couleur d'accent autre que son éclat complet parce que cela a l'air un peu minky. Mais donnons-nous quelques options. Encore une fois, utilisez l'outil pipette , puis partez de là et passez un peu plus sombre également. Ce que je pourrais trouver aussi quand il fait sombre, c'est que je devrai peut-être augmenter la saturation en la faisant glisser de cette façon ou en utilisant ma petite saturation, monter un peu pour ajouter un peu plus de volume à la couleur. Je n'aime pas ça. Regardons celui-ci ici. Allons-y. Vous allez simplement saturer ma luminosité vers le haut ou vers le bas, comme ça. Celui-ci est probablement trop sombre pour commencer par un ton moyen, et celui-ci va toujours se tromper. J'aime bien ça. Bien. Même chose avec celle-ci. Voyons à quoi ça ressemble quand il est plus léger. Je pense que tout ce groupe est proche, mais c'est trop bleu. Je veux aller un peu plus loin dans les verts faisant glisser ça un peu vers le bas. Vous y voilà. J'ai bien aimé cette ardoise. Je vais [RIRE] diluant dans le mauvais sens. Votre idée, je vais trouver quelque chose qui me plaît. J'adore creuser un peu. C'est pourquoi vous êtes comme, je vole des couleurs, et deux secondes plus tard, vous les avez personnalisées pour qu'elles soient ce que vous voulez. En fait, pourquoi diable fait-il toujours des échantillons de couleurs différents. Il y a des moments où vous voulez utiliser cette couleur et vous ne pouvez pas l'utiliser en plus de cela parce que le contraste n'est pas suffisant. Vous devez soit passer à une version plus sombre, qui ne fonctionne pas ou une version plus légère cela va jusqu'à celle pour un contraste très bon, c'est une façon de faire quelques combinaisons. Couleur primaire, couleur secondaire, couleur d'accent, dans mon cas. Encore une fois, aucune police de police pour vous arrêter. Il suffit de faire ce que vous voulez. L'autre chose dont nous allons parler est celle des Noirs et des Blancs. noirs et les blancs sont relativement faciles. Je suppose que vous allez ici et si vous voulez un blanc plein souffle, il suffit de le faire glisser dans le membre du coin jusqu' au bord ici. Mais que se passe-t-il ici ? Évidemment, un blanc, c'est que je n'ai pas vraiment besoin d'une nuance de couleur. Pourquoi ? Parce que c'est facile à trouver. Mais ce que je pourrais faire, c'est que vous pouvez avoir des blancs cassés. C'est comme si ici était trop loin, mais juste un peu. J'ai ce blanc qui est juste un peu plus chaud. Je pourrais faire un blanc froid. Regardons celui-ci. Au lieu d'un blanc chaud, qui est dans mes teintes jaunes, je vais passer à la couleur bleu-vert. J' exagère un peu de vous montrer, mais vous pouvez voir à quel point ce blanc, c'est la même luminosité, mais celui-ci est plus chaud et celui-ci est plus frais. Cependant, les deux sont probablement un peu trop, donc en termes de luminosité, probablement 98. Hundred est entièrement blanc, et ce ne sont que de petits indices. Je ne sais pas exactement ce que je veux faire ici pour celui-là. L'autre raison d' avoir un blanc cassé est que vous avez une interface, disons que vous avez votre iPhone et que vous souhaitez avoir une fenêtre contextuelle. Je vais l' amener au premier plan. N'oubliez pas que cliquez avec le bouton droit, vous pouvez le renvoyer, l'amener au premier plan. Vous pouvez dire, tout cela, et du moins maintenant si j'ajoute quelque chose comme une ombre portée, nous ne faisons probablement pas d'ombre portée dans cette vidéo, mais vous pouvez voir que vous avez cette fenêtre contextuelle, c'est assez de contraste avec vous continuez simplement et l'ombre portée aide vraiment à la pousser vers l'extérieur. Vous le faites dans l'autre sens. Cela peut être cela et cela pourrait être votre fenêtre contextuelle d'interface. Juste pour lui donner un peu de contraste quand c'est ici. Vous comprenez ce que je veux dire ? Je vais descendre la version légèrement plus bleue, et je vais faire le reste des couleurs. Allons ici, on y va. J'en ai eu cinq. Commençons par les Noirs. Le noir dit la même chose. Vous pouvez passer au noir en bas ici, ou un noir riche. Disons que le vieux noir normal, et ces deux-là ici. Celle-ci ici, vous pouvez ajouter un peu plus de caractère cool. Même chose dans les bleus et les verts, c'est toujours noir, mais il se passe juste un peu de choses. Est-ce là ? Juste un peu. De même pour celui-ci, vous pouvez le faire au chaud, allez, je veux que celui-ci soit un peu plus chaud. C'est difficile à voir là, mais quand ils commencent à s' éclaircir, disons que nous allons ici, et que nous allons ici, nous faisons glisser la légèreté vers le bas ou vers le haut. Voyez-vous qu'il s'agit plutôt d' une couleur gris cobalt nato ? Ensuite, ici, si j'aligne celui-ci, ce que vous pouvez voir ça commence à apparaître ici, surtout à ce brun quand il devient plus léger, je vais probablement devoir enlever non seulement le rendre plus léger, mais supprimez également une partie de la saturation, sorte qu'il fait encore chaud mais de manière moins évidente. Vous pouvez décider où vous voulez aller. Vous pourriez aller juste du vieux noir et blanc. Ou dans mon cas, je vais descendre ce gris de l'OTAN bleu, furtif et orageux. Il y a tellement de noms gris. Si vous avez déjà essayé de choisir le gris à partir d'un échantillon de peinture ou d'un papier peint ou quelque chose comme ça, vous saurez que les gris sont peints en noir. Je vais juste me frayer un chemin vers les versions inférieures en allant ici et en allant ici et en allant plus loin, s'il vous plaît. Probablement au fur et à mesure qu'il devient plus léger, supprimant également une partie de la saturation. C'est de la saturation là-dedans, il suffit de la faire glisser vers la gauche. Je vais montrer pourquoi j'adore cliquer sur le clavier [RIRES]. On y va. Ce sera juste mon jeu de couleurs. Cela vous donne juste un point de départ. Vous pouvez régler cela par la suite, mais plus tard, lorsque vous avez choisi 40 types de gris différents parce que vous n'avez pas eu d'échantillons de couleurs à choisir, cela va être difficile à mettre à jour. Mais maintenant, si vous avez juste assez à choisir avec un peu de variation, vous pouvez les mettre à jour plus tard lorsque nous aborderons des choses comme les styles de couleurs. C'est mes échantillons de couleurs pour commencer. Il n'est pas gravé dans la pierre, je n'aime pas encore celui-là. Vous verrez probablement ce changement dans la vidéo suivante. Mais c'est tout pour le moment, je vais bricoler un peu plus ça et je vous verrai dans la prochaine vidéo. C'est tout, j' enlève juste une certaine saturation. Ça suffit. Allons-y maintenant. 35. Comment créer des dégradés dans Adobe XD: Bonjour à tous, c'est l'heure du dégradé. Nous allons créer des dégradés sucrés ici dans Adobe XD. Maintenant, laissez-moi vous montrer comment. Pour créer un dégradé, commençons ici sélectionnant Commande 3 ou Control 3 sur un PC pour zoomer. Ensuite, je dois reculer un peu [RIRES] Prenons juste n'importe quel vieux carré. Il peut s'agir d'un cercle, il peut s'agir de n'importe quelle forme ancienne que vous avez dessinée. Lorsque cette option est sélectionnée, vous les modifiez ici sous Remplissage. Cliquez sur Remplir, et en haut ici nous avons Solid et vous pouvez choisir les différents types de dégradés , donc dégradé angulaire. Nous allons commencer par celui-là parce que vous n'êtes pas autorisé à l'utiliser. Je ne sais pas [RIRES] Attendez, tout dégradé est éludé. Le linéaire est probablement le plus courant. Pour modifier les couleurs des extrémités, il suffit de cliquer sur l' une ou l'autre des extrémités. Vous pouvez voir les mises à jour ici, alors en haut, je vais dire que vous êtes vert. Il est plein plus longtemps. Allons chercher, à mon avis, le pire gradient du monde. Cliquez sur le bas, réglez la teinte, passez au bleu. Non, Red, où est-il ? C'est le pire. C'est peut-être le dégradé le plus laide du monde. Vous pourriez adorer ça. C'est bon. Je change de direction. Il suffit de saisir n'importe laquelle de ces petites poignées ici ou ces petits points à la fin et de les traîner vers l'extérieur. Vous pouvez décider de la façon dont ils veulent aller. Vous pouvez le faire passer à l'écran. Vous pouvez l'avoir assez serré au milieu. Selon ce que vous voulez faire. C'est superbe. Maintenant, si vous voulez une troisième couleur, vous pouvez le faire facilement en cliquant ici au milieu de la ligne. Vous voyez la flèche là ? Il y a un peu plus à côté de ça dit Hue. Je vais ajouter des dégradés encore plus exceptionnels. Oh, c'est mauvais ou vous pouvez le faire ici dans cette file d'attente ici, ça n'a pas d'importance. Vous pouvez cliquer dessus pour ajouter une petite nuance supplémentaire pour laquelle vous pouvez ajuster la couleur. Allons-y bien. Jaune. C'est ce dont nous avons besoin. Vous pouvez les supprimer en cliquant sur l'un d'eux ici. Supposons que nous voulons nous débarrasser du bleu, il suffit de cliquer sur Supprimer sur votre clavier. Il s'agit d'un dégradé linéaire. dégradé radial fonctionne à peu près de la même façon. Ils sont assez faciles à enseigner soi-même. Le centre se déplace. Il y en a deux, ce qui est bizarre. Celui-ci extérieur, c'est l'étendue comme grand et loufoque à l'extérieur des bords. Je l'utilise beaucoup pour ce dégradé qui n'est pas tout à fait un dégradé. Voyez-vous que c'est comme si c'était là. Il donne un peu de plénitude à la couleur sans qu'il s'agisse d'un dégradé très fort en rouge. Celle-ci ici le déforme. Cela dépend de ce que vous voulez faire. Encore une fois, vous pouvez ajouter plus de ces petits points ici, les ajuster ou cliquer dessus pour les supprimer. Maintenant, pour m' inspirer des dégradés, il y a un site cool que j'utilise. Je reviens toujours ici. Grabient, grabient.com et vous trouverez juste des dégradés intéressants que vous n'avez peut-être pas explorés. Disons que vous voulez celui-ci ici. Vous pouvez cliquer sur ce petit point et vous voyez qu'il y a un petit nombre hexadécimal. Cliquez dessus. Vous pouvez le copier et, dans Adobe XD, trouver la première nuance. Ensuite, vers le bas au lieu de HSB, saturation de teinte et luminosité, tapez simplement le nombre hexadécimal. Retournez, copiez, collez celui-ci et trouvez cette nuance finale, remplacez-les et nous nous débarrassons de celui qui se trouve au milieu ici. Au revoir. Là, vous avez un dégradé. Bien sûr, vous pouvez faire exactement la même chose avec votre outil Pipette de n'importe lequel de vos commandes 0 ou Control 0 pour tout obtenir, c'est d'aller choisir ces couleurs. Vous pouvez décider que je le veux. Je veux que l'intérieur, c' est-à-dire que vous soyez cette autre couleur. Vous commandez 3, Control 3 sur un PC et Gradient. Une dernière chose que je veux vous montrer, c'est que nous avons fait des dégradés assez délibérés, ce qui est cool et je les utiliserai dans mes créations. Souvent, je ne sais pas, on peut utiliser des dégradés très subtils. Disons que ce sera ma maquette de ma forme de haute fidélité. Je vais déposer tout ce qu'il y a dessus. Celui-ci sera ma page d'accueil et celle-ci sera mon Hi-Fi pour la haute fidélité. Je veux commencer par un arrière-plan, très léger dégradé, et vous pouvez également le faire pour votre tableau d'art. Vous pouvez sélectionner votre tableau d'art en cliquant sur le nom haut et le traiter comme nous l'avons fait dans ce rectangle. Cliquez sur Remplir et allez simplement sur Dégradé linéaire. Dans ce cas, ce que je veux faire c'est que je veux peut-être utiliser un léger blanc cassé. En fait, ce n'est pas ce que je veux faire. Je veux aller ici et trouver mes petits échantillons de couleurs. Cliquez sur vous, revenez là-dedans, choisissez cette première couleur, utilisez l' outil pipette et je vais opter pour quelque chose comme ça. À quel point cela va-t-il être bon ? [RIRES] Nous verrons dans une seconde ? Quelque chose comme ça en arrière-plan ou peut-être quelque chose comme ça à cela [RIRES] Indéterminé, mais vous pouvez ajouter un dégradé à l'arrière de votre tableau d'art juste pour que vous le sachiez. C'est peut-être juste un petit dégradé blanc cassé dans cette chose. Parfois, au lieu d' être très délibéré comme en commençant et en arrêtant chaque côté, je vais étendre ce passé là où j'ai besoin qu'ils soient simplement parce que je veux le soupçon de la couleur. Je veux qu'il l'attache ensemble, mais sans que cela soit aussi évident. Comme à première vue, c'est juste une version laiteuse de ces deux couleurs. Mais de toute façon, il s'agit de dégradés dans Adobe XD. 36. Comment enregistrer et réutiliser les échantillons de couleurs dans Adobe XD: Bonjour à tous. Au lieu d'utiliser l' outil Pipette à maintes reprises pour essayer de réutiliser les couleurs, je vais vous montrer comment les ajouter en bas ici pour les nuanciers enregistrés. La version simple est cliquez sur puis cliquez sur Plus. [RIRES] Il y a quelques petites choses que je vais vous montrer afin que vous puissiez maîtriser les nuances de couleurs. Allons-y. Au lieu d'utiliser cet outil Pipette, ce que nous allons faire, c'est que nous allons les ajouter dans un endroit pratique, ajoutons celui-ci d'abord aux échantillons enregistrés, c'est cette petite liste ici. Vous en avez peut-être déjà par accident. Si vous n'allez pas bien , touchez Plus. Lorsque cette option est sélectionnée, il va dire ajouter ceci à cette liste, même chose que celle-ci ici, et travaillez simplement sur votre chemin et ajoutez-les. Ajoutons ces trois et ensuite je vous donnerai d'autres conseils, nous les ajouterons tous. Si vous les obtenez, commandez mélangé. Comme en fait, je le veux là, c'est tout. Vous pouvez le faire et cela signifie juste maintenant, au lieu de dire, je suis tout en bas, et j'ai besoin que cette tique ne soit pas aussi verte, j'ai besoin que ce soit le nouveau vert, regardez ça oh, juste pratique pour réutilisez ce genre de choses. Si vous avez quelque chose là-dedans, vous voulez le supprimer. Avec la sélection, en fait, pour supprimer des choses n'a pas vraiment importance sur ce que vous avez sélectionné, vous devez simplement le faire glisser dans no man's land. Vous y allez. Je vais passer maintenant, utiliser ma technique d' édition rapide et ajouter tous mes échantillons juste pour que nous les ayons là, alors vous attendez là. C'était douloureux à regarder et c'était douloureux à faire. [RIRES] Cliquez, cliquez, cliquez, cliquez sur. Je les ai ajoutés et une chose à noter est que le dégradé, certains les mélangent entre une vidéo, k c'est qu'ils n'appliqueront pas dégradés pour une raison quelconque pour le moment. Essayez maintenant, vous êtes peut-être dans le futur et cela pourrait fonctionner, mais si vous modifiez, suffit de jeter une couleur unie et je dois me débarrasser de celle-ci. [inaudible]. Laissez-moi réessayer. C'était intéressant, je ne m'en rendais pas compte. Ce qu'il a fait, c'est, pouvez-vous voir celui qui se défonce là ? Il est dit que j' ai déjà ce dégradé de couleurs. Tu es comme oui. Il essaiera de le modifier en tant que nuancier complet et si vous l'avez déjà obtenu, il ne sera plus modifié ce qui est cool. Attendez, je vais mélanger un autre dégradé. Mon préféré dans le monde entier, si vous essayez d'ajouter un dégradé, il ne choisira qu' une des couleurs. Pouvez-vous le voir là ? C'est vrai. Débarrassez-vous de ça ? Joli. Très bien. C'est pratique, ayez vos couleurs prêtes au début juste pour que vous sachiez, mon processus n'est pas aussi systématique quand je suis dans la scrappy, ne sais pas vraiment ce que je fais à l'époque du design où je suis juste travailler à travers les choses. Je ne serai pas aussi bon avec ça parce que je ne sais pas vraiment de quelle couleur j'ai besoin ici, je vais essayer toutes sortes, mais cela ne prend pas longtemps avant que vous commenciez votre processus. Nous avons une couleur engagée ou vous avez une couleur client que vous ne pouvez pas modifier, cela fait partie des directives de leur marque. Il est coincé là-dedans, vous pouvez les ajouter ici pour ne pas essayer de le mélanger à chaque fois ou de l' outiller avec un compte-gouttes. Ce sont des nuanciers enregistrés dans Adobe XD, passons à la vidéo suivante. Dites adieu à la petite radio. 37. Projet de cours 07 - Couleurs et colles: Bonjour à tous, c'est l'heure d'un projet de classe créatif. Nous allons faire des choses ennuyeuses toutes les pages et colonnes, puis nous allons mélanger quelques couleurs. La première chose, c'est que je veux que vous créiez vos pages HiFidelity. Ce que nous allons faire dans ce cours, c'est que parce que nous n'avons que quelques pages avec lesquelles travailler, nous allons laisser nos filaires ici. Souvent, je vais les faire dans un document séparé, mais pour celui-ci, parce que nous avons une assez petite quantité dans ce flux de tâches, quatre pages plus quelques supplémentaires pour l'animation, gardons la chaîne hi-fi activée même chose que le Low-Fi avec des filaires. Il suffit de créer quatre pages qui portent exactement le même nom, sauf que j'ai ajouté hi-fi à la fin d'elles. Page d'accueil, produit, caisse et confirmation hi-fi. Maintenant, dans ce cas, choisissez le téléphone sur lequel vous allez tester. Déterminez quel téléphone vous avez et quel pixel, hauteur et largeur il s'agit et vous pouvez le choisir lorsque vous créez vos nouvelles pages. Quatre d' entre eux sont dans la même chose pour la version de bureau. ne me dérange pas de la taille que vous utilisez, vous décidez de ce que vous sentez à l'aise et de la page de conception de site Web. J'utilise les 1920 pixels de l'autre côté, mais je le rentre au bord, et je les mets dans vos colonnes. Encore une fois, vous pouvez décider de faire 12 pour le bureau pour moi et pour le téléphone, soit six ou quatre où vous en avez envie. Ce que vous trouverez quand vous le faites, cependant [NOISE], c' est que XD, parce qu'il utilise des pixels, il ne peut parfois pas tout diviser, comme la taille de mon téléphone ici, qui est 375 est [ RIRE] un nombre divisible assez dur parce qu'il fait cinq pixels ou qu' il s'agit d'un nombre impair, c'est ce que c'est. Il fait des trucs curieusement autour des bords qui rendent tout cela cohérent parce que c'est vraiment important pour XD. Ajustez les bords pour que tout soit ajusté. Si vous trouvez que c'est proche mais que vous êtes un peu dérangé, ne vous inquiétez pas. Dans ce cas, il suffit d' aller avec le flux. Cela fait simplement partie de l'utilisation de cette mesure absolue et conception pour quelque chose qui sera réactif plus tard. Il y a un peu de déconnexion, alors il suffit d'ignorer le morceau de bord. Si vous le comprenez. J'espère que vous vous retrouverez partout où la taille de téléphone avec laquelle vous travaillez est facilement divisible et que XD aura fière allure une fois que vous aurez fait cela ; Quatre pages, à la fois sur le bureau, mobile et le Colonnes , déposez votre palette de couleurs. Il y a quatre parties dont vous avez besoin. [BRUIT] Où est-il ? Je vais zoomer. C'est un raccourci que je n'ai pas montré. Vous pouvez l'utiliser ou maintenez enfoncée la touche Commande et Barre d'espace, dites simplement au hasard si vous faites quoi que ce soit, vous pouvez maintenir la barre de commande et d'espace enfoncée et [BRUIT] faites simplement glisser une boîte autour. Vous avez vu qu'il y a une fenêtre pop-up sur mon écran ? C'est des caméras Mission Control à lancement rapide appelées. Sur un PC doté de la barre d'espace de contrôle et vous pouvez simplement faire glisser le curseur, zoomer avant. Ce raccourci peut également être utilisé sur PC. De toute façon, la digression. Je veux que vous fassiez une couleur primaire, une couleur secondaire, une couleur d'accent, vos gris et au moins un dégradé. Ça ne me dérange pas de savoir ce que c'est. Ne vous engagez pas trop maintenant , cela fait partie du cours. Choisissez des couleurs, regardez ces inspirations de couleurs, choisissez-les dans vos planches d'ambiance et vous pourrez les changer plus tard, ne vous inquiétez pas. Prenez une capture d'écran et téléchargez vos pages, vos couleurs, puis je veux que vous les enregistrez toutes dans vos échantillons sauvegardés, [BRUIT] qui se trouve au bas de la page. Donc, si vous pouvez mettre cela dans l'ordre, prenez une capture d'écran pour cela pour vos devoirs et faites-le. Je vous verrai dans la prochaine vidéo. 38. Quelles polices puis-je utiliser dans mon conception de mon web ou d'une application dans Adobe : Bonjour à tous. Dans cette vidéo, nous allons voir quelles polices vous êtes autorisé à utiliser dans la conception de votre site Web ou de votre application. Je vais vous montrer quelques bons endroits où les récupérer et comment peut-être les jumeler pour que vous ayez jolies polices assorties. Allons-y. Pourquoi ne pouvez-vous pas utiliser une ancienne police qui se trouve sur votre machine ? Parce qu'il doit s' agir d'une version Web ou d'une application spéciale . Ils ne sont pas tous construits de la même manière. Il existe souvent une version. Même si vous le trouvez sur votre disque dur et que vous l'aimez, ou peut-être que le client l' a et qu'il possède une police qu'il utilise, vous pourrez peut-être en trouver une version Web. Si ce n'est pas le cas, vous devrez discuter de quelque chose qui est assez proche de ce qu'ils utilisent et qui est disponible en ligne. suffit de déterminer de quoi il s'agit et de voir s'il existe une version Web disponible et s'ils doivent la concéder sous licence ou si elle est gratuite. C'est une chose bizarre qui s'est produite chez concepteurs web qu'il existe un tas de polices gratuites, presque gratuites et peu coûteuses. Adobe Fonts est l' endroit où nous allons commencer , car c'est gratuit. Vous payez une licence à Adobe pour utiliser ces polices dans vos conceptions. Vous ne payez rien de plus pour eux, mais vous payez pour cette licence. Fonts.adobe.com est un endroit idéal pour commencer. C'est un très bon site web. Cela change tout le temps, donc vos mises en page ne ressembleront pas à la mienne. Mais trouvez que toutes les polices ou parcourez toutes les polices, vous vous retrouvez dans quelque chose comme ça. Ce que j'aime faire, c'est que j'aime coller dans le matériel sur lequel je travaille, c'est-à-dire un beau thé vert. C'est leur message marketing qui va être au milieu d'ici. C'est mon message marketing. Ce que je cherchais c'est que j'adore cette combinaison ici. Ce texte vraiment grand, étroit, épais, audacieux avec ce texte plus dessiné à la main ou un peu plus convivial. C'est ce que je cherchais de toute façon. C'est ce que j'ai fait. génial, c'est que vous pouvez taper votre message marketing. Vous pouvez travailler avec les lettres réelles, et ensuite, ici, vous pouvez décider que je veux soit propre ou je vais les voir toutes. Je veux que mon seul ne soit pas de ceux-là. Il y a deux parties. Il y a ces balises , puis il y a des classifications officielles de police. Je veux un empattement, qui est une police qui n'a pas ces petits pieds qui poussent les bords. Ce sont des séries. San Serif est sans ces serif, donc je veux un serif. Il va se débarrasser de tout ça. Super. Vous voyez ces derniers ici ? Je ne veux pas ça. Je veux juste ceux qui, dans mon cas, je veux que le poids soit vraiment épais. Je veux une police sans empattement qui a un poids joli, épais, si audacieux en gros, et je veux qu'elle soit étroite. Vous pouvez décider ici, je veux qu'il s' agisse d'une police étroite ou compressée, ou qu'il y ait différentes versions de celle-ci. Mais vous pouvez voir ici, je le réduit au moins rapidement à des trucs. C'est intéressant, je l'aime bien. Ensuite, vous vous frayez un chemin ici, nous décidons lequel vous voulez, puis cliquez sur Disons que nous voulons Interstate. Je suis presque sûr que je l' ai sur ma machine. Non, nous ne le faisons pas. Vous voyez la famille. Ils sont assez faciles à installer, puis vous cliquez sur « Activer les polices ». Il existe une version compressée et une version condensée. Il y a juste différents niveaux de la façon dont ils sont écrasés. Vous pouvez le voir partiellement écrasé, super écrasé et régulier. Vous pouvez en activer une partie ou la totalité et commencer à travailler sur votre conception. La chose que vous devez vérifier lorsque vous téléchargez cela c'est qu'elles sont disponibles pour les licences Web. Dans mon cas, ils peuvent être utilisés sur un site Web. Parfait. Il suffit donc de vérifier deux fois. Si vous l'obtenez sur un site où certains de ces sites gratuits comme 1001 Free Fonts ou DaFont ou l'un de ces sites Font Squirrel, vérifiez qu'ils peuvent réellement être utilisés sur un site Web. Certains ne le sont pas. Une chose vous pouvez faire, je pense que je peux revenir en arrière et je peux dire en fait que je pensais qu' il y avait un moyen de choisir de ne me montrer que les sites Web, mais vous pouvez le voir ici. me montre qu'il est disponible pour être utilisé sur un site Web et que c' quelque chose que vous deviez faire attention, mais une grande partie de celle-ci est actuellement disponible pour une utilisation en ligne. Voyez-les, activez-les, ils s'arrêtent ici, et le lendemain, c'est juste magique. Ils utilisent Adobe Creative Cloud et vous pouvez commencer à travailler avec eux. Permettez-moi de vous montrer un autre site avec lequel vous pouvez travailler est Google Fonts. Fonts.google.com est un site très courant, encore plus répandu que le site Adobe Fonts. Ils sont tous gratuits, vous n'avez besoin d'aucune licence. Ils sont juste limités. Adobe Fonts a plus de polices, mais Google Fonts en a également une quantité brillante. Ici, la même chose. Je vais taper mon beau thé vert et travailler de la même façon. Leur recherche de catégorie n' est pas aussi amusante. Ils ont juste les catégories de base ici sans toutes les balises. Un peu d'options, vous pouvez y aller. Je vais aller dans cette maquette et chercher une écriture manuscrite et je cherchais quelque chose qui n' était pas exactement ce qu'il y avait dans cette maquette, mais quelque chose du genre. Ici, c'est un peu différent du téléchargement. Disons que vous aimez Pacifico. Vous l'ouvrez, vous téléchargez la famille. Toutes ces polices Google Fonts seront disponibles sur le Web ou sur une application. Vérifiez la licence, mais vous constaterez qu'elle fonctionnera. Ensuite, vous téléchargez la famille, vous vous retrouverez avec ce fichier zip qui descend. Si vous êtes sur Mac et PC, c'est assez simple, il suffit de double-cliquer dessus. Continuez à double-cliquer dessus jusqu'à leur installation. L'installation des polices est assez facile. Si ce n'est pas le cas, Google et découvrez comment installer des polices sur votre ordinateur, mais vous ne devriez pas rencontrer de problème. Un peu gratuit, totalement gratuit, puis payant pour les polices. N'ayez pas peur de payer une police de police. Il y a juste des emplois où vous ne pouvez pas et n' avez pas les ressources nécessaires , puis il y a des emplois où vous avez un peu plus de temps et un peu plus de réflexion. Je ne veux pas décourager les gens d'acheter des polices. Je fais tout le temps pour des projets. Jetons un coup d' œil à ça. importe de quelle fonderie il s'agit. Je regarde Klim.co.nz. C'est une fonderie incroyable. Ils créent leurs propres polices. Ils sont basés en Nouvelle-Zélande, d'où je viens. Je les aime juste. Je ressens une bonne connexion à la police lorsque je la télécharge. Au lieu de simplement dire que j'ai choisi une police, je suis en mesure de discuter de la façon dont la police a été inspirée, ce qu'elle signifie pour moi personnellement, ce qu'elle signifie pour le client. Mais vous devez payer pour eux. N'ayez donc pas peur de payer les polices. Je l'ai acheté l' autre jour. Quand il s'agit d'acheter des polices, supposons que nous voulions acheter celle-ci. Vous devez décider à quoi vous en avez besoin. Le bureau est un design graphique traditionnel, et c'est pour ça que je l'ai acheté. Oui, j'ai acheté celui-là. Jetons un coup d' œil à notre version Web. Lorsque vous achetez une version Web, vous devez leur dire qu' elle allait sur un site Web. Quels sont les visiteurs uniques mensuels ? De mon côté, j'ai environ 10 000 personnes, donc c'est ce qui va coûter en fonction du nombre de visiteurs uniques il y a et que vous pouvez décider réellement de cette version Web. Est-ce que ça vous amène tous ou juste un d'entre eux ? La version Web, si vous en voulez juste une, vous allez simplement utiliser une version fine et moyenne. Ça va me coûter 100$. Intéressez cela dans votre budget lorsque vous vendez sur des concepts. Si votre entreprise pour laquelle vous travaillez a déjà une police et qu'il existe une version Web, vous allez devoir découvrir c' est une police gratuite qu'ils utilisent ? Est-ce qu'ils utilisent Roboto, qui est gratuit, ou utilisent-ils autre chose qui doit être sous licence ? Il suffit de vérifier cela. S'ils ne le veulent pas, ils vont devoir trouver quelque chose d'autre gratuit similaire. Comment je finis par choisir des polices, c'est dire ici sur Adobe Fonts, c'est vraiment génial de les voir dans un exemple de texte. Vous pouvez simplement vous approcher et ensuite télécharger un tas de choses que vous n'allez pas utiliser. Vous allez utiliser l'un d'entre eux et ensuite je passe mon temps dans XD. Où sommes-nous ? On y va. Je finis par avoir copie après copie, toutes dans des polices différentes, jouant avec différentes et tu es comme, bon sang, il a fait une demi-journée à le faire. Si c'est vous aussi, ne vous inquiétez pas. Cela nous arrive à tous. L'autre chose agréable et utile est l'appariement des polices. Si vous êtes dans quelque chose comme Adobe Fonts et que vous êtes comme ça, je dois utiliser celui-ci pour mes en-têtes, mais qu'est-ce que je vais utiliser pour ma copie corporelle ? Le jumelage de polices est un très bon mot. Je l'ai tapé ici. J'ai fait le jumelage polices Adobe Fonts ou l' appariement de polices Google Fonts. J'ai ouvert un tas d'entre eux au hasard pour jeter un coup d'oeil et j'ai trouvé d'autres personnes qui ont fait le jumelage de polices. Vous pouvez dire que j'aime ça. Vous pouvez en décider, et ceux-ci sont disponibles sur Adobe Fonts. Vous pouvez dire que je suis vendu. J'essaie d'en penser à un. Je n'aime aucune de ces combinaisons. [RIRES] La même chose ici, je viens de l'avoir googlé. Adobe Fonts est apparu sur le blog Adobe et il y a des ressources intéressantes sur ce qu'il faut choisir. C'est agréable de les voir dans leur contexte car parfois les voir seuls ici n'est pas très utile. Certains d'entre eux l'ont. Disons que nous voulons regarder Interstate. Si nous regardons cette famille, parfois pas toutes, elles auront un cas d'utilisation. Il ne se passe pas beaucoup de choses ici, mais ils peuvent avoir un tas de choses ici. J'aimerais qu'Adobe en mette davantage là-dessus. Mais oui, regardez autour de vous, voyez ce qui pourrait fonctionner. C'est peut-être comme si j'adore ces deux-là ensemble. Jumelage de polices, téléchargement de polices. Je pense que même Adobe Interstate en interne a des recommandations pour les paires correspondantes. Quelqu'un l'a fait, mais il se passe un peu trop. Je vais le reprendre, mais j' aime bien les voir dans un peu plus de contextes que sur un site Web. Quelles polices ai-je choisies ? Laissez-moi vous montrer. Je vais les télécharger rapidement et les installer. Ce sont eux qui sont là. C'est mon premier concept de toute façon. J'ai bien aimé celle-ci, cette Bernina Sans. J'aime ça parce qu'il fonctionne comme un titre parce qu'il est très audacieux et étroit. Narrow est très pratique sur les téléphones aussi. Regardez ceci, la version non étroite. Regardez, c'est devenu plus large. Il est plus large. Cela signifie simplement que vous pouvez ranger plus de choses dans une taille plus grande sur un téléphone, ce qui est assez étroit. Cela peut donc être pratique. Aussi, bien qu'il ait une taille de copie corporelle vraiment agréable, simple et facilement lisible, donc je peux passer à quelque chose comme 16. C'est beau et lisible. Je vais me débarrasser de la tête, juste un espace entre les lignes, et cela va aussi bien fonctionner comme copie corporelle. Je peux utiliser cette version et cette version. Même police, copie du corps, titre, et ce sera ma petite police d'accent. Mon seul problème avec celui-ci est, tout d' abord, qu'il était trop léger, mais heureusement, il y a une version plus épaisse et l'autre problème, c' est qu'il ne s'agit que de casquettes. Si vous êtes coincé là-dedans, le client va dire, pouvons-nous le faire d'une autre manière ? Peut-on faire une minuscule ? Vous êtes comme, pas avec cette police. Parce qu'Ametic n'a pas de minuscules. Je l'aime assez, je vais le faire. Mais ce sont mes polices. En fait, avant de partir, je voulais jeter ça ici. Je ne veux pas que tu penses que le lendemain, mec, il entre et choisit une police, choisit une police de sous-titre, et puis il est parti. Non. Si vous êtes comme moi et que vous riez parce que votre document XD ressemble davantage à ceci, c'est Illustrator, je sais. Mais je mettrai un t-shirt rapide et 100 révisions plus tard. Toutes les variantes de la même chose, beaucoup de polices différentes. Si vous êtes comme ça, ne vous inquiétez pas, je suis aussi comme ça. Mes fichiers XD deviennent tous désordonnés avant qu'ils ne soient rangés. Je voulais m'approprier ça au cas où tu avais l'impression de mal faire ça. Oui, les choses deviennent désordonnées. Il s'agit sélection de polices dans Adobe XD. Je vous verrai dans la prochaine vidéo. Regarde ça, j'ai passé des lustres à essayer d'obtenir ce regard. C'est là que j'ai fini, mais j'essayais tellement efforts pour ça comme l'indie, le japonais, le skateboard. J'adore XD, tu comprends. C'est ça. Je vous verrai dans la prochaine vidéo. 39. Vérifiez les autres polices que les gens ont utilisés: Bonjour, tout le monde. Dans cette vidéo, je veux vous montrer comment vérifier quelles sont les polices d'autres personnes. Disons ici, concurrent potentiel, concurrent potentiel que vous vouliez savoir quelle police ils utilisent. J'aime bien celle-ci parce qu'elle est claire et légèrement condensée pour qu'elle puisse entrer beaucoup dans ces catégories. Supposons que vous vouliez savoir ce que c'est. J'utilise Chrome, potentiellement le plus courant des navigateurs. Vous ne l'utilisez peut-être pas, vous devrez donc le trouver pour le vôtre ou installer Chrome. Disons celui-ci ici, il suffit de cliquer dessus avec le bouton droit et vous pouvez accéder à celui-ci appelé Inspect. Sur un Mac, il se peut que vous deviez cliquer dessus avec la touche Option. Cette chose apparaît et vous devrez peut-être la faire glisser et la déplacer un peu. Ce que vous cherchez, c'est de ce côté-ci , ce qui s'appelle Computed. Computed vous dirait, éventuellement, que vous pourriez faire défiler un peu vers le bas la famille de polices et vous pouvez voir dans ce cas qu'il s'agit Roboto Condensed et que vous vous dites « Génial », donc je sais de quelle police il s'agit. Ensuite, vous pouvez accéder à quelque chose comme Adobe Fonts ou Google Fonts ou rechercher sur Internet et simplement dire « Je veux trouver Roboto ». Police de copie de corps super commune. Vous pouvez voir qu'il y en a deux. Il y a une dalle Roboto. Cela ressemble plus à ça. Ici, il y a une tonne de poids différents et ce qu'il y a. On dirait qu'il y a Roboto Condensed. On dirait ça. Vous pouvez alors déjà l' activer. J'utilise Roboto pour un autre projet, mais voilà. Il s'agit d'une police Google, donc vous la trouverez également là-dedans. Oui, c'est ainsi que vous pouvez potentiellement le faire à partir de sites Web. Disons que vous n'avez qu'une capture d'écran PDF ou quelque chose comme ça. Ce que vous pouvez faire, c'est que vous aurez besoin d'une version JPEG ou PNG. Ceux-ci proviennent de nos planches d'ambiance et j'ai vraiment aimé cette police là-bas. Je me demande ce que c'est. Ce que vous pouvez faire est bizarre chez Adobe, peu importe où vous êtes, il semble que vous puissiez simplement faire glisser quelque chose. Il y a un moyen officiel et on appelle ça pas sûr [RIRES] attendre qu'il se charge. Recherche visuelle. J'ai mentionné que c'était sous des polices et qu'il est quelque part là-dedans. Vous le trouverez. Je viens de le jeter là-dedans. Il est écrit, est-ce la police que vous voulez ? Vous pouvez déplacer cela vers ce que vous voulez. Je suis comme, non, j'ai été bon. Je vais l'ériger. Prochaine étape, il va essayer de deviner le texte. [RIRES] Je l'ai déplacé. C'est difficile avec ces parties vraiment minces de ces séries. Je vais taper, TEA STORE. Vous y voilà. Il l' obtient normalement. Ensuite, il va me donner quelques polices. Regardez-moi ça. C'est assez proche. Ce n'est pas exact. Pouvez-vous voir cette petite oreille ici et ce petit pokey dehors un peu ? C'est différent. Est-ce que je peux voir l'un d' entre eux qui ont celui-là ? Cela dépend aussi. Vous pourriez être comme, en fait, j'ai aimé cette oreille, elles vont mieux. Ça a le petit bout plat ou tu aimes celui qui a ce petit peu ? Cela vous rapproche, puis vous pouvez les activer et commencer à travailler dessus. Ça ne va pas toujours les faire faire faire faire. Il y a d'autres services. Quelle police ! C'est une version cool que j'utilisais, mais j'ai commencé à utiliser des polices Adobe parce qu'il est agréable de trouver quelque chose assez proche, de l'activer et commencer à travailler dans mes concepts de conception. Il s'agit d'explorer des polices déjà disponibles en ligne ou en hauteur, les saisir et de les utiliser dans votre conception. Une petite note, Adobe possède une application appelée Adobe Capture. C'est sur Android et iPhone. Vous pouvez réellement le faire à la volée pendant que vous vous déplacez. C'est cool. Si vous êtes sorti et que vous êtes comme, oh, c'est cool, vous pouvez réellement essayer de capturer la police en direct sur votre téléphone et elle la téléchargera et l'installera pour vous. C'est ça. Passons à la vidéo suivante. 40. Quelles tailles de police courantes choisir en web design: Bonjour à vous. Cette vidéo nous allons explorer les tailles de police à utiliser. La réponse courte est que vous pouvez utiliser tout ce que vous voulez. Mais il existe certaines règles d'utilisation des polices sur les appareils et sur les sites Web que je vais explorer et vous donner certaines des valeurs par défaut pour vous lancer afin que vous puissiez enfreindre les règles, mais vous devez connaître le règles pour enfreindre les règles. [RIRES] Commençons. Donc, les tailles de police, vous pouvez créer n'importe quoi. n'y a pas de règles officielles, il y a juste quelques paramètres par défaut que vous devriez connaître car vous les verrez charger, et beaucoup de développement Web est construit sur des frameworks, essentiellement modélisés , et ils ont des tailles par défaut et ils s'habituent beaucoup, alors que sont-ils ? Regardons ça, appelons-le, ce titre. Pour un titre, le titre de la plus grande taille que vous pouvez probablement utiliser, eh bien, le plus gros est normalement 72, 72 est un titre massif. Ils descendent là-bas, à partir de là, donc 48 c'est le prochain. Faisons en sorte que cette gauche s'aligne, ils s'alignent tous un peu mieux et laissez-moi les parcourir. Ce sont eux 72, puis ça descend à 48, puis on descend à 32, puis il y en a 24, puis il y en a 18, et c'est tes titres normaux. Permettez-moi de les écrire ici pour que vous puissiez mieux les voir. Ce sont les tailles généralement utilisées pour les titres. Ils appelleront également ce titre Titre 0 parce qu'il est massif et celui-ci est le titre 1. Dans la conception Web, c'est une façon standard assez courante d'appeler les choses, et le dimensionnement standard, vous pouvez les utiliser ou ne pas les utiliser, c'est à vous de décider. L'autre chose, c' est que vous les appelez Heading 0. Votre codeur ou développeur l' appellera probablement H0 et ici, il l'appellera H1 et ainsi de suite. Souvent, lorsque je parle à mon développeur ou que je fais un peu de conception Web, je travaillerai avec H1 au lieu que le titre 1 correspond à 48, la valeur par défaut sera H1, et la valeur par défaut sera 48 lorsque Je le code à moins que je ne le modifie, et c'est un bon point, vous pouvez le changer. Cela signifie simplement que le développeur doit passer en revue et peut-être le faire 1,5 de la taille d'origine, donc ce sont les valeurs par défaut, du moins pour les en-têtes. Le prochain est le paragraphe correspondant à votre corps de texte. C'est ce que l'on appelle le texte de votre paragraphe, ou votre texte P, et souvent il est 16 et souvent ce n'est pas gras. C'est une police normale et c'est ce que je vais utiliser dans ce cas. Mais encore une fois, cela dépendra votre type de police car certaines polices semblent plus petites même si elles mesurent 16 points. Ils peuvent avoir leur ligne de base au même point et la hauteur X en même temps, mais il peut être très mince, il faut donc qu'il soit plus grand pour être vu. Vous pouvez donc enfreindre ces règles, juste un bon point de départ. L'autre chose à faire, c'est que lorsque vous choisissez un texte de paragraphe, vous êtes comme 16 points, est-ce assez grand ? Vous devez vous assurer que lorsque nous faisons quelque chose comme un mélange de corps de texte, c'est que lorsque vous le faites, vous le visualisez en taille. Nous savons maintenant que mes 100 % sur mon écran ne sont pas adaptés à mon appareil. Je peux soit faire des trucs sournois, 75 semble être une bonne nouvelle fois, je tiens mon téléphone qui a à peu près la bonne taille de mon écran, vôtre pourrait être parfait à 100%. Essayez-le à 100 %, essayez plus bas, c'est une bonne jauge, mais n' oubliez pas de faire des tests sur vos appareils, surtout si vous construisez d'abord un mobile ou une application, utilisez-le avec cette application Adobe XD et prévisualisez-le là-dessus pour que vous puissiez vraiment aimer que c'est faisable parce que vous rencontrez problèmes si vous voulez être comme, je ne serais pas super cool et faites-le descendre à 12. Cela peut sembler intéressant, mais des choses comme les moteurs de recherche, ce n'est pas 100 pour cent, mais ils vont regarder votre site et dire, hé, ce site n'est pas accessible à quelqu'un sur un mobile téléphone. Lorsque quelqu'un effectue une recherche sur un téléphone mobile, votre site ne sera peut-être pas complètement marqué en noir, mais il sera classé plus bas qu' un site de qualité égale utilisant une police. tailles jugées accessibles ou de la bonne taille. Pour y jeter un petit coup d'œil, après ce cours, il il s'agit d' examiner la durée d' accessibilité et la taille des polices. Donc, pour moi, c'est deux choses dont vous avez besoin, c'est la bonne taille, donc 16 est parfaite, ne peut pas vraiment se tromper avec elle et elle doit avoir un contraste élevé. Google n' aimera pas non plus si vous essayez de le faire, car c'est du spammy, il ajoute beaucoup de mots-clés et les gens utilisent pour essayer de le faire pour tromper Google. Mais Google pense que c'est un contraste très faible, donc nous allons nuire à votre classement parce que ce n' est pas si utile pour les personnes qui le regardent, alors pourquoi le montrer aux gens ? Google est intelligent de cette façon. que j'ai le texte de mon paragraphe, est-ce la bonne taille ? Il est 18 ans, on y va. Testez sur votre appareil, vous pouvez commencer par ceux-ci. Vous n'êtes pas obligé, car j'ai une autre police que je vais attraper tous ces gars. Je vais les dupliquer et je vais bien aligner et je vais les aligner ici. Il s'agit donc de vos outils d'alignement. L'avons-nous déjà fait ? Je ne sais pas. Pas si chaud que ça. Retournez la ligne, la ligne rouge. Je vais aller sur cette autre police que j'ai, dont je ne me souviens pas du nom. Il s'appelle quelque chose, et je pense que c'est tout. Voici mes polices, ma police marketing plus ludique et familière. Pas aussi facile à lire, pas bon pour la copie corporelle parce qu'elle a l'air trop petite, donc je vais m'en débarrasser, probablement celle aussi et c'est probablement le plus petit dont j'ai besoin pour l'utiliser dans un titre aussi. Mais pouvez-vous voir l'éligibilité de la rubrique 2 dans cette police ? J'ai choisi Bernina. Bernina sans contre celle-ci ici. Celui-ci doit être assez grand et ne doit pas essentiel à l' utilisation de vos diapositives. Je n'utiliserais donc pas cela comme navigation car c' est trop difficile à lire. Mais pour nos petits messages marketing cool tout au long, tant que nous l'utilisons bien et gros, je pense que tout va bien se passer. C'est ma police 101, vous pouvez totalement l' ignorer ou la prendre à bord, à vous de décider, mais maintenant vous savez. Passons à la vidéo suivante. 41. Comment créer des styles de personnages dans Adobe XD: Bonjour à tous. Cette vidéo parle de styles de personnages, choses réutilisables sur lesquelles on peut cliquer sur des morceaux et aller, hé tu es maintenant et ça, eh bien, c'est un blanc. [RIRES] Utilisons la version noire. Vous pouvez passer en revue, avoir des styles prédéfinis que vous pouvez utiliser et réutiliser. Je vais vous montrer comment les fabriquer. Nous allons également créer des versions blanches du texte. Ensuite, à la fin, nous ferons une petite partie de production de la vidéo où il n'y a pas tellement d' apprendre plus qu' à faire quelques trucs et je vais vous montrer quelques-uns des problèmes que je rencontre pendant que je travaille. C'est pourquoi cette vidéo est un peu plus spéciale. Oui. Allons-y, les styles de personnages. Pour créer nos styles de personnages , je vais laisser ça là-dedans. [RIRES] J'ai fermé ça. Je ferme souvent cela pour prendre des captures d'écran pour vous pour différentes choses pour les cours. Vous pouvez simplement cliquer dessus. se peut que vous fermiez accidentellement, il suffit de cliquer à nouveau dessus, de l' ouvrir. Nous avons surtout regardé les couches. Nous avons examiné un peu ce panneau Actifs. Nous avons essentiellement [RIRE] tout effacé. Mais vous pouvez voir ici certains de nos styles prédéfinis. Il y a notre style de personnage. Disons que nous avons décidé que ce sont nos rubriques et des choses nous pouvons simplement les sélectionner tous à l'aide de notre outil de sélection et aller, boum. Cela signifie que plus tard , lorsque nous tapons, et que je tape, vous pouvez dire que je veux que ce soit celui-ci, ou celui-là , ou celui-là. Ce sont vos styles de paragraphes. Vous pouvez les ajouter un à la fois ou en tant que grand groupe comme je viens de le faire. Vous voudrez peut-être ajouter à vous. Vous pourriez décider qu' en fait, au lieu de l' appeler ainsi, nous allons l'appeler peut-être « cap », quel était celui-ci, zéro, titre d'union [RIRES] Rubrique zéro, vous pourriez passer par et nommez tous ces éléments. Je vais quitter le mien tel qu'ils étaient. cool dans l'utilisation des styles, c'est évidemment que nous pouvons simplement cliquer et les taper, les toucher ici et choisir une taille différente. Cela signifie également que ce sera génial plus tard lors de la mise à jour. Le client revient et dit, pas question, mec. Je n'aime pas Bernina. J'ai besoin que ce soit autre chose ici. Ils vous envoient un courriel et vous partez, d'accord. Ce que vous faites, c'est de cliquer dessus avec le bouton droit de la souris et de dire Modifier. Vous pouvez dire que le client le veut, nous allons le lui donner. On y va. Une blague classique, une blague de papa. génial, c'est qu'il mis à jour ici et il a été mis à jour toutes les fois qu'il a été utilisé. J'aurais dû le faire un peu plus excitant. Nous défaisons. Si vous avez tout le temps, toutes les applications différentes, sur toutes sortes de pages différentes, allez la mettre à jour. blague [inaudible], ou du moins la partie excitante de tout ça. Les styles peuvent être facilement mis à jour, facilement ajoutés et renommés facilement. Je vais faire la même chose pour ces gars et ajouter ces trois. C'est à vous de décider à quel point vous voulez aller là-dedans. Vous pourriez décider qu' en fait, je vais avoir un autre groupe distinct et qu'ils seront tous blancs. Parce qu'il y aura beaucoup de cette application qui sera en version blanche. La même chose avec ça. Il va y avoir une version blanche. Selon que vous pensez qu'il va être puissant ou tout simplement désordonné ici. En fonction de votre nouveauté et façon dont vous pouvez le fermer, entrez dans le désordre. Ce qui est bizarre, c'est que si vous venez d'autres produits Adobe, nous utilisons des styles de caractères et vous devez les appliquer , pas les appliquer, cela ne s'applique pas à InDesign, Illustrator, Photoshop. Ce n'est pas comme ça ici. Disons que c' est Amatic bold 48. Si je le tape ici, ils ne sont pas liés au style et je tape [NOISE] et je le fais Amatic, et je le fais 48 et je rends audacieux et c' est probablement moins d' être cette couleur noire, même si ce n'est pas lié à un style, ce n'est pas comme ça que je faisais. Je me suis dit, comment appliquer le style maintenant que j'ai créé ? Tout simplement, si vous voulez modifier quelque chose dans ce document qui se trouve être la bonne police, la bonne couleur, ou la bonne taille, je peux simplement dire modifier et vous regardez, ça va tous les ajuster. Vous voyez juste la couleur de celle-ci et de celle-ci, il n'y a pas de reconnexion. Il ne fait que regarder dans le document tout ce qui se trouve avoir la bonne taille de police et la bonne couleur de police, etc. Vous pouvez voir qu'il n'a pas touché celle-ci là-haut parce que c'est la mauvaise couleur. Ça n'avait pas de sens. Juste pour les personnes qui utilisent styles de caractères dans d'autres applications, vous chercherez peut-être quelques détails, je ne sais pas, là où il n'y en a pas. C'est intelligent. Maintenant, l'autre chose que nous n'avons pas faite pour laquelle nous avons créé un style est ce style de paragraphe ici. Nous avons été dans cette boîte ici, cette largeur ne fait que s'étendre. Rappelez-vous que nous avons regardé cela plus tôt dans la classe. Pour un paragraphe, ce que je veux probablement, c'est cette case ici parce que ce que je veux faire, c'est coller cela quelques fois, c'est la hauteur de la ligne. Ce n'est pas ce que je veux. Mon style en ce moment a une hauteur de ligne de 45, ginorme. vôtre peut être réglé sur quelque chose de plus approprié. J'ai fini par déconner le mien à un moment donné. Vous pouvez faire demi-tour. ce qui est de la taille, encore une fois, il n'y a pas de taille exacte, mais environ la moitié de la taille de police, les plus petites tailles fonctionnent bien [RIRES] 1,5 puis dites 20. Ce n'est pas une règle scientifique. [RIRES] Je le reprends. [RIRES] Cette règle fonctionne bien lorsque vous travaillez avec des tailles de 8, 9, 10 points. Cela ne semble pas fonctionner aussi bien à 16 ans. Quoi qu'il en soit, décidez de la taille de police. Rappelez-vous, j'utilise juste ma flèche vers le haut et vers le bas, j'ai quelque chose comme si mon interligne est parfait. Ce que vous allez également devoir décider c'est les sauts de paragraphe. Nous n'avons pas vraiment regardé cela. Si je mets un retour , pour le moment, il y a un retour là, je clique sur Entrée sur mon clavier, mais il n'y a pas d'espace, pas d'espacement des paragraphes. Ce que je vais faire, sélectionnez-le et c'est l'option ici. Pour le moment, il n'y a aucun espace entre nos paragraphes. Il faudrait que tu fasses ça, le vieux tour du double retour. C'est trop gros. Ensuite, vous essayez de mettre en surbrillance ce texte et vous êtes comme si je le fais jusqu'à un certain point, cela fonctionnera-t-il ? Non. [RIRES] Ce que nous allons faire, c'est tout sélectionner et utiliser ceci pour espacer les paragraphes. Nous allons faire de cette police la moitié de la taille de la police. C'est ma petite règle. La moitié de la taille [RIRE] de la police est bonne pour l'espace entre les paragraphes, pas l'espace entre les lignes. Je vais prétendre que c'est ce que c'était de toute façon. [RIRES] Maintenant, ce que nous devons faire, c'est nous devons mettre à jour notre style de paragraphe. Nous allons probablement devoir le supprimer et le redémarrer. Je ne pense pas que nous n'ayons pas été en mesure de limiter cela. Allons vérifier ensemble. Vous pourriez simplement le modifier et le faire comme ça, mais ce que je vais faire, c'est simplement le supprimer , puis l'ajouter à nouveau. Cela soulève un bon point. C'est encore une fois modifié. Au lieu de cela, je vais appeler cette copie du corps. Vous pouvez les déplacer dans l'ordre en fonction votre niveau de TOC où ils doivent se trouver. Cela devient vraiment déroutant s'ils sont tous mélangés, cela vous donne un petit aperçu qui vous rapproche. Vous pouvez décider que c'est plus facile au lieu d' essayer de lire tout cela, vous pouvez appeler celui-ci H1. Nous en avons parlé plus tôt. En fait, c'est le théorème H. Vous allez appeler ça H2. Il peut compter. [RIRES] Celui-là va être h. Qu'est-ce que c'était ? Quatre est le plus bas. Je vais diviser le prochain. Vous pourriez décider cela [RIRES]. Je ne sais pas pourquoi je les ai tous trempés pour prouver. Mais c'est fini. Encore une fois, pas de règles exactes mais c'est pratique, surtout lorsque vous devez la mettre à jour plus tard, même si vous ne mettez pas officiellement tout cela ici et que vous avez juste besoin de mettre à jour un tas de polices pour sauvegarder celui-ci doit être mis à jour. Vous pouvez simplement modifier. Vous n'ajoutez que pour entrer ici pour le modifier. Vous pouvez voir que tous les éléments que vous utilisez sont mis à jour. Vous pouvez l'utiliser pour cela et vous pouvez certainement supprimer vos éléments et ne pas supprimer la police réelle, supprimer le style réel. Maintenant, vous allez simplement l'utiliser pour passer en revue et modifier l'intégralité de votre copie corporelle dans un document sans utiliser de styles. Très bien. Une autre chose que vous pouvez faire est que vous pouvez également ajouter une copie du corps en gras. Celle-ci ici, je vais ajouter une version. Ce type ici est une copie corporelle. Je vais créer une autre version qui est la version audacieuse de la mienne. Au lieu d'être étroit, irrégulier, je vais devenir un gras étroit, et je vais ajouter celui-ci, et je vais lui donner un nom de Body Copy Bold. Il est très courant de l'appeler aussi paragraphe. Cette copie corporelle, je ne sais pas. Body Copy Body, audacieux même, savoir [RIRES]. Très bien. J'ai ces deux versions. Quelque chose d'autre que je veux partager ? Oui, j'ai vérifié mes notes. Je veux que vous sachiez que vous ne pouvez pas l'ajouter deux fois. Celui-ci est déjà ce Body Copy Bold [RIRES]. Si je modifie à nouveau, regardez, un petit avertissement serait utile, mais cela signifie simplement que je suis déjà là, je ne m' ajouterai plus. Si je passe par et que je fais de ça un numéro bizarre comme 17 et que je peux éditer maintenant regardez [NOISE] là il est là. Effets sonores adorés. Pouvez-vous les traîner dehors ? Vous ne pouvez pas. Cliquez avec le bouton droit, supprimez-les. Je vais défaire ça en fait, alors je retourne à mon état normal. Une autre chose que je voulais partager avec vous, c'est que si vous venez d'autres programmes Adobe, que vous faites partie d'Adobe Land, vous êtes peut-être venu d'Illustrator ou d'InDesign, Premiere Pro, n'importe lequel d'entre eux. génial avec Adobe et leur système de bibliothèque, c'est que, supposons que vous ayez déjà quelques polices dans une autre, il se trouve qu'il s'agit d' Adobe Illustrator. Il peut s'agir de tout ce qui a des styles de personnages, InDesign, Photoshop, ce genre de choses. Ce que vous pouvez faire, c'est ouvrir vos bibliothèques dans n'importe quel programme que vous utilisez. Sélectionnez la chose, appuyez sur le petit « Plus » en bas ici et dites, oui, ajoutons ce style de personnage à ma bibliothèque. Je l'ajoute à cette classe appelée XD, et ça ne fonctionne pas avec les styles de paragraphe pour le moment, XD, je ne sais pas, je pense qu'il y a trop de complexité là-dedans. C'est ce que je suppose de toute façon. Cela pourrait changer à l'avenir, mais pour le moment, les styles de personnages se manifestent. Il y en a, c'est ce qu'on appelle un nouveau style de personnage. Si je vais dans XD, et qui se souvient de ce qu'est la bibliothèque ? C'est dans un endroit vraiment bizarre. Utilisé pour s'ouvrir dans son propre petit panneau. Maintenant, vous vous souvenez, vous allez cliquer sur cette petite flèche ici et vous vous retrouvez dans votre bibliothèque. Il y a mes bibliothèques, il y a mes atouts. Ajoutez des ressources dans mes bibliothèques et je vais trouver ma classe XD1, XD. C'est un style de personnage, vous, maintenant nous allons être quel que soit le style qui était, qui s'est avéré être Museo Sans Rounded taille 10, pas une taille appropriée, mais cela pourrait vous faire gagner du temps si vous avez déjà des bibliothèques, vous avez déjà des directives sur la marque dans certaines bonnes bibliothèques CC. Ces éléments peuvent être accessibles plutôt que de les recréer. Maintenant, vous vous demandez peut-être, est-ce qu'il fait ça chaque fois qu'il commence un nouvel emploi ? Obtient les couleurs officielles et toutes les polices et ajoute des styles ? Non, nous ne le faisons pas. Il peut être pratique de mettre à jour des choses au fur et à mesure. Vous avez peut-être déjà des directives de marque que vous devez suivre, alors oui, pourquoi pas ? Mais cela arrive souvent après avoir eu une idée du design. Vous les créez rétrospectivement pour que vous soyez cohérent, mais l'étape du concept pur quand tout est en désordre, non, je n'utilise pas trop de styles de personnages, mais cela ne prend pas longtemps avant Vous êtes comme, oh, je peux utiliser un style de personnage et cela vous arrivera éventuellement aussi. Ce petit peu plus loin, j'ai juste besoin de travailler pour ce cours afin que nous puissions aller de l'avant parce qu'à l'heure actuelle, il y a eu beaucoup de théorie. J'ai besoin de passer en revue certaines choses sur la page. Vous avez le droit de l'ignorer. Ces choses peuvent être pratiques. Cela aussi, je dis sauter tout le temps et il y a toujours des informations négatives si vous voulez vous accrocher. Je vais commencer à présenter ce qu'on appelle une carte. Vous avez vu au début qu'ils ne sont qu'une partie raisonnable des détails de mon produit. Je vais mettre en pratique certains de ce que j'ai appris. C'est ce que je vais faire. Je veux allumer mes colonnes. Je vais activer mes colonnes en cliquant sur son nom en haut de la touche fléchée. Passons à la grille de mise en page. Maintenant, selon ce que vous avez commencé, je regardais mon design et je veux un peu de rembourrage à l'extérieur. J'ai décidé de ne pas avoir à contenir beaucoup d' informations dans ma conception. Je vais passer à cette option à quatre colonnes. Ce que je vais faire, c'est que je suppose que je veux garder ça ici et pas seulement te montrer que tu devrais mendier. il est fluide en ce qui concerne la taille de cette protection , quelle marge voulez-vous ? Ça se résume à votre design. Je voulais ces colonnes car je les trouve vraiment utiles pour assurer la cohérence entre les pages. Vous pourriez décider qu' en fait, je vais juste l' exposer partout où je veux [RIRES]. C'est très bien. Cela va être un peu délicat pour votre développeur. Ce que je vais aller dans les quatre colonnes. Je veux combien de côté. Quand j'ai commencé ce cours ou ce design, j'allais tout pousser jusqu'aux bords. C'est pourquoi je peux ajouter un rembourrage zéro sur la marge sur les bords. Mais maintenant, je pense que je veux une marge à gauche et à droite. Je vais m'en servir. Je ne l'ai pas couvert parce que je ne l'ai pas fait, mais vous avez mis de la marge le long du haut, du bas, ou juste de la gauche et de la droite, c'est à vous ou vous voulez le faire. Il y a des informations négatives pour lesquelles vous traînez. Encore une fois, les multiples de huit sont très pratiques ici, donc 16 combien je fais réellement, 22 multiples de huit, 24 sur les bords et je pourrais ouvrir la largeur, la gouttière aussi pour dire 16. Je suis juste en train de regarder encore une fois. Peut-on vivre avec 24 ans ? On va y aller. N'oubliez pas que je peux en faire ma valeur par défaut. Sélectionnez tous ces types et allez utiliser valeur par défaut et probablement modifiez-le 20 fois de plus au fur et à mesure. C'est bon. Ce que je veux, c'est que je veux un rectangle montrant mon produit et jusqu'où dois-je le faire traverser ? Je vais totalement enfreindre mes règles d'une seconde à l'autre. Je le sais [RIRES]. Ce sera un espace réservé pour l'image. Je vais prendre mon outil de type. Je vais taper le produit qui frappe. Ce sera mes caractéristiques différentes de ce thé vert. Cliquez une fois. Que suis-je sur quoi ? J'étais sur un outil de cercle pour une raison quelconque. Prenons l'outil de type. Cliquez une fois, et ce sera Tencha Mimoto [RIRES]. Quelque chose à voir avec le thé vert. On y va. On a eu une taille douce là-dedans. Encore une fois, cela fonctionne pour moi. Copie du corps. Je vais prendre mon outil de type. Je vais cliquer et faire glisser une boîte. Je vais le mettre dans une copie corporelle. Je pourrais simplement répéter cela quelques fois. En fait, je pourrais faire tout le long de tout ça, faire s'aligner et faire une copie du corps où vous, accord, des styles vous amenant à commencer à utiliser nos colonnes. Nous obtenons une certaine cohérence dans le rembourrage. Cela commence dans le bon espace en utilisant certains de nos échantillons de couleurs. Laissez-moi y aller. On y va. Désactivez les colonnes maintenant. N'oubliez pas qu'il existe des raccourcis pour que les colonnes soient activées et désactivées. J'appelle ça des colonnes. C'est ce qu' on appelle la grille de disposition. Nous avons fait les carrés ou les colonnes. C'est ce raccourci fou. Le vôtre sera différent sur un PC. Maj, Commandement, Apostrophe. On y va. Ce que je veux faire, c'est avoir des multiples de cela, on y va. Nous allons regarder l'espacement. Je vais juste ajuster ça. Faisons-le en mode super rapide. Très bien, rencontrez mon premier problème. C'est juste, mais je vais probablement trouver quelque chose de plus long. Je vais ignorer ce problème pour le moment. Je devrai peut-être dans cette police particulière, passer à quelque chose comme 44 ou quelque chose plus tard, mais nous verrons ce que nous rencontrons alors. Pour le moment, je suis content. Je ne me souviens pas pourquoi nous avons commencé cette vidéo. Que faisons-nous ? Nous faisions des styles de personnages. C'est pourquoi [RIRES] ça m'a pris du temps. Nous avons fini par faire un peu de vidéos de production où nous devons faire des choses et, espérons-le, vous montrer quelques informations sur les choses, pendant que vous travaillez, peuvent s'adapter et changer au fur et à mesure. Très bien, c'est tout pour cette très longue vidéo, et je vous verrai dans la prochaine. 42. Plugin - Ajouter notre premier plugin Lorem Ipsum à Adobe XD: Bonjour à tous. Dans cette vidéo, nous allons installer notre tout premier plugin dans Adobe XD. Que sont les plugins ? Les plugins sont des choses qu'Adobe XD ne fait pas seul, quelqu'un d'autre qu' Adobe les a créés, et ils font des choses comme dans ce cas, apporter des icônes, apporter des faces d'interface utilisateur, du texte réservé. Il existe de nombreux plugins différents pour étendre Adobe XD au-delà de ce qui se trouve dans le système. Je vais vous montrer comment les installer. Nous allons travailler avec ce Lorem ipsum, qui est un texte réservé. Pour nous, dans ce cas, nous allons définir une copie du corps d'écriture encore et encore. Nous allons ajouter des mots latins mélangés qui ressemblent à de bonnes phrases sans qu'ils soient réellement des phrases réelles. Installons notre premier plugin. Pour faire fonctionner les plugins dans Adobe XD, ici nous avons examiné les couches, nous avons examiné nos ressources, un panneau avec des styles de caractères différents. Regardez ce dernier ici, plugins. Rien ne se passe vraiment. Cliquez sur « Plus » ou cliquez sur « Discover Plugins ». Ça va ouvrir cette chose. Il s'agit de l'application Creative Cloud. Si vous ne l'avez pas encore installé ou qu'il n'est pas ouvert, donnez-lui une seconde. Vous pourriez penser, est-ce que ça fait quelque chose ? Il faut juste un peu de temps à charger. Cette chose change. Ils réorganisent un peu cela. Donc, je me suis retrouvé sur ce stock, cette marché et les plugins. Vous pouvez effectuer des recherches à ce sujet. Pour le moment, il y a des vedettes. Je veux regarder tous les plugins. Maintenant, si vous ne trouvez pas l' écran de Creative Cloud, vous n'avez pas installé l' application, vous devez installer l'application Creative Cloud, mais vous pouvez y accéder via le navigateur Web. Accédez à exchange.adobe.com, et nous avons affaire à Creative Cloud. Ici, vous pouvez trouver des choses comme, ici, trouvons des choses pour XD. Vous pouvez trouver différentes extensions ou plugins pour cela ici. Nous allons suivre la bonne voie via l'application Creative Cloud. C'est le commander par le plus populaire, ce qui est pratique. Ceux qui ont de bonnes étoiles puis sont téléchargés, ce sont souvent les meilleures. Mais il y a des centaines de personnes différentes à traverser. Alors, passez un peu de temps, regardez un peu et vous pourriez être comme, je l'utilise ou j'utilise celui-là. Vous pouvez connecter d'autres flux de travail que vous faites peut-être à ce que vous faites ici dans XD pour gagner du temps comme s' il y en avait un miroir. J'utilise beaucoup les panneaux de miroirs pour le travail. Celui que nous allons utiliser, c'est Lorem ipsum. Lorem ipsum, si vous n'en avez pas entendu parler auparavant, n' est que du texte réservé. C'est là que tu y vas. Cliquez sur « Installer », acceptez leurs termes et conditions et éventuellement il vous indiquera, regardez cela. Il est maintenant installé. Si vous retournez dans XD, il y a lui. Le voilà. Pour que cela fonctionne, vous devez d'abord définir et envoyer un texte parce que j'ai utilisé la copie corporelle, copie corporelle. Ce n'est pas amusant. Si vous frappez ceci et que vous frappez celui-ci ici dit : « Quick Lorem ipsum », et il va juste jeter quelques trucs de base. Êtes-vous d'accord avec cela ? Vous êtes d'accord. Vous n'avez pas le choix [RIRES]. Donc, il a été ajouté. Ce sont des mots latins, mots réels simplement mélangés, donc ils n'ont aucun sens. Il est tout simplement facile lorsque vous envisagez de les utiliser comme espaces réservés plutôt que de texte réel car vous n'avez peut-être pas de texte provenant du client ou que vous finissez par discuter avec le client sur, vous ne pouvez pas écrire ça ici et vous êtes comme, ne vous inquiétez pas pour les textes, c'est juste un espace réservé vous donner une idée de conception. Vous pourriez passer par là et vous aller, simplement devenir cela. Vous pouvez voir qu'il utilise mon style. Il n'est même pas nécessaire que ce soit un style. C'est juste utiliser ce qu'il y avait dans cette boîte pour qu'il fonctionne. Si vous n'avez rien sélectionné, vous obtiendrez tel ou tel. Oui, aucun texte n'a été sélectionné. Faites d'abord sélectionner quelque chose. Je ne vais pas passer par tout ça. Eh bien, je vais passer par un petit bout de celui-ci. Ce « Quick », va juste jeter tout ce qu'il est et essayer de le faire correspondre. Il y en a le premier ici. Vous pouvez faire des trucs plus fantaisistes comme, voulez-vous que ce soit Lorem ipsum ? Il y a d'autres textes d' espace réservé et vous pouvez décider, je veux en finir avec la ponctuation de l'arrêt complet. Voulez-vous aussi des sauts de ligne là-dedans ? Voulez-vous découper la zone de texte pour qu'elle soit ajustée ? N'oubliez pas que nous avons cette hauteur automatique. Il pourrait le couper pour qu'il s'adapte parfaitement. Je viens d'ajouter un arrêt complet. Vous apprendrez à connaître différents plugins comme celui-ci ici pourraient ne pas être là quand vous venez vérifier, ou il pourrait s'agir d'une autre application de texte d'espace réservé génial que vous choisissez, ou est-ce le le top du populaire ? Il y en a ici, ils fonctionnent tous légèrement différemment. Celui-ci possède même un raccourci. Regardez-moi ça. C'est tout pour ce plugin particulier. Nous en ferons quelques autres tout au long du cours. Si vous devez vous en débarrasser , vous pouvez cliquer dessus avec le bouton droit et le gérer et cela ouvrira votre Creative Cloud. Dans mon cas, c'est là. Je peux le désactiver ou le désinstaller et/ou le supprimer. C'est comment en ajouter un et c'est comment le supprimer . Mais ils sont amusants. Vous y trouverez des trucs qui se connectent à d'autres applications, faisant des choses qu'Adobe XD lui-même ne fait pas encore. Certains d'entre eux que j'ai eu au début, il y avait beaucoup de plugins que j'ai utilisés dont je n'ai plus besoin parce qu'Adobe XD, je suppose, regarde certains de ces plugins et va, mec, c'est téléchargé un million de fois. Les gens aiment ça, nous devrions probablement intégrer dans l' application et c'est ce qui arrive. Mais nous en ferons quelques autres tout au long du cours. Mais pour le moment, c'est tout. C'est l'installation de notre tout premier plug-in. Vidéo suivante. 43. Projet de cours 08 - Texte: C'est l'heure du projet. Je vais vous amener à arriver à ce stade. Dans vos projets de classe, vous verrez Class Project 8. Je vais devoir créer un logo. À vous de décider. Vous pouvez le faire très simple comme moi. Je viens d'utiliser ma police et j' utilise une version audacieuse et une version légère. C'est le plus fantaisiste que je vais y aller. Mais si vous souhaitez passer un peu plus de temps à créer un logo cool pour votre marque, veuillez le faire. Ensuite, je veux que vous créiez sur votre page d'accueil. Je veux que votre page d'accueil ait simplement votre message marketing. Il va falloir y penser pour votre entreprise. Celui que vous avez reçu plus tôt de ce générateur de projet aléatoire, donnez-lui un message marketing. Vous pouvez copier celui de quelqu'un d'autre. C'est juste un produit de remplissage. Pour le moment, vous n'y croirez pas. J'ai préparé le mien avec un beau thé vert à votre porte. Unique à moi, je sais. Créez quelque chose ici. Essayez d'utiliser quelques polices différentes car ce que je veux que vous fassiez c'est en partie m'envoyer cette pile ici. Même si vous n'êtes pas obligé de faire cette étape du projet, ce que je veux faire c'est simplement vous faire faire ces choses et je veux que vous vous assuriez tous les deux qu'ils sont dans votre bibliothèque de ressources et vos styles également. Pratiquez cela, ajoutez-les là-dedans. Prenez une capture d'écran et une capture d'écran de ces deux pages. Cette page est légèrement différente. Nous allons voir ça un peu de devoirs en dehors de ce travail, un projet de recherche. J'ai déjà parlé de cartes. Je veux que vous recherchiez ce qu'est la carte d'interface utilisateur ? Jetez un petit coup d'œil et vos devoirs durent 10 minutes. Va dépenser et lire un peu à ce sujet. Il y aura beaucoup de termes que j'ai utilisés dans ce cours que vous allez suivre et qui sont nouveaux pour moi, nouveaux x, et c'est en dehors de ce cours pour passer par chaque terme. Alors, allez faire des recherches. Je veux que vous compreniez ce qu' est une carte, à quoi elle sert. La version courte est que ce sont ces pépites d'informations réutilisables. J'ai quelques exemples dans vos dossiers d'exercices. Ils sont là. Exemples de cartes d'interface utilisateur. J'en ai attrapé quelques-uns. Vous avez une idée de ce qu'ils sont. Ceux-ci reproductibles et vous pouvez les rendre uniques. Cela signifie simplement qu'ils s'intègrent sur un site Web. Ils peuvent être structurés et décomposés manière réactive pour différents appareils. Mais faites quelques recherches sur ce qu'est une carte d'interface utilisateur. Jetez un coup d'œil à certains de mes exemples. Je veux que vous proposiez la vôtre pour votre marque. Je suis parti pour quelque chose de simple. J'ai tiré le regard, ne suivant pas mes guides, tiré ça des bords là-bas. J'ai ajouté une ombre portée. Je ne veux pas encore que vous fassiez trop de travail de design. Mais l'ombre portée est facile à activer et à désactiver. Nous examinerons d'autres effets plus tard dans le cours, mais nous aurons quelque chose, aurez au moins trois choses différentes pour votre produit. Vous n'êtes pas obligé d'y penser aussi. Je les ai empruntés à un concurrent juste pour avoir quelque chose à utiliser. Ce seront des images lorsque nous entrerons dans cette partie du cours. Vous faites de même pour les cercles d'espace réservé ou les carrés. Je veux que vous installiez également votre tout premier plug-in. Il y a beaucoup de choses à faire pour celui-là. Page d'accueil à l'espace réservé aux messages marketing, créez vos propres styles de texte dont nous avons parlé , installez un plugin. L'espace réservé Loren Ipsum. Ce n'est pas forcément le gain que j'utilise, mais quelque chose que vous pouvez utiliser pour combler ces lacunes. même utilisé ces titres de produits comme des titres spécifiques, comme aller et j'ai trouvé certaines fonctionnalités votre produit pour que vous ayez contenu en cours et que vous recherchiez les cartes d'interface utilisateur, créez ces petites fiches de fonctionnalités. et une capture d'écran de ça, une capture d'écran de ça. C'est ce que vous devez vraiment faire pour envoyer. Nous sommes enfin en train de passer d'être comme tous ces trucs jusqu'à présent n' est que des projets de recherche et pas très stimulants visuellement. Maintenant, nous sommes visuellement stimulants et je veux que vous le partagiez maintenant via les réseaux sociaux. Il existe un compte Instagram, un compte Twitter, un groupe Facebook et LinkedIn. À vous de décider comment vous voulez le faire et me taguer sur Instagram ou Twitter. Le groupe Facebook est assez incroyable, le groupe LinkedIn pour partager vos conceptions et demandé des commentaires si vous vouliez dire « paye », c'est ma toute première chose et jamais dans UX ou Adobe XD. que pensez-vous les gars ? Soyez prêt à être critiqué confortablement comme ces endroits ici, j'ai l'impression que nous avons un très beau sentiment d'être, oui, ce n'est pas un style Reddit impitoyable, impitoyable. C'est un groupe sympa rempli de gens comme vous qui commencent. Aussi, pendant que vous y êtes, assurez-vous de commenter celui de quelqu'un d'autre, car en partie, en devenant un bon concepteur, UX designer est capable d'identifier le travail d'autres personnes, des choses que vous aimez vraiment, que vous pourriez enlever pour votre propre chose ou être capable critiquer d'une manière qui ne fait pas pleurer les gens. C'est quelque chose que vous pouvez pratiquer là-bas aussi. À propos de ramener d'autres personnes comme ce que vous avez entendu. Si c'était moi, je chercherais probablement à faire X, Y et Z. C'est l'ambiance que nous avons dans ces groupes. Essayez donc à la fois de télécharger votre travail et de le livrer à d'autres personnes, car c'est une grande partie du métier de designer. Il est capable de répondre aux critiques sans trop pleurer. Je pleure encore, ne vous inquiétez pas. Va faire tes devoirs, beaucoup à faire. Je vous verrai dans la vidéo suivante. 44. Dessiner et modifier les formes dans Adobe XD: Bonjour à tous. Cette vidéo nous allons créer des formes simples à l'aide des outils de forme d'Adobe XD. Je vais vous montrer quelques-uns des secrets de l'outil polygone et comment accéder à un mode d' édition d'objets pour personnaliser certaines de ces formes. Allons-y. Faisons un dessin. Je travaille juste sur ce plan de travail vide ici. Nous allons commencer par l'outil Rectangle. Nous en avons déjà fait un peu, donc j'ai ce rectangle. Qui se souvient de ce que je maintiens sur mon clavier pour aller directement à ce qu'au moins le carré. Vous l'avez maintenu « Maj » enfoncé, avant que je commence à faire glisser, faites-le glisser vers l'extérieur et vous obtenez un carré parfait. Je ne veux pas de carré [RIRES]. Je veux quelque chose qui ressemble à ça, ce sera cette petite icône de prix taggy. Maintenant, l'une des choses intéressantes concernant les formes dans Adobe XD est que vous pouvez faire des choses comme les coins arrondis, il suffit de les faire glisser vers l'extérieur. Mais si vous vous retrouvez en mode d'édition d'objets, je ne sais même pas s'il a un nom. C'est ce que j'appelle ça de toute façon. Si je prends mon outil Sélection et que je double-clique dessus, il se peut que vous soyez ici tout le temps par accident parce que vous faites un double-clic. Vous aimez double-cliquer sur les choses, vous êtes comme ça changé, cliquez en arrière, sortez du mode d'édition d'objet, revenez. Pendant que je suis dehors. J'ai tout ce joli contrôle parce que c'est ce qu'on appelle une forme primitive, il le sait. L'ordinateur le sait, c'est un rectangle, et en tant que tel, je peux y faire des trucs de coins arrondis. Mais si vous entrez ici et que vous modifiez cela, regardez ceci. Lorsque je suis dans ce mode d'édition d'objets, qui dit que ces choses sont points d'ancrage et que je peux me déplacer. Hey, faites glisser ces petites poignées pour changer le type de courbe. Vous pouvez entrer dans n'importe quelle forme, double-cliquer dessus, commencer à déconner ici et à l'estimer totalement. Le problème, c'est que si je sors en cliquant simplement en arrière-plan et que maintenant je clique dessus, ces coins arrondis, vous savez que je n'ai pas raté celui-ci. Le XD va, je ne sais plus ce que vous êtes. [RIRES] Est-ce que c'est ça ? Je sais, on appelle ça un sachet de thé. On dirait un sachet de thé, mais je n' ai plus ce contrôle. C'est donc le seul inconvénient de passer en mode d'édition d'objets et de manquer, mais nous devons créer nos propres icônes et formes personnalisées, et je vais annuler cela jusqu'à ce qu'il soit de retour. Je sais que c'est de retour parce que ces choses apparaissent à nouveau. Je vais m'en débarrasser, car ce que je veux faire, c' est double-cliquer dessus et aller ici et ajouter un point. Je suis là-dedans, je peux le modifier, modifier des points existants, mais regarder ça. Si je survole cette petite icône, c'est l'outil stylo sur lequel je peux cliquer une fois, et ça me donne un point, regardez que je peux le faire glisser vers le haut. On y va. Ma petite maison balise de prix. C'est le mode d'édition d'objets, pour s'en sortir, il suffit de cliquer n'importe où en arrière-plan et maintenant c'est une ancienne forme classique qui est plus difficile à détruire. Un petit cercle ici, qu'est-ce qu'on maintient pour le rendre parfaitement rond ? C'est vrai, « Shift ». Je vais à l'outil Sélection, qui est la touche V. Sélectionnez « V », sélectionnez les deux, je vais dire que vous êtes aligné verticalement. Je l'ai dessiné parfaitement, joli. L'autre chose à savoir sur les objets car vous pouvez les faire pivoter. Je les ai sélectionnés à nouveau, rappelez-vous, vont le redimensionner et juste à l'extérieur d'ici, c'est là, c'est comme un no man's land, pas là, pas là, car c'est comme un petit rond , vous pouvez cliquer et faites-le glisser. Je vais réduire le mien en maintenant « Shift » et en le faisant glisser. Tu te souviens de l'AVC ? C'est bon. Je suis d'accord avec cette taille. La prochaine chose que je voulais faire, c'est que je veux aller voir certains de ces autres outils. Donc carrée, cercle, celle-ci a des capacités spéciales. Nous avons dessiné une pointe de flèche plus tôt dans le cours. Même chose, maintenez « Shift » pour obtenir un parfait équilatéral. Je ne sais pas comment ça s'appelle. [RIRES] Les mêmes tailles. Vous obtenez un triangle, le triangle possède des capacités secrètes. C'est comme un petit groupe ici. Ou si vous survolez, vous pouvez voir celui-là, vous voyez une petite icône ? C'est une star. Jetons un coup d'œil, alors les côtés sages allons y aller 14, décagon. Je ne vais même pas deviner ces [RIRES] Je suis si mal à ça. J'ai aimé les maths, pas très bon pour ça, cinq c'est mon hexagone, le Pentagone. Je vais arrêter de deviner. Mais il suffit de taper à l'intérieur et vous pouvez obtenir différents côtés. L'autre chose que vous pouvez faire, c'est cette étoile ici, celle-ci ici. Si vous le tapez, allons faire 10 % d'étoiles épineuses. Je vais y aller, disons cinq, et je vais y aller 50 pour cent , cinq côtés, 50 pour cent d'étoiles vous donne étoile traditionnelle que nous allons utiliser pour notre petit vote cinq... critiques d'étoiles, que vous devriez laisser au fait sur ce cours. Jetons un coup d'œil. Une des options qu'il a est ce coin arrondi donc je mets ses pixels, c'est probablement un peu beaucoup, beaucoup de ces contrôles sont en fait dessus. Pouvez-vous voir si je zoome avant ? Il y a ce bout ici qui est l'encart d'étoiles, voyez-vous et celui-ci ici, qui est pointu à quel point il est pointu. Vous y allez, donc vous voulez juste un peu de là et commencez à ressembler à ça. Je vais y aller. On y va. Ce sont donc les secrets du triangle, ou je pense qu'il s'appelle l'outil polygone. C'est parce que ce sont tous des polygones. Les dernières choses avec des formes. Eh bien, je pense qu'un autre avec la sélection, vous pouvez aller à l'objet et il y a sous Transform, vous pouvez retourner horizontalement, verticalement ou cela ne fait rien pour une étoile parce qu' elle est symétrique alors, [RIRES] C'est comme celui-ci, et il n'est pas groupé, et il est donc Object, Transform Flip Horizontally. On y va. Il y a un retournement verticalement, mais vous comprenez l'idée. C'est ainsi que vous pouvez le faire si nécessaire. C'est la base de la création de formes. Vous pouvez double-cliquer dessus pour y accéder et les ajuster. Mais vous perdez une partie de ce contrôle comme nous l'avons fait avec ce genre de choses avec l'étoile. C'est créer des choses simples avec des formes de dessin. Sur la vidéo suivante. 45. Écurie avec les formes dans Adobe XD: Bonjour à tous. Cette vidéo est bizarre dans Adobe XD. Ce sera essentiellement autour de ça, ce qui est que si je baisse ça, ça se transforme en ce blob. Plus tôt dans le cours, Dan nous a montré un moyen de cliquer avec le bouton droit de la souris pour dire Contour, cela va vous donner des résultats encore plus bizarres. Je vais vous montrer comment les contourner, alternatives pour Outline Stroke, et je vais faire de mon mieux pour l'expliquer. C'est délicat, mais commençons . Prenez le numéro 5. [RIRES] Je l' ai enregistré tellement de fois. C'est difficile à expliquer ; il s'avère que c'est bizarre, donc c'est bizarre à expliquer. Vous ne savez pas que j'ai fait cinq fois, mais [RIRES] vous obtiendrez probablement de mon comportement maniaque que je l'ai déjà fait quelques fois. Concentrons-nous, passons là dedans. Quel est le problème ? Oublions toi. Les choses me posent un problème, [RIRES] alors espérons que cela résout le problème. J'ai une étoile, elle doit remplir une bordure. J'ai des coins arrondis, vous pouvez voir. Où est mon petit coin arrondi ? Il est là. Il y est là. Il a cinq arêtes, et il a un ensemble standard de 47 pour cent et il a des coins arrondis de deux. Je veux le rendre plus petit, donc je vais le dupliquer , le réduire. Que se passe-t-il ? Nous avons rencontré cela plus tôt dans le cours. Vous vous rappelez quand nous avons essayé de mettre des choses à l'échelle et que l'accident vasculaire cérébral ne s'est pas accompagné ? Nous utilisons la méthode qui ne fonctionne pas actuellement, mais cette mise à l'échelle par défaut est vraiment utile lorsque nous utilisons éléments comme l'outil Rectangle. Outil Rectangle, nous ajoutons quelques coins arrondis, puis nous l'utilisons pour nos cartes, nos boîtes ou nos boutons, puis nous fabriquons une taille différente. Taille différente ; un très grand, et vous pouvez voir qu'il conserve les coins arrondis. Cela arrive aussi à notre star. Cela arrive à quelques formes différentes dans XD, et cela peut être un peu bizarre. Ce que nous n'avons pas passé pour le verrouiller et cela fonctionne maintenant, est que nous avons cliqué dessus avec le bouton droit et avons dit décrire le trait, puis ce que nous avons fait, c' est que nous l'avons réduit. C'était génial tant qu' il n'y avait pas de remplissage. Que se passe-t-il ? C'est une partie de la bizarrerie. Ce qui se passe, c'est que lorsque vous décrivez un trait qui a un remplissage, il le sépare simplement, donc mon remplissage est détaché du trait autour l'extérieur ou de la bordure dans ce cas. C'est une chose, vous dites  : « Je peux m'en débarrasser. » Il suffit de l'épingler et de le réduire , et tu te dis : « Super ». Maintenant, je vais juste le remplir. Pourquoi ne se remplisse-t-il pas ? Il a été converti en remplissage. Tout ce processus consistant décrire le trait essentiellement ce qu'il fait, c'est qu'il transforme votre trait en deux parties ; remplissage, puis cette chose, et c'est aussi un remplissage. Si je double-clique dessus pour passer en mode d'édition, c'est difficile à décrire, mais cela ressemble maintenant à un trait, mais c'est en fait un remplissage. C'est juste un beau remplissage fin ici. Je ne peux pas ajouter de remplissage, je peux y ajouter une bordure . Regardez-moi ça. Je peux y ajouter une bordure latérale bizarre. Rendons-le encore plus petit pour que vous puissiez le voir. Je peux ajouter une bordure à l' extérieur à mon remplissage comme je peux avec toutes les autres formes mais ce n'est pas ce que je voulais ici, alors comment contourner ça ? Je vais vous montrer une autre façon d'aborder cela. Si ça ne fonctionne pas et Outlines Stroke vous donne un comportement bizarre, je vais refaire la même chose. Au lieu de cliquer avec le bouton droit sur «  Contour de contour », utilisons une autre façon. Avec elle est sélectionnée, allez dans Object et allez dans Path. Il y en a un qui s'appelle Convertir en chemin. Cliquons là-dessus. Ce qui finit par arriver, c'est que cette chose ici vient de briser tous les coins arrondis. Si je défais, [BRUIT] J'ai tous ces beaux trucs qui disent que j'ai cinq côtés, j'ai des coins arrondis, j'ai un ensemble standard. Si je vais à Object, et que je vais dans Path, et que je dis Convertir en chemin, cela brise tout ça comme ce que nous avons fait mode d'édition d'objet, lorsque nous avons fait la balise dans la dernière vidéo. Cliquez dessus, ça ressemble à ça. Il a toujours une taille de planche, mais cela signifie que lorsque je l'escalade dans les coins arrondis, je viendrai dans le bon sens. J'ai toujours le problème avec sa taille, donc je vais devoir faire une bordure appropriée dessus, mais au moins mes coins arrondis ne seront pas affectés. Cela fonctionne de la même façon si vous avez un carré avec un coin arrondi. Il y a toujours ces coins arrondis , vous voulez les casser. Allez dans Object, et vous allez dans Path, et vous dites Convertir en chemin au lieu de cette belle chose appelée primitive qui est réglable. Maintenant, si je l'ajuste, regardez, ce n'est pas tout à fait ce que je veux avec un rectangle, mais j'espère surtout parce que nous allons dessiner plus en plus d'icônes, il y aura des moments où vous êtes comme, « Oh, pourquoi ne ferais-tu pas ce que je voulais faire ? » convertir en chemin d' abord peut être agréable. Parfois, le tracé peut être bon lorsque vous souhaitez séparer le remplissage de l'extérieur, puis la bordure autour l'extérieur est modifiable et vous pouvez le traiter comme un remplissage. Je vais m'arrêter là. J'ai l'impression que j'ai pu le faire. J'ai l'impression que ça l'a peut-être expliqué, je ne vais pas continuer à parler [RIRES]. Nous allons le refaire pendant le cours, ne vous inquiétez pas. Mais sachez qu'il n'y a pas qu'un simple contour, il y a aussi Convert to Path. Un ou deux d'entre eux fonctionneront pour vous. C'est une prise, c'est un peuple de rap. J'ai eu besoin d'une pause. La bizarrerie dans Adobe XD, réalisée pour le moment. C'est peut-être moi qui l'ai fait pour la journée. Je vous verrai dans la prochaine vidéo. 46. Apprendre à dessiner avec l'outil stylo dans Adobe XD: Accrochez-vous tout le monde sur vos chapeaux, nous allons dessiner des formes étonnantes à l'aide de l'outil Stylo. Nous allons aller un peu mieux avec celui-ci en bas, mais je suppose que je veux présenter l'outil Plume car c'est l'un des outils et vraiment utile dans Adobe XD. Il ne s'agira pas d'un tutoriel complet sur tout ce que l'outil Plume peut, ni d' une introduction pour commencer. C'est un outil pratique si vous ne savez pas comment l'utiliser. Laissez-moi vous montrer comment. Nous allons commencer par l'outil Plume. C'est comme un petit stylo plume ici. Vous avez deux modes. Il y a un clic une fois pour vous donner un point d'angle. Finalement, vous voulez le terminer en le complétant et en regardant ceci. On se rapproche du bord et ça va éclater [RIRES] Je ne sais pas d'où vient cet effet sonore, c'est nouveau pour ce cours. [RIRES] Mais vous pouvez le voir, il se connecte et vous cliquez une fois et il rejoindra tout cela. Ensuite, vous pouvez ajouter un remplissage. Je vais me caresser. Vous pouvez simplement cliquer partout. Le problème , c'est qu'il y a lignes droites, mais elles ne sont pas très parallèles, alors passons ça ici. Prenons à nouveau l'outil Plume. Si je maintiens « Maj » pendant que je clique, alors maintenez la touche « Maj » enfoncée, je peux cliquer une fois et vous pouvez le voir verrouiller dans des angles de 45 degrés, ce qui signifie que je peux vous y aller. Je vais dessiner une petite maison à 45 degrés. C'est ma petite maison. Vous y allez. Il y a ma petite maison, choisissez une couleur différente. Voici quelques bons choix de couleurs ici. En cliquant une fois, vous obtenez un coin. L'autre chose qu'il fait est de vous laisser faire des courbes, donc je vais essayer de dessiner un cercle. qui est bizarre avec l'outil Plume, rappelez-vous que si vous voulez aller plus loin avec cet outil Plume, c'est comme une introduction de base rapide, et l'outil est principalement utilisé dans quelque chose comme Adobe Illustrator. Vous voudrez peut-être consulter mon cours à ce sujet, éléments essentiels d' Adobe Illustrator ou le cours de quelqu'un d'autre ou apprendre en ligne comment utiliser l'outil Plume , mais c'est l'essentiel. Je vais dessiner un cercle. Je vais cliquer, maintenir et faire glisser. En cliquant une fois, vous obtenez un coin. Si vous cliquez sur maintenir et glisser vous donne ce truc dans les virages. Cliquez sur maintenir et faites glisser, un cercle bancal arrive. Cliquez sur maintenir et faire glisser, et vous pouvez le faire glisser accidentellement de la mauvaise façon et cela fait des choses bizarres. Parfois, vous devez le traîner et continuer à le remuer. On y va. Ensuite, ici, ce que vous voulez vraiment faire, c'est simplement cliquer dessus une fois. Mais que se passe-t-il lorsque vous cliquez une fois ? Vous obtenez ce point d'angle et ce n'est pas ce que nous voulons. Pouvez-vous voir que ce sera un coin moche. Encore une fois, même avec la version terminée, cliquez sur maintenir et faites glisser le curseur. On y va, un cercle bancal. [RIRES] Qu'est-ce qu'on a d'autre ? Je ne l'ai pas sélectionné. Sélectionnez-le, donnez-lui un remplissage. Si vous souhaitez modifier l'un de ces points, rien ne fonctionne. Pourquoi n'aurais-tu pas de remplissage ? Remplissez s'il vous plaît, maintenant vous avez un remplissage et nous y allons. Oh, c'est là-bas. Ecoutez, il y avait du blanc. [RIRES]. Il suffit de le faire glisser là-bas, puis tu cries probablement à l'écran, il fait mal et on y va. Tout va bien dans le monde encore. Si vous voulez modifier l'un de ces éléments, nous devons aller à l'intérieur et les modifier car avec la flèche noire, si je clique en arrière-plan, cliquez dessus une fois, nous pouvons simplement redimensionner ce truc. Maintenez la touche Maj enfoncée pour redimensionner la hauteur et la largeur proportionnellement afin qu' elles soient mises à l'échelle de haut en bas. Mais qui se souvient comment je rentre à l'intérieur et que commence à travailler sur ces points d'ancrage ? Nous l'avons fait plus tôt, donc je double-clique dessus. Pouvez-vous passer en mode d'édition d'objets ? Vous pouvez ensuite entrer ici et y aller. C'est un peu comme ça et cela doit probablement être un peu en bas. Si vous voulez qu'il soit courbé mais qu'il soit courbé, vous les rapprochez du point d'ancrage. Toujours courbé, cliquez dessus mais [RIRES] Je ne suis pas aussi bon. Ce sont trois formes moches. Faisons quelque chose d'un peu plus joli. Dans mon cas, ce sera une feuille de thé. Lorsque vous dessinez vos propres icônes, cela sera relatif à votre entreprise pour laquelle vous travaillez. Mais nous allons combiner les deux, mais il courbe un peu les coins d'extrémité. Encore un outil stylo. Je vais juste le faire et nous le ferons une deuxième fois. Je vais cliquer une fois pour un coin parce que je voulais avoir une feuille de thé pointue en haut. Ensuite, je vais cliquer sur le maintien et le faire glisser pour un peu arrondi. Ensuite, ici, même si ce n'est pas parfait, je suis comme, ce n'est pas parfait. Je vais cliquer une fois pour un coin. Souvent, vous obtenez simplement les points , puis vous les modifiez plus tard. Ici, je veux que ce soit une autre courbe. Cliquez, maintenez et faites glisser, puis revenez ici, je veux que ce soit un joli petit coin pointu. Cliquez-vous et faites-vous glisser pour un coin ou cliquez une fois pour un coin ? Vous l'avez eu. Vous cliquez une fois. On y va. Il y a une feuille de thé maladroite. Je vais accéder à mon outil de sélection et je suis déjà en mode d'édition d'objets. Mais si vous cliquez sur le bouton désactivé et que vous cliquez de nouveau, vous double-cliquez dessus. On y va. Ensuite, ce type en bas, ici, allons-y. Je peux le déplacer plus petit. N'ayez pas peur de déplacer le point d'ancrage réel également ici. C'est mon petit truc à feuilles de thé. Ce que je pourrais faire, c'est en avoir un double alors copier-coller, donc les deux. Celui-ci va être vert parce qu'il s'agit d'une feuille de thé. Mais je vais utiliser ma couleur peu de feuille de thé. [RIRES] Plus de thé feuillu. Ça va mieux. Celui-ci va être rempli de blanc sans bordure. Vous n'aurez pas de frontière. Où est allé ce type ? Il est là. Faissons-le plus petit. Je ne fais pas de changement dans ce cas parce que je veux les déformer, donc je ne fais que le traîner. Je ne tiens pas les membres de quart de travail et de rotation juste à l'extérieur, donc c'est mon petit truc feuilleté de thé. Pourriez-vous le faire en une seule fois ? Vous pouvez, quand vous allez mieux, juste pour que vous le sachiez, l'outil Plume est probablement la chose la plus difficile à apprendre sur Internet. C'est délicat pour ceux d'entre vous qui savent et peuvent l'utiliser, vous serez assis là à aller de l'avant. Je sais comment l'utiliser [RIRES] mais il m'a fallu du temps parce que c'est clair. Si vous êtes nouveau et que vous rencontrez des difficultés. n'est qu'une partie de l'outil Plume. Il faut beaucoup d'expérience. En dehors de ce cours, faites beaucoup de pratique, mais je voulais vous donner quelques bases pour que vous puissiez au moins essayer. J'allais le faire maintenant, je clique une fois pour un coin, clique et fais glisser, descends ici, je clique une fois. Je vais faire une courbe ici, cliquer une fois, aller découper ici donc au lieu d' avoir deux formes distinctes, voyez-vous que je peux commencer à le faire maintenant. Ce n'est pas parfait. Ne cliquez pas et ne faites pas glisser, cliquez une fois. Si la ligne ne se connecte pas et que vous êtes comme, comment puis-je vous y amener ? Vous sélectionnez sur celui-ci, celui que vous souhaitez commencer à rejoindre, et saisissez l' outil Plume, le voilà , et cliquez sur ce premier. En fait, vous n'avez pas besoin de cliquer dessus en premier. Il suffit de saisir l'outil Plume, de cliquer sur le point par lequel vous voulez commencer, et cela le connecte à nouveau. Le voilà. Les bases sont là. Je vais vous voir, je vais ici. C'est une meilleure feuille de thé. Il existe d'autres façons de le faire. Je ne veux pas entrer dans les mauvaises herbes avec ça juste pour que vous sachiez qu' il existe des façons fantaisies d'utiliser l'outil Stylo. C'est assez proche pour ce dont j'ai besoin. Il s'agit de la brève couverture de l'outil Stylo. Cliquez une fois pour un coin, cliquez et faites glisser pour une courbe et préparez-vous à l' ajuster par la suite, et préparez-vous également à être un peu frustré. C'est une chose délicate à apprendre. C'était censé être la fin de la vidéo. C'était la fin de la vidéo. Je suis revenu du futur parce qu' il y a quelques choses que je n'ai pas mentionnées jusqu'ici à propos de l'outil Plume. C'est utile et il s'agit de n'importe quelle forme que vous avez créée dans XD. Nous savons tous comment entrer à l'intérieur et modifier cette chose, alors double-cliquez dessus. Si vous voulez ajouter un point supplémentaire, suffit de planer sur le bord, c'est parti. Il suffit de cliquer une fois et vous pouvez obtenir un point supplémentaire, puis vous pouvez le faire glisser. Vous pouvez ajouter d'autres points d'ancrage si vous en avez besoin. la même façon, vous pouvez les supprimer et dire qu' il y a trop de choses dans celle-ci. En cliquant une fois comme ça, je ne veux plus celui-là. Je ne veux pas celui-ci ou cliquez simplement dessus et appuyez sur « Supprimer » sur votre clavier. Voici comment ajouter et supprimer des points d'ancrage. Une autre chose que je voulais vous montrer était de les convertir. Disons que celui-ci a commencé la vie comme un coin. Pouvez-vous l'aimer ? C'était bien. Je ne veux plus que ce soit un coin. Je veux que tu sois sinueux. Tout ce que vous avez à faire est de vous souvenir de double-cliquer pour aller à l'intérieur de l'objet, puis double-cliquer dessus et de le convertir en courbe, en coin, en courbe, en coin. Ceux-ci vont être un peu, oh, double-cliquez dessus, coin courbe. La conversion des points après coup, et peu importe que vous les ayez dessinés avec l'outil Plume ou que vous ayez commencé détruire certaines de ces formes régulières que nous avons faites plus tôt dans le cours. Mais oui, ce sont les extras que je voulais ajouter à cette vidéo pour vous donner une compréhension un peu plus complète de certains de ces chemins et de leur fonctionnement. C'est définitivement tout pour cette vidéo, je vous verrai dans la prochaine. 47. Travailler avec des traits et des lignes dans Adobe XD: Bonjour, tout le monde. Bienvenue au Border Extravaganza. Nous allons regarder les lignes, les bordures, les traits, ce que vous voulez appeler. Nous allons regarder des lignes pointillées, nous regarderons ces gars que certains ont des extrémités plates, des extrémités arrondies. Ensuite, nous regarderons certaines formes et une partie de la bizarrerie que cela fait là où certaines d'entre elles se déplacent et certaines d'entre elles sont pointues. Nous allons explorer tout cela dans cette vidéo. Allons-y. Je n'arrête pas de les appeler « coups ». XD les appelle frontières. Juste pour que tu saches. Nous allons créer cette ligne au milieu de ces deux-là pour les séparer un peu. Peu importe que vous utilisiez l' outil ligne ou l'outil plume, dans ce cas, vous obtiendrez exactement le même résultat final. Je vais utiliser l' outil de ligne et le faire glisser vers l'extérieur. Comment puis-je faire en sorte que ça se passe directement ? Maintenez la touche « Maj » enfoncée. Dans ce cas, il le veut vraiment, je n'ai rien à retenir, mais maintenez « Shift » juste pour m'assurer. Je reçois mon coup oblique à la frontière. Maintenant, je pourrais, je vais supprimer ça. Utilisez l'outil Stylo. Cliquez une fois, maintenez « Maj » enfoncé, cliquez deux fois. Je finis avec la même chose. Retour à mon outil Sélection. Peu importe comment vous voulez créer ces choses. Tout d'abord, ce que je veux faire, c'est que je veux en faire mon blanc cassé. Zoomons un peu. Barre d'espace, faites-le glisser. J'ai sélectionné mes petites lignes. Regardons le plus facile. Regardons en dessous. Il faut que la bordure soit appliquée. Sinon, cela ne fonctionnera pas. Vous ne verrez aucune de ces informations ici et vous aurez sélectionné quelque chose, dans notre cas, notre ligne. concerne la taille, je vais le mettre à deux pour que vous puissiez le voir plus facilement, et la ligne pointillée ou pointillée n'est que celle-ci ici. Vous décidez de la taille que vous voulez des tirets. J'ai tapé cinq pixels, il va supposer que vous voulez que l'écart soit de la même taille. Mais vous pouvez ajuster cela, vous voudrez peut-être un écart de 10. Vous pouvez décider de l' ampleur des tirets et l'ampleur de l' écart entre les deux. Cela illustre quelques-uns de ces autres points. Principalement celui-là. Par défaut, vous avez le premier Butt Cap. Je pense que je fais une blague dans chaque cours je fais [RIRES] à ce sujet. J'en ai vraiment envie, mais je vais essayer de ne pas le faire. Passons au nom le plus approprié, Casquette arrondie. Jetons un coup d' œil à la différence. C'est ainsi que vous obtenez des coups qui ont cette petite extrémité arrondie. Peu importe si vous avez un pointillé ou non. Si je ramène le tiret à 0 et l'écart à 0, pouvez-vous toujours voir ? Il y a les extrémités arrondies. Peu importe qu' il s'agisse d'une ligne pointillée, mais vous avez le Butt Cap, vous avez le bonnet rond. Remettons notre pointillé pour vous montrer le prochain. Celle-ci ici, vous pouvez voir à partir de la petite icône ce qu'ils font. Le Butt Cap est juste contre le bord, arrondi, tourne autour de l' extrémité de ce point d'angle. Celle-ci ici, elle s'appelle la casquette de projection. Des projets sortis du passé. Passons de Butt Cap à Capuchon Projeté. Celui-là, celui-là. Pouvez-vous voir ce qu'il fait ? C'est toujours la même ligne , mais elle sort et se promène. Vous constaterez peut-être que vous avez deux icônes et que vous avez le même trait. Vous êtes comme, pourquoi est-ce que celui-ci a l'air différent ? Vous l'avez peut-être importé à partir du document XD de quelqu'un d'autre et vous en avez créé un, et ils ne correspondent tout simplement pas. C'est peut-être que l'un est réglé sur Butt Cap, et l'autre est réglé sur Capuchon de projection. Je vais laisser ça là, ma petite ligne pointillée. commande 0 n'est pas vraiment ce que je voulais, mais [RIRES] nous avons fait un zoom arrière. Je vais cliquer sur celui-ci et passer à la commande 3. Vous pouvez utiliser n'importe quelle forme que vous avez pu créer, ou simplement dessiner un rectangle, peu importe. Je vais utiliser celui-ci car c'est une bonne illustration de la prochaine chose que je veux vous montrer. Je vais ajouter une bordure. Maintenant, je vais ajouter une bordure de quatre pixels pour illustrer notre problème ici. Ces trois là sont très importants. Par défaut, je n'arrive même pas à me souvenir de la valeur par défaut. Je ne me souviens pas de la dernière chose que vous faites, mais la première est mais la première est la façon dont le trait est appliqué. Celui-là, nous allons essayer de presser à l'intérieur. Prenons deux versions de ceci, une sans coup. Vous n'aurez pas d'accident vasculaire cérébral. Celui-ci ici, même si c' est exactement la même taille. Voyez-vous ? Je vais l'amener à l'avant. Il a exactement la même taille. L'accident vasculaire cérébral essaie d'être à l' intérieur de tout ça. Si vous faites cette autre chose, elle essaie d'être à l'extérieur. C'est un peu plus large. Il y aura des moments où vous aurez besoin des deux. Pouvez-vous voir que l' intérieur fait des trucs bizarres ici avec l'accident vasculaire cérébral ? Vous constaterez peut-être que lorsque vous essayez d'appliquer traits, il ne fait pas tout à fait ce que vous voulez. Vous pouvez les ajuster à l'extérieur ou celle par défaut qui tente de s'étendre au milieu ici. Vous pouvez voir, il y a ma petite ligne bleue là, c'est un peu dedans, un peu dehors. Une autre chose que nous allons examiner est la façon dont les bords sont traités. Il s'agit de la jointure à mitres, qui est la valeur par défaut, qui atteint un point. Si l'angle n'est pas trop net, il a ce bord pointu. Vous devez, je suppose, regarder. Laissez-moi essayer de le rapprocher afin que nous puissions zoomer. Vous pouvez voir que ce sont les différents. suffit de cliquer dessus et vous aurez une idée. C'est le principal que vous voudrez peut-être faire est les coins arrondis. Si vous voulez essayer de faire correspondre les icônes, vous arrondissez les bords de cette bordure. Celle-ci ici, je ne l'utilise jamais. Il tranche les coins. peut être pratique lorsque vous faites parfois des choses très pointues. C'est probablement le premier ou le second. Vous pouvez voir ici, que fait-il ? Fondamentalement, ce qu'il fait, c'est que c'est un angle si serré là, vous ne pouvez pas mettre le petit point dessus parce que le point finirait par être, pouvez-vous suivre ma flèche ? Ce serait tellement sorti d'ici, donc le Miter Join a une limite là où elle devient trop pointue. [RIRES] Celui-ci commence à être très long. Celui-là est juste trop long, donc il s'en va. Si vous avez des morceaux qui ont été arrachés et que vous vous dites : « Hé, pourquoi fais-tu ça ? » C'est parce qu'il est trop pointu, c'est pourquoi, voyez-vous, cela arrive. Vous y allez. C'est le téléchargement sur les traits. Cela peut être utile lorsque vous essayez de mélanger d' autres icônes que vous avez peut-être obtenues d' autres endroits avec vos propres icônes personnalisées, et que vous essayez de les rendre identiques, utilisez le même trait style pour qu'ils correspondent. C'est cela pour les traits et les lignes, également appelés bordures dans XD. Passons à la vidéo suivante. 48. Projet de cours 09 - Icônes et boutons: Bonjour à tous. Heure du projet de classe. Tu es comme, Boo, plus de projets de classe. Allez, vous appréciez ça. Je peux le voir, vous l'êtes. Celui-là, il faut faire quelques choses. Le premier est de créer deux boutons avec des textes, vous êtes comme, des boutons. Peut-être que nous avons fait des boutons. Nous allons avoir envie de le connecter plus tard. Mais pour le moment, tout ce que nous allons faire est essentiellement quel bouton est un rectangle. [RIRES] Vous allez en dessiner deux. J'en ai appris davantage et maintenant, j'ai utilisé mes couleurs. Vous n'avez pas besoin d'utiliser des coins arrondis, juste deux boutons, il ne s'agit que de texte. J'en ai un avec un texte vert, sur ma couleur d'accent. Celui-là vient d'avoir un contour qui a une bordure et aucun remplissage. Celui-là avec un texte blanc. Deux boutons et deux rectangles avec du texte au milieu, faciles. Celle-ci ici, pas aussi facile. Celui-là va être un beau défi. A est, vous devez créer trois icônes au minimum. Vous pouvez tous les faire si vous êtes prêt à relever le défi. Il y a trois éléments essentiels qui sont nécessaires. Le logo personnalisé, je veux que vous passiez un peu de temps à essayer de dessiner quelque chose relativement lié à votre produit. Si c'est du café, essayez de dessiner une tasse à café. Si c'est du miel, essayez de dessiner une abeille ou un pot à miel ou quoi que ce soit. Une icône au-dessus votre message marketing que je veux que vous voyiez si vous pouviez le dessiner. Le but ici n'est pas de faire quelque chose de beau, le but ici est simplement de faire quelque chose en pratiquant. C'est ici que vous êtes en ce moment et que vous partagez. J'aimerais bien voir ce que vous faites, surtout via vos commentaires sur les réseaux sociaux si vous le souhaitez. C'est juste que, oui, certaines personnes vont vraiment avoir du bien. Vous allez voir d' autres personnes dehors, alors vous êtes comme si j'en ai fait de super, je ne vais pas poster les miens. Parce que certaines personnes vont avoir de l' expérience d'autres programmes avec l'outil stylo de différentes formes et faire des choses incroyables, mais ne vous inquiétez pas, apportez votre ordinateur portable. Ce que nous faisons ici, c'est d'apprendre et de commencer. N'ayez pas peur de partager vos affaires. Même si vous pensez que ce n'est pas génial, ce sera un grand jalon dans deux ans lorsque vous retournez en arrière et que vous regardez [RIRES] l'icône que j'ai créée, mais la faire sortir , ça fait du bien. Dessinez une icône. Cela peut être simple. Vous n'avez pas besoin d' utiliser l'outil stylo. Vous pouvez utiliser toutes les formes que vous aimez, comme celle-ci J'ai dessiné cette icône ici pour mon icône de recherche. C'est un cercle, puis j'ai dessiné un rectangle. Puis je suis allé boucler. [RIRES] Il y avait mon petit bâton. Vous allez être créatif quant à la façon dont vous allez dessiner ces choses. Il en va de même pour ce rectangle. Il y avait un triangle et quelques rectangles. Je n'aime pas vraiment ma maison, mais je suis de toute façon créative. Ce que je dois faire, c'est cette icône personnalisée. Je veux que vous fassiez le menu des hamburgers, si vous ne l'avez pas déjà fait. C'est une ligne. Assurez-vous simplement d'être conscient du style de bordure, c' est-à-dire lorsque vous avez sélectionné un outil de ligne, c'est ces gars ici. Comme comment cela se passe-t-il sur le coup ? De quel plafonnement a-t-il ? Je veux que tu sois conscient quand tu fais ça. J'ai opté pour une jolie casquette arrondie. Menu plus grand, relativement facile. Une icône d'accueil car nous allons en avoir besoin pour ce cours. Essayez de dessiner une maison meilleure que moi. [RIRES] Google House icônes, et trouvez quelque chose qui, A, selon vous, représente une bonne icône de maison, et c'est quelque chose que vous pouvez réellement dessiner. Les autres sont facultatifs. Je les ai mis dans l'ordre de ce que je ressens personnellement en tant qu'enseignant, quel est le plus facile à dessiner ? Eh bien, [RIRES] En fait je vais déplacer celui-ci vers le bas. Celui-ci pourrait potentiellement être le plus difficile. Je ne sais pas ça. Le menu Bugger ne comporte que trois lignes. Icône de compte, vous avez vu une icône de compte. Cela dépend de celui que vous recherchez. Ils peuvent être délicats. Je les ai mis dans l'ordre de ce que je pense être le plus difficile. Faites les trois, faites cinq si vous vous sentez Roi, essayez de les faire tous. Si vous sentez que vous avez un peu de temps, vous voulez vous entraîner. Ce que je veux que vous vous souviez, c'est qu'il peut être utile de commencer par un carré comme guide. Quand j'ai commencé à dessiner le mien, je les ai mis en carrés pour qu'au moins ils soient proportionnellement les mêmes. J'ai fini par les changer un peu, mais au moins cela vous donne quelques dimensions. Sinon, vous finissez peut-être par faire des tailles bizarres. J'ai commencé avec une taille de 48 pixels sur 48. C'est une taille assez bonne, elle est assez grande pour que vous puissiez obtenir des détails là-dedans sans être trop grand, et devenir un peu fou parce que ce sera une icône. Laissez-moi écrire. Quelques rectangles que j'ai commencé à dessiner sont en fait des carrés de 48 sur 48. C'est un bon point de départ. D'autres choses, vous pouvez utiliser la fonction coin arrondi. Rappelez-vous si vous dessinez quelque chose, et que vous êtes comme un stylo me tuait. Vous pouvez utiliser les coins arrondis ou qui se souvient comment vous pouvez simplement faire travailler un coin avec votre cerveau, vous êtes comme, Oh, je me souviens. Vous maintenez la touche Option enfoncée. Ou la touche Alt sur un PC et vous pouvez faire glisser l'un d'entre eux. C'est peut-être le début de la forme dont vous avez besoin. Vous pourriez être comme, c'est juste ici. Maintenant, je peux double-cliquer sur aller à l'intérieur et faire mes ajustements. Parce que c'est plus facile que d' utiliser l'outil stylo ou certains autres outils. [RIRES] Vous comprenez l'idée. De plus, lorsque vous augmentez et descendez, n'oubliez pas de décrire le trait. Je devais le faire avec ces derniers, car rappelez-vous quand ils baissent gardent la taille de la bordure. Je ne voulais pas ça quand il est devenu plus petit. Vous voyez cela. J'ai cliqué avec le bouton droit et je suis allé à contour. Rappelez-vous plus tôt dans le cours que parfois cela ne fonctionne pas pour vous, essayez d'abord. Si cela ne fonctionne pas pour vous, il existe l'autre option de chemin d' objet et de conversion en chemin. Vous pourriez rencontrer des problèmes avec ceux que vous n'êtes peut-être pas. Vous pouvez également copier et coller l'apparence. Chaque fois que vous dessinez quelque chose dans Adobe XD, il y a de la douleur dans les fesses. Vous êtes comme un remplissage blanc ennuyeux en ligne grise d'un trait. N'oubliez pas que vous pouvez dire que vous cliquez dessus, copiez , modifiez, collez l'apparence, au moins commencer dans la bonne zone. L'autre chose, c'est que je veux que vous le tessiez sur votre application XD sur votre téléphone car lorsque vous présentez ces éléments, ils peuvent sentir la bonne taille, mais lorsque vous les voyez sur votre téléphonez et essayez de les cliquer, et vous ne pouvez pas parce qu'ils sont trop proches les uns des autres ou qu'ils sont simplement massifs et vous êtes comme si c'était de gros boutons. Faites toujours des tests sur votre téléphone pour voir ce qui fonctionne. Je sais que ce type est un peu plus petit. Je regarde mon téléphone ici. Il est un peu petit pour ce dont j'ai besoin. C'est ça. Une fois que vous l'avez fait, prenez une capture d'écran des icônes que vous avez créées, placez-les ici. Si vous n'en faites qu'un couple, comme 1, 2 et 3, il suffit de prendre une capture d'écran de votre page. La page d'accueil est probablement la meilleure, car elle est avec vos boutons. Je vais voir tout ça. Si vous en avez fait plus, il suffit de les placer sur une capture d'écran de page et de les mettre en place. J'aimerais voir tous ceux que vous créez. J'ai hâte de voir ce que vous avez pour cela. Ça va être intéressant. Partagez-le ici, puis téléchargez-le sur les réseaux sociaux, j'adore le voir. Instagram, Twitter, groupe Facebook, LinkedIn, groupe, quelle que soit votre saveur, et j'aimerais le voir. C'est tout, sur la vidéo suivante. En fait, tu vas faire tes devoirs. Je vous verrai dans la prochaine vidéo une fois que vous aurez terminé. voit alors. 49. Est-ce que je dois connaître Illustrator avec Adobe XD: Parce que je vais vous montrer, cela commencera par quelques choses simples sur les différences entre l' utilisation et le dessin dans Adobe XD et Adobe Illustrator. Vers la fin, je vais vous montrer quelques-uns des problèmes qui se posent lorsque vous passez de l'un à l'autre. Si vous n'avez aucune idée de ce qu'est Adobe Illustrator, c'est juste un autre programme qu'Adobe fait. Il se spécialise dans le dessin et l'illustration et est très bon en typographie. Nous allons dessiner des formes comme celle-ci, faire passer d' Illustrator à XD. Mais oui, commençons. Pour répondre à la première question, faut-il connaître Adobe Illustrator pour être concepteur UX ? La réponse est non. C'est un outil utile et probablement une étape suivante pour vous après ce cours si vous appréciez vraiment cette partie du processus UX. Donc, la conception réelle de l'interface utilisateur, les choses de fabrication, les boutons de dessin et les icônes, il y en a jusqu'ici que vous pouvez obtenir avec Adobe XD. Il en a assez et vous pouvez y arriver, mais il y aura juste des moments où vous ne pourrez pas faire les choses. XD est conçu pour le prototypage rapide, non pour une illustration complète. C'est là qu'Illustrator peut vous être utile. Je l'utilise tout le temps dans mon processus. Permettez-moi de vous donner quelques mots rapides par exemple. Je suis dans Adobe Illustrator, vous verrez qu'il y a certains outils comme l'outil stylo. Il y a un outil rectangulaire. Je vais dessiner cette tasse à café comme vous l'avez vu au début. Il y a beaucoup de similitudes, ce qui est bien. J'ai ce rectangle. Regardez, les mêmes petits points. Il s'agit en grande partie de la même chose. Je vais concevoir ma petite tasse à café, arrondie en haut et décaler, cliquer sur celles du bas et les faire glisser vers le haut. Vous y allez. Il y a une tasse à café. Là où il devient différent, c'est là où c'est la même chose, l'outil stylo. Je vais cliquer et faire glisser des courbes pour obtenir une poignée. [RIRES] Il y a une poignée. Je veux qu'il soit rempli et non pas un coup. Je peux attraper le coup, le déplacer vers le haut. ne s'agit pas d'un cours Illustrator. Si vous voulez un cours Illustrator, je sais qu'un gars a obtenu un cours essentiel et un cours avancé. Mais là où cela diffère, disons que je veux changer ce trait pour qu'il s' agisse d'une largeur variable, vous ne pouvez pas le faire dans Adobe XD. Vous pouvez saisir l'outil largeur ici dans Illustrator et revenir [NOISE] avec les effets sonores. Vous pouvez voir que je peux faire une largeur variable maintenant. On peut en avoir envie. Je vais vous montrer quelques raisons lesquelles vous pourriez sauter et apprendre Illustrator. Si vous avez déjà des compétences à ce sujet, vous pourriez être comme, je peux dessiner une tasse à café. [RIRES] Vous pouvez regarder cette vidéo si vous êtes Maître d'Illustrator. Il y a quelques petites connexions entre XD et Illustrator. Je vais encore prendre mon stylo. Je vais dessiner mon petit truc sinueux. C'est censé être de la vapeur provenant de mon thé vert. Encore une fois, l'outil largeur, je peux faire ce petit petit peu là-dedans. Si vous n'avez pas utilisé l'outil largeur et que vous êtes une personne Illustrator. Oh, tellement cool. J'adore ça. Je vais passer mon coup à non pas de ce premier, ce deuxième bouchon rond. L'outil largeur est donc l' un de ceux que j' aime chez Illustrator. Il y en a beaucoup. C'est juste un peu, par exemple, où il devient vraiment cool, c'est des coups différents. Je vais donc dessiner un waft en cliquant et en faisant glisser une courbe. Probablement un peu trop grand et encore avec les effets sonores. Donc, quelque chose comme ça. Ce que nous pouvons faire, c'est au lieu de simplement jouer sur des traits, il y a tout un sous-ensemble de choses comme les pinceaux. Je vais utiliser juste un crayon à charbon de craie artistique. Eh bien, regardez ça. On dirait un crayon à charbon de craie. Voici donc quelques-uns des avantages de l'utilisation d'Illustrator. Un autre avantage est lorsque vous avez affaire à des polices de caractères. Permettez-moi donc de vous donner un rapide, par exemple, si je clique dessus, si je tape dans un café, je vais utiliser mon Amatic. J'ai une police appelée, vous l'avez vu, Amatic. J'ai cette police. Mais je veux que ce café dit avoir un peu, je ne me souviens pas de ce qu'il s'appelle. Ce qui se trouve au sommet de l' E qui donne l'air chic et français. Les glyphes. On les appelle des glyphes. Ils sont en sous-type. Beaucoup de polices les ont, pas toutes. Celle-ci le fait, mais nous ne pouvons pas accéder à tous ces glyphes dans XD. Il n'est pas conçu pour une grande quantité de typographie. Illustrator adore la topographie. Comme vous pouvez le voir ici, regardez ces personnages supplémentaires que vous manquez. Dans mon cas, si je survole E, il est là. En fait, je veux l'autre E, le E avec le bit. Jetons un coup d'œil. Où est le E avec la mèche ? Vous attendez là. Je l'ai repéré. Double-cliquez sur lui et j'ai eu le E avec un petit tiret dessus. Les glyphes sont donc une autre chose pratique, j'adore les glyphes. glyphes sont géniaux. Ils deviennent encore plus fantaisistes quand on regarde différentes polices. Voyons une autre police. Regardons celui-ci ici. Donc Alicia, celle-ci a un tas de glyphes, donc je vais le fermer. Pouvez-vous le voir ? tous ces juteux. Regardez-moi ça. Je veux que ce soit à la fin. Soulignons donc là. Mais écoutez, je peux changer la fin, comme ce type. Regardez tous les tourbillons et les morceaux et vous pourriez décider, oh je veux un autre A. Je n'aime pas ça . Je vais aller chercher celui-là ou donc ça se connecte à un C. Peut-être celui-là. Vous pouvez faire des choses amusantes. C'est la raison pour laquelle Illustrator peut faire partie de votre ensemble d'outils lorsque vous concevez dans Adobe XD, car vous avez accès à tous ces éléments supplémentaires. Maintenant, pour les amener de l'un à l'autre, je vais le faire, d'accord pas aussi joli que je l'espérais. [RIRES] Ma tasse n'a pas air aussi délicate que je le pensais. C'est un peu écrasé. Quoi qu'il en soit, sélectionnez-les tous et copiez-les et lorsque vous les transmettez dans XD, certaines choses seront encore modifiables et certaines choses ne le sont pas. Eh bien, apportons-le. Je vais le coller et j'ai eu ça. Je vais le remplir d'une de mes couleurs. Oui, celui-là. Ce que vous trouverez, c'est que je peux double-cliquer pour entrer encore à l'intérieur. Je suis à l'intérieur de ce truc. Je peux double-cliquer dessus et regarder, il y a une partie de mon gars. Vous pouvez toujours les séparer. Vous pouvez toujours travailler sur eux. Mais disons ce coup ici, regardez ce qui est arrivé à cela. C'est ici et je peux m'en mêler. Il est fait de toutes ces petites pièces, alors que dans Illustrator, c'est cette petite ligne que je peux utiliser, dans mon cas, cet outil de sélection directe, sélectionner la fin, aller [BRUIT]. Vous pouvez donc effectuer une grande partie de votre édition dans Illustrator , puis copier et coller le résultat final dans XD. Vous pouvez l'ajuster et jouer avec lui. Mais ce serait le processus, il suffit de copier et de coller. Vous pouvez être plus fantaisiste et ici, aller dans mes bibliothèques, trouver votre classe XD et passer [inaudible] Eh bien, je vais simplement copier et coller la police en fait. Est-ce que tout est entré ? Jetons un coup d'œil. Allons-y. Nous allons le faire sortir encore une fois. J'ai une partie de mon gars là-dedans. Alors, est-ce que j'ai tout attrapé ? Je vais le regrouper, puis les mettre en place. C'est mieux. Maintenant dans Adobe XD. Je vais y aller, rappelez-vous qui sait où se trouvent les bibliothèques dans cet endroit bizarre. Les atouts, ici. Ils peuvent bouger. Où est mon cours XD ? Il y a ça. C'est cool et je peux dire que tu y vas. C'est la façon officielle de le faire entrer. Regardez-moi ça. Il a perdu mon petit accident vasculaire cérébral. [RIRES] Cela vous arrive, nous allons un peu trop profondément dans Illustrator. Vous pourriez rencontrer ce problème. Copiez-le et collez, alors tout va bien. C'est la même solution que celle que nous avions dans XD lorsque nous rencontrons des problèmes. Ici, bien qu'il soit sous objet, chemin et il y en a un qui s'appelle contour. Il résout tous les problèmes. Maintenant, sautez là-dedans. [NOISE] Maintenant, revenez dans XD, allant sur une tangente et Artwork 3, mais cela fonctionne. Hé, nous avons des problèmes. Nous les réparons. Regardons une dernière chose. Il s'agit de copier et de coller des polices. Je ne me souviens pas de ce que ça fait. Mettez-le en travers , collez, je pense que ça va juste le tracer en une forme. Il l'a fait. Double-cliquez dessus. Est-ce que c'est un texte ? Il s'agit d'un texte modifiable sauf s'il sait quoi faire ce dernier ? Ce n'est pas le cas. Qu'est-ce qui se termine par E ? Je ne peux pas penser à un seul mot. [RIRES] Je ne sais pas, thé ? [RIRES] Vous m'avez mis sur place, et vous pouvez voir dans ce cas les morceaux qui allaient bien, juste des vieux textes normaux. Ils sont arrivés très bien. Cette chose, qui est apparue comme une forme. Regardez-moi ça. Il s'agit de ça et ça fonctionne de la même façon avec celui-ci que je parie. Le E va-t-il passer ? Non, ce E est modifiable. Regardez-moi ça. C'est l'un de vos E habituels. Je peux donc supprimer ça et continuer. Vous trouverez donc des problèmes intermittents. Celui-là est, rappelez-vous que je ne peux pas penser à un mot. Allez, alors. J'en ai eu un. [RIRES] Il est donc séparé des glyphes de l'ancien texte normal, mais c'est bon. Je peux travailler avec ça. cool chez eux, même s'il s'agit d'une forme, elle est toujours évolutive et c'est adorable Victor. Bonté. C'est ce qui va être le cas. Vous n'avez pas besoin de connaître Adobe Illustrator pour être concepteur UX et Adobe XD, mais c'est pratique et je connais un gars qui peut vous enseigner. Si vous êtes un utilisateur expérimenté d' Illustrator, vous voudrez peut-être consulter mon cours avancé Illustrator. Si vous venez de commencer, jetez un coup d'œil à l'essentiel. Ce n'est pas forcément le mien, mais c'est une compétence que vous voulez probablement développer tout au long de votre voyage. C'est ça. Je vous verrai dans la vidéo suivante. 50. Masquage et recadrage des images dans Adobe XD: Bonjour à vous. Dans cette vidéo, nous allons masquer dans Adobe XD. La version courte est de mettre une forme au-dessus d'une image, de les sélectionner tous les deux et de passer un masque d'objet avec forme. Il y a d'autres choses à modifier la forme et l'image que je veux partager avec vous, alors continuez à regarder. Mais si c'est tout ce que vous êtes venu chercher, c'est fini. Mais si tout le monde, allons-y. Apportons une image. Peu importe l' importation de fichiers ou les faire glisser du finder dans celui-ci comme je fais normalement. Je vais apporter ce premier. Avec des images, cela arrive souvent, ils ont commenté cette taille gigantesque. Si vous maintenez la touche Maj sur l'un des coins et l'option sur un Mac, sur un PC, vous les réduisez en fonction de leur pertinence. Pour que vous sachiez que si vous êtes concepteur ou développeur Web, il n'est pas important d'obtenir ces images de la bonne taille et bonne résolution ou de la bonne qualité chronique avant XD . XD, ce que nous ferons plus tard dans le cours. Il les apporte pleinement et vous pouvez les exporter vers une taille de conception Web plus appropriée ultérieurement. Mettez-vous ensuite au masquage. La façon officielle est d'avoir une image puis d'en dessiner une forme, par-dessus. Il peut s'agir de n'importe quelle forme dessinera un rectangle. Je vais faire quelques doublons je puisse vous montrer différentes façons. Sélectionnez-les tous les deux. La chose que vous voulez masquer à l'intérieur doit être en haut. Vous devrez peut-être cliquer dessus avec le bouton droit de la souris et dire mettre en avant. Sélectionnez-les tous les deux, puis dites que le long chemin est objet et allez faire avec forme. Non, il s'agit même d'un masque avec forme. Cliquez dessus et vous partez, notre premier pas. N'importe quelle forme fonctionne. Cela n'a pas d'importance tant que c'est au sommet. Le raccourci est la commande shift m en fonction de la quantité d' images que vous finissez par réaliser. Raccourci Je me souviens d' une manière ou d'une autre et c'est la commande shift m sur un Mac et le contrôle shift m sur un PC. Ils peuvent être n'importe quelle forme que vous n'avez même pas eu à la dessiner, peuvent être quelque chose que quelqu'un d'autre a dessiné que vous avez importé. Faisons quelque chose de fou ou on n'y est pas arrivé. Je n'ai pas dessiné ce logo Twitter. Tant qu'il est en haut. Quelle est la mienne. Vous pouvez le sélectionner et dire commande shift m. Vous pouvez également faire votre propre outil personnalisé avec l'outil stylo. Vous pouvez décider que je vais choisir tout, prendre l'outil stylo. Je vais cliquer là et me souvenir d'avoir cliqué et de faire glisser une courbe, cliquer une fois pour un coin, cliquer et de faire glisser ce masque est le pire du monde. Sélectionnez-les tous les deux , puis utilisez votre raccourci. Le mien n'a pas fonctionné. Pourquoi le mien n'a-t-il pas fonctionné ? Je ne pensais pas les avoir tous les deux sélectionnés. Eh bien, c'est tout. Assurez-vous qu'ils sont tous les deux sélectionnés et la forme est au-dessus et que vous pouvez masquer. C'est une façon de masquer. Vous avez deux formes distinctes et les fracassez ensemble. Souvent, ce que je vais faire, c'est que vous avez des formes existantes que vous souhaitez remplir. Disons ici que j'ai ces couleurs d'espace réservé et que vous pouvez simplement les glisser directement dans elles. Vous devez pouvoir accéder à la fenêtre du Finder, Mac ou PC, et juste en haut du XD Edge, délicat pour certaines personnes. Vous pouvez simplement glisser directement ici dans l'espace et il sera correctement dimensionné et mis à l'échelle et dans la bonne forme. Vous pouvez facilement mettre à jour les images en les faisant glisser par-dessus. Disons que vous êtes comme, c'est génial, mais je dois changer celle-ci par autre chose. Il suffit de cliquer sur maintenir et de faire glisser le doigt sur le haut et il s' éteindra. Masques de réglage. Faisons ça. [RIRES] Début. Supposons que vous vouliez ajuster le positionnement de ce dernier. Vous double-cliquez dessus pour y entrer et vous aurez accès à cette image. Vous pouvez, au milieu ici, il suffit de cliquer sur maintenir et de le faire glisser. Vous pouvez décider que c'est ce que je veux, puis cliquer dessus quand vous avez fini. La même chose que notre mode d'édition d'objets lorsque nous exécutons ces icônes et la prochaine chose que vous voudrez peut-être faire est d'ajuster le bord. Double-cliquez dessus pour aller à l'intérieur, vous pouvez, si vous saisissez le bord, ajuster le bord ou l'écraser ou double-cliquer dessus et passer en mode d'édition d'objets et faire des choses bizarres. [inaudible] petit thé heureux, visage souriant [RIRES]. Pas si souriant. C'est l' édition de vos masques. C'est pareil avec eux, où est-il ? Vous faites défiler. Ce type ici, double-cliquez dessus. Vous pouvez décider que c'est ça. Vous voulez le mettre à l'échelle, utilisez simplement votre touche Maj, saisissez l'un des coins, décidez si c'est ce que vous voulez faire. Double-cliquez sur et c'est parti, nous masquons et modifions notre masque. Cela consiste à créer des masques en les faisant glisser dans des formes existantes ou sélectionnant tous les deux et en entrant dans un masque d'objet avec forme. Je vous verrai dans la prochaine vidéo. 51. Images gratuites à utiliser dans vos maquettes XD - Unsplash Pexels Freeimage: Bonjour à tous. Nous allons parler images gratuites que nous pouvons utiliser commercialement dans nos maquettes XD, en plus de parler de certains des sites payants que j'utilise. Allons-y. Images gratuites, vous êtes à la recherche de celles qui peuvent être utilisées commercialement, des images gratuites commerciales. Mes favoris sont unsplash.com, pixels.com, free images.com. Ce sont les principaux gratuits que je vais vérifier à la recherche d'images, peut-être pour mes maquettes ou peut-être que j'ai un client qui n'a pas l'argent pour acheter des images. N'ayez pas peur d'acheter des images. Il existe des sites de bibliothèques boursiers, les principaux que j'utilise et que je paie sont stock.adobe.com. Celui-ci coûte environ 20£ et je reçois 10 images par mois. Ou encore, en plus, j' ai un abonnement à Envato Elements qui a une image très similaire, probablement pas une profondeur d'imagerie, c'est pourquoi je les ai tous les deux, mais il y a aussi d'autres choses que je utilise beaucoup de modèles et d' effets sonores dans la musique. Je finis par les avoir tous les deux. Mais il y a de nombreuses occasions où la gratuité est bonne. La seule chose dont vous devez juste faire attention, pas prudent, mais quand vous le serez, comme si je voulais du thé vert, vous le trouverez. Vous voyez ce truc ici ? Ce premier morceau est une annonce, iStock. C'est un autre site de bibliothèque boursière. Pas mieux ni pire que ceux que j'ai expliqués, mais c'est ainsi qu'ils gagnent leur argent sur Unsplash. Ils reçoivent des commissions basées sur ces dernières. Vous pourriez être comme, oh, c'est celui que je veux, et vous ne pouvez pas l'utiliser parce qu'il est payé, donc vous finissez par descendre ici et il y en a d' excellents. Vous pouvez voir ceux que j'ai ici parce que je peux les partager dans le cours. Ils sont cool, mais il y en a beaucoup [RIRES]. La qualité de ceux de la bibliothèque boursière professionnelle, sachant qu'ils vont être utilisés dans les publicités, les sites Web et autres choses, si souvent peut être vraiment bonne. Mais il y a aussi de jolis trucs gratuits. Gardez un œil sur les publicités. [CHEVAUCHEMENT] Pour eux, il n'y a rien de trop à leur sujet. Vous voudrez peut-être vérifier deux fois les licences. Disons que je veux utiliser, je le veux vraiment, mais j'utilise du thé vert. Ce n'est pas du thé vert. C'est un, comment appelle-tu ça ? Chai Latte. Est-ce que c'est ce que je veux ? Disons que je veux utiliser celui-ci. Vérifiez simplement que vous êtes libre d'utiliser sous la licence Unsplash. Faites un petit chèque, assurez-vous qu'il a tout ce dont vous avez besoin, fasse ce que je dois faire, mais aussi vérifier avant de le vendre au client. De même, si vous commencez à utiliser des images de stock, assurez-vous que le client sait qu'il y a un coût supplémentaire que vous allez générer pour les images, ce qui n'est pas nécessaire. Comme si je payais 20£ pour mes 10 images, si j'en utilise cinq ou six, ce n'est pas un coût élevé. Mais voilà, ce sont mes trucs gratuits préférés et mes bibliothèques d'images boursières payantes préférées. C'est ça. Continuez. 52. D'autres images de fond de l'opposition dans XD: Bonjour à tous, dans cette vidéo, nous allons faire passer cette image en arrière-plan comme ceci, sombre et maussade afin que nous puissions lire le texte en arrière-plan. Alerte spoiler, c'est juste un rectangle sur le dessus qui a une certaine opacité. Comme toujours traîner et je vais vous montrer d'autres trucs et astuces au fur et à mesure. Allons-y. Très bien, pour commencer, je vais dupliquer cette page d'accueil. Une ou plusieurs choses, c'est que vous ne pouvez pas simplement sélectionner la page et ajouter une image d' arrière-plan. En fait, c'est juste une image comme nous l'avons fait dans les dernières vidéos qui se trouvent à l'arrière, il n'y a pas d'option ici pour le moment. L'autre chose intéressante, c'est que je veux dessiner un rectangle et couvrir l'arrière-plan. Mais si vous avez sélectionné la page et que vous avez l'outil Rectangle et que vous allez commencer ici et dessiner à travers, ça va le faire. Il remonte à l'outil d'ajout de page. Parfois, vous devez faire une ou deux choses. Cliquez sur Désactivé en arrière-plan, puis dessinez un rectangle. Bien, ou souvent, alors que parfois je serai là, je vais aller à l'outil Rectangle et je vais juste le dessiner un peu plus petit. Accédez à mon outil de sélection et développez-le . Cela va vous arriver. Je vais le laisser là-dedans. Nous avons notre rectangle, nous allons ajouter notre image. Que va-t-on utiliser ? Nous allons utiliser celui-ci, non. Très bien, je vais utiliser celui-là. Je ne sais même pas si c'est du thé vert. Quoi qu'il en soit, nous avons cette image et nous l' envoyons juste à l'arrière. Mais on n'assombrit pas l'image réelle. n'y a aucun moyen de le faire. Si vous changez le remplissage en noir, la boîte devient noire, il n'y a plus d'image là-dedans. Ce que nous voulons faire, c'est que nous avons deux rectangles. Je vais en dessiner un deuxième. Encore une fois, juste plus petit, prenez mon outil de sélection et agrandissez-le. J'ai deux boîtes, une blanche, une avec une image et celle-ci en haut, je vais dire que vous êtes noir et que je vais réduire un peu l'opacité. Ensuite, vous y allez, c'est comme ça que vous faites. J'ai ces deux-là, je vais les envoyer tous les deux à l'arrière. Comment puis-je faire cela ? Je vais appuyer sur « Support carré Command Shift », qui enverra le noir à l'arrière. Ensuite, je vais le faire aussi pour la deuxième et c'est « Control Shift Square Bracket » sur un PC. Ils sont tous les deux à l'arrière et je peux les sélectionner comme ça. Vous pouvez cliquer sur ce dernier, puis décider de l'opacité, obscurité dont vous avez besoin pour le contraste ici. Vous pouvez utiliser de petits raccourcis, avec le rectangle noir sélectionné. Vous pouvez appuyer sur toutes les touches numériques juste au-dessus de vos lettres. Pas les touches numériques sur le côté, juste celles au-dessus des lettres. Si j'en frappe deux, c'est 20 %. Vous voyez que c'est là-bas. Allons-y à ce point. Deux représentent 20 pour cent, si je tape cinq, c'est 50 pour cent, si je tape sept deux fois très rapidement, vous regardez ce qui se passe, c'est 77 pour cent. Je finis par faire beaucoup de choses, environ 60 % me paraissent bien. C'est ainsi que l' on assombrit un fond, c'est juste une boîte noire sur le dessus légèrement transparente. Vous pouvez également teindre l'arrière-plan en ne devenant pas noir, mais je peux utiliser le rouge ou mon vert ou mon vert foncé. Je pourrais le sélectionner et jouer avec l'opacité de mes raccourcis et vous seriez comme, c'est cool, mais je veux qu'il soit plus sombre. Vous pouvez le teinter de cette façon. Quoi qu'il en soit, il s'agit de deux formes différentes l'une sur l'autre. La partie supérieure est juste un peu transparente ou l' opacité est plus faible. C'est tout, je vous verrai dans la vidéo suivante. 53. Arrières et objets Blurring dans Adobe XD: Bonjour, tout le monde. Nous allons prendre notre document et notre arrière-plan et brouiller l' arrière-plan et le document. Nous allons vous montrer comment flouter les objets également, et nous ferons quelque chose de fantaisiste là où cette interface utilisateur en haut et elle brouille l'arrière-plan pour se démarquer, cool. Très bien, donc en brouillant les objets et les arrière-plans dans cette vidéo, allons-y. Très bien, par quoi commençons-nous ? Commençons par la carte car c'est cool et c'est le plus simple. Je vais accélérer ça. Je vais juste importer une image d'arrière-plan. Très bien, donc je vais simplement le mettre dans une image, dessiner un rectangle blanc, puis éditer du texte, et pour rendre cet arrière-plan floue, il suffit de sélectionner l'objet en haut. Vous dites que j'aimerais que l' arrière-plan soit floue. Pour le moment, c'est probablement un peu trop floue, je veux que ce soit juste faire allusion à l'arrière-plan, qui rend cela lisible, vous pouvez jouer avec la lumière ou obscurité selon ce que vous êtes. faire. Je vais aller un peu plus blanc que nécessaire. Ce dernier ici ressemble à la quantité de forme originale que vous pouvez voir. Si votre forme était comme rouge pour le moment, vous ne pouvez rien voir, mais regardez ce fichier. Si je soulève cela, vous pouvez commencer à voir ce rectangle rouge. Peut-être des occasions où vous avez besoin des deux, fois de voir un peu de l'objet original et peut-être de l'éclaircir et de l'assombrir. C'est comme ça que je peux le faire. Regardons le flou d'arrière-plan. Nous avons fait cette chose et disons que c' est encore trop détaillé. Je vais choisir là-dessus. Examinons d' abord le glyphe d'objet tout seul, pour que vous restiez là-bas. Je peux cliquer sur un objet, disons qu'il est déjà sombre, ce n'est pas le cas, mais disons qu'il est assez sombre et que nous pouvons lire tout cela. Nous voulons juste un flou, déconcentré. Vous pouvez dire que vous, mon ami, au lieu de flou d'arrière-plan, vous dites que vous êtes flou d'objet, voilà. Le seul problème avec le flou d'objet est que vous obtenez ce bord floue. Ça pourrait vous plaire. C'est peut-être parfait. Si vous n'aimez pas le bord flou, vous avez quelques choses à faire et vous pouvez vous assurer que l'arrière-plan n' est pas de couleur contrastée, donc je peux dire que vous êtes plein de blanc, sorte que quand ce type est ici, n'est pas si visible que ça. Mais vous avez ce fantôme et vous n'aimez pas vraiment ça. Ce que je fais, c'est que vous pouvez le masquer à nouveau. Regardez ça, j'ai cette forme ici. Je vais l'amener à l'avant juste pour être clair, je vais saisir l'outil rectangle. Je vais dessiner un rectangle à l'intérieur. Sélectionnez à la fois la chose floue et ce nouveau carré, et comme nous l'avons fait auparavant, nous allons utiliser le masque d'objet avec forme. Alors cet objet flou, pouvez-vous le voir là-dedans ? Tu aimes juste découper de l'extérieur. C'est une façon de le faire et c' est la façon dont je le fais souvent pour me débarrasser du bord flou, c' est de le masquer par la suite. Ensuite, vous pouvez le coller sur le dessus et l'utiliser pour contrôler à quel point il fait sombre si nécessaire. Parce que vous remarquerez que l' objet est flou pour le moment, si je vais à l'intérieur pour cliquer dessus parce que cliquez sur masque, rappelez-vous, vous pouvez voir que même s' il a un flou d'objet, il n'y en a pas. de ces trucs supplémentaires que le flou d'arrière-plan avait, nous pouvions l'abaisser et l'assombrir . Peut-être que ça va arriver. Nous avons ces deux-là et je vais l'envoyer à l'arrière, vous à l'arrière. J'utilise mes raccourcis, souvenez-vous, c'est celui-ci ici. Envoyer à l'arrière le support carré Maj Command ou le support carré Control Shift sur un PC. C'est comment le flouter en arrière-plan et jouer avec l'opacité. L'autre chose que vous pourriez faire, c'est ce que nous avons fait ici, mais cela ne fonctionne pas toujours. Je vais vous le montrer au cas où cela fonctionne mieux à l'avenir, ou cela pourrait fonctionner parfaitement pour ce dont vous avez besoin. Que va-t-on faire ? Débarrassez-vous de ce type. En fait, nous allons nous débarrasser de tout ça. Nous allons commencer par celui-là. L'alternative est, parce que vous pourriez être pourquoi ne pas utiliser le flou d'arrière-plan comme nous l'avons fait ? Vous pouvez. Regardez ça. Si je dis flou d'arrière-plan, le problème est qu' il ne devient pas assez floue et qu'il fait un flou bizarre. Ils semblent être deux flous différents. Regarde ça, c'est complètement flou. C'est également flou. C'est tellement différent. C'est pourquoi je n' utilise pas beaucoup celui-ci. Cela peut changer. Il y a peut-être plus de contrôle ici. Parce que ce serait parfait parce que vous pouvez contrôler la légèreté et l'obscurité de celle-ci. Mais je ne sais pas parce que regardez ça, comme une lueur céleste angélique. Je n'aime pas la méthode qu'ils utilisent pour brouiller l' arrière-plan derrière. J'utilise cette méthode où je brouille l'objet, peut-être devoir le couper parce que les bords deviennent un peu floues, puis simplement le déposer en haut. Oui, facile et douloureux selon ce que vous voulez faire, vous pouvez cliquer sur n'importe quel ancien objet et simplement dire que vous êtes floue. Vous y allez. C'est peut-être ce que vous voulez [RIRES] de toute cette vidéo. Je viens de commencer par ça. Je ne sais pas. Je voulais le flou d'arrière-plan , donc c'est ce que nous avons fait. Oui. Très bien. J'espère que cette vidéo vous a plu. Je vous verrai dans le prochain. Mais ce ne sera pas avant un petit moment, car c'est vendredi. Hourra. Ce n'est peut-être pas votre vendredi, mais c'est mon vendredi et c'est la dernière vidéo de la journée. J'ai atteint mes objectifs aujourd'hui, et je vous reverrai dans la vidéo suivante et ce sera lundi. Je me demande si vous pouvez faire la différence dans ma voix. Est-ce que je serai plus excité ? [RIRES] Probablement moins excité, ce sera lundi [RIRES] matin. Très bien, mais c'est la fin de cette vidéo, floue. Fantastique. Je vous verrai après le week-end. 54. Est-ce que je dois connaître Photoshop avec Adobe XD: Bonjour à tous. Dans cette vidéo, nous allons voir si vous avez besoin compétences Photoshop en tant que concepteur UX. Je vais également vous montrer l'interaction entre l'utilisation de Photoshop, il y a des avantages et des inconvénients pour cela, l'utilisation de Photoshop avec Adobe XD. De plus, à la fin du cours, je vais vous montrer comment prendre cette image, qui est, je ne sais pas, une saison moyenne. Imaginez que si c'était l'hiver, [BRUIT] regardez que c'est l'hiver. Qu'en est-il d'un coucher de soleil ? [RIRES] C'est un lien très faible avec le cours, sauf que je vous montre le lien avec Photoshop, et parce que je suis le patron de cette vidéo et que j'aime vous montrer un truc sympa. Ce sera vers la fin de la vidéo. Mais pour l'instant, créons le suspense, ai-je besoin de Photoshop pour être concepteur UX ? tambour s'il vous plaît ? Oui, c'est la réponse courte. Vous avez probablement besoin de quelques compétences Photoshop principalement liées au masquage. Vous pouvez vous en sortir sans Adobe Illustrator, qui est dû à ce dessin de formes, vous pouvez faire les fondamentaux de XD, mais en termes de masquage correct, vous ne pouvez pas le faire, dans XD et vous avez besoin de Photoshop. Maintenant, nous n'allons pas expliquer comment utiliser Photoshop dans ce cours, mais si vous possédez des compétences Photoshop ou si vous finissez probablement par travailler avec documents Photoshop à un moment donné, Je vais vous montrer les avantages et les inconvénients de travailler avec des PSD et comment, si vous possédez certaines compétences Photoshop, interagissez mieux avec XD. Tout d'abord, faisons simplement quelques promesses d'importation de PSD. Si quelqu'un d'autre l'a fait, vous l'auriez peut-être réussi. Il y a quelques astuces et quelques bizarreries. Cela pourrait, à l'avenir , s'en sortir. XD est un produit relativement nouveau et l'interaction avec les PSD pour le moment n'est pas de 100 %, juste vous le savez. Apportons un PSD, allons importer des fichiers et apportons quelque chose qui fonctionne. J'ai dans vos dossiers d'exercices Photoshop 01, 02, 03, 04. Apportons 01, apportons ça et voici un PSD géant. Vous êtes comme [NOISE] donc il apporte des documents PSD. cool, et l'un des pros c'est que si vous regardez mon PSD, voici dans Photoshop, vous pouvez voir que je l'ai masqué pour vous. Il y a ce calque ici et l'arrière-plan qui le remplit. Ce qui s'est passé dans XD, c'est qu'il a été introduit dans les deux couches et je peux les voir tous les deux. Mais regardez ça, je peux aller dedans, rappelez-vous, double-cliquez et regardez, ils sont séparés. Je peux aller sur ce calque d' arrière-plan et le supprimer parce qu' il l'apporte. Jetons un coup d'œil, apportons-le dans notre panneau Calques, vous pouvez voir ici il y a mon PSD, j'ai l'ordinateur portable, et je peux soit cliquer sur cette couche ici ou ici et cliquer sur Supprimer, cela fonctionne. J'ai juste mon ordinateur portable ou je peux aller ici, vous voyez ces petits globes oculaires, je peux dire que l'arrière-plan est caché ou caché. C'est ce qui est génial avec l'utilisation du PSD, c'est que vous allez afficher un document, activer et désactiver les choses au fur et à mesure que vous en avez besoin. Allons le déplacer ici ou là-bas, il est assez grand. Apportons un autre fichier qui a quelques problèmes. Je vais passer au raccourci Command Shift I sur Mac, Control Shift I sur PC. Apportons cette 02. Jetons un coup d'œil à ce sujet dans Photoshop. Je vais l'ouvrir dans Photoshop ici. Le voici dans Photoshop, j'ai masqué ce calque supérieur, et je viens d'avoir cette boîte rouge en arrière-plan sans raison valable. [RIRES] Juste pour vous montrer qu'il est masqué. Des murs sur ce fond ici et je l'ai masqué très vite. Ce qui finit par se produire dans XD, c'est de regarder ça. Si je l'apporte et que je sors, voilà. Que s'est-il passé ? Il n'est plus masqué. Pour une raison quelconque, je ne sais pas pourquoi il ignore ce masque de calque. Je peux le convertir en objet intelligent si vous savez où c'est, cela ne résout pas le problème. Ce que vous pouvez faire si vous obtenez ce point, vous êtes comme si certaines parties ne sont pas masquées, mais il y a clairement un masque qui se passe ici dans Photoshop. Ce que vous pouvez faire, c'est que vous pouvez cliquer avec le bouton droit sur le masque et dire simplement l'appliquer. C'est mauvais et très destructeur, mais ça va y remédier. Je vais l'enregistrer maintenant, il ne se met pas à jour automatiquement. C'est une rue à sens unique, donc je vais l'importer à nouveau. Si vous ne connaissez pas Photoshop, c'est la seule chose que vous devrez peut-être faire. Allez voir si vous pouvez écraser les couches et vous débarrasser de tous les masques non destructifs fantaisie parce que cela fonctionne. Encore une fois, je peux aller à l'arrière-plan ici et regarder cela, cela a fait passer par le remplissage de cela. Où est-il là, je peux aller [BRUIT] ou [BRUIT]. Certaines choses sont vraiment cool, puis chose est juste un peu cassée. Ces éléments seront mis à jour à l'avenir, sorte que certains masques de calques ne se retrouvent pas. Une autre façon de travailler avec Photoshop, c'est juste de l'ancien copier-coller. Je suis dans Photoshop maintenant, je peux faire une sélection. Je vais simplement utiliser mon outil Rectangle Marquee pour l'angle de sélection, copier et utiliser l'édition, copier comme raccourci, aller à XD et vous pouvez le coller. Tant que ce n'est pas trop complexe, avec de petits masques et des calques de réglage, il ne fait que copier et coller. C'est un bon moyen simple si nous pouvons entrer dans trucs de Photoshop vers XD. Maintenant, faisons de la manière officielle, au moins ce que je pense être officiel, c'est utiliser les bibliothèques. Je vais faire un masque rapide ici. Encore une fois, je ne m'attends pas à ce que vous fassiez cela ou que vous soyez en mesure de le faire, si vous êtes excité par ce que nous faisons ici. Checkout, que ce soit le mien ou le cours Photoshop de quelqu' un d'autre, j'ai un essentiel et un cours avancé s'il est venu, mais je vais aller à Select Subject ce qui est une fonctionnalité douce et cool, et faites une sélection autour de celle-ci. Je vais ajouter un masque de calque en bas ici. N'oubliez pas que nous avons parlé de ce problème, si nous optons pour les bibliothèques qui semblent le résoudre. Les bibliothèques sont un moyen de partager entre les applications Adobe, c'est comme des bibliothèques partagées. Je vais aller dans Mes bibliothèques. Il y a ma bibliothèque pour la classe Adobe XD. Je vais fermer ça pour le rendre un peu plus grand pour tout le monde. Ce que je vais faire, c'est saisir mon outil de sélection et simplement cliquer sur maintenir et le faire glisser n' importe où et terminer ici. Il y va, donnons-lui un nom, un téléphone. Où est-il, il est là. Maintenant, dans XD, rappelez-vous que nos bibliothèques se trouvent sous le panneau Assets en haut ici. C'est en dessous, vous devrez peut-être vous souvenir d'un couple au sommet jusqu'à ce que vous trouviez la classe XD. Voici mon téléphone, mon pote, je vais les mettre ici, peut-être un peu gros. [BRUIT] Il est ici, de façon officielle. Nous avons un peu abordé les bibliothèques CC, si vous ne les avez pas utilisées auparavant, elles sont géniales. C'est un moyen de me connecter parce que je peux utiliser le même téléphone et le jeter dans mon fichier Vidéo Premiere Pro pour les médias sociaux et le mettre dans InDesign pour une mise en page de magazine, tous les actifs partagés avec les couleurs. C'est une façon simple de le faire, et cela résout le problème avec notre couche comme ça. Maintenant, quelques avantages de l'utiliser de cette façon sont que vous pouvez voir comme lié, qui pourrait être myopique, est à l'arrière dans Photoshop, je peux aller ici et c'est une rue à sens unique. Si vous ajoutez quelque chose de votre Photoshop à ce sujet, il s'agit de son propre article distinct. Si je l'ajuste maintenant, cela ne va pas ajuster l'élément de la bibliothèque. Je vais finir avec ça, j'en ai fini avec vous ne dites pas [BRUIT] Ne sauvez pas. Mais je peux ouvrir cette chose, c' est mon téléphone, mon PSD, ils ne sont pas connectés à l'original et si je fais quelque chose comme, je vais juste l' inverser, le commander, c'est vraiment facile et effacez Contrôler I sur un PC et cliquez sur Enregistrer. C'était très clair visuellement. Je peux entrer dans celui-ci. Je veux voir ce petit lien ici, je peux double-cliquer dessus, ici dans XD, ça prend un peu de temps, ça n'a rien fait. Un peu lent lors de la mise à jour, mais ça a juste changé. C'est l'un des avantages et évidemment si vous utilisez un InDesign ou Illustrator ou quelque chose d'autre, Premiere Pro, il sera également mis à jour. Le dernier que je veux vous montrer, cela n'a pas beaucoup [RIRES] à voir avec la conception de l' expérience utilisateur. C'est juste quelques-uns des, je suppose que je veux marquer pourquoi Photoshop est, je suis un peu fan de Photoshop, donc il y a des alternatives pour Photoshop. GIMP est malheureusement nommé, et quel est l'autre ? Canva [NOISE] ne peut pas se souvenir des autres. Mais il y a juste quelques choses que Photoshop fait de façon spectaculaire, c'est l'une des nouvelles. Vous pouvez l'ouvrir si vous voulez le tester vous-même, car c'est plutôt cool. Photoshop 04. Nous allons filtrer, et nous allons passer à Filtres neuronaux, ils pourraient changer le nom de celui-ci. Ils l'ont changé plus tôt. Je vais utiliser celui-ci appelé Landscape Mixer. Il a un nom boiteux, allume-le. Vous devrez peut-être télécharger cette fonctionnalité. Le téléchargement de cette fonctionnalité peut prendre un peu de temps. Il est peut-être parti d' ici, il est actuellement en version bêta. C'est incroyable, mais il se peut qu'il finisse juste dans le filtre quelque part, mais attention au mélangeur de paysage. Ici, je vais dire que vous venez de faire celle-ci, parce que j'en ai besoin maintenant pour l'hiver. Je vais juste faire glisser le curseur hivernal, reculer, regarder ça, voilà, prêt. [BRUIT] Allez, allons-y. Il vaut la peine d' attendre plus de décrochage. Coupe éditée pour qu'elle soit faite. Il a été fait, c'est tout de suite. Mais regardez ce [BRUIT]. C'est juste l'hiver. Je ne suis même pas sûr qu'il s'agisse de feuilles de thé, mais il y avait un lien vague avec le cours. Mais regardez ça, je n' arrive pas à croire à quel point cette chose est cool. Faisons-en un de plus et je vous laisserai partir. Faisons le coucher du soleil. Glissons vers le coucher du soleil jusqu'au maximum je veux juste voir des images ajustables, comme si vous essayiez de les relier ensemble, c'est un tel coucher de soleil. Regardez-le et je regarde cet arbre. Il est devenu estival et ensoleillé. En regardant cela, il y a plus de feuillage sur les arbres. J'ai une pièce avec certains d'entre eux, ouvre ce dossier, accédez aux images, aux sites d'images gratuits que je vous ai montrés, Unsplash et pixels et jetez-y un coup d'œil. C'est vraiment bon pour les paysages, ce n'est pas si bon avec les choses marines comme le bio, ou c'est vraiment bon avec les produits biologiques, pas bon pour les choses artificielles , mais pour les hommes. C'est pourquoi vous aurez probablement toujours besoin Photoshop comme option si vous voulez être concepteur UX, surtout si vous souhaitez vraiment être impliqué dans la conception côté interface utilisateur. J'ai été très excité et je veux que tu ailles faire Photoshop. N'oubliez pas que j'ai un cours essentiel et avancé si vous voulez les découvrir, mais ce sera tout pour cette vidéo. Je vous verrai dans le prochain. 55. Bannières de gret gret à l'image masquée dans Adobe XD: Bonjour à tous. Dans cette vidéo, je veux vous présenter cette chose, c'est un snack-bar. Je veux vous présenter le terme et vous montrer quand vous travaillez avec des images masquées, comment vous pouvez y intégrer des arrière-plans et des choses du genre. Allons voir cette vidéo. Première étape, snack-bar. De quoi parle-t-il ? Les snack-bars sont les petits messages qui apparaissent au bas d'un téléphone pour vous donner un peu d'information. Vous les avez déjà vus auparavant. Peut-être que celui-ci ici est une version Android qui apparaît en bas et explique simplement ce qui se passe, comme une petite collation. On les appelle aussi toast parce qu' ils surgissent et redescendent comme des toasts. Ils sont là pour vous donner des informations sans interrompre le flux de tels que vous, vous savez. L'opération principale, quoi que vous fassiez, la chose que vous êtes au milieu de celles-ci, vous donne de petites collations et des morceaux supplémentaires. Nous allons en créer un, c'est ce que nous fabriquons. Je vais créer le mien juste sous la page des détails du produit. Maintenant, nous allons apporter le fichier Photoshop, celui que nous avons créé plus tôt. Si vous êtes prêt, vous pouvez utiliser Photoshop O3, le masquer, l' apporter via votre bibliothèque ou si vous voulez tricher, lorsque vous n'avez pas beaucoup de compétences Photoshop, il suffit de l'apporter. Photoshop O5, c'est un que j'ai déjà masqué pour nous. C'est très gros. Je suis réticent à les faire de la bonne taille parce que, je ne sais pas, ceux que vous apportez vont être de la mauvaise taille aussi. Je vais l'apporter, le ramener à une taille raisonnable que vous avez vue au début , je vais couper dans la petite boîte à collations. Ma boîte à goûter sera dans ce cas, comme un support client. Il va s'agir de ces tailles un peu plus longues. Maintenant, ce que je veux faire c' est d'obtenir le texte en premier, êtes-vous là ? C'est ce que je vais faire. Je vais le décomposer un peu. Certains textes d'information, il n'est pas forcément cliquable. Le mien va l'être. Un petit truc pour tout ça. Il y a là un sous-jacent. Mais la commande U sur un Mac ou Control U sur un PC, soulignera et la commande B, contrôle B gras, il y a quelques bases. En fait, ils travaillent dans tous les programmes jamais réalisés. Je vais le faire , je ne veux pas couper ça en arrière-plan. Des choses bizarres qui arrivent, j'ai un masque. Tout d'abord, je veux qu'il soit au-dessus, donc je vais cliquer dessus avec le bouton droit de la souris, le mettre en avant. Je vais l'obtenir à la taille appropriée. N'oubliez pas que la rotation tourne juste à l'extérieur, à l'extérieur. Quelque chose comme ça est ce que je veux, et change la couleur d'arrière-plan. J'aime moins cet incolore que ça. [RIRES] Quoi qu'il en soit, ce que je veux faire, c'est le masquer à l'intérieur de ça. J'ai besoin de deux boîtes. Vous pouvez simplement utiliser celui-ci et celui-ci, et utiliser le masque make, le Maj de commande M ou l'objet Control Maj ou l'objet, ou est-ce qu'il crée un masque avec une forme ? Le problème, c'est que la boîte jaune a disparu, elle est creuse. Je ne peux pas le colorer maintenant, si j'essaie de le colorer, il ne fera rien, [RIRES] la colorera. Ce dont nous avons besoin, ce n'est que deux boîtes. Je vais annuler et je vais vous montrer quoi faire, je vais copier cette commande C, Control C sur un PC, puis créer mon masque. Permettez-moi d'utiliser mon raccourci. Ensuite, je vais juste le coller à nouveau. Si je viens de cliquer sur « Command V, Control V » sur un PC, je vais arrêter les raccourcis pour les choses faciles comme modifier et copier, coller, traiter. J'ai celui-là, c'est juste au sommet. Si je le déplace à l'arrière maintenant, c'est juste pour le copier et parce qu'il le colle là où il l'a eu, on se retrouve avec une boîte juste au-dessus de l'autre. Ce n'est pas idéal, mais hé **, ça marche. Je vais très vite dessiner une boîte fermée. En fait, j'allais l'accélérer. Je ne vais pas l'accélérer. Juste quelques choses. Je vais ajouter ça. N'oubliez pas de dessiner un cercle, juste un rappel, maintenez la touche Maj enfoncée pendant que vous le faites glisser vers l'extérieur vous donne un résultat complètement proportionnel, je pense que c'est le mot, la hauteur et la largeur sont les mêmes. Ce que je vais faire une croix. N'essayez pas de dessiner avec l'outil stylo, cela prend une éternité. Utilisez l'outil Type. Frappez votre « Plus ». Je vais utiliser un blanc. Je vais choisir la bonne taille et le bon poids. Le mien a déjà la bonne taille et le bon poids. Quelque chose comme ça. Ce que j'aime faire, c'est de le convertir en texte, c'est juste plus facile quand c'est juste une forme. Rappelez-vous comment nous avons fait cela. Nous allons aller à Object et nous allons passer à Path, convertir en chemin et nous avons fait cela. Je ne sais pas si c'est le cas. On y va. C'est ainsi que vous transformez le texte en forme. Je vais prendre les deux, les mettre au milieu et ensuite je vais passer à travers. Je vais vous y aller, rappelez-vous que si vous maintenez la touche Maj, il s'enclenchera. Rendez le mien un peu plus grand. Si vous trouvez que ce n'est pas parfaitement au milieu, c'est juste un problème avec très petites tailles de pixels dans XD, cela sera généré différemment dans le code. Voilà, c'est bien. Je vais regrouper le mien. Voyons là-haut pour que nous puissions le fermer. Je vais probablement l'ajouter ici. Je vais probablement ajouter une ombre portée. On y va. Ombre portée. Un plus gros, 3 par 3 sur 10, et le rend un peu plus sombre, va juste. On y va, ça va être un petit pop-up, un petit toast qui surgit puis redescend, mais vous pouvez l'éteindre si nécessaire. Nous en avons besoin pour plus tard. Nous allons faire un prototypage un peu plus chic et je voulais vous montrer masques dans des masques avec l'arrière-plan. Vous y allez. C'est ça. Vous êtes licencié. Je vous verrai dans la vidéo suivante. 56. Projet de cours - Ajouter des images: C'est encore cette fois-ci. C' est l'heure du projet de classe. Celui-ci est lié aux images. Je veux que vous ajoutiez des images à un document, ou du moins à votre conception mobile. Je ne suis pas inquiet de savoir exactement où, comment et combien, il s'agit plutôt de vouloir contrôler votre design ici. Mais lorsque vous recherchez des images, soit via des bibliothèques boursières payantes, si vous y avez accès, ou certains éléments gratuits comme sur des pixels spéciaux, mais gardez votre personnage à l'esprit lorsque vous êtes en train de choisir des images. Est-ce juste pour cette personne, est-ce que cela remplit mon mémoire ? Ensuite, je veux que vous ajoutiez images comme si c'était un bon endroit pour les images. Je veux que vous expérimentiez peut-être l' image de fond ici aussi. Même si vous décidez d'avoir une option 1 et une option 2, je veux que vous jouiez avec le flou des images et je veux aussi que vous construisiez deux pages pour moi, la page de confirmation, qui n'est qu'une carte en arrière-plan, vous pouvez prendre votre propre capture d'écran. C'est près de l'endroit où je vis. Mais vous pouvez décider de prendre une carte de l'endroit où vous ou du moins votre mémoire est défini, puis ajouter cette confirmation floue du haut. Exactement comment vous le faites, ce n'est pas important. Il ne s'agit plus que de s'entraîner avec elle. Je veux aussi que vous ajoutiez ce snack-bar. Je veux que vous le fassiez avec les images que je vous ai données ou si vous le remplissez, trouvez votre propre image, masquez-la, mettez-la en bas ici. Il n'est pas nécessaire de poser une question, quelque chose comme ça, certains comme une notification contextuelle, peut-être un savais-tu, ou une vente en cours, quelque chose comme ça parce que nous allons mener à animer cela plus tard. Ajoutez toutes les images, créez la barre de collation et ajoutez la carte et la boîte de dialogue à votre page de confirmation, puis téléchargez-la. Cela commence à arriver à un point où j'ai hâte de voir ce que vous avez fait. Je veux le voir sur Instagram, Twitter, notre groupe Facebook ou notre groupe LinkedIn. Téléchargez-le également dans la section affectations de ce site Web. C'est vos devoirs. Allez-y pour trouver des images et laissez votre design prendre vie. C'est ça. Je vous verrai dans la vidéo suivante. 57. Comment créer et utiliser les composants dans Adobe XD: Bonjour à tous. Dans cette vidéo, nous allons voir comment créer des composants dans Adobe XD. Permettez-moi de vous montrer rapidement ce qu'ils font. Je peux ajuster celui-ci appelé le composant principal, et tous ses potes ici regardent. Ils sont tous connectés, donc vous pouvez faire une chose une fois et ils viennent tous pour le trajet. Cela signifie que vous pouvez travailler sur de nombreux tableaux d'art différents, parfaits pour ce top nav, ajuster un et qu'ils circulent et s'ajustent également. C'est essentiellement ce que fait un composant. Permettez-moi de vous montrer comment en faire un. Faisons un composant. Tout d'abord, éliminons tous les composants que vous avez. Allons dans notre panneau Actifs et les styles de personnages peuvent tourner vers le bas. Je veux que vous cliquiez simplement sur le chevron pour le ranger. Sous Composants, il se peut que vous ayez déjà un tas de déchets. Si vous copiez et collez, nous l'avons fait plus tôt dans le cours. Rappelez-vous que j'ai dit que si vous copiez et collez des choses, cela pourrait faire passer ces composants ici. Nous venons de les dissocier et de passer à autre chose. Maintenant, nous allons bien comprendre ce qu'ils sont, et si vous avez déjà des choses là-dedans, cela signifie simplement que vous les avez copiées et collées à partir d'autres documents, alors supprimez-les dehors. Il suffit de cliquer avec le bouton droit de la souris et de les supprimer tous. Sélectionnez-les et appuyez sur Supprimer sur votre clavier, effacez les composants. Si votre vue est différente de la mienne, j'ai été sur la liste de tout ce cours. Vous pouvez passer en revue certains styles de personnages. Vous étiez peut-être sur ce point de vue et cela semblait très différent du mien. J'aime être en vue de liste pour une raison quelconque. À vous de décider, mais je vais être en mode liste, il est plus facile de les renommer. Comprenons les composants en créant un, sélectionnez tous ces composants. Je le fais sur cette autre page. Peu importe ce que vous transformez en composant. Je vais sélectionner toutes ces petites choses ici, et vous pouvez soit cliquer dessus avec le bouton droit de la souris, puis dire Make Component, utiliser le raccourci Command K ou Control K sur un PC. C'est vraiment une chose courante, donc il y a un raccourci très commun. Sous Object, même adage, où est-il ? C'est là, Make component. Comment puis-je le savoir ? Si je l'annule, pouvez-vous voir qu'il y a cette bordure bleue et si je touche ma commande K ou Control K sur un PC, elle devient verte ? C'est pourquoi je sais que c'est un composant. C'est l'un des indices visuels. Il est apparu dans ma bibliothèque de composants. Il apparaît également dans vos calques. Vous pouvez le voir ici, composant, donc il apparaît de différentes façons. Nous allons le renommer. C'est beaucoup plus facile à faire lorsque vous êtes sur liste de cette petite option ici, et que vous double-cliquez sur le mot, et nous allons appeler ce Top Nav. Vous pouvez le laisser comme composant 1. n'y a rien de mal à cela, sauf que vous serez jugé par d'autres concepteurs que vous êtes un nom de calque bâclé. Mais si je suis honnête et que nous sommes tous honnêtes, tout le monde a la composante 57 dans sa liste. Mais pour aujourd'hui, nous sommes adorables nommés Top Nav. Qu'est-ce qui est si utile dans les composants ? Laissez-moi vous montrer. J'ai celui-ci, je vais le copier et je vais le coller sur celui-ci et peut-être le coller sur celui-ci aussi. La différence entre ce premier, tout d'abord, est que vous voyez ici que l' on appelle le composant principal ou le premier, ou le parent ou le principal. Le mot technique est la composante principale. Quelle est la différence entre lui et celui-ci ? Ce sont les différences visuelles. Pouvez-vous voir le diamant vert épais ? Vous voyez ce type ? Il a un diamant vide, donc c'est le principal, est ce qu'on appelle l'instance. Vous êtes le patron, vous suivez ce que dit le patron, parent-enfant. Ce qui est génial, c' est que je peux attraper ce premier et que je vais zoomer pour que nous puissions voir les trois. Je peux m'y attarder. Vous vous rappelez comment je vais à l'intérieur de ces choses ? Je peux double-cliquer dessus. On y va, attrape ça et on regarde ça et on y va. Pouvez-vous les voir tous bouger ? Eh, allez, c'est la raison pour laquelle les composants sont vraiment bons, est que vous pouvez faire une chose, il peut passer sur 100 tableaux d'art différents, et vous pouvez le contrôler simplement en mettant à jour le composant principal. Voilà, ce que beaucoup de gens vont faire, c'est qu'ils garderont le principal ici sur la plaque de pâte ou sur une autre planche d'art, juste quelque chose hors du flux réel, et garderont tous leurs composants principaux. ensemble, puis ils copieront et collent l'instance. Si vous copiez une autre instance de ces gars, elle continuera à faire des doublons de cette instance principale. Cela signifie simplement que vous n' essayez pas de comprendre où le diable principal était [RIRES] sur lequel vous l'avez créé. Vous avez un endroit central. Ça veut dire ici, on peut dire que je veux faire bouger ça. Regardez-moi ça. C'est ainsi que vous créez un composant. Cela peut parfois être un peu douloureux si vous voulez le détacher. Vous pouvez simplement cliquer avec le bouton droit de la souris et dire que vous êtes Dissocier le composant, et il va simplement le décomposer maintenant. Maintenant, quand j'ajuste ça, le gars est comme s'il était nouveau son propre patron, c'est un ranger solitaire. Il peut faire ce qu'il veut. C'est ainsi que vous pouvez créer un composant. Je suis revenu du futur. Plus tard dans le cours, je suis comme, hé, je devrais probablement le mentionner plus tôt. Je vais vous montrer une petite chose à propos des composants, c'est que nous dessinons un interrupteur à bascule plus tard dans le cours, et c'est là que je suis comme, hé, je devrais probablement leur dire. Nous fabriquons ce petit interrupteur à bascule. C'est un rectangle, des coins arrondis. Vous cliquez dessus et il se déplace ici. Ça va être amusant, restez à l'écoute. Mais ce qui se passe, c'est dire que j'ai ça, que je prends ma couleur dans ta couleur. Si je les sélectionne tous les deux, et que je maintiens la touche Maj et que je le mets à l'échelle, elle évolue bien. Si je fais un double, que je le groupe et que je le redimensionne, cela fonctionne parfaitement. Mais si j'en fais un composant et que je fais exactement la même chose [RIRES] donc ce qui finit par se passer, c'est qu'il applique ce qu'on appelle le design responsive, et il essaie d'être très intelligent. Parce que c'est intelligent lorsque vous faites ça, regardez, c'est vraiment cool quand vous faites un bouton, vous voulez le rendre plus long, mais quand vous voulez redimensionner quelque chose, vous êtes comme moi. Je veux le rendre plus petit, il peut, pas toujours, vous causer des problèmes. Ce que vous pouvez faire, c'est simplement désactiver le redimensionnement réactif, puis travailler votre magie. Je ne vais pas faire tout ça comme avant. Il vient d'être étendu tout seul. Vous pouvez l'allumer et l' éteindre, regardez ça. Je peux le rendre vraiment petit. Retournez ça, et faites ce truc de fantaisie. C'est un mot du futur Dan. Laissez-moi vous montrer ce que nous fabriquons, il se cachait ici, je me suis dit, allons vous montrer. Regardez cet interrupteur à bascule. Regardez jusqu'où nous avons [RIRES] C'est plus tard dans le parcours, alors restez dans les parages. Regardez cet interrupteur à bascule. Regardez-moi ça. C'est dans les micro-interactions du cours. C'est le futur Dan qui revient pour vous aider à redimensionner la réactivité. instant, nous allons revenir à la création du composant. Il y a d'autres à vous montrer dans la prochaine vidéo, je vous y verrai. PS, ne dites pas à la prochaine version de Dan dans la vidéo suivante que j'étais ici. Deal. Continuez. 58. Différence les composants principaux et l'instance dans Adobe XD: Bonjour, tout le monde. Dans cette vidéo, nous allons faire passer nos composants au niveau supérieur. clair que le niveau suivant est Brush Script [RIRE] en tant que police, mais signifie également que je peux avoir ces instances uniques avec ce qu'on appelle des remplacements. Cela signifie qu'ils peuvent être des couleurs différentes, des tailles différentes, avoir du texte différent , et regarder ça, je peux aller ici et dire que je veux toujours en contrôler une partie en utilisant mon composant principal. Vous êtes prêt pour une police délicieuse. On y va. Ils sont tous mis à jour, mais vous pouvez voir que le texte reste unique. Celui-ci dit Acheter maintenant, celui-ci dit toujours En savoir plus, mais ils sont quelque peu contrôlés par ce composant principal. Jetons un coup d'œil à notre Comic Sans extravagance. Nous allons commencer par ce bouton ici. Je vais juste les copier et les coller, puis les déplacer ici juste parce que. C'est là que ça va. Je veux juste créer un bouton de base, on y va. Je vais commencer par ça en fait. [RIRES] C'est parfait maintenant. J'ai ce bouton. Ce serait un grand prétendant à un composant. Oui, car je veux l'utiliser plusieurs fois. Je vais sélectionner à la fois le texte et l'arrière-plan, eh bien, mon petit rectangle de bouton. Je les sélectionne tous les deux. Peut-être une commande K ou un contrôle K, et maintenant c'est un composant. Maintenant, je devrais le nommer. Lorsque vous nommez des choses comme des boutons, ce serait vraiment courant. Vous ne voulez pas l'appeler bouton Acheter maintenant [BRUIT] car nous utiliserons ce bouton pour de nombreux mots différents. Ce serait le bouton Acheter maintenant, ce sera le bouton En savoir plus, c'est le bouton Supprimer mon compte. Ce que je ferais, c'est que je dirais que c'est un bouton, et ce sera mon bouton moyen parce que je prévois d'avoir un petit et un gros bouton plus tard. C'est ça. Vous le verrez beaucoup. Il s'agira de soulignement BTN MED peut-être Primaire car il peut s'agir de votre couleur primaire. n'y a pas de règle officielle. Je ne sais pas pourquoi. J'aime bien le bouton, et j'aime les traits d'union, et j' aime qu'on l'appelle moyen. [BRUIT] Mais vous pouvez faire tout le langage cody, si vous préférez ainsi, et vous verrez les deux. Je vais rester assez vague le moment et nous parlerons d'autres choses que vous pouvez faire. Nous avons un nom, nous avons un bouton. Faisons deux d'entre eux. Rappelez-vous que le plus haut ici s' appelle notre principal et c'est une instance du principal. Faisons en fait trois d'entre eux. Tout le monde en a trois pour moi. Celle-ci ici, nous savons que si j' ajuste ce dernier en double-cliquant dessus, nous pouvons tous les ajuster. Si j'ajuste le texte sur le maître, il s'agit maintenant de mon bouton En savoir plus. Je devrais probablement centrer mon texte et le déplacer au milieu. Lorsque je modifie le texte pour ma suppression, il s'ajuste parfaitement à gauche et à droite. C'est l' option centrale du texte. Ce que nous pouvons faire, c'est que nous pouvons laisser cela comme « Acheter maintenant ». Maintenant, je vais le laisser au centre « En savoir plus ». Ce que nous pouvons faire, c'est ces instances que nous voulons réellement changer. Vous me dites : « Eh bien, je ne veux pas qu'ils soient tous appelés En savoir plus parce que vous vous retrouverez avec un bouton appelé bouton En savoir plus, bouton Acheter maintenant, tout bouton, Ts & C. » Ce que vous pouvez faire, c'est que ces instances peuvent être ajustées. Le code remplace. Cela signifie que je peux dire que c'est mon achat maintenant. Celui-ci peut être mon bouton Effacer ou mon bouton Supprimer, ou autre chose. génial, c'est que regarde ça, ce maître, il peut contrôler tout ce qui n'a pas été ajusté ici. Regardez ça. Créons-en un autre. On y va. Cela va-t-il être logique ? J'espère que c'est le cas. Vous pouvez ajuster les textes de ces instances pour les rendre uniques. Vous pouvez y voir notre petite option, ajuster, voir la petite chose ? Il a des dérogations. Tout ce que vous avez modifié est considéré comme un remplacement pour le maître. Les choses que vous n'avez pas modifiées comme la position ou la couleur d' arrière-plan, nous n'avons pas changé cela dans tous ces éléments. Regardez ça. Si je change la couleur d'arrière-plan en double-cliquant dessus pour entrer, vous pouvez dire que vous êtes cette autre couleur et qu'elles changent toutes. Mais si je défais, si je dis ce bouton Acheter maintenant, je vais le remplacer et que je dis : « Hé, tu n'es pas le patron de moi, je vais être cette couleur. Non, cette couleur, je vais être cette couleur. » [RIRES] Ce gars, notre petit ranger solitaire, a été primé. Si je vais voir ce maître maintenant et que je dis : « Hé, je veux que tout le monde soit vert. » Il y a du vert. Voyez-vous ? Tout s'ajuste. Il n'a pas été changé. Nous n'avons pas changé le contexte de celui-ci ou de celui-ci, mais ce type, nous avons dit : « Hé, soyez quelque chose différent », nous n'avons pas dérogé. C'est là quelques-unes des parties puissantes de tout ça. Nous pouvons avoir un tas de boutons qui aspect différent mais qui sont contrôlés par un aspect différent mais qui sont contrôlés par ce bouton principal ou principal. Est-ce logique ? Ce texte a commencé par en savoir plus, puis nous l'avons changé en Acheter maintenant, et nous l'avons changé en Effacer. Ce sont des remplacements. Mais ce type appelé En savoir plus, si je change ça en bouton ? Vous comprenez ce que je veux dire ? Tout ce qui n'a pas été modifié sera toujours remplacé. Tout ce que vous avez changé comme ces deux gars va essayer accrocher à jamais et à leur nouveau style. Vous pouvez finir par écraser tout, mais c'est une excellente façon d' avoir un bouton générique qui sort. Vous pouvez réellement les faire sortir d'ici plutôt que de simplement dupliquer leur maître et dire : « En fait, je veux que ce type soit cette autre couleur, et je veux que le texte soit plus visible. » Mais j'ai un certain contrôle. Je peux m'y attarder et dire : « Vous allez maintenant avoir 10 pixels dans les coins. » Tout ce qui n'a pas été changé en ce qui concerne les virages arrive pour le trajet. C'est la différence entre les instances principales et les instances. Ils peuvent être légèrement ajustés pour les rendre personnalisés , mais ils ont un certain contrôle principal global. Est-ce que ça a fonctionné ? Si ça a marché, d'accord. [RIRES] Faisons un autre. Dans le moment aussi, si je vais [BRUIT], regardez ça. Si je maintiens Option enfoncée sur mon Mac ou sur un PC, je saisis juste le bord de cela, glisser, regardez ça, nous pouvons ajuster la taille. [BRUIT] Mais que se passe-t-il si je vais voir ce type ? C'est notre rebelle. C'est le gars qui veut tout faire seul. Si je dis : « Je vais être ce bouton géant, vous n'êtes pas le patron de moi. » Mais ce maître dit : « Hé, soyez d'une taille différente. » Regardez ? Les remplacements fonctionnent sur toutes sortes de choses. Tout ce que vous pouvez penser, vous pouvez le remplacer et il ignorera les modifications apportées au maître. Juste pour prouver le point, je vais aller sur celui-ci et dire que vous êtes Comic Sans, vous vivez la vie sur le bord. Celui-là, je vais voir celui-ci, et je vais dire : « Non, je vais être Impact. » [RIRES] Deux de mes polices détestées. Cela va changer, l'exception de celui qui a le surclassement, mais ça devient pratique. C'est un grand exemple de tous les différents bits. où ça devient très pratique, c'est ici. Regardez ça. J'ai cette navigation. C'est la navigation que j'ai faite. N'oubliez pas que si j'annule ou que je fais un zoom arrière, si je change le maître , que j'ai ici, vous pouvez l' avoir ailleurs. N'oubliez pas que si je change de maître, ils changent tous. Mais celui-ci ne change pas. Vous me dites : « Eh bien, dois-je faire deux navigations ? » Non, parce que vous pensez : « Nous pourrions faire ce que vous avez fait avec le bouton », où nous l'ajustons simplement. Celui-là que je vais supprimer, vous partez. Je vais utiliser une instance. Peu importe si vous dupliquez celui-ci, dupliquez celui-ci ou faites-le glisser hors d'ici. Pas celui-là, où est-il ? Top Nav, ça n'a pas d'importance. C'est un exemple et rien n'a changé à ce sujet parce qu' il a le vieux diamant blanc ennuyeux , mais c'est de la mauvaise couleur. Ce que je peux faire maintenant, c'est creuser là-dedans et entrer dans celui-ci et dire : « Vous êtes maintenant une couleur de police blanche, et vous allez être une couleur de fond de blanc. » Vous attendez là. Je vais accélérer ça. Vous y allez. En voici un exemple. Cela signifie simplement que je peux encore entrer dans notre maître, là, et faire des ajustements et avoir de nombreuses versions différentes de cela, un mode lumière et un mode sombre. Ce n'est qu'un simple changement, mais vous pouvez voir le pouvoir sur ce point, espérons-le, maintenant. Les composants sont géniaux. Quelques choses, vous pourriez être comme, ce type ici a un peu trop de pouvoir. Il pense qu'il ne peut être contrôlé par personne et nous devons le replonger. Je ne sais pas où [RIRES] Je vais avec mon patron et mon analogie subordonnée ici, mais bon, nous sommes allés jusqu'ici. Ce que vous pouvez faire, c'est que vous pouvez cliquer dessus avec le bouton droit de la souris et dire : « En fait, nous allons simplement vous remettre à l'état principal. » Maintenant, regardez qui est le patron ? Vous pouvez y retourner si nécessaire. Peut-être faire quelque chose de bizarre et vous vous dites : « Pourquoi ne s' adapte-t-il pas au principal ? » Vous pouvez le faire, le réajuster. Vous pouvez décider du contraire et vous vous dites : « Je ne veux pas. » Parce qu'au moment où le positionnement de cette situation ne cesse de changer, vous vous dites : « Non, je ne veux plus que ce soit une instance. Je ne veux pas qu'il soit connecté du tout. » C'est peut-être le début d'un nouveau bouton ou autre chose. Vous pouvez cliquer dessus avec le bouton droit de la souris ici et dire qu'il ne dit pas déconnecter ou quoi que ce soit, il indique simplement Dissocier le composant. rappelez-vous plus tôt pendant le cours que je vous ai demandé de le faire lorsque nous avons copié et collé à partir des kits d'interface utilisateur d'autres personnes ? Nous venons de faire ça. C'est pourquoi. Nous venons de le casser pour qu' il ne soit pas connecté au document de quelqu'un d'autre, au bouton de n'importe qui d'autre. Ce n'est maintenant qu'un bouton de rôle régulier seul, faisant son propre truc. Il pourrait maintenant devenir sa propre composante. Nous pouvons faire de lui un composant et il pourrait être [NOISE] Button Large et il pourrait avoir ses propres instances ou enfants. Vous y allez. Il est maintenant le patron de son propre petit clan. D'autres choses qui sont utiles, pour le moment, nous avons un petit groupe de composants. Plus tard, vous en aurez peut-être des centaines ici, s'il s'agit d'un gros projet d'interface utilisateur sur lequel vous travaillez. Mais il y aura des moments où nous nous demandons : « Ce bouton, où est-ce ? » Vous pouvez le survoler au-dessus. Voyez-vous qu'il y a trois exemples de cela ? Il y a quatre exemples de celui-ci ? Il y en a cinq ? Vous êtes comme : « Où est utilisé ce bouton ? » Vous n'êtes même pas sûr. Allons ici. Cliquez dessus avec le bouton droit. Vous pouvez dire Surligner sur le canevas. Cela ne fonctionne pas [RIRES] à moins que vous ne soyez zoomé jusqu'à l'extérieur. Il l'a mis en évidence. Qui se souvient du raccourci permettant de zoomer voir tous les tableaux d'art, tout ce qui se passe ? C'est vrai. Commande 0 sur Mac, Contrôlez 0 sur un PC. Vous y allez. Vous pouvez le voir, il est surligné en bas. Ce n'est pas très utile, mais nous avons choisi de faire le bouton Large et de garder un œil ouvert. C'est là-bas. Passons à Surligner sur le canevas, il est surligné là-bas. Mais vous me dites  : « Ce n'est pas utile. » Mais n'oubliez pas que vous pouvez zoomer sur les éléments que vous avez sélectionnés. Vous dites : « C'est vrai. Commandement ou contrôle 3. » Non, deux, non, trois. [RIRES] Cela ne fonctionne pas si vous en avez plusieurs sélectionnés. Où est-il ? Vous y allez. Il ne les sélectionne pas de cette façon. Je mens. Je reprends ça. Vous ne pouvez pas commander 3 pour zoomer avant. Tu m'as fait passer pour un idiot, XD. La prochaine chose que je voulais vous montrer est celle-ci ici, Modifier le composant principal. Il se peut qu'il y ait un moment où vous vous dites : « J'ai fait cette chose ici », et vous ne savez pas où est le composant principal. Je sais que c'est là. Avec le petit diamant, vous disiez : « Je sais que c'est là-haut. » Mais ici, dans des semaines à travailler sur le projet de quelqu'un d'autre, vous vous dites : « C'est le cas. Mais où est le principal ? » Je peux dire soit cliquer dessus avec le bouton droit ici et soit aller Modifier le composant principal ou ici, même chose, Modifier le composant principal et ce qu'il va faire, il devrait y sauter. Hé. Que se passe-t-il si je le supprime ? Wow, [RIRES] Que se passerait-il si vous le supprimiez ? Cela semble irrécupérable. Mais XD fait quelque chose de fantaisiste là où vous allez, cliquez avec le bouton droit de la souris, même s'il est parti et qu'il n'est pas du tout dans votre document. C'est une excellente façon de garder les choses bien rangées. Vous pouvez toujours modifier un composant. Ce qu'il va faire, c'est qu' il suffit de l'ouvrir et de le jeter sur la page pour vous. [BRUIT] Ce n'était pas en bas avant, il est juste allé ici, c'est l'espace et l' a ouvert et l'a juste jeté dessus. Vous avez maintenant un composant principal. Lorsque vous travaillez avec des documents d'autres personnes, il se peut que vous constatiez qu'il n' y a pas de composant principal. Celui-ci est supprimé ici. Vous direz : « Où est cette chose ? » Allez dans Modifier le composant principal et il le jettera quelque part sur votre document et vous y amènera. Tu dirais  : « Oui, il est là. » Maintenant, je peux passer en revue et faire mes ajustements. Mais il n'a pas besoin d'être là, juste pour que tu saches. Une dernière chose est que vous pourriez dire : « Lequel est celui qui est réellement dans mon panneau Composants ? » Je vais le fermer, alors que c'est assez facile parce que c'est visuellement tout à fait différent, mais vous vous retrouverez avec beaucoup de boutons qui se ressemblent à distance et il est difficile de dire que taille d' eux dans les minuscules composants pour vous. Vous pouvez cliquer avec le bouton droit sur n'importe lequel de ces types. Il arrive parfois que vous cliquiez en arrière-plan avec votre outil Sélection. Sélectionnez-le une fois, cliquez dessus avec le bouton droit. Il y en a un qui indique Reveal Component dans le panneau Assets. Il va le révéler, le regarder. Il l'a ouvert et mis en évidence. Vous savez que c'est la personne qui contrôle celle-ci. Nous sommes allés un peu plus loin avec les composants, regardant les principaux et les instances. Le vrai avantage est que vous pouvez effectuer remplacements ou apporter de petites modifications aux instances tout en conservant une grande partie du contrôle du composant principal. C'est ça. Je vous verrai dans la vidéo suivante. 59. Comment créer des états de transmission des composants dans XD: Bonjour mon ami, regardez ça. Le bouton a un état de survol. Regardez-moi ça. Je ne fais rien, je me renverse. C'est l'un des autres avantages pour les composants. Permettez-moi de vous montrer une option plus ennuyeuse. On y va, regarde mes boutons radio. Regardez ça, excitant un continuum en avant-première. Ils sont appelés états des composants, et je vais vous montrer comment les créer maintenant dans XD. Avant de commencer, juste pour que vous sachiez, j'ai nettoyé tous les boutons que j'avais. Des boutons partout. Ce que j'ai fait, c'est que je n'ai créé qu'un nouveau bouton. Ce n'est pas un composant, ce n'est rien. C'est juste un rectangle avec du texte au milieu et je vais choisir ma police d'entreprise, les apportant, mais aussi la police des polices est venue et c'était des mots durs. Nous avons choisi un peu de police. Tout d'abord, pour créer notre état, nous devons le sélectionner et en faire un composant comme avant. Une commande K sur Mac, Control K sur un PC. Nous allons travailler sur notre maître dans ce cas. Cela ne fonctionnera pas si vous essayez de faire des états sur l'instance. N'oubliez pas que si vous travaillez sur l'instance, vous devez cliquer dessus avec le bouton droit de la souris et dire « Modifions le composant principal », et cela devrait vous amener à ce composant principal. Je vais supprimer celui-là. Je suis dans les principaux, il y a le diamant. Ici, il y a ce truc. Une fois que vous l'avez créé dans un composant, il y a celui-ci. Je suis dans la composante principale. Il s'agit de l'état par défaut. Ce que nous pouvons faire, c'est que nous pouvons ajouter un état et nous allons ajouter ce survol pour commencer. Survol. Nous ne ferons rien d'autre et rien ne marchera. Nous avons l'état par défaut, l'état de survol. Il se peut que vous deviez cliquer sur désactivé, puis cliquer de nouveau. Il faut juste que ce soit différent. Si je clique sur « Hover State » pour qu'il soit mis en surbrillance, je peux dire double-cliquez pour aller à l'intérieur. Je peux dire que vous allez être ma version plus sombre. Cliquez sur Retour à l'extérieur, puis cliquez dessus. Maintenant, regardez ça. J'ai un état par défaut et un état de survol. Je n'ai rien à faire d'autre. Commençons par être sur un état par défaut , puis nous allons le prévisualiser. En fait, ça doit être sur l'un de mes plans de travail. Je vais les mettre sur lequel ? Allons sur ma page d'accueil. Je vais les déplacer ici. Je vais cliquer sur le nom. Prévisualisons celui-ci et il est là. Vous êtes prêt ? J'ai choisi une couleur que vous ne pouvez pas voir, ça marche. Pour le frapper comme état, il suffit de cliquer dessus une fois. Ici, vous pouvez dire : « Ne choisissez pas cette couleur parce que vous ne pouvez pas la voir. » Je vais double-cliquer dessus pour entrer dans ce petit groupe et je vais dire : « Ne choisissez pas cette couleur. Nous allons utiliser celui-là. Allons-y pour un super noir. » Revenons maintenant à notre avant-première. N'oubliez pas qu'il sera par défaut quel que soit le premier dans mon flux, moins que vous ne cliquiez sur le nom au-dessus du haut ici. Jouons-le et regardons ça. Il ne se passe rien. Encore des problèmes. C'est un problème que vous allez rencontrer. Je vais fermer ça. Ce qui se passe, c'est qu'il se souviendra de la dernière chose que j'ai cliquée ici. Vous devez être dans l'état par défaut. Celui que vous avez sélectionné sera celui vers lequel il bascule ou prévisualisera. Je vais être sur l'état par défaut, puis le prévisualiser, et maintenant le survol fonctionnera. Ouah. J'ai rendu les choses plus difficiles qu'il ne devrait l'être. Mais c'est ainsi que faire un état de vol stationnaire. C'est vraiment facile. L'état de survol est l'un des paramètres par défaut. Il suffit de se rappeler que lorsque vous avez fini de travailler sur l'état de survol, revenez à la valeur par défaut, puis cliquez sur désactivé et cela gardera le souvenir de cet état. L'autre état vraiment commun est l'état de bascule. Je vais le faire pour cette page ici, cliquez sur le nom Command ou Control 3 pour zoomer. Ce sera ces petits boutons radio ici. Je vais zoomer avant. Si vous n'en avez pas fait un, vous suffit de dessiner deux cercles. Je vais les sélectionner et je vais faire le mien ici. Voici juste un cercle avec un remplissage sur un cercle avec un trait autour de l'extérieur. Je vais les sélectionner tous les deux. Nous pouvons utiliser notre commande K ou notre Control K, ou parfois de façon aléatoire, je clique sur ce bouton, fait la même chose. Composant Plus. Il m'a donné la même chose, j'ai eu mon petit composant principal. Ce que je veux faire, c'est que je veux un autre état, et c'est l'autre état par défaut appelé toggle. Au lieu de l'appeler bascule, je vais l'annuler parce que le basculement n'a pas beaucoup de sens. Ce que je veux, c'est sur l' état par défaut pour qu'il soit allumé, puis sur l'interrupteur d'arrêt. Je veux aller à l'intérieur d'ici et vous pouvez le supprimer et cela fonctionnera dans ce cas , mais c'est en fait un peu pratique aussi. Au lieu de le supprimer, baissez simplement l'opacité de la chose que vous voulez disparaître. Cela signifie simplement que plus tard, si vous entrez dans des états plus complexes , la supprimer entraîne des problèmes futurs, alors que la réduction de l'opacité signifie que vous pourrez la réactiver si nécessaire. Croyez-moi, il est plus facile de réduire l'opacité. J'ai deux états. J'ai eu la valeur par défaut et l'état hors état. Vous décidez de la façon dont vous souhaitez qu'il commence à se souvenir en sélectionnant lequel, par exemple, sur l' état de survol du bouton. C'est l'état dans lequel je veux qu'il soit par défaut. Je vais me débarrasser de celui-ci et le remplacer. Donnons un aperçu. C'est sur la page. Vous devez cliquer sur la page pour que la page soit sélectionnée ou simplement un objet sur la page et cliquer « Lecture » pour savoir quelle page vous parlez. Vous pouvez le voir. Regardez-moi ça. La valeur par défaut est celle-ci. Vous y allez. Basculer par défaut, pouvez-vous voir ce fondu ? Ce n'est pas vraiment ce que je veux. Nous allons également ajuster cela. En fait, avant de faire cela, vous pouvez simplement l'utiliser pour, ce n'est peut-être pas pour le prototypage ou l'animation, vous avez juste un bouton et vous l'avez utilisé. Il peut s'agir d'une coche comme une case à cocher. Vous utilisez un tas d' entre eux. Alors, au lieu d'animer ou quoi que ce soit, vous partez, en fait, je veux que celui-ci soit désactivé et celui-ci sera allumé. C'est tout ce que vous utilisez pour n'avoir qu'une seule unité. Vous pouvez copier et coller, puis l' allumer et l'éteindre et le réactiver. Revenons à l'animation, nous n'aimons pas le petit fondu. La raison pour laquelle lorsque nous avons ajouté l'état de bascule, ce qu'il fait, c' est que vous le configurez vous-même et que c'était un peu douloureux dans le bouton. Mais maintenant, ce qu'il fait c' est en fait un tas d'animation pour vous. Vous pouvez l'ajuster ensuite si vous le souhaitez. Vous pouvez entrer là-dedans et dire que vous êtes un prototype. Il a édité ce truc ici. Il ne va nulle part, mais il indique cet état par défaut. Lorsqu'il est tapé, il s'anime automatiquement à l'aide d'un accélération de 0,3 seconde et c'est le fondu. Ça va se calmer. Ce que je veux faire, c'est dire taper dessus. Je ne veux pas que vous vous animiez automatiquement, je veux que vous fassiez une transition et je veux que l'animation soit nulle et que vous vous en débarrassez. Maintenant, il va faire une transition, mais il ne va pas faire d'animation. Donnons un aperçu maintenant, passons à la sélection, appuyez sur « Lecture » et maintenant c'est juste un vieux bouton radio ennuyeux. Le fait dans un sens, mais regardez ça, il s'estompe. Vous devez le faire des deux côtés. Je l'ai fait pour l'état par défaut. Faisons ça pour les hors-état. Même chose, pas d'animation automatique. Transition. J'aimerais que la non-dissolution maintenant le fasse des deux côtés. Donnons une pièce de théâtre. Animation ennuyeuse, mais plus comment fonctionne notre bouton radio. Dans ce cas, toutes les animations, ces instances se souviennent des fondus. Ils ont tous été mis à jour ? Jetons un coup d'œil. Ils l'ont peut-être fait. Je crois qu'ils n'ont pas regardé ça. Ils sont tous mis à jour. L'animation, si vous ajustez le maître, elle est mise à jour. Cela ne ressemble pas à un bouton radio normal. Si vous les connaissiez normalement, vous ne pouvez en choisir qu'un. Vous ne pouvez pas y arriver et c'est hors du champ d'application de XD, mais vous comprenez l'idée. C'est l'état de bascule. Il va faire des allers-retours. hover est celui qui vole. Vous savez ce que je veux dire. C'est là que je vais laisser celui-là. Il y en a un peu plus que je veux vous montrer dans la prochaine vidéo. Mais bon, nous avons besoin d'une pause. J'ai besoin d'une pause. Va prendre une tasse de thé. Est-ce que vous voyez et moi vous verrons dans la prochaine vidéo et nous couvrirons un peu plus de certains états dans Adobe XD. Dans une seconde. 60. Projet de cours 11 - Boutons: Bonjour, tout le monde. C'est l'heure du projet de classe. Nous allons créer des boutons, alias des composants. Il y en a deux à faire. Juste pour définir les règles de base, celle-ci sera l'affectation de classe la plus chaude que vous ayez faite. [BRUIT] Ce sera difficile. Soyez donc prêt. [RIRES] Je ne sais pas pourquoi j'ai zoomé. [RIRES] Vous allez faire deux boutons. L'utilisation de composants et d'états peut être délicate, vous y arriverez. J'ai ces deux exemples. Vous allez créer un vieux bouton normal comme nous l'avons fait ici, le bouton Acheter maintenant et en savoir plus, puis une coche, qui est fondamentalement la même que celle que nous avons créée précédemment. Alors, le bouton, parlons d'abord de celui-ci. J'aimerais que vous fassiez un aperçu. C'est ce que je veux. Je veux que tu sois capable survoler, puis de changer. Le mien ne change que légèrement , donc c'est une chose. Une chose que je devrais souligner maintenant, vous pensez peut-être déjà que c'est peut-être comme, le sait-il ? Je sais que vous ne pouvez pas survoler un téléphone portable. Vous pouvez agiter votre doigt au-dessus, mais il ne change pas réellement. Je suppose que ce cours nous apprend la fois les boutons de bureau et les appareils mobiles, mais nous nous concentrons simplement sur la création de la version mobile réelle. Faites le vol stationnaire même si c'est un peu bizarre sur un appareil mobile. Ce que j'aimerais que vous fassiez, la règle est que ces deux-là doivent partager le même composant principal. Regardez ça, ils partagent tous même s'ils sont visuellement très différents, je veux que vous voyiez si vous pouvez le faire. Dans mon panneau de ressources. Fermons ça. Il y a mon bouton là. Voici mon principal, et c'est juste un bouton que j'ai choisi différemment. C'est assez délicat même si les vidéos que j'ai faites, les gens paient pour la délicatesse. Si vous voulez rester moins délicat, si vous trouvez ce cours difficile, ne faites pas de ligne autour l'extérieur avec des remplissages et des trucs différents, faites simplement une légère variation de couleur là-dessus . Bouton Acheter maintenant pour en savoir plus. Cela vous fera gagner du temps/pour le rendre plus intéressant, c'est que lorsque vous y jouez, je veux que vous le connectiez. Donc, lorsque je clique sur le survol ci-dessus fonctionne, mais lorsque je clique dessus, il saute sur la page de paiement, et le fait. Il y a quelque chose que nous n'avons pas fait, nous avons beaucoup conçu, si vous voulez une page de prototype, elle a automatiquement ajouté cette animation et nous apprenons avant que nous puissions la désactiver. Allons-y. Nous ne voulons pas le fondu, nous voulions juste sauter. Vous pouvez dire aller à la transition et je ne veux pas de dissolution, voulais juste sauter tout droit. C'est ce qu'est cette chose. C'est le dire, ça ne va nulle part. Il va juste à ce truc électrique. Cela dit simplement que l' animation qui se déroule ici ne sera nulle part. Mais je veux aussi qu'il aille ailleurs. Vous pouvez effectuer deux actions sur un seul composant. Donc, dans ce cas, je vais dire que vous allez voir ça. Voyez-vous que vous pouvez en avoir plus d'un ? Vous pouvez voir maintenant que lorsque je touche celui-ci passe à la valeur par défaut. Il va taper, passer à cette animation de page, dissoudre ou aucune, laissez-moi y aller. Il va aussi faire une transition de zéro lorsqu'il est plané . Vous pouvez en avoir plus d' un, vous pouvez en avoir trois. Je ne sais pas pourquoi vous en auriez trois ? Ça va paniquer parce qu'il va essayer d' aller sur les deux pages. Je ne sais pas où il va aller, mais sachez juste que vous pouvez obtenir un bouton pour faire plus d'une chose. Dans notre cas, jouez notre animation survolée. N, allez sur une page, enregistrez pour en savoir plus. Il y a le bouton En savoir plus. Je voulais aller sur celui-ci, les détails du produit, en savoir plus sur ce produit. Accédez à l'aperçu. l'heure actuelle, cela va nous emmener à la deuxième partie de notre projet de classe et plus encore. Il y a ceci. C'est comme le bouton radio. Je veux voir si vous pouvez y arriver. C'est comme un interrupteur à bascule. C'est le vol stationnaire, c'est le bascule. Pour ce qui est de la tique, je viens dessiner ça. Je l'ai dessiné avec un outil à épingle. Vous pouvez également le dessiner ou trouver quelque chose à partir d'Icone Finder ou d'un SVG quelque part, kit d'interface utilisateur de quelqu'un d'autre. Ce que vous trouverez lorsque vous le dessinez, votre tique ne ressemblera à aucune autre tique. [RIRES] C'est vraiment difficile de dessiner comme la tique, j'ai l'impression d' y arriver finalement, mais j'ai redessiné ce billet quelques fois. Laissez-nous vérifier. Bouton Acheter maintenant, ils doivent être le même composant principal et le même état de survol lors de cette deuxième interaction prototype. Lorsque vous cliquez dessus et que vous accédez à cette page, cochez, comme un bouton radio, activez et désactivez. Lorsque vous avez terminé, enregistrez une vidéo montrant que vous interagissez avec elle. Sur un Mac, rappelez-vous que c'est ici, PC, c'est là-bas. Rappelez-vous également que certains des endroits où vous pouvez la télécharger, en particulier sur les réseaux sociaux, il suffit de jeter la vidéo là-haut et elle la traite et c'est très bien. Souvent, avec les devoirs et leurs commentaires, vous devrez peut-être télécharger cette vidéo que vous créez sur YouTube, Vimeo ou Behance ou un autre hébergement vidéo et simplement partager le lien. Si vous l'essayez dans la dernière vidéo précédente et que vous ne pouviez tout simplement pas enregistrer une vidéo pendant toute la vie , c'est bon. Il suffit de prendre une capture d'écran et de la télécharger. Deux captures d'écran, une allumée. C'est ça, mes amis. J'aimerais bien voir ce que vous faites, partagé sur les réseaux sociaux également. Nous commençons à arriver quelque part. On se voit dans la vidéo suivante. 61. Comment utiliser la grille répétitive dans Adobe XD: Salut tous. Cette vidéo, je vais vous montrer probablement la fonctionnalité la plus excitante d'Adobe XD. Vous pouvez cliquer sur les choses et sélectionner un petit COD. J'ai besoin que vous sachiez aussi, imaginez que si vous pouviez y aller, regardez ça, il y en a plein. Mais que se passe-t-il si nous avions besoin de quelques images ? Écoutez, je peux simplement faire glisser quelques images et elles sont toutes mises à jour. Je peux jouer avec l' espacement et les séparer tous de l'étonnement dans la grille de répétition. Permettez-moi de vous montrer comment cela fonctionne dans Adobe XD. Pour commencer, page Détails du produit, je l'ai allongé et j'ai déménagé un petit snack-bar là-bas. Je construis tout ce travail acharné que nous avons accompli et je pourrais aussi me débarrasser de l'image et l' éteindre pour un remplissage comme revenir à la case 1. Si je faisais cela et qu'il y en a plusieurs, il est vraiment facile d' utiliser la grille de répétition là-dessus. Je vais sélectionner tout ce que je veux en faire partie. Je le fais souvent tortiller pour m'assurer que j'ai tout et que je n'ai rien que je n'aurais dû avoir. Vous allez devoir le regrouper, mais vous pouvez cliquer sur celui-ci ici, Repeat Grid [RIRES] C'est une nouvelle scientifique pour ce cours. Tout ce que vous faites est de le faire glisser vers le bas. Vous êtes un maître de grille répétitif, regardez ça. Ce que vous pouvez faire, nous allons en trouver quelques-unes. On y va. Il serait comme, j'ai besoin que ça arrive un peu, l'écart est trop grand. Regardez ce survol, survol, survol, et juste je ne fais rien, je clique, je tiens et je fais glisser. Vous pouvez le faire se chevaucher, vous pouvez le faire [RIRES] Ce n' est pas ce que je veux, mais je vais faire en sorte que le mien soit assez serré là-dedans, peut-être même un peu comme ça. On y va. Maintenant, je vais monter et descendre parce que nous avons cela, mais vous pouvez certainement aller dans cette direction aussi, peu importe. Si vous utilisez la version de bureau, vous pouvez aller à gauche, à droite, vous pouvez monter et descendre. Je vais juste descendre dans ce cas. Ce qui le rend cool, c'est qu'il est constamment réglable. Une fois que vous en avez fini, il suffit de cliquer sur le retour. Vous pouvez le dire, pouvez-vous voir ces trucs à l'extérieur et ces petits gars ? Ils ne disparaissent pas. Ils y restent pour que vous puissiez en ajouter plus tard si vous en avez besoin. Maintenant, ce qui rend cela charmant, c'est que vous pouvez passer par là, et où est mon exemplaire ? Je peux ajouter des textes individuels pour ces choses. Ajoutons-les et ajoutons celui-là . Je ne fais que double-cliquer sur eux. Vous pouvez les éditer et il y a toujours ce joli. Si je clique dessus pendant que je double-clique dessus, rentre dans le mode membre et notre mode d'édition d' objets je rentre dans le mode membre et notre mode d'édition d' objets, je clique dessus, et j'ai toujours ceci et cela signifie que je peux toujours jouer avec tout l'espacement, même s'ils sont tout à fait individuels avec ces boîtes ici pour les images. Maintenant, avec les images, vous pouvez simplement faire glisser une à la fois. Prenons nos dossiers d'exercices, ils sont là. Prenons l'image une et faites-la glisser. Alors, tu peux t'en prendre à ça. Je veux que celui-ci soit celui-là. Il suppose que vous faites tout ce que vous faites d'autres. Tu es comme, non. Je vais juste faire chaque individu, faisons-le. Vous y allez et vous continuez les ajouter au fur à mesure de la façon dont vous voulez le faire. Souvent, ce que vous pouvez faire, c'est défaire ce [BRUIT] Vous pouvez simplement saisir, j'en ai quatre là. Je peux en prendre quatre, même quatre. suffit d'en glisser une et il supposera que vous allez faire cette jolie petite grille de répétition. C'est génial pour vous. Vous pouvez les rendre individuels, mais vous pouvez les contrôler tous ensemble. L'espacement est une chose, ce que je trouve utile, c'est ici que vous décidez que plus tard, nous n'utilisons pas cette police. Nous allons utiliser, est-ce que j'ai Trajan Pro ? Une autre jolie police. Vous pouvez voir que je peux ajuster ces choses ou peut-être que c'est juste la taille et en fait cela doit être un peu plus grand et je peux les déplacer là-bas, ou ce n'est pas tout à fait approprié, donc je dois le réduire. Vous avez eu ça, je dis, très joli sur la grille de répétition. C'est l'un des grands avantages de XD par rapport aux concurrents. Vous pouvez modifier les polices, modifier les couleurs, modifier l' espacement tous ensemble, mais certains bits peuvent être individuels, comme le texte réel qui s'y trouve et les images qu'il contient. Aussi aux coins, vous pouvez aller, j'en aurai cinq s'il vous plaît et ils vont tous changer. Vous y voilà. Il y aura un point que vous êtes comme, pourriez-vous simplement arrêter avec toute la mise à jour des taupes qui veulent les séparer parce que je vais faire quelque chose de plus individuel avec eux. Je veux les mélanger séparément. Ce que vous pouvez faire, c'est que vous pouvez cliquer dessus une fois, cliquer dessus, cliquer dessus une fois. Ici, il y a une grille non groupée et il suffit de cliquer dessus et il suffit de les diviser en objets individuels. Quel individu ? Vous y voilà. Je peux entrer dans celui-ci et dire que vous allez être une image bien alignée sur ce point comme si vous y allez, vous allez là-bas et vous y allez. Vous souhaitez modifier cette une police différente, voilà. Vous pouvez les décomposer. On ne peut pas les recoller ensemble une fois qu'ils sont brisés, je viens de finir là. Vous pouvez entendre mon clavier fort appuyer sur la commande Z ou sur Z dans un PC pour les remettre ensemble. Idéal pour ce type de cartes , tout ce qui se répète. Il peut s'agir d'un élément de liste, voir ces éléments ici. Il peut s'agir d'une longue liste ou points à puces, quelque chose comme ça. Vous l'utilisez également pour la navigation. Nous ferons de la navigation plus tard dans la vidéo, mais la barre de navigation en bas ici d'une navigation mobile où il est écrit maison et compte et cela. Vous en faites un, puis vous les dupliquez. Un autre cas d'utilisation pour lequel je l'utilise est ces Moodboards, un gros moodboard moodboard. Ce que vous pouvez faire, c'est simplement aller rectangle et vous aller quelque chose de taille représentative [RIRE] et pas si grand. La dernière fois que nous les avons traînés et ils ont frappé au loin à droite et ils étaient assez gros. Ce que vous pouvez faire, c'est faire un moodboard un peu plus, je ne sais pas, moins comme ça. Je peux le faire. Obtenez à peu près le numéro dont j'ai besoin. Prenez mon moodboard où était ce moodboard ? Il suffit de jeter tout ça dans. Regardez à quel point nous allons être géniaux, êtes-vous prêt ? Regardez à quel point nous sommes géniaux et vous pouvez contrôler l'espacement comme avant. [RIRES] En espacant, vous pourriez les faire se chevaucher. Ce n'est pas bon [RIRE] suffit de continuer avec ça, alors c'est la fin de la vidéo. Une grille de répétition, super utile et pratique pour cela. Vous pourriez trouver qu'il se répète aussi. Si vous voyez que je n'en ai pas assez pour que vous le sachiez. Je l'ai et vous pouvez voir ce type se répéter deux fois. Eh bien, il y a le premier et il le répète, donc je n'ai pas vraiment besoin, qu'est-ce que j'ai fait ? [RIRES] Clic droit aléatoire et je l'ai verrouillé. Vous pouvez verrouiller des trucs, le saviez-vous ? Vous pouvez le verrouiller pour qu'il ne bouge pas. Vous y allez. Je n'ai pas beaucoup fait ça dans XD de toute façon, sauf par accident. Je vais y aller, je n'ai pas vraiment besoin de celui-ci. Vous y voilà. C'est mon moodboard. C' est tout pour cette vidéo, je vous verrai dans la prochaine. 62. Projet de cours 12 - Répéter la grille: Vous pouvez voir dans le titre de la vidéo qu'il s'agit d'un autre projet de classe. Ici, c'est Repeat Grids. Nous allons créer cette page d'avis. Eh bien, nous n'allons pas y arriver, vous l'êtes. Dans votre document de projets de classe, il s'agit du projet 12 ici. La première chose, c'est que je veux que vous fassiez des recherches sur l'apparence d'une carte de révision. Je parie que vous n'en avez pas fait auparavant ou peut-être que vous l'avez fait. Mais il suffit d'aller sur Google et de taper sur Review Card.Ui, ou dans Dribble ou Behance, ce dont vous voulez vous inspirer. Google, nous passons aux images et ajoutons le mot UI à la fin afin que la carte de révision puisse être trop large. Faites-le, prenez quelques exemples, prenez des captures d'écran. Vous pouvez avoir un tableau d'humeur pour votre carte de révision. C'est bon. Je veux que vous créiez un nouveau plan de travail. Je sais que c'est en dehors de la portée de notre flux de tâches, on nous a seulement demandé de faire ces pages complètes, mais c'est un cours. Nous pourrons peut-être enfreindre les règles. [BRUIT] Nous allons faire une nouvelle révision du code de plan de travail, et je veux que vous construisiez votre propre carte de révision [NOISE], puis la répétiez [BRUIT] à l'aide de la grille de répétition. Faites un, répétez-le, puis je vais vous amener à expérimenter au moins deux plug-ins pour peupler votre groupe. N'utilisez pas ceux que j'utilise, pas bien. Je ne vais pas vous montrer comment les utiliser car je suppose que je veux que vous exploitiez le fonctionnement des plug-ins. Ils ne sont pas tous les mêmes et je veux que vous trouviez la frustration, puis que vous réalisiez que les plug-ins sont tous créés par diverses personnes et qu'ils fonctionnent tous différemment. Donc ceux que j'ai fini par utiliser pour cet exemple particulier, vous pouvez en utiliser différents, j'ai fini par apprendre certains que nous avons installés plus tôt, Faker XD et UI Faces. Je ne suis pas comme les défenseurs de ces deux-là, ils ont travaillé, ils étaient bons, mais il y en a beaucoup là-dedans. Jetez un coup d'œil à travers les plug-ins. N'oubliez pas d'accéder aux plug-ins, c'est ici cette dernière option et vous devrez peut-être cliquer sur « Plus » et ouvrir votre application Creative Cloud. Si vous avez besoin de chercher, vous pouvez faire une recherche ici et vous assurer que XD est coché et je vais y aller, je ne sais pas, affronter [RIRES] et vous pouvez voir qu'il y un tas de différents . Jetez un coup d'œil. [BRUIT] Dans ce cas, l'interface utilisateur est plutôt cool. Vous pouvez cliquer dessus et choisir parmi la source. Vous vous souvenez de Unsplash et de pixels ? Vous y allez. Ils sont très courants. Cette personne n'existe pas. [RIRES] Intéressant. C'est compliqué mais pas trop compliqué. L'astuce, c'est qu'avec la plupart de ces plug-ins, vous devez d'abord sélectionner quelque chose. Comme si je sélectionne sur ce texte, il n'est pas pris en charge, alors que je clique dessus et qu'il dit, hé, je sais quoi faire, et vous pourriez trouver comme dans ce cas, vous appuyez sur , hé, je sais quoi faire, et vous pourriez trouver comme dans ce cas, « Sélectionner des photos » et vous pouvez choisir différents et il y a beaucoup de choses à faire. Juste pour l'explorer un peu, le comprendre, y aller. Essayez-en un autre autre que celui-ci. Celui-là est vraiment génial. Il a beaucoup de filtres différents et seulement des gens heureux, ainsi que des fonctionnalités différentes. Celui-ci, il reconnaît qu'il s'agit de Repeat Grid et passe tout au long et les remplit tous. L'autre, Faker, où je voulais que ce texte soit sélectionné, c'est bizarre. Je vais vous montrer une démo rapide de celui-ci parce que, si vous débutez dans les plug-ins, ils fonctionnent tous différemment. Celui-là est un peu drôle. Laissez-le là, j' ai sélectionné mon texte, vous pouvez traverser tellement de choses. Vous pouvez dire, très bien, je dois obtenir une date que je dois mettre et que vous pouvez mettre dates et cela les mettra au hasard pour vous. Mais celui-ci ici n' est pas si aléatoire. Laissez-moi vous montrer comment ça fonctionne. J'ai dit que je voulais que vous les exploriez, [RIRES], mais j'ai pensé que celui-ci fonctionne d'une manière étrange. J'ai eu ça. Je vais dire mon nom. Il y en a un qui dit que tous génèrent des noms pour moi et si je double-clique dessus, vous me direz, que se passe-t-il ? En haut ici, pouvez-vous voir ce qu'il a fait ? Si je clique dessus, il ajoute simplement une autre chaîne de variables, je n'en suis pas sûr. Mais il y a un code en haut ici. [BRUIT] Ce que je vais faire, c'est que je veux que ce soit un prénom, puis un nom de famille, et ça le met dans le mauvais ordre Regardez ceci, si je clique sur « Générer », il est maintenant mis là Cara Little. Vous y allez. C'est mal placé , donc je peux saisir ça, le couper, [BRUIT] le mettre au-dessus, et parce que je mets un retour, que se passe-t-il ? Le retour entre en jeu. Ici, vous pouvez l' élargir pour que vous le sachiez. Je peux supprimer cela. Est-ce que je veux un espace là-dedans ? Je veux un peu d'espace, générer. Vous pouvez voir qu'il est très personnalisable, ce qui est génial. Montserrat. [RIRES] Oberbrunner. Vous y voilà. Oberbrunner ? Mais celui-ci ne va pas tout faire. Vous devez y aller, ce qui n' est pas un grand drame, mais au moins vous donne un truc aléatoire, alors que l'autre plug-in va parcourir automatiquement et les mettre à jour tous. Vous pourriez utiliser ces deux-là. Je veux que vous exploitiez quelques-unes des vôtres, juste pour les prendre en main. Vous pourriez être comme, mec, ce n' est pas très bon. C'est quelque chose que vous devez explorer car tous ces éléments ne sont pas réalisés par Adobe. Ils ne fonctionnent pas tous très bien, et leurs critiques peuvent être bonnes et c'est terrible à utiliser, mais allez l'explorer , comprenez. Vous pouvez le faire pour Loren Ipsum, pour les noms. Pour cela, vous pourriez avoir une partie différente de vos commentaires, vous pourriez avoir quelque chose de complètement différent. Mais c'est amusant d'explorer ces plug-ins. L'autre chose que je voulais mentionner c'est que dans ce cas, je suis arrivé au bout ici. Vous voyez ? Sur mon prototype, si je joue ça, tu peux le voir ? Eh bien, vous ne pouvez pas voir, mais je ne peux pas faire défiler vers le bas. Ce que je vais faire, c'est que je veux simplement le réitérer, nous avons abordé plus tôt le cours mais je pense que c'était il y a longtemps. Je vais faire ça plus longtemps que nécessaire. Vous vous souvenez de cette chose ? Tant que nous ne bougerons pas cela, il sera coupé là et défilera vers le bas. Allons-y jouer. Maintenant, je peux faire défiler et avoir beaucoup de ces différents. Rappelez-vous que si je finis par déplacer ça, il essaie de tout presser dans cette seule page, il ne défilera plus et c'est un peu bizarre. Je vais vous y aller, je vais défaire ça. Vous pouvez le faire glisser ou vous pouvez l' ajuster ici. Où étais-je ? Je pense que je dois peut-être cliquer sur la page. Je clique sur la page, c'est parti. hauteur de la fenêtre, c'est là. Vous pouvez saisir la taille de votre téléphone, ce qui signifie sa hauteur. [BRUIT] La dernière chose à faire est que je veux que vous créez un bouton Avis sur la page d'accueil. [BRUIT] Sur la page d'accueil, juste le lien vers cette page, sinon il y a un moyen d'y accéder et sur la page d'accueil j'ai ajouté un faux avis, plus de commentaires qui me permet et mon prototype pour sauter sur cette page et faire défiler vers le haut et vers le bas. Je devrais ajouter cela également. [BRUIT] Vous n' avez pas vraiment besoin d'avoir le code ici. Il se peut que vous ayez simplement un bouton Avis. Il n'est pas nécessaire que ce soit un bouton, il peut s'agir de texte. C'est à vous de décider, juste un moyen de lier la page d'accueil à la page des commentaires. Ensuite, allez prendre une capture d'écran, téléchargez-la sur les devoirs de cours et partagez-la sur les réseaux sociaux et étiquetez-la avec le hashtag XD dans les médias sociaux, juste pour que vous puissiez y jeter un coup d'œil vous-même pour voir ce que les autres ont fait pour les critiques. Il est intéressant de voir à quoi ressemble une carte d'évaluation de différentes personnes, différentes cultures et de votre secteur d'activité particulier. C'est ringard, je sais, mais vous êtes un nerd maintenant ; vous êtes un nerd d'interface utilisateur, ça vous intéresse, donc c'est intéressant de voir ce que font les autres. Qui aurait pensé qu'une carte de révision serait si intéressante ? C'est ça. Je vous verrai dans la vidéo suivante. 63. Mise à jour et des problèmes avec les grilles de l'extrémité de repeat: Bonjour à tous. Dans cette vidéo, je vais vous montrer comment ajouter à notre grille de répétition une fois que vous l'avez fait, et aussi certains des problèmes qui se produisent quand vous le souhaitez, je veux l' agrandir, mais tout est coupé. Pourquoi est-il coupé ? Je veux qu'il devienne plus grand. C'est ce que je vais vous montrer ensuite dans Adobe XD. Le premier est facile. Disons que je veux ajouter ce petit chiffre après ces étoiles. Il n'y a pas actuellement, donc ce que vous pouvez faire, c'est que vous pouvez vous mettre en position. Il n'est pas nécessaire qu'il soit en position. [RIRES] Mais je vais le faire. Je vais le couper. Il va être modifié, coupé. Je vais double-cliquer pour entrer à l'intérieur. Il suffit d'avoir quelque chose de sélectionné ici, peu importe lequel il s' agit, puis appuyez simplement sur « Coller ». Ensuite, il y entre. Vous pouvez le voir, c'est sur eux tous. C'est comment y ajouter quelque chose d'autre. Je vais utiliser ma touche fléchée juste pour appuyer dessus. Eh bien, le problème que vous pourriez rencontrer est que vous voulez étendre cela, le fond blanc, le rendre plus petit est plus facile, mais je veux l'agrandir. Si vous l'agrandissez et que vous êtes comme ça, je veux juste le rendre un peu plus grand. Je veux le déplacer là-bas. Voyez-vous qu'il est recadré du bord ici ? En fait, faire de la couleur n' aidera pas . Mais vous avez compris l'idée. Vous pouvez voir, il est recadré de ce côté, si je le rends plus gros de ce côté, il est coincé dans ce tableau de grille répétitif ici. Si je l'étends, je me dis, d'accord, je cliquerai dessus. Où allons-nous ? Cliquez dessus une fois. Voici mon avantage. Je vais juste le faire glisser plus gros. Vous êtes comme, ce n'est pas tout à fait ce que je voulais. Ce que vous finissez par faire et je défais avant que je le détruise. [BRUIT] Cela n'a pas vraiment d'importance si vous le faites avant ou après. Étirez-le avant ou après. Je vais le faire par la suite. Tout ce que vous devez faire, c'est le faire , le mien est long, et vous pourrez voir cette poignée, où est-elle ? qu'il soit sorti, cliquez dessus une fois. Vous y allez. Il y a la poignée. Si je agrandis cette poignée, il suffit de l' étirer d'abord. Donnez-vous un peu d'espace, puis agrandissez cela, puis faites-le glisser vers l'arrière. Peut-être cliquez sur « Off », cliquez dessus, et vous vous en débarrasserez à nouveau. Il vous donne un peu plus d'espace. m'arrive beaucoup quand je passe d'un ordinateur de bureau au mobile. Copiez cela et je vais à la vue de mon bureau et j'ai plus d'espace, donc je peux faire des choses une taille différente. Il suffit de l'agrandir. Donnez-vous un écart. Ensuite, étendez cela. Ensuite, nous pourrons étendre cela, puis revenir ici et le rétrécir. Vous y allez. Mise à jour et quelques petites mises à jour, eh bien, réparer le bord, si vous avez besoin de l' agrandir. Parfois, au lieu de faire tout cela, essayer d' ajuster cette chose par la suite peut être assez compliqué en fonction de ce que vous avez. Parfois, sélectionnez-le et partez, dissociez la grille et partez, vous êtes tous partis, et recommencez, et commencez simplement répéter la grille avec la nouvelle taille et vous êtes à nouveau parti. Vous allez devoir mettre à jour ces éléments, mais parfois il suffit de les dégrouper et de recommencer peut être plus facile. C'est tout pour la vidéo, mon ami, je vous verrai dans la prochaine. 64. Comment utiliser les piles dans XD pour créer un formulaire: Accrochez-vous les gens de vos chapeaux, c'est la deuxième fonctionnalité la plus excitante d' Adobe XD appelée piles. Que font-ils ? Regardez ça. Le nom figurant sur la carte doit être indiqué ci-dessous et notre e-mail doit être le premier. Regardez ça. Je vais les faire mélanger. Je peux jouer avec cet espacement entre eux tous ou un seul. Ça va mieux. Regardez-moi ça. J'ai eu ces cartes, je peux y aller comme ça. Je dois les mélanger parce que le client ne cesse de changer d'avis. Regardez ça, encore mieux. Faisons ce menu en haut ici. Vous devez être ici maintenant. En fait, la recherche, allez, Dan, il faut que ce soit de ce côté droit. Regardez-les tous en mode aléatoire, tous automatiques. C'est l'un de ces charmants outils métriques d'Adobe XD. Allons ici et je vais vous montrer comment ils fonctionnent. Tout d'abord, nous avons besoin de quelque chose à empiler. Vous attendez là. Tu es de retour, j'ai fait des trucs. C'est une forme et vous l'avez peut-être vu dans la version Speed, je l'ai fait avec la grille de répétition parce que c'est beaucoup de répétitions. Pour utiliser des piles, dans ce cas, nous allons le dissocier. La grille de répétition était géniale pour la créer, mais pour les piles, elles ne peuvent pas être comme ça ou elles ne peuvent pas être une grille de répétition. Ce sont toutes des unités que ce que Repeat Grid a fait pour moi. Mais si ce n'est pas le cas, ils doivent être en groupe. C'est ce que les piles savent ajuster. Vous les voyez, pas en groupe. Donc, ce que je veux faire, c'est sélectionner et le regrouper, et regrouper quelque chose est Command G ou Ctrl+G. Celui-ci est aussi simple, donc il n'a pas besoin d'être groupé. Vous pouvez voir que je l'ai réutilisé de mes actifs. Je dois utiliser mes styles de personnages. Regardez-moi, tout est fantaisiste. Maintenant, ce que nous devons faire, c'est simplement les sélectionner tous. Ici, nous disons que vous êtes une pile. Où est-il ? Ce ne sera pas comme ça. [RIRES] Ces choses doivent donc être regroupées, mais le tout doit également être un groupe, comme un groupe universel. Des groupes individuels, super. Je vais le regrouper à nouveau. Nous allons utiliser beaucoup de chemin. Utilisez-le pour le regrouper. Vous pouvez voir dans mon panneau Calques, il est là. C'est mon groupe. Je l'appelle Form parce que je ne sais pas, soyons fantaisies. J'ai eu mon formulaire. Maintenant, je peux faire une pile. Où est-il ? Il y en a là. Allumez-le. Il doit être défini par défaut sur le bon, qu' il s'agisse d'une pile verticale ou d'une pile. Prêt, cliquons à l'intérieur. Maintenant, regardez, regardez, regardez, regardez ça, est-ce que le nom passe en premier ? Un autre ne va pas en premier ? Est-ce que ça passe en premier ? Tellement bien. Vous pouvez redémarrer et vous pouvez les faire horizontalement, ou je vais l'annuler. Vous pouvez maintenir la touche Maj enfoncée pendant que vous le faites glisser et elle déplacera vers le haut et vers le bas. Regardez ça, vous pouvez décider que cela passe en premier ou que cela passe en premier. Qu'est-ce qui se passe en premier ? E-mail. Faisons celui-là. Faisons celui-là. Si vous devez en ajouter un autre, vous avez besoin du mois, je ne sais pas. Vous pouvez simplement sélectionner l'un d' entre eux et copier-coller, vous en avez un autre. On peut le voir faire tomber, ce qui est vraiment cool. Donc, vous pourriez y aller comme ça. Vous pourriez dire « expiration ». [RIRES] C'est à quel point je suis mauvais orthographe. Je ne sais pas, c'est juste que ça n'entre pas. De toute façon. Vous pouvez aussi le voir et cela fait appel à tous ces éléments. Bon sang, ils doivent être les mêmes alors , épeler correctement. [RIRES] Vous les copiez et collez, les ajoutez et les repoussez. Vous pouvez en supprimer un. Vous pouvez décider que vous êtes vraiment revenu et que je n'ai plus besoin de celui-ci, alors double-cliquez dessus pour aller à l'intérieur. Cliquez dessus, supprimez-le et ils se déplacent tous de haut en bas. Vous pouvez toujours travailler avec eux individuellement car il ne s'agit plus de grilles de répétition. Je peux donc attraper celui-ci et double-cliquer dessus. J'ai fini par cliquer dessus une fois, il suffit de cliquer sur toute la pile. Double-cliquez dessus pour entrer dans ce groupe. Je veux revenir à l'intérieur du groupe , double-cliquez à nouveau. Vous pouvez le faire un peu et cela arrive un peu. Je vais le faire et je vais prendre cette unité, double-cliquer dessus pour aller à l'intérieur, copier-coller. Regardez-moi ça, et qu'est-ce que c'est ? CVV. Est-ce CVV ? C'est l'un d'entre eux. Ce n'est pas qu'il s'agisse d'un CVC. [RIRES] L'un d'entre eux. Oui. C'est comme ça qu' on fait une pile. Vous regroupez les éléments que vous voulez être mélangés , puis tout cela doit être dans un groupe, puis il suffit de cliquer sur « Stack » ici. Vous pouvez régler l' espacement. Regardez ça. Vous pouvez cliquer dessus une fois, le tout, double-cliquer dessus et vous survolerez entre vos groupes et regardez cela, ils arrivent tous. Vous pouvez les faire individuellement comme ça simplement en planant au-dessus d'eux. Je vais défaire. Vous pouvez les défaire complètement. Vous maintenez quelque chose, je suppose que Shift. Je suppose que c'est vrai, oui. Maintenez la touche Maj enfoncée, et ils bougeront tous. Vous pouvez décider que c'est parfait. Celui-là, là, celui-là. Comme je l'ai dit, les piles sont très pratiques. Une autre chose que vous pouvez faire, c'est que vous pouvez enfoncer les choses. Nous avons donc copié et collé, n'est-ce pas ? Si j'en veux un autre, je le sélectionne, copier-coller. Mais supposons que vous alliez à l'outil Rectangle et que vous vouliez ajouter quelque chose, je ne suis pas sûr de ce que c'est. Supposons qu'il s'agisse d'un téléchargement d'image. Vous allez voir que je n' utilise que mon outil rectangle. Si je le fais glisser vers le haut, il fait juste un petit cadeau pour lui-même, faisant un rectangle là-dedans sans raison. Idem avec l'outil type. Prenez l'outil de type et allez, en fait, je veux mettre du type là-dedans, et maintenant je peux taper. Il se trouve que mon type est blanc. [RIRES] Ce n'est pas utile. Mais vous comprenez, ils sont assez résistants. Je vais me défaire pour m'en débarrasser. Mais il y a des moments où vous êtes comme, en fait, je ne veux plus que ce soit une pile. Je veux les déplacer ici parce que si j'essaie de le faire, ça va juste [BRUIT]. Je vais défaire ça. Vous pouvez décompresser en désactivant simplement cette petite coche. Je l'ai donc sélectionné. Éteignez ça. C'est toujours dans un groupe, ce qui est très bien. Vous pouvez cliquer dessus avec le bouton droit de la souris et le dissocier quelque part, si nécessaire. Ce sont maintenant des petits morceaux. Mais ce que je vais faire, c'est que je vais vous montrer une chose cool. J'ai déjà dit résilient, c'est juste vraiment robuste, c'est probablement le mot que je veux. C'est une pile, je vais le décompresser . Non, c'est du rembourrage. [RIRES] Je l'ai déjà déempilé. Je vais aller à l'intérieur du groupe. Je suis à l'intérieur de la forme et je vais le déplacer ici parce que c'est ce que je voulais, puis en sortir. Sélectionnez-le à nouveau. N'oubliez pas qu'il faut que ce soit un groupe. Je peux simplement rallumer la pile et quelque chose de magique se produit là où elle a regroupé cette ligne. Pouvez-vous le voir au sommet ? Celui-là, celui-là, celui-là. Maintenant, je peux passer à travers tout ça. Je ne sais pas, c'est plutôt cool. D'une certaine façon, il savait qu'il se trouvait sur le même plan horizontal et que ça fonctionnait. Si je tiens Shift, attrapez-les tous de la même façon. Vous pouvez le taper ici. Si vous double-cliquez jusqu'à ce que vous voyiez les choses roses, vous pouvez cliquer sur ce petit espace rose. Vous pouvez voir ici que vous pouvez commencer à le déconner en haut et en bas, si vous voulez que tout soit très exact. Vous utilisez une grille de huit pixels, ou 16 pixels en haut et en bas, ou huit en haut et 16 en bas, vous pouvez être très précis et lui dire quoi faire. La dernière chose, c'est que par ici, nous avons notre groupe de formulaires. Nommons tous ces éléments. Ce premier ici, vous pouvez voir qu'il s'appelle e-mail. Double-cliquez sur le nom et appelez-le Email. Souvenez-vous que si vous ne pouvez pas, si je reviens de tout ça, [RIRES] ce n'est pas ce que je voulais. Cliquez sur ce nom, accédez à la Commande 3 pour tout voir, cliquez dessus. J'ai les noms des calques, et la chose que je voulais vous montrer était de taper celui-ci, Email, puis nous allons taper le suivant, et vous pouvez double-cliquer dessus et taper Nom. Un petit raccourci, ce n'est pas le mot Nom, le raccourci est tabulation. Donc, il clignote toujours, tabutez vers le bas ne pas avoir à retirer mes mains du clavier. Est-ce un raccourci amusant ? C'est pour moi de toute façon. C'est l'expiration et CVC ou CVV, quel qu'il soit. Vous y allez. Vous pouvez tabuler vers le bas pour renommer des choses pratiques lorsque vous êtes sur le point de remettre votre travail à quelqu'un et que vous vouliez avoir l'air de ne pas être une personne folle avec un zillion de couches sans nom. comme moi. Groupe 32, [RIRES] Ce n'est pas bon signe. C'est ça les piles. En fait, je veux vous montrer quelques autres exemples. Voici ce site Web ici et il y a une navigation en haut. Ce que je vais faire, c'est que je vais cliquer sur les deux. Je maintiens simplement Maj, je clique sur le premier , puis sur le second. Je vais les regrouper pour que ces gars bougent ensemble. Ces deux derniers sont déjà regroupés. Ce que je peux faire, c'est que je vais dire, je veux que vous, vous, vous et vous, vous, vous, vous, vous, vous, vous pouvez devenir une pile. Pourquoi n'est-ce pas ici comme une pile ? Vous savez que le tout doit être groupé, Commande G ou Ctrl+G. Vous dites que vous. Vous pouvez voir dans ce cas que XD est magique et sait si vous voulez une pile horizontale ou verticale. Cool. Ensuite, vous pouvez dire que vous y allez, double-cliquez dessus et dire que vous y allez. Vous pouvez voir à quel point c'est pratique pour ces types de choses, ces navigations. Vous pouvez dire en fait que cela doit être le premier, informations COVID vont y aller. Déplacez la barre de recherche ici. Faisons la même chose ici. J'ai cette page d'événements mobiles et je vais juste m'en assurer. Ils n'ont pas besoin d'être groupés, ces deux morceaux. Vous pouvez, pour rendre les choses un peu plus faciles, vous n'avez pas besoin de l'être. Ce truc ici, je le ferai. Eh bien, voyons ce que font les piles. Voyons si c'est intelligent, car c'est assez complexe. Je vais saisir tout ça, je n'ai pas besoin de la navigation supérieure, et je zoome encore plus. Prends tout ça. Allons-y. Disons qu'il s'agisse d'une pile. Ne sera pas une pile tant que nous ne l'avons pas groupée. Ensuite, nous disons qu'il s'agisse d'une pile et qu'elle est assumée de haut bas ou verticale, et donnons un coup de pouce. Double-cliquez dessus pour aller à l'intérieur. Vous allez vous dire, je peux Maj+Cliquer sur les deux et dire, en fait, vous y allez. Regardez-moi ça. Si vous maintenez la touche Maj enfoncée pendant que vous le faites glisser, elle sera tout droit vers le bas. Regardez-moi ça, il s'empilera et au-dessus. Vous y allez. Essayons d'obtenir celle-ci en dessous de ça. Oh, c'est trop bon. Bon travail, XD. Ce morceau de fond est une unité trop entière. Il finit donc en dessous de ça. La seule chose que je pourrais devoir faire, c'est c'était un grand groupe d'unités au préalable, que c'était un grand groupe d'unités au préalable, je devrai peut-être le séparer avant de faire ma pile. Essayez-le donc. Jetez la pile dessus, voyez si elle fait ce que vous voulez, puis annulez-la et peut-être devrez-vous faire un regroupement fantaisiste au préalable. Le dernier, une pile de fusils de chasse est prête ici. J'ai tous ces morceaux individuels. Le client va me faire déplacer. Je vais les regrouper, en faire une pile, double-cliquer dessus et dire que l'on est là-bas, qu'il y a là, puis qu'il faut y aller. Maintenez la touche Maj pendant que vous les faites glisser, les gens. [RIRES] Sinon, ils finissent dans toutes sortes d'endroits. Ensuite, regardez, sortez, cliquez, empilez, mains-off, terminé. Bien joué, XD. C'est tellement bien. J'adore les piles. C'est ça. Je vous verrai dans la prochaine vidéo. 65. Projet de cours 13 - Page de packs et de paiement: Bonjour, maintenant c'est l'heure du projet de classe. Celui-ci, je vais vous amener à créer votre page de paiement. Je veux que vous étudiiez à la fois à quoi une page de paiement et un formulaire de carte de crédit ressemblent une page de paiement et un formulaire de carte de crédit, les différentes options. Il y a juste différentes façons de le faire. Vous décidez que votre profil d'utilisateur pourrait être le meilleur. Je vais mettre tous les miens sur une seule page, ce qui suppose que c'est plus difficile à faire et tout est jeté sur une seule page. Vous pouvez décider de le séparer en trois pages de paiement. Vous avez peut-être décidé d'une nouvelle quantité, prélever l'expédition dans les détails de votre carte de crédit, puis d'acheter. Il se peut que vous ayez trois pages de paiement différentes. C'est totalement à vous de décider. Mais regardez un peu. Jetez un coup d'œil aux pages de paiement pour exemple mobile et juste un peu d' exploration pour décider à quoi vous voulez que les vôtres ressemblent. L'autre raison est que je veux que vous exploitiez des piles. Même si vous avez tout mis jouez parfaitement avec piles juste pour que vous ayez une idée de ce qu'ils font, ce qui les brise, de ce qui les fait fonctionner. C'est génial pour des choses comme ces listes. C'est à ce moment que ça devient vraiment agréable avec ça. Jetons un coup d'œil rapide. Pages de recherche, de carte de crédit et de paiement. Il suffit de passer cinq minutes à jeter un coup d'œil autour de vous, de trouver une idée de ce que vous voulez aussi, puis de remplir votre formulaire sur votre page de paiement. Assurez-vous d' expérimenter des piles, créer un bouton d'achat et le lier à la page de confirmation. Mon prototype ici, si vous y allez et que vous allez acheter, il va sur la page de confirmation. Faites-le et envoyez-moi une capture d'écran, téléchargez-la aux endroits habituels, et c'est tout. Je vous verrai dans la prochaine vidéo. 66. Différence entre animation et micro-interactions: Bonjour, tout le monde. Cette vidéo nous allons parler de la différence entre l' animation et les microinteractions. Ils sont assez similaires. Ils sont différents dans la façon dont vous les créez. C'est juste autour de leur but et du terme microinteractions, je ne sais pas. Si vous connaissez UX, vous connaissez probablement le terme. Pour ceux d'entre vous qui débutent dans l'UX, qui sont probablement de nombreuses personnes qui regardent cette vidéo, vous n'avez probablement jamais entendu parler de ce terme. Décrivons rapidement les différences entre l'animation et les microinteractions. Ce que vous regardez à l'écran maintenant, voici essentiellement toutes les animations. Ils sont là pour ravir le visiteur de votre site Web, peut-être pour communiquer une idée plus complètement. Il peut s'agir d'une petite animation de type diagramme d'information, quelque chose que vous ne pouvez pas communiquer avec une seule image, vous pouvez décider de l'animer. La différence entre microinteraction et animation est que les microinteractions sont, regardons un exemple. Ces animations de style de notification de petite interface utilisateur. Ces [RIRES] sur l'écran vont en même temps, c'est un peu distraire un autre. Une microinteraction est généralement effectuée en réponse aux entrées de l'utilisateur. Cela signifie que lorsque vous cliquez sur le petit cœur, il rebondit de haut en bas pour vous faire savoir que vous avez fait quelque chose. Avez-vous déjà cliqué sur quelque chose et cela ne suffit pas et vous continuez à cliquer dessus ? C'est comme si votre appareil photo numérique sur votre téléphone faisait bruit de cliquetis bizarre. Il n'a pas besoin [RIRES] d'un bruit de cliquetis bizarre, mais nous, les humains idiots, avons besoin de ce petit clic pour savoir qu'il s'est passé quelque chose [RIRES] afin que nous puissions continuer notre journée. C'est la même chose avec la microinteraction. Maintenant, les lignes deviennent un peu floues entre les animations et les microinteractions. Celui-ci ici, je dirais pas une microinteraction, mais plutôt une animation. C'est juste vous montrer des trucs. C'est cool, ça a l'air bien, mais ça ne communique rien. C'est quelque chose comme ça. C'est une petite animation. Mais si je clique dessus , je clique dessus, c'est une façon de me montrer que je peux utiliser le même bien immobilier sur ma page. Au lieu d'avoir deux boutons, plus et moins, cette chose peut changer et cette petite animation m'aide. Des choses qui bougent, attirent les yeux, et ça aide à aller comme ceci et cette chose là. C'est tout simplement petit. C'est juste un peu plus. C'est une microinteraction. Jetons un coup d'œil à quelques autres. Animation. C'est aussi mon humble avis. Je ne suis pas le patron de ce qu' est une microinteraction [RIRES]. Vous êtes autorisé à ne pas être d'accord, mais je ne fais que vous donner mes commentaires. C'est une bonne affaire. Si vous cliquez sur le bouton de recherche et qu'il s'ouvre, vous pouvez cliquer dessus pour le fermer. C'est vraiment charmant, une belle petite interaction, mais elle aide en fait à communiquer ce qui se passe, que vous avez réellement fait quelque chose. Jetons un coup d' œil à d'autres. Je veux ces sites. Celui-ci s'appelle lottiefiles.com. Il est pratique pour les animations en ligne. Nous ne couvrirons pas trop d'informations là-dessus. même chose avec celle-ci s'appelle codemyui.com, et c'est sous la balise appelée microinteractions. Maintenant, chaque fois que je suggère un site sur mes cours, c'est comme le cas de la mort. [RIRES] Je parie que je ne serais pas là quand tu viendras, donc ce je ne serais pas là quand tu viendras, ne sont que des exemples de sites. Si je regarde ici, tu vois ce truc ici ? Ce n'est pas une microinteraction même si elle est étiquetée celle-ci, c'est juste de l'animation. En fait, c'est un jeu. Jetons un coup d'œil, quelques bonnes microinteractions. Celui-là est très sympa. Si vous avez déjà fait cette chose sur votre iPhone lorsque vous essayez obtenir l'empreinte de votre pouce pour faire les choses de sécurité, cette petite ligne tordue suffit à savoir que vous faites quelque chose. Parce que sinon, si elle dit simplement faire et se tortiller, vous ne savez pas si vous êtes genre : « Je me rapproche ou est-ce que ça marche ? » Les petites lignes autour du pouce ne font rien. L'ordinateur ne dit pas  : « Oh, regardez, je vois une ligne. » Ce n'est qu'une petite animation pour nous aider en tant qu'humains, à savoir que vous avez pris une photo, vous pouvez entendre le clic. D'autres. Notez que c'est amusant mais une animation. Ça n'aide pas. C'est là pour être impressionnant, pas pour communiquer des commentaires. En général, une microinteraction est une rétroaction de l'interface utilisateur. Jetons un coup d'œil et c'est une transition de page. Celui-là, je ne sais pas. Ils deviennent un peu floues. Parfois, vous attendez, donc c'est bien. Ce petit écran de charge et ces petits confettis [RIRES] à la fin. Je vais mettre ça dans les microinteractions, mais c'est un peu à la frontière. Regardons une autre page. Les publicités vous suivront partout sur ce site. Vous pouvez dire ce que j' ai acheté ces derniers temps. [RIRES] Les concepteurs U/voiture ont besoin de bits. Jetons un coup d'œil. Animation. Un peu des deux. J'ai une micro-interaction. Voyons voir. C'est une bonne chose. Regardez-moi ça. Regardez-le. Vert, tout signifie que vous l'avez terminé. Regardons le prochain. Il y en a un bon. Il devient rouge. Regardez-le. Voyez-vous qu'il tremble ? Ça veut dire non. Ce n'est rien dire, c'est juste vous communiquer visuellement le non. Vous comprenez l'idée. y en a d'autres ? Animation. C'est cool. On y va, microinteraction, utile. C'est ça, je le promets. y en a des derniers ? [RIRES] Un dernier endroit est aller à quelque chose comme Dribbble ou Behance et de taper une microinteraction et vous trouverez, encore une fois, un mélange des deux. Mais celui-là est bon tant que vous utilisez des dollars américains. Il y en a eu un. Je ne vais pas tous les parcourir. Vous comprenez l'idée. Regardez. Téléchargement et quelque chose se passe. Cette petite ligne, de petites microinteractions. Le dernier, promis. Peu de chargement, les nuages volent du côté de la microinteraction, à mon avis. C' est là, mes amis, une brève introduction aux microinteractions. Allons en faire un dans la vidéo suivante. 67. Dan dessiner des choses dans Adobe XD: Bonjour à tous. Bienvenue dans la vidéo la plus ennuyeuse que j'ai jamais réalisée. J'ai pensé que faire cette vidéo quand je la jouais, je me disais, oui, je ferais une vidéo où je vais dessiner ce truc et il faut dessiner au lieu de simplement sauter jusqu'à ce qu'il soit dessiné. J'ai pensé que je le ferais et tu pourrais venir pour le tour et être super intéressant. Ce n'était pas le cas, mais c'est toujours là [RIRES] donc vous pouvez sauter parce que rien de vraiment excitant ne se passe à part une chose très moyenne, à la recherche d'icônes de camion. Devinez ce que c'est ? J'espère que vous pensez que c'est une boîte parce que pendant ce temps, j'ai besoin que vous décidiez comment faire un paquet comme icône, mais de toute façon, je vais les dessiner, je vais couvrir essentiellement des choses que nous J'ai déjà couvert le cours, c'était il y a un moment que nous avons fait dessin, donc nous allons les jeter tous ici, vous allez me voir faire ces choses moches et c'est tout, rien d'autre ne va juste. pour être débarqué sur la page. Mais oui, nous allons les animer dans la prochaine vidéo. Vous y allez, profitez ou sautez devant, ça ne me dérange pas. Le dessin commence. Maintenant, vous pourriez être tenté de commencer à dessiner ici sur la plaque de cuisson. Le problème de le faire ici, c'est que vous allez mettre à l'échelle la référence et que vous finissez par la dessiner vraiment grande ou trop petite, puis que vous devrez la mettre à l'échelle, mais vous finissez avec des maisons à l' allure bancale. comme ça [RIRES] parce qu'il faut le redimensionner, choisir de nouvelles bordures et aligner les choses. Il est préférable de simplement dessiner sur votre tableau d'art réel qu'il se déroule, donc vous obtiendrez des comparaisons. Avec ce tableau d'art, il y a beaucoup de choses dedans, et je ne veux pas le déplacer, car il ne s'agit que de pièces. Vous pouvez sélectionner tout ce qui se trouve sur le tableau d'art, cliquer dessus avec le bouton droit de la souris et dire verrouiller, juste pour qu'il ne puisse pas être déplacé. Vous pouvez sélectionner le tout, en fait, le sélectionner, tout, cliquer dessus avec le bouton droit et dire déverrouiller également , ou nous pouvons simplement le cacher. C'est à vous de décider. Je vais dessiner ça. Nous commençons par un outil rectangle, et je vais dessiner quelque chose, mon processus a été, juste pour que vous sachiez, j'ai googlé l'icône du camion et l'icône du colis et j'ai fini par regarder des choses que j'aime et certaines d'entre elles sont proches et certaines ne l' étaient pas et elles se sont retrouvées avec un peu de maillage. Oui. Je vais choisir une couleur de remplissage, je ne vais pas avoir de trait, dans les coins, certains d'entre eux tiennent option ou Alt sur un PC, obtenez le coin inférieur. Maintenant, épinglez le taxi. Je vais juste dessiner avec des lignes droites. Laissez-moi le faire comme une petite découpe pour la fenêtre. S'il ne s'aligne pas, oui, il s'est bien aligné. Je vais récupérer l'outil Sélection, qui est la touche V. Nous allons d'abord double-cliquer dessus. Quoi que nous ayons essayé d' aller chez Illustrator pour le faire, sans doute pour ne pas dire que vous savez quelque chose comme des icônes et des trucs Xd sont parfaits. Allons remplir ça. En fait, non, je ne suis pas sûr de ce que j'allais dire là-bas. [RIRES] Si vous allez faire des choses comme des accidents vasculaires cérébraux, peut-il voir des choses qui s'alignent ? Vous devez vous rappeler que nous l'avons fait plus tôt dans le cours, il y avait une façon de dire B, laissez-moi agrandir pour que vous puissiez le voir. Demi-tutoriel, la moitié me regarde le faire. Vous pouvez voir que vous pouvez le mettre à l'intérieur, il peut y avoir des moments où cela est nécessaire, je n'en ai pas besoin dans mon cas. Je dois dessiner des roues. J'ai pensé que c'était peut-être intéressant, mais [RIRES] ce n'est pas, reconnaissant. Oui. [RIRES] Je ne pensais pas vraiment que ce serait dur, n'est pas bon pour les gens. [RIRES] Ce n'est certainement pas le cas. Très bien, donc ça va être mon camion. Dessinons la boîte. Je vais le faire tomber dans cette chose. Le truc, c'est que lorsque je cherchais des icônes de boîtes, elles sont toutes tridimensionnelles et elles ne fonctionnent pas avec mon petit camion unidimensionnel, alors j'ai dû essayer de trouver un moyen de contourner ça. Tout d'abord, une sorte de trait et je veux des bords arrondis, passons la bordure tout autour, trois. Maintenant, vous pouvez voir les bordures arrondies ne fonctionnent pas, vous êtes comme, euh, pourquoi ne fait-il pas plus de coins arrondis ? Il y a les coins arrondis, trois, ce n'est pas grand-chose, mais vous pouvez aussi voir que tout essaie de l'entasser à l'intérieur, donc quand il arrive à l'intérieur, il devient tranchant. Qu'est-ce que je veux dire par là, c'est que l'extérieur est plus prononcé au milieu. Je ne sais pas ce que je cherchais, quelque chose comme ça. Nous devons avoir de la cassette. Pour l'outil rectangle, donnons-lui un remplissage, deux d'entre eux s'il vous plaît, est-ce que cela ressemble à du ruban adhésif ? Deux d'entre eux s'il vous plaît, maintenez Maj , sélectionnez tous ceux, allez au milieu, commencez à parler Dan [inaudible]. Vous [RIRES] obtenez une petite flèche pour que ça comme ça soit la seule chose à faire ressembler à une boîte, c' est que si vous avez un peu cette flèche vers le haut, je n'allais pas dessiner le verre brisé, fragile, mais j' utilise l'outil Épingle, fais une petite flèche en haut, je vais attiser en bas. Je vais jouer avec, m' assurer d'avoir la bonne couleur, m' assurer d'avoir la bonne taille. C'est ma flèche vers le haut, quelque chose de approprié. Je veux qu'ils aient les petites extrémités blobby et je vais les regrouper et j'en veux deux, puis je vais dire que vous y allez. Est-ce que ça ressemble à une boîte maintenant ou à une boîte ? Sélectionnez-les les deux, maintenez la touche Maj enfoncée sinon ils font des choses bizarres. Maintenez Shift, faites-les tortiller, voilà. Voyez ces petits points en haut ici, je vais les dissocier, donc j'ai sélectionné la bordure et au lieu du petit bord à onglets, je vais faire le tour avec tout l'arrondi. Très bien, je vais tout sélectionner, je vais le regrouper, je vais lui donner un nom, je vais appeler cette boîte. Celui-là va être mon camion. J' aime bien le camion ? [RIRES] Je ne le fais pas vraiment. Double-cliquez dessus pour y accéder. Je vais supprimer ce point d'ancrage, simplement en le sélectionnant et en le supprimant et je vais créer une fenêtre plus grande. Je ne veux plus le toit en pente, je veux Mack Truck. On y va. Très bien. C'est suffisant. Vous n'êtes pas le camion, donc je vais tout sélectionner, le regrouper, contrôler G et aller camionner. Mon ami, cet épisode passionnant [RIRES], c'était moi qui dessinais une boîte et tout un camion douteux. Très bien, on va l' animer dans la vidéo suivante. 68. Plus d'animations dans Adobe XD: Bonjour à tous. Il est temps de faire de l'animation. Nous avons déjà fait de l'animation. Nous venons d'en faire un très basique au début du cours. Je voulais le présenter à ce moment-là, mais maintenant nous avons beaucoup de compétences en dessin et d'autres compétences, des compétences en piratage informatique. Nous voulons maintenant prendre cela et prendre ce que nous avons appris dans l'animation et simplement rendre quelque chose d' un peu plus complexe ou du moins plus joli. Je vais aller acheter maintenant bouton, j'ai acheté prêt. C'est ce que nous allons faire. Regardez-les entrer, regardez ça rebondir. Il fait un peu de roulette et s'en va. Nous allons construire cela ensemble en utilisant de nombreuses techniques que nous connaissons déjà. Je sais, j'ai promis que nous allions faire micro-interactions dans [RIRES] une des vidéos précédentes. Nous ne le sommes pas, nous faisons simplement de l' animation complète en ce moment pour améliorer nos compétences. Ensuite, j'ai l'impression qu'il vaut mieux le faire, puis entrer dans les micro-interactions dans les vidéos suivantes. [RIRES] C'est ça. Commençons encore une fois avec notre camion sucré. Allons-y. Commençons à animer. abord, je vais tout sélectionner car certaines parties étaient verrouillées. Je vais cliquer dessus avec le bouton droit de la souris. Curieusement, vous ne pouvez pas le déverrouiller. Vous pouvez verrouiller le tout, puis cliquer avec le bouton droit et le déverrouiller pour que cela fonctionne. Ou si je défais, vous pouvez voir ici, défaire ça. Vous pouvez voir qu'un tas d'entre eux sont verrouillés. [BRUIT] Je suis dans mon panneau Calques, à vous de décider. Ce que je veux faire, c'est m'en débarrasser. Je ne peux pas vivre avec la carte. Vous pouvez conserver la carte. Vous aimerez peut-être la carte, mais je trouve cela trop distrayant pour celle-ci. Je vais juste faire quelque chose comme ça. Je suis en mode prototype, devrais être en mode conception. On y va. bonne pratique pour l'animation est que je vais avoir assez d'espace parce que vous avez vu au début démarrer hors écran, donc j'ai besoin d'un peu d'espace ici. Je suis en train de tenir le quart de travail pour que ce tableau d'art se déplace. Je vais dupliquer ce tableau d'art en maintenant la touche d'option enfoncée et en faisant glisser ou la touche Alt sur un PC, copier-coller. Il vous en donne un autre. Le gros problème avec l'animation, et j'oublie à moitié chaque fois que je le fais, c' est que je suis comme, ici, je voulais démarrer hors écran et ensuite me déplacer ici. Mais ça ne va pas marcher parce qu'il s'est retrouvé dans cette énorme plaque de pâte. Peu importe ce que je fais maintenant, il ne s' animera parce qu'il ne sait plus qu'il est sur ce tableau artistique. L'astuce avec l'animation est, tout d'abord , le groupe, tout cela va fonctionner exactement à la même vitesse, pas séparé. Ces choses sont des objets distincts. Ils vont animer celle-ci que j'essaie de dire. Je les ai nommés camion et boîte et je les ai regroupés. C'est une bonne pratique et le même nom ici. L'astuce pour faire quoi que ce soit est d'ajouter l'animation en premier ou au moins la transition. Si j'ai eu un prototype. Est-ce que c'est important ce que j'ajoute ? Je me fiche de ce qu'il y a ici. Cela signifie simplement que maintenant, lorsque je fais glisser ça et que je déplace vue de conception ou le mode prototype, pouvez-vous toujours voir ? [RIRES] Cela n'a pas fonctionné. En mode prototype, il est connecté ici. Je n'ai pas besoin de deux d'entre eux. Pourquoi ne travaillez-vous pas ? Donnez-moi une seconde. Je suis de retour. Vous pouvez probablement voir le temps là-haut. [RIRES] [inaudible]. C'était une bonne minute , je me suis souvenu comment le faire. Je ne m'en souviens plus. Je vais défaire. Ça arrive au meilleur d' entre nous. Je l'ai compris. Ce qui se passe, c'est que vous devez ajouter votre animation, mais elle doit être animée automatiquement si elle est en transition. Je peux le faire sortir de la montre. Regardez, ça va à la plinthe. Mais si j'ajoute mon animation, donc mon prototype et mon animation. Mais cette animation se trouve être animée automatiquement , puis elle verrouille ces gars et vous pouvez les voir et les faire glisser. Il n'est pas sur la planche à pâtisserie maintenant il est toujours sur le HIFI de confirmation. Nous avons tous appris quelque chose. Je vais les démarrer hors écran. Il va finir au milieu, là. Donnons-lui un aperçu. Cliquez sur l'en-tête ici. Aperçu. Le vôtre pourrait ne pas faire exactement la même chose. d'esprit, c'est peut-être un claquement. Le vôtre est réglé sur. Je veux le mien après un certain temps et je veux qu'il soit capable zéro temps pour ensuite s'animer automatiquement vers cette autre destination. Vous pouvez décider que vous voulez vous détendre. aisance est probablement la plus belle et celle-ci. Il va aller plus vite au début et aller lentement à la sortie. Je vais me déconner avec ça. Je vais faire une seconde. Jetons un petit coup d'œil. Il y a beaucoup de choses à jouer avec l'assouplissement et juste aller. Vous y allez. J'ai l'impression qu'il l'est, je me sens bien. [RIRES] Maintenant, celui-ci va tomber dans le camion. Eh bien, je vais vous montrer une autre astuce, c'est que je vais supprimer celle-ci ici. Je vais passer à la vue de mon design. Je veux que ça finisse ici. On y va, là. Je vais le copier et ensuite aller ici. C'est ce qu'on appelle Box. Sur celui-ci, je vais le coller exactement au même endroit, ce qui est génial. C'est toujours la boîte qui va marcher et je vais la déplacer en maintenant Shift. C'est ce que je veux faire. En fait, ce n'est pas ce que je veux faire. Ce que je veux faire, c'est le faire sortir de ce premier. Je voulais être une progression. Ce que je ne veux pas arriver, c'est tout se passe en même temps parce que regardez ça, ils vont utiliser le même assouplissement, c'est-à-dire voir ça. Il fonctionne. Mais je vais finir par les faire progresser. Ce que je veux faire, c'est ne pas dire là-dessus. Ne faites pas ça, juste à moins. Prends l'habitude de ça. Nous allons dupliquer celle-ci. Assurez-vous que sous prototype, il y a un lien qui se souvient de quoi, c'est ce que j'ai animé. N'oubliez pas ça. Ce que je veux, c'est sur celui-ci, je voulais être debout. Alors, je veux que ce truc soit là, regardons, rebondissons enfin. C'est l'heure du rebond, tout le monde pourrait vraiment travailler. Allons y aller. Retournez ici, cliquez sur « Jouer ». C'est ce qu'il a fait. Y a-t-il une pause là-dessus ? Le délai est de 0 seconde. Bounce prend juste un peu de temps pour se mettre sur la voie joyeuse. Mais c' était plutôt bien. Je suis content de moi-même. [RIRES] Maintenant, faisons partir le camion. Dupliquez-le. Prenez l'habitude d'aller sur Prototype Member. Vérifiez qu'il s'agit d'une animation automatique parce que je veux il se déconnecte de l'écran et que mon redevienne en mode conception. Il va faire un peu de roulette. Les deux masques, je vais les prendre tous les deux [RIRES] et les frapper. J'espère que ça ne finira pas dans la plaque de pâte. À part l'assouplissement, jetons un coup d'œil. Il rebondit. [RIRES] Il n'a pas l'air bien. On dirait qu'il y a un peu de crash. Allons y aller. tombe. [RIRES] Les chefs de tous. Je vais juste utiliser le prototype. Celui-là, je vais aller au lieu de rebondir, c'est plutôt bon, comme il utilise l'anticipation que tout reculer avant qu'il n'aille de l'avant. Donnons-lui un aperçu. En regardant. Joli et un peu de retard entre ces deux-là. Après zéro seconde, je vais avoir peut-être 1,5 seconde. Un autre aperçu. Trop longtemps. Peut-être une pause d'une demi-seconde, 0,5 seconde. L'autre chose, c'est cette boîte. Je veux qu'il démarre ici en mode conception, j'aimerais qu'il soit opacité zéro pour qu'il apparaisse de nulle part. Peut-être que nous allons le faire tomber derrière tout ça. Vous êtes prêt ? Voyez-vous qu'il se résume beaucoup plus de force ? C'est intéressant parce que ce qui se passe se passe entre celui-ci et celui-ci, c'est un mode prototype entre, je lui donne une seconde pour le rebond. Plus il doit aller loin, regardez ça ici. me reste encore une seconde pour aller jusqu'ici. Il va aller beaucoup plus vite, il faut arriver ici dans une seconde et le faire rebondir. Regardez, c'est beaucoup plus rapide. C'est le moment avec lequel vous aurez besoin de jouer. À partir de là, je veux que ce soit probablement environ deux secondes. Continuez simplement à jouer avec ça. Vous pouvez voir que je peux faire un design de base, au moins déplacer des choses pendant que je suis en mode prototype. Vous n'êtes pas obligé de le faire. Vous pouvez basculer entre le design et le prototype. Je parie que c'est la première option de se mettre entre les deux. Sur un PC, c'est Alt un et deux. Si ce n'est pas Alt parce que je n'ai plus de PC devant moi, passez la souris au-dessus et il vous dira lequel il s'agit. J'ai été distrait par le raccourci PC. Donnons un aperçu. Le dernier, je le promets. Il entre, rebondit pourquoi il prend beaucoup trop de temps, puis s'éteint. Regardez notre petite animation, il faut probablement un peu de confirmation maintenant. Ou bien continuer à magasiner ou retourner sur le bouton d'accueil ou peut-être juste après un certain temps. Il va vous chercher, utilisez un raccourci. Après un certain temps, vous pouvez simplement le faire glisser, vous pouvez simplement cliquer dessus. Dites en fait, après un certain temps, je veux qu'il aille sur la page d'accueil. Maintenant, regardez à quel point c'est désordonné. Je veux le marketing de la page d'accueil, HIFI. Je pense. Nommez vos pages, les gens. Ne rebondissez pas et je ne veux pas qu'il s'anime automatiquement. Je voulais juste passer à cette page. Dissoudre. Je ne veux pas qu'il rebondisse. Même avec un rebond, vous n'allez pas le voir avec une transition, peu importe ce que vous utilisez. Vous ne pouvez pas vraiment le dire. Je l'ai dit la dernière fois, c'est la dernière fois. Je ne veux pas changer cette pièce. 2.5 prêt, stable. Nous revenons à la page d'accueil. Charmant. Mes amis, c'est une animation, un récapitulatif de certains de ces trucs que nous connaissons. Si vous avez quelque chose hors écran à n'importe quel moment, oubliez pas d'ajouter l'animation premier. Que devez-vous faire ? Quel prototype d'animation devez-vous y ajouter ? Animation automatique, sinon elle va dans la plaque de cuisson. Le dernier. Achetez maintenant. Bouton d'achat. Regarde ça, c'est ce qu'on a fait. [RIRES] C' est définitivement cela. C'est fini. 69. Projet de cours - Mon deuxième animation: Ce projet de classe est votre deuxième animation. Rappelez-vous que nous avons fait un chemin de retour avec la petite flèche. Je veux que vous fassiez autre chose et unique pour votre projet actuel. J'ai fait ce truc de camionnette. Vous pouvez faire quelque chose de similaire. Faites un peu de recherches. Recherchez la page de confirmation ou l'animation de paiement. Recherchez les types de choses que vous pourriez intégrer à votre produit réel. Je viens de faire cette vieille boîte habituelle. Selon ce que vous êtes, il peut s' agir de feuilles de thé ou de tout ce qui vous est resté coincé dans ce cours. Soyez créatif, soyez simple. C'est à vous de décider. Vous pouvez être élaboré. Le minimum est de trois. Quelque chose, quelque chose, quelque chose, mais vous pourriez devenir fou. Ils sont peut-être 20. Jouez avec les différents assouplissements d'animation automatique. Lorsque vous avez terminé, enregistrez une vidéo de celle-ci. N'oubliez pas que sur un Mac, c'est facile, c'est là-haut. Sur un PC, c'est plus difficile là-bas. Vous utilisez peut-être d'autres logiciels d'enregistrement d' écran. C'est très bien tant que vous pouvez enregistrer votre animation et télécharger la vidéo ou le lien vers celle-ci. Téléchargez-le sur YouTube, Vimeo ou Behance ou quelque chose comme ça et envoyez-nous le lien. Si vous n'avez pas réussi à déchiffrer le code vidéo, vous pouvez simplement faire une capture d'écran de toutes ces pages comme celle-ci afin que nous puissions voir ce qui se passe, toutes ces pages et les télécharger. Assurez-vous de le partager à la fois dans les devoirs et sur les réseaux sociaux. C'est l'une des choses les plus excitantes à voir, ce sont les animations de tous. Aussi simples qu'ils soient, ne vous inquiétez pas, ce n'est pas forcément incroyable. Vos compétences en dessin peuvent être horribles. Nous apprenons, nous commençons, c'est tout à fait correct. Partagez-les quand même. Je pense que c'est tout. Dessinez vos propres éléments, trois images minimum, créez votre propre animation, et c'est tout. Je vous verrai dans la prochaine vidéo tout le monde. 70. Commutation à la micro interaction dans Adobe XD: Bonjour à tous. Bienvenue dans les interrupteurs à bascule. Nous allons faire une petite micro-interaction. Nous allons combiner nos compétences de l'animation et certaines choses comme les états. Vous vous souvenez de cet état de bascule que nous avons fait pour celui-ci ? Nous allons combiner l'animation et faire un petit interrupteur à bascule cool. C'est un rite de passage en tant que concepteur UX, alors asseyez-vous, détendez-vous et mettons tout en mouvement. Maintenant, nous combinons essentiellement deux choses différentes que nous avons faites. Nous avons fait l'option basculer, comme ce petit bouton ici. N'oubliez pas que nous avons fait un état et qu'il y a une option de bascule et nous allons ajouter une partie de nos animations que nous avons apprises. La différence entre cette animation et cette animation que nous allons faire est qu'elle se produit dans le composant. Il ne va pas du tableau artistique au tableau artistique. Vous en avez besoin car nous avons besoin d' timing alors que la micro-interaction n'est qu'une petite animation qui se produit au sein d'un composant. Construisons-le. Construisons simplement quelque chose de très rapide et pas bon pour commencer. Nous ne nous inquiéterons pas des points de conception. Nous allons faire avancer la mécanique et ensuite nous allons la rendre jolie à la fin. Outil Rectangle. Rendre les coins extérieurs arrondis. Une forme de pilule, un cercle, maintenez la touche Maj, donnez-lui une couleur de remplissage. C'est tout ce dont nous avons besoin. Je vais les sélectionner tous les deux, convertir en composant, Command K ou cliquer sur ce bouton. Ce dont nous avons besoin ici, c'est que nous avons besoin d'un État, d'un autre État, comme nous l'avons fait auparavant. Nous avons fait le basculement, comme le petit bouton radio que nous venons de voir, et nous allons avoir un état. Tout ce que nous faisons, c'est d'y aller, de nous assurer que nous sommes allumés, double-cliquer dessus pour aller à l'intérieur et faire quelque chose de différent. Ce qui va se passer, c'est que l'animation par défaut est l'animation automatique et on va y aller. En fait, nous allons juste prévisualiser au début. Je ne peux pas vraiment prévisualiser car il n'est pas sur un tableau d'art. Mettons-les sur quelque chose. Je vais agrandir ça. Nous construisons des gens sur des tableaux d'art. On y va. Mon interrupteur à bascule géant, mon géant. Allons-y et prévisualisons. Il est ici, regardez. Cool. C'est tellement cool de faire des choses comme ça. [RIRES] Travailler. C'était juste trop ennuyeux de vieilles formes et regardez ce que nous avons fait. C'est donc comment faire l'interrupteur à bascule. C'est un rite de passage. Vous devez créer ce commutateur à bascule en tant que concepteur UX. Vous n'en avez même pas besoin. C'est très rare que j'ai besoin d'un interrupteur à bascule autre que d' enseigner aux nouveaux concepteurs UX comment construire un commutateur à bascule. Mais c'est une très bonne micro-interaction, c'est vraiment très clair ce qui se passe. Nous pouvons le rendre plus clair. Faisons donc plus de micro-interaction. Nous allons y aller et le coiffer. Maintenant, ce qui est plus facile , c'est que vous le coiffez avant de le transformer en composant. Nous allons faire quelque chose maintenant alors qu'il s'agit d'un composant, il suffit de l'ajuster et ensuite je vais vous montrer la façon normale de le faire. Allons-y à l'intérieur. Décidons dans quel état nous voulons être, Voulons-nous ajuster cet état ou cet état. Faisons ça d'abord. Ce que nous allons faire, c'est peut-être le rendre ennuyeux. Combattons et utilisons la couleur internationale désactivée, qui va être désactivée en rouge, quelque chose comme ça. Il est généralement gris ou rouge. Nous allons utiliser le rouge parce qu' il a l'air chic. Je n'aime clairement pas le rouge. Je vais prendre un peu de rouge. Nous avons ce premier, puis sur l' état ici, rappelez-vous que ce sera la même chose des deux côtés de notre animation automatique à moins que nous ne le changions. Pour le moment, nous avons mis à jour notre état par défaut et ce n'est pas différent sur l'on, donc il restera rouge ici. Nous allons dire que maintenant vous allez être vert. Optons pour un vert vif, trop lumineux. Nous allons maintenant le prévisualiser. Vous allez, bouton de lecture où êtes-vous ? On, éteint, allumé, éteint. Pourquoi est-ce qu'il a commencé en vert ? sais-tu ? Vous le savez. Vous vous souvenez, c'est parce que nous l'avons laissé. Où que vous laissiez cela, n'oubliez pas que c'est le point de départ. Nous allons supposer qu'il est éteint et l'allumer pour qu'il soit vert. Cool. Devenons encore plus fantaisistes avec l'animation. Il a ajouté des éléments par défaut et cela pourrait ne pas vous plaire. Où ajustez-vous l'assouplissement ? Vous souvenez-vous ? Où iriez-vous ? Réfléchissez. Où iriez-vous maintenant si vous y étiez laissé ? Je vais le sélectionner. Vous allez à Prototype. Vous pouvez voir ce petit peu, je n'irai nulle part. Il a l'état Default, a un Tap, ce que je veux. C'est une animation automatique, ce qui est parfait. Destination, ça va vers l' état et quel genre d'assouplissement ? C'est en train de s'assouplir. Je vais entrer et sortir, et nous allons le prévisualiser. Jetons un coup d'œil, à l'intérieur et à l'extérieur. C'est juste plus beau à mon avis. Cela signifie qu'il commence lentement, se termine lentement et va vite au milieu. La seule chose, c'est qu'il est difficile de le remarquer, faisons-en un Bounce fou et prévisualisez-le. Ce qui finit par se passer, c'est regarder puis l'arrière, pourquoi revient-il pas dans l'autre sens ? Vous devez juste vous rappeler que vous avez ces deux états. Pour le moment, nous avons l'état par défaut et son animation automatique avec balance mais si je clique dessus, voyez-vous ? Tout est en train de changer. Il utilise la facilité de sortie. Si vous voulez le faire sur les deux, vous y allez. [RIRES] vieux interrupteur mécanique, on dirait. En ce qui concerne le style, je vais maintenant vous donner quelques bases parce que je veux vous présenter quelque chose. Je veux également vous montrer la façon normale de le faire. Ce que je ferais généralement, c'est ne pas faire tous ces trucs sur l'état. Vous pouvez supprimer un état. Revenons simplement à ce premier, je devrais aller à Design. J'ai toujours mon état. Il s'agit toujours d'un composant et il est encore mal nommé. Nous allons avoir un bouton à bascule. Peu importe que vous soyez un style avant de créer un composant, mais juste avant d' ajouter tous les états car il est difficile les modifier tous pour qu'ils correspondent car je vais faire beaucoup de changements. Je double-clique pour aller à l'intérieur. Je tiens Shift et je le mets à l'échelle. Je vais le faire, ce que je veux vous montrer c'est que vous obtenez des points bonus si vous faites une ombre intérieure. J'ai mon ombre intérieure ici et en fait je vais lui donner une couleur de remplissage de quoi, puis la couleur de l'interface, une ancienne couleur Windows qui s'y trouve. n'y a pas de règles sur ce que vous pouvez faire pour cela. Si vous concevez, par exemple, téléphones Android ou Apple, vous utilisez le système d'exploitation. Souvent, vous ne pouvez pas modifier ces commutateurs à bascule par défaut. Vous pouvez donc simplement copier et coller à partir de l'un des kits d'interface utilisateur d'Apple, iOS, ils l'appellent ou Google l' appellent Google. Vous allez juste les coller ici. Nous voulons cependant faire nos propres boutons personnalisés parce que nous sommes géniaux. Je fais une ombre intérieure, vous pouvez y voir. Il s'agit de X et Y, c'est à quelle distance du haut et de la droite, et B est le bleu. Cette petite option ici, c'est à quel point il fait sombre. Je vais donc utiliser le noir, c'est la transparence. Vous pouvez avoir une ombre intérieure de rouge. Je ne veux pas ça. Vous pouvez décider à quel point cette chose est sombre. Je vais le comprendre comme ça et ensuite je vais devenir flou. Utilisez mes touches fléchées pour monter et descendre, quelque chose comme ça et vous débarrasser de la bordure. J'ai besoin de la frontière. Celle-ci ici, nous allons aussi ajouter une ombre portée parce que, pourquoi ? Juste parce que. Floue aussi, peut-être deux et peut-être que ça doit être un et un. Peut-être un peu plus sombre. Vous pouvez voir, vous pouvez vous défouler longtemps avant l'étape suivante pour essayer de la rendre plus agréable. Je pourrais rendre le mien juste un vieux comme ça. Maintenant, je peux ajouter mon état supplémentaire. Est-ce joli ? Nous allons avoir notre propre état et celui-ci va avoir les micro-interactions d'aller ici. Il va devenir vert. En fait, au lieu de passer au vert, nous pouvons rendre l' arrière-plan vert. La couleur d'arrière-plan va donc ressembler à une couleur positive. Trouve un bon vert et peut-être que ça deviendra blanc. Vous y voilà. N'oubliez pas que notre état initial va disparaître. Donnons-lui un aperçu. Est-ce que c'est bon ? Il a l'air cool. Vous pouvez voir que l'ombre intérieure fonctionne différemment de loin. C'est bien d'avoir cette chose ouverte. Je l'ai ouvert sur un autre écran. Vous ne pouvez pas voir cet écran, mais juste quand je suis en train de concevoir de très près. Regardez ça, eh bien, vous prétendez que c'est sur un autre écran. Je peux entrer ici et je peux commencer à jouer avec l'ombre et à voir une version très lointaine. Encore mieux si vous l'avez sur votre téléphone , car vous pouvez le toucher au fur et à mesure. L'autre chose que je veux partager avec vous lorsque nous l'avons regardée beaucoup plus tôt dans le cours, c' est Responsive Resize. Cela n'arrive pas quand il s'agit d'une forme irrégulière, mais quand c'est un composant comme celui-ci, regardez ceci, si je pars, en fait, c'est trop gros et je le rends plus petit, maintenant Shift et en le réduisant. Que faites-vous ? Il fait des choses bizarres. C'est parce que cela est activé lorsqu'il s'agit d'un composant. C'est essayer d'être fantaisiste là où vous pouvez le faire. C'est un bon bouton de réajustement. Nous l'avons adoré jusqu'à présent , mais pour cela, nous voulons tout faire évoluer proportionnellement. Il fait des trucs bizarres. Vous pouvez l'éteindre, puis maintenez la touche Maj enfoncée et redimensionnez-la de façon régulière. Vous remarquerez que l'ombre intérieure peut vous voir ? Restez le même, vous devrez donc ajuster cela, et vous pouvez réactiver le Redimensionnement réactif une fois qu'il est petit et effectuer vos ajustements comme vous l'avez fait auparavant. Mais ce n'est qu'un rappel lorsque vous faites des composants, ce Redimensionnement réactif est activé. Très bien, la suite bascule. Allez vous faire basculer, partie de la communauté de conception UX. Il y a des vérifications lors des conférences de conception pour s'assurer que vous avez effectué votre interrupteur à bascule. Ils le vérifieront à la porte, Ils le vérifieront à la porte alors assurez-vous de fabriquer vos interrupteurs à bascule. Je vais vous obliger à faire un interrupteur à bascule dans quelques leçons pour votre entraînement en classe. Entraînez-vous maintenant et vous en ferez un peu de certitude. Très bien. C'est ça. L'interrupteur à bascule est terminé. 71. Menu de l'hamburger micro Micro transformé en croix en XD: Bonjour à vous. Vous vous sentez déjà comme un concepteur UX ? Nous sommes tout à fait étrangers à ce cours. Tu devrais commencer à te sentir très sexy. Si vous ne vous sentez pas UXy, vous partez après ça. Regardez ça. C'est un autre rite d'animation de passage. C'est la croix qui se transforme en menu de hamburgers ou l'inverse. Comme l'interrupteur à bascule, c'est un rite de passage. La même chose que d'apprendre la lumière de l'objectif dans Photoshop. Tu te rappelles quand tu as appris ça ? Quoi qu'il en soit, permettez-moi de vous montrer comment créer cela dans Adobe XD. Faisons celui-là. Il suffit de trois lignes, 1, 2, 3. Je ne vais pas passer trop de temps à les concevoir. Je vais juste les faire paraître assez bien. Utilisez la flèche de taille vers le haut et vers le bas et faites de petites extrémités arrondies. Cela semble approprié. Cool. Faisons de cela un composant. Appuyez sur la touche « Commande » touche « Contrôle » sur un PC et cliquez simplement sur le bouton. Nous allons avoir deux états. L'état par défaut sera le grand menu et ensuite cet état de bascule sera la croix, nous l'appellerons. Ce que nous allons faire, c'est que nous laissons l'état par défaut tel quel et la croix, nous allons double-cliquer pour entrer à l'intérieur. Ce milieu, rappelez-vous, ne le supprimez pas. Il suffit de baisser l'opacité pour qu'elle disparaisse et s'estompe. Ce haut va être de 45 degrés. Celui du bas ici va être moins 45 degrés. Sélectionnez-les tous les deux. Ensuite, ici, nous allons nous aligner au milieu et juste vérifier. Je vais cliquer dessus, cliquer de nouveau. Je vais juste vérifier s'ils font la queue , et ils s'alignent. Parfait. Commençons par l'état par défaut. Donnons une pièce de théâtre. Allons-y ici. Êtes-vous prêt ? [RIRES]. J'adore celui-là. Allons-y. Je l'ai fait un million de fois, mais c'est toujours excitant. Vous le faites, vous serez excité. Donnez-lui un clic. Il est difficile d' arrêter de cliquer. Il ne fait même rien. Un peu plus tard dans le cours, nous allons créer un menu qui apparaît dans petite navigation latérale qui apparaît sur l'appareil mobile. [RIRES]. Je vais arrêter de cliquer dessus et nous passerons à la vidéo suivante. Nous ne ferons qu' une petite chose, juste pour le réitérer. Si vous souhaitez modifier le timing, n' oubliez pas que votre état est sélectionné, le menu Burger sélectionné, puis accédez au prototype et vous pouvez cliquer sur les différents états. État par défaut, si vous voulez que ce soit ou qu'il soit facile d'entrer et de sortir, c'est mon préféré. À quelle vitesse ? 0,5, ne vais pas m'entraîner, je ne suis pas sûr, en fait. J'aime vraiment l' entrée et la sortie faciles. Je le fais tous les deux, donc ils font tous les deux la même chose. Nous allons faire 0,5. Voyons comment ça se passe. Aperçu. Je ne sais pas, peut-être un peu lent, peut-être en arrière 2.3, mais voilà. Menu basculant. Cliquez sur eux tous. C'est ça. Je vous verrai dans la prochaine vidéo. 72. Projet de cours 15 - Micro micro: Il est temps de créer vos propres micro-interactions. Nous en aurons déjà fait deux. Si vous ne les avez pas déjà fait, assurez-vous de les faire. C'est l'interrupteur à bascule et le menu de hamburgers qui se transforme en croix. Ensuite, votre propre personnalisé. L'interrupteur à bascule peut être réel, simple et basique. Ils peuvent tous être réels, simples et basiques. Vous essayez peut-être simplement de suivre ce cours pour continuer, mais si vous avez un peu plus de temps, quelques recherches. Il y a des choses vraiment sympas que vous pouvez faire avec un interrupteur à bascule. Maintenant, dans ce cas, parce que c'est un cours, vous pouvez le rendre aussi chic que vous le souhaitez. Dans le monde réel, vous voulez probablement que ce soit vraiment simple et clair et non une animation complète, mais vous avez la permission d'en devenir fou si vous en avez le temps et le désir. Regardez les interrupteurs à bascule, ce sont des trucs vraiment sympas . Menu Burger. Vous ne pouvez pas faire grand-chose avec celui-là. [RIRES] A tendance à dessiner une croix. Il y a différentes façons de le transformer en croix. Vous y allez. Le propre sur mesure. Encore une fois, si vous avez le temps, j'aimerais que vous fassiez une petite exploration avec quelque chose comme, Dribbble est un meilleur endroit et a ces miniatures très faciles à prévisualiser. Jetez juste un coup d'œil. Vous pourriez opter pour quelque chose d'assez extravagant. C'est presque de l'animation et ce n'est pas vraiment utile qu' une micro-interaction. Ou vous pourriez faire quelque chose de simple, comme si cela ressemble à un interrupteur à bascule. Regardez ce blobby. Comment feriez-vous cela ? Il y a des choses géniales. Cela dépend de votre niveau de compétence votre animation et de vos capacités. Mais regardez un peu, trouvez celui que vous aimez et que vous pourriez être en mesure de le reproduire, personnaliser et d'essayer de le faire fonctionner dans votre application. Regardez votre document et partez, que se passe-t-il ici ? Puis-je mettre à jour ou animer une petite interaction ? Cela peut être simple, il peut être assez extravagant. C'est à vous de choisir. Trois d'entre eux, les livrables, enregistrent la vidéo, si vous le pouvez, téléchargez-la sur un site d'hébergement vidéo, partagez-la avec nous et partagez-la sur les réseaux sociaux. Si vous ne pouvez pas faire les vidéos, comme avant, il suffit de prendre une capture d'écran. C'est ça. Projet de classe, micro-interactions. Amusez-vous bien. C'est très excitant. J'aime bien penser que c'est le cas. [RIRES] J'aime faire des micro-interactions. J'espère que vous le ferez aussi. Vas-y, fais-le. Je vous verrai dans la prochaine vidéo. 73. Comment pin la navigation vers le haut de Adobe XD: Bonjour à tous. Comment épingler des éléments pour qu'ils ne défilent pas avec le reste de la page ? Voyez la navigation en haut sur laquelle nous cliquons sur les défilements en dessous, afin que nous puissions toujours accéder à ma navigation. Nous ferons de même pour notre petit snack-bar en bas ici, et je vais vous montrer à la fin comment désactiver cela également. Il a l'air assez complet. Laissez-moi vous montrer comment. Tout d'abord, vous avez besoin d'une page qui défile réellement. Celui-ci n'est pas assez long pour faire défiler pour que je puisse le faire fonctionner, mais je ne pourrai pas le tester visuellement. Cette page est assez longue. Si je le prévisualise, il y a un défilement. Alors que cette première page, je ne peux pas faire défiler vers le haut et vers le bas. J'utilise ma molette de défilement, ça ne fonctionne pas, donc vous devez allonger votre page. J'en ai déjà un qui est plus long, mais passez en mode Création avec le nom de la page sélectionné. Assurez-vous juste que c'est assez long. Vous voyez cette ligne pointillée et au moins il y a un défilement en cours. Je vais travailler sur cette page et travailler sur cette navigation. Tout ce que vous aviez besoin de faire ce que vous voulez épingler , de le faire sélectionner, de passer au prototype, puis d'aller ici et de dire « Position fixe lors défilement », et c'est fini. Jouons-le et regardons ça. Il est fixé au sommet. Mon problème c'est que mon ordre de couche n' est pas tout à fait correct. Selon qui a été créé dernier ou qui se trouve en haut de l'ordre des couches, vous devrez peut-être mettre cela au premier plan. Faisons ça. Lorsque cette option est sélectionnée, j' utiliserai tout le temps le crochet carré Command Shift . Les crochets sont ceux au-dessus de votre touche P. C'est Control Shift et des crochets que je dois faire avancer et revenir en arrière. Lorsque nous cliquons avec le bouton droit, renvoyez-le. Maintenant, je veux qu'il clique avec le bouton droit de la souris et le mette en avant. Nous allons le prévisualiser maintenant. Gardons ça ici, regardons ça. Maintenant, il passe au-dessus de tout. Il n'est cependant pas très utilisable. Il est très courant d'ajouter un peu de couleur d'arrière-plan. Retour à la vue design. Je pourrais entrer dans mon composant et le modifier ici et il apparaîtra sur tous ou il pourrait être séparé où je vais juste devoir le copier et le coller, pas une partie du composant juste en arrière-plan, mais je doivent le copier et le coller sur chaque page. Essayons de le casser sous les composants. Cela va rendre cela un peu plus douloureux dans le dos parce que nous sommes déjà entrés dans ce problème. N'oubliez pas que si nous essayons d' ajouter des trucs ici, il y aura de la douleur dans le dos, mais nous verrons. À l'intérieur de mon composant Top Nav antérieur, si vous sautez sur cette vidéo et que vous n'avez pas suivi le cours, ou si vous sautez simplement en arrière et que vous n'avez pas besoin d' être dans le composant. Nous le faisons simplement parce que vous aurez probablement besoin à un moment donné. Je vais l' envoyer à l'arrière. Je vais me débarrasser de la frontière. Pour le moment, c'est juste blanc, c'est à vous de décider. Nous allons le prévisualiser, donc je vais prévisualiser cette page. Il est là, et il reste au sommet. Il y a quelques choses que les gens font , c' est que vous pouvez aller à l'intérieur, saisir ce rectangle blanc en arrière-plan et ajouter une ombre portée. Je vais le laisser par défaut. Prévisualisons ça. Prévisualisons ceci. On y va, on a une ombre portée au-dessus ou en dessous. Ou bien, ou bien vous pouvez le sélectionner et mettre le remplissage, il suffit de réduire un peu l'opacité pour qu'elle soit là, mais vous pouvez voir à travers elle. Vous savez que je veux dire ? Ça commence probablement à être un peu plus opaque, mais c'est parti. Épinglez-le en haut. Maintenant, vous pouvez épingler n'importe quoi. Où est cette petite chose ici ? C'est un petit peu ici. Vous vous souvenez de notre petit snack-bar , notre petit truc grillé ? On peut le garder en bas ici. Oh, en fait, avec elle sélectionnée, qui se souvient où vous allez pour le réparer ou l' épingler ? Vous souvenez-vous ? Oh, vous le savez. C'est sous prototype. Regardez, prototype. C' est ça, c'est super facile. Prévisualisons cela et regardons que tout reste. Est-ce que je peux le fermer pour le moment ? On dirait que je peux ou vous allez vouloir savoir comment le fermer, n'est-ce pas ? Vous l'êtes. Nous le ferons également, mais soulignons l'épinglage. Nous avons épinglé le haut et le bas parce que plus de travail pour vous et moi. Ce que vous devez garder à l'esprit c'est que la page doit être suffisamment longue pour faire défiler et que vous devrez peut-être jouer avec l'ordre de vos calques. Ensuite, vous pouvez ajouter une transparence d'arrière-plan d' ombre portée pour le rendre un peu plus lisible lorsque vous faites défiler. C'est à mi-chemin. Voyons maintenant comment fermer ça. Arrêtons ça. Jetons un coup d'œil. J'ai prévu de le faire plus tard dans le cours. J'allais faire une autre façon. Mais nous sommes ici, c'est intéressant et je vais vous montrer mon processus. Je vais zoomer, saisir toutes ces choses, ça devient désordonné, puis je le sélectionne. Ce que vous finissez par faire, c'est que vous avez deux pages. En fait, non, nous allons le faire de cette façon. Cette façon est encore plus intelligente, je pense. Nous allons passer en mode Création et cliquez sur ce bouton. Nous allons avoir un bascule. Est-ce que tout cela fait partie de la même chose ? C'est le cas. C'est un groupe. Ce que nous allons faire, c'est que nous utiliserons quelques fois le basculement et réduirons l'opacité. Vous comprenez ce que nous allons faire ? Je vais dire que vous êtes un composant avec un état de bascule. Une fois qu'il est basculé, il sera désactivé. Alors, l'hors-état ici, pouvons-nous refuser tout ça ? C'est allumé. Non, tu ne peux pas tout faire, je le pensais, donc tu devais faire les bouts individuels. Pour une raison quelconque, si vous faites l'apparence du composant, il le fera à la fois dans cet état et cet état. Vous êtes là. L'état si je le rallume , mon parent est de retour. Voyez-vous que cela affecte les deux ? Nous devons aller à l'extérieur de l'état. Allez à l'intérieur, sélectionnez tout. Maintenant, j'ai double-cliqué pour entrer dans le composant. J'ai cliqué sur « Commande A » sur mon clavier parce que c'est le raccourci dont je me souviens et vous pouvez accéder à « Sélectionner tout ». C'est Control A, sur un PC ou cliquez simplement sur « Sélectionner tout ». Je suis entré dans mon composant, j'ai tout sélectionné et je vais juste réduire l'opacité de tout ce qui se trouve à l'intérieur. bizarre. Vous ne réduisez pas l'opacité du composant d' enveloppe externe réel. Vous y êtes entré et vous réduisez l'opacité. On s'en prend un peu, je ne sais pas comment ça s' appelle, Inception. Vous connaissez ce nouveau film ? Vous le savez. On y va. Allons y aller. Je vais maintenant sélectionner cette chose invisible et revenir à l'état par défaut, et quand il s'agit d'un prototype, lorsqu'il est tapé sur écoute, il va s'animer automatiquement. En fait, nous allons juste l'animer automatiquement. Il va juste s' estomper, n'est-ce pas ? Destination. Allons dans l'état défectueux et ça va se calmer lentement. Vous pourriez accélérer ça. Donnons un entraînement à la volée. Je n'avais pas prévu de faire ça ici, mais on est là. Regardez ça, faites défiler. Comment l'avez-vous récupéré ? [RIRES] Ce n'est pas absolument [RIRES] infaillible. Non, c'est tout. Xd n'en fait pas une version complète, il y a beaucoup de fakery en cours, ce qui le rend rapide et facile. Pas un grand nombre de paramètres, pas extrêmement complexes. Mais il y a des choses que vous devez simplement sourier et supporter en termes de maquettes où vous ne pouvez pas faire absolument comme une application, mais assez proches pour tester et démonter. C'est de l'épinglage, et comment éteindre cette petite chose. Sur la vidéo suivante. 74. Comment ajouter une superposition de pop-up dans Adobe XD: Bonjour à tous. Dans cette vidéo, nous allons le faire. Nous allons cliquer sur ce « bouton », et il va y avoir une petite superposition contextuelle. Peut-on le fermer, ouvrir à nouveau, le refermer. Permettez-moi de vous montrer comment créer cela dans Adobe XD. Pour commencer, j'ai fait quelques choses. Je modifie un bouton sur notre page de détails de produit, je déplace cette chose parce qu' elle était juste en travers, et je l' ai créé. Ce sera la fenêtre contextuelle que vous avez vue au début n'est qu'un tas de rectangles , de cercles et de texte. Il peut s'agir de n'importe quoi, et vous avez donc besoin de quelque chose qui apparaîtra et d'un bouton qui va l' activer. Ce sont les deux choses à faire pour commencer. La façon dont cela fonctionne, c'est que ce bouton ou m'envoyer un texto tout ce qui l'active, il veut l'appeler un plan de travail et le superposer, donc cette chose ici ne va pas fonctionner. C'est juste dans le pasteboard, juste traîner tout seul. Ce que nous devons faire, c'est le convertir en plan de travail, et nous ne le convertissons pas vraiment en plan de travail, nous cliquons simplement en arrière-plan, si vous n'avez rien sélectionné, saisissez l'outil de plan de travail, comme nous l'avons déjà fait auparavant, nous avons ajouté un plan de travail. Je clique juste une fois. Je peux en fait glisser un plan de travail personnalisé sur le dessus car il s'accroche à la bonne taille. Nous avons transformé notre petit graphique ici en plan de travail. Je vais le nommer, je vais appeler ce chariot modal, et maintenant je peux les connecter. La façon dont ils les connectent, cliquez sur votre « Bouton ». Ce n'est pas un composant, ce n'est rien, c'est juste tout ce qui peut le déclencher. Je vais les sélectionner et dire en fait sous prototype, quand on clique sur cette chose, ce que nous avons fait, c'est que nous avons été sous prototype, c'est que nous avons traîné des choses. Vous pouvez cliquer dessus, en fait, il suffit de cliquer sur l'un d'eux ou de regrouper ces deux-là, donc je vais simplement cliquer sur la « boîte verte ». Nous les avons fait glisser pour se connecter à des pages. Vous pouvez le faire ou le faire dans l'autre sens. qu'il est sélectionné, nous allons ajouter une interaction, ce sera un toucher et, par défaut, il veut passer à l' animation automatique ou à la transition en fonction de la dernière chose que vous avez faite. La magie se produit ici, sous superposition. Quand il s'agit d'une superposition tapotée, quel plan de travail ? Le chariot modal, s' il vous plaît, et c'est le grand changement. Voyez-vous que cela est apparu ? Il n'y a pas eu une seconde ? Maintenant, c'est là. Faisons un test tel quel, et voyons ce qu'il fait. Je fais défiler mon bouton vers le bas. Hé, regarde ça, et je peux cliquer dessus, fermer ça. génial, c'est que vous n'avez pas besoin d'agir à la fin, il veut simplement revenir en arrière par défaut. Même s'il y a une croix sur ma maquette, c'est juste un cercle avec une croix dedans. Je ne l'ai pas truqué, vous pouvez cliquer n'importe où et ça disparaît. Cela fonctionne juste, mais je n'ai rien eu à faire. C'est la base de tout ça. Il va y avoir quelques choses qui vous plairont. Vous aviez une ombre portée ? Vous n'aviez probablement même pas vu l'ombre portée. J'ai passé des lustres à créer mon ombre portée, mais elle a disparu, et c'est vraiment difficile parce qu'on ne peut pas vraiment voir l'arrière-plan. Quelques petites choses qui arrivent, c'est que c'est ici. Je vais revenir en mode design, première option sur un PC. Je pense que c'est un seul, désolé, les gens de PC. Ce que je veux faire, c'est que le plan et la boîte blanche en arrière-plan sont en fait plusieurs choses. Il y a un plan de travail, une boîte blanche. Pour avoir l'idée, une boîte blanche. Voyez la boîte blanche et le plan de travail séparés. Le problème, pouvez-vous voir qu' il y a ma jolie petite ombre portée, mais parce qu'elle est au-dessus du bord de la boîte blanche est recadrée, donc vous pouvez faire l'une des deux choses suivantes. Vous pouvez rendre votre boîte blanche petite pour la voir, ou vous pouvez saisir votre plan de travail et l'agrandir afin de le voir. Maintenant, donnons un aperçu, revenons à ce type, allons vous voir, ici et il revenons à ce type, allons vous voir, y a une ombre portée maintenant. Oui, ça marche. Je pense que ma boîte blanche est un peu trop grande pour remplir l'écran. Mais oui, nous avons probablement besoin d'un fond plus terne. Nous le ferons également. Nous avons un peu d' avance, mais salut. Une chose est que vous pouvez voir en ajoutant cette fonction de superposition, ce qu'il a fait sur ce plan de travail était en fait de désactiver l' apparence de l'arrière-plan. Vous pouvez le faire manuellement, mais il le fait automatiquement pour voir l'ombre portée, mais voir le reste de cette page dessous plutôt que d'être une grosse boîte blanche. Ce que je voulais faire, c'est que vous avez vu au début j'ai eu ça comme un fondu sombre en arrière-plan. En fait, avant de le faire, il y a un peu qui rend souvent mes élèves confus, alors qu'est-ce qui vous embrouille ? Laissez-moi essayer de le déconfondre. Avec elle est sélectionnée, je vais revenir à mon mode prototype, et je fais un clic, c'est là que cela apparaît. Disons que je l'ai placé juste au-dessus de Riche. Cela arriverait là. C'est juste au-dessus de ça. Si je dois jouer et que je descends ici et que je dis, ça devrait apparaître juste au-dessus de Rich. Boom. Il est apparu au milieu de mon truc. C'est bizarre. Que se passe-t-il ? Fondamentalement, cette chose ici, cette vue d'ensemble, je ne cesse de dire aperçu, la superposition fait référence à ce qu' on appelle la fenêtre d'affichage. La fenêtre d'affichage est en haut du document jusqu'à cette petite ligne ici. N'oubliez pas que nous en avons parlé tout au long du cours, il s'agit donc de regarder en bas, non pas ce qui se trouve en dessous dans le contenu. C'est un positionnement fixe. Si je le déplace ici, pas au-dessus de organique, mais vraiment près du bas de la page, il sera en bas de la page et probablement gênant, il suffit de cliquer dessus, et vous allez. C'est ce qu'est cette référence. Pouvez-vous l'amener à épingler des choses réelles ? Ce n'est pas ce que je connais en ce moment. Vous essayez d'utiliser un positionnement fixe dessus, cela finit par un positionnement fixe, le bouton, pas la superposition. Allons dans le bit un peu plus initial, où nous allons ternir l'arrière-plan. C'est une astuce, ce n'est actuellement pas une option ici pour faire disparaître l'arrière-plan. Ce que nous faisons, c'est que nous mettons cela sur un plan de travail de taille différente qui couvre le tout. Pour le moment, mon plan de travail est de cette taille. Ce que je veux faire, c'est le déplacer ici, je veux la rendre de la même taille que la fenêtre d'affichage pour cela. C'est la largeur, mais allez à ma vue de conception. J'ai cliqué sur mon plan de travail. Je sais que c'est 375, donc je dis que vous êtes maintenant 375 pâtes. À quelle hauteur devrait-elle être ? Cliquez dessus, donc ma fenêtre d'affichage est à la hauteur, donc 667 ou 667. Peu importe lequel je l'ai enlevé. Vous me donnez une hauteur de 667, puis je dis que vous allez être au milieu. Pouvez-vous obtenir ce que je fais ? Utilisez mes touches fléchées juste pour le faire passer par-dessus le haut. Il faut que je le réduise. C'est l'une de ces fois où nous sommes réactifs, redimensionnement est vraiment génial. La plupart du temps, c'est génial. Vous avez vu plusieurs fois fallait l'éteindre, mais c'était génial. Ce que j'ai fait était là, alors je saisis le bord, et si je l'attrape, ça marche, mais si je maintiens la « touche Option » enfoncée, elle le fait des deux côtés en même temps, c'est Alt sur un PC. Je l'ai compris, je veux qu'il soit au milieu, et maintenant ce que je veux faire, c'est simplement ajouter un fond noir sans bordure. Je veux réduire l' opacité du remplissage, et je veux qu'il soit à l'arrière. Nous avons un plan de travail, un fond noir délavé qui correspond maintenant à la fenêtre d'affichage. Si vous étiez comme ça, vous m'avez eu une vue d'ensemble, mais maintenant vous m'avez perdu. C'est bon. C'est un truc avancé. Si vous êtes en train de le faire cinq fois, vous. Êtes-vous prêt ? J'espère que cela fonctionne. [RIRES]. Parler d'un bon match puis venez, ça n'a pas marché [RIRES]. Je sais pourquoi maintenant, mais c' était assez confiant que cela allait fonctionner correctement. Qu'est-ce qui ne va pas ? Le positionnement. Nous l'avons positionné alors qu'il ne s'agissait que d'un petit rectangle, donc si nous passons à la vue du prototype maintenant, lorsque nous cliquons dessus, cela fait exactement ce que nous avons dit par rapport à la fenêtre d'affichage. Voyez-vous qu'il se chevauche le bas ? Je veux dire que vous arrivez au sommet. Maintenant, faisons-le. Prêt ? Même si vous n' avez pas besoin de cliquer sur le « X », vous devez cliquer sur le « X ». C'est cool. J'adore les petites fenêtres contextuelles, et c'est comment les créer dans Adobe XD. Très bien, mes potes, je vous verrai dans la prochaine vidéo. 75. Slide le menu nav mobile: Bonjour à tous. Dans cette vidéo, nous allons créer cette petite navigation mobile qui surgit de côté, que nous pourrons fermer. Il fonctionne. Vous pouvez cliquer sur des choses, accéder à différentes pages, revenir en arrière, donc c'est ce que nous allons faire dans cette vidéo. Prêt, prêt, partez. Vous connaissez déjà toutes les compétences nécessaires pour que cela fonctionne. Il n'y a qu'un petit paramètre que nous devons changer pour que cela se produise. Ce que je vais faire, c'est juste en faire une version simple, vraiment grossière et moche. Ensuite, nous allons le rendre joli à la fin parce que vous êtes ici pour voir comment cette chose glisse et se déplace. Ce que nous faisons, c'est que nous devons concevoir un menu. C'est à peu près aussi loin que je vais aller. Vous décidez dans quelle mesure vous souhaitez que cela glisse. Je vais aller jusqu'ici. Vous pouvez traverser tout le chemin. Je dessine abord avec un rectangle. Mais comme dans une vidéo précédente où il doit s'agir d'un plan de travail, il doit s'agir d'un plan de travail. Vous pourriez commencer dessiner un hors-bord au-dessus d'ici, et ils sont un peu fracassés et les choses sautent des couches. C'est une douleur au niveau des fesses, il suffit donc de le dessiner avec un rectangle puis de le désélectionner en arrière-plan, donc rien n'a été sélectionné. Saisissez ensuite l'outil de plan de travail, puis dessinez-le par-dessus le haut, de la bonne taille. Maintenant que cette boîte blanche, vous pouvez la garder là, vous pouvez la supprimer. Je vais le laisser là parce que je veux faire tout ça dans une seconde. Je vous ai dit que je n' allais pas le concevoir. Ne le concevez pas alors. Tout ce que nous devons faire maintenant, c'est trouver quelque chose qui l'active. Je vais utiliser ceci, évidemment le plus grand menu, donc je vais cliquer une fois, cliquer deux fois pour le faire sélectionner, aller à mon prototype. Cette chose ici, je vais ajouter une interaction, ou je vais la faire glisser ici et dire, lorsque cette chose est tapée, passez à la superposition. Il peut s'agir d'une transition ou d'une animation automatique, selon la dernière chose que vous avez faite. C'est fondamentalement tout, et c'est ce que nous avons fait pour notre pop-up dans la dernière, puis il apparaîtra modal. La seule différence, c'est que, au lieu de dissoudre l'animation, nous allons juste la faire glisser correctement. Vous vous souvenez ? Est-ce qu'il glisse depuis la droite ou glisse-t-il vers la droite ? Je peux essayer l'un, essayer l'autre. Je suis presque sûr que c'est vrai. Glissez à l'intérieur et à l'extérieur, et ça m'a l' air bien. Donnons un aperçu et regardons ça, nous l'avons fait. C'est la base de votre menu. Je vais aller le coiffer maintenant et y ajouter des trucs. Mais c'est essentiellement ça. Vous pouvez partir maintenant, je vais concevoir mon menu et vous pouvez traîner si vous le souhaitez. Mode de conception, option 1 ou quel que soit le besoin de vérifier. C'est probablement vieux. Je les connais tous par cœur, mais je suis presque sûr que l'un est différent sur un PC je veux dire. Qu'est-ce que je vais faire ? Je vais avoir une autre version du logo double-clic. Je vais emprunter ça. Empruntez ça et empruntez les deux. Pouvez-vous voir ma petite technique de sélection ? Comme je le veux, il est vraiment petit de cliquer et maintenir la touche « Maj » enfoncée et tout est gêné. Souvent, ce que je vais faire, c'est que je n'ai rien choisi. Je viens d'avoir mon outil de sélection et de faire glisser une boîte autour de ça. Il sélectionnera tout ce qui trouve sous cette petite boîte bleue. Ensuite, je maintiens « Maj » pour désélectionner. Vous pouvez le faire un par un en maintenant la touche Maj enfoncée et en cliquant simplement sur les éléments que vous ne voulez pas. Ou ce que je fais, c'est que je maintiens « Shift » et je fais glisser une boîte autour, tout ça. Cela ne signifie rien de retenir. Je veux tout cela, puis maintenez touche « Maj » pour le désélectionner. Est-ce que tu fais ça ? Non, je le sais. Je vais « Alt » le faire glisser ici ou faire glisser l'option sur un PC. Je vais mettre fin à mon menu de nouveaux éléments. Dans ce cas, parce que je veux qu'ils soient cliquables, je ne veux pas utiliser comme un grand menu long, menu retour, retour. Ce que je veux faire, c'est les avoir tous comme leur propre petite unité. Ce premier sera des détails corrects. Je vais passer à mes styles de personnages adorables. Probablement la version audacieuse. Maintenant, je suis presque sûr que vous ne pouvez toujours pas faire puces dans Adobe XD, n'est-ce pas ? Bullet, non, et cela pourrait apparaître dans le futur ici. C'est peut-être le moment présent, pas là. Vous pouvez faire différents types de choses. Ce que je fais souvent, c'est sur un Mac, au moins c'est « Option, 8". Ce n'est pas ce qu'il y a sur ce clavier ? « Option, Shift, 8" vous donnera un petit point. Sur un PC, vous devrez peut-être Google quel est le raccourci pour faire un point à puce et je l'utilise parce qu'il n'y a pas d'option ici. Je ne pense pas. Je l'ai et je vais utiliser ma grille de répétition juste pour quelque chose de simple comme ça. Combien d'options ai-je obtenu ? Probablement quatre. Rendez-les assez grands pour qu'ils soient cliquables et ce qui est bien à ce sujet, c' est que je peux double-cliquer dessus et les faire aller à différents endroits, afin qu'une partie des détails puisse s'y rendre. Rappelez-vous, il se souviendra de la dernière chose que vous avez décidée. Je ne veux pas qu'il fasse une superposition maintenant, je veux qu'il passe à cette page en utilisant la diapositive, à droite ? Probablement pas seulement se dissoudre ou pas, il suffit de le faire sauter là. Maintenant celui-ci, je vais changer de nom et celui-ci va être, en fait, le premier doit être à la maison, n'est-ce pas ? Super. Je vais dire la page de paiement ? J'appelle la page de paiement. Il est probablement plus probable qu'on l'appelle le panier d'achat. J'ai une page de comptes. Je n'ai pas vraiment fait cette page, mais vous pouvez voir comment il est facile d' utiliser le sous-design, d' utiliser ce que c'est ? Cette chose là, la grille de répétition. Je vais dire qu'on se débarrasse de toi. Vous n' avez pas besoin de le casser pour commencer à travailler avec. Vous pouvez le laisser ici. J'ai besoin d'une maison en haut. Si je clique sur ce haut et que je vais copier-coller, ça ne fonctionne pas, il copie et colle cet élément individuel et ce ne sont que des copies miroir, donc ça ne fonctionne pas comme nous le voulons, Alors, comment y remédier ? Je vais le dissocier et en quoi pouvons-nous le transformer ? Eh bien, nous pouvons commencer à changer de commande et à en ajouter de nouvelles. Nous nous souvenons que c'est une pile. Comment se transformer en pile ? Assurez-vous que son composant. Ensuite, il est écrit pile. Maintenant, je peux en sélectionner un en haut et copier-coller un autre. Maintenant, nous sommes chez nous. Qu'est-ce que cela a fait avec le prototype ? Je ne sais pas. Nous avons conservé le premier. Pour le réajuster, je vais l'attraper et le casser là et dire que vous y allez. Maintenant, vous, mon ami, allez y aller et parce qu'il se souvient de la dernière chose que vous avez faite, ça devrait être très agréable maintenant. Parce que je ne peux pas voir cet autre, au lieu de le faire glisser, je vais simplement dire ajouter une interaction. Se souvient de tout , sauf le plan de travail. Je vais dire aller sur ma page de paiement. Lequel ? J'en ai beaucoup trop. Je vérifierais le Hi-Fi, je ne pense pas vouloir y aller. Maintenant, dans ce cours, j'ai gardé les filaires dans le cadre de ce document juste pour rendre la vie difficile. C'est ce que j'ai fait. Je serais plus susceptible de les avoir sur un autre document maintenant simplement parce qu'ils causent plus de problèmes qu'ils ne le valent actuellement. Il allait commencer car il est facile de copier la mise en page. Mais maintenant, j'ai juste Enregistrer sous, Fichier, Enregistrer sous, faire une autre copie, appelée filaire et une autre appelée haute fidélité. Vous avez attendu ça. Regardez comme c'est beau. Parfois, je sais que je les laisse là parce qu'il est parfois utile de voir les rouages des autres. Encore une fois, comme la grille de répétition, cela signifie que la pile, je peux faire certaines de ces belles choses. Qui se souvient de ce que je maintiens pour gâcher cet espacement ? Ce n'était pas ça. Quelqu'un se souvient ? faut aller à l'intérieur et il suffit de planer au-dessus, mais je voulais tout faire en même temps. Que tendez-vous ? Vous vous rappelez ? Vous regardez le clavier, c'est Shift. Vous l'avez eu. Donnons un aperçu. Toi, mon ami, je vais jouer et on va cliquer dessus et c'est beaucoup plus joli. Comment puis-je le faire apparaître sur chaque page ? C'est un très bon point. Ce que je vais faire, c'est dire que je vais le mettre sur cette page. Ignorons le changement de couleur pour le moment. Je vais juste aller à l'intérieur de celui-ci et le rendre plus sombre. Je vais aller ici et supprimer celui-là. Eh bien, supprimons simplement celui-là. Je vais faire passer celui-ci parce qu'il contient à l'intérieur d' ici mon prototype, qui va à l'intérieur qui est lié à ça. Tant que je copierai et collez cette navigation en mode prototype, elle fera passer ce lien. Je vais dire que vous copiez, allez sur celui-ci et collez. Vous n'avez pas besoin d'un plan de travail différent pour tout le monde. Allons le nommer juste à un. J'ai besoin d'en ajouter un comme un rectangle en arrière-plan ici, donc « R » pour le rectangle, doit être en mode design, sinon, R ne le fait pas, je ne sais pas ce qu'ils ont fait. Je n'ai rien fait. Sortons ça. en mettons quelques-uns, choisissons cette couleur, cette couleur est l'opacité des couleurs. Envoyez-le à l'arrière, donc maintenant cela devrait fonctionner. Allons y aller. Détails du produit. Super. Vous semblez, je peux le fermer. Eh bien, vous semblez, je veux aller aux détails du produit, mais c'est toujours le menu disponible. C'est ce que nous avons. Maintenant, je peux vous connecter à la maison pour aller à la maison. C'est ce que nous avons fait aujourd'hui. Je lui ai donné un aperçu. Vous feriez des tests, beaucoup de tests. De retour à la maison. Les détails de ce produit. Il s'agit d'un menu coulissant. C'est assez facile d'y aller. Juste votre aperçu, assurez-vous simplement qu'il se trouve sur son propre plan de travail correspond la même taille que votre fenêtre d'affichage et que vous pouvez lier plusieurs éléments ou y revenir. Une fois que vous avez monté votre composant haut ici en termes de rig up, mais je veux dire comme connecter le prototype, toutes ces petites lignes pointillées ici sont une fois que vous l'avez, assurez-vous de copier et collez-le en mode prototype, pas en mode conception, car le mode de conception supprimera toutes les parties qui se terminent. C'est ça, menu latéral coulissant. Je vais réduire un peu l' opacité de cela. Vous pouvez vaquer à vos affaires maintenant. Jetons un coup d'œil. Il y a un magasin dans les alentours. Spectaculaire, pas vraiment lisible. C'est suffisant pour cette vidéo. Je vous verrai dans le prochain. 76. Projet de cours 16 - Pop-up et navigation: Bonjour à tous, heure du projet de classe. Je vais vous demander de faire une fenêtre contextuelle et une navigation. La navigation est facile. C'est celui-là. Il n'est pas nécessaire que ce soit exactement comme le mien. J'ai un peu de recherches. Jetez un coup d'œil sur votre téléphone, juste des sites Web que vous fréquentez beaucoup et voyez comment ils ont fait de la navigation, des choses que vous aimez, des choses que vous n'aimez pas et peut-être regardez des choses comme Dribbble ou Behance ou même juste Google et recherchez interface utilisateur de la navigation mobile juste pour voir différents styles et la façon dont ils interagissent réellement et comment ils fonctionnent réellement ou comment sont-ils entrés dans la page et stylisent cela petit panneau aussi. Plus beau que le mien, de vieilles balles ennuyeuses. L'autre partie est celle des fenêtres contextuelles. Il y en aura deux. Je veux que vous fassiez un pop-up comme nous l' avons fait. Nous l'avons fait. Nous avons utilisé cette confirmation « Ajouter au panier ». Vous pouvez le faire, c'est très bien. Mais c'est aussi ce que nous avons fait. Vous l'avez peut-être fait tout au long du cours, alors jetez un coup d'œil à faire quelque chose d'autre en tant que pop-up. Jetez un coup d'œil à votre design. Quoi d'autre pourrait être quelque chose qui apparaîtra mais qui vous renvoie sur la même page. C'est peut-être quelque chose comme une infobulle. Il y a soit un I pour information, soit un petit point d' interrogation où vous pouvez cliquer dessus et il vous donne plus d'informations. Exactement le même principe. Nous avons cliqué sur le bouton « Acheter » pour afficher la confirmation du panier, mais vous pouvez également le faire pour une infobulle. Ne cliquez pas dessus. [RIRES] Cliquable. Vous pouvez également penser à n'importe quoi d'autre, tant qu'il y a alors une fenêtre contextuelle cliquable. Il va nous obliger à nous inscrire modal à notre newsletter. Modal si vous ne le savez pas déjà, c'est leur mot utilisé pour une petite unité, surtout qui apparaît. Quelque chose qui apparaît est modal. Il ne vous emmène pas vers une autre page pour faire quelque chose. C'est ce petit écran d'information où vous pouvez faire quelque chose et potentiellement revenir là où vous êtes. Il ne s'agit pas d'une page distincte. Il apparaît en haut d'une page existante, donc modale. Je veux que vous fassiez une inscription à la newsletter. Ils apparaissent sur des pages ou quand vous essayez de partir, ils sont comme, hé, aimeriez-vous que ça disparaisse ? Alors, inscrivez-vous à la newsletter modal ou quelque chose comme, 10% de réduction si vous vous inscrivez à notre newsletter par e-mail. Maintenant, la différence entre ceci et dire l'infobulle ou le « Ajouter au panier » est que je veux que ce soit une pop-up chronométrée et vous êtes genre, il ne nous a pas montré comment faire exprès. Ce que je veux faire, c'est que, au lieu de simplement me suivre à travers cette chose, j'ai l'impression qu'à ce stade de notre cours ou de nos leçons, vous pourriez ou non avoir la capacité de voir si vous pouvez le faire. Ce que je veux dire par là, juste au cas où vous n'êtes pas sûr, c'est que je ne clique sur rien. Il n'est pas sur le robinet. C'est juste un certain temps après un certain temps, une fenêtre pop-up modale apparaît et c'est l'inscription à la newsletter, puis vous pouvez cliquer dessus pour la fermer. Au lieu de le toucher, vous allez essayer de le charger sur une minuterie. Cela va être délicat. Si vous ne pouvez pas le faire, vérifiez les commentaires. [RIRES] J'espère que quelqu'un d'autre pourra vous donner un coup de main, mais je suppose que je veux vous apprendre à pêcher au lieu de vous donner du poisson. Comment ça se passe ? Vous comprenez l'idée. Voyez si vous pouvez le faire fonctionner. Si vous ne pouvez pas, pas de drame. Vous devez faire un peu de googling. Demandez dans les commentaires, demandez dans les groupes si vous trouvez que c'est difficile, mais donnez-y vous-même d'abord si vous pouvez le comprendre. Modal pop-up chronométré. [BRUIT] Si vous pouvez les enregistrer, si vous ne pouvez pas prendre de capture d'écran et les partager aux endroits habituels, j'aimerais savoir ce que vous faites. Copains, navigation heureuse et pop-up making. Bonne chance avec le pop-up chronométré. Sur la vidéo suivante. 77. Quels sont les flux dans Adobe XD: Bonjour à tous. Cette vidéo, nous allons regarder ces choses qui sont des flux. Nous avons regardé un peu plus tôt dans le cours. Nous avions le flux 1, mais nous allons maintenant avoir différents flux que nous pourrons partager. Laissez-moi vous montrer comment les fabriquer. Pour faire un flux, votre premier, regardons ceci est ma page d'accueil pour ma première, j'ai créé un flux plus tôt. Nous cliquons sur cette petite icône d' accueil et le flux 1 est apparu et nous l'avons ignoré plus tôt dans le cours. Cela signifie que si vous n' avez rien sélectionné, absolument rien dans votre pièce, c'est pourquoi nous avons étudié ici. [RIRES] J'ai eu affaire à cette partie ignorante jusqu' ici parce que c'est un peu plus loin dans le cours où nous avons l'espace vide pour déterminer ce que sont les flux. J'ai un filaire. Au lieu d'appeler le flux 1, ce que je vais faire, c'est assurer que nous passons en mode prototype, en fait non au mode partage. N'oubliez pas que c'est l'option de commande 1, 2 ou 3 pour basculer entre ces options, et vous ne le faites pas beaucoup, 1, 2, 3 et rappelez-vous que 3 et rappelez-vous c'est PC, c'est Alt 1, 2, 3, et vérifiez cela. Il s'agit du flux 1. Nous pouvons le renommer. Vous pouvez vraiment le nommer ici ou ici, peu importe. Ce sera mon filaire. Cela signifie que je peux avoir le même document et créer un lien à partager avec les gens. Je fais un lien pour un avis. Nous l'avons fait plus tôt dans le cours, souvenez-vous que j'ai un lien qui m'attend. Vous y allez. Il possède son propre lien unique. Ce que nous pouvons faire, c'est en créer un autre pour cela, nous pouvons revenir au prototype. Nous pouvons cliquer là-dessus. Je peux en faire un autre point de départ en cliquant sur le petit bouton Accueil, puis en mode prototypage , puis en partageant. Je pense que vous pouvez cliquer sur le bouton Accueil et partager également. Celui-ci peut être ma grande fidélité. Je peux créer un deuxième lien. Je vais en créer un autre juste là. Magic, High Fidelity Une des images a pris environ un quart du temps pour créer le lien. Maintenant, nous pouvons partager ce lien avec quelqu'un. Nous avons le même document pour garder notre cerveau au même endroit qu'un designer. Mais pour les personnes qui l'examinent, nous pouvons le partager avec des liens distincts. En haut ici, vous pouvez décider maintenant, disons que nous le changeons, au lieu de tout le monde, nous n'allons inviter que des personnes spécifiques. Nous pouvons décider si nous le faisons pour la version filaire ou la version Hi-Fi que nous envoyons. Maintenant, nous n'en avons que deux ici. Vous pourriez en avoir autant que vous le souhaitez. Comme nous l'avons séparé au filaire, High Fidelity, vous pourriez finir par en avoir un qui est comme le concept 1, concept 2 ou le colorway 1, coloris 2 couleurs différentes. Ou dans ce cas, vous pouvez en avoir un autre sur le partage, vous ne pouvez pas le faire. faut le faire sur prototype. On y va. Même si vous ne pouvez pas le voir, je sais que cette petite icône d'accueil, vous pouvez la voir là, mais elle n'a pas assez d' espace pour être visualisée. Fais ça. Lorsque vous y arrivez , il est là, lorsque vous effectuez un zoom arrière, il disparaît. Allons-y encore une fois. C'est trop petit, mais vous pouvez toujours cliquer dessus. Celui-ci pourrait être la vue de mon bureau. Je peux partager ce lien avec les gens. Mais parce que mes actifs sont sur la même chose, tout le logo et toutes les couleurs, les bugs et autres choses, il est parfois plus facile de les conserver dans un seul document. Parfois, vous devez les diviser en deux documents différents parce qu'ils sont cachés parce qu'il se passe trop de choses. Il s'agit de flux dans Adobe XD. 78. Comment partager votre document avec les clients et les parties concernées et les tests d'utilis: Bonjour à tous. Dans cette vidéo, nous allons examiner le partage notre document avec nos parties prenantes, nos clients ou avec des testeurs utilisateurs. Fondamentalement, l'onglet Partager ici nous avons abordé un peu plus tôt dans le cours, mais nous allons passer un peu plus en profondeur et nous allons passer en revue les différentes options que XD peuvent produire et ce qu'ils sont bons. Allons-y. Nous avons fait un peu de partage au début. N'oubliez pas que nous avons partagé notre conception pour commentaires et récupérons donc certaines des choses dont nous devons nous souvenir. Tout d'abord, lorsque vous partagez un lien, vous devez indiquer à XD quelle est votre page d'accueil, qui est la première page que quelqu'un va voir. Vous le faites en étant en mode prototype et en cliquant sur cette petite maison. Parfois, on ne voit pas la maison. Regardez ça, zoomez dessus. Il fait un zoom arrière. Parfois, il se transforme en un petit onglet. Ce que vous pouvez faire, c'est que vous pouvez dire que c'est en fait ma page d'accueil ou cliquer sur le nom de celle-ci. C'est ce qui va être le cas. Lorsque vous cliquez dessus, nous l'avons déjà fait plus tôt, rappelez-vous quand nous avons fait des flux. Mais ici, on peut dire que c'est vrai. Il va lui donner un nom de flux et c'est peut-être mon animation de confirmation. C'est peut-être un bon point où je vais partager ce lien car c'est de cela que nous parlons. C'est la seule chose à faire, c'est comme, hé, avez-vous apporté ces modifications à l'animation de confirmation ? Ce que nous pourrions faire, c'est simplement partager ce lien, et pour partager ce lien, vous cliquez sur celui que vous voulez. Pour partager, accédez à l'onglet Partager et décidez quels paramètres d' affichage vous allez créer, créer un lien et c'est ce que vous allez partager. Vous pouvez décider de l'accès aux liens. Quelqu'un peut-il avoir le lien ? De toute évidence, c'est moins sûr, mais personne ne va tomber dessus. C'est un lien fou que personne ne va deviner. Mais si vous souhaitez être plus sûr, vous pouvez inviter des personnes avec des courriels. Si vous connaissez leur adresse e-mail, vous pouvez les inviter spécifiquement. Ou la troisième option s'adresse à quiconque possède le mot de passe, pas seulement aux personnes ayant la bonne adresse e-mail, quiconque possède le lien et connaît le mot de passe. Vous pouvez décider lequel d'entre eux vous avez besoin. Vous créez le lien et vous le partagez. Une autre chose intéressante est de dire que ce Hi-Fi va être celui que je veux partager, et vous remarquerez que le Hi-Fi inclut cela plus la confirmation. C'est comme un ajout à, mais ça va commencer à partir de cette page. Même si ces gars sont les premiers dans la file d'attente, celui qui les utilise n'est que des superpositions s'en souviens-toi. Cette maison est donc vraiment importante. L'autre chose, c'est que ça va me montrer ce qui n'est pas inclus. Il n'y a aucun lien entre ces éléments jusqu' à mes filaires, donc ils ne feront pas partie de ce lien. Il en va de même pour ces petites options pour la page d'accueil, différentes versions que nous avons faites. Il faut juste que tu sois attentif. Regardez ce qui est inclus, ce qui ne l'est pas. Donc aucun de ces trucs de bureau, rien de tout ça ici. Ce qui se passe, c'est dire prototype, c'est à la recherche d'une de ces connexions. Pouvez-vous voir les commentaires n' ont qu' un petit lien avec eux ? Si je saisis ce morceau et que je le supprime accidentellement, puis que retourne à Partager et que je clique sur « Hi-Fi », pouvez-vous voir qu'il est grisé ? Cela signifie simplement que cela n'est pas inclus. Je vais cliquer sur « Annuler » sur mon clavier, donc il est de retour dans le jeu. Nous avons créé un lien plus tôt. Nous avons apporté de nombreux changements depuis, nous allons donc cliquer sur « Mettre à jour le lien ». Je peux copier ce lien et l'envoyer par e-mail. Il me dit quand il a été mis à jour pour la dernière fois. Je suis vraiment clair que c'est le lien mis à jour et je peux le mettre dans un e-mail, l'envoyer. Maintenant, si je veux envoyer mes filaires, si je clique dessus, c'est un lien complètement différent. Même s'ils se trouvent dans le même document, il n'y a aucun moyen de se connecter entre eux, nous devons donc créer une mise à jour. Voyez-vous que celui-ci a été fait il y a quelque temps le 11 février ? Je dois mettre à jour ce lien et ils fonctionnent séparément pour les personnes qui le regardent de l'autre côté. Il existe une version filaire et une version haute fidélité, et vous pouvez l'utiliser pour différentes équipes, différentes parties du flux. Vous en envoyez peut-être une partie au service juridique. Certains d'entre eux peuvent être réservés aux droits d'auteur, il peut s'agir de votre responsable de studio. Vous pouvez créer différents flux et simplement savoir qu'il s'agit de liens différents. Examinons les différents paramètres d'affichage. Nous avons fait une vue design plus tôt et je vais vous montrer. Je les ai tous ouverts parce que je vais passer rapidement en revue ce que font tous ces différents, mais fondamentalement la même chose avec différentes façons de les voir. L'examen de conception est le moment où nous allons procéder à la révision de la conception. Ce serait génial pour votre client ou n'importe laquelle de vos parties prenantes qui pourraient être impliquées dans ce projet. C'est peut-être votre plus grande équipe. C'est peut-être aller aux clients. C'est peut-être juste aller voir un pote pour vérifier, et c'est celui que j'utilise le plus. Jetons un coup d'œil à ça. Ce premier onglet ici vous donne presque tout. Il vous offre une navigation de base ici. Ainsi, votre client, s'il n'est pas très averti et ne sait pas comment l'utiliser et qu'il peut simplement travailler jusqu'au bout, il peut utiliser les touches fléchées de son clavier. Il est assez robuste. De plus, il contient les commentaires. N'oubliez pas que vous pouvez épingler ces commentaires à des endroits spécifiques. [BRUIT] Je peux le soumettre. L'autre chose que la vue de conception vous donne ce sont ces conseils. Vous pourriez regarder ça. Si je clique n'importe où, pouvez-vous voir les points forts comme, hé, vous voulez cliquer sur ces éléments. Il s'agit là d'une des différences entre les autres. Voyons un examen de conception de look. Le développement que nous ferons dans une autre vidéo, car il est assez spécifique pour votre développeur web, concepteur web. Si vous le codez, c'est assez précis. Mais la seule vraie différence visuellement, c'est que vous pouvez voir des commentaires. Si je n'avais pas mon propre commentaire là-dedans, la seule différence est que vous pouvez voir cette option ici ? Nous pouvons entrer dans une partie du code, donc pas une énorme différence. Si vous donnez à un concepteur le développement, tout ira bien. Ils peuvent toujours tout faire. Il y a un peu plus, et peut-être que c'est juste un bon programme complet. Même s'il est dit développeur, il n'est pas nécessaire qu'un développeur le reçoive. [BRUIT] Jetons un coup d'œil à un autre. Celui-là peut être une excellente présentation. Fondamentalement, il va simplement le coller en mode plein écran. Si vous envoyez le lien à quelqu'un, il sera en plein écran et il y aura des indications. Il se débarrasse de toutes ces cochonneries. C'est très clair. Même si c'est peut-être vous qui le présentez, vous pouvez simplement l'utiliser pour envoyer aux clients que vous savez qu'ils veulent simplement le voir. Ils n'ont pas besoin de commenter et de se laisser confondre par tout. C'est une version agréable et propre. Mais il a l'idée de les aider. Assurez-vous de relier tous vos boutons. [RIRES] Je pense que je nous ai amenés à une page où rien ne fonctionne, alors testez-le vous-même parce qu'il n'y a pas d' échappement à cette page. Tous ces indices sont réservés aux boutons radio ici. Maintenant, je retournerais à XD et je vais passer au Hi-Fi. Je peux accéder à cette page. Si je regarde mon prototype, ce que j'ai remarqué, c'est que je n'ai aucun de ces outils de navigation qui fonctionne. L'achat a fonctionné. Pourquoi ne pas cliquer sur l'ancien défilement ? là que tu y vas. Cela soulève également un bon point. Ce mode de présentation ressemble à tous ces liens que je vous montre sur mon bureau. Nous devrions, si vous optez pour un appareil mobile, les partager, en particulier pour tester les utilisateurs sur un téléphone. Nous allons ignorer ces liens ici. Rappelez-vous que lorsque nous avons effectué des tests sur un téléphone plus tôt, c'est ce que vous feriez. Vous partagiez le lien, ouvriez sur l'application XD et rencontreriez quelqu'un pour effectuer des tests utilisateur et des tests utilisateur et voir comment il interagit avec l'application, quelqu'un qui est proche de votre utilisateur profil. Même si ce ne sont que des collègues, des amis ou des membres de la famille qui effectuent des tests de base pour les utilisateurs, demandez-les au téléphone parce que c'est bizarre lorsque vous essayez de décider de la taille parce que je sais que c'est Un peu gros. Mon moniteur le rend un peu gros, et j'utilise ma souris et non mon petit doigt. Ce sont peut-être de grandes ou de petites cibles à atteindre et je sais que je n'ai pas de navigation ici, mais j'ai un bouton. Je m'assurerais d'aller ici, d'en trouver un qui a la navigation dessus. Celui-là l'a. Je n'ai pas encore truqué ces deux choses, mais je me souviens que je peux les copier tant que nous sommes en mode prototype et y aller. Vous supprimez. En fait, je veux que tout ça soit terminé. Je copie et colle. La navigation arrive. Maintenant que je l'ai fait, que dois-je faire ? Sous Partager, vous devez vous assurer de mettre à jour le lien. Même si vous avez juste dans les fils, il n'y a rien de différent physiquement là-dedans, le mien l'était. Mais même si vous modifiez simplement la liste minimale d'options, vous devez mettre à jour le lien et leur envoyer un nouveau lien. Quand je dis leur envoyer un nouveau, vous n'avez pas besoin de leur envoyer un nouveau. Vous mettez à jour le lien et il sera mis à jour de leur côté. Un seul lien n'a pas besoin d'être. Vous n'avez pas besoin de les envoyer et de dire, hé, voici un nouveau lien. Ils auront juste besoin de rafraîchir leur page ou de l'ouvrir à nouveau et cela commencera à fonctionner. Laissez-moi vous montrer. Si je vais à Design et que je rentre ici et que je décide que ce bouton ici, nous avons décidé pour une raison quelconque que c'était la mauvaise couleur et nous le changeons pour quelque chose de vraiment évident. Je l'ai sauvegardé. Je vais sur Partager et tout ce que j'ai à faire est de mettre à jour le lien, assurez-vous d'être sur le bon. Voyez-vous qu'il est par défaut en Hi-Fi filaire ? Mettez à jour le lien, puis dans ces maquettes ici, attendez qu'il fasse son travail. C'est fait. Ici maintenant, si je clique sur « Actualiser », lorsque la personne ouvre à nouveau le lien, regardez ce bouton devrait être mis à jour. Vous y voilà. Ce même lien n'a pas besoin d'être repartagé. Nous avons parlé du développement de la revue de conception. Nous faisons un peu de présentation. test utilisateur est fondamentalement la même chose, sauf qu'il n'y a aucune indication. Ces deux-là sont exactement les mêmes, sauf que celui-ci n'a pas le moindre indice. Vous ne voulez pas trop guider vos utilisateurs testeurs car vous voulez savoir s'ils peuvent le faire seuls. Présentation, celle-ci ici, la même, mais les indices sont désactivés. Alors que celui-ci ici, c'est la même chose, mais j'ai ces bons indices. Celle-ci, sans allusion. Génial. Les autres options sont personnalisées. En gros, vous pouvez décider laquelle de ces choses vous plaît. Le mode plein écran est ce qui se produit lorsque vous effectuez des tests et des présentations utilisateur. Afficher les points chauds. N'oubliez pas que c'était la seule différence entre les tests des utilisateurs et la présentation, cette petite chose charnue pour aider les gens à avancer. Vous pouvez simplement décider, afficher les commandes de navigation. Jetons un coup d'œil. Ce sont ces choses en bas ici. Peuvent-ils se déplacer ? Il ajoute ou supprime cela. Vous pouvez décider si cela est utile ou non, et autoriser les commentaires sont des commentaires. Maintenant, il est pratique de mettre à jour les liens, mais il y a des moments où j'aime simplement créer un nouveau lien parce que je veux conserver cette ancienne version, comme une version 1, version 2. Vous avez peut-être remarqué tout au long du cours que j'ai réalisé la version 1, 2, 3, 4. Même s'il est brillamment sauvegardé, j'ai des versions différentes pour moi-même car je ne peux pas l'arrêter. [RIRES] Vous vouliez simplement garder le même document. Ce que j'aime faire, c'est dire que j'envoie ce commentaire. Ce que j'aime faire, surtout si je suis le réviseur, j'adore pouvoir voir quels commentaires j'ai faits parce que parfois je vais marquer quelque chose et dire, hé, pouvez-vous changer ceci et ceci, et mon UX designer m' enverra une version mise à jour. Je ne me souviens pas de ce que j'ai eu des problèmes la dernière fois, donc c'est difficile à modifier. La façon de contourner cela est de dire que nous avons envoyé cela avec des commentaires. Nous avons mis à jour notre lien et nous l'avons envoyé et je souhaite conserver cette version. Ce que je peux faire, c'est simplement sauvegarder le document. Donc, si je vais « Fichier », « Enregistrer sous » et que je vais créer une nouvelle version, je l'enregistre toujours dans le cloud. Version 5, pouvez-vous voir ici ? lien de mise à jour a disparu. Si j'ouvre l'ancienne version, la version 4, ce sera toujours dans le fait que nous étions il y a à peine une minute, vous pourrez accéder à Partager et à son lien de mise à jour. Ces liens restent là et je peux revenir arrière et vérifier ce lien et y aller, c'était les commentaires. Alors que cette nouvelle version, vous devez en générer de nouvelles. Vous avez toujours vos flux comme tous cartographiés, mais les liens vont être nouveaux. Est-ce logique ? La dernière chose à prendre en compte est votre fenêtre d'affichage. Nous en avons parlé plusieurs fois. sélectionner, Commande 3, Control 3 sur un PC pour tout sélectionner , c'est ici. N'oubliez pas que si vous avez une courte page, vous ne la verrez pas. Mais dès que vous avez une page plus longue, cette chose apparaît. Assurez-vous simplement qu'il est dans la bonne position. Il correspond à tout le reste, correspond à votre document de test, même sur la vue du bureau. Si vous effectuez une vue de bureau, si vous faites glisser cela vers le bas, c'est le cas. Nous devrions le vouloir. Parce que si tu oublies et que tu bouges simplement parce que ça m'énerve. [RIRES] J'aimerais qu'il y ait une fenêtre d'affichage sans vue. n'y en a pas pour le moment. Je vais simplement le déplacer d'une façon ou d'une autre. Si vous le retirez d'une façon ou d'une autre, comme je le déplacerais là-bas pour que je puisse le concevoir. Ensuite, si vous exportez cela, vous vous retrouverez avec cela. [RIRES] Vous allez être comme si c'était un peu petit. Assurez-vous simplement qu'il est au bon endroit. Dans mon cas, je veux qu'il se trouve, où est-il ? 667 parce que c'est ce que je teste. Je teste sur mon téléphone que j'ai. C'est la bonne taille. C'est ça. Nous ferons plus d'envoi vers un développeur dans la prochaine vidéo. Sautons là-bas et apprenons tout à ce sujet. 79. Parler avec votre développeur dès le processus de conception XD: Hé, tout le monde. Je suis sorti. Nous sommes coincés trop longtemps dans l'écran de cet ordinateur portable , donc je suis en plein air. Je voulais vous parler de parler avec votre développeur. Il y aura des moments où certains d'entre vous seront eux-mêmes concepteurs UX et seront eux-mêmes le créateur d'applications Web. Il y aura beaucoup de développeurs qui regarderont ce cours pour vous acquérir des compétences Adobe XD. Mais la majorité d'entre vous seront des concepteurs ou des créateurs désireux de concevoir UX, et vous allez devoir commencer à travailler avec le développeur. Certains d'entre vous sont peut-être nouveaux dans ce domaine. C'est comme une discussion pip, comment le faire parce qu'au départ, je l'ai fait quand j'ai commencé, c' est effrayant de travailler avec un développeur ou un ingénieur, selon ce qu'ils se nomment eux-mêmes, web concepteur, ingénieur développeur web. Vous avez fait votre conception, vous l'avez testé, et maintenant, ils vont le construire. Ce que vous ne voulez pas faire, c'est que vous ne voulez pas que ce soit la première fois que vous discutez avec eux. Vous voulez avoir eu une discussion tout au long de la journée. Cela peut être intimidant et effrayant, je sais, parce que j'étais intimidé et effrayé de travailler. En le remettant au développeur, vous êtes comme, vous leur envoyez un e-mail, première fois que j'ai discuté avec Sally, vous l'envoyez et vous espérez le meilleur. C'est sans aucun doute tous les emplois qui se sont vraiment mal déroulés, sont des emplois qui ont suivi cette ligne de processus. Les tâches qui se passent très bien sont celles où je vais découvrir qui est le développeur, si c'est quelqu'un avec qui je travaille constamment, comme des développeurs avec qui je travaille tout le temps, donc j'ai Très bonne relation avec eux. Mais disons que c'est pour un autre client et le client organise le développeur, vous n'en êtes même pas sûr. C'est pour découvrir cette personne très tôt et l'impliquer. Parce que ce que vous ne voulez pas faire, c'est être vous contre développeur, ce qui peut arriver. Le designer m'a donné ce truc et j' essaie de le construire, et ils ne savent rien. Vous, effrayé par le développeur. C'est juste une mauvaise façon de livrer ce produit au développeur parce qu'il devient vous contre eux, il devient, pourquoi ont-ils fait cela ? Où s'il est tôt, il y a tellement de fois dans un projet où j'ai supposé que les choses étaient trop difficiles et nous le ferons plus tard. J'ai discuté avec mon développeur, n'est pas forcément une réunion officielle, c'est juste comme, hé, c'est ma première filaire, c'est le bref, et je parle juste de ce que vous voulez faire. C'est juste génial parce que vous êtes comme, cette chose que vous pensiez vraiment difficile et vous allez faire plus tard , peut-être dans la phase deux, est vraiment facile et ils sont comme, non, cette chose est qui se passe déjà de ce côté-ci , appelez simplement autre chose ou est-ce quelque chose de différent, ou c'est intégré dans le framework que j'utilise. Vous pouvez obtenir ce genre de choses début de votre travail avec le client. Le contraire, c'est parfois que vous pensiez que ce serait vraiment bien. Génial. Cela semble facile. Alors le développeur est comme, ce n'est pas facile. vous semble facile, mais la façon dont peut-être la logique, la plateforme ou la base de code qu' ils utilisent déjà est tout simplement pas capable et c'est un gros travail de l'obtenir. Vous devrez peut-être simplement laisser plus de temps pour le travail ou passer à la phase deux. La deuxième phase est une bonne façon de dire que cela se fera à l' avenir, mais probablement jamais. Vous ne voulez pas dire au client que cela ne peut jamais arriver. On le fait en phase deux, ce qui n'est jamais le cas, mais ça sonne mieux. Cela peut être formel, je trouve cela simplement conversationnel, découvrir qui c'est, rencontrer eux, parce qu'il n'y a pas de moyen officiel. Je vais vous montrer comment donner des trucs au développeur, mais il n'y en a pas comme x, y et z. Donnez-les à une imprimante, si vous êtes graphiste, il y a un moyen spécifique, vous pouvez le découvrir. Saignement, recadrage , résolution et ces choses, avec le développeur, ça va dépendre d'eux, ils vont vouloir des choses précises, définitives. Ensuite, il s'agit en grande partie de la façon dont ils veulent travailler et de la façon dont ils le construisent. S'il s'agit d'une mise à jour d'un nouveau site ou de la création d'un nouveau site, ils auront besoin de beaucoup plus de votre part. S'il s'agit d'une mise à jour d'un site existant, ils vont simplement utiliser vos conceptions comme guide visuel et tout faire séparément de vous. Tout ce dont vous avez besoin pour leur fournir ce sont probablement des images. C'est ce que je voulais dire, c'est que si vous avez peur des développeurs, ne vous inquiétez pas, les développeurs ont également peur des concepteurs UX. C'est la même chose, mais de l'autre côté. Avoir une conversation tôt fait le projet fonctionne 10 fois mieux, croyez-moi là-dessus. Vous avez parlé à votre développeur et maintenant, il est temps de leur donner quelques trucs. Allons maintenant dans XD et donnons-leur des trucs. 80. Exporter les bons formats de fichiers d'image à partir d'Adobe XD: Bonjour à tous. Dans cette vidéo, nous allons exporter des images depuis Adobe XD, prêtes à être transférées à notre développeur. Nous allons examiner à la fois la mécanique de l'exportation de certaines astuces et aussi certains formats. C'est pourquoi celle-ci est un peu plus longue. Nous vous expliquerons quand vous devriez utiliser un format JPEG contre PNG contre SVG. Allons chercher toutes les images. La première chose que vous devriez probablement faire lorsque vous exportez des images est de donner un aperçu des images, un PDF de deux pages seulement. Vous pouvez simplement accéder à Fichier, Exporter, Tous les plans de travail. Le problème, c' est qu'il va exporter tout ce qui est un plan de travail. Ayant juste un document de référence, je vais l'utiliser pour autre chose que pour placer les images comme vous leur envoyez si vous leur envoyez 400 images et elles se disent : « Où vont-elles ? » Vous pouvez créer un PDF juste pour qu'ils puissent voir où tout va. Ils pourraient évidemment utiliser le lien également. Pour ce faire, vous pouvez sélectionner uniquement les pages souhaitées. Cliquez sur le nom enfoncé Maj, cliquez sur ceux que vous souhaitez sortir. Je vais juste exporter ces quatre et je vais aller dans Fichier, Exporter, puis je vais aller dans Exporter la sélection, puis nous ferons tout le tableau d'art. À partir du format, le PDF est vraiment bon, plusieurs pages, une bonne résolution, et nous pouvons cliquer sur Exporter. J'en ai déjà fait un car c'est la deuxième fois que je l'enregistre. J'ai perdu mon chemin là-bas. On y va. Nous avons un PDF et nous pouvons simplement l'envoyer, inclure dans nos objets qui sortent. C'est juste à titre de référence, des choses qu'ils peuvent réellement utiliser. Nous pouvons utiliser la même technique. Cette image ici, je dois la faire sortir pour le développeur. Pourquoi cela se fait exporter et non ce texte. Ils vont reconstruire le texte en HTML, ou cela dépend de la façon dont ils créent, s'il s'agit d'une application par rapport à un site Web. Ils ne voudront pas de hauteurs de votre texte. Ils ne voudront pas de quoi que ce soit que vous avez dessiné, comme des boutons. Vous n'allez pas vouloir cette zone pour votre formulaire car ils utiliseront le code pour le créer. Avec vos boutons ici, il y a un bouton. Bizarrement, même si vous avez déployé beaucoup d'efforts dans votre ombre portée, ils la reconstruiront à nouveau en utilisant code, même de l'ombre portée. Les éléments qui sont exportés qui sont considérés comme images sont des éléments qui ressemblent à des images claires. Nous en avons un tas partout. Les choses que vous avez dessinées comme ces icônes. Ces icônes ici nous seront exportées sous forme d' « images ». Nous allons faire ça. Cette image va sortir. Pour obtenir une image, vous pouvez simplement accéder à Exporter le fichier sélectionné. Je veux vous montrer ainsi simplement parce que je veux vraiment passer brièvement en revue les formats. Vous devrez peut-être faire des recherches un peu plus sur ce sujet, mais vous allez avoir affaire à l'un de ces quatre. PDF que vous connaissez probablement déjà. n'était qu'un bon format de document d'aperçu. Nous n'allons plus utiliser ça. JPEG contre PNG contre SVG. Quand il s'agit d'images comme nous l'exploitons maintenant, c'est au format PNG ou JPEG. La différence est qu' un PNG permet une certaine transparence. Laissez-moi jeter un coup d'œil à celui-ci. Voyons voir, celui-ci doit être un PNG. Je préfère que ce soit un JPEG. Pourquoi ? Parce que JPEG ou plus petits. Vous pouvez obtenir une excellente qualité avec une taille de fichier très petite. La taille du fichier est très importante lorsqu'il s'agit de charger des sites Web. Pouvez-vous comprendre pourquoi celui-ci doit être un PNG par rapport à celui-ci ? Coins arrondis. Celle-ci présente des coins arrondis. Il doit y avoir des coins transparents. JPEG ne laisseront passer aucune transparence. Comparons ces deux-là. Je vais l'exporter deux fois. Exportation de fichiers comme sélectionné. Nous allons le faire à la fois en JPEG. La qualité, nous en parlerons également dans une seconde, mais exportons celle-ci, puis exportons une fois de plus au format PNG. Nous l'avons exporté. Je vais juste le ramener pour vous montrer la différence. On va peut-être le faire. Nous allons créer un tableau d'art ici. J'ai un gros document avec un contraste là-dessus. Je vais utiliser l'importation. Je vais dire que voici ces deux là. Importez-les deux à la fois. Vous voyez la différence sur les bords ? Je connais la qualité. Nous en parlerons dans une seconde. Mais vous pouvez voir qu'un PNG permet cette transparence, alors que les JPEG, même s' ils sont parfaits pour les images, ils ne sont pas parfaits pour les images où vous avez besoin de transparence. Si vous avez fait un masque de fantaisie amusant, il va falloir qu'il s'agisse d'un PNG. S'il s'agit simplement d'un carré ou d'un rectangle, où en sommes-nous ? Celui-là, parce qu'il a de beaux bords tranchants, aucune transparence n'est nécessaire, il va être un JPEG. Parlons de la taille qu'il devrait avoir. Exportation de fichiers sélectionnée. Nous avons décidé que celui-ci devait être un JPEG. La qualité, maintenant, cela dépend de ce que vous savez à ce sujet. Une bonne zone de sécurité est de 80 pour cent, 60 pour cent va probablement aller aussi bien. Tout ce qui est inférieur à cela, cela va rendre la taille du fichier belle et petite, mais cela ne rendra pas la qualité très bonne. Un pourcentage de 100 % est trop élevé pour accéder à un site Web dans notre cas. L'un de ces deux. Cela dépend de sa valeur. Le nôtre est le produit, c'est ce que vous essayez de vendre, donc la meilleure qualité que vous puissiez faire, 80 % est probablement importante pour cela. Si ce n'est que des choses d' arrière-plan favorables, dites cette image d'arrière-plan ici. Celui-là n'a pas besoin d' être beau et il est énorme. Celui là serait très bien à 40 ou 60 %, car il s'est estompé en arrière-plan. Personne ne remarquera la qualité, alors que le produit que vous essayez d'acheter doit probablement être aussi bon que possible. Jetons également un coup d'œil au format JPEG par rapport au PNG. Voyez-vous la différence de taille ? JPEG, ils sont tous les deux la même version finie , sauf pour la transparence. Nous utilisons des JPEG car ils sont plus petits. Vous pouvez obtenir la même qualité, mais dans notre cas, près de la moitié ou un peu plus de la moitié de la taille du fichier et de la taille du fichier sont importants. PNG sont incroyables, mais gros. JPEG sont minuscules, mais ils n'ont pas de transparence. Nous ignorons les SVG pour le moment. Quand j'arrive ici et que je vais exporter la sélection. Nous allons faire notre JPEG. Nous avons parlé de la qualité et de la taille des exportations. C'est important. Ce qui finit par arriver, c'est que si vous l'exportez à la taille qu'elle est, faites-en une de la taille qu'elle est. J'en ai déjà fait un qui était à deux heures. Faisons un autre à la fois. Je vais accélérer ça. Je l'ai exporté trois fois, à la taille unique, aux deux tailles et à la taille réelle. Pourquoi avez-vous besoin de tailles complètes ? Vous n'avez pas besoin de quatre tailles. Souvent, deux sont ce qui est nécessaire. La raison pour laquelle vous en avez un deux et quatre ou autant que vous le souhaitez, c'est qu'à cette taille, la qualité est bonne, mais si vous accédez à un téléphone un peu plus grand, oubliez pas que nous devons nous adapter à différents types de téléphone. téléphones. Si je fais ça, pour ce téléphone et qu'il passe ensuite sur téléphone plus grand avec un écran différent, ça ne sera pas très joli. Ce que les gens font, c'est qu'ils feront parfois deux tailles. C'est ça à deux symboles. Nous ajoutons cela simplement pour identifier lequel est lequel, car ils ont tous le même nom de fichier. Nous avons sacrifié le fait d'être plus du double de la taille que la première, mais cela nous permet une certaine flexibilité lorsqu'il est utilisé sur différents appareils de différentes tailles. Il est très courant de le faire à deux reprises. Quatre sont parfois plus dans la conception d'applications. Ils voudront des tailles encore plus grandes simplement parce que les résolutions sur les écrans par rapport aux appareils de bureau et aux sites Web peuvent être exceptionnelles comme vous le serez à l'avenir. Cela peut être parfois 20 parce que la résolution sur les téléphones plus tard, en réalité virtuelle ou dans les futures choses peut nécessiter des tailles différentes, mais c'est pourquoi vous finissez peut-être exporter quelque chose c'est deux fois plus grand. C'est parce qu'il y a un peu d'écrasement, il peut y avoir un peu de gros, être plus petit, et il est toujours de bonne qualité. Lorsque vous exportez, en particulier pour le Web, Web mobile ou le Web de bureau, l'attente est à la double taille, parlez-en au développeur, peut-être comme quelle taille voulez-vous cela ? Ils seront comme, je m'en fous. Je suis un développeur qui y est parfois aussi. Si vous ne les envoyez qu'un seul type, vous n'avez pas besoin d'ajouter. J'ai toujours envie d'ajouter deux ou 2x est une autre façon courante de l'écrire. Vous n'aurez pas à écrire tout ça. Vous y allez, voici toutes vos images. J'ai un bac, je n'en ai pas besoin. Vous y allez. Est-ce logique ? JPEG : taille de fichier faible, excellente qualité, pas de transparence, et généralement il suffit les exporter à deux fois la taille dont vous avez besoin. Vous remarquerez également qu'ils ont pris le nom de ce qui est répertorié ici. Vous ne l'avez peut-être pas remarqué, mais cela tire son nom de mon image que j'ai importée. C'est de là qu'il tire son nom. Vous pouvez modifier le nom ici, vous pouvez décider que ce n'est pas un très bon nom. Vous êtes peut-être une éco-personne et vous pourriez dire : « Ok, ça doit être appelé thé vert bon marché. Éco terrible, mais c'est de là qu' il va tirer son nom. Si je l'exporte maintenant, File, Export, Selected, ça prendra ce nom. Tu y vas, thé vert pas cher. Vous pouvez évidemment le changer la volée maintenant au fur et à mesure. C'est de là qu'il tire son nom, et cela se produit de plus en plus lorsque vous commencez faire des choses comme la prochaine étape. Supposons que je souhaite exporter cette image. Vous devez décider ou peut-être discuter avec votre développeur, est-ce qu'ils veulent juste cette image et ils vont la teinter parce qu'ils peuvent le faire en code ou veut-il que vous la colliez ensemble pour qu' ils aient Vous avez cette unité qu'ils peuvent utiliser ? Découvrez-le ou envoyez-les tous les deux. Nous leur enverrons un sachant qu'ils pourraient revenir et demander un autre genre. Ce que nous allons faire maintenant, c'est deux parties. Si j'exporte deux parties : Fichier, Export, Sélectionné, il va les exporter dans des fichiers séparés. Si je me dis : « Voilà, » et que j'exporte celui-ci, j'en ai déjà un juste parce que je jouais avec ça. Où est-ce que celui-là est allé ? J'ai fini avec cette image séparée du rectangle. Le rectangle ne convient pas à personne et c'est peut-être exactement ce dont vous avez besoin, mais si vous voulez les connecter ils doivent être regroupés. Une boîte, une image, je vais les sélectionner tous les deux et les regrouper. Je vais utiliser la commande G ou le contrôle G, et c'est ici que le nom entre en jeu. Vous pouvez appeler cela un arrière-plan et l'appeler -page d'accueil. Vous pouvez maintenant utiliser des traits d'union ou des traits de soulignement. Il serait très courant dans la conception Web de ne pas utiliser d'espaces réels. Vous pouvez vous en sortir avec les espaces maintenant, donc cela n'a pas vraiment d' importance, mais vous pouvez simplement vous en tenir à ce que tout le monde sait et aime, et utiliser soit des traits d'union, soulignement, ou encore une conversation. pour le développeur. Que préférez-vous ? Je préfère les traits d'union. La plupart des développeurs aiment les traits de soulignement, mais voilà. Si vous devez exporter des éléments qui sont deux parties distinctes, regroupez-les d'abord. Nous exploitons des images uniques dans cette vidéo, et vous pouvez exporter plusieurs images uniques. Nous allons exporter par lots dans un SQL un peu plus robuste pour des travaux plus importants, mais supposons que vous ayez juste besoin de cette image. Qu'est-ce qu'on a d'autre ? Cette dame ici. Ce que vous pouvez faire, c'est que vous pouvez le sélectionner, maintenez la touche « Maj » enfoncée, cliquez sur celle-ci. Il peut être difficile de les sélectionner tous, et je peux cliquer sur Maj. Si je clique sur « Commande O », « Control O », j'ai en fait trois éléments sélectionnés et je peux les exporter, et donc il va exporter trois images distinctes. Vous devez cliquer sur le bouton Maj sur quelques éléments, et vous obtiendrez les trois images distinctes. Le dernier format de fichier dont je veux vous parler est le SVG. Nous avons déjà parlé des SVG. N'oubliez pas les graphiques vectoriels évolutifs. Si vous êtes de la vieille école, imprimez un fichier EPS ou AI. Regardons ça. Je vais double-cliquer dessus ; il a un nom terrible, donc je vais l'appeler « recherche d'icônes ». Je ferai la même chose pour ma petite maison. Vous y allez. Encore une fois, je les nomme de cette façon à l' envers pour les aider à les commander dans votre menu de fichiers, pour faciliter la recherche des gens. J'ai ces deux-là. Je vais les sélectionner tous les deux, maintenir « Maj » parce que je sais que je peux faire File, Export et Selected, et je retire ces deux choses. Maintenant, nous allons utiliser SVG. SVG ; graphique vectoriel évolutif. Cela signifie qu'il peut être mis à l' échelle vers le haut et vers le bas. Tout ce drame que nous avons eu avant en allant, à quel point devrait-il être grand ? Il ne devrait pas être deux fois. De quelle qualité devrait-il être ? Tout ça disparaît avec SVG. Pourquoi ne pouvez-vous pas utiliser les SVG pour dire que ce thé part ici ? Parce que les SVG ne traitent ces points d'ancrage ou de graphiques vectoriels. Ce que je veux dire par là, c'est que si je clique deux fois dessus, cela se compose de ces petites coordonnées. Voici le mien. Il n'est composé de rien. Où sont mes feuilles de thé ? C'est un gros. Sélectionnez-le, Commande 3. Si je double-clique dessus, il est composé de ces coordonnées. Ce sont les maths qui le font, donc ça fait incroyablement bien les deux choses. Cela signifie qu'il est évolutif car si je monte quelque chose, c'est un SVG ou un vecteur. Il évolue à jamais, soit la taille d'une planète. Il s'agit d'une taille de fichier très petite car c'est l' autre moitié. SVG est super petit. Vous devez classer, exporter , sélectionner, et vous allez devenir SVG et laisser les valeurs par défaut ici. Si vous n'êtes pas sûr, cela devient assez dur sur ce que vous aurez probablement besoin de savoir sur les SVG. Je ne vais pas aller dans ce cours, mais je laisse tout cela par défaut. Une chose que vous pourriez faire est ce contour. Nous l'avons déjà fait avant où disons cette chose ici si nous y ajoutons un trait, et vous pouvez décider ce que vous voulez qu'il fasse. Vous pouvez le forcer à le définir. Vous pouvez dire Contour de contour maintenant, et cela n'a pas vraiment d' importance sur ce que vous cochez dans la prochaine option lorsque vous exportez , car il sera déjà décrit. Mais rappelez-vous que si je ne fais pas cela, cela signifie que lorsqu'il monte à l'échelle, il a une taille de quatre si je le mets à l'échelle maintenant. Même s'il est vraiment grand, il reste quatre, et c' est peut-être ce que vous voulez, car il correspond d'autres éléments de la page ou si vous voulez qu'elle soit mise à l'échelle proportionnellement comme dans le tracé et quand il devient plus grand , tout comme le coup autour de l'extérieur. Vous remarquez qu'ils appellent ça un coup sur l'exportation, mais la frontière ici c'est pour vous tester. Je vais aller dans Fichier, je vais aller à Exporter, Exporter la sélection et SVG. Laissez tout et cliquez simplement sur « Exporter ». J'aurais dû d'abord nommer ma couche, mais je peux le faire ici à la volée. ne s'agit plus d'une icône. Ce sera mon graphique et ce sera des feuilles de thé. J'espère que nous aurons quelque chose comme un SVG. Rappelez-vous que nous avons eu ces icônes plus tôt. Vous voyez que c'est minuscule, 900 octets. Ce n'est même pas un kilo-octet, et c'est énorme. Il peut être énorme, vous pouvez le faire évoluer comme vous le souhaitez. va y avoir des boules bizarres comme celle-ci ici. On fait des recadrages fantaisies ici. Je vais double-cliquer dessus. Vous pouvez voir ici que j' ai ce groupe de masques, alors exportons ça. Allons dans Fichier, Export, Sélectionné. Nous savons que nous pourrions le faire en format JPEG contre PNG. Vous attendez là. Voici mes options mal nommées. Vous pouvez voir ici que j'ai celui-là qui est masqué. JPEG, beau et petit. PNG ; vraiment gros, mais il a la transparence dont j'ai besoin. Mais il y a tout ça, et tu me dis : « Je n'ai pas vraiment besoin de ça. » Parfois, il y a des choses où vous devez aller : « Eh bien, je suis à l'intérieur d'un composant », donc je vais le copier, le mettre en arrière-plan, sortir de tout, et juste le coller, double-cliquer dessus, et trouvez mon petit masque et modifiez-le juste pour que lorsque j' exporte cela, ce n'est pas une image aussi grande. Il peut être beaucoup plus petit. Let's File, Exportons. On y va. Il y a le PNG qui est vraiment gros, et il y en a le deuxième que j'ai exporté. Vous remarquerez que la taille du fichier est nettement plus petite et que vous comptez trois kilo-octets. Hé, tout compte. Il s'agit de votre format de fichier tout-en-un/comment exporter des images uniques depuis Adobe XD. Il y en a un long là-dedans. Vous y allez. Je vous verrai dans la vidéo suivante. 81. Les images de l'exportation en cas de lots en utilisant Mark pour l'exportation dans XD: Bonjour à tous. Nous allons examiner ce qu'on appelle l' exportation par lots ou le marquage pour exportation. Ce qu'il nous permet de faire, c'est donner le pouvoir au développeur, la personne qui crée l'application ou le site Web. Ils peuvent utiliser le lien que nous avons créé auparavant, ce lien de développement partageable, et ils peuvent cliquer sur des éléments et ils peuvent dire qu' il s'agira d'un SVG, d'un PNG ou d'un JPEG. Vous pouvez les laisser choisir. C'est super pratique. Permettez-moi de vous montrer comment le faire maintenant dans Adobe XD. La première chose est que vous devez les marquer pour cette exportation par lots. Vous le faites en sélectionnant la chose que vous souhaitez exporter et en disant soit cocher l'exportation, il y a une petite case à cocher, ou je vais l'annuler. Vous pouvez cliquer dessus avec le bouton droit de la souris et indiquer la marque exporter ou dans le panneau de vos calques, cette petite icône située à côté de cette couche l'exportera. Assurez-vous qu'ils sont regroupés comme vous le souhaitez et qu'ils sont nommés comme vous le souhaitez, car n'oubliez pas qu'ils conserveront ce nom et travailleront simplement sur votre chemin. Disons que ce logo doit être exporté ici, donc je vais le faire. Je devrais les nommer très bien. Faisons en sorte que les bons groupes soient bien définis. J'ai plongé dans ce composant parce que je ne veux pas exporter le tout parce que ce ne serait qu'une seule grosse unité. Je vais aller à l'intérieur, prendre ça et dire que vous êtes exporté. Va à l'intérieur, attrape, pas seulement le toit, la pièce. J'ignore les noms pour le moment. Vous les ignorez avec moi. Une fois cela fait, vous pouvez accéder au lot d'exportation de fichiers. C'est ce que fait cette chose. Il va tout exporter sous forme de lot et c'est très bien. Cela dépend de la façon dont votre développeur veut le faire. Parfois, ils veulent juste les images. Le problème, c' est que je dois décider de tous ces éléments, exportés en tant que PNG. Faisons ça. Je vais le coller sur mon bureau, créer un nouveau dossier. Je dois tous les exporter en tant que PNG, tous sous forme de SVG, et tous en JPEG, en trois parties distinctes et supprimer ceux que je ne veux pas dans les formats, donc ce n'est pas amusant. La vraie raison pour laquelle nous faisons cela est que lorsque nous allons maintenant partager et que nous passons à celui-ci, le développement, que nous avons ignoré plus tôt, vous devez décider du processus de développement en cours. Est-ce que ce sera un site Web, qui héberge, site Web mobile ou s'il va pour iPhone ou va-t-il sur Google Android ? Il utilisera les bonnes conventions de dénomination pour vous. Eh bien, ça va monter pour le web et ça devrait être cliquable. Pourquoi n'est-ce pas cliquable, Dan ? Parce que je me suis trompé de flux. Les flux multiples sont pratiques mais problématiques. Ici, je peux maintenant aller au développement et maintenant je peux aller sur le web. Regardez. Maintenant, il y a quatre atouts que j'ai en fait étiquetés. Maintenant, je peux cliquer dessus. C'est vraiment pratique maintenant parce qu'une fois qu'ils sont cochés, même si j'apporte des modifications à ces feuilles, cela fera toujours partie de cela pour que je puisse simplement les réexporter. Faisons ça. Cliquez sur « Créer un lien ». Ce que ces ressources téléchargeables font, c'est quand le développeur y va, alors laissez-moi l'ouvrir, maintenant nous avons ces [inaudibles] ici, comme la vue de conception. Ce que je peux faire, c'est que vous avez cette option ici. Ce que ça va me montrer, c'est que nous avons affaire à des images, alors ignorez tout ce qui n'est pas ce dossier de ressources. Nous allons regarder ces autres dans une minute. Mais vous pouvez voir toutes ces belles images. Il y a mon thé graphique1 que j'ai nommé, il y a mon logo, et il y a mes icônes sans nom. Ce qu' ils peuvent faire, c'est qu'ils peuvent le sélectionner et en bas ils peuvent décider SVG, PDF, JPEG. Ils peuvent paniquer parce qu'ils ne savent pas quel format de fichier ils devraient utiliser. Il y a un travail [inaudible] qui dépendra du développeur. Cela peut nécessiter une certaine éducation de votre part. Vous devriez être d'accord avec cela en fonction de leurs antécédents, de leur nouveauté, mais cela leur donne la flexibilité, mais les oblige à venir ici et à cliquer dessus et à les télécharger. Ils s'attendent peut-être un gros vieux dossier d'images, alors discutez-leur. Montrez-leur ceci et dites bonjour, vous pouvez cliquer sur les choses et regarder, je peux le télécharger, ou je peux cliquer sur rien et parcourir les dossiers ici. Celle-ci, celui-là, ici. Il leur donne des informations à ce sujet. Mais est-ce que je les ai même marqués pour l'exportation ? Je ne l'ai pas fait. Lequel ai-je marqué pour l'exportation ? Je viens d'en faire un sur cette page. Non, je viens de faire ces icônes. Assurez-vous de marquer tous ces éléments pour l'exportation afin qu'ils puissent les parcourir et simplement cliquer dessus et les télécharger ici. Si vous ne le faites pas, ils ne peuvent pas. Factoid intéressant pour finir, c'est que dans XD, si vous faites ce premier parce qu'il est dans une grille de répétition, désolé, de retour en mode Création, double-cliquez dessus. Si je marque celui-ci pour l'exportation, ils sont tous marqués pour l'exportation. Si vous ne voulez pas que cela se produise, vous devrez dissocier la grille de répétition, puis les marquer toutes individuellement comme vous le souhaitez. Mais c'est une façon assez cool travailler avec un développeur comme ceux que vous souhaitez exporter. Assurez-vous de le tester d'abord avant de l'envoyer. Demandez-moi comment je le sais parce que j'ai envoyé des trucs au développeur tout le temps qu'il est, vous ne les avez pas marqués pour l'exportation. Vous allez vérifier ces choses. Oui, c'est ça. C'est l' exportation par lots ou marquée pour l'exportation et la meilleure façon de l'utiliser via le partage et via ce développement. Assurez-vous de choisir le bon flux. C'est ça. Passons à la vidéo suivante. 82. Comment exporter du code dans XD pour les ingénieurs à l'aide de Design Specs ?: Bonjour à tous. Je vais vous montrer comment préparer le code d' Adobe XD pour que votre développeur puisse cliquer sur les choses, déterminer l'espacement, le remplissage, la taille de celui-ci, les éléments CSS, quoi les couleurs sont utilisées, quelles polices, texte réel qui se trouve à l'intérieur des choses, c'est en fait très facile à faire, alors faisons-le. abord, faire fonctionner cela n'est pas beaucoup, vous pouvez le faire très rapidement, disons ainsi. Je vais aller à mon partage, nous devons juste nous assurer de cliquer sur le bon flux et d' aller au développement, puis de générer le lien ou dans notre cas, de mettre à jour le lien. Vous envoyez ce lien à un développeur et c'est ce qu'il obtient. Le plus important, l' éducation que vous devrez peut-être leur donner, c'est que la seule chose réelle est qu'ils doivent savoir pour cliquer sur cette petite icône d'affichage des spécifications qui leur donnera tout ce dont ils ont besoin, il s'agit de commentaires par défaut, mais pour un développeur, il veut probablement tout cela. À partir de là, ils devraient pouvoir se frayer chemin et obtenir tout ce dont ils ont besoin. Parce qu'il met automatiquement des choses comme ça avec ma taille de conception, ma fenêtre d'affichage, il y a les images que nous avons taguées dans la dernière vidéo, toutes les couleurs dont elles ont besoin. Malheureusement, ils ne vont pas copier, coller, coder et simplement le coller dans leur éditeur de code et cela fonctionnera, ils vont le reconstruire en utilisant des morceaux de ce que vous avez fait. Comme les couleurs, ils vont avoir du CSS qui définissent les différentes couleurs, et ce qu'ils peuvent faire maintenant, c'est facilement entrer ici et dire qu'ils ont besoin de cette couleur, ils cliquent simplement dessus et vous pouvez voir Là-bas, il a dit qu'il est copié, et ils vont dans l'éditeur de code et vont simplement coller, et ils vont juste tirer de petits morceaux comme ça, ils peuvent regarder certains de vos styles de personnages. Désormais, lorsque vous nommez vos styles de personnages, nous le supprimons par défaut dans Adobe XD. Rappelez-vous que nous avons fait cette chose, était-ce la conception, nous l'avons fait. Nous avons créé ces derniers, où il y avait des H0, H1, H2, puis nous sommes allés ajouter aux styles de personnages, peut-être que nous aimons ça et nous cliquons simplement sur ce bouton. C'est parti, et par défaut, mettez le nom de la police ou la taille de la police, ce qui est pratique et lisible, mais pour le développeur, ils sont probablement plus habitués à obtenir quelque chose comme, pouvez-vous voir leur H0, H1, 2, 3, 4. Cela est souvent appelé uniquement la balise P, donc cela dépend de votre niveau de capacité de codage et de l'utilité que vous souhaitez leur être utile Vous pouvez donc les renommer avant de sortir, même en nommant les images que vous allez exporter. Ici, il a un bon nom, je pense, sous mon panneau Calques, ça s'appelle thé graphique, alors allez faire votre nom avec vos styles de personnages et cela peut vous aider. D'autres choses qui leur sont utiles. Ils pourraient aller, super , où est le H1. En fait, cela ne fait que me montrer les choses sur cette page, pas tous mes styles de personnages. Vous remarquerez que si je parcourt les pages, les couleurs vont changer et les styles de caractères utilisés vont être modifiés. Cette copie corporelle, et ce qu'ils vont faire, c'est bien, c'est la copie du corps, et ils pourront reconstruire en fonction de votre style ici. Ce qu'ils peuvent aussi faire, c'est : pouvez-vous voir les points forts ici ? Ils peuvent s'approfondir un peu, et ils peuvent dire que vous regardez cela. Ils peuvent sélectionner dessus et cela leur donne le CSS. Encore une fois, il est peu probable qu'ils le copient textuellement hors d' ici parce que c'est probablement trop détaillé pour la plupart des gens, mais cela leur donne une mais cela leur donne une bonne syntaxe qu'ils peuvent utiliser, surtout pour des choses comme la police. Ils peuvent également décider, si je clique hors d'ici, ils peuvent décider s' ils traitent des pixels ou s'ils vont faire avec des points ou des dps, en fonction de leur fonctionnement. D'autres choses vraiment utiles sont liées à la taille et à la disposition. Encore une fois, disons que c'est ma police, ils ont travaillé, ils savent quelle est la police réelle. Celui-ci ici, ils peuvent cliquer dessus, il le copie, ils peuvent le coller dans la version du code, mais ils peuvent aussi avec elle sélectionnée pour voir jusqu'où il est. Pouvez-vous le voir planer autour ? Il me dit qu'il est 22 pixels plus bas sur cette boîte, donc quand ils la construisent et font le rembourrage, ils diront que le rembourrage est de 22. Si je clique d' abord sur cette case et que j'y survole, c'est une marge de six de chaque côté. Regardez ce truc super utile, oh et il a une ombre portée, regardez ça, et ça leur dit exactement quel genre d'ombre portée, quel point elle est floue, toutes les choses super utiles, au lieu de ils essayent juste de le deviner. C'est là, c'est la syntaxe réelle, je prendrais tout ça et je l'inscris dans mon fichier CSS parce que tout est fait et c'est dans le bon format, super pratique. D'autres choses utiles pour lesquelles nous l'utilisons est de copier votre texte. Vous avez probablement passé beaucoup de temps avec le client et avez obtenu la bonne langue, et ils vont beaucoup sélectionner et décrire cela, copier le texte et le coller dans leur fichier. De plus, ils peuvent trouver l'interaction, alors passons à une autre page. Vous verrez ici si je ferme les styles de personnages, ils seront capables, car disons si vous en trouvez un qui est un peu plus excitant. Celui-là, souvenez-vous, est une interaction, si je clique sur « Off » sous interactions, ils pourront voir que j'ai ajouté, il y a un bouton ici et ça va à quelque chose, ça leur dit qui et s'ils cliquent dessus, [RIRES] il les amène à la page suivante, ce n'est pas ce que je veux faire. Revenons à ma petite, je veux voir l'une de ces deux choses, c'est que vous pouvez voir tous ces différents déclencheurs ici, et si vous par-dessus eux, pouvez-vous voir cela les met en évidence ? Ce qu'il fait, c'est que si vous cliquez dessus, voyez-vous ? Cela leur donne les deux états afin qu'ils puissent basculer entre les différents états et s'en aller. En fait, quelle est la couleur de fond ? Revenez à l'état par défaut, qui correspond à la couleur d'arrière-plan. Bien que vous ayez passé beaucoup de temps à créer ces différents états, mais qu'ils ne peuvent pas les voir si vous leur donnez simplement un PDF ou un JPEG, ils ne peuvent pas voir ce que cela a signifié faire, le la même chose avec celle-ci. Ils ne verront pas l'interaction comme animée ici, mais lorsqu'ils saisissent tout le code, ils pourront basculer entre l'état par défaut et l'état actif. Ils peuvent interagir avec elle, ils ont juste besoin de sortir de ce mode de développement et de revenir en mode commentaire, puis ils peuvent aller et monter en haut. C'est cette chose qui marche, allez dedans, cliquez dessus et décidez des couleurs, regardez rond, casquette, trait central, toutes ces bonnes choses, donc il y avait un peu d' éducation avec laquelle travailler le développeur qui a pu ou non travailler avec quelqu'un aussi bon que vous dans Adobe XD. Vous êtes bon, maintenant nous sommes en train suivre ce cours et je vous promets que tant de designers sont autodidactes et qu'ils connaissent assez XD, ils feront du beau travail, mais ils ne connaîtront pas certains des super fonctionnalités comme celles-ci, mais vous le faites, alors discutez avec votre développeur, voyez ce qu'il sait et passez peut-être un peu de temps à travailler sur ces différentes options. C'est ça, c'est comment envoyer tous les bits de codey à votre développeur, ou si vous construisez vous-même comment extraire toutes les données prêtes à être codées. C'est tout, je vous verrai dans la prochaine vidéo. 83. Qu'est un guide de style dans Adobe XD: Tout le monde, dans cette vidéo, nous allons regarder ce qu' est notre guide de style de design plutôt qu'une feuille d'autocollants et un système de conception. Nous allons créer quelque chose de simple pour le travail que nous avons accompli jusqu'ici et je vais vous expliquer les différents niveaux que vous pouvez atteindre lorsque vous effectuez certains de ces guides de style. Nous commencerons par un guide de style. Un guide de style n'est souvent qu' un simple guide de marque si vous venez de l' image de marque ou du design. Il s'agit simplement, dans mon cas, d'un guichet unique que je peux donner à l'entreprise pour montrer certaines des décisions que j'ai prises pour le rendre clair, disons que vous êtes un entrepreneur travaillant pour un plus grand entreprise. Leurs concepteurs vont également avoir besoin de certaines règles pour fonctionner. Selon ce que vous avez fait, vous pouvez décider de ce qui se passe ici. J'en ai fait un très basique. Il y a des polices, les poids de police que j'ai utilisés. Je serais tenté maintenant d'y aller et maintenant que je vois ça, aller mettre mes H1, H2, H3. Où sont-ils ? Eh bien, ces derniers. Peut-être dans une version plus jolie juste pour voir ce que j'ai décidé pour les différentes hiérarchies des titres. Les couleurs, les codes couleur utilisés. En ce qui concerne les couleurs, vous verrez des choses comme l'accent secondaire primaire , peut-être le primaire secondaire, peut-être que la couleur 1, couleur 20 selon l' entreprise et la marque, combien couleurs que vous avez utilisées. Mais vous verrez un peu cet accent primaire et secondaire. Je les ai étiquetés un deux trois de ce côté. Ici, vous verrez que j'ai étiqueté 100, 300, 500, 700. C'est vraiment courant dans la conception aussi, cela vient un peu du codage. Mais cela signifie simplement que j'en ai cinq, le plus élevé est 1 000, ce qui est mon noir et gris 100 est ma couleur la plus basse que je puisse utiliser. J'ai sauté les 200 et 400. Pourquoi ? Parce que j'ai choisi de ne pas en utiliser une grande quantité, mais cela me donne une certaine souplesse. Si je décide que j'ai besoin de quelque chose ici. J'ai besoin de quelque chose qui n'est pas tout à fait ça, mais pas tout à fait ça, j'ai 800 que je pourrais utiliser. Vous le verrez aux alentours. Il n'y a rien de spécial à part une convention de dénomination courante avec, vous l'avez peut-être vu dans des polices, en particulier dans les blancs. Vous avez peut-être Futura 100, qui est la version légère, et la 900, qui est la version noire. Vous les verrez tous les deux. Je ne les mélangerais pas. Je viens de les mettre ici [RIRES] pour vous aider. Celui-ci peut être 300, 500, 700, qui me donne de la place pour quelque chose de plus léger et plus sombre potentiellement, mais 1,2,3 va bien aussi. Ici, vous pouvez décider comme si nous étions en charge du logo et quand je dis logo, ils demandent que nous venions de le taper. Mais vous décidez peut-être des choses comme la largeur minimale, l'espace libre autour. quel point ces autres boutons peuvent-ils se rapprocher des décisions que vous avez prises ? quelles couleurs il va être utilisé, à quoi ressemble-t-il contre le blanc contre le noir. Lorsque vous avez terminé la version légère. À quoi ressemble-t-il contre l'obscurité ? Doit-il être plus grand ? Ce genre de décisions de conception. J'ai également inclus le mémoire et j'ai tapé mon flux d'utilisateurs pour le rendre chic. Mettez-le dans des boîtes. [RIRES] Je l'ai rendu orange. Mais jetons un coup d'œil à d'autres niveaux. Il n'y a pas de règle sur ce que vous devez faire. Cela dépendra du travail, du budget dont ils disposent, quantité de travail que vous y consacrez et de votre rôle. Si votre rôle n'était que ce flux de tâches ici, vous n'avez peut-être pas réalisé de conception, donc aucun guide de style n'est requis. Vous n'avez peut-être qu'un document expliquant vos réflexions sur le flux. Comment nous allons dans ces endroits et si vous avez pris d'autres décisions d'interface utilisateur concernant les couleurs similaires ou quand utiliser les gras dans cette configuration particulière. Votre guide de style peut être très descriptif des modèles que vous avez créés ou de l'ordre dans lequel ils sont livrés à l'utilisateur. Je suis en train de babiller. Jetons un coup d'œil à certains des autres. Je viens d'avoir des ennuis et j'ai tapé un guide de style. Vous pouvez voir qu'il n'y en a que quelques-uns, vous voyez ça ? C'est magnifique, loin de ce que j'ai. Ce fond, les graphiques, il y a un délavé plus loin dessus. C'est vraiment beau, c'est un produit design en soi. S'il s'agit d'un projet important et que vous effectuez une grande partie du travail de conception, il peut être très important de livrer quelque chose de ce genre au client. Cela montre un engagement envers le design que vous avez fait plutôt que cela, ce qui est tout à fait comme vous l'avez fait ici. Voici un petit peu sur une page. Vous pouvez voir, jetons un coup d'œil à d'autres. Certains d'entre eux sont ce que vous appelez les directives de marque, plus pour l'impression. Celui-là, ici. On se rapproche, regardez-le. Voyez-vous, c'est le même , mais ils ont tourné la page. Il a l'air cool. Ici , c'est sur un ordinateur portable. Je vais vous demander d'en faire un car il n'y a rien de technique à apprendre à ce sujet. Il est plus important d'obtenir toutes vos informations sur une page. Mais pour ce qui est de ce cours, il s'agit de créer quelque chose pour votre portefeuille. Faites-le, mais aussi moquez-le sur un ordinateur portable. Fais quelque chose de bien avec ça. Vous pouvez voir ici, celui-ci n'est pas une énorme quantité de contenu, mais regardez comme il est joli. J'adore ça. Vous pouvez décider du niveau auquel vous allez aller. Mais jetez un petit coup d'œil et tout comme il n'y a pas de règle absolue sur le montant de vos guides de style. Où allez-vous du guide de style ? Désolé, encore une fois de regarder ça ensemble. Disons, c'est intéressant de voir comment les couleurs deviennent comme si je l'ai fait par dessus, aveuglant les choses parce que c'est ce que je fais toujours, mais elles ont présenté leurs couleurs différemment. Ils sont partis pour la pleine échelle de gris en bas ici, ils les ont. Sachez que vous ne pouvez pas le lire, mais il est 100, 200, 300 en utilisant toutes les couleurs grises. Des fous. Par ici, vous pouvez voir qu'ils se sont dressés là en frappant 1,2,3,4,5. Une autre chose que vous pouvez faire est de dire que cette police, vous savez où elle se trouve, mais vous savez que le client ne va pas faire et qu'il va vous envoyer un e-mail à ce moment-là. Ce que vous pouvez faire, c'est que vous pouvez relier ces éléments. C'est un peu de choses techniques que nous n'avons pas abordées, c'est allons aller ici, nous allons passer au prototype. C'est un prototype bizarre. Nous allons ajouter une interaction lorsqu'elle sera activée. Pas pour la transition, pas pour commander des animations. Nous allons y aller, pas superposer, nous l'avons fait aussi. Nous allons accéder au lien hypertexte, puis vous pourrez le taper ici et vous pouvez accéder à l'endroit où vous avez cette police. Nous avons obtenu le nôtre grâce à Remember, Google Fonts et Adobe Fonts, afin que vous puissiez créer un lien vers n'importe où pour que les gens puissent aller et les lier pour qu'ils cliquent et téléchargent. Vous devrez peut-être y ajouter un peu de notation pour qu'ils puissent le télécharger, mais c'est une chose que vous pouvez faire pour connecter certains de ces éléments. Il peut s'agir d'images que vous avez utilisées ou référentiel pour toutes les tailles de logo que vous avez créées. Vous pouvez y ajouter un lien. Il y a différents niveaux. Guide de style, il n'y a pas de règles spécifiques, mais il est souvent informatif, alors qu'une feuille d'autocollants est un autre terme vous devriez probablement, eh bien, je vous présente maintenant et c'est moins pièce de design pour montrer à tout le monde ce qui se passe et il suffit de tout jeter sur une page. La feuille d'autocollants, c'est un bon exemple de feuille d'autocollants. C'est juste tout ce qui est prévu. n'y a aucune explication. C'est juste un gros vieux, souvent une feuille d'autocollants peut simplement être un document XD. Vous pouvez simplement tout lancer car pour le moment beaucoup de nos boutons sont cachés dans un composant que quelqu'un qui ne connaît pas XD ou qui utilise peut-être un autre système de conception d'interface utilisateur. Je peux saisir cela et je peux mettre en place tous les différents boutons, toutes les différentes couleurs, les étiqueter et les étiqueter. C'est le principal, c'est le secondaire, c'est mon bouton Annuler. Il suffit de faire glisser toutes ces pièces et de commencer à les étiqueter. Même dans ce cas, vous n' avez pas besoin de les étiqueter. Il s'agit plutôt d'exposer toutes les différentes options que quelqu'un peut voir. Ce serait une feuille d'autocollants. Un peu comme un guide de style, mais plutôt comme les jeter tous sur la page. Ils brouillent un peu les lignes. Certains d'entre eux que je regarde ici sont un peu collants. C'est définitivement une bonne feuille d' autocollants à mon avis. Celui-ci commence à entrer dans un peu des deux, un peu un guide de style, très beau, de grande marque, mais tout y est également aménagé . C'est donc un peu hybride. Maintenant, où allez-vous à partir d'ici ? Après un guide de style et une feuille d'autocollants, vous finissez par ce qu' on appelle un système de conception. Ce que je vous ai montré maintenant n' est pas un système de conception. Un système de conception est énorme. C'est une façon dont quelqu'un, beaucoup de gens peuvent tous. Je vais m' en tenir à celui-là. Il y a de l' animation. Ce sont tous les systèmes de conception que j'ai mis en place et que j'ai retirés. Fondamentalement, ce qu'ils sont, c'est comme des directives de marque géniales qui expliquent non seulement quoi devrait ressembler le bouton, mais aussi pourquoi nous faisons les choses. Il s'agit de communiquer des choses comme la vision et la mission. Il contiendra des informations sur l'accessibilité, il y aura des choses que vous faisiez auparavant, et c'est ce que nous ne faisons plus. Il s'agit d'un projet énorme. Je n'ai jamais réalisé de système de conception complète auparavant. J'ai travaillé au sein d'eux et la raison pour laquelle ils sont bons, c'est si je commençais travailler pour Shopify pour à travailler pour Shopify pour une tâche quand ils ont dit  : « Hé, pouvez-vous faire ça ? » Je pourrais m'y frayer un chemin, comprendre ce que nous faisons, quelles couleurs sont utilisées et trouver tous les éléments dont j'ai besoin pour le faire. y aura rien à prendre ou à essayer de prendre une décision parce qu'il y aura une compréhension de cela ici. Il s'agit de grands projets à construire par Shopify. Shopify fait ça, ils me donnent un nom comme Polaris. Cela signifie simplement qu'il y a des dizaines de milliers d'employés dans tous les pays différents qui peuvent tous partager le même système de conception. [RIRES] En fait, j'ai un bouton à faire et je ne sais pas quel genre. Je peux vous dire que voici quelques exemples de leurs boutons. Je peux les voir travailler. Jetons un coup d'œil. Quels sont les boutons minces ? Regardez, il y a une variante mince. Je peux le trouver. Ils m'ont même montré que c'est ce que la version Web contre Android contre iOS. Ce sont des choses énormes. Voyons ce qu'ils font pour les formulaires. Si je dois concevoir un formulaire, je ne vais pas aller dans XD et faire glisser au hasard où peut-être des coins arrondis, peut-être pas des coins arrondis. Il y aura des règles très claires et spécifiques concernant les choses réelles, mais il y avait aussi beaucoup à voir avec la compréhension de qui est leur client, quelles valeurs, pourquoi nous sommes en concevant ces choses. La conception matérielle est ce que Google utilise pour le système Android. C'est un peu difficile de naviguer, mais je trouve cela vraiment utile lors de la conception d'applications. Vous pouvez avoir plein de choses ici. Ils n'ont pas de documents XD que vous pouvez télécharger, mais jetons un coup d'œil à leurs icônes. Je me pose des questions maintenant, mais ils expliqueront comment ils ont eu beaucoup de choix de conception. Regardez-moi ça. Vous pouvez même voir comment ils sont arrivés à cela. Regardez-moi ça. Regardez la navigation. Vous avez compris l'idée. Il s'agit de grands, de grands projets. Nous faisons un guide de style. Sachez que vous pouvez créer un guide de style, une feuille d'autocollants, quelque part entre les deux et que vous travaillez peut-être à partir d'un système de conception si une entreprise en possède un, ou que vous en créez peut-être un, ce que vous pourriez faire un jour, très bientôt. L'autre que j'ai retiré était Salesforce. Je ne sais pas pourquoi. Si vous souhaitez créer un graphique dans Salesforce, sont les règles, ce sont des choses à ne pas faire. là que tu y vas. J'espère que c'était intéressant. J'ai introduit quelques petits termes, mais c'est tout. Sur la vidéo suivante. 84. Projet de cours 17 - Conception finale: Holy Moly, c'est le dernier projet de classe. C'est ce qu'on appelle le design final, raisonnablement grand. Il s'agit principalement de finaliser votre conception mobile, créer une version de bureau et d'un guide de style. Faites des tests avec votre conception mobile et déterminez simplement ce que vous avez laissé de côté. Il s'agit d'un cours. Nous avons juste ignoré des morceaux et laissé quelques petits morceaux. Passez à ED, jouez-en sur votre téléphone et voyez s'il manque quelque chose. Les choses qui ne fonctionnent pas, nous n'avons pas de barre de recherche. Peut-être que vous concevez quelque chose qui apparaît, il y a une petite option de recherche. Débarrassez-vous de la recherche et ajoutez-y autre chose. Peut-être définir le bouton Compte, passer en revue et ajouter tout ce qui manque, puis voir si vous pouvez le traduire en version de bureau. Ils devraient utiliser beaucoup des mêmes éléments de conception, mais il y avait un format différent. C'est un projet amusant et délicat. Je trouve plus facile de commencer avec un ordinateur de bureau et de passer ensuite au mobile. Mais dans notre projet ici, nous savions par notre client et notre persona qu'il sera principalement utilisé sur mobile. Nous avons commencé à concevoir avec le mobile. Si vous savez que c'est le contraire et que la plupart des activités de l'entreprise se font via le site Web, et que vous le concevez d'abord et que vous le traduisez ici. Je veux que vous fassiez trois pages, la page d'accueil, la page du produit et la page de paiement. Ils peuvent être relativement simples. Je ne veux pas que vous recréiez l'ensemble du design, utilisiez les éléments de la version mobile et que vous les prépariez pour le bureau. Vous devrez peut-être revenir en arrière et regarder la vidéo, rappelez-vous quand nous avons fait des choses comme la mise en page et recommencer pour que vous ayez une certaine cohérence ici. Décidez de la largeur que vous voulez le faire et vous ne pouvez pas vous en sortir avec un site Web plus étroit, si vous avez du mal à étirer ce qui est un design assez simple ? Réduisez le site Web au cas où il n'essayerait pas de le salir et qu'il semble juste un peu seul et perdu et ensuite, je veux que vous fassiez un guide de style. Cela peut être super simple, plus simple que le mien, si c'est possible, et les éteindre. Où est mon seul, Commande 0, Contrôle 0, quelque chose comme ça. Il peut aussi s'agir d'une feuille d'autocollants. Sortez certains boutons. Je suis heureux qu'il s' agisse d'une feuille d'autocollants d'un guide de style ou de quelque chose entre les deux. Parce que rappelez-vous maintenant que c'est quelque chose qui peut être vraiment génial pour votre portefeuille. Vous avez votre propre entreprise, elle a ses propres couleurs et thèmes, a votre propre utilisateur unique. Il peut s'agir de la première pièce de votre projet UX, si vous êtes tout neuf. Donc, une fois que vous l'avez fait, j'aime voir des captures d'écran de votre mobile fini, votre bureau fini et de votre guide de style. Faites-les dans des instantanés séparés pour que nous puissions les voir bien, les télécharger dans les devoirs, mais aussi les partager sur les réseaux sociaux. J'adore voir où tu as fini. Demandez des commentaires si vous le souhaitez, de la part du groupe, en particulier ces groupes ici sont plus utiles pour ces commentaires. C'est un peu plus à sens unique de poster, d'aimer, de partager des choses de type. C'est votre dernier projet de cours pour le cours. Installez-vous, faites cela, et passons à la section suivante, la dernière section. 85. Les choses suivantes après Adobe XD Essentials: Ouah, où, où en est la fin ? Je veux dire que tu étais là, tu as réussi. J'espère que vous êtes assis là assez fier de vous, assez suffisant. Tout le monde regarde Netflix et vous venez terminer le long cours oméga, un contenu passionnant. Donc oui, tu devrais être vraiment fier de toi. Ne laissez pas les gens commencer des cours et encore moins les terminer si bien joué que vous avez quoi faire ensuite. Et ce qu'il faut faire ensuite serait potentiellement de me rejoindre dans un autre cours. Qu'est-ce que cela vous serait utile après XD Essentials, que faites-vous ? Maintenant. La prochaine étape pourrait consister à mieux comprendre le code. Même si vous souhaitez peut-être créer vos propres sites ou simplement comprendre le rôle du développeur. Ça va vraiment t'aider, d'accord ? Responsive Web Essentials pourrait être une bonne prochaine étape pour cela. Et nous partons de ce cours après, ainsi qu'après. Xd Essentials, c'est si vous voulez réellement commencer à le mettre en pratique sans utiliser de code. Donc, pas de codage, faites quelque chose comme Webflow ou Elementor, qui ressemble un peu à un créateur de site Web WordPress. Je vais bientôt faire des cours sur ces deux escargots. Ce que je fais après cette mise en page en ce moment, je ne sais pas, c'est peut-être une nana, mais sinon, une manière responsable de l'essentiel. Et Webflow ou Elemental, ce qui est un peu comme un cours sans code. Et je ferai aussi dans XD advanced éventuellement. D'accord, je vais passer à ces flux de vent dans Elementor ensuite, et je vais revenir à XD pour faire le flux avancé. Gardez donc un œil sur les autres cours que vous pourriez suivre. Et j'ai un cours Photoshop, Photoshop, Illustrator Essentials et Advanced. Je ne sais pas où j'ai dit qu'il y longtemps parce que je crois avoir dit les essentiels de Photoshop Illustrator. Ce n'est pas ce que je veux dire. Il y a Photoshop, Illustrator, InDesign, After Effects, Premier Pro. Et j'ai beaucoup de cours et il y a souvent éléments essentiels et avancés sur chacun d'entre eux. Il y a donc d'autres cours qui pourraient être prêts à être visionnés. Plaisir. Je tiens à remercier mes rédacteurs, Just Animals et Taylor Coleman. Ils font beaucoup de travail, quelque sorte après l'IM les enregistrent. Merci pour ces gars-là. Et un grand merci à Stephen Butler et à ses assistants d'enseignement. Vous êtes peut-être tombé sur lui ou l'un d'eux et son équipe tout au long de ce cours peut vous aider avec des réponses et des questions. Et merci beaucoup pour ces gars-là, pour leur aide. De plus, si vous avez aimé ce cours, assurez-vous de laisser un commentaire. Et aussi si vous pouvez trouver une façon de le référer à d'autres personnes, leur dire à quel point c'était génial. Quoi que tu saches, je t'en serais reconnaissante aussi. Plus il y a de personnes qui voient mes cours, plus je peux suivre de cours. Assurez-vous également de me suivre sur les réseaux sociaux. Cela a suivi tout le cours, mais les voilà de nouveau, assurez-vous de vous joindre à moi et à tous les autres. Et enfin, parlons encore de notre concepteur UX d'interface utilisateur, parce que cela peut être assez effrayant de suspendre ce bardeau, suspendre cette déconnexion pour dire, oui, je suis un concepteur UX, je suis disponible pour le travail. n'y a pas de documents officiels. Je crains toujours que quelqu' un frappe à ma porte et dise : «  Hé, tu te dis designer UX ». Montre-moi, montre-moi le certificat. Tu as tous les diplômes, tu as tout le sceau officiel d'approbation. Il n'y en a aucune. C'est plus un changement d'état d'esprit que de dire que oui, je me qualifie maintenant de concepteur UX et que cela peut être difficile. Mais sachez simplement qu' il y a des niveaux. Vous pouvez être un concepteur UX junior. Vous pouvez être un concepteur UX terrible, mauvais, qui vient de commencer, tout ce qui vous aide dans votre tête , à l'embrasser. Il s'agit de vraiment en profiter, vouloir en savoir plus. Et c'est le début de notre voyage. Vous vous considérez peut-être déjà comme concepteur UX, c'est cool. Mais beaucoup d'entre nous souffrent du syndrome de l'imposteur. Quand est-ce que ça va ? Beaucoup de personnes attendent d'avoir leur premier concert pour ensuite se qualifier de concepteur UX. Mais je vous donne la permission de commencer à vous qualifier de concepteur UX à partir de maintenant parce que c'est une attitude vous ne sachiez pas encore tout, mais ce n'est pas grave. Vous êtes parti pour votre voyage en tant que concepteur UX. Que ce soit mes amis. J'espère que vous avez apprécié le cours. J'adore vraiment et le faire. OK, je vais faire une longue pause maintenant. Vous devriez réellement travailler sur vos différents projets si vous ne les avez pas encore soumis. Oui, c'est la fin du cours. Comment avez-vous fini de faire signe de la main ? Et puis on passe au noir. Alors ce que nous allons faire dans celui-ci de toute façon, parce que je ne vois rien d'autre à faire. C'est la fin du cours. Non, pour y retourner, j'espère te voir suivre un autre cours. D'accord, fondu au noir, banque de données. Sont-ils partis ?