Conception d'une interface utilisateur dans Figma : créer une page d'accueil pour un magasin de baskets étape par étape

1. Intro: Hey, bienvenue à un autre super cours de Figma avec moi, Ken Comme toujours, je suis content de vous avoir ici. Dans ce cours, nous allons concevoir une page d'accueil complète pour les sneakers dans Figma, et je vais vous expliquer le processus étape par étape, comme je le ferais pour un projet réel Comme je l'ai mentionné, je m'appelle Ken, je suis concepteur Web et éducateur. Mon objectif avec ce cours est de vous montrer non seulement comment donner une Mon objectif avec ce cours est de vous montrer belle apparence aux choses, mais aussi comment penser comme un designer, comment structurer une page Web, comment créer des sections et comment créer quelque chose de raffiné et moderne de haut en bas Nous allons commencer par la section des héros puis passer en revue les catégories, promotions, les produits tendance, les inscriptions même un mini-fil Instagram jusqu'à ce que nous ayons créé une page de destination complète propre et prête à être ajoutée à votre portfolio Cette mise en page de destination sera également votre projet de classe. Ce sera une excellente occasion de pratiquer un flux de travail figma réel, montrer votre style et de repartir avec une œuvre terminée que vous pourrez partager ou développer Vous pouvez même ajouter votre touche personnelle et créativité à la page de destination pour la rendre unique. Cela dit, êtes-vous prêt à commencer ? Parce que je le suis. Plongeons-nous directement dans le vif du sujet. 2. Démo du projet de cours: Je veux donc vous montrer une démonstration rapide de ce que nous allons construire tout au long du cours. Ce sera votre projet de classe. Au moment où nous aurons terminé ce cours, vous vous retrouverez avec quelque chose comme ça. Je vais donc juste faire défiler la page, vous pouvez voir que nous avons une belle section consacrée aux héros avec deux boutons d'appel à l'action. Nous avons une section de produits en vedette, des catégories en vedette, et l'utilisateur peut cliquer et accéder à cette catégorie. J'ai oublié d'étiqueter ces catégories. Je les ai juste dupliqués du premier. Mais ne t'inquiète pas. Nous avons une section sur les remises ultimes. Vous pouvez obtenir l'accord grâce à cet appel à l'action. Nous avons une marque populaire de chaussures sexy et tendance. C'est censé être en voir plus, afin qu'ils puissent en voir plus. Ils peuvent être redirigés vers la page contenant le plus de photos les plus populaires et les plus tendances Il y a une brève introduction à notre histoire, et je peux cliquer pour me lire. Demandez un formulaire d'inscription à une liste d'envoi d'enseignes ici. Si vos fans, vos clients veulent rester au courant de ce qui se passe dans votre boutique, ils peuvent s'inscrire ici. Ensuite, nous avons le fil Instagram. Les personnes portant des chaussures achetées dans votre boutique peuvent taguer la boutique sur Instagram ou figurer sur le fil Instagram de la boutique. Et nous avons un joli pied de page que nous recrutons parce que cette boutique recrute des représentants commerciaux Il y a un autre rappel pour vous inscrire. Comme vous pouvez le constater, il s'agit d'une page de destination agréable, simple mais robuste, une page de destination moderne. Et lorsque nous aurons fini de travailler dessus, vous aurez acquis les compétences nécessaires pour reconstruire la page de destination de votre choix avec iGMA Parce que mon objectif avec ce cours est de vous montrer un flux de travail utilisable, vous montrant les différents outils et fonctionnalités avec lesquels vous travaillerez la plupart du temps. Cela dit, je pense qu'il est temps de passer à la conception même de la page de destination. Je vous verrai donc dans la prochaine leçon. 3. Section de héros: Me voilà donc dans mon tableau de bord. Vous devriez être dans un endroit comme celui-ci, et vous devriez avoir au moins une équipe créée automatiquement pour vous ici après avoir créé votre compte. J'ai donc une équipe par défaut ici, qui s'appelle Ken the Dons Team. Alors maintenant, au sein de Ken the Don's Team, je n'ai qu'un seul projet d'équipe par défaut. Si je veux d'autres projets, je dois payer, je dois passer au plan payant. Mais un seul projet par équipe est largement suffisant. Maintenant, dans notre projet, nous pouvons créer trois fichiers de conception. Je vais donc cliquer sur ce signe plus. Et cela va ouvrir un tout nouveau fichier de design, qui n'a pas de titre Je vais l'appeler une page d'accueil du Sneak Store. Entrez ou cliquez simplement n'importe où à l'extérieur. Et maintenant, nous y voilà. Donc, la première chose que je veux créer est un cadre ou ce que j'aime appeler un écran. Donc, si je sélectionne cet outil ici, et s'il n'est pas visible, suffit de cliquer sur ce menu déroulant et de le sélectionner dans le menu déroulant. Sélectionnez le cadre. Vous verrez automatiquement différents modèles avec lesquels nous pouvons commencer ici. Et comme nous concevons pour le bureau, je vais ouvrir les modèles de bureau, et je vais sélectionner le préréglage de bureau, qui est 14 40 x 1024, et c'est notre taille d'image ou la taille de mon écran. Passons maintenant à notre aperçu très rapidement. Nous voulons créer cet en-tête. Nous avons ce logo ici. Ensuite, nous avons la barre de recherche et notre barre nerveuse. Voyons comment créer cela. Commençons par le logo. Je vais donc revenir à notre illustration, et je vais également sélectionner le texte. Cliquez n'importe où dans le cadre. Ce faisant, la couche de texte sera automatiquement ajoutée au cadre, le cadre de bureau que nous avons ajouté plus tôt, et c'est ce que vous voyez ici. Comme vous pouvez le constater, chaque élément est une couche. Le texte est un calque et le cadre est un calque. Le texte se trouve à l'intérieur du cadre. Je vais donc taper kick et sélectionner outside. Je vais juste les faire glisser pendant que c' est encore sélectionné, je vais passer à la taille de police ici et le créer. Augmentons-le jusqu'à peut-être cette taille. Modifions-le également en épaisseur de police noire, noir intérieur. Et je veux le sélectionner , passer à la couleur de remplissage et lui donner une couleur grisâtre, juste comme ça Faisons en sorte que ce soit blanc, allons voir Phil, sélectionnons le blanc. Alors allons-y et ajoutons l'image de fond pour au moins pouvoir voir le logo. Je vais donc appuyer sur Control Shift K pour importer une image. Et j'ai préparé un dossier de ressources pour vous. Ce dossier Assets sera disponible sous ce lecteur vidéo. Il suffit donc de le télécharger si vous voulez suivre, il contiendra toutes ces images. Voici le fond que j'ai utilisé. Maintenant, je vais sélectionner le coin et le faire glisser vers le haut jusqu'à cet endroit, lâcher prise, le sélectionner, cliquer avec le bouton droit de la souris et renvoyer en arrière. Allons-y. Je vais maintenir la touche Alt enfoncée et la faire glisser. Pour éviter de me déplacer de haut en bas, je vais maintenir la touche Shift enfoncée pour la limiter cette ligne droite à cette ligne droite et je vais la placer juste là Je vais le remplacer par 16. Taille 16 Revenons-en à la normale, et je vais lui donner de la couleur. Permettez-moi de l'appeler chez moi pour le moment. Ou qu'est-ce que nous avons ici ? Ou nous avons des collections en magasin, des nouveautés. Maintenez donc la touche Ctrl enfoncée et faites défiler la page avec la molette de la souris. Boutique, permettez-moi de le redimensionner. En fait, ce que je dois faire, c'est que s'il s'agit d'un manuel de paragraphes comme celui-ci, vous pouvez passer en mode Auto With pour le convertir automatiquement en une seule ligne de texte Maintenant, je peux maintenir la touche enfoncée et me déplacer pour me déplacer en ligne droite dans les collections. Qu'est-ce que nous avons ici ? Nouveautés, profil de blog. Profil. Qu'est-ce que nous avons ici Profil, alors nous avons ce panier de cartes. Nous allons voir comment ajouter ce panier. Mais pour l'instant, laissez-moi maintenir la touche Contrôle enfoncée, effectuer un zoom arrière avec la molette de la souris , puis espacez-les. Maintenez la touche Shift enfoncée pour en sélectionner plusieurs, puis appuyez sur ces deux touches. Maintenez la touche Shift enfoncée pour la sélectionner. Je pense qu'ils sont bien espacés. Maintenant, je vais double-cliquer sur cette image pour pouvoir redimensionner uniquement les côtés Comme ça. Je peux le pousser dans cette direction ou je peux le tirer comme ça parce que je veux avoir une zone noire pour le texte. Double-cliquez dessus, et c'est parti. Maintenant, contrôlez Shift K pour importer une autre image. Et je pense que la chaussure que nous avons utilisée pour cette section était, laissez-moi voir, nous avons cette paire et cette chaussure. Nous avons donc ceci. Donc, avec ça, je vais juste cliquer et faire glisser, puis je vais appuyer Alt et faire glisser, laissez-moi le faire glisser ici. Maintenez ensuite la touche Shift enfoncée pour les sélectionner toutes les deux, et mettons-les là. Maintenant, sélectionnez-le et double-cliquez dessus pour que nous puissions le télécharger depuis un ordinateur pour le remplacer. Nous avons cette paire de jupes Snickers. Et maintenant, comme vous pouvez le voir, c'est coupé sur le côté. Je vais donc faire glisser le pointeur comme ça et assurer de ne pas le tirer trop loin et de ne pas couper le dessus. Je vais donc également tirer sur la partie supérieure. Je pense que c'est une bonne taille. Maintenez la touche Shift enfoncée pour le redimensionner, peut-être jusqu'à cet endroit. Allons-y. Alors, allons-y et ajoutons des baskets qui en disent long. Je vais donc le sélectionner, maintenir enfoncé et faire glisser le pointeur vers le bas, en maintenant la touche Shift enfoncée pour me déplacer en ligne droite Cela en dit long. Augmentons cette taille, peut-être jusqu'à cet endroit, faisant glisser et en la tirant. Réduisons la hauteur de la ligne. Juste comme ça. Ensuite, découvrez le plus frais J'ai ce texte quelque part. Laisse-moi voir. Laisse-moi juste le coller ici. Je vais donc sélectionner le texte deux. Ensuite, cliquez et faites glisser le pointeur ici et collez-le dedans. Maintenant, c'est trop gros. Je veux qu'il soit en taille 16. Donc, taille 16. Ce n'est pas noir. Il doit être régulier et avoir une hauteur de ligne de 22. Non, 24 ans. Permettez-moi de développer cela. Tirez-le vers le haut, remplacez-le par une virgule. Créons également le bouton. Ces deux boutons, collection et gouttes exclusives. Je vais donc revenir ici, maintenir la touche Ctrl enfoncée et zoomer avec la molette de la souris. Je vais passer de l'outil image à l'outil rectangle et je vais y faire glisser et dessiner une boîte. Et je vais aussi sélectionner le texte et cliquer n'importe où ici. Qu'est-ce que ça dit ici ? Collection. Des collections. Maintenez Shift enfoncée pour sélectionner le Non Tout d' abord, personnalisons le seul bouton. Je vais donc sélectionner ceci, et je veux lui donner cette couleur ici. Je vais donc appuyer sur I sur le clavier. Je vais choisir le compte-gouttes, et je vais sélectionner un pixel qui me plaît comme ça Et maintenant c'est notre couleur. Je veux changer la couleur de l'arrière-plan, alors je vais appuyer sur I et maintenant je vais échantillonner un pixel à partir de l' arrière-plan, juste comme ça. Sélectionnez ceci. Je veux donner aux deux angles un rayon de dix. Juste comme ça. Maintenant, sélectionnez-le, maintenez la touche Shift enfoncée, sélectionnez-la, maintenez les touches Alt et Shift enfoncées et faites glisser le pointeur. Ensuite, je vais sélectionner ceci, sélectionner cela et le remplacer par cette couleur blanche. Cela devrait indiquer des baisses exclusives. Des butins exclusifs. Maintenant, en fait, je souhaite modifier cet alignement pour aligner le centre, car nous avons toujours voulu aligner à partir du centre. Je vais maintenir la touche Maj enfoncée, sélectionner ce bouton d'arrière-plan, passer à l'alignement et l'aligner au centre. Il est déjà aligné au centre. Si je maintiens la touche Shift enfoncée et que je sélectionne les deux, puis que je vais ici, elle ne bougera pas. Alors, on y va. Donc je pense, d'accord, tout ce que nous avons à faire maintenant est de sélectionner ceci et cela et peut-être de les déplacer, peut-être jusqu'à cet endroit, mais de sélectionner ceci. Maintenez la touche Maj enfoncée, sélectionnez ce coin et faites-le glisser. Allons-y. Sélectionnez cette option, maintenez la touche Maj enfoncée. Faites glisser et sélectionnez ces deux options pour sélectionner l'alternative. Si vous souhaitez le sélectionner, vous pouvez soit le sélectionner, puis maintenir la touche Maj enfoncée et sélectionner chaque élément, soit le sélectionner puis maintenir la touche Maj enfoncée puis sélectionner cette zone. Il désélectionnera l' arrière-plan que vous avez sélectionné et sélectionnera les autres éléments sur lesquels vous passez votre souris Donc, avec ça, je peux le pousser légèrement vers le haut , et c'est parti. Allons-y et prévisualisons nos œuvres d'art. Comme à part, nous y voilà. C'est donc notre section consacrée aux héros, et je suis content de ce que nous avons. Maintenant, vous remarquerez qu'il y a un certain désalignement sur la barre nerveuse. Le logo semble être aligné plus bas que la barre nerveuse principale par rapport aux éléments du menu. Revenons donc ici, sélectionnons le logo, sélectionnons tout ce texte, alignons le tout verticalement au centre, juste comme ça. Tout sera aligné verticalement. Maintenant, poussons-les vers le haut comme ça. Maintenant, lorsque nous avons ceci, si je le développe un peu, il y a cet alignement du texte dans la zone de texte. Si nous l'alignons au milieu, il sera poussé au milieu de cette zone de texte. Et ça aide vraiment parfois. Vous voudrez peut-être parfois qu'il soit dans cette position, et vous verrez plus tard. Alors, on y va. Je peux le faire passer à une hauteur fixe. C'est où ? Largeur automatique, juste comme ça. Pour en revenir, il est ajusté automatiquement. Cliquez ici également. Allons-y. Voilà comment nous allons créer notre section consacrée aux héros. Dans la leçon suivante, nous allons voir comment créer la section des catégories proposées. Oui, voyons comment créer ça. Je te verrai bientôt. N'allez nulle part. 4. Section des catégories vedettes écho: Il est maintenant temps de créer la section des catégories en vedette. Revenons donc à notre éditeur Figma. Pour y revenir, je vais juste faire défiler la page vers le bas. Maintenant, vous remarquerez que nous n'avons pas assez d'espace. Je vais donc maintenir la touche Ctrl enfoncée , puis sélectionner le cadre. Maintenez la touche de contrôle enfoncée et faites défiler l'écran vers l'extérieur pour effectuer un zoom arrière. Ensuite, je vais sélectionner la partie inférieure et simplement la faire glisser pour créer de l'espace. Maintenez le contrôle enfoncé et zoomez. Nous y voilà. Donc je vais juste tenir le coup et faire glisser ça. Et je vais changer la couleur de remplissage. Comme vous pouvez le constater, c'est mixte car il y a du blanc et du gris. Je peux donc changer la couleur en cliquant sur le signe plus, et je veux sélectionner ce noir comme ça. Je vais m'assurer que c'est au milieu du cadre. Qu'est-ce que nous avons ici Permettez-moi de copier ce texte de l'autre côté. Copiez ça. En le faisant glisser, changez-le en taille 16, rendez-le régulier et alignez-le au centre. Je vais sélectionner cette option et faire le même centre d'alignement. Mais pour cela, je vais double-cliquer et coller mon texte ici. Je viens de le copier ailleurs. Tu devras le taper. Maintenant que cette option est sélectionnée, je vais l'aligner au centre du cadre, comme ça. Cela est déjà aligné. Nous avons Slick and Fresh, donc je vais sélectionner celui-ci et je vais faire glisser Leak et Fresh Et cela indique les catégories en vedette. Catégories en vedette. Nous y voilà. Alors maintenant, cela nous gêne. Je vais donc sélectionner toutes ces choses ici et appuyer sur le crochet gauche renvoyer à l'arrière ou simplement fuite et les renvoyer en arrière. Donc maintenant c'est devant cette image. Sélectionnez-le et changez de couleur. Nous avons déjà ce gris, et je vais le réduire à la taille 24 peut-être. Oui, je pense que la taille 24 est correcte. Pour l'espacement des lettres, je vais lui donner 5 %. Poussez-le vers le bas, légèrement comme ça. Peut-être même sélectionnez-les tous les trois et appuyez-les vers le bas. Jusqu'à cet endroit. y revenir, nous devons créer quelque chose comme ça. Maintenant, comme vous pouvez le voir, j'ai essayé d' expérimenter ce design par opposition à ces autres modèles. Il s'agissait des premiers modèles. Ensuite, j'ai essayé quelques idées, mais je ne les ai pas reproduites Mais allons-y et créons ce type. Je vais donc sélectionner cet outil rectangulaire et le faire glisser en maintenant la touche Maj enfoncée pour m'assurer qu'il s'agit d'un carré, et peut-être le laisser là. Maintenez la touche Ctrl enfoncée et zoomez avec la molette de la souris, la molette centrale de la souris, maintenez la molette centrale enfoncée pour vous déplacer comme ça. Et je vais sélectionner ceci, lui donner un rayon de bordure de 20. Sélectionnez-le, copiez-le, collez. Nous en avons maintenant deux exemplaires. L'autre copie est en plus de cela. Je vais donc le sélectionner et maintenir la touche Shift Out enfoncée pour le redimensionner proportionnellement Déplacez-vous peut-être jusqu'à cet endroit, et je lui donnerai peut-être un gris légèrement plus foncé. Je vais donc le faire glisser vers le noir. Non, allons-le plus clair. Non, plus sombre. Ouais. Donnons-lui un rayon d'angle égal à la moitié du rayon d'angle extérieur. Donc dix pour que ça ait l'air plus uniforme comme ça. Et maintenant, je veux le faire légèrement glisser vers le haut. Alors je vais le faire glisser. Ensuite, je vais simplement le faire glisser et le positionner quelque part là-bas. Maintenant, je vais le sélectionner, maintenir la touche Maj enfoncée et la sélectionner. Contrôlez G pour les regrouper en un seul objet. Et si je les sélectionne, je peux tous les aligner au centre les uns par rapport aux autres. Donc, juste comme ça. Maintenant, je vais juste maintenir le bouton enfoncé et le faire glisser. Et que disent-ils de « chaussures de sport durables » ? Chaussures durables. Je vais le placer juste là. Je vais appuyer sur le support droit pour le mettre à l'avant. Il est aligné au centre. Mais maintenant, je veux appuyer sur le bouton Shift enfoncé pour le sélectionner et aligner le texte au centre de celui-ci. Sélectionnez le Control Shift G pour les dissocier afin de sélectionner ceci et cela et d'aligner le tout alignant le texte au centre de celui-ci Maintenant, je vais sélectionner ceci et réduire le Non, laissez-moi le garder à cette taille. Maintenez la touche Ctrl enfoncée pour faire glisser la souris vers l'extérieur. Maintenant, je vais le faire glisser vers l'extérieur, maintenir la touche Shift enfoncée pour le réduire ou le réduire, le mettre ici, entre crochets droits. Et nous y voilà. Comme vous pouvez le constater, il n'y a pas d'ombre tombante, mais dans la référence, j'en ai ajouté une. Je vais donc passer à l'action. Si je sélectionne un effet, il ajoutera automatiquement une ombre portée. Il existe d'autres effets, mais l'effet par défaut est Drop Shadow. D'autres sont là. Je pense donc que les paramètres d'ombre par défaut me conviennent. Je vais donc simplement sélectionner l'image, puis sélectionner cette case qui la contient et aligner l'image au centre. Juste comme ça. Maintenant, je pense que je vais rendre cela un peu plus sombre. Oui, et copiez-le. Codez, copiez, sélectionnez ceci. Cliquez ici et double-cliquez sur Coller. Rendez-le blanc. Sélectionnez-le et faites glisser le pointeur vers l'arrière. Ensuite, contrôlez D pour répéter ce que vous venez de faire. Contrôlez à nouveau D. Je pense que c'est une bonne taille. Je vais sortir du shift D, sortir du shift et faire glisser le pointeur encore une fois, et c'est parti. Nous avons donc une belle section de catégories en vedette. Il ne nous reste plus qu'à double-cliquer sur chaque image et à la remplacer par une chaussure différente. Disons cela et vous devrez le redimensionner. Je vais donc le maintenir enfoncé pour le faire glisser en maintenant la touche Shift vers l'extérieur pour la rendre beaucoup plus petite. Ensuite, je vais faire glisser ça et ça sur les côtés pour m'assurer que tous les côtés des chaussures sont visibles. Oui, c'est bon. Sélectionnez ceci et cela et alignez-les au centre. Double-cliquez dessus, sélectionnez-le. Je vais maintenant passer rapidement à cette partie, et je vous verrai une fois que nous l'aurons fait. Alors vas-y et fais-le. Alors double-cliquez dessus . C'est déjà approprié. Et voilà. Je viens donc de terminer leur mise à jour. Maintenant, bien sûr, vous allez devoir renommer ces catégories Je vais voir quels sont les noms. Il semblerait que j'ai juste dupliqué le truc et que j'ai oublié de lui donner les catégories Mais voyons voir. Nous avons des baskets performantes. Maintenant, il semble que c'est trop gros. Créons donc cette police, peut-être en taille 14. Donc, taille 14. Oui, des baskets performantes en édition limitée et des chaussures durables Laisse-moi juste le mettre là. Oh, non, ajoutons ceci. D'accord, vous pouvez donc avoir d'autres catégories ici. Je vais juste le laisser là ou vous pouvez simplement supprimer et laisser les quatre catégories que vous aviez. Je pense que je vais le sélectionner et le faire en maintenant enfoncé en déplaçant et en faisant glisser le coin Je veux le rendre légèrement plus large que le texte ici , puis le pousser vers le haut. Prévisualisons ensuite les modifications. Tout d'abord, regardons ce que nous avons dans l'original. Dans mon original, je crois que j'ai préféré les couleurs à celles que nous avons ici qui sont trop foncées. Je pense donc que je vais juste les rendre légèrement plus légers. Allons sur le terrain. Et oui, juste comme ça, mais maintenant, passons le texte en noir. Alors revenez ici et choisissez le noir. Ou tu peux simplement t'en débarrasser. Je vais voir ce qui se passera si on s'en débarrasse. Non, en fait, je pense que le problème vient des rectangles d'arrière-plan, ils sont trop sombres. Alors allons-les plus légers. Alors allégeons également Bs. Juste là. Je pense donc que je préfère ça. Maintenant, si nous revenons ici, il se mettra automatiquement à jour, et il y a maintenant notre section sur les catégories en vedette. Nous devons ajouter un bouton, comme ici, pour en voir plus. Il suffit donc de revenir ici, sélectionner ceci et cela, puis de faire glisser le contrôle G pour le regrouper, puis de nous assurer aligner au centre comme ça. Maintenant, contrôlez Shift G pour le dissocier afin de sélectionner l'arrière-plan Allez ici et donnons-lui cette couleur noire Sélectionnons la police et donnons-lui une couleur blanche. Sélectionnez-le et poussons-le vers le haut, maintenant la touche Shift enfoncée pour vous déplacer en ligne droite. Retournez ici, et vous trouverez notre section sur les catégories en vedette. Je pense donc que c'est le bon endroit pour mettre fin à tout cela. Dans la leçon suivante, nous verrons comment créer cette section de réduction Je suis sûr que vous savez probablement déjà comment le faire, mais je vous verrai bientôt. 5. Section de réduction: Il est maintenant temps de créer la section des remises ici. Revenons donc à notre éditeur. Je vais donc faire défiler la page Non, revenons à l' éditeur ici même. Donc, en maintenant la et en zoomant avec la molette de la souris, je vais simplement la faire glisser et la placer quelque part de telle sorte que l'espacement entre le bouton et ici soit presque le même que l'espacement entre ici et ici Maintenant, je vais juste y jeter un œil. Je pense que c'est un bon endroit. Je vais double-cliquer dessus. Maintenant, si je veux redimensionner la hauteur de cette image, je peux simplement le faire car elle va la redimensionner proportionnellement Donc, si je veux redimensionner la hauteur de cette image sans déplacer les côtés, il me suffit de double-cliquer dessus Lorsque cela apparaît, cela signifie que je peux maintenant modifier la boîte contenant l'image. Je peux donc tenir le côté inférieur et le tirer vers le haut. Disons que quelque part, double-cliquez ou fermez-le simplement. Maintenant, je vais juste sélectionner l'une de ces chaussures, peut-être celle-ci et la faire glisser, peut-être celle-ci et la faire glisser, puis maintenir la touche Shift enfoncée et sortir pour la redimensionner proportionnellement de tous les côtés Ensuite, je vais juste le repositionner, double-cliquer dessus pour que nous puissions le remplacer Donc je crois que j'ai utilisé, je crois que c'est la chaussure que j'ai choisie, double-cliquez dessus. Et comme nous sommes dans cet état, nous pouvons faire glisser les côtés sans affecter les autres côtés. C'est bon. Double-cliquez à l'extérieur. Sélectionnez-le. Maintenez la touche Maj enfoncée et redimensionnez-la de ce côté en maintenant la touche Maj enfoncée. 50 % de. Je vais donc juste prendre ces trois éléments, faire glisser et les déposer ici avec la touche Alt. Pendant qu'ils sont encore sélectionnés, je vais tout d'abord passer à la couleur de remplissage plus, et lui donner cette couleur blanche. Voyons maintenant si l' un d'entre eux a une couleur différente, c'est la réduction ultime. Je vais donc sélectionner cette réduction ultime. Il semble donc que nous devions le réduire. Je le veux plus petit. Donc, en maintenant la touche Maj enfoncée pour sélectionner Slick, je veux que tous ces petits titres situés au-dessus des titres principaux soient de la même taille Pour les titres, je veux qu'ils soient tous de la même taille. Pour le texte, le corps du texte, je veux qu'ils soient tous de la même taille. Nous allons donc redimensionner ceci et cela à une taille peut-être 18. Ouais. Puis, en maintenant la touche Shift enfoncée, rapprochons-les toutes. Et maintenant je ne veux pas qu'ils soient noirs. Je veux qu'ils soient réguliers. Maintenant, en fait, rendons-les simplement audacieux. Maintenant, en sélectionnant ceci, ceci et celui du haut, changeons l' alignement vers la gauche. Et tant qu'ils sont toujours sélectionnés, passons à l'alignement à gauche pour les aligner tous sur une seule ligne droite. Et je veux les aligner sur les boutons et le contenu de la section des héros, comme vous pouvez le voir sur le surlignage rouge. Alors laisse-moi juste les pousser vers le haut. Je vais sélectionner ce texte et le redimensionner comme suit. Oui, cet endroit. Ensuite, je vais sélectionner ce bouton. Il fait glisser le support droit pour s' assurer qu'il se trouve à l'avant. En le sélectionnant, puis observez le clavier pour sélectionner le compte-gouttes Je souhaite sélectionner un pixel vert clair. Maintenant, je sais que nous ne sommes pas restés fidèles à la même palette de couleurs ici, et en général, notre marque conserve la palette de couleurs jusqu' et en général, notre marque conserve au bout. Mais parfois, vous trouverez sur certains sites Web qu'ils mélangent les couleurs dans différentes parties. Le site est très coloré. Donc, ce que nous voulons nous assurer, c'est de ne pas mélanger cette couleur verte ici. Si je sélectionne I et que j'échantillonne cela, si je donne à ce bouton cette couleur verte, ce vert entre en conflit avec cet autre vert Et lorsque vous faites défiler la page en tant que client, lorsque vous êtes sur cette section, il est préférable que la palette de couleurs soit cohérente C'est pourquoi je l'ai sélectionné. Ensuite, je choisis un green qui se trouve à proximité. Ensuite, sélectionnez ceci, puis je sélectionne l'arrière-plan pour échantillonner l'arrière-plan. C'est une belle palette de couleurs pour cette section particulière lorsque quelqu'un fait défiler Je pense donc que c'est un bon endroit pour terminer. Laissez-moi voir si nous avons oublié quelque chose. Obtenez cette offre. Je ne vais pas modifier ce texte, mais je vais le sélectionner et lui donner une hauteur de 24 lignes. Obtenez cette offre. Passons maintenant à notre site Web et voyons ce que nous avons. Donc, si je fais défiler l'écran vers le bas et que j'arrive à cet endroit, nous avons notre Donc, juste une petite chose que je veux faire, comme vous pouvez le voir, l'espacement ici n'est pas le même que l'espacement Tout d'abord, laissez-moi maintenir la touche Maj enfoncée et tout sélectionner. Maintenant, sélectionnez cette option, maintenez la touche Maj enfoncée et faites glisser le pointeur pour la sélectionner et désélectionnez l'arrière-plan Contrôlez G pour les regrouper, puis maintenez la touche Shift enfoncée pour sélectionner l'arrière-plan et aligner le corps du texte au centre par rapport à l'arrière-plan. 50 % de saumons, revenons ici. Contrôlez Shift G pour les dissocier. Ensuite, 50 % des chaussures s'appellent Slomons. Je vais donc sélectionner ce texte. Accédez ici à la couleur de remplissage et sélectionnez la couleur verte. Pour en revenir, voici notre section de remises ultimes. 6. Section tendance: Maintenant, allons-y et créons cette section sur les coups de pied sexy et tendance Maintenant, je vais juste revenir à nos illustrations, où se trouve mon éditeur ici. Et avant d'aller trop loin, je voudrais me concentrer sur ce point assez rapidement. Et je veux ajuster légèrement le juste en allant ici. En fait, permettez-moi de leur donner cette couleur. Je vais donc appuyer sur I sur le clavier. Maintenant, ils ont cette couleur, mais je veux les rendre moyennement gras. Passez donc au poids de police, semi-gras, pas moyen. Et je souhaite également augmenter l'espacement des lettres à 5 %. Je pense qu'ils sont bien plus beaux comme ça. Mais bien sûr, ils sont maintenant réduits à la ligne suivante parce qu'ils ne peuvent pas rentrer dans les cases actuelles. Je vais donc maintenir la touche Alt enfoncée pour redimensionner des deux côtés. Si vous ne maintenez pas la touche Alt enfoncée, elle sera redimensionnée d'un côté, le côté que vous maintenez At le redimensionne à partir du centre. Je veux donc le retirer, le sélectionner, le maintenir enfoncé et le tirer sur le côté, vers extérieur, et le tirer dessus. Je pense qu'ils ont maintenant l'air plus présentables. La raison pour laquelle j'ai fait cette mise à jour était, tout d'abord, je voulais qu'elle soit plus belle, mais en même temps, comme vous pouvez le voir dans notre référence ici, la section des tendances ressemble assez à la section des catégories en vedette Allons-y et revenons ici, et je veux les sélectionner légèrement, puis les maintenir enfoncés et faire glisser, puis maintenir la touche Maj enfoncée pour éviter de me déplacer vers la gauche et la droite. Alors déplacez-vous et déposez-le juste là. Puis lâchez votre quart de travail et partez. Zoomez légèrement et je veux le pousser vers le bas parce que je veux m' assurer que l'espacement ici est assez similaire à l'espacement Je pense donc que c'est un bon endroit. Et maintenant, vous remarquerez que nous n'avons pas cette petite boîte en bas. OK. Je vais juste le regarder jusqu'à cet endroit En fait, permettez-moi simplement de supprimer ces trois éléments. Et je vais sélectionner ces deux éléments et m'assurer que l'intérieur est aligné au centre de l'extérieur en cliquant dessus et cela. Maintenant, je vais sélectionner cet arrière-plan intérieur, allez ici. Avons-nous un gris foncé ? Cela indique que je suis hors ligne. Bien, alors faites en sorte que ce ne soit pas trop foncé, pas noir, gris foncé parce que c'est noir Je vais donc sélectionner ce texte et aller ici, lui donner cette couleur blanche. Sélectionnez le snaker, maintenez la touche Shift enfoncée, sélectionnez le snaker intérieur et alignez-le verticalement par rapport au centre comme ça En fait, poussons-le légèrement vers le haut. Maintenant, je pense que ça a l' air bien. Donc, en le sélectionnant, je peux maintenir le bouton enfoncé et le déplacer. Donnons-lui cet espacement de 22. Ici, 22 ans, Shift D. Je pense que c'est bien. Je vais donc double-cliquer dessus et le remplacer par les chaussures tendance Quelle est la tendance ici ? Disons que celui-ci est tendance. Double-cliquez dessus. C'est également une tendance Je vais devoir l'ajuster comme ça, mais maintenant il semble plus gros que les autres. Je vais donc maintenir la touche enfoncée et la déplacer, en la sélectionnant également. Tenez bon et passez à la vitesse supérieure pour l'adapter proportionnellement. Ensuite, double-cliquons dessus. En fait, quelle coïncidence. Ils semblent tous orientés dans la même direction. Alors pourquoi ne pas compléter ce look. Je pense que c'est une bonne idée. Avant de choisir cela, nous en avons un autre. Je pense que c'est un bon candidat, je vais donc double-cliquer dessus. Et maintenant, nous y voilà. Voici donc les chaussures les plus sexy et les plus tendances. Alors double-cliquez dessus. Dites simplement « chaud et tendance » au lieu de « coups de pied chauds et tendance Populaire ici. Populaire. Ce sont les chaussures les plus vendues en magasin. Je vais juste laisser ça comme ça parce que ce n'est pas un vrai site Web, mais vous devez y taper une description. Et voyons voir, lisons-en plus. Non, cela ne devrait pas être lu davantage. Cela devrait être une offre, alors achetez. J'ai donc oublié de modifier ce bouton, mais maintenant nous pouvons le modifier ici. Visionnez-en plus comme ça. Je pense donc que nous allons arrêter cela là. Avant de partir, jetons un coup d'œil à ce que nous avons actuellement. Il suffit donc de commencer à faire défiler la page. Et voilà ce que nous avons. Attendons qu'il se charge. Bien, maintenant, jetons un coup d'œil à ce que nous avons ici, en faisant défiler Je pense que cela n'est pas équilibré. Je pense que nous devons le baisser légèrement. Cet espacement est ici plus petit que cet espacement ici. Oui, quelque part là-bas. En cliquant à l'extérieur d'ici, il sera automatiquement mis à jour. Maintenant, il est bien positionné, faisant défiler l'écran vers le bas, notre réduction et maintenant notre tendance tendance Je pense donc que c'est le bon endroit pour y mettre fin. Dans la leçon suivante, allons-y et créons notre histoire so. À bientôt. 7. Section Qui nous sommes: Allons-y maintenant et créons la section À propos de nous. Pour en revenir à notre éditeur, où se trouve notre éditeur, ici même. Donc, faites défiler l'écran vers le bas. Je souhaite sélectionner ceci. Au fait, je pense que nous ne l'avons pas bien équilibré ici, donc je vais juste le pousser vers le haut, légèrement vers le haut pour faire défiler la page vers le bas, je vais juste sélectionner ces trois glissières vers le haut pour les Et bien sûr, je vais changer l'alignement vers la gauche et les aligner vers la gauche comme ça. Je vais donc sélectionner le texte du paragraphe et le faire glisser comme ça, et je vais le sélectionner, sélectionner ces trois éléments, les faire glisser et les placer quelque part ici. Sélectionnez la touche Alt et faites-la glisser. Maintenez la touche Alt Shift enfoncée pour l'agrandir , car nous voulons ajouter ces images. En fait, je vais double-cliquer dessus pour pouvoir modifier la boîte elle-même, juste comme ça. Je vais cliquer dessus pour télécharger depuis Select this dude. Je vais lui donner un rayon de 20 angles. Ensuite, nous avons ces deux-là. Faites donc glisser la touche Alt double-cliquez dessus pour pouvoir la modifier. Maintenant, bien sûr, maintenez la touche Alt enfoncée, comme nous avons appris à le redimensionner dans deux directions Je pense donc que c'est un bon moment. Nous voulons le rendre presque carré. Téléchargez à partir d'ici. Je vais juste sélectionner ce mec. Alors je vais le faire glisser. Je pense que l'espacement ici était de 22. Il est 21 ans maintenant. Je vais juste double-cliquer sur ce téléchargement depuis un ordinateur et sélectionner cette image. Maintenant, pour en revenir ici, nous avons à notre sujet l'histoire de notre âme. Et puis l'histoire ici. Je vais le sélectionner et lui donner une hauteur de ligne de 24. En fait, je crois que c'est 36. Je lui en avais donné 36. Et permettez-moi de prendre ce texte, de le coller dedans. Maintenant, laissez-moi élargir la boîte, juste comme ça. Sélectionnez le bouton, et alignons-le juste là. Alors disons en savoir plus. Et en fait, je pense que nous devrions avoir pour le bouton, sélectionner le texte du bouton et ainsi de suite. Donnons-lui un espacement entre les lettres de 5 % et rendons-le moyen Nous voulons que le texte soit plus prononcé. Je vais sélectionner l' arrière-plan du bouton ici. Tenez le coup pour le redimensionner des deux côtés, jusqu'à cet endroit Je pense que ces deux-là vont bien. Maintenant, en sélectionnant ces trois Control G pour les regrouper, sélectionnez-les pour les regrouper. Contrôle G. Sélectionnez ensuite ces deux groupes et alignez-les verticalement comme ça. Maintenant, cette distance est trop petite, alors poussez-les vers le bas comme ça Je pense que c'est un bon endroit pour les laisser. Sélectionnez Control Shift G pour dissocier, sélectionnez ce Control Shift G pour dissocier Maintenant, je vais sélectionner ces trois éléments et supprimer les effets. Comme vous pouvez le constater, ils ont une ombre projetée parce que nous l'avons dupliquée et qu'il y avait une ombre projetée d'ici Nous voulons donc supprimer cet effet d' ombre projetée comme celui-ci. Jetons donc un coup d' œil à ce que nous avons sur notre page de destination. En faisant défiler la page vers le bas, voici notre aperçu. J'aime ce que nous avons jusqu'à présent. Dans la leçon suivante, nous allons créer cette section d' inscription à la newsletter ou à la liste de diffusion. Je te verrai donc bientôt. 8. Inscription à la liste de diffusion: Bon retour. Il est donc temps de créer cette section d'inscription à la liste de diffusion. Passons donc à notre éditeur. Nous y voilà. Maintenant, revenons rapidement à notre référence. Comme vous pouvez le constater, nous avons un formulaire, prénom, une adresse e-mail et un formulaire d'inscription, mais les autres restent similaires. Je veux donc choisir ces trois-là. Je vais donc sélectionner ça. Faites ensuite glisser le pointeur tout en maintenant la touche Shift enfoncée pour sélectionner l'alternative. Il va donc désélectionner l'arrière-plan et sélectionner ce qui se trouve devant Ensuite, je vais appuyer sur Alt, faire glisser laisser sortir et maintenant maintenir la touche Shift enfoncée. Juste comme ça. Je vais faire glisser et sélectionner tout cela, puis cliquer sur Remplir plus ici, et je vais lui donner cette couleur noire. Ici, il est dit de ne plus jamais manquer une goutte. Encore une fois, c'est à lacets pour obtenir des avantages ou à lacets pour obtenir des avantages. Permettez-moi de saisir ce texte très rapidement. Collez ça dedans. Je vais donc simplement faire glisser le pointeur vers le bas tout en maintenant la touche Shift enfoncée pour dupliquer, puis en maintenant la touche Ctrl D enfoncée pour répéter le mouvement que je viens de faire. Sélectionnez ces deux options. Augmentons ensuite la largeur. Pendant qu'ils sont encore sélectionnés, allez ici, et donnons-leur peut-être ce contexte. Non, c'est ce fond clair. Je trouve que c'est une belle forme. Nous pouvons lui donner une couleur noire. Je vais donc simplement sélectionner ceci, aller ici, sélectionner le texte, lui donner cette couleur blanche. Cela devrait être une inscription. Il doit s'agir d'une adresse e-mail. Cela peut être Oh, non, cela peut être une adresse e-mail, et cela peut être un prénom. En sélectionnant les deux, j'ai remarqué que l'alignement est au centre, alors alignons-nous vers la gauche, et alignons-les également vers la gauche comme ça. Ensuite, changeons également la couleur du champ en gris clair afin qu'elles ne soient pas trop prononcées à l'intérieur du champ. Maintenant, je pense que je devrais les rapprocher comme ça. Je pense que c'est une meilleure façon de les présenter. Je vais le faire glisser et je veux sélectionner ces trois éléments, les regrouper, puis sélectionner ce groupe et l'image afin que nous puissions les aligner comme ça. Maintenant, double-cliquez sur ce téléchargement depuis un ordinateur. Qu' est-ce que nous avons ici ? Nous avons ce problème d'incendie, mais, bien sûr, je n'ai fait que jouer avec des idées. Vous pouvez utiliser l' image que vous voulez. Laisse-moi voir. Qu' en est-il de ce rouge ? Non ? Qu'en est-il de cette chaussure noire ? Utilisez une image qui représente peut-être des cadeaux ou des remises ou quelque chose d'intéressant représentant cette section Je n'aime pas le contraste de cette chaussure, alors remplacons-le par ces deux chaussures. Oui, mettons-les juste là. Mais maintenant, je veux les sélectionner comme ça, et en maintenant la touche Maj enfoncée, les faire glisser vers le bas en ligne droite Je veux m'assurer que nous leur donnons suffisamment d'espacement comme ça Nous pouvons réduire la taille de ces chaussures. Je pense donc que c'est le bon endroit pour mettre fin à tout cela. Nous n'avons pas besoin de trop compliquer les choses. Pour le moment, vous ne faites qu'apprendre les subtilités de Figma en revenir à notre aperçu, maintenant, si nous faisons défiler la page vers le bas, nous avons un formulaire d'inscription ici. Ouais Revenons donc à notre référence. Dans la leçon suivante, voyons comment créer cette section Instagram. Nous devrons d'abord créer une carte Instagram avant de la dupliquer complètement. Je te verrai bientôt. 9. Section des publications Instagram: Il est temps de créer cette section Instagram. Comme vous pouvez le constater, nous avons quatre cartes Instagram, et il ne nous reste plus qu'à en créer une pour le moment. Voyons donc comment procéder. Passage à notre éditeur. Je vais faire défiler la page vers le bas. Et comme vous pouvez le voir, nous pouvons simplement le copier , puis je vais le faire glisser et le mettre ici. Et ce qu'il dit, c'est qu' Instagram y est collé. Vous pouvez nous taguer sur Kick Verse et être mis en vedette. Si vous portez nos chaussures, vous pouvez nous taguer si vous les publiez sur Instagram Créons donc notre carte. Je vais juste le sélectionner et le Shift Control Shift G pour le dissocier Et je vais le sélectionner et le faire glisser bas ou simplement le faire glisser et le placer ici Je vais peut-être le déplacer jusqu'à cet endroit. J'essaie juste d'obtenir quelque chose qui ait ces dimensions. Nous avons donc un utilisateur. Nous avons un nom d'utilisateur qui suit. Allons-y et tapons-le rapidement. Voici un nom. Permettez-moi de faire glisser ce texte. Ensuite, nous le fixons pour l' amener à l'avant. Je vais juste l'utiliser comme publication Instagram publiée par quelqu'un. Je vais l'aligner sur la gauche comme ça. Ensuite, je vais également réduire la taille à peut-être 12, peut-être 14, une hauteur de ligne de 18. Non, disons peut-être 22. Poussez-le légèrement vers le haut. Qu'est-ce qu'on a d'autre ici ? Nous avons ces icônes. 12 K j'aime. Alors faisons-le glisser J'essaie juste de taper tout le texte nécessaire. Je vais sélectionner ce bouton. Sélectionnez le bord inférieur, maintenez le bouton enfoncé pour le redimensionner comme ça Maintenez ensuite ce côté enfoncé et redimensionnez-le comme ça. En zoomant, comme vous pouvez le constater, le rayon d'angle est trop grand. Je vais en donner peut-être trois, juste comme ça. Ensuite, je veux le remplacer une bordure comme ça au lieu d'une sensation. Donc, comme il y a déjà une sensation et qu'il n'y a pas de bordure, je peux utiliser Shift X pour changer. Quelle que soit la couleur du champ, elle sera remplacée par la couleur du trait, et la valeur du trait sera remplacée par la valeur du champ. Nous n'avons pas de trait, donc la sensation deviendra nulle, et le trait aura la couleur de remplissage. Déplacez donc X pour les inverser. Le texte est blanc, je vais donc le sélectionner et le donner. Disons cette couleur grise. Sélectionnez-le, passez à la couleur du trait et donnez-lui également cette couleur grise. C'est suivre. Maintenez la touche Shift enfoncée pour diminuer la taille. Maintenant, permettez-moi de réduire la taille à neuf, aligner au milieu comme ça. Et faisons en sorte que ce soit moyen. Donnons-lui également un espacement de 6 %. Maintenez la touche Shift enfoncée pour sélectionner ceci et alignez-les comme ça. Maintenant, vous remarquerez que nous avons ici quelques icônes dont nous avons besoin. Cherchons donc une icône d' utilisateur, un chat en forme de cœur. Donc, pour y revenir, je vais taper une icône plate. Juste comme ça parce que nous voulons télécharger des icônes d'ici, Hart. Très bien, je vais donc sélectionner ce rouge uni. Laissez-moi sélectionner ceci. Ensuite, je vais m'assurer que vous êtes bien connecté. Et maintenant, disons 64, c'est la bonne taille que nous voulons pour notre objectif, en revenant ici. Comme il est téléchargé, je peux le faire glisser d'ici, chaud, et le déposer ici. Maintenez la touche Shift enfoncée. En revenant ici et en sélectionnant un autre cœur, peut-être aussi cette taille 64, téléchargement gratuit. Retourner ici. téléchargement est toujours en cours. Très bien, déposons-le là-dedans Maintenez la touche Shift enfoncée et redimensionnez-la comme ça. Je veux me déplacer vers la gauche, juste comme ça. Revenons à notre référence : 12 000 likes, chattez et envoyez. C'est une jolie bulle de discussion. Procédez au téléchargement. Allons-y. Je vais donc simplement faire glisser ce menu en pointillés vers le haut. Maintenez la touche Shift enfoncée pour le réduire proportionnellement, et déposez-le là Faisons-le également glisser légèrement comme ça. Puis, contrôlez D pour répéter. Double-cliquez dessus, puis remplacez-le par Let's go to the downloads. C'est censé être le graphique. Je pense que c'est un tableau d'envoi. Envoyer. C'est bon. Je vais donc faire glisser ça jusqu' au bout comme ça. Double-cliquez dessus. Téléchargez depuis un ordinateur, et téléchargeons. Bien, nous n'avons pas téléchargé le signet. Je vais opter pour ça. Taille 64, téléchargement gratuit. Remplaçons-le maintenant par un signet. Maintenant, en les sélectionnant toutes, je vais les aligner. Ils sont déjà alignés. Faites-le glisser vers le haut, puis nous le mettons entre crochets pour le mettre au premier plan, maintenons le bouton enfoncé et décalons pour le redimensionner proportionnellement Alors placons-le juste là. Rayon d'angle de cinq. Double-cliquez à l'intérieur et faites-le glisser peut-être jusqu'à cet endroit. En fait, nous sommes censés le réduire beaucoup. Sélectionnez cette commande. C'est le contrôle C pour copier, le contrôle V pour coller. Maintenant, sélectionnons celui que nous avons collé, en maintenant la touche Shift enfoncée pour réduire au point où elle sera alignée avec celle-ci Alors faisons-le glisser vers le haut comme ça et vers le bas comme ça Et donnons-lui un gris légèrement plus foncé comme ça. Peut donner à cela un effet d'ombre. Je vais le faire glisser vers la gauche. Ensuite, nous pouvons également avoir un utilisateur. Je vais choisir cet utilisateur. Télécharger 64, téléchargement gratuit. Retournons ici. Faisons glisser cet utilisateur. Allons-y. Nous avons donc notre Now, bien sûr, ce n'est pas une publication Instagram parfaite, mais nous avons quelque chose que nous pouvons utiliser ici. Donc, en sélectionnant ce bouton, maintenez la touche Shift enfoncée pour le redimensionner proportionnellement Je veux le réduire légèrement, peut-être jusqu'à cet endroit. Maintenant, pour le texte, vous allez devoir le redimensionner en conséquence Pour ce qui suit, maintenez la touche Alt enfoncée pour dimensionner des deux côtés. Ensuite, ils utilisent un nom. Maintenant, en sélectionnant cette option, je peux faire glisser le pointeur vers le bas et contrôler D pour répéter cela. Et je pense que nous allons opter pour ces trois-là. Sur notre référence, j'en avais quatre, et le texte et tout le reste semblaient beaucoup plus petits. Mais n'oubliez pas, comme je l'ai dit, que nous essayons de comprendre comment travailler avec les outils disponibles dans Figma Nous n'essayons pas de créer quelque chose de parfait. Nous essayons de vous apprendre à utiliser ces outils. Une fois que vous savez comment utiliser les outils, vous pouvez passer autant de temps que vous souhaitez à perfectionner le design Je pense donc que c'est un bon sport pour y mettre fin. Nous avons presque terminé. Dans la leçon suivante, allons-y et travaillons sur le pied de page Je te verrai donc bientôt. N'allez nulle part. 10. Section de pied de page: C'est presque terminé. Il est temps de travailler sur le pied de page Pour en revenir à nos œuvres d'art , nous allons simplement faire défiler la page vers le bas, et laissez-moi effectuer un petit zoom arrière Eh bien, tout d'abord, j'ai remarqué que nous avions dupliqué ces trois éléments, mais que nous ne les avions pas alignés au centre par rapport au cadre Donc, en les sélectionnant, contrôlez G pour les regrouper, puis alignez-les en un seul élément. Contrôlez Shift G pour les dissocier. Vous pouvez également les laisser groupés si vous le souhaitez. Je peux récupérer le logo de là-haut ou simplement le recréer. Kick contre Donnons-lui cette couleur. Je vais lui donner ce vert. Non, ce vert n'est pas bon. Je vais lui donner cet autre green ici, celui-ci. Donc je pense que c'était ça. Oui, je pense que c'est un bon point de départ. Contrôlez, sélectionnez pour sélectionner ce cadre, puis faites glisser le pointeur pour le redimensionner Cliquez à l'extérieur. J'ai tout le photoctent ici, sur le côté, donc je vais juste le copier-coller Permettez-moi donc de saisir ce texte ici. À la traînée. Mettons-le juste là. Il reste une ligne. Nous pouvons faire du carpi, je veux le doubler. Nous pouvons également lui donner une hauteur de 28 et l'espacer légèrement comme ça. Pour y revenir, créons ces deux lignes. Je vais donc sélectionner l'outil Stylo. Cliquez n'importe où ici , puis commencez à dessiner. Lorsque nous avons ce surlignage rouge, cela signifie que nous nous déplaçons en ligne droite. Je vais donc simplement cliquer n'importe où, puis m'échapper, m' échapper à nouveau, cliquer à nouveau sur Échapper pour m'échapper du repaire. Ça fait glisser ça. Je vais juste le mettre quelque part là-bas. Ensuite, je vais sélectionner ceci. Ça traîne. Ensuite, je vais sélectionner Je vais double-cliquer dessus. Ensuite, je vais le sélectionner et maintenir la touche Shift enfoncée pour me déplacer en ligne droite afin de réduire la taille. Ensuite, je vais le faire pivoter. Je vais maintenir la touche Shift enfoncée pour l'enclencher et une fois que c'est à la verticale, je pourrai le mettre ici. Je pense qu'il est encore trop grand. Je peux donc simplement revenir ici aux dimensions et les réduire puis les sélectionner, je peux les pousser vers le bas, peut-être jusqu'à cet endroit pour le moment. Je vais donc faire glisser ça. En fait, si vous annulez, je vais tout faire glisser. Et maintenant je vais venir ici. J'ai une rubrique intitulée Shop. Ce sera la taille 20. Ce sera la taille 16. Voici donc des liens vers cette colonne. Je vais l'étendre et le pousser vers le bas, peut-être jusqu'à cet endroit. Je veux qu'ils soient plus espacés, alors je vais passer à la hauteur de la ligne et les faire 36 comme ça Ensuite, je vais sélectionner ces deux options. Lorsque vous passez la touche Shift, faites glisser le pointeur, puis contrôlez D deux La deuxième colonne pour moi est celle des produits par catégories. Je vais donc simplement sélectionner ces deux éléments et les faire glisser vers l'extérieur. Sélectionnez ces deux options et poussez-les vers la gauche. Je vais le sélectionner et l' aligner au centre. Maintenez la touche Shift enfoncée pour le sélectionner en même et alignez-le au centre comme ça. Ensuite, continuons et créons ce bouton et cette partie. Nous allons donc simplement faire glisser ces deux-là comme ça. Je vais les mettre juste là. Et je pense que ce bouton, nous l'avons oublié parce que souvenez-vous, nous avons stylisé les autres boutons Ils avaient un espacement entre les lettres de 5 % comme ça, et nous les avons créés de taille moyenne. Donc ce que nous recrutons peut être de cette couleur. Donnons-lui donc cette couleur. en revenir à notre référence, nous avons également ce formulaire. Sélectionnez cette option, Contrôle C pour copier, puis Contrôle V pour coller. Vous l'avez collé en place. Maintenant, en maintenant la touche Shift nous la redimensionnons de tous les côtés. Je veux qu'il atteigne peut-être cette taille, et je veux le faire glisser jusqu'à cet endroit. Laisse-moi changer la couleur pour que tu puisses le voir. Donne-lui cette couleur. Donnons-lui maintenant un demi-rayon de bordure. La moitié du rayon de la bordure extérieure. Ensuite, en sélectionnant ces deux, je les alignerai au centre comme ça. Appuyez dessus pour que la bordure qui l'entoure soit presque de la même taille. Donc, en tirant cela, nous pouvons maintenant lui donner un texte du type «   Soumettre ». Sélectionnez ces deux éléments et alignez-les comme ça. Inscrivez-vous ou soumettez. Laisse-moi le rendre noir comme ça. Maintenez la touche enfoncée, sélectionnez ces deux options. Pousse ça comme ça. Qu'est-ce qu'on a d'autre ici ? Nous avons le Google Play et l'Appstore. Maintenant, ce sont des choses que vous devrez rechercher sur Google et télécharger. Boutons Google Play. Des images. Euh, laisse-moi voir. Choisissons celui-ci. Ces gars ont donc vraiment caché ce bouton, mais je l'ai finalement trouvé . C'est ici. Allons-y. Donc , pour y revenir, je vais juste le glisser-déposer ici. Je vais donc simplement le réduire en maintenant la touche Shift enfoncée. Je vais juste les aligner quelque part là-bas. Revenons ici aux icônes plates et au téléchargement de YouTube. Je pense que j'ai déjà téléchargé ces icônes, mais pour vous, vous allez devoir les télécharger. Je veux juste gagner du temps. Donc, si je passe à Control Shift K, je pense que j'ai ces icônes ici dans mon dossier de téléchargements. Tout est donc lié à X. Je vais juste les dessiner ici. Voilà, sélectionnez-les tous , alignez-les. Maintenant, certains d'entre eux sont beaucoup plus grands. Maintenez donc la touche Alt enfoncée pour le redimensionner. Tiens le coup. Tiens bon. Maintenant, nous avons à peu près la même taille, l'espacement. Sélectionnez ces trois options. Ou je peux simplement le sélectionner. Laisse-moi juste sélectionner ça. Maintenez la touche enfoncée et redimensionnez-la Revenons à notre référence. Oui, il faut les mettre là. Zoomez, puis faites glisser la touche Ctrl D deux fois avec la touche Alt. Ensuite, je double-cliquerai dessus pour revenir ici. Double-cliquez sur YouTube, sélectionnez-le, double-cliquez dessus, téléchargez à partir de l'image, Instagram, puis double-cliquez pour que nous puissions ajouter X. Ils sont trop grands. Je veux toujours les rendre beaucoup plus petits. Et voilà, je veux le rendre légèrement plus grand, tout sélectionner et l'aligner verticalement comme ça Sélectionnez ces trois éléments, tirez-les vers le bas. Je souhaite les aligner sur ce plan du site. Maintenant, je veux sélectionner ceci et réduire la hauteur. Je pense que c'est maintenant une bonne taille. Il me reste encore une chose. Avant de terminer cette section, nous avons du texte ici. Maintenant, si je le tire, il sera aligné vers la gauche. Alignons vers la droite. Et ici, nous disons, inscrivez-vous pour un accès anticipé. Double-cliquez dessus, collez-le dedans. Fais-le pâlir. Ne fais pas trop sombre comme ça. Permettez-moi d'appuyer légèrement sur ce bouton, de les supprimer. Et je pense que maintenant nous arrivons à quelque chose. Alors maintenant, si nous allons sur notre site Web de référence ici, commençons par le haut et voyons ce que nous avons. Donc, en faisant défiler vers le bas, nos catégories en vedette, nous avons notre section de remises, nos tendances les plus populaires. Ils peuvent cliquer pour en voir plus. Ils peuvent aller lire notre histoire. Ils peuvent s'inscrire à notre liste d'envoi. Ils peuvent nous aider à nous développer en nous taguant et en présentant les chaussures qu'ils nous ont achetées, et nous les partageons sur notre plateforme Laissez-moi les sélectionner. Allons-y. Je pense donc que c' est un bon endroit pour terminer cela. Nous avons pu créer une page de destination de haut en bas. La prochaine chose que nous allons faire est d'organiser et de nettoyer notre dossier, car si nous travaillons en équipe ou si nous voulons revenir plus tard pour travailler sur le projet, nous voulons que quelque chose soit organisé. Comment nettoyer les choses ? C'est ce que nous allons faire dans la prochaine leçon. À bientôt. 11. Nettoyage: Il est maintenant temps de nettoyer notre dossier de conception. Pour en revenir à nos œuvres d'art, où sont-elles ? Oui, nous y voilà. Commençons par le début. Donc, quand je parle d' organisation, je veux dire, groupons différentes choses et nommons-les pour pouvoir les retrouver très facilement. Par exemple, nous avons ici le logo et les éléments nerveux. Maintenant, je veux sélectionner ces éléments Je vais donc sélectionner les kickers et tous les éléments du menu, puis c'est ce que je vais faire Sélectionnez-les tous, puis Contrôlez G. Maintenant, lorsque vous contrôlez G, ils seront regroupés. N'oubliez pas que chaque fois que vous ajoutez quelque chose à votre cadre, il est placé sous ce cadre, sous le cadre. Donc, tout ce que nous avons ajouté à ce cadre se trouve toujours en dessous. N'oubliez donc pas que nous avons ajouté un cadre appelé bureau. Donc, en fait, je vais juste double-cliquer dessus et l'appeler magasin de baskets. Page de destination. Comme vous pouvez le constater, le nom a changé ici. C'est donc le nom de cette page de destination. Et maintenant, dans la page de destination, nous avons divers éléments qui portent le nom qu'ils ont reçu, même lorsque nous les avons importés. Par exemple, cette image de Google. Nous voulons donc renommer les éléments ici. N'oubliez donc pas que nous avons sélectionné ces éléments et les avons regroupés. Maintenant, ils sont dans le premier groupe. Appelons-les header. Et cachons-les. Sélectionnons cette image, image fond. C'est ici. Double-cliquez dessus, appelez-la image Hero et masquez-la. OK, avant de le masquer, je vais sélectionner l'arrière-plan, puis maintenir la touche Maj enfoncée, faire glisser et sélectionner pour les sélectionner. Contrôle G. Je les appellerai bloc de texte de la section Hero. Ensuite, je vais sélectionner ces deux images de la section Control G. Hero. Je vais le cacher, puis masquer les images de la section héros, puis masquer l'arrière-plan de l' image du héros. Permettez-moi de l'appeler le fond de l'image du héros. Maintenant, tout ce qui est là-haut est étiqueté. Je vais juste sélectionner ceci et contrôler G. Maintenant, c'est groupé. Catégories en vedette. Alors cachons-le. Efface-le. Sélectionnons cette réduction ultime. Control G. remises ultimes Section des remises ultimes, masquons-la. Control G., tendance et Section Control G., tendance et tendance, masquons-la À propos de nous Control G. Enfin, le pied de page, section Control G. Réduisez-le, masquez-le et réduisez-le. Allons-y et commençons à tout dévoiler depuis le début. Donc, l' image d'arrière-plan du héros, le bloc de texte du héros activé, l'image d' arrière-plan du héros, sélectionnez-le, maintenez la touche Ctrl enfoncée, sélectionnez l'arrière-plan de l'image du héros, et mettons-les là-haut. En fait, je vais sélectionner ces deux-là, Control G et les appeler la section des héros, pour la réduire. Maintenant, la section des héros est visible. Images de la section des héros. Où se trouvent-ils ? Les images de la section des héros doivent également se trouver dans le groupe de la section des héros. Alors glissez-le et déposez-le là-dedans. Nous avons maintenant l'arrière-plan, le bloc de texte et les images de la section héros bloc de texte et les images Démasquons-les. Prenons également l'en-tête et déposez-le dans la section des héros. C'est censé être en haut, et dévoilons-le Dévoilons la section photo, qui devrait se trouver en bas La section Instagram est censée être juste à côté. À propos de nous, c'est censé être «   oui », juste après les tendances. Réduction ultime, l' inscription à la liste de diffusion est ce qui est censé arriver à notre sujet. Maintenant, démasquons-nous. Oh, la réduction ultime vient après la mise en vedette. Alors maintenant, commençons à faire cette fonctionnalité. Nous y voilà. Réduction ultime. Nous y voilà. Tendance haut de gamme. La liste de diffusion , Instagram et la photo. Nous y voilà. Alors encore un coup d'œil à notre aperçu. Très bien, donc je clique. Maintenant, commençons à défiler la page pour voir ce que nous avons accompli Sympa. Nous y voilà. Vous avez donc maintenant une belle page de destination que vous pouvez ajouter à votre portfolio. On ne sait jamais. Ce sont peut-être les modèles que vous allez montrer à votre employeur potentiel. Nous allons donc le faire de temps en temps. Je vais publier des cours sur la façon de concevoir des pages de destination et d'autres parties de notre site Web ou de notre page Web avec Figma Maintenant que nous finalisons, j'ai quelques réflexions finales à partager avec vous. Je vous verrai donc dans la prochaine leçon. N'allez nulle part. 12. Réflexions finales: Je tiens simplement à vous remercier de m'avoir rejoint dans ce cours. J'espère vraiment que cela vous a donné une bonne idée de la manière d' aborder les projets de conception d'interface utilisateur réels dans Pigma, pas seulement du quoi, mais aussi du comment et du pourquoi de chaque section que nous avons créée Et maintenant c'est ton tour. Pour votre projet de classe, créez votre propre version de la page de destination que nous avons parcourue. Il peut s'agir d'un magasin de baskets, d'une marque de vêtements ou même de quelque chose de différent Faites-en quelque chose d' unique, personnalisez-le. Lorsque vous aurez terminé, assurez-vous de partager votre travail en le téléchargeant l' onglet Projets et ressources situé sous ce lecteur vidéo C'est un excellent moyen de montrer ce que vous avez créé, obtenir des commentaires et peut-être même d'inspirer les autres élèves de la classe. Et si vous avez trouvé ce cours utile, l' une des meilleures façons de soutenir mon travail est de laisser un bref commentaire. Il vous suffit de vous rendre dans l'onglet de révision situé sous ce lecteur vidéo et de laisser quelques commentaires. Cela ne prend que quelques minutes, et cela permet à de nombreux étudiants de découvrir mes cours. Alors allez-y et laissez votre avis. Encore une fois, je tiens à vous dire un grand merci temps avec du temps avec moi du début à la fin, et j'ai hâte de vous voir au prochain cours. Jusqu'à la prochaine fois, restez créatifs. Paix.