Comment concevoir et prototyper un en-tête de site Web réactif dans Figma (étape par étape)

1. Bienvenue en cours: L'en-tête du site Web est l'une des premières choses que les gens voient lorsqu'ils arrivent sur un site. C'est là qu'ils trouvent votre logo, votre navigation principale et souvent l' appel à l'action le plus important. C'est également l'un de ces éléments chaque designer doit créer à un moment donné, et c'est exactement ce que nous allons faire dans ce court cours. Bienvenue à tous. Je m'appelle Adi. Et aujourd'hui, nous concevons et prototypons un en-tête de site Web réactif qui a une belle apparence et fonctionne parfaitement sur toutes les tailles d'écran. Nous aborderons les meilleures pratiques, différentes mises en page pour plusieurs points d'arrêt et en utilisant la mise en page automatique pour que tout s'adapte parfaitement Nous utiliserons également Figma make pour créer un prototype interactif de l'en-tête Et pour notre appel à l'action, j'utiliserai le bouton intelligent réutilisable de l'un de mes cours précédents. Donc, si vous voulez apprendre à le créer à partir de zéro, il y a un lien pour vous dans la description du cours. Vous n'avez pas besoin de compétences avancées en Figma pour cela, un nouveau fichier, environ 15 minutes de votre temps, et nous le créerons étape par étape Bien entendu, il existe également un projet de classe, afin que vous puissiez mettre ces idées en pratique. Ouvrons donc Figma et commençons. 2. Comprendre les en-têtes efficaces: Avant de commencer à concevoir notre propre en-tête, examinons rapidement quelques exemples concrets et les quatre principes clés qui rendent un en-tête à la fois beau et efficace. Tout d'abord, une image de marque claire. Dans un bon en-tête, le logo est immédiatement visible, généralement dans le coin supérieur gauche. Et ce n'est pas une simple tradition, c'est ce que les utilisateurs attendent et cela les aide à reconnaître instantanément la marque. Ensuite, une navigation simple. Vous devez toujours garder le nombre de liens gérable. Regroupez les éléments connexes et assurez-vous que le texte est clair et facile à lire. Trop de liens et l' en-tête semble encombré, trop peu nombreux, et les visiteurs ont du mal à trouver ce dont ils ont besoin L'objectif est de trouver un équilibre entre les deux. Ensuite, nous avons un appel fort, quelque chose qui se démarque visuellement, souvent un bouton de couleur contrastante. C'est cet élément qui incite les gens à passer à l'étape suivante, qu' il s'agisse de s'inscrire, faire un achat ou de vous contacter. Enfin, un design adapté aux mobiles. Un en-tête doit fonctionner parfaitement sur toutes les tailles d'écran. Sur mobile, cela implique souvent de passer à un menu de hamburgers et d'ajuster l'espacement pour que le design reste épuré et fonctionnel Si vous gardez ces quatre principes à l'esprit, marque claire, une navigation simple , une action à froid puissante et un design adapté aux mobiles, vous serez sur la bonne voie pour créer des en-têtes non seulement esthétiques mais aussi fonctionnels Génial. Prenons donc ces idées et commençons à créer notre propre en-tête réactif dans Figma 3. Concevoir l'en-tête du site Web pour le desktop: Il s'agit du fichier de départ que vous pouvez télécharger en cliquant sur les liens figurant dans la description de la classe Il contient des instructions sur ce dont vous avez besoin pour effectuer certaines ressources du projet. Il s'agit essentiellement d'une liste de composants que vous pouvez utiliser. Ils sont principalement empruntés à mon cours précédent sur la création du composant SMR. Et j'ai apporté quelques petits ajustements au composant du bouton. En gros, j'ai changé la variante secondaire, et j'ai également ajouté deux autres variantes qui sont essentiellement des versions plus petites des deux premières. Et puis nous avons un logo factice que nous pouvons utiliser dans notre design J'ai également inclus des mises en page prédéfinies. Nous avons une disposition pour ordinateur de bureau d'une largeur d' environ 1 400 pixels, puis deux pour appareils mobiles d' une largeur de 400 pixels Et dans la version de bureau, nous avons le contenu que nous devons inclure. Alors allons-y directement. Je vais commencer par remplacer le logo. Je vais donc copier ce composant. Je vais sélectionner l' espace réservé ici et appuyer sur Control Shift R pour le remplacer Ou si vous êtes sur Mac, vous pouvez utiliser Command Shift R. Et tout de suite, je vais passer à la section de mise en page. Je vais vérifier le rapport hauteur/largeur du verrouillage, et je vais changer la hauteur à 48 pixels. Ensuite, nous avons ces liens. Donc, comme nous concevons un en-tête très simple, très direct, nous allons garder notre typographie agréable et simple, très lisible, et nous allons utiliser Inter Par défaut, ils utilisent 16 pixels interréguliers. Nous allons changer un peu les choses. Je vais utiliser Medium parce que je veux ces liens ressortent un peu plus, et je vais réduire la taille de police à 14 pixels et utiliser une hauteur de ligne de 140 % Une fois ceux-ci sélectionnés, je vais appuyer sur Shift A pour les ajouter à leur propre cadre de mise en page automatique. Refaisons-le, Shift A, et je vais définir 32 pixels comme écart entre les éléments, juste comme ça. Et je vais m' assurer que tout est aligné au milieu, comme ça. Enfin, sélectionnons l'espace réservé pour démarrer l'essai gratuit. Nous devons le remplacer par un bouton. Je vais utiliser la petite variante principale de ce composant de bouton. Copiez donc à nouveau ce contrôle Shift R pour le remplacer. Et ici, je vais changer le libellé du bouton pour démarrer l'essai gratuit, et je vais utiliser une flèche vers la droite comme icône. Maintenant, prenons ces trois éléments et appuyons sur Shift A pour les ajouter à leur propre cadre de mise en page automatique. Ensuite, dans l'inspecteur, je vais tout aligner au milieu, comme ça, et j'aimerais que cet en-tête couvre toute la largeur disponible de mon cadre parent. De plus, je voulais pouvoir adapter sa taille, changer sa taille en fonction de la taille de son parent. Ainsi, lorsque le parent devient plus petit, l'en-tête devient également plus petit. Nous pouvons le faire avec la mise en page automatique. Je vais donc sélectionner le cadre du bureau, et je vais y ajouter une mise en page automatique comme ceci. Et je vais juste réinitialiser ces paramètres par défaut, l'espacement, le rembourrage Je vais tout mettre à zéro. Maintenant que mon bureau est sélectionné, je vais simplement augmenter sa hauteur pour que nous puissions voir ce qui se passe ici. Et je vais sélectionner mon entête. Et je vais m'assurer que la taille ici est définie pour remplir le conteneur Maintenant, changeons quelques points ici. Tout d'abord, j'aimerais que ma navigation et mon bouton soient regroupés. En fait, je vais prendre le bouton, le couper, donc contrôler ou commander X, puis sélectionner l'un des éléments la navigation et le coller dedans. Cela va essentiellement déplacer cet élément dans mon cadre de navigation auquel la mise en page automatique est appliquée. Et cela garantit que j' ai le même espacement de 32 pixels entre le menu et l'action appelée Ensuite, je vais sélectionner l' espace entre les éléments ici, et je vais le changer d' valeur fixe à une valeur automatique comme ça. Et cela va me permettre maintenant de redimensionner le bureau. Encadrez, et l'en-tête sera redimensionné en même temps. Faisons quelques retouches finales. Ajoutons de l'espace tout autour de l'en-tête. Je vais donc ajouter 64 pixels de rembourrage horizontal, 20 pixels, rembourrage vertical Et rendons cela un peu plus visible. Donc, dans la zone de remplissage, je vais ajouter une couleur de remplissage blanche. Et je vais également ajouter un trait. Alors laisse-moi te montrer ça. Un trait qui sera E 4, e6e7, et je ne vais l' appliquer qu'au bas Cela créera donc une belle séparation entre le fond de notre page, qui est gris très clair, et l'en-tête, qui est juste blanc. Enfin, sélectionnez l'en-tête, et je vais remplacer le noir pur que j'utilise pour le texte et le logo par 27292 A, qui est un gris plus foncé Et c'est là que se trouve notre design d'en-tête terminé pour le bureau. Maintenant, la raison pour laquelle nous devons rendre un en-tête réactif est que tout le monde ne navigue sur Internet sur un écran de bureau de la même taille Donc, si les gens naviguent sur un appareil mobile doté d'un écran plus petit , cela finira par se produire. Notre écran va devenir de plus en plus petit les éléments vont commencer à se chevaucher et les mises en page vont commencer à C'est pourquoi nous devons proposer une mise en page différente pour les petits écrans. C'est ce que nous allons faire dans la prochaine leçon. 4. Concevoir l'en-tête du site web pour les tablettes et les téléphones mobiles: Permettez-moi de commencer par vous montrer l'un des moyens les plus simples de créer un en-tête réactif ou une navigation réactive d'ailleurs. Nous sommes donc sur le site cleanshot.com, et ils ont un en-tête très simple, très similaire au nôtre, avec un logo, une navigation, puis une action appelée Regardez donc ce qui se passe lorsque nous le redimensionnons. Hein ? La navigation et l'action à froid disparaissent, et à la place, nous avons ce bouton de menu qui, si nous cliquons, nous montrera essentiellement le menu qui vient de disparaître. Nous pouvons donc cliquer dessus pour le masquer . Nous pouvons cliquer pour l'afficher. Et lorsque nous visionnons cela sur un écran plus grand, nous obtenons une expérience complète. C'est donc ce que nous devons créer en gros. Maintenant, pour en revenir à Figma, commençons par copier notre élément d' en-tête et passer au cadre fermé mobile, une largeur de 400 pixels Et cela concerne en quelque sorte le domaine des écrans mobiles en termes de largeur d'écran. Il existe, bien sûr, des écrans plus grands que cela, certains sont encore plus petits, mais 400 pixels, c'est une bonne quantité. Donc, si nous le collons, vous remarquerez que les choses commencent à se chevaucher. C'est évidemment ce que nous ne voulons pas. Sélectionnons donc ce cadre contenant la navigation et l'action culte, et nous allons simplement le supprimer. Maintenant, je vais revenir à mes boutons. Je vais prendre l'un de ces petits boutons secondaires, copier, sélectionner l'en-tête, coller. Ça va le coller dedans. Et je vais juste remplacer l'icône ici par une icône de menu hamburger Et je vais sélectionner l' étiquette et appuyer sur Supprimer. De plus, je vais sélectionner ce bouton, et je vais régler sa largeur à 44 pixels, exactement la même que la hauteur, et je vais changer l'alignement au milieu. Ensuite, sélectionnez l'en-tête, et je vais changer le rembourrage latéral ou horizontal à 24 pixels, car sur mobile, nous devons préserver le plus d'espace possible Nous devons donc rendre les choses un peu plus compactes que sur ordinateur de bureau. Je vais également changer le rembourrage vertical à 16 pixels comme ça L'idée est sur mobile, cet élément est remplacé par ce bouton. Ainsi, lorsque nous appuyons sur ce bouton, nous devons afficher cette navigation et cette action appelée. Faisons-le dans le cadre suivant. Copiez-le, collez-le dedans. Lorsque vous appuyez ou cliquez sur le bouton ici, nous voulons remplacer l'icône du menu par une icône de fermeture , comme cela Parce que nous voulons dire aux utilisateurs que, d'accord, vous avez appuyé sur ce bouton, l' action est réussie, et que nous allons également modifier son contenu afin qu'ils sachent que la prochaine fois qu'ils appuieront dessus, ils fermeront ce menu Alors maintenant, créons le véritable menu déroulant, n'est-ce pas ? Nous allons donc le copier. Nous allons le coller, et nous allons y apporter quelques modifications. Tout d'abord, nous allons passer à la verticale, afin que tous les éléments soient affichés verticalement, comme ça, puis je vais ajouter une couleur de remplissage blanche. Je vais régler, laissez-moi faire bouger les choses un peu. Je vais définir la largeur pour remplir le conteneur, manière à ce qu'elle couvre toute la largeur du cadre parent, et nous allons tout aligner en haut et au milieu comme ça. Enfin, je vais ajouter 24 pixels, rembourrage horizontal et 32 pixels D'un rembourrage vertical donc en haut et en bas. Je vais également copier la couleur du trait que j'ai utilisée ici et l'ajouter également à cet élément. Et nous allons nous assurer que nous ne l' appliquons au bas de l'élément, comme ça. Voici donc le flux, en gros. Nous partons du bureau où notre en-tête ressemble à ceci. Lorsque le bureau devient trop petit pour accueillir tous ces éléments, nous passons à la vue mobile où ce menu est initialement masqué, mais nous pouvons y accéder en cliquant ou en appuyant sur le bouton du menu. C'est cool et du point de vue du design, notre travail est en quelque sorte terminé, mais nous pouvons aller encore plus loin et créer un prototype fonctionnel de ce projet. Je vais vous montrer comment faire dans la prochaine leçon. 5. Prototypage du menu mobile avec Figma Make: Maintenant que nous avons créé notre mise en page d'en-tête mobile, rendons-la interactive et nous allons prototyper le menu Hamburger, afin qu'il s'ouvre et se ferme à l'aide de Figma Et au cas où vous ne le sauriez pas, Figma make est un nouvel outil AI Power intégré FigMA qui permet aux utilisateurs de créer prototypes fonctionnels, des applications Web et des sites Web à partir d'instructions textuelles et de designs Figma existants Et il est très facile de démarrer avec Figma Make. Il vous suffit de cliquer sur l'icône Figma ici, aller dans Fichier Nouveau et de choisir M. Et voilà, vous êtes prêt à partir La toute première chose que nous voulons faire est de copier-coller les cadres Figma dans make afin que l'IA sache quoi créer Nous allons donc faire des allers-retours. Sélectionnez donc le bureau, copiez-le, puis allez ici en bas et collez-le, et nous ferons de même pour le mobile. Alors copiez-le, collez-le dedans, puis le mobile s'ouvre, copiez-le, collez-le dedans. Ensuite, tu dois décrire ton idée. Que voulez-vous que l' IA en fasse ? Je vais donc dire de créer un type P de l'en-tête réactif Et je vais juste appuyer sur Entrée, et c'est tout. J'ai donné l'ordre à l'IA. Maintenant, c'est réfléchir. Il raisonne, vous savez, pour déterminer ce qu'il doit faire. Et bientôt, il va commencer à se construire. Alors voilà. Cela a créé notre en-tête ici. J'ai ajouté ici du contenu supplémentaire dont, vous savez, nous pouvons toujours nous débarrasser. Mais en gros, ce qui nous intéresse , c'est la fonctionnalité, n'est-ce pas ? Je vais donc ouvrir aperçu mobile, et comme vous pouvez le voir, lorsque je le redimensionne, oui, quand j'arrive à peu près à ce point, il passe à l'affichage mobile Et lorsque nous cliquons sur cette icône, elle me montre le design mobile que j'ai créé. Cliquez dessus pour fermer, redimensionner cette sauvegarde, et si vous souhaitez apporter des modifications à un moment donné, vous pouvez demander des modifications à l'IA Par exemple, je peux vous dire qu'il passe plus tôt à l'affichage mobile. J'entre, et maintenant il fait la même chose. Encore une fois, cela va changer certaines choses dans le code, et il fera essentiellement ce que vous demandez habituellement. D'accord, la version deux est maintenant terminée, et lorsque nous redimensionnons, vous pouvez voir que le changement se produit beaucoup plus tôt, qui est exactement ce que je voulais, et c'est toujours un prototype entièrement fonctionnel D'accord. Maintenant c'est ton tour. Votre projet consiste à concevoir votre propre en-tête de site Web réactif dans FIGMA Ou si tu préfères, tu peux recréer celui que j'ai construit dans cette classe Pour le bouton CTA, vous pouvez créer le vôtre ou utiliser celui que j'ai fourni Si vous êtes curieux de savoir comment je crée ce bouton intelligent à partir de zéro, consultez mon autre cours Skillshare Il y a un lien pour vous dans la description, ou vous pouvez parcourir mon profil pour voir tous mes cours de design. Vous avez terminé, veuillez partager design de votre en-tête dans la galerie de projets de classe. J'adorerais voir ce que tu trouveras. OK, merci d'avoir regardé. Bonne conception, je vous verrai dans le prochain cours. Au revoir pour le moment.