Concevez votre premier site Web dans Adobe Xd

1. Bienvenue au cours: Dites-moi, aimeriez-vous savoir comment concevoir et prototyper un site Web à l'aide d'Adobe XD ? Eh bien, si vous êtes ici, vous le feriez clairement. Et je voulais vous remercier d' avoir choisi ce cours. Je suis David, et ici vous apprendrez comment concevoir et prototyper votre premier site Web à l'aide d'Adobe XD. Et si vous êtes complètement nouveau sur le sujet, permettez-moi de vous dire qu'avec XD, vous pouvez concevoir un site Web interactif afin montrer à vos clients non seulement à quoi ressemblerait le site, mais aussi comment ça marcherait. Et le meilleur, c'est que XD est livré avec une version complète et gratuite que nous utiliserons dans ce cours. y a donc vraiment aucune excuse pour ne pas au moins l'essayer. J'ai donc divisé ce cours en deux parties principales. Dans le premier, vous apprendrez tout ce qu'il y a à savoir pour commencer à utiliser le logiciel. Vous apprendrez donc à utiliser l'interface, à créer des fichiers, à utiliser les outils, les plugins et les ressources. Quelles sont les différences entre la conception et le prototypage et uniquement les aspects réels de la typographie Web, les meilleures pratiques en matière de conception Web ? Et dans la deuxième partie, nous allons retrousser nos manches et nous salir les mains et concevoir et prototyper un site Web. Et nous allons créer un ordinateur de bureau et une version mobile d'un site Web de freelances de conception web. Et dans le processus, nous allons approfondir l'ajout et l'utilisation d'éléments que vous êtes le plus susceptible d'utiliser dans des projets de conception Web réels. choses comme des menus mobiles, des curseurs, des témoignages, des portefeuilles et bien plus encore. Et lorsque cela sera fait, vous apprendrez comment enregistrer et partager votre conception avec un client ou avec d'autres parties prenantes. Le cours vous permettra donc d'apprendre étape par étape les bases de l'utilisation de XD à la conception et au prototypage d'un site Web, jusqu'à l'enregistrement et le partage. Donc, si vous voulez devenir freelance en design web, ou si vous souhaitez peut-être décrocher un emploi dans une agence de conception Web. Apprendre Adobe XD est vraiment indispensable. Alors, sautez directement et j' espère vraiment vous voir à l'intérieur. 2. Ce que vous trouverez dans ce cours: Adobe XD est un logiciel extrêmement populaire qui vous permettra de concevoir mises en page interactives professionnelles de l'interface utilisateur. Si vous souhaitez décrocher un emploi concepteur Web ou de concepteur d'applications mobiles, ou si vous souhaitez devenir freelance de design, XD est certainement l'un des programmes que vous aurez besoin de connaître, vous savez, Jetez un coup d'œil aux offres d'emploi pour les designers ou aux projets de design disponibles pour les pigistes. Beaucoup d'entre eux s'attendent à connaître Adobe XD. Bien sûr, il existe des alternatives. Mais si vous utilisez déjà des programmes comme Photoshop, Illustrator, InDesign, ajouter, quitter votre portefeuille de compétences est un peu naturel. Je souhaite donc que ce cours vous aide à commencer créer des mises en page Web le plus rapidement possible. Je veux que vous deveniez en fin un concepteur Web indépendant et un utilisateur XD. C'est pourquoi je l'ai divisé en deux parties principales. Vous apprendrez donc d'abord les principaux concepts comme ce qu' est x et comment le télécharger. Vous apprendrez également à connaître le programme en explorant l'écran d'accueil, l' espace de travail et en comprenant la différence entre la conception et le prototypage. Vous comprendrez également comment créer de nouveaux fichiers, comment gérer les plans de travail et les outils. Et vous vous familiariserez également avec les plugins et les acides. Une fois que nous connaîtrons tout cela, nous passerons à la création du design. Et dans cette deuxième partie du cours, vous apprendrez comment trouver l'inspiration de la couleur et du design pour vos projets. Comment concevoir puis prototyper une mise en page Web, et comment enregistrer et partager votre conception finale. Nous allons apprendre pas à pas comment installer et utiliser les fonctionnalités de base de XD en concevant et en prototypant jusqu'à la finalisation de votre projet. Et à la fin de ce guide, vous devriez pouvoir concevoir et prototyper indépendamment des mises en page Web dans Adobe XD. 3. Qu'est-ce qu'Adobe Xd: La conception expérimentée d'Adobe, ou Adobe XD, vous permet de concevoir et de prototyper conceptions numériques interactives telles que sites Web et des applications mobiles. Nous sommes donc de retour dans la journée afin d'obtenir les fonctionnalités qui permettraient à vos clients et développeurs voir l'interactivité que vous avez créée pour la conception, vous devez utiliser une application pour design et un autre prototype. Par exemple, comme Marvel App. Avec Adobe XD. Vous pouvez tout faire dans une seule application. Mais il y a aussi une autre chose que vous pouvez faire ici. Une fois que vous avez conçu et prototypé votre projet, vous pouvez le partager avec des clients et des développeurs. Et la fonctionnalité de partage InDesign ne se limite pas à l'enregistrement, puis à l' envoi du fichier. Mais il est également doté d'une fonctionnalité puissante de génération de code nécessaire à la recréation des fonctionnalités de votre conception. Et cela peut grandement aider les développeurs à donner vie à votre conception sur un serveur Web. En bref, XD vous permet de concevoir vos projets tels que des sites Web ou des applications mobiles. Prototypez votre conception, ce qui signifie que vous pouvez ajouter différents effets et fonctionnalités à vos éléments de conception. Vous pouvez également partager vos projets avec code généré automatiquement utilisé dans le développement Web et d'applications. Étant donné que x D provient d'Adobe, il coopère bien avec d'autres programmes de Creative Cloud Suite, en particulier Photoshop, Illustrator et After Effects. Donc, si ces outils de conception ne vous suffisent pas, vous pouvez utiliser d'autres logiciels pour concevoir vos ressources, puis les imprimer sur XD. Par conséquent, vous concevez généralement un logo ou des éléments graphiques personnalisés tels que des icônes ou des illustrations. Dans Illustrator, vous devez modifier les photos dans Photoshop ou peut-être dans Lightroom, puis les ajouter à votre projet XD pour créer un nouveau prototype et le partager avec les développeurs et les clients. Bien sûr, cela ne signifie pas que vous pouvez concevoir votre mise en page du début à la fin en utilisant uniquement XD. Je suis sûr que vous le pouvez. Si, par exemple, tous les actifs du client sont déjà livrés, vous pouvez simplement vous lancer directement dans XD et commencer concevoir la mise en page à l'aide des outils fournis, ce qui, d'ailleurs, nous Je parlerai un peu plus tard. Et si vous avez utilisé d'autres programmes de Creative Cloud Suite, notamment Illustrator et Photoshop. Certains aspects de l'utilisation de XD vous seront beaucoup plus faciles à comprendre. Par exemple, la disposition des utilisateurs est similaire. Le concept de tableaux d'art, les options spécifiques dédiées aux outils, aux outils eux-mêmes, etc. Si c'est votre première rencontre avec le logiciel Adobe, ne vous inquiétez pas, nous allons le prendre. Joli et lent. Vous allez donc vous familiariser avec XD et espérons-le, commencer à utiliser le programme de manière indépendante. Il vaut donc vraiment la peine d'essayer Adobe XD, surtout depuis fin 2021. En plus de simplement essayer le programme, vous pouvez télécharger et installer la version de démarrage gratuite et presque non coupée, dont nous parlerons ensuite. 4. La version de démarrage: Depuis fin 2021, Adobe XD propose un forfait Starter gratuit. Voyons donc rapidement de quoi il s'agit. Le plan de démarrage vous permet de faire tout ce que vous pouvez. Dans la version Premium. Cela signifie qu'il n'y a aucune limite quant au nombre de fichiers que vous pouvez créer. Les outils que vous pouvez utiliser dans le programme, la bibliothèque de plugins et toutes les autres extensions disponibles, les outils et options de prototypage, enregistrement et l'exportation de vos projets sous forme d'images. Il semble donc que vous obtiendriez tout ce dont vous auriez besoin, n'est-ce pas ? Mais il doit y avoir une prise. Et bien sûr, il y en a un ou plusieurs. Même dans le plan de démarrage, les fonctionnalités de partage sont limitées. Ce n'est pas que vous ne pouvez pas partager vos projets ou que le fichier partagé soit en quelque sorte endommagé. Mais vous ne pouvez partager qu'un seul fichier à la fois. En outre, vous ne pouvez exporter vos conceptions au format PDF que deux fois. L'historique des documents est limité à dix jours seulement, contre trois jours dans le plan payant. Vous n'avez accès qu'aux polices Adobe basiques. Et votre stockage cloud est limité à deux gigaoctets. Donc, si vous travaillez au sein d'une équipe de concepteurs, de développeurs et de chefs de projet, vous gérez probablement plusieurs projets différents en même temps. Cela signifie que le fait de ne partager qu'un seul fichier au sein d'une équipe constitue une grande limite. Toutefois, si vous débutez en tant que concepteur Web ou si vous souhaitez trouver un emploi en tant que seul, vous pouvez apprendre XD simplement en utilisant le forfait standard. Et c'est une excellente nouvelle, surtout si l'on considère que les produits Adobe sont une norme industrielle et qu'ils ne sont pas bon marché. Dans l'ensemble, vous pouvez apprendre un logiciel très demandé sur le marché du travail et vous pouvez l'utiliser librement. Supposons donc que vous soyez l'une des personnes que vous souhaitez apprendre ou essayez simplement Adobe XD. Vous envisagez de devenir graphiste, freelance. Ou vous envisagez de trouver un emploi en tant que graphiste. Et vous voulez simplement voir si X d est quelque chose pour vous. À ces fins, le plan de départ sera plus que suffisant pour vous. Et dans ce cours, c'est ce que nous allons utiliser. Voyons maintenant comment le télécharger et l'installer. 5. Comment télécharger Adobe Xd: Vous savez, je dois dire qu'il n'est pas si facile accéder à la page de téléchargement de x, le plan de démarrage. Le site Web d'Adobe essaie vraiment de vous aider à obtenir la version d'évaluation ou la version complète, mais ce n'est rien que nous ne pouvons pas gérer. Par conséquent, la meilleure façon de trouver la page de téléchargement consiste simplement à télécharger plan Adobe XD Starter sur Google. Vous pouvez cliquer sur le premier lien qui apparaît et vous serez dirigé vers le site Adobe. Vous y verrez un bouton de lien bleu indiquant obtenir XD, qui, lorsque vous cliquez dessus, tentera d' ouvrir un lien de téléchargement. Si Creative Cloud Desktop est déjà installé, votre système essaiera d'ouvrir le fichier à l'aide de cette application. Si ce n'est pas le cas, on peut vous demander de le télécharger, bien que je vous conseille de l'installer quand même. Vous pouvez, comme auparavant, l'application Google Creative Cloud Desktop et simplement cliquer sur le premier résultat de recherche sur la page qui s'ouvrira, cliquez simplement sur le bouton de lien Télécharger Creative Cloud et sur le téléchargement le processus va commencer. Une fois l'application installée, vous devrez donc vous connecter ou inscrire si vous n' avez pas de compte Adobe. Ensuite, vous pourrez installer XD via le bureau Creative Cloud, ou simplement suivre ce lien de téléchargement direct, n'est pas la façon dont vous choisissez XD qui sera installé et prêt à l'emploi. Je pense que le moyen le plus simple serait d' installer d'abord leur application Creative Cloud Desktop , puis d'installer XD. De cette façon, vous éviterez tous les tracas de rechercher le lien direct quelque part et la page d' Adobe et d' installer accidentellement Watch, vous ne vouliez vraiment pas. 6. L'écran d'accueil: Lorsque vous ouvrez XD, vous verrez d' abord l'écran d'accueil, généralement divisé en deux espaces principaux. Sur la gauche, vous verrez des liens utiles qui vous permettront d'effectuer des tâches spécifiques. Et selon le lien sur lequel vous cliquez sur la gauche, l'espace de droite change et vous permettra de contrôler vos fichiers. Jetons donc rapidement un coup d'œil à ces liens. Nous avons d'abord eu un nouveau dossier. C'est ce gros bouton bleu que Taylor, lorsque vous cliquez dessus, vous allez créer un nouveau fichier avec un tableau d'art par défaut. Ensuite, nous avons obtenu le lien ouvert, qui lui permettra d'ouvrir un Photoshop comme un fichier PSD, et Illustrator, qui est un fichier AI, un fichier d'esquisse ou un fichier XD. Nous avons également le lien d'accueil qui vous permettra de revenir à l'écran d'accueil. Nous avons également le lien Learn qui vous amènera essentiellement au guide officiel de démarrage XD d' Adobe. Ensuite, dans l'onglet Fichiers, vous trouverez vos fichiers. Vous trouverez ici tous vos fichiers créés précédemment. Donc, si vous cliquez simplement sur l'un d'eux, ce phi s'ouvrira. Toutefois, si vous sélectionnez le fichier à l'aide de la petite zone située dans le coin supérieur gauche, vous pourrez utiliser l'une des options de contrôle qui apparaîtront en haut à droite. Vous pouvez donc renommer, supprimer et déplacer les fichiers sélectionnés ici. Et si aucun fichier n'est sélectionné dans le coin supérieur droit, vous verrez une option permettant de créer un nouveau dossier vers lequel vous pouvez déplacer vos fichiers. Si vous cliquez sur l'un d'eux, vous verrez apparaître une boîte de dialogue Créer un nouveau dossier. Il suffit donc de nommer votre dossier et de cliquer sur Enregistrer. Une fois le nouveau dossier créé, vous pouvez sélectionner les fichiers que vous souhaitez y placer et cliquer simplement sur Déplacer vers le lien que vous verrez dans le coin supérieur droit. Cela ouvrira une nouvelle fenêtre dans laquelle vous pouvez simplement cliquer sur Déplacer pour déplacer les fichiers. Vous pouvez également créer rapidement un nouveau dossier utilisant le lien que vous trouverez dans le coin inférieur gauche. Ensuite, nous avons été partagés avec vous. Donc, si quelqu' un partage un fichier avec vous, il sera affiché ici. Nous avons également géré des liens. Ainsi, lorsque vous cliquez sur ce lien, vous serez redirigé vers votre compte Adobe. Plus précisément dans une section où les polices que vous avez partagées seront visibles. Et sous cet onglet supprimé, les fichiers que vous avez supprimés seront stockés ici. Juste au cas où vous changez d'avis et que vous vouliez les ramener à la vie, pour ce faire, il suffit de sélectionner le fichier et il aura le choix de le restaurer ou de le supprimer. Sous les préréglages du plan de travail, vous pouvez choisir l'un des fichiers prédéfinis avec des préréglages de tableau d'art. Si vous cliquez sur l'un d'entre eux, vous obtiendrez un fichier avec le tableau d'art par défaut. Toutefois, si vous cliquez sur une petite flèche grise à droite, vous verrez la liste des autres plans de travail disponibles. Vous pouvez également sélectionner le préréglage personnalisé et simplement entrer les valeurs de largeur et de hauteur ci-dessous. Et ces derniers temps, vous verrez tous les fichiers sur lesquels vous avez travaillé récemment. Il suffit de cliquer sur l'un d'eux pour l'ouvrir. Comme vous pouvez le constater, cet écran d'accueil a été grandement simplifié pour vous permettre de travailler sur vos fichiers et de les partager sans trop y penser. Si vous comprenez simplement que ce que vous cliquez à gauche, les effets que vous voyez à droite. Travailler avec cet écran deviendra très, très facile et intuitif. 7. L'espace de travail: Jetons maintenant un coup d'œil à XD is Workspace. Après tout, c'est l' endroit où vous passerez le plus de temps avec le programme. Donc, si vous avez déjà utilisé comme n'importe quel autre logiciel de conception, en particulier les derniers logiciels de conception d'Adobe. Comprendre x, cet espace de travail peut être un peu plus facile pour vous. C'est un très logiquement divisé en deux parties principales et grandement simplifié, peut-être parfois un peu simplifié à mon goût. Mais tout cela rend le processus de conception un serveur moins fluide que possible. Donc, en haut, vous avez le menu principal. Et ici, vous trouverez toutes les commandes principales qui sont séparées en deux onglets tels que fichier, ajouté, objet, plugins, vue, fenêtre et aide. Et bien sûr, leurs noms correspondent à ce que vous pourriez trouver une fois que vous avez cliqué dessus. Bien sûr, au milieu, nous sommes arrivés à l' principal de conception, qui est le premier espace de travail que vous verrez une fois que vous commencerez un nouveau fichier. Et bien sûr, tous vos outils de conception sont là. Mais bien sûr, nous avons également le prototype d'espace de travail. Cet espace de travail vous permettra d'ajouter et contrôler les options interactives que vous pouvez attribuer à vos éléments de conception. Nous disposons également de l'espace de travail partagé. Vous trouverez ici tous les outils et options indispensables au partage de votre projet. Nous avons également entendu, comme dans le coin supérieur droit, que vous pouvez voir cet aperçu sur une option d'appareil. Vous pouvez également connecter un appareil mobile à votre ordinateur. Ensuite, à l'aide de cette fonction, vous pouvez prévisualiser votre conception. Maintenant, nous avons également ce bouton d' aperçu dans XD qui vous permettra de prévisualiser votre conception avec une interactivité accrue. Votre projet se comportera comme s'il avait été visualisé en direct dans un navigateur Web. Et sur la droite, vous verrez des options contextuelles et des paramètres appelés Inspecteur des propriétés. Cette douleur va donc changer chaque fois que vous sélectionnez un élément de conception, un outil ou un espace de travail différent. Il ne vous donnera donc que les options et les paramètres qui correspondent à l'élément ou à l'outil que vous sélectionnez. Bien sûr, au centre, vous aurez votre plan de travail et tout ce qui s'y trouve sera affiché dans le fichier final. Tout ce qui tombe à l'extérieur ne sera plus visible une fois que vous aurez exporté votre fichier et tout ce qui se trouve en dehors de votre plan de travail, vous pouvez le voir comme simplement vos gribouillages, quelque chose comme ça. Le plan de travail repose essentiellement sur une plaque de pâte. Il s'agit essentiellement d'un endroit où vous garderiez vos éléments de conception tels que vos images, vos, vos icônes ou vos illustrations, peut-être des morceaux de texte, des choses comme ça. Ici, tout en bas à gauche, vous avez votre gestionnaire de plugins. Et c'est là que vous pouvez gérer tous vos plugins, dont nous parlerons plus tard. Ensuite, en augmentant d'un niveau, nous avons nos couches. Et bien sûr, vous verrez ici tous vos éléments comme des plans de travail, des groupes, des éléments de design, toutes ces choses. Nous avons également ici même des documents sur les ressources. Et ici, vous pouvez ajouter et gérer des couleurs, styles de personnages, des composants et des vidéos. Et bien sûr, nous avons nos outils ici. Mais certains outils ne sont pas visibles ici, mais auxquels vous pouvez accéder à l'aide de raccourcis clavier. Et encore une fois, nous en parlerons plus tard. est donc essentiel de connaître l'espace de travail pour un processus de conception rapide et productif. Je vous encourage à y consacrer au moins un peu de temps pour vous familiariser avec les aspects les plus importants de x, cet espace de travail. 8. Concevoir vs prototypage dans Xd: Lorsque vous travaillez au sein d'une équipe de designers et de développeurs, ou lorsque vous ne travaillez pas en solo avec vos clients, il est très important de pouvoir présenter comment vous voudriez que votre design interagisse avec le utilisateurs. Et la conception, l'application ces interactions s' appelle prototypage. En bref, lorsque vous ajoutez des éléments visuels à votre projet, vous concevez et lorsque vous ajoutez des interactions entre ces éléments, ou surtout, entre l'utilisateur et les éléments de conception. Vous effectuez un prototypage et Adobe XD vous permet de réaliser les deux. Utilisation de l'espace de travail de conception. Vous pouvez ajouter des éléments visuels à votre projet. outre, à l'aide de l'espace de travail prototype, vous pouvez présenter comment vous avez envisagé les interactions entre l'utilisateur et votre concepteur. Et cela peut bien sûr aider grandement à transmettre vos idées aux personnes qui développeront votre projet ou simplement au client si vous allez développer ce projet vous-même. Le prototypage est donc très important du point de vue UX. Je veux dire, réfléchissez-y. En tant que concepteur, vous n'êtes pas seulement responsable quoi ressemblera votre projet, vous êtes également responsable de la façon dont votre projet fonctionnera dans le monde réel. C'est pourquoi il est judicieux de penser à ce se passera lorsque quelqu'un clique sur un bouton, tabute sur un lien ou fait défiler la page vers le bas ou jusqu'à X D outils de prototypage vous aideront à visualiser tous ces éléments. événements, y compris les états de survol, les transitions, les clics, etc. Et à son tour, nous laisserons d'autres personnes vous donner des commentaires sur la façon dont ils veulent que les projets se comportent. Et cela peut être un grand gain de temps. Aujourd'hui, dans XD, nous avons la possibilité de concevoir et de prototyper en un seul logiciel. Ainsi, au fur et à mesure que nous concevons notre projet, nous allons également, au fur et à mesure, ainsi que les fonctionnalités d' interactivité. Maintenant, comme l'a dit un Wiseman, un voyage de mille kilomètres commence par un seul pas. Et notre parcours de conception commence par la création d'un nouveau fichier. Alors, faisons-le ensuite. 9. Créer un nouveau fichier: Tout ce que nous allons faire à partir de maintenant nous permettra de commencer à concevoir notre site. Voyons donc comment créer de nouveaux fichiers dans XD. D'abord. Vous pouvez le faire comme nous le savons déjà depuis l'écran d'accueil. Et vous avez trois façons de le faire. Vous pouvez donc cliquer sur le bouton Nouveau fichier, ce qui créera rapidement un document par défaut avec un tableau d'art par défaut. Vous pouvez utiliser l'un des tableaux d'art prédéfinis pour créer un nouveau fichier avec ce carton spécifique. Vous pouvez également simplement entrer des valeurs personnalisées pour la largeur et la hauteur pour créer un document avec un plan de travail personnalisé. Maintenant, quelle que soit l'option que vous choisissez, un nouveau fichier apparaîtra sur votre écran. Laissez-moi juste vous donner un mot de prudence ici. Si vous créez un seul fichier et pour quelque raison que ce soit, vous décidez de le fermer, vous quitterez le programme. Vous ne retournerez pas à l'écran d'accueil. Au lieu de cela, vous devrez redémarrer XD. Donc, si vous travaillez sur un fichier, vous voulez fermer, il est préférable de cliquer d'abord sur le bouton Accueil dans le coin supérieur gauche. Créez ensuite un nouveau fichier, puis fermez le fichier précédent. Cela vous permettra de maintenir le programme en cours d'exécution et d'annuler le fichier. Vous n'en avez plus besoin. Le moyen le plus rapide d' enregistrer votre fichier utilisé pour appuyer sur une combinaison clavier de contrôle plus S. Si c'est la première fois que vous le faites, une boîte de dialogue apparaîtra vous demandant de nommer votre fichier qui seront stockés dans Creative Cloud. Vous verrez la même boîte de dialogue lorsque nous déclencherons la commande Enregistrer sous en appuyant sur la combinaison de clavier Ctrl+Maj plus S, ou en utilisant l'option de menu appropriée, vous pouvez trouver dans le menu Fichier. Et les fichiers enregistrés comme celui-ci seront stockés dans Creative Cloud. Vous pouvez cependant enregistrer vos fichiers sur votre disque dur local. Pour ce faire, vous devez choisir l'option de menu Enregistrer en tant que document local. Ou vous pouvez utiliser la combinaison de touches de contrôle plus Maj plus Alt plus S. Et vous pouvez voir un message vous indiquant que l'enregistrement de votre fichier localement, nous vous laisserons utiliser une partie du options que vous obtiendriez normalement. Et c'est bon, il suffit de cliquer sur Continuer et vous pourrez enregistrer votre fichier ou un fichier que vous avez enregistré localement ne sera pas visible dans l' onglet Vos fichiers de l'écran d'accueil. Il sera cependant visible dans l'onglet récent. En passant, vous pouvez également enregistrer rapidement votre fichier dans Creative Cloud en cliquant sur le nom de votre fichier dans la partie supérieure de la fenêtre de document. Alors, tu y vas. C'est ainsi que vous pouvez créer et enregistrer des fichiers dans XD. Comme vous l'avez remarqué, tous sont livrés avec des tableaux d'art, qui sont très importants dans la conception d'écrans spécifiques. C'est pourquoi il est essentiel de comprendre comment ajouter et gérer des plans de travail, ce que nous examinerons ensuite. 10. Gérer les artboards: Désormais, il est essentiel de comprendre comment travailler avec des plans de travail pour un processus de conception rapide et fluide. Dans XD, n'importe quel document comporte au moins un tableau d'art. Bien que le plus souvent, vous voudrez en créer plus qu'un. Votre outil de tableau d'art. Nous aurons un nom par défaut en fonction de sa taille. Vous pouvez toutefois le modifier soit en double-cliquant sur son nom ci-dessus et en saisissant simplement un nouveau nom, soit en le renommant dans le panneau des couches. Puisque nous allons concevoir pour le web, notre tableau d'art doit être suffisamment grand pour accueillir des mises en page modernes et verticalement longues. Et par défaut, cette citation, tableau d'art sans citation créé dans XD sera de 1920 pixels sur 1080 pixels, ce qui n'est pas suffisant. Nous pouvons bien sûr le rendre un peu plus long. Nous pouvons donc, dans l'inspecteur des propriétés, entrer simplement une nouvelle taille ou simplement saisir le plan de travail par sa poignée inférieure et le faire glisser vers le bas. Ce qui est un peu particulier dans la gestion taille du tableau, c'est qu' une fois que certains éléments de conception ont été ajoutés, vous ne pouvez pas accéder aux propriétés du plan en activant l'outil de plan de travail. Si vous cliquez avec elle n'importe où dans la fenêtre de document, vous suffit d'ajouter un nouveau tableau d'art. Pour accéder aux options des plans de travail, utilisez l'outil de sélection et cliquez sur le nom du plan de travail ou tout simplement sur aucune sélection dans le panneau Calques. Puisque nous sommes sur le sujet de l'ajout de nouveaux tableaux artistiques, voici comment nous pouvons le faire. Nous pouvons dupliquer une carte graphique existante en appuyant sur Contrôle ou Commande si vous utilisez une combinaison de clavier Mac plus d. Et cela fera en sorte que le nouveau plan de travail soit assis côté du précédent. Avec l'outil Plan de travail sélectionné. Nous pouvons également cliquer n'importe où sur le plateau de travail pour ajouter un nouveau plan de travail. la taille de ce nouveau tableau d' art sera basée sur le modèle que vous sélectionnez dans le volet des propriétés. À l'autre bout de créer des tableaux d'art, des alliés, les supprimer pour mettre cela un peu poétique. Et c'est aussi simple que de simplement sélectionner un mot étrange et masquer la suppression ou la touche retour arrière de votre clavier. Vous pouvez également cliquer avec le bouton droit sur un sname de tableau d'art dans le panneau Calques. Et dans le menu contextuel, choisissez simplement Supprimer. Comme vous pouvez le constater, les tableaux artistiques sont un élément essentiel du processus de conception ici dans XD, chaque nouveau document sera fourni avec un, mais vous pouvez les ajouter, modifier et les supprimer à tout moment. 11. CALQUES: Le concept de couches est si courant dans le monde des logiciels de conception. C'est vraiment difficile d'imaginer un programme qui ne le mettrait pas en œuvre, moins sous une forme ou une autre. Et bien sûr, c'est la même histoire avec XD. Le panneau Calques doit être activé par défaut. Mais si vous pouvez le voir dans votre espace de travail, vous pouvez l'activer en cliquant sur l'icône des petits calques dans le coin inférieur gauche. Vous trouverez également un élément de menu appelé calques dans le menu Affichage. Il est également livré avec un petit raccourci pratique de Contrôle ou de Commande. Plus. Si vous jetez un coup d'œil au panneau Calques, vous remarquerez que le niveau supérieur de l'organisation de vos actifs est vos plans de travail. Ainsi, une fois que vous aurez cliqué sur l'un d'entre eux, vos objets seront révélés. Et chaque objet que vous créez recevra un nom générique. Basé sur sa nature. Je suis dans un objet créé avec l'outil rectangle sera appelé rectangle. Et l'objet créé avec l'outil ellipse s' appellera ellipse, etc. C'est toujours une bonne idée. Je veux dire, c'est une excellente pratique de production de renommer vos objets afin que vous puissiez ajouter une étape ultérieure du processus de conception. Reconnaissez facilement des éléments spécifiques au sein de votre projet. Une autre bonne pratique de production consiste à regrouper des éléments similaires , puis à renommer le groupe de manière à ce que leurs noms indiquent ce qui est mis à l'intérieur. Vous pouvez renommer un objet ou un groupe en double-cliquant sur le nom d'un élément donné ou en cliquant avec le bouton droit de la souris et en sélectionnant Renommer. Et bien sûr, vous pouvez facilement supprimer un calque en appuyant sur l'une des touches Supprimer ou Retour arrière de votre clavier, ou en cliquant avec le bouton droit de la souris et en sélectionnant l'option Supprimer. Vous pouvez également dupliquer un élément en choisissant l' option de duplication dans le menu contextuel. Par conséquent, en cliquant avec le bouton droit de la souris sur cet élément ou en utilisant la combinaison de clavier Control ou Command plus d. Dans le panneau Calques, vous pouvez gérer tous vos tableaux, groupes et éléments artistiques. manipuler est un élément très important du processus de conception. C'est donc une bonne idée de vous familiariser avec le panel. Surtout qu'une fois que nous commencerons à concevoir notre projet, nous nous référerons très, très souvent au panel. 12. Aperçu des outils: Examinons maintenant rapidement les outils dont vous disposez dans Adobe XD. Maintenant, nous n'allons pas les examiner en détail pour l'instant. Nous le ferons une fois que nous commencerons le processus de conception, mais nous découvrirons rapidement ce que vous pouvez en faire. Le panneau Outils se trouve sur le côté gauche de l'espace de travail. Comme nous l'avons déjà mentionné brièvement, chaque outil est nommé de manière à ce qu'il soit facile de deviner simplement ce qu'il fait. Nous avons donc d'abord eu l'outil Select. Pour déplacer un objet. Tout d'abord, vous devez le sélectionner. Et vous pouvez le faire avec l'outil Sélectionner. Mais cela fait encore beaucoup plus que cela. Ce n'est pas le moyen le plus rapide de redimensionner et de faire pivoter vos objets. Pour ce faire, il suffit de déplacer le curseur près des objets sélectionnés, d' ancrer les points, de cliquer et faire glisser le curseur pour commencer cette transformation. Et avec cet outil, vous pouvez également modifier la rondeur des courbes. À l'intérieur d'un objet sélectionné. Vous verrez de petits marqueurs ronds. Cliquez donc sur l'un d'eux et faites-le glisser pour arrondir tous les coins à la fois. Vous pouvez également cliquer et appuyer sur Alt ou Option et faire glisser le curseur pour arrondir uniquement le coin sélectionné. En outre, l' outil Sélectionner vous permet de contrôler et de vérifier les distances entre les objets. Il suffit de sélectionner les objets en question, puis d'appuyer sur la touche d'option Alt pour voir les guides et les mesures indiquant que les distances entre les objets sélectionnés et le tableau d'art sont visibles. Ensuite, nous avons eu l'outil Rectangle et Ellipse. Et je parle d'eux ensemble parce qu'ils fonctionnent essentiellement de la même manière. Bien sûr, l' outil Rectangle vous permet de créer des rectangles et l'outil Ellipse, ellipse, sur la façon dont vous pouvez créer ces formes est fondamentalement le même. Si vous appuyez simplement sur la touche Maj et maintenez-la enfoncée, vous allez créer une ancienne ellipse parfaite, ou essentiellement des carrés. Si vous appuyez sur la touche Alt et maintenez-la enfoncée, vous commencerez la transformation de la création à partir du point central. Ensuite, nous avons eu l'outil polygone. Et vous pouvez utiliser les mêmes modificateurs de clavier pour créer des triangles, des carrés, des pentagones, etc. La principale différence est que vous pouvez appuyer sur les touches fléchées haut ou bas pour augmenter ou diminuer le nombre de côtés. Avec l'outil Polygone, vous pouvez également créer des formes en étoile. Ainsi, pour transformer une forme de polygone en magasin, vous devez cliquer et faire glisser l'étoile que Rachel a manipulée dans le coin supérieur droit de la forme. Faites-le glisser vers l'intérieur et modifiez le nombre de côtés. Ensuite, nous avons l'outil de ligne. Par conséquent, si vous cliquez et faites glisser simplement, vous allez créer une ligne droite. Et si vous maintenez la touche Maj enfoncée, vous créerez une ligne par incréments de 45 degrés. Si vous maintenez la touche Alt enfoncée, vous redémarrerez le processus de création à partir du point central. Ensuite, nous avons eu l'outil stylo. Et l'outil Plume comme la fameuse bataille. C'est l'un de ces outils que vous connaissez, il faut vraiment l'utiliser pour comprendre ses avantages. C'est de l'apprentissage, c'est peut-être un peu difficile, mais il y a certaines choses que nous pouvons faire ou comprendre pour faciliter un peu ce processus d'apprentissage. Ici, dans XD, vous pouvez le rendre actif soit en cliquant sur son icône dans le panneau Outils, soit appuyant simplement sur la touche P de votre clavier. Donc, pour vous faciliter les choses, n'oubliez pas que vous pouvez cliquer pour créer des lignes droites connectées. Vous pouvez cliquer et faire glisser le curseur pour créer des courbes. Vous pouvez cliquer , puis cliquer et faire glisser. Pour combiner des lignes droites avec des courbes. Vous pouvez utiliser l'outil plume lorsque vous avez besoin de formes personnalisées qui vous permettent de ne pas créer avec aucun autre outil disponible. Ensuite, nous avons l'outil de texte. Et bien sûr, la gestion du texte est l'une des compétences clés. Vous en aurez besoin lorsque vous travaillez sur vos créations. Et il y a essentiellement deux façons de fonctionner cet outil. Vous pouvez donc d'abord cliquer pour ajouter une seule ligne de texte ou un seul mot. Et cela fonctionne mieux lorsque vous souhaitez simplement ajouter un texte de logo, un lien ou un texte similaire à un texte artistique. Vous pouvez également cliquer et faire glisser le curseur pour créer un champ de texte. Donc, si vous avez besoin de paragraphes de texte, cette façon serait votre meilleure option. Malheureusement, dans XD, nous ne pouvons pas créer de champ de texte et simplement utiliser une option qui nous permettrait de remplir le champ avec du texte fictif, comme certains textes Lorem Ipsum. Au lieu de cela, nous devrions utiliser un plugin pour cela, mais nous en parlerons plus tard. Ainsi, une fois que notre texte artistique est défini, vous pouvez toujours l'ajuster. Vous pouvez simplement double-cliquer à l'intérieur pour entrer un nouveau texte. Vous pouvez également faire glisser la poignée inférieure pour modifier rapidement la taille de ce texte. Si vous faites glisser les poignées du texte du paragraphe, vous modifierez la taille du champ de texte, non le texte lui-même. Maintenant, gérer la saisie x D à l'aide de l'outil de texte n'est qu' une pointe de l'iceberg. Nous examinerons le sujet de plus près. Une fois que nous sommes arrivés au stade de la conception de ce cours, nous avons également l' outil de tableau d'art et, comme nous le savons déjà, chaque nouveau document que vous créez sera accompagné d'un plan de travail. Malheureusement, vous ne pouvez pas définir nombre de plans de travail souhaités lors de la création d'un nouveau fichier, mais vous pouvez les ajouter et bien sûr les supprimer ultérieurement à l'aide de l'outil Plan de travail. Et vous vous demandez peut-être pourquoi vous auriez besoin plus de plans de travail dans un seul document. Eh bien, dans XD, les plans de travail peuvent simuler des expériences et des écrans. Une expérience serait donc votre conception placée sur un tableau d'art, simulant un téléphone portable ou une tablette. Et un écran serait une instance de votre mise en page dans le même design, comme une sous-page de blog, une page à propos de nous, etc. Et vous pouvez assimiler tous ceux avec des plans de travail. Le moyen le plus simple d' ajouter un tableau d'art consiste donc cliquer avec l'outil Plan n'importe où sur votre planche à pâte. Et si vous cliquez au-dessus du tableau de commandes existant, le nouveau tableau y sera ajouté. Si vous cliquez sur la droite, le nouveau plan de travail apparaîtra à droite et ainsi de suite. Ensuite, dans l'inspecteur des propriétés, vous verrez tous les paramètres prédéfinis disponibles que vous pouvez utiliser pour créer votre nouveau plan de travail. Il suffit donc d'en sélectionner un , puis de cliquer n'importe où dans votre document pour créer un tableau d'art basé sur ce préréglage. Comme vous le savez déjà, vous pouvez rapidement voir un accès à vos tableaux artistiques dans le panneau Calques. Et tous obtiendront des noms génériques qui peuvent y être modifiés. De plus, lorsque vous appuyez sur une petite icône de type tableau d'art à gauche du sname du tableau d'art. Vous y serez dirigé et vous pourrez commencer à y ajouter vos éléments de conception. Ensuite, nous avons eu l'outil de zoom. Et avec cet outil, vous pouvez effectuer un zoom avant ou un zoom arrière sur une zone spécifique. Ainsi, avec cet outil actif, il suffit de cliquer une fois pour zoomer, alterner, cliquer une fois pour effectuer un zoom arrière ou cliquer et faire glisser pour indiquer une zone sur laquelle vous souhaitez zoomer. Puisque nous parlons de zoom, voici quelques raccourcis pratiques que vous voudrez peut-être utiliser. Par conséquent, si vous utilisez la combinaison de clavier Control plus 0, vous installerez toutes vos cartes graphiques à l'écran. Et si vous appuyez sur Contrôle plus un, vous réglez le niveau de zoom sur 100. Si vous utilisez la combinaison Control plus deux claviers, vous définissez le niveau de zoom sur 200. Et si vous appuyez sur la combinaison Ctrl plus trois claviers, vous ne définissez pas le niveau de zoom sur 300, mais il effectuera un zoom avant et centré sur un objet sélectionné. D'ailleurs, si vous souhaitez passer rapidement mais temporairement à l'outil de zoom, appuyez sur la touche Contrôle ou Commande et maintenez-la enfoncée si vous êtes sur un Mac plus barre d'espace. Cela vous permettra de zoomer sur une zone sélectionnée. Et si vous y ajoutez la touche Alt ou Option, vous pourrez effectuer un zoom arrière. Les outils disponibles ne sont pas tous affichés dans le panneau Outils. Par exemple, l'outil à main. Si vous appuyez sur la barre d'espace et maintenez-la enfoncée, vous l'activerez. Ensuite, si vous cliquez et faites glisser le curseur, vous pouvez déplacer l' espace de travail. Il existe également l'outil pipette, qui vous permet de saisir une valeur de couleur depuis n'importe où dans votre espace de travail. Et la seule chose dont vous devez vous souvenir c'est qu'avant de pouvoir l'activer, vous devez sélectionner d'autres objets. Parce que si vous n'appuyez pas sur le QI, n'initialiserez pas la pipette. En bref, l'outil Pipette vous permet d'ajouter rapidement une couleur personnalisée à l'objet sélectionné. Cependant, ce n'est pas le seul moyen d'utiliser l'outil pipette. Chaque fois qu'un objet est sélectionné dans l'inspecteur des propriétés, vous verrez une petite icône pipette collée aux options de remplissage et de bordure. Il suffit de cliquer sur l'icône et vous pourrez goûter toutes les couleurs que vous souhaitez. Les outils d'Adobe XD sont très simples à utiliser. Ce que vous obtenez, c'est essentiellement ce qui est essentiel dans un scénario de conception typique. Et cette simplification signifie que si vous souhaitez effectuer des opérations plus avancées telles que des chemins de jointure ou des objets, vous devrez utiliser l'inspecteur des propriétés ou les plugins, dont nous parlerons. suivant. 13. Ajouter et gérer des plugins: Si vous n'êtes pas familier avec le concept de plugins, voici ce que vous devez savoir. Les plugins sont donc essentiellement de petites applications qui élargissent les fonctionnalités standard de XD. Vous pouvez les installer, les désactiver ou les désinstaller. Bien sûr, ils facilitent grandement la vie de votre design. Par exemple, vous pouvez ajouter des images gratuites ou payantes à votre projet. Vous pouvez ajouter des éléments d'interface utilisateur tels que des icônes, des boutons , des curseurs, des morceaux de texte, toutes ces choses. Vous pouvez même ajouter des modèles de blocs entiers. La page À propos de moi est une page d'accueil. Vous pouvez également ajouter des ressources personnalisées telles que des illustrations. Vous pouvez trouver de l'inspiration couleur, générer du code HTML et CSS, et bien plus encore pour gérer les plugins, XD utilise l'application de bureau Creative Cloud. Une fois que vous avez sélectionné les plugins, puis parcourez les plugins ou les plugins gérés si vous préférez. Vous verrez que cette application apparaîtra. Lorsque vous ouvrez cette application, de cette façon, elle se transforme essentiellement en navigateur de plug-ins. Notez donc que par défaut, vous verrez des plugins pour tous les programmes. Mais vous pouvez vérifier la marque XD sur la gauche. Vous allez donc simplement voir les plugins créés uniquement pour cette application. Et sur la droite, vous verrez tous les plugins disponibles. suffit donc de cliquer dessus pour installer rapidement ce plug-in. Et bien sûr, si vous n'êtes pas sûr ce que fait ce plugin spécifique, vous pouvez simplement cliquer n'importe où dans la voiture pour voir plus de détails à ce sujet. Ainsi, une fois le plugin installé, il sera visible à la fois dans le menu des plugins et dans le panneau Plugins. Donc, une fois que vous n' avez plus besoin ou simplement, vous n'aimez pas ce plugin spécifique. Vous pouvez le désactiver ou le désinstaller. Pour ce faire, revenez à votre navigateur de plugins. Juste pour trouver le plugin dont vous n'avez plus besoin, et cliquez simplement sur l'icône des trois petits points en bas, et vous aurez les options de désactivation ou de suppression de ce plugin. Les plugins sont un excellent moyen d' étendre les capacités de XD est conçu. Et avec le temps, vous trouverez certainement ceux qui vous plairont le plus et ceux dont vous aurez besoin presque tous les projets de conception. 14. Plugins que vous avez le plus de chances d'utiliser dans vos conceptions: Eh bien, j'ai déjà mentionné que les plugins vous permettent d' étendre les capacités XD de nombreuses façons. Jetons maintenant un coup d'œil à ceux que je recommanderais de vous familiariser au moins. Au fait, tous les plugins que je vais mentionner. Maintenant, vous pouvez simplement les télécharger gratuitement. Ils sont tous gratuits. Vous pouvez les installer depuis le x, ce plugin, donc Repository. Le premier est donc celui d'une icône pour le design. Et celle-ci vous permet d' ajouter différentes icônes à vos mises en page. Et je dois dire que je ne peux pas imaginer un projet de conception Web dans lequel vous auriez besoin d'utiliser des icônes, en particulier pour les liens de médias sociaux, des choses comme ça. Il est donc souvent un peu fastidieux de rechercher les bonnes icônes , puis de les ajouter à la mise en page. Et c'est là que ce plugin entre en jeu. Pour rechercher des icônes, il suffit de saisir n'importe quel mot clé que vous voulez. Et vous verrez une liste de diagonales correspondantes à partir de diverses icônes gratuites, référentiels. Et une fois que vous avez trouvé ce que vous cherchiez, il suffit de cliquer dessus et cette icône apparaîtra sur votre tableau d'art. Et bien sûr, toutes ces icônes sont modifiables afin que vous puissiez modifier leur couleur, leur taille, leur rotation, etc. La prochaine est donc appelée maquette rapide. Et il vous permet de créer rapidement des mises en page à l'aide d'un seul élément de conception ou même d'un modèle entier. abord, il vous suffit de choisir un thème pour votre maquette. Une fois cela fait, vous verrez trois bibliothèques distinctes. Le premier est donc des éléments qui contiennent des icônes, boutons, des étiquettes et des choses comme ça. Le suivant s' appelle les ressources avec les illustrations, les graphiques et les formes. Et le dernier s' appelle des modèles. Et celui-ci contient motifs de blocage pour des pages individuelles telles que la page d'accueil, la page de blog, la page À propos de nous ou la page de contact. Il vous suffit donc de cliquer sur n'importe quel élément pour le placer sur votre tableau d'art. De cette façon, vous pouvez facilement créer des sections dans votre mise en page, mais également conserver des pages et simplement visualiser rapidement à quoi ressemble votre conception. Eh bien, ce plugin est également un moyen fantastique de construire vos filaires, qui ne sont pas familiers avec le concept de filaires. Ils sont comme représentations très schématiques de vos éléments de mise en page. Et ils vous permettent simplement de visualiser le design et de les présenter au client d'une manière très, très, très simplifiée. Juste pour se concentrer d'abord sur les flux utilisateur plutôt que sur les couleurs, les polices, les images, etc. Maintenant, à des fins de cadrage, je suggère d'utiliser des modèles à partir du thème minimal. Ils sont dépouillés de couleurs. Ils ont l'air très épurés. J'ai besoin d'être assez élégant. Ainsi, votre client peut comprendre votre vision comme l'ensemble de l'expérience utilisateur. Il est donc plus important de comprendre cela plutôt que les éléments artistiques de votre design. Et ajouter des modèles comme des modèles entiers ne signifie pas que vous ne pouvez pas les modifier d'une manière que vous le souhaitez. Vous pouvez toujours ajouter des ressources différentes ou supprimer les éléments dont vous n'avez pas besoin. Je pense juste que l'ajout d'un ensemble de modèles vous aidera à comprendre tout le concept de cadrage filaire et à rendre le processus de construction de ces flux utilisateur schématiquement beaucoup plus rapide et plus facile. Donc le prochain plugin que j' aime vraiment s'appelle UI Faces. Presque tous les aspects commerciaux ont une section où ils présentent des membres de l'équipe ou des témoignages. Ces sections sont généralement accompagnées de cartes contenant une photo et une brève description. Et ce plugin est absolument génial générer et ajouter des photos d'avatar dans ces situations. La façon dont il fonctionne est extrêmement simple. Par conséquent, vous devez d'abord créer une forme, pas un groupe, et non pas un groupe, et la sélectionner. Et ce sera comme un conteneur pour l'image. vous suffit ensuite de choisir le référentiel vous souhaitez utiliser et cliquer sur Appliquer au hasard si vous travaillez uniquement sur une version maquette de votre conception. Cela permet d'extraire une image de la base de données des référentiels et de coller directement à l'intérieur de votre mise en page. Et vous n'avez même pas besoin de redimensionner ou d'ajuster quoi que ce soit. Le plugin fera tout le poids lourd pour vous. Bien sûr, vous ne vous limitez pas à certaines photos aléatoires. Parfois, lorsque vous voulez ajouter une photo d'une femme, vous allez voir au hasard une photo d'un homme et vice versa. Et c'est peut-être un problème. C'est pourquoi vous pouvez utiliser l'option Sélectionner des photos pour choisir une image que vous aimez une nouvelle fenêtre qui apparaîtra. Dans la nouvelle fenêtre, vous verrez beaucoup de photos de portrait aléatoires. Malheureusement, vous ne pouvez pas modifier le référentiel à partir duquel les images sont extraites. Donc, si vous n'aimez aucune de celles que vous voyez, vous devrez revenir en arrière et sélectionner une autre source d'images. Toutefois, si vous aimez une photo spécifique et que vous souhaitez l'ajouter, il suffit de sélectionner et d'appuyer sur Appliquer. Et cette photo sera ajoutée au conteneur d'images sélectionné. Le prochain s'appelle Lorem Ipsum, qui est un nom très générique pour un plugin très générique. Et je dois dire que l'ajout taxes factices est quelque chose de si courant dans un scénario de conception typique. Je suis vraiment très surpris. Il est vraiment difficile de croire que dans XD, nous n'avons pas de fonctionnalités natives pour cela. C'est pourquoi nous devons utiliser un plugin comme Lorem Ipsum. Il fonctionne de la même manière que les faces de l'interface utilisateur, comme dans. Vous devez d'abord sélectionner un rectangle pour pouvoir ajouter du texte aléatoire. Et une fois cela fait, vous pouvez choisir d'ajouter un morceau de Lorem ipsum, ou ouvrir une nouvelle fenêtre en sélectionnant Remplir avec un espace réservé. Et les textes d'édition seront entièrement personnalisables. Vous pouvez modifier sa taille, couleur de la famille de polices, la hauteur de ligne, etc. Le suivant s' appelle Pexels, et il vous permet de rechercher dans le référentiel Paxos.com des images libres. Et c'est l'un des sites Web les plus populaires où vous pouvez trouver. Maintenant, nous avons des photos de haute qualité et gratuites sur n' importe quel sujet. Ainsi, une fois le plugin installé, vous pouvez simplement saisir votre mot clé, sélectionner une forme ou ajouter une image, puis cliquer simplement sur l'image sélectionnée pour l'ajouter. Et comme pour les faces de l'interface utilisateur, forme que vous avez sélectionnée fonctionnera essentiellement comme un cadre d'image qui restreindra l'image ajoutée. Le prochain s' appelle donc OnDraw. Et c'est absolument l'un de mes plug-ins préférés car l'Android lui-même, ce référentiel, vous permet de rechercher des illustrations personnalisées d' apparence professionnelle. Et dans de nombreux designs modernes, vous remarquerez des illustrations personnalisées dans les sections héros nos sections et de presque toutes les autres sections. Je pense que ces illustrations ont beaucoup de personnalité aux mises en page web. Et les illustrations que vous trouverez ici sont gratuites et même sans attribution. Et vous pouvez les utiliser dans vos projets personnels et commerciaux. vous suffit donc de saisir un mot clé si vous recherchez quelque chose de spécifique, bien sûr. Il suffit ensuite de cliquer sur l'une des illustrations pour la télécharger dans votre presse-papiers. Il ne sera pas ajouté directement à votre tableau d'art une fois que vous aurez cliqué sur cette illustration. Mais une fois qu'il est téléchargé et qu'il se dans votre presse-papiers, vous pouvez simplement coller n'importe où vous le souhaitez sur votre tableau d'art. De plus, vous pouvez sélectionner une couleur principale pour correspondre à l'illustration avec le jeu de couleurs de votre mise en page. Ce sont les plugins les plus courants que vous pourriez vouloir utiliser dans X d. Il y a certainement beaucoup plus à choisir, mais c'est à vous d'explorer et de décider lesquels vous aurez besoin et de ceux dont vous aurez besoin. va sauter. Celles que je vous ai montrées ici vous aideront certainement à ajouter des éléments personnalisés tels que des images, icônes et des textes, qui sont essentiels dans toute conception de mise en page. 15. Comment utiliser les ressources du document: Nous avons déjà parlé de l'utilisation de calques et de plugins dans XD et dans le coin inférieur gauche de la fenêtre principale, vous trouverez également des bibliothèques. Au sein de ceux-ci se trouvent vos ressources de documents. Et ici, vous trouverez les touches des polices manquantes. S'il y a des polices, polices se gâtent dans votre document. Vous verrez les noms de vos polices qui ne sont pas installées sur votre système, mais elles sont utilisées dans le document. Vous trouverez également les couleurs avec les codes couleur utilisés dans votre document. Vous aurez ensuite des styles de caractères avec des familles de polices dans des couleurs et des tailles spécifiques. Vous verrez les composants contenant les sections de votre mise en page. Nous trouverons également des vidéos contenant des vidéos utilisées dans votre document. Ainsi, un clic droit sur chacune de ces ressources permet d'afficher un menu contextuel légèrement différent qui vous permettra d' effectuer différentes actions. Par exemple, si vous cliquez sur la ressource de polices manquantes, vous trouverez une option de remplacement de police qui vous permet de remplacer les fonds manquants dans votre document. Bien sûr, vous pouvez le faire avec une police différente. Et une fois cela fait, l'onglet Polices manquantes disparaîtra des ressources du document. Vous verrez également un surlignage sur Canvas, ce qui vous permettra de trouver rapidement les ressources spécifiques de votre document. Vous trouverez également une couleur de remplissage appliquée ou une couleur de bordure. Si vous cliquez avec le bouton droit sur un, sur une couleur ajoutée aux ressources de vos documents. Et cela vous permettra simplement d'ajouter cette couleur sous forme de bordure ou de remplissage à un élément sélectionné. Et bien sûr, en plus de cela, nous pouvons effectuer plus d' options standard ici comme renommer, supprimer ou simplement regrouper. Donc, ce que vous devez vraiment savoir sur les ressources Document à ce stade, c'est que ce panneau est un excellent moyen d'organiser simplement votre projet et tout ce que vous y avez. Parfois, surtout lorsque vous créez un design qui nécessite beaucoup de pages, de couleurs, de polices, de composants différents , le travail rapide et efficace peut devenir un peu difficile. Vous savez, il sera difficile de contrôler tous les actifs que vous avez dans votre document. Et le panneau Ressources du document vous aidera certainement à maintenir votre projet aussi cohérent que possible. 16. Introduction rapide aux systèmes de conception dans Xd: Les systèmes de conception sont un excellent moyen de rendre votre conception et cohérente, non seulement dans toutes ses parties, mais ils aident également autres membres de l'équipe à garder les mises en page logiques. Et ils peuvent être assez élaborés et accompagnés d'une documentation complète sur chaque aspect de n'importe quelle pièce de design que vous pourriez concevoir également à l'avenir. Mais pour nos besoins, gardons les choses simples. Ainsi, pour créer vos propres systèmes de conception, vous pouvez utiliser ces outils et stocker les éléments de conception. Vous pouvez utiliser les ressources Document. Dans un système de conception typique, vous aurez les couleurs primaires et secondaires. Vous auriez la typographie des en-têtes et du corps du texte. Et vous auriez également divers composants tels que des boutons, des listes, des icônes, etc. J'ai donc rapidement assemblé un système de conception simple, simple et très simple qui contient ces éléments. Bien sûr, vous pouvez ajouter autant d'éléments que vous le souhaitez. Mais l'objectif principal de cet exercice est de comprendre ce que je conçois un système et comment utiliser les ressources Document pour le gérer. Ce que j'ai fait ici, c'est que j'ai d'abord ajouté des rectangles simples et je les ai remplis de couleurs que j'utilise dans mon projet. J'ai ensuite ajouté des éléments de typographie tels que des en-têtes et du corps de texte. Bien sûr, en utilisant la police que j'utiliserais normalement dans mon projet. Enfin, avec l'aide du plug-in de maquette rapide, j'ai ajouté des composants tels que des étiquettes et des boutons. Ainsi, une fois que les éléments de conception sont prêts, vous pouvez les ajouter à vos ressources de documents, et le processus est très simple. Il vous suffit de sélectionner les éléments que vous souhaitez ajouter aux ressources du document. Cliquez ensuite sur le petit symbole plus en regard du nom de l'onglet. Par exemple, les couleurs, les styles de personnages , les composants, les vidéos, etc. Et le panneau Actifs de document sera complété par le, avec les éléments que vous pouvez réutiliser dans votre conception. Ainsi, lorsque nous passons à la partie design de ce cours, nous créerons des éléments de conception pour notre mise en page. Et au fur et à mesure, nous ajouterons les couleurs, la typographie et d'autres éléments que nous conserverons dans le panneau Actifs du document. Les systèmes de conception sont une excellente fin. La plupart du temps, un moyen essentiel de maintenir la cohérence de votre conception tout au long de ses itérations et à toutes les étapes. Ils ne doivent pas nécessairement être très élaborés, mais ils doivent contenir au moins les informations sur les couleurs et les polices que vous utilisez dans votre projet. Cela va simplement vous aider à gagner beaucoup de temps lors de la création de vos mises en page. 17. Comment choisir les bonnes couleurs pour vos conceptions: Choisir le bon jeu de couleurs pour votre prochain design Web est, je suppose, avec la topographie, le plus important à réaliser. Les couleurs que vous choisissez seront la première chose qui attirera l'attention du visiteur. Et si elle est choisie correctement. Et ils ne feront tout simplement pas mal aux yeux. Et ils ne feront pas rapidement chercher ça à leurs doigts. Sortez-moi d'ici. Vaste bouton. Il y a toute une théorie derrière la signification des couleurs, mais je ne pense pas qu'à ce stade, il soit essentiel de discuter. À mon avis, la seule règle de base que vous devriez suivre la sienne de manière appropriée. Tout ce que vous devez faire est de penser que la couleur que vous avez choisie est adaptée au type de service ou d'entreprise que vous concevez. Et puis réfléchissez-y. Les roses ou les jaunes de David seraient-ils bons sur un site pour les avocats sont des architectes et les verts foncés sont excellents pour la convivialité ou l'énergie d'un jardin d'enfants ou de parcs d'attractions. Donc, à moins que vous ne choisissiez une stratégie marketing intelligente et risquée ici, la réponse est évidente. Une chose est donc appropriée. Mais qu'en est-il de trouver un jeu de couleurs pour votre design ? Maintenant, cela fonctionne simplement. Heureusement, de nos jours, vous pourriez être totalement coloré, ignorant et toujours proposer de magnifiques palettes de couleurs. Imaginez un scénario dans lequel vous avez un client qui a besoin d'un site Web et qu' il vous dit que l'orange brûlé est la couleur de son choix maintenant, ils l'adorent. C'est une couleur facile à associer. Mais vous pouvez commencer par saisir la roue chromatique et vérifier quel est le contraste dans les couleurs de l'orange. Et par contraste, je veux dire, assis de l'autre côté de la roue chromatique. Dans ce cas, vous pouvez voir que les violettes, les bleus et les verts, les verts plus foncés, constitueraient une bonne base pour votre palette de couleurs. Mais cela peut être encore plus facile que cela. Vous pouvez simplement Google palette de couleurs orange brûlé et simplement voir les résultats de l'image que vous obtenez. Et croyez-moi, vous obtiendrez beaucoup de choses. Une fois que vous avez trouvé quelque chose qui vous plaît, vous pouvez simplement copier l'image et l'introduire dans XD. Vous pouvez maintenant échantillonner les couleurs et les ajouter aux ressources Document. Alors, faisons-le maintenant. Ainsi, une fois que cette palette de couleurs est collée, nous pouvons créer un rectangle dont la largeur sera plus ou moins la même qu'une couleur, une nuance de couleur. Et maintenant, nous pouvions simplement copier et coller le rectangle plusieurs fois, juste pour que le nombre de formes soit égal au nombre de couleurs de la palette. Mais il y a une meilleure solution à ce sujet. Nous pourrions simplement utiliser la grille de répétition pour cela. Et cette fonction permet de créer une grille de plusieurs instances de l'objet sélectionné. Pour créer une grille, il suffit de sélectionner le rectangle puis de cliquer sur l'option de grille de répétition. Il suffit ensuite de faire glisser la poignée droite pour créer plus d'anastomose du rectangle. Si vous placez ensuite votre curseur n'importe où entre les rectangles, vous pourrez contrôler l' espace entre les objets. Une fois que tout est terminé, il suffit d'appuyer sur le bouton de dissociation remplacer la grille de répétition. Et maintenant, nous pouvons saisir chaque rectangle, appuyer sur la touche I du clavier pour initialiser l'outil Pipette et échantillonner toutes les couleurs que vous pouvez ajouter aux ressources du document. Je pense que c'est le moyen le plus simple de trouver d'abord la bonne palette de couleurs pour votre projet , puis de la transformer en acides de vos documents. Cependant, si vous souhaitez créer des palettes plus personnalisées, il y a tellement d'endroits et d'outils que vous pouvez utiliser et nous en parlerons ensuite. 18. 5 outils pour trouver les couleurs appropriées pour vos mises en page: Vous savez ce qu'est la toile, essaim et avec des outils qui vous aident à trouver les bonnes couleurs pour votre prochain design. Et certains d'entre eux sont utiles. Certains d'entre eux sont plus déroutants qu'utiles. Voici donc la liste des outils qui, selon moi, fonctionnent simplement. Donc, le premier sur notre liste est celui des refroidisseurs. Donc, pour moi, Cooler dit décider d'y aller chaque fois que j'ai besoin d'une palette de couleurs intéressante générée automatiquement. Et c'est le premier outil que vous pouvez choisir dans le menu Outils en haut à droite. Pour générer une palette, il suffit d'appuyer sur la barre d'espace et chaque fois, vous obtiendrez un résultat complètement différent. Toutefois, si vous aimez une seule couleur et que vous souhaitez l'utiliser, vous pouvez copier le code hexadécimal. Mais si vous souhaitez générer une palette entière autour de celle-ci, il suffit de la verrouiller en appuyant sur une petite icône de cadenas. Vous le verrez une fois que vous survolez un échantillon de couleur donné. Une fois qu'il est verrouillé, vous pouvez appuyer à nouveau sur la barre d'espace pour modifier uniquement les couleurs non sélectionnées. Et bien sûr, ils correspondront à celui que vous avez choisi, celui que vous gardez verrouillé. Si vous aimez la palette de couleurs, vous pouvez l'exporter en appuyant sur le bouton Exporter en haut à droite. Et cela ouvrira une nouvelle boîte de dialogue avec une pléthore de formats d'exportation. L'un d'entre eux est la propre ASE d'Adobe, qui signifie Adobe Swatch Exchange, qui vous permet d'importer des palettes de nuances. Malheureusement, XD ne prend pas en charge cette fonctionnalité. Je recommande donc simplement d'exporter le palais sous forme d'image et de créer des bibliothèques de nuances dans XD. Si vous choisissez l'image comme méthode d'exportation, une autre fenêtre vous demandera de fournir un nom pour votre nouvelle palette. Il deviendra essentiellement le nom de fichier de vos images. Une fois que vous l'avez enregistrée sur votre ordinateur, vous pouvez ensuite importer l'image avec les palettes de couleurs dans vos projets XD. Le cours est livré avec d' excellents outils de sélection des couleurs. Parmi eux. Je pense que j'ai le plus aimé les palettes Explore. Ici, vous trouverez de nombreuses palettes de couleurs prêtes à l'emploi pour vous inspirer. Vous pouvez également trouver une palette en recherchant un nom de couleur spécifique, code hexadécimal ou même un sujet. Les refroidisseurs que le charbon pourrait vraiment être le seul endroit à visiter pour obtenir tout ce dont vous auriez besoin. En termes de génération de palettes de couleurs ou de couleurs uniques, d' échantillons ou de dégradés, etc. Mais bien sûr, il y a aussi d'autres sources qui méritent d'être visitées. L'un d'eux s'appelle le point Color. Et celle-ci est vraiment amusante. Vous pouvez rapidement créer un jeu de couleurs à l'aide de votre souris ou de votre pavé tactile. Il suffit donc de faire glisser la souris vers la gauche ou la droite pour changer la teinte et faire glisser vers le haut ou vers le bas pour modifier la légèreté. Vous pouvez également faire défiler vers le haut ou bas pour modifier la saturation. Donc, si vous êtes satisfait de la couleur, cliquez pour l'enregistrer et répétez le processus avec une autre couleur. Et l'outil ne vous montrera que les couleurs qui fonctionnent bien avec celle que vous avez choisie auparavant. Et bien sûr, vous pouvez répéter le processus autant de fois que vous le souhaitez. En ce qui concerne l'exportation dans vos couleurs, je suppose qu'il serait préférable de simplement enregistrer votre écran, puis de le copier dans votre projet XD car cet outil n'est pas livré avec l'exportation de fonctionnalités telles que colors.com. Le suivant est appelé appétissant. Et ici, vous pouvez choisir votre propre couleur ou simplement cliquer sur le bouton d'aversion. Le programme choisit donc cette couleur pour vous. Et si cela vous plaît, cliquez sur le bouton J'aime et voyez si la couleur suivante supposons que la couleur précédente corresponde à vos goûts. Bien sûr, vous pouvez également supprimer une couleur particulière pour réduire la palette entière. Le prochain n'est donc pas comme une application Web, mais c'est un plugin XD et il s'appelle couleurs dans la portée. C'est vraiment un petit outil fantastique qui aide et les informations que vous pouvez trouver ici sont fondamentalement inestimables. Par exemple, vous pouvez parcourir la bibliothèque de palettes de couleurs prêtes à l'emploi. Vous pouvez également laisser l' IA générer des palettes de couleurs pour vous. Vous pouvez vérifier l'accessibilité de la couleur que vous la sélectionnez. Vous pouvez également générer des dégradés et des nuances dégradées. Vous pouvez également ajouter des palettes de couleurs utilisées par certaines des plus grandes marques mondiales. En gros, ce que vous pouvez faire ici, c'est que vous pouvez cliquer sur une fonctionnalité spécifique, puis ajouter simplement des couleurs. Vous pouvez également vérifier certaines informations supplémentaires fournies. Par exemple, si vous souhaitez ajouter une palette de couleurs, cliquez sur l'option Palettes de couleurs et vous verrez de nombreuses palettes de couleurs prédéfinies. Nous pouvons donc simplement copier une palette ou simplement cliquer sur une petite icône plus en haut à droite pour ajouter le palais au tableau d'art. Vous pouvez également cliquer sur le bouton Modifier cette palette pour colorer les acides. Et cette palette va bien sûr être ajoutée aux ressources de vos documents. Colors in Sport est donc un plugin fantastique. Pour ajouter et créer des palettes de couleurs. Dans une petite application, vous obtenez des tonnes d' options et d'aides. Le dernier de notre liste est donc les couleurs du Canada. Et je pense que vous avez probablement entendu parler de Canva, mais avez-vous utilisé leurs outils de couleur ? Vous pouvez vraiment créer et afficher des palettes de couleurs ici. Vous pouvez également découvrir la signification de chaque couleur choisie. Donc maintenant, tous ces outils de génération colorés ne sont que déplacés, représentation humble d'une ère de ressources de couleur que vous pouvez trouver en ligne. La plupart d'entre eux fonctionneront à peu près de la même manière. Donc, si vous trouvez simplement vos favoris, restez avec eux. C'est vraiment tout ce dont vous aurez besoin. 19. Comment choisir la police de caractères appropriée pour vos sites Web: Maintenant que vous savez comment choisir les bonnes couleurs pour vos designers, il est temps d'apprendre à choisir les meilleures polices pour eux. Mais avant de commencer, il y a une chose importante à savoir, la différence entre une police de caractères et une police. Beaucoup de gens utilisent ces termes de manière interchangeable, ce qui est faux. Et la différence est en fait très facile à comprendre. Une police de caractères est une famille de poids et de styles spécifiques. Par exemple, surfer en entrée. Et ils ont trouvé qu'il s'agit d'une instance particulière de la police de caractères. Par exemple, le support de service d'entrée. C'est facile, n'est-ce pas ? Le tout devient un peu plus compliqué lorsque vous essayez de classer les faces de type. Mais heureusement, il n'y a que quatre grandes variantes de polices de caractères. Le premier est donc le serif, qui sont des polices de caractères et comprenant des lettres avec ces petits ornements. Comme Laura Libre, Baskerville ou tout simplement le vieux Times New Roman. Il existe également des polices sans empattement, qui comprennent des lettres sans ces ornements, par exemple Open Sans, Roboto ou Montserrat. Nous avons également un empattement de dalle avec des sérifs vraiment audacieux et épais, comme une dalle ou une dalle Roboto. Et il y a aussi des polices de caractères de script qui ne ressemblent tout simplement pas à une écriture manuscrite comme Grad, Paris, Yen ou America's see. Il s'agit donc des principales catégories de polices de caractères. Mais il y en a aussi un autre qui se rapporte en quelque sorte à tous. Et je parle d' afficher des visages de type. Mais l'une des plus grandes erreurs commises concepteurs est qu'ils utilisent des polices d'affichage pour de longs passages de texte. Alors qu'ils sont destinés spécifiquement aux titres et peut-être aux sous-titres. Trop de concepteurs utilisent ces polices de caractères pour le corps du texte principal, ce qui le rend essentiellement lisible. Ce n'est pas ce que vous devriez vouloir pour vos créations. Alors maintenant, vous vous demandez probablement, d'accord, mais quelles polices dois-je utiliser ? Tout ce que nous pourrions simplement essayer de trouver les meilleures caractéristiques de polices de caractères qui devraient vous aider à trouver la police de caractères adaptée au travail. Le premier sera la lisibilité. Je veux dire, il suffit de choisir la police qui est simplement lisible. Votre site Web doit communiquer des informations très spécifiques. Bien sûr, à moins qu'il ne s'agisse que d'un projet artistique. Les gens doivent donc pouvoir lire votre message et vous ne voulez pas les rendre difficiles pour eux. Le test le plus simple consiste simplement à réduire la police à dizaine de points et vérifier si vous pouvez les instiller distinctes , les lettres simples, par exemple, e minuscules provenant d'un c minuscule. une dizaine de points et à vérifier si vous pouvez les instiller distinctes, les lettres simples, par exemple, e minuscules provenant d'un c minuscule. aussi assez souvent, la majuscule que je pourrais ressembler à des minuscules l. Général, plus de caractères ouverts seront plus visibles dans des tailles plus petites. Et si c'est le cas, ils seront bien sûr visibles en plus grandes tailles. Par exemple, dans les rubriques. Pour les en-têtes, vous pouvez désormais utiliser les polices d'affichage ou les polices de corps de texte. Bien que les sérifs et les sans serifs et même les scripts fonctionneront bien. Il s'agit plutôt de votre choix de design ici plutôt que de trouver une police parfaitement lisible. Maintenant, les titres sont généralement assez grands. Vous ne devriez donc pas rencontrer de problèmes de lisibilité. Et encore une fois, veuillez ne pas utiliser polices d'affichage pour le corps du texte. Les passages plus longs de texte nécessitent une police de caractères lisible avant tout. Deuxièmement, va bien avec vos rubriques et vos objectifs de conception. Certaines personnes ont essayé de soutenir que pour la lecture à l'écran, polices sans empattement sont meilleures et polices à empattement sont meilleures pour la lecture hors écran, comme des livres ou des brochures. Et je ne pense pas que ce soit aussi simple. Je veux dire, si une police de caractères peut être qualifiée de lisible, cela signifie qu'elle est bonne pour les écrans et les pages. Serif ou sans empattement. S'il est facile à lire, vous pouvez l'utiliser où vous le souhaitez et votre choix sera véritablement basé sur l'esthétique que vous recherchez. Avoir une selle qui existe n'importe quel type de visages que vous pouvez utiliser et assurez-vous absolument que vous avez fait le bon choix. Eh bien, je suppose, mais la méthode que vous allez apprendre vient avec un piège un peu efficace. Par conséquent, pour votre design, vous souhaitez utiliser l'une des polices Google. Et une fois que vous décidez si vous voulez des sérifs, sans serif ou des scripts, vous pouvez affiner votre recherche en fonction de la popularité, choisissant le plus populaire à droite. Cela permet de trier les polices de caractères en fonction du nombre de téléchargements à partir de la valeur la plus élevée. Les polices de caractères les plus populaires seront les premières de la liste. De plus, certains d'entre eux, comme le dernier, Open Sans ou réfutation, ont été commandés par Google et créés par des designers expérimentés, comme des designers bien établis. Vous pouvez donc être sûr que ces visages de type sont tout simplement bons. Donc, si ces polices de caractères sont les plus populaires, elles devraient être les meilleures, n'est-ce pas ? Eh bien, ils pourraient être mauvais. Ils peuvent également être fortement surutilisés. Prenons Lobster and Lobster Two, par exemple, est une police de caractères vraiment cool, mais elle a été utilisée tellement de fois qu'elle a été appelée le commutateur New Comic Sans. En même temps, c'est une indication de son succès. Et la raison de cela signifie, bien sûr, que vous ne vous limitez pas aux polices Google. Vous pouvez également visiter les polices Adobe où vous trouverez des polices d' Adobe elles-mêmes, mais également de nombreux concepteurs de types et fonderies. Vous pouvez donc cliquer sur le nom de la police de caractères. Vous aimez voir toutes les variantes disponibles. Donc, pour l'ajouter à x dy, cliquez sur Activer la police dans le coin supérieur droit. Et en fin de compte, vous verrez ces polices ajoutées à votre bibliothèque de polices dans XD. Voici donc les bases d' une bonne typographie que vous pouvez appliquer dans vos propres conceptions. Mais que se passe-t-il si vous êtes une nouvelle topographie complète et que vous ne savez pas quelle police ou police est ? Allez-y bien ensemble. Il y a deux sources que j' utilise le plus souvent chaque fois que je doute ou que j'ai juste besoin d'inspiration. Et le premier s'appelle Font Pair.co. Et ici, vous trouverez des appariements de polices, des inspirations de polices et de nombreux exemples d'utilisateurs de polices différentes. Les polices que vous trouverez ici sont directement téléchargeables. Mais vous pouvez également consulter les sites des créateurs de polices pour en apprendre un peu plus à leur sujet. L'autre source que j'utilise est appelée type woof.com. Et ce côté a beaucoup de ressources et de classifications de polices exceptionnelles, comme les meilleures polices sans serif, les polices top serif, les meilleures polices Adobe vers Google, etc. Donc, si vous avez un top serif, les meilleures polices Adobe vers Google, etc. Donc, doute, si vous avez un jour des doutes, si la police de caractères que vous avez choisi son bien, vous pouvez simplement consulter le type de .com. Je pense donc que nous avons beaucoup abordé pour trouver les bonnes polices de caractères pour vos projets. Vous connaissez maintenant la distinction entre les empattement servent de script et de caractères à empattement de dalle. Vous connaissez la différence entre affichage et la police de corps de texte. Vous savez où trouver des polices pour vos projets, et vous savez où aller si jamais vous avez des doutes quant à votre choix de police. Une bonne typographie est donc l'un des éléments clés d'une mise en page de site Web réussie. Cependant, il existe d' autres éléments qui peuvent faire ou briser un bon design. Parlons d'eux ensuite. 20. Meilleures pratiques de conception Web moderne: À chaque nouvelle mise en page Web que vous créez, vos compétences vont s'améliorer. Nous créerons plus rapidement. Vous allez prendre des habitudes saines. Mais il y a certaines choses que vous pourriez utiliser dans votre flux de travail dès le début. Et je parle des meilleures pratiques en matière de conception Web. Donc, tout d'abord, n'oubliez pas de rationaliser l'expérience. rationalisation de votre conception pour la meilleure expérience utilisateur doit être la règle de base de votre projet. Pas seulement pour les projets de conception Web d'ailleurs. Cela peut sembler dur, mais la plupart des personnes visitant un site Web que vous avez conçu ne viendront pas voir toutes les belles couleurs et polices que vous utilisez. Nous visiterons en raison d' un service spécifique fourni par le site Web. Donc, si l'utilisateur ne peut pas obtenir ce qu'il veut rapidement, il ira ailleurs. Et le cauchemar des entreprises en termes de sites Web est le taux de rebond élevé, qui signifie que les utilisateurs quittent leurs ovocytes très rapidement et n'interagissent pas avec eux comme prévu. C'est pourquoi il est si important de présenter tous les éléments et données inutiles d'une manière facilement compréhensible. Qu'est-ce que tout cela signifie dans la pratique ? C'est une bonne idée de minimiser le texte, par exemple. Créez donc des paragraphes courts, comme deux ou trois phrases, faciles à lire sur les ordinateurs de bureau et les appareils mobiles. Essayez également de ne pas utiliser plus de trois à cinq couleurs et peut-être deux autres pour les états de survol. Et évitez définitivement l'encombrement. N'oubliez donc pas de faire de chaque section une idée et d'essayer de réduire le nombre d'appels aux actions à une par section. simplicité est donc la clé pour réduire les taux de rebond. Une conception simple sera plus facile à développer et nécessitera moins de ressources à charger sur l'appareil de l'utilisateur. Ensuite, nous avons de la cohérence. Donc, une fois que vous avez trouvé vos polices et vos couleurs, il suffit de les respecter. n'y a rien de plus non professionnel que des boutons et des textes qui ont des couleurs différentes sur différentes pages de votre site. Il est donc judicieux d'utiliser les ressources Document pour conserver vos styles de texte, couleurs, composants et polices au même endroit. Nous avons également une hiérarchie visuelle, et celle-ci est étroitement liée à la notion d'utilisabilité. Si nous sommes d'accord pour dire que l' objectif principal de notre conception est d' encourager les utilisateurs à effectuer une certaine action sur le site Web. Nous devons leur faciliter la tâche. Nous pouvons donc le faire, par exemple, en utilisant correctement les couleurs, en positionnant des poids variables de police, ajoutant des boutons facilement cliquables, etc. Vous devez également vous souvenir de la convivialité des appareils mobiles. La plupart des concepteurs affirment que lorsqu' ils créent leurs mises en page, ils le font d'abord en gardant à l'esprit les versions de bureau. Je le fais comme ça moi-même. Je suppose qu'il est tout simplement plus facile de travailler comme ça au lieu de proposer d'abord la version mobile de l'interface utilisateur. Mais cela ne signifie pas que vous devez négliger les versions réactives de votre design. Maintenant, quelle est la majeure partie du trafic Web provenant des appareils mobiles de nos jours, c'est un maître absolu, en gardant à l'esprit à quoi ressemblera votre design sur les smartphones et les tablettes. Et même une préoccupation humaine d' adopter la première approche mobile, c'est-à-dire d'abord concevoir la version mobile du site Web , puis construire la version de bureau en plus de cela. Alors, qu'est-ce qui rendrait un design mobile convivial ? Le coût des données mobiles est donc toujours un problème dans de nombreuses régions du monde. Essayez d' éclairer votre design sur mobile. Cela signifie que votre site n'aura peut-être pas besoin d'autant d'images ou de vidéos. L'un d'entre eux est affiché sur un smartphone. Peut-être que le curseur ne sera pas aussi cool et efficace sur un appareil plus petit que sur un écran plus grand. De plus, il se peut que vous ayez besoin de plus d' espaces blancs ou de plus grands espaces entre les éléments. Ils sont donc plus faciles à taper. De plus, le texte peut nécessiter quelques ajustements en termes de taille, positionnement et peut-être de hauteur de ligne. Ce sont donc les éléments que vous devez prendre en compte lorsque vous rendez votre design convivial pour les mobiles. Nous avons donc également une accessibilité, qui est étroitement liée à l'ensemble de l'expérience. Les utilisateurs l' obtiennent depuis votre site. Et si vous concevez votre prospect Web en gardant à l'esprit l' accessibilité, vous devez la rendre accessible à tous les utilisateurs. Si vous souhaitez approfondir le sujet, vous devez respecter les directives d' accessibilité du contenu Web de Google. Toutefois, vous pouvez utiliser les quatre directives générales suivantes pour vous aider à comprendre ce sujet. Par conséquent, un site Web accessible serait d'abord perceptible. Les utilisateurs doivent donc pouvoir percevoir votre contenu à l'aide d'une de leurs phrases. Par exemple, les personnes atteintes déficience visuelle peuvent avoir des problèmes à voir les champs requis dans votre formulaire de contact s'ils ne sont marqués que par une bordure rouge. donc ajouter quelque chose comme un astérisque et un morceau de faut donc ajouter quelque chose comme un astérisque et un morceau de texte comme requis. De plus, les utilisateurs doivent pouvoir utiliser l'interface utilisateur d'une manière ou d'une autre. Par exemple, en cliquant sur les boutons, arrêtant ou en mettant en pause la vidéo avec certains contrôles fournis. Utiliser au moins deux formes de systèmes de navigation, comme peut-être les meilleurs navs, les liens photo ou même la chapelure. De plus, le contenu doit être compréhensible par les utilisateurs. Par exemple, le style et le positionnement du menu doivent être cohérents entre différentes pages ou vues de la page. En outre, le site doit être robuste, être robuste, ce qui signifie simplement que les panneaux doivent être compatibles avec les navigateurs actuels, mais aussi ses futures versions. Mais c'est plutôt un défi de développement Web. Et il existe certaines conventions lors de l'utilisation d'un site Web. Je veux dire, de nos jours, les utilisateurs sont très habitués à opérer sur les sites Web d'une manière spécifique. Par exemple, ils utilisaient le système de menus. Et cela inclut le menu mobile de style hamburgers qui se trouve en haut ou à gauche de la page. Ils sont habitués à voir le logo en haut gauche ou en haut au centre de la page. Et ils sont utilisés pour cliquer sur le logo. Et bien sûr, cela peut être une image ou une image plus j'ai taxé et bien sûr, cette image, ce logo, quand on clique , va les emmener à la page d'accueil. Ils comprennent également que liens ont lorsque vous les survolez ou que vous cliquez sur eux, ils vont changer leur apparence. Ils comprennent également une navigation collante, qui apparaît essentiellement lorsqu'un utilisateur marque un score, faites défiler cela vers le bas sur la page. Et ils comprennent également quelque chose comme un motif de sac à haut qui apparaîtra lorsque l' utilisateur fait défiler la page. Et c'est alors qu'un clic va les amener en haut de la page. Toutes ces règles peuvent sembler au début comme une limitation énorme du processus créatif. Mais je pense qu'il y a beaucoup de place pour concevoir mises en page originales tout en les rendant faciles à comprendre pour les utilisateurs. 21. Préparer à commencer à concevoir: Puisque je suppose que vous êtes un concepteur web en herbe, et bien sûr le prochain utilisateur D. J'ai pensé que ce serait une bonne idée de créer un design qui mettra simplement en valeur vos compétences. Et vous pouvez utiliser la mise en page que vous allez finalement créer ici comme base pour votre propre site Web. Si vous souhaitez devenir concepteur, freelance ou éléments de portefeuille. Si vous souhaitez trouver un emploi en tant que concepteur Web. C'est pourquoi nous ajouterons les éléments et les sections les plus courants dans les conceptions créatives qui sont également un peu plus axées sur les affaires. Je veux juste trouver le juste équilibre entre inclure les choses que vous devez savoir sur XD et des choses suffisamment intéressantes pour les personnes qui voudraient vous embaucher. Nous allons donc concevoir la version de bureau de la première page avec elle. Donc, version mobile, mais aussi une seule page de billet de blog. Et bien sûr, c'est la version 2 mobile. Au fait, c'est une bonne pratique d'utiliser quelque chose que j'appelle un medley design. Donc, une fois la version de bureau d'une section spécifique terminée, je pense que vous devriez créer sa version mobile juste après cela, nous vous laisserons mieux contrôler votre conception et simplement la conserver. cohérent. Mais bien sûr, nous allons également prototyper notre conception, ce qui signifie que nous y ajouterons de l'interactivité. Juste pour imiter à quoi il ressemblerait, ressemblerait et se comporter si c'était comme un site Web en direct. Par conséquent, à la fin du processus de conception et de prototype, vous devriez créer votre propre projet. Et surtout, vous devez comprendre comment construire un projet de conception Web XD complet. Et je vous encourage à expérimenter. Je vous encourage à traiter ce dessin comme un pointeur, comme un exemple que vous pourriez utiliser pour votre propre design, vos propres variations de ce design. 22. Créons d'abord un nouveau fichier: Je suis donc ici dans XD sur l'écran d'accueil. Commençons donc par créer un nouveau fichier. Bien sûr, nous pourrions utiliser tout comme un préréglage web 19201920 par défaut, mais je vais utiliser une taille personnalisée. Je pense que nous pouvons commencer par années 1920 en largeur et 4 000 en hauteur. Et je vais juste cliquer sur ce type. Et bien sûr, comme vous le savez déjà, vous pouvez toujours saisir ce bas manipulé ici et modifier la taille de votre document et remarquer comment cela affecte la taille de notre mise en page ici dans eux. Dans l' inspecteur des propriétés, bien sûr, si nous venons d'attraper ce type comme ça, cela affectera également la largeur. Et au fait, nous le faisons avec l'outil de sélection. Comme vous pouvez le constater, cet outil est assez puissant. Vous pouvez transformer des objets avec lui, sélectionner les objets, bien sûr, et vous pouvez également les saisir. Mais bien sûr, si c'est le cas, s'il est vide, vous pouvez prendre un tableau d'art et vous pouvez simplement changer sa taille comme ceci. Vous pouvez l'agrandir, vous pouvez le rendre plus petit. Ensuite, bien sûr, je veux revenir à ma taille précédente si différemment j'ai besoin d'utiliser les années 1920 parce que c'est comme un Full HD standard. Largeur du puits. Et je vais revenir à 4 000 comme ça. Une autre chose, je pense vraiment, vraiment, très importante à comprendre ici avant de commencer à concevoir quoi que ce soit est que vous pouvez utiliser la disposition de la grille ici même dans l'inspecteur des propriétés, si nous le savons, c'est le déclenchement, vous pouvez voir que nous avons tous ces éléments. Laissez-moi juste zoomer en arrière. Nous avons toutes ces colonnes qui nous permettront simplement de décider ampleur de nos éléments ou de notre concepteur au total. Et bien sûr, cela pourrait nous aider à positionner les éléments au sein de notre conception. Maintenant, cela apparaît une liste basée sur une grille de 12 colonnes que vous pouvez voir comme dans Bootstrap par exemple. Et si vous n'êtes pas familier avec Bootstrap, c'est simplement un environnement de développement comme un environnement de développement, c'est un environnement CSS et JavaScript qui est très, très populaire dans le monde du développement. Et cela, ce système utilise 1212 colonnes. Et bien sûr, vous pouvez changer la couleur si vous le souhaitez. Et vous pouvez modifier le nombre de colonnes par autre chose si vous préférez. Mais je pense que de l'apparence, c' est assez standard et je n' inviterais pas, je ne conseillerais pas la largeur comme ne pas déconner avec le nombre de colonnes ou avec la largeur de la gouttière. Et au fait, la largeur de la gouttière est comme cette marge entre ces deux colonnes, ces deux colonnes ici. Ainsi, une fois que nous commençons à créer dans nos éléments de conception, nous pouvons, par exemple, les attacher à gauche, comme la colonne la plus gauche et la colonne la plus droite. Mais honnêtement, je ne suis pas que si vous jetez un coup d'œil aux designs contemporains, ils ne sont pas strictement attachés à toutes ces colonnes internes. Comme de plus en plus de designs comme Web design 3, vous verrez que beaucoup d' éléments aiment se chevaucher. Ils ne sont pas comme collés à n'importe quelle structure, à quelque sorte que ce soit comme une grille. Mais c'est un bon indicateur de la largeur de votre conception. Et cela peut vous aider à vous positionner dans vos éléments si vous rencontrez des problèmes avec leur positionnement les uns par rapport aux autres, contrairement aux autres éléments de conception. Mais c'est facultatif. Je vais revenir et revenir sur cette option de mise en page. Maintenant, pendant le processus de conception, je pense que cela aide un peu. Et si vous voulez suivre, vous pouvez, vous pouvez toujours conserver cette disposition comme ces colonnes et, si ce n'est pas le cas, vous n'êtes pas obligé de le faire. Mais pour que vous sachiez, je vais faire référence à ces colonnes, comme pendant le processus de conception. Bien sûr, c'est une bonne chose de sauvegarder notre document. Je vais peut-être l'enregistrer localement parce que je veux le partager avec vous comme plus tard, plus tard. Je vais donc l'enregistrer en tant que document local. Et je vais l'appeler comme un nouveau design pour les étudiants, bien sûr, vous devriez le nommer, lui donner un nom qui correspond à votre propre design. Je vais juste sauver ce type. Et on y va. Nous pouvons, je suppose que nous pouvons commencer par notre section d'en-tête. Nous allons donc commencer par ajouter quelque chose comme logo et nous ajouterons peut-être une sorte de navigation. Et peut-être, et peut-être que je vais ajouter une image, mais faisons-le dans la vidéo suivante. 23. Trouver les bonnes couleurs pour notre conception: Nous avons donc prêt notre nouveau dossier. Donc, je suppose que nous pourrions maintenant commencer par ajouter un logo ici dans le coin supérieur gauche et peut-être ajouter leur navigation ici en haut à droite. Mais comme je veux faire prototypage et de la conception en même temps, pour prototyper notre navigation, il faudrait avoir quelques couleurs, n'est-ce pas ? Je veux dire, je n'en veux pas, je ne veux pas aimer l'état de survol lorsque je survole les liens de navigation. Je ne veux pas simplement les souligner en mai ou les rendre plus audacieux. Je veux changer la couleur car cela nous permettra également d'apprendre à prototyper un peu mieux et aussi à avoir ces couleurs, il faudrait les trouver. Et si nous ne le faisons pas, si nous le concevons nous-mêmes, et si nous ne le faisons pas, si nous n'avons aucune idée de notre client, il nous suffit de trouver ces couleurs nous-mêmes. Bien sûr, si des images ou des ressources vous ont déjà été envoyées, nous vous enverrons à partir de votre client. Vous devez les utiliser comme un pointeur pour rechercher les couleurs. Ou peut-être que votre client aimerait avoir une couleur spécifique dans qui sait. Mais si ce n'est pas le cas, je pense que ce serait une bonne idée de trouver d'abord comme une image de héros pour notre conception, puis de baser notre palette de couleurs sur les couleurs que vous pouvez voir là-dedans, dans ce héros spécifique image. Et ce que je veux, c'est que je veux trouver comme une fausse image essentiellement d'un portrait, photo d'un designer ou d'un pigiste qui n' aurait pas de fond, mais qui aurait encore de belles couleurs que nous pouvons simplement utiliser dans notre conception. Pour cela, je vais utiliser le site appelé pixel brut. Et il vous suffit de créer un compte gratuit ici. Et ensuite, vous pouvez rechercher, eh bien, si vous voulez rechercher des photos premium, vous pouvez le faire, mais bien sûr, vous devrez les payer. Mais nous avons aussi comme domaine public et photos gratuites ici. Donc ce que je vais faire, eh bien, ce que vous pourriez faire, c'est de chercher simplement quelque chose comme portrait, j'ajouterais PNG. Et ceci, cela va savoir comme essayer de trouver des photos de portrait qui n' ont tout simplement pas de fond. Bien sûr, les plus belles sont la section premium, premium. Essayons donc le portrait ici, le portrait P et G. Et bien sûr, ça va être un peu plus agréable. Mais ce que j'ai trouvé ici, c'est ce genre d'image, ce n'est pas comme une image. C'est, ça ressemble à un scat comme une illustration faite à partir d'une image, mais je pense que c'est vraiment joli. C'est, cette fille est comme une branchée, créative, quelque chose qu' il y a beaucoup de couleurs ici que nous pouvons simplement récupérer de ce design qui pourrait être une excellente base pour notre design. Je viens donc de décider de télécharger cette image. Et si nous allons à XD, et que je vais juste essayer de trouver que cette image, comme vous pouvez le voir, j'ai expérimenté une autre. Et je vais simplement imprimer ici. Et je pense que je vais simplement me laisser sélectionner le tableau d'art et je vais simplement désactiver la mise en page. Et bien sûr, il va falloir le faire, rendre plus petit comme ça. Mais cette image ou cette illustration, je pense, va constituer une excellente base pour notre design pour trouver les bonnes couleurs. Mais commençons à le faire dans la vidéo suivante. 24. Ajouter le logo et la navigation: Ainsi, lorsqu'il s'agit d'ajouter le logo à votre discipline, à vos créations, vous avez bien sûr différentes options. Vous pouvez ajouter comme un logo graphique que vous avez peut-être conçu vous-même. Vous pouvez ajouter un logo que votre client vous a donné car il possède déjà un logo. Ou nous pourrions utiliser un logo typographique très, très rapide, comme nous allons le faire dans ce cas. Parce que encore une fois, nous ne faisons que concevoir un logo simple, comme un simple pour nos cellules, essentiellement parce que nous sommes les pigistes qui aiment présenter notre travail. Je vais donc juste prendre l'outil de texte et me laisser juste zoomer. Pour l'instant, je vais juste me débarrasser de la grille. Et je vais juste cliquer quelque part ici. Et disons que notre nom, je ne veux pas taper contrairement à Jane Doe. Faisons comme Tiffany Jones. J'espère que c'est assez générique. Je vais donc simplement saisir le nom de famille ici. Je pense que j'ai un espace ici, donc je vais juste prendre le nom de famille et changer la couleur pour peut-être cette couleur rouge comme celle-ci. Ou peut-être que les sangs bleus laissent la couleur bleue comme ça. Donc maintenant, je peux simplement remonter notre mise en page. Et maintenant, nous pouvons voir qu'il faut juste mettre ce type fait quelque part, quelque part ici contre notre colonne gauche, gauche. Bien sûr, ce logo ne doit pas nécessairement être aussi grand. Nous pouvons donc maintenant simplement prévisualiser notre page à l'aide de cette option d'aperçu du bureau. Maintenant, vous pouvez voir que comme fondamentalement ce que cela ressemble, ce logo va ressembler si vous pouvez le vérifier à chaque retard de taille ou non. Je pense que c'est un peu trop gros, donc je vais le rendre plus petit. Je vais peut-être le laisser tomber à quelque chose comme 24. Et maintenant, passons un aperçu de ce type. Je pense que ça ressemble beaucoup mieux à ça. Nous avons eu le logo. Je vais peut-être me débarrasser de la grille comme ça. Maintenant, c'est une bonne idée de simplement ajouter la navigation comme sur le, à droite, ici. Puisque je veux que tout reste cohérent, je vais juste attraper ce type. Donc, le logo, je vais appuyer et maintenir la touche Maj enfoncée et la touche Alt consiste simplement à cloner ce gars sur le côté. Je vais juste me débarrasser de ce logo Tiffany Jones et je vais juste écrire quelque chose comme chez moi. Maintenant, nous avons ce logo et nous avons obtenu notre premier lien. Je vais peut-être le laisser tomber à 18 points. Et on peut simplement prévisualiser ce type. Maintenant, vous pensez peut-être que nous pourrions simplement saisir cet élément et peut-être simplement cloner, cloner ce gars quelques fois à droite pour simplement construire notre navigation et nous pourrions utiliser la grille de répétition pour cela si vous le vouliez. Et ce sera beaucoup, beaucoup plus rapide. Mais comme je l'ai dit, nous ne allons pas seulement concevoir quelque chose ici dans XD, nous allons également faire du prototypage. Et le fait de cloner des choses ici à l'intérieur du XD, c'est que si vous le faites soit en saisissant et en faisant glisser quelque chose avec la touche Alt sélectionnée et bien pressée. Ou si vous utilisez la grille de répétition, vous n'allez pas cloner les éléments prototypes affectés à un élément spécifique. Parce que nous ne voulons pas travailler dur mais intelligemment, je pense qu'il serait bon d' aimer d'abord la première fonctionnalité prototype de notre élément , puis de la cloner avec cette fonctionnalité prototype ajoutée à cet élément. Cela signifierait simplement que nous travaillerions un peu plus vite et plus intelligemment. Apprenons donc comment ajouter les éléments de prototypage dans la vidéo suivante. 25. Let’s notre premier élément: Commençons donc à ajouter notre premier prototype en fonction. Et nous allons le faire en changeant simplement la couleur de ce lien d'accueil lorsque quelqu' un le survole. Et pour ajouter des fonctionnalités de prototypage à un élément. Et ici, dans XD, nous devons d'abord transformer cet élément en composant. Et nous pouvons le faire ici dans l'inspecteur des propriétés en cliquant simplement sur ce symbole plus dans cet onglet de composant. Ou si vous le souhaitez, vous pouvez utiliser le raccourci Contrôle plus K. Je vais juste cliquer dessus. Et comme vous pouvez le constater, nous avons maintenant notre composant et il apparaît ici même dans nos composants, dans le document, dans les ressources du document. Qu'est-ce qu'un composant ? Component est essentiellement un élément ici dans XD qui vous permet d'y ajouter une certaine interactivité. Cette interactivité peut ressembler à un stade stationnaire ou peut-être à changer l'apparence. Je change de position, toutes ces choses. Et cela peut être fait à l'intérieur 11 composants ou d'une série de composants. Maintenant, notre premier composant va être ultra, ultra simple. Tout ce dont nous avons vraiment besoin, c'est de changer la couleur de notre lien lorsque nous le survolons. Et c'est comme le comportement typique d' un lien dans un menu que vous verriez sur un site Web. Par conséquent, dans notre état par défaut, rien ne change. C'est juste un avion comme un gris très, très foncé. Essentiellement du texte. Je vais cliquer sur ce symbole plus qui indique Ajouter un état. Et ici, je veux ajouter l'état du survol. Bien sûr, vous pouvez changer son nom si vous le souhaitez. Mais je pense que l'état de vol stationnaire est assez explicite et il ne fait que l'astuce ici. Donc, dans notre état de vol stationnaire, comme je l'ai déjà mentionné, tout ce dont nous avons besoin, c'est simplement changer la couleur. Et nous pourrions utiliser la même couleur bleue que celle que nous avons sur notre logo. Donc, cette couleur bleue. Mais nous pouvons également utiliser une autre couleur tout à l'heure, juste pour ajouter de la variété, juste pour que vous compreniez un peu mieux ce qui se passe ici. Donc, en état de survol, je vais simplement faire lire le texte comme ça. État par défaut. Laissez-moi juste zoomer. Par conséquent, l'état par défaut est gris, l'état de survol rouge. Et nous pouvons vérifier et comprendre cette fonctionnalité un peu mieux une fois que nous l'avons atteint, une fois que nous avons atteint l'aperçu du bureau. Donc maintenant, si je survole ce type, vous pouvez voir qu' il se transforme en rouge comme ça. Maintenant, si vous utilisez l'aperçu du bureau et si vous souhaitez vérifier l'état du survol ou tout autre état, n'oubliez pas de revenir d' abord à l'état par défaut d' un composant spécifique. Parce que si vous revenez à l'état survol puis si nous cliquons sur l'aperçu, vous verrez toujours cet état de survol dans OB et comme activé. Et nous ne pourrons pas simplement voir l'effet stationnaire. N'oubliez donc pas de revenir à l'état par défaut lorsque vous souhaitez prévisualiser quelque chose. Donc, comme je l'ai dit, je suppose que maintenant c'est un bon moment, c'est un bon moment pour que le tuteur transforme ce composant en grille de répétition. Je vais donc simplement cliquer sur Repeat Grid. Et quand nous le faisons, vous pouvez voir que nous avons deux options ici qui nous permettent soit de répéter ce type verticalement comme ça, ce que nous ne voulons pas. Je veux dire, nous ne construisons pas de menu vertical ou ne répétons pas ce type horizontalement, comme ça, et nous n'avons qu'à décider du nombre de liens que nous voulons. Maintenant, normalement, si vous ne construisiez pas ce site Web pour vous-même, vous obtiendriez quelques pointeurs de votre client. Mais disons que nous voulons avoir un blog Home, un portfolio Contact et à propos de nous, quelque chose comme ça. Alors Home Blog portfolio à propos de nous et contactez. Donc, un lien de plus comme ça. Et on y va. C'est le nôtre, c' est notre navigation. Nous devons changer la longueur. Mais si nous venons de visionner ce gars en avant-première, vous pouvez voir que tout ce qui, comme le prototype de nouvelle fonctionnalité est cloné avec le, avec les films de conception. Donc maintenant, je suppose, je pense que nous pourrions simplement saisir notre grille de répétition et nous pouvons la dissocier. Et comme vous pouvez le constater, nous avons tous ces composants ici. Ce sont donc tous les liens que nous avons. Je vais donc juste prendre ce premier composant et je vais l'appeler chez moi. Le prochain sera appelé un blog comme ça. Celui-ci va s'appeler un portefeuille. Celui-là va ressembler à nous, à propos de nous. Et celui-ci va ressembler à Kong Tact. Et bien sûr, tous ces éléments sont toujours des composants, ils ont donc l'état de survol et l'état par défaut. Si nous voulons juste l'attraper maintenant, c'est comme ce lien de blog ici. Et nous voulons simplement changer ce texte de la maison en blog. Notez que si vous passez à l'état survol, nous avons toujours ce texte précédent. Donc, non seulement à l'état de survol, le gène de couleur, mais nous avons également un texte distinct pour cet état de survol. Donc ici, nous devons aussi simplement taper un blog. Donc maintenant, si nous passons au composant et l'état par défaut, la couleur change. C'est donc quelque chose que vous devez savoir laisser garder à l'esprit. Je me souviens que lorsque j'apprenais ceci, le vendeur, cette fonctionnalité, j'étais vraiment très confus. Pourquoi, pourquoi cela ne change-t-il pas comme je veux qu'il change parce que maintenant, pourquoi cela fonctionne-t-il comme ça ? Et puis je viens de réaliser que le matériel que vous devez connaître, vous devrez changer ces éléments sur tous les états parce que si vous ne le faites pas, vous aurez des surprises désagréables. Donc, à propos de nous, je vais passer à l'état stationnaire et je vais taper sur nous comme ça. Le dernier était censé être un contact. Je vais donc changer ça pour un contact comme ça. Et bien sûr, il en va de même pour l'état de vol stationnaire. Alors, contactez. On y va. Et voyons, par défaut, état par défaut. La couleur change, seule la couleur change et la couleur change. Nous voulons simplement vous avertir que vous voulez changer, modifier la couleur, pas le texte. La dernière chose à faire ici serait saisir peut-être notre disposition, comme nos colonnes. Et je vais juste attacher ce gars du côté droit et peut-être les déplacer un peu sur le côté. Peut-être quelque part ici. Ensuite, je vais sélectionner tous ces composants. Et je vais juste utiliser cet élément ici qui dit distribuer horizontalement. Et si je fais cela, vous pouvez voir que notre navigation est simplement bien distribuée. Maintenant, nous pouvons simplement saisir tous ces éléments et ne pas voir comment cette fonctionnalité fonctionne. Et nous pouvons voir que nous avons ce joli effet de vol stationnaire, vraiment sympa, je suppose. Et de plus, plus important encore, nous apprendrons comment utiliser cela. Eh bien, en gros, comment ajouter les premières fonctionnalités de prototypage similaires à nos éléments. Donc maintenant je peux, maintenant je suppose que nous pouvons simplement aimer saisir tous ces éléments. Je vais les regrouper. Je vais appuyer sur Control G sur mon clavier. Et je vais juste appeler ça la navigation comme ça. Et cette Tiffany Jones. Je vais juste appeler ça le logo. On y va. On y va. Nous avons essentiellement obtenu nos premiers éléments d'en-tête complets. 26. Ajouter l'état actif et les premiers éléments du héros: Avant de passer à l'ajout comme certains éléments de héros, sélectionnez l'image, peut-être un arrière-plan et d'autres comme le principal, titre principal, l'appel à l' action principal, toutes ces choses. Je pense qu'il est important de comprendre une chose. Et ce sont les états actifs. Et je ne parle pas vraiment fonctionnalités de prototypage à l'intérieur de XD, mais quelque chose qui est important n'a pas le monde du développement Web et de la conception Web. Et cette chose est importante du point de vue de la convivialité, point de vue standard ou de l'UX. Donc, dans vos conceptions, vous allez devoir indiquer aux utilisateurs quel élément se trouve actuellement. Disons qu'il fonctionne comme si c'était actif en ce moment. Et dans ce cas précis, cas précis, lorsque nous parlons de notre navigation, nous voulons leur indiquer, eh bien, nous voulons indiquer aux utilisateurs sur quelle page ils se trouvent actuellement. Donc, dans ce cas, ils sont actuellement sur la page d'accueil, n'est-ce pas ? Nous devrions donc dire aux utilisateurs que c'est la base sur laquelle ils se trouvent actuellement. Et généralement, il est indiqué de la même manière ou en utilisant les mêmes attributs que les liens qui sont survolés ou quelque chose du genre. Donc, dans mon cas, je vais juste prendre le lien d'accueil. Et je veux, je veux juste désigner, changer la couleur du texte par rapport à ce gris. Permettez-moi de revenir à mes atouts, à cette couleur rouge que vous avez bien utilisée il y a une seconde pour créer l'état de survol. Donc, si nous passons maintenant à notre conception, vous pouvez voir que notre lien d'accueil est comme si bien indiqué par cette couleur rouge. Et puis, lorsque nous survolons ces éléments, vous pouvez voir qu'ils ont bien été, eh bien, ils ont changé les couleurs quand ils sont planés comme ça. Vous savez quoi ? Quand je le regarde, modifie la lumière maintenant, je pense que je vais changer rapidement la couleur de ce texte, de ce texte ici juste pour garder les choses cohérentes et peut-être que ça va être Un peu plus accrocheur. Laissez-moi juste voir. Oui, ça va aller. Je suppose. Je sais que c'est un peu générique. Mais non, il s' agit plutôt d'apprendre XD, d'apprendre à concevoir et à prototyper plutôt qu' à en faire le meilleur design au monde. Bon, on a eu le logo, on a eu la navigation. Ajoutons maintenant notre image. Et comme vous le savez déjà, c'est cette image ici. Et je suppose que j'aurais dû sauvegarder cette image avant. Laissez-moi donc rapidement saisir le Rectangle. Je vais juste masquer très, très rapidement cette image comme ça. Je vais aller voir mes couches. Je vais saisir ce rectangle et l'image, et je vais appuyer sur Control Maj M mon clavier pour simplement le masquer. Donc maintenant, je pourrais entrer, peut-être le mettre quelque part ici. Maintenant, ce que je veux faire, c'est que je veux simplement ajouter, peut-être que je vais juste agrandir un peu. Je vais simplement ajouter peut-être comme un arrière-plan ici. Et pour ça, je vais juste prendre l'outil stylo. Et je vais simplement marquer quelques points et je maintiens la touche Maj enfoncée, je vais essayer de trouver ces bords ici. Bien sûr, nous pouvons toujours, toujours changer cela un peu plus tard, peut-être quelque part ici. Et puis je vais juste fermer la forme pour qu'elle ressemble à ça. Et je veux le remplir avec ma couleur de peau. Et bien sûr, ce type doit aller jusqu'à l'arrière. Je vais donc l' attraper et appuyer sur le Maj de contrôle plus gauche, le support gauche. Donc, clavier, touche sur mon clavier. Et on y va. Peut-être que celle-ci est un peu trop grosse. Cette image est trop vague, quelque chose comme ça, et nous allons la déplacer légèrement sur le côté. Nous allons maintenant prévisualiser notre design. Donc ça commence, commence à bien paraître. Maintenant, bien sûr, vous n'avez pas à faire comme un arrière-plan comme celui-ci, mais c'est en train de devenir une tendance courante en matière de design. Vous pouvez simplement ajouter un rectangle simple comme un rectangle. Vous n'êtes pas obligé de le faire aussi. Non. Je dois le faire comme si je ne savais pas. C'est un piège car j'ai un trapèze ou quelque chose comme ça. Mais maintenant, c'est juste un, je pense que c'est juste une touche de design agréable. Et cela nous permet aussi d' avoir plus de place, comme ici à gauche pour ajouter quelque chose comme : Bonjour, je suis Tiffany, je suis designer. Merci d'être venu me connaître ces choses. Mais avant d' ajouter réellement tous ces éléments, nous devons encore faire une chose. Autrement dit, nous devons nous occuper de la réactivité de nos conceptions jusqu'à présent. Et le plus important ici est de prendre soin de la réactivité de notre menu. Et bien pour cela, il va falloir ajouter un tableau d' art distinct et distinct. Et bien sûr, ajoutez un menu complètement nouveau bien construit . Mais tu sais quoi ? Commençons par le faire dans la vidéo suivante. 27. Commençons la version mobile de la conception: Donc, pour ajouter notre design mobile, nous devons avoir quelque chose à mettre, n'est-ce pas ? Nous avons donc besoin d'un nouveau plan de travail. Pour cela, je vais juste prendre l'outil Plan de travail. Et d'après les préréglages mobiles, je pense que je vais utiliser l' iPhone 13, Twelve Pro. Et je ne veux pas qu'il fasse froid comme ça. Je vais aller dans mon panneau Calques et remarquer que nous avons déjà ce nom présenté ici. Nous avons donc obtenu notre page d'accueil de notre plan de travail, nous avons bien notre iPhone 13, 12e Pro Home, un plan de travail. Je vais juste appeler ça un mobile domestique comme ça. Avant d' ajouter la navigation, je vais saisir le logo. Et je vais simplement saisir ce plan de travail est un plan de travail mobile à domicile. Et ici, nous pouvons également utiliser la disposition de la grille. Et si nous collons ce type maintenant et que vous pouvez voir où nous devons l'attacher. Donc, à gauche, à gauche. Et je pense que c'est un peu trop gros. Essayons quelque chose comme 18 ans. Et maintenant, débarrassons de la superposition. Et peut-être même prévisualisons ce type. Je pense que ça devrait paraître correct. Et avant d' ajouter cette navigation ici, nous en avons deux. Je pense que ce serait une bonne idée d'ajouter notre contexte, ce contexte ici. Avant de le faire, avant de le copier, vous pouvez voir que je ne pense pas avoir cliqué correctement ici. Et nous pouvons facilement y remédier. Ainsi, ce que l'outil de sélection est actif, ce que nous pourrions faire, c'est que nous pourrions simplement double-cliquer à l'intérieur d'une forme et peut-être rien ne se passe vraiment. Mais vous pouvez voir qu' ils sont comme ces délimitants, ces changements de boîte de sélection l'ont. Vous pouvez voir que nous avons ces lignes ici , indiquant que nous venons de sélectionner la forme entière. Mais lorsque nous double-cliquons à l'intérieur, ils ont disparu. Et maintenant, nous pouvons simplement saisir les points d'ancrage et simplement les déplacer. C'est donc comme l'outil Sélectionner se transforme en un outil comme un point d' ancrage, quelque chose comme ça. Laisse-moi juste y aller, oh mec. C'est un gros. Allons juste ici. Et je vais juste le déplacer quelque part ici. Et puis voyons voir, je suppose que ces gars vont bien se passer, mais peut-être devrions-nous déplacer cet élément, cet élément au sommet. Et voyons juste ici, ce type a l'air bien. Maintenant, nous pouvons peut-être, au lieu de simplement copier ce type et jouer avec ces points d'ancrage, je peux juste attraper toutes les prises mobiles, saisir l'outil rectangle. Et créons simplement un rectangle qui a disparu et qui s' étend sur notre premier écran dispersé. Bien sûr, je n'ai pas besoin de la frontière. J'ai juste besoin de remplir et quel serait l'outil Pipette que j'initialise en appuyant sur la touche I, nous pouvons simplement échantillonner cette couleur. Et encore une fois, je vais appuyer sur le crochet gauche de Control Shift pour les placer jusqu'au bas de la pile, ce qui serait fondamentalement comme utiliser le menu Objet, arranger puis renvoyer à l'arrière. Nous devons maintenant ajouter notre icône de menu sur le côté. Et je pense que le moyen le plus simple de le faire serait de ne pas saisir l'outil de plume et tout dessiner nous-mêmes, mais nous pouvons utiliser les icônes pour le plugin de conception pour cela, le eigentlich, le plugin que nous connaissons déjà. Et essayons de taper quelque chose comme un menu. Et comme vous pouvez le constater, nous avons ici toutes sortes de menus différents. Je vais peut-être m' assurer que je suis dans le bon plan de travail. Essayons ce menu. Je ne me souviens pas du fond, mais du menu. Essayons un autre. Celui-ci est un peu plus petit, définitivement. Et celui-là, je pense que je vais aller avec celui-là et maintenant ça semble bien. Nous pouvons donc maintenant changer la couleur de ce menu pour qu'elle corresponde à notre logo. Mais si vous pensez que c'est aussi facile que de cliquer sur la couleur, eh bien, malheureusement ce n'est pas le cas. Je veux dire, vous pouvez voir que la frontière est vérifiée ici. Il devrait donc être logique que si nous cliquons simplement sur une couleur, cette couleur de bordure change. C'est. Comme vous pouvez le constater, cela ne fonctionne pas comme ça. Je pense que ce que je suggérerais, c'est simplement de saisir le menu objet, d'aller au chemin, et de choisir simplement contour, ce qui ferait de tous ces éléments des chemins remplis comme des chemins remplis au lieu de tout simplement non bordures. Et comme vous pouvez le voir maintenant, dans l'inspecteur des propriétés, vous obtenez le remplissage sélectionné. Et maintenant, nous pouvons changer cette couleur pour qu'elle corresponde à notre logo. On pourrait choisir la couleur rouge, choisir Non, comme cette couleur grise. Le fait est que parfois, si vous ne savez pas pourquoi quelque chose fonctionne comme dans le cas de ces icônes, c'est peut-être une bonne idée de simplement échanger les traits avec les remplissages instant, vous pouvez voir que si je maintiens la touche Maj enfoncée, nous n' aurions aucun problème à changer la taille de cette icône. Et nous aurions des problèmes si je pouvais simplement vous montrer ce que je veux dire. Si je reviens à aimer, je vais juste ajouter ce menu. Je vais le déplacer. Si j'essaie maintenant de l' agrandir ou de le réduire, vous pouvez voir que nous perdons cela. Eh bien, nous sommes en train déformer les distances entre eux, entre ces éléments de ce menu de hamburgers. Nous avons ce menu ici. Permettez-moi de vérifier rapidement si tout est bien aligné sur la grille. Comme vous pouvez le constater, ce n'est pas le cas. Je vais donc le déplacer quelque part ici. Et encore une fois, je vais saisir le logo et m'assurer que tout est bien aligné. Nous avons donc eu le logo, nous avons eu le menu et nous avons eu l'arrière-plan. Maintenant, je suppose qu'il est grand temps d'ajouter simplement notre menu mobile et mobile que nous déclencherions une fois que nous cliquons sur cette icône de menu hamburger. 28. Ajouter le menu mobile: Nous allons donc maintenant élaborer notre menu. Pour cela, je pense que je vais simplement réutiliser ce que j'ai déjà. Je veux dire, nous avons besoin d'un tableau d'art distinct pour que cet effet fonctionne correctement. Je vais donc prendre tout ce plan de travail mobile et je vais simplement le dupliquer. Maintenant, je n'aurai pas besoin de ce logo ici. Bien sûr, je n' aurai pas non plus besoin de cette icône de menu. Je vais donc simplement aller dans mes icônes pour le plugin de design. Et ici, je vais essayer de trouver quelque chose comme un bouton de fermeture. Je pense que celui-ci devrait aller bien, celui-ci devrait suffire. Et je vais simplement le déplacer quelque part ici. Il correspond donc à cette icône, comme l'icône du menu principal dont je vais bien sûr me débarrasser. C'est donc une structure super, super simple, comme une structure à os nus de notre menu mobile. Et je vais appeler comme un menu mobile déclenché ou peut-être superposé comme ça. Mais bien sûr, cela n'a pas besoin de ressembler à notre contexte principal ici. En fait, je pense que je voudrais que cela ne soit pas si important. Juste pour vous montrer comment, hum, comment elles arrivent bientôt dans les interactions, quoi elles ressembleraient. Je vais donc aller mes atouts et je pense que je vais changer le monticule comme la couleur d'arrière-plan par cette couleur bleutée. Et je vais aussi changer les couleurs, la couleur de ce symbole proche. Peut-être vérifiez à quoi va ressembler ce type. Je pense que ça va bien paraître. Construisons rapidement nos liens. Nous avons donc eu un portefeuille de blog à domicile sur nous et nous contacter. Laissez-moi donc rapidement essayer de taper ça. Alors, à la maison. Et faisons-moi vérifier cette couleur. Cette boucle devrait paraître OK. Et nous allons peut-être le rendre un peu plus gros, quelque chose comme 22. Donc, ça va être un blog à la maison. Je sais quoi, passons rapidement à Repeat Grid Home Blog. Ensuite, ce sera portfolio, Bowers et contact. Donc 12345 au total, nous ne pouvons tout simplement pas, simplement changer les liens. Alors, à la maison. Il y avait un blog que je pense que c'était du portfolio que de nous. Enfin, nous avons eu des contacts comme ça. Et maintenant, je vais simplement dissocier tous ces éléments. Et si vous le souhaitez, vous pouvez les laisser comme ça, ou simplement les aligner sur le centre. Et peut-être pourrons-nous les regrouper. J'appuie donc sur Control G sur mon clavier car maintenant si nous sommes juste alignés au milieu de la verticale, ce groupe va être aligné par rapport à notre plan de travail sous-jacent. Nous avons donc notre superposition de menu mobile, et nous avons obtenu notre premier logo et cette icône de menu. Et nous avons obtenu notre deuxième tableau d'art avec juste l'effet de superposition de menu mobile. Mais bien sûr, nous devons encore entrer cet effet connaissait Ted une sorte d' interaction entre cette icône et le menu mobile et l'icône de divulgation et notre écran principal principal. Je vais donc aller au panneau prototype. Et comme ici, ce que je veux faire, c'est que je veux créer cette icône et quand elle est déclenchée , quand j'ai tapé dessus, j'ai voulu ouvrir ce menu. D'abord. Je vais essayer de le sélectionner. Je suppose que ce sera plus facile de le sélectionner ici. Et comme vous pouvez le voir, nous avons eu ce petit marqueur qui apparaît. Et nous pouvons simplement l'attraper et l' apporter à notre superposition de menu mobile. Et comme vous pouvez le constater, il a déjà créé une animation pour nous, nous avons donc un déclencheur à taper. Nous pouvons changer le type de cette animation passant de la transition à l' animation automatique et/ou autre. J'utilise généralement l'animation automatique. C'est juste le plus beau, je suppose. C'est donc une façon de le faire, mais vous pouvez également saisir l'icône, sélectionner cette icône, divulguer l'icône. Et puis nous pouvons simplement à partir de cet inspecteur des propriétés, sans même toucher cette flèche bleue blanche et blanche sur le fond bleu, nous pouvons choisir l'onglet. Mais nous devons d'abord définir l'interaction AD, puis nous avons les mêmes éléments. Donc nous obtenons, nous pouvons ajouter l' animation automatique et ensuite nous pouvons simplement choisir le tableau d'art, qui dans notre cas est le mobile domestique. Si nous commençons simplement cette fonctionnalité d' aperçu, permettez-moi de la mettre en haut. Vous pouvez voir que tout fonctionne maintenant correctement. Ainsi, lorsque nous cliquons sur cette icône de menu, vous pouvez voir que cet élément de superposition, le plan de travail superposé apparaît bien. Donc, tout va bien et très bien. Tout fonctionne. Mais à mon goût, c'est un peu ennuyeux. Je veux dire, ces jours-ci, vous pouvez voir tellement options différentes telles que les interactions entre, comme le menu de superposition et l' icône qui le déclenche. Voyons donc comment nous pouvions au moins imiter ces interactions, pouvions au moins imiter ces interactions mais c'était des façons plus modernes d' afficher une superposition de menu mobile. 29. Apprenons un meilleur moyen d'animer l'icône de menu: Ok, donc nous savons comment créer des transitions entre des tableaux d'art essentiellement. Mais comme je l'ai déjà mentionné, je pense que c'est, eh bien, que c'est devenu moderne. C'était, au moins un goût un peu ennuyeux. Faisons donc quelque chose de plus amusant. Laissez-moi juste éteindre ça. Et je vais réutiliser certains de ces éléments, mais la plupart d'entre eux, eh bien, certains d'entre eux ne seront plus nécessaires, donc je vais juste saisir cet arrière-plan et ça comme ce menu. Et je vais peut-être le mettre quelque part ici. Pour l'instant. Je ne vais pas utiliser aussi bien ce plan de travail en fait, donc je vais juste l'enlever. Je vais aussi me débarrasser de cette icône. Je veux juste repartir de zéro. Ce que je vais faire, c'est que je vais créer moi-même un menu, une icône de menu. Je vais donc créer quelque chose comme ça, peut-être. C'est donc juste un rectangle simple que je vais remplir avec une couleur appropriée comme celle-ci. Et je veux que ce type ait des coins arrondis. Disons quelque chose comme 50. Mais la hauteur six est peut-être un peu trop. Voyons voir, trois. Cela devrait bien se passer. Et puis je vais appuyer sur la touche Alt et la maintenir enfoncée pour imprimer ce type est quelque part ici. Ou nous pourrions également utiliser l'option Repeat Grid pour créer deux autres éléments. Et puis on peut peut-être aimer faire quelque chose comme ça. Laissez-moi voir. Ça semble plutôt bien, même si c'est peut-être un peu trop gros, donc on peut simplement dissocier ces éléments et simplement rendre ce type un peu plus petit. Cela devrait suffire. Vous savez, je ne veux juste pas diviser les cheveux ici, mais je veux activer cette mise en page et je veux juste, laissez-moi les attraper et je vais les mettre quelque part ici. Cela devrait être, cela devrait être correct. Donc, ce que je veux faire ici, je veux créer une transition entre comme ceci, comme tout cet état qui serait déclenché par cette icône et cet état ici, qui est fondamentalement notre arrière-plan et nos liens et nos liens. Donc, pour ce faire, d'abord, je vais peut-être regrouper ces éléments et je vais les appeler comme une icône Menu principal. On y va. Et je veux que ce soit comme en haut ici. La prochaine étape serait de saisir comme ceci, ce menu. Attrapez ces éléments. Je vais peut-être les regrouper aussi. Encore une fois, ce menu et ce type ici, et je vais créer un composant à partir de ces deux éléments. Dans l'état par défaut. Ce menu n'est plus là. Nous ne pouvons pas le voir correctement ? Mais nous pouvons aussi ajouter un nouvel état que je vais appeler comme peut-être, je ne sais pas, écoute et dans cet état et ce type, laissez-moi juste attraper tout le groupe. Ce type va aller jusqu'ici. Il va donc tout couvrir. Mais il faut que ce soit comme ça, cette icône. Encore une fois, l'état par défaut comme celui-ci, conservé comme ceci. Mais dans l'état sur écoute, je veux également changer cette icône ici. Permettez-moi de me débarrasser de ces éléments. Je veux juste tourner ces 33 marqueurs trois, essentiellement trois lignes. Laissez-moi juste ouvrir ce groupe. Donc, ces éléments, je veux les transformer en symbole X. Et pour ce faire, je vais prendre ce milieu et je vais baisser son opacité jusqu'à 0, mais je vais aussi changer sa couleur de remplissage. Laissez-moi juste revenir en arrière, aller à mes biens. Et puis je vais saisir cet élément. Je vais revenir à mon calque. Il s'agit donc de cette ligne. En gros, ce que je veux faire, c'est que je veux tourner et faire pivoter de 45 degrés, je crois. Et je veux le dire comme le faire baisser un peu. Je vais donc augmenter cette valeur Y. Et puis je vais attraper cet élément inférieur. Et je vais aussi faire une rotation, mais je pense que je vais devoir la faire pivoter de moins 45. Et ce type doit monter un peu. Laissez-moi juste zoomer. Voyons quelque part ici. Et bien sûr, ils doivent aussi changer leurs couleurs. Je vais donc accéder à mes documents. Et encore une fois, ce rectangle de nouveau Document Assets. Nous avons donc quelque chose comme ça. Laissez-moi donc revenir à mes composants. Donc, le composant N des couches, l'état par défaut comme celui-ci, puis sur état comme celui-ci. Et aussi le positionnement de ces éléments est également important car ce menu de superposition vient du haut, dans ce cas, à droite. Mais on peut jouer avec ça en une seconde. Je vais prendre ce composant, non ? Et je vais peut-être appeler ça comme un menu f x, comme ça. Et je vais passer au prototype. Et dans mon espace de travail prototype, je vais simplement essayer de trouver cette icône de menu principal. Et encore une fois, je vais le faire, ce que je veux, c'est que je veux m'assurer que tout est bien aligné. Je vais donc saisir cette icône de menu principal et je veux la mettre, je veux la mettre en haut de ma pile ici. Et je veux que ce soit le même par défaut et pour le tapé. Voyons donc voir. Oui, d'accord, donc c'est bon. Encore une fois, l'espace de travail prototype par défaut. Et dans l'état par défaut, encore une fois, je vais essayer de trouver l'icône de mon menu principal. Et je veux bien lui donner un déclencheur, ce qui va être une animation automatique. Mais ici, nous pouvons, comme vous le voyez, choisir entre un tableau d'art dans un état pour l'État que je veux choisir sur écoute. Et puis je vais aller chez moi, nous retournerons à l'espace de travail design. Et puis je vais aller à mon prototype d'état sur écoute. Et dans cet état, je veux juste trouver mon icône de menu principal. Je veux ajouter un déclencheur de touches, ce qui va me ramener à mon état par défaut. Et encore une fois, je vais retourner au Design. Il y a beaucoup de clics, mais c'est très important ici. Ensuite. Maintenant, si nous avons juste un aperçu de notre design, si nous touchons maintenant ce type, vous pouvez voir que nous avons comme ça, comme cette belle animation. Donc, nous les faisons comme cette ligne médiane, ligne du milieu, la ligne de menu du milieu juste ici pour disparaître. Et nous faisons en sorte que tous ces éléments comme ceux-ci, les marqueurs restants se transforment simplement en symboles x ou ils tournent et ils changent cette couleur. Et en choisissant le, revenons au prototype. Choisir la fonction d' animation automatique ici est en fait très important car cela rend tout simplement plus agréable. Bien sûr, vous pouvez jouer avec l'assouplissement. Je ne sais peut-être pas si tu veux. Vous pouvez choisir comme les limites si vous le souhaitez. Et puis on peut peut-être vérifier si ça va changer quelque chose. C'est vrai, mais si c'est mieux, je n'en suis pas sûr. Mais vous savez, vous le pouvez toujours, vous jouerez toujours avec. Comme je l'ai mentionné, le positionnement de nos éléments est également important. Par exemple, si vous voulez le rendre encore plus cool, nous pourrions me laisser simplement saisir mon composant dans l'état par défaut. Nous pourrions attraper comme ça tout le groupe et simplement déplacer quelque part ici comme ça. Et maintenant, si nous ne faisons que lancer notre animation, vous pouvez voir que c'est comme venir du haut, du haut à droite, quelque chose comme ça. Nous pourrions également, par exemple, jouer avec l' opacité de certains États. Donc, dans cet état par défaut, mon arrière-plan est un arrière-plan de groupe et je sais quoi, laissez-moi simplement l'appeler arrière-plan. Ce contexte. Son opacité est fixée à 100 %, mais nous pouvons la réduire jusqu'à 0 %. Mais lorsque nous revenons à notre état d'exploitation, ces milieux, opacité doit revenir à 100 %. Donc, si nous revenons à l'état par défaut et que nous déclenchons maintenant notre menu, vous pouvez voir que cet effet d'opacité est également présent. C'est très, très subtil, mais c'est là. Maintenant. Je pense que j'ai aimé mieux quand cet homme qui venait, comme du haut. Donc, pour mon état par défaut, je veux simplement le déplacer. Permettez-moi de revenir à mes antécédents. Je veux le déplacer quelque part ici, et je veux ramener l' opacité à 100 %. Maintenant aussi, si vous voulez rendre les choses encore plus intéressantes, vous pouvez, par exemple, jouer autour de la rotation. Donc, si je saisis juste mes antécédents dans l'état par défaut, nous pourrions, par exemple, faire pivoter ce type. Que faisons-le 360. Je sais que nous ne verrons pas qu'un changement puisse être modifié ici parce que c'est un cercle complet. Mais assurez-vous que ce paramètre est réglé sur 0 lorsque nous revenons à notre état sur écoute. BG a donc réglé sur 0. Allons à, revenons à l'état par défaut. Et voyons si cela fait réellement une différence. Comme vous pouvez le voir, nous avons une aversion, un peu génial comme un stylo de rotation qui se déroule ici. C'est peut-être un peu trop. Nous pourrions peut-être le changer de trois à seize pour dire 118. Et je pense que cela fonctionnera très bien. Nous aurons encore des choses comme des choses géniales, mais ce n'est pas le cas, ce n'est pas le cas, je pense que ce n'est pas trop. J'espère que ce n'est pas trop. Mais de toute façon, c'est ainsi que vous pouvez créer un effet de transition similaire à ce type ou cliquer sur un fait ici à l'intérieur de X, Z et demi pour simplement vous déplacer entre différents plans de travail, entre différents plans de travail. Vous pouvez tout faire au sein d'un seul composant, non seulement en ajoutant comme ces interactions entre plans de travail ici même dans votre conception de prototype, mais simplement en ajoutant des interactions entre les éléments d'un composant. 30. Ajouter d'autres éléments de héros: Ajoutons maintenant quelques éléments similaires à Hero Elements. Et je vais ramener cette grille de mise en page. Ce que je veux faire, c'est simplement savoir, faire quelque chose comme une brève introduction. Je vais donc prendre l'outil de texte et je vais taper quelque chose comme bonjour là-bas. Je suis quelque chose comme ça. Et puis je vais juste le transformer en rouge. Je vais peut-être le rendre un peu plus petit. Donc, on dirait 18 ans. Et je pense que je vais peut-être augmenter le suivi ici. Faisons quelque chose comme peut-être deux. Ce n'est peut-être pas suffisant, c'est 20 ou peut-être même 60. Laissons-le maintenant à 60 ans. Cela devrait bien se passer. Et puis, bien sûr, j'ai besoin d'écrire le nom. Alors peut-être que nous allons juste cloner ce type ici. Et je vais l'agrandir considérablement. Et je vais juste changer cette couleur à la même chose. Je pense donc que ce sera cette couleur. Je n'en suis pas sûr. Laissez-moi juste éteindre ce type. Oui. Nous devons donc le faire peut-être comme ça ou comme ça. On y va. Et maintenant, faisons quelque chose comme un sous-titre, quelque chose comme ça. Je vais juste emprunter ce type. Et je vais taper quelque chose comme graphiste indépendant comme ça. Et je vais le rendre nettement plus petit, quelque chose comme 16 ou 18 devrait suffire. Je vais le mettre quelque part ici. Peut-être juste un peu en bas. Et maintenant, créons ici quelque chose comme une zone de texte pour nos textes Lorem Ipsum. Je vais juste créer un rectangle. Ça va ressembler plus ou moins à ça. Et à partir de notre plugin Lorem Ipsum, je vais juste ajouter un peu de Lorem Ipsum. Bien sûr, nous devons maintenant modifier ce texte pour qu'il corresponde essentiellement à notre document. Essayons donc de le remplacer par notre police. Je ne sais pas si c'est bien, euh, je pense que c'est un peu, on peut aussi changer cette hauteur de ligne de 18 à quelque chose comme 26. Cela va ressembler un peu mieux à ça. Enfin, ajoutons peut-être un bouton ici. Donc pour ce faire, je vais juste saisir l'outil rectangle, créer quelque chose comme un bouton avec des coins peut-être arrondis aussi. Essayons comme peut-être 48. Et je veux juste que les gens en apprennent davantage. Je vais juste emprunter ce type. Et je vais taper quelque chose. Ou peut-être que je vais emprunter, eh bien, voyons à quoi ça va ressembler. Je vais emprunter ce type. Et je vais taper comme en savoir plus. Et nous allons le mettre quelque part au milieu. Et changeons peut-être la couleur de ce type pour aimer ce bleu. Cela devrait suffire. Ça devrait aller bien. Et nous allons peut-être faire de ces piles un blanc uni. Il suffit donc de changer la couleur en blanc et de la mettre quelque part ici. Et assurons peut-être que tout est bien aligné sur le centre. Je pense que ça a l'air bien. Je ne veux pas sélectionner les cheveux fendus ici, mais j'aimerais également ajouter une certaine interactivité à mon bouton. Et je suppose que ce serait notre bouton principal ici. Nous allons donc simplement saisir ces deux éléments et je vais peut-être les regrouper et je vais les transformer en un composant. Permettez-moi de le vérifier dans mon panneau de calques. Donc, ce sera comme En savoir plus btn. Et je veux juste ajouter un état de vol stationnaire. On y va. Et dans cet état de survol, mes boutons vont tout simplement changer. C'est comme cette couleur de fond à peut-être cette couleur rouge. Donc, chaque fois que quelqu'un survole ce bouton, nous allons simplement prévisualiser cela. Il va simplement changer la couleur. Et peut-être que je vais juste le rendre un peu plus petit. Je vais faire en sorte que ça ressemble à ça. Et maintenant, voyons un aperçu. Ça a l'air bien. veux juste pas aimer les poils fendus ici. Ce n'est pas la chose la plus importante ici. Je suppose que vous comprenez déjà comment ajouter ce genre d'interactivité. Maintenant, je suppose que la prochaine chose à faire ici pour en finir, cette partie serait d'ajouter comme des icônes de médias sociaux, comme peut-être quelque part ici en bas. Mais nous allons le faire dans la vidéo suivante. 31. Ajouter des icônes des réseaux sociaux: Maintenant, ajoutons les icônes des réseaux sociaux. Et je pense que le moyen le plus simple serait de saisir les icônes pour le plugin de design et de taper sur Facebook. Je suggère de garder vos icônes comme des icônes de médias sociaux, comme dans un ensemble. Donc, si vous voulez utiliser Awesome Font Awesome, vous pouvez simplement utiliser Font Awesome. Si vous souhaitez utiliser des icônes ioniques ou autres, vous savez, je vous conseillerais garder vos icônes cohérentes. Alors, peut-être allons-y avec le simple. Je ne sais pas pourquoi j'aime ça. Peut-être parce que c'est simple. Cette icône Facebook. Et je vais essayer de le mettre ici, peut-être quelque part, quelque part ici. Et je vais le rendre plus petit. Mais je vais d'abord m' assurer que ce rapport d'aspect de verrouillage est vérifié. Nous n'obtenons donc aucune distorsion lorsque nous sommes des électrons qui forment nos atouts. Maintenant, ajoutons Instagram. C'est ce type ici. Laissez-moi juste essayer de l'attraper. Et gardons les choses cohérentes. Faisons 24 heures. Ajoutons peut-être Twitter. C'est ce type ici. Encore une fois, hauteur 24. Peut-être ajoutons, ajoutons LinkedIn. Voyons si nous l'avons ici. Nous le faisons. Donc 24, mais bloquons le rapport hauteur/largeur. Donc, 24, je suppose que nous pourrions peut-être ajouter comme Pinterest. Est-ce qu'on l'a ici ? Nous le faisons. Nous allons donc refaire le rapport d'aspect, verrouiller le rapport d'aspect et 24. Oh, nous devons faire maintenant, c'est simplement les placer là où ils doivent aller. Je vais donc essayer de les saisir tous et de les aligner au centre. Et peut-être les distribuons-les pour qu'ils ressemblent plus ou moins à ça. Je vais peut-être les mettre ici. Et je vais apporter, ce modèle est peut-être quelque part ici. Cela va savoir, nous allons simplement utiliser plus d'espace disponible ici. Et je pense que toutes ces icônes, laissez-moi juste essayer de les saisir toutes devraient avoir, devraient être cohérentes dans leur apparence comme dans leur apparence primaire. Mais faisons en sorte qu'ils soient aussi gris clair. Cela va paraître un peu mieux à mon goût. Mais je pense que ce serait une belle touche de design si on faisait en sorte ces gars en vol stationnaire changent les couleurs pour correspondre, au moins comme correspondre vaguement aux couleurs de leur marque. Pour ce faire, nous devons simplement transformer ces gars en composants. Donc, je vais d'abord créer ce composant type, appelons-le ça. Bien que je suppose, je suppose que c'est assez explicite. Donc l'état par défaut de ce type est tel quel, mais son état de survol va être simplement, laissez-moi peut-être saisir ce remplissage et essayer rendre plus comme Facebook, bleu. Et cette chaussure. Je pense que ça devrait aller bien. Alors, faisons maintenant Instagram. Je pense que je vais juste utiliser quelque chose comme une couleur très, très pâle. Comme un rose fou. Cela devrait être suffisant, cela devrait suffire. Maintenant, pour Twitter, Contrôlez K, créez un composant. Et créons un état de survol. Et à l'état de vol stationnaire, faisons sorte que ce type soit bleu clair. Je pense que c'est plané. C'est un, c'est la couleur de Twitter, quelque chose comme ça. La plupart d'entre eux sont, la plupart de ces réseaux sociaux. Les logos des médias sociaux ressemblent à peu près au royaume de quelque chose de bleu. Parce que maintenant, lorsque nous ajoutons la couleur de LinkedIn, je pense que c'est aussi comme ce bleu. Et ensuite, faisons Pinterest. Ajoutons un état de survol à partir de Pinterest. Et je pense que ce type est, le logo est un peu rouge. Cela devrait être suffisant, cela devrait suffire. Revenez donc à l'état par défaut maintenant, LinkedIn, revenons à l'état par défaut, Pinterest et Instagram par défaut. Alors maintenant, nous allons juste prévisualiser ces gars. Comme vous pouvez le constater lorsque nous survolons ces éléments, ils changent simplement leurs couleurs pour correspondre plus ou moins aux couleurs de la marque. Donc, d'accord, nous avons maintenant des éléments de conception similaires. Nous avons ajouté des effets semblables à des prototypes. Et avant d'appeler ça un jour, moins avec cette section de héros, je pense que ce serait une bonne idée terminer la réactivité. avons donc deux en ce moment. Il suffit de saisir cette image et tous ces éléments et de les transformer ou de les transposer notre plan de travail mobile et mobile. Mais nous allons le faire dans la vidéo suivante. 32. Rende la section du héros réactif: Donc, afin de rendre notre section réactive, nous devons simplement saisir tous ces éléments, ces éléments à gauche et à droite, et simplement les empiler ici à droite. Commençons donc par ces textes. Je vais juste les attraper tous. Comme ces gars ici, je vais juste les copier. Et sur tout mon plan de travail mobile, je vais activer la grille. Et je vais juste coller tous ces éléments. Nous pourrions donc simplement essayer de rendre ces gars plus petits comme ça. Mais je ne pense pas que cela fonctionnera parfaitement. Si nous y ajoutons la touche Maj, vous pouvez voir qu'elle commence à paraître un peu mieux. Ce serait également une bonne idée de simplement aimer non, les aligner sur le centre. Donc ce type, donc le bouton maintenant, ce texte, tous ces éléments ici. Je vais juste les aligner sur le centre. Ça va être un peu mieux. Je pense que ce texte doit également être centré comme ça. Je vais prendre le bouton, mais il est peut-être quelque part ici. Laissez-moi simplement désactiver la visibilité de cette mise en page. Et comme vous pouvez le voir, comme ces icônes, comme ces gars ici, ils ne sont pas comme les plus visibles. Je pense donc que nous ne pourrions tout simplement pas, juste pour l'état par défaut, peut-être simplement changer leurs couleurs en gris très, très clair. J'y vais généralement avec un destin de 88 ans. Je n'ai pas aimé cette couleur maintenant. Et ensuite, nous n'aurons qu'à le faire pour tous les autres. Donc, pour l'état par défaut, remplissez, copiez et collez cet effet F8, affectez la valeur. Bien sûr que vous le pouvez. Vous pouvez utiliser une autre valeur si vous le souhaitez. Si vous pensez qu' une autre couleur serait tout simplement meilleure. Mais je pense que ça a l'air décent. Et maintenant, nous pouvons simplement saisir notre image, cette image ici. Et puis je vais juste le coller. Et bien sûr, il doit être nettement plus petit. Je maintiens la touche Maj enfoncée et je vais simplement placer quelque part au centre. Mais je pense que nous pouvons également utiliser cette fenêtre comme masque de recadrage porte-bonheur. Le masque de détourage plutôt être outil de recadrage et peut-être en faire quelque chose comme ça pour qu'il soit plus visible comme ça. Et on y va. Je pense que ça a l'air plutôt bien. Alors, tu y vas. C'est ainsi que vous sauriez simplement, faites comme des versions réactives de vos sections au moins, de votre maison. Fondamentalement, ce que nous devions faire, c'est créer comme un menu mobile pour notre site. Ensuite, nous avons pris tous les éléments de notre menu de section, section héros, puis nous les avons ajoutés. Nous les empilons verticalement, comme ici, donc ils correspondent simplement à notre port de vue. La prochaine étape serait donc de commencer à ajouter des points comme aucun point principal de notre conception, comme certains de nos services ou des choses comme ça. Nous devons donc commencer une autre section, mais nous allons le faire dans la vidéo suivante. 33. Commençons la section Sévices: Bien, donc nous avons créé la section principale, nous avons créé la section héros. Donc, je suppose que nous pourrions commencer la prochaine section. Et celui-ci montrera simplement ce que nous pouvons faire pour nos clients. Nous voulons donc simplement énumérer nos services. Et vous savez quoi, avant de faire ça, avant de créer un joli fond ici. Et peut-être avant que j'aime peut-être ne pas bouger ce côté haut pour que nous puissions suivre ceci, comme ce schéma de conception ici. Je voudrais peut-être trouver une couleur différente pour cette section. C'est donc comme très distinctif visuellement de la section précédente. Parce qu'ici, nous avons beaucoup de choses à faire. Nous avons toutes nos principales couleurs principales. Et en fait, si je les regarde, j'ai l'impression qu'il y a peut-être quelque chose qui manque quelque chose, un accent de couleur, peut-être quelque chose de plus vif, quelque chose de plus lumineux. Et je vais juste, je veux juste essayer de trouver quelque chose d'intéressant. Pour ce faire, je vais juste copier tous ces codes hexadécimaux. Peut-être pas tous ces éléments, mais comme les plus importants, comme le bleu, c'est comme le teint de la peau et peut-être le rouge. Et puis je vais aller sur coolers.co, coller ces valeurs et essayer de trouver quelque chose de plus intéressant. Bon, comme je l'ai dit, je suis ici chez Coolers.co. J'ai démarré le groupe électrogène. Je vais juste commencer à apporter les couleurs. Donc d'abord ce bleu que je vais coller cette valeur, n comme ça. Et puis je veux juste verrouiller cette couleur, puis la couleur suivante, le teint. Je vais juste le copier. Et je vais juste le coller quelque part ici. Et encore une fois, verrouillez ce type. Et la troisième couleur, donc cette couleur rouge. Je vais juste le coller à nouveau, enregistrer ce type. Et maintenant, nous pouvons simplement appuyer sur la barre pour essayer trouver quelque chose, quelque chose d'intéressant. Je pense que ces verts, eux, pourraient bien fonctionner. Et je ne sais pas si j'aime mieux ce vert foncé ou ce vert plus clair. Je suppose donc qu'on peut simplement les copier. Donc je vais juste cliquer sur Copier les hacks. Ensuite, je vais retourner à XD. Alors ici, je vais juste ajouter cette couleur verte pour aimer cette houle basique, ce fond. Et je vais juste l' ajouter ici. Et je vais prendre le deuxième vert. Donc, ce type ici, on peut juste copier le code. Et encore une fois, je vais l'ajouter à ce remplissage. Je vais juste retourner à mes atouts, cerceaux une fois de plus et ajouter ces verts. Maintenant, nous avons eu ceci, cette nouvelle section avec un nouveau contexte. Et nous pouvons être sûrs qu'à la fois comme ce vert clair et ce vert plus foncé, ils fonctionnent tous deux avec les couleurs que nous avons extraites, essentiellement de notre section héros. Avant de décider, en fait, nous allons y aller, je vais juste double-cliquer ici pour saisir un de ces points d'ancrage. Et je maintiens la touche Maj enfoncée pour faire de Bill, comme un vieux cerveau, ce type juste un peu plus haut pour peut-être comme quelque part ici. Et ça devrait aller, laissez-moi juste voir si j' ai tout compris. Peut-être comme quelque part ici et allons-y. Je ne sais pas si je pense que cela semble bien, donc nous pouvons maintenant décider si nous voulons, nous voulons ce vert ou peut-être ce vert. Je pense que je vais aller avec celui-là. C'est juste un peu plus comme des moyens de subsistance, c'est un peu plus vivant. Et parce que ces couleurs sont, ou peut-être comme un peu ternes. Je pense donc que nous pouvons simplement savoir comme animer les choses avec cette couleur verte ici. Maintenant, nous pouvons simplement ajouter comme certains comme rho, voir mes services ou comment je peux vous aider. Une sorte de titre, puis on peut ajouter les cartes. Mais commençons par le faire dans la vidéo suivante. 34. Ajouter les services: Je vais donc commencer par ajouter le titre. Je vais donc juste prendre l'outil de texte. Et je vais cliquer quelque part ici. Et je vais juste taper quelque chose comme comment je peux vous aider. On y va. J'aime généralement faire comme non, ces titres qui ressemblent un peu plus aux attentes de No client. Donc un sous-semi audacieux, je suppose que ça a l'air bien, mais laissez-moi voir que celui-ci était moyen, le médium ici aussi. C'est si moyen comme ça. Et je vais récupérer l'outil Rectangle, et je vais juste créer un rectangle dans lequel je vais juste ajouter du texte. Je vais donc essayer de trouver mon plugin Lorem Ipsum et je vais juste ajouter du texte comme ça. Et d'après mes atouts, je vais juste choisir ça dès 16 ans, mais vous savez quoi, peut-être que nous pourrions le faire comme 22. Et augmentons la hauteur de la ligne à environ 30. D'habitude, j'aime bien le faire. Pour la hauteur de ligne, j' aime généralement la taille de police plus six ou huit. Maintenant, d'après ma pratique, je viens de réaliser que cela fonctionne généralement, fonctionne mieux en termes de lisibilité. Et aussi, changeons simplement le remplissage en blanc uni. Et faisons en sorte que ces gars soient centrés. Et peut-être que j'ai juste besoin de deux lignes de texte. Et je vais essayer de les mettre au milieu. Je vais donc simplement utiliser cette option Align Center. Je vais faire de même pour ce texte. Laissez-moi juste les mettre quelque part ici. On y va donc. Nous avons obtenu notre titre. On peut peut-être le faire, le faire un peu, le déplacer vers le haut. Nous avons le titre, nous avons le sous-titre. Maintenant, nous pouvons simplement ajouter, comme je l'ai déjà mentionné, quelques cartes. Et ces cartes seront simplement comme des icônes, des titres et des sous-titres des choses que nous pouvons faire pour nos clients, comme la conception Web, le développement Web et Blake, le référencement, conception de logo en noir, marketing sur les réseaux sociaux, toutes ces choses. Encore une fois, je vais utiliser un de mes plugins pour démarrer au moins ce processus comme l'ajout de services. Je vais donc passer aux icônes pour le design. Et disons que je veux d'abord faire comme le web design. Donc, si vous tapez simplement une conception Web, je ne suis pas sûr que nous puissions trouver quoi que ce soit. Eh bien, nous n'allons rien trouver. Faisons quelque chose comme peut-être un ordinateur portable. Voyons voir, ordinateur portable. Faisons peut-être comme un ordinateur portable, Mac. Mais je vais simplement cliquer sur cet arrière-plan pour m' assurer que nous allons ajouter cette icône à proximité. Je vais juste essayer de l'attraper. Laissez-moi juste zoomer. Et disons que cette icône est censée être un peu plus grande. Faisons ça comme ça, peut-être 36 en hauteur. Et je vais juste essayer de le déplacer quelque part ici sur le côté. Et je pense que si nous venons de le faire blanchir, ce serait ennuyeux, je pense. Donc. Au lieu de le rendre blanc, je vais le rendre blanc, mais je suis aussi en arrière-plan. Je vais donc juste saisir cet outil rectangle et je vais simplement maintenir la touche Maj enfoncée pour créer un carré parfait qui ressemblera plus ou moins à ceci. Je n'ai donc pas besoin de l'arrière-plan. Et pour le remplissage, laissez-moi juste saisir mes atouts et commençons peut-être par ce bleu. Et augmentons le rayon de coin juste ici à quelque chose comme peut-être 12. Notez qu'en ce moment, nous réglons le rayon de tous ces coins. Donc, si vous voulez le faire, vous pouvez vérifier ce même rayon pour tous les coins, puis entrer ce rayon d'angle juste ici. Mais si vous souhaitez ajouter des rayons différents pour différents quartiers, vous devez d'abord cliquer sur ce rayon différent pour chaque coin. Et maintenant, vous pouvez faire comme différentes valeurs différentes pour différents coins. Donc, si je ne me trompe pas, le premier sera en haut à gauche, alors nous aurons en haut à droite, en bas à droite, ici et en bas à gauche. Nous allons donc entrer dans le sens aiguilles d'une montre avec ce taux, avec ces rayonnements. Donc, je suppose que 12 points devraient suffire. Allons maintenant rendre ce type blanc comme ça. Et voyons si cela va bien fonctionner. Donc, bien sûr, je dois déplacer ce type un pas en dessous. Je vais donc simplement maintenir la touche Ctrl enfoncée ou maintenir la commande enfoncée si vous êtes sur un Mac. Et puis la touche gauche pour déplacer ce type d'un pas, d' un pas vers le bas. Alors peut-être augmentons la taille de ce type à quelque chose comme 4040 devrait suffire. Maintenant, je vais simplement maintenir la touche Maj enfoncée et cliquer sur cet arrière-plan pour l'ajouter à la sélection. ne nous reste plus qu'à saisir l'icône , puis à saisir l'arrière-plan sous-jacent en cliquant dessus. Et je vais juste m' assurer que tout est bien aligné sur le centre. Et une fois que c'est le cas, je vais juste appuyer sur Control G pour le regrouper. Ces deux éléments et nous pouvons simplement les déplacer, peut-être comme quelque part ici. Il suffit donc d'ajouter le sous-titre ici ou le titre. Et puis comme certains, comme certains textes. Pour cela, je peux simplement, et je vais sélectionner le titre et le sous-titre. Et maintenant, si je maintiens la touche Maj et la touche Alt enfoncées, et que je vais l' exécuter ici. Je vais simplement Cloud ces deux éléments. Bien sûr, si vous utilisez un Mac, vous pouvez simplement utiliser la touche d'option pour cela. Il suffit donc de taper quelque chose comme le web design. On y va. Et bien sûr, il faut que ce soit des solides beaucoup plus petits qui font quelque chose comme 28. Et mettons-le quelque part ici. Et rendons ces gars plus petits. Faisons peut-être quelque chose comme ça et je vais le mettre quelque part ici. Et comme vous l'avez remarqué, lorsque nous déplacons ces éléments , vous pouvez voir que nous obtenons, nous obtenons ces marqueurs qui nous montrent les distances entre des éléments spécifiques tels que dans cette région. Nous pouvons donc être sûrs que ces gars ne sont pas semblables les uns entre les autres à distances égales, non ? Nous avons donc eu la conception Web. Maintenant, nous pouvons peut-être saisir tous ces éléments. Une fois encore. Je vais maintenir touche Alt et la touche Maj enfoncées pour cloner ces gars quelque part ici. Et je vais commencer par changer le contexte et me rappeler que c'est un groupe. Nous devons donc double-cliquer pour accéder à ce rectangle. Et d'après mes couleurs, on y va peut-être, ça doit aller avec le teint de la peau. Et maintenant, nous devons changer l'icône parce que ça va être, disons que ce sera un développeur web. Cela signifiait le développement Web. Et essayons de me trouver quelque chose comme le code ou icône de codage et le code. Faisons peut-être comme celui-ci. Et il faut qu'il aille quelque part ici. Et ce type doit entrer dans ce groupe. Et je crois que c'était, oui, c'est ce groupe 20. Je vais donc juste saisir cette icône et je vais simplement l' imprimer ici. Et nous n'avons plus besoin de cette icône, donc je vais juste m'en débarrasser et sa hauteur est de 40. OK ? Je vais donc utiliser cette icône, changer sa couleur en blanc, et je vais changer sa taille à 40. Analogiste, saisissez le rectangle ainsi que l'arrière-plan et l'icône. Je vais donc simplement cliquer sur la touche Maj sur cet élément restant ici dans mes calques. Et je vais juste m' assurer que tout est bien aligné sur le centre. Et puis nous pouvons simplement, vous savez, comme déplacer ce gars quelque part ici. Et bien sûr, nous pouvons simplement nous assurer que ces gars-là sont bien alignés aussi. Et je vais les déplacer quelque part ici. Donc je vais le faire, je vais répéter le processus. Et bien sûr, jusqu'à ce que cela dépend totalement de mu, nombre de services que vous voulez, que vous voulez partager, vous voulez vous montrer. Elle peut être trois, elle peut être quatre. C'est totalement, totalement à vous de choisir. OK. J'ai donc fait un entretien ménager de base. Comme vous pouvez le voir, j'ai un groupe comme à gauche que nous pouvons appeler une carte de conception Web. Et il a notre icône notre texte d'arrière-plan et le titre ici. Et le top sera le Web, la carte. Et il a les mêmes éléments. Donc maintenant, nous pouvons simplement aimer saisir, disons celui-ci. Nous pourrions simplement le cloner sur le côté et créer une autre carte. Ou nous pourrions simplement cliquer avec le bouton droit de la souris dessus, eh bien, cette entrée de calques et simplement choisir le double. Mais comme vous pouvez le constater, il s' empilera simplement sur le précédent. Je suppose que ce serait une meilleure façon. Une meilleure technique de production serait simplement de maintenir la touche Alt et de déplacer ce gars sur le côté. Vous pouvez donc décider du nombre, nombre d'éléments que vous voulez ici. Il peut y en avoir trois, ça peut être pour, vous savez, c'est totalement, totalement à vous de décider. Vous pouvez avoir comme le référencement, des choses, vous pouvez avoir comme le marketing sur les réseaux sociaux, peut-être comme la création de cours en ligne de y nught. Ce sera totalement à vous de choisir. J'ai donc changé la couleur et j'ai changé le titre. Bien sûr, nous devons changer l'icône. Je vais donc accéder à mes plugins et au référencement. Je ne pense pas que nous aurons une icône pour le référencement, mais nous pouvons faire quelque chose comme la recherche. Voyons voir, peut-être que je vais aller avec cette icône de loupe. Et encore une fois, c'est ma carte copiée. Bien sûr, je dois changer de nom. Donc, ce sera comme une carte SEO. Et je vais saisir cette icône et je vais juste la mettre dans ce groupe. Et je n'ai pas besoin de cette icône. Notre icône Metro, aura 40 pixels de hauteur. Et il va avoir une couleur différente. C'est tellement blanc. Et nous devons simplement essayer de le mettre à l'intérieur. Voyons si je peux juste savoir. Je pense que ça a l'air. Très bien. Bien sûr, il va falloir aligner ces cartes. De plus. Mais pour l'instant, je vais peut-être copier ce type une fois de plus. Je veux juste avoir comme un autre joker ici. Je veux juste faire quelque chose comme peut-être la conception de logo, quelque chose, mais c'est plutôt ce que le design web ressemble aussi au graphisme d'une certaine manière, mais aucun logo ne serait, je suppose un peu plus spécifique. Et ce type, donc ce rectangle, je vais changer son nom en logo. On y va. Donc, ce rectangle va être rayonné. Nous allons peut-être vérifier cette couleur, peut-être comme la couleur noire. Allons-y avec ce design de logo gris foncé foncé. Quel type d'icône devrions-nous rechercher, comme la conception de logo. Essayons quelque chose comme un stylo. Peut-être. Je ne sais pas si nous allons avoir des plantes ou moins, c'est comme un stylo. Ils ont eu un crayon porte-bonheur, un porte-stylo. Ça a l'air plutôt bien. Je l'aime bien. Et nous n'avons pas besoin de cette icône. Faisons en sorte que cette icône soit en hauteur à 40, comme les autres. Et je vais juste essayer de le déplacer à l'intérieur de mes antécédents. On y va. Maintenant, ce que je ferais, c'est que je vais juste prendre le tableau d'art et ramener la mise en page. Et maintenant, nous pouvons voir si nous pouvons peut-être aimer les faire, comme ces cartes aussi grosses, par exemple, que nos colonnes. Donc, si je les attrape maintenant et que je vais maintenir la touche Maj enfoncée. On peut peut-être aimer les faire gros et ce type aussi. Je vais donc juste être imprimé quelque part ici. Peut-être un peu plus petit, quelque chose comme ça. Et ensuite, nous allons faire la même chose avec celui-ci. Bien sûr, ce n'est pas comme obligatoire. Si vous avez une sorte de taille définie, vous pouvez certainement l'utiliser parce que je veux juste vous montrer comment utiliser cette grille de colonnes et afin de définir comme comment, la taille devrait être grande. Nous allons peut-être imprimer ce gars quelque part ici. Je pense que ce type devrait être plus grand. Bien sûr, nous pouvions simplement savoir, voir la taille de nos premiers groupes. Donc, quelle est la taille de ce groupe, 398 par 353. Nous pouvons donc essayer de faire la même chose ici. Donc, trois, 98353. Faisons donc 353. Ce 1398 par trois, je crois que c'était 3353353. Et puis ce type, donc 398353. Laissez-moi juste le mettre quelque part ici. Donc maintenant, nous pouvons simplement saisir tous ces éléments et tout simplement, comme les aligner, les distribuer horizontalement. Peut-être les aligner sur le haut. Et laissez-moi maintenant cliquer sur l'éditeur de mise en page. Ça va ressembler à quelque chose, quelque chose comme ça. Maintenant, bien sûr, nous pourrions peut-être simplement déplacer certaines choses. Disons que je pense que ce type devrait être un peu, juste ce texte devrait aller quelque part ici. Et je pense que le reste semble bien. Maintenant, si vous le souhaitez, vous pouvez saisir uniquement ces morceaux de texte et peut-être plus qu'un peu plus qu'un peu plus. Comme le résumé ici. Ça devrait être, ça devrait aller. Et peut-être veillons-nous à ce qu'ils soient aussi bien placés au sommet. Et je pense que ça semble bien. Encore une fois, vous n'avez pas besoin de rendre ces icônes aussi grandes que les colonnes. Je voulais donc simplement vous montrer comment vous pouvez utiliser cette grille pour, par exemple, placer vos éléments similaires ici. Avant d'appeler ça un jour avec cette section, je pense que je vais simplement double-cliquer à l'intérieur saisir ces deux points d'ancrage et les déplacer vers le bas. Je veux juste aimer, ajouter comme un bouton ici. Comme si un appel à l'action va dire quelque chose comme afficher plus ou en savoir plus. Mais nous allons peut-être le faire dans la prochaine vidéo. 35. Ajouter le bouton Appel à l'action: Notre bouton d'appel à l'action va donc être très, très simple. On peut juste aller chercher celui-là. Alors, laissez-moi juste essayer de trouver le bouton à l'intérieur de ce groupe. Je vais juste le copier. Et je vais essayer de le coller quelque part ici. Allons-y ici. Et si nous venons maintenant de prévisualiser notre conception, nous pouvons tout simplement avoir tout ce qui est cohérent. Et, vous savez, ajoutez essentiellement un bouton comme celui-ci. Mais peut-être que je vais juste le faire monter un peu. Et je pense que c'est peut-être le cas, ça pourrait le rendre un peu plus grand. Donc, au lieu de cacher 72 couches, on peut être comme 96. Et mettons-le au centre. Voyons maintenant à quoi ça va ressembler. Ou je ne veux pas me fendre les cheveux ici. Mais je pense que ça a l'air bien. On pourrait peut-être ajouter plus d'espace de respiration ici. Donc je vais juste saisir d' abord bien sûr que nous devons double-cliquer à l'intérieur de cet élément, l'arrière-plan. Maj, cliquez sur ces deux points d'ancrage inférieurs, et je vais juste les faire descendre. Nous pouvons donc maintenant saisir ce bouton et le déplacer peut-être comme ici pour garder l'espacement cohérent. Donc maintenant, si on vérifie à quoi ça ressemble maintenant, oui, je suppose que ça va très bien. Ces éléments, ces hydrogènes, sont peut-être un peu trop gros. Donc, si vous ne les aimez pas, vous pouvez toujours les rendre plus petits, mais au moins ils sont importants et tout le monde le remarquera donc, tout le monde le remarquera. Permettez-moi de vérifier la taille de ce texte. Il est donc 18 ans et je crois que c'est 18 ans. Donc, puisque nous avons agrandi le bouton, augmentons peut-être la taille de cette police à quelque chose de 26. Ça va être un peu trop. Peut-être 22 ans. Et bien sûr, il faut que ce type aille au centre. Voyons donc maintenant, je suppose que ça semble un peu mieux, je suppose, que la dernière chose à faire ici en termes de création de cette section serait simplement de l'ajouter, comme la rendre réactive. Nous devons donc encore l'ajouter à notre plan de travail mobile domestique. Commençons par le faire dans la vidéo suivante. 36. Rende les services réactifs: S'ouvrir à faire maintenant, c'est saisir tout le tableau d'art mobile. Et nous allons le rendre nettement plus grand. C'est génial. Jusqu'ici, peut-être. Et je vais commencer par saisir, saisir le fond. Je vais juste le copier. Et je vais aller sur le plan de travail mobile de ma maison. Et je vais juste le coller et l' amener à peut-être comme, je veux juste savoir, je ne veux pas que cette fille soit comme flottant dans les airs comme ça et elle a l'air d'être flottant dans les airs comme ça et elle a l'air coupée en deux. Je vais juste essayer de l' apporter peut-être quelque part ici. Ce qui devrait être correct. Je ne veux même pas savoir, comme m'embêter ou peut-être, vous savez, peut-être que je ne veux pas être dérangé par le fait de rendre ce type un peu plus petit. Apportons ça comme quelque part ici. Et encore une fois, je vais juste double-cliquer à l'intérieur pour amener ce type à peut-être comme quelque part ici, ça devrait être ok. Et je pense que nous allons devoir peut-être aimer étendu, encore plus loin pour accommoder tous les éléments restants. Mais pour l'instant, je vais juste saisir ces deux éléments et, encore une fois, aller sur mon mobile domestique. Ces gars sont donc copiés dans mon presse-papiers Control V pour les coller. Donc maintenant, je peux simplement saisir ce groupe qui n' aime pas ici. Et remarquez que nous avons obtenu cette taille réactive, comme vérifiée ici. Il est actif. Donc, lorsque nous le réduisons, il sera réactif. Nous pouvons conduire à XD, faire le poids lourd pour nous et en faire deux à la taille de notre tableau. Eh bien, parfois vous pouvez obtenir des résultats similaires que vous ne vouliez pas vraiment obtenir. Je veux dire, si nous essayons maintenant de faire en sorte que ces gars aiment adapter les livres. Je vais donc essayer de faire sorte que vous puissiez voir que la taille devient trop petite, comme ça. C'est bon, comme ce texte ici. Mais nous ne voulons certainement pas avoir ce texte comme ce texte pour être aussi petit. Et je suppose que la différence est que c'est parce que c'est comme le texte artistique. Et cela est fait en utilisant, eh bien, d' abord en leur créant le cadre avec l'outil rectangle, puis en ajoutant du texte à l'intérieur. Et ici, nous venons d' ajouter du texte avec l'outil de texte. Et non, ça n'a pas l'air si génial. Ce que je ferais, c'est que je prendrais juste ce type ici. Je veux dire, je saurais juste entrer, placer mon curseur ici et j'appuierais sur Maj plus Entrée. Et maintenant, je peux simplement attraper comme ce type par le bas et peut-être le rendre un peu plus grand comme ça et imprimer ce type ici. Mais voyons si nous aimons peut-être prendre, comme enlever celui-là. Est-ce que ça va regarder, je vais enlever cette entrée difficile. Est-ce que ça va bien paraître ? Ramenons la grille de mise en page. Comme vous pouvez le constater, c'est un peu trop gros. Donc, réduisons peut-être quelque chose comme ça, comme 35, peut-être 34 ans et moins. Allons juste parler de ce type. Et voyons si 34 suffisent. Je suppose que ça suffirait. Il n'est pas plus grand que celui-ci et celui-ci a 41 ans. Mais si on fait ça 141 pour garder les choses cohérentes, je pense que ça va être trop gros. Il va certainement être trop gros. Donc ici, nous pourrions encore faire ça dur dur Enter et voir à quoi ça va ressembler. Je ne pense pas que ça paraisse, je ne pense pas que ça soit génial, mais c'est à nous qu'il ne faut pas qu'il soit aussi grand que celui-ci, ce qui serait notre chef de file. Celui-ci pouvait donc rester comme ça, et celui-ci était fixé à 22. Essayons peut-être de faire 18 ans. Peut-être que ça va paraître un peu, un peu mieux. Mais si nous le faisons, nous devons augmenter ou diminuer la hauteur de la ligne de 30 à 18. Nous allons sélectionner plus six va être un 24. Et voyons à quoi ça ressemble. Sachez ce que nous allons faire. Peut-être 26, donc 18 plus huit. Je pense que c'est un peu mieux. Encore une fois, nous pouvons maintenant saisir comme cette icône Web Design. Et je pense que je vais ramener la grille de mise en page. Et je vais essayer de le coller et de le mettre quelque part ici au centre. Et voyons maintenant si notre taille ou nos fonctionnalités réactives vont fonctionner correctement. Essayons donc de rendre ce type plus petit dans un endroit comme ici. Essayons de le mettre au soleil, au centre. Je pense qu'il doit encore être un peu plus petit, quelque chose comme ça. Et je pense que je vais peut-être aimer mec, ce type. Nous avons donc fait ces années 1800. C'est 22. Je pense. Vous savez quoi ? Faisons ce type comme basique, basique 16. Je vais donc m'emparer de ce style de personnage. De mon puits, essentiellement de mes actifs. Mais bien sûr, nous devons changer la couleur et voir à quoi elle ressemble. Et je pense que je vais le rendre nettement plus petit, quelque chose comme ça. Et je suppose que ça devrait paraître correct, je veux juste garder quelque chose comme une hiérarchie ici, donc je veux agrandir ces gars. Et je ne veux pas rendre ce sous-titre aussi gros que ces gars ici. Je pense que si on les garde comme ça, ça devrait aller. Une autre chose que je pense que nous pourrions faire c'est peut-être que nous pourrions faire ça comme ça. Je peux juste un peu plus petit à quelque chose comme ça. Tout va bien se passer. Et bien sûr, nous devrions peut-être amener ces gars un peu plus haut. Juste pour que cela semble un peu plus propre, peut-être comme ici dans notre version mobile. Voyons donc rapidement à quoi ça va ressembler. Ici. Je pense que tout va bien, donc ce que nous devons faire maintenant, c'est que nous devons saisir tous les éléments restants et simplement les empiler verticalement ici. Par exemple, je vais juste saisir la partie développement Web ici et peut-être, avant de le faire, encore une fois, je vais double-cliquer à l'intérieur, saisir ces deux points d'ancrage et simplement du jus dans notre cerveau et stupide, épinglez-les, peut-être comme deux quelque part ici. Juste pour être sûr. Et je vais encore une fois, laisse-moi juste éteindre ça parce que maintenant on peut simplement coller ce type. Peut-être le mettre comme quelque part ici. Et si nous ne prenons ces éléments ou cette conception web, une carte, nous pouvons voir que sa taille est réglée à 269 en hauteur, 318 en largeur. Alors, voyons si nous pouvons nous en sortir avec juste savoir comme entrer ces valeurs. C'était donc encore 38269. Voyons donc 318 et faisons comme 269. Voyons si ça va marcher. Je ne pense pas qu'il ait disparu. Donc je suppose qu'il serait préférable de savoir simplement, ne pas faire ces éléments comme avant. Donc, tout d'abord, je vais m'emparer de celui-ci. Je vais juste changer la taille à 16 et la hauteur de la ligne à 22. Et bien sûr, il doit être nettement plus petit à quelque chose de ce genre. Et je vais le faire ressembler plus ou moins à ça. Maintenant, celui-ci reste ici, mais c'est comme cette icône et l'arrière-plan doit être plus petit. Si vous l'avez remarqué, ces types ne sont pas groupés, donc nous n'avons pas de valeurs de largeur et de hauteur similaires ici. Si nous faisons des groupes, c'est peut-être notre premier. Je vais regrouper ces éléments. Donc, cette icône et ce rectangle, je vais les regrouper. Et maintenant, nous pouvons voir ces valeurs ici. Donc, si je ne fais que saisir ce rectangle et cette icône, je vais les regrouper. Et donc, je pense que c'était un 114. Faisons donc 114. On y va. Et encore une fois, je vais juste m'assurer que ces gars sont bien alignés sur le centre. On y va. Ensuite, nous pouvons simplement saisir ces deux éléments et simplement les placer en haut. Encore une fois, passons à notre, maintenant celui-ci, prenons notre design de mobile domestique et voyons à quoi cela ressemble. Cela semble plutôt correct, donc maintenant tout ce que nous avons à faire est d'ajouter simplement le référencement et le design du logo. Laissez-moi le faire très rapidement et je reviendrai vers vous. J'ai donc ajouté toutes les cartes et j'ai ajouté le bouton En savoir plus. J'ai également changé cela, mais la taille de notre arrière-plan. Nous pouvons donc maintenant simplement prévisualiser à quoi cela ressemblerait sur notre appareil mobile. Nous avons donc eu le menu. Et maintenant, si nous avons juste fait un zoom arrière et que nous allons faire défiler vers le bas, vous pouvez voir que tous nos éléments ont été ajoutés. Bien sûr, si vous le souhaitez, vous pouvez modifier la taille de celui-ci, peut-être les titres et peut-être les icônes. Ce sera totalement, totalement à vous de décider. Je pense que c'est bien comme ça en ce moment, on peut toujours le modifier, le modifier plus tard. Mais le plus important est que vous compreniez comment gagner ajouter toutes les cartes comme celles-ci et comment les ajouter plus tard ? Eh bien, comment les empiler dans la version réactive de votre design. 37. Commençons à ajouter les éléments du portfolio: Nous avons donc notre section services et bien sûr, nous l'avons fait comme mobile. Comme vous pouvez le voir, je n'ai tout simplement pas corrigé un certain positionnement. J'ai juste ajusté un peu la taille pour que tout soit un peu plus beau. Et maintenant, nous pouvons commencer à ajouter la section portefeuille. Ce que je vais faire, c'est que je vais juste saisir ces deux éléments. Je vais les copier. Va ici et je vais juste les coller, bien sûr, ce que j'aimerais faire , c'est changer les couleurs. Donc, d'après mes atouts, je vais juste choisir comme ces couleurs, ces couleurs plus foncées. Et ici je vais juste le faire, je vais juste taper quelque chose comme vérifier mes projets ou quelque chose comme ça. Ça devrait être, ça devrait aller. Bien sûr, la chose que nous aimerions faire ici est d'ajouter des éléments comme des portefeuilles. Et vous pouvez le faire de nombreuses façons. Habituellement, les portefeuilles que vous verriez sur les pages d'accueil sont présentés sous forme de galerie. Et cette galerie peut être bien empilée, peut être présentée par stagiaire. J'aime bien une grille ou peut-être une maçonnerie, une disposition tuiles et des choses comme ça. Mais ce sur quoi nous allons nous concentrer ici c'est d'ajouter de l'interactivité à vos éléments de portefeuille afin que quelqu'un qui survole sa vignette de portefeuille puisse voir une sorte de interaction. Mais avant de le faire, je vais ramener la mise en page comme ça. Parce que je veux juste savoir, je veux simplement baser ma grille sur mon système de 12e colonne. Donc d'abord, je vais juste ajouter peut-être comme un simple rectangle. Et ce sera comme si c'était le premier élément de portefeuille, la vignette, puis nous allons y ajouter de l'interactivité. Je vais donc juste attraper l'outil Rectangle. Et je vais créer un rectangle qui s' étendra sur ces trois colonnes. Allons le rendre un peu plus grand, quelque chose comme ça. Et je vais juste le remplir avec un je ne pense pas qu'il ait besoin d'une frontière. Je vais juste le remplir avec une partie de la couleur, mais juste pour que vous puissiez mieux la voir maintenant, je vais juste correspondre à cette couleur. Mais en fin de compte, je veux juste remplir d'une sorte de photo. J'utilise donc le plug-in Pexels ici. Je vais juste taper du design. Les images ici ne sont vraiment pas si importantes. C'est à peu près le fait que nous allons chercher, mais peut-être que je vais juste ajouter du graphisme. Et je vais juste ajouter celui-là. Pourquoi pas ? Je vais juste cliquer dessus. Et comme vous pouvez le voir, nous avons déjà cette image de surgissant ici et d'être joliment contraints par notre rectangle qui fonctionne essentiellement comme un masque. Je vais donc juste cliquer sur cette mise en page pour que vous puissiez tout voir un peu mieux. Je vais le faire baisser un peu. Donc ce que je veux faire ici, c'est que chaque fois que je survole cette image, je voulais juste voir apparaître un titre de ce projet. Et nous demanderons des sous-titres qui seraient plus, peut-être plus semblables à certaines catégories ou à des informations supplémentaires. Avec ce rectangle sélectionné, je vais peut-être ajouter un autre rectangle qui sera comme, vous savez, aussi grand. Peut-être que je vais juste saisir mon outil de rectangle et créer un rectangle qui va ressembler à ça. Encore une fois, sans bordure. Laissez-moi juste vérifier si la taille est correcte. C'est donc 5366285366 à huit. Et je vais juste le couvrir comme ça. Et maintenant, je vais juste leur attraper une couleur plus foncée, peut-être comme celle-ci. Et ce que je fais maintenant, c'est que ce sera finalement notre état de vol stationnaire. Mais pour l'instant, je veux juste que vous compreniez ce qui se passe ici. J'ai donc eu cette légère clé. Comme une couverture qui sera aussi un arrière-plan. Mais bien, il couvre l'image en dessous et ce sera l'arrière-plan du titre et du sous-titre. Je vais donc récupérer l'outil de texte. Et je vais juste cliquer quelque part ici. Et je vais taper quelque chose comme un élément de portefeuille. Et c'est peut-être un peu trop gros. Essayons quelque chose comme 42. Peut-être même quelque chose de plus petit, plus petit comme 36. Et je vais le mettre quelque part ici au centre. Et je vais juste cloner et enfoncer certains en maintenant les touches Maj et Alt enfoncées pour cloner. Ceux-ci, ce type et cette contrainte, c'est son mouvement. Et ici, ça va être comme, tu sais, une marée, un titre ici. Et ce type va être plus petit et peut-être plus léger. Essayons comme 22. Je pense que ça devrait paraître correct. Et je vais essayer de les placer quelque part au centre. Cela devrait être suffisant, cela devrait suffire. Ça a l'air, ça a l'air bien. Ce que vous voyez en ce moment, c'est l'état de survol de ce qui sera bientôt un composant. Je vais tout sélectionner et je vais appuyer sur Contrôle. Ou si vous utilisez un Mac, appuyez sur Commande K pour créer un composant à partir de ce type. Nous pouvons donc même l'appeler comme un article de portefeuille comme ça. conséquent, dans l'état par défaut, inactif veut voir ces éléments. Donc ce rectangle sous-jacent. Donc ce type ici, il faut qu'il soit parti. Je vais donc en parler, porter son opacité jusqu' à 0. Et ces gars, je veux, je suis Paul, je veux aussi porter leur opacité à 0, mais je veux aussi les déplacer. Je vais donc emmener ce gars sur le côté, au bord de cette composante. Et nous allons imprimer son opacité jusqu' à 0. Et avec ce type, je vais l'amener sur le côté, sur le côté droit. Et je vais également imprimer son opacité à 0. Donc maintenant, c'est notre état par défaut, mais quand nous y ajoutons l'état de survol, donc dans l'état , je vais juste revenir à mes couches. Donc ici, je veux saisir le, c'est le rectangle sous-jacent. Je veux donc porter cette opacité à 100 %. Et puis l'élément du portefeuille, ce type doit aller au centre. Donc, ça devrait être comme quelque part ici. On y va. Et bien sûr, son opacité doit aussi aller à 100 %. Bien sûr, nous pouvons toujours simplement vérifier, ne pas aimer l'article de portefeuille. Ce type, on peut toujours cliquer sur ce centre d'alignement, mais je pense que nous l'avons bien aligné. Et ce type doit également avoir son opacité à 100 %. Et encore une fois, nous pouvons faire la même chose. On peut juste l'aligner sur le centre comme ça. Donc maintenant, dans l'état par défaut, ne voyons rien d'autre que dans l'état de survol. Ces gars sont de retour, en arrière ici, donc je vais passer rapidement en mode aperçu. Je vais donc appuyer sur Commande ou Contrôle et Entrée sur mon clavier. Si vous utilisez un Mac, vous devez appuyer sur Retour de commande. Et cela va ressembler à ceci, donc nous ne pouvons pas tout voir et quoi que ce soit pour le moment. Survolez-le. Vous pouvez voir ces gars comme entrer. Nous avons donc obtenu notre arrière-plan sous-jacent, retrouvant son opacité. Et ces deux éléments. Donc, comme l'élément du portefeuille, nom et un type, eh bien, certains sous-titres devraient être écrits ici en fait. Ces gars sont donc comme s' envoler de côté et ils retrouvent également leur opacité. Ce que nous pouvons faire maintenant, c'est que nous pouvons simplement cloner cet élément pour le savoir, pour créer essentiellement comme une grille de miniatures d' éléments de portefeuille. Et nous n'aurions pas créé notre section portefeuille. Mais commençons à le faire dans la vidéo suivante. 38. Finissons le portfolio: Donc, avant d'ajouter d'autres éléments similaires à ceux de portefeuille, nous pouvions simplement en ajouter, comme un système de filtrage inconnu, juste pour indiquer ce que nous aimerions réaliser ici. Ainsi, chaque fois que quelqu'un clique sur ce filtre, comme la catégorie , il verrait les éléments correspondants ajustés. Je vais juste cloner rapidement ce type ici. Et je vais d'abord taper quelque chose comme tout. Et bien sûr, il doit être beaucoup plus petit. Donc, ça va ressembler à ça. Et peut-être que nous allons faire comme 18 ans. Ça devrait aller bien. Et puis je vais juste le cloner sur le côté et taper quelque chose comme ce que l' on appelle la conception Web. Et bien sûr, je vais l'agrandir un peu. Et encore une fois, Colonia décide que je vais taper quelque chose comme le développement Web. Quand l'attribution. Et bien sûr, la dernière chose serait d'ajouter, ajoutons le design du logo. Je pense que nous avions un logo dans nos services. Donc, la conception du logo, et je vais juste les faire s'aligner bien. Mais je pense que nous devons peut-être corriger ces textes, ces cadres de textes. Ces gars-là sont donc bien alignés. Cela devrait être mieux comme ça. Je vais les mettre quelque part ici. Et peut-être pourrions-nous aussi ne pas aimer, ne pas indiquer quelle catégorie est active. Donc, la catégorie, alors que la catégorie active ne serait pas plus importante. Nous pouvons donc simplement saisir tous ces éléments. Nous pouvons, à partir de nos atouts, nous pouvons peut-être tout comme nous pouvons simplement changer la couleur pour qu'elle soit moins visible. Et peut-être que je vais juste amener ces gars. Ces gars doivent se rapprocher et les placer au centre quelque part ici. Je vais donc ramener ma grille comme ça. Maintenant, ce que nous pouvons faire, c'est que nous pouvons simplement aimer ce gars cloné de ce côté, certains retenant à la fois les touches Maj et Alt. Et je vais peut-être le rendre légèrement plus grand et peut-être plus grand à quelque chose comme ça. Nous allons donc créer comme une maçonnerie. Maintenant, changeons simplement cette photo ici, mais assurez-vous d'abord que nous sommes sur le bon rectangle pour qu' elle soit réellement sélectionnée. C'est donc ce type ici. Et choisissons simplement quelque chose qui ressemble un peu plus à quelque chose de différent. Ou celui-ci est génial. Alors, choisissons celui-ci. Je ne sais pas quel genre de projet de conception Web ou de développement Web il s' agirait, mais ça semble correct. Maintenant, si nous avons juste un aperçu de notre élément, vous pouvez voir qu' en effet, nous avons comme ces mêmes éléments qui se produisent ici lorsque nous survolons ce type. Mais ils sont exactement les mêmes, les mêmes valeurs que celles que nous avons ajoutées à ce composant. Nous devons donc les modifier, comme l'état du survol ici également avec ce composant. Pour ce faire, prenons notre composant et passons à l'état de survol. La première chose que je ferai, c'est que je vais juste récupérer mon article de portefeuille ou cet article. Je vais passer à l'état par défaut et je veux juste vérifier sa taille. Il est donc écrit 674997. Je pense que je vais juste copier la largeur et je vais essayer de me souvenir de la hauteur, donc 997. Donc maintenant, dans l' état survol, encore une fois, nous devons saisir ce rectangle et nous pouvons également saisir ce rectangle et coller ce rectangle dans 997 et dans l'état de survol, également ces Les gars doivent aller au centre. Je pense donc qu'ils devraient aller quelque part ici. Et si je passe juste à mon état par défaut , nous pouvons vérifier si tout fonctionne correctement. Je pense que nous devons encore travailler sur le positionnement de ces éléments comme dans eux. Bien que ça semble plutôt bien comme ça. Mais pour pouvoir maintenant conserver le même effet qu'ici, nous devons certainement travailler sur le positionnement par défaut de l'argument positionnel de ces éléments. Donc, si nous passons à l'état stationnaire, je pense que c'est cool, comme ça, ça a l'air correct. Je pense que c'est comme le moyen le plus résistant aux erreurs fixer le positionnement de ces éléments Lorsque nous copions simplement les valeurs et ensuite les recoller. Donc, si vous passez à l'état de vol stationnaire, nous pouvons simplement saisir, prenons cet élément de portefeuille. Donc ce titre ici, et vraiment tout ce dont nous avons besoin, c'est la valeur y, donc la position, comme la position verticale, pour ainsi dire. Je vais juste copier ça. Je vais revenir à l'état par défaut. Je vais prendre le titre de l'élément de portefeuille, et je vais juste le coller. Et puis je vais revenir à l'état de survol, prendre ce sous-titre, saisir cette position verticale, passer à l'état par défaut de l'élément de portefeuille. C'est un peu comme si c'était très laborieux , mais je pense que pour garder les choses cohérentes, je pense que c'est le meilleur moyen. Nous avons donc obtenu ces valeurs, collez-les. Et si nous survolons ce type maintenant, vous pouvez voir que ces gars sont en fait dans la bonne position. Mais bien sûr, je pense que j' ai oublié de changer cette image. Allons-y. Essayons de trouver cette image funky, c'était ce type. Encore une fois, si maintenant je n'ai vraiment rien gâché, si nous revenons au mode de prévisualisation, vous pouvez voir que tout fonctionne comme prévu. Tout ce dont nous avons vraiment besoin en ce moment, c'est de continuer à créer notre mise en page pour que nous puissions le savoir, cloner ce gars quelque part pour décider. Et puis peut-être diminuer la taille pour peut-être aimer quelque chose comme ça. Vous pouvez le rendre encore plus petit que ce que nous pouvons cloner et peut-être ici et augmenter la taille de ce guide à quelque chose comme ça. Alors on pourrait peut-être, peut-être pas, peut-être même le rendre un peu plus grand. Maintenant que nous le pouvons, maintenant on vient de faire tomber ce type. Laissez-moi juste le construire joliment. Donc, ça ressemble plus ou moins à ça. Je pense que ce type devrait l'être, devrait monter un peu. Mettons-le quelque part ici. Et je vais peut-être le rendre un peu plus petit, mais augmenter sa taille, quelque chose comme ça. Et enfin, ce type va descendre, ici et je vais juste faire ressembler à ça. Bien sûr. Maintenant, si je clique simplement dessus, si nous passons à notre aperçu. Nous avons donc obtenu cet élément, des éléments ajoutés. Mais comme vous pouvez le constater, encore une fois, nous devons juste fixer le positionnement, fixer les images, et notre portfolio devrait l' être, il devrait être complet. Laissez-moi le faire maintenant très rapidement et je reviendrai vers vous dès que possible. Comme vous pouvez le constater, tout cela prend beaucoup de temps. Vous devez faire beaucoup de réglages et quelques ajustements. Mais une fois que vous avez terminé, je pense que l'effet semble assez intéressant. Lorsque nous aurons terminé, nous pouvons simplement connaître un certain positionnement. Lorsque nous avons terminé, nous devons toujours utiliser, vous savez, notre portefeuille sur notre plan de travail mobile. Et je pense que ça va être assez long. Mais commençons à le faire dans la vidéo suivante. 39. Raisons le portfolio rétrospectif: Comme pour toutes nos sections précédentes, ce que nous devons faire maintenant, c'est simplement mettre notre section portefeuille sur le plan de travail mobile. Je vais donc juste prendre ce titre de la première diapositive et le sous-titre. Et encore une fois, permettez-moi d' apporter la grille de mise en page. Et ici, je vais juste coller ces gars-là. Et voyons si on peut vraiment s'en sortir avec Lucknow qui rend ces gars un peu plus petits, peut-être quelque chose comme ça. Je ne pense pas que nous puissions le laisser, voyons peut-être maintenant ce que nous avons ici. Alors, voyons que celui-ci est moyen de 34 ans et que ce type est un magasin régulier des 800. Donc 34 moyens. Peut-être. Nous allons juste vérifier. Fais ça fort. Le cœur entre ici. Et ce type était censé être une équipe. Et je suppose que ça devrait paraître, d'accord, peut-être que je vais le rendre un peu plus petit. Et ça devrait aller, laissons-le comme ça. Ensuite, ajoutons ces filtres. Le son se contente de copier, de copier ces éléments ou Contrôler C ou Commande C si vous êtes sur un Mac, puis collez-les simplement ici. Alors maintenant, ne mettons simplement pas ces gars comme une liste qui va ressembler plus ou moins à ça. Je veux garder comme de plus grands écarts entre ces éléments, car cela rendrait simplement plus facile de les utiliser sur un appareil mobile et mobile. Mais bien sûr, je dois les placer au centre et à l' ensemble du groupe. Cela devrait paraître correct, mais bien sûr, nous devons toujours saisir tous ces éléments et les distribuer correctement. Donc, ça ressemble plus ou moins à ça. Maintenant, nous pouvons simplement saisir cet élément de portefeuille copié et collé ici et le mettre quelque part ici. Et encore une fois, il va falloir jouer avec le positionnement comme ça. Et n'oubliez pas que nous allons devoir le faire pour le monde entier, comme tous les États. Je ne vais donc pas être comme conserver les variations de tailles simplement pour rendre les choses un peu plus propres et plus faciles à faire pour nous. Donc. Je vais peut-être ajouter rapidement ces éléments. Alors copiez et collez quelque part ici. Et je vais y arriver, faire en sorte que ce type soit plus petit. Je vais juste voir à quel point ce type est vraiment grand. Il s'agit donc de 454, et bien sûr , nous devons l'attacher aux colonnes. Donc pour 54 ans, comme ça, je vais peut-être en parler. Une fois encore. Ce type a été collé ici pour le rendre plus petit. Et encore une fois, était-ce quatre ou 54 ? Je crois que c'était le cas. Et puis peut-être que nous allons faire ce type. Copie collée ici. Rendez-le encore plus petit. Et quatre ou 54. Et il nous reste encore comme ces deux gars. Alors collez-le ici. Faites-le plus petit pour quatre ou 54 ans. Et montez. Et encore une fois, ce type le colle ici, le met là où il faut aller. Puis quatre ou 54, comme ça. Mais bien sûr, nous n'en avons pas fini parce que, vous savez, une fois que nous avons survolé ces gars, donc si nous avons juste un aperçu de ce type, je vais aller ici. Vous pouvez voir que lorsque nous le survolerons, cela n'aura pas l'air bien. En fait, ça va paraître assez terrible. Nous devons donc refaire toutes ces choses pour tous les États. Donc, au moins, vous connaissez la taille. Donc, faites-le comme plus petit. Et pour 54 comme ça, encore avec ce type, pour l'état de vol stationnaire. Tellement plus petit et quatre ou 54. Et je pense qu'il doit encore être plus petit, ce type aussi comme ça. Et bien sûr, nous devrons régler ce problème. Eh bien, le texte. Donc, ce gars a l'air d'aller bien. Allons attraper ce type. Et voyons, comme dans l'état par défaut, faisons quelque chose comme 38. Vingt-cinq, c'est peut-être un peu trop. Allons-y 1. Le 0 mai, c'est un peu plus. Je vais juste en faire un ici et je vais, non, je ne vais pas t'ennuyer sans voir les distances de tous les autres éléments. Je vais le faire rapidement comme hors caméra. Mais juste pour voir ce qu'il va faire, comment cela doit être fait. Donc, état par défaut, faisons juste trois. J'ai peut-être copié ce type. On y va. Par conséquent, l'état par défaut doit regarder, devrait regarder. Bon, permettez-moi maintenant de le faire rapidement pour tous les éléments restants. C'est vrai ? Donc, quand tout est fait, lorsque toutes les distances et toutes les tailles sont essentiellement suivies, et bien sûr, j' aime aussi changer légèrement la taille de ces éléments. Vous pouvez voir à quoi ça ressemble, c'est un peu mieux en ce moment. Jusqu'à présent, c'est très bien, mais nous ne voulons pas juste que quelqu'un survole pour voir. J'aime bien ces éléments, comme ces éléments interactifs. Nous voulons également indiquer que lorsque quelqu'un clique sur l'un de ces éléments, l'utilisateur sera en fait dirigé vers une sous-page comme une sous-page pour avec eux, avec notre portfolio d'images lumineuses ou un galerie séparée qui soit d'une manière liée à l'un de ces éléments ici. Nous pouvons donc, bien sûr, faire ici, à l'intérieur Adobe XD, et nous allons vraiment le faire. Mais dans la vidéo suivante. 40. Ajouter un carrousel d'image: Donc, l'effet que je veux obtenir ici n'est pas seulement quelqu'un qui survole l'un de ces éléments. Et il va voir un titre et un sous-titre, ce genre d'effet. Mais aussi lorsque cette personne clique sur l'une de ces vignettes, elle sera comme ne pas la rediriger vers lui, vers un carrousel d'image qui sera bien sûr également interactif. Alors, faisons-le maintenant. Donc, ce que je vais faire, c'est juste pour créer un nouveau plan de travail. Je vais donc prendre l'outil Plan de travail. Et je veux que ce carrousel d' images couvre toute la fenêtre d'affichage. Je vais donc choisir comme le bureau Web 19, 1920. Je voudrais ajouter quelques éléments ici. Tout d'abord, je vais juste donner l'impression que nous sommes toujours sur le même tableau artistique. Je vais donc simplement copier tous ces éléments et je vais les coller ici même sur ce carrousel d'images. Parce que chaque fois que vous le souhaitez sur une page Web typique, lorsque vous cliquez sur quelque chose comme un élément de portefeuille, comme le lit, la toile de fond reste, mais c'est comme, comme couvert de ce carrousel d'image. C'est donc ce que je veux réaliser ici. Donc, ce type reste. Mais je vais le couvrir d' comme un simple rectangle que chaque bordure. Mais il va avoir un noir chanceux et ensuite se remplir. Et essayons quelque chose comme 90 % peut-être de l'opacité. Donc, ça ressemblerait essentiellement à ça. Peut-être faisons-le quatre-vingt-cinq, comme ça. Donc, sur ce fond, je veux ajouter comme une image, un carrousel d'image. Et je vais créer quelque chose de très, très simple, comme un curseur où les trois images juste pour que vous compreniez comment créer un carrousel d'image ou un curseur comme celui-ci ici dans XD. La première image que je vais utiliser sera cette image ici. Essayons peut-être de le copier. Je vais juste copier ce type et essayer de le coller ici. Et bien sûr, j'aimerais l' agrandir considérablement. Donc, ça ressemble plus ou moins à ça. Peut-être un peu plus grand. Quelque chose comme ça. Cela devrait suffire. Maintenant, en bas, je vais juste taper quelque chose comme le titre du projet. Donc le titre du projet, mais je veux qu'il s'agisse d' liste nettement plus petite de quelque chose comme 26. Et je vais changer sa couleur en blanc uni. Et je vais essayer de le mettre quelque part au centre, quelque part ici. Pour que tout fonctionne, nous devons ajouter d'autres images et les masquer. Laissez-moi juste saisir ce rectangle et je vais le copier sur le côté, peut-être comme quelque part ici à gauche. Et peut-être que tu sais quoi, c'est vraiment comme, prendre tout, tous ces éléments et je vais le faire avec le tableau d'art et ce type. Je vais d'abord essayer de saisir le plan de travail. Je vais le mettre quelque part ici. Tout de suite, les images ne couvrent pas ces plans de travail ici. Et voyons si ce que nous allons simplement le copier une fois de plus sur le côté. Et je vais juste essayer de changer cette image. Faisons quelque chose comme peut-être, je ne sais pas, Designer. Et ajoutons une image. Rappelez-vous, comme essayons peut-être d'en trouver un comme le web design. Et c'est peut-être normal, comme Ajoutons cette image. Pourquoi pas ? Et copions encore une fois ceci, passons de ce côté. Les gars l'ont mis quelque part ici, et nous allons peut-être ajouter celui-ci. Pourquoi pas ? Donc maintenant, comme je l'ai déjà mentionné, nous devons masquer ces gars. Encore une fois, je vais récupérer l'outil Rectangle et je vais créer un rectangle qui va couvrir cette image. Il n'est pas nécessaire d'avoir une bordure, mais nous devons ajouter tous ces éléments. Donc ces deux images et aussi les éléments sous-jacents, ou peut-être qu'il serait plus facile d'attraper ces deux gars. Je vais les mettre quelque part ici au sommet, juste pour que vous puissiez tout voir mieux. Et ce type va y aller, peut-être le mettre au sommet aussi, quelque part ici. Et cet élément va aussi aller au sommet de quelque part ici. Et je vais juste m' assurer que tous ces gars sont bien alignés. Ensuite, bien sûr, cette somme, comme ce rectangle blanc, doit aller au sommet. Ce sera notre masque en élément. Je vais donc saisir tous ces éléments et nous pouvons aller dans le menu Objet et choisir Masque avec Shape ancien simplement ou simplement utiliser le raccourci Maj plus Control plus M. Donc, ce n'est pas le cas, c'est masqué. Je vais donc l' apporter ici. Donc, ici, quelque part, quelque part ici, ça devrait être, ça devrait être un peu mieux. Nous avons donc besoin d'une sorte de navigation ici. Je vais juste prendre l'outil stylo. Et je vais simplement créer, la touche Maj enfoncée comme une tête de flèche qui ressemblera à ça. Faisons le blanc. Et rendons-le beaucoup plus épais, mais peut-être plus petit à quelque chose comme ça. Et je vais le mettre quelque part ici. Bien sûr, nous pourrions également le mettre sur le côté. Mais c'est juste, je l'aime juste ici. Ensuite, je vais juste le cloner sur le côté. Je maintiens donc les touches Maj et Alt enfoncées. Et à partir du panneau Transformation ici, je vais juste choisir le retournement horizontal. Et lorsque nous sélectionnons tous ces éléments maintenant, nous pouvons simplement aimer les distribuer horizontalement. Et peut-être que je vais les regrouper pour l'instant parce je veux juste m' assurer qu'ils sont bien au centre. Et maintenant, nous pouvons les dissocier. On y va. Ce que nous devons faire maintenant, c'est que nous devons créer un composant à partir de notre masque. Et cette petite flèche et ces petites flèches à gauche et à droite. Je vais donc en faire un composant. Et c'est en effet notre état par défaut, mais nous avons besoin de quelques états supplémentaires. Je vais donc ajouter un nouvel état qui s' appellera la diapositive 1. Et dans cet état, si nous essayons simplement d' atteindre notre masque, il suffit de saisir ce rectangle, ce rectangle et ce rectangle. Donc, toutes ces images et simplement les déplacer sur le côté vers quelque part ici. Ensuite, je vais ajouter un nouvel état. Et ce sera notre diapositive à pas parce que l'état par défaut est en fait notre diapositive, diapositive pour comme dans ce groupe. Donc notre diapositive trois va être, laissez-moi saisir à nouveau le masque, tous ces gars et simplement les déplacer le côté vers quelque part ici. Donc, état par défaut, glissez un, donc l'image de gauche, l'image de gauche, diapositive trois, l'image de droite. Nous pouvons donc maintenant passer au panneau prototype. Et ici, tout ce que nous devons faire. Nous devons aimer dire aux flèches de pointer vers un état spécifique. conséquent, dans l'état par défaut, je veux saisir cela. Commençons par la flèche gauche. La flèche gauche lorsque nous sommes dans cet état, lorsque vous cliquez dessus, doit aller sur la diapositive, la première diapositive. Je vais donc ajouter une interaction. Il y aura un tapotage, animation automatique, et je vais choisir la diapositive 1. Et ce chemin, cette flèche va avoir une interaction et s' animer automatiquement, choisissez tableau d'art. Et nous allons aller avec la diapositive trois. Maintenant, lorsque nous cliquons sur la flèche gauche, nous allons passer à la diapositive. Et la flèche droite, lorsque vous cliquez dessus, va nous conduire à cette diapositive trois. Mais nous devons le faire pour toutes les diapositives. Je vais donc passer en mode design. Et dans le composant, je vais choisir de revenir au prototype. Et ici, lorsque nous cliquons sur cette diapositive, cette flèche gauche. Quand on clique, ce type est censé nous emmener à notre troisième diapositive parce que nous créons quelque chose comme une boucle infinie ici. Et ce type, donc la flèche droite, lorsqu'on clique, est censée nous amener au style par défaut, qui est notre deuxième diapositive. Et le dernier gars est notre diapositive trois. Encore un prototype. Et ici, quand on clique, eh bien, ok, commençons par celui-là. Donc, lorsque nous cliquons sur la flèche droite, il est censé nous emmener à cette diapositive, une. Et quand nous cliquons sur ce chemin cinq, donc notre flèche gauche, ce type est censé nous amener à notre état par défaut et je ne joue pas avec ces choses. Maintenant, comme la durée quand elle est définie par défaut comme ça, je pense que ça semble correct. Donc maintenant, nous pouvons réellement, quand je retourne à la conception, à la conception et à l'état par défaut, nous pouvons simplement vérifier à quoi cela ressemblera. C'est donc notre état par défaut. Cliquons une fois. Nous allons revenir à la la diapositive 1, cliquez à nouveau, à nouveau sur la diapositive trois, encore une fois. Et comme vous pouvez le constater, tout fonctionne bien, bien. Mais il y a encore deux choses nous devons bien faire, tout d' abord, nous devons pouvoir annuler ce carrousel d'images. Donc, pour cela, je vais passer au prototype. Et ici, nous pourrions ajouter comme un symbole X. Mais je veux que vous appreniez comme une autre, une technique différente. Je sélectionne l'ensemble de mon tableau artistique et je vais ajouter une interaction. Mais au lieu de la gâchette, je vais le régler pour perdre et gagner Pad. Et ici, nous pouvons simplement appuyer sur une touche pour en faire un déclencheur pour notre interaction. Je veux donc simplement que l'utilisateur puisse simplement appuyer sur la touche Echap du clavier pour annuler ce tableau d'art. Je vais juste appuyer sur Escape. Et notre destination est notre page d'accueil. Et aussi quand nous allons à notre, je vais aller à la conception et je vais prendre ce composant, passer à l'état stationnaire , puis revenir au prototype. Par conséquent, lorsque quelqu'un clique sur ce composant, je vais ajouter une interaction. Et cette interaction va être exploitée. Je veux qu'il soit dirigé vers notre carrousel d'images. Je vais donc revenir au design. Maintenant, je veux juste que vous compreniez tout ce schéma d'interactivité ici. Je vais donc simplement faire défiler vers le bas jusqu'à notre portefeuille. Lorsque je le survole, vous pouvez voir que cette animation se produit. Cliquez dessus. Nous allons aller à notre carrousel d'images. Et bien sûr, ici, nous avons fait fonctionner notre carrousel et appuyez sur Escape pour revenir à notre page d'accueil. 41. Commençons à ajouter la section Blog: Très bien, nous avons donc créé notre section portefeuille ici. Et si vous remarquez, j'ai déjà simplement aimé mon tableau d'art allongé. Je viens donc d'attraper le tableau d'art et je l'ai simplement rendu un peu plus long. Parce que ici, je veux ajouter une autre section. Et cette section va être notre blob. Mais comme nous commençons à ajouter beaucoup de choses ici, je pense que c'est une bonne idée de faire un entretien ménager de base à ce stade de notre conception. Donc, si nous voulons sélectionner tous ces éléments et accéder à nos calques, vous pouvez voir que nous l'avons fait, tous ces éléments sont simplement placés sur notre page d'accueil, votre tableau d'art. Et je n'en veux pas, je ne veux pas que ça ressemble à ça. Je veux simplement les regrouper. Je vais donc juste appuyer sur Control G sur mon clavier. Et je vais appeler ça comme portefeuille, une section, comme ça. Ensuite, je vais essayer de saisir tous ces éléments. Donc, la section des services n'aime pas. Ce sont donc tous ces éléments. Je vais les regrouper à nouveau. Et ce type va être comme Monsieur, section des services. Et ensuite, je vais saisir tous ces éléments. Donc ces gars ici, je vais les regrouper et je vais les appeler comme section nav plus héros. Et de cette façon, quand vous en aurez, eh bien, quand vous travaillerez avec eux avec ce fichier spécifique que je vais vous fournir. De cette façon, je garde les choses organisées, mais je le garde également organisé pour vous. Donc, comme vous allez travailler avec ce dossier, je pense qu'il sera plus facile pour vous de comprendre ce qu'il y a ici. Nous pouvons donc maintenant commencer à créer notre section blog. Et je veux qu'il soit différent de celui de la section précédente du portefeuille. Je vais donc simplement à l'outil Rectangle, créer un rectangle ressemblant plus ou moins à ceci. Je ne veux pas qu'elle ait de frontière, mais je veux qu'elle soit remplie. Je pense que ça va être un peu plus sombre. Ainsi, lorsque nous faisons défiler vers le bas, vous pouvez voir que c'est tout simplement beaucoup plus différent que dans la section précédente ici. Et bien sûr, tout ce que nous avons à faire ici, c'est ajouter une sorte de titre avec l'outil de texte. Je vais juste taper quelque chose comme voici mon blog. Et j'aime bien la couleur blanche, mais je veux m'assurer que la taille correspond celle des titres de la section précédente. C'est donc un médium subquatre. Et bien sûr, il se trouve ici même dans nos atouts. Mais si nous cliquons sur les ressources, vous pouvez voir que la couleur change. Je ne veux pas ça. J'aime bien ça. Eh bien, le poumon blanc va le col blanc ici, de couleur claire. Et je veux qu'il aille au centre, peut-être un peu plus haut. On pourrait aussi attraper ça, ce gars juste ici. Donc le sous-titre, et peut-être aussi quand je serai ici, je vais juste saisir ces éléments aussi. Et je vais les copier, les coller ici et les mettre quelque part ici. Bien sûr, la couleur de ce type doit également être blanche. Et pour ce qui est de ces types, ce que je veux en faire, c'est que je veux simplement les transformer en catégories similaires de mon blog. Je veux juste montrer que, vous savez, j'ai des articles comme catégorie Web designer, le développement web, le référencement, toutes ces choses. Donc je veux avoir comme ce bouton Tout ici, mais je vais changer de couleur pour peut-être aimer ce type. Et ces gars. Voyons voir. Je pense que c' est cette couleur grise. Oui, c'est vrai. Je pense que ça a l'air bien. Vous savez quoi ? Je pense que c'est beau et ça va certainement être cohérent. Mais je vais juste changer le texte par catégorie, peut-être comme un. On y va. Et bien sûr, il faut qu'il soit juste un peu plus grand. Ce type. Peut-être qu'on peut simplement copier ce type et coller le, coller ce type n. et ça va être deux. Et ce type va être de catégorie trois. On y va. Et bien sûr, il faut qu'il soit un peu plus grand comme ça. ne nous reste donc qu' à sélectionner tous ces éléments. Peut-être que je vais juste les élever et les sélectionner et simplement m'assurer qu'ils sont bien distribués au centre. Bon, nous avons donc fait nos premiers pas dans la création de cette section de blog derrière nous. Et je pense que dans la prochaine vidéo, nous pouvons commencer à ajouter des extraits de billet de blog. 42. Commençons à ajouter les extraits de publications de blog: Ainsi, comme dans le cas de notre portfolio, nous pouvons ajouter des extraits de nos articles de blog. Tout d'abord, activez la grille de disposition comme celle-ci. Et maintenant, nous pouvons simplement décider combien, combien d' extraits d'articles de blog nous voulons ici. Créons-les rapidement comme une maquette d'extraits de notre billet de blog. Je vais juste prendre l'outil Rectangle. Et disons que je vais créer quelque chose comme ça, peut-être un peu plus petit comme ça. Et puis je peux juste saisir mon rectangle et peut-être imiter quelque chose comme un titre. Et puis je vais l' attraper encore une fois et le rendre plus grand, quelque chose comme ça. Donc, ce serait fondamentalement notre nul. Ce sera notre image, ce serait notre titre et ce serait notre, gros, quelque chose comme un extrait de notre billet de blog. Je vais peut-être l' amener un peu ici. Mais je pense aussi que nous pourrions ajouter quelque chose que nous n'aimions pas auparavant. Je vais juste copier ce gars haut et je vais le rendre plus petit, comme beaucoup plus petit. Et cela pourrait imiter notre nom de catégorie à gauche et peut-être comme une date à droite. Et peut-être que je vais juste amener ce type juste un peu ici. Et ce que nous pourrions faire, c'est que nous pouvions simplement saisir tous ces éléments, les Klong sur le côté. Et puis une fois de plus pour voir si nous voulons vraiment que ces gars ressemblent à quelque chose, quelque chose comme ça, tout ce que trois suffiront. Mais je veux saisir ces éléments. Nous avons donc simplement les éléments du texte, pour ainsi dire. Je vais les amener quelque part ici. Et je vais faire entrer ce type un peu plus longtemps. Peut-être même un peu plus longtemps ou quelque chose comme ça. Juste pour que tu saches, juste pour que ça ne ressemble pas à une grille super, super uniforme, voire un peu plus longue. Donc deux, quelque chose comme ça. Et je vais aussi attraper ces éléments, les descendre quelque part ici, et imprimer ce gars quelque part ici. Donc, ce serait fondamentalement notre disposition comme une grille. Mais nous pourrions également saisir tous ces éléments à l' exception de l'arrière-plan. Et je pense que mes antécédents ne sont pas correctement définis comme ça. Permettez-moi maintenant de rendre cet arrière-plan un peu plus long. Donc, ça ressemble plus ou moins à ça. Maintenant, nous pourrions simplement aimer jouer avec le positionnement de notre cellule de grille sans l'arrière-plan. Je vais juste cloner ces gars. Je maintiens la touche Alt enfoncée. Je vais le cloner pour aimer quelque part ici. Ensuite, je vais attraper ces gars. Donc ces éléments, à l' exception de l'arrière-plan, je suppose que nous pourrions peut-être aimer verrouiller l'arrière-plan. C'est donc notre rectangle ici. C'est notre contexte. Je vais juste le verrouiller. Et maintenant, on peut juste attraper ces gars et les cloner quelque part pour décider. Ça devrait être, ça devrait aller. Maintenant, permettez-moi de saisir ces éléments et de les cloner au mur, au fond quelque part ici. Il s' agirait donc essentiellement d'une grille pour nos éléments. Et vous pouvez jouer avec, avec des grilles comme celles-ci pour qu'ils le sachent, afin qu'elles aient l'air exactement comme vous aimeriez qu'elles aient l'air. Et en gros, ce dont nous avons besoin ici, c'est simplement transformer ces éléments comme ces principaux éléments en images mises en avant. Et bien sûr, je ne veux pas que ce type ait une frontière. Je ne veux pas non plus que ce type ait une frontière. Peut-être que je vais juste les sélectionner tous et m'assurer qu' aucune d'entre elles n'a réellement de frontières comme ça. Maintenant, je peux simplement sélectionner comme ce rectangle. Encore une fois, Paxos. Essayons donc de ne pas aimer trouver quelque chose comme un designer cette fois. Allons peut-être aimer ce type. Allons peut-être faire cette fille ici. Alors voyons, peut-être faisons quelque chose. Peut-être comme ce type. Alors, faisons-le, chargeons plus. Et ajoutons que le créateur de mode n'aime pas Angus. Bien sûr, c'est juste que la représentation n' est qu'une maquette. On va peut-être faire ce type. Et enfin, celui-ci, ici. La prochaine étape consisterait à ajouter du texte à nos titres, comme des titres maquettes et des maquettes comme des acceptations. Il en va de même pour le bon plug-in. Donc Lorem Ipsum plugin, nous pouvons simplement le remplir avec du texte d'espace réservé. Et bien sûr, il faut qu'il soit plus grand. Passons donc à nos atouts. Essayons comme ça, un submédium 36, et faisons-le blanc comme ça. Et je suppose qu'à ce stade, peut-être que nous pourrions simplement activer, désactiver la grille de disposition comme ça pour que vous puissiez mieux voir ce qui se passe ici. Je suppose que c'est le cas. Ok, on pourrait peut-être même l' ajouter en tant qu'atout. Faisons, plutôt que comme SF-36, faisons un billet de blog ou comme x, ou peut-être un titre de billet de blog. Comme ça. Nous pourrions faire la même chose ici. Donc les plugins, les derniers réglages, ce gars. Encore une fois le titre de mon billet de blog. Essayons peut-être de trouver quelque chose comme un texte différent. Mais encore une fois, je vais aller dans mes résidus de plugins comme Lorem Ipsum. Et faisons le titre de notre billet de blog. Faisons la même chose ici. Alors Lorem Ipsum, Alice, ajoutez-les ici et ensuite ici. Et puis on peut simplement cliquer sur ces gars. Peut-être que ça va être un peu plus rapide et changer la couleur. Donc, ça ressemble plus ou moins à ça. Maintenant, nous pouvons faire la même chose avec ces gars. Voyons en fait si je sélectionne tous ces éléments, tous ces rectangles, je vais aller au plugin. Voyons s'il est assez intelligent pour ajouter du texte à tous ces éléments. Faisons donc un Lorem ipsum rapide. L'a était sur la façon dont nous pouvons supposer que vous pourriez trouver une meilleure police pour cela. Je vais commencer par peut-être un sous-16. Et je vais changer la couleur en blanc. Mais je suppose que cet extrait est peut-être un peu trop gros. Et peut-être essayons quelque chose comme 22. Et faisons comme 32k, peut-être que ça aura l' air un peu mieux. Donc 20 à 32, ajoutons-le à nos styles de personnages, et faisons un extrait de blog comme ça. Nous pouvons donc simplement sélectionner ces éléments sous-jacents alors que ces fragments. Et faisons simplement un extrait de billet de blog comme ça et ça a l'air mal. Ok, peut-être que ces résultats supplémentaires sont un peu trop longs, mais on peut toujours savoir comme peut-être les transformer, les faire paraître un peu différents, quelque chose comme ça. Et peut-être que ce type aussi à quelque chose comme trois lignes ou deux lignes. Il en va de même pour ces gars. Bien sûr. Ensuite, il faudrait simplement ne pas aimer les faire remonter un peu. Il en va de même pour ces gars et de même pour ces gars-là. Bien sûr, la dernière chose à faire ici serait d'ajouter comme une date et un nom de catégorie silicique. Ces métadonnées, comme les métadonnées , sont généralement plus petites. Et ils peuvent également être écrits dans une police différente, mais dans une couleur de police lipidique différente. Je vais donc garder ces éléments, donc ces deux rectangles. Et je vais juste ajouter comme un morceau de texte quelque part ici au centre. Et je vais entrer comme un nom de catégorie. On y va. Je vais peut-être changer sa couleur pour voir si ce gars va travailler. Bien sûr, nous devons changer la couleur d'arrière-plan, mais pour l'instant, je vais juste la mettre quelque part ici. Et je vais le rendre nettement plus petit, comme quelque chose comme 12 peut-être, ou peut-être 14. Cela devrait suffire. Et faisons en sorte que ces gars ressemblent à cette phrase. Ce type est vraiment, vraiment petit. Je vais juste le mettre quelque part ici. Et je vais taper une date. Ça devrait aller bien. Peut-être comme le nom de cette catégorie. Je vais juste taper comme un espace. Et puis je pense que ça s'appelle comme un symbole de pipe et pas quelque chose comme ça. Et peut-être que maintenant je vais juste taper une date. Ce serait peut-être un peu plus facile pour nous. Et voyons s'il va être réellement visible. C'est un peu visible, mais on peut peut-être le rendre un peu plus visible. Donc, rendons ça un peu plus léger à quelque chose comme ça. Alors, tout ce que nous aurions vraiment à faire, c'est peut-être amener ce type. Donc, mais jusqu'à quelque part ici. Et je pense que ça semble très bien. Donc, en fait, tout ce que nous pourrions faire maintenant, c'est de saisir peut-être même tous ces éléments et de les copier simplement. Et nous pouvons simplement les remplacer par ces gars ici. Je sais que nous prenons peut-être même un peu trop de mesures ici, mais je voulais juste vous montrer le processus de conceptualisation de choses, de telles choses. Bien sûr, avec le temps, vous allez trouver, vous savez, vos propres meilleures façons de faire ces choses. Je vais donc juste attraper ces gars et enlever tous ces éléments comme ça. Je vais juste coller ces gars-là. Mais je pense juste que c'est simplement comme un bon exercice pour nous de simplement passer par ces étapes qui savent, peut-être avec le temps , vous allez penser qu' elles sont comme inutiles, qu'ils sont excessifs. Mais vous savez, c'est, je pense que c'est juste une bonne façon d'apprendre comment créer des grilles, des grilles comme celles-ci. Alors permettez-moi de m' assurer que je copie tout ce que j'ai besoin de copier. Je vais les fonder quelque part ici et ils doivent aller ici. Je vais juste le dire comme ça . Ça devrait aller bien. Je vais couper ces gars, enlever ces éléments, puis les coller dedans. Sam va opter pour ces éléments. Encore une fois, je vais coller ces gars ici et les amener sur le côté. Devrait bien paraître, et encore une fois, coupez-les, retirez ces éléments, collez-les à nouveau. Et je vais juste coller ces gars, les mettre ici, les couper, et les remplacer, enlever ces éléments et les remplacer par notre bateau par nos éléments de grille. La dernière étape sera donc d'ajouter comme un bouton qui dirait non, comme en savoir plus ou lire plus, peut-être que ce serait mieux. Je vais donc emprunter ça à notre section des services. Et permettez-moi de m' assurer que ces gars sont bien placés au centre. Donc, au lieu d'apprendre plus de douleurs de type terres, tapons et lisons plus. Ça devrait être, ça devrait aller. Et maintenant, voyons à quoi cela ressemble lorsque nous l'avons prévisualisé sur notre conception principale. Je pense que ça semble, d'accord, bien sûr. Ce dont nous avons besoin pour l'instant, c'est simplement prototyper certaines de ces choses. Je veux dire, par exemple, lorsque nous cliquons sur l'un de ces éléments, nous voulons aller sur notre blog principal, le billet de blog. Ou lorsque nous cliquons sur le bouton Lire la suite. Et comme vous pouvez le voir, je dois aussi changer ce type pour l'état de vol stationnaire. Alors, lorsque nous cliquons sur le bouton Lire la suite, laissez-moi simplement copier ce type. Nous voulons accéder à notre sous-page de blog. Mais c'est quelque chose que je pense que nous allons faire dans la prochaine vidéo. 43. Configurons les pages de blog: Super, nous avons donc reçu des extraits de notre billet de blog sur notre page d'accueil. Et quel serait le bon moment pour créer une mise en page unique d'un article de blog. Et aussi comme une sous-page avec nos articles de blog. Donc, normalement, c'est ce que nous ferions. Mais le fait est que faire ce que nous n'aimerions pas, apprenez de nouvelles choses pour créer ce genre de pages. Vous pouvez utiliser toutes les techniques que nous avons déjà apprises. Mais bien sûr, cela ne signifie pas que nous n'allons pas regarder certains articles de blog sur les pages et non, nous n'allons pas les explorer et expliquer comment les créer. Ce que j'ai fait, c' est que j'ai rapidement créé pour vous des pages bloquantes séparées. Passons donc rapidement à travers ces conceptions. La première page de blog que j'ai créée, vous pouvez voir ici. Bien sûr, en haut, nous avons obtenu notre logo et nous avons le même logo que celui que nous avons ajouté à notre page d'accueil. Il en va de même pour la navigation. Et nous en avons besoin. Nous avons simplement une photo. Je suis avec une opacité tournée vers 15 à 16 %. Bien sûr, nous avons obtenu comme un titre de page et un sous-titre. Ce serait donc comme un exemple de section Héros, héros pour notre sous-page de blog. Maintenant, vous pouvez voir que j'ai créé tout ce qui a essentiellement ajouté les catégories. Il s'agit donc essentiellement des mêmes catégories que l' on peut voir en première page. Et en dessous de cela, j'ai ajouté simple comme une mosaïque de ces articles de blog ou extraits. Mais ici, j'ai créé quelque chose d'un peu différent. Ainsi, dans certaines pages, dans certains designs, vous pouvez voir quelque chose comme un bouton Charger plus. Il existe différentes façons de charger d'autres articles de blog. Vous pouvez voir quelque chose comme une technique de chargement paresseuse. Ce qui signifie qu'une fois que vous faites défiler vers le bas, vous verrez de plus en plus de billets de blog en cours de chargement. Mais vous pouvez également voir quelque chose comme un bouton Charger plus. Et en fait, il s'agit d'un composant, comme vous pouvez le voir ici. On pourrait en fait appeler ça comme le bouton Load More. Et cette composante comporte deux états. Il s'agit donc de l'état par défaut et nous avons l'état Morris de chargement, qui nous montre en gros d'autres messages. Et ce bouton change de chargement plus pour connaître plus de publications nous montrant que maintenant nous avons atteint la fin de la liste. n'y a plus de messages disponibles. Et si nous venons de prévisualiser ce design, donc nous allons descendre, d'ailleurs, comme vous pouvez le voir, ce type, cette navigation fonctionne comme les précédentes. Ainsi, lorsque nous descendons, lorsque nous cliquons sur ce bouton Charger plus, vous pouvez voir que d'autres articles sont présentés ici. Et bien sûr, j'ai laissé de la place ici pour notre pied de page. Nous ne l'avons pas encore créé. Mais une fois que nous l'aurons fait, nous allons l'ajouter à notre billet de blog. Eh bien, blog, sous-page blog. Et bien sûr, il faut que ce soit le même dans toutes les pages. Je viens donc de laisser de la place ici à partir de ma page de blog, design alternatif. J'ai essentiellement ajouté la même section de héros. Mais quand nous descendons, vous pouvez voir que j' ai quelque chose comme un article de blog en vedette ici. Sur la gauche, nous avons l'image de notre héros. Ensuite, nous avons obtenu ce nom de catégorie et cet espace réservé à la date, nous avons obtenu le titre, nous avons obtenu le sous-titre. Et sur la droite en bas, nous avons le bouton Continuer la lecture d'un bouton qui quand il a cliqué. Et alors que ce lien nous amènerait à un seul article de blog. Donc, ici, nous avons eu les catégories. Peut-être que je vais juste venir quelque part ici. Et puis, nous avons essentiellement la même mosaïque qu'avant. Cependant, ici vous allez voir que nous n' avons plus ce bouton Load More, n' avons plus ce bouton Load More mais nous avons une pagination. Alors, quand on prévisualisera ce type sur toi, descends. Vous pouvez voir que lorsque vous survolez ces éléments, ces gars ressemblent cet élément actif ici. Comme je l'ai dit, lorsque nous cliquons sur ce bouton Continuer la lecture ici, nous allons être dirigés vers une seule page d'article de blog. Et c'est le design que j'ai imaginé. Juste un vieux piment, ou du moins les rend un peu plus différents. Pas si ennuyeux que ça. Ce n'est plus comme sombre. C'est comme plus léger pour l'instant, juste pour que nous ayons une certaine variété ici. Mais bien sûr, cette navigation et ces logos sont les mêmes. Nous avons l'image en vedette ici. Et ici, nous avons obtenu notre nom de catégorie et nos dates réservées. Nous avons eu le titre, nous avons obtenu le texte principal ici. Et puis nous avons obtenu quelques éléments typiques d'un billet de blog. Nous avons le nombre de J'aime. Nous sommes arrivés aux icônes des médias sociaux, puis nous avons eu la boîte de commentaires, nous avons obtenu les commentaires. Ensuite, nous avons comme une simple navigation. Donc, pour les publications connexes, nous pouvons, peut-être, si je zoome simplement sur ces gars, vous pouvez voir que nous avons comme un lien de post précédent avec un titre maquette du post précédent. Et nous avons également eu le lien suivant avec un titre. Ici, à droite. On a eu la barre latérale. Et ici, nous avons simplement appris notre , disons que c'est notre créateur freelance. Je sais que c'est une photo différente de celle d'avant, mais dans notre discipline, c'est tout simplement sympa. Nous en avons un peu sur moi, eh bien, nous avons essentiellement ces titres et je recherche les derniers articles, qui sont essentiellement des titres pour ces sous-sections comme. Et bien sûr, nous avons la barre de recherche, nous avons les derniers messages, nous avons les catégories, avons reçu la lettre d'information, et nous avons suivi sur les réseaux sociaux et ces liens ici. Et bien sûr, ces liens, si nous cliquons simplement ici, ils sont la même longueur qu'ils sont sur notre première page et il en va de même ici. Donc, en gros, j'essaie de garder les choses cohérentes. Une fois que nous avons tous ces éléments sont créés. Et comme je l'ai déjà dit, vous savez, je n'ai rien fait de ce que nous n'avions jamais utilisé auparavant. Je n'ai utilisé aucune technique qui serait comme vous inconnue. Je voulais juste vous montrer les variations que vous pouvez faire. Ce que vous pouvez, ce que vous pouvez modifier dans vos mises en page et à quoi devraient ressembler vos mises en page. Et bien sûr, ce fichier de mise en page des articles de blog vous sera livré afin que vous puissiez simplement le télécharger et voir comment tout a été configuré. Mais bien sûr, nous devons encore prototyper certaines choses. Disons donc cela. Supposons que nous voulions utiliser la page du blog pour notre page de blog. Je vais donc simplement essayer sélectionner tout ce tableau d'art et je vais le copier. Et ici, je vais juste essayer de le coller. Je suppose qu'il peut s'asseoir quelque part ici. Bien sûr, il va falloir aussi aimer que tout ne réagisse pas. C'est donc notre page de blog, ce type ici. Et je vais faire de même pour le seul article de blog. Je vais donc attraper ce type et le coller quelque part ici. Nous pouvons donc maintenant commencer à prototyper certaines choses. Je vais d'abord m'emparer de ça. Eh bien, ma page principale, je vais passer au prototype. Et ici, je veux juste essayer de saisir le lien de mon blog. Donc, ce type ici, je veux y ajouter une interaction et ça va être tapé. Et ce type, animons automatiquement ce type censé nous emmener notre page de blog pour les extraits de notre billet de blog. Essayons d'attraper peut-être comme celui-ci. Comme vous pouvez le constater, j'ai fait des choses d'organisation. J'aurai organisé mes éléments en groupes. Disons donc que ce guide est un extrait de blog, va avoir une interaction qui va être tabulation. Et cela va nous amener à un seul article de blog. C'est maintenant que c' est quelque chose que nous pourrions faire pour tous ces types, mais je ne fais que montrer, vous le montrer comme exemple, comme tous ces gars veulent cliquer, ils devraient conduisez-nous à une seule page de blog. Je pense aussi que nous devrions attraper comme ce lien d'accueil, ce type ici. Et nous devrions y ajouter comme une interaction. Et je suis un onglet, ça devrait nous amener à notre page d'accueil. Page d'accueil juste ici. Même chose pour notre blog unique. Encore une fois, l'interaction n'est pas en survol, au toucher. Emmenez-nous sur la page d'accueil. Et je pense que nous pourrions également saisir notre logo et y ajouter une interaction avec les touches. Et cela devrait nous amener à une page d'accueil c'est comme une fonctionnalité standard. Vous savez, chaque fois que quelqu'un clique sur le logo, cette personne doit être emmenée sur la page d'accueil. Et je pense qu'il serait préférable de le faire en tant que composant normal pour notre conception principale, ici même. Mais depuis que je l' ai oublié, et bien, voilà. Cela, eh bien, cela devrait fonctionner correctement. Maintenant. Voyons maintenant à quoi pourraient ressembler nos interactions. Allons donc sur mon blog. Alors cliquons sur, disons celui-ci. Comme vous pouvez le constater, vous êtes transporté par notre page principale. Si nous cliquons sur le lien Accueil, nous allons revenir à notre page. Si nous cliquons sur le blog, nous deviendrons notre blog. Et bien sûr, ce type travaille aussi. Et si nous cliquons sur le logo, nous retournerons à notre page d'accueil. Donc, je suppose que la prochaine étape serait de ne pas rendre tout réactif. Mais dans notre cas, ce serait comme s'emparer de ça, attrapons ce type, ce tableau d'art, rend beaucoup plus long. Ensuite, il nous suffirait de saisir ces éléments et de ne pas les empiler horizontalement. Je suppose que nous pourrions commencer par un peu plus petit. Et puis on pourrait juste amener ces gars au centre. Voyons à quel point ces gars étaient grands. Donc 34. Faisons donc 34. Rendons ces gars plus petits. En gros, je ne fais rien ici de ce que nous n'avions jamais fait auparavant. Et je pense honnêtement que ce serait un excellent travail indépendant pour vous. Je veux dire, vous pourriez simplement faire tout ce qui est censé être fait pour les fabriquer, ces gars sont réactifs. Et je pense que ce serait une excellente tâche que vous devez faire vous-même. Je vais rapidement déplacer ces gars au centre, mettre ça, mettre ces gars au centre aussi, ces catégories. Et maintenant, nous pouvons simplement saisir tous ces éléments et simplement les mettre, les rendre réactifs, les rendre plus petits. C'est juste les tailles. Ensuite, nous pouvons simplement passer à notre prochaine section. Bien sûr, une fois que c'est fait et une fois que ces gars seront également réactifs, et encore vous aurez ce fichier pour vous afin que vous puissiez simplement voir à quoi tout cela ressemblera. Ensuite, nous pouvons simplement passer à notre section. La prochaine section qui, je pense, va ressembler à un symbole Nike About Me. section. 44. Apprenons quelques effets de pagination: Ce que j'ai décidé que ce serait peut-être une bonne idée de vous montrer comment réaliser ces effets de pagination. Donc, oui, commençons par le bouton Charger plus. Comme vous pouvez le constater, j'ai simplement copié tous ces éléments de notre conception principale ici. Je pense juste qu'il pourrait être un peu plus propre de travailler avec nous. J'ai aussi juste trois extraits de billets de blog ici. Faisons donc que je commence rapidement par ajouter beaucoup plus de boutons. Je vais prendre l' outil de texte, cliquer quelque part ici, et je vais juste taper un chargement plus comme ça. Bien sûr, je vais le rendre un peu plus visible pour vous. Faisons donc le blanc. Je ne suis pas trop inquiet pour la police à ce stade parce que, vous savez, ce n'est pas si important. Bien que je suppose que nous pourrions simplement l'imprimer comme ça le plus tôt possible. Et peut-être faisons-le moyen. Et faisons comme quelque chose comme 26 ans. Augmentons peut-être la piste en quelque chose appelé U5, ou peut-être vivre à 50 ans. Et je vais aussi ajouter un simple rectangle qui aura comme une bordure blanche. On y va. Et veillons à ce qu'ils soient bien alignés au centre. Je vais donc regrouper ces gars. Donc, ce que nous voulons faire ici, c'est que nous voulons afficher plus de messages une fois que nous cliquons sur ce bouton Charger plus, n'est-ce pas ? Je pense donc que nous devrions commencer par ajouter ces articles supplémentaires. Je vais faire tomber ce type ici parce que nous voulons créer un composant avec deux états, n'est-ce pas ? Donc je vais juste maintenir la touche Alt avec ce type sélectionné et je vais l' amener ici quelque part ici. Cela devrait suffire. Ce type va aller quelque part ici. Et ce type va aller quelque part ici. Ça devrait aller bien. Ce que nous pourrions faire, c'est que nous pourrions simplement transformer tous ces éléments en ce bouton et ces trois extraits de billets de blog en un composant. Je vais donc simplement maintenir la touche Maj enfoncée, cliquer sur tous ces types. Et je vais simplement appuyer sur Control K sur mon clavier pour créer un composant à partir de ce type. Appelons ça comme charger plus de messages. On y va. Ce type doit donc avoir deux états pour notre état par défaut, nous ne voulons pas voir comme ces éléments, donc nous ne voulons pas voir ce groupe. En fait, nous voulons voir ce groupe parce que c'est notre bouton. Mais nous ne voulons pas voir ces trois groupes restants. Ces messages, n'est-ce pas ? Donc ces gars ici, ce que je vais faire, c'est que je vais simplement baisser l' opacité comme ça. Et nous pourrions faire comme des choses différentes. Donc on pourrait peut-être, voyons voir, peut-être attraper ce bon gars. Et je vais le déplacer de côté quelque part ici. Et je vais attraper le gars de gauche et je vais le déplacer sur le côté juste pour que ça semble hors limites ici. Et le bouton Load More doit aller quelque part ici. C'est donc notre état par défaut. Mais je veux ajouter un nouvel état. Et je vais appeler ça comme peut-être comme un poste chargé, chargé. Faisons ça comme des messages, une faible dette. Et dans cet état, laissez-moi juste saisir le bouton. Le bouton doit aller quelque part ici et il doit dire comme plus de messages. Et bien sûr, cela doit également être plus grand, comme ça. Et bien sûr, ils doivent être mis au centre. de cet élément doit opacité de cet élément doit être ramenée à 100 %. Même chose pour ce type. Et bien sûr, il faut aussi aller au centre. Comme ça, c'est comme un endroit précédent, ce qui serait comme quelque part ici. Et ce type aussi. Donc, l'opacité à 100 % et sa position à placer, pour être réglée comme quelque part, quelque part ici. Et ce type doit descendre considérablement, peut-être comme quelque part ici. C'est donc notre plus grand nombre d'états. Nous pouvons donc maintenant le prototyper. Je vais donc aller dans l'espace de travail prototype. Et ici, ce que je veux faire, c'est que je veux régler notre gâchette sur nos boutons de chargement supplémentaires. Laissez-moi juste saisir ce bouton. Et au robinet, je veux que ce type s'anime automatiquement. Et je veux qu'il aille dans les messages chargés, non ? Alors maintenant, lorsque nous passons à notre mode de prévisualisation, si nous cliquons simplement sur ce bouton Load More, vous pouvez voir que ces bateaux sont bien animés. C'est donc notre première façon d'additionner l'effet de pagination bien like. Ajoutons maintenant le deuxième. Vous pouvez voir que j'ai ma pagination standard ici. Et ce qui se passe ici, c'est tout d'abord que notre page active est indiquée ici. Et lorsque nous survolons l'un de ces nombres comme celui-ci, sur l'effet sous-jacent, comme si un effet de fond se produisait. Voyons donc comment nous pouvons y parvenir. Je vais donc simplement récupérer l'outil de texte et je vais simplement recréer cette pagination. Faisons comme un et peut-être répétons la grille. Il va donc être 12345. Cela devrait suffire. Je vais faire en sorte ça ressemble peut-être à ça. Et je vais dissocier la grille car je vais maintenant ajouter rapidement les chiffres appropriés ici. Donc 12345. Donc, notre page actuelle doit être comme, eh bien, elle doit avoir un arrière-plan approprié. Et nous pouvons simplement attraper une ellipse. Nous pouvons créer une ellipse. Et je vais juste emprunter rapidement cette couleur. On y va. Je n'ai pas besoin de frontière. Et ce type doit aller jusqu'ici, au moins derrière nos chiffres. Donc, cela devrait être suffisant. Je suppose. Cela devrait bien paraître. Maintenant, je veux aimer chaque fois que je survole l'un de ces chiffres, je veux voir ce cercle apparaître en dessous. Et en fait, il peut s'agir d'un cercle, même si nous pourrions aussi aimer le faire, comme un rectangle arrondi complètement arrondi Till forme un cercle. Faisons vraiment ça. Je vais donc saisir un rectangle et je vais en créer un qui ressemble plus ou moins à ça. Ça devrait aller bien. Et bien sûr, je veux que ce type ait un vrai Phil. Et je veux qu'il soit encore en dessous de mes chiffres. Alors, déplacons-le quelque part ici. Et ce sera une bonne idée de placer ces gars centrés et nous devrions en faire une composante, n'est-ce pas ? Je vais donc saisir ces deux éléments et je vais appuyer sur Control K de mon clavier pour le transformer en composant. Nous allons avoir un état par défaut. Nous allons avoir un état de vol stationnaire. Donc, dans l' état par défaut, notre arrière-plan. Donc, ce type, ce rectangle ici, va voir son opacité se transformer simplement à 0. Mais à l'état stationnaire, ce rectangle va avoir son opacité jusqu'à 100 %. Et c'est comme un rayon d'angle réglé sur, comme 100 % ou 100. Je pense que cela devrait suffire. Alors, assurons maintenant que l'état de ce type est défini par défaut. Et nous allons juste prévisualiser ce type. Je vais descendre ici. Et comme vous pouvez le voir, quand on survole, ce type se transforme en, eh bien, on peut voir ce cercle ici. 45. Configurons la page de publication unique et terminons la section: Lorsque nous cliquons sur ce bouton Continuer la lecture, ici, nous allons être dirigés vers une seule page d'article de blog. Et c'est le design que F a imaginé. Juste, vous savez, pimenter les choses ou au moins les rendre un peu plus différentes. Pas si ennuyeux que ça. Ce n'est plus comme l'obscurité. C'est comme plus léger pour l'instant, juste pour que nous ayons une certaine variété ici. Mais bien sûr, cette navigation et ces logos sont les mêmes. Nous avons eu l'image en vedette ici. Et ici, nous avons obtenu notre nom de catégorie et nos dates réservées, et nous avons obtenu le titre. Nous avons reçu le texte principal ici. Et puis nous avons obtenu des éléments typiques de billets de blog uniques. Nous avons donc le nombre de « J'aime ». Nous sommes arrivés aux icônes des médias sociaux, puis nous avons eu la case Commons, nous avons eu les commentaires. Et puis, nous avons une navigation simple. Donc, pour les publications connexes, nous pouvons, peut-être, si je zoome simplement sur ces gars, vous pouvez voir que nous avons comme un lien de post précédent avec une maquette, un titre du post précédent. Et nous avons également eu le lien suivant avec un titre. Ici, à droite. On a eu la barre latérale. Et ici, nous avons simplement appris notre , disons que c'est notre créateur freelance. Je sais que c'est une photo différente de celle d'avant, mais dans notre discipline, c'est tout simplement sympa. Nous en avons un peu sur moi, eh bien, nous avons essentiellement ces titres et je recherche les derniers articles, qui sont essentiellement des titres pour ces sous-sections comme. Et bien sûr, nous avons la barre de recherche, nous avons les derniers messages, nous avons les catégories, rejoignez ma newsletter et nous devons me suivre sur les réseaux sociaux et ces liens ici. Et bien sûr, ces liens, si nous cliquons simplement ici, ils sont la même longueur qu'ils sont sur notre première page et il en va de même ici. Donc, en gros, j'essaie de garder les choses cohérentes. Une fois que nous avons tous ces éléments sont créés. Et comme je l'ai déjà dit, vous savez, je n'ai rien fait de ce que nous n'avions jamais utilisé auparavant. Je n'ai utilisé aucune technique qui serait comme vous inconnue. Je voulais donc simplement vous montrer les variations que vous pouvez faire. Ce que vous pouvez, ce que vous pouvez modifier dans vos mises en page et à quoi devraient ressembler vos mises en page. Et bien sûr, ce fichier de mise en page des articles de blog vous sera livré afin que vous puissiez simplement le télécharger et voir comment tout a été configuré. Mais bien sûr, nous devons encore prototyper certaines choses. Disons donc cela. Supposons que nous voulions utiliser la page du blog pour notre page de blog. Je vais donc simplement essayer sélectionner tout ce plan de travail et je vais le copier. Et ici, je vais juste essayer de le coller. Je suppose qu'il peut s'asseoir quelque part ici. Bien sûr, il va falloir aussi aimer que tout ne réagisse pas. C'est donc notre page de blog, ce type ici. Et je vais faire de même pour le seul article de blog. Je vais donc attraper ce type et le coller quelque part ici. Nous pouvons donc maintenant commencer à prototyper certaines choses. Je vais d'abord m'emparer de ça. Eh bien, ma page principale, je vais passer au prototype. Et ici, je veux juste essayer de saisir le lien de mon blog. Donc, ce type ici, je veux y ajouter une interaction et ça va être tapé. Et ce type, nous allons animer automatiquement. Ce type est censé nous emmener sur notre page de blog pour les extraits de nos articles de blog. Essayons d'attraper peut-être comme celui-ci. Comme vous pouvez le constater, j'ai fait des choses d'organisation. J'aurais organisé mes éléments en groupes. Disons donc que ce guide est un extrait de blog, va avoir une interaction qui va être tabulation. Et cela va nous amener à un seul article de blog. C'est donc bizarre, c'est quelque chose que nous pourrions faire pour tous ces types, mais je ne fais que montrer, vous le montrer à titre d'exemple. Comme tous ces types, quand j'ai cliqué, ils devraient nous emmener sur une seule page de blog. Je pense aussi que nous devrions attraper comme ce lien d'accueil, ce type ici. Et nous devrions y ajouter comme une interaction. Et je suis un onglet, ça devrait nous amener à notre page d'accueil. Alors la page d'accueil ici, même pour notre blog unique. Encore une fois, l'interaction n'est pas en survol, au toucher. Emmenez-nous sur la page d'accueil. Et je pense que nous pourrions également saisir notre logo et y ajouter une interaction avec les touches, et cela devrait nous amener vers une page d'accueil. C'est comme une fonctionnalité standard. Vous savez, chaque fois que quelqu'un clique sur le logo, cette personne doit être emmenée sur la page d'accueil. Et je pense qu'il serait préférable de le faire en tant que composant normal de notre conception principale ici. Mais vous savez, puisque je l'ai oublié , eh bien, voilà. Cela, eh bien, cela devrait fonctionner correctement. Maintenant. Voyons maintenant à quoi pourraient ressembler nos interactions. Allons donc sur mon blog. Alors, cliquons sur, disons celui-là. Comme vous pouvez le constater, vous êtes transporté par notre page principale. Si nous cliquons sur le lien Accueil, nous allons revenir à notre page. Si nous cliquons sur le Blog, nous deviendrons notre blog. Et bien sûr, ce type travaille aussi. De plus, si nous cliquons sur le logo, nous retournerons à notre page d'accueil. Donc, je suppose que la prochaine étape serait de ne pas faire en sorte que tout ne réponde pas. Mais dans notre cas, ce serait comme s'en emparer. Allons attraper ce type. Donc, ce tableau d'art le rend beaucoup plus long. Et ensuite, il nous suffirait de savoir, saisir ces éléments et ne pas les empiler horizontalement. Je suppose que nous pourrions commencer par un peu plus petit. Et puis on pourrait juste amener ces gars au centre. Voyons à quel point ces gars étaient grands. Donc, 34. Faisons donc 34. Faisons en sorte que ces gars soient plus petits. En gros, je ne fais rien ici de ce que nous n'avions jamais fait auparavant. Et je pense honnêtement que ce serait un excellent travail indépendant pour vous. Je veux dire, vous pourriez simplement faire tout ce qui est censé être fait pour les fabriquer, ces gars sont réactifs. Et je pense que ce serait une excellente tâche que vous devez faire vous-même. Je vais rapidement déplacer ces gars au centre, mettre ça, mettre ces gars au centre aussi, ces catégories. Et maintenant, nous pouvons simplement saisir tous ces éléments et simplement les mettre, les rendre réactifs, les rendre plus petits. Ce n'est que les tailles. Ensuite, nous pouvons simplement passer à notre prochaine section. Bien sûr, une fois que c'est fait et une fois que ces gars seront également réactifs, et encore vous aurez ce fichier pour vous afin que vous puissiez simplement voir à quoi tout cela ressemblera. Ensuite, nous pouvons simplement passer à notre section. La prochaine section qui, je pense, va ressembler à un symbole Nike About Me. section. 46. Ajoutez la section « À propos de moi »: Avant d'ajouter à notre section À propos de moi, permettez-moi de vous montrer rapidement ce que j'ai fait en termes de réactivité avec les conceptions de nos blogs. Donc, sur notre principal design de blog. Donc, ce blog principal, quel design mobile ? Je n'ai tout simplement pas aimé tout mettre en place verticalement. Je me suis donc juste adapté à la taille des polices des images. Toutes ces choses, toutes ces choses. Et j'ai décidé de ne pas faire de publicité comme celle-ci, bouton Lire la suite dans le même que celui que nous avons ici. En ce qui concerne notre page mobile de blog, comme vous pouvez le voir, j'ai ajouté le logo ici et j'ai ajouté le menu mobile. Et puis je viens de le mettre sur les idées de design de la page principale. Je viens donc d'ajouter la même image en arrière-plan. J'ai ajouté le même texte , sous-texte ou sous-titre. Et puis je viens d'ajouter les catégories et bien sûr, je les ai empilées verticalement. Ensuite, nous avons eu les extraits du blog. Et cette fois, je viens d'ajouter le bouton Charger plus pour que nous sachions si quelqu'un sur un appareil mobile veut voir plus de pages, veut charger plus de publications. Il suffit de cliquer sur le bouton Charger plus. Et en ce qui concerne eux, un seul bloc immobile. Laissez-moi y aller rapidement. Va ici. On y va. Nous avons donc, bien sûr, notre logo, nous obtenons le menu, puis nous avons l'image en vedette. Ci-dessous. Je viens d'ajouter les métadonnées, le titre et bien sûr le texte lui-même. Ensuite, nous avons obtenu notre section commentaires avec les noms, donc la possibilité d'ajouter un commentaire ici même dans cette zone. Et puis nous avons obtenu les éléments de la barre latérale qui, bien sûr , ne sont pas sur le côté mais en dessous de ces éléments. Nous avons donc obtenu notre section À propos de moi, la section de recherche, des extraits de cet article de blog. Bien sûr, nous obtenons les catégories dans la zone de recherche et bien sûr les icônes des réseaux sociaux. Et je viens de laisser rapidement de la place aux éléments de pied de page qui finiront par arriver à notre conception. Une fois que tout cela est fait, nous sommes maintenant prêts à passer à nouveau pour ajouter à notre section, vous savez, à propos de nous. Donc ça ne sera pas super, super génial. Ici. Je veux juste ajouter une image comme peut-être à droite, quelques textes à gauche. Et peut-être que je vais ajouter un peu de fond à l'image. La première chose que je vais faire, c'est que je vais simplement faire glisser une image, et c'est une image que j'ai prise à partir d'un pixel brut. Donc le même côté que nous utilisons l'avant, peut-être que je vais juste le rendre un peu plus grand. Et je vais le mettre comme peut-être quelque part ici. Je souhaite ajouter un arrière-plan à cette image. Et je ne veux pas que ce soit un simple rectangle, ni une ellipse. Je veux juste, je veux que la forme soit un peu irrégulière. Je vais donc prendre l'outil stylo et je vais commencer à cliquer comme quelque part ici, peut-être maintenant que je maintiens la touche Maj enfoncée vers quelque part ici. Et peut-être que nous allons simplement faire quelque chose comme ça. Et puis, comme ça, nous pourrons toujours le changer plus tard. Je ne pense pas que nous ayons comme une couleur de remplissage qui serait idéale pour cette image. Et permettez-moi de revenir en arrière d'un pas vers le bas. On en a eu des couleurs semblables à certaines qui pourraient fonctionner. Mais je ne suis pas vraiment sûr qu'il y ait une bonne chose pour ce genre de n, ce genre d'image. Donc, ce que nous pourrions faire, c'est que nous pourrions peut-être simplement saisir ce contexte. Et je vais juste appuyer sur la touche I mon clavier pour initialiser l'outil pipette. Et cherchons peut-être quelque chose comme ça. Cela peut paraître peut-être un peu mieux. Ou peut-être essayons peut-être d' obtenir quelque chose dans les cheveux. Peut-être quelque chose de plus léger, peut-être un peu plus sombre. Maintenant, nous pourrions le faire. J'essaie juste de trouver couleur qui serait en même temps, comme aller bien avec le jeu de couleurs que nous avons ici dans cette image. Mais en même temps, un peu comme un arrière-plan qui séparerait l'image de l'arrière-plan. Nous allons donc rester avec ce type. Mais je pense que nous pourrions bien travailler sur cette image, sur ce fond ici. Je vais donc simplement double-cliquer à l'intérieur, ce qui me permettra contrôler les points d'ancrage. On pourrait peut-être amener ce type quelque part ici. Peut-être pourriez-vous sélectionner ce type et je vais simplement appuyer sur Supprimer pour vous en débarrasser. Et je vais déplacer ce type sur le côté encore un peu plus. Peut-être que ce type aussi et parle au fond. On pourrait peut-être un peu plus haut que le gars de Brenda. Et puis peut-être que je vais saisir l'image et je vais l'agrandir considérablement. Donc, ça a l'air. Plus ou moins comme ça. Maintenant, je veux juste avoir quelque chose de différent. Je veux juste ne pas avoir comme des lignes droites comme la neige, comme diviser nos sections d'ailleurs, nous avons déjà une section de lumière divisée, divisée ici. Donc, je suppose que ça pourrait fonctionner comme ça. Maintenant, bien sûr, nous pourrions savoir simplement essayer de trouver l'équilibre parfait entre, entre ce qui est funky. Et maintenant, contrairement à ce qui n'est pas trop accrocheur, je veux dire, je ne veux pas qu'il attire trop l'attention. C'est maintenant, c'est juste l'arrière-plan, mais je ne veux pas que ça soit trop ennuyeux en même temps. Parfois, il s'agit simplement de trouver le bon équilibre. Je vais donc maintenant saisir l'outil de texte et je vais cliquer quelque part ici et taper quelque chose comme sur moi. Et allons-y un peu plus grand. Je vais peut-être le rendre un peu plus audacieux cette fois. Je vais faire 54 ans. Et faisons-le comme peut-être lu. Laissez-moi peut-être vérifier avec ce type. Il s'agissait de 54 solides moyens, le milieu. Je pense que la différence entre moyenne et audacieuse n'est pas si énorme. Donc je suppose qu'on peut laisser ça comme ça. Je vais le mettre quelque part ici. Et peut-être que je vais juste emprunter des textos à ces gars. Je vais juste prendre ce rouleau et Epsilon. Je vais le coller comme quelque part ici. Bien sûr, ce type doit être un peu plus visible. Donc je vais y arriver, faisons en sorte que ce type soit 22 ans. Je vais le faire un peu comme Boulder. Et mensons-nous à 30 en termes de hauteur de ligne. Je vais peut-être le rendre un peu plus petit et le mettre quelque part ici. Et puis nous pourrions peut-être aimer cloner et descendre quelque part ici et le rendre un peu plus grand. Et puis clonez-le encore une fois. Mais rendez ce type peut-être comme mais plus petit. Donc, ça ressemble plus ou moins à ça. Disons que nous avons assez de texte, assez sur le mutex. Et peut-être que je vais juste récupérer l'outil stylo à nouveau. Et peut-être que je vais juste créer quelque chose comme une ligne droite. je maintiens la touche Maj enfoncée. Et cette ligne va ressembler plus ou moins à ça. Et peut-être passons la frontière. Donnons une bonne couleur. Mais comme vous pouvez le constater, malheureusement, nous ne pouvons pas simplement modifier la couleur de la bordure comme cela. Je vais donc copier et coller ce code hexadécimal dans une ambulance pour ressembler à quelque 33 points pour la taille. Cela devrait suffire. Je vais peut-être aussi prendre nos icônes, comme celle-ci, icônes des réseaux sociaux, ces gars ici, laissez-moi juste essayer. Attrapez-les correctement. Peut-être vaudrait-il mieux les attraper dans le panneau des calques. Donc je pense que ce sera ce type, alors je vais juste les copier. Je vais aller quelque part ici et les coller dedans. Et déplacez-les ici quelque part ici. Maintenant, si tu veux peut-être aimer faire ce type Justin Blolders. C'est peut-être comme une piste ici, mais je pense que ça devrait être encore plus audacieux. Je suppose que ça aurait l'air bien. Il serait peut-être utile de rompre la monotonie de ces paragraphes. Et je pense que ça a l'air, ça semble bien, alors, bien sûr, tout ce dont nous avons besoin, c'est simplement saisir ces éléments, peut-être sans l'image pour l'instant. Et nous devons les mettre ici sur notre version mobile. Mais avant de le faire, prenons simplement tous ces éléments. Donc tous ces gars, je vais les regrouper et je vais les appeler à propos de moi comme ça. Et je vais aussi attraper peut-être comme ça, essayer de ne saisir que ces éléments. Ce sera comme des icônes et ce Lorem Ipsum. Je pense que ce sont ces paragraphes. Et le chemin sans l'image, je pense que tout va bien se passer, donc pas cette voie, mais cette voie. Et je vais regrouper ces gars. Appelons ça comme un message à propos de moi. Et je vais juste copier ce texte à propos de moi. Et je vais essayer de le coller quelque part ici et de le déplacer vers le bas. Peut-être pourrions-nous ramener notre grille de disposition. Allons ici. Et je vais simplement attraper ce groupe et je vais essayer réduire tout pour qu'il ressemble plus ou moins à ça. Je suppose que nous devrions attraper ça comme intertidal et c'est 34 médiums. Faisons donc 34 moyens. Et mettons-le exactement au centre. Je vais donc essayer de le mettre au centre. Il en va de même pour ce type. Nous pourrions peut-être aussi saisir ces paragraphes et les placer au centre. Je pense que les icônes vont bien. Nous devons donc maintenant saisir l'image. Donc, ce type ici et l'arrière-plan. Donc je vais juste les copier et me briser comme essayer de les insérer ici pour que ça ait l'air juste. Je vais donc essayer de réduire ces gars. Mix, quelque chose comme ça. Et nous allons le déplacer ici. Allons amener ce type juste en panne. Peut-être que sans le, sans la grille de disposition mobile, il sera juste un peu mieux. Vous pourriez même essayer de rendre l'image un peu plus grande. On y va. Nous avons créé la section À propos de nous. Et je sais que ce n'est pas trop chic, mais au moins nous avons eu l'occasion d'apprendre à modifier les points d'ancrage dans les formes personnalisées. 47. Ajoutez la section Contactez-moi: Hé les gars, on a eu la section À propos de moi. Je suppose que nous pouvons passer à l'ajout des éléments de la section Contactez-nous. Donc ce que je veux faire, c'est à gauche, je vais ajouter comme un simple truc comme entrer en contact ou me contacter, textos que des sous-titres chanceux. Et puis, bien sûr, certains aiment peut-être des coordonnées. Et ci-dessous, nous pourrions ajouter un formulaire de contact. Et à droite, je pense que je vais simplement ajouter une image. Encore une fois, avant de commencer, je vais juste ramener ma grille de mise en page comme ça. Je vais juste emprunter peut-être propos de moi par texto à ce gars juste ici. Et je vais simplement le copier. Et je vais le coller quelque part ici et je vais le déplacer quelque part ici. Et nous pourrions peut-être prendre tout le chemin pour décider. Je ne sais pas si je veux déplacer cette section comme toute cette section aussi sur le côté, ça va nous donner un peu plus de place ici. Mais, vous savez, si c'est censé ressembler à ce design Web 3, il n'est pas nécessaire que ce soit bien aligné. Donc ici, je vais taper certains, comme entrer en contact et on y va et peut-être que je vais changer la couleur. Retournez simplement à mes couleurs et B à cette couleur grise. Et pour l'instant, débarrassons de la grille de mise en page. Je veux juste voir à quoi ça va ressembler. Et puis, ci-dessous, ajoutons du texte. Une fois encore. Permettez-moi peut-être d' emprunter quelques textes ici, comme ce paragraphe. Je vais le coller et le pauvre ce dont il a besoin pour aller quelque part ici. Et je vais le rendre nettement plus petit. Maintenant, nous pourrions simplement aller à certains types de faux générateurs d' adresses, de faux générateurs de numéros de téléphone. Mais pour ça, je vais juste utiliser mon truc standard Lorem Ipsum. Nous devons couper ces gars pour qu' ils ne soient pas dans le même groupe. Donc, celui-là et celui-là, je vais les découper, les coller dedans. Donc, je vais d'abord accéder à mon plugin d'icônes. Donc des icônes pour le design. Et ici, je vais juste taper quelque chose comme un téléphone, peut-être. Et peut-être que cette fois-ci, allons-y avec les icônes de plumes. Je vais juste aimer coller ce type. Je vais cliquer dessus. Et comme vous pouvez le voir, ils sont parfois collés comme non, pas vraiment ce que je veux qu' ils soient collés. Et je vais prendre la même couleur, mais il faut que ce soit pour la bordure. Je vais donc juste copier ce code hexadécimal, le coller et simplement le mettre quelque part ici. Et comme je l'ai dit, je peux simplement emprunter le Lorem Ipsum. Je vais le copier, mais je ne peux tout simplement pas conserver la même couleur, les mêmes fonctions de police. Mais je vais juste taper comme un faux numéro de téléphone 123, peut-être quelque chose comme quatre ou 56789. Cela devrait suffire. Et je vais juste réduire cette zone de texte et je vais la mettre quelque part ici. Ensuite, on y va. Et peut-être que je vais juste les imprimer quelque part. Commençons peut-être par une icône d'adresse. Alors, saisissons quelque chose comme carte. Et voyons si nous avons quelque chose ici avec des icônes de plumes. Voyons si je clique simplement sur ce type, puis sur l'icône. Oui, il va arriver quelque part ici. Encore une fois, je ne pense plus avoir mes couleurs dans mon presse-papiers. Je veux dire, je n' ai pas ce code hexadécimal, donc je vais le coller une fois de plus et je vais le mettre, c' est peut-être quelque part ici. Et nous allons faire tomber ce type. Et supprimons ce texte. Ça va ressembler à ça. Et enfin, faisons comme une adresse e-mail. Alors prenons un e-mail peut-être pour cela, la plume n'aura que ceci. Essayons comme une enveloppe. Habituellement, il y a beaucoup d'icônes d'enveloppe, pas vraiment dans ce cas. Faisons quelque chose comme du courrier. Et encore une fois, je vais juste marquer cette icône et je vais, Hé, est-ce que ce type n'est pas ? Et voyons si nous pouvons recoller cette couleur. Et je vais essayer de saisir cette icône. Et d'ailleurs, s'il est trop difficile pour vous de saisir un élément, car XD agit, vous pouvez toujours appuyer sur la touche Ctrl ou Commande enfoncée . Ce sera sous licence comme une sélection directe d' une technique d'objet. Et je vais juste fermer ce type. Bien sûr, j'appuie sur les touches Alt et Maj enfoncées ensemble. Et ici, faisons quelque chose comme déshabiller ou peut-être pas deux majuscules. Ou faisons quelque chose comme des informations sur mon email.com, quelque chose comme ça. Cela devrait suffire. Et permettez-moi peut-être maintenant assurer que tout est bien aligné. Mais je veux que ces zones de texte soient aussi petites que possible afin notre transformation soit aussi précise que possible pendant notre alignement, peut-être pas la transformation. Faisons donc quelque chose comme ça. Alors, veillons à ce que ces gars soient bien alignés au centre horizontalement comme ça. Et dire, c'est la même chose pour ces gars. Peut-être que je vais juste rendre cette boîte un peu plus petite. Alors, au centre, on y va. Maintenant, nous pouvons peut-être simplement regrouper ces éléments. Mais avant cela, permettez-moi peut-être vérifier si ces gars-là sont bien alignés sur la gauche. Je pense qu'ils le sont. Et veillons à ce que ces gars soient bien alignés sur le centre comme ça. Et maintenant, je vais vraiment les regrouper. Donc, groupez ces gars aussi. On y va. Et maintenant, nous pouvons simplement nous assurer qu' ils sont bien distribués. Et on peut juste les mettre quelque part ici. Peut-être juste un peu comme ça. Maintenant que nous avons ces éléments, nous pourrions commencer à créer notre formulaire de contact. Et ça va être super facile. Tout ce dont nous avons vraiment besoin, c'est juste un simple rectangle. abord, ça va ressembler plus ou moins à ça. Et puis, à l'intérieur, je vais taper quelque chose comme une première, faisons-le peut-être comme ton nom. Je vais donc faire votre nom. Ce sera donc notre espace réservé et généralement les espaces réservés sont plus petits. Je vais donc faire quelque chose comme 14 ou peut-être 16 ans. Et je vais aller à mes couleurs et le rendre plus léger, quelque chose comme ça. Et je vais le mettre quelque part ici et peut-être que ce type sera plus petit comme ça. Et je vais m' assurer qu'ils sont bien alignés sur le tuyau central. Tous ces éléments sont bien alignés au centre. Donc je pense que je vais me débarrasser du remplissage et je vais aussi augmenter la valeur comme la rondeur, les coins arrondis. Faisons quelque chose comme 16 ou peut-être même un peu plus gros que 26. Allons en faire 32. Ok, laissons-le comme ça. Il a l'air assez décent. Maintenant, je peux simplement saisir ces éléments et je vais simplement choisir Repeat Grid. Je vais descendre Mike One, deux. Je pense que cela va suffire parce que ce que je veux ici, c'est simplement ajouter comme une adresse e-mail et ensuite la zone de texte ici, nous pourrions repartir comme un pas en bas pour créer comme un mais nous avons déjà un bouton, donc je ne pense pas que nous en ayons besoin, donc trois devraient suffire. Ce qui est vraiment génial dans la grille de répétition c'est que même si nous l'avons fait, nous ne manipulons qu'un seul élément. Vous pouvez toujours le voir. Maintenant, c'est comme un effet direct jusqu'à ce que vous dissociez la grille. Donc, tous les changements qui vont maintenant apporter à notre élément principal seront reflétés ou ajoutés à tous ces éléments répétés. Donc, si nous voulons maintenant simplement modifier la valeur de rondeur des coins, vous pouvez voir qu'elle change bien pour que nous puissions les manipuler également. Je vais donc le faire en noir 32, puis je vais juste saisir cet élément et je vais dissocier la grille comme ça. Maintenant, je vais choisir le dernier gars et je vais le rendre beaucoup plus grand, quelque chose comme ça. Et je crois que nous devions également changer la rondeur. Tim, pour l'associer aux autres éléments. Donc, au lieu de 32, augmentons peut-être légèrement. Les 64, comme le double, doublent cette taille. Je ne pense pas que ça ait l'air génial. Faisons peut-être quelque chose comme, faisons-en 16 avec ces gars. Donc, ces deux éléments, je les sélectionne en maintenant les touches Ctrl et Maj enfoncées. Faisons comme 24 avec eux ou peut-être 20. Oh, ça a l'air, c'est assez décent. ne nous reste plus qu'à changer cette taxe de votre nom à votre adresse e-mail. Et ici, ça va ressembler à ton message. Et bien sûr, ce type doit aller quelque part comme un résumé ici. Et maintenant, passons à nos composants similaires. Et je vais juste essayer de trouver mon bouton. C'est donc ce type ici. Je vais juste le mettre quelque part ici et ici. Et au lieu d'en savoir plus, saisissons quelque chose comme envoyer un message comme celui-ci. Et bien sûr, il va falloir aligner ces éléments. Laissez-moi donc simplement essayer de cliquer sur ces éléments et de les aligner au centre. Et n'oubliez pas que nous devons faire de même pour l'état de vol stationnaire. Laissez-moi peut-être copier ce texte. Et ensuite, je vais revenir à mon composant. Ainsi, et survolez l'état. Au lieu d'en savoir plus, saisissons envoyer un message. Et encore une fois, nous devons nous assurer que tout est bien aligné sur le centre comme ça. Maintenant, lorsque nous présentons un aperçu de notre design, passons ici. Vous pouvez voir que quand on survole ce type, il change de couleur et il a l'air, tout va bien. Donc maintenant, tout ce dont nous avons besoin, c'est d'ajouter l' comme une image maintenant juste pour qu'elle ne ressemble pas à ça, si ennuyeuse. Nous pourrions peut-être ajouter une carte Google si vous le vouliez, juste pour montrer où se trouve votre bureau, c'est une chose assez courante à faire, mais peut-être que je vais juste ajouter, au lieu de cela. Au lieu de cela, je vais simplement ajouter quelque chose comme une image simple, comme une simple image qui va s'afficher comme l'envoi, l' envoi d'un processus de message. Et je vais commencer quelque part ici. Je vais donc ajouter un rectangle. Quelque part ici. On y va. Je n'ai pas besoin de frontière. Je ne me sens pas vraiment non plus, mais j'ai besoin d'une image. Je vais donc revenir chez Pexels et je vais taper quelque chose comme peut-être un contact. Je ne sais pas si je vais trouver quelque chose d'intéressant. Ou peut-être ajoutons simplement cette image. Il n'est vraiment pas si important d'avoir la meilleure image du monde. Juste ici. C'est plutôt à des fins de présentation. On y va donc. Nous avons créé notre section « Se faire toucher ». Je pense qu'à l'heure actuelle, il vous suffit de l'ajouter à notre page principale, je veux dire, notre page principale de conception mobile. Je vais donc le faire rapidement. Donc, comme vous pouvez le voir, je les ai rapidement rendus sensibles à la section « entrer en contact ». Et il n'y a vraiment pas de science des fusées ici. Il suffit de régler simplement le positionnement et l' espacement pour qu'il soit beau sur les appareils mobiles. 48. Ajouter le pied de page: Nous allons maintenant ajouter un pied de page. Et pour cela, je vais juste saisir rapidement un rectangle parce que je veux rendre mon esprit pied ou un peu plus visible, un peu plus visible. Et je vais changer sa couleur de remplissage par, disons ce rouge. Et je vais le rendre plus petit. Il s'adapte donc à notre toile. Et je vais le mettre quelque part ici. Aujourd'hui, les pieds de page se sont développés ces dernières années dans le monde du design, du web design. Mais bien sûr, si vous n' avez pas beaucoup à mettre à l'intérieur de votre pied de page, vous pouvez toujours le laisser comme vraiment, vraiment simple. Vous pouvez ajouter comme votre nom, comme des informations sur les droits d'auteur, et c'est tout. Mais faisons en fait les deux. Faisons donc comme un pied de page plus long. Et faisons probablement des informations simples, plus petites, comme de base, de base, comme de base, de base, pour comme au tout, tout en bas. Je vais donc commencer par peut-être emprunter des textes. Je vais juste attraper ces gars et je vais essayer de les coller quelque part ici. Et bien sûr, ils doivent changer de couleur. Alors, on va peut-être faire du blanc simple. Donc, ce type va être blanc. Il en est de même pour ce type. Mais je vais peut-être ajouter un peu plus de texte ici. Et je vais taper quelque chose comme si je suis proche quelque chose comme merci d'avoir visité. Parce que, vous savez, je suppose que quelqu'un n' aime pas faire défiler vers cette partie de la page, donc c'est un bon geste de les remercier. Je vais donc laisser ça comme ça. Et ici, en bas, ajoutons peut-être nos icônes similaires. Mais permettez-moi d'abord d'essayer de les trouver dans mes actifs. Je vais peut-être choisir ce type en premier. Commençons donc à ajouter quelques icônes. Comme ce type ici. Et faisons-le blanc. On y va. Et ajoutons les autres. Bien sûr, nous devons nous assurer qu'ils sont bien alignés. Et ce sera génial si je pouvais les sélectionner correctement. Et je vais juste les distribuer. Et je vais peut-être les regrouper. Alors peut-être que je vais simplement réduire cette police aussi. Je vais donc voir quelque chose comme 16 ans. Et je vais le ramener, ramener la hauteur de la ligne à quelque chose comme 24. Et ici, à droite, j'aimerais créer fin de compte trois listes contenant des informations telles que nos projets, les derniers articles de blog et peut-être nos services. Je vais donc emprunter les textes de gauche. Et pour ce type comme ce type va être beaucoup plus petit que plus simple comme 26 peut-être, ou peut-être 32. Cela devrait suffire. Et disons que ce sera comme, collectons les derniers projets. Et maintenant, nous allons dresser une liste de, disons comme des liens de nos derniers projets. En gros, ce que je vais faire, c'est que je vais simplement saisir comme un texte comme celui-ci. Et nous les avons mis, peut-être pourrions-nous simplement cloner et descendre quelque part ici. Et je vais peut-être essayer d'en attraper un autre fragment comme Lorem Ipsum. Juste pour que nous n'ayons exactement les mêmes textes ici. Et je vais aligner ces éléments. Et encore une fois, je vais juste cloner ce type. Je vais faire la même chose. Disons donc que je vais commencer par cette phrase. Et ensuite, comme vous pouvez le voir, notre bloc de texte limite simplement ce texte, ce texte. Nous n'avons donc pas besoin de nous inquiéter comme tous ces textes débordants. Mais il ne s'agit que d'une présentation. Mais je vais peut-être les rendre un peu plus courts, quelque chose comme ça. Je pense que cela devrait suffire. Maintenant, je vais simplement sélectionner les deux, comme tous ces éléments, Maj alt, appuyer et maintenir la touche Maj Alt. Et ce type va être comme les derniers messages peut-être. On y va. Et je vais faire la même chose ici. Je vais donc simplement supprimer certains de ces éléments. Et la même chose ici. Alors, on va peut-être aimer quelque part ici. Et encore une fois, comme ça. Je vais peut-être m' assurer que ce type a l'air bien. Et faisons-le, faisons quelque chose comme ça. Et on y va. Vous auriez aimé les derniers projets, les derniers messages. Et peut-être faisons comme si nos services sont mes services en fait. Alors pourquoi les services ? Et saisissons la conception Web. Et puis faisons comme le développement Web, peut-être le développement Web si je peux l'épeler correctement. Allons donc ici. Faisons quelque chose comme peut-être la conception de logo. Et enfin, faisons quelque chose comme peut-être le référencement. Je vais cloner ce type. Parce que comme tout en bas, je veux juste ajouter quelque chose comme une information sur le droit d'auteur. Peut-être comme un lien vers notre politique de confidentialité ou des choses semblables. Les informations relatives aux droits d'auteur commencent par le symbole de copyright, n'est-ce pas ? Donc, si vous êtes sous Windows, voici une petite astuce que vous pouvez faire. Vous pouvez simplement appuyer sur la touche Alt et la maintenir enfoncée , puis seulement 0169. Si vous disposez d'un pavé numérique, cela ajoutera un symbole de copyright sur un Mac. C'est beaucoup plus simple. Il suffit d'appuyer et de maintenir la touche Option enfoncée, puis d'appuyer simplement sur la touche G. Et si vous n'avez pas de pavé numérique sur votre clavier, vous pouvez simplement accéder à Google et taper simplement un code de symbole de copyright. Il suffit de sélectionner et de copier le symbole de copyright, puis de le coller dans XD. Alors, nous allons simplement taper quelque chose comme 20192022. Bien sûr, si vous venez de créer ce site Web comme aujourd'hui, cette année, bien sûr, vous partirez comme cette date actuelle comme ça. Et bien sûr, parce que nous avons ajouté ce symbole de copyright ici, c'est une police en gros. Comme vous pouvez le constater, les valeurs sont les mêmes, mais je vais penser que je vais peut-être changer cela à normal. Je vais taper quelque chose comme quel était notre nom ? Je ne m'en souviens pas. En fait. Tiffany Jones. Tiffany Jones. D'accord. Le droit d'auteur appartient donc à Tiffany Jones. Et je vais le rendre plus petit. Et je pense que je vais aimer lui donner cette belle couleur grise. Et je vais le cloner pour décider. Et je vais taper quelque chose comme la politique de confidentialité. On y va. Nous pouvions aussi que c'était comme un côté plus grand et plus grand. Vous pourriez avoir quelque chose comme des conditions d'utilisation, des conditions d'utilisation. Et bien sûr, ces deux liens doivent aller du bon côté. Je vais peut-être les mettre quelque part ici. Ils vont donc aller sur le côté. Enfin, bien sûr, ce que nous devrions faire , c' est de nous assurer que toutes ces informations sont bien alignées sur notre réseau. Alors peut-être que je vais juste le rendre plus petit et mettre ce type quelque part pour décider. Ensuite, je vais saisir ces éléments et les mettre peut-être quelque part ici. Et c'est la même chose pour ces gars. Veillons simplement à ce qu'ils soient bien alignés sur la grille. Je vais donc regrouper tous ces éléments en ce moment. Ces gars-là aussi, ces types sont regroupés. Maintenant, je vais tout sélectionner et simplement les distribuer comme ça. Il en va de même pour ces éléments. Je vais simplement saisir ces liens et les repousser vers la droite. Et ce type a presque raison. Donc, fondamentalement, la dernière chose à utiliser pour saisir tous ces éléments. Donc, l'arrière-plan et les liens, et il suffit de les placer au centre comme ça. Bien sûr, la dernière chose à faire ici serait ajouter notre pied aux parties restantes de notre site et, bien sûr, de les rendre réactifs. Mais nous allons le faire dans la vidéo suivante. 49. Rende le pied de page réactif: Vous savez quoi, j'ai décidé que ce n'est peut-être pas la meilleure idée de vous ennuyer avec une autre vidéo qui consiste à empiler des éléments à la verticale. J'ai donc pris la liberté d'ajouter les éléments de pied de page à nos versions réactives du design. Mais il y a juste une chose que je voudrais souligner. Je veux dire, pour certains des designs, j'ai également décidé d'ajouter non seulement ces éléments de pied de page, mais aussi les éléments d'informations de contact. Donc, lorsque nous allons, par exemple, notre page de blog mobile et mobile, donc ce mode blog par un nous descendons. Vous pouvez voir que j'ai également ajouté la section Se faire toucher ainsi que la photo. Et au fait, comme vous pouvez le voir, il n'y a que des colonnes d'éléments empilés. J'ai donc ajouté les informations de contact, je les ai ajoutées dans le pied de page. Mais je ne l'ai pas fait pour notre article de blog car je viens de décider que ce serait peut-être trop. Je veux dire, nous avons déjà comme ces icônes qui se répètent ici, comme les icônes des médias sociaux. Je pensais que nous en avions déjà assez dit à nos utilisateurs, comment peuvent-ils nous contacter ? Donc, comme vous pouvez le constater, en ajoutant sur les pieds de page, il suffit d' ajouter ces éléments comme verticalement, comme tous les autres éléments. Vous pouvez également décider si vous souhaitez ajouter des informations de contact ou d' autres informations qui précèdent la nourriture ou, d' ailleurs, à votre mobile. Versions mobiles du design. 50. Les touches finales: Nous avons donc créé notre projet et, en cours de route, nous avons créé notre section principale des héros avec l'image. Bien sûr, nous avons ajouté le logo, nous avons ajouté la navigation. Et donc des informations ici à gauche. Nous avons ensuite ajouté les services. Nous avons donc ajouté les icônes, bien sûr, beaucoup de texte et un bouton. Ensuite, nous avons ajouté cette section de portefeuille avec des miniatures animées de portfolio. Ensuite, nous avons ajouté un blog. Ensuite, nous avons ajouté la section « A propos de moi », suivie de la section Contact et du pied de page. Et bien sûr, en cours de route, nous avons tout rendu réactif. Et n'oubliez pas que c'est une bonne idée de quand, une fois que vous créez une version de bureau similaire une section, puis suivez la version mobile de cette section. Et nous avons également ajouté que, comme un effet de curseur ici, ce carrousel d'image. Nous avons ajouté une page de blog. Nous avons bien entendu ajouté la version mobile de la page de blog. Et nous avons ajouté un seul article de blog. Et bien sûr, il est une version mobile de billet de blog unique. Bien sûr, nous pourrions continuer créer une section «  À propos de nous », comme une section «  Contactez-nous ». Mais honnêtement, nous ne ferions que répéter les éléments que nous avons déjà ici. Par conséquent, pour la section À propos de moi, nous allons simplement ajouter les mêmes éléments , le logo et la navigation. Bien sûr, bien suivi avec le pied de page. Pour la section Contactez-nous, nous allons simplement ajouter leur logo, la navigation, cette partie ici et le pied de page. Je pense donc que cela devrait être comme un défi de conception pour vous, en plus d'ajouter ou de créer votre variation, votre version d'un site comme celui-ci. Et bien sûr, une fois que tout est fait, nous devrions vérifier si tout le texte, si l'espacement, si les tailles de police sont correctes, nous pourrions bien sûr saisir comme la page d'accueil et voir l'interactivité. Disons donc que nous avons obtenu notre bouton En savoir plus. Nous avons ce bouton juste ici. Nous avons des éléments de notre portefeuille comme celui-ci. Bouton Lire plus. Ces icônes fonctionnent de la même manière que dans la section précédente. Dans la section héros, nous avons reçu notre section de contact, nous avons été touchés. Et bien sûr, nous pourrions vérifier si, par exemple, nos liens fonctionnent. Ce lien de blog fonctionne donc correctement. Et si nous cliquons sur le logo, il nous ramènera à notre page d'accueil. Dans l'ensemble, je pense que nous avons fait beaucoup de choses. Nous avons beaucoup couvert. Comme toujours, je vous encourage à créer vos propres variations du design ou peut-être à créer quelque chose d'autre. Tant que vous utilisez toutes les techniques et les faits et astuces que vous avez appris tout au long de ce processus de conception. 51. Partager en exportant: La façon la plus simple et la plus évidente de partager votre projet et ses éléments uniques consiste simplement à l'exporter. Voyons donc comment nous pouvons le faire dans XD. Vous vous demandez peut-être en quoi l' exportation est différente de l'épargne. Laissez-moi juste expliquer. Vous voulez enregistrer votre fichier lorsque vous l'êtes ou un autre utilisateur va travailler dessus, sur ce même fichier, vous souhaitez exporter votre projet une fois qu'il est terminé ou que vous souhaitez simplement partager certains éléments de celui-ci, comme certaines images ou icônes, Exporter l'informatique. Les ressources peuvent être fermées, ce qui signifie qu'elles ne sont plus modifiables ou peuvent rester modifiables. Tout dépend du format de fichier que vous choisissez lors de l'exportation. Alors, comment exporter votre projet. Ainsi, sous le menu Fichier, vous trouverez que la fonction d'exportation qui contient encore plus d'options. L'option de lot vous permettra d'exporter plusieurs ressources en une seule fois. Il vous suffit de les marquer pour l'exportation, soit dans l' inspecteur des propriétés, soit en cliquant sur la petite icône d'exportation située à côté du nom de l'acide dans le panneau des couches. Si vous le souhaitez, sélectionnez-le. Vous pouvez exporter des ressources spécifiques en les sélectionnant simplement sans avoir à les marquer pour l'exportation. Et vous pouvez choisir Tous les plans de travail si vous souhaitez exporter tous nos tableaux, même sans les sélectionner au préalable. Si vous utilisez After Effects, vous pouvez exporter vos ressources vers cette application à l'aide de la dernière option After Effects. Quelle que soit la méthode choisie, vous verrez donc une boîte de dialogue d'exportation des ressources, qui vous permet de contrôler encore plus loin le processus d'exportation. Selon le format de fichier que vous choisissez, vous verrez un ensemble différent de fonctionnalités disponibles. Par défaut, vous pouvez enregistrer vos ressources en tant que P et G. et l'utilisation de ce format vous permettra contrôler la taille des exportations. Vous pouvez également choisir parmi une taille d'exportation personnalisée prédéfinie comprise entre 0,5 et quatre. Vous pouvez également choisir un préréglage expert, tel que Web, Android et iOS. Le premier outil consiste simplement à exporter vos ressources à l'aide de tailles personnalisées prédéfinies. Mais le préréglage iOS exportera les ressources à l'aide de densités d'écran prédéfinies. L' option Exporter vers vous permet décider où vous allez enregistrer vos actifs exportés. Cliquez donc sur le bouton Modifier pour sélectionner le bon endroit sur votre disque dur. Le format de fichier suivant est donc AVG. Il est principalement utilisé pour stocker des graphiques vectoriels, mais vous pouvez également l'utiliser pour exporter des images et des textes. Et lorsque vous le sélectionnez, vous obtiendrez de nombreuses autres options telles que le style. Et ici, vous pouvez utiliser l'option Attributs de présentation lorsque vous souhaitez exporter vos ressources pour les utiliser dans Android Studio. Et vous pouvez également utiliser l'option CSS interne, qui aboutira essentiellement à une taille de fichier plus petite. Sous l'option Enregistrer les images, vous pouvez utiliser l'intégration pour placer l'image dans le fichier. Vous pouvez également utiliser le lien pour ajouter une référence à l'image stockée séparément. Sous Taille du fichier, vous pouvez utiliser l'option optimisée et minifiée pour réduire la taille du fichier. Sous les options de trajectoire, vous pouvez utiliser Contour de contour pour convertir traits de deux tracés afin d'éviter qu'ils ne paraissent déformés. Les experts vous permettent décider de l'endroit où vous allez enregistrer vos actifs informatiques d'exportation. Le format de fichier suivant est donc PDF. Et ici, vous pouvez principalement décider si vous souhaitez exporter vos ressources sous forme de plusieurs fichiers PDF ou d'un seul fichier. Et r est que si vous utilisez la version de démarrage du programme, vous ne pouvez exporter que deux fichiers PDF maximum. Et les deux derniers formats de fichier sont JPEG. C'est le seul format qui permet de contrôler la qualité de l'exportation de sa taille. La qualité inférieure signifie une compression plus élevée. Il en résulte une taille de fichier plus petite. une qualité supérieure signifie que moins de compression est utilisée et qu'une taille de fichier plus grande est produite. Donc, généralement, un bon équilibre entre la taille du fichier et la qualité se situe autour de 75 %. Maintenant, je pense que dans la plupart des cas, vous allez utiliser les formats d'exportation PNG et JPEG, en particulier pour des présentations rapides. Cependant, XD est fourni avec un espace de travail partagé complètement séparé qui vous permet de partager vos projets pour différents scénarios. 52. L'espace de travail Partager: Cet espace de travail est donc particulièrement utile lorsque vous travaillez avec une équipe de parties prenantes, telles que des concepteurs, des développeurs ou simplement des réviseurs. Vous pouvez donc créer ici des liens qui peuvent être utilisés, édités et révisés pour collaborer à votre conception. Dans l'inspecteur des propriétés, vous pouvez choisir l'un des paramètres de vue fonction de la personne avec laquelle vous souhaitez partager la conception. Utilisez cette revue de conception pour obtenir des commentaires sur votre conception de la part d'autres concepteurs de l'équipe. Ainsi, par défaut, le point d'accès commenté et les contrôles de navigation seront actifs et utiliseront leur développement présent pour partager votre conception avec les développeurs. Par défaut, le point d' accès aux commentaires, contrôles de navigation et les spécifications de conception seront partagés. Le préréglage de présentation optimisera votre conception pour qu'elle soit mieux présentée aux parties prenantes. Et par défaut, le point d'accès, par conséquent, commandes de navigation et l'option plein écran seront actives. Et le préréglage de test utilisateur permettra aux autres utilisateurs de tester votre conception. Et ici, par défaut, seule l' option plein écran sera active. Et bien sûr, vous pouvez personnaliser l'expérience de la conception que vous partagez et les options de partage des connaissances et d' interaction peuvent être ajoutées ou supprimées librement. Ainsi, une fois que vous avez défini toutes vos options de paramètres d' affichage, vous pouvez définir les autorisations d'accès aux liens. Donc, les options ici sont quelqu'un avec le lien ? Eh bien, cela signifie essentiellement que quiconque possède le lien sera en mesure de voir le projet. Mais vous pouvez également restreindre l'affichage du fichier uniquement par des personnes sélectionnées. Bien sûr, si vous choisissez la seule option de personnes invitées. Et toute personne ayant un mot de passe, ce qui signifie que quiconque connaît le mot de passe que vous avez dit peut accéder au fichier. Ainsi, lorsque vous êtes prêt à partager votre fichier, cliquez simplement sur le bouton Créer un lien. Et après un certain temps, le lien sera créé, vous constaterez que le lien lui-même, ainsi que quelques boutons qui vous permettront de copier le lien du projet intégré dans un iFrame codez ou partagez-le sur Behance. Vous pouvez cliquer sur le lien généré et vous serez redirigé vers une page où vous verrez le dessin ainsi que des panneaux supplémentaires à droite. Encore une fois, si vous utilisez la version de démarrage de XD, vous ne pouvez partager qu'un seul projet à la fois. Et si vous avez besoin d'en partager davantage, vous devez passer à un forfait premium. Cependant, vous pouvez toujours simplement supprimer celui que vous partagez et neige simplement en partager un autre. Pour ce faire, nous devons sélectionner l'option Liens gérés, qui ouvrira l'onglet Fichiers publiés sur votre compte Adobe. Et ici, vous pouvez supprimer définitivement le fichier. Bien sûr, le design original restera intact et vous pouvez simplement, vous savez, en partager un autre. là que tu y vas. C'est ainsi que vous pouvez partager vos fichiers au sein d'une équipe de parties prenantes de XD. Maintenant, si vous commencez tout juste et que vous voulez apprendre le programme, travailler au sein d'une équipe ne sera peut-être pas votre routine quotidienne. Mais je pense toujours qu'il s'agit d'une fonctionnalité importante et que c'est tout simplement une bonne idée de vous familiariser avec elle. 53. Partager avec un client: Une question que je reçois vraiment beaucoup de mes étudiants est dans quels formats de fichier dois-je remettre mon design au client ? Et la réponse est finalement l' une des plus frustrantes. Et c'est, hum, ça dépend. Je veux dire, tout d'abord, si vous acceptez de céder au client tous les droits sur le projet, vous devriez le livrer dans la plupart des formats. Et cela inclut le fichier source. J'exporte donc généralement le projet en JPEG, PNG. J'ajoute le fichier source, par exemple p XD, XD ou AI. J'utilise également PDF et si le projet n'a pas été terminé avec Photoshop, je l'exporte vers PSD car il est tellement omniprésent. Tout le monde comprend P comme le n. Lorsque c'est fait, je zip tous les fichiers. Si, cependant, vous n'êtes pas d'accord avec le client pour transférer les droits d'auteur sur le projet. Il n'est pas nécessaire de partager le fichier source. Maintenant, dans ce cas, je m'en tiendrais simplement au format JPEG, PNG et PDF. De plus, si votre projet utilise plusieurs tableaux artistiques, je les enregistrerais sous forme fichiers JPEG ou PNG distincts et d'un seul fichier PDF. De cette façon, vous faciliterez l'aperçu du projet pour votre client . En bref, si jamais vous doutez des formats de fichiers à utiliser, utilisez simplement PNG, PDF et éventuellement le fichier source. Comme je l'ai mentionné, c'est toujours une bonne idée de compresser vos fichiers. Et la plupart des systèmes d'exploitation modernes vous permettront de le faire sans aucune application distincte. Toutefois, si vous avez besoin d'un programme autonome pour l'archivage, vous pouvez utiliser sept fichiers ZIP libres et open source qui peuvent être installés sur Windows, PC, macOS et Linux. Le partage de vos fichiers est toujours la dernière étape du processus de conception. Ainsi, une fois que le projet a été accepté et payé, vous pouvez qualifier de complet et total de vous féliciter pour un travail bien fait. 54. RÉSUMÉ: J'espère donc vraiment que vous avez aimé apprendre XD et j'espère que vous l'utiliserez dans vos futurs concepteurs web. C'est un logiciel vraiment important à avoir dans votre portefeuille de compétences. Résumons donc rapidement ce que nous avons appris ici. Nous avons donc d'abord abordé les bases absolues telles que l'écran d'accueil navigation dans l' espace de travail et la compréhension de la différence entre la conception et le prototypage. Nous avons ensuite créé notre premier nouveau document. Nous avons appris à gérer les illustrations, les couches et les outils. Et dans la section suivante, nous apprendrons comment utiliser les plugins et les actifs. J'ai également partagé avec vous mes plug-ins préférés utilisant XD. Nous avons ensuite appris un peu la théorie de la conception Web, à savoir les couleurs, la typographie et les meilleures pratiques de la conception Web moderne. Après cela, nous sommes passés à la partie principale du design et nous avons créé un projet de site Web personnel pour un design de pigiste. Enfin, nous allons apprendre comment partagez-vous votre projet ? Merci donc de vous être rendu jusqu'à cette partie du cours. J'espère qu'avec du temps et de la pratique, vous serez en mesure de créer vos propres créations de manière indépendante. Et si ce cours vous aide à vous lancer dans une conception réussie de carrière indépendante ou à prêter un emploi de concepteur Web. Cela signifiera qu'il a été utile et qu'il a servi son objectif. Et ça me rendrait vraiment heureuse.