Concevoir avec Figma : page d'accueil pour application mobile

1. Bienvenue au cours: Avez-vous déjà voulu concevoir une page web, mais vous ne saviez pas par où commencer ? ou peut-être que vous avez commencé, mais vous êtes resté bloqué à un moment donné parce que vous ne saviez pas comment choisir les bonnes couleurs, polices de caractères ou comment créer une bonne mise en page. C' est ce que tu apprendras dans cette classe. Mais hé, si on se rencontre, je m'appelle « ADI PURDILA » et je suis un web designer de Roumanie. Je travaillais dans ce domaine depuis plus de dix ans maintenant, et j'enseigne aussi depuis quelques années. web design prend la plupart de mon temps, mais j'adore m'en éloigner de temps en temps et travailler dans un jardin, avec ma famille, ou faire du travail du bois. Ce que j'aime, le clavier et la souris, je suis aussi un type très pratique. Maintenant, ensemble, nous allons concevoir une page de destination pour une application de budgétisation. Nous commencerons à partir d'un dossier de projet et d'un cadre métallique. Dans chaque leçon, je vais vous montrer comment aborder une étape différente de ce processus. Commencera par définir les couleurs, la typographie et l'imagerie. Ensuite, nous allons concevoir dans une section de la page à la fois. Donc, à la ligne d'arrivée se terminera avec cette page de destination complète avec des sections pour les fonctionnalités, la galerie, les témoignages et les prix. Pour ce cours, nous utiliserons F-I-G-M-A. C' est gratuit et multi-plateforme, sorte que vous pouvez l'utiliser sur Windows et Mac OS. Et vous pouvez l'ouvrir directement dans votre navigateur. En prenant ce cours, je vous garantis deux choses. Numéro un, vous apprendrez à travailler dans F-I-G-M-A, et numéro deux, vous apprendrez un processus efficace de conception d'une page Web basée sur une demande du client. Ce cours est destiné aux débutants complets, vous n'avez pas besoin d'une expérience de conception préalable, et je vous guènerai à chaque étape du chemin. Alors commençons. 2. Votre projet de cours: Bonjour et bienvenue à la première leçon de cette classe où je vais vous donner un regard plus approfondi sur ce que nous allons créer.Nous allons également passer en revue les projets de classe afin que vous puissiez voir ce que vous devez créer lors de la prise de cette classe.Vous apprendrez également pourquoi je a choisi ce projet, comment il pourrait être bénéfique pour vous et aussi ce que vous devez faire pour commencer. Commençons .Ceci est la dernière page de destination qui sera création.Comme je disais dans la vidéo d'introduction, ceci est pour une application de budget mobile. Maintenant, cela est bien sûr, un produit fictif.Ces images ici sont juste des espaces réservés, il des images de démonstration prises à partir d'un kit d'interface utilisateur. Mais laissez-moi vous guider rapidement à travers ce que nous avons. Tout en haut, nous commençons par une zone de héros qui a une sélection de captures d'écran de l'application, ainsi que notre navigation et notre contenu. faisant défiler vers le bas, nous trouvons la première section, quatre entités, où chaque entité est affichée de cette manière de grille. Ensuite, nous avons une deuxième section, quatre caractéristiques. Aller à l'avant. Nous avons un petit appel à l'action.Cela est suivi par la troisième section quatre fonctionnalités.Ensuite, nous avons une galerie de captures d'écran qui est suivie par des témoignages. Enfin, nous avons l'appel principal à l'action et la table de tarification.À la toute fin, nous avons un pied de page. Cela pourrait ressembler à beaucoup de travail.Mais nous allons prendre les choses étape par étape, va décomposer cette page en petits morceaux gérables. Nous ferons une section à la fois. Vous verrez que ce est vraiment pas si compliqué de créer quelque chose comme ça. Très bien, donc maintenant pour le projet de classe, votre tâche sera de créer une page de destination à partir de cette image filaire. Je vais te montrer ça dans un peu. C' est la même image filaire que je commence. Vous aurez besoin de faire la même chose pour finir avec ça. Maintenant, votre produit final n'a pas à ressembler exactement au mien. Je vais te montrer une façon de le faire. Évidemment, vous pouvez suivre exactement ce que je fais et finir avec un résultat identique. C' est tout à fait correct. Mais je vous encourage à expérimenter un peu et à mettre votre propre tour sur les choses. Par exemple, vous pouvez utiliser un jeu de couleurs différent ou utiliser un autre jeu de polices de caractères, peut-être organiser les éléments différemment dans la page. Je vais vous donner tous les outils dont vous avez besoin pour le faire et je vais vous montrer comment utiliser ces outils.Mais à la fin, il est vraiment à vous de déterminer comment vous voulez que ce résultat final ressemble.Maintenant, laissez-moi vous montrer comment vous pouvez faire Tout d'abord, j'ai mis sur pied un kit de démarrage de page de destination. Vous devrez d'abord télécharger ce fichier. À l'intérieur des kits de démarrage, nous avons quelques actifs de marque qui ne sont que deux versions du logo réservé que nous allons utiliser. Nous avons aussi quelques images de démonstration que nous allons utiliser. Ensuite, nous avons un mémoire de projet. Le mémoire de projet est un document PDF et cela ressemble à quelque chose que vous recevrez d'un client, n'est-ce pas ? Nos clients en tant que fictif, il s'appelle Numm Inc.. Dans le dossier de projet, nous avons quelques informations sur le client et l'entreprise. Nous avons les slogans que nous devons utiliser pour ce projet. J' ai supposé que l'équipe marketing du client a préparé ce document et qu'ils nous ont donné tout ce dont nous avons besoin. Quel genre de slogans utiliser, quel genre de titres, sous-titres, texte de bouton utiliser pour l'appel à des actions. Tout est ici. Ensuite, ils ont actuellement mis en place certaines caractéristiques du produit pour nous. Vous pouvez voir que les entités sont catégorisées. Ensuite, nous avons des caractéristiques individuelles. Nous pouvons voir le titre de la fonction, la description et ainsi de suite. Tout est ici. Ensuite, nous avons des informations de prix pour le produit, quelques témoignages, puis la structure de page proposée. Enfin, à la fin, quelques considérations de conception. Quel genre de couleurs le client aime-t-il ? Quel genre de style pouvons-nous utiliser pour le design ? En outre, quel type de sites Web le client aime-t-il ? Vous pouvez voir qu'ils nous ont envoyé trois exemples ici. C' est, encore une fois, généralement, le type de document que vous recevrez d'un client lors d'un projet comme celui-ci. À tout moment, il peut revenir à ce mémoire de projet et apprendre tous les détails dont vous avez besoin. Maintenant, sur la base de ce dossier de projet, je suis allé de l'avant et j'ai conçu ce cadre filaire. Un cadre filaire est essentiellement un croquis. Il s'agit d'une représentation de faible fidélité du produit final. Tu n'as pas à prendre ça littéralement. Une trame filaire sert juste de point de départ, comme une ligne directrice. Il est là pour vous montrer quel type de contenu vous devez ajouter à votre page. Cela ne signifie pas que la mise en page que nous avons utilisée dans le cadre filaire doit être dans le produit final. Par exemple, la mise en page de cette section héros me montre juste une image à droite et le contenu à gauche. Mais si nous regardons le produit final, nous pouvons voir que nous avons une image à droite et le contenu à gauche, mais cela ne ressemble à rien de tel. Regardez cette section, c'est pour les fonctionnalités. Dans le filaire, j'imagine que nous avons peut-être besoin d' avoir une image ici sur la gauche, puis les fonctionnalités sur la droite, mais sur le résultat final, nous n'avons pas cette image sur la gauche, n'importe où, nous avons juste une grille de icônes. Qu' en est-il de l'autre section pour les fonctionnalités ? Voici à quoi il ressemble dans le filaire, et voici à quoi il ressemble ici. Ici, j'ai ajouté une image qui n'était pas ici dans le filaire, et j'ai également choisi d'afficher ces fonctionnalités comme ça. J' espère que vous comprenez ce que j'essaie de dire ici. Utilisez le filaire comme guide pour le contenu que vous devez utiliser, et non pour la mise en page réelle. Dans le kit de démarrage, vous trouverez également un fichier resources.pdf. Ici, vous trouverez une liste complète des ressources utilisées dans le design comme le logo, les images, les icônes, les illustrations, ainsi que quelques liens utiles. Chaque fois que vous ne pouvez pas trouver une ressource que j'utilise pour m' assurer de revenir à ce document et vous y trouverez certainement un lien. Maintenant, comment commencer et mettre tout en place pour les leçons principales ? Eh bien, tout d'abord, vous devez télécharger ce kit de démarrage. Vous y trouverez un lien dans la description de la classe. Après cela, allez-y et créez un compte Figma. Allez sur figma.com et si vous n'avez pas de compte, cliquez sur S'inscrire et suivez les instructions qui s'y trouvent. Si vous avez un compte, alors allez-y et connectez-vous. Étape numéro 3 est d'ouvrir le kit de démarrage ou le fichier Figma de démarrage que j'ai fourni. Laissez-moi vous montrer à quoi ça ressemble. C'est un fichier Figma relativement vierge avec quatre pages que j'ai faites pour vous. La première page est le filaire, et vous pouvez l'utiliser pour vérifier rapidement ce que vous faites. La deuxième page est pour les couleurs, et je vais vous montrer comment modifier ceci une fois que nous arriverons à la leçon suivante. La troisième page concerne la typographie, et je suis allé de l'avant et j'ai créé ces cadres pour vous afin que vous sachiez ce que vous devez remplir, puis nous avons une page pour la conception principale. C' est là que nous allons créer la conception réelle de la page de destination. Allez-y et ouvrez ce fichier et vous pouvez commencer à y travailler directement. Maintenant, la quatrième et dernière étape est en fait facultative, vous pouvez télécharger Figma pour le bureau. Comme vous pouvez le voir en ce moment, j'ai Figma ouvert dans le navigateur et vous pouvez travailler comme ça, pas de problème, le résultat est exactement le même. Mais si c'est plus confortable pour vous, vous pouvez télécharger Figma pour ordinateur de bureau. Vous pouvez le faire en allant sur figma.com/downloads et sous Desktop App, choisissez celui que vous voulez pour Mac OS ou Windows. Après avoir fait tout ça, vous êtes prêt à partir. Maintenant, vous me demandez peut-être, Adi, pourquoi ce projet, pourquoi une page d'accueil ? La réponse à cela est très simple. Pour ce cours, je voulais que vous appreniez, numéro 1, comment travailler dans Figma, et le numéro 2, le processus de passage d'une demande client à un produit fini. Une page de destination est assez simple. C' est juste une page, vous n'avez pas à vous soucier des éléments complexes que vous trouverez normalement sur un site Web, et c'est rapide et facile à faire. Je voulais que ce projet ressemble à un scénario de la vie réelle. Vous commencez à partir d'un bref de projet, vous commencez à partir d'un ensemble de filaires, sont des choses que vous auriez normalement ou que vous utiliseriez normalement lorsque vous interagissez avec votre client. Les clients vous donnent toutes les informations dont vous avez besoin dans le dossier de projet, et sur la base de cela, vous construisez le filaire et en fonction du filaire, vous concevez la page réelle. C' est aussi proche d'un projet de la vie réelle que vous pouvez obtenir dans une classe comme celle-ci. Espérons que vous serez en mesure d'utiliser les informations que vous avez apprises ici et de les appliquer dans des projets futurs. Maintenant, alors que vous prenez ce cours, je vous encourage fortement à publier vos résultats dans la galerie de projets. Je veux voir votre résultat. Je veux voir les projets que tu fais. Comme je le disais, j'aimerais que vous expérimentiez et que vous ajoutiez votre propre tour sur les choses. C' est très bien si vous suivez exactement ce que je fais, allez-y et postez ça. Mais si vous voulez, n'hésitez pas à ajouter vos propres couleurs, vos propres polices de caractères, laissez-moi voir votre propre vision pour créer cette page de destination basée sur ce filaire. Alors allez-y et postez cela dans la galerie du projet et je vous donnerai vos commentaires si vous le souhaitez. J' adorerais voir vos résultats. Postez également dans l'onglet discussion si vous avez des questions ou des commentaires, peu importe la façon dont vous pensez qu'ils pourraient être simples, s'il y a quelque chose que vous voulez me poser, allez-y et faites-le. Je répondrai à chacune de vos questions. D' accord. Voici ce que vous devez faire à ce stade. Allez-y et installez-vous, comme je vous l'ai montré précédemment. Téléchargez les kits de démarrage, créez un compte Figma, ouvrez le fichier de démarrage Figma et éventuellement installez Figma sur votre ordinateur. Une fois que vous faites cela, vous serez bien d'aller pour les leçons principales. Dans la première leçon principale, sera la recherche du schéma de couleurs. Je vais vous montrer quelques outils qui vous aideront avec cela. C' est à venir ensuite. 3. Scheme de couleur: Bienvenue dans la classe. Dans cette leçon, nous allons créer le jeu de couleurs pour notre page d'apprentissage. Maintenant, c'est une étape cruciale dans tout processus de conception, nous devons donc y prêter une attention particulière. Il y a aussi quelques outils que j'utilise tout le temps pour simplifier cette partie et je vais vous montrer ces outils aussi. Prêt ? Allons-y. Commençons par ouvrir notre kit de démarrage dans Figma et aller à l'onglet couleurs, page couleurs. Ici, vous pouvez voir que j'ai créé pour vous quatre cadres. Si vous ne savez pas ce que sont les cadres, eh bien, c'est un cadre fondamentalement. C' est une façon d'organiser le contenu sur le Canvas. Mais nous allons parler de cadres dans juste un peu en ce moment nous allons nous concentrer sur les couleurs. Chaque fois que vous commencez un projet comme celui-ci. Je vous recommande de diviser vos couleurs dans ces quatre catégories : primaire, secondaire, tertiaire et gris. Les couleurs primaires seront celles que vous utilisez le plus, et généralement vous les utiliseriez pour les boutons ou les liens. Les couleurs secondaires sont généralement pour certains actes et pièces, et ils doivent travailler harmonieusement avec les couleurs primaires. Les couleurs tertiaires sont celles qui ne sont pas très proéminentes. Vous les utiliseriez peut-être une fois dans une page ou dans certaines situations comme la coloration contextuelle pour un état d'entrée, une erreur, un succès, des informations, des choses comme ça. Dans notre cas, nous utiliserons les couleurs tertiaires, principalement pour les icônes. Puis, enfin, les gris sont principalement utilisés sur le texte. Mais vous pouvez également les utiliser sur d'autres éléments de votre page. Comme peut-être des icônes, des séparateurs, et ainsi de suite. Ce que j'ai ici, c'est une collection de 10 de ces carrés dans chaque catégorie, et chacun est plus léger de 10 pour cent que celui qui l'a précédé. Essentiellement, nous avons la couleur principale et neuf teintes. Si vous ne savez pas ce qu'est une teinte, c'est très simple. Lorsque vous mélangez une couleur avec le blanc, vous obtenez une teinte de cette couleur. Lorsque vous mélangez une couleur avec le noir, vous obtenez une nuance de cette couleur. Une nuance est donc une version plus foncée d'une couleur, une teinte est une version plus claire de la couleur. Je recommande toujours, lors de la définition d'un jeu de couleurs, de créer ces teintes. Vous pouvez également créer des nuances si vous voulez, mais généralement je crée juste des teintes parce que cela me donne des options. Quand je choisis une couleur pour notre design, je pourrais regarder la couleur principale et dire, ok c'est un peu trop intense pour moi peut-être que je vais utiliser une teinte de celui-ci. Peut-être quelque part de cette zone ou de cette zone. Mais l'idée est que je peux les voir et que je peux décider lequel fonctionne le mieux à ce stade. Comment choisissons-nous les couleurs ? D' habitude, tout commence par la marque. Quelles sont les couleurs de la marque que vous concevez pour une utilisation ? Dans notre cas, sous les actifs de la marque, nous pouvons trouver ce logo coloré. Cela le rend vraiment facile pour nous parce que je peux définir deux couleurs primaires à partir d'ici. Je peux définir comme bleu et je peux définir comme violet. Ce que je vais faire, c'est que je vais apporter ce fichier SVG dans Figma simplement en faisant glisser et déposer et vous pouvez voir qu'en sélectionnant l'un de ces composants, sous remplissage, nous trouverons un gradient linéaire. Cliquez dessus, et cela nous donnera nos deux couleurs. Cliquez sur celui-ci, copions sa valeur hexadécimale. Ceci est une représentation de cette couleur et, nous allons sélectionner ce cadre entier, ce groupe entier d'éléments et où il est dit couleurs de sélection, cliquez et coller. C' est l'une des caractéristiques les plus impressionnantes de Figma. Au lieu de sélectionner chaque élément individuellement et de changer sa couleur, lorsque vous sélectionnez plusieurs éléments, il active cette section appelée couleurs de sélection. Vous pouvez changer les couleurs individuellement là-bas, ou dans mon cas, parce que j'utilisais la même couleur, le noir avant, ma sélection vient de me montrer cette couleur noire et en changeant cela, il a changé la couleur de chaque élément de ce groupe. Ne vous inquiétez pas si ça semble un peu bizarre, je vais vous en dire plus à ce sujet pendant que nous progressons dans ce cours. moment, vous pouvez voir que nous avons défini la première couleur primaire, qui est ce bleu. Définissons le second. Revenons à Linéaire, sélectionnons cet élément, copions et puis nous sélectionnerons ce cadre que vous pouvez voir ici. Nous pouvons faire l'une des deux choses, nous pouvons le dupliquer en appuyant sur la commande ou le contrôle D. Commande D si vous êtes sur un Mac ou le contrôle D si vous êtes sur Windows et qui va le dupliquer, il va en faire une copie. Alternativement, vous pouvez le sélectionner et aller à l'édition de menu Figma, dupliquer. Ça va faire exactement la même chose. Ou vous pouvez simplement copier et coller comme vous le feriez normalement. Faisons un peu de place ici. Ensuite, je vais sélectionner ce groupe et je vais coller puis l'autre couleur et maintenant je peux me débarrasser de ce logo. Plutôt cool et juste comme ça, nous avons défini les deux couleurs primaires que nous allons utiliser. Maintenant, qu'en est-il des couleurs secondaires. Déplaçons ça un peu plus haut. Pour les couleurs secondaires, voici ce que je fais habituellement. Je sélectionne ou je copie la valeur de ma couleur principale, puis je passe à Adobe Color. C' est un outil que j'utilise tout le temps et Adobe Color est un outil gratuit, et il me donne la possibilité de créer un jeu de couleurs basé sur une couleur. Sous l'onglet Réaliser, allez de l'avant et collez cette valeur, puis appliquez une règle Harmony à partir du côté gauche . C' est analogique, c'est monochromatique, triade, et gratuit. Habituellement, j'utilise des schémas de couleurs complémentaires parce que tout comme son nom l'indique, les couleurs de cette pastille se complètent, elles créent l'harmonie. Dans ce cas, la première couleur secondaire que je vais utiliser est, cette couleur à la moutarde. Je vais aller de l'avant et copier ça. Je vais revenir ici, sélectionner mon cadre, les coller cette couleur et si je n'aime pas son apparence, c'est tout à fait bien, je n'ai pas à utiliser exactement la même couleur. Je peux l'utiliser comme guide, puis utiliser simplement le curseur pour créer ma propre couleur et juste en choisir une qui me semble mieux. Dans mon cas, je vais utiliser celui-ci FFC700. Maintenant, je veux aussi une couleur secondaire supplémentaire, donc je vais dupliquer ce bit et pour cette couleur, je vais choisir F25C63. Passons maintenant à mes couleurs tertiaires. Déplaçons ça un peu plus haut. Faisons de la place parce que nous allons créer beaucoup de couleurs tertiaires. Pour être plus précis, nous allons en créer sept. Dupliquons ce 2,3,4,5,6,7 en utilisant la même commande de raccourci clavier D parce que je suis sur un Mac et maintenant, je vais juste les remplir avec les couleurs que j'ai choisies. Le premier est 00DAA7. Le suivant est 37c2cc. Suivant est 3a96e8. Le quatrième est 64C9FF. Le cinquième sera 9E76FE. Alors le numéro 6 sera CC37BD. Et puis le dernier sera FFCA64. D' accord. Ce sont les couleurs tertiaires que nous allons utiliser. Maintenant, vous pourriez me demander, où avez-vous eu toutes ces couleurs ? Eh bien, c'est juste une question d'ouvrir le sélecteur de couleurs et d'utiliser les curseurs ici pour déterminer quelle couleur j'aime. Et j'ai juste passé en revue toutes ces choses et j'ai choisi un qui je pensais, fonctionnerait le mieux pour ce projet. Alternativement, voici un autre outil que j'utilise et je pense qu'il est très utile. Ça s'appelle Dribbble Color. Et je suis sûr que vous êtes bien au courant de Dribbble, le site Web où vous pouvez trouver l'inspiration du design. Eh bien, vous pouvez maintenant chercher des couleurs, n'est-ce pas ? Vous pouvez choisir parmi l'une de ces couleurs prédéfinies, ou vous pouvez simplement entrer votre propre valeur. Et cela va vous donner une liste de résultats qui utilisent cette couleur. Et lorsque vous ouvrez l'un de ces clichés Dribbble, vous pouvez également trouver la palette de couleurs qui a été utilisée. D' habitude, je vais ici et j'ai l'inspiration pour les couleurs. Ou je vais sur le site Web d'Adobe Color et je viens de cliquer sur explorer et je regarde les palettes de couleurs de ce site Web ou je les choisis à la main. Maintenant, la raison pour laquelle je suis allé pour tant de couleurs est quelque chose que j'ai lu dans le mémoire de projet. Le client, juste à la fin, sous les considérations de conception, nous a dit que nous devrions le rendre coloré. Et aussi, le schéma de couleurs principal devrait être centré autour de la couleur bleue car il transmet confiance et professionnalisme. Et ils nous ont aussi donné une autre option ici, herbe verte pour la fraîcheur et la nouveauté. Mais l'idée principale est de centrer le schéma de couleurs autour du bleu et aussi le rendre coloré. C' est la raison pour laquelle nous avons choisi tant de couleurs tertiaires parce que nous voulons des options. Enfin, la dernière étape que nous devons aborder ici est de définir les gris. Et ceux-ci seront principalement utilisés pour le texte. Et c'est là qu'avoir plusieurs teintes de la couleur grise principale est très utile car vous pourriez utiliser ce bit pour les en-têtes principaux. Et vous pouvez utiliser ce bit qui est 70 pour cent, ou ce qui est 80 pour cent pour le texte principal. Maintenant, lorsque vous choisissez une couleur grise, voici mon processus très simple. Je crée juste cette forme ici, et je choisis ma couleur principale de marque. Je le colle, puis je duplique cette forme et je la remplit de noir. Et puis j'abaisse l'opacité de cette couleur noire pour dire 90 pour cent. Et je ne sais pas si tu le vois, mais maintenant ce n'est pas totalement noir. Une partie de cette couleur bleue de dessous vient à travers. Maintenant, ce que je fais, c'est que je crée une autre forme. Et j'utilise le sélecteur de couleurs pour échantillonner cette couleur. Et ça me donne mon gris principal. Et si je n'aime pas son apparence, je peux revenir en arrière, changer l'opacité du noir. Et c'est un peu trop, peut-être 88 pour cent, ou peut-être que je voulais être un peu plus sombre, peut-être 95 pour cent. Et puis je peux aller de l'avant et je peux goûter ça à nouveau et choisir ma couleur grise. Maintenant, je passe généralement un peu de temps sur ce processus jusqu'à ce que j' obtienne la couleur exacte que je veux. Dans mon cas, ce serait quelque part autour, je suppose que cette zone. La couleur grise finale que nous allons utiliser est 030F1A. Maintenant, nous pouvons supprimer ceci et nous pouvons coller dans notre couleur ici. Et cela nous a donné le gris principal et les neuf teintes que nous pouvons maintenant utiliser dans notre design. Alternativement, si vous cherchez à créer des teintes et des nuances, la façon la plus simple, laissez-moi vous montrer un très bon outil pour le faire. Ça s'appelle Teinte et Shade Generator. Nous pouvons le trouver sur maketintsandshades.com. Et ce que vous faites fondamentalement, donnons ceci à titre d'exemple, vous sélectionnez votre couleur principale, vous le collez et vous appuyez sur faire des teintes et des nuances. Et cela vous donne les nuances en haut et les teintes en bas, ainsi que le code hexadécimal pour chaque valeur. Et à tout moment, vous pouvez passer le curseur sur l'un d'eux. Copier. Et cette valeur est maintenant copiée dans votre presse-papiers et vous pouvez l'utiliser où vous le souhaitez. Ou si vous avez une configuration comme celle-ci, vous définissez simplement une opacité différente sur chaque couche et vous obtiendrez relativement le même résultat. Et avec cela, le schéma de couleurs est complet. D' accord. Maintenant, c'est à votre tour de vous occuper. Si vous avez suivi et travaillé à mes côtés, alors votre jeu de couleurs est terminé. Super. Si ce n'est pas le cas, allez-y et faites-le dès maintenant. Utilisez les modèles que je vous ai donnés dans Figma et aussi les outils que je vous ai montrés pour créer votre propre jeu de couleurs. Vous n'avez pas à utiliser exactement les mêmes valeurs que moi. Allez-y et expérimentez. C' est la meilleure façon d'apprendre. Utilisez toutes les couleurs que vous vous sentez le mieux. Maintenant, une fois que vous faites ça, vous êtes prêt à passer à la leçon suivante, qui porte sur la typographie. Il s'agit là d'une autre étape cruciale dans le processus de conception. Et nous allons aborder ça dans la prochaine leçon. Je te verrai là-bas. 4. Typographie: Bienvenue en classe. Dans cette leçon, nous allons aborder la typographie de notre page d'apprentissage. Qu' est-ce que ça veut dire ? Eh bien, cela signifie choisir les bonnes polices de caractères et toutes les autres propriétés de texte pour s'assurer que tout est beau et soigné. Cela signifie la taille des polices , la hauteur des lignes, les poids des polices, etc. Je vais également vous montrer quelques outils très utiles qui vont vous faciliter votre travail, et nous allons également discuter des échelles typographiques, et je vais vous présenter le système de grille à huit points nous utiliserons tout au long de ce processus de conception. Commençons. Nous commençons ici dans le fichier Figma de démarrage sous Typographie, où j'ai créé quelques images, pour définir les polices de caractères, l'échelle de type, les styles de titre, le style des guillemets et les paragraphes. C' est assez pour vous faire partir. Passons à la définition des en-têtes. Pour ce faire, nous commencerons par jeter un coup d'œil à la fiche de projet. fin de compte, le client nous demande de rendre la page de destination moderne, professionnelle, mais ludique. Comment cela se traduit-il par la typographie ? Eh bien, la partie ludique, nous pouvons en fait obtenir des couleurs. Quand nous le rendons coloré, nous le rendons ludique. Mais ce peu, le rendre moderne et professionnel. Nous pouvons totalement le faire avec l'aide de la typographie. Lorsque vous démarrez un projet comme celui-ci, c'est toujours une bonne idée de visiter les sites Web que vous utilisez pour obtenir vos fichiers de polices. Il y en a beaucoup. J' utilise deux d'entre eux, principalement Adobe Fonts et Google Fonts. Maintenant, Google Fonts est gratuit et Adobe Fonts, eh bien, vous devez avoir un abonnement Adobe pour y accéder. Mais je dirai cela, Adobe a des polices de caractères de qualité beaucoup plus élevée que Google. Vous pouvez toujours trouver des polices de caractères géniales ici, mais généralement je cherche Adobe Fonts, parce qu'elles sont juste un peu plus raffinées, et la collection ici est en fait beaucoup plus grande que ce que vous trouverez sur Google Fonts. Parce que j'ai un abonnement Adobe, il est logique pour moi d'utiliser leurs polices. Maintenant, parce que le client nous a demandé de rendre la page de destination moderne, nous allons utiliser une police sans serif. Qu' est-ce qu'une police de caractères sans serif ? Laissez-moi vous donner un exemple. Je vais ouvrir Roboto ici. En fait, je vais juste rendre ça très grand pour que tu puisses voir la différence. Un sans serif est une police qui n'a pas de sérifs sur les lettres. Je pense qu'en fait je devrais commencer par une police de caractères serif, pour que vous puissiez voir la différence. C' est une police de caractères Serif. Vous voyez ces décorations ici, et aussi ici, et aussi ici ? Ceux-ci sont appelés serifs. sérifs se trouvent généralement sur les anciennes polices de caractères. Les polices les plus modernes sont sans serif ou sans serif. Comme celui-là. On n'a plus ces décorations. On ne peut pas les trouver ici, ici ou ici. Ceux-ci sont plus propres et plus modernes. Maintenant, je ne vais pas passer par serif contre sans serif dans cette classe, c'est au-delà de la portée. Mais si, à un moment donné, un client vous demande : « Ok, nous voulons un site web moderne. » Ensuite, en ce qui concerne la typographie, vous devez utiliser des polices sans serif. Maintenant, dans mon cas, après avoir creusé un peu sur Adobe Fonts, je me suis installé pour Brandon Grotesque. C' est une police qui répond aux deux critères, elle est moderne, elle est sans serif, et elle est aussi très professionnelle, et elle a aussi tous ces styles. Nous avons des styles ou des poids allant de mince à léger à régulier au noir. C' est celui que nous allons utiliser pour les en-têtes et certains des autres éléments. Maintenant, quand il s'agit du corps du texte, nous allons utiliser Tisa Sans Pro ou FF Tisa Sans comme on l'appelle ici. C'est une police similaire à Brandon Grotesque, mais elle a évidemment ses propres différences. J' utilise deux polices de caractères parce que bien que Brandon Grotesque est idéal pour les en-têtes, c'est donc des tailles de police grandes et grandes. Cela ne fonctionne pas bien sur le texte plus petit. Pour cette raison, j'utilise FF Tisa Sans ou Tisa Sans Pro. Cela fonctionnera très bien sur les petites tailles de texte comme par exemple 18, lorsque nous faisons le corps du texte, cela fonctionnera magnifiquement. Maintenant, ce sont mes choix. Vos choix peuvent varier et je vous suggère fortement de creuser un peu sur Adobe Fonts ou Google Fonts, et de trouver la police de caractères qui vous semble la meilleure apparence, et d'aller de l'avant et de les utiliser. Dans mon cas, j'ai ces deux polices installées sur mon système. Tout ce que j'ai à faire maintenant c'est d'aller ici à Figma et de les référencer. Je vais dire Brandon Grotesque, et je vais aller ici sous texto, et je vais sélectionner Brandon Grotesque. Faisons cela en gras, et utilisons une taille de police plus grande, peut-être comme 55. Ce que je fais d'habitude, et laissez-moi juste les déplacer hors du chemin. Je duplique généralement ces valeurs et je viens de mettre en surbrillance ou de présenter tous les poids pour cette police de caractères. C' est régulier, c'est moyen, audacieux, et c'est noir. Cela me donne juste une idée de la façon dont la police ressemble sans avoir à changer un morceau de texte manuellement. Par exemple, si je suis dans le design principal, je peux juste entrer dans la typographie et je peux dire, ok, donc c'est à quoi ressemble la version la plus légère de celui-ci, ou c'est à quoi ressemble la version la plus lourde de celui-ci. Allons de l'avant et faisons la même chose pour les textes corporels, nous utilisons Tisa Sans Pro, et je vais faire exactement la même chose ici. Cela a aussi quelques versions. À partir de mince, léger, ou en fait, ils sont altérés beaucoup autour, régulier puis moyen, gras, extra gras, et noir. D' accord. Nous avons maintenant nos polices de caractères prêtes à être utilisées. En passant, pour zoomer comme ceci, vous pouvez maintenir la commande sur Mac et simplement utiliser la molette de défilement pour zoomer avant et arrière, ou sur Windows, vous pouvez utiliser le contrôle et la molette de la souris pour faire la même chose. Puisque nous sommes sur le thème du zoom avant et arrière, permettez-moi de vous montrer deux autres raccourcis clavier que j'utilise tout le temps. Maj zéro va toujours zoomer sur 100 %, quel que soit le Mac ou Windows. Maj 1 va zoomer pour s'adapter, donc il va prendre toutes vos images et il va les intégrer dans la partie visible de votre canevas. Si vous sélectionnez un élément ou un cadre et que vous appuyez sur Maj 2, il va zoomer sur la sélection. Ce sont trois raccourcis clavier que j'utilise tout le temps. Encore une fois, Maj 0 zoomera sur 100 %, Maj 1 zoom pour s'adapter, Maj 2 zoom vers la sélection. Maintenez enfoncée la Commande sur Mac ou le contrôle sous Windows vous permettra essentiellement d'utiliser la molette de défilement pour effectuer un zoom avant et arrière. Plutôt cool. Passons maintenant à l'échelle de type. Qu' est-ce qu'une échelle typographique ? La façon la plus simple d'expliquer est de vous montrer. Ici, nous avons un site que j'utilise tout le temps, il s'appelle types-cale.com, et ici ce que vous faites est fondamentalement vous définissez votre taille de police de base. Vous sélectionnez une échelle qui vous donnera une liste de tailles de police que vous devez utiliser pour créer cette échelle harmonieuse. Si je devais changer le rapport ici, vous verrez que l'échelle change aussi. En utilisant cet outil, vous pouvez dire : « Ok, c'est ce que je vais utiliser pour le titre un, deux, trois, quatre, cinq et six. C' est ce que j'utilise pour le texte plus petit. En utilisant cet outil, je m'assure que ma typographie est toujours visible parce que sans elle, vous ne savez pas vraiment quel type de tailles de police utiliser. Je veux dire, vous commencez par, disons la taille de la police de base pour le corps du texte, qui est généralement de 16 pixels. Mais qu'en est-il après ça ? Qu' utilisez-vous pour le H1 ou le H3 ? Utilisez-vous 20 pixels ou 21 pixels ? Ou peut-être que vous utilisez ce que vous pensez être le mieux ? Cela peut fonctionner, mais avoir un outil comme celui-ci qui vous indique exactement quel type de, ou quelles tailles de police utiliser en fonction d'une échelle est critique. La façon dont cela fonctionne est en fait très simple. Permettez-moi d'ouvrir une calculatrice et d'expliquer le principe derrière cela. base de l'échelle de type fonctionne sur la base d'un rapport. Nous commençons par la valeur de base, qui est de 16 pixels. Cette valeur de base, nous multiplions par l'échelle, qui dans notre cas est 1.414, et cela nous donne le résultat, 22.624. Maintenant, pour l'article suivant de la balance, nous prenons cette valeur, 22.624 ou 22.62. Nous pouvons utiliser deux décimales et nous le divisons, ou nous le multiplions avec le même rapport, 1.414 et cela nous donnera la valeur suivante. Dans notre cas, j'ai utilisé le mauvais séparateur ici. Dans notre cas, c'est 31.98 et vous le faites encore et encore jusqu'à ce que vous obteniez toutes les valeurs pour le reste de vos éléments de texte. Maintenant, l'avantage d'utiliser un outil comme échelle de type est que vous n'avez pas à effectuer ces calculs manuellement. Il le fait pour vous, et il le fait en M ainsi qu'en pixels. Maintenant, parce que j'utilise Figma, j'ai un plugin pratique qui génère des échelles de type pour moi et ce plugin est appelé Font Scale. Si vous voulez l'installer, il vous suffit d'aller dans Plugins, Manage Plugin, puis de rechercher Font Scale et de l'installer. C' est vraiment, vraiment simple. Maintenant, pour utiliser ce plugin, vous entrez les tailles de police de base, dans mon cas va être 18 et choisissez le facteur d'échelle dans mon cas va être troisième majeur et puis, générer des couches. Cela a généré ces couches et il peut effectivement les coller ici. Comme vous pouvez le voir, cela vous donne des éléments de texte qui ont les tailles de police correctes. C' est exactement la même chose que d'aller ici et de dire, « Ok, je veux utiliser 18 pixels et 1.250 ou troisième majeur. » Cela va vous donner exactement le même résultat, la différence est dans Figma vous avez ces calques et vous pouvez les référencer à tout moment. Choisissons tous ces éléments et changeons la police pour Brandon Grotesque, voilà. Maintenant, je vais aussi ajouter un autre élément ici parce que je veux cette valeur finale de 55 pixels. Maintenant, ce que je vais faire, je vais passer en revue chacun et je vais arrondir la taille de la police. C' est 43.95, on va en faire 44, c' est 35, c'est 28, c'est 22.5. Je peux y aller 22 ou 23. Allons-y avec 23. C' est 18, et c'est 14.4 mais nous allons utiliser 14. Maintenant que nous avons l'échelle typographique en place, faisons un peu de simulation pour les styles de titre. Nous allons dire tête 1 et ensuite, nous allons multiplier cela pour créer des en-têtes de 1 à 6. Aussi, faisons un petit élément ici. Tous ces éléments utiliseront Brandon Grotesque et les titres un à trois, nous allons les rendre audacieux. tête 5, on va probablement faire ce médium. rubrique six va être régulière et la petite utilisera des majuscules. Vous pouvez ouvrir ces détails de type avancé en cliquant sur ce petit bouton ici et en choisissant des majuscules et cela sera réglé sur 14 pixels. Faisons 5 % d'espacement des lettres, ça va être audacieux et nous devrions être bons d'y aller. Maintenant, définissons les styles ou le style des autres en-têtes. Nous avons la première tête. Cela va être de 55 pixels, car 55 est la taille de police de cet élément de notre échelle de type. deuxième position, on utilisera 44, troisième position, on utilisera 35. Ensuite, nous aurons 28 pour le titre 4, 23 pour le titre 5 et ensuite pour le titre 6, nous utiliserons 18, qui est la taille de police de base. Ce faisant, nous trouvons essentiellement les tailles de police pour tous nos en-têtes en fonction de cette échelle de type. Assez cool et très, très facile. Allons de l'avant et bougeons ça. Puisque nous sommes sur le thème de la définition des styles, définissons un style pour les guillemets et ici nous allons utiliser aussi Brandon Grotesque et nous allons utiliser la taille de police de 35 pixels. Éloignons cela du chemin et enfin, définissons un style pour les paragraphes. Ceux-ci utiliseront Tisa Sans Pro, régulier, 18 pixels. Maintenant, notre typographie est assez bien préparée. La dernière chose que nous devons faire est de définir les hauteurs de ligne appropriées. Maintenant, pour ce faire, nous allons travailler avec le système de grille à huit points. Laisse-moi te parler un peu de ça. Il y a un super article que j'ai lié dans les ressources, fichier P-D-F. Vas-y et regarde ça. Cela explique vraiment pourquoi il est bénéfique d'utiliser le système de grille à huit points dans la conception Web. Essentiellement, ce que nous essayons de faire est d'atteindre un rythme vertical cohérent. Donc, toute mesure ou toute distance, toute marge ou rembourrage que nous allons appliquer, toute hauteur que nous allons appliquer à nos éléments devrait être un multiple de huit. Cela vaut également pour les éléments de texte. La taille de la police ne doit pas nécessairement être un multiple de huit. Ce qui importe, c'est que la hauteur de la ligne est un multiple de huit parce que la hauteur la ligne dicte la hauteur des lignes du texte et s'il y a des multiples de huit, alors tout va bien tomber sur une grille de base. Je vais vous montrer un peu à ce sujet quand nous ajoutons plus d'éléments et que nous suivons ce système de grille à huit points. Mais pour l'instant, ce que vous devez savoir, c'est que lorsqu'il s'agit de typographie, nous allons définir la hauteur de ligne des éléments de texte pour être un multiple de huit. Allons-y et faisons-le maintenant. titre 1 a une hauteur de ligne qui devrait être d'environ 79 pixels. Ceci est automatiquement calculé par Figma, donc je vais le régler à 80 pixels. deuxième position devrait être d'environ 63, ou la suivante, ou le multiple le plus proche de huit est 64. Donc on va faire ça. rubrique 3 est 50. Ici, on peut aller soit 48, soit un multiple de huit, soit on peut aller avec 56. Faisons ça à 56. cap 4 est 40, donc c'est sur place. cap 5 est 36 et on peut aller avec 40 ou 32. Alors allons-y 32. rubrique 6 est 18. On peut y aller 24 ici et celui-là, on peut en aller 24 aussi. C' est la hauteur de ligne définie pour les titres. Maintenant, pour les guillemets, voyons 35, nous allons utiliser 56 parce que c'est ce que nous avons utilisé ici aussi. Mais si vous pensez que c'est trop et maintenant que je le vois, je pourrais revenir à 48. Je pense que ça a l'air un peu mieux. Alors faisons ça ici aussi, 48. Au fait, ils ne sont pas définitifs, nous pouvons toujours les changer, si vous arrivez au point de conception et que vous trouvez que cela ne fonctionne pas vraiment bien. Vous pouvez toujours revenir à cela et changer. Ce n'est pas une grosse affaire. Aux paragraphes 18, nous allons utiliser 24 comme hauteur de ligne et avec cela, nous avons créé les caractéristiques typographiques de notre page de destination. D' accord, si vous avez travaillé à mes côtés, alors vous devriez avoir toute la typographie. Sinon, allez-y et faites-le dès maintenant et comme avec les couleurs, expérimentez un peu, vous n'avez pas à utiliser les mêmes polices que j'utilise ou la même échelle que celle que j'ai faite. Choisissez une police de caractères ou choisissez les deux polices de caractères qui vous conviennent le mieux pour ce type de produit ou pour ce type de projet. Peu importe s'il s'agit d'une police gratuite ou payante. Si vous pensez que ça a l'air bien, allez-y et utilisez-le. En outre, vous n'avez pas besoin d'utiliser la même échelle de 1,25 que j'ai utilisée. Jouez avec eux. Choisissez celui qui vous semble le mieux et lorsque vous choisissez les différents rapports, remarquez comment ceux-ci affectent la composition globale de ces éléments de texte. Découvrez comment cela modifie la hiérarchie visuelle. Dans la page, vous verrez que plus le rapport est bas, moins il y a de différence entre chaque étape de l'échelle. Plus le rapport est élevé, plus la différence entre chaque étape de l'échelle est élevée. Par exemple, si vous optez pour un ratio d'or, vous verrez qu'il y a une différence considérable entre les tailles de police plus petites et les tailles de police plus grandes. Chaque échelle de type, chaque rapport a sa place pour différentes choses. Vous utiliseriez des ratios plus petits pour les blogs peut-être, ou peut-être un tableau de bord où vous n'avez pas besoin d'une telle différence entre les tailles de police et vous utiliseriez quelque chose comme le ratio d'or lorsque vous voulez faire une déclaration, lorsque vous avez un site web avec une typographie audacieuse. Lorsque vous avez une grande différence entre le corps du texte et le titre le plus grand. Alors jouez avec ces éléments, et une fois que vous avez terminé, vous êtes prêt à passer à la leçon suivante, qui porte sur les images et d'autres éléments visuels comme les icônes. Maintenant, nous allons utiliser des images d'espace réservé et même si elles ne sont pas définitives, au moins, elles nous donnent un point de départ. C' est à venir dans la prochaine leçon. Je te verrai là-bas. 5. Images et autres éléments: Bienvenue dans la classe. Dans cette leçon, nous allons nous familiariser avec les images et les icônes que nous allons utiliser pour ce design. C' est toujours une bonne idée de les préparer avant de commencer le processus de conception, car cela va simplement vous faciliter les choses. Bien sûr, vous pourriez les changer plus tard, mais au moins vous avez un point de départ. Je vais donc vous montrer quelles images et icônes nous allons utiliser. Aussi, je vais partager quelques ressources que vous pouvez utiliser pour faciliter tout ce processus. Commençons. Très bien, pour les images, comme je vous l'ai montré, nous avons les logos, les logos de la marque. Vous pouvez trouver un lien dans le fichier PDF de ressources à ce logo exact, et vous pouvez le télécharger. Maintenant, pour les images d'espace réservé, j'ai obtenu ces images d'un kit d'interface utilisateur, d'un kit d'interface financière. Laisse-moi juste rendre ça un peu plus petit pour que tu les voies mieux. Parce que nous travaillons avec un projet fictif, nous n'avons pas de captures d'écran ou d'images du produit réel. Donc nous allons juste utiliser ces images de démonstration, et en fait laissez-moi juste vous montrer où vous pouvez obtenir ça. C' est ce qu'on appelle un kit d'interface financière gratuite. Vous pouvez le trouver sur Behance, et c'est là qu'il peut également le télécharger. Je crois que c'était un croquis, oui. Donc c'est un fichier de croquis. Juste au cas où vous n'avez pas d'esquisse installé, je suis allé de l'avant et j'ai exporté ces images JPEG pour vous, afin que vous puissiez les utiliser tout de suite dans votre conception. Maintenant, en plus de ceux-ci, nous avons également ces rendus de périphérique. C' est pour un iPad Pro, et c'est pour un iPhone 7, et nous allons également les utiliser dans nos designs. Ce sont des fichiers PNG et je les ai exportés à partir des fichiers Photoshop qui peuvent être téléchargés à partir d'ici. Ceux-ci sont également liés dans le fichier PDF par la façon suivante. Ce sont des ressources gratuites de Pixeden. Ceci est un Psd iPhone 7 Pro Mockup, et ceci est un iPhone 7 Mockup. Ce sont tous des vecteurs, ils sont dans Photoshop, et ils ont cet objet intelligent comme écran. Vous pouvez simplement double-cliquer dessus et mettre n' importe quelle capture d'écran ou image que vous voulez, comme je l'ai fait. Remarquez, j'ai une de ces autres images à l'intérieur de l'écran du téléphone et la même chose vaut pour cet iPad. Donc ce sont les images d'espace réservé que nous allons utiliser. Maintenant, si vous cherchez juste des images d'espace réservé, une ressource que j'utilise tout le temps est Unsplash. Vous recherchez simplement une photo, comme par exemple l'iPhone. Cela vous donne une liste d'images correspondant à ces critères de recherche. Ce sont des images gratuites que vous pouvez les utiliser partout, grande ressource. Maintenant, quand il s'agit d'icônes, il y a tellement de sites Web là-bas, qui vous permettent de télécharger des charges et des charges d'ensembles d'icônes. Une option que je vais tout le temps est Iconfinder. Vous pouvez trouver des ensembles d'icônes gratuits premium et vous pouvez télécharger des icônes individuelles ainsi. Ici, vous recherchez simplement la maison, et vous pouvez rechercher par style. Vous pouvez trouver des icônes gratuites seulement et vous pouvez cliquer sur l'un de ces et le télécharger comme un PNG, SVG ou d'autres formats, cela dépend de l'ensemble d'icônes. Vous pouvez donc obtenir des jeux d'icônes à partir d'ici. Mais pour cette démo particulière, nous allons utiliser quelques icônes de ce jeu d'icônes. Ça s'appelle des micons. C' est par un roumain appelé Cosmic Negoita. C' est une grande icônes que je l'utilise dans beaucoup de mes projets. Un autre jeu d'icônes que nous allons utiliser est appelé Ionicons. C' est encore une fois, j'aime vraiment cet ensemble d'icônes. Je l'utilise tout le temps, je l'aime vraiment et je peux fortement vous le recommander aussi. Maintenant, avec l'un de ces ensembles, vous pouvez simplement les télécharger. Il va vous donner une archive, et vous avez probablement des fichiers SVG et PNG. Mais ce que j'aime faire, c'est utiliser une application appelée Iconset. s'agit d'une application gratuite, il est multi-plateforme et il fonctionne à la fois sur Mac OS et Windows ; Il ressemble à quelque chose comme ça. Vous pouvez créer des jeux d'icônes ici et les importer à partir de votre disque dur. Comme vous pouvez le voir, j'ai les deux ensembles que nous allons utiliser chargés ici. Vous pouvez voir toutes les icônes, vous pouvez rechercher une icône spécifique, et une fois que vous l'avez trouvée, c'est vraiment simple. Cliquez avec le bouton droit de la souris, vous pouvez le copier, puis vous pouvez aller à Figma ou importe quel logiciel de conception que vous utilisez et simplement coller cela dans. Ou vous pouvez cliquer et faire glisser, cela va faire exactement la même chose. Donc ce sont les outils que je vous recommande d'obtenir. Mais si vous ne voulez pas installer quoi que ce soit d'autre sur votre ordinateur, c'est tout à fait bien. Disons que nous voulons télécharger cet ensemble ionicon. Il va télécharger une archive, et une fois que vous décompressez cela, il vous donne juste cette liste de fichiers SVG. Vous pouvez simplement saisir le fichier que vous voulez et glisser-déposer dans Figma, et vous êtes prêt à y aller. À ce stade, vous devriez avoir les images et les icônes toutes prêtes à aller. Parce que nous travaillons pour un produit fictif, nous utilisons évidemment des images d'espace réservé. Mais rappelez-vous que sur un vrai projet, vous utiliseriez des images qui sont pertinentes pour ce produit spécifique. N' hésitez pas à utiliser les images que j'ai fournies ou à télécharger les vôtres. Si vous pensez pouvoir trouver des images ou des icônes qui fonctionnent mieux pour votre design, par tous les moyens, allez-y et faites-le. J' aimerais voir différents résultats dans la galerie du projet. Maintenant, en supposant que vous avez tout configuré et que cela inclut la couleur, typographie et l'imagerie, nous sommes prêts à passer à la conception réelle de la page. Ces pages d'apprentissage sont divisées en plusieurs sections, et nous aborderons une section à la fois dans le reste de cette classe. Nous commencerons par la section des héros, et c'est à venir dans la leçon suivante. On se voit là-bas. 6. Entête et arrière-plan: Bienvenue dans la classe. Dans cette leçon, nous commençons la conception réelle de la page. Jusqu' à présent, nous avons préparé tout prêt, y compris les couleurs, l'imagerie typographique. Maintenant, nous sommes prêts à poser les premiers pixels. Maintenant, nous allons commencer par la section héros. C' est assez complexe et nous allons le diviser en deux parties. Dans cette partie, nous allons ajouter la navigation du logo et nous allons également créer un joli arrière-plan pour cela. Si vous êtes prêt à partir, commençons. De retour dans figma, nous allons passer à la page de conception principale et nous allons commencer par créer un cadre. Pour ce faire, nous pouvons utiliser le raccourci F pour la trame et cela active cette barre latérale droite où vous pouvez choisir une taille de trame prédéfinie. Il est disponible dans différents formats allant de la taille de bureau à la taille des tablettes et des téléphones. Vous pouvez voir la taille en pixels juste ici sur le côté droit. Il peut également choisir entre des formats de papier courants et des formats de médias sociaux. Ou si vous voulez une taille personnalisée, vous pouvez simplement cliquer et faire glisser pour créer le cadre à la taille souhaitée. Si vous voulez changer la taille par la suite, tout ce que vous avez à faire est de sélectionner le cadre dans le canevas ou dans la liste des calques et de modifier les propriétés de largeur et de hauteur sur cet inspecteur de droite. Dans mon cas, je vais faire de cette 1600 pixels de large et environ 2000 pixels de haut. En fin de compte, ça va finir beaucoup plus grand et plus haut que ça. Mais comme point de départ, c'est plus que suffisant. Nous pouvons double-cliquer ici ou nous pouvons double-cliquer ici pour renommer ceci. Je vais dire Bureau. Maintenant, définissons une grille de colonne. Si vous n'êtes pas très familier avec l'utilisation de grilles dans la conception Web, c'est très simple. Une grille de colonnes est essentiellement une liste de colonnes verticales que vous pouvez utiliser pour aligner des éléments ou des éléments de taille. Donc, si vous pensez à une mise en page à trois colonnes, il s'agit d'aligner le contenu sur trois colonnes égales dans cette page. Laissez-moi vous montrer ce que je veux dire. Dans figma, il est vraiment facile d'ajouter une grille de colonne. Sélectionnez simplement le cadre de votre choix, allez dans l'inspecteur et choisissez Grille de mise en page. Il suffit de cliquer dessus ou de cliquer simplement sur le signe plus. Ça fait exactement la même chose. Dans cette liste où il indique les paramètres de grille de mise en page, vous pouvez choisir entre la grille qui est celle-ci, Colonnes qui est ce dont nous avons besoin ou Lignes qui est la même chose mais horizontale. Donc, nous allons choisir Colonnes et généralement vous opteriez pour 12 colonnes. C' est un nombre standard car 12 est facilement divisible par 2.3,4 et 6. Ensuite, vous devez définir une couleur pour cette grille. Vous pouvez aller avec n'importe quelle couleur que vous voulez, mais faites-en une couleur qui vous fera savoir qu'il s'agit en fait d'une grille et qu'elle ne fait pas partie de la conception réelle. Il peut également changer son opacité ici. Sous Type, nous choisirons Centre et ensuite nous définirons la largeur de chaque colonne, dans mon cas, je vais aller avec 72. Sous Gutter, on va choisir 32. La gouttière est essentiellement la distance entre ces colonnes. Maintenant, évidemment, n'hésitez pas à utiliser n'importe quel type de propriétés de grille que vous voulez. Dans mon cas, c'est ce que je vais utiliser. Maintenant, si à un moment donné vous voulez cacher la grille, vous pouvez cliquer sur cette icône d'œil ici ou si vous voulez le supprimer complètement, nous pouvons cliquer sur le signe Minus.Il y a aussi un raccourci clavier pour elle, son Contrôle G. Vous pouvez activer et désactiver cela, mais vous pouvez facilement trouver le raccourci clavier correct si vous allez dans le menu figma, Vue, Grilles de mise en page. Il peut évidemment le basculer à partir d'ici et hors. Ainsi, la grille de mise en page ou la grille de colonne est maintenant créée. Allons passer à autre chose. Pour savoir quoi mettre exactement dans cette zone de héros, revenons à notre Wireframe. On peut passer à cette page. Au fait, il y a un moyen plus rapide de le faire. Vous pouvez appuyer sur Page précédente ou Page suivante de votre clavier si vous avez ces touches pour échanger d'une page à l'autre. Cela fonctionne sous Windows et sous Mac OS. C' est exactement le même raccourci clavier. Donc, si nous allons au Wireframe, nous pouvons voir que la zone du héros, qui est celui-ci ici a notre en-tête qui contient le logo et la navigation. Ensuite, il a le contenu du héros, qui est composé de cet objet multimédia et le titre, sous-titre et appel à l'action. Maintenant, nous allons aborder cette partie dans la prochaine leçon. Donc, ne nous inquiétons pas pour ça maintenant. Mais dans cette leçon, nous allons ajouter notre navigation de logo et aussi créer un beau fond pour cette zone de héros. Alors voici comment on fait ça. Commençons par ce contexte. Allons cacher cette grille parce qu'on n'en a pas besoin. Commençons par une forme rectangulaire pour cela appuyez sur « R » ou vous pouvez choisir parmi cette liste d'outils ici et nous allons simplement cliquer sur la toile ou nous pouvons cliquer et faire glisser et créer un d'une taille personnalisée. Alors faisons un qui soit de la même largeur que notre toile. Poussons le haut et sous Remplissage, choisissons un dégradé linéaire. Maintenant, pour obtenir les valeurs de couleur correctes, je vais revenir à l'onglet Couleur. Donc je vais prendre ma couleur primaire et la placer ici. Voyons lequel c'est, c'est celui-là. Ensuite, pour l'autre couleur, je vais choisir ma deuxième couleur primaire qui est celle-ci. Cela doit être une opacité à 100 pour cent. Maintenant, si vous n'êtes pas entièrement satisfait de l'apparence du dégradé, vous pouvez utiliser ces curseurs pour déplacer les arrêts de couleur vers le haut et vers le bas, à gauche ou à droite. Cela dépend vraiment de votre point de vue ici. Donc, si tu veux plus de pourpre, tu bougerais comme ça. Si vous voulez plus de bleu, vous le déplaceriez comme ça. Si vous voulez créer comme un angle, vous pouvez cliquer sur ces poignées individuelles et il peut les déplacer jusqu'à ce que vous arriviez là où vous voulez. Donc dans mon cas, je pense que je vais faire quelque chose comme ça. Ça devrait être assez fort pour l'instant. Maintenant, ce que je vais faire est, je vais sélectionner ce rectangle et je vais le faire pivoter. Pour ce faire, vous pouvez entrer une nouvelle valeur dans le champ de rotation ici. Allons-y avec 16 degrés. Très bien, c'est plutôt bien. Maintenant, je vais redimensionner ceci pour qu'il remplisse complètement ma page, comme ça. Je vais aussi arrondir les coins. Je vais ajouter un grand rayon de bordure de 64 pixels. Maintenant, comment vous obtenez ces valeurs, ça n'a pas vraiment d'importance. Dans mon cas, j'utilise le système à huit points. 16, 64, ce sont tous des multiples de huit. Ça n'a pas d'importance pour le rythme vertical, mais ça me rend plus facile de m'en souvenir. Maintenant, vous pouvez déplacer cela à gauche et à droite, de haut en bas jusqu'à ce que nous trouvions une position appropriée pour cela. Vous pouvez également activer la grille de mise en page et l'aligner sur la grille, si vous le souhaitez. Donc, dans mon cas, je vais juste le laisser là-bas. Maintenant. Quelque chose d'autre que je vais faire est d'ajouter une ombre portée à cela. Pour cela, sélectionnez, allez dans les effets, cliquez, sélectionnez l'ombre portée et sélectionnez cette icône de soleil. Pour ouvrir les paramètres. Pour les paramètres, je vais sélectionner 30 pour le flou, zéro x 20 pour y. Quant à la couleur, eh bien je vais utiliser ma couleur grise principale. Copiez-le d'ici. Collez ça ici et pour une opacité, je vais choisir 20 pour cent. Maintenant, voici un conseil professionnel. Chaque fois que vous utilisez ces effets, il peut créer des modèles pour eux. Donc, avec l'élément sélectionné, où vous avez eu l'effet, cliquez sur ce bouton de style et cliquez sur le signe Plus et tapez simplement un nom. Dans mon cas, je vais dire ombre portée, créer du style. Donc, ce que cela fait est, si j'ai un autre élément par exemple, et que je veux ajouter exactement la même ombre portée. Je peux sélectionner cela, aller dans les effets et sélectionner l'ombre portée. Maintenant, il a exactement le même. Maintenant, si je veux changer l'ombre portée sur ces deux, je peux cliquer sur le ou à l'extérieur de n'importe quel élément et cela va sélectionner mon canevas. Je peux trouver des styles locaux ici. Je peux sélectionner l'ombre portée, modifier le style et je peux changer ses propriétés ici. Peut-être que je veux une couleur différente. Voyez comment cela change sur les deux éléments ? C' est le pouvoir de travailler avec des styles locaux comme ceux-ci. Il rend les styles réutilisables très efficaces. Maintenant, vous pouvez faire la même chose avec les dégradés, par exemple. Où il dit remplir, peut-être que je veux enregistrer ce gradient pour une utilisation ultérieure. Je peux cliquer sur la même couleur ou le même bouton où il est dit style et sous les styles de couleur, je vais frapper plus. Je vais taper le gradient principal. Maintenant, ajoutons un peu plus d'intérêt visuel à cette section. Je vais sélectionner ceci, Commande D, pour le dupliquer. Je vais changer sa rotation à 12 degrés. Je vais cliquer avec le bouton droit de la souris et sélectionner envoyer à retour. Cela va le mettre derrière ma couche principale. Je vais juste ajuster son positionnement un peu. Quelque chose comme ça. Peut-être le pousser un peu vers le bas aussi. Je vais changer sa capacité globale à 30 pour cent. Maintenant, je veux te montrer quelques trucs cool ici. Lorsque vous avez sélectionné un élément, vous pouvez appuyer sur n'importe quel nombre compris entre un et zéro pour modifier son opacité. Donc, si j'appuie sur un, il définit son opacité de 10 pour cent à 20 pour cent, 3,4,5,6,7,8,9 et zéro le change à 100 pour cent. Maintenant, si vous faites ces nombres dans la succession rapide, par exemple, trois quatre. Cela change la capacité à 34. Voici un autre exemple, 12, 76, 32. Si je le fais, trois et deux, il change son opacité à 30 pour cent, puis à 20 pour cent. Donc, dans mon cas, laissons ça à 30 pour cent. Maintenant, refaisons-le. Dupliquons. Cette section principale. Changeons sa rotation à 26 degrés. On va mettre tout ça à l'arrière. Pour ce faire, vous pouvez cliquer avec le bouton droit de la souris et sélectionner envoyer vers l'arrière. Ensuite, cliquez avec le bouton droit de la souris sur envoyer en arrière Ou il peut tout faire à la fois en sélectionnant envoyer à retour. Ça va le mettre à l'arrière. Vous pouvez également cliquer sur le rectangle et le faire glisser depuis le panneau Calques. Pour ce peu, je vais changer son opacité à 10 pour cent. Je vais juste le déplacer vers la gauche et vers la droite, jusqu'à ce que je trouve une position appropriée pour cela. Je pense que ça a l'air bien. Maintenant, voici un autre conseil. Il peut utiliser les touches fléchées de votre clavier pour déplacer des éléments. Haut, bas, déplace cet élément un pixel à la fois. Gauche, droite, fait la même chose. Mais si vous maintenez la touche Maj enfoncée tout en faisant cela, il va le déplacer 10 pixels à la fois. C' est un moyen très rapide de déplacer des objets sur votre toile sans utiliser la souris. Ça a l'air plutôt bien. Maintenant, pour finir ça, faisons-le. Dupliquons ceci une fois de plus. Changons cette rotation à 26. Mais cette fois, nous allons le déplacer à l'intérieur, dans un endroit comme ça. Je pense que ça a l'air bien. Maintenant sous remplissage, je vais supprimer mes gradients principaux et je vais ajouter un remplissage linéaire du blanc au transparent. Donc, c'est en fait blanc, zéro pour cent et nous allons en fait échanger ces. > Nous passons donc du blanc au blanc transparent, et je vais changer son opacité à cinq pour cent. En faisant cela, j'ai juste cet effet très agréable, où je commence avec le blanc ici et il s'estompe juste au fur et à mesure qu'il monte. Je peux même rendre ça plus petit, comme ça. Avec cela, nous pouvons sélectionner toutes ces commandes G ou contrôle G si vous êtes sur un PC pour regrouper tous ces éléments ensemble, et appelons cela l'arrière-plan. Avec cela, l'arrière-plan du héros est fait. Allons de l'avant et ajoutez le logo et la navigation pour cela. Reportons la grille de mise en page et ouvrons nos actifs de marque. On va prendre notre logo blanc. Il suffit de cliquer et de faire glisser. Positionnons ça quelque part dans notre page. Maintenant, le logo, nous allons faire 48 pixels de hauteur. Ce petit bouton ici va contraindre comme proportions. Ce qui signifie que lorsque vous modifiez une valeur largeur ou hauteur), l'autre valeur sera redimensionnée en conséquence. Si vous décochez cette case, vous pouvez modifier ces valeurs individuellement. Mais dans mon cas, je veux faire mon logo 48 pixels en hauteur, pourquoi 48, parce que j'utilise le système de grille à huit points, donc tout élément devrait avoir une hauteur qui est un multiple de huit. Maintenant, je vais prendre mon logo et je vais le positionner sorte qu'il soit 64 pixels de ce bord. Pour ce faire, je vais maintenir Option sur Mac enfoncée, mais il peut maintenir Alt sur un PC. Donc sur Windows. Je vais déplacer le curseur de ma souris jusqu'à ce que je puisse référencer les bords que je veux. Donc, remarquez où il est écrit 71 pixels ici. Cela signifie que le logo est à 71 pixels de ce bord. Je peux utiliser mes touches fléchées maintenant sur mon clavier pour simplement le placer en place de sorte qu'il soit 64 pixels maintenant, à partir de ce bord gauche. Je vais aussi le placer 64 pixels du haut. Donc, pour le faire et le rendre plus facile pour moi, je peux utiliser la touche vers le bas deux fois. Maintenant, je vais maintenir le décalage et utiliser la touche haut trois fois. Parce que si vous vous souvenez de maintenir la touche Maj enfoncée tout en appuyant, un élément le fera par incréments de dix pixels au lieu d'un. Maintenant, mon logo est parfaitement positionné, exactement là où je le veux. Maintenant, faisons la navigation pour cela. Commençons par l'élément de texte. Vous pouvez appuyer sur T sur votre clavier ou cliquer sur ce petit bouton ici. Je vais taper le premier élément de menu. Selon notre filaire. Nous avons quatre éléments de menu : fonctionnalités, captures d'écran, témoignages et prix. Donc, en fait, une chose que vous pouvez faire est que vous pouvez saisir ces liens individuellement, les copier à partir du cadre filaire, et les coller ici. C' est cool ? Maintenant, pour la couleur, nous allons utiliser, blanc, 90 pour cent. Pour le texte, nous utiliserons Brandon grotesque, qui est la police de caractères pour nos en-têtes. 18 pixels standard. Hauteur de ligne de 24 pixels. Ensuite, nous devons les positionner à égale distance les uns des autres. Nous pourrions le faire manuellement en sélectionnant chacun d'eux. Ok, c'est un 24 pixels. Peut-être que je voulais être un 32 pixels. Je peux le faire. Ensuite, vous devrez faire la même chose avec le reste. Habituellement, cela fonctionne. Mais il y a un moyen beaucoup plus facile de faire les choses et c'est en utilisant la mise en page automatique. C' est probablement ma fonctionnalité préférée dans Figma. La mise en page automatique vous permet de regrouper un ensemble d'éléments et définir une distance égale entre eux ou autour d'eux. C' est la même chose que d'utiliser la marge et le remplissage en CSS. Donc, pour ce faire, vous devez sélectionner tous les éléments que vous souhaitez ajouter. Vous pouvez cliquer sur la mise en page automatique ou appuyer sur Maj A sur Mac et Windows. Ou il peut cliquer avec le bouton droit de la souris et sélectionner, Ajouter une disposition automatique. Donc, cela va créer le nouveau cadre qui contient tous vos éléments. Ensuite, par défaut, il examine comment vos éléments sont positionnés. Les miens sont l'un après l'autre, donc ça montre horizontal, mais je peux changer cela en vertical si je veux. C' est la partie cool ici. Je peux définir un rembourrage horizontal. Donc, cela va ajouter de l'espace à droite et à gauche. Je peux ajouter un rembourrage vertical, ce qui ajoutera de l'espace en haut et en bas, et je peux spécifier l'espacement entre les éléments. C' est celui qui nous intéresse en ce moment. Alors laissez-moi annuler, et je vais spécifier 24 pixels. Donc maintenant mes éléments sont parfaitement espacés. C' est une fonctionnalité que je vous recommande vivement d'utiliser tout le temps car cela rend votre travail tellement plus facile. Donc avec ça, nous allons prendre notre menu principal et nous allons le positionner. On va l'aligner sur la grille. Je ne suis pas sûr que vous puissiez le voir ici correctement. Mais maintenant il est aligné sur la grille et Figma est en fait très intelligent à ce sujet. Il s'enclenche automatiquement en place. Ensuite, je peux sélectionner mon menu et mon logo. Je peux aller ici au panneau d'alignement et je peux définir une ligne des centres verticaux. Facile comme une tarte. Avec ça, la première partie de notre héros est terminée. Nous avons le logo, la navigation et l'arrière-plan. [ inaudible] La première partie de la section des héros est maintenant terminée. Si vous n'avez pas suivi et travaillé à mes côtés, allez-y et créez, dès maintenant pour que vous soyez prêt pour la prochaine étape. Comme d'habitude, n'hésitez pas à apporter votre propre style ou votre propre vision à ce design. J' aimerais voir ces résultats dans la galerie du projet. Maintenant, en supposant que vous avez conçu avec succès dans cette première partie de la zone des héros, je pense qu'il est temps de le finir. Nous allons traiter dans la leçon suivante, où nous allons ajouter le contenu du héros. Alors je te verrai là-bas. 7. Contenu de héros: Bienvenue dans la classe. Dans cette leçon, nous allons terminer la conception de la section héros. Auparavant, nous avons créé la structure pour elle avec la grille, le logo, la navigation et l'arrière-plan. Maintenant, il est temps d'ajouter le contenu. Commençons. Le contenu du héros, si nous regardons le filaire, est composé d'un objet multimédia qui peut être image, vidéo n'importe quoi, et un titre, sous-titre et c'est une option non appelée. Nous avons ce bouton, et ce lien qui prend probablement juste à une vidéo pop-up, j'imagine. Pour nous faciliter les choses, sélectionnons tous ces éléments. En fait, sélectionnons ce groupe entier où il dit contenu, et je vais juste le coller ici. Maintenant, abordons d'abord le cap. Voici un conseil rapide pour vous. Si vous souhaitez sélectionner un élément qui se trouve à l'intérieur d'un groupe, vous devez normalement sélectionner le groupe, puis double-cliquer pour entrer dans le groupe. Mais si vous voulez le faire sans double-cliquer, vous pouvez maintenir la touche Commande sur Mac ou Contrôle sous Windows enfoncée. Cela vous permettra de cliquer et de sélectionner n'importe quel élément quelle que soit sa profondeur dans la structure de la couche. Pour le titre, nous allons changer sa couleur en blanc. Ensuite, nous allons revenir à notre typographie et nous allons utiliser le style de la rubrique 1. Maintenant, vous pouvez jeter un coup d'œil sur ces valeurs et les valider en mémoire, puis les répliquer de l'autre côté, ou vous pouvez cliquer avec le bouton droit de la souris, aller à Copier/Coller, Copier les propriétés, puis vous pouvez revenir à la conception principale, droit- cliquez sur, Copier/Coller, Coller les propriétés. Cela changera tout, la famille de polices, le poids, la taille de la police, la hauteur de la ligne, tout cela. Maintenant, tout ce que nous avons à faire est fondamentalement changer la couleur et faisons monter la grille, alignons cela sur la grille, et nous allons changer la largeur de cet élément de sorte qu'il s'étend sur sept colonnes. Nous avons 1, 2, 3, 4, 5, 6, 7. Ensuite, nous allons cibler ce morceau. Pour cela, revenons à la typographie et sélectionnons un style qui fonctionnerait le mieux pour nous. Dans notre cas, nous utiliserons probablement la rubrique 5. Clic droit, Copier/Coller, Copier les propriétés, revenir en arrière et Coller les propriétés. Maintenant, cela ne fonctionne pas vraiment bien en moyenne, alors revenons à la normale. Vous pouvez apporter ces modifications, pas de problème. Redimensionnons cela aussi bien et passons en fait à la largeur automatique. Cela signifie que la zone de texte sera redimensionnée à la largeur maximale du texte à l'intérieur. Passons sa couleur au blanc, et utilisons une teinte plus modérée, 60 pour cent, disons. Impressionnant. Nous faisons de grands progrès. Maintenant, regardons ce bouton. Pour ce bouton, je veux que le texte dise, télécharger gratuitement, mais je voudrais aussi une belle flèche pour s'asseoir juste à côté. Je vais vous montrer une façon incroyable de créer des boutons dans Figma qui vous permet de taper n'importe quel texte que vous voulez et ils vont redimensionner automatiquement. C' est avec l'aide de notre ami fidèle mise en page automatique. Ce que je vais faire, c'est sélectionner le texte lui-même, et je vais en fait déplacer cela à l'extérieur, et je vais dissocier ceci. Lorsque le texte est sélectionné, appuyez sur « Maj+A » pour ajouter une mise en page automatique, et je vais sélectionner 32 pixels, remplissage horizontal, 16 pixels, remplissage vertical et un espacement de 16 pixels entre les éléments. Maintenant, ce que je peux faire est que je peux ajouter une couleur de remplissage et je vais ajouter du blanc de remplissage à 100 pour cent. Je vais aussi ajouter un rayon de 100 pixels. Tu sais pourquoi j'ai fait ça ? Parce que si nous allons jeter un coup d'oeil à la fiche de projet, sous les considérations de conception, le client nous dit  : « Hey, nous aimons les boutons de pilule et de fantôme. » Un bouton de pilule est celui avec des coins très arrondis. On dirait une vraie pilule. Avec cela fait, je peux sélectionner le texte à l'intérieur et je peux le définir à ma couleur primaire. Allons à Couleurs, sélectionnez mon primaire, revenons et collez-le dans. En ce qui concerne le texte, nous allons utiliser Brandon Grotesque. Laisse-moi vraiment zoomer ici. Nous allons utiliser 18 pixels gras, 24 pour la hauteur de ligne, et nous devrions être prêts à partir. Maintenant, je vais aussi y ajouter une ombre portée. Je vais sélectionner mon cadre, que je vais appeler Button, et sous effets, je vais choisir Ombre portée. La même chose que nous avons utilisée pour ces éléments ici. La dernière chose que nous devons faire ici est d'ajouter une belle flèche. Pour cela, je vais aller à mon application ici, je vais chercher une flèche, et nous allons choisir la flèche à droite dans l'ensemble Microns. Cliquez, faites glisser et déposez-le. Ici, nous allons le garder à 24 pixels et je vais appuyer sur « Commande+X ». Je vais sélectionner ce texte et Commande+V+V ou Ctrl+V pour Windows. Cela va le coller juste à côté de ce texte à l'intérieur de mon cadre de bouton. Tout ce que j'ai à faire maintenant est de changer la couleur à la même couleur que le texte. Tiens, je vais te donner un autre conseil professionnel. Lorsque vous travaillez dans Figma, et que vous voulez changer la couleur sur plusieurs éléments, vous pouvez sélectionner l'élément parent et lorsque vous voyez les couleurs de sélection, cela vous donnera essentiellement les couleurs de chaque élément de cette sélection. Si je veux changer la couleur de cette flèche à la couleur de ce texte, tout ce que j'ai à faire est de copier la couleur du texte, coller, et je suis prêt à y aller. Maintenant, notre bouton est terminé, et parce que j'utilise la mise en page automatique, je peux changer le texte sur ce bouton, comme ça et le bouton se redimensionnera automatiquement. C' est cool ? Bien sûr, je peux également changer le rembourrage et la distance entre les articles. Je peux le faire, et je peux le faire. Je peux le faire. Eh bien, c'était une très grande valeur, mais vous comprenez le point. J' ai un contrôle très fin sur la façon dont cela ressemble et c'est super facile à utiliser. Maintenant, voyons à propos de ce lien d'introduction vidéo. Pour cela, je vais utiliser ma couleur secondaire. Sélectionnons cela, copiez-le, collez-le, tapez face. Nous allons utiliser Brandon Grotesque à nouveau, 18, 24 et Bold. La dernière chose à faire est d'y ajouter une petite icône, parce que je voulais montrer le fait que, hé, si vous cliquez sur ce lien, une vidéo va jouer. Donc nous avons besoin d'une icône qui dit jouer. On a celle-là ou si on va à Ioniconn, on aura celui-là. Glisser-déposer. Je vais redimensionner à 24, comme ça et je vais sélectionner l'icône et le texte. Je vais appuyer sur « Maj + A » pour créer une mise en page automatique. Maintenant, lorsque vous faites cela, vous pouvez aligner des éléments de plusieurs façons différentes. Si la disposition automatique était horizontale, vous pouvez aligner les éléments en haut, au centre ou en bas. Si votre disposition automatique est définie sur verticale, vous pouvez aligner les éléments vers la gauche, le centre et la droite. C' est ce qu'il fait. Vous pouvez également choisir de monter un élément ou de descendre. Bien sûr, si la mise en page est en mode horizontal, vous pouvez déplacer les éléments vers la gauche et vers la droite. Vous pouvez également utiliser les raccourcis clavier gauche, droite, haut, bas. Dans mon cas, je vais choisir d'aligner cette icône au milieu et aussi ce texte au milieu. Quant à la distance entre les éléments, je vais choisir 16 pixels. Je vais m'assurer que j'utilise la même couleur sur cette icône. Maintenant, ce que vous pouvez faire est que vous pouvez regrouper ces deux éléments avec la mise en page automatique. Vous pouvez appuyer sur « Maj + A » et cela va créer un autre cadre pour les deux. Il peut définir son espacement entre les éléments sur 32. Par défaut, cela alignera ces éléments au milieu. Maintenant, je veux la même distance entre ces trois éléments. Ce que je peux faire, c'est que je peux les sélectionner tous en maintenant la touche « Maj » enfoncée. Je peux faire « Maj + A » pour ajouter la mise en page automatique. Je vais simplement changer la distance entre eux ou l'espacement entre eux à 32. Aussi, je vais m'assurer que tous ces éléments sont alignés vers la gauche. Comme ça. Maintenant, la dernière chose à faire est de positionner ce contenu à une distance respectable de l'en-tête. Dans notre cas, c'est 96 pixels, ce qui est d'ailleurs un multiple de huit. En fait, je vais garder ce positionnement. Mais si vous voulez le positionner différemment, vous utiliseriez les touches fléchées haut et bas. Cool. Maintenant, c'est la première partie du contenu. La dernière partie consiste à ajouter cet objet multimédia. Voici comment nous allons y arriver. Nous allons commencer par créer une forme simple et nous allons ajouter un rayon de bordure de 8, une hauteur de 240 pixels. Qu' en est-il de la largeur ? Eh bien, pour la largeur, vous pouvez aller fondamentalement n'importe quelle largeur que vous voulez. Mais ce que j'aimerais faire, c'est que j'aime utiliser un rapport 16 sur 9. J' ai un petit plugin cool pour ça. Ça s'appelle Aspects. Vous pouvez le trouver dans le répertoire des plugins Figma. Il suffit de chercher des aspects et vous le trouverez. Cela me permet de sélectionner un élément, choisir un rapport d'aspect et de choisir une propriété à redimensionner en fonction de ce rapport d'aspect. Dans mon cas, je veux changer la largeur car la hauteur est définie à ses dimensions correctes. Je vais appuyer sur appliquer et cela a changé la largeur à 427 pixels. Maintenant, j'ai une forme parfaitement dimensionnée pour un rapport de 16 sur 9. Avec le sélectionné, ce que je peux faire maintenant est de cliquer dessus et sous Remplissage, sélectionnez « Image », choisissez « Image ». Je peux ouvrir mon kit de démarrage de page de destination, aller dans les images d'espace réservé et je peux choisir n'importe laquelle des images de ce kit d'interface utilisateur. Choisissons « Main ». Ici, vous avez plusieurs options pour le comportement de l'image. Vous pouvez choisir entre Remplir, Ajuster, Recadrer et Carrelage. Dans mon cas, je vais juste le laisser sur Fill. Ensuite, je vais sélectionner ceci et je vais ajouter une ombre portée. Comme ça. Maintenant, ce que je veux faire est de créer une belle grille à partir de ces images. Je vais sélectionner « Dupliquer » et je vais positionner cela à 32 pixels de l'autre. Dupliquons à nouveau, 32 pixels. Faisons-le encore. Faisons-le encore. Faisons une troisième colonne. Comme ça. Maintenant, allons de l'avant et ajoutons quelques images fraîches ici. En fait, pour le rendre plus intéressant, voici ce que nous allons faire, nous allons supprimer les meilleures images ici. On va les déplacer comme ça. Cela ajoute juste un peu d'intérêt visuel. Changeons les images maintenant. Lorsque vous avez une forme rectangle avec un remplissage d'image, vous pouvez double-cliquer dessus pour ouvrir la boîte de dialogue de remplissage. Alors choisissons une autre image, peut-être celle-ci et faisons la même chose pour le reste. Très bien, donc une fois que vous êtes satisfait du résultat, voici ce que vous faites. Vous sélectionnez tous ces éléments et vous allez ici où il est dit composants et sélectionnez Créer un composant. Maintenant, les composants et fig-ma vous permettent de réutiliser certains éléments. Toute modification apportée au composant parent modifiera également les composants enfants. Si je dupliquais ce composant dans une autre page et que j'apporterais des modifications à cette instance maître, ces modifications seront également reflétées dans les autres pages. Maintenant que je l'ai transformé en un composant, je peux le sélectionner et je peux le faire pivoter. Nous allons utiliser la même rotation de 16 degrés que nous avons utilisée sur ces éléments. Rappelez-vous ce nombre 16 degrés. Nous allons l'utiliser assez souvent dans la conception de cette page. Maintenant, il est tourné. Je peux le déplacer dans sa position finale et c'est vraiment à vous et à quoi vous voulez qu'il ressemble. Dans mon cas, je vais probablement laisser quelque chose comme ça ou quelque chose d'autre que je peux faire est ce qui suit. Je peux changer l'image ici à l'image principale. Je peux choisir de cacher complètement cette image et je peux même la glisser dans quelque chose comme ça et je peux la déplacer vers bas de sorte que le texte ici sorte de entrelacer avec cette image peut-être un peu plus comme ça. Encore une fois, c'est une question de préférence personnelle, mais je pense que cela aura l'air assez bon. Allez-y et jouez avec ça, jouez, voyez ce qui vous ressemble le mieux. Maintenant, en parlant de ce qui semble le mieux, regardez de plus près cette ombre. Tu vois comment c'est coupé ici ? C' est parce que lorsque vous ajoutez ou lorsque vous créez un cadre avec mise en page automatique, il récupère généralement cette case où il indique le contenu du clip et qui coupe essentiellement tout contenu qui se trouve en dehors des limites de ce cadre. Dans notre cas, l'ombre est en dehors des limites. Je peux décocher ça et ensuite on peut aller plus loin et décocher cette case et maintenant, voir comment l'ombre s'affiche. C' est quelque chose que vous pouvez faire quand vous voyez cela se produire. Quand une image qui devrait être en dehors des limites de votre cadre ne s'affiche pas habituellement, c'est le coupable juste ici. Très bien, il y a une dernière petite chose que nous devons faire ici. Juste ici, en bas, nous allons ajouter une petite icône qui permettra aux utilisateurs de savoir que, « hey, vous pouvez faire défiler cette page vers le bas. » Pour créer cela, commencez par un rectangle. Nous allons définir sa largeur à 24, sa hauteur à 48, son rayon à 100, et nous allons en fait supprimer la couleur de remplissage et nous allons ajouter un trait ou une bordure, et la bordure sera blanche. Il va être à l'intérieur d'un pixel, puis à l'intérieur que nous allons créer un beau cercle en utilisant l'outil ellipse. Lorsque vous utilisez l'outil ellipse, nous pouvons libérer la main ou nous pouvons maintenir le décalage vers le bas et il va s'accrocher à la même largeur et la même hauteur. Faisons ça très petit, six par six devraient faire l'affaire. Remplissez blanc, puis déplacez-le à l'intérieur de ma petite icône ici. Vous pouvez le définir à huit pixels du haut. Ça devrait faire l'affaire. Sélectionnez les deux, commandez G pour les regrouper tous ensemble, et nommez-le défiler ou tout ce que vous voulez qu'il soit. Maintenant, faisons monter la grille et nous allons l'aligner sur la grille. Comme ça. Évidemment, vous n'avez pas à l'aligner sur la grille si vous vous sentez Il semble mieux dans une position particulière comme si vous pouvez le faire - pas de problème. n'est pas parce que nous utilisons une grille que nous devons aligner chaque chose sur elle. C' est la section des héros finie. Bon, maintenant c'est à ton tour de finir la section des héros. Si tu l'as déjà fait, fantastique. Si ce n'est pas le cas, continuez à regarder cette leçon si vous le devez et complétez cette section. Maintenant, vous trouverez que, c'est quelque chose de très intéressant que je voulais vous dire, vous trouverez que dans la plupart des cas, le héros ou la partie en-tête d'un site Web est la plus difficile à faire. Je ne sais pas pourquoi c'est, mais en général, une fois que vous l'avez fait, c'est juste une navigation en douceur à partir de ce moment. Je pense que c'est parce qu'après avoir terminé l'en-tête ou la section héros, vous avez une base sur laquelle bâtir, non ? Vous avez un point de départ. Donc, je pense que c'est plus facile pour toi de faire avancer les choses. Nous sommes prêts à passer à autre chose. La section suivante de notre liste est la première section pour les fonctionnalités. Nous aborderons ça dans la prochaine leçon. On se voit là-bas. 8. Première section pour les Caractéristiques: Bienvenue dans la classe. Dans cette leçon, nous allons concevoir la première section pour les fonctionnalités. C' est là que nous utiliserons la majorité des icônes et jouerons aussi beaucoup avec les couleurs. Ça devrait être amusant alors commençons. Commençons par jeter un oeil au cadre métallique afin que nous sachions exactement ce que nous devons faire. C' est donc la section que nous devons concevoir. Comme vous pouvez le voir, nous commençons par le titre de la catégorie, puis une petite description, puis chaque fonctionnalité est présentée comme ceci. Il a un titre et il a une description. Certaines des fonctionnalités ne sont disponibles que dans la version Pro, nous devons donc concevoir une sorte de badge pour cela. Nous allons également ajouter quelques icônes. Si je me souviens bien du briefing du projet, chacune de ces catégories de fonctionnalités a une sorte de sous-titres. Donc, si nous ouvrons le dossier de projet, et nous regardons les fonctionnalités, il y a une catégorie de fonctionnalités, et voici une autre catégorie de fonctionnalités, celle dont nous avons besoin en ce moment « Budgeting made simple ». Nous avons un sous-titre, il s'appelle « Budget des enveloppes ». Nous devons donc nous assurer de l'ajouter quelque part aussi. Alors, en fait, allons-y et attrapons ça. Copions-le et allons par ici, collons-le. Nous allons aussi obtenir à peu près tout le contenu que nous avons ici. Nous nous inquiétons de le coiffer dans un petit peu. Une autre chose que je voudrais faire est d'augmenter la hauteur de ce cadre. Maintenant, commençons par le haut, d'accord ? Avec cela, appelons-le sous-titre. Maintenant, parce que cela doit être très discret, donc il n'a pas besoin de sortir autant. Nous allons revenir à notre typographie, et nous allons utiliser les petits styles. Alors allez-y et copiez les propriétés de ceci et collez-les ici. Aussi, nous allons changer sa couleur. Je pense qu'on devrait utiliser ce type secondaire de couleur rouge corail. Alors allez-y et copiez-la, collez-la dans, et nous devrions être prêts à y aller. Maintenant, faisons monter la grille. Alignons effectivement cela à la grille et positionnons-le par rapport à cet élément à environ 120 pixels. Ça n'a pas besoin d'être parfait. Dans certains cas, il est plus important que l'ensemble de la mise en page semble correctement plutôt que d'adhérer à cet ensemble de règles strictes. Donc en ce moment je l'ai positionné à 120 pixels de cet élément ici. Mais si ça n'a pas l'air bien, je pourrais le pousser un peu vers le bas. Il n'a pas besoin d'être parfait en pixel. Passons maintenant aux éléments suivants. D' abord en fait, sélectionnons ceci, permet de tout dissocier. Maintenant, cette rubrique, voyons quel style nous devrions utiliser pour cela. Je pense peut-être en tête trois ou en quatrième, mais en troisième position semble plus approprié, alors copions cela et collons-le et utilisons aussi la bonne couleur pour cela. Donc on va aller à notre gris, je vais prendre ça et on va le coller ici. On va utiliser Gray 100. Au fait, quand je dis gris 100, ça veut dire gris 100% opacité. Si je dis gris 40, cela signifie cette valeur, cette couleur ici, gris 40% opacité. Alors gardez ça à l'esprit. Alignons cela correctement ici aussi. Poussons cela en fait et laissons environ 32 pixels de distance entre ces deux éléments. L' étape suivante est cet élément ici, qui devrait également être placé 32 pixels du titre principal. En fait, je vais le redimensionner d'abord. Je veux que ça occupe environ cinq colonnes de grille. Donc on va le redimensionner jusqu'à ici. Maintenant, pour le style actuel, revenons à la typographie et je pense à utiliser la rubrique 5. cap 5 devrait faire l'affaire. Mais nous allons vraiment supprimer ce poids moyen parce que c'est un peu trop. Si je pense à ça, on a utilisé le même style ici, non ? 25,32 pour la hauteur de ligne. Donc soyons cohérents. Régulier et nous utiliserons cette couleur. Mais je pense qu'on va utiliser une teinte de ce gris. Voyons voir, peut-être celle-là, c'est 50 ou 60 ans. Ouais, je pense que celui-là a l'air bien. Alors faisons-le gris 60. Cool. Donc maintenant, ce que je peux faire est simplement sélectionner tous ces, déplacer A pour ajouter la mise en page automatique. Maintenant, chaque fois que je change ce texte, les éléments qui l'entourent seront également affectés. C' est une façon très efficace de travailler dans Figma. Passons maintenant à notre attention sur les fonctionnalités réelles. La première chose que je vais faire est de changer la couleur et la famille de polices et toutes les informations de texte. Donc, pour ces titres, nous devons utiliser la police de titre, mais pour le texte, nous devons utiliser la police de corps et en ce moment , ce sont comme un élément de texte, est juste le titre, entrez, puis le texte lui-même. On doit diviser ça, donc ce que je vais faire, c'est enlever ça de là, en double. Je mets essentiellement le titre dans son propre élément de texte. Je vais définir Auto Width. Ensuite, je vais le regrouper avec ceci et sélectionner Maj A. Pour l'espacement entre les éléments, je vais sélectionner 16 pixels. On n'a pas besoin de rembourrage ici. Maintenant, je vais aligner ceci avec ma grille, et le texte va être de trois colonnes de large ou 280 pixels. Changeons la couleur. Pour ce moment, je vais utiliser la rubrique 5. Copiez les propriétés d'ici et collez les propriétés, et encore une fois assurez-vous que nous mettons à jour la couleur du texte. Pour le texte, nous allons utiliser le style de paragraphe. Copiez les propriétés à partir de cela, collez-les ici, et assurez-vous de mettre à jour la couleur également. Pour les paragraphes, Tisa Sans Pro, 18 pixels, taille de police et hauteur de ligne 24. Une autre chose que je veux faire, c'est d'abaisser un peu l'opacité sur ceux-ci. Je vais utiliser 80%. Laisse-moi te montrer à quoi ça ressemble. 80% sur le titre et 60% sur le texte. En gros, nous devons faire la même chose pour le reste des articles. Je vais faire un de ces éléments à nouveau pour que vous puissiez voir le processus, et ensuite je vais avancer rapidement pour les autres. Tout d'abord, nous devons séparer le titre de la description. Ensuite, nous devons faire le titre Auto Width. Sélectionnez le titre et la description. Maj A pour créer la mise en page automatique. Définissez l'espacement sur 16, puis copiez les propriétés du texte, collez-les. Copiez les propriétés du titre et collez-les. C'est ça. Alors maintenant, avançons vite jusqu'à ce que je fasse le reste des changements. Maintenant que tout est correctement mis en place ici, allons de l'avant et regrouper ces. Nous avons des bénéficiaires, des catégories et nous pouvons mettre dans des transactions planifiées ici. Allons également les aligner sur la grille. Donc, la façon dont je veux que cela se produise est, je veux que les éléments de texte réels s'étendent sur trois colonnes, alors je vais laisser une colonne vide. Ensuite, le groupe suivant commencera à la colonne suivante, et ainsi de suite et ainsi de suite. En fait, une dernière chose que je dois faire ici, est de redimensionner tous ces éléments de texte à 280 pixels. On y va. Donc je devrais y aller relativement, tout simplement comme ça. Nous allons les sélectionner tous, allons les aligner vers le haut, puis les sélectionner à nouveau, Commande ou Contrôle G pour créer un groupe. Suivant va être, disons plusieurs budgets, puis peut-être le suivi des objectifs et la synchronisation entre les appareils. Enfin, nous aurons des rapports et synchroniserons avec votre banque comme ça. Maintenant, sélectionnez ces, alignez-les sur la commande supérieure G. Sélectionnez ces, alignez-les sur la commande supérieure G à grouper. Voilà ce que je veux. Je veux un espacement de 64 pixels entre chacun de ces groupes. Je veux dire l'espacement vertical, comme ça. Également 64 pixels entre ceux-ci et ce groupe ici. C' est vraiment facile à faire avec la mise en page automatique. Alors sélectionnez-les tous. Déplacez A, 64 pixels ici, puis assurez-vous que tout est aligné vers la gauche, comme ça. Je suis bon d'y aller. La dernière chose que nous devons faire ici est d'ajouter les icônes. Ajoutez un badge Pro au lieu de ces morceaux de texte ici, où il est dit Pro. Allons de l'avant et créons ce badge Pro, et pour cela, je vais choisir l'outil Rectangle ou appuyer sur R sur le clavier. Ou en fait, faisons cela avec la mise en page automatique à nouveau. Donc T pour l'outil Texte, je vais dire Pro, pour la police de caractères, je vais utiliser Brandon Grotesque, en gras, 14 pixels et aussi 5% d'espacement des lettres. Voici un conseil professionnel, Lorsque vous travaillez avec des lettres majuscules ou des mots majuscules, avec une taille de police faible ; pour améliorer la lisibilité, vous devez toujours augmenter l'espacement des lettres. Juste pour vous donner un exemple, voici sans espacement des lettres et voici avec l'espacement des lettres. Voyez comment vous pouvez lire ce bit plus facilement que ce bit. C' est pourquoi, nous avons également ajouté l'espacement des lettres à ce style ici ou à ces éléments de texte. Maintenant, avec le sélectionné, déplacez A pour créer un cadre autour d'elle. Ajoutons un remplissage. Le remplissage va être notre couleur principale, puis 100 pour la bordure radieuse Ajoutons peut-être huit pixels de remplissage horizontal, et peut-être quatre pixels sur le remplissage vertical. On n'a pas besoin d'espacement ici. Le texte lui-même que nous allons faire blanc. Je pense que nous devrions être bons pour y aller. Ce que nous pouvons faire ici, nous pouvons réduire encore plus la taille de la police et avec l'espacement des lettres aussi. Nous allons chacun utiliser 16 pixels pour l'espacement des lettres. Je pense que ça a l'air un peu mieux. Donc, avec cela, parce que nous allons l'utiliser à plusieurs endroits, c'est toujours une bonne idée de créer un composant. Alors sélectionnez-le et allez à créer un composant ou utilisez le raccourci clavier. Donc maintenant, je vais frapper la commande X, pour la couper, et je vais commencer à l'insérer, au lieu de ce morceau de texte. Donc plusieurs budgets, Commande V, puis pour créer une mise en page automatique avec seulement ces deux éléments, je vais les sélectionner et appuyer sur Maj A, puis je vais sélectionner le mode à horizontal. Je vais m'assurer de décocher le contenu du clip. Je vais aligner ce badge au centre et m'assurer que cela est aligné au centre aussi. En ce qui concerne l'espacement, 16 pixels sont nombreux. Alors maintenant, je vais aller de l'avant et faire la même chose pour le reste. D' accord. Des haricots frais. Maintenant que nous avons à peu près tout en place, tout ce que nous avons à faire maintenant est d'ajouter les icônes. Donc, pour ce faire, nous pouvons commencer dans notre mise en place d'icônes. Je vais utiliser l'ensemble des ionicones. Alors, cherchons des gens. Je vais utiliser, People Outline, Copier ça, Coller et je vais le redimensionner. Maintenant, voici une situation que vous pourriez rencontrer lorsque vous utilisez figma sur certains éléments SVG. Lors de l'importation dans figma et redimensionné de la manière normale avec l'outil Déplacer sélectionné. Vous verrez que les formes à l'intérieur ou les traits des formes deviennent très épais. Ce n'est pas quelque chose que tu veux faire. Au lieu de cela, vous devez aller ici et sélectionner échelle ou K. Si vous faites cela, vous verrez que l'élément est maintenant redimensionné correctement. Nous allons donc redimensionner ceci, à 24 pixels de hauteur. Quelque chose comme ça. Alors maintenant je vais aligner ça sur la gauche. Vous pouvez également appuyer sur la flèche du clavier gauche et je vais aussi le déplacer vers le haut, en appuyant sur la flèche vers le haut sur le clavier. Il ne reste plus qu'à trouver une belle couleur pour elle. Pour cela, nous allons aller à nos couleurs tertiaires fidèles. C' est l'une des raisons pour lesquelles nous les utilisons. Donc, il est en fait de les prendre en ordre. Je vais copier cette couleur, coller ça ici et, nous sommes prêts à y aller. Donc maintenant, tout ce qu'il reste à faire, c'est de remplir le reste des éléments avec des icônes. Je vais utiliser exactement la même procédure. Je vais en faire une de plus et ensuite je vais avancer rapidement. Donc, pour les catégories, peut-être que nous cherchons une grille. Voyons si on peut trouver. Je vais utiliser le contour de la grille. Alors copiez ça. Sélectionnez le texte ou l'élément où je veux coller dans mon autre élément. Commandez V, puis K pour redimensionner ceci à 24 pixels de hauteur, comme ceci. Déplacez le haut et choisissons une belle couleur pour cela. Peut-être que je ne sais pas, cette violette. Ça n'a pas vraiment d'importance. Vous choisissez juste les couleurs qui vous semblent les plus belles. D' accord. Alors maintenant laissez-moi avancer rapidement et remplir le reste des icônes. D' accord. Ce n'était pas trop mal. Était-ce ? Processus assez rapide, surtout quand vous le regardez sur l'avance rapide. Mais tous plaisanter de côté, il est vraiment simple une fois que vous obtenez le coup de lui, une fois que vous créez un ou deux éléments, est juste rincer et répéter pour faire le reste. [ MUSIQUE] Très bien, à la première section de fonctionnalités est maintenant terminée. Maintenant, c'est à ton tour. Si vous ne l'avez pas déjà fait, allez-y et créez-la dès maintenant. J' ai utilisé une approche à trois colonnes ici, mais vous pourriez faire les choses différemment. Pourquoi ne pas utiliser deux colonnes ou quatre colonnes ? Essayez-le. Voyez comment la mise en page change lorsque vous organisez ces éléments différemment. Donc maintenant, une fois que vous faites cela, vous êtes bien sûr prêt à passer à la prochaine leçon. Dans la leçon suivante, nous allons créer une autre section pour les fonctionnalités, mais cette fois d'une manière différente. Alors j'ai hâte de vous y voir. 9. Deuxième section pour les Caractéristiques: Bienvenue dans la classe. Dans cette leçon, nous allons concevoir le deuxième ensemble de fonctionnalités ou la deuxième section pour les fonctionnalités, quel que soit votre nom et nous le ferons d'une manière différente de la première. Maintenant, lorsque vous concevez une page de destination comme celle-ci ou n'importe quel type de site Web de présentation, il est très important de varier la façon dont vous affichez ces fonctionnalités, et si vous faites cela, assurez-vous de garder les intérêts de l'utilisateur en vie. Imaginez avoir à afficher 30 fonctionnalités dans une page. Maintenant, si vous prenez ces 30 fonctionnalités et que vous les avez toutes jetées dans une liste, par exemple, cela va être tout à fait ennuyeux. Personne ne va lire ça. Au lieu de cela, si vous prenez dix d'entre eux, vous les affichez peut-être dans une grille avec quelques icônes comme nous l'avons fait, puis vous prenez les dix autres ou dix autres et vous les affichez plus bas de la page d'une manière différente et ensuite vous prendre les dix derniers et les afficher encore plus bas de la page, peut-être avec quelques images ou illustrations qui les accompagnent. Eh bien, c'est une meilleure approche parce que cela va garder l'utilisateur engagé et l'utilisateur va digérer ce contenu beaucoup plus facilement. Donc, dans cette leçon, nous allons utiliser une mise en page différente pour le deuxième ensemble d'entités. Commençons. Jetons un coup d'oeil au filaire pour voir exactement ce que nous devons faire. Nous avons donc cette catégorie de fonctionnalités avec cette description, puis quatre fonctionnalités. Maintenant, dans le filaire, j'ai ajouté cette boîte noire comme espace réservé pour une image. Nous pouvons utiliser une image ici ou nous pouvons simplement utiliser le texte. C' est vraiment à nous de décider. Voilà ce qu'on va faire. Nous allons copier tout cela, tout le texte qui est, et nous allons le coller dans notre conception principale comme ça. Mais avant de le faire, faisons un peu de nettoyage. Je pense qu'il est vraiment important que nous travaillions aussi proprement que possible. Alors nommons ces fonctionnalités ou en fait les fonctionnalités une, puis vous pouvez aller de l'avant et renommer ces groupes également. Je ne vais pas le faire ici parce que le temps est essentiel mais sachez que chaque fois que vous créez un design, nommez vos couches et vos groupes en conséquence parce que cela va vous faciliter la vie. D' accord. Donc maintenant, il y a quelques éléments communs que ces deux ensembles d'entités partagent. Donc, nous allons aussi ajouter un sous-titre comme ça. Laisse-moi juste faire tomber ça. Le sous-titre de cette section est, si je me souviens bien, la magie iOS. Maintenant, pour gagner du temps, copiez les propriétés, collez les propriétés, copiez les propriétés et collez les propriétés. Cool. Maintenant, nous allons nous assurer que ce texte est affiché sur un maximum de cinq colonnes, juste comme ça, et celui-ci aussi puis sélectionnons tous ces décalage A et sélectionnons 32 pixels entre eux et assurez-vous également de décochez le contenu du clip si vous constatez que certains des expéditeurs présents sur le texte sont coupés. Cool. Assurez-vous que tout est aligné à gauche et que nous sommes prêts à partir. Maintenant, je vais prendre tout cela et le positionner 240 pixels de la section ci-dessus et maintenant regarder cette page, je me rends compte que j'ai oublié de faire quelque chose. J' ai oublié d'ajouter un fond très léger aux premières sections, aux deux premières sections, excusez-moi. Laisse-moi réparer rapidement ça. Je vais commencer par créer un rectangle et je vais le positionner ci-dessous. Rendons ça plus grand comme ça, et comme ça. Redimensionnons cela de sorte que nous ayons un rembourrage ici en bas ou un espace entre le bord et ces éléments de 120 pixels. Maintenant, voici une autre astuce rapide et un raccourci clavier très utile. Rappelez-vous quand je vous ai parlé des outils de poussée, où vous pouvez utiliser les flèches du clavier pour déplacer un élément vers la gauche, droite, le haut et le bas ? Maintenant, si vous appuyez sur Commande sur un Mac ou Contrôle sous Windows, vous pouvez redimensionner un élément. Donc, par exemple, si je maintiens la commande enfoncée et que j'appuie sur la touche fléchée vers le bas, et que je fais attention ici, je peux réellement redimensionner cela à partir du clavier, et si je maintiens aussi la touche Maj enfoncée, je peux le redimensionner encore plus rapidement. La même chose vaut pour la largeur. Donc, Commande ou Contrôle, puis les flèches gauche et droite me permettent changer la largeur d'un élément et encore une fois, si je maintiens la touche shift enfoncée, je peux changer ces valeurs par incréments de dix par rapport à des incréments d' un avec juste la touche de commande ou de contrôle enfoncée. C' est ainsi que vous pouvez redimensionner un élément à l'aide de votre clavier. Revenons à ce morceau. Nous devons redimensionner cela de sorte que nous ayons 120 pixels de rembourrage sur le fond, juste comme ça et maintenant utilisons une belle couleur de fond. Je pourrais utiliser un gris, un gris très clair, peut-être dix gris d'ici ou je peux utiliser le dix primaire. Alors faisons ça. Donc primaire 10 pour cent et si je pense que c'est un peu trop, je peux aller encore plus bas 5 pour cent et je pense, en fait, c'est la valeur que je vais garder à, 5 pour cent et cela crée une belle séparation entre cette section ici et cette section ici. Alors maintenant, sélectionnons tous ces éléments et poussons à nouveau vers le bas jusqu'à ce que nous obtenions à 240 pour cent de cet élément supérieur. Cool. Maintenant, stylisons ces éléments. Pour tout cela, nous allons utiliser les styles suivants, Brandon Grotesque, régulier, et je vais utiliser exactement le même style que nous avons ici. Donc copiez coller, copier les propriétés, coller les propriétés. La seule différence est que je vais utiliser 80 pour cent sur la couleur au lieu de 60 pour cent et corrigeons également la capitalisation ici. Donc maintenant, ce que je vais faire est de créer des éléments de carte à partir de ces éléments de texte. Vraiment facile à faire, sélectionnez un élément, déplacez A pour ajouter la mise en page automatique, puis sélectionnez verticale 32, rembourrage horizontal 64, rembourrage vertical 0 ici. Nous pouvons ajouter un remplissage en blanc et nous pouvons également ajouter une ombre portée. Donc, l'ombre portée va être comme ça, 30 pour le flou, 0 x, 20 y, et ensuite nous allons utiliser cette couleur, notre gris principal 25 pour cent comme couleur d'ombre et aussi, ajoutons un rayon de bordure de huit pixels. Maintenant, ce que je peux faire est que je peux définir le texte pour l'aligner au centre, et je peux le redimensionner de sorte qu'il s' étend sur trois colonnes et aussi, nous allons redimensionner celui-ci jusqu'à ce que nous ayons le remplissage désiré ici sur la gauche. Bon, alors maintenant c'est juste rincer et répéter pour les deux autres éléments. Donc, sélectionnons-les tous et alignons-les au centre. Réglons leur largeur à 216 pixels, puis nous allons faire déplacer A, déplacer A, déplacer A, déplacer A, sélectionner ce cadre, copier les propriétés, sélectionner ces images, coller les propriétés. Plutôt cool, non ? Maintenant, nous allons les aligner sur notre texte. Nous allons utiliser un espacement de 64 entre ces éléments, et positionnons-les comme ça. Je vais utiliser 32 pixels d'espacement entre ces éléments. Maintenant que nous les voyons tous ensemble, nous remarquons que celui-ci est plus petit que le reste. Nous devons définir une largeur fixe pour cela. Puisque nous avons ajouté la disposition automatique, nous devons basculer l'orientation vers la verticale afin que nous puissions ensuite sélectionner la largeur fixe au lieu de la largeur automatique. Comme ça. Maintenant, je peux redimensionner ceci à n'importe quelle valeur dont j'ai besoin. Pour rendre cela un peu plus intéressant, je vais sélectionner les deux et je vais les pousser vers le bas 32 pixels. Maintenez la touche Maj enfoncée et appuyez sur la touche fléchée vers le bas, 1, 2, 3, je lâche la touche Maj 1, 2. Maintenant, j'ai un écart de 32 pixels entre le haut de ceci et le haut de ceci. Maintenant, nous pouvons aller de l'avant et les regrouper. On peut aller de l'avant et Shift A là-dessus. Assurez-vous de décocher le contenu de l'élément. Cette partie est maintenant terminée. Pour rendre cette section un peu plus intéressante, nous ferons deux autres choses. Un, c'est qu'on va ajouter des images. Pour cela, je vais réellement déplacer cette section entière vers la droite et je vais revenir à mon kit de démarrage, je vais sélectionner les images de l'espace réservé et je vais sélectionner l'iPad Pro et l'iPhone 7. Glisser-déposer dans ma page. Ils sont un peu trop gros en ce moment, alors redimensionnons-les. Je vais redimensionner ça à environ 700, je ne sais pas, et puis je vais redimensionner ce téléphone à environ la moitié de cette valeur, à 350. Je ne connais pas le rapport exact entre ces deux éléments, mais en un coup d'œil, cela semble juste. Ce que je vais faire maintenant, c'est mettre l'iPhone sur l'iPad pour qu'ils ressemblent à ça. Alors je vais pousser ça vers le bas, 10, 20, 30, 1, 2, donc 32 pixels. Je vais sélectionner les deux, Commande G pour les regrouper et puis je vais aligner le bord de l'iPhone avec le bord de cette colonne. L' idée est de laisser cette colonne vide ici. Je vais sélectionner ces deux, sélectionner ceci, aligner le haut. Enfin, la dernière chose que je veux faire est de sélectionner cette image de l'iPad et d'ajouter l'ombre portée. Sélectionnez l'iPhone et faites de même. Cela crée juste un peu de profondeur. Plutôt cool. Maintenant, enfin, ce que je veux faire est d'ajouter quelques rayures ici. Si vous vous demandez comment j'ai eu l'inspiration pour ce design avec les angles et autres choses, eh bien, j'ai regardé le dossier de projet où le client nous a dit que, hey, voici quelques sites Web que nous aimons et l'un d'eux est Stripe. Si vous n'avez pas vu le site Stripe , c'est très cool. On dirait quelque chose comme ça. Vous pouvez voir que j'ai eu beaucoup d'inspiration d'ici avec les couleurs audacieuses, avec les angles, avec la façon dont cette section d'image est présentée ici. Parce que j'ai commencé à utiliser cette approche diagonale ou cette approche angulaire, je vais l'utiliser dans le reste de la page. Je vais commencer par créer un rectangle sur ce grand. Je vais régler sa rotation à 16 degrés. Ensuite, je vais le positionner quelque part ici pour qu'il passe juste à travers la liste des fonctionnalités. Je vais le mettre sous ce cadre, comme ça. Je vais y ajouter un dégradé. Pour ajouter un dégradé, nous pouvons le faire de deux manières différentes. Nous pouvons le sélectionner, aller à remplir, sélectionner Linéaire, Radial, un Angulaire, un dégradé de diamant, tout sauf linéaire est habituellement ce que vous voulez. Ensuite, choisissez les couleurs manuellement. J' ai en fait une excellente ressource pour vous et ça s'appelle WebGradients. Vous pouvez le trouver sur webgradients.com. Il vous montre essentiellement une liste de dégradés préfabriqués. Plutôt cool, non ? Vous pouvez voir les couleurs de début et de fin et vous pouvez même copier le code CSS pour cela. Ce qui est agréable à propos de ce site, c'est qu'il propose également un plug-in pour Figma. Ce plugin est appelé WebGradients. Allez-y et installez-le comme n'importe quel autre plug-in. Tout ce que vous avez à faire est de sélectionner la forme sur laquelle vous souhaitez utiliser le dégradé, puis de cliquer sur cette liste. Le plug-in remplit automatiquement le dégradé pour vous. C'est cool ? C' est vraiment à votre préférence, quel genre de gradients vous voulez utiliser ici. Je vais choisir celui-là, Rainy Ashville. Je vais positionner ça ici pour l'instant. Je vais changer son opacité de couche à 10 pour cent. Je fais ça parce que je vais ajouter un autre gradient. Je vais changer son angle à 12 degrés. Déplace-le, quelque chose comme ça. Pour cela, je vais utiliser un dégradé plus sombre, peut-être quelque chose avec des couleurs différentes. Quelque chose comme ça. Vous pouvez jouer avec l'opacité sur celui-ci. Allons un peu plus haut, 20 pour cent. Allons-y avec 20 pour cent sur celui-ci aussi. C' est juste un détail ou ces deux rayures, mais je pense qu'elles font toute la différence. Ils ont l'air fabuleux avec le reste des éléments. Ensuite, sélectionnez tout, Commande G pour regrouper tout, et nous appellerons ces Fonctionnalités 2. La deuxième section pour les entités est terminée. Maintenant c'est à votre tour de mettre votre propre tour dessus. Vous pouvez le faire de tellement de façons différentes. Vous pouvez utiliser différents dégradés pour ces deux bandes. Vous pouvez échanger l'image avec le contenu écrit. Vous pouvez utiliser un style différent pour ces cartes blanches. Il peut faire beaucoup de choses. Vas-y et expérimentez et assurez-vous de poster votre projet dans la galerie de projets afin que nous puissions tous jeter un coup d'œil. Cela dit, nous sommes maintenant prêts à passer à la prochaine section. Après un rapide coup d'œil sur le cadre filaire, nous pouvons voir que cette section est une petite action froide. Nous le ferons dans la prochaine leçon. Je te verrai là-bas. 10. Petite appellation à l'action: Bienvenue dans la classe. Dans cette leçon, nous allons une fois de plus jouer avec les formes et les couleurs pour créer le petit appel à l'action qui se trouve entre les deuxième et troisième sections de fonctionnalités. Nous sommes à peu près tous prêts alors commençons. Si on regarde le cadre métallique, on peut voir ce qu'on doit faire ici. Donc, nous avons fondamentalement un titre, petite description, puis le bouton d'appel à l'action réel. Alors allons de l'avant et copions ces, et en fait je vais juste copier le texte. Je vais coller ça ici et je vais en fait utiliser ces styles. Donc, copiez, collez et copiez et collez. Et ça va nous faire gagner du temps. On va les aligner au centre, et ensuite on va prendre ce bouton. Je vais le coller ici. Et ça va dire télécharger gratuitement. C' est très bien. Et allons de l'avant et sélectionnons tous ces éléments. Maj a pour ajouter la mise en page automatique. Assurez-vous de décocher cette option. Nous allons ajouter un espacement de 32 pixels entre les éléments. Et puis voici ce que nous allons faire, nous allons ajouter une couleur de remplissage sous la forme de notre dégradé principal. Et puis nous allons ajouter huit pixels, rayon de bordure. Et puis nous allons ajouter 64 pixels de rembourrage latéral, 64 de rembourrage vertical. Et puis la seule chose à changer est la couleur du texte. Alors, échangons-les avec du blanc et nous devrions être bons d'aller à cette fin. Maintenant, je vais aussi m'assurer que cela s'étend sur environ, disons six colonnes. Et on y est presque. On doit juste ajuster ça un peu comme ça. Et enfin, ajoutons notre ombre portée sauvegardée. Et on est bon à y aller, non ? Je ne pense pas qu'on devrait laisser ça comme ça parce que c'est assez simple, non ? Il se trouve juste là, une boîte autonome. Et je pense que nous pouvons mieux l'intégrer à tout ce qui l'entoure. Et pour ce faire, nous allons jouer avec quelques formes, beaucoup et beaucoup et beaucoup de gradients. Alors prenez l'outil rectangle et dessinez un rectangle de 320 64 et 100 sur le rayon et ajoutez notre ombre portée sauvegardée. Donc maintenant ce que je vais faire, c'est que je vais dupliquer ça, le déplacer comme ça, et le pousser dans, 10, 20, 30, 40, 50, 60, un, deux, trois, quatre. Donc 64 pixels, vous pouvez même arrêter à 60. L' idée est que vous voulez cacher cette couture ici pour que vous puissiez même le faire manuellement, mais je trouve que l'utilisation d'un certain nombre me permet d'être très précis. Encore une fois, un, deux, trois, quatre, cinq, six, un, deux, trois, quatre. Maintenant, je vais le dupliquer et répéter le processus. Un, deux, trois, quatre, cinq, six, un, deux, trois, quatre. Et encore. Maintenant, sélectionnons ces et dupliquez-les et déplacez-les vers le bas comme ça. Et dupliquez-le à nouveau et déplacez-les vers le bas. Maintenant, je vais prendre la rangée du milieu et je vais la pousser vers la droite, 10, 20, 30, ou autre chose peut-être un peu plus, 40, 50, 60, un, deux, trois, quatre. D' accord. Donc maintenant je vais les regrouper, donc la commande G ou le contrôle G si vous êtes sur Windows. Et je vais ouvrir mon plug-in de gradients. Et je vais commencer à faire cela, il suffit de sélectionner un élément, choisir un dégradé, de sélectionner un élément, de cliquer sur un dégradé, etc., et de faire la même chose pour le reste. Maintenant, comment tu décides d'habiller ça, c'est vraiment à toi de décider. Mais c'est comme ça que tu le fais. Alors maintenant que c'est fait, sélectionnez tout et créons un composant. Et réglons 16 degrés de rotation. Maintenant, je vais aligner ça au milieu de ma page. Et je vais aussi le positionner quelque part autour de cette zone, je pense que 120 des éléments ci-dessus. Encore une fois, cela n'a pas besoin d'être exact. Vous pouvez le globe oculaire. Peu importe ce qui a l'air bien, utilisez-le. Alors maintenant je vais simplement déplacer ceci sous ma petite boîte ici. Et nous pouvons aller de l'avant et les aligner au centre verticalement. Et si ça a l'air un peu plat, tu peux y aller. Et vous pouvez déplacer ces groupes afin que l'ombre du groupe ci-dessus soit projetée sur le groupe situé en dessous. C' était difficile à faire ? Pas vraiment. Vous avez vu à quel point il est facile de travailler avec des formes et des dégradés et de créer des éléments très intéressants. Et avec cela, nous pouvons maintenant commander à G de le regrouper. Et je vais l'appeler Small CTA pour appeler à l'action. Bon, l'appel à l'action est fait. Maintenant, je veux voir votre point de vue unique à ce sujet. Jouez avec ces couleurs, ces dégradés, ou peut-être n'utilisez pas de dégradés du tout. Je t'ai montré une façon de le faire, mais évidemment ce n'est pas le seul moyen. Alors, jouez et soyez créatif. Et j'ai hâte de voir ce que vous venez avec. Une fois cette section terminée, vous êtes prêt à passer à la suivante. Et la suivante est la troisième et dernière section pour les fonctionnalités. Et comme d'habitude, nous allons utiliser une mise en page différente pour afficher ce troisième ensemble. C' est ce qui se passe dans la prochaine leçon, alors je te verrai là-bas. 11. Troisième section pour les Caractéristiques: Bienvenue en classe. Dans cette leçon, nous allons concevoir la troisième et dernière section pour les fonctionnalités. Si vous vous souvenez de ce que j'ai dit dans les leçons précédentes sur la conception de fonctionnalités, c'est toujours une bonne idée de le mélanger. Donc, pour rester fidèle à cela, pour ce troisième lot, nous allons utiliser une mise en page différente, et nous allons également ajouter quelques illustrations. Donc si vous êtes prêt, commençons. Jetons un coup d'oeil sur le filaire, et comme vous pouvez le voir, sont les deux sections que nous devons créer. Alors voici comment on va faire ça. Nous allons revenir à notre conception principale et nous allons copier ceci. En fait, rendons ce cadre un peu plus grand. On va les coller ici. Nous allons faire monter la grille et nous allons l'aligner bien sur la grille. Je vais laisser environ 240 pixels de distance entre cet élément et l'appel à l'action. Voyons si c'est suffisant, nous allons juste jeter un coup d'œil et je pense que nous pourrions avoir besoin d'un peu plus que ça. Alors allons avec 320, quelque chose comme ça. Donc maintenant visuellement, cela semble équilibré. Cet appel à l'action se situe à mi-chemin entre cet élément et cet élément. Comme je le disais dans une leçon précédente, vous n'avez pas toujours besoin de vous fier à des mesures exactes. Comme par exemple, entre ceci et ceci, j'ai un 120 pixels. Donc normalement, vous seriez enclin à dire, ok, eh bien, gardons ces distances égales, et donc je vais placer ça à 120 pixels. Mais quand vous le regardez d'un point de vue d'oiseau, vous verrez que visuellement, il n'a pas l'air équilibré, et dans ce cas, suffit d'aller avec ce qui se sent le mieux. Dans mon cas, à propos de ça me semble bien. Pour le contenu de cette section, nous pouvons récupérer le texte de nos filaires et nous ferons de même ici. Mais au lieu que la sécurité soit le titre principal, nous allons en fait changer un peu. Nous allons utiliser la sécurité comme sous-titre ici et pour le titre principal, nous allons dire que vos données sont sécurisées. C' est juste plus logique comme ça. Ensuite, nous allons prendre deux sous-sections. Aussi, je veux m'assurer que cet élément s'étend sur six colonnes et pas cinq, juste comme ça, parce que je veux mettre deux de ces sections plus petites qui s'étendent sur trois colonnes chacune. Positionnons ceci à 64 pixels de l'élément au-dessus. Débarrassez-vous de l'icône, nous n'avons pas besoin de ça et pour le texte, nous avons quoi ? Services bancaires en ligne, copions ce texte ici. Maintenant, voici un conseil rapide pour vous. Si vous allez copier un morceau de texte de figma et que vous allez le coller ici comme ça. Vous remarquerez que le style n'est pas conservé. Ainsi, le style d'origine du texte de copie est utilisé à la place. Pour contourner cela, vous devez aller dans Modifier, coller et faire correspondre le style, comme ça. Cool. Donc, dupliquons cet alignement avec la grille et copions l'autre morceau de texte et c'est pour le cryptage des données. Allons de l'avant, éditer, coller et faire correspondre le style. Cool. Donc on a presque fini ici. La dernière chose que nous devons faire est d'ajouter une illustration. Nous allons donc faire une mise en page classique pour une fonctionnalité où nous avons une image sur le côté et du contenu de l'autre côté. Maintenant, pour l'illustration, et vous pouvez trouver des liens vers tout ce que j'utilise et ces ressources, ce fichier PDF. Je vais utiliser une illustration que j' ai obtenue à partir d'éléments volatils, allons-y en parler. Je vais aligner le haut des éléments, donc le haut de l'image, je vais l'aligner avec le haut de cet élément, et je vais positionner cette image pour qu'elle aille en dehors de la grille. C' est très bien, mais au lieu de cela, je vais aligner ce bord gauche, avec la grille. Pour garder le même espacement que nous avons utilisé dans d'autres parties de notre conception, je vais laisser cette colonne vide. Il s'agit donc d'une section. Commandions encore pour créer un groupe et maintenant nous allons le dupliquer. On va le déplacer vers le bas. Disons à une distance de 120 pixels entre les deux et nous allons faire exactement le contraire. Donc je vais supprimer cette image, je vais déplacer ça de l'autre côté. Encore une fois, c'est une façon classique d'afficher les fonctionnalités. Vous faites l'image et le contenu , puis sur la ligne suivante, vous retournez l'image et le contenu. Ici, nous allons prendre la deuxième illustration. Encore une fois, je vais l'aligner avec cette colonne ici pour laisser cette colonne vide, aligner avec le haut et c'est tout. Maintenant, la dernière chose à faire est de mettre à jour la copie sur le texte. Nous avons donc le soutien. Donc disons le soutien là-bas. En ce qui concerne le titre principal, nous allons dire un grand soutien pour de grands produits. Ici, modifier, coller et faire correspondre le style et les deux sous-sections sont les suivantes ; support en ligne 24/7 et nous avons également un lien là-bas en bas. Donc, un soutien en ligne 24/7 basé sur le style de match. Celle-ci est appelée classes éducatives gratuites. Donc coller ça dans comme ça et ça a été appelé classes éducatives gratuites, j'ai oublié. D'accord. Maintenant, la dernière chose à faire ici est de créer rapidement ces deux liens. Donc le premier, et je vais en fait dupliquer ce texte de support là-bas. Mais au lieu d'utiliser cette couleur rouge, je vais utiliser la couleur bleue car c'est un lien et ce bleu est actuellement ma couleur principale. Je vais aussi saisir cette flèche coller dedans. Sélectionnez ces deux, déplacez A pour créer une mise en page automatique. Modifiez l'orientation sur horizontale. Assurez-vous que ces deux éléments sont alignés au milieu et définissez la distance entre eux à 8 pixels, comme ainsi et maintenant nous pouvons supprimer cette ligne de texte et mettre à jour ceci pour dire, soumettre le ticket. Une autre chose que nous pouvons faire ici est que nous pouvons redimensionner cette flèche au lieu de 24 nous allons la faire 16 pixels. Juste un peu plus petit parce qu'il est attaché à ce petit lien là-bas. Donc maintenant, nous pouvons copier ça. Je peux le coller. Nous pouvons dire, visitez le canal, et nous pouvons supprimer ce bit. Enfin, sélectionnons tout. Commande G pour grouper ou contrôler G si vous êtes sur une machine Windows et nous allons appeler cette fonctionnalité 3. Impressionnant. Maintenant, avant de terminer les choses, je vous ai dit que ces illustrations sont prises ou sont téléchargées à partir d'éléments Envato. C' est un service payant. Mais si vous voulez des illustrations gratuites, laissez-moi rapidement vous montrer que maintenant, vous pouvez aller à OnDraw.co cliquez sur Parcourir maintenant et ici vous pouvez trouver un tas d'illustrations SUP. Il y en a beaucoup, vous pouvez même rechercher un mot-clé spécifique et ce qui est cool à ce sujet, vous pouvez changer la couleur d'accent sur eux vraiment facilement. Une fois que vous en trouvez un qui fonctionne pour vous, il vous suffit de cliquer dessus et vous pouvez télécharger un PNG ou un SVG, cela dépend vraiment de ce que vous voulez en faire. SVG signifie Scalable Vector Graphics et c'est un format vectoriel, qui signifie que vous pouvez redimensionner cette image autant que vous le souhaitez et qu'elle ne perdra pas de qualité. Un PNG est un format raster, ce qui signifie que si vous le redimensionnez et que vous le rendez plus grand que sa taille d'origine, il aura l'air pixellisé. Donc, cela dépend vraiment de votre application, mais oui, onDraw.co/Illustrations, excellente ressource pour obtenir des illustrations SVG gratuites. Très bien, avec la dernière section pour les fonctionnalités terminée, nous avons bien dépassé le point de mi-chemin dans la conception de cette page d'apprentissage. Si tu es venu si loin, laisse-moi te dire, super boulot. Maintenant, comme d'habitude, votre tâche pour cette leçon est de créer cette troisième et dernière section pour les fonctionnalités. Comme je l'ai dit jusqu'à présent, mettez votre propre tour sur les choses. Ne fais pas forcément exactement ce que je fais, même si c'est tout à fait correct, tu peux apprendre beaucoup en faisant ça. Mais c'est aussi une bonne idée de faire les choses à votre façon et d'expérimenter et de voir quels sont les résultats. Maintenant, si tu l'as déjà fait et que tu es prêt à aller de l' avant, alors je suppose qu'on devrait aller bien. La section suivante de notre liste est la Galerie de captures d'écran. C' est à venir dans la prochaine leçon. Alors je te verrai là-bas. 12. Galerie de captures d'écran: Bienvenue en classe. Dans cette leçon, nous allons concevoir la galerie de captures d'écran. C' est assez facile à faire alors commençons. Si nous jetons un coup d'oeil sur le filaire, nous pouvons voir que je me moquais à l'origine de la galerie de captures d'écran comme une simple grille d'images, et même si c'est une solution parfaitement viable, je pense que nous pouvons faire quelque chose d'un peu plus intéressant que et nous allons faire un carrousel d'images. Un carrousel est fondamentalement quand vous pouvez voir une rangée d'images et que vous avez des contrôles à gauche et à droite pour déplacer cette rangée d'images. Lorsque vous le déplacez à gauche et à droite, d'autres images sont révélées. Alors, passons à la partie principale du design et je vais vous montrer ce que je veux dire par là. Maintenant, pour cela, je vais utiliser certaines des images d'espace réservé qui sont fournies dans ces [inaudible]. et voyons. Je vais prendre les principales économies ouvertes, peut-être celle-là , celle-là, celle-là et la principale. Donc, avec ceux-ci il suffit de cliquer et de faire glisser et Figure. Ok, et ça a chargé un tas d'images. Maintenant, nous voulons que nos images soient dimensionnées en fonction de la grille que nous utilisons. Donc, je vais faire apparaître la grille et nous allons faire en sorte que chaque image occupe quatre colonnes de grille. Donc, continuons et redimensionnons ceci comme ça, et la taille que nous recherchons est de 384 pixels. Maintenant, je vais faire la même chose pour les autres. Donc avec 384, et maintenant je vais commencer à les amener un à la fois. Alors amenons des statistiques, Ce que je vais réellement bouger. Donc les statistiques vont ici et cette image je vais la positionner à 32 pixels de l'autre. Quoi d'autre ? Apportons l'image principale et ne vous inquiétez pas que cette image soit beaucoup plus grande, nous allons corriger cela dans un petit peu. Qu' avons-nous d'autre ? On a ça, et je pense qu'on a assez d'images ici. Donc, positionnons ces correctement comme ça. Maintenant, cachons la grille et sélectionnons chacune de ces images et ajoutons une belle ombre portée et aussi un rayon de bordure de huit pixels. Maintenant, que faisons-nous de cette grande image ? Nous voulons qu'il soit exactement la même hauteur que les autres, soit 683. Eh bien, on peut le faire. Pas de problème. Décochez simplement les proportions contraintes, entrez 683 et double-cliquez dessus. En ce moment, il est prêt à remplir, mais si nous voulons le déplacer, nous pouvons le définir pour recadrer. Ensuite, nous pouvons choisir la partie de l'image que nous voulons afficher. Plutôt cool. Alors, déplacons-le vers le bas, juste une touche. Faisons en sorte que ce soit là où il devrait être. Je pense que quelque part comme ici devrait être très bien. Voyons voir. Juste un peu, un pixel plus haut devrait faire l'affaire gentiment. D' accord. Voici donc ce que nous pouvons faire pour ajouter un peu d'intérêt visuel. Nous allons décaler ces images, ce qui signifie que toutes les autres images seront positionnées 64 pixels plus bas que la précédente. Donc, nous sélectionnons ceci et ceci et nous dirons 1-2-3-4-5-6, c'est 60, puis 1-2-3-4, c'est 64. Cool. Maintenant, sélectionnons ces commandes G pour les regrouper. Déplaçons les plus bas. Ce que je veux faire, pour être cohérent dans la conception, c'est que je veux saisir ces deux bandes d'angle, et les utiliser comme arrière-plan, et cela va bien s'attacher avec tout le motif d'angle que nous utilisons pour avoir des angles ici, ici et aussi ici. D' accord ? Alors allons-y et faisons-le. Collons ces. Mettons-les sous notre groupe. Maintenant, je peux les sélectionner tous les deux. Faisons ceci individuellement et puis je peux les rendre plus grands ou plus petits, dépend de quel genre d'effet je cherche, quelque chose comme ça et prenons l'autre. Rendons ça un peu plus gros, quelque chose comme ça. Donc, ils se croisent en quelque sorte et allons-y plus loin comme ça. Vous pouvez jouer avec ces deux formes et une fois que vous faites cela, vous pouvez ouvrir les dégradés et vous pouvez leur donner des couleurs différentes. Quelque chose comme ça ou quelque chose comme ça. Il peut même changer leur ordre en fonction du dégradé que vous souhaitez afficher en premier. Maintenant, nous avons aussi besoin d'une sorte de navigation ici, non ? Comment allons-nous déplacer ce carrousel ? Allons-y et faisons-le alors. Commençons par saisir l'outil Rectangle ou R. Et créons un rectangle de 320 par 320. Ajoutons 64 pixels, border-rayon et faisons un angle ou une rotation de 26 degrés. Je vais ajouter la belle ombre portée. Je vais mettre son remplissage en blanc et je vais mettre sa capacité à 95 %. Donc, cela restera au-dessus de ces éléments, comme ça et nous pouvons même apporter la grille afin que nous ayons une sorte de mesure. Ce que je vais faire est d'aligner dans la grille, puis de le pousser vers la droite 10,1,2,3,4,5,6, 16 pixels quelque chose comme ça. Je vais aussi l'aligner au centre avec mes captures d'écran, alors maintenant je vais saisir la flèche et je vais la coller ici et nous allons l'amener à l'intérieur de ce groupe. Commandez G de le regrouper et changeons sa hauteur à 32, alors faites-le juste un peu plus grand. Maintenant, vous pouvez simplement positionner cette flèche au contenu de votre cœur. Je vais faire quelque chose comme ça, 1, 2, donc 20, 1, 2, 3, 4, 24 et je pense qu'en fait nous devons le rendre un peu plus grand. Essayons 48 oui 1, 2, 3, 4, 5, 6. Ouais, quelque chose comme ça. Tu dois jouer avec ça jusqu'à ce que tu obtiens ça juste, juste comme je l'aime, mais pour moi maintenant, ça a l'air plutôt bon. Ce que je vais faire est de dupliquer ce morceau et je vais juste le déplacer l'autre côté, comme ça. Laissez-moi d'abord l'aligner au milieu et encore une fois, je vais l'aligner avec la grille, puis le pousser vers la gauche, 10, 1, 2, 3, 4, 5, 6, 16 pixels. Ensuite, je vais juste positionner la flèche dans une position relativement similaire. Vous pouvez atteindre un niveau de précision beaucoup plus élevé lorsque vous codez ceci avec CSS. Ne vous inquiétez pas trop à ce sujet maintenant. La dernière chose à faire est de le retourner horizontalement, ce qui va le tourner dans l'autre sens. Maintenant, nous avons les boutons pour déplacer le carrousel, vers l'avant et vers l'arrière. La dernière chose que je voudrais ajouter à cela est une sorte d'indicateur pour nous dire sur quelle page du carrousel nous sommes, donc pour cela, voici ce que nous allons faire. Nous allons reprendre l'outil rectangle. Nous allons dessiner un rectangle simple et nous allons faire ce 32 pixels de large, 4 pixels de haut, et le rayon 16 pixels. Donc maintenant, nous avons une petite forme qui ressemble à ceci. Pour la couleur, je veux utiliser la même couleur primaire comme ça, mais je vais faire 10 pour cent de capacité. Il s'agit d'une représentation d'une page de carrousel qui n'est pas active actuellement. Répétez le processus. Nous allons le dupliquer, sélectionnons à la fois « Maj A » pour ajouter une mise en page automatique. Réglons la distance de 16 pixels entre les deux et maintenant créons l'état actif. Pour ce dupliqué une fois de plus, mais cette faisons comme 80 pixels de largeur. Nous allons utiliser un 100 pour cent la couleur primaire, puis il suffit d'ajouter un peu plus pour représenter d'autres pages inactives et je pense que cela devrait faire l'affaire. Maintenant, nous allons sélectionner ceci, aligner au milieu de la page et nous allons l'aborder un peu. Alignons réellement avec le bord inférieur de cette forme et c'est la galerie de captures d'écran. Maintenant, sélectionnons tout. Commandez G pour le regrouper et appelons-la galerie de captures d'écran. Enfin, déplacons-la vers le haut ou déplacons-la vers le bas et laissons une distance d'environ 240 pixels entre la galerie et la section au-dessus. Maintenant, si nous faisons une vue d'oiseau, nous pouvons voir que nous avons un assez bon équilibre d'espace blanc. Bon, comme d'habitude, maintenant il est temps de passer à l'action et de créer votre version de la galerie de captures d'écran. Je suis allé pour une approche de carrousel de barre oblique curseur mais vous pouvez rester fidèle au cadre de fil et juste faire un simple groupe d'images ou vous pouvez créer une autre mise en page. C' est vraiment à vous de décider. J' ai hâte de voir ce que vous venez avec. Maintenant, avec cela dit, il est temps de passer à autre chose. Le prochain point de notre liste est la section des témoignages et là je vais vraiment garder les choses très simples. Laissez-moi vous montrer mon point de vue dans la prochaine leçon. On se voit là-bas. 13. Testimonials: [ MUSIQUE] Bienvenue dans la classe. Nous avons fait de grands progrès dans la conception de cette page de destination. Nous avons juste à concevoir trois autres sections et c'est fini. Dans cette leçon, nous allons créer les sections de témoignage. Prêt ? Allons-y. Examinons d'abord le cadre métallique pour voir à quoi nous avons affaire. Au départ, mon idée était de simplement avoir une liste d'avatars ici et quand vous cliquez sur un avatar, le témoignage lui-même changerait. Je pense que ce que nous allons garder les choses beaucoup plus simples que ça, et juste faire une navigation avec flèche droite, flèche gauche et c'est tout. Retournons ici. Allons à la typographie et saisissons cette citation de bloc que j'ai ici, collez-la dans, et amenons la grille. Alignons correctement ceci à la grille et la taille pour qu'elle soit de 10 colonnes, juste au milieu de la page. Modifions également la couleur du texte à 80 pour cent. Pour marquer le fait qu'il s'agit d'une section pour les témoignages, allons de l'avant et ajoutons un de ceux-ci, une citation. Cela utilisera Brandon grotesque. Faisons une taille de police vraiment grande et rendons la police audacieuse et je pense qu'un peu plus grand, quelque chose comme un 110. Peu importe que nous ne collions pas exactement à l'échelle de type en ce moment parce que c'est un élément décoratif. Donc un 110 et ça devrait être correct. Changeons la couleur, en fait, utilisons celle-ci, mais un peu plus modérée, comme 80 pour cent, quelque chose comme ça. Cela semble bien, sélectionnons ces deux alignés au centre et nous allons aligner les choses comme ça. Ensuite, sous la citation réelle, nous allons mettre un avatar de la citation, l' auteur, le nom et peut-être la position, puis la navigation en flèche. 40 avatar, on va attraper l'outil ellipse ou O sur le clavier et on va faire une ellipse 64 sur 64. Ça devrait faire l'affaire. Nous n'avons pas besoin d'un très grand avatar. Nous allons positionner cela à 32 pixels du tableau ci-dessus et nous devons y mettre un portrait. Il y a beaucoup de façons différentes de le faire. Vous pouvez télécharger une image gratuite à partir d'Internet, si vous voulez faire un espace réservé. Si vous faites un vrai projet, alors vous mettrez la photo de la personne qui vous a réellement donné ce témoignage. Dans mon cas, je veux juste une image de détenteur de place afin que je puisse ouvrir un plugin appelé unsplash. C' est pour le site unsplash et je peux chercher un portrait. Je peux utiliser celui-là et ça va juste remplir gentiment comme ça. Pour le nom et la position, prenons réellement ce type de style de texte et faisons un décalage a pour ajouter une mise en page automatique. Assurez-vous de supprimer le remplissage par défaut ajouté. Nous allons faire 16 pixels de distance entre les éléments ou d'espacement entre les éléments. Nous allons rendre les choses verticales et je vais coller dans cet élément et puis juste changer la couleur. Je vais utiliser 80 % de gris. On va dire Mary Anne, avocate, cool. Maintenant, prenons cet alignement au centre. Assurez-vous que nous positionnons 32 pixels de la citation réelle , puis prenons les flèches gauche et droite. Collez ceci dans. Comme si dupliquez-le, déplacez-le sur le côté, faites un clic droit, retournez horizontalement. Faisons une opacité de 10 pour cent sur celui-ci. En fait, faisons-le sur la couche elle-même, comme ça. Cela nous montrera à quoi ressemble une flèche inactive. Décalons A ces pour ajouter la mise en page automatique et définissons la distance de 16 pixels entre les deux. Nous pouvons aller encore plus haut que 32 pixels, parce que peut-être à l'avenir, nous voulons ajouter un peu de remplissage à l'espace autour d'eux et nous devons avoir la place pour nous de le faire. Je vais les prendre et je vais les positionner 72 pixels de l'auteur. Maintenant, prenez tout ça, commandez G et appelons ces témoignages. Assurez-vous qu'il est correctement aligné au milieu et positionnons-le à 240 pixels de la section ci-dessus. Maintenant, faisons une autre vue d'oiseau pour vérifier si tout a l'air bien et c'est le cas. [ MUSIQUE] Avez-vous vu à quel point c'était simple de concevoir cette section de témoignage ? Évidemment, il y a plusieurs façons de le faire. Tu peux aller avec des grilles. Vous pouvez aller avec un autre type de curseur. C' est vraiment à votre imagination. Allez-y et créez ceci ou votre propre version des témoignages et une fois que vous le faites, nous sommes prêts à aller de l'avant. L' élément suivant de notre liste de tâches est probablement la section la plus importante de la page et c'est le principal appel à l'action. C' est une section assez complexe car elle contient une table de tarification. Rien qu'on ne peut pas gérer, mais ça peut être un peu délicat. Voyons comment nous pouvons créer cela dans la prochaine leçon. 14. Appel principal à l'action: Bienvenue en classe. Dans cette leçon, nous allons concevoir le principal appel à l'action, et c'est sans doute la section la plus importante de la page car elle peut être un briseur de transactions. Les visiteurs utiliseront cette section pour acheter le produit ou télécharger la version gratuite, mais essentiellement, c'est là que les utilisateurs sont en train de convertir. Faisons en sorte qu'on fasse ça correctement, et qu'on y arrive. Un rapide coup d'œil sur le filaire nous montre qu'à l'origine, j'avais prévu de créer la zone de tarification et l'appel à l'action séparément, mais je pense que c'est une bien meilleure idée d'incorporer les deux dans une seule section parce qu'il a du sens juste. Si je devais les faire séparément, j'aurais deux ensembles de boutons, mais si je les fusionne, je vais avoir un seul ensemble de boutons. C' est beaucoup plus clair comme ça. En outre, cette colonne du tableau des prix est pour la version pro ou la version payante de l'application, nous devons donc le faire ressortir d'une manière ou d'une autre. D' accord, allons-y. Nous allons commencer par taper le texte que nous allons utiliser pour l'en-tête de section. Allons-y et copions-les, collez-les ici. Je pense que nous allons utiliser exactement les mêmes styles que nous avons utilisés ici. Faisons un copier-coller. Copier les propriétés, coller les propriétés, et la même chose vaut pour cela, copier-coller. Alignons-les au centre, et nous allons également les aligner au centre les uns avec les autres. Décalons A et ajoutons 32 pixels de distance entre eux. D' accord. Super. Maintenant, allons de l'avant et ajoutons notre tableau de prix. Pour ça, voici ce qu'on va faire. Nous commencerons par apporter le logo. Nous allons voir les actifs de la marque, la couleur du logo, et redimensionnons ce logo pour qu'il soit 48 pixels de hauteur. Nous allons utiliser la version colorée pour la première colonne du tableau des prix. Ici, nous avons essentiellement besoin d'afficher le mot gratuit pour afficher le prix du plan, puis la liste des fonctionnalités, et l'appel à l'action, le bouton pour le téléchargement. Cela devrait être relativement facile à faire. Prenons ce texte et nous allons le coller ici. Ça va juste dire libre. Je vais zoomer un peu pour que vous puissiez voir ce qu'on fait. Encore une fois, nous allons l'aligner au centre, nous allons l'aligner avec le logo. Nous allons déplacer A, ces deux pour ajouter la mise en page automatique, et nous allons définir 32 pixels de distance entre eux. Ensuite, ajoutons la liste des fonctionnalités. Pour cela, je vais prendre un simple paragraphe. Collons-le ici, et commençons à taper les fonctionnalités. Maintenant, nous allons les aligner au milieu. Taille de police, 18, hauteur de ligne, choisissons 32 pixels parce que je veux qu'ils soient espacés un peu plus, et enfin, ce dont nous avons besoin est un de ces boutons fantaisistes que nous avons créés. Copiez cela, collez-le dans. Maintenant, ce que nous pouvons faire est que nous pouvons tout sélectionner, déplace A pour ajouter une mise en page automatique. Assurez-vous de décocher ce bit. Il va être vertical, et nous allons faire 64 pixels, horizontal, vertical, remplissage, et aussi 64 espacement entre les éléments. Pour cela, nous pouvons réellement ajouter une couleur de remplissage de blanc. Ajoutons une ombre portée, et arrondissons également les coins. Huit pixels devraient faire très bien. Très bien maintenant, cet élément devrait tenir dans quatre de ces colonnes de grille. Si ce n'est pas le cas, nous pouvons simplement redimensionner cet élément car c'est ce qui donne à cette image toute sa largeur. Si vous ne comprenez pas cela, voici une explication très simple. Ce morceau de texte, cette zone de texte, a actuellement une largeur de 260 pixels. Le cadre que j'ai créé avec la mise en page automatique, qui est celui-ci, a un remplissage horizontal de 64 pixels. Outre ces 260, nous devons ajouter 64 à gauche, 64 à droite. Chaque fois que je redimensionne cette zone de texte, mon cadre entier se redimensionne avec elle. C' est assez simple en fait. Nous pouvons le faire jusqu'à ce que nous atteignions la largeur parfaite pour qu'il s'intègre dans quatre colonnes de grille. Maintenant, dupliquons ceci et créons la colonne pour la version pro. Maintenant, si vous vous souvenez de ce que j'ai dit précédemment à propos de faire ressortir cela, parce que c'est, après tout, pour la version pro, il y a un moyen très simple que nous puissions le faire. Au lieu d'utiliser le remplissage blanc, nous pouvons utiliser notre gradient principal. Ensuite, nous pouvons simplement sélectionner ce logo et nous pouvons tout rendre blanc, comme ça. Ensuite, je peux sélectionner cet élément entier, et je peux changer les couleurs en blanc. Maintenant, cette description n'est pas tout à fait exacte parce que nous devons ajouter quelques choses. La version pro a toutes les fonctionnalités gratuitement plus plusieurs budgets, le suivi des objectifs, la synchronisation entre les appareils, rapports et la synchronisation avec votre banque. Ceci, je vais faire audacieux, et je vais utiliser ma couleur secondaire, qui est ceci. Je vais le mettre à 100 pour cent. N' oublions pas de changer le prix. Ce sera $9.99 par mois. Modifions également le style de ce bouton. Je vais utiliser ces mêmes couleurs secondaires pour l'arrière-plan et pour le texte à l'intérieur, je vais utiliser le gris, peut-être 80 pour cent, quelque chose comme ça. Cool. Maintenant, regroupons ça. Positionnons ceux-ci à 64 pixels du texte ci-dessus. Regroupez-les, Commandement G. Qu'en pensez-vous ? On finira ici ? Comment ça vous ressemble ? Personnellement, je pense que nous pourrions utiliser avec un peu plus de séparation de la section ci-dessus et aussi un peu plus d'accent sur cette section parce qu'après tout, c'est la section la plus importante de la page, non ? Pour suivre notre motif ici, ce que je vais faire, c'est simplement copier cet angle, la bande. Je vais le coller ici. Je vais juste le pousser jusqu'à ce que je trouve le bon équilibre, et je vais aussi le rendre plus grand, comme ça. Je vais le mettre sous notre nouveau groupe. Alors je vais prendre ça, je vais le mettre à l'intérieur comme ça. Je pense que ça a l'air bien, peut-être juste un peu plus gros. Ouais, ça a l'air plutôt bien. Maintenant, nous devons juste jouer avec le gradient est un peu. Ouvrons notre plugin et faisons quelque chose avec une belle nuance de bleu ici, peut-être quelque chose comme ça ou comme ça. Je ne veux pas quelque chose de trop sombre, mais je ne veux pas de quelque chose de trop coloré non plus. Je pense que peut-être je vais le laisser à cela parce qu'il a aussi quelques couleurs qui peuvent être trouvés sur cette section ici. C' est bien. Aussi, je vais le dupliquer, faire pivoter un peu. Pour cela, nous pouvons même utiliser un ensemble différent de couleurs, peut-être quelque chose comme ça, ou peut-être quelque chose d'un peu plus discret. Nous pouvons même réduire l'opacité sur cette couche. Je pense que ça a l'air juste. Bien sûr, vous pouvez toujours entrer et grignoter les détails, tout mettre à l' écoute, juste, mais pour l'instant, je pense que c'est assez bon. finir, comme nous le faisons toujours, sélectionnez tout, Commande G, pour tout regrouper. On va appeler ce C-T-A principal ou appel à l'action. Cool. D' accord, comme vous l'avez vu dans cette leçon, je me suis éloigné de notre suivi du cadre métallique et au lieu de cela, j'ai créé ma propre mise en page. C' est tout à fait normal. Comme je le disais dans une leçon précédente, le cadre métallique est là pour vous guider, et il est là pour servir de guide pour le contenu vraiment, pas nécessairement pour la mise en page. Cette section en était un bel exemple. Maintenant, comme d'habitude, allez-y et créez votre propre version de ce principal appel à l'action, soit en suivant le cadre métallique, soit en faisant exactement ce que j'ai fait, soit en trouvant quelque chose de nouveau. C' est à vous de décider. Maintenant, une fois que vous faites cela, vous êtes prêt pour la dernière section de la page, et c'est le pied de page. C' est à venir dans la prochaine leçon. 15. Footer: Bienvenue dans la classe. Dans cette leçon, nous allons concevoir la dernière section de cette page de destination, le pied de page. C' est une tâche assez simple, alors commençons. Maintenant, en regardant le filaire, nous pouvons voir la composition du pied de page. Nous avons le logo ici, un petit menu latéral sur le côté droit ici, quelques informations sur l'entreprise, les informations typiques sur les droits d'auteur, et une liste de liens pour les médias sociaux. Commençons. Je vais commencer par apporter le logo, et comme nous l'avons ici, je vais juste copier celui-ci, le coller ici. Je vais aussi apporter la grille, afin que nous puissions correctement aligner les éléments ici. Alors créons ce menu latéral que vous avez vu ici. Copions ça, collez-le ici. Faisons un Maj A pour créer une mise en page automatique, horizontale, faisons 32 pixels entre les éléments. En ce qui concerne le style, eh bien, nous allons utiliser un style que nous avons utilisé précédemment, qui est celui-ci ici, donc Copy Properties, donc Copy Properties, Coller Properties, sympa. Prenons ces deux et alignons les centres verticaux. Maintenant, prenons cela et alignons-le sur le bord droit de notre grille. Maintenant, ensuite, ajoutons un séparateur ici. Pour ce faire, nous allons en fait nous tourner vers ces éléments ici. Je vais prendre l'un d'eux, et je vais emménager ici coller ça dedans. Il suffit de le déplacer en place, et redimensionnons jusqu'à ce qu'il élargisse toute la largeur de ma grille et ramenons sa hauteur à 48 pixels parce que je l'ai accidentellement redimensionné là. Positionnons ceci, maintenant c'est à 48 pixels, faisons peut-être 64. Ça devrait bien faire l'affaire. Mais je pense cependant que c'est peut-être un peu trop, alors revenons à 48 en fait, comme ça. Je pense que ça a l'air un peu mieux. Ensuite, nous devons ajouter les informations de l'entreprise. Copions ça, collez ça ici. Nous allons utiliser le style de paragraphe pour cela, alors copions les propriétés de ceci, collez-les dans, alignez tout vers la gauche. Aussi ce que je veux faire ici est de rendre ces audacieux et d'utiliser la couleur primaire. Parce que ce sont des liens. En fait, je vais utiliser régulier. Je ne pense pas que l'audace soit aussi bien ici. Nous allons garder audacieux pour ces types de liens, mais pour ceux-ci, nous allons utiliser le poids régulier. Représentons ça un peu, pour correspondre à l'espacement, comme ça. Nous avons 48 du texte au séparateur, puis 48 du séparateur au logo. Enfin, ajoutons les informations sur les droits d'auteur. Faisons Édition, Coller et Correspondre le style. Positionnons également que 48 pixels de l'élément au-dessus. Quoi d'autre ? Eh bien, nous devons faire les liens pour les médias sociaux, mais au lieu de simplement jouer des liens, faisons des icônes. Ça devrait être super simple. Je vais utiliser des icônes de l'ensemble que nous avons utilisé toute cette classe. Cherchons Twitter. Copions ça, collez-le, K pour le redimensionner, et nous allons les redimensionner à, je pense que 24 pixels, c'est un peu délicat. Ajoutons également la bonne couleur à eux. Qu' est-ce qu'on a d'autre ? Facebook, je pense, j'ajoute Instagram. Prenons Facebook, même perçage K pour l'échelle, puis redimensionnons à 24 pixels. Collons le dans mon cadre principal ici, et Instagram, copiez-le, collez-le dans, et redimensionnez-le à 24 pixels. Maintenant, rassemblez tout ensemble, sélectionnez ces Maj A pour ajouter la mise en page automatique. Faisons 32 pixels entre eux. Assurez-vous que tout est aligné au milieu. Utilisons la bonne couleur sur tous ces éléments. Je vais sélectionner les deux, aligner les centres verticaux, et je vais apporter la liste des icônes directement au bord de ma grille ici. Ensuite, prenez ces deux-là, commandez à G de les regrouper. Maintenant, ce que je peux faire, c'est m'assurer que mes mesures sont correctes. 48 là, 48 et 48, sélectionnez tout, commandez G et regroupez-le en pied de page. Maintenant, la seule chose à faire est de savoir quel genre d'espacement nous avons besoin en bas. Une bonne façon de le faire est de regarder l'espacement que vous avez utilisé en haut, et dans mon cas, c'est, je crois, 64 pixels. Il y a beaucoup d'éléments ici. C' est 64 pixels. Faisons ça. Sélectionnons mon Bureau, et redimensionnons en conséquence. Sauvez, et c'est là, mesdames et messieurs, c'est notre page d'arrivée terminée. Jetons un dernier coup d'oeil. Je vais aller de l'avant et cacher l'interface utilisateur ici, pour que nous puissions mieux la voir. Tout a commencé avec la section héros. abord, nous avons créé ce logo, la navigation et l'arrière-plan, puis nous avons ajouté le contenu du texte et le collage des images. Ensuite, nous avons la première section pour les fonctionnalités, suivie d'une deuxième section pour les fonctionnalités, en utilisant bien sûr une mise en page différente. Ensuite, nous ajoutons une petite zone d'action appelée. Au lieu de faire une simple boîte, nous avons ajouté cet arrière-plan à l'aide de formes simples, d'ombres et de dégradés. Ceci est suivi de la troisième et dernière section de fonctionnalités. Encore une fois, avec une mise en page différente mais légèrement plus classique. Ensuite, nous avons suivi cela avec la galerie de captures d'écran, que nous avons fait ressembler à un carrousel complet avec navigation, boutons, et aussi page dans les transporteurs. Ensuite, il y a une section simple pour les témoignages, avec un simple curseur. Ensuite, probablement la section la plus importante de la page, l'appel principal à l'action, qui comprend également le tableau des prix. Enfin, dans cette leçon, nous avons créé la dernière section de la page, qui est le pied de page. Maintenant, c'est à votre tour de terminer la conception de la page de destination. Allez-y et créez le pied de page. Après vous, je tiens à vous féliciter parce que vous venez passer cette classe avec des couleurs volantes. S' il vous plaît rejoignez-moi à la prochaine leçon pour la conclusion. 16. La conclusion Epic: Félicitations pour avoir terminé ce cours. J' espérais vraiment qu'il répondait à vos attentes et que vous avez appris quelque chose de précieux, quelque chose qui vous aidera dans votre carrière. Maintenant, prenez un moment et notez les clés de ce cours. Comme je le disais dans les leçons précédentes, je vous encourage vivement à créer votre propre version de cette page de destination. Une fois que vous faites cela, allez-y et postez-le dans la Galerie de projets parce que je vous donnerai vos commentaires si vous le souhaitez. Je suis sûr que d'autres étudiants vous donneront également des commentaires. Aussi, si vous avez des questions ou des commentaires, si vous souhaitez voir plus de contenu comme celui-ci sur Skillshare, n' oubliez pas de laisser vos commentaires dans l'onglet discussion. J' aimerais juste entendre parler de toi. Maintenant, avant de finir les choses, je veux juste faire une note rapide. Cette classe, ou ceci était la première classe d'une série appelée Designing with Figma. J' ai l'intention de faire plus de cours comme ça. Si vous voulez voir plus de contenu comme celui-ci, assurez-vous de me suivre. Cela dit, merci beaucoup d'avoir regardé et j' espère vraiment vous revoir bientôt dans la prochaine classe. Beaucoup d'amour et de respect, prenez soin.