Conception de sites internet de A à Z dans Adobe Xd - Agence de voyage

1. Introduction du cours: Hey designer et mon nom est Alex et bienvenue à cette classe Skillshare sur la conception de site web dans Adobe XD. Je suis le fondateur du beignet web, où nous créons des sondes de design pour des créatifs comme cube. Je suis aussi professeur, et jusqu'à présent plus de 30000 étudiants se sont inscrits à mes cours. Dans cette classe, nous allons concevoir un site web pour l'agence de voyage. Et nous allons expliquer comment commencer avec le dossier de conception, explorer notre public cible et explorer le marché, l' analyse des concurrents et voir ce qu'ils font et ce que nous pouvons améliorer dans notre conception. Créez un tableau d'ambiance pour déterminer le style et l'orientation de nos projets. Dessinez des filaires sur du papier pour explorer la structure et mettre des idées de notre tête sur le morceau de papier. Ensuite, nous allons importer ces dessins dans Adobe XD et créer des trames filaires et les partager avec nos clients pour obtenir des commentaires. Avec ces commentaires, nous allons passer à la conception et ajouter de la couleur, des images, des icônes, et plus encore. Avec la conception en place, nous ajouterons des animations et des interactions pour donner au client une meilleure idée du flux utilisateur et des transitions. Créez ensuite un design réactif et adapté pour travailler sur différentes tailles d'écran, ordinateurs de bureau aux tablettes et téléphones. Enfin, nous partagerons nos fichiers avec des clients et des développeurs en utilisant différentes méthodes et techniques. N' importe qui peut suivre cette classe, mais parce qu'elle contient des techniques et des animations plus avancées, connaissance de base d'Adobe XD est nécessaire pour suivre cette classe sans aucun problème. À la fin de ce cours, vous serez en mesure de concevoir des mises en page de sites Web complexes dans Adobe XD à l'aide de techniques d'organisation et d'animation avancées. Votre classe de projet Skillshare pour cette classe consiste à utiliser l'une des pages, ou si vous le souhaitez, vous pouvez même concevoir ou quatre. Je vous exhorte à utiliser vos propres images, peut-être utiliser vos propres icônes et peut-être même utiliser vos propres couleurs juste pour pimenter les choses un peu, suivre les techniques et suivre les directives de cette classe pour trouver votre propre design. Ensuite, publiez ce design dans vos projets de classe pour moi et tout le monde à voir. Et je serai heureux de vous faire part de vos commentaires. Donc, si vous voulez améliorer vos compétences et votre productivité, économisez beaucoup de temps sur les itérations et les changements et créez des designs plus rapidement. Alors je te verrai en classe. 2. Brief du design: D' accord, donc la première leçon avec laquelle nous allons commencer ce cours est avec le dossier de conception. Et je vous recommande toujours de commencer par le dossier de conception parce que de cette façon, vous pouvez obtenir autant de détails que vous avez besoin pour commencer à travailler sur vos projets. Et il est toujours préférable de le faire avant de commencer travailler sur un projet parce que de cette façon, vous pouvez poser votre client autant de questions que vous voulez et que vous avez besoin pour obtenir une meilleure image d'une marque, d'un projet ou de ce qu'il besoin. Donc, je vais vous montrer notre modèle que vous pouvez utiliser pour des projets personnels et commerciaux. Et je vais vous donner leur modèle mange Adobe XD modèle et vous pouvez évidemment édité autant que vous le souhaitez. Donc, ici, il est ce modèle, juste ici vous avez des essentiels brèves. Et ici, nous avons notre mémoire. Et évidemment, notre mémoire est la chose sur laquelle nous allons nous concentrer dans cette vidéo. Mais vous pouvez également explorer de brefs éléments essentiels et en apprendre davantage sur tous ces aspects. Fondamentalement, ce ne sont que les questions que vous allez poser à votre client pour avoir une meilleure image de la marque elle-même, pour mieux comprendre ce qu'il a besoin de ce projet. Nous avons donc le mémoire rempli. Encore une fois, vous allez obtenir un modèle vide que vous pouvez ressentir avec vos détails. Mais ici, nous avons ceci rempli en bref avec le profil de l'entreprise. Ça s'appelle la conception de site Web itinérant. Et vous pouvez voir que la date limite est le 6 avril 2020. Un profil d'entreprise, si gravelly est une agence de voyage située à Belgrade, Serbie. Ils ont des partenaires à travers le monde et leurs spécialités combinant voyage vers de grands endroits avec des outils et exploration de la culture et de la cuisine locales. Le principalement axé sur les visites de groupe, mais ont des options pour des outils individuels où ils fournissent tout de billets, hôtel, nourriture, visites, le tout dans un forfait exclusif. Leurs voyages durent entre trois et 14 jours et ils essaient de se concentrer autant que possible sur le transport aérien parce que cela leur permet d'économiser beaucoup d'argent. Enzyme entre les visites. Ils ont dix employés à temps plein, si petite entreprise ici et ont des agents indépendants travaillant avec eux de partout dans le monde, voyagistes aux propriétaires d'hébergement en passant par les services de transport. Le principal point de ce projet est d'attirer plus d'utilisateurs sur leur site Web et de commander un moment, fermer des magasins physiques, et de déplacer tout en ligne. conception d'applications mobiles est possible à l'avenir. Donc, fondamentalement, ce que nous avons ici sont quelques caractéristiques clés et importantes. Numéro 1, ils ne sont vraiment pas si gros d'une entreprise. Ils n'ont que 10 employés. Ils n'ont qu'un seul emplacement à Belgrade, en Serbie. Et leur objectif principal pour ce projet est au fil du temps, ils veulent attirer le plus de personnes possible d'autres parties de la Serbie et aussi d'autres parties de l'Europe sur leur site Web afin qu'ils puissent réserver ces bandes. Et parce qu'ils se concentrent principalement sur le transport aérien, il est beaucoup plus facile pour eux de s'étendre à tous ces autres pays et plus tard dans toute l'Europe. Et augmenter notre effectif en utilisant simplement le transport aérien au lieu de l'autobus. Parce que si vous voulez voyager en bus ou en train, vous devez être physiquement là. Mais avec les avions, vous pouvez réserver des avions pour aller de n'importe quel aéroport dans le monde, essentiellement à l'endroit désiré. Donc, disons que vous avez, par exemple, 20 personnes qui veulent visiter la Grèce et viennent d'Irlande, par exemple. Ensuite, vous pouvez réserver un voyage personnalisé en Irlande pour aller en Grèce. Et ils peuvent être les voyagistes qui guident et réservent tous ces services. Donc c'est fondamentalement tout pour cette section. Passons maintenant à la section suivante. Et dans la section suivante, nous avons projet ou réel. Le projet est donc axé sur une refonte de leur site web actuel, qui semble daté et beaucoup trop compliqué pour utiliser l'expérience utilisateur ou leur site web actuel nécessite un changement immédiat pour que les utilisateurs aient une meilleure expérience sur le site. La divulgation de texte et les images sont à l'ancienne et design entier ne parle pas bien avec le public cible. Ensuite, essayer d'atteindre le projet consistera en recherche, filaires, conception et livrables au client. Et leurs principaux problèmes en ce moment sont d'attirer plus de gens sur le site. Et quand ils le sont, ils les convertissent en utilisateurs parce que beaucoup atteint le site Web mais partent avant qu'ils ne se convertissent à être les utilisateurs. C' est l'objectif principal parce que les programmes scolaires ils font que tout en magasin lorsque les gens visitent l'endroit. Donc c'est le travail de l'agent en ce moment. Ils essaient de déplacer autant de choses en ligne que possible. Donc, une fois de plus, vous pouvez voir ici à partir de ce projet ou vous ce dont ils ont besoin. Et je vous conseille vraiment de parler à vos clients et d'obtenir le plus de détails possible parce que tous ces détails que vous voyez ici, je m'adresse au client. Posez-leur simplement toutes ces questions. Vous pouvez suivre ces questions de ce document de conception, ou vous pouvez concevoir vos propres questions, ce que je vous encourage à faire, car tous les projets ne sont pas les mêmes et vous ne serez pas obligé d'utiliser toutes ces informations pour tous vos projets. Parce que parfois vous allez simplement avoir un projet de page de destination et parfois vous allez avoir un site Web avec, par exemple, 50 ou 100 pages différentes. Et évidemment, pour ce site aussi grand que vous allez avoir besoin de beaucoup plus de détails et beaucoup plus d'informations que pour cette seule plage de débarquement singulière. Donc ci-dessous, nous avons des buts et des objectifs. Donc, comme nous l'avons dit, l'objectif principal de ce projet est d'attirer plus d'utilisateurs sur le site Web en ayant la grande expérience utilisateur leur permettant de rester et de réserver le voyage. Donc, une fois de plus, vous pouvez voir le modèle juste ici et ils veulent que leurs utilisateurs aient une grande expérience utilisateur pour réserver le voyage et déplacer autant de choses que possible en ligne, essentiellement pour éviter les gens d'aller à leur magasin physique. Les objectifs de ce projet est de suivre les gens avec une offre exceptionnelle et de les éloigner de la concurrence. Et une fois qu'ils deviennent client, les faire rester un en leur offrant d'autres services et offres comme les touristes par exemple. L' objectif de ce projet est de réduire le taux de rebond de 30%. Et le taux de rebond est fondamentalement ces personnes visitant le site et partant avant qu'ils s'engagent à un achat ou réserver le voyage ou quelque chose comme ça. Les six premiers mois, une fois le site mis en service, objectif supplémentaire est de convertir 15 pour cent plus de personnes dans ce temps en combinaison avec leur stratégie marketing. Et ils vont lancer avec ce site. Donc, une fois de plus, ils veulent diminuer ce taux de rebond, augmenter le nombre d'inscriptions, nombre de réservations de voyages. Et ils veulent aussi le faire en conjonction avec leurs tactiques marketing. Par exemple, voués à réserver nos publicités radiophoniques, ils voulaient réserver des publicités télévisées. Ils veulent utiliser des outils de marketing en ligne tels que Facebook et Instagram marketing. Ils veulent créer, par exemple, des clips YouTube. Et ce qu'ils veulent faire de tous ces efforts, c'est attirer les gens sur leur site Web, que nous allons concevoir. Et puis peut-être convertir 30% de personnes en plus dans les six premiers mois de cet effort. Donc des objectifs assez simples, mais vraiment difficile à atteindre. Et c'est pourquoi nous sommes ici pour essayer de convertir le plus grand nombre d'utilisateurs possible grâce à un excellent design. Ci-dessous, nous avons le public cible. Ainsi, vous pouvez voir l'âge est de 20 à 70 ans. Donc, une grande tranche d'âge parce que c'est une agence de voyage et ils ont quelque chose pour tout le monde. Ils ont des voyages que les plus jeunes pourraient préférer. Les ont quelques voyages de chasse Away avec les personnes âgées, qu'ils pourraient préférer sexe ou 40 pour cent d'hommes, 60 pour cent de femmes. Parce que, d'après leurs recherches, elles sont généralement de 60 %, toutes des femmes parce que les femmes sont généralement celles qui réservent des districts pour leur mari, pour leurs frères, pour leurs petits amis, etc. Pays de résidence actuellement seulement la Serbie. Mais comme nous l'avons dit, ils voulaient étendre la ville de résonance Belgrade parce qu'ils sont leur lieu de travail, principalement des emplois à faible revenu avec des propriétaires de petites entreprises ainsi, en particulier des pigistes, en particulier pour des voyages plus éloignés tels que par exemple la Thaïlande, comme par exemple les cow-boys indonésiens, des trucs comme ça. Parce que ces niches sont loin de Belgrade, en Serbie. habitudes de consommation des médias. Donc 60 pour cent Instagram parce que dénotent cela par combien de followers ils ont et combien de traction ils attirent et tous les médias sociaux. C' est pour ça qu'ils les ont mis sur un bout de papier comme celui-ci. Pour cent humide est sur Twitter et 10 pour cent est sur tiktok. Les habitudes quotidiennes, la consommation des médias sociaux, faire le trajet, manger sainement et faire de l'exercice dans l'après-midi. Enfin, nous atteignons ces deux exigences de conception. Ils veulent avoir des démences, des résolutions pour être dans un ordinateur de bureau, bureau plus petit, une tablette et un téléphone. Et ce sont la résolution de redimensionnement réactive. Les formats de fichiers sont Adobe XD comme fichier principal du projet, SVG pour les icônes car ils veulent les mettre à l'échelle plus tard et les utiliser en impression, par exemple. Donc SVG est le chemin à suivre ici. Images Png et JPEG, évidemment B et G pour les images sans arrière-plans. Et enfin, la bière pour le bref de conception et la recommandation de projet supplémentaire, le bref de conception. C' est ce que vous voyez ici ? Donc, vous pouvez simplement sauter ici. Appuyez sur Contrôle E, sélectionnez au lieu de PNG, sélectionnez PDF, sélectionnez votre destination parce que je n'ai pas cela et appuyez simplement sur Exporter. C' est pourquoi il va exporter au format PDF. Ensuite, vous pouvez partager ce PDF avec votre client afin qu'il ait également ce descriptif de conception. Qu' est-ce que nous avons ensuite, ce sont les formats de fichiers. Donc, comme nous l'avons dit, tous ces nécessitent une palette de qualité fournie sur demande. Ils ont donc fourni une palette de couleurs et nous allons l'utiliser. Mais je vais toujours vous montrer comment vous pouvez utiliser les moodboards pour générer votre palette de couleurs et travailler avec votre client. Images d'images à inclure, fournis sur demande et document associé Copie fournie sur demande et communication que nous avons incorporé tout au long du projet parce que nous avons besoin de détails sur ces destinations pour nous être fournis. Enfin, nous arrivons au budget, au calendrier et à la ventilation du budget. Donc, le total est de dix K, cinq K avant le début du projet et cinq clés à l'achèvement, ventilation du calendrier. Donc, évidemment, vous pouvez avoir votre propre chronologie ici, mais voici comment le mien fonctionne habituellement. Ainsi, un calendrier de projet est trois mois de temps supplémentaire pour la révision et les changements d'actifs pour les développeurs. Donc c'est un plus, mais ce plus va aussi être une charge. En outre, par exemple, vous pouvez donner une révision gratuitement pendant que vous travaillez, ou vous pouvez donner deux divisions. Ainsi, par exemple, un après les filaires et un après la conception, puis chaque illusion unique après cela va être chargé plus. Donc, je vous recommande toujours de le faire parce que lorsque vous définissez vos limites avec votre client, alors ils seront plus concentrés sur votre design. Et puis ils vont vous donner plus de commentaires de qualité. Donc, ne pas perdre votre temps et ne pas perdre leur temps aussi. Donc, vous devez être objectif. Vous devez leur dire tout de suite avant même d'activer Adobe XD. Lorsque votre machine essentiellement, vous devez leur dire tous ces prix. Tu dois leur dire la chronologie. Donc, ils savent dans quoi ils s'embarquent. Donc, si nous revenons ici, vous pouvez également modifier cette chronologie afin que vous puissiez voir la planification, la recherche, la présentation du design d'audience, cette division, et enfin la livraison. Donc c'est ma chronologie et évidemment vous pouvez le changer à ce que vous voulez. Vous pouvez changer les dates ici à combien chaque étape du projet va vous emmener. Vous pouvez changer ceci à votre nom ou à votre site Web et ce devrait être votre courrier au lieu de l'esprit. Enfin, je veux juste te montrer ça rapidement. Vous pouvez sauter à l'intérieur juste ici et changer toutes ces choses afin que vous puissiez changer la couleur si vous le souhaitez. Je ne voulais pas créer n'importe quel type de composants ici, comme vous pouvez le voir, n'importe quel type de couleurs. Parce que je voulais que ce soit aussi facile à éditer pour vous les gars que possible. Peut-être que vous voulez que ce soit, je ne sais pas, une sorte d'effet stationnaire. Peut-être que vous voulez créer cela pour être 3D. C' est pourquoi je ne voulais pas éditer cela plus loin. Et c'est pourquoi vous avez la possibilité d'éditer ce modèle. Donc, fondamentalement, la dette pour cette vidéo. Dans la prochaine vidéo, nous allons sauter dans l'analyse des concurrents. Nous allons analyser certains sites web réels et je vais vous montrer ce qui ne va pas avec eux et ce que nous allons essayer de réaliser avec ce projet de site Web et ce que nous allons essayer d'éviter en apprenant de ces erreurs de nos concurrents. Alors je te verrai là-bas. 3. Analyse des concurrents: Dans cette vidéo, nous allons commencer par une analyse rapide des concurrents. Nous allons analyser les concurrents de chansons dans ce domaine. Et ce qui est le plus important de tous, les concurrents de logo, parce que cette entreprise veut rivaliser localement avec les entreprises locales. Par conséquent, nous allons explorer ce qu'ils font bien et aussi ce qu'ils font mal. Pour que nous puissions essayer d'éviter de l'utiliser dans nos propres conceptions. Donc, ce que nous avons ici, ce sont tous ces sites Web. Ils sont en serbe, mais j'ai essayé de les traduire en anglais ici dans Chrome en utilisant le bouton droit de la souris, puis traduire en fonction anglais. Excusez-moi, si vous voyez un serbe et que vous ne le comprenez pas, mais fondamentalement, nous allons juste nous concentrer sur la conception et la convivialité, donc cela n'a pas vraiment d'importance. Donc nous allons commencer avec celui-ci. Vous pouvez voir évidemment mise en page en boîte et tout cet espace vide, donc ne pas ajuster vraiment vieille dette. Eh bien, vous pouvez aussi voir que vous ne savez pas où vous concentrer. Donc nous avons ce menu, ce menu, ce menu, nous avons ces menus, nous avons ces images, ces images. Alors, où dois-je me concentrer ? Il suffit de me guider à travers ce site web. Et tout ça parce que ces entreprises puent et vous allez remarquer que c'est une sorte d'équipe ici, la dette. Et plus les informations qu'ils ont essayé d'entasser, la batterie sera pour la profondeur, ce qui n'est évidemment pas le cas parce que les utilisateurs de ces sites Web sont fondamentalement les mêmes que les utilisateurs de tous ces autres sites Web. qui signifie essentiellement qu'ils veulent juste atteindre leur offre et qu'ils voulaient juste obtenir ce qui est bon pour eux et simplement passer à leur vie, semblent comme avec tous les autres sites Web en ligne. Par conséquent, ces sites Web ne sont pas si différents de toutes ces autres créneaux et de toutes ces autres catégories. Donc, guider vos utilisateurs à travers votre site Web et les montrer morceau par morceau afin que vous puissiez les inciter à cliquer pour accéder à ces autres sections de votre site Web ou des autres sections de votre page. Donc, ce que nous avons ici n'est pas si bon. En outre, ce que j'ai remarqué dans tous ces sites, c'est que la topographie est extrêmement petite, ce qui est difficile si vous vous souvenez que certains de nos publics cibles vont jusqu'à 70 plus. Par conséquent, ils pourraient avoir des difficultés à lire tout ce texte. Aussi, comme vous pouvez le voir, ce curseur ne fonctionne pas si bien parce que je ne peux rien changer. Il fonctionne simplement tout seul. Je dois cliquer ici, ce qui n'est pas évident dès le départ. Par conséquent, lorsque vous travaillez avec des curseurs, faites-le aussi évident que possible pour les gens. Où doivent-ils cliquer pour aller à l'image suivante s'ils veulent aller du tout. Ici, nous avons toutes ces différentes catégories divisées. Et je ne pense pas que ça marche si bien. Examinons pour un responsive. Et responsive fonctionne bien jusqu'au point, mais vous pouvez voir tout de suite ici qu'ils utilisent juste mise en page encadrée et tout cet espace perdu vide ici sur la droite, vous pouvez voir toutes ces images ne sont pas mises à l'échelle correctement, carte n'est pas mise à l'échelle correctement, pied de page et ainsi de suite. Donc, je le ferais juste, si vous devez utiliser la mise en page de la boîte pour l'utiliser, mais veille à l'échelle correctement. Commencez avec la conception réactive. Et vous pouvez voir ici avec les icônes des médias sociaux, il suffit de les sortir d'ici. Assurez-vous qu'ils sont ici ou à l'intérieur du pied de page. Vous pouvez voir combien d'espace vous avez ici. Alors passons à l'autre. Et c'est l'un des plus grands ici en Serbie. Donc, ils ont les mêmes erreurs mais le corrigé certains d'entre eux, comme par exemple, vous pouvez voir que nous pouvons effectivement cliquer sur ces points de pagination et se déplacer entre nos curseurs. Et ils ont aussi ceci ici pour que nous puissions choisir ce que nous voulons et nous pouvons cliquer sur la recherche. Et il nous emmène là où il nous mène à cette page aléatoire, la recherche. Vous pouvez voir les résultats de la recherche. Donc, cela nous prend juste ici, mais je veux juste cliquer et montrer la barre de recherche pour que je puisse entrer mes coordonnées et vous pouvez voir qu'ils n'ont pas de détails de recherche ici. Donc, vous devez passer par tous ces éléments, puis cliquez sur Rechercher, ce qui évite fondamentalement le point d'avoir cette recherche. Peut-être que vous devriez juste avoir un bouton au lieu de cette icône. Encore une fois, nous avons cette navigation déroutante. Et quand je survole ici, vous pouvez voir qu'il couvre cette partie inférieure. Donc, quand je survole, vous pouvez voir que je ne peux pas cliquer sur cette partie inférieure, je ne peux pas la voir. Et c'est vraiment un gros problème. Mais quand je clique ici, vous pouvez voir que je ne peux toujours pas voir tous ces, mais cela couvre ceci. Donc c'est juste un mal de tête énorme en utilisant cette navigation et c'est beaucoup trop compliqué, ainsi que cette section, encore une fois, toutes ces couleurs criant sur moi vraiment minuscules polices. n'y a pas d'images. Donc, par exemple, cette salle de conseil, comment, ce que c'est, comment ça ressemble ? Est-ce r c, est-ce une montagne ? Est-ce que c'est ? Je ne sais pas, au contraire, recourir à ce que c'est. Aussi ces images ici, ajuster ces images de sorte qu'ils ne sont pas des bannières ou dan va à l'échelle raisonnable, ou au moins si elles sont réduire le mélange avec vos concepteurs pour créer, par exemple, trois ou quatre ajouts différents de ces images de bannière afin que vous puissiez les utiliser dans toutes ces différentes sections parce qu'elles sont ici. Et quand je commence à redimensionner, vous pouvez voir que ces bannières restent les mêmes et ce texte est vraiment difficile à lire. Encore une fois, ce que nous avons ici, c'est que la navigation a disparu et cette partie supérieure a complètement disparu. Encore une fois, nous avons ce qui est très bien. C' est génial lorsque vous voulez économiser beaucoup d'espace. C' est aussi bon. Mais une fois de plus, cette confusion. Alors allons-y avec la Serbie. Et vous pouvez voir que ça reste juste ici, donc c'est trop déroutant. Cette navigation. Encore une fois, les images ne sont pas si géniales. Vous pouvez voir que les images ne sont pas mises à l'échelle ici. Alors pourquoi ? Et ils ont des effets de vol stationnaire. Donc, notez que c'est la version mobile, mais ils ont toujours un effet de vol stationnaire. Comment va planer quand vous pointez votre doigt dessus. Donc, ça devrait vraiment faire réparer ça. En outre, vous pouvez voir que les images ne sont pas mises à l'échelle à la taille. Vous pouvez voir tout ce texte. Donc, le bleu et le noir sur le rouge et le blanc ne fonctionne vraiment pas si bien. Encore une fois, l'espace vide avec juste vous montrer que cela est fait par un designer elisa ou par quelqu'un qui ne sait pas ce qu'ils font si bien. Ces icônes sont beaucoup trop grandes, mais au moins ils ont un bon pied de page et ils ont ces options de paiement, ce qui est toujours génial. Et enfin, ils ont des icônes de médias sociaux juste ici et de retour en haut, ce qui est toujours génial. Donc une fois de plus, ils font quelque chose de bien, mais beaucoup de ces choses ne sont pas si bonnes. Alors passons à celui qui s'appelle Big Blue. Et ils ont des informations bien faites comme ça, par exemple, comme je l'ai dit, cette navigation est beaucoup mieux. Alors allons-y avec l'été Cherokee. Vous pouvez voir que cette navigation fonctionne vraiment bien. Ils ont aussi une barre de recherche qui est génial, qui se développe, que je dois les féliciter. Et enfin, ce qu'ils font. Mais vous devez cliquer dessus pour le fermer. Encore une fois, pourquoi ne pas simplement cliquer ailleurs et il va se fermer. Mais peu importe, du moins l'habitude, c' est un cauchemar avec tous ces champs. Mais encore une fois, au moins ils les ont. Ils ont aussi ça, mais au moins ils n'ont pas autant de couleurs que ces gars. Donc, les entiers ont essentiellement trois couleurs. Blue, qui est le nom de l'entreprise dans laquelle va bien, continue avec la marque. Ils ont deux versions de couleur noire, par exemple. Ils ont cette couleur dorée, par exemple, et ils ont ces cadres l'entourant. Au moins, tu sais que c'est une section en soi. Ils ont ces images, mais ce que je n'aime pas, ce sont ces dons et ces curseurs qui se déplacent à leur propre rythme. Vous pouvez cliquer entre tous ces éléments. Ça va changer, ce qui est génial. Mais encore une fois, trop de ceux-ci et R les sépareraient en différentes sections et obligeraient les utilisateurs à cliquer s'ils le souhaitent. Parce que comme ça, c'est juste distrayant. Si je le laisse juste ici. Vous pouvez voir que ça marche comme un fou en arrière-plan. Donc je n'aime pas vraiment ça. Ici, ils ont ces images, ce qui est bien, mais je vais juste les rendre beaucoup plus grands parce que vous pouvez voir cet espace vide gauche et juste ici pour avoir ces images, ce qui est bon. Et j'aime vraiment leur mise en page, donc ils utilisent l'espace de façon judicieuse et pas seulement bourrer ces images où ils peuvent trouver qu'ils ont la destination du conseil de Best Buy. Et vous pouvez voir cette liste qui est géniale. Ils ont des marques avec lesquelles ils ont travaillé ou avec lesquelles ils travaillent. Et ils ont cette photo qui n'est pas si géniale, mais elle ne peut pas passer. Et enfin, newsletter e-mail, ce qui est génial pour que vous puissiez vous connecter avec. Enfin, ils ont juste ici en bas, ils ont quelque chose comme un logo, et ils ont ces icônes de médias sociaux, ce qui est génial et icône de retour en haut ici, qui n'est pas plus vieux, visible, mais au moins, ils l'ont. Voyons voir, sur redimensionner. Comme vous pouvez le voir, cela fonctionne très bien. Reste sur la marque. Ceci est facilement lisible, mais encore une fois, ces actions, ces images sont à l'échelle terriblement. Vous ne pouvez plus les lire ici. Alors qu'est-ce que ça dit ici dans cette section rouge, ou avoir vraiment aucune idée. Et vous pouvez voir une fois de plus que les sections ne sont pas si bonnes. C' est terrible. Vous devriez mettre à l'échelle correctement et pas comme ça ou pourquoi ne pas simplement mettre à l'échelle les images et les mettre sur l'autre ou simplement utiliser ces curseurs comme ils aiment vraiment le faire ici. Et ce que nous avons ici, ce sont des D. Alors pourquoi ne pas utiliser ces flèches pour tout ça ? Je ne comprends vraiment pas. Et enfin, ce que nous avons ici, ce sont ces images sur une fois de plus utilisées telles qu'elles sont, elles ne sont pas mises à l'échelle correctement. Ces forums une fois de plus, sorte que vous aurez deux écrans. Alors pourquoi en utiliser une partie ? Alors que cette section s'adapte vraiment bien. Pied de page se balance vraiment bien. Les icônes du forum et des médias sociaux sont toujours là. Et regardons l'horreur. Voyez s'ils l'ont éteint. Voyons voir. Je pense qu'ils l'ont fait. J' aime bien ces gars qui n'ont pas éteint le courant. Vous pouvez voir ici, je pense daté pour les versions mobiles, ce qui est génial. Et enfin, passons à ce site, qui s'adresse aux jeunes et aux jeunes publics. Donc vous pouvez voir tout de suite ici qu'ils ont utilisé certaines techniques un peu différentes puis tous ces autres sites que je vous ai montrés, vous pouvez voir qu'ils ont de grands textes juste ici au milieu de leur image. Ils ont des flèches à gauche et à droite, ce qui est très bien. Utilisez-les simplement et laissez-moi choisir ce que je veux faire. Et ils ont la pagination juste ici. Ils ont une navigation agréable et simple avec de grandes animations. Et vous pouvez voir, si je survolais ici, ça ne couvre pas toute cette zone. Il couvre juste ce qu'il a besoin de couvrir. Ci-dessous, ils ont toutes ces grandes cartes qui fonctionnent vraiment bien sur Howard. Et ils ont des survols séparés pour une image d'arrière-plan et pour le bouton lui-même. Ils ont clair en haut juste ici, ce que j'aime vraiment qu'ils utilisent la vidéo. Donc, comme vous le remarquez, aucun de ces sites précédents n'utilisait la vidéo. Ils utilisent simplement des images et ils utilisent la vidéo pour inciter les jeunes à acheter d'eux parce qu'ils sont principalement axés sur les jeunes, les voyages de fête d'Andy. Et vous pouvez voir ici, ces cartes sont vraiment super, mais encore une fois, les mettre à l'échelle et remplir le reste de l'espace. Ils ont une citation ici, mais je voudrais juste utiliser au moins une bannière, par exemple, toute la largeur de votre site Web et peut-être vous comme une image de voyage pour inspirer les gens avec cette citation parce que c'est ce que les citations supposées faire sur sites Web comme ceux-ci. Donc peut-être utiliser une image de bannière avec la citation au milieu. Nous avons un peu de France qui est super, abonnez-vous, qui restent toujours ici, qui sont vraiment comme, mais il n'y a pas de bouton ici. Donc, une fois que j'entre mon e-mail devrait avoir appuyez sur Entrée. Que dois-je faire lorsque j'utilise mobile ? Alors pensez à des choses comme la dette. Puis finalement, ils ont ce pied de page génial et génial. J' aime vraiment ça. C' est assez simple. Donc ici c'est leur destination et leur emplacement, ou ils ont leurs numéros de téléphone, ils ont leur adresse e-mail, ils ont une destination différente. Donc, dans cette autre ville appelé diplômés, et ils ont des numéros de téléphone séparés pour cette ville. Et vous pouvez voir les sites Web de leurs partenaires locaux. Et enfin, les icônes des médias sociaux juste ici. Chat ne actuellement pas disponible, mais au moins ils ont le chat, qui aucun de ces autres et faire. Enfin, quand je clique sur le dessus, vous pouvez voir à quoi cela ressemble et fondamentalement c'est tout. Le but principal de ces explorations est donc de comprendre ce que font vos concurrents. J' ai essayé de copier les bonnes choses, mais évidemment les ajuster pour la marque pour laquelle vous travaillez et essayer d'éviter les mauvaises choses comme je vous ai montré ici. Ainsi, par exemple, de très petites images topographiques qui ne sont pas bien mises à l'échelle, très petits points de taraudage. Ainsi, lorsque vous travaillez avec un design réactif et que les utilisateurs doivent appuyer quelque part, assurez-vous que ces boutons sont gros, assurez-vous que le texte est lisible. Les images sont claires et assurez-vous que vous communiquez votre message la meilleure façon possible afin que vos utilisateurs vous comprennent dès le début. Et dès qu'ils arrivent sur ce site. 4. Création d'une planche d'inspiration: Dans cette vidéo, nous allons créer des tableaux d'ambiance pour notre projet. Et les moodboards sont essentiellement Derek, juste pour vous mettre dans l'ambiance comme son nom l'indique. Et fondamentalement, ils sont là pour vous d'explorer les combinaisons de couleurs possibles, les humeurs possibles, et que ces images utilisent pour mettre la vôtre dans l'ambiance. Et c'est pour ça qu'on les appelle moodboards. Maintenant, vous pouvez les utiliser pour vous-même. Vous pouvez les utiliser dans un format numérique ou vous pouvez créer, par exemple, quelque chose comme une taille de lettre quatre ou US et les imprimer plus tard et les montrer à vos clients. Et évidemment, vous pouvez toujours les exporter au format PDF, par exemple, et les envoyer aux clients de cette façon. Maintenant, les planches d'humeur peuvent être aussi élaborées que vous le souhaitez ou aussi simples que vous le souhaitez. Vous pouvez inclure, par exemple, quelque chose comme deux ou trois images différentes ou vous pouvez utiliser, je ne sais pas, des dizaines d'images différentes. Vous pouvez utiliser différentes combinaisons de logos en fonction de ce sur quoi vous travaillez. Parce que nous travaillions sur un projet de site Web, par exemple, nous pouvons inclure différentes navigations. Nous pouvons inclure différents pour nous et des trucs comme ça pour entrer dans le mode. Donc je vais vous montrer quelques modèles que nous vendons sur le web Donald, qui est ma société. Vous pouvez obtenir ces modèles à un rabais et je laisserai la réduction dans un PDF. Il suffit de cliquer sur ces liens et la réduction sera déjà appliquée. Et juste pour la facilité d'utilisation pour vous les gars, si vous voulez ou si non, vous pouvez simplement les créer facilement dans Adobe XD. Laissez-moi vous montrer rapidement ce que je veux dire. Voici donc mes sites web, web, Donald Duck net. Et vous pouvez voir que nous avons la section Produits. Et à l'intérieur de cette section de produits, nous avons tous ces différents produits. Et si vous choisissez des planches d'humeur, c'est à ça qu'ils ressemblent. Donc nous avons ce tableau d'humeur. Et vous pouvez le voir en format de fichier Photoshop et XD. Il est livré dans une dimension de quatre lettres. Et fondamentalement, c'est avant et c'est l'après. Vous pouvez voir à quel point ils sont faciles à utiliser. Vous pouvez échantillonner des couleurs. Vous pouvez inclure différentes images, et ce sont les différentes tailles et vous pouvez voir combien d'entre elles nous avons. Il vous suffit de parcourir notre section produits. Et je laisserai aussi le lien dans le PDF vers ceux que je vous montre, afin que vous puissiez facilement y naviguer. Ce sont les Instagram et il est évident qu'ils sont carrés. Et il y a ces rectangulaires pour les histoires. Si vous voulez les utiliser, vous pouvez voir à quoi ils ressemblent et comment ils peuvent ressembler. Sur Instagram, nous avons des réseaux sociaux qui sont fondamentalement la même chose. Et évidemment, parce que XD prend en charge nativement les fichiers Photoshop et ouvre les fichiers Photoshop, vous pouvez facilement ouvrir l'un de ces fichiers car une fois de plus, XD prend en charge les fichiers Photoshop et vous pouvez voir à quoi ils ressemblent. Et évidemment, nous avons des carrés, nous avons des rectangulaires pour Twitter et Facebook. Et nous avons aussi DES veut pour Pinterest, et vous pouvez évidemment les utiliser pour Instagram Stories. Et enfin, nous avons ceux qui sont pour l'impression. Et dans ceux-ci, je pense que la version esquisse esquisse est également incluse. Mais comme je l'ai dit, vous pouvez facilement ouvrir votre fichier Photoshop, que je vais vous montrer dans une seconde. Et c'est à ça qu'ils ressemblent. Et vous pouvez voir l'illustration ici de si vous les imprimez, vous pouvez les utiliser comme ceci et vous pouvez commenter vers le bas avec vos clients. Donc, quand vous les ouvrez dans Adobe XD, démontés, ils ressemblent réellement à. Donc, fondamentalement. Je suis arrivé ici à la page d'accueil et j'ai créé une planche d'art de sable AT en 1080, vous pouvez voir ici. Et j'ai simplement continué et ouvert un de ces moodboards. Et vous pouvez le faire ici à partir de la page d'accueil. Et vous pouvez simplement ouvrir à partir de votre ordinateur ou vous pouvez parcourir le fichier XD et vous pouvez ouvrir le fichier comme ça. C' est le fichier que j'ai ouvert et c'est l'un de nos produits. Et vous pouvez voir ici, nous avons des icônes d'image. Je vais simplement les saluer et faire de même pour le logo. Je vais cliquer sur mon logo et je vais utiliser logo de mon client réellement formé pour ce projet. Ici, c'est. Et parce que je ne pense pas que ça va aller et je ne le prends pas bien, ce qui n'est pas le cas. Je vais simplement appuyer sur Control E et l'exporter sur mon bureau. Laissez-moi le choisir rapidement à partir d'ici, sélectionnez le dossier, et je vais l'exporter en PNG. Ensuite, je vais retirer mon logo d'ici, et je vais regarder dans la droite ici, simplement glisser et déposer à l'intérieur comme un PNG afin que je puisse facilement le réduire si nécessaire. Je peux simplement me positionner ici au centre. Vous pouvez également sélectionner ces deux cliquez ici , puis juste ici pour vous assurer qu'il est au centre. Et parce que c'est l'objet, vous pouvez facilement changer sa couleur et ensuite vous pouvez faire ce que vous voulez. Mais ne nous concentrons pas là-dessus maintenant. Concentrez-vous plutôt sur ces images. Donc, je suis allé de l'avant et téléchargé quelques images à partir d'agrandir ou d'éléments. Et il suffit de double-cliquer ici et de le positionner ici, par exemple. Donc, je peux toujours y aller et le retourner par exemple, comme ça. Mais je ne pense pas que ça marche vraiment bien. Mais laissons-le juste là. Ou peut-être que nous pouvons glisser et déposer cette image à l'intérieur. Je pense que ça marche beaucoup mieux. Et nous pouvons toujours le retourner parce que notre logo est de ce côté. Et nous pouvons utiliser cette première image sur celle-ci, par exemple. Et je pense que ça marche beaucoup mieux parce que vous pouvez voir la personne dans le cadre ici. Je peux toujours faire glisser et déposer une autre image à l'intérieur. Et comme je l'ai dit, ces images sont utilisées juste pour notre inspiration. Et ils sont utilisés et juste triés. Nous pouvons voir les couleurs et en termes de couleurs, par exemple, allons double-cliquer ici sur notre login une fois de plus, et je peux échantillonner la couleur du ciel, par exemple. Et peut-être que je devrais utiliser un plus sombre de ce bleu. Et vous pouvez voir à quoi cela ressemble et les couleurs elles-mêmes. Vous pouvez simplement cliquer sur cette nuance et vous pouvez échantillonner quelques couleurs juste pour avoir une idée générale de ces couleurs. Et allons-y du bleu plus foncé. Allons goûter un peu de bleu plus léger comme ça. Utilisons notre AN ou quelque chose entre les deux, peut-être quelque chose comme ça, la couleur de la terre. Peut-être qu'on pourrait utiliser quelque chose comme ça et ensuite les changer. Et vous pouvez voir à quel point c'est extrêmement simple de naviguer. Et peut-être que nous pouvons utiliser une couleur plus foncée. Utilisons, je ne sais pas, peut-être celle-là. Et c'est essentiellement notre moodboard fait. Et évidemment, vous pouvez jouer avec eux autant que vous voulez. Mais laissons-le comme ça. Et vous pouvez également les changer. Vous pouvez double-cliquer sur cette image ou vous pouvez simplement cliquer et ensuite étendre à ici pour modifier la mise en page de l'ordre. Si vous le souhaitez, vous pouvez le faire pour toutes ces images que vous pouvez voir simplement cliquer et étendre les entités fondamentalement comment ces planches d'humeur fonctionnent. Maintenant, parce que j'ai mon schéma de couleurs pour ce projet et je vais vous montrer que dans une seconde, une fois que nous commençons avec le design, je ne vais pas utiliser l'une de ces couleurs en particulier, mais vous pouvez juste imaginer que vous pouvez utiliser images des concurrents pour échantillonner quelques couleurs. Vous pouvez utiliser les œuvres précédentes de votre client pour échantillonner certaines couleurs, puis vous pouvez utiliser ces couleurs dans votre conception. Évidemment, vous avez vu que ce logo est blanc et ils utilisent la version blanche et sombre de ce logo. Mais fondamentalement, il n'a pas de couleur à l'intérieur. Mais si le logo de votre client a de la couleur, évidemment, vous allez finir par utiliser cette couleur. Il suffit de l'échantillonner de cette façon. Et encore une fois, si vous le souhaitez, vous pouvez obtenir ces produits sur notre site Web. Et je vais laisser les liens et actualisant le PDF de tous ceux que je vous ai montrés. Mais si vous ne voulez pas simplement sauter à l'intérieur d'Adobe XD, créez l'un d'entre eux. Vous n'avez pas besoin d'utiliser 1080. En 1080, comme je l'ai fait. Vous pouvez utiliser 1920 par 1080, vous pouvez utiliser encore plus petit. Vous pouvez inclure une plus grande quantité d'images, plus d'images, moins d'images, faire ce que vous voulez avec cela. C' est juste pour ton inspiration. Et évidemment, vous pouvez partager ceci avec votre client qui peut sauter à l'intérieur d'ici et exporter celui-ci, par exemple, puis partager cela avec votre client et qu'il peut voir et approuver ou désapprouver vos choix de couleurs. Donc, fondamentalement, ce sont les moodboards et comment ils fonctionnent. Vous pouvez jouer avec eux. Vous pouvez inclure toutes sortes d'images différentes à l'intérieur. Vous pouvez inclure différents logos. Vous pouvez inclure, par exemple, des cartes de visite en fonction de ce que vous faites, vous pouvez inclure toutes sortes d'images différentes. Vous pouvez même inclure des dégradés. Tu peux faire ce que tu veux avec ça. Comme je l'ai dit, c'est pour vous mettre dans l'ambiance. Ceux-ci vous permettent de comprendre avec quoi vous travaillez et pour qui vous travaillez, et donc de poursuivre votre projet beaucoup plus facilement. Dans la prochaine vidéo, je vais vous montrer comment configurer ce fichier parce que nous avons déjà commencé avec ce tableau d'ambiance. Je vais glisser et déposer notre dossier de design à l'intérieur. Et je vais vous montrer comment nous allons construire ce fichier plus tard et ce que nous allons faire ensuite. Alors je te verrai là-bas. 5. Configuration du projet: Bon, allons maintenant mettre en place notre dossier. Et cette vidéo va être assez simple et courte ou juste envie de courir rapidement à travers la façon dont j'ai généralement configuré mes fichiers. Vous pouvez utiliser la même configuration, mais vous n'avez pas à le faire. Vous pouvez utiliser votre propre configuration si vous le souhaitez. Je veux juste vous montrer ce que j'utilise. Donc, nous avons notre mémoire de conception et comme je l'ai dit, vous allez les obtenir simplement. Ils seront situés à l'intérieur du fichier zip, décompressez ce fichier et utilisez-les pour vos propres projets personnels ou commerciaux. Fondamentalement, je vais les sélectionner, appuyer sur Contrôle ou Commande C. Et je vais fermer ce fichier, et voici notre moodboard. Je vais simplement contrôler V ici. Et ce que je vais faire, c'est les déplacer ici de ce côté-ci. Et par exemple, positionnez-les pour être quelque part autour de 100. Je pense que c'est bon, et déplacez cette fin à 100. Donc, fondamentalement, ce que nous avons ici sont de brefs essentiels, sont bref et planche d'humeur. Et fondamentalement, nous allons construire ce fichier à partir d'ici. Adobe XD par défaut le positionne au centre, mais j'aime généralement le déplacer un peu juste pour me donner un peu plus d'espace vertical ou quelque part par ici. Maintenant, ce que vous pouvez faire est que vous pouvez, par exemple, li vos fils de papier juste ici et vous pouvez passer ici pour vos fils Adobe XD, puis concevoir ici, den Export, prototypage, tout ce que vous faites ensuite, peut-être même la conception de l'application, alors vous pouvez passer de bas en bas. Mais ce que j'aime vraiment faire est simplement déplacer ces fichiers dans ce coin supérieur gauche du fichier. Donc donc, euh, avoir beaucoup plus grand écran réaliste immobilier juste ici. Et ce que j'aime aussi faire est d'enregistrer le fichier localement ainsi que le document Cloud. Donc, ce que cela me permet si pour une raison quelconque Adobe XD se bloque et le document Cloud est enregistré, mais mon document local n'est pas avec les dernières modifications. Par conséquent, je peux simplement extraire le document cloud plus tard, l' enregistrer sur mon bureau. Par exemple, si j'ai besoin de modifier ce fichier plus tard sans connexion Internet pendant que je suis en déplacement dans mon café local où que ce soit. Donc, j'aime vraiment avoir ces deux options. Donc, à la fois le document Cloud et mon document local, et c'est essentiellement pour cette vidéo, je vais frapper Control S. Et dans la partie suivante, nous allons nous concentrer sur les filaires papier. Je vais vous montrer pourquoi ils sont importants. Nous allons dessiner des fils filaires sur un morceau de papier. Et plus tard, nous allons revenir à ce dossier. Nous allons apporter ces filaires papier dans Adobe XD juste pour notre référence. Ensuite, nous allons passer plus tard à de vrais filaires dans Adobe XD, que nous allons ensuite transformer en designs, que nous allons enfin animer. Alors je te verrai là-bas. 6. Filtres papier 1: Bon, maintenant on va commencer à créer des cadres de papier. Et nous allons commencer par la structure elle-même. Mais avant nous, je voulais juste passer rapidement à travers ce dont vous avez besoin pour ce processus. Fondamentalement, vous avez besoin de tout type de papier. Vous avez la ligne du Rhin autour de votre maison ou de votre bureau, et vous avez besoin de n'importe quel type de stylo ou de crayon. Vous pouvez même utiliser des marqueurs colorés. Vous pouvez utiliser des règles, mais j'aime faire les choses main libre juste parce que cela rend beaucoup plus rapide pour moi de mettre les idées sur un morceau de papier. Parce que ce processus n'est qu'un processus de démarrage. Plus tard, nous allons apporter cela dans Adobe XD et développer les éléments eux-mêmes sous la conception, la position, la mise à l'échelle et bien plus encore. Donc, ce n'est que la première partie de ce processus, c'est d'obtenir vos idées sur un morceau de papier juste pour que vous puissiez les rincer sur un morceau de papier et ensuite vous pouvez commencer plus tard. Intérieur, il y aura extrême ou votre autre outil préféré de choix et commencer à créer des poids morts. Donc, la première chose que nous allons créer dans ce processus est la structure de notre page comme ça. Donc, je vais réellement commencer par la navigation elle-même. Donc je vais faire rapidement quelque chose comme ça. Donc, vous pouvez juste imaginer que c'est le contour du site lui-même. Nous allons donc commencer avec le logo ici. Ensuite, nous allons écrire dans les destinations. Et les utilisateurs peuvent effectivement cliquer sur ces destinations à indiquer pour les emmener à l'une de ces destinations et dettes qu'ils ont sur l'offre. Ensuite, nous allons écrire en hiver pour les visites hivernales. Ensuite, nous allons avoir le bien-être pour les portes de bien-être, individuel. Et c'est la page où les utilisateurs peuvent réserver des voyages individuels. Ils peuvent choisir ce qu'ils veulent. Ils peuvent donc choisir des billets d'avion à l'hébergement, à la nourriture, à toutes ces choses qu'ils vont voir là-bas. Donc, des activités et des excursions et bien plus encore à l'intérieur de cette plage individuelle. On va faire des croisières. Et vous pouvez voir que je manque d'espace. Et enfin, nous allons avoir à propos de nous. Donc, cette page va réellement courir ici, alors ne laissez pas cette ligne vous distraire. Et enfin, nous allons écrire dans les billets d'avion ici. Comme ça. Ensuite, nous allons avoir une newsletter. Et nous allons aussi avoir des numéros de téléphone, donc 123. Et nous pouvons aussi avoir ces icônes ici. Donc, par exemple, je peux avoir une icône d'avion ici. Je peux avoir une icône de newsletter par e-mail ici. Et aussi je peux avoir une icône de téléphone ici juste pour que quand on a réduit ça plus tard, on puisse vraiment avoir ça sur ce sujet. Voyons voir. Nous avons l'icône et le texte sur un grand écran, et nous avons juste l'icône elle-même sur les plus petits écrans, en particulier pour ce numéro de téléphone. Ainsi, les utilisateurs peuvent réellement taper là et il pourrait les amener à cet écran particulier. C' est tout pour cette première vidéo. Dans la vidéo suivante, nous allons juste commencer par la page d'accueil elle-même. Donc, nous allons aller de l'avant, juste utiliser quelque chose comme ça. Alors peut-être que nous pouvons créer quelque chose comme ça pour la navigation. Et tu peux toujours y retourner. Et je vous encourage vraiment à, pour tous les projets que vous faites, de ventiler cela juste pour que vous sachiez à quoi ressemble votre navigation afin que vous puissiez toujours y revenir et voir pour quelles pages vous concevez. 7. Files de papier 2: Bon, maintenant que la navigation elle-même est terminée, passons maintenant à cette partie, qui sera en fait notre page d'accueil. Et parce que la page d'accueil va être extrêmement longue, je vais créer, par exemple, deux boîtes comme celle-ci. Donc encore une fois, si vous voulez, vous pouvez utiliser la règle, mais je n'aime pas vraiment utiliser les règles parce que je pense qu'elles ralentissent. Donc, je peux juste créer un contour comme celui-ci. Donc, ce que nous pouvons commencer, c'est ce que nous avons créé précédemment. Donc ça va être notre logo. Ce sera notre navigation. Et nous en avons aussi ici en haut. Donc la première chose que nous allons créer est la section héros comme celle-ci. Et peut-être que nous pouvons créer des flèches pour aller à gauche et à droite. Ce que nous avons discuté dans les exemples que je vous ai montrés. Et peut-être que nous pouvons créer du texte ici. Et disons que c'est peut-être le lieu de Pékin. Et peut-être que nous pouvons mettre sur le bouton qui dit explorer maintenant. Comme ça. Et ils peuvent appuyer sur ce bouton pour aller à la page Pékin à l'intérieur de la destination. Vous pouvez donc déjà commencer à voir comment tout cela va s'attacher les uns aux autres. Ce que nous pouvons créer ici, et ceci peut être la partie de l'image du héros, ou il peut descendre sous l'image du héros elle-même en fonction la taille pour laquelle vous créez est que nous pouvons créer ces sélecteurs. Voyons voir, peut-être qu'on peut diviser ça en cinq parties. Donc 1234, et ça va être cinquième. Et cette première partie peut être, par exemple, des destinations. Et créons une icône comme ça. Donc, et la destination suivante est le type de voyage. Donc peut-être que nous pouvons créer une jambe d'icône fait Donc voyage. Ensuite, nous pouvons avoir des activités. Donc peut-être icône d'une personne marchant à VTS. Et enfin, on peut avoir des recherches. Et une fois qu'ils tapent sur la recherche, cette barre de recherche, Kim par exemple, s'étend jusqu'ici afin qu'elle puisse couvrir tous ces champs supplémentaires. Et enfin, nous pouvons avoir un bouton pour Appliquer. Et il peut appliquer tous ces filtres ici. Alors laissez-moi rapidement zoomer un peu que vous puissiez mieux voir ce que je fais ici. Donc vous pouvez voir que nous avons toutes ces choses ici. Ensuite, ce que nous pouvons faire est, par exemple, nous pouvons créer une sorte de sections différentes. Alors peut-être pourrions-nous créer une section appelée offres spéciales ici. Donc des offres spéciales, comme tous ces autres sites ont. Et ici, nous pouvons avoir, par exemple, les premières minutes. Et ici, nous pouvons avoir une dernière minute comme ça. Et pour les deux, nous pouvons avoir ces cartes différentes. Donc, nous allons créer une carte et une carte ici aussi. Bien sûr, nous pouvons avoir l'icône ici, par exemple, à l'heure, et nous pouvons avoir une scène ici. Et ce que nous pouvons créer dans ces offres, c'est que nous pouvons, par exemple, inclure une image ici. Alors faisons-le sortir comme ça. Et vous pouvez utiliser différents marqueurs si vous le souhaitez, juste pour indiquer qu'il s'agit de votre image. Ensuite, ce que nous pouvons créer ici est. Des étoiles. Et nous pouvons créer, par exemple, de un à cinq ou quoi que ce soit d'autre. Et avec ces étoiles, ce que vous pouvez faire, c'est vous pouvez présenter l'emplacement lui-même ou vous pouvez présenter les hôtels eux-mêmes. Donc, en fonction de ce que vous montrez ici. Donc, si vous êtes plus en dessous de nos étoiles, ce que nous pouvons créer est une sorte de description. Utilisons donc, par exemple, Paris ici et par ici. Et nous pouvons créer une description supplémentaire ici. Ce que nous pouvons également inclure est, par exemple, sept jours ou 14 jours. Et peut-être que nous pouvons inclure quelques icônes différentes ici. Donc, je vois, et juste pour indiquer que, par exemple, vous pouvez voyager à leur destination en utilisant l'avion, en utilisant le train ou le bus ou quelque chose du genre. Et enfin, nous pouvons créer un prix ici. Voyons donc 1250 et disons 930. Et enfin, nous pouvons créer une icône ici sur la droite. Et peut-être avec ceux-ci, nous pouvons créer différents séparateurs comme celui-ci. Donc, nous pouvons inclure différentes lignes de séparation ou quelque chose comme ça. Juste pour rompre, ces sections sont un peu plus. Et ici, comme je l'ai dit, nous pouvons inclure juste une icône de flèche, que nous pouvons déclencher en survolant. Une fois qu'ils survolent, ils peuvent taper là et ils peuvent se rendre à cette destination particulière. Et nous pouvons, par exemple, faire ces sections fois quatre, donc quatre au total, par exemple, juste pour nous économiser un peu d'espace pour dessiner. Et nous pouvons, par exemple, utiliser deux boutons. Donc C Tous et voir tout. Par exemple, consultez votre nom de famille et voyez tout pour nous. Offres de première minute, pas prénom. Donc première minute et dernière minute, voir toutes les premières minutes, à la dernière minute. Donc on peut faire quelque chose comme ça. Ce que nous pouvons faire ci-dessous, c'est que nous pouvons inclure une autre section. Donc tu peux voir ce que je fais ici. Je suis simplement en train de diviser cette page en différentes sections juste pour garder les intérêts du visiteur le plus élevé possible. Donc, ce que nous pouvons faire ici, c'est inclure notre bouton de lecture pour indiquer que c'est la vidéo. Pour que nous puissions le positionner comme ça. Et nous pouvons, par exemple, utiliser la fonction de lecture automatique comme je vous l'ai montré dans l'un des exemples, ou nous pouvons soit leur montrer l'icône d'affichage elle-même et leur permettre de lire cette vidéo elle-même. Alors passons à autre chose. Et par exemple, pour la section suivante, nous pouvons utiliser différentes destinations. Utilisons donc des destinations européennes comme ça. Et nous pouvons, par exemple, inclure une description distincte ici. Et nous pouvons utiliser les temps 4, quatre continents. Nous pouvons donc utiliser des destinations européennes, asiatiques , africaines et américaines. Et à l'intérieur des destinations américaines, nous pouvons, par exemple, inclure l'Amérique du Nord et l'Amérique du Sud. Et alors peut-être que nous pouvons même les diviser un peu mieux, juste pour que nous donnions le choix à nos utilisateurs. Ils peuvent donc choisir tout de suite, où veulent-ils voyager et travailler vers quelle destination ? Et à l'intérieur de ceux-ci, nous pouvons, par exemple, inclure quatre cartes différentes comme celle-ci. Donc, ces cartes sont peut-être les mêmes que celles-ci, juste une rotation verticale. C' est donc là que nous pouvons utiliser Adobe XD, ces fonctions avancées comme les piles par exemple, et le redimensionnement réactif aussi. Donc, ce que nous allons faire ici, c'est inclure des images comme celle-ci. Nous allons inclure la note ici. Donc, je vais juste utiliser une étoile parce que fondamentalement nous allons utiliser exactement la même mise en page est celle-ci. Ensuite, nous allons utiliser Paris, Rome, Londres et Berlin, par exemple. Nous allons utiliser la description de cet emplacement. Donc, comme je l'ai dit, exactement la même disposition que celle-ci. Ça va être sept jours avec les icônes. icônes de sept jours ici. Je l'ai fait. Et nous allons inclure le prix. Donc, nous allons utiliser 100 River juste pour nous faire gagner un peu plus de temps. Je l'ai fait, et nous allons utiliser l'icône de flèche sur le vol stationnaire. Donc, cette icône ne sera pas visible à moins que le survol. Donc, ça va juste montrer quand la date est en train de planer. En dessous de ça. Ce que nous allons créer nos flèches, ils peuvent aller à gauche et à droite s'ils le veulent. Et enfin, nous pouvons inclure un bouton comme celui-ci pour voir ou ainsi ils peuvent voir toutes les destinations, soit européennes ou asiatiques, africaines, ou américaines. Ainsi, comme je l'ai dit, nous pouvons, par exemple, inclure européens ci-dessous que nous pouvons inclure les destinations africaines. Et puis nous pouvons décomposer ces sections en incluant quelque chose comme une image. Nous allons donc inclure, par exemple, image positionnée à droite comme celle-ci. Peut-être que nous pouvons même pimenter en ajoutant une couleur de fond comme celle-ci. Et on peut même signaler et dire la couleur comme papa, juste pour qu'on sache ce que c'est. Ou si vous partagez ceci avec vos clients ou vos coéquipiers. Alors Daikin sait ce que c'est. Donc on peut le mettre ici. Et par exemple, nous pouvons écrire quelque chose dans un livre similaire, votre voyage de rêve avec nous. Taxé ici. Et enfin le bouton, qui dit obtenir un devis gratuit. Donc des citations gratuites comme ça. Et ils peuvent obtenir un devis gratuit pour n'importe quel type de voyages individuels, si vous vous souvenez ici en haut de la vidéo précédente. Ainsi, ils peuvent obtenir un devis gratuit pour ce voyage particulier de ce qu'ils choisissent. Ensuite, nous pouvons inclure, par exemple, troupes asiatiques et américaines ci-dessous. Ensuite, ce que nous pouvons inclure est une section complètement différente qui indique, par exemple, nos destinations les plus prisées. Nous pouvons inclure des flèches gauche et droite ici. Nous pouvons inclure notre brève description ici. Et enfin, nous pouvons inclure, par exemple, trois cartes, cette fois. Donc on peut aller avec la mise en page comme ça et tu peux voir ce que je fais. Je suis simplement en train de rompre la mise en page. Donc, nous n'utilisons pas comme ces sites que je vous ai montrés. Nous n'utilisons pas exactement la même mise en page pour toutes les sections de notre page, nous utilisons des mises en page différentes. Donc, ici, nous utilisons des cartes positionnées comme ça. Ici, nous utilisons des cartes positionnées comme ça. Alors on rompt ces sections. Et ici, nous utilisons trois cartes différentes, exactement la même mise en page, mais juste positionné différemment. Donc ce que je vais faire ici, c'est étendre ça un peu. Donc, par exemple, mes feuilles, cela peut être, disons la Toscane. Et ça peut être Aaron ou Paris à nouveau, juste pour qu'on puisse avoir quelque chose. Nous pouvons inclure du texte et dire quelque chose comme de et prix ici. Donc 998, donc prix 1, 0, 0, 0, 0, et prix 700. Juste pour que nous puissions dire en indiquant qu'ils peuvent changer ce qu'il dit ici sur cette page. Donc, ce que nous pouvons faire ensuite, c'est que je vais simplement passer à cette partie vide de la page parce que comme je l'ai dit, c'est vraiment une page plus longue. Donc ce que je vais faire ici, c'est faire exactement la même chose. Donc étendu tout le chemin jusqu'ici. Je suis simplement étendu jusqu'ici. Et disons que les voyageurs nous aiment. Texte ici et ici, nous pouvons inclure des témoignages. Donc peut-être que nous pouvons inclure une image juste ici. Voyons voir, nom. Quelques témoignages et a voyagé à Paris. Ce qui est important parce que maintenant vous augmentez les chances de vendre cette destination. Donc, par exemple, si une destination est vraiment chaude et que les gens veulent vraiment y aller, alors peut-être le partager juste ici à l'intérieur du témoignage avec de vraies personnes qui ont réellement voyagé là-bas va déjà montrer et donner un peu plus d'intérêt pour cette destination. Alors allons-y avec 0, l'un des quatre. Et nous pouvons utiliser des flèches ici, donc à gauche et à droite. Et avec ces flèches, nous pouvons les créer en tant que composants dans XD, puis nous pouvons les utiliser tout au long de notre conception. Donc, ce que nous pouvons faire ensuite, c'est peut-être rompre la mise en page une fois de plus. Voyons donc que je peux inclure trois cartes comme ça. Et cela peut être comme ça, si menstruation style Mansouri. Donc, par exemple, le bien-être. Et disons à partir et le prix 998. Et cela peut être une image en arrière-plan. Donc, j'ai raison, la largeur de l'image, par exemple, la superposition de couleur, ou huit ou quelque chose comme ça. On peut dire des croisières ici et du ski ici. Pour les voyageurs d'hiver. Et par exemple, à partir de 908 et de 998. Donc exactement la même chose. Ce sont des images avec la superposition de couleur. Donc, vous pouvez voir ici, je suis simplement en train de rompre la mise en page et de faire regarder cette page. Un peu plus intéressant pour les téléspectateurs. Par exemple, nous pouvons écrire partenaires comme ces sites Web ont une description et par exemple, un logo ici. Donc ce sont des logos que j'endette. Et peut-être que nous pouvons utiliser exactement la même mise en page que nous avons faite ici, mais simplement le changer. Donc l'image, la couleur. Et puis ici, par exemple, écrire, il y a un voyage parfait pour tout le monde. Un peu de texte et d'appel à l'action, qui dit obtenir un devis gratuit. Ainsi, nous pouvons utiliser Adobe XD et les piles, et nous pouvons, par exemple, créer cette mise en page et simplement le copier et le coller ici, cette section et simplement changer l'ordre de ces éléments à l'intérieur. Donc, ce que nous pouvons faire ensuite est de donner aux utilisateurs et taux de change , par exemple, parce que c'est vraiment utile, surtout si vous voyagez dans d' autres parties du monde et que vous n'utilisez pas votre monnaie. Alors taux de change, disons comme ça. Donc trois ou quatre que nous allons voir plus tard à l'intérieur ou des programmes de design étrangers, nous pouvons nous inclure l'Euro, et par exemple, British bound. Alors nous allons voir ce que c'est ici. Donc USD et combien est le mot dans votre propre monnaie ? Alors passons à la section suivante, qui peut être, par exemple, Q et a. Donc, je peux créer une autre section ici. Alors préparez-vous pour votre voyage de rêve. Et un peu de texte juste ici et en bas avec contactez-nous. Je l'ai fait. Et ici, ce que vous allez faire est de créer une question que nous allons utiliser une icône plus et nous allons créer une réponse comme celle-ci. Et avec ça, on peut les décomposer. Donc q plus diviseur, q plus et le plus large. Donc, ici, ce qu'ils peuvent faire est en fait appuyer sur cette icône plus. Ça va ouvrir cette section. Ensuite, il va passer de plus à moins ou deux actes. Peut-être que nous pouvons le faire tourner, puis une fois qu'ils tapent là, il va se fermer et ils peuvent ouvrir une de ces questions supplémentaires et ils peuvent en apprendre plus sur le sujet. Ou bien, ils peuvent simplement cliquer sur le bouton Contactez-nous juste ici et entrer en contact. Et peut-être qu'on peut écrire, rester dans le courant. Un peu de texte juste ici. Et nous pouvons créer un formulaire d'inscription par e-mail juste ici. Donc e-mail et un bouton qui dit s'abonner. Et nous ne voulons pas qu'il soit trop important, mais nous voulons toujours que les utilisateurs viennent ici et s'abonnent. Enfin, ce qui reste, c'est le pied de page lui-même. Alors peut-être que nous pouvons inclure un logo ici. Nous pouvons inclure des éléments de navigation. Donc je vais me voir un peu de temps pour les écrire en fait. Ainsi, les destinations, le bien-être hivernal, les croisières individuelles sur nous ici, étaler sur toute la page. Peut-être pourrions-nous inclure un diviseur. Si beau et simple diviseur comme ça. Et nous pouvons, par exemple, inclure des icônes de médias sociaux. Donc Facebook, Instagram et YouTube par exemple, ou LinkedIn ou tout ce que l'agence a réellement. Nous pouvons inclure le droit d'auteur original ici et ici nous pouvons écrire en termes, par exemple. Donc troupeau laitier, voici notre regard sur notre page d'accueil. Comme vous pouvez le voir, cela va être très long, mais il va afficher tous les éléments cruciaux à l'intérieur de celui-ci. Nous avons donc ces sections que nous allons copier, nous allons réorganiser. Vous allez vous repositionner un peu. Peut-être que nous pouvons créer un composant par défaut, puis le déplacer et le repositionner de différentes manières pour créer composants enfants supplémentaires à partir de ce composant principal. Il peut donc nous être vraiment utile tout au long de notre conception. Nous pouvons simplement copier et coller et peut-être nous pouvons créer un élément supplémentaire à elle. Donc, nous l'avons là. Dans la prochaine vidéo, nous allons voir ce qui se passe lorsque les utilisateurs cliquent sur l'une de ces destinations. Donc, je vais vous montrer comment vous pouvez créer cela en suivant exactement la même stratégie. 8. Filaires en papier 3: Maintenant, allons de l'avant et créons une plage de destination. Et vous pouvez même écrire ici, donc cette nation, juste ça. Et nous allons créer un aperçu rapide comme nous l'avons fait avec la page d'accueil. Ce NON est comme laisser cette partie vide parce que j'ai toujours quelque chose à me rappeler. Donc, soit a dû partager quelque chose avec d'autres designers de l'équipe ou avec mes clients ou avec les développeurs. Donc, il est toujours pratique d'avoir quelque chose ici ou même vous-même si vous créez ces filaires et puis revenez à eux dans quelques mois ou quelque chose comme ça. Donc, ce que nous allons faire en premier est exactement la même chose que nous l'avons fait avec des exemples précédents. Donc ça va être notre navigation. Peut-être pourrions-nous inclure une section héros et disons que les utilisateurs ont marché sur une offre parisienne sur la page précédente, qui était la page d'accueil. Donc nous pouvons écrire dans quelque chose comme CT of love, Paris avec cette belle grande police et peut-être un bouton qui dit explorer maintenant. Et peut-être lorsque vous appuyez sur ce bouton Explorer maintenant, il peut alors les amener à la partie suivante de la page, qui dans ce cas serait une partie informative pour cet emplacement particulier. Pour qu'on puisse écrire quelque chose comme visiter Paris. Nous pouvons inclure une description ici. Donc à propos et puis textez à ce sujet, les activités. Et puis nous pouvons, par exemple, inclure différentes icônes ici. Donc, des icônes. Et ces icônes peuvent être quelque chose comme musées touristiques ou parce que c'est un Paris peut-être River Croisières, vélo, manger des endroits de Dieu pour voir quelque chose comme ça. Donc ci-dessous, nous allons avoir les meilleures offres parisiennes, qui se distinguent de toutes ces autres offres, que ce soit en termes de prix ou en termes de popularité ou autre. Et ici, nous pouvons inclure tous ces différents filtres que les utilisateurs peuvent choisir. Nous pouvons donc en avoir cinq, par exemple, et peut-être un bouton ici à la fin. Alors allons-y avec six. Donc 1, 2, 3, 4, 5, puis 6. Cela peut être appliqué. Et voyons, peut-être qu'on peut les changer par prix, durée. Donc, nous allons utiliser une icône de calendrier ici. Activités. Donc, encore une fois, dans cette personne marchant ou quelque chose comme ça, des excursions. Alors allons avec une icône de signe. Donc à gauche et à droite par exemple, parfois je l'ai fait. Et enfin une note. Et puis je peux même écrire quelque chose comme ça. Donc noter des excursions, des activités. Et c'est la durée. Et c'est le prix. Alors ce que nous allons alors avoir nos hôtels qui correspondent bien avec ces filtres que vous avez choisis ici. Donc, nous pouvons avoir exactement la même mise en page, mais un peu plus élaboré, car ici nous avons des informations supplémentaires, y compris à l'intérieur. Donc, ce que je peux faire est de créer une carte comme celle-ci, qui couvre toute la largeur de notre site Web parce que nous avons beaucoup d'espace ici. Donc, ce que nous pouvons inclure une image juste ici. Ensuite, nous pouvons inclure une note ici en haut. Et on peut dire le nom de l'hôtel. Nous pouvons inclure l'adresse ici. Comme ça. Peut-être que nous pouvons même inclure un site web quelque part ici. Donc, nous allons voir qu'une fois que nous commencerons à concevoir, cela peut être la description et ensuite 14 jours. Et ceux-ci peuvent être les icônes. Donc, je vois n et ces icônes peuvent être les mêmes que sur la page d'accueil. Alors, par exemple, comment pouvez-vous vous rendre à cet hôtel ? Vous pouvez soit voler, varchar, aller en train ou en voiture ou quelque chose comme ça. Et puis nous allons inclure un prix. Ainsi, 1290, par exemple, nous allons avoir le même effet d'horreur avec la même flèche. C' est pourquoi je dis que vous pouvez créer une carte et ensuite en élaborer plus à partir de là. Ensuite, nous pouvons écrire quelque chose comme le type 4 ou quelque chose comme ça. Et nous pouvons avoir, par exemple, le bouton Charger plus en dessous ou quelque chose comme ça. Ensuite, nous pouvons réellement utiliser des sections de la page d'accueil. Donc, je vais vraiment utiliser ça. Il y a donc un voyage parfait pour tout le monde. Plus libre d'impôt. Citation. Ensuite, nous allons avoir la salutation d'échange. Mon père. Et vous vous souvenez, j'ai simplement inclus trois boîtes différentes indiquant l'euro USD et, par exemple, la livre sterling. Et ils peuvent aller à gauche et à droite et faire défiler et voir toutes ces devises. Et puis nous pouvons avoir Q et une section ici. Donc Q et a pour accélérer les choses un peu, je ne vais pas le dessiner parce que ce sera exactement le même que sur la page d'accueil. Donc ici, nous pouvons rester dans la boucle et nous pouvons avoir ces deux champs. Donc, abonnez-vous e-mail. Enfin, juste ici en bas, au lieu de tout dessiner, nous allons avoir le pied de page. Donc, nous l'avons là. Nous sommes allés de l'avant et avons préparé cette page. Donc, comme vous pouvez le voir, c'est assez simple, C'est assez facile. Ensuite, nous allons réellement créer une page qui nous mène quand ils cliquent sur l'une de ces offres. Il va les emmener à la page dédiée de l'hôtel. Et sur cette page, ils peuvent explorer d'autres fonctionnalités comme par exemple, ce que l'hôtel a à offrir, ce que les chambres ont à offrir ? Quels sont les équipements inclus à l'intérieur des chambres comme Wi-Fi, climatiseur, mini-réfrigérateur, et bien plus de détails. Donc on va jouer avec ça dans la prochaine vidéo. 9. Filaires en papier 4: Très bien, Donc la page suivante, comme je l'ai dit, va être sélectionné offre. Alors, écrivons-le ici. Offre donc sélectionnée. Et je vais créer un contour. Donc la même chose que je l'ai fait auparavant. Mais nous allons faire quelque chose de similaire à la page d'accueil parce que nous allons avoir beaucoup de ces sections supplémentaires ici sur la page. Tout d'abord, nous allons montrer à nos utilisateurs des images de cet hôtel. Cela peut être soit une chambre d'hôtel, soit à quoi ressemble l'hôtel lui-même. Commençons donc par notre logo et notre navigation. Tellement identique à recréé pour toutes ces pages supplémentaires. Et créons quelque chose comme 1234 ou cinq images différentes. Et que nous pouvons inclure ici. Et nous pouvons inclure, par exemple, flèches gauche et droite afin que les utilisateurs puissent faire défiler ces images à gauche et à droite. Et comme je l'ai dit, cela peut être soit hors d'une chambre d'hôtel, soit l'hôtel lui-même. Commençons par les informations de l'hôtel. Alors commençons par une évaluation. Disons que c'est un hôtel cinq étoiles. Nom de l'hôtel. Par exemple, nous pouvons inclure un site Web ici. Et nous pouvons inclure, par exemple, une description de cet hôtel. Alors, quand a-t-il été construit ? Combien de temps ça te prend pour y arriver et des trucs comme ça. Donc, en descendant, nous allons inclure des caractéristiques de l'hôtel comme ça. Et nous allons diviser cette section en deux sections. Parce qu'ici, de ce côté-ci, nous allons avoir une section collante, qui signifie que cette section, qui va être à peu près aussi grande, ne va pas bouger. Et à l'intérieur de la section de la mort, nous allons utiliser ce que tous ces autres sites Web ont réellement utilisé. Nous allons donc utiliser des informations comme l'enregistrement, le départ, type de chambre, le nombre d'adultes, nombre d'enfants et d'autres choses comme ça. Alors allons de l'avant et créons ça tout de suite pour ne pas nous distraire de tous ces autres services. Alors, check-in, check-out. Nous allons avoir un type de chambre. Et par exemple, nous pouvons ajouter une icône plus afin qu'ils puissent choisir supplémentaire ici. Pour qu'ils puissent aller avec une pièce, des tombes, trois chambres, des trucs comme ça. Alors on va avoir quelque chose comme des adultes. Et ils peuvent choisir 12 ou trois enfants. Les mêmes choses. Alors ne tapez pas de nom. Alors nous allons avoir un service. Donc disons tout compris. Excursions. Et ceux-ci peuvent tous être déposés, par exemple. Alors ne dis pas les enfants, les adultes. Ces listes déroulantes vont donc nous permettre d'avoir plus d'informations. Ainsi, dans les excursions, nous pouvons écrire dans les musées par exemple. Et enfin, nous pouvons avoir le total. Donc 1290 par exemple. Et on va avoir un bon livre de chant à gros bouton maintenant. Et la raison. Et cela va être comme ça, est, par exemple, cela peut être un menu collant comme je l'ai dit. Donc, cette section peut être défilante section. Et une fois qu'ils commencent à faire défiler cette section, ils peuvent voir toutes ces informations différentes incluses à l'intérieur. Mais cette section, qui va être une section collante, va suivre avec eux peu importe où ils défilent sur cette page. Donc, comme je l'ai dit, caractéristiques de l'hôtel, nous pouvons inclure différentes icônes. Ensuite, nous pouvons inclure un type de chambre. Et par exemple, nous pouvons avoir deux ou trois chambres différentes, donc je n'en possède pas. Je veux ajouter trois. Et cela peut être des images de ces pièces en dessous de dat. Nous pouvons avoir quelque chose comme un équipement. Comme je l'ai dit. Ainsi, nous pouvons inclure différentes icônes. Par exemple, pour la climatisation, pour un mini-réfrigérateur, pour un bar, Wi-Fi, des trucs comme ça. Ainsi, nous pouvons avoir ci-dessous les services disponibles, par exemple, les services. Et à l'intérieur de DAT, nous pouvons inclure, par exemple, du pain et du beurre, des chambres d'hôtes. Donc, je peux et B, et B ou, puis description. Et ici, nous pouvons avoir quelque chose comme tout compris et la description. Et vous pouvez voir quand vous commencez à ajouter toutes ces informations va être vraiment long. Donc... Par conséquent, il est vraiment utile d'avoir cette partie collante de votre page. Par exemple, Dan, ci-dessous que nous pouvons inclure quelque chose comme plan de voyage. Et voyons un, puis la description, les deux, puis la description et le déplacement le long. Combien de jours vous avez réellement une bande. Donc, nous pouvons tomber en dessous des excursions disponibles. Et nous pouvons avoir différentes icônes pour différentes excursions qui sont réellement disponibles. Donc, je peux, par exemple, et diviser dans cette page comme ceci. Juste pour que nous sachions que c'est réellement une zone défilante et c'est la zone fixe. Donc on peut avoir quelque chose comme, je ne sais pas, peut-être sur l'hôtel ou quelque chose comme ça. Alors passons à propos de l'emplacement. Et par exemple, nous pouvons inclure une carte de cet emplacement, puis une description juste ci-dessous. Donc, nous pouvons dire quelque chose comme le prix inclut et nous allons réellement mettre cela ici afin que je n'ai pas à écrire une section supplémentaire. Donc le prix comprend, et amenons ça comme ça. Donc, la flèche juste ici. Donc le prix comprend. Et puis nous pouvons mettre du texte supplémentaire sur ce qui est inclus à l'intérieur du prix. Et par exemple, nous pouvons écrire dans quelque chose comme coton propres termes de services ou parfois qui me sont promis. À l'intérieur de cette agence peut voir ce qui est inclus, ce qui ne l'est pas, et par exemple, ce qui n'est pas inclus. Et puis ils peuvent écrire dans la dette là-bas aussi. Fondamentalement, en dehors de celui-ci, ils défilent vers le bas, ce sera exactement la même chose. Passons donc à cette section sur la plage. Et écrivons quelque chose ici. Donc, quand le défilement vers le bas au-delà de cette partie de la page et passer ceci, en fait, ce qui va les accueillir est exactement la même configuration que sur la page précédente. Donc ce que nous allons avoir une image avec une couleur, voyage parfait avec scription. Citation. Ensuite, nous allons avoir des notes d'échange avec ces trois. Et vous pouvez voir ici pourquoi j'utilise stylo et du papier parce que vous pouvez clairement voir à quel point c'est rapide. Et il n'y a aucun moyen que vous puissiez le faire plus rapidement dans n'importe quel type de logiciel plutôt que de simplement écrire sur un morceau de papier. C' est pour ça que j'aime les gens qui encadrent tant. Ici, nous allons avoir Q et a. Donc exactement la même section que sur toute autre plage. Restez dans la boucle. Et comme d'habitude, nous allons avoir un e-mail avec une icône e-mail et un bouton d'abonnement juste ici. Et enfin, nous allons avoir un mandat complet. Donc troupeau laitier, c'est RPG. Donc, une fois qu'ils cliquent sur la destination était le choix de la destination qu'ils veulent réellement, alors ils peuvent aller à cette page qui va leur donner toutes les informations supplémentaires sur l'hôtel avaient-ils besoin de savoir sur ? Et d'ici, à partir de cette section collante qui a livre maintenant, ils peuvent cliquer sur le livre maintenant à, qui va nous conduire à la prochaine perle rituel va concevoir et créer, qui est la page de paiement. Et à l'intérieur de cette page, nous allons en fait se décomposer en trois pages différentes. Il va donc être beaucoup plus simple pour nos utilisateurs et beaucoup plus rapide pour eux de vérifier, payer et d'aller de la façon séparée. 10. Files de papier 5: Donc, comme je l'ai dit, la page suivante et le pH final pour nous est la page de paiement. Alors créons ça très rapidement. Alors, nous allons aller de l'avant et créer ce contour. Mais plutôt que de créer ce schéma dans son ensemble, comme je l'ai dit, permettez-moi d'écrire rapidement le paiement parce que la navigation pour cela va rester la même. Et ça. On dirait qu'on l'a créé. Et ici, ce que nous allons créer, c'est, par exemple, des détails de voyage. Mon père. Et nous voulons créer un fond entièrement blanc parce que nous ne voulons pas que nos utilisateurs soient distraits et qu'ils quittent cette page parce que nous voulons réellement qu'ils achèvent leur commande. C' est pourquoi nous allons faire quelque chose comme ça. Paiement. Et enfin, confirmation. Et c'est soit un sélectionné et ces deux sont grisés, soit c'est plus sombre. Et donc ils peuvent vraiment le voir vraiment bien et ceux-ci peuvent être génial. Donc, à l'intérieur des détails du voyage, ce que nous pouvons créer est une sorte de carte comme nous l'avons fait auparavant. Donc l'image, alors nous pouvons inclure un hôtel de notation. Et puis nous pouvons inclure, par exemple. Donc les mêmes informations que sur cette carte. Cela peut donc être une destination ou une adresse. Et ici, nous avons toutes les informations que les utilisateurs ont choisies. Ainsi, par exemple, les gens aussi. Et par exemple, plus un, qui est pour l'enfant à la maison type, qui est, par exemple, la chambre numéro un et aller avec ce genre de service numéro un ou inclusivement. Et enfin, des excursions ? Oui. Et ils peuvent être d'accord avec l'agence au sujet de ces excursions. Peut-être qu'on peut avoir un séparateur ici et disons 14 jours. mêmes icônes que nous avions, et un total de 1280 par exemple. Et c'est essentiellement notre premier pas. Nous allons avoir la prochaine étape, qui est le paiement. Et c'est ce que nous allons créer maintenant. C' est pourquoi j'ai dit, imaginez ça comme une section. Alors passons le long ici. Donc je vais avoir la même chose. Donc voyage et détails, confirmation de paiement. Et maintenant, le paiement va être sélectionné et ces deux-là vont être en grisé. Donc, il va être assez simple pour les utilisateurs de naviguer parce qu'ils n'ont qu'une seule section et nous allons l'animer plus tard dans XD. Pour changer entre ces trois sections différentes. Donc, pour le paiement lui-même, nous pouvons avoir, par exemple, nom du titulaire de la carte, le nom du titulaire de la carte, et nous pouvons avoir un champ ici. Alors nom. Alors on peut avoir le numéro de carte. Et on peut avoir un numéro ici. Donc 1, 2, 3, 4, 5, 6, 7, et ainsi de suite. Nous allons avoir des dates d'expiration. Alors, quand le panier expire-t-il ? Et de 12 à 24, par exemple. Et enfin CVC, qui est le numéro au dos de votre carte, donc 123 et ou B largeur, PayPal par exemple, ou toute autre option que l'agence va soutenir. Nous allons avoir le bouton P Now juste ici, qui va ensuite les amener à la page de confirmation, évidemment. Alors maintenant, allons de l'avant et écrivons ceci une fois de plus. Donc les détails des troupes, le paiement et enfin la confirmation. Et pour la confirmation, Sélectionnons-le. Et ici, nous pouvons avoir un AACN, qui est un court métrage pour Icône. Votre voyage a été réservé. Dat principal. Et ici, nous pouvons avoir deux lignes de texte par exemple. Et puis on peut avoir deux boutons différents comme ça. Donc, à la maison, par exemple, avec l'icône d'accueil ici, nous pouvons avoir une icône PDF, par exemple, le reçu de téléchargement. Parce que par exemple, peut-être que vous devriez montrer ce reçu dans votre agence ou à l'aéroport ou d'autres choses comme ça. Ou peut-être quand vous arrivez à destination à l'hôtel. Alors peut-être qu'ils ont besoin de vous pour les montrer là-bas. C' est pourquoi le téléchargement reçu est vraiment utile. Et vous pouvez également l'imprimer sous forme de PDF par exemple, ou d'autres choses comme ça. Ainsi, vous pouvez l'apporter avec vous lors de votre voyage. Ci-dessous toutes ces informations, comme je l'ai dit, imaginez cela comme une seule section. Donc, en dessous de cette seule section avec trois zones différentes à l'intérieur, nous allons avoir des choses normales comme nous l'avons fait sur les pages précédentes. Donc on va avoir une image avec la couleur et le voyage parfait, non ? Le texte. Citation. On va avoir un taux de change. Et nous allons avoir ces trois. Nous allons avoir Q et abonner mes notes. Donc même section, donc sert boîte e-mail Web et enfin pied de page, juste ici en bas. Nous l'avons donc, et ce sont nos fils. Et si je m'étire et tendre la main et obtenir mes autres filaires et dettes que nous avons créés au cours de ces quelques vidéos. Donc, ici, nous avons sélectionné des offres. Ici, nous avons une destination. Ici, nous avons notre grande page d'accueil, et ici nous avons ces pages que nous avons créées. Donc, dans l'ensemble, vous pouvez voir à quel point ce processus est rapide, à quelle vitesse il est. Vous n'avez pas besoin d'équipement de fantaisie. Vous n'avez pas besoin d'une épaisseur et d'un classement de papier fantaisie. Vous n'avez pas besoin de règles, vous n'avez pas besoin de marqueurs, de stylos et de crayons spéciaux, etc. Vous avez juste besoin du vieux morceau de papier ordinaire. Vous avez besoin d'un crayon ou d'un stylo, quoi que vous choisissiez. J' ai choisi ce noir juste pour que vous puissiez le voir mieux contre le papier blanc, mais vous pouvez choisir tout ce que vous voulez. Maintenant, l'étape suivante pour nous est que vous pouvez prendre une photo de tous ces filaires, puis apporter l'image sur votre bureau et simplement la faire glisser et déposer sur Adobe XD. Ou si vous avez un scanner comme un hub, vous pouvez numériser ces pages individuellement, puis simplement les enregistrer en tant qu'images sur notre bureau, puis simplement les faire glisser et déposer Adobe XD afin de pouvoir les utiliser comme références. Vous n'avez pas besoin de le faire si vous ne partagez pas cela avec vos clients, mais si vous partagez votre fichier avec les clients ou avec les développeurs ou les coéquipiers ou d'autres choses comme ça, alors il est vraiment utile d'avoir cette option dans Adobe XD, juste pour que vous puissiez leur rappeler ou vous rappeler ces idées que vous avez sur vos trames filaires. Et c'est la caractéristique clé de ce processus filaire de papier. Ce ne sont que des idées. Donc, tout cela, que j'ai créé au cours de ce processus ne sont que des idées simples. Donc rien n'a à ressembler exactement comme ça. Et par exemple, certaines de ces pages ne vont pas ressembler à ceci. Nous allons les diviser et les changer un peu plus tard quand nous commencerons à créer. Mais c'est tout le problème. C' est juste pour que vous puissiez effacer vos idées sur un morceau de papier très rapidement, plus rapidement que vous ne pouvez le faire sur n'importe quel logiciel. Puis amenez-les à l'intérieur d'Adobe XD ou votre auteur préféré, puis commencez à travailler à partir de là. Donc c'est fondamentalement tout pour cette section. Dans la section suivante, comme je l'ai dit, nous allons introduire cela dans Adobe XD. Vous pouvez utiliser votre téléphone pour prendre une photo de chacun d'entre eux, les amener de votre bureau à Adobe XD. Ou si vous avez un scanner comme moi, vous pouvez simplement scandium, puis les enregistrer sur votre bureau et les amener dans Adobe XD. Je te vois dans la prochaine vidéo. 11. Importer des filages de papier: Bon, maintenant que nos fils de papier sont finis, comme je l'ai dit, vous pouvez utiliser votre téléphone pour prendre une photo et l'amener à l'intérieur d'Adobe XD comme ça. Ou si vous avez un scanner comme moi, vous pouvez simplement les numériser et les amener votre machine, puis les faire glisser et déposer dans Adobe XD. Et c'est ce que je vais faire. Maintenant. Pourquoi devriez-vous faire ça de toute façon ? Eh bien, juste au cas où vous vouliez partager ce papier filaire avec vos clients, avec vos coéquipiers, avec vos développeurs, juste pour obtenir des commentaires rapides. Ce genre de choses se sont rarement produites parce que ce sont généralement juste pour vous de vider quelques idées sur un morceau de papier que vous avez dans votre tête comme expliqué dans le processus de création. Mais juste au cas où certains de ces gens veulent vraiment voir ces filaires. Et pour vous donner les premiers commentaires sur la mise en page elle-même, vous pouvez les partager comme ça avec vos clients, vos coéquipiers ou vos développeurs. Donc, pour commencer, ce que j'ai ici est le fichier que nous avons créé précédemment, et je vais simplement sélectionner mes images à partir du bureau, les glisser et les déposer à l'intérieur et vous pouvez voir à quoi elles ressemblent. Alors laissez-moi les sélectionner comme ça et laissez-moi les glisser et les positionner comme ça. Et laissez-moi zoomer un peu plus près. Laissez-moi les séparer par 100. Je vais séparer celui-ci, puis celui-ci. Celle-ci, et enfin celle-là. Et courons rapidement à travers eux. Donc, ce que nous avons ici, c'est notre navigation. Et cela va nous être très utile. Juste au moment où nous commençons, nous avons la page d'accueil et vous pouvez voir et vous rappeler que c'était cette longue page que nous avons créée avec toutes ces différentes sections. Alors ce que nous avons est l'écran de destination. Quand ils vont aller, quand ils cliquent sur l'un d'eux et vont à cet écran de destination. De là, ils peuvent choisir l'offre si vous vous en souvenez. Offre donc sélectionnée, et cette offre va être évidemment pour l'hôtel avec toutes ses fonctionnalités. Enfin, une fois le clic réservé et choisir toutes ces options, il, ils vont être emmenés ici à l'écran de paiement où ils sont évidemment bons pour terminer leur paiement. C' est tout pour cette partie de cette classe et cette section du projet. La section suivante va être en fait, nous allons commencer à créer des trames filaires ici dans Adobe XD en utilisant ceux-ci comme références. C' est pourquoi nous les avons créés en premier lieu. Juste une dernière chose à noter. Si vous le souhaitez, vous pouvez les conserver sous forme papier. Si ce n'est pas le cas, vous pouvez simplement les jeter et les avoir ici encore une fois dans Adobe XD, si vous voulez les partager, car il est assez facile de les partager, suffit de sélectionner un clic Contrôle E. Vous pouvez sélectionner l'option vous pouvez choisir, par exemple, PNG ou JPEG, tout ce que vous voulez, appuyez sur Exporter, puis vous pouvez simplement les partager avec votre client. Ou bien, comme tu l'as fait, tu as pris une photo avec ton téléphone, tu les as amenés à l'intérieur ou tu les scannes comme moi. Ensuite, vous pouvez simplement leur envoyer ces scans et ils peuvent fournir des commentaires sur la dette. Donc fondamentalement, comme je l'ai dit, ce ne sont que le processus d'idéation. Ceux-ci sont là pour vider quelques idées sur un morceau de papier et viennent maintenant la vraie partie avec les filaires dans Adobe XD. Et je vous encourage toujours, si certaines de ces personnes ne vous ont pas demandé de leur envoyer ces filaires papier, commencez évidemment par les commentaires dans la partie via framing du processus dans Adobe XD, parce que vous pouvez réellement partager le avec vos clients et développeurs et ils peuvent commencer à analyser vos conceptions tout de suite. Et puis ils peuvent fournir les premiers commentaires sur le premier brouillon, n'est-ce pas ? Osez, parce que c'est beaucoup plus simple et vous pouvez toujours rendre ces liens cliquables. Vous pouvez toujours inclure une interaction, des animations là, alors que vous ne pouvez pas le faire, car ce ne sont que les fils de papier. Donc, comme je l'ai dit dans la section suivante, nous allons commencer avec les trames filaires dans Adobe XD. Alors je te verrai là-bas. 12. Ressources du projet: Avant de sauter dans la conception et de commencer à travailler dessus, je veux juste mentionner rapidement les ressources, parce que chaque projet que vous allez créer, vous allez avoir besoin de ressources. Et dans ce projet et dans cette classe, j'utilise des ressources premium des éléments Envato. Vous allez insérer ces ressources dans le fichier afin que vous puissiez les utiliser à des fins d'apprentissage, mais vous n'êtes pas autorisé à les utiliser dans n'importe quel type de projets personnels ou commerciaux parce que vous devrez les payer. Je crois que le lien vers le bas dans le PDF à cette collection que j'utilise. Donc, si vous voulez explorer les éléments Envato dans, au cas où vous voulez les utiliser pour, par exemple, conception de votre portefeuille ou pour le travail client, vous devrez acheter ces articles. Mais au cas où vous vouliez simplement les utiliser à des fins d'apprentissage, juste pour suivre cette classe, c'est bon. Mais s'il vous plaît ne les partagez pas parce que vous n'avez pas la licence. Et c'est vraiment important à comprendre parce que si quelqu'un vous attrape en utilisant ces objets sans licence, vous risquez un procès possible. Alors gardez ça à l'esprit. Maintenant, je veux vous montrer rapidement cette collection, ce qui est inclus et que pouvez-vous télécharger en cours d'utilisation à partir des éléments Envato. Voici la collection dont je parlais. Comme vous pouvez le voir, j'utilise une police premium et j'utilise une police gratuite. J' utilise Poppins de la police Google comme une police gratuite. Et j'utilise ce soda buck d'Envato Elements, qui est bien sûr une police premium. Vous pouvez également aller de l'avant et télécharger des versions plus grandes de ces images, par exemple, à partir d'ici. Mais vous allez avoir ce filigrane au-dessus de toutes ces images. Laisse-moi l'ouvrir. Vous pouvez voir que vous allez l'avoir ici. Maintenant, c'est vraiment crucial et pourquoi j'utilise des éléments Envato pour tout mon travail premium. Vous pouvez voir qu'ils ont mentionné ici. Donc presque six K en taille. Et aussi les collections sont vraiment énormes parce que vous pouvez obtenir ces collections impressionnantes avec ces images à la recherche assez similaire parce que et c'est le point clé moyen pourquoi j'utilise un des ressources premium ou les ressources gratuites. Avec des ressources premium, en particulier avec des images, vous obtenez ces collections. Ensuite, vous pouvez utiliser les collections du même photographe qui sont photographiées dans le même environnement en utilisant le même éclairage, en utilisant le même équipement le même jour. Ces images semblent donc extrêmement cohérentes. Ils ont l'air d'appartenir l'un à l'autre. Plutôt que d'utiliser toutes ces images aléatoires de sites gratuits comme Unsplash par exemple, finissant avec votre site Web regardant cohérent et regardant incohérent et vraiment amateur. Donc, avec ces ressources, vos conceptions peuvent finir par paraître premium parce que vous les utilisez du même photographe que je l'ai dit, dans ce extrêmement haute qualité. Et la même chose vaut pour les icônes, par exemple. Donc, si je fais défiler jusqu'ici et aller à la dernière page de cette collection, vous pouvez voir combien ils sont. Vous pouvez voir que j'utilise ces icônes haut de gamme faites par ce même gars, personne ou entreprise, peu importe, ce rond icônes. Et vous pouvez voir que ces icônes ont vraiment l'air d'appartenir les unes aux autres. Vous pouvez voir que tous ressemblent à une partie de la même collection qu'ils sont. Donc, ils sont à la recherche extrêmement premium. Et si j'ouvre certains d'entre eux, vous pouvez voir tous ces types de fichiers dans lesquels ils entrent. Donc, vous pouvez vraiment choisir et choisir ce que vous voulez. Et vous pouvez voir que tous sont créés dans ces mêmes dimensions exactement. Donc 1906 avec 96, ce qui les rend extrêmement simples à utiliser. Et comme vous allez le voir tout au long de notre conception, nous allons utiliser les versions de contour ainsi que les versions colorées, ce qui, encore une fois, vous n'obtiendrez aucune de ces trois icônes. La même chose vaut pour les illustrations. Surtout si vous utilisez quelque chose comme andro, que tous les concepteurs de la planète semblent utiliser en ce moment, juste parce que c'est gratuit. Don, fais ça. Si vous voulez que vos designs soient polis et professionnels, assurez-vous d'utiliser ces services haut de gamme tels que Envato Elements. Vous n'avez pas à l'utiliser, mais je l'aime vraiment parce que contrairement à quelque chose comme un poids énorme, par exemple, éléments Envato de blé, vous ne recevez pas les limites quotidiennes de téléchargement, sorte que vous pouvez télécharger autant d'articles que vous voulez où vous voulez. Mais avec quelque chose comme, euh, par exemple, ils vous limitent à quelque chose comme 18, peut-être quatre ou huit articles par jour. Alors que se passe-t-il si cet article n'est pas un bon ajustement, par exemple, ce qui arrive beaucoup. Et tu verras qu'une fois que tu commenceras à concevoir, tu seras coincé. Vous devez attendre demain pour télécharger et utiliser autre chose. Mais avec Envato Elements, vous pouvez simplement télécharger le site entier si vous le souhaitez aujourd'hui, et simplement l'utiliser dans votre projet. Quand il s'agit de licences, c'est extrêmement simple à utiliser. Disons donc que je veux utiliser mes propres icônes Ds. Par exemple. Je clique simplement sur le Download et je peux simplement taper ici. Par exemple, Voyage, une agence de voyage, qui est ce projet. Je peux simplement cliquer dessus, appuyer sur Ajouter et télécharger, et c'est fondamentalement tout. A l'intérieur de ce téléchargement. Lorsque vous arriverez à vos téléchargements ici, vous serez couvert d'une licence, afin que vous puissiez partager cette licence avec votre client. Et ils sont couverts juste au cas où ils doivent utiliser ces articles ailleurs en ligne ou sur papier pendant un quart, quoi que ce soit d'autre. Donc, vous obtenez cette licence couverte pour vous-même ainsi que pour votre client, ce qui est une autre grande chose sur les éléments Envato. Et pas seulement sacrément, mais les services premium en général sont couverts par une licence, mais quand vous téléchargez ces articles gratuits, vous ne sauriez jamais si quelqu'un d'autre a téléchargé l'article premium , par exemple, l'a donné gratuitement, et puis vous risquez ce procès. Assurez-vous donc de vous familiariser avec toutes ces licences et éléments différents. Comme ils l'ont dit, Vous allez obtenir tous ces éléments que nous utilisons à l'intérieur de la conception. Mais assurez-vous de les utiliser à des fins d'apprentissage. Juste pour suivre ce cours. Si vous voulez les utiliser n'importe où à l'extérieur pour votre portefeuille, pour votre travail client, vous devrez les payer et les concéder pour vous-même, comme je viens de vous l'ai montré ici. Une dernière chose que je voulais traverser avant de passer au design est que je veux vous montrer ce qui est inclus dans les éléments Envato lui-même. Donc, vous pouvez voir ici toutes ces différentes catégories. Donc stock modèles vidéo, musique que j'utilise pour ces classes, ainsi que ma chaîne YouTube, effets sonores, modèles graphiques. Vous pouvez voir les kits UX et UI et il y des milliers pour vous aider à accélérer votre flux de travail. Modèles de présentation graphique, photos , polices, flèches, modèles Web et autres catégories. Maintenant, quand il s'agit de photos, ils ont leurs propres photos, qui sont celle-ci fondamentalement. Mais vous pouvez également aller sur le site appelé 2020 pour 50 millions de photos supplémentaires en plus de toutes ces photos ici sur les éléments Envato parce qu'ils possèdent ce site Web. Et à l'intérieur de plus de catégories, vous pouvez voir CMS, modèles, WordPress, 3D, et ils ont aussi leurs e-books et classes. Donc, fondamentalement, c'est tout quand il s'agit des licences, quand il s'agit de ces fichiers et ce que j'utilise pour une classe d'une journée. Donc maintenant vous savez, une fois de plus, vous pouvez utiliser ces éléments qui sont inclus dans le fichier à des fins d'apprentissage seulement. Ainsi, vous pouvez suivre cette classe et vous pouvez créer tous ces éléments. Mais au cas où vous voulez les mettre dans votre portefeuille, ou pire encore, au cas où vous voulez travailler avec votre client, vous devrez les acheter. Ou vous pouvez simplement utiliser cette mise en page que nous avons créée dans cette classe et simplement ajouter sur vos propres images, vos propres icônes et vos propres éléments afin que vous puissiez l'utiliser à cette fin. Alors passons maintenant à autre chose. 13. Créer un guide de style: Passons maintenant aux trames filaires dans Adobe XD. Mais avant de le faire, nous devons rapidement finir quelques choses. Tout d'abord, nous devons créer un guide de style. Et le guide de style est génial car à l'intérieur de celui-ci, il y aura une collection d'images, d'icônes, de couleurs différentes, de polices, tailles de police et de combinaisons de polices, et tous les autres éléments que vous voulez, pour , boutons, curseurs, tout le reste peut être à l'intérieur de ce guide de style, qui est extrêmement utile à la fois pour vous, vos coéquipiers car ils peuvent simplement copier et coller ces éléments à partir de ce guide de style à votre car ils peuvent facilement jeter un coup d'œil à tous les éléments que vous avez utilisés dans votre conception. Enfin, et surtout à vos développeurs, car ils peuvent facilement un coup d'œil et exporter à partir de là si ils le veulent. Mais vous allez exporter des fonctionnalités plus tard. Et je vais partager avec vous quelques façons de partager vos fichiers avec vos développeurs. Mais ce n'est qu'un d'entre eux et ce n'est qu'une des options disponibles dans Adobe XD. Maintenant, avant de passer au guide de style et aux filaires réels dans Adobe XD. Je voulais juste partager rapidement avec vous les autres produits que nous avons sur un beignet web. Et nous avons aussi UX, UX kids, qui sont essentiellement des kits filaires et vous pouvez les utiliser pour accélérer votre flux de travail. Maintenant, vous n'avez pas besoin de les utiliser pour ce projet particulier, mais vous pouvez les utiliser pour vos propres projets à l'avenir, fois personnels et commerciaux, si vous voulez savoir. Je dis juste que c'est juste une option pour vous si vous le voulez, mais ce n'est pas obligatoire pour ce cours. Donc, ce que nous avons ici sont tous ces différents enfants UX. Et aussi nous avons des kits d'interface utilisateur, qui sont fondamentalement la même chose, mais avec des textes réels inclus et des images de largeur incluses à l'intérieur. Chez nous les enfants généralement ce est juste un texte factice et généralement être inclus quelque chose comme Lorem Ipsum texte ou quelque chose comme ça. Mais à l'intérieur des kits d'interface utilisateur, il y a quelques éléments réels. Vous pouvez l'obtenir avec un abonnement ou si vous voulez encore mieux, je pourrais vous suggérer d'aller sur mon propre site web personnel. Et en passant, je laisserai les liens vers tout ce qui se passe dans le PDF et vous pourrez y accéder avec toutes les réductions que j'ai mentionnées précédemment. Et ici, vous pouvez voir que tout est au même endroit. Nous avons des cours et nous avons des membres. Et bien sûr, ces paquets sont beaucoup mieux. Ensuite, en visitant simplement mon site web. Vous avez aussi un appel de coaching de 30 minutes chaque mois avec moi. Vous avez également un groupe Facebook privé. Donc, si c'est quelque chose qui vous intéresse, j'ai rencontré, vous exhortez à vérifier et à obtenir tous ces produits dans tous ces cours pour vous-même si vous êtes intéressé, bien sûr, j'ai aussi une chaîne YouTube et je vais le lier dans ce PDF aussi. Vous pouvez le vérifier si vous voulez du contenu supplémentaire, mais si ce n'est pas le cas, passons rapidement à Adobe XD. Et je veux vous montrer ce qui est inclus dans le guide de style et ce que nous allons utiliser. Donc, nous sommes ici dans Adobe XD, et comme vous pouvez le voir, c'est là que nous avons laissé la vidéo précédente. Donc, fondamentalement, nous avons modèle bref de conception. Nous avons ce tableau d'ambiance et nous avons des fils de papier. Avant de passer aux trames filaires dans Adobe XD, une chose utile à avoir est le guide de style. Ce n'est pas obligatoire, surtout lorsque vous commencez tout juste avec ces projets. Évidemment. La plupart du temps, vous n'avez pas les couleurs, vous n'avez pas les polices, vous n'avez pas les icônes, vous allez juste les obtenir. Mais dans ce cas, parce que j'ai déjà créé ce projet, je vais commencer par le guide de style. Maintenant, le guide de style est une chose en constante évolution. Ainsi, à mesure que vous passez à travers votre projet, que vous obtenez de plus en plus de ressources à l'intérieur, par exemple , des images, des arrière-plans différents, des ombres, des icônes différentes, alors vous allez remplir ce guide de style beaucoup plus. Mais pour commencer, vous pouvez commencer par simplement utiliser la typographie, par exemple. Donc, quels que soient les styles de typographie que vous avez, quelles que soient les couleurs de typographie, vous pouvez simplement les inclure à l'intérieur. Et évidemment, vous pouvez créer quelque chose comme des composants dans Adobe XD afin que vous puissiez facilement les modifier plus tard et mettre à jour le guide de style en temps réel. Une fois de plus, ce que nous avons ici, c'est ce document Adobe XD. Je vais sauter à l'intérieur de mon document que j'ai déjà créé et appuyez sur Control V, Control C pour le copier, puis Control V ici pour le coller à l'intérieur. Et comme vous pouvez le voir, il y a quelques problèmes ici. Laisse-moi défaire ces deux ou trois fois et laisse-moi entrer. Voyons voir les bibliothèques. Et nous allons sauter à l'intérieur d'ici et créer 1920, notre planche. Je ne sais pas pourquoi il continue à faire ça. Donc, en fait, dupliquons celui-ci. Et en faisant cela, je vais le positionner juste ici. sautant, appelez ça le style, allez comme ça. Ensuite, je vais sauter à l'intérieur de mon panneau de calques et les supprimer tous, y compris VG. Ensuite, je vais sauter ici et lui donner 1920 par 1080, par exemple, mise en page. Utilisons une largeur de gouttière de 68. Je pense que ça va aller. Ici. Je vais abaisser l'obésité profonde de ces lignes de grille pour tourner peut-être même à huit. Donc ce n'est pas trop distrayant pour toi de regarder. Je pense que c'est bien. Et maintenant, je vais sauter. Tout d'abord, je vais utiliser une couleur d'arrière-plan pour ce guide de style au lieu du blanc, juste pour que vous puissiez voir toutes ces autres icônes qui ne le sont pas, qui ne vont pas se démarquer. Donc, je vais simplement copier et coller tous ces éléments dans. Ils sont là. Et c'est ça, c'est notre guide de style. Ce sont les icônes que nous allons utiliser. Donc, fondamentalement, ce sont toutes les icônes que je partage avec vous dans la collection Envato Elements. Et fondamentalement, vous pouvez utiliser ces icônes ou vous pouvez utiliser d'autres icônes que vous trouvez en ligne. Fondamentalement, c'est à vous de décider ce que vous voulez faire. Comme je l'ai dit, vous devez suivre les règles concernant les licences afin que vous puissiez les utiliser strictement à des fins d'apprentissage. Vous ne pouvez pas les utiliser pour tout type de travail client. Les projets personnels et commerciaux sont interdits. Utilisez-les strictement à des fins d'apprentissage. Et laissez-moi sauter à l'intérieur d'ici. Et laissez-moi aller à Envato Elements. Et vous pouvez aller à mes articles juste pour vous montrer que la collecte une fois de plus, sorte que vous allez être en mesure, comme il l'a dit, accéder à ce lien de recouvrement va être dans le fichier PDF et simplement accéder au recouvrement de créances et parcourir ce que j'ai inclus. Donc, fondamentalement, c'est cette collection, comme vous pouvez le voir ici. Vous pouvez parcourir toutes ces images différentes. Et vous pouvez obtenir ces illustrations, vous pouvez obtenir ces packs d'icônes. Et en gros, ce que j'ai fait, c'est que tu peux le voir dans la machine à laver juste ici. Et si je retourne à notre fichier d'origine où il est, le voici. Donc, vous pouvez voir que j'ai pris quelques icônes de ces packs et fondamentalement les coller ici. Ce que j'ai aussi fait est d'utiliser le logo. Nous avons l'état par défaut et nous avons l'état sombre, qui est cette date, et je déplace juste ça ici pour que vous puissiez le voir. Ce que nous avons aussi nos états pour ces icônes. Donc, nous avons l'état par défaut si nous zoomons vraiment de près, parce que c'est l'icône SVG, vous pouvez voir à quel point c'est beau et nous avons aussi le contour. Donc peut-être que nous allons utiliser l'état par défaut. Peut-être que nous allons utiliser l'état du contour. Je viens de l'avant et retiré de cette couleur de l'icône d'origine pour obtenir cet état de contour. Et vous pouvez voir que nous avons décrit les États pour tous. Maintenant, une dernière chose que nous allons faire avant de commencer à créer des trames filaires dans XD. Je vais sauter ici à mes composants. Et ce que je vais faire est fondamentalement de sélectionner tous les sont clic-droit et faire glocal parce qu'ils sont actuellement connectés à mon fichier de conception d'origine que j'ai créé en premier. Mais je veux les rendre locaux et les appliquer juste ici avant de passer à la conception plus loin, ce qui veut vraiment faire est de goûter quelques couleurs. Donc ce que je vais faire est de faire glisser un rectangle comme celui-ci. Ainsi, par exemple, trois colonnes de large. Je vais m'assurer d'arrondir un peu les coins, juste pour qu'on puisse le styliser un peu. Et nous allons l'utiliser comme une couleur blanche. Ensuite, nous allons réellement utiliser le texte. Mets-le là. Et disons des lingettes simples. Comme la dette et prêt à utiliser Poppins pour celui-ci et choisir Poppins 24, je pense. Je pense que ça marche. Eh bien. Il 6, Passons à, par exemple, 60. J' ai fait Contrôle D. Assurez-vous que c'est bien aligné et nous allons essentiellement utiliser le code hexadécimal. Donc, laissez-moi rapidement copier et coller le code hexadécimal du document d'origine. Et ce n'est qu'un code hexadécimal pour cette couleur blanche. Assurez-vous qu'il est 40, car je ne pense pas qu'il soit nécessaire d'être à 60 ans. Et passons dans notre panneau de calques et appelons cette nuance de couleur comme ça. Et j'aime aussi les organiser. C' est de la couleur évidemment. Mets-le ici. C'est tout à fait large, c'est juste ici. Et enfin, nous allons regrouper tous ces contrôles G. et je vais les appeler icônes. Ce sera le logo, évidemment. Et plus tard, je vais réellement exporter ce logo, qui est le fichier SVG à ce stade, mais je vais l'exporter plus tard. Et un glisser-déposer deux PNG de plus juste ici parce que nous devons le réduire. Et si vous vous souvenez de l'exemple que je vous ai montré quand je commence à le réduire, comme vous pouvez le voir, parce que ce sont trois éléments. Ils ne s'échelonnent pas trop bien. C' est pourquoi, dans les petites tailles, nous allons réellement utiliser PNG au lieu de SVG. Alors passons maintenant et utilisons d'autres couleurs. Alors positionnons-le ici. Nuancier de couleur, vous pouvez évidemment l'utiliser une grille de bits, mais je ne vais pas, je vais simplement l'utiliser comme ça. Oups. Positionnons ça comme ça juste pour remplir notre grille vraiment bien. Donc, la première couleur que nous allons utiliser est principalement bleue. Comme ça. Je vais frapper copie de la couleur elle-même. Et je vais en fait colorier ici. Maintenant, je peux cliquer sur cette nuance et je peux l'ajouter en tant que composant, ou je peux simplement aller ici où il est dit Couleurs, cliquez ici et l'appeler blanc uni. Comme ça. Je peux sauter ici, ajouter celui-là aussi, appeler bleu principal, comme ça. Et puis je pourrai passer à autre chose. Ça va être stationnaire et bleu. Et permettez-moi de le copier rapidement à partir de mon document original. Évidemment, vous allez contourner ces fichiers. Ils les sélectionnent simplement à partir de votre logo réel, de votre document réel, de toutes ces icônes de ce tableau d'ambiance que nous avons créé. Donc fondamentalement vont travailler votre chemin autour de ceux-ci parce que je les ai déjà créés. Et pour nous épargner un peu de temps, je vais simplement passer à autre chose et les créer ici. Donc, nous allons appeler ce texte sombre ou encore mieux texte noir, ou l'appeler presque noir. Je vais en fait copier et coller dans ce clip de texte ici, coller et je vais l'ajouter à mes couleurs, presque noir comme ça. Et maintenant, parce que nous les avons tous remplis, nous allons les dupliquer avant que DoubleClick et étendre notre plan de travail. C' est ce que je disais. Donc, évidemment, vous allez avoir ce plan de travail grand que vous avez besoin. Donnons-lui un espace de 80 vers le bas. Et voyons, peut-être que maintenant je peux passer au texte sombre. Peut-être. Collons-le ici, et collons-le ici. Et appelons-le gris foncé. Comme ça. Cliquez ici, cliquez ici. Change son nom en gris foncé comme ça. Et nous allons appeler ce gris moyen par exemple, ou gris clair comme vous le souhaitez. Et évidemment, ces noms peuvent être utilisés comme jetons de couleur plus tard par les développeurs. Si léger, car il est beaucoup plus facile dans code de voir ces couleurs puis de les utiliser comme elles sont ici. Enfin, ce que nous allons utiliser l'échantillon quelques couleurs. Donc je vais goûter la couleur de cette étoile que vous voyez ici. Donc, je vais l'appeler orange étoile, juste pour que nous sachions d'où elle vient et à quoi elle sert. Alors cliquez ici et il est là. Cliquez pour l'ajouter, renommez-le en étoile, orange, comme ça. Et enfin, je vais ajouter une couleur de plus, qui va fondamentalement juste être échantillonné à partir de certains d'entre eux et nous allons l'utiliser plus tard comme une couleur de soutien fondamentalement afin que nous puissions l'utiliser pour autre chose et l'appeler savoir clair, couleur pêche comme ça. Collez le code hexadécimal et vous pouvez voir pourquoi je lui ai donné ce nom. Enfin, ajoutons-le rapidement à ici. Changez son nom. Derek habitude. Et enfin, ce que nous voulons faire à ce stade, c'est les regrouper tous. Voyons voir. Mettons ces quatre sur le dessus. Comme ça. Voyons voir, c'est le premier et c'est juste mon TOC. Vous n'avez pas à le faire, mais j'aime vraiment garder les choses organisées et bien positionnées. Donc je vais mettre ça ici, mettre ça ici, là, nous l'avons et les regrouper tous et les appeler couleurs. Donc là, nous l'avons, Nous avons maintenant nos couleurs, nous sommes en mesure de les échantillonner. Nous allons également utiliser cette Poppins et une autre police, qui est la police premium. Et vous pouvez l'obtenir sur la collection Envato Elements si vous le souhaitez. Sinon, vous pouvez évidemment, comme il l'a dit, trouver des polices gratuites qui correspondent bien à la police premium que j'ai utilisée. Mais sinon, comme je l'ai dit, vous pouvez simplement le trouver ici dans cette collection et ensuite l'utiliser si vous le souhaitez. Donc c'est tout pour l'instant. Nous allons maintenant passer à la création de trames filaires dans Adobe XD. Et je vais vous montrer comment nous pouvons transformer ces fils de papier en des fils filaires que vous pouvez partager avec vos clients pour obtenir des commentaires appropriés. 14. Créer des Wireframes dans Adobe Xd 1: Bon, maintenant que le guide de style est créé, passons à autre chose et commençons à créer nos trames filaires dans Adobe XD. Donc la première chose que je vais faire est de cliquer sur mon plan de travail, en sautant ici, cliquez sur ce 1920 d'ici 1080. Et enfin, il passe, ici. Tout d'abord, juste pour que vous puissiez voir ça, abaissons-le à huit, donc c'est le même que celui-ci. Sautons dans quelque chose de large comme 60 par exemple. Cela la rend, à savoir plus grande, qui est la largeur entre nos colonnes et les largeurs de colonne, beaucoup plus petite. C' est donc facile de travailler avec. Et double-cliquez ici, appelez ça la plage de la maison. Et la première chose que je vais faire est d'étendre jusqu'au bas. Parce que si je saute à l'intérieur d'ici, vous pouvez voir que la page va être extrêmement énorme. Alors, nous allons entrer ici. Et la première chose que nous voulons faire est d'inclure une image. Et voyons voir. Nous pouvons, par exemple, champion et créer 1920 par 1080 rectangle comme ceci, 1920 par 1080 et le positionner. Voyons ici et ici. Enlève la bordure et donnons-lui un nom propre. Donc, disons par exemple, héros, IMG. Laissons-le comme ça. Et donnons-lui une couleur de gris foncé, par exemple, ou encore mieux gris clair, juste pour que nous puissions voir ce que nous faisons. Et indiquons que ce gris clair, par exemple, est la couleur de l'image le matin. Donc, en fait, allons maintenant sauter juste ici. Et comme je l'ai dit, vous pouvez l'utiliser à partir d'ici, tous ces éléments de guide de style. Ou vous pouvez simplement sauter ici, trouver le logo, le glisser et le déposer à l'intérieur. C' est ce que je vais faire. Et je vais le déplacer, par exemple, 40 du haut, comme la dette. Maintenant, la première chose que je vais faire si je vous emmène ici à notre filaire, vous pouvez voir que nous avons une navigation à deux niveaux comme tous ces sites Web le font, mais nous allons le faire d'une manière beaucoup plus propre. Donc, nous allons avoir cet arrêt, qui va dire, par exemple, les billets d'avion, la newsletter, et le numéro de téléphone. Et ce bas sera en fait notre navigation elle-même. Donc, nous allons sauter juste là et voyons, par exemple, je peux faire glisser cette icône de billets d'avion et je peux vraiment sauter à l'intérieur d'ici. Icône billets d'avion. Et j'en ai besoin deux de plus. J' ai besoin d'une newsletter. Ici, c'est. C'est pourquoi il est important de nommer à nouveau vos couches. Et enfin icône de téléphone ici, il est, et glissez-le et déposez-le à l'intérieur. Maintenant, ce que je vais faire est de sauter ici, sélectionner les trois et simplement les organiser mieux comme ça. Assurez-vous que tous sont en dessous du logo et cliquez simplement ici juste pour qu'ils soient bien commandés et qu'ils soient en ligne. Enfin, je vais déplacer le droit ici pour l'instant, et je vais réellement utiliser l'outil de texte, cliquez ici. Et je vais écrire dans les billets d'avion. Assurez-vous que c'est de gauche. Et voyons, on va utiliser Poppins. Et voyons des lumières comme des papas et peut-être 18 ans. Et donnons-lui aussi une couleur de blanc. Je peux simplement fermer ceci et je peux voir Lee utiliser du blanc uni pour celui-ci. Je peux le positionner ici. Voyons voir, par exemple, je peux lui donner une distance de c. Par exemple, 28 pense que cela va aller bien. Donc comme ça. Et sélectionnons ces deux-là. Et je l'ai simplement déplacé du chemin pour l'instant, saute à mon panneau de calques, touche Control D une fois de plus. Je vais déplacer le disque pour être 20 aussi. Assurez-vous qu'il est aligné. Et dupliquez-le encore une fois et positionnez-le ici. Et maintenant, je vais simplement faire induire des billets d'avion qui vont aller au-dessous de la newsletter. Et enfin, je vais les sélectionner pour les déplacer ici. Et voyons voir. Ça va être notre super classe de numéros de téléphone. Vous pouvez simplement écrire dans un imaginaire pour le numéro un. Donc 1234567890 par exemple. Et voyons voir. Je peux, par exemple, assurer qu'ils sont, ils vont de la droite, donc alignés à droite. Et la première chose que je vais faire est de l'ajouter à mes styles de personnages. Donc nous l'avons, Poppins light 18 ici. Et passons maintenant et explorons et Ds plus. Donc 20. Et voyons, peut-être qu'on peut donner à ça 40. Contrairement à induire, donc 40 et cela va dire bulletin d'information, comme les dettes et simplement se déplacer dans cette icône dans un peu plus comme les cotisations et le donner à 20, ce qui est très bien. Enfin, je vais positionner ces billets d'avion à 40. Assure-toi juste. Et ça, parfois ces icônes ne sont pas si géniales, alors nous allons obtenir ces demi-pixels, mais c'est bon. Vous pouvez simplement le regrouper. Corrélez les billets d'avion, la newsletter, et enfin téléphonez comme ça. Et voyons, nous pouvons appeler ce nav secondaire. Si je peux l'épeler correctement, et je peux même inclure ces tirets inférieurs comme ça. Et enfin, ce que je peux faire est de le mettre dans une pile et comme vous pouvez le voir, Stack l'a organisé correctement. Donc maintenant, si vous voulez les déplacer, vous pouvez le faire. Ou vous pouvez simplement maintenir votre touche Maj et simplement l'étendre comme vous le souhaitez. Et puis par exemple, si je positionne ce nav secondaire quelque part ici, je peux cliquer ici et étendre ceci comme ceci ou maintenir le décalage. Et ça va les étendre et les déplacer comme ça. Donc, je pense que c'est vraiment agréable fonctionnalité d'avoir dans cette pile dans Adobe XD. Et enfin, positionnons-les pour être 40 du haut. Alors voyons comme ça. Et au fait, je maintiens la touche Alt ou Option sur un Mac juste pour voir où je suis avec mes espacements. Alors passons maintenant et ajoutons notre navigation principale. Alors voyons ce qu'on peut en faire. Écrivons dans les destinations. Et pour cela, Voyons voir peut-être que nous pouvons utiliser pop en légère mais 24 par exemple. Et donnons-lui aussi une couleur blanche. Et ajoutons aussi ici. Et voyons, nous pouvons le positionner pour qu'il soit aligné comme ça, ce qui est très bien. Voyons les destinations 24 lumière, c'est bon. Voyons voir l'hiver. Plus avec ici et voir le bien-être. Cela peut être individuel. Parce que si vous vous souvenez, et c'est leur point de vente clé, et ils veulent vendre ces voyages individuels autant que possible. C' est ce que nous faisons ici. Nous avons des croisières, et enfin nous avons sur nous. Maintenant, enfin, pour celui-là, voyons. Ce que nous pouvons aussi faire, c'est de le déplacer ici et de le faire passer à 80. Déplace ce à 80. Et ce sera comme cela utile parce qu'il est, il nous montre toutes ces barrières de navigation ou de navigation. Il nous montre donc les distances et nous montre où tout est en conjonction avec tous ces autres éléments. Et une fois de plus, voici mon TOC parce que j'aime vraiment organiser des choses. Alors appelons ce nav principal. Comme des morts positionnées juste ici. Voyons voir. La mort peut être positionnée, par exemple, en bas à droite ici. Et nous avons 47 distance entre ces deux-là, et c'est bon. Notre navigation est terminée. Et voyons peut-être que nous pouvons ajouter ceci et la qualité, par exemple, navigation primaire comme ça, parce que c'est notre navigation tout au long de notre conception. Passons maintenant et ajoutons d'autres éléments à notre page. Donc ce que je vais faire, c'est localiser mes flèches. Et je peux toujours utiliser cette recherche. Donc, les lignes, nous avons une flèche gauche, glisser-déposer, flèche droite, glisser-déposer. Et je vais sauter ici, les sélectionner pour m'assurer qu'ils sont correctement alignés. Et je vais aussi utiliser le rectangle parce que ce sera notre section héros avec le curseur. Utilisez ce rectangle. Sélectionnez ces deux-là. Cliquez ici, assurez-vous qu'ils sont dans un centre. Ensuite, supprimez ce rectangle parce que nous n'avons plus besoin. Enfin, pour cette flèche gauche, je vais juste l'aligner avec notre ligne de grille comme ça. Et faites la même chose pour la flèche droite. Donc simplement plus juste ici et l'aligner comme ça. La prochaine chose que je veux faire est d'utiliser mon outil de texte. Cliquez sur. Par exemple, explorer, mystique. Et donnons ça, allons d'abord fermer ça. Donnons-lui un bleu méchant. Assurez-vous qu'il est de la position centrale comme de la saleté. C. Par exemple. Voyons voir. 24 la lumière est bonne, donc nous ne allons pas la changer. Je pense que c'est bien. On peut le laisser comme ça. Mais la prochaine chose que nous allons faire est de le dupliquer. Mais pour nous positionner dans un centre, dupliquez-le. Et appelons ce gène B, par exemple. Et maintenant je vais changer la police pour que nous puissions celle-là, ce que je vais faire est de sauter dans les polices de prime de dette et de la changer en dette. Donc je pense que ça s'appelle Nimbus corner. Soda Bucks. Ici, c'est. Et je vais le changer pour être 200. Tellement énorme. Je vais utiliser la couleur presque noire. Et voyons les distances entre ces deux-là, je ne sais pas. Nous pouvons, par exemple, assurer qu'ils sont correctement alignés parce que nous avons assez d'espace entre eux. Et enfin, ce que nous allons faire est d'inclure un bouton à l'intérieur. Alors voyons. Nous pouvons faire glisser un rectangle comme celui-ci et nous pouvons le faire deux à quatre semaines, 70, par exemple, assurez-vous qu'il est au centre. Et voyons, on peut lui donner un angle arrondi de cinq. Nous pouvons enlever la couleur de remplissage en fait, nous allons laisser la bordure n, mais nous allons le garder en blanc. Et voyons, pour la distance que nous pouvons, par exemple, le positionner à 40 de nos textes. Ou encore plus. Ressembler à AT, Je pense que cela fonctionne bien. Et enfin à l'intérieur de celui-ci, je peux sauter, copier et faire glisser ce texte en tapant explorer. Maintenant, on peut s'assurer qu'il est blanc. Et donnons à ce btn, petit BG, par exemple, Data Explorer maintenant. Assurez-vous donc qu'il est au centre comme ceci, et assurez-vous que ce texte de bouton est aligné au centre comme il l'est. Et enfin, je vais vraiment frapper Control D et appeler ce BG et petite couleur comme ça. Et voyons, par exemple, je peux inclure la couleur. Et celui-là. Eh bien, voyons encore mieux planer la couleur parce que nous allons utiliser Hérakles peu plus tard. Et en fait, je vais enlever la frontière et abaisser l'obésité jusqu'au bas. Donc je vais tous les regrouper et appeler ça bouton héros comme ça. Et je peux toujours appuyer sur Control K pour m'assurer que je crée cela en tant que composant. Et nous allons traiter des composants un peu plus tard, mais je veux juste vous montrer ce qui est possible en ce moment. Alors organisons ça un peu mieux. Je vais positionner ça ici. Appelons ça un texte de héros, comme ça. Et voyons voir. Positionnez-le. Osez, je pense que c'est bon. Ici. La seule chose, c'est on s'occupe un peu de l'espacement. Alors faites-le au même crédit pour les flèches. Et c'est pour notre section héros, c'est terminé. Maintenant, ce qu'il reste à faire pour nous, c'est d'inclure cette navigation en bas ici qu'elle est. Donc, ce voyage de don activités, rechercher et postuler pour le fond. Et c'est ce que nous allons faire ensuite. Mais laissons ça pour la prochaine vidéo parce que celle-ci dure presque 15 minutes et je ne veux pas vous ennuyer trop. Mais fondamentalement, ce que nous avons fait dans celui-ci, c'est que nous avons terminé et terminé notre installation et nous sommes finalement allés à un ajout de tous ces différents composants. J' ai oublié d'ajouter le texte pour celui-ci, donc je vais rapidement l'ajouter ici. Et comme vous pouvez le voir, nous continuons maintenant à construire ce guide de style et à construire notre fichier oral parce que nous sommes, euh, plus tard, quand ajouter ces textes à notre guide de style dans tous ces différents poids. Mais je vais vous le montrer plus tard quand nous finirons le design et finirons le guide de style lui-même. 15. Créer des Wireframes dans Adobe Xd 2: Passons à l'endroit où on s'est arrêté. Et créons cette section du bas, qui est celle-ci juste ici. Laisse-moi sauter ici. Et ce que nous allons faire tout d'abord, c'est créer les contours. Alors faisons-le glisser sur toutes nos colonnes. Mais assurez-vous juste que je suis en dehors de mon message de héros parce que je voulais être séparé. Je vais le déplacer jusqu'ici. Un texte de héros va passer en dessous de notre navigation. Comme avec les flèches. Regroupez-les, appelons-les flèches comme ça, et positionnons-le ici. Donc, ce que cela va nous permettre est de créer cette section inférieure et nous allons l'appeler le bas maintenant par exemple, annélides lui donnent un nom de bas maintenant BG par exemple. Et voyons, nous pouvons garder cela une largeur, mais augmentons à, par exemple, 1640. Oui, gardons ça à 640 parce que c'est la largeur orale de notre grille. Comme les débats en 1644, désolé. Alors enlevons la bordure et pour la hauteur, allons-y avec 70. Comme avec ce bouton. Et voyons pour la distance que nous pouvons utiliser quelque chose comme 60. Donc 1, 2, 3, 4, 5, 6. Pour être éloigné de ce bord inférieur. Ce que je vais faire en fait est de frapper cinq juste pour que nous ayons des bords arrondis comme avec notre bouton. Donc la même chose ici. Et ce que nous allons faire, c'est utiliser ces autres éléments. Alors, sautons à l'intérieur et voyons ce que nous pouvons créer en premier. Voyons donc, les destinations vont être notre première. Eh bien, voyons voir. Nous pouvons l'utiliser pour les nations. Et laissez-moi changer ça très vite pour faire des choses. On va utiliser une lumière encore une fois. Et nous allons utiliser 18 cette fois, comme des points. Et nous allons en fait utiliser un gris clair, je pense. Et cela fonctionnera assez bien pour s' assurer que les deux sont centrés comme ça. Et je vais aussi utiliser cette icône de broche juste ici. Voyons où c'est et pourquoi je ne peux pas le voir. Alors vérifions ça juste ici. Voyez où il est. Je ne sais pas pourquoi je ne peux pas le voir. Essayons encore une fois. Donc épinglez les curateurs d'icônes et assurez-vous qu'il est gris clair, par exemple. Ou en fait, localisons dans l'autre ici c'est. Donc la destination que je peux désolée, j'ai choisi la mauvaise. Comme papa par exemple, voyons quelques distances entre eux. Je peux peut-être les inclure à 40 ans. Donc, 1, 2, 3, 4 et les destinations que nous pouvons également positionner pour être 40 comme ça. Et passons à l'intérieur de notre panneau de couches et de destinations de qualité comme ça. Enfin, ce que nous pouvons faire est de contrôler la position D juste ici. Il peut s'agir de type Journey, mais au lieu d'aligner au centre, Gardez-le aligné à gauche. Mon doute, ça s'appelle ce type de voyage comme ça. Et nous allons donc que ça soit dans le coin comme ça. Et voyons ce que nous pouvons faire ici est de remplacer cette icône de destinations par Python type Journey. Donc, voici simplement glisser-déposer à l'intérieur parce que c'est le composant va mettre à jour en temps réel. Tout simplement les morts sont 40 à droite, et c'est fondamentalement tout. Contrôlez D pour dupliquer celui-ci, déplacez-le vers le bas. Ce sera des activités comme ça. Mon père sélectionne cette icône, clique et localise les activités et glisse-la à l'intérieur. Assurez-vous que c'est 40. Alors 1234 ? Je l'ai fait. Et comme vous pouvez le voir, les noms se mettent à jour comme ils se doivent et changent parce que nous avons changé ces icônes, appuyez sur le contrôle D sur celui-ci, positionnez-le vers le bas. Cela va être recherché pour des voyages comme ça. Vache laitière, et utiliser celui-ci et rechercher des voyages. Voyons voir, nous pouvons utiliser cette icône de recherche comme ça et nous assurer que nous avons 40 comme ça. Enfin, ce que je vais faire est de dupliquer notre fond. Maintenant BG a frappé Control et D, et je vais en fait créer un bouton. Alors appelons-le appliquer BTM. Et voyons, nous pouvons lui donner une largeur de 36, 6 comme ça. Et donnons-lui la couleur principale comme ça. Et enfin positionnez-le ici et alignez-le avec notre grille. Ce que je vais aussi faire est d'utiliser Poppins 24 Lights, tapez simplement quelque chose comme appliquer des filtres. Mon mélange de saleté est aligné au centre, assurez-vous que c'est Poppins 24 centre. Et voyons où il est ici, assurez-vous que ces deux-là sont au centre. Et enfin, ce que je vais faire, c'est apporter quelques changements à entendre parce que je ne veux pas que ces deux coins soient arrondis. Donc je vais juste sauter ici et voir la race en haut à gauche à 0. Et en bas à gauche, qui est celui-ci, ramenez-le à 0. Nous avons donc ces deux aplatis et ces deux arrondis. Enfin, assurez-vous qu'ils sont au centre. Dr. Control G. et appuyez sur Appliquer Btn. Et nous l'avons là. Nous avons terminé cela. Maintenant, à l'intérieur de notre section de conception, nous allons vraiment sauter et organiser ceux-ci un peu mieux parce que je voulais toujours donner assez d'espace pour tout cela. Et nous allons les positionner plus tard en fait et inclure quelques séparateurs lorsque nous arriverons à l'étape de la conception plus tard. Mais pour l'instant, en fait, tu sais quoi, peut-être que je devrais m'occuper des cloisons tout de suite. Il est donc beaucoup plus facile pour nous de travailler sur eux. Donc, ce que je vais faire est sauter ici et de frapper coller sur l'un de mes diviseurs, que j'ai créé précédemment. Donc, vous pouvez voir la largeur est un, hauteur est de 70 comme c'est avec celui-ci. Ce sont les couleurs de remplissage. Donc fondamentalement la couleur que nous avons déjà. Et ce que je vais faire, c'est m'assurer que ce séparateur soit , par exemple, cent cent cent, par exemple, pixels de celui-ci. Comme mort. Il contrôle D. Et assurez-vous que ce soit 40. Ensuite, utilisez ce séparateur. Tout droit là. Assurez-vous qu'il s'agit également de 40. Assurez-vous que c'est 100. Enfin, assurez-vous qu'il s'agit également de 40 du diviseur. Et nous avons encore assez de place ici. Donc nous l'avons là. Permettez-moi de mettre rapidement la vidéo en pause pour que je puisse organiser ces séparateurs et ne vous ennuie pas trop. Donc, ce que j'ai fait est simplement inclus ces diviseurs dans leur dossier juste pour ne pas vous ennuyer trop. Enfin, permettez-moi de regrouper rapidement tout cela comme ça. Et appelons-le, par exemple, les bots maintenant. Parce qu'on a le nerf primaire, on a le fond maintenant, voyons, peut-être qu'on peut lui donner autre chose. Maintenant, gardons le bas maintenant et passons à autre chose. Maintenant, nous allons passer à ces articles qui seront fondamentalement les mêmes. Nous avons donc des offres spéciales. Nous allons avoir quelques textes ci-dessous. Alors créons ça très rapidement. Nous y voilà. Alors nous allons taper des offres spéciales. Je la saleté. Sautons à l'intérieur presque noir et donnons-lui un bus coda qui est positionné juste ici. Et semblons peut-être que nous pouvons même l'abaisser à 120 et l'ajouter ici. Et voyons ce qu'on peut en faire. Peut-être positionne-le à 150. Comme ça. Assurez-vous qu'il est au centre et organisons rapidement ces. Donc, ça va être la section supérieure. Tout ça. Comme les offres spéciales vont aller juste ici sous le contrôle D. Et voyons, pour celui-ci, ce que nous pouvons faire est d'utiliser Poppins 24 lumières comme ça, mais il suffit de le garder gris clair par exemple, ou gris foncé. C' est bien. Et j'ai simplement ajouté ici et assurez-vous de l' organiser juste un peu mieux pour que vous sachiez ce que vous faites. Assurez-vous qu'il est aligné au centre et au centre. Et nous allons effectivement copier et coller le texte du document original juste pour que nous puissions garder les choses un peu plus vite comme ça. Et voyons. On peut l'appeler, par exemple, titre de section, mon père. Et nous pouvons l'utiliser tout au long de notre conception. Donc ce que nous allons avoir ici, nos offres de première minute et nos offres de dernière minute. Alors allons de l'avant et créons ça. Laissez-moi dupliquer ça ici. Positionnez-le quelque part ici, assurez-vous qu'il est aligné à gauche et utilisons autre chose. Alors voyons pour ce texte peut-être que je peux utiliser 24 boulon. Voyez ce que c'est. Ici, c'est. Et nous allons utiliser la couleur bleue moyenne, alignée à gauche. Appelons ça à la première minute, d'abord Control D. et sélectionnons les offres de dernière minute. Et incluons ces icônes à l'intérieur. Alors voyons. J' ai mon chronomètre où il est. Donc, nous allons réellement taper l'icône du chronomètre. Ici, c'est. Et voyons, je pense que c'est l'horloge. Et c'est là. Donc, l'icône de l'horloge, donc pour les premières et dernières minutes, et sélectionnons tout cela. Et commençons par cette position ici. Assurez-vous que c'est au centre et assurez-vous qu'ils sont, par exemple, 20 les uns des autres comme ça. Et regroupez-le. Et revenez ici, appelez-le d'abord, il a besoin d'offres. Et faites la même chose pour celle-là. Alors assurez-vous qu'il est 20. Cela et le groupe offre et offre ma dette. Et c'est très bien. Positionnez la triade ici. Et ce que je vais faire, c'est sélectionner ces deux clips ici. Et voyons, assurez-vous qu'ils sont 80, par exemple, à partir de ce texte. Donc 1, 2, 3, 4, 5, 6, 7, 8. Maintenir mon Shift vers le bas. Et la section intitulée juste aller ci-dessous. Et comme nous avons 12 colonnes, cette section aura six colonnes de large. Cela va avoir six colonnes de large, alors assurez-vous de compter six. Donc 1, 2, 3, 4, 5, 6. C' est celui-là. Ils sont Harut et c'est déjà à gauche. Donc ce qu'on va faire en premier, c'est créer la carte que tu as vue. Donc offre carte, qui est ce juste ici. Alors, sautons à l'intérieur et créons ça. Vite. Donc je vais m'assurer qu'il fait six colonnes de large comme ça. 1, 2, 3, 4, 5, 6. Et c'est là. Et donnons-lui une démence. Donc 79 à avec 39, un comme ça. Et faisons-le glisser jusqu'ici et appelons-la carte d'offre. Avez-vous Dario et nous allons voir. Donnez-lui un coins arrondis ou cinq. Blanc pour la couleur de remplissage est bon. Donnons-lui une ombre de 55 et son. Et voyons, par exemple, nous pouvons faire que ce soit 5%. Par exemple, juste pour qu'il soit agréable et léger comme ça. Et voyons, nous pouvons aussi le positionner à partir de notre texte pour être 40. Comme ce troupeau laitier. Maintenant, nous allons créer une image, donc Control D. Et pour cette image, enlevons l'ombre et amenons la couleur. Alors fermons ceci et utilisons du gris clair parce que c'est la couleur que nous avons utilisée. Alors voyons pour la hauteur 39 un, c'est bon, mais pour la largeur trois, 66, je pense que c'est bon. Et voyons pour ces bords, donc pour le haut à droite, nous allons utiliser 0 parce que c'est celui-là en bas juste ici. En fait, on va aussi utiliser des zéros. Donc c'est comme ça. Maintenant, ce que je vais faire est de faire glisser cette icône d'étoile. Donc, c'est là. Et je vais utiliser une grille de répétition. Voyons 2345. Et c'est très bien. Voyons voir entre nos étoiles vont simplement avoir la distance. Ou par exemple, pour les pixels à quelque chose de vraiment petit. Ou peut-être que je peux utiliser cinq comme ça, ce qui est très bien. Il suffit de sauter à l'intérieur d'ici et de fermer notre grille de répétition juste au bord. Accédez à la grille de dissociation. Contrôle G pour les étoiles et cote de qualité comme ça. Et tu me connais, j'aime organiser les genoux. Donc vraiment rapidement il suffit de les organiser comme ils sont de gauche à droite. Et vous pouvez remarquer que toutes ces étoiles ont deux états, ce qui est la chose que j'ai créée aussi. Donc, c'est l'étoile originale et c'est les startups grises. Ainsi, vous pouvez montrer, par exemple, la notation à quatre étoiles, la notation à trois étoiles en activant simplement l'état gris, ce qui est extrêmement utile, évidemment, pour augmenter votre vitesse. Dézoomons un peu. Je vais me positionner ici. Donc Offer Card, IMG comme ça. Et voyons. Nous pouvons, par exemple, les positionner à 60 ans ici. Et voyons 60 comme ça, ce qui est très bien. Et nous pouvons, par exemple, les positionner à 20 du haut. Comme ça. Et maintenant, traitons des textes. Voyons donc que nous pouvons adapter t typing par exemple, ou sous. Et juste pour que nous ayons de vrais textes avec lesquels travailler. Et voyons, nous pouvons utiliser quelque chose comme 36, gras, aligné à gauche. Et utilisons presque la couleur noire juste pour le différencier de tous les autres. Ajouté pour entendre, positionnez-le juste en dessous. Et voyons pour l'espacement que nous pouvons utiliser 20 de nos étoiles, Control D. Et voyons ci-dessous, nous pouvons utiliser Poppins 18 lumière. Ici, il est, mais donnez-le juste dans cette couleur gris foncé. Et voyons, peut-être que je peux lui donner une distance de dix. Ça n'a pas besoin d'être trop. Et laissez-moi copier et coller ce texte dans les troupeaux laitiers. Et ce que je vais faire ensuite, c'est en fait créer un diviseur. Alors laissez-moi rapidement copier et coller mon séparateur à l'intérieur d'ici. Il est là. Et ce diviseur, trois cent quatre cent six. C' est la couleur, c'est la taille. Et vous pouvez créer cela divisé en utilisant simplement la ligne, cliquez sur maintenir, déplacer, leur habitude et vous pouvez changer la couleur ici. Là, nous l'avons. C' est notre diviseur. Maintenant, nous allons passer et contrôler la position D d'ici et assurez-vous qu'il est aligné à gauche 24 jours, par exemple, que ce voyage dure. Et voyons, Poppins 18 lumière. C' est très bien. Apportons maintenant l'icône du calendrier à l'intérieur. Comme ça. Voyons voir. Peut-être que je peux faire 20 ans. D' ici. Je le sais. Faisons en sorte que ceux-ci soient centrés comme R. Et peut-être 20 distance entre eux va être très bien, ce qui est juste ici. C' est génial. Et ce que je peux faire, c'est l'appeler jours et le regrouper et la qualité comme ça. Et nous allons le déplacer en dessous d'une note. Et déplaçons l'écrivain. Et il y a gada et le texte se déplace en dessous de la note aussi. Donc, maintenant, nous avons ce modèle organisationnel. Et ce que je vais faire, c'est faire glisser et déposer un peu plus de ces icônes. Donc d'abord, c'est l'avion, puis c'est le train, puis c'est la voiture, et enfin c'est le bus. Et vous pouvez voir que tous ont l'état non disponible et par défaut. Gardez-les à l'état par défaut pour l'instant pas disponible. C' est fondamentalement la même chose comme avec les étoiles, juste une couleur grise pour indiquer qu'il n'est pas disponible à choisir. Positionnons ici et assurez-vous qu'ils sont tous alignés correctement. Nous devons faire une fois cela et voyons, distance entre eux peut être quelque chose comme 28. Je pense que ça va marcher très bien. Alors organisons-les rapidement de cette façon. Tout d'abord, alignons cette icône ici. Et positionnons ça comme 20. Positionné est d'être 20 aussi bien. Puis enfin afficher l'icône pour être 20 aussi bien. Et je peux les organiser rapidement comme ça. Et très Howard Control G, je vais appeler ça le transport par là. Et déplacez-le juste ici où il est dit jours et quand utiliser un NANDA, faire plus large. Assurez-vous qu'il est 20 comme ça. Et enfin, je vais l'utiliser encore une fois, dépendre comme, voyons 18 lumière, c'est bon. Contrôle D une fois de plus. Et voyons, Poppins, 36 volts. On peut l'utiliser pour ça. Donc 1250 par exemple, voyons Poppins 36 gras, le bleu principal comme ça. Et enfin, nous pouvons déplacer ce soit par exemple, San en bas. Et ça peut aller de 20 ici. Et on est 24, on est 20. Et nous pouvons toujours les sélectionner et les organiser un peu mieux, ce que je vais faire maintenant. Donc, les transports, sélectionnez-les pour les déplacer jusqu'au bas, ce qui sera notre prix. Alors frappe Control G. Mon père, ça va être notre diviseur. Les jours de transport, les nouveaux types appellent ce milieu mon père. Voyons voir, on peut appeler cette info. Là, nous l'avons. C' est notre modèle organisationnel fondamentalement. Donc, ce que je vais faire est d'utiliser, par exemple, la pile pour ceux-ci. Donc, je peux inclure une pile comme celle-ci. Assure-toi juste que c'est celle-là. Mais ce que je peux faire, changeons ça. Je peux utiliser une pile pour ceux-ci comme ça, juste pour que je puisse augmenter l'espacement entre eux, les diminuer lorsque nous commençons à travailler avec le redimensionnement responsive. Et ça va être beaucoup plus simple à faire. Alors appelons ça au milieu. Parce que ce sera notre carte par défaut et nous allons copier et coller tout au long de notre conception fondamentalement. Alors traitons de ça. Et pour le prix, laissons-le comme il est. Alors organisons rapidement et regroupez-les. Ce sera, comme nous l' avons dit, une carte d'offre. Comme papa, nous avons des offres de première et de dernière minute et nous avons le titre de section juste ici. On est à 40 ans. Donc, ce que nous pouvons faire est en fait d'utiliser la grille de répétition. Une dernière chose que j'ai oublié, c'est que nous allons ajouter la flèche juste ici, le bas. Alors utilisons-nous ça. Appelons ça Rho, Vg. Positionnons tout le chemin jusqu'ici. Déplaçons le vers le bas, par exemple. Assurez-vous qu'il est juste ici. Et voyons pour la taille, allons-y avec la largeur de 82 et la hauteur de 98, par exemple. Comme ça. Mettez-le ici et nous allons nous débarrasser de notre frontière. Voyons voir, on va lui donner la couleur bleue principale. Et voyons, peut-être que nous pouvons utiliser la mosquée. Donc Control D. Et voyons pour la largeur que nous pouvons aller avec dix par exemple. Et assurez-vous qu'il est juste ici. Et tout cela va avoir du sens dans une seconde. Et voyons, je vais simplifier et une flèche droite ici est glisser et déposer à l'intérieur. Assurez-vous qu'il est centré. Et je vais simplement les sélectionner. Trouvons ma flèche droite. Ici, c'est juste ici. Donc nous avons ça, que nous allons appeler Mask. Et ce que nous allons appeler, Voyons voir, flèche BG, ce qui est très bien. Sélectionnez tous, appuyez sur Maj Control M. et juste cette section sera à gauche, juste ici. Et on peut l'appeler flèche. Donc, cela peut être, par exemple, notre état par défaut et nous pouvons plus tard Inclus pour être notre état Horace par exemple, juste pour développer cette section afin que nous puissions voir toute la flèche. Et cela peut être l'état par défaut, juste pour que nous puissions voir cette section. Maintenant que la carte d'offre est terminée, ce que nous pouvons faire est d'utiliser la grille de répétition par exemple. Ou vous pouvez simplement contrôler D sur celui-ci. Contrôle D. Sélectionnez ceci à trois Contrôle D et placez-le juste ici. Je vais mettre la vidéo en pause et organiser. Et maintenant que c'est fini. Donc d'ici à là, ça va être le dernier. Ce que nous allons faire, c'est passer à autre chose et je vais ajouter ces boutons. Donc, pour les fonds eux-mêmes, Utilisons notre outil rectangle et allons avec trois colonnes de large, par exemple. Et voyons, nous pouvons l'appeler, par exemple, gros bouton. Et ça va être btn. Et Biji, comme ça. Nous allons utiliser des couleurs, donc même configuration, donc BTN être grande couleur. Donc, sans aucune bordure, avec la couleur de remplissage de vol stationnaire comme ça. Et nous allons aussi utiliser un texte et tout. D' abord, la maintenance. Poppins 24 lumière est ce que nous pouvons utiliser. Lequel est celui-ci ? Oui. Et mettez-le, assurez-vous qu'il est bleu. Et pour ces deux-là, nous allons avoir cinq ans comme ça et nous assurer que ce texte est également sélectionné. Ça va être comme ça. Et ça va être gris au début. Tellement gris foncé. Et puis nous allons passer à autre chose et l'ajouter pour être blanc à l'intérieur de notre couleur de vol stationnaire. Donc Contrôle G. Voyons voir, et on peut appeler ça gros et btn. Et voyons. Je peux le positionner juste en dessous de ces trois là. Donc à la première minute, Voyons voir, peut-être que nous pouvons le positionner comme un T comme ça. Voyons voir. En fait, ce que je peux faire est d'utiliser ceci dans un état normal et de lui donner une hauteur d'un comme ça. Mais assurez-vous que c'est comme ça. Et ils sont frappés sur le contrôle K et ils lui donnent un état d'horreur, comme des morts. Et c'est ce qu'on a dit, 72. En fait, il devrait être 70. Alors passons à l'état par défaut. Donc 70 que cela devrait s'aligner et cela devrait être juste ici. Et assurez-vous qu'il soit là. Là. Nous l'avons à l'intérieur de l'état d'horreur. Ici, il est juste ici, simplement étendu tout le chemin jusqu'à 70. Et l'augmentation de l'obésité dans ce sera, voyons, troupeau laitier blanc. Et nous pouvons le tester rapidement en appuyant sur ce bouton d'aperçu juste ici. Et quand je descends et que je survole, tu peux voir à quoi ressemble notre bouton. Je vais en fait sauter et éditer dans ce bouton Hero aussi, qui est celui-ci. Hero Texts Héros bouton état par défaut, leur réalité dans l'état par défaut, nous allons avoir ce soit à la hauteur un pour la couleur. Et il suffit de le positionner pour être sur le bord inférieur. Et nous allons créer un état d'horreur comme ça. A l'intérieur de l'état d'horreur, nous allons l'étendre à 70, augmenter l'opacité du troupeau laitier. Et maintenant, si nous frappons aperçu, et nous voilà. Lorsque nous survolons, vous pouvez voir qu'il a l'air vraiment agréable et cohérent. Et aussi ce bouton fonctionne bien. Maintenant enfin, parce que nous avons ce deuxième bouton, qui est notre gros bouton, ce que je vais faire, c'est simplement tenir ma vieille clé, positionner la juste ici. Assurez-vous que c'est tout le chemin vers la droite, comme si c'était juste ici. Et déplace-le ici. Je vais aussi le faire. Donc dernière minute jusqu'à ici, première minute ici, et ensuite regrouper ces. Donc première minute. Et je vais regrouper toutes ces colonnes limites aliasées comme ça. Et là, nous l'avons, notre section est terminée. Ce que je peux faire maintenant est de créer rapidement une section vidéo ici. Et pour cette image de héros, je ne sais pas pourquoi elle n'est pas entrée dans nos sections supérieures, alors déplacons-la à l'intérieur de là. Leur réalité. Et je peux faire une copie frapper la position de contrôle D et la positionner à l'extérieur juste ici. Assurez-vous que nous le sommes, voyons 150 par exemple. Nous disons comme ce qu'il y a ici. Et voyons, nous pouvons appeler cette première section offres spéciales parce que nous avons cela. Regroupez tout ça, appuyez sur Contrôle G. Appelez ça des offres spéciales comme ça. Et nous allons appeler ceci, par exemple, vidéo, arrière-plans ou vidéo promotionnelle, encore mieux. Vidéo promotionnelle. Et voyons pour la hauteur pour cela, Allons-y avec 600. Nous en sommes encore à 150. Je vais localiser l'icône de jeu. Icône de jeu ici est juste ici. Et je vais réellement les sélectionner pour m'assurer que l'icône Play est au centre. Et si je touche aperçu une fois de plus très rapidement, ce que vous allez remarquer qui a réellement créé un effet de survol pour le bouton Affichage. Donc, j'ai simplement ajouté un mouvement pour l'icône elle-même et afficher à l'intérieur. Je l'ai rendu un peu plus grand. Et j'ai aussi des critères, vous avez l'opacité de 0 pour la couleur de fond. Et en vol stationnaire, vous avez l'opacité de je pense, 50 ou 60 ou quelque chose comme ça. Donc, fondamentalement, ce sont les choses que vous pouvez faire avec vos icônes juste pour pimenter les choses un peu. Nous pouvons donner à cela un nom de vidéo promotionnelle par exemple. Et passons maintenant à la section suivante, qui sera pour la destination. Je vais mettre la vidéo en pause ici et revenir à vous dans la prochaine vidéo parce que vous pouvez voir qu'il y a beaucoup à faire ici. Et, mais encore une fois, ces cartes ressemblent vraiment à ces cartes que nous venons de créer. Alors peut-être que nous pouvons les utiliser et les éditer de manière à mieux les organiser et les réutiliser ici. Alors je te verrai là-bas. 16. Créer des Wireframes dans Adobe Xd 3: Bon, continuons là où on s'est arrêté. Et comme vous pouvez le remarquer, cette page nous emmène beaucoup de vidéos à compléter parce que c'est vraiment énorme. Et si je vous ramène à nos fils de papier, bien sûr, c'est le plus gros. Mais dès que nous aurons tous ces composants principaux, vous remarquerez non pas seulement dans cette conception, pas seulement dans cette conception, mais tout au long de vos conceptions ou rouleaux, certains de ces composants et éléments vont changer, vont additionner et vous allez finir par les réutiliser tout le temps. C' est pourquoi la première page prend toujours beaucoup de temps à compléter parce que vous allez ensuite passer à toutes ces autres pages. Maintenant, comme je l'ai dit, nous allons maintenant commencer avec ces destinations et nous allons commencer avec ces cartes. Donc, fondamentalement, nous allons juste utiliser celui-ci et le réutiliser. Tout d'abord, nous allons en fait entrer ici. Appuyez sur le contrôle C sur le contrôle de titre de section, repositionnez-le ici. Et je vais utiliser ma touche Maj et la déplacer jusqu'ici. Je devrais en fait faire la prochaine fois, l'utiliser ci-dessus et ensuite le déplacer vers le bas. Donc, fondamentalement, nous allons être à 150, comme avec ceux-ci. Et au lieu d'offres spéciales, nous allons écrire des destinations européennes comme la saleté. Et je vais simplement copier et coller du texte de mon dessin original comme ça. Et là, nous l'avons. C'est encore une fois le titre de notre section. Maintenant, la première chose que nous allons faire est de copier une de ces cartes. Alors appuyez sur Control C, Control V Eden et déplacez-le simplement comme ça. Je devrais le faire la première fois. Alors maintenant, nous allons vraiment les positionner. Alors peut-être qu'on devrait le positionner à 80. Donc 80 maintenez mon Alt ou Option. Vous pouvez voir qu'il est à 80, ce qui est très bien. Et maintenant ce que je vais faire est en fait appelé cette carte de destination comme ça. Et ce que je vais faire, c'est de le réduire jusqu'ici. Assurez-vous qu'il est 36, 6 comme de la saleté, et assurez-vous qu'il est, par exemple, 690 en hauteur comme ça. Pour l'image, voyons, nous pouvons appeler cette image de destination comme ça. Et pour cela, voyons, 36 six, c'est bon, qui à 60. Mais maintenant, nous avons le même problème encore une fois. Nous allons donc devoir arrondir un bord supérieur gauche et supérieur droit. Donc en haut à gauche, en haut à droite, cinq, et ces deux-là nous allons garder à 0. Maintenant, enfin, nous allons utiliser toutes nos informations et notre flèche aussi, donc tout, et assurez-vous de le déplacer juste ici. Et voyons voir. Maintenant, je peux le déplacer 40 vers le bas. Donc 1, 2, 3, 4 sont morts. Et voyons, c'est là que notre courant de destination se termine, ce qui est très bien. Et fondamentalement c'est tout. La seule chose que nous allons faire est, par exemple, de déplacer tout cela, à l'exclusion de la flèche, donc elle va rester là où elle est. Déplacez donc tout 10 pixels vers la droite. Comme ça. Juste pour que nous nous donnions un peu plus d'espacement. Donc ce que nous sommes ici, nous en sommes à 43 ans, donc nous pouvons arrondir un peu. Donc, trois pixels vers le haut, par exemple, la source 6, 8, 7 va mieux fonctionner pour nous comme ça. Voyons voir, nous sommes à 40 ans et c'est bon. C' est à 40 d'ici. Voyons donc, c'est 20, c'est 20, c'est 40, ce qui est très bien, vous savez, c'est comme arrondir mes valeurs et descendre au point décimal parce que c'est beaucoup plus simple Dan, passer à autre chose et de créer plus. Appelons ça la destination, comme ça. Laissons-les tous au gala parce que c'est beaucoup plus simple et plus rapide pour nous de le faire. Comme je l'ai dit, vous pouvez utiliser la grille de répétition. Je ne vais pas le faire, je vais simplement frapper le contrôle D. Control D une fois de plus. Contrôle D. Et vous me connaissez, je vais les garder organisés comme ça. Voyons voir, c'est notre premier. Déplacez-vous vers le haut. Deuxièmement, 1, troisième, 1, quatrième, 1, c'est bon. Et nous allons avoir ce bouton juste là. Donc gros bouton, faites glisser et déposez-le ici. Positionnez-le ici. Et voyons, peut-être que nous pouvons plus de largeur pour être à 80, comme des dettes. Et au lieu des premières minutes, nous allons écrire dans toute l'Europe, des voyages comme ça. Ils vont s'assurer que c'est centré. Sautez à l'intérieur. Et nous allons nous assurer qu'il est positionné au centre double-cliquez sur Contrôle C parce que je veux copier ce texte. Passez au domaine d'horreur et Control V à l'intérieur. Assurez-vous que cela est également centré. Et assurez-vous qu'il est situé au centre. Alors maintenant, ça marche. L' un des n vous survolez aussi. Donc je vais le déplacer jusqu'ici. Et appelons ces GIL de contrôle. Ça l'appelle des CT. Parce que ce seront en fait des villes. Et nous allons nous assurer que nous utilisons le défilement horizontal plus tard, mais pour l'instant nous allons juste le garder tel quel. Enfin, ce que je vais faire est d'utiliser à nouveau ces flèches. Donc flèche gauche et flèche droite, Voyons voir. Et peut-être qu'ils peuvent même sauter à l'intérieur d'ici. Et voyons, ils sont là. Mais nous allons les créer pour être avec la couleur bleue comme ça. Et je fais ça pour nous faire gagner un peu de temps. Alors faites glisser et déposez-les ici et assurez-vous qu'ils sont au centre. Donc, les flèches et le gros bouton comme ça, les produits laitiers sont, donc nous sommes à 80 ans encore du haut. Et fondamentalement, ces flèches sont exactement les mêmes que ces top, mais aujourd'hui ont juste cette couleur bleue à l'intérieur. Et si je clique sur ma flèche gauche, vous pouvez voir sur l'état de vol stationnaire, la seule chose qui a changé est la taille de la flèche à l'intérieur et aussi l'opacité de la couleur de ce cercle. Donc, c'est fondamentalement tout. Et vous pouvez obtenir ces flèches du fichier de projet et voir comment j'ai fait cela. Encore une fois, je le fais juste pour augmenter la vitesse à laquelle je crée ces vidéos. Contrôlez G et nous allons l'appeler les destinations européennes. Donc, permettez-moi de copier et de coller cela à partir de mon document d'origine. Là, nous l'avons. Maintenant en dessous que nous allons avoir une autre section, donc Contrôle D et assurez-vous que nous sommes à 150. Encore une fois, double-cliquez ici, étendez ça, déplacez ça, et nous allons appeler cette Afrique ensoleillée. Mon père. Voyons voir. Je peux vraiment sauter comme ça et me laisser copier le texte original et le coller ici. Donc signer l'Afrique, et comme je l'ai dit, nous allons juste quitter ces destinations pour l'instant. Parce que nous voulons passer à la section suivante de notre page, qui va réellement être réservé votre voyage de rêve. Et si je vous emmène ici, vous pouvez voir réserver votre voyage de rêve. Ceci est le texte gratuit citation, image avec le fond de couleur. Donc, nous allons travailler sur ça très rapidement. Comme ça. Commençons donc par l'image elle-même, par exemple. Je peux le positionner là-dedans. Et voyons pour l'image, utilisons quelque chose comme 930 avec 560. Et voyons, nous pouvons aller sans bordure et pour la couleur de remplissage, nous pouvons utiliser la même couleur une fois de plus. Alors voyons. On peut le positionner ici et contrôler D une fois de plus. Et positionnons ça vers le bas. Donc, cela va être bleu, bleu principal, de sorte que le fond coloré. Et pour ses dimensions, Utilisons 930, largeur 560. Donc, fondamentalement, la même chose. Ce que je vais faire est positionné en 40 pixels vers le bas. Donc, Maj 1, 2, 3, 4, et voyons sur 34 de droite à gauche aussi. Et donnons-leur des noms. Donc, cela va être un voyage de rêve, IMG, et cela va être voyage de rêve et couleur bg, juste pour que nos développeurs sachent ce que c'est, discipline de contrôle G d'être notre image. Plus tout le chemin vers le bas. Et maintenant, nous allons travailler sur notre texte. Donc, pour nos textes, Écrivons dans quelque chose comme le livre, votre rêve, voyage avec nous. Et pour le texte et la taille, Allons-y avec celui-ci. Allons avec la gauche alignée, et allons-y avec quelque chose comme ça pour l'instant. La position est quelque part par ici, Contrôle D. Et voyons ce qu'on peut utiliser. Et ci-dessous, nous pouvons utiliser Poppins lumière 24 et gris foncé comme ça. Donc, je ne fais que copier le texte de mon document original et je vais m' assurer que j'ai 40 ans juste pour augmenter notre vitesse un peu. Et enfin, nous allons utiliser ce gros bouton une fois de plus, glisser-déposer ici, positionner juste ici. Et voyons, peut-être que nous pouvons positionner ça à 80, juste pour nous donner un peu plus d'espace. Et à l'intérieur, nous allons écrire et obtenir des devis gratuits et nous assurer que nous sommes dans une position centrale C pour être au centre. Cliquez sur coupe de cheveux laitiers, et aller à l'état d'horreur, centre de pâte. Comme ce centre, l'habitude laitière centrale et l'état par défaut. Ce qui est sûrement peut faire est d'éditer mon composant principal, qui est celui-ci. Et je peux sauter ici et m'assurer que mon texte est centré. Je peux sauter dans mon état d'horreur, assurer que mon texte est aligné au centre. Et donc, chaque fois que je copie ce composant, comme je l'ai fait ici, par exemple, il va être centré donc je n'ai pas à le refaire tout le temps. Donc, nous l'avons là. Ça va être du texte. Voyons voir, par exemple, je peux m'assurer que c'est au centre de notre image comme ça. Et juste sur le dessus et les troupeaux laitiers. Donc, ce que nous pouvons faire est de le dégrouper, appeler le contenu, puis lui donner une pile comme ça, juste pour que plus tard, quand nous voulons changer de place avec eux, par exemple, solide dire que je veux déplacer cette image ici. Vous pouvez voir à quel point c'est facile à faire, ou encore mieux si je veux utiliser une pile comme celle-ci ou les repositionner comme ça, vous pouvez voir comment les zones simples pour notre mise en page et cela va nous aider énormément. Mais mettons-le dans un autre groupe juste pour que nous sachions ce que c'est. Réservez, votre voyage de rêve. Et donnons à cela une section qui nomme L, c'est maintenant plus une. Et ce que nous allons avoir nos deux autres de ces sections. Mais d'abord, voyons où nous en sommes avec l'espacement. Alors voyons. 150, rétrécit. Et je vais simplement les utiliser pour frapper le contrôle D et les positionner comme ça. Position, tous vers le bas. Cette première s'appellera l'Asie mystique. Et le second s'appellera Beautiful Americas. Donc, nous allons réellement utilisé du texte pour mon fichier d'origine. Trouve chez. Donc, comme je l'ai dit, cela signifiait être une Asie mystique. Permettez-moi de copier rapidement et le texte original. Collez ça ici. Et enfin quatre. Et ça va s'appeler Beautiful Americas, comme ça. Et laissez-moi copier et coller dans le texte original au savon. La prochaine chose que je vais faire, qui va nous faire gagner beaucoup de temps ou plus tard, c'est que vous pouvez voir que nous avons tous les voyages en Europe. Donc je vais sauter ici, appelez ça tous les voyages africains. Sautez dans l'état d'horreur des voyages africains. Et Depakote. Et maintenant, nous devons le faire pour tout ça. Donc toute l'Asie. Et je sais que c'est fastidieux, mais ça va nous faire gagner beaucoup de temps plus tard quand nous commencerons à concevoir. Parce que beaucoup de ces éléments vont en fait finir chercher tous prêts de l'Amérique. Et voyons, peut-être qu'on peut ajouter un S ou toute l'Amérique. Là. Nous l'avons, notre état et leur troupeau laitier. Et c'est fondamentalement tout pour cette section. Et voyons, peut-être qu'on peut ajouter une autre section. Oui, ajoutons une sous-section pour cette vidéo et ensuite on passera à la suivante. Donc, nous allons ajouter cette section, fondamentalement une. Encore une fois, nous allons avoir ces cartes et nous allons avoir ces flèches. Donc, nos meilleures destinations, et nous allons avoir un autre texte ci-dessous. Et puis nous allons ajouter ces deux flèches, que nous avons déjà aujourd'hui, non ? Alors passons maintenant dans une annonce et une dose. Donc, ce que je vais faire est de double-cliquer dans Control D, déplacer en dehors de la position du titre de section, c'est quelque part par ici. Et laissez-moi vraiment sauter à l'intérieur d'ici. Et voyons voir. Je peux m'assurer qu'il est aligné à gauche. Voyons voir. Nous pouvons écrire dans quelque chose comme notre top, ces Nations. Et je peux sauter et changer ce texte, assurer qu'il est aligné à gauche. Positionnez-le vers la gauche. Voilà, tu y vas. Et je peux sauter à l'intérieur d'ici. Utilisez le contrôle D avec les flèches et déplacez-les simplement hors de cette section et assurez-vous qu'ils sont au centre, par exemple, ici et déplacés vers la droite, juste là. Parce que ceux-ci ont les points de robinet, je vais simplement les pousser au bord. Et le point de touche est fondamentalement juste un carré vide afin que vous puissiez utiliser vos animations plus tard. Donc, ce que vous pouvez faire est simplement de faire glisser une zone où vous voulez que vos utilisateurs tapent et simplement cacher à la fois le remplissage et la bordure. Il est donc beaucoup plus facile que pour eux de taper dessus puis de taper sur l'icône d'origine. Donc nous allons garder ces deux-là et passons à autre chose. Et je vais prendre une de ces cartes. Alors utilisons-nous celui-ci. Contrôle C, contrôle V. Assurez-vous que je le déplace en bas de la position jusqu'ici. Carte de destination. Oui, ça marche bien. Allons-y avec AT une fois de plus. Donc quelque chose comme ça. Et au lieu de toutes ces informations, ce que je vais faire en fait, c'est que je vais faire glisser ceci pour avoir quatre colonnes de large et faire glisser ceci pour être quatre colonnes de large aussi. Ce que je vais faire, c'est laisser ce texte à l'intérieur, donc je vais supprimer la note. Je vais renommer ça en texte comme ça. Et je vais m'assurer que les deux sont centrés, alignés comme ça. Je vais me débarrasser de cette section du milieu et je vais me débarrasser de la flèche aussi. Je vais laisser le prix tel qu'il est, mais je peux simplement les positionner dans une pile, assurer qu'ils sont comme ça. Et voyons pour ça, peut-être que je devrais les positionner pour être à 40 ans. Donc quelque chose comme ça. Voyons voir. Je peux m'assurer qu'ils sont à 40 ans. Encore une fois, ce texte va de la gauche. Ce texte va de la gauche. Donc, ce que vous tapez ici va toujours rester au milieu. Alors passons maintenant et positionnons-le dans la position centrale ce texte au centre aussi. Assurez-vous que cela est correctement au centre, comme ça ou vous pouvez réellement les positionner à l'extérieur. Cliquez ici, puis juste ici. Et puis sélectionnez simplement ces deux frapper Control G et assurez-vous qu'ils sont appelés à nouveau le texte. Ce que je vais faire, c'est donner à cela le nom des Maldives, par exemple. Et je vais lui donner un peu plus de textes. Et je vais aussi m'assurer qu'il est fixé en taille. Il est beaucoup plus facile que de mettre à l'échelle ce texte et de le déplacer vers le bas et d'inclure toutes ces informations supplémentaires. Ce que je vais faire, c'est leur donner les espacements de 40. Comme ça. Assurez-vous que mon texte est de 40 à partir de mon prix. Ensuite, je vais m'assurer que mon prix et toutes mes informations sont 40 du bas, comme si c'était juste ici. Et enfin, je vais m'assurer que c'est un peu plus étroit parce que je n'ai pas besoin de cette hauteur solide S5 et S6. Voilà, tu y vas. Et maintenant, je vais utiliser cette information. 234 laiterie Herat, Il est 40 du haut et nous allons vérifier rapidement. Donc notre image va être de 260 en largeur, ce qui est très bien. Et Terry habitude, nous avons notre voiture de destination, qui est à 80 du haut. Contrôle D, assurez-vous de créer une copie Contrôle D pour créer une copie, et là nous l'avons. Alors laissez-moi les organiser rapidement. Sélectionnons-les tous. Appuyez sur Contrôle G. Maintenant, appelons-le les emplacements par exemple, comme ça. Et là, nous l'avons. La seule chose qu'il nous reste à faire est évidemment de veiller à ce que ce soit 150. Comme tous ces autres. Long tableau juste ici. Et je vais aussi étendre ça beaucoup. Et clairement, vous pouvez voir que c'est la raison pour laquelle cette vidéo prend tellement de temps à créer est à cause de toutes ces sections supplémentaires que nous continuons à ajouter, ajouter et étroit semble à. Et fondamentalement, c'est tout pour cette vidéo, on va continuer là où on s'est arrêté dans ce, dans la précédente, dans la vidéo suivante. Et nous espérons finir cette première page. 17. Créer des Wireframes dans Adobe Xd 4: Bon, continuons maintenant. Et la prochaine section que nous allons créer est en fait des témoignages. Et si je vous emmène aux témoignages eux-mêmes, vous pouvez vous voir. Alors le voyageur aime, aimez-nous. Et c'est un autre texte. Nous allons créer cette section avec les flèches, sorte que vous pouvez voir clairement que les flèches apparaissent à nouveau. Donc, commençons copier cette section en haut ou même varier parce que son centre aligné, nous allons utiliser cette section. Contrôle C, Contrôle V, et positionnez-le jusqu'ici. Donc 150 endroits, nous l'avons. Donc, je vais en fait copier et coller ce texte juste pour garder les choses agréables et lisses et rapides. Là, vous l'avez. Donc la première chose que nous allons faire est de créer cette carte. Alors donnons-lui quelques dimensions et quand utiliser, voyons, 10 8000. Je pense que c'est bien au centre. Et voyons, peut-être que je peux le positionner à 80. Et juste pour que nous ayons un peu de cohérence, nous allons le garder à cinq heures. Nous allons enlever la frontière, inclure une ombre de 55, 10. Et voyons, on peut en utiliser cinq. Donc fondamentalement les mêmes paramètres que pour toutes ces autres cartes. Donc c'est fondamentalement ça pour ça. Appelons ça la carte de témoignage. Mon père contrôle D. image de témoignage. Et voyons pour l'image, nous pouvons lui donner une largeur de trois 66. Et voyons voir. Nous pouvons, par exemple, laisser le haut à gauche et le bas à gauche à cinq, et ces deux seront à 0. Donc fondamentalement, juste ces deux-là. Et donnons-lui une couleur juste pour que nous sachions avec quoi nous travaillons. Là, nous l'avons. Et voyons, donnons-lui un nom. Par exemple, James Martin. Parfois qui s'assurent qu'il est aligné à gauche. Voyons donc 36 gras, ce qui est très bien. Et donnons-lui une distance de 60, par exemple, de cette image. Mes données sont essentiellement alignées sur cette grande ligne Control D. Et je vais évidemment m' assurer de copier et coller cela parce que je ne veux pas vous ennuyer ce sera, voyons, cette couleur va être Poppins 18 de cela. Et faisons glisser et positionnons et véritable témoignage à l'intérieur pour que je ne t'ennuie pas avec ça et donnons-lui une distance de 40, comme ça. Et une dernière chose, je vais à Control D encore une fois et écrire la destination où ils ont vraiment traîné. Alors voyagé en Oregon. Et ça va être notre bleu principal. Et voyons, par exemple, 40 directement à partir d'ici et assurez-vous que tous ces éléments sont centrés avec notre image. Là, vous l'avez. Organisons-les maintenant rapidement comme ça et comme ça. Et ça va être un texte. Positionnez-le sous notre image. Et voyons une carte de témoignage. Je l'ai fait. Et ce que je vais faire, c'est utiliser à nouveau ces flèches. Alors assurez-vous de les sélectionner à partir d'ici, de contrôler C, contrôler V, et de les positionner jusqu'ici quelque part. Et voyons, je peux les aligner avec ma carte en fait ici. Et voyons, je peux vraiment créer ces chiffres. C solide Par exemple, j'ai oublié de supprimer l'ombre de mon image, et c'est pourquoi elle montre une double ombre. Donc, nous allons créer ce texte 0, 1, et cendres et 0 pour, par exemple, les distorsions 36, gras, c'est bien, juste cette couleur, assurez-vous qu'il est aligné à gauche mix devrait se positionner ici. Et enfin, positionnons-le à 80, par exemple. Comme ça. Assurez-vous que nos flèches sont au centre. Ou simplement utiliser ceci. Vérifiez-le AT et là nous l'avons. Nous allons traiter ce texte un peu plus tard. Donc, nous n'allons pas y faire face maintenant, une fois que vous avez réellement atteint la partie de conception, je vais créer plusieurs cartes et ensuite nous pouvons jouer avec elle et éditer. Voyons donc, nous sommes 80 de nos icônes, ce qui est très bien. Ce qu'on appelle ça des témoignages. Mon père. Et passons à la section suivante, qui sera, si je vous emmène ici, cette section. Donc nous allons avoir ces trois cartes dans une sorte de grille de Mansouri. Et nous allons donner une âme bien-être croisières et le ski. Donc, traitons les données très rapidement. Et voyons, nous pouvons les appeler, par exemple, des catégories de voyage ou quelque chose comme ça. Voyons donc pour les catégories de voyage, je peux créer ces trois cartes. Alors faisons ça maintenant. Comme ça. Donnons-le, par exemple, la catégorie des troupes. Courant que j'ai fait. Et donnons-lui une largeur de six colonnes. 3, 4, 5, 6, qui est ceci, ce qui est bien. Et voyons, pour la hauteur, passons la semaine à 420, et allons-y avec cinq. Et nous allons utiliser tous ces mêmes paramètres. Donc 55, 10, et donnons-lui l'ombre de fond, opacité de cinq, ce qui est très bien. Ensuite, je vais m'assurer qu'une image de carte de catégorie de voyage dupliquée. Parce que l'image va être sur le dessus comme ça. Et nous allons également ajouter une superposition de couleur plus tard. Mais je peux aussi l'ajouter maintenant, mais je ne vais pas le faire parce que je ne vais pas vous déranger avec tous ces détails. Nous allons le laisser pour le design lui-même. Alors voyons. Ce que nous pouvons faire ici, c'est en fait copier ce texte. Donc le contrôle des prix C, contrôle V, et assurez-vous que je l'ai traîné tout le chemin juste ici. Et voyons voir. Ce qu'on peut écrire à l'intérieur d'ici commence. De, et vous pouvez évidemment voir les avantages que et l'utilisation sous redimensionner responsive et pile nous donne parce qu' il est beaucoup plus simple d'aligner et d'ajouter et de modifier tous ces changements. Donc 2450 et voyons, je peux, par exemple, positionner ce n'est pas 60 du bas. Voyons voir. Donc quelque part par ici, disons. Donc 40 et 40, ce qui est aussi bien. Déplaçons-le ici. Et voyons ce que je peux faire est de sélectionner ce texte, par exemple, Contrôle C, Contrôle V. Assurez-vous qu'il est quelque part ici, positionnez-le juste au-dessus de notre prix. Et voyons voir. On peut s'assurer qu'il est blanc là-bas. Et voyons, nous pouvons le positionner à 20 et l'aligner. Assurez-vous qu'il est aligné à gauche et alignez-le vers la gauche avec le prix lui-même. Et voyons, nous pouvons utiliser quelque chose comme un bien-être et des troupeaux laitiers. Et donnons-le vrai. Mais vous incorporez un appel il un voyage de bien-être. On va faire le contrôle D, s' assurer que c'est en panne. Voyons voir, peut-être qu'on peut lui donner un 60, quelque chose comme ça. Et on va appeler ça croisières. Mon père et dit que nous voulons changer ça à 240, par exemple, comme ça. Là, nous l'avons. Et faisons aussi un duplicata qui va aller sur cette page et sauter ici. Et assurez-vous que nous les étendons au sommet. Et voyons par combien. Par exemple, nous pouvons nous assurer que c'est la hauteur de, voyons, 900. Comme ça. Ils sont Harut. Et ici, nous allons écrire, skier. Et à partir de quelque chose de plus petit comme un 40 centimètre qu'ils sont entendus et la position descendre vers le bas. Le ski. Et ça va être Wellness. Ça allait être des croisières, ce qui est très bien. Ce que nous pouvons faire, c'est regrouper ces trois catégories de voyages. Assurez-vous que nous sommes à 150. Voyons voir 150 nous sommes, ce qui est très bien. Ensuite, ce que nous pouvons faire est de créer un autre titre de section Contrôle V. S'assure une fois de plus que nous sommes à 150, positionnez-le tout le chemin vers le bas. Et nous allons appeler ça nos partenaires. Et je suis allé copier dans le texte, le coller dans. Et ce que je vais faire est de sauter à l'intérieur et de copier et coller les logos des partenaires, qui ont effectivement utilisé, parce que ce ne sont que quelques logos fictifs que j'ai trouvés en ligne. Et évidemment, vous pouvez utiliser quelque chose comme Envato Elements pour trouver des logos plus professionnels. Ou encore mieux si vous travaillez avec le client réel, demandez-lui simplement leurs logos. Ce que j'ai fait ici, c'est vous pouvez voir que j'ai utilisé le défilement horizontal, qui sera évidemment utile plus tard quand nous commencerons à faire défiler entre tous ces éléments. Donc, fondamentalement, appelons cette section nos partenaires, par exemple, les habitudes laitières. Et ce que je vais faire ensuite, si vous vous souvenez de notre filaire, nous avons une autre section qui est exactement la même section que celle-ci, juste retournée. Et on va le faire. Alors appuyez sur le contrôle D. Bien sûr qu'il est 150 et positionnez tout le long. Donc ce que nous allons appeler c'est un voyage parfait pour tout le monde. Et nous allons en fait sauter à l'intérieur du contenu, changer comme ça, et nous assurer qu'il est aligné comme ça. Et maintenant, nous pouvons travailler sur ce contenu supplémentaire. Alors laissez-moi copier et coller le texte à l'intérieur. Donc, plus vous obtenez un devis de requête reste maintenant le même. Mais c'est fondamentalement l'avantage de l'utiliser. Mais ce que je veux faire est vraiment ajouter rapidement l'image à ici et ensuite pousser ce 40 vers la droite. Comme ça. Et simplement, par exemple, alignez mon texte avec ma ligne de grille. Vous pouvez le voir ici. Donc fondamentalement 16, trois, juste pour que j'ai un peu plus d'espace pour jouer, assurez-vous que c'est 150, c'est. Et toutes les habitudes. La prochaine chose que je vais créer est le taux de change. Mais je suis, je ne vais pas vraiment le créer. Je vais copier et coller, positionner en place. Assurez-vous qu'il est juste ici donc aligné sur la grille. Et je vais vous expliquer comment je l'ai créé que vous puissiez jouer avec si vous le voulez. Troupeau laitier. Donc, fondamentalement, le texte va rester exactement le même qu'il est. Donc, popping 36 gras, c'est 24 lumière. Mais en termes de ceux-ci, donc pour les devises, ce que nous avons sont l'euro, USD, la grande livre britannique, franc suisse, le rouble, et le Japon pour le yen. C' est ce que nous avons ici et comment je les ai créés. Eh bien, tout simplement, si vous vous enregistrez ici, vous pouvez voir que l'euro est 120, le blé 80. Donc ce que je peux faire, c'est sauter en dehors de ça. Donc 120 avec un deux et je peux enlever la frontière. Et ce que vous pouvez faire est de sauter ici à vos plugins. Et vous avez un plugin appelé logos de l'interface utilisateur. Vous pouvez cliquer dessus. Et ce que tu as, c'est du lin de campagne. Maintenant, ce que vous devez faire est de créer, voyons combien. Il est donc simplement basé sur un seul pays. Mais si je reviens, utilisez la grille de répétition, par exemple, créez autant. Ces nombreux. Je pense que c'est quelque chose comme 294 ou quelque chose comme ça. Donc, dissociez la grille et essayez maintenant vous pouvez voir 126 formes. Donc, fondamentalement, vous pouvez utiliser l'un de ceux-ci. Et si je passe à mon panneau de calques, vous pouvez voir que c'est le drapeau mongol. Si je clique sur celui-ci, c'est la Finlande, le Mexique, la Slovénie et ainsi de suite. C' est ainsi que j'ai créé ceux-ci. Je ne vais pas vous ennuyer trop pour que nous puissions augmenter la vitesse à laquelle nous travaillons là-dessus. Donc, dans la prochaine vidéo, nous allons finir notre processus de création parce que nous avons ce Q et a, qui va être un peu difficile à créer. Une Ananda va vous ennuyer avec elle dans cette vidéo. Mais enfin, après ce Q et a, la seule chose qui nous reste à créer, si nous vérifions ici. Voici donc les questions et réponses. Nous avons donc le texte et le bouton sur le côté. Ceux-ci vont être un peu difficiles à créer. Et aussi nous avons l'abonnement et enfin nous avons le pied de page en bas. Je te vois dans la prochaine vidéo. Et dans la vidéo suivante, nous allons enfin finir cette première page, puis passer à la page suivante. 18. Créer des Wireframes dans Adobe Xd 5: D' accord, allons-y et finissons enfin le travail sur notre page d'accueil. Et pour ce faire, comme je l'ai dit, laissez-moi zoomer chaque semaine. Nous avons ce Q et une section, qui va être un peu difficile pour nous à créer, mais rien de trop important. Donc ce que je vais faire, c'est en fait utiliser ça. Donc, je vais appuyer sur Control C et copier ce texte parce qu' il est parfaitement placé pour l'utiliser dans cette section. Je vais le positionner ici, plus tout en bas. Et pour économiser un peu plus de temps, ce que je vais faire est de copier et coller dans le texte que j'ai déjà créé. Je l'ai fait. Et assurez-vous que j'ai déplacé mon bouton ici à 80, par exemple. Et vérifions ça. Ouais, 18 ans, Katie va bien et laisse ça comme ça. Donc le peu délicat ici, c'est celui-là, qui va être des questions et des réponses. Donc la première chose que je vais faire est utiliser mon outil de type cliquez ici et dit quelque chose comme, ma troupe est-elle protégée au niveau national ? Et pour cela, Utilisons quelque chose comme Bop est 36 gras, mais je vais en fait le changer à 24 volts parce que j'ai besoin d'un texte un peu plus petit pour tenir ici. Et je vais l'ajouter à mes styles de personnages et tout simplement plus juste ici en dessous de mon 36. Et juste en quelque sorte c'est bien organisé. Ce que je vais aussi faire, c'est m'assurer que c'est six colonnes de large. Donc 246, donc 123456. Il est là. Et je vais aussi inclure cette icône, qui est cette icône si proche. Et plus tard, quand nous commencerons à animer, il va réellement s'animer. Donc ça va passer de plus 2 près de X. mais on va s'occuper de ça un peu plus tard. Et comme vous pouvez le voir, nous avons juste l'état par défaut parce que nous n'avons pas besoin et après l'état. Ce que je vais aussi utiliser, c'est un diviseur. Donc je vais copier et coller ici. Encore une fois, la largeur est 702, couleur est cette valeur par défaut. Une taille est un, et je l'ai créé en utilisant simplement cet outil d'alignement. Laissez-moi revenir en arrière et je vais glisser et déposer tous mes calques sont juste ici. Donc, ce que je vais faire est fondamentalement ajouter un autre texte. Alors voyons. Ce que je peux faire est d'utiliser ressemblent à de la pop dans la diapositive pour celle-là. Et voyons la position dans ici. Fermer icône peut aller sur le dessus, donc quelque part par ici. Et voyons, nous pouvons utiliser, par exemple, Poppins 24 et lumières, ce qui est ceci. Je vais coller ce texte. Et voyons, par exemple, je peux le positionner à 60. Donc comme ça. Et voyons, je peux, par exemple. Positionnez mon séparateur à 60 aussi, comme ceci. Maintenant, vérifions ça. C' est bon, tout a l'air bien. Les analytes le dégrouper maintenant, appuyez sur Control G. Et ça va être, est mon voyage protégé, par exemple, comme ça. Et ce que je vais faire maintenant, c'est essentiellement utiliser ces mêmes éléments, mais fondamentalement les déplacer un peu. Et je vais les fermer et je te montrerai plus tard ce que je veux dire. Tout d'abord, créons-les. Donc je vais frapper en premier, assurez-vous que c'est au sommet comme si c'était juste ici. Appuyez sur Control D pour le dupliquer et assurez-vous que c'est 60 aussi bien comme ça. Ici, c'est. Plus, c'est ci-dessous et je vais l'appeler politique d'annulation comme ça. Et je vais simplement copier et coller le texte de mon dessin original. Voyons voir, juste pour que je ne t'ennuie pas trop avec ça. Et déplacez ce séparateur à 60. Comme ça. Ils sont Harut. Et je vais dupliquer celui-là, le déplacer à 60 ans, comme ça. Voyons voir. Le suivant, c'est des partenaires comme ça. Permettez-moi donc d'organiser rapidement mon dossier original parce que, comme je l'ai dit, je suis en train de copier et coller de la dette. Voyons comment choisis-tu tes partenaires comme ça ? Et puis voyons des partenaires. Nous pouvons copier et coller le texte dans. Et déplacons ce séparateur dans une fois de plus. Donc, 60 est, vous pouvez voir qu'Adobe XD est assez intelligent pour organiser tout ce dont vous avez besoin ici. Alors passons enfin à une autre section. Et cela va être appelé, Désolé, comment fonctionnent les voyages personnalisés ? Et enfin, je vais traîner dans celui-ci et enfin déplacer ça pour être 60 aussi. Donc comme ça. Et fondamentalement, ce que nous allons faire, c'est que nous allons les organiser un peu mieux. Tout d'abord, je vais appeler ce costume de voyage comme ça et savoir que nous avons toutes nos sections. La section par défaut va être, toutes ces réponses vont être fermées. Donc, nous devons tous les éditer pour notre section par défaut. Et je vais créer un composant. Et plus tard, nous allons réellement passer à autre chose et animer Il y a composant et créer des états supplémentaires une fois que nous commençons réellement avec notre conception. Donc, les premières choses, je vais en fait déplacer ça vers l'outil haut juste ici. Et positionné sur le dessus, par exemple, assurez-vous qu'il est en haut de mon texte, comme si c'était juste ici, alors assurez-vous qu'il est 60. Et enfin, je vais descendre à votre basicité du texte lui-même. Ensuite, je vais le faire pour tous. Laisse-moi t'en montrer une autre et je vais mettre la vidéo en pause. Donc diviseur va sur le dessus et assurez-vous qu'il va juste ici. Assurez-vous donc de l'aligner avec votre texte et assurez-vous que vous avez 60 ans à partir d'ici. Donc, comme ça et puis abaissez vous fondamentalement, vous pouvez appuyer sur 0 sur votre clavier à des fois. Et, euh, laissez-moi mettre la vidéo en pause et faire ces deux-là et je reviendrai vers vous. Ou je n'ai pas vu que c'est terminé. Nous devons les organiser un peu mieux parce que maintenant vous pouvez voir qu'ils sont déconnectés fondamentalement et ils sont juste assis ici dans l'espace vide. Nous devons donc les organiser un peu mieux. Ce que je vais faire, c'est le globe oculaire. Donc, en train d'aligner quelque part par ici. Assurez-vous qu'il est 60 et faites la même chose pour ces deux autres aussi. Alors assurez-vous que notre globe oculaire il s'est terminé, le bord supérieur du texte va avec le bord inférieur de nos lignes sont juste ici. Assurez-vous qu'il est 60. Et enfin faire la même chose pour ce dernier. Donc en fait, je pense qu'un gardé les histoires de la première fois comme ça. Et nous voilà. Cette section est remplie. Donc, ce que nous allons faire maintenant, c'est que nous allons le mettre dans la section. Donc voyages personnalisés. Alors appelons-le les questions courantes, par exemple, comme ça. Et je vais appuyer sur Control K pour créer un composant car ce sera l'état par défaut de notre composant. Et plus tard, vous verrez une fois que nous les animerons, le premier état sera un voyage financier. Et ça va montrer les séparateurs de texte vont se déplacer vers le bas et tout va être animé. Cela va tourner. Donc, vous allez voir cela plus tard quand nous arriverons à animer nos éléments sont conçus et tout le reste. Tout d'abord, je vais regrouper ça et l'appeler « contenu ». Et puis les questions de Khan seront le nom de nos sections. Encore une fois, des questions communes. Et pour le contenu, je vais utiliser la pile. Et la pile va être comme ça parce que plus tard, nous pourrions vouloir le déplacer comme ça. C' est pourquoi la pile est vraiment utile. Positionnons le juste ici, organisez-le un peu mieux. Ça marche bien. Voyons où nous sommes. Nous sommes donc très loin. Donc 150 habitudes laitières. Et maintenant, créons l'autre. Donc Control C, Control V. Et pour cette section, qui va être notre newsletter, section newsletter. Comme vous pouvez le voir, nous avons le texte, le texte du bas, e-mail et abonnons. Donc vraiment assez simple à créer. Et nous allons d'abord les choses première position à 150. Je vais copier et coller le texte pour accélérer un peu les choses. Ensuite, nous allons copier et coller dans le texte ci-dessous, soutenu une boucle. Abonnez-vous à notre newsletter pour recevoir les dernières offres et réductions. Déplacez ceci en bas, assurez-vous que c'est 150, c'est le cas. Donc, ce que je vais faire est de créer une entrée. Donc, pour la saisie de texte, Voyons voir, je peux utiliser mon outil rectangle. Va d'ici. Quelque part par ici. Assurez-vous que c'est 76, comme tous nos autres boutons. Ou 79 2 va l'être. Alors appelons-le l'entrée. Vg va contenir la bordure et ne remplir aucune ombre. Et nous allons laisser les bords droits comme ça. Plus de largeur vers le bas. Utilisez l'outil de texte et utilisez quelque chose comme entrez votre adresse e-mail. Leur habitude. Et pour celui-ci, voyons ce que nous pouvons utiliser. Nous pouvons utiliser 18 lumières, par exemple. Et voyons, je peux le créer avec cette couleur, par exemple. Assurez-vous que ces deux éléments sont sélectionnés. Assurez-vous que le texte de l'e-mail est placé au centre. Mais je vais faire est de chercher la newsletter par e-mail. Ici, c'est. Il suffit de le faire glisser et de le déposer en position. Et je vais m'assurer de fermer ceci et de changer sa couleur pour ça. Chérie, comment ça, et je pense que c'est un peu petit. Ce que je vais faire, c'est le transformer un peu. Assurez-vous que c'est, par exemple, 42 avec 31. Nat fonctionne beaucoup mieux avec notre section. Assurez-vous qu'il est au centre. Il l'est. Et enfin, ce que je vais faire, c'est m'assurer que c'est 40 de cette recherche. Donc 1, 2, 3, 4. Et je vais faire la même chose pour les textes de bureau, alors assurez-vous qu'il est 40 aussi. Là, nous l'avons. Et maintenant, déplaçons cela vers le bas, dégroupez-le, et appelons-le des entrées de texte. Je dat. Et nous aurons besoin de créer notre bouton. Donc, ce qu'on peut faire, c'est voir. Peut-être que nous pouvons utiliser cette connaissance supérieure créer en fait un autre bouton. Alors allons-y comme ça. Allons-y avec 70. Assurez-vous que les deux s'alignent correctement. Et voyons ce qu'on peut faire. Nous pouvons l'appeler, par exemple, Bouton Appliquer ou gros bouton ou quelque chose comme ça. Donc, appliquez btn parce que ce sera l'action qui utilise, donc je vais prendre dans ce cas pour m'abonner. Voyons donc pour la largeur 36, 6, hauteur de 70, ce qui est très bien. Je vais utiliser cinq partout. Je vais enlever la frontière. Utilisez ce bleu moyen comme couleur et enfin appuyez sur T. Et j'imprime quelque chose comme abonner. Assurez-vous qu'il est centré, aligné. Et voyons ce que je peux utiliser. Par exemple, Poppins 24 lumières, assurez-vous qu'il est blanc comme ça. Et puis je vais les sélectionner pour m'assurer qu'ils sont au centre comme ça. Voir. Et je peux l'appeler, par exemple, bouton S'abonner. Et tout de suite, nous pouvons le créer en tant que composant Control K, et nous pouvons ajouter un état de survol. Et la seule chose que vous allez réellement changer à l'intérieur de l'état d'horreur est la couleur du bouton à cette couleur de vol stationnaire comme ça. Donc, une fois qu'ils survolent, ça va rester comme ça. Ensuite, je vais les positionner tous les deux au centre comme ça. Et voyons, peut-être que je peux m'assurer qu'ils sont à 60 ans, par exemple, comme ça. Et je vais m'assurer de l'appeler entrée. Assurez-vous également que vous êtes dans une pile parce que plus tard, nous pourrions vouloir faire quelque chose comme ça. Et enfin, nous pourrions vouloir réduire cette entrée de texte à quelque chose comme celui-ci afin que nous puissions les aligner correctement sur la taille mobile, par exemple. Donc, cela peut le faire beaucoup plus facilement. Assurez-vous qu'il est au centre. Et enfin, à partir des textes, nous pouvons lui donner quelque chose d'un peu plus grand comme 100. Et nous pouvons appeler cette rubrique newsletter comme ça. Et enfin, passons maintenant au pied de page et finissons cette première partie de notre conception. Permettez-moi d'abord d'étendre cela jusqu' ici et de m'assurer que c'est 150, c'est le cas. Donc, pour le pied de page, je vais faire glisser un beau grand rectangle, assurez-vous que je n'ai pas de bordure. Donc je vais l'appeler l'image du pied de page. Je, que je vais m'assurer que c'est ce gris clair pour qu'on sache que c'est l'image. Assurez-vous que c'est dans un centre, pas de frontière, c'est bon. Et maintenant, donnons-lui quelques dimensions. Donc, pour la hauteur, allons avec le 632 qui, et assurez-vous que nous sommes 150. Double-cliquez ici pour que nous puissions fermer notre page correctement. Effectuez un zoom avant, et assurez-vous simplement de le fermer plus ancien comme pour XD d'avoir cette option à réduire. Mais malheureusement, il ne l'a pas, alors nous devons nous en occuper. Maintenant. Faisons le logo, faites-le glisser et déposez-le à l'intérieur. Assurez-vous que c'est au centre, comme ça. Positionnez quelque part par ici. Voyons voir. Maintenant, je peux essentiellement utiliser tous ces éléments supérieurs. Donc, ce que je peux faire est de faire glisser ceci vers le bas les sections supérieures , navigation primaire, navigation principale. Donc je vais utiliser le contrôle C, contrôle V. et je vais m'assurer que c'est tout le long, assurer que c'est au centre comme ça. Et maintenant, ce que je peux faire, c'est simplement les diviser en deux sections, par exemple. Mais avant que je ne le fasse, augmentons l'espacement à 100 entre eux et la chanson du logo comme ça. Et voyons. Ça peut être un 24. Tout d'abord, sélectionnons-les tous et assurez-vous qu'ils sont alignés à gauche. Comme ça au lieu de droite alignée. Donc, je vais me positionner et la destination ici. Et parce que nous allons voir, 1, 2, 3, 4, 5, 6, ils peuvent tous avoir deux colonnes de large comme ça, comme ça. Ça peut aller ici, ça peut aller juste ici. Et enfin, ça sur nous peut aller à la fin, juste ici, et juste ici. Ce que je peux faire, c'est les diviser en gauche et en droite. Et je le fais juste pour les besoins réactifs. Donc, les écritures, et ça va être laissé comme ça. Et je peux l'appeler nav principal par exemple, et simplement utiliser la fonctionnalité de pile juste pour que plus tard je puisse le faire et les redimensionner plus loin si j'en ai besoin. Et je pense qu'il est beaucoup plus simple de le faire que de s'enliser avec tous ces autres éléments. Donc, nous allons sélectionner le logo, Nous allons sélectionner nos articles, assurez-vous que nous sommes à 100, donc je sais que. Donc VR. Et enfin, laissez-moi utiliser mon séparateur une fois de plus. Je vais le coller à l'intérieur d'ici. Positionnez-le juste en dessous de notre navigation principale. Et vous pouvez à peine le voir parce que c'est cette couleur gris clair, mais utilisons la couleur blanche juste pour que vous puissiez le voir beaucoup plus facilement. Et cela, Positionnons-le pas à 100, mais plutôt à 80, par exemple. Quelque chose comme ça. Je pense que ça marche bien. Et enfin, je vais simplement copier et coller mes textes Watson. Colle-le ici. Assure-toi que je suis jusqu'ici. Et je vais m'assurer que tout est blanc juste pour qu'il soit visible. Et on peut le changer en gris clair un peu plus tard. Alors voyons, peut-être qu'on peut se positionner pour être à 80 planeur, s' assurer que nous sommes bien alignés. Et enfin ce que j'ai sont ces icônes de médias sociaux, que je vais placer dans un droit ici, assurez-vous que je suis là. Et changons-les pour qu'ils soient blancs aussi. Je les déplace et enfin, les positionne pour être ici et alignés avec nos textes afin que nous puissions le faire, les aligner, s'assurer que nous sommes à 80 et que nous sommes 76 maintenant. Donc, nous pouvons réellement augmenter ces 4 pixels vers le bas si nous le voulons. Donc ce qu'on peut faire, c'est frapper Control G appelé ça, acheter des infos juste pour qu'on puisse l'avoir. Et nous pouvons également utiliser la pile ici. Et ce que je peux aussi faire est, par exemple, de regrouper tous ces éléments d'ici à ici. Et appelez-le, par exemple, info pied de page. Et je peux les mettre dans une pile, va les mettre dans cette pile. Et ce que cela va nous permettre de faire, c'est essentiellement les étendre ou les effondrer comme nous le voulons. Et cela va garder la cohérence et il va être beaucoup plus rapide pour nous de l'éditer plus tard. Enfin, contrôlez G pour le pied de page de la qualité de la discipline. Et une chose que je veux faire avant de vous quitter est le fond pour les icônes, Control K, Control key et Control key pour celui-ci, juste pour que je puisse les ajouter comme nos icônes. Et avant de partir, je vais glisser et déposer ça ici. Où sont les icônes et voir comment il icône d'accueil est notre dernier. Je vais zoomer un peu. Sauter ici, facebook, Instagram, YouTube, tous sont juste là. Maintenant, je vais les positionner pour qu'ils soient jusqu'au bout. Je ne sais pas pourquoi XD fait ça. Parce que je l'ai collé. Je ne sais pas pourquoi ça leur montre d'être ici, donc ça n'a pas vraiment d'importance. Positionné et juste ici fait en sorte que nous sommes 80 d'ici aussi. Je crois qu'il y en avait 80. Vérifions ça. Donc, voyons de ceci à cela nous sommes à 80, alors utilisez ces 38080. Et enfin, avec cette icône YouTube AT aussi bien organisé maintenant une fois de plus, donc ils vont comme ça. Terry l'a. Nous avons enfin terminé la conception, pour ce filaire Adobe XD. Et vous pouvez voir que la page est vraiment assez grande. Et sachez avant de vous quitter, je veux juste frapper un aperçu rapide et voir ce que nous avons créé jusqu'à présent avant de passer à la page suivante, une fois de plus, appuyez sur cette icône Play, agrandir ceci. Donc ce que nous avons, c'est que nous avons ce bel effet de vol stationnaire. Là, nous l'avons. Et la chose que nous pouvons faire ici est une baisse de l' opacité de ce cadre en arrière-plan. Laisse-moi faire ça maintenant. Alors je vais regarder dans le bouton Hero. Ici, c'est. Et à l'intérieur de la propriété, ce que je peux faire est simplement abaisser cela à 0, par exemple. Juste pour que ce soit beaucoup plus agréable à l'œil. Et maintenant, une fois que je survole, vous ne pouvez pas voir dans ce fond général des formes ou il semble beaucoup mieux. Appliquer des filtres. Et ces travaux parce que, comme je l'ai dit, déjà créé, donc c'est très bien. Vous pouvez voir que cela fonctionne bien. Ça a l'air charmant. Cela fonctionne bien. Et l'espacement entre toutes ces sections fonctionne très bien. Ainsi, vous pouvez voir que toutes ces icônes sont en train de planer et de changer. Tout ça a l'air bien. Nous avons quelques problèmes avec cette flèche droite, mais nous allons la corriger plus tard dans la phase de conception. Mais fondamentalement, nous avons tous alignés magnifiquement et cela fonctionne vraiment bien. Tout cela, comme vous pouvez le voir, flèche droite refuse tout simplement de briller. Ça a l'air génial. Cela fonctionne très bien. Nous allons animer ça plus tard et, fondamentalement, il va s'étendre à ici. C' est pour ça que je l'ai mis en haut. Cela fonctionne bien. Donc, vous pouvez voir l'horreur est superbe, et cela fonctionne vraiment bien aussi. Donc fondamentalement c'est tout pour cette vidéo et cette première page, évidemment, ces pages suivantes vont être beaucoup plus petites en taille de contenu. Donc, fondamentalement, ils vont être beaucoup plus rapides à enregistrer et à créer. Donc je vous verrai dans la prochaine vidéo où nous allons réellement travailler sur cet écran de destination. Et on va passer à autre chose à partir de là. 19. Créer des Wireframes dans Adobe Xd 6: Maintenant que la page d'accueil est terminée, passons à cette page de don. Et avant de le faire, vérifions rapidement ce que nous avons ici. Donc, nous avons la même navigation, même configuration, même image de héros maison, juste cracher le curseur. Ce ne sera qu'une seule image. Et puis nous avons qu'un titre de section et ensuite nous avons sur les activités de localisation et toutes ces différentes icônes. Et enfin, nous avons cette section qui va nous prendre un peu de temps. Nous avons ce temps actuel 4, qui va être assez similaire à ceux que nous avons déjà. Et puis ces sections en bas sont fondamentalement exactement les mêmes que sur l'écran d'accueil. Et c'est ce que je voyais dans une vidéo précédente. Cela va vous prendre beaucoup de temps, surtout avec ces pages plus longues, pour accéder à la même structure que vous allez utiliser plus tard dans toutes ces autres pages. Mais une fois que vous le faites, cela va améliorer votre vitesse et augmenter votre productivité de façon spectaculaire. Alors, allons-y vite. Cliquez ici. Je vais frapper le contrôle D pour dupliquer celui-ci. Alors je vais le déplacer vers le bas. Je ne sais vraiment pas pourquoi il continue de faire ça et de le coller ici. Les solides maintiennent Alt et se positionnent à un rythme ici. Alors je vais appeler ça une destination. Comme ça. Donc la première chose que je vais faire est de me débarrasser de cela et de la navigation en bas. Alors ouvrons le haut et le bas va maintenant aller, les flèches vont aller. Et changeons ça. Et appelons-le, par exemple, ville de l'amour. Et changeons ça à Paris et explorons. Maintenant, le bouton va rester le même. Et si un aperçu de succès ici, vous allez remarquer que ces animations restent les mêmes et le travail exactement le même. Donc, comme je l'ai dit, nous allons garder cette section de héros. Donc, le titre de la section, nous allons dégrouper ceci. Ok, donc pour le titre de la section, permettez-moi d'aller de l'avant et de copier mon texte à partir de mon document original. Alors visitez Paris. Et soyons Steyn, alors voyez ce que Paris a à offrir et où vous pouvez dire. Donc, la première chose que je vais faire en fait est d'aller de l'avant et de supprimer ceci et de le faire pour que j'ai beaucoup plus d'espace pour jouer avec. Et la prochaine chose que nous allons faire est de créer cette section A propos. Je vais donc utiliser mon Tiki clic ici pour taper sur Paris. Et voyons ce qu'on peut faire. J' ai quitté la ligne, c'est bon. Utilisons Poppins 36 bold par exemple. Je pense que ça marche bien. Voyons ce qu'on peut faire ici. Positionnons-le quelque part autour d'un 100 par exemple. Voyons où nous en sommes. 100 et nous sommes allés en position pendant un an ou encore une fois, assurez-vous qu'il est aligné à gauche comme il est juste ici. Donc je vais m'assurer de dupliquer celui-ci et je vais utiliser 24 irréguliers. Ensuite, je vais créer une zone de texte de taille fixe. Je vais l'étendre jusqu'ici. Et voyons peut-être trois ou quatre lignes, quelque chose comme ça. Et permettez-moi d'aller de l'avant et de copier et coller rapidement quelques informations sur les obstacles. Et il y a deux choses que vous pouvez faire dans ces cas. abord, vous pouvez affiner votre boîte au bord de votre texte jusqu'à ce qu'il disparaisse, puis la ramener comme ceci. Ou vous pouvez utiliser la hauteur automatique et il va automatiquement ajuster la hauteur de vos textes dès que vous commencez à l'aligner. Ça va faire ça, ce qui est fantastique. Et il va essentiellement agir comme un paragraphe de texte réactif. C' est pour ça que j'aime vraiment ça. Et cette fonction d'Adobe XD, nous allons garder la hauteur automatique, comme je l'ai dit, Annelids groupe ceci, Mettons-le dans le groupe. Connaissez Paris et il a le titre de section. Et on va le garder comme ça. La première chose que je vais présenter ici, c'est ce séparateur. Donc, utilisez simplement votre outil de ligne comme ça. Et voyons, peut-être que nous pouvons utiliser cette couleur plus claire pour la bordure. Donc un gris clair ici c'est, parce que nous ne voulons pas qu'il soit trop intrusif, nous voulons juste le garder assez simple et minimal. Permettez-moi donc de le positionner à 40 de mes textes. Donc 1234. Je l'ai fait. Et je vais appeler ce diviseur. Je vais le dupliquer et je vais positionner celui-ci à l'intérieur de mon titre de section, donc à l'intérieur d'ici. Et je vais amener le suivant beaucoup à quelque part ici. Donc, ce que je vais faire ensuite est de dupliquer ce contrôle de texte D vers le bas. Alors pourquoi je l'ai dupliqué ? Désolé pour ça. J'aurais dû dupliquer sur Paris comme ça. Donc plus avec les analystes extérieurs voir, peut-être que nous pouvons le positionner 100 de notre diviseur. C' est à partir de ce texte, mais comme je l'ai dit, juste à partir du diviseur, puis diviseur est là. Et ici, nous allons écrire dans les activités à avoir ici comme ça. Et puis je vais positionner certaines des icônes que je t'ai montrées tout à l'heure. Donc, ces icônes, parce que ce sont les icônes d'activités. Donc ce que je peux faire, c'est simplement sauter ici. Visites touristiques, musées, croisières fluviales, vélo, manger dehors. Et celui-là. Donc je vais simplement les copier. saute ici et la basse s'enfonce. Donc la prochaine chose que je vais faire est pour chacun d'eux, je vais sauter et utiliser la version outline. Donc, comme il l'a dit, je l'ai fait parce que les icônes viennent généralement soit dans le contour ou dans la version colorée. Donc, ce que vous pouvez faire si elles viennent en version colorée, que je vous recommande les gars de télécharger, vous pouvez toujours sauter à l'intérieur et un plus bas l'opacité de cette couleur. Créez des composants supplémentaires, une date ou une instance comme je l'ai fait ici. Et puis vous pouvez montrer à votre client ou à vos coéquipiers dose deux options afin qu'ils puissent choisir. Et aussi, vous pouvez utiliser ces deux dans différents types de scénarios. Donc, pour mieux les organiser, ce que je vais faire est de créer un rectangle. Vous pouvez utiliser la touche de raccourci ou rapidement ici. Et puis je vais cliquer et repositionner celui-ci. Sélectionnez mon rectangle, cliquez ici, puis cliquez sur le rectangle, faites-le glisser ici, cliquez ici. Sélectionnez les deux juste pour vous assurer que je suis au centre de ces deux colonnes parce que je veux que les colonnes prennent deux espaces chacune. Donc, sélectionnons cette icône comme ça. Et puis je vais positionner celui-ci et traîner celui-ci jusqu'ici, sécher celui-ci jusqu'à ici, aligner et monter. C' est très bien. Là, nous l'avons. Donc, c'est fondamentalement tout. Maintenant, organisons-les. Je vais les déplacer en dessous de ça, et je vais les pousser un peu vers le haut. Voyons voir, peut-être que je peux les positionner à 100. Alors nous allons les aligner comme ça. Vérifions 100. C' est très bien. Donc la prochaine chose que nous allons faire est de dupliquer cette position de texte ici. Et ce que je vais faire est d'utiliser Poppins 24 light par exemple. Donc, vers le haut Voyons les données sur, mais juste utiliser et le texte des morts. Et laissez-moi entrer, copier-coller et le texte de mon document original. Et voyons, peut-être que je peux le positionner comme 40. Donc quelque part par ici, je pense que c'est bon. Contrôlez D, puis vous pouvez taper dans les musées. Assurez-vous qu'il est dans le centre de contrôle D River Cruises, Contrôle D pistes cyclables, et enfin, des visites culturelles. Maintenant, vous pouvez parler à vos clients et leur faire savoir que pour chaque destination qu'ils ont. Par exemple, dans ce cas, sur ce site enfant, pour chaque destination qu'ils ont, nous pouvons, par exemple, créer des icônes supplémentaires. Donc, allons-y 40 Je cela, nous pouvons créer des icônes supplémentaires. Donc c'est totalement je suis tombé ou la Tour Eiffel à Paris parce que c'est peu fonctionne bien. Mais peut-être que vous voulez inclure une sorte d'icônes différentes, alors vous pouvez parler avec eux et voir s'ils sont intéressés par quelque chose comme ça. Donc, ce que je vais faire est de sélectionner ces deux et d'appeler ce dossier tourisme. Je vais choisir ces deux postes ici. Les musées ferment un peu plus et dehors. Et ça va faire du vélo. 18 note. Et enfin celui-ci qui est position des touristes culturels juste ici. Maintenant, je vais mettre la vidéo en pause et la seule chose que je vais faire est simplement de les commander pour que l'icône aille au sommet. Et maintenant que je l'ai fait, comme vous pouvez le voir, l'icône est en haut, le texte est en bas. Allons vite de l'avant et organisons dans la dette. Ce que nous pouvons appeler cette section, c'est des activités. Donc, je vais regrouper les activités de diviseur et tous ces dossiers solides premier groupe D, les appeler activités et je vais regrouper tout le reste et l'appeler activités une fois de plus. Alors maintenant passons à autre chose et je vais dupliquer cette section parce que si vous vous souvenez d'un droit ici, ce que nous avons est ceci, alors ce, ce que nous avons créé avec l'ICANN a arrêté Paris offres. Donc c'est ce que vous allez créer ensuite. Donc, une fois de plus, utilisez le titre de la section. Et je ne sais pas pourquoi ce séparateur est entré ici. Voyons où est Paris, l'air. Organisons ces choses juste un peu. Donc ça devrait être à l'intérieur d'ici. Donc le titre de section devrait être en haut sur Paris et ensuite diviser il devrait y avoir à l'intérieur comme ça. Donc, la section intitulée Control D une fois de plus. Je vais le positionner ici. Je vais me débarrasser de toutes ces sections. Je vais laisser juste une partie inférieure parce que nous allons vraiment l'utiliser. Donc d'ici jusqu'à ici, et voyons, peut-être pourrions-nous nous débarrasser des partenaires. Voyons ce qu'on a créé ici. Donc, nous avons cela alors taux de change. Donc, ouais, débarrassons des partenaires et laissons dans ces sections au bas de la page, ils seront exactement les mêmes que nous avons fini ces derniers. Donc la première chose que nous allons faire en fait est sauter ici et la position est de 150. Comme ça. Parce que je veux garder la même distance d'ici à ici, mais ça peut rester à 100 comme nous l'avons fait. Pour que je puisse regrouper tous ces éléments. Contrôle G et écriture visite Paris. Et ce titre de section va descendre. Donc ce que vous allez écrire ici, c'est des offres de Barris comme ça. Ensuite, je vais sauter et coller dans ce texte, comme ça. Alors regrouperons tout cela, contrôlez G et appelons-le info du fond. Et nous pouvons aussi le cacher ou simplement tenir un Derrick juste pour que je sache plus tard que je peux l'amener jusqu'ici. Ce que nous allons faire ensuite, c'est créer ces catégories. Donc, ces options que les utilisateurs peuvent prendre avant de choisir leur hôtel. Donc, pour le prix, la durée, les activités, les excursions, l'aération, et enfin, appliquer des filtres là où il est. Ici, c'est juste ici. Donc, la durée du prix, les activités, les excursions, la notation et appliquer. Donc nous allons les créer. Et comme il y en a six, ce que nous pouvons faire est simplement de créer un bouton. Deux colonnes comme ça. Et voyons ce qu'on peut en faire. Donc, la première chose est, voyons, Commençons par dimension. Donc 22 Pour une largeur 70, nous allons laisser la couleur blanche, enlever la bordure, mais inclure l'ombre de 55, 10 cette fois. Donc, un plus grand. Et puis ce que nous avions l'habitude de faire et assurez-vous qu'il est cinq ans. Alors allons avec ça et vous pouvez à peine le voir, mais c'est bon. Et nous allons aussi autour des coins et vers le bas à cinq, ce que je pense que c'est bon. Et amenons-le à 100 d'ici, donc décalage et 10 fois, ce qui est très bien. Maintenant, ce que je vais faire est de taper le prix comme ça. Je vais utiliser Poppins 18. Je vais m'assurer qu'il est aligné à gauche et que la position gris clair est juste ici et m'assurer qu'il est au centre. C' est un troupeau laitier. Et je vais simplement localiser ce signe dollar. Alors voyons ce que c'est là. Il l'est. Faites simplement glisser et déposez-le à l'intérieur. Voyons maintenant. Peut-être que je peux positionner le signe du dollar juste ici au centre. Et assurez-vous aussi qu'il est 40. Et le prix est aussi à 40. Comme ça. Voyons donc, je peux, par exemple, appeler cette entrée BEG. Ou voyons, déroulant BG. Parce que plus tard, lorsque nous commencerons à concevoir, nous allons inclure quelques éléments différents. Faites ça, ça va descendre comme je vous l'ai montré dans la première vidéo de ce cours. Appelons ça le prix. Maintenant, allons de l'avant et créons quelques copies. Contrôle D, positionnez-le ici, contrôlez la position et ici. Et avant d'aller plus loin, nous allons les renommer. Donc, le second sera la durée. Tourner un va être des activités et le dupliquer. Donc celui-ci va être des excursions. Et enfin, dans celui-ci juste ici va être notation. Et pour la fin, il suffit de dupliquer et appeler le bouton sur Appliquer les filtres lithium là encore. Donc la prochaine chose que je vais faire est de commencer sur mon bouton parce que c'est le plus simple. Commençons par ça. Appliquez des filtres comme ça. Enlève l'icône du dollar, btn, BG, mon père. Donc ça va être bleu principal. On va se débarrasser des ombres. Et simplement pour le filtre d'application, utilisons du blanc. S' assure simplement que c'est au centre comme il l'est. Et je vais appuyer sur Control K pour créer un composant. Je vais créer un état d'horreur. La seule chose à l'intérieur du vol stationnaire, ce qui va changer est la couleur du vol stationnaire lui-même, donc bleu clair. Et maintenant, allons de l'avant et travaillons sur tout ça. Donc, comme nous l'avons dit, ce sera une durée comme ça. Et pour la durée, Trouvons-le. Voyons voir. Voyons donc le calendrier. Je pense que c'est celle-là. Voyons juste qu'il est 0 en position et juste ici. Et je vais aussi m'assurer qu'il a changé de couleur en gris clair. Voyons voir. Donc 40. Et passons ça à 40 aussi. Comme ça, ce qui est très bien. Ensuite, les activités. Nous allons sélectionner mon icône de montant en dollars, localiser mes activités et le glisser et le déposer à l'intérieur et voir 40. Et ça, c'est 35. Donc 1, 2, 3, 4, 5, troupeau laitier. Et ce prochain sera des excursions. Localisez mon icône et faites-la glisser à l'intérieur. Voyons voir, nous sommes à 40 ans d'ici. Oui, et nous voilà 31. Maintenant, nous sommes à 40 ans. Et enfin, ça va être nos 18 ans. Et pour l'échelle de notation, c'est l'icône d'étoile. Ici, c'est. Et faites glisser et déposez-le à l'intérieur. Je vais m'assurer que c'est au centre comme ça. Et puis je vais m'assurer que c'est 40 que je peux utiliser, et 33. Alors allons-y comme ça. Et la dernière chose que je veux changer, c'est ça. Donc, je vais juste utiliser et D contour. Et pour le contour, je vais utiliser cette couleur juste pour que nous allions et avoir une certaine cohérence avec toutes ces différentes icônes. Dario c'est ça. Et maintenant, assurons en fait d'organiser ceux-ci un peu mieux dans l'appel il filtre comme ça. Donc, nous avons la section supérieure, ce qui est désolé, le titre de la section, qui est celui-ci. Nous avons des filtres. Visitez Paris est cette section juste ici. Et enfin, maintenant, nous devons concevoir ces cartes. Alors vérifions-les. Vous pouvez voir que nous avons l'image juste ici et nous avons la note, le nom. Nous avons l'adresse ici, et puis nous avons fondamentalement les mêmes informations que nous l'avons fait auparavant, fois 4. Alors, sautons à l'intérieur et créons de la dette. Donc, ce que nous pouvons faire, c'est utiliser la discipline. Donc on peut copier ça hors enregistrement. Et faites-le glisser ici, collé, positionné juste ici, et voyez peut-être qu'on peut, ouais, je pense que 100 est une bonne façon de faire. Donc, ce que nous pouvons faire avec c'est que je peux cliquer ici et le faire glisser. Comme vous pouvez le voir, responsive, redimensionner ne disparaît pas, mais pas vraiment tout si bon. Ce que je vais faire, c'est d'abord renommer ça en carte d'hôtel. Et ici appelé ça à la carte d'hôtel vg, parce qu'une fois que vous l'exportez plus tard, il va évidemment être un peu différent. Donc, nous pouvons réellement sélectionner la flèche et la carte d'hôtel et simplement la mettre à l'échelle. Et ces deux-là vont rester les mêmes. La prochaine chose que l'image va rester la même. Ça va rester le même. Le nom va rester le même, mais nous allons vraiment nous débarrasser de ce diviseur. Donc, deuxième diviseur, retirez-le. Et ce séparateur va s'étendre jusqu' ici pour que nous ayons assez d'espace. Donc deux ici. Alors ce qu'on va faire, c'est que je peux me débarrasser de cette pile. Alors voyons, au milieu de cette pile, nous allons nous en débarrasser. Et ce que je vais faire, c'est en fait déplacer mon prix quelque part ici, par exemple. Donc, je me donne assez d'espace lorsque cette icône se développe plus tard, ce qui est très bien. Et ce que je vais faire ensuite, c'est bouger les jours. Donc, d'abord se débarrasser de ce groupe tout à fait. Maintenant, passons au centre de notre texte comme ça. Je vais quitter les jours ici et je vais réellement utiliser le transport choisi d'ici à ici, par exemple. Et puis utilisez ça et ça pour vous assurer qu'il est au centre. Débarrassez-vous du rectangle, et nous l'avons là. Donc je pense que ça marche bien. Maintenant, la prochaine chose que je vais utiliser mon diviseur sélectionné d'ici, assurez-vous qu'il est 40. Comme ça. Je pense que c'est bien. Et une dernière chose que je vais faire est d'utiliser ce texte pour la hauteur automatique. Et voyons, je vais copier et coller le texte de mon document original. Et puis je vais étendre ma taille à quelque part par ici. Je pense que ça va bien marcher. Et laissez-moi enrouler le texte pour que nous ayons un peu plus de place pour jouer. Et si nous vérifions ici, c'est 46 en fait. Voyons ce qu'on peut faire. Peut-être qu'on peut déplacer ça en quatre en six pixels. Donc comme ça, nous en avons 26 et vérifions ici que nous sommes à 24 ans, ce qui est très bien. Donc oui, on peut le laisser comme ça. En fait. La dernière chose que je vais utiliser est ce texte Contrôle D. Assurez-vous qu'il est complètement à l'extérieur et assurez-vous que c'est la largeur automatique. Donc, ce que je vais faire est de sauter dans mon document original, copier et Voyons voir, basé sur l'adresse. Donc, je vais revenir dans l'info. Et je vais m'assurer de l'aligner avec mes étoiles comme ça. Donc c'est au centre. Et voyons, je peux, par exemple, assurer qu'il est 60 à partir de ce bord droit, quelque chose comme ça. Donc je vais m'assurer que c'est juste, c'est bien aligné. Donc, quand un changement toutes ces adresses plus tard va se développer vers la gauche. Et une dernière chose que nous voulons ajouter est dans cette icône d'emplacement. Donc, cette icône de broche, faites-le glisser et déposez-le ici. Assurez-vous de changer la couleur pour cela. Alors maintenant, voyons, peut-être que je peux m'assurer qu'il est 20 ici. Comme ça. Alors la dernière chose que je vais faire est de les regrouper pour l'appeler emplacement, le positionner. Oui, laissons ça au classement, mais je vais utiliser la pile. Donc plus tard, par exemple, vous pouvez imaginer que disons que c'est la première rue à 24 coins. Vous pouvez voir que l'icône reste 20 pixels à partir d'ici, et son échelle. Donc, peu importe ce que vous tapez ici, ça va s'étendre. Il va garder sa distance par rapport au texte. Fondamentalement la même chose que vous le mettez à l'intérieur de la pile juste ici. Donc c'est comme ça que nous l'avons défini et je pense que ça a l'air bien. Alors passons à autre chose et dupliquons-les. Donc je peux changer ça pour le vrai nom de l'hôtel comme ça. Ici. Nous pouvons changer cela à, par exemple, 14 jours. Comme ça. Je pense que ça marche bien. Et ce que je vais faire, c'est utiliser ma grille de répétition et en créer quatre. Et je vais dégrouper la grille. Bien sûr que celui-ci arrive sur le dessus. C' est le numéro 2, c'est le numéro quatre et c'est le numéro 3. Là, nous l'avons. Donc la dernière chose dont nous aurons besoin dans cette section pour finir. Donc, nous allons d'abord regrouper toutes ces sections. Alors voyons. Nous pouvons, par exemple, des hôtels de qualité, parce que tous ces hôtels vont être des hôtels. Alors sélectionnons tout cela. Donc nous avons une section intitulée filtres, cartes d' hôtel, contrôle G. Je vais l'appeler cartels, et ensuite tout mettre dans le groupe, dans la pile. Et voyons voir ici. En fait, je ne vais pas le faire. Faisons ça plus tard quand nous atteindrons l'état désiré parce que je vais vous montrer pourquoi. C' est génial si vous avez des piles activées. Il peut donc vraiment vous aider à atteindre vos efforts de conception réactive plus tard. Voyons donc 150, comme ça. Et je vais cliquer avec le bouton droit sur Dégrouper ceci ou vous pouvez simplement le laisser dans un groupe parce que nous allons copier et coller plus tard dans toutes ces autres pages. Alors je vais l'arrondir. Encore une fois, je déteste vraiment que XD n' cette option pour arrondir le bord inférieur de votre design. Mais en gros, c'est tout. Nous avons terminé cette page. Il nous a fallu un peu moins que den la page précédente parce que nous avons déjà tous ces éléments. La prochaine va nous prendre un peu plus parce que nous avons besoin de créer toutes ces sections défilantes. Mais comme je l'ai dit, parce que nous avons tous ces éléments déjà créés, cela va être un peu simple à créer, donc ce ne sera pas difficile. Mais ce dernier, ça va être très simple. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 20. Créer des Wireframes dans Adobe Xd 7: Passons maintenant à la page suivante qui va être sélectionné offre. Mais avant que nous le fassions, vérifions vite. Donc, nous avons, au lieu de la section héros, nous allons avoir la section blanche. Nous allons donc changer la couleur globale de nos articles de navigation à cette couleur grise vraiment claire que nous utilisons. Nous allons avoir quelques images ici avec quelques flèches, Nan, classement, nom de l'hôtel et site web avec la description. Et puis ci-dessous, nous allons avoir toutes ces différentes caractéristiques de l'hôtel qui vont nous prendre beaucoup de temps. Et nous allons avoir cette section ici qui va rester mise et ça ne changera pas. Je vais montrer ça et comment nous allons y arriver. Et nous allons aussi avoir cette section qui sera exactement la même qu'avec les précédentes. Donc, pour commencer, je vais simplement m'assurer d'utiliser ma touche Alter Option, zoomer et appeler cette offre sélectionnée. Ensuite, je vais sauter ici et m'assurer que ça change mon logo trop sombre. Et puis voyons, je peux utiliser mon NAV principal et je peux changer ces éléments en gris foncé. Faites un saut ici, changez tout ça en gris foncé. Cliquez ici, puis supprimez ceci et cliquez ici, supprimez tout cela. Donc, fondamentalement, il nous reste maintenant avec cette section. Donc, il va lire beaucoup plus, beaucoup mieux sur l'image. Et puis avant. Donc, ce que je vais faire est de créer une image. Donc, pour commencer, je vais simplement dessiner un r, qui est trois colonnes de large. Je vais cliquer avec le bouton droit de la souris et coller l'apparence juste pour vous montrer à quoi cela ressemble sur l'image originale. Donc ce que nous avons ici, c'est 55, 10. Donc fondamentalement la même ombre que nous avons fait un US avant. Cinq est le rayon de coin et la taille est 36, six avec 305. Donc je vais appeler cette image carrousel numéro 1. Je vais m'assurer de sélectionner ce contrôle C. Et je vais également m'assurer de l'appeler o, car nous allons utiliser des images plus tard dans le processus de conception lui-même. Alors voyons. Nous pouvons le positionner pour être quelque part, je ne sais pas, 100 par exemple, ou 80. Peut-être que c'est bon. Je pense qu'AT, fonctionne bien, mais faisons-le à 100, juste pour nous donner un peu plus d'espace de respiration entre la navigation et toutes ces images différentes. Voyons donc, nous pouvons créer, par exemple, six images différentes. Donc ce que je peux faire, c'est dégrouper celui-ci et les appeler images de carrousel. Alors assurez-vous de me déplacer en dessous de ma section supérieure comme ceci. Et puis je vais faire ces doublons. Et la raison pour laquelle je l'ai mis dans le groupe est simplement parce que lorsque vous êtes dans un groupe, vous pouvez placer des éléments en dehors de votre plan de travail sur le tableau de base. Ils ne vont pas bouger du tout. Ils vont rester mis juste là. Donc numéro deux et c'est le numéro trois. Donc ça va être le numéro quatre. Et vous pouvez voir que j'utilise simplement les mêmes distances entre eux qui sont utilisés. Donc, notre largeur de gouttière, si vous vous souvenez, pour notre plan de travail, est de 60. Et c'est ce qu'Adobe XD utilise comme espacement. Donc il est utilisé un de plus avec 60 et ça va être imagé dans le numéro 6, comme ça. Donc la prochaine chose dont nous aurons besoin, ces deux flèches, solides, trouvez-les. Ils sont dans chacune de ces sections. Alors nous allons sauter à l'intérieur d'ici contrôle C et je vais m'assurer que je les ai appris ici. Donc, je vais utiliser une, fondamentalement une distance de réflexion, les années soixante vont très bien fonctionner. Alors voyons. On en a 60. Donc, une fois de plus, cause de ce robinet points simplement Niger flèche à ici. Et nous allons nous assurer que nous positionnons 60 ici. Droit ? Les images du carrousel sont terminées comme ça. Et bien sûr, pour cette section suivante, nous allons essentiellement copier et coller ces autres sections. C' est pourquoi je copie cette page parce que cela correspond parfaitement à ce dont nous avons besoin. Je vais me débarrasser du titre de la section. Ici. Je vais entrer le nom de l'hôtel. Je vais sauter et copier et coller les informations de mon hôtel comme ça. Et puis je vais m'assurer de les déplacer tous les deux juste au-dessus de mon séparateur. Mets ça là. Et on va appeler ça à propos de l'hôtel. Donc, ce que je vais faire est de me débarrasser de cette partie inférieure et de la mettre à l'extérieur. Alors voyons. Je peux peut-être écrire ça ici. Dégrouper celui-ci. ai ma section d'hôtel ci-dessus là-bas et je peux m'assurer qu'il est 100, donc comme ça. Et enfin, ce que je vais faire, c'est aussi que je peux le mettre dans une pile si je le veux, mais je ne vais pas le faire. Je ne vais pas m'embêter avec tous ces détails. Je vais simplement utiliser ceci et je vais utiliser les textes de MyLocation. Donc ceci et le texte, Voyons voir, Contrôle D et Contrôle C. Contrôle D. Donc je vais utiliser ces deux-là. Vous pouvez appuyer sur Control X si vous le souhaitez. Pour les couper en dehors de cette section. Sauter ici à cette section de contrôle V. Et ce que je vais faire, c'est simplement utiliser ma note, positionner la juste ici. Et voyons, par exemple, je peux m'assurer qu'il est 20 ans parce que je ne pense pas qu'il ait besoin d'être beaucoup plus élevé. Et assurez-vous que ce texte est bien aligné sur notre grille. Alors je vais m'assurer que c'est au centre. Et je vais simplement utiliser les textes du site web factice comme alors assurez-vous qu'il est bien aligné une fois de plus. Assurez-vous que ça va jusqu'ici et que l'habitude de Terry que nous avons est au sujet de la section hôtel. Maintenant, je vais le positionner à 100 comme ça. Et ici, nous allons avoir une section de la dette qui ne va pas être déplacée, mais cette section va déplacer du sel. Débarrassez-vous rapidement de cela parce que nous n'en aurons pas besoin. Nous allons avoir besoin de tout cela. Alors mettons-les à l'intérieur. Donc d'ici à ici. Mais quelques infos. Et une autre chose que je vais faire est simplement d'étendre cela jusqu'ici, juste pour me donner plus d'espace ici qu'ici, parce que nous allons avoir besoin de cet espace. Donc la première chose que je vais faire est de positionner ça à 100 d'ici. Et à l'intérieur d'ici, je vais écrire dans les caractéristiques de l'hôtel comme ça. Ensuite, je vais me débarrasser de ce diviseur ou encore mieux, je peux simplement le déplacer vers le bas quelque part ici parce que je veux que cette section soit plus étroite. Je veux que ce soit six colonnes de large. Donc 2, 4, 6, je voulais finir ici. Donc, je vais en fait prendre mon diviseur, cliquez et maintenez la touche Maj enfoncée jusqu'à ici écrire donc 1, 2, 3, 4, 5, 6. Ouais, c'est bon. Simplement étendu à ici. Maintenant, nous allons utiliser ce diviseur beaucoup tout au long de notre conception. Alors passons rapidement et concevons cette section. Et puis dans la prochaine vidéo, je vais revenir et concevoir dans cette bonne section parce que ça va être assez délicat à certains moments. Donc, ce que vous allez faire est en fait utiliser ces activités, mettez-les dans un clic de pile juste ici. Et en fait non, laissons-les en dehors de la pile. Pour l'instant. Je vais utiliser ces trois. Positionnez-les ici, assurez-vous que c'est au centre. Et puis ce que je vais faire est d'utiliser ce truc de rectangle une fois de plus. Alors utilise-le jusqu'ici. Assurez-vous qu'il est de deux colonnes de large comme elle est. Sélectionnez mon vélo. Puis cliquez dessus une fois de plus et utilisez mon repas dehors. Positionnez-le ici et utilisez des touristes culturels comme ça. Maintenant, je vais m'en débarrasser. Et maintenant, je vais commencer par changer toutes ces icônes. Donc, la première chose que nous allons changer en fait est le stationnement gratuit. La prochaine chose est une salle de gym privée. Le prochain, c'est le concierge. Donc, parce que ce sont des caractéristiques de l'hôtel, c'est ce que vous avez à l'intérieur de l'hôtel lui-même, pas à l'intérieur de la chambre. Cette information va descendre un peu plus loin parce que vous devez choisir vos chambres. Donc, ce que nous avons ici, c'est l'accès Wi-Fi. Alors, allons de l'avant et changeons tous ces éléments aussi. Donc ça va être un parking gratuit et je vais mettre la vidéo en pause ici, donc je ne vous dérange pas de renommer tous mes dossiers. Ok, maintenant que j'ai fait ça, la dernière chose à faire est de changer ces icônes. Donc je dois les localiser ici. Donc je dois trouver mon aboyement libre. Et voyons ce qu'il est ici. Il suffit donc de le glisser et de le déposer à l'endroit de l'icône précédente et assurez-vous de le positionner au centre de votre texte. Utilisez la version de plan et passez à l'autre. C' est la salle de gym privée, donc la voilà. Assurez-vous qu'il est juste là. Et ce que je vais faire, c'est mesurer. Donc j'ai 40 ans, j'ai besoin d'avoir 40 ans ici. Comme ceci et utilisez la version outline. Suivant plus 12 concierge, glisser-déposer et voir 23, 40, utiliser la version contour et Jumpin ici. Nous sommes à la piscine privée. Donc il est situé ici, il est juste ici. Et c'est vraiment la fonctionnalité soignée d'Adobe XD. J' aime vraiment comment ils l'ont fait, parce que vous pouvez facilement basculer entre toutes ces différentes icônes à tout moment. Donc un service de chambre comme ça. Utilisez le contour, assurez-vous qu'il est au centre. Et puis enfin pour l'icône Wi-Fi. Ici, c'est. Mais je dois d'abord sélectionner mon icône ici. Vérifions ça. Icône des visites culturelles, ça va être l'icône Wi-Fi comme ça. 40. Assurez-vous que c'est au milieu de ça. Donc, nous l'avons là. Nous avons terminé cette section. Vous pouvez voir à quel point c'était simple et facile. Maintenant, la dernière chose que je vais faire est de m' assurer que ces trois en bas sont 80 du haut. Alors faisons-le maintenant. Et si on vérifie, c'est 85. Maintenant, il est 80, ce qui est génial. Et quelque chose ne s'aligne pas très bien avec les solides de l'icône d'arrêt vérifier rapidement cela. Donc je vais le faire avec mon parking gratuit. Pour une raison quelconque, il ne s'aligne pas. Et il est préférable de réparer ça maintenant, puis plus tard à l'intérieur de la phase de conception, ce concierge. Maintenant, en fait, pendant que nous sommes ici, vérifions ces derniers. Et il y a quelques légères modifications à eux. Parce que parfois, lorsque vous changez ces icônes va modifier votre position légèrement. Donc les habitudes laitières, c'est maintenant terminé et nous pouvons mettre ces icônes et voir peut-être 100, quelque chose comme ça. Ouais, Voyons voir, on peut utiliser le séparateur et le positionner comme 40. Comme ça. Là, nous l'avons. Cet hôtel dispose de la section est fait. Comme ça. Ensuite, nous allons avoir un type de chambre. Donc je vais dupliquer cette section, la déplacer vers le bas. Voyons voir, peut-être qu'ils peuvent le positionner comme 100, comme ça. Et je vais l'appeler comme un ensemble, nos propres types. Maintenant, je vais me débarrasser de ces activités, mais je vais laisser le séparateur. Ce que je vais faire est d'utiliser ces mêmes paramètres pour les images. Donc une fois de plus, deux colonnes de large, quelque chose comme ça, alors verrait nous pouvons avoir cinq sans ombre de bordure, donc 55, 10. Et nous pouvons utiliser ce même 5% d'obésité. Et ce que nous pouvons appeler ceci est, par exemple, une image de type OEM. Je vais le positionner ici. Et voyons pour la distance que nous pouvons parcourir avec 40 par exemple. Et allons-y rapidement et changeons son nom pour que vous puissiez voir que c'est comme ça. Et maintenant, allons de l'avant et ajoutons quelques textes. Mais par exemple, je peux même dupliquer celui-ci, le positionner ici. Voyons voir. Nous pouvons utiliser je ne sais pas pourquoi tout cela est hors de l'ordre. Vérifions ici. Je pense que c'est bon. Alors peut-être que nous devons le changer ici aussi. Désolé, mais mieux sûr que désolé. Je dis, c'est bon. D'accord. Alors passons à autre chose. Et comme je l'ai dit, nous allons avoir un type de chambre. Tout d'abord, je vais utiliser Poppins 24 boulon comme ça et m'assurer qu'il est gris foncé. Voyons voir 24. 24 gras. Ok, et voyons le gris clair. Le gris foncé fonctionne bien. Appelons ça petit. Et voyons pour la distance qu'on peut mettre à 20. Alors, juste ici. Et puis le contrôle D pour le dupliquer. Et je vais utiliser Poppins 18 pour ça. Et je vais utiliser le même gris foncé pour améliorer garder, copier et coller ce texte. Je vais le monter automatiquement et le positionner ici pour qu'il s'adapte vraiment bien avec celui-ci. Tellement cool. Comme papa voulait de l'intimité et c'est bon. Et positionnez cela comme 20. Organisons-le rapidement si petit quand deux ou vers le bas à tous les types. Donc, c'est là. Cela va être petit du tout. Contrôle D pour le dupliquer, positionné juste ici et la position de contrôle D est juste ici. Cette deuxième salle s'appellera Président. Alors ce dernier mandat sera appelé exécutif. Comme ça. Donc, pour le Président. Et nous allons également copier et coller du texte de mon dessin original. Ce n'est pas comme cette image d'exécution. Numéro deux, je suis aussi renommé ceci parce que ce sera beaucoup plus simple plus tard quand vous arriverez à les exporter. Et je te le montrerai plus tard quand on aura la partie exportatrice. Donc exécutif, encore une fois, les choses que vous pouvez faire pendant que vous concevez, faites-les parce que plus tard, ils vont s'accumuler très rapidement et Daniel va être vraiment coincé. Et je ne sais pas où trouver le temps de finir toutes ces corvées. Alors que faire ici, ici sont les types de chambres. Et maintenant je pense que c'est le bon moment pour sauvegarder ce fichier. Alors appuyez sur Control S, ou comme je l'ai dit, si vous l'avez utilisé dans le cloud, il va enregistrer automatiquement. Donc fondamentalement, une fois qu'il aura atteint Enregistrer, ce que je vais faire est de dupliquer cette section et de la déplacer vers le bas. Positionnez-le jusqu'ici. Et je vais appeler cette chambre, c'est beaucoup comme si changer ça en une chambre. Oui. Comme ça. La première chose est la climatisation. Et laissez-moi rapidement aller de l'avant et copiez et collez tous ces éléments. Ça va être la cuisine. Ce sont donc évidemment les choses qui se trouvent dans la pièce elle-même. Télévision par câble. Ça va être un verrou de sécurité. Et enfin, nous avons un micro-ondes. Comme ça. Alors maintenant, je vais mettre la vidéo en pause pour que je puisse renommer mes dossiers. Et maintenant que je l'ai fait, allons-y rapidement et changeons toutes ces icônes. Donc, une fois de plus, je vais les sélectionner et voyons la climatisation. C' est pourquoi il est toujours utile de sauvegarder toutes ces icônes. Donc vous avez la climatisation, je peux glisser et déposer contour. Voyons voir, Nous sommes à 40 cuisine est la prochaine, mais comme toujours, J'ai oublié de le sélectionner. Donc, la cuisine. Et voilà. Il y a 40 lignes d'urgence pour laver les contours et assurez-vous qu'il est au centre avec notre texte. Comme ça. Merci Dawn est la télévision par câble. Donc TV que 40 décrit en toute sécurité pour verrouiller leur contour de coupe de cheveux et s'assurer qu'il est dans les données centralisées. Ensuite, nous avons enfin cette icône de micro-ondes. Encore une fois, assurez-vous qu'il est au centre et je vais vraiment le laisser ici. Vous pouvez voir que c'est 62 mots qui ressemblent au centre de ceux-ci, donc je vais juste le laisser là. Donc, une fois de plus, juste le globe oculaire rapidement, il s'assure qu'ils sont tous dans le centre de. Un oser lignes de grille, dont ils sont heureusement ici. Et je vais les fermer tous très rapidement. Comme ça. Et fondamentalement, il meurt, la prochaine section sera des services disponibles et fondamentalement sera juste un texte de base. Voyons ce qu'on peut copier. Nous pouvons, par exemple, copier cette section ici. Donc le contrôle D, médecin à sont ici et assurez-vous que vous allez de l'avant et supprimer la cote par exemple. Et là, et je vais le positionner tout le long juste au-dessus de notre uniforme du bas. Assurez-vous qu'on est à 100 ans comme si on était comme de la saleté. Et quand appeler ces services disponibles comme la saleté. Et je vais aussi m'assurer de me débarrasser de ce séparateur. Je vais utiliser un séparateur d'ici, positionné ici. Assurez-vous que je le mets quelque part ici, par exemple, parce que cette section va être un peu plus longue. Donc ce que nous allons faire ici, c'est, voyons. On peut utiliser cette icône. Tout d'abord, dupliquons ceci. Appelons ça un service de bed and breakfast. Voyons voir Poppins 24 lumière, mais je vais garder la largeur automatique à cela. Et voyons, ça va être Poppins 18 à quelque part par ici. Voyons voir. Je peux le garder à ça. Donc six, je peux positionner ici et simplement autour mon texte où nous allons entendre le dîner de fonction, concierge, le service est limité là comment il puis enfin, par exemple, nous pouvons le garder à 20. Quelque chose comme ça. Je pense que ça marche bien. Mais au lieu de Poppins 24, je vais le changer à 18. Donc jusqu'à ce que je fasse gris foncé. Voyons maintenant. Je pense que ça marche très bien. Donc une fois de plus 20 et ce que je vais faire ici est inclure l'icône de la dette. Voyons où c'est. Si je l'ai apporté, j'ai fait l'icône du petit déjeuner, je vais l'amener ici. La position est juste ici. Et je vais m'assurer que ces deux-là sont à 40 ans et sont allés pour m'assurer que c'est à 100 ans. Mon texte n'ai-je pas eu assez d'espace pour jouer avec ? Et une dernière chose que je vais faire est de m'assurer que cela est décrit. Donc icône du petit déjeuner, nous allons appeler cette section services disponibles. Ensuite, je vais positionner ça ici et un bed and breakfast qualitatif comme ça. Je vais en faire un double. Je vais déplacer cette partie inférieure vers le bas. Et voyons voir. Par exemple, je peux m'assurer que c'est 40 pour quelque chose comme ça. Et ce que je peux faire, c'est appeler ce service tout compris. Comme ça. Un peu vite, copiez et collez mon texte sur mon bureau. Enfin, je vais déplacer ce séparateur vers le bas et quand m'assurer qu'il est 40 une fois de plus. Et c'est fondamentalement tout pour cette section, renommez simplement ceci en service tout compris comme ça. Et je peux fermer cette section et passer à autre chose. prochain est le plan de voyage, mais je vais faire une pause. Je vais arrêter la vidéo ici et nous pouvons continuer dans la prochaine vidéo juste pour que je puisse organiser les choses un peu mieux, mais nous n'avons pas trop d'informations là-bas. Ce que nous avons est le voyage fade et nous avons des excursions disponibles. Nous avons l'emplacement, le prix comprend N politique d'annulation. Donc c'est tout pour cette vidéo, nous allons maintenant passer à la suivante. 21. Créer des Wireframes dans Adobe Xd 8: Passons maintenant à la section suivante, qui va être planifiée. Donc je vais frapper le contrôle D sur celui-ci. Assurez-vous que je suis à la même distance. Donc sur 100 position ici et appelez ce plan de voyage. Puis à l'intérieur d'ici, et appelons ça « voyage ». Et ce sera fondamentalement un. Ce sera dans D deux à 13 par exemple. Et nous allons créer un jour de plus 14. Avant, je vais me débarrasser de ces deux icônes comme ça. Je vais m'assurer qu'ils sont à 40 ans l'un de l'autre comme ça. Et je vais mettre en faire une dernière copie pour ici. Alors 123. Ça va être le jour 14. Comme ça. Ensuite, je vais les déplacer tous pour être à 100 ans d'ici. Comme ça. Et comme je l'ai dit, va être un. Ça va être les deux, 13. Et cela va être d 14 parce que imaginons juste que ce service a duré 14 jours. Je peux rapidement aller de l'avant et copier et coller une partie de ce texte. Et enfin une de plus. Je l'ai fait. Allons-y maintenant et organisons-les un peu mieux. Donc, une fois de plus, assurez-vous que c'est à 40. Et j'utilise la copie réelle ici juste pour que nous ne perdions pas trop de temps plus tard dans la conception parce que la section filaire va nous prendre le plus de temps. Maintenant que cela est terminé, nous pouvons passer aux excursions disponibles. Et pour la dette, nous allons avoir besoin d'une section avec des icônes. Alors appuyez sur le contrôle D. Je vais l'appeler excursions disponibles. Je vais le déplacer jusqu'ici et m'assurer qu'il est 100. Et cela va être des musées, croisières fluviales, des visites culturelles et des promenades en montgolfière. Ce sera l'exploration de la ville. Et enfin, des voyages de camping. Et parce que vous avez déjà vu ce processus quelques fois n Vous voyez ce que j'ai fait ? Je vais remplacer toutes ces icônes et je vais renommer tous ces dossiers, puis je vais revenir. Maintenant que j'ai fait ça, on peut passer à la section suivante. Et la section suivante va être assez simple en fait, elle va juste contenir une carte et un emplacement de l'hôtel. Mais avant cela, vérifions rapidement et voyons si notre séparateur est à 40 ici. Voyez-vous, ce qui est génial. Excursion disponible, je vais le déplacer jusqu'ici. Et pour celui-ci, je vais utiliser en fait est cette section. Si bon contrôle D, parce que je vais juste avoir besoin de quelques choses. Ou en fait peut-être même de l'importance. Nous pouvons peut-être utiliser celui-ci parce qu'il a déjà une image. Oui, faisons-le. Donc votre téléphone portable peu plus de temps. Écoute-la ici. Et le suivant va être appelé comme un hôtel fixe. Alkylation. Vent pour le déplacer jusqu'ici. Et si vous vous demandez comment tout ça va marcher, ne vous inquiétez pas, une fois ces sections terminées, je vais vous expliquer. Comme on l'a dit, c'est l'emplacement de l'hôtel comme papa. Et pour ça, je vais utiliser, Voyons voir, Poppins 24, mais je vais utiliser un habitué. Trouvons dans le droit ici ou broches 24, pas la lumière. En fait. La lumière est un peu bonne, donc appliquée pour utiliser la saleté. Et ce que je vais faire, c'est revenir ici et supprimer et DCE 2. Je vais mettre ça en dehors d'un groupe et je vais les utiliser et les déplacer vers un néerlandais. Alors pour notre carte, je vais utiliser 7, 9 à la semaine 3, 0, 3. Donc c'est beau et grand. Et enfin, je vais mettre ce texte à 40. C' était aussi le séparateur. Parfois, pour nos textos, je vais utiliser celui-ci. Je vais simplement l'étirer jusqu'ici, ce qui fonctionne très bien. Et enfin, je vais simplement écrire en rouge ici sur l'emplacement. Et pour cela, ce que vous pouvez utiliser est un plugin. Alors voyons ce que j'ai ici. J' ai ce plug-in appelé cartes fantaisie. Et ce que je peux faire est d'entrer des allocations de ressemblent à Paris. Je peux cliquer ici. Et une fois que c'est faux Paris, tu peux le coiffer. Vous pouvez donc choisir une carte comme celle-ci. Vous pouvez choisir une carte comme celle-ci, et vous pouvez zoomer sur le niveau de la ville, quelque chose comme celui-ci et appuyer sur Appliquer la carte. Ça va faire sa magie. Et comme vous pouvez le voir, il va localiser celui-là. Le problème, c'est que tu ne peux pas bouger Alors peut-être que vous pouvez zoomer un peu plus pour vous débarrasser du signe de Paris, puis appuyez sur Appliquer la carte. Et ça va se débarrasser du Paris lui-même. Donc, je peux sauter ici et trouver ma carte de localisation des broches. C'est là. Je vais le glisser et le déposer ici. Et je vais appeler cette image de carte. Carte d'automne et BG, comme vous voulez l'appeler. Et je vais le mettre dans une carte de qualité de groupe. Et je vais appeler ce texte par exemple. Et juste pour garder les choses organisées un peu mieux. Et c'est fondamentalement tout. Les deux sections suivantes seront essentiellement les mêmes. Ils vont être tout au sujet du texte. Donc, pour vous faire gagner un peu plus de temps, Copions-les rapidement et collez-les ici. Et je vais les traîner ici juste pour ne pas t'ennuyer. Mais fondamentalement, comme vous pouvez le voir, ces sections sont exactement les mêmes et ressemblent exactement à toutes ces autres sections. Et voyons, ça ne marche pas pour nous. Donc, nous allons changer ça pour la pop est 36 gras. Donc le prix comprend, va être quatre broches, 36 volts. Donc comme ça. Et on va le déplacer comme ça. Ça va être 36 audacieux. Déplace-le comme ça. Et voyons voir. On peut passer à 100 et à 100. Et fondamentalement, ces sections sont terminées. Comme vous pouvez le voir. Ce que je vais faire, c'est les regrouper tous. Je vais donc appeler ça une information de voyage, par exemple, parce qu'elle contient toutes les informations sur notre voyage. Donc, sur notre hôtel, sur l'endroit où nous séjournons, sur les types de chambres, sur tout cela. Donc, la politique d'annulation et à propos de l'hôtel et juste en dessous. Donc, des caractéristiques de l'hôtel à la politique d'annulation frapper Control G. Et comme je l'ai dit, je vais appeler ça une information de voyage. Maintenant ce que je vais faire, et si vous vous demandez comment nous allons réellement réduire l'échelle et comment tout cela va ressembler. C' est en fait assez facile parce que nous allons simplement utiliser des groupes de défilement dans Adobe XD. Donc, disons que je veux le garder, par exemple, de simplement le mettre dans un groupe d'abord. Donc, ce défilement vertical. Et vous pouvez bien sûr choisir où vous voulez qu'il se termine au sommet, je voulais juste finir quelque part par ici, donc juste au-dessus de mes caractéristiques de l'hôtel. Et en bas, je voulais finir par ici. Je veux donc que les gens voient qu'ils sont des chambres et qu'il y a ces noms ou les chambres, mais ils peuvent aussi descendre plus loin. Et vous pouvez toujours vous assurer que pour étendre cela ou pour le rétrécir ou faire ce que vous voulez. Je suis également renommé en informations de voyage. Donc, si j'appuie sur l'aperçu où j'entends et que je le fais glisser ici, si on fait défiler vers le bas, vous pouvez voir qu'il reste juste là. Donc ça va être sympa et grande section. Et la prochaine section que nous allons réellement concevoir est cette section juste ici à droite. Donc, cette section, comme vous pouvez le voir, les utilisateurs peuvent facilement faire défiler vers le bas, facilement naviguer pendant que cette section va rester en place, Il ne va pas changer et il va améliorer les ventes et massivement, parce qu'ils ne peuvent pas faire défiler cette partie, ils ont dû faire défiler cette partie. Ils peuvent voir cela et ensuite cela augmente le potentiel qu'ils réservent réellement le voyage et utilisent réellement cette fonctionnalité plus que de simplement le sauter Aller à la page suivante. Donc, ce que je vais faire, c'est déplacer cette information de fond parce que nous avons fini avec elle. Et je vais bouger avec ici, par exemple, et couper cette page à peu près ici pour que nous puissions avancer vers le plus près de nous. Alors voyons. Peut-être qu'il peut déplacer ça à quelque chose comme ça. Voyez où nous sommes. Nous sommes donc à 95, vers 100. Maintenant, nous en sommes à 150. Donc maintenant, si je touche aperçu juste pour vous montrer, Il est là. Donc, le peut encore voir cette section ici. Et ils peuvent interagir avec elle. Mais cela reste le même et cela reste mis. C' est pour cela que nous concevons et c'est ce que nous visions. Une plus grande conversion et un plus grand séjour dans ces sections et, espérons-le, beaucoup plus d'inscriptions et beaucoup plus de réservations. Donc c'est tout pour cette vidéo. Dans la prochaine vidéo, nous allons revenir et concevoir cette section qui va être pleine de champs dans les formulaires. Ça va être assez fastidieux. Donc je vais le laisser pour la prochaine vidéo plutôt que de l'inclure dans celle-ci. Et je te verrai dans la prochaine. 22. Créer des Wireframes dans Adobe Xd 9: Allons maintenant de l'avant et concevons cette barre latérale. Et pour ce faire, je vais utiliser mon rectangle et m'assurer que j'ai six colonnes de large, comme ça. Je vais également utiliser ces mêmes paramètres. Donc, sans aucune bordure et quand utiliser l'ombre. Donc 55 zone, fondamentalement la même ombre. Et je vais m'assurer que je suis 5 % à l'opacité. Et je vais l'appeler la barre latérale BG. Je vais aussi le mettre juste en dessous de mes informations de voyage, donc il reste juste ici à droite. Ce que je vais faire, c'est recycler certains éléments et les utiliser autour. Donc la première chose que je vais utiliser, c'est ce gros bouton. Et je peux aller ici, chercher big btn, faire glisser et déposer juste ici. Je vais fermer ça. Et avant de passer à autre chose, je vais utiliser et prix. Voyons si je peux prendre ce contrôle des prix. Je peux sauter ici. Contrôle V, je peux le positionner ici, et je peux sauter à l'intérieur de mon dossier, le faire glisser ici. Et voyons où est ce gros bouton ici il est. Et dépose-le ici. Je vais écrire dans le livre maintenant, changer ça en 1290. Avant de passer à autre chose, voyons rapidement si nous sommes sur la bonne voie. Nous le sommes. Changeons à l'intérieur de l'état d'horreur ainsi livre maintenant aller à l'état par défaut. Et ces deux-là, je vais m'assurer qu'ils sont au centre. Donc, d'abord, nous allons les centrer à l'intérieur et nous allons les positionner comme ça. Donc la première chose que je vais changer, c'est la distance. Donc, nous allons les regrouper, assurez-vous qu'ils sont au centre. Gros bouton. Assurez-vous qu'il est au centre aussi. Et pour ça, assurons qu'il est 40. Donc, sélectionnons ces deux rapides ici, 1, 2, 3, 4. Et puis faites la même chose pour celui-ci. Comme des morts. Donc nous allons avoir tous ces champs. Et laissez-moi vous montrer ça très vite pour que vous puissiez voir ici. Donc, nous avons check-in, check-out, le mauvais type, service pour adultes, excursions et total. Donc fondamentalement la même information que nous venons de créer ici. Ainsi, les utilisateurs peuvent simplement choisir parmi ces offres ici sur la gauche. Ils peuvent sélectionner et appliquer ces offres ici sur la droite. Enfin, cela va mettre à jour le prix en temps réel. Et puis ils peuvent cliquer sur le bouton Réserver maintenant, puis ils peuvent passer à la page suivante, qui va être la page de paiement, et nous allons concevoir cette prochaine. Donc la première chose que je vais utiliser, c'est ça. Donc, je vais utiliser ce prix, par exemple, je vais sauter ici. Cliquez sur Basé. Et je vais aussi positionner ça à 40 ans, comme ça. Et puis je vais le déplacer juste au-dessus de mon prix. Ça va s'appeler des excursions. Et je passe de bas en haut parce que nous allons changer certains éléments un peu plus tard. Donc, d'abord les choses pour les excursions de dette, ce que nous voulons faire est d'appeler cela l'entrée vg, par exemple. Mais encore mieux, Laissons-le à la liste déroulante BG parce que c'était comme ça. La première chose que je vais changer est les largeurs de 500, huit, je vais changer que 70 va être pour la hauteur. Donc c'est bien. Et nous allons simplement utiliser cette icône de flèche. Voyons voir, flèche vers le bas, je vais le glisser et le déposer en place. Était-ce ? Ce n'était pas le cas. Et faites-le glisser jusqu'ici. Ici, c'est. Et je vais déplacer ça aère par ici parce que je vais enlever ce signe de dollar. On n'en aura pas besoin. Et je vais m'assurer que ce soit 40 ans. Et ça va dire « tout compris », par exemple. Parce que les dettes, par exemple, l'option que les utilisateurs ont choisi. Et puis je vais m'assurer que cette flèche est à 40 de la droite. Donc 1, 2, 3, 4, comme ça. Une fois de plus, assurez-vous que tous sont au centre comme ça. Ils le sont. Dans une dernière chose, je vais sélectionner la barre latérale ET excursion, assurez-vous qu'ils sont au centre. Et enfin, assurez-vous qu'ils sont 40 à partir d'ici quand j'ai dupliqué, donc Contrôle D et positionnez-le vers le haut. Comme vous pouvez le voir, ça va être comme cet insecte avant de passer à autre chose. Ce dont j'ai besoin ici, c'est le texte lui-même. Donc, je vais utiliser, par exemple, ce Poppins 24. Donc je vais le dupliquer. Et voyons, assurez-vous que c'est, par exemple 20. Et je vais m'assurer qu'il correspond à mes commentaires. Donc mon tombé sur BG, je vais positionner ceci ici sur inclusivement, juste les commander un peu. Ce sera, comme je l'ai dit, Poppins 24. Alors faisons tomber ça. Poppins 24 lumières. Assurez-vous qu'il s'aligne et assurez-vous qu'il est 20, comme ça. Et enfin le mélange, c'est cette couleur gris foncé qui est tout compris. Et on va l'appeler, désolé, ça devrait être des excursions. Et ça va être des musées. Donc des excursions. Musées, ce qui est très bien. Encore une fois, juste un contrôle rapide avant de passer à autre chose. C' est génial. C'est 40, c'est bon. Maintenant, le service est ce qui va être le prochain. Donc, une fois de plus, assurez-vous qu'on est à 40 ans. C' est le service. Et je fais cela parce que lorsque vous dupliquez Adobe XD le met sur le dessus. Parce que je connais déjà ma mise en page, je sais déjà à quoi ça ressemble. Je vais aller de bas en haut. C' est beaucoup plus simple de cette façon. Donc le service. Et ici, nous allons écrire en tout inclus, comme ça. Et puis Control D. Je vais le mettre ici. Ça va dire adultes. Et on va écrire en deux comme ça. Et pour celui-ci, parce que nous voulons faire la moitié de la taille de celui-ci, solide C, nous pouvons le dire, donc liste déroulante BG, nous pouvons le mettre deux à quatre par exemple. Donc c'est juste la moitié de la distance des entrées d'origine. Le Peut-être que je peux faire ça. Aucun changement. Essayons maintenant. Il est là, 1, 2, 3, 4. Là, nous l'avons. On a des adultes pour contrôler D. Et je vais bouger ça, appeler ça des enfants. Ça va être des adultes comme ça. Donc ça va être des enfants. Et disons un par exemple. Donc un seul enfant vient avec ses parents. Donc, nous allons aligner ça avec celui-ci et tout ce qu'il fait avec celui-ci. Nous avons donc la distance de 60. Donc c'est la distance entre nos gouttières. Comme je l'ai expliqué précédemment. Encore une fois, nous sommes à 40 ans ici, donc c'est bon. Je vais dupliquer celui-ci, déplacer vers le haut comme ça. Positionnez-le pour moi. Bien sûr, il est 40 et ça va être à la maison comme ça. Et un type de chambre sera président, par exemple. Parce que ces gens ont besoin de leur chambre parce qu'ils voyagent avec des enfants. Donc, avec un enfant, dans ce cas, le type de chambre. Enfin, ce que nous voulons inclure ici est cette icône plus. Alors cherchons ça. Je pense que ça s'appelle proche. Oui, ça l'est. Il suffit de le faire glisser et de le déposer ici. Je vais le fermer. Et puis je vais me trouver ici. Donc un type de chambre ici c'est. Fermez l'icône, placez-le à l'intérieur et assurez-vous qu'il s'aligne avec cela. Un texte de type dôme comme ça. Et assurez-vous aussi que ça va tout le chemin vers la droite, comme ça. Comme je l'ai dit, nous avons le point d'écoute à l'intérieur. Icône si proche parce qu'il est tourné, il nous donne cette illusion qu'il a un point de frappe. Donc, fondamentalement, il a des dettes. Maintenant, la seule chose qu'il nous reste à faire est de créer cette réservation en haut. Donc, pour le check-in et check-out, enfin, nous allons créer dat. Donc, pour ce faire, je vais dupliquer un de ceux-ci. Utilisons donc nos adultes, par exemple, parce que nous allons en avoir deux. Et remontons-le comme ça. Comme ça. Et voyons ce que je peux changer. Par exemple, je peux supprimer cela. Je peux sauter à l'intérieur de ça. Et je vais en fait changer cela plus tard et inclure différentes animations à l'intérieur. Mais pour l'instant. Allons vite inclus, donc je vais changer la hauteur à 118, comme ça. Et puis je vais le déplacer 40. Et voyons, nous sommes à la distance de 18 du haut. Peut-être pourrions-nous même augmenter la taille de ce contexte global. Ou nous pouvons réduire ces distances à 20, ou nous pouvons jouer avec elle un peu plus tard. Mais pour l'instant, laissons-le et voyons où nous sommes. Donc on va appeler ça en vérifiant mon DAT. Et à l'intérieur de l'enregistrement, je vais en fait me débarrasser de la flèche de la liste déroulante. Je vais appeler ça, vérifier le. Contrôle D. Je vais positionner ce connu et par exemple, le 22 mars. Alors quand il veut Avril 2021. Et je vais aussi changer ça en gris foncé juste pour les différencier un peu plus. Et donnons-leur une distance de 20, par exemple. Et réservez-les comme ça. Et assurez-vous que nous sommes à 40 de ce bord, ce que nous sommes. Donc c'est notre check-in. Et nous devons également concevoir une caisse. Donc je vais le dupliquer rapidement, assurez-vous que notre allumer comme ça. Ça va être vérifié. Et disons que c'est le 28 avril, par exemple, et appelons-le un jour. Je vais concevoir un calendrier plus tard et juste vous montrer rapidement comment je l'ai fait. Mais avant que nous le fassions, je vais le laisser vite ici. Donc, fondamentalement, cela détermine combien de temps les gens vont rester ici en fait. Donc, en gros, plus les gens restent longtemps à l'intérieur de l'hôtel, plus le prix sera de quatre pour la chambre elle-même. Donc, quand ils mettent à jour ces informations, il va mettre à jour le prix bas ci-dessous et aussi le nombre de personnes, désolé, le nombre de personnes qui viennent dans cette pièce va déterminer évidemment, combien de lits font ils ont besoin, les types de chambres ou quelle est la taille de la pièce pour commencer ? Excursions. S' ils n'ont pas d'excursions, Dan, ils peuvent en choisir aucune, par exemple, et le prix va baisser. Tu as l'idée orale. Donc, une dernière chose que je veux faire est d'augmenter la taille de cette barre latérale BG en fait. Donc ce que je vais faire, c'est utiliser tous mes éléments. Mettez-les ici, 1, 2, 3, 4. Et puis je vais aligner ma barre latérale BG comme ça. Utilisez le bouton, posez-le 40 vers le bas et faites-le descendre. Parce que je ne sais pas, comme Matt, tu peux utiliser du tapis si tu veux. Maintenant, enfin, c'est terminé. Je vais les regrouper tous, appelez ça la barre latérale. Et évidemment, nous allons créer cela plus tard pour être des menus déroulants et être toutes sortes de choses différentes. Mais pour l'instant, laissons ça comme un dit dans parce que nous allons le garder tel qu'il est. Une dernière chose que je veux faire est de l'aligner avec ça. Donc, nous avons des caractéristiques de l'hôtel. Donc, nous pouvons aligner cela avec cette section juste ici, pour que les deux restent exactement comme ils le devraient. Donc, quand j'appuie sur l'aperçu et quand il saute ici, vous pouvez voir que cela va rester mis juste ici. Et évidemment, les développeurs peuvent le réparer en place. Alors imaginez qu'il est juste ici et que toute cette section sur la gauche va faire défiler vers le bas et les utilisateurs peuvent évidemment voir toutes ces informations avant qu'ils frappent le bouton livre maintenant. Alors fermons ça. Et la section que j'ai oublié d'apporter à l'intérieur d'ici est si un spectacle vous. Nous allons donc avoir des hôtels similaires, que nous n'avons pas inclus ici à l'intérieur de cette section, à l'intérieur du filaire de papier. La section hôtelière similaire est essentiellement là. Juste pour vous donner d'autres options parce que cette agence travaille avec tous ces différents hôtels. Donc, évidemment, ils ne s'en foutent pas vraiment. Dès que vous réservez quelque chose. Ils, ils, vraiment, ils récupèrent leur argent donc ils ne se soucient pas vraiment si votre livre cet hôtel ou tout autre hôtel. Évidemment, plus l'hôtel est cher, plus ils auront d'argent. Mais ils sont évidemment garderie pour vous de réserver n'importe quoi plutôt que rien du tout. Donc ce que je vais faire ici, c'est sauter ici, frapper Contrôle C. Je peux copier cette section. Laisse-moi fermer toutes ces choses. Contrôle V, déplacez ça ici. Et je vais m'assurer que c'est à 150 ans. De ça. Je vais le mettre juste en dessous de ma barre latérale. Je vais taper dans des hôtels similaires comme ça. Et juste sans deux t et juste un. Et je vais copier mon texte. Et ce que nous allons faire ici, c'est essentiellement utiliser les mêmes pour l'emplacement. Donc les mêmes que ici pour ces villes. Et utiliserait le contrôle C pour copier l'un d'entre eux. Sauter ici, frapper Contrôle V et voyons, à partir de là, nous pouvons passer à 100 par exemple, comme ça. Et ça va être Hôtel. Et évidemment, je vais changer un peu parce que je veux juste inclure trois hôtels différents par exemple. Alors étendons ceci jusqu'à ici. Et voyons que nous pouvons, par exemple, voyons, disons que je veux bouger ces jours-ci. Donc, ces jours-ci, tout le chemin à ici, par exemple, pour être 10 pixels parce que toutes ces informations ci-dessus sont 10 pixels aussi bien. Et puis parce que c'est dans une pile, je peux simplement l'étendre pour être jusqu'ici. Et puis je peux bouger sur mon diviseur sur le fond pour avoir la même largeur que celui-ci et faire la même chose pour les diviseurs supérieurs ou quelque chose comme ça. Et évidemment, parce que je vais devoir inclure un peu plus d'informations, ce que je vais faire en fait est en collude une pile pour toute cette section. Alors passons à ici. Et toute cette section va être la pile. Donc, ce que je vais faire maintenant est d'utiliser ces informations pour l'adresse. Donc, dans celui-ci, je vais le copier. Alors appuyez sur Control C. et je vais sauter ici à l'intérieur de ma pile et le mettre juste au-dessus. Contrôle V, je vais le mettre ici. Je vais m'assurer qu'il est aligné à gauche. Et voyons, peut-être que je peux en faire 20. Et puis mettez-le ici et puis assurez-vous que ces deux sont 20, comme vous pouvez le voir, parce que nous sommes dans une pile, tout se met à l'échelle vraiment bien. Donc je vais m'assurer d'inclure cette information et je vais juste m'assurer qu'il est 18 ans. Je vais le couper à la hauteur automatique et je vais le ramener à quelque part par ici. Donc, il coupe nos textes vraiment bien ici. Et puis je vais le faire descendre 10 pixels de plus. Donc nous avons beaucoup plus d'espace ici. Je vais copier le nom de l'hôtel. 24 jours. Disons que ça va durer 12 jours comme ça. Maintenant parce que c'est terminé, augmentons dans l'espace comme papa. Et enfin de voyons quelque chose de différent. Ainsi, en 1960, par exemple, pour ce cas particulier, et ce sera le prix. C' est ça pour notre hôtel. Maintenant, faisons deux copies de plus. Donc le contrôle D et ça va être l'hôtel. Et enfin l'hôtel là-dedans aussi. Et nous pouvons même leur donner des noms si nous voulons résoudre l'hôtel 1, l' hôtel 2, et enfin l'hôtel 3. Groupe tous contrôlent G. Ce sera des hôtels. Et enfin, nous pouvons maintenant apporter ce fond pour et l'amener à 150. Ténébreux comme ici. Fermez notre plan de travail jusqu'au bas du pied de page. Donc tout le chemin jusqu'ici et là, nous l'avons. Cette information dans cette page et les sections sont remplies. Comme vous pouvez le voir, parfois cela va vous prendre un peu de temps pour terminer. Parfois, ça va être beaucoup plus simple à compléter. Mais en utilisant ces techniques avancées ou comme un groupe de défilement et comme les points de défilement et une largeur, tous ces éléments fixes, comme vous pouvez le voir, vous allez obtenir vraiment belle page, surtout si vous savez déjà comment votre mise en page va ressembler, à quoi tout cela va ressembler avec quelques animations. Vous pouvez maintenant aller de l'avant et partager cela avec votre client. Et ils peuvent simplement faire défiler avec leurs touches fléchées sur leur clavier à gauche et à droite. Et ils peuvent vous fournir des commentaires d'abord et de base sur cette mise en page, sur ces couleurs, sur la topographie, sur les tailles, aient-ils le style de ces icônes ? Peu comme le style de ces arrière-plans, ombres, et tous ces éléments supplémentaires qui peuvent fournir une rétroaction. Et ils peuvent vous dire : Est-ce qu'ils l'aiment ou non ? Donc c'est tout pour cette vidéo et cette page. Enfin, dans la prochaine vidéo, nous allons passer à cette dernière page, qui sera notre page de paiement. Et nous espérons que nous allons le compléter en une seule vidéo. Alors je te verrai là-bas. 23. Créer des Wireframes dans Adobe Xd 10: Nous allons maintenant plus d'une fin concevoir nos paiements verts, qui va être notre écran final pour notre filaire. Je vais simplement Hall ma touche alt et faire glisser pour le dupliquer. Je vais appeler ça un paiement. Et la première chose que je vais faire est en fait supprimer ceci et supprimer ceci, supprimer toutes ces sections sauf pour la section inférieure. Comme nous l'avons fait pour toutes nos pages et je vais la laisser ici pour l'instant. Ensuite, je vais le regrouper jusqu'ici, Contrôle G et appeler ça Watson douloureux. Et laissez-le comme ça pour l'instant. Maintenant, ce que nous allons faire ici se compose de trois parties. Donc les détails du voyage, qui va lister tous les détails que les utilisateurs ont réservé ici. Ça va consister en paiement. Qui sont les utilisateurs qui vont pouvoir choisir leur mode de paiement ? Et enfin, ça va être hors conformation, ce qui va être hors écran de confirmation. Et ils vont pouvoir confirmer leur choix. Donc, la première chose que nous allons concevoir, c'est la carte qui va contenir ou la totalité de ces renseignements. Alors voyons. On peut le mettre quelque part autour de 100 pixels. Donc fondamentalement la même que la largeur ici. Donc, juste pour garder la cohérence, je vais copier et coller cette section, puis aligner cette assertion. Donc là, nous l'avons environ 100. Et je vais m'assurer et mort jeter. Alors appelons ça un paiement. Ça peut être g. Je vais le déplacer ici. Et comme on le voit, c'est environ 100, c'est 774 en hauteur comme ça. Et nous pouvons utiliser toutes les mêmes informations. Donc cinq sans ombre, 55, 10, enfin 54, l'opacité. Ensuite, je vais taper trois détails comme ça. Et je vais le changer ici. Tout d'abord, je vais choisir, voyons les détails du voyage. Je peux utiliser Poppins 36 gras par exemple, par cela. Et je vais l'aligner comme ça et comme ça. Et puis je vais bouger à 40 ans. Donc 1, 2, 3, 4. Et je vais aussi le déplacer pour le a de gauche à droite. Donc 1, 2, 3, 4. Ensuite, je vais le dupliquer. Positionnez celui-ci ici. Je vais l'appeler paiement comme ça. Et comme nous avons 12 colonnes, nous allons nous assurer que c'est comme ça. Donc, cela prend quatre colonnes. Fondamentalement, ce paiement va prendre quatre colonnes n. Enfin, si nous dupliquons une conformation de plus. Cela va prendre quatre colonnes aussi. Donc 1, 2, 3 et 4. Maintenant, la confirmation, on va l'abaisser à un gris clair. Et nous allons aussi organiser ces choses juste un peu mieux comme ça et aller plus souvent vers le bas comme ça. Parce que les détails du voyage sont ceux qui sont sélectionnés, paiement va venir ensuite et enfin, confirmation. Nous allons donc utiliser les informations de notre carte d'hôtel. Donc celui-là, je vais le fermer, positionner ici. Assurez-vous que c'est quelque part par ici. Et voyons, peut-être que je peux le déplacer pour qu'on le voit. Je ne sais pas. Je pense à quelque chose comme 80. Je pense que ça va se passer. Donc 12345678 d'entre eux, c'est bon. Nous allons rapidement aligner certaines de ces informations et nous débarrasser rapidement de certaines d'entre elles. Donc, nous avons l'hôtel, nous avons une destination, nous avons la note, nous avons l'image de l'hôtel. Laisse-moi le déplacer comme ça. Mais ici, nous allons changer tous ces autres éléments. Donc, tout d'abord, nous allons inclure des informations comme les gens, par exemple, combien de personnes sont à l'intérieur d'un, combien de personnes réservent réellement ce voyage ? Allons-y rapidement et dégroupez ces informations. Je vais laisser ça, mais je vais m'en débarrasser. Donc, pour DAT, utilisons quelque chose comme deux adultes plus un enfant. Et je vais aussi cliquer ici pour que je puisse le déplacer comme ça. Il pourrait contrôler D et voyons, peut-être 20. Mais d'abord, passons à 24. Et voyons, on peut rendre ça plus sombre, je peux le rendre plus léger, juste pour le différencier un peu. Et voyons, je peux déplacer ça à 20 ans. Pour certaines raisons. Parfois, ça me donne ces demi-pixels. Donc je ne sais pas pourquoi il fait ça. Alors voyons. Je peux déplacer ça pour être si tôt. Je pense que ça va bien marcher. Et puis on peut déplacer ces sections à 40. Et puis on peut déplacer ça pour être au centre. Voyons voir. Je peux l'utiliser et je peux écrire au total. Et vérifions comme ça. Je peux le mettre dans une pile, peux utiliser une pile comme celle-ci. Et je peux m'assurer que c'est au milieu. Donc 26 et il est 40 d'ici, 56 d'ici, voyons, 41, donc il est 40 en bas, mais 27 d'ici. Donc, utilisons cette position ici. Laissons ces icônes de l'endroit où ils sont. Et nous pouvons, par exemple, en débarrasser. Et puis peut mettre ceci ici, 1, 2, 3, 4, 5, 6. Donc, c'est exactement le même que celui-ci. Je vais simplement étendre. Ces deux ici et c'est la beauté de ces mises en page parce qu'ils sont assez simples à changer. Ils sont assez simples à contourner. Et nous allons taper les gens ici. Et je vais regrouper ça, appeler ça des gens. Ensuite, je vais utiliser le contrôle D parce que nous allons en avoir quatre. Nous allons allèler une colonne vide et aller directement ici par exemple, et recueillir ceci. Je pense que ça marche bien. Donc, c'est 18 à 24, ce qui est très bien. Cela va dire mauvais type. Alors ne tapez pas. Et ça va sauver la place du président. Donc, tout ce que nous avons sélectionné ici dans la barre latérale, nous allons simplement nous assurer de confirmer ici sur l'écran du paiement. Donc je vais dupliquer ça, assurez-vous que c'est juste ici. J' ai donc 1 colonne vide. Ça va être un service. Et le service sera tout compris. Profondeur. Et enfin, nous allons en avoir un de plus ici. Et on va appeler ça des excursions. Maintenant, je vais juste taper. Oui. Mais vous pouvez parler à votre client s'il veut des excursions personnalisées ici. Ainsi, par exemple, les musées, la randonnée, le tourisme. Donc toutes ces choses avec trois points à la fin par exemple. Alors laissez-le couper ici à 60 km de la droite. Je pense juste que oui est tout à fait suffisant pour cette section. Et je pense que ça va bien se lever. Donc maintenant que nous avons toutes ces informations, ce que je vais faire est essentiellement d'utiliser ceci. Donc nous avons cette carte d'hôtel. Je vais sauter ici et utiliser mon gros bouton et le glisser et le déposer en place. Je vais fermer ceci, retourner à mon panneau de calques et je vais le positionner juste ici. Assurez-vous que c'est au centre comme ça. Et voyons, peut-être que je peux le faire et être à 14 ans. Alors positionnons-le comme ça. Donc 1, 2, 3, 4. Ce que nous avons ici est 94, ce qui est fondamentalement très bien. Peut-être vaudrait-il mieux l'avoir à 100 ans, mais je pense que c'est bien comme ça. Peut-être que nous pouvons couper à cette carte à six pixels peut-être. Voyons voir, nous en sommes à 39 un. Donc, je ne sais pas. Peut-être, mais on est à 40 ans ici. Donc, laissons ça comme ça et ne jouons pas trop avec ça parce que c'est essentiellement la section de paiement. Donc nous allons avoir les détails de l'hôtel et ensuite nous aurons les informations de carte. Alors changeons d'abord ce bouton pour continuer. A pris le paiement parce que le paiement est l'écran, la section de l'écran que nous allons concevoir ensuite. Alors continuez à payer. Et ce que je vais faire est en gros dupliquer ce bouton. Je vais regrouper ces deux-là. Je vais appeler ça les détails de l'hôtel. Comme la dette. Et fondamentalement ce que je vais faire, c'est que je vais cacher ça. Et je vais concevoir les informations de la carte ou plus tard. Mais avant un cacher, je veux juste dessiner rapidement Indes qui sont des lignes directrices. Parce que je veux essentiellement garder la cohérence de tous ces éléments et je veux que tous ces éléments soient dans ce ballpark comme un juste ici. Donc les détails de l'hôtel, je peux maintenant simplement les cacher. Et nous avons ce bouton qui va écrire en paie maintenant, pour une raison quelconque, c'est buggant, alors regardons ça. Je ne sais pas pourquoi. C' est le cas. Je ne sais pas vraiment pourquoi ça ne se montre pas. Comme vous pouvez le voir, nous avons un bug juste ici. Donc, quand je suis passé au vol stationnaire, vous pouvez voir que rien ne change. Permettez-moi donc d'enregistrer rapidement mon document et d'y revenir car il y a évidemment une sorte de bogue avec un Adobe XD. Donc, ou peut-être qu'il changeait cela. Alors vérifions ça. Oui, ça changeait ce bouton donc ce n'était pas un bug. Alors nous allons apporter cela et est allé à l'écriture sont ici, continuer à payer. Et voyons si c'est resté le même ici. Oui, ça l'a fait. Donc, je vais vraiment baisser l'opacité mais la cacher pour qu'elle ne montre pas tout ici. Je vais écrire en paye maintenant. Donc maintenant, c'est bon et parfois ces choses peuvent arriver et vous allez le remarquer plus tard, une fois que nous aurons réellement des étapes d'animation de notre conception. Donc, il va être assez difficile de naviguer dans votre chemin, mais nous allons simplement cacher tous ces éléments. Donc, vous pouvez juste imaginer que les utilisateurs vont cliquer sur paiement. Ils vont venir à cet écran. Donc, permettez-moi même de l'indiquer ici. Avec ça, je vais cacher ça. Donc, nous sommes à l'écran de paiement. Ce dont nous avons besoin écran indépendant sont quelques options de carte. Alors utilisons-les ça. Et quand utiliser ce service, par exemple, parce que c'est beau et blanc. Et amenons-le ici. Contrôle V. Je vais le placer quelque part ici, sont à peu près donc nous sommes quatre colonnes de large, par exemple. Faisons ça. Oui, nous avons quatre colonnes de large. Donc, je vais dire le nom du dossier actuel. Et maintenant, utilisons un nom aléatoire comme les miles JSON et va être plus ancien nom Control D. Je vais positionner celui-ci ici, mais avant de le faire, je suis ce que pour supprimer la flèche déroulante parce que nous n'avons pas besoin ça. Et au lieu de la liste déroulante BG, cela va être entrée vg parce que ce sera InputField en place. Comme ça. Et ça va être le numéro de carte. Donc numéro de carte. Et laissez-moi vite. Copiez et collez mon numéro de voiture ici. Donc, c'est là. Maintenant, je vais dupliquer celui-ci une fois de plus et m'assurer que je suis à, voyons, je pense que 40 va aller très bien. Alors voyons, ouais, 40. Gardions la même cohérence comme celle-ci. Donc, ce sera la date d'expiration comme ça et quand être quelque chose comme 12 mois de 2025. Je pense que c'est bien. Donc dates d'expiration, je vais le déplacer en dessous de mon numéro de voiture et enfin déplacer ce bas ici. Et ça va être C VC, qui est qui revient sur votre code. Donc le code CVC. Et donnons un nombre aléatoire comme 1, 2, 3. Et enfin, ce dont nous avons besoin ici, c'est la possibilité pour eux de payer avec PayPal, par exemple. Donc, sautons rapidement à l'intérieur, dupliquons ceci, et dépose-le plus avec ici. Et ce que je vais faire, c'est de les utiliser tous. Et cela fait simplement en sorte qu'ils sont au centre comme ça. Et enfin la mort DX, que nous dupliquons. Je vais le positionner correctement. Donc maintenant je vais m'assurer que c'est à 18 ans. C' est ça ou payez avec PayPal. Assurez-vous qu'il est centré, assurez-vous que c'est comme ça. Et je vais m'assurer que c'est en ligne. C' est 62, mais ça n'a pas vraiment d'importance parce qu'on peut abaisser plus tard ou on peut en augmenter la taille pour que tu puisses faire ce que tu veux, mais je vais juste le garder comme ça. Donc nous allons tous les regrouper, les faire tomber. Je vais appeler ce courant pour information comme ça. Et maintenant, la prochaine étape pour nous est la conformation. Donc la conformation va être très simple. Donc, il va juste avoir deux textes et il va avoir une de ces icônes, mais il va contenir deux boutons différents. Donc je vais en faire une copie. Encore une fois, assurez-vous d'apporter mon bouton à l'intérieur. Changez d'endroits comme ça. Appuyez deux fois pour descendre à 0. Ce sera notre gros bouton et nous allons le changer un peu et en faire une autre copie. Mais avant de le faire, traitons rapidement de cette section. Donc ce dont je vais avoir besoin, c'est que votre voyage a été réservé texte. Donc, il est faiblement tapé. Donc votre voyage a été réservé comme ça. Et je vais m'assurer que c'est 36 gras. Un jour, je vais le placer au centre. Et cela, et bien sûr, vous pouvez imaginer que c'est l'écran de confirmation. Donc, dans le centre, votre voyage a été réservé Contrôle D. Allons vers le bas et nous allons l'utiliser pour être 18. Je vais déposer du texte, s' assurer qu'il est gris. Voyons maintenant. Ce que je peux faire est par exemple, mélange qu'ils sont 40. Comme ça, assurez-vous que c'est dans un centre, c'est dans un centre comme ça. Et je vais m'assurer que c'est quelque part par ici. Et incluons maintenant rapidement cette icône. Donc, l'icône que je veux utiliser est det d'un globe. Alors laissez-moi le trouver rapidement ici dans cette icône de voyageur si monde. Donc je vais me positionner et oser être sûr qu'il est au centre. Utilisez la version de plan. Et voyons, peut-être que je peux être à 80 ans, quelque part par ici. Et nous allons rapidement mettre cela en place ici pour que nous ayons assez d'espace pour que le fondamentalement pour cette section, la seule chose qui nous reste à faire est de concevoir ces boutons. Donc, je vais inclure une icône à l'intérieur. Mais avant de le faire, je veux m'assurer de changer cela pour aligner à gauche. Je vais écrire et télécharger reçu. Parce qu'ils vont être en mesure de télécharger recevoir évidemment. Et je vais taper l'icône PDF, faire glisser et déposer en place. Alors je vais le positionner pour être à l'intérieur comme ça. Sélectionnez-le et de ce côté et ces deux, le centre il est. Donc une fois de plus, je vais vraiment mélanger pour le mettre correctement comme ça. Donc 1234. Voyons si c'est assez large ou trop. Voyons voir, parce que tout cela est trop beau pour être au centre. On pense que ça a l'air bien. Donc ce que je vais faire est de frapper le contrôle C pour ces deux, sauter dans mon état d'horreur, contrôle V, je vais supprimer le paiement maintenant. Et pour ces deux-là, je vais simplement me transformer en blanc comme ça. Ensuite, nous allons revenir à l'état par défaut. Et je vais en faire une copie, la positionner ici. Et sur cette copie, nous allons lui écrire. Donc, les utilisateurs vont être en mesure de sauter en arrière de ce bouton, icône d' accueil, drogue et remplacer dans celui-ci. Comme ça. Je vais m'assurer que j'ai 40 ans, ce que je suis fondamentalement. Mais vérifions une fois de plus comme ça. Et je vais fermer ça. Sélectionnez les deux, et assurez-vous que je suis au centre de mon bouton. Comme ne sont pas simplement les mettre dans un groupe et assurez-vous qu'ils sont au centre du groupe ce groupe, et simplement appuyer sur Contrôle C pour les copier. sauté à l'état d'horreur Contrôle V. Je vais supprimer ces deux-là, apporter ces deux-là et m'assurer qu'ils sont blancs comme. Alors. Retournez à l'état antérieur par défaut, nous l'avons. Donc, la dernière chose à faire est de regrouper cette information à, pour juste créer à côté de nos icônes et à côté de nos deux boutons. Donc, nous l'avons là. Ce sera le texte pour une organisation plus facile, évidemment solide et les regrouper et appeler cette conformation comme ça. Je vais l'abaisser à 0 et quand ramener ça 100, ce qui est très bien, et ce sera 0. Je vais ramener ça et le rapporter jusqu'à 100 détails de voyage. Je vais le mettre en noir et la conformation à ce gris clair. La dernière chose que je veux faire est en fait regroupé tout cela. Donc, je vais l'appeler simplement paiement. Et nous devons apporter mes informations de fond. Et voyons où nous en sommes là. Donc 1, 2, 3, 4 comme portant à 150, ce qui est très bien. Et fermons notre, notre planche enfin, pour finir cette page, évidemment, plus tard, je vais animer cette section et je vais m'assurer que ces animations sont agréables et lisses comme vous l'avez vu dans le première vidéo de l'introduction de cette classe. Donc, fondamentalement, nous allons animer sur l'onglet entre tous ces différents états. Mais fondamentalement c'est tout pour la section filaire. Comme je l'ai dit, c'est un peu long pour ce projet particulier parce que nous avons tas de ces éléments sur cette page et sur cette page. C' est pourquoi ça nous a pris tant de temps pour créer ça. Dans la vidéo suivante, nous allons commencer par le design lui-même, nous allons commencer par et la navigation parce que c'est assez complexe sur ce projet, comme tous ces autres éléments. On va commencer par ça. Et après l'avoir terminé, nous allons passer à la conception de toutes ces autres sections. Et je vais vous montrer des interactions très complexes et intéressantes. Alors je te verrai là-bas. 24. Adobe Xd Bugs Bugs Bugs: Adobe XD a ses bugs ici et là, mais l'équipe travaille dur avec les mises à jour régulières. Ils font des mises à jour du logiciel tous les mois. Parfois, ces mises à jour ne sont que quelques corrections de bogues mineures, mais parfois il y a des mises à jour majeures de révision comme vous l'avez vu, comme vous allez voir en fait au milieu de cette classe quand ils ont mis à jour l'interface utilisateur. Nous sommes donc passés de ce menu hamburger au menu du haut comme leur tête sur un Mac pendant des années, en gros, parfois vous allez voir pépins et vous allez les voir tout au long de cette classe. Mais il suffit de comprendre certains de ces problèmes sont sur mon côté parce que j'utilise un logiciel d'enregistrement sur Adobe XD. J' utilise deux fenêtres d'Adobe XD en même temps, les deux fichiers sont énormes. J' utilise le traitement audio pour ce microphone. Donc, il est un processus naturellement à la vidéo. Donc, toutes ces différentes options font un effort sur ma machine. Et par conséquent, vous allez voir quelques bugs ici et là. En ce qui concerne les bogues sur votre machine, vous ne devriez pas voir de bogues tant que vous mettez à jour Adobe XD régulièrement. Donc, partout où vous voyez que ces mises à jour sont disponibles, assurez-vous de les mettre à jour et assurez-vous qu'elles soient à la dernière version. Par conséquent, il y a une bonne possibilité et une bonne chance que vous allez éviter ces bugs. Mais comme tout autre logiciel là-bas et pas seulement le logiciel Adobe ou tout autre logiciel. Ils vont être des bugs ici et là. Mais de toute façon, Adobe XD, à mon avis, est toujours l'un des meilleurs outils de sa catégorie, en particulier pour la conception UX, parce que vous avez toutes ces options différentes dans un seul outil. Donc, peu de bugs ici et là ne vont pas déterminer le dos de XD et toutes ses fonctionnalités et fonctionnalités. Donc, je voulais juste vous faire savoir que vous allez voir quelques bugs ici et là, surtout avec l'enregistrement, surtout avec la saisie de données et surtout avec les textes. Par exemple, vous allez voir quelques bogues dans cette classe avec, par exemple, un changement de nom de dossier ou un changement de nom de structure de dossier, copie ici et là. Mais j'ai essayé dans l'édition de corriger toutes ces erreurs. Donc vous ne les verrez pas autant que vous le feriez probablement si vous êtes ici avec moi et que vous travaillez directement avec moi sur ce projet. Aussi dans certains cas, je change d'avis. Donc, en tant que concepteurs, nous essayons toujours d'obtenir la meilleure solution possible pour notre projet. Et dans ce cas, je change d'avis à propos de l'UX quelques fois. Donc, je fais quelques changements et donc XD essaie de me suivre tout le temps. Alors soyez conscient de cela. Tu ne vas pas voir ça beaucoup. Mais moi en tant que concepteur et créateur de contenu, essayez toujours de chercher la perfection, ce qui est fondamentalement impossible, mais je fais de mon mieux ici pour rendre cela aussi facile et aussi agréable pour vous les gars qui regardent possible. Donc, vous ne voyez pas ces bugs, vous ne voyez pas ces problèmes et vous ne voyez pas ces poses et erreurs d'Adobe XD. Je voulais juste te le faire savoir. Et avec tout cela dit, revenons à la conception et commençons à créer du design dans Adobe XD. 25. Créer une navigation: Bon, maintenant que les trames sont enfin terminées, passons maintenant à la conception. Et avant de passer à la conception, il y a une caractéristique clé que nous devons concevoir, à savoir la navigation, parce que ce projet va être un peu complexe en termes de navigation et d'animation. Rien de trop fou, mais cela nécessite beaucoup de travail supplémentaire plutôt que juste ces navigations de base qui vont vous emmener d'une page à l'autre. Et cela va contenir une liste déroulante séparée. Donc la première chose à commencer est que je vais juste utiliser cette page de héros juste ici. Et je vais le copier et le déplacer de ce côté. Donc, pour commencer, je vais simplement sélectionner tenir ma clé alt comme nous l'avons fait jusqu'à présent, et simplement le dupliquer et le positionner quelque part ici. Maintenant parce que plus tard, nous allons avoir un design réactif aussi. C' est pour ça que je le positionne ici. Donc vous pouvez imaginer que nous allons avoir ces trois là. Et si nous avons assez d'espace pour la conception responsive, plus tard, si vous le souhaitez, vous pouvez concevoir une expérience mobile ici pour l'application mobile, par exemple, si c'est quelque chose sur lequel vous travaillez. Mais comme je l'ai dit pour cette vidéo, nous allons nous concentrer strictement sur la navigation parce que cela va être un peu complexe. Donc, page d'accueil, je vais taper InDesign juste pour que nous sachions que c'est le design réel. Donc ce que nous ferions d'abord, c'est que je vais l'ouvrir. Et à l'intérieur de la section supérieure, nous avons l'image du héros. Et je peux commencer par apporter des images. Et juste pour que tout cela se démarque vraiment bien, c'est ce que je vais faire en fait. J' ai donc préparé toutes ces images différentes pour la section héros et ainsi de suite. Donc ce que j'ai ici, c'est la première image. Donc, laissez-moi glisser et déposer à l'intérieur de cette image. Donc, je vais l'appeler l'image de héros numéro un par exemple. Je vais le dupliquer deux fois. Donc, ce sera le numéro 1, ce sera le numéro deux, et ce sera le numéro trois. Donc, je vais baisser l'opacité de ce premier, passer à la deuxième et localiser ma deuxième image. Alors laissez-moi voir. C' est ma deuxième image, qui est l'image de Paris. Mais malheureusement, il a fait encore une fois la même chose. Alors cachons vite celui-ci. Et puis faites glisser et déposez mon image ici à cette seconde, comme ça. Donc ça va être le numéro 2. Une façon de plus faible que l'obésité hided n pour le numéro trois, qui va être à Pékin. Je vais le glisser et le déposer ici. Maintenant que nous avons toutes nos images, je vais les montrer comme ça. Voyons voir, c'est Paris. Je ne sais pas pourquoi il fait ça, mais amène que ça va être tout entier Gada, Paris, et Pékin. Donc ces trois images. Maintenant, avant de passer à autre chose, ce que je dois créer est quelque chose comme. Un flou. Donc ce que je vais faire en fait, c'est dupliquer une de ces images, Control D. Et je vais l'appeler le nav primaire et le flou comme ça. Donc ce que je vais faire, c'est utiliser une couleur. Par exemple, celui-ci, voyons. Donc 300, 300, 300. Je pense que ça marche bien. Et je vais inclure le flou d'arrière-plan n pour le montant que je vais utiliser 25. Tiens, je vais utiliser 50. Donc, une grande valeur. Et ici, je vais utiliser 65 comme ça. Et je vais garder l'obésité à 100. Donc, vous pouvez voir que ceux-ci se distinguent vraiment bien. Et ce que nous allons faire maintenant, c'est fondamentalement l'image du héros va tomber de toute façon. Donc, nous allons simplement déplacer ce héros, Hero Texts et vers le bas. On va bouger les flèches et descendre, comme ça. Et nous allons rester avec ce flou. Donc le flou de navigation primaire. Maintenant, la prochaine chose que nous allons faire est de travailler avec notre NAV primaire. Donc, nous avons notre navigation principale et en dessous des destinations, nous allons créer un sélecteur. Donc, je vais utiliser un rectangle et faire glisser un beau grand rectangle comme celui-ci. Donc ça va être une hauteur de deux. Il ne va pas contenir de bordure et le remplissage va être blanc. Donc, tout le but est d'être la même distance que ce texte, comme ça. Et je vais tout simplement autour des coins pour être cinq. Maintenant, en termes de distance, nous pouvons le faire à 10 par exemple. Donc, changer et en ville. Donc, cela va montrer que c'est ce qui est sélectionné. Appelons ça comme des points ou un sélecteur, comme ça. Pour le mettre ici. Et la prochaine chose que nous allons faire en fait est de dégrouper cela en fait. Donc, nous allons avoir tout à l'intérieur d'un groupe et nous allons faire la même chose pour le navigation secondaire dans un peu, mais passons rapidement à ici, par exemple, juste pour le garder hors de la route. La prochaine chose que je vais faire est de créer ce point d'onglet pour notre logo. Donc, créez simplement un rectangle comme ce point de robinet inférieur de qualité comme ça. Et je vais enlever la bordure ou enlever le remplissage. Et c'est fondamentalement tout. Vous pouvez simplement l'arrondir au pixel le plus proche de votre logo à quelque chose comme celui-ci, par exemple. Juste pour qu'il se démarque et qu'il est facilement utilisable. Donc nous allons garder ça pour notre logo et nous pouvons l'appeler un logo. Je l'ai fait. Donc, pour nos destinations, nous devons créer ces destinations. Et nous allons rapidement écarter cela aussi parce que ça va se cacher. Donc, pour ces destinations, Nous allons rapidement dupliquer ce texte. Je vais le déplacer vers le bas, m' assurer qu'il est aligné à gauche comme ça. Et je vais m'assurer que c'est 80 de mon sélecteur comme ça. Et voyons, nous pouvons l'appeler quelque chose comme des destinations en Europe. Poppins 24 la lumière est bonne, et nous allons trouver dat. Donc, l'Europe, le voici, l'icône des destinations de l'Europe. Je vais le positionner ici. Et je vais m'assurer que c'est au centre, comme ça. Comme ça. Je vais le fermer. Et enfin, je peux l'amener à quelque chose comme 20 par exemple. Voyons à quoi ça ressemble. Je pense que cela fonctionne bien avec notre logo, désolé, avec notre icône. Et maintenant, amenons-le ici. Et voyons si on est à 80 ans. Nous le sommes. Et c'est génial. La prochaine étape pour nous est donc de créer ces destinations en Europe. Alors passons tout ici. Donc ce sélecteur de nation. Donc, l'Europe, les destinations emblématiques en Europe. Copions ça. Contrôle D, je vais le positionner ici. Et ces destinations vont être un peu plus petites. Donc un t. Et par exemple, nous pouvons les mettre quelque chose comme 40 d'ici. Assurez-vous qu'ils sont alignés à gauche. Le premier sera Paris. Parce que ça va être six d'entre eux. Ils vont chacun prendre deux colonnes. Donc, vous pouvez soit utiliser une grille de répétition si vous le voulez, ce que je vais en fait ressembler à quelque chose comme ça. Donc 23456, ce qui est très bien. Et fondamentalement, je vais simplement augmenter l'espace pour que je puisse les mettre à peu près ici, quelque part autour de la grille de dégroupage. Le deuxième sera Londres. Celui-ci va être Prague. Le prochain sera dans le coin. Et enfin dans ce sera Barcelone. Ne les laissez pas rapidement les aligner avec notre grille. Donc c'est juste ici, ici, c'est très bien et Barcelone va bien. Et enfin, nous en avons un de plus et nous allons le placer juste ici au centre de ce texte d'arrêt comme celui-ci. Assurez-vous qu'il est bien aligné. Et tu vas taper C. All. Je vais m'assurer que c'est souligné et je vais le positionner ici parce que les utilisateurs vont pouvoir, quand ils tapent sur les destinations, il y aura des destinations en Europe et ils vont pouvoir voir tous. Il me manque quelque chose ici. Donc oui, il manque Lisbonne manquant, ce qui est un quatre contre un. Donc je vais bouger ça comme ça. Et je vais utiliser à la maison mon père, mon père maintenant, je les ai tous. Mettons rapidement en pause la vidéo pour que je puisse les organiser. Et maintenant que je l'ai fait, passons plus loin. Ce que je veux dire ici, c'est le diviseur. Donc, vous pouvez utiliser l'un de ceux-ci. L' Oregon fait tout simplement comme ça. Et pour le diviseur lui-même. Utilisons la couleur du blanc et ramenons l'obésité à 40 par exemple. Appelons ça le diviseur. Trouve ça. Et amenons-le. Et je vais utiliser quelque chose comme 20 d'ici. Donc, comme ça fonctionne bien. Et la dernière chose que je vais faire est d'utiliser ce C tous les textes et créé comme un composant, donc la clé de contrôle. Et la seule chose que je vais inclure, c'est le vol stationnaire. Et pour la couleur de vol stationnaire, je vais utiliser la dette hover et le bleu. Donc, fondamentalement, les gens vont être en mesure de planer. Alors voyez tout, appelez ça comme ça. Et fondamentalement, je vais le regrouper et des destinations de qualité, l'Europe parfois cela et je dois inclure cela dans plus large dans comme ça. Et là, nous l'avons en fondamentalement débité pour les destinations. Je vais mettre en pause la vidéo et copier et coller toutes ces autres destinations à l'intérieur. Et maintenant que j'ai fait de la saleté, vous pouvez voir à quoi ils ressemblent tous. Nous avons donc l'Europe, l'Asie, l'Afrique et les Amériques ici. Donc je vais les regrouper tous, frapper le contrôle G et les appeler destinations. Je vais avoir 0 deux fois. Et enfin, je vais le cacher pour qu'il ne corrompe rien d'autre que nous essayons de faire. Donc fondamentalement, passons maintenant à la suivante, qui va être l'hiver. Évidemment, cela va se déplacer et se rétrécir pour s'adapter au texte d'hiver. Donc, pour l'hiver lui-même, nous allons avoir quelques illustrations. Je vais donc en copier un du design original et quand le placer ici. Nous avons donc une illustration hivernale. Je vais passer à droite ici, et je vais m'assurer que c'est un composant local d'ici. Donc, faites un clic droit local. Et ce que je vais faire, c'est utiliser le texte. Donc, je vais utiliser l'outil de texte juste ici, tapant com avec nous et explorer pour m'assurer qu'il est aligné à gauche comme ça. Et ça va être Poppins light 18 comme ça, mais je vais simplement utiliser cette couleur bleue moyenne. Et je vais le mettre juste ici à côté de notre illustration. Voyons donc 2, 4, 6. Comme ça. Je pense que c'est bon. Et enfin, je peux le dire, par exemple, quelque chose comme ça. Je pense que ça marche bien. Contrôle D et moi pouvons taper quelque chose comme des merveilles hivernales. Et je peux sauter ici et utiliser 120 blancs américains, plus avec et en bas. Donc, 12, par exemple, je pense que ça va très bien marcher. Et enfin, je vais essentiellement copier et coller ce texte à partir de mon document d'origine. Mettons-le rapidement au bord de notre texte pour penser que ça va bien se passer. Voyons voir ici réduire 37. Donc je vais garder le 20 IDAT. Et enfin, je vais aussi utiliser ce gros bouton qui est utilisé la recherche. Donc gros bouton, glisser-déposer. Là, nous l'avons. Donc gros bouton, déplacez-le tout le chemin vers le bas dans ce texte. Positionnez-le ici et assurez-vous que nous avons 40 ans cette fois, comme ça. Et à l'intérieur de l'état par défaut sur celui-ci, ce que nous allons faire en fait, c'est que je vais cacher cette couleur. Pour cette frontière. Je vais simplement sélectionner cette couleur. Et ici, je vais taper Explorateur maintenant. Et je vais sauter ici, fermer ça et utiliser ma couleur blanche comme ça. Donc je vais le sélectionner et aller dans mon état d'horreur. Et au lieu de cela, pour une raison quelconque, il continue de boguer. Donc, supprimons ce saut, explorons maintenant les dettes qu'il retourne à l'état par défaut. Et vous pouvez voir à quoi ça ressemble. Donc fondamentalement ce que je vais faire maintenant est organisé ceci. Donc je vais l'appeler texto. Je vais regrouper ces deux-là. Ça va être l'hiver, comme ça. Et ce que je vais faire est de les sélectionner, cliquez ici et assurez-vous qu'ils sont dans le centre et les habitudes laitières. C' est donc ce qui va être affiché lorsque les utilisateurs cliquent sur l'hiver. Donc, je vais double-cliquer sur ma touche 0 et je vais mettre la vidéo en pause ici pour que je puisse tenir dans croisières de fin de bien-être individuel parce que ce sont exactement les mêmes paramètres et exactement le même aspect que l'hiver. Donc je ne vais pas t'ennuyer avec ça. Ok, alors maintenant que j'ai fait ça, laissez-moi vous montrer rapidement ce que j'ai créé. Donc, vous avez vu ces destinations et vous avez vu à quoi ça ressemble. Laisse-moi le cacher rapidement. Ensuite, c'est l'hiver. Donc j'ai créé ceci et vous l'avez vu. Passons maintenant au Wellness. Fondamentalement exactement la même chose, juste une illustration différente. Et cela dit commencer à se détendre au lieu de réserver maintenant par exemple. Donc, vous pouvez simplement basculer autour de ces appels à des actions. Nous avons des voyages individuels, donc Gary et aller où la partie vous suit et vous pouvez nous contacter ici pour grouper votre voyage individuel. Et enfin, nous avons ces croisières. Donc si je ramène ça, nous avons des croisières exotiques livre arrive. Enfin, ce dont nous avons besoin, c'est de nous contacter pour cette section À propos de nous. Donc, ce que je vais faire est de dupliquer cette section de texte juste ici. Je vais cacher ça. Je vais positionner ça juste en dessous de nous. Donc ce que je vais faire, c'est de les cacher tous. Donc ils n'interfèrent pas avec ma frappe. Je peux facilement taper. Donc, nous allons effectivement copier et coller le texte de mon design original parce qu'il va rencontrer beaucoup plus simple pour nous de le finir de cette façon. Je que, et enfin, allons de l'avant et copions le texte. Et ici, nous allons dire contactez-nous. Mon père, copie ça, va dans l'état d'horreur. Et vous pouvez voir fondamentalement est juste copier et coller entre tous vos états. Maintenant, on a besoin de la carte et je vais couper. Et coller dans la carte que j'ai utilisé à l'origine dans mon design simplement expliquer rapidement la dette et voir ce que j'ai fait là solide et rapidement. Sélectionnez ces deux-là. Cliquez ici. Ou encore mieux, peut-être même pas. Peut-être que je peux simplement laisser les informations de la carte ici juste au-dessus de ce texte. Je pense que c'est bon. Donc, fondamentalement, cette carte est la carte de cette rue qui est à Belgrade. Et j'utilise la broche, fondamentalement exactement la même configuration que nous l'avons fait dans cet écran. Si vous vous souvenez, nous faisons défiler tout le chemin vers le bas et je vous ai montré comment générer votre carte en utilisant la carte fantaisie. Donc j'ai fait exactement la même chose, exactement la même configuration ici. Mais en termes de cela, si je clique ici, vous pouvez voir Poppins light 18, exactement la même police que nous avons toujours utilisée. Et la distance entre ces icônes et il est de 20 pixels. Fondamentalement, c'est juste un e-mail où les gens peuvent contacter, ils peuvent cliquer juste là pour envoyer un e-mail directement. S' ils sont sur un mobile ou une tablette, ils peuvent cliquer ici pour les contacter directement ou s'ils ont cela connecté, par exemple, disons que l'agence utilise quelque chose comme WhatsApp Viber ou quelque chose comme ça. Ils peuvent cliquer juste là et prendre contact directement avec l'agence via le site Web. Et enfin, c'est l'adresse de la rue. Alors laissez-moi sauter rapidement ici et assurez-vous que je fais tout ce local parce que j'en ai déjà quelques-uns. Je vais évidemment les réparer plus tard. Mais en gros, c'est tout. C' est la carte en 4D, c'est le texte. Je vais les regrouper, appelez ça à propos de nous. Et c'est fondamentalement tout. Maintenant, la dernière chose que nous devons faire ici, c'est d'animer ça sur le dessus. Donc nav secondaire, Créons-les en tant que composant. Alors appuyez sur le contrôle K, le contrôle K, la touche de contrôle juste là. Donc, ce que je veux faire avec eux est simplement ajouter une sorte d'interaction. Ainsi, en survolant, par exemple, vous pouvez utiliser l'état d'horreur. Et en vol stationnaire, par exemple, nous pouvons les rendre gris clair. Et cela, nous pouvons aussi utiliser un état d'horreur. Et nous pouvons les rendre gris clair. Et cela peut être un état d'horreur. Et nous pouvons les rendre gris clair. Mais ce que nous pouvons aussi faire est de créer un état supplémentaire appelé état sombre. À l'intérieur de l'état sombre, nous pouvons les créer pour être gris foncé, que nous pouvons ensuite utiliser sur des pages comme DES. Donc, nous pouvons facilement basculer entre tous ces états. Je cliquerai sur le noir et je vais utiliser le gris foncé. Et enfin pour celui-ci, cliquez et sombre. Et je vais utiliser du gris foncé. Revenons à la valeur par défaut, revenons à la valeur par défaut et revenons à la valeur par défaut. Donc, vous pouvez voir à quel point c'est facile de travailler avec. Maintenant, enfin, ce que nous pouvons faire est en fait commencer par créer ces animations. Alors voyons. Ce que je peux faire en fait, c'est cacher mon sélecteur comme ça. Et ce que je peux aussi faire est secondaire maintenant c'est bien. Mais ce que je peux faire c'est voir, donc c'est 1080. Donc, je vais l'abaisser à un pixel de hauteur, par exemple. Donc, vous ne pouvez pas vraiment le voir. Et amenons, ce dont vous allez avoir besoin, c'est une sorte de superposition de couleur ici. Donc, faisons vraiment et la saleté. Voyons donc voir la superposition des couleurs. Donc, je peux, par exemple, dupliquer dans cette image et l'appeler, par exemple, superposition de couleur de l'image de héros. Ce que je peux faire, c'est utiliser cette couleur vraiment sombre. Allons ici, presque noir. Et on peut l'abaisser à 70. Ainsi, vous pouvez appuyer sur 7 sur votre clavier, par exemple. Et ce que sont les violents vraiment dans ce texte, c'est qu'il devrait être blanc afin qu'il se distingue plus à entendre. Et aussi ce que je n'aime pas, c'est la position, donc je pense qu'elle devrait aller plus haut. Alors faisons ça très rapidement solides et faisons ça, et puis ça. Maintenant, nous pouvons sélectionner ce rectangle et nous pouvons choisir s'il est si primaire nerf. C' est là. Pour que nous puissions sélectionner ces trois. Cliquez ici pour l'amener d'un cran, juste pour que nous puissions le positionner au centre. Et vous voyez déjà qu'il a beaucoup plus de marge de respiration qu'avant. Mais je vais faire est en fait de regrouper tous ces, appuyez sur Control G, appelez ça image de héros, par exemple, parce que ça va être beaucoup plus facile section à hauteur. Maintenant, revenons à notre navigation primaire et nous avons le fond maintenant aimé. Donc nav primaire, nous allons, par exemple, le grouper, appuyer sur le contrôle G, appeler nav principal, comme ça. Et ce que je peux faire est de créer un composant. Je ne sais pas pourquoi il continue à faire ça et me laisse vite comprendre. Encore une fois. Troupeaux laitiers Contrôler K pour l'apporter en tant que composant, savon pour vous faire passer rapidement à travers ce composant. C' est notre navigation. Ce sera notre composant principal, et il est maintenant à son état par défaut, ce qui signifie que rien n'est encore sélectionné. Donc, si je vous ramène à l'exemple précédent, vous pouvez voir que ceux-ci fonctionnent ici, mais aucun d'entre eux ne le fait. Et parce que nous sommes à l'état par défaut, rien ne s'est vraiment passé. Donc, ce que vous allez faire ensuite est de créer notre premier état et nous allons l'appeler destinations. À l'intérieur de nos destinations, ce que nous allons faire est d'élargir ce flou d'abord, donc 1920 d'ici 1080, comme ça. Et nous allons sauter Il est côté nav primaire. Nous allons ramener le sélecteur et nous allons ramener nos destinations comme ça. Donc, en gros, ce sera notre premier état, notre deuxième état, et nous allons le créer à partir d'ici. Alors, on va appeler ça hiver ou désolé, avant de le faire, tu sais ce qu'on peut faire ? Appuyez sur Supprimer à l'intérieur d'une destination. Nous pouvons en fait sélectionner tous ces éléments. Donc hivernal bien-être croisières individuelles sur nous et les déposer à 40 pour cent par exemple, ou encore moins, disons 20 pour cent ou quelque chose comme ça. Je pense que 40. Ouais, utilisons 20% pour qu'on puisse revenir en arrière et maintenant créer l'état dont on va appeler ça l'hiver, comme ça. Donc, à l'intérieur de ce nouvel état, les destinations vont être 20. L' hiver va être 100. Donc j'appuie juste sur 0 sur mon clavier. Selector va bouger ici. Et nous allons en fait réduire la taille pour qu'elle corresponde ici, comme ça. Donc, ces destinations vont tomber. Donc 0 et un hiver va apparaître juste ici. Et fondamentalement, nous allons aller de l'avant et faire la même chose pour tous les autres. Je vais créer le bien-être. À l'intérieur du bien-être de Wesley, commençons par les destinations hivernales. Donc 20, bien-être, 100. Déplacez le sélecteur vers le bien-être juste ici. Simplement élargi pour entendre. Le contenu de bien-être va se montrer. Le contenu hivernal ne va pas montrer, donc c'est comme ça. Ensuite, nous allons créer le suivant, qui est individuel. Comme ça. À l'intérieur de l'individu. Encore une fois, la même chose. Solides vont avec individuel, 100, bien-être 20. Allons avec le sélecteur. Alors déplacons-le ici. Voyez s'il se rencontre. Il l'agrandit un peu, comme ça. Donc fondamentalement individuel va montrer le bien-être va se cacher comme ça. Passons maintenant à l'état suivant, qui va être des croisières. Alors nous allons sauter à l'intérieur d'ici. Encore une fois, croisières 100, individuel 20. De plus, le sélecteur juste ici. Et tu verras plus tard une fois qu'on aura animé, ça va être vraiment dynamique. Ça va vraiment avoir l'air cool. Donc, les croisières, je pense que c'est bon. Et enfin, amenons ça. Cachons ça. Et enfin, créons notre état final, qui est à propos de nous. Et à l'intérieur à propos de nous. Nous allons essentiellement porter ça à 100 listes à 20, localiser notre sélecteur et le changer à ici. Et en gros, élargissez ceci jusqu'au bord de notre grille. Je vais ramener la section et je vais cacher mes croisières. Fondamentalement, c'est tout. C' est la seule chose que nous allons animer ici à l'intérieur de notre page d'accueil, la navigation de design. Alors maintenant, la prochaine chose arrive et nous devons animer tous ces éléments supplémentaires. Donc, ce que nous allons faire est de passer à l'état par défaut. Je vais passer au prototype. Et ici, je vais essentiellement taper sur l'état par défaut, cliquez sur notre destination. Donc, je vais utiliser le robinet. La transition va être auto animate, l'état va être des destinations. Nous allons utiliser l'entrée-sortie facile. 0,4 seconde. Et puis, fondamentalement, nous devons animer tous ces autres en utilisant exactement les mêmes paramètres. Alors l'hiver, nous allons utiliser le bien-être hivernal. Nous allons utiliser le bien-être individuel, comme son nom l'indique, croisières comme ça et sur nous, nous allons cliquer ici. Donc, nous allons rapidement faire défiler ces états et voir ce qu'il a animé. Donc, nous avons tout cela sur nous et tous ces autres. Mais le problème, c'est qu'on n'a pas ces Nabs primaires, des objets de niave. Donc, fondamentalement, C'est le problème avec Adobe XD à mon avis, parce que dans chacun de ces états, malheureusement, vous devez sauter à l'intérieur et essentiellement faire cela à la main. Donc ça va être individuel, ça va être des croisières. Au moins, cela vous aide en vous souvenant de ces paramètres. Je ne sais pas pourquoi. Il me montre à propos de nous et non pas défiler mais auto animer et à propos de nous. Donc je vais mettre la vidéo en pause ici et faire toutes ces autres, puis revenir et vous montrer le résultat final. Ok, maintenant que j'ai fait tout ça et animé tout, maintenant, la seule chose que je voulais mentionner est le logo lui-même. Donc, à l'intérieur du logo, ce que nous avons créé ce sont ces points de pression. Donc, je suis ici dans ce, qui est l'état de destination. Donc, un point de logotype, vous pouvez cliquer dessus et il va l'amener à l'état par défaut, qui est essentiellement lu l'un de ces éléments à l'intérieur. Revenons donc rapidement à l'état par défaut et je peux rapidement vérifier et voir. Donc bien-être hivernal, ce qui est bien croisières individuelles parce que vous pouvez voir que j'ai fait la même animation pour tous. Je voulais juste te faire gagner un peu de temps. Alors passons à l'état par défaut et touchons l'aperçu et voyons ce que nous avons jusqu'à présent. Donc nous y voilà. Nous avons tout cela que nous avons créé. On a ces états Horace. Alors, cliquez sur notre destination. Vous pouvez voir à quoi ça ressemble. Allons à l'hiver. Vous pouvez voir et cela fonctionne bien, mais je devrais peut-être changer cela et supprimer ce fond blanc du bien-être de l'état par défaut d'origine. Et voici le problème parce qu'à l'intérieur de ces composants imbriqués profonds, nous n'avons aucun de ces états Hover. Je ne sais vraiment pas pourquoi. Et j'écrivais à l'équipe d'Adobe XD à ce sujet, mais ils ne me sont toujours pas revenus. La seule chose qu'ils ont dit, c'est que nous y travaillons et que nous allons vous le faire savoir, mais fondamentalement, vous pouvez le créer en deux états. Imaginez donc ici, par exemple, j'ai ces états de vol stationnaire, mais ici je l'ai, et ici je ne l'ai pas. Donc, dans aucun de ces autres, je ne peux pas utiliser sa succession. Je ne sais vraiment pas pourquoi, mais fondamentalement c'est comme ça que cela fonctionne jusqu'à présent. Et enfin, dans l'un de ces états, si vous cliquez sur le logo, va vous ramener à cet état par défaut. Donc c'est tout pour cette vidéo. Dans la prochaine vidéo, nous allons passer à autre chose et un design et cette section héros. Donc, nous pouvons passer le curseur sur ces flèches et nous pouvons basculer entre ces images de héros et ensuite, passer à cette navigation en bas. Alors je te verrai là-bas. 26. Créer un design 1: Passons maintenant à notre conception et commençons par changer cette section de héros et l'animer. Donc, si je double-clique ici pour l'ouvrir et sauter à l'intérieur de notre texte de héros. Comme vous pouvez le voir, nous n'avons qu'un seul Soviet, nous allons changer ça et en avoir trois. Laisse-moi reproduire ça pour plus de vêtements. Donc ici sur le test deux et ici un texte trois parce que nous sommes allés pour l'animer. Alors commençons par changer celui-ci. Donc c'est le Pékin et nous allons le laisser là. Mais débarrassons-nous rapidement du bouton du héros. Et amenons le bouton du héros dehors. Ensuite, je vais le positionner ici parce que je veux juste animer le texte au fur et à mesure que ceux-ci et les émissions se produisent. Je ne veux pas gâcher avec deux boutons, je veux juste le garder là où il est. Donc pour celle-là, parce que c'est un éclat de Pékin, cache vite ceci, ceci et ceci. Donc nous allons organiser ça pour être numéro un, comme la saleté. Et puis, par exemple, je voudrais peut-être inclure Paris, qui va être déshonoré. Appelons ce numéro deux. Et enfin, voyons ça. Non, donnons ça au numéro deux parce que c'est Paris. Alors voyons. On a Pékin. Nous avons Mercado, qui va travailler moins de trois ans. Et ça va être des barrières. Alors mets-le ici. Je me suis juste confondu. Encore une fois, nous avons un Pékin, nous avons Paris, et enfin nous avons oublié. Donc nous sommes prêts à y aller. C' est Pékin en tant que CRD, donc nous devons maintenant créer un texte numéro 2 pour Paris. Alors, changeons ça. Donc, comme je l'ai dit, ce sera des obstacles. Et voyons, ici, nous pouvons écrire dans quelque chose comme CTO de l'amour, par exemple. Alors on peut cacher ça et on peut passer à Regather. Vite, sautant juste là. Et nous allons écrire dans quelque chose, magique, l'Egypte, par exemple. Et laissons-le là. Maintenant sous financement, ce que je voulais faire avec ces textes, comme vous pouvez le voir, je vais utiliser un masque. Et c'est pourquoi je les ai tous allumés parce que je voulais voir à quel point le texte le plus large est, qui est le Hagana dans ce cas, pour simplement utiliser notre rectangle et simplement en dessiner un comme ça. Ensuite, vous pouvez descendre jusqu'à votre obésité, zoomer un peu juste pour voir où se trouvent les bords de vos textes. Par exemple, quelque part à l'audition, cela n'a pas besoin d'être trop précis et précis. C' est bon de faire comme ça. Je vais l'appeler masque. Ce que je peux faire, c'est la ramener à 100 cache-cache, sentir et frontière parce que comme il l'a dit, ce sera juste notre masque. Donc je vais tous les sélectionner. Maj Control, M décalera Commande sur un Mac. Je vais l'appeler mosquée de texte par exemple. Je l'ai fait. Et ce que je vais faire, c'est laisser le premier texte dans et utiliser ma flèche Maj et la flèche du bas pour pousser ces deux vers le bas. Quelque part par ici. Donc, vous pouvez voir peut-être 20 pixels vers le bas, juste pour que vous ne les voyez pas. Alors je vais ramener une image de mon héros. Je vais les ramener tous, abaisser l'obésité de ces deux-là. Donc, quand un haut bureau, vous ne voyez pas d'autres. Et ce sera juste notre premier état ou notre état par défaut. Alors faisons-le maintenant. Donc, ce que je vais faire est fondamentalement appuyer sur la touche Contrôle ou Commande. Ou vous pouvez également cliquer ici si vous le souhaitez. Donc, juste ici pour le créer en tant que composant. Et maintenant, je veux créer un nouvel état. Donc, ce sera l'image deux, par exemple. Ensuite, à l'intérieur de celui-ci, nous allons baisser cela à 0, porter cela à 100, aller à l'intérieur de notre texte. Et je vais déplacer mon texte de Pékin vers le haut. Mais avant que je ne le fasse, je veux déplacer mon Paris en police juste pour que je puisse m'aligner facilement comme ça. Il est donc parfaitement aligné et il suffit de sortir votre Pékin de la route. Maintenant, enfin, nous allons entrer et créer l'image trois, comme ça. Et pour l'image trois, bien sûr, vous allez baisser ce chiffre à 0, porter cela à 100, sauter à l'intérieur de votre texte et apporter le texte numéro trois. Comme ça. Jusqu' à ce que tout soit parfaitement aligné, il suffit de déplacer Paris hors du chemin jusqu'à ce qu'il s'aligne au-dessus. Et c'est fondamentalement tout. Donc, si je clique entre eux, nous avons l'état par défaut, qui est Pékin, varus, et Hoegaarden, qui fonctionne bien. Maintenant, animons-les rapidement. Donc état par défaut, je vais sauter à l'intérieur de mon prototype, localiser mes flèches. Et sur mon état Horace, sur ma flèche droite, je vais passer au survol, puis cliquer et utiliser Tap, transition, auto, animation. Et je vais choisir l'état, l'état par défaut. Comme vous pouvez le voir, nous avons tout de suite un problème. Alors laissez-moi sauter à l'intérieur de mon état par défaut et dans ma conception parce que j'ai oublié de créer cela. Donc, nous sommes dans notre état par défaut à l'intérieur des flèches et nous devons créer ces pas à pas. Alors nous allons rapidement sauter et en créer un. Donc quelque chose comme ça, je vais simplement cacher cette qualité aimé point de robinet. Ou on peut utiliser cette abréviation. Donc, la flèche gauche pointe. Et je vais le dupliquer. Contrôle D, je vais le déplacer jusqu'à une porte, non ? Comme ça. Donc tout le chemin jusqu'ici. Zoom droit dans plus de semaines juste pour qu'il corresponde comme ça. Et je vais le mettre au-dessus de la flèche droite et serait simplement changer cette gauche à droite Dario aller. Et maintenant ce que je veux faire est simplement de voir si Adobe est les mises à jour de la dette MAI. Donc, à l'intérieur de notre flèche, nous voilà. Et vérifions rapidement l'image numéro trois flèches, osez VR. Alors maintenant, nous allons rapidement le prototyper. Ce que je voulais faire une fois de plus. Donc, à l'intérieur de notre état par défaut, je veux sauter rapidement à l'intérieur de mes flèches. Point de tabulation de la flèche droite. Va au prototype. Je vais cliquer dessus. Appuyez sur Animer automatiquement. Je vais choisir cette image d'état numéro 2 parce que c'est là que je veux qu'elle aille. Ensuite, je vais passer mes états à l'image numéro deux. Et puis je vais faire deux flèches une fois de plus. Maintenant, sur la gauche, je vais appuyer sur l'état par défaut de destination d'animation automatique parce que je voulais revenir en arrière, faciliter. Je veux utiliser la note facile pour tous. Donc, point zéro pour et quand utiliser les mêmes paramètres. Si discipliné pour aller à l'image 3. Et revenons en arrière parce que je veux changer cela de facilité à facilité d'entrée et de point zéro pour. Enfin, je veux aller à l'image numéro trois. Et sur celui-là, sur les flèches, on ne va pas toucher celui-là. On va juste utiliser celui-là. Et nous allons passer à l'image numéro 2 est 0.4. Donc, c'est fondamentalement tout. Retournez à l'état par défaut cliquez ici. Parce que je veux lancer un aperçu rapide et voir à quoi ressemble tout cela. Donc, vous pouvez voir que nous avons toujours un survol sur ces flèches parce que le survol fonctionne peu importe ce que vous mettez en face, tant que vous n'avez pas la couleur de sensation. Donc, quand je clique juste là, vous pouvez voir le texte s'anime bien. On peut aller au numéro 3, numéro 2. Et nous y voilà. Si vous pensez que c'est un peu trop rapide, ce que je pense, peut-être que nous pouvons le changer à 0.6, par exemple, pour la vitesse. Donc, nous pouvons aller ici dans les flèches d'état par défaut, flèche droite. Au lieu de, voyons, au lieu de 0.4, nous pouvons passer à 0.6 ou même 0.8 si vous le voulez. Vous pouvez donc vraiment ralentir votre animation. Flèches. Cliquez dessus, 0.6, ce 1.60. Ensuite, on peut passer au numéro 3. Localisez la gauche, 1.60 juste ici. Retournez à la première, et c'est essentiellement tout ce que vous allez faire. Nous allons simplement tester toutes ces choses que votre client est. Vous pouvez voir que ce n'est pas vraiment tout ce que majeur, mais il apporte vraiment dans ce genre d'effet de ralentissement et vraiment fait la facilité dans ces transitions derrière il ne permet pas oral à vos utilisateurs. Donc, je vais à la qualité pour cette vidéo parce que la prochaine vidéo va nous impliquer de créer des morts. Donc, je vais vous voir là-bas et sur quel montrer comment vous pouvez créer une liste déroulante. 27. Créer un design 2: Bon, Allons-y maintenant et créez cette liste déroulante. Et pour le créer, ce que je vais utiliser sont essentiellement deux fonctionnalités. Je vais utiliser la grille de répétition et ces groupes défilants. Donc, ici, nous avons nav inférieur. Et fondamentalement ce que je vais faire est de sauter ici pour cette recherche d'abord, et je vais inclure et papa icône fermer. Donc je vais sauter ici. Qui fermer ? Ici, c'est. Plus écrit ici. Près de ça. Et voyons, positionnez-le simplement pour être au centre et peut-être à 20 d'ici. Donc ce que je vais faire plus tard est tourné pour l'animer. Mais pour l'instant, je vais juste le garder ici tel qu'il est. Ce que vous allez avoir besoin de nos antécédents pour tous ces champs. Donc, tout d'abord, je vais utiliser cet original. Je vais frapper le contrôle D pour le dupliquer. Et je vais le mettre à l'intérieur de tous ces solidus. Et ce que je vais faire, c'est de le réduire à ici et à ici, au bord le plus proche. Donc nous sommes à ce diviseur mensonges. Et je vais l'appeler Search Legi. Je vais appuyer sur le copier, coller ici. Et je vais simplement appeler celle-là des activités. Mets-le à l'intérieur de mes activités, mon père. Ensuite, déplacez-le juste ici. Donc, une fois de plus au bord le plus proche. Et ici, je vais frapper le contrôle D une fois de plus, le mettre dehors. Pourquoi ai-je besoin prochaine est le type de voyage. Donc je vais le positionner ici. Morbid, ici en place, se positionnant ici. Qualité, voyage, type, vg, ils sont blessés et simplement l'amener à l'intérieur de mon type de voyage, comme la saleté. Et enfin, nous en avons un de plus pour les destinations. Donc le contrôle D pour le dupliquer. Et je vais appeler ça des destinations. Maintenant pourquoi je fais ça, c'est parce que j'ai besoin de les animer tous et de créer des listes déroulantes et je vais avoir beaucoup plus de sens en une seconde une fois que nous beaucoup plus de sens en une seconde une fois que nouscommencerons à animer tous ces troupeaux laitiers. Donc maintenant que nous avons tout cela, ce que je peux faire est d'utiliser ce filtre appliqué frappé Control K. Et fondamentalement tout ce que je voulais faire est de créer un état de vol stationnaire. Comme ça. Donc, fondamentalement, nous créons des états à l'intérieur des états à l'intérieur des composants. Donc, fondamentalement, tout ce que vous ne pouvez pas commencer avec ces petits composants parce que cette liste déroulante entière va être un composant en soi. Ou vous pouvez simplement le mettre à l'intérieur du dossier comme il est juste ici. Et puis à l'intérieur de ce dossier, chacun d'entre eux peut être des composants séparés et vous pouvez faire avec ce que vous voulez. Donc, la première chose que je vais faire est d'utiliser recherche et je vais le positionner au-dessus de tous. Et c'est pour ça que j'ai utilisé ce fond d'écran. Parce que je veux l'agrandir et le déplacer jusqu'ici. Donc, ce que je vais faire est fondamentalement créer mon état par défaut, qui va être celui-ci. Et pour ce faire, la seule chose que je veux faire est d'utiliser mon icône de vêtements, que j'en vais deux de plus ici. Et c'est simplement abaisser l'obésité à 0. Comme vous pouvez le voir, c'est maintenant un plus, mais dans l'état suivant, nous allons le faire tourner comme ça. Ainsi, il peut être fermé et les utilisateurs peuvent ensuite taper dessus. Donc, comme je l'ai dit, état par défaut, je vais le réduire. Alors ce que je vais faire est essentiellement appuyer sur la touche Contrôle. Parce que ce sera notre état par défaut. Créer un nouvel état, cliquez sur. A l'intérieur de l'état cliqué. Ce que je vais faire est essentiellement d'utiliser ma recherche BG, icône de recherche et la recherche de voyages. Et je vais le déplacer jusqu'ici. Voyons ce que nous avons pour sous l'icône de recherche. Donc on en a 40. Et passons à 40 ans. Eh bien, je pense qu'il était 40, donc on peut vérifier rapidement. Était-ce ? Oui, c'était le cas. D' accord. Donc, ici, nous avons l'état par défaut, alors nous avons cliqué sur l'état, comme ça. Et pour l'état cliqué, ce que je vais faire, c'est ramener ça. Donc tapez 0 pour aller à 100 et simplement tourner comme ceci, donc c'est un x. Donc, ce que nous avons est cette barre de recherche. Si vous vous souvenez de l'analyse des concurrents, c'est le désir que j'ai créé beaucoup de taille parce que ces barres de recherche vraiment difficile à obtenir. Attendez. Donc, ici, ce que nous avons est de chercher des voyages sans interrompre. Ainsi, les utilisateurs peuvent simplement appuyer sur Rechercher, accéder à la page ou simplement fermer s'ils ne veulent pas effectuer de recherche du tout. Alors qu'est-ce qu'on va faire ensuite, c'est d'animer aller au prototype. Vous pouvez sélectionner le champ entier car peu importe où il utilise l'étape ici va se développer. Alors cliquez ici. Utilisez le robinet d'animation automatique, passez à l'état de cliqué. Faciliter la sortie 0.6 parce que nous pouvons utiliser tous ces autres. Puis cliqué. Les utilisateurs peuvent toucher n'importe où une fois de plus. Donc, appuyez sur animer auto et aller à l'état par défaut est en dehors, et nous allons prévisualiser et voir à quoi il ressemble. Donc, c'est là. Une fois qu'un onglet, vous pouvez voir qu'il se développe bien et faire remarquer cette icône de fermeture. Vous pouvez voir à quel point c'est lisse, quel point c'est beau. Et ici, nous avons cet effet de vol stationnaire une fois qu'ils veulent appliquer des filtres. Donc vous pouvez juste imaginer, ok, je veux chercher, cliquez ici. Il se dilate, a l'air agréable. J' ai tapé sur ce que je veux, appuyez sur Appliquer les filtres et cela va vous emmener à cette page particulière. Maintenant, nous allons plus usés et animons tous ces autres. Donc tous peuvent être un peu difficiles. Donc, je montrerais comment vous pouvez en faire un, puis copiez et collez tous ces autres pour que nous ne perdions pas trop de temps. Donc, ici, nous avons des destinations et nous avons cette icône de destination. Donc, ce que je vais faire est d'utiliser mes textes de destination qui est aligné à gauche 18 Poppins lumière. Je vais le dupliquer Control D. Et je vais le positionner quelque part ici, par exemple. Et voyons, peut-être que je peux le positionner pour s'aligner bien avec mon icône. Ensuite, je peux le déplacer, par exemple, 20 pixels vers le bas. Hey, donc, et ce que je peux faire, c'est utiliser mon diviseur qui touche le contrôle D, et je vais le faire tourner comme ça. Et voyons, je veux mesurer quelque chose comme ça, je pense que ça va être bon. Alors passons à 200 en largeur. Positionnez-le ici. Assurez-vous que c'est, par exemple, dix pixels vers le bas. Donc parce que vous ne pouvez pas le voir et cela me permet d'étendre mes destinations BG. C' est pour ça qu'on l'a créé après tout. Donc ici, nous avons du sable, peut-être 20, oui, je pense que 20 fonctionne mieux. Donc je vais sélectionner ceci et mon diviseur positionné et en bas. Ensuite, utilisez une grille de répétition et je vais l'appeler destinations. Alors voyons une fois de plus. Nous sommes 40 de notre texte. Donc nous allons garder ça pour tous ces autres. Une fois de plus, nous avons des destinations et c'est ce que vous pouvez faire. Vous pouvez simplement étendre jusqu'à l'endroit où vous voulez. Et étendons cela pour juste que nous puissions voir ce que nous avons pour que nous puissions finir correctement. Comme ça, pour que je puisse le couper ici. Et c'est là que l'amusement entre en jeu. Donc, ce que vous pouvez faire est d'utiliser des éléments de texte. Alors quel héros ici, laissez-moi l'ouvrir rapidement. J' ai une liste de villes et j'ai simplement utilisé le Bloc-notes sur mon Windows. Vous pouvez utiliser ce que vous voulez sur un Mac et il va fonctionner très bien dans un simple tapé dans toutes ces villes. Alors ce que je vais faire est de faire glisser ce fichier dans Adobe XD, le mettre au-dessus de ma première ville, placer dans, et les produits laitiers ont toutes ces villes. Donc parce que j'aime vraiment comment ça ressemble, mais je ne veux pas que ça aille jusqu'ici. Ce que je peux faire, c'est simplement cliquer ici. Donc, défilement vertical. Maintenant, ce que je vais faire est étendu à Bangkok et par exemple les droits ici pour que je puisse le couper juste en face de mes textes. Ce que je peux faire, c'est appeler ça des villes. Donc je sais ce que c'est. Et enfin, utilisez mes destinations BG et abaissez-le simplement à un point, peut-être quelque part par ici. Ainsi hauteur de 500 par exemple. Je pense que ça va marcher. Eh bien. Ensuite, cliquez sur mes villes et coupez-le à peu près ici. Je pense que c'est bon. Oui. Et maintenant, nous allons frapper l'aperçu et voir tout de suite à quoi cela ressemble. Donc, une fois qu'il est ouvert, vous pouvez faire défiler et il va rester là. Donc je pense que ça a l'air vraiment sympa. Mais une chose que je pense que cela manque est une sorte d'ombre d'arrière-plan parce que vous pouvez voir qu'elle ne se tient pas trop bien sur le fond blanc ici. Alors faisons-le ensuite. Ici, nous avons ces villes et la dernière chose dont nous avons besoin, c'est le masque. Donc tu sais que c'était 70, comme ça. Ce que je vais faire, c'est inclure cette ombre. Donc 55 Sen, et je vais aller à cinq comme ça. Et maintenant, vous ne pouvez rien voir, gros, au moins deux ici. La seule chose que vous pouvez jeter un coup d'œil, c'est l'ombre juste ici, mais nous allons nous en débarrasser dans une seconde. Ce dont nous avons besoin, c'est un masque, afin que nous puissions aller à des destinations BG, frapper le contrôle D, et appeler ça un masque. Ce que je vais faire, c'est le mettre ici. Je vais me débarrasser de l'ombre et me débarrasser du remplissage. Donc je vais utiliser ce masque. Voyons voir. Nous allons utiliser les masques, les masques, les CT et les destinations. Ou on peut mettre le masque sur le réservoir entier comme ça. Sélectionnez tout, appuyez sur Maj Control. M va tout masquer. Donc, je vais simplement appeler ça des destinations. Et je vais essentiellement créer un composant maintenant. Mais avant de le faire sur les destinations BG, je veux cacher mon ombre parce que je ne veux pas qu'elle soit vue. Et fondamentalement, je veux étendre un masque ou juste un petit peu à ici. Donc, quand nous l'agrandissons, vous allez pouvoir voir l'ombre ci-dessous. Il y a jusqu'à ce que cette clé de contrôle PID pour créer un composant. Créer une nouvelle qualité d'état cliqué sur mes dettes. À l'intérieur de l'état cliqué, ce que nous voulons faire est essentiellement développer cela. Donc ce qu'on a donné, je pense que c'était 500 ici. Et il suffit d'étendre notre masque jusqu' ici et de ramener notre ombre à l'intérieur. Alors maintenant, quand je le ferme, allez ici, je vais aller à l'onglet Prototype. Nous allons utiliser l'état facile et out est cliqué, passer sur clic, cliquer quelque part à l'extérieur, passer à l'état par défaut. Donc, peu importe où vous avez cliqué, poignées, appuyez sur l'aperçu et voyez à quoi cela ressemble. Donc, une fois que nous sommes ici, vous pouvez voir qu'il se développe bien. Laissez-moi le montrer à une fois de plus. Il se distingue vraiment, mais le problème est que je ne vois toujours pas cette ombre toute dette. Eh bien, je pense que c'est bien, mais ouais, laissons-le là. Je pense que cela fonctionne bien, je passe d'ailleurs, entre mes moniteurs parce que celui que vous voyez a le contraste le plus faible. Donc je passe juste de l'un à l'autre. Voyez à quoi ça ressemble. Et je pense que ça a l'air bien et je pense que ça marche bien. Laissons-le à ça. Ce que je vais faire ensuite est d'utiliser exactement les mêmes paramètres et de travailler sur ces deux. Et quand je les aurai terminés, je reviendrai vous montrer les résultats. Ok, donc maintenant que tous sont terminés, laissez-moi vous montrer rapidement la structure. Donc c'est celui que je t'ai montré en détail, cette nation. Donc, comme vous pouvez le voir, tout est juste là. J' utilise simplement la même structure et les mêmes éléments. Donc simplement copié ceci et l'a collé dans tous ces autres. Donc, si je vous montre que c'est celui pour le type de voyage. Si je l'ouvre, voici celle pour les activités. Genotype n'a pas trop d'activités, a sur le terrain. Et vous pouvez évidemment inclure beaucoup plus de destinations ou même beaucoup plus d'activités. Puis enfin, il y a une recherche de voyages, ce que nous avons déjà fait. Et en termes d'animations, chaque animation est exactement la même. Donc ceux que j'ai utilisés ici. Donc, onglet auto animate facilité dans 0.6 secondes pour les deux états sont utilisés à la fois pour tous ces. Donc, si je frappe l'aperçu très rapidement, vous pouvez voir à quoi cela ressemble. Pour qu'on puisse sauter ici. C' est donc celui que nous avons fait pour les destinations. Vous pouvez simplement faire défiler vers le haut et vers le bas type de voyage. Vous pouvez voir qu'il n'y en a pas trop. Donc, au cas où vous voulez, peu importe donc tout voyage que vous voulez, vous pouvez cliquer juste là. Activités. Donc nager, tourner autour, et vous pouvez voir combien ils sont juste là. Et enfin, chercher des voyages. On a cette belle animation. Vous pouvez le fermer et nous avons appliquer des filtres. Donc c'est tout pour cette vidéo, vous pouvez voir à quel point c'était facile. Une dernière chose que vous pouvez faire pour mettre en évidence cela est fondamentalement à l'intérieur de l'état. Peut-être que nous pouvons les retourner et nous pouvons les passer de cette couleur plus claire à la couleur plus foncée. Mais je ne pense pas que ce soit vraiment nécessaire. Mais vous pouvez l'explorer si vous le souhaitez. Passez de cette couleur pour la destination et l'icône à cette couleur plus foncée si vous le souhaitez et voyez à quoi cela ressemble une fois qu'ils sont cliqués et développés, vous pouvez également ajouter plusieurs effets de survol pour tous ces textes. Mais n'entrons pas dans trop de détails avec mort, surtout si vous êtes serré sur votre calendrier et que le client est état sur un budget, je ne recommande vraiment pas de le faire parce que vous pouvez jouer avec toutes ces émissions comme autant que vous voulez. Et vous pouvez voir que vous pouvez inclure vraiment quelques simples et ces vraiment complexes. Mais tout dépend en fin de compte du budget du client et de l'argent qu'il a à dépenser pour ces projets. Par conséquent, vous pouvez déterminer la quantité de toutes ces animations que vous pouvez faire dans cette classe, je vous montre simplement toutes ces émissions que vous pouvez faire. Et fondamentalement, vous pouvez les ouvrir tous si vous voulez aimer ça. Fondamentalement jouer comme vous voulez. Je vous montre simplement toutes les options qu'Adobe XD a à offrir sans écrire une seule ligne de code. Donc c'est tout pour cette vidéo. Dans la vidéo suivante, nous voulons passer aux offres spéciales, et je veux enfin vous montrer comment nous pouvons créer cette icône pour passer à effet de vol stationnaire et fondamentalement la combiner avec tous ces autres éléments. Alors je te verrai là-bas. 28. Créer un design 3: Passons maintenant à la section Offres spéciales. Et comme vous pouvez le voir, et si vous vous en souvenez, voici où nous avons créé tous ces différents éléments. Nous les avons tous inclus. Et comme je l'ai dit, par exemple, pour ces images de transport, donc si je clique juste ici dans le milieu, moyen de transport, vous pouvez voir que Blaine voiture de train, et bus, tous d'entre eux n'ont pas des états disponibles. Donc, comme je l'ai dit, j'ai créé cela juste par exemple, si vous partez de, disons Belgrade, parce qu'une fois de plus, cette agence est située à Belgrade, en Serbie. Et vous voulez partir à Haggada, qui est l'Egypte, par exemple, notre voyage en voiture n'est pas disponible ou il pourrait ne pas être disponible pour une raison quelconque, peut-être qu'il est trop loin, il n' y a pas de routes quoi que ce soit. Donc, vous avez toutes ces options. Encore une fois, peut-être que ces options peuvent être en survol et vous pouvez afficher une info-bulle, par exemple. Et en vol stationnaire, vous pouvez informer vos téléspectateurs Dan, par exemple, une fois qu'ils arrivent à une destination, il n'y a pas de voyage en train ou il n'est pas inclus dans l'offre. Donc, il est juste là avec vous pour parler à votre client, pour leur expliquer toutes ces différentes options qu'ils ont avec ces icônes. Mais le principal dans le point clé juste ici. Et ce que j'essaie de dire c'est que c'est toujours génial si vous le pouvez, d'avoir tous ces états différents pour vos icônes juste pour que ce soit les choses un peu plus tard. Ce que je vais faire en premier, c'est, comme vous le savez, nous avons nos cartes d'offre et nous avons des offres de première minute et des offres de dernière minute. Donc, ce que je vais faire en fait, c'est que je vais supprimer toutes ces cartes, mais je vais les garder pour l'instant parce que je veux créer mes composants principaux, puis distribués et ensuite édités plus tard. Donc, j'ai juste fait cela dans une section filaire juste pour que nous ayons la structure, juste pour que nous comprenions où va le design. Maintenant que nous avons tout cela et maintenant que nous avons déterminé à quoi cela ressemblera, maintenant nous pouvons aller de l'avant et peut-être inclure toutes ces informations différentes. Donc parce qu'on a créé sa gada et je vais la laisser telle qu'elle est. La première chose que je vais faire est en fait que je peux sauter ici au milieu pour notre transport. Et par exemple, le train n'est pas disponible. Et par exemple, les patrons ne sont pas disponibles. Par exemple, peut-être que vous pouvez y arriver en avion et en voiture, disons. Pour que nous puissions passer à autre chose. Et ce que je vais faire, si vous vous souvenez offrir voiture, BG a cette ombre sur 5% de la basicité, je vais l'augmenter dans le prochain état. Mais avant d'aller de l'avant, nous avons besoin d'une image. Donc je vais faire glisser et déposer une image à l'intérieur d'ici. Et je vais l'appeler ou Gada, image comme ça. Et ce que je vais aussi faire est créé en tant que composant. Voyons voir, peut-être qu'on peut appeler ça spécial. Offrir des cartes. Il contrôlerait la clé. Et ce que nous allons faire est de créer un état de vol stationnaire comme celui à l'intérieur de notre état Horace, les deux seules choses que je veux faire sont avec notre carte d'offre, BG, ou même nous pouvons l'appeler carte d'offre spéciale. Juste pour qu'il ait des choses cohérentes ? Et j'ai changé cela dans l'état par défaut. Donc, une fois que nous sommes en état d'horreur, vous pouvez voir qu'il a été mis à jour. Donc, à l'intérieur de l'état d'horreur, vous pouvez cliquer dessus. Augmente à 8%. Par exemple, juste trié, vous pouvez attirer l'attention sur elle un peu plus. Maintenant, nous pouvons aller à la flèche LBG et je peux étendre notre masque ici pour que la largeur soit 82 et qu'il couvre vraiment bien. Donc, si je vais à l'état par défaut et une chose de moins que je veux changer est l'image elle-même. Donc, lorsque nous cliquons dessus, je veux double-cliquer pour que je puisse aller à l'intérieur du masque d'image. Ensuite, je vais maintenir Maj Alt et un clic gauche dans l'un des coins, peu importe lequel est simplement développé légèrement comme ça. Donc, lorsque vous passez entre l'état par défaut et l'état Horace, tout semble être en expansion. Donc, je vais frapper mon aperçu. Apportez-le ici. Va à ici. Et vous pouvez voir une fois qu'on est en vol stationnaire, à quoi ça ressemble. Donc, une fois de plus, nous avons cette belle ombre de fond et nous avons cette image se déplaçant à côté de notre icône. Donc peut-être que nous voulons peut-être même supprimer cet état hybride ici. Peut-être que ce n'est pas vraiment si nécessaire. Peut-être qu'on peut juste garder la flèche telle qu'elle est. Je ne pense pas que l'état de l'horreur fonctionne très bien ici parce que nous avons le premier pas, qui est de voir sa deuxième étape qui est en vol stationnaire, puis la troisième étape qui est juste ici. Mais peut-être, peut-être que nous pouvons même le laisser juste pour que nous indiquions que c'est possible. Faites dans cet état. Laissons-le et voyons où ça va de là. Donc, la prochaine étape pour nous est de dupliquer les rejets. Donc ce que je vais faire est de tenir mon Alt, faire glisser la position est juste ici. Alt et faites-le glisser, positionnez-le ici, comme de la saleté. Donc je vais le déplacer ici, puis le déplacer ici. Et puis je vais faire la même chose. Donc vieille position et celui-ci juste ici et puis ALT juste ici. Tout droit ici. Alors je vais organiser ces trois. Alors sélectionnez-les tous. Et je vais frapper Control X pour les déplacer en dehors des offres de première minute et supprimer ces deux cartes parce que nous n'en avons pas besoin. Allez à la dernière minute, appuyez sur Contrôle V, collez-le en place, positionnez-le et juste ici, puis supprimez ces trois cartes ici. Alors qu'est-ce qu'on a ? Fondamentalement, si je clique ici pour passer en mode aperçu, ce que vous avez sont toutes ces cartes. Comme vous pouvez le voir, les effets de vol stationnaire fonctionnent vraiment bien. On leur a dit. Et fondamentalement, tout ce que vous changez dans ce composant principal va se mettre à jour dans tous ces composants supplémentaires. Donc, par exemple, si je arrondis les coins plus. Il sera mis à jour dans tous ces composants. Si, par exemple, je change une couleur de l'une de ces icônes, si je change la couleur du texte, si je fais quoi que ce soit dans ce composant en mise à jour dans tous ces autres composants. Mais n est que vous allez voir dans une seconde, une fois que vous commencez à mettre à jour tous ces composants enfants qui proviennent de ce composant parent, qui est celui-ci, il ne va pas inverser les changements de dose. Donc, une fois de plus, tout ce que vous faites dans le composant stérile, qui est le composant principal, va se mettre à jour dans l'ensemble de vos composants enfants, mais cela ne fonctionnera pas dans l'inverse. Donc, quoi que vous modifiez dans ces composants enfants, il ne va pas propager Ce parent ou le composant principal. Alors commençons avec le second. Et par exemple, je peux écrire à Tokyo ici peut-être. Pour que je puisse sauter à l'intérieur de cette qualité unique, Tokyo. Je l'ai fait. Je peux zoomer. Voyez l'explorateur et la terre du soleil levant par la terre. Et voyons, peut-être qu'on peut juste laisser l'avion dans celui-ci. Donc pour le transport mobile, nous allons juste quitter l'avion, mais tous ces autres ne vont pas en manger disponible pour dislocation. Un des jours, peut-être que nous pouvons mettre 14 jours au lieu de 24, donc 14. Et nous pouvons aussi augmenter ça à 50, sens pour moi, oui, 58 Je pense que ça marche bien. C' est pour ça qu'on l'a mis en pile. Le prix va être beaucoup plus élevé. Donc, par exemple, $2430 dans celui-ci. Et ce que vous pouvez faire, c'est que je vais appeler ce stock votre image. Je ne me laisse pas localiser mon image Tokyo à l'intérieur de mon dossier. Alors voyons Tokyo. Je vais le glisser et le déposer à l'intérieur. Ce que vous pouvez faire dans ce cas parce que nous avons toutes ces informations qui sont modifiées alors nous allons aussi apporter un peu de piquant à elle. Allons à l'intérieur de notre classement. Localisons le moins Star, qui est celui-ci, et mettons-le dans un état gris. Nous avons donc une note de quatre étoiles, par exemple, pour celle-ci. Donc ce que je vais faire maintenant, c'est que je vais les sélectionner tous. Au lieu de la flèche frapper le contrôle C, sautez à l'intérieur de mon état Horace, QED contrôle V. Et puis je vais supprimer tout ça sauf la flèche. Donc, fondamentalement, nous avons toutes ces mêmes informations. Et maintenant à l'intérieur de notre image, je vais double-cliquer pour entrer dans le mode masque, déplacer le contrôle M, donc je peux l'agrandir un peu, par exemple, deux ici. Et ensuite on pourra, on voudra entre nos états. Et vous pouvez voir à quel point c'est simple. Cela va prendre du temps parce que nous avons tous ces états différents. Mais au moins vous avez ce bel effet. Une fois de plus, nous avons le Hoegaarden, nous avons le Tokyo sur, et tout fonctionne comme il se doit. Donc, pour ne pas vous ennuyer avec trop de détails, je vais mettre la vidéo en pause ici. Je vais faire le reste d'entre eux et je reviendrai pour qu'on puisse travailler sur cette vidéo. Et maintenant que tous sont terminés, le lithium rapidement ici pour aller à l'aperçu et vous pouvez vous voir si régate, barris, Kroc ou Tokyo, orge et Taipei. Et bien sûr, j'ai fait quelques changements à eux. Donc, vous pouvez voir que pour le type a, par exemple, nous avons la voiture et un avion juste ici. On a juste un trajet en bus ici. Nous en avons trois au lieu de l'avion ici, nous avons ces deux là, nous avons l'avion. Donc juste la variété pour le client de vérifier principalement. Et vous pouvez vérifier et cliquer ici à partir de n'importe lequel de ces. Et ils peuvent aller vraiment comme ces flèches parce que je pense que la pause le client et les a forcés à cliquer sur cette zone. Mais vous pouvez également faire de cette carte toute la zone cliquable si vous voulez qu'ils passent à la page suivante. Alors maintenant, nous allons travailler rapidement sur cette vidéo promotionnelle pour que je puisse fermer ceci à partir d'une vidéo. Donc la seule et seule chose que je veux faire ici est de glisser et déposer mon image à l'intérieur. Voyons voir, peut-être que nous pouvons même inclure une superposition de couleur parce que je ne pense pas que tout est bien dette à ça. Je ne pense pas que ça se démarque bien, donc Control D, je vais renommer ça en superposition vidéo promo. Et utilisons la même couleur que nous utilisons. Donc presque noir et je peux frapper sept sur mon clavier. Lori jusqu'à 70. Maintenant, ça a l'air beaucoup mieux. Donc, dans la prochaine vidéo, nous allons faire exactement la même chose que nous l'avons fait pour jeter. Nous allons juste créer un composant à partir de cette carte et Dan transformera fondamentalement tout au long de nos designs. Donc, fondamentalement copier et coller à tous d'entre eux. Et cela va accélérer massivement notre flux de travail. Mais je vais aussi vous expliquer comment vous pouvez faire ça aussi. Alors je te verrai là-bas. 29. Créer un design 4: Passons maintenant aux destinations et je vais commencer par créer cette carte de destination. Encore une fois, la même histoire, comme avec cette section ici. Lorsque vous créez ces fichiers en tant que filaires, il est important de mettre autant d'informations que possible pour donner à vos clients le plus de contexte possible, puis d'expliquer en temps opportun comment ils vont ressembler une fois ils sont finis. Mais vous ne voulez pas investir tout votre temps d'avance. Et au début, parce que vous voulez le garder beau et court et que vous voulez leur donner autant de contexte que possible que je l'ai dit, sans inclure toutes ces informations à l'intérieur, comme toutes ces images, toutes ces toutes ces transitions parce que vous voulez garder le contexte bas et que vous voulez déterminer la structure et l'aspect général de votre design. Avant de passer à toutes ces informations supplémentaires et d'inclure toutes ces informations supplémentaires à l'intérieur. Donc avant de passer à cette section, j'ai juste remarqué que vous pouvez tout voir pendant une minute, mais je n'ai pas changé tout ça à la dernière minute. Alors laissez-moi le faire rapidement à toutes les dernières minutes. Je vais le copier. Retourne à mon état d'horreur. Retournez ici ou les habitudes laitières de dernière minute. Et maintenant, nous pouvons passer aux destinations. Encore une fois, je vais faire la même chose. Je vais créer un composant à partir de celui-ci. Je vais mettre la vidéo en pause et je vais le remplir, et pas seulement celles-ci, mais toutes ces autres, juste pour gagner un peu de temps sur cette vidéo. Mais comme je l'ai dit, je veux vous donner le plus de contexte possible sur cette conception globale, sur la structure désordonnée et sur ce flux global, juste pour que vous puissiez comprendre comment faire avancer cela. Je ne veux pas perdre votre temps en recréant toutes ces cartes parce que nous allons avoir huit cartes dans cette section recherchées pour sections avec huit cartes remplies d'information in vitro. Comme je l'ai dit, je ne veux pas perdre trop de temps. Donc, pour commencer, ce que nous allons faire une fois de plus, je vais aller de l'avant et supprimer ces trois parce nous savons que si je double-clique sur notre tableau d'art, nous savons que la largeur de la gouttière est de 60, c' est donc la distance que nous allons avoir entre nos cartes. Donc, pour commencer, ce que je vais faire en fait, c'est faire les flèches d'abord. Parce que si je clique sur ma flèche gauche, vous pouvez voir que nous avons l'état par défaut en hover. Si nous avons sauté au prototype, vous pouvez voir que sur l'état par défaut, nous avons sélectionné l'animation automatique, facilité dans et 0.3 secondes. Donc je vais le faire sur la flèche droite aussi. Donc, je vais cliquer, je vais utiliser à la place de l'onglet, je vais utiliser le hover. Animation automatique. Cependant, relâchez et zéro point trois secondes. 3.3, désolé, 0.3. Appuyez sur Entrée juste parce que je veux garder la même cohérence. Et plus tard, quand je le copierai et le collerai, je ferai la même chose pour toutes ces autres flèches. Donc, parce que nous osons, allons avec le design et une fois de plus, revenons dans les villes. Je vais dégrouper celui-ci et je vais l'appeler carte de destination comme ça. Donc la première destination sera Paris juste ici. Donc porteurs. Et je vais taper Explorer. La Cité des Lumières comme ça. Et au lieu de 24 jours, nous pouvons nous occuper de quelque chose comme sept jours, par exemple. Une fois de plus, c'est là que cela est utile. Parce qu'on empilerait inclus. Je peux simplement sauter ici par exemple, et dire que je veux être à 24 ans, je veux être à 65 Peut-être. Je pense que c'est bien. Je pense que ça a l'air bien. Et vous pouvez toujours sauter à droite et changer ces valeurs ici, plutôt que de simplement cliquer dessus, puis en tirant à gauche et à droite, vous pouvez toujours, comme je l'ai dit, simplement cliquer et entrer la valeur ici que vous voulez. Une dernière chose, c'est que nous allons changer le prix de ça, va être 450, comme ça. Donc nous avons eu le Paris et donnons-lui quatre étoiles par exemple. Donc notation pour les étoiles, je pense que c'est bien. Et au lieu de l'image de destination, appelons-le image de Paris. Ing, parce que comme je l'ai dit, nous allons en avoir plusieurs et nous allons inclure différentes destinations à l'intérieur. Alors laissez-moi rapidement sauter dans mon dossier d'image. Donc les pharaons juste ici et traînez-le et déposez-le à l'intérieur. Et fondamentalement, c'est à quoi ressemble mon dossier d'image. Je vais juste faire glisser et déposer ces images à l'intérieur. J' ai aussi ce logo partenaire. J' ai aussi ces drapeaux comme je t'ai montré. Et fondamentalement, vous pouvez le faire aussi. Maintenant, je les ai exportés comme ces dimensions, donc les dimensions originales à l'intérieur du fichier. Mais encore une fois, si vous voulez obtenir la pleine dimension de ces images, utilisez-les pour votre portfolio ou pour votre travail client. Rendez-vous sur les Envato Elements et obtenez l'abonnement pour leur auto va en valoir la peine parce que vous allez obtenir toutes ces images massives. Je pense que cette image originale était quelque chose comme huit K ou quelque chose comme ça. Mais ici, exporté, comme vous pouvez le voir, il est juste 366 semaines à 60 va suffire pour ce projet. Mais comme je l'ai dit, si vous voulez, vous pouvez le faire et obtenir l'abonnement pour vous-même et explorer toutes ces images que je vous ai montrées maintenant, appuyez sur la touche Contrôle pour cette carte de destination. Et si je vous emmène ici, vous pouvez voir que nous avons une carte d'offre spéciale et nous avons une carte de destination. Donc je pense que c'est bon. Maintenant, faisons planer la puissance de l'état. Je vais l'ouvrir et encore une fois, juste image. Donc, Maj Alt et clic gauche. Vous devez double-cliquer à l'intérieur pour accéder au masque. Parce que si vous ne le faites pas et que vous faites Shift Alt comme ceci, cela va augmenter la taille globale de votre image. Donc ça va sortir comme ça. Mais une fois que vous double-cliquez à l'intérieur va entrer en mode Masque d'image, déplacer Alt, et un clic gauche augmenter légèrement. Encore une fois, nous allons passer aux flèches. Désolé, donc ces cartes de tradition, nous sommes à l'état de vol stationnaire, donc je vais passer au masque de flèche. Et je vais l'étendre jusqu'ici. Et enfin, je vais passer à autre chose ici et inclure ça pour être huit. Et c'est fondamentalement tout. La prochaine chose est de retourner à l'état d'horreur. Et nous allons utiliser une grille répétée. Ainsi, vous pouvez utiliser la grille de répétition ou vous pouvez simplement Alt ou option, puis faites-les glisser comme vous le souhaitez. Mais je vais utiliser la grille de répétition juste pour l'amour de la cohérence. Comme je l'ai dit, je vais avoir besoin de huit d'entre eux. Donc 2, 4, 6, 7, un de plus. Donc comme ça. Et je vais les positionner dans un groupe de villes de qualité comme ça. Et je vais sauter sur ma grille de répétition, dégrouper la grille. Donc, ils restent à l'intérieur du dossier lui-même. Ils restent à l'intérieur du plan de travail lui-même. Le point principal ici est d'obtenir le look et la sensation cohérents entre eux. Comme vous pouvez le voir, ils restent à l'intérieur de notre plan de travail. Donc, si vous appuyez sur Preview client, un 100 utilisateurs savent qu'ils sont plus de cartes à être ici, sorte qu'ils peuvent utiliser ces flèches pour aller à gauche et à droite. Donc ce que je vais faire maintenant, c'est mettre la vidéo en pause pour que je puisse les organiser. Tu sais comment j'aime faire des trucs. Donc je vais mettre ce 1 en premier, je vais mettre cette 1 seconde. Et maintenant que je l'ai fait, je dois inclure le même espacement entre eux. Donc je vais utiliser 60 maintenez Maj pour désélectionner celui-ci, maintenez Maj, maintenez, Maj, maintenez Maj, maintenez Maj, maintenez Maj, et faites la même chose pour tous ces autres. Donc, je maintiens simplement la touche Maj pour faire glisser, puis maintenez la touche Maj enfoncée et cliquez pour désélectionner, puis simplement le faire glisser vers ici. Donc, tout d'abord, si nous frappons aperçu juste pour voir ces destinations européennes. Et si je fais défiler jusqu'ici, vous pouvez voir qu'une fois que j'ai frappé en survol, tout fonctionne comme il se doit, mais vous ne pouvez pas atteindre tous ces autres. Alors, comment changer ça ? C' est assez simple avec votre dossier sélectionné et je vais copier ce titre. Ce que vous pouvez faire est simplement d'utiliser le défilement horizontal, cliquez juste là. Et ça va aller au bord juste ici. Mais juste ici, ce que je vais faire est de laisser juste un peu d'espace juste ici à gauche. Alors maintenant, quand je frappez l'aperçu et que nous arrivons à ce stade de notre conception, c'est le cas. Maintenant, une fois que vous cliquez et faites glisser, comme vous pouvez le voir, vous pouvez toujours voir toutes ces cartes comme ceci, et vous pouvez toujours voir un peu de défausse ici maintenant qui est utilisé juste parce pour donner à vos utilisateurs l'indication qu'ils sont quelques cartes plus d'être là. Ainsi, ils peuvent cliquer sur ces flèches en bas et ils peuvent toujours y accéder comme ça. Donc c'est tout pour cette partie. Je vais le renommer en villes comme ça. Et je vais maintenant sauter et changer toutes ces villes. Je vais changer tous ces noms pour l'état par défaut et l'état du survol. Et ce que vous pouvez aussi faire, c'est que si vous connaissez vos villes, vous pouvez changer le nom de cette carte. Donc nous pouvons le faire aussi ici. Ainsi, vous pouvez sauter à l'intérieur de la première minute carte offre spéciale. Je peux le laisser comme ça ou je peux double-cliquer ici. Et Ricardo qualitatif. Maintenant, cela ne va pas se terminer ajouté juste ici parce que nous utilisons simplement la carte d'offre spéciale comme composant principal. Ça va juste t'aider à organiser les choses un peu ici. Alors Tokyo et moi allons renommer ça en Bali. Vous pouvez aussi le faire ici. Alors Paris, Kharkov. Et enfin, nous avons le type B, leur tête. Et maintenant que c'est terminé, comme je l'ai dit, je vais aller vers le bas et je vais faire 1 d'abord, juste pour te montrer une fois de plus, donc Paris. Et disons que ce sera Londres, par exemple. Donc Londres, et je vais sauter ici. Je vais partir, la forêt commence, donc je vais appeler ça un Londres. Je vais dire Explorez et par exemple, l'histoire de Londres. Pour les jours que nous allons avoir, par exemple, des années 70 aussi. Donc je pense que c'est bon. Mais ici, nous allons juste enlever la voiture, donc pas disponible. Et à l'intérieur de Paris, par exemple, nous pouvons le faire aussi. Alors voyons Moodle, voiture de transport moodle. On peut s'en débarrasser. Et dès que tu le feras, si on va dans l'État d'Horace, ça sera là aussi, mais je vais l'enlever ici aussi. Donc, les notes de voiture de transport disponibles, l'habitude laitière, et il devrait également mettre à jour tout au long de ces autres. Il n'a peut-être pas besoin d'enregistrer le fichier et ensuite il sera mis à jour. Mais peu importe ce que, comme vous pouvez le voir, nous avons mis à jour ce 1, tout d' abord, le prix, alors passons à 820, mon père. Et maintenant ce que je veux faire est le même qu'avant. Tout d'abord, changez ça à Londres. Allez dans mon dossier d'images et localisez Londres. Faites glisser et déposez mon image à l'intérieur. Maintenant, sélectionnez tout sauf pour la flèche Contrôle C. Sautez à mon contrôle d'état d'horreur V, puis supprimez tout sauf la fin de la flèche destination actuelle BG. Maintenant, je vais double-cliquer ici, déplacer le contrôle et l'augmenter. Retourne à ici. Et maintenant, si nous frappons l'aperçu juste pour vous montrer, mais tout d'abord, je dois ramener cela à l'état par défaut comme ça. Donc maintenant, si on retourne à ici, faites défiler tout le chemin vers le bas. Vous pouvez voir que nous avons Paris, nous avons Londres. Les prix sont différents. Donc, si je survolais ici, si je survolais juste ici, et que je peux simplement passer de l'un à l'autre et nous allons animer ça plus tard. Je vais vous le montrer dans la prochaine vidéo. Donc pour cette vidéo, c'est tout. Je vais maintenant aller de l'avant et les changer tous. Et puis dans la prochaine vidéo, je vais revenir et te montrer à quoi ça ressemble. Ensuite, nous pouvons passer à toutes ces autres sections de notre conception. Mais ils sont juste point pour expliquer tout cela dans une seule vidéo et ajouter leur dette. Comme je l'ai dit, perdez votre temps en sortant des heures et des heures pour changer tous ces états différents. Je te vois dans la prochaine vidéo et tu verras tous changer, ainsi que tous ces autres. 30. Créer un design 5: Bienvenue et nous allons continuer là où nous nous sommes arrêté la fois précédente. Donc, dans la dernière vidéo, je t'ai laissé avec ça et je vais de l'avant et je les finis. Je suis allé de l'avant et j'ai ensuite rempli l'Asie mystique, les belles Amériques. Donc, fondamentalement, nous avons un quatre grands continents. Nous avons donc des destinations européennes, africaines , asiatiques et américaines. Et fondamentalement, je suis allé de l'avant et les ai tous créés. Donc si je frappe l'aperçu et saute ici, agrandissez ce très vite, je peux descendre. Donc vous pouvez voir que nous avons Paris, Londres, Rome, Prague, et je peux traîner tout ça. Nous avons également la même chose pour l'Afrique, donc toutes ces destinations fonctionnent bien. Nous avons la même chose pour l'Asie et nous avons la même chose pour les Amériques. Dans l'édition qui sont fixes est l'effet de survol sur toutes ces flèches. Donc tous ces droits, des flèches juste ici que vous pouvez voir. Alors maintenant tous fonctionnent comme ils le devraient. Une dernière chose que j'ai réparée, c'est les CT. Donc, à l'intérieur de chaque ville, je suis allé de l'avant et j'ai utilisé ce rouleau si horizontal. Et j'ai coupé ce bord gauche au bord de notre grille. Donc c'est essentiellement tout ce que j'ai fait. Donc, ce que nous allons faire avant de passer à l'une de ces prochaines étapes, c'est que je vais créer une animation pour eux et essentiellement créer deux états différents. Ainsi, les utilisateurs peuvent soit faire défiler ici ou encore plus élégamment cliquer ici sur ces flèches, puis aller à gauche et à droite. Donc, ce que nous allons faire est fondamentalement que nous pouvons convertir tout cela en composant si nous le voulons. Mais je vais faire ça en gros. Destinations européennes. Ou encore mieux. Oui, faisons-le ça juste pour gagner du temps. Alors appuyez sur la touche Contrôle et créez toute cette chose en tant que composant. Donc à l'intérieur de cela, nous avons ces composants imbriqués pour le bouton et pour les flèches. Donc, nous allons ajouter juste un état de plus. Qualité cliquée. Par exemple, comme nous l'avons fait auparavant. Et à l'intérieur de l'état cliqué, nous allons sauter à l'intérieur de nos villes. Cliquez sur notre dossier des villes et faites-le glisser jusqu'à ce que la ville s'aligne sur cette ligne de grille juste ici sur la droite. Donc, lorsque nous faisons défiler entre eux et l'état par défaut et clique sur la date, c'est la seule chose qui change. Allons maintenant de l'avant et faisons de même pour l'Afrique. Donc, le contrôle K pour créer un nouvel appel qu'il a cliqué. Et je vais copier ce texte. Un audit, que nous allons faire, comme je l'ai dit, est sauter dans les villes et de déplacer ce dossier ici. Ensuite, fermez toutes les sauvegardes. Déplacé en Asie, touche de contrôle. Ajouter une nouvelle qualité d'état cliqué. Et c'est à ce stade que vous commencez à ajouter tous ces éléments différents, toutes ces images différentes que vous pouvez voir Adobe XD fonctionner un peu lentement. Et surtout dans mon cas et ma dette, j'utilise le mur de ces programmes et logiciels sur Adobe XD afin que je puisse réellement enregistrer toutes ces leçons. Donc, vous pouvez juste imaginer que le vôtre va courir un peu plus vite. Mais c'est pourquoi il est important d'optimiser ces images. Et c'est pourquoi il est important de les avoir comme ça. Donc, en termes d'optimisation d'image, ce que j'utilise sous Windows s'appelle des émeutes. Et je vais l'apporter rapidement. Donc, c'est là. Ça s'appelle Riots. Fondamentalement, la seule chose que je fais un, un, c'est gratuit au fait. Je pense que ça s'appelle Image Up Tim sur Mac. Je vais essayer de le déterrer et je vais le laisser dans le PDF pour que vous puissiez y accéder. Mais je vous recommanderai toujours d'optimiser vos images. Ce que cela va vous permettre de faire est une taille d'image inférieure. Ça ne va pas gâcher la résolution, juste pour réduire la taille. Donc, votre logiciel, Adobe XD, dans ce cas, va fonctionner beaucoup plus facilement et beaucoup plus rapidement parce que vous optimisez ces images plus tard il sera important parce que vous allez envoyer ces ressources à vos clients et développeurs. Donc, quoi que vous envoyez à vos développeurs ces fichiers énormes, ils doivent le faire plus tard. Donc, en gros, c'est ton travail de faire ça pour eux. Fondamentalement, vous allez faire glisser et déposer votre image ici à l'image initiale, cliquez sur Optimiser n va l'optimiser à votre, désolé, vous n'avez pas à cliquer même vous pouvez simplement le faire glisser ici. Il va commencer à optimiser automatiquement, puis il va vous montrer ça juste ici. Donc, pour avoir apporté une image, j'ai une image ici sur mon bureau afin que je puisse la glisser et la déposer ici. Il va vous montrer que vous pouvez l'optimiser démarrer. Alors, comment voulez-vous l'optimiser ? C' est la résolution originale. Donc, oh désolé, taille originale. Je veux cliquer sur oui, ça va l'optimiser. Et parce que cela est déjà optimisé, il n'est pas affiché. C' est un énorme potentiel. Laisse-moi retourner à mon ordinateur et trouver une oreille. Voici donc mon image de mon ordinateur. Et je vais vous le montrer dans un vrai exemple. Donc, ici, vous pouvez voir que l'image originale est de 2,5 mégaoctets optimisés est de 1,7. La dernière chose que vous devez faire est simplement de cliquer sur Enregistrer. Il va sauver à cette destination. Ça va avoir l'air bizarre ici et ça va avoir l'air de se déformer. Mais croyez-moi, ce n'est pas, c'est juste que l'aperçu qui ressemble à ceci. Une dernière chose à ce sujet est surtout sur des projets aussi grands que celui-ci sur lesquels nous travaillons dans cette classe. Lorsque vous avez plusieurs de ces images, elles ont cette fonction de lot. Donc, fondamentalement, vous pouvez faire exactement la même chose. Batch, importez toutes les images que vous voulez. Cliquez sur Enregistrer. Il va les sauver et optimiser chacun d'entre eux au meilleur rapport qualité-prix possible. Fondamentalement, c'est tout pour les images. Maintenant, allons de l'avant et animons toutes ces choses. Je vais donc aller au prototype pour les destinations européennes. Je vais trouver mes flèches, un point d'onglet droit. Je vais cliquer dessus. Donc, nous allons utiliser tap, auto animation, choisir l'état, cliqué, facile et out et zéro point, disons six secondes juste pour que nous ayons ce bon flux. Et maintenant, nous pouvons revenir à l'état cliqué, localiser nos flèches une fois de plus. Maintenant, point de touche gauche. Utilisez les mêmes paramètres, mais passez à l'état par défaut. Et les troupeaux laitiers. Maintenant, nous pouvons revenir à l'état par défaut. C' était l'Afrique. Utilisez des flèches. Donc, à droite, onglet, point, cliquez ici. Accédez à l'état cliqué. Passez à notre état cliqué. Flèches, point DAP gauche cliquez juste là. Je vais passer à l'état par défaut. Comme vous pouvez le voir, Adobe XD, au moins trois membres, tous ces paramètres, de sorte que vous n'avez pas à les entrer. Encore une fois, ce qui n'était pas toujours le cas, vous aviez l'habitude de faire toutes ces choses. Donc c'était vraiment une corvée. Mais maintenant, c'est beaucoup mieux, Dandy, bonifie-toi, papa. Je souhaite seulement qu'ils continuent d'améliorer cette situation. Et ils dirent qu'ils verront Je leur fais confiance parce qu'ils ont tous ces changements au fil du temps avec ces états. Par exemple, je n'aurais pas à mettre la vidéo en pause, puis revenir en arrière et éditer toutes ces images. Peut-être qu'ils, il y aura une autre option à l'avenir que vous pouvez simplement faire glisser ces images et vous n'avez pas besoin de l'ajouter à tous ces états manuellement et de les changer tous. Alors revenons enfin ici pour cliquer sur Etats et flèches à gauche pour pointer. Cliquez ici. Nous allons passer à l'état par défaut est dans notre 0.6 et revenir à notre état par défaut. Et nous pouvons revenir au design, appuyez sur Preview. Voyons à quoi ça ressemble. Nous pouvons aller directement ici à nos destinations européennes, localiser notre flèche, cliquer dessus, et il va changer pour entendre comment sont ici. Cliquez sur, va passer pour entendre. Cela fonctionne toujours, l'effet de vol stationnaire fonctionne toujours. Faisons vite ça pour tous. Donc ça marche. Ça marche ici. Retournons à ici. Ça marche. Et je vais toujours vous recommander de vérifier vos conceptions parce que parfois il y a des problèmes du côté XD, mais la majorité des fois il y a des erreurs que, par exemple, vous avez oublié d'inclure et des choses comme ça. Donc, avant de passer à cette section avec nos meilleures destinations pour cette vidéo, je veux corriger et un rapidement ajouté ces éléments simples comme celui-ci sur, par exemple. Alors réservez votre voyage de rêve. Je vais juste localiser mon image dans mon dossier d'images et la faire glisser et déposer à l'intérieur d'un canari. Positionnez-le si je veux, mais je pense que ça a l'air bien. Je ne veux pas faire ensuite c'est sauter ici, donc il y a un voyage parfait pour tout le monde. Je vais l'apporter et je vais en fait, au lieu de rêver et quand changer ça pour paraître parfait. Et la raison pour laquelle je fais ça, c'est parce que nous allons exporter ça plus tard. Il est donc préférable de changer toutes ces images maintenant et de changer leur nom. Il est donc beaucoup plus simple d'exporter plus tard. Enfin, je vais sauter à notre pied de page. Et pour notre pied de page va être en fait assez simple. Nous allons avoir une image de pied de page, qui va être dans celui-ci. Alors laissez-moi le regarder dans mon dossier. Et voilà, et traîne-le et dépose-le dans des endroits comme une fille allongée, Chilling. Donc ce que je vais faire est dupliqué. Donc la même chose encore une fois, on va aller ici presque noir. On va l'appeler pied de page. Couleur, superposition et peinture, comme nous l'avons fait avec la vidéo, nous allons juste la réduire à 70 pour cent. Et c'est fondamentalement tout pour cette vidéo. La dernière chose que je peux faire pour celle-là avant passer à ceci et de finir avec ceci et ceci ici, qui va nous prendre le plus de temps. Cette section en bas, peut-être que je peux vous laisser avec cette section. Donc catégories de voyage, nous pouvons peut-être plus 12 dette. Et je peux le faire très rapidement. Alors nous allons sauter à l'intérieur de là. Donc ce qu'on va faire, c'est les ouvrir tous les trois comme ça. Donc nous allons appeler cette carte bien-être bien-être. Nous allons appeler celui-ci ski et appeler celui-ci croisières. Et nous allons donner l'ordre de couleur de carte donc croisières , Lee. Et nous allons essentiellement copier cette section ici. Tenez-le ici, puis utilisez ceci comme courant Keaton. Bien que cliquez ici, collez-le comme ça, et collez-le ici, mais je dois le copier. Si bien connu écharpe sautant ici basé en elle, et c'est fondamentalement tout. Maintenant, pour ces superpositions colorées, ce que nous voulons faire est fondamentalement abaisser à 50 pour cent, par exemple. Alors faisons ça. Cliquez ici, Retournez à 50. Allez à celui-ci, cliquez dessus, revenez à 50. Et enfin cliquez sur celui-ci, changez sa couleur, revenez à 50. Et maintenant, nous avons notre image. Donc je vais m'en servir. Alors peut-être que nous pouvons faire comme le ski courant et puis carte de ski, image, croisières, chariot va image Gag et ainsi de suite. Alors peut-être qu'on peut le faire. Cachons rapidement et ces superpositions colorées, je peux les ramener à 0. 0. Maintenant, je vais dupliquer celui-là. Alors garde bien-être, IMG, tu auras cette carte de croisières. Et enfin, dans celui-ci, donc carte de schéma, je suis G. Maintenant, nous devons cacher celui-ci, et juste pour que nous n'ayons pas ces problèmes que j'ai expliqués dans la section héros. Laisse-moi localiser mes images. Donc, nous allons commencer avec l'image du bien-être. Donc je vais le glisser et le déposer en place. C'est là. Je vais passer aux croisières et faire glisser et déposer. Et enfin, je vais apporter mon image de ski m, Iso. Je vais apporter ma couleur ou seulement 50 pour cent, apportant cela dans 50 pour cent, et enfin mettre cela en position à 50 pour cent. Et maintenant ce que nous pouvons faire est Voyons voir, à ce Wellness, Wellness voyage par exemple. Croisières voyage, mon père, et enfin voyage de ski. Pour qu'on puisse courir les décollages ici. Alors appuyez sur la touche Contrôle, Contrôle K juste ici, et la touche Contrôle juste ici pour les créer en tant que composants. Et enfin, comme tous ces autres, mais nous allons juste avoir sa succession, tellement désolé, pas l'État lui-même. Donc planer et la saleté. Et à l'intérieur du Howard, ce que nous allons faire est de cacher rapidement ce double-clic sur notre image. Donc, fondamentalement, la même chose. Il suffit d'agrandir l'image à l'intérieur du masque un peu comme ça. Retournez à l'état par défaut, croisières, même chose. Donc, créez un vol stationnaire. A l'intérieur du vol stationnaire, je vais cacher ma couleur oralement. Et la raison pour laquelle j'ai quitté ces arrière-plans, par exemple, est peut-être que je veux ajouter une sorte de superposition de couleur sur le dessus. Peut-être que je veux ajouter des ombres de fond. Peut-être voulons-nous ajouter tous ces différents éléments. Alors gardons ça juste là pour l'instant et peut-être que plus tard nous voulons y revenir. Il est donc toujours préférable d'avoir cette option dès le début. Donc ici, je vais utiliser un état d'horreur. Encore une fois, horreur. Voyons voir. Donc peut-être que je peux cacher, ne double-cliquez ici et l'agrandir. Et en fait, j'ai déjà une idée. Donc, parce qu'ils ont déjà cette ombre portée, je vais l'augmenter pour aider à avoir fondamentalement le même effet que nous le faisons avec toutes ces autres cartes. C' est pourquoi nous l'avons juste comme une option. Donc, peut-être voulons-nous le modifier plus tard, comme nous le faisons dans ce cas, mais pas dans l'état par défaut. Je suis allé le garder à cinq heures. Osez. Je veux aller dans l'état d'Horace et l'ouvrir. Situé, change-le en comme ça. Revenez à l'état par défaut. Et enfin dans notre bien-être, je veux aller à l'état d'Horace et ensuite le changer là pour manger des habitudes laitières. Et c'est tout ce que nous allons faire pour cette vidéo. Donc, comme vous pouvez le voir, nous avons fait beaucoup. Ensuite, nous allons nous occuper des destinations les plus prisées, et ensuite nous allons nous occuper de ces témoignages. Et enfin avec cette section, qui va en fait être la plus difficile en termes d'animations, parce que nous allons faire face à beaucoup de cacher beaucoup de deux états différents. Mais ça ne va pas être si difficile. Ça prend juste du temps. Mais avant de le faire, nous allons rapidement prévisualiser ce que nous avons fait jusqu'à présent. Donc, nous avons fini tout ça. Tout cela semble bien comme vous pouvez le voir, l'image est superbe ici. Tout ça a l'air bien. On s'occupera de ça plus tard. Et maintenant, nous avons ceci. Donc ce que je n'aime pas à ce sujet évidemment, c'est que nous devons changer ce texte de gris clair au blanc. Donc je vais le faire maintenant. Alors localisez-les. Donc je vais changer, ça va être plus facile. Blanc, blanc ici à blanc. Et puis je vais revenir en arrière. Ok, c'est bon. Donc, planez, survolez et survolez. C' est blanc, blanc, blanc, ce qui est très bien. Donc, il a suivi l'état par défaut comme il se doit. Mais comme il l'a dit, toujours changer et toujours. Lorsque vous apportez des modifications, vérifiez toujours si elles sont appliquées. Donc, comme il l'a dit dans la vidéo précédente, si vous voulez changer l'une de ces cartes, si vous, par exemple, sautez ici. Maintenant, nous savons que c'était la première carte pour le Paris que j'ai créée. Mais si un saut ici et changer cela en rouge par exemple, comme vous pouvez le voir, il ne se met pas à jour en temps réel sur tous d'entre eux comme il se doit. Ce que nous pouvons faire, c'est faire un clic droit dessus. Le composant principal va le montrer ici. Et maintenant dans ce composant principal, si je l'ouvre parce que nous avons changé le nom de toutes ces voitures, par exemple. Maintenant, si je le passe en rouge, vous pouvez voir qu'il change et qu'il se met à jour en temps réel sur tous les. Et par exemple, si je retourne le contrôle zed, peut-être que je veux arrondir les coins à 10, 80 pour cent par exemple. Et vous pouvez voir à quoi ressemblent ces coins ici en bas. Mais peut-être que je ne veux pas faire ça. Peut-être que je veux arrondir, je ne sais pas, peut-être que je veux étendre ça à, disons 500. Et si je vérifie ici, vous pouvez le voir. Et il a montré ce changement en temps réel sur tous. Assurez-vous donc que lorsque vous faites cela, cliquez avec le bouton droit de la souris sur Modifier les composants principaux pour n'importe quel type de composant que vous voulez. Si vous voulez vous assurer qu'il s'applique correctement à toutes vos modifications de conception. Donc c'est tout pour cette vidéo, Je vous verrai dans la prochaine quand nous allons continuer avec une commutation ces et faire ces changements. 31. Créer un design 6: Continuons là où nous avons laissé la vidéo précédente. Et maintenant, allons de l'avant et finissons cette page d'accueil, qui, encore une fois, en raison de sa longueur, va être la plus difficile. Et parce que nous avons déjà fait beaucoup de travail ici sur la page d'accueil, ça va être beaucoup plus simple parce que si vous vous souvenez de ces filaires, toutes ces sections du bas sont essentiellement que nous copions et collons simplement. Et cette section ici est presque terminée, donc ça va être beaucoup plus facile dans ces prochaines pages. Alors passons maintenant à notre destination de premier plan. Et ce que je vais faire est le même que je l'ai fait avant. Je vais l'ouvrir. Laissez-moi d'abord fermer tous ces top pour que ça ne nous dérange pas la destination. Et appelons-le, par exemple, en haut. Cette carte de don. Et ce que je vais faire à l'intérieur est un peu différent qu'avant. Je vais regrouper tous ces éléments, appuyer sur Control G, appeler ça du contenu. Je l'ai fait. Et je vais inclure une pile. Il va reconnaître la pile comme elle va de haut en bas et comme avant. Vous pouvez évidemment augmenter ou diminuer la pile entre eux. Mais ce que je vais faire, ce n'est pas la dette. Alors regrouperons tous. Je pense que ça va être beaucoup plus amusant. Du contenu comme ça. Et maintenant inclure cela dans une pile. Donc, chaque fois que vous bougez, l' un d'entre eux va mettre à jour le courant en temps réel, comme vous pouvez le voir, et il va le mettre à l'échelle de manière responsable. Et cela est particulièrement important plus tard lorsque nous arrivons à la partie responsive resize de cette classe. Donc, comme je l' ai dit, je vais le faire pour cela offert la carte de destination. Appelons ça la première carte de destination, Vg. Donc, nous pouvons savoir une fois que nous commençons à exporter, une fois de plus, nous avons la même ombre ou cinq, nous allons l'augmenter dans l'état de vol stationnaire. Tout d'abord, créons nos composants. Alors appuyez sur la touche Contrôle. Allons à nos états de vol stationnaire. En fait savoir Nous allons d'abord traiter le contenu lui-même. Et je vais appeler cette image de destination haut de gamme. Sélectionnez cette image de destination supérieure, troupeau laitier. Et je vais retourner dans mon dossier Images, localiser les Maldives. Et je vais l'apporter comme ça. Ensuite, ce que nous allons faire est essentiellement de créer cet état de vol stationnaire. Alors va avec le vol stationnaire. A l'intérieur de notre état Horace, je peux double-cliquer ici, augmenter mon image. Et fondamentalement descendre ici et augmenter l'ombre pour des aides comme ça. Et la raison pour laquelle j'ai tout mis dans Hubbard, imaginez que parfois vos clients n'aiment pas vraiment cette mise en page. Ainsi, par exemple, ils veulent que vous basculiez entre les prix. Peut-être qu'ils veulent mettre le prix sur le dessus au lieu de ce texte. C' est pourquoi avoir tout ça dans une pile est vraiment. Gagner du temps, parce qu'imaginez qu'ils disent, OK, mettez le prix au-dessus. Qui a dit de ne pas t'inquiéter. Cliquez ici et remplacez-le simplement comme ça. Et là, vous l'avez. Vous avez votre nouvelle mise en page en un seul clic. Ces conseils prennent donc beaucoup de temps, surtout plus tard lorsque vous développez ce projet, lorsque vous entrez dans beaucoup plus de détails avec lui. Et je pense vraiment que ces conseils et techniques sont vraiment énorme gain de temps est quand il s'agit de travailler, surtout sur un grand projet. Supprimons ceux-ci et je vais faire la même chose que je l'ai fait avant. Hit Control G. Et je vais l'appeler, par exemple, les destinations. Et ce que je vais faire, c'est garder mon ancien poste clé, celui-là, faire 60. Et ça devrait aller ici. C' est vieux, encore une fois ici. Et comme ils ont 44 colonnes de large, cette fois, nous allons en créer six. Allons-y avec 69 saleté. Je vais me positionner ici. Et je vais simplement les sélectionner pour savoir, tenir mon ancienne clé. Assurez-vous qu'ils sont 60 ici et positionnez-les sur les semis solides du fond. Ça et ça. Maintenant, ce que je vais faire est de sauter à l'intérieur du premier, appeler en non-DVS ou des feuilles moisies plus simples. Et laissez-moi mettre la vidéo en pause ici pour que je puisse remplir toutes ces informations et revenir. Et maintenant que j'ai apporté tout ce contenu et inclus une lecture dans, permettez-moi de vous guider rapidement à travers pour que vous puissiez voir pour le vol stationnaire, j'ai fait exactement la même chose pour chacun d'entre eux. La seule chose que j'ai fait est au lieu d'utiliser ce texte ici, comme ceci ou taille fixe, je le change en hauteur automatique juste pour qu'il puisse être échelle beaucoup plus facilement plus tard comme vous pouvez le voir sur le redimensionnement responsive. Et ça va pousser ce texte vers le bas. Il sera beaucoup plus simple plus tard de le concevoir. Une fois que nous arrivons à une partie réactive de redimensionner de cette classe. Enfin, à l'intérieur du contenu que vous voyez donc rien n'a vraiment changé, tout est resté le même et inclus des images pour tous ces différents. Ainsi, vous pouvez voir pour la Toscane et ainsi de suite, ainsi de suite. Alors passons enfin à cela et remplacons-le. Donc, la première chose que je veux faire en fait est d'aller à ma flèche droite, aller sur un prototype cliquez ici, et je vais choisir le survol. Je vais choisir Ease Out. Et 0.3 si n'oubliez pas d'avoir les mêmes paramètres que celui-ci. Donc, cependant est notre 0.3 et là vous l'avez. Donc je vais retourner à mes emplacements, retourner à Design, Double-cliquez ici, qualité, haut, sur notre dessus, il y a la nation par ce hit Control K. Et fondamentalement la seule chose que je suis aller faire ici est d'utiliser un nouvel état. Alors j'ai cliqué sur ma dette. Et avant cela, nous pouvons aller à l'état par défaut et utiliser notre destination. Et faites la même chose. Donc, créez un groupe de défilement horizontal. Donc, nous pouvons ensuite ajuster plus tard dans notre design responsive laisser douter et nous allons l'appeler et des destinations comme ça. Donc maintenant, quand nous revenons à cliqué, il devrait traduire. Il a tout simplement ouvert et a poussé nos pays de liste à ce point ici. Là, nous l'avons. Donc on peut revenir à l'état par défaut et aller au prototype, chercher nos flèches, non ? Le point de tabulation va l'utiliser. Donc, utilisez l'onglet auto animate. Cliqué est l'état facile maintenant et 0.6 seconde. Maintenant, nous pouvons revenir à cliqué, localiser nos flèches, critères de clic point gauche, et utiliser l'état par défaut 0.6 est dans. Accédez à l'état par défaut, et maintenant nous allons rapidement l'afficher et voir à quoi il ressemble. Donc, je peux aller jusqu'au bout, en évitant toutes ces différentes sections. Et nous sommes là. Alors, survolez. Pour une raison quelconque, cette flèche ne fonctionne toujours pas, donc je vais la vérifier, mais au moins l'animation fonctionne comme il se doit. Donc, je vais devoir vérifier cela parce que vous pouvez voir que cette flèche gauche fonctionne très bien. Voyons donc voir les flèches d'état par défaut, une flèche droite. Nous pouvons utiliser hover et aller à l'état Horace est 0.3 itemsets. Ensuite, nous pouvons aller à l'état de clic et la flèche gauche est déjà là. Alors passons un aperçu à nouveau et descendons jusqu'à cette section qui est ici. Et maintenant ça marche très bien. Donc, une fois de plus, quand je clique dessus, il va passer à différents endroits, ce qui est très bien. Revenons à Design. Et ce que je vais faire ensuite est en fait appuyer sur Enregistrer. Donc, contrôlez S ou commande S sur un Mac. Ou encore une fois, si vous utilisez un document Cloud va économiser sur médicalement. Ce que je vais faire ensuite, c'est que je vais travailler sur ces témoignages. Donc, à l'intérieur de la section des témoignages, ce que nous allons avoir est fondamentalement quatre images différentes. Alors on va travailler sur eux ensuite. Donc, je peux cliquer ici, et nous avons déjà créé ce premier. On devrait peut-être les dupliquer. Alors appuyez sur le contrôle D, le contrôle D, le contrôle D. vient de voir que nous avons pour et peut-être que nous pouvons même les nommer. Donc la carte de témoignage numéro un, il y a la carte mono, numéro 2, le chariot de témoignage et le numéro trois et enfin le témoignage de carbone numéro 4. Donc, je vais cliquer sur le premier, localiser dans la première image et le témoignage de troupeau laitier imagé un. Je vais le cacher. Cliquez sur le second est une image individuelle numéro deux. Donc on va faire des hommes, des femmes, des hommes, des femmes. Alors faisons une image numéro trois. Et encore une fois, pour D est que vous pouvez utiliser différents plugins, mais j'ai trouvé beaucoup plus simple de m'organiser comme ça. Parce que depuis des années de travail, j'ai accumulé toutes ces images différentes que je peux ensuite utiliser dans mon design. Donc encore une fois, parce que nous avons ce premier, je vais passer à travers ça et je vais changer le nom d'eux et je vais revenir dans une seconde. Et maintenant que j'ai fait ça, je peux te montrer très vite. Donc c'est le numéro un, le numéro deux, le numéro trois, le numéro quatre. Maintenant, le témoignage de Derek est resté le même, mais vous pouvez si vous voulez changer ces témoignages et je vous encourage vraiment à le faire parce que c'est beaucoup plus réel quand vous avez tous ces témoignages différents plutôt qu'un seul comme je le fais dans ce cas. Donc avant d'aller plus loin, je veux juste localiser mes flèches, flèche droite, aller au prototype, le réparer ici, tout de suite. Donc hover auto animation, je vais aller au vol stationnaire est sorti. C' est ça. Donc c'est maintenant réparé. Et passons maintenant et travaillons avec ces lettres pour commencer. Donc, ce que je vais faire en fait, c'est qu'on va passer d'un à l'autre. Donc nous allons avoir ce 04 va rester mis. Ça, je vais rester réparé. C' est juste que ça va changer, alors nous avons besoin de quatre copies. Alors allons 1234 pour ça, un de plus pour ça, et un de plus pour 0 pour, tout va avoir beaucoup plus de sens dans une seconde. Donc je vais les cacher en bas. Donc 1234, donc 0, 1, je vais cacher ça et ensuite le cacher. Et si je les cache tous, vous verrez ce que je fais. Donc 2, 0, 2, puis cachez-le. J' ai eu 01. Je vais double-cliquer ici, 0, 3. J' ai ajouté 0. Pour ça. Je vais le cacher. Pour celui-là, nous avons besoin d'une ligne de justice. Comme ça. Je peux le cacher. Et enfin 0, 4, et je peux le cacher aussi. Maintenant, je vais bouger mon 04. Je vais déplacer ma ligne vers quelque chose comme, voyons, je pense que 10 fonctionne très bien comme ça. Alors je vais apporter tout ça. Une fois de plus, assurez-vous que tous sont alignés à gauche. Donc, ça va être beaucoup plus simple et positionné dans ma liste et assurez-vous qu'ils sont 10 séparés, comme ils sont juste ici. Donc ce qu'on va faire, c'est qu'on va faire un masque évidemment. Alors faisons un rectangle comme ça. Et je vais l'appeler mosquée. Et ce que vous pouvez faire parce que juste le barrage change. Vous n'avez pas besoin de le positionner jusqu'ici. Vous pouvez simplement le positionner ici, par exemple. Mais ce que j'aime vraiment, c'est d'inclure tous mes textes pour que tout reste en une ligne, fondamentalement. Vous pouvez abaisser l'obésité et le sirop, voir où il est. Il peut donc être juste un peu plus précis. Vous pouvez masquer Phil et la bordure et vous pouvez sélectionner tout Shift Control M ou Shift Command M sur un Mac. Et nous pouvons l'appeler masque de texte, par exemple. Maintenant, à l'intérieur de notre premier état et de notre état par défaut, nous allons avoir juste le numéro un pour que nous puissions les déplacer hors du chemin. Peut les positionner ici, puis 10 pixels vers le bas, par exemple. Donc 0, 1 sur 4. Et je ne pense pas que ça marche vraiment bien. Vérifions ça. C' est 19 ans pour une raison quelconque à cause des quatre. Oui. Laisse-le là. Je pense que c'est bon. Donc, ce que nous allons faire ensuite, c' est la réalité virtuelle va les regrouper. Alors dégroupez-les tous, Contrôle G, et je vais l'appeler ainsi le Manion, comme ça. Maintenant, ce que nous allons faire est simplement d'utiliser le défilement horizontal et étendu juste à ici, juste pour que nous puissions voir cette ombre d'arrière-plan ici. Ou il peut même en faire un peu plus et voir où nous sommes ici. Donc juste jusqu'au bord de votre image. Et puis je peux le renommer en témoignage. Donc c'est la même idée. Je vais les utiliser, les déplacer un peu dehors comme ça. Et voyons, nous pouvons peut-être se positionner pour être 40 par exemple. Sont 60. Je pense que c'est bien. Maintenant, nous pouvons passer aux prochaines. Et je peux m'assurer que 60 ans bien, assurer que c'est dehors et m'assurer que c'est aussi 60 ans, comme ce troupeau laitier. Maintenant que c'est fini ou vous pouvez simplement les déplacer comme le font les lettres. C' est vraiment à vous de décider comment vous voulez faire ça. Donc, ce que nous voulons faire ensuite, c'est appuyer sur Control K sur nos témoignages. Et nous pouvons, par exemple, donner ce témoignage d'Etat à. Et ce que nous pouvons faire, c'est de sauter dans nos témoignages et nous allons passer à tous. Donc je vais les sélectionner comme ça. Et là, nous l'avons. Donc juste pour qu'ils se soient alignés sur notre grille plutôt bien. Et à l'intérieur de notre masque de texte, ce que nous voulons faire est de sélectionner le numéro un et le numéro 2. Tout d'abord, la position numéro 2 à sa place comme la dette. Plus. Numéro un hors du chemin, mon père, par exemple, crée un nouveau témoignage. Cette fois, ce sera le numéro trois. Numéro trois, comme ça. À l'intérieur de nos témoignages, vous pouvez simplement saisir votre dossier. On peut les positionner ici. Et juste pour être un peu plus précis, je peux emménager comme ça. Et enfin, allez à votre masque de texte et faites la même chose. Alors déplacez le numéro trois en place jusqu'à ce qu'il se rencontre juste là. Et puis plus numéro deux hors du chemin jusqu'à ce qu'il rencontre le numéro un. Donc vous pouvez voir où ça va. C' est vraiment tout à fait simple. Enfin, je vais utiliser ce texte et créer un état de plus, qui sera final. Donc, numéro de témoignage 4, sautez C'est soit à des témoignages, utilisez votre dossier et cliquez ici et positionnez simplement ceci pour aligner parfaitement avec votre grille. Et puis masque de texte utilisateur et aller au numéro 4. Et il semble le positionner en place avec ceux-ci. Assurez-vous encore une fois que vous êtes aligné correctement. Déplacez ça hors du chemin comme ça. Et la dernière chose que je veux vérifier, c'est le numéro deux. Voyez si je l'ai eu. Je ne l'ai pas fait. Comme vous pouvez le voir, juste ici. Donc je vais le déplacer juste un tiret comme ça. Donc nous l'avons. Nous allons maintenant passer au prototypage dense, donc des témoignages. Je vais passer au prototype et nous allons utiliser et flèches évidemment. Donc des flèches, non ? Point de tabulation. Nous allons utiliser l'onglet auto animate, choisissez le numéro de témoignage deux est 0.6 seconde. Donc une fois de plus, ce même timing d'animation. Allons avec témoignage aux héros. Le point de l'onglet droit. Témoignage trois à ce moment-là, nous allons avoir un témoignage, qui est la valeur par défaut, qui est numéro un. Allons au numéro 3 et utilisons la même chose. Donc les flèches à gauche ce point va nous conduire au numéro deux. Droit ? À ce moment-là, il va nous amener au numéro quatre. Et enfin à l'intérieur d'un numéro quatre, nous allons juste avoir une flèche gauche et un pas à gauche, ce qui va nous conduire au numéro trois, troupeau laitier. Revenons à l'état par défaut et vérifions rapidement et voyons ce que nous avons ici. Donc si on descend jusqu'au bout, où sont nos témoignages ici ? Ils sont gentils et grands. Donc ce qu'on va faire, c'est planer ici. Comme vous pouvez le voir, les flèches bascule. Enfin, cliquez sur. Ça va changer. Les chiffres vont très bien changer. Cliquez ici et juste ici. Donc, tout fonctionne comme il se doit au lieu de r. flèche droite une fois de plus. Donc je ne sais vraiment pas pourquoi c'est si têtu. Il faudrait donc aller très vite. Témoignage. Donc témoignage à je vais trouver la flèche droite, cliquez dessus et utiliser mon hover. Allez dans les états d'horreur, aller à l'aise et 0,3 secondes. Alors allez témoignage trois. Encore une fois, je ne sais vraiment pas pourquoi il me fait ça, mais comme vous pouvez le voir, parfois vous allez avoir ces bugs d'Adobe XD têtu. Parce que je ne comprends pas, je ne comprends pas. Je l'ai corrigé dans l'état par défaut. Elle devrait se propager à tous ces autres États. Mais comme vous pouvez le voir, ce n'est toujours pas le cas. Pour une raison inconnue. Là, nous l'avons. Donc état par défaut et à peine aller. Donc, fondamentalement, il a des dettes. Et je vais mettre la vidéo en pause ici pour ne pas vous ennuyer et vous accabler avec trop d'informations. La dernière étape que nous allons avoir, c'est ici. Donc, je te vois dans la prochaine vidéo où quand on finira par finir cette section, et je peux en fait passer dans cette vidéo. Mais comme je l'ai dit, je ne veux pas trop vous submerger parce que ces vidéos sont aussi longues qu'elles le sont. Parce que, comme vous pouvez le voir, il y a beaucoup trop d'informations à inclure dans une seule vidéo. Donc je te verrai dans la prochaine quand on finira finir cette page et la section du bureau couvert. 32. Créer un design 7: Enfin, continuons et finissons cette page en travaillant sur cette section. Et je vais simplement le tourner parce que vous avez vu que nous l'avons comme un composant. Peut-être que nous pouvons l'éditer dans l'état par défaut, osez, mais ce que je vais faire est de cliquer avec le bouton droit de la souris sur Ungroup components, puis Control G. Et enfin, je vais l'appeler, Voyons voir. Je ne sais pas pourquoi si c'est fait ça. Alors voyons. Je vais le mettre en groupe pour qu'ils ne s'envolent pas comme ils l'ont fait. Et je vais sélectionner ce texte ou un clic droit OK sur le composant de groupe maintenant et maintenant l'état où ils devraient être, je vais appuyer sur la touche Contrôle pour créer ces questions courantes. Et je vais créer un nouvel état, qui s'appelle, est mon voyage. Protégé comme ça. Et nous allons le faire évidemment pour tous. Donc, dans l'état par défaut, tous sont fermés. Dans le premier état, le premier va être ouvert et tous vont se déplacer vers le bas. Alors, comment peux-tu faire ça ? Vous pouvez le faire avec la pile si vous voulez, mais je ne vais pas, je vais juste pas trop compliqué. Je vais m'occuper de ça comme ça. Donc, d'abord, parce que c'est ouvert, on va passer à ça ici. Ensuite, nous allons ramener ce texte. Donc à 0. Nous allons déplacer le séparateur vers le bas comme ça jusqu'au bord de nos textes, comme ça. Maj 1, 2, 3, 4, donc il fait 40 pixels vers le bas. Mon père. Et puis nous allons simplement sélectionner tous ces autres comme ça et déplacer 40 aussi. Soit cela, soit nous pouvons même aller plus loin, par exemple, alors peut-être 80 juste pour nous donner un peu plus d'espace. Voyons donc 1234. Je pense que ça marche encore mieux parce que vous pouvez voir, cause de ces résultats, ça ne coupe pas trop loin d'ici, mais on peut peut-être même aller jusqu'à 60 ans. Et maintenant, c'est beaucoup plus proche d'ici. Donc, vous pouvez voir juste peut-être quelques pixels vers le bas. Donc, 40 et 60 sont les valeurs que nous allons réellement couvrir. Donc, ce que vous allez faire est d'aller à notre état par défaut. Cliquez ici, nouvel état. Et à partir de là, nous allons aller politique d'annulation parce que ce sera notre prochain. Trouvez la politique d'annulation et faites la même chose. Alors tournez ceci vers la gauche pour vous retirer. Donc comme ça, je vais ramener ça. Je vais utiliser mon séparateur et Julian va pousser tout ça comme ça juste pour nous donner un peu plus d'espace avec ça. Donc je vais utiliser ma ligne de séparation, ce 1234, et le ramener jusqu'à ce qu'il soit à 60 ans, comme ça. Et nous l'avons là. Donc passons à l'état par défaut une fois de plus. Maintenant, dans ce va être vos partenaires ou choisir vos partenaires. Je l'ai fait. Et pour les partenaires, pour nous, faisons sortir ce voyage personnalisé du chemin vers le bas afin que nous ayons un peu d'espace pour travailler avec l'icône de fermeture. Donc je vais simplement tenir ma touche Maj comme ça. Et je vais ramener ça. Je dat. Et voyons voir. Je peux déplacer mon séparateur jusqu'au 1234. Et je vais ramener ça à 60, comme ça. Et enfin, revenons à l'état par défaut et créons un nouvel état une fois de plus. Et cela va être un but personnalisé et faire la même chose pour cela. Donc voyages personnalisés, je vais faire pivoter cette icône pour lire des villes comme ça. Ramène son dos et bouge mon séparateur et descend 40, mon père. Et c'est fondamentalement tout. Donc la seule chose qu'il nous reste maintenant à faire est évidemment de le prototyper. Donc ce que je vais faire en premier, c'est aller au prototype. Et dans mon état par défaut, ce que je veux faire est de cet état par défaut, je veux cliquer sur chacun d'eux pour aller là où je veux aller. Donc, ce que cela signifie, c'est quand vous cliquez ici. Et par exemple, nous pouvons même aller un peu plus loin, mais je pense que c'est bien. Cliquez ici. Donc, je vais utiliser l'animation automatique étape, choisir l'état, donc mon voyage est-il protégé ? On va aller doucement et sortir et 0,6. Donc, il va se souvenir de ces paramètres. Cliquez sur celui-ci, faites la même chose, mais cette politique d'annulation, celle-ci est pour les partenaires vu allons-y juste ici. Et enfin, des voyages personnalisés. Je vais y aller. Maintenant. Je vais y aller comme ça. Donc, avec celui-ci, mon voyage est-il protégé, je vais l'utiliser pour revenir à l'état par défaut parce que je veux qu'il soit fermé. La politique d'annulation va évidemment nous y emmener. Donc, la politique d'annulation, cela va nous emmener chez les partenaires. Je suis mort. Et enfin, cela va nous emmener à des voyages personnalisés. Allons à la suivante. Donc politique d'annulation, encore une fois, celui-ci va nous emmener à est mapolitique d'annulation protégéevoyage politique d'annulation protégée va nous conduire à l'état par défaut parce que nous voulons qu'il soit fermé. Partners va nous emmener chez les partenaires juniors et enfin, des voyages personnalisés. Ça va nous emmener à des voyages de clients. Et enfin, traitons avec choisir vos partenaires. Alors voici mon voyage. Détecté. Politique d'annulation que les partenaires, nous allons passer à l'état par défaut. Encore une fois, nous voulions fermer. Et celui-ci va aller à Voyages personnalisés. Et maintenant, enfin, traitons du dernier état. Donc, enfin, ce sera, est Madrid protégé politique d'annulation. Et au fait, je les sélectionne d'ici parce que vous pouvez voir qu'ils se chevauchent. Donc je ne veux pas que ça ait des problèmes parce que c'est beaucoup plus facile pour moi comme ça. Choisissez vos partenaires est celui-ci. Celui-ci est la politique d'annulation et vous pouvez cliquer sur eux et voir ici ce que vous avez sélectionné. Et puis enfin des voyages personnalisés. Nous voulons qu'il passe à l'état par défaut parce que nous voulions fermer. Et maintenant, allons de l'avant et voyons ce que nous avons créé. Pour que nous puissions retourner au Design. Cliquez ici, puis sur l'état par défaut. Et encore une fois, la raison pour laquelle je les ai mis dans une pile comme celle-ci, ces deux sections sont plus tard, je peux cliquer ici et vous pouvez voir qu'ils viennent ici et ils vont garder toutes ces animations incluses à l'intérieur. Alors revenons aux temps et passons enfin Précédent. Voyez ce que nous avons. Mon père, allons tout le chemin vers le bas et localisons notre Q&R. Donc, une fois que vous cliquez juste là, vous pouvez voir qu'il s'ouvre et cela tourne d'un plus à fermer vraiment bien. Ça fait la même chose. Et vous pouvez voir quelques problèmes ici en fonction de l'endroit où vous cliquez comme ça. Donc, si je clique ici, vous pouvez voir qu'il ouvre celui-ci. Donc peut-être qu'on ne devrait pas avoir besoin d'utiliser des masques ici. Mais lorsque vous cliquez juste là, par exemple, il s'ouvre dans celui-ci. Alors assurez-vous de le dire à vos clients. Et peut-être que vous pouvez même cliquer sur ces icônes. Mais maintenant parce que le découvre. Donc, vous pouvez voir quelques problèmes ici, mais vous pouvez dire à vos clients et juste de faire attention à cela, et évidemment c'est juste pour une commodité osée. Tous ces prototypes, et bien sûr pour la commodité des développeurs, juste pour qu'ils sachent ce que vous voulez de cette conception ? Donc, une fois de plus, vous pouvez leur dire , par exemple, si vous cliquez ici et qu'il ouvre celui-ci, c'est parce que ce texte se chevauche. Alors assurez-vous simplement que vous cliquez, par exemple, quelque part ici. Il ouvrira alors cette seule et même histoire pour celle-ci. Donc enfin, c'est tout pour cette page, c'est tout pour cette vidéo. Une dernière chose que je veux faire est de les utiliser tous. Alors appuyez sur Control G. Je vais les mettre en groupe, appelez ça la page d'accueil comme ça. Et je vais utiliser la pile. Et la raison pour laquelle j'utilise la pile, vous pouvez voir qu'elle reconnaît 150 est plus tard lorsque vous commencez avec la conception réactive, il est beaucoup plus simple d'utiliser des piles, surtout si vous voulez réduire cet espacement entre vos éléments, entre vos sections. Surtout sur, par exemple, conception mobile où vous n'avez pas vraiment besoin de 150 pixels entre toutes ces petites sections. Vous pouvez supprimer avec, par exemple, 80 ou 60 ou centralement, qu'il est beaucoup plus simple de réduire l'espacement entre eux lorsque vous sélectionnez simplement, par exemple, une section de votre page d'accueil, maintenez votre touche Maj enfoncée et il suffit de les réduire comme ça. Vous pouvez voir comment ça marche. Et bien sûr, Stack est génial parce que si vous voulez, par exemple, mettre ceci ici, vous pouvez simplement le faire et montrer à un client s'il veut des changements rapides. Comme je l'ai dit, c'est tout pour cette vidéo. Je vous verrai dans la prochaine quand nous allons commencer avec la page de destination. 33. Créer un design 8: Passons maintenant à la plage de destination. Et j'espère que ce sera beaucoup plus simple que celui-ci. Donc ce que je vais faire est de tenir ma touche alt et de la faire glisser ici et voir ce que nous avons ici. Je pense que c'était 70 entre ces deux. Oui, c'est le cas. Donc je tiens ma clé Alt et vous pouvez voir ici, ça dit 70. Donc je vais le faire glisser jusqu'à 70 ici. Appelez ça destination InDesign. Comme on l'a fait ici. Et ce que je vais faire est de cliquer ici, utilisez ma section supérieure, alors cliquez dessus. Et voyons voir. Oui, copions toute la section supérieure. Sautons ici. Et je peux cliquer à l'intérieur et je peux, par exemple, appuyer sur Contrôle V. Pour que je puisse baser toute ma section supérieure dans. Ce que je vais faire ensuite est enlevé mon fond maintenant parce que je n'en ai plus besoin. Mon image de héros parce que je n'en ai pas besoin. Je vais enlever mon ancien NAV primaire comme ça. Et ce que je vais faire, c'est utiliser mon image de héros et je vais la dupliquer. Je vais l'appeler superposition de couleur de l'image de héros. Je ne le fais pas. Et parce que ça va être Paris, je vais appeler cette image de héros de Barris. Ensuite, je vais cacher ma superposition de couleur, sauter dans mon dossier d'images, le faire glisser jusqu'ici, comme ça. Ramenez ma superposition de couleur. Et voyons, je peux utiliser les mêmes paramètres. Pour que je puisse y aller. Presque noir. Et voyons, 70% comme papa. Enfin, je vais sauter à l'intérieur de mon texte et le changer blanc parce que je pense qu'il se distingue plus comme une dette. Et là, nous l'avons à cette section supérieure est fait essentiellement la navigation fonctionne exactement la même chose comme ici. Mais ici, nous avons l'image de la justice. Donc, vous pouvez juste imaginer que les gens, par exemple, planent juste ici, puis cliquent et viennent ensuite cette page pour explorer Paris un peu plus. Pour que nous puissions avancer vers le bas. Et par exemple, je peux entrer ici, sélectionner tous ces éléments ici à supprimer, puis aller jusqu'ici. Voyons ce que nous pouvons choisir. Par exemple, à partir d'ici. Donc à partir d'ici en bas Contrôle C, je peux venir ici contrôler V, et tout simplement les déplacer vers le bas avec un décalage comme ça. Et c'est fondamentalement tout. Donc une dernière chose que nous devons changer est cette section avec l'hôtel et aussi avec celui-ci. Donc, nous allons d'abord traiter de ces filtres. Donc, ce que nous pouvons faire avec les filtres est fondamentalement le même que nous l'avons fait à la page précédente. Donc, nous pouvons fondamentalement les utiliser comme un composant et ensuite nous pouvons les étendre vers le bas. Donc, nous avons le prix baissé BG, nous pouvons simplement l'étendre jusqu'au bas, comme ça. Et puis on pourra avoir toutes ces informations. Et donc ce que je vais faire pour gagner un peu de temps, c'est que je vais utiliser mon texte. Et je vais cliquer ici, Contrôle V, je vais me positionner ici. Ce n'est donc que mes textes originaux que j'ai utilisés. Ou encore mieux, faisons ça encore une fois. Donc, il peut venir juste ici en haut, section supérieure. Je peux ouvrir le nav en bas. Je peux utiliser mes destinations. Je peux aller ici, utiliser mes villes, Contrôle C. Et je peux fermer toutes ces choses. Je peux aller juste ici juste pour vous montrer comment vous pouvez utiliser tous ces différents éléments. qu'il puisse aller dans ma liste déroulante, appuyer sur Contrôle V. Je peux le positionner juste ici. Assurez-vous que je suis, par exemple 20 vers le bas. Alors ce que je peux faire est de sauter à l'intérieur de mon diviseur avec un décalage, par exemple, plus il quelque part par ici. Et parce que nous sommes dans la grille de répétition, cela devrait changer toutes ces choses vers le bas. Donc, laissez-moi rapidement cacher cette section pour que vous puissiez réellement la voir. Comme vous pouvez le voir, il a propagé le changement. Donc, chaque fois que tu changeras celui-ci, ça va changer à travers tous comme ça. Et ce que je vais faire, c'est maintenant utiliser ces changements. Donc, par exemple, double-cliquez et je vais taper quelque chose comme signe dollar. J' ai besoin de changer et d'enregistrer parce que, puis revenir parce qu'Adobe XD a encore une fois certains de ces problèmes. Mais comme vous pouvez le voir, je ne peux même pas taper. Laisse-moi sauvegarder mon document et revenir. Et maintenant qu'il s'est réparé une fois que je l' ai changé, je vais changer ça pour des prix comme ça. Et voyons voir. Je peux, par exemple, changer dans ce premier signe dollar 100 à 500. Et ce prochain peut être de 500 à 100. Je ne le fais pas, ou on peut même inclure notre panneau juste ici. Donc, pour les deux, par exemple. Et cela peut être de 100 à 1500. Et celui-ci peut être de 1500 à 2000. Et enfin, nous pouvons écrire sur ce dernier, par exemple, plus de deux clés de 2000 hiérarchie veulent. Et fondamentalement, nous pouvons simplement fermer notre grille jusqu'à ce point. Donc, je peux simplement le faire glisser jusqu'ici. Leurs prix d'habitude, c'est bon. Voyons voir, où est notre liste déroulante là il est. Et je peux tout simplement faire la même chose. Alors appuyez sur Control D. Je peux appeler cette mosquée. Mais avant de devoir obtenir et faire toutes ces choses, ce que je peux faire est de mettre la vidéo en pause ici et faire la même chose comme je l'ai fait auparavant et de les faire tous. Et puis nous allons revenir et les rencontrer et finir dans cette section. Bon, maintenant que je les ai tous en place, je veux juste vous montrer rapidement une meilleure note. Parce qu'à l'intérieur de l'évaluation, au lieu de tout cela, ce que je voulais faire est d'inclure les étoiles réelles. Donc, je vais cliquer ici. Je vais dégrouper la grille et je vais les sélectionner toutes sauf la première. Et une note de qualité comme ça. Ensuite, je vais faire un zoom avant et je vais localiser mon icône d'étoile. Je vais cliquer ici. Cliquez sur l'étoile, faites-la glisser jusqu'ici. Retournez à mon panneau Calques et positionnez-le là où le haut du texte est comme ça. Ensuite, je vais supprimer le texte, assurez-vous que c'est 40. En fait, positionnons ça comme 20 parce qu'on n'a pas besoin qu'il soit 40. Donc 20. Et ce que je vais faire est d'utiliser notre grille réactive, désolé, répétez ici pour en créer cinq comme ça. Assurez-vous de couper tout le chemin jusqu'à ici. Et puis à cause de l'espacement, réduisons l'espacement à quelque chose comme cinq. Je pense que ça va être assez bon comme ça. Et voyons, on peut appeler ça une cote comme ça. Et sachez que nous avons notre grille de répétition. Ce que nous pouvons faire est de les regrouper tous les deux et de créer une grille de répétition à partir d'eux. On peut donc appeler ça aussi. Et ensuite on peut appeler les premières étoiles. Comme ça. Nous pouvons même dégrouper ces étoiles, faire ce que vous voulez avec elles comme vous voulez. Et pour cette seconde, ce que nous voulons, c'est en avoir cinq. Donc 3, 4, et 5, et fermez-le juste en bas juste ici. Donc, évidemment, nous voulons passer du numéro un au numéro cinq. Nous allons double-cliquer ici. S' assure que tous sont gris. Mais comme vous pouvez le voir, nous avons encore quelques problèmes ici. Je ne sais pas pourquoi XD me fait ça. Donc je vais me dégrouper et celui-là juste pour les avoir dedans, mais je vais garder celui-là. Et maintenant, voyons ce que nous pouvons. On peut faire une grille de répétition ici. Alors 12345, et fermons ça en bas. Donc, une fois de plus, nous avons juste celui-là. Et une fois que vous sautez, vous avez toutes ces étoiles. Donc, ce que nous pouvons faire ensuite, c'est essayer de cette façon. Voyons voir, ça devrait être deux. Voyons deux à deux. Voyez ça. Un. C' est toujours un lot. Donc, nous allons en fait les dissocier, dégrouper la grille. Donc, ce que nous avons ici ici, ce sont cinq groupes différents. Donc maintenant, nous pouvons facilement sauter dans celui-ci. Donc par défaut, nous allons aller par défaut, par défaut. Donc, parfois, comme vous l'avez vu, à droite, dans cet exemple, vous pouvez les utiliser comme sorte de point de départ et ensuite vous pouvez les dissocier plus tard et sauter à l'intérieur de tous. Mais encore une fois, ne vous inquiétez pas, c'est juste pour vos clients et développeurs de comprendre ce que vous faites. Fondamentalement plus tard, vous allez juste en exporter un. Et fondamentalement, les développeurs peuvent faire leur travail et les réorganiser et les positionner plus tard. Et vous pouvez même leur donner des noms en séparant un. Cela peut être ou manger aussi, et cela peut être note 3, cela peut être évalué pour. Enfin, disque et B mangent. Par. Maintenant. Allons de l'avant et animons tous. Donc ce que je vais faire, c'est pour chacun d'eux, comme vous l'avez vu dans le prix, nous allons copier ce texte, copier la mosquée. Donc, sautez à l'intérieur de la durée, déroulant BG, copiez-le en haut, renommez-le pour masquer, et faites de même pour les activités. Mosquée, positionnez-le vers le haut. Excursion vers la même position de la mosquée vers le haut. Enfin, note Control D et déplacez-le vers le haut à droite là. Donc ce que je vais faire est de masquer sur eux ou inutile ou Shift Control M. Je vais appeler ce premier prix. Contrôle de changement de vitesse M. Pour ceux-là, je vais les appeler durée. Puis les activités, Shift Control M. Je vais les appeler activités. Sélectionnez ce texte Shift Control M excursions. Et enfin, nous sommes restés avec sont manger de la neige. Contrôle de changement de vitesse. Sélectionnez la cote, les produits laitiers sont. Alors maintenant, allons de l'avant et créons des composants pour chacun d'eux. Donc elle contrôlait la clé pour la discipline. Ou comme je l'ai dit, vous pouvez simplement cliquer sur les affichages ici si c'est plus facile, mais pour moi, c'est juste une mémoire musculaire. Donc, la clé de contrôle pour chaque profondeur. Donc, ce que vous allez faire pour chacun d'eux est de créer l'état cliqué. Donc je vais au contrôle K pour chacun d'eux. Je vais créer un état cliqué pour DS1, excursion, cliqué et évaluation enfin, comme ça. Maintenant, parce que nous avons cette ombre portée, ce que je veux faire est à l'intérieur de l'état par défaut pour chacun d'eux. Alors revenons en arrière. En fait, je devrais le faire d'abord, mais parfois quand je parle, mon cerveau est plus lent que ma quantité. Donc, fondamentalement, nous sommes à 2, 2, 4, alors peut-être, peut-être, 20, 30 à 35. Voyons où nous sommes. Je pense que 234, on peut y aller avec 240. Je pense que c'est assez bon pour le masque lui-même. Faisons la même chose pour celle-là. Alors localisez la mosquée 240 en largeur juste pour que nous puissions voir cette ombre portée plus tard. 240. Faites-le est de même pour l'excursion. Donc et vous pouvez voir pourquoi je mets ces vidéos en pause juste pour ne pas vous ennuyer avec trop de détails. 240, et c'est essentiellement tout pour l'instant. Maintenant, allons entrer un état de clicker pour chacun d'eux afin que nous puissions les étendre vers le bas. Cliqué. Je l'ai fait. Donc, en entrant dans le prix et simplement, nous allons d'abord élargir notre liste déroulante et voir où elle est dans ce cas. Donc à quelque chose comme ça qui est 450, appelons-le. Et nous pouvons faire la même chose pour le masque. Si étendu, comme oser par exemple, je pense que c'est bien. Donc pour 70. Oui. Et allons de l'avant et faisons de même pour la durée. Voyons voir, nous pouvons faire la même chose. Donc, pour la liste déroulante, nous pouvons utiliser 40 à 50 et pour le masque nous pouvons utiliser pour 70. Maintenant, allons de l'avant et faisons de même pour les activités. Pour les activités, Voyons 450 ou pour masquer pour 17. Trouve ça. Et passons aux excursions. Parce que c'est beaucoup plus petit. Comme vous pouvez le voir, nous n'avons que deux d'entre eux. On peut le regarder si grossièrement par ici. Et puis avec la mosquée à peu près ici par exemple. Et la même chose pour le classement parce que c'est beaucoup plus petit. Nous pouvons utiliser un menu déroulant et étendu à peu près ici. Et puis faire la même chose pour les mosquées ou étendu à peu près ici. Maintenant que vous avez fait cela, ce que je vais faire est de les utiliser tous en hiver, changer la couleur de l'icône et du texte lui-même. Donc, ce que je vais faire est de sauter à l'intérieur et utiliser l'icône du dollar et un prix et le changer en gris foncé. Mon père, pour une raison quelconque, ne va pas changer. Alors je vais sauver et revenir à toi une fois de plus. Bon, donc maintenant c'est réparé et je peux les changer. Donc ce que je ferais, parce qu'il y a une mosquée dans le chemin, je voudrais simplement sélectionner l'icône et le texte et revenir ici et le changer comme papa, c'est un peu plus de temps, mais que pouvez-vous faire ? Adobe XD a parfois ses moyens. Donc je vais le changer là-bas. Et fondamentalement, pourquoi je fais cela est juste pour indiquer que cela est sélectionné. Que peut aussi, que cela peut aussi donner à votre client ? Idée facile s'ils veulent faire la même chose sur la page d'accueil. Et il vous donne aussi, en tant que concepteur, une idée de ce que vous pouvez faire pour explorer les éléments sélectionnés. Donc, maintenant que nous avons tous ces filtres en place, nous pouvons passer à l'état par défaut pour tous d'entre eux. Maintenant que nous avons terminé toutes nos animations et désintox, appliquer les filtres bouton, état par défaut, état Horace. Donc, nous allons le laisser par défaut. Allons au prototype. Et donc quand ils cliquent là, appuyez sur, nous utilisons l'état ennemi automatique est cliqué. Faciliter la sortie de 0,6 seconde. Nous pouvons le changer pour cliquer, cliquez ici et revenir à la valeur par défaut, état. Durée, même chose. Alors cliquez ici. Cliquez sur État, passez à cliqué, cliquez ici et revenez aux activités d'état par défaut. Donc, une fois de plus, ne vous inquiétez pas pour la région. Il est important d'inclure. Il utilise également Ne le manquez pas. Donc, le point de taraudage est assez grand. Retournez à cliquer et cliquez ici et accédez à l'état par défaut. Et enfin, pour la note reviendrait à la valeur par défaut. Pour l'évaluation, cliquez sur, il va vous emmener à l'animation automatique. Il va vous amener à cliquer, passer au clic cliqué ici. Il va vous amener à la valeur par défaut, l'état, le revenir en arrière, et nous allons rapidement prévisualiser cette page. Donc une fois de plus, nous avons ce joli bouton juste ici. Et si je vous emmène ici, vous pouvez voir que la navigation fonctionne très bien. Tout cela fonctionne comme il se doit. Cliquez ici, comme vous pouvez le voir, il se développe bien. Il fonctionne comme il se doit. Pour tous. C' était génial et le vol stationnaire fonctionne ici. Très bien. Alors concentrons-nous rapidement sur ces cartes d'hôtel et je vais essayer les parcourir aussi vite que possible. Donc, fondamentalement, ce que nous voulons avec eux, c'est que nous voulons qu'ils fassent la même chose que nous l'avons fait auparavant. Nous voulons donc qu'ils montrent toutes ces choses que toutes ces autres cartes montraient sur les pages précédentes. Donc, fondamentalement, nous voulons en créer un, créer ces éléments et Dan fondamentalement ajuster et descendre comme ça. Donc je vais montrer la première carte. Je vais les enlever. Mais laissez-moi voir, c'est 50 pixels ici pour une raison quelconque. Voyons voir, peut-être que nous pouvons inclure 60 plus tard. Alors supprimez-le. Donc nous avons du courant adulte et laissez-moi entrer et je vais utiliser l'image numéro 1 de l'hôtel. Donc ça va conduire l'hôtel orange un. Nous avons l'info qui est bonne et diviseur. Donc tout est là où il devrait être. Je veux juste les déplacer un peu vers le bas. Je ne le vois vraiment pas ici. Alors peut-être ici, alors positionnez ceci ici. Et puis voyons, nous sommes où dix pixels, 20 pixels par exemple. Et déplacez simplement la carte de l'hôtel ici. Quand c'est le cas. Voyons donc, 10, 12, 20. Laissons-le ici pour l'instant. Je pense que c'est bon. Pour moi encore mieux, nous pouvons simplement déplacer ces 10 pixels vers le haut et maintenant nous avons beaucoup plus de marge de respiration. Et enfin, je vais pousser cette image vers le bas pour qu'elle se rencontre. Maintenant que nous avons notre première section terminée, je vais appuyer sur la touche Contrôle créée en tant que composant. On va avoir un état de vol stationnaire. Mon père à l'intérieur des planques, la même chose qu'avant. Donc, je vais augmenter cela pour supprimer. Je vais changer de flèche, localiser mon masque. Ici, c'est. Et je vais simplement me positionner en deux ici. Donc ils sont blessés quand revenir à notre état par défaut et enfin faire la même chose comme avant. Alors maintenez votre touche Alt, positionnez-la juste ici, et voyons, 60 pixels. Je pense que c'est bon. Donc pour la carte numéro un, et voici la carte d'hôtel numéro 2. Ça va être la carte d'hôtel numéro trois. Mon père. Et enfin, ce sera la carte d'hôtel numéro 4. Et je vais travailler sur cette seconde pour te montrer à quoi ça va ressembler. Permettez-moi donc de copier rapidement quelques éléments. Face à un Min. Je vais faire la même chose pour ce texte et allons rapidement le parcourir. Je vais le ramener ici. Et ramenez cela ici, par exemple, je pense que nous allons voir, peut-être que je peux même étendre mes textes ici pour ne pas distraire mon séparateur. Permettez-moi de copier le nouveau et la destination, qui est ici, parce que c'est dans une pile, ça va très bien bouger. Enfin, pour le classement, nous allons lui donner quatre étoiles cette fois. Je l'ai fait. Au lieu de 14 jours, nous allons avoir 12 jours, par exemple, mon père. Et au lieu de 1250, nous allons avoir, voyons, 960 comme le doute. Encore une fois, les images sont prises à partir d'éléments Envato sur lesquels renommer cela en outil d'image d' hôtel et sélectionnez tout sauf pour la flèche. Hit Control C. Allez à mon horreur, état, ouvrez et contrôlez V. Et je vais supprimer tout ça une fois de plus, sauf pour l'adulte. Alors chéri, comment vous pouvez voir à quel point le disque est facile et simple. Laissez-moi mettre en pause la vidéo et effectivement nominer est allé pour mettre la vidéo en pause. Finissons-les rapidement pour que je puisse finir cette vidéo. C' est donc lié à l'image numéro trois de l'hôtel. Cela va être coupé l'image numéro quatre. Et voyons voir. Cela peut également avoir des étoiles Forrest par exemple. Voyons voir, notant quatre étoiles. Cliquez sur Copier. Ne vous trouvez pas. Comme ça. Et ce sont les griffes qui s'aèrent. Peut enfin, nous allons rapidement copier nos descriptions. Alors voyons. Je n'ai pas copié le bon. Laiterie QUI ? Terminus lion, celui-là. Et voyons une fois de plus, ajustons ce texte à, par exemple, quelque chose comme ça. Et voyons, peut-être que nous pouvons même l'étendre un peu plus loin jusqu'ici. Voyons, 30, je pense que c'est bon. Au lieu de 14 jours, ce qu'on peut faire, c'est les années 90 , par exemple, mon père ferme tout. Et pour le prix, nous avons 740. Donc, évidemment, il va du plus cher au sommet, au moins le moins cher ajoute la bouteille. Mais évidemment, ces hôtels en bas vont être bien pires que ceux qui sont au sommet en termes de qualité d'hébergement, qualité de service, etc. Donc c'est ce qui dit numéro trois. Je vais tout sélectionner en dehors de la flèche Contrôle C. Retournez à mon contrôle de vol stationnaire V. Je vais tout supprimer en dehors de la flèche et revenir à mon état par défaut. Et enfin, la carte d'hôtel numéro 4. Nous allons d'abord inclure l'image de permettre. Et traitons de l'information. Permettez-moi de copier l'emplacement très rapidement. Comme ça. Et pour celui-ci, par exemple, notation peut être, disons trois étoiles. Donc, 12. Donc là, nous l'avons, trois étoiles, c'est le nom, c'est l'adresse analytique. Enfin, copiez la description de l'hôtel et je devrais ajuster certaines de ces choses donc je ne le fais pas et je vais positionner ces deux là. Je vais voir si ça va. Je peux même le déplacer ici, et ça me donne un peu plus d'espace. 14 jours, c'est bien. 740 va être un prix. Et bien sûr, vous pouvez jouer avec ces icônes si vous voulez distiller, avoir, si un spectacle vous, cela a encore ces deux états. Donc, vous pouvez jouer avec eux si vous le voulez. Mais je pense que ça a l'air très bien. Donc, sélectionnez tout en dehors de l'icône. Désolé, le troupeau laitier Arrow, et c'est tout. L' élastine que je veux faire est de les augmenter. Donc double-cliquez et augmentez-les un peu comme ça. Et puis à l'intérieur du vol stationnaire et faites la même chose pour celui-ci. Donc, Maj Alt, clic gauche, je doute, et faire la même chose pour celui-ci dans le survol Shift Alt gauche, et enfin, état par défaut. Voyons si nous l'avons fait ici avec n'a pas fait. Parfois, on monte de derrière en face avec ces choses et on l'a là. La dernière chose que je veux faire est fondamentalement un changement dans ces questions d'espacement. Donc on peut passer de la position 400 tout ça vers le bas. Et je peux aller avec quelque chose comme 150. Mon père et tout simplement descendre. Où est mon pied de page ? Double-cliquez sur l'espace vide de mon plan de travail et développé à peu près ici. Là, nous l'avons. Une autre chose que nous pouvons faire est de les regrouper comme nous l'avons fait avec celui-ci. Appuyez sur Control G pour les mettre en groupe. Et on peut appeler cette destination de groupe comme ça. Et enfin, appuyez sur l'aperçu pour voir ce que nous avons. Donc, une fois de plus, si je planque juste ici, le menu et l'irrigation fonctionnent comme il se doit. Tout ça fonctionne bien. Cela fonctionne bien, donc nous pouvons cliquer sur ceux-ci et ils fonctionnent bien. Je doute que cela va allumer le vol stationnaire. Ça a l'air vraiment bien. L' espacement est bon. édition fonctionne comme il se doit. Derek habitudes dans ce fonctionne comme il se doit. Parce que nous avons juste copié et collé. Tout fonctionne comme il se doit. Donc tout a l'air beau et propre. Donc c'est tout pour cette vidéo. Dans la prochaine, nous allons passer à cette page et je vous y verrai. 34. Créer un design 9: Passons maintenant et créons l'écran d'offre sélectionné. Une fois de plus, je vais simplement utiliser mon ancienne clé. Assurez-vous de le coller ici, offre sélectionnée et quand changer cette lignée germinale comme ceci. Et tout d'abord, sélectionnons notre navigation. Donc, copions réellement la section supérieure entière. C' est beaucoup plus rapide. Faites glisser et déposez-le ici. vois essayer juste ici. Donc troupeau laitier. Et à l'intérieur de cette section des arrêts, je vais m'en débarrasser. Je vais me débarrasser de la section des héros. A l'intérieur d'une section supérieure, nous avons notre navigation principale. Donc, ce que vous allez faire à l'intérieur de ce NAV principal est fondamentalement changer toutes ces choses. Donc je vais sauter à l'intérieur d'ici, aller à l'intérieur de mon logo et le changer en noir. Et dans l'état principal et par défaut. Ce que je vais faire est d'utiliser tout le texte disposé et de le changer en couleur gris foncé. Je vais aussi aller à navigation secondaire et choisir sombre pour tous comme et qu'ils sont Herat. Donc maintenant encore lorsque vous cliquez, il va mettre à jour et changer en blanc. Mais quand vous êtes sur un fond blanc va être cette couleur. Alors voyons la section supérieure et est allé se débarrasser de l'ancien. Nous avons un carrousel, donc des images de carrousel. Et laissez-moi rapidement glisser et déposer mes images. Donc c'est le numéro un, le numéro deux, le numéro trois. Et une fois de plus semblait comme avec toutes ces vieilles pages, je les ai tous obtenus à partir d'éléments Envato. Donc l'image du carrousel. Nous avons aussi ces images. Donc, ce sont des pièces plus petites. Donc je n'ai pas le numéro 1. C' est le numéro deux. Et enfin, c'est la chambre numéro 3. Et fondamentalement, ce sont plus ou moins toutes les images dont nous aurons besoin, sauf pour une section hôtelière similaire ici. Donc, nous allons travailler là-dessus et nous pouvons ensuite passer à l'animation de ceci sauf pour la connaissance. Animons rapidement cette section parce que ce n'est pas si difficile. La seule chose dont nous aurons besoin une fois de plus, cette flèche droite nous cause des problèmes. Donc, nous allons utiliser le vol stationnaire et nous allons passer au vol stationnaire, relâcher 0,3 seconde pour que nous ayons le même. Et créons cela comme un composant touche Contrôle. Nous sommes de retour à notre état par défaut de conception. Nous allons utiliser cliqué une fois de plus à l'intérieur de l'état cliqué. Et la seule chose encore une fois, c'est juste que ces images vont passer à ici comme ça. Donc, nous pouvons maintenant prototyper Petco retour au prototype, revenir aux flèches, à droite, point de tabulation, cliquer dessus. On va utiliser le robinet. L' autonomie est dans, sur cliqué en tant qu'état. Et 0,6 seconde, on dirait qu'on l'a fait. Et enfin, nous pouvons maintenant passer à l'état cliqué. Utilisez un point d'onglet gauche parce que nous voulons qu'il revienne à ici. Donc, nous voulons aller à l'état par défaut 0,6 décès amende. Et l'aperçu par défaut de l'état des enfants, juste pour voir ce que nous avons jusqu'à présent. Nous avons donc le vol stationnaire sur les deux. Cliquez, ça va changer. Cliquez, ça va changer. Je pense que ça a l'air bien. Et maintenant passons à la section suivante. Encore une fois, nous avons ces salles ici, et vous pouvez double-cliquer si vous voulez ajouter ces images. Mais je vais juste les laisser comme s'ils étaient ici. Ce que je vais me concentrer sur ces hôtels similaires et n'a pas quitté cette section pour la fin parce que c'est le plus délicat sur cette page. Donc, ce que nous avons ici, c'est que nous avons des informations complètes pour celui-ci. Et nous allons essentiellement créer un composant à partir de celui-ci. Alors voyons. Hôtel similaire. Nos hôtels. J' ai fait des hôtels similaires, BG actuel, hôtels similaires, IMG, lait aller. Donc je vais déposer mon image numéro 1. Voyons donc, peut-être que je peux utiliser ces images que nous avons utilisées précédemment pour les destinations. Alors voyons. Je peux aller avec, par exemple, Hôtel numéro 1. Mais disons qu'ils ont sélectionné dans cet hôtel. Donc, ce premier. Donc, en fait, allons-y avec ce Dell numéro deux. Donc, par exemple, s'ils ont sélectionné celui-ci, ils sont venus à cette page, alors nous pouvons leur montrer ces trois, ces trois cartes par exemple. Laissons-le là-dedans. Et maintenant, nous allons avoir, parce que nous avons ces informations ici, nous allons les utiliser comme informations secondaires. Donc, créons rapidement un composant. La clé de contrôle est ce que vous allez utiliser. État d'Horace. Alors, survolez. Et à l'intérieur de notre section de récolte, il semblait une fois de plus que nous l'avions toujours fait. Alors huit ici, on va montrer le prix. Donc la flèche va apparaître comme ça, notre ego. Et enfin, l'image va améliorer juste un peu, pour zoomer juste un peu. Revenez à l'état par défaut et maintenez maintenant votre touche Alt, faites un doublon. Tenez l'ancienne clé, faites un duplicata. Donc, cela va être une fois de plus un hôtel ou même meilleur hôtel aussi. Juste pour que nous sachions de la page précédente. Hôtel trois et enfin hôtel pour. Maintenant, dans cette seconde, ce que je vais faire est rapidement et glisser dans cette image. Et je vais faire la même chose pour celle-là. Mon père. Et maintenant, je peux me concentrer sur ces changements. Donc tout d'abord, ce premier, moi, deuxième, va avoir la cote de quatre étoiles, donc pas cinq étoiles. Donc je peux aller dans mon état d'Horace et changer mon classement pour être à quatre étoiles, comme ça. Donc c'est génial. Le deuxième sera quatre, mais le troisième aura une cote de trois comme ça. Maintenant, concentrons-nous sur cette seconde. Je vais donc copier une fois de plus, les informations de mon design original. Donc moi un peu de temps. Je vais le copier ici. Et enfin, la description de cet hôtel va aller juste ici. Au lieu de 12 jours, nous allons nous concentrer sur neuf jours. Neuf jours. Et voyons ce qu'on peut faire avec cet espacement. Peut-être pourrions-nous le porter à deux ou six. Je pense que c'est bon. Et le prix est un 20. Vérifions ici. Ce n'est pas le cas, c'est 740, alors utilisons-nous celui-ci. Donc 740 et nous avons utilisé 744, ce dernier. Alors allons-y encore une fois. 49 jours. Et celui-ci est ce que C en fait neuf jours et 14 jours est pour ce dernier. Donc 14 jours je saleté. Et enfin ce que je vais faire, c'est faire la même chose. Copiez donc les informations de mon design original, collez-le ici. Mon père. Et enfin, copiez et collez mon texte dans le troupeau laitier. Donc c'est tout pour ces états d'origine. Sur ces ceux-là. Je vais les fermer tous comme alors je vais fermer cette info. Et enfin, je peux changer les noms. Ce sera, voyons, hôtel ou hôtel similaire en image. Laissons-le. Cela va être des hôtels similaires image deux et similaire hôtels image trois. Mon père. Donc, ce que je vais faire est de les sélectionner tous. Ou ce que je pense est que cela peut être parce qu'il dit hôtel à des images similaires, outil d'hôtel. Ce sont des images similaires, hôtel trois. Et ce sont des images similaires hôtel pour, juste parce que nous avons créé ces hôtel à l'hôtel trois hôtel pour. Donc je vais simplement copier ce nom. Retourne à mon état d'horreur. Comme la saleté et à l'intérieur, je vais changer le nom comme ça. Et voyons simplement si ça montre. Cela ne fonctionne pas, nous devons donc le mettre à jour une fois de plus. Donc, au lieu de Horace date, double-cliquez ici, et allez à l'intérieur de votre image, agrandissez. C' est ça. Ça a l'air super. Vérifions maintenant. Ça ne marche toujours pas. Alors allons de l'avant et revenons à l'état par défaut, copiez-le à partir d'ici, allez à l'état d'horreur, collez-le ici. Encore une fois, je ne sais pas pourquoi, cause des piles. D' accord. Donc fondamentalement c'est juste ici. Donc, je vais supprimer l'ancien et je vais double-cliquer à l'intérieur, l' agrandir un peu comme ça. Revenez à l'état par défaut, et maintenant nous allons appuyer sur l'aperçu et voir s'il s'affiche maintenant. Il y a encore quelques problèmes entre ces images. Donc, ce que je vais faire en fait est de revenir à la valeur par défaut, état, sélectionner tous mes éléments, Contrôle C. Donc, au lieu de la flèche, nous allons encore devoir les étendre, n'est-ce pas ? Oui, mais on pourra changer ça plus tard. Donc, ce que nous allons faire est de passer de l'image 2 ici. Donc, l'image de Mill, copiez-la, allez à la planer basée dessus. Et où il l'a fait, collé. Oh mon Dieu, je me confond. Donc, je vais enlever celui-là au milieu de quatre. Je vais m'en débarrasser. Et double-cliquez dessus. Voyons si ça marche maintenant. Des hôtels similaires, ok. Voyons si l'animation fonctionne maintenant. Ça ne marche toujours pas. Laisse-moi faire une autre chose. Donc, c'est juste la résolution de problèmes. C' est ce que je fais tous les jours. Et tu vas le faire aussi. Donc, ce que vous allez faire est de sélectionner tout, contrôler C, aller au vol stationnaire, sélectionner tout supprimé. Donc, évidemment, au lieu de l'actuel BG Control V pour le coller et simplement passer à des endroits comme ça. Et alors ce que nous allons faire, c'est positionner ça au sommet. Maintenant, nous avons le même problème que nous l'avions fait auparavant. Alors voyons. Je ne comprends toujours pas. Donc maintenant, nous avons un autre problème qui est que nous ne pouvons pas le mettre en dehors de la pile parce que vous pouvez voir que c'est, c'est, c'est à l'intérieur de la pile. Donc, ce que nous aurions à faire, c'est tout recommencer. Ce que je vais faire, c'est revenir en arrière quelques fois. Mon père, et je vais faire glisser et déposer la même image. Retourne à l'état par défaut, mon père. Et je vais le faire. Utilisez ce nom. Donc hôtels similaires, au moins l'information est correcte. Ou image d'hôtels similaires et c'est le nom. État par défaut. Je vais faire glisser et déposer cette même image encore une fois. Donc j'ai été localisé ici, c'est le cas. Aller à l'état d'horreur et glisser et déposer un 10. Double-cliquez. Maintenant, agrandissez-le terahertz. Et maintenant, je peux voir si je le fais enfin marcher. Oui, vous pouvez voir que l'image est lisse maintenant et la transition est lisse. Mais une fois de plus, ce sera un véritable défi, en changeant tout cela. Donc, ce que je vais faire est basé sur l'édition en dessous de la note. Le classement va rester là où il est. Nous allons juste mettre à jour manuellement parce que nous pouvons voir que nous avons quatre étoiles ici pour nos étoiles ici, nous avons juste trois étoiles ici. Nous allons donc mettre à jour manuellement les évaluations. Faisons ça maintenant. Donc à l'intérieur d'ici, on peut aller à l'évaluation et enlever celui-ci. Maintenant, nous en avons trois. Alors que quand, quand nous le glisser-déposer à l'intérieur va être beaucoup plus simple. Donc ce que je vais faire, c'est copier tout. Et le contrôle des prix C, je, que je vais aller à l'état d'horreur basé tout juste en dessous ici. Je vais supprimer mes infos comme ça. Ensuite, je vais supprimer mon image. Donc, cette image originale reste là où elle est. Et je vais laisser voir, garder ce prix. Supprimé cela dans quatre par exemple, parce que nous devons garder neuf jours dans. Mon père a retiré de ce prix et maintenant nous avons ce qu'il nous faut. Donc, si je passe de l'un à l'autre, cette information est correcte sauf pour le prix. Donc, je peux changer le prix manuel années ou plus. Donc 740. Et cela, et cela parce qu'il est en état d'horreur, nous pouvons aussi changer manuellement ce prix aussi bien à 1740 comme cela a été fait maintenant, revenons à ici et nous pouvons travailler sur cette image. Donc, sur l'état par défaut, les dommages sont appelés hôtel séminal image 3. Je peux retourner à l'état d'Horace et renommer cette image. Et puis simplement à partir de mon dossier, faites glisser et déposez cette image en double-clic et je peux l'agrandir. Et tout de suite. Avant de passer à autre chose, vérifions rapidement si cela fonctionne. Ça devrait maintenant. Oui. Donc, ça marche. Tout reste le même comme il se doit. Alors maintenant, nous allons travailler sur ce troisième et finissons enfin. Donc prix, nous avons changé le DAT. Voyons voir, nous sommes dans un état d'horreur. Allons à l'état par défaut. Encore une fois, je vais choisir tout ça. Frappez le contrôle C, retournez à mon état d'horreur. Hit Control V appartenait à mon image. Donc je vais me débarrasser de cette image, mais avant que je le fasse, je vais renommer ma meilleure. Alors je vais m'en débarrasser. Débarrassez-vous de cette information. Et débarrassez-vous de ça. Voyons voir, 14 jours, c'est bon, donc je vais le laisser. Le prix est correct, mais je vais le supprimer 12 jours supprimés, et garder cette information dans. Donc, une fois de plus, je vais simplement glisser et déposer mon image ici, double-cliquer pour entrer dans la zone de Moscou, agrandir et le troupeau laitier. Désolé pour tous ces problèmes, mais quand je concevais, je n'avais pas ces problèmes. Donc, Adobe XD décide parfois que ce que vous faites n'est peut-être pas le meilleur, alors il essaie de vous combattre. Mais au cas où vous pensiez avoir raison, vous devez y faire face et vous devez travailler contre elle juste pour avoir votre mot à dire parce que c'est le logiciel après tout, ce n'est pas un être humain recherché. Tu dois travailler contre ça. Et maintenant enfin, nous allons travailler sur cette barre latérale et terminer cette page. Voyons voir, nous sommes 149 pour une raison quelconque. Alors regardons tout. Bougez-le. Voyons voir, en fait, je vais sélectionner cette information de fond. Débarrassez-vous de ça. Choisissez-le d'ici. Donc d'ici à là, contrôlez C, fermez-le, contrôlez V, et déplacez-le vers le bas 150, comme ça. Voyons s'il a coupé notre pied de page. Je pense que ça n'a pas aimé ça. Ce que je vais faire pour ne pas vous ennuyer trop avec ceux-ci, c'est en fait copier et expliquer ce que j'ai fait. Donc je vais ouvrir ma barre latérale. Je vais ouvrir mon document original et mon design original juste pour vous montrer ce que j'ai fait. Donc je vais copier toutes ces informations. Je vais sauter ici. Je vais le coller, aligner avec mes informations originales. Et puis je vais descendre jusqu'au bas sauf pour le prix et l'enlever. Et maintenant que cette habitude, je peux aller entre eux et expliquer ce que f a fait. Donc ici, laissez-moi juste vérifier s'il a gardé les transitions d'origine. Il ne l'a pas fait. J'aurais donc besoin d'inclure les transitions et plus tard. Donc, ce que j'ai fait ici, c'est que vous pouvez voir qu'à l'intérieur de cette vérification, j'ai mon état par défaut et j'ai mon calendrier. Et ce que j'ai fait pour ce gars, et j'utilise simplement la grille de répétition. Donc si j'ai sauté à l'intérieur, vous pouvez voir ici comment une semaine. Et pour ces données, utilisez simplement un cercle avec la couleur principale. C' est la grille de répétition. Donc fondamentalement des choses vraiment basiques vraiment. Et j'ai fait la même chose pour celle-là. Donc, si je saute ici, vous pouvez voir que j'ai aussi du calendrier. Maintenant, ce que j'ai fait pour tous ces autres, pour le type de pièce, par exemple, il a toujours conservé l'état par défaut, mais il ne m'a pas montré l'état ouvert. Donc cliqué sur l'état. Ce que j'ai ici est exactement la même chose que nous l'avons fait auparavant. Alors, dis-les rapidement pour que je puisse te montrer. Donc, pour l'enregistrement, nous allons avoir, par exemple, l'état cliqué. Donc, faisons le même genre de cliqué à l'intérieur de l'état cliqué. Voyons voir, nous pouvons, par exemple, montrer notre calendrier comme ça. Et c'est fondamentalement tout pour celui-là. Donc, checkout, je peux créer un état de clicker aussi. Comme papa, à l'intérieur de l'état clique, se produisent court mon calendrier. C' est ça. Pour le type de chambre, nous pouvons créer. Cliquez sur les états. S' il décide de travailler comme ça. Et pour le mauvais type, ce que nous voulons, c'est que cette entrée change. Donc, tout d'abord, cette icône de flèche va tourner. Je peux le faire tourner de cette façon. J' ai donc mon entrée BG, qui va évoluer fondamentalement exactement la même chose que nous l'avons fait jusqu'à présent. Nous allons augmenter nos masques à quelque part par ici. Par exemple, Derek habitude. On peut revenir à l'état par défaut, adultes. Donc, pour nous, créons cet état cliqué. A l'intérieur de l'état cliqué, nous allons faire pivoter notre flèche, comme nous l'avons fait avec la flèche supérieure. Entrée BG. Je vais l'étendre jusqu'à quelque part ici, par exemple, masque. Je vais le planer comme ça. Je vais passer aux enfants. Nouvel état, j'ai cliqué sur entrées dat et flèche vers le bas. Et assurez-vous que lorsque vous faites pivoter ces flèches pour les faire pivoter dans la même direction. Parce que si tu ne le fais pas, ça va vraiment se montrer et ça va être vraiment gênant un peu plus tard. Tellement masse. Et vous pouvez le faire exactement au même endroit. Mais je pense que cela fonctionnera peu importe. Sli, état cliqué sur le service. Et je vais descendre du tout dans la même direction. Entrée de texte BG, Voyons voir, masque. Je vais le démasquer, entrer Vg, positionner à peu près ici, par exemple, puis étendre notre mascotte un peu vers le bas. Et enfin, nous allons nous occuper des excursions. Il suffit donc d'ajouter un nouvel état. Et encore une fois, j'utilise le nom cliqué pour tous juste pour que les développeurs sachent litre ou quand vous leur envoyez ces fichiers, comment tous vont fondamentalement et Hub tous vont ressembler. Je vais donc l'aligner sur notre forme de fond. Et c'est un groupe de défilement, donc ils vont être en mesure de faire défiler vers le bas, revenir à cliquer sur l'état et les produits laitiers comment vendre. Maintenant, animons-les et finissons cette page. Donc d'abord pour le check-in. Je vais le sélectionner, mais comme vous pouvez le voir, il prend vraiment beaucoup d'espace. Alors voyons. Oui, il suffit de cliquer ici. État par défaut, appuyez sur animer automatiquement. Il va aller à l'état de clic est maintenant 0.6 et a cliqué fondamentalement la même chose. Il suffit d'aller à l'état par défaut. Dan, pour la caisse, on peut faire la même chose. Tellement correct. Comme cela à l'intérieur de l'état cliqué, il peut aller à l'état par défaut. Et simplement, ramenons-le ici. Un mauvais type. Donc, une fois qu'ils cliquent là, il les mènera à l'état cliqué. Un escalier en cliqué, il va les amener à l'état par défaut de commutation en arrière, qui ici aussi, les adultes. Donc, vous pouvez voir beaucoup de ces tâches sont vraiment répétitives et vraiment ennuyeux, mais toutes font partie de ce travail. Je suppose que je vais le mettre dehors parce qu'il a décidé d'avoir sa propre opinion une fois de plus. Donc cliqué état, lorsque vous êtes en cliqué et revenir à la valeur par défaut. Imaginez que si Adobe XD ne conservait pas tous ces paramètres, vous deviendrez fou. Et c'était comme ça quand ça vient de commencer. Mais heureusement, l'équipe travaille vraiment dur avec toutes ces mises à jour et modifications. Donc, de temps en temps, ils frappent vraiment l'ongle sur la tête avec toutes ces fonctionnalités utiles. Et bien sûr, vous pouvez ajouter votre voix en allant à la voix de l'utilisateur. Et ils peuvent simplement écouter tous les gens et ce que les gens disent. Et Dan, évitez ces changements ou appliquez ces changements selon s'ils doivent les appliquer. Encore une fois, ce que nous avons, c'est ici. Donc, cela fonctionne très bien. Et je n'ai pas montré ça. Une fois que vous cliquez sur l'un de ces éléments, il retourne à l'état d'origine à la fois une fois que vous cliquez là, il va revenir à cet état plus sombre. Donc, il se tient vraiment bien sur un fond blanc. Donc ici, si je clique, ça va prendre le calendrier. Des rochers étaient là. Eh bien, mais voici notre problème. Donc, vous devez cliquer quelque part par ici. Et c'est ce que je disais. Donc, vous devriez parler un blé à votre client de celui-ci. Alors peut-être que nous pouvons mettre le calendrier juste au-dessus ou le soleil, papa, parce que tous ces autres fonctionnent bien. Mais nous avons des problèmes qui se chevauchent avec le calendrier. Donc, si je clique sur l'exemple ici, il va montrer. Mais une fois de plus, le calendrier est le problème ici. Donc, je ne sais pas. Peut-être que vous pouvez parler à votre client, juste leur expliquer comment tout cela va fonctionner, ou peut-être même le cacher juste derrière cela pour ne pas soulever tous ces problèmes. Mais fondamentalement, comme vous pouvez le voir, vous pouvez cliquer quelque part en dehors d'ici comme ceci, par exemple. Et puis il va montrer, et peut-être que vous pouvez cliquer quelque part juste ici pour les adultes. Savoir. Peut-être que vous pouvez apporter le point d'onglet juste ici pour que les adultes aient vu Dan, ça va se montrer comme ça. Alors faisons vraiment ça. Je vais le montrer. Donc les adultes retournent au Design. Je vais utiliser mon masque. Et je vais l'étendre un peu jusqu'ici. Alors maintenant, ça va être nos points d'écoute. Donc, si nous revenons à Preview, retournez à ici. Si je clique quelque part ici, vous pouvez voir qu'il ouvre ces adultes. Donc je dois faire la même chose pour ici, mais je n'ai même pas à le faire parce que c'est ouvert ici. Et maintenant enfin, faisons défiler vers le bas et voyons ce que nous avons jusqu'à présent. Nous avons donc terminé ces travaux comme ils le devraient vraiment bien. Et puis on a un vol stationnaire à l'intérieur du vol stationnaire, ce que j'aime vraiment. Nous avons ce bouton et ceux-ci fonctionnent comme ils le devraient. Encore une fois, vous pouvez faire le même tour ici. Ainsi, vous pouvez étendre votre masque et vous pouvez dire à votre client de simplement cliquer dans ces zones sont dehors juste pour qu'ils puissent avoir une image complète de la façon dont tout cela va fonctionner. Et fondamentalement c'est tout pour cette page. Désolé pour ça au milieu. Mais comme il l'a dit, dans mon design original, il fonctionnait sans aucun problème, mais pour une raison quelconque ici, ça ne marche vraiment pas dès la première fois, donc je ne sais pas vraiment pourquoi ces choses se produisent. Allons de l'avant et regroupez toutes nos informations. Alors appuyez sur Control G. et je vais l'appeler « offre sélectionnée ». Mon père les a mis dans une pile. Et il ne va pas reconnaître la pile. Mais une fois de plus, vous pouvez sauter à l'intérieur et changer ces sections car entre elles sont 150. Mais ici, en haut, nous sommes au forum 80, juste ici. Il le reconnaît d'ici. Donc 100 parce que nous avons ces flèches. Alors assurez-vous de garder ça à l'esprit. Ce que ça va être. Nous pouvons l'appeler, par exemple, une section d'information sur l'hôtel. Et nous allons faire recréer tout ça à l'intérieur. Et c'est fondamentalement tout pour l'écran de disque. Encore une fois, désolé pour ça, mais parfois tu vas remarquer que tu vas le faire, tu vas le faire, non ? Par exemple, vous utilisez le redimensionnement responsive, disons, et cela fonctionne, puis vous allez l'essayer la prochaine fois. Mais Adobe XD ne vous laissera pas, car il pense que vous essayez de faire autre chose. Et c'est essentiellement ce que c'était le problème ici. Mais votre travail en tant que concepteur est de résoudre tous ces problèmes qui vont surgir et venir à votre chemin. Donc j'aime vraiment ça. Je vous ai montré que toutes ces erreurs peuvent être facilement réparables. Vous avez juste à suivre ces modèles simples ou quoi que vous fassiez. Le premier état, assurez-vous de répéter dans le second état, assurez-vous que toutes vos couches sont nommées correctement. Ils sont donc le même nom entre les États et tout va fonctionner comme il se doit. Dans la vidéo suivante, nous allons enfin passer à cette page. On va le concevoir et je te verrai là-bas. 35. Créer un design 10: Allons maintenant de l'avant et finissons notre processus de conception en concevant cet écran de paiement. Donc la même chose qu'avant. Tenez votre vieille clé, assurez-vous qu'il est 70. Zoom avant. Et je vais appeler ça un mode de paiement. Et puis je vais simplement sauter ici, section supérieure utilisée frappé Control C parce que c'est le fond blanc, donc même comme il est juste ici. Je vais l'enlever, puis appuyez sur le contrôle V pour le coller ici. C' est Herat. Donc, fondamentalement, nous avons tous ces mêmes détails maintenant parce que c'était notre hôtel, notre hôtel d'origine, celui-ci. Donc je vais juste sauter juste ici à la carte hôtel détails hôtel et je vais l'appeler actuelle hôtel, IMG. Je l'ai fait. Et je vais aussi sauter à l'intérieur de mon dossier d'images et je vais verrouiller cette même image. Et je vais fondamentalement le glisser et le déposer à l'intérieur comme ça pour qu'on sache que c'est celui-là. Donc Uli dit l'hôtel Union ici, réduire. Toutes ces images osent. Donc, fondamentalement, c'est la même image que celle-ci. Et vous verrez votre nouvel hôtel. Assurez-vous donc d'avoir toutes vos informations en place. Et la dette, ils ont l'air de la même fin à regarder comme ils devraient. Donc, en gros, c'est tout. Et la seule chose que nous devons faire sur cette page est d'apporter cette information du bas de cette page. Par exemple, je vais appuyer sur Contrôle C. Allez sur cette page, appuyez sur Contrôle V. Assurez-vous que nous sommes ici et voyons 150, c'est bon. Je vais le faire glisser et le déposer au groupe de fer inférieur. Et une chose de moins est bien sûr, d'animer cette section. Donc ce que je vais faire, c'est appuyer sur la touche Contrôle. Pour créer ceci en tant que composant. nouvel état va être le paiement. À l'intérieur du paiement, ce que nous allons faire est d'abaisser cela à 0, amener les informations de la carte à 100, d' aller au paiement, changer la couleur en noir, et cela va être gris clair. C' est essentiellement tout. Et enfin, créez un nouvel état à confirmer comme ça. Et à l'intérieur de la conformation, nous allons ramener ça à 0 et ramener ça à 100. Et enfin, sélectionnez ce presque noir, et cela va être gris clair, et c'est fondamentalement tout. Alors maintenant, allons de l'avant et prototypographions. Si vous faites un prototype, je vais sélectionner le paiement. Cliquez dessus et nous allons voir, nous pouvons aller à la section de paiement est dans notre 0.6. C'est très bien. Et cliquez ici que nous pouvons aller à la confirmation. Passez au paiement. Et je vais sélectionner les détails du trajet pour passer à l'état par défaut. La conformation est une information. Et enfin, confirmation. Paiement utilisé aller au paiement. Les détails du voyage seront notre état par défaut et la vache laitière il. Maintenant, appuyez rapidement sur l'aperçu et voyez ce que vous avez. Donc, une fois que vous cliquez sur le paiement, il va facilement changer. Et je ne pense pas que ce soit centré, donc en fait c'est le cas. Mais voyons ce qu'on peut en faire. Je ne trouve pas vraiment ça si attrayant. Conformation. Ça marche bien. Cela fonctionne comme il se doit, et cela fonctionne, mais vous devez attendre un peu que XD débloque pour une raison quelconque. Alors essayez de les attaquer du côté. Donc essayé de venir d'ici plutôt que directement d'ici. Parfois, ça ne marchera pas. Donc, une fois de plus, les détails de paiement et de coupe, tout semble comme il se doit. Permettez-moi de vérifier rapidement le paiement de la dette et de voir ce que nous avons là. Donc design jusqu'à ce jour, laissez-moi cacher mes informations de carte de détails hôtel, et voyons ce que nous avons juste là. Donc tout va bien, mais je ne trouve pas ça si sympa parce que c'est décalé. Donc, essayez lorsque vous recréez cette conception, essayez de comprendre autre chose avec ces champs de formulaire. Donc, soit déplacez-les tous vers la gauche ou mettez le texte du numéro de carte au centre du champ ou dimanche, que peut-être la mort apporterait un look vraiment plus agréable, plus agréable. Mais laissons ça comme ça pour l'instant et ne perdons pas trop de temps. Mais c'est fondamentalement tout pour l'instant. Passons rapidement d'un état à l'autre et c'est tout. C' est très bien. Et comme une certaine dette pour la phase de conception. Donc, dans la prochaine série de vidéos, nous allons travailler sur le design responsive. Je ne vais pas trop vous déranger avec un design réactif pour toutes les pages. Au lieu de cela, nous allons juste nous concentrer sur la page d'accueil parce que c'est la plus grande. Et je veux vous montrer comment tous ces changements affectent votre design responsive une fois que vous commencez à concevoir pour toutes ces différentes tailles d'écrans. Et je vais vous montrer quelques conseils et astuces que vous pouvez utiliser, en particulier avec la fonction de redimensionnement responsive dans Adobe XD. Cela va vraiment vous aider quand vous commencerez avec ce design réactif. Alors je te verrai là-bas. 36. Commencer avec la conception réactive: Maintenant que nous avons terminé notre conception, il est temps de passer à un design réactif. Mais avant de le faire, je veux juste mentionner rapidement ce que c'est et comment pouvez-vous aborder le design responsive. Fondamentalement, la conception lorsque vous le faites, la façon dont nous avons fait dans cette classe est les colonnes et le contenu. Fondamentalement, tout le contenu que vous avez, vous allez distribuer dans ces colonnes. Peu importe si votre mise en page a 4861216 colonnes, peu importe. La seule chose qui compte est le contenu, qui est infiniment évolutif. Ce que cela signifie, vous avez, par exemple, dans la mise en page de 12 colonnes, vous avez l'image qui est de 12 colonnes de large. Ensuite, vous devez être capable de le réduire à des tailles plus petites comme votre téléphone portable, par exemple, pour être, par exemple, quatre colonnes de large ou six colonnes de large ou huit colonnes de large. Donc, vous devez garder cela à l'esprit lorsque vous commencez à concevoir. Vous ne pouvez pas l'adapter plus tard. Je veux dire, tu peux, mais ça va être beaucoup plus difficile garder toutes ces choses à l'esprit une fois que tu commenceras à concevoir. C' est pourquoi j'ai, tout au long de cette classe, mis tous mes éléments, par exemple, à l'intérieur des piles. Je m'assure que j'ai un espacement constant entre eux juste parce qu'une nouvelle dette, nous allons concevoir ceci pour responsive plus tard. Quand il s'agit de design réactif dans son ensemble, vous devez parler avec vos développeurs car parfois vos préférences sont assez bonnes. Disons que vous aimez concevoir, par exemple, à l'intérieur des 12 colonnes pour le bureau, à l'intérieur des huit colonnes pour la tablette et quatre colonnes pour mobile, parfois avec les développeurs, c'est bien pour eux. Vous avez donc juste à créer ces tailles parce qu'ils doivent savoir où sont les points d'arrêt, ce qui signifie où la taille de l'écran change, où il va du bureau aux tablettes, au mobile et ainsi de suite. Donc, vous devez concevoir toutes ces différentes tailles afin qu'ils puissent savoir à quel point l'image est, par exemple, la largeur du bouton, la largeur du texte, la quantité de texte qu'il y a à l'intérieur d'un certain élément et ainsi de suite. Donc, vous devez concevoir pour toutes ces tailles. Maintenant, certains développeurs aiment utiliser leurs propres tailles, leurs propres styles, leurs propres lignes directrices. Donc, avant de commencer avec le design responsive, assurez-vous de parler avec vos développeurs. Assurez-vous de leur demander quelles tailles ils vont prendre en charge. Parce que certains développeurs aiment prendre en charge, par exemple, ces écrans énormes comme les téléviseurs par exemple. D' autres aiment prendre en charge juste le bureau de base, qui est dans ce cas 1920 par 1080, quelque chose comme nous avons conçu. Et d'autres développeurs aiment également prendre en charge toutes les tailles. Par exemple, 1920 par 1080 Dan, 1280 par 860 et ainsi de suite et ainsi de suite. Donc, ils vont de cette taille énorme jusqu'à plus petite taille. Alors que d'autres développeurs aiment à concevoir, par exemple, trois tailles principales, comme je l'ai dit, par exemple, ordinateur de bureau, tablette et mobile, jamais conçu dans des tailles pour iPad, par exemple, parce que ce n'est pas la taille correcte. De cette façon, vous venez de concevoir pour l'écran de l'iPad lui-même, assurez-vous de vous familiariser avec ces lignes de grille. Vous pouvez utiliser des sites comme Bootstrap et vous pouvez explorer Angular, par exemple, juste pour voir ce que d'autres concepteurs font là-bas. Qu' est-ce qu'ils créent mélange pour vous familiariser ce que certaines de ces lignes de grille sont, ce que certaines de ces tailles de grille, notre mélange pour explorer les systèmes, comme je l'ai dit, comme Bootstrap, a essayé de. Utilisez quelque chose comme des systèmes de conception. Assurez-vous d'utiliser 8 grille. Familiarisez-vous si vous commencez tout simplement avec toutes ces choses. Mais avec le temps, une fois que vous aurez le coup, une fois que vous commencez à travailler dessus, une fois que vous avez quelques projets sous votre ceinture, vous allez déterminer les tailles et l'espacement qui vous convient, votre style, votre flux de travail, et Daniel va l'appliquer à des projets qui vont de l'avant. Mais une fois de plus, dès que vous commencez à concevoir avec ces choses à l'esprit, donc les colonnes en quantitatif, il sera beaucoup plus simple pour vous d'appliquer cette méthode à n'importe quel type de taille de grille, n'importe quel type d'espacement, n'importe quel type de la largeur de la gouttière, la largeur de la colonne. Cela n'a pas d'importance tant que vous avez cette approche du design réactif à l'esprit. Maintenant, avec cela dit, certains concepteurs aiment commencer avec des tailles mobiles, ce qui est très bien. J' aime commencer, par exemple, avec des tailles de bureau. Ce que nous avons conçu jusqu'à présent et ce que nous avons créé jusqu'à présent, cela n'a vraiment pas d'importance tant que vous avez cette approche à l'esprit, cette approche évolutive. Parce qu'une fois de plus, vous ne pouvez pas changer la largeur de votre écran, mais vous pouvez changer la hauteur. Et c'est pourquoi, par exemple, un des appareils mobiles que vous pouvez sans fin colles ramper sur Facebook ou Instagram, par exemple, parce que le contenu s'ajuste à la hauteur de l'écran, Il ne s'ajuste pas à la largeur de l'écran. La largeur reste la même, mais elle s'ajuste à la hauteur de l'écran. C' est pourquoi cette approche réactive est importante. Et si vous l'apprenez, si vous commencez à l'appliquer, vous en récolterez les bénéfices plus tôt que tard. Revenons maintenant au fichier Adobe XD et je vais vous montrer les tailles qui vont être utilisées et qui vont être incluses dans ce fichier d'exercices pratiques. Alors assurez-vous de le vérifier, assurez-vous de l'explorer et assurez-vous de l'utiliser et de le tester par vous-même. Voyez si ça marche pour vous. Si ce n'est pas le cas, ça n'a vraiment pas d'importance. Vous pouvez trouver ceux en ligne et vous pouvez utiliser différents qui conviennent à vous et à votre style de travail. Passons maintenant au fichier Adobe XD. Je vais te montrer ce que je veux dire. Donc, ce que nous avons ici, c'est le fichier Adobe XD sur lequel nous avons travaillé. Et je vais simplement sélectionner certaines de ces planches de mon design original. Je vais les copier et ensuite je vais le coller ici. Voici ces plans de travail et je vais vous montrer ce qu'ils sont dans une seconde. Et j'ai encore ce problème que j'ai déjà. Laisse-moi défaire ça. Et laissez-moi, par exemple, essayer ceci. Laisse-moi écrire ici. Et laissez-moi faire un par un. Donc, par exemple, je peux, Il est toujours confronté juste là. Donc, ça n'a pas d'importance. Je vais les créer à ma façon. Ce que je vais faire, c'est utiliser mon plan de travail, créer un nouvel aéroport. Ou si je fais ça, il va simplement le faire une fois de plus comme il l'a fait. Donc, ce que je vais faire est d'utiliser ceci et ensuite je vais le dupliquer en tenant mon ancienne clé. Et je vais supprimer tout le contenu de mon père. Et je vais l'appeler, Voyons voir. Grands ordinateurs de bureau. Comme ça, ou 1200 pixels. Et supprimons cette ligne de grille. Je dat. Et commençons à travailler dessus. Donc ce que vous allez avoir ici, au lieu de 1920, nous allons avoir 1440 comme ça. Ensuite, nous allons toujours avoir 12 colonnes, mais maintenant la largeur de la gouttière va être de 30 parce que cet espacement est beaucoup moins. On en aura 65 ici et on en aura 165. Maintenant, parfois XD va vous battre, mais vous devez aller de l'avant sorte sorte, avec 30, qui 65, avec 16, 5, ce qui je pense est très bien. Maintenant, avant d'aller plus loin, laissez-moi vous expliquer ce que c'est. Donc, c'est essentiellement pour les petites tailles de bureau, peut-être pour les ordinateurs portables qui sont, voyons, 14 pouces ou 13 pouces ou quelque chose comme ça parce que nous voulions avoir cette taille, qui va entre les deux, ces gros pour les grands ordinateurs de bureau et les petites tailles pour les tablettes, par exemple, parce que nous voulons la continuité de notre site Web et donc nous voulons qu'il ressemble à ceci. Laisse-moi aller au plus proche. Donc je vais utiliser un 1084, celui-ci aussi, juste pour que je puisse le fermer pour qu'il ne nous distraire pas trop. Et je vais aussi le déplacer ici. Parce que juste ici, je vais utiliser ces sites et tailles originaux. Donc, je veux juste garder ça hors de la route. Donc, une fois de plus, nous avons de grands ordinateurs de bureau ou un 1200 pixels. Et vous avez vu que j'utilise toujours 12 colonnes. J' utilise toujours la largeur de la gouttière. Mais maintenant de 30, donc il était 60, donc c'est à moitié papa et la largeur de la colonne est de 65. J' utilise toujours les marges liées de 165, qui sont celles-ci. Donc c'est 165 de ce côté et 165 de ce côté. Mais vous pouvez utiliser toutes les marges que vous voulez. C' est vraiment à toi de décider. Maintenant, dupliquons celui-ci. Je vais tenir ma clé Alt et m'assurer que c'est 70. Encore une fois, comme avant. Maintenant, ce sera de gros appareils jusqu'à 992. Ce que cela va être, Il est juste ces petits ordinateurs portables et ces grandes tablettes, par exemple, dans la taille du paysage. Donc, une fois de plus, je tiens à soutenir tous ces éléments. Mais encore une fois, lorsque vous travaillez sur un projet réel, assurez-vous de parler à votre client de la taille qu'il va prendre en charge. Donc, comme je l'ai dit au début de cette vidéo, peut-être ne voulait pas soutenir toutes ces choses. Peut-être qu'ils veulent juste 1920 par 1080, puis passer directement à la taille des tablettes. Donc, une fois de plus, assurez-vous de leur parler, assurez-vous de voir ceux qu'ils vont soutenir. Et évidemment, le budget du projet et le montant que vous allez facturer dépendront du nombre de ces tailles que vous avez dans cette classe. Nous allons juste adapter la page d'accueil parce que c'est la plus grande à toutes ces tailles. Mais imaginez juste que vous avez, par exemple, 20 pages. Ce n'est pas pareil s'ils voulaient ces 20 pages en trois tailles. Et s'ils veulent ces 20 pages dans, par exemple, 10 tailles différentes. Donc, ce n'est pas la même chose. Vous devez leur parler des tailles qu'ils vont prendre en charge avant de commencer le projet. Si vous revenez à la brève vidéo de conception et si vous ouvrez le modèle de bref de conception, vous pouvez voir que toutes ces tailles dont je parle sont répertoriées dans le document de conception. Et c'est une partie importante du dossier de conception et du processus de conception lui-même est de parler avec votre client et leurs développeurs des tailles qu'ils vont prendre en charge. Parce que non seulement cela dépend de combien vous allez facturer pour ce projet. Cela dépend aussi en grande partie de combien, combien de temps cela va prendre ? Parce qu'une fois de plus, plus vous avez de tailles , plus il vous faudra de temps pour adapter tous ces plans de travail et écrans à toutes ces tailles. Maintenant, revenons en arrière et en créons un autre. Donc, comme je l'ai dit, ce sera jusqu'à 992. Et voyons, ça va être 1024, comme ça. Donc, vous pouvez voir qu'il commence à devenir plus petit et plus petit bouton juste ici. Vous pouvez utiliser 88 colonnes, mais je vais toujours utiliser 12 juste pour vous montrer. Donc nous allons utiliser 30 et nous allons utiliser 50 pour la largeur de la colonne. Alors revenons ici. Donc 30, 50, et utilisons 47 ici. Assurez-vous que nous sommes 47. Vous pouvez voir que XD va vous combattre, mais vous devez le garder. Donc 12305047. Et vous pouvez voir que, parce que XD est un outil après tout, est un logiciel, il ne va pas reconnaître tout de suite ce que vous essayez de faire. Donc, vous avez juste à poursuivre et persuader. Donc je vais tenir ma vieille clé, dupliquer ça encore une fois. Et maintenant, nous commençons à entrer dans le territoire des tablettes. Maintenant, ils sont jusqu'à 76, huit pixels de largeur. Ainsi, vous pouvez les voir comme, par exemple, portrait pour iPad, portrait pour Microsoft Surface et comprimés dose. Donc, ce sont la largeur de 768 comme ça. Et il va y avoir huit colonnes maintenant. Nous avons donc beaucoup plus d'espace entre nos colonnes. Ils seront 29 pour la largeur de la gouttière, ils seront 64 colonnes de largeur, et enfin 42 pour ces marges. Encore une fois, 296042. Et maintenant que nous en avons fini, créons maintenant une dimension finale, qui va être pour les écrans mobiles. Maintenant, comme je l'ai dit, ce n'est pas vraiment nécessaire et ce n'est pas vraiment une bonne idée de concevoir pour les téléphones, par exemple, un droit pour iPhone, droit pour une galaxie, droit pour Google Pixel. Parce que les gens qui utilisent des téléphones qui ne sont pas ces polices, ne vont pas avoir une bonne expérience. C' est pourquoi encodez votre prise en charge ces points d'arrêt afin que votre contenu soit bien mis à l'échelle. Par exemple, si vos utilisateurs ont ces énormes téléphones, peut-être qu'il va s'ouvrir comme celui-ci. S' ils ont ces très petites polices, ça va s'ouvrir comme celle-ci. Donc, tout dépend vraiment de toutes ces tailles. Alors allons-y et assurez-vous que la largeur est 375. Assurez-vous que maintenant nous utilisons quatre colonnes. Assurez-vous que nous utilisons 30. Il y a un 61 et 20 ici. Donc, je vais m'assurer de persuader que ça marche. Une fois de plus, 3061 et nous allons utiliser 20 ci-dessous. Donc Derek, oh, et maintenant vous pouvez voir qu'on a ces quatre colonnes. Maintenant, comment notre contenu va évoluer, vous allez voir dans une seconde seulement. Mais fondamentalement, nous allons juste adapter cette mise en page que nous avons sur notre page d'accueil à toutes ces tailles différentes. Donc la première chose que je vais faire est en fait utiliser cette page d'accueil, maintenez ma touche Alt, et faites-la glisser jusqu'ici. Et puis je vais sauter à l'intérieur et appeler ça réactif. Ou encore mieux, appelez ça cette abréviation ici. Donc page d'accueil dans le design et dans celui-ci, parce que nous allons utiliser toutes ces autres abréviations, M, avant d'arriver à la conception et au design responsive, je veux juste utiliser mon nav principal, navigation primaire et mon logo. Donc, je vais exporter mon logo parce que je veux utiliser PNG pour cela, parce que ce logo, comme je l'ai expliqué précédemment, parce qu'il a ces trois éléments à l'intérieur quand toute une touche de changement MMA, vous pouvez voir qu'il ne s'adapte pas si bien, si je maintiens le Maj et Alt et le clic gauche, comme vous pouvez le voir, tous commencent à se grouper. Donc, ce que je vais faire est de cliquer sur Contrôle ou Commande E. Choisissez mon bureau, par exemple, et simplement l'exporter en PNG. Et puis je vais y retourner et trouver mon logo. Je vais le ramener ici. Donc, par ici. Et je vais simplement le positionner ici. Assurez-vous qu'il est au même endroit que le logo original comme ça. Je vais le déplacer en dessous du point de mon père et quand appuyer sur Supprimer sur mon logo. Maintenant, explorons rapidement. Donc, les destinations, le logo de navigation principal, comme vous pouvez le voir, il ne l'a pas mis à jour, donc je dois le faire manuellement. Donc, ce que je vais faire est d'utiliser un logo de mon NAV primaire, appuyer sur Control C. Et puis un demi pour le faire pour tous ces autres et tous ces autres états, je vais sauter, attribuer un logo, appuyer sur Contrôle V position juste ici. Et il va simplement le positionner au même endroit. Donc je vais continuer à faire ça. Je vais le coller dans tous ces autres états. Et fondamentalement, dans la prochaine vidéo, nous allons continuer là où nous nous sommes arrêté et nous allons commencer à adapter notre contenu à toutes ces tailles de design réactif. En outre, une dernière chose que je veux mentionner avant d'entrer dans le design réactif réel est parfois que vous allez utiliser le moins de contenu. Donc, dans certains de ces cas, comme par exemple, ces cartes de destination, si vous vous souvenez, parce que nous utilisons la flèche gauche et la flèche droite, nous avons utilisé huit au total pour ces petites tailles que vous pouvez utiliser et les diviser. Par exemple, je ne sais pas, deux par deux. Ainsi, les utilisateurs doivent taper quelques fois. Mais ce que j'aime vraiment faire, c'est sans perdre leur temps. Par exemple, nous pouvons passer de huit dans cette plus grande taille à six dans cette plus petite taille à quatre dans ces supports, par exemple, les tailles de tablette, une seule carte sur la taille mobile. Ainsi, ils peuvent glisser vers la gauche et la droite entre toutes ces cartes et appuyer sur le bouton de toute façon. Donc aussi, vous devez penser aux états stationnaires et nous allons en parler une fois que nous aurons réellement atteint ces états supérieurs et les adapterons. Donc, comment les états ne sont évidemment pas nécessaires dans les tailles mobiles et tablettes parce que vous ne pouvez pas survoler avec votre souris là-bas. Nous allons donc les supprimer et notre contenu va sembler un peu différent de ce qu'il est sur nos tailles de bec pour les ordinateurs de bureau. Je te vois dans la prochaine vidéo et je vais continuer à travailler sur ce logo. En le basant sur tous nos états pour que nous puissions facilement les adapter plus tard. Je te vois dans la prochaine vidéo. 37. Créer une conception réactive 1: Ok, donc maintenant que j'ai fini d'ajuster mon logo et d'y inclure ça et Jean à tous les états. Commençons maintenant par travailler sur le design responsive. Donc, ce que nous avons ici, c'est l'option de design responsive pour le tableau d'art lui-même. Mais je ne vous recommande pas de l'utiliser parce que si je choisis et puis grandir ici au milieu de mon tableau d'art ici, puis commencer à travailler sur mon design responsive. Vous pouvez voir que certains éléments fonctionnent bien, mais d'autres ne le sont pas. Et ils sont incessants, mais vous pouvez l'utiliser pour des pages plus simples. Par exemple, les pages de destination avec pas trop de détails et d'options. Mais comme je l'ai dit, nous ne l'utiliserons pas parce que nous avons plusieurs états, nous avons plusieurs options pour chacune de ces différentes sections de nos pages. Donc, je voulais tout faire à la main et juste pour vous montrer le processus global. Donc ce que je vais faire en fait, il y a deux façons. Vous pouvez en fait y aller de deux façons distinctes. Donc, la méthode numéro un est que vous pouvez simplement aller ici et copier tous ces éléments de cette page. Alors allez juste ici et collez-les ici. Étendez cet aéroport tout le long, puis ajustez simplement élément par élément ou l'autre façon comme je l'ai fait et comme je vais le faire, vous pouvez tenir votre vieille clé, faites glisser votre copie comme nous l'avons fait jusqu'à présent. Et puis je vais simplement refaire tous ces paramètres sur ce plan de travail ici en bas. Donc, je vais faire que c'est assez simple. Vous pouvez d'abord commencer avec la largeur, donc 1440, cliquez ici, donc nous doutons d'un redimensionnement réactif sur. Donc, je vais utiliser travailler 40 là-bas, appuyez sur Entrée, et vous pouvez voir qu'il est réduit. Et une fois en vol stationnaire, vous pouvez voir le contour de notre plan de travail original. Ensuite, je vais ajuster tous ces paramètres. Donc 365165. Donc 30 à 65, puis 165 juste ici. Comme ça. Et maintenant que nous avons, vous pouvez toujours vérifier. Donc 123065165365165, tout va bien. Maintenant, nous pouvons commencer à travailler sur notre conception. Alors, comment pouvez-vous aborder cela est simple. Vous pouvez faire élément par élément, comme nous allons le faire, parce que j'ai trouvé que c'était le plus facile et le plus précis sur lequel travailler. Ou ce que vous pouvez également faire est de faire certains de ces éléments similaires comme celui-ci, par exemple, il suffit de cliquer, de le faire glisser, et c'est fondamentalement tout pour tous ces éléments plus simples. Vous pouvez également aborder celui-ci de la même méthode. Vous pouvez approcher celui-ci parce que ce n'est vraiment pas si difficile à faire. Peut-être simplement le mettre au centre comme ça, par exemple. Voyez si cela s'aligne correctement, cela se termine essentiellement à cette section. Il n'y a plus de travail à faire. Vous pouvez également faire les sections les plus petites, en particulier ces sections partenaires. Donc, je peux, par exemple, le placer juste ici au centre. Je vais m'assurer que c'est là. Et puis je vais m'assurer que c'est là. Et puis je peux sauter à l'intérieur des logos de mon partenaire, tenir ma touche de changement. Et comme nous utilisons des piles, vous pouvez voir comment la mise en page ci-dessous agit et redimensionne de manière responsable. Vous pouvez également faire est sans maintenir Shifts, il suffit de cliquer ici, puis de les ajuster comme ceci. Donc c'est vraiment à vous de décider. Donc, comme vous pouvez le voir, certains éléments sont vraiment simples à faire, mais vous devez également ajuster cela à ici. Donc maintenant, quand je clique sur cette section, ça ne va pas dehors. Donc, comme il est dit, certains éléments sont vraiment simples à faire comme celui-ci, par exemple, simplement ajusté à ici. Cliquez ici, assurez-vous que c'est ici. Et puis utilisez la monnaie dans simplement ajusté à ici, par exemple, vous pouvez également l'étendre à ici juste pour que les utilisateurs sachent qu' il y a beaucoup plus à voir sur une gauche et une droite. Et aussi cette section, par exemple, est vraiment assez simple. Donc, nous allons l'ajuster dans le centre cliquez ici et apporter ces modifications pour l'instant. Donc, ce que je peux faire est en fait déplacer cela et puis voir où cela m'amène à entendre, par exemple, comme ceci. Donc, ce que je peux faire est simplement étendre et le rendre, par exemple, longue colonne de large. Et puis je peux le ramener ici. Ensuite, je peux sauter à l'intérieur d'ici et réduire la taille. Assurez-vous que mon texte d'abonnement est au centre. Sautez dans mon état d'horreur, puis ajustez simplement mon état Horace aussi. Assurez-vous que vous vous abonnez est au centre. Revenez à l'état par défaut, et c'est tout pour l'instant. Donc, comme je l'ai dit, vous pouvez faire toutes ces choses comme ça, ou vous pouvez les faire dans l'inverse. Donc, c'est vraiment à vous de décider comment vous allez réellement vous adapter. Cela fait en sorte que ce soit 40 comme et les morts. Ou maintenant, parce que nous sommes à plus petite taille, nous pouvons même descendre à 20. Et nous allons de l'avant et nous concentrons maintenant sur une tâche plus difficile à portée de main, qui sont essentiellement la navigation et ces menus déroulants et ces cartes en particulier est ce qui va nous prendre et la plus grande quantité de temps. Donc, le premier de tout, travaillons avec notre section héros. Donc je vais sauter à l'intérieur de nos images de héros , les sélectionner toutes, et simplement les amener ici. Et puis ce que vous pouvez faire, c'est cacher votre héros et ensuite sauter à l'intérieur vers chacun d'eux. Double-cliquez à l'intérieur et focalisez simplement la zone que vous souhaitez voir les utilisateurs. Comme celui-ci par exemple, je peux cacher celui-ci, ramener celui-ci et double-cliquer et peut-être simplement le pousser ici. Je peux l'abaisser à 0, l' amener, et peut-être nous cacher. Celui-ci a rompu. Donc je veux que ces bateaux soient au centre comme ça. C' est très bien. Ramenez ça. Comme ça. Et ramène ça. Ok, donc je vais utiliser 0 basé sur cette image, 0 basé sur cette image. Et je vais simplement ramener ma superposition de couleur et les produits laitiers l'ont. Vous pouvez également ajuster cela plus si vous le voulez, mais je pense que ça va fonctionner très bien. L' étape suivante consiste à ajuster ces flèches parce qu'une fois de plus, vous pouvez travailler votre chemin autour de ces éléments qui sont plus faciles à ajuster et à passer à ces éléments qui sont plus difficiles à ajuster. Donc je vais déplacer mon Arabe comme ça et aussi toujours commencer par le premier état. Alors déplacons notre masque de texte pour être au centre comme ça. Déplaçons notre bouton pour être au centre comme ça. Et ce que nous pouvons faire maintenant est également d'étendre la taille de ce bouton à quelque chose comme celui-ci. Va planer, quelque chose comme ça. C' est très bien. Et puis il suffit de le déplacer au centre pour qu'il corresponde à notre nouvelle mise en page fondamentalement. Alors maintenant que nous avons réparé tout cela, Travaillons maintenant sur notre logiciel de navigation pour moi, allons rapidement fermer tout cela et travailler sur cela. Tout d'abord, je vais bouger mon logo ici. Et ce que je vais faire parce que j'ai tous ces éléments de texte. Ce que je vais faire, au lieu de les mettre ici, je vais les mettre à peu près ici. Et puis, par exemple, plus de 20 en bas de mon logo. Je pense que c'est bon. Et puis je vais sauter à l'intérieur et ajuster celui-ci. Et puis je vais les sélectionner tous. Mon ng-click ici, qui va les répartir uniformément sur notre grille. Maintenant, vous pouvez suivre les lignes de grille si vous le souhaitez. Alors positionnez l'hiver ici, positionnez le bien-être ici. Donc chacun d'eux prend deux colonnes par exemple. Mais je ne vais pas faire ça. C' est beaucoup plus simple à faire. Discuter. Ce que vous pouvez aussi faire est de déplacer ceci au centre, comme celui-ci maintenant parce que nous avons beaucoup plus d'espace. Et ce que nous pouvons faire est de réduire la taille globale de notre logo, par exemple. Alors, sautons à l'intérieur de notre logo et maintenez la touche Maj. Nous pouvons le positionner ici parce que, comme je l'ai dit, nous n'avons pas besoin d'autant d'espace pour notre logo. Nous pouvons amener notre point de tabulation au centre de notre logo. Apportez ceci ici et utilisez tous ces éléments. Et maintenant, amenez-les en 20, par exemple. Et je pense que ça marchera très bien. Donc maintenant, c'est toute la dette, tout cela est terminé. Ce que je peux faire, c'est ce qui prend le plus de temps et ce que je vais vous montrer rapidement pour ce premier état, puis je vais passer à autre chose, les faire moi-même et ensuite revenir vers vous et vous montrer les résultats, c'est que vous avez pour le faire pour tous vos autres états. Tout d'abord, ce dont nous avons besoin, c'est d'ajuster ces destinations afin que nous puissions les ramener, les ramener à la 101e chose, les montrer comme DOS. Et je vais aussi utiliser mon primaire maintenant Blur assurez-vous que soit 1080 par exemple, juste pour que je puisse voir tous mes éléments ajustés comme ça. Et c'est là que la pile, par exemple, pourrait être utile. Donc, voyons que je veux sélectionner ces éléments comme dat, PDG, comme la saleté et les mettre dans une pile. Donc je vois l'Europe comme ça. Mettez-les dans une pile. Et à l'intérieur de la pile, ce que vous pouvez faire est simplement de cliquer sur une odeur et simplement ajuster l'espacement entre eux. Et maintenons notre touche Maj. Certains Darrell vont se mettre à l'échelle égale comme ça. Et voyons, c'est 115 comme ça. Donc nous allons utiliser cet espacement pour tous. Et voyons, je pense qu'il manque un d'entre eux. Lequel est-il ? Voyons voir. Il manque quelque chose ici. Alors voyons que quelque chose m'a échappé parce que, comme vous pouvez le voir, ça me montre là-bas. C' est un séparateur, désolé. Vous devez toujours vérifier ces choses et voir où ils vous emmènent. Donc diviseur avec c'est ça. Donc 11 et 10. Donc ce que je vais faire en premier, c'est sauter à l'intérieur de ce séparateur. Basé sur cette valeur. Je vais fermer celui-ci, sauter à l'intérieur de ce diviseur, base, cette taille de diviseur. Et enfin, pour les Amériques, nous n'avons pas de diviseur là-bas. Alors, allons les regrouper. Amériques. Et je vais aussi tomber dans le référencement là-bas, comme nous l'avons fait avec une Europe. C' est vrai. Et ils sont tombés dans tous et sauter à l'intérieur de l'Afrique. Alors rappelons-nous et voyons l'Europe. Donc, c'est 115. Je vais utiliser la même valeur, la même valeur. Donc 115, comme vous pouvez le voir, cela fonctionne assez bien, mais nous pouvons aussi sauter à l'intérieur et ajuster celui-ci. Donc il suffit de suivre la règle pour cela sont 108 en fonction d'un satané. Combien de lettres sont en fait à l'intérieur de toutes ces autres lettres. Donc, pour l'Afrique pile, nous allons sauter à l'intérieur d'ici à USU, la pile et 115. Et voyons pour ce dernier, je peux l'ajuster à peu près ici. Et encore une fois, faites la même chose pour les Amériques, empilez 115. Et comme vous pouvez le voir ici, nous devons les chevaucher un peu. Ainsi, par exemple, nous pouvons ajuster ce dernier. Et puis nous pouvons cliquer ici juste pour qu'ils ne se chevauchent pas trop. Je vais revenir en arrière et les premières choses ont d'abord suggéré celui-ci un peu et ensuite ajuster celui-ci à quelque part par ici. Maintenant que je suis content, ce que je vais faire, c'est les cacher. Je vais taper deux fois sur Mizuki pour les cacher et je vais montrer tous ces autres. Donc je vais montrer l'hiver d'abord. Un que je vais faire est de l'ajuster ici, par exemple. Et puis je vais utiliser le texte sauter à l'intérieur d'ici. Et voyons, par exemple, peut-être que je peux baisser cette taille. Voyons voir, 120, ce qui est très bien. Mais peut-être que je peux même les déplacer un de plus. Alors, cliquez ici. En fait, cachons cette dénotion. Ainsi, les destructeurs n'ont pas fini par perturbation. Donc je vais simplement le déplacer sur cette ligne juste ici. Je vais cliquer sur mon illustration et je vais simplement maintenir ma touche Maj et ajuster ici, assurez-vous que les deux sont centrés comme ça. Et en gros, il a des dettes à propos de l'hiver. Maintenant, nous pouvons sauter à l'intérieur du grand bouton et simplement ajusté à ici. Allez à l'état d'horreur, ajusté à ici, assurez-vous qu'il correspond. C'est ça. Est-ce qu'il voit s'il est sur la ligne de grille ? Il l'est. Donc, en gros, c'est bien pour l'hiver. Je vais double-cliquer sur mon 0, inclure mon bien-être retour, et faire la même chose fondamentalement. Donc, je vais utiliser mes textos. Voyez où ça va. Alors, juste ici. Et ce que je peux faire est d'utiliser la hauteur automatique, pourrait simplement ajuster certains d'entre eux. Je peux aller de l'avant et cacher mon illustration juste pour que je puisse voir où fait le texte et comme Derek. Derek. Alors voyons ce que nous avons ici. Donc, nous en avons 40, ce qui est génial. Je peux revenir en arrière et ajuster mon texte ici, leur tête. Donc, pour l'illustration du bien-être elle-même, et si vous ne pouvez pas le voir, vous pouvez simplement ajuster la largeur, la ramener, puis ramener cela comme ça. Donc la même chose que nous l'avons fait auparavant. Ce que nous pouvons faire est simplement d'ajuster notre illustration comme celle-ci ou de la garder ici parce que je ne veux pas qu'elle soit trop large. Le texte de mélange est ici. Puis ajustez la largeur de notre texte une fois de plus pour l'adapter. Et puis déplacez cela simplement en utilisant 40 comme ça. Et il suffit de sélectionner ces deux et de les apporter comme ça. Ou vous pouvez même utiliser moins de texte si vous le souhaitez. Pour les textes de bien-être ici, c'est vraiment à vous de décider et comment vous voulez aborder cela. Ramenons cet individu, alignons-le ici. Je vais apporter le texte quelque part par ici. Par exemple, les analytes voient dans l'illustration, va-t-il s'adapter ? C' est ça ? Est annélides simplement utiliser les textes pour couper la taille. Je vais cliquer ici et ajusté et injuste dans celui-ci comme DAT, et simplement déplacer notre bouton et le déplacer comme ça. Maintenant s'il vous plaît noter que si vous utilisez le même bouton, par exemple, apprenez-en plus ici et pas différents comme nous le faisons. Et puis vous pouvez simplement ajuster ce même bouton une fois et l'utiliser tout au long de votre conception afin que vous puissiez simplement afficher en DID haute encore une fois, une fois de plus. Donc ça va être beaucoup plus rapide que cette approche. Mais je voulais être aussi personnel que possible pour ces types. C' est pourquoi nous utilisons tous ces boutons différents. Et bien sûr, il apporte ce genre d'intérêt visuel à votre page. Lorsque vous avez ces boutons N augmente la probabilité de cliquabilité parce que vous avez tous ces boutons intéressants plutôt que d' apprendre plus tout au long de toutes vos pages. Alors gardez ça à l'esprit. Sur certains projets, vous allez avoir un bouton qui sera exactement le même pour tous vos objectifs et pages différents et ainsi de suite. Donc, certains d'entre eux peuvent sembler un peu différents dans certains cas. Maintenant, nous approchons de la fin. Je vais traiter dans cette section très rapidement. Déplaçons ça hors du chemin et je vais cacher mes infos de carte pour l'instant. Plus lorsque les textes à peu près ici, double-cliquez, assurez-vous qu'il est automatiquement ajusté à la hauteur, et passons à ici. Voyons voir, nous allons râper et nous assurer que nous sommes 40 et ajuster notre bouton final. Comme ça. Là, vous l'avez. Encore une fois, nous sommes à 40 ans. Et maintenant, pour le texte d'info de la carte, ce que je peux faire est de sauter dans ma carte. Je peux l'ajuster à ici, par exemple, peut m'assurer qu'il est dans la même rue qu'il était. Et maintenant pour cela, ce que vous pouvez faire est de les inclure dans les groupes. Voyons voir, ça va être mappé. Ça va être la newsletter, ça va être le téléphone. Et enfin, ça va être une adresse. Maintenant, une fois qu'ils sont là, vous pouvez les mettre dans un groupe et les mettre dans une pile. Mais avant de le faire, je veux m'assurer qu'ils sont alignés comme ça. Donc, je vais utiliser mon téléphone, aligner sur ici, et utiliser mon adresse, par exemple, un alignement sur ici. Assurez-vous qu'il est 20. Maintenant, je peux les regrouper comme ça et voir ce que les piles montrent les rivages. Je pense que c'est bon. Comme vous pouvez le voir lorsque vous cliquez comme ça, il va le positionner au centre. Je vais essayer de le remplacer. C' est très bien dans les troupeaux laitiers. Donc, cette section est maintenant terminée. Ça a l'air bien. Et je ne peux pas m'adapter par 0, Qi le cacher. Et fondamentalement ce que je vais faire maintenant, s'il vous plaît copiez toutes ces mêmes informations et fondamentalement collez-les dans toutes ces autres informations. Mais avant que je fasse ça, ce que je vais faire avec mon flou de navigation, je vais le ramener à un. Ensuite, je vais sélectionner tout cela sauf pour le flou de navigation, appuyez sur Contrôle C. Aller à mes destinations, état. Ouverture. Voyez que c'est là que se trouve le flou maintenant. Je vais supprimer mon NAV principal, appuyez sur Contrôle V pour coller toutes mes informations dans. Et je vais simplement montrer ma destination dans ce premier état comme ce troupeau laitier. Maintenant, je vais aller à l'état d'hiver. Faites la même chose. Alors supprimez celui-ci, montrez tout le reste. Et la première chose que je vais faire est d'utiliser mon sélecteur. Déplacez-le ici jusqu'à ce qu'il rencontre l'hiver. Il suffit d'apporter tout ça comme ça et le troupeau laitier et de s'assurer qu'ils ont tous 20 ans. Alors sélectionnons-les comme ça. 20. Et avant de passer à l'hiver, Allons aux destinations, ouvrez-les. Donc, la maladie hivernale, les croisières individuelles. Et au fait, je tiens simplement Contrôle pour les sélectionner tous comme ça. Retourne à l'hiver, Derek. Oh, c'est tout l'hiver est sélectionné et il suffit de localiser votre hiver. Ici, il est, et ramène-le pour qu'il se montre. Donc je vais mettre la vidéo en pause pendant que j'en fais le reste. Et je vais revenir et vous montrer comment nous pouvons avancer ici et ajuster toutes ces autres sections. Et maintenant que j'ai fini tout ça, laissez-moi vous accompagner pour voir à quoi ça ressemble. Donc, ici, nous avons le principal. Maintenant, c'est l'état par défaut. Nous avons les destinations, évidemment les mêmes qu'avant. Nous avons l'hiver, nous avons le bien-être, nous entendons l'individu. Donc, fondamentalement tout ce que j'ai expliqué dans cette vidéo, je viens de l'avant et je l'ai fait. Donc, une dernière chose que je voulais mentionner est les animations. Donc parce que nous avons changé, tout ça, remplacé les tailles, nous avons tout déplacé. Nous avons changé le logo du SVG original à ce B et G, et aussi à l'intérieur de ces états, par exemple, pour cet individu, disons que nous les déplacons tous autour. Nous changeons la position Contactez-nous, l'espacement et ainsi de suite. Toutes ces animations ont disparu. Donc, si je clique sur le prototype et que vous ne pouvez pas voir cela à l'intérieur de l'état par défaut, nous pouvons toujours y aller. Donc, si je m'ouvre en mode aperçu et que vous pouvez voir que la fenêtre d'aperçu est maintenant un peu plus petite qu'elle ne l'était. Vous pouvez voir que l'effet de survol fonctionne toujours. Mais par exemple, quand j'ai essayé de cliquer ici, cela nous amène à la deuxième, deuxième espace et deuxième animation originale . Comme vous pouvez le voir, il ne s'harmonise pas bien avec ce premier. La première chose est que je devrais ajuster nos textes. Donc, vous pouvez voir que le texte bouge juste ici. Donc, je vais devoir le positionner au centre comme vous voudriez juste ici et toutes ces informations autre moitié pour ingérer une animation encore une fois, mais beaucoup plus important pour cet élément en haut, quand je clique sur l' hiver, vous pouvez voir que je ne peux pas cliquer ailleurs. Donc, c'est vraiment, le problème principal, c'est que vous devrez les animer tous une fois de plus, sauf pour ces états Hover parce que nous ne les avons pas du tout modifiés. Ils le sont, ils restent les mêmes et ce bouton reste le même. Mais comme il l'a dit, nous devrons les animer toutes une fois de plus. Donc fondamentalement pour libérer votre temps, Si je peux dire satellite que vous pouvez aller au héros et les sélectionner. Donc, la section supérieure peut maintenant utiliser un prototype , puis simplement cliquer sur l'un d'eux et voir la transition. Donc, fondamentalement, parce que nous avons utilisé partout la même transition, il tapote auto animate, facilité dans 0.4 secondes. Donc, vous pouvez l'utiliser ou vous pouvez utiliser 0.6. C' est à vous de décider comment vous voulez vous adapter à cela. Mais en gros, c'est ce que vous auriez à faire. Maintenant, je vais animer ça et revenir dans la prochaine vidéo. Mais pour cette vidéo, je veux juste la mettre fin sur une image de héros. Donc, je veux utiliser ma mosquée de texte de héros et le bouton, appuyez sur Contrôle C. Et je suis également utilisé en fait, nous allons, utilisons l'édition. Du masque de héros jusqu'à la dernière image Control-C. Sautez dans l'image pour basé partout, tout sur le dessus. Ensuite, retirez tout du bureau, masque de texte vers le bas comme ça. Je vais abaisser l'opacité de cette image à 0. Ça va être à 100. Donc, revenons-le et voyons à quoi cela ressemble dans l'état par défaut. Parce que je ne me souviens pas si c'était ces images à une image trois, si elles étaient à 100% dans le premier état. Voyons donc l'animation. Oui. Donc, nous devrions aller à l'état par défaut et les amener à 100, les deux comme ça. Et puis quand j'ai lancé mon prototype, et que j'ai cliqué ici, vous pouvez voir que cette animation semble beaucoup mieux. Maintenant que vous avez fait ça dans l'état par défaut, dans le second état, ce que je peux faire est d'aller dans mon texte de héros et j'apporterai mes deuxièmes textes pour Paris comme ça. Je vais l'enlever comme ça. Et maintenant, je peux sélectionner tous ces éléments, Contrôle C, vous sautez dans l'état cible, contrôler V, et simplement les supprimer tous vers le bas. Je vais ramener ça à 0. Et ça devrait être à 100. Mais ce n'était pas pour une raison quelconque dans le second état. Retournons et réparons ça. Donc, cela devrait être à 100, juste pour des raisons de cohérence. Et ça devrait être à 100 ici. C' est très bien. Enfin, nous allons changer ce texte afin que plus de textes numéro 3 soient en place, juste ici, et ensuite déplacer le texte numéro deux hors du chemin, comme ça. Et c'est fondamentalement tout. Finalement, appuyez sur Preview une fois de plus et voyons à quoi tout cela ressemble. Alors comment le pouvoir fonctionne bien. Et maintenant vous pouvez voir que toutes ces images restent en place, mais vous pouvez voir que cela ne fonctionne pas sur celle-ci, donc nous devrions l'animer une fois de plus. Donc, dans le prototype d'état par défaut, je peux sauter à l'intérieur de mes flèches et voir le point d'onglet de flèche droite est facile maintenant 0.6. Alors passons à l'image numéro deux. C' est donc la partie délicate avec tout cela parce que nous changeons de place, nous les déplacons. C' est le problème avec eux. Donc, lorsque nous cliquons ici, nous allons utiliser des animations automatiques. Nous allons passer à l'état par défaut assouplissement et 0.6 seconde. Et nous allons cliquer ici et aller à l'Image 3, utiliser les mêmes paramètres, puis aller à l'image numéro trois flèches à gauche. Et sur celui-ci, nous allons passer à l'état précédent, et c'est fondamentalement tout. Donc, comme je l'ai dit, ça peut être un peu une corvée de les animer tous en même temps. Mais c'est le principal problème que j'ai avec Adobe XD en général, c'est que lorsque vous commencez à travailler sur ces animations, au lieu de les animer une par une, par exemple, puis de garder ces animations partout où vous les placez, quelle que soit la taille, sachez que vous devrez animer tout à la fois. Mais la bonne nouvelle, c'est que l'équipe travaille dur pour faire ces ajustements pour les prochaines versions Adobe XD afin que nous puissions améliorer encore plus notre vitesse et que nous n'ayons pas à le faire pour tous. Donc vous pouvez juste imaginer que maintenant, je vais entrer et animer tous ces états différents comme je l' ai fait dans la taille originale. Mais à l'avenir, j'espère qu'il viendra un moment où vous, où vous voulez animer tous. Adobe XD conserve toujours ces paramètres. Je te vois dans la prochaine vidéo. Et comme je l'ai dit, je vais aller de l'avant et les animer tous comme je l'ai fait dans le premier. Et dans la prochaine vidéo, nous allons traiter de ce nav inférieur. Alors je te verrai là-bas. 38. Créer une conception réactive 2: Bon, alors maintenant que j'ai fini de créer ces émissions et ces émissions, passons rapidement en revue et voyons à quoi ça ressemble. Fondamentalement exactement la même chose qu'avant. Donc tous ces autres restent les mêmes et vous pouvez cliquer entre eux et le sélecteur va changer. Vous pouvez cliquer sur votre logo, il reviendra ici. Le survol fonctionne. Et comme vous pouvez le voir, une fois que vous cliquez ici, cela vous mènera là. Alors maintenant, concentrons-nous sur la recrue sur celle-ci. Mais avant de le faire, je veux juste parler rapidement de quelque chose. Je n'ai pas créé d'animation entre toutes ces différentes pages parce que vous ne pouvez pas aller d'ici à ici directement, parce que je veux la garder pour la fin. Et je veux vous expliquer cela, ces connexions entre les pages avant que nous commencions réellement avec la partie de partage de cette classe. Donc, nous allons garder ça pour la fin. Et je vais évidemment connecter ces pages et montrer toutes les méthodes que vous pouvez utiliser pour la dette. Mais avant de passer à autre chose, nous allons maintenant travailler sur cette section ici. Donc, dans cette navigation en bas et une autre chose, parce que ces émissions sont maintenant cuites dans comme ça, les boiseries plus tard, une fois que nous avons réellement l'échelle à une taille différente. Ne vous inquiétez pas trop pour ça. Donc, comme je l'ai dit, nous allons travailler là-dessus. Et pour cela, ce que je vais faire est pour chacun d'eux, sauf pour la recherche, je vais me débarrasser de ces icônes parce que les icônes prennent de l'espace. Alors je vais me débarrasser de ça. Et je vais positionner ceci comme un exemple de 24. Et puis je vais leur faire deux colonnes de largeur comme ça. Je vais étendre mes destinations BG et l'amener ici animaux qui sont allés cliquer sur mon masque et étendu à quelque part ici, par exemple. Comme ça. Et ce qu'on va faire, c'est faire la même chose pour être en état d'arrestation. Donc, je vais cliquer ici, ouvrir notre diviseur et le rapprocher de quelque chose comme celui-ci par exemple. Et nous l'avons ici. Donc ce que je vais faire, c'est utiliser tout ça. Donc, fondamentalement, je peux même utiliser ces mêmes mosquées. Hit Control C, sauter dans mes clics date, ouverture, Control-V, supprimer l'ancien et simplement étendre le nouveau vers le bas. Donc, je peux l'étendre à ici, par exemple. Et puis je peux ramener mon masque ici. Et voyons maintenant si nos animations fonctionnent. Donc, cliquez revient à la valeur par défaut. Par défaut, cliquez sur. Ainsi, vous pouvez voir que cela fonctionne de cette façon lorsque vous n'êtes pas trop en train de jouer avec les positions. Donc, quand je clique juste là, ça va l'étendre jusqu'au bas et ça va marcher très bien. Et vous pouvez toujours le lire. Il est écrit dans les destinations, donc je pense que nous sommes bons. Donc, je vais mettre la vidéo en pause et réparer le reste d'entre eux, puis revenir. Et maintenant que j'ai réparé ces principaux, comme vous pouvez le voir, j'ai fait la largeur des deux colonnes pour tous juste le masque va un peu à l'extérieur pour que l'ombre portée puisse apparaître. Allons maintenant réparer et mourir. Tout d'abord, et ramenez-le ici. J' utilise ce bouton et en ai fait trois colonnes et je voulais vous montrer cette recherche une. Donc, je vais apporter la recherche BG sont juste ici. Donc deux ici. Et je vais aussi apporter cela beaucoup plus près. Donc, je vais utiliser l'icône de recherche et rechercher des voyages. Je vais m'assurer que c'est 20, par exemple. Et puis rapprochez ce peu d'ici, puis amenez notre icône de vêtements ici. Je peux aussi le ramener juste pour que vous puissiez le voir quelque part ici, par exemple, INT et ensuite le ramener à 0. Donc, c'est notre état par défaut, et je vais simplement copier l'édition que j'ai faite ici. Allez à notre kit-basé sur l'état cliqué juste ici, puis supprimez tous ces autres comme ça. Donc, la première chose que nous allons faire de toute évidence, c'est de ramener cela à une rotation. C' est la même chose qu'avant. Cette surtension BG va s'étendre pour couvrir ici. Et nous allons simplement déplacer ces deux-là, puis 22 ici. Ensuite, vérifions rapidement et voyons si cela fonctionne. C' est le cas. Et enfin, nous allons frapper l'aperçu et voir à quoi tout cela ressemble maintenant. Donc les destinations. Et voyons cette ombre de fond s'afficher joliment. Tout a l'air bien. Rechercher cela fonctionne, Il montre et enfin appliquer des filtres fonctionne comme il se doit. Alors maintenant que cette section supérieure est terminée, Allons-y et travaillons sur celle-ci parce que, comme je l'ai dit, ces sections en bas vont être ce qui est le plus difficile. Et tout d'abord, nous allons l'aligner comme ça. Et ils vont être plus difficiles parce que toute évidence vous avez toutes ces informations à l'intérieur. Donc, tout d'abord, alignons ceux-ci vers le haut. Donc, dans ces sections vont être six colonnes de large. Voyons où c'est. Donc 246, ils doivent finir ici. Et par conséquent, ils pourraient avoir besoin d'être un peu plus larges. Donc, ce que je vais faire en premier, c'est d'utiliser mon image d'abord, assurez-vous qu'elle est de trois colonnes de large. Ensuite, utilisez tout mon contenu, ma dose, et assurez-vous qu'il est juste ici. Et puis voyons, 1, 2, 3, 4, 5, 6. Donc on devrait encore le couper ici. Donc, disons, par exemple, profiter de la belle Egypte comme celle-ci. Et puis par exemple, nous pouvons sauter ici et l'utiliser, le positionner comme une pile. Et voyons, par exemple, peut-être que je peux les mettre tous dans ungroup et ensuite utiliser une pile positionnée comme celle-ci, et cela ne fonctionne pas comme ça. Donc, fondamentalement, ce que je devrais faire, c'est sauter à l'intérieur d'ici et ensuite positionner notre transport. Il vient en dessous. Mais comme vous pouvez le voir, ça ne me permettra pas de le faire. Il y a donc de bonnes chances que je doive les dégrouper, les mettre au milieu. Mais dans une pile et pourquoi maintenant et les positionner comme ça. Ensuite, sautez simplement à l'intérieur, assurez-vous qu'ils sont alignés comme ainsi, et déplacez-les juste ici pour qu'ils rencontrent la position alignée du bord. Est-ce que cette ligne juste ici, assurez-vous que le prix est juste ici. Et puis ce que je vais faire, c'est évidemment ramener ça ici et ramener ce BG ici. Maintenant, je peux déplacer ces deux, donc positionnés et les séparateurs les déplacent juste ici jusqu'au bord. Voyez où nous sommes. Et par exemple, je peux même réduire la largeur d'entre eux. Fais quelque chose comme ça, parce que maintenant on n'a pas besoin qu'ils soient aussi grands. Et évidemment, je peux positionner ce séparateur en bas et je peux déplacer ces icônes jusqu'à peut-être 20. Je ne pense pas qu'on ait besoin qu'ils soient beaucoup plus que ça. Je peux positionner ça dans l'un ou l'autre, pour être 20. Et c. Ils ne se montrent pas comme ils le devraient. Alors voyons, peut-être que nous pouvons les amener comme ça, puis les déplacer dix vers la gauche, puis cliquer sur l'un d'eux et le ramener, cliquer sur un autre. Donc, cette partie du bas. Il est assez difficile de sélectionner ces diviseurs car ils sont assez petits. Et c'est fondamentalement tout. Donc, ce que je vais faire maintenant, c'est ajuster notre contenu dans son ensemble. Alors faisons-le avec le chariot. Voyons voir peut-être qu'on peut faire la hauteur de 437, peut-être. Voyez comment ça marche. Je pense que ça marche bien. Ensuite, ajustez simplement un peu la hauteur de notre image. Et voyons 40. Peut-être qu'on peut faire face à 20, puis à 20. C' est très bien. Alignez ça comme ça. Et voyons, le contenu est 20 du top 22 ici, 22 ici, donc tout semble bien. Enfin, je peux simplement ajuster mon image comme ceci, par exemple. Et ce que je veux faire ensuite, c'est essentiellement sélectionner tout. Contrôle C. Aller à l'état d'horreur, contrôler V, coller tout. Tout simplement, vous pouvez aller de l'avant et supprimer l'ancien contenu. Je vais double-cliquer à l'intérieur et simplement agrandir mon image comme ça. Et je vais aussi sauter à l'intérieur et étendre mon masque adulte à juste ici. Donc, comme je l'ai dit, c'est la chose la plus longue dans cette conception. Parce que vous pouvez juste imaginer que si nous n'avions pas tous ces changements, tous ces effets de vol stationnaire à l'intérieur des effets de vol stationnaire, toutes ces ombres portées changeant avec les états Horace, surtout ici. Donc, si je clique ici, vous pouvez voir qu'il est à cinq heures, il devrait être à huit heures. Donc, si nous n'avions pas un design complexe comme celui-ci, ce serait beaucoup plus simple à ajuster. Donc encore une fois, quand je fais défiler vers le bas sur ce nouveau design, vous pouvez voir à quoi ça ressemble, mais ces murs ressemblent à ceci. Donc, une autre partie que vous pouvez prendre est utilisée cette conception exacte, transformez-la dans la pile, puis positionnez l'image au-dessus de ceux-ci. Mais juste Dan au lieu de 3.52 par exemple. Vous pouvez faire cette approche si vous le voulez, mais tout dépend vraiment de vous et de la façon dont vous voulez aborder ces choses. Donc, pour l'instant, je vais aller de l'avant et changer toutes ces choses en utilisant ces mêmes techniques et les mêmes méthodes. Et ceux-ci vont ensuite aller à six colonnes juste ici. Alors 12345 et six ici. Vous pouvez donc voir comment nous allons les ajuster. Voyons voir 3, 4, 5, 6. Donc ce tribunal devrait finir ici. Laisse-moi apporter mes antécédents et ma flèche. Alors là, comptons encore une fois. Donc 123456, ce qui est très bien. Et puis je devrais apporter mes séparateurs. Voyons voir, je peux amener celui-ci en deux à peu près par ici. Alors passons avec 240 comme ça et utilisons simplement celui-ci jusqu'à 40 aussi. Et maintenant, tout ce qui se trouve à l'intérieur de notre contenu est correctement aligné. Donc ce que je ferais, c'est de sauter dans l'état Horace et ramener ça ici. Voyons voir. Donc 123456 et ensuite aller au milieu, utilisez nos diviseurs et utilisez simplement jusqu'à 40 comme ça. Et c'est fondamentalement tout. Comme je l'ai dit, c'est tout pour cette vidéo. Je vais sauter de l'avant et changer tout ça parce que comme je l'ai dit, je ne veux pas vous ennuyer trop d'une largeur, tous ces changements, mais nous allons toujours garder la même distance. Et parce que nous sommes dans une pile, si un spectacle que, donc je vais sélectionner tous ces. Vous pouvez voir que le contenu en bas est réduit. Et c'est ce que nous voulons réaliser avec cela. Donc, je vous verrai dans la prochaine vidéo une fois que je les aurai finis et ensuite nous pourrons continuer à travailler sur les sections suivantes. 39. Créer une conception réactive 3: Bon, donc maintenant j'ai fait cette section est terminée. Laissez-moi vous montrer à quoi ça ressemble dans l'aperçu. Donc, si je fais défiler ici, vous pouvez voir fondamentalement qu'il ressemble exactement à ce qu'il était avant. Donc, nous avons l'ombre d'arrière-plan, nous avons des images zoomant et nous avons ce bouton juste ici avec le hover. Et j'ai aussi ajusté la largeur de ces deux boutons. Donc, en gros, j'ai fait la même chose que je t'ai montré, pour cette première carte. Et maintenant, nous allons de l'avant parce que nous avons terminé cela et vous pouvez ajuster la largeur de cette vidéo si vous le souhaitez. Mais pour cette taille, laissons-le comme ça. Passons maintenant et traitons ces cartes de destination. Donc, une fois de plus, comme je l'ai dit, ces cartes de destination vont s'adapter à notre mise en page. Donc, si on zoome juste là. Alors ajustons les ponts très rapidement. Assurez-vous qu'il soit au centre comme ça. Et ce que nous allons faire avec les villes, c'est évidemment, comme je l'ai dit, je vais supprimer quelques cartes parce que nous avons tous les voyages en Europe bouton ci-dessous de toute façon, pour que nous puissions le faire. Ce que je vais faire, c'est en avoir six. Maintenant que les utilisateurs peuvent cliquer, ils vont voir trois par trois. Donc je vais me débarrasser de ces deux-là à l'arrière. Et je vais aussi sauter dans les villes africaines et me débarrasser de ces deux-là. Et je vais aussi aller en Asie, CT, et me débarrasser des deux derniers. Et enfin, nous avons les Amériques. Et je vais faire la même chose et je le fais maintenant juste pour que je ne l'oublie pas plus tard parce que parfois nous faisions tout ça, surtout si vous êtes dans un délai serré, ça peut être extrêmement difficile. Alors maintenant, nous allons travailler sur une ville européenne. Donc, tout d'abord, sélectionnons le dossier et déplacez-les juste ici en place. Je vais aussi ajuster notre groupe de défilement deux ici. Donc juste au bord de notre grille comme ça. Et fondamentalement ce que je vais faire est d'ajuster chaque carte à la liberté pour les colonnes en largeur. Donc, ce que je peux faire est simplement le faire et il va bien s'ajuster. La seule chose qui ne fonctionne pas, et vous pouvez simplement l'aligner un peu mieux est par exemple, vous utilisez 60 ici. Et puis nous pouvons, par exemple, positionner ou diviseurs ici, comme ceci. Et par exemple, Laura, ça jusqu'à 340, peut-être. Je pense que ça marchera très bien. Mais le point est d'aligner tout ce contenu vers la gauche et assurez-vous de l'ajuster, par exemple, 10 pixels vers la gauche, puis ajuster la taille ici au centre, solide C, ici, nous pouvons utiliser quelque chose comme 5000 penser, Oui, 50 a l'air bien. Et ce que nous pouvons faire, c'est simplement aligner ce premier diviseur ici. C' est la taille 32018. Et puis nous pouvons faire la même chose pour cette seconde. Donc, 328. Donc, nous avons 53, 28. C' est ce qu'on va faire dans le second état. Alors vas-y comme ça. Alors voyons. Je vais emménager et ajuster ces deux-là et l'image aussi. Comme ça. Voyons voir, c'est bien. Alors nous allons sauter à l'intérieur, utilisons ça. Donc 328 et moi pouvons sauter à l'intérieur d'ici. L' énergie doit aller à 15. Et avant de nous pleurer plus loin, allons sauter à l'intérieur et voir si cela a gâché notre animation. Il ne l'a pas fait. Ce qui est génial. Et c'est pourquoi je continue de dire toujours vérifier vos animations et voir si tout fonctionne comme il se doit entre vos états. Maintenant, passons à autre chose et ajustons la même chose pour Londres. Encore une fois, sautant ici. Et je vais sauter à l'intérieur de celui-ci et le déplacer ici. Donc, pour le Londres, je vais utiliser ces deux, désolé, image de fin elle-même ajustée à ici. Celles-ci vont rester les mêmes. Allons vite à Paris. diviseur du milieu est 328. Donc je vais utiliser ça d'abord. Alors 3, 28, comme ça. Et voyons, je peux ajuster ça à 50 aussi. mon père. C' est génial. Et nous pouvons passer à notre état par défaut et à notre destination, flèche et image. Alignez-le ici, allez au milieu. Ça va être 50. Et ces deux-là vont être 320, huit, ce qui est génial. Et maintenant, ajustons ce dernier pour Rome. Je vais faire la même chose pour ici. Et au fait, je peux simplement sauter à l'intérieur de l'horreur si je veux le faire. Mais ce que j'aime vraiment, c'est d'abord faire des ajustements dans l'état par défaut pour tous, puis de sauter dans un état terroriste puis de les ajuster. Osez. Nous pouvons également utiliser 50 ici parce que ça va fonctionner très bien et puis sauter à l'intérieur du domaine de chevaux. Et voyons voir. Donc, ici, nous pouvons les ajuster à 328. Cliquez ici, assurez-vous qu'il est 50. Et parce qu'on les a ajustés à l'avance, ça va marcher très bien. Donc, avant d'aller de l'avant avec ces autres, je veux juste passer rapidement en vol stationnaire et voir si tous fonctionnent comme ils le devraient. Donc, cela fonctionne, cela fonctionne, et cela fonctionne, et ils ont l'air vraiment génial. Mais lorsque vous cliquez ici, cela vous mènera à la section précédente. Donc ce n'est pas ce que nous voulons faire. Ce que nous voulons vraiment faire est d'ajuster l'espacement pour tous correctement. Ce que je vais faire, c'est déplacer DC-3 ici. Donc, jusqu'à ce qu'ils alignent et puis cachent ces trois. Et avant d'aller plus loin, je peux simplement déplacer mes flèches en place, par exemple. Et je peux aussi déplacer mon bouton et m'assurer qu'il a quatre colonnes de large, par exemple. Je peux l'ajuster ici et à l'intérieur de l'état d'horreur, ça marche très bien. Et maintenant je peux gérer ces trois cartes. Donc, dans cette vidéo, je vais les réparer tous et ensuite je vais revenir en arrière et les ajuster tous, puis revenir et vous montrer à quoi ils ressemblent tous pour que nous puissions passer à l'autre section. Et comme je l'ai dit plusieurs fois, c'est juste parce que je ne veux pas perdre trop de temps parce que sinon, ce cours pourrait durer quelque chose comme, je ne sais pas, dix heures ou quelque chose comme ça. Essayons 50 ici. Comme vous pouvez le voir, parce que nous avons 10 jours, ça ne marche pas si bien. Essayons 40. Je pense que 40 fonctionne mieux. Et on peut encore faire avec 328, quatre ici. Souviens-toi qu'il a 40 ans. Donc, à l'intérieur de l'état d'horreur, on peut les ramener comme ça. En passant cité un moulin, ça va être 240. Et ces deux-là sont 328. Ce qui fonctionne très bien. Revenons à l'état par défaut maintenant, ramenez celui-ci ici. Comme ça. Je vais les amener, comme au milieu. Allons-y avec le 328. Et ici, parce que nous avons la même chose, nous allons utiliser 40 ou très la Terre. On peut utiliser 50 ici parce qu'on n'en a qu'une dans les jours. Ou si vous voulez garder la cohérence, vous pouvez le faire par exemple, 40 pour ce 44 jours. Donc c'est à vous de décider ce que vous voulez en faire. Maintenant que c'est terminé, passons au vol stationnaire et ramenons ça ici. Et c'est encore 320 huit. Et ces séparateurs sont essentiellement la plus grosse corvée ici. Donc, c'est vraiment à toi de décider. Si vous voulez utiliser le séparateur, si vous ne le faites pas, mais si vous le faites, n'oubliez pas qu'ils peuvent être un peu une corvée à ajuster. Contrairement à tout cet autre contenu, qui est beaucoup plus simple à ajuster en le faisant simplement. Si je, par exemple, plus de ces diviseurs, plus que de ce côté, vous pouvez voir qu'ils bougent tout le chemin et qu'ils ne s'ajustent pas comme la chemise, ce qui est, je pense, un gros problème dans XD, mais ils vont le corriger dans les futures mises à jour. Et voyons enfin dans l'état d'horreur, finissons ça pour que je puisse vous montrer comment les aligner sur la grille. Donc 328 comme ça. Et voyons ici nous pouvons utiliser 50 et appeler un jour et dire que maintenant nous avons tout terminé. Enfin, nous avons 30 espacements entre chacun d'eux. Je vais donc les sélectionner, les déplacer comme ça. Alors je vais les ramener. Et pour ça, je vais simplement le déplacer à 30 comme ça. Je vais ajuster ce groupe de défilement pour venir ici. Et ce que je vais aussi faire est de sauter à l'intérieur et je peux simplement utiliser tout ce groupe parce que nous avons les deux états, si vous vous souvenez. Donc, ce que je peux faire est de sauter ici, sélectionner toutes mes informations, puis passer à mon état cliqué. Contrôle basé sur Kit V, puis retirez-les tous comme ça. Et puis à l'intérieur de nos villes, ce que je peux faire, c'est simplement les pousser vers le bord. Donc comme ça, comme ça. Et voyons si c'est correct. Il l'est. Donc, ce que vous pouvez aussi faire si vous voulez, vous pouvez ajuster cette ligne juste un peu si vous le voulez. Mais je ne pense pas que ce soit nécessaire parce que ce côté est plat de toute façon. Donc maintenant, si nous basculons entre notre état par défaut et notre état cliqué, vous pouvez voir à quoi cela ressemble. Alors passons rapidement à l'aperçu et voyons si l'animation fonctionne. Nous y voilà. Donc tout a l'air sympa. Quand je survole et clique, il va traduire ici va être agréable et propre. Et quand je reviens, je devrais cliquer et créer une transition dans cet état. Alors passons à l'état cliqué. Mais en fait avant nous le faisons, allons rapidement voir, sorte que les destinations européennes flèches, à droite, étape C, ce que nous utilisons. Alors appuyez sur auto, animez les destinations rapidement, facilement. Maintenant 0.6. Donc, nous pouvons aller à l'état de clic. Localisez nos flèches point d'étape gauche, cliquez sur Dara droite, appuyez sur l'autonomie, passez à l'état par défaut, facilitez l'entrée et point zéro 86. Donc maintenant enfin, avant de terminer cette vidéo, Nous allons en prévisualiser une fois de plus, voir à quoi ça ressemble. Alors je vais aller en Europe. Juste là. Horreur, cliquez. Ça marche. Howard cliquez dessus fonctionne. Et évidemment, ce parchemin ne fonctionne pas. Voyons donc pourquoi les villes de conception et cela devrait fonctionner. Je ne comprends pas. Pourquoi ça ne marche pas. Ici, c'est. Donc, comme vous pouvez le voir, il y a parfois des bogues avec Adobe XD, mais fondamentalement cela fonctionne. Et quand je clique ici, nous pouvons aussi le ramener. Donc Derek, oh, oh, et aussi tous ces effets de vol stationnaire du travail comme ils le devraient. Notre bouton fonctionne comme il se doit, et tout est aussi connecté. Et aussi ce texte entre les séjours de votre état au sommet, sorte qu'il semble agréable et propre. Vous pouvez également penser à ajuster la hauteur de la section afin que vous puissiez ajuster la hauteur des cartes si vous le souhaitez. Vous pouvez simplement le faire en ajustant la hauteur de cette image, puis en ajustant la hauteur de toutes ces sections. Si je vais à Paris, par exemple, Disons que si vous faites cela, vous pouvez simplement ajuster la hauteur de toutes ces autres sections si vous le souhaitez. Vous pouvez également les mettre dans un groupe, utiliser la pile, puis quand vous l'ajustez, il s'ajuste automatiquement. ne sont donc que quelques-unes des options que vous pouvez faire et que vous pouvez utiliser. Mais je ne vais pas le faire, je pense que ça a l'air bien comme il devrait juste ici. Donc, comme je l'ai dit, ce que je vais faire maintenant, c'est aller de l'avant et travailler sur ces trois. Donc l'Afrique, l'Asie et l'Amérique. Et puis je reviendrai vous montrer les résultats. Et puis nous allons travailler sur toutes ces autres sections de notre page. 40. Créer une conception réactive de la conception 4: Ok, donc maintenant que j'ai fait tous ces changements, laissez-moi vous expliquer rapidement et vous montrer à quoi ils ressemblent. Donc fondamentalement la même chose que dans toutes ces autres mises en page et la même chose que nous avons fait ici. J' ai fait exactement la même chose et exactement les stapes, les mêmes étapes pour tous. Je ne voulais pas t'ennuyer avec des détails. Maintenant, nous allons travailler sur cette section, qui est de réserver votre voyage de rêve et est allé le positionner juste ici. Et voyons, peut-être faisons le chemin. Je vais donc positionner mon image ici et ensuite sauter entre les sections. Et voyons, je peux même réduire la taille de mon image. Largeur, par exemple, voir à quoi cela ressemble, puis je peux appliquer les modifications ici. Voyons donc si je les sélectionne tous les deux. Et simplement rétrécir terme comme ça. Voyons voir, peut-être deux pour certains jusqu'à ce que ça peut-être. Et puis je peux les ramener et voir la position, positionner ce contenu ici. Et puis voyons. Apportez l'image à quelque chose comme quatre colonnes de large peut-être. Jusqu' à New York. En fait, allons zoomer un peu plus près juste pour que nous puissions affiner tous ces détails avant d' aller de l'avant et de réduire la taille. Maintenant, nous pouvons sauter à l'intérieur, sélectionner les deux et simplement réduire la demande. Je vais double-cliquer sur mon image à chaque position ici. Et c'est pourquoi nous avons tout ce contenu comme redo ici. La prochaine chose que je vais faire est de cliquer ici. Je vais m'assurer que c'est la hauteur automatique parce que nous allons la mettre à l'échelle plus tard. Je vais cliquer ici. Assurez-vous que c'est la hauteur automatique aussi, juste parce que nous allons copier plus tard ce texte, déplacez-le autour de toutes ces autres tailles. Par conséquent, je veux l'explorer de cette façon et je veux le garder de cette façon. Comme vous pouvez le voir, la pile tient toujours la distance de 150 entre toutes nos sections. Et on peut le garder là ou on peut le changer plus tard. Tout dépend de ce que nous voulons faire. Passons donc à nos destinations les plus prisées. Je vais l'aligner ici. Et fondamentalement, je vais faire la même chose comme avec toutes ces cartes. Tout d'abord, amenons les flèches et positionnées ici. Donc ils sont là. Et fondamentalement, je vais faire la même chose. Donc tout d'abord, pour les destinations, je vais l'amener ici. Voyons maintenant s'il s'aligne sur notre grille. C'est le cas. Donc, d'abord les choses, parce qu'une fois de plus, nous avons trois cartes, nous pouvons les ajuster pour être quatre colonnes de large. Donc je vais sauter à l'intérieur de celui-ci et nous pouvons l'ajuster pour être ici de sorte que quatre colonnes de large. Et je pense que les textes que vous voyez ici, ça n'a pas vraiment d'importance tant que c'est compréhensible et lisible. Ainsi, vous pouvez sauter à l'intérieur d'ici et ajuster cela à ce que vous voulez. Voyons voir, peut-être que je peux l'ajuster ici. Je pourrais le faire. Ça n'a pas d'importance tant que ça a du sens. Alors voyons. Nous allons garder quatre lignes de texte en hauteur. Donc, ce que je peux aussi faire est d'utiliser le contenu d'ici, donc Control C. Et fondamentalement, la seule chose que nous avons fait ici, qui est différente, est dans cette ombre de fond. Donc, je vais aller ici, cliquez ici, puis utiliser huit pour l'arrière-plan peu profond. Et je vais aussi double-cliquer et agrandir cette image dans un petit peu ici. Donc maintenant que c'est terminé, je peux revenir à l'état par défaut et je peux les ramener. Comme vous l'avez dit, quatre colonnes de large. Donc juste ici, assurez-vous que ça a du sens. C'est le cas. Et je peux aussi aller au vol stationnaire parce qu'il ne nécessite aucune modification. Et vous pouvez voir que nous avons encore ces deux états. Et le texte est de quatre lignes de hauteur. Pour que je puisse revenir à celui-ci. Et vous pouvez voir avec certains de ces éléments, il est beaucoup plus simple à ajuster car ils ajustent et remplissent naturellement tout cet espace. Maintenant, je vais faire la même chose que je l'ai fait avec les précédentes. Donc je vais utiliser ces positions ici. Et je vais travailler sur d'autres choses. Donc Michelle, et assurez-vous qu'il fait quatre colonnes de large ici, tout de suite, nous avons le problème. Donc ce que je vais faire, c'est utiliser ça. Donc St comme une sorte d'abréviation au nom d'origine. Donc tout le monde sait encore ce que c'est, mais dans dit juste pestis au lieu du nom complet. Donc ce Derek dehors. Et je vais revenir à la position par défaut de l'état ici. Et pour un Sydney, je vais m'assurer qu'il fait quatre colonnes de large comme ça. Allez à Horace date, assurez-vous qu'il fait quatre colonnes de large. Et vous pouvez voir quand vous concevez avec ces éléments simples, sans séparateurs, par exemple, et sans toutes ces animations complexes, faire cette chose est vraiment assez facile. Donc, comme vous pouvez le voir, c'est vraiment assez relaxant en fait de faire cela et de vraiment assez simple. Donc enfin, ce qu'on va faire, c'est les sortir de la route comme ça et amener tous ces types. Et puis repositionnez à 30, assurez-vous que c'est là qu'il devrait être. Et puis semblait simplement comme avec d'autres, sélectionnez votre contenu, copiez-le, passez à l'état cliqué, basé ici, puis supprimé l'ancien contenu. Et la seule chose que je veux faire ici est deux mes destinations et simplement déplacer les destinations ici. Allez également à Prototype, allez deux flèches, un point d'onglet gauche cliquez dessus parce que nous voulons revenir à l'animation automatique, choisissez l'état par défaut, facile dans notre 0.6. Donc, cela va rester la même main, revenir à l'état par défaut, et là vous l'avez. Passons maintenant à cette section, qui est des témoignages. Maintenant, à l'intérieur de nos témoignages, ce que je veux faire, c'est aller à nos témoignages eux-mêmes. Parce que vous pouvez voir que ce fond, si je vous montre, si je clique sur ma carte ici, il ne va pas jusqu'ici, que je voudrais vraiment qu'il aille et s'agrandisse. Donc ce que je vais faire est de copier ce texte, il Contrôle C. Puis dégrouper ceci. Allez Control G une fois de plus et basé dans, et je vais utiliser la pile. Donc, ce que je vais faire à l'intérieur de la pile, c'est que je vais simplement ajuster cette largeur de carte. Donc je vais l'ajuster à ici. Donc la largeur de ceci, donc 11, 12. Et puis je vais sauter à l'intérieur de la seconde. Basé sur la valeur de la dette. Et vous pouvez voir que la pile va automatiquement s'ajuster correctement. Donc je vais le coller juste là. Et je vais faire la même chose pour ça. Donc maintenant, ce que nous pouvons faire est soit de faire ces mêmes changements dans tous d'entre eux, comme je vais le faire. Ou vous pouvez simplement copier et coller le domaine si vous le souhaitez. Donc ce que je vais faire, c'est utiliser ces mêmes. Sauf par exemple, pour le héros ou la connaissance. Positionnons tous les tourbillons. Donc, comme vous pouvez le voir, il les a organisés d'une manière agréable ici. Alors voyons des témoignages. Nous devrions le faire encore une fois, malheureusement, alors dégroupez, vous pouvez frapper les témoignages de qualité Control G. Mon père. Et nous allons inclure la même distance. Mais commençons par un outil de témoignage parce que c'est celui-ci. Donc je vais le coller comme ça. Je vais faire la même chose sur le premier. Je l'ai fait. Et voyons si nous revenons à notre état par défaut, aller à des témoignages et voir la distance est de 60. C' est la distance que nous allons utiliser pour celle-là. Donc des témoignages. Alors, pile, je vais utiliser 60, je doute. Et puis ce que je vais faire, c'est tout simplement les pousser tous pour que cette seconde remplisse bien l'espace. Essayons comme ça. Je l'ai fait et maintenant que nous avons cela, laissez-moi sauter à l'intérieur d'ici, copier cette valeur. Donc on est ici. Et passons maintenant au prochain garde. Donc on va faire la même chose pour ça. Je vais le coller comme ça. Et enfin, faites la même chose pour cela. Alors collez-le ici. Maintenant, ce que je peux faire pour éviter ce genre de confusion est simplement d'utiliser un contrôle C sur la section de témoignage et d'aller au numéro de témoignage 3, supprimer celui-ci, coller ici, et je peux simplement les ajuster pour que je rentre dans celui-ci. Et cela nous évitera de créer une animation pour le texte, qui est fondamentalement. Les plus exigeants d'entre eux dans cette section particulière. Et revenez ici, supprimez celui-ci. Contrôle V positionnez-le juste ici sur le dessus. Parce qu'une fois de plus, vous devez encore le faire pour l'amour de l'animation automatique. Donc, il devra repositionner la même saleté et voir où il est. Je dois encore le pousser un peu jusqu'ici. Ce que je n'aime pas vraiment, ce sont les flèches, donc j'aime taxer ça. Je pense que c'est bien. Mais pour les flèches, revenons à l'état par défaut. Travaillons sur eux là-bas. Donc, ce que je vais faire est simplement de les positionner juste ici et de frapper Contrôle C et d'aller au second état, contrôler V. Et quand les positionner vers le bas, supprimer les anciens. Contrôle V. Dans celui-ci, supprimez les anciens et déplacez simplement vers les nouveaux vers le bas. Et enfin, état numéro 4, je vais faire la même chose. Alors l'a déplacé jusqu'ici. J' ai enlevé les vieux, troupeau laitier. Et maintenant, nous allons travailler rapidement sur notre animation. Donc prototype, comme vous le savez, on a juste un D ici. Donc, sur la flèche droite, nous avons facile maintenant 0.6. C' est donc ce que nous allons créer pour tous. Donc témoignage pour localiser vos flèches, point d'étape gauche va nous conduire à l'état par défaut, à droite. Tab point va nous conduire au témoignage trois. Plus usé au témoignage trois vont localiser nos flèches. Nous y voilà. Cliquez ici. Tu vas aller au témoignage, ça va nous conduire au témoignage quatre. Et enfin aller à la dernière. Et dans ce dernier, nous allons utiliser les points de terminaison gauche pour passer au précédent, qui va être témoignage trois. Et nous l'avons là. Avant d'aller plus loin, je veux juste vérifier rapidement et voir si nous avons tous ces gaz et les émissions, non ? Alors commençons par celle-là. Alors on l'a fait, comment on a tout ça, ce qui est génial, et ça marche comme c'est la chemise. Vraiment content de ça. Voyons voir, on reste celui-là au vol stationnaire, donc on va arranger ça. Et cela fonctionne comme il se doit, donc tout ça semble bien. Et enfin, regardons ces témoignages. Et ils ont l'air bien. Revenons en arrière, voir pour les lignes donc 32. Et enfin un, ce qui est très bien. Alors réparons rapidement ça. Donc, comme je l'ai dit, nous avons quitté la Toscane ici. Donc destinations, Toscane, nous l'avons laissé aux états d'horreur. Il suffit de cliquer sur l'état par défaut et je peux faire une vérification rapide et voir si j'ai laissé l'un d'entre eux et ils sont aussi bien non. Et enfin, nous devons aller aux destinations de l'état cliqué. Et voyons, les Maldives sont dans la valeur par défaut. Valeur par défaut. Et vous pouvez voir que la Toscane est dans l'horreur ici aussi. Donc, vous devez le changer dans les deux états afin que vous puissiez éviter tout type de. Confusion et toutes sortes de problèmes à l'avenir. Alors voyons ce que nous avons. Nous avons terminé toutes ces sections. Passons maintenant à la discipline. Et ce que je vais faire, c'est faire la même chose pour les catégories de voyages que nous l'avons fait pour toutes ces autres catégories. Je vais simplement les ajuster et m'assurer qu'ils ont six colonnes de large. Et est allé à NIJ Dares, comptons 1, 2, 3, 4, 5, 6. Donc un de plus. 23456. C'est très bien. Et je vais déplacer celui-ci ici et je me suis ajusté à ici. Fondamentalement, comme vous pouvez le voir, la seule chose qui va réellement ajuster est la largeur de l'image, comme ça. Et faisons rapidement le vol stationnaire pour ceux-ci. Je vais donc les sélectionner. Assurez-vous qu'ils sont six. Et je vais m'assurer de revenir à l'état par défaut dans chacun d'entre eux. Comme ça. Cela fonctionne bien, nous avons fini les partenaires, et maintenant traitons de celui-ci afin que nous puissions utiliser les mêmes dimensions que nous l'avons fait auparavant. Donc, je peux aller ici et voir que mon image est de 514 en largeur. Donc, nous allons utiliser ces mêmes paramètres pour cette section ici. Donc image, je peux aller avec 514. Quelque chose n'a pas vraiment fonctionné là. Voyons voir. Peut-être que nous pouvons le faire manuellement même. Alors, voyons, quatre d'entre eux comme ça. Je pense que c'est bon. Et peut-être que nous pouvons même ajuster cela de sorte qu'il s'alignera sur cette ligne de grille, un lac qu'il est juste ici. Laisse-moi vérifier. Et c'est génial. Et une dernière chose que j'ai oublié de faire pour ces sections est d'ajuster les boutons. Ainsi, vous pouvez voir dans ceux-ci, les choses bougent à un rythme beaucoup plus rapide. Allons nous occuper de celui-ci. Je vais cliquer ici et juste mon bouton là, nous l'avons. Et en gros, il les a endettés pour ces sections. Comme je l'ai dit, certains d'entre eux vont être beaucoup plus simples. Certains d'entre eux comme celui-ci vont être beaucoup plus difficiles. Mais avant de passer à celui-ci, je veux double-cliquer sur mon plan de travail, étendu jusqu'au bas pour que je puisse travailler sur mon pied de page. Laissez-moi tout d'abord ajuster ces deux-là. Donc, je vais faire dans cette image semble bien. Et traitons maintenant de l'information du pied de page elle-même. Allons d'abord l'aligner sur notre grille comme ceci. Je vais utiliser mon logo si je peux, et le placer au centre de mon tableau d'art. Je ne sais pas pourquoi ça ne me laisse pas faire ça. Donc, nous allons utiliser un rectangle. Je vais utiliser un rectangle ici. Mais avant que je le fasse, voyons rapidement la distance entre les deux. Donc c'est 100. D' accord ? Donc, nous allons utiliser un rectangle. Vraiment vite. Sélectionnez et un logo. Assurez-vous que le logo est au centre ou un mouvement de notre rectangle. Et maintenant pour l'info du pied de page, on pourrait le positionner à 100 du haut. Comme ça. Il est maintenant à 100. Et traitons maintenant de la navigation principale. Donc, comme vous vous en souvenez, nous avons fait tout ça avec but. Donc, ce que je peux faire est peut-être de les aligner sur la grille de l'espacement de deux, comme il le fait. Et comme ça. Alors je peux faire la même chose pour ceux-là. Alors voyons, peut-être que je peux l'aligner ici et ensuite faire la même chose pour ça, ceci, et ceci. Et peut-être que je pourrais même l'augmenter ici et peut-être mettre ça ici et, et voir ce que nous pouvons faire ici. Donc peut-être juste ici, ça peut rester là et rester là. Donc, il est bien et uniformément espacé. Alors ce que je vais faire ensuite, ces deux proches. Je vais sauter dans mon séparateur de zones ici est simplement l'amener ici, fermer ceci et ensuite travailler sur mon fond appliqué. Donc ce que je vais faire ici, c'est que tout d'abord, réduire l'espacement comme de la saleté. Et puis, par exemple, je peux appeler ces termes peut-être. Voyons voir. Peut-être pourrions-nous y travailler comme ça. Alors voyons, juste là. J' essaie juste de réfléchir à la façon d'ajuster ça. Donc, nous allons effectivement cliquer ici et utiliser le même espacement, disons 40. Ou peut-être quelque chose d'un peu plus grand. Alors peut-être 80. Katie travaille mieux. Alors maintenant, sortons du chemin d'ici. Et nous l'avons là. Nous avons terminé notre pied de page. Maintenant, la dernière chose que je veux faire est de double-cliquer ici et de le fermer en bas. Et maintenant, nous pouvons aller de l'avant et travailler sur cette section juste ici pour les questions et réponses. Donc, la première chose que je vais faire est de le déplacer juste ici et ensuite je dois tous les ajuster pour pouvoir tenir toutes mes informations à l'intérieur. Mais je ne vais pas m'embêter avec ça maintenant. Je vais faire autre chose. Je vais utiliser ma pile, retourner comme ça. Et puis je vais positionner toute la section dans le centralisé me sait sûr que mes données sont au centre, à peu près ici. Et je vais faire ensuite, c'est m'assurer que tous ces éléments sont centrés. Je vais m'assurer que mes deux textes, notre centre aligné comme ça. Et je vais aussi m'assurer de convertir mon texte pour que je puisse l'étendre et remplir le reste de mon espace comme ça. Alors je vais entrer et m'ajuster. Comme ça. Donc, comme je l'ai dit, ce sont ces bits ennuyeux dans cette première étape. Mais plus tard, quand nous passons à d'autres tailles, va être beaucoup plus simple à ajuster parce qu'il va les garder tous comme si vous le voulez, vous pouvez même le faire en une ligne si vous le voulez, mais je vais le garder comme ça. Je veux dire, voyons. On peut peut-être le garder à 60 ans. Je pense que ça va bien se passer. Enfin, essayons de l'ajuster maintenant et de voir si c'est oui, je pense que ça va être bon. Voir osez et troupeau laitier. Et enfin, nous allons travailler sur ce bouton. Positionnons ça comme ça. Et puis comme cette habitude osée. Et enfin, traitons de ça. Je ne vais pas trop le changer pour nous tous. Je vais l'amener en 100, par exemple. Et puis je vais simplement le centrer parce que je ne pense pas qu'il soit nécessaire pour qu'il soit à gauche et à droite ou autre et pour le centrer encore mieux, ce que je peux faire est d'utiliser le centrique. Donc nous allons utiliser les 100 de toute façon de la distance. Assurez-vous que c'est dans un centre. Retirez notre rectangle comme ça, et enfin, déplacez ceci vers le bas. Alors voyons, je peux sauter ici et taper l'impression 100, comme ça, et là on l'a. Maintenant, une dernière chose que je vais faire est de déplacer ça vers le bas. Mais avant de bouger, vérifions rapidement si cela fonctionne. Ça devrait marcher parce qu'on a changé de place. Voyons donc, ça marche et c'est génial parce qu'il pousse le contenu vers le bas, qui est ce que nous voulions en premier lieu. Maintenant, je remarque un problème ici. Vous pouvez voir que dans ce champ ne va pas jusqu'à la ligne. Je vais donc déplacer toute l'entrée 2 ici et voir ce que nous devons faire ensuite. Donc, la saisie de texte, je vais simplement déplacer ceci pour aligner ici. Et maintenant nous l'avons en place parce que je l'ai accidentellement déplacé probablement la fois précédente. Donc je vais simplement étendre cela vers le bas, fermer en bas comme si dans la vache laitière il, nous avons notre page complète. Maintenant, si vous ne voulez pas que cet espacement soit comme ça, parce que nous avons cette somme, cette quantité d'espace ici. Une fois que tout cela est fermé, vous pouvez l'amener à, par exemple, 100 ici si vous le souhaitez. Mais je ne vais pas m'embêter avec ça parce que, comme il l'a dit, je préférerais que tout cela soit cohérent et cohérent , puis qu'il change de place ici. Et Derrida c'est pour ça que j'ai utilisé 150 pour tous. Comme je l'ai dit, vous pouvez faire ce que vous voulez, vous pouvez utiliser ce que vous voulez. Et c'est fondamentalement tout pour cette taille. Dans la vidéo suivante, nous allons passer à la taille suivante. Je vais vous montrer à quoi ressemblera tout ce processus. Ça va être exactement le même que tout ce que je t'ai montré. Que les choses vont réellement changer et aller de l'avant lorsque nous passons à la taille de la tablette. C' est donc ce qui est le plus important dans ce domaine. Et puis finalement, nous allons principalement ajustés pour une taille mobile. Et c'est là qu'il aura l'air le plus différent de toutes ces autres tailles. Comme je l'ai dit, je vous verrai dans la prochaine vidéo où nous allons travailler sur cette prochaine taille. 41. Créer une conception réactive 5: Passons maintenant à cette taille suivante. Et cette taille va en fait contenir quelques changements. Ça ne va pas être trop important comme ça. Il va être là pour la taille de la tablette et surtout pour la taille mobile. Parce que comme je l'ai dit, nous allons supprimer la majorité de ces composants pour les plus petites tailles en raison de l'immobilier de l'écran. Mais pour ces gros appareils, jusqu'à 99 deux, nous allons en fait faire des intérêts futurs, qui vont rendre notre vie beaucoup plus facile plus tard pour tous ces appareils moyens. Donc tout d'abord, ce que je vais faire est de tenir ma touche Alt et de faire glisser ça jusqu'ici, comme ça. Assurez-vous de l'aligner. Ensuite, je vais copier ce texte en haut. Je vais cliquer ici. Et aussi je fais ça juste parce que je sais de quelle taille il est. Plus tard, une fois que je commencerai à exporter ceci à mes développeurs. Donc, quand je clique ici et que vous pouvez voir 1024, donc c'est ce que nous allons faire en premier. Donc 10, 24, comme ça. Ensuite, nous avons encore 12 colonnes. Donc 30, 50, 47. Et ce sont les valeurs, donc 30, 50, et quand entrer 47 ici. Alors allons-y encore une fois. 3050 et 47. Donc, nous l'avons là. Alors maintenant, les premières choses d'abord, allons travailler sur notre première chanson de navigation supérieure et quand sauter à l'intérieur, utiliser mon NAV principal et je vais sauter et aller à mon NAV primaire et aussi utiliser mon flou. Donc je vais aller ici et voir 1024. Donc je vais sauter à l'intérieur de mon flou de navigation primaire. Et pour le duit, utilisez 1024 comme ça. Et puis je vais ouvrir ça pour mon secondaire. Maintenant. Je peux toujours l'utiliser tel qu'il est. Je peux l'amener ici. Et je peux aussi, par exemple, les abaisser à 20 peut-être. Donc quelque chose comme ça. Je tiens le quart comme ça pour que nous ayons juste un peu plus d'espace pour notre logo, que nous allons réellement déplacer ici. Aussi pour tous ces, sélectionnons-les. Je vais donc sélectionner mon sélecteur aussi pour qu'il se déplace avec notre texte. Bien-être hivernal, croisières individuelles animal fait. Déplaçons-les ici. Alors ce que je vais faire, c'est nous amener ici. Et je vais essayer de le faire ce que j'ai fait précédemment. Alors sélectionnez-les tous, distribuez-les comme ça. Et il fonctionne toujours avec cette taille de police soviétique doivent changer les sites de police à partir de maintenant. Mais nous allons le changer un peu plus tard. Je vais juste pointer mon logo ici. Donc, la première chose que nous allons faire est d'étendre notre navigation primaire et de flou jusqu'ici, par exemple, 10, 76, afin que nous puissions facilement voir ce que nous faisons ici. Commençons par notre destination. Donc je vais les ouvrir et les cacher et les amener ici et voyons où nous en sommes avec eux. Donc, nous en sommes à 42. Peut-être que je peux utiliser 60. Et cette fois, je pense que ça marche bien. Et ce que je vais faire, c'est la même chose qu'on l'a fait auparavant. Donc je vais sauter dans mes destinations. Et voyons, j'ai l'option automatique ici, mais je vais juste vérifier lesquelles fonctionnent mieux. Donc jusqu'à ce que ça fonctionne bien. Alors je vais faire la même chose pour l'Asie. Alors. Assez difficile parfois avec certains d'entre eux, mais comme son vous montre dans une taille précédente, vous pouvez le faire manuellement si vous le souhaitez, surtout un là-bas pour la dette de l'Amérique et enfin pour les Amériques. Faisons-le ici. C' est donc le problème. Nous allons courir dans une chanson, va les laisser quelque part ici, par exemple, juste vu que le grossièrement aligné au sommet, je peux toujours faire quelque chose comme ça, puis sauter dans le référencement et je peux le déplacer manuellement pour entendre leur code. Maintenant que nous avons notre destination est, je vais les cacher. Cliquez ici. Je ramène mon hiver. Et le truc avec ceci est ce que vous allez faire en fait, c'est de se débarrasser de cette illustration. Parce que les illustrations osent sur les plus grandes tailles d'écran de sorte que vous avez tous cet écran immobilier et vous pouvez l'utiliser beaucoup plus facilement. Mais lorsque vous descendez à ces tailles d'écran inférieures, vous n'avez pas besoin d'utiliser tous ces différents éléments. Donc, fondamentalement, ce que je vais faire est de sauter à l'intérieur, supprimer mon illustration d'hiver, puis sauter à l'intérieur de mon texte. Je vais centrer l'aération de l'alignement. Je vais cliquer ici pour que je puisse les aligner tous comme ça. Et je vais aussi sélectionner mon bouton, assurer que tout est au centre, puis simplement apporter mon texte juste ici au centre, comme ça. Alors comme avant. Je vais sauter à l'intérieur et régler mon bouton pour que je le positionne ici. Et voyons, 2, 4, je pense que c'est assez bon. Il l'est. Et faites la même chose pour le vol stationnaire. Mon père est Derek 0. Donc maintenant nous avons le même espacement, nous avons les mêmes éléments, nous avons le même texte juste sans l'illustration elle-même. Ce que vous pouvez faire est en fait vous pouvez ajuster la hauteur si vous le souhaitez. Vous pouvez positionner et ce texte est légèrement plus bas si vous le souhaitez. Mais si je frappe l'aperçu juste très vite, vous pouvez voir comment ça ressemble à une scie. J' aime toujours garder mon texte juste là-haut parce qu'il garde l'attention du spectateur et du visiteur beaucoup plus. Lorsque le texte est plus haut vers le haut, puis les gains vers le bas parce qu'alors ils peuvent concentrer leurs efforts ici. Et nous allons toujours garder nos effets de vol stationnaire parce que nous sommes toujours une largeur de la souris juste ici, parce que ce sont toujours des tailles de bureau. Alors abaissons notre hiver. Allons au Wellness pour le dévoiler et faire la même chose. Supprimer, illustration, texte positionné, assurez-vous qu'il est centré, aligner, tout sélectionner. Assurez-vous qu'il est au centre. Et puis il suffit d'apporter un texte au centre juste là, troupeau laitier. Et faites la même chose pour les boutons. Je vais l'aligner ici. Et quand être sûr d'utiliser pour comme ça et utiliser pour lambdas toujours aller de gauche à droite avec ces boutons afin que vous n' ayez aucun de ces pépins et erreurs. Et en passant, pendant que j'enregistrais cette classe, Adobe XD lance une mise à jour afin que vous ne puissiez pas voir le. Menu hamburger juste ici, mais vous avez toutes ces options juste ici. Donc, au lieu de hamburger et puis toutes ces autres options, C'est la même chose comme il est sur un Mac. Donc, fondamentalement, vous pouvez passer le curseur ici et utiliser l'une de ces options si vous le souhaitez. Les deux options avec le bouton droit de la souris fonctionnent toujours telles quelles. l'équipe Adobe XD lance ces mises à jour de temps à autre. Et fondamentalement parfois il y a de petits comme celui-ci, mais parfois ils sont un peu plus grands et un peu plus grands. Donc, il suffit de garder vos yeux épluchés pour ces mises à jour de sorte que vous exécutez toujours à jour. Et je vous recommande toujours de mettre à jour votre XD chaque fois que vous le pouvez, ou si vous l'avez, vous pouvez le configurer pour qu'il soit mis à jour automatiquement. Si vous disposez d'un abonnement Cloud, si vous n'utilisez pas la version gratuite de XD. Bon, maintenant que cet individu est fini, j'ai des croisières et demie sur nous à réparer. Permettez-moi donc de supprimer mon illustration de croisières. Je vais m'assurer que tous ces éléments sont centrés. C' est centré. Je vais apporter mon texte jusqu'ici, comme ça. Et je vais réparer mon bouton ici et en utiliser quatre. Comme ça, abritent leurs habitudes. Et je vais le cacher. Et ensuite travailler avec la section About Us. Maintenant, pour cette section À propos de nous, ce que vous pouvez faire en fait, c'est que je vais faire la même chose pour le texte. Donc, je vais les sélectionner tous, assurer qu'ils sont alignés au centre, assurez-vous que le bouton est au centre aussi. Et je vais apporter mon texte jusqu'à ce bout ici, comme ça. Donc essentiellement des voitures endettées, Voyons voir, j'ai quatre d'entre elles vides fondamentalement. Ce que je peux faire, c'est peut-être le réduire un peu plus. Alors voyons. Je vais tout d'abord cacher ma carte et voir que ce texte fait réellement un problème. Donc, ce que je peux faire est simplement de regrouper mes textes comme ça et de laisser les quatre colonnes vides pour mon, pour ma carte. Mais avant que je le fasse, nous avons 40 ici, donc nous allons juste déplacer notre bouton pour les pixels vers le bas. Mais avant de le faire une fois de plus, nous allons nous assurer qu'il a quatre colonnes de large, comme ceci. Et comme ça. Alors je vais bouger avec 40 maintenant, voyons ça comme ça. Et enfin, je vais juste m'assurer que tout est centré comme ça. Maintenant, ramenons nos informations de carte. Et fondamentalement ce que je vais faire ici parce que nous avons cette pile. Si vous vous souvenez, je vais sauter dans mon groupe, nous avons la pile disponible. Et je vais essentiellement activer ma pile une fois de plus ici afin que nous ayons essentiellement deux options de pile. Je vais amener ça à gauche comme ça. Et voyons, d'ici à là, nous en avons 20. Pour que nous puissions le faire aussi. Je peux taper 20 ici. Donc nous avons 24 ces deux et 24 ça en bas. Et enfin pour la carte, je vais juste double-cliquer à l'intérieur et le positionnement pour être à quatre comme ça et ajuster ma carte P90 aller quelque part par ici. Je pense que c'est bien. Et nous l'avons là. C' est notre navigation terminée. Mais je peux aussi faire est peut-être de pousser un peu notre texte. Il suffit donc de le déplacer jusqu'à ce qu'il s'aligne mieux avec notre ligne de grille , par exemple, juste ici. Juste pour que nous ayons un peu plus d'espace entre notre carte et notre texte. Et on n'enfreint pas les règles, mais, en fait, on en remonte légèrement à gauche, comme ça. Et leur chapeau. Ce qu'il me reste à faire, c'est de faire la même chose. Donc, je dois essentiellement copier et coller tous ces éléments à l'intérieur. Mais les navigations ou devraient réellement fonctionner parce que je n'ai rien fait d'autre avec cette navigation supérieure. Fondamentalement, je peux simplement les réorganiser au haut solide C. Voyons voir, je peux utiliser un logo secondaire. Et laissez-moi les copier tous sauf pour le navigation primaire floue. Donc ça va être à 1024, 10, 76. Alors copions-les tous. Moi, et pour ce premier, je vais ramener mon flou à un, comme ça. Et dans cet état par défaut, Voyons voir, nous allons réellement cacher le sélecteur. Donc, ce sera au 0 I que nous allons aller aux nations. Cela, et si vous voulez garder vos animations, vous pouvez fondamentalement tout ajuster. Encore une fois, comme je l'ai dit, mais je ne vais pas m'embêter avec ça. Je vais les supprimer tous et refaire les animations plus tard parce que je trouve que c'est beaucoup plus simple. Donc 10 à 24 et il le fait à 10, 80, ce qui est très bien. Donc essentiellement les destinations et je vais montrer mes destinations et nous allons utiliser toutes ces autres, les ramener à 20. Allez à la base d'hiver 10, tout cela, puis allez-y et retirez tout sauf pour le flou primaire maintenant. Donc je vais l'amener à 24 comme ça. Je vais, voyons, apporter mon contenu hivernal. Et maintenant les destinations et toutes ces autres qui sont allés être à 20 ans. Et je vais sauter dans mon sélecteur plus qui a eu lieu ici. Cela prend beaucoup de temps. Mais si vous voulez tout faire correctement, alors vous devez vraiment sauter et faire toutes ces choses. Supprimons donc tout cela en se basant sur les nouvelles informations. Ça va être un bien-être. Donc ceci, ceci, et voyons. Toutes ces autres rangées seront 20. Selector va passer au bien-être comme ça. Voyons voir. Et je vais simplement le déplacer ici, apporter mon contenu bien-être, montrer comme ça. Et je vais finir avec cet individu et ensuite je vais faire une pause pour que je puisse faire les éléments de navigation. Ils peuvent faire les animations sans trop vous ennuyer. Voyons donc, nous sommes dans des états individuels ou nous allons les cacher tous à 20 sauf pour l'individu. Je vais utiliser ma position de sélecteur juste ici. Allez, ici, nous apportons mon contenu individuel et je vais simplement ajuster mon sélecteur jusqu'à ce qu'il s'adapte. Et voir ici pour apporter mon panneau de couches et mon troupeau laitier. Et ici, nous devons ajuster ça à Dan 24, d'accord. Alors passons aux croisières. Supprimez tout, en le basant sur. Donc, tout ça va être 20 sélecteur et amenons des croisières. Fondamentalement, ce sélecteur est le fastidieux, plus fastidieux de tous, parce que vous devez l'ajuster, le déplacer, mais tout en faveur d'une bonne animation. Et finissons par les finir avec nous. Donc je vais tous les enlever. Tout d'abord, cela va être 1024 et il est encouru pour gardé dans les croisières précédentes ? Je pense. Alors Voyons voir, avant maintenant flou. Oui, donc 1024. Et vous pouvez rapidement sauter entre tous ces états et voir, par exemple, pour l'individu, vous pouvez voir si vous l'avez fait pour le bien-être pour tous les solides aller à propos de nous et nous allons travailler là-dessus. Donc, à propos de nous, je vais les sélectionner tous et apporter le nouveau 220, utiliser mon sélecteur. Plus étaient à écrire ici, apportant mon contenu de tâche sur. Amenez ça à 1024, c'est bon. Et enfin travailler sur notre sélecteur. Comme ça. Et on y va. C' est tellement maintenant que tous nos états, notre fini, ce que je vais faire est fondamentalement sauter ici, aller au prototype et voir. Lorsque je clique sur le premier, j'ai tapé auto animate, facilité dans 0.4 secondes. Donc c'est celui que je vais utiliser dans tous ces autres états. Allons donc aux destinations. Vous pouvez voir qu'il a gardé tout cela et tout cela, ce qui est génial, mais il n'a pas gardé tous ces autres. Alors allons voir ici. Les destinations ne seront donc pas sélectionnées un hiver. Cliquez, appuyez sur, animer automatiquement. On va aller à l'hiver, à l'entrée , à la sortie et à 0,4 seconde. Et fondamentalement maintenant qu'Adobe XD s'est souvenu, ou que vous devez faire, est simplement d'aller de l'avant et de les connecter tous. Donc c'est individuel, ce sont des croisières IDAT sur nous, et c'est tout. Et enfin pour le logo, vous pouvez maintenant cliquer sur le logo lui-même. Vous n'avez pas vraiment besoin de cliquer sur le logo à ce stade parce que c' est le PNG de toute façon va revenir à l'état par défaut. Donc je vais mettre la vidéo en pause pendant que je fais tous ces états et puis revenir. Ok, maintenant c'est terminé. Passons à la section suivante, qui sera évidemment notre section héros. Donc, nous allons travailler sur ce prochain n. Fondamentalement la seule chose que nous allons faire. Mais avant que je le fasse, laissez-moi rapidement bouger ce fond maintenant juste ici pour que ça ne nous distraire pas trop. La seule chose que nous allons faire, c'est de bouger ces flèches. Donc, je vais aller au point de l'onglet flèche gauche, et je vais les déplacer juste ici. Comme ça. Et je vais aussi le faire ici. Positionnez-le sur le bord même comme ceci. Et je vais déplacer notre texte au centre. Allons-y avec le bouton Hero et le masque de texte. Assurez-vous qu'ils sont dans un centre. Et enfin, ce que je vais faire avec mon bouton est étendu deux ici et deux ici. Et c'est fondamentalement tout. Vous pouvez ajuster toutes ces images bien sûr, mais je pense que celle-ci fonctionne bien. Celui-ci fonctionne toujours bien. Et voyons, ce troisième fonctionne assez bien en fait. Donc nous allons laisser toutes ces images. Donc, une fois de plus, cela va être quatre pour la valeur par défaut et pour le vol stationnaire comme ceci. Et les flèches et le texte vont venir au milieu. Donc, sans aucune autre modification à eux, sont juste va simplement les aligner tous à l'expéditeur. Comme ça. Encore une fois, assurez-vous que mon bouton a quatre colonnes de large, comme ça. Ainsi, vous pouvez voir parfois avec ces états, vous pouvez facilement les ajuster. Vous pouvez faire toutes ces choses beaucoup plus facilement. Voyons donc, c'est à la ligne qui est bien et une droite simplement ajustée. Où est-il ? Ici ? Il l'est. Comme ça. Donc tu peux laisser tes images pendre comme je le fais ici. Ou vous pouvez tout simplement les ramener tous comme si vous le voulez. Donc, faisons juste cela pour tous les états parce que cela ne modifie pas trop l'image. Donc tout ce que je vois ici, c'est que vous pouvez faire ce que vous voulez, parce que quand vous exporterez cette image, elle sera à la largeur de l'aéroport de toute façon. Donc, ça n'a pas vraiment d'importance. C' est juste pour que ça ne te distraire pas pendant que tu travailles. Voyons donc, les flèches du centre de jardin corail. Bougez-les comme ça. Laisse-moi déplacer ma deuxième flèche ici. Et si tu penses que parfois je vais trop vite, c'est juste à cause de l'expérience. Tout cela devient une sorte de mémoire musculaire. Donc, vous commencez à apprendre à connaître tous ces raccourcis. Et vous commencez évidemment à les apprendre une fois que vous commencez à travailler. Et évidemment, plus vous avez de projets, plus il sera facile de s'adapter à tous ces changements. Ainsi, par exemple, ce nouveau changement qui vient d'apporter dans cette nouvelle version de XD. Je n'ai même pas remarqué que quelqu'un l'a dit sur Twitter et j'ai juste vérifié très rapidement et ce n'est rien de trop important vraiment. Alors allons-y et vérifions-le. Voyez si nous avons toutes ces animations. Et maintenant vous pouvez voir, contrairement à ce menu en haut, nous avons gardé toutes ces animations parce que nous avons simplement ajusté ce que nous avions auparavant et simplement le déplacer en place comme ça. Donc toutes ces animations sont restées exactement les mêmes. Alors qu'avec celui-ci. Lorsque je clique ici, vous pouvez voir que l'animation fonctionne toujours. Mais parce que nous avons ajusté le contenu autant que je l'ai expliqué, nous avons dû les ajuster alors que tous ces éléments au sommet fonctionnent toujours comme ils le devraient. Parce que, comme je l'ai dit, nous rapprochons juste un peu le contenu en utilisant ces piles. Maintenant, enfin, allons de l'avant et travaillons sur cette navigation de fond. Donc, ce que nous pouvons faire ici est, par exemple, les États-Unis 30 d'entre eux et juste utiliser deux pour le bouton. Laisse-moi te montrer ce que je veux dire. Je vais apporter cet arrière-plan ici, assurer qu'il est positionné ici à gauche comme il l'est. Alors je vais utiliser mon bouton. Je vais le positionner ici et taper simplement mensonge. Je ne vais pas utiliser de filtres. Et puis je vais utiliser mon bouton et simplement le déplacer ici. Laissez-moi cacher leur barre de recherche pour que vous puissiez voir à quoi ressemblera le bouton. Donc nous sommes vraiment petits et assez petits, mais il va faire son travail comme il se doit. Alors appliquez et ajustez simplement notre bouton ici. Donc, en passant d'un état à l'autre, vous pouvez voir ce que nous avons. Donc, nous allons maintenant cacher la recherche par exemple. Et je l'ai fait juste pour que nous puissions avoir, par exemple, trois colonnes pour chacune d'elles. Donc, je vais utiliser mes destinations. Et pour ce premier état, je vais étendre mon BG jusqu'ici. Donc ça s'aligne avec celui-ci. Je vais également utiliser ma position de diviseur ici et utiliser mon masque et simplement l'étendre jusqu'ici. Et fondamentalement, la seule chose que vous allez changer ici, c'est ceci. Alors faisons la même chose ici. Donc destinations et masque, nous pouvons réellement sélectionner les deux en même temps et position ici. Donc, nous allons utiliser la destination et l'alignons avec notre ligne de grille. Comme si ce masque allait aller juste un peu dehors. Et enfin, nous avons ce séparateur, qui va juste aller ici. Et ce que vous pouvez faire est d'élargir ces lignes de contenu si vous le voulez, mais je vais juste les garder comme ils sont génotype. Réglons-le aussi. Donc je vais le déplacer ici pour qu'il s'aligne correctement. Je vais aussi le faire de même pour leurs fonctions. Alors 123, comme ça. Voyons voir. Donc, voyons pour le type, nous allons le changer en fait et la qualité juste taper comme ceci. Et puis nous allons en fait utiliser deux lignes de grille juste pour que nous ayons un peu plus d'espace pour la recherche. Et ajustons-le. Donc nous allons le faire adhérer et aussi déplacer le séparateur en même temps jusqu'ici. Ajustez le masque et juste un peu à ici. Et peut-être que nous pouvons ajuster et le quantum ci-dessous. Pour que je puisse utiliser mon séparateur et bouger. Les lignes sont juste là, je pense, et ça va se passer. Mais vous pouvez voir qu'ici nous avons un voyage individuel qui va juste ici. Donc je vais enlever ça. Je vais enlever ça. Donc ça se passe individuel. Peut-être que je peux même supprimer cette croisière pour utiliser le type. On peut les enlever pour tous comme ça. Et ce que je vais faire est simplement d'utiliser la copie pour tous d'entre eux. Alors voyons. Je vais simplement utiliser la copie pour celui-ci et les ajuster plus tard dans notre état cliqué. Donc, je vais l'ouvrir basé aux États-Unis. Déplacez-le juste ici. Alors voyons ici. Si je peux, il l'a laissé là-dedans. Alors supprimons. Va cliquer ici et voir que c'est toujours des pâtes c'est tout au haut ? Je ne sais pas pourquoi il continue à faire ça. Donc, en fait, parce que vous devez les avoir au même endroit pour que cette animation fonctionne réellement. Travaillons vite là-dessus et je vais vous montrer un moyen de contourner. Donc tapez comme de la saleté, je vais utiliser mon diviseur BG, les ai déplacés ici. Je vais utiliser mon masque, le déplacer juste ici. Et je vais copier ça. Accédez à l'état par défaut, ouvrez-le et appuyez sur Coller. Donc maintenant, c'est exactement au même endroit que dans le second état. Alors maintenant que je les appelle et quand un coup à mon aperçu, vous allez voir comment cela fonctionne. Donc tapez, vous pouvez cliquer et vous pouvez voir qu'il reste exactement au même endroit. Maintenant, parce que nous avons cet espace, ce que nous pouvons réellement faire est peut-être de pousser tout notre contenu ici si vous le voulez. Cela va nous donner beaucoup plus d'espace ici, parce qu'avec ces activités, nous allons avoir fondamentalement la même chose. Donc c'est à vous de décider si vous voulez les remplir, mais je vais juste les laisser comme si elles étaient ici. Je pense que ça va marcher très bien. Donc pour les activités, je vais le déplacer ici. Juste là. Et nous allons voir pour les activités, nous pouvons aussi avoir. Voyons voir. Bg et notre séparateur peuvent aller ici par exemple, je pense que ça va bien marcher, et ça va aller ici. Voyons voir, je ne pense pas qu'on ait besoin de faire trop de changements ici. Je ne pense pas qu'on puisse avoir besoin de changer du tout ici, je pense que c'est bon. Et enfin, pour la recherche, travaillons dessus. Donc ce que je vais faire, c'est aligner ma boîte ici. Et puis je vais apporter mon état par défaut. Je vais apporter ça ici. Et je vais simplement utiliser Search parce que je n'ai pas besoin d'utiliser l'aération. Je vais ramener ça à 100. Positionnez-le ici. Assurez-vous qu'il est 20, comme ça, ramenez-le à 0. Ensuite, je vais aller à l'état cliqué. Et voyons à l'intérieur de l'état cliqué, je peux l'amener ici. Donc, l'icône de fermeture CBG, je peux simplement déplacer deux d'entre eux ici, et je peux simplement taper. Ou encore mieux, nous pouvons utiliser la recherche de voyages ici, puis la recherche dans l'état par défaut. Voyons s'ils fonctionnent. Je pense que ça devrait marcher. Quelque chose ne va pas juste ici. Je ne sais pas pourquoi il fait ça. Comme vous pouvez le voir, ça continue de bouger. Donc, voyons dans l'état par défaut je vais le déplacer ici. Et je vais ajuster manuellement mon BGP à ici. D' accord ? Et maintenant, passons à l'état cliqué. Et je vais ajuster ça, le positionner comme ça. Et puis utilisez juste mon BGN de recherche, mon icône de vêtements, et déplacez-les juste ici. Alors maintenant, voyons si ça marche. C' est le cas. Vous ne pouvez donc pas simplement déplacer le champ. Vous devez ajuster manuellement les éléments à l'intérieur. Donc, le XD connaît réellement les distances entre tous vos objets à l'intérieur. Alors maintenant, quand je clique ici, vous pouvez voir qu'il est dit recherche de voyages. Alors qu'ici, il dit juste que la recherche s'applique toujours fonctionne. Et si nous cliquons sur les activités, elles ont l'air bien. Le type a l'air bien. Encore une fois, si vous voulez, vous pouvez simplement étendre ceci à ici. Si tu veux. Destinations, ils ont bien fonctionné. Donc, c'est à vous de décider. Maintenant, allons de l'avant et passons à la section suivante. Et je vais vous montrer ce qu'on va faire ici. Tout d'abord, il suffit de l'aligner sur notre grille. Assurez-vous qu'il est aligné. Ce que je vais faire ici, c'est d'abord aligner notre texte au centre comme ça. Fondamentalement, je vais créer deux états différents pour ces cartes. Donc, dans celui-ci, nous allons utiliser essentiellement des onglets. Donc, le premier onglet va être des offres de première minute et le deuxième onglet va être des offres de dernière minute. Donc ce que je vais faire avec celui-ci, c'est m'assurer qu'il fait six colonnes de large. Donc 1, 2, 3, 4, 5, 6. Donc ça va aller juste ici. Et puis je vais le laisser parce que ce sera le premier état. Je vais cliquer et utiliser le gris clair pour indiquer que celui-ci est sélectionné. Donc, parce que cette vidéo dure un peu plus longtemps, maintenant, c'est presque une demi-heure. Arrêtons ça ici. Et puis dans le prochain, je vais revenir et vous expliquer comment pouvez-vous créer essentiellement deux onglets pour ces sections. Ainsi, les utilisateurs peuvent basculer entre la première et la dernière minute, puis vous pouvez économiser de l'espace sur eux. 42. Créer une conception réactive 6: Allons-y maintenant et faisons-le. Et pour ce faire, ce que je vais faire, c'est en fait les dégrouper. Donc je vais dégrouper cette première minute. Je vais dégrouper cette dernière minute. Et je vais utiliser les offres de dernière minute dans les offres première minute et un groupe eux comme ça. Je vais les appeler onglets par exemple, parce que c'est ce qu'ils sont. Et puis ces cartes, nous allons ajuster une par une. Donc, d'abord, traitons avec ceux-ci juste ici. Alors faisons la première chose pour nous de les aligner ici à gauche, qu'ils ne soient pas distrayants. Comme ça. Et enfin, pour les boutons, ce que nous allons faire, c'est d'abord s'occuper de ça. Alors voyons deux, nous pouvons utiliser quatre colonnes. Donc, ils sont les mêmes que tous ces autres boutons comme ça. Et utilisons-le pour sur celui-ci aussi. Voyons donc voir 2, 4 ici. Comme ça. Et ce que je vais faire, c'est aligner mes deux boutons ici. Donc, quand les offres de première minute sont affichées, ce bouton va montrer la mienne. Mais lorsque les dernières minutes sont cliquées, cela va s'afficher, donc fondamentalement deux boutons au même endroit. Voyons voir, je vais les aligner comme ça. Et appelons-les comme ça. Et voyons voir. Je vais simplement cacher ces trois pour l'instant parce qu'on n'en a pas besoin pour l'instant. Tout d'abord, nous allons travailler sur notre chanson de fond, aller tous les ouvrir et aller l'amener ici. Et puis je vais l'amener ici. Et aussi je vais utiliser ce dernier et l'amener ici. Alors ce que je vais faire est d'augmenter la taille de notre image. Et peut-être que je peux utiliser cinq colonnes pour la largeur de l'image. Et déplacons tout ce contenu ici, par exemple. Voyons donc 1, 2, 3, 4, 5. C' est très bien. Et je pense que la position de l'image est assez bonne comme elle est ici. Alors maintenant, ramenons le contenu. Je vais le déplacer ici. Tout d'abord, traitons de celui-là. Donc je vais utiliser cette pile. Et voyons Aiken augmenter l'espacement à, je ne sais pas, quelque chose d'assez énorme. Voyons voir En fait, nous pouvons l'augmenter manuellement et ensuite voir où cela correspond. Par exemple, positionnons cette icône de bus pour atteindre cette ligne de grille. Donc quelque chose comme ça. Je pense que ça marche bien. Ensuite, allons à nos analystes de diviseurs étendus à cette ligne de grille comme ça, et utilisons l'autre aussi. Mais ramène-le pour qu'il soit 20, comme ça. Et puis je vais sélectionner ces deux positionnés juste ici. Et puis je vais utiliser Shift et la flèche du bas. Donc 1, 2. Et je vais apporter ça. Pour entendre. Donc ils alignent le quart 12 pour que je puisse les ramener. Et puis je peux apporter mon image sur le bord inférieur de notre carte, qui est juste ici et là nous l'avons. Maintenant, nous avons une option complètement différente, design complètement différent pour la même carte. Donc ce que je vais faire est exactement la même chose. Donc je vais les sélectionner tous, frapper Contrôle C, aller à l'état d'horreur, contrôle QED V, puis sauter à l'intérieur et les tuer tous comme ça. Ensuite, ce que je vais faire est de double-cliquer sur mon image, augmenter mon image. Je vais ouvrir mon masque comme ça. Et je vais cliquer sur mon arrière-plan. Cliquez ici, cliquez sur le huit, comme ça. Et troupeau laitier. Maintenant, fondamentalement, le même processus commence. Vous devez copier et coller tous ces éléments. Mais avant nous, voyons, nous avons 40 entre ces deux-là. Alors amenons-les ici. Et tout d'abord, ajustons la hauteur pour que la hauteur soit 387. Donc, pour cela, je vais cliquer à l'intérieur. La hauteur va être de trois, 87 pour cent sont. Et je vais sauter ici. La hauteur va reculer 8, 7, comme ça. Et puis ajustez simplement mon image à la nouvelle hauteur. Je vais faire la même chose ici. Donc 387, c'est vrai, ça, et nous l'avons là. Alors maintenant, je vais mettre la vidéo en pause une fois de plus et travailler sur ceux-ci. Donc, comme je l'ai dit, vous dérangez trop avec tous ces détails et vous ne vous ennuyez pas en me regardant les ajuster tous comme ça. Et je reviendrai une fois que j'ai fini DC-3 et aussi ces trois ici que j'ai cachés. Et puis je vais montrer comment nous pouvons créer des animations entre eux. Et maintenant que je les ai terminés, laissez-moi vous montrer comment les créer. Mais avant ça, laissez-moi vous montrer rapidement. Donc, ici, nous avons hover par défaut. Et quand je les cache, vous verrez qu'on a Paris. Donc ici par défaut et planer, et nous avons ces boutons et la distance est de 80, alors qu'entre toutes ces voitures la distance est de 40. Alors laissez-moi apporter ces 3 d'abord, et puis je vais sélectionner ces trois derniers qui sont derrière ces trois, appuyez sur 0 sur mon clavier à deux fois pour qu'il puisse baisser, vous êtes fondamentalement à 0. Aussi, je peux aller à mes boutons et pour les offres de dernière minute, qui se trouve derrière ces offres de première minute, je vais aussi abaisser l'opacité à 0. Je vais garder ça pour être gris, garder ça pour être bleu. Et ce que je vais faire, c'est la qualité, par exemple, des offres spéciales. Et voyons des offres spéciales. Voyons voir de gros périphériques frapper le contrôle K pour créer un composant de cette section entière. Mais c'est juste avant qu'on le fasse. Voyons gada et revenons à l'état par défaut. C' est donc ce que notre état par défaut est pour ce composant entier. Donc je vais créer un nouvel état et appeler la mort nouvel état. Une offre de dernière minute. Cela, puis pour les offres de dernière minute, évidemment, nous allons créer les différentes choses. Donc ça va être ce gris clair. Ça va être un bleu principal. Nous allons cacher ces trois premiers. Donc double-clic sont 0, Qi. Et aussi nous allons cacher ce bouton, montrer ce bouton ou pour la dernière minute. Et nous allons montrer ces trois. Encore une fois. Enfin, nous allons passer à l'état par défaut, utiliser notre fonctionnalité de prototypage. Cliquez sur nos offres de dernière minute. Cliquez dessus. Appuyez sur auto, animer, facile maintenant 0.6 par exemple. Et nous pouvons aller à l'état des offres de dernière minute. Ensuite, nous pouvons changer les états ici, double-cliquez ici, choisissez les offres de première minute, cliquez dessus et aller à l'état par défaut 0.6, facile et out et auto animation. Allons à l'état par défaut et appuyez sur l'aperçu, juste pour que nous puissions voir à quoi cela ressemble. Laisse-moi retourner ici. Vous pouvez donc voir que ceux-ci fonctionnent toujours et que le zoom sur les entités fonctionne toujours. Cela fonctionne toujours très bien. Donc, quand je clique sur Nos offres de dernière minute, vous pouvez voir qu'il nous faut entendre la première minute ou deux ici. Encore une fois, toutes les premières minutes. Cliquez ici et toutes les offres de dernière minute. Donc, nous l'avons là. C' est la section n. Maintenant passons à cette section vidéo. Parce que nous sommes toujours dans une pile pour tout ce contenu. Vous pouvez voir quand un taux élevé 150, 150. Pour la vidéo elle-même, je peux l'abaisser jusqu'ici. Et ce que je peux aussi faire, c'est apporter ma vidéo parce que je n'ai pas besoin qu'elle soit aussi grande sur cette petite taille. Donc, par exemple, quelque chose comme ça. Mais comme vous le voyez, Stack est cette intelligence pour qu'elle garde l'espacement entre eux. Tout d'abord, permettez-moi d'aligner toute cette section ici comme ça. Et je vais faire, c'est apporter mon bouton ici et m'assurer qu'il fait quatre colonnes de large, planer juste là. Et quand j'étais un vent à faire, c'est cliquer sur mes flèches et les amener au bord, juste là. Ensuite, je vais utiliser mes villes et les aligner sur la grille comme ça. Et c'est juste apporter ça tout le chemin. Donc Cities, je vais les aligner sur la ligne de grille comme ça. Et puis je peux apporter ça et le fermer ici. Et aussi de ce côté droit, je vais faire la même chose pour ici. Donc, fondamentalement, ce que nous pouvons faire ici est exactement la même chose. On va juste ajuster ces cartes. Et voyons, nous en avons six, ce qui est très bien. Et faisons la même chose. Donc je vais utiliser ces trois, les amener tous ici, puis les cacher pour qu'ils puissent travailler sur ces trois et ensuite simplement faire les mêmes ajustements à ceux-ci. Donc, ce que nous allons faire ici est fondamentalement assez simple. Ce que nous avons sont ceux-ci et nous devons les ajuster individuellement comme nous l'avons fait pour tous à cause de ces séparateurs. Maintenant, ce que je peux faire pour cela, c'est que je peux me débarrasser de ces diviseurs et ensuite le contenu va évoluer beaucoup plus. Italie. Laissez-moi vous montrer cette option. Donc maintenant, lorsque je clique sur Mon Paris, vous pouvez voir que le contenu est beaucoup plus évolutif. Mais nous avons toujours ce problème que nous pouvons résoudre en alignant simplement ceci, puis en cliquant ici , puis en abaissant notre distance entre ceux-ci si nous le voulons. Alors voyons comment on peut faire ça ? Ce que je vais faire ici, c'est, Revenons à la mise en page précédente avec nos diviseurs. Ce que je vais faire ici, c'est de me débarrasser de ce meurtre de leur icône, qui va nous donner beaucoup plus d'espace. Et il va nous permettre beaucoup libre, plus libre ou mise en page à nos sections. Alors amenons la flèche et la carte de destination et l'image 24 colonnes. Encore une fois comme ça. Ensuite, je vais sauter à l'intérieur de mon milieu et ensuite simplement apporter ce contenu quelque part par ici. Enfin, je vais utiliser un de mes séparateurs et maintenir ma touche de changement jusqu'à ici. Et 262 est la taille. Donc 262, parfois ça va marcher, parfois ce n'est pas de plaidoyer ou avoir un tas de ces problèmes qu'ils n'ont pas normalement. Je ne savais pas vraiment ce qui s'est passé. Ont-ils lancé une mise à jour que cela ne fonctionnera pas ou Zinedine que je ne sais pas. Mais ça n'a pas d'importance pour ça. Ce que vous pouvez faire, c'est vous pouvez l'abaisser comme expliqué dans l'une des vidéos précédentes. Donc, vous pouvez mettre tout cela dans une pile une fois de plus. Alors appuyez sur Control G et mettez-le dans une pile. Ensuite, cliquez ici et ajustez simplement l'image afin que vous puissiez amener ce chemin quantique si vous le souhaitez. Tu peux le faire si tu veux. Mais je ne sais pas. Voyons quelque chose comme ça. Donc la hauteur peut être quelque part autour de 200 matières ni peut-être que c'est bon. Oui, faisons-le aménagé. Alors laissez la hauteur b à 100, et mettons tout cela dans une pile. Donc ce que je vais faire, c'est de sauver ici et de revenir quand je les aurai tous terminés. Mais avant que je le fasse, laissez-moi sauter dans mon horreur et vous montrer à quoi ça pourrait ressembler. Donc fondamentalement, avec le vol stationnaire, tout ce que nous avons fait jusqu'à présent va être exactement le même, mais avec le vol stationnaire, cette image va aussi flotter, va également zoomer un peu. Vous devez donc l'ajuster comme précédemment pour l'état par défaut et la date de survol des morts. C' est ce qu'on va faire maintenant. Alors allons-y vite. Dans notre état par défaut, pourrait critères Contrôle C, aller à notre état d'horreur, cliquez ici, puis Contrôle V. Sélectionnez tous nos autres contenus, puis laissez-moi vérifier ici. Donc je pense, oui, c'est huit. Donc, en voyant comme tous ces autres ici pour supprimer dessus, et je vais m'assurer que je double-clique, zoomer ici très rapidement. Puis ouvrez, mon masque, étendu à ici. Cliquez ici. Amenez cela à huit une fois de plus et troupeau laitier. Donc maintenant, si je change d'une ville à l'autre, vous pouvez voir à quoi ça ressemble. Maintenant, évidemment, tout ce processus est incroyablement fastidieux, comme vous pouvez probablement le dire. Mais plus vous mettez ces animations, évidemment, plus il sera difficile, plus il sera fastidieux. Il suffit donc de garder toutes ces choses à l'esprit lorsque vous concevez dès le début. Parce que quand vous arrivez à ce point et quand vous commencez à augmenter et à augmenter toutes ces choses sera évidemment beaucoup plus difficile à gérer toutes ces choses. Tout d'abord, ramenons ça à 200. Désolé, je n'ai pas inclus la pile, donc tout d'abord, incluez la pile, puis amenez cela à 200, comme ça, et sautez à l'intérieur d'ici. Celles-ci ont supprimé l'icône du calendrier. Amenez ces deux là. Et puis voyons, nous pouvons déplacer cette carte de Londres et de destination. Je peux les faire quatre colonnes de large. Je peux aussi sauter ici et déplacer ça à ici. Comme ça. Et puis voyons pour ça, ou je déteste vraiment ces diviseurs, mais que pouvez-vous faire ? Donc, pour le milieu, je peux double-cliquer à l'intérieur et positionné ou juste ici. Voyons ce qu'on avait ici. Donc nous en avons 33 un jour, donc nous pouvons avoir les mêmes paramètres ici. Je peux sauter 33, appuyer sur Entrée, et ensuite utiliser ce séparateur, apporter tout le chemin jusqu'ici. Donc, comme je l'ai dit, cela dépend vraiment de votre mise en page, ce que vous en faites, façon dont vous l'ajustez. Mais en gros, c'est comme ça que ça ressemble ici. Alors contrôlez C sur notre état Horace de Londres, contrôlez V. Finissons ces trois et puis je reviendrai vous montrer à quoi ils ressemblent tous. Et je vais aussi vous montrer comment l'animation elle-même ressemble une fois que c'est fait. Donc, flèche, je vais l'étendre jusqu'ici et ramener ça à huit. Maintenant, vérifions rapidement entre l'état par défaut et l'état Horace et Paris. Survol par défaut, il semble bien. Alors maintenant, nous allons travailler sur notre Rome. Une fois de plus, regroupez-les tous, assurez-vous qu'ils sont dans une pile comme ça. Double-cliquez ici et assurez-vous que vous êtes à 200, comme ça. Et puis ils cliqueront ici. Je vais me débarrasser des jours comme ça. Je vais dire que c'est 33, comme ça. Je vais l'aligner à gauche. Utilisez le diviseur. Et certainement, je pense que les calques de forme sont beaucoup meilleure option que ces lignes pour les diviseurs. Parce que les terroristes en forme vont toujours suivre ce que vous faites et vous pouvez toujours les ajuster, subir. Donc, il n'y a vraiment pas besoin de ce Pfaff tout autour de vos diviseurs. Donc, je n'aime vraiment pas ces alignements n à l'avenir ou certainement utiliser des calques de forme. Parce que comme je l'ai dit, Shape calques, comme vous pouvez le voir d'ailleurs, avec ceci, avec cette image, il se déplace juste magnifiquement. Il fonctionne juste comme il fonctionne juste comme il se doit. Donc, je pense vraiment que les calques de forme sont beaucoup meilleure option à l'avenir pour tous ces diviseurs et lignes. Contrôlez C, U et mécontentement, puis contrôlez V, sautez à l'intérieur d'ici, retirez tout, puis ramenez cela à huit. Donc, et incluons notre flèche pour revenir ici. Et enfin, double-cliquez pour zoomer ici sur cette image. Et nous l'avons là. Donc état par défaut, état d'horreur. Donc enfin, ce que je veux faire avec ça, c'est évidemment de les ramener. Donc je vais les positionner à 80, comme si nous avions un entre le texte et le texte. Et enfin, pour le texte lui-même, Déplaçons au centre juste ici. Voyons voir ces villes où elles sont fermées. J' aime ça. Et c'est fondamentalement tout. Je vais aller de l'avant et travailler sur ces trois surpris Amsterdam, Venise. Et je vais aussi travailler sur tous ces autres. Laissez-moi d'abord les aligner comme ça. Alors amenons-les à notre grille lumineuse là-bas. Celle-là. Apportez nos meilleures destinations, amenez cela au centre une fois de plus, ou même pour entendre si bien ajusté plus tard. Amenez ces deux là, nos partenaires. Donc, une fois de plus, évidemment avec ces objets, c'est beaucoup plus simple à faire. Donc, il peut simplement ajuster à ici. Et vous pouvez ajuster le défilement. Et le groupe 2 ici, assurez-vous que le texte est centré. Et la même chose pour ceux-là juste ici. Alors osez et mettez ça ici. Et cela devrait simplement aller directement ici, par exemple. Ainsi, les utilisateurs peuvent facilement défiler et les morts. Je ne pense pas qu'on va faire trop de travail avec ça. Ajustez simplement ce texte ici. Et voyons, vous encouragez à être, il suffit de déplacer cette dernière ligne vers ici. Hamlet voir, ce bouton peut être au centre. Donc, sélectionnons-le simplement tout. Assurez-vous que nous sommes dans un centre. Nous le sommes. Voyons voir, la distance est 40, donc ça va être 40 aussi et assurez-vous d'utiliser quatre colonnes ou ce bouton. Ainsi, vous pouvez voir clairement la structure. Tout va être au centre et ça va être au centre. Donc, je peux réellement sélectionner ces deux et cliquer ici et m'assurer qu'ils sont dans une ligne centrale qui. Et enfin, cliquez sur ceci, assurez-vous qu'il s'aligne sur ici et cliquez ici. Suivant est au centre. Et puis une fois de plus, la même chose avec cela simplement ajusté à ici. Et je vais m'assurer que si je le mets ici, Voyons voir, parce que vous vous souvenez, vous devez faire en bas de gauche à droite. Donc 1234, et dans l'état d'Horace, 1234, comme ça. Et puis revenez simplement en arrière et développez ceci jusqu'à ce que le bouton touche le bord juste là et nous l'avons là. La section sur la dette est complétée. Alors appelons ça un jour pour cette vidéo parce que je voulais montrer, vous savez, je veux vraiment vous montrer ça et ensuite je l'appellerai un jour. Donc tout d'abord, cette section, je vais la déplacer ici et je vais le faire. Alors réservez votre voyage de rêve. Nous sommes au contenu, qui est dans une pile. Alors, qu'est-ce qu'on peut en faire ? Je peux, par exemple, le positionner pour être au sommet. Alors disons que je veux mettre cette image au sommet. Comment puis-je faire ça ? Tout d'abord, passez à cette pile verticale, puis sautez à l'intérieur du contenu et déplacez simplement votre quantique comme ceci. Il va garder la même cohérence va garder le même effet, la même chose fondamentalement. Alors développez simplement votre image comme ceci. Assurez-vous de remettre votre masque à sa place. Et puis pour ce voyage de rêve, ce que nous pouvons faire est fondamentalement l'aligner vers la gauche, comme ceci, par exemple. Et assurez-vous de faire la même chose pour ici, mais l'aligner sur cette ligne de grille. Maintenant, pour le texte, Allons à l'intérieur et faisons le centre aligné. Puisque nous alignons ceci sur ici, je peux simplement passer au vol stationnaire juste ici. Donc là, vous l'avez. Ensuite, je peux simplement utiliser mon contenu et m'assurer qu'il est centré. Et puis je peux simplement les sélectionner pour m'assurer qu'ils sont centrés comme ça. Maintenant, nous avons tout cet espace vide entre les deux sections. Donc, je vais réellement le ramener à 100, par exemple, simplement en survolant cette section et ensuite vous pouvez l'ajuster. Et maintenant entre ces deux-là, c'est 150, ce qui est très bien. Avant de vous quitter, je vais faire la même chose pour cette section ici. Il suffit donc de sauter à l'intérieur du contenu. Assurez-vous d'utiliser ce rembourrage vertical. Je vais sauter et étendre mon image à ici. Et puis tout le chemin jusqu'ici. Assurez-vous que cela va à gauche. Assurez-vous que cela va à cette poussée. Enfin, assurez-vous que le texte est aligné au centre comme ça. Et assurez-vous, tout d'abord, de l' aligner sur la ligne de gauche et de grille comme ceci afin que nous puissions ajuster notre bouton, faire quatre colonnes de large. C' est la même chose que nous l'avons fait auparavant. Et enfin, sélectionnez-le, assurez-vous que tout est dans le centre plus tard pour sélectionner les deux pour eux. Assurez-vous qu'ils sont dans un centre cliquez ici, puis ajustez cela à 100, comme ça. Mais vous pouvez aussi faire est évidemment cliquer ici et ensuite utiliser 100, appuyez sur Entrée, et là nous l'avons. Évidemment, cela reste 150. Donc, peu importe le nombre de ces piles que vous avez, ils vont simplement s'ajuster magnifiquement vers le bas. Et maintenant, parce que nous avons notre contenu comme celui-ci, nous devons évidemment étendre notre aéroport jusqu'au bas pour qu'il puisse accueillir notre pied de page. Donc, comme je l'ai dit, je vais partir maintenant et travailler sur ces trois, puis finir en sections en utilisant exactement les mêmes paramètres pour tous ci-dessous. Donc l'Europe, l'Asie, les Amériques, et ce que je veux dire, l'Afrique. Et puis reviens dans la vidéo suivante et t'explique comment on peut arrondir tout ça ? Nous allons commencer par travailler sur ces témoignages, puis ces trois cartes, qui vont être assez simples. Enfin, nous allons refaire le pied de page, puis terminer cette taille. Encore une chose pour nos meilleures destinations. Laissez-moi vous montrer comment on peut y travailler. Tout d'abord, pour ce premier état, je vais simplement déplacer les meilleures destinations et ensuite ramener mes flèches comme ça. Parce que celui-ci devrait être assez simple parce que, comme vous vous en souvenez, nous n'avons pas trop fait avec eux. Laisse-moi fermer ces deux là. Donc ce que je vais faire, c'est faire la même chose pour tous. Voyons voir, nous allons être à quatre colonnes comme ça. Pour une raison quelconque. Voyons voir. La même chose avec le contenu n'est pas juste ici alors que le texte n'est pas correct. Donc, nous allons cliquer dessus et voir la hauteur automatique. Maldives. Je ne sais pas pourquoi ils ne sont pas au centre. Il devrait y avoir comme ça, mais ça casse le je ne sais pas ce qui s'est passé. Les solides les ont changés comme ça. Donc quatre colonnes de large. Et puis quand sauter ici et simplement étendre mon image à ici. Et ça devrait être au centre comme ça. Donc je ne sais pas pourquoi c'est arrivé, mais comme vous pouvez le voir, vous pouvez facilement ajuster. Ce que nous pouvons faire ici, c'est aussi ajuster la hauteur de notre image si nous le voulons. Mais je ne vais pas m'embêter avec trop. Ce que je vais faire enfin, c'est sélectionner notre contenu comme ça. Va à notre rendez-vous Horace, juste là. sauté décider de frapper Contrôle V. Je vais l'enlever d'ici. Et ce que je vais faire, c'est zoomer un peu et porter ça à huit. Comme ça. Revenez à l'état par défaut. Et je ne sais pas pourquoi vous avez vu que je copiais du contenu ici. Alors je vais planer. Et maintenant, il fait face au contenu. Donc, je ne sais vraiment pas parfois ce XD avec tous ces problèmes. Mais en gros, c'est juste parce que j'utilise tous ces autres logiciels parce que je dois enregistrer mes Y, je dois enregistrer cette vidéo. Je dois exécuter une sorte de je ne sais pas, tous ces outils différents en arrière-plan, donc tout est probablement à la hauteur. Donc, je veux vous montrer rapidement parce que vous pouvez voir que ce texte fonctionne vraiment sauvage. Donc, nous allons d'abord le réparer, amenons-le ici, par exemple, parce que nous allons être à l'intérieur de ces quatre colonnes que nous devrions, ceci est au centre. Alors je vais apporter ça et ça au centre. Ensuite, je vais réellement supprimer mon texte. Voyons deux ici, donc et assurez-vous que c'est au centre. Qu' est-ce qui compte ? Vous pouvez simplement les sélectionner tous et cliquer ici et vous assurer qu'ils sont dans un centre comme celui-ci. Enfin, cliquez sur le contenu. Sautez à l'intérieur d'un état d'horreur basé. Supprimez l'ancien. Quels sont les nouveaux ? Double-cliquez, zoomez sur le masque, puis cliquez ici, puis amenez-le à huit. Et le troupeau laitier va à l'état par défaut et nous irons avec celui-ci. Nous allons d'abord traiter de ces tubes. Donc, je vais m'assurer que c'est au centre d'une saleté. Je ne sais pas pourquoi. Quelque chose de vraiment bizarre se passe avec Adobe XD aujourd'hui. Je ne sais pas pourquoi, mais c'est tout simplement refuser d'abandonner. Donc, alignons notre texte comme ça et faisons le avec le prix aussi, voyons si c'est le cas, c'est le cas, ce qui est génial. Enfin, essayez-le comme ça. Quelque chose de vraiment bizarre se passe. Donc, cela montre que mon BG actuel est deux ici. Pour une raison quelconque. Pendant que j'ai développé et vérifié cela, lorsque je clique et sélectionne tous mes éléments, cliquez ici. Il réduit la taille. Donc je ne sais vraiment pas pourquoi il fait ça. Mais ça n'a pas d'importance. On va se mettre sous tension à travers ça. Donc, je vais l'aligner sur ici. Et voyons, tous sont de la même taille, ce qui est génial. Et ce que je vais faire, c'est mettre la vidéo en pause ici. Donc je ne vous ennuie pas avec tous ces détails parce que je m'ennuie avec les vacances de cet amarrage, parce que je fais tout de même encore et encore. Donc je vais, comme je l'ai dit, mettre la vidéo en pause ici pour que je puisse finir cette section et ensuite revenir vous montrer l'animation et tout. Et puis je vais mettre la vidéo en pause. Et la vidéo, désolé, pour que je puisse réparer toutes ces autres zones et qu'on puisse revenir. Donc, comme je l'ai dit, je vais mettre la vidéo en pause pour que je puisse réparer ces trois et ensuite revenir vers vous. Et maintenant que j'ai fait ça, laisse-moi te ramener à la vitesse. Donc je vais sélectionner ces trois. Les quarts de maintien sont les mêmes qu'avant. Je vais les éloigner du chemin. Assurez-vous qu'ils ont 30 ans. Ensuite, cliquez ici et assurez-vous qu'il est coupé sur le bord. S' assure qu'il est coupé ici. C' est, ce qui est génial. Et enfin, ce que je vais faire, c'est évidemment utiliser toutes mes destinations. Donc, je vais cliquer sur le contrôle C, puis aller à mon état cliqué. Et ce que je vais faire ici, c'est appuyer sur Control V, donc je peux les coller ici. Vous supprimez, puis je vais les déplacer à nouveau. Je vais également apporter la modification au texte que j'ai fait précédemment. Donc, nos meilleures destinations, et je vais aussi déplacer mes flèches à droite en place, juste vu. Je peux essayer de garder mon animation pour ne pas avoir à le refaire une fois de plus. Je pense que c'est bien. Et passons à l'état par défaut et voyons si l'animation fonctionne correctement. J' espère vraiment que c'est le cas. Donc, comme vous pouvez le voir, nous avons vraiment fait beaucoup dans cette vidéo. Et j'aime comment ces images fonctionnent avec ces petites images parce que maintenant le contenu peut s'adapter beaucoup mieux ici. Mais je dois changer cela au bouton par défaut. On s'occupera de ça plus tard. Cette section est, vous pouvez voir qu'il est vraiment facile à lire maintenant. Et nous y voilà. Donc, enfin, vérifions rapidement. Ça marche. Tout fonctionne et nous pouvons cliquer juste là. Et la seule chose que j'ai faite ici, c'est pour le Monson Michelle, j'ai changé le texte, mais il n'est toujours pas centré. Donc, on va devoir réparer ça. Mais vérifions simplement l'animation, voyons si cela fonctionne. C' est vrai, ce qui est génial. Alors je vais changer le Monson Michelle. Super ici et destinations. Voyons voir. Je peux le déplacer ici. Quelque chose ne va pas avec ce texte. Comme vous pouvez le voir, c'est mon avantage. Donc c'est en fait l'arrière-plan, une fois de plus, jouer des tours. Pour une raison quelconque, comme vous pouvez le voir, je ne peux pas l'aligner sur ici. Donc ce sont tous les bugs d'Adobe XD et ces techniques vraiment plus avancées, comme vous pouvez le voir, c'est une fugue ici, vraiment beaucoup trop. Alors essayons de le faire comme ça. Donc la largeur est 290 et ici c'est 290 un. Alors allons avec 90 IDAT, et maintenant le texte ressemble comme il se doit. Donc, ce que je vais faire, c'est ramener tout cela comme ça, puis faire la copie et coller une fois de plus. Donc, de la valeur par défaut à celle cliquée, supprimez ceux-ci et ramenez ceux-ci. Positionnez-les en bas de sorte qu'ils ressemblent exactement. Et enfin, déplacez ces destinations ici. Donc les habitudes laitières, les morts. C' est notre conception pour l'instant, c'est tout pour cette vidéo. Encore une fois, nous sommes en train de courir plus d'une demi-heure, mais comme vous pouvez le voir, il y a beaucoup de contenu à montrer. Et aussi une dernière chose que je veux partager avec vous pour cette vidéo sont ces images. Si vous pensez qu'ils sont trop grands, vous pouvez simplement sauter ici et ajuster la hauteur de vos images. Donc nous sommes à une hauteur de cinq, voyons 520. Donc nous pouvons arrondir les choses, double-cliquer ici, repositionner, et ensuite faire la même chose pour le bas. Donc nous allons le positionner pour être à 520, comme ça. Et parce que nous sommes dans une pile, comme vous pouvez le voir, le contenu suit magnifiquement. Donc c'est tout pour cette vidéo. Je vais aller de l'avant et changer toutes ces choses et revenir dans la prochaine vidéo pour que nous puissions finir cette page et ensuite passer à ces autres pages. 43. Créer une conception réactive 7: Continuons maintenant et terminons cette page. Et avant nous, je veux juste partager nos détails rapides avec vous. Disons que je suis allé de l'avant et que j'ai fini tout ça, donc je vais aller de l'avant et copier celui-ci. Et je voulais juste vous montrer ce qui fonctionne le mieux pour ces lignes et ces guides. Donc, disons que nous voulons réduire sa taille plus loin à trois colonnes, par exemple. Donc, à propos de ces diviseurs, comme il l'a dit dans la vidéo précédente, je pense qu'il est préférable que vous les utilisiez. Donc, utilisez simplement le rectangle. Et puis une fois que vous commencez à réduire la taille du rectangle comme ceci, va simplement suivre la mise en page. Donc, vous pouvez juste imaginer que nous allons le créer de toute façon. Donc je vais utiliser la couleur pour le remplissage comme ça. Je vais enlever la frontière. Je vais réduire la hauteur à deux par exemple. Et vous pouvez juste imaginer, et on peut même appeler ça le plus large comme ça. Et disons que nous voulions ajuster notre mise en page pour qu'elle soit large de trois colonnes. Donc, je peux simplement sélectionner mon diviseur. Je peux sélectionner mon image, et je peux sélectionner mon prix ici. Donc, ma flèche et ma carte BG, quand je réduit la taille, vous pouvez voir que tout suit. Mais nous avons un problème juste ici avec ces diviseurs parce que ce sont des elides, la meilleure chose à faire est d'ajuster la largeur d'eux en premier. Donc ce que je veux dire par ça, c'est de chercher, débarrasse-toi de celui-là juste pour te montrer ce que je veux dire, un peu mieux. Disons que vous voulez les réduire. Et disons que nous voulons qu'ils touchent à la ligne en désaccord juste ici à titre d'exemple. Donc, vous pouvez cliquer dessus, maintenir votre quart de travail et dire que c'est deux à sept. Donc, je vais ajuster celui-ci à deux à sept par exemple. Et puis disons que je veux réduire cela encore plus à quelque chose comme Disons que nous voulons juste taper en 3D. Alors trois jours. Et maintenant, nous voulons étendre cela à ici. C' est donc la meilleure façon, car ces séparateurs sont des lignes et ils sont vraiment difficiles à gérer comme une option de re-taille réactive. C' est pourquoi je vous dis d' abord de les traiter avant de passer à tout cet autre contenu. Parce que maintenant, quand nous l'avons mis à l'échelle, quand je sélectionne mon image, quand je sélectionne mon icône juste ici pour l'effet de survol et gérer sélectionner mon BG, par exemple. Je peux les déplacer et vous pouvez voir que le contenu se l'échelle magnifiquement pendant que tout cela reste mis. Donc, c'est pourquoi je dis fait tout simplement que vous faites le changement pour ce diviseur avant d'appliquer tous ces autres changements n une fois de plus, c'est mon conseil supérieur. N' utilisez pas ces lignes comme séparateurs. Assurez-vous de toujours utiliser l'outil rectangle car il suivra beaucoup mieux lorsque vous travaillez avec ce redimensionnement réactif. Et une autre chose à noter dans cette vue de classe de travailler avec ces piles et avec ces groupes. Toutes ces options sont avancées qui ont été introduites dans Adobe XD relativement récemment. Donc, nous apprenons tous que cet outil est en pleine croissance, car cet outil est en train de se mettre à jour, car il s'agit d'une nouvelle fonction introduite il y a quelques mois. Et certaines de ces fonctionnalités ne sont même pas destinées à ce redimensionnement réactif. Il est simplement destiné à la conception, mais nous tous, en tant que concepteurs, explorons toutes ces options tout le temps. Donc, si vous êtes coincé, si vous essayez de faire quelque chose cela ne fonctionne pas, essayez l'inverse. Essayez quelque chose de différent, essayez de l'adapter à votre flux de travail, et donc vous aurez de meilleures options. Donc, comme je l'ai dit, je les ai tous fait. Et, et laissez-moi rapidement montrer, par exemple, dans cette carte, ce que j'ai fait est évidemment inclus tout ce que j'ai fait à l'intérieur de la carte de contenu. Je suis allé à l'intérieur et réduire la hauteur de cette image à 200. Puis je suis allé à l'intérieur de mon dossier du milieu. J' ai réduit le séparateur à 66. Je l'ai fait pour tous. Et puis je réduit la destination entre ces deux, 230, donc entre les jours et les icônes. Et comme je l'ai dit, si vous voulez aller encore plus loin, vous pouvez faire ce que je viens de faire. Donc, par exemple, au lieu de 12 jours, vous pouvez simplement écrire 12 d. Et les gens vont comprendre, parce que c'est fondamentalement abréviation évidente de papa et la majorité des gens utilisent cela, surtout dans le mobile applications. Et bien sûr, dans l'état d'horreur, ce que j'ai fait est simplement inclus cette ombre de fond sur huit. Donc, je suis allé à l'intérieur de la destination BG, cliqué ici 8% puis simplement étendu ceci à AD2, donc 82 en largeur afin que vous puissiez voir cette flèche un peu plus clairement. Et enfin, double-cliquez ici et simplement étendu ces images et c'est fondamentalement tout. Je les ai simplement alignés tous. 30 est la destination entre chacune des cartes et un simplement copié et collé ces effets. Et fondamentalement pour la deuxième animation juste ici, tout ce que j'ai fait est simplement utilisé celui-ci pour le point de tabulation gauche, appuyez sur animation automatique, état par défaut. Cela remonte et a simplement déplacé toutes mes villes et déplacé toutes mes cartes. Donc vous pouvez voir le dernier ici est Carta Hannah. Mais quand je clique ici, c'est Miami. Donc je les ai simplement déplacés à gauche et à droite, fondamentalement, exactement la même chose que j'ai fait avant. C' est pour ça que j'ai dit que je ne voulais pas perdre trop de ton temps. Je veux bouger avec cette classe aussi vite que possible sans perdre de rythme avec elle. Donc, ce que nous allons faire avec les témoignages, tout d' abord, aligné le texte juste ici. Et je vais aussi aligner cela, qui est le groupe de défilement. J' ai presque oublié le nom, donc je vais simplement l'aligner avec les lignes de la grille. Voyons si c'est correct. Je pense que c'est le cas. Oui. Donc, comme je l'ai dit, alignez-le avec nos lignes de grille. Et donc, la seule chose qui reste est de déplacer ces témoignages à l'intérieur. Je vais sélectionner mon témoignage et l'amener ici, donc à la limite. Et ici, ce que je vais faire, c'est simplement changer la taille. Mais avant que je le fasse, traitons rapidement les flèches. Donc je vais simplement déplacer les flèches comme ça. Et je peux le faire pour tous avant même que nous progressons. Donc témoignage à je peux simplement double-cliquer, changer mes flèches, les déplacer pour entendre. Je peux aller au témoignage trois, et j'aime faire ces choses parce que si elles sont répétitives, il vaut mieux les faire un par un. Donc, si vous faites des flèches, par exemple, comme je le fais en ce moment, il est préférable de les traiter tout de suite. Puis deux reviennent après quelques essais et oublié ce que vous avez fait puis quelque chose comme ça. Donc, comme vous pouvez le voir, les chiffres restent les mêmes. Donc notre animation ne va pas changer. Les flèches restent les mêmes et maintenant nous allons nous occuper de notre panier. Donc je vais ouvrir ces cartes, carte de témoignage numéro un. Et la seule chose que je vais faire ici est, tout d' abord, réduisons la taille de la carte. Apportons-le ici. Ensuite, je vais cliquer sur mon texte converti en hauteur automatique. Et je vais fondamentalement le changer pour ici et ensuite adapter quelque chose comme ça. Je ne suis pas allé ici. Et je vais le mettre à jour. Juste mes prochaines vacances devraient s'adapter. Voyons voir, sans mon si pour les prochaines vacances. Et voyons 40 ici. 40 ici. Je vais simplement copier ce texte parce que si vous vous souvenez, nous avons utilisé exactement la même citation sur tous. Donc, je vais cliquer ici sur celui-ci converti double-cliquez sur Control V. Mais je devrais toujours le faire comme ça parce que c'est la largeur qui va changer. Voyons donc, la largeur est de cinq ou quatre. Donc si je peux le changer ici, donc 500 pour, voyons si ça marche. C' est le cas. Voyons donc 1234 lignes. 1234 lignes, ce qui est génial, et la destination est juste ici. Donc 5, 4. Je vais sauter ici, converti, puis aller fichier pour, puis cliquer ici, contrôler V, comme ça. Parce qu'alors il va coller dans ces textes convertis ou cinq ou quatre. Maintenant, cliquez sur Contrôle V et assurez-vous de les faire comme ça. Je vais sauter à la première carte. Voyons voir, qui est celui-ci et la destination. Donc c'est, la largeur est 930. Pour que je puisse aller de l'avant et changer tout ça. Et parce que nous utilisons des piles ici, ils vont s'adapter. Alors allons-y avec 930 Je que, et vous pouvez voir qu'il s'adapte magnifiquement. Donc on peut aller avec des étiquettes fermées, aller avec celle-là. Donc l'image 930 ne va pas changer, ça va rester le même. On change juste la largeur de ces cartes. Voyons donc 930 comme ça. Et nous l'avons là. Aussi la distance est de rester la même. Mais deux, tu vas le changer. Vous pouvez voir que ça va jusqu'ici. Je vais le raccrocher à mon tableau d'art comme ça. Et encore une fois, la veste est ça marche, c'est bon. Donc ce que je vais faire, c'est, je pense que vous êtes en train de deviner à ce stade, simplement copier ce texte ou je n'ai même pas à le faire. Je peux simplement le positionner au centre, mais je vais copier des témoignages et des textes ou je ne vais pas trop m'embêter avec eux, aller à cet état. Cliquez ici. Donc enlevé titre de la section et des témoignages. Et à partir de celui-ci, je vais simplement sélectionner toutes mes cartes, par exemple, puis déplacer ceci pour l'aligner sur mes lignes de grille. Donc juste un peu plus comme ça. Et puis je vais copier le titre de cette section. Donc je n'ai pas à faire la même chose deux fois. Donc Control V, vous pouvez voir que ce sont des canards. C' est fixé à cette seconde. Alors passons maintenant nos témoignages à ce troisième. Et fondamentalement, je fais ça juste pour ne pas avoir à les animer. Une fois de plus, fermez-les, sélectionnez le titre de la section, et enfin, collez-le ici. Et sauter à l'intérieur des témoignages. Et enfin déplacer ce dernier ici. Il suffit de voir un alignement. Ça a l'air bien. Et c'est fondamentalement tout. Maintenant, vérifions et voyons si ça marche. Alors nous allons frapper notre aperçu. Ça devrait marcher parce que nous n'avons pas changé ces flèches. On a simplement déplacé leur place. Nous y voilà. Donc les horreurs fonctionnent encore, ce qui est génial. Vous pouvez voir que cela fonctionne toujours et qu'il s'intègre dans l'ensemble de notre écran. Donc, vous pouvez voir les chiffres fonctionnent, tout fonctionne, ce qui est génial. Passons maintenant à ces sections ici. Encore une fois, parce que nous avons 12 colonnes, nous allons les diviser 66. Donc, je vais double-cliquer sur celui-ci pour le réduire. Donc 1, 2, 3, 4, 5, 6, et la destination va rester 60. Donc, cela ne va pas changer. Je vais l'adapter et parce que c'est juste une image, elle s'adapte bien. Qu' est-ce que vous allez faire, c'est cacher ma couleur, superposer, double-cliquer sur ma carte et utiliser Shift 1, 2, 3, 4, 5 par exemple. Et il est important de se rappeler parce que quand vous allez en vol stationnaire, puis ouvrez-le, cachez-le. Double-cliquez sur 1, 2, 3, 4, 5, de sorte que l'image reste exactement au même endroit. Vous pouvez voir qu'il s'agit toujours d'un agrandissement sur le vol stationnaire, mais l'image reste au même emplacement. Allons ici pour passer le vol stationnaire parce qu'on n'a pas changé ça du tout. Ça devrait bien fonctionner et ça le fait. Je suis content de ça. Et enfin, les voyages de schéma, je vais bouger avec ici, positionner à la fin de notre grille et faire la même chose pour le vol stationnaire. Donc, quand je le change, vous pouvez voir qu'il fonctionne toujours et ressemble à ce qu'il devrait. Alors maintenant passons à autre chose. Et ce qu'il nous reste à faire, c'est juste le pied de page. Donc, le pied de page, pied de page change beaucoup, évidemment, comme vous pouvez le voir à travers ces tailles. Mais ce que je vais faire, c'est cacher ça. Je vais double-cliquer ici et positionner cette fille pour être à peu près au centre, mais peut-être un peu décalé vers la gauche comme ça, juste pour que nous puissions apporter notre peu plus d'intérêt visuel. Et essayons de les aligner. Alors voyons l'image. Et essayez de positionner ce contenu au centre comme ceci. Et voyons ce que nous pouvons faire de toutes nos informations. Donc tout d'abord. Faisons face à ce nav principal. Donc, ce que je vais faire est en fait utiliser un autre type de pile. Je vais utiliser celui-ci. Et puis je vais m'assurer que je suis positionné comme ça. Et voyons, la distance ici est de 100. Peut-être que nous pouvons le réduire à 60 peut-être parce que nous avons encore l'écran de bureau, mais maintenant il est beaucoup plus petit. Donc je vais sauter à l'intérieur de celui-ci et je vais le repositionner. Donc, par exemple, ici. Et peut-être que je peux apporter ça au centre comme ça. Alors je vais faire la même chose pour celle-là, l' amener au centre comme ça. Et je suis content de ce résultat. Maintenant, pour ces deux-là, nous allons simplement les réduire. Vous pouvez faire quelque chose comme 40, par exemple. Je pense que ça va bien marcher. Ouais, je pense que ça marche bien. Et vous pouvez voir que nous avons toujours le même problème avec le séparateur, mais celui-ci est simple parce que vous pouvez simplement aligner sur vos lignes de grille et l'appeler un jour. Mais si vous ne voulez pas le faire, alors je vous recommande vraiment d'utiliser l'outil rectangle et de l'utiliser comme un diviseur. Utilisons ceci comme un 60 comme ça pour que nous puissions avoir le même espacement ici, les sensibilités ici. Et faisons la même chose ici. Je pourrais aussi utiliser le décalage, mais comme je l'ai dit, parfois je choisis d'utiliser ceux-ci. Maintenant, pour celui-ci, nous allons rapidement l'aligner sur ici. Donc ce que je vais faire avec ceux-ci, c'est, Voyons les infos du fond. Je peux le changer comme ça. Je peux, Il va être un peu difficile de cliquer sur ces icônes. Je peux, par exemple, les positionner comme ça. Assurez-vous que mon Instagram est au centre, par exemple. Alors ce que je vais faire est de réduire l'espacement entre eux à 60, comme ça. Et ce que je peux faire est fondamentalement les ajuster comme je veux. Alors peut-être que je peux positionner celui-ci pour être là. Voyons voir, peut-être qu'on peut les déplacer tous vers la gauche, comme ça. Et puis nous allons cliquer ici et simplement déplacer ces deux-là. Et enfin, développez notre pied de page. Alors voyons. Peut-être que ça peut même être 240, mais gardons ça comme ça. Parce qu'on en a 60, on en a 60 ici. Et voyons ce que nous avons. Nous avons, je pense que 100 du haut. Alors voyons. Ouais, utilisons 80 juste un peu. Donc, ce que je vais faire ensuite est d'utiliser mes informations de pied de page et par exemple, dupliquées, mais je n'aime pas ces termes et conditions. Donc, ce que je vais essayer est peut-être de le positionner juste ici et ensuite étendre ceci à ici. Vous pouvez voir à quel point ces piles sont simples à utiliser, surtout si vous ne voulez pas avoir les mêmes distances entre votre article. Donc, ils sont vraiment assez simples une fois que vous pouvez les accrocher, évidemment. Comme je l'ai dit, je vais le faire parce que ce qu'on a fait ici, on en a 80. Je vais dupliquer cette information et utiliser simplement le décalage et la flèche du bas huit fois. Et puis déplacez mon image et vers le bas jusqu'à ce qu'elle se rencontre ici et déplacez aussi ma superposition de couleur. Comme ça. Et puis supprimer cette copie que j'ai créé et troupeau laitier, nous avons notre pied de page terminé. Maintenant que tout est prêt, je vais simplement double-cliquer ici. Positionnez-le ici, et là, nous l'avons. Donc c'est notre page. C' est à ça que ça ressemble. Comme vous pouvez le voir, certains éléments sont vraiment assez difficiles à gérer comme ceux-ci. Mais encore une fois, comme je l'ai dit plusieurs fois tout au long de cette classe, si vous ne voulez pas avoir trop de ces effets. Parce qu'une fois de plus, nous avons le survol de base où cette image zoome, où cette flèche se développe. Et puis nous avons un autre vol stationnaire à l'intérieur de cette flèche. Si vous ne voulez pas tous ces éléments, vous pouvez simplement utiliser une mise en page plus simple comme nous l'avions ici. Donc, fondamentalement, tout ce qui change ici est zoom sur l'image, puis l'ombre portée en arrière-plan. Tu n'as même pas à faire ça. Vous pouvez simplement utiliser l'ombre portée en arrière-plan qui suffirait à la plupart des besoins. Mais une fois de plus, je voulais vous montrer cette mise en page vraiment assez complexe. Mais vous pouvez clairement dire à partir de tous ces paramètres et venir autour, autour de toutes ces différentes options. Cela va vous prendre beaucoup de temps pour maîtriser et changer N, pour apporter des modifications à tous ces éléments. Gardez donc cela à l'esprit, surtout lorsque vous commencez avec votre projet, assurez-vous de tenir compte de tous ces coûts de temps car cela vous coûtera du temps. Et vous pouvez voir combien de temps il nous faut pour créer la justice d'une page et la rendre réactive. Et nous avons encore trois pages supplémentaires dans ce projet. Évidemment, ils ne seront pas aussi difficiles que cette page d'accueil. C' est pourquoi je vous ai montré la page d'accueil parce que vous pouvez simplement appliquer toutes ces modifications à toutes ces autres pages. Mais vous pouvez juste imaginer, comme un dit, assurez-vous de tenir compte de tout cela ici dès le début dans ce mémoire. Alors assurez-vous que lorsque vous prenez en compte le budget, assurez-vous de tenir compte de cela dans le budget pour le nombre de résolutions qu'ils veulent. Ainsi, vous pouvez voir le bureau, le petit bureau , la tablette, le téléphone, et enfin, assurez-vous d'inclure cela dans la chronologie du projet parce que évidemment cela va vous prendre beaucoup plus et beaucoup plus longtemps que si vous, par exemple, êtes il suffit de faire, disons, trois tailles différentes ou deux tailles différentes. Donc c'est tout pour cette page. Dans la vidéo suivante, nous allons passer à cette page, qui est la page doublet. Et à l'intérieur, nous allons créer un menu hamburger. Cela va donc créer un grand nombre de défis et de changements supplémentaires que nous allons affronter ensemble. Alors je te verrai là-bas. 44. Créer une conception réactive 8: Commençons par la taille de la tablette. Et comme je l'ai dit dans plusieurs de ces vidéos précédentes, ça va être beaucoup différent parce que nous supprimons maintenant tous nos états. Parce que tous nos états Horace, c'est parce que nous ne allons pas être en mesure d'embaucher sur des tablettes maintenant sur certaines tablettes, évidemment les tablettes Windows, surtout vous, vont avoir une capacité d'utiliser la souris, par exemple, et de survoler et aussi sur d' autres tablettes comme les appareils Samsung par exemple. Ils ont l'option DAX de la dette. Vous serez donc en mesure de le faire sur ces appareils, mais sur la majorité des appareils, vous ne pouvez pas attacher une souris. Et par conséquent, tous ces appareils, parce qu'ils ont des écrans tactiles, il est beaucoup mieux d'optimiser vos conceptions pour l'expérience tactile. Allons-y avec 76 huit juste ici. Alors passons vite ça à 768. Et ce que nous allons faire ici, c'est utiliser, voyons, nous allons utiliser huit colonnes. Donc, nous allons entrer ici, ce serait d'aller à huit. Et ici, nous allons utiliser 296042. Donc 29, 60, et 40 pour le faire 8296042. Et fondamentalement, la peinture qui va changer est notre navigation elle-même. Nous allons donc créer le menu hamburger. Mais avant qu'on ne le fasse, ce que je veux faire, c'est sauter à l'intérieur d'ici. Et organisons rapidement certaines choses parce que nous ne ferons pas de liste déroulante supplémentaire à l'intérieur des listes déroulantes à l'intérieur de ces menus, parce que cela créerait juste une confusion. Donc je peux vous donner un exemple. Nous avons maintenant la destination. Lorsque les utilisateurs tapent là, la section de destination s'ouvre. Alors cliquons sur la dette. Donc, il va ouvrir toutes ces options supplémentaires. Et nous voyons, nous avons toutes ces options de vol stationnaire supplémentaires. Nous avons tous ces séparateurs, nous avons toutes ces options. Donc, quand ils cliquent sur un hiver, par exemple, nous avons tous ces derniers plus le bouton qui va planer et tout le reste. Nous ne allons pas faire tout cela ici, l'intérieur de la version tablette et à l'intérieur de la version mobile, juste à cause de l'espace. Donc, la seule chose que nous allons avoir est l'icône Menu juste ici. Donc, quand vous marchez dessus, il va juste ouvrir ces destinations si, bien-être hivernal et ainsi de suite. Et une fois qu'ils cliquent sur la page de destination, par exemple, nous les conduirons au discours de destination dédié où ils pourront explorer différentes options comme celles-ci, par exemple. Ainsi, ils peuvent voir toutes ces options différentes pour les destinations, plutôt celles-ci. Et vous pouvez juste imaginer qu'ici, sur le côté gauche, ce sera un menu ou juste ici en haut, comme nous l' avons fait ici. Ainsi, ils peuvent choisir différentes destinations par prix, durée du voyage, activités et ainsi de suite. Donc, ils peuvent appuyer sur Oser et utiliser ces options. C' est pourquoi nous économisons de l'espace sur une version tablette parce qu'une fois de plus, vous pouvez imaginer que les utilisateurs peuvent taper sur les destinations. Et puis à l'intérieur des destinations, nous avons toutes ces options. Ce sont des menus déroulants supplémentaires sous le menu déroulant supplémentaire. Donc, ça crée juste beaucoup de confusion. Cela crée juste beaucoup d'encombrement inutile. Et c'est pourquoi je veux les enlever tous et simplement les mettre dedans. Un simple a abandonné. Donc ce que nous allons faire en premier, c'est ajuster certaines de ces choses. Alors allons-y et je vais, voyons une fois de plus. Nous avons donc 76 8. Je vais ajuster cela pour un activateurs primaires sont 76 8 comme ça. Et voyons, peut-être peux-tu réduire la taille de mon logo juste un peu ? Par exemple, sautez à l'intérieur de ma connexion, maintenez ma touche Maj et ajusté à, par exemple, quelque chose comme ça parce que je ne veux pas qu'il soit beaucoup trop grand. Et permettez-moi d'ajuster rapidement mes points de robinet de logo afin qu'il ne reste pas trop comme ça. Mais nous ne allons pas l'animer dans ce cas parce que nous allons avoir l'icône du menu de la dette. Maintenant, pour commencer, je vais simplement déplacer tout ça comme ça. Et nous allons ramener notre primaire maintenant flou juste parce que nous pouvons voir ce que nous faisons un peu mieux de cette façon. Et je vais l'étendre à un flotteur par ici. Donc 10, 75, je pense que ça va être bon. Comme ça. Et c'est très bien. Je vais juste le bouger comme ça. Et nous allons en fait étendu voir, où cela nous emmène ? Alors 1018, d'accord. Et comme je l'ai dit, nous allons juste garder ces objets ici. Et comme nous en avons 20, nous pouvons en inclure, par exemple, 50. Mais même de l'importance 60. Parce que maintenant on va avoir beaucoup plus d'espace pour jouer parce qu'on l'a placé ici. Ou ce qu'on peut faire, c'est que tu peux les diviser comme ça. Ensuite, vous pouvez double-cliquer à l'intérieur. Assurez-vous que c'est dans le centre, cette lettre d'information. Et il suffit de le déplacer, par exemple, juste ici, puis de le ramener ici. De cette façon, nous avons beaucoup plus d'espace, mais comme je l'ai dit, je pense que cela semble un peu mieux, un peu plus propre, et un peu plus étroitement ensemble. Donc la prochaine chose que je vais faire est en fait créé cette ligne de logo. Donc, pour ce faire, je vais simplement cliquer quelque part juste ici. Par exemple, utilisez mon outil rectangle, en sautant ici et créez cette ligne agréable et simple. Voyons, par exemple, et les analystes utilisent, par exemple, 56 semaines, neuf. Je pense que c'est un peu trop gros. Ainsi, par exemple, 56 avec cinq. Voyons voir. Oui, je pense que ça marche. Une mort a l'air un peu mieux. Et je peux simplement zoomer sur tout le chemin. Utilisez mon outil de sélection cliquez et maintenez la touche Maj enfoncée pour que je puisse créer ces arêtes arrondies. J'ai enlevé ma frontière. Et voyons voir. Oui, je pense que ça marche très bien. Mettons-le en fait ici et voyons. Je pense que c'est bien. Appelons ça la ligne. Appuyez sur le contrôle D. et la position C à, par exemple. Je pense que le bronzage est beaucoup trop. Voyons voir, peut-être huit. Oui, Contrôle D encore une fois. Huit. Cert et simplement les aligner comme ça parce que nous allons l'animer en seulement une seconde. Donc, ce que je vais faire est le groupe il touche le contrôle G, la qualité et le menu. Je vois, oui, Pour l'icône du menu, appuyez sur Contrôle K pour le faire en tant que composant. Et puis nous allons voir, nous pouvons regrouper ces deux-là ne sont pas les groupés mais le positionner comme ça. Et voyons, nous avons 34 ans, peut-être pourrions-nous le faire un peu plus. Voyons voir, 40. Oui, je pense que c'est bien. Parce que maintenant nous laissons l'espace juste ici en haut pour les acheteurs de navigateur nécessaires ou des trucs comme ça qui vont venir dans différentes tablettes. Tout d'abord, ce que je vais faire, c'est que nous avons cet état par défaut, et je ne sais pas pourquoi. Il me montre ce composant principal d'édition. Je ne sais pas pourquoi. Mais de toute façon, créons un nouvel état. Je vais l'appeler cliqué. Et à l'intérieur de cet état cliqué, ce que je vais faire est de l'utiliser dans cette position de ligne juste ici. Utilisez cette position de ligne juste ici, ligne centrale que vous ne voyez pas. Alors laissez-moi mettre en évidence écrire ceci. Donc c'est la ligne centrale. Je vais simplement tenir ma vieille clé et la ramener jusqu' à ce qu'elle crée fondamentalement ce petit cercle. Donc tout le chemin jusqu'ici par exemple. Et je peux appuyer sur 0 deux fois. Laisse-moi ramener ces deux-là. Fondamentalement sur ce premier, je vais le faire pivoter par exemple, comme ceci. Voyons donc que 60 C45 mènent à aller avec 60 et voir à quoi ça ressemble. Maintenez simplement votre touche Maj jusqu'à ce que vous atteigniez 60. Je pense que c'est trop. Donc 45, et ramenez ça à 45. Je pense que ça marche bien. Donc maintenant, nous avons par défaut et nous avons cliqué. Alors, retirez-le. Si nous revenons ici, à notre icône Menu Menu, maintenant nous avons cet état cliqué. Vous pouvez le voir. Donc, nous allons rapidement prototyper à. Donc, lorsque les utilisateurs cliquent ici, il ira avec le robinet auto animate, cliqué sur Etats, l'assouplissement et le point zéro. Allons avec 0.4 et voyons comment cela ressemble à un état onclick. Une fois de plus, une fois qu'ils cliquent sur les critères, animent automatiquement DAP, facilitent l'entrée du point zéro pour les annélides, revenez à l'état par défaut. Appuyez sur Preview dessus très rapidement pour voir à quoi il ressemble. Donc, nous l'avons là. Nous avons cette animation agréable et rapide. Si vous pensez que c'est trop rapide, vous pouvez le réduire à 0,6. Mais je pense que ça va bien marcher comme ça. Et comme je l'ai dit, comme vous pouvez le voir, nous avons maintenant une bonne quantité d'espace ici en haut. Alors ajustons nos articles. Revenons au design. Et ce que je vais faire ici, c'est essentiellement de les mettre sur un côté ou de les mettre juste ici à gauche, par exemple. Mais parce que nous avons ces au centre, au fond, je vais faire la même chose pour les DES. Donc je vais, ce que je vais faire est d'utiliser la sélection est tunisienne et fondamentalement supprimer tous ces dossiers parce que nous n'allons plus en avoir besoin. Je vais regrouper tous ces devrait contrôler gène appelé, par exemple, des éléments de menu. Et puis utilisez simplement la pile. Utilisez cette pile et ajustez fondamentalement mes éléments de menu au centre de mon tableau d'art comme ceci. Où 36, alors assurez-vous que nous sommes 40. Les analystes de mon père les ramènent maintenant. Je pense que je vais les ramener à 80. Alors voyons comme la dette et nous en avons 110. Alors appelons-le comme ça. Donc nous sommes 100 et puis nous avons cet espace vide en bas. Donc, ce que je vais faire ici est en fait un clic droit et un composant de dissociation. Je vais frapper le contrôle G une fois de plus, appelez ça le NAV principal. Mais la tablette. Cette fois, Ike qui a touché la touche Contrôle. Et je vais créer un nouvel état. Mais sur cet état par défaut, ce que je vais faire est de sauter à l'intérieur d'ici, flou de navigation primaire va aller jusqu'à un pixel. Ces éléments de menu vont disparaître. Les éléments secondaires, je vais les cacher et le menu va rester comme ça. Donc, la dernière chose que nous devons faire est de créer réellement le point de tabulation pour notre bouton de menu. Donc, pour ce faire et serait simplement cliquer là, sauter dans notre bouton de menu. Et par exemple, élargi à quelque chose comme ça. Retirez la bordure, retirez le remplissage, utilisez l'outil Sélectionner, amenez-le à, je peux même le laisser comme ça. Cela n'a pas vraiment d'importance parce que nous allons aussi animer l'état ouvert, qui va s'étendre un peu en hauteur. Donc, par exemple, quelque chose comme ça va se passer et nous allons l'appeler un point d'onglet de menu. Mon père. Ensuite, allez à notre état 2, qui va être notre état cliqué. Et puis à l'intérieur de là, Voyons voir, je peux étendre ça à 1080. Je veux dire que je peux changer mon cliqué de l'état par défaut à l'état sur l'icône Menu, nav secondaire, le ramener et sont vus éléments de menu. Nous allons les ramener une fois de plus comme ça. Ensuite, je vais aller au prototype, ouvrir mon point de touche de menu. Je vais cliquer dessus. Utilisez l'état cliqué, facilitez la sortie du point zéro. Allons avec 0.6 parce que nous ouvrons le menu après tout. Et ça devrait garder notre animation bien. Donc, le menu va s'ouvrir plus vite que le reste. L' icône de menu va s'animer plus vite que le reste du menu lui-même. Mais je pense qu'on va s'en sortir. Donc, vérifions-le et revenons à cliquer sur État, navigation principale, point d'onglet de menu, puis utilisez exactement les mêmes paramètres. État par défaut appuyez sur Aperçu, et voyons à quoi cela ressemble. Donc, quand je clique ici, vous pouvez voir que nous avons eu un problème au départ, mais c'est juste mon ordinateur parce que je cours toutes ces choses en arrière-plan. Mais comme vous pouvez le voir ici, ça se passe très bien. Et tous ces objets sont très bien montrés. Vous pouvez même inclure un masque si vous voulez trier masque va vous donner encore meilleure option. Donc, il suffit de cacher tous ces éléments. Donc, ces éléments de texte à l'intérieur d'une mosquée le mettent quelque part ici, par exemple. Et puis lorsque vous cliquez ici, masque va se développer tout le chemin vers le bas comme nous l'avons fait pour certains de ces éléments précédents. Ok, passons maintenant à autre chose. Donc c'est tout pour cette partie 1 je vais faire ensuite est l'image du héros. Alors voyons pour l'image du héros elle-même, ce que je vais faire, c'est voir. Par exemple, je peux créer un peu d'une mise en page différente. Alors voyons. Peut-être que je peux simplement utiliser le bouton de l'explorateur de texte, mais je vais, par exemple, déplacer mon humeur, mes icônes ci-dessous. Alors faisons-le d'abord. Je vais aligner mon texte ici. Je vais aller à l'image numéro 2. Je vais utiliser mon texte, aligner au centre. Image numéro 3. Utilisez ma recherche textuelle pour vérifier si tout fonctionne comme il se doit. C' est le cas. Revenons donc à l'état par défaut et voyons ce que nous pouvons faire avec ces icônes. Donc tout d'abord, ce que je vais faire est de positionner tout juste ici sur le bord inférieur de notre masque de texte. Et voyons voir, ou peut-être mieux, je peux les déplacer vers le bas. Donc 12345678, par exemple. Ensuite, je vais déplacer mon texte au centre. Voyons mon bouton étendu à quatre colonnes de large, comme ça. Et voyons, pour ceux-ci, ce que je peux faire, c'est que je pense comment puis-je aborder cela ? Voyons voir, nous sommes à 80 ans. Et par exemple, je peux les diviser par une seule colonne. Donc comme ça. Et puis vas-y comme ça. Juste pour garder l'animation en cours et voir si l'alignement est correct. Je peux peut-être les placer au centre de leur colonne. Donc, je pense juste, ce qui ne va pas distraire l'utilisateur veut onglet jour. Nous devons donc leur donner suffisamment d'espace entre ces deux pour qu'ils aient l'espace pour leur langue, par exemple, juste pour les taper sur l'écran. Mais nous voulons toujours la garder belle et propre. C' est pour ça que j'ai fait ça. Nous devons donc les aligner tous dans tous nos États et veiller à ce que ce soit à quatre ans. Alors faisons vite ça. Donc l'image numéro 2, je vais mettre le bouton du héros juste ici. Assurez-vous qu'il est à quatre heures. Je devrais que ce soit pour aussi. Allez avec nos flèches et alignez-les simplement pour entendre et voir. C' est à 80 et 18 que nous avons créé cela pour être 80 aussi. Si je me souviens bien. Oui. Alors faisons la même chose ici. Et zoos position flèche gauche à ici et aller avec la position de la flèche droite à ici. Et je vais simplement m'assurer que c'est sur le bord. Il l'est. Et pour aller la flèche gauche, voir si c'est sur le bord. Il l'est, ce qui est très bien. Et maintenant, la seule chose qu'il nous reste à faire est l'image numéro trois. Alors réparons ça très vite, certains comme ça. Et enfin, ramenez les flèches une fois de plus. Donc je vais m'aligner comme ça. Et le MIT devrait utiliser 80 à partir d'ici. Sautez à l'intérieur d'ici, et assurez-vous de les aligner ici. Et celui-là là. Donc, j'utilise simplement les touches Maj et fléchées sur mon clavier. Assurez-vous d'aligner celui-ci. Assurez-vous d'aligner celui-ci. Je suis Derek, comment ça et maintenant ce que je n'aime pas, c'est tout cet espace vide juste ici. Donc, ce que nous allons faire est ajusté pour être, par exemple, 100 par rapport au sommet. Donc, ce que je vais faire est d'aller à l'état par défaut. Et parce que nous avons toutes ces options sélectionnées de toute façon, je vais sélectionner mon masque de héros, ma mosquée de texte, un bouton de héros et des flèches. Je vais les aligner jusqu'ici. Voyons voir, à peu près deux ici. Donc 12345678910, ou même mieux et aller à 150. Maintenant, allons avec un terme. Alors voyons. Je ne sais pas ce que je pense. Ouais, je pense que je devrais utiliser un séparateur parce que ça va être beaucoup plus simple pour moi dans mes prochains états. Alors positionnons ici et allons 100, comme ça. Et de la même façon que j'écris ici, cliquez et faites glisser mon diviseur jusqu'ici. Donc ça va s'aligner sur le bord supérieur de mon texte de héros. Ensuite, je vais aller au numéro de l'image pour sélectionner tous ces et simplement les déplacer vers le haut comme ceci. Image photo numéro trois. Sélectionnez tous ces éléments, cliquez sur et déplacez-les vers le haut comme ceci. Et maintenant, nous allons rapidement en prévisualiser et voir à quoi il ressemble. Donc, si je clique ici, va bien passer comme ça. Et si vous pensez que ces images ne fonctionnent pas si bien, vous pouvez les ajuster. Mais ce que j'aime maintenant, c'est qu'on peut encore voir ces yachts. On peut encore voir ces huttes. On peut voir les gens sur la plage, voir les gens s'effondre juste ici. Donc c'est génial. Et ici, nous pouvons voir le sable de la rivière à Paris. C' est génial. Et enfin ici, à Pékin, on peut encore voir la fossette. C' est très bien. Cela fonctionne comme il se doit. Alors ne fais pas attention à ce problème. Parce que comme vous pouvez le voir. Quand je commence à cliquer, il disparaît. Donc c'est juste pour mon ordinateur. Comme je l'ai dit, vous pouvez ajuster ces images, mais je vais les garder là où elles sont. Et la dernière chose que nous allons ajuster, c'est cette navigation en bas. Donc la première chose que je vais faire en fait est de changer ce bouton. Donc parce que ce bouton est juste oser une colonne de large, désolé, deux colonnes de large, juste ici. Je vais effectivement le déplacer en bas et créer une sorte de ce regard séparé. Voyons voir, on peut déplacer ça ici. Plus de largeur pour être 100 par exemple. Et puis utilisez, bouton Appliquer, positionnez-le juste ici. Assurez-vous que nous sommes, par exemple, 40 comme ça. Et ce que je vais faire est en fait un peu changé. Donc je vais utiliser cinq pour tous les angles, pour tous les bords. Remarquez, déplacez-le ici. Étendu pour être large de quatre colonnes, par exemple. Ensuite, allez dans l'état d'horreur, étendu à quatre colonnes de large ainsi. Et aussi sauter à l'intérieur d'ici et assurez-vous qu'ils sont tous 5. Ensuite, parce que nous avons plus d'espace maintenant, je vais utiliser les filtres Appliquer qui copient mon texte. Saute dans mon état Horace. Basé dans appliquer les filtres et les produits laitiers ont. Donc maintenant, pour tout ça, ajustons rapidement ça parce que nous n'avons pas besoin qu'il soit tout ce blanc. Ce que vous allez faire en fait, c'est simplement ajuster certains de ces éléments. Donc, fondamentalement, pour la recherche qui va être la plus importante, je vais en fait utiliser deux colonnes. Donc quelque chose comme ça. Et je vais amener ces deux là. Je vais aussi rapporter ma proximité d'ici. Donc tout le chemin vers le bord et puis 12, parce qu'une fois de plus, il va s'étendre jusqu'ici. Donc nous pouvons aller à l'état cliqué maintenant. Et ajustons-nous à ici. Et nous allons apporter une recherche BG et l'icône fermer tout le chemin jusqu'ici. Comme ça. Allons entre eux. Et je devrais encore le changer ici. Donc ça, ça, et ça va passer à ici. Apportons la recherche. Mettez-le à 10 par exemple, et quand apporter ces deux-là comme ça. Et maintenant, voyons si on l'a fait. Ouais, maintenant ça a l'air super. Donc, avant de passer à autre chose, vérifions rapidement et voyons à quoi ça ressemble ici. Alors cliquez sur une recherche juste là. Mais cela n'est pas aligné correctement. Voyons ce que tu as fait de mal. Et tout d'abord, je vais réellement supprimer cet état d'horreur parce que nous n'avons pas besoin pour cette taille parce que nous sommes à la taille de la tablette. Donc ce que je vais faire est de le copier. Nous sommes sur un état par défaut. Je vais le dégrouper. Je vais mettre simplement l'appeler bouton appliquer et je n'ai pas besoin de ce composant réellement là. Revenons à la recherche et voyons ce que nous avons fait de mal. Donc, sur l'icône des vêtements, je vais les sélectionner pour cliquer ici pour le mettre juste ici à ce bord. Je vais m'assurer qu'il est 20 à gauche, comme ça. Et puis je vais faire le même état cliqué interne. Donc je vais le mettre ici. Et voyons, je peux le faire pivoter en arrière. Donc il y a comme ça. Je fais ce bord, puis je décale 1, 2, et finalement tourné comme ça. Alors maintenant, allons entre eux. Je vais frapper mon aperçu une fois de plus. Cliquez ici. Et comme vous pouvez le voir, maintenant, il reste là où il ne devrait pas être. Il est dit de chercher des voyages juste ici. Tout se développe bien. Alors, qu'est-ce qu'on peut vraiment ajuster ici ? On peut le laisser tel qu'il est. Si tu veux. Prévisualisons une fois de plus. Donc, nous pouvons le laisser tel quel, ou vous pouvez l'ajuster encore plus si vous le voulez. Mais je pense que je vais juste le garder comme ça. Nous pouvons sauter, c'est hors des actes de bateaux et simplement les ajuster et donner en particulier le type de peu plus de place à gauche et à droite. Mais il y a une certaine largeur pour le garder juste pour l'amour du temps. Et ce que je peux faire, c'est de déplacer tout ça à 80. Alors laissez-moi sélectionner rapidement que certains nav en bas. Comme vous pouvez le voir, on est à 100 ans ici, alors déplacons-le jusqu'à 20 ans. Et c'est à ça que ça ressemble dans une prime. Et au fait, je n'ai pas mentionné ça. Si vous avez deux écrans sur votre machine, vous pouvez créer un aperçu en direct. Et j'ai besoin de supprimer cette exploration maintenant aussi. Ainsi, vous pouvez créer un aperçu en direct, peut simplement ouvrir cet aperçu cliquez ici pour l'ouvrir à l'aperçu du bureau. Ensuite, vous pouvez mettre cet aperçu du bureau sur le deuxième écran et vous pouvez concevoir en temps réel. Alors allons à l'image du héros. Allons à notre bouton héros. Et je vais simplement copier mon texte et faire un clic droit dessus. Allez, viens, viens. Dégrouper le composant, Control G. et désolé pour tous ces problèmes, mais c'est juste ma machine. C' est juste un peu lent parce que je cours deux versions de XD, deux écrans de XD. Et je suis aussi en train d'exécuter tout ce logiciel dessus. Je cours ce précédent de leur logiciel audio est toutes ces choses. C' est pourquoi vous pouvez voir tous ces pépins de temps en temps. Mais vous ne devriez pas avoir tous ces problèmes quand vous commencez à travailler dessus. Alors maintenant, nous supprimons ça. Alors maintenant, quand j'appuie sur l'aperçu et que je retourne à ici, revenez à ici. Vous pouvez voir que nous avons juste ce bouton vide à l'intérieur. Nous devons également supprimer l'état de vol stationnaire de ces flèches. Donc, ce que je vais faire en fait, c'est Aleve à l'état de vol stationnaire, puis le dégrouper. Alors faisons ça. Changons rapidement nos flèches à l'état Horace, flèche droite à l'état Horace. Et je vais simplement, par exemple, dissocier le composant. Appelle-le, c'est ça. À ce stade, Contrôle C. Je vais dégrouper le composant Contrôle G. Vous allez être flèche gauche. Et c'est rapidement prévisualiser et voir si cela fonctionne toujours. Donc, quand je clique ici, vous pouvez voir parce que nous étions au domaine d'horreur, vous pouvez toujours cliquer dessus parce que nous n'animons pas vraiment les flèches. On animait ces points. Alors allons de l'avant et faisons ça pour l'image numéro deux. Alors je vais ouvrir mes flèches. Je vais dégrouper le composant Control G juste ici, flèche gauche. Maintenant, désolé, je dois passer à mon état d'horreur d'abord sur botulinum. Comme ça, cliquez avec le bouton droit de la souris sur le composant Contrôle G, flèche gauche, dégrouper le composant Contrôle G et, ou flèche droite comme ça. Et enfin, faisons cela pour le premier état, pour les lignes d'état par défaut, Passons au survol. Passons au vol stationnaire. Alors contrôlez C sur le groupe, contrôlez G. Là, vous l'avez. Et enfin, dégrouper le composant ici, Contrôle G. et je vais renommer cette habitude laitière de la flèche droite. Alors maintenant, vous pouvez voir à quel point il est facile de travailler avec. Juste parce que sur une version tablette vous vous débarrassez de tous ces états d'horreur. Donc, fondamentalement, cela va rendre notre travail beaucoup plus simple parce que nous n'allons pas avoir nos états, par exemple, pour ces cartes et ces cartes ici. Donc ce que nous allons faire ici, et je vais sauter dans une seconde et expliquer tout ça dans la prochaine vidéo. Mais permettez-moi de vous le montrer rapidement dans un vrai exemple. Donc, par exemple, passons avec le titre de la section. Déplaçons le juste ici. Et ce que je vais faire, c'est en fait rapprocher un peu cela aussi. Donc maintenant, parce que nous avons huit colonnes, nous n'avons plus 12 colonnes. Chacun d'entre eux va prendre quatre colonnes. Et revenons à ici. Donc carte d'offre spéciale, flèche et lui oui, juste ces deux-là vont les amener ici. Je vais sauter à l'intérieur du milieu. Parce que nous sommes à la pile juste ici. Je vais vraiment ajuster ma pile, voir où ça me mène. Et voyons, par exemple, je peux rendre mon image plus étroite. Donc, ajustons-le pour qu'il soit de quatre colonnes de large. Et puis nous allons déplacer tout notre contenu ici. Maintenant, nous avons un peu plus d'espace pour jouer avec notre pile. Pour que je puisse l'ajuster à ici. Mais si vous pensez que c'est trop proche et que vous voulez vous débarrasser de cette icône pour une raison quelconque, alors vous pouvez, et vous pouvez l'ajuster comme ceci. Mais je pense que ça va marcher comme ça d'une façon ou d'une autre. Maintenant, enfin, pour ces diviseurs, qui sont la chose la plus ennuyeuse à propos de cette mise en page, nous allons les déplacer ici. Et lorsque vous réglez tous ces autres, souvenez-vous simplement de la valeur de ce diviseur. Donc c'est trois à deux. Voyons donc pour l'arrière-plan. Oui, on y est. Et comme il l'a dit, parce que nous allons nous débarrasser de l'effet de vol stationnaire lui-même, ce que nous allons faire, c'est que vous pouvez vraiment sauter dans le vol stationnaire juste ici. Et faisons ça. Je devrais vraiment faire ça. Donc nous sommes maintenant dans un état d'horreur pour tout ça, comme vous pouvez le voir, je vais sauter à l'intérieur de ma flèche et de la flèche droite. Vous m'avez sûrement laissé entrer pour que vous puissiez voir quand je vais un peu mieux. Et nous allons ajuster notre image à quatre et déplacer tout notre contenu une fois de plus jusqu'ici. Maintenant, nous allons cliquer ici et simplement amener tous ces gars à peu près ici. Et positionnez-le ici. Alors 313, copiez-le et sautez ici à l'habitude 13 Dairy. Donc maintenant ce que je vais faire, c'est sauter de côté notre masque parce que nous sommes maintenant dans l'état d'Horace. Ce que je vais faire est de cliquer ici, cliquez ici. Et puis au lieu de 8%, je vais aller à 5%. Et ce que vous pouvez faire, c'est que vous pouvez laisser ces images un peu zoomées si vous le souhaitez. Mais la clé, c'est ça juste ici. Donc je vais aller à ma flèche droite et aller à mon effet d'horreur. Sélectionnez. Donc contrôlez C ou cliquez avec le bouton droit et dégroupez le composant. Vous pouvez aussi faire est de le laisser comme ça. Je pense que ça devrait rester. Il n'est donc pas nécessaire que nous fassions autre chose. Oui. Parce qu'on ne l'a pas animée en arrière du vol stationnaire. Donc ça va rester en vol stationnaire. Et je pense que ça ressemble bien à ça. Si vous ne voulez pas le laisser comme ceci, vous pouvez simplement le revenir à l'état par défaut, donc comme ceci. Donc maintenant, lorsque vous appuyez sur l'aperçu, il va rester à ce stade par défaut, mais vous devez le supprimer. Donc, double-cliquez sur Contrôle C ou cliquez avec le bouton droit composant Contrôle G pour regrouper avec l'arrière et basé dans le nom, donc flèche droite et habitude laitière. Donc, comme il l'a dit dans la vidéo suivante, nous allons jouer avec toutes ces choses et animer ces deux et enfin, quatre boutons morts en bas, nous pouvons maintenant le rendre beaucoup plus blanc parce que nous avons cet espace. Donc position et juste autour ici par exemple. Et je vais m'assurer que c'est quatre colonnes de large. Mais une fois de plus, parce que nous passons maintenant à ces deux-là, vous pouvez voir, donc si je cache celui-ci et montre celui-ci, vous pouvez voir qu'on a déplacé ces deux-là et qu'ils fonctionnent comme ça. Donc ce que je vais faire est d'appeler ça pour nous, minutes, btn. Et je vais faire un clic droit dessus, dégrouper le composant Control G pour le regrouper. Donc toutes les premières minutes. Et je vais faire la même chose pour celle-là. Mais sur celui-ci, au lieu d'abord, je vais l'appeler classe. Je l'ai fait. Laisse-moi cacher celui-là. Comme vous pouvez le voir à la première ou à la dernière minute, tout fonctionne comme il se doit. Et cachons ce dernier. Et la vache laitière, C'est, donc c'est tout pour cette vidéo. Comme je l'ai dit, nous allons les aborder dans la prochaine vidéo. Nous allons ajuster et nous pouvons faire la vidéo dans celle-ci parce que c'est vraiment assez simple. Et je vais aussi ajuster un peu la hauteur. Et à cause de la pile comme d'habitude, mise en page s'ajuste bien. Donc, je vous verrai dans la prochaine vidéo quand nous allons continuer notre travail sur cette taille de tablette. 45. Créer une conception réactive de la conception de son réagissant 9: Ok, continuons là où on s'est arrêté. Et avant de le faire, je pense juste à quelque chose parce que nous avons toutes ces flèches partout ressemblent à ça. Ils vont ressembler à ça ici, dans ces états. Et aussi nous les avons ici comme ces bleus. Je pense que revenir en arrière devrait vraiment les changer ici. Donc dans tous nos états de héros, donc pour l'image du héros, là, je vais sauter à l'intérieur de mes flèches et j'ai ma soi-disant couleur. Je vais simplement le réduire à 0. Et je vais faire la même chose pour ici juste pour garder la cohérence d'entre eux parce que je ne pense pas que ces options sont si géniales juste dans cette section sans les changer dans toutes ces autres sections. J' appuie sur 0 deux fois et je vais les fermer ici. Revenons au numéro 3 et localisez-les juste ici. Et la santé laitière. Maintenant passons rapidement aux offres spéciales. Et sous les offres spéciales, ce que je vais faire est de sauter à l'intérieur de celui-ci, par exemple, et de voir tous ces paramètres. Donc je vais sauter un milieu soudain. C, l'espacement de 2002 par exemple, et le diviseur est à 3, 1, 3. Donc je vais m'en servir pour celle-là. Donc, tout d'abord, sautez à l'intérieur d'ici, déplacez toutes mes informations pour entendre plus de ma flèche ici et mes antécédents ici. Donc je vais sauter assigné à mon diviseur, utiliser la saleté 313 et je vais sauter à l'intérieur d'ici et utiliser 22 et Derek l'ont. C' est donc beaucoup plus rapide et vous copiez et collez simplement tous ces éléments. Alors je vais cacher ces trois. Alors nous allons sauter à l'intérieur de notre Paris, mais je dois les cacher comme ça pour que je puisse éditer celui-ci. Créons ici. Et je vais sauter à l'intérieur et bouger tout ça. Et je vais les sélectionner pour les déplacer en même temps, deux ici. Et je vais ouvrir mon masque. Positionnez-le ici et double-cliquez sur cette flèche. Cliquez avec le bouton droit de la souris sur Ungroup component Control G et appelez-le une flèche vers la droite. Et voyons, ce qui est juste ici était 313. Et ici, nous pouvons utiliser 22. Et c'est le grand avantage et la puissance d' utiliser ces piles parce que vous pouvez simplement les ajuster comme vous le souhaitez. Et cela suivra tout en gardant la même distance que vous pouvez voir ici. Donc, j'aime vraiment cette fonctionnalité, mais encore une fois, semblent comme toutes ces fonctionnalités, ça va s'améliorer dans le temps et ça va être beaucoup plus simple à utiliser. Plus vous l'utilisez et plus ils sont mis à jour au fil du temps. Si près que je vais sauter à l'intérieur du milieu ici. Utilisez 313 et nous allons utiliser 2250, cette laiterie Howard et simplement allé à l'intérieur de Hero mental 3, 1, 3, et utilisez 22 pour celui-ci. Et maintenant, les dettes sont terminées. Un que je vais faire est de les ramener, sélectionnez les trois Q à 0 carte MCI afin que je puisse les ramener. Je vais sélectionner mon Haggadah Control C ou cliquer avec le bouton droit de la souris sur Ungroup component Control G et le ramener. Faites de même pour Tokyo. Et je fais ça parce que, comme je l'ai expliqué, nous n'avons plus d'états d'horreur. Donc, il va être beaucoup plus rapide pour nous de créer tous ces juste parce que nous utilisons un seul état, juste que nous voulons un look essentiellement recadrage appelé clic droit Ungroup. Et enfin pour taper un clic Dégrouper. Et là, vous l'avez. Donc maintenant, si vous vous souvenez, nous avons l'état par défaut et nous avons des offres de dernière minute. Donc, ce que je vais faire est en fait la même chose qu'il a toujours fait tout au long de cette classe, c'est sélectionner tous mes éléments, Contrôle C. Sauter à l'intérieur des offres de dernière minute basées dans le haut, puis supprimer tous les anciens. Donc, ce que je vais faire ici, je vais d'abord passer à mon état par défaut. Et ces trois vont rester au sommet pendant que ces trois vont être cachés. Ensuite, je vais sauter à l'intérieur des offres de dernière minute. Puis ces trois vers le haut, nous allons être cachés et ces trois vont montrer pendant que ces boutons. Alors voyons, première minute je vais le cacher. Dernière minute, je vais le montrer. Fin. L'animation devrait fonctionner parce que nous n'avons pas changé le dosage. Donc, quand je clique ici, vous pouvez voir qu'il change ici. Mais pour une raison quelconque, il n'a pas animé. Donc, allons-y prototype d'état par défaut. Et voyons ce qu'on avait ici. Je pense que c'était, est dans notre 0.6. Alors passons rapidement aux offres de dernière minute et je vais sélectionner celui-ci est dans notre état par défaut 0.6. Prévisualisons-le pour voir à quoi cela ressemble. Donc, en un clic juste ici pour passer à la première minute, cliquez pour aller à la dernière minute. Mais à l'intérieur des offres de dernière minute, j'ai oublié de changer le texte. Donc, nous avons eu ici, nous sommes dans l'état par défaut. Nous avons sélectionné des offres de première minute. Quand on passera au dernier état, à la dernière minute, ce que je vais faire, c'est m'assurer que celui-ci est fleuri au bleu principal. Et assurez-vous que c'est gris clair comme ça. Alors maintenant, quand je vais au prototype et que je clique pour le prévisualiser, nous sommes dans les dernières minutes. Nous sommes à la première minute et vous pouvez voir les changements. Et si je fais défiler vers le bas, vous pouvez voir que nous avons tous la première minute sans vol stationnaire, nous devons aussi enlever le Hubbard ici. Alors allons-y et faisons-le. Donc je vais sauter à l'intérieur de notre icône de lecture vidéo promo. Je vais m'assurer que je suis sur l'état par défaut, copier du texte, dégrouper le composant Control G. Et c'est fondamentalement ce qui va vous prendre le plus de temps en gros, dans ceux-ci ne sont pas ces icônes. Donc, parce que nous avons des destinations européennes ici, ce que je vais faire, c'est simplement aux États-Unis, en Europe, comme ça. Et puis utilisez la section intitulée positionnez-le au centre. Et ce que je vais faire ici, c'est. Peut-être pourrions-nous en avoir quatre, disons, ou même six, mais nous pouvons en ajuster la taille. Donc ce que je vais faire d'abord, c'est ajuster mon groupe scrollable à Hyrum. Et puis je vais ajuster mes villes. Voyons voir. Ouais, je pense qu'on peut en utiliser 6. Alors, qu'est-ce qu'on va faire pour chacun ? Ceux-ci ont fondamentalement qu'il soit quatre colonnes de large. Donc, cela n'exigera pas vraiment tous ces changements majeurs. Donc, tout d'abord, sautez à l'intérieur de chacun et simplement vous survolez. Mon père, mon père. Et ce que nous pouvons aussi faire, c'est de sauter à l'intérieur de chaque contenu. Donc, cette flèche de groupe et récapituler cette flèche droite. Ce que nous pouvons faire est d'aller au prototype et simplement pour chacun, cliquez et faites-le glisser à l'extérieur. Donc, comme ceci, cliquez et faites-le glisser vers l'extérieur pour le survol. Ou nous pouvons même, voyons comment pouvons-nous l'enlever ? Aucun. Alors nous allons prévisualiser cela et voir à quoi cela ressemble. Pour que je puisse tomber avec ça. C' est écrit Paris. Je peux planer dessus. Donc, vous devez simplement sélectionner aucun. Il ne montrera pas l'horreur, il ne ressemblera pas à ceci. Et pour ces derniers, nous pouvons, comme je l'ai dit, vous pouvez le laisser comme ça ou vous pouvez passer au vol stationnaire si vous voulez plus grande flèche. Donc, c'est vraiment à vous de choisir. Vous pouvez donc simplement sélectionner Aucun pour chacun d'eux. Et je peux cliquer sur celui-ci. Je peux sélectionner le vol stationnaire. Alors allons-y avec aucun. Alors. Je peux sélectionner celui-ci, destination none, et destination none, afin que nous n'ayons pas à les dissocier et à faire toutes ces choses. Aucun. Et enfin, neuf ici. Et Dario. Donc, c'est fondamentalement tout. Je vais faire la même chose pour ceux-là. Donc, à l'intérieur de mes flèches, je vais aller avec aucun parce que je ne veux pas que ça change pour planer. Juste ici. Je ne vais pas y aller et je vais juste les laisser comme ils le sont, pas vrai. Partager. Que nous puissions aussi faire la même chose pour le bouton. Revenons à la conception. Et tout d'abord, ajustons pour être, par exemple, quatre colonnes de large. Je vais l'ajuster comme ça. Et je vais aussi faire la même chose pour le vol stationnaire juste au cas où, par exemple, plus tard, vous pourriez changer d'avis et vous voulez utiliser l'état d'horreur pour une raison quelconque. Donc, vous pouvez aller au prototype et vous pouvez y aller. Alors maintenant, quand j'appuie sur l'aperçu, ça devrait rester comme ça pour tous afin que nous ayons cette option de ne pas les dissocier tous. Alors voyons. C' est là. Si je les change, c'est là. Ainsi, vous pouvez même laisser ces cartes car elles sont juste ici pour accélérer l'ensemble du processus. Mais comme je l'ai dit, c'est peut-être mieux de le tuer un peu. Peut-être que vous pouvez même vous débarrasser de ces flèches. Donc, cependant vous voulez faire cela, mais je vais en avoir seulement deux et ensuite les faire défiler à gauche et à droite. Avant de faire tout ça, laisse-moi revenir à ces cartes parce que quelque chose ne va pas, juste ici. Donc, nous sommes dans une offre de dernière minute à ce stade. Et je vais fermer tout ça. Maintenant. Voyons voir. Ce sont R3. Donc on a Paris fissure de Taipei et je vais les changer. Voyons voir. Ce que je n'ai pas fait, c'est que je n'ai pas sélectionné mon contenu. Revenons donc à l'état par défaut. Ce que je vais faire ici, c'est que je vais sauter, signer des villes. Je vais le faire, Voyons voir. Désolé, je change de destination européenne et je me demande ce qui se passe. Donc ici, je vais les ajuster. Parce que si je sélectionne ces trois en haut, vous pouvez voir que nous avons fait ces changements vraiment bien, mais avec ceux-ci ont effectivement oublié d'étendre ces masques. Alors faisons vite ça. Fissure de flèche. Masque va être 80 à mon père et flèche droite aller au prototype et simplement utiliser aucun. Donc nous ne nous embêtons pas avec toutes ces choses. Allez à taper un masque de flèche. Leur conception 82 flèche prototype. Il suffit de lui donner le temps de changer parce que comme je l'ai dit, j'ai plusieurs choses en cours d'exécution. Donc je vais aller avec non, retourner à Design, changer comme ça. Et maintenant, je vais tout simplement les copier une fois de plus. Donc, je vais utiliser ceux-ci et les boutons et le contrôle C et passer à l'état par défaut. Cachons ces trois en haut et ramenons ça. Donc, voyons, je peux sélectionner appelé Gada jusqu'au contrôle des boutons V. Là, nous avons le titre de la section, et juste au-dessus des onglets, XD agit bizarre aujourd'hui. Donc offres, je vais montrer celui-là, cacher celui-là. Je vais cacher 123 en bas. Je vais montrer ces trois premiers, parce que maintenant nous avons fini tout ça. Donc, je vais montrer ces trois dans l'état par défaut. Et dans l'offre de dernière minute, nous avons la dernière minute et nous avons ces trois en bas, ce qui est très bien. Tout fonctionne comme il se doit, terminez-le fondamentalement. Donc, avant de les sélectionner et de les éditer tous, je veux vous en montrer un, et je veux vous montrer comment je vais réellement ajuster. Parce que, comme je l'ai dit, nous sommes dans l'état d'horreur, nous n'allons pas trop le changer. Ce que je vais faire en premier, c'est sauter à l'intérieur de chacun. Comme ça, ouvrez mon contenu. Et pour chacune de ces cartes de destination. Et nous allons cliquer ici et taper cinq. Donc je vais le faire très vite parce que comme je l'ai dit, nous n'avons plus cet effet de vol stationnaire. Nous utilisons simplement tous ces autres sans aucun effet de vol stationnaire. Donc, je vais utiliser cinq. Cliquez ici. Utilise cinq, puis saute juste ici. Et enfin ce seul clic, utilisez cinq et leur tête. Donc je vais fermer tout ça parce que je vais travailler sur celui de Paris et voir ce que je veux dire. Donc pour celui de Paris, ce que je vais faire, c'est de sortir tous ces autres du chemin pour qu'ils ne me dérangent pas trop. Salut, Dans ce, je vais simplement étendre tout mon contenu ici. Et c'est fondamentalement tout. Alors que pouvez-vous faire à ce stade est simplement sauter à l'intérieur du milieu, sélectionner vos séparateurs, et simplement les aligner ici avec le bord gauche de vos textes. Ils vont rester là. Mais vous pouvez aussi faire est de les étendre si vous voulez. Par exemple, 300, voyez où ça vous mène. Et puis sauter à l'intérieur d'ici et ajuster chacun de ces outils, disons 741 ligne et ensuite peut être 642 lignes de texte. Et je pense que c'est bien. Alors vérifions une fois de plus. Donc les 36074 D. Alors sautez à l'intérieur de Londres. Élargi. Retournez à la section du milieu. Il a en fait déplacé toute la section, ce qui est très bien. Et voyons voir. Donc, je peux cliquer ici en entrant 300 par cela. Et je peux faire la même chose pour celle-là. Par exemple, 60 ou 70 parce que nous avons juste un texte de ligne ici. Et nous avons eu là. Donc je vais terminer la vidéo ici et je reviendrai une fois que j'ai fini, pas seulement celle-là, mais toutes ces autres, encore une fois, pour ne pas t'ennuyer. Ensuite, nous allons aller de l'avant et continuer avec tous ces autres articles parce que, encore une fois, ces articles prennent beaucoup trop de temps. Comme je l'ai dit, je ne veux pas m'inquiéter, vous ennuyer trop avec tous ces détails inutiles parce que ce que je fais est ce que je viens de vous montrer. Il suffit de rincer et de répéter, rincer et répéter. Et puis je vais vous montrer ce que j'ai fait pour ces états parce que nous avons par défaut et nous avons cliqué. Comme je l'ai dit, c'est tout pour cette vidéo. Je te verrai dans la prochaine. Une fois que j'aurai fini tout ça, je peux te montrer où on va aller ensuite. 46. Créer une conception réactive Rédiger une conception 10: Ok, alors continuons maintenant. Mais avant nous le faisons, je suis déjà allé de l'avant et j'ai créé des composants pour ces nouveaux que je viens de créer. Mais je ne l'ai pas fait parce que je voulais te montrer ce que je vais faire parce que j'en ai six. Et vous avez vu mort. J' ai coupé ce groupe de livres de défilement ici. Ainsi, jusqu'au bord de nos lignes de réseau ainsi qu'au bord de nos aéroports. C' est exactement la même chose qu'on a fait jusqu'à présent pour toutes nos tailles. Donc ce que je vais faire parce qu'on en a six, je vais créer trois états différents. Donc, pour ce faire, je dois dissocier ce composant et en créer un nouveau. Mais je ne vais pas faire un clic droit et le dégrouper comme ça parce que, comme vous pouvez le voir, cela casse notre mise en page parce que les choses Adobe XD que nous voulons 150 entre tous ces différents éléments. Parce que, par exemple, ces deux ne sont pas regroupés. Donc, il est juste de les envoyer juste là. Ce que je vais faire, c'est de revenir en arrière, ouvrir mon composant, de les sélectionner tous, de frapper Control G et de plonger en Europe, par exemple. Et puis je vais cliquer avec le bouton droit et dissocier le composant, qui va garder 150 pour ces deux. Et ça va garder tout ça à l'intérieur. Ensuite, je vais frapper le contrôle K pour celui-là. Donc, juste pour la créer comme une Europe. Et puis je vais l'appeler étape 2, par exemple. Comme ça à l'intérieur de l'état à ce que je vais faire, c'est sauter, signer MOI, les villes alignent et celui-ci droit à ici, comme ça. Et puis je vais créer un autre état, qui va s'appeler l'état trois. Et à l'intérieur de l'état trois, je vais utiliser mes villes une fois de plus et les aligner comme ça. Alors maintenant, allons de l'avant et prototypographie. Donc, passez à la valeur par défaut, prototype d'état. Je vais ouvrir mes flèches, à droite, point de tabulation. Je vais cliquer sur vous estab auto animate, facile. Maintenant notre 0.6, donc la même chose que pour tous ces autres vont à l'état deux. Et puis au lieu de l'Etat, je vais faire la même chose. Donc ici, je vais cliquer, Revenir à l'état par défaut, et je vais cliquer sur celui-ci. Retourne à l'état trois, comme ça. Et enfin, à l'intérieur de l'état trois, je vais utiliser mes flèches point de données de laboratoire. Je vais aller à l'état 2. Donc maintenant, si je retourne à la conception d'état par défaut, appuyez sur prévisualisation et vous montrer à quoi ressemble ce précédent. Alors faisons défiler vers le bas jusqu'aux destinations européennes. Ils sont là. Donc, une fois que nous avons frappé la flèche, parce que nous n'avons pas, aucun effet de vol stationnaire, c' est que vous pouvez voir les utilisateurs peuvent simplement taper et il va les amener à toutes ces choses, tous ces endroits différents. Et il peut simplement choisir la voiture qu'ils veulent. Parce que nous avons supprimé l'effet de survol de toutes ces flèches. Comme vous pouvez le voir, une fois qu'ils ont plané leur doigt sur eux, ça ne va rien faire et ça ne changera rien. Donc, en gros, laissez-moi appuyer sur Control S pour sauvegarder tous nos changements jusqu'à présent. Et je veux expliquer cette section. Donc, fondamentalement, ça va être extrêmement simple à ajuster. La seule équipe qui va le faire est fondamentalement juste ajuster la largeur de notre image et mettre notre contenu au centre. Ensuite, faites la même chose pour le bouton lui-même. Donc, tout d'abord, ajustons rapidement notre image. Donc, je vais utiliser mon image ajustée comme ça. Et je vais aussi cliquer ici et ajusté à juste ici. Donc, parce que notre image déplace le bit vers le bas, je vais double-cliquer dessus et je vais le déplacer comme ça pour l'ajuster. Ensuite, je vais placer mon contenu au centre comme ça. Il garde toujours les mêmes distances et l'édition. Passons maintenant à ce bouton de positionnement Reich, comme ça. Je vais aussi utiliser le survol juste au cas où vos clients changeraient d'avis et qu'ils veulent l'utiliser comme ça. Nous pouvons aller au prototype et simplement cliquer ici à zéro, aussi. Désactivez cet effet de survol. Donc nous ne voulons pas cet effet de vol stationnaire. Et tu peux toujours y retourner et leur dire. Ok, donc voici à quoi ça ressemble parce qu'on l'a gardé en tant que composant. Une fois de plus, je vous montre les deux options. Si vous vous souvenez de la section héros, nous avons dissocié le composant à l'état que nous voulions. Vous pouvez aller sur cette route ou vous pouvez simplement désactiver ces effets à partir de là. Et puis vous pouvez simplement désactiver ce survol et ils peuvent choisir ce qu'ils veulent en faire. Comme je l'ai dit, j'ai fait la même chose pour les Amériques et pour l'Asie. Et maintenant passons à cette section. Donc, cette destination haut de gamme et le lithium l'alignent rapidement sur ici comme ça. Laissez-moi sauter à l'intérieur, voir mes flèches, et vérifier rapidement nos destinations, voir si elles sont alignées correctement. Ils le sont. Donc ce que je vais faire avec ces flèches, parce qu'il est évident que nous n'avons pas trop d'espace ici. Je peux, par exemple, supprimer des destinations de bureau, et je peux simplement écrire dans des destinations, mais je ne vais pas le faire. Je vais mettre mes flèches ici. Et je vais m'assurer qu'ils sont centrés comme on l'a fait en haut. Donc je vais sauter à l'intérieur de ma flèche gauche et je vais la déplacer juste ici. Je vais faire la même chose pour une flèche d'écrivain comme ça. Et voyons, par exemple, je peux les positionner pour être, voyons, 80 par exemple. Ou encore mieux, 60 parce qu'on n'a pas besoin d'eux pour être aussi gros. Donc, ce que nous allons traiter avec celui-ci est assez simple. Je vais faire exactement la même chose que je l'ai fait auparavant. Donc, ce que je vais d'abord faire est de frapper Control G sur celui-ci, les meilleures destinations de qualité. J' aime ça. Je vais faire un clic droit ici sur le composant de groupe parce que nous n'en avons plus besoin et nous n'allons pas utiliser de survol. Nous allons utiliser exactement la même ombre portée sur tous ces champs que nous l'avons fait en haut. Donc ce que je vais faire ensuite, c'est sauter à l'intérieur et ajuster chacun d'eux. Alors tout d'abord, amenons ces deux là. Nous allons donc les avoir quatre colonnes de large pour chacune. Maintenant, ajustons ceux-ci. Laisse-moi cacher ces deux premiers. Je vais utiliser Munson, Michelle. Et positionnez-le ici. Et enfin, je vais déménager Sydney ici, et la Cappadoce, je vais la déplacer ici. Maintenant, ramenons ça. Donc, tout d'abord, je vais cliquer sur mes Maldives et simplement les étendre à ici. Cliquez sur le dernier Lake District, puis cachez-les pour qu'ils ne gâchent pas notre disposition. Donc, nous pouvons effectivement cliquer sur ceux qui sont en bas. Ainsi peut manger monstre Michelle. Et comme vous pouvez le voir, nous avons encore quelques problèmes avec le texte. Donc, il est positionné au centre et assurez-vous que nous sommes dans un centre comme celui-ci. Donc, nous l'avons là. Et je vais cacher ces deux-là et travailler sur la Sydney, trouver et travailler sur la Cappadoce comme ça. Donc, vous pouvez voir que nous avons quelques problèmes ici. Voyons ce qu'on peut faire. Je peux mettre, par exemple, la cheminée de fées, juste pour qu'on n'ait pas ce mot en bas. Et je vais aussi aller de l'avant, par exemple, formations vers le haut. Comme ça. Riche en autorisations irakiennes gardées, habitations gardées et je vais le coller ici, suggère que nous gardons le même espacement et les mêmes distances pour tous. Parce que nous avons le contenu pour chacun d'eux et nous avons le dossier appelé contenu. Je ne vais pas le faire parce que si vous vous souvenez, nous avons l'effet stationnaire juste ici. Donc, je vais juste double-cliquer ici, sélectionner mon texte, double-cliquer ici. Et je suis basé dans le texte des Maldives. Et quand faire la même chose pour cela ? Basé là où il est dit Lake District. Je vais faire la même chose ici. C' est juste là, et j'ai encore quelques insectes. Alors, laisse-moi enregistrer mon document. Parce que parfois XD, comme vous pouvez le voir, il montre toutes sortes de bugs différents. Je ne sais pas ce qui se passe parce que je suis en train de mettre à jour obtenir dès qu'ils voient les mises à jour. Je voulais juste vous montrer que ça peut aussi arriver. Alors assurez-vous de comprendre, comme vous pouvez le voir, quelques problèmes ici. Alors essayons ça. Si je clique à l'extérieur, puis cliquez sur retour en Toscane, par exemple, double-cliquez ici. Cela montre toujours ces questions, mais au moins cela me donne la possibilité de travailler sur mes textes. Il suffit donc de copier et de coller. Et enfin pour la Cappadoce, et nous allons copier et coller. Et nous l'avons là. Donc, ce que je vais faire maintenant est simplement faire un clic droit sur le groupe, cliquez avec le bouton droit de la souris sur Ungroup. Et je les mets évidemment à l'intérieur parce qu'on a cette pile. C' est pourquoi je les mets dans un groupe et les renomme pour qu'on sache lequel est lequel. Donc, nous allons maintenant sélectionner ces quatre. Déplacez-les un peu à l'extérieur et voyons, je pense que nous avons 29 ans parce que c'est notre largeur de gouttière. Il l'est. Et enfin, sortons ces deux derniers du chemin. Donc, je vais positionner dans beat 2009 et assurez-vous que ce défilement, groupe de défilement est juste là. Maintenant, je vais sauter à l'intérieur. Donc le prototype va à mes flèches et voir ce que nous avons là. Donc, sur une flèche gauche, nous avons le vol stationnaire. Je vais cliquer ici, puis utiliser non pour que je puisse le supprimer. Et c'est fondamentalement tout. Maintenant, nous allons faire la même chose parce que nous avons les meilleures destinations. Je vais appuyer sur le contrôle K ou la commande K pour créer un composant. Et puis nous allons créer l'état 2. Et puis pour l'Etat, ce que je vais faire, c'est sauter à l'intérieur d'ici et aller aux destinations. Alignez-le ici, comme ça. Et nous allons créer un nouvel état. Donc état trois, à l'intérieur d'un état 3 aller vers les destinations, cliquez et faites-les glisser directement vers ici. Et maintenant, allons au prototype d'état par défaut, ouvrez vos flèches, faites un clic droit, point de profondeur droit, désolé. Donc, au lieu du vol stationnaire, nous allons sortir pour animer l'état pour se relâcher et 0,6 seconde aller à l'état à gauche à ce moment va aller à un état par défaut, comme ça, à droite à ce moment va aller à l'état numéro 3. Et enfin, nous pouvons aller à l'état numéro t et utiliser notre flèche gauche comme ça. Cliquez ici et allez à l'état deux. Et enfin, maintenant les dettes terminées, je peux frapper Save et nous pouvons passer à autre chose et un design, le voyageur nous aime. Donc, ces sections de témoignage. Donc, ce que nous pouvons réellement faire pendant qu'il est économisé, c'est que nous pouvons l'ajuster d'une manière que nous pouvons , par exemple, supprimer les nombres ou même garder les nombres parce que nous voulons continuer cette animation. Donc nous pouvons garder les chiffres et garder les flèches, mais nous pouvons, par exemple, débarrasser de ces images. Donc, si nous nous débarrassons de ces images, alors nous devrons réajuster à quoi tout ressemble. Pour ce faire, passons aux témoignages. Et je vais déplacer mon titre de section au centre comme ça. Et Dan et quand utiliser mes flèches et les positionner à cet endroit. Parce que si vous vous souvenez, nous allons nous débarrasser des effets de vol stationnaire. Donc en sautant ici, flèche droite, je vais me débarrasser du vol stationnaire, flèche gauche. Je vais me débarrasser du vol stationnaire aussi bien que ça. Et voyons voir. À droite à ce point est simplement appuyez sur la gauche DEP point n'est pas disponible. Revenons à Design. Et comme je l'ai dit, nous allons les garder, mais pour les cartes de témoignage, ce que je vais faire est de sauter à l'intérieur de cette clé pour supprimer sur mon image. Et je vais simplement ajuster la largeur de ma carte pour entendre et plus mon texte au centre. Et parce que je l'ai fait, tout ce contenu va suivre. Maintenant, pour le texte lui-même, je vais sélectionner les trois, assurer qu'ils sont alignés au centre, assurez-vous qu'ils sont alignés au centre comme ceci. Et je vais simplement m'assurer qu'ils sont au centre de ma carte. Donc je vais faire la même chose pour ce numéro 2. Passons à ici. Et voyons quelle est la largeur de cette carte. C' est 678. Alors nous allons travailler sur notre texte. Tout d'abord, assurez-vous qu'il est au centre. Assurez-vous qu'il est centré comme ça. Voyons voir, 6, 7, 8, appuyez sur Entrée. Et je vais bouger mon texto ooh, le centre comme ça. Et il semble évident que nous l'avons fait avec tous ces autres, 678, nous allons vraiment les déplacer tous au centre. Alors revenons en arrière, cliquez là, ajustez mon texte. Et je suis allé sauter à l'intérieur, m' assurer qu'ils sont centrés et centrés, alignés, centrés. Et une fois de plus, sélectionnez ces deux hommes devraient texte est au centre. Et enfin, vous faites la même chose pour l'indécision au module numéro quatre. Donc je vais m'assurer que le dissenteur Marion d'entre eux sont des prêteurs. Laisse-moi aller de l'avant et vérifier. 678 est la largeur de nos cartes sur quand faire la même chose. Donc 6, 7, 8, comme ça. Et encore une fois, parce que notre texte est centré et que nous allons le déplacer au centre comme ça. Donc, nous l'avons là. La seule chose que nous devons faire maintenant est de déplacer les flèches et de se déplacer sous les cartes de témoignage. Donc je vais rapidement bouger ça. Fondamentalement, nous allons faire la même chose. Nous allons donc nous débarrasser de toutes ces autres animations, l'exception de celles-ci. Copions donc le titre de la section, les témoignages et les flèches. Hit Control C. Allez à notre témoignage à, donc je vais frapper Contrôle V et me débarrasser de tout sauf pour le texte à masquer. Donc, je vais déplacer le masque de texte juste au-dessus comme ça. Troupeau laitier. Et pour les témoignages eux-mêmes, je vais mettre le second ici. Laisse-moi vérifier si c'est aligné. Témoignage voiture numéro 2. C' est, ce qui est génial. Alors voyons une fois de plus. Ce n'est pas de la neige. Laisse-moi le bouger juste un peu. Et je vais en fait étendre cela à laiterie de ligne de réseau pour que tout aille bien. Et avant de passer à autre chose, je vais revenir aux témoignages par défaut du coin de l'état et juste voir si nous le sommes, nous ne le sommes pas. Maintenant, nous sommes le premier notre ligne Lytton, vérifier rapidement ce n'est pas donc je vais simplement l'aligner comme ça. Donc ils sont blessés pas Allons de l'avant et passons à autre chose. Donc c'est vérifié. Et le numéro 2, et je vais copier le titre de la session et les témoignages de celui-ci. Et aussi les flèches Contrôle C et aller à Témoignage 3, sautant ici, Contrôle V, Je vais me débarrasser de ces trois et positionner le masque de texte juste au-dessus de nos flèches pour les témoignages, je vais déplacer eux sur la position témoignage numéro 3, deux ici. Et voir s'il est aligné. Ce n'est pas le cas. Ok, alors maintenant c'est le cas. Mais pour une raison quelconque, ça me montre ça. Donc, incluons plus de rétrogradation. Voyons voir maintenant. Maintenant, je pense que ça marche. Donc ça va être bon. Et enfin, nous allons copier ce contrôle C et sauter dans le témoignage pour le contrôle V. Et je veux me débarrasser de ces plus, le masque de texte juste au-dessus. Et pour les témoignages eux-mêmes, déplacons le quatrième comme ça. C' est un peu court, mais ça marchera parce que je ne veux pas revenir en arrière et ajuster toutes ces largeurs une fois de plus, pour toutes, mais vous obtenez l'image. Donc pour le prototype, je vais sauter. Donc état par défaut. Ce que nous avons ici pour les flèches verrait. Donc, flèche droite, nous avons des points de pression droit ou appuyez sur témoignage aussi, ce qui est génial. Passons au témoignage aussi. Donc, nous allons utiliser notre flèche gauche. Donc, onglet auto animation, état par défaut, facilité dans 0.6 secondes comme la saleté, juste à ce point va faire la même chose, mais aller à l'arbre de témoignage. Alors passons au témoignage 3. Donc, sur cette flèche, nous allons revenir au témoignage sur celui-ci, nous allons aller au formulaire de témoignage. Et enfin, passons au témoignage pour n pour cela, nous allons utiliser cette flèche pour aller à un témoignage à l'état par défaut de mon père. Et nous allons cliquer, cliquez sur l'aperçu et voir à quoi il ressemble. Donc, si nous faisons défiler jusqu'à nos témoignages, tout d'abord, vérifions nos meilleures destinations et voyons qu'elles ont l'air bien. Bien sûr, si vous le souhaitez, vous pouvez supprimer la destination, désolé, le texte supérieur, aligner les textes de destination vers la gauche. Et il y a simplement utiliser les flèches comme nous l'avons toujours fait avec cette mise en page. Mais je pense que cela fonctionne bien de toute façon. Maintenant, pour ces témoignages, si je clique ici, vous pouvez voir que nous avons encore l'animation, nous avons les témoignages, donc tout fonctionne comme il se doit. Passons maintenant à cette section. Et pour cette section, évidemment parce que nous nous débarrassons de nos effets de couleur, ce que je vais faire est de mettre tout cela à l'intérieur d'un groupe et de copier mon texte ici, collez-le ici. Je vais faire la même chose pour ce contrôle G. Copiez mon texte, basé sur, à l'intérieur de ceci. Et enfin pour le voyage de schéma et quand utiliser la copie, je vais les sélectionner tous. Appuyez sur le contrôle G et la base juste ici. Donc ce que je vais faire avec ceux-ci, c'est d'abord, je vais les dissocier parce que nous n'avons plus besoin de ces effets de vol stationnaire. Et c'est pour ça que je les ai mis dans ces dossiers. Et pour celui-ci, nous allons activer la pile. Je vais utiliser cette pile comme ça. Et je vais utiliser ces paramètres. Donc pour les jeter, Voyons voir. Donc voyage bien-être. Nous sommes, voyons 420 en hauteur. Tout d'abord, ajustons le bureau à 420. Donc, je vais les utiliser et ajuster et la hauteur à 420 comme ça. Et le prix et le ski vont évidemment suivre. Alors déplacons-les comme ça et voyons où ils sont de la mort d'ici. Donc, c'est 40 en bas. Alors ajustons la même chose pour les morts. Alignez-les comme ça, 1234, donc donc vers le bas, ce qui est très bien. Et maintenant, ajustons-les rapidement en largeur. Donc je vais simplement l'ajuster comme ça. Allez aux croisières. Sélectionnez les trois, ajustez-les en largeur comme ceci. Et bien sûr, si l'une de vos images a besoin d'être mise à l'échelle , par exemple, celle-ci si vous voulez mettre l'accent sur une autre zone ou celle-ci, vous pouvez simplement double-cliquer parce que cela n'a pas d'importance, parce que maintenant nous n'avons plus de dette que ceux survolent les effets. Donc, c'est ce que nous avons fait jusqu'à présent. Avec nos partenaires. Je vais le positionner au centre et avec ces logos, par exemple, ce que je peux faire est de les agrandir un peu, en fait il a déménagé juste autour de deux ici. Peut-être que Nan Dan a simplement découpé ça ici. Et maintenant, les utilisateurs peuvent utiliser leurs doigts pour faire défiler vers la gauche et la droite parce qu'une fois de plus, ils sont sur les tailles de tablette. Pour celle-là. Faisons simplement ce que nous avons fait auparavant. Ajustez simplement notre image comme ça. Assurez-vous qu'il est aligné sur le bord qu'il est. L' image semble bonne, donc pas besoin de changer cela. Et pour le texte, il suffit de l'aligner au centre comme ceci. Et nous allons ajuster notre bouton, assurez-vous que nous le déplacons ici, maintenez Maj, et puis il y a Hover, faire la même chose comme ça, revenir à l'état par défaut. Et maintenant, enfin, ce que je vais faire, choisir le bouton, aller au prototype et simplement se débarrasser de cette couverture en n'utilisant aucun. Donc, il ne sait pas où il devrait aller et il ne créera aucune sorte d'animation. Pour ceux-là. C' est exactement la même histoire, alors il suffit de les aligner comme ça. Je vais utiliser mon texte une fois de plus, positionner ici. Et peut-être que je peux même aller un peu plus petit avec ce texte, donc c'est à 24. Voyons ce qu'on peut faire ici. Nous pouvons, par exemple, aller avec 18 et ce que nous utilisons ici. Donc, cette couleur, donc une fois de plus, 18, cette couleur, et il suffit de l'aligner ici. Je pense que ça a l'air assez bien. Maintenant, pour celui-ci, nous allons simplement ajuster pour entendre et les utilisateurs peuvent alors faire défiler vers la gauche et la droite. C' est à la ligne de grille ? Il l'est. Enfin, pour celui-ci, et c'est un peu délicat donc vous pouvez réduire le texte que vous avez mis à l'intérieur d'ici. Donc, je vais simplement, tout d'abord, ajuster notre position de texte au centre comme ceci. Ensuite, je vais ajuster tout mon texte, assurez-vous qu'il va aux bords de la ligne de grille comme ceci. Assurez-vous que c'est au centre. Et je vais double-cliquer ici contrôler V et coller. Peu moins de texte et puis avant, donc je viens juste de couper un peu ce texte vers le bas, juste pour qu'il ne soit pas trop écrasant à lire sur votre tablette. Et allez au prototype. Je vais sélectionner Aucun d'ici. Et revenez au contenu de la conception. Et puis pour les questions courantes, on va les aligner ici. Ce que vous pouvez faire, c'est, laissons ça pour la prochaine vidéo parce que je veux sauter un peu plus en détail à ce sujet. Mais fondamentalement, ce que nous allons faire est pour chacun d'entre eux, nous allons le faire, et commençons par l'état par défaut. Maintenant. Je vais déplacer mon bouton Fermer jusqu'au bord. Donc dans celui-ci, et je vais le positionner ici. Mais comme vous pouvez le voir, ça continue de bouger mon séparateur, ça change ça. Donc 6, 8, 2, 4, tous ces séparateurs. Et vous pouvez sauter à l'intérieur, ouvrir tous vos dossiers, diviseur 60 pour faire ce saut à l'intérieur de ce 162, et enfin sauter à l'intérieur de ce dernier troupeau de 1682 et laitier. Mais comme vous pouvez le voir, maintenant que si vous changez le séparateur, il n'a pas bougé l'icône. C' est pourquoi je continue de dire pour ces diviseurs, C'est, je pense qu'une meilleure option à utiliser. Des formes sont ajoutées dans ces lignes. Voyons où on met le premier en jeu. Faites beaucoup plus avec seulement un pixel dans. Et faisons la même chose pour celle-là. Donc, un pixel dans. Je ne vais pas sélectionner ça. Et vous pouvez voir qu'ils sont un peu difficiles à sélectionner juste parce qu'ils sont en dehors de notre tableau d'art. Donc, ce sont les questions courantes. Mon vrai protégé le premier que nous avons fait. Alors déplacez-le diviseur, c'est bon. Icône des vêtements. Donc, je vais utiliser ma touche Maj et utiliser ma touche Maj pour celle-ci simplement les pousser dedans. Ensuite, je vais l'utiliser dans cette position juste ici. Je vais zoomer deux fois et je vais utiliser celui-ci. Donc je ne sais vraiment pas ce qui se passe aujourd'hui. Adobe XD ne le fait vraiment pas, veut travailler avec moi. Donc, c'est bien maintenant. Et enfin pour celui-ci, nous allons cliquer dessus. Donc, une fois de plus, je vais utiliser ma touche Maj. Habituellement, je n'ai pas autant de bugs ou j'en ai peu ici et là, mais parce que j'enregistre ça, c'est probablement à cause de ça. Maintenant que nous avons tous nos textes, nous devrons les ajuster. Et nous allons le faire dans la prochaine vidéo et terminer ce design avec ces sections en bas. Alors je te verrai là-bas. 47. Créer une conception réactive Design 11: Allons-y et finissons enfin cette page. Donc, comme je l'ai dit, ce que nous allons faire, c'est que nous devons ajuster le texte pour tous. Donc, pour ce faire, je vais simplement cacher tous ces derniers. Je le fais ou nous allons simplement réduire l'obésité sont connus juste pour que cette mise en page en bas reste tel qu'il est et il nous donne assez d'espace. Donc je vais ramener ça comme ça. Et je vais utiliser la fonction de hauteur automatique et quand simplement l'apporter comme ça. Et parce qu'il y avait deux lignes de texte, nous allons toujours le garder à 202 fois. Et puis je vais amener la suivante et ensuite apporter ça. Et parce que nous avons trois lignes de texte, je vais cliquer ici et ajuster et m' assurer juste de garder trois lignes de texte comme le ver. Alors ramenez ça ici. Voyons si Dan va. Il n'apporte pas simplement ce capteur. Nous avons encore trois lignes, Text, Double-cliquez sur 0 ici pour s'en débarrasser. Et puis allez chez des partenaires. Et ajustons ça. Donc, en apportant ça, cliquez ici. Ajustez cela et assurez-vous que nous avons deux lignes de texte. Et des excursions. Ou allons-y juste des voyages. Nous devons donc nous débarrasser de ce texte ici, des voyages. Et rapportons ce point de vue juste là. Et enfin, pour les voyages personnalisés, et c'est injuste et celui-là. Nous devons donc avoir trois lignes de texte cliquez ici. Et voyons ce qu'on peut trouver. Donc ça va troll conditionner les aliments. Sur votre voyage. Fermons cette dernière ligne et l'habitude laitière. C' est donc ce que nous allons faire pour tous. Souviens-toi, on a fermé celui-là. Ou mieux encore, on peut toujours les déplacer comme ça. Alors vérifions ce que nous avions ici en termes d'espacement. Donc, entre ces deux, nous avons 60 et entre le texte et le séparateur en bas nous avons 40. Revenons maintenant à l'état par défaut et voyons ce qu'on peut trouver pour qu'on puisse copier tous les contrôleurs C. Et on peut y aller, mon voyage est-il protégé ? Alors ça va comme ça. Supprimons ces vieux. Et nous allons voir est protégé par les métriques. Nous allons ramener ça. Plus du séparateur vers le bas, faites 40, fermez celui-ci et déplacez le reste à 60. Comme ça. Et maintenant, comme vous le devinez probablement, je vais revenir à l'état par défaut. Sélectionnez Tout et cliquez sur Contrôle C, revenez à la politique d'annulation. Alors fermez-le, trouvez-le. Alors ramène-le. Je vais déplacer mon séparateur vers le bas. Assurez-vous qu'il est 40. Fermez ceci, sélectionnez ces deux en bas et déplacez-le comme ceci. Aller à l'état par défaut et je n'ai même pas à le faire parce que je l'ai déjà copié. Nous avons fait la politique d'annulation. Nous l'avons fait est beaucoup reproductif. Aller à choisir vos partenaires, Contrôle V coller dans tout. Et enfin, pendant que je suis ici, un objectif juste ici pour des voyages personnalisés et basé là aussi. Pour qu'il puisse être ajusté un peu plus tard, nous choisirons vos partenaires, cliquez ici. Alors partenaires, je vais ramener ça. Je vais bouger mon séparateur maintenant. Assurez-vous qu'il est 40. Enfin déplacer les voyages personnalisés vers le bas. Assurez-vous qu'il est 60, puis allez enfin à des voyages personnalisés et ouvrez ce dernier vers le haut. Alors voyages personnalisés, ramenez ça, déplacez votre séparateur comme ça. Alors maintenant, allons de l'avant et animons. Alors passons à l'état par défaut. À l'intérieur de notre prototype, vous pouvez voir que nous les avons encore, ce qui est génial. Donc je vais cliquer ici. Donc, nous avons onglet ou China Made Easy maintenant 0.6 secondes, ce qui est génial. Allons maintenant et passons à l'état suivant. Donc, je vais à est mon voyage protégé, je vais aller à l'onglet ou à animer, faciliter, sortir, revenir à l'état par défaut, facile et sur 0.6 secondes et quand cliquer ici. Donc politique d'annulation, je vais aller à la politique d'annulation. Partenaires. Aller à des partenaires et enfin, des voyages personnalisés. Accédez aux voyages personnalisés. La politique d'annulation est-elle protégée ? Par défaut, annulation, désolé, est le sucre protégé métrique à maturité protégé, et cela devrait aller à défaut. Évidemment, c'est beaucoup plus difficile, beaucoup plus difficile et beaucoup plus de temps quand tu parles comme je le fais. Et cela va évidemment aller beaucoup plus vite quand vous le faites vous-même. Les questions courantes sont-elles protégées par le système métrique ? Je vais aller ici. Politique d'annulation va aller à ici. Choisissez votre partenaire va passer à défaut. Et enfin, comment les voyages personnalisés fonctionnent va aller à Voyages personnalisés. Et maintenant, allons de l'avant et traitons du dernier état. Donc ça ira jusqu'ici. Annulation va aller à la politique d'annulation. Choisissez vos partenaires. Enfin, ce dernier va revenir à l'état par défaut. Et une fois de plus, semblait équipe travaille avec tous. Donc, fondamentalement, dans l'une de ces tailles, vous pouvez dire à votre client qu'il doit cliquer quelque part un peu à l'extérieur juste pour lui faire savoir qu'ils se chevauchent. Alors passons à l'état par défaut ici, comme ça. Et nous allons maintenant travailler sur notre newsletter. Voyons ce qu'on peut faire pour tacher une boucle. Mais par exemple, pour celui-ci et obtenir retardé pour snooze. Voyons voir. Peut-être qu'on peut mettre ça au centre comme ça. Amenez ça ici. Et puis pour le bouton d'abonnement, nous pouvons aller au prototype et nous pouvons simplement nous débarrasser du vol stationnaire. Retournez à Design. Et pour l'entrée elle-même, Ramenons-le. Alors utilisons 84. Donc, en fait, allons-y comme ça. Maintenant, allons-y comme ça. Et puis pour ce bouton, ce que nous pouvons faire est simplement de zoomer un peu. Et nous l'avons là. Et ils l'amènent simplement ici. Faites la même chose pour le Hubbard ici. Donc c'est 53 parce que je veux garder ce même texte. Si vous ne le faites pas, vous pouvez simplement taper un e-mail ici et ensuite le garder à cela. Nous sommes à 60 ans et ici, nous en sommes à 150. Et maintenant enfin, pour finir cette page, Commençons à travailler sur notre pied de page. Mais avant que nous le fassions, je vais double-cliquer ici et étendre tout cela jusqu'au bas juste pour que nous ayons assez d'espace. Donc ce que je vais faire pour le pied de page, c'est que je vais commencer par l'évidence. Je vais ramener ces deux-là. Je vais apporter mes infos de pied de page dans un centre comme celui-ci. Et fondamentalement, je vais simplement les regrouper un peu plus près, donc rien de trop important. Nous allons d'abord nous occuper de notre diviseur. Donc je vais le ramener ici. Juste là. Je vais faire la même chose pour ici. Maintenez simplement votre touche Maj. Alors pour ceux-ci, nous allons les aligner comme ça. Va avec la gauche et vois. Peut-être qu'on peut juste réfléchir. Peut-être qu'on peut apporter tout le méchant. Voyons voir, Utilisons Winter positionnez-le au centre. Allons avec position bien-être. Et juste ici, des croisières au centre et ça juste ici. Donc Derek Harris et enfin quatre D sur ce que je pense que nous devrions faire est par exemple, pour le texte du bas, nous pouvons peut-être utiliser celui-ci. Positionnez ça au centre, comme ça. Et puis amenez ces deux-là à un autre groupe. Et puis je peux utiliser la pile là-bas et utiliser cette pile positionnée ici. Et voyons ce qu'on peut faire. Par exemple, 40. Voyons voir. Avec celui-ci, je peux aller avec 40 comme ça et ensuite simplement les étendre maintenant. Donc Maj 1, 2, 3, 4. Allons avec le fond pour les forêts. Donc Shift on veut toujours qu'ils bougent. Allons-y avec tout le réservoir. Alors. L' informateur a touché Control D shift 1234. Développez ma superposition de couleur et mon image vers le bas. Je vais me débarrasser de cette copie et revenir ici. Et pour ce dernier, je vais, par exemple, ajuster ici. Double-cliquez à l'intérieur, déplacez ceci vers la droite pour qu'ils soient récupérés, le pied de page est terminé. Évidemment, une dernière chose que nous allons traiter ici, c'est cette image de fond. Donc localement concis et positionner cette fille au centre. Ramenez ça, double-cliquez ici. Et simplement fermer toute cette page, comme ça. Et nous l'avons là. Nous avons fini de travailler sur cette taille. C' était donc une taille doublée. Et désolé que ces vidéos soient trop longues, mais je veux vraiment entrer dans autant de détails que possible, juste pour vous donner toutes ces options différentes ou différentes opinions, comme je l'ai fait, par exemple, pour ces flèches ici et toutes ces autres flèches. Donc, je veux vous donner les deux options et puis vous décidez quelle option fonctionne le mieux pour vous, votre scénario, votre projet, votre client, en fonction de votre temps que vous avez sur ce projet, en fonction du budget que vous avez sur ce projet. Assurez-vous donc de vous familiariser avec toutes ces différentes options. Parce que cela peut sembler l'option évidente, comme par exemple, cette flèche juste ici, ou je vais juste le faire. Mais croyez-moi, dans certains cas, vous n'avez pas la possibilité de le faire. Tu n'as pas la capacité de faire ça. Donc tu dois le faire dans l'autre sens. Comme je vous l'ai montré, par exemple, avec ces flèches et ce bouton d'ailleurs, parce que nous sommes dissociés aussi, fait également en sorte d'utiliser toujours les points de robinet. Parce que si vous vous souvenez ici, si nous n'utilisions pas le point de tabulation parce que nous avons l'animation à l'intérieur de l'animation, cela ne fonctionnerait pas, donc nous ne serions pas en mesure de faire la transition. Et ceux-ci, cette navigation ouverte, par exemple, à ce deuxième état de leur navigation Doppler si nous n'avons pas utilisé le point de robinet lui-même. Assurez-vous donc toujours de prêter une attention particulière à tous ces détails. Et comme vous pouvez le voir, pile fonctionne vraiment bien ici pour nous parce qu'il conserve toujours 150 pour tout cela. Et en passant, vous pouvez simplement cliquer ici. Retournez à ici, comme nous l'avons fait pour toutes ces étiquettes. Et si nous faisons défiler vers le bas, vous pouvez voir l'espacement entre tous nos articles. Et puis vous pouvez simplement ajuster à ici. Et il va ajuster l'espacement de manière égale, partout ou comme je l'ai dit plusieurs fois, vous pouvez utiliser l'espacement différent pour tous vos objets. Donc c'est tout pour cette taille, comme je l'ai dit dans la prochaine série de vidéos, nous allons aborder la taille mobile, qui va être la taille finale. Après cela, je vais partager avec vous comment commencer à partager avec vos clients, développeurs et coéquipiers. Et enfin, nous allons aller à l'exportation des options. Alors je te verrai là-bas. 48. Créer une conception réactive Design 12: Allons de l'avant et terminons notre processus de conception réactive en créant une taille mobile. Et comme je l'ai dit, la taille du mobile va contenir probablement le plus grand nombre de changements. Tenons notre ancienne clé et dupliquons celle-ci comme ça. Et je vais faire la même chose qu'avant. Copiez ce texte, double-cliquez ici, et je vais supprimer ce texte jusqu'ici. On va avoir quatre colonnes. Ça va être 30, 60, 120. Alors faisons défiler un peu vers le bas. Donc quatre colonnes. Donc je vais vérifier encore une fois, 30, 60, 120. Alors faisons-le à 3061 et ça va être 203061. Je ne sais pas pourquoi il continue à faire ça. Comme vous pouvez le voir, c'est vraiment délicat, mais c'est le problème. J' ai oublié de changer. Les largeurs sont 375, sahib a 375. Et vérifions maintenant. Donc 30, 60, 120, donc 3061, et enfin 20. Donc, nous l'avons là. Dès que vous le réparerez, cela fonctionnera très bien. Alors commençons comme d'habitude avec ceux-ci en haut. Donc je vais faire, je vais faire est de déplacer le logo juste ici. Et je vais aussi réduire les deux à eux comme ça, par exemple. Ce que je vais aussi faire est d'apporter mon icône de menu. Poussez-le comme ça. Et nous allons aussi nous assurer que c'est là, comme ça. Donc, à l'intérieur de notre état par défaut, je vais l'introduire, à l'intérieur. Laisse-moi l'ouvrir. Et voyons, je peux les ramener à 40, par exemple, c'est à l'heure que. Et puis je peux utiliser mon point Tab, qui est tout le chemin ici, et je peux l'étendre, le mettre juste ici et juste ici. Apportez-le. Juste une touche comme la saleté. Et ce que je vais faire, c'est faire l' animation une fois de plus parce que c'est beaucoup plus simple que ça. Donc dégrouper le composant Control G. Et je vais l'appeler une icône de menu une fois de plus. Et positionnons ça à peu près ici. Ou encore mieux, nous pouvons aller à ce bord pour que nous ayons un peu plus d'espace pour jouer ici. Donc la touche Contrôle et je peux créer un nouveau composant, mais parce que nous avons le même nom, et je vais faire est aller menu, icône, mobile, puis appuyez sur Contrôle K. Et puis il va nous montrer, cela nous empêche toujours de l'éditer juste ici. Donc je vais devoir l'éditer ici. On va devoir sauter à l'intérieur. Dans, créer, état cliqué. A l'intérieur de mon état cliqué, comme d'habitude, je vais apporter ça ici. Amenez ça ici. Masquer premier, troisième 1 clic an. Amenez-le au centre, appuyez deux fois pour le ramener à 0. Et puis passez à, par exemple, 45. Passez cela à 45 aussi. Et passez de l'état par défaut à collecter l'état. Je pense que ça marche très bien. Je vais appuyer sur Supprimer. Retournez à ici, voyez à quoi ça ressemble à l'intérieur. Donc état par défaut, état cliqué, cela fonctionne bien. Et passons au prototype. Et voyons ce que nous avons ici. Alors je vais le faire, voyons. Cliquez sur l'onglet Télécharger, animer automatiquement. L' état est inout 0,4 seconde. Changons cela pour faciliter l'entrée et la sortie 0.4. Si vous vous souvenez que cela va un peu plus vite que toute l'animation, passez à l'état cliqué. Je vais faire la même chose. Cliquez ici et accédez à l'état par défaut 0.4. C'est très bien. Et enfin, nous allons rapidement en prévisualiser et vous pouvez voir à quel point notre fenêtre d'aperçu est maintenant petite. Donc, quand je clique ici, désolé, je dois le changer pour être ici. Alors faisons-le d'abord avant de vérifier ça. Donc primaire par défaut flou maintenant je vais le réduire à 375 comme la dette. Et je vais aller navigation primaire, je vais y aller, voyons nav secondaire. En fait, élargissons notre flou pour que je puisse voir ce que je fais. Étendu jusqu'ici par exemple. Et voyons ce que nous faisons. Où est le point de coupure ici ? Donc, je peux vraiment le faire tomber juste pour l'instant. Et nous allons voir ce dont nous allons vraiment avoir besoin ici. Si secondaire maintenant, je vais l'apporter. Je vais apporter mes éléments de menu. Dan. Je vais les amener au centre, assurer qu'ils sont un peu moins bas. Donc Maj 1, 2, 3, 4. Et à l'intérieur d'eux parce que nous utilisons pile, je vais les réduire à 40 par exemple. Donc, il est 40 entre chacun de nos articles, comme vous pouvez le voir. Enfin, je vais ramener ça à 40. Et je vais le faire ici parce que nous n'avons pas assez d'espace. Je vais simplement les dégrouper. Mais appelez ça nav secondaire. Donc copie fait sur le contrôle de groupe G pour les regrouper et ensuite les faire dans une pile comme celle-ci. Assurez-vous que nous sommes dans un centre et assurez-vous que nous sommes un 40. Pour ces piles ou nav secondaire, je vais également utiliser 40, mais par exemple, passons à 60, juste pour que nous ayons un peu plus d'espace. Enfin, pour notre principal facilitateur, n'a pas besoin d'aller jusqu'au bout pour oser. Donc, par exemple, on peut le couper quelque part par ici. Alors allons-y avec 100. Par exemple. Voyons 10, 5, 1 ou 2. Des centaines, si troupeau laitier. Donc ce que je vais faire, c'est que je vais les amener tous. Donc Contrôle C, cliquez sur les états, je vais à Contrôle V, puis abaissez ça, alors cachez-le. Je vais aller à mon menu de navigation primaire maintenant plus de bile cliquez juste là , puis aller à mon état par défaut et je vais les cacher tous. Donc nav secondaire et les éléments de menu, je vais les ramener à 0. Flou de navigation primaire. Je vais le porter à 1, comme ça en hauteur. Et puis ce que je vais faire, c'est utiliser mon prototype. Donc, nous avons le prototype juste là, cliqué. Cela nous ramène parce que nous l'avons gardé dans l'icône du menu. Donc, si je l'ouvre, nous avons les points de pression du menu. Nous ne l'avons pas changé pour juste changer l'espacement pour elle et juste pour placer. Voyons donc si le point d'onglet de menu est juste ici. Voyons voir qu'il est juste là, ce qui est génial. Accédez à l'état par défaut appuyez sur Aperçu, et voyons ce que nous travaillons ici. Alors cliquez sur. Nous avons cette grande animation. Voyons donc l'état par défaut, l'état cliqué et cela change. Donc quelque chose ne va pas, juste ici. Vérifions ça. point de contact principal du menu nav nous amène à l'état cliqué. Et l'état de clic nous amène au point de proximité principal, le point MiniTab. Quand je clique juste là, ça nous amène à l'état par défaut, ok ? Donc, la facilité dans 0.6 secondes. Voyons si c'est le cas pour le primaire. Donc 0.6, comme vous pouvez le voir, c'est génial. Alors maintenant, quand j'appuie sur l'aperçu, ça devrait fonctionner très bien. Vous l'avez parce qu'il n'était pas connecté. Et Dan, quand j'ai cliqué dessus, ça a juste animé l'icône elle-même sans toutes ces autres. Alors passons à autre chose et je vais revenir au design ici, et je vais commencer par travailler sur mon image de héros. Alors voyons ce qu'on peut faire en premier, je vais sauter à l'intérieur d'ici et ramener tout ça. Comme ça. Et parce que c'est beaucoup plus facile. Et puis allez à l'état par défaut de mon image de héros. Je vais les amener comme ça. Et troupeau laitier. Et enfin, le numéro d'image pour les amener comme ça. Donc, ils ont tous l'air assez cohérents. Et je ne pense pas que nous ayons besoin de trop de cet espace, mais explorons et voyons ce que nous pouvons faire. Donc, tout d'abord, ce texte va évidemment devoir être beaucoup plus petit. Donc, pour ce premier, nous allons utiliser 18 pour ce top. Donc, il a un masque de texte d'image de héros d'état par défaut. Donc, pour ce texte, nous devrons aller avec 18. Passons à 18, puis bleu principal et voyons ce qu'on a ici. Donc, je vais le déplacer à 10 par exemple. Et pour celui-là, je vais en créer un nouveau de 80, comme la saleté. Et voyons, peut-être que ce n'est pas ce que je veux. Peut-être que je peux l'augmenter à 120 ou un jour que Voyons voir. Je pense que c'est vraiment assez petit. Donc, revenons tout d'abord aux fois où j'en suis là. Et vous les amenez tous au centre et voyez avec quoi nous travaillons ? Mon père et quand aller apporter mon bouton aussi. Comme ça. Positionnez-le ici. Voyons avec quoi on travaille ici. Donc je vais les étendre parce que si vous vous souvenez, nous les avons extraits quand vous avez tué le commutateur de vol stationnaire, comme nous l'avons fait pour toutes ces flèches en bas. Donc je vais le déplacer ici. Alors je vais enlever celui-ci parce qu'on n'en a pas besoin parce qu'il n'est plus là. Ensuite, sélectionnez les textes comme le bouton, assurez-vous qu'il est au centre. Ensuite, je vais déplacer mes flèches pour être au centre aussi. Et voyons pour la distance, parce qu'il était 18 ans. Maintenant, ramenons-le à 60, par exemple, n, Cela devrait être un peu plus petit, mais commençons à travailler dessus aussi. Donc pour l'instant, ce que je vais faire, c'est changer le texte. Voyons si je dissimulais notre navigation primaire. Cachons notre navigation inférieure pour ne pas nous distraire. En fait, nous n'avons pas à le faire parce que c'est en bas. Donc, pour notre image de héros, je vais tout d'abord, double-cliquez sur mon Pékin, cliquez ici et puis aller 120 par exemple. Ça marche, mais je ne pense pas que ça marchera pour sa gada. Donc si on y va avec 80, je pense que c'est un peu petit. Faisons face à ça. Donc je ne sais pas, je n'aime pas trop ça. Donc c'est 100 pour celle-là. Je pense que ça va aller. Voyons voir 20. Jouons avec ces autres. Alors voyons qui dugata. Alors, d'abord, amenons notre mosquée pour qu'on puisse la fermer bien. Comme ça. Je vais le positionner comme ça juste aux bords de nos textes comme ça. Donc, je vais apporter mon deuxième texte et je vais le cacher solide C, et c'est 100. Alors allons de l'avant et créons le juste ici. Donc, cachons le texte numéro 1. Alors je vais aller avec Paris. Cliquez ici et choisissez 100. On y va. Je vais cliquer sur celui-ci et choisir 18, puis aller au bleu principal. Et une autre chose que je veux vérifier, c'est la distance entre ces deux-là. Donc je pense que j'ai mis 20 en arabe habit. Alors cache-le. Et je vais les montrer, assurer qu'ils sont centrés comme cette position, ce cerf. Et enfin, amenez le texte de Paris à une distance du 26 1789, 120, comme ça. On y va. Et voyons, c'est 18, c'est 100, ce qui est très bien, puis il suffit de le cacher et d'apporter le texte numéro 3. Alors montrez-le et apportez-le. Je vais cliquer sur celui-ci. Donc, encore une fois, nous sommes à 18, position bleue à sont juste là et ce sera 100. Voyons si ça marche. Il fait 17, 18, 20 comme ça. Et la dernière chose que je veux faire est de changer un peu notre masque parce qu'il va couper nos textes de Haggadah pour que je puisse le changer d'un bout à l'autre. Donc d'ici à là, leur ego. Et enfin, ce que je peux faire, c'est apporter tout mon texte. Voyons voir. Le numéro trois, c'est bon. Le numéro deux, c'est bon. numéro un n'est pas bon parce que nous devons changer ça en bleu. Donc, avant d'aller plus loin avec nos textes, ce que je voudrais faire est de réduire la hauteur globale de nos images. Donc ce que je vais faire est de les sélectionner tous parce que vous pouvez voir où ils vont et peut-être le déplacer quelque part, quelque chose par ici peut-être. Maintenant, amenons notre navigation principale. On peut aller avec les textes, alors la mosquée de texte et on peut déplacer notre masque de texte vers le haut. Et cela maintenez la touche Maj, puis utilisez simplement , par exemple, voyons où cela se termine ? Juste par ici. Déplacez-le vers le bas AT, puis déplacez le reste d'entre eux AT. Alors voyons, où est notre mosquée de texte ici il est 80, et puis ce sont 60. Si nous sélectionnons notre bouton hover ici, nous sommes à 60, ce qui est génial. Et la dernière chose que je veux changer, c'est que cette flèche pousse juste ici et entaille et celle-ci juste un pixel juste ici. Maintenant que c'est terminé, ce que nous allons faire est d'animer le reste d'entre eux. Mais avant qu'on ne le fasse, je n'aime toujours pas comment ça ressemble à du bas. Donc, je vais faire un duplicata de mes flèches et descendre 80 pixels vers le bas, puis ramener tout cela dans une fois de plus juste ici. Donc, où ça coupe avec nos flèches, alors je vais enlever la copie de nos flèches. Et nous l'avons là. Maintenant, nous avons des images de héros beaucoup plus concis. Donc la prochaine chose que je veux faire, parce que nous allons évidemment réanimer toute la chose, c'est jouer avec nos images. Donc notre première image, je vais vraiment ajuster à quelque chose comme ça. Peut-être, voyons quel angle est le meilleur. Peut-être que celui-ci le cache réellement. Ensuite, faites l'autre pour le Paris. Donc, je vais cliquer ici et ensuite simplement utiliser celui-ci. Comme si, ou peut-être même plus à ici juste pour que nous puissions voir que c'est, c'est un plus rare. Et enfin, ce troisième, quoi que vous vouliez, je vais mettre ces gens dans cette cour, par exemple, en arrière-plan. Et nous l'avons là. Donc je vais apporter tout ça et je vais l'appeler, Mettons-le d'abord en groupe. Ça va être beaucoup plus simple pour nous. Donc image de héros, quand l'appeler l'image de héros mobile. Puis dégroupez ce composant, appuyez sur la touche Contrôle. Et pour ce premier composant, un que je vais faire, c'est évidemment cacher mes deux textes vers le bas. Donc je vais les éloigner du chemin. Tout droit par ici, donc c'est bon tant qu'ils ne sont pas visibles pour ici. Donc, nous allons créer un état supplémentaire et l'appeler, par exemple, appelons-le un virus. Et pour le Paris, allons à la mosquée. Déplacez notre deuxième texte à l'intérieur. Assurez-vous qu'il est aligné comme Dat. Déplacez notre premier texte hors de la baleine et de la saleté et créez un autre texte et un autre état appelé données. Et pour cela évidemment, déplacez notre troisième texte. Je l'ai fait. Et plus de second texte à l'extérieur. Je reçois. Enfin, animons ça. Alors allez au prototype, allez à l'image du héros, et quand aller aux flèches, pointe de flèche droite, nous allons aller à Paris, 0,6. Va à Paris. Flèches. La gauche va nous conduire à l'état par défaut et un droit de nomination va nous emmener à la détention des données. Et enfin, ces mêmes quatre qui indépendamment. Donc je vais cliquer ici. Flèches, point de déf gauche va nous emmener à Paris. Et un bon point d'onglet ne va pas nous emmener nulle part parce que c'est notre état final. Maintenant, enfin, nous allons gérer les images. Donc, dans l'état par défaut, nous montrons Pékin, dans l'état de Paris. Dans la section design, nous allons effectivement cacher celui-ci et montrer Paris. Et dans l'état de Haggada, nous allons les cacher tous les deux. Je l'ai fait et juste montrer Kolkata. Enfin, nous allons l'édition de bureau. Voyez si cela fonctionne comme il se doit. Ici, c'est. Pour cliquer ici. Comme vous pouvez le voir, ça va jusqu'au bas, ce qui ne me dérange pas, vous pouvez les redistribuer si vous voulez les positionner à gauche et à droite. Et alternativement, vous pouvez également abaisser la hauteur de ce texte et le mettre comme ceci. Nous avons toujours le vol stationnaire juste ici pour que nous puissions nous en débarrasser si nous le voulons. Et je vais le faire dans une seconde. Mais pour l'instant, nous allons simplement les explorer et voir ce que nous avons. Et j'aime vraiment comment ça ressemble. Donc, avant d'aller plus loin, passons vite, vérifions vite là. Alors allez à l'état cliqué et allez dire nav secondaire et allez au prototype. Débarrassez-vous de ces effets de vol stationnaire. Je n'irai nulle part avec ça. Même chose pour celui-là, alors ne va pas à rien. Et enfin, la même chose pour celui-là, ne va pas à rien. Donc maintenant, nous n'avons aucun effet de vol stationnaire sur ceux-ci. Maintenant, enfin, pour cette prochaine section, ce que je vais faire, c'est que je vais vraiment les redistribuer beaucoup. Donc, dans un, d'un côté, je vais avoir la destination et taper ci-dessous, je vais avoir des activités. Et en dessous, nous allons avoir la recherche elle-même. Ainsi, vous pouvez animer la recherche à ce stade si vous le souhaitez. Je ne vais pas faire ça. Je vais simplement les positionner juste là pour le fond. Maintenant, comme je l'ai dit, je vais le positionner juste là. C' est donc la recherche de voyages et quand le déplacer en dessous des destinations. Je vais l'aligner sur notre grille comme ça. Et je vais vraiment me débarrasser de mon séparateur. Destinations. Bg va aller juste ici par exemple. Donc quelque part dans le centre, peut-être juste ici. Voyons voir. J' aime ça. Ensuite, allez dans les villes, destination le coureur et ramenez-le simplement. Juste une touche. Masque va évidemment être juste un peu plus grand à quelque chose comme ça. Ensuite, je vais évidemment copier tout le contrôle C et aller au contrôle d'état cliqué V. Et voyons, je vais devoir retourner en arrière l'interrogatoire de copie. Donc, pas seulement des éléments de l'intérieur du masque. Et enlevez l'ancien clic juste ici et étendez mon masque jusqu'ici. Donc ce que vous pouvez faire est en fait étendu à peu près ici, aller dans deux directions, bg, où est-il ici ? Il est étendu à ici, par exemple. Et puis il suffit d'élargir notre mascotte juste ce petit peu plus. Développez ceci ici, puis allez à ici, puis amenez-le jusqu'ici. Donc, toute cette section est défilante avec ces trois éléments, puis les utilisateurs devront appuyer, puis faire défiler vers le bas à travers tous ces éléments supplémentaires. Donc état par défaut. Maintenant, nous allons travailler sur notre type. Je vais l'aligner comme ça. Je vais aussi me débarrasser de mon séparateur parce que je n'en ai plus besoin. Évidemment, je vais utiliser bg ou tout le chemin jusqu'ici. Je vais étendre notre masque jusqu'ici. Je peux même aller ici jusqu'à la fin de la page. C' est vraiment important. Voyons donc, pour le génotype, nous allons d'abord faire la même chose. Donc on va montrer, Voyons voir, 123. Alors montrons trois de ces voyages. Fermez-le bien, osez. Et enfin, voyons si nous élargissons notre BG. Cachez d'abord notre bouton Appliquer. Cbg et les lignes vont montrer coureur joliment sopped, c'est très bien. Maintenant, allons de l'avant et copions-le. Aller à l'état cliqué basé sur supprimer l'ancien et simplement étendre cela vers le bas. D' accord, par ici et allez avec notre masque et élargissez notre masque jusqu'ici, par exemple. Revenez à l'état par défaut et je vais utiliser mes activités, positionnez-les ici. Voyons que nous sommes 20 par exemple, pour celui-ci, vous pouvez le positionner à 40 si vous le souhaitez. C' est vraiment à toi de décider. Je vais me débarrasser de notre séparateur parce qu'on n'en a plus besoin. Activités. Je vais l'étendre à ici et le masque que je vais étendre pour entendre parce que nous sommes simplement en train d'ajuster notre espace maintenant pour les activités elles-mêmes. Cliquez rapidement là et coulons-le à trois. Donc, juste par ici. Là, vous l'avez. Voyons voir, masque VG, tout fonctionne bien. Donc copiez-le, allez à l'état cliqué, Basé dans, supprimez l'ancien. Et enfin étendre nos activités sur le chemin d'ici, et étendre notre masque jusqu'ici. Enfin, revenons à l'état par défaut et utilisons la recherche de trajets. Et je vais le positionner ici, assurez-vous qu'il est 20. Et nous avons le fond maintenant Vg, dont nous n'allons évidemment plus avoir besoin. Donc, pour la recherche elle-même, ce que je vais faire est de l'étendre ici. Et je vais, voyons, utiliser la proximité. Apportons-le, voyons à quoi ça ressemble. Positionnez-le ici 20 pixels, puis réduisez la taille. Et je peux en fait les utiliser tous comme ce Control C. Ensuite, allez à mon état cliqué, appuyez sur Contrôle V, j'enlève les anciens. Et je vais simplement ramener ça et tourner un peu comme ça. Donc, passez entre l'état par défaut et l'état de clic, et je pense que c'est bien. Enfin, pour le bouton Appliquer, je peux le déplacer vers le bas. Je peux m'assurer qu'il est 20. Je peux l'étendre ici et Derek l'a. Donc 20. Voyons voir, cette taille de texte est à 18, c'est un 24. Alors peut-être que nous devrions même baisser ce chiffre à 18, assurez-vous qu'il est blanc comme ça. Et enfin, regrouperons tous comme certains. Mais il peut aussi faire la même chose pour ce bouton parce que je pense que c'est beaucoup trop grand. Allons-y pour le héros, bouton Héros. Explorez maintenant, simplement ajusté pour être 18. Retourne. Assurez-vous qu'il est au centre. Et ce que vous pouvez faire est en fait, vous pouvez cliquer et le copier si vous le souhaitez. Mais comme vous pouvez le voir, il l'a bien appliqué dans tous nos états parce que nous l'avons changé dans l'état par défaut. Donc nous l'avons là, c'est tout pour cette section. La dernière chose que je veux faire est d'ajuster ici. Comme vous pouvez le voir, on est à 26 ans, alors peut-être que je peux aller à Turley et ensuite à 40 ans, juste pour qu'on ait un peu plus d'espace pour jouer. Et enfin, quand j'appuie sur l'aperçu, je vais agrandir cette position au centre. Donc, cela fonctionne comme il se doit, ce qui est génial. Lorsque vous cliquez sur celui-ci, il va vous montrer trois et vous pouvez faire défiler vers le bas si vous le souhaitez. Et vous cliquez sur celui-ci. C' est la même chose qui fonctionne très bien. Cliquez sur celui-ci. Ça fonctionne très bien. Et enfin, pour la recherche, nous avons cette belle animation et nous pouvons appliquer des filtres. Donc c'est tout pour cette vidéo, et c'est tout pour ces sections qui sont fondamentalement les bits les plus ennuyeux de tous. Dans la prochaine vidéo, nous allons passer à autre chose et refaire certaines de ces autres sections et je vais vous montrer ce que nous pouvons aussi faire. Enfin, une fois que nous aurons terminé la version mobile et la taille mobile, nous allons aborder un peu cet espacement. Donc 150 pour le mobile, c'est évidemment beaucoup trop parce que comme vous pouvez le voir, nous avons réduit la taille de presque tout ici. Donc, je vais faire la même chose pour la version mobile aussi. Donc c'est tout pour cette vidéo et je vous verrai dans la prochaine quand nous allons continuer avec ces changements. 49. Créer une conception réactive 13: Allons maintenant et continuons à travailler sur cette mise en page. Et commençons par l'offre spéciale. Donc on va faire la même chose comme on l'a fait là-haut. Donc, pour ce premier, je vais le réduire à 100, mettre en noir presque. Et pour cette seconde, je vais utiliser 18 puis utiliser gris foncé. Je vais m'assurer que les deux sont centrés, puis centrés comme ça. Parce que maintenant je ne le fais pas, je ne suis pas capable d'adapter physiquement le texte à l'intérieur. Je vais aller encore plus loin. Donc, je vais aller avec 80 par exemple. Et puis utilisez 64, la distance. Je pense que ça va être étranger ou pas. Allons-y même avec 40. Donc c'est, c'est 18 et ça va être 80. Et maintenant, parce que c'est notre nouveau, je vais simplement cliquer ici pour l'ajouter. Et pour toutes ces sections, nous allons utiliser 80 puis 18. Alors allons de l'avant et si je clique ici, vous pouvez toujours voir qu'il garde toujours 150 distance. Donc ce que nous allons faire avec celui-ci, évidemment parce que nous avons maintenant ces cartes et nous avons ces offres de première et dernière minute. Ce que je vais faire en premier, c'est jouer avec ceux-ci. Donc, avant même d'y aller, je veux rapidement frapper un contenu, des offres spéciales, mobile comme ça. Et je vais évidemment dégrouper ce composant. Maintenant, pour l'instant, je vais utiliser et onglets. Et je vais faire quelques changements ici et là. Je vais donc positionner ce chronomètre ici en haut et ensuite utiliser, par exemple, 10. Et puis je vais simplement utiliser la première minute. Voyons ce qu'on peut faire. Positionnez-le ici. Je ne pense pas que ça marche. Donc, nous allons utiliser, par exemple, 18 volts. Voie laitière 18 volts. Cela fonctionne beaucoup mieux, puis il suffit de l'ajouter aux styles de caractères. Maintenant, faisons la même chose pour celui-ci, alors alignez-le. Et je vais, tout d'abord, ajuster notre icône au sommet est le 10. Cliquez ici, et allez avec 18 volts, puis changez simplement la couleur en gris clair. Je vais utiliser un texte de dernière minute là-dedans. Tu l'as. Maintenant, ce que je vais faire est de créer le rectangle et je vais m' assurer qu'il a deux colonnes de large. Je l'ai fait. Je vais les sélectionner tous les trois positionnés au centre et m'assurer qu'ils s'adaptent juste ici. Je vais enlever mon rectangle, puis faire la même chose ici. Donc, sélectionnez un rectangle comme celui-ci, s' assure que tous ceux-ci sont au centre. Sélectionnez les trois d'entre eux. Et là, vous l'avez enlevé ce rectangle. Et si je regarde simplement, assurez-vous qu'ils sont positionnés comme ils le devraient, comme ils sont ici comme vous pouvez le voir. Donc, tout est aligné correctement. Maintenant que les onglets sont terminés, son travail sur notre offre de première minute, et ça va être régate. Donc, tout d'abord, jeter évidemment ne va pas fonctionner pour nous. Donc ce que nous pouvons faire, nous pouvons sauter la perspicacité et par exemple groupe, toutes ces choses. un seul groupe, y compris notre carte BG. Donc, nous allons d'abord le réduire à ici par exemple. Et c'est haut leur image voir ce que nous avons. Donc je pense que ça pourrait vraiment marcher. Je vais donc choisir tout notre contenu. Assurez-vous qu'il est doublé comme ça. Voyons voir, Nous sommes sept, donc 1, 2, 3 être 10 de ce bord. Et voyons la flèche. Je vais positionner la flèche sur ce bord juste ici, et nous avons maintenant besoin de l'image. Alors je suis allé ramener mon image. Je vais l'étendre jusqu'ici. Et voyons voir. Nous allons maintenant nous arrêter à gauche et en haut à droite et nous débarrasser de celui-ci. Et pour la hauteur, voyons, peut-être qu'on peut aller avec 150, voir à quoi ça ressemble. Je pense que ça marche bien. Et peut-être même 160, juste pour lui donner un peu plus d'écran immobilier, 160, là vous l'avez, n maintenant simplement sélectionner tout. Voyons voir, et je peux le déplacer vers le bas 20. Sélectionnez notre panier et positionnez-le jusqu'ici. Encore une fois, l'image est de 1, 60 en hauteur, c'est 20, désolé, 40 en bas. Et maintenant on peut jouer avec les autres. Si vous le souhaitez, vous pouvez ajuster le texte et modifier la taille de l'ensemble de ce texte. Mais je ne vais pas faire ça. Je vais choisir notre Tokyo et je vais faire la même chose, mais avant de le faire, je vais cacher ça. Et je fais tout ça parce que nous n'allons plus faire défiler. Nous allons faire défiler à gauche et à droite, mais maintenant pas de haut en bas. Alors travaillons sur notre Tokyo. Et nous allons en fait parler ici comme ça. Et faisons la même chose pour tous. Allons avec Bali, déplace-le jusqu'ici comme ça. Et amenons ces trois. Et voyons où ils sont. Ok, donc Paris est là. C' est plus de fissure de NTP comme ça. Et puis comme ça. Et nous l'avons là. Je vais donc réduire la visibilité de tout cela et je vais juste travailler sur notre Tokyo. Donc, une fois de plus, l'image est 160 et la distance est de 40 entre ceux-ci. Alors disons-le. Et tout d'abord, ramenons ça ici. Comme ça. Alors je vais cacher mon image. Je vais apporter toutes ces informations ici. Et une fois, alors je vais apporter mon image, assure qu'elle est 160 en hauteur. Je vais l'étendre jusqu'ici. Donc, à notre application et voir quelque chose ne va pas avec notre quantum. Déplacez notre flèche comme ça, puis vérifiez simplement mon image, assurez-vous que c'est bien. Il est double-clic dans un ajusté à probablement autour ici. Et puis cachez-le très rapidement pour que nous puissions tout sélectionner. Voyons 160, c'est bon. Sélectionnez tout et déplacez-le simplement vers le bas 40. Ou je pense que 20 va être un peu mieux que 40. Donc je vais réparer la première carte dans une seconde. Donc Tokyo est fini. Ouvrez la Haggada et sélectionnez-les tous, amenez-la à 20, et fermez ceci. Et nous l'avons là. Travaillons sur notre Bali. Ramenons-le. Alors tout d'abord, amenez la carte orale ici, amenez l'image ici. Bien sûr. On est 55 000 comme ça. Et assurez-vous que nous avons 160, comme dat, je vais double-cliquer sur la position pour être à peu près ici. Ou encore mieux, nous pouvons , par exemple, les déplacer, cacher notre image et je vais sélectionner tous mes objets, les déplacer ici. Puis dix pixels déplacent la flèche. Donc il a besoin du bord comme ça. Montrez notre image, sélectionnez tout notre contenu et ramenez-la ici. Et puis faites 20 et utilisez simplement notre arrière-plan et déplacez-le jusqu'à ce qu'il se rencontre ici. Et puis je vais faire le reste d'entre eux. Laisse-moi faire ces trois. Je vais mettre la vidéo en pause et revenir. Et maintenant que nous en avons tous, laissez-moi vous montrer ce que nous allons créer. Donc, nous allons créer un groupe scrollable sont nos trois premiers pour chacun parce que nous en avons six. Donc, quand ils tapent sur la première minute, nous allons voir ce premier groupe défilant. Et puis avec le robinet de dernière minute, nous allons ensuite placer le deuxième groupe défilant. Donc, pour ce faire, je vais utiliser Tokyo et Bali, les déplacer dehors comme ça et m'assurer qu'ils le sont. Par exemple, utilisons, utilisons 30. Déplacez Bali hors du chemin, ramenez-le. Utilisons 30 aussi. Donc je vais les regrouper, l' appeler à la première minute et ensuite je vais les cacher pour pouvoir faire les deuxièmes stents. Alors ramenons ça, décalés à l'extérieur. Assurez-vous qu'ils ont 30, et assurez-vous d'apporter le type a, qui sera à 30 aussi bien que ça. Et je vais les regrouper, les appeler à la dernière minute. Et puis je vais apporter mon premier clic de minute juste ici. Donc, je peux créer un groupe défilant. Et ce que je peux faire, c'est l'amener ici. Donc, du bord au bord, parce que nous avons une taille d'écran plus petite et le cacher et ensuite faire la même chose pour celui-ci. Alors cliquez ici, amenez-le bord à bord et appelez-le à la dernière minute. Donc, pour ce premier état, je vais en fait réduire l'opacité de cette dernière minute et quand ramener ça. C' est donc avec cela que nous allons travailler. Et enfin, quel champ manque ici sont les boutons. Donc, nous allons évidemment les faire entrer. Comme ça. Et voyons, peut-être que nous pouvons les faire à 60 millions. Et nous allons les aligner sur le bord gauche de notre grille. Et nous allons sauter à l'intérieur des deux. Donc, toute la première minute, nous allons le réduire à 18 puis gris foncé. Et faites la même chose pour toutes les dernières minutes. Donc, comme ramener les critères, 18, gris foncé. Et je vais m'assurer de me débarrasser de cette couleur parce qu'on n'en a plus besoin et quand faire la même chose ici. Et tout d'abord, je vais m'assurer que ces deux-là sont centrés. Que ces deux-là sont centrés. Amenez ça à 0. Mais avant que je ne le fasse, je veux l'étendre à ici. Alors assurez-vous qu'il est au centre. Pour le ramener à 0. Je vais montrer celui-ci une fois de plus, cliquer ici, et l'étendre à ici. Assurez-vous qu'il est au centre. Et enfin, nous allons le mesurer encore une fois. Donc c'est 60, ce qui est très bien. C' est à 0 obésité, c'est à 100 obésité, ce qui est génial. Et maintenant, nous allons créer un composant pour cette offre spéciale mobile. Alors appuyez sur la touche Contrôle. Et nous allons cliquer sur créer une nouvelle qualité d'état dernière minute. Donc, dans ce premier état, nous ne allons rien faire parce que les utilisateurs peuvent faire défiler vers la gauche et la droite. Et dans le dernier état, ce que vous allez faire, c'est faire ces changements. Donc pour les onglets, on va changer ça pour être bleu. Et on va changer ça pour être gris clair. Pour celui-ci, nous allons réduire la première minute, augmenter à la dernière minute. Et enfin pour les boutons, nous allons cacher ce premier, apparaître, ce dernier et la connaissance. Allez-y et retournez à l'état par défaut, appuyez sur l'aperçu et voyez ce que nous avons jusqu'à présent. Voici donc les offres spéciales et la charge levée juste pour une seconde. Ici, c'est. Tout d'abord, quand je clique sur la première et la dernière minute, mais je devrais d'abord l'animer, donne-moi juste une seconde. Alors allez au prototype, et je vais sélectionner celui-ci. Cliquez dessus. Donc, nous allons utiliser tap auto animate, ease in, out dernière minute et 0.6 seconde. Alors je vais le fermer. Retourne à la dernière minute. Cliquez ici, appuyez sur, et nous allons passer à l'état par défaut. Revenons-le maintenant. Et maintenant, si je prends u et cliquez ici, vous pouvez voir les transitions bien entre le premier et le dernier État, ce qui est génial. Et vous pouvez également cliquer ici et faire glisser entre ces états. Donc je ne sais pas pourquoi ça ne marche pas ici. Je le ferai parce que je ne l'ai pas changé, je ne l'ai pas copié. Alors faisons ça. Donc design. Dans la dernière minute, on va les montrer. Et en fait, oui, dans celui-ci, nous devons les cacher parce qu' il distrait de nos utilisateurs pour pouvoir cliquer et passer le curseur. Laissez-moi vous montrer cliquer et faire glisser. Remarquez, c'est donc le premier. Dernière minute maintenant que vous l'avez caché. C' est à ça que ça ressemble. Les premières minutes, tout fonctionne. Dernière minute, tout fonctionne juste parce qu'on vous l'a caché ici. Alors maintenant, allons de l'avant et traitons de ça. Voyons donc, nous l'avons laissé à l'état par défaut, ce qui est très bien pour la vidéo promotionnelle. Évidemment, je vais le réduire à ici et le ramener ici, par exemple, à quelque chose, quelque chose petit et de gentil comme ça. Et voyons, notre icône de jeu est restée la même. Donc, pour l'Europe, nous allons faire la même chose. Donc, tout d'abord, nous allons apporter un titre de section. Mettons-le au centre comme ça, et faisons face à ces changements. Donc, pour l'Europe, je vais aller avec voir où elle est. Alors Muskoka, 18 ans, ça va être 18 ans, gris foncé. Et laissez-moi vérifier l'espacement juste ici. Donc entre ceux-ci, c'est 40, donc c'est 18, c'est ATN, l'espacement est de 40. Alors faisons-le ici pour l'Europe. Alors juste 20. Ou je peux faire tomber ça et ça va réduire un peu notre mise en page, ce qui est très bien. Et nous allons évidemment ajuster un peu plus tard vers le haut, ou je peux même le faire maintenant simplement cliquer ici, puis revenir en arrière et l'ajuster. Voyons voir, on est à 84 ans ici, ce que je n'aime pas. Je vais faire monter quatre pixels. Voyons voir. Et puis amenez-le à 60. Voyons en fait où nous sommes ici. Nous sommes donc 48 ici, ce qui n'est pas idéal. Alors faisons ça aussi. 40 pour ça. Je n'aime pas ça. Alors voyons. Positionnez-le ici. Assurez-vous qu'il est 60, puis apportez ça à 40. Je pense que 150 jusqu'à. Donc une fois de plus 60 et puis 40 ici. Je vais passer à la dernière minute, et nous allons le changer ici. Si c'est nécessaire. C' est 60, c'est 40. Donc, il a changé dans l'état par défaut, ce qui est génial. Maintenant, allons de l'avant et passons à ici. Donc ce que je vais faire ici est vraiment extrêmement simple. Je vais simplement me débarrasser de certains d'entre eux. Donc, tout d'abord, nous allons cliquer sur RCT et je vais faire la même chose. Donc simplement ajusté à cette poussée. Et je vais l'ajuster à ce bord juste ici. Alors ce que je vais faire, c'est aller dans les villes. Et maintenant, comme vous pouvez le voir, nous en avons six. Donc je vais me débarrasser de trois et laisser trois d'entre eux à l'intérieur. Et ce que je vais faire, c'est de voir où il doit être ajusté. Donc, en gros Paris, Voyons voir. Nous devrons le déplacer comme si c'était juste un peu. Et puis il suffit d'élargir notre carte légèrement. Donc, tous ces éléments comme ça. Donc, nous sommes en train de déplacer notre image, notre arrière-plan, notre flèche et notre bouton. Tellement élevé, ce qui amène la position de Londres ici. Alors voyons. Juste pour être précis, ouvrez-le, sélectionnez ces trois et simplement étendu au bord comme ceci. Cachez-le et amenez simplement Rome. C'est ce que je disais. Donc, certains d'entre eux deviennent beaucoup plus faciles parce que maintenant nous n'avons pas d'effets de vol stationnaire à craindre. Nous avons juste tous ces éléments pour que nous puissions jouer avec eux comme nous le voulons. Vous pouvez même réduire cela à 20 si vous le souhaitez. Donc ça reste le même qu'ici, en haut. Mais parce que cette image est plus grande, par exemple, nous pouvons l'abaisser à 160. Donc maintenant ces cartes vont être presque exactement les mêmes. Je veux dire exactement la même chose que ces cartes ici en haut. Encore une fois, 160 et 20 ici. Donc, parce que j'ai ajusté celui-ci, je vais devoir revenir en arrière et ajuster celui-ci. Donc encore une fois, pour la hauteur, allez avec 160 comme ça, puis simplement déplacer le contenu à 20 comme ça. Haida Londres, retourne à Paris, 160 pour la hauteur juste là. Et puis il suffit de mettre ça en 20. Maintenant, ce que je vais faire est d'animer ce premier, et ensuite je vais revenir en arrière et éditer tous ces autres. Je vais donc en faire une dernière pour l'Europe, puis je vais changer ceux pour l'Afrique, l' Asie et les Américains, parce que comme toujours, ils seront exactement les mêmes. Donc, la première chose que nous allons faire est de remplacer certains d'entre eux. Donc, je vais utiliser avant de commencer à animer, Allons-y et repositionnons ces. Alors ramène-le. Et voyons voir. Je peux, par exemple, les ramener à 30 comme je l'ai fait avec les précédentes. Donc comme ça, et ensuite simplement apporter notre propre mettre dehors. Et voyons 30 comme ça. Et je veux juste vérifier rapidement ce qui est le meilleur pour mes flèches afin que je puisse les placer juste en dessous de mon bouton. C' est ce que je vais faire. Je vais utiliser ma position de bouton et je m'assure ici que je suis en train de suivre et ces lignes de grille comme ceci. Et je vais sauter à l'intérieur un peu prolongé. Et puis je vais réduire la taille de ceci à 800, assurez-vous que c'est gris clair. Et je vais m'assurer que ça va au centre comme ça, leurs habitudes. Et je vais aussi faire la même chose pour le vol stationnaire, mais si vous vous souvenez, nous n'avons pas inclus l'horreur, donc ça ne va pas être évidemment affecté. Mais comme toujours, si votre client le veut et que vous l'avez là, vous avez la possibilité. Enfin pour ici, Voyons voir, entre notre bouton et nos cartes, nous n'avons pas d'espace. Donc, je vais le positionner pour être, par exemple, à 40. Et je vais faire la même chose pour nos flèches. Alors allons-y avec 40. Je vais m'assurer qu'ils sont dans un centre. Cette flèche va à ce bord juste ici. Cette flèche va à ce bord juste ici. Et nous l'avons là. Vérifions le point d'onglet gauche. Assurez-vous qu'il répond à notre flèche. C' est la même chose pour le point d'onglet droit, ce qu'il fait. Et c'est fondamentalement tout. C' est ce qu'il faut faire. Tout cela est créé et maintenant animons rapidement. Ce que je peux faire, c'est aller avec l'Europe. Ou nous pouvons même utiliser le même point de tabulation. Alors faisons vraiment ça. Contrôle G, je vais l'appeler Europe et l'enlever dehors. Donc, il suffit de dégrouper le composant. Et je vais me débarrasser de ces flèches en bas. Je vais juste avoir la même mise en page que je l'ai fait ici. Donc tout à la première minute, et ensuite ça va dire toute l'Europe. Donc, à partir de là, fondamentalement, ce que nous pouvons faire, c'est que nous pouvons simplement le prévisualiser. Cette fermeture tout le chemin vers le bas parce que nous avons des onglets juste ici, vous pouvez garder les flèches si vous voulez animer intensément trois états, si c'est quelque chose que vous voulez. Mais je pense que cela va fonctionner très bien parce qu'il montre toutes ces cartes principales et ce bouton reste épinglé en bas. La section entière est lisible et facile d'accès. Donc je pense que ça va marcher très bien. Mais encore une fois, si vous voulez, vous pouvez créer exactement la même mise en page comme nous l'avons fait ici. Donc, si je vous ramène ici, nous avons trois états parce que les utilisateurs peuvent cliquer trois fois, mais au lieu de voir deux cartes, ils peuvent simplement voir une carte sur cette mise en page mobile. Donc c'est tout pour cette vidéo. Je vais partir maintenant et finir l'Afrique, l' Asie et l'Amérique en utilisant exactement les mêmes techniques, tailles, espacement, donc tout va être le même. Donc je ne perds pas trop de ton temps. Et puis je reviendrai et nous allons aborder certaines de ces autres sections. Je te vois dans la prochaine vidéo. 50. Créer une conception réactive Design 14: Ok, donc maintenant que j'ai ajusté tous ces différents éléments, déplaçons un analyte, explorons-les. Et chaque fois que j'ajuste quelque chose vers le bas, la mise en page entière se déplace parce qu'il est dans une pile, suffit de sélectionner le dossier principal. C' est pourquoi je l'ai mis là et je l' écrase simplement en haut et il va bien s'aligner. Comme vous pouvez le voir, nous avons l'Europe, nous avons l'Afrique, nous avons l'Asie et nous avons les Amériques. Donc tout est exactement le même. Et vous pouvez sauter à l'intérieur et vérifier dans le fichier de projet et voir par vous-même à quoi ressemble tout. Nous allons maintenant aborder ces images. Et fondamentalement, ce que je vais faire est simplement de m'ajuster comme ça. Et je vais simplement sauter à l'intérieur d'ici, ajusté à ici. Et je vais aussi changer la taille pour quelque chose comme ça. Donc, nous pouvons aller avec 375 avec 260, par exemple, 375 avec 260. Et je peux faire la même chose pour les autres. Donc 375 largeur 260. Je vais juste changer ça à 375 largeur à 60. Maintenant que nous avons exactement la même mise en page. Maintenant, revenons à ici. Et je vais changer ce texte. Sautons à l'intérieur d'ici. Alors passons à 80 et avalons 0 pour une raison quelconque. Je ne sais pas pourquoi. Alors réservez votre voyage de rêve avec nous. Laisse-moi vérifier. Oui, il l'a fait partout. Laisse-moi aller de l'avant et arranger ça. Guérira voyage de rêve avec nous. Et je vais devoir changer la largeur de ce texte pour l'adapter à quelque chose comme ça. Là, nous l'avons. Changez-le ici aussi. Changons la largeur de notre texte à notre grille comme ceci. Et allons-y et changeons-le ici. Alors réservez votre voyage de rêve avec nous. Et je vais l'étendre à juste ici. Et puis simplement ramener un peu plus près comme ça. Voyons voir, juste pour qu'il touche le bord de notre image. Donc nous l'avons là. Et maintenant, allons-y parce que je crois que je l'ai fait partout. Laissez-moi le faire ici aussi. Bulkier voyage de rêve nous mettre simplement assurez-vous d'aligner notre image ici. Et il y a un voyage parfait. Donc, j'ai réparé tout ça. Ce ne sont donc que quelques choses que vous allez ajuster ici et là. Et la beauté d'utiliser Adobe XD pour l'ensemble de votre design est juste ceci. Ainsi, vous pouvez rapidement et facilement corriger certaines de ces erreurs, comme d'habitude les clients ou quand vous dire pour le texte Tokyo, apporter ceci, sortir ceci, agrandir, rendre cela plus petit. Vous pouvez donc vraiment faire tous ces changements majeurs très facilement dans votre texte et dans votre fichier global. Alors nous allons travailler là-dessus maintenant. Je vais aussi cliquer sur celui-ci. Assurez-vous que c'est 18 mélange, c'est gris foncé. Et je vais apporter mon texte ici. Et voyons ce qu'on peut faire. Ajustez-les simplement. Voyons ce qu'on peut savoir. Peut-être qu'on peut se débarrasser du rêve. Voir un assez rapide, j'ai encore quelques problèmes bizarres que nous prenons d. Donc MOOC votre avec nous comme ça. Et je vais simplement sélectionner mon texte et l'apporter ici et ici comme ça. Et puis je vais faire la même chose pour ici et ici. Et voyons ce qu'on peut faire ici. Nous pouvons l'ajuster à, par exemple, 40. Et voyons ce que nous avons en haut, nous en avons 100 pour pouvoir sauter ici, changer à 60, comme ça. Nous avons donc 40 entre ces deux et nous avons 60 entre notre image et nos textes. Donc tout de suite, je vais sauter là-bas et changer notre distance à 60, comme là. Et puis nous allons traiter le texte un peu plus tard. Finissons d'abord, ici. Donc, il est dit obtenir un devis gratuit. Et ce bouton, je vais le positionner ici, assurez-vous qu'il est 40. Je vais l'étendre pour entendre des nouvelles. La même chose pour l'horreur, sautant ici. Utilisez du blanc et ajusté pour décenter comme ça. Ensuite, je vais passer à l'état par défaut ici. Ensuite, utilisez 18 gris foncé sélectionné et assurez-vous qu'il est au centre comme ceci. Et nous l'avons là. Maintenant que cette section est terminée, je vais aller de l'avant et faire l'autre qui est en panne, qui est celle-ci. Donc, tout d'abord, changeons cette chanson en cliquant ici et assurez-vous qu'il est 80. Utilisez ce 18 gris foncé là-bas, nous l'avons. Ensuite, je vais aligner mon texte ici au centre, sauter à l'intérieur d'ici. Et voyons. Donc, tout d'abord, assurez-vous que c'est la hauteur automatique. Assurez-vous qu'il s'agit d'une hauteur automatique, puis simplement ajusté à la largeur de nos lignes de grille comme ceci. Et puis ça aussi. Et puis nous allons voir ce que nous allons changer ici. Donc Derek, un parfait, je ne pense pas qu'on va pouvoir l'adapter. Non. Il y a un voyage parfait pour tout le monde. Donc, si vous n'aimez pas comment ça ressemble, peut-être que nous pouvons l'ajuster pour aller un peu dehors. Touchez ici, parfait. Et puis bouge, monte. Et puis cliquez ici pour tout le monde. Alors faites quelque chose comme ça, et on pourra l'ajuster encore une fois. Voyons si ça va marcher. Mais c'est là. Et enfin, traitons de ça. Donc je vais passer à 20, puis 40, et ensuite les nouvelles et ce bouton, assurez-vous qu'il est 40 en position basse et ici, ici. Et puis ici, sélectionnez celui-ci, assurez-vous qu'il est 18 ans. Retourne. Assurez-vous qu'il est au centre comme cet état par défaut. Ça va être 18 gris foncé. Assurez-vous qu'il soit au centre comme ça. Et les chèques sont 40, c'est 40. Et comme je l'ai dit, ce sera 60 ans. Alors maintenant que cette section est terminée, Travaillons maintenant sur certaines de ces autres sections me solide, voir où nous avons commencé. Enfin la page d'accueil, l'aligner vers le haut parce que nous avons apporté quelques modifications à nos sections. Voyons donc l'Asie, les Amériques, et travaillons sur nos meilleures destinations. Voyons ce qu'on peut faire ici. On va se débarrasser de nos flèches comme ça. Et nous pouvons nous en débarrasser, certaines de ces destinations. Donc on va en utiliser trois. On va se débarrasser de ces trois. Et je vais en fait sélectionner un de ces boutons et simplement le copier. Contrôlez C, contrôlez V et positionnez-le à l'intérieur de nos destinations les plus prisées. Mais avant ça, je vais copier ce texte. Et je vais le mettre en groupe. Donc ces deux contrôle G. Adoptez ce tenace et je vais faire un clic droit sur le composant Ungroup, puis utiliser le bouton bu et l'amener ici. Alors je vais l'amener jusqu'au bout, assurer qu'il est 40 ans. Voyons ce que nous pouvons faire ici pour ajuster ça comme ça. Et je vais cliquer ici sur nos destinations. Assurez-vous d'utiliser le groupe de défilement ici. Alors je vais l'ouvrir. Utilisez les trois, assurez-vous qu'ils sont centrés. Positionnez-les ici pour que je puisse les aligner sur notre grille sur écrire ceci comme ça. Et je vais aller de l'avant et maintenant ajuster les trois. Donc, une fois de plus, vous pouvez sauter à l'intérieur et changer votre texte si vous le souhaitez, vous pouvez changer leurs tailles. Mais je ne vais pas, je pense que cette mise en page va très bien fonctionner, surtout parce que nous sommes dans une grille réactive. Donc nous l'avons là. Et maintenant enfin, nous allons travailler là-dessus. Voyons si je clique ici. Voyons voir que je peux réduire cela à 160 afin que nous puissions avoir la même hauteur de contenu que nous l'avons fait pour la carte supérieure. Donc, tout semble exactement le même et cohérent. Donc, pour la hauteur juste ici, utilisez 116. Cachez ça. Et enfin pour celui-ci, utilisez 160. Maintenant, désolé, pas en largeur mais en hauteur. Encore une fois, des trucs bizarres et bizarres se passent avec Adobe XD. Allons donc annuler, redimensionner et ramener l'opacité. Je vais cliquer ici un. Encore une fois, je ne sais pas pourquoi. Ça continue de se produire. Mais encore une fois, je vais enregistrer mon dossier et puis revenir. Et maintenant que j'ai réparé ça, continuons maintenant et repositionnons certains d'entre eux. Alors voyons, quelque chose ne va toujours pas, juste ici avec le multi-usage, je pense que c'est juste le masque d'image qu'il est. Laissez-moi simplement double-cliquer et le déplacer. Lake District. C'est bon. La Toscane va bien. Alors ramenons ça. Je vais tenir ma touche Maj, utiliser celle-ci, maintenir la touche Maj comme ça. Alors je m'incline devant eux et je m'assure qu'ils ont 30 ans. Comme ça et finalement déplacé la Toscane 30 aussi bien. Je vérifie les destinations. L' édition, c'est bien. Assurez-vous d'ajuster cela à 40. Voyons, donc 80. Maintenant, il est 40. Et enfin, traitons du texte du haut à ce stade. Donc ça va encore être 80. Alors passons à ça. Voyons si ça tient à l'intérieur, ça ne le fait pas. Donc, peut-être que nous pouvons faire est de choisir nos meilleures destinations, puis de le mettre ici, assurez-vous qu'il est centré, aligné comme ça. Et puis simplement se positionner juste ici. Assurez-vous qu'il est 40. Laissez-moi juste vérifier rapidement que les distances ici, donc il est 40 et 60 ci-dessous. Voyons voir, nous sommes encore 150 ici. Je vais changer ça pour être 18 puis gris foncé. Et je vais résoudre ça pour m'assurer qu'ils sont dans un centre. Cette section intitulée le positionne au centre comme ça. Et voyons. On a 60 ans. Et parce que je les ai déplacés, une fois de plus, cela va se produire. Donc, si ça vous arrive, ne vous inquiétez pas à ce sujet. Il suffit de le sélectionner et de le déplacer vers le haut. Donc simplement côté du dossier principal, cliquez ici et il va aller directement vers le haut. Alors maintenant que tout cela est terminé, ce qu'il nous reste à faire, c'est de les ajuster. Et ce que nous pouvons faire avec ces cartes est vraiment assez simple. Donc je vais faire la même chose que je l'ai fait auparavant. Et je vais arrêter la vidéo ici. Mais en fait, non, continuons. Travaillons en fait avec ça. Alors voyons ce qu'on peut en faire. Témoignages, je vais effectivement les regrouper, appuyez sur Contrôle G. Copier ce texte des témoignages de qualité sur le groupe de ce composant. Parce qu'une fois de plus, on va utiliser la même chose ici. Et peut-être que cette fois, nous pouvons même utiliser des flèches. Ainsi, les utilisateurs peuvent appuyer sur ces flèches parce que nous avons des flèches juste là en haut. Donc peut-être qu'on peut le faire juste pour pimenter un peu les choses. Alors parlons d'abord de ça, ou je vais utiliser 80. Et pour cela, je vais utiliser 18 gris foncé. Voyons ce qu'on peut faire. Alors sélectionnez-les tous comme ça. Assurez-vous que nous sommes dans un centre comme celui-ci. Voyez ce que les gens disent. Nous pouvons le couper là et les voyageurs nous aiment. Assurez-vous de le mettre en alignement ci-dessous. Encore une fois, voyons. Donc 1, 2, 3, 4, je pense que c'était ça ? Ouais, et puis 60 vers le bas. Voyons donc, 123460. Donc 40 et 60. Laissez le vérifier rapidement ici. Donc ici, vous pouvez voir qu'on en a 47, ce qui est bizarre. Alors 40 ? Je ne pense pas probablement parce que oui, donc 40 et 60. Et vérifions notre mise en page pour voir où elle finit. Page d'accueil en haut à droite, là. Oui. Donc je pense que ça a l'air bien. Donc 150, c'est bon. Et ça fait 40, ça fait 60 morts, super. Et nous allons maintenant travailler sur notre témoignage. Donc la première chose que je vais faire est la même chose que je l'ai fait avec ceux-ci, c'est en fait étendre cette, fermer, cette fin. Je vais ajuster ma première carte, donc carte de témoignage et quand l'amener au bord. Et je vais l'amener au bord de la mer aussi. Donc, juste là. Et puis je vais ajuster notre texte. Alors amenons-le d'abord au centre. Voyons donc ce qui doit être ajusté aération. Voyons ce qu'on peut réparer ici. On peut le changer ici et on peut le changer ici. Voyons voir, on est à 40 ans. Changons celui-ci pour être 24 boulon 24 modèle comme celui-ci. Allons-y avec, voyons, 40. Et je vais changer ça pour quelque chose d'encore plus petit. Par exemple, allons-y avec 16. Voyez à quoi ça ressemble. Ça a l'air bien. Ça va être 18 ans et voyons, 40. Comme ça. Sélectionnez notre texte et notre carte de témoignage cliquez ici, et nous l'avons là. Donc, ce que je vais faire en fait, c'est copier cette carte de témoignage et ensuite je peux faire des changements là-bas. Alors appuyez sur le contrôle D, le contrôle D, le contrôle D. comme ça. Donc, en fait, non, revenons en arrière. Donc ce que je vais faire ici, c'est couper un peu à quelque chose comme, voyons, organiser les troupes vont être mélangées et tout ce qui se trouve entre les deux. Donc on peut réduire à ce problème. Peut-être que je peux déplacer ça vers le bas. Fondamentalement ce que je voulais éviter que ceux-ci aient un mot dans une ligne. Donc c'est ce que je fais en ce moment. Donc c'est bien. Et maintenant, à ce stade, je peux copier cette carte. Donc le contrôle D, le contrôle D, le contrôle D. Je veux en avoir quatre. Et fondamentalement, je vais sauter à l'intérieur et corréler avec Bree Jackson. Et elle a voyagé à Paris pour que je puisse me débarrasser de cette carte. A voyagé à Paris. Cette personne a voyagé à Bali et son nom est Arthur Hammond. Alors peut-être peux-tu le copier et le coller ici. J' espère que ça ne gâche pas notre mise en page. Ce n'est pas le cas, ce qui est génial. Alors je peux supprimer celui-ci. Mais encore une fois, comme vous pouvez le voir, nous avons quelques problèmes ici et là que je suis brun va aller à ce dernier et elle a voyagé à Tokyo comme ça. Et enfin, nous allons nous débarrasser de ce chariot. Maintenant que nous avons pour nous pouvons commencer avec nos animations. Alors ramenons tout ça, changez en noms, alors textez à trois. Et enfin, quatre. J' aime ça. Je vais me débarrasser de nos textos. Je vais utiliser nos flèches, les placer au centre, m' assurer qu'ils sont, disons 80 et quand les déplacer à 60. Et je vais faire la même chose. Donc je vais ajuster cette flèche pour aller à ce bord et un peu plus comme ça. Troupeau laitier et faire la même chose pour celui-ci. Donc, je vais l'ajuster à ici, le point d'onglet utilisé et ajusté à ici. Maintenant que nous avons tout, nous pouvons commencer par des animations. Et évidemment, cela va être assez simple. Salt, appelons ça des témoignages plus sur mon père. Et évidemment, vous pouvez inclure des images si vous voulez, pas seulement pour celui-ci, mais aussi pour le texte, si vous voulez, mais je ne vais pas le faire. Et nous devons ajouter celui-ci de plus parce que nous avons utilisé 16. Je vais le déplacer jusqu'ici parce que c'est le plus petit. Et maintenant, nous allons créer notre composant frappé Control K. Et je vais créer un nouveau témoignage de qualité d'état à copier dans ce texte. Pour un témoignage à évidemment vont les déplacer. Alors déplacez ça. Voyons où nous en sommes avec nos témoignages. C' est très bien. Fermez-le. Nouveau témoignage d'Etat trois. Je vais sauter à l'intérieur, les déplacer une fois de plus comme ça. Zoom. Et troupeau laitier. Et enfin, en créer un nouveau. Juste de l'ammoniac pour sauter à l'intérieur. Témoignages et pleuré le dossier en place comme ça. Et enfin, allons de l'avant et prototypographie. Revenez donc à la valeur par défaut, prototype d'état. Et on va utiliser des flèches, non ? Appuyez sur le point. On va s'arrêter. L' autonomie. L'outil Témoignage est de 0,6 seconde. Sautez à l'intérieur du témoignage deux flèches à gauche. Donc on va aller toucher l'autonomie. L' état par défaut est dans notre 0.6 seconde, puis faites la même chose pour celui-ci. Mais ici, nous allons passer au témoignage trois. Maintenant, dans le troisième, retournez à la deuxième. Ça va passer à la quatrième. Et enfin, sur le quatrième, je vais sauter avec notre flèche gauche vers le terminal. Et nous l'avons là. Maintenant que c'est terminé, nous pouvons revenir à la conception. Et enfin, pour finir cette vidéo, je vais travailler sur cette section. Il suffit de le déplacer comme ça. Et ce que je vais faire, c'est sauter ici. Donc, parce que nous sommes à 120, ce que nous pouvons faire est d'ajuster ça à 80, assurez-vous qu'il est blanc. Et je vais penser que ça va bien se passer, alors peut-être que nous pouvons les déplacer. Faisons-le d'abord et faisons-le pour tous. Alors, où nous sommes 80 blancs. Au blanc. Et vérifions avec le premier, le bien-être soviétique. Ce que nous avons ici, c'est 32. Je n'aime pas ça. Donc je vais y aller avec 40. Et je vais sélectionner ces deux-là et m'assurer que nous sommes à 20 de ce bord, donc nous avons beaucoup d'espace ici. Et puis il suffit de les sélectionner tous et de les ramener ici. Je n'aime pas non plus la hauteur de cette carte orale. Donc, par exemple, on peut sauter ici et pour la hauteur, on peut faire quelque chose comme, je ne sais pas, à 60 peut-être. Allons-y avec 300. Je pense que ça va marcher un peu mieux avec ce bien-être. Le 12, 20, puis 20 vers le bas. Je ne pense pas que ça marche bien. Donc, une fois de plus, 300 va être la hauteur. Donc c'est tout d'abord, réduisez cela à quelque chose comme ça. Croisières. On va changer la hauteur à 300. Vr, on va s'assurer que c'est 40, n'est-ce pas ? Vérifions vite ici, ou c'est 20 ? C' est 20. Donc 20. Et ce que nous allons faire, c'est simplement les ramener ici. Déplacez ça à 20, puis à 20, comme ça. Et les laiteries l'ont. Finalement, traitons de la finale 1, troisième 1. Et ce qu'on peut faire, c'est l'ajuster d'ici, donc 300. Et je vais amener ces deux-là, 2020, et puis m'assurer que le ski, Il est positionné 20 comme ça. Et vérifions rapidement les distances entre celles-ci. Donc 30 n'est pas bon et quand utiliser 40. Et voyons ici, 43 n'est pas bon, donc je vais, voyons plus avec trois. Et puis voyage schéma déplacé le long du chemin, ce qui est génial et tout ajusté comme il se doit. C' est 150. Et enfin pour cette vidéo, et je veux ajuster nos partenaires parce que c'est un peu plus facile sections. Alors allons-y avec 80. Allons-y avec 18, 9 dat. Et mettons dans notre titre de section au centre comme ceci, nos partenaires s'intègrent très bien. Et ce que nous pouvons faire est de mettre cela en deux lignes, qui est aussi bon. 60 et quand s'assurer que c'est 40, n'était pas toujours oublier ces choses. C' était 40, super. Et ça va être à 60 ans jusqu'ici. Alors sélectionnons nos logos et utilisons 60. Et puis ce que nous allons faire en fait, c'est utiliser ce groupe scrollable pour venir directement ici et ensuite l'amener directement ici. Et enfin, je vais ajuster la taille de nos logos. Tout d'abord, assurez-vous de les ajuster ici. Et puis tout le chemin jusqu'ici par exemple. Donc, nous pouvons voir deux logos et ensuite ils peuvent défiler à gauche et à droite s'ils veulent voir. Le reste de ces logos a vu quelque chose comme ça. Donc, quand je clique dehors, c'est à ça que ça ressemble. Alors chéri, comment c'est, C'est tout pour cette vidéo. Dans la prochaine vidéo, nous allons revenir et terminer notre design, responsive design complètement parce que nous allons travailler sur ces sections et enfin, sur un pied de page, puis terminer notre design responsive. Alors je te verrai là-bas. 51. Créer une conception réactive 15: Et maintenant, allons de l'avant et finissons enfin notre design responsive pour cette version mobile et pour toute cette classe. Donc je vais commencer avec cette section juste ici parce que c'est 36. Je vais le réduire à 24 volts. Et je vais cliquer ici, assurez-vous que c'est aligné à gauche. Et je vais le positionner juste ici. Et parce qu'il fait 18 lumière et quand s'assurer qu'il est 20 à Dan et quand porter cette section entière à 40, par exemple. Et quand apporter tout cela, je vais aller à l'intérieur, sélectionner nos devises positionnées ici. Et je peux même le faire si je le veux, je peux les mettre dans une pile. Et puis pour chacun d'eux, je peux, par exemple, réduire la quantité de pile peut-être à 40. Je pense que ça va être assez bon, mais je dois tenir Shift et le ramener à 40 comme ça. Donc il est maintenant 40 partout pour tout ça. Et évidemment, les utilisateurs peuvent faire défiler. Nous allons simplement ajuster à juste ici pour que les utilisateurs sachent qu'il y a plus d'espace pour faire défiler pour écrire leur 150. Et c'est fondamentalement tout pour la section des taux de change des DES. Passons maintenant aux questions. Et cela va évidemment être notre plus grand défi parce que nous devons l' ajuster pour s'adapter et nous devons ajuster toutes ces animations du bas. Donc, tout d'abord, traitons de ça. Donc, si vous vous souvenez, c'était 40, ça, et amenons ça à quelque chose comme ici. Alors je vais utiliser mon texte. Assurez-vous qu'il est centré, aligné et, et quand positionner également cela ici. Alors assurez-vous qu'il est centré à peu près là. Alors préparez-vous pour votre voyage de rêve. Je vais le convertir en hauteur automatique. Et voyons, je peux l'étendre d'ici à ici. Voyons voir dans le rêve ne rentrera pas. Utilisons seulement le voyage. Alors préparez-vous pour votre voyage et voyons ce que nous pouvons couper ici. Donc, si j'ajuste cela, voir à quoi ça ressemble à prendre et tellement plus, utilisons-le comme si c'était juste ici. Donc 40. Et nous allons régler ce bouton, glisser vers le bas. Alors revenons à ici, réparé ça comme ça. Cliquez sur notre bouton, déplacez-le vers le bas 40 et 60. Déplacez notre bouton ici. Assurez-vous qu'il est 60. Cliquez ici, en bas juste ici, cliquez à l'intérieur ajusté. Utilisez du blanc. Désolé, pas 16 mais 18. Parce que maintenant un 16, son plus petit. Alors cliquez quelque part par ici. Et Dan, je vais passer à l'état par défaut, cliquer dessus et utiliser 18, et aussi utiliser un mélange gris foncé. C' est dans un centre comme celui-ci. Et maintenant, nous devons aborder, aborder cette question, une section de questions communes. Nous sommes donc à 100, et évidemment, nous allons devoir ajuster beaucoup de ces différentes choses ici. Donc, tout d'abord, traitons avec ces diviseurs ennuyeux. Donc, je vais sélectionner celui-ci, maintenir la touche Maj et voir où je finis avec. Donc je vais finir à 3344, la largeur. Donc je vais utiliser les mêmes paramètres pour le reste de nos diviseurs. Donc 334. Cliquez sur ce 1334, et enfin cliquez sur ce 1334. Ensuite, je vais sélectionner toutes mes icônes de vêtements comme ça. Maintenez ma touche Maj, déplacez-les tous de nouveau et ajustez simplement à notre grille comme ceci. Donc, il suffit d'un pixel et puis je vais sélectionner tous ces textes. Donc ça, ça, ça, et ça. On peut voir que c'est 24 boulon. Voyons ce qu'on peut faire ici. Donc peut-être que nous pouvons même faire quelque chose comme 18 boulons que nous avons fait ici, mais nous allons simplement utiliser 18 noir parce que nous avons 18 gras ici. Donc on fait la même chose, mais on le garde noir pour qu'il ressemble exactement à la même chose. Je vais m'assurer de les aligner tous au centre de nos icônes comme ça. Cachons ça pour que je puisse travailler dessus. De toute évidence, nous avons encore un peu de ces problèmes qui se chevauchent. Donc, ce que je vais faire ici est fondamentalement déplacer la ligne suivante vers le bas et ensuite en fait ajusté au centre parce que je pense que cela fonctionne beaucoup mieux. Laisse-moi cacher celui-là une seconde. Cliquez ici. Donc la politique d'annulation va tomber. Réglé au centre. Je vais le cacher. Cliquez ici. Choisissez vos partenaires peuvent descendre, assurez-vous qu'il est au centre. Et enfin, faites la même chose pour les voyages personnalisés. Donc, les groupes personnalisés fonctionnent ajustés au centre comme ceci. Et nous allons faire, c'est ramener tout ça. Maintenant qu'on a des données, qu'on les instaure, ce que je vais faire, c'est voir où on arrive avec ça. Donc, en fait, nous pouvons faire des distances personnalisées un peu plus tard. Mettons-les tous à la vague pour qu'on puisse travailler sur celle-ci. Donc je vais ramener nos textos. Il est 24. Évidemment, c'est beaucoup trop grand, alors ajustons-le à 18, et utilisons du gris foncé. Et enfin, je vais ajuster notre texte comme ça. Assurez-vous que c'est, par exemple, trois lignes grandes comme ça. Et puis faisons la même chose pour tous. Donc je vais les ramener, assurer que je le globe oculaire et ensuite je vais 60, par exemple. Comme ça. Ensuite, faites la même chose pour la politique d'annulation. Laisse-moi plus que ces deux-là tomber comme ça. Alors allez avec la politique d'annulation. Montre-le. Assurez-vous que je vais avec 18 gris foncé et simplement ajusté comme ça. Comme ça. Il suffit de régler un peu. Donc, peu importe si ça descend un peu. C' est très bien. Partenaires, ramenons-le ici et globalisons-le comme ça. Assurez-vous qu'il est 60. Et puis je vais déplacer mon voyage personnalisé vers le bas, travailler sur les partenaires, le ramener. 18, gris foncé. Cliquez en arrière et ajusté à cela. Je n'aime vraiment pas comment cela ressemble, mais ce que vous pouvez faire, c'est être très fiable pour, supprimons ces mots pour l'hébergement, le transport et les voyages. Donc ça va marcher bien pour nous. Retirez-le ou masquez-le, puis apportez ce dernier. Deux, à peu près par ici. Voyons voir. On y va, 60 ans. Et ramène ça. Je vais m'assurer qu'il est enfin 18 gris foncé et le ramener jusqu'à l'intérieur. Et on se fiche de ce que ça ressemble ici. Ça a l'air bien, mais on s'en fiche parce que c'est le dernier. Donc enfin, je vais le cacher et allons-y et maintenant animer tous. Donc, si vous vous souvenez d'exemples précédents, nous devons en fait les animer tous. Donc je vais sauter à l'intérieur, les sélectionner tous, contrôler C, sauter à l'intérieur d'ici. Contrôle V. Je vais les ramener. Celui-ci, Contrôle V, et celui-ci. Et enfin, je vais m'occuper de ce dernier. Basez ça ici et supprimez-les pour l'instant parce que c'est notre dernier. Allons de l'arrière à l'avant. Donc je vais faire comme ça, déplacer notre séparateur vers le bas. Donc c'est la distance ici est de 52. En fait, je n'aime pas la distance. Désolé pour ça. Quand je devrais vraiment faire est de revenir à notre état par défaut , puis ajuster les distances entre tous nos diviseurs. Donc je vais devoir le faire d'abord. Voyons voir, il est 50 pour le sélectionner et un texte. Et peut-être que ces reposent. Donc deux, puis 40. Alors, allez juste ici. Et voyons, c'est par exemple, 60, comme nous l'avons choisi pour l'être. Donc diviseur et cinquième 40. Et sélectionnez ces deux-là. Donc comme ça. Et voyons du diviseur pour entendre. Oui, on a 40 ans. Et enfin, pour les voyages personnalisés, nous pouvons simplement faire 12 puis 40. On y va. Et maintenant, je vais effectivement copier et coller dans tous ces. Désolée pour ça. Mais comme vous pouvez le voir parfois pendant que vous travaillez, je suis en train de trouver toutes ces solutions parce que j' essaie d'obtenir la facilité d'utilisation optimale de toutes ces conceptions. Donc, je fais des changements à subir parce que ce changement n'était pas la partie du design original que j'ai créé. Donc, je suis simplement en train de le créer au fur et à mesure que je vais. Enfin, nous sommes à ce quatrième état, donc des voyages personnalisés, donc nous pouvons réellement aller au premier. Donc ça va être beaucoup plus facile à suivre. Mon voyage est-il protégé ? Donc il est situé ici, il est. Je vais l'ouvrir. Ramène ça, ramène mon séparateur sur le bord. Assurez-vous qu'il est 40. Et puis sélectionnez ces trois. Alignez-le avec notre séparateur. Comme ça. Je peux aller avec 40 ou même mieux, je peux aller avec 60 pour que nous maintenions le même espacement. Politique d'annulation. Donc ce n'est pas le cas, c'est tourné. Et C, donc 040. Et puis sélectionnez simplement ces deux. 60. Choisissez vos partenaires. Ramène-le, diviseur. C'est 40. Et enfin, des voyages personnalisés se déplaçant tout le long de mon bureau. C' est 60. Et enfin, pour le dernier, les voyages personnalisés, je vais le ramener. Je vais utiliser notre diviseur, le ramener jusqu'à 40, comme ça. Et là, nous l'avons maintenant, évidemment la dernière chose que nous allons faire avant l'animation est de faire pivoter ces icônes. Alors allons-y pas à pas. Allons à venir des questions, par défaut, état. Donc tous sont S plus est mon voyage protégé ? Donc je vais sauter à l'intérieur de celui-là. Maintenez ma touche Maj et tournez comme cette politique d'annulation. Alors c'est celui-là. Fermez le vol stationnaire, puis tournez comme de la saleté. Changez, choisissez vos partenaires. Ça va être celui-là. Cela, et enfin le dernier pour les voyages personnalisés. Et je vais cliquer dessus. Fermer l'icône et comme ça. Donc, maintenant que tout cela est terminé, nous pouvons revenir à l'état par défaut et commencer à animer ce prototype. Et encore une fois, nous allons garder les mêmes paramètres. Super cliquez sur le premier. Nous pouvons voir taper ce animate facilité dans 0.6 secondes. Donc, nous allons essentiellement l'utiliser aussi. Ainsi est mon voyage protégé et quand revenir au disque d'état par défaut gardé les mêmes paramètres. Donc, la politique d' annulation va aller à la politique d'annulation partenaires vont aller aux partenaires. Alors choisissez vos partenaires. Et enfin, voyages personnalisés va aller à Voyages personnalisés et sexuellement testés et voir si cela a un sens et peut aller jusqu'au bas. Situé. Nous y voilà. Donc, si je clique ici, ça m'emmènera là, ce qui est très bien. Si nous cliquons ici, ça m'emmènera là. Mais je ne l'ai pas animé. Alors traitons de ça. Alors venez des questions. Nous sommes à mon voyage protégé. Alors voyons. Celui-ci est celui-ci va à l'état par défaut, la politique d'annulation. Va aux partenaires de politique d'annulation va aux partenaires et voyages personnalisés. Accédez aux voyages personnalisés. D'accord. En fait, animons tous et nous allons vérifier ça. Mon voyage est-il protégé ? Il va passer à, désolé, état par défaut car il est ouvert. Cela va aller pour choisir vos partenaires. Ensuite, les voyages personnalisés vont aller à Voyages personnalisés et choisir vos partenaires. Cela va fonctionner à l'état par défaut. Et enfin, des voyages personnalisés. Il va aller aux voyages personnalisés. Et enfin, à la toute fin, Nous allons traiter avec le dernier état, qui est voyages personnalisés. Alors sa métrique est-elle protégée ? Cela va aller à la politique d'annulation et cela va être un problème parce qu' il ou les laboratoires ou sont beaucoup, choisissez vos partenaires. Et enfin, cela va passer à l'état par défaut. Donc, une fois de plus, vous devrez expliquer à votre client si vous utilisez des animations comme des données DES, certaines d'entre elles vont se chevaucher et majoritairement. Alors vérifions ça. Et cela fonctionne bien. Cela fonctionne bien. Donc maintenant, si je clique ici, ça va me prendre, ce qui est très bien. Si je clique ici. Donc, tout en bas va ouvrir. Et si je clique ici en bas, ça va s'ouvrir très bien. Et comme vous pouvez le voir, il ajuste bien notre mise en page parce que nous utilisons ces piles comme ceci, donc cela devrait maintenant fonctionner un peu mieux. Et enfin, traitons de ces deux dernières sections. Laisse-moi cliquer dessus et aller 80. Va cliquer sur celui-ci, 18 gris foncé. Voyons ce qu'on peut faire. Restez dans la boucle. Peut-être que nous pouvons mettre deux lignes comme ça et ensuite ajuster cela pour qu'il soit 40. Ajustez cette entrée pour être, voyons 60. Voyons voir 59, 60, c'est bon. Maintenant, pour la saisie de texte, ce que nous pouvons faire pour l'entrée elle-même, nous pouvons changer comme ceci. On peut utiliser ça. Donc saisie de texte, je peux le ramener ici. Et je peux apporter l'entrée Vg ici. Ensuite, nous pouvons simplement écrire votre email comme ceci. Et au lieu de 40, on peut l'amener à 20. Nous pouvons aussi mettre ça en 20. Comme ça. Et enfin, nous allons travailler avec notre bouton. Donc je vais me positionner ici. On est à 29 ans. Donc, ramenons-le à 40 par exemple. Et je vais l'ouvrir. Donc, le bouton d'abonnement va être juste ici. Si je vais au prototype, comme vous pouvez le voir, ce n'est pas prototypé. Retournez à Design. Nous allons aller avec 18 blanc uni et assurer que nous le positionnons au centre et c'est fondamentalement tout. Donc c'est 40 et ça 60, ce que nous voulions en premier lieu. Et tout cela correspond là où le monde, c'est 150. C' est notre problème ici parce que nous avons cet espace vide, donc nous allons l'aborder à la toute fin, mais nous allons maintenant traiter de notre pied de page. Donc, tout d'abord, je vais apporter mon image de pied de page et la superposition de couleur dans. Et puis je vais m'occuper de ce séparateur ennuyeux d'une fois de plus. Alors positionnez-le ici et cliquez ici, ramenez-le ici. Alors je vais y aller avec le logo. Assurez-vous qu'il est au centre. Et cela peut vraiment le rendre un peu plus petit, mais parce que nous n'utilisons pas PNG ici, laissez-moi prendre notre position PNG à Mirador ici. Et peut se positionner au centre. Je peux me débarrasser de celui-ci. Et assurez-vous que je suis dans un centre Shift Alt, clic gauche, et juste le rendre un peu plus petit. Pour l'info du pied de page dans son ensemble, je vais aller quelque chose de plus petit. Donc peut-être 60 du haut. Je pense que ça va marcher un peu mieux comme ça. Maintenant, traitons de toutes nos informations. Allons d'abord ajuster ces derniers. Donc navigation principale. Et si je saute à l'intérieur d'ici, vous pouvez voir qu'ils ont tous 24. Alors traitons de ça. Nous allons traiter avec 18, puis blanc. Nous allons les sélectionner et passer avec 18. Et si nous le pouvons, et sélectionnez-les. Alors allons-y comme ça. Et voyons 18 blancs, ce qui est très bien. Maintenant, traitons de nos distances. Donc, ce que nous pouvons faire ici, c'est en fait , je peux, par exemple, positionner celui-ci pour décenter, mais ça ne fonctionnera pas si bien. Je ne pense pas à cause de ces points d'écoute, mais en fait cela fonctionne. Voyons si on peut faire la même chose ici. C'est très bien. Donc, nous pouvons réellement le garder comme ça juste parce que le texte est plus petit, vous pouvez utiliser 16 si vous le voulez parce que c'est le pied de page et alors ça va être beaucoup mieux. Alors testons ça en fait. Alors 16 ans, Daniel est blanc. Utilise ceux-ci. 16 puis blanc. Et je pense que ça marche encore mieux comme ça. Alors positionnez ici, ici. Et ça va être au centre. Et ça va être au centre. C' est ce que nous allons aller ici, et ça va aller jusqu'ici. Donc, en fait, ça marche beaucoup mieux. Et la position est 40 entre notre logo est 60, ce qui est bon. Le diviseur est bon. Maintenant, traitons du fond pour lui-même. Déplaçons nos icônes de médias sociaux au centre. D' accord, autour de là, les analytes ont maintenant changé la taille de ces textes à 16 aussi. Donc pour nous traiter avec ceux-ci. Donc 16 blanc, choisissez ce 16 blanc. Là, nous l'avons. Et maintenant, nous allons rapidement l'aligner. Donc je vais aller avec acheté quelques infos, s' assure qu'il est centré juste là. Assurez-vous que cela est centré juste là. Je pense ici. Quelque chose comme ça. Maintenant, allons-y en fait. Travaillons d'abord avec notre texte. Donc je vais changer dans ces deux là, juste là, et ensuite ajuster ça à ici. Et maintenant que nous avons que nous pouvons réellement ajuster cela pour être au centre comme il devrait toujours l'être. Et maintenant, traitons de notre histoire. Donc je vais sélectionner ces deux-là et les ramener. Juste un peu. infos de pied de page peuvent aller, et puis cela peut aller. Pour que je puisse réparer mon image. Double-cliquez sur les positions ici, ramenez ça, ramenez ça, et nous l'avons là. Ainsi, vous pouvez avoir plus d'informations de fond si vous le souhaitez. Vous pouvez même faire quelque chose comme ça et positionner cette information au centre. Alors maintenant, c'est 7171. Donc je peux même y aller un peu plus. Donc, je peux les positionner tous et simplement les apporter plus. Voyons où nous en sommes maintenant. On est à 55. C'est donc le problème ici. Donc c'est cool. Je m'assure juste que nous sommes 60. Contrôle D. Assurez-vous qu'on en est 60. Et tout simplement expansif, fondamentalement la même chose que nous l'avons fait avant. Et nous l'avons là. C'est notre conception terminée. Tout est terminé. Donc, ce que je vais faire est de vérifier rapidement une fois de plus au Pinot haut. Appuyez sur l'aperçu. Allez jusqu'au sommet. Analytes, explorez une fois de plus. Nous avons donc cette section. Nous avons ces, nous les avons. Tout fonctionne comme il se doit. Jolies petites animations. Et nous avons ceux-ci à la première et à la dernière minute, et nous pouvons défiler à gauche et à droite. Avoir cette belle vidéo. On peut faire défiler à gauche et à droite ici, ici, ici et ici. Nous avons ceux-ci, donc nous pouvons faire défiler ici aussi. Ils ont l'air un peu différents de ceux-ci en haut, mais ont les mêmes dimensions. En gros. Nous avons ceux-ci. Nous avons ces trois partenaires. On peut faire défiler à gauche et à droite. Nous avons ces taux de change. Nous pouvons faire défiler à gauche et à droite ici aussi, ce qui est génial. Et nous avons ces réponses pour que vous puissiez voir comment le contenu s'ajuste. Donc tout fonctionne comme il se doit. Mais ici, oui, vous devez cliquer vers le bas pour que ça marche. Je n'aime pas cet espacement. Donc je vais gérer tous les espacements à fois et ensuite je vais réparer celui-ci séparément. Mais j'aime à quoi ressemble le reste de notre contenu. Donc maintenant tout d'abord, ce que je vais faire est de sélectionner notre page d'accueil comme je l'ai fait, et je vais la réduire à, par exemple, 80. Et voyons à quoi ça ressemble. Je pense que cela fonctionne assez bien. L' espacement est toujours bon, donc tout est toujours agréable et lisse. L' espacement est bon là-bas, donc tout est bon. Vous pouvez même l'augmenter à 100 si vous pensez que AT est beaucoup trop petit. En fait, 118 fonctionne assez bien. Donc, comme je l'ai dit, la dernière chose que nous allons aborder ici est celle-ci. Donc, je vais ajuster manuellement à quelque chose comme 20 par exemple. Alors maintenant, lorsque le contenu se développe, lorsque les animations fonctionnent comme ça, je peux accéder à cette section pour vous montrer réellement. Pour qu'on puisse retourner jusqu'ici. Donc, lorsque je clique ici, vous pouvez voir que le contenu se chevauche. C' était donc notre principal problème dès le début. Donc 20 pourrait ne pas fonctionner à cause de cela. Les solides vont avec 60 par exemple. Et voyons comment ça va s'ajuster. Alors allons-y avec 60. Et quand je ramène ça ici, cliquez ici. Vous pouvez voir que maintenant c'est bon. Donc, il s'ajuste bien pour entendre parce que vous ne serez pas en mesure de voir ça. Mais si vous le faites, si vous allez jusqu'ici et ici, peut-être que vous pouvez même étendre cela à 100 et le garder exactement la même chose. Enfin, pour terminer, ce que je vais faire est évidemment de double-cliquer ici sur notre tableau d'art pour faire monter la hauteur et aller jusqu'au bout, fermer comme ça. Et troupeau laitier. Ce sont donc des options de conception réactives que vous avez dans Adobe XD. Désolé pour certains de ces bugs et la mort est survenue tout au long de ce processus de conception réactive. Mais comme je l'ai dit dans la vidéo d'introduction à la section design, tout est à cause de mon logiciel d'enregistrement. J' ai donc utilisé Camtasia pour enregistrer des vidéos et j'utilise toutes sortes de traitements pour l'audio. Donc, tous ceux qui se mélangent en largeur. Mon Adobe XD, J'ai également utilisé Adobe XD en même temps. Donc, c'est pourquoi tous ces différents bugs se produisent ici et là. Donc Dan, tu regardes cette section de redimensionnement réactive. Et puis dans la section suivante, je vais expliquer le partage. Nous allons nous occuper du partage. Et enfin, une fois que nous aurons fait cela, je vais enfin vous dire comment vous pouvez exporter tous ces actifs et les envoyer à vos clients et développeurs pour vérification et enfin, je l'espère finir vos projets. Je vous verrai dans la prochaine vidéo quand nous commencerons à partager. 52. Relier nos pages: Avant de commencer à partager avec nos clients et nos développeurs, je veux juste vous montrer rapidement comment vous pouvez connecter toutes ces pages dans la conception de sites Web. Donc, si je passe à Adobe XD, je peux vous montrer ce que je veux dire. Nous avons donc ici les étapes de base que nous avons faites au début de ce projet. Donc, concevez un bref moodboard, guide de style de projet filaires de papier, que nous allons terminer un peu plus tard. Nous avions des fils dans Adobe XD, puis le design et enfin le design réactif. Donc, si nous passons au prototype, vous ne voyez aucun de ces connecteurs. Mais si je les sélectionne tous, vous pouvez voir combien de ces connecteurs nous avons Word sur les émissions. Donc, pour commencer avec les animations, parce que nous voulons que nos utilisateurs puissent naviguer entre ces pages. Ce que je vais faire est de sélectionner des barris parmi certains d'entre eux parce que vous pouvez voir que nous avons des baies comme destination ici. Donc, nous pouvons le faire soit d'ici ou d'ici, ou même inclus dans les meilleures destinations ici, par exemple, et ensuite connecté. Donc, ce que je vais faire est de sélectionner celle-ci qui est des offres spéciales. Allez à la dernière minute, localisez le Paris. Et je vais le passer à l'état Horace, puis choisir cette flèche entière comme ceci, et il suffit de cliquer et de le faire glisser jusqu'ici. Et puis je vais utiliser le robinet et quand utiliser la transition, Dissoudre, faciliter. Et par exemple, 0,8 seconde. Je pense que ça va bien marcher. Et puis je vais le ramener à l'état par défaut pour que les utilisateurs puissent réellement dire comment naviguer dans leur aperçu de la chaleur, agrandir et juste un peu pour que vous puissiez voir. Donc, nous avons encore ces effets de vol stationnaire. Ils fonctionnent très, très bien. Alors, survolez. Et s'ils choisissent de cliquer ici, il va les amener à cette page. Maintenant. Je vais connecter ce bouton exploré maintenant afin que je puisse vous montrer comment l'option de l'outil de défilement fonctionne. Donc, il va faire défiler jusqu'à cette section particulière. Et pour ce faire, je vais revenir au design parce que vous vous souvenez, nous les avons tous inclus comme une pile juste ici. Mais parce que je n'ai pas utilisé la pile à cette page et que vous pouvez le voir, je peux simplement cliquer avec le bouton droit de la souris et dissocier tous mes éléments de l'intérieur. Je n'ai pas utilisé la pile parce que j'utilisais différentes destinations entre les sections. Donc, vous pouvez voir que nous avons 150, 150, 150, et ici nous en avons 150 aussi. Mais parce que celui-ci n'est pas 150, il nous le montre, mais ce n'est pas à cause de ça. Je l'ai simplement retiré du groupe. Donc si je vais explorer, maintenant, ouvrez, localisez mon bouton. Allez à son état d'horreur. Allez à Prototype. Cliquez dessus. Et nous allons faire est de taper au lieu de transition ou d'animation automatique. Je vais utiliser Scroll aussi. Et ce que cela fait, c'est qu'il imite le lien hypertexte. Et c'est vraiment utile, surtout si vous avez la navigation qui va suivre sur le défilement. C' est utile car les utilisateurs peuvent cliquer où ils le souhaitent. Et cela va les amener à cette section de la page parce que la navigation va toujours suivre. Comme je l'ai dit, cela est vraiment utile surtout pour les pages de destination où vous avez juste une page et tout le contenu est dans cette page. Mais dans notre cas, ce n'est pas vraiment utile parce que nous avons tous ces listes déroulantes supplémentaires et tous ces systèmes de navigation complexes. Donc, nous allons juste naviguer vers cette section, mais je voulais vous montrer cela comme une option. Donc juste ici pour la destination, ce que nous devons faire est de choisir visiter Paris juste ici, qui est cette section. Et vous pouvez choisir, par exemple, faciliter 0,8 seconde. Vous pouvez choisir la vitesse à laquelle va traduire une transition. Donc je vais choisir 0.6 parce que je ne pense pas que 0.8 soit tout ce qui est nécessaire. Je vais le ramener à l'état par défaut. Appuyez sur Aperçu. Donc, lorsque les utilisateurs survolent ici, Voyons si cela fonctionne. Pour une raison quelconque, ça ne marche pas. Alors passons au prototype. Juste ici. Je n'ai même pas inclus le survol dans notre état par défaut. Donc, je vais cliquer ici. Je vais choisir le vol stationnaire. La destination va être planer comme ça. Et revenons en arrière et prévisualisons maintenant. Donc maintenant, le vol stationnaire fonctionne. Et quand le clic va les y emmener, vous pouvez évidemment ralentir cette animation. Une fois de plus, je peux cliquer ici. Va au vol stationnaire. Nous avons onglet défilement pour visiter Paris. Je vais aller avec facilité et puis 1 seconde, par exemple, revenir à l'état par défaut, appuyer une fois de plus sur l'aperçu. Alors survolez, cliquez ici, et vous pouvez voir à quel point c'est lisse. Cela vous traduit juste dans cette section. Donc, vous pouvez juste imaginer cela pour être utilisé, par exemple, si vous avez cette navigation flottante juste ici ou juste ici avec les sections. Ainsi, vous pouvez inclure différents effets de couleur pour afficher différentes options. Et puis cliquez sur va vous emmener à différentes sections. Donc maintenant, nous devons connecter cet hôtel à la page suivante. Je vais l'ouvrir de près dans cette section. On peut aller à cet hôtel. Et nous avons la carte d'hôtel 1. Je vais choisir le vol stationnaire. Donc même animation. Je vais utiliser la flèche, faites-la glisser sur cette page. Donc, appuyez sur, transition, Dissoudre, relâchez, et allons-y avec 0,6 seconde par exemple. Parce que je ne pense pas qu' seconde soit nécessaire. Alors allons-y en prévisualisons, voyons à quoi ça ressemble. Donc, une fois de plus, nous avons cette option cliquez et nous pouvons faire défiler facilement. Comme vous pouvez le voir, tous ces effets d'horreur fonctionnent. Alors siège chance sur la page d'accueil. Lorsque vous survolez ici et cliquez sur, Il va vous emmener à cette page où vous pouvez facilement naviguer ces images en utilisant ces flèches. Et ce que nous voulons faire ensuite est de réparer ce bouton de livre maintenant et de s'assurer qu'il passe à la page suivante. Alors faisons ça. En raison de la page suivante est Billings qui peut juste imaginer que les utilisateurs ont choisi toutes ces options différentes. Ils ont choisi cet hôtel particulier. Maintenant, ce qu'ils veulent, c'est aller à cette page de facturation et faire un paiement. Donc, nous devons localiser notre barre latérale. Donc, l'information de l'hôtel barre latérale. Je vais localiser mon gros bouton, qui est celui-ci. Va au vol stationnaire. Cliquez, je vais étape transition, Dissoudre, soulager 0,6. Donc exactement les mêmes paramètres. Et vous pouvez même choisir préserver l'emplacement de défilement. Donc, si vous choisissez qui va faire la transition et vous mettre sur cette section de votre page, qui est génial si vous voulez que vos utilisateurs passent à section particulière de chaque page et ne pas aller directement vers le haut. Mais dans ce cas, nous voulons qu'ils aillent directement au sommet. Donc on va juste laisser ça non coché. Ensuite, je vais cliquer sur mon bouton une fois de plus, ramener à l'état par défaut. Parce qu'une fois de plus, je veux que les utilisateurs puissent sélectionner et cet état. Alors cliquez ici, Aperçu. Et une fois qu'ils vont ici et que vous pouvez pointer le clic, il va les prendre pour envoyer n. Maintenant, nous devons animer juste ce bouton juste ici. Donc, pour ce faire, je vais cliquer ici évidemment. Et nous les avons également animés auparavant. Donc, quand les utilisateurs cliquent là, il va les amener à cette section, mais je veux animer notre bouton dans ce cas. Allons donc avec les détails de l'hôtel. Carte d'hôtel, gros bouton. Je vais aller au vol stationnaire et sur le vol stationnaire et voir Tap Transition. Voyez si on peut y aller. Maintenant, nous pouvons simplement aller à l'état par défaut de notre bouton. Donc, ce que je dois faire est soit de les laisser comme ils sont juste ici et simplement animer notre dernier bouton, qui est celui-ci. Donc, pour confirmation, je peux aller à la confirmation, localiser notre bouton, aller au vol stationnaire. Le reçu de téléchargement ne nous emmènera nulle part parce que nous n'avons pas cette option pour concevoir cela. Mais nous pouvons animer ce calme. Donc, quand ils vont au vol stationnaire, nous pouvons cliquer dessus, faire glisser vers la maison, ou vous pouvez simplement le sélectionner ici où il indique la destination. Alors que la page d'accueil de transition dissoute, assouplit tous les mêmes paramètres et je vais le ramener. Et les utilisations peuvent être, peuvent animer simplement ici si nous voulons inclure différentes options. Donc, quand ils cliquent sur ces boutons ici, laissez-moi vous emmener à l'état par défaut. Je devrais créer le point d'onglet pour notre bouton juste ici. Donc, je vais simplement revenir au design. Créez un point de données ici. Bouton de qualité. Je devrais utiliser Control X pour le couper. Ensuite, allez juste ici, appuyez sur Contrôle V pour le coller, et essayez de le positionner quelque part par ici. Alors je peux baisser tout ça. Retournez au prototype, puis sélectionnez-le. Cliquez dessus. Je vais appuyer, aller à l'animation automatique parce que je veux passer à l'état suivant. Laisse-moi le faire encore une fois. Alors appuyez sur auto, animer, choisissez un état, je veux aller au paiement. Je vais aller facile et sortir et 0,6 seconde, par exemple. Ensuite, passons à l'état suivant, qui est celui-ci. On a toujours ce point de tabulation. Cliquons dessus maintenant. Et je vais aller à la confirmation maintenant. Et enfin la confirmation que nous avons cette animation, ce qui est très bien. Alors allons frapper l'aperçu, voir à quoi cela ressemble. Donc, comme je l'ai dit, nous pouvons cliquer ici. Il va faire la transition de toute façon, mais si vous voulez, vous pouvez passer le curseur et cliquer ici parce que nous avons ce bouton ou rester ici en tant que détenteur de place, Il va passer ici. Frappez B maintenant. Et enfin, nous sommes là. Et quand on veut cliquer à la maison, et ça va nous ramener à la page d'accueil. Donc, nous l'avons là. C' est comme ça que fonctionne l'animation. Comme je l'ai dit, vous aurez ce dossier. Vous pouvez l'explorer dans plus de détails. Et comme je l'ai dit, vous pouvez utiliser scroll maintenant, ce qui à mon avis est une fonctionnalité fantastique, surtout si vous avez des pages de prêt parce que vous pouvez connecter toutes vos sections en une seule page et utiliser l'option de navigation défilement. Je ne l'ai pas utilisé ici parce que nous avons toutes ces listes déroulantes différentes. Ce que vous pouvez faire est simplement inclure retour à la flèche supérieure, qui va être situé vers le bas. Ensuite, il va suivre tout le reste parce que nous avons en effet des piles incluses. Vous pouvez simplement l'inclure comme une partie de cette pile ou mieux encore, vous pouvez le mettre en dehors d'une pile juste sur le dessus et conserver la position de défilement là dès le début, il va défiler facilement lorsque vos utilisateurs font défiler vers le bas à travers votre page et fondamentalement simplement connecté pour faire défiler à la position, pour revenir en haut. C' est donc à quel point il est facile de travailler avec ces prototypes. Parlons maintenant du partage. Et dans la prochaine vidéo, je vais vous montrer les options de partage en charge par Adobe XD et comment partager votre projet avec vos clients et développeurs ? 53. Partage avec les clients: Maintenant que nous avons tout réglé, parlons de partage. Et évidemment, le partage est extrêmement important car vous pouvez concevoir un partage de prototype dans Adobe XD, ce qui est une excellente fonction et vous n'avez pas besoin de changer différents outils. Vous n'avez pas besoin d'explorer différentes options et surtout de payer pour différents services. Vous avez tout à l'intérieur d'Adobe XD, que vous utilisiez un forfait gratuit ou un forfait premium pour cette classe ? J' utilisais un plan gratuit tout le temps juste pour vous montrer comment tout fonctionne. Et dans le plan gratuit, vous avez juste une option de partage de prototypage. Donc, ce n'est pas vraiment une excellente option pour vous si vous travaillez sur plusieurs projets en même temps. Mais si vous travaillez sur un projet par projet, si vous travaillez simplement sur un seul projet qui est long, par exemple, alors l'option gratuite de XD est vraiment une excellente option pour tout le monde, peu importe si vous êtes un professionnel ou vous sont juste en train de commencer. Tout cela, c'est que si vous venez d'installer Adobe XD, si vous utilisez Adobe Creative Cloud, si vous payez un abonnement Creative Cloud, cela n'a pas d'importance. Vous pouvez simplement utiliser XD à son plein potentiel car Creative Cloud est déjà installé. Revenons maintenant à notre projet et je vais vous montrer quelques options de partage. Donc juste pour un droit ici en haut, ce que nous avons est une fois de plus la conception de la part de prototype, nous explorons la conception, nous explorons un prototype. Je vous ai montré toutes ces différentes options. Et enfin, nous atteignons notre part. Donc, ce que nous allons faire ici, c'est que je vais vous montrer comment vous pouvez ajuster certaines de ces options et comment vous pouvez les partager. Maintenant, il nous montre que tout est sélectionné en dehors de B, fournir des cadres parce que les fils de papier, nous ne sommes pas optionnels, n'ont pas été placés à l'intérieur des plans de travail. Je viens de les traîner et de les déposer à l'intérieur. Donc, ils sont tout simplement là. Quand je retourne au prototype, peut faire ici est que je peux, par exemple, cliquer sur cette option et je peux cliquer ici. Et cela va me montrer cette option qui s'appelle Flow 1. Maintenant, parce que ceux-ci sont connectés comme un flux un. Et si je clique ici, vous pouvez voir certaines de ces différentes options. Mais je n'ai pas connecté ces pages entre elles. Je n'ai connecté que ces pages entre elles. C' est pour ça que ça me montre comme ça. Donc, tout cela va être Flow 1 et ce sera la page d'accueil du flux un. Et je vais double-cliquer à l'intérieur et l'appeler filaires. Parce qu'il s'agissait de fils filaires en papier, il s'agissait de fils filaires en XD. Et puis je vais cliquer ici et faire la même chose. Cliquez et ce flux, je vais appeler design. Et enfin, je vais cliquer ici. Cliquez ici, double-cliquez et appelez ce design responsive comme ça. Et maintenant, nous avons ces trois flux. Maintenant, ce qui est génial dans ces flux, c'est que vous pouvez simplement connecter l'un d'eux et partager un flux, par exemple, la conception. Ou vous pouvez partager tous vos flux et utilisateurs, clients, développeurs peuvent être en mesure de simplement faire défiler entre vos flux. Voir toutes vos options. Donc maintenant, si nous revenons à partager, vous pouvez voir que nous avons ces trois flux. Donc, si j'ai sélectionné celui-ci, il va partager juste celui-ci. Si je sélectionne celui-ci, va partager juste celui-ci. Si je connecte les pages entre elles et si je sélectionne mes fils, je devrais quand même faire les mêmes connexions. Je vous ai montré dans une vidéo précédente entre ces quatre pages. Ainsi, vous pouvez partager à ce stade de votre projet. Vous pouvez partager à ce stade, vous pouvez partager à ce stade, ou vous pouvez simplement commencer ici, faire des connexions entre tous vos aéroports et toutes vos étapes et tous vos flux, puis partager tout avec vos clients et développeurs. Tout dépend vraiment de vous ce que vous voulez faire et gardez juste une chose à l'esprit, c'est la vitesse. Cela dépend donc de la taille globale de votre fichier. C' est pourquoi j'ai dit, s'il vous plaît optimiser vos images parce que cela va baisser la taille de votre fichier. N va vous permettre de travailler beaucoup plus rapidement dans XD. Et quand il s'agit de partager, cela va vous permettre de partager vos fichiers beaucoup plus rapidement qu'avec tous ces gros fichiers. En outre, cela dépend de la vitesse de votre connexion Internet. Donc, si vous avez Internet vraiment lent et vraiment gros fichier, évidemment, il va prendre beaucoup plus de temps pour qu'il télécharge sur le Cloud d'Adobe. Et par conséquent, vous allez pouvoir partager le fichier avec les clients et les développeurs. Donc, si nous revenons au fichier, comme je l'ai dit, filaires et design et ne répondent pas, nous allons juste partager le design. C' est pour ça que j'ai délibérément laissé toutes ces choses dehors. Mais encore une fois, vous pouvez commencer à partager. Et je vous encourage vraiment à commencer à partager à ce stade de votre projet. Parce qu'à ce stade, client, un client peut être facilement vous donner des commentaires. Vous pouvez facilement tout ajuster parce que maintenant vous l'avez conçu. Plutôt que de le faire dans un papier filaire étapes de votre projet. C' est là que vous devriez commencer à partager avec vos clients après qu'ils vous aient donné des commentaires, après avoir recueilli ces commentaires, apporté ces modifications, puis vous pouvez passer à la conception. Ensuite, vous pouvez simplement déconnecter ces deux flux. Imaginez simplement, par exemple, pour passer de cette page à cette page, disons simplement déconnecter ce connecteur, comme je vous ai montré ici avant. Et puis maintenant, vous avez conçu et vous pouvez également partager le design et le design réactif, comme je l'ai dit, afin qu'ils puissent tout voir. Finalement, revenons à ici. Donc, un lien est pour la conception et vous pouvez gérer le lien. Comme je l'ai dit, vous avez juste un lien. Lorsque vous avez le plan gratuit, comme je vous le montre ici, si vous avez un plan premium, si vous avez créé un abonnement appelé, alors vous avez des options de partage illimitées. Vous pouvez travailler sur autant de projets que vous le souhaitez. Afficher les paramètres. Alors pourquoi partagez-vous ça ? Est-ce pour la révision de la conception, pour le développement, pour la présentation, tests utilisateur, ou personnalisé, où vous pouvez choisir toutes ces différentes options. Alors nous allons cliquer rapidement, courir à travers eux. Révision de la conception, je vous recommande vraiment de partager cela avec vos clients ou vos coéquipiers, car alors ils seront en mesure de vous laisser des commentaires spécifiques. Ils vont pouvoir laisser vos commentaires. Et puis avec ces commentaires, vous pouvez simplement progresser et apporter ces changements. Développement, évidemment pour les développeurs parce que ce sera un environnement beaucoup plus complexe. À l'intérieur de cet environnement, ils vont pouvoir télécharger des ressources qui vont pouvoir voir des extraits de code. Ils vont pouvoir voir des couleurs. Les options de police et tellement plus de présentation est fondamentalement qu'il supprime toutes ces options et vous laisse simplement avec une expérience en plein écran pour la présentation, ce qui est génial si vous voulez présenter votre design final, par exemple, à vos clients ou à différents intervenants sont des partenaires ou quelque chose du genre. Le test utilisateur est différent une fois de plus, car il supprime toutes ces options différentes qui sont là pour les utilisateurs. Ils ne seront donc pas en mesure de voir les points de contact. Par exemple, ils devraient comprendre le DOM, les comprendre eux-mêmes. Vous devrez donc mesurer combien de temps il leur faut pour cliquer sur ces points de données, quel point il est facile de naviguer dans votre interface utilisateur et à quelle vitesse ils atteignent leur emplacement cible. Dans notre cas, par exemple, réserver cet hôtel, disons. Donc, vous devrez mesurer toutes ces choses dans les tests utilisateur. Et enfin, la coutume. Comme son nom l'indique, vous pouvez personnaliser votre expérience ici. Commençons donc par la revue de conception. D' abord. Liez les axes, vous pouvez cliquer ici. Donc, n'importe qui avec le lien peut voir ce que les personnes invitées qui peuvent les inviter par e-mail et toute personne avec des mots de passe. Ainsi, vous pouvez protéger par mot de passe votre fichier et votre lien. Donc tout le monde ne peut pas le voir. Je choisirai n'importe qui avec le lien, puis appuyez à nouveau sur Créer un lien, en fonction de la taille du fichier et de la vitesse de votre connexion Internet, pour vous prendre plus ou moins. Et maintenant que le partage est terminé, comme vous pouvez le voir, nous avons toutes ces options. Vous pouvez donc simplement copier ce lien et le coller dans votre navigateur et l'ouvrir. Encore une fois, nous l'avons pour un examen de conception. Nous l'avons pour tous ceux qui ont le lien. Vous pouvez le partager avec les développeurs ici, et vous pouvez également mettre à jour le lien. Vous pouvez cliquer ici et aller pour le développement, ce que nous allons faire. Mais enfin, je veux expliquer cette option. Comme vous pouvez le voir maintenant, nous devons mettre à niveau parce que nous avons atteint cette limite d'un lien libre. Si vous travaillez et apportez quelques modifications, vous pouvez voir que nous avons cette option. Vous pouvez copier le lien à partir d'ici de toute façon. Donc, si nous revenons à Design, nous apportons des modifications supplémentaires. Nous pouvons revenir à Partager, cliquez sur Mise à jour, Link News ont toujours qu'un lien que vous pouvez partager avec vos clients va être situé exactement au même endroit, va être exactement au même endroit. Donc, ce lien ne va pas changer, mais le contenu à l'intérieur de ce lien va changer lorsque vous apportez quelques modifications de conception ici. Donc, comme je l'ai dit, vous pouvez simplement faire un changement. Cliquez sur Mettre à jour le lien va faire pivoter une nouvelle fois une mise à jour. Ensuite, vous pouvez cliquer ici pour copier le lien et le partager avec votre client. Maintenant, si je vous montre à quoi tout ressemble en ligne. Donc, comme je l'ai dit, je vais cliquer ici, baser cela dans mon navigateur. Saute ici. Et c'est à ça qu'il ressemble une fois qu'il est dans le navigateur. Encore une fois, toutes ces options fonctionnent de la même façon que avant que nous puissions voir. Et par exemple, si je clique ici, il va passer à Paris, va passer à Hogarth fait comme vous pouvez le voir, tout fonctionne comme il se doit et comme nous l'avons créé, si je clique ici est va nous montrer le bien-être de destination. Donc tout fonctionne comme il devrait. Et je peux aussi faire défiler vers le bas et parce que cela a beaucoup de ces différents éléments à l'intérieur. Comme vous pouvez le voir, tout fonctionne comme il se doit. Et vérifions ces éléments ici. Donc, si nous cliquons ici, va nous amener à entendre, juste lui donner le temps de charger et il va enlever tous ces différents hoquet. Enfin, vérifions-le pour passer à la page suivante, l'explorateur. Maintenant, comme vous pouvez le voir, tout fonctionne comme nous l'avions envisagé et comme nous l'avons connecté. Et je vous recommande toujours de vérifier tout cela avant de l'envoyer à votre client. Et juste pour pouvoir dire, Ok, maintenant tout fonctionne. Assurez-vous de leur dire qu'ils le quittent. Donc il est chargé sur ça et sur leur extrémité aussi. Donc tout fonctionne comme il se doit. Et rentrons à la maison, à la maison. Parce que je veux vous montrer les options de commentaires. Pour que vous puissiez inviter les gens à entendre. Vous pouvez simplement les inviter à modifier, vous pouvez les inviter à afficher. Ou encore une fois, vous pouvez simplement partager ce lien. Ils n'ont pas besoin de compte Creative Cloud pour pouvoir faire des commentaires. C' est toujours mieux s'ils le font, mais ils n'ont pas à le faire. Et fondamentalement, ce que vous pouvez faire est que vous pouvez partager ce lien avec eux et ensuite ils seront en mesure de vous laisser des commentaires quand il s'agit de revenir, ce qu'ils peuvent faire, c'est qu'ils peuvent mentionner les gens. Donc, s'ils ont un compte et par exemple, leur nom est John et le nom de l'autre personne est, par exemple, Mark. Vous pouvez simplement mentionner chez Mark, chez John, et ensuite ils pourront voir que vous les avez mentionnés dans une page particulière et dans un commentaire particulier. Ici, nous sommes sur une page d'accueil pour que vous puissiez cliquer, il va prendre votre droite ici à cette page, et vous pouvez également naviguer ici. s'agit donc de la deuxième page, troisième page et de quatre pages, et il contiendra beaucoup de ces pages supplémentaires si vous les partagez toutes en un seul flux, comme je l'ai expliqué. Et vous pouvez également cliquer ici pour revenir à la page d'accueil quand il s'agit de commentaires, vous pouvez simplement laisser un commentaire comme il est. Alors merci pour le design. Par exemple, vous pouvez cliquer sur Soumettre et il va vivre sur cette page particulière, qui est la conception de la page d'accueil, ce qui est génial. Et vous pouvez également voir la conception de la page d'accueil ici. Vous pouvez cliquer ici. Et ça va vous montrer ces pages comme ça. Donc, pour un aperçu plus facile, ou je peux cliquer ici et ça va me ramener ici. Et vous pouvez également identifier une certaine partie de votre page. Donc, passons à ici par exemple. Et vous pouvez simplement cliquer sur cette broche, le déposer ici, par exemple, sont directement sur les éléments et dire, par exemple, faire ce texte. Par exemple, vous pouvez cliquer sur Soumettre. Et enfin, vous pouvez travailler dessus, rendre bleu, puis venir ici et frapper un résultat. Ça va disparaître parce que tu as fait ce changement. Par conséquent, vous pouvez garder une trace de toutes vos modifications. Vous pouvez garder une trace de ce que votre client et vous a demandé d'apporter ces changements. Et vous pouvez suivre l'orientation du projet à ce stade particulier. Vous pouvez également afficher ou masquer des commentaires ici. Et ici, vous pouvez masquer les annotations, qui sont ces choses. Donc, par exemple, quand je clique ici, faites glisser et taper une fois de plus faire ce flux, par exemple, comme cliquer pour que je puisse le cacher et qu'ils ne seront pas en mesure de le voir, mais je serai en mesure de le voir. Donc, quand un survol, ça va me montrer que aussi, si vous faites plus de changements, ressemblez ici. Et nous allons écrire ceci, rendre cela plus étroit. Soumettre. Donc, quand je clique ici, ça va me montrer que c'est le numéro 1. Montre-leur une seconde. Donc, quand je clique à droite, il va me montrer que c'est celui-là. Quand je clique ici, ça devrait me prendre ici, mais ce n'est pas le cas pour une raison quelconque. Nous y voilà. Donc ça m'emmène ici et vous pouvez aussi le déplacer de cette position à cette position. Mais de toute façon, vous pouvez voir que tous ces commentaires sont situés sur une conception de page d'accueil. Enfin, ici, vous pouvez filtrer les commentaires que vous pouvez faire défiler entre, par exemple, les marques de commentaires de John communes. Donc, vous pouvez faire ce que vous voulez avec cette NSA dit que vous pouvez simplement cliquer ici, appuyez sur le résultat ici. Et enfin, vous pouvez également supprimer ces commentaires, appuyez ici. Et vous pouvez le supprimer de cette page particulière. Donc, en gros, c'est tout. La dernière chose est que vous pouvez cliquer ici pour entrer en mode plein écran. Donc vous n'avez pas toutes ces options à côté. C' est peut-être la meilleure option pour présenter à vos utilisateurs ou clients ou quoi que ce soit d'autre. Et puis vous pouvez simplement frapper évasion. Et ça va te ramener à cette page. Donc c'est tout pour partager avec vos clients. Dans la prochaine vidéo, nous allons parler du partage avec les développeurs. Quelles sont les options que vous pouvez utiliser pour partager avec les développeurs ? Et quelles sont les options que les développeurs recherchent pour que vous sachiez à quoi le partager. Alors je te verrai là-bas. 54. Partage avec les développeurs: Les développeurs ont besoin de connaître les choses techniques tandis que le client a besoin de savoir où va la structure, vous utilisez les informations qu'ils ont demandées et le projet va dans la direction qu'ils voulaient ? Mais une fois de plus, les développeurs veulent savoir une chose complètement opposée comme, par exemple, quelle est la taille de la police que vous utilisez, quelles couleurs avez-vous utilisées ? Quels espacements, marges, rembourrage. Donc, tout ce genre de choses techniques. Alors que de l'autre côté, les clients veulent juste voir si vous avez la bonne structure. Est-ce qu'ils aiment le design ? Avez-vous inclus le contenu à l'intérieur ? Est-ce que le message a été diffusé comme ils le voulaient. C' est pourquoi nous avons conçu des options de partage pour un client, puis pour les développeurs. Donc, si je retourne à Adobe XD et que je vous montre cela, nous avons une revue de design, que je vous ai montré dans la vidéo précédente. Et ici, nous avons le développement. Donc, je vais cliquer là. Et ce que vous avez est d'exporter pour le Web. Et vous avez ces ressources téléchargeables. Donc nous les avons en PNG. Je peux donc cliquer ici pour les inclure dans le paquet téléchargeable. Toute personne avec le lien peut le voir et je peux simplement cliquer sur Mettre à jour le lien. Et encore une fois, il va mettre à jour ce lien avec tous ces paramètres que je viens d'inclure. Et une fois qu'il est terminé, ce que nous pouvons faire est de cliquer ici pour copier le lien. Et je vais faire, c'est à nouveau ouvrir ma page. Je vais appuyer sur Contrôle V pour le coller, appuyer sur Entrée, et attendre qu'il se charge juste un peu. Parce qu'une fois de plus, cela dépend si votre fichier est grand ou si il est petit. Et une fois le chargement terminé, vous pouvez remarquer que maintenant nous avons ces options ici. Donc, quand je clique ici, nous avons tous les actifs pour les développeurs que nous avons téléchargés. Vous pouvez voir nos logos, vous pouvez voir toutes ces choses et ils peuvent simplement cliquer dessus et télécharger s'ils le souhaitent. Et ici, ce que nous avons sont fondamentalement des extraits de code. Donc, ils peuvent facilement regarder ces couleurs parce que je les ai créés en tant que jetons de conception. Donc, si je vous ramène à notre conception, par exemple, si j'ouvre notre panneau d'actifs et nos acides de documents, attendez qu'il se charge juste un peu parce que nous en avons beaucoup. Et quand ils le font, vous pouvez voir que nous avons toutes ces couleurs sont nommés correctement comme des jetons de couleur. Et vous pouvez aussi le faire avec vos polices. Ainsi, par exemple, vous pouvez appeler cette rubrique numéro un. Donc H1, H2, H3, vous pouvez le faire. Vous pouvez également renommer vos polices pour, par exemple, la police de paragraphe. Vous pouvez l'appeler au sous-en-tête, et vous pouvez donner à vos polices tous ces noms différents. Ainsi, les développeurs seront en mesure de comprendre facilement où toutes ces polices entrent dans la page. Donc, si je vous ramène ici, vous pouvez voir que nous avons, par exemple, étoile de couleur pêche, un gris clair orange, qui sont fondamentalement toutes nos couleurs ici. Et les développeurs peuvent facilement copier ce code hexadécimal à partir d'ici, et ils peuvent l'inclure sous ce nom dans leur code. Maintenant, quand il s'agit de partage de développement, et quand je clique ici, vous pouvez voir la taille de la fenêtre est 1920 par 1080, qui est ce que les utilisateurs voient ici. Et la taille globale de la conception est de 1920 par 16 640, ce qui est essentiellement quand ils commencent à défiler vers le bas. En outre, ils peuvent inspecter des éléments individuels parce qu'ici, nous avons tous nos atouts, toutes nos couleurs, tous nos styles de personnages. Et je n'ai même pas inclus d'images, que je vais vous montrer dans la prochaine partie quand nous aurons réellement l'exportation. Et ça va se remplir ici aussi, que je vais revenir juste pour vous montrer toutes ces différentes options. Enfin, ici, nous avons des styles de caractères. Et si je clique ici, nous pouvons voir la police, la famille de polices, le poids de la police, la taille , la couleur, attention à l'espacement et l'espacement des lignes afin qu'ils puissent savoir quoi inclure dans le code. Si je fais défiler tout le chemin vers le bas, vous pouvez voir différentes interactions. Donc, la grille de mise en page, les colonnes, largeur de la gouttière, si vous vous souvenez de ce que nous avons inclus, qui est particulièrement important pour la conception réactive, nous avons une colonne avec des marges ou basicité. Donc, ces marges sont juste pour le contenu à l'intérieur des interactions. Interactions donc différentes entre différents éléments. Et vous pouvez voir combien d'interactions plus faibles, c'est pourquoi ce cours prend évidemment tellement de temps. Enfin, ce que je voulais vous montrer est ceci, par exemple, je veux cliquer ici. Il me montre différentes distances entre les différents éléments. Ça me montre juste ici. Donc largeur du texte, hauteur du texte. Il me montre x et y. axes est de me montrer le style de police. Alors lequel c'est, c'est régulier, gras étain, quelle que soit la taille. Donc, un alignement de 120 pixels est au centre. Nous avons ce qui est l'espacement des caractères hauteur de mensonge et ainsi de suite. Nous avons une apparence. Donc, la couleur qui est presque noire, et ils savent quoi inclure leur obésité 100%, qui est une fois de plus vraiment important pour eux. Contenu, offres spéciales, qui est fondamentalement toute cette section. Nous avons le CSS, donc en haut à gauche, une largeur et une hauteur. Ils peuvent inclure toutes ces options et ils ont des propriétés d'interface utilisateur différentes. Donc les variations pour la police, nous avons l'espacement des lettres, la couleur, la police d'alignement du texte. Ainsi, ils peuvent utiliser toutes ces informations CSS et les mettre à l'intérieur du code. Nous facilitons donc la vie des développeurs avec toutes ces options, car auparavant ils n'avaient pas ces options. Maintenant, ils le font à l'intérieur d'Adobe XD. Et encore une fois, ils peuvent simplement cliquer ici et choisir parmi tous ces extraits de code et ils peuvent simplement inclure dans leur propre conception. Maintenant, ceci, ce que j'ai expliqué peut être approuvé et appliqué à n'importe quoi d'autre. Donc maintenant j'ai cliqué ici, nous avons l'état par défaut, nous avons la date Horace, donc je peux basculer entre eux ici dans mon navigateur. Vous pouvez voir que le groupe est appelé Paris, qui est le nom du composant ainsi l'apparence de 100% CSS. Nous avons des interactions ici. Donc, nous avons tous ces différents éléments et vous pouvez même aller plus loin. Par exemple, ici, je peux le changer pour planer. Je peux cliquer ici. Et nous pouvons voir la transition à onglets d'interaction. Destination est la conception de destination. Alors, qui est la page suivante. Donc, qui montre à deux développeurs quel type de transitions ils ont besoin d'utiliser la facilité dans, dehors et toutes ces informations différentes. Donc, en gros, c'est ça. Développeur rêve parce qu'ils peuvent facilement naviguer autour de tous ces éléments. Ils peuvent voir les distances, ils peuvent voir le style, ils peuvent voir toutes sortes d'éléments différents à l'intérieur, qui peut également être vrai pour cela. Donc, nous avons l'état par défaut. Ils peuvent facilement inspecter tous ces différents états de notre navigation. Ils peuvent voir, par exemple, où est-ce, par exemple, une illustration située à partir de ce texte ? À quelle distance cela se trouve, par exemple, de ce bord, de ce bord et ainsi de suite. Donc, fondamentalement, ils peuvent naviguer dans leur chemin autour de l'édition et tous ces différents détails. Vous pouvez voir qu'on a 40 ans d'ici, on est 40 d'ici. Et ils peuvent également maintenir ALT et contrôle et voir quand ils maintiennent le contrôle et survolent les distances entre tous les éléments autour des éléments sélectionnés, comme par exemple, explorer maintenant dans ce cas. Donc, enfin, ce que je veux vous montrer est ceci, Disons que je veux inclure cette image par exemple, afin que je puisse cliquer dessus directement. Je peux maintenir mon contrôle et cliquer. Et ce que j'ai ici, c'est une marque pour l'exportation. Donc, je n'ai pas utilisé cette option. Et je vais vous le montrer plus tard dans la section suivante pour la partie export. Parce que lorsque vous commercialisez pour l'exportation peut facilement marquer toutes vos images pour l'exportation, vous pouvez simplement cliquer dessus et cliquer ici, ce qui va le marquer pour l'exportation. Ou vous pouvez simplement utiliser Shift E, qui va marquer cet actif pour l'exportation. Ensuite, on peut passer ici au vol stationnaire. Si vous aviez cette image sous un nom différent, puis lorsque vous la marquez pour l'exportation et revenez ici, elle apparaîtra ici. Donc on peut aller quelque part dehors. Et avec ces acides vont apparaître des images. Ainsi, lorsque vous marquez pour l'exportation, vous pouvez marquer des images, vous pouvez marquer des icônes. Vous pouvez marquer à ces objets B et G comme ces logos, Andes actifs sont. Ainsi, vous pouvez marquer tous ces actifs pour l'exportation et vous pouvez les préparer comme ça. Vous pouvez également marquer vos boutons pour l'exportation, par exemple, vous pouvez marquer toutes sortes d'éléments différents comme ces icônes vers le haut, par exemple. Mais je ne recommanderais pas cela nécessairement. Et dans la prochaine session, je vais montrer différentes options que vous pouvez réellement utiliser lorsque vous marquez ces choses pour l'exportation. Parce que nous voulons nous assurer que les développeurs obtiennent la mise en page parfaite et la structure parfaite parce que cela va rendre leur vie beaucoup plus facile, mais aussi notre vie beaucoup plus facile parce que nous ne allons pas aller de retour en avant sur ce projet entre nous-mêmes et les développeurs. C' est pour ça que je vois tout préparer, ce qui est ton boulot, ce qui est ta responsabilité à l'avance. Donc, ils ne vous dérangent pas plus tard une fois que ce projet atteint les étapes de finition. Ainsi, les développeurs peuvent faire leur travail. Vous avez fait votre travail correctement et tout le monde est heureux dans l'équipe. Donc, comme je l'ai dit dans la section suivante du cours, nous allons parler d'exportation. Je vous ai montré ces options d'exportation et nous en parlerons un peu plus tard. Mais je vais également vous montrer quelques options d'exportation directement à partir d'Adobe XD, qui sont certains des formats de fichiers vers lesquels vous pouvez exporter. Et quelles sont les options structurelles pour vous lorsqu'il s'agit de dossiers de fichiers, d'empaquetage et de partage entre vos clients et vos développeurs ? Alors je te verrai là-bas. 55. Exporter vos actifs: Quand il s'agit de partager vos fichiers avec vos clients, c'est généralement simplement leur envoyer le fichier et c'est essentiellement tout. Et puis ces développeurs peuvent éditer ce fichier, peuvent exporter ce fichier par eux-mêmes. Mais ce que j'aime faire est essentiellement exporter tous mes fichiers. Donc, je n'ai pas de nouvelles de ces clients et de leurs développeurs pour ce projet particulier. J' aime toujours les rejoindre et leur demander Avez-vous besoin d'une autre aide ? Avez-vous besoin d'une autre aide ? Mais parce que j'ai fait mon travail correctement, ils ne vont pas me déranger à l'avenir. J' ai partagé tout ce qu'ils demandaient et plus encore pendant le processus de création de ce projet. Donc, ils ne vont pas me déranger plus tard. Maintenant, en ce qui concerne le partage, vous avez plusieurs options pour partager vos fichiers avec vos clients et développeurs. Encore une fois, les clients sont généralement simplement intéressés par la façon dont le design ressemble. Est-ce que tout est fonctionnel ? Avez-vous inclus toute la copie à l'intérieur et toutes ces choses essentiellement cosmétiques. Alors que les développeurs, d'autre part, comme il l' a dit dans certaines vidéos précédentes, sont plus intéressés par ces choses spécifiques comme les marges, les paddings, les couleurs, les tailles de police, et ainsi de suite. Donc, vous devez connaître votre audience essentiellement, lorsque vous partagez avec le client, fondamentalement, il suffit généralement de leur envoyer le fichier original, le fichier Adobe XD, et c'est fondamentalement tout. Mais lorsque vous travaillez avec des développeurs, vous devez comprendre la structure des fichiers. Vous devez comprendre différents formats de fichiers parce que tous les formats ne sont pas les mêmes, pas les formats, tous les formats ne sont pas utilisés exactement pour la même chose. Et c'est ce que nous allons discuter dans cette partie de la classe. Je vais partager avec vous, comment exporter différentes choses à partir d'Adobe XD et quelles options partagez-vous ? Donc, si je passe à Adobe XD et je vais vous montrer qu'ici nous avons notre dossier. Mais si je minimise cela et crée un nouveau dossier ici sur mon bureau et l'appelle, par exemple, projet. Depuis ma profondeur et en faire un nom, les acides de projet. Et quand je l'ouvre et l'apporte ici, ce que je vais faire, c'est créer quelques dossiers. Donc, je vais aller avec une page d'accueil. Et laissez-moi revenir à XD pour voir les noms de ces pages. La destination est donc la deuxième. Donc le numéro 2 va être dans la distribution. Voyons voir. Numéro trois va être sélectionné offre. Et enfin, le numéro quatre sera pour le paiement. Donc, ce que je vais faire et ce que je fais habituellement est de sauter à l'intérieur de chacun de ces dossiers pour chacune de ces différentes pages. Et puis je crée mes tailles. Donc je vais créer numéro un original, qui est cette taille sur laquelle nous avons conçu, qui est 1920. Et puis vers le bas. Et puis je vais créer toutes ces autres tailles de projet. Donc, je vais créer un dossier supplémentaire, appelez-le de grands bureaux. Ensuite, je vais frapper Control V, et je vais renommer ça. Pour, par exemple, trois grands appareils. Je vais utiliser Control V et appeler ce numéro de quatre comprimés. Je saleté et je fais le numéro 15 polices. Maintenant, à l'intérieur de chacun de ces éléments, nous allons exporter des éléments séparés. Je ne vais évidemment pas vous déranger avec l'exportation de tous les éléments, mais je vais vous montrer, par exemple, ici sur notre page d'accueil parce qu'il contient la majorité de nos éléments, comment tout cela peut être exporté. Maintenant, vous avez deux options, parce que nous avons créé ce guide de style, nous allons terminer dans une seconde, mais nous l'avons créé et vous pouvez exporter tous vos éléments à partir d'ici. Donc, ce que nous allons faire en fait, c'est sélectionner toutes nos icônes comme ça. Mais nous devons les sélectionner dans notre dossier comme celui-ci alors parce que nous l'avons juste ici. Donc, les actifs de projet voyageant, nous devons localiser ce dossier maintenant pour exporter tous nos actifs. Et c'est ce que je fais. Fondamentalement, j'exporte toutes mes images en tant que JPEG ou PNG. Je les exporte en JPEGS s'ils n'ont pas d'arrière-plans transparents. Donc, par exemple, si vous découpez des gens à partir d'images, si vous utilisez des images de logos comme nous l'avons fait et que je vous ai montré dans la section précédente de la classe. Ou si, par exemple, vous avez des options différentes que vous incluez comme un dégradé ou des éléments différents qui ont leurs arrière-plans découpés, alors vous allez utiliser des PNG. Mais sinon, si juste avoir des images plates comme nous avons ici, par exemple, pour les images de ces emplacements et ainsi de suite, alors je vous recommande de les exporter en tant que JPEG. Évidemment. Vous pouvez ensuite les optimiser encore plus en utilisant riot ou opt-in image pour Mac, par exemple, comme notre déjà expliqué. Ou les développeurs peuvent le faire dans leur propre logiciel. S' ils ont des logiciels spécifiques ou des exigences spécifiques, ils peuvent l'optimiser plus loin là, juste pour rendre ces images encore plus petites que ce qu'ils sont ici dans XD. Et la taille est évidemment très importante quand il s'agit de charger le site Web. Donc, en ce qui concerne le chargement de la page, plus vos éléments sont petits, plus la page va se charger rapidement. Par conséquent, Google vous aimera plus car votre page se charge plus rapidement. L' expérience utilisateur pour vos utilisateurs est beaucoup meilleure. Et par conséquent, ils vont optimiser davantage votre page lorsqu'ils commencent à faire défiler et à l'analyser. Et ils vont le pousser vers le haut. Si c'est bien optimisé pour le référencement évidemment. Mais c'est juste l'une de ces exigences pour s'assurer que tout se charge le plus rapidement possible, que tout est facilement accessible, facilement utilisable, visible, et ainsi de suite pour vos utilisateurs. Donc, avoir tous vos articles optimisés et les rendre aussi petits que possible en taille est juste l'un de ces nombreux composants différents qui entrent dans l'optimisation SEO. Donc, si nous revenons ici, comme je l'ai dit, si nous sélectionnons tous nos articles, je vais les exporter en SVG. Et SVG est un excellent format de fichier pour les icônes car il s'adapte à l'infini. Ça ne va pas perdre de la qualité. Donc, si vous exportez vos icônes et que vous les avez dans ces types de fichiers comme nous l'avons fait. Nous pouvons donc éditer chacun de ces éléments ici. C' est pourquoi je continue à recommander Envato Elements et non aucun de ces articles gratuits et sites Web gratuits. Assurez-vous donc de les exporter en tant que SVG. Parce qu'une fois de plus, les développeurs seront alors en mesure de mettre à l'échelle tous ces SVG dans le code. Des changements doux et plus faciles facilitent les adaptations. Donc, SVG est la voie à suivre. Maintenant, pour commencer, je vais vraiment aller ici avec notre logo et je peux l'exporter en SVG. Mais comme vous l'avez vu, nous avons eu quelques problèmes lors du redimensionnement responsive. Donc, je vais simplement sélectionner ces deux-là. Et je peux appeler ce logo sombre, par exemple, comme ça. Et puis je vais frapper le contrôle E. Et ici je vais m'assurer de le localiser pour parcourir la page d'accueil. Et je vais utiliser la page d'accueil ou encore mieux. Je peux, par exemple, cliquer ici et par exemple, créer un nouveau dossier appelé icônes et logos. Comme ça. Sélectionnez-le, cliquez sur Sélectionner un dossier. Et parce que comme je l'ai dit, nous allons utiliser PNG comme logo, il suffit de sélectionner le design. Png hit export va exporter. Et puis nous allons sélectionner toutes nos icônes, c'est pourquoi nous créons le guide de style en premier lieu hit Control E au lieu de PNG, je vais choisir SVG. Je vais choisir le même dossier, appuyez sur Exporter. Et j'utilise simplement ces options par défaut pour exporter. Et ça va prendre un certain temps parce que les Indes ont la couleur et ils ont le fond plat à l'intérieur. Ce que je peux aussi faire, c'est sauter ici. Allez à mes icônes, alors revenez à ici, icônes et logos. Et vous pouvez voir toutes ces icônes comme supportées en tant que SVG. Et nous avons tous ces PNG, dont notre logo et logo sombre. Si une vue enfant, puis de grandes icônes, vous pouvez voir nos logos, lumière du logo et le logo sombre dans tous ceux-ci sont évidemment exportés comme SVG. Enfin, nous avons ces options transparentes pour toutes ces icônes. Je peux aussi exporter ça. Par exemple, je peux cliquer sur le contour, puis cliquer sur les icônes de contour à partir de là. Ou je peux réellement sauter à la page où sont toutes ces icônes. Je peux les sélectionner comme So. Appuyez sur Contrôle E pour cette page particulière, pour cette taille particulière, puis exportez-les comme ça. Vous avez donc ces deux options. Vous pouvez soit les exporter tous en même temps comme nous l'avons fait. J' aurais juste à changer toutes ces choses pour décrire des états comme celui-ci. Cliquez ici, cliquez sur ce contour puis faites pour tous, puis exportez-les simplement. Ce que je ferais aussi est peut-être juste ici, assurez-vous de choisir le dossier de couleur et de mettre tous ces colorés à l'intérieur de là, puis de créer un autre dossier appelé souligné, puis de mettre toutes ces icônes décrites dedans. Aussi, ce que vous pouvez faire est ce que j'ai mentionné précédemment pour ces images. Par exemple, je peux sauter ici, sélectionner ce marché d'image pour l'exportation. Mais la difficulté avec le marketing pour l'exportation, et je peux le montrer avec, par exemple, cette icône. Je peux cliquer ici, ici, il est. Donc marché pour l'exportation. Si vous le marquez pour l'exportation, ce que vous pouvez faire est d'aller directement ici dans le fichier, puis d'exporter. Et tu peux faire le lot. Et vous pouvez sélectionner, par exemple, SVG ou PNG. C' est notre problème car je veux que cette image soit exportée en tant que JPEG, mais je veux que cette icône soit exportée en tant que SVG. Donc c'est son problème principal et c'est pourquoi je dis ne pas utiliser ces options parce que vous pouvez facilement marquer ceci et créer un guide de style comme celui-ci, puis les exporter comme je vous l'ai montré, puis choisissez simplement votre images. Donc, je ne vais pas marquer cela pour l'exportation. Et puis, par exemple, j'aurais considéré marqué. J' aurais ancrer votre marque. Et parce que nous avions ceci pour être notre composant principal, il vient de créer et ces instances de ce composant. Donc, une fois de plus, nous avons la conception de la page d'accueil. Donc, nous allons à File Export Batch. Je choisirai, par exemple, P&G, puis je choisirai la conception de la page d'accueil. Alors allez ici, page d'accueil originale, puis cliquez sur Sélectionner un dossier, cliquez sur Exporter. Donc, comme je l'ai dit, soit en tant que PNG ou SVG, il va faire son truc. Et enfin, si nous allons à ce dossier particulier, donc la page d'accueil originale, vous pouvez voir qu'il a exporté chaque chose qui a été marquée, qui sont fondamentalement toutes ces images dans différentes tailles, toutes ces images dans différentes tailles. Donc ces quatre fondamentalement, il a exporté tous nos drapeaux dans différentes tailles et nos logos dans différentes tailles. Si je fais cela pour celui-ci, par exemple, et je l'exporterais aussi en PNG, vidéo promo Color Overlay et vidéo promo. Vous pouvez également les sélectionner comme ceci. Ces bêtises de frapper Control E, c'est dans le même dossier que PNG. Ou encore mieux, je peux les changer en JPEG par exemple, mais je ne le ferai pas parce que cette Color Overlay a une obésité, comme vous pouvez le voir ici. Donc je vais les exporter comme étant G. Ça n'a vraiment pas d'importance. Vous pouvez exporter des images plates comme celle-ci, par exemple, sb et G. Cela n'a vraiment pas d'importance. Donc, cela va juste accélérer votre flux de travail un peu plus, mais vous pouvez également les exporter car JPEGS est vraiment à vous de décider. Donc, si je fais défiler ici, et si j'appuie sur Actualiser sur ce dossier particulier, voir où il les a exportés. Nous y voilà. Donc vidéo promo et vidéo promo superposition couleur. Donc, vous avez toutes ces options différentes. Et essayons-le avec celui-ci parce que c'est, c'était notre principal composant. Donc, si je clique sur marque pour l'exportation et puis le faire une fois de plus, donc File Export, Batch, PNG, export. Ça devrait me donner cet avertissement. Donc, avec tous ces Pardon endroit. Et une fois le chargement terminé, il devrait mettre toutes nos images d'ici dedans. Voyons donc si cela a fonctionné parce que nous avons évidemment apporté tous ces changements majeurs et massifs à ces changements. Donc, je voulais juste voir s'il va inclure ou faire un clic droit et actualiser notre dossier parce que qui aurait tous ces éléments ? Donc, il n'a pas seulement inclus cette barrière une. Et c'est ce que je disais. Plus vous apportez de changements à vos articles, fondamentalement, vous devrez aller sur le marché de Londres pour l'exportation, mauvais marché pour l'exportation. Et c'est évidemment beaucoup plus simple si vous le faites pendant que vous conceviez. Donc, dès que, par exemple, vous positionnez ceci, Disons l'image de Barcelone à l'intérieur. Dès que vous le placez à l'intérieur, cliquez simplement ici et puis vous l'oubliez après avoir terminé votre conception et il est temps d'exporter, puis vous venez directement ici au lot d'exportation de fichier, et c'est tout. Vous pouvez également remarquer l'option de gaule juste ici. Donc, le sapling est fondamentalement cet outil externe qui est utilisé par les équipes à travers le monde, en particulier dans ce domaine UI UX. Et c'est très utile aussi dans Adobe XD. Donc, le bois de bois dur travaille et il y a aussi beaucoup d'options différentes là-bas disponibles. Si vous travaillez dans le cadre de l'équipe, consultez peut-être votre équipe pour voir s'il y a cette option pour vous dans Adobe XD, car il y a tellement de logiciels et d'outils différents. Vraiment, les utilisateurs ne savent pas lequel choisir, mais comme je l'ai dit, Zeppelin est l'un des plus grands. Donc, pour utiliser Zeplin, vous devriez sauter ici à nos plugins. Cliquez sur vos plugins, revenez ici. Et puis je vais cliquer ici pour aller à la recherche de nouveaux plug-ins. Et fondamentalement, ce plugin est utilisé juste pour faire ces intégrations entre votre compte Chaplin et votre compte Adobe XD. Il est donc beaucoup plus simple pour cela de fonctionner de cette façon. Donc, si je le cherche ici, je centre, par exemple, ici c'est. Donc, il s'applique pour XD, vous devrez l'installer et ensuite connecter votre compte sapling à votre XD. Alors connectez-vous simplement à votre compte de sapling à partir de XD et cela fonctionne un peu différent. Donc, au lieu de partager tous ces différents éléments, toutes ces différentes images et options avec vos développeurs. Vous pouvez télécharger l'intégralité de votre plan de travail. Et puis l'échantillonnage montrerait ce que je vous montre déjà ici. Donc, il montrerait toutes ces différentes options, toutes ces différentes mises à jour et tous ces différents paramètres. Ainsi, les développeurs seront en mesure d'exporter facilement ces actifs directement à partir du format de fichier ARAF qu'ils veulent. Donc, je vous donne toutes ces options et exemples différents. Vous pouvez donc choisir ce que vous voulez faire. Et parfois, vous ne pouvez pas choisir parce que vos développeurs choisiront. Donc ça varie toujours. Cela dépend des préférences de l'utilisateur. Donc, comme je l'ai dit, certains développeurs aiment vraiment faire la façon dont la méthode de disque, comme je vous ai montré, par exemple, mettre tous ces acides dans les dossiers. Vous pouvez voir à quel point il est facile d'exporter uniquement les icônes parce que fondamentalement elles ne changent pas tout au long de notre conception et à quel point il est facile d'exporter des images. Ainsi, lorsque vous commencez à concevoir des mélanges à commercialiser pour les exportations, plus tard, vous allez simplement exporter tous vos actifs vers le dossier désigné, jusqu'à la taille désignée en un seul clic. Donc, ça va être beaucoup plus simple de le faire. Ou bien, vous pouvez aller page par page, sélectionner tous vos éléments différents, cliquer sur Contrôle E, sélectionner l'option, par exemple, PNG JPEG, PNG, SVG, etc., puis les exporter directement dans ce dossier particulier, dans cette taille particulière. Aussi, alternativement, vous pouvez rendre tous vos actifs téléchargeables, les télécharger sur le Cloud comme je vous l'ai montré. Et puis les développeurs pourront, dans le mode de développement du mode de partage de présentation, ils pourront le télécharger à partir de là. Ou alternativement, une fois de plus, ils peuvent utiliser quelque chose comme Zeplin. Ainsi, vous pouvez le connecter avec XD. Vous pouvez y télécharger vos plans de travail. Et puis ils peuvent faire l'exportation eux-mêmes. Vraiment, quand il s'agit de cette partie, vous devez conseiller avec les développeurs de votre client. Ou si nous travaillons dans le cadre de l'équipe, vous pouvez parler avec les développeurs de cette façon. Ou si vous êtes un développeur vous-même, assurez-vous simplement de choisir l'option qui vous convient le mieux. 56. Finition de notre guide de style: Allons maintenant et finissons notre guide de style. Parce qu'une fois de plus, le guide de style est vraiment important, surtout pour vous en tant que concepteur, car vous pouvez simplement copier et coller des éléments à partir de celui-ci. Et en tant que développeur, parce que les développeurs peuvent facilement vérifier tout ce dont ils ont besoin pour vérifier à l'intérieur. Donc si nous revenons à notre projet et je vous ramènerai à notre guide de style. Ce que nous devons vraiment inclure ici sont fondamentalement deux choses. Si vous utilisiez n'importe quel type d'illustration, je recommanderais vraiment de l'inclure ici aussi. Parce qu'une fois de plus, il est beaucoup plus facile, comme vous l'avez vu dans une vidéo précédente, d'exporter cette illustration. Et j'exporterais toujours des illustrations en tant que SVG. Ou si certains éléments sont bizarres, comme ils sont ici avec cet élément à l'intérieur de notre logo, alors je l'exporterais en PNG. Mais fondamentalement, chaque fois que vous avez eu la chance avec ces éléments vectoriels comme ils sont avec des icônes comme les illustrations arabes. Je choisirais toujours, toujours, de les exporter en SVG parce que de cette façon ils vont garder leur qualité maximale et ils ne vont pas perdre cette qualité chaque fois que vous changez ces tailles de votre document. Donc, comme je l'ai dit, si vous utilisez des illustrations, assurez-vous de les inclure ici. Mais parce que nous ne le sommes pas, nous allons juste inclure la typographie et parce que nous avons toutes ces options différentes, mais je vais faire est simplement l'étendre à ici, assurez-vous que je supprime cela. Donc, que pouvez-vous faire est que vous pouvez simplement diviser toutes ces sections. Donc, déplacons ceci ici, et c'est pourquoi je les inclus comme dossiers. Et je vais cliquer ici et taper étant logo, par exemple. Options de logo. Et voyons, je vais utiliser quelque chose de plus grand comme 36 gras par exemple. Je vais l'aligner ici. Je vais m'assurer que j'ai 80 ans d'ici. Et je vais aussi m'assurer que j'ai 80 ans d'ici, ou même mieux, 100 comme ça. Ensuite, je vais dupliquer ceci, assurez-vous que j'ai 100 ici et utiliser l'icône ou l'iconographie, tout ce que vous voulez. Positionnez ça ici, assurez-vous que j'ai 100 ans. Et puis le contrôle D 100. Encore une fois, je, que je vais m'assurer d'appeler cette couleur. Cliquez ici. Pour une raison quelconque, c'est bizarre, mais mettons-le ici, c'est important. Et enfin, contrôlez D. Assurez-vous qu'il est là et appelez cette typographie. Et pour la typographie, étendons cela un peu plus bas parce que nous avons toutes ces différentes options à inclure. Donc, il a frappé le mélange de contrôle D. J' ai 80 ans. Et je vais commencer par ma plus grande police et ensuite aller jusqu'au bout. Vous pouvez donc les commander comme ça. Donc, je peux cliquer ici, positionner ça en haut, puis, bien avec 120, puis aller avec un 100. Bonjour IT AT et je peux aller avec 36. Et puis utilisez 24, qui est ce sombre, 24, qui est celui-ci. Vous n'avez même pas à inclure ces différentes options. Vous pouvez changer les couleurs comme je vous ai montré tout au long de la conception. Mais là, nous aimerions donner cela aux développeurs juste pour qu'ils puissent voir tous ces changements que j'ai apportés à nos textes. Commençons par le plus grand, qui est celui-ci. Et ce que j'aime faire, c'est que j'ai ce fichier texte avec les lettres de l'alphabet. Il suffit de sélectionner cela, s'assure que le texte est aligné à gauche et je peux simplement cliquer là et le positionner là. Vous pouvez le faire si vous voulez, mais je vais le faire aussi, est, par exemple, appeler ce soda à des centaines, BT. Et il suffit de le laisser là. Assurez-vous que je suis 100, par exemple, contrôler le, assurez-vous que je suis 100, celui-ci, assurez-vous 120, alors je peux l'ajuster comme ça. Donc, c'est 120. Contrôlez la position ici quelque part, c'est 100. Et je peux le placer ici. Contrôle D 100, ici 80. Donc je vais changer ça à 100. Ça va être a2. Je l'ai fait. Et enfin, maintenant que toutes ces choses sont terminées, je peux passer à l'alphabet et inclus, parce que vous pouvez inclure l'alphabet avec celui-ci, mais vous avez vu à quel point va faire votre fichier. Vous pouvez également cliquer et déplacer ceci ici et les déplacer directement dans la même ligne. Donc, c'est vraiment à vous de décider. Comment vous voulez ajuster cela, comment vous voulez travailler avec. Mais je vais simplement l'utiliser comme ça. Je vais cliquer ici et renommer ceci. Donc ça va être Poppins. Et je peux l'appeler, par exemple, boulon 36, BT. Et puis je peux inclure mon alphabet comme ça. Mais parce que cela va jusqu'ici, peut-être que ce que je peux faire est simplement de cliquer comme ça et de le positionner comme ça. Et le contrôle D. Je vais m'assurer que c'est 100. Et je vais appeler ça Poppins 24. Alors cliquez ici. Maintenant que vous avez le texte, c'est assez simple. Donc 24, assurez-vous juste d'utiliser les paramètres. Vous pouvez également inclure l'espacement des lignes. Vous pouvez inclure l'espacement des caractères, Lucan inclure l'espacement des paragraphes, la hauteur de la ligne, tout ce que vous voulez, vous pouvez inclure ici. Mais comme il l'a dit, je pense que c'est un peu une perte de temps parce que les développeurs qui ont aussi cela inclus. Lorsque vous partagez, je vais positionner ceci ici et double-cliquer ici. Donc, c'est de la lumière. Donc, au lieu d'audacieux, nous allons utiliser la lumière 24. Et je vais changer son nom pour celui-ci. Les changements semblent plus rouges juste pour que nous puissions les voir. Et je ne vais pas inclure de texte blanc parce que c'est difficile à lire. Mais j'ai inclus celui-ci parce que nous venons d'avoir cette seule instance. Mais avec ce 24, nous avons aussi des options blanches, sombres, audacieuses et irrégulières avec cette couleur, qui est gris foncé. Enfin, nous en sommes à 24. Inclus ceci comme 18. Donc je vais y aller avec 18 ans. Et je vais changer ça en ligne audacieuse. Ça fait en sorte qu'on soit 100 Control D. Une fois de plus. Je vais inclure ceci comme un léger. Mais par exemple, je peux le changer en gris foncé. Et ça va être léger 18. Assurez-vous que nous sommes à 100 avec celui-ci aussi. Et enfin, je vais l'étendre un peu plus vers le bas, juste pour que je puisse les inclure dans ma dernière, qui est celle qui a 16 ans. Et c'est aussi léger que ça. Et les produits laitiers comment il est donc notre typographie. Voici notre guide de style complété pour ce projet particulier. Ce que nous pouvons également inclure ici, c'est que nous pouvons tous les mettre en groupes distincts. Laisse-moi te le montrer en une seconde. Alors retournez à ici pour les couches. Donc, nous avons nos couleurs, nous avons nos icônes, logo, et nous avons notre typographie. Donc, je vais mettre mon type ici, sélectionnez-les tous. Hit Control G a appelé cette typographie. Et ce que je m'assurerais de faire, c'est de les aligner correctement. Donc ça va aller ici, ici. Ici. Évidemment, vous n'avez pas à faire ça, mais j'aime vraiment garder mes affaires organisées comme vous l'avez vu tout au long de ce cours. Donc, ce n'est vraiment pas une grosse affaire pour moi, mais ça va être beaucoup plus agréable pour les développeurs et les clients. Je peux le mettre juste en dessous de nos couleurs, à l'intérieur de nos couleurs, je peux mettre ce texte ici. A l'intérieur des icônes. Je peux mettre les textes ici. Et vous pouvez également mettre les icônes dans un groupe. Par exemple, première ligne, deuxième ligne, troisième ligne ou contour coloré. Tu peux faire ce que tu veux. N Enfin, pour les options de logo, je peux le mettre ici. Et maintenant, je peux les regrouper tous et créer une pile. Donc, par exemple, je peux remplacer ces espaces et m'assurer de les changer. Mais ce que cela me donne aussi, laissez-moi changer ceci en guide de style est l'option d'une pile pour fonctionner comme il se doit. Donc, ce que je vais faire dans ces couleurs, je vais simplement utiliser mes couleurs et utiliser cette dernière nuance de couleur, par exemple. Je vais le dupliquer. Ici, c'est. Et je vais le déplacer vers le bas. Et voyons, on a 80 ans juste ici, donc on va avoir 80 ans juste ici. Et je vais aussi le déplacer ici. Je vais l'utiliser et je vais aussi frapper Control D une fois de plus. Et je vais le positionner ici. Ce que ça va être, c'est notre ombre. Alors remplacons temp comme ça. Cela va être une ombre portée ou une ombre portée encore mieux. Ça va tomber ombre sombre comme ça. Donc, sur la lumière de l'ombre portée, je vais utiliser une couleur blanche sur celle-ci aussi. Couleur blanche. Et ce qu'on va faire, c'est copier l'ombre portée de quelque part. Par exemple, allons-y. Sélectionnez cette option, cliquez avec le bouton droit et copiez. Vous pouvez également aller avec 55, 10, puis choisir 5, ce qui est encore plus approprié pour nous dans encore plus utilisable. Et je vais cliquer ici sur une couleur. Je vais l'appeler en fait, non, partons avec la couleur. Donc, je vais soit cliquer avec le bouton droit de la souris sur l'apparence, Il va coller cette ombre portée. Je peux aussi le faire manuellement. Alors va avec 55 à 10 et au lieu de 5, je vais ajuster ça à 8 comme ça. Donc, cela va être, par exemple, voyons. On peut y aller avec x, y être 55, 10. Donc, je peux l'appeler x, y. Cela va être 5, 5, 10, ou basicité 5% par exemple. Et je peux cloner ça ici. Et ce sera à 8%. Donc, une fois de plus, les développeurs peuvent facilement le faire et nous avons juste à sélectionner cette couleur, qui va être décolorée. Alors copiez-le. Je vais sauter ici, coller cette couleur. Alors voyons ça une fois de plus. Ce sera tous les zéros. Donc six zéros sautent ici, 1, 2, 3, 4, 5, 6. Il a sélectionné Contrôle C, Encore une fois sélectionné ici contrôle V. Et ce que je peux faire est également assurez-vous de, par exemple, position et juste ici, et assurez-vous que je suis à dix. Et faites la même chose pour celle-là. Assurez-vous que j'ai dix ans, et assurez-vous qu'il est aligné à gauche. Même comme celui-ci juste au cas où je voudrais apporter quelques modifications supplémentaires à certaines de mes couleurs. Et parce que tous sont dans une pile, ils sont tous bien ajustés et vous pouvez simplement fermer cela. Et enfin, quand il s'agit de ce guide de style, vous pouvez l'exporter au format PDF. Et vous pouvez également l'enregistrer dans votre fichier comme nous le faisons essentiellement quand il s'agit de partager votre fichier avec vos clients et développeurs. Ce que je ferais c'est essentiellement partager mon fichier entier. Donc, tout ce que vous avez vu ici, je partagerais avec eux que je ne supprimerais pas le bref de conception ou avec gardé droit dans s'ils veulent pour moi d'exporter le bref de conception, notre exportation comme un PDF et ensuite ils vont être en mesure de l'imprimer, a montré que deux là. Par exemple, d'autres propriétaires d'entreprise, partenaires, concepteurs, développeurs, n'importe qui dans l'équipe. Et puis je m'assurerais également d'exporter, par exemple, guide de style s'ils le souhaitent en tant que PDF, partager avec eux. Et ces fils de papier, je les exporterais simplement comme des images JPEG, donc je peux partager cela avec eux s'ils le veulent. Quand il s'agit de guide de style, comme je l'ai dit, vous pouvez l'exporter au format PDF s'ils voulaient l'imprimer. Vous pouvez passer autant de temps et d'efforts que vous le souhaitez à ce guide de style. Mais à mon avis, vraiment, cette structure de base est vraiment tout ce qui est nécessaire, tout cela suffit pour ce genre de projets parce que j'ai vu ces guides de style sur le web et vous pouvez voir ces changements élaborés, mises en place élaborées où les guides de style, mais je ne pense pas vraiment que ce soit nécessaire, surtout si ce n'est pas le cas si vous n'avez pas le temps de travailler sur ces projets parce que cela va facilement manger dans votre temps, dans votre budget. Et ça va vraiment vous varier pendant que ce n'est pas vraiment tout ce qui est nécessaire. Alors construisez votre guide de style au fur et à mesure que vous ajoutez de plus en plus d'éléments, allez-y et construisez votre guide de style et ajoutez-y plus. Mais fondamentalement, c'est tout. C' est à quel point il est facile de travailler avec des guides de style. Et c'est pourquoi ils sont importants, surtout quand il s'agit d'exporter dans vos acides, car vous pouvez simplement sélectionner tous vos actifs, appuyer sur Control E et les exporter dans le format de fichier que vous voulez. 57. Projet de cours Skillshare: Pour votre projet de classe Skillshare, j'aimerais vraiment que vous recréiez l'une de ces pages, mais vous pouvez utiliser différents éléments. Par exemple, vous pouvez utiliser différentes polices, vous pouvez utiliser différentes couleurs, vous pouvez utiliser différentes icônes. Vous pouvez utiliser différentes images juste pour pimenter les choses un peu et apprendre un peu mieux. Parce que si vous suivez cette classe étape par étape, vous allez apprendre beaucoup, mais vous allez en apprendre encore plus lorsque vous essayez d'utiliser différents éléments que vous trouvez en ligne, en particulier avec les images, parce que tous ces images vont être mises à l'échelle exactement de la même manière dans différents scénarios. Donc, je pense qu'avec les images, en particulier, vous allez changer l'apparence globale de votre design et la sensation globale de votre design beaucoup plus que, par exemple, avec des polices. Je vous encourage également à choisir différentes polices, choisir différentes couleurs, différentes icônes, juste un peu pimenter les choses un peu tout en utilisant ces méthodes, vous pouvez également utiliser cette mise en page exacte. Vous pouvez utiliser cette structure exacte, les noms de dossiers. Tout peut être le même, mais il suffit de le pimenter un peu en ajoutant des images différentes, en ajoutant différentes icônes, différentes couleurs, différentes topographies. Donc toutes ces choses, et ça va vous aider à apprendre toutes ces choses beaucoup plus, beaucoup plus vite et beaucoup mieux. Ensuite, juste en me suivant étape par étape et simplement en faisant ce que je fais pour les créer. Vous pouvez simplement créer des plans de travail supplémentaires à l'intérieur de ce fichier, puis simplement suivre étape par étape parce que sera beaucoup plus facile pour vous, puis simplement vérifier vos erreurs et voir ce que j'ai fait et vérifier si vous avez fait cela correctement. Et cela va vous aider beaucoup parce que vous aurez tout à l'intérieur du même fichier afin que vous puissiez facilement comparer et contraster. Merci encore d'avoir pris ce cours et j'ai vraiment hâte de voir ce que vous allez créer pour votre projet de classe Skillshare et assurez-vous télécharger cela comme une image afin que vous puissiez exporter tout le plan de travail, par exemple, en tant que JPEG. Et vous pouvez télécharger ce JPEG dans des projets de classe Skillshare. Et j'ai vraiment hâte de voir ce que vous pouvez créer et j'espère vous donner des commentaires aussi, sur ce que vous pouvez passer à autre chose. Mais comme je l'ai dit, j'ai essayé de pimenter les choses juste un peu en ajoutant, par exemple, différentes couleurs, différentes topographies, et différentes images. Encore une fois, j'ai hâte de voir ce que vous pouvez créer. 58. Conclusion et ressources: Merci d'avoir regardé ce cours. J' espère vraiment que tu en auras un peu de valeur. Et j'espère vraiment que vous allez appliquer ce que vous avez appris dans cette classe à votre flux de travail. Et j'espère vraiment que vous avez pris quelques conseils ici et là. Il va améliorer votre flux de travail et accélérer votre flux de travail, ce qui, je pense, est la chose la plus importante dans l'entreprise de conception globale, est de pouvoir travailler rapidement et être capable façon intelligente sans perdre trop de temps parce qu'en fin de compte, le temps est de l'argent dans cette entreprise comme dans n'importe quelle autre entreprise parce que vous pouvez obtenir tout ce que vous voulez. Mais si vous n'avez pas assez de temps que c'est vraiment juste, ça n'a pas d'importance. Donc, vous avez ce fichier, vous pouvez jouer avec. Assurez-vous de suivre les directives que je vous ai dit pour utiliser ces images et ces icônes pour juste vous assurer de les utiliser comme un outil d'apprentissage. Assurez-vous de les utiliser juste pour apprendre à les utiliser dans ce projet. Ne les utilisez pas pour vos projets personnels ou commerciaux. Parce que si vous faites ça, alors vous risquez tous ces problèmes juridiques. Assurez-vous que si vous voulez les utiliser, vous pouvez utiliser Envato Elements et je vais laisser les liens vers tout ce dont je parlais dans la caisse PDF, ce PDF et simplement cliquer sur le lien qui vous intéresse, visitez ce lien et faites ce que vous voulez avec ça. En gros, tout ce que je dis, c'est de la pratique, de la pratique, de la pratique. Ça le rend parfait. Ainsi, plus vous le faites, plus vous vous entraînez à créer ces fichiers, à créer ces mises en page, vous serez meilleur. Merci encore une fois d'avoir regardé et j'espère vraiment que vous avez obtenu une certaine valeur de cette classe et que vous allez appliquer cette valeur à votre travail futur. Prends soin de toi.