Concevoir avec Figma : site Web de restaurant d'une page

1. Bienvenue: Salut et bienvenue. Je m'appelle Adi Purdila. Je suis concepteur et développeur web et ce cours vise à concevoir un site Web de restaurant d'une page dans Figma. C'est ce que nous allons créer. C'est un site web simple pour un restaurant fictif appelé Birdhouse Bar and Grill. Il comprend entre autres une section de menu gastronomique agréable, une navigation dans les menus, galerie de photos Instagram, un formulaire de contact avec une carte, ainsi qu'une zone d' inscription à la newsletter. Maintenant, en suivant ce cours, vous apprendrez deux choses conception UI/UX et Figma. En termes de conception UX, vous apprendrez à lire un descriptif de projet et à créer des images filaires. Mais nous discuterons également de l'architecture de l' information ou façon dont nous structurons le contenu de la page Web. Ensuite, il s'agit de l' interface utilisateur ou de la conception de l'interface utilisateur. Ici, vous apprendrez comment définir la typographie afin qu'elle corresponde au type de site Web que vous concevez et comment choisir les couleurs appropriées et les appliquer à divers éléments. Vous apprendrez comment utiliser le système à huit points pour l'espacement et le dimensionnement. Vous n'aurez donc jamais à deviner quelles valeurs utiliser pour le rembourrage de la marge, la largeur ou la hauteur. Vous apprendrez également comment créer des designs réactifs. Nous allons d'abord concevoir pour de grands écrans , puis créer des versions pour les moyennes et petites versions. Pendant ce temps, vous apprenez également à utiliser Figma pour la conception de sites Web. Bien sûr, vous apprendrez les bases telles que l' utilisation de cadres, texte, de couleurs, de formes, de pages et de raccourcis clavier. Mais vous aurez également un avant-goût des fonctionnalités les plus avancées. Vous apprendrez à utiliser la mise en page automatique pour aligner et déplacer des éléments très facilement. Vous découvrirez également les différents modes de redimensionnement dans Figma, tels que contenu Hug ou le conteneur Fill et quand vous devez utiliser chacun d'eux. Un projet de classe est également disponible pour que vous puissiez suivre et appliquer la théorie. Dans l'ensemble, je pense que ce cours est parfait pour les débutants, car je vais passer par toutes les étapes du processus, du câblage à la conception de versions réactives du site Web. J'ai donc hâte de vous voir en classe. Dans la première leçon, nous parlerons du projet de classe. J'arrive. 2. Le projet de cours: Je pense que vous ne pouvez pas apprendre quelque chose correctement en lisant simplement la théorie que vous devez pratiquer. C'est pourquoi ce cours a un projet que vous pouvez réaliser. Vous pouvez également appeler cela des devoirs ou des devoirs. Ces devoirs et ceux de ce genre, l'aide du dossier de projet fourni, créent un site Web d'une page pour un restaurant appelé Birdhouse Bar and Grill. Vous pouvez utiliser n'importe quel logiciel que vous voulez, mais je travaillerai dans Figma et je vous recommande de faire de même. Maintenant, dans cette classe, je vais faire exactement la même tâche. Je vais utiliser le même dossier de projet. Je vais en discuter avec vous. Je vais créer des filaires, puis je créerai le site Web d'une page. C'est à vous de faire de même. Vous pouvez suivre mes étapes exactement, ou vous inspirer de ce que je fais et créer votre propre version du projet. Le choix est vraiment à vous. Pour commencer avec ce projet de classe, il y a en fait quelques étapes à suivre. L'étape 1 consiste à télécharger les ressources de la classe. Maintenant, dans la description de la classe, vous trouverez les liens permettant de télécharger ces fichiers. Ici, nous avons le logo fictif au format SVG pour Birdhouse Bar and Grill. Nous avons un dossier de projet qui détaille essentiellement tout ce que nous devons savoir sur la conception du site Web que nous allons faire. Ensuite, nous avons un PDF pour toutes les ressources que j' utiliserai dans cette classe. Vous trouverez ici des liens vers le fichier Figma fini. Vous trouverez un ou plusieurs liens vers toutes les photos que j'ai utilisées dans la conception. Enfin, quelques liens pour les icônes. J'utiliserai les icônes Bootstrap et les polices de caractères. En prime, il y a aussi quelques liens utiles ajoutés ici, des liens vers Figma et d'autres outils que nous utiliserons. Avant de commencer cette classe, vous devez tout d'abord télécharger les ressources. étape 2 consiste à créer un compte Figma et si vous en avez déjà un , n'hésitez pas à passer à l'étape numéro 3. Mais si ce n'est pas le cas, vous avez besoin d'un compte pour travailler dans Figma. Parce qu'au cœur de Figma est basé sur un navigateur, tout fichier que vous créez doit être lié à un compte. En créer un, c'est vraiment simple. Vous allez sur figma.com et vous pouvez cliquer sur ce bouton ou sur ce bouton pour accéder à la fenêtre de création d'écran. Ici, vous pouvez vous inscrire avec un e-mail ou un mot de passe ou avec votre compte Google si vous en avez un. C'est un processus très simple. Il est également totalement gratuit de créer un compte Figma. Allez-y et faites-le maintenant. Maintenant, j'ai dit que la création d'un compte Figma est gratuite, et l'utilisation de Figma est également gratuite, mais jusqu'à un certain point, vous voyez qu'il existe des fonctionnalités avancées que vous n'obtenez que sur Figma professional et Figma. plans d'organisation, tels que fichiers illimités, historique de versions illimité, bibliothèques d'équipes. Ils ne seront pas disponibles sur ce plan de démarrage gratuit. Cependant, en tant que débutant, si vous venez de commencer, le forfait gratuit est plus que suffisant, c'est donc celui que je vous recommande d'obtenir. L'étape 3, qui est facultative, consiste à dupliquer mon fichier de conception fini. Permettez-moi d'expliquer pourquoi c'est facultatif. Pour ce cours, je vous recommande commencer par une toile vierge et de travailler à mes côtés en regardant les vidéos de la classe. Tout ce que je fais, vous le ferez aussi de votre côté. Je pense que c'est une excellente façon d'apprendre. Toutefois, si vous souhaitez travailler séparément, peut-être créer votre propre version du projet et utiliser ma conception comme référence, alors vous voudrez peut-être dupliquer ma conception finie. Voici comment vous pouvez le faire. Vous allez commencer par ouvrir le fichier PDF des ressources. Sur la deuxième page, vous trouverez le lien qui indique Website Design by Adi. Vous allez cliquer dessus et cela va l'ouvrir dans votre navigateur. Vous devez vous assurer que vous êtes connecté. Désormais, par défaut, vous verrez que cette version du site Web est en lecture seule. Vous pouvez cliquer sur des éléments pour pouvoir les sélectionner, trouver des distances et explorer différentes propriétés ici pour l'élément sélectionné. Mais une chose que vous ne pouvez pas faire est de modifier ce document car c'est le fichier maître que j'ai partagé avec vous. C'est pourquoi pour vous, c'est en lecture seule, mais je suis capable de le modifier. Maintenant, vous pourriez être tenté de cliquer sur ce bouton qui indique demander à modifier et qui va simplement m'envoyer une notification concernant votre demande. Cela va juste me dire que vous demandez des autorisations de modification sur ce document et que je ne peux pas vous les donner car ce document doit être accessible à tous. Au lieu de cela, ce que vous devez faire pour modifier ce document est de cliquer sur ce lien déroulant ici et de sélectionner dupliquer vos brouillons et maintenant Figma nous indique que le fichier a été dupliqué dans vos brouillons. Si nous revenons sous les brouillons de votre compte, vous devriez avoir le fichier. Vous pouvez maintenant le fermer et ouvrir le fichier dans vos brouillons. Remarquez qu'il y a droit d'auteur ici. Mais la seule différence est que ce fichier est maintenant modifiable, ce qui vous permet de sélectionner le texte, supprimer, de réorganiser les éléments, faire ce que vous voulez. En fin de compte, il s'agit de votre propre copie du document et non du fichier original lié ici dans le PDF des ressources. Je répète, assurez-vous de dupliquer le fichier si vous souhaitez y accéder en édition. Maintenant, je comprends. Tout le monde n'est pas à l'aise montrer son travail à d'autres personnes. Cependant, pour ce cours, je vous encourage vivement à nous montrer votre design fini en le téléchargeant dans la galerie du projet. Deux raisons à cela. Numéro 1, vous recevrez des commentaires de moi ou d'autres étudiants, bien sûr si vous le souhaitez. Cela peut s' avérer très utile. Numéro 2, vous encouragerez les autres à publier leurs projets et c'est toujours une bonne chose. Veuillez prendre ma recommandation et nous montrer votre design fini en le téléchargeant dans la galerie du projet. Enfin, n'oubliez pas que je suis là pour vous aider, quelles que soient les questions que vous pourriez avoir sur ce cours ou sur la conception Web en général, publiez-les dans la zone de discussion. Je réponds à chacun et je vous garantis que, quel que soit le problème que vous pourriez avoir, nous irons au fond des choses. Cela dit, j'ai hâte vous voir dans la prochaine leçon où nous examinerons rapidement le dossier de projet, comprendrons ce que le client nous demande, et nous en discuterons également quelques bases du câblage. On se voit là-bas. 3. Mise à jour Figma 2025 : ce qui a changé: Salut, tout le monde, c'est Adi du futur. Cette vidéo bonus est là pour vous aider à comprendre certains des changements que Figma a depuis que j'ai enregistré ce cours pour la première fois quelques années, Figma avait une apparence un peu différente, et depuis lors, elle a reçu plusieurs mises à jour à fois de ses fonctionnalités et plus particulièrement, de son interface Donc, si votre écran ne ressemble pas tout à fait au mien dans ces leçons, ne vous inquiétez pas. Regardons rapidement ce qui a changé afin que vous puissiez suivre le cours sans aucune confusion. Et juste pour être clair, ce cours est toujours tout à fait pertinent aujourd'hui. Les concepts de base n'ont pas changé, seulement la façon dont Figma présente certains de ses outils Nous allons commencer par le changement le plus notable, savoir la nouvelle interface utilisateur ou la refonte de l'interface utilisateur C'est ce qu'on appelle UI Three au moment de cet enregistrement. Et l'une des choses que vous remarquerez peut-être tout de suite, c'est que la barre d'outils est maintenant déplacée du haut vers le bas, ici même. Nous avons donc essentiellement les mêmes outils qu' auparavant, sauf peut-être pour la section. Je pense que cela a été ajouté ces dernières années. Nous avons toujours les outils de ligne principale, de polygone et de rectangle auxquels nous sommes habitués Nous avons l'outil Stylo, outil texte. Nous avons ici quelques nouveaux outils, tels que l'annotation et la mesure. Ils ont été ajoutés récemment. Certains outils d'IA sont disponibles via ce menu d'action ici. Et récemment, la FGMA a également introduit Figma Draw et le mode Dev, qui s'adressent aux développeurs, mais cela n'a pas vraiment d' importance pour cette vidéo Un autre changement est le fait que nous pouvons désormais réduire ces deux barres latérales en cliquant ici sur ce bouton de réduction de l'interface utilisateur Cela vous donnera essentiellement plus d'espace pour jouer. Et vous pouvez cliquer à nouveau sur ce bouton pour afficher les barres latérales de gauche et de droite. Nous avons désormais également la possibilité de réduire les couches en cliquant sur ce bouton ici. Donc, si vous avez ouvert des couches, c'est un moyen très rapide de tout réduire Et la plupart des modifications se sont effectivement produites dans la barre latérale droite de l'inspecteur. Permettez-moi donc de passer rapidement en revue quelques-unes d'entre elles avec vous. Et vous verrez que la barre latérale droite est maintenant un peu différente de celle de mes vidéos. Les commandes d'alignement sont positionnées un peu différemment Nous avons maintenant quelques options liées aux variables , une autre fonctionnalité introduite ces dernières années. Les opérations booléennes ont été déplacées dans ce menu ici, et je pense que le changement le plus important a probablement été apporté à la mise en page automatique Le panneau de mise en page automatique ressemble donc maintenant à ceci. C'était beaucoup plus simple les années précédentes, mais maintenant sa mise en page a changé. Il possède quelques fonctionnalités supplémentaires, comme par exemple ce mode grille qui a été introduit récemment. Nous avons maintenant la possibilité de régler la largeur et la hauteur d'un élément spécifique en fonction d'un contenu fixe ou d'un contenu intégré, ce qui redimensionnera essentiellement cet élément pour l'adapter à ses éléments secondaires Le conteneur de remplissage l' agrandira essentiellement pour remplir tout l'espace disponible. Nous avons également la possibilité d'ajouter des largeurs ou des hauteurs minimales et maximales, et les variables sont désormais incluses ici. La plupart du temps, certains de ces éléments sont déplacés , comme ce sélecteur d' alignement ici, l'espace ou l'écart entre les éléments est désormais positionné ici Et pour chaque valeur numérique que vous voyez ici, vous avez également la possibilité d' appliquer des variables dès maintenant En parlant de variables, je ne pense pas les avoir utilisées dans aucun de mes cours précédents car elles sont relativement nouvelles, mais elles sont accessibles en cliquant à l'extérieur ou en cliquant n'importe où sur votre Canvas et en accédant simplement à la section des variables ici. Et les variables sont essentiellement un moyen de stocker des valeurs réutilisables telles que des nombres, des couleurs et même du texte. Et parmi tous ces changements, je pense que le principal changement auquel vous devez porter une plus grande attention est le changement de mise en page automatique, car je pense que c'est le plus démodé. Maintenant, il est beaucoup plus puissant que, disons, la mise en page automatique de 2020 ou 2022, mais il fonctionne exactement de la même manière, vous n'avez donc pas à vous inquiéter à ce sujet. Ne vous inquiétez donc pas si votre écran est différent du mien. Les outils sont toujours là, et vous serez en mesure de terminer le projet de classe malgré tout. Maintenant, revenons au cours. 4. Les bases du Wireframing: Avant même de penser à la typographie, couleurs ou à la mise en page, nous devons faire un peu de préparation. Il s'agit de deux choses comprendre le dossier du projet et créer un cadre métallique. Nous ne nous contentons pas d'ouvrir Figma et de commencer à concevoir, c'est une erreur commise par beaucoup de gens. La conception doit être basée sur le contenu, non l'inverse. Nous ne nous contentons pas de créer le design, puis d'adapter le contenu, mais nous créons le contenu puis nous concevons autour de cela. C'est une approche bien meilleure. Pour créer le contenu, examinons le dossier du projet et comprenons ce que le client nous demande en tant que concepteurs. Ensuite, dans le résumé du projet, commençons par la première section, qui nous parle des restaurants, Birdhouse Bar and Grill. Nous avons ici une description générale, qui nous indique essentiellement qu' il s'agit d'une entreprise familiale, ouverte en 1995, et qu'elle est actuellement dirigée par le fils propriétaire d'origine, Robert Wilson. Birdhouse Bar and Grill est un petit établissement où vous pourrez prendre une bière fraîche, vous pourrez déguster de la nourriture délicieuse et vous livrer. Il y a quelques points clés dont nous devons nous souvenir. Nous avons ici le nom du restaurant, l'emplacement et le numéro de téléphone, la devise qui est venue en tant qu'invité, vous le dire en tant qu'ami. La description des services, servant des plats et des boissons savoureux depuis 1995, ainsi que les heures d'ouverture. En continuant, nous pouvons trouver la structure de la page. N'oubliez pas qu'il s'agit d'un site Web d'une page, nous devons donc intégrer tout le contenu sur une seule page. Sans ordre particulier, la structure se déroule comme ça. Nous avons besoin d'un menu alimentaire, d'une section contenant des informations sur le restaurant, de photos d'Instagram, d'un formulaire de contact, d'un formulaire de newsletter, et le client souhaite également que nous affichions la devise quelque part dans la page. Ensuite, le dossier de projet décrit également chaque section plus en détail. Ensuite, nous arrivons à la description du menu. Il s'agit en fait de la description du menu alimentaire. C'est quelque chose que nous pouvons réellement mettre sur le site Web, probablement quelque part avant les plats du menu alimentaire car c'est assez bien écrit. Ensuite, nous avons le contenu du menu. Le menu comporte essentiellement cinq catégories. Nous avons des enjeux, et pour chacun, nous avons le nom du plat, le prix et aussi son contenu. Ensuite, nous avons des hamburgers et des sandwichs , des pizzies, puis des salades. C'est tout le contenu que nous devons placer dans la section menu des aliments. Ce n'est pas beaucoup, mais il va certainement nécessiter une utilisation créative de l'espace si nous voulons mettre tout cela en une seule page. Enfin, après le menu alimentaire, nous avons quelques directives de conception dont nous ne nous soucions pas vraiment à ce stade car nous n'en sommes pas encore au stade de la conception de l' interface utilisateur. Nous allons le sauvegarder pour plus tard. Mais oui, c'est le dossier de projet avec lequel nous travaillons. bien à ce sujet, c'est qu'il contient tout le contenu que nous devons placer sur le site Web, toute la copie est là, les descriptions, l' emplacement, le numéro de téléphone, le modèle, tout est disposé bien ici, donc tout ce que nous avons à faire lors de la création des filaires, c'est simplement copier et coller. Maintenant que nous savons de quoi consiste le projet, nous pouvons créer un contenu basé sur les informations que nous avons reçues et nous allons créer ce contenu sous forme de filaire. Une image filaire est une représentation de faible fidélité du produit final, et son objectif est d'afficher le contenu final du projet. Pensez-y comme un croquis, quelque chose que vous dessinez sur un bout de papier. Dans une image filaire, vous ne vous inquiétez pas de la mise en page, des couleurs, typographie, de l'espacement ou autre chose du genre ; il s'agit simplement d'une esquisse brute. Cependant, ce que vous devez vous inquiéter , c'est le contenu, car il doit être à peu près sous sa forme finale. Vous pouvez apporter de petits ajustements au contenu plus tard, mais je dirais que 95 %, il doit être sous la forme finale parce que vous concevez autour de ce contenu. Vous pouvez penser à une structure filaire comme un squelette ou une fondation. Une fois que vous avez cela, vous pouvez commencer à construire dessus, vous pouvez commencer à ajouter les calques extérieurs, la couleur, typographie, l'espacement, le dimensionnement, toutes ces bonnes choses. Il est vraiment simple de créer des filaires. Comme je l'ai dit, ce ne sont que des croquis bruts, donc l'option la moins chère est le stylo et le papier. Cependant, si vous préférez travailler numériquement, il existe des applications dédiées à cela. L'un des outils les plus populaires est Balsamiq Wireframes. C'est super simple à utiliser, car il dispose d'une bibliothèque de composants prédéfinis que vous pouvez simplement glisser-déposer. Cependant, il s'agit d'une application payante, donc si vous ne créez pas régulièrement de filaires, cela pourrait ne pas en valoir la peine pour vous. Il y a bien sûr d' autres applications de cadrage filaire que vous pouvez utiliser, mais personnellement et c'est ce que je vous recommande également, j'utilise Figma. Deux raisons à cela. Numéro 1, c'est facile. Figma est mon outil de prédilection pour la conception de l'interface utilisateur, je suis donc très familier avec lui. Cela signifie que j'y travaille très rapidement, et créer quelque chose d' aussi simple qu' un filaire n'est qu'un jeu d'enfant. Numéro 2, c'est pratique. C'est le plus important pour moi, car après avoir créé le filaire, j'en fais une copie et je base mon dessin final sur cette copie. Cela signifie que je n' ai pas à recréer tous ces éléments si j' utilisais un autre logiciel. Parce que je travaille sur le même logiciel dans Figma, tout est là. Tous les éléments que j'ai créés dans le filaire, je les duplique et je commence à les éditer directement. C'est un gain de temps considérable, et vous verrez à quel point c' est facile plus tard dans ce cours. Vous pouvez créer les filaires comme vous le souhaitez, mais je vous recommande de le faire dans Figma. Maintenant, faisons un récapitulatif rapide. Commencez toujours un projet en comprenant le résumé du projet. Les filaires sont des représentations de faible fidélité du produit final. Une image filaire doit contenir approximativement la version finale du contenu. Pour plus de commodité, créez un filaire dans le même logiciel que vous utiliserez pour créer la conception finale. Nous avons le dossier du projet, nous savons ce qu' est un filaire et comment en créer un, allons travailler. Dans la leçon suivante, nous commencerons à encadrer les sections d'en-tête et de héros. 5. Wireframing : La section en-tête et héros: Remarque rapide avant de commencer, câblage est un processus assez simple, et cela va généralement assez vite. Cependant, dans ce cours, je vais couvrir le cadrage en cinq leçons parce que je veux expliquer le processus le plus en détail possible, et je ne veux pas faire une seule leçon très longue. C'est pourquoi dans chacune de ces cinq vidéos, nous ne couvrirons qu'une ou deux sections à la fois. Cela dit, commençons par les sections en-tête et héros. Commençons par vous connecter à Figma et créer un nouveau fichier de conception. Je vais placer mon fichier dans le dossier Brouillons, et c'est ce que je vous recommande également, car lorsque vous créez des fichiers dans vos brouillons, vous pouvez avoir autant de pages et de fichiers que vous Vous n'êtes pas limité à un certain nombre. Si vous deviez créer des équipes ici et organiser vos fichiers comme ça, vous devrez acheter l' un des autres plans de Figma. Mais si vous souhaitez créer autant de fichiers que vous le souhaitez, créez-les dans Drafts. Cliquez sur « Nouveau fichier de conception », et nous allons appeler ce site Web Birdhouse Restaurant, et renommons la première page en Wireframes. Ici, saisissez l'outil Frame ou appuyez sur « F » sur le clavier, vous pouvez également y accéder à partir d' ici et dessiner un cadre, et créer cette image de 1 800 pixels de largeur. Effectuons un petit zoom arrière, vous pouvez effectuer un zoom avant ou arrière en cliquant sur ce bouton et en sélectionnant une option, ou vous pouvez maintenir la touche Commande ou Alt enfoncée, et à l'aide de la molette de défilement de votre souris, haut et bas, pour effectuer un zoom avant et un zoom arrière, alors appelons cette image Wireframe. Définissons également une hauteur à, disons 3 000 pixels, pour l'instant, pour le rendre plus haut. Ensuite, ouvrons notre dossier de projet, faisons défiler vers le bas jusqu' à la structure de la page et réfléchissons à ce que nous devrions placer dans l'en-tête. En règle générale, un en-tête de site Web contient une identification de marque, comme un logo. Il contient également le menu de navigation et peut également contenir des informations de contact ou des icônes de médias sociaux. Dans notre cas, nous utiliserons le logo, le menu de navigation et les icônes des réseaux sociaux. Commençons par le logo, nous pouvons le récupérer dans les ressources de classe, il suffit de cliquer et de faire glisser, et là où il est écrit Couleurs de sélection, rendons tout noir car rappelez-vous, en filaire, nous ne sommes intéressés par aucune couleur, donc nous utiliserons simplement le noir, le blanc et le gris. Maintenant, pour faciliter l' alignement des différents éléments de la page, nous allons utiliser ce qu'on appelle des guides. Pour cela, nous devons d'abord afficher les règles, ce sont ces deux-là en haut et à gauche de la page. Vous pouvez le faire en allant sur « Maj R » pour basculer leur visibilité, ou vous pouvez accéder au « Menu », sous « Affichage », « Règles ». Lorsque les règles sont visibles, nous pouvons simplement cliquer et faire glisser comme ceci pour créer un guide. Normalement, Figma affiche la position du guide ici, mais pour une raison quelconque, il s'arrête parfois et ne l'affiche pas, et si vous souhaitez positionner la règle à une certaine distance des bords, un moyen rapide serait simplement en faire la taille souhaitée, disons 120, puis de cliquer et de faire glisser la règle jusqu'à ce qu'elle s'enclenche, comme ceci. Maintenant que cette règle est positionnée à 120 pixels du bord, nous pouvons faire la même chose ici, faire glisser une autre règle comme ça, et nous sommes prêts à partir, nous pouvons maintenant supprimer ce rectangle. Maintenant, prenons notre logo, alignons sur la règle, et nous pouvons passer à autre chose. Voyons le menu de navigation. Selon le résumé du projet, il s'agit de la structure de page, et nous allons créer des éléments de menu de navigation sur cette base. Commençons par le lien pour Home, utilisons Helvetica comme police, vous pouvez bien sûr utiliser la police que vous voulez, mais pour une image filaire, je recommande quelque chose de neutre, comme Helvetica ou Roboto. Faisons de ce 20 pixels, puis la commande D pour dupliquer, puis cliquer tout en maintenant la touche « Maj » enfoncée, pour conserver la même position horizontale, celle-ci sera Menu. Même chose, « Commande D, « Shift », cliquez et faites glisser, faisons ceci, À propos de nous, et qu'avons-nous d'autre ? Contact Instagram et newsletter. Nous pouvons également maintenir les touches « Maj » et « Option » pour dupliquer un élément comme celui-ci Nous allons donc dire ici, Instagram Feed. Refaites cela, contactez-nous, et encore une fois pour le formulaire de newsletter, appelons cette section S'abonner. Maintenant, nous pouvons prendre ces « Commande G » pour les regrouper. Vous pouvez également accéder à « Objet », « Sélection de groupe », c'est donc la commande G sur un Mac, Control G sur un PC. Voyons ensuite les icônes des réseaux sociaux et nous allons utiliser trois icônes classiques, et nous allons afficher des icônes pour Instagram, Facebook et Twitter. Pour les icônes, je vais ouvrir l'application Iconset, c'est l'une de mes applications préférées, elle fonctionne à la fois sur macOS et Windows, et elle est gratuite, et c'est une application que vous pouvez utiliser pour organiser des icônes, et j'ai ajouté un tas de jeux d' icônes différents ici, et c'est vraiment simple. Tout ce que j'ai à faire, c'est cliquer et faire glisser dans mon logiciel de conception, et cela ne fait que saisir l'icône. Mais allons chercher Facebook, Instagram, et j'utilise icônes du jeu « Icône Bootstrap », faites-le glisser là, et aussi Twitter. Faisons ça. Maintenant, réduisons ce point, agrandissons ces icônes un peu. Dans Figma, vous pouvez cliquer sur cette icône qui indique Contraindre les proportions et vous assurer que valeur que vous entrez pour la largeur et la hauteur sera répliquée sur les autres mesures, Faisons donc 32. Si je devais changer la taille sans cliquer sur ce bouton, tout cela ne changera que la largeur ou la hauteur. Faisons 32 par 32 et là encore 32. Maintenant, regroupons ces éléments. Encore une fois, je ne suis pas inquiet de la distance entre ces deux-là, je fais de mon mieux pour créer une distance égale, mais en ce qui concerne le nombre réel, cela sera pris en charge lorsque nous arriverons à l'étape de conception actuelle, donc encore une fois, « Commande G » pour les regrouper, et je vais aligner cela comme ça. Je peux même prendre tous ces éléments, et utiliser les outils d' alignement dans Figma, où il est écrit Aligner les centres verticaux, cliquer dessus, puis avec ces trois outils sélectionnés, « Commande G » à nouveau, et ce sera notre en-tête. Voyons ensuite la zone des héros. En règle générale, une zone de héros contient le titre principal d'un produit. Il contient également un appel à l'action, et généralement certains médias, une vidéo, une image, peut-être une illustration. Mais comme notre site Web est un peu différent, il s'agit d'un site Web pour un restaurant, nous ne vendons pas un seul produit, donc dans la zone des héros, car c'est l'une des premières choses qu'un visiteur voit, nous allons placer quelques éléments différents. Nous allons placer la devise du restaurant, nous allons placer les heures d'ouverture, puis peut-être quelques coordonnées, et une sorte d'image, peut-être une image de l'intérieur du restaurant, ça pourrait très bien fonctionner. Commençons par l'image, je vais saisir « Rectangle Tool » ou R sur le clavier, et je vais simplement dessiner un rectangle comme celui-ci, et cela agira comme une image réservée. dans notre Wireframe. Ensuite, voyons à propos de la devise, nous pouvons revenir au dossier du projet, sous les points clés, nous pouvons trouver le modèle, alors copions ceci à partir d'ici, T pour « Outil de texte », collez-le dans. Maintenant, rendons cela un peu plus grand, disons 70, et rendons ça audacieux. À tout moment, avec un champ de texte sélectionné, je peux saisir l'un des côtés et le redimensionner comme ça, puis je peux le positionner. Ajoutons également l' emplacement, pourquoi pas ? Rendons ces 20 pixels, encore une fois, réguliers, puis dupliquons celui-ci, ajoutons le numéro de téléphone, puis les heures ouvrables. Nous allons simplement les copier dans le dossier de projet, « Option Shift » pour dupliquer cela, double-cliquer pour passer en mode édition, puis copier-coller. Résolvons un peu ce problème ici, et ajoutons également un texte descriptif qui indique Heures d'ouverture, et rendons cela en gras. Maintenant, nous pouvons prendre cela, le regrouper, et nous pouvons prendre les deux, et les aligner ainsi. Comme vous pouvez le constater, nous allons très vite ici, nous ne nous soucions pas des polices que nous utilisons, nous ne nous soucions pas des couleurs, espacement, du dimensionnement, rien de tout cela. l'instant, notre objectif est simplement de placer le contenu dans le filaire. Est-ce que ce sera le formulaire final ? Très probablement, non. Nous pouvons même déplacer certains éléments vers d'autres sections, par exemple, si nous n'aimons pas le fait que l'adresse et le numéro de téléphone se trouvent dans la zone des héros, nous pouvons les déplacer ailleurs, peut-être dans l'en-tête, ou peut-être même créer une barre supérieure ici, dans le design final. Mais pour le filaire, nous pouvons le positionner dans l'en-tête, sans problème. Si vous suiviez le chemin, c'est à votre tour d' encadrer l'en-tête et la section héros. Une fois que vous avez fait cela, nous sommes prêts à passer au menu des plats, c'est à venir. 6. Wireframing : Le menu: La prochaine section de notre liste est le menu des plats. Jetons un coup d'œil au dossier du projet et voyons quel type de contenu nous devons créer pour lui. Passons à la section Structure des pages du dossier de projet, où nous voyons un peu plus de détails sur les différentes sections de page que nous devons créer. Sous le menu, le menu des plats, nous pouvons voir que le client souhaite que nous affichions le menu du restaurant de manière très simple et facile à naviguer et à lire, et si possible, affiche également la description du menu. Nous avons la description du menu. Si nous faisons défiler vers le bas, c'est celui-là , donc nous pouvons simplement aller de l'avant et le copier dès maintenant. Ensuite, nous garderons cela à portée de main car nous allons référencer contenu du menu au fur et à mesure que nous allons de l'avant. Revenons ensuite à Figma et faisons juste un peu de nettoyage ici, je vais sélectionner tous ces éléments, Commandez G pour les regrouper, Commandez G pour les regrouper, donc c'est notre zone de héros que nous avons créée. Précédemment , prenons soin de la section menu. Pour cela, je peux effectivement dupliquer cette section. Commandez D sur un Mac pour le dupliquer, car je veux commencer par la description du menu alimentaire. Je vais peut-être en utiliser une sorte ici. Nous verrons quand nous arriverons à la partie design, mais je vais garder à peu près la même structure. Ici, je vais placer la description du menu que nous venons d'obtenir du dossier de projet. Laissez-moi simplement redimensionner ça, quelque chose comme ça. Pour un titre, nous pouvons en fait revenir au dossier du projet, et je me souviens que nous avions une description de la nourriture qu'ils servaient ou une description des services, et c'est bien ça. ici, c'est dire servir, déguster des aliments et des boissons depuis 1995. Utilisez-le comme titre pour cette section. Faisons en fait un peu plus petit, on y va avec 48 pixels, quelque chose comme ça. Allons faire avancer ça. Regroupons tout et ce sera la description du menu alimentaire. Voyons maintenant le menu des aliments. Si vous vous souvenez du résumé du projet, le client souhaite afficher le menu de manière très simple et facile à naviguer et à lire. Ensuite, en regardant le menu actuel, nous pouvons voir qu'il est divisé en quelques catégories. Nous avons des pieux, des hamburgers et des sandwichs, des quickies et des salades. Fondamentalement cinq, si vous comptez les hamburgers et sandwichs comme catégories distinctes. Mais dans le menu ici, ils sont regroupés en une seule catégorie. Un moyen de le faire comme tout de suite est d'utiliser un contrôleur de tabulation. Parce que le contrôle de tabulation ou un onglet est un modèle qui nous permet d'afficher de grandes quantités de contenu, comme un menu dans un espace relativement court. Nous pourrions utiliser des onglets pour chacune de ces quatre catégories et le contenu de chaque onglet sera le menu correspondant. Allons-y et faisons-le, laissez-moi simplement copier ce texte ici, alignez-le comme ça. Nous allons appeler ce menu. Ici, sous les contrôles de texte, je vais le régler sur la largeur automatique. Créons ensuite les liens de tabulation pour les catégories de menus. Je vais dupliquer ça. Faisons de cela 21 pixels. La première catégorie est ce qui colle. Nous allons dupliquer ça. Le prochain est celui des hamburgers et des sandwichs. Copier-coller, dupliquer à nouveau maintenons la touche Maj enfoncée tout en faisant glisser pour limiter le mouvement à un axe. Le prochain, c'est quoi ? Quickies. Enfin, des salades. Super. Supposons maintenant que nous allons ouvrir les onglets avec les enjeux actifs. Sélectionnons ces trois éléments, et passons du gras à normal. Juste pour souligner le fait qu'il s'agit du contrôle de tabulation actif, cela n'a pas vraiment d'importance. Nous pouvons rendre celui-ci audacieux et irrégulier. Nous ne savons même pas si nous allons utiliser des onglets lorsque nous créerons le design réel. C'est juste une idée. Supposons en fait que oui, nous avons sélectionné les rapides et que nous aimerions afficher certains éléments de Quickies. Allons-y et faisons-le. Au lieu de cela, les ailes de buffle , saisissons l' outil Rectangle ou R sur le clavier, et créons un espace réservé à l'image, quelque chose comme ça. Il n'est pas nécessaire que ce soit exact. Ensuite, je vais coller le texte ici, puis le contenu. Encore une fois, je ne me soucie pas vraiment de l'espacement ou du dimensionnement, c'est juste un croquis brute. Je pense que le prix devrait être indiqué séparément. Faisons ça. Il s'agit d'une image filaire rapide d'un élément du menu, allons-y et regroupons cela. Commandez D pour dupliquer, puis décaler, faire glisser, quelque chose comme ceci, et recommençons. Alignons-le comme ça et faisons les autres. Si doux chili dogs, faisons-le. C'était 6$ et ensuite les frites à 3$, copions ça. C'est une idée de la façon dont nous pouvons représenter l'intégralité de ce menu sur notre page. Nous avons des onglets qui représenteront les quatre catégories de plats du menu. Chaque onglet contient ensuite les éléments appropriés. Dans le filaire, il suffit d'afficher un échantillon. Nous ne parcourons pas tous les contenus du menu. C'est une perte de temps. Nous pouvons le faire plus tard lorsque nous arriverons à la partie design. Si nous utilisons des onglets comme celui-ci, nous n'avons même pas besoin d'ajouter tout le contenu, car cela va être caché de toute façon, cela se passe du côté du développement. autre côté, si nous n'allons pas utiliser un contrôle de tabulation comme celui-ci, et que nous choisissons plutôt d'afficher l'intégralité du contenu du menu alimentaire, alors oui, le design final inclura tous les contenu répertorié ici. Mais nous traverserons ce pont quand nous y arriverons. Pour l'instant, en termes de cadrage filaire, c'est plus que suffisant. Enfin, allons de l'avant et sélectionnons tous ces éléments. Commandez G pour tout regrouper et maintenant nous avons une belle description du menu alimentaire, puis le menu des aliments. Il est maintenant temps de s'entraîner. Allez-y et créez la partie menu alimentaire dans votre version du filaire pour que nous puissions passer à la classe. Si vous l'avez déjà fait, c'est génial, cela signifie que nous progressons. Couvrons maintenant les sections About et Instagram. 7. Wireframing : Les sections À propos et Instagram: Si vous vous en souvenez, le dossier du projet indique que nous avons besoin d'une section contenant des informations sur le restaurant et une autre avec des photos Instagram. Allons de l'avant et créons-les dès maintenant. allons ouvrir notre dossier de projet et nous allons faire défiler vers le haut , où nous verrons quelques détails sur les deux sections que nous devons créer. À propos de nous, le client dit que nous aimerions montrer une petite description de ce qu' est notre restaurant et peut-être montrer une photo ou deux de l'intérieur du restaurant. Ici, nous avons essentiellement un titre sur nous ou sur le restaurant, description textuelle et peut-être une ou deux photos, des images. Ensuite, des photos d'Instagram. Nous devons afficher des photos, des photos Instagram, puis un bouton de suivi. Cool. Revenons à la description générale et nous allons en fait utiliser beaucoup de textes d'ici, à partir du bref pour cela, continuons et copions ce bit, nous allons simplement réutiliser les éléments. car ça va aller beaucoup plus vite. Pour cette section, nous allons essentiellement parler de Birdhouse Bar and Grill. Ici, nous allons avoir une ou deux photos. Cela dépend vraiment. Nous pouvons le faire comme ça. Peut-être que nous aurons deux photos côte à côte, nous verrons et en ce qui concerne le texte ici, copions-collons. C'est le texte que nous allons utiliser. C'est la section À propos. Je suppose qu'on peut avancer un peu ça. Cela n'a pas vraiment d'importance. C'est juste le perfectionniste en moi perd du temps à être honnête. Nous pouvons sélectionner ce groupe et nous en avons fini avec la section À propos. Voyons maintenant sur Instagram. Avant cela, nous allons sélectionner le cadre parent. Voyez comment nous avons atteint presque la partie inférieure, le bord inférieur, alors redimensionnons cela pour que nous ayons beaucoup plus de place pour travailler. Nous allons utiliser 5 000 pixels ici. Super. Voyons maintenant les photos Instagram. Bien sûr, copions cet élément ici. En passant, voici un petit conseil lorsque vous travaillez avec des éléments situés à l'intérieur de groupes ou de cadres. Notez qu'étant donné qu'il s'agit d'un groupe, lorsque je clique sur un certain élément et que je clique, il sélectionne le groupe Pour sélectionner un élément spécifique dans le groupe, je peux double-cliquer et entrer dans le groupe. Vous pouvez voir que je suis passé du groupe 13 au groupe 12. Si je double-clique à nouveau, je vais dans le groupe 6 et ainsi de suite jusqu' à ce que j'arrive à l' élément que je veux. Par exemple, si je n' ai rien sélectionné, pour sélectionner, par exemple, cette image, je peux double-cliquer, double-cliquer à nouveau, puis parcourir toute la structure arborescente pour accéder à l'élément Je veux. Mais il y a en fait un moyen plus rapide de maintenir Commande enfoncée sur un Mac, je pense que sur un PC c'est Control. Je maintiens la touche Commande enfoncée et je survole l'élément que je veux sélectionner et je peux simplement cliquer dessus tout de suite et il le sélectionne dans toute la structure arborescente que j'ai ici dans le panneau des calques. Quelle que soit la profondeur de son imbrication, je peux simplement maintenir la touche Commande enfoncée, cliquer dessus et je peux la sélectionner comme ça. C'est super simple. Maintenant, pour la section Instagram, cliquez sur cet élément en maintenant la touche Commande pour le sélectionner. Commande C pour le copier. Je vais cliquer à l'extérieur, puis coller et appelons ces photos depuis Instagram. Nous allons également sélectionner ce rectangle. Commande C, cliquez en dehors de la commande V. Parfois, cela est simplement collé au même endroit, mais vous pouvez le déplacer et créons la section photo. Une fois encore. Je vais juste le regarder, quelque chose comme cette commande D à dupliquer. Ensuite, nous pouvons sélectionner ces trois et aller ici dans l'Inspecteur où il est dit Plus d'options. Je peux distribuer l'espacement horizontal. Cela va créer un espace égal entre ces deux éléments. Est-ce la dernière quantité d'espace ? Certainement pas. Mais pour un filaire, ça va très bien se passer. Nous avons une rangée avec trois photos. Nous allons dupliquer cela. Faites-le glisser vers le bas pour créer la deuxième ligne. Ensuite, il suffit de sélectionner toutes ces commandes G pour les regrouper Il est donc plus facile pour nous de les déplacer si nécessaire et, dans Figma, commande Z fonctionne de la même manière pour annuler. Si vous souhaitez annuler une modification, il vous suffit de faire Command ou Control Z, comme avec n'importe quelle autre application. Si vous vous en souvenez, le dossier du projet mentionne également un bouton Suivre. Allons de l'avant et ajoutons celui-là. Prenons l'outil de texte. Cliquez sur. Nous allons dire, suivez-nous. Faisons 21 pixels en gras. Prenons également une icône Instagram. Nous allons sélectionner l'élément parent ici, Commande C à copier. Je sélectionnerais cette commande V pour la coller ici et alignons cela au milieu, quelque chose comme ça, puis avec l' outil Rectangle ou R sur le clavier, dessinons comme un arrière-plan de bouton. Notez qu'il s'agit actuellement de notre texte et de notre icône Instagram. Pour le déplacer plus loin dans le panneau de calque, nous pouvons cliquer et le faire glisser ainsi, ou nous pouvons utiliser la commande et crochet gauche pour le déplacer vers le bas une fois, deux fois, trois fois. Ensuite, nous pouvons utiliser le support droit pour aller dans l'autre sens. Commandez le crochet gauche pour l'envoyer vers l'arrière, Commandez le crochet droit pour l'envoyer vers l'avant. C'est un moyen facile de manipuler l'ordre des éléments ou l'ordre des calques dans Figma. fois cela fait, sélectionnons ces trois Commande G et nous allons l'aligner comme ceci. Notez que Figma est très utile pour l' alignement car il nous fournit tous ces guides et guides intelligents qui nous disent : « Hé, votre élément est bien aligné avec les autres éléments qui l'entoure », ce qui est plutôt cool. Maintenant, sélectionnons ces trois éléments. Commandez G pour les regrouper et avec cela, la section Instagram est terminée. Très bien, alors. Comme d'habitude, c'est le moment de la pratique, donc si vous n'avez pas créé les sections À propos et Instagram, allez-y et faites-le. Une fois cela fait, il est temps de passer à la zone de contact. 8. Wireframing : Le formulaire de contact: Eh bien, on a presque fini un Wireframing. Il n'y a que deux autres sections que nous devons créer et la première est le formulaire de contact. Pour commencer, nous allons d'abord jeter un coup d'œil au dossier du projet. Sous le formulaire de contact, le client nous demande de créer un formulaire que les utilisateurs peuvent utiliser pour envoyer des messages ou effectuer des réservations. Il souhaite également une carte qui identifie l'emplacement. Allons-y et faisons-le. Je vais faire défiler vers le haut et je vais copier cette section car elle a une structure que nous pouvons utiliser. Je vais juste le coller comme ça. Appelons ce contact. Rendons ce texte un peu plus petit, comme 48. Je vais en fait conserver ces trois éléments car il s'agit d'une section de contact, il est logique que l'adresse, numéro de téléphone et les heures d'ouverture soient présents ici, pas seulement dans la zone des héros. Nous allons avoir ceci, ceci et ceci. Nous allons avoir une carte ici. Rendons cela un peu plus grand, peut-être pour le différencier du reste, nous pouvons le rendre un peu plus sombre, et pourquoi ne pas ajouter un texte à l'intérieur de cette carte. Remarquez à quel point l'esquisse est rugueuse, n'importe quel texte, c' est juste du texte décoiffé sur des arrière-plans gris. C'est la beauté d'un filaire, nous n'avons pas à prêter attention à de tels détails. C'est juste un moyen rapide de placer le contenu. Nous savons à quoi nous devrions concevoir. Enfin, la dernière chose à faire est de créer un formulaire de contact. Pour cela, dissocions cela et nous le regrouperons à nouveau plus tard. Créons un rectangle. Ce sera le champ du forum, quelque chose comme ça, puis le texte à l'intérieur, disons nom, regroupez-le. Nous allons rester très simple. Nous allons demander une adresse e-mail. Nous allons demander un numéro de téléphone, et nous allons demander le message réel et bien sûr, il faut un peu plus gros, et à la fin, nous avons besoin d'un bouton. Nous avons créé un bouton ici. Prenons ça, et collons-le ici. Supprimons l'icône et choisissons le texte à envoyer. Je peux agrandir le bouton si nous voulons et ce n'est qu'un détail insignifiant. Ensuite, nous pouvons saisir toutes ces commandes G pour les regrouper et ensuite nous pouvons prendre tout cela, commander G pour le regrouper, donc maintenant c'est un groupe que nous pouvons nous déplacer librement et avec cela, le formulaire de contact ou la zone de contact est terminé. Nous avons affiché un titre, nous avons affiché une adresse de restaurant, un numéro de téléphone, des heures d'ouverture, un formulaire de contact à la demande du client, ainsi qu' une carte. Il s'agit d'un espace réservé pour une carte, mais la conception finale aura une carte. Ensuite, il est temps de s'entraîner. Comme je l'ai dit, nous avons presque terminé le câblage. Allez-y et créez la zone de contact pour être à jour sur votre version de la filaire , puis vous serez prêt à passer à autre chose. Ensuite, la dernière zone que nous avons besoin de filaire est le pied de page. 9. Wireframing : Le pied de page: Nous avons atteint la dernière leçon de cadrage filaire où nous nous occuperons du pied de page. Allons-y. En ce qui concerne le pied de page, nous n'avons pas de direction exacte de la part du client, mais généralement le pied de page contient des informations qui n'appartiennent vraiment nulle part ailleurs dans la page. Une chose que nous n'avons pas encore ajoutée à notre page est un formulaire de bulletin d'information et le pied de page est en fait un endroit idéal pour cela. Nous allons donc ajouter le formulaire de newsletter, mais aussi d'autres contenus typiques que vous trouverez dans un pied de page, comme les informations sur les droits d'auteur. Nous ajouterons également le logo une fois de plus. Il s'agit du type de contenu que vous trouvez généralement dans un pied de page. Vous pouvez également ajouter des liens de navigation, si c'est ce que vous voulez. Vous pouvez ajouter un bouton Retour en haut de page. Cela dépend vraiment du site Web. Vous pouvez le rendre aussi complexe ou aussi simple que vous le souhaitez, mais dans notre cas, nous allons rester très simple. Commençons par ce formulaire de bulletin d'information. Encore une fois, je vais augmenter la taille de notre image à 6 000 pixels, ce qui devrait nous donner suffisamment d'espace ici. Commençons par copier ce texte, et pendant que nous y sommes, nous pourrions tout aussi bien le faire automatiquement largeur. Celui-là aussi. Voyons maintenant, avons-nous d'autres ? Oui, c'est le cas. Lorsque vous définissez une largeur fixe sur un morceau de texte comme celui-ci, cela signifie simplement que chaque fois que vous ajoutez plus de texte que les limites, il déborde simplement vers la ligne suivante. Mais si vous deviez la définir sur la largeur automatique, cela ne dépassera pas sur une ligne distincte. Au lieu de cela, il se contentera de redimensionner et augmenter sa largeur pour s'adapter à tout son contenu. Pour des titres comme celui-ci, il est plus que pratique de le définir sur la largeur automatique. Lorsqu'il s'agit de paragraphes comme celui-ci, par exemple, où vous souhaitez que le texte s'arrête à un point précis, vous pouvez bien sûr le définir sur la hauteur automatique, ce qui signifie qu'il a une valeur fixe la largeur et sa hauteur sont dictées par son contenu. Mais sur des trucs comme celui-ci, qui sont des titres, vous pouvez le définir sur la largeur automatique, pas de problème. À moins, bien sûr, que le titre soit très long, auquel cas vous voudrez peut-être le définir sur la hauteur automatique. Mais prenons soin du formulaire de newsletter. Nous allons dire ici « Abonnez-vous à notre lettre d'information ». Prenons également l'un de ces éléments de texte et passons à ce point. À l'intérieur, nous allons ajouter un sous-titre indiquant « Inscrivez-vous notre newsletter pour en savoir plus sur actualités et les événements spéciaux ». Ensuite, nous allons avoir un formulaire simple ici, et comme nous avons déjà créé un formulaire dans la zone Contact, continuons à copier ces deux éléments, les amener à l'extérieur. Modifions le texte ici pour vous abonner. Regroupez-le, déplacez-le vers le haut, puis sélectionnez le groupe, et c'est notre formulaire d'abonnement à la newsletter. Maintenant, pour le reste du pied de page, c'est super simple à faire. Nous allons ajouter un texte de copyright qui indique Copyright 2021 Birdhouse Bar & Grill. Tous droits réservés. Faisons en sorte que ces 21 pixels correspondent au reste de notre texte et cela devrait également être 21. Ce n'est pas trop important, mais c'est juste quelque chose que nous pouvons faire en ce moment. Vingt-et ici. Voyons voir, ils sont tous 21, donc nous sommes bons. Ensuite, nous pouvons juste aligner cela ici, et ensuite nous pourrons revenir au sommet. Nous pouvons saisir le logo, puis faire défiler vers le bas, le coller. Nous pouvons rendre le logo un peu plus petit dans le filaire. C'est donc la section pied de page. allons sélectionner tout ce groupe, puis nous pouvons sélectionner le cadre parent et simplement le redimensionner comme tel. Avec cela, notre filaire est maintenant terminé. Bien sûr, c'est noir et blanc, on peut penser que « Oh, ça a l'air terrible. » Bien sûr, ça a l'air terrible, c'est un croquis. Il n'y a pas notre typographie finale, nos couleurs finales, notre espacement final, dimensionnement, rien de tout cela. Le filaire n'est qu'une esquisse, et comme je l'ai dit dans les leçons précédentes, c'est de présenter le contenu. Nous le faisons de manière très rugueuse, car cela nous permet de travailler très rapidement. Lorsque nous arriverons au design, bien sûr, nous prendrons chaque section et nous commencerons à ajouter les polices, les couleurs, nous alignerons les éléments différemment, nous déciderons, voulons-nous utiliser ces icônes ou peut-être Non ? Peut-être que nous ne voulons pas utiliser d'icônes du tout. Nous verrons quand nous arriverons à la partie design. Mais pour l'instant, c'est notre filaire fini. Comme vous êtes probablement habitué à l'heure actuelle, il est temps de s'entraîner. Si vous avez travaillé à mes côtés, vous devriez avoir une filaire complète. Si ce n'est pas le cas, allez-y et faites-le maintenant pour que vous soyez prêt à passer à la classe. Maintenant, depuis que nous avons terminé le câblage, récapitons rapidement les cinq dernières leçons. Le cadrage est comme l'esquisse, et vous pouvez le faire numériquement ou avec un stylo et du papier. Dans une image filaire, vous pouvez utiliser toutes les polices que vous voulez, mais je recommande des polices neutres comme Helvetica ou Roboto. Une image filaire doit être créée en niveaux de gris. Les couleurs n'appartiennent pas à cette étape du processus. espacement et le dimensionnement ne sont pas définitifs à ce stade, alors n'essayez pas de rendre votre pixel filaire parfait, c'est une perte de temps. Avec cela, nous pouvons commencer le processus de conception actuel, et nous commencerons par définir la typographie. 10. Définir la typographie: Dans cette leçon, nous commençons officiellement le processus de conception. Pour ce faire, nous définissons d'abord la typographie. Cela signifie la police de caractères ou les polices de caractères. Nous utiliserons l'échelle de type et l'espacement des lettres, les poids de police, les hauteurs de lignes, etc. Maintenant, nous commençons comme ça parce que dans une page Web typique, la majorité du contenu est du texte. La typographie aura le plus grand impact visuel. De plus, je trouve vraiment facile de travailler comme ça car cela simplifie le flux de travail. Bien sûr, vous pouvez apporter des modifications à la typographie plus tard, mais le fait d'y remédier en premier vous donne une base solide sur laquelle vous pouvez vous appuyer. Lors du choix des polices de caractères pour un projet comme celui-ci, plusieurs facteurs doivent être pris en compte. Bien qu'il s'agisse d'un sujet qui conviendra réellement à un cours distinct car il y a tellement de choses à parler, je vais essayer de simplifier le processus et d'expliquer essentiellement mes choix. Je crois que tout se résume au but du design et sentiment que vous voulez transmettre aux visiteurs. Le moyen le plus simple de commencer est de déterminer le ton ou l'ambiance du site Web que vous souhaitez concevoir. Est-ce décontracté ou plus formel ? Est-ce plus sérieux ou plus ludique ? Une fois que vous aurez répondu à cette question, vous aurez une direction beaucoup plus claire. Ensuite, pour découvrir le ton et l'ambiance du site Web que nous essayons de créer, examinons de plus près le dossier du projet. Si vous vous souvenez des leçons précédentes, à la fin, nous avons quelques directives de conception. C'est le moment idéal pour les regarder. Le client souhaite que nous concevions un site Web moderne. Remarquez le mot moderne. Il s'agit d'une information clé. Même s'il s'agit d'une entreprise familiale ouverte depuis 1995, les propriétaires aimeraient que nous nous adaptions et que nous suivions les temps modernes. Ils veulent également que le site soit sympathique et pas très chic. Ils ne font pas partie de ces restaurants haut de gamme et super chers. Remarquez les mots clés ici, amicaux, pas très chics. Le design doit plaire aussi bien aux plus jeunes qu'aux personnes âgées. Sur cette base, nous pouvons commencer à nous faire une opinion sur les polices de caractères que nous devrions utiliser. Il existe deux grandes catégories parmi lesquelles nous pouvons choisir. Nous avons des sérifs et des sans serif. Permettez-moi de vous montrer à quoi ressemblent les deux. Pour cela, j'ouvrirai Google Fonts, l'un des meilleurs services dont nous disposons actuellement pour obtenir des polices de qualité. Par exemple, Playfair Display. Maintenant, je pense que nous connaissons tous ce type de police. La catégorie est appelée empattement cause de ces derniers ici. Ces décorations que vous voyez sur les lettres sont appelées sérifs. C'est ainsi que les polices ressemblent au début. Ces polices sont considérées comme des polices plus classiques. En revanche, si nous examinons certaines polices sans serif, ce qui signifie essentiellement sans sérifs, et recherchons certaines d'entre elles, par exemple Roboto, vous remarquerez que sur les sans serifs, nous n'avons plus ces décorations sur les personnages. Ils sont plus géométriques, ils sont plus modernes car ils ne partagent pas ces caractéristiques avec les polices serif. Ensuite, en règle générale, lorsque vous essayez de choisir entre les serifs et les sans serifs, vous devez vous souvenir de ce qui suit : les sans serifs, par exemple Roboto, sont plus modernes et plus amical, ils sont plus décontractés, ils sont plus géométriques. En revanche, comme ceux que je vous ai montrés précédemment, sont plus sérieux. Ils sont plus classiques, plus élégants, et ils évoquent des sentiments différents. Vous utiliseriez une police serif sur le site Web que vous souhaitez transmettre de l'élégance ou paraître plus sérieuse, appelons-le. Si vous voulez un site web plus ludique ou moderne , vous opteriez pour un sans serif, comme celui que je vous montre ici. C'est en un mot. Comme je l'ai dit, ce sujet conviendrait probablement à une classe entière, mais pour l'instant, je veux simplement vous donner une version très condensée. Ensuite, sur la base de ce que je viens de dire et sur la base des directives de conception qui nous sont fournies, parce que le client veut un site Web d'apparence moderne et qu'il veut que le site soit convivial et pas très chic, nous peut immédiatement faire un choix en ce qui concerne la police de caractères. Nous utiliserons une police de caractères sans empattement. Celui que j'ai choisi pour ce projet s'appelle Poppins. Laissez-moi juste vous montrer. Celui-ci est disponible gratuitement sur Google Fonts et voici à quoi il ressemble. Il y a plusieurs raisons pour lesquelles j'ai choisi Poppins. Tout d'abord, c'est un sans empattement. Il est moderne, il est très sympathique, mais aussi, et ce sont des choses très importantes, il est très bien sur les grandes tailles, comme celle-ci, mais aussi dans des tailles plus petites. Par exemple, nous pouvons l'utiliser à la fois pour le corps du texte, mais aussi pour les en-têtes, pour les titres. La deuxième raison est qu' il dispose d'un large éventail de styles ou de poids au choix. Il va de fin, ce qui ressemble à ça, jusqu'au noir, qui ressemble à ça. fait d'être une police polyvalente et de disposer toutes ces options en termes de poids de police le rend très utile, en particulier sur les sites Web où nous utiliserons une seule police de caractères comme nous l'avons ici. Une autre raison est, bien sûr, le fait qu'il est gratuit. Toutes les polices de Google Fonts sont gratuites même dans des projets commerciaux, ce qui est fantastique. Cela signifie que notre client n'a pas à payer pour une police de caractères. Enfin, Poppins se porte également très bien en termes de lisibilité et de lisibilité. Ce sont tous des facteurs que vous devez prendre en compte lors du choix d'une police de caractères pour votre projet. Pour résumer, j'utiliserai Poppins pour l'ensemble du site Web, donc une seule police de caractères. Mais vous pourriez être attiré par autre chose. C'est très bien si vous souhaitez utiliser une autre police de caractères pour votre version du projet. Je vous recommande d'utiliser Google Fonts car il s'agit d'un service gratuit et vous trouverez ici de nombreuses polices de haute qualité. Mais si vous recherchez une alternative et que vous utilisez, par exemple, Adobe Creative Cloud, vous pouvez utiliser Adobe Fonts. On peut y accéder sur fonts.adobe.com, et ici vous pouvez parcourir toutes les polices. Vous pouvez les filtrer par propriétés de classification, balises. Vous pouvez rechercher uniquement des polices géométriques et elles vous donneront toutes ces informations. Vous pouvez même trouver Poppins ici sur Adobe Fonts. C'est une autre excellente ressource, mais ce n'est pas gratuit, alors que Google Fonts est gratuit. Cela dépend vraiment de vous et de ce qui vous paraîtra le mieux. Mais pour ce projet, je vais utiliser Poppins. Maintenant que nous savons quelle police de caractères nous allons utiliser, appliquons-la à notre conception avec toutes les autres caractéristiques typographiques, telles que la hauteur de ligne, la taille de la police, poids de la police, et ainsi de suite. Dans Figma, passons aux pages. Créez une nouvelle page. Nous pouvons appeler cette conception, juste pour que nous ayons une certaine séparation entre les filaires et la conception finale. Copions le filaire et collons-le dans notre nouvelle page. Maintenant, nous avons un bon exemplaire et nous allons travailler sur celui-ci. Commençons par appeler ces grands écrans. Ne vous inquiétez pas trop de ce nom en ce moment, il est juste là pour nous donner une indication de la taille de l'écran. La première chose que nous allons maintenant faire est de sélectionner tous les éléments de texte et de changer leur famille de polices en Poppins. Bien sûr, vous devez l' installer sur votre système, donc si ce n'est pas le cas, c'est vraiment facile. Il vous suffit d'ouvrir les polices dans Google Fonts, puis de cliquer sur « Télécharger la famille ». Il vous donnera tous les fichiers de polices que vous pourrez ensuite installer sur votre système. Je n'y reviendrai pas parce que je suppose que vous savez comment installer une police. Une fois que vous avez installé Poppins, revenons à Figma. Si vous travaillez dans le navigateur, vous ne verrez peut-être pas la police immédiatement ici, auquel cas vous devrez actualiser ou recharger la page. Ensuite, sélectionnons cet élément. Voici un petit conseil : vous pouvez accéder à Modifier et sélectionner toutes les polices avec la même police. Cela va sélectionner tous les éléments qui utilisent Helvetica et nous allons passer à Poppins comme ça. Voyons voir, nous avons toujours besoin des rubriques. Ceux-ci utilisent Helvetica gras, ils n'ont donc pas été sélectionnés également. Mais allons le faire maintenant. Je vais tous sélectionner avec la même police. Changeons ça en Poppins, et voyons si nous avons quelque chose d'autre qui a été laissé de côté. Je maintiens simplement la commande enfoncée et je sélectionne chaque élément de texte juste pour m'assurer qu'il utilise la police de caractères correcte. Comme vous pouvez le voir dans l'inspecteur, ils utilisent tous Poppins. Bien sûr, vous pouvez également voir cela visuellement, mais je préfère m' assurer que c'est un processus simple. Poppins, Poppins, Poppins. Qu'en est-il de ces choses ? Correct. Poppins. Il semble que nous les ayons tous. C'est l'étape 1, modification de la famille de polices. Ensuite, travaillons sur les tailles de police, et c'est ici qu'une échelle de type entre en jeu. Voici le problème : chaque fois que vous décidez de la taille de police à utiliser pour votre projet de conception, il y a deux façons de le faire. L'un d'eux est de le regarder et de dire, ok, eh bien, peut-être que celui-ci aura l'air mieux, un peu plus grand. Celui-ci peut être un peu plus petit comme 46. Mais le problème avec cette approche, c'est que cela peut prendre beaucoup de temps. Au lieu de cela, je vous recommande d'utiliser une échelle de type et une échelle de type ressemble à ceci. Je vais ouvrir un outil appelé échelle de type, et une échelle commence toujours par une taille de base et un rapport. C'est quelque chose comme ça. Vous commencez par la taille de base et vous multipliez par le rapport, et vous obtenez une autre étape dans l'échelle. Vous prenez cette valeur, vous la multipliez par l'échelle ou le ratio, et vous obtenez l'étape suivante, la suivante et la suivante et la suivante, vous pouvez même ajouter autant d' étapes que vous le souhaitez. Comme vous pouvez le constater, c'est comme une progression des tailles de police de grande à petite ou petite à grande. C'est essentiellement ce qu'est une échelle de type. Comme vous le faites de cette façon, vous n'avez plus besoin de deviner la taille des polices. Ils sont tous bien conçus pour vous en fonction de cette taille initiale et du rapport. Selon le ratio, votre échelle ressemblera à ceci, à ceci ou à ceci ou à ceci. Plus l'échelle est grande, plus le contraste entre chaque étape de l'échelle est important. Sur un tiers majeur, un rapport de 1,250, nous avons un contraste relativement faible entre cette taille et cette taille, ou entre cette taille et cette taille. Mais si nous passons au rapport d'or, nous avons une différence beaucoup plus grande entre cette taille et cette taille, entre ceci et ceci, et ainsi de suite et ainsi de suite. À ce stade, vous pouvez simplement utiliser cet outil que je recommande vivement, je l'utilise tout le temps. Vous l'utilisez pour créer votre propre échelle de type. Cela va vous donner exactement les tailles de police dont vous avez besoin. Pour notre projet, je sais avec certitude que je souhaite commencer par une taille de base de 21 pixels. Il s'agit de la taille du corps du texte. Il s'agit essentiellement de la taille d'un paragraphe normal. Je veux une taille de police plus grande que la normale. Dans un navigateur, généralement, la taille de la police de base est de 16 pixels, donc 21 est un peu plus grand que cela. Mais je le fais intentionnellement parce que je veux que le texte soit lisible. Si vous vous souvenez du dossier de projet, selon les directives de conception, notre conception doit plaire autant aux plus jeunes qu'aux personnes âgées. Les personnes âgées apprécieront certainement une taille de police plus grande, car elles peuvent lire plus facilement. C'est pourquoi je choisis de commencer l' échelle de type à 21 pixels. Nous devons maintenant décider de l'échelle ou du ratio que nous allons utiliser. Je pense que pour ce type de projet, le quatrième ratio parfait de 1,333 sera exactement ce dont nous avons besoin, car nous avons un peu de contraste entre chaque étape de l'échelle, mais ce n'est pas exagéré comme par exemple, le rapport d'or. C'est beaucoup trop. Pour ce type de conception pour ce que nous faisons dans ce projet, je pense que la quatrième solution est de nous donner tout ce dont nous avons besoin. Ensuite, une fois que nous avons réglé la taille de la police de base et l'échelle et que nous avons compris notre échelle typographique, nous pouvons revenir à Figma et nous pourrons créer une autre page, et j'appelle généralement cela des actifs. Ici, j'ai généralement mon logo. Mais j'aime aussi créer un cadre qui montre toutes les tailles de police et les hauteurs de ligne que vous utiliserez. Cela va simplement faciliter mon travail plus tard. Créons un cadre. La taille n'a pas vraiment d'importance. Je vais juste commencer par un texte qui va dire 21/, disons 32 pour l'instant, et je vais expliquer ce que ces chiffres font en un peu. Vingt et un pixels correspond à ma taille de police de base C'est celui-là juste ici. Ce que je fais, c'est que je fais le texte 21. Je vais également utiliser Poppins pour l'afficher car cela va me donner l'occasion de voir à quoi ressemble le texte avec la police de caractères que j'ai choisie. Mais je vais utiliser le standard, puis la deuxième valeur est la hauteur de ligne. Maintenant, voici ce qui est intéressant à propos de Figma, il calcule automatiquement la hauteur de ligne pour moi en fonction d'un rapport prédéfini et la hauteur de ligne correspond à la hauteur d'une ligne de texte. Par exemple, si j'en ai un textile ici et que je dis bonjour, il s'agit d'un texte multiligne. Réglons cela sur la hauteur automatique. Notez que lorsque je sélectionne un élément ou un mot, la sélection me donne la hauteur exacte de cette ligne de texte. Si je devais changer cela de 32-48, cette sélection, cette hauteur de ligne sera désormais plus grande que cette hauteur de ligne, qui est toujours réglée sur 32 pixels. Ceci est important car hauteur de la ligne affecte la lisibilité. Vous ne voulez pas une hauteur de ligne trop petite. Par exemple, si je devais définir une hauteur de ligne de huit pixels, ce serait trop petit. Vous ne pouvez tout simplement pas lire le texte car les lignes de texte se chevauchent les unes les autres. Et si je fais ce 52 pixels ? Eh bien, c'est trop long ou trop gros. Le texte n'est pas vraiment lisible pour le moment. Au lieu de cela, vous devez choisir une hauteur de ligne adaptée à la taille de police. Sur 21 pixels, si je devais supprimer cette valeur, Figma calculera automatiquement une hauteur de ligne pour moi, auquel cas elle serait 32. Pour 21 pixels, une hauteur de ligne de 32 pixels est très bonne, donc je vais rester là. Ensuite, dupliquons cela et déterminons la taille de police suivante, qui dans notre cas est 27,99. Arrondissons ça à 28. Ici, je vais dire 28. Nous allons également le changer ici. Pour la hauteur de ligne, Figma calcule à 42. Je vais mettre 40 sur ce coup. Certaines de ces mesures sont liées au système à huit points que j' utilise pour l'espacement et le dimensionnement. Il y a une leçon distincte pour cela et vous allez le voir très bientôt. Mais pour l'instant, toute hauteur de ligne que j' utilise sera un multiple de huit. Dans mon cas, Figma en a recommandé 42, mais j'ai choisi 40. Ensuite, dupliquons cette valeur. La taille de police suivante est 37. Allons-y 37. Nous allons également modifier la hauteur de la ligne ici, et vous verrez en un peu pourquoi cela est si pratique. Pour 37 pixels, Figma recommande 56 pixels comme hauteur de ligne, mais je vais utiliser 48, exactement comme ça. Ensuite, nous avons une taille de police de 50 pixels, comme ceci. Voyons voir. Pour la hauteur de ligne, Figma recommande 75, mais je vais utiliser 64. Comme ça. Continuons. Soixante-six pixels. Pour la hauteur de ligne, Figma recommande 99. Je vais ramener ça légèrement à 80. Nous allons avoir 66 et 80. C'est 64 pour la hauteur de ligne, j'ai oublié de changer ça. Je pense que nous en avons besoin de plus, et ce sera pour les grands titres. Voyons voir, 88. Donc, la taille de police 88, et pour la hauteur de ligne, je vais arrondir cela à 104, qui est également un multiple de huit. Maintenant, mettons ça ici, 104. Cool. Nous avons également commencé à 21 pixels et avons progressé. Mais il se peut également que nous ayons besoin d'une taille de police inférieure à 21 pixels. Allons faire un pas plus bas et l'outil nous donne également des valeurs inférieures, et dans notre cas, c'est 15,75. Allons-le à 16. J'aurai 16 pixels, 24 pixels de hauteur de ligne. C'est exact, donc je dirai 16 et 24. Avec cela, nous avons maintenant la dernière échelle de type. Les tailles de police sont 16, 21, 28, 37, 50 , 66 et 88. Juste à côté de chaque taille de police, nous avons la hauteur de ligne qui sera appliquée à chaque élément. Ensuite, avec cela en place, continuons et appliquons ces caractéristiques typographiques à notre conception. Pour nous faciliter la tâche, nous pouvons copier ce cadre dans notre conception, juste pour que nous ayons ces valeurs là où nous en avons besoin. Commençons par le menu et sélectionnons tous ces éléments. Ici, nous allons utiliser 21 Poppins. Je pense que nous allons opter pour le noir parce que c'est plutôt beau, et je pense aussi en majuscules. Pour accéder à d'autres options de texte, cliquez simplement sur cet élément et passez sous majuscule, choisissez celui-ci en majuscules. Maintenant, nous pouvons les déplacer un peu comme ça. Ensuite, nous avons pris en charge les éléments du menu, 21 pixels. Ajoutons également la hauteur de ligne correcte, qui est de 32, comme ça, et nous pouvons passer à autre chose. Nous allons maintenant aborder toutes les rubriques. Celle-ci, c'est facile. C'est une rubrique 1. Nous utiliserons également poids de la police noire et pour la taille de la police, il est 88, c'est celui-ci ici et 104 pour la hauteur de ligne. Bien sûr, lorsque nous faisons cela, il se peut que nous ayons besoin de déplacer certains de ces éléments car ils ont une taille de police beaucoup plus grande. Voyons ce que j'ai dit. Pour cela, nous utiliserons une taille légèrement plus petite comme celle-ci, mais aussi le poids de la police noire, 66 et 80. En ce qui concerne également les titres, je veux réduire un peu l'espacement des lettres et je vais dire moins trois pour cent. Cela rapproche juste la lettre un peu plus près. Je pense que c'est beaucoup mieux pour cette police de caractères particulière pour Poppins. Je vais faire de même pour la rubrique 1. Si nous l' appelons ainsi, moins trois pour cent. C'est la rubrique 1, en gros. C'est la rubrique 2. Allons-y aussi. Celui-ci, il s'agira également d'une rubrique 2 et voici ce que vous pouvez faire dans Figma pro tip. Vous pouvez sélectionner les éléments de texte. Vous pouvez cliquer avec le bouton droit de la souris, copier coller comme, vous pouvez copier les propriétés. Ensuite, vous pouvez en sélectionner un autre, cliquer avec le bouton droit de la souris, copier coller comme propriétés et coller. Vous pouvez également utiliser les raccourcis clavier. Cela va recevoir exactement le même style que celui-ci. C'est plutôt cool. Voyons les autres rubriques. Sélectionnons ceci, nous allons également sélectionner celui-ci et celui-ci. Nous allons cliquer avec le bouton droit de la souris, Coller les propriétés. Bien. Pour celui-ci, nous allons en fait baisser une taille et un côté plus bas selon notre échelle de type est de 50. Ou nous pouvons aller deux tailles plus bas et opter pour 37, donc 37 tailles de police, 48 lignes de hauteur. Faisons cela, 37, 48, également noir, moins trois pour cent. Super. C'est toutes les rubriques qui ont été prises en charge. Voyons maintenant le reste du texte. Nous allons sélectionner les grands paragraphes. Celui-ci, celui-ci, celui-ci, et celui-ci. Ajoutons une taille de police de 21 pixels, soit la taille de police de base et 32 pixels en hauteur de ligne. Nous allons maintenir le poids de la police à un niveau régulier. Aussi pour celui-là, parce que c'est dans le pied de page, je veux lui donner un style un peu différent. Je vais faire 16 pixels et 24 pixels de hauteur de ligne, encore une fois, en fonction de notre échelle de type. Quoi d'autre ? Assurez-vous que ces paramètres sont corrects. Allons-y 21, 32. Puis ces 21, 32. Au fait, nous pourrions modifier certaines de ces propriétés typographiques au fur et à mesure que nous progressons dans notre conception. ce moment, c'est essentiellement un fondement. Passons à ces questions. Ce sont en fait les titres ou les titres de plats, et peut-être voulons-nous leur donner un peu plus d'importance. Je vais augmenter la taille de la police d'une étape ici. Au lieu de 21, nous utiliserons 28. Nous allons sélectionner ces trois. Nous dirons 28 et 40 et aussi moins trois pour cent, et nous allons utiliser Poppins gras cette fois parce que noir, je veux le réserver pour les grandes rubriques. Je pense que pour ce type de contenu, audace fonctionnerait beaucoup mieux. Pour ces derniers, je vais garder 21 pixels. Faisons la hauteur de la ligne et pour ceux-ci aussi. Celui-ci est déjà réglé. Celui-ci, 21, 32. Qu'avons-nous d'autre ? Nous les avons, nous devrions également avoir une hauteur de ligne de 32 pixels. Nous en avons également, qui devraient être 21 et 32. Celle-ci est correcte. Celle-ci, mettons également à jour 21 32. Celui-ci a 16 et 24 ans. Ça devrait être ça. Permettez-moi de vous montrer la différence entre notre filaire d'origine et la première itération de notre conception après l'application de la typographie. Bien sûr, cela ressemble à un gâchis en ce moment parce qu'il n'y a pas assez de place entre les éléments. Allons en fait réparer ça très rapidement. Mettons juste un peu plus d'espace de respiration ici, quelque chose comme ça. Peut-être le rendre un peu plus petit. Déplacez ça vers le bas. Vous voyez la différence. C'est le filaire. C'est là que nous avons commencé, et c'est la première étape du processus de conception qui définit la typographie. Voyez à quel point cela fait une différence. Parce que, comme je le disais, la majorité du contenu d' une page Web est représenté par du texte. En changeant la typographie, vous aurez le plus grand impact visuel. C'est tout ce que nous allons faire en termes de typographie pour le moment. Maintenant, il est temps de faire un récapitulatif rapide. Lorsque vous concevez un site Web, commencez par la typographie. Avant de choisir une police de caractères, définissez le ton et l'ambiance du site Web que vous concevez. Utilisez des polices sans empattement pour des sites Web plus modernes, décontractés ou minimalistes. Utilisez des polices de caractères à empattement pour des sites Web plus élégants ou plus sérieux. Maintenant que vous connaissez les bases de l'utilisation de typographie et de la sélection des bonnes polices de caractères, allez-y et faites-le. Si vous le souhaitez, vous pouvez choisir une police de caractères totalement différente pour votre version du projet. J'ai expliqué pourquoi j'ai choisi Poppins, mais vous devriez choisir ce qui conviendrait le mieux au type de site Web que nous concevons. Maintenant, quelle est la prochaine étape ? Eh bien, nous travaillons ensuite avec la couleur et nous allons créer la palette de couleurs pour ce projet et nous le ferons dans la prochaine leçon. 11. Choix des couleurs: Travailler avec la couleur est amusant et il peut définitivement transformer un design, espérons-le d'une bonne façon. Mais cela peut aussi en ruiner un. Si vous utilisez trop de couleurs ou simplement de mauvaises couleurs, un bon design va simplement tomber dans le drain, pour ainsi dire. Permettez-moi de vous montrer les couleurs que j'utiliserai pour ce projet, pourquoi je les ai choisies et vous montrer quelques outils utiles pour travailler avec la couleur. Pour moi, tout a commencé par le logo. Parce que dès que je l'ai vu, et quand j'ai vu cet orange brunâtre, j'ai su que je voulais l'utiliser comme accent. Ici, dans le dossier Assets, appelons également cette échelle de type. Créons un nouveau cadre. Nous appellerons ça des couleurs. Au fait, un pourboire pro avec un cadre sélectionné, vous pouvez appuyer sur Commande R ou c'est probablement Control R sous Windows pour passer en mode Renommer. Vous pouvez également cliquer deux fois dans le panneau des calques, ou vous pouvez double-cliquer ici et le renommer comme ça. Avec les couleurs, ce que je fais habituellement, c'est que je dessine un rectangle ou un cercle comme celui-ci et que je colle simplement dans cette couleur. C'est ce que nous utiliserons pour l'accent. Quelques bonnes raisons, l' une est qu'il correspond au logo, donc il correspond très bien à la marque. Mais c'est aussi très proche de la couleur orange, qui se situe entre le brun et le jaune. jaune est synonyme de bonheur, de joie et il attire également l'attention, attire l'attention. Le brun est une couleur plus sérieuse et plus imposante et représente la stabilité et la sagesse. La combinaison de ces deux, je pense, fonctionne très bien pour ce type de site Web, mais aussi pour la marque elle-même. Parce que si nous nous souvenons, il s' agit d'une entreprise familiale qui a ouvert ses portes en 1995. Bien qu'ils cherchent également à être modernes et amicaux, ils veulent également préserver une partie de cet héritage, comme nous pouvons le constater dans cette description générale. C'est une entreprise familiale. Je pense que dans l'ensemble, pour ce projet, cela fera une excellente couleur d'accent. Une couleur d'accent signifie une couleur que nous allons utiliser avec parcimonie, ici et là sur certains éléments pour les mettre en valeur. De plus, il a un excellent contraste sur le blanc et sur un fond sombre. En parlant de contraste, c'est quelque chose que vous devez toujours considérer car l'utilisation de couleurs avec un contraste très faible sera très mauvaise en termes d'accessibilité, les personnes ayant une déficience visuelle ne sera pas en mesure de faire la distinction entre ces couleurs, ce qui rend la tâche plus difficile pour elles. C'est pourquoi chaque fois que vous choisissez les couleurs de votre projet, assurez-vous qu'elles ont un bon contraste. Il existe plusieurs façons de vérifier. Sous macOS, une application se trouve dans la barre de menus, appelée Contrast. C'est vraiment simple à utiliser. Vous pouvez simplement choisir une couleur, puis choisir l'autre couleur, et tout ce qui se trouve au-dessus du double A peut être utilisé. L'Apple vous dit également s'il échoue, comme ici, donc cela signifie que cette couleur assise sur un fond gris clair comme celui-ci n' aura pas assez de contraste, mais sur un blanc un arrière-plan comme celui-ci aura un contraste suffisant. Vous pouvez même le vérifier sur des arrière-plans plus sombres et vous verrez que nous avons un bon contraste. Il existe également des moyens de vérifier cela sur le Web. Si vous ne souhaitez pas payer pour cette application, ou peut-être que vous utilisez Windows et cette application n'est pas disponible, vous pouvez simplement effectuer une recherche Google pour le vérificateur de contraste et vous pouvez la trouver sur WebAIM, Et là encore, vous pouvez coller les valeurs ou les sélectionner manuellement et cela vous donnera le ratio ici et certaines sont très utiles. Maintenant, pour compléter cette couleur d'accent, nous allons parler des couleurs noires ou de la couleur que j' utiliserai pour le texte. Cette couleur est celle-ci, 081E26 qui ressemble à ceci. Maintenant, cette couleur est d'un bleu très foncé. Remarquez que la teinte est celle-ci. C'est une très belle couleur bleue, ce qui, au fait, bleu est un compliment de l'orange donc ils fonctionnent vraiment bien ensemble. Mais je l'ai aussi beaucoup tonifié parce que je veux l'utiliser pour du texte. Un autre conseil que je peux vous donner ici est que chaque fois que vous définissez les couleurs de votre texte, restez à l'écart du noir pur. Cela va être trop dur, cela va trop contraster avec le reste de votre page. Au lieu de cela, utilisez un gris ou mélangez un peu de la couleur avec ce gris comme nous l'avons fait pour cet exemple. Nous utilisons 081E26, qui est gris mélangé au bleu. Je pense que ces deux-là ensemble formeront une très belle paire. Encore une fois, cette couleur contraste très bien avec blanc ou avec d'autres couleurs avec lesquelles nous pourrions l'utiliser. Les deux couleurs que nous utiliserons sont celle-ci, D9366 et 081E26. C'est l'accent, c'est le noir. Je l'appelle noir même s'il n'est pas techniquement noir à 100 %, mais il est beaucoup plus facile de le qualifier de couleur noire parce que c'est ce que nous utiliserons pour le texte, pour divers bordures, arrière-plans et autres choses comme ça. Maintenant que je vous ai montré les deux couleurs que je vais utiliser, continuons et appliquons-les au design. Je vais commencer par sélectionner cette couleur ici, le noir. Passons à notre conception, nous allons en fait dupliquer cet élément. Dans Figma, c'est très simple à faire. Chaque fois que vous sélectionnez un groupe d' éléments comme je l'ai fait ici. Dans l'inspecteur, vous obtiendrez quelque chose appelé couleurs de sélection. Cela montre essentiellement toutes les couleurs utilisées dans le design. Parce que nous avons travaillé uniquement avec du noir, du blanc et du gris, je peux cliquer sur le champ avec la couleur noire et simplement coller la nouvelle valeur. Cela va définir ou remplacer le noir pur par cette couleur sur tous les éléments en même temps. Maintenant, comme vous pouvez le constater, nous utilisons la couleur mise à jour. Est-ce facile ? C'est l'une des raisons pour lesquelles j'adore Figma, elle a également ajouté cette couleur au menu, aux icônes, à tout. Une chose que je vais faire ici, c'est de changer le gril d'emprunt à sa couleur axone. Pour cela, cela peut être un peu délicat. Nous allons simplement les sélectionner individuellement. Nous reviendrons aux ressources, nous allons saisir cette couleur, puis revenir au design et l'utiliser. Super. C'est tout ce que nous ferons avec la couleur à ce stade, car d'autres changements seront apportés au fur et à mesure que nous progressons dans notre conception. Nous pourrions décider que ce paragraphe doit peut-être être un peu tonifié, auquel cas nous pourrions modifier l'opacité des couleurs à 80  % ou 70 pour cent. Mais ce n'est pas quelque chose que nous pouvons faire pour l'instant. Cela se produit plus tard lorsque nous commençons à créer les mises en page et à voir comment nous organisons les éléments et comment nous prenons en charge les éléments espacés. Pour l'instant, l'ajout de la couleur du texte et de la couleur d'accent au logo suffit largement, ce qui nous donne une base très solide sur laquelle nous pouvons nous appuyer. Maintenant, lorsque vous travaillez avec la couleur, vous pouvez simplement choisir celles qui, selon vous , auront le meilleur aspect, c'est tout à fait parfait. Mais certains outils peuvent vous aider dans cette tâche. Là, je dis que c'est plus précis. Je vais vous montrer quelques outils que j'utilise régulièrement. Le premier est Adobe Color. C'est un excellent moyen de découvrir les palettes de couleurs en accédant à l'onglet Explorateur. Si vous ne vous sentez pas inspiré, peut-être cherchez-vous à créer quelque chose avec du vert doré. Vous pouvez rechercher le vert doré ou n'importe quel terme désiré et vous trouverez des palettes de couleurs qui correspondent à ces critères. Vous pouvez les télécharger au format JPEG si vous utilisez la suite Creative Cloud, puis vous pouvez les ajouter à votre bibliothèque, ou vous pouvez l'ouvrir et copier chaque couleur. Vous pouvez également les copier directement au format CSS ou XML, SAS ou RSS. C'est un outil très pratique, mais vous pouvez également créer vos propres palettes de couleurs. Par exemple, si je devais sélectionner ma couleur d'accent, j'irai dans Adobe Color, puis je la collerais juste ici au milieu, où j'ai la flèche de couleur de base. Sur la base de l'harmonie, je peux avoir différentes combinaisons. Ceci est analogique et vous pouvez réellement voir où se trouve chaque couleur sur la roue chromatique. Il s'agit d'une variante monochromatique, différente de la même couleur, mais avec plus de blanc ou de noir ajouté. Vous avez une triade, gratuite, partagée gratuitement. Il existe un tas de règles d'harmonie parmi lesquelles vous pouvez choisir. Mais cela vous permet de découvrir et créer des palettes de couleurs pour votre projet. Par exemple, sous complémentaire ou partagé, assurez-vous que la couleur orange qui est à la base de notre accent est complémentaire avec le bleu. Pour votre propre projet, vous pouvez choisir celui-ci pour l' arrière-plan ou celui-ci et simplement jouer avec la légèreté de la couleur. Celui-là. Cela vous donne vraiment beaucoup de liberté et cela facilite grandement votre travail. La prochaine application s'appelle ColorSnapper. C'est quelque chose que j'utilise depuis très longtemps sur un Mac. Malheureusement, il ne fonctionne pas sous Windows. Mais ColorSnapper vous permet d'afficher un sélecteur de couleurs comme celui-ci que vous pouvez utiliser pour choisir les couleurs de n'importe où sur votre écran. Cela va être copié automatiquement dans votre presse-papiers. Vous pouvez également consulter l'historique des couleurs ici. Je peux choisir parmi différents formats. Dans l'ensemble, c'est une application géniale. Si vous utilisez un Mac et que vous travaillez avec la couleur, la plupart du temps, je recommande vivement celui-ci. Sip est également une alternative pour Mac. C'est un peu plus complexe, car il vous permet également d'enregistrer certaines palettes de couleurs. C'est un peu plus avancé, mais c'est encore une fois, juste pour Mac. Si vous utilisez Windows, vous pouvez installer l'application Power Toys, et un sélecteur de couleurs est également intégré. Cela ne fonctionne pas aussi bien que ces deux-là, mais c'est un début. Si vous utilisez Windows, vous pouvez bénéficier des mêmes fonctionnalités. Un autre outil que j'utilise lorsque je travaille sous Windows, par exemple, est colorcontrast.cc. s'agit d'un vérificateur de contraste sur le Web, et il fait exactement la même chose que celui-ci dans le sens où il vous montre le contraste entre deux couleurs et si elle réussit ou non les tests. Mais celui-ci est gratuit et accessible depuis n'importe quel système d'exploitation. Enfin, c'est l'application dont je vous ai parlé plus tôt. Mais encore une fois, c' est uniquement pour Mac. Choisissez soigneusement les couleurs. Ils peuvent créer ou briser un dessin. N'utilisez pas trop de couleurs. Pour que les choses soient simples, choisissez une couleur pour le texte et une autre pour accentuer certains éléments tels que des boutons ou des liens. Si vous choisissez plus de deux couleurs, assurez-vous qu'elles fonctionnent bien ensemble. Maintenant, les couleurs sont en place, et nous venons de terminer une autre tâche énorme dans le processus de conception de ce site Web. Vous verrez qu'une fois la typographie définie et que vous aurez appliqué des couleurs au texte ou à certains éléments du site Web, vous aurez beaucoup plus de facilité à terminer le design. Comme d'habitude, c'est le moment de s'entraîner. Allez-y et sélectionnez et appliquez les couleurs de votre version du design. Une fois que vous avez fait cela, nous sommes prêts à passer à l'espacement et au dimensionnement. Pour cela, nous allons en fait utiliser un système à huit points. Je l'utilise depuis longtemps et c'est tellement utile pour moi il élimine vraiment les conjectures ce qui concerne l'espacement et le dimensionnement des éléments. Permettez-moi de vous en dire plus à ce sujet dans la prochaine leçon. 12. Travailler avec le système 8pt: Le système à huit points va nous faciliter beaucoup la vie parce que nous allons l'utiliser pour l' espacement et le dimensionnement. C'est quelque chose avec lequel beaucoup de gens ont du mal. Je veux dire, lorsque vous créez un dessin, quelle est la largeur ou la hauteur ou devriez-vous créer un élément ? Quelle marge ou quel rembourrage devriez-vous ajouter à un bouton ? Par exemple, est-ce que tu ne fais que regarder ? Ou existe-t-il une norme que vous pouvez utiliser ? Eh bien, c'est la puissance du système à huit points. Il crée un ensemble normalisé de tailles où chaque article est composé d'un multiple de huit, par exemple 16 , 24, 32 , 48, etc. Maintenant, vous n'avez plus à deviner car chaque valeur est un multiple de huit. vous n'avez même pas besoin de vous souvenir de la valeur totale. Nous pouvons nous souvenir du multiplicateur. Par exemple, sur un bouton, vous pouvez appliquer un rembourrage de 16 pixels, haut et en bas, et de 32 pixels à gauche et à droite. Au lieu de vous souvenir de ces valeurs, vous pouvez simplement vous souvenir du multiplicateur deux pour le haut et le bas, quatre, pour la gauche et la droite, donc deux fois huit et quatre fois huit. Les exemples peuvent continuer et encore. Le fait est que ce système est simple et facilite votre travail. Étant donné que l' espacement et le dimensionnement sont basés sur le même nombre, vous obtiendrez beaucoup plus de cohérence entre les éléments. Maintenant, vous pourriez me demander pourquoi huit, pourquoi pas cinq ou dix ? Je pense que le numéro huit est gravé dans notre conscience parce que nous travaillons beaucoup avec des ordinateurs. les multiples de huit en 16, 24, 32, 120, 256, 512. Ce sont tous des numéros très courants utilisés en informatique. Maintenant 32 gigs de RAM, 512 concerts de stockage, 1024 pixels en largeur d'écran. Les exemples peuvent continuer et encore. Le point est le chiffre huit et ses multiples sont très faciles à retenir. Une autre très bonne raison est que huit échelons jusqu'à un nombre entier même en utilisant certains multiplicateurs de frottement. Par exemple, 8 fois 1,25 équivaut à 10, 8 fois 1,5 équivaut à 12, etc. Maintenant, évidemment, vous pouvez utiliser numéro que vous voulez comme base, vous pouvez en utiliser trois ou sept. L'idée est que vous utiliseriez des multiples de ce nombre. Mais je pense qu'utiliser huit est beaucoup plus simple car nous nous souviendrons ces valeurs multiplicatrices ou ces multiples beaucoup plus faciles pour le chiffre huit. Maintenant, permettez-moi de vous montrer rapidement comment je vais utiliser ce système à huit points dans cette conception. Permettez-moi de dupliquer cela une fois de plus et vous donner un ou deux exemples de endroit où je vais utiliser le système à huit points. L'un d'eux est juste ici dans le menu. La distance entre chaque élément de menu sera un multiple de huit. Ce que je vais faire, c'est simplement utiliser la même distance. Dans mon cas, il sera probablement environ 32 ou 48. Cela dépend vraiment du design final. Pour l'instant, il suffit d'utiliser 32 pixels. J'en ai 32 ici. J'en ai 32 ici. Je vais vous montrer une façon plus simple de le faire, mais pour l'instant, juste à des fins de démonstration, je vais le faire manuellement. En passant, vous pouvez appuyer sur Option et survoler un élément spécifique pour voir la distance entre ce que vous avez sélectionné et cet élément. Je suis juste en maintenant la touche Maj enfoncée pour les sélectionner , puis en utilisant les touches fléchées. Je déplace ça vers la gauche et la droite. Je peux également appuyer sur Maj et utiliser les touches fléchées pour le faire par incréments de 10 pixels au lieu d'un pixel. On y va. C'est 32 pixels. C'est un exemple de l' endroit où j'utiliserais le système à huit points. Il en va de même pour ces éléments ici. Ces icônes sont espacées de 26 pixels, mais je veux peut-être qu'elles mesurent 24 pixels. Encore une fois, c'est un multiple de huit. Qu'en est-il verticalement ? Eh bien, la même chose s'applique. Je veux peut-être avoir une distance entre ce titre et ce texte de 32 pixels. Je vais juste baisser ça et maintenant, j'ai 32 pixels. Qu'en est-il entre ceci et ceci ? Je veux peut-être huit pixels. Entre ces deux-là, peut-être que je veux 16 pixels, encore une fois, des multiples de huit. Je veux peut-être que ça se passe comme ça. Parce que j'utilise 32 pixels comme hauteur de ligne, je maintiens le même système. Je pense que vous pouvez maintenant comprendre pourquoi j'ai redéfini les hauteurs de lignes comme celle-ci. Si vous regardez 24, 32, 40, 48, 64, toutes ces hauteurs de ligne sont multiples de huit. Avant même d'accéder à la partie de conception, j'utilisais toujours ce système à huit points lors de la définition de la topographie. En parlant de typographie, les tailles de police ne doivent pas nécessairement être multiples de huit. Ce qui est important pour maintenir un rythme vertical approprié, c'est que les hauteurs de lignes sont multiples de huit. Comme je le disais, je le fais depuis longtemps et il produit toujours de bons résultats. Au moins, je considère qu'ils sont de bons résultats. Je vous recommande vivement de faire de même. Nous continuerons d'appliquer le système à huit points car nous concevons de plus en plus d'éléments. Pour l'instant, je viens de vous montrer deux, trois implémentations ou des exemples où nous pourrions utiliser ce système. Mais je pense que cela devrait vous donner une bonne idée. De plus, comme nous sommes sur le thème des hauteurs pour les images, nous pouvons créer ces multiples de huit. Bien que dans le cas des images, c'est un peu plus délicat car il faut également envisager un rapport hauteur/largeur. Mais d'une manière générale, lorsque vous souhaitez définir une hauteur fixe pour une image, vous pouvez tout aussi bien la définir sur un multiple de huit. Dans mon cas ici, l'image serait de 480 pixels. Avant de terminer les choses, juste une dernière mention. Si vous constatez que les multiples de huit sont parfois trop grands pour certaines tailles ou distances entre les éléments, n'hésitez pas à utiliser des multiples de quatre. Cela vous donne un contrôle granulaire et plus serré sur la façon dont les choses ressemblent. Mais par exemple, supposons que les 32 pixels sont trop importants, soit une distance trop importante entre ces deux éléments manuels. Le multiple précédent de huit serait de 24. Mais il se peut que 24 soit trop petit, auquel cas vous pouvez faire des compromis. Vous pouvez y aller avec 28, et 28 est en fait un multiple de quatre. Si ça a l'air bien, alors c'est génial. Allez-y et utilisez-le. Même s'il s'agit du système à huit points, cela ne signifie pas que chaque distance, chaque mesure doit être un multiple de huit. Vous pouvez plier un peu les règles si elles ne semblent pas correctes. L'utilisation d'un multiple de quatre est souvent la bonne solution pour ce type de situations. Faisons maintenant un récapitulatif rapide. Le système à huit points crée un ensemble normalisé de tailles où chaque taille est un multiple de huit. Ces tailles peuvent être appliquées à n'importe quel aspect d'espacement ou de dimensionnement. Par exemple, marge, rembourrage, hauteur de ligne, largeur, hauteur, etc. Nous utilisons le numéro huit car il et ses multiples sont très connus et faciles à retenir. Le chiffre huit peut également atteindre un nombre entier, même en cas utilisation de certains multiplicateurs fractionnaires. Par exemple, 1.5. Avec le système à huit points expliqué, nous sommes prêts à passer à autre chose. Mais avant de le faire, je veux vous parler de la mise en page automatique. C'est l'une des caractéristiques les plus importantes et les plus importantes de Figma. J'adore vraiment ça. Je l'utilise tout le temps et je vais également l'utiliser fortement dans ce projet, et je vous recommande également de le faire. Maintenant, étant une grande fonctionnalité, je voulais y consacrer une leçon. Je le fais parce que je veux que vous appreniez les bases de l'utilisation de mise en page avant de revenir dans le processus de conception. Je pense que cela va vous aider énormément au fur et à mesure que nous allons de l' avant. Dans la prochaine leçon, je vais vous montrer les bases de l'utilisation de la mise en page orale dans Figma. Si vous êtes déjà à l'aise avec cette fonctionnalité , n'hésitez pas à passer à la leçon 13. 13. Une introduction rapide à la mise en page automatique Figma: Je pense que la mise en page automatique est la meilleure fonctionnalité de Figma. C'est tellement puissant et si utile que je ne pourrais tout simplement pas travailler sans elle. En résumé, la mise en page automatique vous permet de créer des mises en page dynamiques dans des cadres et des composants. Ces mises en page vont diminuer ou développer au fur et à mesure que le contenu à l'intérieur change. Vous pouvez également utiliser un alignement assez avancé sur ces mises en page. Pour vous donner un exemple simple de mise en page automatique, vous pouvez créer un bouton qui se redimensionne automatiquement lorsque le texte à l'intérieur change. Vous pouvez également ajouter un rembourrage à ce bouton, ce qui est fantastique. Permettez-moi de vous donner un aperçu rapide de la façon d'utiliser la mise en page automatique afin que vous soyez mieux préparé pour les prochaines leçons. Commençons par quelque chose de simple. Créons deux rectangles, un, un plus petit. Une chose que vous devez comprendre dès le début est que la mise en page automatique ne fonctionne que sur les cadres. Vous ne pouvez pas avoir de groupe d' éléments avec mise en page automatique. Vous pouvez appliquer la mise en page automatique à ce groupe, mais elle sera automatiquement convertie en cadre. Pour ajouter une mise en page automatique, il vous suffit sélectionner les éléments que vous souhaitez inclure dans votre mise en page automatique. Dans mon cas, choisissons ces deux-là. Il existe plusieurs façons d' ajouter une mise en page automatique. Vous pouvez cliquer avec le bouton droit de la souris et sélectionner Ajouter une mise en page automatique, ou appuyer sur « Maj A » comme raccourci clavier, ou vous pouvez accéder à l' objet Menu, Ajouter une mise en page automatique. Sinon, si l'objet que vous avez sélectionné est un cadre, par exemple, j'ai sélectionné cet ordinateur central ici, vous avez également la possibilité d'ajouter une mise en page automatique à partir de l' inspecteur en cliquant sur ce bouton ou simplement en cliquant ici. Mais pour l'instant, concentrez-vous sur ces deux éléments. Je vais les sélectionner, Maj A, pour ajouter la mise en page automatique. Cela a automatiquement créé un cadre avec ces deux éléments. Bien sûr, il s'agit d'un cadre imbriqué. C'est quelque chose que vous pouvez faire dans Figma. Vous pouvez avoir un cadre à l'intérieur d' un autre cadre et c'est parfaitement parfait. Comme vous pouvez le constater, ce cadre contient désormais ces deux rectangles. Dans l'inspecteur, vous pouvez voir que la mise en page automatique est active dans ce cadre. Ensuite, en fonction de la disposition ou de la position de ces éléments sur votre canevas, Figma attribue automatiquement une direction. Dans mon cas, c'est horizontal. Mais je peux toujours passer à la verticale. cool, c'est quelle que soit la direction, chaque élément est interchangeable. Je peux modifier cette position à l'aide des touches fléchées ou en modifiant la position de l' élément dans le panneau Calques. Comme vous pouvez le constater, en modifiant la position ou l'ordre des éléments, ils conservent effectivement l'alignement et la distance entre les éléments que j' ai définis pour ce cadre. C'est tout simplement fantastique. Je vous ai montré changer de direction. Ils peuvent le faire avec cette bascule ici, dans l'inspecteur. Vous pouvez également modifier l' espacement entre les éléments en allant avec le curseur de la souris, en cliquant et en suivant ainsi, ou vous pouvez entrer une valeur manuellement. Cela va m'assurer que j'ai toujours 240 pixels entre ces éléments. Je peux ajouter un troisième élément. Par exemple, supposons que je souhaite ajouter un cercle à l'intérieur de mon cadre. Je peux simplement cliquer et faire glisser pour ajouter mon cercle. Comme vous pouvez le constater, le cadre s'est automatiquement redimensionné pour s'adapter au nouvel élément. Ce nouvel élément se trouve désormais 240 pixels des deux autres. Bien sûr, si je change cela à 120, le cadre se redimensionne automatiquement. Est-ce que c'est cool ? Désormais, en plus de pouvoir ajouter un espacement fixe entre les éléments, vous pouvez également ajouter un rembourrage à l'intérieur du cadre. Par exemple, lorsque le cadre est sélectionné, je peux ajouter une couleur de remplissage. Disons que je veux ajouter quelque chose comme ça. Ensuite, je peux ajouter un rembourrage. Je peux dire quelque chose comme 32 pixels. Cela ajoutera 32 pixels de rembourrage à l'intérieur de mon cadre principal. Mais je peux aller encore plus loin et cliquer sur le bouton qui indique l'alignement et rembourrage et je peux modifier individuellement le rembourrage de chaque côté : en haut, à droite, en bas et à gauche. Disons, par exemple, que je veux les 32 en haut, mais peut-être 64 sur le côté droit, peut-être 48 en bas et peut-être 16 sur le côté gauche. heure actuelle, quatre valeurs de remplissage différentes sont ajoutées à cet élément . Vous avez un très haut degré de contrôle sur ce à quoi cela ressemble. Maintenant, la modification des valeurs comme celle-ci définira la valeur de la propriété Mixte car vous disposez d'un ensemble mixte de valeurs, mais vous pouvez toujours écraser ce comportement en saisissant une valeur manuellement. Disons que je veux récupérer 32 pixels. Cela va s'appliquer aux quatre côtés. Un autre fait très intéressant à propos de la mise en page automatique est que vous pouvez aligner les éléments de différentes manières. Par défaut, les éléments sont alignés en haut et à gauche, mais je peux les aligner au milieu. Cela devient plus évident si je fixe une largeur fixe sur mon cadre. Il s'agit du comportement par défaut [NOISE] en haut à gauche, mais c'est en haut au centre. Je peux les aligner en haut à droite. Si je veux ajouter une largeur fixe à mon cadre ou une hauteur fixe, excusez-moi, je peux aussi les aligner au milieu comme ceci. Je peux les aligner au centre, au centre gauche, puis je peux les aligner vers le bas. C'est super simple et très intuitif, et aussi très puissant. Outre les options d'alignement, nous avons également quelques options de distribution d'articles, dont deux en fait, emballées et espacées entre les deux. Emballé est l'option que nous utilisons lorsque nous voulons avoir un espacement fixe entre les articles. heure actuelle, nous avons 120 pixels, donc les éléments sont placés l'un à côté de l'autre avec 120 pixels entre les deux. Mais je peux aussi choisir l'espace entre les deux. L'espacement entre les éléments sera alors automatiquement défini, ce qui signifie que les éléments occupent tout l'espace disponible du cadre parent et l'espacement entre eux est automatiquement calculé. ce moment, nous sommes à 471 pixels, mais si je réduit cela , l'espacement entre eux change également. C'est plutôt cool. Bien sûr, cela fonctionne dans les deux sens. Si je passe à la verticale, vous verrez que ces éléments sont maintenant espacés verticalement au lieu d' horizontalement et que la distribution reste la même, l'espace entre les deux. Pendant que je suis dans l'espace entre les deux, j'aligne également les éléments un peu différemment de ce qu'auparavant car l'espacement entre eux est maintenant calculé automatiquement, mais je peux toujours les aligner sur à gauche, au milieu, à droite, ou si la direction est horizontale, je peux les aligner en haut, au milieu ou en bas. C'est l'espace entre les deux. À tout moment, je peux basculer entre l'espace entre l'espace déballé et aussi travailler sur l'alignement. C'est très pratique pour de nombreux cas d'utilisation différents. Par exemple, je peux avoir une liste d'éléments comme menu de navigation. Disons « Accueil », « À propos », « Contact ». Je peux sélectionner ces trois, et je peux faire Maj A pour ajouter la mise en page automatique. Cela les aligne automatiquement comme ça. Je peux également définir l' espacement entre eux, disons 32 pixels. Désormais, quel que soit le contenu de chaque élément de texte, mise en page automatique garantit toujours que l'alignement est correct et que l'espacement entre les éléments est correct. Je n'ai pas besoin de réaligner manuellement les éléments chaque fois que je fais un changement. Je peux également saisir l'un des objets et changer sa position simplement en utilisant les touches fléchées. Est-ce que c'est cool ? Est-ce que je veux rendre ce menu vertical plutôt qu'horizontal ? Je change juste de direction ici. Bien sûr, je peux également utiliser les touches fléchées Haut ou Bas pour modifier l'ordre de ces éléments. Un autre cas d'utilisation très courant pour la mise en page orale est la création d'un bouton. Supposons que nous ayons un morceau de texte que nous voulons transformer en bouton. Eh bien, avec cela, je peux, bien sûr, ajouter la mise en page automatique. Cela permet de définir automatiquement un espacement par défaut de 10 pixels et un remplissage de 10 pixels. Je peux ajouter une couleur de remplissage au cadre. Disons que je veux le rendre bleu. Disons que je veux rendre ce texte blanc, peut-être gras. Ensuite, une fois mon cadre sélectionné, je peux changer le rembourrage. Disons que je veux 32 pixels en haut et en bas, 64 pixels à gauche et à droite. Peut-être que je veux ajouter des coins arrondis et en faire un bouton pâle. La beauté de cela est que je peux changer ce texte en ce que je veux et le bouton se redimensionnera automatiquement. Je peux même accéder à mon application de jeu d'icônes et faire glisser une icône. Supposons que je souhaite ajouter cette icône de remplissage d'alarme. Je peux cliquer et faire glisser cette icône dans mon Canevas, puis, bien sûr, je peux la faire glisser dans mon cadre de mise en page automatique. Faisons ensuite ce bouton ou cette icône, excusez-moi, 32 pixels, puis je peux sélectionner mon cadre et je peux choisir d' aligner tout ce qui se trouve au centre comme ça. Je peux choisir de changer sa couleur en blanc et je peux choisir la distance entre les objets, disons 16 pixels. C'est peut-être trop grand, faisons-le 24 pixels. Ou peut-être qu'il est trop petit, faisons-le 128 pixels. Vous verrez que quelle que soit la taille de l'élément car j'ai défini l' alignement sur le milieu, le texte et l'icône sont toujours correctement alignés. Revenons à 24 ici. De plus, je peux toujours modifier le message ou le texte à l'intérieur du bouton et le bouton se redimensionnera automatiquement. La distance entre le texte et l'icône restera toujours exactement la même. Si je le veux, je peux toujours changer de position. Je veux peut-être que le bouton soit à gauche plutôt qu' à droite. Tout cela se passe très facilement sans bricoler de ma part. Ce qui signifie que je n'ai pas à repositionner manuellement les éléments. Je viens d'appuyer sur une touche. C'est vraiment aussi simple que ça. s'agit que de deux cas d'utilisation pour la mise en page automatique. C'est super puissant et comme vous le verrez dans cette classe, il existe de nombreuses façons de l'utiliser et je vous recommande fortement d' apprendre à utiliser cette fonctionnalité, car elle sera utile et économisera Vous avez beaucoup de temps. Oh, et ai-je mentionné que vous pouvez imbriquer cadres avec la mise en page automatique dans d'autres cadres avec la mise en page automatique ? Par exemple, je peux saisir cette icône et placer dans ce cadre de menu. Changeons de couleur pour que nous puissions mieux la voir. Mais disons que je voulais être associé au lien À propos de nous. Ce que je peux faire, c'est que je peux choisir ceci et ceci. Je peux faire Shift A pour créer autre cadre avec la mise en page automatique et je peux choisir la direction à l'horizontale, peut-être ajouter un espacement approprié entre les éléments, aligner tout au milieu. Peut-être un peu moins d'espacement ici et peut-être que je veux le rendre un peu plus petit. Maintenant, nous avons le mainframe, qui a la mise en page automatique, mais à l'intérieur, j'ai également un cadre supplémentaire avec la mise en page automatique. Cela peut atteindre autant de niveaux que vous le souhaitez afin que vous puissiez nicher aussi profondément que vous le souhaitez. Ce ne sont là que les bases de l' utilisation de la mise en page automatique. Comme je le disais, je pense que c'est la caractéristique la plus importante de Figma. C'est l'une des principales raisons pour lesquelles j' utilise Figma quotidiennement pour la conception de l'interface utilisateur. Je vous encourage vivement à jouer avec elle, apprendre tout ce qu'il y a à apprendre à ce sujet, et une fois que cela deviendra une seconde nature pour vous, vous construirez des mises en page beaucoup plus rapidement dans Figma. Faisons maintenant un récapitulatif rapide. La mise en page automatique vous permet de créer des mises en page dynamiques dans des cadres et des composants. Ces mises en page se réduiront ou se développeront automatiquement à mesure que le contenu change. La mise en page automatique offre des options avancées d'alignement et de distribution du contenu. Avec la mise en page automatique, vous pouvez définir remplissage individuel sur l'élément parent ainsi qu'une distance définie entre tous les éléments enfants de ce parent. La mise en page automatique fonctionne en mode horizontal et vertical. J'espère que vous comprenez maintenant beaucoup mieux fonctionnement de la mise en page automatique et pourquoi c'est une fonctionnalité si importante. Je crois que vous aurez beaucoup plus de facilité et de plaisir à travailler sur Figma une fois que vous aurez maîtrisé cette fonctionnalité, alors n'oubliez pas de vous entraîner. Je ne vous ai montré que quelques exemples de base et des cas d'utilisation. Mais allez-y et jouez avec ça seul et je pense que vous aurez le coup d'œil en un rien de temps. Maintenant, nous avons réalisé un peu de conception ici en ajoutant des couleurs et en configurant la topographie. Mais maintenant, il est temps de vraiment s'y atteler. Nous allons diviser la page en sections plus petites et nous allons traiter une section à la fois, et nous allons commencer dans la prochaine leçon avec l' en-tête du site. Je vous y verrai. 14. En-tête de site: Lorsque je conçois un site Web comme celui-ci, je commence toujours par le haut et je me fraie un chemin vers le bas. La première section que nous allons aborder est l'en-tête du site. Dans le filaire, il contient le logo, menu de navigation et les icônes sociales. Maintenant, avant de commencer, notez rapidement que le filaire est là comme guide. Son but est de nous montrer le contenu. Cependant, sur la conception finale, il est parfaitement bon d'ignorer la disposition du filaire et il est parfaitement bon de réorganiser les éléments de manière à ce qu'ils aient le plus de sens pour la conception finale. Vous verrez exactement ce que je veux dire par là. Commençons. Je vais travailler sur une copie de notre filaire, mais la plus récente sur laquelle les changements de typographie ont été appliqués ainsi que les couleurs. Comme vous pouvez le voir ici, nous avons appliqué cette couleur 081826. Pour nous simplifier un peu les choses, nous allons définir deux styles de couleurs. Je n'en ai pas parlé auparavant, mais ils sont vraiment faciles à comprendre et ils vont quelque chose comme ça. Chaque fois que vous utilisez une couleur que vous envisagez réutiliser à plusieurs endroits, il est judicieux de créer un style de couleur. Pour ce faire, sélectionnez un élément et accédez à la section couleur, cliquez sur Style, puis créez un style en cliquant sur le bouton Plus. Appelons ça noir. heure actuelle, au lieu d' afficher la section de couleur, elle affiche simplement du noir, et je peux faire de même pour le reste des éléments. Au lieu d'utiliser 081826, je peux cliquer ici et je peux choisir le noir, et voici la partie cool. Maintenant, lorsque je clique en dehors de mes cadres, si je clique sur le canevas, je peux voir tous mes styles de couleurs ici et je peux cliquer sur Modifier, et je peux modifier ses propriétés et tous les éléments qui utilisent ce style de couleur seront automatiquement mis à jour. C'est super cool. Maintenant, permettez-moi de remettre cette couleur en arrière. Pour modifier la valeur de couleur codée en dur le style de couleur que je viens de créer dans toute la page, je peux simplement sélectionner la page entière, et chaque fois que je vois 081826, je peux cliquer dessus et je peut choisir le noir. Maintenant, tous les éléments de ma page que nous utilisons, cette valeur codée en dur utilisent maintenant du noir. Cela va rendre très simple pour moi changer la couleur si je décide à un moment donné que je ne l'aime plus, ou si je dois y apporter de petits ajustements. C'est une façon très rapide de le faire. Créons également un style de couleur pour cette couleur, D09366, et nous allons appeler cet Accent. Génial. Voyons maintenant l'en-tête du site. Pour faciliter le travail, nous allons utiliser la mise en page automatique. Le premier endroit où nous allons ajouter la mise en page automatique est en fait le cadre parent. Voici comment nous allons le faire. Nous allons le sélectionner, nous allons passer à la mise en page automatique, nous allons cliquer dessus. Nous allons nous assurer que la direction est verticale, et nous allons définir l'espacement entre les éléments à 240 pixels, et je vais également définir le rembourrage à zéro. Vous comprendrez pourquoi dans un petit peu. Je vais également définir une largeur fixe sur cette image à 1800 pixels. Je vais changer l' alignement au milieu, que tout soit bien aligné au milieu. Étant donné que tous les éléments enfants de ce cadre parent se trouvent à l'intérieur de groupes, ils sont bien organisés, alignés et positionnés à 240 pixels l'un de l'autre. C'est exactement ce que je veux. Cela va nous rendre très simple à travailler, car si à un moment donné j'ai décidé, d'accord, je veux échanger les positions de ces deux éléments, je peux simplement les sélectionner et les déplacer où je veux dans le page. Regardez à quel point c'est facile. Peut-être que je veux que le menu soit en haut de la page, je peux simplement le déplacer comme ça. C'est plutôt cool. Mais maintenant, tournons notre attention sur l'en-tête. Par défaut, il s'agit de la structure que nous avons ajoutée dans le filaire. Mais c'est comme une structure typique pour un en-tête, et je ne veux pas vraiment le faire. Je veux quelque chose d'un peu plus spécial pour ce site de restaurant. Au lieu de cela, je vais le sélectionner, et il s'agit actuellement d'un groupe, mais je peux toujours le transformer en cadre avec mise en page automatique. Je peux simplement cliquer ici. Je peux le rendre vertical. Je peux aligner tout ce qui se trouve au centre comme ça, et je peux définir l'espacement entre les éléments sur 64 pixels. Ça a l'air plutôt bien. Maintenant, nous allons appeler cet en-tête. Voyons le logo. Il s'agit d'une hauteur de 80 pixels. Je pense que je vais le garder à cette taille parce qu'il est plutôt beau, et si vous vous demandez pourquoi 80 pixels ? Pourquoi 240 pixels ici ? Eh bien, ce sont tous des multiples de huit. J'utilise le système à 8 points, donc si vous manquez cette leçon, revenez en arrière et regardez-la, alors vous comprendrez pourquoi. Nous parlions maintenant du logo, nos 80 pixels de hauteur. Je pense que c'est une très bonne taille. Je le règle à 64 pixels depuis le menu de navigation. Puisque nous sommes dans le menu de navigation, renommons également ce menu en menu de navigation et transformons également cela en cadre avec mise en page automatique, et veillons à ce que nous ayons un et veillons à ce que nous ayons espacement approprié entre ces éléments. Permettez-moi de zoomer un peu ici. Je pense que je veux un peu plus, peut-être 48 pixels comme ça, donc ils sont un peu plus éloignés. Ça a l'air plutôt bien. Ce que je n'aime pas, c'est la position de ces icônes. Ils ne semblent pas à leur place sous le menu. Ce que je peux faire, c'est de les placer ailleurs sur ma page. Peu importe que le filaire d'origine dise qu'il doit être à côté du menu. Dans la conception finale, je peux apporter n'importe quel changement que je veux tant que je conserve le même contenu, mais je peux prendre ce contenu et le réorganiser comme bon me semble. C'est exactement ce que je vais faire ici. Je vais prendre cela, que je vais appeler des icônes sociales, et aussi y ajouter une mise en page automatique. Je vais commander X. Je vais juste à « Command V » pour le coller dans ma page. Maintenant, comme tout mon cadre utilise la mise en page automatique, a été placé en bas et je veux qu'il soit tout en haut, donc je vais simplement le déplacer comme ça. Maintenant, après un zoom avant, j'ai maintenant mon cadre d'icônes sociales positionné en haut. Mais je vais probablement les placer quelque part du côté droit, ce qui signifie que j'ai de l'espace libre ici à gauche, et en haut à gauche. Je peux utiliser cet espace pour ajouter des informations peut-être utiles. Et si nous ajoutons l'adresse et le numéro de téléphone du restaurant qui se trouve tout en haut. C'est facile à voir et c'est en fait une très bonne utilisation de l'espace en ajoutant des informations de contact à cet endroit. Ce que nous allons faire, c'est de créer une barre supérieure qui contiendra ces informations, l'adresse, le numéro de téléphone, ainsi que les icônes sociales. Ensuite, avec le cadre des icônes sociales sélectionné, je peux ajouter à nouveau la mise en page automatique pour créer un cadre parent. Je peux à nouveau « Shift A » pour créer un autre cadre. Notice Frame 1 contient désormais des icônes sociales. Appelons cette barre supérieure du cadre. La barre supérieure va simplement faire glisser ses côtés pour rendre pleine largeur ou nous pouvons réellement définir sa largeur manuellement à partir d'ici, nous pouvons la régler à 1 800 pixels. Mais voici un petit conseil pour vous. Option de redimensionnement de CD disponible à l'intérieur du cadre avec mise en page automatique. heure actuelle, il est réglé sur une largeur fixe. Mais nous pouvons également le changer pour étreindre le contenu, ce qui rendra le cadre aussi grand que son contenu. Ou je peux choisir « Fill Container ». Cela le rendra aussi grand que l'espace disponible dans le conteneur parent, qui dans mon cas c'est le cadre principal. Je me rends compte que cela peut sembler un peu trop compliqué en ce moment, mais ce n'est pas vraiment le cas. Permettez-moi de l' expliquer un peu plus loin. Nous avons notre cadre principal appelé Grands écrans. Il s'agit de notre page Web. Dans ma page Web, permettez-moi de réduire certains de ces groupes pour que vous puissiez mieux comprendre, dans mon cadre principal, nous avons deux enfants, nous avons deux enfants, en-tête et la barre supérieure. La barre supérieure a une mise en page automatique, et à l'intérieur de la barre supérieure, nous avons le cadre des icônes sociales, qui a également une mise en page automatique. Maintenant, j'ai configuré la barre supérieure pour remplir le conteneur. Cela signifie que sa largeur sera égale à 100 % de son conteneur parent. Le conteneur parent est un grand écran, soit 1 800 pixels. Vous remarquerez que si je vais redimensionner l'écran des parents ou le cadre parent à 1 645, ma barre supérieure sera également 1 645 car elle est configurée pour remplir le conteneur. J'espère que c'est un peu plus logique. Je suis sûr que lorsque vous jouez avec ces fonctionnalités, vous commencerez à mieux les comprendre. Ensuite, j'ai dit que nous allions ajouter ces deux éléments à l'intérieur de notre barre supérieure. Si vous souhaitez placer des éléments directement dans un cadre avec mise en page automatique, vous pouvez simplement sélectionner ce cadre et vous pouvez simplement les coller. Maintenant, passons la direction à horizontale. Parce que je veux qu'ils soient affichés sur une seule ligne. Je vais également changer la hauteur pour étreindre le contenu. Cela rendra la barre supérieure aussi haute que le contenu à l'intérieur. Maintenant, je veux que les icônes soient du côté droit, et parfois Figma a un bug étrange où si vous jouez avec le redimensionnement ici, celui-ci sur l' horizontale bogue. Dans ce cas, vous devez resélectionner certains de ces éléments comme dans cette situation. Nous venons de passer du contenu des câlins à remplir le conteneur pour redimensionner cette barre supérieure en conséquence. Je vais utiliser une belle fonctionnalité ici, la distribution de l'espace. Je vais passer de l'espace à l'espace entre parce que je veux afficher les icônes au bord très éloigné ici sur le côté droit et le texte sur le côté gauche. En utilisant l'espace entre, Figma définira automatiquement l'espacement entre chaque élément pour qu'il soit égal. Alignons également ces éléments au centre, comme ça. Pour l'instant, nous allons nous débarrasser de ce rembourrage de 10 pixels, nous n'en avons pas besoin. Au lieu de cela, nous utiliserons un rembourrage de 24 pixels en haut, 24 en bas, et aussi, je vais définir un rembourrage à gauche et à droite sur 64 pixels. Nous avons maintenant 64 pixels ici et 64 pixels, la distance entre les éléments et les bords. De plus, si vous vous en souvenez, nous avons réglé ces guides sur 120 pixels. Mais nous allons changer cela pour qu' ils soient à 128 pixels. Puisque c'est à 120 ans, je vais faire 1, 2, 3, 4, 5, 6, 7, 8, donc 128. À l'aide des touches fléchées, je vais pousser ça vers la gauche, 1, 2, 3, 4, 5, 6, 7, 8. Je vais également créer un nouveau guide à 64 pixels , ici et ici. Normalement, la valeur de ces guides est affichée ici sur la règle, ou la position des guides sera affichée sur la règle. Mais pour une raison quelconque, Figma s'en prend à moi en ce moment. Je ne sais pas pourquoi, mais généralement, vous pouvez voir cette valeur juste à côté du guide ici, mais nous pouvons nous en passer pour l'instant. Maintenant, je veux rendre ce texte un peu plus petit, donc je vais sélectionner les deux. Je vais utiliser 16 pixels. Nous devons également modifier la hauteur de la ligne. Si nous référençons notre page Actifs, nous pouvons voir que sur 16 pixels, nous devons utiliser 24 pixels comme hauteur de ligne. Nous reviendrons à notre conception avec ces deux éléments sélectionnés, changerons la hauteur de ligne à 24. Maintenant, j'aimerais également ajouter quelques icônes à ce texte. Peut-être une icône représentant une carte épingle à celle-ci et une icône avec un téléphone pour celui-ci. Je pense que ça va juste rendre les choses un peu plus intéressantes. Pour cela, je vais ouvrir ma configuration d'icônes, où j'ai toutes mes icônes SVG. Nous allons utiliser un jeu d'icônes appelé icônes Bootstrap, et vous trouverez également le lien vers celui-ci dans le fichier PDF des ressources. Il s'agit de l'ensemble des icônes Bootstrap. Cherchons une épingle de carte, qui ressemble à ceci. Peut-être l'emplacement. Non, peut-être juste une épingle. Voyons si nous pouvons trouver des icônes différentes. Peut-être quelque chose avec la géographie, le géo-alt. Je pense que cela fonctionnerait très bien, donc je vais juste le copier et le coller ici. La taille est correcte, 16 x 16, mais je veux le regrouper avec le texte. Je vais sélectionner à la fois l'icône et le texte. Appuyez sur « Maj+A » pour ajouter un autre cadre avec mise en page automatique qui ne contient que ces deux éléments. Je vais m'assurer qu'il est aligné comme ça au milieu. Je veux que le texte soit à droite. Je vais régler l'espacement sur huit pixels, comme ça. Je souhaite également utiliser une couleur légèrement discrète pour l'icône, environ 50 %. Pour ce faire, nous pouvons soit modifier l'opacité du calque nous pouvons soit modifier à 50 %, soit créer un nouveau style de couleur dont l'opacité des couleurs est définie sur 50 %. C'est vraiment à vous de décider. Je pense que c'est un peu plus facile définir l'opacité sur le calque , car si vous modifiez la couleur sous-jacente, l'opacité restera la même. Je vais juste le faire, 50 % en utilisant la couleur noire. Faisons de même pour les autres textes, c' est-à-dire celui-ci. Je vais juste chercher l'icône du téléphone, et je vais utiliser celle-ci qui dit téléphone. Même affaire, je vais copier et coller cela, et je suis allé de l'avant et, bien sûr, changer la largeur, hauteur à 16 opacité, 50 pour cent de couleur en noir. Maintenant, je vais faire la même chose que pour l'autre texte. Sélectionnez le texte et l'icône Maj+A, assurez-vous que l'espacement est de huit pixels, alignez-les au milieu et placez le texte sur le côté droit. Maintenant aussi, j'aimerais que ces deux éléments fassent partie du même groupe, donc avec eux sélectionnés, Maj+A donc avec eux sélectionnés, à nouveau pour créer un autre cadre de mise en page automatique. Je vais définir la distance entre eux à 32 pixels, exactement comme ça. Maintenant, je souhaite également ajouter un petit séparateur de bordure au bas de cette barre supérieure. Laissez-moi réellement Shift-R pour cacher ces guides. pour que nous puissions voir ce que nous faisons. Avec la barre supérieure sélectionnée, je peux simplement aller dans Contour, cliquer pour ajouter, je vais utiliser le noir. Je vais choisir dehors. En fait, le noir ici est un peu trop. Nous devons réduire son opacité pouvoir détacher le style, changer son opacité à 15%. Maintenant, si nous le voulons, si nous savons que nous allons réutiliser cette couleur ailleurs, nous pouvons créer un style de couleur pour elle. Cliquons sur le « Plus » et appelons-le Black 15. Quinze représente 15 % d'opacité. Maintenant, vous avez les deux méthodes pour travailler avec une couleur pleine et une couleur opacité. Ici, sur l'icône, nous avons ajouté l'opacité au calque, alors que nous avons ajouté l' opacité à la couleur. Vous pouvez voir que vous pouvez utiliser les deux méthodes. Cela dépend vraiment de ce que vous voulez faire. Enfin, voyons ces icônes. Ils sont un peu trop gros en ce moment, alors redimensionnez-les à 24 pixels. Celui de Facebook n'a pas reçu la mise à jour. De plus, l'icône Instagram est un peu tordue. Parfois, Figma fait ça avec quelques icônes SVG, alors laissez-moi résoudre ça très rapidement. Je viens d'utiliser une nouvelle copie de l'icône pour remplacer l'ancienne. s'agit également d'icônes du jeu d'icônes Bootstrap. Comme vous pouvez le voir ici, l'icône Instagram semble correcte. Allons également de l'avant et modifions la distance ici, ou l'espacement entre les éléments de 24 à 32. Je pense que ça va paraître un peu mieux. Assurez-vous que les couleurs sont correctes, et elles le sont. Je pense que c'est fini. C'est maintenant notre barre supérieure et notre en-tête de site. Parce que nous avons utilisé la mise en page automatique, ils sont correctement positionnés. L'en-tête est désormais centré sur la page. Le logo est correctement positionné en dehors du menu de navigation. Nous avons également déplacé du contenu de la zone des héros vers cette barre supérieure qui, soit dit en passant, la barre supérieure se comporte désormais comme ceci. Voyez comment, lorsque je redimensionne la page, la barre supérieure se redimensionne également et que les éléments se repositionnent automatiquement ? C'est super cool. C'est la puissance de la mise en page automatique et les différentes options de redimensionnement que nous proposons dans Figma. Ensuite, barre supérieure, en-tête du site, cochez. Maintenant, c'est à vous de créer l'en-tête du site. si vous avez travaillé à mes côtés, alors c'est génial. Cela signifie que c'est déjà fait. Si ce n'est pas le cas, allez-y et regardez à nouveau la vidéo. Si nécessaire, mettez-le en pause. S'il y a quelque chose que vous ne comprenez pas ou si vous avez une question, commencez simplement une nouvelle discussion ci-dessous, et je vous aiderai quand même. Cela dit, passons à la section suivante de notre design, qui est la zone des héros. J'arrive. 15. Section de héros: La section Héros est une partie très importante d' un site Web, car c'est l'une des premières choses qu'un visiteur voit. Habituellement, il contient un titre et description du service ou du produit présenté, et une sorte d'action, achetez maintenant, essayez gratuitement, abonnez-vous, etc. Notre espace Héros est un peu plus simple en raison de la nature du site Web que nous concevons. Allons-y. Basé sur le filaire que nous avons créé, s'agit de notre section Héros. Ici, nous avons la devise du restaurant qui est venu en tant qu'invité, partir est un ami et nous avons aussi les heures d'ouverture et ensuite une image. Commençons par l' image réelle et vous trouverez des liens vers toutes les images de stock que j'ai utilisées pour ce projet dans le fichier PDF des ressources, alors téléchargez-les à partir de là ou utilisez vos propres photos. Mais pour moi, pour cette section, je vais utiliser une photo qui montre essentiellement le restaurant. s'agit évidemment d'un restaurant fictif, mais la photo que je vais utiliser peut être considérée comme l' intérieur du restaurant. Avec cette forme sélectionnée, rappelez-vous que ce n'est qu' un simple rectangle, je peux aller dans Remplir et au lieu d'une couleur « Solid », je peux choisir une « Image ». Je peux cliquer sur ce bouton, et dans le dossier Ressources de classe, j'ai téléchargé l'image que je vais utiliser depuis Unsplash. Je vais juste choisir ça. Si vous le souhaitez, vous pouvez jouer avec certaines options de retouche d'images ici dans Figma. Pour moi, je vais juste le laisser tel quel. La seule chose que je vais faire, c' est d'ajouter une couleur de superposition. Pour cela, je peux ajouter un autre remplissage, comme ça. Pour la couleur, je vais utiliser le « noir » 081826. Je vais utiliser ça au lieu de la couleur noire pure et je vais ajouter une opacité de 25  %, comme ça. Maintenant, je veux que cette section Héros joue le rôle de séparateur entre le haut du site Web et le reste du contenu. Une bonne façon de le faire est de rendre cette section pleine largeur afin qu'elle prenne toute la largeur de la page. Actuellement, il s'agit d'un groupe, c'est ainsi que nous l'avons créé lorsque nous avons créé le filaire, mais nous allons le transformer en une largeur de trame. Vous l'avez deviné, mise en page automatique. Cliquons sur ce bouton et réglons son redimensionnement sur « Fill Container » pour qu'il prenne toute la largeur. Maintenant, je veux que l'image soit positionnée à gauche, je vais donc sélectionner et utiliser simplement la flèche gauche pour la déplacer. Je vais également définir sa largeur sur « Remplir le conteneur ». Maintenant, je vais sélectionner cet autre élément, et je vais également définir sa largeur sur « Remplir le conteneur ». De cette façon, ces deux éléments occuperont exactement la moitié de l'espace disponible. Mais il y a aussi un écart entre eux. Je ne le veux pas, donc je vais sélectionner le cadre qui a la mise en page automatique, et je vais définir l'espacement zéro, comme ça. Maintenant aussi, je vais changer la hauteur de cette image à 960 pixels. Parce que j'utilise l'image comme arrière-plan sur cette forme, dès que je redimensionne la forme, l'arrière-plan de l'image se repositionne automatiquement pour remplir la forme entière. Génial. Voyons maintenant cette section ici. Avant de passer à autre chose, renommons cela en Hero. Renommons cela en Image, et renommons cela en contenu de héros. Lorsque le deuxième cadre est sélectionné, définissons sa hauteur sur «  Conteneur de remplissage » et ajoutons-y également la mise en page automatique car je veux centrer ce contenu. Je veux également ajouter un peu de rembourrage, alors faisons-le. Mise en page automatique, assurez-vous qu'elle est verticale. Je vais modifier l'espacement entre les éléments à 64 pixels, puis je vais changer son alignement au centre, centre, comme ça. De plus, je vais ajouter 128 pixels de rembourrage à gauche et à droite. Ensuite, je vais sélectionner ce texte et je vais définir son redimensionnement sur « Hug Content ». En fait, verticalement, il devrait s'agir de « Hug Content », mais horizontalement, il devrait s'agir de « Conteneur de remplissage ». Il ne va que ou il ne remplit que l'espace disponible. Maintenant, vous vous demandez peut-être pourquoi ne se redimensionne-t-il pas pour remplir toute cette boîte ? Eh bien, c'est parce que nous avons ajouté ce rembourrage, 128. Vous verrez que si, par exemple, nous supprimons le rembourrage, le texte remplira tout l'espace disponible mais nous voulons réellement utiliser ce rembourrage. La dernière chose à faire ici est de centrer l'alignement du texte. Maintenant, sélectionnons également le cadre de contenu Hero et remplissons notre couleur noire. Ensuite, nous pouvons sélectionner l'intégralité de notre texte et détacher le style de couleur et utiliser notre propre couleur. Je vais aussi rendre ce cadre un peu transparent, 95 %, juste pour que le blanc ne soit pas trop dur. J'abaisse un peu l'opacité pour qu' elle se fond un peu avec l'arrière-plan. Enfin, nous avons encore les heures d'ouverture à prendre en charge. Utilisons la couleur « Accent » pour cela, et il y a en fait quelques changements que nous devons apporter ici. Tout d'abord, je ne pense pas vraiment que nous ayons besoin d'utiliser les mots heures de bureau, car il est assez explicite qu'il s'agit d'un calendrier, puis je vais séparer ces deux éléments. Tout d'abord, placez-les sur différentes lignes, et deuxièmement, je vais sélectionner cet élément ou ce morceau de texte et le couper à partir de là. Je vais définir une «  largeur automatique » sur ce point. Je vais l' aligner au milieu, puis je vais le dupliquer, commander D. Ensuite, je vais coller les textes que j'ai coupés plus tôt. Maintenant, je vais sélectionner les deux, décaler A, pour créer une autre image avec eux, et je vais définir la distance entre eux ou espacement entre eux à 16 pixels, et je vais m'assurer ils sont alignés au milieu. Maintenant, le texte ici est un peu trop petit par rapport au gros titre ci-dessus. Actuellement, j'utilise 21 pixels mais je veux quelque chose d'un peu plus grand que ça. Revenons aux actifs. Voyons voir, la prochaine taille disponible fonction de notre échelle de type est 28 tailles de police, 40 lignes de hauteur. Faisons ça. Sélectionnez les deux, 28 et 40 et enfin, sélectionnons la première ligne de chaque zone de texte et nous allons la rendre « Gras ». Même chose pour cela, « audacieux », et ça devrait être tout. C'est notre zone Héros. Maintenant, bien sûr, si je vais redimensionner mon écran, voyez comment l'image se redimensionne également et le texte se redimensionne tout en étant toujours aligné au centre dans cette boîte noire ? Pour ainsi dire. C'est la puissance des options de mise en page automatique et de redimensionnement de Figma. C'est plutôt cool. C'est ce que nous avons jusqu'ici et je l'ai fait exprès. J'ai conservé les filaires d'origine et j'ai nommé les étapes. Vous pouvez voir la différence entre le filaire d'origine et la première fois que nous avons ajouté notre typographie à laquelle nous avons ajouté certaines couleurs au design final. C'est là que nous avons commencé, et c'est là que nous en sommes actuellement. Voyez quelle différence vous pouvez faire dans un dessin simplement en appliquant la typographie appropriée, certaines couleurs, ainsi qu'un espacement et un dimensionnement bien pensés pour les éléments ? Pour nous assurer que tout est toujours correctement aligné, nous pouvons faire apparaître les guides et vérifier si nos éléments sont correctement alignés et ils le sont. Comme vous pouvez le constater, puisque nous avons utilisé un remplissage de 128 pixels dans le cadre parent du héros, ce texte est positionné exactement à 128 pixels du bord, qui est exactement ce que nous voulons. Comme d'habitude, c'est maintenant à vous de vous entraîner et de créer la section Héros. Vous pouvez le faire à votre manière, vous n'avez pas à reproduire exactement ce que je fais. Si vous n'aimez pas les couleurs ou les polices que j'ai choisies, allez-y et modifiez-les. Utilisez une mise en page différente, n'ayez pas peur d'expérimenter. Dans ce cours, je vous montre ma façon de faire, mais évidemment, ce n'est pas le seul moyen et j'aimerais voir quelques variations de mon design original. Cela dit, il est également très bien de reproduire mes pas exactement parce que vous apprenez, vous vous habituez à utiliser Figma pour votre design et c'est également une énorme victoire. Cela dit, passons à la section Description du menu. Ça arrive. 16. Description de menu de nourriture: La section Description du menu a pour rôle de décrire le menu en quelques mots. Pour obtenir le look que nous voulons, nous allons utiliser quelques cadres imbriqués avec mise en page automatique. Laissez-moi vous montrer. C'est la section que nous allons aborder dans cette leçon fonction du filaire, nous avons un titre, la description elle-même et une image. Cette option est facultative. Comme je le disais précédemment, le filaire est là pour servir de guide, et notre conception finale n'a pas nécessairement besoin d'utiliser la même disposition. Dans cette optique, regardant les éléments que nous avons conçus jusqu'ici et les choses qui nous attendent, la section menu, je ne pense pas vraiment que nous ayons besoin de cette image ici. Au lieu de cela, je vais simplement rester simple et utiliser simplement le titre et le texte. Mais comme ce texte n'est pas très long, et que nous avons tout cet espace libre ici, nous allons placer ces deux éléments côte à côte, donc le titre à gauche, le texte à droite. Dans cette optique, sélectionnons le groupe contenant et appelons-le Description du menu alimentaire. Parce qu'il s'agit d'un groupe, transformez-le en cadre en ajoutant une mise en page automatique. Passons la direction à l'horizontale. En fait, dissocions ces deux groupes et définissons la largeur fixe pour remplir le conteneur sur ces deux éléments. Nous allons également utiliser le conteneur de remplissage sur l'élément parent. De cette façon, ces deux éléments occupent exactement la moitié de l' espace disponible. C'est plutôt bien. Maintenant, j' aimerais également que ce guide serve de limite aux textes. Fondamentalement, ce texte doit commencer ici, et ce texte doit se terminer ici. C'est très simple de le faire. Nous allons sélectionner le cadre parent et nous ajouterons un peu de rembourrage. Nous dirons 128 et 128. J'aime beaucoup le fait que ce texte commence exactement sur la même ligne qui divise cette zone de héros. Mais ce que je n'aime pas, c'est que ce texte soit trop proche ou que le titre soit trop proche de mon texte principal. Pour résoudre ce problème, je veux ajouter un peu de rembourrage à droite de ce texte. Évidemment, je ne peux pas le faire par défaut, j'ai besoin d'ajouter la mise en page automatique. Faisons cela avec le titre sélectionné, Maj A, pour le placer dans un cadre doté d'une mise en page automatique Par défaut, Figma ajoute 10 pixels d' espacement et de remplissage, mais je veux le supprimer. Au lieu de cela, il suffit d'ajouter 128 pixels de rembourrage sur le côté droit. Cela a créé un comportement inattendu où cet élément a poussé le texte sur le côté. Je ne le veux pas parce que je veux ce texte soit aligné sur cette ligne médiane ici. Cela se produit parce que lorsque nous avons ajouté ce cadre, il a automatiquement changé son mode de redimensionnement en contenu Hub, mais nous ne voulons pas cela, nous voulons remplir le conteneur. De plus, nous devons sélectionner le texte à l'intérieur et sélectionner le conteneur de remplissage à partir d'ici. Nous avons maintenant le cadre parent qui a un remplissage de 128 pixels, puis le texte, qui est configuré pour remplir le conteneur, et il remplit son conteneur jusqu'à cette marque de 128 pixels, car nous avons ce remplissage. En utilisant des cadres de mise en page automatique imbriqués, nous avons réussi à obtenir l' aspect souhaité. De plus, j'aimerais apporter quelques modifications à ce texte car actuellement, nous avons trop de lignes vides, et la couleur est également un peu désactivée. Il utilise, bien sûr, notre couleur noire, mais je veux quelque chose d'un peu plus sourd. Pour la plupart des paragraphes de notre conception, nous allons utiliser une opacité noire de 75 %. Comme je vous l'ai montré dans une leçon précédente, vous pouvez le faire de deux manières. Vous pouvez soit modifier l'opacité du calque à 75 %, soit modifier l' opacité de la couleur. Allons-y et faisons-le. Je le fais pour vous montrer dans les deux sens, vous pouvez choisir ce qui vous convient le mieux. La première chose que nous devons faire est que nous utilisons un style de couleur, nous devons nous détacher, puis modifier l'opacité des couleurs, puis créer un nouveau style de couleur, tout comme nous avons créé le noir 15. Maintenant, nous allons créer Black 75. Maintenant, nous avons le style de couleur noir 75 disponible si nous voulons l'utiliser ailleurs. De plus, rendons cela un peu plus intéressant en ajoutant un peu de rembourrage juste comme nous l'avons fait pour ce texte, car j'ai le sentiment que ce texte pourrait être un peu trop long pour cette section. Lorsque le texte est sélectionné, Maj A, pour ajouter une mise en page automatique, supprimer l' espacement et le remplissage par défaut, ajouter le remplissage de 128 pixels à droite et vérifier que le cadre parent est défini le conteneur de remplissage et le texte à l'intérieur sont configurés pour remplir le conteneur. Maintenant, le texte s'aligne toujours sur ligne médiane que nous avons créée dans le héros, mais il y a aussi une belle séparation ici sur le côté droit. Enfin, pour rendre cela encore plus beau, changeons la couleur de ce titre du noir à l'accent. Je pense que tout lie très bien. Ensuite, il y aura notre menu. Mais en fait, pour ajouter un autre degré de séparation entre ces deux sections, allons de l'avant et ajouter ce que l'on appelle dans CSS, une règle horizontale, est essentiellement une ligne de séparation. Je vais saisir l'outil de ligne ou appuyer sur L sur le clavier et simplement cliquer et faire glisser une ligne. Peu importe la taille, car nous pouvons le régler pour remplir le conteneur comme ça. Quant à la couleur du trait, je peux choisir le noir 15. Il partage exactement le même style la ligne que nous avons créée ici dans la barre supérieure. Maintenant, nous avons créé la description du menu alimentaire. Si nous saisissons l'écran et commençons simplement à le redimensionner, vous verrez que les sections de texte se redimensionnent en conséquence, ce qui est génial. Il est maintenant temps de s'entraîner. Allez-y et créez la description du menu si vous ne l' avez pas déjà fait. Par curiosité, avez-vous eu des problèmes jusqu'ici ? Toutes les techniques que vous n'avez pas comprises, rappelez-vous peut-être, vous avez toujours la possibilité de me laisser un message dans la zone de discussion, et je vous aiderai de toutes les manières possibles. aller de l'avant, nous arrivons à l'une des sections les plus complexes de notre design, le menu des aliments. Allons de l'avant et abordons cette question ensuite. 17. Menu alimentaire pour les steaks: Comme je le disais précédemment, la section menu alimentaire est l'une des parties les plus complexes de notre design. Pas techniquement complexe, mais en termes de contenu, car il s'agit la plus grande section de la page, et c'est pourquoi nous la divisons en trois parties. Dans cette première partie, nous abordons le menu des steaks. Allons-y. revenant maintenant à notre conception dans Figma, nous pouvons voir que, selon le filaire, la section du menu devrait avoir un titre. Ensuite, nous avons les catégories de menus, steaks, hamburgers, sandwichs, quickies et salades, présentés sous forme de table. Lorsque nous cliquons sur l'un de ces tableaux, nous révélons le contenu d'un onglet en tant que plats réels. Maintenant, même si j'ai utilisé des onglets dans le filaire, je ne vais pas les utiliser dans la conception finale. Quelques raisons à cela. À mon avis, l'utilisation d' onglets est très pratique lorsque vous avez un contenu de taille similaire. Dans notre cas, si nous examinons le dossier du projet, nous pouvons constater que la taille du menu est très différente d'une catégorie à l'autre. Nous avons 1, 2, 3, 4, 5 objets en pieux. Nous avons 1, 2, 3, 4, 5, 6, 7, 8 en hamburgers et sandwichs. Nous n'en avons que trois dans les rapides, et nous en avons quatre en salades. Je pense que l'affichage de ces informations dans un contrôle à onglets aura l'air un peu bizarre. De plus, il s'agit d' un site Web d'une page et je veux que les choses soient super simples et fluides. Je ne veux pas introduire un modèle complexe comme un contrôle de tabulation. Au lieu de cela, je vais simplement afficher tout le menu en même temps. Nous allons avoir une catégorie et nous allons énumérer tous les plats de cette catégorie, puis sous cette catégorie, la catégorie suivante, etc. Commençons ensuite par prendre soin du menu des enjeux. La première chose que je vais faire est de sélectionner ce groupe, et je vais déplacer A pour le changer en cadre avec mise en page automatique, et je vais changer la direction à la verticale, et je vais définir la largeur ou les options de redimensionnement pour remplir le conteneur. Je vais également définir un espacement entre les éléments de 128 pixels. Ensuite, déplacons quelques éléments autour. Nous avons le menu, et le premier que nous allons faire est des steaks. En fait, je vais supprimer le reste des sections et supprimer une partie de ce contenu car nous n'utilisons pas le contrôle de tabulation à la fin. Je vais recréer la plupart de ces éléments comme bon me semble. Je vais commencer par ajouter la typographie correcte au titre de la catégorie. Enjeux, revenons aux actifs. Je vais utiliser cette taille ici, 37 taille de police 48 hauteur de ligne. Ici, 37 et 48 ans. Je vais définir le poids de police pour bloquer et aussi moins trois pixels sur l'espacement des lettres. De plus, dans le filaire d'origine, j'ai choisi d'afficher une image pour chaque plat. Maintenant, je ne pense pas que je vais suivre cette voie pour le design final parce que nous allons avoir trop d'images. Ici, c'était logique parce que nous ne présentions que des plats d'une catégorie spécifique à la fois. C'était bien d'avoir 2, 3, 4, 5 photos de plats de cette catégorie. Mais dans la conception finale, parce que nous montrons tous les plats, je pense que c'est trop encombrant la page Web. Au lieu de cela, je vais afficher une image par catégorie de plat. Une image pour les steaks, une image représentative, une image pour les hamburgers et les sandwichs, une pour les salades, une pour les rapides. En fait, je vais déplacer cette image vers le haut ou au-dessus du titre. Voyons voir. Est-ce que nous avons cela dans un groupe ? Nous le faisons. Faisons en fait sortir ça comme ça. Parlons maintenant de la mise en page. Bien que j'ai sélectionné cette image, ajoutons cette image. Je vais aller dans Remplir, je vais passer du solide à l'image, puis choisir Image. Je suis allé de l'avant et j'ai téléchargé toutes les images que vous trouverez dans le fichier PDF des ressources. Voyons voir. Je vais utiliser une belle image, celle-ci, par exemple, c'est une belle image d'un steak. Utilisons cela, et pour l'instant, nous sommes prêts à y aller. De toute évidence, nous pouvons redimensionner cette image comme bon nous semble. Mais maintenant, parlons de mise en page, car il serait très facile ajouter un peu de rembourrage à cette section afin que le contenu soit bien aligné sur ces guides que j' ai configurés ici. Mais parfois, c'est une bonne idée de casser un peu la mise en page et de faire quelque chose d'inattendu. Si nous faisons défiler la page vers le bas, nous pouvons voir comment les choses sont alignées selon ces guides. Ici, ils sont également alignés. Mais pour le rendre plus intéressant, comme je l'ai dit de temps en temps, il suffit de casser un peu la mise en page et de faire quelque chose d'inattendu. C'est ce que nous allons faire ici. Nous allons en fait pousser ce contenu vers la droite d'un montant raisonnable. Le menu sera aligné sur le côté droit de la page. Ensuite, pour ce faire, faisons d'abord un peu de nettoyage. Nous allons appeler ce menu alimentaire. C'est comme la section principale, puis je vais sélectionner ces éléments dans le décalage A pour la mise en page automatique, et je vais définir qu'il est redimensionné pour remplir le conteneur afin qu'il se redimensionne sur toute la largeur de ses parents. Poussons maintenant le contenu vers la droite en ajoutant un peu de rembourrage à gauche sur ce cadre, que nous allons appeler des enjeux. Pour cela, je vais aller ici et je vais ajouter un peu de rembourrage et 260 ou 240, c'est un peu trop petit. Allons-y avec 560 pixels. Ça devrait être, je pense plutôt bien. Je peux également faire glisser un guide vers 560 juste pour m'assurer que quels que soient les éléments que j'alignerai de la même manière à l'avenir, ils seront correctement alignés sur le même guide. Maintenant, prenons cette image, faisons-la remplir le conteneur, donc elle passe le reste de l'espace restant. Définissons sa largeur à 640 pixels. Encore une fois, j'utilise le système à huit points pour dimensionner des éléments. Ensuite, nous avons le titre. Ensuite, nous commencerons à afficher les plats réels. Mais avant cela, je veux ajouter une petite chose à ce titre ici, juste pour le faire ressembler davantage à un séparateur. Pour cela, tout comme une touche décorative, je vais dessiner un rectangle, et je vais le faire 128 pixels sur 4. Pour le remplissage, je vais utiliser du noir. Maintenant, je vais prendre cela et le menu des enjeux décaler A pour créer un autre cadre avec mise en page automatique, définir sa direction sur horizontale. Assurez-vous que les éléments sont alignés au centre et définissez l' espacement entre les éléments sur 32. Juste comme ça. Voyons maintenant les produits alimentaires. Tout d'abord, voyons le titre. Cela utilise les styles typographiques corrects car je les ai déjà définis, mais je ne suis pas vraiment sûr de ce texte. Au lieu d'être régulier, pourquoi ne pas le rendre italique. Passons également au noir, 75 pour la couleur. Ceci, le prix, voyons audacieux et passons sa couleur à l' accent au lieu du noir. Maintenant, prenons ceci, transformons-le en cadre avec mise en page automatique, et réglons son espacement entre les éléments à 32 pixels, exactement comme cela. C'est bien. Commençons maintenant à peupler. Appelons ce plat. Commençons par remplir le contenu réel des enjeux. ce que nous avons. [BRUIT] Nous avons le contenu, et nous avons également le prix 29. Super. Maintenant, je vais également modifier les options de redimensionnement pour le titre et le contenu du plat à remplir, et je vais également configurer le plat comme contenant de remplissage. Il occupe tout l'espace disponible. Je le fais parce que je vais éventuellement utiliser deux colonnes dans cette section. Chacune de ces colonnes occupera exactement la moitié de l'espace disponible. Mais pour l'instant, tout semble en ordre ici. Nous allons en fait dupliquer le plat. Voyons exactement combien de plats nous avons pour les steaks, donc 1, 2, 3, 4, 5, donc nous avons besoin de quatre autres. Dupliquer 2, 3, 4 et 5. Maintenant, il s'agit simplement d' utiliser le bon contenu, comme cela. Maintenant, évidemment parce que nous avons beaucoup d'espace pour travailler ici, séparons ce contenu en deux colonnes. La première colonne comportera trois éléments, la deuxième colonne comportera deux éléments. Voici comment nous allons faire cela. Nous avons le parent des steaks, qui contient les plats, mais aussi le titre, l'image ici et le titre du menu. Séparons les plats et mettons-les dans leur propre cadre. On va appeler ça des plats. Encore une fois, nous avons appliqué la mise en page automatique ici. Mais au lieu de 128 pixels d'espacement, je vais utiliser 64, donc la moitié. Maintenant, pour les séparer en deux colonnes, c'est très simple. Nous allons sélectionner les trois premiers. Nous allons faire Maj A. Nous allons les appeler colonne 1 et les deux autres, Maj A colonne 2. Maintenant, je vais prendre la vaisselle parent, et je vais changer la direction à l'horizontale, et je vais m'assurer que sa taille est réglée pour remplir les conteneurs, donc ça ne va que jusqu'ici. Ensuite, je vais également sélectionner les colonnes 1 et 2 et définir leur redimensionnement pour remplir le conteneur. Cela va leur permettre de prendre exactement la moitié de l'espace disponible. Agrandissons un peu cet espace entre ces colonnes. Actuellement, c'est 64 pixels, mais je peux choisir la vaisselle, et je peux l'augmenter à 128, puis, enfin, je peux sélectionner chaque plat et le changer pour remplir le récipient, et faire de même pour ces derniers. Notez cependant que le texte ici va au-delà de mes guides. Je ne veux pas ça. Je veux que tout soit bien contenu dans ce guide et ce guide. Le texte ici devrait se terminer dans ce guide. C'est vraiment facile à faire car nous travaillons avec la mise en page automatique. Nous avons le cadre parent de la vaisselle et je peux simplement ajouter un rembourrage droit de 128 pixels. Cela ajoutera le rembourrage dans cette zone juste ici. Ensuite, les deux colonnes occuperont le reste de l'espace et elles auront des largeurs égales. C'est plutôt cool. Découvrez à quel point la mise en page automatique est puissante. Il vous permet de créer facilement des mises en page relativement complexes. La dernière chose que je voulais faire ici est ajouter des lignes de séparation entre chaque plat. Pour ce faire, je vais cibler les colonnes, et je vais utiliser l'outil de ligne ou L sur le clavier et simplement dessiner une ligne comme celle-ci. Je vais régler le redimensionnement pour remplir le conteneur. Le coup va être noir. Peut-être juste noir, pas noir 75. Mais je veux le faire pointiller, tout comme vous pouvez voir cette ligne bleue pointillée ici. Je pense que pointillé serait beaucoup mieux. Ensuite, nous allons ouvrir les paramètres avancés de trait, et je vais sélectionner le tiret 2, 2, puis cette chose pour l'écart de tiret, voyons à quoi cela ressemble. C'est plutôt bien. Mais je pense que je pourrais opter pour une couleur plus discrète. Je vais garder le noir, mais je vais réduire l'opacité du calque à 50 %. Je pense que ça a l'air plutôt bien. Maintenant, il suffit de dupliquer cette dernière fois et de déplacer sous le deuxième élément pour séparer le deuxième et le troisième élément. Ensuite, copions cela une fois et passons à la colonne 2, collez cela dans, déplacez-le vers le haut afin qu'il sépare le premier et le deuxième élément de la deuxième colonne. Avec cela, nous venons de terminer la section menu des steaks. Comme vous l'avez vu, nous avons adopté une approche différente. Nous avons rompu la mise en page en déplaçant tout ce contenu vers la droite de la page, et nous avons également fait quelque chose de complètement différent de ce que nous avions initialement esquissé dans notre cadre filaire. Au lieu d'utiliser des onglets, nous avons décidé d'afficher l' intégralité du contenu du menu en même temps. C'est pourquoi nous avons décidé d'organiser et présenter chaque plat dans sa propre catégorie. De plus, au lieu d'afficher une image pour chaque plat, nous affichons une image représentative pour chaque catégorie. Voilà les résultats obtenus jusqu'à présent. Comme vous êtes habitué, c'est le moment pour vous de vous entraîner. Allez-y et créez la section du steak dans le menu des plats. Une fois que vous avez fait cela, nous pourrons passer à autre chose. Maintenant, je me rends compte que j'ai beaucoup utilisé la mise en page automatique dans cette leçon, et je l'utilise pour créer des mises en page qui pourraient être un peu plus difficiles à comprendre pour vous, surtout si vous êtes un débutant à Figma. Mais reregardez la leçon si vous ne l'avez pas compris. Si vous ne comprenez toujours pas ce que j'ai fait là-bas, envoyez-moi un message dans la zone de discussion, et je ferai de mon mieux pour vous aider. Maintenant, en créant le menu des steaks, nous avons réalisé la plupart du travail pour les autres sous-sections du menu alimentaire, car il ne nous reste plus qu'à copier les éléments de steaks et à remplacer le contenu. C'est vraiment simple. Prochaine étape, prenons soin des hamburgers et des sandwichs. J'arrive. 18. Menu alimentaire pour les hamburgers et les sandwhiches: Pour les autres sections du menu, nous pouvons simplement copier le menu pour les steaks et modifier le contenu. Il ne sert à recréer ces sections encore et encore. Allons-y et faisons cela, je vais également vous montrer la solution que j'ai choisie pour la navigation dans les menus alimentaires. Allons-y. Tout d'abord, copions et collons le menu des steaks, alors dupliquons cela, et comme il se trouve toujours dans le menu des aliments, il va juste être collé plus bas. Il va être bien aligné. Tout est fait automatiquement pour moi. Remarquez que lorsque je travaille sur cette page et que je crée des éléments, que j' ajoute et duplique des trucs, la page, mon cadre principal se redimensionne et tous les éléments sont poussés vers le bas en conséquence tout en maintenant, bien sûr, la même distance ou espacement de 240 pixels. C'est parce que, si vous vous souvenez, nous avons ajouté mise en page automatique à notre cadre principal. Tout est fait automatiquement pour nous. Maintenant, pour cette section, appelons ça Burgers et Sandwiches. Tout d'abord, supprimons ce titre de menu. Changeons l'image, choisissons celle-ci. Super. Changeons le nom et, pour cela, ouvrons le dossier de projet. Nous avons des hamburgers et des sandwichs. Génial. Maintenant, mettons à jour le contenu ici. Voyons voir, nous avons, je crois, huit, donc 1, 2, 3, 4, 1, 2, 3, 4, donc nous avons huit éléments, quatre sur chaque colonne. Allons de l'avant et dupliquons ce plat, dupliquons également l'un des séparateurs et mettons-le entre les deux, puis dupliquons cela une et deux fois, puis placons simplement les séparateurs dans le bon lieux. Maintenant, il s'agit simplement d'un copier-coller de notre dossier de projet vers notre conception. Allons de l'avant et accélérons ce processus. Nous avons fini de copier-coller, le contenu de notre dossier de projet dans notre conception finie. Maintenant, dans l'introduction de cette leçon, j'ai mentionné quelque chose au sujet d'une navigation dans un menu alimentaire. Je pense que c'est une caractéristique assez importante à ajouter car il s'agit d'une section assez grande, le menu. Il serait utile d'avoir une certaine navigation qui nous permettrait cliquer et de faire défiler automatiquement certaines catégories comme les steaks, hamburgers et les sandwichs et les autres que nous partons. à ajouter. Puisque nous avons tous ces espaces blancs sur le côté gauche, utilisons-le pour un menu qui va défiler au fur et à mesure que la page défilera, ce qui va être un menu fixe. Pour ce design, je pense que la section hamburgers et sandwichs sera un bon endroit pour le loger. Ensuite, nous allons faire quelques changements ici. Nous allons envelopper ce cadre dans un autre cadre avec mise en page automatique. « Shift » « A » encore une fois, et ce sera des hamburgers et des sandwichs. Renommons cela en hamburgers et sandwichs. Supprimons l'espacement et le rembourrage que nous avons ajoutés ici. Pour celui-ci, nous allons en fait supprimer le rembourrage que nous avons ajouté à gauche car nous allons ajouter une autre section. Commençons par ajouter du texte à l'intérieur de ce cadre, et nous commencerons par les steaks. Coupons cela et ajoutons exactement dans le cadre parent. Juste comme ça. Ensuite, nous allons envelopper cela dans un autre cadre avec la mise en page automatique, que nous allons maintenant appeler menu alimentaire pour la navigation. Voici ce que nous allons faire, des hamburgers et des sandwichs. Cette section sera bien sûr orientée horizontalement. Définissons un espacement de 128 entre les éléments. Ensuite, sélectionnons la section principale, et tout ce que nous allons faire est de définir le redimensionnement sur Remplir le conteneur. Ensuite, sélectionnons à nouveau le cadre principal et rechoisissons Remplir le conteneur dans le menu déroulant au lieu d'une largeur fixe. C'est quelque chose que vous devrez faire de temps en temps. Lorsque vous êtes dans un reconditionnement, recadrez d'autres cadres, avec une mise en page automatique, Figma passe automatiquement du conteneur de remplissage à largeur fixe. Il suffit donc de garder un œil là-dessus pour vous assurer que vous ne brisez pas vos dispositions. Maintenant aussi, j'aimerais que cette navigation commence à partir d'ici. de ce guide, qui est à 128. Nous allons sélectionner le menu des aliments. Pour l'instant, définissons l'espacement sur zéro, remplissage sur zéro, et ajoutons un rembourrage gauche de 128. C'est très bien. Ensuite, je vais également redimensionner la section du menu des aliments pour que ma section principale s'aligne correctement sur les autres. Dans ce cas, ma navigation est maintenant de 432 pixels, et c'est une largeur fixe. Maintenant, je peux sélectionner le texte et le définir sur Remplir le conteneur, et je peux dupliquer ce texte trois fois de plus. Pendant que j'y suis, veillons à ce que ma direction soit placée à la verticale. C'est encore une autre chose à surveiller. Parfois, lorsque vous changez de direction dans un cadre de mise en page automatique, le redimensionnement passe du contenu Fixe au contenu Hug, auquel cas vous devrez réinitialiser cette valeur. Réglons également la hauteur sur le contenu Hug. Sélectionnons également tout ce texte et définissons la hauteur sur le contenu Hug et la largeur sur Remplir le conteneur. Maintenant, nous devrions être bons à partir. Remplacons le texte ici par les noms réels des sections. Donc, des hamburgers et des sandwichs, nous avons eu des rapides et des salades. L'idée ici est que ce menu sera corrigé. Une fois que je suis arrivé au menu réel, alors que je fais défiler vers le bas, ce menu restera au même endroit. C'est vraiment facile à faire en CSS, mais parce que nous avons affaire à la partie design, nous allons maintenant la placer ici, attachée à cette deuxième section. Maintenant, rendons ça un peu plus joli. Supposons que nous naviguons vers cette section, vers des hamburgers et des sandwichs, et que nous avons besoin d'un moyen de faire en sorte que le menu mette en évidence cette section spécifique dans laquelle nous nous trouvons. Pour cela, c'est vraiment facile à faire, nous pouvons simplement changer la couleur de cette section en accentuant. Ensuite, le reste, on va juste les mettre en noir. Faisons également un peu plus aéré, pour ainsi dire, en ajoutant peu d'espacement entre tous ces éléments. Ajoutons également comme une ligne à cet article, afin qu'il corresponde à la ligne que nous avons ajoutée ici. En fait, j'ai réalisé que j'avais utilisé la mauvaise méthode pour créer cela. Ou en fait, ce n'est pas mal, c'est une façon de le faire avec un rectangle, mais vous pouvez également le faire avec une ligne. Je vais vous montrer les deux côtés maintenant. Mais avant de le faire, permettez-moi de définir des coins arrondis sur cet élément. Il ne s'agit pas seulement d'une barre unie, elle présente de jolis coins arrondis, juste un détail mineur. Faisons la même chose ici, huit pixels. Faisons à peu près la même chose ici. Mais je vais utiliser un élément linéaire à la place, juste pour vous montrer une autre option de le faire. À l'aide de l'outil L, ou ligne, je vais simplement dessiner une ligne de 48 pixels de largeur. Je vais régler l'épaisseur de son trait à quatre. À partir de là, je vais choisir Round. Il commence rond et se termine rond. De plus, je vais changer la couleur en accentuant. Maintenant, nous pouvons prendre la ligne et ce texte, Maj A pour créer un nouveau cadre, changer de direction, définir le redimensionnement sur Conteneur de remplissage. Déplacons également la ligne pour l'afficher en premier. Alignons tout au milieu, comme ça. Modifions la distance entre cette distance à 16 pixels. Deux problèmes avec cette mise en page. Tout d'abord, le texte est un peu trop gros. Il va au-delà des bords de mon cadre parent ici. Deuxièmement, même si sur papier cette ligne est correctement alignée sur le texte, ce n'est pas le cas visuellement. Cela se produit en raison de la hauteur du texte. Nous avons beaucoup plus d'espace ici en haut qu'en bas. Le texte n'est pas parfaitement aligné visuellement à l'intérieur de sa ligne. C'est pourquoi nous avons également ce désalignement. Mais c'est vraiment facile à résoudre. Il suffit de pousser cet élément vers le bas de quelques pixels. Normalement, cela serait assez facile à faire. Mais comme nous travaillons avec la mise en page automatique et que nous alignons automatiquement les éléments, la seule façon de déplacer cet élément vers le bas consiste à y ajouter du rembourrage. La seule façon d'y parvenir consiste à appliquer la mise en page automatique. Maj A, pour créer un cadre avec cet élément, réinitialisez l'espacement et le rembourrage, puis ajoutez simplement un rembourrage supérieur de quatre pixels. Cela va juste le pousser légèrement vers le bas pour qu'il soit maintenant visuellement aligné sur le texte. Maintenant, que faisons-nous face à cette situation où le texte déborde notre navigation dans le menu alimentaire ? Parce que rappelez-vous, nous avons décidé d'ajouter un espacement de 128 pixels pour être cohérent avec l'autre espacement. Nous pourrions le rendre plus petit , mais je n'en veux pas. Je veux cet espace exact. Voyons voir. Dans ce cadre, nous avons le texte et la ligne. Le texte est actuellement défini sur Largeur fixe. Mais réglons-le sur Remplir le conteneur. Cela va automatiquement redimensionner le texte, sorte qu'il s'insère dans les limites de son cadre parent. Mais maintenant, le texte est affiché sur deux lignes, ce qui est très bien. Mais maintenant, la ligne ne correspond plus. Ce que nous allons faire, c'est sélectionner cette option, et au lieu de nous aligner sur le milieu, nous allons l'aligner sur le haut. Ensuite, nous sélectionnerons le cadre de ligne réel et modifierons son rembourrage supérieur. Essayons 16. Peut-être un peu plus, 18 ans. Je le fais jusqu'à ce que la ligne s'aligne visuellement avec ces deux mots. Maintenant, nous avons corrigé la navigation. Bien sûr, lorsque ce site Web est en cours de développement, le développeur peut écrire le CSS et le JavaScript nécessaires pour appliquer ce style actif aux autres sections au fur et à mesure que nous les faisons défiler. Par exemple, si j'étais sur le vrai site Web en ce moment, si je faisais défiler vers les steaks, ce menu serait aligné sur cette zone avec des steaks. L' élément de menu mis en surbrillance serait celui-ci, au lieu de celui-ci. J'espère que c'est logique. Mais oui, avec ça, nous avons terminé la deuxième section de notre menu. J'espère que tout se passe bien de votre côté et que vous progressez avec votre version du design ou du projet de classe. Si vous ne travaillez pas à mes côtés et que vous préférez simplement regarder le cours, je suppose que c'est très bien aussi, mais je recommande l'exercice. Je recommande cette pratique. Cela va simplement vous permettre d' améliorer vos compétences et d'apprendre à travailler dans Figma beaucoup plus rapidement qu' appuyant simplement sur la théorie. Nous avons maintenant créé deux sections dans le menu. Il suffit de rincer et de répéter pour créer les deux autres. Nous allons le faire dans la prochaine leçon. 19. Menu alimentaire pour les Quickies et les salades: Nous sommes presque à la ligne d'arrivée avec le menu alimentaire, il suffit de créer les sections pour les rapides et les salades. Faisons ça maintenant. Commençons par dupliquer le cadre de steaks car il a la disposition correcte sans la navigation dans le menu. Il suffit donc de commander D pour dupliquer et je vais juste le déplacer dans la catégorie des hamburgers et des sandwichs. Vous devez adorer AutoLayout. C'est super simple. Ce sera quatre rapides, comme ça. Changeons l' image d'arrière-plan en ailes. En termes de contenu, nous n'avons que trois éléments. Nous allons en avoir deux sur la première colonne. Supprimons ceci et ceci, et ceci, et ceci, donc deux et un. Ensuite, il s'agit simplement de remplacer le contenu. Ce sont les rapides. Maintenant, sélectionnons cette section et nous allons la renommer. allons le dupliquer, et nous allons créer la section pour les salades. Remplacons également l'image ici par celle-ci. Ensuite, à l'intérieur, nous avons quatre éléments, alors dupliquons celui-ci et placons également un de ces séparateurs entre les deux. Maintenant, rinçons et répétons. C'est ça, super simple. Il suffit de copier et de coller la première section que nous avons créée pour les steaks et en changeant simplement une image, un titre et les plats réels, nous avons pu compléter le menu alimentaire avec son navigation. C'est ce que nous avons jusqu'ici. Jetons un coup d'œil à la page jusqu'à présent sur notre conception. Nous avons la barre supérieure, l'en-tête, la zone héros, puis la description du menu alimentaire, puis le menu des aliments. Je pense que cela est un peu plus logique pour ce site Web d'avoir le menu comme ça tout à la fois, au lieu d'utiliser des onglets comme nous l'avons initialement discuté lors de la phase de câblage. Quelle est la prochaine étape ? Eh bien, ensuite, c'est la pratique de votre part. Vous avez vu que nous venons de terminer la plus grande section de la page, qui est le menu des aliments. Même si, au début, cela peut sembler intimidant à cause de tout ce contenu, vous avez finalement vu que c'était super simple à cause de la mise en page automatique. Cela a rendu notre travail beaucoup plus facile. Cela dit, j' espère que vous suivez et que vous avez terminé votre version du menu alimentaire pour votre design. Lorsque vous avez terminé et que vous êtes prêt à passer à autre chose, prenons soin de la section À propos, qui va venir. 20. Section À propos: Très bien, prenons soin de la section À propos. C'est assez simple à faire et il utilisera une mise en page très similaire à la section Héros. Allons-y. Basé sur le filaire, il s'agit de la structure de la page À propos. Nous avons un titre, texte descriptif, puis une ou deux images. Maintenant, en regardant le design à l'aide d'une vue d' ensemble, j'aimerais créer une certaine séparation entre la section menu et le reste du site Web. Cette section « À propos » me donne en fait une excellente occasion de le faire, car je peux utiliser une mise en page très similaire à celle-ci et je pense que cela va très bien atteindre la séparation car nous allons avoir une image qui est l'une des exigences requises pour la section À propos. Mais nous utilisons également ce fond sombre qui servira de séparateur visuel entre les sections en haut et celles du bas. Allez-y et dupliquons la section Héros. À l'aide des touches fléchées, je vais simplement le placer en position sous la section Menu et je vais le renommer en « À propos de nous ». Maintenant, effectuons un zoom avant. Il y a quelques changements que nous devons faire ici. Tout d'abord, l'image, je vais la déplacer du côté droit et je vais la changer par autre chose. Voyons quel genre d' images nous avons ici. Je pense que cela pourrait très bien fonctionner. Utilisons ça. De plus, le contenu ici doit également changer. Je vais utiliser ce texte. Je vais juste coller ça dedans. Utilisons en fait la couleur d'accent. Il y a en fait une petite faute de frappe ici. Avec ça, je peux supprimer ce morceau. Je vais également supprimer ce cadre car je vais prendre ce texte et le coller ici. Utilisons du blanc. Mais aussi, je ne vais pas utiliser de blanc pur. Je vais utiliser une opacité blanche à 95 % comme je l'ai fait ici dans la section Héros. Parce que je ne veux pas que ce contraste soit trop sévère. Allons-y avec 95 %. Pour le texte, nous pouvons en fait utiliser 90 pour cent. Je pense que cela va se fondre encore mieux avec l'arrière-plan. Je pense que nous avons une ligne vide de trop ici, alors nous allons nous en débarrasser. De plus, si j'aborde les guides, nous pouvons voir que nous ne l'alignons pas exactement correctement. Donc, si nous allons au contenu du héros, nous utilisons 128 et 128 rembourrages. C'est exact. Mais je suppose que ces deux-là ont une largeur fixe, alors passons-les pour remplir le conteneur. Maintenant, ils sont bien alignés sur notre guide et nous sommes prêts à y aller. C'est la section « À propos ». Maintenant, nous pouvons simplement supprimer le fractionnement. Nous sommes prêts à passer à autre chose. Bien sûr, c'est le moment de vous entraîner. Alors, créez votre section À propos et lorsque vous faites cela, nous sommes prêts à passer aux photos Instagram. C'est à venir dans la prochaine leçon. 21. Section Instagram: La section Instagram est essentiellement une grande galerie d'images. Cela me donne en fait une excellente occasion de vous montrer comment travailler avec les images et mise en page automatique de manière à permettre à ces images de redimensionner en conséquence lorsque vous modifiez la taille de la galerie. Allons-y. Voyons ce que nous avons basé sur notre filaire. Nous avons le titre, un bouton pour Instagram suivre, puis quelques images. La première chose que nous allons faire ici, c'est que nous allons transformer cela en cadre avec mise en page automatique. Mais en fait, permettez-moi de me débarrasser de cette rangée d'images. Laissez-moi simplement faire un Maj A pour ajouter mise en page automatique à ces trois images futures, puis je ferai un Maj A sur ces deux images. Enfin, dissocions cela. Juste un peu de nettoyage. Appelons cette galerie d'images, mais en fait, transformons-la en un cadre d' abord avec mise en page automatique et appelons-la Instagram, en fait des photos Instagram. Ensuite, ouvrons les guides pour nous assurer que nous alignons correctement tout. Je vais définir sa largeur sur un récipient de remplissage. Ajoutons 128 rembourrages à gauche et à droite. Ensuite, le cadre à 10 et le cadre 11, ils seront tous les deux réglés pour remplir le récipient. Commençons par le texte ici. Définissons la couleur de ces deux accentuations. Sélectionnons ensuite le cadre parent. Au lieu de définir un espacement fixe entre ces deux éléments, continuons et définissons la distribution des éléments sur l'espace entre ces deux éléments. Comme nous n'avons que deux éléments, l' un d'eux sera envoyé à gauche de l'élément, l' autre à droite de l'élément. Aussi, alignons tout ce qui se trouve au milieu. Ensuite, travaillons sur ce bouton car en ce moment, c'est moche, alors d'abord les choses d'abord, le texte Poppins, gras, 21, 32, noir. C'est exact. Le texte est tel qu'il doit être. Mettons à jour cette icône car elle utilise une version légèrement désactivée de l'icône Instagram. Copions ça. Au fait, vous pouvez vous déplacer dans le Canvas comme ceci en maintenant l'espace enfoncé sur votre clavier jusqu'à ce que votre curseur se transforme en main, puis vous pouvez simplement cliquer et faire glisser pour vous déplacer. Alors, collons ça. Débarrassez-vous de cet arrière-plan car nous allons créer notre propre arrière-plan en le transformant en cadre de mise en page automatique. En fait, nous n'allons pas utiliser d'arrière-plan, nous allons utiliser un trait. Nous allons le mettre en noir, un pixel à l'intérieur. Parfait. Ajoutons maintenant un peu de rembourrage. Je pense qu'environ 24 pixels seraient appropriés. Définissons un espacement de 16 pixels entre le texte et l'icône. Alignons les deux au milieu comme ça. C'est notre bouton, super simple. Voyons ensuite les images. Mais en fait, augmentons l'espace entre le titre et les images réelles. instant, c'est un nombre aléatoire. Nous devons définir cela à 128, exactement comme cela en définissant l'espacement sur le cadre parent, donc sur les images. Les trois seront utilisés comme arrière-plans pour ces rectangles. Je pense que c'est la bonne façon de les utiliser pour quelque chose comme ça dans Figma car au fur et à mesure que la forme se redimensionne, l'arrière-plan se repositionne et se redimensionne. Vous verrez toujours une partie de l'image. Avec le cadre parent sélectionné, j'ai fait une erreur ici. Les images vont en fait d'un bord à l'autre, elles n'auront pas ce rembourrage de 128 pixels comme le texte. Mais j'ai effectivement appliqué ce rembourrage ici sur les éléments parents. Enlevons ça. Au lieu de cela, nous allons l'ajouter à cette image supérieure ici, 128, 128. Cela me permet de configurer le conteneur d'images pour qu'il aille d'un bord à l'autre à l'aide du conteneur de remplissage. Ensuite, chaque image individuelle sera configurée pour remplir le conteneur. Permettez-moi également de supprimer l'espacement ici. En fait, réglons ça sur 0 et réglons ça sur emballé. Comme ça. Maintenant, les images, configurons-les pour remplir les conteneurs afin qu'elles occupent chacun exactement un tiers de l'espace disponible. Maintenant, vous ne pouvez probablement pas le voir très bien parce qu'ils sont tous gris. Ajoutons-y quelques images. Changeons la couleur de remplissage du solide à l'image. Voyons quels types d'images nous allons utiliser ici. Peut-être celui-là. L'important ici, c' est que vous définissiez les images à remplir ici. Ne convient pas aux cultures ou aux carreaux, assurez-vous qu'ils sont réglés pour être remplis. Finalement, faisons la troisième image. Ajoutons celui-ci. Maintenant, passons également leur hauteur à 480 pixels, exactement comme ça. C'est notre première rangée d'images. Nous allons le dupliquer, rangée 2. Décalons ces images dans un nouveau cadre appelé images. Ici, nous allons simplement supprimer l'espacement. Maintenant, changeons simplement les images. Utilisez-le et ici, où nous allons peut-être utiliser celui-là. Ici, d'ailleurs, vous pouvez également double-cliquer. Il s'agit d'un raccourci, vous pouvez donc double-cliquer sur une image pour ouvrir cette fenêtre de dialogue. Pourquoi pas celui-là ? En utilisant ces images comme arrière-plans, nous pouvons maintenant prendre cette page et regarder ce qui se passe. Oups. Ce n'était pas aussi dramatique que je le pensais. Changeons cela pour remplir le conteneur. Remplir le récipient. Maintenant, nous devrions être bons. Maintenant, modifiez également les lignes pour remplir le conteneur. Tout cela doit être réglé pour remplir le récipient. Comme je le disais, maintenant si vous saisissez l'écran et que vous commencez à le redimensionner, vous verrez que ces images vont également redimensionner. Bien sûr, ils auront la même hauteur car c'est comme ça qu'ils sont fixés en hauteur fixe. Mais en termes de largeur, de formes réelles, les rectangles changent de largeur. Les images parce qu'elles sont définies comme arrière-plans, eh bien, nous ne pouvons en voir que certaines parties, ce qui est exactement le comportement que vous obtiendriez, ou vous pouvez obtenir sur un vrai site Web. Maintenant, ramenons tout ça là où il était. C'est la section Instagram. Avec la section Instagram terminée, nous sommes en train de terminer notre design maintenant. Nous n'avons que deux autres sections à compléter, puis nous pouvons passer à la partie design réactif de la classe. Mais pour l'instant, voyons ces deux sections. Le premier est le contact, et dans la leçon suivante, nous traiterons l'en-tête et la barre latérale du contact . voit là-bas. 22. Contact En-tête et barre latérale: Il est temps de créer la section contact, et comme elle est un peu plus grande que d'habitude, je vais la diviser en plusieurs parties. Dans cette leçon, nous allons créer son en-tête et sa barre latérale. Commençons. Jetons un coup d'œil à la mise en page que nous avons créée lors du câblage. Nous pouvons voir que nous avons un titre, une carte, l'adresse, le numéro de téléphone, heures d'ouverture, puis le formulaire de contact réel. Maintenant, tout à l'heure, j'ai dit que dans cette leçon, nous allons créer l' en-tête et la barre latérale de la section contact. C'est ce que je pense, je vais utiliser une mise en page similaire à celle du menu. Je vais avoir le titre du contact ici, je vais avoir la carte ici, et le formulaire de contact ici, et sur la barre latérale où j'ai placé le menu de navigation, nous aurons les autres informations. l'adresse, le numéro de téléphone et les heures d'ouverture. Pour rendre les choses beaucoup plus faciles pour nous, continuons et dupliquons cette section. Je vais le copier, et je vais sélectionner mon cadre principal et je vais le coller et ensuite le déplacer comme ça. Permettez-moi également d'apporter ce titre ou en fait je peux l'apporter d'ici, couper à partir de là et le coller juste là dans ce cadre. où il est indiqué contact, vérifions que l'espacement est correct, 128 là, puis 128 là, et nous pouvons supprimer celui-ci. Je peux prendre le formulaire de contact et je peux le coller ici, nous y reviendrons plus tard. Ensuite, au lieu du menu de navigation ici, je vais récupérer les coordonnées, les couper à partir de là, et je vais les coller ici. Ensuite, je vais juste me débarrasser de ces objets. Maintenant, quelques choses que nous devons faire ici. Tout d'abord, modifions cette image en une carte réelle. Pour cela, vous pouvez prendre une photo d'une carte sur le Web, mais Figma possède un plugin appelé Mapsicle. Allons de l'avant et naviguons rapidement pour cela. Installons-le. Super. Revenons maintenant à notre fichier Figma, et ce que nous allons faire, c'est que nous allons sélectionner ce rectangle, nous allons ouvrir le plugin. Au fait, vous venez de me voir utiliser la fonctionnalité QuickFind dans Figma, vous pouvez y accéder en utilisant la commande et la barre oblique inverse. Ensuite, vous pouvez taper des noms de plugins, diverses commandes, dans Figma, il est très facile d'accéder. Nous allons examiner les raccourcis clavier. Voyons voir. où il s'agit d'actions rapides, vous trouverez le raccourci clavier de votre système d'exploitation. Alors ouvrons Mapsicle. Créons ici une carte aléatoire, cela n'a pas vraiment d'importance. Quelque chose comme ça, peut-être. Nous allons simplement créer la carte ici, et cela va la placer ici comme image d'arrière-plan, et c'est fini. Débarrassons-nous également de ce titre que nous n'en avons pas besoin pour le moment. Tournons notre attention sur la barre latérale. Maintenant, je souhaite que la barre latérale soit alignée sur mon formulaire de contact. Cela signifie que nous allons devoir modifier nos cadres ici. Jetons un coup d' œil à la structure. Nous allons appeler ce contact, puis nous avons un cadre ici, appelons cette barre latérale. Appelons ce contenu. Nous avons la barre latérale ici et le contenu ici. Que diriez-vous de faire cela, nous prenons la barre latérale et nous le regroupons avec le formulaire de contact, qui est le Groupe 23. Voyons voir. Nous prendrons le groupe 23, nous allons le déplacer à l'extérieur. Nous pouvons supprimer cette section ici, nous n'en avons pas besoin. Voyons voir, nous allons prendre ceci et ceci, nous allons créer un nouveau cadre avec les deux, et nous allons changer la direction à la verticale. Changeons la hauteur ici pour étreindre le contenu. Maintenant, sélectionnons le contenu, modifions la hauteur en étreinte et cadre 16. Maintenant, nous arrivons quelque part. Montons le contact vers le haut, comme ça. Cela devrait être placé à gauche comme ça. Voyons les guides juste pour nous assurer que nous faisons les choses correctement. Maintenant, sélectionnons le contenu et définissons le remplissage ou le redimensionnement comme conteneur de remplissage. Ajoutons un remplissage à gauche de 560 pixels. Cool. Maintenant, cette section est correctement alignée sur cela. avenir, le formulaire de contact est également correctement aligné, et il est également correctement aligné. Maintenant, nous arrivons quelque part. Maintenant, pour rendre cette section des informations de contact un peu plus intéressante, diriez-vous d'utiliser des icônes comme nous l'avons fait ici dans la barre supérieure ? Nous pouvons réellement copier ces informations et les coller ci-dessous, afin de ne pas recréer ces icônes. Sélectionnons le cadre de la barre latérale, collons et ouvrons encore une fois les guides. Réglons cela à la verticale. Nous avons un article, un deuxième article. Définissons-les comme conteneur de remplissage, puis nous sélectionnerons le conteneur réel et réglerons ce conteneur pour remplir le conteneur. Voyons pourquoi ce texte ne se comporte-t-il pas correctement ? Container, on y va. Copions cet élément, nous allons l'utiliser pour ajouter les heures ouvrables. Nous allons dire du lundi au jeudi, 12 h à 22 h, et du vendredi au dimanche, 10 h à 23 h 00. Super. Maintenant, modifions la couleur de ces icônes pour accentuer et je pense à 100 % à l'opacité. Faisons de même pour celui-ci. Pour celui-ci, pour le troisième, nous devons choisir une autre icône. Ouvrons à nouveau l' application Eye Concept pour choisir une couleur différente. Pendant que nous attendons cela, modifions l'opacité ou détectons l'opacité de ce texte en 75 noir. On y va. Maintenant que cela est ouvert, recherchons une horloge dans notre ensemble d'icônes Bootstrap. Prenons celle-ci et remplacons l' icône existante, comme celle-ci. Nous supprimerons l' ancienne et nous allons également agrandir un peu les icônes. Actuellement, ils ont 16 sur 16, mais je veux qu'ils aient 24 sur 24. En fait, une chose que je n'aime pas ici, c'est qu'ils sont alignés au centre avec des textes qui s' étendent sur deux rangées. Je veux qu'ils soient alignés au sommet. Allons de l'avant et changeons cela ici et ici. Mais de toute évidence, ils ne sont pas correctement alignés visuellement. Ce que nous devons faire, c'est appliquer la même technique que celle que nous utilisée lorsque nous avons créé le menu ici. N'oubliez pas que nous avons ajouté peu de rembourrage supérieur à cette ligne en l'enveloppant avec un cadre avec mise en page automatique. Allons de l'avant et faisons de même ici. Ce que nous devons faire, c' est l'envelopper avec un autre cadre en ajoutant une mise en page automatique. Shift A. Une chose étrange s'est produite ici parce que c'était déjà un cadre. Voir l'icône. En ajoutant la mise en page automatique, ces deux éléments seront alignés dans une certaine direction, ce que nous ne voulons pas. Nous pouvons cliquer avec le bouton droit de la souris et passer à la sélection du cadre. Nous avons créé un cadre par-dessus. Nous l'avons enveloppé dans un autre cadre. Dans ce cas, nous pouvons simplement faire Maj A sur ce cadre pour ajouter la mise en page automatique, puis nous pouvons ajouter la quantité de rembourrage souhaitée. Disons peut-être quatre ou deux. Voyons ce qui est le plus beau. Je pense que deux seraient le montant approprié, et nous ferons de même pour cette icône. Cliquez avec le bouton droit sur la sélection du cadre, Maj A pour ajouter une mise en page automatique, puis voyons quatre ou deux. Je pense que ça a l'air plutôt bien. Rappelez-vous aussi comment j'ai dit que de temps en temps, nous devons briser la mise en page. Eh bien, c'est quelque chose que nous pouvons faire ici aussi. Tout d'abord, permettez-moi de me débarrasser des éléments de voir. Tout ce groupe devrait disparaître. Pour casser un peu la mise en page, que diriez-vous d'aligner la largeur du texte ? Ce guide, nous allons aligner les icônes sur ce guide. Cela devrait être intéressant. Pour ce faire, voyons ce que nous avons obtenu. Nous avons un cadre avec 128 rembourrages à gauche. Passons à 64. Nous devons maintenant pousser le texte pour s'aligner sur ce guide. Comment pouvons-nous faire cela ? En fait, c'est assez simple. La distance entre ici et ici est de 64 pixels. Ce que nous faisons, c'est de calculer la taille de l'icône et d'ajouter le reste comme rembourrage approprié. Cela va pousser le texte vers la droite, ou parce qu'il s'agit d'un cadre et que nous utilisons l' espacement entre les éléments, je peux simplement augmenter l'espacement jusqu'à ce que nous atteignions le bon nombre. Je pense que c'est en fait le moyen le plus simple de le faire. Allons-y 40. Cela dépend vraiment. Je pense que 40 est en fait le bon montant. Faisons la même chose ici, 40 et ici, super. Maintenant, tout est correctement aligné. Exactement comme je le veux. Les icônes de ce guide, texte avec ce guide, puis l'en-tête, la carte et le formulaire de contact sont alignés sur ce guide, qui est exactement la même chose que pour le menu. Ce n'était pas assez dur, n'est-ce pas ? l'instant, la seule chose à faire ici est le formulaire de contact. J'espère que votre processus de conception se déroule et que vous progressez sur votre version du site Web. Si vous avez terminé l' en-tête et la barre latérale de la section contact, nous sommes prêts à passer au formulaire de contact, que nous terminerons dans la prochaine leçon. Je vous y verrai. 23. Formulaire de contact: Il est temps de travailler sur le formulaire de contact, et croyez-le ou non, conception de formulaires est l'une de mes activités préférées car je n'aime tout simplement pas l' apparence par défaut des formulaires sur le Web. J'essaie toujours de les rendre plus belles et plus utilisables. Permettez-moi de vous montrer comment je vais concevoir ce formulaire. Tout d'abord, nous avons besoin d'un titre pour ce formulaire. Prenons un texte, et je vais aller ici sous le groupe de formulaires. Vous savez quoi, changeons d' abord cela d' un groupe à un cadre, alors « Maj A » pour ajouter la mise en page automatique, et modifions l'espacement ici à 32, cela devrait le faire. Nous allons jouer avec cette couche si nous avons besoin d' augmenter le rembourrage ou autres, mais appelons cela, envoyez-nous un message. Allons Poppins 21, 32, gras, et utilisez simplement le noir ici. Maintenant, pour les champs de formulaire réels, voici ce que je pense, au lieu d' un champ avec un arrière-plan solide, déplacons l'étiquette un peu plus haut, puis nous aurons la valeur du champ. Ensuite, nous n'aurons qu'une petite ligne d'un pixel comme bordure pour séparer le champ des autres. Ça va ressembler à ça. Prenons d'abord soin de la ligne, on la remplira de noir et on aura 50 % d'opacité. Définissons le groupe par un cadre avec mise en page automatique, resélectionnons la bordure et la modifions en conteneur de remplissage, et modifions également ce dernier en conteneur de remplissage. Réglons l'espacement intérieur des éléments sur 16. s'agit de la valeur du champ, elle doit donc être 21, 32 standard et noire, et dupliquons-la également pour créer l'étiquette. Pour cela, nous utiliserons un texte beaucoup plus petit, et le plus petit que nous avons défini ici est 16, 24, donc 16 tailles de police, 24 lignes de hauteur. Faisons ça, donc 16, 24. Appelons ça ton nom. Mettons en fait quelques valeurs ici. Réduisons l' opacité de ce texte, utilisons le noir 75. Je pense que peut-être un espacement entre les lettres moins 3 pour cent juste pour le rendre un peu différent du texte qui s'y trouve, et c' est l'un de nos champs. Maintenant, pour nous faciliter les choses, il suffit de dupliquer cette image 1, 2, 3 fois de plus. Ici, nous allons avoir votre adresse e-mail. Ajoutons mon adresse e-mail ici. Alors quoi d'autre ? Le numéro de téléphone. Faisons ça. De toute évidence, ce n'est pas mon vrai numéro de téléphone, et ici ce sera votre message. Changeons le message, quelque chose comme ça. Enfin, il suffit de les supprimer. Changeons également le bouton. Nous avons créé un joli bouton ici, nous pouvons simplement le copier, et nous pouvons le coller. Il suffit de supprimer l' icône, de changer les textes. Nous pouvons définir le redimensionnement pour remplir le conteneur et nous pouvons également modifier l'alignement pour que le texte soit centré. Une chose que je veux vraiment changer est l'espacement, je pense que 32 est un peu trop bas, donc 64 pixels devraient faire l'affaire. De plus, j'aimerais limiter ampleur réelle de cette forme. Pour cela, voyons quelles sont nos options ici. Nous avons un cadre qui est en fait réglé pour étreindre le contenu. Maintenant, que se passe-t-il si je l'ai configuré pour remplir le conteneur ? Il va augmenter sa taille. Ensuite, nous avons ce cadre que nous pouvons régler pour remplir le conteneur, puis nous pouvons prendre le cadre initial et ajouter un rembourrage sur le côté droit, disons 560, ce qui est exactement la même quantité de rembourrage que nous avons utilisé ici. Pour pousser la carte et le contenu du menu depuis le bord gauche. Je pense que ça a l'air plutôt bien. Le seul changement ici, faisons en sorte que ce conteneur de texte remplisse, et je pense que le reste devrait simplement se mettre en place. Changeons cela pour remplir le conteneur, et modifions également cela. C'est à peu près tout. La section contact est maintenant terminée. Auparavant, nous avons créé l'en-tête avec le titre et la carte, ainsi que la barre latérale contenant les informations de contact. Dans cette leçon, nous avons créé le formulaire de contact. Si vous avez suivi, j'espère que votre section de contact est également complète, et si ce n'est pas le cas, créez-la pour que nous puissions passer à autre chose. Maintenant, en regardant notre page, nous pouvons constater que les seules parties non polies sont les sections de la newsletter et du pied de page. Prenons soin de ceux qui suivent. 24. Newsletter et pied de page: Newsletter et pied de page, sont les deux dernières sections de notre site Web que nous n'avons pas encore conçues. Allons de l'avant et faisons cela maintenant et finissons la conception de ce site Web. Allons-y. abord, prenons soin du pied de page car c'est la chose la plus facile à faire. Je vais sélectionner tout ce groupe et je vais l'appeler newsletter et pied de page et, bien sûr, Maj A pour utiliser la mise en page automatique. Modifions l'espacement entre les éléments à 128. Alignons tout au milieu et bien sûr, faisons remplir le récipient. Ajoutons également un rembourrage de 128 en bas de sorte que la distance entre cette section et le bas soit la même qu'entre cette section et le formulaire de newsletter. Maintenant, en regardant cette mise en page, je ne suis pas sûr que le logo s'intègre ici car je vois cela comme une section très épurée, donc je ne pense pas que nous devrions utiliser le logo. Même si nous l'avons utilisé dans le câblage. Mais comme je l'ai dit, le filaire n'est qu'un guide. Nous pouvons modifier les mises en page, nous pouvons supprimer certains éléments si, bien sûr, ils ne sont pas critiques, comme un contenu très important. Mais le logo ici est principalement pour des raisons esthétiques. Je vais donc simplement aller de l'avant et supprimer cela et dissocions également ce texte. Pour le texte, utilisons le noir 75, 16, 24, c'est exact. Nous avons déjà défini cette typographie. Maintenant, avec le pied de page terminé voyons l'inscription à cette newsletter. abord, je vais prendre ce groupe, transformer en cadre, appelons-le contenu du bulletin d'information, ajouter une couleur de remplissage en noir et le faire remplir l'espace disponible. Supprimons l'espacement ici et définissons un rembourrage supérieur et un rembourrage inférieur de 128 pixels et alignons également le contenu sur le milieu. Maintenant, rendons ce texte blanc et ce texte blanc. Je pense qu'environ 90 % devraient faire un tour. Donc, 90 % d'opacité et au lieu d'avoir deux éléments distincts ici, que diriez-vous de le combiner en un seul. Nous allons dire, abonnez-vous à notre newsletter pour des nouvelles et événements spéciaux et maintenant nous pouvons supprimer ce morceau , alors avec ces deux éléments sélectionnés, transformez-les en un cadre. Ajoutons un peu d'espacement, 64 pixels devraient faire l'affaire. Peut-être 95% d'opacité pour ce texte parce qu'il s'agit d'un en-tête sur fond sombre et si je me souviens bien dans le héros où nous avons également un titre sur fond sombre, nous avons utilisé une opacité à 95 %. Il s'agit donc simplement de garder les choses cohérentes. Ensuite, au lieu de ces deux champs, diriez-vous d'utiliser ceux que nous avons créés ici. Nous allons donc copier celle-ci. Allons coller ça dedans. Supprimons cela et nous avons également besoin d'un bouton. Collons ça aussi. De toute évidence, nous ne pouvons rien voir pour l'instant parce qu'il fait nuit. Donc la couleur noire sur la couleur noire. Sélectionnons ces deux éléments et Maj A pour les ajouter dans leur propre cadre séparé. Allons de l'avant et changeons les couleurs. Au lieu du noir, dissocions les couleurs d'ici. Utilisons du blanc. C'est mieux. Passons maintenant la direction de ce cadre à horizontale et modifions le texte à l'intérieur du bouton pour s'abonner. Changeons ensuite le redimensionnement pour étreindre le contenu. Le texte ici est un conteneur de remplissage. Ce cadre a une largeur fixe, alors que diriez-vous de le configurer pour remplir également le conteneur. Déplacons le bouton là et définissons cela comme un contenu de câlin et en fait je pense qu'une largeur fixe serait meilleure. Que diriez-vous de faire cette largeur de 640 pixels. Cela devrait contenir suffisamment d'espace pour une adresse e-mail et faisons en fait ce conteneur de remplissage qu'il corresponde à l'espace disponible. Cela devrait le faire. Voyons le bouton ici. Nous avons un peu mal d'alignement. Le bouton est aligné en haut avec l'élément de cadre. Que diriez-vous de les aligner en bas comme ça. Je pense que cela semble beaucoup mieux parce que nous avons une continuation claire entre cette ligne ici ou le trait ou la bordure du bouton. Cela devrait être notre bulletin d'information et notre pied de page. Alors, voyons où nous avons commencé. Il s'agit de l' image filaire d'origine, puis nous avons commencé ajouter des propriétés de typographie à ajouter des propriétés de typographie en modifiant la famille de polices, les tailles de police, ainsi que les hauteurs de lignes , les espacement des lettres, les poids des polices, etc. Ensuite, nous avons ajouté un peu de couleur et c'est ce que nous avons fini avec. Laissez-moi vraiment cacher ça. Nous avons commencé par chaque section et nous avons créé l'en-tête du menu supérieur, puis nous sommes passés à la section héros, description du menu des aliments, nous avons créé le menu alimentaire ainsi qu'un menu alimentaire. puis nous sommes arrivés à la section À propos, la galerie d'images Instagram, puis au contact et enfin dans cette leçon, nous avons créé le formulaire d'abonnement et le pied de page et c'est fini ou du moins ma version de celui-ci. J'espère que vous avez également fini votre design. J'espère que vous n' avez eu aucun problème présent, et j'espère que vous avez appris quelque chose d'utile dans cette classe jusqu'à présent. Maintenant, comme je l'ai dit tout au long de ce cours, je vous recommande de travailler à mes côtés et créer votre propre version du projet. De plus, je vous recommande de poster cela dans la galerie de projets de classe car d'autres personnes peuvent voir ce que vous avez fait, et si vous le souhaitez, je peux également vous donner des commentaires. À ce stade, vous pourriez être tenté d'appeler cela un jour et envoyer le design à votre client ou à votre développeur, mais le travail n'est pas encore fait car un aspect qui est beaucoup négligé des gens est un design réactif ou comment votre design sera-t-il sur différentes tailles d'écran ? Je veux vous en dire plus à ce sujet dans la prochaine leçon. 25. Conception pour les écrans moyens: Qu'est-ce qui se passe avec une conception Web réactive ? Je suis sûr que la plupart d'entre vous ont déjà entendu ce terme, mais au cas où vous ne l'auriez pas fait, permettez-moi de vous donner un guide rapide. La conception réactive consiste à faire en sorte qu'un site Web ou une application Web réponde au comportement et à l'environnement de l'utilisateur. En d'autres termes, la conception réactive garantit que ce site Web ou application Web sera utilisable sur n'importe quelle taille d'écran, plateforme ou orientation de l'appareil. Voici un exemple. Prenons le site web de figma.com. Actuellement, j'utilise l'écran ici, c'est 1920 par 1080. Un écran de bureau typique. Et sur la taille, voici à quoi ressemble le site Web Figma. Mais dès que nous commencerons à réduire la fenêtre du navigateur pour simuler l' apparence du site Web sur un appareil plus petit, vous commencerez à voir quelques changements. Comme par exemple, certaines de ces images sont maintenant devenues pleine largeur. Si nous allons encore plus loin, vous verrez le menu disparaître, se transformant en un de ces menus déroulants ou déroulants, et si nous allons encore plus loin, vous verrez que les images commencent à se redimensionner automatiquement. Le texte commence à être plus petit, comme par exemple sur cette rubrique, et encore plus petit. L'ensemble du site Web adaptera sa mise en page et sa topographie pour qu'il soit toujours beau et qu'il soit utilisable sur des écrans plus petits. C'est ce qu'est une conception web réactive. Il s'agit de s'assurer que vous concevez ou créez une version de votre site Web qui aura fière allure quel que soit l'environnement. Est-ce qu'il est affiché sur un grand écran de bureau comme celui-ci ? Ou peut-être que c'est sur un paysage , une tablette et un portrait, ou peut-être même sur un smartphone. Cette disposition doit s'adapter. J'espère que c'est logique et que vous comprenez pourquoi conception web réactive est un aspect si important de tout site Web ou application Web. Maintenant, le design que nous avons réalisé est destiné aux grands écrans. Nous avons commencé avec une taille d'écran relativement normale, mais nous devons maintenant nous assurer qu'il est tout aussi beau sur les écrans plus petits. Pour ce faire, de petits changements seront apportés à divers éléments. Ces changements vont de la modification de la position et taille jusqu'à la masquage de certains éléments et en montrant d'autres. Créons maintenant le design réactif pour les écrans moyens. Comme il s'agit d'écrans relativement petits, nous devons apporter de nombreux changements. Commençons. La première chose que je ferai dans Figma est de dupliquer le cadre appelé grands écrans et je vais le renommer en écrans moyens. Pour déterminer les changements que vous devez apporter, vous devez déterminer à quel moment les changements sont nécessaires. Quand la mise en page est-elle suffisamment petite pour qu'elle nous oblige à apporter des modifications ? Ce que je vais faire, c'est simplement redimensionner le cadre parent et parce que nous utilisons la mise en page automatique et pour l'ensemble du cadre et tous les différents éléments notre conception sont construits avec une mise en page automatique, cela fait c'est super simple pour nous car il est très facile de voir les éléments se déplacer en temps réel car je redimensionne automatiquement cette image principale. Quand j'arrive à un point où je vois clairement que, d' accord, quelque chose ne va pas avec la mise en page et nous devons apporter des modifications. Eh bien, c'est à ce moment que nous allons faire le changement. D'après mes tests, j'ai découvert qu'environ 1400 pixels sont là où nous devons ajouter ce qu' on appelle un point d'arrêt. C'est juste un point où nous devons commencer à apporter des changements. La mise en page que nous avons créée ici pour les grands écrans, c'est 1800 pixels. Ce cadre doit contenir une disposition adaptée aux appareils dont la largeur est comprise entre 1400 et 1800 pixels. J'espère que c'est logique. Juste pour rendre les choses un peu plus claires, renommons cela en 1800 plus. Cette mise en page l'utilisera pour des écrans de 1800 pixels et plus. Sur les écrans moyens, nous les utiliserons pour 1400-1800. La raison pour laquelle j'ai choisi 1400 est que, par exemple, chez le héros, ce texte commence à devenir un peu trop exigu. J'affiche essentiellement deux, trois mots par ligne, ce qui n'est pas suffisant pour des raisons de lisibilité. De plus, cette section ici a l'air un peu trop bruyante. Examinons les autres éléments. Le menu. Cette mise en page ici permet de décaler le contenu du menu. Cela fonctionne plutôt bien sur un grand écran, mais ici, pas tellement. Je préfère utiliser l'espace disponible ici. Parce que encore une fois, le texte commence à devenir un peu trop court et la page sera donc très longue et je veux éviter cela. De plus, nous resterons probablement loin de ce menu, nous le cacherons probablement complètement sur des écrans de taille moyenne. Voyons ce que nous avons d'autre. Voici un autre problème avec cette mise en page. Nous avons beaucoup de texte ici, mais la page est maintenant beaucoup plus petite, donc je n'ai pas le rembourrage supérieur et inférieur que j'ai ici. Le texte touche les bords ici, je veux donc corriger cela également. Les photos Instagram ont diminué. Bien sûr, ils sont devenus plus petits en largeur, mais ils sont maintenant un peu trop grands. Idéalement, je souhaite maintenir un rapport entre largeur et hauteur près de quelque chose que j' ai ici sur les grands écrans. Nous devons les rendre un peu moins grands. C'est ensuite la section contact. Encore une fois, cette carte ne semble place car c'est un rapport bizarre. Je veux faire cette pleine largeur. Le formulaire peut être un peu plus petit. Rappelez-vous, auparavant, nous avons ajouté beaucoup de rembourrage juste ici parce que nous avions beaucoup de place pour travailler, mais ici, ce rembourrage existe toujours et nous devons nous en débarrasser. Ce sont des changements comme celui-ci qui définissent une conception Web réactive. Il passe en revue les différentes largeurs d'écran et voit ce qui fonctionne et ce qui ne fonctionne pas sur cette largeur particulière et apporte les modifications nécessaires. Avec ce cadre réglé à 1400 pixels, commençons à apporter des modifications et nous commencerons par le héros. Pour résoudre ce problème où le texte ici n'a pas assez de largeur, nous allons changer la direction des éléments du héros. heure actuelle, il est placé à l'horizontale. Passons à la verticale pour que l'image soit en haut et que le contenu soit en bas. Tout d'abord, modifions la largeur de l'image ou le redimensionnement des conteneurs à remplir afin qu'elle remplisse l'espace disponible. Ensuite, ici, nous allons également parler des guides. Je vais conserver les mêmes guides de 64 pixels et 128 pixels, mais nous avons également quelques guides en dehors de notre cadre ici, mais parce que nous redimensionnons, nous ne pouvons plus les voir. Nous allons créer de nouveaux guides. Voyons voir. Nous allons les placer ici et un autre, donc c'est à 64 pixels du bord et celui-ci. Voyons si je peux le faire visuellement. Si nous effectuons une mesure rapide ici, c'est 67. Mais nous pouvons faire un calcul simple, donc 1400 moins 128, c'est 1272. Nous savons maintenant que ce guide se trouve exactement à 128 pixels du bord. Nous allons les utiliser pour nous assurer que nous alignons correctement les éléments. Maintenant, sélectionnons ce contenu de héros. Ceci est toujours réglé sur la verticale, ce qui est très bien. C'est ce que nous voulons, mais ajoutons un peu plus de rembourrage en haut et en bas. Le rembourrage latéral est exactement ce dont nous avons besoin, 128, mais en haut, je vais ajouter 96 et 96 en bas. Veillons également à ce qu'il soit réglé pour étreindre le contenu afin qu'il se redimensionne avec son contenu. De plus, étant donné que nous disposons de tout cet espace horizontal, transformons cette disposition à une colonne pour les heures ouvrables en deux colonnes. Il s'agit d'un cadre avec mise en page automatique. C'est très bien. Changeons simplement cette direction. Définissons un écart entre ces deux colonnes sur 64. Assurez-vous simplement que ceux-ci sont correctement réglés, alignez-les au centre. C'est bien. De plus, ce guide que nous utilisons précédemment pour aligner le contenu du menu, eh bien, nous n'en avons plus besoin. Vous pouvez simplement le sélectionner, et quand il est bleu, appuyez sur « Supprimer ». C'est le premier changement que nous avons apporté dès que nous n'avions pas assez de place pour afficher ces informations verticalement, afficher ces informations horizontalement, nous sommes passés à une mode verticale. Maintenant, le texte est bien affiché sur deux lignes. C'est beaucoup plus facile à lire que ce que nous avions auparavant. Voyons ensuite la section, la description du menu des aliments. Dans cette taille d'écran, il n'y a pas assez de place pour afficher ces deux éléments côte à côte, car le texte du titre devient trop petit, et c'est le même problème que celui que nous avons rencontré ici . Il est divisé en plusieurs lignes et il est plus difficile à lire, de plus, il n'a pas l'air très bien. La solution évidente consiste donc à afficher le titre au-dessus du texte sous. Au lieu d'être côte à côte, ils vont être empilés. Pour cela, nous devons cependant apporter quelques modifications car ici nous avons des cadres imbriqués dans des cadres car nous avons eu une mise en page un peu compliquée avec beaucoup de rembourrages ajoutés. La première chose que nous allons faire est de sélectionner le cadre parent, changer sa direction de mise en page en verticale, définir l'espacement entre les éléments , disons, 64 pixels. Ensuite, nous allons sélectionner chacun, chaque élément et dissocier pour éliminer le cadre. Ensuite, nous modifierons le redimensionnement pour remplir conteneur et embrasser le contenu. Faites de même pour cela, remplissez les récipients. Horizontalement, il remplit tout l'espace disponible et étreint le contenu verticalement. Il est donc aussi grand que son contenu. Ça a l'air plutôt bien. Mais ce texte est probablement un peu trop long. Que diriez-vous d'ajouter un peu de rembourrage supplémentaire de ce côté pour que les textes et le titre soient un peu plus courts. Cela améliore en fait la lisibilité du texte. Nous sélectionnerons à nouveau le cadre parent et pour le rembourrage droit, ajoutons quelque chose d'un peu plus grand, quelque chose comme 400 ou peut-être quelque chose de plus petit. Que diriez-vous de 360 ? Ou quelque chose qui vous paraît bien. Pour moi, 360 fait le travail, donc je vais juste le garder comme ça. Maintenant, avant de passer à autre chose, faisons un autre changement pour cette mise en page, car à mesure que la largeur de l'écran diminue, le contenu deviendra évidemment plus long ou plus grand. Sur un appareil plus petit, vous devrez faire défiler beaucoup plus. Par conséquent, pour que nous ne transformons pas cela en une page Web très longue. Réduisons l' espace entre les éléments. Si vous vous souvenez, sur les grands écrans, nous avons utilisé 240 pixels. Nous l'avons fait en appliquant 240 comme espacement entre les éléments du cadre principal, qui a une disposition automatique. Sur les écrans moyens, diminuons un peu cette valeur, quelque chose comme 160. Ça a l'air un peu mieux. Peut-être quelque chose d'un peu plus gros, 176, qui pourrait aussi fonctionner. Vous pouvez déjà constater qu'en faisant cela, nous avons gagné beaucoup d'espace verticalement. De plus, vous n'avez pas besoin de tonnes et de tonnes d'espaces blancs sur un écran plus petit. Il fonctionne très bien ici sur le grand écran, mais à mesure que l'écran devient de plus en plus petit, nous devons préserver cet espace vertical. Maintenant, passons à autre chose. Jusqu'à présent, nous avons créé le héros et nous avons fait cette description du menu alimentaire. Voyons le menu actuel. Tout d'abord, débarrassons-nous de cette navigation. Nous n'en avons pas besoin, et choisissons la section hamburgers et sandwichs, et disons que je veux aligner l'image avec ce guide ici et le texte, mais je veux seulement que l'image allez sur toute la longueur de la page sur le côté droit. Pour ce faire, voyons voir, nous allons sélectionner le cadre principal, puis nous irons ici et nous ajouterons 128 rembourrages à gauche. Ça devrait être ça. Le reste du contenu est toujours correctement aligné car nous avons le jeu de rembourrage de la conception précédente. Ça a l'air bien. Prenons soin des autres sections. Voyons, steaks, on y va 128, comme ça, des rapides, 128, et des salades, une. Super. Ça a l'air bien. Passons maintenant à la section À propos, et nous allons faire quelque chose de similaire au héros où nous empilerons l'image et le contenu du texte. Sélectionnons le cadre, modifions la direction de mise en page sur verticale. Déplacons l'image vers le haut, passons à remplir le conteneur. Je vais garder la même hauteur de 480, et cette section, je vais le régler pour remplir le conteneur, étreindre le contenu, et je vais changer le rembourrage en haut, en bas à 96, la même valeur que celle que nous avons utilisée pour la section des héros. Remarquez que l'image est devenue considérablement plus petite en ce moment. C'est parce que je dois régler ça à une hauteur fixe. Le contenu global ou cadre doit être configuré pour étreindre le contenu comme tel. C'est la section à propos, passons à autre chose. Photos Instagram. Le seul changement qui sera apporté ici est la hauteur de ces images. En ce moment, il y en a 480, mais passons à 400. Cela devrait nous donner un rapport largeur/hauteur bien meilleur. Voyons ensuite le formulaire de contact. Ici, les choses sont très simples, nous devons aligner cette carte et la carte avec notre guide, et nous devons faire en sorte que ce formulaire soit pleine largeur. Depuis que je l'ai sélectionné, modifions cette valeur à 128. Vous devez adorer la mise en page creuse, parce que le cadre de formulaire utilisait un conteneur de remplissage, il a juste rempli tout l'espace disponible et l'espace disponible est devenu plus grand parce que nous avons retiré un gros morceau de ce rembourrage. Parlons maintenant de ces éléments. Maintenant, passons à 128, et nous sommes prêts à y aller. Enfin, prenons soin de cette section ici. Le contenu de la newsletter, et ici, nous n'avons pas besoin de faire quoi que ce soit, car cela semble toujours bon sur les écrans de taille moyenne. Vous pouvez le faire en pleine largeur pour qu'il s'adapte entre ce guide et ce guide. Mais personnellement, je ne pense pas qu'il y ait besoin de changement, donc je vais le laisser comme ça. Nous devrons apporter quelques changements lorsque nous arriverons aux petits écrans, mais sur le support, cela semble très bien. Faisons un bref récapitulatif de ce que nous avons fait dans cette leçon en termes de conception web réactive, et je vais en fait les montrer côte à côte, afin que vous puissiez voir les changements que nous avons apportés. Tout d'abord, nous avons réduit l'espacement entre les éléments du mainframe. Nous en avions 240 ici, nous y sommes allés avec 176, je crois. Ensuite, nous avons changé le héros de cette disposition horizontale à verticale, et nous avons changé les heures ouvrables d'une disposition verticale à horizontale juste pour tirer le meilleur parti de l'espace disponible. Nous modifions également cette section de l'horizontale à la verticale. Nous avons modifié le menu en supprimant d'abord la navigation du menu, puis en supprimant également le grand décalage que nous avions sur le côté gauche. Maintenant, tout s'aligne correctement. Quoi d'autre ? Passons à autre chose. Nous avons également modifié la section À propos. Tout comme nous l'avons fait avec le héros, nous sommes passés d'une disposition horizontale à verticale. Ensuite, sur la section Instagram, nous avons changé la hauteur des photos de 480 à 400. Ensuite, sur le formulaire de contact, nous avons bien sûr agrandi la carte ou paraît plus grande en l'alignant sur les guides. Nous avons également fait en sorte que le formulaire de contact occupe tout l'espace disponible en modifiant ou en abaissant le rembourrage que nous avons défini ici. C'est notre version de conception réactive pour écrans moyens. Comme vous avez l'habitude de le faire maintenant, il est temps de vous entraîner. Alors allez-y et créez le design réactif pour les écrans moyens pour évidemment votre version du design. Une fois que vous avez terminé, nous pouvons passer à autre chose parce que nous sommes en réalité sur le dernier tronçon. Nous sommes vraiment proches de la ligne d'arrivée, mais nous devons quand même prendre soin des petits écrans ou l' apparence du site Web sur des écrans plus petits. Ceux-ci nécessitent le plus grand nombre de changements en raison de la taille de cet écran. Prenons soin de cela lors de la prochaine leçon. 26. Conception pour les petits écrans : Changer l'échelle de caractères: Quand il s'agit de régler la conception des petits écrans, il y a beaucoup de choses à faire. Nous devons modifier la taille des polices, la mise en page et introduire un nouvel élément sous la forme d'un menu de superposition. C'est pourquoi nous allons diviser réglages du petit écran en trois leçons. Dans ce cas, nous nous occupons des tailles de police. Allons-y. Tout d'abord, revenons à Figma et dupliquons les écrans moyens, concevons et renommons les écrans en petits écrans. La portée que nous recherchons est d'un peu inférieure à 1 400 pixels. Toute modification apportée à cette disposition sera appliquée sur des écrans de 1 400 pixels ou moins. Pour voir certains de ces changements, redimensionnons l'écran à une taille typique d' un petit écran comme un smartphone ou quelque chose du genre. Prenons quelque chose comme 540 pixels, ce qui est d'une jolie taille assez petite. Comme vous pouvez le constater sur cette taille, nous avons beaucoup de choses à faire. Les éléments se chevauchent. Nous n'avons pas assez de place pour que le texte du menu de navigation soit trop grand. Le menu a l'air bizarre. Nous avons beaucoup de choses à faire. Mais en fait, rendons cela un peu plus grand pour que nous ayons toujours accès à certains de ces éléments. Cela va simplement nous faciliter le travail. Maintenant, comme je le disais dans cette leçon, nous allons nous occuper des tailles de police car voici le problème. Sur un petit écran, vous ne devriez pas vraiment utiliser les mêmes tailles de police que celles que vous utilisez sur un grand écran. Parce que sur un grand écran, vous avez beaucoup de place. Vous avez beaucoup d' écran, de biens immobiliers, mais sur un petit écran, ce n'est pas le cas. L'une des méthodes que vous pouvez utiliser pour vous assurer que tout votre contenu est bien adapté et affiché correctement consiste à réduire la taille des polices. Si vous vous souvenez de la leçon de topographie, nous avons utilisé une échelle de type. Nous utilisons celle-ci avec une taille de police de 21 pixels. Si je me souviens bien, c'était un quatrième parfait. Voyons si les tailles de police correspondent à 88, 66, 50. Celui-ci était le rapport 1, 3, 3, 3 de la base 21 . Maintenant, ce que j'aime faire pour les écrans plus petits, c'est de conserver la même taille de police de base, mais changer le ratio car regardez ce qui se passe lorsque vous modifiez le ratio à un pas plus bas. Les tailles de police diminuent également, en particulier les plus grandes, le titre un, le titre deux. Je pense que c'est un excellent moyen de contrôler la typographie sur un site web réactif. Sur les petits écrans, il suffit de réduire la police en modifiant l'échelle des types. Ensuite, dupliquons ce cadre. Faisons de la place pour ça ici. Appelons en fait cette échelle de type pour les petits écrans et au-dessus. Appelons cette échelle de type, pour les petits écrans. Ce sera la base 21, donc 21 pixels. C'est le point de départ, mais pour l'échelle, nous allons utiliser ce tiers 1.250 ou majeur. Renommons cela également. Allons maintenant modifier la taille des polices ici. Voyons voir, nous avons 21 pixels comme base, nous garderons les 16 comme un abaissement dans l'échelle, donc 1624. Mais sur les plus grandes tailles de police, nous avons les 26 suivantes. Puis 33, 41, 51 et 64. Maintenant, je vais aller de l'avant et modifier les tailles de police ici aussi, donc 26. Pendant que j'y suis, je vais aussi changer la hauteur de la ligne. Gardons ça à 40, 33 ans. Réglons cela à 48. C'est 41. Si vous vous demandez pourquoi je supprime cette valeur de hauteur de ligne et que je la règle sur Auto, quand elle est en mode automatique et que je clique dessus, Figma la calcule automatiquement pour moi en fonction d'un rapport prédéfini. Je peux utiliser cette valeur de 62 ou ajouter la mienne. Dans ce cas, je pense que je vais juste ajouter le mien, donc j'irai probablement avec 56. Pendant que j'y suis, je vais également mettre à jour le texte ici. Le suivant est 51. Passons ça à 72. Enfin, celui-ci est 64, et passons à 80 pour la hauteur de ligne comme celle-ci. Maintenant que nous avons les nouvelles tailles en place, allons les appliquer à notre page, et pour me faciliter la tâche , je vais juste prendre une capture d'écran de ces valeurs et je vais épingler sur mon écran. chose comme ça. Passons à notre conception pour les petits écrans. Au fait, si vous vous demandez comment je peux le faire, c' est une application sous macOS appelée Clean Shot. Voyons la topographie. En gros, ce que nous devons faire ici, c'est modifier l'ancienne valeur par la nouvelle valeur. Maintenant que je dis cela, je pense que nous devons également connaître les anciennes valeurs. Prenons également une capture d'écran de cela. Épinglons également les captures d'écran, alors organisons-les un peu ici. Je peux également les redimensionner. Je vais avoir l'ancienne valeur , puis les nouvelles valeurs ici. Passons maintenant en revue la conception et modifions ces valeurs en conséquence. Ce texte ici, c'est 16, il reste le même. La navigation 21, elle reste inchangée. Celui-ci, 88 104, c'est le H1. Passons à 64 et 80. C'est 28 et 40. Voyons la position 3 ici. Nous devons le changer pour 26 et 40, comme ça. Suivant 66, 80, c'est un H2. Passons à 51, 72. Comme ça. Il s'agit d'un paragraphe, donc il reste le même. Et comme nous y sommes, c' est encore 66, 80. Nous devons le modifier pour 51, 72. Comme ça. Celui-ci utilise le style donc 37, 48. Numéro 4 ici sur la liste. Nous devons le modifier par 33, 70 ou 48, donc 33. Celui-là et ceci, sélectionnons tous ces éléments. Je ne fais que maintenir Commande et Maj enfoncés pour sélectionner tous ces éléments. Ceux-ci utilisent 28, 40. Numéro 3 ici, remplacons par 26, 40. Nous n'allons pas nous en préoccuper, mais nous en avons toujours besoin. Sélectionnons ce style Copier les propriétés. Sélectionnez ceci, et ceci, et ceci, collez les propriétés pour appliquer les nouvelles tailles de police. Maintenant, sélectionnons ces deux éléments et ceci et modifions ces deux-là, 51, 72. Il s'agit d'un texte normal, conserve le même style. Cela aussi. Celle-ci, 51,72 aussi là, et le reste devrait être à peu près le même, sauf peut-être celui-là. 37,48, passons à 33, 48. Ça devrait être ça. résumer rapidement, ce que nous avons fait ici, c'était d'utiliser une échelle de type différente. Maintenant, nous pouvons nous débarrasser de ces captures d'écran. Nous sommes passés d' un rapport de 1,333 à 1,250, ce qui a réduit la taille des polices sur les petits écrans. Sur la base de ces nouvelles valeurs, nous venons de sélectionner tous les éléments de texte et de modifier les tailles de police là où nous le voulions. Comme vous pouvez déjà le constater, cela a eu un impact important sur la taille globale de notre page. Parce que même si c' est beaucoup plus petit que cela, il est presque égal en hauteur. Bien sûr, il deviendra plus grand ou plus grand car nous commencerons à empiler certains éléments. Mais chaque petit peu aide. modifier la topographie ou la taille des polices sur petits écrans Je recommande vivement de modifier la topographie ou la taille des polices sur de petits écrans. C'est maintenant à vous de modifier l'échelle des types et d'appliquer les nouvelles tailles de police à votre version de la conception. Si vous l'avez déjà fait, super, vous êtes prêt à passer à autre chose. Mais si ce n'est pas le cas, vous devriez aller de l'avant et le faire dès maintenant afin que nous soyons au même niveau en ce qui concerne les progrès réalisés notre conception et vous assurer que vous comprenez pourquoi nous faisons cela. J'ai essayé de l'expliquer de la meilleure façon possible dans la vidéo. Mais si vous ne comprenez toujours pas pourquoi nous devons apporter ces changements dans un design réactif. Ensuite, laissez-moi une ligne dans la zone de discussion et je vais essayer de l'expliquer autrement. Maintenant, lorsque vous serez prêt, je vous verrai dans la prochaine leçon où nous allons modifier la mise en page de notre site Web sur de petits écrans. 27. Conception pour les petits écrans : Changer la mise en page: La prochaine étape de l' adaptation ou de la conception à petits écrans consiste à modifier la disposition, et le plus grand changement ici consiste à déplacer tout vers une disposition à une colonne. En raison de la taille de l'écran, il est rare que vous puissiez insérer deux colonnes de contenu. C'est pourquoi, lorsque vous ouvrez un site Web sur votre téléphone, vous verrez généralement que tout est empilé l'un sur l' autre dans une seule colonne. Allons de l'avant et faisons cela aussi. Commençons par le haut. Parce que nous avons affaire à de petits écrans, notez que lorsque nous arrivons à une taille plus petite, ces éléments se chevauchent. Faisons quelque chose de intelligent ici et débarrassons complètement de cette zone, et déplacons-la dans son propre conteneur de superposition, que nous créerons dans la prochaine leçon. En gros, je veux remplacer ce contenu par le logo et une petite icône pour le menu, et l' idée est que lorsque nous cliquons sur cette icône de menu, nous obtiendrons une fenêtre contextuelle ou un conteneur de superposition afficher le menu ainsi que les informations que nous supprimons d'ici, car voici un petit conseil : lorsque vous créez des conceptions réactives ou des versions réactives pour votre mise en page, il est possible de supprimer certains éléments, mais la plupart du temps, vous voudrez les ramener, en particulier des éléments critiques comme la navigation. Dans notre cas ici, sur un très petit écran, la navigation est trop longue, nous allons donc la supprimer de cette mise en page, mais nous l'ajouterons plus tard dans un élément séparé qui s' ouvrira à la demande. Allons-y et faisons-le. Je vais supprimer ça. Je vais également copier le logo et supprimer ce morceau. Je vais en fait renommer ça en, en fait, nous pouvons le garder comme barre supérieure. C'est très bien. Je vais coller le logo, mais je vais le rendre plus petit. Passons sa hauteur à 48 pixels, quelque chose comme ça. Cette hauteur devrait être suffisante pour un petit écran comme un smartphone. Vous pouvez toujours voir clairement le logo, mais il ne prend pas trop de place. Mettons-le ensuite de ce côté. Débarrassez-vous de ces éléments. Ajoutons également une icône de plus ici pour servir d'icône de menu, et je vais ouvrir à nouveau l'icône configurée, et je vais rechercher Liste sous l'icône Bootstrap. C'est celui que nous allons utiliser. Allons de l'avant et ajoutons-le à notre page. Juste comme ça. Je viens de le coller avec la barre supérieure sélectionnée, et j'ai également changé la taille à 32 pixels. Maintenant, je peux simplement supprimer les icônes sociales. Nous n'allons pas en avoir besoin pour le moment, et je me suis également assuré que notre navigation utilise la couleur noire. Ce faisant, je m'assure que même sur les plus petits écrans, nous obtenons toujours une bonne mise en page pour notre en-tête. Maintenant, quelques changements ici. Tout d'abord, le rembourrage, haut et bas, augmentons un peu car maintenant nous n' avons qu'un seul élément. Supprimons également ce guide car nous n'allons plus l' utiliser, et dissocions également cet élément, le héros avec la barre supérieure afin de nous débarrasser de cet écart entre eux. Décalons A et appelons ça en-tête et héros, et supprimons complètement l'espacement entre eux. Passons à autre chose. Sélectionnons le cadre principal et modifions l'espacement entre les éléments de 176 à 128, comme ça, et comme vous pouvez le voir, nous avons des choses très bizarres qui se passent ici. Je me demande en fait pourquoi cela est bouleversé. C'est tellement bizarre. Allons le retourner. Mais nous y arriverons dans un petit peu. Faisons ce récipient de remplissage. Faisons ce récipient de remplissage, et faisons ce conteneur de remplissage comme ça. Nous allons le redimensionner à peu près là. Voyons maintenant cette zone de héros. Nous pouvons en fait augmenter la taille de cette image à environ 480. chose comme ça, et pour ce Quelque chose comme ça, et pour ce qui est de cette section, réglons le contenu en hauteur pour étreigner le contenu et jetons un coup d' œil au contenu du héros, où je vais changer le rembourrage gauche et droit en 64 pixels. Cela va s'aligner correctement sur ce guide. Il y aura exactement le même espace à gauche et à droite. Ces deux-là seront les mêmes, mais ils aligneront également tout sur la gauche, comme ça, ce qui permettra de s'assurer qu'il est aligné vers la gauche. C'est tout simplement plus logique comme ça sur un petit écran pour que tout soit bien aligné vers la gauche. Sélectionnons également ces deux-là, alignez-les à gauche comme ça, et je suppose que si nous voulons économiser un peu plus d'espace, nous pouvons changer le rembourrage ici à 64. Il va être 64 ans tout autour. C'est vraiment à vous de choisir. Je pense que 96, a l'air bien parce que c'est une section assez importante, et je ne veux pas qu'elle ait l'air trop entassée, mais comme je l'ai dit, c'est à vous de choisir. C'est le héros. Ce sont des changements très, très simples. Comme vous pouvez le constater maintenant, si nous nous redimensionnons même à une très petite taille, cela semble toujours très beau. Voyons à ce sujet, la description du menu alimentaire. Tout d'abord, passons à étreindre le contenu, remplir le récipient. Assurez-vous de changer les rembourrages ici à 64. Cela est à nouveau bouleversé. Probablement un bug dans Figma. Retournons ça, et ça devrait être tout. Pour celui-ci, il suffit de changer le rembourrage. Prochaine. Voyons le menu, et le plus grand changement pour le menu ici sera que nous allons empiler ou nous utiliserons une disposition de colonne unique car maintenant sur deux colonnes, comme vous pouvez le voir, le texte est un peu Un peu trop entassée. Il est un peu trop court pour une bonne lisibilité. Allons-y et faisons-le. abord, je vais sélectionner le menu des aliments et modifions la distance entre les articles ou l'espacement à 96 pour être un peu plus prudent avec l'espace que nous utilisons. Ensuite, sur les steaks, changeons aussi cela par 96 et 64, puis sur les plats, notons que nous avons une colonne et deux colonnes. Eh bien, nous n'en avons plus besoin, alors dissocions et dissocions également la colonne 2. Maintenant, les plats seront simplement affichés l'un sur l'autre. Nous allons maintenant apporter quelques changements ici. Il faut également ajouter un rembourrage sur le côté droit. Je pense que nous avons un peu trop de distance entre les plats. Que diriez-vous de le changer en 64, quelque chose comme ça. Ça a l'air plutôt bien. Nous pouvons essayer de compliquer un peu plus cela en créant des espacements séparés entre le titre du steak et le premier élément. Mais je pense que c'est très bien tel qu'il est. Je vais probablement redimensionner cette image pour qu'elle soit 480 car elle était un peu trop grande. Ça a l'air plutôt bien. Faisons cela également sur les autres sections. 96, espacement ici, 64 et 64 rembourrage à gauche et rembourrage à droite. Ensuite, nous avons aussi le contenu, changeons cela, puis pour les plats, nous avons aussi la colonne 1 et la colonne 2. Allons de l'avant et dissocions et dissocions également, puis sous les plats, puis sous les plats, assurez-vous que tout soit réglé à la verticale. Comment le contenu sur le parent. 64 pixels, rembourrage à droite. Distance de 64 pixels entre eux, et chaque plat doit en fait aller sur toute la longueur. Pourquoi ne fait-il pas ça ? Voyons voir. Passons ça à 480. Burgers et sandwichs, c'est ici que nous avons appliqué 64 et 64, puis le contenu n'a pas de rembourrage. C'est exact, puis la vaisselle, c'est de là que venait le rembourrage supplémentaire. C'est la deuxième section du menu. Faisons de même pour les autres, exactement la même chose, 96, 64 et 64. Puis, encore une fois, nous les avons en colonnes, donc dissocions la direction réglée sur verticale, étreignez le contenu 64 entre zéro ici, et cela devrait être tout pour cette section, et enfin, pour les salades, abandonnons les colonnes. Je souhaite sélectionner l'élément principal. Utilisons 96 ici et 64, et 64 ici à droite, et passons cette image à 480 en hauteur. Est-ce qu'on a changé celui-ci ? Non, nous ne l'avons pas fait. Faisons cela maintenant, et je pense que c'est à peu près tout. Presque. Certains de ces séparateurs nous manquent. Laissez-moi revenir en arrière et voir exactement ce qui nous manque. Car rappelez-vous que lorsque nous utilisions des colonnes, le dernier élément d'une colonne n'avait pas de séparateur en dessous. De toute évidence, lorsque nous nous sommes débarrassés des colonnes, certains de ces éléments sont laissés sans séparateur. Il suffit de dupliquer et positionner le séparateur là où il le faut. Voyons voir, j'en ai besoin d'un autre ici. Pour les rapides, nous en avons besoin d'un autre, et pour les salades, nous en avons besoin d'une de plus comme ça. Maintenant, nous avons en fait un peu plus d'espace ici. Voyons de quoi il s'agit. C'est le menu alimentaire, et il est prêt à étreindre le contenu. L'un de ses contenus est trop volumineux. Voyons lequel. Des salades ? Les salades sont en fait prêtes à étreindre le contenu, donc ce n'est pas ça. Des rapides ? Tous sont prêts à étreindre le contenu, mais ils sont probablement en salade. Voyons, oui, les plats ici. Hauteur fixe au lieu du contenu des câlins. Changeons donc cela et tout est là où il devrait être. Il y a une faute de frappe ici. C'est le menu. Nous venons de passer de deux colonnes sur des écrans moyens à une colonne sur les écrans plus petits et nous avons également modifié la hauteur des images et nous avons également joué avec différents rembourrages ou espacements. entre les éléments. Maintenant, passons à autre chose, nous sommes très près de finir cela. La section « À propos ». En fait, je ne pense pas que nous ayons besoin de faire quoi que ce soit. Je garderai la même taille d'image, espacement est correct, ou en fait, non, sur le contenu du héros, nous allons changer le rembourrage ici de 128 à 64. Maintenant, il est correctement aligné. Voyons ensuite les photos d'Instagram. C'est un peu plus délicat. Tout d'abord, sélectionnons ceci, modifions le rembourrage, et c'est là que nous commençons, puis nous allons changer la direction de l' horizontale à la verticale. Changeons la distribution en emballée, alignons tout sur la gauche. Passons à étreindre le contenu et définissons une distance ou un espacement entre les éléments de 64. Faisons également ce bouton pleine largeur , alors remplissez le conteneur. Alignons tout au milieu et nous sommes prêts à y aller. Réduisons également l'espace entre la galerie de photos et le titre. Au lieu de 128, nous allons définir 96, et au lieu d'une disposition à trois colonnes, qui peut ne pas être utilisable à certaines largeurs, faisons une mise en page à deux colonnes. Mais en fait, celui-ci devrait être réglé pour remplir le récipient comme ça. Disposition à deux colonnes pour les photos au lieu de trois colonnes. Voyons comment nous pouvons le faire. Nous avons quelques images et elles sont organisées en rangées. C'est assez simple. Il suffit de dupliquer une ligne et de déplacer les images. Je vais supprimer, ou en fait, je vais déplacer celui-ci de la rangée 1 à la ligne 2, et je vais supprimer celle-ci et supprimer celle-ci, et maintenant nous devrions avoir des images distinctes. Maintenant, supprimez celui-ci également, et maintenant nous devrions être bons. De plus, modifions la hauteur de ces images à 240 pixels, comme ça. Il s'agit d'une mise en page beaucoup plus appropriée pour un petit écran. Passons ensuite au contact. Changeons l' espacement ici à 96. C'est bien, passons le rembourrage à 64. Si vous le souhaitez, vous pouvez également ajouter 64 ici. Si vous ne voulez pas que la carte soit pleine largeur, dans mon cas, je pense que je vais simplement l'ignorer. De plus, rendons la carte un peu plus petite 480 et voyons ce que nous pouvons faire pour ces deux éléments. Que diriez-vous de déplacer cette barre latérale vers le haut juste ici et de nous le haut juste ici débarrasser de ce rembourrage juste là, et réglons son dimensionnement pour remplir le conteneur. Ajoutons en fait un rembourrage de 64 pixels à droite de sorte que lorsque nous le redimensionnons ou le redimensionnons, il nous reste encore de l'espace sur le côté droit. Assurez-vous que l'espacement est correct et c'est le cas. En fait, sélectionnons ce cadre et modifions l'espacement entre l'icône et le texte par quelque chose d'un peu mieux, comme 32. Nous avons donc la carte puis le formulaire de contact. Ajoutons un peu de rembourrage à gauche et à droite. Passons l'espacement à 96, et maintenant que je le vois, nous n'avons pas besoin de deux images ici. Nous devons simplement nous assurer que l'espacement est correct, mais nous pouvons sous-regrouper cela et avoir simplement la seule image sur laquelle nous allons définir comme conteneur rempli 64, rembourrer à nouveau 64, et cela devrait être pour le section contact, et enfin, voyons le pied de page et la newsletter. Tout d'abord, le pied de page doit être réglé pour remplir tout le conteneur, et le placer dans un cadre pour que je puisse y ajouter un peu de rembourrage , 64, 64. Définissons cela pour remplir le conteneur et nous assurer que le texte est aligné vers la gauche, puis pour la newsletter, modifions le rembourrage supérieur et inférieur à 96, puis le côté encadrement, Changeons ça pour remplir le conteneur. Ajoutons ici un peu de rembourrage à 64, et voyons notre texte. Il remplit le récipient, donc c'est bien. Mais celui-là, le formulaire ne le fait pas. Alors, que diriez-vous de faire remplir le conteneur et ensuite, voyons celui-ci l'entrée doit également remplir le conteneur. Le bouton est réglé pour étreindre le contenu, donc il ne sera que le texte qu' à l'intérieur , mais l'entrée peut croître ou il peut se rétrécir donc je vais le définir comme conteneur de remplissage. Maintenant, si je redimensionne l'écran, c'est le comportement qu'il a et qui est exactement ce que nous voulons. Enfin, au pied de page, nous avons des distances ou espacements un peu trop grands, alors passons cela à 96 et 96 pour cela, et c'est tout. C'est tous les changements de mise en page apportés à la version réactive du site Web sur de petits écrans. Examinons plus rapidement ce que nous avons fait par rapport aux écrans moyens. Tout d'abord, nous avons supprimé la barre supérieure où nous avons remplacé son contenu par le logo et une icône de menu. Nous nous sommes débarrassés de ces éléments, l'adresse, des icônes des réseaux sociaux et de la navigation, mais nous les ajouterons plus tard sous une autre forme. Nous avons fusionné ces éléments ici de sorte que l'en-tête avec la zone du héros, nous avons aligné à gauche à peu près tous les éléments de la page. Nous avons également réduit l' espacement entre les éléments au niveau mondial ou au niveau supérieur de 176 à 128. Ensuite, nous avons également modifié un peu le menu. Nous sommes passés de deux colonnes pour les éléments de menu à une colonne. Nous avons également rendu les images un peu plus petites en hauteur, et dans le monde entier, nous sommes passés d' un espacement de 128 pixels entre les éléments et les bords gauche et droit à une distance ou un espacement de 64 pixels, et cela permet simplement au contenu de croître un peu plus horizontalement, de sorte qu'il occupe généralement un peu moins d'espace verticalement. Nous avons fait de même pour la section À propos. la section Photos pour Instagram, nous avons empilé le titre et le bouton Suivre, et nous avons migré une mise en page à trois colonnes vers une mise en page à deux colonnes pour la galerie de photos. Ensuite, sur le contact, nous avons déplacé certains éléments. Nous avons pris la barre latérale d'ici et nous l'avons déplacée au-dessus de la carte. Nous avons également fait en sorte que le formulaire de contact soit pleine largeur, puis nous avons appliqué des options de redimensionnement intelligentes au formulaire d'abonnement afin qu'il se redimensionne automatiquement en fonction la taille de l'écran, et c'est tout. Maintenant, c'est à ton tour. Allez-y et créez la version réactive pour les petits écrans afin que nous soyons sur la même longueur d'onde. Maintenant, vous venez de voir qu'en modifiant la mise en page, nous nous sommes débarrassés de certains éléments assez importants de notre conception, comme l'adresse, les icônes sociales et la navigation qui est la plus grande. Nous avons donc besoin d'un moyen de les rajouter afin qu'ils soient accessibles à l'utilisateur. Je vais le faire avec un menu de superposition et cela apparaîtra dans la prochaine leçon. 28. Conception pour les petits écrans : Créer le menu de superposition: C'est incroyable que tu sois arrivé jusqu'ici, Leçon 27. voyage a été long, mais nous en sommes presque au bout. Tout ce que j'ai à faire maintenant, c'est créer le menu de superposition pour les petits écrans, et c'est fini. Allons-y et faisons-le. Cela va être une tâche très simple et le menu de superposition est essentiellement un conteneur qui sera affiché lorsque nous cliquons sur cette icône Menu sur petits écrans car nous avons masqué le la navigation et toutes ces informations, nous avons besoin d'un moyen de les remettre en place pour qu'il soit accessible à l'utilisateur. Lorsque nous cliquons sur ce bouton, nous allons simplement glisser vers le bas un conteneur contenant toutes ces informations. Créons un nouveau cadre ici, peu importe la taille, il suffit de le faire, je ne sais pas, peut-être 600 pixels. Il suffit de le garder sous 1 400 pixels. Alors nommons ces petits écrans, menu modal/superposition. Nous allons copier la barre supérieure, nous en aurons besoin. Appliquons également une mise en page automatique à ce cadre pour qu' il soit réglé sur le contenu Hug. Supprimons l'espacement là. Alors, que doit-on afficher ? Eh bien, nous en avons essentiellement besoin. Nous avons besoin des icônes sociales , alors commençons par celles-ci. Nous avons également besoin de la navigation dans le menu afin copier et de le coller. La navigation devrait passer en premier, les icônes sociales ensuite, et celles-ci seront à la toute fin. Voici comment nous allons le faire. Tout d'abord, sélectionnons ces trois, je devrais dire et « Maj A » pour créer un autre cadre. Ajoutons un espacement de 96 pixels entre eux. Réglons le rembourrage à 64, quelque chose comme ça. Définissons le redimensionnement de cet élément sur Remplir le conteneur. Ensuite, sélectionnons le Menu, passons sa direction à verticale et définissons celui-ci sur Remplir le conteneur. Ensuite, sélectionnons ces icônes. En fait, parce que nous concevons ici pour de petits écrans où vous utiliserez probablement votre doigt pour taper sur des éléments, augmentons la taille des icônes à 32 par 32. Ensuite, lorsqu'il est sélectionné, définissons le redimensionnement sur Remplir le conteneur. Modifions la distribution en Espace entre pour qu'elles soient joliment affichées avec une quantité égale d'espace entre eux. Enfin, sélectionnons ce bit rendons-le aussi vertical, 32 pixels ont l'air plutôt bien , réglez-le sur Remplir le conteneur, et ça devrait être tout. N'oublions pas de changer l'icône ici donc au lieu de l'icône de menu, affichons un x. Revenons à la configuration de notre icône, voyons, est-ce que j'ai un x ici à fermer ? Nous devrions et nous le faisons. Nous allons prendre ce x ici et nous le collerons. Assurez-vous que notre couleur est noire et qu'elle soit un peu plus petite que l'icône du menu, augmentons légèrement sa taille à 40 pixels, exactement comme ça. Supprimons cela et je pense que nous devrions être prêts à partir. Testons la réactivité si nous redimensionnons cela, non, quelque chose ne va pas. Cette option doit être définie sur Remplir le conteneur. Maintenant, il s'affiche correctement. Voyons voir, ils doivent également être définis sur Remplir le conteneur, ainsi que le cadre parent. Maintenant, ils devraient également redimensionner, mais ils ne le font pas, que se passe-t-il ici ? Pourquoi ne sont-ils pas redimensionnés ? Voyons, Frame 27, 64 pixels, conteneur de remplissage, donc c'est correct. Il s'agit du cadre 3 et il est défini sur Remplir le conteneur. Nous avons un cadre supplémentaire à l'intérieur, alors définissons ce conteneur de remplissage. C'est bien. Maintenant, tout devrait ressembler qu'il est censé le faire. C'est le menu de superposition, il contient des informations très importantes pour la convivialité de notre site Web comme la navigation. Il n'est accessible que sur petits écrans lorsque nous cliquons sur l'icône Menu. C'est en fait quelque chose que beaucoup de gens négligent lorsqu'ils conçoivent, ils vont simplement mettre cette icône Menu ici et ils vont envoyer leur design au développeur, mais le développeur ne sait pas ce qui se passe lorsque je clique sur cette icône Menu, car si vous n'avez pas conçu le modèle, le menu de superposition, quel que soit le nom que vous voulez appeler, le développeur ne sait pas quoi y mettre . ou à quoi cela devrait ressembler. Ainsi, lorsque vous créez des versions réactives pour votre site Web et que vous gérez les petits écrans, assurez-vous que vous concevez également tous les éléments susceptibles d'apparaître après une interaction utilisateur tels que en cliquant sur un bouton, cela ouvrira-t-il une sorte d'éléments, une fenêtre, un modal ? Si c'est le cas, assurez-vous que votre conception en tient compte. Faisons ensuite un dernier récapitulatif pour voir où nous avons commencé et où nous nous sommes retrouvés. Nous avons commencé par le cadre filaire. n'est qu'une représentation de faible fidélité du design. Ensuite, nous avons commencé le processus de conception en ajoutant de la typographie, quelques couleurs, puis nous avons créé le design final pour les grands écrans, c'est celui que vous pouvez voir ici. Bien sûr, nous avons dû prendre en compte les écrans plus petits et moyens. Sur chacun de ces éléments, nous avons apporté divers changements. Nous avons déplacé des éléments, nous les avons réduits, nous avons modifié la taille des polices. Nous sommes passés de deux colonnes à une colonne. Nous sommes passés des mises en page horizontales aux mises en page verticales, etc. Ce faisant, nous veillons à ce que notre design parfait sur toutes les tailles d'écran. Félicitations, je suppose que vous avez également terminé le design et que vous avez maintenant une conception complète du site Web de restaurant d'une page avec toutes les adaptations nécessaires aux petits et moyens écrans. travail est bien fait et comme je le disais, le voyage a été long, mais j'espère aussi très instructif pour vous et que vous avez appris quelque chose d'utile. Maintenant, veuillez consulter la leçon de conclusion pour connaître mes réflexions finales et aussi une annonce qui pourrait vous intéresser. Je vous y verrai. 29. La conclusion épique: Vous avez terminé le cours, braves félicitations et merci beaucoup d'avoir eu la patience de suivre 28 leçons. Maintenant, vous vous demandez peut-être ce que vous devriez faire ensuite. Tout d'abord, vous devriez travailler sur le projet de classe. Si vous avez travaillé à mes côtés que vous regardez le cours, c'est génial. Mais si ce n'est pas le cas, je pense que vous devriez vraiment faire les projets de classe, alors regardez-le nouveau et essayez de suivre mon exemple, pour ainsi dire. Si je m'occupe d'une autre section de la conception, allez-y et faites-le aussi jusqu'à ce que vous ayez pris le coup et vous serez beaucoup plus à l' aise de travailler dans Figma. L'idée ici est de simplement s'entraîner. Deuxièmement, je vous encourage à publier votre design dans la galerie de projets de classe. Comme vous pouvez le constater dans mes autres cours de design Figma, de nombreux étudiants ont soumis leur travail dans la galerie du projet et j'ai offert des commentaires à tous ceux qui le voulaient. Je pense que c'est une excellente façon d' apprendre parce que vous vous entraînez et vous savez immédiatement ce que vous pouvez améliorer. Il y a également eu des projets qui nécessitaient que très peu ou pas de commentaires de ma part. Ils étaient très bons et je ne parle pas de copies exactes de mon travail. Je fais référence à des projets basés sur mon travail, mais ils avaient leur propre style ce qui m'a rendu très heureux de voir. Ils m'ont également montré une façon différente de voir un projet comme celui-ci, ce qui était fantastique pour moi en tant qu'instructeur. Je vous recommande de faire de même. Allez-y et publiez votre projet, même si vous n'avez pas l' impression qu'il est assez bon, même si vous n'êtes qu'un débutant parce que nous sommes tous débutants à un moment donné. Maintenant, j'aimerais vous inviter à consulter mes autres cours ici sur Skillshare et au moment de cet enregistrement, j'ai publié un autre cours de design Figma. Il est similaire à celui-ci mais plus court, et il couvre également un type de design différent. Vous pouvez créer une page de destination pour être plus précise. J'ai utilisé un flux de travail légèrement différent sur celui-ci donc si vous souhaitez explorer plus d'options sur la façon de travailler plus efficacement, vous pourriez également consulter cette classe. outre, selon le moment où vous regardez cette vidéo, j'ai peut-être encore plus de cours publiés sur Skillshare alors assurez-vous de consulter mon profil pour voir tout ce que j'ai publié. Maintenant, pendant ce cours, je vous ai un peu taquiné à propos d'une annonce que j' allais faire dans la conclusion, alors voilà. Mon prochain cours de Skillshare portera sur le codage du site Web du restaurant nichoir que nous avons conçu dans cette classe. Ce cours porte sur la conception. Le prochain portera sur le codage de cette conception à l'aide de HTML, CSS et JavaScript. Cool. J'espère que vous êtes aussi enthousiaste que moi par le nouveau cours et je partagerai plus de détails fur et à mesure que je me rapprocherai de l'achever. Assurez-vous de me suivre ici sur Skillshare ainsi que sur mes réseaux sociaux. Cela dit, il est temps de vous remercier beaucoup d'avoir regardé ce cours et j'ai hâte de vous voir dans le prochain cours. Prenez soin de vous et soyez en sécurité. Je suis déjà en train de me déconnecter.