Adobe Xd Masterclass - Conception UI / UX à partir de zéro

1. Introduction du cours: Hey designer et mon nom est Alex et bienvenue dans cette classe de partage de compétences. Je suis le fondateur de donateurs web, produits de design très créatifs pour des créatifs comme vous, je suis aussi professeur et jusqu'à présent plus de 30 mille étudiants ont terminé mes cours. Dans cette classe de maître de plus de 20 heures, vous allez apprendre les bases d'Adobe XD et ce qu'il peut faire, comment créer un excellent design, bref. Créer une architecture de site Web. Dessinez vos filaires sur du papier, puis importez-les et créez dans Adobe XD. Créez des designs complexes en ajoutant des couleurs, des images et des animations. Partagez ces conceptions avec les clients pour obtenir des commentaires. Créez un design réactif avec plusieurs tailles. Présentez vos créations dans un portfolio. Et enfin, comment exporter vos ressources pour les développeurs en utilisant les normes de l'industrie. Cette classe couvre tout ce que vous devez savoir pour vous lancer dans la conception UI UX, ou pour améliorer vos compétences, quel que soit le niveau que vous êtes actuellement. Vous n'avez pas besoin d'une connaissance préalable de l'interface utilisateur, UX ou d'Adobe XD, nous allons tout couvrir dans ce cours. Votre projet de classe consiste à créer un site Web conçu en utilisant les conseils et les techniques que vous apprenez de cette classe. Donc, si vous voulez utiliser vos compétences et votre productivité, économiser beaucoup de temps et d'argent sur V itérations et changements et créer des designs favorisent que je vais vous voir en classe. 2. Aperçu du cours: Hey designer Alice ici et bienvenue au cours. J' espère vraiment que vous y trouverez de la valeur et j'espère vraiment que vous apprendrez quelque chose de nouveau ou que vous allez améliorer vos connaissances d'Adobe XD ou du processus de conception et de création de sites web. Donc, dans cette première vidéo de ce cours, j'aimerais vraiment vous présenter le cours, ce que nous allons faire et comment nous allons commencer. Et la première chose que je vais vous montrer est la vue d'ensemble de notre projet. Et je vais vous expliquer très rapidement ce que nous allons faire dans ce cours. Pourquoi est-ce si long et pourquoi j'ai pris le temps de le créer ? Donc, tout d'abord, nous allons explorer notre dossier de design. Je vais vous montrer le dossier de conception après l'introduction d'Adobe XD partie du discours. Donc, si vous êtes familier avec dx, dy, si nous savons comment l'utiliser, vous pouvez simplement sauter ces leçons. Mais si ce n'est pas le cas, je vous encourage vraiment à parcourir ces leçons et à vous familiariser avec Adobe XD en tant qu'outil, ce qu'il peut faire et comment il peut vous aider à améliorer votre interface utilisateur et jeu de conception UX. Ensuite, ce que nous allons faire est de lire le mémoire de conception que vous considérez du client. Je vais également vous montrer un modèle que vous pouvez utiliser pour vos propres projets. Je vais vous le dire et vous expliquer comment avons-nous obtenu toutes ces informations ? Et puis nous allons vous guider à travers comment pouvez-vous explorer une autre personne ? Comment pouvez-vous explorer différents cas d'utilisation et différents publics et dettes vont utiliser votre produit, dans ce cas, la conception de site Web. Et puis nous allons commencer avec des fils de papier et nous allons créer des choses comme celles-ci. Donc, nous allons commencer avec juste un morceau de papier et nous allons dessiner dessus à l'aide d'un simple stylo ou d'un crayon. Nous pouvons également utiliser ces marqueurs colorés comme vous pouvez le voir ici. Et puis je vais vous montrer comment vous pouvez apporter toutes les portes payantes fournir des cadres dans Adobe XD. Maintenant, vous vous demandez peut-être, pourquoi devrais-je laisser tomber des filaires papier et ensuite faire tout de même dans Adobe XD, c'est assez simple. Peut-être avez-vous besoin de partager ce fichier avec d'autres concepteurs. Peut-être que vous avez besoin de partager ce fichier avec vos clients et c'est bien avoir ces morceaux de papier comme cette ligne à côté de vous. Mais par exemple, si vous avez besoin de partager cela avec certains coéquipiers avec les clients, dans tous les cas, peut-être même avec les développeurs juste pour qu'ils puissent vérifier dans ce stade précoce du projet, alors vous aurez besoin quelque chose pour les partager largeur afin que vous puissiez soit prendre, euh, prendre une photo avec votre téléphone et ensuite amener ces images à l'intérieur de votre ordinateur, glisser et les déposer dans Adobe XD. Ou encore mieux, si vous avez un scanner, ce n'est pas obligatoire, mais si vous l'avez, c'est génial. Vous pouvez le numériser et l'insérer simplement dans Adobe XD. Je vais zoomer un peu dans notre fichier Adobe XD, qui est ce que c'est et ce que vous pouvez voir ici. Je vais donc vous guider à travers les étapes et nous allons prendre tout au long du discours pour atteindre le résultat final. Tout d'abord, nous allons commencer par les fils de papier et vous pouvez les voir ici comme je l'ai dit. Donc ce sont tous nos fils de papier. Et nous allons dessiner tous ces filaires sur un bout de papier. Je vais vous expliquer toutes mes décisions pourquoi j'ai choisi de faire ces choses. Je vais vous montrer comment vous pouvez écrire des notes juste pour vous rappeler ou pour expliquer à ses coéquipiers ou au client certaines de vos décisions et pourquoi avez-vous choisi ces décisions plutôt que de la chanson, autre chose, pour exemple. Ensuite, nous allons créer cette architecture de site web. Nous allons connecter toutes les pages entre elles. Et je vais vous expliquer le flux du site Web où les utilisateurs vont cliquer sur des pages riches, ils vont visiter, où ils vont aller à partir de là et ainsi de suite. Une fois cela terminé, nous allons passer aux trames filaires dans Adobe XD. Maintenant, vous vous demandez peut-être, pourquoi devrais-je créer deux fois des trames filaires ? Eh bien, il est beaucoup plus facile de mettre des idées juste sur un morceau de papier et de les tirer rapidement vers le bas, juste Sukh et obtenir le sens général, une image globale de votre projet et d'offrir une direction de conception, par exemple. Et puis une fois que vous avez une dette, une fois que vous avez montré cela à votre client dans soit jpeg, comme ceux-ci sont ici, ou comme un PDF par exemple. Vous pouvez donc combiner tous ces éléments à l'intérieur d'Adobe XD ou de tout autre logiciel dans un grand PDF. Et vous pouvez envoyer ce PDF à votre client afin qu'il puisse le vérifier et voir par eux-mêmes si c'est quelque chose qu'ils aimeraient poursuivre avec ce projet une fois tout cela est terminé et que votre exemple de Fourier obtienne un lumière de votre client. Ensuite, vous allez passer à l'intérieur d'Adobe XD, puis commencer à créer des trames filaires. Comme vous pouvez le voir, nous allons créer tous ces filaires dans Adobe XD. Je vais vous montrer comment vous pouvez utiliser et réutiliser certaines icônes. Comment créer des styles de police, comment créer des couleurs personnalisées, les faire en tant que composant, puis appliquer ces couleurs dans votre conception. Je vais aussi vous montrer quelques plug-ins pour créer ces drapeaux ici, par exemple, je ne vais pas vous montrer quelques plugins différents plus tard pour d'autres choses. Et une fois que nous avons terminé la conception du site Web, nous allons également créer un écran de tableau de bord car les utilisateurs doivent se connecter à partir de ce site Web et aller à l'intérieur du de bord où ils ont toutes leurs informations personnelles. Et comme il s'agit d'un projet bancaire, ils auront accès à leurs comptes, ils auront accès à leurs cartes, prêts, etc. Nous allons donc créer une dette. Maintenant, l'importance de ces trames filaires dans Adobe XD est que vous pouvez les partager avec votre client pour obtenir des commentaires. Lorsqu' ils vous fournissent des commentaires sur ces trames filaires, vous êtes en mesure d'apporter certaines modifications à ces trames filaires. Dense les poncer que retour pour révision. Ils peuvent soit vous fournir plus de commentaires et vous pouvez continuer avec des commentaires sur ces trames filaires. Vous pouvez également appliquer les commentaires que vous avez reçus et commencer à créer des conceptions. Maintenant, quand vous commencez à créer des dessins, comme vous pouvez le voir ici, vous allez commencer à inclure différentes couleurs parce que si vous regardez ici, vous pouvez voir qu'il est juste gris sur blanc, peut-être même un gris plus foncé . Ce n'est donc que votre couleur de base pour transmettre vos idées à votre client et peut-être même aux développeurs, peut-être à vos coéquipiers, afin que vous puissiez recueillir tous ces commentaires. Je vous parle de commentaires dans la partie partage de ce cours. Donc, je vous encourage vraiment à revenir à la dette une partie du cours. Donc, vous pouvez regarder tout le cours ou vous pouvez sauter directement à cette partie juste pour vous familiariser avec la dette. Donc c'est vraiment à vous de décider. Comment voulez-vous regarder ce cours ? Enfin, nous allons commencer à concevoir. Nous allons concevoir toutes ces pages, et nous allons également ajouter des animations agréables et personnalisées. Nous allons les diviser en flux. C' est ce que vous voyez ici où il est écrit conception de site Web, conception de tableau de bord, et ainsi de suite. Nous allons connecter toutes ces pages. Et comme vous pouvez le voir ici, nous avons juste un écran de tableau de bord à l'intérieur de notre filaire parce que nous allons continuer à construire à partir de là. Et nous allons créer tous ces autres écrans de tableau de bord. Maintenant, si je vous emmène ici et que vous appuyez sur ce bouton d'aperçu juste ici, il s'ouvrira à la fenêtre externe. Et puis je peux vous montrer ce que nous avons fait ici avec ce design a enrichi l'animation. Donc, nous avons inclus quelques animations personnalisées et certains vraiment prudent un placement de plantes de ces animations. Donc, si je survole, vous pouvez voir ces effets de survol sur ces boutons. Vous pouvez voir que ce menu nous suit. Comme nous faisons défiler. Vous pouvez voir ces effets d'horreur. Ces cartes, par exemple, vous pouvez voir comment cela fonctionne. Nous avons inclus quelques effets plus tard avec cette partie également. Il y a un effet d'horreur ici et cette navigation fonctionne. Donc, si je clique sur mes comptes, par exemple, va me conduire à la page des comptes où j'ai toutes ces icônes, par exemple, qui lorsque vous cliquez sur eux, vont changer. Et toutes ces informations vont également changer pour mieux correspondre à toutes ces informations ici en haut indiquant la sélection que vous avez choisie. Nous avons également notre effet sur ces boutons. Nous avons aussi Q et a. Nous avons ce joli petit dossier et ainsi de suite. Après cela, je vais montrer comment nous pouvons créer ces pages de connexion et d'inscription, que vous pouvez voir ici. Et puis après vous être connecté, il vous mènera à votre tableau de bord où vous avez tous ces effets de pagination sur ces cartes. Par exemple, vous avez ces effets ici en haut. Et je peux aussi vous emmener à des pages comme celle-ci où je vais montrer comment nous pouvons créer ces graphiques animés. Comment vous pouvez créer ces boutons, comment créer ces groupes défilants et bien plus encore une fois la conception terminée, après avoir recueilli suffisamment de commentaires, après avoir fait tous ces éléments et émissions, que je vais vous guider étape par étape, comment nous pouvons les créer d'une manière intelligente en utilisant des composants, et comment vous pouvez ensuite réutiliser ces composants plus tard, vous allez passer à la conception réactive. Je vais partager avec vous ce qu'est le design responsive. Je vais vous montrer tous ces différents types de grille et de grille, comment ils vont fonctionner à l'intérieur de notre conception. Et je vais montrer comment nous pouvons créer cette page d'accueil, qui est cette page et ajustée en quatre tailles différentes. Et Dan, je vais faire la même chose et vous montrer comment vous pouvez faire exactement la même chose en utilisant les mêmes principes sur l'écran de conception du tableau de bord. Nous n'allons pas créer un design réactif pour toutes les pages juste pour l'amour du temps. Mais si vous le voulez, je vous encourage vraiment à tester vous-même toutes ces pages que nous allons créer dans ce cours, parce que c'est la meilleure façon d'apprendre. Vous allez appliquer ces principes quand vous commencez à travailler avec vos clients ou si vous travaillez déjà avec vos clients, c'est un excellent moyen juste de brosser vos connaissances ou de choisir de nouvelles techniques qui Adobe XD peut vous fournir. Enfin, après avoir terminé ce design responsive, nous allons passer au guide de style de projet. Je vais vous montrer comment vous pouvez partager vos créations avec votre client. Comment nous pouvons recueillir des commentaires, Coke, et partager des conceptions avec les développeurs, en leur donnant des actifs qu'ils peuvent ensuite télécharger et utiliser dans le code. Comment peut partager du code CSS personnalisé ? Comment utiliser et créer tous ces éléments de document ici. Donc, lorsque la charge, vous pouvez voir que nous avons créé ces jetons de couleur. Nous créons un style de personnage différent. Nous avons créé un tas de ces différents composants. Je vais donc vous montrer comment vous pouvez partager toutes ces choses avec vos clients et avec vos développeurs. Nous allons discuter de la façon dont nous pouvons recueillir des commentaires et comment vous pouvez prendre ces commentaires dans n'importe quelle partie de votre projet. Donc, que ce soit dans cette partie, dans cette partie, dans la conception Barth et partie réactive. Ou enfin, lorsque vous commencez avec le guide de style de projet. Enfin, nous allons terminer ce projet. Nous allons créer le guide de style de projet. Et je vais vous montrer comment vous pouvez exporter manuellement tous les actifs de ce projet pour les montrer à vos développeurs et clients, je vais vous montrer la structure des dossiers. Je vais vous montrer différentes techniques d'exportation d'actifs, différents formats de fichiers, comment ils correspondent les uns aux autres, pour ce que vous pouvez utiliser, quel format de fichier et bien plus encore. Je vais également vous montrer différentes tailles et comment pouvez-vous travailler avec différentes tailles. Ainsi, par exemple, pour tous ces éléments et comment peut-on exporter rapidement des actifs ? Comment faire, ne pas répéter l'exportation d'actifs ? Et comment pouvez-vous améliorer encore plus ce processus, accélérer un peu les choses. Donc, fondamentalement, c'est notre projet et vous pouvez voir combien il y a en blanc. Le cours dure si longtemps. J' espère vraiment que vous allez apprendre quelque chose de nouveau du discours. Et j'espère vraiment que vous allez appliquer les connaissances du discours dans votre travail futur. Donc, comme je l'ai dit, la première vidéo après cette vidéo est juste de vous guider à travers le projet lui-même. Donc, si vous le souhaitez, vous pouvez regarder qu'après cette vidéo vient la partie introduction ou pour Adobe XD. Encore une fois, si vous n'êtes pas familier avec Adobe XD, si vous ne savez pas ce qui est possible, il y aura UCSD. Je vous encourage vraiment à regarder cette partie du cours avant de passer à cette partie du cours lorsque nous commencerons par la conception du projet. Alors je te verrai là-bas. 3. Introduction à Adobe Xd: Dans cette section du cours, nous allons explorer Adobe X, ces outils et fonctionnalités de base. Et je vais vraiment recommander à tous ceux qui commencent tout juste avec la conception UI UX ou avec Adobe XD lui-même de consulter cette partie du cours parce qu'il contient vraiment quelques-unes des informations les plus précieuses sur tous les outils que Adobe XD a à offrir. Outils de conception parce que les outils de prototypage, nous allons les explorer un peu plus tard dans le cours, une fois que nous commençons réellement à prototyper nos designs et à y ajouter quelques animations et quelques épices. Mais avant tout cela, encore une fois, si vous commencez tout juste, si vous ne savez pas ce qu'est Adobe XD, si vous ne savez pas ce que vous êtes dans la conception UX. Et puis je vais vraiment vous recommander de vérifier cette partie du cours pour vous familiariser avec certains de ces raccourcis. Parce qu'il y aura des outils vraiment précieux à comprendre, surtout une fois que vous commencerez à avancer et à suivre ce cours. Et nous allons en arriver à des trucs extrêmement complexes plus tard dans le bug du cours. Avant tout cela, je vous recommande vraiment de consulter cette section du cours, car comme je l'ai dit, il contient quelques-uns des conseils et techniques les plus importants d'Adobe XD et de tous ses outils de base pour la conception. Dans la section suivante du cours, nous allons commencer à concevoir réellement, allons planifier. Nous allons tout traiter depuis le processus de conception lui-même. Donc, encore une fois, si nous savons comment faire toutes ces choses, vous pouvez simplement sauter cette partie du cours. Mais si vous ne le faites pas, je vous recommande vraiment de vérifier et de vous familiariser avec tous ces outils et fonctionnalités. Alors je te verrai dans le cours. 4. Installez Adobe Xd: Dans cette première vidéo de cette série, où je vous guide à travers Adobe XD, ses fonctionnalités et toutes ses fonctions. Nous allons explorer l'application de bureau infonuagique créative. Vous pouvez donc accéder au site officiel d'Adobe, Adobe.com, Si vous n'avez pas cette application de bureau Creative Cloud. Et il est essentiellement utilisé pour toutes les mises à jour et toutes les installations de chaque logiciel qu'Adobe a à offrir, y compris un Adobe be x D. Donc, voici à quoi cela va ressembler. Ainsi, vous pouvez créer votre compte gratuit et vous pouvez y accéder à partir d'ici. Vous pouvez également connecter votre compte Behance si vous en avez un, et il sera affiché ici. Et celles de vos notifications ici, ici, vous avez des applications de bureau, vous avez des applications mobiles et vous avez également des applications Web. Donc, la majorité de ces applications de bureau ont au moins la version mobile. Et si ce n'est pas le cas, certains d'entre eux peuvent également fonctionner sur un Web. Par exemple, les polices Adobe où vous pouvez télécharger des polices, Évidemment, Adobe Stock où vous pouvez obtenir des photos de stock, portfolio, Acrobat, et ainsi de suite. Ce qui nous intéresse, ce sont les applications de bureau et Adobe XD. Donc ici, je l'ai installé, comme vous pouvez le voir, et il est à jour quand il n'est pas à jour, vous pouvez simplement, comme il dit, ici, cliquez sur mise à jour. Vous verrez la barre de progression de la mise à jour ici. Il va se mettre à jour vers la dernière version, puis il affichera ce message visiteurs à jour. Comment pouvez-vous réellement l'installer ? Là où c'est assez simple à partir de cette liste, ici, vous avez ce bouton d'installation à côté d'Adobe XD, comme je l'ai dit, l'ont déjà installé de sorte que vous ne pouvez pas le voir, mais simplement cliquez sur Installer. Il vous demandera de l'installer comme n'importe quel autre logiciel sur votre ordinateur. Il fonctionne à la fois sur Mac et PC. Et une fois qu'il est installé sur votre machine, il dira installé une mise à jour. Et fondamentalement, pour l'ouvrir, vous pouvez simplement cliquer ici. Et lorsque vous faites cela, l'écran apparaît et laissez-les rapidement cacher la discipline hors de la vue. Et dans la prochaine vidéo, nous allons explorer ce vert, qui est appelé écran d'accueil. Et c'est essentiellement la première chose que vous voyez une fois que vous chargez Adobe XD à partir de cette application de bureau Creative Cloud, vous n'avez pas à le charger à partir de là. Il y a aussi un raccourci de bureau pour l'ouvrir comme n'importe quel autre logiciel. Mais je vous recommande vraiment de vérifier de temps en temps s'il y a des mises à jour parce que c'est la façon la plus simple de le lancer et d'accéder à toutes ses fonctionnalités. 5. Écran d'accueil: Donc, ici, nous avons l'écran d'accueil, comme je l'ai mentionné dans la vidéo précédente. Et ici, sur l'écran d'accueil, vous pouvez accéder à toutes ces fonctionnalités moyennes avant de commencer à travailler dans Adobe XD. Donc, en dessous de l'écran d'accueil, nous avons l'onglet Apprendre. Et une fois que vous cliquez dessus, il apportera ces tutoriels d'Adobe XD vapeur. Et vous pouvez voir comment nos bacs Q0, qui est essentiellement leur évangéliste chez Adobe Steam, vous pouvez voir comment démarrer, sur la conception, le prototype, systèmes de conception de collaboration, tous ces différents tutoriels pour vous aider une fois que vous commencez ou lorsque vous êtes coincé, par exemple, c'est le moyen facile d'accéder à tous ces tutoriels, mais tout ce que nous avons des documents cloud, et ces documents sont évidemment téléchargés dans le cloud. Et comme Adobe XD est principalement basé sur le cloud, vous pouvez l'utiliser simplement comme une application de bureau. Si, par exemple, vous n'avez pas accès à Internet ou si vous ne souhaitez pas télécharger vos fichiers dans le cloud. Mais si vous le faites et si vous choisissez de le faire, vous pouvez voir vos documents cloud ici. Et comme vous pouvez le voir, je suis sur un démarreur, un plan pour un discours parce que je veux vous montrer toutes ses fonctionnalités une fois que vous êtes sur un plan de démarrage. Donc, vous n'avez pas payé Adobe Creative Cloud ou vous n'avez pas acheté l'application elle-même pendant un an. Donc, en gros, c'est ce qu'il dit, mise à niveau. Donc c'est ce que vous allez voir. Si vous utilisez la version gratuite d'Adobe XD, vous pouvez cliquer sur ce bouton. Osez la mise à niveau si vous le souhaitez, mais si vous ne le faites pas, vous pouvez simplement continuer à utiliser cette version gratuite. Donc, à l'intérieur d'une version gratuite, vous avez un espace de stockage dans le cloud limité. Et si je clique ici, vous pouvez voir comment travailler avec vos documents cloud. Et vous pouvez cliquer ici pour ajouter des documents cloud supplémentaires si vous voulez le partager avec vous sont les documents qui sont partagés avec vous via le cloud et supprimés sont évidemment les documents supprimés que vous avez disparu avant et supprimé parce que vous avez besoin de cet espace supplémentaire dans votre stockage cloud. Ci-dessous, vous pouvez voir les liens gérés. Et ce sont les liens pour les prototypes partageables. Donc, ils prennent aussi de l'espace. Et parce que sur un plan gratuit, qui est le terrain de démarrage, évidemment ici, vous n'avez qu'un lien partagé. Ensuite, si vous êtes sur un autre projet, vous pouvez supprimer ce lien partagé s'il n'est plus nécessaire. Par exemple, vous avez terminé ce projet avec votre client et il n'a plus besoin de voir ce lien partagé. Donc, vous pouvez aller de l'avant et le supprimer si vous le souhaitez. Retournons à la maison en cliquant ici. Et ce que vous pouvez voir ici, c'est leur slogan. Donc, concevoir un partage de prototype, c'est tout ce qu'Adobe XD ne peut pas faire. dessous de ça. Nous avons certains sont plus de tailles et nos planches sont fondamentalement, si vous n'avez jamais travaillé avec un fichier vectoriel avant et un programme vectoriel avant. Fondamentalement, ce sont vos dimensions de fichier à l'intérieur d'Adobe XD. Donc, ici, ils ont introduit certains de ces raccourcis. Donc, fondamentalement, c'est pour le mobile et la tablette, c'est pour le web, et c'est pour les médias sociaux, et c'est votre taille personnalisée. Et si vous cliquez sur ces flèches sur l'une de ces flèches, vous avez cette liste déroulante avec quelques grandes tailles qui sont utilisées. Dans l'ensemble de l'industrie. Et ce sont essentiellement des normes de l'industrie si vous travaillez avec ces tailles. Donc, comme vous pouvez le voir, nous avons des versions mobiles et tablettes ici, nous avons une version de site Web Ici, nous avons des versions de médias sociaux ici. Et si nous cliquons dessus, cela vous mènera à un nouveau document. Laisse-moi revenir rapidement et te montrer tout ça. Et enfin, nous avons discuté de leur taille, que vous pouvez ouvrir et vous pouvez entrer vos valeurs. Donc, par exemple, utilisons 1920 par 1080, comme ça, vous pouvez simplement entrer vos numéros sur votre clavier. Appuyez simplement sur Entrée ou cliquez ici. Avant de le faire, nous chargeons que vous avez vos fichiers récents et ce sont essentiellement vos fichiers que vous avez ouverts précédemment. Donc, ceux-ci sont accessibles à partir d'ici. Vous pouvez également ouvrir votre Adobe XD et les ouvrir à partir de là. Et je vais le montrer aussi. Mais fondamentalement, ce ne sont que quelques-uns de vos fichiers les plus récents. Et c'est pratique de les avoir ici parce que par exemple, sont mes maquettes que j'utilise dans Adobe XD. Et je peux simplement cliquer ici et il va ouvrir ce fichier sans moi une navigation pour elle sur mon ordinateur. Enfin, avant de passer aux tableaux d'art réels, et je vais vous montrer le XD de l'intérieur. Ce ne sont que quelques bulletins d'information qu'ils incluent ici. Donc, quelques conseils ou ressources utiles et ainsi de suite. Vous pouvez donc cliquer ici pour explorer certains de leurs tutoriels. Et vous pouvez le faire en cliquant ici ainsi que déjà vous dit. Ici, nous avons quelques parenthèses qui sont évidemment utiles si vous voulez télécharger et explorer certains de vos enfants que d'autres personnes ont créé. Et nous allons les mentionner un peu plus tard. Et enfin, ce que nous avons ici est défi créatif quotidien, que je vous recommande vraiment de rejoindre, surtout si vous pensez que ce cheminement de carrière est pour vous il défis créatifs quotidiens sont génial et vous peut y accéder en cliquant simplement là. Et ils sont polyvalents. Ils incluent donc de nouveaux défis tout le temps. Donc je vous recommande vraiment de les vérifier. Et avez-vous tenté votre chance à certains de leurs défis quotidiens ? Enfin, allons-y et ouvrons notre taille personnalisée que nous avons créée. Mais vous pouvez également accéder à ces dimensions exactes à partir d'ici. Donc, vous pouvez voir 1920 par 1080. Donc c'est à vous de décider ce que vous voulez faire. Mais parce que j'ai déjà créé cela, permettez-moi de cliquer rapidement là. Et comme vous pouvez le voir, il va ouvrir cette nouvelle rpart, comme moi l'agrandir. Elle avait le contrôle de la commande est 0 pour se mettre en position. Et c'est à ça que ça va ressembler. C' est ton aéroport, c'est ton espace de travail. Et à l'intérieur de cet espace blanc, à l'intérieur de ce tableau d'art, vous pouvez dessiner, vous pouvez mettre du texte à l'intérieur, vous pouvez créer des graphiques. Vous pouvez faire toutes sortes de choses différentes, que nous allons couvrir dans ce cours. Mais en gros, c'est votre espace de travail. Tout autour. Cet espace de travail est essentiellement cet espace vide que vous pouvez monter et descendre. Comme vous pouvez le voir, il y a beaucoup d'espace pour tout votre aéroport supplémentaire que vous allez créer. Et je vais vous montrer dans ce cours comment vous pouvez faire ça. Et nous allons en fait passer tout le processus de conception. Et je vais vous montrer beaucoup de détails différents dans ce cours. Mais avant nous, je veux juste couvrir ces bases pour toutes les personnes qui n'ont jamais utilisé Adobe XD auparavant. Vous pouvez donc cliquer ici pour renommer ce document. Comme vous pouvez le voir par défaut, il passe à ce jour, solides le renomment rapidement à mon premier projet, par exemple. Et cliquez sur Enregistrer. Et comme vous pouvez le voir, cette icône de nuage juste ici, parce qu'elle se met à jour vers le nuage et vous pouvez voir qu'elle est en train d'enregistrer. Qu' est-ce qu'il a sauvé ? Toi. Vous n'avez plus cette progression et vous pouvez toujours appuyer sur Control ou Command S pour l'enregistrer si vous le souhaitez. Enfin, les noms de nos tableaux peuvent être modifiés à partir d'ici, sorte que vous pouvez double-cliquer ici. Par exemple, appelez cette page d'accueil. Disons que si c'est quelque chose que tu veux. Donc, dans la prochaine série de vidéos, nous allons explorer les trois onglets d'Adobe XD. Donc, il a cet onglet gauche, il a l'onglet stop, et il a cet onglet droit. Et tous ces onglets font des choses différentes et je vais les expliquer dans les prochaines vidéos. Alors je te verrai là-bas. 6. Apprenez à connaître Adobe Xd: Permettez-moi donc de vous guider rapidement à travers ces onglets d'Adobe XD. Donc, sur votre gauche, vous avez l'onglet Outils. Juste ici. Vous avez l'inspecteur des propriétés. Et juste ici, vous avez ces onglet principal. Différence entre les versions Windows et Mac d'Adobe est le sont assez simples, en fait juste la moyenne. Et le seul facteur de différenciation est la navigation. Donc, sur un Mac, vous aurez la navigation juste ici en haut, comme vous l'avez généralement sur n'importe quelle autre application, sur votre Mac ou sur Windows, vous avez ces options ici, et vous avez également ce menu hamburger ici. Donc, une fois que vous cliquez là, vous avez toutes vos options ici. Vous pouvez également cliquer avec le bouton droit de la souris sur la majorité de ces outils et ces options. Et vous allez obtenir des fonctionnalités supplémentaires, peu importe ce que vous faites. C' est donc le facteur de différenciation principal et clé entre les versions Mac et PC. Maintenant, juste ici sur votre gauche, une fois que vous passez le curseur, vous avez tous ces différents outils que vous pouvez utiliser pour créer différents designs. Et commençons par le haut en bas. s'agit donc de votre outil de sélection et vous l'utilisez généralement Ils'agit donc de votre outil de sélection et vous l'utilisez généralementpour sélectionner n'importe quel objet que vous pourriez avoir à l'intérieur de votre arboréale. Ci-dessous, nous avons quelques objets de forme. Vous avez donc Rectangle, Ellipse, polygone et une forme de ligne. Et vous pouvez remarquer, une fois que j'ai survolé chacun d'eux, vous avez une touche de raccourci. Et je vous fournirai aussi un PDF avec tous les raccourcis. Ou vous pouvez simplement aller sur le site Web Adobe XD, taper des raccourcis dans la barre de recherche et vous pouvez les trouver là, ou simplement Google, raccourcis Adobe XD, selon la plus facile pour vous. Alternativement, vous pouvez également cliquer ici et aller à l'aide. Et à partir de là, vous pouvez y accéder, par exemple, l'aide XD. Vous pouvez cliquer là et vous pouvez trouver tous ces raccourcis. Ci-dessous, nous avons l'outil crayon et stylo est utilisé pour créer des formes complexes. Et vous allez voir ça dans la prochaine vidéo. Et en dessous, nous avons du texte évidemment pour la création et la gestion du texte. Ci-dessous, nous avons notre outil de conseil. Donc, si vous voulez ajouter rapidement plusieurs cartes R sans aller à l'écran d'accueil, vous pouvez simplement cliquer là. Et à l'intérieur de votre inspecteur des propriétés, vous pouvez voir tout ce qui est sur l'écran d'accueil, mais d'ici accessible afin que vous puissiez facilement, par exemple, je veux créer celui-ci. Vous pouvez cliquer dessus et il l'ajoutera juste ici sur la droite, comme vous pouvez le voir juste là. Donc, je peux aller de l'avant et le supprimer en appuyant simplement sur mon contrôle de touche de suppression 0 pour enclencher en position. Et enfin, nous avons l'outil de zoom. Donc, comme tout autre outil ci-dessous, nous avons un panneau d'actifs. Et quand je clique dessus, il se développera vers la droite. Et vous pouvez ajouter vos différents acides. Ainsi, vous pouvez ajouter différentes couleurs avec lesquelles vous travaillez à l'intérieur de votre design. Et simplement en cliquant sur ces couleurs que vous avez déjà ajoutées là. Elle s'appliquera à celui que vous avez sélectionné. Donc, par exemple, si vous modifiez du texte, tout est noir et vous voulez le créer, par exemple, pour être bleu et vous avez la couleur bleue ici. Vous pouvez sélectionner le texte cliquez juste là, et il s'appliquera. Je vais vous montrer tout ça plus tard dans ce cours. Ci-dessous, nous avons des styles de personnages. Par exemple, vous créez. H on laisse c et h on le laisse, par exemple, 36 gras. Vous pouvez simplement cliquer sur ce plus et il l'ajoutera là comme un style de personnage. Plus tard, vous en avez un autre qui est 18 irrégulier. Vous pouvez cliquer juste là et il l'ajoutera là. Ensuite, si vous voulez modifier les styles de caractères que vous pourriez avoir à l'intérieur de votre aéroport, vous pouvez simplement le sélectionner, naviguer ici, cliquer dessus, et il sera mis à jour pour ce style de personnage. Enfin, nous avons des composants, et les composants sont un sujet un peu complexe à discuter, mais nous allons en discuter tout au long de ce cours parce que vous allez voir que nous allons utiliser beaucoup de composants différents. Et disons que vous avez un bouton que vous voulez utiliser dans votre conception. C' est peut-être un bouton bleu. Disons que la largeur est de 76 pixels, quelque chose comme ça. Et il est dit, par exemple, d'en savoir plus. Vous pouvez appuyer sur le contrôle ou la commande K pour l'ajouter en tant que composant, ou vous pouvez naviguer jusqu'ici à notre combat des acides. Cliquez ici sur ce symbole plus, et il ajoutera ce composant ici. Ensuite, vous pouvez simplement cliquer, faire glisser et déposer votre composant tout au long de votre conception. Et il est beaucoup plus facile, plus rapide et plus rationalisé de créer vos designs, puis de recréer ou copier et coller ce bouton. Tout le temps. Vous n'avez pas besoin d'utiliser des composants uniquement pour les boutons. Vous pouvez les utiliser pour toutes sortes de choses différentes. Par exemple, les images. Vous pouvez les utiliser pour différentes formes, vous pouvez les utiliser pour les icônes et ainsi de suite. Mais comme il l'a dit, je vais l'expliquer beaucoup plus en détail tout au long de ce cours. dessous de cela, nous avons le panneau Calques. Et évidemment, une fois que vous commencerez à les utiliser, vous verrez qu'il se remplit avec vos couches ici. Vous pouvez les réorganiser et les réorganiser, en cliquant sur le destinataire et en les faisant glisser. Et vous avez aussi des groupes de deux couches. Avant que je vous montre que vous avez quelques options ici. Ainsi, vous pouvez marquer pour l'exportation n'importe quelle couche, puis vous pouvez simplement cliquer sur Contrôle ou Commande E. Et il va commencer à exporter toutes ces couches que nous avons marquées pour l'exportation. Ou vous pouvez simplement les sélectionner manuellement comme ça, appuyez sur Commande de contrôle E et ils vont exporter comme ça. Vous pouvez verrouiller vos calques afin qu'ils ne puissent pas se déplacer. Et vous pouvez également masquer certains calques en cliquant simplement ici et il ne sera pas affiché. Laisse-moi changer la couleur. Et si je clique ici, vous ne pouvez plus le voir parce qu'il est caché. Enfin, vous pouvez ajouter vos couches via le groupe et vous pouvez sélectionner plusieurs couches, regroupement, le clic et un décalage. Donc, si je clique ici sur la touche Hall my shift, cliquez sur celle-ci, je vais tous les sélectionner. Il contrôlerait le commandement G pour les regrouper. Et vous pouvez double-cliquer et renommer le groupe de solidarité. Et vous pouvez également cliquer avec le bouton droit de la souris et vous pouvez voir tous ces différents raccourcis ici. Il est donc très important d'apprendre au moins quelques raccourcis de base. Si ce n'est pas le cas, vous pouvez simplement cliquer avec le bouton droit de la souris sur le groupe et renommer ces couches également. Donc je dirais d'abord, deuxième, et ainsi de suite. Donc, c'est essentiellement vos couches. Et pour supprimer le calque simplement sélectionné, appuyez sur Supprimer sur votre clavier et il le supprimera de là. Vous pouvez également repositionner cela. Je vous l'ai déjà dit. Et c'est essentiellement sur les couches. Et nous allons les explorer dans beaucoup plus de détails tout au long de ce cours. Je voulais juste te montrer rapidement ce que les deux. Enfin, il est juste ici en bas, nous avons des plugins, panneau. Et les plugins sont utilisés pour vous aider à concevoir une manière plus efficace et plus rapide. Donc, par exemple, comme vous le voyez ici, j'ai mon plugin d'angle qui est formé mes maquettes. J' ai mon plug-in arrangeur et tous ces plugins sont différents. Donc, une fois que vous cliquez sur les installer, ils font des choses différentes tri. Voyons ce lorem ipsum, Je peux sélectionner le texte, sélectionner la zone de texte et taper quelque chose. Voyons voir, peut-être des ponts. Cliquez quelque part à l'extérieur. Cliquez sur lorem ipsum, remplissez le texte de l'espace réservé. Insérez du texte, comme vous pouvez le voir, au lieu d'aller sur un site Web en entendant copier et coller et ainsi de suite, en quelques clics à l'intérieur d'Adobe XD, j'ai réussi à inclure du texte factice ici. Ainsi, comme vous pouvez voir comment beaucoup d'entre eux, et pour ajouter plus, vous pouvez cliquer sur cette icône plus et vous pouvez voir découvrir, parcourir et gérer. Donc, ici, nous avons Editor's Choice et ce qu'ils pensent que les plugins les plus importants sont. Et vous pouvez les voir par catégories. Ainsi, par exemple, si vous voulez chanter pour la réutilisation et le test, vous pouvez cliquer ici et ils vous assureront les plug-ins les plus pertinents et importants pour cette catégorie particulière. Vous pouvez également cliquer sur Gérer, et ce sont tous mes plugins installés ici. Donc, je sais que ces cartes générées ne fonctionnent plus malheureusement. Donc, je peux cliquer sur Installer à partir d'ici, cliquez sur Installer, et vous pouvez voir qu'il a disparu d'ici aussi bien que d'ici. Si vous avez une mise à jour pour vos plugins, vous pouvez cliquer sur mettre à jour tout. Et comme vous pouvez le voir, en fonction de la vitesse de votre connexion Internet, vous pouvez voir qu'elle se met à jour très rapidement. Donc ce sont vos plugins et c'est votre barre juste ici sur la gauche. Donc, sous le dessus, nous avons conçu des options de prototype et de partage. Alors, qu'est-ce que c'est ? Et fondamentalement, dans l'onglet Conception, vous faites, toute votre conception, veut cliquer sur l'onglet prototype. Vous pouvez ajouter toutes sortes d'animations différentes à vos objets, notre planche ou à l'aéroport lui-même. Vous pouvez créer plusieurs flux et nous allons entrer dans tous ces détails. Et vous pourriez remarquer une fois par clic certaines de ces choses, ces inspecteurs immobiliers sont sur la droite sont en train de changer. Donc vous pouvez voir pour ces deux-là, c'est complètement différent quand je passe de l'un à l'autre. Et c'est vraiment exprès parce que surtout dans les onglets de conception et de prototypage, il y a des choses complètement différentes. Enfin, nous avons l'onglet Partager, qui sera utilisé une fois que vous aurez terminé votre projet et que vous souhaitez le partager avec les parties prenantes, les clients, les développeurs, les coéquipiers. Et vous pouvez tout mettre en place ici. Ainsi, vous pouvez choisir la révision de conception, que votre client va réellement examiner et laisser vos commentaires. Vous pouvez faire la même chose pour un développement. Ainsi, les développeurs peuvent voir des extraits CSS. Ils peuvent voir tous les actifs différents que vous utilisez. Ils peuvent voir différentes marges, paddings et ainsi de suite. Présentation, test utilisateur, nom dit tout. Et enfin, costume. Si vous voulez ajuster certaines de ces choses, si votre audience est personnalisée audience, qui n'est pas représentée ici. Et comme vous pouvez le voir, un lien s'appelle Mon premier projet parce que notre projet s'appelle Mon premier projet. Mais vous pouvez évidemment le renommer d'ici. Et donnons à certains ne savent pas le nom du projet basé sur la société elle-même et ainsi de suite. Donc vous pouvez accéder à tout ça là-bas. Donc c'est fondamentalement tout pour cette vidéo. Et je vais vous montrer un inspecteur immobilier et comment il change dans la prochaine série de vidéos, une fois que nous commencerons à explorer tous ces différents outils, ici dans le panneau « Outils ». Alors je te verrai là-bas. 7. Les formes: Dans cette vidéo, nous allons explorer quelques formes qui sont ici proposées dans Adobe XD. Commençons donc par la forme rectangulaire. Et vous avez déjà vu que j'ai créé certains d'entre eux, mais laissez-moi aller de l'avant et supprimer tout pour que nous ayons une belle ardoise propre. Donc, vous pouvez cliquer dessus ou vous pouvez utiliser notre raccourci pour cela. Vous pouvez cliquer et faire glisser et créer ce que vous voulez ici à l'aide de cet outil rectangle, vous pouvez cliquer sur l'outil Sélectionner, qui est v, comme un raccourci et vous pouvez le positionner où vous voulez, juste ici. Et ici. Comme je l'ai mentionné dans une vidéo précédente, l'inspecteur des propriétés change en fonction de ce que vous avez sélectionné ici. Donc ici, nous avons quelques options et laissez-moi vous expliquer toutes. Et fondamentalement, ils sont assez similaires pour toutes ces formes. Et en fait, explorons et endettons très rapidement. Donc, je tiens le décalage à l'échelle correctement. Et si tu ne tiens pas, c'est ce qui va se passer. Donc, vous pouvez voir qu'il ne s'adapte pas comme il se doit. Et laissez-moi l'utiliser pour créer mon rectangle et laissez-moi l'utiliser pour créer ma ligne. Donc, en gros, c'est à ça que ça va ressembler. Une fois que vous avez créé toutes ces différentes formes, laissez-les rapidement leur donner une couleur. Ainsi, nous pouvons leur donner une couleur, une par une en cliquant simplement ici, puis en choisissant la couleur que vous voulez. Vous pouvez utiliser une couleur unie. Vous pouvez utiliser le dégradé linéaire, qui vous permet de voir à quoi cela ressemble. Et nous allons l'expliquer un peu plus tard dans ce cours. Et vous pouvez utiliser un gradient radial, qui est fondamentalement de ce cercle. Mais allons-y avec une couleur unie. Et vous pouvez utiliser ce code hexadécimal, surtout si vous avez un code hexadécimal personnalisé. Alors utilisons le mien trois, C6 ff, qui est un joli bleu. Une fois que vous cliquez sur Entrée ou Retour, elle s'appliquera. Et vous pouvez ensuite utiliser un décoloré pour appliquer à tous vos objets en cliquant simplement ici et puis ici. Et vous pouvez voir que cela s'applique à tous. Maintenant, l'autre fonction est la couleur de la bordure. Comme vous pouvez le voir, c'est sur toutes ces formes mais difficile juste là. Il supprimera cette couleur de bordure de tous. Laissez-moi sélectionner ma ligne et laissez-le la ramener parce qu'elle n'a que la couleur de la bordure. Et permettez-moi d'augmenter la taille de cette frontière à, disons dix, juste pour que vous puissiez la voir un peu mieux. Et maintenant, passons à travers certaines de ces options ici à l'intérieur de notre inspecteur des propriétés. Donc, en haut, nous avons des icônes de positionnement. Donc, ici, vous pouvez l'épingler en haut, au centre comme celui-ci, en bas, à gauche, au centre comme ceci, et à droite ici vous avez réparti uniformément. Donc, si vous les sélectionnez tous, vous pouvez les distribuer comme ça. Et vous pouvez les distribuer comme ça. Donc, fondamentalement, peu importe ce que vous sélectionnez ici, il va montrer à l'intérieur de votre inspecteur de propriété ci-dessous que nous avons l'option de grille de répétition. Donc, une fois que vous sélectionnez cela, vous avez ces deux poignées et vous pouvez répéter sur la droite. Et vous pouvez également répéter sur le fond. Donc, si vous avez plusieurs de ces formes, vous pouvez les positionner comme ça. Et c'est vraiment extrêmement facile à utiliser et à utiliser, surtout si vous avez des formes répétées comme des grilles d'image et ainsi de suite. Vous pouvez le dissocier et vous pouvez travailler un par un ou vous pouvez si vous ne voulez pas le faire à, il contrôlerait Z pour les avoir toujours dans le groupe. Et si je sélectionne ce premier, et si je l'échelle, vous pouvez voir que tous sont à l'échelle. Vous pouvez passer le curseur juste ici entre eux. Et vous pouvez ajuster l'espacement entre eux. Et vous pouvez également toujours étendre et avoir autant d'entre eux que vous le souhaitez. Fondamentalement, quel que soit le changement que vous apportez à la première, va s'appliquer à tous. Donc, nous allons rapidement changer une couleur. Vous pouvez voir qu'il se met à jour en temps réel. Et vous pouvez également ajouter toutes ces fonctionnalités supplémentaires que nous allons explorer. Mais pour l'instant, nous allons rapidement cliquer sur Ungroup grid et laissez-moi les supprimer tous juste pour que vous ne soyez pas confondu avec ce qui se passe. Ci-dessous. Nous avons toutes ces options différentes. Donc, si vous utilisez des outils comme Photoshop, Illustrator, ou n' importe quel autre outil de conception avant, fondamentalement, ce que vous avez ici sont ajouter. Donc ça va ajouter à la forme. Soustraire, intersecter et enfin exclure le chevauchement. Donc, il est montré juste ici ce qu'ils font. Vous pouvez jouer avec ces différents paramètres, mais nous ne le ferons pas pour le moment. Courons rapidement à travers tout. Donc, avez la largeur et la hauteur et vous pouvez l'ajuster manuellement et le changement évidemment que vous travaillez sur eux à partir d'ici, vous les avez sur l'axe x et y. Vous pouvez les faire pivoter solides, disons 45 degrés. C' est à ça que ça va ressembler. Vous pouvez le retourner de gauche à droite, de haut en bas. Et ici, nous avons défilement horizontal, nous avons défilement vertical, et nous avons défilé dans tous les domaines, donc horizontal et vertical. Et ces trois vont avoir beaucoup plus de sens une fois que nous commencerons à concevoir. Mais fondamentalement, ils sont là pour vous aider avec votre processus de conception pour accélérer encore plus les choses. Ici, nous avons une position fixe lors du défilement. Évidemment, si vous étendez votre bras, ce que vous pouvez faire en cliquant ici. Et puis une fois que vous dessinez ci-dessous, vous pouvez voir cette ligne de faille. Fondamentalement, tout ce que vous voyez ici sera visible sur l'écran. Mais en dessous de cette ligne de faille, vous devrez faire défiler vos réserves. Alors annulons ça. Retournons en arrière. Vous avez un redimensionnement responsive et vous pouvez utiliser cette fonction de redimensionnement responsive en cliquant simplement ici pour l'activer ou pour le désactiver comme vous le souhaitez. Et nous allons arriver à redimensionner responsive plus tard dans le cours lorsque nous aurons fini notre page Web et que nous commencerons à être conçus pour responsive. Mais fondamentalement, vous avez des options automatiques et manuelles là-bas. Et je vais filmer ce que nous avons commencé à concevoir. Vous avez votre curseur sur l'obésité. Vous pouvez le positionner où vous le souhaitez ou utiliser des raccourcis clavier. Donc, par exemple, si j'utilise cinq avec auto 53% complet, il ira à 30% ou 0, il ira à 100%. Ci-dessous, nous avons le mode de fusion. Donc, si une position ces deux ici, et si je clique sur sombre et si nous cliquons sur écran, si je choisis entre tous ces, comme vous pouvez le voir, il change. Vous pouvez donc jouer avec ces paramètres, mais ils sont principalement utilisés et mieux utilisés avec des images plutôt qu'avec ces formes. dessous, nous avons un rayon de coin. Et vous pouvez ajuster le rayon d'angle ou aussi, par exemple, 50, comme vous pouvez le voir, il arrondit tous les côtés. Ou si vous cliquez ici. Cependant, vous avez en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, et vous pouvez y accéder. Donc, par exemple, utilisons dix pour celui-ci. Comme vous pouvez le voir, c'est Dan et tous les autres ont 50. Ci-dessous, nous avons la couleur de remplissage et je vous ai déjà dit que vous pouvez choisir parmi ces différentes voitures ici, et c'est votre opacité ici. Et revenons rapidement à cette même couleur. Donc, il suffit de cliquer juste là et vous pouvez voir ce sont vos sélecteurs de couleur. Ceci est votre bordure et vous pouvez évidemment augmenter l'épaisseur de votre bordure déjà montré que avec la ligne. Alors disons 20. Et vous pouvez voir que cette frontière est à 20 ans. Vous pouvez ajouter des solides de tiret si 50, vous pouvez voir à quoi cela ressemble. Et toutes ces différentes options qui sont fondamentalement mieux utilisées avec un crayon. Mais on va y arriver dans une seconde dans la vidéo mentale. Mais fondamentalement, vous pouvez planer et voir ce que tout cela est. Ce sont vos coups. Ce sont vos casquettes. Ainsi, vous pouvez cliquer autour de l'écart et voir que ces lignes en pointillés ne sont plus droites, plates, arrondies. Et enfin, vous avez rejoint ici. Alors comment vous voulez qu'ils soient rejoints. Et en dessous, nous avons l'ombre, mais moi rapidement enlevé la frontière. Une fois que vous cliquez sur l'ombre, vous l'avez sur les x, y et bleu. Donc x et y sont des axes, et le bleu est la quantité de bleu que vous voulez dans votre ombre. Voyons donc 2020. Et vous pouvez voir qu'il descend 20 et 20 à droite. Et si vous voulez augmenter floue parce que pour raison quelconque, c'est trop fort d'une ombre. Utilisons 50 par exemple. Et vous pouvez voir à quoi ça ressemble. Donc, fondamentalement maintenant, cet élément ressemble comme il coule dans l'air moyen. Ainsi, vous pouvez ajuster l'ombre, vous pouvez choisir sa couleur. En faisant cela, vous pouvez également sélectionner cette même ombre à partir de la couleur elle-même et plus son obésité est faible comme celle-ci à celle que vous voulez utiliser, 40 par exemple. Et maintenant, vous pouvez voir que c'est une sorte de forme palpitante juste ici. Enfin, nous avons l'avocat de fond et cette option est mieux utilisée avec les images. Et je vais vous le montrer un peu plus tard dans le cours. Et enfin, vous pouvez cliquer sur Marquer pour l'exportation comme déjà mentionné, ou vous pouvez sauter ici, panneau de deux calques. Tout ce qui est sélectionné ici est marqué ici, et vous pouvez simplement cliquer ici pour masquer la marque pour l'exportation. Donc c'est fondamentalement tout pour les formes. Passons rapidement à travers quelques facteurs de différenciation entre toutes ces différentes formes. Donc je t'ai déjà montré ça, celui-là. Vous avez d'autres options ici, mais fondamentalement tout le reste est identique. Ce que c'est, c'est le comptage du coroner. Alors combien de quarts vous voulez actuellement nous en avions trois. Si j'augmente ça à cinq, vous pouvez voir que nous avons ces formes différentes. Si je dis huit, par exemple, vous pouvez voir que nous avons ceci. C' est le rayon du coin et vous ne pouvez pas le faire. Pour une ressemblance juste ici pour changer le rayon de coin pour chaque coin, vous devez le faire pour tous les coins. Donc, si je choisis dix par exemple, ou peut-être même quelque chose de plus grand afin que vous puissiez le voir si 40. Et vous pouvez voir ici que nous avons maintenant ces coins arrondis. Et ce que c' est, c'est l'étoile montée ici. Donc, par exemple, si je veux planer ici, et pour réduire cela à 50, vous pouvez voir que nous avons des formes différentes ici. Donc 45. Et si je le ramène à 100, il ira à la forme originale et il changera évidemment avec tout ce que vous changerez ici. Donc, si je vais à cinq, maintenant le changer à 50, vous pouvez voir que maintenant nous avons cette forme différente. Tout dépend donc de ce que vous sélectionnez ici. Si je choisis trois, par exemple, puis passer à 15, vous pouvez voir que maintenant nous avons ce genre de logo Mercedes Benz. Donc, fondamentalement, tout dépend de ce que vous faites ici. Donc c'est fondamentalement notre triangle et je vais outil polygone pour le cercle. Fondamentalement rien ne change ici. Et vous pouvez évidemment l'augmenter pour le diminuer. Et si vous voulez le diminuer ou l'augmenter uniformément de tous les côtés, vous pouvez utiliser Maj et faire glisser l'un des coins et il augmentera dans cette taille. Si vous voulez l'augmenter uniformément de tous les côtés, vous pouvez maintenir la touche Maj ancienne et faire un clic gauche dans l'un des coins. Et vous pouvez voir qu'il augmente et diminue proportionnellement parce que vous utilisez ce Charcot. Enfin, pour la ligne, vous pouvez voir que nous n'avons que la frontière. Nous n'avons pas la couleur de remplissage comme nous le faisons avec ceux-ci. Et fondamentalement, vous pouvez faire toutes les mêmes choses. Laisse-moi te montrer des casquettes. Vous pouvez voir que maintenant est carré. Mais si je sélectionne cette casquette ronde, vous pouvez voir que maintenant nous avons cette rondeur ici. Et vous ne pouvez pas prolonger, vous ne pouvez pas le changer. Donc vous ne pouvez pas changer de rayon de coin comme vous ne pouvez pas ici. Mais vous pouvez réellement faire est simplement d'augmenter la taille de cette bordure à 50, par exemple. Et vous pouvez voir que maintenant il a changé en taille. Cela fondamentalement si les portes sont vos formes et je pense que j'ai tout couvert, quand il s'agit de ces différentes formes, vous pouvez jouer avec eux. Vous pouvez faire toutes sortes de choses différentes et vous pouvez les utiliser dans le but que vous voulez. Permettez-moi de vous montrer rapidement un exemple. Donc, disons que pour quoi que ce soit, vous voulez ajouter des images à vos designs. Alors laissez-moi rapidement grandir et trouver une image. Permettez-moi d'utiliser celui-ci par exemple. Vous pouvez simplement le faire glisser et le déposer. Et vous pouvez voir qu'une fois que vous le faites, il met en évidence vos formes. Et une fois que vous l'avez laissé tomber, il va se remplir. Et Adobe XD fera de son mieux pour trouver le milieu de votre image. Mais si vous double-cliquez à l'intérieur, vous pouvez voir à quoi cela ressemble. Donc, si Adele clique une fois de plus et étend mon image, maintenant, cela va être le point focal de ce bord afin que vous puissiez le positionner où vous voulez. Vous pouvez voir à quoi ça ressemble. Si vous voulez évidemment mettre à jour votre ombre, vous pouvez le faire aussi. Et laissez-moi beaucoup baisser l'opacité. Voyons, par exemple, je peux utiliser cinq et en utiliser cinq pour celui-ci aussi. Et maintenant vous pouvez voir que nous avons l'image du logiciel. Vous pouvez évidemment changer le rayon de coin ou Allons-y avec dix sur celui-ci. Et maintenant vous avez cette belle image ici. Donc ce sont vos formes essentiellement dans la prochaine vidéo, nous allons couvrir les parents, ce qu'il peut faire pour vous et votre projet. Et je te verrai là-bas. 8. Outil Plume: Bon, passons maintenant au crayon. Et mental est situé juste ici, juste en dessous de tous ces outils de forme. Et pour accéder au crayon, vous pouvez utiliser un raccourci b, comme vous pouvez le voir ici. Il suffit de cliquer dessus. Et ce que fait l'outil Plume, c'est que vous pouvez créer toutes ces formes de base. On te l'a déjà dit et on l'a expliqué aussi. Et vous pouvez accéder à tous les mêmes paramètres ici dans l'Inspecteur des propriétés. Mais ce qu'il fait aussi, c'est que vous pouvez créer des formes complexes en utilisant le mental. Et comment cela fonctionne est fondamentalement vous avez ces points d'ancrage. Donc, quoi que vous fassiez et où que vous cliquiez, comme vous pouvez le voir, XD vous montre des guides pour que vos lignes soient droites. Par exemple, si c'est quelque chose que vous voulez. Et une fois que vous fermez la pièce en cliquant simplement là où vous vous êtes arrêté, où vous commencez. Et sur le premier est en fait votre dernier afin que vous fermiez le chemin. Ce que vous pouvez faire est en fait planer. Et comme vous pouvez le voir, il vous donne l'option lorsque vous cliquez pour ajouter plus de ces points d'ancrage supplémentaires. Vous pouvez donc vraiment créer des formes complexes à partir de ces formes de base. Donc, comme vous pouvez le voir, nous avons commencé avec juste l'outil rectangle de base et vous pouvez l'utiliser ici avec un crayon. Vous pouvez ajouter toutes ces fonctionnalités supplémentaires à vos formes. Alors, comment peux-tu faire ça ? Là où il y a deux façons de le faire, vous pouvez simplement cliquer sur l'un de ces points d'ancrage et les étendre. Et comme vous pouvez le voir, il bouge d'une sorte de manière linéaire. Donc, comme vous pouvez le voir, ces lignes sont vraiment droites et vous obtenez tous ces angles droits. Et si vous maintenez Maj pendant que vous le faites, il s'accrochera à la position d'origine où vous vous êtes arrêté. L' autre moyen est simplement de double-cliquer sur ce point d'ancrage. Et maintenant, une fois que vous l'étendez, vous pouvez voir que cette ligne est maintenant incurvée. Et vous pouvez changer l'angle de cette courbure en utilisant simplement ces deux poignées si nous zoomons un peu plus près. Donc, une fois que vous cliquez dessus, vous pouvez voir que maintenant vous obtenez toutes ces différentes formes complexes. Et si vous entrez, il ira à la position d'origine comme ça. Et si vous sortez tout le chemin, vous pouvez voir que cette courbure devient de plus en plus forte. Vous pouvez également utiliser shift pour accrocher à différents angles, comme un C ici. Donc, selon le type de forme que vous voulez, vous pouvez également appeler la touche Maj pendant que vous la faites glisser, pour la faire glisser directement. Et vous pouvez accéder à tous ces différents paramètres en utilisant simplement ces points d'ancrage et ces poignées comme ça. Donc, comme je l'ai dit, vous pouvez le faire avec n'importe lequel d'entre eux. Et si vous voulez supprimer ce point, vous pouvez simplement cliquer dessus ici pour supprimer, et il supprimera ce point. Donc maintenant, il nous reste juste avec un seul de ces trucs. Et vous pouvez voir que maintenant ces deux-là obtiennent ces poignées afin que nous puissions étendre la courbure de notre forme et changer sa position comme nous le voulons. Si nous voulons revenir en arrière, vous pouvez simplement double-cliquer sur ce point. Double-cliquez sur ce point. Et vous pouvez voir que maintenant nous avons une hétéro, mais comme nous le faisions. Donc c'est tout pour le Pentaho. Mais permettez-moi maintenant de vous montrer comment nous pouvons créer des formes plus complexes et des polices. Disons donc que nous voulons isoler cette partie de notre rapport. Donc, comment nous pouvons faire cela est simplement, cliquez, puis cliquez et maintenez. Comme vous pouvez le voir, vous pouvez changer cet angle comme vous le souhaitez. Et disons que je veux cliquer quelque part par ici. Ensuite, je peux cliquer à l'extérieur et fermer ma forme. Maintenant que je suis, ma forme est là, je peux simplement utiliser cet outil de déplacement et simplement sélectionné, ou vous pouvez le sélectionner comme ceci. Il suffit donc de cliquer et de le faire glisser pour le sélectionner. Et maintenant, dans l'Inspecteur des propriétés, vous pouvez voir que nous avons exactement les mêmes paramètres que nous avons avec toutes nos autres formes de base. Mais maintenant, nous pouvons y accéder pour cette forme plus complexe. Donc, ce que nous pouvons faire est, par exemple, d'ajouter une couleur de remplissage. Utilisons cette couleur. On peut enlever la frontière. Nous pouvons, par exemple, inclure l'ombre et tout ce que je vous ai montré pour toutes ces formes de base. Mc Maintenant, nous avons cette forme plus complexe. Et parce que nous avons isolé cette partie de notre conception lorsque je survole, vous pouvez la voir et vous pouvez y accéder. Et si vous voulez changer, c'est de mettre double-cliquez sur votre forme. Il vous montrera tous vos points d'ancrage et vous pouvez ensuite cliquer et par exemple, changer cette forme pour être quelque chose comme ça. Je ne sais pas, peut-être que c'est quelque chose que tu cherches et que tu peux voir à quoi ça ressemble. Donc c'est votre outil de stylo en un mot. Et comme vous pouvez le voir, vous pouvez accéder à toutes ces formes de base, en particulier celle-ci. Et si vous vous souvenez de la vidéo précédente, vous pouvez le changer dans le nombre de coins. Vous pouvez changer le rayon de coin et vous pouvez changer ce rapport tirade elle pour accéder à toutes ces différentes formes. Mais si vous voulez quelque chose de complètement personnalisé, alors une utilisation vraiment recommandée parentale parce que comme vous l'avez vu, il n'y a vraiment pas de limite à ce que vous pouvez créer. Les utilisateurs utilisent cet outil de stylet pour créer, par exemple, des icônes à l'intérieur d'Adobe XD. Ils l'utilisent pour créer des illustrations dans des outils tels que l'illustrateur. Ils l'utilisent pour découper différentes formes dans Photoshop, par exemple. Donc, il n'y a vraiment aucune limite à votre imagination et vous pouvez faire ce que vous voulez avec le crayon. Dans la vidéo suivante, nous allons explorer la porte voisine. Alors je te verrai là-bas. 9. Outil texte: Dans cette vidéo, nous allons explorer l'outil de texte, et le voici, et le raccourci est t. Et avant de le faire, laissez-moi aller de l'avant et supprimer cette forme mentale juste pour que nous ayons un peu plus d'espace pour travailler. Et laissez-moi déplacer ceci ici, par exemple, juste pour que j'aie cet espace vide ici. Vous pouvez donc cliquer sur votre outil de texte. Et il existe deux façons d'inclure du texte dans Adobe XD. Tout d'abord, il y a des points, des textes et tout ce que nous écrivons ici. Donc, par exemple, c'est notre texte. Et quand vous cliquez à l'extérieur, il terminera cela. C' est donc notre texte ponctuel, et il y a aussi un autre texte que l'on appelle des textes de zone. Et pour inclure cela, vous devez sélectionner la zone dans laquelle vous voulez que votre texte apparaisse. Donc, disons que c'est notre domaine une fois que vous commencez à taper. C' est donc notre zone de texte. Et si nous continuons à taper, cela continuera ici. Et laissez-moi vous le montrer rapidement aussi. Donc, si je sélectionne le contrôle C, contrôle V, le contrôle V, le contrôle V. Et vous pouvez voir qu'il s'enroule dans cette zone parce que c'est notre zone de texte. Mais si je fais ça avec ce texte, et si un tas manque une barre d'espace, vous pouvez voir que ça va juste, droit, droit, droit, droit tout le chemin, d'accord. Et rien ne se passe vraiment. Donc, quel que soit votre domaine, vous pouvez pointer vos textes pour qu'ils soient là. Mais si vous utilisez simplement ce texte de pointeur, il va où vous le voulez. Donc, ce texte est vraiment utile pour, disons, les titres, le sol, disons H1, H2, H3, et ainsi de suite. Sous-titres et texte qui ne le fait pas, ou du moins enroule juste un peu. Bien que ce texte soit parfait pour les paragraphes et les grandes zones de texte, descriptions de votre produit, caractéristiques du produit et ainsi de suite. Donc, je vais, je vous recommande vraiment d'utiliser les textes comme Dat, surtout dans la conception UI et UX parce que ces deux outils sont vraiment aller de pair les uns avec les autres. Donc, je vous recommande vraiment de les vérifier et de les explorer par vous-même. Alors plongons dans tout ça ici. Vous pouvez donc modifier un grand nombre des propriétés ici dans l'inspecteur des propriétés pour le texte. Et les principaux sont que vous pouvez sélectionner la police elle-même. Donc, si vous décidez d'utiliser une famille de polices, par exemple , Open Science, qui est une police Google gratuite, et vous pouvez trouver gratuitement sur les polices Adobe également. J' ai donc choisi Open stands pour ça. Et laissez-moi choisir Open représente pour cela aussi, comme ça. Et maintenant vous pouvez voir, quand je clique, vous pouvez voir que c'est ouvert sens. Mais par exemple, je veux changer celui-ci pour être un peu plus grand. Alors choisissons 26, par exemple, appuyez sur Entrée. Et vous pouvez voir que maintenant le, il y a une différenciation entre ces deux. J' utiliserai aussi le gras pour celui-ci. Comme ça. Donc, en fonction de celui que vous utilisez, vous aurez différents poids ici. Pour certaines polices, vous avez 12, peut-être trois pour certaines polices comme celle-ci que vous voyez, vous en avez beaucoup de lumière. Tout le chemin vers le bas en gras, italique. Donc vous pouvez voir à quoi ça ressemble. Vous pouvez également combiner du texte et c'est vraiment à vous et à la hauteur de votre design. Mais je ne recommande généralement pas d'utiliser plus de deux familles de polices pour vos conceptions, car alors votre design semblait trop dispersé et trop différent l'un de l'autre. Ce que nous avons aussi ici, notre espacement de caractères. C' est donc l'espacement entre chacun des personnages. Et si je clique ici, et par exemple, tape-in, Non. Alors voyons. Peut-être que je peux écrire en 50. Vous pouvez voir que l'espacement entre chaque caractère est tout simplement plus différent. espacement des lignes est essentiellement l'espacement entre chacune de ces Alliance de textes. Donc c'est votre ligne. C' est votre ligne à, si je clique là et augmente cela et peut-être, voyons, peut-être que je peux taper 90 flux quelque chose. Vous pouvez voir comment ça marche. Et ce que c'est, c'est l'espacement des paragraphes. Donc, si je prends 50 par exemple, vous ne pouvez pas le voir parce que c'est le paragraphe avec seulement deux lignes de texte. Donc, je vais vraiment avoir plus de lignes de texte et ensuite il utilisera cet espacement entre chaque ligne de texte. Ce que nous avons ci-dessous, c'est des outils d'alignement. Donc, par exemple, disons que c'est notre texte d'en-tête. Donc H un, il est actuellement à gauche aligné et vous pouvez voir à quoi cela ressemble. Si je tape au centre, vous pouvez voir que rien ne change. Mais maintenant, une fois que je commence à taper, vous pouvez voir qu'il va du centre, de gauche et de droite. Mais si nous choisissons l'alignement à gauche, vous pouvez voir qu'il reste épinglé à gauche. Et aussi si nous choisissons bien aligné, vous pouvez voir qu'il va rester épinglé vers la droite. Comme ça. Enfin, laissez-moi revenir à ici et laissez-moi cliquer sur la touche Maj enfoncée et l'aligner ici. Ce que nous avons ici sont des textes de points et des textes de zone ont vu une panne. Explique-toi ça. Donc, c'est notre point x, c'est notre texte de zone, mais vous pouvez changer cela à tout moment. Donc, par exemple, je peux sélectionner cette zone, cliquer ici, et maintenant je l'ai convertie en textes de points. Donc c'est exactement la même chose que celle-ci et vice versa. Vous pouvez faire la même chose pour celui-ci. Il vous suffit d'étendre votre zone pour vos tags. Comme vous pouvez le voir, il se rétrécit et recadre à ces deux lignes de texte. Mais je peux évidemment étendre à n'importe où je veux entrer plus de texte. Donc c'est fondamentalement tout pour ça. Et dans la partie suivante, vous pouvez voir les majuscules. Donc, si je clique ici et que je clique en majuscules, il convertit tous mes caractères en majuscules ou minuscules, casse du titre. Donc la première lettre de chaque mot est un exposant de titre. Donc, vous ne pouvez pas vraiment le voir ici, mais permettez-moi d'ajouter un numéro à, par exemple. Et maintenant ajouté ici, vous pouvez voir qu'il va juste ici. On a un indice, donc ça va le mettre ici. Si nous sélectionnons l'aération et cliquez ici, vous pouvez voir que nous avons ceci sous-jacent. Et enfin, nous avons aussi franchi. Ainsi, vous pouvez voir que vous avez beaucoup d'options différentes. Ici, dans Adobe XD. n'y a pas de futur Rich, par exemple, comme les applications. Voyons le mot par exemple. Parce que Microsoft Word est conçu pour taper à partir du mot go, tandis qu'Adobe XD est conçu pour la conception de l'interface utilisateur et UX à partir du mot go. Par conséquent, vous avez beaucoup de ces options, mais elles ne sont pas vraiment riches en avenir, comme Word par exemple, ou Google Docs ou quelque chose comme ça. Ou Adobe a son propre logiciel pour l'impression. Donc, ils ne sont pas le futur bord comme ça. Mais vous pouvez obtenir beaucoup de ces options comme vous venez voir ci-dessous que nous avons toutes les choses habituelles comme nous le faisons dans l'inspecteur des propriétés. Donc nous avons l'apparence. Vous pouvez réduire ou augmenter l'obésité. Nous avons les modes de fusion que je vous ai montrés avec cette image. Nous avons la couleur de remplissage, qui est la couleur de remplissage de notre texte. Nous avons aussi la couleur de la bordure. Donc, changeons la couleur de remplissage à quelque chose d'un peu plus sombre afin qu'il différencie entre ces deux. Nous avons la couleur de l'eau afin que vous puissiez ajouter votre bordure si vous le souhaitez. Allons avec quelque chose d'extrême. Vous pouvez voir à quoi ça ressemble. Mais laisse-moi défaire ça. Et Jaime frontière. Vous avez l'ombre de sorte que vous pouvez ajouter votre ombre à vos textes sur disons, 55 et 20. Vous pouvez voir comment ça marche. Et enfin, nous avons le flou d'arrière-plan afin que vous puissiez utiliser leur fonctionnalité comme vous le pouvez dans n'importe lequel de ces autres outils. Donc c'est fondamentalement tout pour le texte. Et vous allez voir tout au long de ce cours comment nous allons utiliser le texte, Javier va l'adapter et comment nous allons l'utiliser dans, par exemple, certains d'entre eux. Nous allons donc l'utiliser dans les groupes Scroll et nous allons l'utiliser dans les piles et aussi vous montrer quelles sont les piles plus tard dans le cours. Et vous allez voir à quel point la fonctionnalité de mort est incroyable à utiliser dans Adobe XD. Dans la vidéo suivante, je vais courir à travers nos planches un peu plus et vous montrer des fonctionnalités supplémentaires qui sont des planches ont un ostéoderme. 10. Planches d'art: D' accord, alors maintenant nous allons passer par quelques fonctionnalités supplémentaires qui sont des cartes ont. Donc, comme je vous l'ai déjà montré, a est le mot clé pour dans les aéroports, vous pouvez également cliquer ici. Et pour ajouter un aéroport différent, vous pouvez cliquer ici. Maintenant, si je sélectionne mon outil et je vais cliquer ici pour le changer, par exemple, appelons-le juste exemple. Et si j'ai sélectionné, vous pouvez voir que nous avons différentes fonctionnalités ici. Ainsi, vous pouvez le faire pivoter pour être un paysage ou pour être horizontal. Vous pouvez changer sa taille. Donc disons 400 par 500. Ainsi, vous pouvez ajouter toutes ces fonctionnalités supplémentaires comme vous le pouvez lorsque vous cliquez sur la maison et aller à la taille personnalisée ici. Donc tu peux faire tout ça ici. Vous pouvez faire des récits réactifs dès que vous créez un aéroport. Ainsi, vous pouvez commencer à créer des designs réactifs à partir du mot go. Vous pouvez inclure le défilement, donc vertical ou aucun. Ou si je change ici, vous pouvez voir que cela me donne toujours le chatouillement du monde parce que j'ai créé ce tableau d'art dans ce rapport d'aspect. Donc celle-là qui est l'original. Et si je crée ceci jusqu'à ce que je ceci, alors il me donnera le défilement horizontal et cette capacité, la hauteur de la fenêtre est celle-ci. Donc, si vous vous souvenez des vidéos précédentes, si vous étendez ceci, comme je l'ai dit, c'est la ligne de faille et tout au-dessus du pli sera visible tout de suite tandis que les utilisateurs doivent faire défiler vers le bas pour voir le contenu qui est juste en dessous de cette ligne de faille. Donc, c'est fondamentalement votre hauteur de fenêtre. Si j'ai prolongé, vous pouvez voir que ça va, ça reste à 812. Mais comme vous pouvez le voir maintenant, nous avons cette ligne, qui est fondamentalement la ligne de faille pour le téléphone. Donc, disons que cela a l'écran de formulaire et les utilisateurs doivent faire défiler vers le bas afin de voir le quantum au-dessous de cette ligne de défaut. Donc, fondamentalement, les téléphones mobiles l'ont aussi. Ci-dessous, nous avons Phil et fondamentalement vous avez cette couleur de remplissage même que pour toutes ces autres formes. Donc, vous avez une couleur unie, vous avez un dégradé linéaire et vous aider gradient radial. Vous avez également le curseur d'opacité et vous pouvez choisir l' une de ces couleurs et inclure le code hexadécimal également. Ce qu'ils n'ont pas expliqué sur les couleurs, c'est ça. Vous pouvez donc ajouter des échantillons différents. Donc disons que j'aime vraiment cette couleur. Je peux cliquer dessus. Je peux cliquer ici et il l'ajoutera à ma nuance. Si je vais juste ici à mon panneau d'acides, vous pouvez voir qu'il n'est pas là, c'est juste dans mon panneau d'échantillons. Donc c'est, euh, par exemple, si vous voulez changer certains de ces objets séparément et que vous utilisez les mêmes couleurs, mais vous ne voulez pas les appliquer pour entendre. Donc, si je le veux, je peux simplement cliquer ici et cela s'appliquera là. Et si je clique avec le bouton droit de la souris, laissez-moi sélectionner tous mes objets. Cliquez ici. Et si, par exemple, je avec le bouton droit de la souris et je vais modifier et modifier la couleur ici, vous pouvez voir qu'elle se met à jour en temps réel. Mais si je clique ici et puis juste ici et que je change ma couleur, cela changera juste la couleur de cet objet seul. Enfin, ce que nous avons aussi ici, dans notre inspecteur immobilier d'aéroports, c'est la grille. Et je vais vous montrer la grille juste ici parce que cela représente la taille de base de la page Web. Donc, si je clique juste là, nous avons la mise en page et nous avons carré. Donc, sous la mise en page, vous ne voyez rien parce que je dois le sélectionner. Mais si je sélectionne mon carré, vous pouvez voir que nous avons tous ces carrés et ceux-ci sont super, surtout si vous utilisez des systèmes de grille. Ainsi, par exemple, un système de grille 8 ou un système de grille 16 points ou quelque chose comme ça, où vous avez réellement ces tailles carrées. Donc, si vous utilisez 8, vous utiliserez évidemment la taille de huit pour chacun de ces carrés. Mais si nous utilisons une mise en page, vous pouvez voir que nous avons maintenant la conception de la colonne. Ainsi, par exemple, nous avons 12 colonnes pour cette conception. Peut-être qu'on veut le changer à huit. Vous pouvez voir que maintenant nous avons huit colonnes. La largeur de la gouttière est essentiellement cet espacement entre chacune de vos colonnes. Et l'esprit calme est évidemment la largeur de chacune de ces colonnes. Maintenant, vous pouvez modifier toutes ces propriétés ici, et ce sont vos marges. Les marges sont donc ces espaces blancs à gauche et à droite. Donc, fondamentalement, cet espace entre les bords de votre rpart et votre disposition de grille elle-même, et vos colonnes elles-mêmes. Et vous pouvez aussi changer ça ici. Vous avez donc des marges différentes pour le haut, droite, le bas et la gauche. Donc, si vous voulez les changer tous, ici, donc à gauche et à droite, fondamentalement, vous pouvez le faire en sélectionnant simplement ceci et en choisissant 120, par exemple. Mais si Adobe XD ne peut pas le calculer seul, alors il va vous donner toutes ces propriétés différentes ici. Mais vous pouvez également faire est, par exemple, augmenter la largeur de la gouttière à relative 40. Et vous pouvez voir que maintenant nous avons beaucoup plus d'espace entre toutes nos colonnes. La largeur de la colonne est, voyons, 120, mais elle va abaisser la largeur de la gouttière à 18. Donc, vous devez vraiment jouer avec tous ces différents paramètres pour obtenir le résultat parfait que vous voulez. Et fondamentalement, c'est tout pour ce sont des planches. J' espère vraiment que vous voyez à quel point il est facile de travailler avec eux. Et une dernière chose que je n'ai pas mentionnée, c'est si c'est trop distrayant pour toi de travailler avec. Donc, vous pouvez voir que tous ces éléments sont maintenant accrochés à nos grilles vraiment bien. Ainsi, vous pouvez vraiment les compter et les positionner où vous voulez sur votre page. Donc, si cela est vraiment distrayant, vous pouvez sélectionner votre RPL. Vous pouvez cliquer ici et vous pouvez réduire l'opacité de votre grille à quelque chose comme celle-ci. Donc, il va toujours s'accrocher, comme vous pouvez le voir à toutes ces différentes positions. Mais maintenant, vous pouvez le voir beaucoup mieux. Vous pouvez également changer sa couleur si c'est quelque chose que vous voulez. Donc augmente juste un peu, changer la couleur en rouge et maintenant diminuer l'obésité tout le chemin à quelque chose comme ça afin que vous puissiez le voir un peu mieux. Vous pouvez donc vraiment jouer avec tous ces paramètres différents. Et vous pouvez aller dans, en profondeur pour trouver quelque chose qui va fonctionner pour vous et votre défaut général. 11. Guides: Permettez-moi maintenant de vous montrer une autre fonctionnalité. Nous facturons des guides. Et pour eux, je vais simplifier la mise en page de la grille de l'homme dit position ceci ici. Et les gars sont situés en haut de votre aéroport ainsi que sur la gauche de votre clavier. Donc, si vous passez la souris ici, vous pouvez voir que vous pouvez extruder un guide d'ici et d'ici. Disons donc que je veux inclure des guides en haut et en bas de mon image. Ainsi, vous pouvez simplement comment sont juste ici, puis cliquez et positionnez le guide et il se positionnera ici. Et parce que vous ne pouvez pas le faire à partir du bas de votre aéroport, vous devez le faire à partir du haut aussi. Vous pouvez donc le faire en haut, en bas, à gauche et à droite. Et pourquoi cela est utile si, par exemple, dans une partie de votre rpart, vos éléments de qualités de positionnement. Donc disons en haut à gauche, en haut à droite, peu importe. Vous pouvez positionner ces éléments pour les accrocher à une grille comme celle-ci. Et vous pouvez les positionner pour qu'ils soient là où vous voulez qu'ils soient. Et ils vont bien s'accrocher à vos guides. Donc, si vous voulez utiliser des guides, vous pouvez, si vous voulez utiliser la grille, vous pouvez le faire aussi. Et les guides sont également utiles. Par exemple, nous pouvons utiliser cette disposition de grille pour la mise en page verticale, mais nous n'avons rien pour le rythme horizontal de notre conception. Donc, pour ce faire, disons que nous voulons avoir un inconnu. Voyons voir 18 peut-être. Ou allons-y avec 60. Et nous voulons avoir ce rythme vertical partout. Donc nous voulons avoir 60 ici, 60 ici, 60 ici. Si vous ne voulez pas mesurer cet espacement entre chacun de vos éléments. Donc, comme ça, vous pouvez inclure différentes grilles à 60606060 juste pour garder ce rythme horizontal, si ce quelque chose que vous voulez, cela dépend vraiment de vous et de la façon dont vous aimez concevoir avec Adobe XD. Mais comme je l'ai dit, ces grilles sont vraiment utiles et pour les sortir de votre chemin et pour les enlever, il suffit de cliquer dessus et de les faire glisser à l'extérieur, fondamentalement de la même façon que vous les avez entrées. Ce sont donc vos grilles dans Adobe XD et ce sont vos guides dans Adobe XD également. Encore une chose. Si, par exemple, disons que je veux sécher ceci ici. Vous voulez copier ceci dans le Guide de ce, nos ports pour que le gamin Control C clique ici, appuyez sur Contrôle V. et laissez-moi réduire la taille de ma forme. Disons que je veux copier ce guide. Faites un clic droit Tu peux aller voir les guides, copier les gars. Cliquez ici, cliquez avec le bouton droit sur les guides, les guides basés sur les extrémités. Cela fonctionnera évidemment mieux si vous êtes, les aéroports sont exactement de la même taille. Donc, disons que vous utilisez, c'est la page d'accueil et peut-être que nous avons un blog sur les prix des services et ainsi de suite. Et toutes ces pages sont exactement les mêmes dimensions. Donc, ce guide, une fois que vous copiez et collez à la prochaine fois, il sera basé exactement au même endroit où il est juste ici. C' est donc vraiment utile si, par exemple, vous voulez aligner certaines choses à gauche, à droite, au centre de tout ce que vous voulez faire avec ces enfants. Cette option est extrêmement utile, N extrêmement puissant. 12. Répétitions: Nous allons maintenant creuser un peu plus profondément dans la grille de répétition parce que la fonction elle-même est vraiment importante et extrêmement puissante. Donc, cliquez ici et supprimez ceci. Et créons une mise en page rapide à partir d'ici. Donc deux ont tourné à gauche et à droite. J' utilise simplement ma barre d'espace et mon clic gauche de la souris. Donc, à l'image nucléée comme celle-ci, par exemple, je vais positionner au centre. Je vais enlever la frontière et juste la voir ici légalement. Ensuite, je vais frapper mon Tiki pour mon texte et cliquer sur quelque chose. Par exemple, comme Rider numéro un. Appelons ça comme ouvert dit, mais c'est encore 26. Utilisons quelque chose comme 80. Et je vais le positionner. Hollering peut changer la touche, et j'en aurai 20. Comme ça, touche le contrôle D une fois de plus. Navire 12, et j'utiliserai 14 pour celui-là. Au lieu d'audacieux, j'irai avec régulier. Donc, assurez-vous juste que nous sommes 20 partout au lieu du texte de point, nous allons utiliser des textes de zone et étendu aux bords de mon image comme ceci. Et je vais aussi aller de l'avant et utiliser mon plug-in. Donc, je vais utiliser le même plugin que je vous ai montré. Donc Lorem Ipsum, donc si vous voulez l'installer, cliquez ici, tapez lorem ipsum, l'installer, puis cliquez sur sentir, remplacer tout le texte. Je vais utiliser celui-ci, mais vous pouvez utiliser celui que vous voulez. Cliquez sur insérer du texte et il s'insérera ici. Prenons, par exemple, trois lignes de texte comme ceci. Et vous pouvez également étendre tout cela vers le bas, puis réduire la taille de votre zone pour vos textes. Et évidemment, nous allons changer la couleur afin que vous puissiez utiliser cette couleur juste pour qu'elle soit un peu plus légère. Et au lieu de régulier, vous pouvez également utiliser la lumière si c'est quelque chose que vous voulez et si cela vous plaît. Maintenant, pour les images, je n'aime pas que ça soit comme ça. Donc peut-être que je peux en utiliser dix si c'est trop, peut-être un cinq juste pour augmenter un rayon de coin. Maintenant, pour utiliser la grille de répétition, sélectionnez simplement tous vos éléments, appuyez sur la grille de répétition. Et ce que vous pouvez faire est simplement étendre cela vers le bas et vous pouvez voir quel point la grille de répétition est puissante et importante. Maintenant, pour vous montrer que encore plus, j'ai quelques images ici. Donc je vais le glisser et le déposer à l'intérieur de mon dessin. Il suffit donc de le glisser et de le déposer sur le premier. Donc juste le premier et lâche-toi. Et vous pouvez voir comment cela fonctionne comme si c'est extrêmement facile, extrêmement puissant à faire. Donc, ce que je peux aussi faire est de créer mon document texte, et je peux simplement utiliser un document texte, qui n'est qu'un document de base. Vous pouvez voir que j'utilise le bloc-notes ici. Donc, au lieu de Ryder sur un ou deux pour écrire ou trois, peut-être qu'on peut appeler ça une anomalie, James mai, Tyler. Et par exemple, appelons celui-ci celui qui choisit la morale ou quoi que ce soit. Et tu peux fermer ça. De même, glisser-déposer ce nom de document sur le texte lui-même. Et vous pouvez voir qu'il se remplit de texte. C' est donc une chose extrêmement importante et puissante à faire si nous voulons obtenir des données riches dans vos conceptions. Donc, vous pouvez vraiment jouer avec la façon dont tout ce texte va ressembler. Évidemment, vous pouvez faire la même chose pour tout ça. Donc, au lieu de juste ce simple vieux lorem ipsum de base, disons que vous pouvez inclure des textes réels comme par exemple, vous avez l'homme un vieux portfolio, ou dans des informations réelles sur toutes ces personnes. Vous pouvez copier et coller ces informations dans pour créer ce riche et des designs. Encore une fois, nous répétons les grilles. Ce que nous pouvons faire, c'est si nous changeons le premier. Donc, disons que nous voulons ajouter une ombre. Vous pouvez voir qu'il va ajouter le même château à tous ces autres, solide, disons 5515. Et si je clique dehors, vous pouvez voir qu'il coupe juste ici, mais je l'étend jusqu'ici. Maintenant, nous avons ces belles dans une grande ombre. Donc, nous pouvons aussi faire est de changer la couleur. Donc, disons que cliquez ici, cliquez sur ma nuance. Vous pouvez voir qu'il met à jour la zone en temps réel. Et c'est fondamentalement tout. Tout ce que vous voulez faire avec votre grille de répétition. N' oubliez pas que vous modifiez le premier. Vous ne pouvez pas ajouter le second. Donc, si je veux repositionner cette image, je peux simplement double-cliquer et repositionner ici. Je peux aussi le faire avec cette première image, solide C ici. Et cette dernière image peut être quelque part par ici. Ainsi, vous pouvez voir que vous pouvez modifier tous ces détails indépendamment. Enfin, si vous voulez augmenter la taille entre vos éléments dans la prise en main européenne, simplement plus rapide répétition grille, survol et puis vous pouvez étendre où tous ces éléments et aller. Et par exemple, si vous voulez prévisualiser à quoi cette application va ressembler, vous pouvez cliquer ici où il est dit aperçu du bureau. Et vous pouvez également faire Mobile Preview via un câble USB. Si vous allez de l'avant et installez l'application Adobe XD sur votre iPhone ou votre appareil Android. Vous pouvez le faire aussi bien juste pour voir si vous êtes, par exemple, conception pour l'iPhone dix et vous avez iPhone dix dans votre main et vice versa avec toutes ces différentes tailles Android. Ainsi, vous pouvez faire un aperçu en direct et voir directement à quoi cela va ressembler une fois qu'il est codé et terminé à l'intérieur de votre appareil mobile. Mais si vous voulez juste l'afficher pour le web, vous pouvez cliquer ici. Cette fenêtre supplémentaire va apparaître. Et quand je fais défiler vers le bas, vous pouvez voir à quoi ça ressemble. Mais comme vous pouvez le voir, parce que nous devons activer cette zone de défilement. Donc, si je clique juste là, utiliser, vous pouvez voir que nous avons des whens de position fixe rampant, mais je dois étendre ma carte afin de pouvoir faire défiler. Donc, si je continue à l'étendre, vous pouvez voir que cette grille de répétition nous montre une lecture, mais je veux juste voir ces trois. Alors 123. Et vous pouvez évidemment en avoir autant que vous voulez, mais je vais m'étendre jusqu'ici. Et maintenant, si nous cliquons sur mon aperçu, je peux faire défiler vers le bas pour voir ce que je veux voir. Donc vous pouvez voir que j'ai étendu mon aéroport jusqu'ici et c'est ma zone de défilement. Si nous voulons l'étendre jusqu'au bas pour ajouter d'autres éléments supplémentaires. Et puis je pourrai faire défiler plus loin et voir toutes ces informations supplémentaires. Donc c'est fondamentalement tout pour votre grille de répétition. Enfin, si vous voulez dissocier la grille, vous pouvez le faire aussi. Et revenez à un panneau Calques. Vous pouvez voir que maintenant nous avons trois groupes. Donc c'est le premier groupe, c'est le second, c'est le troisième. Et j'aime les commander comme ça, donc je n'aime pas l'inverse. Et à l'intérieur de votre groupe, vous pouvez voir que vous avez tous ces différents éléments et toutes ces différentes choses de conception que vous avez incluses dans vos conceptions. C' est donc très facile de travailler avec. C'est vraiment amusant. Et une fois que vous vous y habituez, il sera extrêmement utile d'avoir une fonction de grille distribuée dans votre processus de conception. 13. Aperçu du processus de conception: Maintenant que vous êtes familier avec Adobe XD, maintenant que vous savez ce que les outils peuvent faire, laissez-moi vous présenter rapidement le projet sur lequel nous allons travailler pour induire des scores à partir desquels vous allez apprendre toutes ces techniques avancées qu'Adobe XD a à offrir. Tout d'abord, nous allons commencer par le dossier de conception. Et je recommande toujours à mes étudiants et toutes les personnes qui me demandent par où commencer le projet. C' est toujours le dossier de conception. Parce qu'à partir du dossier de conception, vous pouvez toujours comprendre ce que le client veut, quel est le budget, quel est le calendrier. Tu fais la refonte ? Vous faites la révision complète ? Est-ce que vous faites le travail à partir de zéro, ce que vous faites réellement sur ce projet. Je recommande donc toujours aux étudiants et aux personnes qui sont intéressantes dans le design de commencer par le dossier de design, parce que, à mon avis, c'est le fondement de tout projet. Et le bref de conception peut fondamentalement faire ou casser le projet. Parce que si vous ne commencez pas avec le brief de design de haute qualité, que vous devez faire vous-même, alors l'ensemble du projet peut s'effondrer immédiatement, essentiellement parce que le client peut alors demander quelques changements qui ont été pas convenu dans le dossier de conception. Ils peuvent demander des choses que vous ne connaissez pas. Donc, vous devez augmenter d'autres personnes pour vous aider avec ça parce que vous ne savez pas comment faire face à ces problèmes et vous ne savez pas comment les résoudre. Donc, le bref de conception, comme je l'ai dit, est essentiel pour tout projet de conception. Ensuite, nous allons passer aux fils de papier. Maintenant, vous pouvez faire des filaires directement dans Adobe XD, ce que nous allons faire aussi. Mais j'aime vraiment commencer avec le filaire de papier parce qu'il me donne cette liberté d'utiliser simplement un stylo et du papier. Et tout le monde a du stylo et du papier dans sa maison. Donc, fondamentalement, vous pouvez commencer avec juste stylo et papier et vous pouvez créer ces filaires à partir de zéro. Après le papier de filaires vient le processus de filature dans Adobe XD. Fondamentalement, nous allons prendre ces trames filaires et les mettre à l'intérieur d'Adobe XD. Ensuite, nous allons commencer par recréer dans Adobe XD ce qui se retire sur papier. Encore une fois, si vous pensez que cette étape est inutile, je vous exhorte à regarder l'ensemble du processus et juste à voir la partie réfléchie derrière les fils de papier. Parce que comme je l'ai dit, il est beaucoup plus facile de créer ces filaires sur un seul morceau de papier. Vous pouvez facilement utiliser n'importe quelle interdiction, n'importe quel papier que vous voulez, ou vous pourriez avoir des bords, obtenir quelques idées de votre tête vers le bas sur un morceau de papier. Et une fois que vous êtes dans Adobe XD, alors vous pouvez, par exemple, rendre les portes, les trames un peu plus complètes, juste un peu plus polies et finies. Ensuite, vous pouvez présenter ces filaires au client, ce que je recommande évidemment car Adobe XD a ces excellentes options de partage et fonctionnalités. Ainsi, votre client peut laisser des commentaires directement sur ces filaires avant même de passer au processus de conception. Vouloir entre les deux, c'est que nous allons faire l'architecture du site Web. Nous allons juste énumérer quelques pages de base et nous allons lier et voir vérifié ces pages sont en cours sur notre site Web. Donc, en gros, si les gens cliquent sur la page d'accueil, il y en a sur la page d'accueil. Où peuvent-ils aller à partir de là et de là s'ils cliquent sur des pages supplémentaires, par exemple, sur notre page, où est-ce que cette page les emmène ? Où doivent-ils cliquer pour revenir à la page d'accueil, pour revenir aux pages du produit, etc. C' est là que l'architecture du site Web est importante et nous allons le faire entre tous ces filaires. Donc, fondamentalement, nous allons finir les fils de papier. Nous allons numériser et apporter le papier dans Adobe XD. Si vous n'avez pas de scanner, c'est aussi très bien. Vous pouvez simplement utiliser votre téléphone pour prendre des photos si vous voulez avoir ces filaires à l'intérieur d'Adobe XD, ce n'est pas nécessaire car vous dessinez ces filaires sur un morceau de papier. Vous pouvez donc toujours jeter un coup d'œil à ce morceau de papier et voir où se trouvent ces éléments, où vous devez apporter quelques changements, comment vous avez tout structuré. Parce que rappelez-vous, vous pouvez faire ces filaires sur, disons lundi, puis lundi prochain, EUR démarrer le projet dans Adobe XD. Il y a donc une chance et une possibilité que vous oubliiez certaines choses de ce meilleur lundi. C' est pourquoi il est important de les avoir sous la main. Je les scannerai et les introduirai dans Adobe XD afin que nous puissions ensemble les jeter un coup d'œil et voir ce que nous avons esquissé sur une feuille de papier et ce que nous voulons apporter ensuite dans Adobe XD. Donc, une fois que nous avons terminé le filtrage papier, une fois que nous avons terminé l'architecture du site Web, une fois que nous avons terminé les filaires dans Adobe XD et que le projet soit plus complet. Ensuite, nous allons passer aux étapes de conception. À l'intérieur des étapes de conception, nous allons inclure la couleur. Nous allons passer du texte Lorem ipsum à un texte réaliste que le rédacteur de cette société nous a apporté. Et s'ils n'ont pas le rédacteur en main, vous pouvez être le rédacteur. Vous pouvez écrire une copie pour eux. Si vous êtes un éditeur qualifié et non qualifié, sinon, vous pouvez l'externaliser à quelqu'un d'autre. Donc quelqu'un d'autre peut droite, pour copier pour le site pour vous et vous pouvez les battre. Sinon, vous pouvez simplement laisser le lorem ipsum oser. Et avec la fonctionnalité de co-édition Adobe XD, vous pouvez partager le lien d'édition de code, puis le client peut apporter le texte à l'intérieur. Ou une fois le texte terminé en interne, ils peuvent vous envoyer les textes. Nous sommes juste un fichier texte, PDF, email, tout ce qu'ils veulent. Et vous pouvez ensuite apporter ce texte dans le fichier Adobe XD et le mettre à l'intérieur de votre conception. Une fois que nous commencerons avec la conception, une fois que nous aurons apporté tous ces détails, une fois que nous commencerons à polir les choses ici et là, nous commencerons également avec l'animation, les microtransactions, les grandes transitions, etc. Donc l'animation est vraiment la caractéristique clé d'Adobe XD de tout projet moderne. Parce que si vous partagez simplement une image statique avec votre client, il se peut qu' il ne comprenne pas où ces pages mènent. Si je clique ici, que va-t-il se passer si je clique là, où va m'emmener ? Donc, les animations sont vraiment un facteur clé et important d'Adobe XD, ainsi qu'avec le processus UI et UX d'aujourd'hui. Comme Adobe XD intègre toutes ces fonctionnalités exceptionnelles, nous allons les explorer ensemble. Nous allons lier différentes pages. Nous allons créer des composants. Nous allons créer les états du composant. Une fois que les gens cliqueront ici, une fois que les gens y ont plané, une fois que les gens y ont plané, que va-t-il se passer ? Donc je vais vous montrer tout ça une fois que nous aurons commencé ce projet. Enfin, on va finir avec le client. Une fois que nous aurons l'objectif final, alors nous allons empaqueter tous ces fichiers, tous ces fichiers de telle sorte qu'il sera facile pour les développeurs d'y accéder, sera facile pour les développeurs de les utiliser plus tard dans le code. Et enfin, il sera facile et facile pour le client vérifier rapidement et de voir s'il a des révisions supplémentaires. S' ils ont des demandes ou des modifications supplémentaires , ils pourraient avoir pour ce projet particulier. C' est pourquoi la structure des fichiers est vraiment clé. Vers la fin du projet, je vais vous guider à travers toutes ces étapes. Et j'espère vraiment que vous allez aimer et apprécier le discours. Et ce qui est encore plus important que vous allez apprendre quelque chose que vous ne saviez pas avant. Ou si vous l'avez fait, vous avez un peu augmenté vos compétences et vos connaissances en design tout au long de ce cours. Donc j'ai vraiment hâte de te voir dans ce cours. Et comme je l'ai dit, la première étape de ce cours est juste de vous montrer le dossier de conception. Je vais partager avec vous quelques modèles que vous pouvez utiliser pour votre propre mémoire de conception et va être beaucoup plus facile pour vous de le faire avec vos propres clients. Alors je te verrai là-bas. 14. Notre dossier de conception: Dans cette vidéo, nous allons passer à l'endroit où nous nous sommes arrêtés dans la précédente. Et je vais parler du dossier de conception. Je vais également vous montrer ce dossier de conception pour ce projet particulier et ce discours. Mais vous allez pouvoir utiliser ce modèle pour vos propres projets petits et grands, parce que je vous donne un modèle vide, vide comme celui-ci pour le remplir avec vos propres informations et l'utiliser pour des projets futurs. Donc, pour commencer ce que nous avons ici, comme vous pouvez le voir dans Adobe XD, nos brefs essentiels et nos brefs essentiels sont essentiellement ce qu'il dit. C' est ce que vous devez ressentir pour ce brief de design. Et notre mémoire est essentiellement notre mémoire de conception pour ce projet. Et j'ai laissé des informations exprès. Je vais vous montrer juste parce que vous pouvez comprendre ce que nous devons utiliser dans ce projet. Alors laissez-moi zoomer sur les essentiels brèves sont un peu plus. Donc, ce que nous avons ici, c'est le profil de l'entreprise et j'ai déjà écrit toutes ces informations que vous pouvez lire en détail. Mais fondamentalement, ce dont nous avons besoin dans ce profil d'entreprise, c'est ce qu'est l'entreprise, dans quelle industrie s'agit-il ? Quels produits dispose-t-il de services ? Et quelqu'un proposition de vente unique, qui est fondamentalement dégradant caractéristique importante clé que vous allez utiliser pour concevoir votre site Web et votre design autour. Qu' est-ce qui les différencie de leur concurrence ? Vous allez suivre cela une fois que vous commencerez à concevoir intervenants clés et des personnes avec lesquelles vous traitez au sein de cette organisation. Par exemple, si c'est le cas, si c'est une petite entreprise, vous allez généralement traiter avec le fondateur, avec le PDG. Si c'est une grande entreprise, alors vous allez généralement parler avec ou même un directeur artistique, par exemple, si vous avez le département de conception et ainsi de suite, une liste de concurrents directs et indirects afin que vous peut puiser votre inspiration et voir ce que font les autres acteurs de cette industrie. Donc, vous pouvez savoir ce qui suit, ce qu'il faut éviter, mais fondamentalement ne copiez pas. Vous allez utiliser une proposition de vente unique pour une dette, mais vous allez simplement vous informer sur la concurrence, ce qu'ils font, ce qu'ils ne font pas. Vous pouvez donc savoir ce que vous devez suivre et ce qui n'est pas. Ci-dessous que nous avons projet ou réel. Donc, fondamentalement, c'est là que vous allez créer une description détaillée du projet, a autant de contexte que possible. Essayez de demander à votre client ce qu'il fait, ce qu' il fait et qu'est-ce que vous construisez quelque chose de nouveau ? Conception audio de quelque chose à partir de zéro ? Ou redessines-tu quelque chose qu'ils ont déjà ? Ceci est évidemment important parce que si vous avez affaire à quelque chose à partir de zéro, alors vous avez une beaucoup plus grande liberté d'explorer pour développer votre concept, vos idées dans ce produit. Mais s'ils ont déjà quelque chose, et alors vous devez suivre quelques lignes directrices et quelques principes clés qu'ils ont déjà en place. Mais vous devez repenser en plus de la dette, ce qui est évidemment beaucoup plus difficile, et les soins dentaires commencent à partir de zéro. Ensuite, nous avons le WIP, essayer d'identifier les problèmes qu'ils ont. Lorsque vous comprenez les problèmes, vous trouverez la solution plus facilement, trier quels sont leurs problèmes ? Évidemment, ils veulent redessiner ou ils veulent compléter le design à partir de zéro, mais quels problèmes vous résolvez avec vos conceptions. Donc, fondamentalement, le design est tout au sujet de la résolution des problèmes. L' expérience utilisateur permet de résoudre les problèmes que les utilisateurs peuvent rencontrer une fois qu'ils sont sur le site Web, une fois qu'ils sont dans l'application. Quels problèmes cette conception résolve-t-elle ? n'y a aucun point de design juste être joli. Il a besoin de résoudre des problèmes concrets. C' est pourquoi vous devez vous demander, à vous-même et à vos clients, quels problèmes vous êtes confrontés. C' est un taux de rebond ? C' est une navigation désordonnée ? Est-ce que les gens quittent votre site Web trop tôt ? Est-ce un design réactif ? Donc, tous ces problèmes sont différents que vous essayez de résoudre avec votre conception. Donc, une fois de plus, il a l'air joli, besoin d'être joli et convaincant à l'œil, mais vous devez résoudre certains problèmes. Je vais le partager une fois que nous passerons au dossier de design artistique. Ensuite, nous avons des buts et des objectifs. Donc les objectifs reflètent le but d'origine de votre projet et l'exemple d'objectif est le client veut plus de trafic sur leurs sites Web, dont j'ai parlé juste avant. Objectif Exemple, est augmenté le nombre de séances hebdomadaires de 20% par date spécifique de la dette. Ainsi, vous pouvez voir en quoi les buts et les objectifs sont différents, mais ils sont essentiels à ce projet et à ce document de conception. En établissant des buts et des objectifs dès le départ, vous êtes non seulement apte à prendre des décisions plus éclairées sur votre conception, mais vous êtes également mieux armé pour prouver votre valeur et votre valeur pour le client en dehors de l'esthétique visuelle de son site Web, dit fondamentalement tout. buts et les objectifs sont extrêmement importants et vous devez savoir quels buts vous devez suivre, quels objectifs vous devez suivre pour livrer à ce client. Ensuite, nous avons un public cible. Alors, pour qui êtes-vous en train de concevoir ? Parce que comme vous le savez peut-être, les gens sont différents, mais ce sont les mêmes Daron, une créature d'habitude. Donc fondamentalement différentes personnes dans différents groupes d'âge, les hommes et les femmes. Des gens des Etats-Unis, des Européens, des Indes, des Chinois. Ils sont tous fondamentalement identiques, mais ils sont différents. Vous devez donc faire en sorte que ces différenciations fonctionnent pour vous et pour ce projet particulier. Donc, disons qu'ils sont âgés de 20 à 35 ans, par exemple, ces gens n'aiment pas les mêmes choses que les gens du groupe d'âge de 45 à 65 ans pourraient aimer. Aussi les jeunes gens semblables à utiliser la technologie plus de personnes âgées ne le font pas. Les jeunes aiment suivre les tendances. Les personnes âgées ne le font pas. Alors tu prends ma photo ici. Suivant. Le genre, les hommes et les femmes n'aiment pas les mêmes choses habituellement. Donc, vous devez concevoir avec cela à l'esprit. Si vous concevez juste pour les femmes, vous devrez peut-être faire certaines couleurs. Vous pourriez avoir besoin d'utiliser une certaine topographie parce qu'une fois de plus, quel est votre objectif ? Quel est votre objectif ? Vous devez donc les faire fonctionner pour vous et pour ces groupes d'âge et de sexe spécifiques. Pays de résonance. Évidemment, c'est important parce que différents pays ont des coutumes différentes, des personnes différentes aiment des choses différentes et ainsi de suite. Nous devons donc concevoir pour la dette à l'esprit. Vous pourriez avoir besoin, vous pourriez vivre en Inde par exemple, mais les gens aux États-Unis peuvent aimer des choses différentes que dans votre pays. Donc tu dois garder ça à l'esprit. travail, où travaillent-ils au travail dans les grandes organisations, font le travail en petites équipes et ainsi de suite. habitudes de consommation des médias. Ceci est évidemment important pour le design, mais plus important pour les réseaux sociaux et les équipes marketing. Mais vous pourriez aussi concevoir avec cela à l'esprit. Donc, si les gens aiment les vidéos plus, peut-être que vous pouvez inclure des vidéos dans votre conception parce que évidemment ils aimaient les vidéos plus s'ils n'aiment pas lire, mais comme les vidéos plus simplement utiliser ce texte converti en vidéo. Vous n'allez pas le faire évidemment, mais les gens de l'équipe et du client ont fait et le font pour vous. Si vous êtes doué avec le montage vidéo, alors très bien. Mais dans cet exemple, les gens n'aiment pas lire. Ils aiment regarder des vidéos, alors donnez-leur ce qu'ils veulent. En gros. Enfin, nous avons David habitudes quotidiennes telles que les voyages, manger notre socialisation et ainsi de suite. qui est évidemment important lorsque les gens vont visiter ce site, quand ils vont l'utiliser, sont les créatures de l'habitude et je vais l'utiliser sur une base quotidienne, par exemple, dans le soir, autour minuit, 12h, 12h. Donc, vous devez essentiellement interviewé ces gens et découvrir leurs habitudes quotidiennes. dessous de cela, nous avons conçu des exigences. Donc, c'est évidemment pour les développeurs, ce que les développeurs demandent de vous, ce qu'ils veulent de vous. Donc dimension acide, résolution d'erreur, pour quelle résolution vous concevez. S' il s'agit d'un site Web pour lequel la résolution et les résolutions. Si vous concevez pour les performances des tablettes pour quelles formes, quelles tailles. Évidemment, vous allez poser toutes ces questions aux développeurs. Lorsque les développeurs reviennent vers vous, alors vous pouvez savoir pour commencer à concevoir, ne jamais le faire avant. Vous demandez aux développeurs parce que vous avez besoin de savoir quelles tailles ils vont prendre en charge plus tard dans Cote, Quand je demande aux clients cela a juste me regarder aveuglément et puis je le décompose fondamentalement pour eux. Et je leur ai demandé, est-ce que vos utilisateurs vont utiliser ce produit sur de grands appareils, par exemple, les téléviseurs intelligents et disons 15 ordinateurs de bureau. Ils ont dit non. Ok, alors est-ce qu'il va l'utiliser sur notre écran Full HD par exemple ? Donc 1920 d'ici 1080 et ils disent oui, ok, ils vont utiliser ce produit sur un ordinateur portable ? Oui. Vont-ils l'utiliser sur une tablette peut-être, mais pas une grande quantité. Ils vont l'utiliser sur un téléphone ? Oui. Donc maintenant, vous avez quatre tailles et avez-vous pu concevoir pour lequel vous n'avez pas auparavant n. Vous avez fait cela avant même d'activer Adobe X, Z et commencer à concevoir. Donc c'est vraiment, vraiment important à comprendre avant d'y aller. En outre, pour les formats de fichiers, vous devez savoir quels formats de fichiers les développeurs vont prendre en charge car différents formats de fichiers conviennent à différentes personnes et différents développeurs travaillent de différentes manières. Donc, fondamentalement, vous devez savoir ce qu'ils vont utiliser, ce qu'ils ne vont pas utiliser pour comprendre comment vous allez structurer votre travail. Parce que si par exemple, ils peuvent fonctionner avec des icônes B et G et ils envoient des Jacobs européens, Let's it, vous ne pouvez plus changer les icônes PNG parce que fondamentalement ce sont juste des images JPEG sans arrière-plan. Donc, vous pourriez vouloir leur parler de travailler dans SVG parce que SVG ne perd aucune qualité, il est beaucoup plus facile à exporter et il est beaucoup plus facile de travailler avec les guillemets. Donc toutes ces choses que vous devez leur demander avant d'y aller. Nous avons des éléments d'image à inclure, palettes de couleurs et des documents de copie associés. Alors. Avoir toutes ces choses, ou n'ont-ils pas toutes ces choses ? Parce que la dette signifie essentiellement plus de travail pour vous, et cela signifie essentiellement une augmentation du prix pour eux. Donc, vous devez poser toutes ces questions avant même d'y aller. Et avant de structurer le prix, parlant du prix, nous avions le budget et le calendrier. Donc, en gros, à quoi ressemble leur budget, comment ils l'ont brisé, comment vous le ventilez ? Je les charge tous à l'avance, 50% maintenant, 50% à la fin, est-ce que vous chargez par étapes et ainsi de suite, et aussi planifier le projet. Combien de temps ce projet va durer ? Laissez-moi vous montrer rapidement notre mémoire. Nous avons donc une nouvelle conception de site web de la banque. C' est le nom de la société. C' est une entreprise fictive, mais je fonde toute cette expérience de projet de l'expérience précédente parce que j'ai travaillé pour de vraies banques avant, pour leurs conceptions de sites web et d'applications. Donc ici, nous avons une nouvelle bande Corporation est le nom du client. Le 6 juin 2021 est la date à laquelle ce projet doit être terminé. Profil de l'entreprise sel. Ne perdons pas de temps que vous pouvez sauter à l'intérieur de ce fichier parce que je vous donne ce fichier et vous pouvez tout lire à ce sujet. Mais fondamentalement, l'essentiel de celui-ci est osé Bank et ils ont une grande quantité de clients qui sont des gens plus jeunes. Et ils veulent concentrer tous leurs efforts sur les jeunes. Ils ne vont pas refuser les personnes âgées, mais les jeunes et les milléniaux sont surtout leur public cible parce qu'ils ont découvert que ces gens dépensent la plus grande partie de l'argent à l'avance, ne se souciaient pas des coûts d'organisation leurs comptes et ainsi de suite. Il est donc beaucoup plus facile de vendre à la hausse différents services dans les dettes. Pourquoi ont aimé ces gens tellement aussi jour comme les jeunes parce qu'ils sont désireux de changer les technologies. Ils sont essentiels pour essayer de nouvelles choses, la réalité virtuelle dans la réalité et ainsi de suite. Nous avons donc un aperçu du projet ici. Ils veulent redessiner pour le site actuel. Et ils veulent rendre cette conception plus centrée sur l'utilisateur, plus ciblée sur l'utilisateur, et rendre l'expérience utilisateur de l'ensemble du design plus accessible à ces jeunes gens. Parce que ce qu'ils ont en ce moment est vraiment vieux, vraiment démodé. Voyons l'Inde sur quelque chose de nouveau, quelque chose de frais pour attirer ces jeunes gens sur la plate-forme. Nous avons donc des buts et des objectifs. Donc mêler ou ce projet est d'attirer plus d'utilisateurs sur le site Web et en ayant l'expérience utilisateur de taux, les faire rester là en tant que client. Et le but de ce projet est d'attirer les gens avec une grande offre, les faire dictum loin de la concurrence. Et une fois qu'ils deviennent client, les faire rester un en leur offrant d'autres services et offres. Donc, en bref, si vous venez sur ce site Web en ayant la grande expérience utilisateur, excellent design, si vous êtes dans leur public cible, si des gens millénaires, plus âgés , plus jeunes, alors ils vont vous attirer, vous inscrire à leurs services, puis vous vendre en arrière-plan, des services supplémentaires, certains que vous pourriez signer pour un service spécifique. Mais une fois que vous êtes connecté, ils vont vous attirer en vous offrant différents services que vous pouvez utiliser. Cette banque et sur ce site. L' objectif est donc de réduire le taux de rebond de 40%. Et ils rebondissent taux est si élevé parce que leur site Web. Est si vieux, donc ils veulent diminuer la dette dans les six premiers mois une fois et psi va comme objectif supplémentaire est convertir 50% plus de personnes dans ce temps en combinaison avec la stratégie marketing qu'ils vont lancer avec cette site. Donc, en bref, une fois le site mis en ligne, l'équipe marketing va publier tout le matériel marketing. Ils vont attirer plus de gens sur le site en même temps décider va en direct. Ils veulent réduire ce taux de rebond de limite de 40% en ayant la grande expérience utilisateur, un excellent design. Et ils veulent aussi convertir 15% de personnes de plus à partir de ce nouveau trafic qu'ils ont. Donc ils pourraient rendre Instagram fou, ils pourraient diriger Facebook, je fais deux lits et ainsi de suite. Pour attirer d'autres personnes pour les retirer d'autres banques, pour oser les banques et pour que les incitent à vendre toutes ces choses supplémentaires à terme, nous avons ciblé les jeunes de 20 à 45 ans et le sexe, 40 % de femmes, 60 % d'hommes. Donc nous pourrions vouloir expérimenter avec quelques couleurs ici et ils sont résonance sérielle. Donc, en gros, nous avons Belgrade et Londres parce que, comme je l'ai dit c'est un projet fictif, mais j'ai travaillé dans le passé sur des projets semblables à celui-ci. Et nous avons aussi la Serbie et le Royaume-Uni comme moi, ce qui signifie des données démographiques clés. Fondamentalement, vous devrez peut-être adapter cela à vos propres préférences personnelles. Donc, par exemple, si vous êtes des États-Unis, comme les États-Unis et par exemple, disons que le Mexique, si vous êtes originaire de l'Inde, faites la même chose, mais pour vos propres données démographiques personnelles, juste pour explorer d'autres choses dans des fonctionnalités qui vous pouvez utiliser et faire avec ce projet. travail, donc surtout des emplois à faible revenu, mais aussi des propriétaires de petites entreprises, en particulier des pigistes. Et les pigistes, sont la démographie clé pour un avenir pour cette entreprise, habitudes de consommation des médias, comme vous pouvez le voir là-bas 60% sur Instagram, 20% sur Youtube, Dan présent sur Twitter, et 10% sur tictock ainsi. Les habitudes quotidiennes ou la consommation des médias sociaux, traiter les déplacements, manger sainement, faire de l'exercice dans l'après-midi. Ci-dessous, nous avons conçu les exigences. C' est de cela que je parlais avant. Donc, nous avons la journée de démence acide veulent avoir essentiellement bureau, petit bureau, tablette et formulaires à ces quatre tailles. Je vais aussi vous montrer une fois que nous concevons les vieux, comment vous pouvez adapter la taille du téléphone à l'iPhone. Donc, fondamentalement, avoir une application iPhone qu'ils vont développer plus tard dans un React, ils vont utiliser React même comme mon client réel l'a fait avant. Parce que React est vraiment facile d'adapter toutes ces tailles pour différents appareils. formats de fichiers ou Adobe XD comme fichier principal du projet, SVG 40 fait écho au PNG et au JPEG pour les images parce que nous allons avoir quelques images sans l'arrière-plan dessus. Nous pourrions donc les exporter en format PNG, sorte qu'il est plus facile pour les développeurs de les utiliser plus tard. Et nous avons PDF pour le dossier de conception que nous examinons maintenant et la documentation supplémentaire du projet. Donc fondamentalement, tout ce que je vous lis ici, c'est que vous pouvez collecter, combiner et créer, puis exporter en PDF, envoyer à votre client. Et puis ils peuvent aller au-delà de cette fin, fondamentalement d'accord avec vous ou en désaccord avec vous. S' ils ne sont pas d'accord, alors. Inclure les changements de dose dont ils ont besoin. Envoyez-les à nouveau jusqu'à ce que vous arriviez à l'accord complet avant de signer le contrat et de commencer à projeter ci-dessous qui nécessitent appeler la palette. Donc D pourvu que ces images OnRequest soient fournies sur demande. Je vais parler d'images dans une vidéo séparée, associer une copie de documents, donc ils l'ont fourni onRequest à leur rédacteur. Donc, nous n'allons pas simplement utiliser lorem ipsum. Je vais vous montrer beaucoup de mips, certains dans et processus de filature du discours. Mais plus tard, à l'intérieur du processus de conception du discours. Et va vraiment vous montrer comment la copie réelle va regarder à l'intérieur du budget et du calendrier de conception. Donc, le budget total est de 15 mille 5K $ avant le début du projet tellement vous êtes réellement d'accord sur toutes ces conditions. Et puis vous facturez 5K. 5k quand nous commençons avec la conception. Donc, une fois que nous avons terminé la partie filaire, une partie de structure de site Web, une fois que nous avons fini tout cela, commencez par la conception, puis nous allons facturer 5K supplémentaires. Et enfin, cinq final a donné avant de livrer les fichiers au client et aux développeurs. Trier de ventilation de la chronologie. Il est fondamentalement tout en six mois plus toute Diane supplémentaire pour les révisions et les changements acides pour les développeurs après ces six mois sont expirés. Et ici, vous avez ceci juste ici. Donc tu peux changer toutes ces choses. Ainsi, vous pouvez, par exemple, maintenir le contrôle et cliquer à l'intérieur. Et comme vous pouvez le voir, vous pouvez changer ce que vous voulez et vous pouvez l'adapter. Chacun d'entre eux fait essentiellement vos propres préférences personnelles. Ci-dessous, vous pouvez écrire votre nom ou le nom de votre entreprise ainsi que votre nom ou l'adresse e-mail de votre entreprise. Vous pouvez également ajouter informations de votre téléphone s'ils veulent vous contacter par téléphone. Mais vous avez lu tous les clients avec qui je travaille. Ils utilisent généralement le courrier électronique parce que c'est beaucoup plus facile et plus rapide. Et enfin, si vous ouvrez la palette Calques ici, vous pouvez voir que tous ces éléments sont dans des calques. Et vous pouvez aussi, par exemple, allons à cette icône de budget juste ici. Tu peux le changer. Vous pouvez changer la couleur, comme vous pouvez le voir maintenant, il est rouge et vous pouvez adapter cette couleur en ajoutant de la chaleur ici. Et vous pouvez changer et adapter ceci essentiellement à votre goût client. Vous pouvez également changer la couleur de l'aéroport lui-même en cliquant ici, puis ici. Et comme vous pouvez le voir, vous pouvez changer cela aussi faire une sorte de mode sombre de et essentiellement des devoirs pour les clients et essentiellement exporter ceci et leur a montré un peu de design de marque pendant que vous utilisez réellement ce modèle. Et ça a l'air marqué, mais ce n'est vraiment pas le cas. C' est juste un modèle. Afin de l'exporter au format PDF. Disons que c'est le dossier de conception final. Vous pouvez simplement appuyer sur Contrôle E et utiliser la fonctionnalité PDF à partir d'ici, kit export. Et vous pouvez évidemment changer l'endroit où vous voulez exporter vos fichiers. Dans ce cas, c'est un bureau pour moi, il suffit de cliquer sur exporter. Il va l'exporter au format PDF. Et fondamentalement, vous pouvez partager ensuite ce mémoire de conception avec votre client. Évidemment, vous allez supprimer des détails dont je n'ai pas parlé auparavant, mais ils le laissent pour vous. Donc fondamentalement, écrivez sur votre public cible ici. Vous n'avez pas besoin d'inclure ça. Écrivez sur les exigences de conception et le calendrier budgétaire ici vous pouvez supprimer que les decks simplement sélectionnés à partir d'ici, et simplement supprimés comme ça. Et puis envoyez ça à votre client. Et puis ils seront heureux avec ça. Donc, fondamentalement, c'est notre mémoire de conception, ou j'espère vraiment que vous avez aimé cette vidéo parce que comme je l'ai dit, il est vraiment important d'avoir un bref de conception en place parce que la plupart des fois vous allez l'utiliser et les clients vont demander vous, par exemple, pour certains changements différents. Mais si ces changements ne sont pas dans le cahier des charges requis, s'ils ne figurent pas dans le contrat, et alors n'hésitez pas à dire non. Ou si vous voulez travailler sur ceux-ci, hésitez pas à dire oui, mais assurez-vous de toujours facturer des frais supplémentaires pour une dose parce qu'ils n'étaient pas dans le dossier de conception, ils n'étaient pas dans le contrat. Alors pourquoi vous devriez travailler sur la dette ? Fondamentalement, cela est daté pour la vidéo courte de conception. Dans la prochaine série de vidéos, je vais vous montrer un processus de filature papier. On va commencer à dessiner sur un bout de papier. Je vais expliquer mon processus de conception pourrait concevoir pensée derrière chacun de ces designs de site Web ou d'application. Je vais vous montrer quelques réflexions supplémentaires sur le design pour certaines personnes, design pour une certaine population, certains pays et ainsi de suite. Mais tout cela va être expliqué dans ces vidéos filaires. Alors assurez-vous de regarder ceux si vous êtes intéressé. Sinon, vous pouvez toujours suivre ce cours et suivre différentes leçons. Ce qui vous intéresse, ce que vous trouverez plus intéressant, ce dont vous avez besoin bien. Qu' est-ce que vous trouvez le plus utile et ainsi de suite. Alors assurez-vous d'explorer pleinement le discours. Et parce que j'ai structuré de cette façon, donc tu n'as pas à regarder toutes les leçons si tu veux. Vous pouvez simplement passer à la pièce de conception si vous le souhaitez. Mais j'ai inclus quelques informations clés et importantes dans chaque section du discours. Donc, si vous voulez apprendre le plus et tirer le meilleur parti de ce cours, assurez-vous de suivre toutes ces leçons. Ça va prendre plus de temps, mais je vous promets que les avantages seront beaucoup plus importants. Donc, dans la prochaine vidéo et dans la prochaine série de vidéos, nous allons commencer à concevoir des trames filaires sur un morceau de papier. Alors je te verrai là-bas. 15. Trouvez le public cible: Dans cette vidéo, nous allons parler de la recherche d' audience et de ce que vous pouvez faire pour rechercher votre public. Donc, il y a deux types de chercheurs veulent qui est déjà terminé. Donc, si votre client sait déjà qui sont leurs clients et s'ils ont déjà fait la recherche, alors vous allez juste prendre cette recherche et par exemple, polir un peu ou l'affiner un peu s'ils, par exemple, veulent étendre à un auditoire supplémentaire. Ainsi, vous pouvez savoir à partir de leurs cibles précédentes et exemples précédents ce que vous pouvez faire avec la conception et où vous pouvez aller à partir de là. Si vous avez besoin de rechercher un nouveau public, Si par exemple, D Juste savoir à peu près qui est leur public, alors vous devez faire la recherche lorsque vous avez besoin de comprendre qui est le public cible. Donc, dans notre mémoire de design juste ici, je le regarde sur mon écran. désintox, l'âge de 22 ans, 45 ans. Donc, cela signifie, par exemple, parce que c'est le projet de banque. La banque sait déjà à partir du compte qu'ils ont déjà ouvert et ils peuvent vérifier dans leur système que c'est leur public cible Parce que dans cette tranche d'âge, la majorité des gens sont là. Et puis nous avons le sexe, 40% de femmes, 60% de repas. Une fois de plus, nous savons que de la banque de données a déjà le pays de résidence. Donc la Serbie et le Royaume-Uni ville résonance Belgrade à Londres, parce que c'est là qu'ils ont leur emplacement est sur. On a un lieu de travail. Donc surtout des emplois à faible revenu. Ce que les propriétaires de petites entreprises ainsi, en particulier les pigistes. C' est donc ce qu'ils ont demandé quand ils ouvrent leurs comptes. Donc, ils savent que de la dette, de expérience de la dette, des habitudes de consommation des médias. Donc Instagram, YouTube, Twitter, et tique tac, les habitudes quotidiennes ou la consommation des médias sociaux. Traiter les déplacements, manger sainement, s'entraîner l'après-midi et ainsi de suite. La banque peut alerter sur toutes ces informations, principalement demander aux clients Derek. Et vous pouvez apprendre à partir des informations sur les données ce que vous devez faire pour la conception. Donc parce que nous avons plus de clients masculins que féminins ici et que nous sommes au public yank. Donc, les jeunes de 22 ans, 45 ans, nous pouvons savoir instantanément que nous n'avons pas besoin d'utiliser toutes ces couleurs vieilles et premium comme la vraie couleur noir foncé, littéralement or et ainsi de suite. De plus, nous n'allons pas utiliser ces couleurs parce que cette banque ne l'est pas. Comment puis-je dire ce banquet vraiment personnalisable ? Je ne sais pas comment dire ça, mais ce n'est pas pour les clients haut de gamme et clients qui sont déjà sur des yaks, des super voitures Dionne. Il n'y a pas beaucoup de maisons différentes dans la zone de Mencius. Et cette banque est pour les gens ordinaires. Par conséquent, vous devez structurer votre dette vocale de manière à ce que ces gens ordinaires puissent comprendre ce que vous voulez leur dire. Donc ils ne veulent pas voir des images de yaks, de demeures et ainsi de suite parce qu'ils ne possèdent pas ces choses. Par conséquent, vous allez utiliser les couleurs qui conviennent à votre public. Dans ce cas, 60 % d'hommes, 40 % de femmes. Donc nous allons mettre de l'épice à son design, disons comme ça. Donc, disons que nous allons utiliser des coins arrondis et le rendre doux. Peut-être que nous pouvons utiliser quelques ombres de fond plus tard, peut-être même flou d'arrière-plan. Juste pour donner ce look moderne et doux afin que nous puissions accueillir à la fois le public masculin et féminin. Encore une fois, vous devez regarder un pays de résidence et une ville de ressents. Vous devez donc regarder la culture de ces gens. Vous devez comprendre ce qu'est la culture, en particulier la culture locale, surtout dans ces cas où ils se concentrent sur, par exemple, Belgrade et Londres. Vous devez donc comprendre une culture de dose aux villes et vous devez adapter votre conçu à ces cultures. Donc, une fois de plus, si une certaine culture ou religion utilise un ensemble particulier de couleurs, vous n'allez pas utiliser ces ensembles de couleurs particuliers. D' autres religions, villes, pays, etc. Donc tu dois penser à toutes ces choses. Et comment pouvez-vous y penser simplement en faisant vos recherches, en comprenant simplement qui est vos clients cibles, qui est votre public cible ? Et si, comme dans notre cas, nous avons déjà cette information et que nous l'avons en demandant à la banque de nous fournir cette information, alors nous pouvons facilement structurer cette information en fonction de notre désir. Donc, une fois de plus, en utilisant la couleur, en utilisant la topographie et sous le front topographique, si votre public est plus âgé, vous allez généralement utiliser une typographie plus grande parce que le site des gens est vraiment mauvais à un certain âge ou ils commencent à mal tourner. Donc, vous allez utiliser une typographie plus grande. Vous allez à une typographie plus sombre juste pour qu'elle soit plus accessible à ces gens. Si les jeunes sont en question comme ils le sont dans notre cas, alors vous pouvez, par exemple, utiliser une topographie de plus petite taille. Vous pouvez utiliser des couleurs plus claires juste pour donner ce sentiment de bien-être général à votre site Web. Parce que, comme vous pouvez le voir dans les habitudes quotidiennes, consommation quotidienne des médias sociaux recommandait de manger sainement et de s'entraîner dans l'après-midi. Alors peut-être que ces gens mangent dans un endroit sain et qu'ils vérifient leur compte bancaire alors qu'ils sont endettés. Donc, s'ils sont dans cet état d'esprit, vous ne voulez pas les enliser avec une topographie de lit, avec de mauvaises couleurs et ainsi de suite. Vous voulez avoir cette sensation globale de bien-être, d'être KLT d'être vert et d'être en harmonie avec la nature et la communauté, etc. Mais en utilisant ces certaines couleurs, la topographie et l'imageur, ce qui est particulièrement important si vous parlez à des gens plus jeunes comme nous sommes ici, alors vous allez utiliser l'imagerie des jeunes gens. Parce qu'une fois de plus, l'imagerie est vraiment importante parce qu' elle montre les gens vers la direction de l'entreprise. Donc, une fois de plus, si notre population d'âge est de 22 ans, 45 ans, nous ne allons pas montrer quelques personnes âgées dans ces images Windows, mais les plus jeunes, par exemple, utilisant leurs téléphones mobiles, utilisant les tablettes, pendaison dehors, peut-être boire du café, faire des bicyclettes, peut-être traîner dehors. C' est un endroit sympa et ainsi de suite. Donc tu veux juste te concentrer à qui tu parles ? Lancez vos images dans vos polices et dans vos couleurs. C' est là que ce public cible est vraiment utile parce que vous avez juste besoin de la recherche et de la dette. Si comme dans ce cas, nous l'avons déjà. Et parce que la banque nous est fournie toutes ces informations, que se passe-t-il lorsque vous n'avez aucune de ces informations ? Eh bien, vous avez juste besoin de vous asseoir avec votre client 101. Demandez-leur simplement qui rencontre osent le public cible est. Et puis vous pouvez leur poser une série de questions comme nous le faisons ici. Quel est leur âge, quel est leur sexe ? Où sont-ils situés ? Qu' est-ce qu'ils aiment faire, et ainsi de suite. Donc, vous pouvez lister toutes ces questions qui ont déjà un modèle d'indice que je vous donne, poser ces questions à votre client pour comprendre qui est leur public cible. Den, une fois que vous suivez ce public cible, vous pouvez prendre vos propres décisions en intégrant simplement cela dans votre design. Si vous avez besoin de faire une recherche sur le public cible et alors évidemment vont facturer plus pour papa. Et c'est plus une sorte de chose basée sur le champ UX. Comment ciblez-vous la recherche ? Par exemple, ils vous disent qu'ils pensent que ces personnes travaillent, disons, dans une banque locale, par exemple. Ensuite, vous allez demander à cette banque locale s' ils sont disponibles pour une entrevue. Dan, tu vas former la liste des questions qui vont poser à ces gens. Et la meilleure chose que vous puissiez faire est de rassembler tous ces gens dans un groupe, dans une pièce en même temps, si c'est possible, pendant deux ans, cette pandémie mondiale et ainsi de suite. Vous pouvez le faire en ligne. Vous pouvez évidemment programmer des appels Xun, appels Skype, Google Hangouts, etc. Ainsi, vous pouvez demander à toutes ces personnes en même temps, ou vous pouvez pré-enregistrer vos questions. Vous pouvez lui envoyer papa, ils peuvent vous envoyer un sac e-mail pour que vous n'ayez pas vraiment à vous asseoir avec eux si vous ne voulez pas, ou si vous êtes timide ou s'ils n'ont pas le temps et ainsi de suite. Les gens aiment être payés pour ce tri. Donc, cette recherche sur le public cible prend évidemment beaucoup de temps. Donc, ce sera mieux si tu peux payer ces gens. Et comment pouvez-vous aller chercher p ? Comment pouvez-vous les payer, c'est simplement demander à votre client de vous payer à l'avance, car s'ils vous payent d'avance, par exemple, 30 % ou 50 % ou autre. Vous pouvez utiliser cet argent pour ce public cible, vous n'avez pas à payer des sommes massives. Et juste un montant de base, je ne sais pas, régulier à ces gens parce qu'ils utilisent leur temps avec vous. Et puis une fois que vous avez formé votre opinion sur ce public cible, vous pouvez ensuite l'utiliser dans votre travail de conception et plus tard, lorsque le travail est terminé ou presque terminé, vous pouvez revenir à ces personnes et maintenant leur demander pour tester votre produit et comment vous pouvez le faire. Il y a beaucoup de différents plugins à l'intérieur d'Adobe dépassé que vous pouvez installer pour tester avec des audiences réelles. Voir quelle datation du produit avant que le produit entre dans le code et passe en direct. Parce que nous allons utiliser des techniques de prototypage, des micro-interactions et ainsi de suite. Vous pouvez donc leur montrer comment le produit va ressembler dans la vie réelle une fois qu'il est codé, avant qu'il ne soit réellement codé, ce qui permet de gagner du temps à la fois pour vous, vos clients, vos développeurs et ainsi de suite. Parce que vous allez tester ces solutions sur de vraies personnes. Et vous pouvez comprendre si de vraies personnes qui sont en fait notre public cible vont aimer ce produit avant qu'il ne soit mis en service. S' ils ne le font pas, évidemment, vous allez écrire toutes leurs réponses et vous allez intégrer ces réponses dans votre conception afin que vous puissiez la modifier. Tu peux y retourner. Posez-leur simplement ces questions ou des questions différentes. Comme, par exemple, comment avez-vous trouvé la navigation ? Est-ce que ça pense que c'est trop à l'étroit ? Êtes-vous capable de cliquer sur l'une de ces choses ? Vous aimez ces animations ? Pensez qu'ils prennent trop de temps. Comment trouvez-vous que les couleurs font, trouvez-vous distinct distrayant de trouver facilement de cliquer sur ces boutons afin que vous puissiez formater toutes ces questions et poser toutes ces questions à ces gens qui vous et votre client pense être le public cible. Si vous avez le public cible. Nous revenons donc à l'histoire dès le début. Nous avons donc notre public cible parce que la banque a déjà fourni ces options. téléchargement que vous pouvez faire est lorsque vous arrivez à la partie de partage de votre projet et de test de la partie de votre projet, vous pouvez alors former votre public cible en utilisant les informations que le client vous a fournies. Dans ce cas, la banque, vous pouvez amener toutes ces personnes dans une pièce ou Skype appeler l'appel zoom et tout ce dont j'ai parlé et poser ces mêmes questions à ces gens. Ensuite, vous pouvez obtenir leurs réponses. Vous pouvez les formater et vous pouvez penser comme par exemple, si deux ou plusieurs personnes ont dit que ce bouton est trop distrayant, je le change. Si trois personnes ou plus ont dit qu'elles l'avaient fait, elles ne peuvent pas lire le texte, je vais essayer d'améliorer la couleur, peut-être faire quelque chose de plus sombre et peut-être changer la couleur complètement. Donc tu comprends ce que je veux dire. Vous devez tester ces choses avec de vraies personnes. Et c'est le vrai processus UX de conception. Donc dépoussiérer, changer, mettre en œuvre, destiné à nouveau, et c'est fondamentalement un cercle de failles et vous faites ce cercle pour toute la durée de vie du projet. Donc, du moment où vous commencez au point où vous terminez et que le produit est la vie. Ce n'est pas la fin du processus de conception. Tu vas le faire encore et encore. Mais je suis juste en train de vous montrer le format de projet structuré basé sur le projet. Donc, fondamentalement, pour chacun de ces tests, par exemple, après que le produit est en direct via la conception du site ici. Donc, lorsque le site Web est en ligne, peut-être dans une période de trois mois, peut être vous pouvez recueillir des données auprès de la banque et vous pouvez vous asseoir avec la personne de la banque et ensuite nous parler avec elle. Peut-être ont-ils un chef de projet pour ce projet et ainsi de suite. Ou si le client est plus petit, vous pouvez vous asseoir directement avec les clients et ensuite inspecter toutes ces informations. Par exemple, s'ils pensent que la page est vraiment importante pour la conversion, et que vous voyez dans Google Analytics, par exemple, que la conversion est vraiment mauvaise, alors vous pouvez vous asseoir avec votre public cible, parler avec eux sur ce qu'ils aimeraient changer avec cette page particulière, alors vous pouvez appliquer ces modifications, Envoyez-les aux développeurs. Les développeurs peuvent implémenter ces changements parce que c'est beaucoup plus facile maintenant parce qu'ils ont un site Web en direct qui fonctionne. Et puis vous pouvez le donner à un mois de plus ou trois mois de plus et voir si la conversion s'est améliorée. Évidemment, vous pouvez fixer ces délais avec votre client et voir, par exemple, s'ils veulent réaliser quelque chose dans un délai plus court, disons qu'ils veulent une plus grande conversion en trois mois. Ensuite, par exemple, vous pouvez peut-être faire deux de ces changements après chacun des mois. J' espère que vous comprenez. Après un mois, vous obtenez une fois de plus avec votre public cible. Vous parlez avec eux de ces changements, mettez en œuvre les changements et les développeurs implémentent les changements. Et après un mois de plus, vous explorez et voyez s'ils ont atteint le public cible. S' ils atteignent leurs objectifs cibles, s'ils l'ont fait, alors c'est bien. Peut-être que vous pouvez faire quelque chose pour améliorer un peu plus. S' ils ne les ont pas atteints, vous pouvez revenir à un public cible avec de nouvelles questions, de nouveaux changements, etc. Donc c'est vraiment tout le processus de cercle parce qu'il commence et puis il ne se termine jamais parce que vous faites toujours ces changements. Encore une fois, il n'est pas de votre responsabilité d'apporter ces changements une fois que le produit est en ligne, mais vous pouvez offrir cela comme un service à un client et ensuite leur dire : Ok, vous avez ces objectifs peuvent être, nous pouvons les atteindre. Si nous ne les rencontrons pas, peut-être devrions-nous nous rencontrer à nouveau. Nous devrions reparler de parler au public cible afin que nous puissions essayer autre chose. Nous pouvons essayer quelque chose de différent et peut-être améliorer les chances d'atteindre cet objectif. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 16. Ressources de papier Wireframe: Bon, alors commençons avec des fils de papier. Mais avant de le faire, je veux juste vous montrer rapidement les ressources que j' utilise que vous pouvez utiliser et les ressources dont vous avez besoin pour le filage papier. Donc, ce qu'il vous faut, c'est du papier. J' utilise juste un papier d'impression ordinaire. Vous pouvez utiliser n'importe quel papier que vous voulez. Il peut avoir des lignes et des points, il peut avoir des carrés. C' est vraiment à vous de choisir. Et quel genre de papier a, quel genre de papier aimez-vous utiliser ? Et ça n'a vraiment pas d'importance. Chose désordonnée comme l'épaisseur du papier, classement du papier et ainsi de suite. Vous pouvez juste utiliser une simple feuille de blancs comme j'utilise ici. C' est juste un papier d'impression de base ou vous pouvez acheter dans n'importe quel magasin. S4 dépend. Vous pouvez utiliser des crayons en bois, vous pouvez utiliser des stylos comme ceux-ci. Vous pouvez utiliser des coudes à bille. C' est vraiment à vous de décider une fois de plus ce que vous avez couché autour de votre maison. Si vous voulez obtenir de la fantaisie, vous pouvez acheter ces règles. Vous pouvez acheter ces règles qui ont des icônes en relief à l'intérieur d'eux. Donc, vous pouvez fondamentalement définir la règle, une règle comme celle-ci, puis vous pouvez simplement dessiner une icône dessus. Donc je n'aime pas vraiment faire ça parce que ça me ralentit. Mais vous pouvez l'utiliser, vous pouvez l'acheter en ligne, vous pouvez essentiellement trouver ce que vous voulez. Vous pouvez également utiliser différents marqueurs de couleur. Je ne les utilise pas aujourd'hui juste pour accélérer un peu les choses. Vous pouvez utiliser des stylos comme DES. Comme je l'ai dit, c'est vraiment à vous de décider ce que vous avez, ce que vous êtes le plus à l'aise avec l'utilisation. Et ce processus est essentiellement une question d'idées. Donc, vous voulez juste sortir des idées de votre tête, vers le bas sur un morceau de papier et juste triées. Vous pouvez voir où vous pouvez prendre cet outil de processus et dans quelle direction. Donc, pour commencer, ce que je veux, c'est d'énumérer tous les services que le client m'a donnés. Donc, une fois de plus, le Client est une banque et ils ont tous ces différents services qu'ils veulent inclure dans leur site Web. Ils ont tous les sites Web qu'ils veulent redessiner. Et la navigation sur le dessus est vraiment encombrée. Ce n'est vraiment pas si génial à l'œil. C' est vraiment difficile à comprendre. Donc, la première chose dans la conception UX, que nous allons faire pour ce site particulier est de corriger leur navigation. Donc, fondamentalement, leur navigation est arrêtée maintenant juste ici, imaginez juste en haut de la page. Et c'est vraiment encombré avec un tas de ces différents services qu'ils offrent. Je veux corriger cela parce que je veux que les utilisateurs naviguent facilement sur ce site Web pour réduire le taux de rebond. Parce que si vous vous souvenez de la vidéo précédente sur le bref de conception, taux de rebond est l'une de leurs principales exigences. Donc, pour commencer, je vais juste énumérer les pages qu'ils veulent faire pour ce site Web. Donc, ils ont des comptes, ils ont des prêts, cartes, investir, numérique, et tableau de bord avec des services supplémentaires. Donc, si je prends mon appareil photo et zoome un peu plus près, vous pouvez voir ce que je fais un peu mieux. Vous pouvez voir ici que nous avons des comptes, des cartes de prêt, investir, numérique et tableau de bord. Donc, tous ces services ont différents à l'intérieur. Donc, fondamentalement, sous les comptes, vous pouvez ouvrir différents comptes comme la vérification, compte d'épargne et ainsi de suite. Vous allez voir qu'une fois que nous commencerons réellement avec le processus de conception et filaires et ainsi de suite dans les prêts Adobe XD, fondamentalement la même chose. Donc, tout cela a différents services, voitures, vous pouvez imaginer cartes de débit, cartes de crédit et ainsi de suite, investit. Ils ont donc des plans d'investissement différents. Ainsi, par exemple, bourse tenue investir dans l'avenir et ainsi de suite. Digital est fondamentalement oser outils d'aide IA. Ils ont des services bancaires en ligne, des services bancaires et ainsi de suite. Et sous le tableau de bord, une fois que vous vous connectez réellement à ce site Web et que vous allez sous le tableau de bord, vous serez en mesure d'accéder à toutes ces informations supplémentaires. Vous allez pouvoir voir que vous passez votre journée limite vos cartes, vos poumons, par exemple, que vous avez sous cette banque et ainsi de suite. Donc, pour réparer tout ça, ce qu'ils m'ont demandé de faire, c'est d'inclure les cations métalliques. Le loyer va être pop-up essentiellement de leurs emplacements sous une carte Google. Il m'a demandé d'inclure pour les entreprises. Ils m'ont demandé d'inclure notre numéro de téléphone mobile et différentes langues. Alors écrivons ça. Donc, les lieux, les affaires, le téléphone, et les langues. Donc, toutes ces choses doivent être incluses dans notre navigation. D doivent être dégagés. D doit être facile à lire, facile à comprendre à la fois sur mobile et sur le web. Donc, c'est notre premier défi essentiellement, parce que dès que vous atterrissez sur ce site, vous allez voir cette navigation haut de gamme. Tu vas te demander, ok, je suis sur une page de banque. Où dois-je aller ? Peut-être que vous avez besoin d'ouvrir un compte. Peut-être que vous avez besoin de prendre une carte. Peut-être que vous envisagez d'investir et ainsi de suite. Vous devez donc être en mesure de naviguer facilement sur ce site Web. Pour ce faire, ce que nous allons faire c'est de tracer les contours d'un site web. Donc, vous pouvez juste imaginer que c'est le contour. Lorsque vous atterrissez sur un site Web, ce que vous allez faire est d'inclure une barre supérieure comme celle-ci, qui va fonctionner sur toute la largeur de notre site Web. À l'intérieur de là, nous allons inclure nos emplacements ici. On va faire pour les entreprises ici. Et je vais en fait l'écrire. Ensuite, de ce côté-ci, nous allons inclure un numéro de téléphone. Alors laissez-moi rapidement inclure une icône de téléphone. Et c'est de cela que je parlais avant. Vous pouvez simplement inclure une base griffonnée comme ceci. Et vous pouvez également utiliser des flèches de ICN. Donc, pour Nikon, si vous partagez ceci avec un autre concepteur ou un développeur ou qui que ce soit, ils seront en mesure de comprendre. Ok, c'est un CI étranger et c'est une icône de localisation. Et vous pouvez écrire toutes ces choses. Pour les langues. Je vais inclure deux drapeaux, essentiellement le drapeau britannique et la torche serbe parce que ce sont nos langues. Laisse-moi l'écrire. Langues. Et ce que nous allons faire est d'inclure une autre navigation, mais à l'intérieur de ce site, donc ce ne sera pas pleine largeur, ce sera une navigation encadrée. Donc fondamentalement d'ici à ici, parce que nous allons utiliser la grille une fois que nous commencerons réellement avec la conception. Donc ça va être notre navigation en boîte. Comme ça. Ça va avoir un effet floue, va avoir une ombre portée. Vous verrez plus tard quand nous commencerons réellement avec le design de ce côté gauche. Et nous allons nous occuper du logo. Nous allons donc y inclure le logo. Et puis les comptes. Et j'ai demandé au client le vrai, ce que j'ai fait auparavant. Comment peut-on une liste d parce que vous devez les lister par ordre de priorité. Parce que, par exemple, ces services numériques sont, peuvent être secondaires à barrage ou tertiaire ou autre. Et ce sont des comptes dans les prêts peut-être sont le min, il signifie services. Vous devez donc lister les services dans votre navigation par ordre de priorité parce que la majorité des gens, surtout en Occident, lisent de gauche à droite s'il s'agit d'un autre marché ou d'un marché du Moyen-Orient , par exemple, lire de droite à gauche. Vous devez donc inclure vos éléments de menu par ordre de priorité de gauche à droite pour ces pays occidentaux dans les publics occidentaux. Donc, les comptes, les prêts, les cartes, investir, et numérique. Et au lieu du tableau de bord, je vais en fait inclure un bouton juste ici. Et il peut s'agir d'un bouton de connexion, qui va réellement nous conduire à la section du tableau de bord. Ils vont donc pouvoir cliquer sur ce bouton de connexion et aller au tableau de bord. Alors écrivons ça. Et je préfère écrire toutes ces choses, surtout peut-être que vous créez ce filaire maintenant, mais vous allez y revenir dans un mois, disons, ou dans quelques jours ou dans quelques semaines. Et peut-être que tu vas oublier ce que c'est, ce que c'est là que ça t'emmène. Donc, c'est vraiment extrêmement facile comme vous l'avez vu, suffit de poser la flèche par exemple, c'est notre icône de localisation. Alors, écrivons-le. Occasion que je peux juste pour que vous puissiez voir ce que c'est. Et voyons ça pour l'instant. C' est juste une icône, mais peut-être que vous allez l'écrire. Des endroits ici. Cela pour les entreprises vont se déplacer vers la droite. Donc vous devez avoir toutes ces choses par écrit. Juste vu avez-vous vous pouvez vous rappeler plus tard quand vous y retournez, ce qu'il est, ce qu'il fait et ainsi de suite. Donc, ce ne sont essentiellement pas la navigation. Et je vais le laisser ici pour cette vidéo. Dans la prochaine vidéo, nous allons vraiment y revenir. Je vais vous montrer des styles de filature différents, ce que vous pouvez faire. Et puis en vidéo après celle-ci, nous allons enfin commencer avec les trames filaires. Et nous allons en fait dessiner tous nos éléments sur un bout de papier. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 17. Styles de cadrement papier: Bon, alors continuons là où on s'est arrêté dans la vidéo précédente. Et dans cette vidéo, je vais vous montrer un style filaire différent que vous pouvez utiliser pour vos filaires. Donc je vais utiliser ce même morceau de papier. Et en fait, je vais zoomer un peu plus près. Pour que vous puissiez voir tout ça un peu mieux comme ça. Donc, fondamentalement, les styles varient-ils d'un designer à l'autre ? Le facteur clé ici est le temps. Alors, combien de temps avez-vous sur ce projet ? Et un autre facteur clé est évidemment le budget des clients. Donc, s'ils vous payent un salaire mensuel bas ou des frais peu élevés ou quoi que ce soit, vous n'allez pas investir beaucoup de votre temps dans ce processus parce que, comme je l'ai dit, ils augmentent votre petit pour que vous n'ayez pas d'argent. Donc, vous allez simplement griffonner quelques idées et passer à Adobe XD. Mais s'ils vous payent beaucoup d'argent, si vous avez assez de temps pour le faire et vous avez du talent et que vous avez des idées que vous devez leur montrer. Ensuite, vous pouvez investir beaucoup de votre temps dans ce processus, surtout si vous partagez avec d'autres concepteurs, l'équipe de la dette ou avec le client qui veut être pratique et ainsi de suite. Donc, fondamentalement, ces deux facteurs, le temps et l'argent, sont ce qui différencie ces différents styles. Donc accordé le style numéro un, fondamentalement, je vais piocher trois cartes comme ça. Et sur ces trois cartes, je vais vous montrer ces trois styles différents. Donc, c'est l'image et dans le premier style, qui est juste le style de base, pour montrer qu'il s'agit d'une image. Vous pouvez juste le faire et leur montrer que, OK, c'est une image. Et vous pouvez pointer votre client et dire, partout où vous voyez ce mouton, cela signifie que c'est une image. Et puis dans le deuxième style, si vous avez un peu plus de temps et sur le budget, est un peu plus grand, et alors vous pouvez faire quelque chose comme ça. Tout le monde a vu des icônes comme ça pour les images. Donc vous pouvez les pointer et dire quoi que ce soit, nous avons une image, et voici l'image réelle, bosse dans le tourniquet. Ce que vous pouvez faire est en fait dessiner dans une belle montagne. Si vous savez dessiner, vous pouvez utiliser différents marqueurs. Vous pouvez utiliser l'ombrage. Disons que nous avons des bois ici. Donc tu as l'idée et tu as la photo. Nous pouvons également dessiner des nuages ici ou nous pouvons utiliser différentes couleurs et ainsi de suite. Donc, fondamentalement, le différentiateur clé ici sont des détails. Vous avez un temps limité. Si vous avez un petit budget à portée de main, alors vous allez utiliser celui-ci. Si vous avez tout ce que j'ai dit un peu plus grand, vous allez utiliser celui-ci. Et si vous le voulez, et si vous avez beaucoup de temps, beaucoup d'argent sur vos mains, et alors vous pouvez utiliser celui-ci. Vous pouvez utiliser différents marqueurs de couleur. Tu peux faire ce que tu veux. Mais ici, et laissez-moi vous montrer parce que j'ai des marqueurs à portée de main. Donc, disons que vous allez utiliser ce style ou avoir ce marqueur juste ici. Et je veux juste te montrer combien de temps cela va nous prendre. Et juste pour illustrer mon point de vue, et juste pour que vous puissiez voir la différence ici. J' ai donc fait un projet comme celui-ci dans le passé. Le client avait un budget énorme et ils veulent montrer cela aux parties prenantes juste pour que tout le monde puisse voir. J' ai donc utilisé cette méthode, mais ce n'était qu'une fois, la majorité des fois. En fait, je combine ceci et ce style. Donc, selon l'endroit où vous mettez vos images, en particulier pour les avatars. Donc 40$, tu peux faire un circuit comme ça. Tu peux faire comme ça. Donc, en gros, vous endettez votre avatar. Ou parfois, vous pouvez même aller comme ça. Ainsi, vous pouvez peindre dans les parties de votre avatar juste pour le faire ressortir un peu sur la page. Vous pouvez faire différentes couleurs. Donc, en fonction de votre avatar, évidemment, vous pouvez peindre une fin. C' est donc à vous ou à vos clients, votre budget et ainsi de suite. Je ne veux pas traîner beaucoup plus longtemps. Je pense que tu as la photo. Alors, maintenant plus d'un. Imaginons que nous ayons un titre juste en dessous de ce panier. Donc, pour ce premier style, je vais juste dessiner une belle ligne épaisse comme celle-ci. Donc c'est notre titre. C' est un sous-titre, donc c'est un peu plus petit. Et enfin, pour le paragraphe, nous pouvons simplement utiliser des lignes comme celles-ci. Nous avons donc notre image, titre, notre sous-titre et un paragraphe. Vous pouvez également utiliser quelque chose comme ça. Donc, vous pouvez prendre un int vers le bas juste un peu pour les différencier. Vous pouvez utiliser différentes couleurs et ainsi de suite. Mais la méthode la plus rapide est cette méthode. Et disons que nous avons un bouton d'appel à l'action juste ci-dessous. Ce qu'on peut faire, c'est dessiner un bouton comme ça et l'appeler un jour. Peut-être que vous pouvez le faire juste pour indiquer qu'il s'agit d'un bouton pour le style numéro deux, ce que nous pouvons faire est d'écrire le titre, le sous-titre, le paragraphe. Et enfin faire un bouton et écrire b n. Ainsi, vous pouvez voir la différence entre ces deux. C' est évidemment, encore une fois, beaucoup plus rapide, beaucoup plus rapide. C' est juste un peu plus lent. Bouton nous donne plus d'informations et vous pouvez combiner ces deux. Par exemple, vous pouvez écrire le titre, le sous-titre, puis les lignes de tâches. Et pour le btn, utilisez ce style si vous le souhaitez. Maintenant, enfin, pour ce dernier Style, évidemment, vous allez utiliser une vraie information à l'intérieur. Alors disons Mountain. Voyons, Yellowstone Park. Nous allons écrire de vrais paragraphes, donc le vrai texte va ici et je ne vais pas trop perdre votre temps avec ça. Mais vous pouvez imaginer que vous allez réellement écrire du vrai texte, ce qui va aller ici. Maintenant, pour le btn, donnons-lui un comme ça. Et voyons charger ou lire plus. Et je vais utiliser mon marqueur une fois de plus ici. Je vais appeler ça mon bouton comme ça. Et je vais utiliser un autre stylo juste pour illustrer combien de temps cela me prend. Donc celui-ci juste pour ajouter sous l'ombre OK autour de mon bouton. Donc, vous pouvez essentiellement voir juste à partir de ces trois exemples, ce que vous pouvez faire avec ceux-ci et comment la différencier entre eux. Nous avons donc la version la plus simple, le stockage rapide et celui que vous allez utiliser la plupart du temps. Maintenant, nous avons une version un peu plus lente, mais vous pouvez utiliser certains des éléments de dispersion dans cette version. Et nous avons la version la plus lente, mais la version la plus détaillée et celle que vous n'utiliserez probablement jamais. Mais je voulais te montrer ça, celui-là de toute façon. Pour les avatars et les images de type mort, je recommande d'utiliser une sorte d'icônes. Disons que vous avez des fonctionnalités sur votre page. Et au lieu d'inclure un cercle comme celui-ci et de l'appeler un jour, peut-être que vous pouvez faire quelque chose comme ça. Peut-être que vous pouvez inclure une étoile, notre icône de sorte différente, et souligné dans l'un des filaires que c'est une fonctionnalité. Voyons voir. Ainsi, vous pouvez savoir, vos clients, peuvent connaître les développeurs et les concepteurs et ainsi de suite, ce que c'est réellement. Donc c'est tout pour cette vidéo. J' espère vraiment que vous avez compris quelques différences entre ces styles de filature. Dans la vidéo suivante, nous allons réellement commencer une utilisation de cette navigation. Et nous allons en fait commencer à concevoir des pages et à poser des éléments. Alors je te verrai là-bas. 18. Wireframes papier 1: Dans cette vidéo, nous allons commencer avec nos filaires et nous allons commencer par la page d'accueil. accueil va essentiellement être notre page de prêt de base, qui va montrer une majorité de l'information qu'ils offrent, ainsi qu'avec une sorte de billet de blog ou de nouvelles ou quelque chose comme ça. Donc, pour commencer, je vais rapidement dessiner un contour que vous remarquez que je n'utilise aucune règle. Vous pouvez utiliser les règles si vous le souhaitez. Je pense que c'est plus rapide comme ça, surtout l'histoire ou les naughts qui s'amarrent comme moi. Mais si vous voulez utiliser des règles pour le rendre fantaisie, si vous partagez ceci avec votre client, si vous voulez avoir l'air un peu plus professionnel, je recommande d'utiliser une règle juste fondamentalement pour ces contours. Donc, si vous vous souvenez, nous avons cette navigation en haut et nous avons cette navigation en bas. Je ne vais pas perdre trop de temps à écrire tout ça. Donc je vais juste dessiner en bas, je vais juste dessiner dans le journal. Parce que nous savons ce qu'ils sont déjà de cet exemple précédent que je vous ai montré. Et parce que je l'ai sous la main, je peux toujours le vérifier et voir ce que tout est. Donc, au lieu d'écrire quelque chose parce que c'est notre page d'accueil, nous allons juste vivre ce vide parce que les utilisateurs n'ont pas cliqué n'importe où. Donc, s'ils cliquent , par exemple, sur des comptes, allons voir que nous pouvons utiliser ce sélecteur juste ici en bas. Ainsi, ils peuvent savoir que les comptes cliqués sur et ils sont actuellement sur cette page particulière. Mais parce que rien n'est cliqué, laissons le vide comme ça. Permettez-moi de tracer un autre plan de ce côté-ci comme ça. Et j'aime toujours le faire parce que j'ai un espace vide de ce côté pour que je puisse utiliser cet espace pour me rappeler et me donner des notes de ce que toutes ces choses sont de ce côté de la page. Donc, pour commencer, je vais dessiner une image de héros. Donc je vais juste le dessiner comme ça. Et voici des images, essentiellement quelque chose qui attire l'attention de vos utilisateurs. Donc, dans ce cas, nous allons utiliser une image et un texte. Nous allons utiliser l'image sur le côté droit. Donc ici, et je vais en fait dessiner une image comme nous l'avons fait auparavant. Laisse-moi faire ça. Laissez-moi faire de la saleté, et appelons ça un marché. Donnons-lui une image. Et peut-être que nous pouvons utiliser l'image des gens. Les gens sont mg parce que D veulent dis site web et leur accent principal est sur les jeunes. Alors peut-être que nous pouvons faire quelques personnes ici. Peut-être qu'on peut faire un groupe de personnes. Peut-être que nous pouvons faire des hommes et des femmes parce qu'ils ne sont pas des clients spécifiques au genre. Ils veulent aussi des clients masculins et féminins. Donc, ce que nous pouvons faire ici à droite est le titre, le texte ou un sous-titre , comme vous voulez l'appeler, et une ville. Donc, cela va nous conduire à une partie du site qui est important pour eux. Donc, vous pouvez voir un peu mieux maintenant comme un hub zoomed-in, tout cela un peu regarder en dessous de cela, nous pouvons rencontrer quelques services. Alors écrivons Services. Et évidemment, la copie va dépendre de quelques choses. Est-ce que le client vous a fourni la copie REO faisant la copie, mais pour la partie filaire et Pour le bien du projet et de cette partie du projet, vous n'avez pas besoin d'être trop précis. Vous pouvez toujours modifier ces balises à l'intérieur d' Adobe XD une fois que vous avez réellement intégré ces trames filaires. Donc, pour ces services, nous pouvons utiliser quelques boîtes. Alors donnons-lui trois boîtes, par exemple, comme ceci. Et pour les boîtes, Peut-être que je peux utiliser quelques icônes. Juste ici, en haut à gauche. Je peux lui donner un titre. Je peux lui donner un paragraphe comme celui-ci et peut-être en lire plus. Ainsi, les utilisateurs peuvent alors cliquer ici et donnons-le. Je vois. Et parce que parfois ils sont tout simplement trop petits pour dessiner n'importe quel type d'icônes à l'intérieur. Donc, vous pouvez juste pointer votre flèche et a dit que c'est ICN. Faisons ces autres. Donc, j'induit lire plus, lire la suite. Et comme vous pouvez le voir, je suis juste en train d'écrire en gros et vous pouvez clairement voir à quel point c'est rapide. Et une chose aussi, c'est que vous pouvez voir que je les aligne d'un côté. Je les alignerai de l'autre côté parce que je vais utiliser une grille à l'intérieur. Et c'est pour ça que je dessine mes fils comme ça. Ci-dessous. Ce que nous pouvons inclure, c'est parce que c'est une banque, nous pouvons inclure un taux de change par exemple. Et peut-être qu'on peut faire une bande comme ça. Taux de changement. La date va être juste ici. Vous remarquez que je suis juste en train d'écrire la date. Je ne vais pas inclure la vraie date pour le moment. On peut faire le drapeau et l'information ici, donc c'est notre drapeau. Et nous pouvons faire quelques devises majeures comme l'euro, USD, yen japonais, et ainsi de suite, quoi que ce soit dans ce marché et à cette banque dans un besoin, vous ne voyez pas, Je ne perds pas de temps, mais en notant tout. Et c'est notre premier style que je vous ai montré précédemment. Donc, vous pouvez voir déjà je combine ces deux styles, ce style pour l'image. Et vous pouvez voir que c'est juste ici. Et fondamentalement cet autre style pour tous ces autres éléments, parce que je veux juste le faire rapidement. Je voulais être rapide et rincer quelques idées que j'ai déjà. Ce que nous pouvons faire ici, c'est dessiner une image parce qu'ils veulent inclure certaines de leurs fonctionnalités moyennes qu'ils utilisent. Appelons ça le titre. Donnons-lui un paragraphe. Elements, donnez-lui btn. Et parce que peut-être ce sont leurs serveurs, c'est leur promo, ce parfois je la dette. Ci-dessous, ce que nous pouvons faire est d'utiliser une autre boîte ou peut-être des boîtes à outils et inclure des services supplémentaires et qu'ils ont. Alors donnons-lui une image. Alors je mg. Vous pouvez aussi le faire. Ou tu peux faire ça tout ce que tu veux, peu importe ce que c'est plus facile. Et puis peut-être le titre, peut-être le paragraphe. Et nous pouvons inclure un bouton ci-dessous. Ce btn juste pour que vous sachiez ce qu'il est en dessous de cette nouvelle. Et ce que nous pouvons faire est d'inclure trois GridLayout ici. Images. Vous pouvez voir à quel point c'est rapide et désordonné à la maison ne pas utiliser de lignes droites. Je dessine juste ce que j'ai dans ma tête en ce moment. Donc, nous pouvons avoir un titre, sous-titre et peut-être une lecture plus. Sur tout ça. Ci-dessous, ce que nous pouvons faire est d'avoir une fiche d'information. Je dirais peut-être que je peux inclure un logo juste ici pour rappeler aux gens. Ici, nous avons un numéro de téléphone. Par exemple. Ici, nous avons, voyons, des endroits. Et enfin, ici, nous avons un email. Ainsi, ils peuvent rapidement rejoindre cette entreprise et ils peuvent entrer en contact avec eux. Et enfin, ce que nous avons en bas, c'est le pied de page. Et le pied de page va être essentiellement un gros parce que cette banque a beaucoup de services différents. Ce sont donc nos principaux services de notre navigation. Et je vais te le montrer dans une seconde. Donc si je ramène ça, vous pouvez voir la vidéo. Nous avons des comptes, des appartenances, des voitures et ainsi de suite. Donc c'est ce qui va être ça. Ça va être des comptes, des poumons, des cartes et ainsi de suite. Et sous chacun de ces éléments, nous allons avoir des éléments de navigation supplémentaires. Moi, des objets photo. Parce que par exemple, disons que ce compte est celui-ci. Et comme je l'ai dit, ils ont des comptes chèques, des comptes d'épargne et ainsi de suite. Donc ce sont quoi, ils sont juste ici. Nous allons écrire ou taper logo ou quoi que ce soit n, appelons-le un jour. Et c'est essentiellement notre plage natale. Donc, ce que vous pouvez également faire est que vous pouvez écrire sur le dessus ou la fonctionnalité d'eux. Donc induit la page d'accueil. Comme vous pouvez le voir ici en haut. Donc, nous avons la page d'accueil ici juste pour que, vous savez, designers, les clients et tout le monde sait, soient sur la même page. Donc tout le monde sait ce que c' est, c'est que vous pouvez voir que ce processus ne nous a pas pris beaucoup de temps, dix minutes parce que je parle trop. Mais vous pouvez juste imaginer que si vous rincez des idées, vous pouvez faire quelque chose comme ça en 3-5 minutes. Cela dépend vraiment de la taille des pages, nombre d'éléments et de ce que vous voulez inclure. Une dernière chose que je veux faire parce que comme il l'a dit, je quitte cet espace ici. Donc pour celui-ci, je n'ai besoin de rien parce qu'il dit services sont comme des taux de change, donc vous savez ce que c'est. Mais pour cela, peut-être que je peux voir promo ou autre chose, peut-être offrir. Et nous pouvons voir avec le client ce qui est vraiment important à inclure ici. Pour celui-ci, peut-être des paquets ou des comptes ou combinés comme de la saleté. Et ce ne sont que des articles de presse. Un autre style que vous pouvez faire est de mettre votre filaire au centre de votre papier, puis d'avoir des espaces vides à gauche et à droite. Et vous pouvez utiliser ces espaces vides pour écrire toutes ces informations supplémentaires que vous allez utiliser sur votre page. C' est fondamentalement tout pour cette vidéo, je vous verrai dans la prochaine où nous allons commencer avec les comptes et nous allons essentiellement utiliser la même mise en page, mais quelques différences. Et je vais l'expliquer dans la prochaine vidéo. Alors je te verrai là-bas. 19. Wireframes papier 2: Donc, dans cette vidéo, nous allons commencer avec des comptes. Et si vous ne voulez pas gaspiller trop de papier, vous pouvez faire ce que j'ai fait avec ces exemples. Ainsi, vous pouvez utiliser un côté pour un phage, vous pouvez utiliser un autre site pour d'autres pages et solide. Mais parce que j'ai cette feuille de papier et je vais l'utiliser sur d'autres projets futurs. Vous pouvez simplement garder un œil sur le gaspillage de papier et dépenser trop d'argent essentiellement. Commençons par les comptes, si vous vous souvenez, et je vais juste vous tenir au courant. On a des comptes ici et je vais l'écrire. Donc nous allons faire la même chose comme nous l'avons fait pour la précédente. Cette semaine. On va inclure le haut. Maintenant, nous allons inclure un côté sieste. Donc, fondamentalement, ce nav style boîte, bouton logo, btn et comptes comme ceci. Je ne sais pas comment épeler aujourd'hui celui qui ne fait pas attention à ça. Donc, si je supprime ceci pour décider, vous pouvez clairement voir, si je zoom un peu plus près, ce sont des comptes et juste pour vous, et nous allons l'écrire ici, donc comme ça. Donc, il peut savoir en haut de la page ce que c'est et ce que vous devez dessiner sur celui-ci. Et je vous recommande vraiment de le faire pour toutes vos pages. Mais passons maintenant à autre chose. Donc, je vais étendre ça un peu. Ce que nous allons réellement faire est essentiellement d'utiliser la même mise en page comme nous l'avons fait ici avec la page d'accueil. Donc, je vais utiliser cette même section héros pour toutes mes pages parce que cela me donne une excellente opportunité juste de montrer quelques différences clés entre toutes ces pages. Mais donnons-le un peu de torsion. Au lieu de le faire comme ici sur la page d'accueil où l'image est sur le côté droit. Le texte est sur le côté gauche. Retournez-la, et faisons-le. Alors dessinons une ligne comme celle-ci pour notre section héros. Et faisons un héros de l'image. Donc, fondamentalement, la même chose. Et je vais le mettre ici pour que les gens, je suis G. Comme vous pouvez le voir, laissez-moi zoomer un peu plus près. Donc, les gens image et juste pour que je ne peux pas ce que c'est. Et je peux mettre le titre ici, texte et CTA. Maintenant, cet appel à l'action n'a pas vraiment besoin de vous conduire à des pages supplémentaires comme il est sur la page d'accueil. Parce que sur la page d'accueil, vous voulez promouvoir ce qui est le plus important pour votre projet, votre marque ou autre. Mais sur ces pages intérieures, ce qui est en fait parce que nous sommes sur le discours de compte. Vous voulez réellement promouvoir des sections de cette page afin ne pas vouloir que les gens perdent et perdent trop de temps. Vous voulez les emmener directement à cette section. Donc, nous avons un compte, nous savons, par exemple, de l'expérience des banques. La majorité des gens ouvrent un compte chèques. Ainsi, vous pouvez, lorsque vous cliquez là, il peut les amener directement à la section compte courant. Donc, ce que nous allons réellement écrire ceci ci-dessous est peut-être ouvrir votre compte parfait ou votre compte ou autre. Aujourd'hui ou si vous voulez structurer les morts sont écrites sur la façon d'écrire Daisy et Tom peur. Ensuite, l'attention que, donc ce que nous pouvons faire est d'utiliser une rangée d'icônes vu, disons qu'ils avaient pour les services ? Donc, nous pouvons utiliser pour différentes icônes comme celle-ci. Donc c'est i, c, n. Et ici vous pouvez vraiment dessiner parce que ceux-ci sont un peu plus grands, vous pouvez dessiner des étoiles, par exemple, juste pour indiquer que c'est votre icône. Vous pouvez utiliser n'importe quel autre sujet que vous pouvez dessiner comme ça. Donc, il est vraiment à vous combien de temps vous voulez investir dans celui-ci évidemment vu qui peut griffonner rapidement et vous pouvez voir juste là. Donc, ces comptes sont fondamentalement différents comptes et je vais en fait écrire les noms de ces comptes. Ainsi, par exemple, tarte, étrangère, millénaire, et premium. J' écris en fait des noms de compte d que la banque m'a fourni afin que je sache lequel est lequel. Maintenant, ces icônes vont être un peu différentes les unes des autres parce que nous voulons illustrer ce que l'utilisateur a cliqué. Donc, lorsque l'utilisateur a cliqué sur quelque chose, peut-être que l'icône devient noir et blanc. Et toutes ces icônes sont en couleur. Alors écrivons ça. Donc ICM, noir et blanc. Lorsque vous cliquez sur, coloriez, si non. Vous pouvez voir ici de ce côté-ci. Donc, cette section ici, comme je le répète, est évidemment vraiment utile parce que vous pouvez l'utiliser à votre avantage. Vous pouvez écrire quelques notes. Encore une fois, si vous revenez à ce projet, disons une semaine plus tard, si vous montrez ces filaires à un client, peut-être que vous attendez la réponse, peut-être qu'ils vous répondront dans une semaine, deux semaines ou autre. Vous serez en mesure de comprendre et de savoir quel était votre processus de pensée quand vous avez réellement créé D. Donc c'est pourquoi je continue à dire que cet espace est vraiment utile. Et maintenant sous le bureau, mais voyez que cette icône est sélectionnée. Prenons un peu. Et juste pour montrer qu'il est sélectionné, Peut-être que nous pouvons faire une ombre portée autour juste pour que nous montrons qu'il est sélectionné. Ci-dessous, peut-être pourrions-nous inclure une image. Peut-être que nous pouvons inclure, alors disons Démarrer compte. Parce que c'est ce que c'est. Nous avons ici un paragraphe et nous avons un appel à l'action. Et peut-être qu'il peut dire appliquer maintenant. Et quand un utilisateur clique sur ce bouton Appliquer maintenant, il va les emmener au forum en ligne qu'une banque a déjà préparé. Nous n'allons pas concevoir cela parce que la plupart des fois vous allez parler à vos clients, ce qu'ils ont préparé, ce qu'ils n'ont pas. Je vais vous donner un exemple, un exemple rapide, et celui que vous voyez la plupart du temps, nos cartes, beaucoup d'entreprises utilisent Google Maps parce que l'intégration avec le site Web est extrêmement rapide. C' est extrêmement facile. N' importe qui peut le faire, en particulier les petites entreprises avec des plug-ins, si les gens utilisent des sites Web WordPress, par exemple, des plug-ins partout. Alors pourquoi perdre votre temps, gaspiller le budget du client en reconcevant une carte, ce que vous pouvez faire dans le cas Maps est simplement faire rectangle et écrire la carte. Dans ce cas particulier. plupart du temps, les clients ont également besoin de lecteurs multimédias. Donc, une fois de plus, l'intégration est fondamentalement osée. Ils s'intègrent juste oser à lecteur multimédia. Et dans ce cas, ils utilisent essentiellement un formulaire. Ils utilisent un formulaire en ligne qu'ils ont déjà, qui fonctionne déjà. Et ça n'a pas d'importance à quoi ça ressemble. Donc, lorsque l'utilisateur clique ici sur ce bouton de fourniture maintenant, il va les amener à l'extérieur vers un formulaire qu'ils vont remplir avec leurs informations personnelles. Et peut-être qu'il peut les amener à la page de confirmation que vous pouvez conduire à la conception et voir avec refusé si cela est nécessaire. S' ils n'ont pas la page Confirmation, va les ramener, par exemple, à cette page une fois qu'ils l'ont effectivement remplie là-bas. Et disons que notre petit pop-up peut apparaître et leur faire savoir la dette, le caissier de banque va les contacter dès que possible. dessous de cette section, ce que nous allons réellement inclure et détruire sur toutes les pages sont des questions courantes. Des questions si courantes. Et pour celui-ci, donnons-lui la division de trois. Comme ça. Comme vous pouvez le voir, c'est extrêmement désordonné, extrêmement rapide. Mais c'est le but de ces filaires en papier. Nous allons donc utiliser ICN. Je vois, et je vois n juste ici. Nous avons donc un titre, nous avons un paragraphe expliquant, par exemple, la section de celui-ci. Donc, disons que ce sont nos questions de compte, questions bancaires, outils utiles, quoi que ce soit, et des liens peuvent être ici sous forme de texte. Alors écrivons ça. Je vois le titre plus le paragraphe, puis les réponses. réponses cliquables comme ça. dessous, nous allons avoir notre bande infinie. Logo donc. Ce que nous avons fait est de virer membre Emplacement, téléphone et e-mail ici. Nous allons en fait inclure des informations ici, mais ne perdez pas trop de temps sur cette section. Et enfin quatre termes juste ici. Vous pouvez simplement l'écrire pied de page parce que nous l'avons évidemment créé dans l'exemple précédent ici. Et si vous voulez, vous pouvez investir du temps, vous pouvez mettre dans l'effort et faire exactement la même chose sur toutes ces pages. Je ne vais pas faire ça. Je veux juste accélérer les choses un peu. Mais encore une fois, si vous voulez, si vous avez le temps, si vous avez le budget, vous pouvez le faire pour toutes vos pages. Laisse-moi zoomer un peu. Comme si juste une sorte de vous pouvez voir comment notre page est en train de regarder en ce moment. Donc, comme vous pouvez le voir, tout se forme bien. Tout est comme il se doit, commencent déjà à obtenir une sorte de mise en page que nous allons utiliser sur toutes les pages. Donc, comme je l'ai déjà mentionné, nous avons notre navigation supérieure. Nous avons cette boîte maintenant, qui est notre moyenne f. Nous avons la section héros que nous allons effectivement copier coller sur toutes nos autres pages. Nous avons déjà quelques mises en page que nous pouvons explorer et utiliser dans des pages supplémentaires sous la forme de ces icônes. Nous avons déjà ces images texte et un bouton afin que nous puissions les retourner. Par exemple, nous pouvons mettre une image sur le dessus, nous pouvons mettre du texte ci-dessous, puis bouton d'un côté. Nous avons aussi ces cartes que nous pouvons explorer. Et par exemple, dans certains d'entre eux, nous pouvons peut-être inclure des images ici. Nous pouvons peut-être inclure différents styles de boutons et ainsi de suite. Nous commençons donc déjà à avoir ces exemples de mise en page et ces idées de mise en page. Donc, dans la prochaine vidéo, on va passer aux prêts. Et je vais vous montrer fondamentalement cette même dengue, mais dans un paquet différent juste pour que vous puissiez voir comment vous pouvez explorer le concept de descente sur d'autres pages. Alors je te verrai là-bas. 20. Wireframes papier 3: Donc, dans cette vidéo, nous allons continuer là où nous nous sommes arrêtés dans la précédente et nous allons commencer par la page Prêts. Vous pouvez voir que j'ai déjà inclus toutes ces informations pour gagner un peu de temps. Donc fondamentalement la même chose qu'avec ces autres, mais juste ici, il dit un prêt. Si vous pouvez le voir un peu mieux. Ici. Et en dessous, ce que nous pouvons faire est d'utiliser la même disposition que celle que nous avons faite dans la précédente. Et je vais écrire, j'ai besoin d'un long aussi. Et vous pouvez voir que je commence à utiliser un vrai texte ici. Et j'ai déjà dit que dans les vidéos précédentes, vous pouvez faire une combinaison de textes réels et faux. Et je pense juste que cela est approprié d' avoir quelque chose de similaire sur leur site Web pour le moment déjà. Mais je vais écrire j'ai besoin d'un prêt pour et ensuite vous pouvez leur donner fondamentalement la même mise en page que nous l'avons fait dans la vidéo précédente. Ainsi, par exemple, vous pouvez inclure et ces informations. liquide si rapide. Et nous pouvons également utiliser des icônes ici, comme nous l'avons fait dans les exemples précédents. Biochar, maison et finance ou quoi que ce soit. Donc, nous allons évidemment changer cela dans la session filaire, mais ce n'est qu'un exemple rapide. Donc, disons que c'est ce qu'ils ont sélectionné vu dans l'exemple précédent. Prêt en espèces rapide, et peut-être qu'on peut l'écrire et obtenir un liquide long en 20 minutes ou 30 minutes ou quoi que ce soit. Comme ça. Cela va être centré évidemment sur les descendants. Mais parce que je le fais à main levée, vous pouvez voir un peu ici. Vous pouvez également le souligner. Centrer le texte comme ça, juste pour que vous puissiez le savoir. Et puis je suis allé à une mise en page similaire. Donc image sur le côté gauche. Mais au lieu de simplement le texte, nous pouvons créer une sorte de fonctionnalités. Alors donnons-lui ICN ici. Et voyons de l'argent dans 30 minutes avec un texto comme ça. Droit ? Baisse-le. Documentation Icm. Peut-être devraient-ils préparer des documents parce qu' on ne peut pas se présenter à une banque pour demander un prêt. Je vais vous demander des informations. Par exemple, votre permis de conduire, vous êtes actuellement des informations bancaires prairies et ainsi de suite et ainsi de suite. Voyons voir. En ligne, parce que peut-être vous pouvez le faire en ligne. Donc, si je compare cela avec notre exemple précédent, vous pouvez déjà voir ce que je fais ici. J' utilise donc cet exemple précédent avec une image, texte et un bouton. Et vous pouvez voir que j'ai implicite tous ces principes similaires fondamentalement à cet exemple. Juste au lieu du texte, j'utilise des icônes et l'image de texte est toujours sur le côté gauche, mais peut-être maintenant il peut être un peu plus grand pour accueillir toutes ces informations. Cela peut être plus étroit en fonction de ce texte, vous devez penser à toutes ces choses en raison de la conception réactive. Donc ne répond pas plus tard, peut-être que cette image sur un téléphone, voyons, peut aller pleine largeur. Et puis tout cela peut aller un sur l'autre comme ils sont ici, mais au centre de votre écran parce que vous êtes sur l'écran du téléphone. Maintenant, passons à autre chose et concevons d'autres choses. Alors voyons les dettes. Je peux écrire ici, par exemple, réponse dans 20 minutes. Parce qu'ils sont vraiment rapides avec ces prêts. Peut-être pourrais-je mettre ici un paragraphe de texte et appeler à l'action qui dit s'appliquer maintenant. Comme ça. Au lieu de dessiner toutes ces autres choses supplémentaires, si vous vous souvenez de la vidéo précédente et désolé, cette belle, je tire juste des papiers dedans et dehors. Donc, au lieu de dessiner toute cette section, écrivons simplement des questions com et mettons trois boîtes parce que ce sera beaucoup plus facile pour nous de comprendre ce que c'est. Des questions si courantes. Je vais mettre trois boîtes comme ça pour économiser de l'espace et du temps. C' est notre fiche d'information. Donc logo, parce que ces icônes sont vraiment simples, vous pouvez facilement les dessiner dans. Et enfin, nous avons un e-mail, comme vous pouvez le voir. Et enfin, nous pouvons écrire en pied de page et logo en bas. Donc, vous pouvez voir que ce processus n'a pas à vous prendre trop de temps. Vous pouvez vraiment le faire facilement et d'une manière rapide. Donc, vous pouvez voir que nous avons fondamentalement une disposition similaire vers la plage précédente, mais nous l'explorons d'une manière différente. Donc, au lieu de cela, comme je l'ai dit, une image et un texte et un bouton juste ici, nous avons une icône d'image, texte et bouton a déplacé ci-dessous, qui il est appliqué maintenant bouton d'appel à l'action, ceci et ceci et ceci, fondamentalement le même. Ceci et toutes ces parties supérieures sont fondamentalement les mêmes. Donc nous allons juste continuer là où nous nous sommes arrêtés avec toutes nos prochaines plages et la dette va venir après celle-ci. Et nous allons essentiellement utiliser ces éléments de différentes manières. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 21. Wireframes papier 4: Maintenant, nous allons créer une page pour les cartes. Donc, pour ce discours, diacre, utilisez différentes cartes ou cartes de crédit, cartes de débit. Ils peuvent créer leurs propres cartes et peut-être même des cartes-cadeaux afin qu'ils puissent également explorer cette option. Donc nous pouvons avoir un titre ici, peut-être qu'il peut écrire compagnon quotidien. Voyons voir. Désolé pour le chien et l'arrière-plan si vous pouvez l'entendre. Mais il ne peut rien y faire. Peut-être pourrions-nous faire notre paragraphe ici. Et voyons que nous pouvons inclure notre image actuelle ici. Alors peut-être que c'est un chariot ou 1-2-3, 4-5-6. Et je peux même l'écrire ici. Carte pour gagner un peu de temps. Le logo peut aller ici, Visa peut peut-être y aller. Et le Kingo juste ici. Comme la dette, juste pour que nous sachions que c'est un chariot. Peut-être pourrions-nous le mettre dans une sorte de forme. Peut-être que nous pouvons utiliser Adobe XD pour inclure des animations différentes à l'intérieur de celui-ci, mais c'est vraiment, une fois de plus, budget de temps et tout ce dont nous avons parlé auparavant. Eh bien, c'est un mort en dessous de Dat. On peut utiliser des cartes de crédit. Et peut-être pourrions-nous grandir avec Visa et MasterCard. Peut-être qu'ils en ont d'autres en option, mais nous ne savons pas pour le moment. Mais si c'est le cas, nous pouvons inclure différents types de sections ici. Donc, pour cette section, nous pouvons inclure un courant. Et je vais en fait écrire. Et voyons, Visa, courants de crédit, courant de rassemblement. Et fondamentalement la même chose. Nous pouvons avoir une description et peut-être que nous pouvons avoir postuler maintenant comme un lien, qui va en fait les emmener vers le forum d'application externe dont nous avons parlé dans les vidéos précédentes. Alors peut-être qu'ils peuvent simplement cliquer ici et aller à ce formulaire extérieur. Donc, ce n'est que notre graphique. C' est juste pour leur montrer comment certaines cartes dans le bus peuvent ressembler. Comment certaines cartes personnalisées peuvent ressembler juste pour leur donner un peu d'intérêt visuel. Mais ici, comme le défilement vers le bas, ils peuvent voir les cartes de crédit et offrir notre Visa et MasterCard, peut-être qu'ils peuvent inclure un autre comme American Express ou tout autre fabricant de cartes D ne peut pas conclure, oser. Les dissections sont donc injustes pour guider les utilisateurs vers tout ce qui est disponible en ce moment. Donc nous allons inclure les mêmes sections, mais pour les cartes de débit, nous allons avoir la même chose ici. Donc deux cartes en cours. Et ne perdons pas trop de temps parce que ces sections sont les mêmes, le même aspect et la même sensation. Différent. Conception de la carte. Ainsi, par exemple, nous pouvons inclure une conception de voiture différente à l'intérieur. Juste pour illustrer que les cartes de débit et de crédit sont différentes pour qu'elles puissent voir, par exemple, si vous les avez dans leur portefeuille, elles peuvent voir lequel est débit, lequel est crédit, évidemment, milieu, que nous pouvons ont une section, par exemple, créez la vôtre comme ça. Et peut-être que nous pouvons inclure un autre courant avec un certain design peut être que nous pouvons mettre une ombre portée, peut-être que nous pouvons mettre une forme de fond ou une sorte ou autre et juste un courant personnalisé comme ça. Donc, nous allons réellement concevoir défausse plus tard sur un site à partir d'Adobe XD. Et peut-être pourrions-nous lancer un appel à l'action. Créez le vôtre. Ce CTA va en fait les prendre au formulaire d besoin de remplir le formulaire que la banque a déjà. Ils peuvent alors commencer à créer leur courant parfait. Disons qu'ils ont ce créateur de panier à l'intérieur de la banque, donc ils doivent grandir en magasin et voir différentes options. Mais ils envisagent de mettre ces options en ligne afin que les gens puissent choisir parmi différentes formes, couleurs, ils peuvent choisir Visa, MasterCard, y a-t-il des fabricants ? Ils peuvent, par exemple, inclure différentes images à l'intérieur et ainsi de suite. Mais c'est tout avec la banque, c'est avec eux. Ce qu'ils veulent donner une option D aux utilisateurs pour celui-ci. Enfin, ci-dessous que nous pouvons inclure une section avec une image et l'appeler et cartes-cadeaux. Nous pouvons inclure un paragraphe et par exemple, et pourtant le vôtre. Et ils peuvent demander la carte-cadeau. Ils peuvent mettre l'argent sur la voiture à la fin, puis le donner comme cadeau à certains membres de leur famille, amis, ou autre chose. Ci-dessous, nous allons avoir des questions communes. Nous allons faire la même chose que nous l'avons fait à la page précédente. Nous allons avoir la bande d'information, donc logo, emplacement, téléphone, e-mail. Et enfin pied de page en bas. Vous allez remarquer, si je zoome un peu comme ça, vous allez remarquer que surtout cette section en bas est vraiment écrasée. Mais c'est vraiment exprès parce que la chose principale et différenciante à propos de cette page est la section d'ici. Donc juste en dessous de l'image du héros, jusqu'à ici, juste au-dessus des questions courantes. Et parce que nous avons déjà cela, fondamentalement c'est la même chose que nous avons conçu sur les pages précédentes. Alors, comment va vous montrer sur cet exemple ? Donc c'est notre page d'accueil. Nous allons utiliser essentiellement cette même mise en page exacte avec un texte d'image et un bouton. Juste rétréci l'image un peu. Par exemple, peut-être inclure un peu moins de texte. Peut-être que ce paragraphe est beaucoup plus grand que celui-ci et ainsi de suite. Alors ne perdez pas trop de temps dans vos filaires que nous dessinons mêmes éléments encore et encore et essayons de les rendre parfaits. Vous savez déjà que c'est une image. L' image peut être plus grande et plus large ou plus étroite, peu importe. Il peut avoir, une ombre portée et ainsi de suite, ainsi de suite. Alors ne perdez pas trop de temps dessus, dessinez-le simplement et avancez. Cette partie, comme je l'ai dit plusieurs fois, est juste un rinçage vers le bas toutes vos idées que vous avez dans votre tête. Et vous voulez les mettre sur un morceau de papier juste pour que vous puissiez montrer au client ou à d'autres designers. C' est notre plage de cartes. Et fondamentalement, nous sommes en train de se rétrécir jusqu'à la fin de notre processus filaire. Nous avons donc investi la connexion numérique et je vais vous montrer une plage de tableau de bord plus tard. Je te vois dans la prochaine vidéo où on va investir la plage. 22. Wireframes papier 5: Passons maintenant à la plage d'investissement. Et encore une fois la même chose qu'avant, tout est pareil ici. Alors passons maintenant à autre chose et c'est l'écriture dans laquelle je veux investir. Et nous allons avoir la même disposition qu'avant. Donc nous allons leur donner quatre options différentes, Soul et voir que cette première est l'éducation. Moi, cette seconde, c'est de l'immobilier. La troisième, c'est la famille. Et enfin, c'est pour la dette de retraite. Et nous allons inclure différentes icônes ici. Je vais m'assurer que celui-ci est sélectionné de la même manière que dans tous les autres exemples. Et en dessous, nous pouvons inclure un autre titre. Investissez donc dans un avenir meilleur ou à l'avenir. Copier. On va s'en occuper un peu plus tard, les femmes voudront Adobe XD. Nous allons donc avoir un peu différent cette fois. Donc vous allez avoir deux images. Donc, vous allez remarquer fondamentalement, comme je continue de parler, c'est exactement la même chose, juste positionné un peu différemment. Donc on va avoir un titre ici. Texte et bouton. Appel à l'action, peut-être en savoir plus. Donc, titre et déboutonner. Peut-être le CTA. dessous de cela, nous allons avoir une autre image pour qu'elle puisse aller d'ici. Et voyons, il va écrire en toute sécurité votre avenir. Mais nous allons avoir un paragraphe de texte et bouton d'appel à l'action, par exemple, pour en savoir plus. Et ce que cette section fait avec une image. Et vous pouvez voir cette même section dans d'autres Bart juste par exemple, dans certains endroits, des images découpées ici pour s'adapter à la grille. Et dans certains cas, il est étendu au site de notre page. Et fondamentalement ce que c'est, c'est que toute cette section porte sur toutes ces questions de sécurité sociale ou d'avenir. Vous pouvez le faire en investissant dans l'éducation, investissant dans l'immobilier, en investissant, dans la famille, en investissant dans la retraite. Fondamentalement, tout cela est pour votre avenir. Donc, cette section vous dit combien il est important d'investir dans l'un ou l'autre de ces éléments. Et vous pouvez évidemment choisir celui que vous voulez investir dans l' avenir parce que c'est l'éducation. Et cela va vous donner deux paquets d'investissement différents pour le paquet éducation. Donc, c'est pourquoi je disais avant à propos du pied de page, par exemple, nous allons déplacer tous ces encombrements du haut, qu'ils ont un actuellement sur le site web actuel jusqu'au pied de page. Et nous allons en fait distribuer tous ces éléments inutiles de la navigation principale à ici. Donc, au lieu d'avoir, disons investir, puis abandonner l'éducation et ensuite tomber, disons deux d'entre eux. Donc peut-être que cela peut être un fonds pour l'éducation, cela peut être un autre fonds, Legacy Scholarship for node, peu importe. Ils ont six options différentes. Donc, vous pouvez juste imaginer le calendrier juste ici à l'intérieur de la navigation. Donc, c'est beaucoup plus facile à l'œil. Il est beaucoup plus rapide pour les gens de comprendre si vous mettez tout de la navigation ce qui n'est pas nécessaire. Investir est donc nécessaire parce que c'est l'un de leurs services clés et de leurs offres clés. Mais toutes ces autres fonctions et autres statistiques ne sont pas nécessaires pour être à l'intérieur de la navigation. C' est pourquoi il est important de décomposer votre navigation et vous pouvez mettre toutes ces informations dans le pied de page. S' il y a trop d'informations dans le pied de page, personne ne s'en soucie parce que le forum est toujours au bas de la page, mais vous pouvez toujours en avoir besoin un peu plus bas et inclure des listes déroulantes pour le pied de page aussi. Mais c'est le point principal de ce processus de filature, juste pour jeter vos idées sur un morceau de papier et voir tout ce que vous avez devant vous appartient ici. Ils vont inclure la section « Semble ». Question si commune. Avec trois boîtes semblent comme avant, nous allons inclure la bande d'information ici. Donc logo, ces trois icônes, comme avant. Donc comme ça. Et enfin le pied de page juste ici en bas. Et c'est fondamentalement tout pour ce discours. Comme vous pouvez le voir, je n'ai pas de notes, mais peut-être plus tard, si je me souviens de quelque chose, peut-être que je peux inclure certains nœuds. Voyons donc, peut-être inclure une boîte autour de l'icône. Juste pour indiquer, peut-être, peut-être que nous pouvons inclure une boîte comme celle-ci. Si l'argent AIG sélectionné, peut-être la boîte peut avoir un aperçu. Il peut avoir une ombre portée, il peut avoir quelque chose d'autre juste pour indiquer que cette case est sélectionnée et toutes ces autres cases ne le sont pas. Ainsi, vous pouvez toujours jouer comme il continue de le voir avec cette section de votre papier. Et juste pour inclure quelques informations supplémentaires ici sur la page. Sinon, vous pouvez le laisser vide, et c'est fondamentalement tout. Dans la prochaine vidéo, nous allons terminer cela en ajoutant notre pêche numérique. Et je te verrai là-bas. 23. Wireframes papier 6: Alors terminons maintenant notre site web avec l'ère numérique. Et comme je l'ai dit, au début de ce bij numérique va avoir tous leurs services numériques que les gens peuvent utiliser de la maison sur leurs téléphones mobiles, portables, ordinateurs et ainsi de suite. Donc Daryl a le titre. Donc, les services pour l'avenir moderne. Et nous allons en fait utiliser la même mise en page que celle que nous avons faite sur toutes ces pages. Laissez-moi donc trouver des comptes pour chacun, par exemple. Donc, je vais utiliser ceci à mon avantage et utiliser essentiellement les piles d'appels futures dans Adobe XD, que je vais réellement montrer plus tard lorsque nous commencerons à concevoir. Parce que je fais ça de temps en temps. Lorsque je commence à planifier, je commence déjà à voir des fonctionnalités que je peux utiliser à l'intérieur d'Adobe XD pour accélérer un peu les choses. Et à mon avantage, fondamentalement, il y a une fonctionnalité appelée piles dans Adobe XD. Je te montrerai ça plus tard. Mais fondamentalement, ce qu'il fait, c'est que vous pouvez basculer entre ceux-ci. Donc, d'une part, vous pouvez avoir une image de gauche, l'autre, vous pouvez avoir une image de droite. Donc, fondamentalement, nous sommes juste un clic sur un bouton et un interrupteur. Vous pouvez les retourner pour accélérer un peu les choses. Nous pouvons également le faire en tant que composant et l'adapter tout au long de notre conception. Donc, d'une part, il peut être pleine largeur. D' une part, ça peut être comme ça. Ainsi, les portes peuvent être nos états de composants. Donc je fais toujours ça comme un désir. Prévoyez toujours à l'avance notre puanteur. Ce que je peux faire avec mes conceptions plus tard lorsque je les amènerai dans des dettes Adobe XD, exactement ce que je fais. Et j'ai vraiment recommandé que vous le fassiez aussi. Si vous commencez juste avec ça, ne vous inquiétez pas, vous pouvez juste commencer comme ça et ensuite planifier à mesure que vous allez. J' essaie juste de rationaliser mon processus autant que possible et d'augmenter ma vitesse autant que possible parce que dès que je finis cela, je peux ramener plus d'argent à la maison. Et puis en gaspillant mon argent, mon temps et mes clients dépensent des choses inutiles. Revenons à ça. Donc, pour ce premier, je vais faire de l'image juste ici. Appelons ça E banking. Donnons-lui un paragraphe. Donnons-lui le bouton. Et peut-être qu'il peut dire en savoir plus ou n'importe où. Je vais juste mettre CTE. Maintenant, sur ce prochain, on peut mettre une image juste ici. Cela peut être m bancaire, donc la banque mobile. Même chose, paragraphe, CTA. Laisse plus un. Cela peut être des paiements de code QR ou guérir pourrait être n'importe quoi. Et évidemment, nous allons traiter des détails lorsque nous passons à Adobe XD. Et voici notre dernier assistant virtuel de l'âme. Mon père. Nous allons avoir un paragraphe d'appel à l'action. Et enfin, ci-dessous, nous allons avoir la même chose que toujours. Des questions si courantes. Ces trois boîtes sont dépouillées. Donc ces trois icônes et notre pied de page en bas. Donc, vous pouvez voir de ne pas trop parler, quel point c'est rapide et facile. Donc, fondamentalement, je peux me laisser une note, utiliser des piles dans Adobe X. Et donc ce que cela signifie fondamentalement, encore une fois, c'est que je peux en créer l'un. Je peux faire une pile. Je peux ensuite le dupliquer en utilisant la fonction de grille d'enchères Gary ou n'importe quelle fonction. Sinon, il doit offrir et ensuite simplement les changer. Donc, à gauche à droite, à gauche à droite, simplement avec un clic d'un bouton va être beaucoup de plaisir et vraiment super simple. Tu le verras une fois qu'on aura atteint la partie design. Donc c'est fondamentalement tout pour celui-là. Dans la prochaine vidéo, je vais vous montrer un login et inscrire des formulaires comment nous pouvons concevoir la dose. Une vidéo. Après cela, je vais vous montrer comment vous pouvez créer ces pages de tableaux de bord une fois de plus sur un morceau de papier. Et parce que c'est important, parce que ça va être différent. Et nous allons déplacer notre navigation vers la gauche. Tu vas voir ça dans cette vidéo. Et après ces vidéos, nous allons les scanner et les déplacer vers Adobe XD, où nous allons réellement les transformer en images filaires. Alors je te verrai dans la prochaine. 24. Wireframes papier 7: D' accord, passons maintenant dans les écrans de connexion et d'inscription. Donc ce que je vais faire ici, comme vous pouvez le voir, je retourne à mon journal. Donc je vais le faire d'une manière plus large. De ce côté-ci, nous allons avoir une image. Vous pouvez aussi le faire. Et de ce côté-ci, nous allons avoir des informations. Évidemment, appelons-le Se connecter et s'inscrire. L' inscription va évidemment avoir un peu plus d'informations que le login, car la connexion nécessite juste votre email et votre mot de passe. Par exemple, peut-être certains coordonnés Vous devez entrer avec varie vraiment d'un client à l'autre. Ce qu'ils veulent inclure à l'intérieur. Lorsque vous vous inscrivez pour un compte auprès de l'entreprise, vous devez apporter des informations supplémentaires. Donc, pour la connexion et l'inscription, nous pouvons utiliser exactement la même mise en page, juste un peu différente entre eux, comme je l'ai dit, parce que l'inscription a un peu plus d'informations. Donc, par exemple, pour la connexion, Peut-être que nous pouvons écrire dans Bienvenue retour. Et connectez-vous à votre compte. Et laissez-moi zoomer un peu plus près pour que vous puissiez voir ça un peu mieux. Maintenant, nous pouvons avoir un formulaire, donc e-mail et un forum peuvent aller juste ici. Évidemment, il peut être pleine largeur. Votre adresse e-mail et votre mot de passe. avance rapide peut aller bien ici. Comme ça. Et peut-être qu'on peut écrire, n'avoir pas de compte. Comptes. Créez un ici. Et cela peut être un lien. Donc lien de couple collégial. Et ça les amène à la page d'inscription. Donc c'est notre login clique Wendy. Il va les amener à s'inscrire. Et sur l'inscription Peut-être disque par écrit ou déjà avoir un compte se connecter ici, puis les emmène à l'écran de connexion. Donc c'est fondamentalement tout. Et ce sont tous les changements et la mort doit se produire entre ces deux-là parce que les autres informations sont fondamentalement les mêmes. Ce que nous pouvons faire ici est d'ajouter un bon grand appel à l'action, qui peut droit dans la connexion évidemment comme ça. Et peut-être que nous pouvons écrire dans mot de passe oublié. Parce que les gens le font habituellement. Et ils peuvent cliquer sur Oser. Il pourrait les amener en externe à une page supplémentaire où ils peuvent remplir des informations, questions de sécurité et ainsi de suite, afin qu'ils puissent récupérer leur mot de passe et leur compte. Peut-être que nous pouvons même inclure quelques formes ici. Alors peut-être que je peux inclure la forme comme ça. Peut-être qu'il peut inclure une forme de cercle peut conclure quelques mensonges différents et ainsi de suite. Mais nous le verrons quand nous passerons à la conception. Une dernière chose à ce sujet avant de passer au tableau de bord et vidéo finale de notre série filaire sur papier est, je vais m'en tenir à ma grille. Et disons que c'est six colonnes de large. Peut-être que si nous sommes sur l'écran d'inscription, cela peut être trois colonnes de large pour le courrier électronique. Alors quatre, désolé pour le prénom et le nom de famille. C' est six colonnes de large juste pour remplir l'espace. Et vous pouvez évidemment adapter ces champs de formulaire au fur et à mesure. Et en fonction de ce que vous avez besoin d'utilisateurs pour entrer à l'intérieur d'eux. Donc c'est fondamentalement tout pour cette vidéo. Je vous verrai dans la prochaine quand nous allons commencer avec le tableau de bord, je vais vous montrer quelques facteurs clés de différenciation entre toutes les pages que nous dessinons jusqu'à présent et la page de tableau de bord et pourquoi elle est différente. Alors je te verrai là-bas. 25. Wireframes papier 8: Finalement, finissons maintenant avec notre propre tableau de bord. Et désolé, je dois utiliser une configuration différente parce que j'ai dû déplacer mon appareil photo à cause des problèmes de barrière. Donc, enfin, je vais écrire dans le tableau de bord juste ici en haut. Donc, il semblait que lorsque tous les exemples précédents, je vais dessiner dans le contour comme ceci. Encore une fois, semblent comme dans les exemples précédents. Mais dans ce cas, parce que c'est un tableau de bord et nous devons montrer des informations supplémentaires sur la page. Nous allons avoir un autre type de navigation. Nous allons avoir au lieu de la navigation supérieure, qui va contenir toute notre moyenne, une fonctionnalité de navigation importante. Nous allons le déplacer vers la gauche et tout le point du tableau de bord, si vous le regardez sur dribble ou le week-end, vous avez tous ces exemples différents est de montrer autant de données que possible, autant d'informations sur votre compte, autant d'informations sur et vous êtes une dépense différente, par exemple, vos cartes, dernières transactions, les dépenses, et ainsi de suite. Donc, au lieu d'encombrer le site Web principal avec, c' est pourquoi nous avons un bouton d'inscription Login, qui va nous conduire au tableau de bord où nous allons réellement présenter toutes ces informations d'une manière agréable et facile à comprendre . Maintenant, en ce qui concerne la navigation, nous allons devoir le faire. Donc, nous allons avoir la bande supérieure juste ici avec le logo. Nous allons avoir Avatar avec le nom juste ici en haut. Et là, sur le côté gauche, nous allons avoir notre navigation. Il va être d'environ dix ou 15% de la largeur totale de la page. Et au lieu d'avoir notre navigation en haut, nous allons la déplacer vers la gauche, ce qui est la plupart des fois où vous allez accéder à ces tableaux de bord. Vous allez voir la navigation ici. Mais ce que cela fait sur notre mise en page, nous allons en fait déplacer notre grille d'ici. Donc à partir d'ici, cette section, voyons du logo à ici. Au lieu de lignes qui s'écoulent ici, nous allons en fait la déplacer dans cette section juste ici. Donc, ces 80 ou 85 % vont être inclus dans notre système de grille comme celui-ci. Bien que cela soit vide, nous allons y parvenir en augmentant la marge gauche de notre système de grille. Je vais le montrer dans Adobe XD. Et nous allons en fait simplement l'utiliser pour la navigation pour une taille de bureau et pour les tailles de tablette et de mobile. Nous allons faire la même chose comme nous le faisons toujours dans ces tailles. Et vous voyez qu'en ligne, c'est essentiellement que nous allons déplacer cette navigation vers le haut ou utiliser quelques négociations importantes comme une note collante vers le bas. Donc nous allons avoir un tableau de bord. Et tout cela va contenir des icônes. Nous allons avoir un comptage. On va avoir des transactions. On va avoir des prêts. Et je vais vous montrer tout ça dans une seconde. Nous allons avoir des cartes, des investissements dans le numérique. Et enfin, une déconnexion en bas. Comme je l'ai dit, vous pouvez utiliser une déconnexion et le positionner ici. Ainsi, par exemple, si les utilisateurs cliquent sur cette image, peut-être qu'il peut s'agir d'une liste déroulante, peut-être que la déconnexion peut être là. Peut-être qu'il peut les ramener à la page d'accueil, peut-être pourrait-il les amener à certaines offres que la banque a actuellement. Donc c'est vraiment à vous et à votre client d'être d'accord sur la mort en termes de cette navigation ici, vous pouvez voir, donc nous avons un tableau de bord, nous avons une carte de crédit de transaction de compte. Donc fondamentalement toutes ces mêmes choses au lieu du tableau de bord. Le tableau de bord sera donc notre écran d'accueil pour cette section de tableau de bord. Comme nous avons la maison pour l'écran d'accueil pour la section du site Web. Et nous avons une déconnexion ici. Je l'ai délibérément espacé comme ceci à des fins UX parce que vous ne voulez pas que les utilisateurs cliquent accidentellement ici et déconnectent la lecture voulant le faire. Et comme je l'ai dit, nous allons utiliser dans cette section juste ici pour l'information. Disons donc que cet utilisateur s'appelle Michael. Pour qu'on puisse écrire, bienvenue à Michael. Michael. Et voici vos statistiques pour cette date particulière. Alors voyons pour en effet. Donc il peut savoir ou elle peut savoir que ce sont les statistiques pour cette date particulière. Pour que nous puissions avoir ces états comme celui-ci. Donc disons compte méchant. Et disons qu'ils ont 30 clés dans leur compte, comme ça. Ensuite, nous allons avoir des cartes, disons. Ainsi, ils peuvent choisir différentes cartes comme celle-ci. S' il y a plusieurs cartes, nous pouvons inclure la pagination. Ainsi, ils peuvent voir quelle carte est sélectionnée à partir d'ici. Nous allons en fait inclure une autre section ici pour le problème avec la pagination comme celle-ci. Ou cela peut être une section d'aide. Donc, au lieu de la promo, si la banque n'a pas la promo pour le moment, peut-être pourraient-elles les aider et les guider à travers. Donc, par exemple. Quelle est la section longue ? Quelle est la section des chariots et ainsi de suite. Ils peuvent y accéder rapidement en cliquant simplement ou en appuyant sur leur. Maintenant et en dessous, nous allons avoir des transactions par exemple, parce que c'est pourquoi vous êtes venu ici fondamentalement. Donc les transactions latus. Et ces transactions peuvent être quelque chose comme, je ne sais pas, aujourd'hui. Catégorie café est la nourriture avec ICN et dépenser donc moins, voyons, 15$. Donc, fondamentalement, vous pouvez imaginer à quoi cela va ressembler. Et nous pouvons évidemment inclure dans cette section pour répéter et vers le bas. Et je vais juste finir ici. Et écrire une charge plus. D' accord, ici en bas. Ainsi, ils peuvent cliquer sur un onglet là pour charger plus de ces transactions. Et par exemple, nous pouvons inclure un curseur juste ici sur le côté droit, et ils peuvent glisser de haut en bas ou creuser simplement utiliser la molette de défilement leur souris pour faire défiler vers le haut et vers le bas pour voir toutes leurs transactions. Mais comme nous avons déjà des transactions ici, ils peuvent simplement cliquer sur Lord Moore Any peut les amener au discours de transaction où ils peuvent réellement voir plus de détails. Enfin, nous pouvons peut-être ajouter des dépenses. Alors voyons toutes les dépenses. Donc peut-être tous les jours, toutes les semaines et tous les mois. Donc comme ça, peut-être qu'on peut les inclure. Donc tous les jours, hebdomadaires, mensuels. Et peut-être que nous pouvons avoir des montants réels. Donc il vend ça. Donc, évidemment daly va être plus bas, hebdomadaires prêts à être plus élevés et mensuels va être le plus. Enfin, peut-être que nous pouvons inclure un tableau ici. Donc, je vais simplement taper le graphique. Et peut-être que je peux inclure quelque chose comme les vêtements, nourriture, les services publics et les paiements de voiture, peut-être. Juste comme ça. Donc, dans ce graphique peut montrer ces séparément s'ils cliquent sur eux, ou il peut montrer tous ici. Mais vous pouvez juste imaginer que ce sera un peu trop si vous avez beaucoup de ces éléments ici. Donc, l'utilisateur iter peut taper tous ces séparément et il va les montrer ici. Ou ils peuvent en fait les inclure tous dans ce graphique unique. Et cela peut vraiment leur montrer ça là-bas. Donc c'est fondamentalement tout pour cette section filaire. J' espère vraiment que ça vous a plu. Et désolé pour cette dernière vidéo pour avoir été jambes ce mon appareil photo et a décidé de me attacher. J' ai donc dû utiliser une batterie externe, externe et un angle de vue comme ceci. Donc, si je peux simplement te montrer comme ça, pour que tu puisses voir à quoi ça ressemble. Dans la prochaine série de vidéos, je vais scanner toutes ces images filaires, les amener à l'intérieur de D. d'Adobe et je vais vraiment vous montrer comment vous pouvez commencer à créer vos filaires dans Adobe XD, et comment vous pouvez réellement passer de filaires à la conception. Une fois de plus, si vous n'avez pas de scanner, vous pouvez simplement prendre une photo avec votre téléphone. tous ces éléments, amenez-les à l'intérieur d'Adobe XD, comme expliqué dans l'une des vidéos précédentes. Si ce n'est pas le cas, si vous êtes seul à travailler sur ce sujet, vous pouvez simplement les avoir à vos côtés, comme je l'ai fait avec tous ces précédents que nous avons conçus dans cette section du cours. Vous pouvez donc les garder à vos côtés et passer au numérique directement à l'intérieur d'Adobe XD. Mais je veux juste vous montrer cette approche aussi que vous pouvez le faire aussi. Simplement vivanter boucher ou scandium, important dans Adobe XD. Et vous pouvez les avoir à portée de main à vos côtés pour toutes les futures références. Je te vois dans Adobe XD. 26. Importer nos films en papier: Ok, alors maintenant que nous avons terminé le processus de filature sur papier, et maintenant que vous numérisez vos papiers dans lesquels votre scanner ou pris les photos dans lesquelles votre téléphone. Maintenant, nous pouvons enfin ouvrir Adobe XD et commencer à apporter toutes ces informations. Et donc ce que j'ai ici, c'est que l'écran de démarrage d' Adobe XD va paraître un peu différent pour vous en fonction de ce que vous n'avez pas ouvert précédemment. Vous pouvez voir mes fichiers de conception ici que j'ai ouverts précédemment. Ça va avoir l'air un peu différent pour toi. Il sera vide si vous l'ouvrez pour la première fois et que vous n'avez jamais rien ouvert. Mais ici, nous allons utiliser ce web standard 1920, un tableau de bord. Il suffit de cliquer dessus. Il va ouvrir un nouvel onglet. Ça va ouvrir une nouvelle fenêtre. Et ce fichier est le fichier que nous allons réellement utiliser pour ce cours. Donc je vais cliquer ici et je vais l'enregistrer en premier, tout d'abord. Donc, si je clique ici, vous avez enregistré en tant que document local. Je vais cliquer juste là. Je vais lui donner un nom et appuyer simplement sur sauver. Maintenant que nous avons fait cela, nous pouvons aller de l'avant et commencer à renommer ces tableaux d'art. Nous pouvons commencer à créer d'autres tableaux d'art. Vous pouvez voir ici en haut, nous avons une nouvelle conception de site web de la banque. Et c'est le nom que j'ai décidé de donner à ce projet. Mais vous pouvez également aller de l'avant et donner à votre projet n'importe quel autre nom que vous voudrez. Maintenant, la prochaine chose que je veux faire est d'apporter mes filaires. Et vous pouvez voir les trames ici. Je suis allé de l'avant et les ai scannés et renommés pour une meilleure compréhension et pour une importation plus facile et plus tard pour l'exportation si nécessaire. Donc, le premier filaire que j'ai dessiné, je l'ai renommé numéro un, puis à partir de là, je suis passé à un numéro et 09. Et vous pouvez les voir ici. Maintenant, pour les importer, vous pouvez simplement les sélectionner tous. Revenez à Adobe XD, maintenez la touche Alter Option et la molette de défilement de votre souris. Et puis vous pouvez dézoomer tout le chemin juste pour que vous puissiez vous donner un peu d'espace. Ensuite, je peux ramener cela et simplement les ramener à l'intérieur afin que vous puissiez tous les sélectionner, les faire glisser et les déposer à l'intérieur de votre document Adobe XD. Donc tous seront ici et tous seront dans le mauvais ordre. Donc, vous pouvez voir ici que l'écran de connexion et d'inscription est tout le chemin ici. On ne veut pas ça. Donc, ce que nous voulons, et c'est pourquoi vous avez renommé tout ça, c'est que nous voulons les organiser un peu. Donc c'était notre première page d'accueil était notre deuxième, comptes et je tiens simplement Shift et vous pouvez voir l'espace entre eux. Et vous pouvez voir clairement que c'est basé, ce sont des images, mais c'est la base est là et c'est la même et la même chose pour nos tableaux. Tu verras ça un peu plus tard. Donc, comme je l'ai dit, les comptes sont un Suivant, voyons, prêts et vous pouvez toujours revenir ici et c, Donc, nous avions une page d'accueil, comptes, prêts. Les cartes investissent donc des prêts numériques et de tableau de bord. Voyons voir, les cartes investissent numérique. Et enfin, nous avons tableau de bord, mais avant cela, nous avons un login et inscrivez-vous comme ceci. Maintenant que nous avons commandé tous ces éléments, ce que nous pouvons aussi faire, c'est que nous pouvons les sélectionner et les déplacer ici jusqu'au sommet. Tout cet espace que vous voyez ici, cet espace gris est l'espace vide que vous pouvez utiliser pour votre document. Donc à l'intérieur de là, vous pouvez garder un texte, vous pouvez garder des images comme nous le faisons ici. Vous pouvez garder nos cartes ici est R, R port juste ici. Vous pouvez simplement cliquer sur le nom de l'aéroport se déplaçant. Et j'aime toujours le faire juste pour libérer l'espace et juste pour laisser de l'espace pour mon projet réel. Vous pouvez également voir cette étoile ici en haut, ce qui signifie que vous avez joué avec votre document. Si vous l'avez enregistré en tant que document local comme je l'ai fait, alors vous pouvez appuyer sur le contrôle S. Comme ça va sauver et cette étoile va disparaître. Comme vous pouvez le voir ici. Si vous l'enregistrez en tant que document cloud, alors comme un document cloud va faire cette fonctionnalité d'enregistrement automatique, mais vous pouvez la désactiver dans les paramètres afin de pouvoir l'enregistrer vous-même. C' est tout pour cette première vidéo. Fondamentalement, je voulais juste apporter ça. Maintenant que nous avons un fichier, nous pouvons commencer à travailler sur ce projet. Donc, si nous zoomons un peu plus près juste pour vous emmener dedans. Et c'était notre écran d'exploration. Et ici, nous avons fait toutes les pages que nous voulions. Nous avons décidé de la façon dont la navigation va ressembler à l'ordre de notre quai de navigation maintenant, navigation supérieure et cette boîte de navigation. Ensuite, nous sommes passés à la page d'accueil. Et maintenant, vous pouvez voir à quoi ressemble la page d'accueil, compte et ainsi de suite. Maintenant, nous avons cette idée générale de la façon dont notre projet pourrait finir par ressembler. Et comme il l'a dit dans la vidéo, j'aime toujours le faire parce que maintenant j'ai tous mes filaires ici à l'intérieur d'Adobe XD. Comme je l'ai dit, vous n'avez pas à faire ça. Si vous ne voulez pas, vous pouvez simplement garder la pile de papiers avec vous comme je le fais ici. Ainsi, vous pouvez simplement parcourir tous ces documents et vous pouvez décider quels éléments voulez-vous inclure dans votre projet. Donc c'est fondamentalement tout pour cette vidéo. Dans la prochaine vidéo, nous allons commencer par l'architecture du site Web. Nous allons connecter certaines de ces pages. Nous allons simplement jouer avec elle et voir ce qu'il faut faire avec la navigation, comment tout va se connecter entre eux. Nous allons repositionner certains de ces éléments à l'intérieur de notre document. Ensuite, nous allons enfin passer à autre chose et commencer à concevoir des filaires à l'intérieur d'Adobe XD, en utilisant ces références que nous avons faites sur un morceau de papier comme des idées Blaine. Nous allons utiliser certains éléments de ceux-ci, puis passer à de vrais filaires numériques dans Adobe XD. Alors je te verrai là-bas. 27. Créer une architecture de site Web: Dans cette vidéo, nous allons commencer par l'architecture du site web. Et l'architecture de site Web est fondamentalement quand vous avez bouclé vers le bas aux bits gourmands, est la connexion entre toutes les pages que vous avez sur votre site Web. Vous pouvez également utiliser l'architecture de site Web comme architecture d'applications mobiles. Et certaines personnes aiment appeler ces organigrammes. En fait, nous vendons les produits sur notre site web, donut.net. Et je vais laisser le lien vers ces produits avec quelques réductions pour vous les gars en tant qu'étudiants si vous voulez acheter ces produits. Donc le premier coule. Et fluide est livré avec 108 écrans, 128 éléments pour les sites Web et pour imprimer des papiers pour un quatre, ainsi que la taille de la lettre US. Vous pouvez voir à quoi ressemblent certains d'entre eux dans fondamentalement ce ne sont que des cartes de différents éléments que vous pouvez utiliser pour connecter vos écrans entre eux. Et puis vous pouvez utiliser cela apporte des modèles prêts si vous voulez les imprimer et les montrer à votre équipe ou à vos clients. Comme vous pouvez le voir, si je commence mon défilement rapide sur ma souris, vous pouvez voir combien de ces éléments il y a. Donc c'est le fluide. Il est également livré avec tous ces éléments supplémentaires tels que les maquettes, tels que les numéros, tels que les icônes les plus cruciales et importantes, ces connecteurs fléchés, et comme je l'ai dit, ces fichiers. Et vous pouvez voir une fois que vous les imprimez, vous pouvez voir à quoi ils ressemblent. Donc ça coule. Nous avons également des flux de fil, diagrammes de flux qui sont beaucoup plus grands que fluides. Vous pouvez voir que nous avons 200 écrans, 200 éléments ainsi que deux papiers. Nous avons aussi avec celui-ci, nos versions claires et sombres. Celle-ci est beaucoup plus détaillée si vous êtes dans ce genre de choses. Et ils arrivent dans Photoshop Sketch dans les versions XD, les deux. Donc vous pouvez voir à quoi ils ressemblent. Et si je commence mon défilement rapide, juste pour que vous puissiez regarder combien d'éléments différents ils sont juste là. Et si vous voulez le savoir sur notre site Web, alors c'est web nano.net. Encore une fois, je crois que le lien et le rabais pour vous les gars si vous voulez vérifier. Donc, vous allez sur les produits Web nano.net et puis laissez-le charger un peu parce que nous avons beaucoup de produits différents et juste sous UX obtient, vous trouverez tous ces différents produits. Ainsi, avec les organigrammes, comme vous pouvez le voir, nous avons des trames filaires. Ainsi, vous pouvez construire entièrement vos filaires en utilisant ces produits. Nous avons aussi UIKit est juste ici, donc prêt nous a fait des enfants. Vous pouvez simplement les échanger avec vos images et ainsi de suite. Je vous montre ceci et juste pour que vous puissiez voir à quel point vous pouvez obtenir détaillé, mais nous ne allons pas obtenir de détails avec cela. Je peux tout simplement aller de l'avant et utiliser mes produits et tricher comme la dette. Mais je veux vous montrer que vous n'avez pas à utiliser ça. Si vous voulez, vous pouvez les acheter d'autres live à rabais pour vous les gars aussi bien. Mais vous n'avez pas à les utiliser Ici, nous sommes dans Adobe XD et tout ce que vous devez faire est simplement rectangle et du texte. Donc, je vais aller de l'avant et zoomer, l' a appelé mon vieux et ma molette de défilement sur ma souris. Souris. Je vais simplement créer un rectangle comme celui-ci. Peu importe combien il est grand ou petit. Tu peux le faire. Comme tu veux. Donc ce rectangle, je peux aussi faire un rayon d'angle de 25 sur, juste pour le donner à un peu d'épices. Vous pouvez également inclure une ombre juste pour qu'elle puisse se démarquer un peu de ce fond. Alors donnons-lui une ombre de tuh, tuh et peut-être 15, juste pour le rendre un peu plus grand. D' accord ? Et maintenant, nous pouvons commencer à taper. Donc, je peux taper la page d'accueil, par exemple, ce soit du centre et je vais utiliser pour les garnitures pour cela. Et je vais utiliser Poppins comme police pour tout ce projet. Et Poppins est une polices Google gratuites d'Aleve et un lien vers chaque matériel que j'utilise dans la dernière leçon de ce cours ou dans un document de cours. Et en fonction de l'endroit où vous regardez ce cours. Ainsi, vous pouvez simplement y accéder ou vous pouvez simplement taper Poppins sur Google ou tout ce que vous utilisez comme moteur de recherche et les frères et sœurs grandissent à la page Google Fonts et commencer à utiliser cette police Poppins. Donc, ce que nous allons faire est simplement de maintenir la touche Maj et de sélectionner ces deux. Cliquez ici, ici, appuyez sur Control G pour le regrouper et appeler cette architecture de site Web. Courant. Comme ça. Je fais cela parce que je veux créer un composant à partir de lui. Appuyez simplement sur la touche de contrôle ou de commande pour créer un composant. Et vous pouvez voir ce diamant ici qui est rempli, qui indique que c'est notre maître ou composant principal. Si un poinçon, modifiez la touche Option. Pour dupliquer celui-ci, vous pouvez voir que maintenant ce diamant est une sorte de maintien ou vide à l'intérieur pendant que celui-ci est rempli. Et c'est parce que c'est le composant enfant de ce composant maître. Donc, si j'avais ça fonctionne essentiellement. Si, par exemple, je décide de sauter à l'intérieur de celui-ci et d'augmenter ce rayon d'angle 250, par exemple, vous pouvez voir que le changement s'applique également au composant enfant. Mais si je saute à l'intérieur d'ici, changer distal 50, vous pouvez le voir seulement appliqué à celui-ci parce que c'est le composant enfant, c'est le composant maître. J' espère que vous comprenez les différences entre celles-ci. Et nous allons finir par utiliser tous ces composants dans l'art et les designs. Donc, comme je l'ai dit, vous pouvez utiliser des designs complexes et comme ceux-ci que je vous ai montrés, mais vous n'avez pas à le faire. Vous pouvez simplement utiliser dans Des Moines, qui sont vraiment assez simples. Donc, ce que nous allons faire avec ceux-ci, c'est que nous allons juste énumérer les noms de ces pages. Donc nous avons des comptes ici comme ça. Et puis nous allons dupliquer celui-ci une fois de plus. Donc tout simplement en tenant votre Alt ou Option, qu'est-ce que nous avons ensuite ? Ces prêts et les dossiers de Dan. Alors laissez-moi dupliquer celui-ci. Alors pelouses cartes, pourquoi avons-nous besoin d'investir numérique ? Si inversé et numérique. Et nous allons le dupliquer plus tard pour ça. Donc, nous avons, une fois de plus, des comptes appartient, un SIPOC tenant mon contrôle pour sauter à l'intérieur puis double-cliquer sur un texte pour l'éditer. Tant que nous avons du courant. Nous avons investi, nous avons numérique. Et enfin, nous pouvons aller de l'avant et dupliquer celui-ci parce que nous allons finir par utiliser un login. Et je vais simplement le déplacer ici. Alors connectez-vous. Je vais positionner celui-ci ici. 65 Je crois que c'était des bulletins de vote. Vivez comme ça. Inscrivez-vous parce que nous allons avoir ces deux pages. Et enfin, à partir de celui-ci, je vais le positionner juste au milieu de ceux-ci. Maintenant que nous en avons, nous devons connecter certaines pages au tableau de bord. Mais parce que nous savons laquelle de ces pages sont parce que je les ai couvertes dans une section filaire de papier. Donc je vais les repositionner juste un peu différent d'ici parce que si vous vous souvenez de notre navigation, nous avons ce bouton de connexion sur chaque page, donc à partir de chaque page ici et ils peuvent accéder à cette connexion , puis à partir d'une page de connexion, nous pouvons aller à l'accueil du tableau de bord. Et je vais positionner ici parce qu'une fois que vous êtes à l'intérieur de la maison du tableau de bord, vous avez des transactions de compte, des cartes de pelouses investissement numérique et déconnexion. Si vous sautez du côté ici où nous avons réellement dessiné le tableau de bord et c'est pourquoi nous avons ON à portée de main ces filaires à l'intérieur d'Adobe XD. Ainsi, vous pouvez voir que le tableau de bord, les comptes résidentiels, les transactions, voitures prêtées, les investissements numériques, et déconnecter. Donc, pour gagner un peu de temps, je vais dupliquer ceux-ci. Alors appuyez sur le contrôle D pour le dupliquer ou vous pouvez simplement aller de l'avant et maintenir votre touche Alter Option et simplement le dupliquer comme papa, je vais le déplacer. Qu' est-ce qu'on fait ensuite ? Comme cette dernière chose que nous devons faire, c'est que je vais simplement sélectionner tous ces éléments et la position pour être au centre. Alors voyons, comme ça, quelque chose comme ça maintenant tu peux les regrouper. Donc il avait le contrôle G et vous pouvez regrouper tous ces éléments, vous pouvez frapper le contrôle G pour regrouper tous ces éléments. Vous pouvez appuyer sur le contrôle G pour regrouper tous ces éléments. Et maintenant, ça va être beaucoup plus simple. Il suffit de les sélectionner ici et cela va les rendre agréables et organisés. Vous pouvez les positionner ici maintenant une dernière chose que je veux faire avec ceux-ci est que je veux créer des flèches comme vous avez vu sont ici dans cet exemple. Donc, si nous faisons défiler tout le chemin vers le bas, vous pouvez voir qu'ici nous avons ces flèches de connexion. Et vous pouvez vraiment aller de l'avant et créer ceux dans Adobe XD sans avoir besoin d'utiliser un autre modèle externe. Donc, ce dont nous avons besoin est simplement dans ce rectangle. Et je remarque que cette ombre est un peu plus sombre ici. Donc je vais enlever celui-ci. Il l'avait parce qu'on avait une copie supplémentaire, le tweeté, soigné. Donc, ce que je vais faire est de créer un rectangle, peut-être comme ça ici. Et je vais enlever la frontière. La prochaine chose que je vais faire est de créer un polygone tenant la touche Maj. Rotation tout en maintenant la touche Maj enfoncée. Donc, il peut s'accrocher à la position comme ceci. Vous pouvez le positionner ici et retirer votre bordure. Et vous pouvez également lui donner une épice de couleur si vous le souhaitez, sol peut faire mal et pour la couleur de remplissage, il suffit de cliquer dessus et d'utiliser ceux-ci. Donc, nous avons notre flèche. Je vais le sélectionner, appuyer sur Control G et l'appeler Arrow ou architecture de site web. Arrow, juste pour que nous puissions savoir quand réchauffer le contrôle et la clé de commande créé comme un composant et aller à nos composants. Maintenant, nous pouvons voir quand vous survolez, d'accord, donc c'est notre flèche d'architecture de site Web. Voici nos cartes d'architecture de site web. Et nous gardons les choses agréables et simples, faciles à comprendre, surtout si vous les envoyez à vos clients. Donc ce que je veux de ceux-ci, c'est que je veux connecter ces cartes entre elles. Donc je vais le positionner dans un groupe. Donc, dans ce groupe par exemple, comme ça. Ou l'automne voir rapidement quel groupe est lequel. Alors appelons ce site méchant. Va. Parce que c'est notre site web principal. Cela va être notre section de connexion ou de journalisation Ba, Cependant, vous voulez l'appeler. Et voici notre roue de tableau de bord, comme ça. Je vais donc les réorganiser un peu, voir combien d'espace nous avons. Donnons-lui un 100 par exemple. Alors, décalez 12345678910. Et faisons la même chose pour celui-ci. Donc 12345678910, j'utilise la flèche majuscule et la flèche du bas pour le pousser vers le bas. Et ce que je veux faire enfin, nous le faisons une fois que je veux l'inclure dans ce dossier afin que je puisse le repositionner. Je peux apporter ça comme ça. Je rentre à la maison ou je change de vitesse pour apporter ça. Et c'est pourquoi nous l'avons créé en tant que composant. Et vous pouvez simplement le déplacer vers la gauche ou la droite. Dépêchez-vous de vouloir. Comme vous pouvez le voir, nous manquons de place. Et c'est pourquoi ces composants sont fantastiques. Et ce que nous voulons en ce moment est simplement de frapper le contrôle D. Pour le dupliquer et de le positionner ici afin que vous puissiez l' aligner, par exemple, sur ce bord et le bord gauche, qui est de la carte comme ceci. Je vais résoudre celui-ci, frapper le contrôle D et le faire comme ça. Maintenant, ce que je veux, c'est appuyer sur le contrôle D, le déplacer en dehors du dossier. Comme ça. Je vais cliquer dessus positionné juste ici. Donc ce que je veux, c'est le faire tourner. Donc je tiens Shift et je vais le positionner ici. Et je vais faire le décalage 123 par exemple, de deux ce que vous voulez. Juste pour indiquer qu'à partir de l'une de ces pages, vous pouvez aller à ces pages. Et ce dont j'ai besoin en ce moment, c'est de dupliquer une autre fois, position, celle-ci juste ici, et d'aller à mon login. Et ce que je fais ici est une version extrêmement simple et simplifiée de ce que je vous ai montré. Parce que si je descend une fois de plus, vous pouvez voir clairement ces connecteurs qui s'étendent à gauche et à droite vers le bas, vous pouvez voir à quoi ressemblent ces voitures. Donc, à partir de 1, disons qu'une page vous pouvez aller à un certain nombre de pages différentes. Vous pouvez interconnecter tous ces points et flèches et ainsi de suite, juste pour créer une image vraiment complexe de vos connexions entre les pages. Mais ce que je fais dans notre exemple est une fois de plus, extrêmement simple parce que je veux garder ça gentil et lent, désolé, gentil et rapide pour vous les gars de comprendre. Et ce que je veux de celui-ci est de faire un duplicata , puis cliquez sur auto tourné comme ceci. Et positionnez-le ici. Et je peux faire, donc 1234, juste pour lui donner de l'espace. Maintenez Molto, ne vous assurez pas qu'ils soient au centre. Et ce que nous avons fait ici est d'indiquer que les gens peuvent passer d'un login pour s'inscrire et revenir sur cette dette de lien, ils peuvent cliquer. Donc si je retourne ici et montre qu'une fois de plus, j'utilise l'espace, j'ai pris pan, gauche et droite. Vous pouvez voir que nous avons fait ça ici. Donc lien cliquable pour vous inscrire et sur l'inscription, lien cliquable pour revenir à la connexion. C' est pourquoi nous utilisons des fils de papier et ces flèches, et je vous l'ai déjà dit. Ainsi, vous pouvez l'indiquer à votre équipe ou à votre client et aussi à vous-même. Je viens de dire que tu peux savoir ce qui se passe. Donc à partir d'ici, je peux utiliser celui-ci. contrôle D était une merde, disons 20-30 où vous voulez. Et une fois de plus, je peux utiliser certains d'entre eux. Donc, par exemple, il est utilisé celui-ci juste pour gagner un peu de temps. Positionnez-le à l'extérieur, et je vais l'utiliser à l'intérieur de notre tableau de bord. Je vais cliquer dessus. C' est celle-là ? Il l'est. Alors qu'il cache rapidement cela. Et puis cliquez simplement sur celui-ci juste pour le positionner un peu comme ça. Et en ramenant cela parce que nous avions le chevauchement de la dette. Et c'est pour ça que ça nous a montré ça. C' est dans ce premier dossier ou alors que nous sommes dans notre deuxième dossier. Donc, ce que je fais ici est d'utiliser la commande de contrôle d, en utilisant la touche Maj pour le positionner à gauche et à droite. Juste au centre, juste pour garder les choses propres et agréables. Et nous l'avons là. Nous avons terminé notre architecture de site Web ou notre navigation. Et pourquoi cela est important encore une fois, est-ce que vous pouvez le montrer aux gens, vous pouvez le montrer à votre équipe, à vos clients, et les gens peuvent regarder cela et comprendre où ils peuvent aller. Maintenant, une dernière chose que nous pouvons faire est de ce cri de déconnexion. Et parce que lorsque les gens cliquent là, et si nous revenons à notre tableau de bord, vous pouvez le voir si nous mettons notre déconnexion ici. Imaginez juste quand les gens cliqueront là, ça va les ramener ici à l'écran d'accueil. Donc, ce que nous pouvons faire dans ce cas, c'est faire un peu de plaisir et de jeux. Donc je vais utiliser cette flèche, CTRL D, juste pour vous montrer quelques possibilités avec celui-ci. Je vais le positionner et juste ici, assurer qu'il est au centre comme ça, puis le déplacer hors de notre écran. Ce que nous pouvons faire dans ce cas est simplement sauté à l'intérieur de la position de notre flèche tout le chemin où les écrans de la maison. Donc, juste par ici. Et maintenant, je vais revenir à cette ligne et l'étendre. Il suffit donc de cliquer ici, de l'étendre. Et tu peux vraiment jouer avec ça comme ça. Maintenant, vous pouvez le dupliquer, ou vous pouvez simplement voir que c'est la hauteur de neuf. Donc tu peux faire ça. Tu peux aller ici. Assurez-vous que vous êtes en hauteur de ligne comme ceci. Et ce qui est comme ça. Donc, si on le retourne, ça devrait être le même. Alors voyons. Comme ça. Et le positionnement simple, leur positionnement, osez vous assurer que vous n'avez pas de couleur de remplissage de bordure est celui-ci, puis simplement étendu. Donc, vous devez zoomer juste un peu. Une fois de plus, utilisez l'espace pour faire un tour autour de cela, comme ça. Et juste pour vous donner un truc, ce que vous pouvez réellement faire est de sauter à l'intérieur de ce polygone et de le faire pivoter en utilisant celui-ci. Comme ça, positionné ici. Et puis ce que vous pouvez faire est de cliquer sur Contrôle C. Sauter à l'intérieur de ce site Web moyen, contrôler V pour le coller en position juste pour que vous puissiez trouver le milieu de cette page d'accueil. Il contrôlerait X pour le couper. Retournez à ici, contrôlez V, puis supprimez celui-ci. Parce que maintenant vous êtes au centre d'ici et maintenant vous êtes de retour dans votre composant. Donc, ce que nous pouvons maintenant faire est de sauter à l'intérieur d'ici, créer un autre comme celui-ci, mais enlever la bordure. Utilisez dans cette même couleur de remplissage et tournez comme ceci. Positionnez-le en place. Assurez-vous que vous êtes au centre de votre de vos désolés, de cette forme comme celle-ci. Et Terry Herat. Maintenant, nous avons connecté cette déconnexion qui va jusqu'ici. Ainsi, vous pouvez voir clairement comment avec juste un peu de ups hollandais, vous pouvez accéder à cette architecture de site Web agréable et se connecter entre toutes ces différentes pages. Comme je l'ai dit, vous pouvez utiliser des modèles, vous devez maintenant utiliser le nôtre. Si tu ne veux pas payer. Vous pouvez trouver des versions gratuites en ligne avec seulement quelques-unes de ces formes et vous pouvez passer du temps comme ça. Ou si vous voulez l'utiliser pour obtenir l'un de nos produits et obtenir cette énorme bibliothèque de formes que vous pouvez utiliser dans vos projets. Une dernière chose que je veux faire est de sélectionner toutes ces formes parce que je veux garder les choses belles et propres. Tenez Control G, l'architecture de site Web la plus froide, comme ça. Et une fois de plus, je vais utiliser nos filaires. Il avait le contrôle g, n papier de qualité. Juste pour que si je choisis, je puisse les déplacer comme ça. Je peux faire la même chose avec l'architecture de notre site web. Et parce que la chose logique est d'avoir des fils de papier sur des fils réels et un véritable filaire sur le design. C' est ce qu'on va faire ici. Et nous allons simplement cliquer et déplacer ceux-ci sur le dessus. Donnons-lui quelque chose comme 600. Je pense que ça marchera très bien comme ça. Et je vais aussi passer de celui-ci à 600 ans comme ça. Et c'est fondamentalement tout. Si vous appuyez sur le contrôle 0, il va vous enfoncer dans la disposition, appuyez sur le contrôle S pour enregistrer ceci. Et c'est fondamentalement tout pour cette vidéo. Dans la prochaine vidéo, nous allons commencer avec les trames filaires dans Adobe XD. Maintenant que nous avons l'aération. Et je vais vous montrer comment vous pouvez utiliser ces filaires papier pour réellement commencer à créer de vrais filaires que vous pouvez montrer à vos clients et vous pouvez les partager à l'aide d'un prototypage et des fonctions de partage d'Adobe XD à votre clients pour obtenir des commentaires réels. Alors je te verrai là-bas. 28. Wireframes dans Adobe Xd 1: D' accord, allons maintenant de l'avant et commençons avec les trames filaires dans Adobe XD. Et la première chose que je vais faire est de vous parler un peu des ressources que nous allons utiliser dans ce cours. Donc ce fichier que vous regardez en ce moment, ce fichier Adobe XD, vous allez obtenir ce fichier. Ce fichier va contenir toutes les choses que nous allons créer dans ce cours. Je vais aussi vous donner des ressources que j'utilise ici, donc des icônes, des images, et ainsi de suite. Mais l'important que vous devez comprendre est que vous ne pouvez utiliser ces ressources que pour des projets personnels. Vous ne pouvez donc pas les utiliser pour les clients, vous ne pouvez pas les utiliser pour la vente. Vous ne pouvez pas les utiliser pour autre chose que le projet personnel comme apprentissage. Ainsi, vous pouvez l'utiliser pour apprendre, pour tout comprendre, comment tout fonctionne, pour suivre ce cours. Et c'est tout parce que ces ressources sont premium, vous devez payer pour ces ressources afin de les utiliser commercialement dans vos projets, pour vos clients et ainsi de suite. Je vais laisser des liens vers chaque chose que j'utilise. Donc, une fois de plus, ces ressources sont premium. Vous les utilisez juste pour un projet personnel, des fins d'apprentissage et pour rien d'autre. N' oubliez pas que si vous utilisez ces ressources pour des projets clients et pour des projets commerciaux, c'est sur vous. Donc si l'une de ces sociétés décide de vous poursuivre en justice, alors tout est après que vous ne me reviendrez pas à cause de ces ressources, c'est à vous de décider. Alors maintenant que nous sortons cela du chemin, je vais commencer par simplement sélectionner mes couleurs pour ce projet particulier. Donc, pour ce faire, je vais venir ici et nous allons appeler cette première page d'accueil de rpart. Donc on peut venir ici et double-cliquer ici, Palm Beach. Et la première chose que je vais faire en fait est de créer une grille. Alors je vais venir ici. Et vous pouvez voir ces colonnes. Donc juste ici à gauche et à droite ici à droite sont ces marges. Ces marges sont donc à partir du bord de la page à gauche et à droite. Ces bits bleus sont des colonnes et ces bits blancs entre notre gouttière. Donc, la gouttière est fondamentalement méprisée entre les colonnes. Et les colonnes sont ces espaces où le contenu va aller. Le contenu est essentiellement du texte, des images, des icônes, et ainsi de suite. Et donc, chaque chose que vous incluez dans votre conception, savoir le contenu et la largeur de la gouttière est essentiellement l'espace disque entre votre contenu. Donc nous allons utiliser 12 colonnes, donc la même chose que c'est ici. Pour la largeur de la gouttière, je vais utiliser 60. Je vais utiliser 82 pour la largeur de la colonne et 138 des deux côtés. Comme vous pouvez le voir. Maintenant, nous avons un peu moins d'espace ici, et nous avons un peu plus d'espace dans ces gouverneurs. Et nos colonnes sont un peu plus étroites, donc tout est beaucoup plus propre. Donc vous pouvez le voir un peu mieux. Une autre chose que je vais faire est de réduire l'obésité de nos colonnes. Pour ce faire, il suffit de cliquer ici. Et puis un bas ce curseur comme vous voulez. Vous pouvez l'abaisser tout le long, ou vous pouvez venir jusqu'ici, par exemple. Donc, vous pouvez toujours les voir, mais ils ne sont pas dat, distrayant. Vous pouvez aussi changer et Derek couleur, nous cliquons simplement ici, mais je ne vais pas vous déranger avec cela. Donc une fois de plus, nous allons simplement créer ces boîtes, par exemple. Et je vais utiliser ces boîtes pour les couleurs. Donc la première couleur va être blanche, donc c'est celle-ci. Et puis je vais frapper le contrôle D plus avec quelque part par ici. Et puis je vais utiliser dans le disque érudit. Donc f deux, f quatre, F6, donc une couleur gris clair. Et si je supprime ces colonnes, vous pouvez voir clairement blessé à ressemble. Pour que je puisse le dupliquer encore une fois. Position. C' est quelque part par ici. Parce que cette étape, vous n'avez pas vraiment besoin de colonnes pour cela. Nous choisissons juste ces couleurs en deux vont utiliser. Donc cette couleur va être c2e, c2e, c2e. Donc un peu plus sombre, gris. Vous pouvez voir la différence entre ceux-ci. Et je vais les positionner uniformément les uns entre les autres. Je vais le dupliquer encore une fois. Pour celui-là, je vais aller avec un vert clair. Donc 0-0, ED cherche cinq. Je vais dupliquer celui-là. Maintenant. Un peu vert plus foncé, donc 0-0, C6, puis 89. Maintenant, nous allons aller un peu plus loin vers le bleu foncé. Donc 00859 V. Maintenant, nous allons aller encore plus sombre, presque sombre, d'accord. Donc pour 495463, Donc, comme vous pouvez le voir, c'est vraiment presque un gris foncé. Maintenant ça va être vraiment sombre grâce de 46, 4646, comme ça. Et enfin, nous allons créer une couleur de route. Donc ff 4376, comme ça. Maintenant que nous avons toutes ces couleurs, nous allons les sélectionner et les ajouter à nos couleurs ici comme des recherches de couleurs afin que nous puissions les utiliser tout au long de notre projet. Vous pouvez donc simplement sélectionner ces couleurs, cliquez ici, et il va ajouter vos couleurs ici. Vous pouvez les organiser un peu différemment, sorte que vous pouvez les ajouter sous forme de grille ou de liste, peu importe ce qui vous est plus facile. J' aime les utiliser comme ça. Et vous pouvez également étendre cela si vous le souhaitez. Donc, vous pouvez juste imaginer quand vous commencez à sentir ces composants, ils vont être beaucoup d'entre eux. Ainsi, vous pouvez rapidement étendre cela à gauche et à droite juste pour voir vos composants sont vous pouvez toujours revenir à cette vue si c'est plus facile pour vous. Une autre chose que je vais faire est aussi de créer mes styles de personnages, mais je peux m'en occuper un peu plus tard. Donc, je peux aller de l'avant et les supprimer. Donc ils n'étaient qu'un détenteur de place pour que nous puissions créer ça. Nous sommes allés de l'avant et avons créé notre grille, donc nous l'avons ici. Maintenant, la prochaine chose que je vais faire est d'inclure mon logo. Je vais le coller à partir de mon document d'origine. Et vous pouvez voir ce lien car tout au long de ce cours, je vais utiliser mon document original que j'ai créé comme fichier de référence. Donc, vous allez voir ces ensembles liés icône. Vous pouvez le voir ici. s'agit donc d'un composant lié car il est lié à la conception d'origine ou a créé. Mais pour corriger cela pour ce fichier particulier. Donc, par exemple, si je vais de l'avant et édite ce logo dans le document original, il me montrera une mise à jour juste ici pour que je puisse aller de l'avant et le mettre à jour. J' ai donc les deux instances dans les deux fichiers ayant cette même mise à jour et les dernières mises à jour. Donc, ils auront l'air exactement le même. Ou ce que je vais faire tout au long de ce cours est de copier dans ce document ou de cliquer avec le bouton droit de la souris et simplement de cliquer sur rendre local. Donc, ce que cela signifie fondamentalement, c'est maintenant que c'est notre principale composante ici sur ce document. Et vous pouvez voir qu'il a deux états. Donc, il a cet état par défaut et il a ce grand état. Et je suis allé de l'avant et j'ai créé ça. Maintenant, pour ce faire, vous pouvez simplement aller ici. Cliquez sur Modifier le composant principal va vous emmener ici. Vous pouvez ajouter un nouvel état. Alors appelons cet état noir et blanc, juste pour vous montrer comment je suis allé de l'avant et créé ça. Donc nous avons ce joli logo. Et par exemple, disons que je veux prendre ce texte afin que je puisse maintenir mon clic de contrôle à l'intérieur, aller à la couleur, transformer en blanc. Et parce que nous avons toutes ces couleurs, disons que je veux utiliser, je ne sais pas. Voyons cette couleur simplement appelée Contrôle cliquez à l'intérieur, puis vous pouvez choisir l'une de ces couleurs. Donc, je peux utiliser ceci par exemple. Et nous avons aussi cette forme. Donc nous avons ce point à l'intérieur, mais laissons-le là. Donc si on y retourne, tu peux voir que maintenant on a cet état noir et blanc. Si je clique, c'est notre état par défaut et c'était mon état original. Et maintenant, nous avons l'état noir et blanc. Ainsi, vous pouvez basculer entre ces états à différents points de votre conception. Ainsi, par exemple, si vous devez présenter ce logo sur un fond plus sombre, comme vous pouvez le voir, cette couleur ne fonctionnera pas sur leur fond plus sombre. Par conséquent, vous avez besoin de cet état noir et blanc. Donc, au lieu de créer une autre copie puis de modifier cette copie, vous pouvez simplement créer un nouvel état, en le transformant en noir et blanc. Donc, partout où vous avez besoin de basculer entre ces états, vous pouvez simplement aller de l'avant et revenir en arrière où vous voulez. Vous pouvez écrire ici, cliquez avec le bouton droit de la souris et cliquez sur supprimer comme je vais le faire, fondamentalement, je peux aller de l'avant et supprimer cela parce que je l'ai ici comme notre original. Donc pour commencer avec notre filaire, la première chose que nous allons faire, et c'est de ça que je parlais. Section filaire est fondamentalement, vous pouvez voir ces pages que nous avons dessinées sur un morceau de papier. Si vous les avez à côté de vous, alors vous pouvez les utiliser comme ça. Si ce n'est pas le cas, vous pouvez les intégrer dans Adobe XD comme nous l'avons fait pour ce cours particulier. Et vous pouvez toujours vous référer à eux, par exemple, l'idée que vous aviez. Et parce que nous avons créé notre navigation principale ici, sorte que vous pouvez voir que nous avons une icône de localisation ici pour les affaires ici et ainsi de suite. Alors on peut le faire. Alors allons de l'avant et commençons avec cette navigation vraiment haut de gamme. Donc, nous avons une icône pour les affaires. Nous avons une icône de téléphone, des langages de symboles juste ici. Donc, je vais aller de l'avant et le faire. Je vais cliquer sur mon aéroport parce que nous avons besoin de créer une longue page. Vous pouvez le voir. Ou vous devez faire est de cliquer sur ce point au milieu et étendu tout le chemin vers le bas. Non, laissons-le juste là. Donc nous allons laisser notre logo, Reddit est pour le moment. Ensuite, nous allons utiliser notre outil rectangle étendu jusqu'ici. Et voyons, peut-être que nous pouvons l'utiliser comme couleur de fond. On peut enlever la frontière. Et pour la taille 1920 ans pour la largeur, la mort finale, il est utilisé 70, par exemple, pour la hauteur. Et vous pouvez cliquer ici, il l'épinglera en haut. Maintenant, ce que nous allons faire, c'est commencer par le texte. C' est là que nous avons besoin de nos textes. Et comme je l' ai dit, je vais utiliser Poppins comme police. Donc, ce que je vais faire est de cliquer sur le thé et simplement cliquer ici. Et maintenant, je peux écrire quelque chose comme pour les affaires ou notre emplacement. Ça et je vais le mettre ici. Je vais choisir Poppins et voyons, je peux utiliser 18 pour celui-ci comme ça. Et voyons, peut-être que je peux utiliser cette couleur. On peut se positionner pour être aligné à gauche. Et nous pouvons maintenir Maj sélectionner ces deux. Cliquez ici pour le positionner au centre. Et puis je peux aller de l'avant et cliquer ici pour ajouter ceci à mon style de personnage. Et vous pouvez voir qu'il me montre 18 irréguliers. Si vous voulez le modifier à tout moment, vous ne le modifiez pas ici. Vas-y, juste là, clic droit. Et vous pouvez modifier, puis apporter des modifications à partir d'ici. Maintenant que nous avons ça, je vais aller de l'avant et le dupliquer et taper ou faire des affaires. Parce que si je saute devant et vous montre, vous pouvez voir qu'on a une icône de localisation et qu'on a quatre affaires. Ensuite, nous allons avoir le texte du formulaire juste ici parce que nous avons assez d'espace sur cette taille de bureau. Donc je vais dupliquer mon texte et ajouter mon numéro de téléphone ici, qui va juste être un numéro de téléphone fictif. Voyons donc, par exemple, plus 123456789 ou 0. Laissons-le comme ça. Alors maintenant que j'ai et que ce que j'ai besoin ensuite, nos langues. Et vous pouvez voir que nous avons ces deux drapeaux juste ici. Maintenant, pour les langues, je vais simplement utiliser un plugin. Vous pouvez donc cliquer ici. Et j'utilise ce plug-in de logos de l'interface utilisateur, et cela devrait fonctionner. Cherchons juste ici. Vous pouvez donc cliquer sur Oser pour rechercher vos plugins. Voyons donc les logos de l'interface utilisateur. Il devrait être là. Ici, c'est. Donc j'utilise celui-là, mais pour une raison quelconque, ça ne se montre pas. Et le logo sur lui-même. Mais comme vous pouvez le voir, une habitude installée. Donc, ce que vous devez faire est de créer des boîtes. Maintenant, pour créer ces boîtes, nous allons utiliser Rectangle Tool et vous allez les utiliser juste ici dehors. Vous devez en créer 194. Donc pour les tailles, donc je vais utiliser 40, largeur 27. Tellement petit. Je vais enlever la frontière et comme je l'ai dit, je vais créer 194. Maintenant, pour ce faire, je vais utiliser les grilles de répétition sont simplement cliquez ici. Donc on en a un. Et il suffit d'aller de l'avant et d'étendre à 345678, 910. Alors comptons-les une fois de plus. C' est ça. Et je vais descendre 20 en gros. Donc, et c'est fondamentalement tout. Maintenant que nous avons terminé cela pourrait simplement dégrouper la grille. Comme je l'ai dit, vous avez besoin de 194. Donc je vais en supprimer six. Donc 246, appuyez sur Supprimer sur votre clavier. Maintenant, vous pouvez aller de l'avant et les sélectionner tous. Revenez aux logos d'une interface utilisateur. Cliquez là. Vous avez des drapeaux de pays. Donc ont la marque de logo noir, logo de couleur marqué logo noir type logo couleur logotype. Mais ce pays nous intéresse. Des drapeaux. Il suffit de cliquer là. Il a ajouté 194 flex. Ainsi, vous pouvez localiser votre drapeau. Comme il l'a dit, pour ce projet particulier, j'utilise le drapeau serbe et j'utilise aussi le drapeau du Royaume-Uni. Vous pouvez utiliser la fleur américaine, vous pouvez utiliser le drapeau de votre propre pays. Donc, c'est vraiment à vous de décider, quoi que vous vouliez faire avec ce projet particulier. Donc ce dont j'ai besoin maintenant, c'est de localiser mes deux drapeaux. Voici donc le drapeau britannique. Et laissez-moi rapidement aller de l'avant et trouver le drapeau serbe. Ici, c'est. Et maintenant que j'ai localisé ces deux, tout ce que je dois faire est simplement de sélectionner tous les autres. Appuyez sur supprimer, parce que je n'ai besoin que de ces deux-là. Je vais aller de l'avant et les faire glisser et déposer à l'intérieur de mon document et les repositionner un peu. Voyons voir, peut-être que je peux les avoir à 40 ans. Donc comme ça, 1234, comme ça. Et je vais cliquer ici et taper deux sur mon clavier pour abaisser cette obésité à 20%. Ou je peux aller de l'avant et plus il revenir à 30 ou quoi que ce soit, juste pour indiquer que dans ce drapeau britannique est sélectionné comme une langue anglaise est sélectionné ici. Donc, ce que j'ai besoin ensuite sont ces deux icônes pour l'emplacement et pour le formulaire. Comme on l'a dit, j'utilise ces icônes et ces icônes, je vais vous montrer nos grandes icônes. Et vous pouvez les obtenir via le lien que je vais vous fournir. Donc une fois de plus. Ces icônes sont gratuites pour vous à des fins d'apprentissage seulement. Vous ne pouvez pas les utiliser pour des clients, vous ne pouvez pas les utiliser pour des travaux commerciaux, vous ne pouvez pas les utiliser pour la revente. Si vous faites toutes les exigences légales et que chaque condamnation est fondamentalement sur vous. Donc, si l'une de ces sociétés s'adresse à vous, si vous les utilisez, encore une fois, c'est à vous de décider. Alors revenons-y. C' est notre icône de localisation, c'est l'icône de notre téléphone. Si je reviens ici, vous pouvez voir que ces deux icônes et composants sont transférés essentiellement formé le document d'origine. Cliquez avec le bouton droit de la souris, local doux, faites un clic droit local pour rendre notre vie plus facile. Maintenant que nous avons fait ça, nous devons les repositionner un peu. Donc ce que je vais faire, c'est commencer par celui-là. Donc positionnement 20, comme des données. Et je vais positionner ça pour être là. Donc, pour aligner avec cela, pour le formulaire c, je peux cliquer dessus et le positionner. Voyons juste me voir. On peut mettre le texte sur le côté droit et le faire doubler. Alors, à 1234. Donc si je tiens ma vieille clé et que je passe la souris ici, vous pouvez voir qu'il est 80 de ce drapeau. Et je peux positionner ça à 20, comme ça. Et ce que je vais enfin faire, c'est retourner à mon panneau de calques. Sélectionnez tout sauf le logo et cliquez ici, juste pour les positionner tous au centre. J' aime comment ça ressemble. Et je vais aussi renommer ça en haut. Maintenant, BG. Et je vais organiser les choses un peu mieux. Donc, nous allons commencer avec l'icône de localisation. Nos emplacements vont ensuite pour des affaires comme ça, icône étrangère puis numéro de téléphone, Angleterre et Serbie, haut maintenant BG et vous pouvez maintenir Shift, sélectionner tous, et appeler ce haut maintenant. Ok, donc maintenant qu'on a fait ça et que cette vidéo a couru pendant 19 minutes parce qu'on a besoin de pré-préparer l'aération. Fondamentalement, je vais terminer cette vidéo ici. Et dans la prochaine vidéo, nous allons commencer par créer notre filaire pour cette page d'accueil. Alors je te verrai là-bas. 29. Wireframes dans Adobe Xd 2: Revenons-y maintenant et commençons par la navigation principale. Donc, si nous faisons un zoom arrière, ce que je vais faire est de cliquer sur mon logo, puis de cliquer ici pour utiliser mon rectangle. Et je vais dessiner un beau fond pour mon logo. Je vais aussi à NAV de qualité, Vg, et je vais le déplacer quelque part ici, mais nous allons d'abord et lui donner une hauteur de 1-20. Et enfin, nous allons plus avec 50 à partir d'un bureau près comme ça. Ensuite, je vais positionner le logo juste ici, à l'intérieur. Et pour le logo lui-même, je vais le positionner 40 pixels vers la droite. Donc navire 1234. Donc encore une fois, comme ceci, et vous pouvez planer et voir que vous êtes 40 à partir de la gauche et 26 et presque 26 en haut et en bas. Maintenant, pour la sieste BG lui-même, donnons-lui un peu de style. Voyons donc, pour une couleur, laissons-la blanche. On va aller sans frontière. Pour le rayon de coin, on va aller avec dix. Maintenant, pour l'ombre, je vais aller avec chanté 2020. Et voyons voir, peut-être qu'on peut aller quelque chose d'un peu plus léger. Alors donnons-lui un peu de temps. Dix par exemple. Et je vais aussi inclure un flou d'arrière-plan. Et pour les valeurs de flou d'arrière-plan, passons avec 2015 et enfin, 50 pour le 50%. Si je me cache en désaccord pour le moment, vous ne pouvez pas le voir pour le moment. Mais une fois que vous commencez à faire défiler vers le bas, vous serez en mesure de voir comment ce flou va agir et comment il va ressembler. Laissons-le là pour le moment. Ce qu'il nous faut ensuite, c'est du texte. Alors allons de l'avant et à droite dans certains textes parce que si je vous ramène ici, vous pouvez voir que nous avons toutes ces pages. Donc comptes au large, cartes, investir numérique. Et enfin, nous avons ce bouton de connexion, qui va nous conduire à l'écran de connexion et d'inscription. Alors commençons par ça. Je vais cliquer ici. Et voyons, des comptes comme la saleté. Donc, nous avons Poppins, 18 analystes de gauche irréguliers Choisir la couleur. Et ajoutons tout de suite à ici. Et voyons ce que nous pouvons faire ensuite. Nous pouvons continuer et ajouter plus de ces éléments. Donc PDG positionnons ceci au centre comme ça, contrôle D pour le dupliquer et notre frappe appartient Contrôle D et je vais taper en cours. Cela va être inversé. La prochaine sera numérique. Et je vais aussi le dupliquer encore une fois pour notre bouton et taper et Morgan le laisse comme ça pour l'instant. Et je vais juste le positionner pour être aligné au centre. Maintenant pour notre bouton lui-même. Je vais dessiner un rectangle comme ça. Et voyons pour la largeur, utilisons deux à 44 pour se cacher. Utilisons 64, le rayon du coin, appelons-le sable. Parce que si vous vous en souvenez, nous avons fait le rayon de 10 pour g craqué, o positionné au centre. Et voyons, je vais mélanger ça fait 40 du côté droit parce qu'on a fait ce tableau pour la banque. Et si vous le positionnez comme ça, vous pouvez voir qu'il prend deux colonnes en largeur. Et c'est le point principal de nos colonnes parce que nous voulons que tout soit bien structuré et organisé. Je vais y aller et y retourner. Je vais nommer ce btn G, par exemple, et le positionner jusqu'ici. Organisons ces couches un peu mieux. Positionnez mon logo en solo en haut. Je vais bouger mon haut jusqu'au sommet. Logo donc. Et puis de gauche à droite, nous avons des comptes. On a des alongs. Nous avons des cartes, investir, numérique, connexion et BT et B, g. Donc, je vais sélectionner ces deux. Cliquez ici, puis juste ici pour positionner cela au centre et mon bouton, je vais aller de l'avant et sélectionner une couleur. Utilisons celui-ci. Par exemple, je vais cacher ma frontière. Je vais cliquer ici et changer ma couleur en blanc. Et puis je vais aller de l'avant et sélectionner ces deux, appuyer sur Contrôle G et les appeler pour se connecter. Et vous pouvez aller de l'avant et faire un composant si vous le souhaitez. Mais je vais laisser ça tel quel. Je vais l'organiser, bien sûr, mais laissez-le comme il est sans aucun composant a, afin que nous puissions arriver à la phase de conception. Et puis plus tard dans la phase de conception, je vais en fait aller de l'avant et créer un composant, des états de composant, etc. Donc, d'ici à notre numérique, nous allons l'avoir à 80 ans. Donc 12345678, juste pour lui donner un peu plus d'espace pour la position de clic, c'est aussi 80. Et ça doit être à 80 ans. Donc comme ça, cela va être évidemment le même et le compte va être le même. Et c'est fondamentalement tout. Donc, nous pouvons aller de l'avant maintenant et regrouper tous ces éléments, contrôler G et appeler ça principal. Maintenant, quand on arrivera à la partie design, je vais faire un peu plus de style à la déségrégation. Je vais également ajouter un sélecteur, qui va apparaître sur certaines pages sélectionnées. Ainsi, par exemple, si les utilisateurs cliquent sur le compte, le sélecteur va apparaître sous dat. S' ils cliquent sur les cartes va se déplacer ici et nous allons ajouter une animation à elle et ainsi de suite. Mais nous allons en arriver à tout cela un peu plus tard quand nous commencerons par cela. Maintenant, si je vous emmène ici, vous pouvez voir que sur la page d'accueil nous avons cette section d'image de héros avec texte numérique et bouton d'appel à l'action sur la gauche, tandis que l'image sur la droite, nous n'allons pas réellement utiliser toutes les images à partir de maintenant parce que c'est là que la partie design entre en jeu. Mais je peux commencer par créer mon rectangle. Maintenant, je vais positionner mon rectangle tout le chemin en bas. On appellera ce héros. Fais comme la saleté. Pour le séparer un peu et le faire ressortir. Je vais cliquer ici pour ajouter notre couleur. Ou un skinnérien, allez-y et utilisez ces couleurs pour mes images. Utilisons celui-ci. Juste pour le rendre un peu plus évident. Je vais aller de l'avant et enlever la frontière en 1924 et la largeur et la hauteur. Utilisons 900. Et je vais simplement me positionner pour être ici. Maintenant, si je prends mon NAV principal, vous pouvez voir que lorsque je commence à bouger de haut en bas, certains effets commencent à se produire. Et vous pouvez voir, surtout si je bouge ça et c'est là que le flou entre en jeu. Mais ne vous inquiétez pas à ce sujet tout de suite. Nous allons l'utiliser un peu plus tard. Et je vais simplement aller de l'avant et utiliser celui-ci parce que nous devons inclure du texte et du bouton et ainsi de suite. Donc, ne compliquons pas trop les choses jusqu'à présent notre texte, voyons. Je peux y aller et taper. Il s'agit du titre ou du titre. Ici, disons. Nous allons donc utiliser des garnitures et nous allons changer cela pour être aligné à gauche. Allons-y avec audacieux. Alors trouve-le ici. Encore une fois, si vous n'avez pas Poppins, allez à la page Google Fonts, ou vous pouvez aller au PDF que j'ai fourni dans cette dernière leçon de discours ou dans les documents du cours en fonction de l'endroit où vous regardez ce cours, vous pouvez simplement ouvrir un PDF vers le haut, cliquez sur le lien. Il vous y mènera, téléchargera et installera cette police comme d'habitude avec n'importe laquelle de vos polices. Vous devriez pouvoir l'utiliser dans ce projet. Maintenant, pour la taille, nous allons aller avec un énorme 190 comme ça. Et je vais le positionner quelque part par ici. Disons. Je vais aller de l'avant et sélectionner celui-ci. De l'or à mes styles de personnages. Cliquez ici pour l'ajouter et le placer vers le bas. Et je vais cliquer ici, parce que c'est beaucoup plus facile de réorganiser ça juste un peu ici. Maintenant, je vais y aller et cliquer ici. Donc, sur mon sous-titre parce que si nous vous reprenons, vous pouvez voir à quoi il ressemble texte de titre, qui va être dans une seule ligne de texte et bouton d'appel à l'action. Alors quoi, ce que nous pouvons faire avec celui-ci, c'est taper quelque chose comme ça, c'est un sous-titre de ligne. Et pour cela, utilisons 24. Utilisons aussi irrégulier. Voyons voir. Comme Dat, analyse plus de largeur. Voyons voir, peut-être que je peux me positionner pour être à 50 ans, comme ça. Déplacez ça juste un peu vers le bas. Et ce qu'il nous faut maintenant, c'est un bouton. Donc, au lieu de recréer un bouton ou simplement appuyer sur Contrôle C et sortir, cliquez ici, appuyez sur Contrôle V, puis repositionnez-le vers le bas. Voyons voir, peut-être que je peux aussi en faire 50, comme ça. Et sélectionnons simplement tous ces éléments. Cliquez ici pour les aligner à gauche, et assurez-vous simplement que vous êtes aligné à gauche sur le bord de notre grille. Enfin, je vais étendre notre bouton et le positionner sur trois colonnes de large. Et je vais double-cliquer à l'intérieur, à l'intérieur de KPN, en savoir plus. Et vous pouvez voir que tout va bien. Et parce qu'Adobe XD envisage de redimensionner réactif comme vous venez de le voir. Donc, parce que nos textes sont une ligne centrale, si je vais de l'avant et étendre ce bouton, vous pouvez voir que le texte suit vraiment bien et il va toujours rester dans, au centre, comme vous le basculez vers. Donc, je vais organiser ces juste un peu mieux et regrouper ces gènes de contrôle de la chaleur texte du côlon comme ceci, les positionner ici. Et puis j'utiliserai mon outil rectangle. Allez d'ici au bord inférieur de notre héros. Utilisez le texte, cliquez ici pour le positionner au centre. Et l'habitude de Derek, c'est notre image de héros. Nous ne allons pas nous embêter avec l'image à ce stade, évidemment parce que ce n'est qu'un filaire. Ce que vous pouvez faire, c'est mettre une icône d'image juste ici pour indiquer à votre équipe ou à vos clients que ce sera une image. Mais parce que je vous montre ça, vous savez que, par exemple, pour toutes les images, ça va être notre couleur. Alors allons maintenant de l'avant et passons à notre conception. Donc si je vous ramène à notre filaire, vous pouvez voir que les services sont là avec trois cartes, solides. Commencez par là. Je vais à R, T. par exemple. Nos services. Voyons voir. Nous pouvons le positionner pour être au centre et nous pouvons faire quelque chose de plus grand comme 48, par exemple. Au lieu d'irrégulier, allons avec audacieux, comme ça et assurez-vous qu'il est au centre. C' est cette couleur, il suffit de cliquer ici. Et voyons, nous pouvons nous positionner à 100 par exemple. Alors donnez-lui un peu plus d'espace à partir de notre image de héros. Et juste ici, nous allons commencer par créer nos cartes. Donc ces cartes vont être nos cartes de contenu. Donc, pour ce faire, nous allons simplement compter les colonnes parce que nous avons trois cartes que nous allons utiliser pour des colonnes comme celle-ci parce que nous avons un total de 12 colonnes. Donc, si j'ai dupliqué, vous pouvez le voir, parce qu'ils ont quatre colonnes de large, on peut en tenir trois. Si vous, si vous avez besoin d'adapter quatre, alors il y aura trois colonnes blanches comme ceci. Donc, pour ces cartes de contenu, allons de l'avant et commençons par en créer une première, puis nous allons aller de l'avant et en créer d'autres. Et nous allons aussi faire 100 espacements. Donc 1020. Voyons 90 et c'est 100. Pour ça, je vais faire un rayon de 20. Voyons voir. Je peux utiliser cette couleur de remplissage que nous avons utilisée pour les images. Donc celui-là, et voyons, je peux apporter quelques modifications à la hauteur. Donc, disons que ce sera 546, par exemple. Donc comme ça, sans aucune frontière. N' incluons pas l'ombre pour l'instant, peut-être que nous pouvons l'utiliser plus tard, InDesign et un conseil rapide, vous n'avez pas à revenir jusqu'ici pour cliquer et supprimer la grille. Pour voir votre design, vous pouvez toujours double-cliquer ici dans l'espace vide, puis cliquer ici pour afficher votre InDesign. Donc, ce que je vais faire à ce stade est simplement d'utiliser une icône. Voyons voir, je peux lui faire face. Et c'est aussi une grande icône. Et si je clique ici, vous pouvez voir que ce n'est pas un composant, mais faisons-en un composant. Mais avant de le faire, peut-être pourrions-nous le mettre à l'intérieur d'un cercle juste pour montrer un peu mieux comme ça. Sélectionnez ces deux positionnés au centre comme ceci, et regroupez-les. Donc ça va être notre star. Je l'ai vu. Je laisserai délibérément le fond blanc ici. Il contrôlerait la clé pour la créer en tant que composant. Et nous allons utiliser ce composant tout au long de notre conception. Positionnons ça. Donc 12341234, par exemple. Et laissez-le là parce que nous voulons indiquer que notre icône va aller juste là. Maintenant, en dessous de là, nous allons taper le pénal. Voici notre carte, B, G par exemple. C' est notre icône d'étoile. Positionnez les deux vers le bas. Et nous allons utiliser mon outil de texte et taper quelque chose comme compter un, comme ça. Maintenant, je vais aller de l'avant et m'assurer qu'il est aligné à gauche, positionnez-le ici, ou mieux encore aller juste ici. Et voyons, nous n'avons pas créé de style à partir de celui-ci. Donc je vais créer ici. Comme vous pouvez le voir, 24. Et je vais sauter ici, cliquez ici pour l'utiliser comme 24. Mais parce que c'est normal, je veux le créer pour être audacieux, juste pour se démarquer un peu mieux. Maintenant, parce que nous avons régulièrement cliquez ici pour ajouter gras. Donc, un style de personnage général que vous allez de l'avant et créez. Vous pouvez sauter à l'intérieur d'ici puis ajouter simplement un nouveau style de personnage. Donc je vais m'assurer qu'il est aligné et tout va de l'avant, frapper le contrôle D dupliqué. Et je vais créer un paragraphe de texte ici. Maintenant, pour ce faire, je vais simplement sélectionner celui-ci à 18 ans. Ça a l'air bien. Et je vais déplacer ces deux-là comme je l'ai fait avec ce 91. Encore une fois, 80. Et pour créer un paragraphe, vous pouvez créer une taille fixe et simplement étendre dans cette zone de texte à ici. 1234. Donc nous avons 40%, désolé, 40 pixels ici, et simplement déplacer ceci ici. Maintenant, pour la hauteur, vous pouvez simplement étendre cela comme vous le souhaitez. Et pour le remplir avec du texte, je vais aller ici et choisir lorem ipsum. Donc, une fois de plus, vous pouvez cliquer ici, rechercher tous m ipsum comme votre plugin, cliquez, sentir le texte de l'espace réservé et vous pouvez choisir celui de ceux-ci que vous voulez. Et je vais simplement utiliser celui-ci, insérer du texte et la vache laitière. Maintenant, nous avons le texte. Maintenant en dessous de Dat. Nous allons également en apprendre davantage. Donc, je vais retourner à ma palette de calques. Elle contrôlerait D pour dupliquer ça, le déplacer vers le bas. Et voyons, peut-être que je peux faire un espacement de 40 entre tous. Donc quelque chose comme ça, comme ça, et on en a 32, alors on est en position d'être 40. Je vais supprimer dans cette taille fixe et le rendre automatique Whit. Et je vais simplement taper, en apprendre plus un écrivain. Et c'est fondamentalement tout. Ce que je vais aussi faire est d'inclure une icône de plus. Et j'ai déjà préparé cette icône, mais avant de le faire, je peux peut-être changer dans le disque à une autre couleur, celle-ci par exemple. Et peut-être que nous pouvons utiliser cette couleur pour tous les liens. Parce qu'il s'agit d'un lien, les gens vont cliquer dessus. Et voyons pour celui-ci, peut-être que nous pouvons, je ne sais pas, positionner comme 20. Alors voyons 12. Donc 20. Je peux retourner ici. clic droit, faites local, comme nous l'avons fait avec tous ces autres. Et c'est fondamentalement tout. Donc, ce que nous pouvons faire maintenant, c'est sélectionner tous ces éléments. Donc nous sommes à 40, échec à 40 et les positionner tous bas 1234 parce que nous en avons 40 d'ici, 40 d'ici. Et nous allons inclure l'icône, qui sera un peu plus grand plus tard quand nous commencerons avec le design. Donc si on vous ramène à ici, maintenant allons de l'avant et organisons tout ça. Donc, nous avons l'icône des étoiles, et déplacons tous ces vers le bas comme ça. Icône étoile, compte 1. Comme ça, l'icône en forme de flèche en savoir plus va aller ici. Et allons grouper le disque et appeler la carte 1. Comme ça. Maintenant, vous pouvez utiliser une fonction de grille de répétition, vraiment facile. Il suffit d'étendre, en créer trois. Mais je ne vais pas faire ça. Je vais simplement les dupliquer tous alignés comme ça. Et la raison en est que plus tard, je vais les supprimer, créer une conception, puis créer un composant et à partir de ce composant modifié à toutes ces autres conceptions. Donc c'est fondamentalement tout. La seule chose que nous pouvons peut-être faire est de nous donner juste un peu plus d'espace. Ainsi, par exemple, une ligne d'espace de plus. Allez ici et remplissez le texte de l'espace réservé. Voyons voir, nous devons l'étendre à l'écriture de bitume. Je ne sais pas pourquoi. Ça ne me donne plus de place. Donc je vais juste le remplir moi-même. Comme ça. Et puis je vais me donner un espacement de 40 entre tout ça comme ça, comme ça. Parce que je vais ajouter de vraies informations plus tard. Et je pense vraiment que j'ai besoin d'un peu plus d'espace pour tout ça. Et vous pouvez toujours aligner cette carte centrale comme ça. Maintenant, nous allons les renommer certains. C' est la carte numéro deux, et cette dernière est la voiture numéro trois. Je vais les regrouper un peu différemment, donc comme ça et voyons, on peut appeler ce service. Et on peut appeler ce service un, contrôler un contrôle C, contrôler V. et enfin contrôler V pour ce troisième. Et c'est essentiellement sa section de services est terminée. Si je te ramène, ce qu'il nous faut maintenant, c'est ça. Donc, nous avons la page d'accueil et nous avons le taux de change ici. Donc, pour gagner un peu de temps, ce que je peux faire est simplement d'utiliser indies Flags Great ici. Ou nous pouvons réellement aller de l'avant et commencer par créer notre section taux de change. Donc, pour ce faire, je vais sélectionner cette position, c'est comme ça. Et voyons, peut-être que je peux appeler ça le taux de change, BG. Mon père. Et voyons, 1924, la hauteur de la largeur. Allons-y avec 240, comme ça. Pour la couleur, allons avec la même couleur que nous l'avons fait pour nos images et pour l'espacement scintillant. Peut-être qu'on peut aller avec quelque chose d'un peu plus grand, comme 150, par exemple. Comme ça. Et maintenant, ce que nous pouvons faire est en fait creuser et commencer par ajouter nos textes. Donc, sans aucun type de bordure dans. Et voyons, 24 boulon fonctionne bien. Voyons me recomposer pour être ici. 1234 et en bas du contrôle D. et positionnez ces débris ici. Voyons, laissons la ligne et ça va être quatre. Et en effet, comme papa et voyons, ça va être 24, irrégulier comme ça. Voyons voir, nous sommes à 40 ans, donc tout a l'air bien. Maintenant, pour ajouter toutes ces informations, voyons ce que nous pouvons faire. Peut-être pourrions-nous reproduire ces deux-là. Hit contrôle D, position et position vers le bas est d'être ici, assurez-vous que les deux sont laissés plus à eux, notre centre et par exemple, la discipline à être euro. Et ça va être une certaine valeur. Donc 1.58917, Par exemple. Voyons voir, peut-être qu'on peut lui donner 15 espacements et c'est tout. Tout ce qu'il faut faire, c'est créer ces drapeaux. Donc, pour ce faire, je peux créer une grille une fois de plus et vous le montrer encore une fois. Alors voyons. Allons avec quelque chose d'un peu plus grand, comme une ligne, neuf semaines AT qui enlèvent la frontière, utilisé la grille répétée. Et je vais mettre la vidéo en pause ici parce que je vais créer le même processus que je vous ai déjà montré. Et maintenant que je l'ai fait, vous pouvez voir que tous sont sélectionnés. Et je suis allé de l'avant et j'ai mis de côté ceux-ci, que je vais réellement utiliser. J' ai donc le dollar américain, le Royaume-Uni et le franc suisse, le rouble russe et le yen japonais. Et vous ne voyez pas que nous manquons d'euro. C' est parce qu'il n'y a pas de drapeau de l'Union européenne ici. Donc, nous allons aller de l'avant et enlever tout ça. Cliquez ici. pourrais contrôler la position D ici. Et le picotement va faire, c'est glisser et déposer une image d'un drapeau de l'UE. Et vous pouvez trouver ces images sur Wikipédia. Ils sont libres d'utiliser à ces fins. Donc, je vais aller de l'avant et les sélectionner, faire glisser et les déposer à l'intérieur. Et ce que je vais faire, c'est voir la position et ceci pour être un alignement à gauche, assurez-vous qu'il est à 40 comme ça. Si ces deux-là sont au centre et les positionner pour être juste ici. Voyons voir. Alors peut-être 22. Je pense que ça marche bien. Et maintenant, allons de l'avant et commençons par les ajouter. Donc, je vais frapper le groupe de contrôle G ce texte de qualité, comme ça. Et puis faites simplement quelques copies supplémentaires et positionnez-les. Alors je vais aller de l'avant et positionner mon drapeau américain ici. Vous quelqu'un. Oui, donnons ce capital. Ou vous pouvez aller de l'avant et cliquer ici pour ajouter une couleur majuscule. C' est plus facile pour toi. De quoi avons-nous besoin ? Suivant est un Royaume-Uni. Alors positionnez-le ici, mesurez-le au centre avec toutes ces positions de contrôle D ici. C' est une grande livre britannique. Faites une autre copie, et faites une autre copie ici. Alors qu'est-ce qu'il faut ensuite, c'est franc suisse et le nom est c, h, f. Alors positionnez-le ici. Vous pouvez voir quand vous avez vos copies, il est beaucoup plus facile de traiter toutes ces parce que c'est simplement une situation de glisser-déposer, comme vous pouvez le voir. Donc pour ce X, U, B, et enfin, et japonais encore, et appelez ça un jour. Donc c'est notre section plus tard le week-end, allez-y et apportez quelques changements, adaptez ceci, mais fondamentalement c'est irritant. Alors allons de l'avant et organisons tout. Alors déplacez l'aération juste ici depuis le haut. Je vais mettre le taux de change ici. Je vais mettre en avant la date aussi ici. Et puis j'irai avec l'euro. Donc c'est cette position ici. Et assurez-vous qu'un texte fait à la main, USD avec ce texte et le groupe doit l'appeler britannique congruent. Vous pouvez voir avec certains d'entre eux, cela peut prendre un peu de temps et c'est battant et laborieux. Mais comme toujours, vous pouvez accélérer un peu les choses en parlant, tout d' abord, comme je le fais. Mais fondamentalement, vous pouvez augmenter votre vitesse. Maintenant, enfin, allons de l'avant et regrouper tous ces éléments. Je ne vais pas m'embêter avec les valeurs réelles pour le moment. On va laisser ça pour le design comme ça. Et maintenant, allons-y et continuons vers le bas. Donc, si je vous emmène ici, vous pouvez voir que nous avons une imagerie alignée à gauche, avoir le paragraphe de titre et le texte. Donc, ce que nous allons commencer à faire maintenant est peut-être en fait copier et coller certains de ces éléments. Donc, pour notre image et allons de l'avant et utiliser un outil rectangle. Je vais aller de l'avant et enlever la frontière. Et voyons, utilisons cette couleur pour nos images. Alors c'est celui-là. Pour cette face glitzy. Peut-être qu'on peut aller avec 150 d'ici, comme ça. Et voyons pour la largeur, peut-être que nous pouvons aller avec six colonnes de large, donc 246, donc pour aligner avec celui-ci. Et nous en avons six autres pour le texte et pour tous ces autres éléments. Donc la première chose que je vais faire en fait est de copier ce bouton et nous allons le renommer. En savoir plus. Btn, bon contrôle. Sue. Et voyons voir, position. C' est quelque part par ici. Et je vais faire de l'espace supplémentaire. Donc, si je supprime ma grille, vous pouvez voir que j'ai une colonne entre les deux, qui est l'espace vide. Juste pour me donner un peu plus de place pour que je puisse voir tout ça un peu mieux. Maintenant, je peux cliquer sur mes textes et voir. Et je peux taper quelque chose comme Service ira ici, notre nom de service ici. Et c'est juste parce que et pour montrer à vos clients et ce qui va être possible, ce qu'ils peuvent inclure ici. Et nous allons faire quelque chose d'un peu différent ici aussi. Donc, nous allons aller avec audacieux. On va y aller avec 48. La couleur du texte sera la même. Il suffit d'aller rec ici le style de personnage et plus de largeur juste en dessous. Ensuite, passons avec un paragraphe de texte. Et voyons, 24 va marcher. Eh bien ici, Extended. Voyons voir, peut-être cinq lignes de texte comme ça. Comme ça. Et je vais le fermer ici et retourner à mes plugins, remplir le texte de l'espace réservé juste pour remplir le tout comme ça. Et voyons pour l'espacement, on peut aller avec 40 comme avant. Et maintenant, vous pouvez commencer à voir ces changements répétés. Donc, en parlant de plusieurs fois. Donc cet espacement ou 40 et ainsi de suite et ainsi de suite. Donc, toutes ces choses vont se produire de plus en plus à mesure que nous commençons à évoluer dans nos conceptions. Alors, voilà notre image. Et appelons ça, disons le nom du service. Par exemple, juste pour l'instant et plus tard, quand nous avons réellement du contenu à mettre ici, alors nous allons changer et mettre à jour son nom. Maintenant, je peux frapper le contrôle S, et je peux aller de l'avant et te montrer ce que tu peux faire avec ça. Vous pouvez donc cliquer sur le nom de l'aéroport et cliquer ici juste pour entrer dans le mode de prévisualisation. Et vous pouvez voir à quoi cela ressemble parce que nous avons étendu notre rpart, nous pouvons aller de l'avant et faire défiler vers le bas. Et maintenant, vous pouvez voir que cela commence à ressembler à un site Web réel. Ainsi, vous pouvez toujours aller de l'avant et partager cela avec votre client en allant simplement à la part. Mais je vais l'expliquer un peu plus tard. Allons maintenant de l'avant et, et fondamentalement, arrondissons ce design et finissez-le. Alors maintenant, commençons par créer notre courant. Si nous vous reprenons une fois de plus, vous pouvez voir que nous avons ces deux cartes, scie, image et texte et btn est ci-dessous. Donc, les Packages sont des comptes combinés. Revenons en arrière et commençons par concevoir la dose. Donc parce que nous le devons, nous pouvons aller avec 16 largeur comme ça. Et voyons ce qu'on peut faire avec eux. Alors appelons cette grosse carte, par exemple. Et comme ça. Et donnons-lui la même couleur. Donc dans S1. Et allons de l'avant et changeons la taille. Donc, nous pouvons aller avec 7-0 pour, par exemple, comme ça, rayon de coin de 20 va bien fonctionner, enlever toute bordure. Et ce que nous pouvons faire est de dupliquer celui-ci. Vous avez contrôlé D. On va l'appeler grosse image actuelle. Parce que ce sera l'image qui va aller juste ici en haut. Alors voyons. Nous pouvons entrer ici, 20, 24 en haut à gauche et en haut à droite, 00 en bas à gauche et en bas à droite. Et pour vous montrer ce que j'ai fait, je peux cliquer ici. Et voyons, nous pouvons faire 368 par exemple. Et maintenant, vous pouvez voir que c'est notre arrière-plan pour le texte et c'est pour notre image. Nous allons donc inclure notre image un peu plus tard. Et je le laisserai là. Donc, pour mettre notre texte, voyons ici. Et nous pouvons aller de l'avant avec 24 volts par exemple, pour celui-ci. Oui, je pense que ça marche très bien. Et voyons, on peut aller avec 40 tout le long du chemin. Donc 1234. Et on peut faire la même chose ici, 1234. On peut aller contrôler la tête du groupe D1, désolé, dupliquer ça, le positionner vers le bas. On peut peut-être rendre ces 18 irrégulières comme ça. Et nous pouvons l'étendre pour être, voyons, comme ça, 1234 et ensuite le positionner ici. Et je vais me donner quatre d'affilée comme ça. Et assurez-vous que cela s'adapte ici. Allez à mes plugins. Lorem ipsum, taux de clic. Osez. Je ne comprends pas pourquoi il a fait ça. Pour une raison quelconque, ça ne marche pas. Peut-être qu'on peut éteindre ça et aller avec une taille fixe. Oui, ça marche maintenant. Je ne sais pas pourquoi ils ont fait ça, mais ça n'a pas d'importance. Donc, ce que je vais faire ensuite est d'utiliser ce bouton et de le mettre à l'intérieur. Alors je vais le mettre ici. Assurez-vous que le centre du bouton est aligné ici. Et je vais en fait positionner 40 à partir de la droite. Donc 1234. Et ajuster la dette, il lui donne un peu d'intérêt visuel plutôt que de se positionner dans le bouton juste ici et avoir tout cet espace vide. Donc maintenant, ça ressemble à un. Vous pouvez également positionner pour être aligné au centre à gauche comme vous le souhaitez. Mais je pense qu'à des fins de variation, il vaut mieux le laisser ici, mais c'est vraiment à vous de décider. Vous pouvez aller de l'avant et l'expérience, désolé, expérimenter avec cela comme vous le souhaitez. Donc, il positionnera ceci ici. Et voir, donc nous avons besoin de regrouper ces deux textes, image et en savoir plus bouton devrait contrôler g, appelé ce grand courant. Comme ça, appuyez sur le contrôle D pour dupliquer. Et voyons, peut-être que nous pouvons les positionner à 150 pour que nous puissions avoir le même espacement que nous avions entre tout ça. Maintenant que cette page arrive bien, ce que nous devons faire enfin, c' est créer et blog. Parce que si je vous ramène, vous verrez que nous avons des nouvelles et que nous avons ces trois sections avec des articles de presse. Donc, ce que nous pouvons faire est en fait utiliser dans ce même contrôle de frappe courant D moulé et emboîté. Je vais aussi utiliser ces mêmes textes. Alors frappe le contrôle C, la mission de contrôle V. C' est au centre. Et peut-être qu'on peut appeler ça nos dernières nouvelles ou quoi que ce soit. Nos derniers articles de blog ou si vous voulez vous assurer qu'il est 150 aussi bien. Assurez-vous qu'il est au centre. Et ce que je vais faire avec celui-ci, voyons. Je peux sauter à l'intérieur et ce serait, je peux appeler ce petit courant ou quelque chose comme ça. Ou encore mieux, nous pouvons réellement les utiliser. Alors voyons. Contrôle C. Nous allons écrire ici supprimé celui-ci. Contrôle v position est ici. Et parce que nous en avons trois, donc ce sera fondamentalement le même que celui-ci. Donc plus avec tout le chemin vers le bas. Maintenant, ce que je vais faire ici, voyons. Appelons ce petit courant. Parce que nous allons réellement le créer plus tard pour être un composant. Ce que vous allez faire avec celui-ci, c'est vous assurer que nous n'avons que deux lignes de texte, comme ça. Donc 40, encore une fois, touche le contrôle D. Nous allons mettre la date ici parce que vous avez besoin d'une date pour ça. On va aller avec la largeur automatique. Et voyons 1012, 20-24 exemple. Et nous allons lui donner cette couleur, par exemple, juste pour différencier un peu, cela peut rester le même. Et au lieu de cet Ikhwan, voyons, nous pouvons avoir ce contrôle D. Et voyons une petite partie comme ça. Maintenant pour la hauteur. Et voyons ce qu'on peut faire. Peut-être 300, je pense que ça va bien marcher comme ça. Et ils vont changer la couleur à découvrir. Ce que nous allons faire ensuite, c'est étendre cela en hauteur. Cette carte originale. Voyons donc, 631. Je pense que ça va bien marcher. Oui. Je vais donc les sélectionner en utilisant la touche Maj, les positionnant 1234. Voyons voir. Et voyons ce qu'on peut faire avec celui-ci. Alors positionnez-le à partir d'ici. Peut-être allons voir, peut-être que je peux monter ces changements juste un peu. Ou encore mieux, je peux bouger ça juste un peu vers le bas. Donc comme 20, ça va être 40. Et voyons, 1234. C' est très bien. Donc, ce dont nous avons besoin, c'est de positionner ça bas. Donc, il va être à 87, a atteint 50, sept loin. Et faisons quelques changements finaux. Donc nous avons besoin de ces deux derniers. Donc en bas à droite et en bas à gauche pour être à 0 comme ça. Donc, quand je clique dehors, vous pouvez voir à quoi ça ressemble. Donc enfin, on en a 40, on en a 40 d'ici, on en a 20, on en a 4040. Alors allons de l'avant et regrouper ça. Donc nous en avons un. Je peux le cacher ici. Et organisons les choses juste un peu. Donc service un, voir plus l'admet. Et juste ici, nous allons écrire dans quelque chose comme l'Article 1. Juste pour différencier les choses un peu parce que ce sera nos dernières nouvelles. Voyons où on est comme ça. Et appuyez sur le contrôle D pour le dupliquer. Et dupliquez-le encore une fois. C' est l'événement a, B, Article Deux et la discipline à l'article trois comme ça. Et organisez simplement ces. Donc, c'est deux, c'est trois actuel. Positionnez-les un peu différemment. Et enfin, nous pouvons appeler ça nos dernières nouvelles parce que nous avons déjà de ce titre comme cellule. Maintenant, les deux dernières choses nous allons créer notre bande d'information ici et le fond du pied de page. Je vais simplement l'avoir comme un pied à l'arrière-plan parce que je vais vous expliquer comment vous pouvez modifier ces photos au fur et à mesure que vous allez le long un peu plus tard. Mais pour l'instant, nous allons juste avoir l'arrière-plan du pied de page, Derek. Mais avant ça, donnons-lui une fiche d'information. Et pour ce faire, nous allons utiliser un outil rectangle une fois de plus. Et positionnons-le à 150. Donc, en voyant comme tout ça, maintenant, pour ça, appelons ça la bande. Bg va contenir essentiellement la moyenne des informations clés que nous voulons présenter à nos visiteurs. Alors donnons-lui une hauteur de 180. Vérifions la 50. C' est très bien. Donnons-lui cette couleur, par exemple, belle et sombre. Enlève la bordure. Et ce que nous allons faire maintenant, nous utilisons simplement notre logo que nous avons ici, en haut maintenant. Ou on peut aller de l'avant et faire glisser et déposer le héros. Étaient en fait positionner ici. Utilisez la version grise ou la version noire et blanche, comme je vous l'ai expliqué. Et c'est ce que je disais parce que vous devez positionner ces indifférents sur des couleurs différentes. C' est pourquoi nous avons des logos dans différentes versions, différentes variations et différentes couleurs. Enfin, ce dont nous avons besoin, c'est le texte. Donc je vais aller de l'avant et copier ceci et copier ceci. Alors localisez, positionnez ce logo vers le bas, allez vers mon haut. Maintenant, utilisez les emplacements. Hold pourrait contrôler nos emplacements. Utilisez le téléphone et disciplinez-le. Contrôle C, pour le copier et aller jusqu'au bout. Cliquez sur mon contrôle BG V et déplacez perroquet vers le bas. Je maintiendrai mon quart de travail et plus d'aération. Et maintenant, ce que nous devons faire est fondamentalement une réorganiser ces. Et juste un peu, Voyons voir, peut-être que je peux mettre ça et ça pour être quelque part ici, par exemple. Et je peux dire ça, et ça pourrait sembler être là pour le moment. Et ce que j'ai enfin besoin, c'est de SMS pour mon email. Donc ils ont un e-mail, donc il a eu un prêt sur le bank.com. Vous allez évidemment utiliser le vôtre, le mettre sur les clients plus tard. Et qu'avons-nous enfin besoin, c'est d'une icône e-mail. Donc, je vais utiliser un que j'ai déjà créé précédemment. Et voilà. Je vais revenir ici, situé ici, faire un clic droit local, même comme nous l'avons fait pour tous ou peut vérifier rapidement. Donc c'est à 20 ans, si je me souviens, oui. Alors allez juste ici. Déplacez un pour vous assurer que c'est au centre comme ça. Et c'est centralisé. Donc nous allons appeler cet e-mail comme ça. Et faisons quelques alignements rapides. Alors je vais positionner ça. On peut appeler ce téléphone et les lieux. Et je vais utiliser un vrai emplacement ici. Peut-être voir, parce que je suis un peu paresseux à taper, je vais simplement doter le gris ici contrôle V. Et voyons, je peux les repositionner. C' est pour ça que tu les mets dans des dossiers. Je vais sélectionner ceci pour être ici. Et puis je vais sélectionner les trois et cliquer ici, ce qui va le positionner uniformément en dissident d'ici à ici. Maintenant, faisons une réorganisation encore une fois. Nous avons donc le logo, l'emplacement, le téléphone, l'e-mail. Une dernière chose et nous allons tous les sélectionner. Cliquez ici pour vous assurer qu'ils sont au centre. Il touche le contrôle G et appelle cette information glissée. Et parce que cette section est vraiment assez simple, nous pouvons finir par l'utiliser dans notre conception finale. Enfin, nous allons créer un pied de page. Et pour ce faire, je vais simplement utiliser un rectangle une fois de plus. Alors, voyons. Donnons-le un jour. Mencius de 19-21 Et par 5-6, cinq, par exemple. Je vais m'assurer que c'est au centre. Je vais retourner ici et utiliser notre couleur la plus sombre, qui est ce 100 va réellement le déplacer en dessous. Je ne sais pas pourquoi Adobe st fait cela de temps en temps, mais cela ne cesse de me montrer ces variations. Je veux le faire ici, positionné ceci ici. Et maintenant, j'ai toutes mes couleurs sont positionnées uniformément. Maintenant que je l'ai fait, je peux appeler ce pied de page BG, le positionner jusqu'au bas. En fait, je vais aller de l'avant et fermer le conseil RR. Donc double-cliquez et assurez-vous que votre zoom tout le chemin dans de beaux vêtements, nous avons une bordure, vous allez supprimer cela. Et fondamentalement, la seule chose que je vais faire est d'utiliser et d up des éléments de notre navigation. Donc, si nous vous ramenons ici, nous avons des comptes appartient, des cartes, investir numérique. C' est ce que nous allons réellement utiliser et enfin utiliser l'un ou l'autre des liens. Je vais donc utiliser le texte de notre principal maintenant. Donc simplement sélectionné hit Control-C. Et voyons, je peux zoomer en position adhérer Contrôle V. Maintenant, ce que je vais faire est d'utiliser une couleur blanche, comme ça. Et enfin, je vais utiliser quelque chose comme 24 gras pour ces années de couleur loin. Et maintenant, je les ai réorganisés juste un peu en savon. Voyons voir. Peut-être que je peux le positionner à 100 en bas du haut. Donc 12345678910, juste pour nous donner un peu plus d'espace et s'assurer que cela est positionné sur la grille. Assurez-vous que vous avez des colonnes de séparation parce que nous allons effectivement inclure quelques inform 30. Wireframes dans Adobe Xd 3: Allez-y et continuez avec notre filaire. Donc, si nous zoomons un peu plus près, vous pouvez voir que la page suivante que nous devons créer des comptes. Et ce que je vais faire est de cliquer ici, appuyez sur le contrôle D pour dupliquer mon rpart. Et puis ce que nous allons faire, comme je l'ai expliqué dans les vidéos précédentes, nous ne allons pas toucher à ce nav principal. On va s'y adapter. Nous allons l'animer plus tard dans les étapes de conception, mais pour l'instant, nous allons juste le laisser ici. Maintenant, quand il s'agit de l'image de héros, comme vous pouvez le voir sur ces fils que nous avons dessinés. Donc, sur la page d'accueil, qui est celle-ci juste ici, nous avons le texte du titre et le bouton d'appel à l'action sur la gauche. Mais sur chacun d'entre eux, Après cela, nous l'avons sur la droite, comme vous pouvez le voir, juste pour lui donner une sorte de distinction entre ces deux pages. Donc ce qu'on va faire en premier, c'est qu'on va sauter à l'intérieur. Et je vais juste double-cliquer parce que nous l'avons mis dans un dossier. Je vais juste le positionner quelque part par ici. Alors voyons 246. Alors nous allons aligner jusqu'à la sixième. Donc, si nous zoomons un peu plus près, vous voyez 1-2-3, 4-5-6. Donc ça couvre six lignes indies, quadrillage. Ensuite, nous allons double-cliquer ici et taper des comptes parce que nous voulons lui donner un nom. Et encore une chose à propos d'Adobe XD si nous voulons montrer les flux. Donc, nous allons voir si je touche contrôle un 0, que c'est notre filaire, Ce sont nos fils de gens dans ce est notre architecture de site Web. Ainsi, vous pouvez lui donner un flux et montrer un flux à vos clients, vos clients ou d'autres concepteurs de l'équipe. Il suffit de cliquer ici sur un prototype. Cliquez sur celui-ci et cliquez ici. Il va montrer le flux un, suffit de double-cliquer sur l'aperçu et de lui donner un nom. On va l'appeler filaires. Et pourquoi Flo est important. Si je reviens à mon design, vous pouvez voir que ce nom reste ici. Eh bien, plus tard, nous allons réellement nous donner beaucoup plus de ces éléments de conception. Beaucoup plus de ce sont des planches. Nous allons inclure la conception responsive, nous allons inclure des tableaux de bord et ainsi de suite. Enfin, je vais montrer comment il peut adapter tout cela aux applications et tailles d' applications que nous allons concevoir pour l'iPhone. Donc tous ces instincts vont nous prendre beaucoup d'espace. Et quand vous envoyez ce fichier à vos clients et aux développeurs, ils veulent savoir ce que tout est. Et enfin, c'est beaucoup plus facile pour vous en tant que designer. Sachez ce que c'est parce que vous allez vous voir à la fin de ce cours. Nous allons avoir beaucoup de ces informations à l'intérieur. C' est pourquoi il est important de montrer vos flux. Soit l'avantage sur le flux est et ces filaires vont juste se connecter entre eux. Donc, si nous zoomons un peu plus près, vous pouvez voir qu'ici nous avons une page d'accueil ou un site Web ou comme vous voulez l'appeler. Mais après la page de connexion, on saute à l'intérieur de l'aéroport. Désolé, à l'intérieur du tableau de bord. Ainsi, le tableau de bord peut être aussi flux séparé. Il peut s'agir de notre tableau de bord filaire. Il peut s'agir d'un tableau de bord filaire, comme vous voulez l'appeler. Et on verra un peu plus tard. Allons-nous réellement concevoir toutes ces pages à l'intérieur de nos filaires ? Ou allons-nous simplement concevoir ce premier tableau de bord, puis sauter dans la conception et ensuite ajouter toutes ces autres pages. Ne perdez pas trop de temps. Alors maintenant que, c'est couvert, revenons à l'intérieur. Et ce que nous voulons faire pour celui-ci, c'est, et encore une fois, c'est pour ça que vous avez tout ça. Donc vous pouvez voir que nous avons un SMS ici, ouvrir votre compte. Donc, nous pouvons simplement double-cliquer ici. Et nous pouvons dissocier les services. Ainsi, vous pouvez cliquer avec le bouton droit sur le groupe ou le contrôle de décalage G, Shift Command Z. Et appelons-le ouvrir votre compte. Et ce que nous allons avoir ici, si je vous ramène une fois de plus ici, nous aurons quatre icônes différentes. Donc, nous allons fondamentalement avoir quatre boîtes différentes avec le texte à l'intérieur et sur ces cases nous allons réellement inclure des icônes et le texte. Voyons voir, peut-être que nous pouvons commencer par ajouter ceci. Peut-être qu'on peut appeler ça un sélecteur. Par exemple. Juste en bas, ici. Je peux sauter à l'intérieur de cette carte numéro un. Laissez-moi aller de l'avant et supprimer ces deux-là pour que je puisse l'ouvrir. Et au lieu de BG actuel, peut-être que je peux appeler ce sélecteur comme ça. Et si nous zoomons un peu plus près, je peux changer ce qu'ils ont mentionné parce qu'en ce moment c'est beaucoup trop grand. Alors allons-y avec trois 66 largeur, 312, comme ça. Donc, vous pouvez voir qu'il prend trois colonnes de largeur. On va se débarrasser de ça. Nous allons nous en débarrasser. Et en fait, on va juste laisser nos textos, juste celui-ci. Donc, je vais juste enlever cela aussi. Et maintenant nous avons ces deux-là. Donc je vais appeler ce compte Start parce que si vous vous souvenez, ils nous ont donné ces noms de comptable. Alors commencez le compte est notre premier. Et sélectionnons ces deux comptes étoiles et celui-ci, positionnez-le au centre. Positionnons r, icône étoile. Positionnez-le au centre comme ça, et laissez-le comme ça pour l'instant. Mais je vais faire ensuite est de créer cette forme. Et peut-être que je peux même l'étendre un peu à quelque chose comme ça. Peut-être que je peux le retourner parce que je veux montrer que distinct est sélectionné. Donc, sélectionnons-les pour nous assurer qu'ils sont dans la position centrale, ce sélecteur de polygone vers le haut, et appelons-le flèche. Voyons voir. Zoom arrière juste un peu et voyons à quoi ça ressemble. Je pense que ça va bien marcher, ça va éteindre ma grille pendant une seconde. Je pense que ça va bien marcher, j'ai juste besoin de le positionner et juste comme sur le disque peut-être. Et puis je vais lui donner la même couleur et que je l'ai fait avec ce fond. Donc, je vais les sélectionner pour cliquer ici pour combiner dans cette forme. Donc maintenant, nous avons une seule forme. Donc, vous pouvez voir si je change ces couleurs, vous pouvez voir comment il change et met à jour à cette seule forme. Donc on va le laisser là. Et voyons, nous pouvons appeler ce compte Start comme ça. Et je peux ramener ma grille parce que je vais en avoir besoin. Je vais dupliquer cette position ici. Une position celle-là ici. Une fois de plus, vous pouvez utiliser la fonction de grille de répétition si vous voulez acheter la encore une fois, car il s'agit juste d'un filaire. Et plus tard, je vais réellement créer ceci tant que composant et y ajouter quelques éléments supplémentaires. Alors je vais juste le laisser comme ça. Ce prochain est appelé compte étranger. Et je vais simplement double-cliquer ici. Comme vous pouvez le voir, nous avons des problèmes et cela va être millénaire. Tellement compte millénaire. Et la raison pour laquelle je renomme toutes ces choses est juste, c'est plus simple plus tard de comprendre ce que tout est. Et ce dernier est premium. Donc, je vais juste sélectionner mon début à écrire Freemium et l'appeler un t. Ensuite, je vais supprimer ceci, et je vais en fait utiliser ceci à mon avantage. Alors voyons, peut-être Aiken une position qui à 60, peut-être, nous allons voir. Donc 1-2-3, 4-5-6 peut-être. Voyons à quoi ça ressemble ici. Et je peux aussi le prouver juste pour vous montrer à quoi ça ressemblera plus tard quand il sera en direct. Donc, évidemment, vous ne pouvez pas le dire pour le moment, mais celui-ci, disons, est sélectionné. Donc, avec chacun d'entre eux, lorsque vous les sélectionnez dédain fois aller à mettre à jour et cette image va également mettre à jour. Alors, revenons-le. Et pour cette image, permettez-moi de choisir rapidement cette couleur car j'ai besoin d'adapter certains de ces rayons de coordinateur. Alors voyons. Je vais mettre à jour mon haut à gauche et ajouté 20. Ça va être 20. Donc, si nous cliquons dehors, vous pouvez voir que ceci et ceci sont autour d'elle. Ce que je vais faire ensuite, c'est inclure la mangrove de retour. Et je vais sauter à l'intérieur de mon image. Et je vais le positionner juste là. Donc je vais le rendre juste un peu plus étroit qu'à l'origine. Juste osez, il s'adapte un peu mieux à notre grille et à notre structure. Donc, si on voit qu'on est à 100 ans ici, on est à 60 ans. Donc tout a l'air bien. Ce que je vais faire ensuite est d'ajouter une section de questions communes juste en dessous de la dissection. Je vais frapper le contrôle D et le positionner à 100. Et voyons, je vais le laisser ici et voyons de quoi nous pouvons nous débarrasser. Pour que nous puissions nous débarrasser de toutes ces choses. Donc ce que je vais faire pour celui-ci, c'est, voyons, j'ai besoin, j'ai besoin de cette section par exemple. Alors nous allons sauter à l'intérieur d'ici. Et vous pouvez toujours aller en arrière et en avant entre tous ces éléments et prendre ces différents éléments. Je vais aussi prendre en savoir plus de contrôle C et je vais aussi revenir ici et se positionner juste ici. Alors maintenant, nous allons les organiser juste un peu. Donc, parce que ce seront des questions courantes. Et nous pouvons vraiment aller de l'avant et finir cette section parce que ce sera beaucoup plus facile pour nous plus tard. Donc, c'est 24 volts. Je vais en fait augmenter ce chiffre à 24. Je vais porter ce chiffre à 24. Et un mélange que cette couleur est sélectionnée. Et voyons, je peux leur donner un espacement ou 40. Ça a l'air bien. Voyons voir, ça va être à la chirurgie ou peut-être pour quelque chose comme ça. Et permettez-moi d'aller de l'avant et de copier et coller le texte original que nous allons réellement utiliser ici. Et je vais sauter ici et m'assurer que ce soit 40 ans. Et cela va écrire dans les questions de compte courantes comme ça. Et je vais en fait glisser et déposer mes icônes ici, que j'ai préparées. Je vais donc sauter ici et positionner mon icône ici et l'aligner vers la gauche. Et voyons, je peux le positionner pour être à 40, comme ça. Je vais sauter ici ou faire un clic droit local, et c'est mon icône. Maintenant, toutes ces icônes haut de gamme sont maintenant prises à partir d'invitations ou d'éléments. Et vous allez voir ces icônes tout au long de notre conception, surtout quand nous les abordons. Et je vais aussi laisser des liens vers ces icônes et ces packs d'icônes. Pour ne pas me répéter, on ne peut pas les utiliser à d'autres fins que l'apprentissage. Si vous décidez de les utiliser, alors il n'est pas étonnant que certaines de ces sociétés aient essayé de vous poursuivre en justice. Donc, si vous voulez les utiliser pour des projets premium, pour vos projets clients et ainsi de suite, vous devez acheter ces icônes. Maintenant, je vais en faire trois de plus. Voyons voir, contrôle. Assurez-vous que c'est 41234 et Control D une fois de plus. Alors voyons. Je ne sais pas pourquoi ça me donne 39,8, mais ça n'a pas d'importance. Je vais également copier et coller certains d'entre eux de mon design original juste pour gagner un peu de temps. Parce que, comme il l'a dit dans cette section, va apparaître dans nos pages. Donc, si nous zoomons ici, vous pouvez voir les questions courantes venir, questions, les questions et ainsi de suite. Donc, toutes ces pages, il va apparaître, donc il est beaucoup plus facile pour nous de le réparer maintenant et de le faire maintenant que de l'attendre plus tard. Maintenant, allons sauter à l'intérieur et organiser un peu les choses. Donc, nous avons des informations de compte, icône, questions d'icône, nous avons le texte. Et organisons ces trois un peu comme ça. Et je sauterai à l'intérieur du groupe D sur le contrôle G. et j'appellerai ces questions communes comme ça. Et laissez-moi le positionner juste au-dessus de la bande d'information comme ça. Des questions courantes comme ça. Et passons à l'intérieur au lieu du nom du service. Voyons ce qu'on peut faire. Nous pouvons simplement renommer ces informations ou informations. Parce que, comme je l'ai dit, cela va contenir des informations spécifiques à chacun de ces comptes ou chaque fois qu'un utilisateur clique sur ceux-ci et cette information va réellement changer. Donc, quand nous arriverons à la phase de conception, je vais en fait montrer que nous allons faire un prototype de lit, ajouter quelqu'un mentionne, ajouter du piquant à lui. Et il y a quand cette information va changer avec ces images. Donc pour l'instant, gardons-le à un. Alors passons de l'ouverture de votre compte et je vais sélectionner tous ces éléments. Alors ouvrez votre compte. Dette. Ci-dessous, nous avons des questions et nous avons un compte commun questions. Donc, semblons que la recomposition mérite d'être à 140 d'ici. Voyons voir, nous sommes à 140. J' utilise juste Shift et ma flèche du bas. Donc je vais dupliquer ça. Toucher le contrôle D. Positionnez-le ici. Contrôle D, encore une fois. Positionnez celui-ci en bas, celui-ci au centre. Et voyons, le centre 1 va être des questions bancaires courantes comme ça. Et enfin, nous avons celui-ci qui va être des outils utiles comme ça. Maintenant, laissez-moi sauter à l'intérieur et sélectionner mes autres icônes. Et je vais les copier et les coller ici à partir de nos documents originaux. Donc, vous pouvez voir, je viens de l'avant et les a nommés outils utiles, icône et icône de questions bancaires. Donc, si nous sautons ici, je peux faire un clic droit et faire local ME Klocal, et c'est à peu près tout. Maintenant, l'audit qui me reste à faire est de les ramener à l'intérieur. Donc, ici, nous avons des questions bancaires que je vais juste utiliser dans celle-ci et simplement la positionner à 40. Et à gauche, je vais aller de l'avant et supprimer celui-ci. Et nous allons faire la même chose pour les outils utiles. Faites glisser et déposez-le à l'intérieur de la position du manteau ici à 40. Assurez-vous qu'il est aligné à gauche et supprimez celui-ci. Et troupeau laitier. Maintenant, il ne me reste plus qu'à copier et coller mes textes pour ne pas vous ennuyer avec ces détails, je vais mettre la vidéo en pause ici. Et maintenant que j'ai fait ça, je peux revenir en arrière et m'expliquer un peu plus. Donc, pour le moment, nous sommes juste en train de concevoir ces pages allaient réellement apporter toutes ces pages de tableau de bord supplémentaires. Et nous allons l'appeler ainsi pour l'instant. Et vous pouvez également voir dans l'architecture du site, ces plages exactes que nous allons concevoir. Toutes ces pages supplémentaires sont des pages secondaires de notre client, ce qui signifie qu'elles sont importantes, mais elles ne sont pas aussi importantes que les pages que nous concevons actuellement. Et vous allez le voir tout au long de votre design. Donc, votre travail en tant que concepteur est de voir, par exemple, si vous faites une refonte d'un site Web comme nous le faisons avec cet exemple, votre travail en tant que concepteur est de donner à votre client la solution qu'il vous demande. Donc votre travail est de résoudre les problèmes qu'ils ont. Découvrez qui est le client cible dans la façon dont vous pouvez adapter votre conception, conception existante et votre conception que vous allez concevoir en fonction de leurs besoins. Mais votre travail est aussi de voir toutes ces pages supplémentaires et de leur demander, avez-vous besoin de les remanier aussi ? Parce que tout cela varie. Par exemple, avec votre budget et le temps que vous allez consacrer à ce projet et ainsi de suite. Si en réalité nous allons faire ce site pour de vrai et nous allons redessiner toutes ces pages. Ça va nous prendre environ quatre mois pour le faire. Donc, vous pouvez juste imaginer à quel point cette tâche est énorme. Mais avec certaines pages comme Ubuntu maps par exemple, comme avec des pages à propos et ainsi de suite. Tout ce que vous faites est simplement d'utiliser quelque chose que quelqu'un d'autre a déjà créé. Ainsi, par exemple, avec les cartes, la majorité des entreprises utilisent Google Maps ou simplement les intègrent dans votre conception. Et les développeurs vont juste utiliser le SDK ou une sorte de connexion froide. Ainsi, ils peuvent intégrer cela dans le site Web. Même chose avec les forums. S' ils utilisent les forums clients, alors très bien. Mais la majorité des entreprises, en particulier les petites entreprises, utilisent quelque chose comme un plug-in de forum ou des formulaires externes ou des formulaires Google et ainsi de suite. Donc, vous n'avez pas à concevoir ces pages maintenant pour ces pages, vous pouvez clairement voir que ce ne sont que des pages FAQ. Donc fondamentalement des questions et des réponses sous forme de texte. Donc, vous pouvez simplement concevoir une seule page, qui va juste répéter encore et encore, mais avec des informations différentes, qui est le travail du développeur pour entrer toutes ces informations dans. Mais par exemple, ici avec des outils utiles, vous pouvez voir qu'ils ont calculatrice d'argent en ligne universelle. qui signifie essentiellement que si vous, par exemple, voulez convertir des euros en dollars américains ou quoi que ce soit, alors vous devez aller à cette page de calculatrice d'argent, qu'ils ont déjà. Donc, vous ne remaniez pas la dette. Les taux de change actuels en ligne sont, par exemple, vous n'allez pas repenser cela non plus parce qu'ils mettent à jour la dette tous les jours. Ils l'ont déjà. Et il n'a pas vraiment besoin d'être synchronisé avec d'autres conceptions de la page. Outil de calculatrice longue mensuelle est l'outil qu'ils ont déjà. Donc, vous n'avez pas besoin de redessiner cette page non plus. Vous devez garder toutes ces choses à l'esprit. Tu dois tout faire toi-même ? Ont-ils déjà quelque chose conçu ? Avez-vous à préparer quelque chose, et ainsi de suite. Et de toutes ces choses vient le budget et vient le moment de ce projet particulier. Donc, allons maintenant de l'avant et regrouper tous ces éléments parce que je ne vais pas investir trop de temps parce que c'est déjà fini. Et on peut appeler ça des questions communes. Et je vais juste vous montrer rapidement un conseil que vous pouvez faire, surtout pour le design réactif. Donc, ici, vous pouvez voir que nous avons 12 colonnes différentes, mais vous pouvez juste imaginer et la dette. Lorsqu' un site Web est en marche et réactif, il diminue en taille. Donc, cet aéroport est de plus en plus petit comme le disque par exemple. Et la chose que vous pouvez faire dans Adobe XD est d'utiliser des piles. Et voici comment fonctionnent les piles. Donc, il est automatiquement en effet decks et que votre pile est comme ça, si horizontale. Et vous pouvez également créer une pile verticale, qui est une fonction fantastique à avoir dans Adobe XD lorsque vous faites un design réactif. Disons donc que je veux les positionner non pas comme ça, mais un sur l'autre. Vous pouvez simplement cliquer ici et il va les repositionner, mais l'ordre n'est pas corrigé moment. Donc, tout ce que vous avez vraiment à faire est simplement une réorganiser certains d'entre eux. Et je peux ajouter une position comme celle-ci. Et maintenant, si je réduit la taille de mon art né, vous pouvez voir qu'il va vraiment bien. Il garde tout l'espacement dans lequel nous avons créé à l'origine, donc tout est beau et propre. Donc, ce sont les piles, et je vais vous montrer comment vous pouvez jouer avec eux beaucoup plus tard dans le processus de conception. Pour l'instant, terminons ce design et donnons-le 100 ici. Comme ça. Et vérifier rapidement, fait-on son un ou 150. Donc, je vais sélectionner ces deux coups 1-2-3-4-5 pour l'augmenter à 150. Et je vais clore ça par ici. Alors nous allons zoomer un peu plus près comme ça. Je vais le fermer. Il contrôlerait 0, et c'est tout. Maintenant que nous avons notre page, au lieu de copier celle-ci à l'avenir, nous allons simplement copier celle-ci et simplement l'ajouter en dette pour une utilisation ultérieure. Donc c'est tout pour cette vidéo. Je te verrai dans le prochain quand on commencera avec la plage des poumons. Alors je te verrai là-bas. 31. Wireframes dans Adobe Xd 4: Continuons maintenant là où nous nous sommes arrêtés dans une vidéo précédente. Et dupliquons celui-ci. Et cette page suivante sera pour les prêts. Donc, double-cliquez ici. Les poumons comme ça. Donc, si vous vous souvenez d'Adobe wireframe, vous pouvez voir que j'ai besoin le long de deux. Et maintenant, on a ce texte et on obtient un prêt en argent dans 30 minutes. Alors changeons rapidement les décès ou j'ai besoin d'un prêt pour et vous pouvez simplement sélectionner le prêt dont vous avez réellement besoin. Donc nous obtenons un rapide Elle et je vais aussi le renommer ici. Dans cette seconde, on va être appelé par une voiture, acheter une maison. Et refinancer ma profondeur. Comme ça. Donc une fois de plus. Et ça va être acheter une voiture, acheter une maison. Et puis vous avez financé par la dette. Comme ça. Maintenant, enfin, je vais aller de l'avant et fermer tout ça comme ça. Et maintenant ce que je dois faire, c'est travailler sur cette image. Parce que si vous voyez ici, je l'ai dessiné avec un espace entre ce bord gauche et l'image elle-même. Mais je suis en fait décidé, et c'est là que ça, ces filaires sont utiles parce que vous pouvez toujours aller de l'avant et les changer. Je suis en fait décidé d'étendre mon image jusqu'ici et autour de ces deux coins. Donc en haut à gauche et en bas à droite. Avant de faire quoi que ce soit, laisse-moi aller de l'avant et étendre mes aéroports vers le bas. Et je vais bouger ces trois comme ça. Donc ils ne sont pas dans mon poids comme je conçois. Je vais en fait dupliquer cette information comme ça. Alors appuyez sur le contrôle D et déplacez-les à l'extérieur. Comme ça. Il y aura effectivement un séparé et a grandi. Donc je vais appeler cela que j'ai besoin seul ou ouais, appelons-le j'ai besoin seul ou tout simplement des prêts parce que nous avons différents types de prêts évidemment. Et ce texte ici, cachons vite ça pour que je puisse déplacer ça. Ce texte va être appelé obtenir un argent seul ou obtenir une réponse. Et ajoutons ça à la dette maintenant. Je vais donc copier ce texte pour rendre ma vie un peu plus difficile. Je vais copier ce texte et je sauterai ici. Assurez-vous que cela est centré. R va ouvrir avertir cela, assurez-vous qu'il est centré, le bouton est centré comme ceci, et au lieu de 40, je vais l'augmenter à 80 comme ceci. Et je m'assure aussi que j'ai deux lignes de texte ici au lieu de quatre, comme ceci. Et maintenant, les filles sont entendues. Voir par la poussière ou envelopper le texte autour. Et voyons 41234. Nous sommes donc maintenant à 80 ans. Et je vais appeler ça et obtenir une réponse dans 20 minutes. Et je vais en fait sauter le site et changer ce texte. Donc, je vais baser le texte dont j'ai créé le mélange à l'origine. C' est au centre. Donc, fondamentalement, nos opérateurs travaillent 24 heures sur 24 pour fournir des réponses Antonio minutes ou moins. Cliquez sur l'appliquer maintenant pour voir Forget, s'entendre aujourd'hui et cela va écrire appliquer maintenant, mais pas pour l'instant. On va juste garder les choses agréables et simples. Donc, ce sera une réponse obtenir comme ça. Je vais le sortir légèrement de la taille parce que je vais maintenant bouger et travailler sur mon image. Donc, une fois de plus, cela va être la section Info et la désinfection va changer en fonction de celui de ces prêts sur lequel l'utilisateur clique réellement. Donc, pour l'image, commençons par 930, avec 950. Comme je l'ai dit, je vais le déplacer vers le bord gauche, et ce sera 02020. Donc ça va être autour et ça va être arrondi. Maintenant pour celui-ci, je vais vraiment sauter ici et utiliser 24 boulon. Voyons voir, positionnez-le à 40. Et je vais laisser deux lignes de texte ici, comme ça. Et je vais cliquer ici pour le couper à cette ligne. Donc, deux, je vais supprimer ce texte et je vais en fait coller dans certaines icônes que j'ai utilisées à l'origine dans le design original. Alors laissez-moi aller de l'avant et sélectionnez ces icônes ici. Et ces icônes sont fondamentalement la même chose que toutes ces autres icônes. Je vais vous montrer comment j'ai fait ça d'abord, argent en 30 minutes. Parce qu'une fois de plus, l'utilisateur a sélectionné GET un cash rapide. Donc, évidemment, ils ont besoin de l'obtenir rapidement. Prenez les minutes internes, positionnez ça ici et assurez-vous qu'il est à 40 et laissez-moi voir, et ils sont en dehors du dossier. C' est pourquoi vous ne pouvez pas aligner mal. Essayons encore une fois. Je fais ça et 234. Et je vais encore une fois sauter ici, clic droit peut Klocal, moi Klocal et faire sauter local en arrière. Donc je vais aligner ces trois cellules de lac sont chronomètre. Ensuite, je suis aligné et celui-ci. Déplacez celui-ci hors du chemin. Alors, alignez ceci ici, assurez-vous qu'il est à 40. Et je vais ensuite sauter à l'intérieur, dupliquer ces deux-là, terminer les positionner dehors d'ici. Et assurez-vous qu'ils ont 40 comme ça. Et cela va être une documentation minimale comme ça. Et enfin, positionné cela à 40 aussi bien, assurez-vous d'un duplicate ceux-ci lui positionné vers le bas et simplement les pousser vers le bas. Cela va écrire complètement en ligne. Et plus tard dans les étapes de conception, nous allons utiliser quelques icônes supplémentaires ici. Lorsque les utilisateurs cliquent entre ceux-ci, car lorsqu'ils cliquent sur biochar, il va apparaître comme une icône de voiture et ainsi de suite et ainsi de suite. Mais comme il l'a dit, pour l' instant, laissons-les tels qu'ils sont. Alors regroupons ces complètement en ligne. Ce sera une documentation minimale. Et enfin, disque dans B cash dans 20 minutes. Enfin, je vais sélectionner les trois et m'assurer qu' ils sont au centre de notre image comme ceci. Et c'est tout pour nos pelouses. Une autre chose que je peux faire est en fait d'apporter cette réponse getter à l'intérieur de nos informations. Donc, je vais ouvrir les poumons, ouvrir les infos, ouvrir obtenir une réponse et le déposer en position. Tout cela sur le dessus parce que cette réponse getter sera en fait dans toutes nos sections. Donc, chaque fois qu'un utilisateur clique sur l'une de ces profondeurs va, désolé, de ces prêts va montrer cela, mais juste un peu d'informations différentes pour chacun d'eux. Je vais aussi vous le montrer à l'intérieur de notre partie design. Donc nous sommes à 150. Qu' est-ce qui va le fermer ? Parce que de toute évidence, disons que l'utilisateur veut acheter une maison. Ils ne peuvent pas obtenir une réponse en 20 minutes parce que, de toute évidence documentation est beaucoup plus importante que pour obtenir rapidement de l'argent comptant, ou surtout s'ils veulent refinancer leur dette. Bankteller doit évidemment rechercher toutes ces informations afin de leur fournir la réponse qu'ils voulaient. C' est pourquoi ils doivent attendre un peu plus longtemps et ils doivent fournir une documentation supplémentaire. Alors finissons maintenant cette page. Sélectionnez l'aération, positionnez-le ici, s' assure que nous sommes à 150, comme ce double-clic ici. Et on va fermer notre page. En bas, comme ça. Il avait le contrôle 0 et c'est fondamentalement tout pour cette page est que vous pouvez voir qu'il est beaucoup plus facile maintenant de travailler avec tous ces éléments, surtout parce que nous avons tous ces éléments en haut déjà terminé. Nous avons tous ces éléments en bas déjà terminé. Donc, fondamentalement, nous sommes juste éditer la partie dissenter de nos pages. Donc c'est fondamentalement tout pour celui-là. Dans la prochaine, nous allons concevoir la section des cartes. Alors je te verrai là-bas. 32. Wireframes dans Adobe Xd 5: Eh bien, il est maintenant plus vent et concevoir notre écran actuel et une page de panier. Donc je vais frapper le contrôle D pour lubrifier celui-ci et appeler ça des cartes comme ça. Et une fois de plus, faisons vite la classe à notre filaire. Vous pouvez voir que cette section est essentiellement un cercle intérieur de carte avec le titre et trois lignes de texte. Ci-dessous, nous avons des cartes de crédit. Donc, avec deux cartes, il se répète lui-même ou les cartes de débit créer votre propre est fondamentalement dans cette section copiée ici. Et enfin, nous avons une section qui est assez similaire, donc nous pouvons réellement utiliser celle de la page d'accueil elle-même. Donc la première chose que je vais faire est d'étendre ma planche parce qu'elle va être beaucoup plus grande, va prendre beaucoup plus de place que toutes ces autres. Je vais également déplacer ces sections vers le bas. Donc, sélectionnez tout leur maintien Maj, déplacez-les vers le bas. Et ce que je voudrais faire maintenant est en fait utiliser cette section peut-être. Pour que je puisse le déplacer dehors et obtenir une réponse. Je peux le déplacer jusqu'ici. Et voyons voir. Je peux le positionner ici de façon alignée avec ce texte, je vais cacher les poumons. Et nous n'avons pas besoin d'un bouton ici, mais nous en aurons besoin plus tard. Donc je vais le cacher et peut-être même le positionner pour ne pas le confondre. Ou voyons, nous avons besoin du bouton mort tout le long. Alors peut-être que c'est le cas, et c'est ce que nous ferons en fait. Donc, positionnez-le tout le long et laissez-le là pour l'instant. Maintenant, ici, je vais écrire dans votre Parfait idéalement campanien. Et en fait sauter à l'intérieur, copiez et collez le texte de mon design original. Donc, vous pouvez voir à quoi ça ressemble. Et je vais sauter de l'avant, dégrouper ce texte et juste pour l'instant, déplacer tout cela vers le bas. Et pour la longue section, je vais effectivement aller de l'avant et supprimer l'édition. Donc si je vous ramène ici, vous pouvez voir qu'on a un cercle et qu'on a un courant à l'intérieur de ce cercle. Nous ne concevons pas de carte pour l'instant. Si barbarie positionnez ça comme ça. Et voyons, peut-être que je peux même lui donner un peu plus d'espacement. Laissons-le tel qu'il est. Tout d'abord, je vais créer un cercle. Je tiens ma touche Maj pendant que je le fais, et j'utilise simplement cet outil ellipse pour créer mon cercle. Six soixante, six soixante seront des dimensions. Et je vais le placer au centre et m'assurer qu'il est à 100 de nos textes comme ça. Ensuite, je l'appellerai un cercle ou un GRAND cercle. Parce que ça va être dans le fond de notre carte. Pour ce cercle, nous allons appliquer à cette analyse de couleur de scène pour supprimer la bordure. Et maintenant, quand je crée ma carte, je vais réellement utiliser dans cette couleur. Pour indiquer que c'est notre courant. Commençons donc avec nos cartes réduit notre position actuelle et juste à l'intérieur de notre cercle. Et voyons pour la carte elle-même, nous pouvons utiliser quelque chose comme 776, semaine cinq, ou neuf, ou 510 comme vous le souhaitez. Et j'espère que la position sera au centre de notre cercle comme ça et comme ça, je peux aussi les sélectionner les deux, cliquer ici qu'ici, assurez-vous qu'ils sont dans un cercle parfait. Maintenant, pour la carte elle-même, comme il l'a dit, nous allons laisser comme et la dette. Et nous allons le faire vider à 15, par exemple, tous les côtés, juste pour indiquer que c'est notre panier. Allons maintenant et sélectionnons tout cela. Il avait le contrôle g appelé ce compagnon parfait et de secours parce que c'est ce qu'il est juste ici. Suivant pour la carte. Si je vous ramène une fois de plus, nous pouvons voir que nous avons dans cette section entière puis un texte actuel et le titre trois lignes de texte et appliqué maintenant, sorte que nous pouvons effectivement utiliser ce que nous avons déjà créé pour lui ici. Donc je peux frapper le contrôle C et ensuite je peux sauter ici. Il avait le contrôle V positionné juste ici et déplacer ça vers le bas. Maintenant, ce dont j'ai vraiment besoin, c'est ce texte et donc le titre et le sous-titre. Alors appuyez sur le contrôle C, le contrôle V. Et voyons, peut-être que je peux le positionner pour être à 100 cette fois au lieu de 150. Comme maintenant. Et on va appeler ça des cartes de crédit comme ça. Et en fait une fois de plus, je vais copier et coller mon texte original et je vais le déplacer juste ici. Maintenant, la prochaine chose que je vais faire est de déplacer ça pour être à 80 ans. Donc 12345678. Et maintenant, allons de l'avant et créons notre carte de contenu. Donc, pour notre fiche de contenu, ce que nous allons faire, ça va être assez similaire à celle-ci en fait. Donc, ouais, allons en fait utiliser celui-là. Parce que si je te ramène à la place de l'icône, où y a-t-il ? Ils sont là. Au lieu de l'icône, nous allons avoir cette carte, illustration ou un graphique ou levier. Donc je vais supprimer celui-ci basé sur celui-ci. Et une fois de plus, assurez-vous que nous sommes à 80 ans. Donc 1234. Positionnez-le ici. Et voyons, parce que nous avons notre ligne de grille de 12, nous pouvons réellement étendre ce fond à six en poids. Donc comme ça, alors maintenant nous avons beaucoup plus d'espace pour jouer. Donc ce premier, je vais appeler ça un Visa. Des cartes de crédit comme ça. Et voyons voir, peut-être que je peux prolonger ça. Donc, pour tirer, je peux avoir deux lignes de texte. Je peux le recadrer comme ça. Au lieu d'outil, nous pouvons avoir trois lignes de texte que je vais coller dans mes textes originaux. Et voyons voir. On peut être à 60 ans d'ici. Alors passons ça un peu vers le bas. Donc, juste pour que nous puissions avoir un peu plus d'espace pour jouer avec elle. On peut positionner ça à 40, donc comme ça. Et maintenant, nous allons sauter à l'intérieur et créer notre panier. Donc, nous n'allons pas vraiment concevoir tout le graphique. Maintenant. Je vais utiliser ce fond de voiture. Tu contrôlerais un D. et je vais appeler ce BG actuel comme ça. Et pour ses dimensions, utilisons 300 largeur un 97 par exemple. Donc quelque chose de gentil et petit. Et on va utiliser cette couleur plus foncée. Et voyons, peut-être qu'on peut le laisser là. Je ne suis pas sûr de voir. Donc 1234. Et alignons l'édition ici. Alors voyons. Pour ce contenu, peut-être que je peux le laisser comme ça. J' essaie juste de tout comprendre, à quoi tout va ressembler. Donc, cela peut être avec 40, cela peut être à 60. Voyons voir, ça peut être à 40 ans. Et enfin, cela peut être à 40 ans aussi. Je pense que ça marche bien pour l'instant. Je vais juste augmenter la hauteur de ce fond de marche pour que je puisse avoir un peu plus d'espace de cinq 46 à 567, comme ça. Juste pour que ça me donne un peu plus d'espace. Je vais l'aligner avec le bord supérieur de ma carte, appuyez sur Shift 1234. Et maintenant, voyons ce que cela nous donne. Donc on est à 40 ans, on est à 40 ans, on est à 40 ans, on est à 60 ans et on est à 20 ans juste ici. Voyons voir, peut-être qu'on peut bouger ça. Voyons ce que je peux faire parce que j'ai besoin d'un peu plus d'espace et vers le bas, je peux vraiment faire baisser le disque juste un peu. Voyons donc 234. Donc comme ça. Et nous l'avons là. Nous avons notre carte de contenu. On va jouer avec ça, évidemment un peu plus tard. Donc on va appeler cette morale actuelle. Voir, ouais, infos actuelles. Je pense que ça marche bien. Et voyons voir. Maintenant, ce qu'on peut faire. On peut déplacer ça pour être un DT, donc 12345678 comme ça. Et je peux garder le contrôle et D pour le dupliquer, le positionner ici. Et ça va être des cartes de crédit MasterCard comme ça. Et je vais en fait copier et coller mes informations ici aussi bien comme ça. Donc, au lieu des cartes de crédit Visa personnelles, nous avons des cartes de crédit MasterCard personnelles. Je vais déplacer cette information vers le bas. Je vais regrouper tout ça, appeler ça des cartes de crédit, comme ça. Et enfin, je vais avoir exactement la même section, mais appelée cartes de débit. Alors appuyez sur le contrôle D sur toute cette section, positionnez-le vers le bas. Je vais appeler cette carte de débit évidemment. Comme ça, je vais appeler cette carte de débit, comme ça. Et je vais en fait copier et coller le texte d'ici comme ça. Donc résultat cartes de débit au lieu de cartes de crédit Rostow, gardien pour les informations de carte. Donc ce sera la même chose. Au lieu de cartes grises, on va lui donner un nom de cartes de débit. Je vais sélectionner ce texte, le copier, et sélectionner le mot crédit, remplacer par un débit. Et enfin, je vais prendre mon texte d'ici et faire la même chose pour cela et je l'ai collé. Fondamentalement, c'est exactement le même texte que le client a envoyé. Et je viens de remplacer les cartes de crédit, cartes de débit, et c'est tout ce que j'ai fait là-bas. Maintenant que cette section est terminée, nous avons de grands gardes, nous avons des cartes de débit. Repositionnons rapidement. Donc on va l'avoir à 100 comme ça. Et je vais effectivement dupliquer cette section. Alors frappez le contrôle C ou un Dee contrôlé pressé, voulez le dupliquer, positionnez-le vers le bas des annélides. La position de l'ICANN est d'être à nouveau à 100, comme ceci. Donc, je vais l'appeler créer le vôtre. Parce que cette section, si je vous ramène ici, vous pouvez voir créer votre propre. Nous avons la carte et nous avons créé vos diapositives va décrire comment vous pouvez créer votre propre carte, puis bouton qui dit créer la vôtre. Et c'est pourquoi nous avons collé ce bouton ici. Donc nous allons l'amener à l'intérieur de cette section. Et voyons, je peux peut-être le positionner comme une centaine, comme ça, 100. Et c'est fondamentalement tout. Maintenant, pour cette section, je vais simplement copier et coller le texte dans. Voyons voir, on peut lui donner 100 avec toutes ces formes comme ça. Et comme vous pouvez le voir ici, vous pouvez créer une carte personnalisée et y ajouter votre touche personnelle, choisir parmi des couleurs, des formes et même des images. Donc, ce sont essentiellement tous les éléments que les utilisateurs peuvent créer et s'adapter. Créez leur propre. Et va changer le nom pour créer le vôtre comme ça. Et je vais le déplacer juste en dessous de mes cartes de débit. Donc, nous sommes des cartes grises, cartes de débit et de créer votre propre et sur le dessus parfait comparaison quotidienne. Enfin, nous avons besoin de cette section ici avec l'image. Quand il est ici est l'image gauche du sol et il va être cartes-cadeaux. Alors trouvons cette section ici, c'est Control-C, Control-V juste ici. Voyons maintenant cette section. Nous pouvons, par exemple, positionner à 150. Voyons donc comme ça et positionnons-le simplement vers la gauche. Maintenant, on va lui donner un nom de cartes-cadeaux. Et on va le garder comme ça pour le moment. Donc nom du service, nous allons l'appeler une carte-cadeau parce que nous savons ce qu'il est juste au-dessus des questions courantes. Et enfin, toutes ces sections, nous allons les sélectionner et les déplacer à 150, comme ça. Enfin, je vais terminer notre port ici et le fermer ici et voir si c'est correct. Autrement dit, vous contrôlerez S ou Command S sur le Mac pour enregistrer. Et c'est fondamentalement tout. Pour cette page, vous pouvez voir à quel point c'est simple et comment certains de ces éléments se répètent. Je n'utilise délibérément pas ces éléments personnalisés et ces composants et ainsi de suite ici à l'intérieur de nos filaires, parce que cette étape filaire est toujours à propos d'idées lorsque le client confirme vos idées. Et je vais vous montrer plus tard comment vous pouvez partager ces images filaires avec votre client. Mais d'abord, passons rapidement à travers toutes ces pages. Je vais montrer comment on peut les concevoir tous. Et puis je vais montrer comment vous pouvez les partager avec vos clients pour obtenir des commentaires. Vous pouvez également les exporter sous forme d'images, l'envoyer comme ça. Mais pourquoi ferais-tu cela alors que tu as cette excellente option de les partager comme un lien. Ainsi, le client peut réellement laisser vos commentaires appropriés à partir de bas. Vous pouvez appliquer cette rétroaction à la conception. Ensuite, vous pouvez commencer par créer ces composants. Tout cela est juste des idées. C' était juste pour vous montrer comment toutes ces idées peuvent être transférées et deux morceaux de papier. Ensuite, à partir d'ici, vous créez quelque chose d'un peu plus réaliste. Vous utilisez déjà certains de ces éléments qui sont fondamentalement prédéterminés et, et ils arrivent fondamentalement comme ceci. Ainsi, nous pouvons simplement passer à autre chose avec le design, surtout ici avec la section navigation et héros et ainsi de suite. Donc fondamentalement c'est, c'est tout. Vous pouvez maintenant partager ces trames filaires. Lorsque vous avez des commentaires de votre client, vous pouvez y revenir et ensuite vous pouvez commencer à travailler sur un design fini. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 33. Wireframes dans Adobe Xd 6: Continuons maintenant avec la page d'investissement. Et si nous zoomons un peu plus près, vous pouvez voir que investir est fondamentalement similaire à toutes ces autres pages. Il a juste ce modèle ici. Donc, nous avons imaginé le texte du titre et le bouton d'appel à l'action ici. Et nous en avons deux, ce qui signifie qu'ils sont six dans l'esprit. Donc, au lieu de copier celui-ci, nous allons sauter à l'intérieur n, Par exemple, copié celui-ci. Donc je vais frapper le contrôle D est prêt à positionner deux ici. Et on appellera ça investir. Comme ça. Je vais tous aussi sauter à l'intérieur, étendre ce bas, déplacer tout cet infini vers le bas juste pour que nous ayons un peu plus d'espace pour jouer avec. Donc, au lieu d'ouvrir votre compte, je l'appellerai dans lequel je veux investir. Et maintenant, je devrais aller de l'avant et copier une autre page, mais ça a de l'importance. Je vais effectivement utiliser cette information que j'ai déjà. Donc je vais simplement déplacer ça vers le bas, appuyer sur le contrôle D, parce que j'ai besoin d'un texte juste ici. Et je vais positionner ce texte. Voyons peut-être 100 de la page vers le haut. Voyons donc 12345678910 comme ça. Et je vais alors le positionner comme des autres. Donc 100 largeur que nous allons voir. Ouais, je pense que ça marche bien. Et allons de l'avant et renommons tout ça. L' éducation est donc notre première. Et nous allons le renommer ici aussi. Et puis le second est l'immobilier. Une fois de plus, les utilisateurs peuvent choisir ce dans quoi ils veulent investir. Et selon ce que la clique, cette information va changer évidemment pour correspondre à leur choix. Sécurité de la famille. Vient ensuite. J' ai accidentellement cliqué vers le bas et celui-ci va bien. Donc la sécurité de la famille. Et le dernier ici, c'est une retraite. Ceci et c'est fondamentalement ça. Donc, s'ils ont choisi ce premier, il va écrire dans un avenir plus brillant comme celui-ci. Et nous allons en fait le déplacer vers le bas dans le dossier info en haut. Alors ce que nous allons faire est en fait de créer ces deux sections. Donc, je vais en fait déplacer ça jusqu'ici. Et je vais en fait voir si 246, nous sommes déjà à la bonne largeur juste pour la hauteur de nos images. Alors positionnons-les pour être à 500. Et ce texte est beaucoup trop grand. Il n'a pas besoin d'être aussi grand. Voyons voir, on peut jouer avec 24. Alors allez ici, 24 gras. C' est 24, irrégulier. Et nous allons l'étendre pour qu'il corresponde à ici. Et voyons, nous pouvons avoir trois lignes de texte comme celui-ci et le recadrer à la hauteur. Et enfin, nous pouvons positionner le bouton pour être non pas 40 mais 60. Allons d'abord apporter semble être à 40 et cela peut être à 60, comme ça. Enfin, le texte lui-même peut être à, disons 60. Et juste pour que nous puissions nous-mêmes un peu plus d'espace. Alors voyons quelque chose comme ça. Et je pense que ça marche bien. Maintenant, je vais sauter à l'intérieur et effectivement copier et coller mon texte original. J' ai inclus à l'intérieur de notre, de mon design. Et cela va écrire en savoir plus, donc c'est bien. Suivant en haut. Donc, je vais effectivement regrouper ces HD contrôlé g et appeler ce nouveau fonds d'éducation bancaire parce que c'est ce qu'il est ici. Et une dernière chose que je veux faire est de voir. Je peux en avoir 20 dans tous les coins comme ça. J' ai eu un, juste un peu de différenciation entre toutes mes images dans notre design. Donc celui-ci va s'appeler Ute pour une police future plus brillante. Et je vais faire la même chose. Donc, je vais en fait copier et coller du texte à partir de mon design original. Et c'est essentiellement l'information que vous allez recevoir de votre client, surtout s'il a tous les services. Ainsi, vous pouvez réellement jouer avec eux et les repositionner comme vous le souhaitez. Maintenant, cela va s'appeler, je veux investir dans ou même de meilleurs investissements. Parce que nous allons avoir tous ces investissements différents. Maintenant, entre les deux, si je zoom un peu plus près, vous pouvez voir que nous avons cette section avec l'image va tout le chemin vers la gauche, sécuriser l'avenir et en savoir plus bouton. Nous avons cette image, c'est celle-là. Donc contrôle C, contrôle V, médecin adhère. Et juste au-dessus des questions courantes, nous allons voir sécuriser votre avenir. Et on va appeler cette section comme ça. Et une dernière chose est de positionner et de vendre sa position à 150. Comme ça. Et enfin, sélectionnons-les simplement, positionnons-les pour être à 150 aussi. Double-cliquez ici et réorganisez notre, notre hauteur de planche. Il suffit de le recadrer comme ça, et c'est fondamentalement tout. C' est notre plage terminée. Maintenant, si votre client vous demande pourquoi certaines de ces images sont un peu plus sombres que ces autres. Dites-leur simplement que ce sont les images. Vous vouliez juste mettre l'accent sur des parties spécifiques de votre design. Par exemple, nous avons défausse avec une carte de crédit à l'intérieur. Donc, vous vouliez mettre l'accent sur la voiture de dette par exemple. Et tu ne veux pas qu'ils se fatiguent trop. Ils ont juste besoin de comprendre que ce sont les images et c'est fondamentalement tout pour que nous puissions continuer avec ce design. Il nous reste donc juste une page à concevoir pour notre site Web avant de passer à la connexion et à l'inscription des écrans. Alors je te verrai dans la prochaine. 34. Wireframes dans Adobe Xd 7: Donc, la page suivante et la dernière pour notre site Web est le numérique. Et si nous zoomons un peu plus près, vous pouvez voir que fondamentalement désintox une section qui se répète tout le chemin vers le bas. Nous avons donc déjà cette section. Nous allons juste l'utiliser pour ces services. Nous allons juste remplacer rapidement certains de ces titres. Et c'est fondamentalement tout. On peut appeler ça un jour. Donc nous pouvons utiliser n'importe lequel de ces éléments. Je peux utiliser celui-ci sélectionné contrôle D, dupliquer. Et je vais appeler ça numérique, comme ça. Et enfin, je vais simplement déplacer ceci, supprimer ceci, et voici notre section ici. Donc, ce que nous pouvons faire avec c'est que nous pouvons réellement le positionner comme ça. Et je peux peut-être bouger à 100, comme ça. Et laissez-moi vérifier rapidement. Donc, je peux faire ce B 600, par exemple, juste pour le différencier un peu. Et puis je peux les sélectionner et les déplacer au centre. Assurez-vous qu'il est à 100. Il l'est. Et le premier est, vous pouvez voir, laissez-moi défiler vers le haut. Nous avons E bancaire et bancaire, QR codes, paie et assistant virtuel. Alors faisons ça. Mais avant, je vais vous montrer des piles une fois de plus. Donc ils vont être très utiles ici. Sélectionnez simplement votre pile. C' est fondamentalement ça. Tu l'as fait. Maintenant, je vais changer ça pour des services bancaires comme ça. Et je vais avoir 150 espacements entre tout ça. Donc, vous pouvez appeler cela en quatre ou texte ou à peine vouloir. Parce que les piles créent ces dossiers supplémentaires, vous pouvez simplement le renommer ou le laisser tel quel. Donc je vais le renommer ici. Donc E, les services bancaires ont touché le contrôle D, positionnez-le 150 comme ça. Et je vais le positionner ici. Et je vais appeler ça une banque. Donc l'un est E, l'autre est m. Je perds. Et vous êtes en audit que vous devez faire avec vos piles est simplement de sélectionner votre image et de la positionner pour décider. Et enfin, déplacez ceci pour aligner notre écriture. Genre. Alors. C'est fondamentalement ça. Vous pouvez simplement les changer. Alors, position no, 1-2-3-4-5. Fondamentalement, la seule chose qu'on a fait avec celui-ci, c'est qu'on a changé de place entre eux. Et encore une fois, cela va venir un très utile une fois que vous arrivez à la conception réactive, parce que vous pouvez simplement cliquer ici va le positionner vers le bas, et c'est fondamentalement tout pour votre conception. Laisse-moi vérifier mes marges. Encore une fois, tout a l'air bien. Donc E M Banking et moi allons faire un duplicata de ces deux-là. Alors appuyez sur le contrôle D et positionnez-les en bas de 100. Donc 150 comme ça. Et en fait, je vais étendre mon aéroport encore plus. Donc ceux-ci les positionnent juste pour me donner un peu plus d'espace. Et voyons, nous pouvons positionner ça à 150 et nous pouvons le fermer ici très rapidement. Ainsi, vous pouvez voir dès que vous commencez à concevoir, dès que vous avez quelques éléments, dès que les éléments se répètent, il est beaucoup plus facile de faire tous ces changements et d'adapter leur mental, les appliquer à votre design. Donc, ce sera des paiements de code QR comme ça. Je vais le positionner ici. Et enfin, je vais positionner ça ici, organisé ça ici. Alors passons à travers. Nous avons donc E Banking et Banking QR Copayments. Et ce dernier sera l'assistant virtuel. Changons le nom ici aussi. Et une chose soignée à propos des piles. Si j'ouvre celui-ci, vous pouvez voir le texte parce qu'il est sous vécu vient au sommet. Et ici, parce que le texte est sur la droite, il vient à l'origine en bas. Adobe XD les a donc déjà organisés d'une manière agréable et propre parce que nous avons organisé le montage ici. C' est ça pour notre Pékin. Appuyez simplement sur le contrôle S pour l'enregistrer. Et comme ça, nous avons fini notre site web filaire. Et la seule chose qu'il nous reste à faire maintenant est de concevoir cette connexion et d'inscrire des écrans. Je vais vous montrer la différence entre eux. Et enfin, nous allons concevoir cette page de tableau de bord avant passer à la conception réelle du site Web, où nous allons réellement créer un nouveau flux. Donc, ici, nous avons un flux filaires et ensuite nous allons avoir dans le flux de conception. Donc c'est tout pour cette vidéo. Et je vous verrai dans le prochain où nous allons aborder les écrans de connexion et d'inscription. Alors je te verrai là-bas. 35. Wireframes dans Adobe Xd 8: Dans cette leçon, nous allons continuer là où nous nous sommes arrêté et nous allons créer cet écran de connexion et d'inscription. Alors commençons. Je vais faire les premières choses pour nous, dupliquer celui-ci, appelez ça un login. Et je vais en fait supprimer tout ce qui est situé à l'intérieur. Donc je peux juste avoir un vide de notre port. Et puis je vais le couper en hauteur pour essayer AT comme ça. Et maintenant, je peux commencer par mon design. Donc, tout d'abord, je vais créer mon image en utilisant mon outil rectangle. Je vais utiliser cette couleur, comme nous l'avons fait auparavant. Et pour notre image, je vais utiliser la hauteur de 1080. Donc ça va aller de haut en bas, comme ça. Et pour la largeur, utilisons 708, par exemple. Comme vous pouvez le voir, ça va nous emmener cinq colonnes d'Andy dans l'espace. Alors maintenant, nous allons utiliser ce texte et positionnons ici, faites-le aligner à gauche. Et par exemple, dites « Bienvenue ». Et comme il s'agit d'un écran de connexion, vous voulez présenter quelqu'un à cette page. Voyons voir, nous pouvons avoir un espacement d'un, donc nous avons une image, nous avons une colonne vide, et ensuite nous pouvons la ramener et dire, bienvenue. Je vais positionner ça. Je vais m'assurer qu'il est 24. Et nous pouvons simplement écrire dans un journal de retour dans votre compte comme ceci. Et voyons, nous pouvons faire que ça soit à 40 ans. Comme ça. Bien positionné ici juste pour me donner un peu plus d'espace. Et maintenant, je peux dupliquer celui-ci, le positionner vers le bas, retourner ici. Et je vais écrire ceci pour être email et le dupliquer et taper votre email. Ou utilisons votre email sur email.com juste pour que nous puissions être un peu plus précis et un peu plus précis avec celui-ci. Maintenant, créons notre champ d'entrée, et il va être six colonnes de largeur. Donnons-lui un nom, un champ d'entrée. Et comme ça. Et voyons, nous pouvons lui donner la même couleur que nous l'avons fait avec notre image. Nous pouvons le positionner et revenir derrière notre email. Et voyons, pour notre email, nous pouvons faire 24 morts régulières. Très bien. Je veux juste changer de couleur. Ne le laissons pas tel qu'il est. Alors positionnons-le au centre. Mais avant qu'on le fasse, donnons une hauteur à ça. Donc, le champ d'entrée devrait être à 70, comme ceci. Et maintenant regroupons ces deux-là, positionnons-le au centre. Voyons voir. Ça a l'air bien. Et voyons, tout d'abord, je peux donner à ça un coronaire est de dix, enlever notre frontière et ça a l'air beaucoup mieux. Et maintenant enfin, je peux le positionner à 40, donc 1234. Et maintenant cela va nous donner un peu plus d'espace. Laisse-moi cacher mes colonnes pour voir à quoi ça ressemble. Je pense que ça marche très bien. Oui. Alors organisons ça un peu. Donc, c'est notre champ email. Ou non, allons-y, aération de groupe. Contrôle g, qualité, contrôle de l'email, D, position dans les analystes vers le bas. C, je peux le positionner pour être à 40 et appeler le bas sur mot de passe. Change ça. Comme ça. Et maintenant je peux sauter à l'intérieur d'ici et simplement écrire un décalage dix, par exemple, huit fois ou quoi que ce soit. Et puis je peux changer ça pour être 48, par exemple. Et maintenant je peux revenir en arrière et regrouper ces deux-là et m'assurer que c'est au centre. Je ne sais pas pourquoi ça coupe comme ça. Voyons si on peut en parler un peu. Je peux juste avoir besoin d'organiser ça pour être au centre comme ça. Donc, évidemment, ce n'est qu'un exemple pour montrer à vos clients que ce sera en fait notre mot de passe d'une sorte ou d'une autre. Vous pouvez également utiliser des points si vous le souhaitez, mais je pense que les étoiles vont bien fonctionner. Maintenant que nous l'avons fait. Maintenant, nous pouvons organiser ces deux-là pour que je puisse m'assurer qu'ils sont à 80 ans, juste pour nous donner un peu plus d'espace entre ces deux-là. Maintenant, je peux dupliquer cette position de texte et ici, et voyons, je peux le positionner comme étant à 40, comme ça. Positionnez-le et juste un peu vers le bas. Et je vais écrire, n'ai pas de compte. Créez un ici. Et parce que ça va être un lien, je perdrai cette couleur. les gens puissent connaître RK, je peux basculer entre connexion et inscription Mississippi en cliquant juste là. Enfin, je vais dupliquer ceci une fois de plus. Alors appuyez sur le contrôle D et l'écriture du mot de passe oublié. interrogation, utilisez ce collier maintenant, assurez-vous qu'il est bien aligné et j'ai besoin d'un bouton. Donc, je vais utiliser celui-ci. Appuyez sur le contrôle C, fermez tout ça ici, contrôlez V, et je ramènerai ma grille une fois de plus, assurez-vous que c'est centré. Et voyons, nous pouvons le positionner à 80. C' est très bien. Positionnez ici et une ligne ici. Et assurez-vous que ces deux-là sont centrés. Et c'est fondamentalement tout. Nous avons maintenant tout notre contenu ancien groupe. Il suffit de cliquer ici pour vous assurer qu'il est en position centrale juste en dessous de notre image. Et encore une fois, organisez tout une fois. Donc, nous avons en savoir plus bouton va fonctionner vers le bas. Nous reviendrons email, mot de passe, mot de passe oublié. Cela va aller ici, et c'est essentiellement tout pour notre écran de connexion. Maintenant, pour que je m' inscrive, je vais simplement dupliquer est. Alors appuyez sur le contrôle D sur notre planche. Ça va être une inscription, comme ça. Et nous allons, au lieu de bienvenue retour, aller écrire bienvenue deux nouvelle banque, parce que c'est pour les utilisateurs qui visitent cette page pour la première fois. Crée un compte et commencez dès aujourd'hui. Comme ça. Maintenant, nous allons laisser ces deux-là. Nous allons écrire ici, je suis déjà membre. Connectez-vous ici. Encore une fois, c'est un lien. Donc quand ils cliqueront là, ça va les emmener ici. Quand ils cliqueront ici, il leur faudra oser suggérer de basculer entre ces deux. Et parce qu'il n'y a pas de mot à la mode, ils créent un compte dont nous n'avons pas besoin dans celui-ci. Enfin, ce dont nous avons besoin, c'est le prénom et le nom. Ils vont être le poids de trois. Alors donnons-nous un peu plus d'espace. Donc je vais positionner ça ici. Je vais positionner ce type ici. Je vais dupliquer celui-là. Assurez-vous qu'on est à 40 ans. Je vais appeler ce nom. Touchez le contrôle D une fois de plus. Ce sera prénom. Comme ça. Je vais cacher celui-là et ça va être un nom. Et ça va être une largeur de trois. Voyons donc 123. Et nous allons lui donner le nom de Jacob, par exemple. Le fait. Et enfin, renversez-la ici. Prénom, même chose. Donc nous allons lui donner trois et quand lui donner le nom de Michael. Par exemple, prénom. Et c'est fondamentalement tout. Nous avons terminé cela. Ramenons ça à 80 ans qu'il était. Et regrouperons tout ça une fois de plus. Il contrôlerait G, s'assurer qu'il est au centre comme ça. Nous avons donc exactement le même espacement qu'avant. Si vous pensez que c'est un peu trop là-haut, vous pouvez réduire l'espacement. Vous pouvez réduire l'espacement en bas ici. Mais je pense que cette mise en page fonctionne très bien. Assurez-vous que c'est centré, dégroupez-le, et c'est tout. Donc ce sont nos deux pages. Évidemment, vous pouvez basculer ces images entre elles. Vous pouvez avoir une image ici pour la connexion, une pour l'inscription, mais c'est vraiment à vous de décider. Dans ma conception, dans, dans mon cas, je vais les laisser tels qu'ils sont. C' est donc tout pour le site Web avant B, juste dans la prochaine et dernière vidéo de cette série filaire dans Adobe XD, nous allons créer cet écran de tableau de bord. Nous allons en créer un seul à l'intérieur de notre session filaire. A l'intérieur de la section design, nous allons évidemment créer toutes ces pages supplémentaires. Et je vais vous montrer quelle est la différence entre la mise en page, entre les grilles et ainsi de suite. Je te verrai dans la prochaine vidéo quand on commencera avec ça. 36. Wireframes dans Adobe Xd 9: Dans cette dernière vidéo de la section filaire d'Adobe XD, finissons par créer notre écran de tableau de bord. Si je fais un petit zoom, vous pouvez voir que la principale différence entre l'écran du tableau de bord et toutes les autres pages du site Web est la navigation dans le tableau de bord est ici sur la gauche, tandis que tout le contenu est sur la droite. Par conséquent, nous devons créer toutes ces colonnes pour que notre contenu soit sur la droite. Et cette marge devrait être plus large pour accueillir dans ce menu. Pour expliquer ce dont je parle, si nous sautons ici à l'écran d'inscription, vous pouvez voir que nos marges gauche et droite sont fondamentalement les mêmes. Et toutes nos colonnes et gouttières sont ici au centre. Pour notre tableau de bord. Nous allons déplacer tout cela vers la droite et nous allons libérer cet espace sur la gauche pour accueillir tous nos éléments de navigation. Donc, pour commencer, je vais simplement dupliquer cette page et la déplacer juste un peu. Comme ça. Alors je vais l'appeler Dashboard. Et je vais sauter à mon prototype. Cliquez ici pour créer un nouveau flux. Et j'appellerai ce tableau de bord de flux. Comme ça. Je vais revenir dans mon design et maintenant vous pouvez voir que nous avons des filaires et que nous avons un tableau de bord. Maintenant, nous pouvons appeler ce site web wireframes et site web le tableau de bord. Mais je pense que vous et le client serez en mesure de le comprendre facilement. Maintenant, je vais me donner un peu plus d'espace plus tard. Et parce que si vous voyez quand nous zoomons, nous avons tout ce tas de choses en gros. Donc, la meilleure et la plus simple chose à faire est simplement de les déplacer comme ça. Et maintenant, lorsque vous zoomez, comme vous pouvez le voir, nous avons beaucoup plus d'espace pour qu'il se reproduise. Je vais appuyer sur le contrôle S pour enregistrer mon fichier. Et je vais ensuite sauter à l'intérieur de mon tableau de bord et commencer à travailler sur mes grilles. Donc, d'abord, je vais supprimer tous ces éléments parce que nous allons revenir à ces éléments un peu plus tard. Mais avant de le faire, je veux juste créer rapidement mes colonnes et migrer pour paraître un peu différent. Donc, pour commencer, ce que je veux faire, c'est que je veux utiliser 12 colonnes, donc ce sera la même chose. Je vais utiliser 49. Et vous allez voir Adobe XD changer et agir comme un fou ici. Parce que dès que vous commencez à jouer avec ceux-ci, cela va vous donner des valeurs différentes. Alors qu'est-ce ici sur la bonne marge, je vais utiliser 20. Je vais utiliser une grande marge à gauche. Donc pour 01. Donc ça va être 12 et ça va être 49, ça va être 80, et la discipline sera 2401. Donc ce que nous avons fait ici, comme vous pouvez le voir, nous avons à droite, juste un espace de 20. Nous pouvons augmenter cela jusqu'à l'espace de 40. Si vous pensez que c'est juste un peu trop petit et trop étroit, alors qu'ici nous avons 401, donc 401 pixels pour accueillir notre navigation. Donc, si je vous ramène ici, vous pouvez voir que nous avons cet espace pour notre navigation et nous avons cet autre espace pour le contenu à l'intérieur. Alors, on va sauter ici. Et la première chose que je vais faire ici c'est que je vais aller de l'avant et créer ma navigation supérieure. Donc, pour ce faire, je vais simplement utiliser mon rectangle. Je vais aller sur toute la largeur. Donc 19-21. Positionnez-le en haut à gauche. Donc Pinot et moi aurons une couleur. Voyons voir, peut-être que je peux avoir de la couleur blanche, donc je vais la laisser là pour la hauteur. Allons-y avec 1-20, comme ça. Allons avec une petite ombre parce que je veux la séparer de ce fond. Alors allons-y avec 1020, puis 20 encore une fois. Et voyons, peut-être qu'on peut aller avec quelque chose de beaucoup plus petit que ça, donc peut-être cinq. Donc c'est beau et léger. Donc, si je clique ici pour haut mes colonnes, vous pouvez clairement voir que c'est beau et léger. Ce n'est pas intrusif de quelque façon que ce soit. Ajoutons également un flou d'arrière-plan. Alors laissez-moi rapidement cliquer ici, flou d'arrière-plan. Et pour ces valeurs, voyons, peut-être que je peux avoir quelque chose d'un peu plus petit. Donc 20. On peut aller avec 1550 pour l'obésité. Donc maintenant, fondamentalement, vous ne pouvez presque pas le voir. Mais il est toujours là et il a toujours l'air bien. Maintenant, pour notre couleur de fond de notre tableau de bord, je vais simplement revenir en arrière et cliquer ici. Donc maintenant, vous pouvez voir dans la dette, la couleur, couleur de fond du tableau d'art lui-même pour le tableau de bord est cette couleur au lieu de la couleur blanche. Ce que cela va faire, cela va nous permettre de séparer tous ces éléments qui vont être blancs sur la page. Et ce principal étroit juste ici sur le dessus. Et ça va se lever beaucoup mieux. Et maintenant, vous pouvez voir cette ombre portée fonctionner encore bien avant. Donc la prochaine chose que je vais faire est en fait de copier quelques micros que j'ai utilisés précédemment. Et je vais les coller ici. Et comme vous pouvez le voir, ils sont tous liés. Donc, je vais aller de l'avant et faites un clic droit pour faire local, faire local sur tous d'entre eux. Et encore une fois, l'avantage de ceci est au lieu de les mettre à jour dans mon fichier principal, je peux simplement aller de l'avant et les mettre à jour ici. Adobe XD va les reconnaître, comme je les ai vraiment mis à jour ici. Donc ça va être beaucoup plus facile pour nous de travailler. Maintenant, allons de l'avant et commandez-les. Donc je vais les positionner comme ça. Et si nous sautons en arrière, vous pouvez voir que nous avons un tableau de bord, transactions de compte, des poumons, des cartes, des investissements, du numérique et de la déconnexion. Alors allons de l'avant et on les a commandés comme ça. Utilisons d'abord du texte. Donc, nous allons utiliser un texte Poppins régulier, et cela a l'air bien. Et voyons, je peux taper tableau de bord. Assurez-vous qu'il va de la gauche. Assurez-vous qu'il est au centre de notre icône. Et vous pouvez également les sélectionner tous les deux. Il suffit de cliquer ici. Et allons de l'avant et organisons-les un peu. C solide, peut-être que je peux le positionner pour être à 30. Alors 123. Allons-y avec 44 maintenant. Allons-y comme ça. Assurez-vous qu'ils sont au centre. Ils le sont. Et je vais simplement dupliquer ces quelques fois. Donc ça va être un compte. Ce sera des transactions seules cartes. Donc, j'utilise juste le contrôle en D pour le dupliquer en numérique. Et enfin, nous allons positionner la déconnexion juste ici en bas. Donc, la prochaine chose est de positionner ces icônes à côté de nos articles. Le solveur à gauche les aligner comme ça. Ensuite, je positionnerai le disque pour qu'il soit là. Et encore une fois, je vais vous donner toutes ces icônes, mais si vous voulez des packs plus grands pour les utiliser dans des projets professionnels avec vos clients et pas seulement pour apprendre car ceux-ci sont fournis pour vous, alors vous allez être en mesure de achètez-les si vous le souhaitez. Et tous ces packs d'icônes, je vais vous le montrer dans une prochaine vidéo juste pour voir à quel point ils sont massifs. Donc, décider compact, par exemple, est de grandes icônes. Il y a 2400 icônes différentes incluses à l'intérieur. Ils sont disponibles dans différents formats de fichiers afin que vous puissiez les obtenir dans les formats de fichiers Adobe Illustrator, capture format de fichier, Photoshop, PNG et ainsi de suite et ainsi de suite. Je pense qu'ils ont aussi EPS. Donc, il y a que nous avons numérique. Choisissons ces deux-là. Voyons voir, sélectionnez ces deux-là. Tout a l'air sympa. Et enfin, nous avons cette déconnexion positionnée juste ici. Maintenant, ce que je peux faire est d'utiliser ceux-ci. Assurez-vous qu'ils sont alignés à gauche, comme ça. Et voyons, peut-être que je peux les positionner avec C peut être 40. Alors fais comme ça. Shift 1234, comme ça. Et puis je peux sélectionner tout notre texte, assurer qu'il est aligné à gauche. Il l'est. Je peux le pousser ici. Maj 123 par exemple. Je pense que ça va marcher très bien. Et maintenant, allons de l'avant et organisez-les parce que vous pouvez voir que ces éléments sont grisés. Donc on a ce collier et on l'a juste ici. Donc, ce que je vais faire est de sélectionner tout mon texte. Cliquez ici pour en faire cette couleur. Et ce premier, je vais utiliser cette couleur parce que c'est la couleur de mon aéroport, ce qui indique que celui-ci est sélectionné. Maintenant, la prochaine chose que je vais créer est le sélecteur. Ainsi, chaque fois qu'un utilisateur clique sur certains de ces éléments, sélecteur va s'afficher derrière l'élément sélectionné de vicieusement. Donc, pour ce faire, je vais simplement utiliser mon outil rectangle. Je vais le positionner ici. Je vais m'assurer que c'est blanc. Il l'est. Et pour la taille, voyons, 302, largeur, 80, comme ça. Je vais l'appeler sélecteur. Comme ça. Je vais le positionner tout le chemin derrière. C' est notre top maintenant, comme ça. Et on va s'en occuper dans un petit peu. En fait, sachez ce qu'on peut aller de l'avant et finir celui-ci avant de passer à ça. Donc ce qu'il nous faut ici, c'est le logo. Si je vous ramène ici, nous n'avons pas de logo, nous avons nommé une image d'avatar juste ici. Alors prenons un logo de quelque part. On peut le prendre d'ici, contrôler C. On a aussi une copie dans nos actifs. Ici, c'est. Donc nous pouvons faire glisser et déposer d'ici si nous le voulons. Je peux m'assurer que c'est au centre avec celui-ci. Et voyons, je peux le positionner pour être à 40 comme ça. Il est donc joliment aligné avec toutes nos ressources de navigation ci-dessous. Ce que je vais faire ensuite est d'utiliser le texte sur le côté droit. Donc je vais copier un de ces postes ici. Et voyons, parce qu'on lui a donné un nom ici. Où était-ce ? Michael Jacobs. Donc, nous allons utiliser le même nom pour la cohérence. Comme ça. Je vais m'assurer que c'est un droit aligné sur ici. Maintenant, allons de l'avant et créons notre ellipse. Pour l'ellipse, utilisons 60 par 60, comme ça. Je vais aller de l'avant et m'assurer que c'est cette couleur pour indiquer que l'image doit aller là-bas. Je vais m'assurer que c'est au centre comme ça, et je vais le positionner jusqu'ici. Je vais positionner mon texto à 40. Donc comme ça, et c'est fondamentalement tout. Nous avons notre top maintenant terminé. Maintenant, ce que nous pouvons faire est en fait groupé ceci. Donc, je peux sélectionner mon logo, texte, notre goudron et l'arrière-plan, appuyer sur Control G. Je vais l'appeler, voyons en haut maintenant je pense que ça va bien marcher. Comme ça. Et j'organiserai les choses à l'intérieur. Donc c'est notre DAR, je vais le positionner ici, et c'est fondamentalement tout. Maintenant, organisons ces aussi bien. Donc c'est notre tableau de bord. Sélectionnons-le. Il vous contrôle. Parce que plus tard, à l'intérieur de notre design, nous allons réellement les utiliser pour les animer. Ils vont changer de couleur lorsque vous cliquez dessus. Donc, je vais vraiment vous montrer cela à partir de mon design original parce que j'avais l'intention de vous montrer le design original un peu plus tard, mais je vais vous le montrer maintenant juste pour que vous puissiez le comprendre. C' est donc le design final. Et lorsque vous cliquez entre eux, vous pouvez voir que ceux-ci changent de couleur. Et les utilisateurs peuvent effectivement cliquer dessus. Et vous pouvez voir que les icônes sont changées de couleur, ainsi que les textes et tout ce contenu ici sur la droite. Alors allons maintenant de l'avant et organisons-les. Il suffit de les sélectionner, d'appeler ce compte. Pour aller en dessous des transactions du tableau de bord. Donc, pour créer ces animations, vous devez les regrouper pour être plus facile à comprendre pour XD et pour que vous puissiez réellement organiser ces animations et ces transitions de transit. Ce sont des investissements de cordons. Comme ça. Nous avons le numérique va tomber. Et enfin, nous avons déconnexion. Un sélecteur va aller juste en dessous de tout cela parce qu'il va aller au-dessous et derrière eux. Donc, pour le sélecteur lui-même, passons rapidement autour de lui juste un peu parce que je ne creuse pas ce coin parce que c'est juste trop plat pour moi. Donc je vais aller ici et donner ce 2020. Donc en haut, en bas à gauche et en haut à droite. Donc, si je peux zoomer un peu, vous pouvez voir à quoi ça ressemble alors que ces deux-là sont complètement plats. Donc, ce que nous allons faire est en fait donner à cela l'espacement de 40, donc 1234 et positionner notre tableau de bord à l'intérieur comme ceci. Donc d'ici à l'article suivant, nous allons le positionner à 40. Donc 1234. Et à partir de notre prochain article, nous allons lui donner l'espacement de 60. Comme ceci parce que lorsque vous effectuez une transition, vous voulez avoir suffisamment d'espace entre tous vos éléments. Comme vous pouvez le voir, c'est pourquoi nous donnons un peu plus d'espace. Vous pouvez également lui donner l'espace de 80 si vous le souhaitez. Mais je pense que 60 va très bien marcher entre tous ces différents éléments. Alors donnons-lui un espacement de 60. Adobe XD ramassé très bien. Ce que je veux en faire. Ça marche très bien. Voyons 60. Et enfin, pour la déconnexion elle-même, nous pouvons le positionner à 40. Donc, décalez 1-2-3 pour l'instant, ce que je vais faire est en fait sélectionner tous ceux-ci devraient contrôler G et les appeler barre latérale. Comme ça. Parce que je veux les positionner pour être à l'intérieur de ma barre latérale. C' est comme ça que tu appelles ça. Et ce bit va en fait être notre zone de contenu. Donc, pour notre zone de contenu, nous voulons du texte juste ici en haut. Et puis nous voulons créer tous ces autres éléments. Donc, pour ce faire, je vais copier ce texte et les districts contrôlent C, contrôle V. Donc je vais m'assurer qu'ils sont alignés comme ça. Ils sont positionnés à la même hauteur que ce conduit. Donc 40 de notre navigation, nous allons écrire ici, bienvenue, Michael. Et ici cela pour des conditions comme celle-ci, et ça va contenir la date elle-même. Alors changeons la couleur. Et pour ce texte ici, peut-être que je peux aller avec 36. Je pense que c'est trop grand. Donc 36 gras. Je vais l'ajouter ici à mes styles de personnages. Des musiciens qui sont ici. Donc juste en dessous d'un entre-deux, parce que je pense que 36 fonctionnera un peu mieux. Et puis 48. Et ça va me donner juste un peu plus d'espace pour jouer. Notre position est d'être à 20 à gauche alignée sur ce bord. Et maintenant, allons de l'avant et commençons par créer ces boîtes pour notre contenu. Commençons donc par un outil rectangle. Cela va prendre quatre colonnes en largeur et les dimensions vont être 467 semaines, 231, comme ceci. Et voyons, je peux lui donner un rayon de 10. Et pour l'espacement, je peux aller avec 40. Comme ça. Je peux aussi ajouter une ombre, petite ombre, donc 55 et 20. Et voyons, c'est trop brillant. Allons-y avec six. Oui, je pense que ça marche un peu mieux. Je vais le dupliquer. Donc Control D, positionnez l'outil plus juste ici. Et si je vous ramène à notre croquis original, vous pouvez voir qu'on en a trois ici et qu'on doit écrire ici. Donc, ce que je vais faire est de dupliquer celui-ci par exemple. Et voyons, je peux le positionner pour être à 40. Il l'est. Et simplement étendu tout le chemin vers le bas parce que c' est à 40 va bien arrondir ici. Je vais prolonger ça jusqu'à sept heures. Donc 4567 colonnes de large. Et nous allons le dupliquer et tout simplement annuler et celui-ci comme ça. Donc ça va être à cinq colonnes de large. Donc, si j'ai inclus ici et aperçu, et juste pour que vous puissiez le voir un peu mieux, vous pouvez voir à quoi ça ressemble. Encore une fois, si vous pensez que c'est trop étroit, vous pouvez l'augmenter à 40. Je pense que ça n'a vraiment pas d'importance et ça a l'air bien comme il l'est en ce moment. Donc je vais juste le laisser là pour l'instant. Ce que nous allons faire ensuite, c'est inclure du texte. Et je vais écrire dans quelque chose comme comte. En fait, je vais y aller avec 18 ans. Et ça marche bien. Voyons si je peux le faire. 123412, par exemple. Et vous pouvez le positionner un peu vers le bas. Donnons ce 48. Donnons-lui quelques chiffres. Donc, par exemple, 34 à 5.186 parce que vous voulez être exactement à ces numéros parce que c'est votre compte. Après tout, décaler 12. Je vais lui donner découvrir par exemple. Et voyons. Nouveau compte bancaire. Parce que c'est le compte principal que l'utilisateur utilise. Positionnez-le au centre comme ça. Ensuite, vous pouvez évidemment ajouter une icône ici si vous le souhaitez. Mais je pense que ça va bien marcher, comme ça. Donc c'est notre compte Vg. Et je vais sélectionner tout ça. Il contrôlera G et appellera ce compte principal comme ça. Ce que nous allons faire ensuite, c'est passer à certains d'entre eux. Donc, par exemple, cela peut être à propos de vos cartes. Donc, nous allons la qualité qui font vraiment, par exemple. Et bien, voyons, peut-être que je peux copier et coller. Il en va de même pour le texte comme ça. Et je peux sauver quelque chose comme ton courant. Et voyons, peut-être que je peux me positionner pour être à 40 une fois de plus, alors décalez 1234 et c, et cela peut être VSA courant. Changeons sa couleur pour ce texte. Ouais, je pense que ça marche mieux, mais je ne pense pas que cette taille fonctionne. Alors passons à 16 et ajoutons tout de suite. Il va au sommet, ce qui est très bien. Donc c'est 18 défunts ? 16. Je pense que ça marche bien. Voyons voir. Je peux le positionner à 20$. Et cela peut être à 20 aussi, valable jusqu'à C, neuf sur 21. Donc neuf mois de 202120 partout. Et c'est très bien. Et voyons, peut-être que nous pouvons créer une pagination juste ici en bas, juste pour que les utilisateurs puissent basculer entre toutes ces cartes. Parce que, par exemple, vous pouvez avoir une carte de débit que vous avez une carte de crédit et ainsi de suite, sel chaque fois qu'ils cliquent sur cette pagination, cette information va changer. Ainsi, par exemple, une voiture de rassemblement à une carte de débit ou autre. Et la carte elle-même va changer ici. Alors passons à ces cercles. Donc, je vais simplement créer un cercle qui va être 15 par 15. C'est très bien. Utilisez cette couleur comme ça. Et voyons, peut-être que je peux le positionner comme étant à sa garantie. Donc 12 comme ça, contrôlez D et voyons, peut-être que je peux aussi lui donner l'espacement ou 15 parce que c'est 15 par 15, comme ça. Et ces deux-là peuvent être décolorés parce que celui-ci est et celui qui est sélectionné, ou nous pouvons réellement sélectionner DS1 et ensuite le donner décoloré, disons juste pour indiquer qu'il est sélectionné. Maintenant, je vais regrouper ce texte. Je vais utiliser mon outil rectangle comme ça d'ici à ici. Utilisez-le et du texte, assurez-vous que le texte est centré. Puis supprimé ce rectangle, revenant à mon panneau de calques et l'appeler texte. Parce qu'une fois de plus, une fois que vous commencez à les changer, ce texte va en fait se mettre à jour et changer. Appelons ça. Donc ça va être nos cercles. Et je vais simplement copier et coller ce texte dans. Ce sera notre pagination. Donc plus avec juste en dessous du texte. Et ce qui vous reste avec, c'est la carte. Je vais dupliquer ce contexte. Et voyons voir pour les dimensions de la carte, je peux utiliser quelque chose comme deux à huit avec 149. Quelque chose de gentil et petit. Je vais utiliser cette couleur juste pour indiquer que c'est notre mélange de cartes. Il est au centre et voyons, je peux le positionner pour être à 40 d'ici. Donc 1234, comme ça. Et je pense que cela fonctionne très bien comme notre mise en page. Donc, comme je l'ai dit, vous pouvez juste imaginer qu'il va simplement renommer ceci en Carter PG, comme ceci. Et nous allons groupe de ceux-ci. Appelons ça votre courant, comme ça. Donc, une fois de plus, vous pouvez juste imaginer que lorsque les utilisateurs commencent cliquer entre ces derniers et modifient cette pagination, cette information va être mise à jour. Ainsi, par exemple, de VSA à MasterCard, quel que soit un valide jusqu'à des dates différentes, puis défausser le graphique va également mettre à jour. Donc, encore une fois, s'il pense que c'est juste pour, pourquoi pourriez-vous les espacer un peu plus pour vous donner un peu plus d'espace ici ou ici, comme ceci, par exemple, alors vous pouvez accueillir du texte MasterCard et ainsi de suite. Mais je pense que ça marche très bien. Enfin, ce que nous allons faire ici pour ce top guard, je vais aussi utiliser ma pagination. Je vais utiliser mon contrôle de texte C, contrôler V et le positionner ici. Donc 1234 et est allé mener une pagination. Et ce que nous allons faire là, c'est que nous allons l'appeler un onglet Aide, car il va montrer aux utilisateurs quelques conseils. Alors comment Tab, Vg, comme ça ? Et ça va leur montrer des conseils. Comme je l'ai dit, je vais simplement aller de l'avant et copier mon texte ici. Juste pour te montrer, je vais supprimer celui-là. Et enfin, voyons. Peut-être que je peux donner ça comme ça et l'espacement comme ça. Et je vais le fermer ici. Voyons voir, je peux me positionner pour être à 20, ce qui est déjà. Et c'est très bien. Positionnez bien. Et c'est fondamentalement tout. Tout. La seule chose que nous pouvons faire est dans la conception plus tard ajouter quelques graphiques. Et je vais le montrer une fois de plus juste pour voir ce que je veux dire. Nous avons ces soins graphiques et plus tard, nous allons les ajouter. Et vous allez voir dans la section conception de ce cours ce qu'ils résolvent réellement. Les utilisateurs commencent à cliquer entre ces éléments. Comme vous pouvez le voir, ces graphiques vont changer et mettre à jour partout où ils cliquent et leur montrer ces haplotypes qui quand ils cliquent, ils peuvent les amener à différentes pages. Donc pour l'instant, laissons-le tel qu'il est. Je vais sélectionner la prochaine génération, tout ça et l'appeler. Voyons voir, onglet Aide, comme ceci. Maintenant, enfin, organisons les choses un peu. Ou nous pouvons encore plus et créer ces deux-là et ensuite nous pouvons les organiser. Je pense que c'est beaucoup mieux. Voyons voir, nous pouvons appeler ces transactions. Donc comme ça. Et puis je peux déplacer ça ici. Voyons voir, je peux lui donner l'espacement de 40. Donc 1234, vos transactions. Et voyons, une fois de plus 40. Comme ça. Ce sera Indeed et ce sera nouveau nom d'entreprise afin que vous puissiez savoir quelle entreprise vous dépensez votre argent. Maintenant, cela peut être un service et cela peut être un montant en dollars. Soe m'a vu avant ce 1234. Je pense que ça marche bien. Ça va de la droite, et donnons-lui des nombres aléatoires. Donc C moins 15.14, Par exemple. Organisons ça juste un peu mieux. Donc, nous avons la date d'abord, puis nous avons un nom commercial, nous avons le service et nous avons ceci. Appelons ça les données. Ci-dessous vos transactions. Je vais en fait copier et coller ce texte avec une flèche où il est, le voici. Au lieu d'en savoir plus, nous allons le renommer pour en voir plus. Juste ici. Je vais le placer au centre comme ça. Je vais à la position connue. Voyons voir, peut-être que je peux nous donner une base de 20, alors décalage 12. Allons zoomer un peu. Par ça. Je vais le positionner jusqu'au bas. Et ce dossier de données, je vais simplement utiliser une grille de répétition pour l'instant. Donc je vais m'assurer qu'il est là. Je vais augmenter l'espacement à, laissons-le à 20. Je pense que ça marche très bien. Et comme je l'ai dit, nous allons le laisser comme ça pour l'instant. Maintenant. Je vais les regrouper. Donc, apprenez plus que des données et des transactions. Nous allons appeler ces dernières transactions, je remarque. Et enfin, nous sommes sur une largeur gauche avec celui-ci. Donc, dans cette vidéo est allé un peu plus longtemps. Mais j'aime vraiment aller dans les détails pour que vous ne manquiez rien. Donc je vais copier ce texte a fait en position à, à 40, donc 1234. Toutes les dépenses comme ça. Et voyons, peut-être qu'on peut appeler cet appel dépenses BG. J' ai fait ça. Et ce que nous pouvons aussi faire est de dupliquer celui-ci et de nous donner un peu plus d'espacement. Donc, par exemple, 40, je vais m'assurer que c'est 16. Je vais l'appeler tous les jours. Et puis ce que nous pouvons faire est généralement ceci, assurez-vous qu'il est à 20 ans, assurez-vous qu'il est à 18 ans. Comme ça. Et je vais lui donner des nombres aléatoires. Voyons donc 2.4875 par exemple, parce que c'est nos dépenses quotidiennes. Et puis je vais les regrouper. Tout d'abord, revenons au panneau des calques. Donc, cela va être idéalement positionné. C' est ici. Organisons en cela, dans l'autre sens comme ça. Donc ça est allé battre chaque semaine. Et assurez-vous que nous en créons un autre doit être en mensuel comme ça. Donc, pour le mensuel, change-le pour des chiffres plus importants. Ainsi, mille à cinq points, 13, par exemple. Ça va être quelque chose d'un peu plus petit. Donc, 1.4 à 0.64 au quotidien et hebdomadaire va rester juste là. Ce que je vais faire, c'est être à 40 ans. Donc 1234, parce que c'est à 40 ans, si vous vous en souvenez. Maintenant, je vais sélectionner ces trois, comme ça. Et cliquez ici pour vous assurer que tous les jours sont au centre entre ces deux. Ça va être hebdomadaire. Et enfin, ça va être mensuel. Ainsi, vous pouvez voir à quel point c'est facile d'organiser et de le garder simple. Ce que je vais faire ensuite, c'est créer mon cercle. Donc je vais commencer par ajouter un cercle juste ici, parce que ça va nous montrer le tableau de toutes les dépenses. Donc, je vais l'appeler serveur pour l'instant et nous allons l' aborder plus tard dans la partie conception du cours. Alors, on voudrait 86 avec 186, comme ça. Et voyons, nous pouvons ajouter une bordure de ticker. Donc, tout d'abord, changeons cela en une colonne de disque et donnons-lui une bordure de sable, par exemple, juste triée. Vous pouvez le voir un peu mieux et vous pouvez effectivement cliquer dessus. Et voyons. On peut se positionner à 42, c'est 36. Alors voyons, peut-être 40 du bas, comme ça. Donc nous en avons 40 ici et nous en avons 38 ici. Donc 39 ici, en tournant, j'ai entendu, c'est à peu près très bien. Ce que je vais faire ensuite est en fait dupliquer cette section. Positionnez-le ici à l'intérieur de notre cercle. Et nous allons appeler cela, par exemple, en novembre. Et donnez ça. Certaines dépenses de, de c 82513 pour correspondre à ce chiffre supérieur que nous avons. Donc avec celui-ci, je vais m'assurer que les deux sont centrés. Je vais m'assurer qu'ils sont centrés comme ça. Je vais choisir comme ça. Et j'appellerai ce texte que je donnerai à ceci un nom de graphique. Et évidemment, cela va être mis à jour dès que les gens commencent à cliquer dessus. Donc, ce que je vais faire ensuite est en fait ajouter des balises de texte fondamentalement. Utilisons ce texte de 16 dupliqués, morbides à l'extérieur et quand positionner tout droit autour ici. Alors voyons ce que nous pouvons réellement faire, il peut peut-être nous ajouter des choses aléatoires que les gens achètent. Laissons-le ici pour l'instant. Je vais lui donner un nom comme des vêtements. Maintenant, je vais dupliquer ce qu'on appelle cette nourriture. Et ça va être des services publics. Et enfin, cela peut être les paiements de voiture sont admissibles tout ce que vous voulez y inclure, donnez-lui un espacement ou 20 ou pensez qu'il va bien fonctionner et les regrouper et assurez-vous qu'ils sont au centre de notre cercle et de les positionner ici pour l'instant parce que je pense que ça va marcher très bien. Mais plus tard dans le design, nous allons y ajouter quelques icônes. Donc je pense que ça va marcher très bien pour l'instant. Alors voyons. Toutes les dépenses position vers le haut. Nous avons tous les jours, hebdomadaires, mensuels positionnés ici. Donc tous les jours, hebdomadaires, mensuels. Ensuite, nous avons le tableau et nous le lançons, voyons des vêtements, de la nourriture, des services publics et des paiements de voiture. Et enfin, nous avons cette histoire qui va aller ici. Je vais regrouper tout ça, appeler toutes les dépenses et appeler ça un jour. En fait, nous devons mettre dans cette position intérieure vers le bas comme ça. Et c'est essentiellement à, la dernière chose que je veux faire est d'organiser les choses juste un peu. Donc, adoptez nav et désolé, barre latérale va aller juste ici. Toutes les dépenses vont aller au fond. Et ça et ça vont se passer ici. Donc, nous avons le compte principal, votre carte est conservée, tamponner, les dernières transactions et dépenses, et c'est notre tableau de bord terminé. Et quand nous arrivons à la partie design de celui-ci, et quand nous arrivons à des pages supplémentaires de ce tableau de bord, vous allez voir à quel point c'est facile copier coller et d'ajuster certains de ces éléments, en particulier avec ces veut, nous allons réellement créer des balises pour eux. Nous allons remplacer cela quand il dit service avec ces balises. Ça va être très simple et tous vont avoir une couleur différente de Darrell. Donc tu vas voir à quel point ça va être facile. Donc, frapper le contrôle S ou la commande doit enregistrer et les dettes sont processus filaire dans Adobe XD terminé. J' espère vraiment que vous avez appris quelque chose de nouveau. J' espère que vous avez apprécié ce processus de création. Avec moi. J'espère vraiment que vous allez recréer ça ou faire quelque chose d'un peu différent pour vous-même. Et pour explorer ce processus filaire, car vous pouvez voir, peut être extrêmement simple en fonction de la technique que vous pouvez utiliser. Vous pouvez utiliser une grille de répétition pour tous ces éléments. Vous pouvez utiliser des composants pour eux, puis adapter ces composants. Vous pouvez copier et coller. Vous pouvez utiliser Grid pour les positionner à gauche et à droite comme vous le souhaitez. Donc, il n'y a vraiment aucune limite à ce que vous pouvez faire dans Adobe XD. Leur limite est juste votre créativité en gros. Je vous exhorte donc à explorer Adobe XD et commencer par créer ces trames filaires. Commencez par explorer ce que vous pouvez faire pour votre projet dans Adobe XD. C' est tout pour cette vidéo, c'est tout pour cette série de vidéos pour filaires dans Adobe XD. Dans la vidéo suivante, je vais vous expliquer un peu où j'ai eu des images pour ce projet. Parce que dans la prochaine étape du projet, quand nous arrivons à la partie design, nous allons commencer à utiliser des images. Donc je veux juste vous montrer où j'ai eu ces images, ce que vous pouvez faire pour les obtenir aussi. Et la différence entre les images gratuites et B8, ainsi que ces icônes premium où je les ai eu, comment vous pouvez les obtenir aussi, ainsi que les limitations des licences pour ce projet particulier. Je te vois dans la prochaine vidéo. 37. Ressources et licences gratuites en VS Premium et: Quand il s'agit d'utiliser des éléments dans vos conceptions, que ce soit nos icônes, images, maquettes, et ainsi de suite. Il y a toujours ces deux parties. La première partie utilise des éléments gratuits. Donc, polices gratuites, images gratuites, maquettes gratuites et ainsi de suite. Et l'autre partie utilise des produits premium. La différence entre Dose 2 est évidemment des variations parce que pour chaque objet gratuit que vous avez trouvé en ligne, il y a de bonnes chances que vous n'ayez pas assez de variation. Ainsi, par exemple, si vous téléchargez la police gratuite, probable que si vous n'utilisez pas les polices Google, par exemple, vous ne trouverez pas suffisamment de polices. S' ils utilisent des icônes, vous ne trouverez pas exactement les mêmes icônes du même ensemble. Donc, vous devrez finir par acheter ces icônes si vous, par exemple, utilisez pour les équipes de sein, il y a une bonne chance que vous trouverez une équipe avec seulement deux ou trois pages et pas toutes les pages dont vous avez besoin. Même histoire avec des maquettes, même histoire avec des images, surtout. Donc, je vais vous montrer des images exemple en détail, mais la valeur et les variations sont ce qui sépare les ressources gratuites et premium. Il y a toujours cette autre chose qui est chaque concepteur là-bas qui utilise des articles gratuits, va finir par avoir fondamentalement vraiment similaire, sinon le même design que vous le faites, parce que vous utilisez le même articles gratuits que vous trouvez en ligne, il s'agisse de polices, images, de maquettes, et ainsi de suite. Donc, dans cette vidéo, je vais vous montrer des éléments que j'ai choisi d'utiliser dans ce cours. Je vous donne ces articles, mais encore une fois, les articles premium sont juste à des fins d'apprentissage. Vous n'avez donc pas la permission de les utiliser pour votre travail client. Si vous choisissez de les utiliser, assurez-vous de comprendre que dans le cas de quelqu'un va après vous pour notre procès, ce soient ces sites Web ou de l'auteur original, Il est à vous de décider. Alors assurez-vous de comprendre que c'est vraiment sérieux. N' utilisez pas ces articles premium si vous n'avez pas les autorisations nécessaires pour le faire. Assurez-vous donc de comprendre que pour les articles premium, la dette est le cas pour les articles gratuits. Vous êtes évidemment autorisé à les utiliser. Commençons donc avec les polices. Et le premier site Web ici est Google Fonts. J' utilise la police Poppins tout au long de ce cours. Vous pouvez évidemment aller à ce lien, cliquez sur la famille Donald, et il va télécharger dans la famille de polices désastreuses. Donc tous ces liens, que je vais vous montrer dans cette vidéo vont être liés dans le PDF. Veuillez donc télécharger le PDF et cliquer sur tous ces liens que vous souhaitez visiter. Ce sont donc les polices de Google. Et évidemment, vous pouvez, si vous voulez utiliser une autre police, vous pouvez aller aux polices Google, vous pouvez cliquer ici. Vous pouvez choisir par catégories, vous pouvez choisir par langue. Alors quelles langues sont prises en charge ? Propriétés de la police. Donc, si vous voulez, combien de nombre de styles, épaisseurs, inclinaison, largeur, et ainsi de suite. Vous pouvez donc faire tout ce que vous voulez ici sur Google Fonts. Et encore une fois, cette ressource est complètement gratuite. Si vous choisissez d'aller avec des ressources premium, alors je recommande vraiment Creative Market. Parce que Create your market est vraiment cette belle ressource pour les polices premium. Vous pouvez également trouver d'autres types de ressources ici. Donc, à partir de photos, graphiques, modèles , équipes web, polices, add-ons, même 3D. Vous pouvez trouver des produits premium ici. Aussi, le Dinka mentionné au début de cette vidéo. La principale raison pour laquelle vous n'alliez pas le faire est que vous voulez différencier votre design de tous ces autres concepteurs. Vous voulez offrir à vos clients une expérience premium, surtout s'ils ont le budget. Donc, vous pouvez toujours aller ici et acheter ces polices afin que vos designs ne finissent pas la même apparence que tous ces autres gars qui utilisent des ressources gratuites. Donc c'est le point principal juste ici. Je recommande de créer du marché parce que certaines personnes vraiment créatives ont créé des polices ici. Et je vous recommande vraiment de les vérifier. Ensuite, nous avons des icônes. J' utilisais ces icônes, si grande icône Steyn, et cet ensemble a été mis à jour. La tuile Kinky a 2400 icônes, quelque chose comme ça. Et vous pouvez cliquer ici pour aller à la prime et désolé de prévisualiser. Et vous pouvez voir combien d'icônes différentes dans différents styles dans ce dos contient réellement. Donc c'est celui que j'utilise, sa prime comme vous pouvez le voir. Mais si vous voulez des icônes gratuites, une fois de plus, vous pouvez aller sur des sites Web comme flat icon.com. Et pour chaque icône que vous utilisez ici, vous devez relier à l'auteur original, solide et forme. Si, par exemple, vous choisissez, je ne sais pas, ce pack d'icônes. Et disons que je veux télécharger cette icône. Vous pouvez voir que lorsque je clique sur l'option PNG ou l'option SVG, je recommanderai toujours SVG si possible. Lorsque vous cliquez sur SVG UC, vous avez la boîte de dialogue Premium. Donc, vous avez toutes ces icônes pour ce prix du mois ni attribut requis. Mais si vous choisissez de télécharger la version gratuite, alors vous devez attribuer l'auteur original. Donc, vous devez copier ce lien, vous devez le baser sur votre site Web et ainsi de suite parce que vous utilisez la ressource de quelqu'un d'autre gratuitement. Voilà donc l'inconvénient. Tu dois lier ce type. Donc, voici Gregor Krasner, j'espère que je l'ai prononcé correctement. Donc, ce sont les limites des icônes libres. Vous pouvez toujours aller sur les sites Web comme la conception matérielle, qui est les propres icônes de Google. Mais le problème avec cela est ce sont les icônes utilisées dans le système d'exploitation Android I. Donc, fondamentalement, chaque téléphone maintenant là qui a le système d'exploitation Android, utilise ces icônes. Donc, une fois de plus, les chances sont que votre design va finir par sembler assez similaire à tous ces autres designs trouvés en ligne, surtout si vous faites la conception d'applications mobiles, en particulier pour les utilisateurs Android. Donc, ce sont vos limites. Si vous le souhaitez, vous pouvez évidemment télécharger et utiliser ces icônes, comme avec les polices Google parce que Google les a créées. Ils sont essentiellement presque open source, qu'ils sont ici. Mais vous avez toujours ces licences ici, mais vous pouvez les utiliser gratuitement sans aucune attribution requise. Ensuite, nous déplaçons deux images, et c'est vraiment la ressource clé sont trouvés en ligne que vous avez le plus de limites largeur. Parce que surtout avec les gens, si vous utilisez des images de personnes que vous voulez des jeux d'images et les chances sont que vous ne trouverez pas de jeux d'images comme des images libres. C' est donc là que les images premium entrent en jeu et les images premium SET entrent en jeu. L' autre moyen est la résolution, surtout si vous créez du travail pour l'impression. Il y a des chances que ces résolutions ne soient pas suffisantes pour votre travail d'impression. Donc, vous devrez toujours acheter ces images, ensembles d'images. Vous pouvez les utiliser plus tard dans votre travail d'impression. Solides. Prenons un bon exemple. Voyons voir, peut-être qu'on peut taper quelque chose comme, je ne sais pas. Mec, juste pour voir des images. Et nous avons cette image juste ici. Donc, disons que nous voulons utiliser des images de cet ensemble. Nous pouvons cliquer sur le photographe et vous pouvez voir qu'ils ont des variations de ces différentes images, mais il n'y a pas d'ensemble d'images de ce modèle particulier. C' est ce que je disais. Donc, si vous voulez l'utiliser pour une équipe par exemple, et vous l'avez fait, disons quatre personnes dans votre équipe. Peut-être que nous pouvons finir par utiliser cette image, peut-être cette image, mais c'est fondamentalement tout. On est coincés. Nous devons donc trouver des images en ligne qui sont vraiment similaires à celles-ci, qui sont gratuites, qui ont le même éclairage, qui ont le même type de fond. Ils vont donc paraître cohérents sur notre site Web. Et puis on est coincés. Nous perdons notre temps à chercher ces images en ligne bonnes chances que vous ne finissiez pas par trouver ces images en ligne. C' est donc là qu'un dos d'image haut de gamme est utile. Et le site Web que j'utilise est et des éléments vitaux parce qu'ils ont toutes ces images différentes ici dans des ensembles d'images. Et ils ont aussi ce site appelé 20-20, qu'ils ont acheté. Donc, si je choisis, par exemple, des photos ici. Et si je clique dessus, vous pouvez voir que nous pouvons les affiner par portrait de paysage, fond carré, qui est isolé, ce qui signifie que si nous voulons trouver des images comme celle-ci, c'est vraiment assez simple. Pour que je puisse taper Man Search. Et puis je peux aussi cliquer isolé. Et vous pouvez voir tout de suite que nous avons ces images isolées. Donc, soit sur fond blanc, fond gris, fond sombre, et ainsi de suite. Il est donc beaucoup plus facile que pour vous de sauter à l'intérieur, par exemple, Photoshop ou tout autre outil en ligne qui peut être utilisé pour couper ces arrière-plans pour ces images. Et en un seul clic, vous allez pouvoir supprimer les arrière-plans de ces images. Prenons donc, je ne sais pas, cette image par exemple. Et nous pouvons voir des images similaires. Donc, ils sont là. Pour que vous puissiez tout de suite, il suffit de regarder à partir de ces images et de supprimer l'arrière-plan comme si nous les utilisions dans vos designs. Ou si vous ne voulez pas supprimer les arrière-plans, vous pouvez simplement les utiliser comme ceci. C' est là que ces images haut de gamme sont utiles parce qu'elles viennent en ensembles. Alors laissez-moi vous montrer cette image aussi. Si vous, par exemple, vouliez le vérifier, vous voyez que nous avons ce modèle. Et vous pouvez faire défiler vers le bas et voir que nous avons des modèles similaires de ce genre de configuration. Et vous pouvez également cliquer sur le photographe. Et vous pouvez voir qu'ils ont 3 mille images. Et vous pouvez ensuite rechercher ce modèle particulier et voir d'autres, par exemple, des poses ou d'autres choses que ce modèle particulier a fait. Et vous pouvez voir clairement, disons que cet homme, vous pouvez le localiser dans la majorité de ces images afin que vous puissiez le voir dans différentes poses. Vous voyez que nous avons des enfants, nous avons des personnes âgées, nous avons des sous-marins d'appel, nous avons des détails, etc. Donc, fondamentalement, les dettes, comment c'est facile à utiliser. Et la chose que je voulais te montrer ainsi que des photos. Donc, quand vous cliquez juste là, vous voyez que nous avons 50 millions d'images différentes sur ce site, 20-20 points com. Donc, quand vous cliquez à droite, il va vous emmener à ce site et il est beaucoup mieux organisé que les éléments Watteau, mais il fait toujours partie des éléments de l'onduleur. Donc, quand vous voulez acheter et l'abonnement des éléments d'eau, vous vous retrouvez toujours avec ce site particulier. Ainsi, vous pouvez utiliser les deux images dans vos projets et les images de bateau sont fondamentalement vraiment de haute qualité professionnelle et ainsi de suite. Donc, vous pouvez voir ici que vous pouvez les configurer par ensembles. Et fondamentalement la même chose encore une fois, quand vous voulez les utiliser, il n'y a qu'une seule mise en garde. Vous pouvez choisir différentes tailles de ces images. Donc, par exemple, choisissons cette image. Et vous pouvez voir, vous pouvez choisir petit, moyen ou grand, puis vous pouvez les télécharger. Mais l'esprit et les éléments vitaux, vous devez télécharger la plus grande image possible et ensuite finir par l'optimiser. Je vais vous montrer l'optimisation que j'utilise plus tard, mais vous pouvez toujours faire glisser et déposer dans Adobe XD comme la dette. Mais il y a de bonnes chances, surtout si vous utilisez ces images premium, vous allez finir avec des fichiers vraiment volumineux. Donc votre système pourrait être en retard. Donc je vous recommande toujours d'optimiser vos images si vous le pouvez. Ou si vous choisissez d'utiliser ces images premium, vous pouvez utiliser quelque chose comme 20-20 puis télécharger ces versions plus petites. Ils vont être sauvegardés dans votre collection et vous pouvez toujours les mettre fin en tant que collection. Vous pouvez les ajouter à vos favoris. Et puis, lorsque vous finissez par partager ces ressources avec vos développeurs, vous pouvez aller de l'avant et télécharger des versions plus grandes s'ils le souhaitent. Par exemple, votre client peut finir par avoir la conception de site Web, conception d' applications, mais aussi la conception d'impression. Ils pourraient donc avoir besoin d'énormes versions pour l'impression. Par conséquent, vous pouvez revenir en arrière et leur envoyer ces résolutions. Alors que les images d'effilochage V8, il y a de bonnes chances que ce soit fondamentalement tout. C' est ainsi que les moitiés photographiques l'ont fourni. Donc peut-être que vous aimez vraiment cette image et peut-être que c'est 1920 d'ici 1080. Votre client a besoin de quelque chose de plus grand et vous ne pouvez pas leur fournir quelque chose de plus grand que vous êtes coincé C' est donc à quel point il est facile d'utiliser ces images haut de gamme. Et vraiment une chose assez simple, largeur et les éléments VO2 est, par exemple, si nous choisissons d'utiliser cette image, et si nous choisissons d'utiliser grand, parce que je suis déjà connecté ici en tant qu'utilisateur premium, Je peux simplement cliquer sur Télécharger. Excellent choix. Et vous pouvez voir ici dans le coin gauche, mon téléchargement va commencer tout de suite dès que je clique sur le bouton de téléchargement disconfirmé, et vous pouvez le voir ici. Donc, il a toujours commencé à télécharger sur les éléments Eduardo. Cependant, pour chaque ressource, vous finissez par utiliser des éléments sur et Watteau. Vous pouvez simplement cliquer sur télécharger et ensuite vous devrez choisir le projet que vous voulez. J' ai donc ce projet de banque, mais par exemple, je peux l'appeler de nouveaux projets bancaires. Je peux créer ce projet et je peux ajouter et dialoguer. Et tout de suite, j'ai une licence commerciale que je peux ensuite donner à mes clients. Et ils ne vont pas s'inquiéter que quelqu'un les poursuive pour avoir utilisé cette image et ainsi de suite parce qu'ils sont couverts par une licence. Un marketing sur les images vraiment important. L' un est, par exemple, que si ce photographe, pour une raison quelconque, choisit de sortir de l'éclaboussure, laissez-moi ne pas simplement choisir ce photographe. Donc, par exemple, celui-ci, s'ils choisissent de sortir de notre splash, divertir leurs images vers le bas. Vous finissez toujours par utiliser leurs images. Il y a de bonnes chances qu'ils puissent changer d'avis plus tard et passer d'images gratuites à des images premium et finissent par vous poursuivre pour avoir utilisé ces images. Donc il y a toujours la mort. Alors qu'avec celui-ci est lu ces services premium, vous finissez par avoir un document écrit de licence que vous pouvez ensuite partager avec votre client, et alors votre client est vraiment couvert si certaines de ces personnes essaient d'aller après eux, ce qui est ce ne sera pas vraiment le cas pendant que nous avons ces ressources gratuites pour des images, des maquettes, des icônes, quelles que soient les ressources gratuites, il y a de fortes chances que quelqu'un le fasse. Enfin, je vais montrer des images que j'utilisais et ce sont des images premium. Et vous pouvez voir ici quand je clique sur la facilité avec laquelle ils sont faciles à travailler. Et vous pouvez voir que vous vous retrouvez avec ces images sans aucune couleur et celles-ci avec la couleur. Et si je ferme cet aperçu, vous pouvez voir les types Adobe Illustrator. Vous pouvez voir que nous avons des types de fichiers, Adobe Illustrator, EPS, PNG, SVG. Vous pouvez voir que les dimensions dans lesquelles ces icônes entrent, elles sont vectorielles et superposées. Nous avons une licence commerciale et vous pouvez cliquer pour charger et voir plus d'informations sur commercialise. Mais fondamentalement, je l'ai déjà couvert. Et vous pouvez toujours tendre la main à cette personne et demandé, par exemple, des icônes personnalisées. Vous pouvez leur demander de changer une couleur particulière si elles ont quelque chose comme des composants intégrés à l'intérieur d'illustrator ou à l'intérieur de x D, ou à l'intérieur de l'esquisse, quel que soit l'outil que vous utilisez alors qu'il icônes libres, vous êtes essentiellement coincé avec tout ce qu'ils vous donnent. Je suis parce que j'utilise est R, R de juste icône. Comme vous pouvez le voir, ils ont 955 de ces icônes premium. Et vous pouvez faire défiler et voir toutes sortes de services différents pour lesquels vous pouvez utiliser ces icônes. Vous pouvez voir qu'ils ont l'éducation de démarrage travaillant à partir de réseau à domicile, sport et ainsi de suite et ainsi de suite. Et vous pouvez essentiellement voir la variation dans ces différents packs d'icônes pour vous montrer une fois de plus. Et les éléments vitaux est fondamentalement un service d'abonnement. Donc, au lieu d'acheter de la création de marché tous les éléments individuels séparément ou de l'aide de l'interface utilisateur, vous pouvez acheter un abonnement à ce site d'éléments d'onduleur. Et vous avez essentiellement des téléchargements illimités pour un an et puis vous devez renouveler votre abonnement en dette un an, vous pouvez télécharger autant d'articles que vous le souhaitez. Et vous pouvez voir que vous êtes même couvert avec des vidéos, modèles vidéo, même avec de la musique, des effets sonores, modèles graphiques, des présentations graphiques, des photos, des polices, ajouter des ons, modèles Web et encore plus de catégories. Ainsi, vous pouvez voir que vous avez la 3D, vous avez des eBooks et des cours. Ainsi, vous pouvez aller à et points Watteau plus n même apprendre dans votre abonnement. Donc, fondamentalement, ils ont tout couvert. Et vraiment si vous cherchez la meilleure ressource pour les ressources premium, je ne peux pas recommander et les éléments Watteau assez. J' ai aussi une chaîne YouTube, donc je finis par utiliser des ressources provenant d'éléments sous-marins tout le temps. J' utilise des ressources pour ces cours, c'est que vous pouvez voir, et je les utilise aussi pour mon entreprise. Donc, ils ont vraiment couvert toutes les bases et se rapportent qu'il n'y a pas de meilleure alternative deux et des éléments vitaux là-bas. Donc, fondamentalement, c'est un résumé pour cette vidéo. J' espère vraiment que j'ai tout couvert et j'espère vraiment que vous comprenez combien il est important de comprendre quels éléments vous utilisez. Donc, une fois de plus, si vous utilisez des objets gratuits, vous êtes vraiment limité avec tout ce que l'auteur et le designer d'origine vous a fourni, en particulier avec les photos. J' ai déjà expliqué que si vous utilisez des images premium, vous êtes couvert par la licence. Donc tu n'as pas à t'inquiéter que quelqu'un te poursuive. Vous êtes couvert par leur licence et vous pouvez toujours leur donner une licence à vos clients afin qu'ils soient également couverts. Dans la vidéo suivante, je vais vous montrer comment je finis par optimiser mes images, surtout celles que je suis en train de dialoguer à partir d' une devise éléments parce que comme je vous l'ai montré, Jarrod énorme. Alors vérifions ça. Peut-être que je peux cliquer sur celui-ci par exemple. Et vous pouvez voir qu'il fait 6 mille par 4 mille en hauteur et en largeur. Il est donc vraiment important d'optimiser ces images pour une utilisation, en particulier pour garder votre fichier Adobe XD aussi faible que possible, car ce sera alors plus facile pour votre ordinateur de travailler dessus. Et il sera plus facile de le partager avec vos développeurs et clients. Alors je te verrai là-bas. 38. Optimiser vos images: Donc, quand il s'agit d'utiliser vos images dans votre projet, comme je l'ai dit dans une vidéo précédente, il est vraiment important d'optimiser ces images. L' optimisation signifie vraiment que vous pouvez faire, vous pouvez utiliser cette même image, mais juste avec une taille de fichier plus petite, ce qui signifie alors que votre ordinateur ne va pas traîner. Votre fichier XD va être plus petit. Votre aperçu pour vos clients en ligne va être plus rapide car leur connexion Internet n'a pas à charger toutes ces images énormes. Et enfin, pour les développeurs, cela signifie que vous pouvez alors simplement leur envoyer ces images optimisées parce qu'ils doivent optimiser ces images aussi à la fin de la journée. Donc, si vous les optimisez, cela leur fera gagner du temps. Le diable charge pour ça. Le client va adorer pour cela parce que le projet va être en vie plus tôt. Donc j'utilise Windows et sous Windows, j'utilise un outil appelé une émeute. Et vous pouvez le voir ici. Cela signifie essentiellement un outil d'optimisation d'image radical. Et ce que cela signifie, c'est que l'utilisation de ces mêmes données d'image ne fait que les rendre plus petites. Donc, pour vous montrer dans l'exemple réel, ce sont les deux images, des images premium que j'ai téléchargées de la vidéo précédente. Voici donc celui que j'ai téléchargé pour 20-20. Et comme vous pouvez le voir, il fait 55 00 en hauteur et 3-6, 67 in, désolé, 55 00 en largeur et 3667 en hauteur. Donc, c'est presque 6K une image, et vous pouvez voir que sa taille est de 7,3 mégaoctets. Tout ce que vous devez faire est simplement glisser-déposer à l'intérieur de ce haut. Vous pouvez voir qu'il contient une image haute résolution. Arrivé peut gérer de telles images, mais le traitement peut être assez lent dans cette situation. Voulons-nous le redimensionner d'abord recommandé, les images originales ne seront pas modifiées. qui veut dire que ça va fondamentalement diminuer dans le pourcentage. Donc 100% garder les actes rapport d'aspect et vous pouvez appuyer sur OK. Vous pouvez voir ici, l'image initiale est de 7,3 mégaoctets. L' image optimisée est de 1,8 mégaoctets. Donc, vous pouvez voir à quel point c'était facile, quelle vitesse c'était, et combien de taille. Et cela nous a donné, vous pouvez voir que la qualité est fondamentalement inchangée. Et si je clique ici, encore une fois, 55 00 avec 3667, quand il clique sur Enregistrer, il va remplacer cette image. Et puis quand je clique une fois de plus, vous pouvez voir 55 003667731 en taille. Et fondamentalement, je dois maintenant le localiser où il est. Désolé, c'était sur mon bureau tout le temps. Je dois juste vérifier la partie pour le dossier. Mais quand je fais un rafraîchissement ici, vous pouvez voir 5000306, 6-7, mais maintenant 183, donc comme il est juste ici. Donc, fondamentalement, vous pouvez réduire toutes ces images massives, les rendre plus petites, améliorer la vitesse de votre Adobe XD, améliorer la vitesse de votre ordinateur parce que cela ne va pas traîner avec ces images énormes. Et fondamentalement ce que cela signifie va travailler beaucoup plus vite. Laissez-moi vous montrer un autre exemple. Donc, cet exemple est d'inviter deux éléments. Et vous pouvez voir 54723648. Voilà donc la résolution. Et vous pouvez voir la taille presque sept mégaoctets. Si un glisser-déposer à l'intérieur. Faites la même chose. Alors oui. D'accord. Vous pouvez voir l'image initiale était presque sept, optimisé. L'image est 1.32. Donc si je frappe sauver, alors rappelez-vous, presque sept mégaoctets. Faites un peu de rafraîchissement comme ça. Vous pouvez voir qu'il est maintenant 1.32. Encore une fois, les dimensions sont les mêmes. La résolution est la même. Le vient d'abaisser la taille du fichier global en compromettant tous ces pixels et en les composant et en les rendant plus petits dans l'image initiale. Donc, c'est essentiellement comme ça que fonctionne l'optimisation de l'image. Encore une fois, une émeute. C' est un outil gratuit. Je vais également le lier dans le PDF. Si vous utilisez Mac, vous pouvez utiliser quelque chose comme image optimale ou vous pouvez trouver outils d'optimisation d'image supplémentaires en ligne que vous devez payer. Mais l'image optimale était toujours libre et l'émeute était toujours libre sur Windows. Donc c'est fondamentalement tout pour cette vidéo. Dans la prochaine vidéo, nous allons commencer par importer le monde ces images dans nos designs. Je vais vous montrer comment vous pouvez optimiser davantage ces images en les rendant encore plus petites dans XD et comment vous pouvez ensuite les présenter à nos clients. Alors je te verrai là-bas. 39. Créer des conceptions 1: Allons maintenant de l'avant et commençons avec Dart conçu. Mais avant que nous ne le faisons et supposons regardé les deux vidéos précédentes sur les ressources, Permettez-moi juste d'ajouter une mise en garde rapide à cela, parce que la plupart des fois où vous concevez, le plus de temps qu'il vous faut en fait est de trouver ces ressources. Donc, pour trouver des images, pour trouver des icônes, et peu importe si vous utilisez des versions gratuites ou payantes. Vous allez toujours utiliser la majorité de votre temps pour trouver ces ressources. C' est pour ça que je te dis, organise-toi de cette façon. Il est donc beaucoup plus facile pour vous de trouver ces ressources. Donc, par exemple, si vous utilisez des ressources premium, voyons dans les éléments Watteau, alors, je vous recommande toujours, dans votre temps libre, explorer ces ressources et de voir où vous pouvez vous faire économiser beaucoup de temps. Fondamentalement, vous pouvez créer des collections lorsque vous trouvez des images pour des projets futurs, vous pouvez nommer des collections qui amélioreront votre vitesse la prochaine fois que vous commencerez avec le projet. Alors gardez juste toutes ces choses à l'esprit. Vous allez beaucoup utiliser votre temps en faisant des recherches et en trouvant ces ressources. Puis en fait la création du design. C' est à la fin de la journée, partie vraiment facile. Si le client dispose déjà de toutes ces ressources et que vous les utilisez simplement, alors c'est bon. C' est un rêve pour toi. Mais à la fin de la journée, ce n'est vraiment pas le cas dans la grande majorité du projet. Maintenant que c'est hors du chemin, si je vous ramène à notre dossier de projet, vous pouvez voir que nous avons une architecture de site Web. Nous avons des fils de papier, Nous avons un filaires de site Web, et nous avons un tableau de bord filaire à partir de laquelle nous allons construire plus tard quand nous arrivons à la partie de conception de la dette et la section de tableau de bord. Donc, pour commencer avec la conception de Dart, ce que je vais faire est de déplacer tout ça un peu. Laisse-moi rapidement déplacer les indies. Laisse-moi les déplacer, comme ça. Laissez-moi les sélectionner et voir que je peux en fait simplement sélectionner tous mes aéroports. Je ne sais pas pourquoi ça ne me donne pas l'option. Voyons voir, peut-être si je peux le sélectionner comme ça. Non. Je ne sais pas pourquoi. Ça ne me donne pas la possibilité de déplacer tous mes tableaux d'art. Tout d'un coup, nous voilà. Donc, vous devez utiliser Shift et vous devez cliquer sur ces noms afin de sélectionner tous vos aéroports et de les déplacer. Et la raison pour laquelle je l'ai fait est que si je reviens au mode design, maintenant nous allons copier, sont des tableaux basés ici. Et plus tard, nous allons faire du design responsive. Alors nous pouvons aussi baser des points vers le bas. Vous pouvez aussi faire, comme vous pouvez le voir, nous avons beaucoup d'espace vide juste ici. Vous pouvez les faire l'un à côté de l'autre. Donc, disons que je peux frapper le contrôle D dupliquer celui-ci, puis simplement le déplacer jusqu'ici. Ensuite, je peux créer mon design, créer mon tableau de bord ici, puis utiliser cet espace pour un design réactif. Donc, c'est vraiment à vous de décider comment vous voulez faire ça. Ce que je veux faire est en fait cliquer sur celui-ci. Donc, sur notre page d'accueil, maintenez mon Alt ou option, puis créez simplement un duplicata de celui-ci, positionnez-le ici, puis assurez-vous simplement que je le positionne un peu vers le bas. Je vais cliquer ici et appeler ce site. Conception. Alors maintenant que nous avons trois flux différents. N' oubliez pas une fois que vous pouvez partager ces trois flux avec vos clients qui peuvent partager des images filaires pour obtenir des commentaires. Vous pouvez partager le tableau de bord pour obtenir des commentaires. Et enfin, vous pouvez partager un site Web conçu pour les commentaires. Je vous expliquerai le partage plus tard. Et vous pouvez ensuite appliquer rétroactivement les connaissances que vous allez gagner de la part en suivant simplement ces leçons. Mais pour l'instant, je veux juste garder les choses simples et ne pas vous confondre davantage. Commençons donc avec la conception de notre site Web. Donc, si nous zoomons beaucoup plus près, vous pouvez voir à quoi ça ressemble. Et je vais renommer toutes ces pages aussi, design. Donc, nous aurons une conception de comptes de conception de page d'accueil et ainsi de suite et ainsi de suite. Juste parce que lorsque nous commencerons à connecter ces pages plus tard, ce sera beaucoup plus facile à comprendre pour nous. Ok, j'ai juste besoin de les connecter pour concevoir une abréviation à la fin. Alors commençons. La première chose que je vais faire est de travailler sur mon NAV principal. Et pour ce faire, je dois faire un zoom avant. Je vais cliquer dessus. Je vais l'ouvrir dans mon panneau Calques open end juste ici. Parce que maintenant je veux créer un composant à partir de ce nav principal. Mais avant de le faire, je veux travailler sur mon bouton de connexion parce que c'est fondamentalement très simple. Donc, pour créer un composant, tout ce que vous avez à faire est simplement d'appuyer sur la touche de contrôle ou de commande. Et vous pouvez voir qu'il affiche toujours comme un état par défaut. Ce que je voulais faire pour cela, c'est simplement créer un état Horus. Donc, je peux cliquer ici où il est dit ET état. Vous pouvez ajouter un nouvel état ou un état de survol. Je vais choisir le vol stationnaire, la qualité, le vol stationnaire. Et maintenant, sur May Horace, ce que je veux faire, c'est aller à l'intérieur. Cliquez ici pour l'ouvrir. Cliquez ici. Tout ce que je veux faire est simplement changé la couleur de mon bouton sur l'état de vol stationnaire. Donc, la façon dont vous pouvez le faire est fondamentalement deux choses. Ainsi, vous pouvez sélectionner une couleur ici, ou vous pouvez choisir d'autres couleurs et ainsi de suite et ainsi de suite. Vous pouvez également changer sa taille si vous voulez sur le survol, vous pouvez changer la couleur de ce texte et ainsi de suite et ainsi de suite. Je ne veux pas faire ça. Je veux garder les choses agréables et simples et j'utiliserai cet effet de vol stationnaire tout au long de mon désir juste pour garder perroquet, l'air organisé. Donc, si je vous ramène à l'aperçu cliquez ici. Et quand il ouvre mon aperçu, quand je survole, vous pouvez voir à quoi cela ressemble. Donc c'est vraiment sympa et simple, vraiment facile, et ça a l'air vraiment bon. Ok, alors maintenant, allons-y et revenons à notre sieste principale. Ce que je veux faire, tout d'abord, c'est créer un point d'appui pour mon logo. Le point de profondeur est essentiellement l'endroit où les utilisateurs vont finir par cliquer plus tard pour accéder à la page d'accueil. Donc, à partir de toutes ces vieilles pages, donc les comptes ont lancé des cartes et ainsi de suite. Si les gens veulent retourner à la page d'accueil, ils peuvent simplement cliquer ici. Mais au lieu de cliquer sur le logo lui-même, il va cliquer sur ces points de robinet invisibles. Alors donnons-lui un nom, un logo, un point DAP. Ce que je voulais faire est de supprimer la couleur, enlever la bordure, donc vous ne pouvez pas réellement le voir, mais il est toujours là parce que c'est l'obésité est à 100% et c'est seulement la fonctionnalité est fondamentalement le point d'adaptation. Et je vais le montrer un peu plus tard quand on commencera. Avec la création de tous ces éléments. Donc, nous allons maintenant créer un sélecteur. Et le sélecteur va descendre ici sur cette page du bas pour le compte. Donc, chaque fois qu'un utilisateur clique sur certaines de ces pages, le sélecteur va apparaître montrant que vous avez effectivement cliqué sur l'une de ces pages. Et pour ce faire, je vais utiliser un rectangle. Et je vais créer un rectangle comme celui-ci. Alors voyons. On peut lui donner 112 avec huit. Donc un rectangle vraiment intelligent comme ça. Et fondamentalement, je veux créer notre couleur principale. Alors je vais choisir et découvrir. Et voyons, pour le rayon de coin, je peux utiliser quelque chose comme cinq. Je pense que cela fonctionne bien sans aucune frontière. Je peux le positionner sur le bord inférieur comme ça. Et je peux aussi m'assurer que c'est la taille du texte lui-même, comme ça. Positionnez en dessous de tous nos articles, sélecteur de qualité. Et ce que je vais faire, c'est l'obésité. Alors frappe 02 fois comme ça. Et laissez-moi réduire un peu l'obésité de ma grille pour que vous puissiez la voir un peu mieux. Maintenant que nous avons tout cela, nous avons notre bouton, nous avons notre logo. Si je double-clique, vous pouvez voir que nous avons, ces deux états sont par défaut gris pour notre logo. Nous avons l'état Horace pour notre bouton. Maintenant, il est temps de créer notre navigation principale en tant que composant lui-même. Ainsi, vous pouvez sélectionner une clé de contrôle de la querelle pour créer un composant. Et ce que nous allons faire en fait, c'est créer des états différents. Donc, pour créer différents états, ce que je vais faire est de cliquer ici nouvel état et de l'appeler comptes. Donc, si nous pouvons voir sur l'état par défaut, nous n'avons rien sélectionné. Mais en raison, ce sélecteur va apparaître ici. Et nous allons en fait changer le nom du texte des comptes à cette couleur juste pour que nous puissions indiquer que cela est sélectionné si je l'emmène en plein écran. Donc vous pouvez voir à quoi ça ressemble. Vous pouvez voir que c'est beaucoup plus propre et c'est beaucoup plus évident maintenant que nous avons le sélecteur et cela a changé la couleur, que cela est effectivement sélectionné. Donc, nous pouvons maintenant passer à autre chose et revenir à ici. Je peux fermer ce clic pour ajouter un nouvel état. Et cet état va être appelé appartient. Et au lancement, ce que je vais faire, c'est que je peux simplement sélectionner ceci. Vous pouvez voir que cette couleur est sélectionnée. Donc 495463 pour tous, qui est cette couleur. Et si je vous ramène ici, vous verrez que nous sommes prêts. Donc maintenant, longtemps va être dans cette couleur et les comptes va être en découleur et maintenir le contrôle pour cliquer sur différents éléments. Et je vais aussi déplacer le sélecteur ici. Et je suis aussi réduit sa taille pour adapter mon texte de prêts. Donc, en gros, c'est comme ça que ça marche. Cliquez pour ajouter un nouvel état, appelez-le cartes. Et vous pouvez voir que fondamentalement c'est cet état répétitif, mais vous devez vraiment le faire. Et vous ne devez le faire qu'une seule fois, ce qui est génial. Et puis plus tard, quand vous commencerez à sélectionner tous ces états différents de la navigation neuronale, cela va être beaucoup plus simple et beaucoup plus propre. Cela va être investir. Alors sélectionnez nos investissements, utilisez cette carte de silice couleur, utilisez ceci et déplacez notre sélecteur deux ici et deux ici, sorte qu'il s'adapte vraiment bien. Et l'état final de notre navigation est numérique. Comme ça. Je vais sélectionner numérique. Allez ici, choisissez cette couleur, les investisseurs choisissent cette couleur. Déplacez ça ici, augmentez deux ici, et nous l'avons là. Nous avons terminé notre navigation principale. Donc si je change d'un État à l'autre ou me laisse fermer ceci pour que vous puissiez le voir un peu mieux. Donc, si vous allez à Default State vino avoir quoi que ce soit, des comptes, des prêts, des cartes, investir, et numérique. Nous allons commencer avec l'état par défaut évidemment. Et l'état par défaut va être situé sur la page d'accueil. Mais pour chacune de ces pages, il va changer entre toutes ces différentes pages, n noms. Donc, aujourd'hui, nous avons terminé cela. Passons à la section héros de notre site Web. Et je vais donner un nom à ça. Donc je vais appeler ça une nouvelle banque ou un nouvel âge comme ça. Et je vais aussi réorganiser un peu mon texte. Alors voyons. Je peux lui donner un espacement d'un tour par exemple, je pense que ça va bien marcher. Je vais être à 50 ans. Alors, décalez 1-2-3-4-5. Comme ça. Je vais copier et coller le texte ici. Et je garderai toujours ça. En savoir plus sur le bouton. Et voyons, il est à 60, va augmenter ça à 70, comme ça. Et voyons, en savoir plus de textes peuvent être 24 irréguliers et blancs. Et je vais aussi positionner ici. Et voyons voir pour notre bouton principal pour la connexion, je pense que ça va marcher très bien à 60 ans et oui, gardons-le à 60 parce que c'est un peu plus petit et ça va juste ici, mais c'est notre bouton principal. Il va être vu sur notre site Web. Alors gardons-le là pour l'instant. Voyons voir, nous pouvons positionner ce bouton à 50, et c'est à 50. Au lieu d'en savoir plus, je vais l'appeler bouton principal. Donc méchant BTM comme ça. Et ce que je vais aussi faire est de créer un composant. Alors appuyez sur la touche Contrôle, état par défaut, nous avons. Pas au lieu d'un nouvel état, faites un clic droit pour supprimer, je vais choisir l'état Horace, l' appeler survol, et essentiellement créer la même chose que j'ai fait pour le nav supérieur. Donc je vais juste utiliser dans cette couleur comme ça. Où revenir à l'aperçu de l'état par défaut, juste pour voir à quoi cela ressemble. Donc ici, nous avons un vol stationnaire, et ici nous avons aussi un vol stationnaire. Donc je pense que ça a l'air très bien. Ce que je vais faire ensuite pour ce texte est utilisé pile. Je le garde aussi comme ça et j'utilise la pile pour plus tard parce que ce sera beaucoup plus facile pour moi de travailler sur un design réactif. Je vais espacer cela un peu mieux d'ici à ici, sélectionnez ceci et le texte, assurez-vous que le texte est au centre. Supprimez ceci, et c'est fondamentalement tout. Maintenant, vous pouvez voir que tout commence à prendre forme. Tout a l'air beaucoup mieux maintenant. Et la prochaine chose, et la prochaine étape que je vais faire est essentiellement d'apporter une image. J' utilise une image PNG pour celle-ci. Donc, fondamentalement, c'est l'image des éléments invertibles. Et tout ce que j'ai fait, je suis allé à l'intérieur de Photoshop et j'ai coupé tous ces coins et je l'ai exporté en tant que B et G, ce qui signifie essentiellement que l'image n'a pas couleur de fond ou de forme d'arrière-plan dessus. Donc maintenant que je l'ai fait, ce que je peux faire est fondamentalement positionner comme je veux, peut-être quelque chose comme ça. Je pense que ça marche bien. Et vous pouvez déjà commencer à voir que nous avons maintenant ce design de site Web commence à prendre forme. Ce que je vais faire ensuite, c'est créer des formes. Donc, pour ce faire, je vais utiliser mon crayon, par exemple. Cliquez, cliquez sur, maintenez, puis cliquez par exemple ici, appuyez sur escape. Et ce que je vais faire est en fait choisir une couleur de chaudière de vert. Donc, je vais choisir cette couleur. Et j'augmenterai la taille de ma frontière à dix. Je vais aussi autour du camp. Donc c'est sympa et rond comme ça. Ainsi, vous pouvez voir à quoi cela ressemble et vous pouvez évidemment le repositionner où vous voulez. Je pense oser, ça a l'air bien pour le moment. On va le déplacer un peu plus tard. Je peux appeler ça une ligne ou une partie. Comme vous le voulez. Je vais évidemment positionner à l'intérieur de notre héros et je vais déplacer mon image derrière mes ponts, poser ceci, et je vais aussi déplacer ma ligne derrière le texte. La prochaine chose que nous allons faire est de créer un cercle. Et j'utiliserai quelque chose comme, je ne sais pas, 70 par 70 par 70 par exemple. Je pense que ça va bien marcher. Peut-être 80 par 80, juste pour nous donner un peu plus d'espace. Sans aucun champ. Je vais utiliser la même couleur pour notre frontière. Alors celle-là. Et pour la taille pavée utiliser dix. Donc, pour garder la même chose comme ce 11, dernière chose que je vais faire est d'utiliser ma chanson A line. Quand utiliser un rectangle, je veux créer une croix comme celle-ci. Je peux apporter cela dans dix et donnons-lui, par exemple, San Juan pas se marier à 15 avec 80. Je pense que ça va bien marcher. Je vais le faire tourner comme ça. Appuyez sur le contrôle D, retournez-le. Alors cliquez ici. Et je vais sélectionner ces deux, les fusionner, puis supprimer la bordure. Et pour la couleur de remplissage, je vais utiliser celle-ci. Et maintenant, je peux le retourner. Je peux le positionner où je veux. Et par exemple, je vais le garder ici tout en gardant le soi-disant petit peu plus bas. Et c'est juste la façon d'une banque d'être à temps avec ces conceptions minimales et démembrées et dessins et ainsi de suite. Donc maintenant, la dernière chose que je vais faire pour le héros est en fait d'ajouter une forme de fond. Et pour ajouter cette forme de fond, je vais en fait utiliser mon mental. Revenons à la ceinture des couches. Appelons cette croix. Ça s'appelle ce cercle. Et je vais regrouper tout ça, l' appeler un héros. Éléments. Positionné derrière mon texte. Et je vais cliquer ici. Ensuite, cliquez ici, et utilisez simplement mon outil de stylo pour créer cette forme de sol à partir d'ici, par exemple. Et il suffit de cliquer ici. Désolé pour ça. Mon téléphone est devenu fou pour une raison quelconque. Donc, vous cliquez ici, puis vous cliquez ici, puis vous pouvez étendre cela. Vous pouvez donc cliquer ici, peut-être ici, et ici. Ensuite, vous pouvez maintenir la touche Maj jusqu'à ce que cette ligne s'affiche, qui montre essentiellement que vous pouvez fermer et le disque en forme de ceci. Et vous pouvez évidemment jouer avec ceux-ci afin que vous puissiez cliquer ici, vous pouvez le réorganiser. Si vous double-cliquez dessus, vous allez obtenir cette partie externe. Donc, vous pouvez jouer avec elle encore plus comme ça. Et vous pouvez évidemment les repositionner comme vous le souhaitez. Vous pouvez modifier l'angle de ces points d'ancrage et les créer comme vous le souhaitez. Donc, dans ce cas, je vais juste baisser un peu. Peut-être positionnez cela ici. Parce que je ne veux pas qu'il bloque MyText parce que évidemment le texte est beaucoup plus important. Ensuite, cette forme d'arrière-plan que vous jouez avec. Et je peux également double-cliquer ici et positionner ceci ici, puis double-cliquer une fois de plus. Si je veux changer cette forme un peu plus loin afin que ce sceau comme ça. Et maintenant que j'ai fini de jouer avec, je peux évidemment positionner ici. Et c'est toujours un peu délicat avec ces formes parce que vous voulez toujours obtenir le meilleur résultat possible sans perdre trop de temps. Mais ça peut toujours devenir un peu plus délicat que tu ne le pensais. Enfin, ce que nous allons faire, c'est que je vais positionner ça juste un peu ici. Et comme vous pouvez le voir, nous avons ça bizarre. Forme. Donc, je vais double-cliquer sur ma part. Et je vais simplement le faire pour que je puisse connecter et créer distribué juste un peu mieux. Mais cela n'a vraiment pas d'importance parce que ce que nous allons utiliser est un gradient linéaire. Donc, pour notre gradient et quand choisir mes fesses et la charge restent sur le dessus pour l'instant. Ce que je vais faire est de supprimer la bordure, inclure le clic de remplissage ici. Au lieu de la couleur unie, je vais utiliser un dégradé linéaire. Et pour mon point le plus sombre, tu as vu qu'il est en bas. Je vais le faire tourner. Donc je vais à Marie le positionner comme ça. Et puis je vais bouger ça. Il joue des choses sur moi pour une raison quelconque. Mais incluons la couleur pour l'instant et puis nous pouvons jouer avec elle un peu plus tard. Donc, pour la couleur plus claire, je vais abaisser l'obésité à 0. Pour cette couleur plus foncée, je vais simplement sélectionner cette couleur. Et maintenant que nous avons notre gradient, nous pouvons évidemment lui donner un nom. Appelons ça Hiroshima, comme ça. Et je vais le déplacer juste en dessous de notre image pour que vous puissiez voir à quoi ça ressemble. Et si tu n'aimes pas la configuration du bureau, tu peux évidemment changer cette morbide. Et vous pouvez cliquer sur cette position et les organiser comme vous le souhaitez. Mais si tu n'aimes pas à quoi ça ressemble, tu peux évidemment Claire ici, alors tu peux repositionner ça et je ne sais pas pourquoi. Ça m'envoie jusqu'ici pour une raison quelconque. Mais évidemment, vous pouvez jouer avec eux et vous pouvez cliquer juste là et abaisser l'obésité de celui-ci. S' il pense qu'il fait trop sombre pour quelque chose comme ça, gardons-le à 40% comme ça. Et je pense que ça a l'air beaucoup mieux. Je n'aime toujours pas cette forme ici. Donc, si je clique sur mon héros, je vais me cacher l'image juste pour que je puisse y arriver. Je n'aime toujours pas comment ça s'est passé. Je pense que c'est mieux maintenant. Et tu peux toujours y retourner et le changer si tu ne l'aimes pas, et ainsi de suite. Donc c'est tout pour le héros. Une dernière chose que nous voulons faire est d'ajouter un cercle derrière eux. Et pour ajouter ce cercle, ce que je vais faire en fait, c'est utiliser mes lèvres pour maintenir la touche Maj. Créer ma position de cercle. C' est quelque part ici parce que je veux créer une sorte d' unité entre les utilisateurs et une banque. Et les jeunes sont concentrés ici. Alors positionne-toi par ici. Je l'appellerai Cercle Hero. Comme ça. Positionnez-le ici. Maintenant, pour cela, je vais enlever la frontière. J' inclurai la même couleur de remplissage. Et maintenant, nous allons jouer avec le flou de fond. Je vais donc cliquer sur mes options de flou d'arrière-plan. Je vais en donner 50 et en donner 50, en donner huit. Et maintenant, vous pouvez le voir juste là en arrière-plan, surtout si je les supprime. Donc il est vraiment, vraiment, vraiment, vraiment, vraiment tard, mais nous allons jouer avec encore plus. Alors voici notre cercle, nous l'avons juste ici. Ce que nous pouvons faire, c'est augmenter l'obésité. Alors gardons ça, voyons à dix heures, je pense que c'est bon. Peut-être 12. Oui, je suis content de ce résultat. Maintenant, ce que je vais faire ensuite, c'est dupliquer mon héros BG. Alors frappe le contrôle D. Je vais le positionner juste au-dessus de mon héros soi-disant. Je vais sélectionner les deux, appuyez sur Maj Control M ou Shift Command sur un Mac pour créer un masque. Et je l'appellerai musc. Et ce que cela fait est essentiellement masquer la partie inférieure de notre héros. Donc, quand vous cliquez sur le héros, vous pouvez voir à quoi cela ressemble. Vous pouvez évidemment apporter cette forme de héros encore plus si vous voulez simplement cliquer ici. Mais pour l'instant, laissons-le là. Et c'est fondamentalement tout. C'est notre image de héros terminée. Si vous cliquez ici pour l'aperçu, vous pouvez voir à quoi ressemble cet aperçu. Je pense que ça a l'air sympa. Passons maintenant à d'autres sections de notre site Web. Donc, pour cette surface, ce que nous allons faire, c'est que je vais réellement créer ce composant principal. Ensuite, nous allons passer à autre chose et le copier et le coller dans d'autres composants. Donc, ce que je vais faire en premier, c'est que je vais copier et coller le texte dans. Je suppose. Je vais utiliser la copie réelle que je vais utiliser de toute façon. Et ce que je vais faire, c'est inclure mon icône aussi. Donc je vais déposer mon icône ici. Et je vais le positionner 40 à partir de mes textos. Donc 1234, je vais supprimer cette icône d'étoile. Et je vais aussi en faire le composant principal, le rendre local. Donc, nous allons appeler ce contenu actuel, comme ça. Et ce que je vais faire ensuite, c'est créer essentiellement deux états. Ce que nous allons faire, c'est utiliser les formes de notre héros. Donc ces trois formes, et nous allons utiliser un cercle. Alors allons-y et cliquez sur notre héros. Utilise, voyons où ils sont. Eléments de héros. Je vais les copier tous les trois. Fermez tout ça. Zoomant ici, appuyez sur Contrôle V et je sauterai à l'intérieur et je les sélectionnerai tous. Positionnez-les au centre pour que vous puissiez les voir mieux. Ce que je vais faire, c'est positionner ma croix ici. Par exemple, positionnez ma ligne quelque part ici. Positionnez ce cercle quelque part par ici. Si vous appuyez sur le contrôle D pour dupliquer et augmenter la taille de celui-ci. Positionnez quelque part par ici. Et ce que je vais faire, c'est les appeler éléments. Je vais dupliquer le panier VG, positionner à l'intérieur de mes éléments et juste ici. Donc j'avais besoin d'être fondamentalement la même que nous l'avons fait avec la précédente. Donc je vais tenir Shift Control M à Mascotte, masque de qualité. Et ce que je vais faire, c'est pour tous ces éléments, je vais juste les faire attendre. Donc, je vais utiliser une bordure blanche pour la ligne d'une bordure blanche également utiliser. Et enfin, pour la croix, je vais simplement utiliser un collier blanc comme ça. Et c'est essentiellement ce que je vais faire. Tout d'abord, je vais les positionner ici à l'arrière-plan. Toucher 02 fois. Et j'ai fait tout ça. Donc maintenant, je peux créer un composant touche Contrôle pour la carte de contenu. Et je vais cliquer sur le nouvel état, qui est fondamentalement la couleur. Désolé, j'ai besoin de l'état du vol stationnaire, pas de la date des nouvelles. Donc je vais l'appeler « hover », comme ça. Et en vol stationnaire, ce que je vais faire est d'utiliser le chariot Vg et de le rendre cette couleur verte. Expliquez mes éléments. Et mais je vais baisser l'obésité d'entre eux. Alors voyons. Par exemple, je peux les Seigneur jusqu'à, voyons, je ne sais pas, 10, 20%. Voyons comment ça marche. Je pense que ça a l'air bien. Et ce que je vais aussi faire est de les repositionner un peu de cette année et NormDIS ici peut-être même faire tourner un peu et de se positionner. Je vais aussi utiliser cette icône. Et je vais cacher mes couleurs solides C où il, il plutôt ils sont. Alors voyons p sub t. J'ai juste besoin de voir où sont ces couleurs. Ils sont là. Alors je vais Laura descendre ça. Donc ce sont les couleurs des icônes comme ça. Et je vais aussi le déplacer vers le haut. Voyons, 12, non, dix pixels. Je pense que ça va marcher très bien. Maintenant, pour ces comptes personnels, je n'aime pas cette couleur, donc je vais la changer en couleur disque. Comme ça. Je vais changer une flèche apprendre plus ND. Et je vais aussi déplacer la flèche 20 pixels comme ça. Je pense que c'est tout. Nous allons laisser ce texte car il s'agit de cartes de contenu. Donc, c'est fondamentalement la même chose, va revenir à l'état par défaut. Vous pouvez voir à quoi ça ressemble. Et si on touche aperçu, faites défiler vers le bas. Si nous survolons, vous pouvez voir à quoi ça ressemble. C' est évident que ça va trop vite. Donc nous allons changer de dette et aller au prototype. Et ici, nous voyons déjà que nous avons planer ou d'animer est dans, dehors. Et donnons-lui une durée de 0,06 seconde. Retournez à la conception. Appuyez sur l'aperçu. Désolé, ça continue à se lancer sur mon autre écran. Donc, quand je survole, vous pouvez voir à quoi ça ressemble. Je n'aime toujours pas l'arrière-plan de ça. Donc, ce que je vais faire maintenant, c'est que je vais revenir à mon état par défaut. Je vais dupliquer la carte BG et l'appeler couleur ou couleur actuelle. Et je vais le donner dans cette couleur dans l'état par défaut, mais je vais abaisser l'obésité à 0%. Et maintenant, si nous allons à l'état stationnaire, il est toujours là. Ça va être à 100%. Mais une carte bg couleur va être cette couleur. Ou je peux simplement cliquer ici. Et ce que cela va faire, c'est que cela va nous permettre une transition bien meilleure. Donc, si nous survolons, vous pouvez voir à quel point c'est lisse maintenant. Et vous pouvez voir à quel point l'aération ressemble. Ce que je n'aime toujours pas, c'est ce nom, donc les comptes personnalisés dans ce cas, je veux qu'il soit décoloré afin qu'il ne change pas la couleur de cette façon. Donc, je vais aller à l'état par défaut cliquez ici, et je vais sélectionner cette couleur. Et faisons un dernier aperçu. Donc, quand vous faites défiler vers le bas, vous pouvez voir à quoi cela ressemble. Donc tout a l'air plutôt sympa. Maintenant, ce que je vais faire est en fait dupliqué cette carte de contenu pour que je continue et faire ces éléments. Alors, comment puis-je faire ça ? Je peux simplement cliquer ici, supprimer celui-ci, cliquer ici et supprimer celui-ci. Et je peux créer des composants enfants supplémentaires. Je peux maintenir mon ancienne file d'attente, cliquer et faire glisser pour en faire une copie. Et je peux également maintenir Alt et faire glisser pour créer une autre copie comme celle-ci. Et maintenant je peux aller de l'avant et changer ça, mais avant que je le fasse, je veux juste les commander. Et vous pouvez voir que c'est le composant principal et le diamant est plein. Eh bien, ces deux-là sont tendus et vous pouvez les voir ici aussi. Et ce sont des composants enfants. Donc, tout d'abord, modifions certains textes de sorte que vous devez changer le texte sur les deux composants principaux, désolé, à bord de l'état par défaut et de l'état de vol stationnaire. Je vais donc le changer ici. Revenez à l'état par défaut et double-cliquez pour le coller. J' irai dans l'État d'Horace, là aussi. Et permettez-moi d'aller rapidement de l'avant et de changer le texte de ce tour un. Comme ça. Je vais aller de l'avant à la dette basée sur l'état d'horreur et voyons, je bricoleur ne l'ai pas collé pour une raison quelconque. Oui. Comme ça. Ça a l'air super. Et enfin, je vais choisir ça pour mon état d'horreur. Et maintenant, enfin, je peux revenir en arrière et changer les icônes pour celles-ci. Donc, pour le faire encore une fois, ce que vous pouvez faire est d'utiliser vos icônes pour que je puisse copier et coller mon icône à partir de mon document d'origine ici. Je vais le mettre en place. Solveur juste ici pour que vous puissiez voir qu'il est 40. Je vais supprimer l'original et je vais cliquer avec le bouton droit de la souris. Et désolé, pas ici, mais ici. Cliquez avec le bouton droit sur Faire Et ce que je peux aussi faire, c'est en sélectionner un autre pour notre troisième. Pour que je puisse l'ouvrir. Positionnez-le en place. Comme ça. Voyons jusqu'où nous en sommes. Sélectionnez ces outils, assurez-vous qu'ils sont alignés. Supprime l'original, or retour ici, clic droit peut Klocal. Et maintenant ce que je peux faire, c'est jouer avec eux. Donc, je peux cliquer sur celui-ci, aller au vol stationnaire. Mais avant de le faire, je peux cliquer juste là et copier mon icône. Ensuite, allez au vol stationnaire. ouvrant sur la base du kit, positionnez-le à la même position. Supprimé l'original, puis allez juste ici et localisez ma couleur. Alors laissez-moi voir rapidement, c'est un problème avec non seulement cette icône de retour, mais avec la majorité de tous ces éléments, vous allez finir utiliser une ligne est que les gens ne nomment pas leurs articles comme ils le devraient. Et c'est pourquoi j'aime vraiment nommer tous mes objets. Donc pas seulement moi, mais tous les autres designers. Et vous pouvez voir que dans nos produits que nous vendons sur web donut.net, vous pouvez voir que nous avons toujours ou tous nos articles nommés, toutes les couches impaires nommées ainsi de suite. gens puissent les trouver et les organiser de la manière qu'ils veulent. Enfin, ce que je veux faire est de double-cliquer ici, appelez ça des services sur mesure juste pour lui donner une épice. Et maintenant, nous pouvons frapper aperçu, juste voir où nous sommes en ce moment. Donc nous avons plané ici, planer ici nous avons cette belle forme de fond avec un cercle, un beau couple. Et vous pouvez voir quand je commence à planer, quoi ça ressemble. Assurez-vous juste que votre texte est là. Et ça marche avec ça. Donc c'est fondamentalement tout pour cette section. Nous avons terminé le travail de connaissance de cette section sur cette section. Donc, si nous zoomons juste un peu et vous pouvez voir cette section ici. Et tout ce que je voulais faire ici, c'est importer mon image. Donc, je peux utiliser une image comme celle-ci. Peut-être, voyons, peut-être que je peux double-cliquer et le positionner juste un peu sur le côté. Et vous pouvez toujours, ils cliqueront sur Maj enfoncée, Alt et cliquez avec le bouton gauche pour l'augmenter. Si vous le souhaitez, vous pouvez maintenir la touche Maj enfoncée et le clic gauche pour l'augmenter d'un côté, quel que soit le côté souhaité. Et vous pouvez toujours, comme je l'ai dit, Maj vieux et clic gauche pour l'augmenter de tous les côtés. Et vous pouvez également le déplacer à gauche et à droite comme vous le souhaitez. Donc, pour le texte lui-même, laissez-moi le copier. Ça va s'appeler festival de la semaine de la jeunesse. Et voyons, je vais donner ça ici. Et la dernière chose que je vais faire est d'enlever ce bouton. Parce que maintenant nous avons notre bouton ici. Je vais l'apporter d'ici. Ou vous pouvez également aller à la section héros et l'utiliser à partir de là. Alors allez aux textos, bouton méchant, touche Contrôle C. Retournez ici, il contrôlerait V. Et vous pouvez voir que c'est un élément enfant. Donc ce que je vais faire est positionné à 40. Assurez-vous que c'est 40. Donc, ce que je vais faire est simplement positionner dans le centre et appeler ça un jour. Je peux également regrouper ces textes de couleur. Et je peux également créer une pile juste pour que je puisse plus tard travailler sur ce sujet en tant que responsive. Comme je l'ai dit, si vous voulez le changer, vous pouvez simplement le faire en un seul clic. Ensuite, passons à autre chose et travaillons sur ceux-ci. Donc, fondamentalement, ceux-ci ici sont assez simples et assez similaires. Tout ce que j'ai fait, c'est que j'ai créé notre composant à partir de l'un d' eux, puis j'en ai créé un autre ici. Donc, vous n'avez pas besoin de créer le composant si vous ne voulez pas. Mais je voulais simplement en créer un parce que je trouve que ça va être beaucoup plus facile à adapter aux composants. Et vous pouvez toujours créer différents états pour ce composant, pour les récits réactifs, par exemple. C' est là que cela est utile. Donc je vais repositionner ça ici. Cliquez sur, supprimez celui-ci. Et je vais aussi sauter ici et supprimer et le bouton de bureau enfant Contrôle V pris en fonction de notre bouton amine, que nous venons de créer médecin à 40, donc 1234. Et ce que je vais faire est d'appuyer sur la touche Contrôle pour créer un composant nommé Big card. Je vais bouger ça un peu et une tour sur mon image tout d'abord. Donc, je vais glisser et déposer mon image à l'intérieur. Double-cliquez, maintenez la touche Maj enfoncée pour la positionner en place comme ce décalage, les dix clics gauche peuvent être positionnés ici comme ça. Et enfin, je peux apporter ma vraie copie à l'intérieur comme ça. Et maintenant que c'est terminé, ce que je peux faire, c'est simplement tenir Alt et en faire une copie positionnée juste ici. Ouvrez-le et je vais faire glisser et déposer une nouvelle image à l'intérieur. Je vais également copier et coller du texte, qui va y aller comme ça. Et maintenant cette étape est terminée. Donc, si je clique ici, on a testé tout ça. Donc, cela fonctionne gentil et simple. Vous pouvez voir que cet effet de survol fonctionne également. Cela fonctionne, et cela fonctionne. Donc, nous avons le même effet de vol stationnaire partout. C' est pourquoi nous l'avons créé afin de pouvoir l'utiliser encore et encore tout au long de notre conception. Donc, enfin, ce que nous pouvons faire est de créer de nouveaux composants pour ce dernier état. Et ce que je vais faire, c'est sauter à l'intérieur et faire la même chose. Donc, je vais supprimer ceux-ci. Je vais sauter ici et appuyer sur la touche Contrôle pour le créer en tant que composant. Et je vais simplement ajouter ce texte ici. Alors voyons. La seule chose que je veux vraiment faire est de créer un vol stationnaire et de déplacer cette flèche. Donc, allons vraiment annuler ça. Alors appuyez sur Control Z. et ajoutons d'abord les informations que nous avons ici. Donc, je vais glisser et déposer mon image à l'intérieur. Je vais lui donner un nom de texte. Comme ça. Date peut rester comme il est basé descente flou plus, peut rester où il est. C' est fondamentalement ça. Et maintenant je peux aller de l'avant et créer un domaine d'horreur qui contrôlerait la clé de mon état d'horreur, que je vais appeler hover. Évidemment, la seule chose que je veux faire est essentiellement bouger ma flèche. Donc, décalez 12k, et c'est fondamentalement tout. Donc la prochaine Im va faire est de frapper Alt position ici. Alt positionner ceci ici. Et maintenant, nous devons éditer ces pour les composants principaux ainsi que pour le canapé signifie date, ainsi que la Floride heuristique comme ceci. Et ça. Et apprenez-en plus parce que nous sommes en vol stationnaire. Voyons voir, je peux apporter ça, sonner ma nouvelle image. Donc, ce que je peux faire, c'est sélectionner tout ça qu'elle contrôlerait. Donc, vous revenez à mon état par défaut, sélectionnez tout et supprimez. Il contrôlait V et les positionnait guérir. Donc maintenant, quand je passe entre mon vol stationnaire et par défaut, l'aération semble comme il se doit. Maintenant, allons à notre troisième et organisons ça un peu. Donc discipliné pour être la carte trois, voiture et une, et ça va être une carte pour évidemment aimer ça. Donc, sur la voiture trois et amenons cela à un état par défaut. Sur la carte 3. Ce que je peux faire, c'est changer cette image. Je vais changer ce texte, changer dans ce texte, changer ce texte. Et enfin, sur l'état d'horreur, continuons d'abord et copions ça. Accédez à l'état par défaut. Supprimer et coller. Et maintenant, nous allons basculer entre l'état Horace et l'édition d'état par défaut reste exactement le même. Donc, nous sommes à notre état ici, l'état ici. Et c'est fondamentalement tout. Je ne vais pas travailler sur un pied de page pour l'instant. Je vais le laisser tel qu'il est pour l'instant parce que je vais vous le montrer un peu plus tard. Lorsque nous arrivons à ces pages, comment vous pouvez travailler dessus et comment vous pouvez le modifier. Ensuite, vous pouvez créer un composant à n'importe quel stade de la conception, puis y revenir et y travailler. Mais pour l'instant, cliquez sur Aperçu pour voir ce que nous avons fait jusqu'à présent. Donc, une fois de plus, nous avons un login. Nous en avons appris plus ici. Nous avons des effets de vol stationnaire ici, regardant très bien lentement. Nous avons ceci ici, que nous allons créer en tant que groupe scrollable plus tard. Et on a laissé la date ici. Donc je vais y revenir juste après cet aperçu. En savoir plus. Alors qu'est-ce qui fonctionne très bien ? Comme vous pouvez le voir à quel point la puissance est vraiment agréable et déclenche parce que nous n'avons pas besoin de quelque chose de fantaisie ici. Parce que juste cette flèche bouge. Une dernière chose. Allons-y et modifions cette date. Donc, pour changer cette date, la seule chose que je veux faire est essentiellement copier et coller le texte d'ici à ma date et à mes habitudes laitières. Nous avons donc terminé la conception de notre site Web. J' espère vraiment que vous avez aimé ça. Désolé, le tutoriel a continué un peu et c'est un 40. Créer des designs 2: Revenons maintenant à la conception et avant passer à la vitesse du compte atteint la page suivante, je voulais juste faire un changement rapide ici. Donc, si je sélectionne ma navigation, ce qui est mon moyen. Maintenant, juste ici, je peux cliquer sur ce bouton ici, qui dit position fixe lors du défilement, qui signifie essentiellement que lorsque les utilisateurs défilent vers le bas, cette navigation restera épinglée à cette position. Donc, si je clique ici, cliquez ici pour afficher un aperçu de mon site Web. Vous pouvez voir que lorsque je commence à défiler, mon navigation reste ici en haut et rien ne change. Mais quand je clique sur la droite et l'erreur. Donc ici, position fixe lors du défilement. Cliquez ensuite sur et prévisualisez-le une fois de plus. Vous pouvez voir que quand je commence à faire défiler, mon NAV va rester juste là. Et parce que nous avons inclus dans cet effet de flou sur l'arrière-plan, vous pouvez clairement voir quelle différence cela fait parce qu'il montre simplement qu'avec toutes ces interactions et le bluer reste fondamentalement le même et reste mis. Et vous pouvez clairement voir qu'il y a des informations sur l'arrière-plan, mais vous pouvez toujours voir tous ces éléments de navigation. Vous pouvez voir ce bouton, vous pouvez clairement voir le logo et ainsi de suite et ainsi de suite. Donc j'aime vraiment comment ça ressemble. N nous allons courir avec et nous allons le laisser tel qu'il est là. Donc la prochaine chose que nous allons faire ici, c'est que je vais vraiment cliquer ici. Et je vais tenir mon ancienne clé ou Option. Je vais positionner cette copie ici. Plus avec l'endroit. Et vous pouvez toujours retourner ici et voir la distance que vous avez. Donc c'est 70. Donc, nous pouvons avoir une belle distance pour le design et les filaires. Donc 70, et nous allons faire la même chose. Donc, la conception de la page d'accueil va être la conception de comptes comme ça. Et la première chose que nous allons faire est de copier ce NAV. Alors appuyez sur Contrôle C et supprimez celui-ci, contrôle V, parce que je vais l'utiliser tout au long de ma conception. Maintenant. La prochaine chose que nous allons faire est en fait copier mon image de héros. Alors appuyez sur Control-C. Supprimez ces anciens. Vous contrôlez V et positionnez-le juste en dessous de mon NAV principal. Et la raison pour laquelle je l'ai fait c'est parce que maintenant nous avons dans ce graphique, nous avons cette illustration, et nous allons juste déplacer notre texte et remplacer la position que ceux-ci. Alors allons-y et faisons-le. Je vais sélectionner mon texte et le positionner ou juste ici. Alors assure-toi qu'il est juste là. Voyons donc 245 colonnes. Et ce que je vais faire est de supprimer cette image parce que je vais apporter ma nouvelle image dans. Et je vais l'amener quelque part par ici. Ici, c'est. Donc, une fois de plus, c'est à partir d'éléments invertibles. L' image est l'image premium. Et je viens d'utiliser Adobe Photoshop pour couper l'arrière-plan de mon image. Donc je vais positionner qu'il est quelque part par ici, disons quelque chose comme ça. Et je vais aussi retourner mon masque. Donc dans quelque chose comme ça. Ensuite, je vais sauter à l'intérieur et repositionner peut héros cercle. Donc ces deux personnes sont au centre de mon cercle. Donc peut-être quelque chose comme ça. Ouais, je pense que ça marche bien. Je vais également retourner mes formes de héros sont simplement cliquez ici. Et puis repositionnez-le aussi. Je peux plus avec quelque part ici parce que je ne veux pas qu'il cache mon bouton à ce stade. Je vais aussi retourner mon héros Elements et les réorganiser un peu. Donc quelque chose comme ça, je pense que ça va bien marcher. Double-cliquez pour sauter à l'intérieur, puis double-cliquez pour repositionner DES. Et je vais aussi déplacer mon image ici afin que je puisse l'ajouter et les repositionner autour. Finalement déplacé celui-ci ici. Et je pense que ça marche très bien. Ce que je vais faire un Finalement, c'est que je vais donner à mes textes l'espace de six. Donc 1-2-3, 4-5-6 colonnes. Je vais l'amener ici. Et puis je sauterai à l'intérieur et je l'ajouterai à mes moutons. Je vais donc positionner celui-ci ici, peut-être juste ici. Ou encore mieux, je peux simplement déplacer celui-ci. Déplacez celui-ci. Voyons voir, peut-être qu'il peut encore couper le total de mon bouton. Donc quelque chose comme un disque peut-être. Ici. Il suffit de le baisser un peu afin que nous puissions éviter le texte autant que possible. Et puis je peux passer à la prochaine et tout simplement réorganiser celui-ci un peu. Je peux même cliquer sur celui-ci et le repositionner ici. Et comme il l'a dit plusieurs fois, vous pouvez toujours sauter en arrière et réorganiser ces, ces formes que vous voulez. Nous pouvons peut-être aussi le faire. Ouais, je pense que ça marche beaucoup mieux. Je vais double-cliquer ici à une position et ici, et c'est essentiellement tout pour notre section héros. Je peux simplement le fermer, puis passer à ces autres sections. Donc, ce que je vais faire ensuite est en fait utilisé quelques icônes ici. Donc vous pouvez le voir parce que commencer à comptabiliser un compte, Melanie, et ainsi de suite, ainsi de suite. Donc, je vais passer à mon ouvrir votre compte, ou appelons cette section comptes parce qu'il va contenir des comptes différents. Donc, je vais juste sauter à l'intérieur et coller ma séquence dans l'AR survenu. Et je vais juste les positionner vers le bas. Donc, la viande ici avec ces icônes de fond, voyons 1234. Peut-être. Voyons peut-être te voir dans un peu plus de pneumonie. Et 40 pixels plus haut. Je pense que ça marche très bien. Et puis ce que je vais faire comme je le fais toujours, il suffit de revenir à vos actifs et nous voulons faire tous et juste notre composante locale. Donc MC, local, local, simple clic droit et cliquez sur Faire local, sautez en arrière. Et maintenant, je vais les inclure à leur place. Donc, pour chacun d'entre eux, je veux le mettre à sa place. Alors voyons. Nous avons ce compte Start. Je vais le positionner ici et supprimer l'icône d'étoile pour un compte. Je vais le mettre ici et faire la même chose. compte millénaire a mis un remède, presque celui-là. Et enfin, compte premium et supprimé celui-ci. Une fois de plus, toutes ces icônes proviennent d'éléments invertibles. Maintenant, je vais inclure ma couleur juste pour que vous puissiez voir à quoi ressemble celle-là. Et ce que je vais faire est en fait de créer le composant principal. Et je vais dupliquer cette section d'informations et la mettre à l'intérieur de tout ça. Alors faisons ça maintenant. Je vais faire quatre copies au total. Et je vais ouvrir mon compte Start et faire glisser et positionner ceci dans. Et voyons, je vais appeler ce sélecteur, ce contexte. Et je vais les renommer tous. Donc on n'a pas ce syndicat. On sait quoi ? Il l'est. Double-cliquez simplement et basé sur votre nom là. Maintenant que nous avons cette section info, je peux la cacher complètement. Je vais faire glisser et positionner une autre intersection sur le compte étranger. Glissez et positionnez un autre sur mon compte millénaire. Et enfin dans glisser et un repositionner ceci à mon compte premium. Je vais maintenant afficher mon compte Démarrer. Et je vais commencer par inclure les vraies informations ici. Donc, double-cliquez à l'intérieur et la position, tout cela comme ça. Et je vais aussi sauter à l'intérieur d'ici et sauter à l'intérieur de mon texte. Bouton Ctrl-C sur le domaine. Cliquez ici. Je vais donc fermer mon icône et cliquer sur la position My Info. Et voyons ce que c'est. Bouton moyen, maintenez votre flèche majuscule et bas pour que vous puissiez le placer en position comme celle-ci. Je vais le positionner juste là et voyons. Donc, nous sommes à 40 ans, ce qui est très bien. Et je vais simplement supprimer celui-ci. Et je vais changer ce texte pour s'appliquer comme ça. Et je vais double-cliquer, appuyer sur le contrôle C pour copier ce texte. Parce que quand je passe au vol stationnaire, vous pouvez voir qu'il dit toujours en savoir plus. Donc, je dois le changer pour s'appliquer maintenant à cette instance particulière. Donc une fois de plus, si je vous ramène ici, vous pouvez voir le Maine et le bouton original dit toujours en savoir plus. Et toutes ces instances disent toujours en savoir plus. Mais ici, il dit appliqué. Maintenant. Maintenant encore une fois, cette page réelle va être assez facile parce que, comme je l'ai dit dans la session filaire, nous allons l'ajouter, juste radié cette partie médiane et ceci, et cela va rester le même. Mais nous allons enfin commencer par le pied de page parce que maintenant nous avons nos comptes et je vais vous montrer comment vous pouvez modifier le pied de page et apporter les modifications pour refléter votre conception. Alors commençons par ça. Comme je l'ai dit, nous avons un bouton principal du bras, nous avons l'état d'horreur terminé. Donc je vais juste faire le contrôle C pour le copier. Je vais me cacher, commencer à compter. Afficher le saut de compte étranger à l'intérieur de l'info hit Control V va être exactement au même endroit. Il suffit de le remuer. Si nous vérifions, vous pouvez voir qu'il est aligné à gauche sur la grille et qu'il est de 40 pixels de la discipline. Masquer pour un compte, ouvrir un compte millénaire, aller à l'info et faire la même chose. Donc, une fois de plus, nous sommes à 40, mais simplement positionnement et vers le bas. Et enfin, faisons la même chose pour un compte premium. Alors supprimez ce contrôle V. Vérifions. Et je fais toujours ces vérifications juste pour m'assurer que quand je commence à travailler, tout est beau et propre et tout fonctionne comme il se doit. Maintenant, nous allons sauter à l'intérieur de cette image et je vais faire glisser et déposer mon image à l'intérieur en position à leur similaire. Donc je vais double-cliquer sur Hall ma touche Maj, ma touche Alt juste pour augmenter ce gars un peu vieux, le positionner au centre, quelque chose comme ça. Et fondamentalement c'est tout pour le compte Start. Avant de passer à différentes sections de ceci, modifions simplement ce texte. Donc ça va dire Ouvrez votre parfait, comme ça. Donc nous allons juste lui donner juste un peu plus, voyons, une sensation différente. Donc, il semble un peu plus convivial de cette façon que simplement ouvrir votre compte. Il ressemble à l'ordre. Allons donc au compte étranger et changeons son nom aussi. Donc, je vais double-cliquer ici. Ce que nous avons appliqué maintenant decks, ce qui est très bien. Et je vais double-cliquer à l'intérieur de mon fichier principal, copier et coller ces informations dans. Je vais également faire glisser et déposer mon image à l'intérieur. Et voyons. Je pense que c'est bien, mais ils peuvent toujours l'augmenter un peu comme ça, juste pour mettre ces gars plus au point. Maintenant que c'est terminé, je peux cacher cette section et je peux toujours aller à la section millénaire, ouvrir ça. Et voyons. Je peux maintenant bien copier et coller mes informations d'origine. Je ferai la même chose pour le texte. Je vais simplement faire glisser et déposer mon image à l'intérieur comme ceci. Et je peux toujours double-cliquer et agrandir cette image juste un peu, juste pour qu'on puisse la mettre au point un peu mieux comme ça. Et au lieu de commencer compte, il devrait dire compte millénaire, comme ça. Et voyons. Je dois changer ce texte aussi, donc il écrit, il correspond mieux à ce compte réel. Bon, maintenant que j'ai collé ce texte, laissez-moi rapidement vérifier avec un compte étranger. Je ne sais pas ce qui s'est vraiment passé, mais il y a évidemment un problème ici. Donc, je vais rapidement zoomer et retaper tout cela car il utilise le même texte pour le début. Le comte. Comme vous pouvez le voir, le texte ne change pas ici. Donc, je vais mettre la vidéo en pause ou ici très rapidement et puis retaper tout cela. Ok, et maintenant que j'ai terminé, papa, laisse-moi revenir vérifier ces autres. Nous avons donc un nouveau départ bancaire pour compter pour un compte, un compte Millennials. Et enfin, traitons de ce compte premium. Alors voyons. Tout ce dont nous avons besoin ici, c'est de taper un paquet premium. Alors ce que je vais utiliser est plus premium, donc sorte de l'image. Donc, dans ces deux personnes sont fondamentalement des jeunes gens d'affaires que je pense que cela fonctionne bien. Tout d'abord, je vais devoir me laisser vérifier rapidement avec tous ces conservateurs. Donc net, euh, maintenant que j'ai copié et ce texte, ce que nous devons faire est essentiellement de créer un composant. Alors, sautons de l'avant et commençons par ce premier. Donc, je vais créer un composant pour cela ici. Et le premier compte qui va être affiché commence à compter parce que c'est leur compte de base et il sera affiché et comme option par défaut, si vous voulez, pour les gens qui viennent juste à cette banque. Donc je vais appuyer sur la touche Contrôle. Et ça va être notre état par défaut. Et à l'intérieur de l'état par défaut, faisons rapidement quelque chose de différent. Donc, je vais en fait plus d'état par défaut cacher toutes ces informations ci-dessous. Donc, ce que vous pouvez faire rapidement est d'ouvrir tous les dossiers, de choisir des informations sur tous d'entre eux. Comme ça, en utilisant votre clé de contrôle et simplement la duplicité Laura vers le bas. Et c'est essentiellement notre état par défaut. C' est près de ça. Maintenant, ajoutons un autre état. Et cela va s'appeler le compte Démarrer. Donc, je suis juste en train de créer cet état par défaut. Vous pouvez voir que nous avons cet espace vide et évidemment encoder question calme va être juste ici. Donc, si je vous montre que cela va être comme dans le code. Et puis lorsque les utilisateurs cliquent sur. Par exemple, sur le compte de démarrage, qui est ce que nous traitons en ce moment, les informations pour le compte de stockage vont apparaître comme ceci et ces informations de fond vont être poussées vers le bas. Maintenant, parce que ce compte est réellement sélectionné. Jouons avec l'icône. Donc, j'ai la couleur et je l'ai décrit. Donc, je vais simplement abaisser l'obésité de ma couleur vers le bas pour indiquer que cela est cliqué. Donc vous avez simplement abaissé l'obésité comme ça. Maintenant que nous avons terminé cela, nous pouvons passer au compte étranger. Alors cliquez ici, nouvel état du nombre de fluor. Et on va faire la même chose. Alors sautez à l'intérieur du début du compte. On va ramener la couleur. On va cacher les infos sur le disque. On va aller sur le compte à l'étranger. Haute la couleur de celui-ci et montrer D pour fermer tout cela. Dans un autre état. Ça va s'appeler « Comte millénaire ». Et en gros, vous voyez ce qui arrive. On va faire la même chose ici aussi. Alors cachez ça, montrez ça, retournez à votre compte 400. Montre ça, et cache ça. Et enfin, créons un pour le forfait premium aussi. Comme ça. Et je sauterai à l'intérieur du compte millénaire. Je vais montrer cette hauteur, cette hauteur, ça. Et je vais enfin montrer ça. Et c'est fondamentalement tout. Maintenant, ce que nous pouvons faire est de taper entre eux pour que nous puissions les animer. Donc, sur l'état par défaut, ce que nous devons faire est en fait utiliser dans ce, qui est notre sélecteur comme un sélecteur de moyenne. Alors faisons le prototype. Cliquez simplement sur votre onglet de prototypage, double-cliquez à l'intérieur pour choisir le sélecteur, puis cliquez simplement sur. Et ce que nous allons utiliser un pas. On va utiliser Auto Animate. Nous allons utiliser est in, out et utilisons 0.4 seconde. Je pense que ça marche bien. Donc, si je vous ramène une fois de plus, vous pouvez voir que nous sommes à l'état par défaut. Donc, à cet état, rien n'est encore ouvert. Donc, une fois de plus, rien n'est ouvert, tout est fermé. Et si vous vous souvenez, j'ai mentionné que l'encodage, cette section des questions courantes va revenir au sommet. Et ça va être quelque part par ici. Mais parce que nous ne pouvons pas le montrer pour le moment dans Adobe XD, parce qu'il ne peut toujours pas être en direct, disons alors que nous pouvons faire quelque chose comme ça. Donc, je vais vous montrer à l'intérieur de la conception, le premier compte qui va être ouvert et montré est commencer le compte toujours. Revenons au prototypage. Comme je l'ai dit, nous l'avons choisi. Donc, une fois de plus, nous sommes à l'état par défaut. Donc, je vais double-cliquer ici, appuyez ou pour animer easy and out 0.4 seconds. Et vous pouvez choisir la destination, qui va nous conduire à l'état, qui est le compte de démarrage. Et vous l'obtiendrez comme un but le long. Donc double-cliquez ici. Cliquer va avoir toutes les mêmes informations. Donc, appuyez sur les ennemis auto, facile, pas 0.4. et dans ce cas, nous allons aller à compte étranger. Fermez ce clic. On va aller au compte Millennial. Et enfin, cliquez sur, vous allez aller au forfait premium. Maintenant, nous devons faire la même chose, mais avec le compte de démarrage. Donc, vous remarquerez que le compte de démarrage est ouvert. Donc, ce qu'il faut faire, c'est que je clique sur le compte des étrangers et fasse la même chose. Adobe XD conserve tous ces paramètres, alors ne vous inquiétez pas pour eux. La seule chose que vous avez vraiment à faire est simplement de cliquer entre tous ces éléments. Et encore une fois, parce que je parle, ça me prend beaucoup plus de temps qu'il ne le devrait. Mais quand vous ne parlez pas, quand vous êtes concentré, cela ne prend que quelques secondes. Alors commencez le compte. Ça va être un compte millénaire. Ce sera un forfait Premium, comme ça. Et enfin, je vais fermer tout ça. Nous sommes à l'étranger. Cliquez sur le millénium, faites la même chose. Alors commencez la prime étrangère. Je vais fermer tout ça. Et enfin, nous sommes au forfait premium. Ça va commencer à l'étranger. Et enfin millénaire et laitière. Comment cela, nous avons terminé cela. Tu peux y retourner et regarder l'horodatage, mais je ne pense pas que ça m'a pris plus qu'une minute ou deux. Donc, comme je l'ai dit, nous allons commencer par le compte de démarrage. C' est donc ce qui va être montré au début. Et si je vous ramène à l'aperçu, cliquez ici. Quand ça s'ouvrira, laisse-moi l'amener ici. Encore une fois, nous avons ces effets de vol stationnaire lorsque nous commençons à faire défiler, cette navigation défile avec nous. Et nous l'avons ici. Nous avons donc notre début à compter pour un compte millénaire et premium. Quand il clique sur étranger, Vous pouvez voir qu'il change et bascule entre tous ces. Et vous pouvez voir à quel point cette transition est agréable et subtile entre les icônes colorées et celles sans aucune couleur sur elles. Donc, comme je l'ai dit, nous allons garder le départ le compte, et vous pouvez sauter entre eux. Donc, du début à la prime et ainsi de suite. Et vous pouvez voir que cela change bien l'application de nos œuvres, mais cela ne fonctionne pas ici. Donc ça ne marche pas sur ces états intérieurs. Je ne sais vraiment pas quel est le cas. J' ai également contacté le support XD. Donc, vous pouvez voir sur ce premier cela fonctionne, mais sur ces autres, cela ne fonctionne pas. Donc, si vous savez quel est le problème, faites-le moi savoir et je ferai une mise à jour ou si je comprends le problème, je ferai également une mise à jour et vous ferai savoir ce que vous pouvez faire pour résoudre cela. Donc, cela fonctionne sur tous les états. Peut-être devrais-je créer plusieurs composants de ce bouton. Je ne sais vraiment pas. Mais laissons ça comme ça parce que dans ce premier, ça marche et vous pouvez montrer que pour s'incliner au-dessous que nous avons des questions communes. Et enfin, revenons à notre compte. Alors maintenant que nous savons que les noms que nous connaissons commencent à l'étranger, millénium et à la prime, nous pouvons passer à ce premier. Double-cliquez ici. Alors appelez ça commencer. Et voyons, peut-être que je peux. Oui, donnons-lui un nom pour le compte de départ. Ça va être étranger. Ça va être millénaire. Et ça va être Premium comme ça. Et maintenant que j'ai terminé cela, ce que nous pouvons faire est d'appuyer sur la touche Contrôle pour créer un composant. Et maintenant, ce que nous pouvons faire est simplement supprimer celui-ci. Cliquez sur celui-ci Ctrl-C, Ctrol-V. Et vous pouvez cliquer ici pour le positionner en position. Et maintenant à chaque fois que vous l'ajoutez, ce premier, qui est le composant d'origine, Il va réfléchir ici aussi. Donc si je vous ramène à nos prêts, ils sont là. Vous pouvez voir que nous avons et obtenir un peu d'argent, acheter une voiture, acheter une maison, refinancer ma dette. Donc, une fois de plus, cette seconde est, vous pouvez voir qu'elle est complètement vide. Donc si on va à la composante principale de notre pied de page et que je saute à l'intérieur, je peux aller ici, copier ça. Alors appuyez sur Control-C, Control-V, et positionnez-les en ligne avec nos prêts. Comme ce groupe, tous. Ce que je vais faire, c'est double-cliquer ici et obtenir un peu d'argent. Ça va être Viacom et acheter une maison. Et qu'il trouve le département , alors Dario. Et maintenant, si je vous ramène ici, vous pouvez voir que nous avons la même section. C' est donc la magie des composants. C' est à quel point ils sont puissants. Et pour le montrer encore plus loin, je peux vous ramener ici, qui est notre bouton original, si vous vous en souvenez. Donc, par exemple, si je choisis, pour une raison quelconque, changer cette couleur en rouge, vous pouvez la voir mise à jour non seulement ici, mais sur tous ces boutons supplémentaires. Je peux également augmenter le rayon de coin à 60, par exemple. Et vous pouvez voir qu'il a appliqué le même changement sur tous mes boutons. C' est donc vraiment la magie de ces composants et la magie d'Adobe XD. Et j'aime vraiment travailler comme ça, semble la même histoire pour le pied de page, par exemple. Donc, si je choisis de changer la couleur, vous pouvez voir qu'elle va se mettre à jour tout au long de notre conception. Super à propos de ce pied de page. Si vous choisissez de l'utiliser comme composant. La même chose ici pour la navigation et est arrêter maintenant et ainsi de suite, est que vous pouvez toujours créer des états de composants supplémentaires pour la conception réactive. Et je vais vous le montrer plus tard quand nous arriverons à la section « responsive design ». Donc c'est génial. Vous pouvez simplement cliquer et il appliquera ce changement à tous ces états et à travers le toit, design réactif organiser. Mais c'est tout pour cette vidéo. Je te verrai dans la prochaine fois que nous allons continuer avec notre conception. 41. Créer de créer des conceptions 3: Passons maintenant à la page suivante. Et la page suivante, c'est les prêts. Donc je vais faire la même chose. Donc tout mon ancien Q et faites-le glisser vers le bas. Nous sommes à 70 ici aussi. Est-ce qu'on va appeler ça la conception des poumons ? Et je pense que j'ai oublié de vous montrer dans la vidéo précédente, c'est parce que c'est la page des comptes. Nous allons sélectionner le compte. Et maintenant ce que nous pouvons faire est d'utiliser ce hit Control-C, cliquez ici. Ou encore mieux, nous pouvons sélectionner les deux. Alors peut maintenant et héros Ctrl-C, cliquez, cliquez, supprimer ces deux Ctrl-V positionné en place. Plus dock maintenant sur le dessus et peut maintenant juste ici va montrer appartient. Donc, nous l'avons ici. Et maintenant seulement chose que nous allons réellement changer où sont ici le texte et l'image. Donc je vais supprimer notre image, et je vais glisser et déposer mon image à l'intérieur d'ici. Ici, c'est. Et je maintiendrai Maj Alt et un clic gauche sur ma souris pour l'habiliter uniformément vers le bas. Positionnez-le sous une ligne comme celle-ci, C comme ça. Et je peux positionner ça comme un juste ici. Et vous pouvez jouer avec ces éléments. Vous pouvez les repositionner. Je peux, par exemple, faire pivoter cela, ils peuvent déplacer cela vers le haut. Je peux retourner l'aversion. Alors déplace-le juste à l'extérieur. Et nous l'avons là. Maintenant, revenons en arrière et commençons par changer le texte lui-même. Donc, je vais double-cliquer à l'intérieur. Je vais double-cliquer à l'intérieur d'ici, changer ce texte et l'appeler un jour. C' est notre image de héros terminée. Et c'est l'avantage d'avoir des sections D déjà faites. Et je peux ensuite sauter à l'intérieur et modifier mon image ou juste un peu, par exemple, je peux le déplacer juste ici. Si je veux le positionner un peu différemment autour de ce cercle, peut-être que je peux le mettre ici. Vous pouvez même changer ces formes si vous le voulez, mais je vais juste le laisser comme ça. Donc la prochaine chose que nous allons faire est de changer ça. Et cela va fondamentalement être exactement la même section et exactement les mêmes paramètres que celui-ci. Donc je vais sauter ici et je vais choisir ces icônes et les coller à l'intérieur. Donc je vais sauter ici, Double-cliquez, et basé ici, je vais le baser exactement dans la même position. Et je suis mort du globe oculaire aussi bien qu'avec la précédente. Donc quelque part par ici, 123440 pixels haut et dense, fondamentalement il saute juste ici. Je vais faire un clic droit, faire local, ME Klocal, faire local, et enfin faire de la confiture locale. Et ce que je vais faire est fondamentalement la même chose que j'ai faite avec la précédente. Je vais ouvrir tous ces dossiers et glisser-déposer l'icône Très devrait être et simplement supprimé le titulaire de la place de départ. Comme ça. Donc biochar et acheter une maison. Et enfin, refinancer mon cou. Maintenant, ce que je vais aussi faire est d'appeler ce sélecteur. Donc, comme je l'ai fait avec le précédent, je vais appuyer sur le contrôle D, déplacer les informations à l'intérieur, fermer ce sélecteur aussi. Contrôle D déplacer à info à l'intérieur, comme ça. Et enfin sur ce premier, plus profonde information originale. Mais je vais faire la prochaine est en fait commencer avec quelques changements ici. Et je veux tout créer comme je l'ai fait avant. Donc, si vous vous souvenez, nous avons d'abord fait toute la conception, toutes les informations, puis créé des composants ou pour les prêts et ainsi de suite. Donc je vais sauter à l'intérieur et commencer à partir d'ici. Donc, je vais réduire l'obésité de toutes ces choses et commencer avec mon argent rapide. Donc ce que je vais faire est glisser et déposer mon aperçu d'image pour moi de l'argent rapide comme ça. Alors qu'est-ce qu'on a, c'est de l'aspersion dans 30 minutes. Et je vais simplement copier ce texte ici. Et je vais faire la même chose pour ce sont les champs de texte. Il suffit d'inclure les informations que le client m'a fournies. Et vous pouvez toujours obtenir cette information essentiellement parce que vous l'obtenez de votre client. Et le client a toujours, au moins dans cette information. Maintenant que nous avons fait cela, nous voulons plus d'acheter une voiture comme ça. Et nous faisons du biochar, fondamentalement ce sera la même chose une fois de plus, mais nous allons avoir quelques informations supplémentaires incluses, ainsi que des icônes de largeur. Donc, ces icônes vont fondamentalement être un peu différentes de celles-ci. Donc, pour nous, allons sauter à l'intérieur et changer réellement ce texte. Donc, dans ce premier texte va être comme ça. Donc, un large éventail de choeurs, documentation minimale va battre dans la même chose. Je vais juste changer dans cette circonstance. Et enfin, nous avons ce dernier texte, comme la dette. Et maintenant j'ai deux icônes que je vais copier et coller à l'intérieur. Donc je vais les coller ici. Je vais sauter en arrière, faire du clic droit, faire du local, faire du clic droit, faire du local. Retournez à mon panneau de calques. Et je vais positionner cette première icône jusqu'au sommet. Et o positionnez-le juste ici à la place de cette icône de chronomètre, supprimer et l'icône de mon chronomètre. Je vais fermer ça un instant. La documentation va être la même et cette icône écologique va simplement se mettre en position de disciple. Comme ça. Supprimez l'icône précédente et c'est fondamentalement tout. La seule chose qu'il nous reste à faire ici, c'est d'inclure une nouvelle image. Je vais glisser et déposer mon image, osez. Et je vais simplement le déplacer et peut-être l'améliorer juste un peu en taille. Donc, vous devez voir ce couplé choisir une voiture fondamentalement. Donc c'est tout le but de cette section. Et enfin, nous allons changer cette section en bas. Parce que comme ils l'ont dit dans la vidéo précédente où nous avons travaillé sur filaire, cela va évidemment paraître un peu différent. Pour un prêt pour acheter une voiture, pour acheter une maison, ou pour obtenir un argent rapide. Ce que nous allons aussi faire est de sauter à l'intérieur de tous et changer, changer le bouton. Donc ce que je vais faire, c'est peut-être cliquer sur celui-ci. Cliquez sur ce bouton. Je pourrais utiliser celui-là, mais peu importe, je peux changer ça. Alors sautez à l'intérieur de mes infos et obtenez une réponse. J' ai sauté. Alors ici, cliquez sur Appliquer maintenant positionnez-le dans un endroit comme celui-ci. Et je vais supprimer ceci et le changer pour s'appliquer maintenant. C' est déjà à appliquer maintenant. Laissons-le là. On est à 74 ans, l'espacement dans ce temps, mais ça n'a pas d'importance. Ça a l'air bien de toute façon. Et à partir de cette section, nous sommes toujours à 150, donc c'est bien aussi. Contrôlez C pour le copier et le cacher. Allez dans cette section info, obtenez le contrôle de réponse V pour le coller en place. Voyons voir, nous sommes à 70 ans ici aussi. Je vais supprimer l'ancien, suffit de le remplacer ici. Et allons de l'avant et éditons. Tous ces autres. Voir supprimer ce 170, le cacher et cliquer ici. Positionnez en 70 et presque, et ce dernier aussi. Alors vérifions une fois de plus. Nous avons donc la même journée ou la réponse. Amenez-vous une voiture. Nous avons une réponse dans 20 minutes pour un flux de trésorerie. Et maintenant, nous pouvons aller de l'avant et travailler sur acheter une maison. Alors faisons-le maintenant. Donc, ce que je peux faire avec cela, c'est que je peux inclure le texte juste ici en haut, ou je peux simplement le laisser comme ça. Voyons voir. Oui, laissons ça comme ça. Parce que nous allons avoir ce texte ici. Et ce premier va écrire, voyons, près de la maison de vos rêves, comme ça, une documentation minimale va rester la même. Mais juste cela va changer. Complètement en ligne et nous allons changer cela ici. Donc la seule chose que nous allons changer, c'est que nous avons une icône ici pour la maison. Alors changeons le nom de ceci pour acheter votre maison de rêve. Au lieu de l'icône du chronomètre, o positionnez cette icône d'accueil ici. Et ce sont de grandes icônes minces. Donc, partout où vous voyez ces icônes, ils sont grand stand icône. Et partout où vous voyez des icônes en couleur, elles sont à partir d'icônes et d'éléments vitaux. Donc avant de vouloir entendre, je veux juste faire un changement rapide ici aussi, les noms des dossiers. Donc large gamme de voitures, documentation, même. Et ici, nous allons écrire comme ça. Ok, alors maintenant que c'est terminé, revenons acheter une maison. Nous avons changé le texte et la seule chose qui nous reste à faire est l'image elle-même. Alors voyons, faites glisser et déposez-le à l'intérieur. Donc nous avons un agent immobilier et un couple achète une maison. Ça a l'air vraiment sympa. Positionnez-le dans la police comme ça. Réseaux, très bien. Et maintenant, cette section est terminée. Nous pouvons passer enfin à ce dernier qui est de refinancer ma profondeur. Et laissez-moi tout de suite et sauter site et ajouter mon image. Je vais déplacer un disque couplé. Donc quelque part par ici. Ou peut-être même un peu plus, quelque chose comme ça. Et passons maintenant et voyons à quoi cela va ressembler avec nos informations ajoutées. Alors voyons. Nous allons appeler cela un peu différent et nous allons lui donner d'autres icônes ainsi que du texte. Donc calcul dans 20 minutes. Voyons voir. La documentation va rester dans le même. Je vais juste changer ce texte complètement en ligne et nous allons le changer ici. Ce que je viens de remarquer, c'est que j'utilise un texte factice pour ce premier. Voyons voir ici vite, on le change, c'est bon. Alors allons de l'avant et maintenant rallumons ça. Comme ça. Et changeons cette première icône. Donc calcul dans 20 minutes. Changeons ça. Contrôle VP assis dans. Nous avons cette belle petite icône de calculatrice. Et vous pouvez voir la puissance des jeux d'icônes. Parce que toutes ces icônes appartiennent ensemble. Fondamentalement, ils ont tous l'air de la même affaire de style avait la même épaisseur des lignes. Donc, ils fonctionnent tous bien avec cette conception. Enfin, je vais juste renommer ceci pour calculer la suppression dans 20 minutes. Et c'est fondamentalement tout. Cette section est maintenant terminée. Ou enfin, il a changé le texte ci-dessous pour obtenir une réponse en 20 minutes. Changons le texte ici aussi. Mon père et moi pensons que j'ai oublié de changer et que pour acheter une maison, acheter une voiture. On l'a changé. Et acheter de la maison. Oui. Nous devons donc changer d'endettement maintenant. Alors voyons. Dans ce cas, nous allons avoir une réponse rapide aujourd'hui. Beaucoup trop de clics pour sauter à l'intérieur. Comme ça. Alors aujourd'hui, les réponses, et c'est fondamentalement tout. Nous avons maintenant terminé toutes nos sections. Enfin, ce que nous allons faire, c'est créer nos composants. Donc ce que je vais faire ici, c'est pour ce premier composant, allons frapper Control K. Encore une fois, comme ici. Si vous vous souvenez, cette section du bas avec des questions courantes va se déplacer ici vers le haut parce que toutes ces informations vont être masquées sur l'état par défaut. Alors ouvrons l'édition et masquons toutes les informations. Double-cliquez sur moi 0 touche ou vous pouvez simplement Seigneur obésité jusqu'à 0. Je vais fermer tous les dossiers. Commencez par créer un nouvel état, qui va être obtenir un coup rapide comme ça sur le cache du CPU getter, ce que nous allons faire est de changer l'icône, chanson va cacher la couleur. Et celui-là aussi. Je vais montrer mes infos. Et c'est fondamentalement tout. Passons maintenant et créons un autre état qui va être biochar. Sur le biochar, nous allons retourner à l'argent rapide. On va ramener la couleur comme ça. Je vais cacher cette information. Va acheter une voiture. Hauteur, cette hauteur, cette couleur aussi. Retourne et je vais montrer mes infos ici. Maintenant, passons à autre chose et fermons ça. Je peux créer un nouvel état. J' appellerai cet état et j'achèterai une maison. Et dessus, revenons acheter une voiture. Ramenons tout ça. Donc je vais ramener cette couleur, cette couleur. Fermez tout, cachez ce pécheur. J' ai montré cette info. Et enfin, voyons. Masquer cette couleur, double-cliquez pour masquer cette couleur. C' est ça. Et enfin, allons de l'avant et créer un nouvel état pour refinancer ma profondeur, comme ceci, et faire la même chose fondamentalement. Alors ouvre ça. Voyons voir. Je vais cacher cette information. Et je vais montrer de la couleur sur ces deux pour qu'il ait financé ma dette. Et je vais cacher décoloré cacher cette couleur. Voyons si je l'ai fait. Je l'ai fait. Et enfin montrer mes infos. Donc c'est fondamentalement tout pour le processus de création. Maintenant vient la partie amusante une fois de plus. Et nous allons sauter en mode prototypage. Dans l'état par défaut, nous allons faire un sélecteur. Et si vous vous demandez pourquoi nous faisons toujours ce sélecteur sur l'état par défaut est de montrer aux clients et aux développeurs comment tout cela va ressembler une fois qu'il est dans l'état par défaut. Ainsi, vous pouvez leur montrer que toutes ces icônes ont de la couleur comme vous pouvez le voir. Et vous pouvez leur montrer que cette section du bas avec les questions et le pied de page va venir juste ici en haut. Alors commençons. Donc, comme je l'ai dit, nous sommes à un état par défaut. Je vais double-cliquer ici. Cliquez comme vous pouvez le voir, Adobe XD a gardé tous nos paramètres de la précédente scie onglet ou pour animer facile. Maintenant 0.4. ce qui est important pour la cohérence parce que vous voulez le montrer à vos clients, aux développeurs et aux membres de votre équipe. Par exemple, juste une façon dont cette entité Web IS vous utilisez la même animation, qui va réduire le temps dont le développeur a besoin pour développer cette conception à la fin de la journée. Donc, je vais choisir obtenir rapide gash nécessaire ici. Acheter une voiture, acheter une maison, et enfin, refinancé ma dette. Je vais fermer tous ces dossiers. Si vous vous demandez pourquoi je cause des dossiers, c'est parce que j'aime ça. Je veux garder les choses belles et propres et soit voulait me distraire litre. Donc ça va acheter une voiture. Si vous entendez un peu frapper à l'extérieur, est juste quelqu'un se prépare bien pour l'hiver. Désolée si tu entends ça, mais je ne le sais vraiment pas. Je ne peux rien y faire. Alors j'ai juste essayé de l'ignorer. Prends un coup rapide. Donc, une fois de plus, obtenez un peu d'argent par maison. Et enfin, nous avons refinancé ma profondeur parce que j'ai choisi d'avoir mon bureau en dehors de la ville. Donc, au lieu des voitures qui courent dehors, vous pouvez entendre quelque chose comme ça. Prends un peu d'argent. Mais au moins l'air est plus propre et il est beaucoup plus silencieux la plupart du temps. Revenons à nos vêtements design, tout ça. Et enfin, nous sommes refinancés, couchés morts. Donc je vais choisir ça, obtenir un liquide rapide va être biochar et acheter une maison. Et on appelle ça un jour. Maintenant que vous savez comment travailler avec tout cela, comme vous pouvez le voir, c'est beaucoup plus rapide. Encore une fois, l'état par défaut que vous allez afficher n'est pas l'état par défaut, mais plutôt obtenir un cash rapide. Donc le premier qui est sélectionné, et c'est fondamentalement tout. Je peux revenir à l'aperçu de mon kit de conception juste pour voir à quoi cela ressemble. Agrandissez-le, allez en plein écran. Quand il commence à défiler, vous pouvez voir que nous avons sélectionné des prêts. Tout a l'air beau et propre. Et quand il commence à défiler vers le bas, vous pouvez voir cette section joliment. Donc, quand je clique entre eux, vous pouvez voir que cette information change bien. Et nous avons encore cette belle animation et ces transitions entre nos icônes. Encore une fois, notre premier fonctionne, mais si je clique sur le biochar, vous pouvez voir que l'effet hover ne fonctionne pas ici aussi. Donc, une fois de plus, si tout le monde sait, quelle est la raison de cela, faites-le moi savoir et je me ferai un plaisir de le réparer. Maintenant, nous devons adapter cela pour avoir des prêts en cartes. Alors allons de l'avant et collez l'original dans. Je peux toujours le faire pour pouvoir appuyer sur le contrôle C sur cette copie de l'original, le positionner vers le bas, le réactiver. Et maintenant que nous savons lesquels d'entre eux sont inclus. Donc nous savons que nous avons ces poumons et nous les avons inclus. C'est fondamentalement ça. Dans la prochaine vidéo, je vais montrer des cartes et nous allons inclure deux cartes ici aussi. Mais comme vous pouvez le voir, déjà, nous l'avons terminé. J' ai donc des cartes de crédit, cartes de débit, des cartes personnalisées et des cartes-cadeaux. Peut-être pour les cartes personnalisées. Nous ici où il dit créer votre propre. Nous n'avons pas rempli ça, mais nous avons toujours des cartes-cadeaux et ainsi de suite. Donc c'est fondamentalement tout pour cette vidéo. Comme je l'ai dit dans la prochaine, nous allons jouer avec ces cartes. Je vais vous montrer des animations avancées. Et nous allons finir cette page aussi. Alors je te verrai là-bas. 42. Créer du design 4: Bon, alors commençons par les cartes. Et ce sera la plus délicate parce que nous allons en fait inclure quelques animations ici sur toutes ces animations et sur celle-ci. Alors commençons. Je vais vous montrer tout cela tout simplement tomber alt et sont les mêmes comme nous l'avons fait pour tous ces autres, sont 70 ici. Ils vont faire des cartes coupées, neuf ici, comme ça. Je vais aussi faire la même chose que je l'ai fait auparavant. Donc copiez ceci, supprimez ces deux. Donc j'utilise mes hommes maintenant héros pourrait contrôler V pour les coller sur ma moyenne, maintenant, les a déplacés pour nous en dessous du haut. Maintenant, mon nav principal choisir des cartes évidemment. Et ici, commençons avec l'édition. Donc la première chose que je vais faire est de pimenter un peu les choses. Donc, je vais changer de place pour le cercle et 4dx fait. Je vais également tourner un peu, et je vais faire pivoter celui-ci aussi pour aimer cette position à résoudre ici. Je vais ensuite aller de l'avant et inclure mon image. Donc, nous allons glisser et déposer mon image à l'intérieur. Encore une fois, l'image provient d'un élément vital et je viens de l'avant et j'ai utilisé Photoshop pour découper l'arrière-plan de cette jeune femme. J' ai vu la position quelque part par ici. Alors regardez mon héros, BG, ma position d'image à oser, déplacer mon image, oser supprimer mon ancienne image et utiliser ma nouvelle image pour positionner. C' est quelque part au centre de mon cercle. Quelque part par ici ou deux. Je pense que ça va marcher très bien. En note, commençons à éditer le texte. Donc je vais double-cliquer, changer le texte ici, changer le texte ici aussi, et vous ne perdez pas la mort. Nous utilisons toujours la pile, qui va appeler venir vraiment utile plus tard quand nous arrivons à la partie réactive de cette conception. Maintenant que cela est terminé, je peux passer rapidement à la deuxième section parce que nous avons déjà terminé cette partie de notre conception. Ce que je vais faire ici, c'est sauter à cette partie de mon design. Utilisez mon cercle BG. Et je vais en fait utiliser dans cette couleur. Et voyons voir. Je peux ensuite abaisser l'obésité, par exemple. Ou je peux même en faire un mieux. Choisissez un flou d'arrière-plan, puis passez avec 5050. Et puis huit dans l'esprit et désolé, dans l'obésité. Et qu'est-ce que ça va faire ? Est-ce que cela va apporter juste un peu de différenciation entre la carte, le cercle, et tous ces autres éléments. Donc je pense que ça va marcher très bien. Contrôle anti-héros, forme de héros. C' est très bien. Le masque est en dessous. Ok, alors maintenant allons de l'avant et passons à notre panier. Donc, pour ce faire, j'ai besoin d'un logo ici. Je vais avoir besoin de notre logo Visa et MasterCard ici d'un besoin quelques numéros, nom et une date juste ici. Alors commençons avec toutes ces choses. Donc, pour commencer, je vais sauter ici, localiser mon logo, faire glisser et le déposer en position. Et voyons voir. Je vais le positionner ici, assurer qu'il est dans ma carte. Comme la dette. Je vais le positionner là. Paul, 12341234. Je pense que ça va. Oui. Et maintenant je vais l'exporter d'ici. Donc, pour ce faire, je tiendrai Control ou Command et E, et je l'exporterai en tant que B et G. La raison pour laquelle je fais cela est parce que je vais mettre à l'échelle conception de rejet et l'utiliser dans toutes ces conceptions. Donc, nous allons fondamentalement avoir le même design, mais ce logo n'est pas vraiment bon avec la mise à l'échelle. Donc si je vous montre ça, vous pouvez voir que ça change ici. Et si je maintiens la touche Maj et que cette forme se déforme et ainsi de suite. Donc, ce n'est pas vraiment tout ça. Eh bien. Je vais également aller de l'avant et le renommer sur mon bureau. Donc, je vais le renommer en log-log barre oblique Couleur. Et puis je sauterai ici. Choisissez la version grise exportée. Il contrôlerait ou Commandement E exporté en PNG. Et j'ajouterai de la dette à un logo, noir et blanc. Et puis je vais sélectionner la dose à un glisser et les déposer ici. Donc, vous pouvez voir que c'est la couleur du logo. C' est Logo en noir et blanc. Et évidemment, quand vous réduisez cela va se mettre à l'échelle bien. Sans aucun problème. Évidemment, la qualité n'est pas si grande, mais vous allez pouvoir travailler avec elle. Néanmoins. Remplacer ces. Je vais m'assurer qu'ils sont au centre comme ça. Je vais les positionner dans la position d'origine juste ici. Et vous pouvez également utiliser la version par défaut ici. Donc, en tant que version VG si vous voulez, mais je vais simplement le cacher pour l'instant. Je vais cacher noir et blanc foncé au logo. Et ici, nous avons notre logo original. Ce que je vais faire pour cette grande version est utilisé l'original solide me cacher ces deux. Blanche Pouchkine locale et je vais utiliser mon logo du milieu. Cachez tous ces autres. Et nous avons là. Donc la première chose que je vais faire est d'utiliser les logos de ma carte. J' utiliserai donc le logo Visa et MasterCard. Donc j'ai fait la même chose. Désolé. C' est ce qui s'est passé lorsque vous le faites glisser et le déposer en position. Je veux le glisser et le déposer là-dedans. Ici, nous avons tous les détails de notre logo. Donc, vous pouvez voir que nous avons doit avoir courant noir et blanc et en couleur nous avons visa en couleur et blanc. Je les télécharge aussi de et des éléments d'eau. Donc là, vous l'avez. Comme vous pouvez le voir, j'utilise tous ces actifs. Joli membre. Alors décalez, assurez-vous que vous êtes en ligne. Maj 1234. Voyons si nous y sommes. Nous le sommes maintenant, donc nous sommes à 40 ans. Et ce que je vais faire, c'est les regrouper. Donc je vais avoir, j'ai dû avoir un groupe. Et je vais aussi avoir le groupe SAR comme ça. Et je m'assurerai de faire mes changements et de faire mes états. Mais avant tout cela, allons-y et allons-y. Tout d'abord abaissé l'obésité de ces fusions noires et blanches. Et pour ce premier, je vais cacher ma MasterCard complètement, donc je reste avec le visa. Ce que je vais faire ensuite, c'est que je vais faire la même chose pour le logo, donc je vais faire ces changements. Appelez ça Logo. Et ce que je vais faire ensuite, c'est utiliser du texte. Alors allons de l'avant et par exemple, dupliquez ce texte. Positionnez-le ici, assurez-vous qu'il va de la gauche. Et je vais simplement utiliser quelques chiffres là juste pour indiquer qu'il s'agit en fait d'une carte. Donc 367 pour faire de l'espace, ou 282 à 938 à 90372, ou vous pouvez simplement utiliser n'importe quel ancien nombre. C' est vraiment à toi de décider. Donc nous en sommes à 48. S' il pense que cela ne fonctionne pas vraiment bien, vous pouvez essayer avec 90, mais je pense que 48 fonctionne bien avec cette position de cas. C' est quelque part par ici ou on peut le mettre au milieu comme en ce moment. Et nous pouvons également déplacer cette information encore plus loin si nous le choisissons. Mais pour l'instant, laissons-le là pour que nous puissions finir cette information de fond et voir à quoi ça va ressembler. Donc je vais dupliquer celui-ci, positionner juste un peu vers le bas. Et voyons, pour celui-ci, je peux utiliser quelque chose de plus petit, alors appelons-le 36. Voyons comment ça ressemble à 24. Ouais, 18-24 va être beaucoup mieux. Alors voyons. Il expire le neuvième mois de 2021. Je vais le dupliquer. Assurez-vous qu'il est bien aligné et donnons-lui un nom de ce qui était le nom que nous avons réellement utilisé là-bas. Alors vérifions ça. On a utilisé Michael Jacobs. Donc, utilisons le même nom sur les vieux. Comme ça. Je vais m'assurer de le positionner 40 de ma carte. Vous pouvez également sélectionner comme ceci, profondeur puits 1234. Et vous pouvez voir qu'on est à 40 ans sur tout ça. Donc, ce que nous pouvons aussi faire est de nous assurer que nous sommes à 40 ans vers le bas pour changer 123456. Et voyons maintenant avec ces logos, assurez-vous de sélectionner MasterCard également. Donc six, maintenant on est à 60 ans, on est à 60 ans. Et je peux aussi faire ce tour que je t'ai déjà montré. Assurez-vous donc d'utiliser Rectangle, allez de haut en bas du texte. Et maintenant positionnez ce texte au centre entre votre logo et d'autres textes. Et nous l'avons là. Nous avons terminé la conception de notre carte. Ce que je vais faire, c'est regrouper tous ces éléments. Donc je vais positionner ça ici, carte BG, donnons-lui ce nom. Comme ça. Je vais les regrouper. Appelez-le carte de crédit ou tout simplement carte. Oui, nous allons vous donner le nom de la proie a eu lieu parce que nous avons déjà des cartes pour qu'on puisse les différencier. Voyons voir, nous avons un cercle de fond ici, nous avons un chariot. Nous avons ce texte, votre compagnon quotidien, et devenons Michael Jacobs pour une raison quelconque en sortant sur nous. C' est très bien. Ici, réorganisé. C'est donc notre courant. Maintenant, ce que nous pouvons faire est d'utiliser d'autres couleurs qui ne font pas partie de notre design. Donc, je vais simplement utiliser une de ces couleurs. Donc je vais aller au gradient juste pour le rendre un peu plus fantaisiste. Et voyons, je peux faire pivoter ça ici. Je peux faire pivoter ceci ici, par exemple, en faire quelques deux comme ça. Sur la couleur plus foncée. Je vais appliquer cette couleur. Sur la couleur plus claire, je vais appliquer la même colonne. Et puis sur une version plus légère, je vais simplement faire quelque chose comme ça. Et une version plus sombre. Peut-être que je peux même aller un peu plus sombre pour obtenir ce genre de résultat lumineux ou comme vous voulez l'appeler. Je pense que Visa va très bien marcher ici, mais comme vous pouvez le voir, nos lettres doivent être blanches. Essayons avec cette couleur. Je pense que ça marche bien. Et pour notre logo, ce que nous pouvons aussi faire est simplement de sauter à l'intérieur de cet état original et de changer ceci à ici. Donc, nous pouvons toujours lire notre logo, mais maintenant le texte est blanc. Et c'est tout pour la première version, je vais maintenant revenir en arrière et appuyer sur Contrôle ou Commande K pour l'utiliser comme état par défaut. Donc, une fois de plus, nous sommes à l'état par défaut pour notre carte Visa. Allons maintenant et en créer un autre. Donc, cela va être dans l'état par défaut pour la carte de visa, mais noir et blanc, donc v sous w. si noir et blanc. Et je vais sauter ici, utiliser mon Visa, ma peau noire et blanche, la discipline. Et nous l'avons là. Et nous pouvons changer le logo à volonté si nous en avons besoin. Ce que nous allons faire ensuite, c'est créer un autre état. On va l'appeler MasterCard. Et faites la même chose. Donc, montrez MasterCard cacher visa, s' assure que la version noire et blanche est cachée. Et c'est tout pour la MasterCard. Et maintenant, passons à la nouvelle carte Master de qualité de l'état. Désolé, MasterCard. Le W pour le noir et blanc, sauter à l'intérieur de MasterCard et donner cela à tomber et donner ce 0 et Terry Earth. Donc ce sont nos cartes. Et maintenant, nous avons terminé la dette. Maintenant, ce que je vais faire, c'est en fait que je vais regrouper ces deux et créer un composant à partir d'eux. Et quand une personne survolera, ce sera assez simple en fait de le montrer. Alors faisons ça. Donc ce que j'ai dit, c'est quand ils planent et que nous allons utiliser le premier. Donc l'état par défaut pour celui-ci, quand ils survolent va essentiellement augmenter un peu et montrer un peu plus en taille. Alors faisons ça. Alors regrouperons ces deux-là. Donc contrôle G, on va l'appeler « card Hover », juste pour qu'on sache ce que c'est. Appuyez sur la touche Contrôle. Et la seule chose que je vais ajouter ici est l'état d'Horace, l' appeler plané ou le survol courant pressé, je veux l'appeler. Et maintenant en survol, je vais simplement augmenter ma carte de crédit et juste un peu. Donc, deux, quelque chose comme ça, par exemple, je vais m'assurer que je suis toujours à l'intérieur de mes points centraux, quelque chose comme ça. Donc nous pouvons aller à l'état par défaut, à l'état d'horreur, et nous pouvons vérifier entre tous ces chiffres si tout semble bien, je pense que c'est le cas. Et une autre chose que je vais faire est sur l'état par défaut, je vais ajouter une ombre portée sur ma carte. Voyons voir, on peut l'ouvrir. Nous pouvons aller au cercle de fond et nous pouvons ajouter cette jolie petite ombre portée. Donc 20 à 2050 par exemple. Voyons comment ça marche. Ça ne me montre rien parce que certains le font sous le cercle. Alors je vais choisir la voiture BG et ensuite faire l'ombre. Donc, il est 10x 2050, je pense que ça a l'air bien. Et voyons. Je réduirai l'obésité à 0. Et puis nous pouvons aller au panier stationnaire, carte de crédit, carte, bg, et augmenter cette obésité à, disons 20% pour voir comment ça marche. Ou peut-être quelque chose de moins. Alors peut-être 12 ou 10. Je pense que dix fonctionne bien. Maintenant, enfin, allons de l'avant et testons ça. Avant de le faire, nous devons revenir à l'état par défaut. Et cliquez sur Aperçu. Donc, maintenant que l'aperçu est ouvert, vous pouvez voir que nous avons sélectionné le bouton cartes fonctionne toujours bien. Tout a l'air bien. Donc maintenant, vous pouvez voir Jeter l'air vraiment sympa. Mais quand vous survolez, vous pouvez le voir augmenter et ces chiffres changent. Nous avons aussi cette belle ombre de fond apparaissant de nulle part. Vous pouvez également réduire la taille du cercle si vous le souhaitez. Mais tout semble bien quand les utilisateurs rampent comme ça. Donc, cela apparaît l'interface fondamentalement. Donc rien à l'intérieur ne change vraiment. Tout ce qui change est la carte elle-même. Donc je pense que ça marche bien. Allons maintenant et éditons cette carte pour juste un peu plus. Donc, ce qu'on peut faire, c'est sauter à l'intérieur de notre carte elle-même. Et nous pouvons aller de l'avant et ajouter quelques formes juste pour pimenter les choses un peu plus. Donc, je peux ajouter de la forme comme ça. Je peux utiliser une grille de répétition comme celle-ci. Je peux enlever la bordure et je peux faire pivoter cette grille de répétition. Mais commençons par le dissocier, appelons-le des rectangles qui sont tournés vers quelque chose comme ça. Disons. Écrire la mort fonctionne bien. Positionné à quelque part par ici. Juste pour que vous ne puissiez pas voir sous cet angle. Peut-être le faire tourner un peu. Voir le joueur sur avec la position. Et je pense que ça a l'air bien. Je vais ensuite sauter la perspicacité. Il avait le contrôle x deux position que l'intérieur je vais frapper le contrôle de v, positionner tout le chemin vers le bas, frapper le contrôle D sur le BG actuel. Pour que je puisse le positionner. Et ce que je vais faire, c'est utiliser mon masque. Alors sélectionnez ces deux Maj Control M. Et ce que ça va faire, c'est que ça va masquer ces formes. Donc je vais appeler ça des lignes. Tous les rectangles. Quoi que vous vouliez l'appeler comme simplement, je peux maintenant aller de l'avant et les dégrouper si vous le voulez, mais je peux toujours les laisser à l'intérieur de ce dossier. La seule chose que je vais faire est de réduire l'obésité. Donc, par exemple, 10%, je pense que cela fonctionne assez bien. Ce que je vais aussi faire est d'appuyer sur Control C et d'aller dans chacun de mes états pour le baser. Alors positionnez-le jusqu'au bas. Assurez-vous qu'il est dans tous les états. Donc voiture BG et puis rectangles. Donc, la première couche sur le dessus, comme vous pouvez le voir, allez à la MasterCard et faites les mêmes choses. Alors, juste ici. Et enfin MasterCard, noir et blanc, cliquez ici. Et nous l'avons là. Nous avons terminé. Et que je pense que ça marche assez bien. Eh bien, c'est maintenant le bouton d'aperçu et voyez une fois de plus à quoi ça ressemble. Donc nous pouvons voir que nous avons ces belles lignes, mais comme vous pouvez le voir, elles ne sont plus là, donc nous devons les coller dans, dans cet état aussi. Donc, nous allons revenir en arrière dur planer carte de crédit, et nous allons utiliser ces rectangles. Sautez à l'intérieur de ma carte, idée de clicker d' horreur, rectangles de cartes de crédit. Il y a, vous pouvez voir, oser, mais ils ne se montrent pas pour une raison quelconque. Je ne sais pas vraiment pourquoi. Essayons encore. Les voilà. Donc des rectangles. Et je vais le positionner là et m'assurer qu'ils ne sont pas en ligne. S' ils sont éclairés Lindert, et nous allons supprimer ceux-ci. Donc dans la saleté. Et de toute façon, il est donc état par défaut, état du port. Allons t'apporter ça une fois de plus. Donc, comme vous pouvez le voir, ils augmentent bien. Ils bougent assez bien et tout fonctionne comme il se doit. Vous pouvez toujours sauter côté et ajouter de la texture d'arrière-plan ici si vous le souhaitez, vous pouvez ajouter un dégradé plus complexe. C' est vraiment à toi et ce que tu veux faire. Donc domaine et facteur important ici est, est que nous avons fini cette carte de grade, donc il tient sur tous ces parce que nous allons sauter à l'intérieur d'une nouvelle cette carte de crédit pour toutes ces cartes et vers le bas. Donc ce que je vous recommande maintenant, c'est de frapper le contrôle S pour sauver votre design. Et ce que nous allons faire ensuite est de sauter à l'intérieur d'un ajout de toutes ces cartes. Donc ce que nous allons faire quand il aura fini de sauver la ligne maintenant est sauter à l'intérieur d'ici. Donc nous allons déposer notre carte ici. Donc, nous l'avons, la carte de crédit. Je vais le glisser et le déposer ici en position. Et je vais jouer avec le nom mentionné. C' est pourquoi nous avons inclus ces PNG juste pour que nous puissions jouer avec la position comme ça. Donc, je vais maintenir la touche Maj et la faire glisser jusqu'ici. Et ce que je vais faire ensuite, c'est sauter à l'intérieur avec une carte de crédit. Et je vais simplement réorganiser certains de ces détails. Donc je vais commencer par le logo. Je vais cacher mon logo original et inclure la couleur du logo, par exemple. Ou appelons-le journal de noir et blanc. Voyons voir. Comment peut-on faire ça ? Voyons voir, parce que j'aurai besoin de la version avec ceci et avec ce texte blanc. Alors peut-être que je pourrais exporter celui-là, mais trichons un peu. Positionnons d'abord notre couleur de logo ici. Je vais réduire sa taille et le positionner à 40, disons comme ça. Maintenant, nous allons plus de mots pour le décalage 1212, peut-être 20 est mieux. Maintenant Visa et MasterCard, nous allons les sélectionner, assurez-vous qu'ils sont au centre. Tous et mûrs, on descend et décide, OK, ne solide pas, voir, voir comment on peut faire ça. Et ils ne sont toujours pas par jinx ou Allons avec les Indes. D' abord. Comme ça. Maintenant, sautez à l'intérieur d'un courant incontournable comme celui-ci. Alors assurez-vous juste que hollandais, qui décide comme moi. Et vous allez toujours avoir certains de ces problèmes. Assurez-vous donc que vous les sélectionnez et que vous savez ce que vous faites essentiellement. Donc, ce que je vais faire est en fait déposé les deux dans le dossier du logo juste pour que je puisse les aligner avec le logo, les sécher Alto réel rapidement. Positionnez mon dossier logo, optez par exemple, Dan o, positionnez-les sur le bord gauche, assurez-vous qu'ils sont 20. Et je vais cacher pourrait MasterCard dossier. Vous pouvez toujours étendre ceci si vous le souhaitez, comme ceci. Mais je ne pense pas qu'il soit nécessaire de trop faire ça. Seigneur obésité. Et ce que je vais faire, c'est utiliser mon logo, Noir et Blanc. Positionnez-le jusqu'à ce que vous posiez ici Ou la taille, appuyez deux fois. Et j'utiliserai mon logo méchant. Je vais cacher mon portefeuille et simplement utiliser mon texte pour réduire sa taille. Et pour le mettre en place juste ici. Ainsi, vous pouvez simplement cliquer sur ce point et vous pouvez le repositionner comme vous le souhaitez. Voyons voir, je pense que c'est bien. Peut-être juste un peu vers le bas. Oui. On peut appeler ça comme ça. Donc, ce que nous pouvons faire est de frapper le contrôle C pour le copier de notre logo original, Control V. Et maintenant vous pouvez aller de l'avant et le positionner là comme ça. Et je pense que ça va bien marcher pour notre exemple. Ce que nous allons faire ensuite, évidemment, c'est travailler sur les conduits ou fermons tous ceux-ci. Donc, comme je l'ai dit, nous avons fini ça, nous avons tout préparé. Nous avons caché le logo, nous avons tout caché. Donc je vais simplement sauter ici. Et nous allons d'abord positionner ces deux télécharger Voir. Donc, s'ils sont maintenant à 24 ans, abaissons-les à 16, par exemple. Assurez-vous qu'ils sont blancs comme ça. Et je vais les positionner vers le bas. Alors descendons et descendons. Voyons voir, nous sommes à, je pense 20 ans, donc 20 de tous les côtés. Juste ici. Et si une marque vieille, vous pouvez voir que nous sommes 20 zone. Maintenant, je peux cliquer sur ce 124. Et ça marche ? Eh bien, voyons voir. Non. Mais ce que nous pouvons aussi faire est de réduire l'espacement entre eux. Et maintenant, ça va fonctionner juste mélange bien. Vous utilisez juste gras, vous utilisez juste les dettes de la main blanche en gros il nous allons faire le même tour. Donc la position sont un rectangle vers le haut. Assurez-vous de ralentir les deux. Cliquez ici, puis sauter à l'intérieur d'un supprimer votre rectangle. Et ce que nous allons faire ensuite, c'est que vous pouvez voir que nous avons maintenant notre carte. Ça a l'air sympa. Ce que nous allons faire ensuite, c'est utiliser ces mêmes informations sur tous nos états. Donc, pour vous montrer comment cela est fait, vous pouvez simplement sélectionner toutes vos informations au lieu de la carte Vg. Donc on ne va pas le changer. Cliquez sur Contrôle C. Comme ça. Allez au visa, en noir et blanc, par exemple. Supprimez toutes vos informations, utilisez votre carte Bg. On aurait pu copier celui-là aussi. Revenons donc à l'état par défaut et sélectionnons tout. Hit Control C. Aller à la Visa, Noir et Blanc, ouvrir tout a obtenu supprimer tout. Et simplement basé perroquet de retour. Voyons voir, ça n'a pas marché. Laissons la carte VG, contrôler V, et maintenant supprimer le BG actuel afin que nous puissions l'avoir comme récent Noir et Blanc. La seule chose que nous allons faire maintenant est en fait de courir d'abord entre eux et de faire de même pour eux. Et puis nous pouvons simplement sauter, changer et blogueurs à l'intérieur. Et enfin MasterCard noir et blanc. Et supprimez tous ces éléments et supprimez ceci. Et maintenant, parce que c'est MasterCard noir et blanc, je peux simplement laisser dans la dette en bas et cet original, je peux tout simplement Lore logo Visa va rester le même. C' est ça. Mastercard. Alors fais la même chose ici. Alors montrez ceci et supprimez ceci. Et c'est à 0, c'est bon. Passons à Visa, noir et blanc. Donc Reesa, nous allons montrer cette cachette et donc, et nous sommes en état par défaut avec visa. C' est très bien. Donc, nous l'avons là. Nous avons terminé dans ceux-là. Comme vous pouvez le voir, nous avons des cartes de crédit Visa. Ce texte est fondamentalement le même qu'il était, donc tout a l'air beau et propre. Ce que je vais faire ensuite est de copier défausse et de le baser à certains de ces endroits. Donc, je peux simplement appuyer sur Control C, ou ce que je peux faire est de faire un composant supplémentaire de cela, mais je ne vais pas jouer avec ici. Donc, je vais juste utiliser le contrôle C parce que c' est le composant enfant de ce composant maître de toute façon. Donc je peux sauter ici une forme de dessin animé, bon contrôle V et le déplacer en place comme ça. Merci. Effectuez un zoom avant. Et ce que je peux faire, c'est simplement le laisser à la carte du dessus. Vg sont supprimés, et je vais ensuite passer à mes cartes de débit et essentiellement faire les mêmes chars ou CU Control V, le positionner en position comme ce grand costume EEG et le retirer et passer à l'autre. Contrôle V. Positionnez-le en place. Et nous l'avons là. Je vais supprimer celui-ci aussi. Et ce dont j'ai besoin enfin, fraude ici, c'est que je vais utiliser cette même carte avant de retourner travailler sur nos illustrations et animations, revenons à cette même carte. Carte de crédit frappé Contrôle C. Et je vais sauter dans cette section, pourrait contrôler v. Assurez-vous que je suis au centre de ma position de panier ici qui supprimer ceci et qui est fondamentalement tout. Alors maintenant, allons-y parce que nous avons exactement les mêmes cartes. En fait, nous voulons y apporter quelques changements. Et parce que, comme je l'ai dit, c'est le composant maître, tous ces composants sont des composants enfants. Donc, comme vous pouvez le voir, tout fonctionne bien et parfaitement. Donc, ce que je vais faire, c'est essentiellement apporter ces changements. Commençons donc par les cartes de crédit Visa, par exemple. Je veux ajouter une couleur différente ici. Alors, on va sauter ici. Et voyons, est-ce que je voulais ajouter nos couleurs originales ? Alors peut-être celui-là. Donc, je vais sauter ici, cliquer ici, et ajouter notre couleur d'origine. Cliquez sur ce briquet. Et j'ajouterai aussi la couleur originale. Je vais ensuite revenir ici et augmenter ça jusqu'à ici. Je peux peut-être diminuer un peu ça, quelque chose comme ça, juste pour le rendre un peu plus intéressant. Évidemment, si vous n'aimez pas ce logo Visa ici, vous pouvez toujours sauter à l'intérieur et simplement l'utiliser en blanc. Donc, je peux, par exemple, copier ceci. Donc il contrôlerait C ou un clic droit encore mieux copie. Et puis je pourrai aller à Visa, Black and White. Sélectionnez mon VG actuel, cliquez avec le bouton droit sur l'apparence. Et vous allez juste coller dans cette apparence à l'état de ce composant. Je peux le fermer parce que je suis content. Je suis content à quoi ça ressemble ? Et je peux simplement passer à ma MasterCard. Donc, je vais juste double-cliquer ici. Carte de crédit, utilisez ma MasterCard. Et maintenant, vous pouvez voir la puissance des composants juste là. Je ferai la même chose. Donc je vais sauter la perspicacité, MasterCard. Voyons si je l'ai sélectionné. J' ai quelques super voitures, BG, clic droit. On va coller l'apparence. Assurez-vous donc qu'ils sont les mêmes parce que ce sont des cartes de crédit. Ou vous pouvez même aller plus loin et apporter quelques modifications supplémentaires à celui-ci. Revenons donc à nos couleurs, par exemple. Ou encore mieux, vous pouvez simplement sauter ici et rendre celui-ci encore un peu plus sombre. Cliquez ici. Celui-ci un peu plus sombre, ou même aller dans l'autre sens. Donc peut-être pour quelque chose comme ça, peut-être cliquez ici, assurez-vous d'aller dans l'autre sens à quelque chose comme ça. Et je pense qu'ils fonctionnent assez bien ? Je peux aller de l'avant et fermer ça et nous pouvons travailler sur nos cartes de débit. Donc, sur nos cartes de débit, ce que nous allons faire est exactement la même chose. Je vais juste inclure, inclure quelques changements mineurs dans les ajustements mineurs à ici. Donc, je vais une fois de plus sélectionner mon arrière-plan pour la couleur plus foncée. Je vais sélectionner la couleur du disque maintenant. Et quatre en couleur plus claire. Je vais sélectionner la même couleur pour la couleur plus foncée. Nous allons évidemment aller dans l'autre sens autour du tofu, par exemple, dans quelque part par ici. Et pour la couleur plus claire, nous pouvons passer à quelque part par ici. Je peux cliquer avec le bouton droit de la souris afin qu'ils puissent être assis à mon autre jardin ainsi. Cliquez ici. Nous allons choisir une MasterCard. Aspect basé sur un clic droit Je pense que l'Inde a l'air assez bien. Mais une fois de plus, allons-y et faisons certains de ces changements supplémentaires. Peut-être ce très beau bleu, peut-être même bleu plus clair, tout le chemin vers le blanc ou quelque chose comme ça. Je pense que ça va bien marcher. Donc maintenant que nous avons terminé, cela, nous pouvons maintenant passer à jeter. Mais avant, peut-être devrions-nous aller de l'avant et finir ces sections. Et pour les sections D, tout ce que je veux vraiment faire est essentiellement de créer des composants pour elles. Et je vais créer différents composants avec fondamentalement le même effet de vol stationnaire. Et fondamentalement, nous allons avoir un effet de vol stationnaire similaire à ici. Donc, nous allons réellement utiliser ces éléments. Donc je vais sauter à l'intérieur juste ici de cette carte de contenu. Je vais utiliser des éléments de lutte contre les mauvaises herbes C. Sortez-les, retournez ici et ouvrez cette carte info PID contrôle v. Je vais inclure mon ou fondamentalement dos positionné et deux ici. Donc je n'ai pas supprimé le protocole BEG d'ici. Sélectionnez donc ces options pour vous assurer qu'elles sont en panne. Je ne suis pas sûr que les blancs déplaçant le disque vers le bas. Il est donc bon de changer cette couleur pour cela, juste pour que je puisse voir mes éléments un peu mieux. Donc un pixel vers le bas, c'est tout. Et ce que je vais faire, c'est simplement sauter à l'intérieur d'eux et il est situé. Donc, voilà, cercle. Je vais juste augmenter légèrement la taille et m'assurer qu'il est là. Carte BG s'assure que vous êtes de la même taille que ce nouveau est. Et vous pouvez toujours vérifier, donc 792587700 à 587. Donc comme ça. Et comme vous pouvez le voir, nous osons fondamentalement, je vais juste le déplacer légèrement vers le bas comme ça. Et c'est très bien. Je vais le faire. Je vais voir Lord, tu es plus tard. Donc, ne jouons pas avec tous ces éléments parce que évidemment maintenant nous avons un peu plus d'espace. Peut-être que je peux même augmenter la taille de D, Donc 20. Allons maintenant de l'avant et tournons vers cela, par exemple, à ici. Où est notre ligne ? Curieux ? Localisons aussi la dette. Voir 20. Maintenant, Dan travaille beaucoup mieux et augmente un peu la taille. Et vous pouvez évidemment jouer avec ces éléments autant que vous le souhaitez. Mais ne soyez pas trop pris dans eux parce que ce ne sont que éléments secondaires parce que ce qui se passe ici est votre principale préoccupation. Ce que je vais faire ensuite est tout simplement plus bas dans l'obésité vers le bas. Mais avant de le faire, je peux peut-être copier et coller ces éléments à tous ceux-ci. Alors appuyez sur Control-C, sautez ici pour sculpter le contrôle BG v. Je vais le positionner jusqu'ici. Voyons voir. Assurez-vous qu'ils sont alignés comme de la saleté sur tous les côtés. Ils le sont. Et si nous changeons encore une fois dans ce contexte, nous pouvons vérifier et voir que tout a l'air beau et propre. Donc, je peux encore une fois sauter à ma voiture BG et faire la même chose pour les premiers qui ont sculpté BG voiture VG. Je vais changer la couleur pour celle-là. Et je vais aussi copier et coller ces deux-là. Alors maintenant, je vais les sélectionner tous les deux. Hit Control-C, juste trié, je peux me voir un peu plus de temps aller aux cartes de débit. Quelque part ici, il avait le contrôle V. Et je vais en fait sélectionner ces éléments, maintenir la touche Maj, et tout simplement pousser amorti. Et pour voir ce que j'ai fait, je vais à nouveau changer la couleur de ma voiture BG que j'ai fait. Je vais sélectionner mes deux éléments et les pousser jusqu'ici. Et puis je vais changer ces éléments. Et voyons, positionnez le rejet pour où il est. Donc DES éléments o position dans mon premier. Alors ici. Ces éléments o position dans mon second ici, ce que nous pouvons faire maintenant est simplement abaisser l'obésité de tous vers le bas comme ceci. Donc si vous pouvez vérifier 00 et que je peux faire la même chose pour les cartes de crédit. Donc, où ils sont des éléments placés juste en dessous de notre flèche, Seigneur obésité vers le bas et faire la même chose pour ceux-ci. Donc, maintenant que nous avons terminé cela, tout ce que je veux faire, c'est d'y ajouter quelques survols. Voyons donc, nous séparons les cartes, les cartes de crédit MasterCard. Peut-être que nous pouvons changer ces noms parce que nous allons créer des composants. Alors voyons. Donc les infos de carte de crédit. Et on va le copier. Et ça va être MasterCard. Ensuite, pour celui-ci, nous allons, au lieu du crédit, utiliser les débits et copier et concevoir parce que je suis trop paresseux pour écrire quelques MasterCard et les débits. Et nous l'avons là. Maintenant, nous pouvons simplement frapper Control K, Control K, Control K, Control K. Pour que nous puissions créer tous ces composants supplémentaires. Donc, ce que nous pouvons faire sur ce premier, c'est que nous pouvons en fait, revenons en arrière et utilisons la couleur comme nous l'avons fait avec la couleur originale. Alors appuyez sur le contrôle D. Et quand appeler cette couleur, ou appelons-la carte couleur bg. Faisons la même chose pour tous. Alors fermons celui-là. Contrôleur D, carte, bg, couleur, contrôle D, comme ça. Et enfin pour celui-ci, ce que je vais faire, c'est simplement les sélectionner en mer. Je ne peux pas, je dois choisir un par un. Je vais utiliser Voyons voir, érudit de bureau. Oui. Et je vais l'abaisser à 0 dans notre état par défaut. Cliquez ici, utilisez ce chlorure de couleur jusqu'à 0 en utilisant ma touche 0 sur mon clavier. Juste ici, 0. Retournez à ici. Et enfin celui-ci, changez la couleur et tout le retour à 0. Et ce sont tous nos changements sur nos principaux États. Maintenant, ce que nous allons faire est simplement de créer des états de couverture pour tous. Et je vais simplement vous montrer comment vous pouvez ajouter un peu plus d'intérêt à votre design. Donc, pour créer ces états Howard, la seule chose que je vais faire est vraiment assez simple. Donc créer un pouvoir de qualité de l'Etat. Copiez ce texte pour que je puisse l'utiliser plus tard. Et sur notre carte de crédit, voyons, peut-être qu'on peut sauter à l'arrière-plan de la carte de crédit. On peut ajouter un peu d'ombre. Voyons voir. Donc 5510, par exemple. Oh désolé. Une fois de plus utilisé ce mauvais. Alors allons à notre chariot. Donc carte Bg, nous avons déjà cette ombre, mais nous allons la changer. Donc 55 et Sen, et voyons, dix dans l'obésité. Donc nous voulions juste se démarquer un peu. Donc je vais voir, juste pour me rappeler que 5, 5 à 10. Ensuite, je vais utiliser ma flèche et la déplacer 20 pixels vers le bas, comme ça. Ensuite, je vais inclure mes éléments de retour. Et enfin, inclure ma couleur de retour. Et les éléments vont en fait être dix. Voyons voir, 20. Nous allons nous retrouver à 151815 va bien fonctionner. Vous pouvez toujours lire tout ça. Et, mais parce que je voulais juste faire un changement rapide, échangez ça en blanc. Juste pour que vous puissiez le voir un peu mieux parce qu'il est toujours appelé à l'action à la fin de la journée. Donc état par défaut, état Horace. Et nous pouvons toujours sauter au prototype et planer sur la dynamite stationnaire. Note facile. Et voyons 0,4 seconde. Utilisons ça. Et nous allons utiliser la facilité dans la sortie au lieu d'un résultat. C' est fondamentalement ça. Essayons et voyons si ce premier fonctionne. Et avant de l'appliquer à tous ces autres. Donc nous l'avons ici. Comme vous pouvez le voir, cela fonctionne très bien. Nous avons toutes ces formes. Mais ce que nous pouvons aussi faire est peut-être dans notre état d'origine, peut-être que nous pouvons pousser ces formes. Donc il y a, on peut les animer juste un peu. Alors faisons ça. Donc, dans notre état par défaut, ce que je peux faire est simplement montrer ma couleur, montrer mes éléments, juste triés, je peux les voir. Donc, dans notre état par défaut, allons simplement déplacer notre croix hmm. Voyons voir. 20 pixels, non ? Ligne 20 pixels, droite, encerclé 20 pixels vers le bas. Et ce cercle de mosquée, voyons, 20 pixels vers le bas. Donc c'est en bas, c'est en bas, c'est juste, et c'est juste d'avoir à se souvenir de ça. Abaissons-les en arrière plus le col lamda en arrière. Et vérifions nos résultats. Voyons si c'est et nous donner une sorte d'intérêt visuel. Voyons voir. Rien ne s'est vraiment passé avec eux. Alors explorons un peu plus et voyons ce que nous pouvons faire. Alors voyons en vol stationnaire, peut-être que nous pouvons essayer de les déplacer là aussi. Donc, les éléments, voyons, croisent 20 pixels et ce 20 pixels gauche a induit 20 pixels vers le haut. Et ce fond dit C 20 pixels vers le haut aussi. Voyons si ça a fait une différence. Voyez à quoi ça ressemble. Ici. Comme vous pouvez le voir, il est ajouté juste un peu de mouvement en arrière-plan. Donc ce qui est parti, ça, a laissé ça et ça en haut. Alors faisons ça pour tous. Alors passons maintenant à celui-ci. Et ajoutons fondamentalement la même chose. Souviens-toi donc phi 5-10. Donc, nous avons l'état par défaut ici. Voyons la carte de crédit, BG, Shadow 55. Et on va baisser l'ombre ici. Et je vais en fait faire la même chose pour l'état par défaut ici. Donc voiture B, G, j'ai appris par 5-10, juste pour que je puisse rendre cette animation un peu plus intelligente. Auparavant, il est imprimé. Vous pouvez le voir. Ce n'est pas la chose la plus lisse au monde, mais elle est encore plus petite qu'avec cette ombre de fond. Alors, continuons maintenant et éditons celui-ci pour que nous puissions le faire. Tout d'abord, voyons ce que nous pouvons faire ici. Nous avons notre couleur, nous avons nos éléments. Et créons rapidement un effet d'horreur. Donc, hover états, et cela va être appelé évidemment à l'intérieur du hover ou nous allons inclure cette couleur. Nous allons inclure les éléments, mais laissez-les être à 15%. On va laisser C déplacer ce cercle jusqu'à 20. Déplacez-vous sur ce cercle jusqu'à 20. Et ces deux-là vont être déplacés à gauche 20 pixels aussi. Ensuite, carte de crédit, BG. Nous allons nous assurer que ce soit à dix ans. Et enfin, nous allons changer les indies en, en blanc. Et nous allons aussi déplacer la flèche de 20 pixels vers la droite. Alors vérifions ça et voyons comment ça marche maintenant que nous en avons deux. Voyons voir. Donc nous avons celui-là et nous l'avons. Ce que nous devons faire pour cette seconde, c'est de sauter à l'intérieur et de changer la durée. Donc, si vous vous souvenez que c'est 0.4, vérifions ça. Prototype. Donc si je clique sur celui-ci, donc nous avons un vol stationnaire. Facile maintenant, 0.4. alors que sur celui-ci, nous avons notre facilité sur 0.3. Donc, c'est la différence est dans notre 0.4. et maintenant si je le teste, 43. Créer du design 5: Allons de l'avant et continuons avec notre page suivante. La page suivante est investir. Encore une fois, la même chose que nous avons toujours fait avec ces pages. Assurez-vous que nous sommes à 70 ans. zoom avant, double-cliquez et modifiez ceci pour faire appel à la conception. Laisse-moi déplacer mon micro un peu plus loin. Et je vais faire la même chose encore une fois. Donc, utilisez le NAV principal héros, café. Sélectionnez ces deux, supprimer u pour contrôler la position basée sur V8 m ici. Et je changerai de décès une fois de plus, il faut donc investir. Alors cliquez ici. Et maintenant, allons de l'avant et commençons à travailler sur notre conception. Alors laissez-moi rapidement sauter à l'intérieur et copiez et collez mes nouveaux textes ici. Donc investir dans un avenir brillant. Voyons comme ça. Et voyons, peut-être qu'on peut même y ajouter de l'épice. Donc, au lieu de simplement faire défiler vers le bas, nous pouvons cliquer ici. Tout peut nous emmener ici. Alors voyons à l'intérieur de lui un héros, nous avons le texte et voyons le bouton principal. Nous choisissons le vol stationnaire. Et passons à un prototype. Et à l'intérieur de l'état d'horreur, on peut cliquer. Le déclencheur est survoler, taper , auto, animer et choisir une destination. Ou nous pouvons changer cela pour faire défiler aussi. Ainsi, lorsque l'utilisateur survole, il peut cliquer et il va faire défiler jusqu'à cette partie suivante. Nous allons donc choisir des investissements. Donc, il va faire défiler jusqu'à là. Donc si je vous ramène encore une fois vecteur le désir et aller au héros, allez au texte. Je veux revenir à l'état par défaut de mon bouton. Et je peux cliquer sur l'aperçu, l'agrandir. Donc, en survolant et en cliquant, ça va m'emmener dans cet espace. Évidemment, cette navigation est comme ça parce que nous ne pouvons pas l'adapter. Mais vous pouvez imaginer que cela peut être, par exemple, quelque part ici coder. Ainsi, les utilisateurs pourront voir cette partie un peu mieux. Et bien sûr, c'est là que vous entrez en tant que concepteur, vous devez expliquer ces choses aux développeurs afin qu'ils puissent le comprendre un peu mieux. Maintenant, allons sauter à l'intérieur et je veux changer cette image. Donc je vais glisser et déposer et une nouvelle imagerie de ce gars souriant. Et une fois de plus, comme vous pouvez le voir avec toutes ces images, sont, ont choisi les jeunes parce que c'est le point focal de cette banque. Ils veulent vraiment que les jeunes soient là signifie clients. Donc je vais supprimer cette vieille image, déplacer ça ici. Et enfin, jouons avec ces façon encore plus de chanson de positionner cette écriture ici, par exemple, je vais passer à des endroits de ces deux. Je vais cliquer ici. Comme ça, par exemple. Oui. Et je vais positionner le bureau pour être ici. En savoir plus est fondamentalement va rester le même. Et c'est notre section de héros terminée. Passons maintenant à la section suivante. Et fondamentalement, ce sera la même chose que nous l'avons fait avec tous les précédents. Donc, fondamentalement, je vais juste utiliser quelques icônes. Alors voyons. Je peux les copier et je peux sauter ici dans mes investissements. Je peux les coller ici et AR, et voyons, je peux, parce que ce n'était pas un composant, je peux créer un composant et une icône de retraite. Et je peux sauter pour tous ces gris cliquez moi Klocal, Klocal et faire local. Je peux revenir en arrière et faire la même chose. Je vais donc les sélectionner. Je vais au Niger DEM et j'ai une balle d'ici, 1234. Et maintenant, je peux aller et commencer à inclure ces icônes à l'intérieur. Donc je vais mettre l'éducation ici. Je supprime celui-ci et contour la couleur et les formes. Voyons voir. Donc je vais à la résolution de la Floride plus tard. Mais comme vous pouvez le voir, c'est approprié. Et c'était, voyons notre sélecteur. Alors nous allons le renommer. Et vous pouvez double-cliquer sur le contrôle v, pas de contrôle clique V. Appuyez sur Entrée pour confirmer. Et c'est essentiellement obtenir l'éducation est terminée, immobilier ou le déposer. Une R-star à distance. Sécurité familiale troponine, retiré le début et la retraite et faire la même chose fondamentalement. Donc maintenant que c'est terminé et nous allons aller de l'avant et faire un saut rapide. Alors contrôlez s. Et maintenant ce que nous voulons faire, comme vous pouvez le voir, nous avons ce texte ici, et c'est une section un peu différente des sections précédentes. Mais fondamentalement, comme je l'ai dit, presque exactement la même chose. Ce que je veux faire d'abord est d'utiliser un bouton pour ces deux, parce que comme je l'ai dit, nous allons copier cette information est la même que nous l'avons fait pour les exemples précédents. Donc, ce que je vais faire est de localiser mes boutons ou par exemple, ce que je veux en savoir plus. Voyons voir, peut-être que je peux même l'utiliser juste pour qu'on ne fasse pas trop défiler vers le bas. Et sautez à l'intérieur de notre section info. Ouvrez les deux et je vais sauter ici. En savoir plus positionnez-le ici. Je vais enlever celui-ci, devrait contrôler le suintement. Sautez dans la section suivante. Contrôlez V pour faire plus avec en dehors de la façon dont ils le font, assurez-vous qu'il est aligné et supprimez celui-ci. C' est essentiellement ça pour celui-ci. Et maintenant laissez-moi sauter à l'intérieur et commencer à les éditer. Donc, en fait, faisons-le dans l'autre sens sur son ouverture tous ces dossiers. Et commençons par cette info. Glissez-le à l'intérieur d'ici. Contrôle D, faites glisser celui-ci ici. Contrôle D, faites glisser celui-ci ici. contrôle que vous dirigez est un ici, juste ici. D' accord. Donc maintenant je peux fermer tous ces DEM élevés complètement. Et maintenant, je peux sauter à l'intérieur de ma section d'information. Je peux ouvrir tout ça et voyons. J' ai déjà édité ces deux-là, donc j'ai juste besoin d'images. Alors laissez-moi ouvrir mon dossier d'images et voyons, je peux glisser et déposer mon image à l'intérieur. Ça a l'air bien. Oui. Et je vais faire glisser et déposer une autre image ici, comme ceci, mais je vais double-cliquer et je vais l'agrandir en utilisant ma touche Maj. Quelque part par ici. Je pense que ça va bien marcher. Donc comme ça. Ou peut-être que je peux encore plus avec jusqu'à juste pour que nous puissions couper cette partie de notre image. Je pense que la mort fonctionne bien. Et maintenant, parce que c'est terminé, je peux cacher mon éducation. Je peux passer à mon immobilier. Et voyons, pour l'immobilier, ce que nous pouvons faire, c'est que nous pouvons jouer avec eux encore plus. Laisse-moi sauter rapidement à l'intérieur de là. Et je peux commencer par copier ces meilleurs textes ou voyons, comme ça. Évidemment, c'est beaucoup plus difficile pour moi parce que je l'utilise pour les fichiers Adobe XD. C' est pourquoi cela prend beaucoup plus de temps qu'il ne devrait l'être. Mais fondamentalement, tout ce que vous devez savoir est que vous obtiendrez cette information dans une sorte de fichier Word ou un fichier texte ou quelque chose comme ça. Donc ça va être beaucoup plus facile pour vous d'éditer ça que moi. Et évidemment, vous n'allez pas parler à la caméra ou au microphone. Donc tout ça va être beaucoup plus rapide pour vous les gars que pour moi. Donc je vais écrire ici, je vais continuer là où je me suis arrêté et je vais changer tout ça. Comme ça. Ensuite, je vais inclure mes images dans. Alors commencez par celle-là. Je vais peut-être plus avec juste un peu vers le bas. Donc il y a la tête des gars est dans le cadre comme ça. Et enfin, je vais faire glisser et déposer cette image à l'intérieur d'ici. Je vais double-cliquer à l'intérieur, maintenir la touche Maj Alt et le clic gauche pour que je puisse le mettre à l'échelle, les positionner dans le cadre, peut-être un peu vers le bas, comme ceci. Et c'est fondamentalement tout pour cette section. Je peux fermer tout ça. Tout a l'air très bien. Je peux cacher celui-là, l'avoir montré. Et je peux ensuite sauter en arrière et commencer à éditer mort le suivant. Alors voyons. Ce suivant est la pointe de la famille des graines. Donc ils vont appeler ça investir dans votre famille. Mais avant de passer à autre chose, revenons à l'immobilier et renommons ça. Donc, à l'intérieur de nos infos, nous avons le fonds immobilier Newark. Et cela va être appelé de nouveaux Euro cash non bancaire. Et juste pour que nous puissions continuer à manger des souris, Lee et constamment. Donc, nous allons le montrer en arrière. Et voyons, continuons maintenant à ajouter les informations. Évidemment, cette partie pour vous est la plus ennuyeuse à regarder, mais ce que vous pouvez faire, ça fait partie de chaque design que je fais. Donc, vous devez toujours travailler avec ce genre d' information et il est toujours préférable si vous pouvez montrer à vos clients à de vraies informations plutôt que juste ce texte ennuyeux ou Lorem Ipsum qu'ils voient. Peut-être que certaines personnes ne comprennent pas vraiment ce que c'est. Peut-être que vous ne pensiez pas là aussi, vous avez utilisé une sorte de langue qu'ils ne comprennent pas. J' avais en fait un client qui a été offensé par lorem ipsum parce qu'il a enseigné que je jouais à une sorte de jeux avec eux, mais je ne l'étais vraiment pas. Donc tu auras tous les adultes roi. Donc, cela va être num manchon vierge t, trouver plus. Et ce dossier va être stimulé fonds tiré comme ça. Et enfin, passons maintenant à la retraite et à la dette. Voyons voir. Donc inverse l'intérieur paisible demain comme ça. Et voyons, cela va conduire appelé avenir de la nouvelle banque. Je suis prêt à copier et coller ce texte dans. J' ai essayé de travailler le plus vite possible pour vous et de parler en même temps. Quoi ? Parce que je ne veux pas que tu te battes avec cette section. Mais comme vous pouvez le voir, c'est la partie qui dure le plus longtemps. Alors voyons. Je peux glisser et déposer mon image ici. Et l'image finale va aller juste ici. Et enfin, allons de l'avant et renommons ce genre de, c'est un nouvel avenir bancaire. Et c'est votre fonction euro comme celle-ci. Et c'est fondamentalement tout. Maintenant, allons de l'avant et commençons à travailler sur ceux-ci. Donc fondamentalement, ce que je veux faire avec ceux-ci, c'est que je voulais d'abord cacher toutes les informations. Comme nous l'avons fait pour tous ces autres. J' appuie sur 02 fois sur mon clavier. Nous avons des investissements évidemment, donc il contrôlerait la clé, convertirait ça en composant. abord, l'État va être l'éducation. Donc, pour l'éducation, je veux cacher ma couleur de fond. Je veux montrer mes informations. Et créons un second état, qui va s'appeler Immobilier. Pour l'immobilier, même chose. Alors je vais les cacher. En fait, ils les ont ramenés. Désolé. Je vais me battre contre cette information. Je vais aller à mon icône de l'immobilier, cacher mes couleurs, et montrer mes infos. Cliquez ici, un nouvel état. Je vais changer ça à la sécurité familiale. Ensuite, je vais me débarrasser de mes biens immobiliers. Cachez mes infos, ou revenez à la sécurité familiale, cachez ça, montrez ça. Comme vous pouvez le voir, quand vous commencez à travailler et que vous commencez à répéter les tâches de Baldi, tout devient beaucoup plus rapide parce que vous répétez ces bureaux ou un Oregon. Et cachons ça. Montrons ça. Cachons la dose, et c'est tout. Maintenant, revenons à l'état par défaut et passons à l'intérieur de notre prototype. Je vais maintenant cliquer ici, choisir ceci et utiliser le robinet ou pour animer est dans notre 0.4. secondes. Choisi à bord va aller à l'éducation. Choisissez le même, l' immobilier, la sécurité familiale, et enfin, une retraite. Je vais fermer tous ces points à nouveau et aller à mes études. Immobilier. Cela va être l'autonomie de la sécurité familiale. Et ce ne sera pas une retraite. Donc, vous pouvez voir parfois vous pouvez avoir tous ces pépins comme jusqu'à présent. Il nous a montré mort qu'il voulait faire défiler vers une section pour une raison quelconque et nous ne voulions pas le faire. Donc, nous devons juste jeter un oeil à ceux-là. Donc l'éducation à l'autonomie, ce sera la sécurité familiale, ce sera une retraite. Fermons les vieux. Et enfin, nous allons travailler sur ces deux-là, qui sont notre dernier. Il s'agit donc de l'éducation, immobilier, et à la retraite. Et enfin, passons à notre dernier état qui est l'analyse de la retraite sur les morts. Donc l'éducation, l'immobilier, la sécurité familiale. Et qu'il permet de fermer tous ces éléments, de revenir à notre état d'éducation, ou nous pouvons même aller à l'état par défaut, appuyez sur l'aperçu pour voir comment cela fonctionne. En fait, nous allons sauter d'ici à ici. Donc, vous pouvez voir que cela fonctionne. Cliquez sur l'éducation, l' immobilier, la sécurité familiale, et les retraites ou les travaux d'édition ou bien comme il se doit. Oui. Et tout ça a l'air sympa. Et dans ce premier, nous avons des états Horace. Mais comme je l'ai dit plusieurs fois dans les deuxièmes, dans les deuxièmes, nous n'avons pas comment les états. Donc, une fois de plus, si quelqu'un connaît la solution pour ce problème et faites-le moi savoir et je vais le corriger et faire une mise à jour pour tous vos gars. Alors ce que nous avons le prochain, sécurisez votre avenir. On va évidemment travailler là-dessus. Et voyons voir. Permettez-moi d'abord de copier N3C et le texte de bureau dans d'autres, puis de sauter dans ma formation en investissement en quatre. Je vais utiliser ce Watson parce que c'est un peu le plus proche. Contrôle V. et laisse tomber la position C, Lindert. En savoir plus va rester. Permettez-moi donc de sélectionner ce texte. Très bien, fermez-le. Et c'est à 40 indices à quatre, disparaître le futur est ce qui va être écrit juste là-dedans. Permettez-moi de prendre rapidement mon image, faire glisser et de le déposer dans un style de vie qui ressemble à. Je vais aussi prendre ces quatre decks parce que je vais l'utiliser comme une pile plus tard dans mon design responsive. Et c'est fondamentalement, c'est la seule chose qui nous reste à faire pour cette page particulière est de travailler sur notre pied de page. Donc, je vais frapper le contrôle C, supprimer le contrôle v, s'assurer qu'il est en panne, positionnez-le jusqu'au bas. Et puis je vais revenir à mon état d'origine et à mon pied de page d'origine. Voyons voir, nous avons ensuite investi. Donc je vais m'ouvrir dans ces cartes, je vais choisir toutes ces cartes. Alors appuyez sur le contrôle C, le contrôle V. Assurez-vous qu'il est juste ici. Le décalage des nouvelles et une flèche droite l'ont positionné juste ici. Donc, sous investissement, nous avons toutes ces choses, donc nous avons de l'éducation, nous avons de l'immobilier, nous avons la sécurité familiale. Et enfin, nous avons la retraite. Comme ça. Enfin, je vais les regrouper tous appelés « Invest ». Et encore une fois, la raison pour laquelle je travaille sur ce premier est parce que, comme vous pouvez le voir, cela se traduit bien dans tout cela. Donc, dans la prochaine vidéo, nous allons travailler sur la plage numérique et dessiner le disque deux sont belle et rapide conclusion. Je vais également inclure dans certaines des autres vidéos d'autres liens qui vont aller ici. Et puis, enfin, si vous allez travailler à la transition entre ces pages, dès que nous aurons terminé cette prochaine et que nous passons à la page d'inscription de connexion parce que pour l'instant nous n'avons pas inclus de transition. Donc, si vous avez essayé de cliquer sur l'un de ces éléments, il ne vous emmènera nulle part parce que ces clics n'étaient pas connectés comme ils sont, par exemple, avec cette plage. Donc c'est tout pour cette vidéo. Je vous verrai dans la prochaine quand nous commencerons à travailler sur cette page numérique. Et nous allons inclure d'autres images. Et je vais vous montrer d'autres trucs et astuces. Alors je te verrai là-bas. 44. Créer du design 6: Allons maintenant et commençons à travailler sur la dernière page, qui est affichée ici pour le numérique. Donc, je vais tenir mon ancienne position clé à ou ici, zoomer. Ça va être un design numérique comme ça. Nous allons faire la même chose que nous l'avons fait pour tous ces précédents. Donc, positionnez-le ici, déplacez ça vers le bas. Et enfin, je vais choisir mon NAV principal, choisir numérique, et c'est notre dernier état, comme vous pouvez le voir. Enfin, je vais remplacer ce texte comme ils le font toujours. Tellement mature. Et est-ce que je l'ai remplacé comme ça ? En savoir plus va rester le même. Et vous pouvez aussi le connecter si vous voulez faire la section suivante, mais je ne vais pas vous déranger. Ainsi, vous pouvez toujours explorer dat si vous le souhaitez. Enfin, je veux changer rapidement ces formes. Donc peut-être similaire à la position de celui-ci ici. Je peux positionner celui-là. Je peux faire tourner celui-ci un peu ou peut-être comme ça, juste pour qu'on puisse pimenter un peu les choses. Laisse-moi inclure mon image là-haut, donc c'est dans celle-ci. Je vais me positionner ici. Encore une fois, l'image provient d'éléments invités. J' ai utilisé Photoshop pour le couper et l'exporter en PNG. Et c'est ce que vous voyez ici. Et positionnons ça et derrière le gars du bureau. Voyons voir, peut-être qu'on arrivera ici. Oui, j'ai supprimé l'ancien et c'est essentiellement tout pour le héros. Allons maintenant et passons à ces sections suivantes. Donc, il dit, je veux investir dans, mais en fait, ce qu'il devrait dire est un service pour l'avenir moderne. Donc, parce que je suis déjà allé de l'avant et ajouté un titres indies, La seule chose que je dois vraiment faire est dans ce, et je vais également choisir mon bouton. Donc Control C. Et les boutons vont être fondamentalement le même début et ils vont être appris plus comme ça. Supprimé cet ancien. Et je vais faire la même chose pour tous. Donc je vais supprimer ce pli qu'il contrôlerait V pour coller un nouveau comme celui-ci et m'assurer qu'on est à 40 ans, comme on l'a fait avec celui-ci. Donc 40 partout. Et pour fermer ces, sauter à l'intérieur de contrôle ici V. Une fois de plus 40 supprimer celui-ci qu'il les a organisés et faire la même chose pour ce dernier. Comme ce contrôle V. Juste là. Supprimer. Alors maintenant, allons de l'avant et commençons avec nos textes déjà. Allez-y et finis celui-là. Laisse-moi changer la prochaine. Bagdad. Faites-le moi savoir. J' ai fini ces deux-là comme ça. Et laisse-moi finir ça et la dernière. Encore une fois, vous allez le faire beaucoup plus vite car je copierai et collez à partir de deux fichiers XD différents. Et c'est fondamentalement la seule chose qui nous reste à faire ici est d'ajouter des images. Donc, pour ce premier, je vais ajouter dans cette image, fermer. Et ce prochain sera dans cette image. Je ne vais pas trop les changer parce que je l'ai trouvé comme ça. Donc je pense que ça va être bon. Enfin, choisissez cette image pour l'assistant virtuel. Mais ce qu'on peut faire avec ce type, c'est simplement agrandir un peu notre image. Assurez-vous qu'on le positionne quelque part au centre, quelque chose comme ça. J' y vais ouais. Peut-être un peu plus vers le bas pour que nous ne voyions pas ce bord avant de ce bureau. Et c'est fondamentalement tout. C'est ça. Cette page est terminée. Comme vous pouvez le voir, certaines pages Degas moins désastreux, donc les pages nous prennent plus. Qu' est-ce qu'on doit faire maintenant, c'est revenir au pied de page. Et nous allons choisir MDs contrôle V. et je vais les positionner ici. Donc, je vais les sécher à l'extérieur, les déplacer vers le bas ou je peux simplement les organiser de cette façon, comme si positionné et vers le bas et le groupe narratif au numérique comme ça. Et maintenant, enfin, je vais juste aller de l'avant et remplacer les noms, évidemment tous ces noms. Donc ceux-ci vont contenir ces noms en haut. Alors allons de l'avant et ajoutons les services bancaires. Ajoutons les services bancaires. Ça va être le code QR Bay. Et enfin dans ce dernier est destiné à être réel ou assistant virtuel. Comme ça. Maintenant que nous sommes ici, nous pouvons rapidement ajouter l'un ou l'autre des liens à notre pied de page. Donc je vais encore les copier. Alors frapper le contrôle C, le contrôle V, les positionner ou juste ici, positionné et vers le bas. Sélectionnez un groupe d'autres liens. Et ça va être à propos de nous, contactez-nous. Ça va être des plaintes. Et enfin, la protection comme ça. Maintenant que c'est terminé, vérifions rapidement. Comme vous pouvez le voir, ils se trouvent partout sur chacune de ces pages au lieu de cette dernière. Donc, nous allons rapidement corriger les données. Assurez-vous qu'il est en bas positionné leur main. Terry Howard, nous avons terminé notre anti-sioniste toutes ces pages. Dans la vidéo suivante, je vais vous montrer comment vous pouvez créer ces tombes. Et ils sont vraiment rapides parce que la seule chose que nous avons vraiment à faire, ou faisons-le dans cette vidéo. Utilisez simplement votre ancienne clé. Positionné comme ça. Zoom avant. Nous avons une conception de login. Nous avons un design d'inscription comme ça. Et c'est essentiellement la seule chose que je vais faire, c'est inclure mes formes et inclure mes images, l'Inde. Alors, nous allons rapidement entrer. Je vais faire glisser et déposer mon image à l'intérieur. Nous allons double-cliquer ou réorganiser. Osez comme ça. Il contrôlerait C. Supprimer pour contrôler v, Juste pour que je puisse rendre les choses plus rapides. Les images vont toujours au sommet de toute façon. Et ce qu'il nous faut, c'est notre bouton. Alors utilisons-le. Appuyez sur Ctrl-C. Sauter ici, effacer l'ancien, contrôler V. s' assure qu'on est au centre ici. Voir 75, on veut qu'il soit à 80, donc 12345. Voyons pourquoi ça. Nous allons positionner ceci et vers le bas. Nous pouvons tout sélectionner et le regrouper. Plus. Centre de témoins, dégroupez-le. Contrôle C pour copier ce bouton ici et supprimer le contrôle V. Et voyons, 345678. Je pense que ça va bien marcher. Voyons voir. Ouais, nous allons les regrouper. Voyons ce que nous avons. Et puis peut-être que nous pouvons jouer avec l'espacement et un peu plus. Je pense que ça va bien marcher. Ouais, je pense que 80 va très bien marcher avec cette hanche. Et enfin, dégrouperons ça. Et la dernière chose que je veux faire pour ces deux pages est d'inclure ces formes. Donc, je peux simplement sauter ici et je peux le copier et ces deux formes fondamentalement. Allons-y et faisons-le très vite. Donc, je vais sauter à l'intérieur de mon héros, localiser mes éléments de héros, appuyer sur Contrôle C, et revenir sur, disons la page de connexion. Donc celui-ci, contrôle V pour baser mon héros Elements vieux les a lâchés quelque part juste en dessous de l'aération. Je vais me positionner ici. Et voyons voir, peut-être que je peux double-cliquer sur la position de ce cercle ici. Je peux positionner ce X ici, tourné un peu. Où est ma ligne ici ? Je peux me positionner, c'est quelque part par ici. Voyons voir. Je peux le faire tourner un peu vers un endroit comme ça. Appuyez sur le contrôle C sur tous mes éléments et sautez ici. Tu contrôlerais V, tu l'as traîné jusqu'au bas. Et ce que je peux faire est en fait faire tourner cette position X ici. Je peux ensuite passer à autre chose et mourir d'être quelque part ici, peut-être même faire tourner un peu plus comme ça. Et je peux aussi déplacer mon cercle un peu plus dans quelque part ici, par exemple. Et c'est tout pour cette plage. Que voulons-nous faire ? Voyons voir. Je n'aime pas vraiment ça. Croisez peut-être ici et peut-être qu'il peut aller ici un peu. Oui, c'est un peu mieux. Ce que nous allons faire maintenant, c'est en fait interagir entre deux, ces deux liens. Va à un prototype. Cliquez ici sur celui-ci. Glissez-le. Donc, nous allons utiliser l'étape ou pour animer facilement note zéro point. Voyons voir six secondes. Et je vais aussi faire la même chose pour ici. Et voyons comment ça marche. Donc, ils vont être en mesure de changer rapidement entre ne pas avoir un compte et avoir un compte. Donc, vous pouvez voir comment ça marche. Et toutes ces formes se déroulent très bien. Ainsi, vous pouvez voir la croix et la ligne se morphant vraiment bien. Tout saute en position et ça marche vraiment bien. Donc c'est tout pour cette vidéo. Dans la vidéo suivante, je vais vous montrer comment vous pouvez commencer avec les tableaux de bord et avant de commencer avec le tableau de bord, donc je vais vous montrer comment vous pouvez réellement connecter cette navigation et comment vous pouvez interagir entre tous les ces pages. Parce que maintenant nous avons une page de connexion et d'inscription terminée, et nous avons ce bouton d'inscription de connexion en haut. Et ces deux boutons qui vont nous conduire au tableau de bord lui-même. Alors je te verrai là-bas. 45. Créer du design 7: Bon, continuons maintenant avec écrans de tableau de bord et faisons la même chose comme nous l'avons fait jusqu'à présent. Donc, toute votre vieille clé, position dans la terreur. Et design de tableau de bord. Comme ça. Ou sauter au prototype, cliquez ici et appelez ce garçon juif. Mon père. Retournez au design. Et avant de commencer la conception du tableau de bord, je finirai notre navigation parce que nous voulons connecter toutes ces pages et nous assurer qu'elles fonctionnent. Donc en ce moment, si je sélectionne l' un d'entre eux, si j'appuie sur mon aperçu de bureau, vous pouvez voir que lorsque nous cliquons sur l'un d'eux n'a pas fonctionné. Nous devons donc les connecter tous et nous assurer qu'ils fonctionnent. Donc, comment nous allons le faire est assez simple en fait. Donc on va sauter entre tous ces états. Donc, si vous vous souvenez de cette vidéo, disons que vous devez l'ajouter pour chaque état pour que tout fonctionne correctement, car c'est l'état d'origine ou un état par défaut de ce principal. Maintenant, c'est l'État du compte seul cartes de scène et ainsi de suite et ainsi de suite. Donc, nous devons ajouter est que pour chaque Etat et chaque Etat. Alors comment on fait ça ? C' est assez simple. En fait. Il suffit d'entrer dans votre mode de prototypage et vous pouvez l'ouvrir et le modifier à partir d'ici. Ou vous pouvez simplement copier sur tous ces éléments séparés et faire glisser et déposer ces flèches afin que vous puissiez faire ce que vous voulez avec eux. Nous allons choisir la transition. Destination est des comptes conçus. C' est pourquoi nous utilisons cette abréviation de design. On va utiliser l'animation dissoudre. Et je n'utilise pas d'ennemis auto pour ceux-ci parce que contrairement à une connexion et inscription, ceux-ci, ils ont des éléments différents. Ces deux ont fondamentalement exactement les mêmes éléments. Donc, la transition entre les uns les autres bien, mais tous ces autres ont des éléments complètement différents. Ainsi, par exemple, cette page et cette page. Donc animable auto ne fonctionne pas comme il se doit. Au lieu de la facilité, je vais utiliser Easy and out. Et je vais utiliser 0,4 seconde pour la durée de ma transition. Donc, si je l'emmène à l'aperçu, cliquez sur le compte, vous pouvez voir qu'il fait la transition bien et que la transition ne dure pas une éternité. Donc, ce que nous pouvons faire ensuite est en fait assez simple. On peut sauter à Lawrence et comme je l'ai dit, je peux le sélectionner d'ici. Et au lieu de faire glisser cette flèche, je vais simplement cliquer. Et je devrai choisir ici. Je vais devoir choisir les alongs et le design. Et il va garder tous les mêmes paramètres. Donc, cliquez sur la carte ici, choisissez où il ici, la conception des cartes. Donc, nous y voilà. Investir. Encore une fois, on va faire la même chose. Donc inversé et est allé cliquer localiser investir conçu ici, il est, numérique semble tique et design numérique. Enfin, ce que nous allons faire pour le bouton est de sélectionner notre bouton et, au lieu de l'état par défaut, passez à l'état d'horreur parce que vous voulez les gens passent réellement le curseur et ensuite cliquer. Ils vont donc cliquer sur l'état d'horreur et non sur l'état par défaut. Donc fondamentalement les mêmes paramètres, mais ce don va être une conception de connexion. Donc notre première page ici, donc la discipline. Et je vais revenir à l'état par défaut, et c'est essentiellement tout pour cet état de notre navigation. Nous allons modifier la loi avec ce point plus tard parce que nous sommes maintenant à la page d'accueil et le point de type de logo nous amène à la page d'accueil. Donc, malheureusement, nous devons éditer des données sur chaque écran, mais pas toutes ces autres choses. Alors, allons sauter dans les comptes. Et d'après les comptes, vous allez faire la même chose. Donc notre courant va rester le même logo à ce moment-là. Essayons de l'éditer, mais je ne pense pas que ça va marcher. Non. Comme vous pouvez le voir, nous n'avons pas la page d'accueil conçue ici. Vous pouvez donc simplement cliquer et le faire glisser à l'extérieur. Et cela va fondamentalement annuler votre sélection. Une fois de plus, les autres choisissent ici. C' est là que nous sommes lancés. Les cartes de désir, ici, conception des cartes, investir, fondamentalement la même chose. Alors investissez, concevez le numérique ici. Et voyons le design numérique. Suivant en haut. Laissez-moi vérifier rapidement mon bouton de connexion, voir si le hover fonctionne. Ce n'est pas le cas. Donc, nous devons faire cela pour tous. Donc, où nous sommes l'exploitation forestière conçu Harrier. Mais encore une fois, vous allez le faire sur cet aéroport et ensuite nous allons copier et coller cette navigation dans nos planches. Et fondamentalement, ça va marcher très bien. Donc, je vais double-cliquer choisir mes comptes à partir de ce et où nous sommes sur notre compte et de conception cartes, conception pour choisir le design éclaté, numérique, numérique, InDesign, où nous sommes carrière. Et enfin, encore une fois, notre bouton Horace état. Nous allons choisir un journal dans InDesign, revenir à l'état par défaut. Et maintenant passons à certains de ces autres vu, je vais mettre la vidéo en pause ici et faire les cartes, investir dans le numérique et puis revenir à vous demain. Information. Ok, maintenant ai-je terminé tous ici je suis à mon état par défaut, comme vous pouvez le voir, qui est notre état de page d'accueil. Donc, ce que je vais faire ensuite est de revenir à mon onglet de conception. Je vais copier ce saut de navigation ici, supprimer celui-ci, appuyer sur le contrôle V pour coller celui-ci dans. Et je vais essentiellement sélectionner le compte à partir d'ici. Et si nous revenons au prototype, vous pouvez voir que nous avons tous sélectionné. La seule chose que nous n'avons pas, c'est le point de pression du logo. Mais nous allons rapidement sauté ou concevoir afin que nous puissions baser tous ces dans. Donc, je vais supprimer celui-ci, garder le contrôle V a pris morceau cette position m juste en dessous de notre sommet. Maintenant, comme on l'a toujours fait. Je vais juste aller de l'avant et de la base, basée sur la base afin que nous ne perdions pas trop de temps. Nous citons ici et la zone. Et maintenant, nous allons de l'avant et c'est numérique, alors sélectionnez État numérique. Celui-ci est inversé. C' est Cartes. Celle-ci est C, pelouses. Et enfin, celui-ci est des comptes et il est déjà sélectionné. Maintenant, ce que nous pouvons faire est de sauter en mode prototypage. Je peux zoomer un peu pour que nous puissions voir tous nos tableaux. Et que voulons-nous faire essentiellement est utilisé beaucoup avec le point DAP, qui est ce juste ici. Cliquez et faites-le glisser vers la page d'accueil et c' est tout car il va contenir toutes les mêmes informations. Donc, ce que nous devons faire ici parce que nous étions sur la page d'accueil et vous n'êtes pas en mesure de sélectionner la page d'accueil de la page d'accueil. C' est pour ça que nous devons le faire, ici. Mais comme vous pouvez le voir, c'est vraiment rapide et facile et magasinez quelques secondes seulement. C' est donc la clé de cette navigation. Il continue de répéter et de répéter, et c'est le principe de base de l'interface utilisateur et de la conception UX est la répétition. Donc tout se répète tout le temps. Donc, Dairy, comment il est maintenant nous avons tout terminé et pourrait revenir à l'état de conception. Je peux cliquer sur l'aperçu de mon bureau pour sauter à l'intérieur de mon aperçu et vous montrer comment tout fonctionne. Comme vous pouvez le voir, nous avons tous ces états sur lesquels nous avons travaillé. Donc maintenant ajouté des comptes cycliques et cliquez sur les prêts, cliquez sur les cartes, investir numérique, tout fonctionne comme il se doit. Et je peux aussi cliquer ici pour revenir à la page d'accueil. Ainsi, vous pouvez voir comment cette transition fonctionne avec la dissoudre. Je pense que ça marche bien. Et la réforme ici quand vous passez le curseur et cliquez ici, cela va vous conduire à l'écran de connexion. D'ici. Vous pouvez vérifier ces deux-là. Et vous avez cette belle animation. Et j'ai juste remarqué que nous n'avons pas réparé ces boutons pour vous connecter et vous inscrire. Alors faisons ça maintenant. Donc je vais sauter ici. Sauter à notre texte, écrire mécontent Login. Je vais le copier et aller à notre état d'horreur, comme cet état par défaut. Et sur ce prochain, je vais lui écrire pour s'inscrire. Comme ça, allez dans notre état d'horreur, inscrivez-vous sélectionné, laitier, et revenez à l'état par défaut. Donc, une dernière chose qui nous reste à faire pour cette vidéo, et nous allons réellement commencer avec la conception du tableau de bord dans la vidéo suivante est connecter la connexion et de vous inscrire à cet écran de tableau de bord. Alors passons au prototype. Cliquez sur celui-ci. Je vais aller à l'état d'horreur et le traîner parce que c'est juste là. Et je vais essentiellement utiliser les mêmes paramètres dette que nous avons utilisés. Donc, je vais revenir à l'état par défaut. Cliquez ici. Allez au survol, enchaîné comme ceci, et redéfinissez-le à l'état par défaut. Alors passons un aperçu et voyons à quoi il ressemble. Donc, je vais cliquer ici pour l'afficher en prévisualiser. Encore une fois, nos animations fonctionnent vraiment bien et tout fonctionne comme il se doit quand vous, cependant, cela va vous ramener à cet écran. Et testons ça ici. Alors passons à l'inscription en survol. Et ça marche comme ça. Donc, dans la prochaine vidéo, nous allons commencer à travailler là-dessus. Et nous allons connecter tout cela pour que nous puissions basculer entre tous nos différents écrans, que nous allons concevoir plus tard, juste pour vous montrer à quoi ressemblera cette animation, comment elle va travail, tout ça. Et je te verrai dans la prochaine vidéo. 46. Créer du design, 8: Maintenant que nous avons terminé notre navigation, passons à l'intérieur de notre conception de tableau de bord. Et je vais zoomer un peu plus près pour que tu puisses voir. Et fondamentalement, la conception du tableau de bord de bureau va refléter ce que nous avons déjà fait jusqu'à présent. Donc, fondamentalement, nous allons avoir exactement les mêmes paramètres ici en termes de couleur, en termes d'images, en termes de style et ainsi de suite. Nous allons simplement adapter cela à la conception du tableau de bord, aux principes du tableau de bord et ainsi de suite. Alors commençons à partir de notre navigation. Donc, nous avons décidé bar juste ici. Et la première chose que je vais faire est en fait sur les éléments sélectionnés. Nous sommes donc sélectionnés ici sur le tableau de bord. Je vais changer la couleur de l'icône du tableau de bord. Donc je vais utiliser dans cette couleur ici, je vais l'appliquer. Et voyons si cela s'appliquait. Il l'a fait. Et je vais laisser le texte du tableau de bord tel qu'il est. Je vais également cliquer ici pour que je puisse changer cela pour ressembler à ceci. Et peut-être pourrions-nous travailler sur notre navigation un peu plus tard une fois nous en aurons créé d'autres. Donc, je peux aller de l'avant et en faire un composant pour l'instant. Alors appuyez sur la touche Contrôle, et ce sera juste notre état par défaut, mais nous allons travailler sur les autres états, litre. Ou je peux même le faire de temps en temps nous allons faire des animations plus tard. Alors faisons ça maintenant. Donc, comme je l'ai dit, nous sommes sous l'état par défaut. Passons maintenant au nouvel état. Nous allons appeler ces données de compte. On va ouvrir un compte profond. Et nous allons déplacer ce Sélecteur au centre de notre compte. Nous allons revenir à cette couleur grise afin que je puisse sélectionner les deux en simple clic sur la couleur grise. Je vais sélectionner mon compte. Et si je vous ramène ici, et que nous pouvons passer à l'état par défaut, je peux cliquer ici et voir cette couleur. Donc c'est mon collier que je vais finir par utiliser pour tous. Revenons maintenant à la section Compte et nous allons le sélectionner et choisir cette couleur. Et pour l'icône elle-même, sélectionnons-la. Je vais utiliser cette couleur. Donc je peux revenir en arrière, créer un nouvel état et je vais l'appeler des transactions comme ça. Et dans celui-ci, je vais simplement sauter ici. Sélectionnez cette couleur grise. Cliquez ici, cliquez ici. Maintenant que nous avons des données, nous pouvons passer à l'état suivant. Et cet état, je vais l'appeler pelouses pour les prêts. Encore une fois, désolé. On peut revenir aux transactions et j'ai oublié de déplacer le sélecteur de bureau. Je suppose. On peut retourner dans les poumons et longtemps, je vais m'assurer que je change ça. Donc, une fois de plus, cela va être, cette icône va être décolorée. Et enfin, nous allons passer à autre chose. Les transactions vont être créées. Et voyons vite ce que nous avons jusqu'à présent. Donc, nous sommes à l'état par défaut, les transactions de compte et les poumons. Passons maintenant et créons un nouvel état. On va l'appeler courant. Et sur les cartes, nous allons encore changer ça. Revenons à nos couleurs. Je vais choisir cette couleur et pour mon icône et aller avec le vert. Fermez ceci. Et créons un nouvel état. On va appeler ça des investissements, comme ça. Pour cela, je vais le déplacer encore une fois. Retourne à mes couleurs. Sélectionnez celui-ci. Encore une fois, nous avons cette répétition, mais ce que vous pouvez faire de UI UX Design dans son ensemble. Alors passons au numérique, qui va être notre dernier état. Mes investissements de dette. Assurez-vous qu'il est gris sur le numérique. Et cliquez ici pour l'icône. Et c'est fondamentalement tout. Passons maintenant rapidement à travers. Donc, nous avons numérique, nous avons des investissements, des cartes, des prêts, des transactions, des comptes, et l'état par défaut va être notre tableau de bord. Si vous vous demandez pourquoi je n'ai rien créé pour la déconnexion. Fondamentalement, lorsque les utilisateurs cliquent sur la déconnexion, ils vont être reportés à l'écran d'accueil. C' est pourquoi la déconnexion est là. Vous pouvez également travailler avec votre client et avec vos développeurs si vous voulez les ramener ici. Mais par exemple, dans mon cas, je pense qu'il est beaucoup plus intelligent de les ramener à la page d'accueil parce qu'ils veulent peut-être explorer certains services supplémentaires que votre client a à offrir. Et quand ils sont ici sur les pages de connexion et d'inscription, et qu'ils ne sont tout simplement pas de navigation, donc ils ne peuvent pas sortir de leur, ils peuvent simplement se reconnecter. C' est donc le bénéfice. Si vous les ramenez à la page d'accueil, ils peuvent naviguer aujourd'hui où ils se trouvent et simplement choisir la date de service souhaitée. Alors continuons maintenant et j'ajouterai rapidement mon image ici. J' ai donc ces images sur mon ordinateur. J' étais simplement glisser-déposer un dans mon ordinateur à l'intérieur. Vous pouvez le voir ici. Et j'utilise ces images et celles-ci sont en fait d'une éclaboussure. Et je l'ai fait il y a des années, je les ai effectivement coupés, inclus ici, mais vous pouvez également utiliser les paramètres de plugin. Ui faces est le plug-in où vous pouvez prendre ces images de nous plaisir et ainsi de suite. N d a déjà fait le travail pour vous. Mais j'ai ces images sur mon ordinateur et encore une fois, elles sont libres des États-Unis. Blush, et je les ai créés il y a des années, pourrais-je penser à quelque chose comme 50 visages masculins, 50 visages féminins, quelque chose comme ça. Alors passons maintenant et commençons par inclure nos informations. Et changeons ça en TNT diarrhéique. Voici donc vos statistiques pour, disons décembre 222211, par exemple. Bienvenue Michael. Je pense que ça marche bien. Comptes principaux tout ce que nous avons créé. Allons maintenant aux cartes. Donc nous allons appeler cette carte de débit. Et c'est l'état qu'il montre déjà, donc jusqu'à cette date. Donc on a besoin d'une carte ici. Alors allons-y et prenons-en un de la section actuelle. Donc je vais appeler ça, donc je vais frapper Control-C pour copier cette carte. Je vais sauter. Notre tableau de bord, sautez à l'intérieur d'ici, contrôle de plomb V à coller dans ma carte à l'intérieur. Comme ça. Je vais aussi tenir ma touche Maj pour la réduire en taille. Ou je peux même le faire comme ça, comme ça. Donc, ce que nous pouvons faire une prochaine, évidemment, c'est réduire la taille de ceux-ci. Je vais donc revenir au noir et blanc récent par exemple. Je pense que ça marche bien. Et continuons maintenant et commençons par éditer notre logo. Alors utilisons le mur de la loi. C' est la nouvelle banque, c'est la couleur du logo du texte. Alors nous allons le mettre à l'échelle quelque part par ici. Et nous allons simplement zoomer pour que nous puissions déplacer nos attaques quelque part ici. Je pense que ça marche bien. Logo récent, réorganisons juste un peu. Donc, par exemple, quelque chose comme ça. Et vous pouvez également vous assurer que vous êtes en dissuade décapé. Donc, vous pouvez fondamentalement le globe oculaire si vous voulez. Ensuite, je vais positionner mon logo. Voyons voir, 1010 pixels fonctionne bien avec ce cas. Pixels du réservoir. Aller à sélectionner mon texte et voyons où nous pouvons aller avec. Voyons voir 18. Je pense que ça marche bien. Allons-y avec un angle blanc. Je vais ajouter de l'audace ici. Si audacieux, et je vais l'ajouter à mes styles. Je vais le déplacer en bas. Désolé, pas 16, mais ce boulon 18, je vais le déplacer ici comme ça. Je vais aussi m'assurer qu'il est situé ici. Pour celui-là, je vais utiliser, voyons 16 blanc. 16 blanc, et cela fonctionne bien. Dix, voyons. Dix comme la saleté position et dix vers le bas. Ils vont faire la même chose pour ces deux-là. Comme ça. Peut-être 20, oui. Et nous allons aussi positionner et pour que nous puissions le regarder d'ici à ici. Sélectionnez ces options pour vous assurer qu'elles sont au centre. Et maintenant, nous pouvons supprimer celui-ci. Et c'est fondamentalement tout. Maintenant, tout ce que j'ai à faire, c'est retourner à mon panneau de calques. Donc, une fois de plus, nous avons notre carte grise. Je vais supprimer jeter BG et vous pouvez évidemment aller de l'avant et créer la pagination sur l'émission si vous voulez basculer entre votre panier. Et nous pouvons peut-être le faire ici aussi. Alors voyons. Oui, faisons-le. Donc je vais dupliquer ma carte et une fois de plus. Donc nous allons avoir des visas à jour. Nous allons avoir MasterCard et Visa une fois de plus. Quelle qualité solide, voir, crédit. Comme ça. La raison pour laquelle j'ai ces trois est que je vais créer un composant. Et sautons à l'intérieur et voyons ce qu'on peut prendre d'ici. Donc, nous pouvons sauter ici, maintenez le contrôle et cliquez, cliquez avec le bouton droit de la copie parce que nous voulons juste avoir le style de disque pour notre carte. Donc je vais retourner ici, cacher notre première voiture parce que nous l'avons terminée. Je peux cliquer ici, apparence basée sur le bouton droit de la souris afin que nous puissions prendre la dette. Et ce qu'ils veulent faire, c'est simplement utiliser mon logo MasterCard. Je vais le réduire un peu. Je vais m'assurer que c'est dix projecteurs que je vais cacher mon visa. Et c'est fondamentalement tout. Nous avons créé la deuxième carte. Allons-y et cachons celui-là. Nous avons un crédit récent. Voyons ce que nous avons fait jusqu'à présent. Donc ceux-ci sont en fait du crédit. Alors prenons et celui-ci par exemple. Donc, cliquez avec le bouton droit Donc je suis juste intéressé par les couleurs et rien d'autre. Donc, je vais sélectionner celui-ci basé sur un clic droit, apparence basée sur le bouton droit de la souris en fait pas basé. Et c'est fondamentalement tout. Maintenant, nous avons nos trois cartes. Donc, ce que je vais faire est en fait commencer par créer notre composant. Et pour ce faire, je vais tout d'abord positionner ceux-ci maintenant en dessous de notre texte. Et nous allons à l'édition de groupe. Donc il avait le contrôle en g et je vais l'appeler carte. Ou nous allons voir, Dashboard voitures encore mieux afin que vous puissiez savoir dans vos composants ce que tout est. Donc, à partir d'ici, ce que nous pouvons faire est en fait cliquer ici et voir à quoi cela ressemble. Ou en fait, laissons-le là. Peut-être que nous pouvons même aller un meilleur et avoir celui-ci comme sélectionné dans ceux-ci ne sont pas sélectionnés. Je l'aimerai encore plus. Alors fermons le et frappons le contrôle, kay, juste pour créer un composant. C' est donc notre état par défaut. C' est notre prochain état. Appelons ça, je ne connais pas l'état ou le panier. Deux. Comme ça. Ce que nous allons faire dans celui-ci est de cliquer ici, puis de choisir cette couleur. Cliquez ici, choisissez cette couleur car ils vont changer. Ensuite, nous allons réduire cette obésité à 0, juste pour que nous puissions passer à cette carte. Et puis ce que nous pouvons faire est fondamentalement changer cela. Donc nous allons juste lui donner un nom de carte de débit maître. Et vous pouvez changer cela si vous voulez, mais je vais le laisser là parce que c'est juste pour l'exemple de toute façon. Alors fermons maintenant et créons un nouvel état. Donc carte trois, comme ça. Et sur ce nouvel état, nous allons faire exactement la même chose. Donc, je vais cliquer ici, changer dans le disque savant en vert, cliquer ici, changer ceci en gris. Je vais réduire l'obésité des rejets. Pour que je puisse voir Décard. Et je vais l'appeler, Voyons voir, Visa, carte de crédit. Et je vais retirer de celui-ci. Nous avons donc le débit et le crédit. Et c'est fondamentalement, la seule chose qu'il nous reste à faire est évidemment de le prototyper. Donc je vais cliquer sur celui-ci et on va aller à l'état. Donc, la carte aux ennemis auto est dans, dehors et 0.4 seconde, je pense que ça va bien fonctionner. Et on va aller au chariot 3. Allez à l'état suivant. Donc, cela va être un état actuel ou un état par défaut, désolé, cela va être trois actuel. Et enfin, comme vous pouvez le voir, c'est beaucoup plus facile quand vous n'avez pas trop de ces états à animer. Alors passons à l'état par défaut, et ce sera aussi notre carte. Alors passons en mode aperçu juste pour voir ce que nous avons jusqu'à présent. Donc je vais cliquer ici. Vous pouvez voir ces belles transitions entre nos cartes et vous pouvez voir comment tout cela fonctionne. Je pense que ça a l'air vraiment sympa. Alors allons maintenant de l'avant et faisons fondamentalement la même chose, mais avec celui-ci. Donc, ce dont nous avons besoin pour ça, c'est de sauter à l'intérieur. Nous avons en fait besoin que cela s'appelle des onglets d'aide. Et c'est le cas. Voyons donc, nous pouvons sauter à l'intérieur et onclick, nous pouvons sélectionner tous ces éléments. Alors faisons la même chose comme on l'a fait. Donc ça va être notre premier et premier état. J' ai donc déjà copié ce texte. Je vais juste le changer pour le découvrir. Et je vais changer ça en blanc parce que dans une minute je vais juste faire quelques changements dans ce contexte. Donc la première chose que je vais faire en fait, c'est de fermer ce gosse Control D. Et je vais donner une couleur à ça. Voyons donc, Couleur de l'onglet Aide. Mon père, je vais appliquer cette couleur. Et parce que maintenant nous ne pouvons pas les utiliser, allons avec le blanc et allons-y avec ou mieux, peut-être que nous pouvons aller avec cette couleur. Voyons voir. Oui. Et ceux-ci peuvent être blancs. Donc juste pour indiquer que cela est sélectionné, comme vous pouvez le voir, nous avons maintenant quelques changements ici. Donc ceux-ci pour sélectionnés sont verts, celui-ci ne l'est pas. Donc, ce que nous pouvons faire est de sauter à l'intérieur juste ici et de choisir cette couleur. Et maintenant pour cela, nous pouvons réellement aller au vert, juste pour que nous puissions avoir une cohérence entre ces éléments. Donc, ce que nous pouvons faire ici, si vous n'avez pas envie de cette couleur de texte, vous pouvez la changer pour cette couleur. Je pense que ça va marcher très bien. Passons à l'intérieur d'un mode de prévisualisation et voyons à quoi cela ressemble. Je pense que ça va bien marcher. Et ce dont j'ai besoin ici, ce sont les éléments que nous utilisons tout au long de notre conception. Donc, vous pouvez réellement sauter et voir où vous les utilisez. Voyons voir, nous les avons utilisés ici. Revenons donc à notre panneau Calques. Pour que je puisse sauter à l'intérieur, utiliser mes éléments. On a frappé Control C juste pour les copier. Et retournez jusqu'ici et sautez à l'intérieur, positionné juste ici. Donc, il avait le contrôle V et assurez-vous qu'ils sont à 100% juste pour que vous puissiez les voir. Je vais positionner le désarroi ici parce que si vous vous souvenez, nous avons cette mosquée. Je vais positionner tous ces éléments à l'arrière. Ouvrons notre Mars klutzy voiture BG est beaucoup trop grand. Donc je vais l'organiser un peu comme ça. Et voyons voir. Je peux même aller à la couleur de l'onglet d'aide et voir scie pour 6723110. Donc 46123110. Comme ça. Maintenant, il s'adapte parfaitement. Et en fait, je vais juste réduire la taille de ce cercle à quelque chose comme ça. Je pense que ça va très bien marcher parce qu'une fois de plus, vous allez baisser la résolution. Je suis désolé, l'obésité de ces éléments. Je vais m'assurer que ce soi-disant est plus petit. Et on va le voir à dix heures. Je pense que ça marche bien. Où est décrit ici, il est. Nous allons le positionner là ou nous pouvons réduire sa taille aussi. Voyons voir, on peut le changer pour être ici, je pense que ça va bien marcher. Et enfin, nous avons cette croix et toute sa position, voyons ce que nous pouvons faire ici et peut-être que nous pouvons la déplacer vers le haut. Par exemple, ici. Et sur nos éléments, abaissons l'obésité à 15 parce que c'était ce que c'était. Et maintenant, allons de l'avant et créé cela a aidé dap en tant que composant. Donc il contrôlerait la clé. Je ne l'ai pas fait pour celui-ci parce que j'ai juste inclus un composant à l'intérieur avec l'arrière-plan BG d'une voiture, je ne pouvais pas le faire. Donc c'est vraiment à vous de décider. Si vous voulez le faire comme ça ou comme ça, je veux juste vous montrer différentes options que vous avez. Donc, pour l'onglet Aide, nous avons l'état par défaut. Nous allons avoir un nouvel état, C solide, option 1 ou article 1 ou aider un ou comme vous voulez l'appeler. Donc je vais copier cette information. Mon père, comme papa. Donc, fondamentalement, c'est pour aider vos utilisateurs à naviguer sur le site Web. Et sur cette option une, nous allons jouer avec la pagination évidemment. Donc, nous allons choisir ceci pour être vert et cela va être blanc. Et laissez-moi vérifier si c'est blanc. Il l'est. Et fermons ceci et passons à l'état suivant et final. Nous allons donc leur donner une option pour acheter ceci. Dans l'option de, évidemment, nous allons changer cela en vert, va changer cela en blanc. Et je vais aussi changer le texte. Ne correspond pas. Donc basé dans les districts, basé dans ce texte. Et vous pouvez également intégrer le clic si vous voulez résoudre, par exemple, ils peuvent cliquer sur ce texte et il les prendra. Nous avons donc le choix de la carte parfaite. Déconnectez-les à la section panier du tableau de bord. Vous pouvez intégrer le clic évidemment, et quand le clic, il va les emmener là. Mais je ne vais pas faire ça. Je vais simplement leur montrer ce qu'ils peuvent faire. Parce qu'ils regardent cette page d'ici et qu'il peut la lire. Toutes les créatures, le carbone parfait en allant se produire à l'étape. Ici, c'est. Pour qu'ils puissent cliquer là et y aller. Une dernière chose que je veux faire est essentiellement de jouer avec ces éléments. Donc, ici, ils sont dans l'état par défaut. Et je vais commencer à les déplacer juste pour qu'on puisse avoir des dat et des émissions. Donc, je vais faire tourner ça un peu, le positionner ici. Je vais faire tourner ça un peu, le positionner ici. Je vais déplacer mon cercle jusqu'ici, par exemple. Et je vais également déplacer cet outil Oracle ici et peut-être être en place. Et enfin, faisons la même chose pour l'option 2. Donc je vais déplacer ma disposition réticulée et ils sont plus mon ID de disposition Laila là-dedans que mon soi-disant bas encore plus. Et je vais retourner dans ce cercle et le déplacer et peut-être même l'agrandir un peu comme ça. Alors maintenant, nous allons prévisualiser ce que nous avons fait jusqu'à présent. Cliquez ici. Donc, une fois de plus, ils peuvent basculer entre ces cartes et vous pouvez voir les cartes changer exténuant bien entre ces différents états. Maintenant, nous pouvons cliquer ici et nous devons d'abord le prototyper. Désolé, j'ai oublié cette scène. Donc, quand ils cliquent ici, ils peuvent aller à l'Option 1. Cliquez sur Dare est dans l'option deux, donc il utilise les mêmes paramètres à partir d'ici, ce qui est une excellente option une, fondamentalement la même chose. Donc, choisissez simplement État par défaut, choisissez Option 2. Et enfin, vente aux enchères à. Nous allons passer à un état par défaut à partir d'ici. On va passer à l'option 1 d'ici. Et maintenant, nous allons prévisualiser l'aération. Alors vérifions simplement. Tout fonctionne bien ici. Et vous pouvez voir comment ces éléments sont fondamentalement sauter autour, en agrandissant. Et je pense qu'ils ont l'air plutôt sympa et qu'ils ont l'air très engageants. Ainsi, ils peuvent apporter aux utilisateurs et plus de joie en utilisant cette application. Ce que je vais faire ensuite, c'est apporter des détails plus réalistes ici à vos transactions. Alors voyons. Tout d'abord, je vais dégrouper cette grille et je vais l'appeler, voyons. Nous avons besoin de quelque chose comme une transaction. Alors donnons-lui un dat. Donc c'est le premier. Ils vont l'appeler Transaction 1. Je vais dupliquer le texte. Je vais donner cette transaction à et positionné ici. Ce sera la transaction 3. Plus mouillé ici. Transaction pour et si vous savez ce qu'il s'agit, vous pouvez leur donner un nom directement dans une section filaire. Donc, si vous savez que ce sont des transactions, vous pouvez les appeler directement. Là. Mais je ne voulais pas trop perdre ton temps, alors je l'ai mis ici. Laissez-moi changer les montants ici. Alors disons 47.20. Ce prochain sera 270.73 parce que fondamentalement avec ces chiffres, vous n'êtes jamais autour d'elle. Donc, vous n'êtes jamais 270$, par exemple. Vous êtes toujours pointer quelque chose donc juste pour le garder à l'air réaliste ici. Voyons donc 9.43 par exemple. Et donnons ce dernier 171.18. Si vous êtes honnête de voir pourquoi tous ces services sont moins, c'est parce que vous avez payé pour ces services. C' est pourquoi ils sont moins quelque chose. Voyons voir, nous pouvons donner ça aujourd'hui. Je vais le donner aujourd'hui aussi. Ce sera, voyons, le 14 décembre 2020. Et si vous êtes un Américain occidental, UK, vous pouvez changer cela autour de SAW 1214. Donc on est en Europe, non ? Comme ça, tu sais, tu écris l'inverse. Donc, pour ne pas me confondre davantage, vous pouvez les changer pour répondre à vos besoins. Donc, le neuvième novembre 2020, et je vais juste changer cela pour 2020 aussi juste pour garder les choses beaucoup plus cohérentes. Comme vous pouvez le voir, nous allons descendre. Il s'agit donc de la transaction la plus récente et c'est la dernière transaction. Donc, nous allons réellement utiliser ces mêmes données deux fois. Et donnons ce 24820. Comme ça. Je vais en fait copier et coller des noms d'entreprise ici. Ainsi, par exemple, vous pouvez imaginer que vous avez acheté du café. Curio a acheté des vêtements. Ici, u, par exemple, payé pour certains services publics. Peut-être que c'était ton paiement de voiture, disons que c'était de la nourriture. Et le jour même où vous payez votre voiture, peut-être que vous attendiez en ligne. Vous devez donc penser à toutes ces choses pour les rendre plus réalistes. Encore une fois, je vais lui écrire de la nourriture. Je vais écrire joindre. C' est des utilitaires. Et ça va être de la nourriture ou des paiements par carte, désolé. Ça va être de la nourriture. Et enfin dans ce va être proche. Donc, je vais maintenant changer les couleurs de ceux-ci juste pour indiquer comment les utilisateurs vont les voir afin qu'ils puissent les reconnaître un peu plus facilement. Donc, pour la nourriture et la chance de défaut ici aussi, nous allons le changer pour bureau vert plus foncé pour les vêtements. Par exemple. Nous pouvons choisir ça et aller avec, je ne sais pas, voyons, vert plus clair sont si ça n'a pas trop de sens, peut-être que nous pouvons faire un peu plus sombre. Alors peut-être celle-là pour la fin. Oui. Pour les utilitaires pourraient voir peut-être que nous pouvons changer cela en rouge, par exemple, et les paiements de voiture de Floride, nous pouvons aller avec cette couleur juste pour indiquer différentes options et ce que les utilisateurs ont déjà cliqué. Donc, ce que je vais faire maintenant est de copier et coller quelques icônes ici, juste pour que nous puissions les placer dans la bonne position. Alors maintenant, je vais les coller. Missy, et je suis sûre que je suis à l'intérieur d'ici juste pour pouvoir les commander un peu plus gentiment. Donc je vais positionner cette nourriture ici. Je vais m'assurer que c'est dix pixels. Ici. Par exemple, sur 15, voyons, 12345, année 18, la mort fonctionne mieux. Je vais faire la même chose pour sous près. Alors nous allons zoomer un peu. Assurez-vous que je suis dans un centre et assurez-vous que je vais 15. Donc dix en 2.5 utilitaires. J' ai donc cette icône de position ici. Assurez-vous que je suis dans un centre comme celui-ci. Désolé, 12345, donc 15. Et enfin pour un paiement de voiture. Alors ne le fais pas ici. Assurez-vous que je veux dire, en tant que centre 12345. Je pense que cela fonctionne assez bien. Maintenant, changeons leurs couleurs. Donc, pour les paiements de voiture que nous avons découvert, pour les services publics, nous avons cette couleur, les vêtements auraient cette couleur. Et enfin pour la nourriture, nous avons la couleur du bureau. Ce que je vais faire ensuite est de créer des composants supplémentaires. Donc, utilisons la nourriture pour que je puisse utiliser le Control X pour le couper, aller à ma nourriture, frapper le contrôle V pour le coller en position. Je peux les regrouper et appeler ça l'étiquette alimentaire. Sur l'étiquette de pied. Je veux vraiment qu'il ait contrôlé la clé juste pour que je puisse créer mon composant. Et puis ce que je peux faire est d'utiliser cette icône. Donc cliquez dessus devrait contrôler x une fois de plus. Localisez mes vêtements. Donc, ils sont là. Et faites la même chose. Ce ne sont pas des guillemets, tag, clé de contrôle. Et on va fermer ces deux-là. Donc nous recevons nos paiements de voiture à côté de Control X. Désolé, nous avons des services publics, mais soyons gaspillés ici. Écrivez ce contrôle k. Et enfin, nous allons traîner nos utilitaires ici et cultiver des fosses comme ce hit Control K. Et maintenant, enfin, parce que nous avons ces deux répéter, donc la nourriture et les vêtements, ce que nous pouvons en fait, c'est aller ici. Cliquez sur notre nourriture et localisez l'étiquette alimentaire. Ici, c'est. Faites glisser et déposez-le et positionnez-le simplement et en place. Donc ce que je vais faire, c'est juste aligner les choses ici. Parce que je veux que mon texte soit aligné sur notre grille. Ce saut, déplacez-le ici et enlevez la nourriture générale en eau profonde. Mon père. Et vous pouvez toujours sauter perspicacité et voir si vous êtes aligné. Alors voyons comme ça, parce que je voulais être aligné avec ma grille. C'est ça. Et enfin pour les vêtements, Logindata, même. Alors faites glisser nos onglets sont fermés ici. Ici, c'est. Oui, comme ça. Et je vais le positionner ici et m'assurer qu'il est encore au centre, et m'assurer que je suis comme ça. Et c'est fondamentalement tout. Nous avons complété cette section. Une fois de plus, lorsqu'ils cliquent, en savoir plus, ils peuvent accéder aux transactions et ensuite consulter davantage de ces transactions. Pour qu'ils puissent les voir en détail. Par exemple, Starbucks café. Ensuite, vous pouvez intégrer l'emplacement de votre transaction. Vous pouvez intégrer un peu plus de blé, quelle carte, par exemple, profondément payé et ainsi de suite et ainsi de suite. Donc, vous pouvez vraiment plonger en profondeur dans tous ces détails. Ce que je n'aime pas vraiment, c'est l'espacement. Alors peut-être que nous pouvons travailler sur un espacement un peu mieux. Et peut-être que je peux déplacer toutes ces balises pour correspondre à mes lignes de grille. Alors faisons ça. Donc ce que je peux faire, c'est, voyons, déplacer mon étiquette de nourriture ici. Et peut bouger et mes vêtements pour agir ou entendre, les services publics, les paiements de voiture, la nourriture. Et enfin, citez, juste pour que je puisse garder les choses agréables et organisées. Et évidemment, si vous avez le plus grand nombre, si cela s'est terminé, il ne va pas s'adapter, alors vous pouvez déplacer DES juste un peu, par exemple, pour aligner jusqu'à ici, mais c'est vraiment à vous de décider. Et vous pouvez voir avec votre client, quel genre de transactions s'attendent-ils ? Parce que la majorité des gens font effectivement ces petites transactions comme 1597 et ainsi de suite. Mais s'ils pensent qu'ils vont effectuer des transactions plus importantes, alors vous pouvez travailler avec eux, puis adapter votre couche Adaptive Layout à cela. Ce que nous allons faire enfin, ici est le travail sur cette section et nous n'avons pas trop à faire ici est simplement remplacer ces balises et la largeur, celles que nous venons de créer. Alors traînons et dépose-les pour que nous ayons des nuages. Et positionnez-le ici comme ça. Assurez-vous que vous êtes au centre ici. Et je vais le déplacer ici. Ensuite, nous avons de la nourriture, donc la même chose. Assurez-vous que vous êtes au centre de cette nourriture. Et nous allons travailler sur un espacement dans un petit peu. Alors nous allons rapidement positionner alors. Nous avons des services publics. Donc je vais le positionner ou juste ici. Assurez-vous que je suis aligné. Et enfin, nous avons les paiements de voiture sont fondamentalement la même chose. Je vais te montrer un aligné et c'est tout. Ce que je vais faire ensuite est supprimé et ces textes d'ici, je vais placer mes tags ici et je vais les organiser une fois de plus. Donc mods vient sur le dessus et vient ensuite la nourriture, services publics, le paiement de voiture après mort est à l'extrémité inférieure, fondamentalement en ce qu'il. Maintenant, je vais les sélectionner tous et les déplacer juste ici un peu plus près de mon tableau. Et en parlant de graphique, travaillons rapidement dessus. Donc maintenant, nous avons quatre couleurs différentes ici, et nous allons intégrer ces quatre couleurs différentes à l'intérieur pour indiquer la taille d'une dépense l'article est. Par exemple, les vêtements peuvent être sous l'un des plus grands, surtout avec la nourriture. Les services publics sont la deuxième place dans les copayments sont peut-être le troisième parce que les paiements de voiture ne prennent généralement pas trop d'argent loin de vous chaque mois. Donc, nous allons maintenant travailler là-dessus. que je vais faire, c'est évidemment que nous allons laisser ce texte sur Dutcher. Je vais en faire quatre copies. Alors appuyez sur le contrôle D, D, D. Je vais appeler ce cercle serré. Juste pour que je sache ce que c'est. Je vais appeler ça un aliment. Et celui-ci va être des services publics. Et enfin, ce dernier sera la voiture de Feynman I, que évidemment nous allons leur donner et leurs couleurs. Donc, pour le cercle fermé, vous pouvez simplement cliquer ici pour sélectionner votre couleur. Ou vous pouvez zoomer comme vous le souhaitez. Allons dehors. Et je pense que ces deux-là, oui, ils sont différents. Donc, nous allons maintenant sauter dans la balise de fermeture ou avec le bouton droit de la souris modifier pour signifier le composant. Ici, c'est. Sur ce composant principal à l'intérieur de ses vêtements, nous allons en fait sélectionner, voyons. Je vais sélectionner cette couleur. Et maintenant, il correspond, comme vous pouvez le voir avec cette icône de t-shirt. Donc, si je double-clique et que je le déplace à l'extérieur juste un peu. Voyons voir RB la même chose. Ils ne sont pas les mêmes. Donc j'ai besoin d'utiliser cette couleur, ok ? Donc maintenant, ils sont complètement les mêmes, donc j'utilise cette même couleur pour les deux jusqu'à présent, 606406. Et c'est une fois de plus, les avantages de ces composants et composants dates car vous pouvez toujours revenir au composant principal modifié. Et maintenant, si on ferme ça, te ramène à divulguer. Vous pouvez voir que c'est la même chose et vous ramener ici et vous pouvez voir que nous changeons la couleur. Revenons maintenant à nos cercles. Nous avons donc un cercle fermé. Je vais zoomer un peu et je vais m'assurer que je sélectionne cette couleur. Et puis nous avons le cercle de la nourriture. Je vais m'assurer de sélectionner cette couleur. Utilitaires, nous allons sélectionner cette couleur. Et les paiements de voiture, je vais sélectionner cette couleur. Si vous vous demandez pourquoi je choisis mes voitures comme ça, c'est parce que. Vous ne pouvez pas appliquer les colliers de bordure en cliquant simplement ici, puis en cliquant sur l' une de ces couleurs, car elles ne sont appliquées qu'à la couleur de remplissage elle-même, non à la couleur de bordure. Donc, malheureusement, vous devez créer une couleur de bordure en utilisant cette option. Ensuite, ce que nous allons faire, c'est commencer par notre tableau. Donc, fondamentalement, nous allons créer des sections en utilisant le crayon afin que nous puissions les masquer. Alors commençons par le cercle fermé. Alors je vais utiliser mon crayon. Je vais planer ici pour qu'il puisse me montrer que c'est le milieu. Je vais cliquer sur la touche Maj enfoncée et aller jusqu'à, disons quelque part par ici. Et je vais cliquer ici et ensuite ici pour avoir ce genre de triangle. Je vais le déplacer là-bas avec le cercle Claude. Donc, je vais tenir Shift Alt et désolé, contrôle de décalage et ampli afin qu'ils puissent masquer cet avortement. Et je vais l'appeler proche. Juste pour que je sache ce que c'est. Ensuite, c'est de la nourriture. Et comme nous l'avons dit, la nourriture sera probablement la plus grosse dépense. Alors appuyez sur p ou cliquez ici pour le parent, une fois de plus, passez le curseur sur le centre, cliquez, cliquez quelque part dans le centre. Et je vais, par exemple, cliquer quelque part par ici. Cliquez à l'extérieur plus de bois sur le dessus de notre contrôle de déplacement alimentaire m afin que nous puissions masquer ce parc. Ça va s'appeler de la nourriture. Nous avons des services publics. Et encore une fois, les services publics peuvent être chers, mais ils n'ont pas besoin de l'être. Voyons voir, peut-être qu'on peut leur donner quelque chose comme ça. Et allons dehors. Allons ici, ou vous pouvez aller dans l'autre sens comme vous le voulez. Positionnez le membre juste ici, touche le contrôle des équipes, les services de qualité de l'air. Et si à un moment donné, par exemple, votre client veut que vous réduisiez la taille de ces utilitaires. Vous pouvez revenir ici. Vous pouvez double-cliquer à l'intérieur et vous pouvez le positionner comme vous le souhaitez afin d'augmenter ou de diminuer l'espace disque pour tous ces éléments. Donc, par exemple, comme ça. Et positionnons-le comme ça. Je ne vais pas faire les paiements de voiture parce que les paiements de voiture sont déjà là. Laissons-le là. Et c'est fondamentalement tout pour cette conception que nous avons déjà appliquée dans le recadrage des informations de section pour DES. Si vous voulez que cela soit plus chatoyant afin que vous puissiez sauter à l'intérieur de tous ces cercles. Laissez-moi vous montrer rapidement une dette. Nous avons donc le graphique et vous devez sélectionner tous ces cercles. Et vous pouvez, par exemple, en faire 20. Et maintenant, vous pouvez voir à quoi ça ressemble. Allons-y avec 20. Et vous devez réellement définir sélectionner tous les séparément, ou vous pouvez le faire dès le début juste pour voir ce que vous avez. Donc maintenant, nous avons beaucoup de cercle de dicker. Donc si tu es dans ça, tu peux le faire. Mais je vais coller la largeur dans la température juste pour que cela me donne une plus grande cohérence avec le reste de mon design. Donc, nous l'avons là. Nous avons terminé notre premier écran de tableau de bord. Et je vais simplement appuyer sur le contrôle D et l'appeler comptes de tableau de bord ou compte de conception de tableau de bord comme vous le souhaitez. Et je pense que c'est tout. Je vous verrai dans la prochaine vidéo où nous allons aborder cet écran de compte de tableau de bord. Et on y travaillera plus tard. Alors je te verrai là-bas. 47. Créer du design.: Commençons maintenant à travailler sur et compte de conception de tableau de bord. Et la première chose est évidemment de sélectionner notre compte ici juste pour indiquer où nous sommes. Ensuite, je vais supprimer celui-ci et celui-ci parce qu'on n'en a pas besoin. Onglet Aide, vous pouvez le laisser là. Suivant en haut. Ce que je vais faire, ce sont vos informations de compte comme ça. Et voyons, la mémoire peut le positionner pour être à 40, par exemple, je pense que ça va très bien marcher. Je vais bouger ces trois. Assurez-vous qu'on est à 40 ans parce qu'on est à 40 ans juste ici. Et ce que nous allons réellement présenter sur ces informations de compte, c'est que l'utilisateur va pouvoir voir, par exemple, quels comptes ils ont ouverts. Donc, si vous vous souvenez, nous avons commencé à compter et ainsi de suite et ainsi de suite. Combien ont-ils dépensé depuis l'ouverture ? Pour qu'ils puissent voir tout ça. Et ils peuvent, par exemple, cliquer là et aller dans les transactions pour voir leurs transactions passées. Ils vont toujours avoir cette aide tamponner parce qu'il est utile de l'avoir là évidemment. Et enfin, nous allons avoir ces champs afin qu'ils puissent y ajouter des informations, par exemple, ils peuvent changer la façon dont leur nom s'affiche sur la carte. Ils peuvent changer l'adresse si, par exemple, d déplacé et changé l'adresse, ils peuvent changer l'adresse e-mail et le mot de passe, et ainsi de suite. Alors faisons ça maintenant. Maintenant, traitons rapidement avec celui-ci. Alors je vais le faire, voyons. Je peux les supprimer afin que je puisse avoir moi-même et vide onglet. Et appelons ce total dépensé. Comme papa. Je vais sauter dans mon compte principal et choisir ces deux-là. Par exemple, appuyez sur Contrôle C. Cliquez ici, pourrait contrôler V et simplement positionner et aussi sur la touche Maj pour les positionner là. Maintenant, ce que je vais faire, c'est m'assurer que les deux sont alignés au centre. Et voyons, je peux positionner ces deux-là au centre et ces deux-là au centre comme ça. Et donnons ça. Ainsi, par exemple, le total dépensé depuis l'ouverture. Et voyons voir. Donnons un autre numéro. Donc, par exemple, 96,507 outil pour, voyons. Donc un grand numéro. Et c'est le nombre qu'ils ont dépensé depuis l'ouverture. Je vais m'assurer qu'ils sont centre nautique et je vais les positionner ici. Et on va appeler ça un jour. Une fois de plus, ils peuvent cliquer ici, passer à l'étape de transaction plus tard, et explorer toutes leurs dépenses depuis l'ouverture de leur compte. Ce que je vais faire ensuite, c'est sauter ici. Et voyons, nous allons appeler ce compte Démarrer. Ce que je vais faire, c'est de sauter ici et de localiser l'icône de mon compte Démarrer. Donc, je vais localiser ici, il est, et glisser et déposer dans la position. Et où faire plus avec ici. Et je vais le placer au centre comme ça. Et voyons, peut-être, je ne sais pas, 12 contre 4. Par exemple, je vais supprimer ce numéro et je vais positionner ces deux ici. Assurez-vous qu'ils sont à gauche, assurez-vous qu'ils sont positionnés à gauche pour écrire ceci. On va appeler un compte de démarrage de disque comme ça. Et voyons voir. Je vais épingler le 23 avril 2020, une fois de plus, le peuple britannique américain, celui qui utilise l'inverse. Donc 0-4 point 23, vous pouvez faire dans la dette aussi bien. Donc 40, voyons voir comment ça marche. Je pense que ça marche bien. Voyons où nous sommes. Donc 1234. Oui, je pense que ça marche très bien. Ce que je vais faire en fait, c'est peut-être faire ça et grisé un peu. Alors donne-nous de la couleur. Et je ne creuse pas vraiment cet espacement. Peut-être 20. Ouais, je pense que ça marche beaucoup mieux. Et la direction, nous avons terminé ces sections. Ce qu'il nous reste à faire, c'est de remplir les champs ci-dessous pour les forums. Donc je vais simplement copier tout ça. Donc prénom, nom, mot de passe e-mail, et un bouton appuyez sur Ctrl-C. Et sauter ici avait le contrôle v. Donc je vais les coller tous n. Maintenant, je vais faire est fondamentalement de les réorganiser un peu. Mais avant moi, parce que vous ne pouvez voir aucun de ces champs de formulaire. Si vous pouvez voir, car c'est la couleur des champs étrangers est la même couleur que le tableau de bord. Donc, nous allons d'abord les déplacer tous ci-dessous aidés parce qu'il va y aller de toute façon. Donc, je vais ouvrir tous ces champs étrangers, champs de saisie. Et c'est de les sélectionner, choisir la couleur blanche juste pour que vous puissiez les voir sur le tableau un peu mieux. Ensuite, je vais les organiser. Donc le prénom et le nom vont aller juste ici. Donc, voyons, peut-être que nous pouvons positionner cela comme 40 aussi, juste pour garder la cohérence. Donc comme ça, vous pouvez les positionner encore plus bas si vous le voulez, mais je pense qu'ils vont très bien marcher. Ensuite, je vais positionner mon e-mail ici, assurez-vous qu'il est à 40 ans. Et nous allons jouer avec un peu d'espacement. Mais finissons d'abord ça ici. Alors voyons. Nous serons au 12345678. Positionnons ceci à 80 juste un peu. Et ce que je vais faire avec le bouton, c'est parce que ces grilles sont changées. Je vais changer légèrement la taille du bouton afin qu'il puisse accueillir trois colonnes ici et trois colonnes ici. Alors passons de l'un à l'autre. Ça marche bien. Et le texte ici va écrire dans les informations d'édition. Je fais ça. Et je vais sauter à l'intérieur de ma maison, basé sur ce texte dans l'état, sauter sur les ponts principaux et Harrier. Donc ce que je vais faire en fait, c'est de positionner les DS sont comme ça. Voyons voir, 246. Donc, nous y voilà. Juste ici. Je vais faire la même chose pour celle-là. Et je vais essentiellement sauter et adapter mes champs pour migrer. Donc comme ça. Donc tous les quatre vont avoir six colonnes de large, comme ça. Et quand faire la même chose pour le nom. Et fondamentalement, nous sommes là. Nous avons complété notre compte Design pour la page de tableau de bord. Donc, encore une fois, ce qu'ils peuvent faire ici, c'est de semer le compte sur lequel ils sont. Donc ouvert à cette date. Si, par exemple, ils ont plusieurs comptes ouverts. Ainsi, par exemple, on vérifie, on épargne, on est pour la dette, le crédit, etc. Ensuite, vous pouvez aller de l'avant et inclure la pagination et le faire comme nous l'avons fait pour cela et pour les cartes, si vous vous souvenez. Ainsi, ils peuvent rapidement cliquer sur la pagination et changer entre tous leurs comptes ou bristly Dan, et cette information va mettre à jour ainsi que l'icône elle-même. Ensuite, nous avons le montant total depuis les dépenses. C' est donc le montant qu'ils ont dépensé depuis qu'ils ont ouvert le compte à la banque. Une fois de plus, ils peuvent cliquer là et aller dans les transactions et explorer toutes leurs transactions en arrière, nous avons toujours l'onglet Aide. Et enfin, nous avons toutes ces informations solides le groupe juste pour que nous puissions garder les choses simples. Ainsi, par exemple, des renseignements personnels comme ça. Et ils peuvent ajouter ces renseignements personnels. Donc, une fois de plus, s'ils, par exemple, déménagé afin qu'ils changent d'adresse. Donc nous n'avons pas l'adresse ici, mais nous pouvons l'inclure. Voyons voir, peut-être qu'on peut mettre l'adresse juste ici en haut. Voyons voir, nous ne l'avons pas ici, mais nous pouvons rapidement l'inclure. Alors faisons ça. Au lieu d'utiliser six, nous pouvons utiliser un for, par exemple. Donc je peux sauter ici, 1234, prénom, nom. Donc je peux le positionner pour qu'il soit juste ici. Voyons voir, 1234. Mon père et moi pouvons frapper le contrôle D et MODIS. Et ceci peut alors être notre adresse. Ou je pense parce que nous avons cette adresse, alors changons-la rapidement. Alors déshabille. Parce qu'on a une adresse. Peut-être que nous pouvons l'étendre pour pouvoir jouer avec nos colonnes encore plus. Alors voyons, peut-être qu'au lieu de quatre, je peux leur donner trois parce que je n'ai pas besoin de trop d'espace pour le prénom et le nom de famille. Alors voyons 33 comme ça. Et enfin, je peux donner à cela l'espacement de six par exemple. Donc 246, parce que je veux inclure une adresse plus grande, par exemple, juste pour que je puisse indiquer ces intérêts. Donc, il y avait comment il, et maintenant nous sommes terminés. Donc, une fois de plus, si l'utilisateur veut changer ses informations personnelles, donc soit leur prénom ou nom de famille, s'ils l'ont changé d'une manière ou d'une autre et veulent le changer ici, ils peuvent changer l'adresse ou vaguement, si ils ont déménagé, ils peuvent changer leur adresse électronique et leur mot de passe. Et ils peuvent tout faire en cliquant simplement sur Ajouter des informations. Donc, modifiez les informations. Donc, nous allons pour la fin, prévisualiser rapidement cela, voir à quoi tout ressemble. Et vous pouvez également inclure des états de survol pour tous ces états si vous le souhaitez. Ainsi, vous pouvez, par exemple, inclure cette ombre d'arrière-plan que nous avons déjà. Vous pouvez, par exemple, le rendre un peu plus fort lorsque le vol stationnaire ici. Donc vous pouvez indiquer qu'ils l'ont fait, mais pour l'instant, laissons-le là. Donc ici, nous avons ceci ou cela fonctionne évidemment bien. Nous avons l'effet de vol stationnaire et nous avons un courant sélectionné. Donc, en gros, c'est tout pour cette vidéo. Je te verrai dans la prochaine. Et voyons ce que nous avons ensuite. Prochaine nos transactions. Alors je te verrai là-bas. 48. Créer des bases de conception: Allons maintenant et continuons là où nous nous sommes arrêtés dans la vidéo précédente. Et au lieu de copier celui-ci, je vais en fait sélectionner et copier celui-ci. Voyons ce qu'on peut faire ici. Dans celui-ci, je veux juste garder vos transactions parce que nous sommes en fait sur l'écran des transactions. Alors appelons-le comme ça. Tout d'abord, changeons cela en une transaction sautant ici, et appelons-le les transactions comme ça. Et comme je l'ai dit, à l'intérieur des transactions, vous pouvez cliquer ici pour, au lieu d'en savoir plus, passons à beaucoup plus. Alors voyons. Chargez plus. Et voyons, je peux bouger ces six. Donc 123456, comme diffs, je vais m'assurer que c'est au centre de mes antécédents comme ça. Je vais frapper Control C. et je vais retourner ici. Donc je vais appuyer sur le contrôle V pour le coller. Je vais supprimer ces vieux. Et je vais simplement, et sauter ici, sélectionner ces deux-là, les positionner un peu vers le bas. Donc deux ici. Et je vais encore m'assurer qu'ils sont centrés comme ça. Donc, une fois de plus, vous pouvez cliquer sur charger plus et vous pouvez étendre tous ces éléments afin qu'ils puissent faire une zone défilante. Alors faisons ça en fait. Donc je peux sauter à l'intérieur et j'ai toutes mes transactions ici. Pour que je puisse regrouper les termes. Par exemple, voyons, je peux frapper le contrôle et G, et je peux appeler ces transactions comme ceci. Et je peux aussi cliquer et faire une grille de répétition. Et voyons, je peux étendre cela à, par exemple, et je ne sais pas, disons ici. Et ce que je peux faire avec cela est un clic droit sur la grille de dissociation. Nous avons donc trois de ces transactions. Vous pouvez cliquer sur le contrôle G Si nous le voulons, ou vous pouvez simplement déplacer ces transactions à l'intérieur de ce premier. Donc c'est notre premier. C' est notre deuxième, alors c'est notre troisième. Donc, ce que nous devons faire, c'est les renommer. Donc notre dernier était six. Donc ça va être sept. Ça va être 89101112. Je dat. Et je vais en fait frapper Control X pour les couper. Et je vais laisser tomber Term juste ici. Certes, le film positionné est tout le chemin vers le bas, cliquez avec le bouton droit de la souris sur Ungroup component, désolé sur le groupe et notre groupe. Et peut-être que nous pouvons même le laisser là. Donc je ne vous inquiète pas, mais vous comprenez le point. Ce que je vais faire ensuite, c'est cliquer ici et vous avez ces trois là. C' est donc un défilement horizontal. Nous allons en fait utiliser plus tard quand nous commencerons avec le design responsive. C' est le défilement vertical, donc de haut en bas, et c'est le défilement dans toutes les directions. Et fondamentalement, la dette 1 est plus utile si vous créez une carte, par exemple. Et vous voulez montrer la carte dans toutes les directions. Donc, pour ce cas, je vais utiliser le défilement vertical. Donc, je vais positionner cette zone ici, par exemple, juste une sorte de je peux indiquer où les utilisateurs peuvent visser. Et je peux sauter ici, frapper l'aperçu. Et à l'intérieur de notre aperçu, je veux juste vous montrer que lorsque vous commencez à faire défiler, vous pouvez voir à quoi cela ressemble. Donc, fondamentalement, ils peuvent cliquer sur charger plus. Il va charger plus. Et ils peuvent commencer à défiler et descendre jusqu'au bout. Évidemment, nous pouvons changer les actes pour rendre les choses plus réalistes, mais ne nous enlisons pas avec les détails. Donc, évidemment, ces dates vont aller d'ici en bas. C' est donc le mois d'août de l'année, peut-être que c'est le 2 août, et ensuite ils vont descendre vers janvier et le début de l'année. Mais comme je l'ai dit, ne nous enlisons pas avec ces détails. Ce que je vais faire ensuite, c'est peut-être que nous pourrons même étendre cette question. Eh bien, voyons voir. On en a 245. Je ne sais pas. Peut-être que nous pouvons baisser cela et peut-être étendre cela juste un peu. Faisons ça. Donc je vais rendre ça un peu plus étroit. Et vous pouvez voir le design réactif en action ici. Mais nous allons parler de design réactif un peu, un litre. Donc je vais placer tout ça ici. Et à l'intérieur de notre groupe de rampes, ce que nous devons faire maintenant, c'est que je peux sauter ici et voir si je suis à 40 ans. Donc je vais repositionner quelqu'un, donc j'ai 35 ans ici, donc 12345. Donc, je suis au 4041 en haut. Je vais le positionner dans Oser d'être à 40 ans. Et enfin, je vais déplacer ça ici. Et vous pouvez évidemment augmenter l'espacement entre tous ces éléments. Alors qu'est-ce que nous devons faire, c'est de les ouvrir tous et de commencer à les organiser un par un. Donc, je peux utiliser aujourd'hui pour d et a d, puis faire défiler vers le bas. Donc date, date, date pour voir où nous sommes. Donc deux D. Je ne sais pas pourquoi ça continue de le ramener, mais je vais faire défiler de toute façon. Une fois de plus, on doit être à 40 ans. Donc, nous allons passer à l'ici 1234, afin que nous soyons en ligne avec nos textes. Ensuite, ce que nous pouvons faire est d'aligner tous ces éléments sur ce point de grille. Alors choisissons ce sont les entreprises. Starbucks sont celui-là où nous avons roi, puis plus un et sélectionnons tous. Je maintiens ma touche de contrôle et je clique pour que je puisse évidemment sélectionner plusieurs sur eux. Donc roi bleu, et enfin, ce dernier est polymère. Donc, en fait, il suffit de les aligner sur la grille comme ceci. Ensuite, nous allons passer dans ces chiffres. Il suffit donc de sélectionner vos numéros. Montez d'ici. Je vais sélectionner tous ces chiffres et les déplacer vers la droite et 40. Alors allez tout le chemin pour entendre 1234 parce que nous avons maintenant un peu plus d'espace. Et ce que nous pouvons faire, c'est que nous pouvons laisser ces éléments comme la dette, mais je veux juste les aligner rapidement sur la grille juste pour que nous ayons un peu plus d'espace. Donc, ce que nous devons faire est en fait sélectionner nos tags. Je vais sélectionner la noirceur temp. Il suffit donc de sélectionner vos tags et nous allons être finis dans une seconde. L' audit est donc de les aligner sur la grille comme ceci. Donc maintenant, il a l'air beau et propre. Et ce que j'ai aussi remarqué est la pile divulguée devrait aller juste ici. Et allons en trouver un autre. Heritages alimentaires, parce que nous utilisons la répétition plus dupliquer et tout le reste semble bien. Fermons maintenant notre groupe de défilement et nous allons peut-être tester une fois de plus et voir ce que nous avons ici. On en a 41, donc on peut en déplacer un. Donc nous sommes à 40 ans et nous en sommes à neuf ici. Alors voyons, peut-être que je peux les fermer comme ça ou je peux même les révéler. Ici. On est à 19 ans et on est à 19 ans ici. Voyons voir, peut-être que nous pouvons positionner celui-ci juste un vers le bas pour qu'on soit à 20 ans ici. Donc, jusqu'à notre groupe de défilement et nous sommes 18 vers le bas. Faisons-le encore une fois. Voyez à quoi ça ressemble. Voyons voir pour que je puisse faire défiler vers le bas et tout a l'air beau et propre. Maintenant que c'est fini, passons aux sections d'arrêt. Donc, je vais en fait enlever celui-là. Je vais le positionner ici. Et je vais aussi m'assurer que j'ai choisi d'être à six ans. Voyons donc, nous en sommes maintenant à quatre, nous en sommes maintenant à six solidus. Et enfin, je vais faire la même chose pour celle-là. Et juste pour me donner un peu plus de place, quand je vais faire ensuite est supprimé ce type dans vos transactions juste là. Et puis je vais sélectionner ces deux-là et les positionner pour être à 40. Et est allé augmenter la hauteur de ces deux. Donc, nous allons sélectionner compte cartes VG, VG. Je vais l'augmenter à 291, comme ça. Et maintenant, on est à 39 ans. Voyons voir, nous sommes à 41 ans avec ceux-ci. Donc on peut déplacer ces deux-là, juste un vers le bas. Nous sommes donc en mer. On est à 40 ans et on est à l'avocat 9 ici. Voyons voir. Alors on peut changer ça pour être 290, comme ça. Et maintenant on est à 40 ans, on est à 40 ans. Donc tout a l'air sympa. Mais je vais faire, c'est frapper le contrôle S et expliquer ce qui va se passer ici. Donc, ici, nous allons inclure quelques graphiques et nous allons réellement montrer vos transactions de transition. Donc, fondamentalement, ces transactions vont être divisées par les revenus et les dépenses. Et ils vont y aller une semaine. Ainsi, les utilisateurs pourront voir ces transactions il y a une semaine. Et ils seront en fait en mesure de vérifier entre les revenus et les dépenses et essentiellement à elle et voir où le dépensé le plus d'argent sur quel jour et combien au total. Juste ici, à droite. Et nous allons en fait leur donner quelques tablettes Utility colorées par DADT ou nous allons voir quelques étapes sérieuses, par exemple. Donc, il va être en mesure de transférer de l'argent. Donc disons que vous avez votre femme ou votre petite amie mère plus large n'a pas d'importance. Et vous voulez leur transférer l'argent de votre compte. Donc, ils auront l'option là-bas. Ensuite, ils auront la possibilité de payer les factures. Et ils auront également la possibilité de convertir de l'argent. Donc, pour la conversion, disons que votre compte est en dollars américains et que vous voulez convertir cet argent en euros, soit pour dépenser, soit pour envoyer à quelqu'un d'autre. Et c'est essentiellement ce que ça va être. Nous ne allons pas créer ces pages, allons simplement créer ces options parce que ces pages sont déjà créées par la banque. Et ce ne sont essentiellement que des pop-ups de code de base. dessous de ça, juste ici. Nous allons avoir un contenu d'équilibre. Nous allons donc avoir des revenus et des dépenses. Et ceux-ci vont être globalement totaux pour le mois. Alors maintenant, commençons par créer tous ces éléments. Donc je vais commencer ici pour qu'on puisse aller de gauche à droite. Je vais taper vos sections comme ça. Et voyons, on peut les appeler beauté de transaction comme ça. Et ce que je vais faire, voyons, peut-être que je peux avancer un peu. Voyons voir Suwanee spot. Voyons où nous sommes ici. 12, nous en sommes à 20, nous en sommes à 40. Donc je vais le laisser comme ça. Je vais aussi positionner ça un peu. Je vais supprimer ce texte, appuyer sur le contrôle D et celui-ci et lui donner un revenu. Et sur celui-ci, je vais le donner cher. Comme ça. Je vais les positionner tous les deux pour qu'ils soient alignés à droite. Donc ça va être facile pour moi de les organiser. Déplacez ceci pour le vert, déplacez ceci pour le rouge. Évidemment, nous allons explorer un peu plus ces dépenses. Assurez-vous que nous sommes à 40 ans. Donc 1234. Et une fois de plus, assurez-vous que nous sommes à 40 ans avec celui-ci aussi. Et ici, nous allons utiliser ces sandwiched m'a pris sûr. J' ai 20 à 40 ans juste ici. Et je vais taper à partir de l'alignement de gauche, donc mod pour le lundi. Et vous pouvez évidemment espacé quantité uniformément si vous voulez poursuivre peut contrôler D. Vous pouvez utiliser la grille de répétition et il est beaucoup plus rapide. Mais vous pouvez aussi le faire afin que vous puissiez les positionner comme ceci. Assurez-vous donc que vous êtes bien aligné. Ça ne va pas montrer, c'est ça. Alors faisons-le comme ça. 1234. Maintenant, nous sommes alignés et ce sera évidemment dimanche. Je l'ai fait. Et vous pouvez dupliquer ça et l'appeler samedi. Ça va être vendredi. Ce sera jeudi. Ça va être mercredi. Et ça va être 2Z. Je suppose. Donc, fondamentalement, nous allons maintenant avoir la distance entre eux de 60, par exemple. Voyons comment fonctionne la Terre. 60. Et laissez-moi les organiser rapidement. Donc je vais sélectionner mon lundi, déplacer tout le dimanche est juste ici. Comme dit, vous avez la possibilité de répéter la grille, mais je suis juste de vous montrer les deux façons afin que vous puissiez le faire aussi bien si vous le voulez. Donc je vais positionner ça pour être à 60. Et maintenant, essayons autre chose. Je vais les sélectionner tous et il suffit de cliquer ici juste pour voir ce que Adobe XD gamey. Donc ça m'a donné 707070707070 ici. Donc, c'est bien parce qu'il les sépare tous rapidement et vous avez vu cette option aussi. Pour que je puisse aller de l'avant et les regrouper, les appeler jours. Et maintenant, ce qu'il me reste à faire, c'est essentiellement créer mon tableau. Donc, je vais, par exemple, dupliquer celui-ci Control D et taper plus voir pour 25. Ou pour s'assurer que c'est du milieu. Et vous pouvez bien sûr, jouer avec ceux-ci. Je m'assure que celui-ci est à gauche, celui-ci est aligné à droite juste pour les fins d'alignement. Mais vous pouvez vous assurer que c'est le centre, par exemple. Et maintenant ça va te montrer un 69 ou 70. Donc, ne nous achetons pas enlisés avec cela et avec ces détails sans importance nécessaires, passons à autre chose. Et ce que je vais créer ici est et info-bulle. Et pour créer une info-bulle, je vais simplement utiliser mon outil Rectangle et faire glisser mon rectangle plus de largeur ici. Je vais appeler ça outil pour faire ce que j'ai fait. Et je vais m'assurer que ces deux-là sont centrés. Et je peux aussi étendre mon coincé en tenant simplement ma vieille clé. Je peux étendre les coins de la planche en même temps. Je peux aller de l'avant et taper, par exemple, cinq, juste pour lui donner des Indes autour des coins et des bords arrondis. Je peux également sauter à l'intérieur et utiliser mon outil polygone pour créer ce rectangle. Je vais le retourner et m'assurer que ces deux-là sont centrés. Comme ça. Polygon va évidemment tomber. Et je vais inclure, par exemple, ici, je vais appeler ça pourboire. Comme ça, je vais enlever la frontière. Et voyons, peut-être que je peux choisir cette couleur. Et voyons pour le texte, vous pouvez laisser cette couleur si vous le souhaitez. Je pense que ça va marcher très bien. Mais vous pouvez aussi destin avec du blanc. Cela fonctionne bien aussi. Et allons, tu sais, allons juste avec le blanc. Je pense que c'est pourquoi Finalement, nous allons fusionner ces 2k. Je vais donc cliquer ici pour créer une forme. Et on appellerait ça Tooltip, comme ça. Et maintenant, vous pouvez le déplacer. Nous allons simplement le regrouper. Je vais lui donner un nom comme ça. Et laissons-le là pour l'instant. Ce que je vais faire ensuite, c'est utiliser mon crayon et mon mental sur quand aligner ici. Je vais l'aligner ici et frapper l'évasion. Et je veux juste m'assurer que je suis centré. Nous tous ceux-là. Donc, ce que je peux faire est évidemment utilisé mon outil rectangle ici. Je peux simplement étendre. Et vous pouvez également passer la souris ici au-dessus de votre clavier. Et vous avez ces guides afin que vous puissiez dessiner un guide où vous voulez et y aligner les choses. Et vous pouvez faire la même chose à partir du bord gauche. Et vous pouvez simplement aligner un guide, contrairement à la dette, puis simplement suivi dans la dette et le guide pour l'alignement. Je pense que ça va se passer. Donc, lorsque vous voulez le supprimer, cliquez et faites-le glisser à l'extérieur. Bon, maintenant je vais lui donner un nom. Donc, ce sera notre ligne de revenu. J' ai changé ça. Je vais le dupliquer. Ça va être notre ligne de dépenses ou non, nous allons d'abord créer et vous allez voir ce que je veux dire. Donc, tout d'abord, changeons la couleur de la bordure à cette couleur. Je vais faire le tour de la casquette. Donc ici et ici va être autour de ce que je vais faire aussi. Voyons voir. Je peux augmenter la taille de ressemble à cinq. Je pense que cela fonctionne bien parce que maintenant vous pouvez le voir. Et ce que nous allons faire ensuite est de sauter côté à ajouter quelques points. Vous pouvez donc double-cliquer et cliquer ici. Ainsi, par exemple, nous pouvons créer un point d'ancrage supplémentaire pour tous ces jours différents. Pour que nous puissions ensuite présenter tous ces jours manière à pouvoir organiser ces animations afin que nous puissions, par exemple, montrer aux utilisateurs où ils peuvent cliquer. Nous ne parlerons pas de dimanche et de lundi parce que ce sont évidemment des points de départ. Mais je vais faire ensuite est simplement les déplacer autour juste pour essayer de le globe oculaire. Et vous pouvez être extrêmement précis si vous le souhaitez en utilisant ces guides, par exemple, mais je ne vais pas vous embêter avec cela. On va juste le laisser ici pour l'instant. Maintenant, ce que je vais faire est simplement l'augmenter comme ça. Peut-être que je peux diminuer ces deux là. Ces deux-là, ici, et peut-être ici. Peut-être que ça peut monter un peu. Et nous pouvons positionner toutes les info-bulles ici. Par exemple, si vous le souhaitez, vous pouvez utiliser ces lignes, mais vous pouvez également utiliser des lignes courbes. Donc, pour ce faire, il suffit de double-cliquer pour créer tous ces éléments pour être courbés comme ceci. Ainsi, vous pouvez montrer, par exemple, flux beaucoup plus réaliste de ces graphiques. Donc, par exemple, quelqu'un comme le bureau. Et enfin, ce dont nous avons besoin, c'est le cercle pour que nous puissions choisir notre point de vue. Les utilisateurs peuvent cliquer sur. Par exemple, ici, disons, je pense que cela fonctionne bien. Disons que nous voulons juste le garder au centre, le garder propre et propre. Et ça va être notre point d'astuce. Et ce que je vais faire est en fait de lui donner cette bordure de couleur enlevée. Et c'est fondamentalement, il peut aussi inclure une sorte d'ombre portée. Donc à 25 peut-être. Je pense que ça a bien fonctionné juste pour le séparer fondamentalement de notre expérience. Maintenant que nous avons de la dette, ce que nous pouvons faire est de dupliquer celle-ci et de l'appeler ligne de dépenses. Je vais supprimer ma ligne de revenu de vue. Cliquez ici, sélectionnez cette couleur. Et ce que je vais faire est fondamentalement la même chose, mais je vais juste, par exemple, augmenter celui-ci, diminuer celui-ci. Peut-être déplacer celui-ci un peu vers le haut. Peut-être ici. Peut-être positionné ça ici. Peut-être que ça peut sauter jusqu'au bout et qu'il peut descendre. Alors maintenant, ai-je apporté ma ligne de revenu ? Vous pouvez voir ça. Donc, c'est fondamentalement tout. Vous pouvez cliquer sur le revenu et les dépenses pour afficher ces différentes choses. Donc, nous allons apporter des revenus au plus haut point en fait. Donc je vais bouger avec ici. Donc, c'est plus la pointe de l'outil et le point de l'info-bulle. Donc tous les deux au point le plus élevé. C' est donc notre point culminant. C' est un point le plus élevé en fait. Donc on peut, par exemple, plus d'esprit, je ne sais pas. Laissons juste ici où il était dans decenter juste pour montrer aux utilisateurs et être un peu plus précis et peu plus d'importance non, juste effacer avec elle. Je vais également dupliquer nos info-bulles. Nous allons donc regrouper cet outil de qualité. Astuce comme la mort ou le revenu info-bulle et dupliquez-le, appelez ça des dépenses, comme ça. Et évidemment avec les dépenses et ça va être dans cette couleur rouge. Donc, je vais le sélectionner et m'assurer que nous sommes sur le rouge, sauter à l'intérieur de l'info-bulle BG, et le donner dans cette couleur rouge. Donc, nous l'avons là. Et je vais aussi supprimer cette citation plus moins. Et voyons, je ne sais pas, neuf, 4-6 peut-être. Je pense que c'est bon. Assurez-vous que nous sommes dans un centre. Et c'est fondamentalement tout. Donc, je vais le positionner pour être, par exemple, ici n. Maintenant, allons de l'avant et faisons notre composant. Donc, cela va être ici, par exemple. Et nous pouvons créer un composant à partir de cette section entière. Donc, la qualité de vos transactions. Si vous voulez contrôler la clé pour créer un composant et cette valeur par défaut, par exemple, peut montrer le revenu peut être. Donc, nous allons cacher l'info-bulle des dépenses. On va s'aligner sur les dépenses élevées. Et ici sur les dépenses, nous allons griser. Donc je vous ceci juste pour indiquer que le revenu est sélectionné. Ce que nous allons faire ensuite, c'est créer un nouvel état. Nous allons appeler ça des dépenses. Mon père. Et pour les dépenses, nous allons évidemment faire le contraire. Donc ici et ici, avec l'augmentation, les dépenses vont être décolorées, revenu va maintenant atteindre ce seuil afin qu'ils puissent basculer entre le revenu et les dépenses. Alors maintenant, allons de l'avant et prototypé. Donc, nous allons choisir l'onglet pour les dépenses. Transition auto animate état va être des dépenses et facile et hors et zéro point, voyons. Six secondes. Ils pensent que ça va bien marcher. Revenons à cher, sélectionnons nos revenus, faisons la même chose, et revenons à l'état par défaut, appuyez sur l'aperçu, juste pour que nous puissions voir ce que nous avons fait. Donc, jusqu'à présent, nous avons un groupe de défilement juste ici. On va évidemment avoir des animations ici. Je pense que ça a l'air bien. Et maintenant, testons ça. Pour une raison quelconque. Il ne veut pas cliquer. Peut-être que je ne l'ai pas installé, alors passons aux dépenses. Cliquez ici. Et je n'ai pas choisi l'état, donc un état par défaut. Et nous allons en prévisualiser une fois de plus. Voyons voir. Donc je n'aime pas vraiment cette transition. Mais laissons-le là pour l'instant. Peut-être n'importe quel sélecteur juste ici, mais laissons-le là pour l'instant. Je n'aime pas que les transitions entre ces deux-là disparaissent. Donc peut-être juste une info-bulle peut montrer ou quelque chose comme ça. Mais ne nous enlisons pas avec les détails parce que nous sommes déjà à 25 minutes et nous avons encore senti beaucoup plus de travail à faire. Donc je vais revenir au design et à ce dont nous avons besoin ici. En tant que sol mentionné, il s'appelle cela terminé et j'irai à l'état par défaut. De quoi avons-nous besoin ici, ce sont ces icônes que j'ai mentionnées. Donc, je peux l'appeler, par exemple, Services. Je suis mort. Et je vois que je peux supprimer corrompu juste les textes pour frapper le contrôle C, contrôler V pour le coller à l'extérieur, supprimer tout. Donc, au lieu de cartes VG, je vais appeler ça les services, BG, ma dette. Et pour le texte, je vais le dégrouper très rapidement. Et voyons, je vais supprimer ces deux-là. Donc ça et ça, je laisse juste celui-là. Je l'appellerai transfert. Assurez-vous qu'il va du centre. Donc X2 peut transférer de l'argent. Je vais appeler ça la prochaine payer les factures. Et enfin, cette dernière conversion. Donc, ce que nous pouvons faire maintenant, c'est de les positionner. Donc ça peut aller au centre. Et voyons, ça peut aller ici. Alors allons de l'avant et créons nos cercles. Donc, ça va être beaucoup plus facile pour nous. Voyons donc, les cercles peuvent être, par exemple, quelque chose de facile comme 100 par 100. Je pense que ça marche bien. Mettons-les en position pour être à 40 ans d'ici. Donc 1234, et je vais appeler ça un cercle comme ça. Et nous allons en fait les dupliquer. Il l'a positionné juste ici et juste ici. Et la prochaine chose que nous allons faire est en fait copier et coller toutes ces icônes pour que je puisse inclure le bas à l'intérieur. Alors voyons. Laissez-moi le trouver rapidement ici dans mon autre design. Donc je vais faire l'icône de transfert comme ça, l'icône de bébé comme ça. Et enfin icône de conversion comme ça. Changeons rapidement la couleur de nos cercles afin que vous puissiez voir les icônes et assurez-vous que nous avons supprimé la bordure parce que nous n'en avons pas besoin. Et enfin, je peux sauter ici et voir mes icônes. Donc, ils sont là. Et ils ne sont pas des composants. Donc je vais positionner fait au centre. Et voyons voir, je peux sélectionner ceci. Et est-ce qu'il avait le contrôle G est bientôt transféré, mûrir. Tous denses comme ça et ce coup de contrôle G, D va être payé factures icône. Et enfin, je vais sélectionner celui-ci et celui-ci, contrôle G, ça va être l'icône de conversion. Et puis je m'assurerai de les positionner au centre comme ça. Faites la même chose pour ce numéro est une fois de plus, sont de grandes icônes, icônes d'étain. Donc, vous pouvez juste vous assurer que chaque fois que j'utilise ces icônes, j'utilise de grandes icônes. Et ceux remplis sont des éléments d'invitation. Et je pense que juste icône était le nom du créateur. Une fois de plus, on est à 40 ans. Et ce que je peux aussi faire est de les mettre dans les dossiers eux-mêmes juste pour que nous puissions organiser les choses un peu plus. Voir transfert, j'ai dat. Et parce que je suis TOC mentir papa, je vais simplement les déplacer vers le bas. Comme papa. Là, nous l'avons dans la connaissance rapidement, organisez-les. Donc, c'est évidemment au centre. Sélectionnons-les d'abord tous et assurez-vous que nous sommes au centre comme ça. Donc nous sommes à 60, 61 en haut. Donc, c'est bien. Et ce que je vais faire ensuite est positionné uniformément ici. Utilisez donc simplement un rectangle une fois de plus, positionné ici. À cette fin, cette mesure, c'est au centre, remarquant pour lui ce côté. Donc ces deux-là au centre. Et maintenant tout semble beaucoup plus cohésif. Mais je vais faire ensuite est simplement créer mes effets de vol stationnaire. Donc, pour ce faire, je vais simplement utiliser le même effet pour le bouton. Donc, si vous vous souvenez, cela change en vert, et nous allons faire de même. Alors appuyez sur la touche Contrôle sur ça, sur le contrôle de la drogue K, on va ajouter un vol stationnaire. Notre prochain clic ici. Ajouter l'horreur. Cliquez ici à une horreur. Donc, au lieu de l'intérieur de notre état de récolte, et je devrais dire. Donc, comme vous pouvez le voir, chaque fois que j'en sélectionne un, nous sommes en vol stationnaire. Donc je vais sélectionner mon cercle et m'assurer qu'il est vert. Je vais sélectionner mon cercle, assurer qu'il est vert, Assurez-vous qu'il est vert et que les dettes fondamentalement il. Je peux revenir à ces états d'origine. Donc état par défaut, vous plier l'état et le troupeau laitier état par défaut. Et maintenant, quand je frappe l'aperçu ici, on peut voir à quoi ça ressemble. Donc, fondamentalement, nous avons ces beaux états d'horreur. Si ça n'a pas osé court, vous pouvez évidemment les changer. Les revenus et les dépenses fonctionnent bien. Je n'aime toujours pas ce design. Je vais penser à quelque chose et ensuite revenir. Et enfin, nous avons ce groupe défilant. Enfin, nous allons travailler sur cette section et finissons cette vidéo parce que nous sommes déjà à une demi-heure. Alors, renommons ça. Voyons voir, peut-être que nous pouvons l'appeler équilibrer ou équilibrer le contenu ou quelque chose comme ça. Appelons du contenu avancé. Et je l'appellerai. Ici. Ce dont j'ai besoin, c'est que je vais changer cela en contenu. Et nous allons essentiellement utiliser ces deux textes. Je vais supprimer celui-ci, et je vais supprimer tout le reste comme ça. Donc fondamentalement, alignons ces deux-là. Et voyons peut-être avant le texte que nous pouvons réellement utiliser, je ne sais pas, 48 peut-être. Alors commençons par ça. Ce sera un revenu. Et nous allons le laisser grisé comme ça et décider que ce sera des dépenses. Contenu des obligations. Voyons où nous sommes. Donc, peut-être devrions-nous ne pas savoir, en décembre, novembre, où nous étions allés voir. Donc c'est lui que nous n'avons pas de rendez-vous maintenant, mais parce que nous avons ici aujourd'hui et c'est en décembre. Nous pouvons donc avoir un contenu équilibré, décembre, par exemple. Ou peut-être que c'est évident parce que nous sommes dans ce mois-ci. Voyons voir ici. Donc le 22 décembre. Donc Wendy atterrit ici et ils vont sur cette page, ils vont toujours pouvoir se rappeler qu'ils sont en décembre. Évidemment, ils sauront quel mois il est. C' est donc le contenu des limites de la chasse actuelle. Alors allons de l'avant et modifions ce texte. Donc, je vais choisir 48 gras. Et quand faire la même chose pour celui-ci. Donc 48 gras. Et gardons ceci tel qu'il est. Annilides changent simplement ce revenu pour, voyons, quatre à 7504018. La dette fonctionne bien. Et voyons, peut-être que je peux le positionner sur B2 et ainsi de suite pour que je puisse faire ça pour être vingtaine jusqu'à ce que ça, et je vais changer leurs couleurs. Donc, ce revenu étranger dans ce pour les dépenses, qui fonctionne bien. Et voyons, la séparation entre ces deux-là peut être à car 40, c'est pour tout le reste comme ça. Et voyons, peut-être que nous pouvons le déplacer un peu. Et tout ce qu'il nous faut, c'est deux icônes pour indiquer les revenus et les dépenses. Donc, je vais sélectionner et la dose de base deux icônes. Je vais ensuite sauter ici et m'assurer qu'ils sont locaux, comme ça. Et voyons, les revenus sont en tête et les dépenses sont en baisse. Donc ça va être un revenu. Ça va être des dépenses. Évidemment, essayez de renommer vos couches autant que possible juste pour vous garder organisé. Parce que vous pouvez voir à ce stade, nous avons déjà beaucoup trop de couches, beaucoup trop d'options ici et là. C' est pourquoi nous avons besoin d'une dette. Je m'assurerai que cette icône est centrée avec notre contenu. Donc, je peux le faire en maintenant simplement la touche Maj. Ou encore mieux, je peux regrouper mon texte puis sélectionner ce clic ici, puis dissocier mes textes parce que j'avais vraiment besoin de faire partie d'un groupe. Donc pour l'instant, je vais faire la même chose pour les dépenses et le déposer ici. Dégroupez-le. Et ce que nous pouvons faire en fait, c'est peut-être les positionner avec nos textes comme celui-ci. 123456, par exemple, peut être que cela va bien fonctionner. Et puis aligner. Toute cette largeur de contenu est taxée en haut. Donc, nous y sommes. Permettez-moi d'en prévisualiser rapidement une fois de plus pour voir où nous en sommes. Donc, une fois de plus, nous avons des revenus et des dépenses, encore une fois, sont déjà comme comment cela fonctionne. Donc, je vais m'assurer d'essayer de trouver autre chose et d'essayer de le changer. Nous avons transféré des cailloux et des états d'horreur de conversion. Nous avons des groupes défilants ici, et nous avons ce contenu de liens. Donc là, nous l'avons dans la page suivante est auongs. Alors je te verrai là-bas. 49. Créer des bases de conception: Continuons maintenant avec notre page suivante atteint la longue chanson, aller cliquer sur touche de contrôle D pour lubrifier ce, notre conseil. Au lieu de transactions, donnons-lui un nom, poumons. Et fondamentalement pour l'expédition, nous voulons juste présenter les prêts que l'utilisateur a déjà pris. Donc, ils peuvent ajouter de nouveaux prêts à partir d'ici. Ainsi, par exemple, ils peuvent cliquer, n'ont besoin d'un long détournement, pas de long ou quelque chose comme ça. Et ils peuvent entrer en contact avec quelqu'un de la banque et ensuite ils peuvent tendre la main et offrir un fichu nouveau en utilisant les informations qu'ils ont déjà sur cet utilisateur. Donc, ce que je vais faire est de supprimer ceci et de supprimer toutes ces sections en fait. Et voyons, je peux supprimer le bureau aussi. Qu' est-ce que vous avez besoin ici, c'est une image. Alors voyons, peut-être qu'ils peuvent utiliser celui que j'ai déjà assez. Allons de l'avant et créons un. Donc, je vais positionner dans ce pour être, voyons 4335, voyons 725781. Donc longueur que je vais aussi lui donner un coins arrondis 20. Voyons voir, nous sommes 3545, donc nous devons descendre dix fois. Donc comme ça, 4040. Donc, c'est bien. Et tout ce que j'ai à faire maintenant, c'est d'inclure mon image. Donc, pour inclure votre image, vous pouvez utiliser les mêmes images de votre conception. Il suffit de le copier et de le coller si vous le souhaitez. Mais je vais en fait apporter l'image de mon dossier. Donc, laissez-moi rapidement localiser cette image parce que j'ai déjà un tas de ces images ici. Donc je vais rapidement utiliser celui-là. Donc, fondamentalement, c'est la même image que nous avons déjà utilisée. Laissez-moi supprimer la bordure, double-cliquez à l'intérieur, maintenez ma touche Maj pour que je puisse l'agrandir un peu plus par exemple jusqu'à ce que je le fasse. Et appelons ça un jour. Au lieu de transactions, nous allons évidemment écrire un prêt. Et ce que vous allez faire, c'est utiliser l'Ikhwan ici. Pour que je vous ramène ici. Analytes localisées portes, icônes, listes de scie, par exemple, utiliser l'icône de cache disque seul. Et je m'assurerai que c'est au centre de tout ça. Donc nous en avons six ici, image 614. Alors sélectionnez ceci et assurez-vous juste qu'il est au centre. Et c'est fondamentalement tout. Donc ce que je vais faire ensuite, c'est écrire un tas de textes et vers le bas. Alors voyons. Utilisons quelques blocs de texte de ces précédents. Allons à ici. Sélectionnez ces deux-là. Vous pouvez évidemment démarrer le nouveau bloc de texte, mais c'est juste beaucoup plus rapide pour moi. Donc je vais m'assurer que les deux sont centrés, centrés comme ça. Donc, ce que je vais faire est de double-cliquer et de taper rapidement. argent seul. Comme ça. Et voyons, peut-être que je peux le rendre un peu plus grand. Voyons ça. Je pense que ça marche bien. Et voyons, je peux aussi le positionner comme ça. Maintenant, nous l'avons et assurez-vous juste que cela est centré. Il l'est. Supprimons et voyons, peut-être que nous pouvons le positionner. Voyons 40 d'ici. Alors 1234 vers le bas. Et voyons, peut-être que je peux, par exemple, faire ce 24. Retournons à ici. Et c'est très bien. 24 irrégulières. Et voyez peut-être que nous pouvons écrire quelque chose comme si longtemps pris le 23 mai 2020. Réseaux. Eh bien, assurez-vous qu'il est centré avec leur texte d'arrêt comme celui-ci. Et voyons, peut-être que je peux le positionner comme 40 aussi. Donc 1234, comme ça. C' est très bien. Il contrôlerait D et peut-être que je peux faire en sorte que ça ait 40 ans aussi. Voyons voir. Premier paiement, 2352020. Donc vous avez fait le premier paiement quand vous avez pris le long évidemment. Et puis le dernier paiement sera le 23.52021. Donc, disons que ce n'est qu'un de ces petits prêts. C' est pour ça que ça s'appelle un prêt en espèces rapide. Juste pour prendre ce prêt, par exemple, va vous prendre un mois ou un lien qui pour leur rendre, ou dans ce cas, un an. Donc, il est positionné au centre, 404040. C' est très bien. Je vais le dupliquer encore une fois. Nous sommes sûrs. C' est à 40 ans. Et j'écrirai et téléchargerai vos relevés de paiement. Donc, cela va évidemment être à l'intérieur d'un PDF. Et parce que c'est un lien que nous allons utiliser cette couleur. Et ce faisceau dans la déclaration est essentiellement de leur montrer, par exemple, à quelle date ils ont payé quel montant. Donc, disons que ce mois-ci vous avez payé 100$, mois prochain vous avez payé 200$ et ainsi de suite. Je veux juste garder une trace de tous ces paiements et voir si vous êtes sur la bonne voie et si vous pouvez compter sur cela. Enfin, je vais frapper le contrôle D sur celui-ci, cette fois. Positionnement vers le bas et juste ici et appelez ça besoin d'un nouveau seul. S' assure qu'il est aligné à gauche et l'aligner sur ici. Parce que là, je vais inclure un bouton. Utilisons un bouton. Donc celui-ci, par exemple, vous pouvez contrôler, voir quelle position il est ici, contrôler V. Et sur ce bouton nous allons écrire, faire le paiement. Parce qu'une fois de plus, si pour une raison quelconque, vous voulez finir dans ce long rapidement. Donc, voyons que vous avez de l'argent, vous avez la promotion, vous avez un prêt de quelqu'un d'autre, je ne sais pas, peu importe, alors vous pouvez rapidement terminer ce paiement en payant le reste de votre montant maintenant. C' est pour ça que nous avons ce bouton ici. Ou par exemple, si vous voulez effectuer des paiements manuels, vous pouvez également le faire. Donc, vous pouvez cliquer juste là. Maintenant, nous avons l'état par défaut, l'état Horace. C'est très bien. On va positionner ça pour être au centre. C'est ça 80. Et la dernière chose que je vais faire est simplement de sélectionner tous ces éléments et de s'assurer qu'ils sont au centre comme ça. De toute évidence, nous allons changer dans les prêts de bureau et les produits laitiers l'ont. Nous avons terminé cet écran. Cliquez ici. Lorsque vous survolez Un, Un, Encore une fois afin qu'ils puissent télécharger leurs relevés de paiement en PDF. Ils peuvent cliquer pour demander un nouveau long, qui va les connecter avec les trucs de la banque. Et ils peuvent enfin l'horreur juste ici pour faire un paiement. Et ça va les emmener à la section des paiements externes. Et la dette à la Banque a. Donc c'est fondamentalement tout pour celui-là. Je vous verrai dans la prochaine quand nous commencerons avec les cartes et nous allons en fait faire un peu plus de travail là-bas. Alors je te verrai là-bas. 50. Créer des conceptions 12: Allons maintenant de l'avant et continuons la conception à la retraite. Et la page suivante, que nous allons créer une carte SD. Donc je vais faire ce truc une fois de plus. Alors touche le contrôle D. Au lieu de prêts, on va écrire des cartes ici. Je vais sélectionner mes cartes, états. Au lieu de vos prêts, nous allons évidemment écrire vos cartes. Et je vais garder ce texte pour l'instant. Je vais supprimer cette image. Et ce que vous allez dépeindre ici, ce sont les cartes. Donc ce sont les cartes que l'utilisateur a déjà. Donc peut-être qu'ils ont une carte de débit Visa peut être dans une carte de crédit MasterCard. Nous allons montrer les fonds disponibles et nous allons montrer la possibilité pour eux de déposer des fonds dans ce panier. Donc, disons qu'ils ont leur compte chèques, compte de crédit ou autre, et qu'ils ne sont pas directement liés à la carte. Ainsi, ils peuvent, par exemple, déposer plus de polices sur la carte à partir de l'un de ces comptes. Ou ils peuvent, par exemple, choisir de déposer des fonds de l'autre carte. Disons qu'ils ont la carte de crédit, qu'ils doivent débiter la carte. Peut-être qu'ils veulent déposer des fonds d'un accord à l'autre. Alors faisons ça. Je vais laisser tout ça, je vais juste supprimer ça. Du liquide si rapide. Et pendant que nous y sommes, organisons rapidement ces choses parce que j'oublie de les organiser avant. Donc je vais passer en haut maintenant, juste ici, je vais déplacer la barre latérale ici. Ensuite, je vais prendre vos poumons le positionner ici. Et je vais le faire pour tous ces écrans. Alors partons d'ici. Celui-ci est organisé. Allons ici. Et celui-ci est organisé aussi. Parce que, comme il l'a dit plusieurs fois tout au long du discours, je vous encourage vraiment à organiser vos couches ici. Et celui-ci est organisé aussi. Donc c'est juste celui-là. Je vous encourage vraiment à organiser vos couches. Et juste parce que vous n'allez pas sauver cela pour plus tard, vous allez le partager comme feu avec vos clients et vos développeurs. Donc c'est vraiment important aussi, organisé tous ces fichiers bientôt, des salles dans lesquelles appelons ça comme ça. Et organisons ces choses. Donc je vais organiser l'aversion. Ce bouton va descendre jusqu'au bout. Si longtemps. Prendre des angles ici, vite, l' argent va ici. Je vais positionner ça ici, et j'ai besoin d'un nouveau long peut aller jusqu'au bas. Enfin, faisons ça ici. Donc nous avons notre top maintenant, juste ici, barre latérale, juste ici, vos cartes juste ici. Et maintenant, lorsque nous avons commencé à développer cela en concevant d'autres éléments, nous allons y placer plus d'éléments. Donc, par exemple, commençons par la carte gauche. Donc ça va être juste ici. Et nous pouvons, par exemple, la qualité, voyons. Par exemple, carte de débit Visa. Et nous allons nous assurer qu'il est aligné à gauche. Je vais le positionner tout le chemin juste ici. Et nous allons d'abord faire glisser notre carte ici juste pour que nous puissions avoir quelque chose avec qui travailler. On peut l'utiliser pour l'agrandir. Mais je vais passer à autre chose en maintenant ma barre d'espace évidemment à plus autour des écrans. Et nous allons prendre cette carte, donc la carte stationnaire, Control-C. Mais je vais sauter à l'intérieur et en fait utilisé le jardin du crédit. Je n'ai pas besoin d'un vol stationnaire entier. Donc contrôlez C sur la carte elle-même. Retournons à ici. Cliquez sur Annuler le contrôle V pour le positionner. Je vais m'assurer qu'il est 40. Donc 246, c'est beaucoup trop. Je vais me positionner, par exemple, à cinq heures. Alors 12345. Voyons ça encore une fois. Juste parce que je veux avoir cette colonne vide et que je veux lui donner un peu d'espacement là. Encore une fois, 12345. Donc ça va finir ici à celui-là. Donc je vais juste bouger ça ici. Et en taille, voyons, peut-être que nous pouvons l'avoir à 391 ou quelque chose comme ça. Donc, comme le côté de saut 391 et la hauteur, Yup, ça a l'air bien. Alors voyons des rectangles. Nous pouvons les déplacer comme ça, ou nous pouvons sélectionner ces deux-là. Cliquez ici. Voir les rectangles là-dedans. Je vais déplacer ça comme ça. Et en fait, je vais sauter et voir la voiture BG. Voyons voir et rectangles aller positionner mes rectangles et manuellement. Et ce que je peux aussi faire, c'est en fait , voyons, vous êtes sans-abri clé Shift pour les réduire comme ça, par exemple. Et puis ils ont simplement déplacé quelque part par ici. Ensuite, je vais positionner MyText un peu. Donc comme ça, assure-toi qu'il est ici. Bien sûr qu'il est 20. Je vais sélectionner mon logo et mon logo Lisa cart. Donc 1234, je pense que ça a l'air bien. Je vais placer ça au milieu et voyons, c'est à 48 maintenant. Donnons-lui 36. Donc comme ça, assurez-vous qu'il est blanc. Et voyons, c'était blanc ? Non, c'est cette couleur gris clair. Donc, nous pouvons le faire ici aussi. Et nous allons utiliser un rectangle. Donc, positionnez Deir sur le dessus du texte. Sélectionnez ces deux positionnés au milieu, puis supprimez mon rectangle. Maintenant, je veux juste m'assurer que tout est aligné. C' est vrai, est-ce que c'est aligné ? Ce sont des habitudes antérieures. Et maintenant, nous avons notre courant terminé. Vous pouvez le faire parce que lorsque je clique ici, vous pouvez voir qu'il retourne à cet état. Donc vous pouvez appliquer une décharge à tous les États, mais je ne vais pas le faire. Donc je vais simplement le positionner ici et je vais en faire une copie. Contrôle D. Et je vais positionner celui-là. Maintenant, vous pouvez voir que nous avons ça et nous allons en avoir un vide de ce côté-ci. Donc je n'aime pas vraiment ça. Voyons voir prescript dire peut même l'augmenter à six. Voyons à quoi ça va ressembler. Ce n'est pas différent de ce que ça ressemble. Laissons-le là et nous allons avoir cette colonne tout le chemin vers la droite pour être vide, juste triée, pardonner, avoir de l'espace. Je vais donc positionner ça ici. Donc vous pouvez voir que nous avons cette colonne vide, donc nous pouvons avoir plus d'espace ici, et nous allons avoir cette colonne vide aussi. Ce que je vais faire ici, c'est sauter du côté. Je vais cacher mes recherches, montrer mon garde musculaire. Et voyons, je vais le positionner pour être au centre de mon logo, pour être juste ici. Alors je vais le positionner, osez. Et nous voulons aussi nous assurer qu'il est juste ici. Voyons voir, c'est 37, c'est 40. Alors bougeons cet original. Voyons voir, il est 37, donc 123, et nous en sommes maintenant à 40 ans. Et si on saute à celle-là, tu vois qu'on est toujours à 37 ans, donc 123. Et je vais déplacer ça à 40 ans aussi. Donc 1234. Et je vais voir où sont mes recherches. Il est à 40 ans et c'est à 40 ans. Donc tout le reste va bien. Voyons ce texte. Oui, tout le reste va bien. Donc ce que je vais faire, je vais laisser celui-ci tel quel, et je vais changer rapidement la couleur de fond de celui-ci. Allons-y vite, sautez à l'intérieur d'ici. Donc, ce sont les deux MasterCard. Donc, je vais sauter à l'intérieur d'ici et j'utilise le contrôle et cliquez. Donc, je peux cliquer directement sur celui-ci. Donc, je vais cliquer avec le bouton droit de la souris. Je vais fermer ça et revenir à notre courant. Une fois de plus maintenez le contrôle afin que je puisse cliquer directement sur la couche BG voiture, cliquez avec le bouton droit de la souris et Coller apparence soja, ils peuvent obtenir le même effet de dégradé que j'ai sur celui-ci. Je vais le positionner ici. Et maintenant, commençons à éditer nos informations. Donc, pour ce premier, voyons où il va déplacer mon bouton moyen vers le bas, carte de crédit Visa et quand se positionner vers le bas. Et voyons une fois de plus. Donc nous sommes à 40 ans ici, ce qui est très bien. Sa position fait donc il est aligné avec notre carte comme celle-ci. Voyons voir, peut-être que nous pouvons nous positionner pour être 40 aussi. Donc 1234, ce qu'il nous faut ensuite, c'est des fonds disponibles. Alors voyons. Nous pouvons taper quelque chose comme trouver, par exemple, pour trois à quatre, disons. Et nous allons également positionner ceci pour être aligné à gauche et le positionner jusqu'ici. Voyons voir, peut-être qu'on peut lui donner le même espacement de 40. Je vais ensuite utiliser ce texte. Assurez-vous encore une fois qu'il est aligné à gauche, positionnez-le ici. Je suis sûr qu'on est à 40 ans. Et voici quelque chose comme des fonds de dépôt à jeter. Donc, une fois de plus, les utilisateurs peuvent simplement cliquer là et il les mènera à l'option de fonds de dépôt par défaut. Donc ils peuvent partir de là et déposer des fonds sur ce compte. Alors organisons rapidement ces. Donc vous avez une carte de crédit, nous avons une recherche. Déplaçons cette carte hors du chemin pour l'instant. Fonds disponibles, allez à ici et déposer des fonds. C' est très bien. Ce qu'il nous faut ensuite, c'est le bouton, peut-être ici. Et peut-être que nous pouvons positionner ce texte ici, s' assurer qu'il est aligné à gauche. Et dis quelque chose comme si j'avais besoin d'une nouvelle voiture. Donc je suis pour mon père juste pour qu'on puisse avoir un espacement de dettes là-bas. Alors voyons 24. Et c'est le dernier alignement à gauche. Et je pense que ça marche bien. Ce que je veux, par exemple, c'est effectuer un paiement afin que vous puissiez effectuer un paiement avec cette carte également. Voyons voir, nous pouvons le positionner ici, nous sommes à 61, c'est bon. Ainsi, par exemple, nous pouvons payer nos factures d'électricité, nos factures de voiture, nos factures de nourriture et ainsi de suite. Donc tout le reste dont nous avons parlé auparavant dans ce que nous avons conçu avant, tout à l'heure, vous êtes à la section panier de votre tableau de bord et vous pouvez évidemment effectuer n'importe lequel de ces paiements directement ici. Ainsi, lorsque vous, par exemple, survolez et cliquez sur ce bouton Effectuer le paiement, il vous mènera à l'écran externe où vous pouvez entrer les informations. Ainsi, par exemple, un compte sur le titulaire de la carte ou du titulaire du compte. Ainsi, par exemple, la compagnie de facture d'électricité ou la compagnie de paiement de voiture ou autre. Ensuite, vous pouvez utiliser ces informations pour effectuer un paiement à l'aide de cette carte concrète. Donc, soit la carte Risa ou cette MasterCard, nous voyons ce texte ici. Je vais l'enlever. Alors organisons cela juste un peu mieux. Donc je vais appeler cette carte de crédit ou un visa courant. Ensuite, je vais simplement utiliser toutes les mêmes informations Control D, déplacer à l'extérieur. Et je vais simplement décaler tout le chemin vers le bas. L' utilisation peut se déplacer et la touche fléchée droite juste pour que je puisse pousser de mes informations de cette façon. Et c'est pourquoi nous avons cette colonne vide, parce que vous pouvez voir que nous avons beaucoup plus d'espace là-bas. Vous pouvez évidemment changer ces deux-là pour que le bouton puisse aller à droite et que les textes puissent aller à gauche. Si c'est quelque chose que tu veux. Vous pouvez également les regrouper le gène de contrôle et vous assurer qu'ils sont empilés. Et vous pouvez simplement le faire dans ce but afin que vous puissiez double-cliquer et les réorganiser de cette façon. Vous pouvez donc voir à quoi votre mise en page peut ressembler. Donc je vais les dissocier parce que je ne veux pas qu'ils soient dans une pile, mais vous pouvez garder tout cela dans une pile. Sue peut organiser dat, dat façon. Ce que je vais faire maintenant, c'est utiliser ceci. Donc MasterCard, crédit courant, comme la dette, fonds disponibles Attila choisir quelques montants plus petits ou par exemple, 2417 ou autre, et déposer des fonds à jeter, il peut rester là où il est. Voyons vite si tout cela est bien organisé. C' est bien, il est aligné sur notre grille, donc c'est bon. Et c'est fondamentalement tout. Ce que je voulais faire, c'est m'assurer que je les ai tous regroupés. Alors je vais les appeler par carte de crédit MasterCard. Et nous allons sauter à l'intérieur et faire l'aperçu. Et vous pouvez voir que tout fonctionne très bien, et les deux fonctionnent comme ils le devraient. Les rejets sont sélectionnés. Donc, c'est fondamentalement tout. Dans la prochaine vidéo, je vais vous montrer Investissements et je vais vous montrer l' écran vide parce que vous avez besoin d'écrans vides pour tout ça. Et nous pouvons, par exemple, montrer cela sur les investissements juste pour montrer à quoi tout cela ressemblera sans aucune information. Ainsi, par exemple, l'utilisateur va juste aller à ces investissements sans jamais faire d'investissements. Nous devons donc leur montrer ce qu'ils peuvent faire pour faire l'investissement. Alors je te verrai là-bas. 51. Créer des conceptions 13: Allons maintenant de l'avant et faire la page des investissements. Donc, une fois de plus contrôler D. Une fois de plus cliquez ici, et voyons, Je peux cliquer sur ma barre latérale, sélectionnez mes investissements juste pour montrer que celui sélectionné. Et laissez-moi revenir rapidement en arrière et voir si j'ai organisé tous ces ont. Et enfin, ce que nous voulons ici, c'est que je vais supprimer ça. Je vais dégrouper ça. Une fois de plus, je peux prendre le texte dont j'ai besoin. Je peux supprimer ceci. Je peux supprimer ce texte et voyons, peut-être que je peux supprimer tous ces éléments. Je peux laisser ce texte. Donc ici, comme je l'ai dit dans la vidéo précédente, nous voulons montrer l'état vide. Et l'état vide est essentiellement l'écran que les utilisateurs vont venir s'ils n'ont pas sélectionné de service ou n'ont pas acheté de produit ou quoi que ce soit. Donc, vous voulez juste montrer cet état vide et montrer ce qui est possible. Tu devrais leur expliquer ce qu'ils peuvent faire à partir de là et où ils peuvent aller de là. Imaginez donc que vous n'avez pas pris d'investissement, mais que vous êtes intéressé à prendre un investissement. Donc tu peux retourner ici, Voyons où ils sont. Voici donc ces investissements. Les investissements dans l'éducation, l' immobilier, la sécurité familiale , la retraite, etc. Et vous pouvez voir et vous rappeler avec espoir à partir de ces vidéos que ces deux services sont connectés et ils ont également ce service ici. Nous avons donc beaucoup de ces services à leur montrer, sorte que nous pouvons les organiser comme ceci sur notre page de tableau de bord. Mais tout d'abord, nous devons montrer un état vide. Donc, je ne vais pas concevoir tout ça. Vous pouvez juste imaginer que vous pouvez les utiliser comme ils sont ici. Mais je vais aussi vous montrer quatre notre dernier écran pour le numérique. Une solution de mise en page possible pour cela et une variation possible de cela. Pour que vous puissiez vous inspirer de cela et passer à autre chose et concevoir cette page si vous le souhaitez. Et je vous encourage vraiment les gars à explorer toutes ces mises en page et à trouver la vôtre, parce que c'est la meilleure façon que vous pouvez apprendre et que vous pouvez explorer et améliorer en tant que concepteur UX d'interface utilisateur, il n'y a aucun intérêt de visionnez simplement ces vidéos et copiez chaque étape. Je le fais. N' incorporez pas quelque chose de votre propre. Ça n'a pas vraiment d'importance si tu fais une erreur. C' est pourquoi vous apprenez de ces cours. Il est vraiment important que vous essayez, que vous ayez essayé de perfectionner votre métier. Et avez-vous exploré toutes ces mises en page par vous-même ? Alors ne vous contentez pas d'aller de l'avant et de copier, d' essayer de faire la chose la vôtre. Donc, sans plus parler, allons de l'avant et changeons ça. Donc, vos investissements comme ça, je vais m'assurer qu'il est aligné au centre et positionné à peu près ici. Et puis je vais utiliser ce texte et par exemple, écrire peu de café rapide en fait à partir du document original. Je vais le sélectionner. Missionnaires ici, positionnés juste ici. Donc, nous pouvons voir, par exemple 40. Donc 1234, comme ça. Et vous pouvez voir que vous n'avez pas d'investissements pour le moment. Contactez-nous si vous souhaitez commencer votre bagage d'investissement dès aujourd'hui. Donc, une fois de plus, si nous revenons à ces investissements, vous pouvez voir qu'il s'agit de forfaits. Donc, sous l'éducation qui est choisi dans ce cas. Nous avons ces deux paquets. Ainsi, par exemple, vous pouvez leur donner l'option comme nous l'avons fait ici pour sélectionner certaines catégories. Donc, soit l'éducation, l'immobilier, la sécurité familiale, ou la retraite. Et dans cette catégorie, ils peuvent ensuite sélectionner l'une de ces deux options. Si vous pensez qu'il y a trop d'informations, vous pouvez créer un groupe défilant comme nous l'avons fait pour celui-ci ici. Donc si je te ramène encore une fois et que je te montre ça. Donc, c'est la boucle défilante et ils ont la possibilité de faire défiler tout le chemin vers le bas. Donc vous n'avez pas à les mettre sur le fond blanc comme nous l'avons fait avec cet exemple. Vous pouvez créer cette section entière, donc ce carré comme un groupe défilant. Ainsi, vous pouvez leur donner une quantité énorme d'options. Par exemple, si vous choisissez de positionner votre texte d'investissement ici, comme nous l'avons fait pour vos cartes, vous pouvez alors imaginer que tout cela peut faire défiler vers le bas. Donc, c'est une autre façon que vous pouvez montrer une quantité énorme d' informations juste en permettant cela de défiler vers le bas. Ensuite, je vais simplement changer ces positions de bas en haut juste ici. Et voyons, peut-être que nous pouvons lui donner quelque chose comme 60, juste pour qu'on puisse leur donner un peu plus d'espace. Et ce que je vais taper, c'est nous contacter parce que nous voulons leur donner la possibilité de contacter la banque. Parce qu'ils veulent peut-être choisir l'un de ces plans d'investissement. Ainsi, ils peuvent contacter la banque et la banque peut alors leur expliquer que les sacs d'investissement sont tous ces éléments. Ils peuvent leur expliquer tout ça. Ou ils peuvent, par exemple, contacter la banque par exemple, comme, hé, je possède mon propre immobilier. Je voulais faire un de ces forfaits immobiliers et je veux investir dans l'immobilier. Comment puis-je faire ça ? Et puis ils peuvent simplement être d'accord avec eux et signer des contrats et tout ce qui vient de la dette. Enfin, je veux inclure une icône ici et je vais copier et baser mon document original. Je vais faire un clic droit dessus et faire local. Et cette icône provient d'éléments invertibles un à la fois. Donc, juste sans aucune couleur dessus. Parce que j'aime la complexité ajoutée qu'elle ajoute à mon désir. Alors 123456. Nous sommes donc à 60 à partir de ce texte. Ce que je vais faire ensuite, c'est simplement organiser toutes ces choses. Donc je vais les regrouper, contrôler g. Et je vais essentiellement créer un rectangle qui va jusqu'ici. Donc, je couvre ce domaine. Je vais sélectionner mon rectangle, sélectionner mon groupe, cliquer ici, puis juste ici pour le positionner au centre de cet espace. Et maintenant, vous pouvez voir à quoi ça ressemble. Je vais le dégrouper. Eh bien, tu peux le garder en groupe si tu veux. Et enfin, nos investissements en écriture juste ici. Ce l, c'est HD premium. Donc une fois de plus, ils ont atterri ici sur la page de désinvestissement. Ils peuvent lire ce texte Hubbard et cliquer sur nous contacter afin qu'ils puissent y aller. Il ne les emmène nulle part, il les ramène juste à cette page. Mais vous pouvez juste imaginer comment ce flux fonctionnerait et comment cela ressemblera. Donc c'est tout pour cette vidéo. Dans la prochaine vidéo, nous allons travailler sur le numérique. Je vais montrer quelques mises en page possibles pour cette page aussi. Vous pouvez ensuite partir de là si vous voulez concevoir cette page pour vous-même. Et après le numérique, nous allons enfin passer à autre chose et connecter tous ces éléments et de navigation dans la barre latérale. Donc tout fonctionne comme il se doit. On va traverser ça une fois de plus. Et après cela, nous allons enfin passer au design réactif. Je vais vous expliquer ce qu'est le design réactif, ce que vous devez surveiller et tout le reste de l'information. Je te vois dans la prochaine vidéo. Où allons-nous aborder le numérique ? 52. Créer des conceptions 14: Enfin, commençons par les services numériques. Donc, dupliquons ce contrôle D. Et ça s'appelle ça numérique. Que je vais également sélectionner ma barre latérale, sélectionnez principal numérique. Et je vais supprimer tout ça. Idat. Ensuite, je vais choisir, d'ici par exemple. Alors choisissons celui-ci et celui-ci Control-C. Et juste besoin de dette pour le coller juste ici, parce qu'il est déjà dans la bonne position. Voyons voir, 4040. C'est très bien. Et je vais sauter et déplacer tout ça vers le bas. Ensuite, je vais écrire dans les services numériques ici. Et je vais ouvrir celui-ci et je vais supprimer toutes ces informations. En fait, je peux même le dégrouper et je peux appeler ceci, par exemple, région bancaire E. Parce que je vais énumérer mes services numériques ici. Ensuite, nous allons apporter quelques modifications aux tailles. Donc sept à cinq avec 371. Et maintenant vous pouvez voir qu'on est à six ans, donc 246, on est toujours à 40 ans. Et aller dupliquer la position à sont juste ici. Donc nous sommes à six ans ici. Donc 246, je vais appeler ce prochain M Banking Vg. Ensuite, je vais dupliquer celui-là, le positionner jusqu'ici. Vous pouvez voir qu'on est à 39. Donc si je déplace celui-ci vers le haut, et alors on voudrait en avoir 40. Donc, parfois, vous devez faire face à ces pixels parce que nous sommes à 40 du bas et nous sommes à 39 d'ici. Donc je vais déplacer ça vers le bas et je vais l'appeler QR, code, douleurs et MEG. Et enfin, je vais frapper le contrôle D sur celui-ci, positionner jusqu'au bas. Et je vais l'appeler assistant virtuel à Béjing, comme ça. Et puis ce que je vais faire est de sauter dans toutes ces sections pour que je puisse même faire quelque chose comme ça. Donc, je peux maintenir la touche Maj Contrôle C et je peux déplacer tout le chemin vers ici le contrôle V, afin qu'ils puissent les coller ci-dessous. Et ce que je peux faire, c'est tout simplement les utiliser à mon avantage. Alors allons-y et dégroupez ce premier. Je vais utiliser mon image, donc contrôler x, je vais cliquer ici, contrôler V pour le coller ici. Et ce que je vais faire de mon image, c'est des nouvelles d'autres dimensions. Donc pour recréer avec 371. Donc, je vais le positionner comme étant de trois colonnes de large fondamentalement. Alors ce que je vais faire, c'est faire quelques changements dans le rayon du coin. Donc on va avoir Sam et tank. Donc, en haut à gauche et en bas à gauche vont être autour d'elle comme vous pouvez le voir. Et ces deux-là vont être hétéro. Je vais double-cliquer ici et je peux agrandir mon image juste un peu. Quelque chose comme ça. Assurez-vous que ces gars sont au centre. Peut-être un peu plus comme ça. Maintenant que je suis heureux avec elle, je peux simplement l'appeler E banking, IMG, dire image bancaire. Et allons de l'avant et faisons tout ça. Donc je vais frapper les actes de contrôle sur celui-ci et je peux le dégrouper. Voyons voir, nous sommes à M Banking, alors contrôle v. Donnons-lui la même démence. Donc 338371. Je vais le positionner ici à gauche. Assurez-vous que nous sommes à dix ans et que nous le sommes. J' utilise l'onglet pour basculer entre ceux-ci. Donc, vous pouvez voir que ceci et ce coin sont arrondis. Cette image est bien parce qu'elle est centrée et j'aime comment elle ressemble à du sel, nous ne allons rien y faire. Je peux alors plus gagné ce texte ici afin que nous puissions avoir un peu plus d'espace. Je peux cliquer avec le bouton droit de la souris sur celui-ci, le dissocier afin que je puisse utiliser mon image. Donc, contrôlez X, contrôlez V et C une fois de plus. Donc 338 avec 371, positionnez-le ici. Tu vois, à gauche. Et voyons, nous allons appeler ceci, position SO à la banque comme ça. On va appeler ça un Ben King IMG. Ils vont positionner cette image vers le bas. Donc les paiements par code QR, IMG, comme ça. Assurez-vous que nous sommes alignés à gauche, nous sommes centrés. Voyons voir, quelque chose n'est pas là, donc comme ça. Donc 3940 vers le bas. Donc, c'est bien. Et nous allons faire le tour des coins ici aussi. Donc pour se tourner et poncer ici, c'est bon. Elle est au centre, donc c'est bien. Et enfin, utilisons-nous celui-ci. Je vais donc positionner ce texte ici. Je vais regrouper celui-là dégrouper Control X pour couper sa position fait ici. Cliquez sur Contrôle, repositionnez le tout vers le bas. Alors IMG. Et donnons-lui quelque chose. 338371. On va utiliser un pneu de plus ou du sable. Du sable. Et enfin, déplacez cette image vers le bas et positionnez-la ici. Donc maintenant que c'est terminé dans un canoë et double-clic peut déplacer ce gars juste légèrement vers la gauche, comme ça. Maintenant que cela est terminé, Je veux fondamentalement sélectionner ces services et les a déplacés à leurs endroits d'origine. Ou vous voulez simplement rendre le texte plus petit. Et je vais changer ce qu'il dit ici, dans ces boutons. Donc, pour chacun d'entre eux, quelque chose de différent dira sur les boutons. Ainsi, les utilisateurs peuvent alors ou lire sur le service ici directement à l'intérieur du tableau de bord. Ils n'ont pas besoin de retourner à la page Web et de lire les informations osent. Et ils peuvent directement sélectionner pour activer leur service, par exemple, là. Donc notre premier est E, les solides bancaires utilisant celui-ci. Et voyons, je ne vais pas utiliser ces boutons, tous ses dégrouper, ceux-là. Et je peux supprimer celui-ci parce que j'ai déjà tous ces boutons. Donc je peux me positionner ici, parce que si vous vous souvenez, nous avons un peu une grille différente juste ici. Maintenant, ce que je vais faire est de cliquer sur celui-ci et voyons, peut-être que je peux utiliser quelque chose de plus petit comme 24. Je peux le faire à 16 ans, et je peux abaisser la taille de mon texte à quelque chose comme celui-ci. Voyons voir, peut-être qu'on peut être au solénoïde C et qu'on peut être à 20 ans ici aussi. Est-ce que ça correspond à notre Watson ? C' est vrai, et nous sommes à 17 ans. Donc c'est en fait couper cette simplicité d'utilisation. Allons le couper. Osez. Voyons où nous en sommes à 30 forêts. Alors donnons-lui un espacement de deux quand c, comme ça, voyons. Avec une connexion Internet listes effectivement coupé là. Et nous allons cliquer ici pour couper nos textes. Et donnons ça à 14, parce que nous n'avons pas besoin d'un trop grand nombre d'entre eux. Alors voyons. Nous allons avoir le texte en trois lignes. Peut-être que je peux même donner un peu plus d'espace pour qu'il puisse lire un peu mieux. Et j'aime comment ça ressemble. Maintenant, ce que je vais faire est en fait de double-cliquer sur le bouton. Et faisons cela si activement afin qu'ils puissent être activés directement. Je peux retourner dans mon état d'horreur, maintenant. Et ce que je vais faire, c'est m'assurer que c'est deux colonnes de large maintenant. Donc comme ça. Et ce que nous pouvons aussi faire parce que c'est 24. Maintenant, nous pouvons apporter des changements supplémentaires et nous assurer que ce soit, par exemple, 18 irrégulier et blanc. Nous pouvons nous assurer qu'il est au centre de nos boutons ou activer. Maintenant, comme ça, vous pouvez faire un nouveau composant de cela et l'appeler, par exemple, il voit le bouton des services numériques ou tout ce que vous voulez. Mais je vais toujours le laisser là. Donc une fois de plus, nous sommes à 182 colonnes de large et pour utiliser l'état de vol stationnaire comme celui-ci, activé maintenant, nous sommes à 1800 blancs. Assurez-vous que nous sommes au centre. On est comme ça, ici, comme ça. Et c'est très bien. Quand je le ferme et que je le déplace ici, vous pouvez voir à quoi ça ressemble. Donc tu peux encore le laisser à trois si tu veux, mais je ne vais pas le faire. Alignons ça à notre grille. On a encore un peu plus d'espace ici. Nous allons donc l'utiliser. Et je pense que ça a l'air bien si on a sauté à un aperçu rapide. Vous pouvez voir que le bouton fonctionne toujours. Vous pouvez le rendre plus étroit jusqu'au sommet dans l'eau. Mais comme je l'ai dit, je ne vais pas déranger, je vais juste le laisser tel qu'il est, juste un peu plus étroit. Vous pouvez évidemment exporter cela pour plus tard pour les développeurs, mais nous allons en parler plus tard. Pour l'instant, regrouperons rapidement tous ces éléments. Je vais donc sélectionner mon texte et mes boutons, les déplacer sous mon image. Réorganisé les IDAT groupe tous ces et l'appeler Eden banking. Et passons maintenant à la suivante. Donc maintenant, nous avons m banque. Donc, je vais réellement supprimer le bouton. Je vais déplacer mes textos. Je vais le dégrouper. Positionnez juste en dessous de notre image bancaire. Alignez-le sur la grille. Et si nous vérifions que nous sommes 24, nous sommes 16 en trois lignes. Alors faisons ça ici aussi. Alors voyons. Ça va être 24 et boulon, et ça va être 16 et en trois lignes. Mais coulons-le à quelque chose comme ça. Quel espace avons-nous ici ? Donc on en a huit. Positionnons ça là-dedans. Alors voyons dix. Et puis voyons comment on peut faire ça ? Alors peut-être que nous pouvons utiliser un rectangle ou un guide. Donc, nous allons utiliser un guide en fait. Donc 1012, pour qu'on puisse revenir en arrière et que je puisse dézoomer ici, choisir ma position de guide, c'est là comme ça. Et puis je peux déplacer mes textes et étendu à ici. Et maintenant, je peux y mettre fin, par exemple, gérer vos finances et plus encore. Non, ça ne marche pas. Alors coupons d'abord ici. Un emplacement Bella pour nouveau peut accéder à votre compte. Vous avez accès. Vous pouvez voir gérer vos finances et plus ou disons que vous pouvez oui, comme ça. Je peux le réduire. Et voyons ce que nous avons ici. Donc, nous sommes à 42, ici. D' accord ? Alors donnons-lui ce 123412. On est à 40 ans ici. Alors voyons 40. Et je vais simplement copier ma position de bouton. Ici. Nous sommes à 40 et nous assurons simplement que nous sommes dans un centre. Nous le sommes. Donc, c'est bien. Et positionnons ce bouton ici. Et je peux, par exemple, taper le téléchargement maintenant au lieu d'activer maintenant. Parce qu'ils peuvent cliquer et télécharger l'application pour iOS ou Android. Au lieu d'activer maintenant, parce que c'est M banking et ils doivent le faire. Alors regrouperons tous ces éléments. Donc il contrôlerait G et quand l'appeler M banque ma dette. Et maintenant, ce que nous pouvons faire est, par exemple, de positionner tous ces éléments vers le bas. Hmm, voyons voir. Oui, en fait, je peux cacher cette image. Je peux cacher cette image. Je peux supprimer ces deux-là. Et puis je peux regrouper ces deux-là juste pour garder les choses un peu plus vite. 123439 d'ici. Donc, c'est bien. Je vais les positionner tous les deux. Donc ça va être mon code QR, code, paiements. Et nous pouvons donner à cela son arrière-plan comme ça. Vg. Et je fais ça pour améliorer un peu ma vitesse. Ce sera le système virtuel I et Vg N étant donné comme ça. Et au lieu de ces deux-là, on va juste changer d'endroit. Donc je vais supprimer ça, montrer. Cela fonctionne très bien. Et je vais faire la même chose pour mes copies QR. Comme vous pouvez le voir, il est parfaitement aligné. Tout est en place là où il devrait être parce que nous venons de remplacer la position de ceux-ci. Donc, enfin, nous allons bouger tout ça. Je vais lui écrire des paiements de code QR. Et je vais écrire dans assistant virtuel et Adobe XD, corrigez-moi. Je vais supprimer ce bouton et supprimer ce texte, supprimer ceci et ceci. Donc, pour un QR, nous allons double-cliquer sur café et que vous voulez supprimer ce texte et double-cliquer sur le côté et basé. Et voyons ce que nous sommes ici. Vous pouvez accéder à l'avenir de paiement par code QR. Il suffit d'ouvrir l'application pour allumer un appareil photo. Commençons à partir de là. Donc ça peut courir dans le géocodeur et il va transférer des fonds. Pour transférer des fonds, voyons instantanément. Donc, comme vous pouvez le voir, nous changeons la copie à la volée. Nous sommes encore là où nous devons être avec les dimensions. Et nous pouvons écrire par exemple, ouvrir l'application. Maintenant, on peut aller à l'état d'horreur. Parce que comme vous pouvez le lire ici, il suffit d'ouvrir l'application, de tourner l'appareil photo sur un code QR et l'application va transférer des fonds instantanément. Donc, soit vous effectuez des paiements, vous transférez des fonds à quelqu'un d'autre en utilisant ce code QR. C' est pourquoi j'ai fait ça, c'est pourquoi je les ai copiés parce que c'est beaucoup plus rapide. Ensuite, finissons avec les systèmes virtuels sur la copie du texte à l'aide du contrôle. Vous voyez, j'utilise le contrôle veto coller et voyons ce que nous pouvons utiliser à partir de ce texte. Alors économisez du temps et de l'argent. Oui, faisons-le. Allons-y. Voyons, 4040, on en a 42, donc tout va bien. Et comment pouvons-nous faire ça ? Peut-être activer maintenant ou démarrer le chat. Commencez à discuter maintenant. Donc, vous pouvez commencer à discuter avec l'assistant virtuel, évidemment. Et c'est fondamentalement ça. Maintenant, nous avons terminé notre conception. Prévisualisons ça. Et comme vous pouvez le voir, tous ces états distincts fonctionnent bien. Donc, tous ces effets de vol stationnaire fonctionnent bien. Comme il l'a dit plusieurs fois, vous pouvez inclure le vol stationnaire séparé pour ces cartes si vous le souhaitez. Je ne vais pas le faire parce que nous avons déjà ce bel effet de vol stationnaire et tout semble déjà bien à mon avis. Mais vous pouvez explorer cela et le transformer en un composant pour l'effet de vol stationnaire évidemment. Donc je pense qu'on va appeler ça un jour ici. Et dans la vidéo suivante, je vais vous montrer comment vous pouvez connecter tous ces éléments et vous connecter à cette navigation. Et nous allons explorer tout ça un peu plus. Je vais vous donner un peu plus de mes opinions. Et enfin, ce que je voulais dire pour cette vidéo, c'est que vous avez vu comment nous avons intégré tous ces éléments pour les services numériques. Donc, ces formes. Et si je vous ramène à celui-ci, donc les investissements, vous pouvez utiliser une mise en page similaire à ceux-ci. Imaginez donc que, par exemple, si je vous ramène à cet écran où il est, le voilà. C' était une fois de plus, l'éducation, l' immobilier, la sécurité familiale et la retraite. Donc, au lieu d'écrire quelque chose comme les services numériques, vous pouvez taper, par exemple, quelque chose comme l'éducation. Et vous pouvez montrer la dose à juste ici comme ceci, dans cette mise en page exacte si vous le souhaitez, vous pouvez changer la mise en page ou quoi que ce soit. Ensuite, vous pouvez copier cette mise en page. Imaginez ces trois éléments. Donc, le texte et ces deux, vous pouvez le baser ci-dessous. Et vous pouvez déjà créer un groupe défilant. Si c'est la mise en page que vous voulez. Vous pouvez également dupliquer une mise en page. Ainsi, vous pouvez, par exemple, utiliser la même mise en page, mais par exemple, écrire l'éducation ici, utiliser les deux options pour l'éducation. Et puis vous pouvez taper dans l'immobilier ici et utiliser les deux options pour l'immobilier, puis vous pouvez dupliquer la dette, déposer ci-dessous, et vous pouvez créer tout cela pour être défilant groupe afin que les utilisateurs puissent faire défiler vers le bas et voir entre tous ceux. Tu as vu ce que c'était ? L' éducation, la sécurité familiale et la retraite ? Oui. Et parce qu'ils ont tous deux de ces options, vous pouvez le faire. Et enfin, vous avez cette option ici, alors sécurisez votre avenir. Vous pouvez le créer en tant qu'option distincte. ne sont donc que quelques-unes de mes opinions et comment je vais le faire. Retirons rapidement ce gars parce qu'on n'en a plus besoin. Et vous pouvez faire ce que vous voulez avec cette mise en page. Et encore une fois, je vous encourage vraiment à le tester, à l'essayer, et à voir vos idées prendre vie. Vous pouvez évidemment faire ces changements comme vous le souhaitez à la volée. Vous pouvez les appliquer comme vous le souhaitez. Vous pouvez faire ce que vous voulez avec ce design. Tant que je l'ai dit, c'est dans le but d'apprendre, vous n'avez pas la permission. Je ne peux pas insister sur ce point assez légalement pour utiliser l'un de ces actifs à des fins premium, terre soit pour vos clients, soit pour n'importe quelle autre tour, juste à des fins d'apprentissage. Donc, je vous encourage, si vous choisissez d'utiliser cette même mise en page, cette même structure, en éditant la même. Veuillez remplacer ces images par vos propres images, et s'il vous plaît remplacer la copie, écrire votre propre copie. Et de cette façon, vous pouvez éviter un possible procès de moi ou d' autres ressources comme et éléments Watteau et toutes ces ressources premium qui sont utilisés à partir de. Donc, je ne peux vraiment pas insister assez sur ça. Pratiquez autant que vous voulez, mais quand vous voulez l'utiliser à des fins commerciales, donc dans pour les clients ou plus tard quatre, revendez essayé d'incorporer votre propre copie et vos propres éléments. Saw icônes et images, comme il l'a dit dans la vidéo suivante et la vidéo finale de cette section de conception, nous allons courir à travers la navigation. Je vais vous montrer comment vous pouvez tout connecter. Alors je te verrai là-bas. 53. Créer des conceptions 15: Enfin, dans cette dernière vidéo de notre section design, allons rapidement de l'avant et connectons tous ces éléments de navigation. Donc, comme vous l'avez vu, nous avons déjà nos états, donc tout est bien connecté. Alors commençons avec les connexions elles-mêmes. Donc, ce que je vais faire est de sauter à l'intérieur du prototype et je vais cliquer sur mon compte parce qu'il est dans le dossier, c'est beaucoup plus grand point de contact. Et c'est vraiment important quand tu fais toutes ces choses. Vous voulez vous assurer que les utilisateurs peuvent réellement appuyer sur ce que vous voulez qu'ils onglet. C' est pourquoi nous mettons les choses à l'intérieur de ces groupes. Ainsi, lorsque vos utilisateurs, lorsque votre client, vos développeurs, quel que soit l'explorateur et interagit avec ce prototype, vous pouvez réellement partager, partager avec eux et vous pouvez leur montrer comment ils peuvent l'utiliser. Et ils seront beaucoup plus simplement en mesure de cliquer sur ces éléments lorsqu'ils sont dans le groupe. Il y a donc un point de robinet beaucoup plus grand. Alors, imaginez qu'ils peuvent cliquer ici ou sur cette minuscule petite icône. Donc, cliquez sur glisser jusqu'à ce point. Et je vais simplement traîner parce que nous sommes comme ça, donc c'est beaucoup plus facile de le faire et de passer par tous. Donc, pour cette première transition, ce que nous allons faire est d'utiliser auto animate. Nous pouvons utiliser quelque chose comme Snap parce que je veux que ce fond, ce sélecteur puisse se mettre en position. Et je vais utiliser quelque chose comme 0.4. Et faisons la même chose pour celui-ci. Donc, je peux effectivement cliquer et nous allons aller aux transactions. Donc, les transactions de tableau de bord, c'est en fait plus facile de cette façon car ils sont situés tout le long. Et vous pouvez les voir tous ici. Ce sera donc des prêts. Et une fois de plus, vous pouvez voir ce que vous avez sélectionné ici. Ça va être des cartes. Mon père. Ce sera des investissements. Il investit. Je ne pense pas qu'on ait choisi ça correctement, je ne l'ai pas fait. Donc cartes, ouay. Et numérique. Numérique. Le numérique et c'est bon d'être une déconnexion. Et déconnexion. Il va nous emmener ici à la page d'accueil. Donc, la conception de la page d'accueil est là où nous devons aller. Alors cliquez ici et localisez la page d'accueil dans la conception. Ici, c'est. Et au lieu de celui-ci, nous allons utiliser quelque chose d'un peu différent. Alors passons à la conception de la page d'accueil. Donc, au lieu d'animer automatique, j'utiliserai la transition en o au lieu de snap DZ et hors dans 0.4. ce que cela va faire, c'est parce que tous ces éléments sont animés automatiquement parce que la plupart contenaient les mêmes éléments. Donc au moins ces cartes sont les mêmes, ce texte est le même, les boutons sont les mêmes, et ainsi de suite et ainsi de suite. Donc tout va être beau et cohérent, mais avec la page d'accueil, une fois de plus, est complètement différent. Donc, vous ne voulez pas vraiment utiliser l'animation automatique. Alors revenons maintenant. Et ce que je vais faire, c'est peut-être partir d'ici. Allons au compte. On peut faire la même chose. Mais voyons, comment puis-je faire ça ? Alors peut-être que je peux revenir à mon design. Il contrôlait C, sautant ici, contrôlait V, et utilisait mon compte. Déplacez le bas juste pour que je puisse sélectionner un tableau de bord sur tous ces car notre nombre est déjà créé de sorte que phi. Allons-y et revenons à notre prototype. Double-cliquez sur notre tableau de bord, glisser-déposer. Et quand utiliser des animations automatiques, je vais utiliser snap et 0.4. Alors maintenant, allons de l'avant et passons au reste d'entre eux. Ce sera donc des transactions. Voyons, tableau de bord, prêts. Donc tout le chemin vers le bas des cartes, même chose, tout le chemin vers le bas. Des investissements comme ça. Numérique. Et enfin, déconnexion cliquez. Et au lieu de l'animation automatique, la transition, destination va être la conception de la page d'accueil. Dissoudre. Au lieu de Snap, allons-y avec easy and out 0.4 secondes. Maintenant, allons de l'avant et changeons cela pour des transactions comme dat. Et on peut faire la même chose. Donc tableau de bord et glisser-déposer compte. Nous y voilà. Donc VR sélectionné, oser, et voyons les transactions. Prêts pour s'adapter juste là. Voyons des prêts, pas cartes, des investissements dans le numérique. Et je viens de remarquer que j'utilise simplement AZ et out. Donc je vais utiliser Snap. Et pour les changer, il suffit de cliquer dessus. Passez facile à claquer. Et faites la même chose pour tous comme ça, où nous sommes tellement compte parce que nous sommes sur le compte, nous ne pouvons pas changer cela. Alors voyons, peut-être que nous pouvons faire le tableau de bord sur chacun d'eux et ensuite le ramener à la maison. Alors faisons-le à des prêts. Je vais cliquer sur mon tableau de bord. Mon père. Retournons en arrière. Donc, nous avons panier tableau de bord, investissement, numérique, comme ça. Et c'est fondamentalement tout. Utilisons maintenant celui-ci afin que nous puissions revenir à notre état par défaut. Voyons voir. Voyons s'il est mis à jour ici. Non, ça ne l'a pas fait. Nous sommes donc toujours à l'état par défaut. Alors ramenons ça ici. Et nous allons travailler à partir de là. Je ne sais pas, peut-être que nous pouvons même continuer à partir d'ici, mais sur celui-ci je ne peux pas changer de compte. Alors peut-être que je peux le copier. Voyons comment je peux faire ça ? Contrôle C, je peux l'amener ici. Et de Dan, Dan, je pourrai copier et coller des puits d'erreur. Donc notre décompte est déjà terminé. Donc, si je clique ici et accède à mon compte, allez sur le prototype, vous pouvez voir qu'il est terminé. Les transactions sont terminées. Maintenant. Connectez simplement nos transactions comptables, les prêts, il est terminé, les cartes, les investissements et le numérique. Donc, il les a tous connectés, ce qui est génial. Donc, je peux maintenant passer à mon état par défaut, revenir à mon design. Il contrôlerait X. Donc parce que nous sommes déjà connectés à celui-ci, amenons-le ici. Ce sera donc nos transactions. Voyons s'il est connecté où qu'il soit, à l' exception de la déconnexion, du tableau de bord et du compte. Alors connectons-le là-dedans. Donc, je vais cliquer là et aller sur mon compte. Je vais utiliser ce snap et cliquer ici et aller à mon tableau de bord. Alors voyons. Et cela va être et la conception de tableau de bord comme la dette. Revenons à ce QI Control C. Cliquez ici, Control v. Je vais sélectionner le prototype des poumons. Et voyons voir. Pour une raison quelconque, ça ne m'a pas montré ça d'esprit étroit. Allons de l'avant et connectés partout. Donc dans le tableau de bord, la conception, tableau de bord, les tableaux de bord des comptes, les transactions, et il y a plus de cartes. Quoi ? Investissements ? Et tableau de bord et numérique. Et je vais laisser la déconnexion pour plus tard parce qu' il est beaucoup plus simple de cliquer entre eux et de les connecter de cette façon. Alors faisons le même genre. Je vais frapper le contrôle C, copier ou juste ici. Positionné juste en dessous sur tous triés voir ci-dessous mon nav supérieur. Et en dessous de Mater, en bas. Alors maintenant et c'est bon, c'est bon. Ok, passons maintenant à autre chose. Donc, très loin est, voyons, longtemps qu'on les a fait. Ici, nous sommes sur les cartes. Revenons au prototype. Donc double-cliquez sur Dashboard et je vais faire tout de même. Donc, la conception, le compte, les transactions, les prêts, les investissements dans le numérique comme ça. Et enfin, touchons le contrôle C et revenons à notre contrôle des placements V. Et je vais aussi le coller ici. Donc contrôle. Maintenant, faisons-le d'abord avec celui-ci. Nous allons donc aller au tableau de bord prototypé des investissements. Cliquez sur OK. J' essaie de le faire aussi vite que possible. Donc compte, voyons voir. Actions. Nous sommes prêts. Cartes. Numérique est sélectionné, ou retour à la conception contrôle c et contrôle v ici. Désolé, comme ça. C' est numérique. Donc enfin, c'est le dernier. Choisissons le numérique. Il voit si nous sélectionnons des investissements, des cartes , des prêts, des transactions, où nous sommes ici, donc nous devons être en compte. On est connecté au SPR, ok ? Et ce premier est le tableau de bord. Ok, donc tout fonctionne bien pour l'instant. Cliquez ici et explorons cela un peu plus. Nous sommes donc un tableau de bord prototype numérique et finissons rapidement. Donc, Dashboard Design va être un compte de tableau de bord. Donc, ouvrez des transactions de tableau de bord et des tableaux de bord pour les lagunes. Et il y a plus d'investissements actuels dans le tableau de bord. Et c'est tout. Allons-y rapidement et connectons ces logos. Je vais donc choisir ce que nous avons dit, la page d'accueil et le design. Je vais aller avec note facile 0.4. secondes et la transition Dissoudre. Donc, c'est bien. Je vais faire la même chose pour la discipline. Voyons donc la page d'accueil et le design et la façon de procéder pour une discipline. Donc la conception de la page d'accueil sur la page et conçu. Et je verrais la conception de la page d'accueil. Je serai connecté ici. Euh, oui, oui, nous sommes ici aussi. Et enfin, allons de l'avant et voyons ce que nous avons jusqu'à présent. Donc, lorsque vous cliquez ici, vous pouvez voir que le sélecteur se déplace bien. Et tout fonctionne comme il se doit. Tout change bien. Pour une raison quelconque, nous ne pouvons pas aller à Digital ici. Voyons voir, c'est le deuxième à dernier, donc c'est ce prototype. Oui, on ne l'a pas connectée. Donc on va y aller. Animation automatique. Au lieu de la note facile, nous allons utiliser le snap. Alors frappons rapidement l'aperçu à partir de là. Désolé, je l'ai perdu. Ici, c'est. Alors maintenant le numérique fonctionne comme il se doit. Pour qu'on puisse partir d'ici. Tout fonctionne bien d'ici à ici, d'ici à ici. Donc tout fonctionne comme il se doit. Et enfin, nous allons cliquer sur déconnexion et cela nous ramène à l'écran d'accueil. Maintenant que nous sommes ici, nous pouvons en fait explorer tout cela un peu plus et nous rappeler ce que nous avons fait jusqu'à présent. Donc, vous pouvez voir tous ces travaux vraiment bien. Tout cela est connecté. Et une autre chose dont je ne t'ai pas parlé, c'est que tu peux les lier. Ainsi, vous pouvez lier le compte. Il peut aller à la page des comptes, des prêts, il peut aller à la page de lancement et ainsi de suite et ainsi de suite. Vous pouvez évidemment lier ces pages lorsque vous les créez, mais vous ne pouvez pas les lier. Donc, quand vous allez sur le compte, et si je fais défiler tout le chemin vers le bas dans les comptes, nous avons commencé notre voiture étrangère millénaire et le fraisage de seau. Donc, vous ne pouvez pas faire ça. Vous ne pouvez donc pas cliquer sur le compte Démarrer. Et il vous faut pour commencer le décompte. Vous ne pouvez pas lier ceci, et il ne peut pas lier à celui-ci car Adobe XD n'est tout simplement pas encore avancé. Vous pouvez lier ces pages. Donc je pense que nous l'avons fait pour les cartes ou les prêts où nous l'avons connecté, investir. Oui. Ainsi, vous pouvez le faire et vous pouvez les lier pour vous ramener à n'importe quelle section de la page. Mais une fois que vous êtes sur la page elle-même, vous pouvez maintenant passer du pied de page à cette section particulière de la page particulière. Donc, une fois de plus, passons de l'un à l'autre et voyons comment ils fonctionnent. Désolé, mon ordinateur est un peu plus lent parce que je cours sur des fichiers Adobe XD en même temps et que j'enregistre, donc je m'excuse si quelque chose se passe, c'est plus lent. Un numérique. Donc je pense qu'avec LinkedIn osent aussi, non, juste pour celui-là. Donc, vous pouvez voir comment ça marche. Et par exemple, si vous voyez quelque chose comme, je ne sais pas, paiements de code QR Yep. Donnez vous écrire quelque chose comme vous pouvez payer avec la loi QR Copayments. Et puis quand ils cliquent sur ce bouton, il pourrait les amener directement à la section des paiements par code QR. Donc juste garder cela à l'esprit parce que pour l'investissement où ils cliquent juste là ou juste les a pris à cette section où je peux les prendre à la tromperie. J' ai connecté cette section, il suffit de lier ce bouton à la section de votre page où vous voulez qu'il aille. Enfin, vérifions ça. Alors connectez-vous, ça nous amène ici. Nous pouvons basculer entre la connexion et l'inscription. Lorsque nous cliquons ici, cela nous amène à notre tableau de bord. Et à partir de notre tableau de bord, nous pouvons les explorer. Donc nous avons ces différentes cartes. Nous avons ces différentes sections qui s'animent vraiment bien. On peut aller sur le compte. Donc, nous pouvons lier ici aussi, modifier les informations, les transactions. On peut basculer entre les revenus et les dépenses, et je n'aime toujours pas ça, mais gardons ça là. En fait, vous pouvez explorer cela plus loin et vous pouvez vous assurer de créer une meilleure version de ce que j'ai fait. Donc, nous avons un groupe scrollable ici. On a des effets de vol stationnaire pour ça, juste ici. On peut aller aux poumons. Vous pouvez effectuer le paiement ici. Cartes. Nous pouvons faire des investissements de paiement. Nous pouvons les contacter pour investissement. Et enfin numérique. Et nous avons ces boutons différents pour toutes ces sections. Et à la fin, quand je clique sur déconnexion, cela me ramène à l'écran d'accueil. Donc c'est tout pour la section de conception. J' espère vraiment que vous avez apprécié ça. J' ai fait de mon mieux pour vous donner autant d'opinions, d'options, de techniques de mise en page, de techniques de formatage , etc. Dans la section suivante de ce cours, nous allons parler du design réactif. Je vais vous dire ce qu'est le design réactif, comment vous pouvez l'utiliser dans votre design. Comment nous allons finir par l'utiliser ici sur notre design. Et puis plus tard, je vais vous montrer comment nous pouvons réellement créer une page pour être réactive. Je vous verrai donc dans la section suivante de ce cours sur le design réactif. Et j'espère vraiment que vous apprendrez beaucoup jusqu'à présent, et j'espère vraiment que vous aimerez cette section aussi. Une fois la conception réactive terminée, nous allons couvrir le partage avec notre client. Et comme je l'ai dit au début du cours, vous pouvez partager sur les ondes à n'importe quelle étape que vous voulez. Ainsi, vous pouvez le partager directement à partir d'ici et vous pouvez obtenir les commentaires. Et c'est ce que je veux que vous fassiez vos vrais clients. Donc, pour commencer avec Adobe XD filaires, puis partager à partir de Deir, recueillir les commentaires de votre client, puis adapter ces commentaires. Une fois qu'ils ont approuvé le filaire, vous pouvez passer à la conception. Vous pouvez partager le design évidemment avec votre client. Et puis une fois que vous accédez à la page responsive, vous pouvez également partager un design responsive. C' est donc l'intention ici de concevoir, prototyper et de partager tous en même temps. Donc vous avez toutes ces options ici, mais je voulais juste gagner un peu de temps. Donc, au lieu de partager toutes ces options et d'obtenir des commentaires, nous pouvons partager. Enfin, juste ici quand nous sommes à la section design. Mais une fois de plus, et enfin, je veux vraiment que vous commenciez à partager à partir d'ici puis que vous passerez à partir de là une fois que vous aurez suffisamment de commentaires. Donc c'est tout pour cette vidéo. Enfin, je dois vraiment en conférer trop pour parler. Je vous verrai dans la section suivante lorsque nous commencerons à travailler avec le design responsive. Alors je te verrai là-bas. 54. Qu'est-ce qu'une conception réactive: Maintenant que nous avons terminé la partie design de notre projet, nous allons passer à une partie design réactive. Et je veux juste vous dire rapidement ce qu'est le design responsive, ce que nous allons utiliser et comment nous allons l'utiliser. Et puis ce que vous pouvez faire à partir de là et passer à partir de là pour pratiquer vos compétences de design réactif. Donc, tout d'abord, nous utilisons le design responsive comme un design, pas comme un code, mais nous voulons toujours le préparer pour les développeurs quand ils se joignent code et quand ils commencent à créer un design responsive pour être en direct. Alors comment on va faire ça ? On va utiliser le Bootstrap. Bootstrap est fondamentalement cet ensemble déjà préfabriqué de composants dans le code, mais nous allons utiliser la partie design de ces composants. Et quand nous arriverons à la prochaine vidéo, je vais vous montrer comment cela va fonctionner dans Adobe XD. Et parce que si vous souvenez, chacun, notre Conseil a sa grille, nous allons appliquer cette même structure à la conception responsive. Mais pour chaque taille particulière, nous allons adapter la taille de la grille. Et quand nous adaptons la taille de la grille. Et puis nous allons adapter les éléments à cette taille de grille, N à la taille de l'aéroport lui-même. Donc, disons que nous avons, par exemple, l'image à gauche, les textes et le bas à droite. Au lieu de simplement les réduire comme ça, nous allons les retourner. Donc l'image va aller au sommet. Le texte et les boutons vont descendre. Et puis ils vont commencer à se rétrécir à partir de là comme des écrans plus petits et plus petits que vous allez vers. C' est ainsi que le design réactif fonctionne en théorie, en pratique, je vais vous montrer d'autres options qu'Adobe XD a nativement qui peuvent nous aider à travailler avec la conception réactive. Je vous ai déjà montré ces groupes de défilement. Comment vraiment vous montrer les piles. Mais je n'ai pas parlé la fonction de redimensionnement responsive qu' Adobe XD a nativement soviétique vont parler de papa, comment papa peut nous aider à accélérer le processus. Et nous allons parler des composants parce que nous devons réduire la taille de nos composants. Et vous avez déjà vu acheter ces cartes de crédit parce que nous avons appliqué certains de ces changements à nos cartes de crédit et passer de ces grosses cartes aux petites voitures. Les textes doivent également changer. Les images doivent également changer. Donc nous allons parler de toutes ces choses. Comme je l'ai dit, je vais utiliser les tailles Bootstrap si vous utilisez quelque chose comme Angular ou autre chose. Et ce principe va fondamentalement être le même, va s'appliquer à vous aussi. Mais vous devez trouver vos propres tailles. Parce que comme je l'ai dit, j'utilise bootstrap, je vais utiliser des tailles bootstrap. Et vous, vous pouvez généralement trouver ces tailles sur les sites Web de ces créateurs. Ainsi, par exemple, vous pouvez aller sur le site Bootstrap et le trouver là. Sinon, vous pouvez trouver des concepteurs en ligne qui ont déjà créé la dose en utilisant les principes du code. Parce que dans la plupart des cas, ces plateformes et ces sites ne pensent qu'à décoder. Ils ne pensent pas au design. Par conséquent, les concepteurs doivent créer des ressources d'eux-mêmes. Et parce que la majorité d'entre eux sont open source comme Angular et Bootstrap bar, vous pouvez alors prendre des ressources de ces concepteurs et les utiliser dans vos propres conceptions. Et c'est ce que nous allons faire parce que j'ai utilisé ceux-ci partir de dribble et j'ai trouvé que ces tailles de grilles sur dribble, sont des fichiers d'esquisse, mais j'ai juste appliqué ces mêmes techniques et tailles à mon fichier Adobe XD. Donc je vais le montrer plus tard. Une autre chose que je veux mentionner est, avez-vous à passer de la taille mobile à la taille de bureau ou l'inverse. À mon avis, cela n'a vraiment pas d'importance parce que vous allez mettre à l'échelle ces composants année comme si vous travaillez avec des illustrations complexes que nous ne sommes pas à ce projet, mais vous pouvez juste imaginer que par exemple, dans les sections héros, vous avez ces illustrations complexes, puis vous allez utiliser moins de parties de votre illustration ou pas du tout à des tailles plus petites. Et puis dès que vous commencez à grandir, ces éléments apparaîtront de nulle part. Mais tu dois penser à comment ça va marcher. Si certains, par exemple, quelqu'un utilise une tablette dans une taille de paysage, puis retourner à la taille du portrait. Donc tu dois penser à toutes ces choses. Vous devez parler avec les développeurs évidemment pour voir quelles tailles ils vont prendre en charge parce qu'il n'y a aucun point de vue de la conception, par exemple, je ne connais pas une taille de smartwatch quand ils ne vont pas utiliser la taille de la smartwatch de dette, cela ajoute du temps au projet. Cela ajoute le coût au projet, au client et à vous parce que vous allez perdre votre temps sur la taille qu'ils ne vont pas supporter et qu'ils ne vont pas utiliser. Si vous pensez à la prise en charge du navigateur, ce n'est pas votre problème. C' est le travail du développeur parce qu'ils le font dans le code. Vous faites simplement la partie design dans Adobe XD. Une fois de plus, un WASD est tout au sujet du design. Vous avez une fonctionnalité d'exportation de code, mais c'est si basique, cela ne vaut même pas la peine d'en parler. Il y a quelque chose appelé anima sous le marché et vous pouvez l'utiliser pour exporter du code. Mais j'ai trouvé que ces grands développeurs en ligne ont dit que cet accord n'est vraiment pas si propre. Et ils utilisent juste quelques techniques pour copier et coller des lignes et des blocs de code. Donc, vraiment complètement codé à partir de zéro est la meilleure façon de passer d'Adobe XD au produit Life. Enfin, lorsqu'il s'agit de design réactif, nous devons également réfléchir à la typographie dans sa mise à l'échelle. On va en parler évidemment. Donc, dans mon cas ou essayé d'utiliser la même topographie et juste avec un peu plus d'espacement ou un peu plus de hauteur de ligne ou lumière du soleil que tout au long de mon design réactif. Mais quand je viens à la plus petite partie, j'aime vraiment l'abaisser, surtout si vous concevez pour un écran mobile qui sont vraiment extrêmement petits. Donc j'essaie de réduire la taille en descendant. Et j'aime toujours aller du bureau jusqu'au mobile. Donc, comme je l'ai dit dans la prochaine vidéo, nous allons commencer par un design réactif. Je vais parler de ces grilles, tailles de grille pour le bootstrap. Je vais vous montrer comment vous pouvez les appliquer et comment vous pouvez les créer aussi. Une autre chose que je voudrais mentionner est que je vais en créer une, une page responsive pour un site web et une pour le tableau de bord. Je ne vais pas perdre ton temps en passant par tout ça et en faisant tout ça pour ça. Vous pouvez le faire si vous le voulez, comme une pratique. Et pour appliquer les connaissances de cette page et d'une page de tableau de bord à toutes ces autres pages. Et surtout plus tard, vous êtes sur les pages personnelles si vous voulez concevoir dose. Donc c'est tout pour cette vidéo. Et je te verrai dans la prochaine. 55. Créer un système de grille de conception réactive: Dans cette section du cours, nous allons enfin commencer à travailler sur le design responsive. Et je vais vous expliquer ce qu'est le design réactif à travers cet exemple. Donc, je ne vais pas seulement parler intérieur, je vais juste vous montrer comment je le fais, comment vous pouvez faire avec les options Adobe XD qui sont là pour vous. Et quelques conseils que je peux vous donner de toutes ces années dans le travail avec le design responsive. Donc, comme je l'ai dit dans une vidéo précédente, nous allons utiliser le système de grille Bootstrap. Et comme je l'ai dit, j'ai trouvé ces en ligne sur Dribble en fait. Nous allons donc utiliser cinq tailles au total. Donc c'est notre taille moyenne. Donc, c'est pour un grand site Web. Regardez, c'est pour les grands ordinateurs de bureau et par exemple, pour les écrans. Voyons voir, à partir de 24 pouces. Et ils vont s'adapter de cette façon afin qu'ils puissent être vus sur de grands téléviseurs, par exemple, et ainsi de suite. Et c'est ce que le client a choisi de soutenir. Nous allons concevoir pour les petites tailles. Et pour gagner du temps, il parlerait parce qu'il nous faudra littéralement 100$ ou quelque chose comme ça pour couvrir chaque page et chaque détail. C' est pourquoi j'ai dit que je ne vais pas faire le filaire pour tous ces tableaux de bord pour gagner du temps. C' est pourquoi j'ai parlé de toutes ces pages supplémentaires, comme sur nous page et ainsi de suite et ainsi de suite. Je ne vais pas le concevoir parce que vous pouvez le faire vous-même si vous le voulez, si vous voulez pratiquer, si vous voulez apprendre de nouvelles choses, en utilisant les conseils et les techniques que vous allez apprendre du discours et les appliquer à ces pages. La dissidence s'applique à la conception réactive. Nous allons juste faire un design responsive pour cette page d'accueil et pour la page de tableau de bord. Parce que la navigation du tableau de bord va changer ainsi qu'avec cette navigation, je vais vous montrer comment vous pouvez adapter les composants, comment nous pouvons les rendre plus petits, et toutes ces choses. Donc, sans plus tarder, commençons. Et dans cette première vidéo de la série responsive design, je vais vous montrer comment nous pouvons créer des grilles et enrichir les tailles que nous allons utiliser. Donc, pour commencer, je vais cliquer ici où il est dit art board. Vous pouvez également appuyer sur un sur votre clavier. Et quand je fais ça, ça me donne toutes ces options ici. Donc, si vous vous souvenez des vidéos d'introduction, si vous les regardez, vous pouvez également le faire en cliquant sur l' écran d'accueil, puis en choisissant parmi les modèles prédéfinis. Mais si ce n'est pas le cas, vous pouvez cliquer ici et il va vous montrer tous ces modèles et plus encore. Je vais juste faire ça. Donc web 19-22. Je peux aussi copier et coller un de ceux-ci, mais je ne vais pas le faire. Je vais me positionner ici et passer en mode prototype. Cliquez ici et appelez ce flux mais responsive design. Ou encore mieux, une refonte de site web réactive. Parce que plus tard, nous allons faire la même chose et faire un design de tableau de bord réactif. Maintenant que j'ai créé papa, je peux simplement bouger. C' est juste un peu vers quelque part ici, par exemple, quand vous zoomez, ça semble bien. Et en termes d'organisation, nous pouvons, par exemple, tableau de bord de bureau de fruits juste en dessous. Ensuite, nous pouvons déplacer la conception de site Web juste ici au lieu du tableau de bord. Nous pouvons positionner ce tableau de bord sur la droite si nous n'avons pas assez d'espace. On peut le positionner en dessous. Donc c'est à vous de décider et ce que vous essayez de faire. Nous pouvons également positionner ces filaires et tableau de bord ici. Et puis concevez en dessous de cela, puis Responsive Design en dessous, cela va nous faire économiser un peu plus d'espace, sorte que vous n'avez pas à faire défiler tout le chemin vers le bas. Vos clients, vos coéquipiers et vos développeurs n'ont pas à faire défiler tout le chemin vers le bas pour voir tout cela. Dans notre cas, je vais juste le faire comme ça. Mais une fois de plus, vous pouvez le faire comme vous le souhaitez. Je vais donc zoomer de très près sur celui-ci. Et je vais l'appeler, par exemple, ou de grands ordinateurs de bureau. Plus de 1200 pixels. que je puisse montrer à mon développeur ce que j'essaie de réaliser avec celui-ci. Donc ce que je vais faire avec c'est tout d'abord que je vais réduire la taille. Donc, la hauteur va fondamentalement rester la même, mais la largeur va changer. Donc, ce sera 1440 pixels. Donc, si vous vous souvenez dans celui-ci est 1920, c'est 1440. Je peux le déplacer un peu comme ça. Et je vais évidemment adapter la grille pour qu'elle corresponde à cette taille. Donc nous allons toujours avoir 12 colonnes, mais la largeur de gouttière va battre tardy comme DAT. La largeur de la colonne va être de 65 et voir si nous pouvons l'appliquer. Pas de sécurité. Et nous allons utiliser 165 ici. Alors vérifions une fois de plus. Donc 12365165. Donc, évidemment, ce sera une marge. Ce sont donc des marges à gauche et à droite. Vous pouvez évidemment les augmenter. Donc, si vous, par exemple, vouliez rendre les colonnes plus larges, vous pouvez, si vous voulez élargir la largeur de la gouttière, vous pouvez le faire aussi. Je vais juste le laisser comme ça. Ce que je vais faire ensuite, c'est frapper le contrôle D pour dupliquer ce tableau. Et je vais les appeler, par exemple, dans les ordinateurs de bureau, ou appelons-le, je ne sais pas, agrandir les appareils. Ainsi, ce sont, par exemple, des ordinateurs portables, qui sont juste plus grands que les plus petits ordinateurs portables. Donc, ils vont jusqu'à 902 pixels. Et encore une fois, évidemment, si vous faites autre chose comme Angular ou quelque chose comme ça, vous allez avoir des paramètres différents de moi. Si vous faites Bootstrap, vous pouvez également utiliser d'autres paramètres. Donc, comme je l'ai dit, vous n'avez pas besoin d'utiliser ces colonnes. Vous pouvez utiliser huit colonnes pour n'importe quoi. Vous pouvez utiliser différentes largeurs de gouttière dans différentes largeurs de colonne et ainsi de suite. Donc, la meilleure chose que vous pouvez faire ici est de parler à vos développeurs de la façon dont ils aiment travailler, dans quelles tailles et comment pouvez-vous implémenter cela dans votre design responsive ? Évidemment, vous devez leur parler des tailles qu'ils vont soutenir. Ainsi, par exemple, s'ils n'ont pas besoin des chiffres de taille nécessaires dans cette taille. Donc 19-22, alors vous pouvez soutenir cela. Maintenant, pour celui-ci, passons à autre chose. Et 19, donc 1080 va rester, mais nous allons réduire cela, par exemple, à 10-24, par exemple. Comme la dette. Donc on va laisser ça à la dette. Donc les appareils de grande taille jusqu'à 992 pixels. C' est essentiellement la taille que vous allez prendre en charge et c'est la taille de votre grille. Donc, comme vous pouvez le voir ici, nous sommes à 1440, mais notre grille, donc blanc de notre grille est de 1200 pixels. Donc c'est 992. Donc, il va être une largeur de notre grille de 9021024 est la largeur totale de notre aéroport lui-même. Alors passons vers le bas. Nous allons apporter des changements ici aussi, solides à utiliser. Voyons 47 pour nos marges. Donc quelque chose comme ça. Et vous pouvez voir tout de suite que nous avons des marges plus petites ici et ensuite ici. Et cela commence évidemment à prendre des comprimés de forme. Donc la prochaine sera la tablette. Mais avant de passer à cela, vérifions vite. Nous allons donc avoir 12 colonnes. Évidemment, si vous voulez utiliser, vous pouvez avoir huit colonnes ou quatre colonnes, même six colonnes. Une fois de plus, parlez à vos développeurs de ce qu'ils aimeraient vous mettiez en œuvre et de la façon dont ils aimeraient que vous le créiez. Il est donc plus facile pour eux de développer ce site Web. Plus tard. Nous allons avoir une largeur de gouttière de 30, largeur de colonne de 50, et les marges sont liées à gauche et à droite ou 47 contrôle D pour dupliquer celui-ci. Et ça va être médian. Et les appareils. Ainsi, par exemple, les tablettes et jusqu' à 768 pixels de largeur. Donc une fois de plus, 76 huit est la largeur de notre grand, et nous allons l'appliquer pour nous adapter. Donc, une fois de plus, comme je l'ai dit, plusieurs fois vous pouvez utiliser le système de grille à huit colonnes, vous pouvez utiliser six, vous pouvez utiliser pour ce que vous voulez, mais je vais juste utiliser 12 pour un souci de cohérence. Donc on va abaisser ça. Donc, nous allons le garder à, disons 76 sièges. Comme la dette. Ensuite, nous allons avoir 12 colonnes, 30, nous allons en avoir 30 ici. Et nous allons avoir, voyons, 39 ici, comme ça. Et voyons, ça me donne 44 pour une raison quelconque. Voyons voir, l'Australie encore. Une fois de plus, Adobe XD joue à des jeux sur nous. Ça ne me laisse pas finir ça. 30. Voyons, 44. Donc en fait, ouais, laissons ça comme ça. Laissons-le à 44 ans. Donc, en gros, c'est tout. Allons sur le bureau un peu plus de choses. Donc je vais dupliquer ça. Je vais appeler ça des petits appareils. Voyons voir. Téléphones et moins de cinq, 76 en pixels. Laisse-moi vérifier ça comme ça. Et ce sera en fait, réduisons sa taille va être 375. Tellement petit. Nous n'aurons que quatre colonnes. On va avoir une largeur de gouttière de 30. Et voyons moi, on peut réduire ça à 20. Ça va être 61. Cette robuste et les colonnes sont pour, une fois de plus, parce que nous faisons cela, peut-être que nous pouvons en déduire et distale huit. Voyons voir, juste pour que nous puissions nous donner un peu plus d'espace. Et entre ceux-ci, c'est à quatre heures, et c'est fondamentalement tout. Nous avons créé notre design réactif et notre système de grille. Vous pouvez le voir. Je n'aime pas vraiment ces grandes marges sur le côté. Peut-être pourrions-nous les réduire plus tard. Mais pour l'instant, gardons les allongés là et voyons ce que nous avons avec notre design une fois que nous aurons commencé. Donc c'est fondamentalement tout pour cette première vidéo. Dans la vidéo suivante, nous allons copier cette page, désolé, cette page avec la conception vers le bas et nous allons commencer à l'adapter à notre système de grille. Alors je te verrai là-bas. 56. Conception réactive 1: Nous allons maintenant commencer enfin à travailler sur notre design responsive. Et pour commencer, vous pouvez vous attaquer à ce problème de deux façons. La première façon est de simplement sauter à l'intérieur de votre tableau d'art. Et parce que nous allons faire cet écran de conception de page d'accueil, vous pouvez simplement copier tout ce contenu et collé ici et simplement étendre ce rpart vers le bas que nous venons de créer pour cette première taille. L' autre façon de le faire, et j'ai vraiment préféré cette méthode, est parce que c'est garder les boutures vraiment agréable, propre, facile à voir, facile à comprendre, c'est simplement de tenir votre vieille clé. Dupliquer la position du conseil désarmé. C' est quelque part par ici. Donc, si vous vouliez être proche de votre aéroport avec votre système de réseau en place afin que vous puissiez le vérifier et voir par vous-même ce que vous devez faire évoluer, où vous devez le mettre à l'échelle, quatre et ainsi de suite. Donc c'est beaucoup plus facile de cette façon à mon avis. Mais encore une fois, vous pouvez le faire dans l'autre sens. Donc l'autre façon, comme je l'ai dit, est simplement de sauter ici. Vous pouvez sélectionner tous ces éléments, appuyez sur le contrôle C. Vous pouvez également les regrouper et ensuite étendu ce sont nés tout le chemin vers le bas, par exemple, comme ceci. Et puis il contrôlait V pour coller tout ce contenu. Mais comme je l'ai dit, j'aime faire les choses de cette façon. Donc, c'est vraiment à vous de décider de quelle manière vous voulez bouger. Donc, pour commencer, ce que je voulais faire est essentiellement d'adapter ma mise en page à ces tailles. Je voulais donc le réformer en 40 de largeur. Je veux qu'il soit illimité en hauteur. Donc fondamentalement quelle que soit la hauteur qu'il prend, parce que sur tous ces sites où ils sont sur Manuel, sur ordinateur et tablette, tout ce que vous faites défiler vers le bas. Donc, c'est vraiment l'esprit des DES, des éléments et de la restriction de largeur, qui change, que vous pouvez voir ici à travers ce sont des planches. Donc, fondamentalement, la hauteur peut être autant que vous avez besoin, tandis que la largeur est simplement limitée avec votre contenu. Donc, comme je l'ai dit, plusieurs fois, ce contenu peut simplement changer. Ainsi, par exemple, pour les plus petites tailles, vous n'avez peut-être pas besoin de tous ces éléments d'arrière-plan parce qu'ils, par exemple, peuvent ou ne pas être facilement lisibles sur une taille d'écran de téléphone mobile alors que sur le bureau il magnifiquement présenté, propre, facile à comprendre, facile à voir et à absorber. Donc, ce que vous pouvez faire est de supprimer certains de ces éléments lorsque vous descendez. Mais je vais essayer de garder autant de ces éléments que possible pour que je puisse garder mon expérience cohérente tout au long de la conception de mon site Web. Commençons donc avec notre design réactif. Et pour ce faire, je dois faire quelques choses d'abord. Donc, ce que je dois faire est que j'ai besoin de créer des groupes pour ces éléments séparés parce que je voulais être évolutif vers le bas. Donc, par exemple, pour ce groupe en haut, peut-être que je n'ai pas besoin de faire quoi que ce soit. La seule chose que je voulais faire, c'est de les regrouper comme ça. Donc on va aller de l'avant et on va frapper le contrôle G. et taper l'emplacement. Je vais partir pour les affaires comme c'est parce que c'est juste un texte à part entière. Pour celui-ci, je vais appuyer sur Control G et taper le téléphone. Et enfin pour celui-ci, je vais frapper les drapeaux de génotypage de contrôle. Et ce que cela va me permettre de faire, c'est quand je commence à mettre à l'échelle, éléments à l'intérieur des dossiers vont rester ensemble et il va évoluer les uns avec les autres. Alors que si vous les laissez en dehors de vos dossiers et commencez à développer cela et commencez à l'échelle. Donc, si je commence à le mettre à l'échelle comme ceci, vous pouvez voir que les choses bougent ensemble parce qu'elles sont à l'intérieur du dossier. Mais par exemple, si je dis Dégrouper mes drapeaux et mon téléphone. Alors faisons-le en groupe. Et puis quand je commence un redimensionnement cela, vous pouvez voir qu'il ressemble presque le même. Mais dès que les choses arrivent aussi loin, vous pouvez voir que le téléphone et l'icône du téléphone se chevauchent les uns avec les autres. Et plus vous réduisez de plus en plus la taille de ceci, vous pouvez voir plus le problème devient grand. Alors annulons toutes ces choses. Allons ici. Donc on avait le téléphone et les drapeaux. Fondamentalement, nous devons le faire, penser. Nous devons le faire pour tous ces groupes et couches. Donc, nous avons ici le texte, ce qui est très bien. Nous le positionnons également dans une pile qui est également bien et idéal pour le positionnement plus tard, je vais vous montrer que plus tard, Hero Elements devrait toujours être à l'intérieur d'un dossier de données. Des couples heureux. Donc c'est juste notre image. Nous allons positionner la forme de héros, fondamentalement juste une forme. Ce masque est à l'intérieur d'un groupe. Donc, fondamentalement, un masque est un groupe de ces deux éléments et juste se cacher les uns les autres. Donc nous allons le laisser tel quel et nous allons mettre à l'échelle ce masque au besoin. Et enfin, le héros Bg dt peut rester comme ça. Maintenant, pour les services, nous pouvons laisser cela comme ça parce que vous pouvez voir que nous avons ces cartes de contenu et que nous pouvons les renommer. Et évidemment, j'ai oublié de le faire. Donc, au lieu d'une carte continent, vous devriez écrire quelque chose comme des comptes personnalisés, Dan épargne personnalisée Dan cartes de débit personnalisées. Donc vous pouvez le faire pour toutes ces choses. Maintenant, ce que nous pouvons faire avec celui-ci, c'est que nous pouvons créer une pile. Et si je l'ouvre, vous pouvez voir qu'il est positionné à ce milieu dans une pile. Je ne sais pas pourquoi les piles font ça. Donc, au lieu d'utiliser simplement ce texte à l'extérieur ou autre, il suffit de positionner ces choses dans un groupe. Donc, je vais cliquer avec le bouton droit sur dissocié à, et je vais effectivement revenir en arrière en ne sélectionnant pas ma pile. Je peux aussi le faire. Maintenant. Je peux dégrouper ça. Et maintenant, si je positionne ce texte en dehors de mon dossier, cliquez ici, positionnez-le dans une pile et ouvrez-le. Vous pouvez voir qu'ils sont tous dehors. Donc, si je choisis de positionner ma pile comme ça, vous pouvez voir qu'elle positionne automatiquement toutes ces cartes les unes sur les autres. Donc, je vais vraiment faire ça. Je vais supprimer mon texte, le placer à l'extérieur ou dans le dossier parce que c'est beaucoup plus facile cette façon que d'adapter toutes ces modifications. Passons maintenant au taux de change. Je vais donc positionner ce texte dans un groupe. Donc comme ça parce que c'est juste le seul texte dont nous avons besoin. Et ce que je vais faire, c'est que je ne vais pas me positionner dans une pile. Et ce que je vais faire en fait, c'est sélectionner tous ces éléments. Citation, Par exemple, des devises comme ceci. Et puis utilisez simplement cette option, qui est le défilement horizontal. Et vous pouvez montrer avec ces contours où vous vouliez faire défiler horizontalement pour commencer et terminer. Donc je vais l'adapter à ici et à deux ici pour l'instant. Et évidemment, une fois que nous commençons à réduire l'échelle, vous pouvez ensuite passer à tous ces paramètres. Je vais donc copier mon texte collé ici. Donc, il dit les devises et non pas le défilement vertical ou horizontal, nom du service. Comme vous pouvez le voir, il est déjà à l'intérieur de la pile. Nous avons l'image, nous avions le texte, ce qui est très bien. Nous allons le laisser comme ça. Maintenant, pour ces cartes, je peux les placer dans un groupe et les appeler cartes. Et puis je peux mettre ça grandit dans une pile. Vous pouvez voir qu'ils sont toujours comme ça. Et encore une fois, il va être beaucoup plus facile pour nous de simplement cliquer sur un bouton. Il va les positionner là où c'est nécessaire. Donc on va le laisser comme ça pour l'instant. Nos dernières nouvelles, je vais faire la même chose. Donc, je vais supprimer mon texte à l'extérieur, les positionner dans une pile. Si je clique ici, vous pouvez voir ce que je veux dire. Donc, il les positionne vers le bas. Enfin, info strip et on va faire la même chose. Donc, je vais déjà fait donc nous avons l'emplacement, téléphone et e-mail, et nous avons l'infrastructure, BG. Donc nous allons laisser ça comme ça parce que c'est beaucoup plus facile à ajuster. Ces éléments envoient bon look vers le haut. Maintenant, nous avons seulement fondamentalement si vous regardez pour différents éléments. Donc nous avons le logo, nous avons le nom de la rue, nous avons le numéro de téléphone, et nous avons l'e-mail. Donc, je vais réellement supprimer cette information plus tard et juste laisser les icônes en place. Maintenant, quand il s'agit de pied de page, si j'ai ouvert le Photoshop, vous pouvez voir que nous avons déjà toutes ces informations à l'intérieur. Donc ce que je peux faire c'est que je peux, tout ce que je peux juste utiliser la pile si je veux, mais je ne vais pas le faire, je vais le laisser comme ça parce que ce sera beaucoup plus facile pour moi de repositionner tous ces derniers plus tard. Donc je vais vous montrer ça aussi. Et c'est fondamentalement tout pour les paramètres. Commençons maintenant avec notre design réactif. Donc, une fois de plus, nous devons réduire la taille de ce sont ou ne valent pas. Parce que vous pouvez voir que c'est à 1920 maintenant, nous devons le réduire à 1440. Et nous allons cliquer ici et renommer cette page d'accueil réponses comme ceci. Et encore une fois, pour vous ramener, je vais juste faire un design responsive de cette page parce qu'une fois de plus, va me prendre des heures, sinon des jours, pour parler et créer ce design responsive pour vos gars, c'est va vous prendre comme un jour, par exemple, pour toutes ces pages. Et peut-être une demi-journée pour toutes ces pages si vous voulez être complètement précis et ainsi de suite. Si vous voulez couper un peu de mou dans quelques coins juste pour créer un design réactif. Vous pouvez faire toutes ces pages en 67 heures, donc un jour ouvrable, par exemple. Assurez-vous donc de facturer vos clients. De plus, si vous créez un design réactif pour eux, assurez-vous que cela prend du temps, qu'il faut de la planification, qu'il faut réfléchir. Ainsi, vous pouvez toujours appliquer ces principes. Ainsi, par exemple, les groupes de défilement, ces piles au fur et à mesure que vous concevez. Alors pratiquez ce cours, voyez ce qui fonctionne le mieux pour vous, puis appliquez ces techniques plus tard lorsque vous commencez à travailler avec de vrais clients. Ou si vous changez de techniques avec vos clients existants. Alors revenons à elle. Si je clique ici encore une fois, donc 1440, je vais cliquer ici, 1440. Et dès que j'appuie sur Entrée, vous pouvez voir que ça coupe tout notre quantum, mais c'est bien, c'est censé arriver. Maintenant, la prochaine chose est de copier tous ces éléments. Vous pouvez donc cliquer avec le bouton droit ici. Et vous pouvez voir que vous avez toutes ces options. Vous avez une copie, vous avez arrangé, vous avez aligné sur la grille de pixels, vous avez des guides et ainsi de suite. Mais vous n'avez pas la possibilité de copier la mise en page en désaccord vers ici. Vous pouvez en faire la valeur par défaut ici, mais vous pouvez utiliser la valeur par défaut, qui Y a-t-il une valeur par défaut, mais vous ne pouvez pas l'appliquer comme un modèle séparé, qui est en fait la mise à jour que je voudrais vraiment voir de l'équipe Adobe XD est, par exemple, disons que c'est le bureau, c'est le bureau plus petit, c'est encore plus petit. Voici ses tablettes et ses téléphones. Permettez-moi de créer des mises en page de grille supplémentaires pour tous. Donc, si je clique ici, vous pouvez voir que j'ai ma disposition de grille en place car j'ai déjà entré manuellement toutes ces valeurs. Laissez-moi donc créer ces valeurs en tant que modèle. Et puis, lorsque je copierai et collez ceci ici, je peux simplement utiliser un bouton pour appliquer ce modèle à mon illustration existante. J' espère que cela a du sens, mais malheureusement, nous n'avons pas cette option pour l'instant. Nous devons donc utiliser ces options pour cela. Donc, encore une fois, nous l'avons juste ici. Je vais utiliser toutes ces options ci-dessous. Donc, nous allons utiliser les 12 colonnes. Nous allons utiliser 30 ici, où nous allons utiliser 65 et 165, Miller, comme ça. Donc ça va nous donner d'autres problèmes. Encore une fois, 3065165. Donc, Dairy, comment maintenant nous avons cette mise en page exacte pour notre grille, reflété sur cette page juste ici. Donc, nous pouvons maintenant aller de l'avant et commencer. Nous sommes un design réactif. Donc, tout d'abord, je peux aller de l'avant et sauter vers le haut et ajuster tous ces éléments afin que vous puissiez voir où se trouve notre grille maintenant. Savons, nous avons toujours une grille de 12 colonnes. Alors allons juste y aller et ajuster tous ces éléments. Alors je vais sauter ici. Pour notre emplacement, je vais simplement le déplacer ici, aligner sur ma grille ou le positionner ici. Je vais en apprendre plus et cliquer sur mon téléphone. Cliquez sur mes fleurs, et juste besoin de voir où suis-je téléphone peut obtenir position de mannequin et ici je pense que ça va marcher très bien. Vous pouvez également vous positionner pour les affaires, par exemple, juste ici dehors, mais j'aime le laisser là pour l'instant. Et c'est fondamentalement tout. C' est ce que nous allons faire avec tous ces éléments différents. Maintenant, avec la navigation va être un peu différent parce que nous avons déjà notre navigation sélectionné. Donc, vous avez essentiellement deux options. Une option est d'utiliser celui que vous avez déjà comme simplement aller avant et adapté à tous ces statuts. Arrête. Voyons voir. Nous avons de grands ordinateurs de bureau donc celui-là. Donc, ce que je devrais faire est à l'intérieur de mon NAV principal pour celui-ci. Parce que comme vous pouvez le voir, c'est le diamant creusé, pas rempli de diamant, qui indique que ce n'est pas le composant principal, mais le composant enfant du composant principal lui-même. qui signifie que nous pouvons faire n'importe quel type de changements que nous voulons et il n'affectera pas notre composant moyen est juste affecter ce composant de gel et composant enfant de il ya donc j'espère que cela a du sens. Mais parce que je fais juste cette page pour gagner un peu de temps. Je vais juste ajuster cela pour l'état par défaut lui-même. Fondamentalement, si vous voulez le faire pour toutes les pages et à l'intérieur des projets, vous devez évidemment, alors vous pouvez sauter dans. Après avoir ajusté celui-ci, vous pouvez sauter en compte, ajusté celui-ci, vous pouvez sauter dans les prêts et ainsi de suite et ainsi de suite. Vous comprenez le point. Tu dois faire ça tout le temps. Donc, je vais sauter à l'intérieur et regrouper tous ces ensemble comme ceci et les appeler, par exemple, des éléments de menu ou de navigation comme ça. Juste pour que ce soit un peu plus facile pour moi de travailler avec. Et puis je vais cliquer ici et ajuster la largeur deux ici. Et comme vous pouvez le voir, nous avons déjà quelques problèmes. Nous devons donc ajuster ces questions au fur et à mesure que nous avançons. Donc, en gros, si je double-clique maintenant, vous pouvez voir que nous sommes à Poppins 18. Donc, ce que je vais faire d'abord est fondamentalement ajuster mon bouton parce que j'aurai besoin qu'il soit à cette taille. Donc je vais cliquer sur quelque chose comme ça. Je vais aller au vol stationnaire et faire la même chose. Aller à l'état par défaut est simplement déplacer. Et voyons, Maria peut se positionner pour avoir 20 ans. Je peux faire la même chose pour mon logo. Donc 20, juste pour me donner un peu plus d'espace. Maintenant, avec celui-ci, si vous utilisez une grille de répétition, vous pouvez ajuster automatiquement l'espacement entre eux. Mais parce que nous ne le sommes pas et que ceux-ci sont créés en tant qu'éléments séparés, nous devons ajuster notre espace manuellement. Donc, ce que je peux faire est de cliquer ici. Et voyons, positionnez ce 1234 peut-être. Et puis allez-y, sélectionnez tous ces éléments. Et voyons, déplace-les à 40 ans aussi. Donc 1234, vous pouvez désélectionner celui-ci, puis passer et créer un espacement de 44, tous ces éléments. Et comme vous pouvez le voir, ça commence maintenant à me donner cet espacement. Donc l'habitude laitière, si je cache mes grilles une seconde. Juste pour que vous puissiez le voir mieux, vous pouvez voir ce qu'on a fait. Donc, vous pouvez voir où ça va. Vous devez sauter dans, ajuster toutes ces tailles, sont juste tous ces espaces pour toutes vos pages. Et c'est pourquoi c'est vraiment important. Alors allons de l'avant et passons à autre chose. A vraiment n'aime pas cet espacement, mais laissons-le là pour l'instant. Donc, je vais cliquer ici pour le ramener à ma grille. Donc ce que je vais faire, c'est que je vais vraiment sauter, déplacer mon image et je peux la réduire, par exemple, juste un peu, juste pour voir où cela me jalonne. Je peux alors positionner mon texte ici. Je peux sauter à l'intérieur et déplacer mon bouton à cette taille. Donc, je peux ajuster évidemment. Ensuite, vous pouvez copier et coller ce bouton si vous le souhaitez, pour tous vos autres boutons. Donc, par exemple, pour celui-ci et ces deux, juste pour qu'il ressemble le même dans votre conception. Ce que je peux faire ensuite, c'est que si on voit ici, on est à 90 ans. Donc, ce que nous pouvons faire, c'est que nous pouvons autour de nos textes. Donc, pour une nouvelle page, je peux cliquer à l'extérieur. Vous pouvez voir à quoi ça ressemble. Si vous en êtes satisfait, vous pouvez le positionner. Je peux également écrire ce texte ci-dessous. Et vous pouvez voir parce qu'ils sont dans une pile, tout s'ajuste bien. Donc nous sommes 50 ici, 50 ici. Je peux simplement maintenir mon clic et il va s'ajuster pour entendre. Ou si vous maintenez votre touche Maj, il va ajuster les deux. Et c'est l'avantage d'utiliser des piles, car cela vous permettra de vous adapter facilement à tous ces changements. Déplaçons maintenant cela juste un peu vers le haut, par exemple ici. Je peux alors repositionner pourrait image, par exemple ici. Et vous pouvez couper des portions de votre image, quelque chose comme ça si vous pensez que c'est approprié. Mais parce que je ne le fais pas, je vais simplement ajuster ma taille de mon image. Quelque chose comme ça, par exemple, peut être un peu plus haut. Quelque part par ici. Je pense que c'est bon. Et je pense que ça marche un peu mieux que ça. Vous pouvez aussi faire un rap comme celui-ci afin que vous puissiez laisser le mot d'âge vers le bas, mais il n'est généralement pas recommandé de laisser un seul mot vers le bas. Mais dans ce cas, je vais le laisser parce qu'il correspond vraiment à notre image et il correspond vraiment à notre mise en page. Donc, l'étape suivante, les formes RdS. Allons donc de l'avant et ajustons toutes ces formes manuellement. Position du sol, celui-là. Laisse celui-là être là. Et alors que sont alignés ici, il est manuellement simplement positionné et peut-être même ici. Et vous pouvez également jouer et ajuster pour la rotation, disons comme ça. Donc, la prochaine chose est que notre mosquée a cherché à ajuster simplement la largeur de mon masque comme ça pour qu'il corresponde à la racine de ma planche. Et je vais ensuite sauter à l'intérieur d'une lune MyCircle à quelque part ici, par exemple. Enfin, il nous reste avec la forme de héros, et nous allons positionner notre forme de héros quelque part par ici. Ce que vous pouvez faire est également de le réduire. Alors maintenez votre touche Maj et vous pouvez l'ajuster pour oser. Et à partir de là, vous pouvez simplement étendre cela. Comme ça. Et je peux sauter à l'intérieur et bouger mes formes. Donc, fondamentalement troupeau laitier, ce qui nous reste est le héros BG. Je vais simplement plus avec juste ici. Ou vous pouvez utiliser 1444, la largeur. Et fondamentalement, plus vous avez d'éléments dans votre région, comme vous pouvez le voir, nous avons oublié de déplacer le Vg. Donc je peux faire un doute. 1440, appuyez sur Entrée, Entrée, va couper à la largeur totale de notre page. Fondamentalement, plus vous avez d'éléments dans votre page, cela va vous prendre plus de temps. Donc, par exemple, laissons ça comme ça. Et je vais juste revenir à mise en page précédente parce que je n'aime pas vraiment comment ça ressemble. Pour un nouvel âge. J' aime ça juste un peu mieux. Abbas ne trouve toujours pas ça trop heureux. Donc parce que nous mettons ce texte en dehors de notre groupe qui peut simplement cliquer ici et le positionner. Et comme vous pouvez le voir, il garde toujours 100 pour l'espacement. Maintenant vient le temps d'ajuster tous ces éléments. Et la chose difficile à propos de ceux-ci, c'est parce que si vous vous souvenez pour chacun d'eux, nous avons le vol stationnaire. Nous devons donc ajuster ces deux États séparément, ce qui nous amène évidemment un peu plus à la fois. Donc je vais le positionner sur notre grille comme ça. Je vais sauter ici et ajusté. Une fois de plus, nous avons trois éléments. Donc, vous allez prendre quatre colonnes pour chaque élément. Parce que nous avons 12 colonnes en place, je vais essayer de garder la hauteur en place. Donc, fondamentalement, la hauteur devrait rester la même. Si ce n'est pas le cas, nous pouvons également changer la hauteur. Donc, une fois de plus, il suffit de cliquer ici, ajusté à la forme. Vous pouvez le voir ajusté vraiment bien. Et je peux sauter dans mon état d'horreur et m'ajuster à quatre. Ce que je vais faire à l'intérieur de l'état d'horreur est simplement cliquer sur ces formes. Je peux les réorganiser. Et c'est la magie de l'avenir du design réactif pour vous. Si je clique ici sur l'état par défaut, vous pouvez voir à quoi cela ressemble. Donc, fondamentalement, comment fonctionne le design réactif est que vous pouvez le prendre pour votre tableau d'art. Donc, quand il est là, vous pouvez faire un ticket pour notre tableau et ensuite tout votre rapport va évoluer de manière responsable. Mais vous devez alors sauter à l'intérieur en entrant par vous-même ce que XD pense que c'est le meilleur pour votre design. Vous savez évidemment ce qui est le mieux pour votre design parce que c'est vous qui l'avez fait. Donc, fondamentalement, je vous recommande cette méthode, qui est ce que nous faisons ici, saute à l'intérieur d'une édition de tous ces éléments séparément. Pour cliquer ici, vous pouvez voir que nous avons réactif design activé ici. Alors maintenant que nous évoluons dans ce groupe et que nous l'organisons, vous pouvez voir qu'il se déplace de façon responsable. Mais parce que nous sommes toujours dans une pile, vous pouvez les déplacer de manière responsable sur toutes ces différentes pages. Donc, qu'est-ce que nous devons faire ici est de déplacer notre flèche parce que vous pouvez voir, parce qu'il n'était pas dans un dossier, vous pouvez voir en savoir plus et les flèches sont séparées. Et laissez-moi vous le montrer aussi. Alors, OK, revenons tout le chemin du retour. Notre position d'origine. Donc sur Plus comme ça, maintenant je peux sauter à l'intérieur et regrouper cette qualité, En savoir plus. Contrôle C. Je sauterai l'état mahara assigné. Regroupez-les pour en savoir plus. Et maintenant, quand je commence un redimensionner de manière responsable ces, vous pouvez voir que apprendre plus et l'état de flèche où ils devraient être afin qu'ils ne bougent pas du tout. Donc c'est ce que nous allons faire pour tous juste pour nous épargner un peu de temps. Et c'est pourquoi les groupes sont vraiment importants. Donc, partout où vous pouvez mettre des objets dans un groupe, car ils viendront vous mordre plus tard. C' est comme ils le font en ce moment. Je les mets généralement tous en groupes. Mais pour le discours, j'ai décidé de ne pas aller. C' était vraiment difficile pour moi de m'y adapter parce que, comme je l'ai dit, je le fais habituellement juste pour vous montrer à quel point c'est important quand vous arrivez à cette étape, qui est une étape de design réactif. Maintenant, comme je l'ai dit, ce que je vais faire est de les adapter à cette colonne d'automne large. Donc comme ça, je vais déplacer ça ici. Ainsi, vous pouvez zoomer sur tous les vêtements et voir l'espacement qui est de 30, simplement ajusté. Donc 1234. Donc jusqu'ici, on va aller au vol stationnaire. Donc 1234, une fois de plus, sautez à l'intérieur et changez tous ces éléments là où vous pensez que c'est nécessaire. Ainsi, vous pouvez même positionner Ceci ici, par exemple, et faire pivoter les bureaux comme ça. Comme ça. Voyons voir, état sans faute. C' est très bien. Et enfin, je vais ajuster ça à la Turquie aussi, comme ça. Et si je te montre, on a 30 ans ici, on est 30 ici. Il suffit de pointer votre souris dessus et il le montrera. Et puis, enfin, pour celui-ci, il suffit de le clipser ici. Va à Horace, état, clipse-le juste ici. Et puis nous allons de l'avant et ajustons tous ces éléments. Donc je vais positionner celui-ci juste ici, peut-être tourné un peu, et déplacer celui-ci juste ici. Ce qu'il nous reste, c'est ce cercle, comme vous pouvez le voir. C' est juste une ellipse parce qu'elle n'était pas dans un groupe. Donc, ce que vous pouvez faire est simplement de faire une copie à partir d'ici. Positionnez-le, par exemple, quelque part ici. Et je peux appuyer sur le contrôle C pour le copier. Et puis sautez ici à celui-ci, à l'état d'horreur situé là où il est. Donc, les éléments et un contrôle de masque V. Je vais le placer quelque part ici par exemple. Donc, vous pouvez même être précis. Vous pouvez, par exemple, positionner 20 à partir de la gauche. Donc, ça va être beaucoup plus facile que de se positionner dans tout ça. Donc 20, je vais enlever le cercle d'origine. Je vais frapper le contrôle C et retourner à celui-ci, à la coque comme ça. Et pour une raison quelconque, on n'a pas changé ce vol stationnaire. Alors faisons-le à 1234. Et parce que vous pouvez voir que nous sommes sur. Design réactif pour cet élément, pour ces éléments ainsi que pour les piles, vous pouvez voir que tous ces éléments s'ajustent bien. Alors réparons d'abord ça. J' ai fait plus à l'extérieur, devrait vouloir. Je vais supprimer ce cercle et les habitudes laitières quand je vais faire est également ajuster ces éléments. Donc juste ici, juste là. Et c'est fondamentalement tout. Je peux déjà vous voir poser des questions à ce sujet, mais nous allons y arriver. Mais d'abord, comme vous pouvez le voir, notre texte est un peu coupé. Comme vous pouvez le voir, nous avons beaucoup trop d'options ici. Donc, ce que nous pouvons faire est simplement d'abaisser la taille du texte à ce stade. Donc ce que je peux faire VR, c'est 24. Ce que tu peux faire, c'est retourner à 18 ans. Mais revenons rapidement aux états d'origine pour tout cela. Alors sélectionnons-les d'ici. Donc état par défaut, état sans faute, état par défaut. Et nous allons maintenant travailler sur notre texte parce que, comme je l'ai dit, texte est l'un des principaux éléments importants. Rich que vous allez inclure dans votre design. Donc, comme vous pouvez le voir, nous sommes à 40 ans juste ici. Ce qu'on peut faire pour commencer avec celui-ci, c'est sortir à 20 ans. Donc, je peux les sélectionner tous. Maintenant, parce que ce n'est pas un groupe, c'est beaucoup plus facile. Donc, décalez 12, vous pouvez ensuite sauter à votre date de récolte, sélectionnez-les tous comme ceci. Maj 12, puis je peux aller de l'avant et faire ça pour tous. Alors faites-le moi savoir. Cliquez ici. Alors je lui ai dit que je voulais retourner dans mon état d'horreur. Donc je me donne juste un peu plus d'espace de gauche à droite. Je perds 12. Et vous pouvez voir que le texte s'adapte maintenant. Et dans les étapes ultérieures, nous allons envelopper le texte autour. Mais parce que nous pouvons toujours l'utiliser comme si c'était juste ici. Et puis nous allons travailler avec ça de cette façon. Et vous pouvez voir que tout fonctionne comme il se doit et tout semble bien. Alors faisons ça pour l'état d'Horace. Et encore une fois, nous allons supprimer l'état d'horreur une fois que nous arriverons à ce point, parce que sur la tablette et sur un téléphone, vous n'avez pas vraiment besoin de propriétés supérieures, mais quand vous êtes sur des appareils de bureau, alors imaginez c'est juste un bureau plus petit. C' est le plus grand bureau. C' est plus petit et c'est, par exemple, un petit ordinateur portable. Tu as encore une souris. Vous avez une vraie souris ou un pointeur de souris ou attirez le lit ou autre chose, mais vous avez toujours une souris, par conséquent, vous avez toujours besoin de l'état de survol pour tous ces éléments. Plus tard, nous passons à ceux-ci. Vous aurez vraiment besoin de l'état de vol stationnaire et les éléments peuvent fondamentalement se déplacer et s'ajuster à ces différentes positions, que je vais vous montrer plus tard. Encore une fois, nous sommes à 100. On n'a rien changé en gros. Maintenant, nous pouvons nous attaquer à ces textes. Donc, encore une fois, nous sommes à 18 ans. Si nous vérifions que nous sommes à 20, mais 60 de ce côté, qui signifie que nous avons beaucoup d'espace pour jouer. Donc, ce que je peux faire est de cliquer sur 16 et vous pouvez voir pour choisir parmi un large éventail d'options de compte. Donc, fondamentalement, ce que nous pouvons faire est de le couper. Par exemple, ici. On est à 11 ans, donc on peut les ajuster à 20 ans, comme ça. Et ce que je vais faire, c'est de voir de quelle couleur est celle-ci, c'est celle-ci. Donc, je vais sauter ici, choisissez cette couleur Control C pour mon texte. Mais avant de le faire, je peux en fait étendre cela comme je l'ai dit, 2020. Donc comme ça. Et puis je peux le couper comme ça. Voyons voir. Oui. C'était juste laisser comme ça. Donc il contrôlerait semblerait. Je peux retourner à mon état d'horreur, sauter à l'intérieur, cliquer sur Contrôle V et troupeau laitier. Ou vous pouvez plus facilement passer à l'état par défaut car la couleur du texte est la même. Je peux double-cliquer ici, Contrôle C. Et je peux retourner à mon état d'horreur. Cliquez ici, supprimer le contrôle V va coller au même endroit, mais simplement plus avec ici. Donc on est à 40 ans. Et si nous voulons déplacer cela, nous avons donc l'espacement de 20. Et vérifions ça encore une fois. Oui, on a toujours l'espacement de 20. Donc, si je clique sur l'aperçu de celui-ci et que je fais défiler ici, vous pouvez voir que nous avons encore celui-ci. Nous avons toujours notre effet de vol stationnaire sur nos boutons. Nous avons toujours ce flou d'arrière-plan lorsque nous faisons défiler vers le bas, donc tout fonctionne bien. Et enfin, ici, vous pouvez toujours voir que ceux-ci fonctionnent et ils fonctionnent bien. Nous avons juste besoin de nous ajuster comme nous l'avons fait avec ce texte. Nous devons nous adapter à tous ces autres textes. Laisse-moi le faire rapidement. Encore une fois, on est à 16 ans. Nous sommes de la même couleur. Nous sommes 20 de ce côté-ci, 20 de ce côté-ci. Alors faisons vite ça. Je vais sauter ici. Et je vais d'abord les choses ajustées à 16, utiliser cette même position de couleur et juste ici, donc décalage 12, et puis je peux positionner ce bord gauche. Donc, en gros, j'en ai 20 ici, 20 ici. Et je peux sauter à l'intérieur et ajuster un peu ce texte. Alors voyons. Je peux cliquer à l'extérieur, puis cliquer ici. Je peux positionner ça à 20. Donc ce que nous pouvons voir, 12345 lignes de texte, 12345 lignes de texte. Essayez donc de garder cette cohérence si vous ne pouvez pas entendre aussi. Donc, contrôler C sur cet état pour ce texte, sauter à l'intérieur de la date Horace, cliquez sur Supprimer, contrôler V pour le coller dans les films juste en dessous. Et déplacez ça pour battre 20, comme ça. Ensuite, fermez ceci, revenez à l'état par défaut. C'est très bien. Et enfin, passons à celui-ci. Donc, une fois de plus, les premières choses changent d'abord à 16, cette couleur. Retournez au panneau Calques, qui 22 ici, donc 12, puis étendez ce bord gauche jusqu'ici comme ceci. Enfin, ajustons notre texte sur nos désirs. Vous avez choisi des empreintes et plus encore. Donc c'est 12345, ce qui est très bien. Cliquez ici, puis étendez cela à 20. Copiez ce texte et allez à la date de récolte. Ensuite, retirez l'original, en collant le nouveau, déplacez-le juste en dessous. Et Terry comment il revient simplement à votre état par défaut. Et si nous frappons l'aperçu maintenant et sautons ici, vous pouvez voir que l'aperçu fonctionne très bien avec tous ces éléments. Ce que je remarque, c'est que ce cercle est en expansion, donc ce cercle vers le bas, vous pouvez le vérifier. Si je survole et puis que je passe en arrière, vous pouvez voir qu'il va du cercle d'origine vers ce cercle. Donc, ce que nous pouvons faire est de fermer ce saut à l'intérieur de notre design, une fois de plus, a sauté à tout ça. Donc les premières choses que je vais faire en fait parce qu'on l'a ajusté pour planer. Donc je vais retourner planer comme ça pour tous. Donc ce que je vais faire ici est de sauter à l'intérieur de ce premier, éléments masque, cercle contrôle C. Puis revenir aux éléments d'état d'origine, contrôle du cercle de mosquée v. Donc je peux le coller ici, supprimé l'ancien comme ça. Et je peux voir dans la dette, mes éléments ici sont abaissés, l'obésité à 0. Donc, cet élément va être 0 aussi. Maintenant que nous avons fait ça, nous pouvons le faire pour tous. Voyons donc les éléments de carte quantique, cercle de Mohr Control C, les vêtements, tous retournent aux éléments d'état par défaut, le contrôle de la mosquée V, et suppriment ce vieux Seroquel comme ça. Alors maintenant, les animations vont fonctionner magnifiquement pendant que vous vous déplacez le long. Vérifions rapidement et voyons si ces éléments sont à 0, ils le sont. Donc, nous ne les verrons pas bien avant de passer à l'augmentation de la dette de l'État est. Donc, une fois de plus, les éléments soi-disant contrôle voir, revenir aux éléments d'état par défaut, contrôle de la mosquée V, et nous l'avons. Maintenant que nous avons couvert tous ces éléments, revenons à l'état par défaut que nous sommes. Et nous allons prévisualiser et voir ce que nous avons jusqu'à présent. Donc juste prêter attention à ce cercle en bas, vous pouvez voir combien plus agréable cette animation sorti maintenant. Vous pouvez jouer avec la position car elle est dans la même position pour cet état d'horreur et l'état par défaut. Donc, vous pouvez jouer et voir ce que vous voulez avec elle. Voir ici, j'ai en fait oublié de changer de position pour en savoir plus. Vous pouvez voir comment il se déplace vers le haut quand je survole. Revenons à celui-ci dans notre état du port. Et changeons le texte ici à 20. Et c'est vraiment la partie ennuyeuse de ce design responsive est de faire tous ces changements et s'assurer qu'ils fonctionnent sur toutes ces animations comme ils le font ici. Donc tout fonctionne bien. Passons à la section suivante. Donc une fois de plus, parce que nous n'avons pas néerlandais dans la section, hauteur. C' est toujours le même que ça. Vous pouvez voir simplement qu'il contient toujours le même espacement entre tous ces différents éléments. Ce que je vais faire ici est très simple. Donc, je vais choisir le bateau de ceux-ci. Je vais les positionner sur la grille. Ensuite, je vais sauter à l'intérieur de ma position texte mes textes ou juste ici. Et puis je vais ajuster ce groupe de défilement. Donc je vais l'ajuster ici comme ça. Et puis fondamentalement quand on prévisualise, j'utilise ma souris pour faire défiler vers la gauche et la droite. Et vous pouvez voir à quoi ça ressemble. Donc fondamentalement, c'est tout. C' est vraiment mort simple. Et vous pouvez, par exemple, montrer juste un peu. Laisse-moi te montrer ça. Vous pouvez montrer juste un peu. Donc, par exemple, quelque chose comme ça. Et puis cliquez sur l'aperçu juste pour montrer aux gens que, ok, il y a quelque chose ici que je peux peut-être cliquer et faire défiler et cela gardera toujours cette cohérence entre tous ces éléments. Nous avons juste ces problèmes, par exemple, ce numéro neuf. Mais vous pouvez également étendre la dette, par exemple, pour couvrir l'ensemble, par exemple deux ici, donc jusqu'au bord du conseil. Donc, évidemment, vous devrez explorer avec toutes ces choses, mais maintenant cela nous positionne pour entendre. Donc, nous devons nous ajuster pour plus. L' autre option consiste à ajouter un texte, par exemple, faire défiler vers la gauche et la droite, ou ajouter des flèches ou autre. Mais vous pouvez voir cela avec les développeurs ce qu'ils aiment faire. Par exemple, je peux ajouter la flèche gauche ici, je peux ajouter la flèche droite ici. Et au lieu de les faire défiler à gauche et à droite, ils peuvent cliquer sur ces flèches à gauche et à droite et obtenir fondamentalement ce même résultat. Passons maintenant à la section suivante et vous pouvez voir à quelle vitesse vous pouvez travailler avec ceux-ci. Donc, fondamentalement, ce que je peux faire ici est simplement ajuster mon image. Alors voyons deux formulaires. Peut-être 52345 et vous pouvez le voir s'ajuster vraiment bien. Je peux ajuster ce texte encore plus. Ou exemple deux ici pour que je puisse l'aligner sur ma grille. Tout fonctionne bien et je peux ajuster mon texte encore plus. Je peux cliquer ici pour l'agrandir. Et puis ce que nous avons ici, donc nous en avons 40, nous pouvons déplacer notre bouton vers le bas à 40. Ce n'était pas dans une pile ou à l'origine. Alors, changeons ça très vite. Donc celui-ci est dans une pile, mais le texte ne l'est pas. Donc je vais cliquer dessus. Voyons voir, nous avons ajusté la largeur de notre image. On peut l'organiser un peu. Je l'ai fait. Et je peux maintenant aller de l'avant et réorganiser mes textes. Alors allons-y avec celui-là. Je peux cliquer ici, et comme vous pouvez le voir, il développe automatiquement MyText, désolé mon bouton vers le bas. Donc, ce que je vais faire est essentiellement d'utiliser ces deux éléments. Cliquez ici pour positionner mes textes au centre, puis, enfin, ajuster la largeur de mon bouton. Je peux également copier de celui ci-dessus, mais comme vous pouvez le voir, c'est extrêmement simple. S' assure simplement que c'est trois colonnes de large et c'est fondamentalement tout. Revenons à l'État principal. Ce clic sur notre aperçu, voir si cela fonctionne. Et c'est le cas, vous pouvez voir à quoi ça ressemble. Donc, fondamentalement, tout fonctionne comme il se doit ici. Passons maintenant à ceux-ci. Et parce qu'ils n'ont aucun effet d'horreur sur eux, à l' exception des boutons, ils vont être très faciles à régler. Donc ce que je vais faire, c'est juste ajuster le C solide de rejet. On peut l'avoir à six heures, donc 246. Donc, à la fin de cette ligne. Laisse-moi vérifier une fois de plus. Donc 246. Je peux déplacer ça pour être ici. Donc pour être à 30 ans, comme si c'était là-haut avec tous ces autres éléments. Et il faut parfois zoomer un peu plus près juste pour être plus précis. Mais vous pouvez voir que nous sommes alignés avec nos lignes de grille. Enfin, je vais ajuster celui-ci pour qu'il soit six aussi bien. Et tu peux le laisser comme ça ou j'aime vraiment cette image. 57. Conception réactif 2: Passons maintenant et créons notre prochaine taille. Et pour le faire, au lieu de faire ce que j'ai fait en premier. Donc, au lieu de copier et de coller ci-dessous, je vais simplement contrôler un D sur celui-ci et le coller parce que nous avons déjà apporté ces modifications à notre conception. Alors encore une fois, commençons et c'est la page d'accueil responsive. On peut le créer comme de la terre ou je peux vraiment sauter ici. Et en tapant ce nom. Je peux faire la même chose pour cela, ce qui sera beaucoup plus facile pour les développeurs plus tard de comprendre lequel d'entre eux il est. Donc les premières choses sont 1024. Faisons ça. Donc 1024. Et la prochaine chose est, je veux utiliser ces valeurs. Donc 12305047 sur celui-ci. Donc, pour aller 123050. Et enfin dans ce sera 47. Donc encore une fois 305047. Donc, il a compris. Finalement, continuons maintenant et faisons la même chose que nous l'avons fait avant. Donc je vais déplacer ça ici. Je vais déplacer ça un peu plus près d'ici. Je vais bouger ça du chemin pour l'instant. Je vais bouger mes drapeaux ici. Je vais positionner ça ici et te dire comment enfin, ajustons celui-ci très vite. Je vais maintenant aller de l'avant et ajuster notre navigation. Donc je vais déplacer le perroquet ici. Et voyons, tout cela fonctionne bien. Je vais juste m'assurer que par exemple, je suis à 40 ans ici, donc 1234, mais je suis à 24 ans. Tous ces autres articles, donc un à 212. Et enfin vous voulez, donc vous pouvez déjà voir comment cela est beaucoup plus rapide que sur le premier parce que nous avons déjà celui-ci en place. Alors maintenant, allons de l'avant et passons à notre section héros, ce qui va évidemment nous prendre beaucoup trop de temps. Donc, ce que je vais faire avec celui-ci est en fait ajuster à quoi ressemble mon texte. Tout d'abord, je vais cliquer ici, assurez-vous qu'il est au centre comme ça. Et puis je vais m'assurer que c'est à 48 ans, donc c'est beaucoup plus petit qu'il ne l'était. Ensuite, je vais l'ajuster légèrement pour m'assurer qu'il va pleine largeur comme ça. Je vais faire la même chose pour mes autres textes. Alors assurez-vous que c'est comme ça. Assurez-vous qu'il est au centre. Assurez-vous que c'est au centre de ceux-ci. Et pour ce faire, il suffit de les sélectionner tous. Cliquez ici et assurez-vous que tous sont en désaccord. Position suivante vers le haut, ce groupe entier de textes au centre comme ceci, par exemple. Et ce que je vais faire, c'est m'assurer que je le déplace vers le haut. Alors voyons, à partir d'ici, 123, peut-être quatre, voyons comment ça marche. Et je peux, même, parce que c'est dans la pile, comme vous pouvez le voir, je peux ensuite ajuster. Donc, si je clique ici, ça va les déplacer. Je ne veux pas ça. Je veux que ce soit comme ça. Donc, je peux simplement ajuster ma pile. Donc, si je maintiens la touche Maj, ça va tout ajuster. Donc peut-être qu'on peut l'avoir à 24 disques. Voyons à quoi ça ressemble. C' est bon pour l'instant. Maintenant, déplacons notre image. Et tout d'abord, déplacons le héros BG pour s'adapter à ici. Donc 1024, je peux le sélectionner et mon image les positionner au centre. Et voyons ce que je peux faire ici. Donc, je peux, par exemple, déplacer ça un peu comme ça. Peut-être que je peux réduire mon image juste un peu plus. Peut-être comme ça. Et puis je vais m'assurer que c'est au centre. Il l'est. Et peut-être que je peux même le mettre un peu en décalage. Parfois, je ce juste pour qu'il bouton, que ce bouton entre ces gens. Donc peut-être quelque chose comme ça. Je pense que ça a l'air bien. Je vais laisser ça comme il est pour l'instant. Voyons voir, peut-être que je peux le faire tomber un peu comme ça. J' aime comment ça ressemble. Et nous allons plus de largeur pour être tardif de notre navigation supérieure. Alors traitons maintenant des éléments de héros. Même chose, il l'a placé au centre. Et maintenant, je peux simplement les ajuster à bien, pour que je puisse le positionner dans ce cercle. Je n'aime pas comment ça ressemble. Peut-être que je peux même passer à des endroits. Peut-être que je peux positionner ça ici. Parfois, la saleté peut être, je peux mettre ma ligne ici ou je peux la faire tourner un peu. Peut-être éteindre et positionner mon cercle quelque part ici. Maintenant, bougeons notre forme. Donc je vais le positionner ici. Et maintenant qu'on n'a pas d'instructions, ça n'a pas d'importance. Vous pouvez même aller de l'avant et l'étendre si vous le souhaitez. Mais je vais le laisser juste là. Enfin, pour notre mosquée, nous allons utiliser le héros BG, recadrer. Donc 10-24, puis utilisez notre cercle de héros. Comme ça. Voyons où on en est. Donc, je n'aime pas le disque dur ressemble donc je l'ai accidentellement déjà positionné avant. Alors voyons ici RBG maintenant il est bien ici un cercle. Faisons en sorte qu'il soit mort au centre. Et vous pouvez également repositionner le cercle un peu vers le bas si vous voulez. Juste ainsi par exemple, il va du centre de votre bouton ou il va quelque part ici. J' aime comment ça ressemble. Et parce que c'est dans une mosquée, ça va couper juste là. Donc ça ne va pas nous distraire de quelque façon que ce soit. J' aime comment ça ressemble. Alors passons maintenant à celui-ci. Je vais toujours placer ça dans un centre comme celui-ci. Je vais bouger ça pour être comme ça. Et maintenant, nous devons faire, faire, nous devons faire la même chose que nous l'avons fait auparavant ? Donc, une fois de plus, comme vous pouvez le voir, nous avons le même espacement qu'avant. Nous avons juste besoin de sauter à l'intérieur et maintenant ajuster à quatre colonnes scène large comme nous l'avons fait avant avec celui-ci. Alors faisons ça. Et je ne vais pas vraiment faire quoi que ce soit ici. Je vais juste positionner ça pour être dans une ligne de deux comme ça. Et peut-être que je peux réduire la taille de celui-ci. Voyons voir. Allons-y, voyons quelque chose comme ça. Vous pouvez créer un compte sur mesure. Et il est dit en savoir plus. Donc, fondamentalement, c'est quelque chose comme notre billet de blog ou quelque chose comme ça. les ajustons pas donc je vais m'assurer que c'est à, je ne sais pas, 30 ou 40. Donc 1234. Voyons où c'est. Donc 40, j'aime comment ça ressemble à n. Encore une fois, ce que je vais faire ici est fondamentalement faire la même chose que je l'ai fait avant. Donc, je vais utiliser mes éléments. Voyons d'abord ce qu'on peut faire ici jusqu'à présent. Estate mélange dette, nous sommes à quatre heures juste ici. Donc, ce que je vais faire est en fait utiliser ceci et ce texte et je vais laisser tout le reste la même chose. Revenons donc à l'état par défaut. Donc ceci et ce contrôle C, et aller à l'état d'horreur, trouver le contrôle V, puis simplement retirer les anciens d'ici comme ça. Et enfin, je m'assurerai d'être à 40 ans ici. Quand je fais le Hummer, il est toujours là comme ça. Enfin, ce que je vais faire avec mon cercle est un peu ajusté. Donc je vais m'assurer que ça va voir, deux cents, deux cents. Alors je vais le positionner pour être 20 et quelque chose comme ça peut-être. Et appuyez sur le contrôle C pour que je puisse le copier. Ensuite, revenez à mon état par défaut, sautez à l'intérieur, ouvrez les éléments vers le haut. Donc, où nous sommes, éléments mosquée et est allé contrôler V et supprimer mon ancien cercle une fois de plus, parce que ces éléments sont à 0, vous ne serez pas en mesure de les voir. Et avant de faire les autres, testons ça et voyons à quoi ça ressemble. Donc, comme vous pouvez le voir, ça a l'air vraiment sympa. Cela fonctionne toujours bien. Ça a l'air vraiment sympa. Ça marche. Donc, lorsque je survole et descend, vous pouvez voir que Learn More reste exactement dans la même position. Ces éléments sont les mêmes. Et nous pouvons même jouer avec la position de ces trois éléments. Mais comme il l'a dit, je vais juste les laisser tels qu'ils sont. Alors passons maintenant à ce sont eux. Cliquez donc sur Masquer le disque. C' est plus ici. Et voyons où nous sommes. Donc, nous sommes à la ligne atteint réellement Grand. Alors ajustons la dette à quatre colonnes de large comme ça. Encore une fois, nous allons avoir trois lignées de canards, ce qui est génial parce qu'il se termine ici. Je vais le couper. Assurez-vous que c'est la hauteur. Et voyons voir. Ce que je peux faire ici. Tout d'abord, est la position ceci. Maintenant, si je prends ici, vous pouvez voir qu'on est à 40 ans ici. Alors faisons la même chose pour cette fois qui étaient anti 30 sur la fourche. Et faisons la même chose pour nos textes. Voyons donc 234. Donc nous l'avons là. Maintenant ce que je vais faire est fondamentalement la même chose avec celui-ci, mais avant que je le fasse, je vais sauter ici. Voyons où nous sommes. Allons à l'état d'horreur. Ajustez ça 1234 comme ça. Je vais ensuite passer à ces éléments. Alors positionnez celui-ci ici, peut-être celui-là, ici. Voyons voir. Je vais positionner ça. Et il peut faire la même chose pour celui-ci parce que c'est beaucoup plus rapide qu'avant, ou vraiment savoir ce que je voulais faire. Donc 1234, et je vais déplacer ça pour être à 40 ans aussi. Donc c'est fondamentalement tout. Et la dernière chose que je veux faire est de sauter à l'intérieur d'ici basé dans ce cercle, positionnez-le juste ici. Donc, si vous vous souvenez 12x, je vais supprimer mon ancien cercle, appuyer sur Contrôle C, et revenir dans mon état par défaut. Retournez à mes éléments mosquée Contrôle V, j'enlève l'ancien. Et maintenant, fermons tout ça. Essayons ça. Voyez à quoi ça ressemble. Donc nous en sommes à l'original. Tout a l'air beau. Tout a l'air comme il se doit ici aussi. Cela peut rapidement vérifier et l'espacement sur la droite pour ce cercle. Ça a l'air bien. Cette animation fonctionne très bien. Donc j'aime vraiment comment cela se déroule et vous pouvez voir que c'est beaucoup plus rapide cette fois parce que nous avons déjà certains de ces éléments en place. Nous savons déjà certaines des choses que nous voulons faire. Par exemple, nous allons le réduire à trois heures. Donc, vous pouvez voir que vous avez la possibilité de personnaliser votre panier plus sur squalor dat voyons, je peux faire ça comme ça, ou je peux même les positionner comme ça. cartes de débit si précises, peut-être que c'est encore mieux qu'il ne l'était. Voyons voir. Allons au 44. Déplacez cela à 40 aussi. Donc comme ça, et c'est fondamentalement ça. Allons maintenant et ajustons à l'état Horace ainsi que de la position hivernale ces ici. Je vais déplacer ces éléments comme ça. Déplacez cela et je vais déplacer ceci, par exemple ici. Je vais m'ajuster et ne pas aimer. Donc je vais vraiment nous déplacer un peu juste là. Et puis je vais m'assurer d'être à 40 ans. Donc 1234. Ce que nous avions ici, laissez-moi revenir en arrière et vérifier parce que j'ai oublié l'état par défaut. Laissez-moi effectivement copier mon texte est beaucoup plus rapide. Passez le contrôle V là, nous l'avons. Retourne à ici, donc 404040 partout. Et enfin, faisons la même chose pour ce cercle. Donc je vais sauter ici et le donner. Voyons voir, à partir d'en fait, non, revenons à ici. Eléments a, masque, cercle Contrôle C. Je vais y aller. Ici, contrôlez V. Et maintenez simplement la touche Maj et flèche droite pour positionner en place. Je vais supprimer l'ancien, s' assurer que je suis aligné et puis 22 le contrôle gauche C. Ensuite, je peux revenir à mon état par défaut, étroit, se comporter, ouvrir, éléments mosquée ou dessiner V pour le coller en place. Retirez l'ancien. Et Terry avait, enfin, le bureau tous les trois. Voyons comment ils fonctionnent tous. Donc, si je fais défiler ici, vous pouvez voir que cela fonctionne vraiment bien. Si vous pensez qu'à ce stade ce texte devient un peu trop gros, alors vous pouvez le réduire. Mais je pense que nous allons le réduire dans la prochaine étape quand nous arrivons réellement à la taille de la tablette. Mais je pense que pour l'instant ça marche bien. Vérifions ça. Tout ça a l'air vraiment sympa. Et rappelez-vous juste parce que nous allons passer aux étapes de la tablette, nous ne allons pas avoir cette animation plus tard, qui va nous faire gagner beaucoup de temps parce que vous ne pouvez pas passer avec votre souris dans la date des tablettes parce que vous ne utiliser la souris sur une tablette, vous utilisez votre doigt. Donc, nous allons les avoir comme un point de robinet. Donc tout va bien, vous voyez ici va être un point de contact en fait. Donc nous allons juste, comme vous les voyez en ce moment, ils vont rester comme ça. Ainsi, vous pouvez simplement taper sur leur plus ou sur cette carte entière, puis continuer pour en savoir plus. Ce n'est pas éditer si vite. Désolé, une fois de plus, positionné à des textes sont juste ici. Déplacez ce texte ici. Déplacez cette section entière ici. Et puis nous pouvons le couper, par exemple, pour entendre ce qui a bougé tout l'arrière-plan. Maintenant, quand je clique ici, allez jusqu'au bout, testé. Vous pouvez voir à quel point c'était rapide. Nous pouvons donc passer à la section suivante. Parce que lorsque vous faites ces choses, vous vous retrouvez à travailler tout le temps avec les mêmes éléments. Donc, obtenez assez bien Ed à lire tous ces différents éléments. Donc, ce que nous pouvons faire ici, c'est faire quelque chose d'un peu différent. Peut-être que nous pouvons faire dans cette image sur le dessus, mais je ne vais pas le faire à ce stade. Je le ferai à un stade ultérieur quand nous arriverons à l'état suivant. Pour l'instant, je vais le laisser tel qu'il est en ce moment. Alors voyons, peut-être que je peux l'avoir encore à cinq heures. Donc 245, réduisons la taille de notre image comme ceci. Donc 245, je pense que ça marche bien, peut-être que quelqu'un peut le pousser juste un peu. Voyons voir. Peut-être que je peux positionner que c'est juste un peu à quelque chose comme ça. Je pense que ça marche bien. Je vais alors simplement déplacer mon texte. Pour une raison quelconque. Je dois le sélectionner comme ça. Il ne le reconnaîtra pas. Voyons où nous sommes et où nous sommes. Et ce que je peux faire ici est simplement arrivé mon texte autour de sorte que je peux basé et voyons, je peux cliquer sur ce texte développé. Et parce que nous sommes dans, voyons, ici, nous sommes dans une pile, tout dépense bien. La seule chose qui aime vraiment, c'est ce texte. Nous allons donc augmenter l'espacement des lignes à, par exemple, 74, ce titre. Oui, ça a l'air beaucoup mieux. Maintenant, sélectionnez les deux. Cliquez ici. Mais non, je ne veux pas qu'il bouge mon texte. Je voulais juste bouger ça. Alors maintenant j'ai été testé sur les travaux d'aération comme il se doit. Vous pouvez également développer cette image si vous le souhaitez, pour prendre six colonnes. Comme ça, et maintenant simplement déplacé un texte ici. En faisant cela, assurez-vous que vous avez 30 ans. Alors zoomez un peu s'il commence à jouer avec vous. Alors, juste ici. Donc si vous êtes comme ça, vous pouvez le laisser là. Si vous ne le faites pas, vous pouvez passer à partir des produits laitiers peut également augmenter l'espacement des lignes pour cela. Mais juste pour le temps, je vais l'avoir comme ça parce que je pense que ça marche assez bien. Maintenant, déplacons ces deux-là. Encore une fois. Assurez-vous que c'est 6246 juste ici. Assurez-vous de faire la même chose pour cette 1s 246. Et fondamentalement, vous n'avez pas besoin de faire quoi que ce soit, mais R va simplement les déplacer ici. Alors 12, assurez-vous que j'ai 20 ans. Comme si nous allons voir où nous en sommes avec le bouton. Nous sommes encore à 40 ans, donc nous pouvons laisser à leurs images regarder bien, sorte que nous pouvons maintenant passer à la suivante. Évidemment, dans les prochaines étapes, nous allons les envelopper et nous allons les positionner pour être plus larges, mais vous verrez cela un peu plus tard. Enfin, jouons avec ceux-ci pour que je puisse cliquer ici. Et encore une fois, nous devons les faire avoir quatre colonnes de large. Donc 1234. Et vous pouvez voir à quel point ils s'adaptent intelligemment à notre mise en page. Alors voyons qu'on est à 30 ans, mais j'ai besoin d'ajuster mon texte à l'intérieur. Alors voyons une routine MAINTENANT. Déplacez tout ici. Donc 20. Et je vais évidemment déplacer cette r vers le bas pour me donner un peu plus d'espace. Voyons ce que je peux faire ici pour l'excellence et prêt pour le prix d'excellence dans, voyons, peut-être pour prix d'excellence bancaire pour 2021. Comme ça revêtu. Et voyons, nous sommes à 20 ans, ce qui est très bien. Encore une fois, nous allons avoir trois lignes de texte ici. Ce que je vais faire, tout d'abord, c'est sélectionner tout cela sauf pour le savoir plus évidemment, contrôler, voir, revenir à mon horreur, état. Contrôle v. Je vais supprimer tout sauf pour apprendre plus contrôlé, supprimé et leur position héréditaire. Et là, je vais m'assurer que c'est un 20, ce qui est, et c'est bon. Je peux tout simplement passer à la suivante. Pour que je puisse y aller. Nous sommes à 30 ans, ce qui est très bien. Vérifions ça. Il est aligné sur notre grille, comme vous pouvez le voir des deux côtés. Alors travaillons maintenant sur celui-là. Donc on est à quatre ans, comme ça. Je vais double-cliquer pour ajuster mon image un peu. Positionnez ces deux niveaux centre booléen. Donc c'est bien, c'est bien. Je vais simplement ajuster cela à travers notre initiative. Donc simplement utilisé ce dernier mot ici. Nous sommes à 20 ans, ce qui est très bien. Donc, ce que je vais faire, c'est une fois de plus, sélectionnez tout sauf pour le En savoir plus. Revenez à l'état Horace et vous ne pouvez pas voir dans ceci est ce que je continue parler à quel point c'est beaucoup plus rapide quand vous avez déjà ces éléments, vous venez simplement de passer et de les supprimer. Et où vous avez besoin d'un Justin, où vous avez besoin et tout fonctionne comme il se doit. Donc 20, tout va bien. Vous pouvez également positionner ce 20 vers le haut si vous le souhaitez. Peut-être pourrions-nous le faire parce que nous sommes bas ici et que nous sommes vraiment élevés ici. Donc, à l'intérieur de notre état par défaut, et nous pouvons simplement sauter ici, 12. Nous sommes donc à 20 ans ici. Voyons voir. On est à Harvard. C'est très bien. Je peux double-cliquer 1-2, le joindre, revenir à mon état par défaut 12. Parce que nous sommes sur un état par défaut ici, nous pouvons aller au hover 1-2, et c'est fondamentalement tout. Accédez à la valeur par défaut. Vous pouvez voir à quoi ça ressemble et nous allons le tester un peu plus tard. Nous allons maintenant rapidement terminé un troisième. Je veux juste vérifier les choses ici. Oui, c'est bon. Vous pouvez également positionner ce texte et vous pouvez jouer et voir ce qui fonctionne le mieux pour votre mise en page. Mais je pense que ça va marcher très bien pour l'instant. Qu' est-ce que nous allons voir. Est-ce correct ? Voyons donc 294 et son poids. Quelque chose n'est pas tout à fait juste ou dans celui-ci. Alors voyons. Oui, ce n'est pas assez large ici. Donc, je vais l'étendre à ici. Je vais élargir mon image aussi pour entendre. Et je pense que ça va se passer. Et maintenant, testons ça. Assurez-vous que nous sommes dans l'état par défaut, ce que nous sommes, ce que nous sommes ici aussi. Alors voyons. La largeur est encore de 90, le poids est de 289. Donc neuf. Maintenant, c'est bon. Voyons si nous avons 30 ans, nous sommes là. Crf, on a 30 ans ici, qui on est, ce qui est très bien. Et voyons, c'est 90 aussi. Alors maintenant tout devrait fonctionner. Oui, non, tout va bien. Donc, vous allez évidemment besoin d'aller de l'avant et de vérifier toutes ces choses. Donc ce que je vais faire, c'est retourner à l'état d'horreur pour ce numéro deux et changer ça à deux neuf ans, changer mon image à 29, comme ça. Et maintenant, cela devrait être bien entre les États. Toi, tout fonctionne comme il se doit. Finalement, allons de l'avant et changeons ce dernier. Donc, en s'alignant sur notre grille, je peux le laisser ici. Donc ce que je peux faire, c'est voir où nous sommes. Donc Yar 24 d'ici. Donc je peux l'aligner sur 20 d'ici. Et puis voyons. Peut-être que je peux copier et coller la position de ce texte Googlers pour entendre et coller ceci. Alors voyons. Je vais simplement utiliser le texte ici. Je vais m'assurer qu'il est là juste pour que je sache où est le poste. Donc, je vais copier dans ce texte supprimé. Retournez ici dans un troupeau laitier. Et ce que je veux faire ensuite, c'est une fois de plus, assurez-vous que j'ai trois ans. Si vous voulez travailler à New York et l'environnement gnomique. Voyons mon itinéraire et faisons un peu de temps ça. Oui. Donc 20 ici, vérifions ça. Oui, c'est bon. Et encore une fois, je vais simplement copier et coller tout sauf pour le En savoir plus. Saute à l'intérieur d'ici. Copier-coller, supprimez tout sauf pour la position En savoir plus ou En savoir plus sur le dessus. Et je veux juste m'assurer que si à 90, c'est bon. À 90, c'est bon. Donc tout va bien avec celui-ci. Et voyons voir. Je suis ici sur Howard et je voulais être sur l'état par défaut. Sur l'état par défaut. Je suis ici sur l'état par défaut, ce qui est la prime d'enfant bien. Parce qu'une fois de plus, je veux juste m'assurer que tout fonctionne comme il se doit. Je n'aime vraiment pas trop cette mise en page. Donc peut-être que je peux même réduire la taille de ce texte donc il est 24, peut-être que ce devrait être un adolescent. Donc ça prend un peu moins de place ici. Donc, c'est vraiment à vous de décider et comment vous voulez vous adapter à tout ça. Et c'est très bien. Parce que vous pouvez voir comment ça fonctionne vraiment bien. Donc tout fonctionne comme il se doit. Peut-être que nous pouvons même un peu. Et juste cette image, quelque chose comme ça. Peut-être, peut-être un peu moins à entendre. Contrôle C allant au vol stationnaire jusqu'à ce que je lise celui-ci. Et je pense que ça marche beaucoup mieux. Donc état par défaut Horace état, tout fonctionne comme il se doit. Ou ce sera comme Houghton lointain mise en page se révélera être. Passons maintenant à la section suivante. Et dans la section suivante, nous allons faire défiler un peu vers le bas. Parce que nous sommes ici avec notre infrastructure. Et ce qu'il peut faire est simplement de le faire pour ajuster tous ces éléments , puis double-cliquer et les réorganiser juste un peu comme une cellule. Et pour positionner ça ici, et je peux m'assurer que c'est quelque part par ici. Il ne peut pas être au centre à l'état D, mais il peut être à un stade ultérieur. Désolé. Désolé pour ça. Cela peut donc être à un stade ultérieur, mais cela ne peut pas l'être à ce stade. Donc, à un stade ultérieur peut-être que nous pouvons supprimer le texte et juste avoir les icônes à la place, ce qui va montrer notre, notre mise en page beaucoup mieux qu'il ne l'est en ce moment. Ce que je vais faire ensuite, c'est en fait les ajuster. Donc, si vous voyez, nous avons 246. Donc peut-être que nous pouvons avoir trois en ligne et ensuite trois en ligne ci-dessous afin que nous puissions ajuster cela. Donc, ce que je peux faire est de double-cliquer sur mon rpart et de l'étendre jusqu'au bas. Ensuite, je peux cliquer ici, étendre mon pied de page BG. Cela me donne un peu plus d'espace pour jouer avec. Je vais faire est d'aligner ça ici. J' utilise toujours la même hauteur d'ici à la bande d'info, donc ça ne va pas changer. Mais je vais juste réorganiser certains d'entre eux. Donc je vais positionner ça ici, assurer qu'il est dans un centroïde loin. Et je vais utiliser des comptes, des cartes de pelouse dans la même ligne, investir Digital, d'autres liens sur l'autre ligne. Donc, nous pouvons voir où nous en sommes ici, nous en sommes à 100, afin que nous puissions les positionner à 100 également. Comme ça. Donc ça nous donne assez d'espace. Ce n'est pas trop encombré parce qu'on est à 12 ans. Nous avons donc une grille de 12 colonnes. Nous pouvons les positionner comme nous l'avons fait avec ceux-ci. Donc chacun de ces groupes de textes va prendre quatre colonnes. Il n'en a pas besoin, mais il va toujours prendre quatre colonnes juste pour nous donner assez d'espace pour se reproduire et il utilise assez d'espace pour lire ce texte un peu mieux. Et c'est fondamentalement tout. Je vais m'assurer que c'est 100 aussi. Voyons 100. Et je vais voir ce que je peux faire ici. Donc, nous pouvons, par exemple, positionner cela comme étant, je n'ai pas besoin qu'il soit 100. Voyons voir, peut-être qu'il peut être 40. Alors où est mon milieu, 0.123. C'est là. Et je déplace simplement ma souris pour ajuster à la hauteur de cette position de texte ici et les habitudes Terry. Donc, comme vous pouvez le voir, le pied de page est toujours propre comme il est juste ici. Il est toujours lisible, il est toujours respirant, il a encore assez d'espace. Mais maintenant, nous le positionnons, dissuadons. Vous pouvez juste imaginer sur un écran plus petit, vous pouvez faire quelque chose d'un peu différent. Vous pouvez soit faire défiler vers la gauche et vers la droite. Vous pouvez les positionner en deux blocs. Donc les comptes et les pelouses vont être sur l'un à côté de l'autre. cartes et les investisseurs vont descendre et b1 à côté de l'autre. Enfin, les liens numériques et autres vont descendre ou vous pouvez aller dans l'autre voie. Vous pouvez les créer en tant que points d'étape distincts et vous pouvez ensuite les développer et les montrer et voir à quoi cela va ressembler. Nous allons réellement explorer avec certaines de ces mises en page sont un peu plus tard une fois que nous arrivons réellement à la tablette et les tailles de police. Mais pour l'instant, je pense que cela fonctionne très bien et je pense que ça a l'air très bien. Examinons rapidement une fois de plus et garantissez même parler. Donc, nous sommes ici à la connexion. Tout fonctionne bien. Et rappelez-vous juste que nous sommes toujours sur un bureau, juste un très petit bureau vu peut-être sur le petit ordinateur portable comme quelque chose comme 12 pouces ou même moins. Nous avons donc toujours la possibilité d'utiliser une souris. Donc tout fonctionne comme il se doit. Tout est beau et lisse. On peut toujours faire défiler à gauche et à droite. Encore une fois, vous pouvez utiliser ces flèches dont j'ai parlé. Et vous pouvez, par exemple, dans ce cas, les positionner quelque part ici et ici, disons qu'ils sont vraiment petits. Ou vous pouvez écrire une description, par exemple, cliquez sur la gauche et la droite ou faites défiler la gauche et la droite positionné à la description ici. Pour celui-ci, je n'aime toujours pas ce texte. Alors peut-être dans votre cas, peut-être que vous pouvez pratiquer et réduire la taille de ce texte juste pour que vous puissiez avoir un résultat un peu différent que j'ai fait et voir comment cela fonctionne comme. Donc ça va prendre moins d'espace vertical. Ensuite, dans mon cas, nous avons encore ce taux toujours à la recherche sans trop de changement. Dernières Nouvelles ou manque comment cela s'avère être si ce qui est bien. Enfin, une nouvelle banque. Donc, tout cela semble génial et maintenant vous pouvez voir le dossier. Cela nous donne beaucoup plus de place pour respirer et tout est beau et lisible. Donc c'est tout pour cette vidéo. Je te verrai dans la prochaine vidéo. Nous allons nous attaquer aux appareils moyens ou aux tablettes. Et nous allons faire beaucoup de changements différents parce qu'une fois de plus, nous allons à partir d'écrans basés sur la clique. Si grands, grands ordinateurs de bureau, petits ordinateurs de bureau, et enfin, beaucoup plus lents, plus petits ordinateurs de bureau, comme par exemple, les ordinateurs portables et ainsi de suite. Et puis nous passons à une tablette et des appareils de formulaire, qui sont des appareils tapissables où vous n'avez pas votre souris, vous utilisez simplement vos doigts pour naviguer autour. Et c'est là que la différence est. Et c'est pourquoi nous devons nous adapter à tous ces changements. Alors je te verrai là-bas. 58. Conception réactif 3: Passons maintenant et concevons notre taille de tablette. Et pour faire comme toujours, je vais frapper le contrôle. D va encore une fois, nous avons déjà conçu celui-ci. Et vous pouvez voir qu'un ID de lieu ici, je vais simplement plus d'esprit et de bas sont juste ici. Donc 70 scène, comme avec toutes ces autres. Bien que cliquez ici pour contrôler C, Donc, je peux le copier localement caisse ici. Je vais supprimer Stokes indu bon contrôle VK de bête. Et maintenant, nous pouvons commencer à ajuster nos tailles à celles-ci. Donc, vous pouvez voir 76, huit est la largeur de notre sol arboricole. Il a changé au premier 76 huit. Et maintenant, vous pouvez voir ici que nous avons huit colonnes. Donc je vais changer ça d'abord. Alors allons sauter à l'intérieur de moi, chercher II colonnes. Et vous pouvez voir que nous l'avons traversé à 296042, solides changement de dette. Donc une fois de plus. Voyons voir 8296042296042. Voyons 602942. C' est un vérificateur sans fil une devise. Donc 8296042. C'est pour ça. Allons maintenant et commençons à ajuster le DCE. Tout d'abord pour nous parce que maintenant nous sommes sur une tablette, nous allons commencer à ajuster certains de ces éléments et faire quelques points de taraudage. Donc, d'abord, je vais ajuster celui-ci très vite. Comme papa, je vais sauter à l'intérieur de mes drapeaux ici. Et puis ce que je vais faire est double-cliquer sur l'aperçu et supprimer MyText parce que j'ai juste besoin de mon icône. Je peux ensuite dégrouper des bits. Je peux faire la même chose pour mon emplacement. Je peux supprimer mon emplacement, et je peux simplement zoomer de très près, ajuster mon icône ici. Je peux me positionner pour les affaires ici, juste en quelque sorte OK, vous avez un peu plus d'espace. Et je peux positionner mon icône ici. Vous pouvez également jouer avec ces éléments. Par exemple, la position à l'allocation téléphonique ici. Mais juste pour des raisons de cohérence, positionnons-le là où il était. Maintenant passons à autre chose. Et je vais déplacer ça ici. Et ce que je vais faire pour le NAV principal en fait, c'est que je vais dégrouper ce composant. Et une vieille façon. C' est ici. Oui. C' était que tu es un hockey, ce qui est confus moi-même. Donc, ce que je vais faire en fait, c'est le dégrouper en tant que composant. Donc, nous n'allons pas avoir tous ces éléments parce que nous allons le créer pour être un composant distinct. Donc, je vais faire un clic droit sur le composant Ungroup. Mais avant que je le fasse, allons d'abord le déplacer à l'intérieur. Donc ça ne gâche pas notre espacement. Donc maintenant je peux le dégrouper pour qu'il ne aille pas à l'extérieur de notre aéroport. Maintenant que nous l'avons, je vais en faire une monotone. Alors appelle-le moi maintenant une fois de plus, vous pouvez l'appeler une tablette ou comme vous voulez. Donc, son noyau, par exemple, appuyez sur l'onglet principal de navigation afin que nous sachions que c'est pour les tablettes et c'est pour les appareils mobiles. Donc ce que je vais faire dans celui-ci, c'est en fait créer deux états. Un qui est stable, N1, ce qui ne l'est pas. Je vais cacher mon héros. Juste triés, nous pouvons bien nous concentrer sur celui-ci. Ce que je vais faire, c'est créer deux états fondamentalement. Et je vais commencer par le premier état, qui est cet état par défaut. Donc je vais dupliquer cette navigation BG, et je vais cacher mon arrière-plan comme ça. Et puis je vais, par exemple, cacher celui-ci à la place, montré celui-ci. Donc juste montré ce fond un, étendu tout le chemin vers le bas, juste pour que je puisse avoir mon original pour que je puisse voir où il est censé aller et quelles sont les dimensions et ainsi de suite. Alors laissez-moi le cacher rapidement afin que je vais étendre ceci et en bas un juste un peu plus. Et ce que je vais faire est d'utiliser mes éléments de navigation, les positionner ici. Et je peux les organiser un peu pour les mettre dans une pile. Je peux cliquer comme ça. Vous pouvez voir qu'ils sont bien organisés. Je peux sélectionner tout mon texte, assurer qu'il est aligné à gauche comme ceci. Assurez-vous qu'il est aligné à gauche comme ça. Et je peux cliquer et mesurer juste sur celui-ci. Ou je peux tenir Shift et l'étendue sur tout ça. Donc, par exemple, que ce soit à 40, juste trié. Nous avons juste un peu plus d'espace pour nos points de taraudage. Donc, vous pouvez juste imaginer que nous allons inclure une icône dans une seconde seulement. On va le positionner ici. Ce que vous pouvez également faire, c'est que vous pouvez les positionner dans l'ordre ou dans la ligne. Voyons voir, on en a 24 ou 5. Peut-être que vous pouvez mettre un à côté de l'autre. Donc x3 dans cette ligne, à cette ligne. Mais pour des raisons de cohérence et pour le plus simple, je vais juste le positionner et le laisser comme ça. Voyons voir, nous sommes à 36, je vais le positionner à 40. Voyons voir. Ouais, je pense que ça va très bien paraître. Voyons donc 1234. Et je vais utiliser mon bouton. Mais avant que je ne le fasse, je vais frapper le contrôle D sur celui-ci. Juste pour prendre un café, je vais utiliser cette position de copie et tout le chemin vers le bas comme ça, assurez-vous qu'il est aligné avec mes textes. Voyons où est mon texte. C' est à 20 ans. Donc position à 12, comme ça. Et voyons, peut-être que nous pouvons nous positionner pour être 40 comme tous ces autres articles. Et enfin, je vais étendre ceci à ici et simplement augmenter la hauteur à 40. Donc, si j'utilise ma calculatrice, ce qui est simplement le moyen le plus simple de le faire et de le ramener de cet écran afin que vous puissiez voir que la hauteur est actuellement de 539. Donc 539, vous pouvez ajouter 40 parce qu'on veut le déplacer comme ça. Son 579. C' est évidemment très simple maths, mais juste pour que je veux juste vous montrer que vous pouvez utiliser ces outils de base comme calculer des zones pour améliorer vos chances d'être un peu plus précis et d'améliorer votre vitesse juste un peu. Donc une fois de plus, 579 est notre cible pour la hauteur comme celle-ci. Et parce qu'il a gardé l'espacement du disque, donc 50 ici. Et voyons ce que c'est ici. Donc nous sommes à 50 ans, la même chose. Allons à cette valeur par défaut. Nous sommes à 50, et si nous allons arriver ici, nous en sommes à 50 quand même nous laissons le même espacement. Nous utilisons ces mêmes chiffres pour atteindre ces objectifs. Donc ce que je vais faire c'est la dette de mélange. J' ai mon bouton de connexion, qui est celui-ci dissocié. Donc, je vais sélectionner celui-ci dissocier parce que rappelez-vous, nous n'avons pas d'effets de vol stationnaire. Donc, je vais juste m'assurer que c'est un dossier et pas un bouton réel avec hover, parce qu'une fois de plus, nous n'avons pas de hover. Il s'agit de la version tablette. Ensuite, je vais dégrouper cela aussi parce que je veux juste créer mon icône de menu ici. Donc, pour ce faire, je vais simplement utiliser cette hauteur. Donc je vais supprimer ça. Ici, c'est. Contrôle D. Je vais appeler cette ligne de menu, par exemple. Et voyons, parce que c'est 60, peut-être deuxième position à dix. Cachons ça une seconde. Voyons à quoi ça ressemble. Je n'aime pas ça. Je pense que c'est trop grand. Alors peut-être qu'on peut en faire cinq. Je pense que c'est beaucoup mieux. Aussi pour la largeur que je peux positionner. Il sera ici comme cette habitude de Derek. Et maintenant ce que je peux faire est de ramener mon bouton, frapper, par exemple, sur mon clavier pour abaisser l'obésité à 40 ou trois, juste pour que je puisse voir l'espacement de la hauteur, comment cela va fonctionner. Alors laissez-moi frapper le contrôle D pour dupliquer ma position de ligne ici mod dix, Control D positionnez-le ici, déplacez-le à dix. Maintenant, nous en avons dix et nous en avons dix. Je peux positionner la dose 3, assurer qu'ils sont au centre comme ça, et voir comment ils ressemblent par rapport à mon logo. Je suis les deux grands, ils sont trop petits ? Je peux également cliquer ici pour accéder au mode d'aperçu complet. Et je pense par exemple, peut-être que nous pouvons réduire la taille juste un peu entre ces lignes à quelque chose comme huit par exemple. Et évidemment, déplacez-le juste un peu plus vers la droite aussi. Alors, allons-y et faisons-le. Laisse-moi fermer ça. Donc, une fois de plus, je peux cliquer ici 12. Donc plus de façons d'être un rendez-vous. Cliquez sur ce dernier 112 films pour être un Tate, ramène mon bouton BG parce que je viens de le laisser là pour espacement saké. Et je vais aussi plus de largeur ici pour aligner avec ma position de bouton d'origine. Je n'ai pas eu l'air beaucoup mieux, mais allons-y, cliquez sur l'aperçu est que vous pouvez voir qu'il semble beaucoup mieux. Ce que je n'aime pas maintenant, c'est la largeur de ces lignes. Alors peut-être que je peux réduire un peu la largeur, mais rappelez-vous juste que c'est la largeur de notre colonne. Donc peut-être qu'on peut le laisser oser ou peut-être qu'on peut juste le presser un peu plus. Donc nous sommes au 60 mai, R3 peut être à 50. Et j'aime vraiment comment ça ressemble à un clou. Il commence maintenant à prendre beaucoup plus de moutons. Alors regrouperons ces. Je peux maintenant supprimer celui-ci parce que je n'en ai plus besoin. Et appelons ça quelque chose comme si je peux menu, je peux. Ou menu principal. Si je peux épeler correctement comme ça. Et ce que je veux faire est d'appuyer sur Control K parce que je veux créer un composant à partir de celui-ci, car c'est l'état par défaut et vous devez montrer aux gens quand ils ont cliqué sur quelque chose ce qui va se passer. Donc maintenant, nous allons créer l'état cliqué. Je vais l'appeler cliqué ou un robinet. Touchez comme vous voulez l'appeler, c' est vraiment à vous de décider. Et ce que je veux faire dans celui-ci, c'est montrer ce qui va se passer une fois qu'ils cliqueront là-dedans. Donc ce que je vais faire, c'est cliquer sur ce premier, abaisser au centre, comme ça. Cliquez sur ce dernier, positionnez-le jusqu'ici. Je vais également revenir à mon état par défaut juste pour m'assurer qu'ils sont commandés correctement. Donc ça va être le troisième, comme ça. Ça va être le premier. Alors maintenant, quand je vais à mes états de tabulation, déplacez-le vers le haut, déplacez-le vers le bas. Donc, tout fonctionne correctement. Mais juste pour m'assurer que je peux supprimer cela, ajoutez un nouvel onglet de qualité d'état. Et maintenant, je peux commencer à travailler parce qu'ils sont commandés correctement. Ceci est extrêmement important, évidemment en raison du redimensionnement responsive plus tard et aussi pour l'animation automatique parce que nous voulons nous assurer que cette fonction fonctionne. Eh bien. Ce que je vais faire, c'est faire tourner ça. Donc, par exemple, je peux faire pivoter mon premier à quelque chose comme ça. Donc 45 degrés. Et je peux faire pivoter mon dernier dans l'autre sens, donc moins 45 degrés. Et je vais aussi cliquer sur Mate milieu un et l'apporter tout le chemin dans. Donc je tiens Alt pendant que je le fais, pour entendre juste un dissenteur, pour créer un joli petit cercle. Donc pour cacher ça, Anders, vous pouvez voir ce qu'on a, fondamentalement une ellipse, pas seulement le Rayleigh, soi-disant. Alors voici à quoi ça va ressembler une fois qu'il sera cliqué. Donc là, vous l'avez. Maintenant que nous avons terminé cela, allons vite et vérifier si ce x est trop grand. Je ne pense pas que ça l'est. Je pense que ça a l'air bien. Alors maintenant, allons de l'avant et créons cet onglet nav moyen comme un composant lui-même. Donc ce que je vais faire, c'est ramener l'original comme ça. Et je vais cacher tous ces éléments supplémentaires. Donc, ramenons cela à l'état par défaut. Donc, il y a essentiellement deux façons de le faire. Tu peux le faire comme ça. Donc, vous pouvez positionner ceci là où il est juste ici. Et vous pouvez, par exemple, utiliser un guide. Mais je ne vais pas faire ça. Je vais essentiellement utiliser un masque pour ce bas. Alors comment cela va fonctionner, vous pouvez simplement déplacer cela jusqu'ici, par exemple, parce que nous n'avons plus besoin de sélecteur, nous pouvons le supprimer. Je vais déplacer mon icône principale et déplacer ça vers le bas comme ça. Comme ça. Donc fondamentalement, je vais avoir mon nav b, g, qui est celui-ci juste ici. Je vais avoir mes articles, mon bouton de connexion, et ce nav BG ici. Et ce que je vais faire est de dupliquer ceci maintenant BG une fois de plus. Je sais que c'est compliqué, mais ça va avoir beaucoup de sens dans une seconde. Touchez le contrôle D. Je vais le positionner jusqu'ici. Alors je vais sélectionner ces trois. Donc ceci, ceci, et cette touche de contrôle m, pour que je puisse les masquer. Et en gros, ce que je peux faire à ce stade de la mosquée, c'est que je peux fermer ça. Je peux localiser mon masque et le fermer ici. Alors ce que je peux faire est essentiellement de réduire la taille de celui-ci, désolé, pas la taille mais l'obésité parce que nous n'avons pas besoin de le voir évidemment. Et puis une fois l'étape de l'utilisateur, celui-ci va disparaître. Donc, créons rapidement notre composant. Alors appuyez sur Control K. Ceci est l'état par défaut. Créons un nouvel état, appelons-le tap. Et à l'intérieur du robinet, ce que nous allons faire est essentiellement aller à notre masque nav BG et l'étendre pour qu'il atteigne ce point. Donc, vous pouvez même aller de l'avant et vérifier. Donc, c'est 579 de hauteur. Je peux cliquer ici pour aller à la 579, comme ça, juste pour m'assurer que nous avons la même hauteur. Et ce nav BG va réduire en taille comme ça. Et cette icône du menu principal va aller à l'onglet. Alors maintenant, allons de l'avant et prototype tout ça. Allons donc au prototype. Une fois de plus, une fois que les utilisateurs cliquent dessus, nous allons passer à l'état du robinet. Mais nous devons créer un point d'onglet en fait. Alors allons-y et faisons-le. Revenons au design. Nous ne le ferons donc pas. Donc, créons un point de tabulation. On dirait qu'on l'a fait avec le logo dans la navigation d'origine si on se souvient. Alors amenons ces deux là. Appelons cette étape comme ça. Assurez-vous que vous ne voyez rien alors pas sentir, pas AVC. Laissez-moi simplement positionné est au centre. Donc, enlevez les deux. Retournons en arrière. Allons au prototype. Donc, je vais sélectionner mon point d'onglet où il est. Ici, il est, nous avons encore un point de logotype ici vraiment vaguement. n'en avez pas besoin maintenant, mais vous en aurez besoin si vous voulez concevoir toutes ces autres pages. Laissons-le là pour l'instant. Encore une fois, si tu veux, tu ne peux pas faire ça. Je vais utiliser ce clic ici. Alors choisissons l'état de l'onglet. Comme ça. Nous allons utiliser Easy and out. Ou vous pouvez utiliser quelque chose comme Snap. Donc ça va se mettre en position. Allez avec facile maintenant pour voir comment cela fonctionne comme un point zéro, disons six. Essayons ça. Maintenant, passons à l'état de l'onglet. Encore une fois, le point DAP clic. Nous pouvons aller à l'état par défaut facile et sur 0.06. Et voyons comment ça marche. Alors passons rapidement à l'état par défaut. Cliquez sur Aperçu. Je vais l'agrandir pour que vous puissiez le voir mieux. Donc, quand vous cliquez là, vous pouvez voir que nous avons cette belle petite animation. Et tout se développe bien. Cela réduit l'obésité, donc il est en train de grandir hors du chemin. Et cela montre une dette aérée. Il devrait. Nous avons encore cette belle ombre de fond autour. Donc j'aime vraiment comment ça ressemble. Tout est comme il se doit. Donc juste une chose de plus. Et je saute ici à ce BG étroit. Vous pouvez voir que nous avons un flou de fond d'ombre. Ici. Nous avons encore l'ombre et le flou de fond, mais l'obésité est à 0. Donc je n'aime pas comment ça ressemble. Donc peut-être qu'on peut partir de, voyons, peut-être qu'on peut ramener ça en fait. Voyons voir, nous sommes au phi 79 à l'original. Alors changeons la dette. On peut aller ici. Nous sommes à 0 Bay City. Allons à l'état de l'onglet. Changez ceci à 100 et changez-le à 579. Comme ça. Donc, il est en fait en expansion avec le reste de notre design. Voyons voir, c'est à 0. Testionnons une fois de plus car moins de temps que vous ne pouvez pas voir dans cette ombre d'arrière-plan. Donc, quand je clique ici, et maintenant vous pouvez voir l'ombre d'arrière-plan et elle disparaît d'ici. Et vous pouvez voir cette belle petite animation pour notre icône changer joliment. Tout a l'air comme il se doit. J' ai vraiment aimé cette animation et nous avons encore ce joli petit état déroulant dans lequel nous pouvons travailler. Maintenant, ce que nous pouvons faire plus tard est évidemment utiliser ce composant et adapté à plusieurs autres tailles. Et nous avons encore cette taille pour travailler. Je vais te montrer un peu plus tard comment tu peux faire ça. Mais pour l'instant, passons rapidement à cette étape suivante. Donc, nous allons faire est en fait utiliser MyText, positionnez-le au centre. Je ne vais pas trop l'éditer. Je peux également réduire la taille de mon image à, par exemple, jusqu'à ce que comme ça, je pense que cela fonctionne bien. Changons la taille de l'image du héros à ceci. Allons à notre mosquée. Changer la taille de notre masque à cette position, le cercle au centre, comme nous l'avons fait auparavant. Assurez-vous juste que c'est un cavalier ici. Vous pouvez également le déplacer un peu vers le bas. Dans ce cas, je pense que c'est bien. Les formes de héros ou que nous pouvons faire est que nous pouvons le biaiser ou vous pouvez simplement le déplacer. Donc je vais le faire en fait simplement le déplacer à l'intérieur. Et je pense que ça a l'air un peu mieux que. Juste biaisé pour la taille particulière du bureau. Ça marche bien. Ça a l'air bien. Et peut-être pour cette ligne, nous pouvons peut-être le positionner pour être quelque part par ici. Voyons voir. Je pense que c'est bon. Et enfin, ce que je voulais faire pour ce bouton est de dégrouper ce composant. Mais appelez toujours le bouton principal. Je ne sais pas pourquoi c'est arrivé. Pour une raison ou non, voyons où nous sommes. A 59. Peut-être qu'on peut être à 50 ans. Je pense que ça marche un peu mieux. Déplacez ça hors du chemin. Voyons voir. Peut-être 40. Ouais, 1940, ça a l'air un peu mieux. Donc nous devons encore dégrouper ça parce que nous n'avons pas besoin qu'il soit dans un état d'horreur parce que nous ne pouvons pas planer si vous vous souvenez. Donc c'est fondamentalement tout. Nous avons terminé cela et une fois de plus, vous pouvez voir à quel point c'est plus rapide. Une fois que vous commencez à travailler vers le bas avec les tailles D, vous pouvez facilement ajuster et faire toutes ces modifications. Donc nous allons nous assurer que c'est centré. Maintenant, ce que je vais faire est simplement de cliquer ici parce que je veux repositionner DES. Alors ce que je vais faire, c'est m'assurer que c'est à l'intérieur de son groupe et de son groupe. Groupe. Et je vais sauter à l'intérieur et dégrouper mon composant. Je suis le groupe Maya composante. Et enfin, dégroupez mon composant ici aussi. Parce qu'une fois de plus, nous n'avons pas besoin d'états survolants, nous avons juste besoin de ces états irréguliers. Ce que je vais faire ensuite, c'est leur donner des noms. Donc, ce sont des comptes personnalisés. La suivante est l'enregistrement personnalisé. Et enfin, nous avons des cartes de débit personnalisées comme ça. Et maintenant que cela est terminé, ce que vous pouvez faire est simplement d'étendre ces cartes vers la droite. Donc, je vais les sélectionner tous et cliquer ici pour que je puisse les étendre à la grille. Assurez-vous que vous êtes aligné ici parfaitement ce que nous ne sommes pas. Donc je vais me positionner là pour le réparer. Là, nous l'avons. Et maintenant, il suffit d'étendre cela pour s'adapter à votre grille. Voyons voir les récits des niveleuses de rotor. Donc je vais m'assurer que c'est juste là. Tu peux y retourner et vérifier. Nous en avons donc 150, donc nous allons l'inclure un peu plus tard. Mais ce que nous pouvons faire pour son mur est élargi. La hauteur totale de R naît jusqu'au bas. Je vais sélectionner mon pied de page et ce, ce texte, cette section ci-dessus. C' est donc le nom du service, le taux de change. Je vais les moder tous, jusqu' à ici, juste pour que je puisse jouer un peu plus avec ce texte. Juste pour que j'ai eu un peu plus d'espace pour travailler ? Donc, ce que je peux faire pour son mur est de double-cliquer ici, positionner ici parce que maintenant nous avons beaucoup plus d'espace. Je peux faire la même chose ici comme ça. Je peux faire la même chose ici. Comme ça. Et maintenant, ce que vous pouvez faire est de retourner à votre premier, où nous avions le plus d'informations. Alors celui-là, contrôlez C. et retournez ici. Contrôle V. Voyons si nous avons plus d'informations ici. Nous ne le faisons pas, donc nous pouvons le mettre en position. Alors nous pouvons faire la même chose pour celui-ci. Parce que là où vous avez plus d'espace, vous pouvez évidemment aller de l'avant et montrer plus d'informations. Pourquoi pas ? Comme la mort ? Et nous allons voir, Optimiser le compte et créer votre compte. Parce que je ne veux pas que ça passe un mot. C' est juste inutile pour Dat. Comme la saleté et plus comme ça. Donc, nous l'avons là. Maintenant, nous pouvons jouer avec ces autres éléments. Donc je peux d'abord aller de l'avant et fermer Ds. Fais ça, ils ne me dérangent pas plus tard. Donc, ce que je peux faire dans ce cas est, par exemple, ajuster l'espacement. Et comment je peux le faire, c'est simplement d'entrer à l'intérieur. Et commençons par ce premier pour que vous puissiez expérimenter un peu. Donc nous sommes à 40 ans ici, ce qui est très bien. On est à 20 ans, tout va bien. Mais je veux juste m'assurer que j'ai encore plus d'espacement ici. Alors 1234, fais avec ça. Alors voyons. 1234. Je peux même, par exemple, la position est d'être ici. Donc, il s'enroule autour ce dernier et j'ai encore juste un peu plus d'espace ici. Et ce que nous avons ici, c'est, voyons, 40 en bas 1234. Je pense que c'est bon. Alors faisons-le pour tous. Voyons voir, dans celui-ci, nous en retournons neuf ou c'est rapide avec celui-ci. Voyons voir que nous avons 40 ans. Donc, positionnons cela comme étant 40. Donc 1234. Et ce que nous avons fait pour en savoir plus, laissez-moi vérifier 40. Donc nous le faisons ici aussi. Là, vous l'avez. Je vais supprimer les éléments couleur de la carte parce que ces éléments dont nous n'avons plus besoin, parce que nous n'avons pas d'effet de vol stationnaire sur ces habitudes osées. Maintenant, ce que je peux faire est peut-être qu'on peut aussi donner cette carte 60 par le haut. Voyons comment ça va marcher. Donc 60, je pense que c'est le travail dans les dettes qui fonctionne encore mieux. Alors vérifions ceci et celui-ci à 63 d'ici. Donc même. Oui. Et ce que vous allez faire, c'est faire la même chose pour celui-ci. Voyons voir, on est à 40 ans. Réduire en taille à ici. Assurez-vous qu'on est à 40 ans. Donc 1234, sélectionnez ces 360 décalage ceci, et assurez-vous que c'est 40 Tao. Donc 1234, je vais supprimer les éléments, la couleur, les dettes de stylo. Fondamentalement, nous avons terminé dans ce service où vous pouvez faire un litre est situé ce, voir qu'il est 150 d'ici à la section suivante. Ensuite, apportez simplement la section suivante. Comme ça. Donc 123456789101234 Cinq et voir que vous êtes à 150. Vous pouvez évidemment le réduire si vous voulez, mais je vais juste le garder tel qu'il est pour l'instant. Je vais double-cliquer à l'intérieur. Assurez-vous que je suis positionné à la largeur juste ici. Assurez-vous que vous êtes une position pourrait textes où il doit être ainsi à la grille. À la grille aussi. Je vais positionner ça sur la grille, et je vais localiser ça pour être ici. Ça peut être en bas. Et nous allons frapper l'aperçu. Juste trié. Nous pouvons vérifier ce que vous avez fait jusqu'à présent. Donc, c'est bien. Ça a l'air vraiment sympa. La transition est vraiment bonne. Mais vous pouvez aussi faire est peut-être à l'intérieur d'ici dans l'état par défaut. Donc celui-là, assurez-vous que vous avez tout ça à 0. On ne les a pas parce qu'ils sont sous démasquage. Alors peut-être que nous pouvons les avoir juste pour avoir cet élément supplémentaire et spin supplémentaire pour eux. Alors vérifions-les ici. Nous sommes donc à l'état par défaut. Nous pouvons aller à notre masque nav articles journal, connexion, bouton, cliquez ici. Et je n'ai pas vraiment expliqué tous ces éléments. Laisse-moi faire rapidement de l'avant et te montrer ça. Donc, pour tous ces éléments de redimensionnement réactifs, où que vous les sélectionniez, vous pouvez utiliser ces contraintes de redimensionnement atomique, qui est essentiellement Auto tout fait sur auto et c'est ce que vous avez fait jusqu'à présent. Mais vous pouvez également aller de l'avant et choisir manuel si vous le souhaitez, veut redimensionner réactif est sélectionné. Donc, partout où vous apportez des modifications, vous pouvez voir où vous voulez que ces éléments soient corrigés. Pour qu'on puisse les fixer au sommet. Vous pouvez les fixer à gauche, tige fixe vers la droite, et les fixer au bas ou l'un de ces combinés. Donc tous ces ou juste deux ou trois ou quoi que ce soit, ce que cela signifie est fondamentalement, si je vous montre cela sur un vrai exemple, alors allons avant cela, rapidement prévisualiser ceci et voir à quoi cela ressemble. Donc maintenant, quand je clique dessus, vous ne pouvez pas les voir pour une raison quelconque. Je ne sais pas pourquoi. Revenons à l'état de l'onglet. Retourne à notre mosquée et montre-leur comme ça. Passons à la valeur par défaut. Cliquez une fois de plus, agrandissez-le. N. Maintenant, cette animation est juste un peu plus petite, plus lisse. Donc, ces comptes disparaissent vraiment bien. Et j'aime vraiment comment ça ressemble. Donc, une fois de plus, si je vous ramène ici, vous pouvez voir un redimensionnement responsive est sur auto pour cet onglet de navigation principal. Donc, quand je suis à l'échelle, si vous vous souvenez, ce logo reste épinglé à gauche. Ceci est taché épinglé à droite. Donc c'était le bouton dans ce cas. Et laissez-moi vous montrer dans ce cas. Maintenant, vous pouvez voir à quoi ça ressemble ici. Donc, quand je commence à faire défiler, désolé, administré, le redimensionnement va à l'état épinglé à cette taille. Vous pouvez donc voir que la position du logo ne change pas. Menu, la position de l'icône ne change pas. Donc, il reste essentiellement là où il était au milieu du dos. Mais si je clique sur manuel, je peux ajuster le afin que vous puissiez voir qu'il reste fixe à droite, fixé à gauche, et fixé au haut. Mais vous pouvez modifier tous ces éléments une fois de plus pour vous adapter à tout ce dont vous avez besoin pour votre propre projet. Alors. Xd va s'ajuster automatiquement une fois que vous êtes en auto, à la fois en manuel, vous pouvez jouer avec tous ces éléments. Vous pouvez également dire hauteur fixe. Donc, chaque fois que je les redimensionne, vous pouvez voir que la hauteur reste la même. Mais si je décoche cela et commence à redimensionner, dans certains cas, surtout si vous utilisez shift, va ajuster la hauteur aussi. Une fois de plus, jouez avec ces paramètres et voyez ce qui fonctionne le mieux pour vous. Habituellement, l'auto est votre meilleur pari. Mais dans la majorité des cas, vous devez apporter quelques changements comme nous l'avons fait jusqu'à présent avec essentiellement tous ces éléments. Assurez-vous donc d'apporter les modifications nécessaires à votre conception et à vos fins. Alors passons maintenant à autre chose. Et je n'ai pas vraiment exploré ce taux de change et voir si cela fonctionne correctement. Donc maintenant vous pouvez voir que nous n'avons pas de vol stationnaire et ces cartes sont vraiment agréables et faciles à lire. Maintenant à partir d'ici, vous pouvez commencer à faire défiler et vous ne pouvez toujours pas vérifier et cela assez, mais je pense que c'est suffisant parce que vous pouvez voir ces deux, ces deux chiffres à la fin. Donc comme ça, je pense que ça marche vraiment. Bien. Défilons vers le bas et voyons, à partir d'ici à cette section suivante, nous sommes toujours à 150, alors faisons-le aussi. Donc on va s'assurer que je suis à 150 ans comme ça. Et ce que je vais faire maintenant est de cliquer sur cette pile verticale. Dem. Je peux sauter à l'intérieur, donc on est toujours à 150 ans. Je peux agrandir mon image comme ça. Donc ça prend tout l'espace. Je peux aussi le réduire en taille juste un peu à quelque chose comme ça. Et vous pouvez le voir parce que nous sommes dans une pile, ces éléments se déplacent bien image radar, je peux double-cliquer pour le repositionner, peut-être le réorganiser un peu. Peut-être que nous pouvons zoomer sur leurs visages juste un peu pour que vous puissiez vraiment jouer avec la position de ces images. Et j'aime vraiment comment ça ressemble. Maintenant, la prochaine chose est de faire la même chose pour le texte. Donc je vais envelopper mon texte comme ça. Je vais m'assurer que c'est au centre de tout ça. Ensuite, je vais positionner MyText au milieu. Mais avant de le faire, assurez-vous que c'est bien aligné au centre. Et parce que maintenant nous avons beaucoup plus d'espace pour jouer avec elle. Positionnons d'abord cette 40 ville. Alors voyons, comme ça. C' est à 150, donc c'est bon. Nous pouvons maintenant positionner ça au centre, comme ça. Et ce que je peux faire, c'est évidemment m'assurer que cela se développe. Pour ce faire, je peux aller de ce bord à ce bord. Comme vous pouvez le voir, le texte s'ajuste vraiment bien. Et nous pouvons sélectionner ces trois, assurez-vous que nous sommes dans un centre. Et ce que nous pouvons également faire est de dissocier nos composants, s' assurer qu'ils sont alignés. Donc nous pouvons leur donner un groupe appelé ce méchant btn. Comme ça l'a toujours été. Assurez-vous qu'ils sont dans un centre comme ça. Et maintenant, assurez-vous que vous en avez encore 40 partout. Comme nous le faisons. Et enfin, cela devrait être 150, mais ce n'est pas si assurez-vous que vos morts fixes et les produits laitiers l'ont. Vous pouvez voir à quel point c'était facile. Ainsi, la prochaine fois que vous commencez à ajuster pour mobile, par exemple, commencez simplement à ajuster et vous pouvez voir comment tous ces éléments changent. Encore une fois, si vous n'aimez pas qu'ils changent comme ça, vous pouvez retourner au manuel et les fixer, par exemple, en haut et à gauche. Et maintenant commencer à changer et vous pouvez voir quelques éléments différents. Alors avançons maintenant et commençons avec les cartes et ci-dessous. Voyons voir, ils sont encore à 150. Donc c'est 150, c'est 150. Donc, en gardant cette consistance bien. Alors passons à autre chose et voyons où nous en sommes sur 33. Je ne sais pas pourquoi. Ça ne nous montre pas, mais c'est important. 150. Laissez-les aller rapidement de l'avant et positionnez-le ici. Parce que nous sommes dans une pile, cliquez ici. Et maintenant, nous pouvons aller de l'avant et les ajuster tous les deux en même temps. Alors il suffit d'élargir pour entendre. Et ce que je peux faire, c'est bouger mes boutons. Donc celui-ci, et celui-ci, je peux le déplacer là où je veux, mais je vais le garder là où il est. Mais je vais juste faire est de faire un clic droit sur le hover ou d'ajouter mon état par défaut, qui est celui-ci. Je n'aime pas que la position de la dette de Carlton ait changé. Alors voyons. Je peux y retourner. J'ai encore besoin de dégrouper et ce composant. Donc, faites un clic droit sur le composant de colle, contrôle G. Tout cela signifie btn tiroir voir, faire la même chose pour celui-ci. Donc, faites un clic droit sur le contrôle du composant grub g, comme ceci. Donc Dario il, si vous voulez ajuster cela pour ajouter un peu plus de texte à elle, vous pouvez. Ce que je peux faire, par exemple ici, c'est , comme je l'ai dit, je n'aime pas avoir un seul mot. Je ne pense pas que ça ait l'air professionnel mort. Vous pouvez également ajuster la largeur de ce texte et ainsi de suite et ainsi de suite. Je ne vais pas vraiment m'embêter avec ça, et je pense que ça a l'air très bien. Enfin, ce que nous allons tisser ici, c'est que nous sommes à 150 et en général, alors faisons-le. Assurez-vous qu'il est au centre. 123456789105. Donc là, vous l'avez. Encore une fois, si vous voulez, vous pouvez positionner ce bouton au centre si vous le souhaitez, mais je pense que cela fonctionne très bien de cette façon. Nous allons avoir le même espacement ici. Donc 150, je peux cliquer ici et on peut sauter à l'intérieur. Et maintenant, nous allons faire la même chose. Donc groupez ce groupe, ce groupe, ça, ça va être la carte numéro un. Ça va être la carte numéro deux. Ça va être la carte numéro trois. Et à l'intérieur de toutes ces cartes, nous pouvons cliquer avec le bouton droit sur le composant de groupe. Sur le composant de groupe, et enfin sur le composant de groupe. Ce que je vais faire ici, c'est que je vais garder tous ces éléments parce que nous n'avons aucune couleur ou quoi que ce soit d'autre. Et qui est lié à elle. Et enfin, élargissons ces cartes pour atteindre toute la largeur. Assurez-vous que vous êtes aligné sur la grille ici. Voyons voir. Et nous le sommes. Je vais donc les agrandir rapidement pour remplir cet espace. Et enfin, nous devons apporter des modifications à nos cartes. Mais vous voyez à quel point c'était facile et à quelle vitesse. Maintenant, vous pouvez changer toutes ces cartes en activant simplement cette pile et redimensionner réactif dans notre cas sur auto. Donc, nous allons maintenant sauter à l'intérieur dans éditer tous ces éléments. Et la première chose que je vais faire est de m'assurer que j'ai changé ce texte pour aller ici parce que nous avons assez d'espace évidemment, et je peux même le déplacer 40 en bas il pense que ça va paraître beaucoup mieux que le même pour celui-ci. Alors, décalez 1-2 et je ferai la même chose pour celui-là. Alors, décalez 12. Ce que je vais faire ensuite, c'est ajuster ces images pour m' assurer que je suis pleine largeur ici et que ça va bien. Je vais le faire en saint pour cette image. Alors je vais m'assurer que je me suis déplacé. Et peut-être un peux-tu l'agrandir juste un peu position dans juste un peu pour entendre. Je pense que c'est bon. Et enfin, faites la même chose pour l'image disque ici. Alors assurez-vous que je positionne ceci ici juste pour que vous puissiez voir qu'ils serrent la main et le positionnent juste là. Maintenant, la meilleure chose à faire est de positionner cette date. Laisse-moi choisir mes trois dates. Je ne peux pas parce qu'ils sont dans une pile, alors faisons-le comme ça. Assurez-vous que c'est 20 ville. Assurez-vous que c'est 20 ville, et assurez-vous que c'est 20. Comme Dat. Ensuite, nous allons travailler sur nos textes. Donc, je vais utiliser un distinguisher avait le plus de textes, qui est cette taille ici. Donc je vais profiter du champagne ou juste ici, et je vais cliquer sur mes textes développés pour entendre. Et peut-être qu'il peut couper ici. Et juste pour que nous ayons assez d'espace, donc c'est à 40 ans. Et voyons, dans ce peut être 40 maintenant, donc 1234. Encore une fois, on va le couper ici. Alors faisons la même chose pour les autres. Je vais copier ce texte. Déménagement a pris ici. Carte-le à ici. Assurez-vous que je suis à 40 ans. Assurez-vous que je suis à 40 ans aussi. Fermez celui-là. Et enfin, et faire la même chose pour le troisième. Donc, chaque fois que vous pouvez montrer plus d'informations parce que pourquoi pas ? Tu as encore cet espace. Alors pourquoi ne pas l'utiliser pour montrer cette information importante afin que les gens n' aient pas à la chercher ailleurs et perdre leur temps. Donc Dario, à l'heure actuelle, nous avons terminé des D. On peut les laisser comme ça. Voyons voir, c'est à 150, c'est 50, ce qui est très bien. Maintenant, allons de l'avant et passons à notre prochaine section. Voyons voir, nous sommes à 150 ici aussi. Alors choisissons ceci et ceci, assurez-vous que nous sommes à 150. Alors voyons, comme ça. La première chose que je vais faire est de réduire la largeur de ma bande info. Je vais le sélectionner et mon logo, assurez-vous qu'ils sont au centre. Et ce que je vais faire ensuite, c'est que je ne peux pas organiser ces éléments un peu différemment, mais je vais en fait dégrouper ces trois comme ça. Et parce que vous êtes sur votre tablette et que certaines des tablettes ont déjà les options pour passer un appel téléphonique, en particulier pour les tablettes 4G. Alors pourquoi ne pas utiliser la dette ? Alors supprimons tout ça. N, Par exemple, si vous voulez envoyer un e-mail, vous arrêtez juste et il vous emmène à votre client de messagerie. Si vous voulez localiser, vous devez marquer n'importe quelle chaussure de jour à un client de carte ou par exemple, Google Maps ou Apple Maps ou tout ce que vous utilisez. Alors positionnez ceci ici, positionnez notre carte juste ici. Et enfin, sélectionnez-le et un téléphone, assurez-vous qu'il est dans un centre comme la dette. Et vous pouvez évidemment les regrouper un peu si vous voulez. Donc, par exemple, vous pouvez déplacer ceci pour être ici et déplacer vers le dernier pour être ici si vous le souhaitez, si vous pensez que cela est plus logique, ce que vous pouvez également faire est de localiser le logo ici, situé ces trois ici. Mais juste pour des raisons de cohérence, je vais juste le laisser comme ça, ce qui nous laisse enfin avec le pied de page. Alors amenons le pied de page ici. Et ce que vous pouvez faire avec le pied de page est essentiellement développer comme nous l'avons fait avec le menu juste ici en haut. Donc avec celui-là. Ainsi, vous pouvez provoquer toutes les icônes et vous pouvez cliquer et développer sur le dessus. Ou ce que vous pouvez faire est de couche au barrage manière à ce qu'ils soient toujours facilement lisibles et compréhensibles. Alors faisons ça pour cette affaire. Et peut-être que je peux vous montrer comment vous pouvez le faire dans les étapes ultérieures. Je pense juste comment je peux le faire à ouais. Laissez-moi vous montrer que plus tard, une fois que nous arrivons à la version mobile afin que vous puissiez décider la version que vous voulez utiliser pour vous-même. Tout d'abord, commandez-les. Laissez-moi choisir de ne pas essayer comme ça. Assurez-vous que nous sommes dans une pile comme celle-ci 59. Conception réactif 4: Allons maintenant de l'avant et finissons notre design réactif avec la taille mobile. Alors appuyez sur le contrôle D, lubrifiez celui-ci aussi. Positionnons ça et vers le bas pour être juste ici, donc 70. Et nous allons le renommer. Double-cliquez ici. Réduisons la taille et va être très petits appareils. Alors, changeons rapidement cela aussi. Donc vous voyez que c'est 375. Alors changeons la dette. Donc 375. Changons cela à quatre colonnes de large. Donc, de huit à quatre. Et ce que nous allons faire est en fait d'utiliser ces paramètres. Donc pour 306120, donc pour 30 à 6120, S4 à début 6120, comme ça. Et enfin, allons de l'avant et adaptons tous nos éléments comme nous l'avons fait jusqu'à présent pour tous. Donc, ce que je vais faire est de sauter à l'intérieur et d'ajuster certaines de ces icônes et éléments. Déplacez-le ici pour plus d'affaires dans toute l'Europe. Et vous pouvez également envelopper le texte si vous le souhaitez, pour vous donner un peu plus d'espace. Je peux aussi aligner dans ces deux ici, peut-être 1234, juste pour que je puisse me donner un peu plus d'espace. Assurez-vous que c'est à 40 ans aussi. Et enfin, parce que nous sommes sur un mobile, nous pouvons simplement partir et celui-ci comme un pays sélectionné. Allons l'ajuster à ici. Et puis une fois l'utilisateur tampon, par exemple, le disque et le développer vers le bas et montrer qu'ils ont une option de plus. Donc je vais cacher ce pays et quand m'adapter à la hauteur. Et maintenant, nous avons une navigation beaucoup plus propre qu'avant. Donc, par exemple, je peux aligner ceci sur ici. Je peux déplacer ça ici si je veux, mais je vais le laisser comme il était à l'origine. Maintenant que c'est terminé, ce que nous pouvons faire, c'est travailler sur notre navigation. Pour que je puisse le positionner ici. Encore une fois, assurez-vous qu'il va à ici. Maintenant, je dois rendre mes logos plus petits. Donc, ce que je vais faire est d'importer l'un des logos que j'ai précédemment exportés. Laisse-moi le faire glisser de mon bureau ici. Ici, c'est. Je peux faire un contrôle x pour le copier comme ça. Ensuite, je peux sauter à l'intérieur de mon NAV principal. Je peux faire le contrôle V pour le coller, et je peux le positionner dans un endroit comme celui-ci. Et puis je peux supprimer mon ancien logo et utiliser ce logo parce que vous vous souvenez de ce qu'un parlé précédemment de ce logo, vous distraire et y apporter ces changements. Donc, je vais sélectionner ces deux, assurez-vous qu'il est au centre. Je vais étendre cela et peut-être de, voyons, peut-être que je peux le laisser ici pour l'instant juste pour que nous puissions voir à quoi ça ressemble. Et nous allons nous assurer que pour apporter également des changements à ces autres. Alors maintenant BG est là. Oui. Sautons à l'intérieur d'une messe. C' est cher. Ils sont là. C' est là aussi. Alors allons maintenant de l'avant et utiliser le robinet. Mais avant nous, ce que je voulais faire, c'est copier mon logo. Revenez à l'état de l'onglet. S' assure que je fais des changements comme celui-ci. Alors assure-toi qu'ils entendent. Ce que je veux aussi faire est en fait de ne pas, faisons réellement l'audit. Alors utilisons les Indes. Alors maintenant BG, Allons juste à eux pour entendre. Déplaçons notre point de robinet et notre logo à l'intérieur. Voyons où nous sommes dans l'état par défaut, donc 20. Ok, revenons à l'onglet. Voyons voir. Donc tout simplement plus avec 20, donc 12. Et nous allons aussi déplacer mon point de robinet ou tout simplement le laisser là. Je pense que ça n'a pas trop d'importance. Et puis je peux basé mon logo, désolé, que j'ai créé. Assurez-vous qu'il est au centre. Il l'est. Et maintenant, je peux aller de l'avant et apporter certains de ces changements. Alors voyons 2 maintenant la mosquée BG. Donc, je vais m'assurer que je change ça comme si nav articles ou oser, enregistrer son oser. Donc tout est là où il devrait être. Ce que je vais faire aussi est d'appuyer sur Control C pour ces éléments. Donc nav et login Control-C. Je vais cacher tout le reste. Retournez à mon état par défaut, sautez à l'intérieur de mon masque juste ici et vous contrôleriez V pour les positionner là. Je vais ensuite supprimer ceux-ci parce que j'ai réduit la taille d'entre eux avant. Je vais maintenant réduire l'opacité à 0 à ceux-ci. Et maintenant, nous allons le tester et voir à quoi ça ressemble. Donc, quand je l'ouvre, cliquez ici. Tout fonctionne comme il se doit avant et tout est beau et propre. Passons maintenant à la section héros. Maintenant qu'on a fini ça. Et pour la section héros elle-même, ce que je vais faire, c'est en fait, voyons si je place tout au centre. Voyons à quoi ça ressemble. Je suis juste inquiet pour le bouton de disque parce que je pense que c'est beaucoup trop livre. Donc, positionnons dat très rapidement pour entendre qu'il décide d'ici, sauter à l'intérieur et de 24, aller à D, 18. Comme ça, mais assurez-vous que c'est blanc. Je pense que ça marche bien. Ce que je peux aussi faire est de sauter à l'intérieur juste ici et de m'assurer que c'est, par exemple, 60 parce que nous n'avons plus besoin qu'il soit 70 ans. Je pense que 60, c'est très bien. Ensuite, une façon de faire est de réduire la taille de ce texte de 24 à, voyons, 18 ou peut-être 16, comme ça. Mais assurez-vous qu'il est décoloré. Et je vais l'envelopper, par exemple, comme ça. Et puis enfin pour les ordinateurs de bureau s'assure que c'est, voyons, 24 boulon. Et je pense que ça marche très bien. Allons-y et assurez-vous qu'il est au centre de notre aéroport. Assurez-vous que c'est, par exemple, à 41234 comme ça. Je pense que ça marche bien. Et maintenant, nous allons de l'avant et nous adaptons à d'autres éléments. Donc je vais sauter à l'intérieur de la position. Que le héros BG ici, sauter assigné ma position de masque, mon héros BG ici, puis sauter à l'intérieur de mon cercle, assurez-vous qu'il est en dette dans un centre comme celui-ci. Je peux même augmenter la hauteur de mon cercle. Comme ça ou quelque chose comme ça. Je pense que ça marche bien. Alors laisse-moi la position pourrait se rapprocher au centre. Assurez-vous qu'ils sont quelque part ici, par exemple, je maintiens Maj pour les ajuster. Donc quelque part ici, je pense que ça va bien marcher, alors je peux m'assurer qu'ils sont là, ce qui est très bien. Ensuite, je vais positionner peut héros BG aligner avec mon image comme ça ? Je ferai de même pour mon masque. Bien sûr, c'est dans la terreur comme ça. Donc, ça coupe à ce stade. Ensuite, ce que je vais faire est d'utiliser la forme de mon héros, positionner ici et de la réduire uniformément. Donc, en maintenant Shift, en le positionnant juste ici. Assurez-vous qu'il est en panne. Comme indice, et s'est assuré que mon image est en bas dans la même, donc tout semble correct. Ce que je peux faire ensuite, c'est évidemment sauter à l'intérieur et réduire la taille de mes héros parce que je n'ai pas besoin qu'il soit trop grand pour que je puisse le rendre plus petit que je ne peux le réorganiser. Alors sélectionnez-le et positionnez-le quelque part ici, par exemple, je pense que c'est bien. Et ce que nous pouvons aussi faire est d'utiliser nos éléments de héros. Assurez-vous qu'ils sont tous dans un centre comme celui-ci. Et puis nous pouvons sauter ici et réduire la taille des données aussi bien à quelque part ici, par exemple. Alors ce que je peux faire est d'utiliser ma croix, peut-être plus, nous adhérons à la position comme celle-ci. Utilisez mon cercle peut être plus juste ici et simplement utiliser ma position de ligne juste ici, par exemple, si nous pensons que c'est un peu trop, vous pouvez l'organiser comme ceci. Et voyons, Laura en baisse à cinq. Je pense que ça marche mieux. Et cela peut être un cinq aussi bien. Et vous pouvez laisser les actes tels qu'ils sont. Ou vous pouvez sauter à l'intérieur et réduire ces si vous voulez Séoul voir comme ça et comme ça. Donc 79479, quatre cent cinquante trois cinquante trois. C' est très bien. Tu peux le laisser comme ça. Allons maintenant passer à autre chose. La mort. Nous avons terminé ceci et parce que nous sommes sur une taille extrêmement petite de l'écran, je peux même réduire cela et le déplacer un peu vers le haut afin que je puisse tout sélectionner comme ça et aller comme ça. 1234, par exemple. Voyez où on est et on peut le regarder. Donc, je veux aligner ma navigation avec celle-ci. Donc 1234, vous pouvez le positionner là. Puis sautez à l'intérieur de votre héros position héros et VG pour être ici. Position, votre masque pour être ici aussi. Comme ça. Et là, vous l'avez. Nous avons terminé cette section maintenant, nous pouvons passer à la section suivante. Et évidemment c'est bien trop livre Soul. C' est l'Expérience 3624. Je pense que 24 fonctionne bien avec cette affaire. Assurez-vous que vous êtes au centre. Et puis ce que je vais faire, c'est m'assurer que j'utilise des distances plus petites. Donc 12345678, peut-être 80 fonctionne bien. Donc, là où il était 100, nous pouvons, par exemple, mettre à 80 et oublier cela 150. Donc, nous pouvons l'avoir à 80 zone où vous pouvez voir que nous sommes à 80 partout. Et maintenant, allons de l'avant et faisons quelques ajustements à ceux-ci. Donc, je vais cliquer sur eux, les ajuster tous en même temps, m' assurer que je suis aligné pour migrer ici. Je le suis. Donc la même chose ici. Et c'est très bien. Mais je vais faire ensuite est peut-être un rap MyText autour, comme un moyen direct de le faire comme ça. Alors ce que je peux faire est d'étendre ce texte un peu vers le bas, puis de le couper. Alors 12, j'aime comment ça ressemble. Voyons voir, nous sommes à 20 ici, donc 12, positionnez-le ici et peut-être coupez-le 23 lignes de texte, comme nous l'avons fait avant. Taylor, un compte qui répondra à vos besoins, va mettre fin à la phrase. Voyons voir, on peut avoir 40 ans, c'est bon. Donc trois lignes 20, et maintenant nous allons les décrire tous. Donc je vais faire la même chose pour celle-là. Alors 12, comme ça, vérifions ça. Nous sommes 20 en bas, C aligné sur deux. Donc trois lignes vont couper ici. Et voyons 40 vers le bas. C' est très bien. Passons maintenant à celui-ci. Tellement étendu comme celui-ci pour l'aligner à ici. E12 avec l'un de nos, voyons, peut concevoir comme ça. C' est à 48 dettes, très bien. Et maintenant cette section est terminée. Nous pouvons maintenant passer à la section suivante. Et vous pouvez voir que c'est 24. C' est 24, donc tout est toujours bien organisé. Nous sommes à 80 ans ici, donc nous allons être à 80 ans aussi. Donc 12345678. Voyons voir, il est là. Et ce que je vais faire pour ceux-ci, c'est évidemment apporter ces changements ici aussi. Mais voyons, peut-être que je peux les positionner l'un sur l'autre. Donc, c'est 24. C'est 24. Faisons en sorte qu'il soit là, à la position en bas. Et voyons, nous pouvons nous assurer qu'il est 16 par exemple. Voyons l'espacement. Donc un, ouais, donnons-lui un espacement de dix. Revenons avec ce texte. Nous sommes 16 heres, 1234, juste pour que nous puissions avoir 20 ans, nous assurons que nous sommes alignés, nous le sommes, et assurez-vous d'être 20 ici aussi. Donc 12 et 31 ans là-bas, ce qui est très bien. Et la dernière chose à faire est d'ajuster ça ici comme ça et le taux de change BG, apporter tout ça, à l'intérieur. Alors maintenant qu'un aperçu à succès, je peux vous montrer ce que je voulais dire. Donc, une fois de plus, cela fonctionne vraiment bien, montrant tout. Cela ressemble vraiment bien parce qu'il montre toutes ces informations. Je n'aime vraiment pas comment cette taxe se distingue. Donc, il suffit de voir quels sont les développeurs et votre client sur la copie, ce que vous pouvez changer sur votre copie parce que vous vouliez juste envelopper à certaines étapes. Donc c, qui sont les développeurs et les clients, est-il possible d'avoir une copie complètement différente ou le même juste dans un autre ordre donné ces autres tailles. Donc tu dois le semer avec ton client. Et enfin, vérifions ça. Comme vous pouvez le voir, il est vraiment bien et montre l'information comme il se doit. Passons maintenant à l'arrière et voyons ce que je peux faire ici. Alors peut-être que je peux sauter les devises d'affectation, positionner ceci ici. Et voyons si cela va apporter des changements supplémentaires à cela. Quand il a rampé vers le bas, tout est beau. Donc j'aime ça. Vous pouvez même aller de l'avant et réduire l'espace et donné plus et entre tous ces. Ainsi, par exemple, entre ici et ici, vous pouvez réduire l'espace, mais ne pas perdre trop de temps. Je suis juste content de ce que ça ressemble. Donc nous pouvons maintenant passer à autre chose. Nous pouvons réduire cet espacement à 80. Et je vais réduire ça encore plus comme ça. Ce que je vais faire ensuite est sauté image de côté est très bien. On peut juste le commander ici. Et voyons moi. Nous pouvons réduire l'outil de hauteur. Voir 300. J' aime ça. Je pense que c'est bon. Ensuite, nous allons sauter ici. Donc, nous sommes à 40 ans, ce qui est très bien. Ajustons nos textes. Donc celui-ci sera, voyons, 24. Mais qui chauve ? J' aime comment ça ressemble. C' est que nous allons arranger ça plus tard. Maintenant, pour ce texte, allons d'abord l'avant et l'étendre aux bords de notre grille comme ceci. Et comme ça. Ensuite, je vais utiliser 16. Je vais utiliser cette couleur. Je pense que ça a l'air bien. Ensuite, je vais ajuster mon bouton et utiliser le même que je l'ai fait précédemment. Donc, deux colonnes et voyons en fait miroir, nous pouvons copier celui-ci afin que nous ne sommes pas dérangés avec ces détails. Contrôle C peut sauter à l'intérieur d'ici, double-cliquez pour sauter à l'intérieur de Contrôle V. Donc je peux coller mes textes dans, supprimé ce bouton pour vous assurer que je suis à 40. Je suis à 40 ans. Je suis dans 40 ans avec celui-ci aussi. Et c'est votre section terminée. C' est fondamentalement ça. C'est tout ce que tu as à faire. Maintenant, enfin, positionné doit être à 80. C' est très bien. Si vous pensez que c'est encore trop grand, vous pouvez réduire la hauteur de votre image encore plus. Mais vérifions l'aperçu, voyons à quoi ça ressemble. Et vous pouvez également télécharger l'application pour iOS et Android. Donc, quel que soit l'appareil que vous utilisez connecté avec votre câble USB, et maintenant vous pouvez le lancer et l'afficher directement sur votre téléphone et voir à quoi il ressemble. Peut-être que je peux même le montrer plus tard juste pour que vous puissiez voir à quoi ça ressemble. Mais fondamentalement parce que vous concevez pour ces formulaires spécifiques, Il est préférable d'utiliser cette fonction Adobe XD pour les appareils mobiles réels. Donc, si vous utilisez, si vous concevez pour iOS, par exemple, pour iPhones, alors je vous ai vraiment recommandé de télécharger cela et de l'essayer si vous concevez pour Android, même chose, mais juste assurez-vous d'utiliser l'appareil qui possède ces propriétés. Donc c'est à 375. Donc, si vous avez un téléphone portable de 375 de largeur, alors il va très bien paraître. Sinon, ça va avoir l'air faussé et pas vraiment tout ce qui est pertinent. Alors faisons défiler tout le chemin vers le bas et voyons. Donc on a testé ça sur les groupes. Eh bien, on utilise ce bouton et je pense que ça marche bien. Peut-être juste une légère réduction de la hauteur, mais c'est à vous de décider ce que vous voulez en faire. Je suis allé positionner ceci ici et pour m'assurer qu'il est à 80, donc 12345678, je vais sauter tout de suite et le réduire comme ça. Je vais sauter et copier ce bouton qui contrôle C. Je vais entrer dans ma carte. Donc je vais aller ici, Control-V à basé sur mon nouveau bouton, supprimer mon ancien, supprimer mon ancien, et je suis allé à sauter juste ici basé sur le bouton de fumier. vrai, ça supprime mon ancien mélange. C' est au centre et il est 40, alors 1234, assurez-vous que c'est la même chose. Alors centre 1234. Et évidemment, vous pouvez augmenter l'espacement entre vos cartes étaient simplement planer ici. Je vais m'assurer que c'est dans 40 ans. C' est très bien. Ce que je vais faire ensuite, c'est apporter quelques modifications à ces textes. Donc je vais mettre ça comme ça que voir, nous sommes à 22 pour celui-là. Déplaçons à 20 exactement. Et pour faire la même chose pour celui-ci, donc 12. Et juste pour l'amour de la cohérence, on peut le déplacer comme ça. Ensuite, je pourrai étendre mes textes 20. Assurez-vous que je fais la même chose ici. Voyons voir, on est à 10 ans, on est à 20 ans ici. Et je peux le réduire à, voyons, quatre lignes de texte. Voyons ce que nous avons ici, 33, c'est bon. Et je peux faire la même chose pour cette scie agrandir dans plus de largeur ici. Assurez-vous que nous sommes à 21234 lignes de texte. Donc, je vais positionner mon point ici, supprimer ceci et nous sommes à 33 aussi. Ce que je n'aime pas dans ces cartes, c'est la hauteur de ces images. Donc, par exemple, je peux réduire la hauteur à quelque part par ici. Voyons donc 220. Je peux faire la même chose pour les désarmes. Donc, cette image peut être là où elle est. Ici, il est 220. Je suppose que je peux double-cliquer. C' est très bien. Et maintenant, nous avons un peu plus d'espace pour jouer avec nos éléments. Donc, tout se positionne ici. Alors 1234, assure-toi que tu es à 40 ans. Assurez-vous que vous êtes à 40 ans aussi. Cliquez sur celui-ci et assurez-vous que vous êtes au centre de votre bouton comme ça. Alors faites la même chose pour cela. Donc 1234. Assurez-vous que vous êtes à 40 ans ici aussi, comme papa. Voyons où nous en sommes avec celui-ci. Alors voyons 40. Laissez-moi vite aller de l'avant et vérifier ici. Donc j'ai 4040 ans parce que je perds facilement des choses facilement pour oublier les choses. Et voyons 1234 lignes de texte. Donc nous en sommes à 21234, je n'aime pas comment ça ressemble, alors voyons un état de la technique. Hmm, si le mot de la technologie allait juste là, mais ils yeux vraiment importants. Libération du roi. Et je pense que c'est quelque chose comme ça. Et voyons, nous pouvons positionner cela comme étant à 40. Donc 1234, mort prématurée. Et enfin, déplacez ça pour être au centre ici. Et laissez-moi faire une inspection rapide enfin. Donc d'ici à là, 404040, c'est au milieu, 404040, et c'est au milieu ici aussi. Et là, vous l'avez, nous avons terminé dans cette section aussi. Passons maintenant aux sections suivantes. Donc si je te ramène encore une fois, tu peux voir que c'est 24 volts. Nous allons donc appliquer ces mêmes paramètres à ce texte. Alors faites défiler tout le chemin vers le bas. Alors assurez-vous qu'il est au centre de notre aéroport et saute juste ici. Donc 24 audacieux comme ça. 12345678, comme mort. Une fois de plus, assurez-vous qu'il est au centre, il est la position distillateur gauche. Assurez-vous qu'il est 80. Ajustez tous ces éléments comme ça. Voyons voir, quelque chose ne va pas, juste ici, mais les milieux sont bien. Laisse-moi vérifier que les autres ne nous échappent pas. Donc on va arranger ça. Appelons ça à l'intérieur d'ici. Laisse-moi déplacer cette image vers le haut. morts de silane. D' accord. J' ai juste besoin de l'agrandir à l'intérieur. Donc, comme dans cette position il ici, ou encore mieux comme un disque. Donc on peut voir ces deux types comme alors je pense que MIT a l'air beaucoup mieux. Ce que je vais faire, c'est sauter à l'intérieur de mon texte, faire la même chose. Alors voyons. Nous sommes à 20 ici, 12 et plus c'est juste ici. Et les services bancaires dans le monde entier pour 2021. Et voyons si nous pouvons faire ici comme ça. Voyons où nous sommes ici. Nous sommes donc au 14 mai, recombinons à 20, ou varions à 40. Et nous pouvons être à 20 ans juste pour nous donner un peu plus d'espace. Nous sommes, voyons, 1234, comme ça, 25 en bas. Et je pense que ça a l'air bien. Ok, donc maintenant on peut vouloir plus celui-là. Je peux double-cliquer à l'intérieur d'un réorganisé mon image pour entendre. Je pense que c'est bon. Un que je vais faire avec celui-ci est d'ajuster mes textes. Donc 20 remis en retour. Nous pouvons les déplacer vers la communauté. Déplacez ça un peu vers le haut. Donc on est à 20 ans. Voyons ce qu'on a fait ici. Donc on est à 40 ans ici. Plus avec, à 20, nous pouvons plus riffs et 20. Je peux le faire. Alors voyons. Comme vous pouvez le voir, vous devez effectuer tous ces changements et ajustements. Donc c'est toi d'ici à là, j'ai 100 ans. D' ici à là, je suis à 100 ans, donc il doit rester là. Voyons donc, nous allons simplement déplacer ce travail communautaire et vers le bas comme ça, juste pour qu'il soit un peu plus lisible qu'avant. Ensuite, vous voyez que c'est à 20 heures. Alors commençons par l'étendre à ici. 12x, comme ça. Voyons voir, c'est à 20 ans. Nous avions trois lignes de texte ici. Donc, je vais simplement déplacer cela comme de la saleté et enfin en apprendre plus et était 40 comme ça. Donc 1234 comme ça. Et enfin, allons-y et finissons ce dernier. Voyons voir, l'espacement est tardif entre eux. Donc, vous pouvez augmenter cela en maintenant Shift et il va augmenter à ceci et à ce prochain comme ça. Et quand sauter à l'intérieur de mon image à chaque position pourrait image un peu à quelque chose comme ça. Voyons voir, la hauteur est 631. Est-ce la même chose que ça ? C' est le même que l'original ? Donc la hauteur est 631, mais c'est 287 à 87 et enfin à 87. Donc, c'est bien. Reprenons maintenant. Alors encore une fois, vérifions. C' est 212. Ça va rester là où il est. Et ça va être à 20 d'ici. Mais nous allons d'abord élargir et cela va prendre trois lignes de texte. Donc un bureau pour aimer ça, deux, et ça va être à 40 ans comme ça. Et nous l'avons là. Nous avons complété ces sections. Permettez-moi de vérifier rapidement ou OTU dans les lignes et c'est très bien. Passons maintenant à nos fiches d'information. Donc je vais m'assurer que c'est à 80 ans aussi. Donc 12345678. Et vous pouvez, par exemple, sauter à l'intérieur et les regrouper comme ça. Et puis ils vont à l'échelle pour décenter proportionnellement et regarder comme ils le devraient. J' aime comment ça ressemble. Donc nous pouvons maintenant passer à notre Fuller. Et quatre, c'est ce qui nous amène le plus ici. Donc, pour accélérer un peu plus ce processus, je vais copier et coller là où déjà fait dans mon design original. Juste pour te montrer ce que je voulais dire. Donc si méchant, sautez à l'intérieur d'ici et déplacez cette photo beauté jusqu'au bas. Juste pour vous montrer ces options aussi. Donc, vous pouvez alors décider lequel vous voulez créer ce disque plus bas. Ainsi, il peut rapidement sauter à l'intérieur de mon design original. Sautez à l'intérieur du pied de page. Et voyons voir. Ok, sélectionnez mon texte. Sélectionnez et ceux-ci. Je suis dat hit Control V. Donc je peux coller ce que j'ai déjà fait avec mon original. Laisse-moi sauter à l'intérieur d'ici. Alors tourney, voyons l'espacement entre eux. C'est à 40 ans. Alors sélectionnons-les tous sous 40. Et en gros, vous pouvez voir ce que j'ai fait ici. J' ai donc inclus cette flèche, qui est fondamentalement juste à des formes comme nous l'avons fait avec l'icône du menu combiné ensemble. Et vous pouvez également utiliser n'importe quelle conduite de retour sur investissement que vous voulez fondamentalement. Et ce que j'ai fait là-bas est positionné tous comme ça. Ainsi, vous pouvez voir que ces éléments de menu sont au-dessous de l'autre avec 40 entre eux. Donc, vous pouvez voir à quoi ça ressemble. Donc, tout est beau et propre. Tout est facile à défiler. N illisible. Du savon. Permettez-moi de faire passer ce texte à 40 ans également. Je peux positionner ça. Voyons où il est. Nous pouvons positionner cela comme 40. Comme ça, comme ça. Et je peux aussi fermer mon tableau d'art. Et je vais vous expliquer quel est le problème ici avec Adobe XD. Donc, fondamentalement, ce que vous devez montrer ici sont tous ces différents états. Donc, à partir de vos éléments de pied de page, donc tous ces éléments, cartes de prêt, investir Digital, d'autres liens, la chanson, vous devrez les regrouper comme ceci, contrôler G, et essentiellement créer un composant. Et ce que vous devrez faire est de créer des états de composants. Donc, vous aurez des alongs, des poumons fermés, ouverts. Poumons fermés va être un état par défaut et ouvert va être Unio State Cards, cartes par défaut ouvertes. Donc, et c'est l'ouverture. Une fois que vous commencez à montrer tous ces éléments joints, est-ce que cette flèche va retourner de toute évidence, et vous allez cacher tous ces éléments. Donc, semblez comme nous l'avons fait avec la navigation du menu en haut. Donc, fondamentalement, vous aurez besoin de créer. Donc, indiquez comme ceci pour chacun de vos éléments de menu de créations. Ainsi, par exemple, les comptes ici sur la gauche. Ceci est la flèche lorsque vous cliquez vers le bas va développer et afficher tous ces. Et le problème avec cela, pourquoi vous ne pouvez pas montrer cela dans XD est parce que nous n'avons toujours pas de tableaux d'art dynamiques. Nous avons des planches dynamiques. Ainsi, par exemple, vous pouvez voir que si je sélectionne mon aéroport en cliquant ici, vous pouvez voir que le redimensionnement responsive est désactivé. Si je l'allume, cette planche d'art entière peut facilement redimensionner de haut en bas. Mais ce qu'il ne peut pas faire, c'est qu'il ne peut pas traiter de plusieurs composants. Parce que, désolé, plusieurs états de composants, parce que vous allez avoir ceci comme composant. Donc, tous ces éléments de pied de page, juste le premier composant, puis pour chacun d'eux, vous devrez créer des états de composant. Ou le hub avait du sens comme nous l'avons fait tout au long de ce cours jusqu'à présent. Ainsi, Adobe XD ne peut toujours pas faire face à toutes ces dates de composants pour qu'il se développe vers le bas. Il ne peut pas faire face automatiquement, réajuster un état, mais il ne peut toujours pas faire face à plusieurs états. Donc, si nous voulons le montrer à votre client, vous pouvez, par exemple, garder tous ceux-ci ouverts ou tous ceux-ci fermés sauf pour le premier. Donc chacun peut faire face à cela et vous pouvez faire face à cela. Il suffit de le laisser réactif, redimensionner en cliquant ici pour être fixé en haut. Vous n'avez pas besoin de faire toutes ces autres. Donc tu peux faire ça. Mais assurez-vous juste que vous sélectionnez le notre conseil lui-même, comme ceci, activer le redimensionnement réactif. Et quand vous le faites, assurez-vous d'y apporter ces modifications. Donc c'est fondamentalement tout. Vous devez faire ces changements. Tu dois continuer à ressembler à ça. Je suis un peu désordonnée si je peux le dire moi-même. Donc vous ne pouvez pas faire dans cette belle petite cachette comme nous l'avons fait avec notre navigation principale juste ici. Tu dois toujours les garder en place comme ça. Donc c'est fondamentalement tout pour cette vidéo, et c'est essentiellement pour cette partie du cours. Nous avons maintenant terminé la conception de notre site web réactif. Encore une fois, si vous voulez vraiment vous encourager à faire exactement le même processus pour toutes ces autres pages. Et pour chaque page que vous faites jusqu'à ou de leur propre, parce que c'est votre travail en tant que concepteur, vous devez toujours faire toutes ces pages de conception de site Web réactif parce que dans le développeur et ne sait pas sur son propre ou ce que vous aviez dans votre tête et ce que vous voulez faire de ces pages. Parce que parfois ils peuvent comprendre, comme par exemple, si nous passons à cette page ici. Donc c'est assez évident, disons que nous, si nous incluons une pile comme celle-ci, nous pouvons leur montrer. Ça va être comme ça sur le responsive. Il va être comme ça sur un appareil de bureau et tester fondamentalement. Mais ils ne savent pas quoi faire avec ces pages, par exemple. Ils ne savent pas si tu veux que cette fille soit centrée. Si vous voulez qu'il soit de gauche à droite où il voulait du texte. Si vous voulez que le texte soit aligné à gauche, gagnez juste comme ça. Ou si vous voulez que ce texte soit positionné dans un centre comme celui-ci. Donc, vous avez encore à créer un design réactif pour les deux clients, vos coéquipiers, Si vous en avez un et les développeurs pour comprendre où vous voulez aller avec cette conception, ce que vous voulez créer, quels changements nous voulons comme écrans commencer à descendre et à descendre en taille. C' est pourquoi le design réactif est vraiment important. Mais juste en termes de taille du discours et de longueur du discours, j'ai expliqué tout ce que je sais essentiellement sur le design réactif, la sécheresse de ces pages. Et maintenant, je vais faire la même chose pour cette page pour la conception de tableau de bord. Je vais vous montrer comment nous pouvons adapter cela parce que, comme vous pouvez le voir, nous avons dans cette marge ici, qui est beaucoup plus grande que cette marge de droite. Donc, je vais utiliser fondamentalement ces mêmes paramètres, mais juste les modifier un peu à cause de ces marges pour vous montrer à quoi cette page va ressembler une fois que les utilisateurs commenceront à utiliser ce design responsive. Donc c'est ce qui arrive ensuite. Et je te verrai là-bas. 60. Conception réactif 5: Allons maintenant et commençons à travailler sur le design responsive de notre tableau de bord. Et fondamentalement, ce que nous allons faire est exactement le même processus que nous l'avons fait pour un site web. Mais la principale différence est la marge gauche qui va laisser pour notre navigation. Donc ce que je vais faire est en gros dupliquer ceci, notre position du conseil d'administration dans tous les sens. Et je vais essayer de l'aligner avec ce sont des planches, la plupart tenant simplement ma touche de changement comme ça. Et puis je vais sélectionner tous ces tableaux comme ça. Faites un obligatoire ou un contrôle D positionné ici. Et puis je sauterai à l'intérieur de mon mode de prototypage. Cliquez ici et appelez ceci, voyons tableau de bord qui répond à cela et voir où nous sommes. site web réactive conception de tableau de bord. Donc, c'est bien. Retournez à Design et apportons quelques modifications. Voyons donc, nous pouvons les appeler comme l'étaient à l'origine, parce que cela a de l'importance. Ceux-ci sont ajustés aux pointeurs pour nous, que nous allons utiliser pour réactivité et la conception réelle et allons juste en supprimer un de chacun d'eux. Et maintenant, ce que nous allons faire est d'expérimenter certaines de ces mises en page. Donc, ici, nous avons la colonne de 12165 de chaque côté. Et si je clique ici, alors on va appeler ça, voyons. Double-cliquez ici. Et design de tableau de bord. Et celui-ci, si grand bureau. Donc, si nous le regardons ici, je suppose un peu plus près, vous pouvez voir dans la dette que nous avons une marge à droite, qui est celle de 20 en marge à gauche, qui est celle-ci à 401 pixels. Mais si nous regardons ici, ce que nous avons est 165 à gauche et à droite. Donc, ce que nous pouvons réellement faire ici est, par exemple, et donner ce gauche 1200. Et vous pouvez voir qu'il a déjà commencé à adapter la position de Marika fait à 20 comme ça. Maintenant, nous en sommes à deux ou deux et nous voyons déjà des changements qui se produisent ici, ce qui est très bien, ce que nous allons faire de toute façon. Donc, ce que nous pouvons faire, c'est aller de l'avant. Voyons donc que nous en sommes à, disons 14401024. Donc peut-être parce que c'est 202 avec 20, voyons, nous allons le garder à 20 ici, alors ouvrons-les. Donc, le bon va avoir 20 ans, mais gardons cela à 180, par exemple. Voyez à quoi ressemblent les données. 2182, par exemple. On peut les positionner comme ça. Maintenant on peut, on voudra, et pour les tablettes, on n'a pas besoin de changer quoi que ce soit parce que sont les comprimés ? Nous allons toujours avoir notre navigation juste ici en haut. Ce qui va s'étendre vers le bas. Et pour ces petits appareils supplémentaires de situation occupée va être exactement le même, suggère que ces deux sont ceux dont vous avez à vous soucier si elle pense que ces colonnes sont trop larges ou la largeur de gouttière Indes sont trop larges. Vous pouvez évidemment jouer avec eux. Ainsi, par exemple, je peux abaisser la largeur de la gouttière à 20. Je peux augmenter la largeur de la colonne à 60 ou quoi que ce soit, mais c'est à vous de décider. Je vais juste utiliser ces options. Donc, tout d'abord, ce que je vais faire est essentiellement de répliquer ce que j'ai fait ici. Et nous avons fait la même chose avec ceux-ci. Et évidemment, dans l'espace. Et ce que vous pouvez faire, c'est quand vous commencez à faire du design responsive, comme nous l'avons fait ici, vous pouvez les organiser ici. Donc, de gauche à droite avec toutes ces pages, comme vous pouvez le voir en ce moment, nous avons 246 pages avec ces pages qui sont huit. Et vous pouvez positionner ces deux-là comme ça. Donc ils le sont, ils iront juste un peu à ici, ou vous pouvez les échanger et positionner certains d'entre eux juste ici sur le dessus. Et quand vous manquez d'espace, vous pouvez les positionner. Maintenant, évidemment, nous avons la conception du tableau de bord. Vous pouvez le déplacer vers la droite. Vous pouvez plus réactif à la droite aussi. Donc c'est vraiment à toi de décider. Cela va évidemment nous prendre beaucoup moins d'espace que cela parce que le contenu ne va pas tellement à ce site. Solides. Vous avez recommencé 1440. Alors commençons par ça. Alors vas-y, 1440. Et voyons ce que nous avons ici. Donc nous avons 123074. Essayons de changer ça. 3074. Voyons ce que nous avons en bas. Donc 220 en deux. Alors ouvrons la dose. Donc 2222 pour essayer la dette. Voyons une fois de plus. Donc 30-70 pour avoir tourné 7422 ou deux, et c'est fondamentalement tout. Alors vérifions une fois de plus juste pour s'en assurer. Donc 12307422 à 12307422 à N, c'est bon. Ce que je vais faire ensuite, c'est essentiellement faire les mêmes ajustements qu'auparavant. Donc, ce que je peux faire est de m'assurer que cela va ici, comme si je n'ai pas besoin de faire des changements à papa. En gros. Ce que je peux faire ensuite est fondamentalement ajusté à l'esprit de tout cela. Donc ce que je peux aussi faire, il cache mon texte comme ça. Donc, il me reste juste avec ces icônes et peut-être que c'est votre meilleur pari de toute façon. Ainsi, lorsque les gens passent au-dessus, par exemple, vous pouvez alors leur montrer cela. Alors faisons-le vite. Donc, pour le compte, je vais le cacher, les transactions, les prêts, et était à nouveau parce que je vais faire juste cette page. Je vous laisse le soin de vous. Si vous le souhaitez, vous pouvez explorer et créer des pages supplémentaires juste pour que vous puissiez vous entraîner un peu. Et maintenant, vous pouvez voir que nous avons un look beaucoup plus propre. Et si je l'agrandisse juste pour que vous puissiez voir à quoi ça ressemble. Nous avons maintenant un look extrêmement agréable et propre ici, tout en gardant tout cela intact. Donc, nous allons maintenant travailler sur ces autres éléments. Je vais donc sélectionner mon positionnement de texte ici. Il n'est pas nécessaire de changer quoi que ce soit. Je vais positionner le disque ici. Et voyons voir. Encore une fois, nous allons le garder à quatre colonnes de large. Et quand sauter ici. Encore une fois, à cause de nous avons ces cartes de tableau de bord. On peut évidemment s'adapter. Donc 1234, donc ça va être juste ici. Ce que nous pouvons faire avec la dose, c'est que je peux déplacer cette information, par exemple 12, et ensuite je peux mettre à l'échelle ma carte. Pour que je puisse sauter à l'intérieur où il est. C' est là. Je peux laisser voir, supprimer ou simplement cacher ceux-ci comme ça. Et maintenant, je peux simplement ajuster celui-ci, SOT 12 par exemple. Et puis je peux apporter des modifications à ces textes. Donc, ils sont à, voyons, 16. Nous n'avons pas de plus petite taille. Donc, ce que vous pouvez faire est en fait adapté, donc carte de débit. Et vous pouvez l'appeler, par exemple, jusqu'à 921 parce qu'il montre ici et vous savez ce que c'est fondamentalement. Maintenant que cela est terminé, travaillons sur la section suivante, qui est les sections d'aide et comorbide ici, je vais ajuster la largeur de ma carte comme ceci. Et je vais simplement sauter à l'intérieur et repositionner certains de ces éléments ou mettre ceci ici. Je vais mettre ceci ici par exemple. Et je pense qu'il ressemble ou écrire quelque chose comme ça. Vous pouvez également le réduire à huit ici peut-être juste pour vous donner un peu plus d'espace. Et donnons ceci et ceci sont 20. Donc 12. Juste pour rester avec celui-ci aussi. Nous pouvons faire de même pour ce texte. Donc sur deux, juste pour que tout soit cohérent et agréable. Pour elle ici avec C est la même hauteur, la même largeur, ce qui est très bien. C' est génial. Maintenant, allons de l'avant et travaillons sur ces autres éléments. Alors amenons toutes ces informations à l'intérieur. Donc si on saute à l'intérieur de notre original, on peut voir ça 1234567. Donc ça nous prend sept colonnes et ça nous prend 1-2-3-4-5. Donc, nous allons travailler là-dessus aussi. Voyons voir 12345. Alors réduisons ça à ça. Donc, nous allons rapidement cacher dans cette 1 première 12345. Donc il doit aller ici. Et nous avons encore beaucoup d'espace pour travailler avec nos éléments, donc je n'ai pas besoin d'apporter des changements. Fondamentalement, de Adobe a tout fait pour moi. Tout ce que je dois faire en ce moment, c'est plus que des disques à ici par exemple. Et vous pouvez voir que je n'ai pas vraiment eu à faire de changements ici du tout. Donc, vous pouvez, par exemple, laisser ça comme des morts. Et c'est fondamentalement la seule chose que je dois vraiment changer notre espacement d parce que vous pouvez voir ici qu'ils ne sont pas en ligne. Et je n'aime vraiment pas ça, donc je vais rapidement sauter à l'intérieur de tout ça. Voyons voir, et je peux les aligner. Donc, par exemple, je peux peut-être, voyons, sélectionner cette position ici, puis la déplacer, par exemple, 40 pixels. Ainsi, vous pouvez descendre, sélectionner les noms d'entreprise comme celui-ci, puis simplement les positionner jusqu'à ce que vous vous aligniez avec le texte 1234. Peut-être. Je pense que ça va bien marcher. Et puis faites la même chose pour ceux-ci. Donc ici, ici, ici, et là, voyons si on peut les aligner. On peut, ce qui est fantastique. Il l'a déplacé ici. 12, peut-être. Je pense que c'est bien et ça va bien marcher. Lorsque vous commencez à devenir de plus en plus petit, ce que vous pouvez faire est que vous pouvez laisser cela, vous pouvez laisser cela, vous pouvez laisser ceci. Mais pour cette utilisation simple icônes parce qu'ils montrent aux utilisateurs ce qu'ils ont sélectionné. Je vais donc le montrer dans la prochaine section du cours. Mais pour l'instant, pour cette vidéo, je pense que nous avons fini. Je pense que ça a l'air très bien. Laissez-moi faire l'avant-première finale pour vous les gars. Alors la laiterie Howard, je pense que ça a l'air vraiment sympa. Je pense que cela semble vraiment cohérent. Et cela montre vraiment ce que vous pouvez faire lorsque vous utilisez cette mise en page intelligente pour la recherche, par exemple. Donc je pense que ça a l'air sympa. Et la dernière chose que je vais changer, c'est ça juste ici. Je n'aime pas vraiment ça. Alors peut-être que je peux déplacer ce texte juste un peu ici. Par exemple. Ou peut-être que nous pouvons même couper ça. Laisse-moi te montrer ça. Donc, au lieu de 2020, je peux simplement montrer à pleurnicher comme ça pour me donner assez d'espace. De toute évidence, les gens vont savoir ce que c'est. Commençons donc par sélectionner ceux-ci. Donc, une fois de plus, utilisez ces noms d'entreprise. Comme si nous n'avons pas sélectionné et celui-ci. Alors faisons ça une fois de plus. Comme ça. Assurez-vous de les aligner comme ça. Il l'a positionné ici, 123, donc peut-être 30 pixels, c'est bon. Et maintenant tous ces éléments sont positionnés correctement et ils sont tous en ligne. Donc j'aime vraiment comment ça ressemble. Donc c'est fondamentalement tout pour cette vidéo. Dans la vidéo suivante, nous fermons tous ces dossiers pour garder les choses cohérentes. Dans la vidéo suivante, nous allons sauter et passer à la section de ces grands appareils. Je vais vous montrer comment nous pouvons adapter cela de façon évidente. Et peut-être devrions-nous aller un peu plus en hauteur, mais nous allons voir ce qui va se passer une fois que nous commencerons à réduire tout cela. Alors je te verrai là-bas. 61. Conception réactif 6: D' accord, passons maintenant à celui-ci. Donc une fois de plus, le contrôle D dupliqué, tout saut ici jusqu'au contrôle C supérieur, et sautant ici et supprimer d'ici sur le contrôle V, comme ça. Et maintenant, allons-y et adaptons un peu plus. Donc ce que je vais faire, c'est d'abord, nous allons réduire la taille, donc 10-24. Faisons ça d'abord. Donc 1024. Maintenant, la prochaine chose est de les adapter évidemment. Alors 123041, Bouddha a enseigné l'avocat 41. Et nous sommes 2182 là-bas. Donc c'est soit 21822082 et ça va être 3041. Voyons donc, 30412182304121 H2, 30412182. Derek, comment il est 1230, quarante et un, vingt et deux. C' est très bien. Donc, ce que nous pouvons faire ici, c'est essentiellement deux choses. Ce que vous pouvez faire est de positionner cette section d'aide en dessous ces sections et de faire tout ici la zone défilante, ce que je pense vraiment faire. Donc, fondamentalement, nous allons laisser ce texte haut et commençons par le haut. Je vais donc positionner cette URL ici. Je vais quitter la loi, alors que c'est le cas, je vais laisser ça tel quel. Je vais déplacer un peu ce texte ici. Alors ce que je vais faire est de positionner ceci ici, s' assure que AM à 46 large, comme ceci. Et je vais m'assurer que je fais la même chose ici. Je vais aussi déplacer ma carte et un peu, donc 12, juste pour nous donner un peu plus d'espace ici. Donc c'est bien. Eh bien, nous pouvons faire est de déplacer cette section d'aide. Donc je vais l'étendre jusqu'ici. Et voyons, assurez-vous que notre cercle est quelque chose comme, je ne sais pas, 300. Avec 300, on peut peut-être le positionner ici. Nous pouvons positionner, distribuer ici. Modifiez facilement vos informations. On peut déplacer ça ici. Nous pouvons positionner cela comme une ligne de texte. Mais d'abord, nous devons l'étendre à, voyons ici. Une ligne, c'est mort, Cotard. Et voyons, nous pouvons positionner ça ici. Voyons où nous sommes. On est à 20 ans, on est à 35 ans. Voyons donc 123420. On peut en faire 20 ici, donc 121234. Donc on peut couper à ce stade. Alors faisons ça. Je vais m'assurer de sélectionner ces deux-là. Il l'a positionné comme ça. Et puis voyons, cette masse peut rester là où elle est. Je peux déplacer ce soi-disant ici. Je peux déplacer ça ici, et c'est fondamentalement tout. Pour cette section particulière. C' est très bien. Ce que je vais faire, c'est passer à ces autres sections. Alors cachons ça. Vos cartes. Qu' est-ce que cet onglet Aide ? Ou une raison déplacée vers le haut verrait pourquoi il coupe. Donc l'écart de masse de l'élément, nous devons nous adapter dans la mosquée pour entendre et c'est bon. Maintenant, c'est bon. Et laissez-moi organiser un peu les choses. Donc, ici, nous avons le top nav sur la morbide vers le haut sur la barre latérale Bruce Lee va aller après ça. Le texte va aller après ça. Tu auras notre compte principal après la mort, tes cartes après ça. Maintenant vient les onglets. Nous allons avoir une dernière transaction et toutes les dépenses. Cachons rapidement toutes les dépenses. Dernières transactions que je peux montrer des points. Voyons où nous sommes ici. Donc nous sommes à 40 mesure. Nous sommes à 40 ans ici aussi. Donc 1234, je vais avoir 40 ans ici aussi. Est-ce que je vais faire ça ? Assurez-vous que je suis aligné à gauche, assurez-vous d'étendre ceci à ici. Dan, ce que je vais faire est de sauter rapidement à l'intérieur et de les organiser un peu mieux. Parce que maintenant j'ai beaucoup plus d'espace pour travailler. Voyons donc, commençons par nos tags. Comme ça. Étiquette alimentaire. Assurez-vous que vous êtes aligné comme ça. n'y a pas besoin d'espacement. Donc, nous allons le laisser comme R. Sélectionnez tous ces comme ça. Et je n'ai pas choisi le numéro cinq pour une raison quelconque. Donc je dois le faire encore une fois. Alors laissez-moi sélectionner ma nourriture, services publics et fermer par la saleté, les alignés. Maintenant, c'est bon. Revenons maintenant aux noms de marque. Mon père. Maintenant, c'est bon. Et comme je l'ai dit, je n'ajusterai rien. Je vais tout laisser tel qu'il est. Et enfin, je vais cacher ça, ramener ça comme ça. Positionnez-le ici. Assurez-vous qu'il s'étend jusqu'ici. Je vais sauter ici. Assurez-vous que tous ces éléments sont sélectionnés comme ceci. Et pour économiser un peu d'espace, ce que je vais faire est de les positionner l'un à côté de l'autre. Alors passons d'un inconnu, nous devons regarder les yeux parce que les mosquées sont un cerf. C, comme ça, 1234 par exemple. Et puis je vais le positionner ici. Permettez-moi d'apporter toute cette année. Cachez mon onglet santé juste pour que je puisse le voir un peu mieux. Donc ce qu'on peut faire, c'est déplacer tout ça pour entendre comme si on est div, et c'est tout. Et au lieu de celui-ci, il a déplacé un graphique. Comme si nous avons besoin d'un paiement de voiture aussi. 40, donc 1234 comme ça. Et je vais juste organiser ça un peu mieux. Donc, par exemple, quelque chose comme induire devrait fonctionner, mensuel devrait fonctionner aussi bien. Et c'est là. Là, nous l'avons. Peut-être que nous pouvons même positionner ne pour battre 20. Voyons où nous en sommes au sommet. Oui, positionnons tout pour être 20, donc deux. Et c'est fondamentalement tout. Vous pouvez vous assurer que vous avez sélectionné cette option. Ou nous pouvons positionner tout ça au centre. C' est vraiment à vous de décider et ce que vous voulez en faire. Alors faisons vraiment ça. Faisons ça comme ça. Et nous allons nous assurer que c'est au centre. Voyons comme lâche. Donc, au centre de notre cercle, et maintenant nous pouvons simplement fermer notre arrière-plan BG. Alors voyons, nous sommes à quelque chose comme, je ne sais pas. Voyons le contrôle D pour que je puisse le dupliquer. Ou exemple pour en entendre un de plus. Donc 37, Watson, je peux déplacer ça ici comme ça et m'assurer que je ferme mon original à ce nouveau. Je l'enlève. Et nous l'avons là. Nos dépenses sont terminées. Alors ramène pour aider à oser ramener les dernières transactions. Et ce que je vais faire, c'est de toute évidence placer tout ça dans un groupe. Donc, chaque élément de contenu que vous voyez ici est à l'intérieur d'un groupe. Appelez ça du contenu comme ça. Et ce que je vais faire, c'est passer à toutes les dépenses jusqu'au bout comme ça. Donc c'est positionnez-le et voyons où nous sommes. Donc 1234, comme ça. Et la vache laitière, si vous voulez, vous pouvez créer une pile. Et puis vous pouvez changer ces éléments. Qui peut positionner ça ici et ça ici si vous le voulez. Je ne vais pas faire de dette. Donc, vous pouvez utiliser une pile, mais ce que je veux réellement utiliser est un défilement vertical. Donc, comme vous pouvez le voir, c'est assez intelligent pour le couper juste là. Donc, si je clique pour prévisualiser, et c'est ce que nous allons obtenir. Vous pouvez donc évidemment cliquer sur ces éléments de menu et cette hauteur reste évidemment la même. Mais maintenant, vous pouvez commencer à faire défiler cette zone et vous pouvez voir très bien qu'il coupe ici, ce qui est tout simplement fantastique si nous avons utilisé la version animée de ceci. Donc, il peut effectivement faire défiler à l'intérieur de ce groupe aussi, à l'intérieur du groupe scrollable. Ainsi, vous pouvez avoir des groupes à l'intérieur des groupes qui défilent. Mais pour ce besoin particulier et ce but, je pense que cela semble vraiment fantastique. Vous pouvez également étendre cela afin que vous n'ayez pas ce pépin bizarre une fois que vous commencez à faire défiler. Donc, vous pouvez voir la couleur juste ici au lieu de juste ici. Mais en fait, ça ne vous dérange pas parce que nous avons ce panneau haut juste ici qui reste le même. Donc j'aime vraiment comment ça se passe. Et c'est fondamentalement tout pour cette vidéo. Dans la vidéo suivante, nous allons commencer avec la version tablette. Et fondamentalement, vous pouvez commencer déjà vu où cela va. Nous allons juste aligner tous ces éléments sur notre grille. Et je vais vous montrer comment vous pouvez créer une navigation tapissable et où vous pouvez la mettre. Alors je te verrai là-bas. 62. Conception réactif 7: Commençons maintenant à travailler sur une version tablette. Encore une fois, je vais rapidement et dupliquer cela. Alors Control D. Et donnons un nom à ça. Donc double-cliquez à l'intérieur. Désolé. Je vais simplement supprimer et cette information contrôle V pour le coller comme ça. Et voyons voir. Donc, nous sommes à 76 8. Alors allons-y et 768. On est à huit colonnes, comme Dat. Donc huit colonnes. Et voyons ce que nous avons ici. Donc, d'abord, nous avons 296042 pour les deux. Donc maintenant, nous n'avons pas besoin de ça. Laissez-moi me rappeler une fois de plus. Donc 296042. Donc deux en cours d'exécution sur 6042. C' est très bien. Donc troupeau laitier. Et ce que je vais faire ici, c'est en fait utiliser les mêmes options que celles que j'ai en haut. Alors laissez-moi ajuster rapidement mon top maintenant de la même façon. Donc mon père, ce que je peux faire, c'est peut-être charger ce gars ici. Je peux peut-être montrer tout ça ici. Voyons ce que nous pouvons faire de notre navigation. Fondamentalement, ce que je voulais faire est étendu jusqu'au bas, puis montrer toutes ces informations à partir de la barre latérale elle-même. Alors rapidement, passons rapidement à la barre latérale à l'intérieur comme ça. Et voyons ce qu'on peut faire. Nous pouvons peut-être utiliser ce que nous utilisons ici. Donc, je peux double-cliquer ici, contrôler C. Donc je peux utiliser cette icône de menu exacte. Sautez ici, contrôle v, positionnez-le au centre ici, assure que nous sommes sur la gauche, désolé, aligné à droite ici. habitude laitière. Et maintenant, nous allons travailler sur notre navigation. Certains toucheraient le contrôle D. Je vais étendre ceci et l'arrière-plan un. Donc tout le chemin vers le bas comme ça. Et puis je sauterai à l'intérieur de ma barre latérale et vous laisserai charger tous mes articles sous vide. Alors appuyez sur 0. Désolé, je le cache ici, donc je vais les montrer ici. Il suffit de cliquer sur ces icônes du globe oculaire, ce qui est très bien. Comme dans la dette. Ce que je vais aussi faire, c'est que nous allons laisser ça tel quel. Nous allons supprimer le sélecteur parce que nous n'en avons pas besoin pour le moment pour cet écran particulier. Donc, nous allons supprimer le sélecteur. Et je vais aussi changer quelques couleurs de ces articles. Il suffit de laisser ce premier en place parce que nous voulons montrer que nous sommes sur un tableau de bord après tout, mais il comprend juste un peu plus de couleurs sombres à ces autres, juste pour que nous puissions les voir un peu mieux. Alors, allons-y et faisons-le. Je vais simplement cliquer sur chacun d'eux. Et j'appliquerai cette couleur. Juste pour que nous puissions les voir un peu mieux parce que vous pouvez voir, surtout ici avec cette application aidée, vous ne pouvez pas les voir vraiment tout aussi bien. Donc, je vais simplement l'appliquer dans cette couleur à eux. Comme ça. Et pour montrer que cela est sélectionné, je vais appliquer cette couleur juste pour différencier un peu ajusté afin que vous puissiez les voir un peu mieux. Donc, nous l'avons là. C'est une dette. Ce que je vais faire ensuite, c'est bouger ici ou là, par exemple. Et c, je peux le mettre à l'échelle avec mes propres avatars. Voyons voir ça. 1234, par exemple. Et je peux le déplacer et la barre latérale jusqu'au bas. Voyons voir, 1234 morts. Et je peux évidemment déplacer ma déconnexion vers 1234. Donc comme ça, j'aime comment ça ressemble. Enfin déplacé Michael J. Egos, assurez-vous qu'il est aligné à gauche, assurez-vous qu'il est centré, droit pour oser. Et les troupeaux laitiers. Je pense que ça a vraiment l'air bien. Agrandissons pour voir à quoi ça ressemble, et c'est bon. Qu' est-ce qu'on va faire, c'est exactement la même chose que nous l'avons fait auparavant. Donc, nous allons créer un point d'appui juste ici où notre icône de menu principal nouvelles. Alors appelons-le ce point. Menu principal, point de tabulation. Comme ça. Positionnez-le sous le menu principal ou supprimez la bordure et la couleur, et c'est tout. Et puis ce que je vais faire, c'est dire en gros comme je l'ai fait auparavant. Donc je vais dupliquer celui-ci. Contrôle D, je vais le positionner au-dessus de tout ça. Donc comme ça. C' est très bien. Alors voyons. Je peux le déplacer un peu aussi ici. Ou non, laissons tout le chemin comme ça. Et puis sélectionnez-les tous comme ceci. Voyons où nous sommes. C' est ça. Hit Shift Control M, donc je peux créer un masque comme la dette. Et je vais déplacer tout cela ici parce que c'est mon top nav VG après tous les indices ce fond complètement. Finalement, mettons-nous cette mosquée à l'épreuve, et mettons-en question ici. C' est très bien. Eh bien, évoquons ça aussi. Et c'est très bien. Ou réduisez sa visibilité à cela. Et maintenant, allons de l'avant et jouons avec notre contenu. Donc, je peux cliquer ici pour le supprimer d'une section de disque. Donc, je vais toujours appeler ça du contenu, donc c'est bon. Mais je peux aussi faire est d'étendre cela jusqu'ici pour que je puisse voir ce que je fais. Et ce que je peux faire est fondamentalement d'ajuster tous ces éléments pour qu'on puisse les mettre à l'intérieur de la pile. Mettez-les sur le dessus de l'autre d'un élargir ce pour aller à ici. Bien que élargi cela pour aller à ici aussi bien. Je vais déplacer ma carte pour entendre, par exemple, voir où nous sommes. Petit. 23, voyons 1234, parce que évidemment nous avons beaucoup plus d'espace maintenant. Je peux les positionner pour qu'elles soient centrées et je peux m'assurer qu'elles soient centrées tard, Dennis. Et je peux les positionner pour entendre. Et maintenant ils ont l'air un peu différents. Je peux rapprocher le texte. Même liquide à la pagination. Alors voyons 1234 peut-être quelque part comme oser. Je n'aime pas vraiment cette section. Alors peut-être que nous pouvons aller voir pour, avec celui-ci, pour, avec celui-ci. Voyons à quoi ça ressemblera. Donc pour la position ou la carte à ici. Voyons voir, peut-être pourrions-nous apporter quelques modifications à ce texte. Donc comme ça, 1212. Et copions cette carte jusqu'à ce que la positionne ici sur, voyons, 20 distend. Je vais mettre ma carte au centre ou vous pouvez faire est de s'assurer que ceci et ceci sont au centre. C' est 20 en bas. Assurez-vous qu'il est au centre aussi. Alors positionnons-le ici. Oui, je vais étendre mes cartes BGN un peu vers le bas. Positionnez ici. Et voyons voir. Donc, ici, on est à 20 ans. Et voyons, nous pouvons donner ça pour être ici. Alors c'est pour ça. Et enfin, je vais positionner ça ici. Voyons voir. Donc, je vais vraiment besoin de les déplacer en dehors de ma pile. Donc je vais enlever cette pile. Et puis o position disque ici, désolé, nous sommes toujours dans une pile donc pour le contenu. Donc je vais le laisser tout estab pour ça. Et plus tard, peut-être pourrions-nous le ramener. Donc, j'ose, je vais dégrouper toutes ces positions fait ici, comme ça. Parce qu'en fait, nous n'avons pas vraiment besoin d'un point de coupure. Nous pouvons simplement positionner ces articles là où vous devriez être de toute façon. Donc, comme les morts, nous pouvons apporter tout ça pour décréter. Et votre, voyons, comme ça. D' accord ? Et je peux mettre à l'échelle la largeur de mon texte, peut-être sur les bords, quelque chose comme ça. Ramenant ça Gleick. Alors assurez-vous que cela est centré. Assurez-vous que vous le positionnez ici. Donc, 12. Et c'est au centre de notre BAG, comme ça. Positionnez-le dans un peu. Voir comme ça. Et c'est très bien. Positionnez notre pagination au centre. Voyons ce qu'on avait ici. Donc, on a eu 28 en bas. Donc c'est trop 12312, donc 28, donc c'est exactement la même position que celle-ci. Mettons ça un peu. Donc 1234 peut-être, et je peux rapidement aller de l'avant et organiser ces éléments. Voyons où il est. Alors, cercle. Et on peut même enlever ce masque parce qu'on n'en a plus besoin. Peut-être qu'on peut juste avoir ces trois remplissant notre espace parce que je pense vraiment que c'est trop. Parfois, avec ces éléments, vous pouvez si vous le voulez, mais je pense que ça va marcher très bien comme ça. Donc on est à 30 ans. Je vais les déplacer jusqu'à dix comme ça. Et voyons, ça va être 40 comme ça. Je vais les positionner comme ça. Donc, tout est bien en train de regarder dedans. Nous avons juste besoin de réorganiser les choses juste un peu. Donc, 35 alertes positionnaient celles-ci pour être, voyons, 20. Comme ça. Et voyons que je peux maintenant sauter et apporter des changements à tout ça. Alors commençons par les chiffres en fait. Donc je peux mettre les chiffres à 20 aussi, jusqu'à ici. Donc j'aime ça 12. Alors ce que je peux faire est d'aligner mes balises comme ceci. Assurez-vous qu'ils sont alignés et qu'ils peuvent les positionner. Par exemple, C 123, c'est très bien. Maintenant, alignons nos entreprises et voyons où elles peuvent aller. Moi Devraient-ils être alignés et voir, par exemple, 123, c'est bon. Et je pense qu'il y a beaucoup de marge de respiration, donc tout va bien. Une chose de plus est avec la charge plus. Donc, en fait, réorganisez-le un peu. Donc icône flèche et voir 20 pixels et assurez-vous qu'il est au centre comme ceci. Alors maintenant, c'est bon. Et je veux juste vérifier si j'ai fait une erreur sur la précédente aussi. Là où il est, le voilà. On fait ça. Alors regarde ce noeud, c'est bon. Vous pouvez voir que la flèche est juste ici. Mais j'ai fait une erreur ici. Alors organisons ça un peu plus tard aussi. C' est très bien. Comme ça et assurez-vous qu'il est au centre comme ça. Direction. Tellement connu que c'est terminé. Revenons maintenant à la section disque. Et enfin, nous allons travailler sur ce dernier. Donc on est à 40 ans. Comme ça. Et je vais m'adapter à notre nouvelle disposition de grille comme celle-ci. Je peux les laisser comme ça. Ou je peux avoir ma propre mise en page séparée, ce que je vais faire en fait. Voyons voir, nous sommes à 20 ans. Nous pouvons maintenant organiser D pour être comme ça. Alors 20, voyons les lambdas. Donc 20, je peux étendre ça pour descendre. Ça peut être à 20 I dat. Et voyons où nous sommes ici. Donc 22, sélectionnons tous ces, 1-2. Je vais poser ça 12, donc 20, et je peux tout ramener. Alors ce que je peux faire, c'est m'assurer que c'est centré. Je peux sélectionner tous ces éléments, assurer qu'ils sont alignés à gauche. Elles sont centrées au sein du cercle et de l'œuvre d'art elle-même. Peut-être pour entendre, et c'est fondamentalement tout. Nous avons maintenant terminé ceci, l'état de notre conception un peu plus avec un peu comme ça. Et c'est fondamentalement tout pour la version tablette. Je vais juste couper ce point à quelque part par ici. Voyons 1234. Donc c'est parfait. Et ce que nous pouvons faire est de frapper aperçu juste pour voir où nous sommes à cause de la turbulence, vous pouvez évidemment faire défiler vers le bas. Donc, je pense que cette information semble beaucoup plus propre et beaucoup mieux organisée comme ça. Donc peut-être que nous pouvons même supprimer cette information parce qu'elle montre la validation ici. Donc ça va juste dire tes cartes et je pense que ça va aller. C' est aussi très bien. Ça a l'air super. Alors passons vite à ça. Donc, il obtient cette information et c'est bon. Je vais le dégrouper parce que nous n'en avons plus besoin en tant que texte et groupe. Et c'est fondamentalement la seule chose qu'il nous reste à faire maintenant est de créer cette navigation. Alors faisons ça. Je peux, par exemple, appeler ce haut de tablettes maintenant. Ou je peux même l'appeler mobile top lab, cependant, comme ça. Et voyons ce qu'on peut faire avec ça. Pour que nous puissions appuyer sur la touche Contrôle. On peut aller à l'état onglet. A l'intérieur de cet état supérieur, nous allons agrandir notre mosquée là où elle est, la voici. Donc je vais l'étendre jusqu'à ce point de coupure ici. Pour que je puisse zoomer un peu plus près. Comme ça. Tout va bien. Je vais aussi faire la même chose pour ce top maintenant Vg, donc ça va être à 100. Ça va aller jusqu'ici comme ça. Et enfin, notre icône de menu principal sera dans son état de tabulation. Donc, il a des dettes. Maintenant, allons de l'avant et rapidement prototylographier et voir ce que nous avons jusqu'à présent. Donc, je vais localiser mon menu principal onglet point d'un clic sur les annonces. Je choisirai Auto Animate. Choisissez l'état est dans 0.6 secondes parce que c'est ce que nous utilisons la fois précédente. Et puis je vais aller à l'état de l'onglet, ouvrir le clic principal Minitab point. Je vais passer à l'état par défaut et voyons rapidement ce que nous avons. Revenons donc à notre état par défaut. sur l'aperçu, agrandissez ce clic ici. Entrez, nous l'avons. Nous avons cette belle petite animation nous montrant tout ce que nous avons besoin de voir. Et je pense vraiment que ça a l'air bien parce que dans les tableaux de bord nous montrent qu'il est sélectionné. Tous ces éléments sont grisés. Tu vois que c'est toi, Michael Jacobs. Vous pouvez même la position décrite ici si vous le souhaitez. Mais je pense que c'est bon. Nous avons encore cette belle et émission parce que nous avons utilisé la même icône. Je pense que ça a l'air super. Et j'ai vraiment pris Delta, ce design est sorti pour être vraiment sympa et vraiment heureux avec elle. Et c'est fondamentalement tout pour cette vidéo. Dans la vidéo suivante, dans la dernière vidéo sur le design responsive, nous allons travailler sur la taille du mobile. Et fondamentalement, ce que nous allons faire est d'utiliser exactement les mêmes paramètres. On va juste faire quelques changements. Donc, vous pouvez voir à quoi ça va ressembler. Alors je te verrai là-bas. 63. Conception réactif 8: Allons maintenant de l'avant et finissons notre design réactif pour le tableau de bord. Et je veux m'excuser à l'avance pour les employés en arrière-plan, mais je ne peux rien faire à ce sujet est juste quelques voisins bruyants connaissant un peu de travail. Donc la dernière chose que nous devons faire est une fois de plus cliquer ici, contrôler D pour dupliquer cette fléchette, double-cliquez ici. Copiez ce texte. Je vais sauter ici et double-cliquer et je vais supprimer toutes ces informations et contrôler simplement V pour coller dans ce texte. Encore une fois, maintenant que les dettes sont terminées, ce que nous devons faire est évidemment de réduire la taille de notre conseil d'administration à décider ou 375. Et nous allons le faire rapidement ajoute ou 375 comme ça. Nous allons utiliser pour des colonnes comme ça. Et voyons, nous avons 306120, alors utilisons ces valeurs. Donc 306120, refaisons-le au début de 6122. Et là, vous l'avez. Je ne sais vraiment pas pourquoi Adobe XD fait ce poids garder Y continue d'élever ces Berlioz, pourquoi nous voulons changer la première fois, mais il fait ce tapis complexe en arrière-plan. Peut-être pour cette raison, il ne le fera pas. Allons maintenant de l'avant et traitons tout d'abord de notre navigation. Donc, pour ce faire, je vais devoir baisser tout ça. Parce que si je commence à baisser mon logo, mais vous pouvez voir à quoi ça ressemble. Donc, je vais aller de l'avant et glisser-déposer mon logo à l'intérieur comme ça. Et je vais le positionner ici. Donc c'est mon logo PNG et je fais fondamentalement la même chose que je l'ai fait précédemment quand je vous montre ça. Oui. Précédemment. Alors allons-y et cachons-nous. Et cela peut être abaissé à quelque chose comme ça peut-être. Et ce que je peux aussi faire est de sauter à l'intérieur de notre navigation mobile juste ici. Et je peux copier mon logo de cure, et je peux copier ça de héros. Mais parce que nous avons déjà créé ça ici, ne nous embêtons pas. Prenons juste le logo parce que c'est le même. Donc je vais sauter ici. Je vais utiliser le logo et voyons l'icône du menu principal, contrôle soo. Retournons à ici. Sautez à l'intérieur de Control V. Je les mettrai en place comme ça. Je vais supprimer celui-ci. Je vais supprimer mon icône de menu principal, Menu principal, point d'appui. Voyons où il est. Alors positionnons-le ici. Par exemple. Vérifions la couleur juste pour que je puisse cliquer dessus par dette et je vais l'augmenter à quelque chose comme ça. Je pense que c'est bon. Et voyons. Top maintenant BG est ce point unique. Maintenant, BG est la discipline solide apporter les deux dans comme ça. Positionnons notre logo et notre icône de navigation, quelque chose comme ça. Et je peux simplement sélectionner ces deux-là. Sélectionnez celui-ci et assurez-vous qu'ils sont tous au centre. Comme ça. Je vais m'assurer que mon icône de menu est alignée avec mon logo est aligné, ce qui est. Et c'est très bien. Dot maintenant BG et nous allons maintenant traiter avec masque de goudron. Alors parle maintenant BG, je vais l'apporter dans tout le chemin jusqu'ici, comme la dette. Et traitons maintenant de toutes ces autres informations. Voyons voir, nous avons cette barre latérale. Et comme vous pouvez le voir, la barre latérale fonctionne bien. Donc tout fonctionne bien. Avatar est là. Michael Jacobs est le top trouvé de Derrida maintenant BG. Donc, si je la découvre, comme vous pouvez le voir, nous pouvons clairement voir toutes ces informations, ce qui est très bien. Nous allons simplement traiter avec top maintenant BG et je pense que cela va très bien fonctionner. Donc, ce que je peux faire à ce stade est en fait copier toutes ces informations pour obtenir le contrôle C. Je peux aller à l'état de l'onglet, sauter à l'intérieur, appuyer sur le contrôle V. Je supprimerais ceci, ceci, ceci, ceci, ceci, et juste Laissez ça. Comme ça. Je vais changer mon icône de menu principal pour taper comme ça, parce que nous l'avons déjà tapé. Je vais étendre mon masque pour qu'il puisse aller jusqu'ici, comme ça. Donc, il couvre l'ensemble de ceci. Ce que nous pouvons également faire est de choisir toutes ces informations et de les pousser vers la gauche. Deux sont une grille de sorte qu'il peut s'aligner sur notre grille bien comme ça. Je ne sais pas pourquoi Al-Azhar n'est pas aligné comme il devrait le douter. Et peut-être que je peux aligner mon texte sur un point discret, ce qui est très bien. Et c'est fondamentalement tout. C' est notre état de tabulation. C' est revenir à l'état par défaut. Et ce que je veux faire est d'ajuster cela ici aussi. Laisse-moi déplacer ma barre latérale sur la grille. Laisse-moi déplacer mon avatar. Et Michael Jacobs devrait y aller. habitude laitière. Alors maintenant que tout cela est aligné et fonctionne bien, il s'agit maintenant de notre contenu. Donc, tout d'abord, nous pouvons aligner notre contenu comme celui-ci. Et comme vous pouvez le voir, vous pouvez sauter directement à l'intérieur et traiter avec ceux-ci parce qu'ils sont vraiment les plus faciles. Carte. Il n'y a vraiment rien à changer. Mais nous allons d'abord sauter à l'intérieur et traiter de nos textes. Donc, si je vous ramène à notre tableau de bord de site web, désolé, site web responsive. Donc nous sommes à 24 boulons et ce texte est 16 irrégulier. Alors faisons la même chose ici. Donc nous sommes à 24 volts pour celui-ci. Alors, allons le trouver ici. Dario. Et ça va être 16 irrégulier. Là, vous l'avez. Maintenant, les dettes sont terminées. Je ne pense pas avoir besoin de faire d' autres changements parce qu'il coupe le texte droit sur la ligne. Mais si nous voulons aller plus loin, alors vous allez envelopper le texte, par exemple, comme ceci, afin que nous puissions mettre Décembre et bas sur cette ligne. Mais je pense que c'est bien pour notre affaire pour l'instant. Passons maintenant à l'espacement réel rapide. Donc si je vous ramène ici, si je me souviens bien, c'était 80. Mais vérifions. Et oui, c'est 80 partout. Alors faisons le même stratagème à celui-ci. Je vais donc sélectionner mon contenu et voir où nous en sommes. Nous sommes à 50, donc 123, nous en sommes à 80. Je vais positionner ce sera 35, mais 40, comme ça. C' est à 40 de là aussi. Et maintenant, traitons de notre contenu. Maintenant, ce que je vais faire tout d'abord, c'est simplement étendre cette carte. Donc ici, je ne vais pas changer le contenu et je ne vais pas m'occuper de vieux trucs morts. Ce que je vais faire ensuite, c'est utiliser tout ça. Voyons voir, c'est des gardes. Utilisez ces deux-là sur le fond. Et je vais aussi élargir mon tableau pour qu'il puisse aller jusqu'au bout. Et rappelez-vous, c'est votre point de défilement ou vous êtes au-dessus du vent de panne par exemple. Donc ça va aller jusqu'au bout. Donc voyons, peut-être que ce 80 fonctionne, peut-être 4234, parce que je pense que c'est beaucoup mieux maintenant parce que nous avons le même espacement entre toutes ces cartes. Et si nous vérifions ici, nous en avons 40, ce qui est un grand. Et maintenant, allons vite de l'avant et bougeons tout ça comme ça. Je vais déplacer mon onglet d'aide pour être aligné sur ici. Voyons voir, on est à 40 ans, c'est bon. Ajustez simplement cela comme ça et vous n'avez rien à faire d'autre. C' est aussi génial. Maintenant, ce que nous allons faire pour les transactions et pour ce genre de choses c'est que nous devons planifier une nouvelle mise en page parce que évidemment cela ne fonctionnera pas comme ça. Nous ne pouvons donc pas le modifier, nous ne pouvons pas le modifier à ce stade. Donc, qu'est-ce que nous devons faire est simplement d'ajuster à quoi ressembleront toutes ces choses. Donc ce que je vais faire en premier, c'est en fait m'occuper de celui-ci parce que c'est beaucoup plus facile. Alors je vais sauter à l'intérieur. Toutes les dépenses beauté. Je vais l'étendre pour entendre parler d'un bureau de position à entendre. Et ce que je peux faire est simplement utiliser ceci et ceci, positionnez-le comme si la position n'aime pas. Donc je vais positionner ma carte juste ici au centre. Et voyons, je peux maintenant m'occuper ceux-là pour que je puisse m'assurer que c'est au centre. Et je peux utiliser mon outil rectangle et le positionner d'ici à là. Utilisez-le et ce texte pour vous assurer qu'il est au centre. Ensuite, positionnez mon rectangle d'ici à ici. Donc, de ce bord à ce bord, s' assure que ces deux-là sont dans un centre comme celui-ci. Et puis j'ai enlevé mon rectangle. Maintenant, ce que je peux faire avec ce tableau, c'est que je vais le laisser là, mais qu' ils s'occupent rapidement de ceux-ci. Donc, ce que je peux faire, c'est mettre deux juste l'un à côté de l'autre. Donc, je peux mettre de la nourriture, par exemple, juste ici. Utilitaires et laisser voir les paiements de voiture peuvent aller juste ici. Donc, il les positionne pour être, par exemple, 40 l'un de l'autre. Voyons où nous sommes. Et un seul bureau pour gâcher mon espacement comme ça. Donc 1234. Et vous pouvez positionner doit être au centre. Alors je peux me positionner près de là et de la nourriture juste ici juste pour que nous l'ayons. peu près le même espacement. Donc, je vais rassembler ces deux-là comme ça. Et puis assurez-vous que je fais 1234, comme ça. Et les laiteries l'ont. Je vais les positionner 40. Donc à 1234, je vais clore ça ici. Vous pouvez utiliser des guides, mais j'ai trouvé cela, beaucoup plus simple, beaucoup plus rapide, et je peux me faire avec et plus d'un. Donc, toutes les dépenses sont terminées. Maintenant vient la partie la plus compliquée essentiellement, parce que vous voulez toujours présenter toutes ces informations à vos utilisateurs. Tu veux toujours leur dire où ils ont dépensé cet argent. Mais pour ne pas oublier, c'est votre tableau de bord de base. Donc, si je vous emmène jusqu'ici, à notre menu, à l'état de profondeur, vous pouvez voir que nous sommes au tableau de bord. Nous sommes donc au tableau de bord de base montrant seulement les informations de base pour des informations supplémentaires sur vos transactions. Vous allez accéder au robinet de transactions. Donc, vous allez appuyer sur la navigation du menu, vous allez dans l'onglet transaction et ensuite vous allez être en mesure accéder à votre transaction et essentiellement l'appliquer à ce que vous voulez. Donc, comment nous allons le faire, c'est que nous allons apporter quelques modifications à notre mise en page ici. Tout d'abord, je vais sauter à l'intérieur et étendre ça jusqu'au bout, comme ça. Je vais m'assurer de positionner ça ici comme ça. Et ce que je vais faire, c'est trouver une mise en page qui sera la meilleure pour ces choses. Donc je vais déplacer ça ici, assurez-vous que c'est dans un centre, 1234. Je pense qu'on aura assez d'espace, mais sinon, on s'en occupera plus tard. Alors commençons maintenant. Voyons voir. Nous pouvons, par exemple, choisir ce mange à 18. Pour qu'on puisse ajuster papa. Mais je ne vais pas faire ça. Je vais simplement déplacer tout ça vers le bas. Donc ça me donne assez d'espace. Je vais bouger mon prix comme ça. Je vais m'assurer que c'est aligné. Dan 20. Voyons voir, c'est à 20, ce qui est très bien. Je peux positionner ceci pour être en bas ici. Assurez-vous qu'il est dix. Et je peux, par exemple, voir ce que je peux faire ici. Peut-être que je peux positionner cela pour aligner avec cela et aligner ma nourriture comme ça et l'habitude laitière. Maintenant, nous avons terminé cette section. Alors passons maintenant et traitons d'autres sections. Vous pouvez évidemment l'explorer avec ces mises en page autant que vous le souhaitez. Mais je pense que celui-là est très bien pour nos besoins. Donc dix, je vais me positionner près d'être 20. Donc je vais baisser le prix comme ça et voyons 12. Parce que de toute évidence, ces entreprises peuvent couper leurs portes. Donc, par exemple, peut-être qu'il peut juste voir Zara, peut-être peut juste dire Starbucks. Lorsque vous n'avez pas assez d'espace et que vous allez encore plus bas avec votre, avec votre taille. Alors allons-y. Je vais bouger ça, une fois de plus, ça va être dix, comme ça. Je vais mettre deux utilitaires ici, s' assurer qu'ils ont 21 ans. Plus de raison que je mets le prix et vers le bas et le nom de D, Donc les utilitaires et ainsi de suite est parce que si je veux, par exemple, ajouter plus à cela. Donc, par exemple, imaginons juste que cette dépense n'était pas $270.73, mais disons pour $1000 ou $20 000 ou autre, alors nous allons étendre ce prix à gauche et réduire cela à gauche. J'espère que cela a du sens. Donc encore une fois, dans ce cas, au lieu de 0 et je stocke, ce sera juste Zara. Donc, il nous donne plus d'espace et il peut aller automatiquement. Donc, encode, il peut automatiquement couper ce nom tout en élargissant ce prix vers la gauche. J' espère que ça n'a pas de sens. Finalement, traitons avec ces autres. Donc je vais positionner ça et descendre jusqu'ici et m'assurer que c'est à dix ans. Comme ça. Je vais en voir plus ici, donc 12. Et vous pouvez clairement voir pourquoi j'ai fait ça, donc ça ne coupe pas avec le nom juste ici. Positionnons rapidement ceci pour être ici. Assurez-vous qu'il est réglé sur 20. Et fermons ça. Assurez-vous que c'est à 40 ans. Je vais bouger ça sur le chemin d'ici pour que ça nous donne assez d'espace. Positionné est là, comme ça, et assurez-vous que la nourriture est alignée ici. Et encore une fois, si vous ne voulez pas que ça soit comme ça, je peux rapidement me positionner pour que je puisse vous expliquer. Ce que vous pouvez également faire est de changer ces endroits. Donc, ce que vous pouvez faire est au lieu de positionner les paiements de voiture, ce que vous pouvez faire, par exemple, est de mettre le logo des paiements de voiture à côté, désolé, icône de paiement de voiture à côté de ce nom. Donc, à côté de Mercedes Benz par exemple. Et vous pouvez augmenter le prix de la dette de façon. Vous allez pouvoir avoir beaucoup plus d'espace pour jouer. Vous pouvez donc positionner le prix ici. Au lieu des paiements de voiture, cet espace va être vide. Donc, peu importe combien de temps le nom de l'entreprise est, il peut s'étendre vers la droite. Alors que cette loi, cette icône peut aller à côté du nom de la société réelle. Donc, vous pouvez le faire aussi. Vous pouvez également coder des couleurs pour correspondre à cela. Donc, nous pouvons juste vous montrer rapidement que, laissez-moi rapidement aller de l'avant et terminer cette mise en page. Vous pouvez donc choisir la façon dont vous voulez que cette mise en page ressemble. Donc T2. Et laissez-moi positionner mon prix comme ça. C' est un 20. Laissez-moi plus ces deux-là. Alors 2341234. Je vais choisir ce déménagement ici. Comme ça. Ce que je fais en ce moment, c'est simplement utiliser exactement les mêmes informations que nous le faisons tout au long de notre conception. Je commande déjà de manière différente. Mais ce que vous pouvez faire est de regarder et de vous donner un exemple pour la nourriture, disons. Donc, ce que nous pouvons faire est simplement positionner ceci ici. Utilisez l'étiquette alimentaire, mais supprimez et le texte de la nourriture. Donc, nous sommes juste à gauche avec l'icône fondamentalement. Et vous pouvez positionner cette icône ici. Et déplacé un nom comme celui-ci, par exemple. Ensuite, sélectionnez ces outils, assurez-vous qu'ils sont au centre. Et maintenant, ce que nous pouvons faire, c'est simplement appliquer cette même couleur à notre texte. Comme ça. Et troupeau laitier. Cette mise en page est beaucoup plus propre, elle a l'air beaucoup plus agréable. Et ce que vous pouvez également faire est par exemple, changer de place, vu café Starbucks peut pousser sur le dessus et ci-dessous peut aller par exemple aujourd'hui et le prix n, tout ce que vous voulez. Mais si vous trouvez que cette mise en page est meilleure, qui le fait réellement, nous allons courir avec elle en fait. Mais vous devez parler avec les développeurs à ce sujet. Vous devrez donc exporter ces couches séparées et je vais le partager plus tard avec vous. Mais d'abord, complétons les DES. Donc une transaction, voyons Claude Stagg et nous incluons tous les textes de charges de travail. Je vais m'assurer que cette icône est alignée avec mon texte comme celui-ci. Mon père a dix ans, c'était à dix ans ? Ici ? C'était le cas. Et assurez-vous juste que ce texte Zara est de cette couleur. Et positionnez simplement votre prix à la hausse. C' est très bien. Faisons face à tous ces autres. Donc, je vais utiliser ma balise d'utilitaires, supprimer mon texte, positionner mon icône d'utilitaires ici. Assurez-vous que ce texte va dix, le prix monte. Ce texte va à cette couleur. Et cette couche a déjà l'air beaucoup plus agréable maths. Comme je l'ai dit, je voulais juste vous montrer quel est le moyen optimal pour les développeurs de ne pas trop changer. Et de cette façon, la conception et l'expérience utilisateur réelle vont être beaucoup mieux, beaucoup plus propre. Mais les développeurs vont malheureusement avoir ce travail supplémentaire, ce qu'ils devront faire. Et vous allez avoir le travail supplémentaire parce que vous allez exporter ces balises séparément et que vous êtes prêt à le partager avec vous plus tard. Donc, nous allons traiter avec l'étiquette alimentaire et sommes allés à supprimer le texte. Position pourrait icône lambdas, déplacé vers ici. Et le centre vert, comme ça. Et enfin, traitons avec les vêtements et laisse finir. Je dois déplacer mon icône entière qui utilisent ce texte plus avec dix. Et enfin, déplacez ça aussi. Et nous l'avons là. Nous avons terminé notre mobile. Pour elle et tableau de bord, mais positionné doit être 40. Donc 1234. Je vais fermer mon bras ou oser. Et voir 1234. Je vais le fermer là. Encore une fois, vous pouvez utiliser des guides, mais dans mon cas, je l'ai trouvé beaucoup plus simple. Je, ce que je devrais obtenir est 40 habitude attachante. Maintenant, il est rapidement aperçu ceci, voir ce que nous avons fait jusqu'à présent. Et laissez-moi vous montrer de cette façon. Donc, si je tape ici, je dois le prototyper en fait. Donc j'ai été fait ça rapidement. Encore une fois, nous allons taper sur notre logo. Ça va nous amener à, voyons, onglet autonomie. Et allons voir, voyons voir, voyons, voyons, voyons ce que j'ai fait. Tellement facile. Note 0,06 seconde, mon père. Et passons à l'état de l'onglet. Leur fierté ici. État par défaut. Voyons si on a fait ce que je crois. Voyons voir, TAPER. Je le savais parce que je dois créer le point d'appui pour notre icône de menu, icône. Laisse-moi sauter ici. Et c'est pourquoi vous devez créer ces points de profondeur ennuyeux. Parce que si vous cliquez sur l'icône comme vous venez de le voir, et laissez-moi vous le montrer encore une fois. Donc, si je clique sur l'icône va animer l'icône, pas l'animation du menu entier. Donc, c'est pourquoi nous avons malheureusement besoin de mettre ces Menu principal Tab point. Et je vais inclure le modèle ici derrière l'icône Menu principal. Allez en position de décenter. Comme ça. Assurez-vous que c'est quelque part par ici, ce qui est très bien. Dan, allons de l'avant et cliquez sur le prototype. Donc, sur le point de l'onglet lui-même, Cliquez sur It. L' autonomie est dans notre onglet 0.06. Et allez à votre état de tabulation comme ceci. Trouvez-le ici. Et je dois le coller ici aussi. Donc vous le déplacez ici et déplacez-le ici, juste en dessous de mon prototype d'icône, cliquez dessus. Appuyez sur le point. Et nous allons passer à l'état par défaut. Vérifions ça et voyons si ça marche. Et maintenant, nous allons frapper aperçu. Ça ne marche toujours pas. Oh, c'est là. Ça prend trop de temps pour une raison quelconque. Je ne sais pas pourquoi. Peut-être que mon ordinateur est en retard. Vérifions une fois de plus. Ok, donc rien ne se passe vraiment. Oh, je vois pourquoi je dois cliquer quelque part dehors. C' est mon erreur. Mais de toute façon, vous l'avez. Vous pouvez voir à quel point ça a l'air sympa. Donc, je dois cliquer quelque part juste ici parce que si nous cliquons sur l'icône elle-même, il animera l'icône elle-même. Donc, vous pouvez voir comment cela fonctionne et vous pouvez voir à quoi il ressemble que nous avons toujours cet effet de flou agréable. Si vous pensez que c'est trop dans ce cas, vous pouvez l'abaisser à cause de toute cette couleur blanche. C' est juste un peu trop, peut-être. Mais je pense que ça marche très bien. Une autre chose que je veux vous montrer est que nous avons toujours cette navigation, donc nous sommes à l'état par défaut. Je peux cliquer ici. Donc, position fixe whens rampant parce que lorsque je prévisualise et commence à défiler, vous pouvez voir, nous ne voyons pas la navigation sur le dessus. Donc, ce que vous pouvez faire est de sélectionner cette zone de navigation. Vous pouvez le faire à la fois pour tablette et mobile car vous pouvez voir qu'il s'agit de notre point de coupure pour la tablette. Je vais donc cliquer sur Camionnettes en position fixe ramper. Je vais faire la même chose pour celle-là. Et je pense que je n'ai pas fait ça pour le mobile du tout. Alors voyons. Je peux le faire pour tous. Donc c'est réparé. C' est corrigé. Mais ce n'est pas parce qu'on l'a changé. Alors allons-y et revenons au tableau de bord et voyons à quoi ça ressemble maintenant. Alors maintenant, quand vous commencez à faire défiler, vous pouvez voir qu'il est fixé au sommet et qu'il a toujours ce bel effet lumineux. Mais je dois enlever la couleur de mon point de robinet pour le logo parce que vous pouvez voir cette couleur ici. Mais en gros, vous en avez l'essentiel. Vous pouvez voir comment tout cela fonctionne. Alors allons-y et réparons rapidement ça. Donc, il est le point de l'onglet Menu principal. Vous pouvez voir que nous avons la couleur. Retirez-le. Allons à l'état de l'onglet et voyons s'il est toujours là. Il l'est. État par défaut. Et maintenant, quand j'appuie sur l'aperçu et commence à défiler, vous pouvez voir à travers et tout fonctionne comme il se doit. La navigation fonctionne très bien. Juste là aussi. Est-ce que cela et supprimer l'animation de lui parce que vous pouvez voir, allons de l'avant et corriger cela afin qu'il ne nous confonde pas. Donc prototype. Sélectionnons ceci et voyons ce que c'est. Et je vais simplement taper dehors. Qu' est-ce que c'est ? Chaque point de tabulation 4R. Ok, donc c'est bon. Je peux vraiment sauter à l'intérieur et étendre ce point d'étape jusqu'au bord. Et je peux faire la même chose dans un état de tabulation. Donc je peux le trouver ici. Point de tabulation développé à ici. Et voyons, quand je tape sur mon icône, il n'ira nulle part. Alors réparons cette habitude laitière. Maintenant. Essayons et voyons si cela fonctionne maintenant. Ou peut-être même mieux parce que c'est transparent juste pour enlever tout doute. Voyons où nous sommes dans l'état par défaut. Je peux utiliser mon point de profondeur et le déplacer au-dessus de mon icône de menu principal. De cette façon, je vais en fait taper sur mon point de contact. Modifions-le ici aussi en quelque sorte l'état de l'onglet. Voyons donc où nous en sommes à ce stade. Juste plus de retour en haut, la laiterie dehors. Revenez à la conception et à l'état par défaut. Cliquez sur Aperçu. Et maintenant, quand nous cliquons là, comme vous pouvez le voir, tout fonctionne comme il se doit, comme il était prévu de le faire. Et je pense que cette vitesse de 0,06 facile et ça fonctionne vraiment bien avec notre design. Donc l'habitude laitière, un peu plus de radio, mais je devais quand même expliquer tout le reste qui était là pour expliquer une fois de plus et une dernière fois. Si vous voulez organiser, ce sont des planches un peu mieux que moi dans mon cas. S' il vous plaît faire. Mais encore une fois, je l'ai fait parce que je n'ai pas conçu le reste des pages pour le discours. Et c'est pourquoi je me suis laissé un peu plus d'espace ici dans le cas d'un design eux jamais. Mais sinon, si c'est votre projet, assurez-vous simplement de les organiser un peu mieux. Vous pouvez cliquer et faire glisser, les repositionner comme je l'ai fait tout au long de notre conception. Vous pouvez, par exemple, positionner ces indies filaires ici, puis votre conception entière dans une ligne, il réagit dans l'autre ligne, ainsi de suite. Donc, c'est vraiment à vous de décider comment vous voulez les organiser. Vous pouvez voir, vous pouvez faire défiler vers le haut et vers le bas pour avoir plus d'espace et XD réel ajouter plus d'espace. Donc fondamentalement, peu importe le nombre de pages que vous avez, vous pouvez toujours avoir ce défilement et ajouter autant de pages que vous le souhaitez. Donc, en gros, c'est tout pour cette partie du cours. Nous avons terminé notre design responsive. Et encore une fois, pour un design réactif, si vous le souhaitez. Je l'ai fait pour le temps et le temps. Si vous voulez, s'il vous plaît aller de l'avant et faire un design réactif pour tous ces maintenant vous savez comment il peut être complété dans la façon dont j'ai aimé faire les choses. Et je vous ai montré pour la conception de site web ainsi que la conception responsive pour le tableau de bord. Dans la section suivante du cours, nous allons commencer à parler du partage et de la rétroaction. Je vais vous dire ce que vous devez demander à votre client des commentaires, pour une sorte de ce que vous devriez chercher dans un commentaire, pas seulement ce que vous pensez de cette conception, comment vous pouvez améliorer encore la conception, et comment vous pouvez faire les choses dans le moins de révisions possible. Parce que tu vas installer ton client de cette façon. Ensuite, après cela vient exporter. Donc je vais vous montrer la structure d'exportation. Comment peut partager des acides avec les clients et les développeurs et comment vous pouvez utiliser au mieux l'espace afin que vous ne perdiez pas l'espace sur votre ordinateur pour de ces projets car une fois qu'ils sont terminés, vous devez toujours garder ces fichiers pour certains temps au cas où le client souhaite des modifications supplémentaires leur sont apportées. Donc, vous devez maintenant leur demander de vous renvoyer aux fichiers et de perdre du temps de cette façon. Enfin, nous allons terminer ce cours. Nous allons en arriver à une conclusion et à des ressources. Je vais vous montrer très, vous pouvez obtenir toutes ces ressources dont j'ai parlé dans le cours, prime ainsi que gratuit. Alors je te verrai dans la leçon suivante où on va commencer à parler de partage. 64. Importance du partage: Maintenant que la conception est terminée, allons de l'avant et parlons du partage. Et évidemment, comme je l'ai mentionné à plusieurs reprises tout au long de ce cours, vous êtes censé partager dès que vous commencez avec les filaires. Mais encore une fois, je ne l'ai pas fait parce que je voulais tout vous montrer tout au long du processus, puis commencer à partager. Donc, je ne vous confond pas davantage avec beaucoup plus d'informations que ce que vous devez savoir à ce stade particulier, surtout si vous commencez. Parce qu'une fois de plus, tout cela peut prendre trop pour certaines personnes. Et pour certaines personnes, tout cela peut être trop compliqué. Mais comme il l'a dit au tout début de ce cours, si vous connaissez déjà certaines de ces choses et que vous voulez juste apprendre d'autres choses que vous ne saviez pas auparavant. Ou il a juste besoin de brosser vos connaissances d'Adobe XD ou de ce processus de conception, puis simplement sauter de l'avant et regarder tout ce que j'ai structuré le discours comme celui-ci. Donc, pour une raison quelconque, si vous voulez sauter entre les sections du cours. Donc, que ce soit le filage papier, filage dans XD et la conception responsive design et enfin, le partage. Vous pouvez sauter entre toutes ces sections et simplement apprendre ce que vous avez réellement besoin d'apprendre de cette section particulière. Donc, comme je l'ai dit dans cette section du cours, nous allons parler du partage dans Adobe XD. L' option de partage est fantastique. Annexe D, parce qu'ils ont ces trois options, conception, le prototypage et le partage. Et parce que partager comme son propre est vraiment l'une des choses les plus importantes du processus de conception. Parce qu'à ce stade, vous partagez votre design avec le client et demandez des commentaires. Et les commentaires sont extrêmement importants, évidemment parce qu'ils façonnent le produit est expédié à la conception de telle sorte qu'il a besoin d'aller. Parce que parfois vous aurez cette vision claire dans votre tête où vous devez aller avec ce design, mais d'autres fois vous ne le faites pas. Et c'est pourquoi vous avez besoin du client pour qu'ils approuvent cette conception, afin qu'ils désapprouvent. Dès que vous l'obtenez, dès que vous pouvez obtenir les commentaires appropriés de votre client, mieux c' est, parce que tôt ou pouvez-vous façonner le produit et le design de telle sorte que les deux parties seront heureuses. Vous et le client, assurez-vous juste de comprendre que vous ne serez jamais satisfait à 100% de votre design. client n'est peut-être pas satisfait à 100% de la conception, mais c'est aussi bien parce que comme je l'ai dit, c'est un processus continu. Vous allez investir beaucoup de temps tout au long de ce processus, explorer puis raffiner. Si vous, surtout si vous avez affaire à des groupes de discussion, surtout si vous faites affaire avec des personnes qui vous donnent des commentaires en dehors de ce projet. Comme je l'ai dit, vous êtes à la recherche d'un public cible pour interviewer ces personnes, ce soit en personne ou en ligne, alors vous allez concentrer tous les commentaires que vous avez reçus de ce groupe de discussion et de ces personnes sur ce design. C' est pourquoi il est vraiment important de comprendre comment le partage peut façonner le projet et comment le partage peut façonner le produit dans son ensemble. Donc, la chose que vous devez poser à votre client lorsque vous commencez à partager est toutes ces questions ciblées. Donc, la première erreur que font les concepteurs est, que pensez-vous de ce design ? Le client n'est pas un designer. Si c'était le cas, ils le concevront sans vous, donc ils n'auront pas besoin de votre aide. Ils ont besoin de votre aide parce que vous êtes le concepteur et non pas eux. Vous devez donc les pointer dans une direction spécifique de votre conception. Ainsi, par exemple, lorsque vous commencez avec des filaires et lorsque vous partagez des filaires et que vous leur faites savoir à l'avance, ce n'est pas la conception, ce n'est pas la mise en page finale. Ce ne sont pas les couleurs finales. Ce n'est pas la typographie finale. Ce n'est pas le style final de cette conception. C' est juste la mise en page de base. Assurez-vous de leur dire cette façon de dette. Ils vont commencer à penser à la conception différemment. Et ils vont dire, d'accord, donc ce n'est qu'une structure. Ce que nous devons changer au sujet de la structure. Et puis une fois qu'ils ont compris cela, assurez-vous de leur poser des questions spécifiques. Donc, par exemple, que pensez-vous de l'espacement entre ces deux éléments ? Et je pense que c'est bon. Pensez que nous avons besoin de plus de devoir dans les cadets. Ce blanc sur gris, par exemple, fonctionne bien pour vous. Pensez-vous que cela fonctionnera bien avec le public ? Comment aimez-vous cette configuration ? Par exemple, si le texte est sur la droite, images sur la gauche, pensez -vous que cela semble bon, ou devriez-vous penser que nous devrions les changer ? Ce faisant, nous devrions mettre l'image sur le dessus, le texte sur le fond. C' est donc la rétroaction dont vous avez besoin de votre client. Quand ils disent, Oh, ok, peut-être qu'on devrait faire ces changements, c'est bon. Et une fois que vous commencez à recevoir cette rétroaction, vous pouvez commencer à l'appliquer à votre conception. Ensuite, une fois que vous partagez votre design, assurez-vous de concentrer leur attention sur certains de ces détails car la plupart du temps, les clients n'aimeront pas la couleur pour une raison quelconque. C' est pourquoi nous utilisons ces composants. C' est pourquoi nous utilisons ces couleurs connectées dans XD. Parce que s'ils n'aiment pas la couleur pour quelque raison que ce soit, vous pouvez la changer en un simple clic. Alléger le texte est juste un peu trop grand, vous juste un peu trop petit. Assurez-vous de leur dire que cela va sembler un peu différent plus tard dans le code qui vous fera gagner beaucoup de temps avec eux en changeant toutes ces petites choses. Et il montrera deux DEM, del, tandis que le design va ressembler à ça, en citation, les jeunes ne peuvent jamais être 100% précis juste parce que la façon dont le code fonctionne. Donc, ce sera quelque chose comme 9697%, mais pas 100. Alors assurez-vous juste de leur dire que aussi pour le responsive, s'ils aiment, comment ce design responsive ressemble, mais ils ne sont pas certains de certaines choses. Assurez-vous de leur dire que vous allez le trier avec le développeur de la meilleure façon possible pour le site lui-même. C' est pourquoi je disais dans la dernière vidéo de design responsive, par exemple, pour ces icônes, vous pouvez masquer le texte de ces icônes et de ces étiquettes. Mais vous devez parler à vos développeurs et vous devez le dire à votre client. Donc ça va être comme ça. Et pour cette raison, vous devez donc faire votre raisonnement, pas seulement faire le design et leur envoyer un espoir pour le meilleur. Vous devez donc leur expliquer pourquoi vous avez choisi ces types de décisions et pourquoi vous avez fait les choses comme vous l'avez fait. Parce que de cette façon, ils vont regarder un design différemment parce que vous l'approchez du point de vue logique, pas seulement pour rendre les choses jolies. J' espère donc que vous comprenez à quel point la rétroaction est importante, à quel point le partage est important. Et dans la prochaine vidéo, nous allons sauter dans Adobe XD. Et je vais vous montrer toutes les fonctionnalités qu'Adobe XD a en termes de partage acheté pour les clients ainsi que pour les développeurs. Alors je te verrai là-bas. 65. Options de partage de conception: Enfin, permettez-moi maintenant de vous montrer toutes les options de partage d'Adobe XD. Donc, une fois de plus, si vous regardez ici, nous avons design, prototype et partage. Et si je cache mes couches ici, vous pouvez voir ça encore mieux comme ça. Nous avons donc conçu le partage de prototype. Et une fois de plus, la conception est l'endroit où vous faites toutes ces modifications à votre conception, où vous créez, où votre chargement Maintenant, tous ces éléments, prototypage est l'endroit où vous connectez tous ces différents éléments, que je vous ai montré tout au long de ce cours. Et enfin, le partage est si vous voulez partager ces conceptions, créations, prototypes avec votre client, développeurs ou équipe de testeurs. Alors passons vite à travers ça. Donc, une fois que vous cliquez sur le partage, vous pouvez voir qu'il vous donne toutes ces options différentes. Donc, quand je clique sur ma conception de site Web, manger plein Savoir que nous avons créé ce flux et il me montrera que le flux de la dette est connecté. C' est là que vous pouvez commencer à partager. C' est pourquoi nous avons toutes ces icônes de page d'accueil. Donc, si je zoome tout près d'ici, si je navigue en zoomant comme ça, vous pouvez voir que nous avons cette petite icône de page d'accueil juste ici, qui signifie essentiellement que c'est le flux pour vos filaires. Si je clique sur celui-ci, vous pouvez voir que rien ne se passe vraiment. Mais si je clique sur mes trames filaires, vous pouvez voir que nous pouvons partager une seule option, qui signifie que si vous voulez partager cela avec votre client, à ce stade, vous pouvez la partager parce que c'était la seule conception que nous avions réellement dans notre rapport. Si vous vous souvenez, nous venons d'avoir ces 2468 pages différentes. Donc on a juste ça. Nous n'avions pas de tableau de bord et surtout nous n'avions aucun design de site web. Assurez-vous donc de comprendre que vous pouvez partager ces flux. C' est pourquoi j'ai créé tous ces flux distincts pour des parties distinctes du discours et de ce projet. Mais si vous voulez partager tous les écrans avec votre client, vous ne créez aucun flux. Vous continuez à créer, créer, créer sans étiqueter tous ces flux comme nous l'avons fait tout au long de ce cours. Et de cette façon, vous pouvez partager tout votre processus avec votre client et sans leur faire remarquer toutes ces autres choses. Ces flux sont extrêmement utiles, surtout si vous partagez des parties spécifiques de votre conception. Comme par exemple, si je clique sur ma conception de site web responsive ici, et si je clique sur ma page juste en bas. Vous pouvez donc imaginer que vous pouvez partager ces parties spécifiques de votre conception avec vos testeurs, par exemple. Je peux donc partager mon design de site web réactif avec eux et ainsi de suite. Je ne peux pas les partager maintenant, comme vous pouvez le voir, parce que tout d'abord, j'ai créé pour cette page, qui est juste notre page de mise en page, donc je ne peux pas les partager. Mais si vous êtes connecté avec qui ont connecté toutes ces pages. Comme nous l'avons fait, par exemple, avec notre conception de tableau de bord, vous pouvez les partager avec vos clients, développeurs de bureau, etc. En parlant de partage, je peux cliquer sur les designs de mon site Web afin que je puisse commencer à partir d'ici. Parce que rappelez-vous, tout ce processus est connecté parce que nous avons commencé à partir de la page d'accueil et ensuite passer travers ces pages aux pages de connexion et d'inscription. Et puis nous sommes passés à ici. Donc, qui est la conception du tableau de bord. Plus, Nous passons par toutes ces différentes pages. Voyons voir, nous avons le lien. Donc, nous avons la conception de site Web. On peut alors appeler ça autre chose. Donc, par exemple, c'était une nouvelle banque, donc je peux l'appeler nouvelle banque. Conception de site Web comme ça. Et ce que vous pouvez faire ici, c'est les paramètres du document. Ainsi, vous pouvez partager la revue de conception, qui est fondamentalement de la façon dont il va être examiné par votre client. En mode dette, le client peut vous laisser des commentaires, vous pouvez répondre à ces commentaires. Vous pouvez les pointer vers les parties spécifiques de votre conception en faisant glisser et déposer ces épingles de commentaire. Et puis vous pouvez laisser des commentaires dans des endroits spécifiques tout au long de votre conception. Ils peuvent répondre à ces endroits spécifiques. Donc, vous et votre client pouvez toujours être sur la même voie. Ok, ce qu'il faut faire ici, ce qu'il faut faire des changements ici. Ainsi, vous pouvez être spécifique à la partie de votre conception que vous voulez modifier ou qu'ils veulent que vous modifiez. Ci-dessous, nous avons le développement, qui est le partage pour les développeurs. Et dans ce mode, ils vont pouvoir voir toutes ces différentes couleurs que vous utilisez, toutes les différentes polices et différentes tailles de police que vous avez utilisées. Et ils vont pouvoir voir toutes les images que vous utilisez à ce moment particulier. Ils ne peuvent pas voir le code. Encore une fois, vous pouvez utiliser quelque chose comme Anima, mais personnellement je ne le recommande pas parce que ce n'est pas parfait assez. Et vous allez réellement vous donner un travail de développeurs plus. Et parce qu'ils devront entrer dans le code , puis commencer à affiner et à rafraîchir votre code, ce qui est fondamentalement juste une perte de temps. Il faudra coder tout cela à partir de zéro. Ci-dessous, nous avons une présentation. Par exemple, si vous présentez votre design à un groupe de personnes, si vous faites quelque chose comme un Skype Roll, présentation zoom ou autre, alors vous pouvez passer en mode dette et cela supprime toutes les distractions. Il supprime toutes les icônes, il supprime tout, et il se concentre juste sur la présentation elle-même, les tests utilisateur. Donc, une fois de plus, il supprime tout le reste. Les utilisateurs ne peuvent pas cliquer n'importe où en dehors de l'endroit où ils doivent cliquer. C' est comme ça. Vous allez tester la facilité d'utilisation de votre design. Est-il facile de cliquer sur cet onglet points ? Est-il facile de comprendre où doivent-ils aller ? C' est la navigation facile à comprendre. Mec, les animations durent trop longtemps et ainsi de suite et ainsi de suite. C' est donc là que les tests utilisateur entrent en jeu, et c'est là que vous pouvez utiliser XD pour commencer les tests utilisateur. Vous pouvez également trouver différents plug-ins dans le panneau plugins, spécialement conçus pour les tests utilisateur par des entreprises externes. Intégré dans Adobe XD. Par exemple, si vous utilisez l'un d'entre eux, vous pouvez trouver un plug-in là, puis commencer à tester les utilisateurs directement à partir d'Adobe XD, recueillir des commentaires dans Adobe XD et l'appliquer immédiatement. C' est donc le point principal d'Adobe XD est de savoir comment optimiser tout pour être aussi lisse que possible, juste pour que vous puissiez commencer à travailler très rapidement. La coutume est ce qu'elle dit. Vous pouvez personnaliser toutes ces choses. Et ici, nous avons quelqu'un avec le lien. Alors, qui peut accéder à ce projet ? Toute personne avec le serveur de liaison obtenir ce lien, lien partageable, que vous pouvez partager avec vos clients ou un développeurs, ils peuvent y accéder. Donc, tous ceux qui envoient ce lien peuvent également accéder à ce prototype, ce qui est idéal pour le partage à l'intérieur de l'entreprise. Et tout le monde à l'intérieur de l'entreprise peut être centré et accéder à ce prototype et peut-être faire un commentaire à ce sujet s'il le faut. Nous n'avons invité que des gens. Ainsi, seules les personnes qui sont invitées par e-mail peuvent accéder à ce prototype et faire la même chose comme n'importe qui avec le lien. Et enfin n'importe qui avec mot de passe. Ainsi, vous pouvez protéger tous ces mots de passe. Par exemple, si quelqu'un envoie ce fichier par erreur à quelqu'un d'autre de l'organisation qui n'est pas censé le voir. Ou par exemple, vos concurrents, concurrents se mettent en main avec ce fichier. Il ne sera pas en mesure de l'ouvrir car il est protégé par le possible. Donc, voyons que nous pouvons le partager avec la révision de conception n'importe qui avec le lien. Et maintenant, ce que vous pouvez faire est simplement de cliquer sur créer un lien juste ici. Il va commencer à créer fin en fonction du nombre de nos conseils que vous avez et en fonction de votre connexion Internet car il est en téléchargeant tout cela sur les dettes de cloud d'Adobe façon. Et de cette façon, ça va prendre plus ou moins en fonction de ces deux choses. Alors, quelle est la taille de votre fichier et à quelle vitesse votre connexion Internet est. Et maintenant les deux liens sont téléchargés et maintenant vous pouvez commencer à partager. J' utilise volontairement la version gratuite d'Adobe XD parce que j'ai déjà un forfait premium. J' utilise une version gratuite juste pour partager cela avec vous afin que vous puissiez le voir ici. Déverrouillage illimité, liens de partage limités. Vous atteignez la capacité de partage de liens avec les mises à niveau de votre forfait pour publier plus de liens et utiliser les fonctionnalités Premium afin que vous puissiez cliquer sur Mettre à niveau ici. Cela signifie que si vous utilisez une version gratuite d'Adobe XD, vous n'avez qu'un seul lien disponible. Donc, si vous travaillez sur deux projets en même temps, vous ne pourrez pas les partager avec vos clients. Tu n'en as qu'un sur un plan gratuit. Si vous passez à Dan premium, vous avez un nombre illimité de ces liens de partage. Vous avez un nombre illimité d'options et ainsi de suite et ainsi de suite. Mais j'utilise délibérément cette version gratuite tout au long de ce cours pour vous montrer que tout ce que je crée en rouge ici est possible sur une version gratuite aussi. Donc, si vous travaillez avec plusieurs clients, alors par tous les moyens mettre à niveau vers le plan premium parce qu'ils ont vraiment beaucoup de ces options, en particulier les documents cloud, qui va être beaucoup plus rapide, surtout si vous utilisez des bibliothèques Cloud. Mais si ce n'est pas le cas, si vous travaillez simplement avec un client, si vous venez de commencer, alors vous utilisez simplement free blend car Adobe XD est un outil d'apprentissage fantastique et un moyen fantastique de pénétrer dans ce monde de conception UI UX. Maintenant enfin, finissons ça. Et comme vous pouvez le voir, un lien est créé. Vous pouvez cliquer ici pour copier ce lien. Et vous pouvez cliquer ici pour copier le code incorporé. Ainsi, vous pouvez intégrer dans ce code, par exemple, à l'intérieur de votre présentation de balises. Ainsi, les utilisateurs peuvent faire défiler la présentation de vos balises et cliquer sur votre présentation juste pour être en mesure de comprendre ce que vous avez fait avec votre prototype. Donc, si vous apportez des modifications à l'intérieur de l'onglet de conception ou de prototypage, vous pouvez revenir au partage et cliquer sur le lien de mise à jour. C' est le même lien, vous le partagez, vous venez de rencontrer la mise à jour de ce lien. Ne vous inquiétez pas, vous ne traverserez pas cette partie d'un lien par compte. Mais vous pouvez simplement mettre à jour ce lien pour vous assurer que le client a les dernières modifications. Un lien lui-même, de sorte que le nom de l'adresse du lien et ainsi de suite. Donc vous pouvez voir ici, donc tous ces chiffres, 90 points, 918 et ainsi de suite, ne changeront pas. contenu du lien va changer et il sera mis à jour vers la dernière version. Une fois de plus, vous pouvez cliquer ici. Il ouvrira ce lien dans votre navigateur. Vous pouvez copier ce lien ici et aller dans votre navigateur et l'ouvrir de cette façon. Donc, c'est vraiment à vous de décider comment vous voulez interagir avec ce lien. Alors maintenant je vais vous montrer son ouverture juste à l'intérieur de mon navigateur. Encore une fois, en fonction de votre connexion Internet, en fonction du nombre d'écrans que vous avez, nombre d'animations que vous avez. Tout ce processus peut prendre plus ou moins de temps, en fonction de toutes ces choses. Donc, lorsque votre écran se charge et lorsque vous le téléchargez sur Internet, c'est à quoi il ressemble réellement. Et pour couvrir toutes ces informations, je pense qu'il est préférable de faire une pause ici et de revenir dans la prochaine vidéo afin que nous puissions expliquer ce que sont toutes ces informations, comment vous pouvez interagir avec votre client. Et enfin, comment peut interagir avec vos développeurs. Alors je te verrai là-bas. 66. Partage du design avec le client: Bon, donc nous voilà, où nous nous sommes arrêtés dans la vidéo précédente. Et dans cette vidéo, je veux juste couvrir tout ce que vous voyez ici. Et je voulais juste expliquer toutes ces options, la dette que vous avez. Alors tout d'abord, commençons par le haut et plus ROA autour. Vous avez votre travail ici. si nous cliquons sur votre travail, vous accéderez à Adobe Creative Cloud et vous accéderez à votre travail. Donc vous pouvez voir parce que nous sommes sur une plante libre sur ce compte, comme je l'ai dit, vous avez juste ce prototype. Et il est dit ici, c'est un prototype et cela indique que toute personne avec le lien peut voir. Donc, fondamentalement, tous ces paramètres que vous avez créés lors du partage de votre fichier, il apparaîtra à la bonne attention. Donc, si nous revenons à notre prototype et à la vue du prototype publié, nous pouvons revenir en arrière et vous pouvez voir ici. Nous avons donc une nouvelle conception de site web de la banque, la conception de tableau de bord de page d'accueil. C' est pourquoi je mentionnais le discours sur la sécheresse. Comme il est important de nommer vos couches, nommer vos aéroports, afin que tous les acteurs puissent comprendre où ils se trouvent. C' est donc le cas clair ici. Il est si nouvelle conception de site web bancaire est le nom du projet que nous avons donné juste avant, le partage de liens. Et enfin, nous avons la conception de la page d'accueil, qui est en fait cette page d'accueil particulière. Vous pouvez cliquer ici. Et il vous mènera à la liste de toutes ces pages séparées. Et vous pouvez montrer cela à votre client ou aux développeurs afin qu'ils puissent comprendre, OK, c'est la conception de comptes, pas filaire mais la conception. Et c'est pourquoi j'ai dit qu'il est important si vous faites des choses comme ça et comme nous l'avons fait dans le discours, nommer vos fichiers de manière appropriée afin que tous les participants puissent comprendre où ils se trouvent dans un temps précis ou à un moment précis de temps. Donc, il est dit 15 écrans mis à jour à cette date à ce moment. Donc, quand je clique sur une page d'accueil, ça m'emmènera là où on s'est arrêté. C' est notre design actuel. Et vous pouvez voir quand je commence à planer des qualités, les effets d' horreur fonctionnent déjà. Donc, fondamentalement, c'est votre conception dans un navigateur. C' est ainsi que les clients peuvent les voir. Et il y a quelques commandes ici que nous devons exécuter rapidement. Donc fondamentalement jeter une partie juste ici est pour votre design. Et quand je commence à défiler, vous pouvez voir où le design et n, où cela ici dans la navigation montre cette négation est la maison. Donc, lorsque vous cliquez juste là, il vous mènera à cette page parce que c'est la page d'accueil. Et vous pouvez également cliquer sur ces flèches gauche et droite pour interagir entre tous ces différents écrans. Aussi, si j'utilise mes flèches ou que je fais le clavier, comme vous pouvez le voir, il me conduira aux différents écrans à gauche et à droite. Et si par exemple, je veux juste cliquer ici, cela me ramènera à la page d'accueil. Assurez-vous de comprendre que cela va fonctionner beaucoup plus lentement que sur votre ordinateur. Donc, par exemple, quand j'ai commencé à faire défiler, vous pouvez voir que Scrolls donnent, me donne ce genre de gyrus. Donc vous pouvez voir que je fais défiler, donc voici ma souris, mais elle ne bouge pas tout ça rapidement. Ce qui doit arriver, c'est qu'Adobe XD doit parcourir toutes ces pages, faire défiler toutes ces pages pour qu'il fonctionne. Donc, ne vous inquiétez pas si cela ne fonctionne pas la première fois que vous ouvrez ceci, cela fonctionnera la prochaine fois ou après cela dans la vitesse qui est prévue pour. Alors assurez-vous de le dire à votre client. Parce que parfois, surtout si votre client a une connexion Internet lente, cela ne fonctionnera pas comme il se doit, car cela fonctionne directement dans Adobe XD lorsque vous le concevez. Mais par exemple, le défilement fonctionne peut-être lentement, mais vous pouvez voir que ces éléments de navigation et dans ces icônes fonctionnent très bien. Donc, vous pouvez voir que nous avons l'effet de vol stationnaire et ainsi de suite. Et nous pouvons cliquer ici, et la navigation fonctionne très bien. Donc, si vous vous souvenez que 0.06 était là, il raconte fonctionne comme il se doit. Comme vous pouvez le voir, lorsque vous cliquez là où vous ne pouvez pas cliquer, fondamentalement comme celui-ci, il vous montre où vous pouvez réellement cliquer sur la page. Je ne comprends pas pourquoi il ne me montre pas ça. Je peux cliquer ici, mais peut-être que j'ai besoin de passer le curseur, alors il me montrera. Alors vérifions la défection. Comme vous pouvez le voir, l'animation fonctionne comme elle est prévue. C' est juste cette partie défilante, qui est juste un peu trop. Et pour une raison quelconque ce texte saute de haut en bas. Je ne sais vraiment pas pourquoi. Peut-être que nous pouvons vérifier cela dans notre conception. Mais je pense que c'est juste effacé ici. Alors comment peut-il sauter de haut en bas dans le même état ? Donc c'est probablement un problème parce que vous pouvez voir, par exemple, ici, il est debout. Quand un vol stationnaire, il va aux effets d'horreur vers le haut, vers le bas et puis vers le haut, vers le bas à nouveau. Et vous le déplacez de haut en bas comme vous l'avez vu. Donc c'est probablement juste un problème ici. Si on vérifie ça, ça marche. Donc tout fonctionne très bien. Et nous allons rapidement sauter à la connexion. Voyez comment cela fonctionne. Donc tout fonctionne bien. Allez à la connexion et allez à notre tableau de bord. Là, vous l'avez. Vérifions rapidement entre tous ces éléments. Donc la ferritine fonctionne comme il se doit. Vérifiez aussi rapidement Ds. Je n'aime toujours pas ça, mais tu m'as entendu dire ça plusieurs fois. Voyons voir, est-ce que le groupe de défilement fonctionne très bien. Voyons les prêts, les cartes, et chaque fois qu'un utilisateur clique à l'extérieur, donc par exemple, si je clique ici, vous pouvez voir qu'il me montre où les éléments sont réellement liés à certaines zones cliquables. Je peux donc cliquer sur tous ces éléments, mais je ne peux pas cliquer ici. Donc dès que je clique là, ça me montre dans cette couleur bleue, où puis-je réellement cliquer pour qu'il m'emmène quelque part ? Donc, nous avons tous ces complétés et quand je clique sur déconnexion, cela me ramènera à la page d'accueil. Maintenant, couvrons ce que vous voyez ici à droite. Donc tu peux voir ici, tu as quelque chose à dire. Commentaire pour démarrer la discussion peut signifier ou annoter le tableau de bord. Ce que cela signifie essentiellement, c'est que vous pouvez faire un commentaire ici. Alors disons, bienvenue au Design. J' espère vraiment que ça vous plaira. Et vous pouvez cliquer sur Soumettre. Et cela va juste être un commentaire général sur ce tableau d'art particulier et sur cette page. Donc, vous pouvez voir le désir de la page d'accueil, qui est évidemment cette page, est où ce commentaire est situé, mais il n'est pas situé nulle part à l'intérieur de la conception réelle. Donc, ce que vous pouvez faire pour la dette, c'est ici que vous avez mentionné un utilisateur qui est ceci à signe. Ainsi, vous pouvez mentionner l'utilisateur à l'intérieur de votre document solide dire que vous êtes un client est appelé RNR, John Doe par exemple. Et ils ont un compte Adobe. Vous pouvez mentionner à John Doe et il les avertira chaque fois que vous faites un téléchargement que vous faites un changement de lien, Avez-vous fait gagner des données HCUP, Je dois dire, faire tout commun Avez-vous fait un changement ? Il fera la notification sur leur compte et il ne les trouvera pas sur ce changement et il sautera et vérifiera par lui-même. Alors c'est pour ça, c'est plus facile. Vous pouvez voir ici que nous avons un commentaire, qui est celui-ci, et cela sera mis à jour au fur et à mesure que vous ajoutez de plus en plus de commentaires. Et ce que je voulais vous montrer, c'est par exemple, ceci. Donc, disons que le défilé à la disposition, vous avez ce spin. Vous pouvez cliquer dessus maintenez. Et comme vous pouvez le voir, vous pouvez le placer où vous voulez. Donc, par exemple, je peux le placer ici et dire quelque chose comme, que pensez-vous d'induire Harvard ? devoir parfait dans la couleur verte est trop fort. Par exemple, devrais-je réduire l'obésité et la rendre moins directe, scintillante ou plus légère ou plus élevée ? Nous voulons le dire. Cliquez sur Soumettre. Et encore une fois, nous avons ceci. Donc, nous avons la conception de la page d'accueil. Ça nous montre deux commentaires. L' un est le commentaire général, l'autre est le commentaire spécifique. Et quand vous passez la souris ici, vous pouvez voir que cela devient bleu et vous pouvez le pointer ici et vous pouvez cliquer dessus et cela vous mènera à cette zone spécifique. Donc, une fois de plus, vous pouvez le faire dans n'importe quel domaine de votre conception et de votre avis quand il commence à défiler, il n'est pas là, mais je dois aller vers le haut. Et ici, il est en fait afin qu'ils puissent cliquer, il les mènera à ce commentaire. Et ce qu'ils peuvent faire est de cliquer sur répondre. Et vous pouvez également placer un casier à des parties spécifiques de votre conception pour ce commentaire spécifique et ainsi de suite. Et enfin, ce qu'ils peuvent faire, c'est si nous choisissons de cliquer sur répondre et c'est bien. Un par exemple, cliquez sur Soumettre. Et ce que nous avons ici, c'est que je peux supprimer cela, je peux éditer ce commentaire, mais l'option qui manque à ce sujet est complète. Ainsi, ils peuvent, vous pouvez, vous êtes en mesure d'accomplir certaines tâches à l'intérieur d'ici. Disons que vous avez fait ce changement. Disons que vous avez téléchargé la nouvelle version de votre conception et les prototypes sont mis à jour, delink, changement est fait, client est notifié, ils sont heureux et vous pouvez cliquer sur l'option de résolution, que vous allez avoir. Et ça va supprimer ce commentaire et il va s'assurer de comprendre. Est-ce que vous avez résolu cela, appelons ça problème, mais disons que le changement de conception, changement de conception est fait. C' est la nouvelle version. C' est très bien. Allons maintenant passer à autre chose. Vous aurez donc cette option de résolution. Je ne l'ai pas parce que je le partage avec vous, en gros avec moi-même. C' est pour ça que tu ne peux pas le voir là. Ensuite, ce que nous avons est ici, pour que vous puissiez inviter des gens. Vous pouvez cliquer ici, les inviter par e-mail ou les inviter via leur compte Adobe, ce qui est encore mieux car ils ont plus d'options que de venir à ce prototype. Et une chose importante ici, vos clients n'ont pas besoin de compte Adobe pour accéder à ce prototype ou pour vivre des commentaires, ils peuvent simplement sauter ici et laisser des commentaires tout de suite. qui est, je pense que la grande chose que l'équipe Adobe a fait parce que ces gens ne sont pas que leurs clients de toute façon, donc ils n'utiliseront pas ces produits comme XD, Photoshop, Illustrator et ainsi de suite. Vous êtes leur client. Donc, en tant que concepteur, et donc vous avez besoin de ce compte, ils ne le font pas, et c'est très bien. Ici, nous avons le niveau zoomé afin que vous puissiez aller à la valeur par défaut, par exemple, vous pouvez voir comment cela fonctionne. Ici, vous avez l'option plein écran. Vous avez des questions. Ce sont des notifications pour votre compte et vous pouvez accéder à votre compte ici. Nous avons tous les commentaires d'écran juste ci-dessous. Donc, je peux les cacher, par exemple, les montrer. Je peux cacher les annotations. Donc, si un saut ici, c'est l'annotation. Donc vous pouvez voir ces cercles orange. Je peux simplement le cacher et je peux filtrer les commentaires. Donc, je peux filtrer, par exemple, par qui posté par jour et ainsi de suite, n par l'aéroport aussi bien. Et enfin, je peux signaler des commentaires inappropriés ici. Si je veux. Permettez-moi de vous montrer rapidement juste pour la fin et ceci, qui est l'option plein écran. Désolé, mon appareil photo est devenu un peu bizarre, mais je pense que ça marche maintenant très bien. Donc, une fois de plus, c'est votre option plein écran. Ainsi, lorsque vous cliquez là, vous pouvez voir comment cela fonctionne et vous pouvez ensuite afficher à l'écran appliqué à votre client lorsque ce site Web est réellement publié à quoi il pourrait ressembler lorsqu'il est publié. Ainsi, comme vous pouvez le voir, toutes ces options fonctionnent. Chaque chose ici fonctionne. Et vous pouvez passer à la page que vous voulez. Cela vous mènera là-bas et vous pouvez leur montrer comment tout cela va fonctionner et ressembler à une fois qu'il est réellement codé et en direct, ce que vous pouvez faire pour revenir d'ici est frappé escape et votre clavier. Et cela vous ramènera à cette page précédente. Donc, c'est fondamentalement tout à propos du partage avec votre client. Dans la vidéo suivante, je vais vous montrer comment le partage avec les développeurs fonctionne. Alors je te verrai là-bas. 67. Partage du design avec des développeurs: Donc, nous sommes de retour dans Adobe XD et je voulais juste vous montrer rapidement comment cela fonctionne comme lorsque vous partagez avec des développeurs. Donc, fondamentalement, ils ont toutes les mêmes fonctions que les clients, mais ils sont un peu plus avancés parce qu'ils sont développeurs après tout fini besoin de choses différentes. Puis les clients. Les clients ont besoin d'une conception visuelle et c'est pourquoi vous les avez partagés avec cette évaluation de concepteur. Ils doivent fournir vos commentaires et commentaires sur votre conception afin que vous puissiez apporter les changements nécessaires pour atteindre ce que certains or que vous et vos clients avez, tandis que les développeurs ont d'autres objectifs. C' est pourquoi lorsque vous cliquez sur développement ici, vous pouvez voir l'exportation pour le Web, l'exportation pour iOS ou l'exportation pour Android. Donc, si vous choisissez l'exportation pour un web, c'est ce que c'est essentiellement parce que nous avons créé un design de site web ici. Vous pouvez inclure des actifs téléchargeables, mais je n'ai pas marqué d'actifs en utilisant marc pour l'exportation. Et je peux vous le montrer rapidement ici, à l'intérieur de notre design. Donc, si un saut à l'intérieur d'ici, et disons que je voulais exporter cette image directement. Je peux aller à l'intérieur de mon panneau Calques. Donc ici, nous avons un couple heureux et vous avez cette option. Donc, vous pouvez utiliser le décalage E ou vous pouvez cliquer ici. Et il inclura cette vision de l'image. Si je vais à la forme de mon héros , par exemple, je peux cliquer dessus aussi. Et nous allons utiliser ces éléments de héros comme un exemple, juste pour que vous puissiez voir à quoi ressemblent tout ça. Et vous pouvez évidemment le faire tout au long de votre conception. Je ne fais pas ça parce que j'aime exporter mes actifs plus tard. Et je vais vous montrer comment cela fonctionne également dans la prochaine section du discours. Mais pour l'instant, rendons les exportables ici, revenons au développement des options d'actions. Et maintenant, vous pouvez voir que nous avons cinq actifs. Donc, si je survolais ici, vous pouvez voir que nous pouvons inclure SVG B et G, un et 2x ainsi que PDF. Encore une fois, cinq actifs. Si je saute à mon design, si je vous montre ce que j'ai inclus, donc j'ai inclus cette image, fait des formes, donc c'est 2345. Donc, il sait combien d'éléments j'ai inclus pour le partage et pour un téléchargeable. Donc, nous allons cliquer sur leurs développeurs seront en mesure de télécharger ces actifs directement à partir du navigateur. Vous n'aurez donc pas à les exporter plus tard, puis à les partager avec eux de cette façon. Donc je voulais juste te montrer les deux côtés. J' aime faire la deuxième façon, qui est d'exporter manuellement tous mes actifs parce que je vais alors créer un litre, le guide de style. Et à l'intérieur du guide de style, je vais énumérer tous ces éléments, mais pas les images. Je vais énumérer tous ces autres éléments, mais vous pouvez le faire de cette façon également. Donc, une fois de plus, n'importe qui avec le lien, vous pouvez choisir ce que vous voulez ici. Vous pouvez ajouter différentes personnes ici afin que vous puissiez cliquer sur Derek, elles doivent avoir leur propre compte Adobe pour accéder à cette option. Mais comme je l'ai dit, vous n'avez pas besoin d'un autre lien. C' est essentiellement le même lien. Vous pouvez simplement cliquer sur le lien de mise à jour et il s'arrêtera, commencer à mettre à jour. Et une fois qu'il se met à jour et atteint 100 ici. Et puis je vais vous montrer à quoi cela ressemble à l'intérieur du navigateur. Et maintenant qu'il est terminé de mettre à jour le lien, je peux simplement appeler ici à mon navigateur. Je peux cliquer sur Actualiser, ou je peux revenir au XD et cliquer sur copyright ici et je peux le partager de cette façon avec mon client. Donc maintenant vous avez ces options ici, que nous n'avions pas auparavant, qui sont pour le développement. Donc, je vais simplement le laisser charger pendant une seconde, et je vais ensuite vous expliquer ce que sont ces deux options. Alors maintenant, quand il se charge et que vous survolez ici, vous pouvez voir qu'il est écrit, si on pense juste que c'est le cas, alors laissez-moi juste cliquer dessus. C' est les spécifications du design. Donc, fondamentalement pris bande, utiliser une poignée pour zoomer, utiliser le contrôle et la molette de la souris, ou utiliser une liste déroulante si vous voulez zoomer. Fondamentalement ce que cela signifie est chaque fois que vous passez le curseur sur tous ces éléments, vous pouvez cliquer et il vous montrera toutes ces différentes options. Ainsi, vous pouvez voir la largeur du texte, vous pouvez voir la hauteur du texte. Vous pouvez voir les distances entre tous ces éléments. Donc, si je passe comme celui-ci par exemple, vous pouvez voir que nous sommes à 91 du haut. Nous sommes à 71 de la droite. Et nous sommes 3.3.2 du bas de notre image de héros. Si je choisis mon bouton, vous pouvez voir que c'est 366 avec 70. Et vous pouvez planer ici et voir 296 de la fin de ce texte. C' est ce qu'il dit, 140, c'est 50 ici. Si je clique ici, c'est 50 ici et ainsi de suite. Vous pouvez faire la même chose essentiellement pour tous ces éléments. Et lorsque vous cliquez sur l'un de ces éléments, vous pouvez voir le nom. Donc Launch conçu pour tout le monde, c'est le texte, mais nous allons juste utiliser l'image par exemple. Vous pouvez voir l'image. Donc homme heureux, c'est la largeur, c'est la hauteur, c'est l'apparence. L' opacité est de 100%. C'est le diable. Donc, nous n'avons pas d'oeufs parce que c'est l'image et nous avons ce code CSS. Ainsi, ils peuvent sélectionner ce code CSS et copier s'ils veulent l'utiliser dans leur processus de développement. Donc, fondamentalement, ils peuvent le faire aussi. Ils peuvent cliquer dessus et vous pouvez voir que nous avons la bordure de cette couleur. Et nous pouvons nommer la couleur, puis lui donner cette variable de jeton de conception. Il est donc beaucoup plus facile pour les développeurs de travailler avec ces jetons de conception. Je ne l'ai pas fait parce qu'il ne voulait pas vous confondre davantage avec toutes ces options, ce qui est fondamentalement juste un peu plus avancé et tout cela. Mais fondamentalement, ils peuvent simplement utiliser cette couleur. Et parce que nous allons exporter toutes nos couleurs plus tard, alors ils peuvent choisir ces couleurs, les mettre à l'intérieur du CSS et ensuite simplement les utiliser comme ça avec leur propre nom. Donc, il n'a pas besoin d'utiliser de jetons de conception. Ici. Encore une fois, nous avons cercle, nous avons en pixels, donc fondamentalement 8080 et nous avons des axes x et y. Ils peuvent cliquer ici et utiliser des points ou utiliser DP s'ils le souhaitent. Nous avons la variable 6x ici, mais ils peuvent également utiliser RGBA. Ils peuvent utiliser un. Nous n'avons pas de tiret, nous n'avons pas d'écart dans un coup acheté Gapminder rejoint au festival haut pourcentage. Donc, toutes ces options sont incluses à l'intérieur de sorte que les développeurs peuvent facilement y accéder et simplement copier ces options, les basant à l'intérieur de leur citation, il est beaucoup plus rapide pour eux alors de travailler comme ça. Si je clique ici, nous pouvons voir que ce sont nos composants. Donc, fondamentalement nav principal, son état pulmonaire. Nous en sommes donc à cet état particulier sur cette page. Et puis ils peuvent voir toutes les options à l'intérieur. Donc, nous avons enveloppé rectangle appelé nav Bg, nous avons l'apparence, donc 10101010, rond sur tous les coins, si vous vous souvenez. L' obésité est 100% de couleur. Est-ce fff, une fois de plus une couleur sans nom parce qu'ils ne lui ont pas donné le jeton de conception. Mais encore une fois, vous pouvez le faire aussi si vous le voulez. Il a cette ombre. Donc, quand vous survolez, vous avez cette couleur. Ainsi, vous pouvez cliquer sur cette couleur, il va le copier et puis vous pouvez coller le flou de fond, l'obésité de luminosité. Et enfin, nous avons CSS pour cela. Donc, vous pouvez choisir de copier, et je peux cliquer sur mon CSS pour le copier. Et peut, par exemple, sélectionner celui-ci. Css copié, et ils peuvent simplement coller à leur éditeur de code de choix. Encore une fois, vous avez ces distances, donc nous sommes 50 du haut, 138, à gauche et à droite, et 70-30 au bord inférieur de notre conception. Vous pouvez également faire défiler vers le bas et le faire pour n'importe lequel d'entre eux que vous voulez. Donc si je bouge ici et que je le déplace, vous pouvez voir que pour celui-ci, nous le sommes, voyons 100 d'ici. Nous sommes à 100 d'ici. Et vous pouvez, vous avez la photo, vous pouvez obtenir ça pour tout ça. Enfin, permettez-moi de cliquer ici pour vous montrer ces variables. Donc vous pouvez voir, laissez-moi me déplacer moyeu à la façon dont vous avez toutes ces variables. Donc, les couleurs racine, la police, les valeurs de texte, les styles de caractères, le style de caractères sans nom pour le style F3, ainsi de suite sur le logiciel. Donc, ils ont ces variables et ils peuvent les copier et les utiliser dans leur travail de code. Donc c'est fondamentalement tout. Ici, sur l'écran principal. Nous sommes des détails filtrés, donc nous avons toutes les couleurs utilisées et assurez-vous juste comprendre qu'il ne s'agit pas seulement d'échantillonner les couleurs que nous avons utilisées. Donc ce sont nos couleurs réelles juste ici sur le dessus. Toutes ces autres couleurs sont essentiellement échantillonnées à partir de cette image, ces icônes, cette image et ainsi de suite. Donc fondamentalement juste pour comprendre, ce sont toutes les couleurs utilisées tout au long de notre conception, mais vous allez leur envoyer nos couleurs principales. Ils vont donc utiliser ces couleurs principales à la place. Il s'agit de la taille de la clôture, c'est la taille de la conception. Donc 1920 par 4959. C' est donc la hauteur totale de notre tableau d'art de design. Nous avons des styles de personnages, donc nous les avons ici, et vous pouvez cliquer ici pour y accéder. Donc les Poppins de la famille de polices, le poids de la police, la taille de la police régulière 18. Il s'agit de la couleur, espacement des caractères et de l'espacement des lignes, ce qui est encore une fois vraiment important pour le CSS, car ils peuvent , à partir d'ici, utiliser tous ces paramètres. Donc, une fois de plus, si vous voulez, vous pouvez sélectionner chaque chose dans le téléchargement ici et ils peuvent le télécharger directement à partir d'ici. Mais si ce n'est pas le cas, je vais vous montrer dans la prochaine partie du cours, que nous allons voir plus tard. Comment ils peuvent, comment vous pouvez organiser, éditer, exporter tout, et les envoyer pour une utilisation ultérieure. Grille de disposition. Vous pouvez voir que nous avons même la grille. Donc colonnes largeur de gouttière, largeur de colonne, marge n. obésité. L'obésité est essentiellement l'obésité de ces lignes de grille afin que vous puissiez les voir mieux une fois que vous commencez à concevoir. Et enfin ici, nous avons différentes interactions pour différentes pages. Donc, nous avons l'action est la transition, la destination est la conception de la carte. Si nous cliquons dessus, cela me conduira à cette page. Et je peux voir toutes ces choses ici. Donc c'est fondamentalement tout. Revenons rapidement à la page d'accueil. Si je peux aller de là, je peux cliquer sur le menu bang pour prendre à la page d'accueil. Et puis si je clique ici, vous avez ces actifs ici. Ainsi, ils peuvent simplement cliquer sur les actifs. Il montre le bouton de téléchargement, j'espère que vous pouvez le voir. Et puis une fois que vous cliquez sur Télécharger, Comme vous pouvez le voir, il a déjà commencé à télécharger. Il va le télécharger en SVG, ce qui est de loin le meilleur format pour travailler avec les codeurs plus tard, enfin, si je clique dessus, cela me montre ce qu'il est sélectionné, Montrez-moi à télécharger et ainsi de suite et ainsi de suite. Mais si je veux planer dessus, par exemple, ici va montrer l'apparence, va montrer le dégradé parce que c'est la direction du dégradé, pourcentage ou actif basicity. Et enfin, ils ont la possibilité de télécharger. Donc, une fois de plus, si vous prévoyez de les faire télécharger directement à partir d'ici, alors vous pouvez, dès que vous positionnez quelque chose à l'intérieur, il affecte D, vous pouvez marquer pour l'exportation plus tard lorsque vous téléchargez votre design pour examen et pour un ils vont pouvoir cliquer ici et télécharger les ressources directement à partir d'ici. Mais une fois de plus, n'oubliez pas si vous n'utilisez que ce seul projet sur une version gratuite d'Adobe XD. Les développeurs ont besoin de temps pour développer cela. À ce moment-là, vous avez passé au projet suivant et vous devez supprimer dans ce projet de votre compte et de votre ordinateur. Et par conséquent, ils ne pourront plus accéder à ce projet. Donc la prochaine option que je vais partager avec vous est permanente. Et vous serez en mesure de partager cette option avec votre client et vos développeurs. Donc ils vont pouvoir garder le dossier indéfiniment. Donc, par exemple, s'ils décident de développer ce dossier, disons que dans deux ans, ils l'auront toujours. Mais de cette façon, vous devrez garder ce prototype en ligne afin qu'ils puissent télécharger et développer toutes ces choses. Donc c'est tout pour cette vidéo. J' espère vraiment que vous comprenez à quel point c'est facile à partager, quel point il est facile d'accéder à vos clients et développeurs, quel point tout est simple et rationalisé. Donc, toute l'animation fonctionne bien, toute l'interaction fonctionne comme il se doit, et tout est au même endroit. Donc, le développement de conception partage, afin que tout le monde dans l'équipe puisse y accéder facilement et tout le monde peut travailler ensemble sur ce projet particulier. Dans la section suivante du cours, je vais vous montrer comment vous pouvez extraire tous ces actifs, comment vous pouvez les structurer, les emballer, puis les envoyer à vos clients et développeurs pour une utilisation ultérieure. Parce que, comme je l'ai dit, parfois ces projets peuvent prendre des mois à se développer. Donc, cette façon n'est pas la meilleure option pour quiconque utilise le plan gratuit. Si vous utilisez un forfait payant offert obésité et que vous avez un stockage illimité, vous avez des options de partage illimitées pour les liens et ainsi de suite. Alors qui s'en soucie ? Vous pouvez simplement laisser ce lien et ils pourront y accéder plus tard si vous le souhaitez. Encore une fois, vous pouvez le protéger par mot de passe. Donc, chaque fois que quelqu'un doit y accéder, il doit utiliser le mot de passe et ainsi de suite. Donc tout ce dont nous avons parlé dans ces leçons sur le partage. Une fois de plus, dans la prochaine vidéo, nous allons passer à la structure de partage et d'emballage, puis enfin, livrer vos actifs aux développeurs et aux clients. Alors je te verrai là-bas. 68. Créer des jetons de conception: Avant de nous lancer dans l'exportation, et je vous montre comment vous pouvez exporter des ressources directement sur votre ordinateur, puis les partager avec les développeurs et les clients. Je veux couvrir rapidement deux choses. Le numéro un est les jetons de conception et le numéro deux est les systèmes de conception. Les deux sont donc très importants. Les deux sont fondamentalement critiques dans le système de conception. Si vous voulez les implémenter, je ne voulais pas les implémenter dans ce projet et je vais expliquer pourquoi. Mais je voulais juste vous montrer que vous avez aussi ces options, surtout si le projet est à l'échelle et de plus en plus grand. Donc, comme vous pouvez le voir, je suis de retour dans mon fichier Adobe XD et je vais sauter ici. Et comme vous pouvez le voir ici, nous avons juste ces couleurs de base. Et ces couleurs de base sont faites comme ça sur le but, juste pour vous montrer ce que vous pouvez faire avec conçu Tolkien maintenant. Donc, les jetons de conception sont fondamentalement des noms de vos couleurs, des noms de vos polices, et ainsi de suite. Donc, les jetons de conception vont être utilisés plus tard par les développeurs. Et personne ne vous a montré cela dans la vidéo précédente dans le partage avec les développeurs. Donc maintenant je vais vous montrer, si vous vous souvenez, nous avions la dette couleur sans nom et ainsi de suite. Je vais vous montrer comment vous pouvez corriger cela et quelques conseils et astuces pour améliorer votre plancher de toit encore mieux et partager avec les développeurs encore mieux. Commençons donc à changer la couleur de votre police. Tu peux, désolé de ta couleur. Vous pouvez simplement cliquer avec le bouton droit de la souris et vous pouvez renommer ou vous pouvez double-cliquer ici, et vous pouvez voir qu'il s'appelle nom d'élément. Nous pouvons simplement l'appeler, par exemple, blanc uni. Et ils utiliseront Candice Dash. Et j'utilise des tirets essentiellement à cause du code. Donc, si vous savez quoi que ce soit sur deux codes, vous ne pouvez pas utiliser de majuscules, vous ne pouvez pas utiliser d'espacements. Par conséquent, vous pouvez utiliser des tirets ou des tirets inférieurs. Donc, soit celui-ci, soit laissez-moi vous montrer celui-là. Donc, soit un droit, soit celui du bas. Donc c'est vraiment à vous de choisir. J' utilise le bas tout au long de ma conception, mais je veux juste vous montrer que vous avez cette option aussi. Ensuite, nous pouvons double-cliquer ici et appeler celui-ci gris clair. On peut appeler ça gris foncé. Maintenant, nous pouvons appeler cela, par exemple, signifie vert. Et celui-ci est vert secondaire. Et celui-ci parce qu'il est entre le vert et le bleu. On peut appeler ça quelque chose comme, je ne sais pas, la couleur méchante. On peut appeler ça, voyons. Gris foncé. On peut l'appeler presque noir. Et enfin, on peut appeler ça un danger rouge. J' ai volontairement donné ces couleurs, ces noms au lieu de simplement blanc à gris et ainsi de suite. Juste parce que vous, les développeurs et les clients seront en mesure de comprendre toutes ces couleurs. Dans certains cas, par exemple, si votre client a déjà une partie de la marque, panneau de marque intégré ou qu'ils ont quelque chose comme une ligne directrice de marque. C' est génial parce que vous avez toutes ces couleurs ou prêt. Et dans la plupart des cas, vous avez déjà des noms de couleur, donc vous allez simplement utiliser ces noms de couleur comme ceux-ci. Et par conséquent, il va être beaucoup plus simple pour vos développeurs finaux clients de travailler à partir de Dana parce qu'ils ont déjà ces couleurs. S' ils n'ont pas les couleurs, comme dans notre cas, nous allons créer les couleurs à partir de zéro. Et je vous ai déjà montré que par certains, échantillonnant d'autres couleurs en copiant et collant des couleurs similaires à celles-ci et en leur donnant simplement des noms. Encore une fois, ces noms sont vraiment importants en tant que jetons de conception. Et une fois de plus, je n'ai délibérément pas les créer au début était un deck est de vous montrer comment nous pouvons les créer ici et comment il est plus facile pour les développeurs de travailler à partir d'ici. En outre, plus tard, quand nous commençons avec le guide de style, au lieu de simplement mettre le blanc, gris et ainsi de suite, nous allons mettre ces noms exacts plus les valeurs hexadécimales. Et je vais vous le montrer plus tard dans vidéo plus tard quand nous arriverons au guide de style. Maintenant vient la partie du partage avec les développeurs. Donc maintenant que nous avons créé ceci, vous pouvez aller de l'avant et frapper sauver parce que vous pouvez voir que nous avons ceci juste ici. Je vais réellement passer à partager. Cliquez sur la conception de mon site web. Nous avons déjà le lien que nous avons créé précédemment. Je vais simplement cliquer sur le lien de mise à jour. Et maintenant, lorsque le lien se met à jour, je reviendrai vers vous et je vais vous montrer que dans l'option de partage de spécification du développeur, ce qui a changé aux versions précédentes. Ok, donc maintenant que c'est fini, vous pouvez voir qu'il est mis à jour. Laissez-moi vous déplacer rapidement sur le prototype lui-même. Donc nous y voilà. Si nous voulons ici les spécifications du développeur, vous pouvez voir que nous avons tous ces actifs. Maintenant, quand je survole cela, vous pouvez voir tout de suite que nous avons le code hexadécimal, qui est tous Fs dans ce cas parce que c'est tout simplement blanc. Et nous avons le blanchiment de l'avion que nous avons donné à notre couleur d'origine. À côté de cela, vous voyez que nous avons gris foncé. Gris clair, presque noir et couleur moyenne. Maintenant, si je survolais et cliquez ici, par exemple, sur ce bouton, vous pouvez voir que c'est la couleur principale. Si je clique ici, vous pouvez voir qu'il est blanc. Si je vais plus un et par exemple cliquez ici et aller plus loin. Voyons voir. Je peux faire ça ? Donc, nous avons un vert amine ici il est léger grand quand je clique sur ce fond. Et si nous avançons plus loin, et par exemple, cliquez ici, vous pouvez voir que nous avons le gris clair, mais ce bouton, par exemple, est notre couleur principale. Si je clique sur le hover et clique directement à l'intérieur de là, vous pouvez voir que nous avons ce sens vert et sous l'état par défaut, nous avons la couleur principale à la place. Alors c'est tout pour celle-là. Et ici, vous pouvez voir que nous avons à l'intérieur du CD, CSS, toutes ces valeurs changent. Donc, par exemple, si je retourne à mes variables, vous pouvez voir que nous avons dangereux et la couleur hexadécimale à côté de lui, presque noir, sombre, racial. Toutes ces couleurs que nous avons renommées sont ici sur le côté gauche. Donc ceux-ci apparaissent également ici dans les options de partage du d. Et les développeurs seront en mesure de trouver simplement ces variables et simplement sélectionner, Copier et coller les à l'intérieur de leur code. Il est donc beaucoup plus facile pour eux de changer globalement couleurs lorsque vous avez ces noms de couleurs au lieu de quatre DEM, donnant ces noms de couleurs plus tard lorsque vous êtes réellement plus à l'intérieur de votre processus de conception et de développement. Alors c'est tout. Ce sont vos jetons de conception. J' espère que vous comprenez combien ils sont importants. J' espère que vous comprenez à quel point ils sont faciles à mettre en œuvre. Fondamentalement, le conseil ici est dès que vous commencez à travailler, dès que vous commencez à appliquer ces couleurs, donnez ces noms de couleurs car il sera beaucoup plus facile plus tard de travailler avec ces couleurs dès que vous leur donnez des noms. Donc, c'est fondamentalement tout pour les jetons de conception. Dans la prochaine vidéo, nous allons en fait passer à la conception de systèmes. Nous n'avons pas créé de système de conception pour ce projet, mais je vais vous montrer un excellent exemple. Montrez pourquoi ils sont importants et comment vous pouvez aller de l'avant et en créer un. Alors je te verrai là-bas. 69. Créer un système de conception: Enfin, permettez-moi de vous montrer le système de conception, ce qu'ils sont. Pourquoi sont-ils utiles dans ce que vous pouvez faire pour en créer un pour vous-même ? Donc ici, j'ai ouvert ce système de conception gratuit que j'ai trouvé en ligne. Ça s'appelle le système de conception carbone. Et il est créé par IBM. Et si vous savez quoi que ce soit sur la technologie, IBM est cette énorme marque mondiale qui travaille autour de la technologie depuis des décennies. Et vous pouvez tout voir ici. Ainsi, vous pouvez taper dans carbon design system.com. Et vous pouvez ouvrir tous ces panneaux et explorer ce qu'il est exploré, différents explorateurs de données et différents composants, différents éléments, visualisation de données, etc. Donc, fondamentalement, ce qu'est un système de design, c'est un langage de la marque. Donc, tout ce que vous faites autour du design, pas seulement tous ces éléments, mais comment le design va parler à votre client ? Comment il va s'adapter aux différents écrans, les peaux entrent en position sur le marché à côté de la concurrence. Comment va ressembler dans, par exemple, cinq ou dix ans, comment ça va se développer. Donc, disons que maintenant vous avez cinq pages, mais dans l'année prochaine, vous allez ajouter 100 pages différentes. Vous avez donc besoin de tous ces différents éléments pour évoluer proportionnellement, pour évoluer uniformément et pour s'adapter à tous ces changements de marché dans toutes ces positions. C' est pourquoi les systèmes de conception sont formulés et c'est pourquoi je vous recommande toujours de commencer par les systèmes de conception. Les systèmes de conception ne sont pas seulement destinés aux grandes marques, ils peuvent également être utilisés pour les petites marques. Mais assurez-vous juste de comprendre que pour les petites marques, il y a évidemment plus petite quantité de tous ces composants, plus petite quantité d'histoire et ainsi de suite et ainsi de suite. Donc, si nous le reprenons juste une fois de plus ici, vous pouvez voir concevoir, développer, contribuer à ce qui se passe. Vous pouvez donc consulter leurs directives. Et vous pouvez voir, par exemple, oser utiliser cette grille 2x. Et vous pouvez faire défiler vers le bas et voir et jouer avec ces vidéos. Était colline hache plus grand est le cadre d'organisation pour la façon dont il fonctionne et comment il s'adapte à toutes ces différentes pages. Vous pouvez donc en lire plus à ce sujet. Si vous n'utilisez pas cette grille et que vous utilisez la grille Bootstrap par exemple, comme nous le sommes, vous allez faire cette documentation, pas dans ce cas évidemment, mais vous pouvez la créer, par exemple, comme un oeuf séparé, un fichier, au format PDF. Vous pouvez créer une page Web en ligne, par exemple, pour cette marque et ainsi de suite. Ensuite, nous avons l'accessibilité, soi-disant facilement inaccessible. Votre site Web est destiné aux personnes dans le besoin, par exemple, du contenu. Vous pouvez voir la voix et le ton, les niveaux de conversation, moins de conversation, plus de conversation, ainsi de suite. Couleur. Que représentait la couleur dans ce système de conception ? Icônes, comment vous allez utiliser ces icônes, vous pouvez voir là ou non. n'y a pas de variation d'icônes ici. Ils ressemblent tous à cela. Les pictogrammes, l'espacement des mouvements considère la typographie. Donc, évidemment, beaucoup de ces choses différentes sont ce qui rend le système complet et complet de conception. N' ayez pas peur de tout ce que vous voyez ici à gauche parce que comme je l'ai dit, c'est IBM. Ils ont des milliers de personnes différentes qui travaillent pour eux. Je vous encourage vraiment à explorer des systèmes de conception en ligne qui sont un peu plus petits que celui-ci et plus faciles à comprendre, plus faciles à consommer. Mais je vous montre ce que les géants de l'industrie font pour que vous puissiez mieux comprendre ce qui a évolué dans les données du système de conception. Donc, vous pouvez voir, par exemple, nous allons utiliser le mouvement. Et vous pouvez voir tous ces différents mouvements et comment ils sont inclus dans ce paquet complet de système de conception. Vous pouvez donc voir cette motion ici. Donc, taper des points, développer des points, points de navigation et ainsi de suite. Donc tout va à un point, point échange ses cercles changeants et ainsi de suite. Et remarquez juste que nous avons et ce contour juste ici, donc nous n'avons pas de formes remplies. Nous avons les contours. Ce sont des courbes bayésiennes, alors comment elles se déplacent et ainsi de suite. Donc, toutes ces informations sont incluses dans le système de conception. Donc, pour éviter que je ne sois assis ici à vous parler pendant des heures, vous pouvez simplement aller sur carbon design system.com et je vais m' assurer de laisser un lien dans le PDF pour que vous puissiez cliquer et y accéder aussi. Donc, vous pouvez vérifier. Et maintenant, revenons au fichier et voyons comment il se traduit en fichier Adobe XD lui-même. Donc, comme vous pouvez le voir, nous avons encore ces couleurs. Et vous pouvez voir qu'ils appellent IT grade 20 vol stationnaire, ce qui signifie qu'il est gris, 20% d'opacité et qu'il s'affiche en vol stationnaire. Ainsi, vous pouvez voir comment ils traitent avec les jetons de conception. Donc c'est violet, 60, c'est bleu 20. Mais fondamentalement, ils se déplacent tout simplement tout au long de la conception et vous pouvez voir tout cela. Et là, nous avons des styles de personnages, beaucoup d'entre eux, nous avons différents composants, aussi, beaucoup d'entre eux. Donc, fondamentalement, ils créent des composants pour chaque étape du parcours de conception. Donc si je vous emmène ici, c'est le fichier de mise en route. Évidemment, lisez ceci si vous voulez. Comment pouvez-vous utiliser ce fichier et ainsi de suite. Ensuite, nous avons des jetons de type. Donc, les jetons de type ne sont pas encore pris en charge dans XDS off, mais ils le seront définitivement à l'avenir. Donc, juste les jetons de couleur sont pris en charge. Et je vous ai montré que dans la vidéo précédente, ces Dawkins profonds vont être définitivement soutenus plus tard. Donc, vous pouvez aussi bien vous familiariser à ce sujet. Donc, au lieu de votre police ressemblant à ceci, vous pouvez la renommer. Et puis ça va ressembler à ça. Ainsi, vous pouvez l'appeler, par exemple, code 01, code 02. Et vous pouvez leur donner ce genre de hachages et ce genre de, appelons-ça des noms. Ainsi, les développeurs vont être plus faciles à utiliser à l'intérieur du code plutôt que simplement comme ceci. Ainsi, par exemple, vous pouvez voir l'imitation. C' est donc une barre oblique de type mono, une barre oblique de type mono, oblique de type IBM Mano. Donc, tous ce sont des jetons de type. Ensuite, nous avons des jetons de couleur, et ce sont ceux que je vous ai déjà montrés. Donc, ce sont les valeurs de hachage sont au niveau des développeurs vont les utiliser. C' est le rôle, donc l'arrière-plan de la page par défaut, c'est la valeur, donc blanc et le fff est aussi du code hexadécimal. Donc, vous pouvez passer par tout cela et vous pouvez dialoguer. C' est gratuit, de sorte que vous pouvez l'explorer plus en détail. Nous avons des composants, des composants, accordéon et ainsi de suite. Donc, si je clique sur mon composant et retourne ici, et voyons où il peut vous montrer que mieux. Voyons voir. C' est probablement quelque part en bas. Ici, c'est. Comme vous pouvez le voir, nous avons ce squelette. Nous avons désactivé, ouvert, focus et hover. Donc, fondamentalement, ils ont créé un seul composant pour cet élément particulier, puis lui ont donné toutes ces options. Donc, à l'état par défaut, c'est à quoi cela ressemble. Donc, c'est une liste déroulante. Donc objet accordéon hover. Alors à quoi il ressemble lorsque les gens survolent, se concentrer à quoi il ressemble, par exemple, lorsque vous cliquez et que vous voulez taper quelque chose, c'est l'état de mise au point, état ouvert, évidemment quand il se développe désactivé. Donc, quand les gens ne peuvent pas cliquer dessus, squelette, qui est juste un simple, filaire de base et squelette ouvert. Donc, vous voulez afficher l'état ouvert pour votre filaire aussi. Ils ont des différences pour tous ces autres éléments. Ainsi, vous pouvez sauter rapidement ici et voir, par exemple, nous allons voir quatre boutons par exemple. Ou si nous pouvons trouver des forums, Voyons la dette. Alors voyons ce qu'ils ont aussi comment ici, essayons-le sur ceux-ci. Donc, ici, nous avons, par exemple, cette belle liste déroulante. Donc, nous avons plané, focus, squelette et ouvert. Et vous remarquerez peut-être un quatre à partir de maintenant, ils utilisent les mêmes couleurs jour en utilisant les mêmes techniques. Ils utilisent les mêmes superpositions, ils utilisent les mêmes contours, donc tout est pareil. Tout au long de votre conception. C' est là qu'un système de conception entre en jeu. Et dans l'ensemble, lorsque vous commencez à utiliser ce produit comme un site Web, a une application mobile comme tableau de bord, peu importe, il va regarder comme il appartient au même produit. Donc vous pouvez voir ceux-ci ici je suis sur l'état par défaut. Ici, nous sommes en vol stationnaire. Donc, fondamentalement, vous pouvez voir qu'ils ont créé tous ces états et fondamentalement présenté toutes ces options juste ici à l'intérieur de ce port d'art. Donc ici, nous avons l'horreur d'état par défaut, focus qui est celui-ci, squelette qui est celui-ci, ouvert, qui est celui-ci. Vous pouvez donc voir clairement ce qu'ils ont fait avec ce système de conception. Encore une fois, c'est une option fantastique pour montrer à vos clients et développeurs toutes ces options différentes. Et c'est aussi un moyen fantastique. Par exemple, vous avez terminé ce projet. Vous avez pris votre argent, vous l'avez fini, vous l'avez envoyé aux clients et aux développeurs. C' est très bien. Tout le monde est heureux. Mais dans un an, par exemple, si quelqu'un d'autre vient ici et veut modifier ce fichier, il sera beaucoup plus difficile pour eux de le faire. Lecture de tout système de conception en place ou au moins des directives de conception. Alors. Avoir un système de conception en place, même pour les petits projets et les produits est une façon fantastique de faire les choses. Ici. Ensuite, je peux vous montrer ceci pour que vous puissiez voir que nous avons des choses modales, si différentes apparaissent ici et là. Nous avons des notifications. Donc, par exemple, quelque chose va mal erreur ici et ainsi de suite. Et vous pouvez remarquer pour tous ces styles, ils ont inclus ces différents styles. Donc tout fonctionne comme il se doit. Tout semble appartenir à ce même projet. Ainsi, vous pouvez voir qu'ils ont inclus tous ces différents composants pour tous ces styles différents. Plus tard, les développeurs peuvent ensuite intégrer cet encodage. Par exemple, allons ici et voyons. Ainsi, par exemple, focus par page. Donc, vous pouvez voir que nous avons ce contour bleu développeurs peuvent utiliser, par exemple, épaisseur de la date limite, la couleur de la date limite, un rectangle arrondi ou non. Dans ce cas, il est complètement droit et ils peuvent tout de suite, s'adapter à ces changements dans le froid. Donc, chaque fois qu'il y a concentration, comme vous pouvez le voir ici, et ces changements vont s'appliquer. Mais vous devez toujours les montrer dans la conception et vous devez toujours les appliquer dans tous vos éléments juste pour montrer au client, aux développeurs, puis aux utilisateurs, peut-être même aux coéquipiers comment cela va ressembler quand il est là. Donc, en gros, c'est tout. Vous pouvez vérifier toutes ces choses, toutes ces modifications. Et maintenant minimisons cela afin que je puisse vous emmener à notre dossier et vous expliquer comment tout cela peut être fait dans notre dossier. Donc, fondamentalement, si je vous ramène à notre bouton d'origine, par exemple, qui est ce 1er mai être Rican, donnez ce bouton tous ces mêmes paramètres afin que nous puissions montrer hover, que nous avons déjà. On peut montrer la mise au point désactivée. Mais ici, nous n'avons pas d'état désactivé car nous ne pouvons pas désactiver la connexion. Ils doivent cliquer là. Vous devez donc penser à toutes ces choses aussi. Pour certaines choses comme pour les formulaires, par exemple, comme le jour montré dans l'exemple IBM, vous devez faire toutes ces choses parce que pas toutes les fois où vous pouvez cliquer, disons que vous voulez cliquer sur le bouton Envoyer, mais vous n'avez pas entré l'adresse e-mail, par exemple, à l'intérieur du formulaire, alors ce formulaire devrait être, par exemple, désactivé jusqu'à ce que vous entrez les informations requises ici. Donc tu vois où ça va. Vous devez présenter tous ces styles différents. Donc, dans le cas où, par exemple, dans un an, clients décident qu'ils veulent changer ce bouton de connexion en un formulaire sur quoi que ce soit. Vous avez toujours cet état désactivé, vous avez toujours ce pointeur sélectionné concentré et ainsi de suite. Donc, vous pouvez le faire pour toutes ces choses différentes, pas seulement celles-ci. Vous pouvez le faire pour ces types de cartes. Par exemple, vous pouvez le faire pour ces cartes, pour ce Q et un par exemple, et ainsi de suite. Vous pouvez donc créer tous ces composants avec tous ces états appliqués. Assurez-vous simplement d'utiliser exactement les mêmes paramètres. Donc, si vous utilisez outline, assurez-vous d'utiliser exactement le même contour partout. Si vous utilisez le vol stationnaire comme nous l'avons fait ici, assurez-vous d'utiliser exactement la même couleur tout au long de votre désir. Et c'est ainsi que votre système de conception va se développer. Et c'est ainsi que vous allez vous développer et devenir encore plus grand et plus utile dans les années à venir. Donc c'est fondamentalement tout pour cette section. J' espère vraiment que ça vous a plu et j'espère vraiment que vous apprendrez quelque chose de nouveau. Et si vous avez fait une règle, vous recommandons vraiment de vérifier ce système de conception IBM. Donc, une fois de plus, carbon design system.com, parce qu'il vous donne nombreuses options et des informations différentes sur ce que font toutes ces grandes entreprises, comment elles font à l'échelle de leurs produits. Et vous pouvez le voir en action parce que c'est en direct sur leur site Web. C' est leur langage de conception. Et vous pouvez comprendre ce que font ces grands acteurs et ce que vous pouvez attendre des petits projets. Mais plus tard, si vous sautez dans la compagnie de bière, ce que les grandes entreprises font aussi bien pour que vous puissiez savoir où vous pouvez appliquer vos connaissances. Et si quelqu'un d'autre, par exemple, dit, Ok, donnez-moi des jetons de conception de type, vous ne serez pas perdu. Maintenant, vous savez quels sont les jetons de conception de type, comment ils sont utilisés et comment vous pouvez les utiliser également. 70. Créer une présentation du projet: Ok, donc maintenant, maintenant fait tout cela est terminé. J' ai juste deux choses à partager avec vous. Numéro un est la présentation, et cette présentation que vous pouvez utiliser sur votre site Web ou dans votre profil de balises sur dribble. Vous pouvez également créer une présentation à l'intention de vos clients pour les montrer à leurs parties prenantes, montrer à leurs partenaires commerciaux, pour les montrer aux membres de leur équipe, etc. Juste pour que les gens puissent comprendre, disons dans un formulaire PDF ou sur un forum basé sur une page Web, comment ce projet peut ressembler et comment ce design est devenu. Ainsi, vous pouvez utiliser la présentation pour montrer toutes sortes de choses différentes. Vous pouvez commencer par votre pensée. Vous pouvez commencer à partir de votre papier de filaires. Vous pouvez partir de l'architecture du site Web, de l'exploration, de la conversation avec les gens. Il y a donc beaucoup, beaucoup, beaucoup de façons différentes pour créer cette présentation, ainsi que la façon dont vous voulez que votre présentation soit professionnelle. Donc, le niveau le plus bas est fondamentalement juste de poser toutes vos pages une sur l'autre en une journée. Vous pouvez faire avec la présentation comme morte si vous n'avez pas besoin d'éléments supplémentaires à l'intérieur. Mais je vous encourage vraiment, si vous créez ces présentations pour montrer au moins votre pensée derrière le projet. Ainsi, la personne qui regarde ces présentations, par exemple, sur votre site Web ou sur votre profil de balises, dribble ou autre, peut comprendre votre logique, votre pensée et vos compétences organisationnelles derrière ces afin qu'ils puissent mieux comprendre comment en êtes -vous arrivé à ces conclusions et pourquoi avez -vous fait ressembler les choses comme vous l'avez fait ? Donc, dans cette vidéo, je vais d'abord partager avec vous quelques backends, exemples. Je vais te montrer ce que font d'autres personnes. Et puis je vais vous montrer où pouvez-vous obtenir maquettes à utiliser dans vos projets Adobe XD ? Et je vais vous montrer ces maquettes. Et comment pouvez-vous travailler avec ces maquettes pour créer juste le point de départ de la présentation ? Parce que les présentations peuvent prendre des heures, parfois des jours, voire des semaines à créer, selon une fois de plus la complexité qu'on a tendance à être. Commençons par des balises, des exemples, et je vais vous montrer où vous pouvez prendre vos présentations. Ok, donc nous avons quelques exemples de Behance. Et comme vous pouvez le voir, j'ai simplement tapé dans la conception du site web de la banque parce que nous avons fait la conception du site web de la banque et je voulais juste vous montrer quelques exemples. J' ai trié ici par curated, ce qui signifie qu'il a toutes ces balises. Et comme Website Design est généralement dans la conception UI UX, vous devriez regarder des choses comme celle-ci. Vous pouvez également le trier par recommandé. Et ça va vous donner quelques exemples différents ici. Ça va être un peu plus précis, mais vous ne serez pas en mesure de chercher curated tout le temps. Mais vous allez toujours pouvoir chercher curé comme ça. Donc, cette personne a créé leur design dans Adobe XD est montré également dans cette galerie membre, et enfin présenté aux États-Unis dans la conception UX. Alors commençons en fait avec cette conception. Je l'ai ouvert ici et vous pouvez voir qu'ils commencent par des illustrations. Nous n'avons pas créé d'illustrations pour notre projet, mais vous pouvez voir clairement ce qu'ils ont fait ici. Ils ont fait une identité de marque complète, ce que nous n'avons pas fait parce que notre projet avait déjà une certaine image de marque à l'intérieur, comme le logo, les couleurs, les polices, etc. Alors ils ont fait tout ça. Ils ont fait l'exploration du logo. Ils ont fait toutes ces cartes et mise en page de cartes, alors ils ont juste imaginé comment ces cartes vont ressembler une fois qu'elles sont terminées. Ils ont fait certaines de ces animations de base et ils ont créé le désordre de filaire est le style. Et vous pouvez voir des cartes qui entrent et sortent et comment toute la mort peut être terminée. De toute évidence, ils utilisent des outils plus avancés comme Adobe After Effects, par exemple, pour toutes ces animations. Mais vous pouvez également le faire dans Adobe XD et vous pouvez enregistrer un prototype et vous pouvez l'exporter sous forme de vidéo, puis le montrer comme ceci. Mais vous avez toujours besoin d'outils comme les effets d'après, par exemple, juste pour les mettre à l'intérieur de ces maquettes animées. Ou vous pouvez utiliser des outils en ligne ou d'autres outils payants, surtout si vous êtes un utilisateur Mac, parce que parfois nous sommes utilisateur Windows, il n'ose pas que beaucoup d'options disponibles. Mais fondamentalement, vous pouvez voir ce qu'ils ont fait ici à la liste de tous leurs écrans de carte et écrans de site Web et ainsi de suite, illustrations de clients. Alors ils ont présenté papa. Et vous pouvez également cliquer ici pour regarder cette vidéo et voir toutes ces animations. Et fondamentalement, ces animations sont faites dans certains, un outil un peu plus avancé, comme une fois de plus, après les effets. Ou vous pouvez faire quelque chose comme ça dans le remplissage Mora de errer part. Voici leur site web et ils l'ont aménagé comme ça. Et vous pouvez voir qu'ils utilisent ces éléments d'arrière-plan juste pour faire ressortir le design un peu plus. Et ils utilisent cette approche angulaire. Donc, au lieu de les mettre comme ça, ils l'ont simplement incliné vers un côté juste pour créer un peu plus d'intérêts visuels. Et vous pouvez voir que les pages mobiles combinés ainsi que les pages de bureau à l'intérieur. Et ils ont créé cette belle animation pour la fin. Vous pouvez également créer quelque chose comme ça pour utiliser vraies maquettes ou des formulaires d'appareils réels dans ce cas. Et vous pouvez commencer par la typographie. Qu'est-ce que la topographie ? Avez-vous utilisé la marque et difficile à l'image de marque ressemble, surtout si votre client a la marque en ligne, donc le site Web de la marque et vous pouvez voir qu'ils ont utilisé, et cette maquette de notre ordinateur portable ici à NDI ont a créé cette présentation plus longue avec ces éléments d'arrière-plan. Par exemple, dan, ils ont présenté cette application et vous pouvez voir que tout est dans le branding, tout est dans le style. Et pour créer quelque chose comme ça, vous avez vraiment besoin de pratiquer. Vous avez vraiment besoin d'explorer tous ces exemples professionnels. Et vous pouvez voir quelques animations se fait ici aussi. Ainsi, vous pouvez voir qu'ils utilisent des effets secondaires, Adobe Illustrator, InDesign et Photoshop. Et enfin, ils ont terminé avec cela. Donc, pour utiliser des maquettes, mesdames, j'utilise l'angle dans Adobe XD. C' est le service de maquette de l'APEDE. Donc vous pouvez être dans cette somme d'argent pour avoir toutes ces maquettes. Donc, vous pouvez voir qu'ils ont 2800 et des maquettes en ce moment. Ils sont également disponibles pour Sketch XD et Fig Maya. Et si je commence à défiler vers le bas, vous pouvez voir à quoi ressemblent toutes ces maquettes. Vous avez une version argile pour avoir des versions réelles, versions sombres, des versions lite et ainsi de suite et ainsi de suite. Et vous pouvez voir ce qu'ils ont fait ici. Vous avez donc 1620 appareils iOS, 780 appareils Android pour 30 appareils de bureau et ainsi de suite. Et vous pouvez voir l'aperçu rapide ou juste ici. Tous ces appareils. Maintenant, vous pouvez voir l'iPhone 11 inclus et pro. Écrans Pro, DR. iMac et appareils Samsung pixel. Parce que l'iPhone 12 a lancé, ils vont mettre à jour ce retour pour inclure l'iPhone 12 aussi bien. Et une fois, ce qui est génial, c'est qu'ils ont inclus ces papiers muraux en résolution 5K. Vous pouvez donc les utiliser comme arrière-plans de bureau. Vous pouvez les utiliser comme une sorte de superpositions et ainsi de suite et ainsi de suite. Ce sont les entreprises qui utilisaient ce projet. Quelques témoignages de l'utilisateur ici, foire aux questions et ainsi de suite. Donc si tu aimes ça, tu ne peux pas être la mort. Et ils ont aussi une version gratuite pour que vous puissiez l'essayer, mais c'est vraiment limité et vous pouvez télécharger l'échantillon ici depuis le haut. Je vais également laisser le lien pour que vous puissiez y accéder très rapidement. Donc, quand vous payez pour cela, ou si vous téléchargez un échantillon gratuit, vous allez juste obtenir quelques appareils. Mais si vous décidez de payer, c'est à ça qu'ils ressemblent dans Adobe XD une fois qu'ils sont ouverts. Vous pouvez donc cliquer ici sur votre panneau Calques et voir combien de ces différents appareils existent. Je vous montre en fait une version un peu plus ancienne, mais vous pouvez voir des maquettes angulaires étaient XD. Et si je lance ici, vous pouvez voir des maquettes inclinées étaient XD. Donc, c'est une version un peu plus ancienne de la largeur, appareils plus anciens, mais cela fonctionne toujours. Donc, pour que vous puissiez utiliser l'une de ces maquettes, qu' il s'agisse de version gratuite ou de cette version de vitesse, que je recommande vraiment. En passant, vous devez cliquer sur les plugins et vous devez installer le plugin angle à partir de leur magasin. Donc, fondamentalement, vous pouvez cliquer ici et taper l'angle de cette barre de recherche. Cliquez ici, tapez angle, appuyez sur Entrée ou Retour. Et osant Howard. Donc, nous avons ce plugin d'angle juste ici. Je l'ai installé. Vous pouvez simplement l'installer et ensuite vous pouvez l'utiliser. Alors comment peux-tu vraiment utiliser ces solides moi te montrer ça aussi. Ici, nous sommes dans notre projet. Et par exemple, je vais utiliser ce guide de style de projet. Alors laissez-moi y naviguer. Je vais frapper le contrôle D pour le dupliquer. Et voyons, ça va se positionner ici, ce qui est génial. Et je vais simplement appeler ça la présentation du projet comme ça. Ensuite, je vais sauter à l'intérieur et supprimer tous ces éléments parce que je n'en ai plus besoin. Et maintenant, je peux commencer à construire ma présentation. Donc, une fois de plus, vous pouvez sauter pour être mains et vous pouvez explorer tous ces différents exemples de présentation. Mais je vais juste commencer ma présentation et je vais juste vous montrer comment construire vos présentations directement dans Adobe XD afin que vous puissiez avoir tout ce que vous avez créé directement dans Adobe XD. Donc, tout d'abord, cliquez ici, puis prototype et faites la même chose que nous l'avons toujours fait. Donc projet de qualité, présentation comme ça. Revenez à la conception. Et par exemple, je peux faire glisser et déposer mon image que j'ai utilisée dans ce projet ici. Ensuite, je peux le positionner ici, par exemple. Je peux le faire juste là. Et puis ce que je peux faire est d'utiliser quelque chose comme un rectangle. Ou voyons, peut-être que je peux faire quelque chose comme ça. Dégradé linéaire, puis tourné un peu. Assurez-vous que mon haut est plus sombre. Assurez-vous que leur position n'aime pas. Donc, par exemple, alors je peux cliquer ici. Assurez-vous que je vais déjà l'obésité jusqu'au bout. Assurez-vous que je baisse l'obésité de celui-ci aussi. Et puis ce que je peux faire, c'est ramener cette image. Je pourrais le placer juste ici sur la salle supérieure. Ma touche Maj, retournez à mon panneau Calques. Et je peux, par exemple, appeler ce gradient z. Et je peux abaisser l'obésité de mon image à, disons 40%, quelque chose comme ça. Et puis je peux aller de l'avant et étendre mon dégradé pour qu'il couvre mon image. Je peux sauter à l'intérieur comme ça. Et je peux ajuster là où c'est distinct. Et donc par exemple, si ça se passe comme ça peut être comme ça. Donc, vous avez le point. Vous pouvez également masquer ces deux-là. Donc, vous pouvez créer quelque chose comme ça. Donc gradient va sur le dessus, évidemment Anakin Laura fait baisser encore plus à 20% peut-être. Donc ce que je peux faire ensuite, c'est que je peux sauter à l'intérieur d'ici. Je peux copier ce texte. Donc nouvelle banque pour New Age. Je peux sauter à ma présentation. Je peux le visiter ici. Il va bien le positionner ici. Et puis ce que je peux faire parce que nous avons créé notre logo, je peux simplement le glisser et le déposer juste ici. Je peux l'étendre comme ça, mais je vais vous recommander d'utiliser et la version PNG comme nous l'avons fait. Ainsi, vous pouvez le positionner comme ceci, ou 1234, par exemple, juste pour garder les choses agréables et simples. Maintenant, parce que nous sommes en 1920, vous pouvez simplement utiliser tous les atouts que nous avons faits pour ce projet. Et vous pouvez également réduire la taille de ceci, par exemple, maintenant passons à autre chose. Et si vous voulez créer la même mise en page que celle que nous avons ici, vous pouvez simplement sauter ici et aller dans le panneau Calques et utiliser ce texte pour simplement le copier. Retournez à notre présentation sautant ici, par exemple, collé dans. Et je peux supprimer notre bouton et appeler ceci par exemple, je ne sais pas, disons une nouvelle banque pour une nouvelle page. Et voyons, parce que nous sommes toujours dans une pile, vous pouvez aussi sauter à l'intérieur d'ici et augmenter ou diminuer ceci de fondamentalement je peux sauter ici, augmenter ceci à, je ne sais pas, 58 par exemple, ou 68. Juste pour que ça paraisse un peu plus agréable. Et le bois mort que je pourrais faire est que je peux également remplacer ce texte évidemment. Donc ce n'est pas exactement le même texte que celui-ci est, mais je voulais juste inclure une maquette rapide juste ici de notre page. Donc, pour ce faire, je vais sauter à mes maquettes d'angle et quand utiliser un ordinateur portable. Donc je peux utiliser quelque chose comme ça, par exemple, Contrôle C. Je peux le déposer ici, contrôler V. Et comme vous pouvez le voir, c'est extrêmement énorme. Vous pouvez désactiver la taille de réactivité. Vous pouvez maintenir votre touche Maj et la réduire en taille à quelque chose d'un peu plus agréable comme celui-ci. Peut-être que vous pouvez zoomer un peu et vous pouvez le positionner juste ici. Je vais positionner le disque ici. Et puis ce que je vais utiliser est peut-être créer une forme qui va aller en arrière-plan. Donc, je vais utiliser mes parents à partir d'ici et puis simplement dessiner une forme comme celle-ci. Ou je peux y retourner. Commençons en fait par le haut. Donc, je vais cliquer ici et supprimer tout cela, et recommencer une fois de plus. Alors commencez avec le P. Cliquez ici, puis juste ici, juste pour que nous ayons une meilleure courbe. Et puis celui-ci était comme ça et en bas comme ça et ensuite simplement la demande de Kahlo comme du savon. Maintenant ce que je vais faire, c'est sauter ici à ma forme. Je vais le sélectionner d'ici. Donc ma forme de héros, je vais faire un clic droit dessus, copier et puis revenir à ma forme. Donc, vous pouvez voir comment c'est vraiment simple. Cliquez sur It, faites un clic droit et Coller l'apparence. Donc, comme vous pouvez le voir, il va coller ce gradient N. Donc je vais positionner mon texte sur le dessus comme ça. Et vous pouvez déjà voir où cela commence à prendre forme. Donc on peut positionner le disque ici. Vous pouvez le rendre encore plus grand. Tu as la photo. Ce que je veux te montrer en fait, c'est que je peux aussi réduire l'obésité de celle-ci si je n'aime pas ça à quelque chose comme ça. Donc ce que je voulais te montrer, c'est ça. Tout ce que vous devez faire est de sélectionner votre écran. Et ce que je vais faire, c'est utiliser certaines de ces chansons. Parce que si je minimise cela et retourne à mes maquettes d'angle pour le Mac Book. Vous pouvez localiser ceci et ce sont les tableaux d'art pour le MacBook maquette. Donc 1440 avec 900, vous pouvez en fait copier ce tableau d'art. Revenez à votre projet et collé, par exemple, quelque part ici. Et puis ce que vous pouvez faire est en fait utiliser ceci. Donc Control C ou vous pouvez tenir votre ancienne clé ou quoi que ce soit et positionner tous ces éléments à l'intérieur de votre rpart. Alors faisons ça. Je peux, par exemple, sélectionner mon héros et sélectionner ce sont ceux, SO Control C. Et puis je peux sauter ici. Et je peux supprimer tous ces éléments. Devrait contrôler V, par exemple, pour le positionner dans. Je vais supprimer leur arrière-plan d'origine. Et ce que je peux faire est en fait d'appliquer juste un peu de changement. Donc, par exemple, je peux sauter à l'intérieur d'ici. Laura, c'est plus bas, juste pour que je puisse l'apporter de plus près. Je peux déplacer tout le texte vers le haut juste un peu et je peux déplacer cela couplé à ici, la position racine, certains de ces éléments. Donc ça peut être ici et ça peut être ici. C'est très bien. Et c'est fondamentalement tout. Ce que vous devez faire ensuite, c'est ce qu'on appelle MacBook. Nous devons donc sélectionner la couche d'écran comme je l'ai fait ici. Vous pouvez sauter à des plug-ins, sauter à l'angle, frapper, appliquer une maquette, et simplement localiser le MacBook à partir de vos aéroports. Maintenant, parce que nous avons beaucoup différents nos planches, peut-être que cela va être un peu difficile à naviguer, mais il suffit de le trouver et c'est commodément à la fin, donc sélectionné et vous pouvez choisir toutes ces options différentes si vous veulent. Je ne vais pas, je suis simplement frappé appliquer et attendre qu'il fasse sa magie. Et il va appliquer une maquette de dette dans quelques secondes. Évidemment, plus votre projet est grand, cela prendra un peu plus de temps à appliquer, mais donnez-lui quelques secondes. Et comme vous pouvez le voir, il a appliqué cette maquette vraiment bien. Vous pouvez également supprimer cette marque de MacBook si vous le souhaitez à partir du panneau Calques. Mais je pense que ça a l'air vraiment sympa. Maintenant, ce que vous pouvez faire est simplement commencer à cultiver ceci. Et encore une fois, si je vous ramène à ces présentations, vous pouvez voir ce qu'ils ont fait. Ils ont donc utilisé ce téléphone. Et si vous vous demandez comment ils ont fait ça, laissez-moi vous le montrer rapidement aussi. Donc, tout ce que vous avez à faire est, par exemple, sélectionner, je ne sais pas. Disons que cet iPhone Control C, sauter ici, contrôle V. Et vous pouvez simplement aller dans votre panneau Layers, situé l'ombre ici, il est un supprimer l'ombre et est juste une maquette plate maintenant de sorte que vous pouvez frapper le contrôle D, faites des copies de celui-ci et positionnez-le dans l'espace comme celui-ci, puis remplissez ces écrans avec vos écrans. C' est ainsi qu'ils le font. C' est comme ça que vous pouvez le faire. Évidemment, plus vous passez de temps avec ça, plus il aura l'air professionnel Dumouriez va mieux paraître. Donc, évidemment, je vous recommande passer le plus de temps possible avec vos présentations. Si vous avez besoin de faire quelque chose comme ça, si vous voulez juste présenter, par exemple, cette page Web, tout ce que vous pouvez faire est de cliquer sur Contrôle E, Sélectionnez un bureau, par exemple. De là, je vais simplement sélectionner mon JPEG, appuyez sur export. Il va exporter. Et ce que je vais faire, c'est simplement faire venir de mon bureau et le positionner ici. C' est ainsi que vous pouvez montrer vos pages terminées. Donc, par exemple, je peux présenter une autre page ici. Et lorsque les utilisateurs défilent sur les mains de plage par exemple, comme dans ces exemples, vous pouvez leur montrer que vous pouvez montrer combien de pages, tous ces différents éléments. Et vous pouvez remplir des parties de votre conception en utilisant des trucs comme d, sorte que vous pouvez utiliser ces maquettes et ainsi de suite. Une dernière chose que je veux vous montrer avec ces présentations de projet est la 3D. Et la 3D est une nouvelle option dans Adobe XD. Et vous ne pouvez pas vraiment appeler ça une vraie 3D, mais ça va imiter la 3D. Je vais te montrer ça dans la prochaine vidéo. Alors je te verrai là-bas. 71. 3D dans Adobe Xd: En ce qui concerne la 3D, Adobe XD n'est pas vraiment conçu pour la 3D, mais récemment ils ont inclus cette option 3D. Et vous pouvez aller de l'avant et jouer avec si vous voulez ajouter un peu d'épices et un peu plus d'intérêt visuel à vos projets. Et je le recommande vraiment à certains endroits, surtout lorsque vous créez ces présentations. Parce que vous pouvez alors montrer à quoi ressemblent vos éléments en 3D et simplement leur donner un peu plus d'épices visuelles avec un peu plus d'intérêt visuel que d'habitude. Encore une fois, Adobe XD n'est pas un logiciel 3D ou 3d2 par tous les moyens, vous pouvez utiliser quelque chose comme 3D Max. Vous pouvez utiliser quelque chose comme un mélangeur. B a également son propre logiciel. Je pense que ça s'appelle quelque chose comme ça s'appelle « i dot adobe dimension ». C' est aussi un peu délimité recherché. Si vous voulez créer une vraie 3D, je vous recommande vraiment d'utiliser quelque chose comme un mélangeur, qui est gratuit, ou d'utiliser quelque chose comme 3DS Max ou Autodesk Maya ou d'autres choses comme ça. Mais vous n'avez pas vraiment besoin de ces outils pour fonctionner en tant que concepteur UX d'interface utilisateur. C' est juste si vous voulez élargir vos connaissances et élargir votre domaine de travail et votre domaine afin que vous puissiez tester la dose. instant, je vais vous montrer ce qui est possible dans Adobe XD. Encore une fois, assurez-vous de comprendre que c'est extrêmement limité, mais il a quelques utilisations. Je vais vous les montrer ici, surtout dans les présentations. Donc, nous sommes de retour dans Adobe XD où je vous ai laissé dans la vidéo précédente. Donc, une fois de plus, vous pouvez imaginer que vous pouvez construire cette présentation et vous pouvez double-cliquer sur votre tableau d'art étendu tout le chemin vers le bas autant que vous avez besoin. Alors laissez-moi vous montrer rapidement ce que vous pouvez faire avec la 3D dans XD. Commençons par une de ces cartes. Par exemple, je peux choisir celui-ci, Kid Control C. Ou vous pouvez le sélectionner à partir de votre panneau acide. Évidemment si vous voulez et simplement glisser-déposer. Je vais le copier de cette façon. Je vais sauter ici, Kid control V pour le coller ici. Ici, c'est. Je peux me positionner, c'est quelque part par ici. Et je peux aussi l'agrandir un peu si je le veux, mais ça va s'étendre comme ça. Donc, si vous voulez faire cela, je vous recommande vraiment de l'exporter en tant que JPEG ou PNG. Donc, pour le créer en 3D, ce que vous remarquerez ici, c'est que nous avons cette option de transformation 3D. Donc, quand vous cliquez dessus, vous obtenez cet outil juste ici. Ainsi, vous pouvez l'ajouter manuellement, toutes ces différentes options. Donc, pour la rotation, si vous survolez, vous pouvez voir ce qu'il fait. Donc exposition, Cela va être large rotation et cela va être la rotation z. Donc, sur les trois axes, ou vous pouvez simplement faire manuellement quelque chose comme ça. Donc, vous pouvez le faire tourner comme ça. Vous pouvez le faire tourner comme ça. Et c'est ce que je finirai par utiliser. Ainsi, vous pouvez créer une ombre d'arrière-plan , par exemple, dans votre composant principal, et elle s'affichera comme une ombre juste ici sur ce composant. Ce que je vais faire, c'est positionner ça quelque part par ici. Je vais frapper le contrôle D. Et je vais m'assurer de positionner ce duplicate ici en arrière-plan. Nous allons donc l'aligner sur notre groupe, par exemple, c'est la position, c'est quelque part ici. Positionnons en arrière-plan. Et je vais cliquer sur l'état d'horreur. Et vous pouvez voir qu'il m'a présenté l'état d'horreur en 3D. Ainsi, vous pouvez simplement positionner n'importe lequel d'entre eux que vous pouvez travailler comme vous le souhaitez. Et ce qui est génial à ce sujet, c'est si vous cliquez sur une carte vG, vous pouvez, par exemple, inclure une ombre. Et incluons une belle grande ombre. Donc 20-20 et 50 par exemple, quelque chose comme ça. Et si je fais glisser ma carte complète, vous pouvez voir que l'ombre est bien en 3D et qu'elle s'applique également à défausser. Donc, ce que vous pouvez faire est de créer une belle petite section comme DES. Donc peut-être qu'un jour cela, et ensuite nous allons utiliser un texte une fois de plus. Donc, je vais frapper le contrôle D sur cette position de texte, par exemple, juste ici. Et vous pouvez juste imaginer comment certains disques et finissent par regarder comme une sorte de section séparée dans votre présentation ou dans votre conception. Vous n'avez pas besoin de le faire uniquement pour les composants. Vous pouvez créer des éléments 3D en utilisant toutes sortes d'images différentes. Vous pouvez créer des designs comme DES. Alors, allons en trouver un autre. Alors utilisons, je ne sais pas, juste cette image ou utilisons quelque chose. Ouais, ouais, utilisons cette image. Alors je vais sauter. Donc, pour le contrôle C, je vais revenir à ma présentation. Saute ici. La position Control-V peut l'image là. Je vais inclure l'ombre tout de suite. Donc 202020. Donc celui-ci est un peu plus sombre et parce que ma transformation 3D est incluse, je peux simplement tourner dans une autre direction. Donc quelque chose comme ça. Et vous pouvez voir à quoi ça ressemble. Ainsi, vous pouvez le positionner sur la grille, ce qui est fantastique. Ensuite, vous pouvez faire le Contrôle D et inclure des boîtes de taxes comme DES par exemple. Donc vous pouvez voir où ça va. Vous pouvez également augmenter la taille comme ceci, sorte qu'il augmente en 3D. Et si vous voulez arrêter cette option parce que vous pouvez voir ce que je sélectionne, cela me montre qu'en 3D vous pouvez simplement cliquer ici et vous pouvez commencer à l'éditer en temps réel et en sorte de look et de sentir si vous le souhaitez. C' est donc le look et la 3D dans Adobe XD. Encore une fois, comme vous pouvez le voir, c'est vraiment limité, vraiment basique, mais vous pouvez l'utiliser pour certaines choses de base. Et si vous voulez des choses plus avancées sont vraiment recommander quelque chose comme un mélangeur, parce qu'une fois de plus, il est gratuit et vous pouvez trouver un tas de ces différents tutoriels sur YouTube, surtout pour que vous puissiez en apprendre un peu plus sur mélangeur là. Mais encore une fois, le point de cette vidéo est juste pour vous montrer comment vous pouvez ajouter de l'épice à votre design. Comment vous pouvez améliorer vos compétences en présentation et comment vous pouvez faire passer votre design à un niveau supérieur. Parce que peut-être un autre concepteur pourrait ne pas utiliser d'animations. Tu le fais. Les concepteurs mères peuvent utiliser la 3D. Tu peux. Ainsi, vous pouvez vous surpasser de tous ces autres designers et améliorer vos chances d'obtenir un emploi, par exemple. Vous pouvez donc faire toutes ces choses directement dans Adobe XD, comme je vous l'ai montré. Ainsi, vous pouvez commencer de la planification à l'architecture de site Web, filaires de papier, filaires dans la conception et l'animation egg dxdy, design responsive, guide de style de projet pour enfin la présentation. Vous pouvez effectuer toutes ces opérations dans Adobe XD. Et si vous utilisez un forfait gratuit, vous pouvez faire toutes ces choses gratuitement. Donc c'est tout pour ce cours. Voici la dernière vidéo de ce cours, et j'espère vraiment que vous l'avez apprécié et je vous verrai dans la prochaine leçon. Nous allons explorer un peu plus de choses d'Adobe XD. 72. Structure de dossier pour l'exporter des ressources: Dans cette partie du cours, nous allons parler de l'objectif d'exportation de nos actifs pour les clients et les développeurs. Et je vais vous montrer comment vous pouvez faire ça de façon plus sûre. Donc, fondamentalement, dans la section précédente, je vous ai expliqué comment vous pouvez partager cela. Tout cela dans Adobe XD lorsque vous le téléchargez le cloud et les développeurs peuvent essentiellement télécharger tous ces acides. Mais encore une fois, si vous utilisez la version gratuite d'Adobe XD, vous n'avez qu'un seul projet. Dès que ce projet est terminé, vous n'avez plus la possibilité de partager ces fichiers. Donc, fondamentalement, vous devez attendre qu'ils développent ce produit afin que dans tern vous soit interdit de créer de nouveaux fichiers, de travailler avec de nouveaux clients. Donc, pour éviter cela, ce que vous pouvez faire est d'exporter sur votre bureau, puis simplement placer tous ces fichiers dans un dossier zip, puis partager ce dossier zip avec vos clients et développeurs. Maintenant, il y a beaucoup d'options différentes que vous pouvez partager, mais je vais vous montrer mon chemin. Et fondamentalement, nous allons exporter tous ces actifs en tant que actifs JPEG, PNG ou SVG. facettes PDF sont fondamentalement juste pour tous ces fichiers. Et comme je vous l'ai déjà montré, comme, par exemple, pour un dossier de conception, par exemple, pour certaines propositions de projet et ainsi de suite. Donc, toutes ces choses que vous pouvez faire en z et celles sont formidables pour exporter ce PDF. Mais fondamentalement ces trois formats de fichiers, donc JPEG , PNG et SVG est ce que vous allez utiliser tout le temps. Donc, une fois de plus, nous avons un nouveau design de site web bancaire. C' est le nom de notre projet. Donc, je peux créer mon dossier. Toilettes, par exemple, banque réelle, site Web, design, actifs. Qualité que l'intérieur de ce dossier. Et laissez-moi l'amener ici. Vous allez placer votre fichier Adobe XD, évidemment lorsque le client est x2. Et à l'intérieur de ce dossier principal, nous allons placer quelques dossiers supplémentaires où nous allons réellement inclure dans ces actifs à l'intérieur. outre, dans ce dossier principal, vous pouvez inclure quelque chose comme un PDF où vous avez créé des liens pour les polices que vous utilisez ou vous pouvez télécharger une police, mettre à l'intérieur du package. Par exemple, pour la police Poppins, elle se trouve à l'intérieur d'un fichier zip. Vous pouvez mettre ce fichier zip ici à l'intérieur de ce dossier. Et puis le développeur peut utiliser la police de la dette tout de suite. Alors commençons et je vais te montrer comment j'aime faire des choses comme ça. Donc, si nous sautons à l'intérieur d'un design de site Web comme celui-ci, nous avons toutes ces pages différentes. Donc, si nous cliquons ici pour sélectionner cette page, vous pouvez voir que nous avons la conception de la page d'accueil. Donc le premier dossier que nous allons créer, et je vais les étiqueter en chiffres parce que nous allons à partir de la page d'accueil est le numéro un. Page d'accueil. Alors on va passer à autre chose. Et si nous zoomons un peu pour que nous puissions voir tous ces noms de page différents. Le numéro deux va être des comptes. Le numéro trois va être un prêt. Numéro quatre cartes. Et laissez-moi Control-C, Control-V. Et ça va être cinq inversé. Faisons ça encore une fois. Ça va être six numériques. Et parce que si vous vous souvenez, nous avons les mêmes actifs essentiellement lors de la connexion et de l'inscription. Donc, ce que je peux faire est en fait de combiner ces deux pages. Donc, je peux faire quelque chose comme sept slash connexion Siam. Et juste pour que nous puissions arrondir la dose aux pages en même temps, alors nous pouvons passer à la conception du tableau de bord et voir ce que nous avons ici. Nous avons donc la conception du tableau de bord. Donc ça va être notre mandat numéro 8. Pour concevoir. Ensuite, on va avoir un comptage. Donc nous pouvons sélectionner ce neuf. Cela va être dans le compte de tableau de bord. Comme ça. Nous allons en créer un de plus. Donc, ce sera une transaction de tableau de bord. Et ce sera le numéro dix. Et laissez-les arrêter rapidement la vidéo ici pour que je puisse faire tout ça et qu'on puisse passer à autre chose pour que je ne vous ennuie pas plus loin. Ok, donc maintenant que c'est terminé, comme vous pouvez le voir, nous avons maintenant 14 de ces dossiers. A l'intérieur de chacun de ces dossiers, nous allons inclure différentes tailles. Alors explorons maintenant la dette. Si je vous ramène à notre page d'accueil ici, vous pouvez voir que nous avons cette taille unique, qui est notre taille d'origine, et ensuite nous avons toutes ces autres tailles. Alors créons ces dossiers. Donc, pour sauter dans ma structure de valence, une fois de plus, vous allez mettre votre fichier XD ici. Vous allez mettre le fichier zip, les polices par exemple, ici, vous allez mettre en bref de conception ici, proposition de projet. Donc, tous ces documents, vous pouvez les mettre ici ou vous pouvez les appeler, Par exemple, documents, puis mettre tous ceux dans un dossier séparé ici avec tous ces autres dossiers, c'est vraiment à vous de décider. Donc, à l'intérieur de sa page d'accueil, nous allons créer une liste de différents dossiers. Donc, je vais appeler cette création principale numéro deux. Donc c'est notre taille principale. Numéro deux est grand et les ordinateurs de bureau. Numéro trois est un grand et les appareils. Le numéro trois est, par exemple, des comprimés. Ou nous pouvons lui donner exactement la scène nommée plus haut ou vous voulez. Donc, les appareils moyens réduisent les doulets. Mon père. Et enfin, nous avons ces petits appareils supplémentaires à la fin de cinq petits appareils supplémentaires. Donc ce que vous allez faire, c'est que je pense que vous aurez la photo. Nous allons exporter séparément toutes ces tailles. Évidemment, ce que vous pouvez faire est simplement sélectionner tous ces dossiers Control C, revenir ici , contrôler v, revenir à celui-ci, contrôler V, et faire cela pour tous ces dossiers évidemment. Mais parce que nous avons juste ces tailles pour la page, nous allons juste les faire pour une page d'accueil. Je vais également montrer comment vous pouvez exporter le tableau de bord. Mais fondamentalement, nous avons juste une page qui a une page d'accueil dans notre cas. Mais vous pouvez imaginer que lorsque vous faites tous ces autres, vous allez les exporter aussi. Donc, fondamentalement, c'est notre structure. Dans la vidéo suivante, je vais vous montrer comment vous pouvez commencer à exporter les formats de fichier importants et comment vous pouvez décider quel format de fichier vous voulez exporter pour lequel. Alors je te verrai là-bas. 73. Exporter vos ressources: Bon, maintenant revenons-y et je vais vous montrer comment vous pouvez commencer à exporter ça. Donc, évidemment, nous allons sauter ici et commencer à exporter tous ces éléments. Donc, Layers, panneau est évidemment assez important. Je vais sauter ici. Et pour commencer à exporter, ce que je peux faire est de frapper le contrôle à savoir. Et la première chose que je vais faire est de changer l'endroit où vont mes fichiers d'exportation. Donc, vous pouvez frapper ce changement. Et depuis votre bureau ou où qu'il se trouve, vous pouvez sélectionner ce dossier que nous avons déjà créé, savoir ce dossier. Et nous voulons fondamentalement positionner ceci à l'intérieur de notre dossier principal. Donc c'est notre page d'accueil. C' est notre dossier principal parce que c'est une taille moyenne et vous pouvez simplement sélectionner ce dossier, puis tous les actifs que votre exportation de ce discours vont aller dans ce dossier particulier. Donc, ce que je vais faire pour celui-ci est de choisir SVG. Et vous avez évidemment tous ces paramètres différents que vous pouvez utiliser. Vous pouvez voir avec votre développeur si vous avez besoin d'ajuster l'un de ceux-ci un peu plus, ou si vous pouvez simplement utiliser ceux-ci par défaut, je les utilise presque toujours comme défaut et je n'ai jamais eu de problème. Donc, fondamentalement, quand vous appuyez sur l'exportation, il va commencer à exporter. Et c'est tout. On a donné ces noms. C' est pourquoi ils sont importants à exporter. Nous avons l'icône de téléphone, nous avons l'icône de localisation, et nous avons ces deux drapeaux. Donc étranger et icône de localisation, je vais exporter aussi en SVG. Mais ces deux flyers, par exemple, je peux exporter en PNG, ce que vous pouvez, il n'y a vraiment aucun problème, ou vous pouvez l'exporter en GPX. Il y a donc ces paramètres pour les JPEG et les PNG, et nous allons rapidement les parcourir. Donc, le format est la qualité JPEG est 100%. Vous pouvez réduire la qualité pour optimiser votre image et la rendre plus petite si vous le souhaitez. Vous pouvez exporter pour la conception, qui est fondamentalement juste cette taille unique. Ou vous pouvez l'exporter pour le web et il exportera en une taille, n double la taille, ce qui va être plus facile que pour les développeurs à utiliser plus tard. Alors faisons ça. Exportez comme ça. Passons maintenant à la section N de notre héros pour le NAV. Fondamentalement, ce que vous pouvez faire est d'exporter le logo. Donc frapper le contrôle ie. Nous allons l'exporter en SVG parce que nous voulons garder la qualité autant que possible. Et pour le bouton, fondamentalement, vous n'exportez jamais vers un bouton comme celui-ci parce que les développeurs vont toujours inclure la police eux-mêmes à l'intérieur du bouton. Donc, fondamentalement, vous ne l'exportez jamais juste comme le bouton plan comme il est juste ici. Donc, fondamentalement, ce que vous devez faire est d'exporter ce bouton comme dans son état par défaut, comme il est ici, et exporté en survol. Donc, ici, nous avons le bouton de connexion. Donc, ce que je peux faire est simplement cacher le texte de connexion, cliquez dessus. Elle contrôlerait c'est à dire. Je vais l'exporter en SVG. Cliquez ici. Et je vais revenir à mon dossier situé quand il est ouvert, cliquez sur Afficher, grande icône pour que vous puissiez le voir. Donc, le bouton de connexion ici il est. Je vais changer son nom par défaut. Parce que c'est l'état par défaut. Et maintenant, si je passe à l'état Horace, je peux cacher mon texte une fois de plus, une fois de plus en SVG. Et si je saute ici et rafraîchis ça, vous voyez que nous avons un bouton de connexion maintenant. Et je vais changer son nom pour planer, juste pour que le développeur sache quel état il est en question. Pour que je puisse y retourner, ramener ça, ramener ça aussi. Et c'est en gros un deux. Nous pouvons maintenant déplacer un, mais avant de faire nav, BG doit être exporté. Donc frapper le contrôle, c'est à dire, je vais l'exporter en SVG. Et encore une fois, parce que j'ai exporté ce nav et le fond en fichiers SVG, ce que vous pouvez faire est essentiellement sélectionner plusieurs fichiers et que vous voulez exporter en tant que SVG, je vais vous montrer maintenant. Donc je vais sélectionner mon héros Bu Jue, en forme de héros. Et je vais sélectionner plusieurs de ces éléments ou les trois, forme du héros et le héros BG. Je vais les exporter tous en SVG. Donc il avait le contrôle Lee, je vais garder tous ces paramètres sur Export. De cette façon, vous pouvez les exporter beaucoup plus rapidement que pour les exporter un par un. Ici, je vais exporter juste ces cercles de héros. Donc il contrôlait comme SVG, je ne veux pas exporter la mosquée parce que les développeurs peuvent comprendre où je mets la mosquée et ils peuvent ensuite exporter comme dette. S' ils veulent utiliser la version PNG, vous pouvez appuyer sur Control E, et vous pouvez ensuite sélectionner cette version en tant que PNG pour le web. Donc 12 tailles, il est conçu à un x, donc à cette taille particulière, afin qu'ils puissent savoir comment l'exporter et comment en déplacer un à partir de là. Vous n'exportez pas le texte. Les développeurs vont utiliser le texte. On va exporter ça en PNG. Donc, il avait le contrôle li, choisissez PNG ici, choisissez le web hit export va l'exporter comme 1X et 2X. Et enfin, nous devons faire la même chose pour notre bouton. Rappelez-vous, parce que nous avons utilisé exactement ce même bouton tout au long de notre conception, nous ne le modifions que plus tard à l'intérieur de notre tableau de bord. On va l'appeler bouton principal, comme si c'était déjà là. Donc je vais faire la même chose. Je vais cacher le contrôle de frappe MyText, exporté comme SVG hit export, sautant ici et voir ce que c'est. Donc lui pour le bouton principal et renommez-le par défaut, qui est notre état par défaut. Et vous pouvez voir qu'il est juste ici où nous pouvons taper dans l'état par défaut comme vous le souhaitez. Je vais juste le garder comme ça, ce qui va ramener ça, retourner planer, cacher ça, frapper Control, Lee, frapper Export, et revenir ici. Ça va être méchant bouton hover. Donc, une fois de plus, les développeurs peuvent savoir lequel est, et c'est fondamentalement tout. C' est comme ça que vous continuez à exporter tous ces éléments. Maintenant, quand il s'agit de ceux-ci, ce que vous pouvez faire est de sélectionner votre fiche de contenu et d'exporter comme ceci, juste sans aucun texte. Ainsi, vous pouvez cacher tous les textes. Vous pouvez même vous cacher, en savoir plus. Vous pouvez même masquer cette flèche et vous pouvez l'exporter comme ceci. Ensuite, vous pouvez aller à l'état d'horreur dans exporté de la même manière. Mais ce que je recommande en fait, c'est que vous exportez tous ces éléments séparément. Donc, une fois de plus, vous pouvez apporter ce texte dans. Et parce que nous voulons exporter tout cela en SVG, ce que je vais faire est en fait sélectionner ma carte BG, sélectionner ma flèche, flèche et sélectionner mon icône. Je vais chier, frapper Control E SVG. Et puis je retournerai à l'état d'horreur. Je vais aller à la carte BG couleur actuelle parce que nous avions besoin maintenant. Et je vais exporter l'icône de flèche, mais je vais changer son nom. Donc, une fois de plus, vous pouvez le faire. Tu dois le faire comme ça autrement. Et la fonction d'animation automatique ne fonctionnera pas. Donc, parce que nous avons exporté DC-3 à partir d'ici, les développeurs peuvent l'utiliser directement à partir d'ici et ils n'ont pas à copier et coller quoi que ce soit. Parce que nous avons ce cercle. Ils peuvent utiliser le même cercle, mais ici c'est un peu différent. Donc, parce que cela est appelé carte de contenu, peut-être que nous pouvons lui donner le nom du cercle de partie de contenu. Si mortels, ils vont être capables de comprendre les dés d'arcade, la dette. Ou si vous le souhaitez, vous pouvez le faire pour toutes ces formes. Donc, au lieu de cercle de ligne transversale, vous pouvez les appeler carte de contenu, cercle de la carte de contact de ligne courante de contenu, puis le faire comme ça. Permettez-moi de frapper le contrôle D pour explorer ce cercle, parce que comme je l'ai dit, je vais simplement utiliser ceux-ci. Alors voyons, le cercle de la carte de contenu et vraiment de la masse deviner, le verriez-vous exporté comme un masque ? Vous devez donc dégrouper cette mosquée, puis la regrouper pour l'exporter. Alors laissez-moi vous montrer cette mosquée de dégrouper, cacher ce cercle de carte de contenu contrôler le SVG, c'est bon. Ensuite, vous pouvez montrer ce changement de contrôle M pour le remettre à l'intérieur du masque, masque, et c'est fondamentalement tout. Donc, ce que je dois faire ici, c'est exporter cette icône comme ceci. Alors, comment puis-je faire ça ? Je peux créer un état différent pour cela, ce qui va être beaucoup plus rapide, beaucoup plus simple que vous pouvez simplement changer ces états. Mais finalement, je ne peux pas l'exporter comme c'est ici. Donc je peux changer son nom ici. Mais une fois de plus, il ne fonctionnera pas sous les ennemis automobiles. Donc, vous devez faire ce qui compte. Donc tu dois le trouver ici. Voyons ce que c'est. Donc P pour l'icône des comptes personnalisés et changer son nom par défaut comme ça. Et puis retournez à ici. Il contrôlerait une fois de plus. Svg a exporté, et maintenant nous allons l'appeler hover. Voyons ce que c'est. Il s'agit de la décision par défaut de survoler. Et maintenant, une fois de plus, les développeurs pourront accéder à cette grande qualité, comme vous pouvez le voir, sans aucun souci, parce que nous l'exportons en SVG. Et c'est fondamentalement tout. Je ne vais pas vous ennuyer avec faire tous ces éléments ou récemment parce que maintenant cette vidéo va nous prendre sirène sur combien d'heures. Revenons maintenant à ça. Et par exemple, pour ce taux de change, je peux sélectionner tous ces drapeaux et les exporter en tant que jpegs. Parce que nous avons déjà l'Angleterre, parce que nous l'avons prise d'ici. Nous n'avons pas besoin de l'exporter, mais je vais quand même l'exporter. Mais avant que je le fasse, je peux sauter ici et appeler ça, voyons l'Angleterre en haut maintenant. Parce que je veux m'assurer que le développeur utilise la taille correcte. Et ça va être l'Angleterre 2x top nav, comme ça. Parce que dans le top nav nous avons une taille et ici nous avons une autre taille. Donc, si je le sélectionne d'ici, contrôle à savoir, je peux choisir SVG, mais je vais aller avec PNG, frapper l'exportation. Il va exporter tous ceux en même temps. Comme vous pouvez le voir si j'appuie sur le rafraîchissement, vous pouvez voir que, par exemple, Suisse est en deux tailles, des enquêtes en tailles, parce que la Serbie ne se répète pas ici. On peut toujours le garder comme ça. Mais par exemple, je peux aussi faire le réservoir de navigation supérieur. Donc la Serbie, top nav. Je peux les sélectionner et changer ce nom aussi. Une fois de plus, le développeur sait où il est censé aller. Laissez-le rapidement fermer toutes ces choses et nous pourrons passer à autre chose. Donc, une fois de plus, cela a le nom de l'image. C' est donc le festival de la semaine. Donc, je vais vous recommander de l'appeler comme ça ou vous pouvez lui donner un nom plus court. Donc, par exemple, comme ça. Donc vous réveilleriez l'image du festival. Vous pouvez garder des choses simples comme ça si vous le voulez. Encore une fois, cette image ici, comme vous pouvez le voir, c'est juste appelé image de grande carte, mais vous pouvez l'appeler, par exemple, incroyable. Dans l'investissement. À l'arrière. Juste l'image, ce que je sais est un peu beaucoup. Ou vous pouvez faire quelque chose comme, par exemple, l'image des services modernes. Donc maintenant tu as raccourci ça ou tu peux le faire comme ça. Donc, c'est vraiment à vous de choisir. Assurez-vous d'être d'accord avec les clients et les développeurs sur la façon dont vous souhaitez exporter ces images. Et enfin, une fois de plus, des images, vous pouvez les exporter en JPEG ou PNG. Png est généralement recommandé si vous avez une image avec un fond transparent, comme nous le faisons, par exemple, comme j'exporte celle-ci, comme nous le faisons ici. Il s'agit de l'image sans arrière-plan, il est donc généralement préférable de l'exporter en PNG de toute façon, il est recommandé. Mais avec toutes ces autres images qui n'ont pas de découpes autour d'elles, vous pouvez simplement les exporter en jpegs. Donc c'est fondamentalement tout pour tous ces durable ou ce qu'il faut vous montrer est pour le pied de page, La seule chose que je vais exporter ici est l'arrière-plan. Mais ici, je vais exporter tout cela comme SVG, solars sauter à l'intérieur de là, j'ai déjà mon logo exporté. Donc, si je saute à l'intérieur, cliquez sur L pour trouver mon logo. Voyons ce que c'est. Curieux. Et nous pouvons l'appeler la couleur du logo, par exemple. Parce que nous avons ici le logo noir et blanc. Donc maintenant, si je sélectionne tous ces, alors nous allons sélectionner le logo, icône d' emplacement, former une icône et l'icône d'e-mail. Encore une fois, j'ai ceci, donc j'ai mon emplacement et des icônes étrangères en haut. Ils sont de la même taille, donc je ne vais pas sélectionner la dose. Donc l'emplacement dans la police, mais je vais sélectionner mon icône e-mail et je vais sélectionner Info bande BG contrôle. Je vais choisir SVG d'ici, où il est, appuyez sur Exporter et il va exporter ceux en SVG. Donc, là, vous avez essentiellement des dettes de votre exportation. C' est comme ça que je fais. C' est comme ça que je l'ai toujours fait. Donc, en bref, enroulez les choses lorsque vous exportez ces icônes. Par exemple, si vous avez plusieurs états, vous devez indiquer à vos développeurs par le biais des noms de fichiers que vous avez ces états multiples. Donc, comme nous l'avons fait ici en couleur Logo et logo. Même chose pour les boutons. Donc le bouton principal et le bouton principal survolent. Ce que vous pouvez également faire est de créer un système de conception que vous travaillez comme vous a montré un exemple adulte. Donc, dans cet exemple, vous avez vu qu'ils disposaient tous ces différents éléments les uns sur les autres. Vous pouvez donc simplement sélectionner l'élément qui a déjà ce nom. Ainsi, par exemple, la couleur du logo ou noir et blanc ou autre, puis exporter ces différents éléments. J' ai oublié de renommer ceci en logroll, noir et blanc par exemple. Ainsi, lorsque vous commencerez à exporter tous ces quatre développeurs, ils seront en mesure de comprendre ce qu'est tout. Donc, quand ils l'ouvrent, il sera exactement de la même taille que dans la conception. Il aura exactement les mêmes couleurs. Il aura exactement les mêmes options. Et enfin, les mêmes noms que vous vouliez pour tous ces différents éléments. Donc c'est fondamentalement tout pour l'exportation. Vous pouvez juste imaginer que tout ce processus que je vous ai montré, vous le ferez pour toutes ces différentes pages. Mais par exemple, ici nous avons, quel est ce compte ? Vous allez, au lieu de dans ce dossier, choisir le dossier principal des comptes, puis exporter tous vos actifs. Ils viennent de cette page. Maintenant, passons à responsive. Et à l'intérieur de responsive, vous ferez exactement la même chose. Donc, par exemple, disons que vous avez tout terminé. Vous avez terminé tous ces dans cette taille que tous ces dans cette taille, tous ces indécis, fondamentalement vous avez toutes les pages dans toutes les tailles. Ce que je vous recommande de faire est très simple. Allez sur la page d'accueil, exportez. Tout cela peut alors aller à cette taille de page d'accueil, exporter, cette taille de page d'accueil, exporter ceci et ceci. Et puis, une fois que vous avez terminé, passez à cette page suivante. Ce que vous pouvez faire est au lieu de perdre du temps à exporter tous ces éléments, vous pouvez simplement exporter, disons ceci une fois. Ce principal, permet de voir comment nous appelons le nav BG. Donc, vous avez exporté une seule fois, puis vous pouvez simplement copier et coller ces éléments entre les dossiers. Donc nous avons exactement la même chose sur le dessus. On a exactement la même chose avec le haut. Nous avons exactement le même héros avec exactement les mêmes éléments. Est-ce que vous seule chose qui est en train de changer est cette image et l'emplacement de tous ces éléments par développeurs alignera tous ces éléments plus tard dans le code. Vous n'exporterez pas ce bouton une fois de plus car vous l'avez déjà exporté. Donc, vous pouvez simplement aller ici où nous sommes à la page d'accueil. Je veux dire, tu peux trouver ton bouton. Donc, le bouton de connexion survolent et le bouton de connexion par défaut. Tu vas aller au contrôle C, par exemple. Ensuite, vous allez à Comptes Mai et Contrôle V. Alors assurez-vous que tous les éléments qui se répètent. Donc, par exemple, juste ici, nous avons cette nouvelle banque et toutes ces informations. Copiez ces informations à partir de votre page d'accueil principale de votre bureau à partir d'ici, puis allez simplement à l'intérieur de toutes ces tailles moyennes et appuyez sur Contrôle V. Vous allez faire la même chose pour toutes ces autres pages. Pour cette section, en particulier, vous pouvez voir que nous avons ces trois icônes qui se répètent sur toutes nos pages. Alors pourquoi vous perdrez votre temps et allez les exporter tous entre toutes ces pages, vous pouvez si vous le souhaitez. Mais pourquoi perdre du temps alors que vous pouvez simplement aller de l'avant et copier et coller tous ces éléments tout au long de votre conception. Donc, fondamentalement, la même chose s'applique à l'exportation qu'à la conception. Lorsque vous commencez, il vous faudra beaucoup de temps pour appliquer tous ces principes, éléments, couleurs, tailles, etc. Mais quand vous allez, surtout avec cet exemple et cet exemple. Donc fondamentalement, comme je l'ai dit, quand nous les concevons, cette section au milieu est ce qui va changer. Fondamentalement, toutes ces organisations vont rester presque exactement les mêmes. Ce que vous faites ici dans le héros est de changer le texte et cette image, c'est fondamentalement tout. C' est à vous de décider si vous voulez ajuster la position de ces trois éléments, par exemple, dans ces éléments d'arrière-plan. Mais vous voulez généralement tout au milieu est ce qui va changer. Alors pourquoi exporter tout quand vous pouvez l'exporter une seule fois, puis simplement copier et coller tout au long de votre désir. C' est ainsi que j'exporte, et c'est pourquoi j'aime exporter de cette façon parce qu' il est beaucoup plus simple pour moi de l'exporter pour les développeurs. Et ils pourront accéder à ces dossiers dans un an, deux ans, dix ans, peu importe. J' ai exporté tous ces fichiers et ensuite je leur ai envoyé des fichiers de dose. Avant de terminer, je veux finir avec ça. Ainsi, vous pouvez les exporter si vous voulez simplement en tant que JPEG, mais ils n'auront pas trop de sens. Mais comme je vous l'ai montré dans les vidéos de partage, les développeurs, quand ils cliquent sur l'un de ces tableaux d'art vont être en mesure de voir tous ces éléments sont des mises en page de grille pour eux-mêmes afin qu'ils puissent les appliquer directement dans le code. Ce que je voulais te montrer, c'est ça. Donc, fondamentalement, vous pouvez exporter tous ces éléments comme ceci, parce que ce n'est qu'un texte. Vous n'allez pas exporter le texte. Quant à ces étiquettes, vous pouvez les exporter comme ceci, ou vous pouvez simplement sauter à l'intérieur d'ici et les exporter comme cette icône. Ainsi, vous pouvez les exporter en tant que marque. Mais évidemment la marque va changer tout le temps parce que les utilisateurs ne sont pas continuer à aller aux mêmes marques. Par exemple, un jour, vous pourriez aller au café Starbucks, Le lendemain, vous pourriez aller à coûter le café sont le lendemain de papa, vous pourriez aller à rêve de café. Donc tous ces différents cafés ne vont pas apparaître ici comme des logos, mais sont juste des textes simples. Donc, vous n'allez pas exporter cela. Vous allez juste exporter cette icône pour la nourriture, parce que la nourriture entre en jeu à la fois pour manger et boire aussi bien. Pour les vêtements. Peut-être que vous êtes allé acheter les chaussures, voyons, l'informatique le fait, mais ça va toujours garder dans cette icône parce que c'est le vêtement. Donc, peu importe si c'est XyDA ajouté AS H&M, peu importe, il va toujours garder cette icône. Donc, il suffit d'exporter seulement cette icône. Comme avec ces formes d'arrière-plan, vous pouvez, par exemple, les exporter si vous le souhaitez, disons à partir de cette première page où elle est en haut. Donc à partir d'ici, vous pouvez les exporter d'ici et ensuite les laisser comme ça. Vous pouvez faire la même chose pour la pagination et simplement copier et coller tout au long de votre conception. Ce que vous allez faire pour cela, c'est que vous pouvez sauter à l'intérieur de ce tableau. Et vous pouvez aller de l'avant et cacher vos masques. Donc, vous pouvez soit le faire, puis exporter votre cercle comme ceci, soit vous pouvez simplement dégrouper le masque comme je vous l'ai déjà montré précédemment. Donc, faites un clic droit sur le masque de groupe, puis masquez cette partie. Cliquez ici, contrôlez P, puis exportez-le en SVG. Je vais l'exporter dans le même dossier, peu importe. Cliquez ici pour le ramener. Ou vous pouvez simplement appuyer sur Control Z trois fois pour revenir en arrière, puis vous déplacer à partir de là. Vous allez également les exporter en tant que SVG. Et c'est fondamentalement tout. C' est tout ce que je voulais te dire. Ça va être le logo J Berg. Il vous suffit de l'exporter une seule fois et de copier et de coller tout au long de votre conception car c'est exactement la même chose. Vous pouvez exporter ces icônes et c'est fondamentalement tout. C' est tout pour exporter des dettes, pour le partage. Une dernière chose que je veux vous montrer est la création du guide de style. Et dans la prochaine vidéo, je vais vous montrer comment nous pouvons créer ce guide de style, comment vous pouvez le personnaliser. Et puis, enfin, comment peut le partager avec vos clients et développeurs. J'ai vu, on se voit là-bas. 74. Créer des projets: Maintenant vient enfin le moment de terminer ce projet et de terminer le discours de Graham essentiellement. Et c'est maintenant le moment de créer le guide de style. Et je vais vous montrer quel est le guide de style, comment vous pouvez l'utiliser et comment nous pouvons le créer pour votre projet, quelle que soit la taille de votre projet. Fondamentalement, le guide de style est la collection de tous vos éléments et directives pour votre conception. Donc style, guide de style peut être extrêmement énorme avec des milliers d'éléments différents. Et c'est là qu'il vaut mieux créer ce système de désir, que je vous ai déjà montré. Mais si vous créez un petit projet comme nous le sommes ici, vous pouvez simplement créer un tableau d'art et vous pouvez le placer dans votre fichier. Ensuite, vous pouvez partager ce guide de style avec vos clients et en particulier les développeurs. Alors, comment peux-tu commencer ? Il suffit de cliquer ici pour créer un nouvel aéroport. Et je vais créer ce grand, donc 19-21, et il le positionne ici, mais je vais tout mettre en dessous de tout le reste. Donc juste ici, je vais passer à mon prototype. Je vais cliquer ici pour créer une autre intrigue. Et je l'appellerai stylobate ou guide de style de projet. Et maintenant, je peux le déplacer un peu plus vers le bas. Retournez à mon design, donnez-lui un nom de guide de style de projets. Et maintenant parce qu'il a créé ces valeurs que je ne veux pas vraiment. Ce que je vais faire est d'utiliser mon ancienne clé pour copier mon rpart ici. Donc, ce que je peux faire est essentiellement de voir ces valeurs que j'ai créées. Donc, je vais utiliser les mêmes valeurs. Donc, je vais réduire ça à 7% ici. Donc nous allons avoir la même obésité hors de notre réseau. Donc 12 colonnes, 6080 à 1038. Alors faisons ça. Donc 6080 à 138, ce qui est très bien. Maintenant, je peux aller de l'avant et enlever ça parce que je n'en ai plus besoin. Et maintenant, allons de l'avant et commençons avec notre guide de style. Ce que je peux faire est essentiellement de lister tous mes articles. Je vais d'abord étendre ceci et déplacer cela vers haut ou vers le bas comme vous voulez parce que je n'en ai plus vraiment besoin. Ce que vous pouvez faire est de sauter à l'intérieur de vos bibliothèques, à l'intérieur de votre panneau d'actifs et de voir ce que vous avez ici. Vous avez donc des couleurs, styles de caractères, et vous avez tous ces différents composants que vous avez créés tout au long de votre processus de conception. Maintenant, ce que vous pouvez faire est de passer par ici et simplement glisser et déposer ces éléments ici. Ou vous pouvez aller tout au long de votre conception. Donc, ici, par exemple. Ensuite, sélectionnez et copiez des éléments à partir d'ici, puis basez-les vers votre guide de style. Alors commençons. Ce que je peux faire en premier, c'est que je peux, par exemple, lister toutes mes couleurs. Ainsi, vous pouvez appuyer sur t pour l'outil Type, Tapez dans les couleurs. Ou je peux aller tout le capital. Comme vous le voulez. Vous pouvez le sélectionner et appliquer, par exemple, ce 92, comme ça. Juste pour qu'il soit bien visible et qu'il se marie bien avec notre texte. Si vieille position que juste là. Et voyons, peut-être que je peux positionner ainsi 12345678, disons par exemple, puis plus il vous avait contrôlé, positionné est bas et utilisé. Voyons voir. Je ne sais pas, 24 régulier. Assurez-vous que c'est comme ça. Assurez-vous que c'est comme ça aussi. Donc ce que je vais faire, c'est voir, 123456789. Je vais créer un rectangle. Par exemple, comme cela peut être. Donc deux à quatre largeur, voyons deux à quatre. Donc juste un carré de base et ce que j'ai dit neuf. Répétez donc la grille et créez neuf instances. Donc 2467. En fait, c'est beaucoup trop grand, alors revenons à l'original et peut-être le rendre un peu plus petit. Donc quelque chose comme ça, je pense va bien marcher. Je vais enlever ma frontière. Il répétait la grille et créait neuf surdoses. Donc, si vous ne pouvez pas les voir, vous pouvez simplement les finir comme cette grille de dissociation et C, donc 24689. Donc je vais enlever ces deux-là. Donc en fait ces deux-là. Et maintenant, vous pouvez commencer par appliquer vos couleurs. Donc je peux cliquer sur ceux-ci, donc je peux cliquer sur celui-ci. C' est blanc uni. Cliquez sur le suivant, gris clair, le suivant gris foncé. Et puis simplement passer à partir de là et appliquer toutes mes nuances de couleur à agréable. Donc comme ça. Ce que je peux faire, c'est aussi leur donner des noms ici, mais je vais simplement les organiser d'une manière différente. Donc je vais les positionner comme ça. Donc encore une fois, de gauche à droite, peut-être qu'il y a juste de faire des trucs collectés de manière vraiment organisée, mais c'est vraiment à vous de décider comment vous voulez faire ça. Donc, maintenant que vous avez présenté tous ces éléments, ce que vous pouvez également faire est de changer la couleur de votre guide de style. Notre rapport. Ainsi, vous pouvez cliquer ici et aller tout le chemin noir, par exemple. Et maintenant, vous pouvez le présenter comme DES. Donc, en quelque sorte de mode sombre si vous le souhaitez, vous pouvez utiliser une couleur neutre que vous n'avez pas utilisée. Par exemple, celui-ci parce qu'il n'apparaît nulle part dans notre projet où nous pourrions simplement utiliser du blanc. C' est à vous de décider et comment vous voulez structurer la mort. La prochaine chose que vous pouvez faire avec vos couleurs est assez simple. Vous pouvez faire le contrôle D, positionner les districts ici, plus encore. C' est tout le chemin juste ici. Et fondamentalement, assurez-vous que c'est au centre de cela. Et il suffit d'utiliser le code hexadécimal pour cela. Retournez à une couleur. Cliquez droit. Vous pouvez copier ou cliquer avec le bouton droit de la souris. Voyons voir, il a changé les couleurs si. Je peux faire un clic droit sur Modifier. Et maintenant, vous pouvez copier le code hexadécimal lui-même, sauter ici, contrôler V. Et maintenant vous pouvez baser ce code hexadécimal. Ainsi, vous pouvez plus de vin que vous pouvez contrôler le disque de position ici. Cliquez avec le bouton droit Modifier Et vous pouvez copier le code hexadécimal de celui-ci. Et laissez-les rapidement mettre la vidéo en pause pour que je puisse aller de l'avant et finir tout ça juste pour vous montrer à quoi ça ressemble. Et maintenant que j'ai fini la dose, ce que je peux faire ensuite, c'est sauter ici. Assurez-vous, par exemple, que c'est au centre de ma place comme ça, et appelez-le blanc uni. Je peux m'assurer que c'est x 16 par exemple. Donc beaucoup plus petit de sorte que vous pouvez adapter et je peux utiliser cette couleur par exemple. Et vous pouvez le positionner ici comme ça. Contrôle D. Et pour rendre les choses plus rapides, vous pouvez double-cliquer sur le contrôle CDO Club contrôle V, et simplement changer cela pour induire coloré. Assurez-vous qu'ils sont dans leur position de contrôle D au centre. Assurez-vous que ce disque va du centre et qu'il n'est pas aligné à gauche. Donc ça ne nous donne pas ces pépins. Changez-le et nous devrions décolorer et mourrons. Et en fait, vous pouvez aller de l'avant et apporter ces changements pour tous. Donc, c'est notre vert moyen parce que chaque fois que vous cliquez sur ce texte va appliquer la couleur de la dette à elle. Contrôle D, je suis sûr qu'il est là. Je peux faire, c'est vert secondaire, comme ça. Et faisons rapidement la même chose pour tous. L' administrateur l'a positionné ici. Comme cette couleur principale, ce gris foncé. Je peux le faire. Presque noir comme vous pouvez le voir, si vous êtes Tom parler comme moi, alors vous allez être en mesure de faire tous ces changements plus vite et finalement changé ici, aligner et le troupeau laitier, nous avons complété toutes nos couleurs. Maintenant, vous pouvez les positionner pour être, par exemple, 40. Voyons où nous sommes, 123, Dario. Et vous pouvez sélectionner toutes ces bonnes épidémies et positionner cela comme, par exemple, 81 où nous travaillons ici, 80. Donc même discipline Witten à résoudre comme ça. Et quand vous avez fini vos couleurs, vous pouvez simplement passer aux polices. La position est connue ici appelée cette couleur. Ensuite, vous pouvez faire un duplicata de celui-ci, assurez-vous qu'il est à 80 et polices de qualité ou topographie. Et comment pouvez-vous faire face à la typographie est en fait assez simple. Laissez-moi vous le montrer rapidement aussi. Ainsi, vous pouvez réellement aller à la Wikipédia, par exemple, et trouver l'alphabet anglais. Et ce que vous pouvez faire est en fait sélectionner toutes ces lettres, appuyez sur Contrôle C, par exemple. Et puis vous pouvez dupliquer celui-ci, positionner là-bas, et localiser la taille la plus basse. Donc celui-ci est, vous pouvez voir que nous avons ces problèmes ici. Assurez-vous qu'il est aligné à gauche et double-cliquez dans Contrôle V. Si nous zoomons, vous pouvez voir qu'il a fait toutes ces modifications, mais parfois vous pouvez voir qu'il les a retournés pour une raison quelconque. Donc, contrôlez x et puis vous pouvez les positionner comme ceci. Donc, évidemment, un capital de dette inférieur vient en premier, puis une lettre plus petite vient secondaire. Laissez-moi interrompre la vidéo pendant que je le fais pour tous. Et maintenant que je l'ai fait, vous pouvez voir où ça va évidemment. Assurez-vous donc d'annoter Control D, positionnez-le vers le bas. Vous pouvez cliquer sur celui-ci. Assurez-vous qu'il est à 80 ans aussi. Comme ce disque de position D de contrôle vers le bas en 80. Et puis vous pouvez cliquer entre tous ces différents états. Avez-vous créé ? Et si vous n'aimez pas la dette, c'est tellement espacé, évidemment, la miniature 80. Et allons-y rapidement et finissons toutes ces choses pour que nous puissions sauter et créer un silence supplémentaire derrière cela. Donc, si vous n'aimez pas ça, c'est un jour aussi, vous pouvez évidemment le passer à, par exemple, 40 pour que vous ayez assez d'espace pour tout ça. Donc 40 partout. Comme ça. Je ne sais pas pourquoi ça nous donne. Donc, nous avons montré que c'était 40 aussi, parce que ça va jusqu'ici. Ce que vous pouvez faire est évidemment couper ici et ensuite augmenter l'espacement à Arno cherche connu par exemple, ou, voyons, 60. Petit, c'est bon. Et enfin, faites la même chose ici. Donc 40, je vais le couper ici. Laissez voir le crédit ici aussi. Et appelons ça un jour. Donnons celui-là. A, par exemple, je pense que ça va bien. Et fondamentalement, la dette est votre typographie. Vous n'avez pas à le faire pour chacun d'entre eux, mais si vous le voulez, vous pouvez, et ce ne sont pas vos solutions. Je vais donc simplement regrouper toute cette topographie de qualité. Et maintenant, je peux passer à la prochaine chose. Et la prochaine chose peut être des icônes. Donc, je peux positionner ça comme étant à 90 ou 80. Je peux appeler cela l'iconographie, par exemple. Et s'il pense que ceux-ci sont juste un peu trop évidents, vous pouvez changer la couleur de ceux-ci. Alors donnons-leur cette couleur moyenne, par exemple, juste pour les différencier pour tous ceux-ci. Maintenant, pour les icônes, ce que vous pouvez faire est simplement aller ici, aller jusqu'au bas, et localiser vos icônes séparées et les glisser et les déposer en position. Par exemple, désintox cette flèche, mais nous ne les utiliserons pas parce que nous les utilisons pour l'architecture de site Web. Nous allons en fait commencer l'emplacement. Alors glisse-le dans la police où il est. C' est là. Téléphone. Donc une fois de plus, nous utilisons cette étoile pour notre filaire, mais nous pouvons la positionner ici si vous le voulez. Icône flèche, icône e-mail, en ligne, recommandation, chronomètre. Et maintenant nous avons ces icônes solides Missy, Si je peux sélectionner l'ancien C comme ça et essayer de faire glisser et déposer tous en place. Je peux, comme vous pouvez le voir. Donc, vous pouvez le faire aussi. Vous comprenez le point. Donc, vous commencez avec ceux-ci et ensuite vous commencez à commander humide à gauche et à droite. Alors, comment puis-je faire ça ? Je peux simplement copier, désolé, positionner le disque 80, la position et celui-ci à 80 aussi, comme ceci. Assurez-vous que celui-ci, par exemple, est au centre parce qu'il est beaucoup plus petit. Positionnez-le pour m'entendre, nous nous sommes assurés que cela est organisé ici, disons comme ça. Et ce que je peux faire, c'est faire de même pour celui-ci. Ou je peux positionner celui-ci ci-dessous, par exemple. Et puis assurez-vous que tous sont ici, parce que ceux-ci sont de la même taille que Ds. Je peux les positionner ici et je peux les espacer encore plus. Donc, par exemple, je peux leur donner, je ne sais pas. Voyons voir. Peut-être que je peux les sélectionner. Temps à trois, par exemple. Sélectionnez ensuite cette 1123. Le sélectionné ce 130. Ces mêmes quatre D sont les mêmes pour réduire. Même pour ces deux-là. Enfin vu pour la discipline comme ça. Maintenant, vous pouvez mettre ces trois à la fin ici. Comme vous pouvez le voir, il peut parfois être un peu difficile de les sélectionner. Assurez-vous donc que ce sont, par exemple, 30 aussi, et vous pouvez vous assurer qu'ils sont alignés correctement. Maintenant, vous pouvez les positionner pour vous assurer qu'ils sont dans un centre comme celui-ci. Et nous sommes, voyons, à 34 ans. Je peux le désélectionner. Je peux le positionner ici. Dans l'ensemble, vous obtenez l'image où cela va. Maintenant, ce que vous pouvez faire, c'est qu'on a encore ça. Donc, je ne sais pas pourquoi ça continue de sauter de haut en bas quand je sélectionne Nouvelles. C' est vraiment ennuyeux. Je peux donc les positionner ici parce qu'ils sont les mêmes que ceux-ci. Donc, évidemment, vous pouvez positionner ceci ici, le sélectionner celui-ci. Et voyons, je peux le positionner à 30. Je peux m'assurer que c'est 30 aussi. Et ceux-ci sélectionnent celui-ci et assurez-vous que c'est 30 aussi bien. Et regardons ça, voyons si nous avons d'autres icônes qui ressemblent. Nous avons ces deux-là. Laissez-moi sélectionner Disk dépensers. Je peux le traîner et le déposer ici. Voyons s'ils peuvent s'adapter ici à une tâche redoutable bien, donc je peux rapidement positionner cela trop battu vers le bas. Et puis je peux les sélectionner pour m'assurer que je suis à 40, par exemple, de DES ou même plus, disons 80, comme ceci. Et puis assurez-vous que celui-ci est à 30 de celui-ci, comme ça. Et vous pouvez évidemment les espacer tous, mais vous comprenez le but. Vous pouvez les photographier, vous allez les glisser et les déposer tous à l'intérieur. Ensuite, je vais faire la même chose avec ces trois, par exemple. Et je peux les sélectionner positionnés ici. Voyons voir. La charité va avoir 30 ans aussi. Ce sera aussi la souveraineté. Et vous pouvez sauter à l'intérieur d'eux. Ainsi, la conversion, par exemple, je peux supprimer le texte, factures bêta et le transfert. Vous pouvez même masquer l'arrière-plan du bureau si vous le souhaitez. Alors laissez juste les icônes, mais je partirai avec comme la saleté. Et je vais maintenant positionner mon cercle ici parce qu'il s'adapte évidemment cette photo à Batalden avant de m'assurer qu'il s'aligne au centre avec ceux-ci. Et fondamentalement à l'intérieur sont vos icônes. Peut-être qu'on peut vérifier si on en a d'autres. Nous avons ce était donc par exemple, je peux cliquer ici. Je peux le positionner au centre de ceux-ci, donc assurez-vous que je suis sur un territoire comme celui-ci. Contrôle D. Je suis à 30 une fois de plus et frappe ça. Donc je peux savoir que j'ai rencontré cet état. Enfin, vous avez mon icône d'investissement, qui est beaucoup plus grande que toutes ces autres. Donc, par exemple, je peux le positionner ici ou je peux en faire la première icône ou autre, mais vous obtenez le point. Enfin, ce que nous pouvons aussi faire est de frapper le contrôle D pour nous assurer que nous sommes à 80 de celui-ci. Donc, et ce que nous pouvons faire ici est d'inclure ces composants afin que vous puissiez simplement glisser et déposer ces composants. Donc, par exemple, comme ça, vous pouvez le positionner héros. Appelons donc des composants, ou des composants principaux ou des composants de navigation ou comme vous le souhaitez. Vous pouvez le positionner ici, mais appelons-le des navigations comme ceci, par exemple. Et puis allez de bas en haut. Et voyons, où était notre première navigation ? Alors voyons. Nous pouvons trouver qu'il signifie nav ici c'est notre position ici. Et 80. Nous pouvons utiliser ces cartes de contact. Par exemple. Je ne vais pas, je peux inclure le pied de page, mais je ne vais pas mettre en quarantaine pour les investissements. Barre latérale. Peut-être qu'on peut mettre la barre latérale juste pour le montrer aussi. Donc à 80 ans et vous pouvez évidemment étendre votre bras vers le bas encore plus comme ça. Laisse-moi aller ici. Voyons où nous en sommes. Nous avons le top moyen maintenant je peux le faire glisser et le positionner pour être quelque part ici, par exemple. Et nous avons le top mobile maintenant, donc je peux le positionner ici aussi. Là, nous avons toutes nos navigations. Ce que nous pouvons faire ensuite, c'est traiter des ombres, par exemple, et des flous. Nous pouvons inclure cela. Enfin, nous pouvons inclure toutes ces icônes colorées. Alors faisons ça. En fait, bougeons tout ça et vers le bas. Donc c'est de l'iconographie. Et nous pouvons, par exemple, positionner cette dose dans le même dossier afin de ne pas trop compliquer les choses. Donc, ce que je peux faire est de zoomer un peu et je peux trouver d'où commencent ces icônes. Donc ils commencent à partir d'ici. Pour que je puisse le glisser et le déposer ici. Faites glisser celui-ci ici, assurez-vous qu'ils sont alignés. Ou nous pouvons simplement le glisser et le déposer ici. Et voyons, assurez-vous que nous avons 30 ans, par exemple. Comme ça. Assurez-vous que votre avocat ici aussi, comme ça. Sélectionnez-les tous. Assurez-vous qu'ils sont alignés, positionnez-les sur la grille. Assurez-vous que vous avez 80 ans d'ici. Donc comme ça, maintenant B sont 80. Et maintenant, je peux passer par et faire glisser et déposer toutes ces autres icônes pour que je puisse positionner celle-ci. Vous pouvez même faire des espaces pour montrer que ces icônes appartiennent ensemble, tandis que ceux-ci sont similaires, mais encore une fois, un peu différent et fait sur appartenaient ensemble. Mais vous pouvez aussi faire pour ceux-ci est de montrer différents états. Donc, il peut frapper le contrôle D, positionner ceci sur le territoire comme celui-ci, puis montrer l'état différent decette puis montrer l'état différent de icône parce que nous ne l'avons pas créé d'état différent. Ce que je peux faire, c'est tout simplement aller de l'avant et voyons où est ma couleur. Si je me souviens d'ici. C' était celui-là ? Non. Voyons où c'était. C' est là. Donc c'est la couleur. Donc, vous avez la photo. Vous pouvez afficher les variations de ces différentes icônes en affichant leurs styles. En montrant qu'il y a différentes variations avec la couleur, sans la couleur et ainsi de suite. C' était celui qu'il était positionné comme ici. Contrôle D. Ouvrez littéralement ça. La vache laitière. Et maintenant, vous pouvez faire la même chose pour le reste d'entre eux. Alors, nous allons sauter du côté. Je vais sélectionner celui-là. Sélectionnez celui-ci. Je ne sais pas pourquoi ça continue de sauter de haut en bas. C' est vraiment ennuyeux. Mais passons au pouvoir. Il doit donc s'assurer que c'est 30 ans. Et assurez-vous que c'est 30 aussi. Comme ça. Et enfin, déplacez ça pour être 30 et vous obtenez la photo. Tu peux faire la même chose que nous l'avons fait avec ces murs. Alors déplacez ce contrôle D plus disque pour être à 30. Sautez à l'intérieur de vos calques et voyez si c'est la couleur qu'il est. Sélectionnez le reste d'entre eux. Assurez-vous qu'ils sont parfaitement Contrôle D, comme ça. Et je vais cacher la couleur de celui-ci aussi. Comme ça. Et je vais dupliquer ce dernier. Et je ne m'embêterai pas à montrer toutes les icônes. Regarde, fermez-le là et appelez ça terminé. Mais vous pouvez voir le point et vous pouvez comprendre ce que j'essayais de vous montrer de toute façon. Alors donnons ça à un T6, 80. Peut-être que nous pouvons même position est d'être à 100. Donc 20 pour Ds. Je peux déplacer ce 20 vers le bas. Ensuite, je peux déplacer ce 20 vers le bas, et je peux enfin déplacer mes couleurs 20 vers le bas aussi. Donc partout où nous en avons 100. Mais vous pouvez aussi faire ici. Il inclut des éléments supplémentaires. Ainsi, des éléments supplémentaires ou même des styles supplémentaires peuvent être, par exemple, effets de flou peuvent être des ombres portées et différentes variations d'ombres portées. Ainsi, par exemple, celui qui a 20% d'obésité, celui qui a 41%, a 60%. Donc, je vous recommande toujours de leur montrer comment oser en profondeur. Maintenant, une fois que le développeur peut faire avec ceux-ci est assez simple. Vous pouvez sélectionner, par exemple, ces icônes. Alors, allons par ici. Et disons que je veux sélectionner et exporter toutes ces icônes. Je peux le faire. Il suffit de les sélectionner tous. Contrôle de frappe, c'est à dire. Peut-être que vous allez avoir quelques problèmes ici parce que nous avons ceux-ci déjà exportés. Alors peut-être que je peux changer mon dossier. Allready l'a fait. Eh bien, voyons voir. Par exemple, je peux utiliser celui-ci juste, juste pour vous montrer. Donc, comme SVG frapper Export et il va exporter toutes ces icônes, SVG. Et évidemment, cela va être beaucoup plus facile pour les développeurs d'accéder parce qu'ils les ont dans le dossier comme la dette. Tous certains, vous pouvez sauter à l'intérieur d'ici, par exemple, et donner ce personnel comme une icône de compte candidat, en noir et blanc. Et vous pouvez le faire pour tous ces autres. Ainsi, vous pouvez alors, une fois que vous avez fini de renommer, vous pouvez simplement les sélectionner. Il avait contrôlé e dans l'exportation, toutes ces icônes pour qu'ils puissent y accéder comme ça. Ils peuvent également ouvrir ce fichier. Cliquez ici et voir par exemple, ok, c'est ba broches 24 irrégulières, il est aligné à gauche et il a, par exemple, l'obésité ou 100 et il a ce collège. Ils ont donc la possibilité ici aussi. Pour explorer toutes ces polices que vous avez utilisées. Ils ont les options de voir ces couleurs. Ils ont les options de voir ces codes hexadécimaux et dire r k. Donc c'est ce code hexadécimal. Ils peuvent sauter à l'intérieur d'ici, frapper Control C et appliquer directement à partir d'ici dans le code comme cette couleur de code hexadécimal. Donc, c'est fondamentalement tout. C' est ainsi que vous utilisez ce guide de style de projet. Laissez-moi enfin les sélectionner. Appelez-le et les composants de navigation. Déplacez le groupe de disques vers le haut, sélectionnez mes icônes et voyez où sont toutes ces flèches. Donc ici, contrôlez g, appelez ces icônes et déplacez-les ici, ou iconographie comme ça. Et ce que je veux vous montrer pour la fin, c'est que vous pouvez également exporter ceci au format PDF. Ainsi, ils peuvent copier ces valeurs PDF. Ils peuvent le voir d'ici. Ils peuvent voir toutes ces icônes, composants de navigation, à quoi ils ressemblent. Évidemment, vous pouvez l'exporter en JPEG, en PNG, mais vous pouvez également l'exporter en PDF pour le faire, contrôler, choisir le PDF à partir d'ici. Donc c'est là. Appuyez sur Exporter et il va l'exporter dans ce dossier. Alors laissez-moi le voir. Était-ce ici ? Oui, ça l'est. C'est là. Donc, le guide de style de projet, double-cliquez et laissez-moi l'ouvrir pour vous montrer à quoi ressemblera ce PDF. Donc c'est là. Si un bon contrôle est 0, il va dézoomer et vous pouvez voir à quoi il ressemble. Mais si je zoome juste un peu, vous pouvez voir qu'ils peuvent toujours sélectionner ce texte s'ils le veulent, et ils peuvent y accéder et éditer à volonté s'ils le veulent. Ils peuvent rapidement jeter un coup d'œil à la topographie, aux couleurs, à toutes ces différentes icônes, composants de navigation. Et ils peuvent voir tous ces différents éléments, quoi ils ressemblent. Et vous pouvez également inclure tous les autres éléments supplémentaires que vous voulez dans votre conception. Donc c'est fondamentalement tout pour le guide de style, et c'est fondamentalement tout pour le discours. Je vous verrai dans la prochaine vidéo où je parlerai de l'outro, ce que vous pouvez obtenir en dehors du discours. Et je vais aussi parler d'une ressource que j'ai utilisée dans discours une fois de plus et vous montrer où vous pouvez l'obtenir encore une fois. Alors je te verrai là-bas. 75. Conclusion et ressources: Vous avez atteint la fin du cours. Merci beaucoup d'avoir regardé ce cours et j'espère vraiment que vous en avez tiré une certaine valeur et que vous avez compris à quel point Adobe XD est facile à utiliser et à quel pointil quel point Adobe XD est facile à utiliser et à quel point est facile d'utiliser ce processus de conception dès que vous arrivez à FANBOYS. N' oubliez pas que vous n'allez pas utiliser ce processus de conception exact pour chaque projet. Mais par exemple, si vous travaillez sur un projet un peu plus grand comme celui-ci est, alors je vous recommande vraiment d'utiliser ce processus de conception, qui va également augmenter vos gains parce que vous pouvez justifier l'argent que vous demandez à votre client simplement en leur montrant ce processus de conception, ce qui est impliqué à l'intérieur et toutes les étapes que vous devez prendre pour le terminer et pour le compléter. Une fois de plus, merci encore d'avoir regardé. Et j'espère vraiment que vous allez utiliser au moins certaines de ces techniques dans votre travail quand il s'agit de liens et de ressources déjà mentionnés à quelques reprises tout au long de ce cours. Ainsi, vous pouvez utiliser des ressources gratuites autant que vous le souhaitez, autant que vous en avez besoin. Ils sont libres après tout. Mais comme je l'ai expliqué dans certaines vidéos, pour certaines ressources, vous devez relier à l'auteur original. Sinon, vous pourriez avoir quelques problèmes plus tard. Mais pour les ressources premium que je partage avec vous en ce moment, je voulais juste souligner une fois de plus parce que c'est extrêmement important. Veuillez vous assurer que vous utilisez ces ressources uniquement à des fins d'apprentissage. N' utilisez pas ces ressources pour le travail client car cela peut vous mettre en danger plus tard, si l'un de ces créateurs ou éléments invités décide de vous poursuivre parce que vous les utilisez sans autorisation et sans licence. Encore une fois, si vous voulez site Web, si vous aimez dans VO2 éléments sont soulagés un lien pour vous les gars de vérifier. Et je pense que le prix n'est vraiment pas si cher compte tenu de ce que vous avez à télécharger sur ce site et il n'y a pas de limites. Par exemple, il y a un site Web appelé White, et je vous ai montré que j'ai obtenu mes icônes de sélection sur le site usaid et que je les ai achetées là-bas. Et ils ont également ces types d'adhésion pour les téléchargements de produits, mais vous êtes limité par le nombre de téléchargements quotidiens. Alors assurez-vous juste de comprendre que si vous avez besoin de certains types de téléchargements Aujourd'hui, vous allez utiliser et des éléments vitaux parce que c'est juste un bien meilleur investissement, parce que vous n'avez aucune de ces limitations. Vous pouvez simplement télécharger et utiliser autant de ceux-ci que vous le souhaitez. Et la principale raison pour laquelle c'est beaucoup de fois que vous allez voir que vous allez penser que la ressource va bien s'adapter. 76. Projet de cours Skillshare: Qu' est-ce qu'une compétence partage de classe B sans projet de classe de partage de compétences. Donc, pour votre projet de classe de show de compétences, j'aimerais vraiment que vous créiez soit le même design que nous l'avons fait tout au long de ce cours. Et vous pouvez poster une image sur la compétence, partager des fichiers de projet, ou vous pouvez créer quelque chose que vous voulez, ce que je vous encourage à faire parce que c'est en fait la meilleure façon de pratiquer ce que vous avez appris tout au long de ce cours. Assurez-vous donc de publier une image dans un projet de classe de partage de compétences ou d'autres étudiants peuvent le voir. Pour que je puisse le voir. Et je peux, par exemple, vous donner d'autres commentaires. Comment pouvez-vous améliorer ce design et votre style de conception orale. Donc, je vous encourage vraiment tout ce que vous faites, du mélange de discours pour le publier au projet de classe de partage de compétences. Donc, moi et les autres étudiants pouvons le voir pour que nous puissions construire cette communauté de cette façon. Ne vous inquiétez pas que quelqu'un d'autre juge votre travail. On est juste amis ici et on veut juste s'entraider avec ce cours. Alors assurez-vous de poster à des projets de classe de spectacle de compétences. Donc, moi et d'autres personnes du discours pouvons le voir aussi. 77. Chaîne YouTube pour plus de contenu: Hey designer, Alex et moi, je voulais juste vous dire un rapide merci. Merci d'avoir suivi ce cours et j'espère vraiment que vous tirez autant de valeur que possible. Si vous souhaitez consulter plus de contenu. J' ai récemment lancé ma chaîne youtube où explorer quelques sujets qui pourraient intéresser les concepteurs du freelancer aux techniques de revenu passives de la conception web, la conception d' applications, la conception d'interface utilisateur, la conception d'UX. Donc, si vous êtes intéressé par l'un de ces sujets, rendez-vous sur ma chaîne YouTube. Je vais le lier en PDF et vous pouvez simplement cliquer là et il vous mènera à ma chaîne YouTube. Si vous aimez ce contenu, assurez-vous de vous abonner et assurez-vous de suivre, car je vais essayer d'être vraiment irrégulier avec cette chaîne YouTube et applaudir autant de contenu que possible. Merci encore une fois d'avoir suivi mon cours et j'espère vraiment vous voir sur ma chaîne YouTube, garderie. 78. Rejoignez mon groupe Facebook gratuit: C' est un designer. J' espère vraiment que vous avez apprécié le cours et la cible autant de valeur que possible hors de lui, si vous voulez recevoir encore plus de valeur de moi et de la communauté de design, j'ai créé un groupe Facebook où vous pouvez rejoindre est juste un groupe Facebook pour mes étudiants le long. Vous pouvez donc vous joindre en cliquant sur le lien ci-dessous. Ordinate, bien sûr est un compte Facebook et c'est un groupe gratuit à rejoindre. Le groupe est formé afin de vous fournir des commentaires supplémentaires afin que vous puissiez joindre vos dessins en suivant ce cours et en utilisant des exemples tirés du discours ou de tout autre de mes cours. Ou si vous avez vos propres exemples d'œuvres de design du passé ou du présent, vous pouvez télécharger ces œuvres dans le groupe Facebook et recevoir ensuite des commentaires de moi ou d'autres membres du design. Je vous encourage également si vous avez un emploi, des postes disponibles pour les partager dans ce groupe. Pour que tout le monde puisse bénéficier de ce groupe. Encore une fois, le groupe est libre, il est facile de rejoindre. Il vous suffit de cliquer sur le lien dans le PDF. Et je m'attends vraiment à voir autant d'entre vous que possible dans ce groupe juste pour partager nos expériences en tant que designers et je vais essayer de poster quelques vidéos supplémentaires, quelques conseils et techniques supplémentaires dans ce groupe Facebook. Mais pour l'instant, nous commençons tout juste. On va juste le former. Et je vous encourage vraiment à vous joindre et à partager votre meilleur travail là-bas, à inspirer d'autres designers ou à demander des commentaires supplémentaires. Assurez-vous juste s'il vous plaît, quand vous demandez des commentaires, comme pour une chose spécifique, ne pas juste ce que vous pensez de cette conception, parce que personne ne va répondre à cela. S' ils font leur propre truc, ils vont vous dire, est-ce que ça a l'air sympa ou ça n'a pas l'air sympa. Assurez-vous de demander des commentaires spécifiques sur vos conceptions. Par exemple, faites comme cette combinaison de couleurs, pensez-vous que je devrais utiliser une police différente ? Pensez que ces images correspondent bien à la couleur de fond, par exemple, des choses comme ça. Alors assurez-vous de demander des commentaires spécifiques sur vos conceptions, car il sera beaucoup plus facile pour moi et pour les autres designers de ce groupe de vous donner commentaires spécifiques que vous pouvez améliorer beaucoup plus rapidement qu'en demandant simplement, que pensez -vous de cette conception ? Merci encore une fois d'avoir suivi mon cours et j' espère vraiment vous voir au sein de mon groupe Facebook. Daguerre.