Apprendre Figma : les bases de la conception d'interfaces utilisateur - Conception UI/UX

1. Introduction au cours: Si vous voulez devenir un concepteur UI/UX, vous êtes à l'endroit parfait. Ce cours complet vous apprendra tous les éléments essentiels avec des tutoriels bien organisés et faciles à suivre. Bonjour, je m'appelle Arash et je suis un designer UI/UX. Ensemble, vous et moi allons apprendre à devenir concepteur d'interface utilisateur en utilisant le logiciel Figma. Ce cours a été conçu pour les personnes complètement nouvelles design UI/UX ou disons le design en général. Au début, nous allons apprendre sur les bases de la conception et les éléments de l'interface utilisateur puis nous allons apprendre sur Figma et tous ses secrets cachés ensemble, puis vous apprendrez à créer un simple filaire. À partir de là, vous apprendrez comment configurer votre guide de style et comment appliquer vos couleurs de manière appropriée à votre design. Vous apprendrez également tous les principes de l' application mobile et de la conception web, puis nous allons concevoir une application financière ensemble et je partagerai avec vous toutes les techniques nécessaires dans les secrets pour concevoir une application de classe mondiale. De plus, vous apprendrez à la fois sur les Micro Interactions simples et avancées, outre, il y a une section dédiée à la conception web où nous concevons ensemble une page d'apprentissage moderne complète. Ici, vous apprendrez les éléments essentiels de la conception web, tels que les grilles de mise en page, les interactions, et bien plus encore. Nous parlerons également des balises et de la façon dont vous pouvez créer votre propre portfolio en ligne sans écrire une seule ligne de code. En outre, vous découvrirez la modélisation 3D et la création de scènes de réalité augmentée. Enfin, vous apprendrez comment démarrer votre propre entreprise et obtenir votre premier client en tant que concepteur UI/UX. Ainsi, au cours de ces scores, nous concevons et prototypographie une application mobile de finance pour développer vos compétences en conception et maîtriser tous les outils nécessaires. En outre, vous aurez accès à deux nouveaux kits d'interface utilisateur valeur de plus de 3 000$ et vous pouvez les utiliser dans vos projets commerciaux. J' espère que vous êtes prêt à apprendre de nouvelles compétences et à devenir concepteur d'interface utilisateur. Je te verrai en classe. 2. Introduction: Salut tout le monde. Bienvenue dans le premier chapitre de ce cours. Dans cette section, nous allons parler différences entre la conception de l'interface utilisateur et de l'UX et la structure du cours que vous pouvez comprendre comment le cours est organisé afin que vous puissiez le suivre correctement. Enfin, nous allons parler des outils et des exigences que vous devez connaître pour poursuivre le cours. Sans plus tarder, commençons. Tout d'abord, je vais parler des différences entre l'interface utilisateur et la conception UX. Bien que les deux éléments soient cruciaux pour un produit et travaillent en étroite collaboration, leurs rôles sont totalement différents. La conception UX est un domaine plus technique et analytique. Cependant, la conception de l'interface utilisateur fait référence à la conception graphique avec des responsabilités plus complexes. Permettez-moi de vous donner un exemple. Si vous considérez un produit comme une voiture, le châssis est le code qui lui donne une structure claire. Les autres pièces telles que les portes, le filtre à carburant, etc. représentent la conception UX qui permet à la voiture de fonctionner correctement. D' autre part, la conception de l'interface utilisateur représente l'apparence de la voiture, de ses capteurs, etc. En d'autres termes, UX, qui signifie expérience utilisateur, est sur le fonctionnement d'un produit, et l'interface utilisateur, qui signifie interface utilisateur, est sur l'apparence d'un produit. En tant que concepteur de produit, vous devez savoir comment ces deux termes fonctionnent ensemble et comment les distinguer. Par exemple, vous devez savoir quelles sont les responsabilités d'un concepteur UX et, d'autre part, quelles sont les responsabilités d'un concepteur d'interface utilisateur. Comme vous pouvez le voir sur les photos, nous avons deux écrans différents. La gauche nous montre comment le produit doit fonctionner. Par exemple, supposons que vous avez un écran avec deux boutons et deux champs de texte, l'UX nous montre comment ces boutons doivent interagir avec l'utilisateur, et la bonne image est tout au sujet l'interface utilisateur et il nous montre comment le produit doit Regarde. Par exemple, nous avons ici un bouton et un carré. Le concepteur de l'interface utilisateur décide de la taille de ce motif ou de la couleur qui convient à ce carré. Ce sont les responsabilités du concepteur d'interface utilisateur. Merci beaucoup d'avoir regardé cette vidéo et je vous verrai dans la prochaine vidéo. 3. Structure du cours: Salut, tout le monde. Dans cette vidéo, nous allons parler de la structure du cours. En fait, vous pouvez diviser le cours en deux sections principales, la partie théorique et la partie pratique. La partie théorique crée 10 pour cent de l'ensemble du cours, et la partie pratique représente 90 pour cent du contenu du cours. Au lieu de nous concentrer sur les théories, nous nous concentrerons sur la pratique des compétences que vous apprenez en travaillant sur différents types de projets. Dans la partie théorique, vous apprendrez les bases de la conception, les éléments de l' interface utilisateur, les idées commerciales, etc. Dans la partie pratique, nous allons concevoir une application mobile complète à partir de zéro. Vous apprendrez également sur l'essentiel de conception web en concevant une page d'apprentissage moderne, nous parlons également de cadrage métallique, modélisation 3D, de conception de logo, et bien plus encore. Si vous êtes un débutant complet, je vous recommande fortement de regarder d'abord la partie théorique, puis de poursuivre le cours. D' autre part, vous pouvez sauter la partie théorique et sauter dans la création d'un projet. Très bien, les gars, merci beaucoup d'avoir regardé cette vidéo et je vous verrai dans la prochaine vidéo. 4. outils: Salut tout le monde. Dans cette vidéo, nous allons parler des outils nécessaires pour compléter ce cours. Dans ce cours, nous allons utiliser différents outils de conception graphique pour concevoir ensemble des interfaces utilisateur de classe mondiale. Le logiciel principal que nous allons utiliser est Figma, qui est disponible pour macOS et Windows. Vous pouvez même l'utiliser sur votre navigateur sans installation. De plus, vous n'avez pas besoin de payer pour cela, c'est totalement gratuit. Les autres outils que vous apprendrez sont Vectary et Adobe Photoshop. Nous parlerons également de sites web utiles tels que Dribble, Behance, etc. Si vous n'avez aucun des logiciels mentionnés ci-dessus, assurez-vous de les installer avant de commencer le cours afin de vous y rendre. 5. Introduction aux bases de la conception: Salut tout le monde. Bienvenue dans une autre section des partitions. Dans ce chapitre, nous allons parler de mises en page, d' iconographie, de typographie, de couleurs, composition, et bien plus encore. Si vous voulez devenir une interface utilisateur professionnelle et grande, concepteur UX, vous devez commencer par les bases de la conception. Maintenant que vous connaissez l'importance de connaître les bases du design, commençons ce chapitre. 6. Mise en page: Salut tout le monde. Dans cette vidéo, nous allons parler de mises en page dans le design. En ce qui concerne la conception UI UX, la façon dont nous montrons les informations dans une application ou un site Web est si importante. En fait, il n'y a pas de bonne façon spécifique de créer votre propre composition. Ainsi, vous pouvez facilement créer une mise en page basée sur vos propres besoins tant qu'elle est cohérente et compréhensible pour les utilisateurs. Comme vous pouvez le voir sur les images à droite, les deux écrans sont bien conçus. Bien que l'espacement soit différent, la composition est absolument claire et cohérente. Vous devez faire beaucoup attention à la cohérence lors de la conception d'une interface utilisateur. Peu importe le type de plateformes pour lesquelles vous concevez, les mêmes règles s'appliquent à toutes. Maintenant, vérifions ces photos. Comme vous pouvez le voir dans l'image de gauche, les distances sont assez cohérentes. Par exemple, si vous regardez la distance entre l'image de profil et le haut de l'écran, vous pouvez réaliser que la valeur est de 50 pixels, ainsi que la distance entre la même image de profil et le champ de texte droit sous qui est à nouveau 50 pixels. Comme vous pouvez le voir, la disposition de cette conception est assez claire, et la raison en est à cause de la cohérence de l'espacement. Dans les prochaines conférences, nous parlerons également de l'espacement et de l'importance de cela dans la conception. Maintenant, si vous regardez la bonne image, vous pouvez réaliser que le design est également clair dans cette mise en page. Cependant, la seule différence est les couleurs et l'espacement. Mais comme vous l'avez peut-être remarqué, l'espacement est à nouveau constant. Merci beaucoup d'avoir regardé cette vidéo. Je te verrai dans la prochaine vidéo. 7. Arborescence visuelle: Salut tout le monde. Dans cette vidéo, nous allons parler de hiérarchie visuelle. hiérarchie visuelle concerne la façon dont nous regardons les conceptions. Ça a l'air bizarre ? Mettons-le d'une autre façon. En tant que designers, nous devrions nous mettre dans peau des utilisateurs afin de réaliser comment ils voient nos designs. Le contenu de n'importe quelle mise en page numérique suivra une hiérarchie particulière. Par exemple, les menus vont en haut, en bas, à gauche ou à droite de l'écran, ou une combinaison de ceux-ci. Les en-têtes apparaissent au-dessus par le texte. En d'autres termes, la hiérarchie est un moyen simple de rester organisé du plus au moins important. N' oubliez pas que les utilisateurs définissent la hiérarchie de n'importe quelle application ou site Web. L' élément qui attire d'abord l'attention des utilisateurs se trouve en haut de la hiérarchie. Les spécifications visuelles que le concepteur peut utiliser pour influencer la compréhension de l'information par les utilisateurs sont la taille, plus l'élément est grand, plus il attirera l'attention. Si vous êtes familier avec HTML et processus de développement web, vous savez peut-être que nous avons six types d'en-têtes de H1 à H6. H1 est le plus grand en-tête et H6 est le plus petit. Lorsque nous voulons obtenir autant d'attention, nous allons utiliser H1. Par exemple, supposons que nous voulons attirer l'attention des utilisateurs sur une section spécifique ou un élément spécifique. Dans ce cas, nous allons utiliser l'en-tête plus grand ou d'un autre côté, parfois nous ne voulons pas attirer autant d'attention sur une section ou un contenu spécifique. Dans ce cas, nous pouvons utiliser l'en-tête plus petit, donc la taille est si importante. L' élément suivant est la couleur. Les couleurs vives sont plus visibles que les couleurs sourdes. Si vous n'avez pas assez d'informations sur les couleurs, vous n'avez pas à vous inquiéter car dans les prochaines leçons, nous allons couvrir toutes les informations nécessaires sur le choix de la bonne couleur dans votre design. L' élément suivant est l'alignement. Un élément avec un alignement différent des autres attirera plus d'attention. Qu'est-ce que ça veut dire ? Supposons que vous ayez une mise en page de, disons, quatre vidéos différentes ou quatre photos différentes. Si vous n'alignez qu'une de ces vidéos ou ces photos différemment, cela attirera plus d'attention sur elle. En fait, dans ce cas, l'utilisateur peut se rendre compte que quelque chose est différent. L' élément suivant est le contraste. couleurs fortement contrastées attireront l'œil facilement. Le contraste est un sujet très important dans la conception de l'interface utilisateur. Nous parlerons du contraste dans les prochaines leçons profondément. L' élément suivant est la proximité. éléments qui sont rapprochés semblent plus liés et c'est vrai. Si vous regardez les photos sur le côté droit, vous pouvez voir que nous avons deux écrans différents. Concentrez-vous sur l'écran de gauche. Comme vous pouvez le voir, nous avons deux sections différentes, nouvelles promotions et de nouvelles histoires. Pouvez-vous réaliser que les éléments des deux sections sont rapprochés afin que les utilisateurs puissent facilement comprendre qu'ils sont liés ensemble ? L' ordre du jour est la répétition. styles répétés peuvent indiquer que le contenu est lié. Qu' est-ce que ça veut dire ? Regardons les photos sur la droite. Pouvez-vous voir que nous avons quatre carrés, ont trois cercles, sorte que l'utilisateur peut facilement reconnaître la relation entre ces éléments. L' élément suivant est les espaces, ce qui est un autre terme important dans la conception UI/UX. Plus d'espace entre les éléments attirera plus d'attention sur eux. Regardons les images sur la droite mais cette fois nous devons faire distinction entre l'écran de gauche et l'écran de droite. Comme vous pouvez le voir dans l'écran de gauche, nous avons assez d'espace, ou disons, assez d'espace entre nos éléments et nos sections pour que les utilisateurs puissent facilement parcourir l'interface utilisateur. Cependant, sur l'écran de droite, vous pouvez voir que tous les éléments sont très proches les uns des autres et qu'il n'y a pas assez d'espace blanc entre tous les éléments de ce type de mise en page. Merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 8. Bruit visuel: Salut tout le monde. Dans cette vidéo, nous allons parler du bruit visuel dans le design. Le bruit visuel, comme vous pouvez le deviner à partir de son titre, est tout à propos d'un écran ou d' une partie d'un produit numérique qui contient tant d'informations et de nombreux éléments dessus. Lorsque vous concevez une application ou un site Web, vous devez faire beaucoup attention aux détails. Parce qu'à la fin de la journée, nous voulons concevoir un écran convivial et facile à regarder. Assurez-vous d'éliminer tous les éléments ou informations inutiles de votre écran. Si vous n'êtes pas sûr que votre conception ait un bruit visuel ou non, il est recommandé de demander les commentaires des utilisateurs. Si vous regardez les photos sur le côté droit, vous pouvez voir que nous avons deux écrans différents. Dans l'écran de gauche, il n'y a pas de bruit visuel, et c'est génial en termes de conception de l'interface utilisateur. D' autre part, dans l'écran de droite, il y a trop de bruit visuel. Comme vous pouvez le voir, il y a tellement de tiques en haut, puis quelques éléments, qui pourraient être des vidéos ou des photos, puis encore une fois, des vidéos, et après cela quelques histoires, et vous pouvez reconnaître qu'il n'y a pas assez d'espace blanc entre ces éléments. Merci beaucoup d'avoir regardé cette vidéo, je vous verrai dans la prochaine vidéo. 9. Les icônes: Salut. Dans cette vidéo, nous allons parler de l'iconographie dans le design. iconographie est un langage visuel utilisé pour démontrer les aspects, le contenu ou la fonctionnalité. Les icônes sont censées être simples et claires, des éléments visuels qui sont reconnaissables immédiatement. Vous n'avez pas à redessiner des icônes bien connues telles que l'icône d'accueil , l'icône de recherche, etc. ou disons, ne pas réinventer la roue. Vous pouvez accéder à presque toutes sortes d'icônes sur les sites Web gratuitement ou à des coûts raisonnables. Mais que se passe-t-il si vous en avez besoin pour concevoir des icônes spécifiquement pour votre projet ? Dans ce cas, vous devez concevoir des icônes qui sont en harmonie avec votre design et d'autres icônes. Gardez à l'esprit que les icônes doivent être facilement comprises par les utilisateurs, alors assurez-vous de faire preuve de cohérence dans votre conception. 10. Typographie: Salut. Dans cette vidéo, nous allons parler de la typographie. Qu' est-ce que la typographie ? La typographie transforme le langage en élément visuel décoré. typographie est l'une des parties les plus importantes de la conception UI/UX, donc il vaut la peine d'en apprendre plus à ce sujet. Lorsque vous concevez une application ou un site Web, limitez le nombre de polices et de tailles que vous utilisez afin de simplifier votre conception. Commencez par deux polices au maximum ; une pour les en-têtes et l'autre pour les corps. Vous pouvez utiliser des polices gratuites ou payantes dans vos projets, mais je recommande fortement d'utiliser des polices gratuites. Si vous souhaitez utiliser des polices payantes, vérifiez attentivement la licence. Vous devez informer vos clients qu'ils doivent payer un supplément pour utiliser des polices payantes. Maintenant, si vous regardez le côté droit de l'écran, vous pouvez voir qu'ils ont classé la base de la typographie pour vous. Vérifions pas à pas. En haut, nous avons des propriétés. Chaque ligne de texte dans un programme a une ligne de base, comme vous pouvez le voir, il est indiqué ici avec la ligne bleue et aussi il a l'espacement des lettres que vous pouvez modifier dans votre conception. Bien sûr, il y a plus de propriétés liées à la typographie, cependant, pour précéder ces scores, il suffit de connaître ces deux propriétés. Maintenant, nous allons nous concentrer sur la comparaison de l'espacement des lettres. Sur la gauche, vous pouvez voir que nous avons l'espacement par défaut, mais à droite, je modifie l'espacement de ces lettres en fonction du type de projet sur lequel vous travaillez, vous pouvez modifier l'espacement des lettres comme vous le souhaitez. Parlons maintenant du poids de chaque police. La plupart des polices ont au moins un poids d'impression 3D, mais certaines d'entre elles en ont plus. Par exemple, une police peut avoir six poids différents, comme vous pouvez le voir sur votre écran, nous avons ici de la lumière au gras. Last but not least, la classification des polices. Comme vous pouvez le voir, nous avons deux classifications différentes pour les polices : le serif, qui est la gauche dans l'image, et le sans serif, qui est la bonne dans l'image. Quelle est la différence ? Bien sûr, vous pouvez les distinguer, mais laissez-moi vous expliquer afin de mémoriser la règle du serif et du sans serif. En fait, les polices de serif ont une sorte de ligne plate en haut d'eux et aussi en bas d'eux ou vous pouvez dire qu'ils ont des pieds. D' autre part, les polices sans serif n'ont pas ce genre de lignes. Sans en anglais et en français signifie sans, donc sans serif signifie sans serif. En tant que concepteur, vous êtes responsable de choisir le meilleur poids des polices et aussi la meilleure classification en fonction du type de projet sur lequel vous travaillez. Merci beaucoup d'avoir regardé cette vidéo, je vous verrai dans la prochaine vidéo. 11. Contraste de couleurs: Bonjour tout le monde. Dans cette vidéo, nous allons parler du contraste des couleurs, qui est un sujet très important quand il s'agit de la conception de l'interface utilisateur. Appliquer efficacement des couleurs est une compétence que tous ceux qui travaillent avec des compositions visuelles doivent posséder. En tant que concepteur d'interface utilisateur, vous devez savoir comment utiliser les couleurs dans vos projets. En ce qui concerne l'application des couleurs, la lisibilité et la lisibilité sont les facteurs clés. Les chercheurs ont montré que les couleurs vives permettent suffisamment de contraste, contribue à augmenter la lisibilité et la lisibilité. Veuillez tenir compte du fait que trop de contraste de couleur peut causer des difficultés à lire. Je recommande fortement que les concepteurs créent un niveau moyen de contraste, et pour mettre en évidence les éléments, ils peuvent utiliser des couleurs contrastées élevées. Vous pouvez également utiliser des sites Web pour vous fournir un rapport lorsque comparez deux couleurs pour voir s'il y a suffisamment de contraste ou non. Si vous regardez les exemples sur la droite, nous avons six couleurs différentes. Comme vous pouvez le voir, les quatre premiers sont acceptables et ont assez de contraste, mais les autres ne sont pas lisibles. Lorsque nous concevons une interface utilisateur, nous devons beaucoup prêter attention aux couleurs parce que parfois, vous en tant que concepteur, voulez être aussi créatif que possible. Cependant, la créativité doit venir après la lisibilité et la lisibilité. 12. La palette de couleurs: Salut tout le monde. Dans cette leçon, nous allons parler de la palette de couleurs. Créer un jeu de couleurs pour un produit peut sembler une tâche difficile, surtout si vous êtes un débutant. Cependant, en réalité, ce n'est pas aussi compliqué que de nombreux designers le pensent. Quel est le schéma de couleurs ? Votre jeu de couleurs est un mélange de couleurs utilisé dans votre interface utilisateur. Presque tous les jeux de couleurs contiennent les groupes de couleurs suivants. Couleurs primaires, couleurs secondaires, couleurs d'accent, neutrons, couleurs sémantiques. Quelles sont les couleurs primaires et secondaires ? Les couleurs primaires et secondaires sont les couleurs de base de votre interface utilisateur. Les couleurs utilisées le plus fréquemment dans votre conception d'interface utilisateur sont appelées couleurs primaires. La plupart des concepteurs choisissent généralement les couleurs de marque comme couleurs primaires. En fait, il est recommandé de ne pas avoir plus de trois couleurs primaires. En option, vous pouvez utiliser des couleurs secondaires afin distinguer vos produits et de créer des conceptions d'interface utilisateur plus intéressantes. Mais comment choisir les couleurs correctement ? Lorsque vous travaillez avec des couleurs, vous ne devez pas créer une combinaison de couleurs aléatoires. Parce que le résultat ne serait pas celui que vous attendez. Afin de comprendre comment travailler avec les couleurs, abord, vous devez savoir ce que la couleur va faciliter et comment cela fonctionne. Voici des combinaisons de couleurs importantes que vous devez connaître. Gratuit, qui sont deux couleurs qui sont sur les côtés opposés de la roue de couleur. Le suivant est monochromatique, qui sont trois tons de nuances et les adolescents sont une couleur de base. Le dernier est analogue, qui sont trois couleurs côte à côte sur la roue de couleur. Si vous regardez le côté droit de l'image, vous pouvez voir que nous avons une roue de couleur ici. Comme vous pouvez le voir, nous avons monochromatique. Par exemple, si vous regardez le rouge, nous avons trois nuances différentes ou disons les adolescents d'une couleur de base, et aussi nous avons gratuit. Par exemple, ici, nous avons le violet et le jaune, qui sont sur les côtés opposés de la roue de couleur. Donc, la combinaison de ces couleurs est grande. 13. Espacer: Salut tout le monde. Bienvenue à une autre leçon de ce cours. Dans cette vidéo, nous allons parler de l'espacement dans le design. La cohérence joue un rôle clé dans la conception de l'interface utilisateur. Lorsque vous concevez, vous devez tout mesurer et le garder cohérent. En tant que concepteur, l'espacement est à vous de décider, mais une fois que vous l'avez défini, vous devez utiliser les mêmes motifs d'espacement dans vos conceptions. Par exemple, si vous définissez l'espacement entre les prises d'en-tête et de corps sur huit pixels, vous devez toujours utiliser le même espacement dans l'ensemble de votre projet. Comme vous pouvez le voir sur l'image, tout l'espacement a été mesuré avec précision et rend le design plus clair. Par exemple, si vous regardez l'image, vous pouvez voir que nous avons 50 pixels du haut au nouveau titre des images, puis huit pixels de nouvelles images au haut du sous-titre et continuer et encore. Afin de garder votre conception claire, assurez-vous d'utiliser des modèles d'espacement cohérents dans l'ensemble de votre projet. 14. La composition: Salut tout le monde. Dans cette vidéo, nous allons parler de composition dans le design. Quel est le ratio d'or ? Le rapport d'or est une proportion mathématique entre les éléments de différentes tailles qui est considéré comme la proportion la plus esthétique pour les yeux humains. Le rapport d'or est égal 1:1 .618 et il est généralement illustré par des spirales en forme de coquillage. Ce nombre a été utilisé pour créer des proportions pour l'architecture, la peinture, la photographie, le design, etc. Mais comment utiliser le rapport d'or dans votre design ? Si vous avez un écran avec la largeur de 1 200 pixels, vous devez le diviser par 1,618 et le résultat sera 741,6. Maintenant, nous pouvons dire 1.200 pixels moins 741 équivaut à 459, donc nous avons deux sections avec la largeur de 741 pixels et 459 pixels. Comme vous pouvez le voir sur le côté droit de l'écran ici, nous avons une capture d'écran du site médium. Pouvez-vous voir comment il a été conçu en fonction du ratio d'or, afin qu'il puisse attirer l'attention de l'utilisateur au bon endroit au bon moment ? 15. Guide de conception: Dans cette vidéo, nous allons parler du Guide de conception. Qu' est-ce qu'un guide de conception ? Un guide de conception est un système qui peut vous aider à maintenir la cohérence de votre conception. Il peut également accélérer votre processus de conception. Les exemples que vous recherchez ne sont que quelques composants qui peuvent être utilisés dans votre guide de conception. Il y a beaucoup de choses qui peuvent être incluses dans votre guide de conception tels que les éléments de l'interface utilisateur , la typographie, l'iconographie, le dimensionnement et l'espacement, les palettes de couleurs, etc. 16. Fonts cohérents: Salut tout le monde. Dans cette leçon, nous allons parler de polices dans la conception. En tant que concepteur, vous travaillez toujours avec différentes polices, vous devez donc savoir comment les utiliser correctement. Comme il a été mentionné dans la section typographie, il est recommandé de travailler avec deux polices différentes au plus pour garder votre interface utilisateur simple. Quelles sont les meilleures polices pour la conception de l'interface utilisateur ? Numéro 1, San Francisco, il est préférable pour les sites Web modernes et les applications mobiles. Numéro 2, Open Sans, il est préférable pour les sites Web et les applications mobiles. Numéro 3, Montserrat, il est préférable pour les sites Web minimaux et les applications mobiles. Numéro 4, Proxima Nova, il est idéal pour les sites Web modernes centrés sur le contenu et les applications mobiles. Enfin, Roboto, c'est le meilleur pour les sites Web modernes et les applications mobiles. 17. Couleurs cohérentes: Hé tout le monde. Dans cette vidéo, nous allons parler de couleurs. L' application de couleurs à vos éléments d'interface utilisateur est l'une des parties les plus cruciales du processus de conception de l'interface utilisateur. Vous souvenez-vous de ce qui jouait un rôle clé dans la conception de l'interface utilisateur ? Tu as raison, la cohérence. Vous devez donc garder vos couleurs cohérentes aussi. Par exemple, si vous appliquez du bleu aux titres d'une page, vous devez appliquer la même couleur aux titres d'autres pages. Ou si vous appliquez un rouge à un bouton précieux, vous devriez utiliser la même couleur pour tous les autres boutons précieux sur d'autres pages. C' est pourquoi nous avons besoin d'un guide de conception et d'un guide de style. Si vous regardez l'image sur votre droite, vous pouvez voir que nous avons utilisé une couleur noire spécifique pour les titres, et nous utilisons une couleur spécifique pour nos boutons, etc. Il est donc important de garder vos couleurs cohérentes. 18. Icônes cohérentes: Bonjour, tout le monde. Dans cette vidéo, nous allons parler d'icônes dans le design. Vous pouvez penser que travailler avec des icônes est une partie facile de la conception de l'interface utilisateur. Cependant, si vous ne faites pas attention aux détails, vous n'obtiendrez pas un résultat approprié. Voici quelques points importants que vous devez prendre en charge. Numéro 1, évolutivité du test. vérifiez si vos icônes peuvent encore être reconnues à de petites tailles, telles que 15 pixels sur 15. Numéro 2, correctement dimensionné. La taille cible recommandée pour les objets à écran tactile est de 7 à 10 millimètres. N' oubliez pas également d'ajouter un remplissage entre les icônes pour éviter les robinets incorrects. Numéro 3, cohérence interne. Utilisez le même jeu de couleurs pour toutes les icônes et les mêmes attributs de style, tels que la taille des bordures. Numéro 4, alignement parfait. Essayez toujours d'avoir un alignement parfait dans l'iconographie, mais parfois, parce que vous avez des icônes de différentes tailles, vous devez les équilibrer par vous-même. Si vous regardez l'image sur votre droite, vous pouvez voir que nous avons deux groupes d'icônes différents. Dans le groupe de gauche, vous pouvez voir que nous avons une iconographie cohérente car nous utilisons uniquement des icônes de contour. Mais d'un autre côté, nous avons une iconographie incohérente parce que nous utilisons à la fois des icônes de contour et des icônes solides, ce qui n'est pas recommandé. 19. Éléments UI cohérents cohérents: Salut, tout le monde. Dans cette vidéo, nous allons parler de la cohérence des éléments de l'interface utilisateur. L' une des choses avec lesquelles vous travaillez toujours pendant que vous concevez une interface utilisateur est un élément d'interface utilisateur. Quels sont les éléments de l'interface utilisateur ? Boutons, cartes, champs de texte, curseurs, dialogues, graphiques , étapes, tableaux, contrôles de sélection , menus, barres de collation, etc. Comme vous pouvez le voir sur la photo, je n'ai choisi que quelques-uns d'entre eux pour vous parce que, certainement, je ne pouvais pas tous les mettre ici. Cependant, vous en apprendrez presque tous dans le chapitre des éléments de l'interface utilisateur. 20. Ressources de police: Hé, tout le monde. Dans cette vidéo, nous allons parler des ressources de police. Parfois, choisir les bonnes polices pour vos projets peut être difficile et fastidieux, donc dans cette partie, vous allez connaître les meilleures ressources en ligne pour obtenir vos polices facilement. Le premier site est appelé Google Fonts, qui est si célèbre et vous pouvez y trouver des polices gratuites. Le deuxième site est appelé MyFonts, et vous pouvez y trouver des polices gratuites et payantes. Enfin, vous pouvez consulter le site Web Adobe Fonts, où vous pouvez trouver des polices payantes. Si vous rencontrez des problèmes avec l'appariement des polices, vous pouvez également utiliser Typewolf ou FontPair. 21. Ressources de couleur: Salut tout le monde. Dans cette leçon, nous allons parler des ressources de couleur. Maintenant, il est temps de chercher nos couleurs afin de les utiliser dans nos projets. La plupart du temps, trouver de bonnes couleurs est une tâche difficile pour les concepteurs d'interface utilisateur, surtout si vous êtes un débutant. Voici quelques ressources absolument utiles pour trouver des couleurs. Numéro 1, Color Hunt, numéro 2, Adobe Color, qui est si utile en passant, numéro 3, je ne sais pas comment le prononcer, mais je pense que c'est Coolers ou Coolers, numéro 4, WebGradients, qui est un autre bon site Web pour trouver des gradients si vous les cherchez. Assurez-vous de passer suffisamment de temps à trouver la meilleure palette de couleurs possible pour vos projets. 22. Ressources d'icônes: Hé, tout le monde. Dans cette vidéo, nous allons parler des ressources d'icônes pour votre projet de design. Comme mentionné précédemment, l'iconographie est une partie essentielle du processus de conception de l'interface utilisateur, et il est si important de savoir où vous pouvez trouver engageant, et une icônes standard. Voici quelques ressources utiles pour trouver des icônes. Numéro 1, icône plate que vous pouvez trouver des icônes payantes ou gratuites là-bas. Numéro 2, IconFinder, qui est un autre bon site Web pour trouver des icônes. Last but not least, Nucleo, qui est une application, et il rassemble toutes les icônes pour vous en un seul endroit. N' oubliez pas que vous devez utiliser les icônes qui sont faciles à reconnaître par les utilisateurs, alors prenez votre temps et consultez toutes les icônes disponibles que vous pouvez utiliser dans votre projet. 23. Introduction à Figma: Salut, tout le monde. Bienvenue dans une autre section de ce cours. Dans cette section, nous allons parler de Figma. Qu' est-ce que Figma ? Figma est un outil de conception d'interface qui fonctionne dans le navigateur. Il vous donne tous les outils nécessaires pour concevoir une interface utilisateur de classe mondiale. Mais c'est en fait beaucoup plus que cela parce que Figma, dans sa nature, est un outil toujours en ligne, il permet une collaboration en direct et en temps réel, ce qui est une fonctionnalité fantastique. Bien que Figma soit basée sur un navigateur, il existe des versions de bureau pour Windows et Mac OS. Je vais vous montrer comment vous pouvez utiliser les versions de navigateur et de bureau dans la prochaine vidéo. Contrairement à d'autres outils tels que Sketch, Figma est libre d'utiliser sauf si vous avez besoin de créer plus de trois projets. Vous pouvez créer des pages et des fichiers illimités dans la version gratuite. Très bien, les gars, merci beaucoup d'avoir regardé cette vidéo. J' espère que vous l'avez apprécié et je vous verrai dans la prochaine vidéo. 24. Exigences de Figma: Salut, tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, je vais vous montrer comment vous pouvez créer un compte sur Figma afin de l'utiliser pour nos projets. Comme je l'ai déjà mentionné, Figma est libre d'utiliser. Cependant, si vous voulez créer plus de trois projets, vous devez obtenir le compte professionnel qui n'est pas nécessaire pour ce cours. Mais la bonne nouvelle est que si vous êtes étudiant et que vous êtes inscrit dans une université ou une école, vous pouvez toujours créer un compte Figma pour un étudiant et vérifier votre statut d'étudiant et l'utiliser gratuitement. C' est fantastique. Mais si vous n'êtes pas étudiant, il n'y a pas de problème. Vous pouvez toujours utiliser toutes les fonctionnalités de Figma avec le compte gratuit et vous pouvez toujours créer des pages et des fichiers illimités. Comment créer un compte ? C'est si simple. Si vous ouvrez le site Figma qui est figma.com, vous pouvez cliquer sur « S'inscrire ». Ici, vous pouvez choisir si vous souhaitez vous inscrire avec un compte Google ou avec votre adresse e-mail et définir un nouveau mot de passe pour votre compte. C' est totalement à toi de décider. Vous pouvez également vous connecter à votre compte avec votre compte Google ou avec votre adresse e-mail et mot de passe que vous avez définis. Permettez-moi de me connecter avec mon compte Google. On y va. Comme vous pouvez le voir, chaque fois que vous créez un compte, vous avez déjà quelques projets ici appelés Figma Basics, Prototyping dans Figma et Wireframing dans Figma. Si j'ouvre celui-ci, vous pourriez voir quelques tutoriels simples et quelques rudiments sur Figma et comment vous pourriez l'utiliser. Vous n'avez pas besoin de vous en soucier car nous allons couvrir tous les aspects de Figma dans la prochaine série de vidéos. Comme vous pouvez le voir sur votre gauche, vous avez quelques menus. Le premier est votre compte ou votre profil. Si vous cliquez dessus, vous pouvez voir que c'est votre nom. Vous pouvez modifier l'image de votre profil. Ici, il y a quelques options, des jetons d'accès personnels et nous n'avons pas besoin de l'utiliser pour l'instant. Si vous souhaitez supprimer votre compte, vous pouvez utiliser cette option. L' option suivante est Rechercher. Vous pouvez effectuer une recherche dans vos projets et vos fichiers. Ensuite, vous avez Récent qui vous montre les projets récents et les fichiers que vous avez ouverts. Ensuite, nous avons Plugins qui vous donne la possibilité d' installer quelques plug-ins ce qui est si important. On en parlera plus tard. Ensuite, nous avons des brouillons. Vous pouvez créer des brouillons et aussi vous avez supprimé des fichiers. Vous pouvez également créer une nouvelle équipe là-bas si vous voulez travailler dans une équipe. Vous pouvez également importer votre fichier d'esquisse. C'est incroyable. Figma convertit automatiquement votre fichier de croquis en fichier Figma et vous pourriez l'utiliser parfaitement. ce moment, nous utilisons Figma sur notre navigateur. Cependant, comme je l'ai mentionné précédemment, vous pouvez toujours installer Figma sur votre système. Comment peux-tu faire ça ? C'est si simple. Si vous allez de l'avant à figma.com/downloads ou si je vais de l'avant et je me déconnecte ici, est la page d'apprentissage et vous pouvez voir les ressources et si vous passez le curseur sur ce lien, vous pouvez voir le lien de téléchargement là-bas. Je vais cliquer dessus. Ici, nous avons les téléchargements de Figma qui nous permet de télécharger quelques ressources. Le premier est l'application de bureau. Ici, vous pouvez trouver l'application de bureau pour macOS ou l'application de bureau pour Windows. En fonction de votre système d'exploitation, vous pouvez le télécharger et l'installer. Ensuite, nous avons Live Device Preview. C' est une excellente application. Vous pouvez le télécharger depuis l'App Store ou Google Play et ensuite vous pouvez prévisualiser votre design instantanément. Enfin, nous avons des installateurs de polices. Qu'est-ce que c'est ? Lorsque vous utilisez Figma sur votre navigateur, Figma ne peut pas accéder à vos polices locales, ce qui n'est pas bon car la plupart du temps vous devez utiliser vos polices locales. Afin de résoudre ce problème, vous pouvez télécharger le programme d'installation de police pour Windows ou macOS puis l'installer. Après cela, vous pouvez accéder à vos polices locales sur votre navigateur, ce qui est assez génial. Bien que vous puissiez accéder à vos polices locales en installant ce programme d'installation de polices, je vous recommande fortement d'utiliser la version de bureau de Figma car cela accélère vraiment votre processus de conception. Les gars, merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu. Dans la prochaine vidéo, je vais parler de l'environnement de Figma et comment vous pourriez l'utiliser simplement. On se voit alors. 25. Environnement Figma: Salut tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons parler de l'environnement de Figma. Donc, comme vous pouvez le voir, en ce moment, j'utilise Figma sur mon navigateur. Cependant, je vais aller de l'avant et ouvrir la version de bureau afin d'accélérer mon processus de conception. Laisse-moi ouvrir l'application Figma, on y va. C' est mon compte principal, comme vous pouvez le voir, et c'est la version de bureau que nous pouvons utiliser facilement. Donc, tout d'abord, allons de l'avant et créons un nouveau fichier. Ici, comme vous pouvez le voir, nous pouvons diviser l'environnement de Figma en quatre sections différentes. La barre d'outils, qui est juste en haut, et il se compose de tous les outils nécessaires pour concevoir une interface utilisateur de classe mondiale. Comme vous pouvez le voir ici vous avez un menu et ici vous avez quelques sous-menus tels que fichier, édition, vue, objet, vecteur, texte, arrangement, etc. Nous allons couvrir toutes ces options pendant ce cours. Ici vous avez quelques outils tels que les outils de déplacement, l'échelle, ainsi que l'outil de cadre et de tranche. Ensuite, vous avez l'outil Objets ou Formes et aussi l'outil Plume. Ensuite, nous avons le texte et les commentaires. Sur votre gauche, nous avons le volet Calques qui répertorie toutes vos couches et tous vos actifs respectivement. Comme vous pouvez le voir, il n'y a pas encore de composant ici parce que nous n'avons pas encore créé de composant. Cependant, dans les leçons à venir, nous apprendrons comment utiliser ces sections également. Ensuite, à votre droite, nous avons l'inspecteur, qui se compose de trois parties différentes. Comme vous pouvez le voir, nous avons la conception, le prototype et le code. Donc, si je clique sur un « A », sur mon clavier, je peux créer un plan de travail pour démarrer mon processus de conception. Par exemple, je peux choisir le téléphone et ici je vais choisir iPhone 11 Pro ou X. Comme vous pouvez le voir, vous avez la dimension juste là, je vais cliquer dessus, et ici, vous avez votre plan de travail et vous pouvez voir le nom sur la couche de la liste. Si vous double-cliquez dessus, vous pouvez le changer à ce que vous voulez. Par exemple, disons à la maison, assez bon, et je peux facilement choisir la forme du rectangle, et nous y allons. Nous avons une autre couche juste sous ce plan de travail. Ici, à votre droite, dans la section inspecteur, vous avez différentes options. Par exemple, dans la section de conception, vous avez des alignements, vous avez une cote, ainsi que l'emplacement, le positionnement de votre forme. Vous avez également la section des contraintes, et nous allons plonger dans chaque section séparément dans la prochaine série de vidéos. Alors ne vous inquiétez pas si vous ne comprenez pas quelles sont les contraintes ou fondamentalement ce qu'elles font. Par exemple, nous avons ici un calque et vous pouvez ajuster l'opacité de votre calque et son mode. Ici, vous avez le remplissage pour changer la couleur. Comme vous pouvez le voir, nous avons un accident vasculaire cérébral, nous avons des effets pour ajouter quelques ombres, puis nous avons l'exportation. Pour le prototypage, vous pouvez aller à la section prototype. Ici, nous avons aussi différentes options que nous allons couvrir dans la section prototypage de ce cours. Vous avez également la section de code, et c'est si utile si vous êtes un développeur ou si vous voulez remettre les propriétés de votre conception à votre développeur web ou même à votre développeur d'applications car vous pouvez facilement exporter vos propriétés dans le code, par exemple, pour iOS, nous avons des propriétés variables et différentes. C' est plutôt cool. Enfin, la quatrième section est la Toile, qui se trouve au milieu de Figma. Ici, vous placerez tous vos designs et tous vos plans de travail. Vous avez aussi l'option de partage juste là, que vous pouvez partager votre fichier ou vos composants avec votre membre de l'équipe, ou même vous pouvez l'envoyer à votre client pour examiner le projet, etc. Tous les bons gars. Merci beaucoup d'avoir regardé cette vidéo. J' espère que vous l'avez apprécié et je vous verrai dans la prochaine vidéo. 26. Les formes: Salut tout le monde. Bienvenue sur une autre vidéo de ce cours. J' espère que tu vas bien. Dans cette vidéo, nous allons parler des formes. L' outil de forme est l'un des outils les plus importants lorsque vous concevez une interface utilisateur, car quel que soit le type d'interface que vous concevez, vous devrez certainement utiliser l'une de ces formes. En haut de la barre d'outils, vous pouvez trouver les formes. Si vous cliquez dessus, vous pouvez voir qu'il y a différentes formes ici. Par exemple, nous avons le rectangle. Si je sélectionne cela, je peux facilement créer cette forme en faisant glisser et déposer. Comme vous pouvez le voir, nous avons créé un rectangle et il s'appelle rectangle 1. Chaque forme possède certaines propriétés, par exemple, cette forme possède la propriété rayon d'angle, et comme vous pouvez le voir, elle est indiquée par ces points. Si je clique juste sur l'un d'eux et que je fais glisser la souris un peu comme ça, je peux régler le rayon de coin à 30. Alternativement, vous pouvez changer la quantité de rayon de coin, écrivant l'inspecteur là-bas, par exemple, je peux le définir sur 50 comme ceci. Si vous souhaitez modifier le rayon d'angle ou un seul de ces points ou arêtes, vous pouvez maintenir la touche « Option » enfoncée, puis faire glisser et déposer comme ceci. Comme vous pouvez le voir maintenant, nous avons une quantité différente de rayon de coin pour chaque point comme celui-ci. En fait, vous pouvez personnaliser votre rayon de coin comme celui-ci si vous cliquez simplement sur « Independent Corners » sur cette icône, vous pouvez voir qu'il y a un lissage de coin, et je vais cliquer dessus. Ici, nous avons un curseur et je vais le mettre à 60 pour cent. Comme vous pouvez le voir ici, il est écrit iOS, alors qu'est-ce que cela signifie ? En fait, dans iOS, Apple utilise des coins lisses. Si vous connaissez Sketch, nous utilisons également le même terme. Comme vous pouvez le voir, cela rend nos coins beaucoup plus lisses. Bien sûr, vous pouvez l'augmenter, cependant, 60 pour cent le rend fière allure, parfait. Bien sûr, vous pouvez changer la couleur de votre forme, comme nous l'avons discuté dans la vidéo précédente. Cependant, nous allons couvrir toutes ces fonctionnalités dans la prochaine série de vidéos, mais pour l'instant, nous allons nous en tenir aux formes. La forme suivante est appelée ligne. C' est juste un accident vasculaire cérébral. Si je maintiens « Shift » et « deux », vous pouvez voir que Figma m'apporte ces formes automatiquement d'une manière que je peux le voir clairement, donc je vais cliquer dessus. Ici, sur course, vous avez différentes propriétés aussi. Par exemple, vous pouvez modifier l'épaisseur de la ligne ou disons ce trait comme ceci. Laisse-moi le mettre à 10. Si vous cliquez sur ces points, vous pouvez voir que nous avons différentes options ici. Ça s'appelle un AVC avancé et on a un cap et une jointure. Qu' est-ce que ça veut dire ? Jetons un coup d'oeil. Laissez-moi ouvrir ce menu et ici nous avons différentes options. Nous avons rond qui fera notre ligne arrondie pour les deux côtés. Nous avons un carré, ce qui n'a pas de sens parce que c'est un peu pareil. Nous avons une flèche de ligne comme ça, et nous avons une flèche de triangle comme ça. Si je choisis, par exemple, « Flèche de ligne » et que je décide de modifier cette forme en double-cliquant sur cette forme et par exemple, déplaçant ce point, vous pouvez voir qu'elle va changer automatiquement, assez bien. Nous couvrirons les jointures dans les futures leçons. Parlons maintenant de la forme suivante, laissez-moi cliquer sur « Annuler » pour terminer l'édition. La forme suivante est une flèche, comme celle-ci. C' est encore une ligne ou disons juste un trait que nous venons de créer. Cependant, vous pouvez également créer une flèche comme celle-ci. Comme vous pouvez le voir, vous avez différents types, rond , carré, flèche linéaire et triangle flèche. Le premier, par défaut, a été mélangé parce que nous avions une ligne personnalisée. La forme suivante est le cercle. Je vais tenir « Shift » afin de garder le rapport d'aspect comme ça. Je vais glisser et déposer pour créer ce cercle assez bien. Ce cercle a une nouvelle propriété qui est appelée arc. Cliquez sur cela et essayons de bouger un peu pour voir ce que vous pouvez réaliser en modifiant cette propriété comme celle-ci. C' est assez génial et surtout c'est si utile lorsque vous créez un graphique, génial. La forme suivante s'appelle Polygone, je vais en créer une. Supprimons cette forme pour l'instant. Je vais le rendre plus grand, plutôt bon. La forme de polygone a deux propriétés différentes. Le premier est le rayon de coin, et il fonctionne comme des rectangles. Le second est appelé count, ce qui signifie le nombre d'arêtes que nous utilisons que nous créons. Laissez-moi l'augmenter en maintenant « Shift » et en cliquant dessus comme ça. Je vais déplacer ma souris de haut en bas. Vous pouvez également le modifier dans l'inspecteur, mettons-le à huit, plutôt bon. Je peux aussi modifier le rayon évidemment ici, fantastique. Laisse-moi enlever ça et je vais créer la star une fois de plus ici, plutôt bien. La forme de l'étoile a trois propriétés différentes. Le premier est le rayon de coin, encore une fois, comme ça. Le second est le rapport, qui est le rapport entre ces deux bords comme celui-ci. Vous pouvez le modifier, je vais le mettre à 40 Le dernier est le compte. Que vous pouvez augmenter et diminuer comme vous le souhaitez, assez génial. Last but not least, est l'image de lieu que vous pouvez choisir une image à partir de votre système. Si vous faites glisser et déposer comme ceci et assurez-vous de maintenir la touche Maj de votre clavier afin de conserver le rapport, vous pouvez placer une image. Vous pouvez également changer le rayon aussi, c'est si simple. Parlons maintenant de la propriété de dimension juste là. Ici, comme vous pouvez le voir, vous avez différentes propriétés comme X et Y, qui se réfère à la position de cette forme. Si je mets zéro et zéro pour Y, comme vous pouvez le voir, il se déplace dans le coin supérieur gauche parce que les points zéro et zéro commencent à partir du coin supérieur et gauche. Maintenant, vous pouvez modifier la largeur et la hauteur. Par exemple, vous pouvez le définir sur 300. Cependant, comme vous pouvez le voir, la largeur et la hauteur sont liées. Si vous voulez les changer séparément, vous pouvez facilement les dissocier en cliquant sur cette icône, qui est appelée proportions contraintes, puis je peux modifier la largeur ou la hauteur séparément comme ceci. Comme dans Sketch, vous pouvez effectuer des opérations mathématiques ici. Par exemple, je peux diviser 300 par 2, comme ça et là nous allons, nous avons 150 ou je peux multiplier 180 par 2. C' est une fonctionnalité géniale et utile lorsque vous concevez votre interface utilisateur. Nous avons les alignements là où ils sont en haut. Par exemple, si je choisis cet objet ou cette forme, je peux l'aligner au centre horizontalement, je peux l'aligner sur le côté gauche, aligner sur le côté droit, aligner vers le haut, aligner verticalement, et l'aligner vers le bas. Mais que faire si vous voulez aligner un objet qui est placé dans un autre objet ? Supposons que nous allons mettre cet objet ici, je vais changer la couleur pour quelque chose comme gris foncé, comme ça. Je vais le rendre un peu plus petit. Supposons que nous allons aligner cette forme avec notre rectangle, qui ressemble à un carré en ce moment, mais comment pouvons-nous le faire ? Tout d'abord, vous devez vous assurer que vous avez choisi les deux objets en même temps. Vous pouvez maintenir la touche « Maj » sur votre clavier et les sélectionner, ou vous pouvez les sélectionner comme ceci, avec glisser-déposer. Ensuite, vous cliquez sur « Aligner horizontal au centre » et « Aligner vertical au centre » et c'est fait, assez génial. Maintenant, dans cette vidéo, nous avons appris à utiliser des formes et vous connaissez les propriétés de chaque forme spécifique. J' espère que vous avez apprécié cette vidéo et je vous verrai dans la prochaine vidéo. 27. Éditer des formes: Salut tout le monde et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons parler de l'édition de formes, ce qui est un sujet très important car cela arrive tout le temps nécessaire pour éditer vos formes. Tout d'abord, je vais appuyer sur « A » et comme vous pouvez le voir maintenant je peux choisir mon tableau d'art. Ouvrons le menu du bureau et ici je vais choisir, MacBook Pro, pour cette vidéo, ça n'a pas d'importance, mais j'ai assez d'espace pour vous montrer comment vous pouvez éditer vos formes. Alors ce que je vais faire est de créer un nouveau rectangle ici. Je vais tenir, Shift, et glisser et déposer comme ça. Ensuite, augmentons le rayon du coin. En passant, si vous maintenez la touche Maj sur votre clavier, vous pouvez augmenter ou diminuer le rayon de coin de 10 unités, comme ceci, assez bon. Ensuite, je vais le remplir avec une autre couleur, alors cherchons un très beau bleu. Je pense que c'est génial et puis je vais créer un autre rectangle ici, alors maintenons, Shift, encore une fois, et je vais vous montrer une très bonne technique pour choisir vos couleurs correctement. Si vous n'êtes pas sûr de savoir comment faire correspondre une bonne couleur avec ces bleus qui créent un grand contraste entre eux, vous pouvez d'abord choisir la même couleur comme celle-ci. Ensuite, si vous déplacez simplement ce cercle vers le côté plus sombre de cette palette de couleurs, vous pouvez facilement choisir une correspondance parfaite avec votre couleur d'arrière-plan, ce qui est incroyable, n'est-ce pas ? Maintenant, comment pouvons-nous modifier notre forme ? Pour éditer n'importe quelle forme, nous devons d' abord entrer en mode d'édition. Pour ce faire, vous pouvez double-cliquer sur cette forme et nous y allons. Maintenant, nous sommes en mode édition, et comme vous pouvez le voir, nous avons quatre nœuds différents ici, ou disons des points avec lesquels nous pouvons commencer à éditer notre forme. Si je clique sur le cercle, et essayer de le déplacer un peu. Vous pouvez voir que je peux facilement éditer cette forme comme je le souhaite, comme ceci. Je peux même augmenter le rayon de ces coins de l'inspecteur, quelque chose comme ça. Vous pouvez également ajouter plus de nœuds sur votre chemin, comme ceci. Par exemple, ici je peux cliquer une fois et là nous allons, je viens de créer un nouveau nœud, et je peux l'éditer d'une autre manière comme ceci. Laissez-moi revenir au premier état de ce rectangle, ou disons carré comme ça. Supposons maintenant que vous voulez créer quelque chose comme une courbe, dans ce cas, vous pouvez utiliser l'outil de pliage, qui est ici. Vous pouvez cliquer dessus et choisir l'un de ces nœuds, alors vous pouvez voir que le contrôleur géré apparaît, et nous ce contrôleur géré, vous pouvez facilement ajuster votre courbe comme ceci. C' est génial, n'est-ce pas ? Le raccourci de l'outil de pliage tient, Commande, sur votre clavier, nous y allons. Vous pouvez facilement ajuster votre courbe afin de répondre à vos attentes, assez génial. Après avoir modifié votre forme, vous devez vous rappeler de fermer votre mode d'édition. Pour ce faire, vous pouvez cliquer, « Annuler » comme ceci, donc En ce moment, nous sommes hors du mode d'édition. Mais n'est-il pas préférable de créer une véritable icône afin de vous montrer comment vous pouvez utiliser le mode d'édition puissant ? Faisons ça. Tout d'abord, je vais zoomer un peu comme ça, puis je vais entrer en mode édition, nous allons doubler le clic. Après cela, je vais créer un nouveau nœud ici. Je vais cliquer dessus, puis je vais le faire glisser en maintenant, Shift, comme ça, assez bien. La prochaine chose que je vais faire est de sélectionner tous les nœuds en maintenant, Commande A ou Contrôle A, dans Windows, puis je vais augmenter le rayon de coin. Augmentez-le à six peut-être, c'est plutôt bien. Maintenant, je vais le rendre un peu plus grand, et la dernière chose que je vais faire est de faire tourner cette icône. Pour faire pivoter quelque chose dans Figma, vous pouvez pointer votre souris juste à l'extérieur de votre forme, et vous pouvez voir que l'indicateur de rotation ou l'icône apparaît immédiatement. Ensuite, je vais tenir, Shift, et je vais faire pivoter de 180 degrés. Comme vous pouvez le voir, vous avez le montant ici, et nous y allons. A quoi ça ressemble ? Tu as raison, c'est comme un signet. Pouvez-vous voir à quel point cet outil d'édition est incroyable et puissant ? Je vais faire quelques changements pour le rendre meilleur. Laissez-moi double-cliquer sur la forme, et je vais sélectionner ces deux nœuds supérieurs, puis augmenter le rayon de coin à 26 peut-être, assez génial. Laissez-moi sélectionner les deux couches et je vais les regrouper par, Commande G ou Contrôle G, dans Windows, et je vais le nommer, signet. Que pouvons-nous faire d'autre ? Allons de l'avant et créez un polygone ici, je vais définir la couleur sur le même bleu que notre icône de signet. Copiez et collez ces arrière-plan en tant que cadre. Je vais tenir, Clé de commande ou Clé de contrôle, dans Windows et cliquez sur ces rectangle ou carré et le copier par, Commande C, et je vais le coller. Toutefois, n'oubliez pas de déplacer ce calque en dehors de ce groupe de favoris. Je vais le déplacer un peu comme ça, maintenant nous allons double-cliquer sur ce triangle. Ici, je vais créer un autre noeud en bas, comme ceci et laissez-moi le faire glisser un peu, nous y allons. Nous avons notre marqueur GPS. C' est plutôt cool, n'est-ce pas ? Laisse-moi le rendre plus petit. Fantastique. Laisse-moi le grouper et je vais écrire. Laissez-moi agrandir un peu ce tableau d'art, puis je vais vous montrer comment vous pouvez utiliser l'outil stylo. Supposons que vous voulez créer, par exemple, une flèche incurvée, comment pouvez-vous faire cela ? C'est si simple. Commençons par ajouter un nœud, alors vous avez besoin d'un autre nœud comme celui-ci et le dernier ici, c'est tout. Tout d'abord, je vais augmenter l'épaisseur de course à quatre peut-être, puis je vais le faire tourner un peu. Si je clique sur ces points, je peux changer le mode Cap pour ligne flèche comme ça, c'est plutôt cool. Je peux même l'éditer comme ça. Pouvez-vous voir à quel point il est facile de créer de nouvelles formes et de les modifier ? Plutôt génial. Très bien les gars, merci beaucoup d'avoir regardé ces vidéos, j'espère que ça vous a plu. Dans la prochaine série de vidéos, nous nous entraînerons à utiliser ces outils en créant des projets réels. Alors ne vous inquiétez pas, si vous ne comprenez pas tous les détails, je m'assurerai de tout expliquer en détail. Je te verrai dans la prochaine vidéo. 28. Les bases de calques: Salut tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons parler du panneau des calques. Savoir que vous pouvez utiliser correctement le panneau Calques est si important. Il peut sembler facile à utiliser, cependant, parfois il devient un peu difficile en termes de réorganisation de vos calques et de vos objets. Plongons dans ces parties et je vais vous montrer comment vous pouvez l'utiliser efficacement. Comme vous pouvez le voir, vous avez la liste des calques sur votre gauche. Ici, vous pouvez voir tous vos calques, tous vos groupes, ainsi que toutes vos images. Chaque fois que vous créez une forme ou un nouvel objet, il se trouve en haut de la liste des calques. Essayons ça. Je vais créer un rectangle ici, et comme vous pouvez le voir, j'ai rectangle 1. Pour renommer ce rectangle, je vais double-cliquer dessus et appelons-le R1. Ensuite, je vais créer une autre forme. Créons un cercle. Plutôt bien. Je vais changer la couleur, afin de la rendre plus visible. Plutôt génial. Je vais l'appeler C1. Comme vous pouvez le voir, C1 a été placé en haut de la liste des calques. Il apparaît à l'avant de votre Canvas. C' est la raison pour laquelle ce cercle est visible ici. Si je déplace ce calque en dessous de R1, il n'est plus visible. Cependant, vous pouvez toujours modifier ses propriétés comme sa couleur ou sa taille. Si je le déplace à sa position précédente, vous pouvez voir qu'il est à nouveau visible. commande de vos couches est si importante. Supposons maintenant que nous allons regrouper nos couches. Sélectionnez ces deux formes et maintenez la commande G. Comme vous pouvez le voir, nous venons de créer le groupe un. Chaque fois que vous voulez voir les calques inclus dans ce groupe, vous pouvez utiliser la petite flèche à côté de ces icônes, qui indique qu'il s'agit d'un groupe. Je vais cliquer dessus, et on y va. Pour sélectionner une couche, vous pouvez facilement cliquer dessus. Comme vous pouvez le voir, un vélo bleu clair apparaît afin de montrer que cette couche a été sélectionnée. Si vous allez dans Menu, et allez dans Préférences, vous pouvez voir que vous avez différentes options ici. L' un d'eux est, Mettre en surbrillance les calques sur le survol. Qu' est-ce que ça veut dire ? Cela signifie que si vous placez votre souris au-dessus de chaque calque, comme par exemple C1, vous pouvez voir sur le Canvas que la ligne bleue apparaîtra afin de montrer qu'il s'agit de la couche souhaitée. Je vais choisir ça. Si vous voulez dissocier ces couches, vous pouvez facilement cliquer sur le nom de ces groupes, puis cliquer avec le bouton droit ici, et vous pouvez cliquer sur « Dégrouper » comme ça. Je vais utiliser la commande Z ou le contrôle Z dans Windows. Et si vous voulez cacher des couches ? C'est si simple. Supposons que nous allons cacher ce cercle, qui s'appelle C1. Pour ce faire, tout d'abord, nous devons passer le curseur sur cette couche spécifique comme celle-ci. Ensuite, une icône d'œil apparaît immédiatement, à côté de ces cadenas. Je vais cliquer sur cette icône Eye et vous pouvez facilement désactiver et activer ce calque, comme ceci. Vous pouvez également verrouiller chaque couche en cliquant sur ce cadenas afin d'éviter que votre calque ne soit modifié accidentellement. Lorsque vous verrouillez votre couche, vous ne pouvez pas déplacer votre couche, vous ne pouvez pas interagir avec votre couche. Cependant, vous pouvez toujours modifier ses propriétés. Essayons ça. Je vais essayer de bouger un peu cette couche. Comme vous pouvez le voir, parce qu'il a été verrouillé, je ne peux pas le déplacer. Sa position est fixe et vous pouvez utiliser cette technique pour verrouiller vos arrière-plans. Parfois, cela peut être utile. Cependant, essayons maintenant de changer certaines de ses propriétés. Par exemple, je vais changer de couleur. Comme vous pouvez le voir, je peux toujours avoir accès à ses propriétés, bien qu'il ait été verrouillé. Pour déverrouiller cela, vous pouvez à nouveau cliquer sur ce cadenas, et voilà, il est déverrouillé. Vous pouvez reconnaître le type de chaque couche votre liste de calques en fonction de l'icône en regard de son nom. Comme vous pouvez le voir sur l'image, nous avons cadre, nous avons des groupes, nous avons des composants dont nous parlerons dans les leçons futures, nous avons des instances, nous avons un objet texte, nous avons la forme, l'image, un GIF animé. Parlons maintenant du positionnement de vos couches. Encore une fois, parce que je vais vous montrer comment vous pouvez réorganiser le positionnement de vos calques juste sous Canvas. Supposons que vous voulez apporter le carré ou disons rectangle à l'avant. Pour ce faire, bien sûr, vous pouvez aller à la liste des calques et le déplacer comme ceci, et c'est fait. Cependant, il y a une alternative à cela. Vous pouvez facilement cliquer avec le bouton droit sur cela sur Canvas, et vous pouvez choisir, Apporter à l'avant. On y va. Si vous connaissez Adobe Illustrator, vous savez que vous pouvez également utiliser les mêmes fonctionnalités dans ce logiciel. Maintenant, allons à la section des actifs. Ici, comme vous pouvez le voir, parce que nous n'avons pas encore créé de composants, nous ne pouvons pas voir de composants ici. Fondamentalement, les composants sont des parties de votre conception que vous pouvez réutiliser. Nous en parlerons plus tard, et nous allons plonger dans les composants dans les futures leçons. Nous avons une autre option ici qui s'appelle pages. haut, comme vous pouvez le voir, nous avons ici la page 1, et si je clique dessus, vous pouvez voir que j'ai des pages. Ça s'appelle Page 1. Vous pouvez renommer ça. Je vais le changer en site web. Vous pouvez le dupliquer si vous faites un clic droit sur cette couche, comme vous pouvez le voir, vous pouvez ajouter une nouvelle page à cette liste de pages, comme ceci. Vous pouvez l'appeler Page 2. La bonne nouvelle est qu'il n'y a pas de limite pour créer des pages. Vous êtes libre de créer autant de pages que vous le souhaitez. Par exemple, vous pouvez séparer certaines parties de votre conception afin de le rendre clair lorsque vous travaillez en équipe, ou si vous voulez créer des prototypes différents, c'est une bonne idée d'avoir des pages différentes. Je vais aller sur le site, et c'est tout pour cette vidéo. Merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 29. les opérations booléennes: Bonjour tout le monde. Bienvenue sur une autre vidéo des partitions. Dans cette vidéo, nous allons parler des opérations booléennes. En fait, de nos jours, nous utilisons des opérations booléennes presque dans tous les aspects de notre vie, tels que l'art, la programmation, le design, etc. Aussi difficiles que cela puisse paraître, en fait, les opérations booléennes sont si simples. Plongons dedans et je vais vous montrer comment vous pouvez les utiliser facilement. Comme vous pouvez le voir, j'ai créé un projet simple ici avec quatre plans de travail différents, et je les appelle Union, Soustraire, Intersect et Exclure. Ce sont nos opérateurs booléens. Comme vous pouvez le voir ici, nous avons ce Menu et nous avons la Sélection de l'Union, nous avons Soustraire la Sélection, nous avons Intersect Sélection, et nous avons Exclure la Sélection. Tout d'abord, laissez-moi choisir ce plan de travail et je vais tenir « Shift » et deux, comme ça, comme vous pouvez le deviner, union signifie combiné. Si j'essaie de chevaucher ces formes avec ce cercle, comme vous pouvez le voir, elles ont été superposées. Si je choisis les opérations booléennes et que je choisis l'opération Union, vous pouvez voir que nous avons combiné ces deux cercles en une seule forme. Ici, vous pouvez, bien sûr, avoir accès à des sous-couches comme ces cercles et vous pouvez toujours les éditer. Cependant, nous avons une seule forme et ces opérations sont si utiles pour créer des icônes, et nous en parlerons plus tard. Maintenant, allons de l'avant et parlons de la prochaine opération qui est Soustraire. Tout d'abord, laissez-moi chevaucher ces formes comme ça. Je vais choisir Soustraire. Comme vous pouvez le voir, il soustrait la section qui se chevauche de la forme de base. La section qui se chevauche est cette partie au milieu. Lorsque je choisis Soustraire, il supprime ces sections qui se chevauchent de cette forme de base, qui est le cercle gauche comme celui-ci. Comme vous pouvez le voir, l'opération Soustraire est l'opposé de Union. L' opération suivante est Intersect. Laisse-moi chevaucher ces deux couches comme ça. Je vais cliquer sur « Intersect Selection » et cette opération supprime toutes les zones sauf la section qui se chevauche comme celle-ci. L' opération suivante, qui est la dernière, s'appelle Exclure et c'est le contraire de l'opération Intersect. Si je chevauche ces deux formes comme ceci, et que je clique sur « Exclure la sélection », vous pouvez voir qu'il conserve toutes les zones sauf la section qui se chevauche. Alors avez-vous vu à quel point il est simple d'utiliser des opérations booléennes ? Ils sont si utiles. Ne pensez-vous pas que c'est une bonne idée de créer des icônes avec cette connaissance ? C'est génial. Tout d'abord, je vais créer un autre plan de travail et je vais cliquer sur « A » sur mon clavier. Glisser-déposer pour créer un nouveau cadre comme celui-ci. Supposons que nous voulons créer une icône de recherche. De quoi avons-nous besoin ? Il nous faut un cercle. Je vais en créer un, et je ne vais pas le remplir avec des couleurs. Je vais enlever le remplissage et ajouter un coup, comme ça. Je vais augmenter l'épaisseur de ce coup. Voyons voir, je pense que 15 est génial et je vais créer un rectangle aussi bien avec la largeur de 15. Je vais changer la couleur en noir comme ça. Laisse-moi zoomer un peu. Je vais le déplacer vers le haut. Ensuite, sélectionnons les deux objets et les alignons au centre. Je vais choisir « Sélection syndicale » comme ça. Plutôt bien. Maintenant, je peux le faire pivoter. Impressionnant. Avez-vous vu à quel point il est simple de créer une icône avec ces opérations booléennes ? Plutôt bien. J'espère que ça vous a plu. Maintenant, créons une autre icône. Par exemple, nous allons créer une icône de nuage. Je vais créer un rectangle ici, comme ça. Augmentons le rayon. Plutôt génial. J' ai besoin de créer un cercle aussi bien comme ça. Laisse-moi le chevaucher. Plutôt bien. Ensuite, je vais les sélectionner tous les deux et sélectionner « Sélection syndicale ». On y va, on a notre nuage. Si je change la couleur en noir, vous pouvez voir à quel point c'est incroyable. Vous pouvez également le personnaliser plus tard ou même, par exemple, je peux supprimer le remplissage et je peux ajouter un trait comme celui-ci si vous préférez ces styles. Mais n'oubliez pas que lorsque vous concevez des icônes pour un projet spécifique, vous devez garder l'épaisseur de vos lignes la même pour chaque icône spécifique afin d'être cohérent dans votre conception. Tous les bons gars. Merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 30. Texte: Salut tout le monde et bienvenue à une autre vidéo du cours. Dans cette vidéo, nous allons parler de textes. En tant que concepteurs UI UX, nous utilisons des textes tout le temps et nous avons besoin de connaître tous les secrets derrière l'outil de texte. Donc, afin de créer un texte dans Figma, vous pouvez facilement vous diriger vers la barre d'outils et cliquer sur cette icône de texte. Ou vous pouvez appuyer sur T sur votre clavier comme ceci. Impressionnant, et si vous cliquez une fois, vous allez créer une zone prend couche ou disons un calque de textes de paragraphe. Ok, donc je vais écrire « Bonjour ». Nous sommes des concepteurs UI UX. Assez génial, et comme vous pouvez le voir, ce genre de ligne de texte grandit horizontalement quand vous tapez, ok ? Bien sûr, vous pouvez le changer, cependant. Tout d'abord, laissez-moi vous montrer comment vous pouvez changer la taille de la police. Si vous vous dirigez vers l'Inspecteur de texte sur votre côté droit, vous pouvez changer la police, vous pouvez changer la taille de la police, vous pouvez changer le poids. Nous parlerons de toutes ces propriétés plus tard. Donc tout d'abord, je vais le changer en 36. Plutôt génial. Maintenant, je vais sélectionner le cadre et je vais appuyer sur Maj et sur notre droite. Donc, comme je l'ai mentionné précédemment, il s'agit d'une ligne de texte de zone. Que se passe-t-il si vous voulez le faire pousser verticalement ? Pour ce faire, vous pouvez cliquer sur ces points et ici vous avez beaucoup d'options à changer. Mais ce dont nous avons besoin, ce sont ces redimensionnement, comme vous pouvez le voir, il est défini par défaut pour croître horizontalement. Si vous voulez le faire croître verticalement, vous pouvez le changer pour croître verticalement ici, et si je continue à taper à partir de maintenant, il pousse verticalement. Je vais écrire, « Merci pour votre soutien », comme ça. Vous pouvez également créer une ligne de texte de taille fixe. Ou tu pourrais le changer ici comme ça. Mais que se passe-t-il si vous voulez créer vous-même une ligne de texte de taille fixe ? C'est si simple. abord, vous allez choisir l'outil de texte, puis vous allez cliquer et faire glisser comme ceci, et de cette façon vous spécifiez la dimension de votre zone de texte comme celle-ci, ok ? Si j'écris quelque chose ici, comme « Nous parlons textes et comparons différentes options. » Comme ceci, et si vous voulez modifier la cote de ces marques de texte, vous pouvez facilement passer le curseur au-dessus de ces encadrés bleus et votre curseur change immédiatement à l'icône d'échelle, ok, et je peux le modifier comme ceci. Plutôt bien, n'est-ce pas ? Laisse-moi changer le chemin de la normale, d'accord ? Parfois, il peut être utile de convertir une ligne de texte en vecteur. Alors, comment peux-tu faire ça ? Si je fais un clic droit ici, je peux aller de l'avant et cliquer sur aplatir, et voilà. Maintenant, notre texte est un vecteur, comme vous pouvez le voir là-bas, et vous pouvez modifier chaque lettre séparément. Je vais zoomer et double-cliquer sur ces H. On y va. Supposons que je vais changer quelque chose ici. Par exemple, sélectionnons ces nœuds et je vais augmenter le rayon de coin comme celui-ci, et aussi pour celui-ci. C' est pas cool ? Donc, convertir votre ligne de texte en un vecteur comme utile, surtout si vous concevez un logo ou un mot-symbole, etc, d'accord. Supposons que je vais créer une autre ligne de texte comme celle-ci. Écrivons H, puis je vais le dupliquer encore et encore une fois, et nous allons écrire e et ici l et là, et nous allons dupliquer ça et o, ok. Permettez-moi de les déplacer un peu, donc comme je l'ai déjà mentionné, afin de faire de vos prises un vecteur, vous devez aplatir votre texte dessus. Mais que se passe-t-il si vous voulez garder vos couches telles qu'elles sont ? Par exemple, ici, j'ai cinq couches différentes et je vais le rendre vecteur. Dans ce cas, vous pouvez cliquer avec le bouton droit de la souris et, au lieu d'aplatir, vous pouvez choisir Contour de contour. Maintenant, vous avez toutes les lettres comme vecteur. C' est génial, n'est-ce pas ? Les gars, c'est tout pour cette vidéo. Merci beaucoup de l'avoir regardé, et je vous verrai dans la prochaine vidéo. 31. Inspecteur de texte: Salut, tout le monde. J' espère que vous allez bien et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons parler de l'inspecteur de texte, comment vous pouvez personnaliser votre texte. Sans plus tarder, commençons par sélectionner ces textes. Dans l'Inspecteur de texte, nous avons différentes options. Comme je l'ai déjà mentionné, certains d'entre eux, je vais les revoir. La première option est la police que vous pouvez facilement accéder à vos polices locales ou aux polices Figma. Vous pouvez facilement changer vos polices et maintenant je vais le remettre à Montserrat. L' option suivante est le poids de votre police. Vous pouvez le modifier en fin, léger, régulier, gras et noir. Cependant, gardez à l'esprit, que ces options peuvent être différentes pour différentes polices. Je vais le mettre sur normal. La propriété suivante est la taille de la police. Comme vous pouvez le voir, vous pouvez changer la taille de votre police facilement. Je vais le changer en 68. Vous pouvez également faire des opérations mathématiques ici. Je vais le diviser par deux, plutôt génial. Ensuite, nous avons la hauteur de ligne, ce qui est si important lorsque vous concevez une interface utilisateur en termes de visibilité de vos lignes dans différentes tailles d'écran. Comme vous pouvez le voir, il a été défini sur auto. Figma calcule la hauteur de la ligne par pourcentage. Il est basé sur la taille de votre police. Si vous voulez déclarer votre propre hauteur de ligne en pixel, vous pouvez facilement écrire, par exemple, 80 pixels. Maintenant, cette valeur est basée sur les pixels et non plus sur le pourcentage. La propriété suivante est l'espacement des lettres, qui détermine l'espacement entre vos lettres. Ensuite, nous avons l'espacement des paragraphes. Nous ne pouvons pas voir les changements ici parce que nous n'avons créé qu'un seul paragraphe. Je vais donc rendre cette taille de police un peu plus petite. Mettons-le à 24. Je vais changer la hauteur de la ligne en auto. Ajoutons un paragraphe de plus. Je vais écrire, nous parlons de propriétés. Maintenant, si vous modifiez l'espacement des paragraphes, vous pouvez voir qu'il change immédiatement. Ensuite, nous avons l'indentation du paragraphe. Si j'augmente cela, vous pouvez voir que vous pouvez spécifier ce montant et il ajoutera un peu d'espace avant le premier mot de chaque paragraphe. Je vais annuler ça. Plutôt bien. Ici, nous avons les alignements horizontaux. Nous avons le texte aligné à gauche, le texte s'aligner au centre et le texte s'aligner pour écrire. Après cela, nous avons l'alignement vertical. Comme vous pouvez le voir, je peux le changer aussi. Cependant, gardez à l'esprit que cette option n'est applicable qu'à un calque de texte de taille fixe. Comme vous pouvez le voir, nous pouvons appliquer ces modifications car nous utilisons une couche de texte de taille fixe. Mais si je crée un autre texte ici, bonjour, je le teste. Maintenant, si je change l'alignement vertical, rien ne se passe. Vous avez également quelques propriétés avancées auxquelles vous pouvez accéder en cliquant sur ces trois points. Ici, vous avez la section précédente que vous pouvez prévisualiser chaque opération chaque fois que vous passez votre souris au-dessus de ces options. Le premier est le redimensionnement, et je vous ai expliqué dans la vidéo précédente, vous avez trois options différentes : grandir horizontalement, croître verticalement, et calque de texte de taille fixe. Ensuite, vous avez un alignement comme celui-ci. Après cela, vous avez de la décoration. Comme vous pouvez le voir, il est réglé sur zéro, donc nous n'avons pas de décoration. Cependant, vous pouvez choisir le soulignement ou le barrage comme celui-ci. Après cela, nous avons la boîte aux lettres. Vous pouvez spécifier le type de casse que vous souhaitez utiliser. Par exemple, celui-ci est en majuscules, nous avons des minuscules. Si je choisis des majuscules, toutes mes lettres deviennent majuscules. Si je choisis la minuscule, comme vous pouvez le voir, les modifications s'appliquent immédiatement. Ensuite, nous avons cas de titre, nous avons des petites capitalisations et des petites capitalisations forcées. Plutôt génial. Nous avons également des formulaires sensibles à la casse. Toutefois, il ne s'applique pas à ces textes sélectionnés. On va le laisser pour l'instant. Ensuite, nous avons des chiffres. Nous ne pouvons pas voir les modifications ici car nous n'utilisons aucun numéro dans notre texte, mais vous pouvez les prévisualiser ici. Vous pouvez même choisir la fraction. C' est totalement une question de chiffres. Ceux-ci sont tellement avancés, et la plupart du temps, nous ne les utilisons pas dans notre processus de conception. D' accord, les gars. C'est tout pour cette vidéo. Merci beaucoup de l'avoir regardé, et je vous verrai dans la prochaine vidéo. 32. Style texte: Bonjour, tout le monde. J'espère que vous allez bien et bienvenue à une autre vidéo des partitions. Dans cette vidéo, nous allons parler des styles de texte. En fait, les styles vous permettent de spécifier un ensemble de propriétés afin de les réutiliser dans vos projets et vous pouvez également les partager avec votre équipe. Dans cette vidéo, nous allons plonger dans les styles de texte et je vais vous montrer à quel point il est important de créer votre style de texte lorsque vous concevez une interface utilisateur. Supposons que vous concevez un projet très compliqué qui se compose de 50 écrans ou plus. Dans ce cas, vous utilisez une police spécifique et après un certain temps, vous décidez soudainement de changer, par exemple, la police de votre en-tête ou même la taille de la police ou le poids, alors ne serait-il pas agréable que vous puissiez apporter ces modifications une fois et les modifications s'appliqueraient à toutes vos balises en même temps ? C' est fantastique. C' est ce que le style de texte fait. Maintenant, sans plus tarder, commençons par insérer un nouveau texte. Je vais ajouter, par exemple, l'en-tête 1, et je vais le rendre en gras. En fait, lorsque vous concevez un site Web, nous avons six types d'en-têtes différents, de H1-H6, en HTML. Vous n'avez pas besoin de connaître tous les détails à ce sujet, cependant, il est bon de se familiariser avec certains termes et certaines règles de HTML ou CSS. Maintenant, c'est notre en-tête 1 et je vais définir la taille à 80 comme ça et puis je vais créer mon premier style de texte. Comment puis-je faire ça ? C' est si facile. Tu vois ces quatre points ? Je vais cliquer dessus et ici il y a une icône plus qui me permet créer un nouveau style de texte et je vais écrire H1, puis dupliquons. C' est vrai, H2 ici et ici comme vous pouvez le voir, il utilise le style de texte précédent que nous venons de définir pour l'en-tête 1. Tout d'abord, nous devons le détacher de son style, et puis je vais le mettre à 60, assez bon et je vais créer un autre style de texte et appelons-le H2, nous allons dupliquer que, une fois de plus, détachez-le de son , et mettons-le à 30. Je vais écrire l'en-tête 3, nous allons créer un nouveau style de texte aussi, H3 et c'est tout. Maintenant, comment pouvons-nous appliquer nos styles de texte à nos calques de texte ? Laissez-moi créer un nouveau texte. Je vais écrire des promotions, et comme vous pouvez le voir, il utilise automatiquement H3. Vous pouvez facilement changer cela en cliquant sur ce menu, et je vais le définir sur H2, nous y allons. Si j'accède à mon style de texte ici, En-tête 2, et que j'apporte quelques modifications, ces modifications s'appliqueront également à ces balises de promotion. Essayons, passons à H2 et ici vous avez le style Edit, je vais cliquer dessus et par exemple, je vais le rendre régulier, voilà. Avez-vous vu à quel point c'est incroyable d'utiliser des styles de texte ? Vous pouvez également changer la taille de la police, par exemple, je vais la définir sur 40, et c'est fait. Cependant, gardez à l'esprit que si vous modifiez la couleur du texte, cela ne s'applique pas à l'incidence de ce style de texte, donc si je, par exemple, changez la couleur de cet en-tête 2, par exemple, à cette couleur, comme vous pouvez voir, rien ne se passe. Parce que pour cela, nous devons créer un style de couleur que nous allons couvrir dans les leçons du futur. Maintenant, laissez-moi dupliquer ces promotions et ensuite nous pouvons essayer H3 aussi. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 33. Les contraintes et les mises en page adaptatives: Salut tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons parler de contraintes et de mises en page réactives. Quelles sont les contraintes et pourquoi devons-nous rendre notre design réactif ? Supposons que vous concevez une page Web ou un écran d'application et que vous utilisez, par exemple, ce tableau d'art, MacBook Pro, alors que se passe-t-il lorsque votre utilisateur utilise le mode portrait comme celui-ci ? Si vous ne rendiez pas votre design réactif, tout serait désorganisé. Dans cette vidéo, nous allons parler des contraintes et de la façon dont vous pourriez rendre vos pages réactives. Tout d'abord, je vais concevoir une page de destination simple ici. Allons de l'avant et ajoutons un rectangle ici comme ça, et je vais changer la couleur en bleu foncé. Plutôt génial. Ensuite, je vais ajouter un texte ici. Ecrivons bienvenue dans le monde de la conception UI/UX. Permettez-moi de changer la couleur en blanc pour l'instant et je vais changer la police en texte SF Pro. Je vais le rendre un peu plus grand. Mettons-le à 64. Je pense qu'il est préférable d'en faire un calque de texte de taille fixe comme ceci. Alors laissez-moi l'aligner au centre et aussi ici, assez bien. Alors de quoi d'autre avons-nous besoin ? Je vais ajouter des liens ou des menus en haut. Écrivons à la maison. Je vais le rendre blanc aussi. Rallons-le plus petit. Je pense que 24 points est génial, dupliquez cela, puis écrivons la tarification. Encore une fois, dupliquez cela et ici, les services. Encore une fois, je vais dupliquer ça et maintenant nous contacter, plutôt bien. C' est tout. Tout d'abord, changeons l'espacement entre eux. Je vais choisir ce menu dans l'inspecteur, et je vais cliquer sur « Distribuer l'espacement horizontal » comme ceci. De cette façon, l'espacement entre mes liens ou mes menus sera égal. Si vous souhaitez vérifier l'espacement entre vos objets, vous pouvez facilement sélectionner un texte ou un objet puis maintenir la touche Option ou Alt enfoncée sur votre clavier, et vous pouvez placer votre souris au-dessus du texte ou de la forme à côté de votre forme précédente. Comme vous pouvez le voir, il a été défini sur 25. Je vais en faire 24, comme ça, assez génial. Maintenant, faisons ce texte en gras. Je vais choisir audacieux. Maintenant, c'est mieux. Maintenant, je vais le rendre un peu plus grand. Bien. Regroupez nos menus en haut, Command G ou Control G. Je vais écrire des menus, génial. Je l'ai aligné verticalement aussi, et c'est tout pour l'instant. Maintenant, comme vous pouvez le voir, nous avons conçu cette page pour MacBook Pro avec cette dimension, 1440 par 900, et elle a été conçue pour le mode paysage. Si je le change en portrait, vous pouvez voir que tout sera désorganisé. Nous devons rendre notre page réactive. Pour ce faire, sélectionnons d'abord ces textes. Comme vous pouvez le voir dans l'inspecteur, vous avez quelque chose appelé Contraintes. On va l'utiliser. Comme vous pouvez le voir, les contraintes sont définies en haut et à gauche. Mais nous allons le changer parce que nous devons garder ces textes au centre de notre écran. Je vais le changer en centre. Gardions ça au sommet parce que nous devons garder cette distance jusqu'au sommet la même. Maintenant, si je choisis mon cadre et que je le change en mode portrait, nous pouvons voir qu'il change automatiquement sa position, et maintenant tout est génial. La prochaine chose que nous devons faire est de définir une contrainte pour nos menus. Revenons en mode paysage, et maintenant je vais sélectionner les menus. Comme vous pouvez le voir, les contraintes sont définies à gauche et en haut, cependant, elles doivent être définies au centre et au sommet. Je vais le changer au centre. Maintenant, si je change mon cadre en mode portrait, vous pouvez voir qu'il va changer de manière réactive comme ceci. C' est plutôt cool, n'est-ce pas ? Cependant, que se passe-t-il si je agrandis mon écran comme ça ? Vous pouvez voir que mon expérience n'est pas réactive. Maintenant, s'il vous plaît mettre la vidéo en pause et essayer de résoudre ce problème par vous-même. Alors je vais vous montrer comment vous pouvez faire ça. Les gars, je suis sûr que vous pourriez réparer ça par vous-même. Cependant, maintenant, je vais vous le montrer aussi au cas où vous auriez du mal à faire ça. Afin de rendre votre arrière-plan aussi réactif, nous allons d' abord choisir ce rectangle, qui est notre arrière-plan. Comme vous pouvez le voir, les contraintes sont définies sur les bords gauche et supérieur. La seule chose que nous devons changer, c'est celle-ci. Si on pouvait le changer à gauche et à droite, tout serait génial. Essayons maintenant. Maintenant, je vais rendre mon cadre encore plus grand. Comme vous pouvez le voir, nous avons un fond extensible comme celui-ci. C' était facile. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 34. Mise en page automatique: Bonjour tout le monde. J'espère que tu vas bien. Dans cette vidéo, nous allons parler de la nouvelle fonctionnalité de Figma, qui s'appelle Auto Layout. La fonctionnalité Auto Layout a été ajoutée récemment à Figma, et c'est une fonctionnalité super puissante et je vais vous montrer comment vous pouvez l'utiliser pour accélérer votre processus de conception et vous rendre la vie beaucoup plus facile. Sans plus tarder, commençons. Tout d'abord, je vais aller de l'avant et créer un bouton. Pour ce faire, je vais avoir besoin d'un rectangle. Créons un. On y va. Je vais régler la largeur à 300 et la hauteur à 70. Joli. Ensuite, augmentons le rayon de coin à 16. Comme vous pouvez le voir maintenant, ces petits cercles n'apparaissent pas ici parce que je suis loin de ce bouton. Cependant, si je zoom un peu, ces cercles apparaîtraient. Maintenant, changeons la couleur en violet clair, comme ceci. Joli. Alors nous avons besoin d'un texte évidemment. Je vais écrire la connexion et changer la couleur en blanc et je vais augmenter la taille de la police à 24. Sélectionnons les deux calques et les alignons à la fois horizontalement et verticalement. Plutôt bien. Je vais le rendre un peu plus petit. Maintenant, c'est mieux. Regroupez-les et appelons-le Login. Tout va bien maintenant. Mais supposons que vous créez ce bouton, vous décidez de dupliquer cela et de changer le texte à autre chose. Par exemple, vous voulez le changer pour Commencer. Tu vois quel est le problème ici ? Nos boutons ne sont pas réactifs, et auparavant, nous devions personnaliser nos boutons séparément comme ceci. Nous devions les redimensionner manuellement, et encore une fois, nous devions les aligner comme ceci. Cependant, maintenant, avec l'aide de Auto Layout, tout sera fait en une seconde. Laissez-moi vous montrer comment vous pouvez faire ça. Tout d'abord, je vais dupliquer ces boutons de connexion une fois de plus. On y va. Comme vous pouvez le voir dans l'Inspecteur, une nouvelle section a été ajoutée, appelée Mise en page automatique. Vous pouvez soit cliquer sur ce bouton plus pour ajouter la mise en page automatique à votre bouton, soit vous pouvez maintenir Maj et A, et c'est tout. Vous pouvez également cliquer avec le bouton droit de la souris et choisir Ajouter une mise en page automatique. Tous fonctionneront de la même manière. Comme vous pouvez le voir, rien n'a été changé ici. Mais si vous essayez de changer ce texte pour, par exemple, Get Started, vous pouvez voir que quelle est la différence ici ? Maintenant, notre bouton est réactif. C' est super cool, et vous pouvez également personnaliser le rembourrage horizontal, le rembourrage vertical et un espacement entre les articles. Cependant, comme nous n'avons qu'un seul élément ici, nous ne pouvons pas utiliser la section. Vous pouvez changer le mode de l'horizontale à la verticale, mais vous ne pouvez pas voir la différence ici. Toutefois, si vous essayez de créer une liste, vous pouvez utiliser la fonction verticale. Nous avons aussi différentes options pour la hauteur. Comme vous pouvez le voir ici, nous avons la hauteur automatique. Si j'essaie d'ajouter des lignes comme celle-ci, la taille de la hauteur augmentera automatiquement, mais si j'essaie de la changer en hauteur fixe et que j'ajoute des lignes, vous pouvez voir qu'elle n'est plus réactive. Vous pouvez facilement personnaliser les options que vous avez. Ici, c'est le rembourrage horizontal. Vous pouvez le changer facilement comme ça. Si vous êtes familier avec CSS, cela fonctionne exactement de la même manière, et aussi le rembourrage vertical, c'est assez génial. Essayons autre chose. Créons un autre rectangle ici et je vais le mettre à 450 par 80. Joli. Augmentez le rayon d'angle à 24 et changez la couleur à ce violet clair. Supposons que c'est notre barre d'onglets, et nous allons ajouter des icônes ou simplement des formes simples. Je vais créer un rectangle comme ça, et ça va être 45 par 45. Changeons sa couleur en blanc. Je vais zoomer un peu, puis je vais créer une autre forme, comme un cercle et je vais la mettre à 45 par 45. Changeons la couleur en blanc. Enfin, je vais dupliquer le carré et augmenter le rayon de coin comme ça, et je vais le faire pivoter de 45 degrés. Ensuite, sélectionnons toutes nos formes et cliquez sur distribuer l' espacement horizontal pour obtenir le même espacement entre nos formes. Je vais le mettre à 91. Ensuite, nous allons les regrouper et sélectionner notre barre d'onglets et l'aligner au centre, fois horizontalement et verticalement. Cependant, vous devez vous rappeler, parce que nous allons rendre ces formes réactives, nous devons les dissocier après l'alignement. Je vais cliquer avec le bouton droit ici, les dissocier, et sélectionner la barre d'onglets, qui est notre arrière-plan ici, comme ceci, et encore une fois, les regrouper et je vais l'appeler barre d'onglets. Ensuite, appuyez sur Maj A pour ajouter Auto Layout à ce groupe, et tout est fait. Comment pouvons-nous le vérifier ? Le moyen le plus simple est d'essayer d'enlever l'une de ces formes. Je vais supprimer le cercle, et voilà, notre barre d'onglets est réactive maintenant. Vous pouvez même ajouter plus d'objets et la taille change automatiquement. Je vais le dupliquer, et comme vous pouvez le voir, ça marche parfaitement. C' est plutôt génial. Vous pouvez aussi changer leur place facilement comme ça. C' est fantastique. Nous allons maintenant créer un groupe de mise en page d'ordre plus complexe. Que pensez-vous que si nous pouvions créer une carte réactive, ce serait bien. Allons de l'avant et créons un nouveau rectangle ici et je vais augmenter le rayon à 40. Changeons les dimensions à 300 par 400. Joli. Je vais changer la couleur en blanc et y ajouter un trait avec le même violet clair que nous avons ici. Ensuite, je vais y ajouter quelques détails. Supposons que nous allons avoir une image de profil, nous avons besoin d'un cercle ici. Mettons-le à 70 par 70 et je vais changer la couleur pour ce violet. Plutôt bien. Comme vous pouvez le voir, le rembourrage supérieur est réglé sur 30. Réglons également le rembourrage gauche à 30. Ensuite, je vais ajouter quelques textes. J' ai besoin d'un nom. Rallons-le plus petit. Je pense que 18 points seraient bien. Je vais changer la couleur pour ce violet aussi. Dupliquez cela, et ici je vais écrire le nom de famille, assez bon, et le rembourrage gauche va être de 16 pixels comme ça. Ensuite, je vais ajouter un autre texte, qui est la description, par exemple, c'est vrai, Bonjour tout le monde. Dans cette vidéo, nous parlons de Auto Layout dans Figma. Je pense qu'il est préférable d'en faire un calque de texte de taille fixe comme ceci. Je vais changer la hauteur automatique à 24. Plutôt génial. Rendons cette carte un peu plus petite pour l'instant, le rembourrage supérieur va être de 30, donc nous devons avoir 30 en haut pour ce texte et 30 en bas. Comme vous pouvez le voir, j'ai 27 et j'ai besoin d'ajouter trois autres pour que je puisse aller à la hauteur, et ici je vais écrire plus trois. On y va. Rendons un peu plus grand. Fantastique. Maintenant, comment pouvons-nous rendre cette carte réactive ? Nous devons utiliser une autre technique ici, parce que si nous les regroupons, laissez-moi vous montrer et appuyez sur Maj et A, ça ne marchera pas et tout va être désorganisé. Nous devons utiliser un autre moyen. Dans ce cas, nous devons avoir deux groupes différents avec Auto Layout. abord, nous devons créer une mise en page automatique horizontale pour cet espace réservé d'image de profil et ces deux balises. Je vais les sélectionner et les regrouper. Appelons-le Utilisateur, et maintenant comme vous pouvez le voir, nous avons ici deux objets qui sont placés verticalement. Si je sélectionne mon rectangle et aussi cet utilisateur et ce texte et les regrouper et l'appeler carte, maintenant je peux ajouter Auto Layout parfaitement, donc je vais appuyer sur Maj et A. Comme vous pouvez le voir, je viens de créer un auto vertical mise en page. Mais nous devons également créer une mise en page automatique horizontale pour notre utilisateur. Nous devons maintenant regrouper ce nom et ce prénom afin d'utiliser une mise en page automatique horizontale pour ces deux objets. Maintenant, je vais choisir le groupe d'utilisateurs et appuyer sur Maj et A, et comme vous pouvez le voir, nous venons de créer une mise en page automatique horizontale. Ensuite, je vais sélectionner ma carte principale et appuyer à nouveau sur Maj et A, et comme vous pouvez le voir, je viens de créer une mise en page automatique verticale. Je vais l'ouvrir et je vais définir l'alignement de l' utilisateur sur la gauche et tout est fait. Essayons. Je vais étendre un peu ce texte pour voir ce qui va se passer. Voyons si cela fonctionne ou non et oui, comme vous pouvez le voir, cela fonctionne parfaitement. Écrivons, oui, ça fonctionne parfaitement. C' est plutôt cool. Si vous essayez simplement d'ajouter des lignes, vous pouvez voir qu'il augmente automatiquement la taille de la hauteur. Mais qu'en est-il de ces groupes de mise en page automatique ? Si j'essaie de changer le nom pour autre chose, comme Mike et le nom de famille pour White. Comme vous pouvez le voir, rien ne se passe parce que ce n'est pas si long, donc je vais ajouter quelques caractères aléatoires ici. Comme vous pouvez le voir, ça marche. Cependant, mon texte de description se déplace le long. J' ai besoin de résoudre ce problème. Pour corriger cela, je vais le sélectionner et comme vous pouvez le voir, il a été aligné au centre. Je vais l'aligner à gauche, et maintenant tout va bien. Essayons quelque chose ici. Je vais le copier et le coller. On y va. Ça fonctionne parfaitement. D'accord, les gars. Merci beaucoup d'avoir regardé cette vidéo. Je vous ai apprécié et je vous verrai dans la prochaine vidéo. 35. Images: Bonjour à tous, et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons parler d'images. En tant que concepteur UI UX, vous travaillez avec des images tout le temps. Il est si important de savoir comment utiliser des fonctionnalités uniques, Figma, afin d'utiliser correctement vos images. Sans plus tarder, commençons. Comme vous pouvez le voir, j'ai créé un projet simple ici avec seulement cinq cercles et trois carrés. Nous allons ajouter des images à ces cercles et aussi à ces cartes. Il y a beaucoup de façons de le faire. La première consiste à simplement glisser et déposer vos images, puis vous utiliserez l'option Masque, que nous couvrirons dans les futures leçons. Cependant, il existe de meilleures façons de le faire. abord, assurez-vous de télécharger le fichier Assets que j'ai déjà préparé pour vous, et il se compose de quelques images pour ces cartes et quelques images pour ces cercles. La première façon est d'aller à Shapes, et ici nous avons Place Image. Si vous avez téléchargé le fichier Assets, vous pouvez voir que vous avez deux dossiers différents, Profil et Cartes. Dans le dossier Profil, vous pouvez voir cinq images différentes. Je vais les sélectionner tous et cliquer sur « Ouvrir », plutôt bon. En haut, vous avez deux options : Placer tout, Jeter tout. Si vous cliquez sur « Tout placer », toutes vos images seront placées en même temps, comme ceci. Comme vous pouvez le voir, vous avez toutes vos images. Encore une fois, vous devez aller de l'avant et utiliser des masques afin de le mettre sur ces cercles. Encore une fois, je vais ouvrir ces images. Si vous cliquez sur « Ignorer tout » ici, rien ne se passe, vous devez sélectionner une fois de plus. Comme vous pouvez le voir, il y a un badge rouge dans le coin supérieur gauche de vos images, qui indique le nombre d'images que vous avez laissées, par exemple, ici nous en avons cinq. Si je clique ici, vous pouvez voir que ma première image sera insérée dans la toile, et maintenant j'en ai quatre. Je peux aller de l'avant et les insérer tous. Laissez-moi les sélectionner une fois de plus. De la manière précédente, vous pourriez placer vos images avec leurs propres dimensions. Cependant, si vous voulez changer la cote, vous pouvez facilement glisser-déposer comme ça, nous y allons. Vous pouvez définir la cote comme vous le souhaitez. La dernière fois que nous allons placer ces images dans nos cercles, et c'est si facile de le faire. Si vous pointez votre souris au-dessus de ces cercles et cliquez, vous pouvez voir qu'il est si facile d'insérer votre image dans ces cercles comme celui-ci et c'est tout. La prochaine façon d'insérer une image dans Figma est d'utiliser la section de remplissage. Je vais maintenir la touche Commande et je vais sélectionner ces cartes et ici en plein, si j'ouvre ce menu déroulant, vous pouvez voir que vous avez l'option Image et vous pouvez choisir votre image comme ceci. Vous pouvez également modifier l'exposition de votre image, le contraste, la saturation, la température, les reflets thématiques et les ombres ici. Vous pouvez même le faire pivoter si vous le souhaitez. Maintenant, nous allons ajouter des images à nos cartes. Allons de l'avant et choisissez Placer l'image. Ici, je vais ouvrir les cartes, et comme vous pouvez le voir, il y a trois images différentes ici, je vais les sélectionner toutes, cliquez sur « Ouvrir ». Tu dois te souvenir de quelque chose. Si votre image est si grande, Figma la redimensionnera automatiquement avant de pouvoir l'insérer dans Figma, donc vous devez être conscient de ce problème aussi, comme ceci et c'est fait. Avez-vous vu à quel point il est facile d'utiliser des images dans Figma ? Vous pouvez également éditer ces cartes facilement comme ça, nous y allons. Tout est réactif, c'est plutôt cool, n'est-ce pas ? La bonne nouvelle est que, contrairement à d'autres logiciels et plates-formes, dans Figma, vous pouvez également insérer un fichier GIF. Essayons ça. Maintenant, si je prévisualise ce plan de travail en cliquant sur ce bouton « Lire », vous pouvez voir que ces images sont statiques. Que se passe-t-il si j'ajoute un fichier GIF à l'une de ces cartes ? Par exemple, celui-ci, je vais aller de l'avant et placer une image à partir du dossier GIF, là nous allons. Maintenant, comme vous pouvez le voir, c'est comme d'autres images normales, cependant, si j'essaie de prévisualiser cela, vous pouvez voir que c'est en fait différent des autres images, parce que c'est un fichier GIF et il joue dans Figma, ce qui est assez génial. D' accord, les gars. Merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 36. Styling : remplissage: Salut tout le monde. J'espère que tu vas bien. Dans cette vidéo, nous allons parler de la section sur le terrain. Sans plus tarder, commençons par insérer une nouvelle forme ici. Je vais créer un rectangle. Augmentons le rayon de coin comme celui-ci, et sur votre droite, dans la section inspecteur, vous pouvez voir la section de champ. Ici, vous pouvez choisir la couleur souhaitée pour votre objet ou même votre calque de texte, comme ceci. Par exemple, maintenant, nous choisissons le rouge. Cette couleur rouge a une valeur, la luminosité de chaque couleur est appelée sa valeur. Comme vous pouvez le voir, si nous ajoutons du blanc à cette couleur, elle devient plus claire et si nous ajoutons du noir à cette couleur, elle devient de plus en plus foncée. Vous pouvez également utiliser la pipette pour choisir votre couleur comme celle-ci, et vous pouvez également choisir votre couleur avec le code Hex ici. Vous pouvez le définir sur RGB, CSS, HSL et HSB. Mais la plupart du temps, nous utilisons du code Hex. Parfois, nous devons changer l'opacité de chaque couleur, dans ce cas, vous pouvez utiliser le curseur comme ceci, et comme vous pouvez le voir maintenant, il devient transparent, ou vous pouvez utiliser ce pourcentage ici, comme 20 pour cent, assez bon. En bas, vous pouvez voir les couleurs de vos documents. Comme vous pouvez le voir, nous n'avons pas de couleurs de document parce que nous n'en avons pas encore créé. Cependant, dans les leçons à venir, nous en parlerons. haut à gauche, vous pouvez voir un menu déroulant. Si je l'ouvre, vous pouvez voir que vous avez beaucoup d'options. Le premier est solide, et comme vous pouvez le voir, vous ne pouvez choisir qu'une seule couleur et une seule couleur de base. Si vous voulez utiliser un dégradé, vous pouvez choisir linéaire comme celui-ci. Par exemple, je peux choisir la deuxième couleur ici. Cependant, il est réglé sur transparent, je peux augmenter l'opacité à 100 pour cent, et avec ces contrôleurs, vous pouvez changer la direction de votre dégradé comme ceci. Vous pouvez même ajouter plus de couleurs à vos dégradés. Si vous cliquez ici, comme ça, je peux choisir cette couleur aussi, assez génial. L' autre option que vous avez est le dégradé radial. Vous avez aussi angulaire comme ça. Ensuite, nous avons un diamant comme ça, et une image dont j'ai déjà parlé. Cependant, les deux options les plus importantes sont solides et linéaires. Vous pouvez également modifier l'opacité de votre couleur ou dégradé ici, comme ceci. Vous pouvez le cacher si vous le souhaitez ou le supprimer. Ici, vous pouvez changer votre mode de couleur de la normale à la saturation des couleurs, la teinte, la différence. Nous parlerons de ces options plus tard. Cependant, si vous voulez voir ce qui va se passer si nous le changeons, avons besoin d'un autre objet. Je vais créer un nouveau rectangle comme celui-ci, et définissons sa couleur à quelque chose comme ce bleu, et je vais changer le mode couleur en couleur, comme ceci. Vous pouvez voir la différence ici. Je peux le configurer pour superposer comme ça, écran, etc Ok, les gars, c'est tout pour cette vidéo. Merci beaucoup de l'avoir regardé. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 37. Styling : trait: Salut, tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons parler de la section AVC. Tout d'abord, permettez-moi de créer une nouvelle forme. Cette fois, je vais choisir un cercle comme celui-ci, et juste sous la section de remplissage dont nous avons parlé dans la vidéo précédente, nous avons la section de course. Je vais cliquer sur ce bouton plus afin d'ajouter le trait à ma forme. Ici, nous avons différentes propriétés telles que la couleur. Encore une fois, vous avez toutes ces options. Comme dans le remplissage, vous avez l'épaisseur de votre trait que vous pouvez changer ici, et vous avez la propriété de positionnement ici aussi que vous pouvez changer de l'intérieur vers le centre et vers l'extérieur. Fondamentalement, cela signifie que ce trait s'applique à l'extérieur de votre forme. Celui-ci, cela signifie que ce trait s'applique à l'intérieur de votre forme. Ici, vous avez l'option avancée, et nous en avons déjà parlé. Vous avez Rond, Carré, Flèche Ligne et Flèche Triangle. Cependant, cela ne fonctionne pas ici parce que nous avons besoin d' une ligne ou d'un chemin pour utiliser ces options. Vous pouvez aussi le faire tiret. Par exemple, je peux écrire deux virgule cinq comme ceci, ou disons 10. Je peux facilement le changer ici, 40 ans. C'est plutôt cool. Bien sûr, vous pouvez le cacher ou le supprimer. Très bien, les gars, merci beaucoup d'avoir regardé cette vidéo et je vous verrai dans la prochaine vidéo. 38. Styler : Effets: Salut tout le monde et bienvenue à une autre vidéo des partitions. Dans cette vidéo, nous allons parler de la section effets. En fait, nous utilisons la section Effets tant fois lorsque nous concevons une interface utilisateur, par exemple, il y a des moments où vous voulez ajouter des ombres à votre objet ou même à votre texte, ou probablement vous voulez ajouter un flou à votre objet ou à votre arrière-plan. Dans ces cas, nous pouvons utiliser la section Effets. Sans plus tarder, commençons. Comme vous pouvez le voir ici, j'ai créé un carré simple et je change sa couleur à ces code de couleur hexadécimal, 0038FF. Maintenant, je vais y ajouter une ombre portée. Allons à la section Effet, et je vais cliquer sur ce bouton plus, et ici vous avez un menu déroulant. Vous avez une ombre intérieure, et comme vous pouvez le voir, cette option ajoutera quelques ombres à l'intérieur de votre objet. Si vous voulez modifier votre ombre, vous pouvez cliquer sur cette icône de soleil, et ici vous avez les options avancées. Vous avez le flou. Maintenant, il est réglé à quatre. Je vais le changer à 100, et comme vous pouvez le voir, les changements s'appliquent immédiatement. Vous pouvez également modifier l'axe des x. Mettons-le à 20, et celui-ci à 10. Bien sûr, vous ne pouvez pas voir les changements ici parce que c'est en fait à l'intérieur de notre objet. Cependant, nous allons également essayer ces options pour les ombres portées. L' option suivante que vous avez est la couleur de votre ombre. Vous pouvez facilement le changer pour n'importe quelle couleur, et l'opacité est définie sur 25 % par défaut. Si vous voulez le changer, vous pouvez bien sûr l'augmenter ou le diminuer comme ceci. Vous avez également les menus de mode ici. Plutôt génial. Changons le type d'ombre en ombre portée. La plupart du temps, nous utilisons l'ombre portée lorsque nous concevons une interface utilisateur. Maintenant, allons changer cette couleur en noir, et je vais la mettre à 25%. Plutôt génial. Ensuite, changeons le flou à 40 et le x à zéro et le y à 20. Si vous voulez obtenir une très bonne ombre portée, vous pouvez calculer vos chiffres comme moi. Par exemple, si vous définissez le flou sur 40, vous pouvez le diviser par deux et définir ce nombre comme la quantité y comme ici. Alors je vais changer l'opacité à 20 pour cent comme ça. Plutôt sympa, n'est-ce pas ? Comme vous pouvez le voir, il semble assez bon, cependant, je vais vous suggérer quelque chose. Afin de rendre votre ombre plus réaliste, il est conseillé de choisir la même couleur pour votre ombre que celle de vos objets, puis de réduire l'opacité à, par exemple, 15 % ou même 10 %. C' est totalement à vous de décider, cependant, c'est plus logique parce que les objets colorés n'ont pas d'ombres noires. Si je duplique ce carré, et que je change cette couleur pour, par exemple, quelque chose comme ça, je peux changer l'ombre à la même couleur et la diminuer à 10 pour cent ou 15 pour cent comme ceci. Pouvez-vous voir la légère différence ici ? Cela le rend plus réaliste. Maintenant, allons de l'avant et parlons d'autres options aussi. Comme vous pouvez le voir ici, vous avez un flou de couche et un flou d'arrière-plan. Si je choisis le flou du calque, comme vous pouvez le voir, il brouille le calque sélectionné, et je peux changer la quantité ici comme ceci. Plutôt génial. Je vais le mettre à 10 et vous avez le flou d'arrière-plan aussi. Mais comme vous pouvez le voir quand je choisis ça, rien ne se passe parce que je n'ai rien derrière cette forme. Si je veux voir l'effet du calque d'arrière-plan, j'ai besoin d'avoir quelque chose derrière lui. Allons de l'avant et choisissons ce carré, et je vais y placer une image. Choisissons celui-là. Plutôt bien. Alors je vais mettre ce carré au-dessus de mon image comme ça. Ici, comme vous pouvez le voir, le flou d'arrière-plan est sélectionné, mais vous ne pouvez rien voir. Parce que lorsque vous utilisez le flou d'arrière-plan, vous devez diminuer l'opacité de votre champ afin de voir les modifications, non l'opacité de votre calque. Si je le change à 50, nous pouvons voir que rien ne se passe, mais si je change l'opacité de ma couleur à 50 pour cent, vous pouvez voir l'effet. Maintenant, je vais changer la couleur aussi pour quelque chose d'autre comme ça, et diminuons à 30 pour cent. Je vais changer le flou à 20 %. C' est fantastique. Laissez-moi supprimer ce calque, puis ajouter un cercle ici comme celui-ci, le rendre noir, puis ajouter un flou d'arrière-plan, et diminuons l'opacité à 30 pour cent. Je vais régler la quantité de flou à 50, et maintenant vous pouvez voir clairement l'effet. Vous pouvez également ajouter des effets aux calques de texte. Si je crée un calque de texte ici, écrivons, bonjour, vous pouvez voir que je peux ajouter une ombre portée, l'ombre interne, le flou du calque, ainsi que le flou d'arrière-plan. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 39. Style de couleur: Bonjour tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons parler des styles de couleurs. Tout comme le textile, vous pouvez créer votre propre style de couleur. Tout d'abord, allons de l'avant et créons un rectangle ici et je vais augmenter le rayon de coin à 40, comme ceci. Ensuite, définissons la couleur unie à quelque chose comme ce bleu, assez gentil, et je vais la dupliquer. Ensuite, modifions l'opacité à 75 pour cent. Encore une fois, dupliquez-le. Cette fois, je vais le changer à 50 pour cent et encore, je vais le dupliquer et maintenant passons à 25 pour cent. Je viens de créer quatre couleurs différentes avec la même couleur de base, cependant, avec quatre valeurs différentes. Comme vous pouvez le voir, il devient plus léger et plus léger. Je vais les sélectionner, les dupliquer et ici, je vais choisir une autre couleur aussi, je pense que celle-ci est géniale. Copiez et collez ces codes de couleur hexadécimal pour les autres, comme ceci. Mais, comment pouvez-vous créer votre propre style de couleur ? C'est si facile. Tout comme les textiles, vous devez d' abord sélectionner votre objet ou votre calque, puis ici, vous pouvez cliquer sur ces quatre points et ici, vous pouvez cliquer sur cette icône plus qui crée votre style de couleur. Je vais écrire primaire/violet, car il ressemble à une couleur violette. Je vais écrire primaire/violet, et nous allons cliquer sur Créer un style. Plutôt bien. Alors je vais choisir celui-là. Faisons la même chose pour cela, et cette fois écrivons secondaire/rose. Pour celui-ci, je peux dire primaire violet 75 %, comme celui-ci, et celui-ci, violet primaire 50 % et ainsi de suite. Comme vous pouvez le voir ici, nous avons différents styles de couleurs. Vous avez le violet primaire, vous avez le rose secondaire, violet primaire 75 pour cent, et ainsi de suite. Comment appliquer ces styles de couleurs à vos formes ou à vos objets ? C' est si simple. Tout d'abord, créons une nouvelle forme. Faisons un cercle ici comme ça. Pour appliquer votre style de couleur, vous pouvez cliquer sur ces quatre points, et ici vous pouvez accéder à vos styles de couleur. Ici, nous avons primaire, ici nous avons secondaire. Nous avons créé quatre couleurs primaires différentes, et une seule secondaire. Nous allons plonger dans la création de votre propre système de conception dans sa propre section dans ce cours. Maintenant, je peux choisir le violet primaire et c'est tout. Je peux le dupliquer. Ici, je peux le changer en rose secondaire, ou si vous voulez changer certaines propriétés de ces formes, vous pouvez le détacher de son style en cliquant sur cette icône comme ceci, et vous pouvez librement changer la couleur. Tout comme les styles de couleur, nous pouvons également créer des styles pour des effets ou pour un trait. Si vous cliquez sur ces quatre points, vous pouvez créer un style d'effet ou un style de contour. Quels sont les avantages de l'utilisation de styles de couleurs dans vos projets ? Tout comme les textiles, créer vos styles de couleurs va vous faire gagner beaucoup de temps. Parce que, si vous décidez de changer ces couleurs primaires plus tard, vous pouvez facilement vous diriger vers ce style de couleur, puis vous pouvez le modifier en cliquant sur cette icône Modifier le style ici et les modifications s'appliqueront immédiatement. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu, et je vous verrai dans la prochaine vidéo. 40. Masques: Bonjour à tous et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons parler de masques. En fait, les masques vous permettent d'afficher une partie spécifique d'une image ou d'un objet. Chaque fois que vous souhaitez utiliser une section spécifique d'une image, vous pouvez facilement utiliser des masques. Ou si vous voulez présenter seulement une partie d'un objet, vous pouvez toujours utiliser des masques pour cela. Comment pouvez-vous utiliser des masques ? Comme vous pouvez le voir ici, j'ai créé un carré et j'ai placé une image de notre fichier d'actifs. Si je veux utiliser des masques, d'abord, je dois choisir ces calques, puis je peux cliquer sur l'icône Masque en haut, comme ceci. Après avoir cliqué sur cette icône, vos calques disparaîtront. Maintenant, je peux sélectionner mon image dans la liste du calque, puis je vais la déplacer vers le côté gauche. Comme vous pouvez le voir maintenant, il a été coupé. Vous devez garder à l'esprit que les masques s'appliqueront à tous les calques au-dessus. Ici, si je déplace ces calques d'image vers le bas de mon masque, vous pouvez voir que rien ne se passe. L' autre façon d'appliquer un masque à votre calque est de choisir les deux calques. D' abord, je vais mettre cette image au-dessus de mon rectangle ou d'un carré. Ensuite, je vais choisir les deux et puis cliquer sur le masque comme ceci. L' autre chose importante que vous devez garder à l'esprit est que si vous utilisez un dégradé ou un effet pour votre rectangle et que vous voulez utiliser des masques, vous devez dupliquer votre forme afin de conserver ces effets. Si j'ajoute de l'ombre portée ici comme ça, je vais le mettre à 20 et le y à 10, puis je vais créer mon masque. Cependant, comme vous pouvez le voir, ma couleur d'ombre portée a été modifiée. Afin de résoudre ce problème. Avant de créer mon masque, je peux dupliquer mon rectangle. Je vais le mettre ici juste en dessous de ma couche de masque. Ensuite, je peux créer mon masque facilement. Maintenant, comme vous pouvez le voir, j'ai un groupe de masques. Si je veux mettre ces rectangle, qui est mon ombre portée, dans ces groupes, je dois m'assurer de le placer juste en dessous de mon calque de masque ici. Parce que si je le mets au-dessus de cela, ce calque de masque s'appliquera également à ce rectangle. Très bien les gars, merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 41. Composants: Salut tout le monde et bienvenue à une autre vidéo du cours. Dans cette vidéo, nous allons parler de composants. Fondamentalement, les composants sont des éléments réutilisables. Vous pouvez les créer une fois et les utiliser plusieurs fois. C' est assez incroyable. Ils sont comme des symboles dans Sketch. Sans plus tarder, commençons. Tout d'abord, je vais aller de l'avant et créer un bouton. J' ai besoin d'un rectangle. Je vais glisser et déposer. Réglons la largeur à 270 et la hauteur à 70, comme ceci. Ensuite, je vais augmenter le rayon d'angle à 20. Plutôt génial. Je pense que c'est une bonne idée de changer la couleur aussi. Je vais la mettre à cette couleur. Le code est 3562FF. Alors j'ai besoin d'un texto. Écrivons primaire. Je vais choisir la police SF Pro Text et le poids du medium, et sa taille va être de 20 points. Ensuite, changeons la couleur en blanc afin d'avoir un bon contraste ici, je vais sélectionner mes éléments, aligner au centre, à la fois verticalement et horizontalement. Maintenant, nous allons les regrouper, et je vais l'appeler barre oblique primaire.Et je pense que c'est une bonne idée d'ajouter la mise en page automatique à ce bouton. Je vais appuyer sur Maj et un, et comme vous pouvez le voir, la mise en page automatique a été ajoutée à ce bouton. La prochaine chose que nous devons faire est de cliquer sur cette icône afin de créer notre composant. Si je clique dessus, c'est fait. Je viens de créer mon premier composant. Nous pouvons également ajouter une description à votre composant ici pour que je puisse écrire, c'est le bouton principal comme celui-ci. Maintenant, comment pouvez-vous réutiliser ce bouton ? C'est si simple. Vous souvenez-vous que dans le volet des couches, nous avions la section des ressources ? Maintenant, si vous l'ouvrez, vous pouvez voir que dans les composants locaux, nous avons nos composants créés ici. Si je veux l'utiliser, je peux facilement le glisser et le déposer. Si je surpasse ça, vous pouvez voir la description que nous venons d'écrire. On y va. Parce que j'ai ajouté la mise en page automatique, je peux facilement changer ces textes. Par exemple, écrivons, commençons. Sa taille changera dynamiquement. Plutôt génial. Mais que faire si vous voulez modifier certaines propriétés de ces instances. En fait, ces boutons sont un encens de ce bouton maître. Nous appelons ce bouton le composant maître, et ce bouton est une instance de ce composant maître. Si vous voulez modifier certaines propriétés de cela, par exemple, si vous voulez changer la couleur, vous pouvez facilement vous diriger vers la section de remplissage et vous pouvez la modifier. Comme vous pouvez le voir, rien ne se passe au composant de masse. Toutefois, si vous essayez de modifier le composant de masse, cela affectera toutes ses instances. Dans la section Inspecteur, vous avez la section Instance ici, et ici vous avez un menu déroulant. Je vais vous montrer comment vous pouvez l'utiliser. Mais si vous voulez aller au composant de masse, vous pouvez utiliser ce bouton, comme ceci. Maintenant, nous sommes dans la composante de masse. Ici, si j'essaie de changer la couleur, vous pouvez voir que son instance changera immédiatement. Ou si j'augmente le rayon de coin ici, vous pouvez voir qu'il s'applique à ses instances immédiatement. Je vais le ramener à 20. Maintenant, créons un autre bouton. Je vais choisir cette Primaire 1. Je vais le dupliquer comme ça, et avant de faire des changements ici, nous devons le détacher de son instance. abord, nous devons cliquer et détacher l'instance. Maintenant, si je le change, rien n'arrive au bouton précédent. Changons l'opacité à 75 pour cent. Celui-ci va être l'état de vol stationnaire de notre bouton précédent. Je vais aller à la liste des calques et nous allons changer le nom bouton survoler et cliquer sur « Créer un composant », et c'est fait. Maintenant, si je sélectionne ces boutons de démarrage et que je vais à ce menu déroulant dans la section de l'instance, je peux passer au bouton. Bien sûr, vous avez des composants connexes ici. Cependant, parce que j'ai utilisé une barre oblique quand je les nomme, je pouvais mettre tous ces boutons dans ce bouton Groupe. Maintenant, je peux le changer de primaire en survol. On y va. C' était si simple. Maintenant, allons de l'avant et ajoutons quelques effets à ce bouton. Je vais choisir le composant maître , puis cliquez sur ce bouton plus dans la section d'effet, et ici nous avons l'ombre portée. Je vais aller à la section avancée et choisissons la même couleur ici, et changeons son opacité à 15 pour cent. Très bien. Je vais changer le montant de flou à 20 et le montant y à 10. Le x va être nul. C' est plutôt génial. Nous allons créer un autre bouton ici aussi. Je vais le dupliquer. Ensuite, je vais le détacher de son composant maître. Alors ça a changé l'opacité à 25 pour cent. Je vais supprimer cette ombre portée parce que ce sera notre état de handicap. Maintenant, je vais le renommer en bouton/désactiver. Assez agréable et cliquez sur « Créer un composant ». C'est fait. Si je sélectionne simplement ce bouton Mise en route et que je vais à ces menus déroulants, je peux facilement choisir la même chose. C' était si facile, n'est-ce pas ? Vous pouvez faire presque tout un composant. Par exemple, nous pouvons aller de l'avant et créer un champ de texte. Je vais sélectionner la ligne et glisser-déposer. Plutôt bien. Ici, nous avons créé une ligne. Choisissons la même couleur que notre bouton. Plutôt sympa. Je vais augmenter l'épaisseur de notre ligne à deux. Fantastique. Changons la largeur à 350 et nous avons besoin d'un texte ici, donc je vais écrire un champ de texte. Plutôt sympa. Changeons sa couleur pour celle-là. Je vais régler le rembourrage supérieur de cette ligne à huit pixels comme ça. Déplaçons ce texte un peu vers la droite. Plutôt génial. Je pense qu'il est préférable de réduire l'opacité de ces textes à 50 pour cent. Fantastique. Maintenant, allons les regrouper. Je vais l'appeler champ de texte/actif, et créons un composant à partir de cela. Plutôt bien. Cependant, assurez-vous d'aligner votre texte vers la gauche comme ceci. Vous pouvez également ajouter la mise en page automatique à cela, mais dans le but de cette vidéo, je vais la laisser telle qu'elle est. Maintenant, nous allons le dupliquer. Je vais le détacher de son maître, et puis changeons la couleur pour quelque chose comme ça. Celle-ci aussi et ça va être 50 pour cent. Celui-ci va être l'état d'erreur alors changeons son nom en erreur et je vais créer un composant. Maintenant, si je vais à Assets, dans les composants locaux, MacBook Pro-1, vous pouvez voir que j'ai un champ de texte, et ici je peux l'utiliser facilement. Passons ça à l'exploitation minière. Plutôt génial. Si je veux le changer à l'état d'erreur, je peux le changer ici facilement. On y va. Vous pouvez faire de votre carte un composant, vos boutons, vos champs de texte, vos curseurs, chaque chose, et c'est si utile et puissant et cela va accélérer votre processus de conception. Maintenant, nous avons créé nos composants et nous pouvons les utiliser localement. Cependant, si vous souhaitez partager ces composants avec vos coéquipiers, vous pouvez facilement vous diriger vers la section des ressources et vous pouvez cliquer sur cette icône Bibliothèque d'équipes. Ici, vous avez la possibilité de publier votre fichier actuel à d'autres membres de l'équipe. Ensuite, ils peuvent utiliser tous ces composants dans d'autres projets et d'autres fichiers, ce qui est assez cool. Gardez à l'esprit que nous allons mettre en pratique toutes ces connaissances dans les leçons à venir parce que nous allons créer nos propres projets réels basés sur ces connaissances. Ne vous inquiétez pas si vous ne comprenez pas toutes les choses ici, c'est tout à fait normal et vous allez l'apprendre par la pratique. J' espère que vous avez apprécié cette vidéo. Merci beaucoup de l'avoir regardé. Je te verrai dans la prochaine vidéo. 42. Variateurs (NOUVEAU): Salut, bienvenue. Dans cette vidéo, nous allons parler d' une nouvelle fonctionnalité cool qui a été ajoutée récemment à Figma, et elle s'appelle Variants. Que fait cette fonctionnalité ? Laissez-moi vous montrer un exemple. Supposons que nous ayons un bouton, donc je vais aller de l'avant et créer un bouton rapidement. Laissez-moi sélectionner le rectangle et il suffit de cliquer et de faire glisser pour créer ce rectangle. Je vais changer la hauteur à 44 pixels et la largeur à 100 comme ça. Laisse-moi zoomer. Parfait. Ensuite, je vais le faire arrondir, alors augmentez le rayon de coin à cinq. Fantastique. Enfin, permettez-moi de changer la couleur en violet comme ça. Plutôt bien. Maintenant, pour ce bouton, nous avons besoin d'un calque de texte. Je vais appuyer sur « T » sur mon clavier et cliquer pour créer un nouveau calque de texte. Bouton d'écriture. Alors je vais changer sa couleur en blanc comme ça. Sa taille amusante va être de 14. Ensuite, je vais sélectionner ces deux couches et les aligner horizontalement et verticalement. C'est bien. Une fois de plus, sélectionnez les deux et je vais leur ajouter la mise en page automatique. Appuyez sur « Maj et A » sur votre clavier comme ceci. Maintenant, nous venons de créer un bouton simple qui est dynamique comme celui-ci. Comme je vous l'ai déjà montré, vous pouvez créer un composant à partir de ce bouton comme ceci. Vous pouvez simplement créer un composant et c'est tout à fait bien. Mais supposons que nous ayons différents états de ce bouton. Laisse-moi le dupliquer. Commandement D ou Contrôle D. Je vais le déplacer vers le bas. Pour le premier, je vais le renommer en Bouton/Primaire/Default comme ceci. Ce second est une instance de ce composant. D' abord, je vais le détacher. Je vais cliquer sur cette icône de trois points et cliquer sur « Detach Instance ». Maintenant, je vais changer son nom en Bouton/Primaire/Hover. C' est l'état du survol de ce bouton comme ceci. Ensuite, je vais ajouter un autre champ à la section de champ, qui est une couche de superposition et je vais le changer de Linéaire à Solide. C'est blanc. C' est parfait. Permettez-moi de réduire l'opacité de 100 % à 10 %. Fantastique. N'oubliez pas de créer un composant. On y va. Nous avons le deuxième bouton et si je vais à l'onglet Actifs, vous pouvez voir que nous avons deux boutons. Jusqu' à présent, si bien. Laissez-moi créer un bouton de plus et ensuite nous allons sauter dans l'utilisation des Variants. Je vais le dupliquer, le déplacer vers le bas, détacher de son composant maître, et je vais le renommer en Bouton/Primaire/Pressé. Cette fois, je vais changer la couleur de notre sensation de superposition et au lieu du blanc, je vais utiliser le noir. Permettez-moi d'augmenter l'opacité à 20 pour cent. Maintenant, laissez-moi créer un composant et nous avons terminé. Supposons que nous travaillons sur un projet et que vous voulez utiliser l'un de ces boutons. Vous pouvez accéder à l'onglet Actifs et faire glisser et déposer Bouton/Primaire. Si vous avez besoin de l'état survol, vous pouvez échanger l'instance ici en survol, Pressé , et autre chose. Mais maintenant, vous pouvez utiliser Variants, ce qui est une façon très cool d'organiser vos composants en un seul composant. Laissez-moi vous montrer comment ça marche. ce moment, nous avons trois composantes différentes. Mais que se passe-t-il si nous pouvions combiner ces composants en un seul composant ? C' est si simple à faire. Il suffit de sélectionner tous vos composants, tous ces trois composants. Dans l'Inspecteur, vous pouvez trouver des variantes, cliquez sur « Combiner en tant que variantes ». On y va. Comme vous pouvez le voir, un nouveau cadre a été créé ici, et nous l'appelons un ensemble de composants. Il est indiqué avec cette bordure pointillée. cool, c'est que vous pouvez personnaliser l'apparence de cet ensemble de composants. Vous pouvez modifier la couleur de la bordure comme celle-ci en fonction de vos marques, couleurs, et vous pouvez fondamentalement la styliser comme vous le souhaitez. Mais pour l'instant, je vais le laisser tel quel. Permettez-moi de sélectionner mon ensemble de composants et sur le côté droit, vous pouvez voir dans la section Variantes, nous avons deux propriétés différentes. Biens 1, Biens 2. La propriété 1 est fondamentalement le type de notre bouton dans ce cas. Tu pourrais le nommer comme tu veux. Mais pour l'instant, je vais aller de l'avant et écrire Type parce que c'est logique. Mais qu'en est-il de la deuxième propriété ? La deuxième propriété est essentiellement les États. Je vais écrire State comme ça. Maintenant, si je vais à l'onglet Actifs, vous pouvez voir que nous avons un seul composant, qui est le bouton. Je peux le glisser et le déposer dans ma toile. Sur le côté droit, vous pouvez voir que nous avons Type et State. Pour le Type, puisque nous n'avons qu'un seul type de bouton, qui est Primaire, nous n'avons pas besoin de le changer. Mais pour l'État, on peut le changer en Hover. On peut le changer en pressé comme ça. C' est si simple, n'est-ce pas ? C' est ce que nous appelons des variantes unidimensionnelles parce que nous avons fondamentalement des composants différents ici avec les mêmes propriétés, cependant, avec des valeurs différentes. En général, nous avons des variantes unidimensionnelles et des variantes multidimensionnelles. Je vais vous montrer comment vous pouvez également créer des variantes multidimensionnelles, alors ne vous inquiétez pas. Mais avant de sauter dans les variantes multidimensionnelles, permettez-moi de vous donner deux autres exemples ici. Supposons que vous vouliez créer un commutateur qui a en fait deux états différents activés et désactivés. Allons de l'avant et créez rapidement un commutateur ensemble. Pour le commutateur, nous devons créer un rectangle comme celui-ci. Je vais régler la largeur à 60 et la hauteur à 30 comme ça. Alors je vais le faire complètement arrondir puisque c'est un interrupteur. Laisse-moi changer la couleur en blanc. Fantastique. Maintenant, je vais le dupliquer. Appuyez sur « Commande D » ou « Contrôle D » sur votre clavier. Ensuite, je vais diminuer la largeur de ce nouveau calque, ce calque dupliqué à 30 afin que j'obtienne 30 par 30 pixels cercle. Alors je vais le déplacer du côté droit comme ça. Vous pouvez changer sa couleur en vert. Je vais le changer en vert. Parfait. Enfin, je vais le réduire un peu. Maintenez la touche « Maj et Option » enfoncée ensemble ou « Maj et touche Alt » et essayez de la réduire comme ceci jusqu'à ce que vous obteniez un cercle de 24 x 24 pixels. Fantastique. Laisse-moi aller à Layers, et maintenant je vais les regrouper. Laissez-moi le renommer en Activer/Activer. Alors je vais le dupliquer. Commande D ou Contrôle D, déplacez-le vers le bas. Je vais double-cliquer sur ce cercle vert pour le sélectionner, le déplacer sur le côté gauche. Assurez-vous de maintenir le même rembourrage ici. Ici, nous avons un rembourrage de trois pixels pour le haut, droite et le bas. Si vous voulez voir le remplissage, vous pouvez maintenir la touche « Option » ou « Alt » enfoncée sur votre clavier et survoler votre élément comme ça. Ensuite, nous en avons trois, trois et trois. C'est parfait. Enfin, nous devons changer la couleur du vert au gris pour indiquer que cet interrupteur est désactivé. Enfin, permettez-moi de le renommer en Switch/Off. Ensuite, je vais les sélectionner tous les deux. Dans la barre d'outils, au lieu de cliquer sur ce bouton, je vais cliquer sur cette icône de flèche pour ouvrir ce menu déroulant et cliquer sur « Créer plusieurs composants ». Laissez-moi vous montrer ce qui se passe si vous cliquez sur ce bouton. Si vous cliquez dessus, vous allez créer un seul composant, ce qui n'est pas correct. Je vais appuyer sur « Command Z » ou « Control Z » pour annuler le processus. Permettez-moi de créer plusieurs composants. On y va. ce moment, nous avons deux commutateurs différents, Switch/On, Switch/Off. Si je me dirige vers l'onglet Actifs, vous pouvez voir que nous avons deux composants différents. C' est très bien. Mais nous allons passer à une autre étape en utilisant Variants. Ce que nous devons faire est de les sélectionner tous les deux et de les combiner en tant que variantes. On y va. Maintenant, je vais changer le nom de la propriété ici pour Switch. Puisque nous avons utilisé off and on dans le nom de ces commutateurs si nous essayons d'ajouter une instance ici, vous pouvez voir que nous n'avons plus ce menu déroulant. Nous avons cette fonctionnalité Switch cool comme ça, et il se sent vraiment bien. Permettez-moi de sélectionner mon jeu de composants de commutation et d'essayer de renommer cette Off en, par exemple, Désactiver et cette Activé à Activer. Maintenant, nous n'avons plus cette fonctionnalité. Nous avons ce menu déroulant. Ça fonctionne parfaitement. Cependant, en utilisant cette fonctionnalité cool, vous pourriez le rendre encore mieux. Je vais écrire ici et ici. Vous pouvez utiliser true et false aussi. En outre, vous pouvez modifier leur position comme ceci. Vous pouvez cliquer et faire glisser pour changer leur position. Je vais mettre en premier lieu. Laissez-moi vous montrer comment vous pouvez utiliser le vrai et le faux. Je vais le renommer en false et vous obtiendrez la même fonctionnalité. Parfait. Pouvez-vous voir à quel point ces variantes sont étonnantes ? C' était un autre exemple unidimensionnel. Je vais vous montrer un autre exemple, puis nous allons sauter dans la création de variantes multidimensionnelles. L' exemple suivant va être un bouton radio. De quoi avons-nous besoin pour un bouton radio ? Évidemment, nous avons besoin d'un cercle. Vous pouvez également appuyer sur O sur votre clavier. Maintenez la touche « Maj » enfoncée et faites glisser pour créer un cercle. Je vais régler la largeur et la hauteur à 30. C' est tout à fait bien en ce moment. Changeons la couleur en blanc. Alors je vais le dupliquer. Appuyez sur « Commande D » ou « Contrôle D » sur votre clavier. Maintenez la touche « Maj » et « Alt » enfoncée, ou la touche « Maj » et « Option », et essayez de la réduire comme ceci. Pour le cercle intérieur, nous allons avoir un cercle de 18 x 18 pixels comme ceci. Maintenant, je vais changer la couleur pour ce violet comme ça. Laissez-moi vous diriger vers l'onglet « Calques ». Je vais les sélectionner tous les deux, les regrouper, appuyer sur « Command G » ou « Control G » sur votre clavier. Laissez-moi le renommer en Radio Bouton/On. Je vais le dupliquer, déplacer vers le côté droit, et double-cliquer sur ce cercle intérieur, le supprimer, et renommons le groupe en Bouton/Off radio. Sélectionnez les deux, créez plusieurs composants comme celui-ci, puis pendant que ces deux composants sont sélectionnés, cliquez sur Combiner en tant que variantes. On y va. Maintenant, laissez-moi aller à l'onglet Actifs, glisser-déposer le bouton « Radio ». Nous avons la propriété 1. On ne l'a pas renommé. Si vous voulez le renommer, assurez-vous de sélectionner votre jeu de composants non votre composant lui-même. Votre ensemble de composants, qui est le bouton radio. Ici, vous pouvez double-cliquer sur cette propriété 1, et écrivons State. On y va. Maintenant, nous avons l'État. C' est plutôt bon, n'est-ce pas ? Maintenant, parlons de variantes multidimensionnelles. Tout d'abord, je vais aller de l'avant et créer une nouvelle page ici pour organiser nos composants. Voici notre page 1. Je vais le renommer en une dimension comme ça. Je vais créer une nouvelle page en cliquant sur cette icône plus, et laissez-moi écrire Multi-dimensionnel. Parfait. Laissez-moi revenir à Unidimensionnel. Je vais sélectionner cet ensemble de composants de bouton, le copier, Commande C ou Contrôle C, aller à la page Multi-dimensionnelle et le coller, appuyez sur « Commande V » ou « Contrôle V. » Qu'est-ce qu'on va faire ici ? Tout d'abord, je vais aller de l'avant et agrandir ce cadre. Je vais l'agrandir comme ça pour que nous ayons plus d'espace pour travailler. Alors je vais organiser ces boutons. Je vais le déplacer à la première rangée pour celui-là aussi. Nous avons un bouton avec trois états différents comme celui-ci. Laisse-moi rendre ce cadre plus petit. Tout d'abord, je vais déplacer ces composants hors de cet ensemble de composants, donc nous n'avons plus de variantes. Si nous passons à Assets et si nous passons à Multi-Dimensional, nous avons trois composants différents, ce qui signifie que nous n'utilisons plus de variantes. Maintenant, nous devons renommer ces boutons. Comment pouvons-nous faire ça ? Je vais tous les sélectionner. Je vais appuyer sur « Command R » ou « Control R » sur mon clavier. Ici, en utilisant cette fenêtre, je peux renommer tous mes calques, tous mes composants en même temps avec des fonctionnalités cool. Je vais me diriger vers ce champ Renommer en et laissez-moi cliquer sur ce bouton de nom actuel. De cette façon, nous obtenons le nom actuel de notre calque, puis nous pouvons y ajouter plus de texte. Je vais écrire/et puis sans icône, parfait. Cliquez sur « Renommer ». On y va. Nous venons de changer le nom de tous nos boutons. C'est incroyable. Maintenant, je vais les dupliquer, Commandement D ou Contrôle D, les déplacer vers le bas. Ce sont les instances de nos composants maîtres. Comme vous le savez, nous devons les détacher de leurs composants maîtres. Encore une fois, je vais aller de l'avant et les renommer. Appuyez sur « Commande R » ou « Contrôle R. » Ici, dans le champ Match, je vais écrire le texte sans icône. Assurez-vous de l'écrire exactement de la même façon que vous l'avez écrit auparavant, c'est si important. Sans Icône. Ensuite, remplacez-le par With Icône et appuyez sur « Renommer ». Maintenant, on vient de le remplacer facilement. Ensuite, ici, nous allons ajouter une icône à ces boutons. Comment pouvons-nous faire ça ? C' est si simple. Je vais aller de l'avant et créer une étoile juste pour cet exemple. Permettez-moi de définir la largeur et la hauteur à 16 pixels. Je vais changer la couleur en blanc, fantastique. Alors déplace-le ici. Faites glisser et déposez-le. Comme vous pouvez le voir, puisque nous utilisons la mise en page automatique, la largeur a été modifiée automatiquement. Ce n'est pas ce que nous voulons parce que nous voulons maintenir la largeur de notre bouton principal. Pour résoudre ça, je vais me diriger vers la section Mise en page automatique de l'inspecteur. Pour le rembourrage horizontal, je vais écrire 16 pixels comme ceci. C' est exactement ce dont j'ai besoin. Je vais répéter le même processus pour tous mes boutons. Je vais sélectionner mon étoile, appuyer sur « Command C » ou « Control C », et sélectionner ce bouton, et appuyer sur « Command V » ou « Control V » pour le coller. Maintenant, je vais changer la position de cette icône du côté droit vers le côté gauche. Je peux utiliser la touche fléchée gauche de mon clavier pour le faire simplement. Une fois de plus, sélectionnez votre bouton, changez votre rembourrage horizontal à 16. Enfin, je vais faire la même chose pour mon dernier bouton. Tout est fait. La dernière chose que nous devons faire est de créer des composants. Je vais sélectionner ces trois boutons et créer plusieurs composants. Parfait. Maintenant, nous avons six composants différents, et il est temps de créer des variantes. Je vais les sélectionner tous et cliquer sur Combiner en tant que variantes. On y va. Nous venons de créer des variantes multidimensionnelles. Sur le côté droit, si nous nous dirigeons vers la section Variantes, nous pouvons voir la propriété 1, je vais écrire Type. Propriété 2, je vais écrire State. Propriété 3, je vais écrire Icône. Ici, nous avons Avec Icône, Sans Icône. Comme je l'ai mentionné précédemment, vous pouvez simplement le renommer en Activé et Désactivé pour obtenir cette fonctionnalité de bascule. Maintenant, je peux aller à l'Assets, Multi-dimensionnel. Vous pouvez le faire glisser et le déposer. On y va. Nous avons primaire, nous avons des états comme celui-ci, nous avons icône ou sans icône. C'est incroyable. C' est essentiellement ainsi qu'une variante multidimensionnelle fonctionne. Mais si nous pouvions passer à une autre étape en ajoutant un nouveau type de bouton ici ? Maintenant, nous avons le bouton principal, mais nous pouvons ajouter un bouton secondaire aussi. Comment puis-je faire ça ? C'est si simple. Tout d'abord, je vais sélectionner mon ensemble de composants. Ensuite, je vais agrandir cette bordure ou, disons, encadrer comme ça. Enfin, je vais sélectionner tous mes boutons, appuyer sur « Commande D » ou « Contrôle D », les déplacer vers le bas. Tout d'abord, je vais les sélectionner tous, ces trois boutons sans icône, et laissez-moi changer leur couleur. Allez dans « Couleurs de sélection » et essayez de changer le U comme ceci. Je pense que c'est bon. Assurez-vous de saisir ce code de couleur hexadécimal, copiez-le, puis sélectionnez les trois autres boutons, puis collez la couleur ici. Nous en avons fini avec leur couleur. Il ne reste plus qu'à changer de nom. Que devrions-nous changer ici ? Nous devons changer le mot-clé primaire en secondaire et nous avons fini, fondamentalement. Je vais les sélectionner tous, appuyez sur « Command R » ou « Control R » sur votre clavier. Ici, dans le champ Correspondre, je vais écrire Primaire. Ça veut dire obtenir primaire. Ensuite, je vais le remplacer par Secondaire comme ça. Si j'appuie sur « Renommer », ils sont renommés. Tu n'as pas besoin de faire autre chose. Essayons ça. Je vais aller à « Assets » et je vais faire glisser et déposer ce bouton. Maintenant, au lieu de primaire, je vais choisir secondaire et nous avons d'autres états. Vous pouvez activer une icône comme celle-ci. C' est ainsi que vous pouvez créer différents types de votre bouton. Récapitulons. abord, vous devez vous rappeler que nous avons deux types différents de variantes : des variantes unidimensionnelles et des variantes multidimensionnelles. La deuxième chose que vous devez vous rappeler est que vous pouvez utiliser des variantes ou des composants. Vous devez garder à l'esprit que vous devez avoir des composants si vous voulez utiliser des variantes. La dernière chose que vous devez vous rappeler est que vous devriez essayer d'organiser très bien vos propriétés. Si je sélectionne ce jeu de composants ici, j'ai Type, State, Icône. Assurez-vous de les nommer correctement car plus tard, au que votre projet grandit, vous trouverez qu'il est facile de travailler avec. La dernière chose que je vais mentionner ici est que vous pouvez réellement modifier l'ordre de ces propriétés. Si vous commandez sur ce type juste à côté, vous pouvez voir qu'une icône apparaît. Si je clique et fais glisser comme ça, je peux changer l'ordre de ces propriétés, ce qui est si cool. En fonction du niveau d'importance, vous pouvez simplement les modifier. Mais dans ce cas, je pense que Type, Etat et Icône ont du sens. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. On se voit alors. 43. Disposition des grilles: Salut tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons parler des grilles de mise en page. Fondamentalement, les grilles de mise en page nous aideront à concevoir avec précision, afin que nous puissions comprendre où exactement nos objets doivent être placés ou comment vous pouvez placer vos objets dans une taille d'écran différente. Pour ajouter une grille de mise en page, vous pouvez vous diriger vers le panneau des propriétés ou l'inspecteur et, au milieu, vous pouvez voir la section de la grille de mise en page. Je vais cliquer sur ce Plus « Bouton » comme ceci et dans le paramètre avancé, vous pouvez définir la taille. Par exemple, je peux le définir sur huit si je vais l'utiliser pour concevoir applications mobiles et je peux le définir sur 10 si je conçois une page Web. Vous pouvez également modifier la couleur comme celle-ci et l'opacité bien sûr. Si vous souhaitez modifier le type de votre grille de mise en page, vous pouvez facilement vous diriger vers ce menu déroulant. Comme vous pouvez le voir, nous avons trois options différentes. Le premier est la grille, et c'est ce que vous pouvez voir ici. Le second est des colonnes. Dans ce cas, vous avez plus d'options à modifier, par exemple vous avez compté, donc cela signifie le nombre de vos colonnes que vous voulez utiliser. Si vous concevez une page Web, vous pouvez la définir sur 12, c' est la grille de mise en page la plus célèbre pour la conception d'une page Web. Ensuite, vous avez le type, la largeur et la marge. La largeur est désactivée parce que nous utilisons le type d'étirement, donc cela signifie fondamentalement qu'il étend toutes les 12 colonnes à travers notre tableau d'art. Si je le change au centre, vous pouvez voir que la largeur sera activée, donc je peux facilement définir la largeur à 30 ou même 60 comme ceci, et c'est centré. La quantité de gouttière est l'espace entre les colonnes et les lignes et ici vous pouvez le définir à droite, vous pouvez le définir à gauche et étirer. Quand devriez-vous utiliser le centre ? Par exemple, si vous concevez une page Web pour un écran ultra-large, vous pouvez utiliser cette option de centre. Vous pouvez également le changer en lignes, comme vous pouvez le voir. Le prochain point important que je vais mentionner est que les grilles de mise en page ne dépendent pas de la dimension de votre tableau d'art. Cela signifie que si j'essaie de redimensionner ce tableau d'art comme ça, vous pouvez voir que votre grille de mise en page sera intacte. Très bien, les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 44. Plugins: Salut tout le monde et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons parler des plugins dans Figma. En fait, les plugins sont des scripts tiers ou des applications qui étendent les fonctionnalités d'une autre application. Afin de faire quelque chose rapidement ou même par magie, vous pouvez utiliser des plugins dans votre projet. Maintenant, je vais vous montrer comment nous pouvons les trouver, comment vous pouvez les installer, les désinstaller et enfin, comment vous pouvez les utiliser. Allons à « Plugins » dans la section « Récent » de votre tableau de bord. Cette fenêtre est divisée en trois sections différentes. Plugins en vedette, populaires et installés. Dans la section du plugin en vedette, vous pouvez trouver tous les plugins en vedette de Figma, comme vous pouvez le voir ici, nous avons Sympli Handoff, nous avons Vectary 3D, que nous allons apprendre dans la section de modélisation 3D de ce cours, nous avons Master, Arrow Auto, Clean Document, etc. Il y a d'innombrables plugins que vous pouvez utiliser dans votre projet. Cependant, maintenant je vais vous montrer les plugins les plus importants et les plus populaires, et nous allons apprendre à les utiliser. Comme vous pouvez le voir dans la section populaire, nous avons ces plugins. Le premier est appelé « Unsplash », ce qui est si utile. Si je clique dessus, vous pouvez voir la description ici. Vous pouvez insérer de belles images de Unsplash directement dans vos designs. C' est un grand plugin et c'est aussi un excellent site Web. Vous pouvez utiliser des images libres de droits de ce site Web. Pour installer le plugin, vous pouvez cliquer sur ce bouton et c'est tout qu'il est installé et si vous voulez désinstaller un plugin, vous pouvez à nouveau cliquer dessus et c'est fait. Plutôt cool. Vous pouvez obtenir toutes les informations sur ces plugin ici, peut cliquer sur « Voir tout » vous pouvez en apprendre davantage sur chaque version différente. Revenons aux plugins et ici, comme vous pouvez le voir, vous avez unsplash dans la section installée, puis nous avons Content vous avez unsplash dans la section installée, Reel. C' est un autre bon plugin qui vous donne des données randomisées afin que vous puissiez tout concevoir avec des données réelles. Je vais l'installer aussi. Ensuite, nous avons des cartes. Vous pouvez créer différents graphiques. On n'a pas besoin de ça pour l'instant. Vous avez Map Maker, ce qui est tellement cool. Vous pouvez facilement écrire votre adresse dans ce champ de texte et il vous crée un écran Google Maps ou même et un écran Mapbox. Installez-le aussi bien. On a Isométrique, c'est tellement cool. Je vais l'installer. Nous avons Vectary 3D nous allons l'installer aussi bien parce que nous avons une section complète sur la modélisation 3D dans ce cours. Vous pouvez utiliser des modèles 3D dans votre conception. Ensuite, vous avez Renommer It et Themer, je ne vais pas les installer maintenant. Maintenant, nous allons cliquer sur « Parcourir tous les plugins ». Ici, je vais chercher un plugin appelé Brandfetch. On y va. C'est le second. Je vais l'installer aussi. Cherchons Palette. On y va, et c'est tout pour l'instant. En fait, vous pouvez aller de l'avant et les installer tous. Cependant, à mon avis, il est préférable d'aller vérifier votre description, obtenir des informations sur le fonctionnement de ces plugins, et ensuite vous pouvez décider lequel convient à votre projet. Maintenant, créons un nouveau fichier. Je vais appuyer sur « A » pour ajouter un tableau d'art. Je vais choisir MacBook Pro. Ensuite, créons un rectangle ici. Je vais augmenter le rayon du coin pour le rendre agréable. Maintenant, une fois que mon objet est sélectionné, je peux passer à la section de menu. Ici, je peux ouvrir des plugins. J' ai tous mes plugins prêts ici. Pour l'instant, je vais choisir Unsplash et garder à l'esprit que vous ne pouvez utiliser qu'un plugin à la fois. Vous ne pouvez pas utiliser deux ou plusieurs plugins en même temps. Maintenant, nous avons Unsplash plugin ouvert et vous pouvez facilement cliquer sur « Insérer aléatoire. » On y va. Vous pouvez obtenir une image aléatoire immédiatement. Vous pouvez également choisir ces presets, par exemple, minimal ou nature, coloré. Bien sûr, vous pouvez également rechercher. Par exemple, nous allons écrire le portrait et nous y allons. C' est plutôt génial. Vous pouvez facilement en choisir un. Fantastique. Pouvez-vous voir à quel point ces plugins sont incroyables et puissants ? Maintenant, je peux créer un texte. Écrivons le nom. Je vais augmenter la taille à 40. Ensuite, allons à la section plugin et je vais sélectionner Contenu Reel. Maintenant, comme vous pouvez le voir, vous avez différentes options dans ces plugin. Par exemple, vous avez du texte, vous avez des avatars, vous avez des icônes. Tout d'abord, essayons cette option de texte. Comme vous pouvez le voir, j'ai sélectionné ma couche de texte de nom, et je vais cliquer dessus sur cette « Noms ». On y va, tu as un nom aléatoire. Si je clique encore une fois, nous pouvons voir que je peux obtenir des noms aléatoires ici. Si je clique sur ces points, vous pouvez définir certains paramètres. Par exemple, vous pouvez définir si vous voulez un nom anglais américain, français, espagnol. Si je choisis le français, vous pouvez cliquer sur « Appliquer » et voilà. Tu peux même changer le sexe. Par exemple, ici, nous avons un homme ou une femme. Vous pouvez spécifier si vous voulez uniquement le prénom ou le nom de famille comme celui-ci. Vous pouvez voir l'aperçu de vos paramètres définis ici. Maintenant, si vous voulez obtenir un numéro de téléphone, vous pouvez cliquer sur « Téléphone ». On y va. Si vous voulez obtenir une adresse, vous pouvez cliquer sur « Adresse » et voici votre adresse. Tu pourrais avoir des numéros, tu pourrais avoir la date et l'heure, comme ça. Étonnamment, vous pouvez également générer des contenus ipsum Lorem comme ceci. Vous pouvez obtenir des adresses e-mail et certaines URL comme celle-ci. Essayons maintenant la section avatars et les icônes. Nous devons d'abord créer un cercle. Ensuite, je vais cliquer sur « Avatars ». Ici, je peux utiliser des hommes, femmes, des hommes et des femmes. Je vais choisir une femme. On y va. Si je duplique ce cercle plusieurs fois et que je les sélectionne tous, et que je clique sur « Homme et Femme », vous pourriez voir que j'ai des photos différentes pour chaque cercle, ce qui est assez incroyable. Si vous voulez utiliser des icônes, vous devez d' abord télécharger des fonds car ce ne sont pas des icônes PNG, que vous pourriez utiliser facilement. Vous devez d'abord télécharger des fonds spéciaux, puis vous pouvez utiliser ces icônes. Maintenant, essayons le Map Maker. D' abord, je dois m'assurer que je l'ai installé ou non. Il semble que j'ai oublié de l'installer. Cliquez sur « Gérer les plugins » et parcouvrons tous les plugins. Maintenant, nous allons chercher Map Maker. Allons l'installer. Je vais aller aux plugins, et on y va. Ici, nous allons insérer une adresse. Je ne sais pas, écrivons Harrison. On y va. Vous pourriez être plus précis, vous pourriez ajouter quelques chiffres. Cependant, dans le but de ce tutoriel, je pense que c'est suffisant. Vous pouvez également décider si vous voulez obtenir un écran Google Maps ou une Mapbox, comme ceci, nous pouvons également modifier certaines propriétés ici. Par exemple, vous pouvez changer le type de carte de route à Satellite à Hybrid. Vous pouvez également modifier le niveau de zoom. Par exemple, je vais le modifier à 16, comme ceci. Vous pouvez également ajouter un marqueur. Par exemple, celui-ci, c'est assez génial. Le prochain plugin dont nous allons parler est Brandfetch. Il y a des moments où vous pouvez avoir besoin d'obtenir un logo à partir d'un site Web et il est temps d'aller simplement chercher ce logo, l' enregistrer, puis l'insérer dans Figma. Au lieu de cela, vous pourriez utiliser ces plugin. Supposons que nous voulons obtenir le logo de l'Apple. Si je viens d'écrire leur nom de domaine comme leur site Web, apple.com et je clique sur « Get Logo. » Vous pouvez voir le logo Apple immédiatement. Je peux le mettre à l'échelle, je peux le réduire. Essayons aussi un autre logo, Brandfetch. Écrivons figma.com et on y va. C' est assez incroyable, n'est-ce pas ? Le prochain plugin dont nous allons parler est la Palette. Si vous voulez créer une grande palette de couleurs, mais vous ne savez pas comment choisir vos couleurs. Ce plugin vous permet de créer des palettes de couleurs étonnantes en une seconde, comme vous pouvez le voir, vous pouvez le changer de standard à l'interface utilisateur comme ceci. Vous pouvez l'actualiser. Vous pouvez choisir une photo afin d'en obtenir quelques couleurs. Vous pouvez le sauver. On y va. Vous avez vos palettes de couleur prêtes à l'emploi. Vous pouvez obtenir le code de couleur hexadécimal juste là. C' est plutôt fantastique. Dans cette vidéo, vous avez appris comment installer des plugins, comment désinstaller cela, comment vous pouvez l'utiliser dans vos projets. J' espère que vous avez vraiment apprécié cette vidéo. Merci beaucoup de l'avoir regardé, et je vous verrai dans la prochaine vidéo. 45. Exporter: Salut tout le monde et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons parler de l'exportation de vos fichiers. En tant que concepteur UI/UX, vous devez savoir comment exporter correctement vos fichiers afin de les remettre à votre développeur ou à votre client. Supposons que vous voulez exporter ces images, pour ce faire, vous pouvez tout d'abord sélectionner un objet, puis dans la section Propriétés, vous avez la section Exporter. Si je clique sur cette icône « Plus », vous pouvez voir que vous pouvez modifier ces paramètres. Comme vous pouvez le voir, par défaut, il est défini sur 1x. Qu' est-ce que ça veut dire ? Cela signifie que si vous l'exportez tel quel, vous obtiendrez la même dimension de votre fichier. Cependant, si vous concevez ceci pour une application qui nécessite que vous ayez une taille de fichier différente, vous pouvez ouvrir ce menu déroulant, et vous pouvez le définir sur 2x ou 3x. Vous pouvez également écrire le suffixe ici, puis vous pouvez spécifier le format. Par exemple, vous pouvez le définir sur PNG, JPG, SVG et PDF, puis vous pouvez prévisualiser et enfin, vous pouvez cliquer sur « Exporter » et là nous allons, vous pouvez facilement définir un nom et cliquer sur « Enregistrer ». Cependant, si vous ne voulez pas exporter vos fichiers et que vous voulez simplement partager ce projet avec vos coéquipiers ou avec votre client, vous pouvez vous diriger vers la section Barre d'outils et cliquer sur ce bouton bleu, qui s'appelle Partager, et ici vous pouvez inviter quelqu'un à voir ce projet ou à modifier ce projet, c'est totalement à vous de décider. Vous pouvez également copier le lien et l'envoyer à quelqu'un d'autre. Si vous voulez présenter ce projet sur votre site Web, vous pouvez cliquer sur « Obtenir le code d'intégration », et vous obtiendrez un code iframe que vous pouvez saisir et copier et coller dans votre fichier HTML et vous obtiendrez ces projets en direct sur votre site, donc, si vous apportez des modifications ici, cela s'appliquera également à votre site Web. C' est assez incroyable. Très bien les gars, merci beaucoup d'avoir regardé cette vidéo, j'espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 46. Prototypage: Bonjour, tout le monde et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons parler du prototypage dans Figma. En tant que concepteur UX d'interface utilisateur, il est crucial de connaître le prototypage et si important de maîtriser ce sujet parce que peu importe la beauté et l'incroyable de vos conceptions, à la fin de la journée, si vous ne pouvez pas le présenter dans un façon incroyable, votre travail acharné ne paie pas, donc vous devez maîtriser ce sujet. Pour cette raison, nous avons une section complète sur le prototypage dans ce cours. Dans cette vidéo, je vais vous montrer comment fonctionne le prototypage et je veux vous familiariser avec le concept. Sans plus tarder, commençons par ajouter deux tableaux d'art. Je vais appuyer sur « A » sur mon clavier et choisissons iPhone 11 Pro ou X. Ensuite, je vais dupliquer cela parce que nous avons besoin de deux tableaux d'art différents et ajoutons un rectangle à ce premier tableau d'art comme ceci. Je vais augmenter le rayon d'angle à 40. Plutôt bien. Laisse-moi l'aligner au centre. Ensuite, je vais choisir une photo de notre fichier d'actifs. Par exemple, choisissons celui-ci dans le dossier Cartes, numéro 2. Je vais l'ouvrir et mettons-le ici. Plutôt génial. Ensuite, sur le deuxième tableau d'art, créons un autre rectangle. Plutôt bien. Il devrait s'adapter à votre tableau d'art. Alors je vais placer la même image ici. Fantastique. Il est maintenant temps d'ajouter des interactions à notre conception. Laissez-moi le renommer afin de me référer à cela facilement, donc je vais changer le nom en Home et le second en Detail. Plutôt bien. En fait, si l'utilisateur clique sur cette image dans notre tableau d'art maison, notre tableau d'art détaillé devrait être présenté en une seconde. Ensuite, nous devons l'animer. Tout d'abord, dans la section des propriétés, vous pouvez sélectionner Prototype dans ces trois onglets comme celui-ci. Ensuite, vous devez sélectionner votre objet. Comme vous pouvez le voir, mon image est déjà sélectionnée. Comme vous pouvez le voir, un cercle apparaît ici. Donc, si je clique dessus et que je maintiens ma souris comme ça, je peux facilement le connecter au tableau d'art suivant. Laisse tomber et on y va. Maintenant, nos tableaux d'art sont connectés. Si je veux supprimer cette connexion, je peux la glisser et la déposer dans le canevas comme ceci. Une fois que vous avez créé votre première connexion, un petit carré bleu apparaîtra dans le coin supérieur gauche de votre premier tableau d'art. Cela signifie que votre prototype commence à partir de ce tableau d'art. Si vous voulez le modifier, vous pouvez facilement cliquer dessus, le faire glisser et le déposer ici comme ceci. Maintenant que nous avons créé notre interaction, allons en prévisualiser une seconde. Si je vais dans la barre d'outils et que je clique sur ce bouton Aperçu, je peux voir mes tableaux d'art ici. Si je clique n'importe où dans mon tableau d'art comme ceci, nous pouvons voir que cela me montre qu'il y a une interaction pour cette image. Donc, cette boîte bleue est un point chaud. Maintenant, si je clique dessus, vous pouvez voir que mon deuxième tableau d'art apparaît immédiatement. Cependant, nous n'avons pas d'animation ici. Revenons à notre dossier de projet. Dans la section Prototype, vous avez la section Interactions, vous avez Animation. Ici, nous pouvons choisir le type d'interaction. Par exemple, nous avons On Tap, On Drag, En survolant, En appuyant sur , Mouse Enter, etc. Nous ne allons pas plonger dans ces détails en ce moment parce que nous allons le couvrir dans la section prototypage de ce cours. Vous avez aussi la destination ici. Accédez à, Ouvrir la superposition, Permuter avec, Précédent, Fermer la superposition et Ouvrir l'URL, et voici votre destination. Ensuite, nous avons aussi la section Animation. Comme vous pouvez le voir, il est défini sur instantané par défaut. Si j'ouvre ce menu déroulant, j'ai beaucoup d'options. J' ai Smart Animate, qui est une nouvelle fonctionnalité. Nous avons Déplacer, Déplacer, Pousser, Glisser vers l'intérieur et Glisser vers l'extérieur. Maintenant, je vais choisir Smart Animate et ici nous avons des options avancées. Par exemple, je peux choisir Ease In, Ease Out, Ease In and Out et Linear. Ceux-ci sont liés à des trucs d'animation. Nous le couvrirons dans la section avancée. Ici, vous avez le temps. Par exemple, je peux le définir à 400 millisecondes comme ceci. Vous pouvez également ouvrir le paramètre du prototype ici. Il est lié à cette fenêtre. Nous pouvons modifier par exemple, l'arrière-plan trop blanc comme celui-ci que vous le souhaitez. Vous pouvez modifier le modèle de votre iPhone, par exemple. Ici, c'est réglé sur Gold. Je peux choisir Midnight Green comme ça. Fantastique. Maintenant, vérifions une fois de plus. Je vais aller à la première page et maintenant nous allons cliquer sur notre image. On y va. C'est fantastique, n'est-ce pas ? Si vous voulez recommencer, vous pouvez cliquer sur ce bouton, redémarrer, puis vous pouvez le vérifier une fois de plus. Revenons maintenant à notre dossier de projet. Ici, comme vous pouvez le voir, le nom de nos rectangles dans ces deux tableaux d'art est différent, alors faisons-les le même. Je vais le changer en Image et celle-ci aussi. Que crois-tu qu'il va se passer ? Vérifions ça. Je vais aller au Prototypage, redémarrons ça, et encore une fois, je vais cliquer dessus. Fantastique. Tu as vu la différence ici ? Avec l'aide de Smart Animate, vous pouvez créer ce genre d'animation et de prototypage facilement dans Figma, ce qui est assez incroyable. Si vous allez plonger dans des animations plus complexes et des prototypes plus complexes dans la section prototypage de ce cours. D' accord, les gars. C'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 47. Multijoueur et commentant: Salut tout le monde et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons parler de multijoueur et de commentaires. En fait, Figma dispose de fonctionnalités puissantes pour faciliter la collaboration des designers. Ainsi, comme je l'ai déjà mentionné, vous pouvez facilement partager votre projet avec ce bouton bleu. Si je clique dessus, comme vous pouvez le voir, j'ai déjà invité une personne et je définit le paramètre qu'il peut éditer ce projet. Puis il a reçu un email de Figma, il l'a accepté et à partir de maintenant il peut collaborer avec moi pour éditer ce projet. Comme vous pouvez le voir dans la barre d'outils , deux personnes consultent ce projet. Le premier est moi, le second est cette personne, qui est aussi moi dans ce tutoriel. Maintenant, je vais vous montrer comment vous pouvez l'utiliser. Permettez-moi de passer à ces comptes de conception d'interface utilisateur. On y va. Supposons que je choisis cette couche, si je retourne à mon compte principal, vous pouvez voir qu'elle a déjà été sélectionnée. Par qui ? Cette conception de l'interface utilisateur. Si je change la position de mon curseur ici, vous pouvez voir qu'il changera immédiatement dans ce projet aussi, ou sélectionnons un autre objet, par exemple, ce menu et là nous allons. La conception de l'interface utilisateur fait quelque chose avec cette couche. Si je sélectionne l'arrière-plan ici, c'est mon compte et je passe à l'autre compte, vous pouvez voir ce trait violet qui indique qu'ils ont choisi cet arrière-plan. Vous pouvez voir ces couleurs dans la barre d'outils afin de reconnaître la personne qui sélectionne l'objet. C' est plutôt cool, n'est-ce pas ? Supposons maintenant que je veux ajouter quelques commentaires ici. Dans la barre d'outils juste à côté de notre outil de texte, il y a une autre icône pour commenter. Si je clique sur cela, je peux placer un marqueur ici, par exemple, ici et je peux écrire un commentaire, par exemple, où est le CTA ? Ce qui est Call-To-Action. Je peux le poster. Je peux même mentionner quelqu'un ici comme ajouter conception de l' interface utilisateur et cette personne recevra un e-mail à propos de ce commentaire et il peut me répondre. Fait. Dans ce compte, nous pouvons voir qu'il y a un commentaire. Je clique dessus, j' écris, où est le CTA ? Je peux répondre, je vais le concevoir d'ici ce soir. Nous pouvons également ajouter un emoji ici. Plutôt cool. Répondez, c'est génial et ici dans mon compte, je peux voir la réponse immédiatement, ce qui est assez fantastique. Si ce problème a été résolu, vous pouvez cliquer sur le bouton Résoudre et ce commentaire sera supprimé. Comme vous pouvez le voir, Figma vous offre de nombreuses fonctionnalités afin de collaborer avec d'autres concepteurs sans exporter vos fichiers et les envoyer. Ainsi, vous pouvez coopérer instantanément avec d'autres personnes et partager vos idées sur votre design. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 48. Raccourcis clavier clavier: Salut, tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons parler des raccourcis clavier dans Figma. En tant que concepteur, il est si important de connaître les raccourcis les plus importants de la plate-forme que vous utilisez pour la conception. Étant donné que Figma est un logiciel multiplateforme, il est trop difficile de couvrir tous ces raccourcis dans une seule vidéo. Cependant, au lieu de mentionner et de discuter tous ces raccourcis, je vais vous montrer un moyen très rapide de trouver les raccourcis dont vous avez besoin pour votre flux de travail. Que vous utilisiez macOS ou Windows, vous pouvez l'utiliser dans les deux systèmes d'exploitation. Comme vous pouvez le voir en bas à droite, il y a une icône de point d'interrogation, elle s'appelle aide et ressources. Si je clique dessus, vous pouvez voir qu' il y a beaucoup d'autres options ici. L' un d'eux dit raccourcis clavier, et c'est exactement ce dont nous avons besoin. Cliquez sur ce raccourcis clavier. On y va. Maintenant, nous avons accès à tous ces raccourcis en un seul endroit. Comme vous pouvez le voir, il est classé en différentes sections, telles que Essentiel, Outils, Vue, Zoom, Texte, Forme, etc. Parce que j'utilise macOS, par exemple, ici, il me montre la touche Commande, mais si vous êtes à l'aide de Windows, à coup sûr, vous verrez Contrôle ici. Ou par exemple, si je vais à View, ici j'ai Command ; pour vous, si vous utilisez Windows, c'est Contrôle à coup sûr. De cette façon, vous pouvez facilement trouver les raccourcis dont vous avez besoin. Mais maintenant, je vais mentionner quelques-uns des raccourcis les plus importants dont vous pourriez avoir besoin pour ce cours. Commençons par copier-coller. Comme d'autres logiciels pour copier et coller, vous pouvez facilement choisir votre élément comme ce texte et vous pouvez utiliser la commande C. Si vous voulez le coller, vous pouvez utiliser la commande V dans macOS. Cependant, si vous utilisez Windows, vous pouvez appuyer sur Ctrl C et Ctrl V, et vous obtiendrez le même résultat. Si je veux regrouper ces calques, par exemple, ces Windows et macOS comme ceci, je peux appuyer sur la commande G de mon clavier. Toutefois, sous Windows, vous pouvez appuyer sur Ctrl G. Si vous souhaitez dupliquer quelque chose, vous pouvez sélectionner la couche souhaitée et appuyer sur Commande D dans macOS. Si vous utilisez Windows, vous pouvez appuyer sur Ctrl D à la place. Pour mettre à l'échelle quelque chose, vous pouvez soit aller ici et choisir l'outil de mise à l'échelle, soit appuyer sur K sur votre clavier. Peu importe que vous utilisiez macOS ou Windows, car vous n'avez pas besoin d'utiliser les touches de commande ou de contrôle. Vous avez juste besoin d'appuyer simplement sur K sur votre clavier. Comme vous pouvez le voir maintenant, l'outil d'échelle est sélectionné. Enfin, si vous voulez vérifier les marges et les marges, vous pouvez maintenir la touche Option sur votre clavier si vous utilisez macOS comme celui-ci, et pointez votre souris sur d'autres éléments près des éléments sélectionnés. Comme vous pouvez le voir, j'ai maintenant ce nombre qui est indiqué par un texte rouge, et c'est le rembourrage entre ces deux éléments. Dans Windows, vous pouvez maintenir la touche Alt sur votre clavier et faire la même chose. Si vous voulez effectuer un zoom arrière, vous pouvez maintenir la touche Commande et faire défiler comme ceci, zoomer et zoomer avant. Dans Windows, vous pouvez maintenir la touche Ctrl enfoncée et faire la même chose. C' est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 49. Introduction aux éléments UI: Salut tout le monde. Bienvenue dans une autre section de ce cours. Dans cette section, nous allons parler des éléments d'interface utilisateur, qui sont si importants lorsque vous concevez une interface utilisateur. Dans la prochaine série de vidéos, nous allons parler des champs de texte, des boutons, des curseurs, des cartes, des dialogues ou même des steppers et des graphiques. Si vous êtes confus au sujet de tous ces éléments, je vous suggère de regarder cette section. Rendez-vous dans la prochaine série de vidéos. 50. Champs de texte: Hé, tout le monde, bienvenue à une autre vidéo de cette section. Dans cette vidéo, nous allons parler de champs de texte. Comme vous le savez peut-être, les champs de texte sont des éléments d'interface utilisateur, qui permettent aux utilisateurs d'entrer un texte dans une interface utilisateur. Ils apparaissent généralement dans les dialogues et les formes. Presque toutes les applications mobiles et aussi les sites Web utilisent au moins un type de champs de texte. Par exemple, vous pouvez les utiliser pour entrer des dates, des noms, des heures, etc. En tant que concepteur d'interface utilisateur, vous devez connaître l'anatomie d'un champ de texte comme décrit dans l'image. Vous pouvez trouver différents types de champs de texte sur différentes plateformes. Il est donc recommandé de connaître les éléments d'interface utilisateur standard qu'un système d'exploitation spécifique utilise. Si vous regardez l'image à droite, vous pouvez voir que nous avons l'anatomie d'un champ de texte. Comme vous pouvez le voir, nous avons l'étiquette, nous avons le texte d'entrée, nous avons l'icône de fin, qui est facultative, comme vous pouvez le voir, c'est le numéro trois. En outre, nous avons un indicateur d'activation. Parfois, vous pouvez utiliser l'icône de saisie vocale ou même une icône déroulante. À la fin, vous pouvez voir que nous concevons différents états d'un champ de texte. Par exemple, si l'utilisateur ne saisit pas correctement le mot de passe, la couleur du champ de texte peut changer pour autre chose, par exemple, rouge. 51. Boutons: Hé, tout le monde. Dans cette vidéo, nous allons parler de boutons dans la conception. boutons permettent aux utilisateurs de prendre des mesures, sorte que chaque fois qu'un utilisateur a besoin de faire quelque chose, les boutons entrent en jeu. Je pense que maintenant vous comprenez combien il est important de savoir sur la conception des boutons. Lorsque vous concevez un bouton, assurez-vous de prêter attention aux points suivants. Numéro 1, états. Concevoir tous les états du bouton, tels que actif, inactif, tapé, survol, etc. Numéro 2, hiérarchie. Connaître la hiérarchie de vos boutons. Par exemple, qu'il s'agisse d'un accent élevé, accent moyen ou d'un accent faible. Numéro 3, placement. Plusieurs types de boutons peuvent être utilisés pour représenter différents niveaux d'accentuation. Numéro 4, bouton texte. Les boutons de texte sont généralement utilisés pour les actions moins prononcées , par exemple, dans les boîtes de dialogue et les cartes, et enfin, le contraste. Les boutons doivent avoir suffisamment de contraste pour exprimer l'importance de leur fonctionnalité. Si vous regardez l'image à droite, vous pouvez voir que nous avons différents états d'un bouton. Par exemple, nous avons actif, comme vous pouvez le voir, il a une couleur nette et l'opacité est de 100 pour cent. D' un autre côté, nous avons inactif pour montrer que ce bouton est désactivé pour l'instant, qui est gris ici. Aussi, nous avons tapé de sorte que lorsque l'utilisateur appuie sur ce bouton, il change à cette couleur spécifique. Comme vous pouvez le voir, nous avons un bleu clair et à la fin, comme vous pouvez le voir, nous avons quatre boutons différents. Nous avons bouton de texte, aussi nous avons le bouton de contour, puis contiennent le bouton, et aussi le bouton bascule. Vous devez les utiliser soigneusement lorsque vous concevez une interface utilisateur car il est si important de connaître les attentes de l'utilisateur et aussi en termes d'expérience utilisateur, il est préférable d'utiliser le bon type de bouton dans votre conception. 52. Sliders: Hé, tout le monde. Dans cette vidéo, nous allons parler de curseurs dans la conception. Les curseurs permettent aux utilisateurs d'effectuer des sélections à partir d'une plage de valeurs. Ils sont idéaux pour ajuster les paramètres, tels que la luminosité, le volume, etc. Les curseurs peuvent avoir des icônes des deux côtés de la barre. Lorsque vous concevez un curseur, assurez-vous de prêter attention aux éléments suivants. Numéro 1, états. Concevez tous les états du curseur, tels que activer, désactiver, taper, survoler, etc., comme les boutons. Numéro 2, réglage. Les curseurs ne doivent être utilisés que pour choisir des sélections à partir d'une plage de valeurs. Numéro 4, rapidité. Les curseurs doivent réagir immédiatement, sorte que les changements doivent être instantanés, et enfin, l'accessibilité. Les curseurs doivent fournir toute la gamme de choix à la disposition de l'utilisateur. Si vous regardez l'image sur le côté droit, vous pouvez voir que nous avons deux curseurs différents. Le premier est curseur continu. Comme vous pouvez le voir dans ce type de curseur, vous pouvez le modifier en continu et sans interruption. D' autre part, dans le second type de curseurs, qui est un curseur discret, vous ne pouvez pas le modifier sans interruption. Il y a quelques points fixes que l'utilisateur peut choisir. 53. Infobulles: Hé, tout le monde. Dans cette vidéo, nous allons parler des info-bulles en conception. Les info-bulles permettent d'afficher des textes informatifs lorsque les utilisateurs survolent, se mettent au point ou touchent un élément. Lorsque vous concevez une info-bulle, assurez-vous de prêter attention aux éléments suivants. Numéro 1, concision. Les infobulles ne doivent afficher qu'un bref texte. N' ajoutez pas d'image ou d'informations détaillées. Numéro 2, appariement. Les infobulles sont toujours appariées à proximité de l'élément auquel elles sont associées. Dernier point, mais non le moindre, transitoire. Les infobulles apparaissent au survol, au focus ou au toucher, et disparaissent après une courte durée. Le temps recommandé est de 1,5 secondes. Comme vous pouvez le voir sur le côté droit, nous avons une info-bulle qui montre du texte informatif. Nous avons un raccourci pour gras, et aussi nous avons des informations supplémentaires ici, enregistrer pour le bouton Confirmer. Assurez-vous de les utiliser correctement. 54. Contrôles de sélection: Salut tout le monde. Dans cette vidéo, nous allons parler des contrôles de sélection. contrôles de sélection permettent aux utilisateurs de choisir facilement entre différentes options. Il est utile pour déclarer des préférences telles que les paramètres. Lorsque vous concevez votre contrôle de sélection, assurez-vous de prêter attention aux points suivants. Numéro 1, familiarité. Les contrôles de sélection sont utilisés dans la conception de l'interface utilisateur depuis longtemps et devraient être utilisés comme prévu. Numéro 2, efficacité. contrôles de sélection permettent aux utilisateurs de comparer facilement deux options ou plus. Last but not least, scannable. Les contrôles de sélection doivent apparaître de manière à ce que les utilisateurs puissent les reconnaître en un coup d'œil. Les éléments sélectionnés doivent être visuellement distinguables des éléments non sélectionnés. Comme vous pouvez le voir sur le côté droit de l'écran, nous avons trois contrôles de sélection différents. Le premier est les commutateurs. Il est utile pour cibler une seule option activée ou désactivée, et il est très populaire. Le suivant est les boutons radio. Ils sont utiles pour sélectionner une seule option dans une liste. Le dernier est la case à cocher, et il est utile pour sélectionner un ou plusieurs éléments d'une liste. Assurez-vous de les utiliser correctement. 55. chips: Hé tout le monde. Dans cette vidéo, nous allons parler de jetons. puces permettent aux utilisateurs de faire des sélections, déclencher des actions, d'entrer des informations, etc. Contrairement aux boutons qui doivent être un appel à l'action cohérent, puces doivent apparaître dynamiquement comme un groupe de plusieurs éléments interactifs. Lorsque vous concevez une puce, assurez-vous de prêter attention aux éléments suivants. Numéro 1, états. Tout comme les boutons et les curseurs, vous devez concevoir tous les états de vos puces, tels que activer, désactiver, taper, survoler, etc. Numéro 2, pertinence. Les puces doivent avoir une relation utile avec le contenu ou la tâche qu'elles représentent. Le dernier, la compacité. Les puces sont des éléments compacts qui représentent des informations distinctes. Si vous regardez l'image sur le côté droit, vous pouvez voir que nous avons différentes puces. Certains d'entre eux ont des icônes ou même une image. D' autre part, certains d'entre eux n'ont qu'un texte. Assurez-vous de les utiliser soigneusement dans votre conception d'interface utilisateur. 56. Cartes: Hé tout le monde. Dans cette vidéo, nous allons parler des cartes dans la conception de l'interface utilisateur. Les cartes sont des conteneurs qui affichent le contenu et les actions sur un seul sujet. Ils doivent être faciles à numériser et des éléments tels que des images ou textes doivent être placés sur eux d'une manière qui indique certainement la hiérarchie. Lorsque vous concevez des cartes, assurez-vous de prêter attention aux éléments suivants. Numéro 1, individuel, une carte ne peut pas être divisée en plusieurs cartes. Vous ne devez pas fusionner une carte avec une autre. Numéro 2, indépendance. Une carte n'a pas besoin de compter sur ses éléments environnants. Il peut être seul. Last but not least, composants. Une carte peut éventuellement avoir des médias riches tels que des images ou des vidéos, des textes, des boutons, des icônes et des vignettes. De nos jours, la plupart des concepteurs utilisent des cartes dans leur conception d'interface utilisateur. Donc, si vous voulez les utiliser également, assurez-vous de les utiliser soigneusement. 57. Dialogs: Salut tout le monde. Dans cette vidéo, nous allons parler de dialogues. boîtes de dialogue informent les utilisateurs sur les informations critiques ou même les tâches. Ils demandent également aux utilisateurs de prendre une décision ou de choisir entre différentes options. Par exemple, les boîtes de dialogue peuvent être utilisées pour demander l'autorisation ou même choisir parmi une gamme de variables différentes sur un curseur et bien plus encore. Lorsque vous concevez des boîtes de dialogue, assurez-vous de prêter attention aux éléments suivants : numéro 1, hiérarchie. Une boîte de dialogue a la hiérarchie la plus élevée et bloque l'utilisation de l'application jusqu'à ce que l'utilisateur effectue une action de dialogue. Numéro 2, visibilité. Une boîte de dialogue doit être facilement reconnaissable. Je recommande d'ajouter une superposition sombre à la vue et de mettre la boîte de dialogue au-dessus de cela. Numéro 3, simple. Un dialogue doit transmettre le message d'une manière compréhensible et claire. Enfin, les boutons. Je recommande d'utiliser des boutons côte à côte sur une boîte de dialogue, comme vous pouvez le voir dans l'image. 58. Listes: Hé, tout le monde. Dans cette vidéo, nous allons parler de listes. Les listes sont un groupe continu d'images ou de textes. Ils sont composés d'éléments, y compris les actions primaires et secondaires, qui sont représentés par des icônes et du texte. Lorsque vous concevez des listes, assurez-vous de prêter attention aux points suivants. Numéro 1, cohérence. Les listes doivent présenter des icônes, balises et des actions dans un format cohérent. Numéro 2, action. Les listes affichent le contenu de manière à ce qu'il soit facile reconnaître un élément spécifique dans la collection et d'agir sur celui-ci. Last but not least, scannable. Les listes doivent être classées de manière logique afin de faciliter la numérisation du contenu. Comme vous pouvez le voir sur le côté droit de l'écran, nous avons différents types de listes. Par exemple, nous avons ici vos contacts. Comme vous pouvez le voir, il est composé d'images et de balises, et il a aussi une icône. 59. Tableaux: Hé, tout le monde. Dans cette vidéo, nous allons parler de tables. Les tables sont des conteneurs qui affichent les différents enregistrements des utilisateurs, tels que les produits, les prix, le statut, les dates, etc. Une table de données contient une ligne d'en-tête haut qui répertorie les noms de colonnes suivis de lignes pour les données. Ils sont généralement défilants et faciles à numériser. Si vous devez remplir certaines données, qui sont triables et suivent le même modèle, vous pouvez utiliser des tables. Lorsque vous concevez des tables, assurez-vous de prêter attention aux éléments suivants. Numéro 1, extensible. Les lignes d'une table peuvent être extensibles afin de permettre à l'utilisateur d'évaluer des informations supplémentaires sans perdre son contexte. Numéro 2, pagination. pagination fonctionne en présentant l'ensemble des nombres dans une vue avec la possibilité de naviguer vers un autre ensemble. Enfin, les en-têtes fixes. La correction de l'en-tête de ligne pendant qu'un utilisateur fait défiler une table aide l'utilisateur à connaître le nom de la colonne. 60. Navigation: Hé tout le monde. Dans cette vidéo, nous allons parler de navigation. navigation est l'acte de se déplacer entre les écrans d'une application pour accomplir des tâches. Par exemple, vous pouvez naviguer de la page Explorer d'une application à la page Profil. Il existe différents types de navigation. Numéro 1, latéral, il se réfère au déplacement entre les écrans au même niveau de hiérarchie. Le composant de navigation principal des applications doit fournir un accès à toutes les destinations au niveau supérieur de sa hiérarchie. Numéro 2, en avant, il se réfère au déplacement entre les écrans à des niveaux consécutifs de hiérarchie. Last but not least, inverse, il fait référence au déplacement vers l'arrière à travers les écrans soit hiérarchique au sein d'une application, soit chronologiquement au sein d'une application ou entre différentes applications. 61. Menus: Salut tout le monde. Dans cette vidéo, nous allons parler de Menus dans la conception de l'interface utilisateur. Un menu affiche une liste de choix sur une surface provisoire. Il apparaît lorsque les utilisateurs interagissent avec un bouton, action ou d'autres types de contrôles. menus permettent aux utilisateurs de faire une sélection parmi plusieurs options. Contrairement aux contrôles de sélection, les menus sont moins remarquables et prennent moins d'espace. Lorsque vous concevez des menus, assurez-vous de prêter attention aux points suivants. Numéro 1, scannable ; options de menu devraient être faciles à numériser. Numéro 2, rapide ; le menu doit être facile à ouvrir, fermer et à interagir avec. Last but not least, placement ; Les menus apparaissent devant tous les autres éléments de l'interface utilisateur. 62. graphiques: Bonjour tout le monde. Dans cette vidéo, nous allons parler de graphiques. graphiques aident les utilisateurs à comparer les valeurs de manière visualisée. Lorsqu' il s'agit de comparer de nombreuses valeurs, il est beaucoup plus facile de regarder des graphiques plutôt que des nombres dans une grille. Lorsque vous concevez des graphiques, assurez-vous de prêter attention aux éléments suivants. Numéro 1, visibilité. La visibilité d'un graphique est si importante parce que parfois vous avez un graphique avec de très petits détails. Numéro 2, cohérence. Placez vos graphiques sur une carte afin de garder votre design propre et cohérent. Enfin, les marges. Assurez-vous qu'il y a suffisamment d'espace entre vos graphiques et les autres éléments. Plus tard dans ce cours, vous apprendrez à créer des graphiques et à les utiliser dans vos projets. 63. Steppers: Salut tout le monde. Dans cette vidéo, nous allons parler de steppers. Les pas à pas affichent la progression à travers une séquence d'étapes logiques et numérotées. Parfois, vous pouvez les utiliser pour la navigation. pas à pas peuvent afficher un message de rétroaction temporaire après l'enregistrement d'une étape. L' utilisation de steppers pourrait aider les utilisateurs à éviter de perdre leur attention, lorsqu'ils ont besoin de remplir des formulaires ou de prendre des mesures. Lorsque vous concevez des steppers, assurez-vous de prêter attention aux choses suivantes. Numéro 1, sections. N' incorporez pas de steppers dans d'autres steppers ou n'utilisez pas plusieurs steppers sur une seule page. Numéro 2, types. Généralement, il existe deux types d'étapes : les étapes modifiables et les étapes non modifiables. Nous avons des steppers horizontaux et des steppers verticaux. Enfin, retour d'information. Vous pouvez éventuellement concevoir des commentaires transitoires pour afficher la progression aux utilisateurs. Vous ne devez utiliser la rétroaction que lorsqu'il y a une latence de ligne entre les étapes. 64. Snackbars: Salut tout le monde. Dans cette vidéo, nous allons parler de snackbars. snackbars fournissent des commentaires concis sur une opération via un message en bas de l'écran. Ils doivent contenir une seule ligne de texte directement liée à l'opération effectuée. Ils peuvent également contenir un bouton. Lorsque vous concevez des snackbars, assurez-vous de prêter attention aux points suivants. Numéro 1, ça devrait être bref. snackbars ne doivent afficher que des informations brèves sur une opération et non des informations détaillées. Numéro 2, transitoire. Les Snackbars quittent automatiquement l'écran afin qu'ils disparaissent rapidement. Enfin, la hiérarchie. Si l'action est suffisamment importante pour bloquer l'utilisation de l'application, vous pouvez utiliser des dialogues à la place des snackbars. Les snackbars n'utilisent qu'un seul bouton si c'est nécessaire et pas plus. Comme vous pouvez le voir sur le côté droit de l'écran, nous avons deux exemples différents. Le premier groupe de snackbars est conçu parfaitement parce qu'il n'a pas plus d'un bouton et les couleurs qui ont été utilisées sont géniales. Cependant, d'autre part, le deuxième groupe de nos snackbars a deux boutons, ce qui n'est pas idéal pour les snackbars. En outre, il a utilisé une icône en plus du texte. 65. Qu'est-ce que Wireframing ?: Salut, tout le monde. Dans cette vidéo, nous allons parler de filature. filage est un moyen de concevoir une application ou des services de site Web au niveau structurel. Un filaire est généralement utilisé pour mettre en page le contenu et les fonctionnalités d'une page qui tiennent compte des besoins et de l'expérience des utilisateurs. Nous pouvons envisager de filer un squelette graphique. À l'instar du plan de construction d'une voiture, le filaire détermine les détails de l'ensemble du projet à l'étape initiale comme description du projet. La plupart des débutants pensent que le filage et le prototypage sont en quelque sorte les mêmes, cependant, ils ne le sont pas. Un filaire est une conception à faible fidélité, sorte qu'il n'illustre pas l'apparence finale de l'interface utilisateur. D' un autre côté, un prototype est un design de haute fidélité et il est dynamique et interactif. prototypage ressemble presque au produit final. 66. Flux utilisateur: Salut tout le monde. Dans cette vidéo, nous allons parler du flux utilisateur. Le flux utilisateur est un chemin emprunté par un utilisateur prototypique sur une application ou un site Web pour effectuer une tâche. Le flux utilisateur les dirige depuis leur point d'entrée jusqu'à un ensemble de phases vers un résultat réussi et une action finale, comme l'envoi d'un message ou l'achat d'un article. Permettez-moi de vous donner un exemple de flux utilisateur très simplifié pour une application e-commerce. L' utilisateur démarre à partir de la page d'accueil. Depuis la page d'accueil, l'utilisateur clique sur une page « Catégorie ». Ensuite, à partir de la page Catégorie, l'utilisateur clique sur un « Produit ». Ensuite, à partir de la page Produit, l'utilisateur ajoute un article au panier, puis à partir du panier, l'utilisateur récupère. Après cela, à partir de la page de paiement, utilisateur termine le paiement et à la fin, l'utilisateur peut obtenir son reçu. C' est à quoi ressemble un flux utilisateur et il est très important chaque projet ait au moins un flux utilisateur simplifié. 67. Prototypes interactives: Salut, tout le monde. Dans cette vidéo, nous allons parler du prototype interactif. De nos jours, le prototypage joue un rôle de plus en plus important dans le processus de conception. En tant que concepteur UI/UX, vous avez besoin de savoir comment réaliser un prototype de haute fidélité de votre projet de manière à ce qu'il puisse clairement transmettre le message de votre design et aussi l'interaction exacte que vous voulez réaliser. Non seulement le prototypage peut vous aider en tant que concepteur à montrer votre travail, mais il peut également aider les développeurs à savoir comment votre conception doit être convertie en code. Voici quelques outils utiles que vous pouvez utiliser pour le prototypage interactif. Sketch, il peut être utilisé pour le prototypage interactif simple. InVision Studio, il peut être utilisé pour le prototypage interactif moderne et compliqué. Principe, il peut être utilisé pour prototypage interactif moderne et détaillé, et bien plus encore. Par exemple, vous pouvez également utiliser ProTopie pour le prototypage avancé. 68. Outils Wireframe: Salut tout le monde. Dans cette vidéo, je vais parler des outils filaires. Maintenant que vous connaissez l'importance du filage dans la conception UI UX, il est temps de parler des outils qui sont absolument utiles pour préparer votre filaire. Bien que certains concepteurs préfèrent utiliser un logiciel autonome pour le filage, il y a des concepteurs qui préfèrent utiliser des outils Web pour le filage. Quelle que soit la façon dont vous souhaitez choisir, assurez-vous de garder votre filature cohérente. Voici quelques outils utiles que vous pouvez utiliser pour le filage. Numéro 1, MockFlow, vous pouvez utiliser mockflow.com, et il offre une variété de services gratuits et payants. Numéro 2, Figma, vous pouvez utiliser figma.com, et il offre également des services gratuits et payants. Numéro 3, sketch, c'est une application payante, et dernier mais non le moindre, Adobe XD, qui est gratuit, et vous pouvez l'installer sur macOS et Windows. 69. Wireframing dans Figma: Salut, tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons parler de filature dans Figma. Comme je l'ai mentionné précédemment dans les vidéos précédentes, création d'un filaire à faible fidélité est une tâche importante pour un concepteur UX d'interface utilisateur. Dans cette vidéo, je vais vous montrer comment vous pouvez créer votre propre filaire à l'aide d'un kit d'interface filaire préfabriqué par Figma. Tout d'abord, je vais vous demander d' ouvrir cette URL, figma.com/templates/wireframe-kits. Sur cette page, vous pouvez trouver ces kits filaires qui ont été conçus par Figma et si vous faites défiler un peu vers le bas, vous pouvez en obtenir une copie gratuite. Cliquez dessus et vous verrez quelque chose comme ça. Ceci est un kit d'interface filaire pré-fabriqué qui a été conçu par Figma et je vais vous montrer comment vous pouvez l'utiliser. Tout d'abord, comme vous pouvez le voir, vous avez trois pages différentes. commencer, construire le vôtre et l'exemple. Dans la page de démarrage, si je zoome un peu, vous pouvez voir que vous avez quelques informations sur tous ces composants. Par exemple, nous avons des boutons et des cartes, nous avons la navigation, nous avons ici des sections, nous avons des preuves sociales, nous avons des fonctionnalités à gauche, des fonctionnalités à droite, etc. Ensuite, nous avons construit votre propre et des exemples. Ouvrons Build Your Own. Ici vous avez un cadre. Je vais supprimer ces composants et supposons que nous allons créer un filaire pour un site Web. Tout d'abord, nous avons besoin d'une section de héros. Je peux facilement aller à Assets. Ici, j'ai plein de composants. J' ai héros, j'ai pied de page, caractéristiques à droite, caractéristiques à gauche, CTA, etc Commençons par héros et ici j'ai trois options différentes. Je vais commencer par le premier. Glissons et dépose-le ici. Je vais le mettre ici et l'aligner au centre. Parfait. Comme vous pouvez le voir, c'est le centre des héros. Je peux facilement aller à la section Instance de l'inspecteur. Je peux ouvrir ce menu déroulant et à partir d'ici je peux le changer à ce que je veux. Par exemple, je peux le changer en image de côté héros comme ceci. Je préfère celui-ci parce que j'ai aussi une image. Restons avec celui-ci. Ensuite, je vais augmenter la taille de mon cadre. Augmentons un peu pour avoir plus d'espace pour travailler. Parfait. Après cela, je vais ajouter quelques fonctionnalités. Ouvrons Features. Plutôt bien. Je vais utiliser celui-ci. Fantastique. Parce que c'est un filaire à faible fidélité, vous n'avez pas besoin de vous soucier de toutes ces informations, toutes ces couleurs. Gardez-le aussi simple que possible. Ensuite, je vais ajouter quelques messages. Ouvrons la section des messages. De là, je peux utiliser la queue de poste comme ça. Bien sûr, vous pouvez modifier ces balises et tous ces contenus si vous le souhaitez. Après cela, je vais ajouter des preuves sociales telles que le témoignage. Utilisons celui-ci, ça a l'air génial. Après ça, j'ai besoin d'un CTA. Ouvrons le CTA et je vais choisir CTA Center. Plutôt bien. J'ai besoin d'augmenter la hauteur de mon cadre. Laisse-moi le sélectionner. Enfin, je vais ajouter un pied de page parce qu'il est nécessaire d'en avoir un. Utilisons ce pied de page complet. Fantastique. C'est tout. Comme vous pouvez le voir, je n'ai pas ajouté de navigation. Mais il est nécessaire d'en avoir un, alors allons-y et ajoutons une navigation. Je pense que cette navigation est une excellente option comme celle-ci. Fantastique. Maintenant, je dois diminuer ma taille et c'est tout. Maintenant, si je l'ai aperçu, vous pouvez voir que j'ai la navigation. Comme vous pouvez le voir, j'ai un logo, quelques menus en haut puis j'ai un bouton d'inscription. Ici, j'ai ma section héros qui se compose de quelques tags et d'un CTA et aussi d'une image. Ensuite, j'ai ma caractéristique clé comme celle-ci. Après cela, je présente une pose et puis j'ai la preuve sociale. Ça pourrait être des critiques, des témoignages, n'importe quoi. Ensuite, j'ai un autre CTA ici, qui est mon dernier CTA. Après cela, nous avons ajouté un pied de page. Ici, j'ai tous les liens liés à mon site web. Les gars, avez-vous vu à quel point c'est facile de créer votre propre filaire dans Figma ? C' est tout pour cette vidéo. J' espère que vous l'avez apprécié et je vous verrai dans la prochaine vidéo. On se voit alors. 70. Qu'est-ce qu'un style de couleur ?: Salut. Bienvenue dans une autre section de ce cours. Dans cette vidéo, nous allons parler du style des couleurs. C' est quoi un style de couleur ? En fait, chaque marque a un ensemble de couleurs auquel elle adhère. Par exemple, quand vous pensez à Twitter, je suis sûr que vous pensez bleu. Dans cette section, nous allons créer notre propre style de couleur, ou disons notre propre guide de style pour nous aider pendant notre processus de conception. Je te verrai dans la prochaine vidéo. 71. Couleur, accentuée, séduisant de couleurs primables et: Salut, tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons commencer à créer notre guide de style ou notre système de conception, ce qui est très important lorsque vous voulez travailler sur un projet complexe. Au début, il peut sembler qu'il y a beaucoup de travail à faire, cependant, cela en vaut la peine. Tout d'abord, nous avons besoin d'un plan de travail. Comme vous pouvez le voir, j'ai créé un plan de travail MacBook Pro, et je vais changer son nom en couleurs. Joli. Ensuite, continuons et insérons un rectangle comme celui-ci. Je vais augmenter le rayon de coin pour le rendre plus arrondi, zoomer pour le rendre plus petit, la largeur va être de cinq et la hauteur va être de 64 pour l'instant. Je vais changer la couleur à 41, 35 et F3. Plutôt sympa. Laisse-moi le déplacer un peu sur le côté gauche. Ici, je vais insérer un texte, et écrire des couleurs. Je vais utiliser SF Pro Arrondi. Plutôt sympa. Augmentons sa taille à 24 points comme ça et ça va être régulier. Cependant, je vais changer le code couleur en 4A, 4A et 4A. Laissez-moi l'aligner verticalement et je vais le rendre un peu plus petit. Je vais regrouper ça. Fantastique. Maintenant, nous devons créer nos sections parce que dans les couleurs, nous avons différentes sections. Par exemple, nous avons des couleurs primaires, nous avons des couleurs accentuées et nous avons des couleurs sémantiques. Bien sûr, vous pouvez également avoir des couleurs de fond. Cependant, dans ce tutoriel, nous allons créer des couleurs primaires, accent et sémantiques. Maintenant, j'ai besoin d'une ligne comme celle-ci. Je vais tenir Shift et je vais changer la couleur en E4, E4 et E4, comme ceci, alors j'ai besoin d'ajouter un texte. Écrivons les couleurs primaires. Je vais choisir la même couleur que celle que j'ai utilisée pour ce texte. Copiez et collez ce code de couleur de texte. Fantastique. Je vais les aligner à gauche et son rembourrage inférieur sera de huit pixels. Regroupez-les, et je vais l'appeler, Couleurs primaires. Fantastique. C' est plutôt sympa. Ensuite, je dois créer un carré ici et nous allons le faire arrondir. Fantastique. Ensuite, nous devons changer la couleur à 41, 35 et F3. En fait, c'est la couleur que je veux utiliser dans ce tutoriel. Vous pouvez utiliser différentes couleurs pour votre système de conception. Gardez à l'esprit que vous pouvez toujours les changer. Si vous ne savez pas pourquoi et comment je choisis cette couleur, cela dépend simplement de votre projet et il faut du temps pour comprendre comment vous pouvez créer votre palette de couleurs correctement. Mais maintenant, nous voulons simplement nous concentrer sur la création de notre système de conception. Je vais vous montrer comment vous pouvez le faire correctement. Les couleurs n'ont pas d'importance. Son rembourrage supérieur va être de 16 pixels. Je vais dupliquer ça avec un remplissage gauche de 16 pixels. Encore une fois, dupliquez ça. Encore une fois. Nous avons quatre carrés différents. Je vais sélectionner le deuxième, et je vais diminuer son opacité à 75 % comme ça. Le troisième, je vais le changer à 50 pour cent, et le dernier, mettons-le à 25 pour cent. La raison pour laquelle j'ai changé l'opacité est parce que parfois nous avons besoin d'avoir des états différents de chaque couleur. Par exemple, si vous créez un bouton, il peut avoir des états différents, tels que actif, [inaudible] survol, etc. Par exemple, si vous utilisez cette couleur pour l'état actif, vous pouvez utiliser d'autres couleurs, comme celui-ci pour l'état de vol stationnaire. Il est tout à fait nécessaire d'avoir différentes versions de votre couleur. Maintenant, sélectionnons le premier carré. Je vais aller de l'avant et cliquer sur ces quatre points, puis cliquez sur ce bouton plus. Ici, je vais écrire Couleurs/Primaire/Violet 100 pour cent et créer du style. Fantastique. Puis la suivante, Colors Primary Purple 75 pour cent. Je vais le copier. Ensuite, la prochaine, elle sera de 50 % et la dernière sera de 25 %. Fantastique. Maintenant, sélectionnons-les tous. Regroupez-les, et ce sera des couleurs primaires. Maintenez la touche Maj enfoncée et cliquez sur ce titre Couleurs primaires. Encore une fois, regroupez-les et je vais le nommer, Couleurs primaires. Alors j'ai besoin de le dupliquer comme ça. Changons ce nom en Couleurs d'accentuation. Je pense que c'est une bonne idée de diminuer un peu la taille de la police. Par exemple, mettons-le à 20. Celle-ci aussi. Maintenant, c'est mieux. Maintenant, sélectionnons le premier. abord, nous devons le détacher de son style, et la même chose pour les autres. Maintenant, sélectionnons le premier, puis changez le code couleur en BE52F et 2. Plutôt bien. Copions ceci et je vais le coller pour les autres. Fantastique. Maintenant, nous devons également créer le style de couleur pour ces coins. Répétons la procédure. Ici, nous devons écrire Colors, Accent Slash, c'est vrai, Purple 1. Celle-ci aussi. Couleurs, Accent, Violet 2. Copions ça. Ici, il va être Purple 3. Le dernier devrait être Purple 4. Vous pouvez les nommer comme vous le souhaitez, cependant, gardez-le aussi organisé que possible. Ensuite, je vais renommer ce groupe en Accent Colors. Fantastique, et aussi celui-ci. Encore une fois les dupliquer. Ici, ça va être des couleurs sémantiques. D' abord, nous devons le détacher de son style. Nous n'avons pas besoin de cette dernière car nous n'aurons que trois versions différentes. Choisissons le premier. Je vais changer le code couleur en FFCF et 5C. Je vais copier ceci et le coller pour les autres. D' accord. Maintenant, allons de l'avant et créons nos signes de couleur. Écrivons Colors, Sémantique, et écrivons un orange. Je vais copier ça. Le prochain sera Orange 2, et le dernier, Orange 3. Super. Nous avons besoin d'une couleur sémantique de plus, donc je vais les dupliquer comme ça. Encore une fois, nous devons les détacher de leur style comme ça. Choisissons le premier. Je vais régler le code couleur sur 00, 84 et F4. Copions ceci et collez-le pour les autres. Fantastique. Maintenant, la dernière étape est de créer notre signe de couleurs. Écrivons Couleurs, Sémantique, Bleu 1, puis Bleu 2, et enfin Bleu 3. Nous avons presque fini. Cependant, je vais vous montrer quelque chose et nous devons personnaliser un peu nos signes de couleur. Maintenant, que nous avons créé ces styles de couleurs avec une quantité différente d'opacité, nous aurons quelques problèmes si nous décidons d'utiliser ces couleurs sur un fond coloré. Maintenant que nous les utilisons sur un fond blanc, nous ne pouvons pas comprendre la différence. Cependant, je vais te montrer quelque chose. Créons un rectangle ici. Je vais le déplacer juste en dessous de notre dernier groupe. Si je le déplace, vous pouvez voir qu'en fait, nos couleurs changent parce que nous changeons leur opacité. Mais nous devons faire une étape de plus, bien sûr, pour les premières couleurs, rien ne change parce que l'opacité de cette première couche est de 100 pour cent. Comment pouvons-nous réparer ça ? La meilleure façon est de choisir chacun. Par exemple, celui-ci, puis allez dans Style de couleur, puis Modifier le style, et choisissez la pipette et cliquez sur cette couleur, et c'est fait. Faisons la même chose pour tous. On y va. C' est une excellente technique pour créer vos styles de couleurs car parfois vous n'avez pas tout le code de couleurs. Dans ce cas, nous pouvons utiliser cette technique, puis vous pouvez changer les couleurs. Je vais faire la même chose pour tous. D' accord. C'est fait. Maintenant, si je crée le même rectangle une fois de plus, comme ça, et que je vais le mettre juste en dessous de notre premier groupe, vous pouvez voir que nos couleurs ne changent pas. A partir de maintenant, même si vous utilisez un fond coloré sur votre design, vos couleurs restent intactes. Très bien, les gars, c'est tout pour cette vidéo. J' espère que vous l'avez apprécié et je vous verrai dans la prochaine vidéo. On se voit alors. 72. Couleurs et dégradés gris et dégradés gris: Salut tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons continuer à créer notre guide de style ou disons notre système de conception ensemble. Dans cette vidéo, nous devons ajouter deux sections supplémentaires à notre système de conception qui sont les couleurs de fond gris et les couleurs dégradées. Pour ce faire, nous devons d'abord augmenter la taille de notre plan de travail comme ceci. Je vais copier et coller une de ces sections. Plutôt sympa. Appelons ça les couleurs de fond gris. Joli. Je n'ai pas besoin de cette ligne bleue. Maintenant, laissez-moi les détacher de leur style comme ça. Plutôt sympa. Je vais dupliquer le dernier parce que j'ai besoin d'une couleur de plus. Fantastique. Maintenant, sélectionnons le premier et je vais changer le code de couleur à 28 , 37 et 4B comme ceci. Laissez-moi créer le style de couleur. Je vais écrire les couleurs grises 1. Pour le second, je vais copier ce code couleur. Collons-le ici. Je vais diminuer l'opacité à 75 %. Après cela, choisissons la pipette et cliquez sur cette couleur. Afin d'obtenir la même couleur avec une opacité de 100 pour cent. Ensuite, nous allons créer les couleurs de style de couleur gris 2. Je vais copier ceci et nous devons copier le code couleur une fois de plus. Collons-le ici avec une opacité de 50 pour cent. Le dernier avec 25 % d'opacité comme ça et laissez-moi les changer. Le dernier une fois de plus à la pipette et sélectionnez la même couleur. Fantastique. Maintenant, nous allons créer la troisième couleur style couleurs gris 3. Copions ça. Le dernier, couleurs gris et quatre fantastiques. Maintenant, je vais renommer le groupe en couleurs de fond gris. Permettez-moi de copier ceci et de le coller pour d'autres groupes aussi, comme ceci. Plutôt bien. Encore une fois, dupliquez-le. Maintenant, je vais le renommer en dégradé de couleurs. Supprimons les deux dernières couleurs parce que je n'ai besoin que de deux couleurs ici. Je vais sélectionner le premier, détacher du style, le second aussi. Pour le premier, je vais changer la couleur de solide à linéaire. Sélectionnez la première couleur. Je vais changer le code couleur à 41, 35 et F3. Le second, augmentons l'opacité à 100 pour cent. Je vais le changer en 71, 68 et F6. Alors je vais changer la direction pour obtenir quelque chose comme ça. Plutôt bien. Ensuite, créons notre style de couleur. Je vais écrire des couleurs, dégradé 1. Pour le second, changons-le en linéaire aussi. La première couleur va être BE52 et F2 et la deuxième couleur dont nous avons besoin pour augmenter l'opacité à 100 pour cent. Je vais changer le code de couleur en DB85 et F5, comme ceci. Laissez-moi changer de direction. Fantastique. Nous devons créer notre dégradé de couleurs de style de couleur 2. Last but not least, renommons notre groupe en dégradé de couleurs. Pour d'autres groupes aussi. Fantastique. Les gars, essayons nos gradients. Je vais créer un rectangle ici et appliquons nos dégradés. Par exemple, celui-ci. C' est plutôt fantastique. On peut facilement le changer. En outre, nous pouvons choisir la couleur de fond. Plutôt génial, n'est-ce pas ? Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 73. Bordures et ombres: Salut tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons ajouter des bordures et des ombres à notre guide de style. Sans plus tarder, commençons. Tout d'abord, nous devons dupliquer notre tableau d'art comme ça, et je vais le renommer en frontières, et changeons ce titre en frontières aussi. Fantastique. Je vais les enlever tous sauf le premier comme ça, puis laissez-moi zoomer. Plutôt bien. Je vais changer ces titres en frontières. Maintenant, détachons ces couleurs de leur style une par une comme ça. Ensuite, j'ai besoin d'ajouter un trait parce que pour les frontières, nous devons avoir un accident vasculaire cérébral. Cliquez sur cette icône plus comme ça. Alors je vais enlever le remplissage, plutôt bon. Permettez-moi de changer le code de couleur en BE52 et F2 comme ceci et le second aussi, laissez-moi supprimer le remplissage, ajouter un trait, et je vais changer le code de couleur en DBA5 et F5. La prochaine, tu vas faire la même chose. Le code couleur va être EEDFF et deux. Nous n'avons pas besoin du dernier, gardons les choses simples pour que ces trois suffisent. Maintenant, il est temps de créer le style de bordure. Choisissons le premier, et je vais cliquer sur ces quatre points. Tout comme créer des styles de couleurs, ici je vais écrire Colors/Border/1. Copions ça. Le prochain sera Couleurs/Border/2, et le dernier sera Couleurs/Border/3 comme ça. Créons une nouvelle forme. Plutôt bien. Je vais appliquer le style des bordures à cela. Je peux ajouter un trait et à partir des styles de couleur, je peux choisir la couleur de bordure comme celui-ci. Retirons le remplissage. Fantastique. Je peux facilement le changer pour le second, et pour le troisième. Nous devons ajouter des ombres à notre guide de style. Je pense que c'est une bonne idée de les ajouter ici dans ce tableau d'art. Je vais aller de l'avant et changer ce titre en frontières et ombres. Changons aussi le nom du tableau d'art, les frontières et les ombres. Fantastique. Ensuite, nous devons renommer ce groupe en frontières, ces groupes aussi. Laissez-moi le dupliquer, et écrivons des ombres. Vous allez avoir quatre types d'ombres différentes. Je vais dupliquer le dernier comme ça. Fantastique. Sélectionnons le premier, nous devons les détacher de leur style. Plutôt bien. Sélectionnons le premier et ici je vais ajouter des effets. Plutôt bien. Au lieu de tracé, ajoutons une couleur unie. Je vais enlever le coup et utiliser le remplissage. Allons au paramètre avancé ici, et je vais changer le montant de flou à 10 et le montant X à un et Y à cinq. Changons l'opacité à 20 pour cent aussi. Après cela, nous pouvons créer un style d'effet. Tout comme les styles de couleur, vous pouvez cliquer sur cette icône plus ici, et ici nous allons écrire Shadows/1 et le second aussi. Ajoutons du remplissage et aussi un effet, puis je vais modifier le paramètre. Réglons le montant de flou à 20 et le montant de X à cinq et le montant de Y à 10 comme ceci. Bien sûr, diminuons l'opacité à 20 pour cent. Encore une fois, nous devons créer notre style d'effets. Je vais écrire Shadows/2. Le suivant, le même processus. Je vais ajouter des effets à ça. Le flou sera de 20, le X sera de deux, et le Y sera de 10. Diminons l'opacité à 10 pour cent, et je vais créer un nouveau style d'effet. Écrivons Shadows/3. Le dernier, une fois de plus ajouter remplissage à ceux-ci et aussi un effet. Je vais régler le flou à 14, le X à 1 et le Y à 5. Je vais régler l'opacité à 10 pour cent. Fantastique. Créons nos effets de style Shadows/4. Plutôt génial. Ensuite, renommons les groupes en ombres pour tous les groupes, rappelez-vous cela, pour garder nos couches aussi organisées que possible. Je vais vous montrer comment vous pouvez utiliser ça. Allons de l'avant et créons une forme, par exemple un carré, et puis je vais changer la couleur pour quelque chose comme ça. Si je clique sur ces quatre points dans la section des effets, vous pouvez voir que j'ai quatre ombres différentes. Je peux cliquer sur un, et on y va. Je peux facilement le changer pour tout ce que je veux. C' est plutôt cool, n'est-ce pas ? Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu, et je vous verrai dans la prochaine vidéo. 74. Introduction au style typographie: Salut. Dans cette vidéo, nous allons parler du style de texte, tout comme ce que nous avons fait avec nos couleurs, nous allons maintenant faire avec notre typographie, donc dans cette section, nous allons créer notre propre textile et nous devons définir différents tailles, poids différents, et aussi différentes couleurs à notre style typographique afin de l'utiliser dans notre projet. Je te verrai dans la prochaine vidéo. 75. Guide de typographie - Partie 1: Salut tout le monde, et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons ajouter le style typographique à notre guide de style. Sans plus tarder, commençons à dupliquer ce plan de travail, et je vais l'appeler Typographie. Ensuite, laissez-moi zoomer un peu et changeons ce titre en Typographie aussi. Fantastique. Après cela, je vais enlever ces ombres et ces frontières aussi. Changeons le titre en H1, alors je vais augmenter la largeur de cette ligne à 1,120, comme ceci. Après cela, je vais dupliquer ce texte comme ça. Plutôt bien. Changons la taille de la police à 34 points et je vais la rendre audacieuse. Fantastique. Assurez-vous qu'il est aligné sur le côté gauche comme ceci. Je vais changer le texte en exemple de texte. Plutôt génial. Ensuite, nous devons le dupliquer. Je vais le déplacer au centre de ce plan de travail. Allons l'aligner au centre. Encore une fois, dupliquez-le. Fantastique. Cependant, maintenant, sélectionnons ce milieu. Nous devons l'aligner au centre. Le dernier, nous devons l'aligner sur le côté droit, et maintenant il est temps de créer notre style de texte. Sélectionnez le premier et cliquez sur ces quatre points. Cliquez sur cette icône. Ici, je vais écrire H1/Gauche. Fantastique. Le second sera H2/Center, et le dernier sera H1/Right. Fantastique. Maintenant, renommons ce groupe en H1, et celui-ci aussi. Permettez-moi de renommer ce groupe en typographie. Maintenant, dupliquons ce groupe H1 comme ça, et je vais renommer le titre H1 en H2. Maintenant, détachons ces textes de son style comme celui-ci, celui-ci aussi, et celui-ci aussi. Maintenant, il est temps de les sélectionner tous. Je vais changer la taille de la police à 26 points. Fantastique. Ensuite, nous devons créer notre style de texte. Comme vous pouvez le voir, j'ai fait une erreur pour celui-ci, j'ai écrit H2. Allons-y et changeons-le parce que nous devons écrire H1 pour cela. Maintenant, sélectionnons celui-ci et je vais créer un nouveau style de texte. Écrivons H2/Gauche. Je vais copier ça. Celui-ci va être H2/Center et le dernier sera H2/Right. Fantastique. Maintenant, renommons notre groupe en H2 aussi, alors nous devons dupliquer ça comme ça. Changons le titre en H3. Je vais détacher ces textes de leur style un par un. Maintenant, sélectionnons-les tous et je vais changer la taille de la police à 16 points. Fantastique. Cependant, maintenant je ne vais pas créer les styles de texte parce que je vais gagner votre temps. Je le ferai par moi-même et vous pouvez télécharger le guide de style final à partir de la conférence de ressources de la section. Renommons ce groupe H3, et une fois de plus dupliquons. Ça va être H4. Sélectionnez tous ces textes et modifions la taille de la police à 12 points. Fantastique, et c'est tout pour cette vidéo. Dans la vidéo suivante, nous allons ajouter notre corps texte ici ensemble. On se voit alors. 76. Guide de typographie - Partie 2: Bonjour à tous et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons ajouter notre corps texte à notre style typographique. Sans plus tarder, commençons par dupliquer le dernier groupe, je vais le mettre ici, et écrivons corps 1, assez bien. Je vais sélectionner tous ces textes et nous allons changer la taille de la police à 14 points, fantastique. Maintenant, sélectionnons le premier, et je vais créer un style de texte. Écrivons corps 1 gauche, et le suivant sera corps 1 centre, et le dernier sera corps 1 droit, assez bon. Maintenant, renommons nos groupes. Ce sera le corps 1, celui-ci aussi. Ensuite, dupliquons et changeons le titre en corps 2. Nous devons détacher ces calques de texte de leur style. Maintenant, sélectionnons-les tous et je vais changer la taille de la police à 13 points. Cependant, je ne vais pas créer les styles de texte parce que je vais le faire pour vous et vous pouvez télécharger le guide de style final à partir de la conférence sur les ressources de cette section. Encore une fois, renommons ces groupes : corps 2, corps 2 aussi. Je vais le dupliquer pour la dernière fois. Renommons le corps 3 et je vais sélectionner tous ces textes. Changons la taille de la police à 11 points. Bon gars, nous avons créé avec succès notre guide de style topographique ensemble, alors maintenant allons de l'avant et vérifions. Je vais créer un texte. Écrivons le titre. A partir des styles de texte, je peux choisir ce que je veux. Pour l'instant, nous n'avons que trois options car nous n'avons pas créé les styles de texte pour tous ces textes. Toutefois, si vous téléchargez le guide de style final, vous avez accès à tous ces styles de texte. Pour l'instant, choisissons H1 gauche, et nous y allons. Si j'essaie juste d'éditer ce H1 gauche, alors allons-y et modifions ceci, par exemple, de gras à régulier, vous pouvez voir que mon titre a aussi changé. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 77. Conception d'une application de finance moderne: Bonjour à tous et bienvenue à une autre section de ce cours. Dans cette section, nous allons concevoir une application mobile complète appelée Money. C' est une application financière et nous allons concevoir 24 écrans différents ensemble étape par étape. Nous allons concevoir tous les écrans nécessaires dont cette application a besoin. Nous commençons par concevoir l'écran de lancement, puis nous allons concevoir une page de bienvenue. En outre, nous avons deux pages de signature différentes, puis nous allons concevoir trois pages d'inscription différentes. Comme vous pouvez le voir, avec différents états. Après cela, nous allons concevoir notre page de vérification OTP et comme vous pouvez le voir, nous avons trois écrans différents pour ceux-ci. Le premier écran permet d'obtenir le numéro de l'utilisateur, le second est pour quand l'utilisateur entre le code, et le dernier écran est lorsque le bouton est actif. Après cela, nous allons concevoir le formulaire de profil. Comme vous pouvez le voir ici, nous avons deux écrans différents : profil et profil terminé. Ensuite, nous commencerons à concevoir notre page d'accueil avec ces cartes et tous ces composants. Ensuite, nous allons concevoir notre menu hamburger, puis nous allons concevoir notre page de cartes. Nous aurons deux cartes différentes : la carte primaire et la carte secondaire. Ici, nous avons les transactions. Après cela, nous avons la page des transactions et aussi le détail des transactions. Fondamentalement, lorsque l'utilisateur clique sur ces cartes, il glissera et nous verrons cet écran avec tous ces détails. Après cela, nous allons concevoir l'écran de transfert avec ces pavé numérique et tous ces éléments. Ensuite, nous avons la page de confirmation ici. Après cela, nous irons pour la conception de notre page de notification avec des données réelles. Ensuite, nous allons concevoir la page de profil ici. Enfin, nous concevrons trois pages d'intégration différentes ensemble. Afin de commencer à concevoir ce projet, vous devez d'abord télécharger le fichier d'actifs que j'ai déjà préparé pour vous à partir de la section ressources de la conférence sur les actifs. D' accord, les gars. C'est tout pour cette vidéo. Je te verrai dans la prochaine vidéo. 78. Écran de lancement: Salut, tout le monde et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons commencer à concevoir notre application financière, qui s'appelle Money. C' est intéressant, n'est-ce pas ? Donc, sans plus tarder, commençons par insérer un nouveau tableau d'art dans notre toile. Donc, je vais appuyer sur A sur mon clavier et à partir de la section Téléphone, je vais choisir iPhone 11 Pro ou X. Puis laissez-moi le renommer en Launch Screen parce que c'est notre première page. Après cela, nous allons simplement placer le logo de cette application que j'ai déjà préparé pour vous. Donc, si vous avez déjà téléchargé le fichier de ressources à partir de la conférence sur les ressources, vous pouvez voir que vous avez quatre dossiers différents : logo, illustrations, icônes et interface utilisateur Apple iOS. Si vous êtes familier avec le Sketch, vous savez probablement que vous avez accès à Apple iOS UI Kit afin d'utiliser tous les éléments qu'Apple utilise sous le système d'exploitation. Cependant, malheureusement, il n'y a pas de kit d'interface utilisateur Apple iOS à jour pour Figma. Mais il n'y a rien à craindre parce que j'ai déjà préparé pour vous toutes les choses nécessaires dont vous pourriez avoir besoin pendant ce cours. Comme vous pouvez le voir, nous avons des barres, indicateur d' accueil, et la barre d'état, et c'est tout ce dont nous avons besoin. Mais pour cette vidéo, nous devons ouvrir le dossier du logo. Ici vous pouvez voir que nous avons trois fichiers différents. Nous avons le logo Colorful-Logo, Logo-White et Mastercard Logo. Maintenant, je vais choisir Colorful-Logo et nous allons le glisser et le déposer dans mon tableau d'art comme ça. Plutôt sympa, n'est-ce pas ? Ensuite, la seule chose que nous devons faire est de l'aligner à la fois horizontalement et verticalement au centre comme ceci. C' est tout pour notre écran de lancement. C' était si simple, n'est-ce pas ? Très bien, les gars, merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 79. Page de connexion et de bienvenue: Salut tout le monde et bienvenue à une autre vidéo de cette section. Dans cette vidéo, nous allons concevoir ensemble nos pages de connexion et aussi notre page d'accueil. Sans plus tarder, commençons par dupliquer ce plan de travail, donc je vais appuyer sur « Commande D » ou « Contrôle D ». Alors retirons ce logo, nous n'en avons plus besoin. Après cela, je vais aller de l'avant et renommer mon plan de travail. Écrivons la connexion. Fantastique. En fait, dans la page de connexion, nous allons mettre le logo en haut et aussi nous avons besoin d' un texte indiquant « Bienvenue ». Ensuite, nous avons le titre de connexion, quelques champs de texte, et après cela, le bouton de connexion juste en bas. Tout d'abord, commençons par insérer un cercle, donc je vais maintenir « Shift » et glisser-déposer, et je vais définir la largeur et la hauteur à 352. Ensuite, je vais y ajouter un gradient linéaire comme ça. Sélectionnez la première couleur et je vais définir le code couleur à 5264F9, comme ceci. Choisissons le second, et celui-ci sera 3AF9EF, comme ceci. Cependant, n'oubliez pas d'augmenter l'opacité comme celle-ci, à 100 pour cent. Après cela, je vais changer la direction, donc je vais sélectionner la première couleur en haut. Changeons la direction par ces contrôleurs de poignée comme ceci. Fantastique. Maintenant, je vais bouger un peu ce cercle pour trouver un bon endroit pour ça. Cependant, parce que j'ai déjà calculé l'emplacement, je peux facilement définir les X et Y ici. Réglons le X à moins 74, comme ça, et le Y à moins 84. Plutôt bien. D'accord. Maintenant, nous devons dupliquer ce cercle comme ça. Je vais le déplacer un peu, et mettons cette couche juste en dessous de notre premier cercle. Ensuite, nous devons changer le dégradé, donc je vais sélectionner la première couleur. Réglons le code couleur sur 2F56F8, comme ceci. Sélectionnez la deuxième couleur. Celui-ci va être C630F8, comme ça. Cependant, cette fois, je vais diminuer l'opacité à zéro, comme ceci. Je pense que c'est une bonne idée de changer la place de nos couleurs comme ça. Fantastique. Changeons un peu la direction. Plutôt bien. Ensuite, nous allons le dupliquer une fois de plus, et nous devons le déplacer juste en dessous de notre deuxième cercle. Déplaçons le sur le côté droit. Encore une fois, nous devons changer nos couleurs, alors sélectionnons la première couleur, et je vais changer le code en C72FF8. Maintenant, je vais changer de direction. Encore une fois, changeons la place de nos couleurs. Fantastique. Maintenant, allons de l'avant et définissons les X et Y pour chaque cercle. Je vais sélectionner le deuxième, et réglons le X à moins 43 et le Y à moins 56. Super. Le troisième cercle, mettons le X à moins 12 et le Y à moins 106, comme ceci. Plutôt bien. N'est-ce pas ? Cependant, maintenant je vais aller de l'avant et sélectionner le premier cercle. Changeons un peu la direction pour le rendre un peu plus léger. Je pense que maintenant c'est parfait. Maintenant, il est temps d'ajouter notre logo à cet en-tête. Allons de l'avant et ouvrons le fichier Assets que vous avez téléchargé à partir de la conférence sur les actifs de cette section. Je vais placer une image. Ici, nous avons quatre dossiers. le dossier Logo, je vais aller de l'avant et importer le logo-blanc et juste cliquer une fois ici. Comme vous pouvez le voir, il s'agit d'un logo SVG, donc si vous décidez de l'agrandir comme ceci, vous pouvez voir qu'il va changer. Tout d'abord, vous devez sélectionner l'outil Échelle, comme ceci. Vous pouvez également appuyer sur « K » sur votre clavier pour le sélectionner. Après cela, si je maintiens « Maj » sur mon clavier et essaye de le mettre à l'échelle, vous pouvez voir que rien ne change sauf la dimension et la taille. La taille est parfaite, elle mesure 60 par 59. Je vais le garder comme ça. Laisse-moi zoomer un peu. Le rembourrage supérieur va être de 64 pixels. Si vous voulez voir les palettes, vous pouvez facilement maintenir la touche Option ou Alt sur votre clavier. On y va, tu as tous les paddings. Comme vous pouvez le voir, le rembourrage supérieur de ce logo est 80, donc je vais en faire 64, comme ça, et le rembourrage gauche va être 52. Plutôt bien. Après cela, je vais insérer un texte. Appuyez sur « T » et cliquez ici, et je vais changer la police à Montserrat comme ça. Écrivons, « Bienvenue » comme ça, et je vais changer la taille de la police à 28 points. Plutôt bien. Changons la couleur en blanc et assurez-vous que ce calque de texte est aligné avec votre logo. Évidemment, son rembourrage gauche va être de 52 pixels, comme notre logo. Le rembourrage supérieur va être de 16 pixels. Plutôt bien. D'accord, on en a fini avec l'en-tête. Maintenant, sélectionnons toutes nos formes, ces trois cercles. Je vais les regrouper et appelons-les Shapes, fantastiques, pour garder nos couches organisées. Maintenant, il est temps d'ajouter notre titre. Nous allons donc insérer un nouveau texte ici. Je vais écrire la connexion avec la même police. Cependant, cette fois, je vais changer le chemin en gras et la taille de la police va être de 28 points et aussi nous devons changer la couleur. Comme vous pouvez le voir, c'est noir. Vous pouvez, bien sûr, l'utiliser. Cependant, il est recommandé d'utiliser quelque chose plus léger lorsque vous voulez utiliser du noir sur le fond blanc, il est préférable de ne pas utiliser un noir pur. Je vais changer le code couleur en 3A3A3A. Comme vous pouvez le voir, nous deviendrons gris foncé. Fantastique. Ensuite, je vais vérifier le rembourrage, le rembourrage gauche va être de 30 pixels, alors vérifions. Plutôt bien. Le remplissage supérieur de ce groupe sera de 39 pixels. Plutôt génial. D'accord. Maintenant, il est temps de créer nos champs de texte. Donc, pour créer un champ de texte, nous avons besoin d'une ligne, donc je vais sélectionner une ligne parmi ces objets. Maintenez la touche « Maj » et glisser-déposer. Plutôt bien. Changons la largeur à 315 comme ça. Alors je vais l'aligner au centre. Comme vous pouvez le voir, nous obtiendrons un rembourrage de 30 pixels gauche et droit, qui est ce que nous voulions. Ensuite, je vais changer la couleur à 2743FD, fantastique. Je vais garder l'épaisseur à une. Laisse-moi le déplacer un peu. Ensuite, nous avons besoin de deux calques de texte. Donc, le premier va être l'adresse e-mail et nous allons changer la police en texte SF Pro comme ceci et aussi le poids va être régulier et la taille de la police devrait être de 14 points comme ceci. Je vais changer le remplissage pour B9B9B9, fantastique, pour voir ce gris clair. Laisse-moi zoomer. Je vais l'aligner avec ma ligne et son rembourrage gauche sera également de 30 pixels. Alors nous allons le dupliquer. Je vais le déplacer vers le bas. Ici, nous allons écrire notre email. Donc, je vais écrire design@test.com. Changons la couleur en 3A3A3A, qui est la même couleur que celle que nous avons utilisée pour signer le titre. Très bien, son rembourrage inférieur sera de huit pixels, comme vous pouvez le voir, et le titre supérieur sera de 16 pixels comme ça. Alors maintenant tout est parfait. Ensuite, la prochaine chose que nous devons ajouter est une icône de coche. Alors allons de l'avant et insérons une autre image de notre fichier d'actifs et d'icônes. Ici, nous avons beaucoup d'icônes. Je vais choisir tick, et nous allons cliquer ici. On y va. Regrouperons maintenant tous nos éléments ensemble. Après cela, sélectionnez cette icône de coche, et nous allons l'aligner. Laissez-moi zoomer, son rembourrage inférieur va être de 17 pixels. Comme vous pouvez le voir, nous ne pouvons pas obtenir le bon rembourrage ici parce que nous utilisons un groupe ici. Donc, si vous utilisiez un cadre au lieu d'un groupe, nous pourrions facilement obtenir le bon rembourrage. En ce moment, le seul bon rembourrage que nous obtenons est jusqu'au bord de cet écran. Cependant, nous devons obtenir le bon rembourrage jusqu'à la fin de cette ligne. Pour que cela se produise, sélectionnons notre groupe. Je vais le renommer en adresse e-mail. Après cela, nous allons faire un clic droit sur cela et vous pouvez choisir Sélection de cadres. Ensuite, vous aurez un cadre. Je vais aller de l'avant et copier ce nom, nous allons le coller ici pour ce cadre et si je choisis ces icône de coche, maintenant, si je maintiens la touche d'option mon clavier, je peux voir le bon remplissage parce que j'évalue les rembourrages par rapport à ces cadres, ce que nous voulions. Réglons le bon remplissage à 16 pixels comme ceci, et tout est fait. Nous avons créé avec succès notre premier champ de texte. Cependant, nous en avons besoin d'un de plus, alors continuons et dupliquons et nous allons le mettre vers le bas et le rembourrage supérieur sera de 24 pixels comme ceci, alors nous allons changer le titre Password assez bon et nous allons renommez aussi notre groupe et notre cadre. Changons-le en Mot de passe et un nom de cadre aussi, fantastique. Ensuite, nous devons changer ces textes parce que pour mot de passe, nous devons avoir deux états différents, le caché et le mot de passe et le mot de passe visible. Afin de créer le mot de passe caché, vous pouvez maintenir Option ou Alt sur votre clavier et appuyer sur 8, comme ceci. Comme vous pouvez le voir, c'est caché pour la sécurité. C' est ce que nous appelons l'expérience utilisateur parce que vous en tant que concepteur UIX, avez besoin de prêter attention à tous les détails. Ensuite, nous devons changer cette icône en icône d'œil, pour permettre à l'utilisateur de rendre ce mot de passe visible ou masqué. Je vais enlever ça. Placons une autre image de notre fichier d'actifs et ici nous avons j'aime ça, je vais l'insérer ici et nous allons la déplacer directement dans notre champ de texte de mot de passe. Il va avoir un rembourrage inférieur de 16 pixels et un rembourrage droit de 16 pixels. De quoi d'autre avons-nous besoin pour la page de connexion ? Bien sûr, nous avons besoin du lien de mot de passe oublié. Créons-le. J' ai besoin d'un texte et nous allons écrire, mot de passe oublié, un point d'interrogation, et puis je vais changer la couleur à 2B47FC comme ceci et agrandissons, donc je vais définir la taille de la police à 16 points. Alignons, son rembourrage à gauche va être de 30 pixels et son titre supérieur sera de 24 pixels, comme ceci. Enfin, nous devons créer notre bouton de connexion. Allons de l'avant et insérons un rectangle ici. Je vais glisser et déposer, je vais régler la largeur à 315 et la hauteur à 72 comme ça, puis augmentons le rayon de coin à 28. Cependant, je dois les rendre lisses. Je vais cliquer sur cette icône, coins indépendants et ces icônes ainsi et comme vous pouvez le voir ici, j'ai un curseur, je peux l'augmenter à 60 pour cent afin d'obtenir un bouton arrondi comme iOS. Ensuite, changeons la couleur en un dégradé comme celui-ci. Je vais sélectionner la première couleur et passons à 49, 60 et F9 et sélectionnons la deuxième couleur, augmentez l'opacité à 100 pour cent et changez-la à 1433 et double F. Ensuite, je vais changer la direction un peu comme ça sont justes, alors nous avons besoin d'un texte, alors écrivons la connexion. Je vais changer la police en un ensemble et une taille de police à 20 points, le poids va être régulier, cependant, changeons le champ en blanc comme ceci. Après cela, nous devons sélectionner à fois notre rectangle et nos balises de signe afin de les aligner, donc je vais cliquer sur aligner verticalement. Alors vérifions les paddings. Je vais zoomer un peu, les paddings haut, gauche et bas vont être de 24 pixels comme ça. Alors de quoi avons-nous besoin ? Nous avons besoin d'une flèche droite pour le placer ici afin d'indiquer qu'en cliquant sur cette icône, vous serez redirigé vers une autre page. Allons de l'avant et placez une image et à partir des icônes, vous pouvez choisir une flèche blanche et la placer ici. Là, nous allons et je vais sélectionner le rectangle et cette icône ensemble et cliquez sur aligner verticalement et c'est bon rembourrage va être 24 pixels comme ça. Maintenant, nous avons créé notre bouton de connexion, cependant, je vais y ajouter plus de détails afin de le rendre unique. Allons de l'avant et créons un cercle comme celui-ci, puis je vais aller de l'avant et cliquer sur ce troisième cercle comme ça, puis cliquez avec le bouton droit ici. Dans ces menus, copiez coller, cliquez et copiez les propriétés comme ceci, et sélectionnez ces petits cercles, Faites un clic droit sur cela et de copier-coller, cliquez et coller les propriétés afin que nous puissions obtenir le même que nous avons utilisé pour notre en-tête, alors je vais le déplacer vers le bas. Mettons-le sous notre flèche comme ceci et après cela, nous devons créer un masque, cependant, avant de le faire, nous devons dupliquer notre rectangle parce que nous allons ajouter une ombre portée après le masquage. Contrairement à l'esquisse, si vous voulez avoir une ombre portée tout en utilisant un masque, cela ne fonctionnera pas facilement, donc la meilleure façon d'obtenir ce résultat est de le dupliquer. C' est le Rectangle 2, je vais le mettre vers le bas, le cacher pour l'instant et puis sélectionnez ce cercle et ce rectangle et cliquez et masquez comme ceci et après vous pouvez rendre votre calque dupliqué visible comme ça et vous pouvez facilement déplacer le cercle autour. Je vais le faire tourner un peu pour obtenir quelque chose comme ça, mettons-le ici et je pense que c'est une bonne idée de l'agrandir. Je vais régler la largeur et la hauteur à 144 par 144 pour obtenir quelque chose comme ça. Dupliquez-le, déplacez-le sur le côté gauche, puis je vais copier et coller la propriété du cercle, ce bleu, comme celui-ci, ce petit cercle. Mettons cette couche sous notre premier cercle et ensuite je vais la faire pivoter un peu pour obtenir le meilleur résultat possible. Je pense que maintenant c'est génial, c'est plutôt bon, n'est-ce pas ? La dernière chose que nous devons faire est d'ajouter une ombre portée à notre bouton. Tout d'abord, n'oubliez pas de choisir le calque dupliqué, ce rectangle 2 et cliquez sur ajouter des effets comme celui-ci. Je vais changer les paramètres. Tout d'abord, je vais changer la couleur. Mettons-le à 1B39 et double F comme ça. Ensuite, changez la quantité de flou à 16 et un Y à huit comme ça, et diminuez l'opacité à 20 pour cent, c'est plutôt cool, n'est-ce pas ? Maintenant, je vais sélectionner tous les éléments ici, les regrouper et nous allons le renommer en bouton de signature. Maintenant que notre bouton est sélectionné, allons l'aligner au centre et comme vous pouvez le voir, nous avons un rembourrage de 30 pixels à gauche et à droite et nous devons obtenir un rembourrage inférieur de 64 pixels comme celui-ci. La seule chose à ajouter à cet écran est un indicateur d'accueil. Si vous ouvrez votre fichier d'actifs, comme vous pouvez le voir, vous avez un dossier appelé Apple iOS UI, ouvrons et ici vous avez différents dossiers, barres, indicateur d'accueil et claviers. Ouvrons l'indicateur de la maison et ici vous avez deux variantes, le portrait sombre et le portrait clair. En fait, la lumière ici ne signifie pas qu'elle est blanche, cela signifie que vous pouvez l'utiliser sur un fond clair, donc c'est noir fondamentalement. Je vais aller de l'avant et l'ouvrir et cliquer ici, puis nous allons l'aligner au centre comme ça et c'est le rembourrage inférieur va être 0. Vérifions notre page de connexion. Avant de mettre fin à cette vidéo, nous devons créer une page d'accueil. Maintenant, je vais aller de l'avant et déplacer ce tableau d'art sur le côté droit et nous allons le dupliquer et amener ces tableaux d'art dupliqués sur le côté gauche comme ça. Je vais le renommer pour accueillir et bien sûr nous n'avons pas besoin de ces éléments, alors supprimez-les. Cependant, gardez le bouton de connexion, puis choisissons ces groupes de formes, modifions la largeur et la hauteur à 970, mais gardez à l'esprit de les lier d'abord comme ceci. Réglons le x à moins 424 et le y à moins 409 et après cela je vais le faire tourner un peu. Réglons la rotation à moins 28 degrés pour obtenir quelque chose comme ça, c'est plutôt cool, n'est-ce pas ? Ensuite, déplacons-le un peu sur le côté gauche. Assurez-vous de faire ces étapes dans l'ordre, car si vous le faites pivoter pour la première fois, vos x et y vont être modifiés. Dans cette page d'accueil, nous allons avoir un bouton de plus, le bouton d'inscription. Je vais aller de l'avant et déplacer ces boutons, le dupliquer. Déplaçons le bas et son titre supérieur sera de 16 pixels comme ça, puis modifions ces textes pour s'inscrire. Bien sûr, vous pouvez le rendre dynamique en ajoutant la mise en page automatique à cela si vous le souhaitez, bien sûr, puis je vais aller de l'avant et sélectionner ce rectangle 2. Supprimons le remplissage et ajoutez-y un trait et changez la couleur du trait à 27, 43 et FD comme ceci. Copions ce code couleur parce que je vais en avoir besoin et supprimer l'ombre portée, nous n'avons plus besoin de cela et aussi nous devons supprimer ces cercles comme ceci. Maintenant, sélectionnons notre flèche droite et changeons le code de couleur à la couleur que nous avons choisie pour notre contour. Je vais le coller ici et aussi je vais aller de l'avant et changer le code couleur de mes textes à la même couleur comme ceci. Vérifions les rembourrages, le rembourrage inférieur va être 64, donc je vais sélectionner les deux boutons et les déplacer d' un pixel comme ceci et assurez-vous de renommer votre groupe. Je vais le changer pour m'inscrire. C' est tout pour cette vidéo, j'espère que vous avez vraiment apprécié, c' était tellement intéressant. Dans la prochaine vidéo, nous continuerons à concevoir nos pages de connexion ensemble. On se voit alors. 80. Page d'inscription: Salut tout le monde, et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons continuer à concevoir nos pages de connexion et aussi nos pages d'inscription ensemble. Sans plus tarder, continuons et dupliquons ces pages de connexion. Je vais sélectionner ce tableau d'art et nous allons le dupliquer. Après cela, je vais aller de l'avant et renommer ce tableau d'art pour me connecter au mot de passe de tiret, parce que dans ce tableau d'art, nous allons rendre ces mots de passe visibles. Allons zoomer un peu. Fantastique. Je vais sélectionner ces calques de textes et écrivons UI2020. Plutôt bien. Évidemment, nous devons également changer cette icône. Allons de l'avant et insérons une nouvelle icône de notre fichier d'actifs. Je vais aller à Icônes, et ici nous avons Eye-Hidden, alors sélectionnons cela et placez-le ici, et je vais le remplacer par notre icône précédente comme ceci. Je vais supprimer ceci et mettons cette icône Eye dans notre champ de texte de mot de passe. Fantastique. C'est tout pour ce tableau d'art. Laissez-moi zoomer un peu, et après cela, nous allons créer notre page d'inscription. Ça va être presque pareil. La seule chose que nous devons changer, c'est ce titre. Je vais aller de l'avant et sélectionner la page de connexion, puis la dupliquer et je vais la renommer pour m'inscrire. Plutôt bien. Modifions ce titre pour vous inscrire également. N' oubliez pas de changer votre bouton. Je vais sélectionner cette couche de textes et ça va s'inscrire. Fantastique. On y va. Nous venons de créer notre page d'inscription. Maintenant, nous allons à nouveau dupliquer la page d'inscription, et cette fois nous allons créer un autre état de ce champ de texte. Par exemple, nous allons concevoir un état d'erreur. permettez -moi de zoomer un peu. abord, renommons ce tableau d'art pour inscrire Wrong Email comme ceci. Ensuite, faisons ce courriel mal par exemple, je vais supprimer this.com comme ceci. Comme vous pouvez le voir, ce n'est pas une adresse e-mail complète, et alors nous devons supprimer cette icône de coche également. Quand c'est incorrect, cela n'a pas de sens d'avoir cette icône de coche, donc nous devons supprimer cela, et laissez-moi déplacer tout le champ de texte un peu haut afin d'avoir plus de place pour ajouter l'erreur en bas. La première chose que nous devons faire est de changer la couleur de ce titre en une couleur rouge. Je veux changer le code couleur en FD2727, et laissez-moi copier ce code couleur parce que je vais en avoir besoin. Ensuite, sélectionnons cette ligne horizontale et changeons la couleur au même rouge. Après cela, je vais aller de l'avant et dupliquer cette couche de texte, le déplacer vers le bas, comme ici, et nous allons écrire l'adresse e-mail est incomplète. Comme ça. Cependant, je vais changer la taille de la police à 13 points. Plutôt bon, et changeons la couleur à ce rouge aussi. Ensuite, je vais changer le poids de normal à léger. Fantastique. Maintenant, il est temps de vérifier nos rembourrages. Comme vous pouvez le voir maintenant, notre rembourrage supérieur est réglé sur neuf pixels. Je vais en faire huit comme ça. Ensuite, déplacons ce texte dans notre groupe d'adresses e-mail ici. Assez bien, et c'est le rembourrage inférieur va être de 24 pixels comme ça. Bien sûr, nous devons déplacer un peu ces titres d'inscription. Je vais le déplacer pour obtenir un rembourrage inférieur de 42 pixels comme ça. Plutôt bien. Maintenant, tout a l'air super. Maintenant, nous avons besoin d'une autre page d'inscription. Allons de l'avant et sélectionnons cette page d'inscription , celle-ci, et je vais la dupliquer. Renommez-le pour vous inscrire en tapant, car nous allons présenter le clavier ici afin de montrer au développeur comment fonctionne cette mise en page lorsque nous présentons un mot-clé. Parce que de toute évidence, nous allons déplacer quelques éléments ici. Je vais zoomer. La première chose que nous devons faire est de sélectionner ces éléments et de les déplacer comme ceci, puis allons de l'avant et placer une image, et à partir du dossier assets, Apple iOS UI, vous avez des mots-clés, et sélectionnons cela, placez-le ici. Plutôt bon, fantastique. Ensuite, je vais aller de l'avant et sélectionner ce champ de texte d' adresse e-mail et de mot de passe champ, les regrouper et les déplacer jusqu'à ce que vous obtenez un remplissage supérieur de 24 pixels comme ceci. Tout est bon. Cependant, nous devons ajouter une chose de plus, un marqueur d'entrée de texte. Étant donné que l'utilisateur tape dans cette page, nous devons ajouter un marqueur de saisie de texte ici. C' est si facile d'en créer un. Allons de l'avant et créons une ligne comme celle-ci. Cependant, cette fois une ligne verticale, et je vais définir la largeur à 19, comme ça, et je vais changer la couleur à ce violet, comme notre icône de tique, fantastique. Son rembourrage inférieur va être de huit pixels. Plutôt bien. Maintenant, déplacons cette ligne à l'intérieur de ce groupe de mots de passe, que vous pouvez mesurer correctement tous les paddings. Comme vous pouvez le voir maintenant, notre rembourrage gauche est réglé sur quatre, faisons deux, et je vais le déplacer un peu vers le bas pour obtenir un équilibre visuel. Plutôt bon, et tout est génial. Les gars, nous avons créé avec succès toutes nos pages de connexion et aussi nos pages d'inscription ensemble. C' est tout pour cette vidéo. J' espère que ça vous a plu. Dans la vidéo suivante, nous commencerons à concevoir nos pages de vérification OTP. On se voit alors. 81. Écrans de vérification OTP: Salut, tout le monde. Bienvenue à une autre vidéo de cette section. Dans cette vidéo, nous allons commencer à concevoir ensemble nos pages de vérification OTP. Sans plus tarder, commençons. Tout d'abord, nous avons besoin d'un nouveau tableau d'art. Je vais appuyer sur A, et je vais choisir iPhone 11 Pro ou X, comme ceci. Je vais le déplacer ici, juste en dessous de mon grand écran afin de garder notre toile organisée. Ensuite, renommons ce tableau d'art en OTP. Ce sera notre premier écran parce qu'au total, nous allons avoir trois écrans OTP différents, et nous allons les créer pas à pas. Maintenant, de quoi avons-nous besoin ? Nous avons besoin d'un indicateur de maison pour mettre en bas, afin que nous puissions facilement le copier et le coller de nos tableaux d'art précédents. Je vais copier ceci et le coller ici. Plutôt bien. Nous avons aussi besoin de la barre d'état. Je vais aller de l'avant et placer une image. Ici, j'ai des barres, barre d'état, j'ai la version sombre et claire, et la lumière signifie que vous pouvez l'utiliser sur un fond clair. La barre d'état est sombre. Je vais aller de l'avant et l'ouvrir, le placer ici. Laisse-moi l'aligner au centre. Aussi, il doit coller sur le bord supérieur de cet écran, comme ceci. De quoi d'autre avons-nous besoin ? Nous avons besoin d'une illustration que j'ai déjà préparée pour vous. Allons de l'avant et plaçons une autre image ici. Dans le dossier Assets, vous avez un dossier d'illustration, je vais l'ouvrir. Ici, vous avez OTP. Ouvrons ça. Je tiens à mentionner que j'ai téléchargé ces illustrations à partir du site undraw.co, qui est un très grand site Web où vous pouvez accéder à d' incroyables illustrations libres de droits. Si vous souhaitez utiliser une autre illustration, assurez-vous de consulter ce site Web. D' abord, nous allons l'aligner au centre, puis je vais vérifier le rembourrage supérieur. En fait, ça va être 56 pixels, comme ça. Plutôt bien. Ensuite, j'ai besoin d'un calque de texte. Écrivons, OTP Verification, et changeons la police à Montserrat, comme ceci. Je vais utiliser la version en gras, et aussi nous devons changer la taille de la police à 24 points. Plutôt bien. Le rembourrage supérieur va être de 60 pixels, comme ça. Ensuite, nous allons dupliquer ce calque de texte, le déplacer vers le bas et changer le chemin à normal, et je vais également changer la taille de la police à 16 points. Je vais l'aligner au centre. Ici, écrivons  : « Nous vous enverrons un mot de passe unique à ces numéros de téléphone portable. » Ensuite, je vais redimensionner ce calque de texte pour avoir un calque de texte de taille fixe, comme ceci. Allons l'aligner au centre. Aussi, je vais changer la hauteur de la ligne. Ce que je vais faire est d'écrire 16 fois 1,5, puis PX, comme ça. C' est une excellente formule. Si vous ne savez pas comment choisir la hauteur de votre ligne, vous pouvez l'utiliser. Vous pouvez écrire votre taille de police et le multiplier par 1,5. Cependant, rappelez-vous dans Figma, vous devez ajouter un mot-clé PX à la fin. Plutôt bien. Maintenant, sélectionnons ces deux calques de texte et changeons la couleur du texte. Je vais les mettre à 3A, 3A, et 3A, comme ça. Plutôt bien. Maintenant, sélectionnons ce calque de texte et dupliquez-le, déplacez-le vers le bas. Ici, écrivons : « Entrez le numéro de téléphone mobile. » Je vais changer la police en SF Pro Text, comme ceci, changer le chemin vers Regular, et aussi la taille de la police à 14 points, comme ceci. Je vais l'aligner au centre, et je veux aussi changer la couleur en B9, B9 et B9. Plutôt bien. Maintenant, sélectionnons ce calque de texte et vérifions les paddings. Comme vous pouvez le voir, le rembourrage supérieur est maintenant de 22 pixels. Cependant, il est préférable de le définir sur 24 pixels. Ensuite, vérifions le rembourrage de ces textes. Maintenant, il est réglé sur 33 pixels. Cependant, mettons-le à 34 pixels. Ensuite, ici, nous avons besoin d'un champ de texte pour entrer le numéro de téléphone mobile. Ce que je vais faire est juste de sélectionner cette ligne de champ de texte. Je vais copier ça et le coller ici, déplacer vers le bas, plutôt bien. Diminons la largeur à 233, comme ceci. Alignez-le au centre. Laissez-moi le déplacer vers le bas, puis dupliquer ce calque de texte, le déplacer vers le bas, changer le chemin trop gras. Assurez-vous qu'il est aligné sur le centre. Je vais changer la couleur en 3A, 3A, et 3A, comme ça. Ici, nous allons écrire un nombre aléatoire. Par exemple, nous pouvons écrire +49 111 222 333. Plutôt bien. Le rembourrage inférieur va être de huit pixels, comme ceci. Sélectionnez les deux couches, déplacez-les vers le haut, et nous avons besoin d'un rembourrage de 24 pixels, comme ceci. Plutôt bien. Maintenant, vous pouvez sélectionner ces trois éléments, les regrouper, et appelons-le Mobile Number, assez bon. La dernière chose dont nous avons besoin, c'est d'un bouton. Je vais aller de l'avant et copier et coller le bouton de connexion. Collons-le ici. Plutôt bien. Tout d'abord, je vais le renommer en, Get OTP Button. Alors j'ai besoin d'enlever cette flèche droite parce que nous n'avons pas besoin de ça. Après cela, je vais aligner ce calque de texte au centre. abord, sélectionnez ce calque de texte, puis sélectionnez le rectangle, alignez-le au centre. Alignons aussi au centre de la section de texte. Je vais le changer en, Obtenez OTP. Plutôt bien. Aussi je pense que c'est une bonne idée de changer la place de ces cercles. Choisissons le bleu, et je vais le déplacer sur le côté gauche, comme celui-ci, et choisir celui-ci, le violet, et le déplacer vers le bas. Faisons-le tourner un peu. Plutôt bien. Je vais déplacer ce bleu un peu vers le bas, et maintenant je pense que c'est génial. Laisse-moi zoomer un peu. On y va. Pouvez-vous voir à quel point c'est incroyable et beau ? Le rembourrage inférieur de ce bouton va être de 64 pixels, comme ceci. Je pense que c'est une bonne idée d'augmenter la taille de police de notre numéro de mobile. Je vais sélectionner ça et passons à 18 points. Maintenant, c'est plus visible. Je vais l'aligner au centre, le déplacer vers le haut, et il va avoir un remplissage inférieur de huit pixels. Maintenant, c'est beaucoup mieux. D'accord, les gars. Nous avons créé avec succès notre premier écran. Maintenant, allons de l'avant et créons les deux autres. Dupliquons cet écran, assez bien. Je vais changer ce texte pour entrer dans l'OTP, envoyer au +49 111 222 333. Je vais sélectionner ce numéro de téléphone, et je vais le rendre audacieux, comme ça. C' est plutôt bon. Ensuite, je vais supprimer ce calque de texte et aussi ce numéro de téléphone. Plutôt bien. Cependant, je vais garder cette ligne. Cependant, nous allons le couper et le coller ici parce que nous n'avons plus besoin de ce groupe. Ensuite, je vais régler la largeur à 48, comme ça. Plutôt bien. Maintenant, ajoutons un calque de texte et écrivons juste un nombre aléatoire, par exemple, sept. Rendons ça régulier, comme ça. Aussi la taille de la police va être de 24 points, comme ceci. Déplacez un peu vers le haut pour obtenir un rembourrage inférieur de huit pixels, plutôt bon. Alors nous allons l'aligner sur notre ligne, comme ça. Regroupez-les, et renommons le en Champ de texte, puis dupliquez-le, déplacez-le vers le côté droit. Il va avoir un rembourrage de 24 pixels à gauche, comme ça. Puis dupliquez-le une fois de plus, et encore une fois, assez bon. Sélectionnez-les tous, regroupez-les et alignez-les au centre. Ensuite, sélectionnons le deuxième nombre et changeons-le en quelque chose d'autre, par exemple, trois. Je vais supprimer les deux autres parce que dans cet écran, l'utilisateur entre le mot de passe. Nous devons décrire ce processus d'une manière ou d'une autre. Ensuite, je vais sélectionner ces deux lignes et changer la couleur en B9, B9 et B9, comme ça, assez bon. Maintenant, tout est fait. Ensuite, sélectionnons ce groupe, déplacez-le vers le haut, et le remplissage supérieur sera de 58 pixels, comme ceci. Je vais avoir un autre calque de texte. Dupliquons ce calque de texte et déplacez-le vers le bas. Ici, nous devons écrire, n'avez-vous pas reçu l'OTP ? Alors écrivons, Rend OTP, comme ça. Je vais changer la police en SF Pro Text, comme ça. Modifions également la taille de la police à 14 points. Ensuite, sélectionnons cette partie du texte et modifions le code couleur en B9, B9 et B9. Sélectionnez également ces renvoyer la section OTP et modifiez-la en 27, 43 et FD, comme ceci. Son rembourrage supérieur va être de 40 pixels. La dernière chose que nous devons faire est de changer notre bouton. Parce que maintenant, nous avons besoin d'un bouton de vérification désactivé. Tout d'abord, changeons ce texte en, Vérifier, génial. Ensuite, je vais sélectionner ce rectangle deux calques, le dupliquer, supprimer l'ombre portée, puis le déplacer vers le haut juste au-dessus du texte vérifié, comme ceci. Je vais changer la couleur pour une couleur solide. Changons-le en blanc. Après ça, je vais diminuer l'opacité à 40 pour cent, comme ça. Aussi, je vais sélectionner ces vérifier le texte. Diminons l'opacité de la couche à 50 pour cent. Plutôt sympa. Enfin, n' oubliez pas de renommer votre groupe toujours, vérifier, et c'est tout. Comme vous pouvez le voir, maintenant nous avons un bouton désactivé parce que l'utilisateur n'a pas entré complètement le code OTP. Maintenant, nous allons dupliquer cet écran afin de concevoir notre dernier écran. Je vais le déplacer un peu sur le côté droit. Maintenant, de quoi avons-nous besoin ? Tout d'abord, nous devons compléter ce code. Ce que je vais faire est de sélectionner ce numéro, copier, de le coller ici, déplacer vers le côté droit, et je vais le déplacer juste au-dessus de cette ligne de texte dans notre panneau de calques. Alors écrivons zéro, plutôt bien. Assurez-vous de les aligner au centre, comme ceci. Après ça, je vais changer la couleur pour celle-là. Plutôt bien. Encore une fois, dupliquez-le, déplacez-le vers le côté droit. Cependant, nous devons également le déplacer dans notre panneau Calques, comme ceci. Changons-le à deux. Changeons la couleur de notre ligne de texte. Plutôt bien. Last but not least, maintenant nous devons activer notre bouton. Je vais ouvrir ce groupe, et supprimons le rectangle que nous venons de créer. Je vais augmenter l'opacité de mon texte à 100 pour cent. D'accord, tout le monde. C' est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. On se voit alors. 82. Écran de profil: Salut tout le monde et bienvenue à une autre vidéo de la section. Dans cette vidéo, nous allons commencer à concevoir nos écrans de profil. Tout d'abord, nous devons avoir un nouveau plan de travail, donc ce que je vais faire est juste de dupliquer cet écran OTP. Après cela, je vais supprimer tous les objets et laissez-moi le renommer en profil. Fondamentalement, cet écran de profil va avoir un arrière-plan et aussi un espace réservé d' image de profil en haut et quelques champs de texte et un bouton. Tout d'abord, allons de l'avant et insérons un rectangle afin de créer notre arrière-plan comme celui-ci. Assurez-vous qu'il s'adapte à votre écran, puis changez-le en dégradé linéaire et nous allons le faire correspondre comme ceci. Sélectionnez la première couleur, et je vais définir le code couleur sur 4960 et F9, comme ceci. La deuxième couleur va être 1937 et FE. Cependant, assurez-vous d'augmenter l'opacité à 100 pour cent comme ça, et aussi je vais changer un peu la direction pour obtenir un meilleur gradient, quelque chose comme ça. C' est plutôt sympa, n'est-ce pas ? Après cela, nous devons ajouter notre barre d'état et notre indicateur d'accueil. Cependant, cette fois, nous devons obtenir la barre d'état blanche et un indicateur de maison blanc. Allons de l'avant et plaçons une image. À partir des barres de dossiers de l'interface utilisateur d'Apple iOS, disons cette barre, choisissons la barre sombre et placez-la ici comme ceci. Plutôt bien. Ensuite, plaçons une autre image. le dossier de l'indicateur d'accueil, choisissons le portrait sombre et placez-le juste en bas. Alignez-le au centre, et alignez-le également vers le bas, comme ceci. Plutôt bien. Jusqu'à présent, nous avons créé l'écran de base. Maintenant, il est temps d'y ajouter quelques détails. La première chose dont nous avons besoin est une flèche de backlink droite en haut à gauche. Placons une icône de notre dossier icônes, et ici je vais choisir la flèche gauche et la placer ici, comme ceci. Parfois, lorsque vous ajoutez ces icônes, elles peuvent être invisibles. C' est probablement un bug de Figma, cependant, si vous voulez corriger cela, vous pouvez fermer votre fichier et l'ouvrir une fois de plus, puis vous verrez ces icônes. Maintenant, vérifions les paddings. Le remplissage gauche va être de 30 pixels comme ceci, et le rembourrage supérieur va être de 24 pixels comme ceci. Le rembourrage supérieur sera opposé à cette barre d'état, pas au bord de ce plan de travail. Plutôt bien. Maintenant, créons notre espace réservé d'image de profil ensemble. Ce dont je vais avoir besoin, c'est d'un rectangle. Je vais insérer ça. Maintenez la touche Maj ajouter glisser-déposer comme ceci. Assurez-vous que la largeur et la hauteur sont toutes deux réglées sur 100 pixels. Ensuite, je vais régler le rayon de coin à 36, et aussi je vais le rendre lisse comme ça. Plutôt bien. Après cela, changeons la couleur en blanc. Maintenant, je vais y ajouter quelques détails. Dupliquons d'abord, commande D ou contrôle D, puis rendons un peu plus grand. Réglons la hauteur et la largeur à la fois à 104 pixels comme ceci. Je vais mettre la couleur à un bleu clair. Essayons 40CE et F2. Fantastique. Déplaçons maintenant ce calque juste en dessous de notre premier rectangle. Ensuite, je vais l'aligner au centre, ce blanc aussi, et maintenant sélectionnons-les deux et alignons-les à la fois horizontalement et verticalement. Maintenant, nous allons les renommer. Le bleu va être bleu et le blanc sera blanc, que nous pouvons les reconnaître facilement. Maintenant, sélectionnons le bleu, et je vais le faire pivoter de moins 57 degrés comme ça. Puis encore une fois, dupliquons le blanc, et maintenant changeons la couleur en B52FF et 8, comme ceci. Cette fois, faites-le 106 pixels par 106 et assurez-vous qu'il est aligné au centre horizontalement. Je vais le déplacer comme ça. Changeons le nom en violet, déplacez-le juste en dessous du bleu, et cette fois faisons pivoter de moins 30 degrés. Fantastique. C'est tellement chic, n'est-ce pas ? Ensuite, nous devons placer notre icône de caméra juste au centre de ce carré blanc. Allons de l'avant et plaçons une image. À partir d'icônes, je vais choisir l'appareil photo et le placer ici, puis assurez-vous de l'aligner avec votre carré blanc, fois verticalement et horizontalement. Après cela, je vais sélectionner tous ces éléments, les regrouper, et appelons-l' image de profil, comme ceci. Le rembourrage supérieur sera de 40 pixels comme ceci, et assurez-vous qu'il est aligné au centre horizontalement. En outre, je vais supprimer ces 0,6 de l'axe y pour obtenir un rembourrage supérieur de 40 pixels comme ceci. Plutôt bien. Maintenant, il est temps de créer nos champs de texte. Afin de gagner notre temps, je vais choisir ce champ de texte d'adresse e-mail, copier ceci, coller ici. Plutôt bien. Je vais le déplacer et changeons le titre en nom d'utilisateur, et aussi la couleur va être 80E0 et FF. Copions ce code couleur parce que nous allons en avoir besoin. Ce calque de texte va être votre nom d'utilisateur et le code couleur va être le même. Plutôt bien. Masquons cette icône de coche, cependant, ne supprimez pas cela car dans l'écran suivant, vous allez l'afficher. Cachez-le pour l'instant, puis sélectionnez ces champs de texte ligne et le rendre blanc, assez bon. Je vais renommer ces champs de texte en nom d'utilisateur, ce groupe aussi. Plutôt bien. Maintenant, il est temps de dupliquer cela et de le placer avec un rembourrage supérieur de 24 pixels comme ceci. Encore une fois, dupliquez cela, et encore une fois. Plutôt bien. Le second sera notre prénom. Écrivons le prénom, et ici va être changé pour votre nom et un nom de groupe et de cadre va être prénom ici aussi. Plutôt bien. Le troisième sera le nom de famille. Fantastique. Ici doit être votre nom de famille aussi. Plutôt bien. Le dernier sera la date de naissance. Fantastique. Ici, nous allons écrire votre anniversaire, et je vais écrire un format pour ceux-ci. Écrivons jd-mm-aaaa. Cela signifie que l'utilisateur doit entrer le jour et le mois et l'année. N' oubliez pas de renommer le nom de votre cadre et aussi le nom de votre groupe, donc je vais le changer en nom de famille. Celui-ci aussi, et le dernier à l'anniversaire. Plutôt bien. Maintenant, sélectionnons-les tous en maintenant la touche Maj enfoncée sur votre clavier, et secouons le rembourrage supérieur, c'est 71.2. Faisons 40 comme ça. Vous pouvez les regrouper et l'appeler champs de texte, et comme vous pouvez le voir, le remplissage droit et gauche sont de 30 pixels. Alors la dernière chose dont nous avons besoin, c'est un bouton. Ce sera notre bouton complet. Je vais choisir ces bouton vérifier, copier ceci, coller ici. Enlève ces cercles, on n'en a pas besoin. Aussi, je vais changer la couleur pour un blanc solide. Assurez-vous de sélectionner le rectangle 2 pas le rectangle 1 parce que c' est notre masque et je vais changer la couleur en blanc massif. Plutôt bien. Les couleurs du texte doivent être C8, C8 et C8 comme ceci. Changeons-le pour terminer. La dernière chose que nous devons ajouter à ce bouton est une icône de coche. Laissez-moi copier et coller ces coches à partir de notre page de connexion, et je vais le coller ici. Choisissons la même couleur pour ces coches. Je vais l'aligner avec mon texte verticalement, assez bien, et assurez-vous de déplacer ce calque à l'intérieur de votre groupe de boutons. Il va être ici et le rembourrage de gauche va être un pixel. La raison pour laquelle nous avons choisi une couleur gris clair pour ces éléments est que ce bouton est inactif dans cet écran, car l'utilisateur n'a pas encore rempli ce formulaire. Maintenant, renommons le pour terminer. Fantastique. Maintenant, tout est fait. Maintenant, allons de l'avant et concevons notre page de profil terminée. Je vais dupliquer cet écran comme ça, puis remplissons d'abord ces champs de texte ensemble. Le premier sera Emma souligne Ashley, vous pouvez choisir ce que vous voulez, peu importe. Je vais le rendre blanc. Le prénom va être Emma, blanc aussi, le nom devrait être Ashley. Rendons-le blanc, plutôt bon. La date de naissance sera le 20 décembre 1990. Faisons le blanc. Plutôt bien. Maintenant, comme je l'ai déjà mentionné, nous allons dévoiler notre icône T. Allons-y et dévoilons-les comme ça. Fantastique. La couleur de nos textes complets doit être changée en 2B47 et FC. Copions cela parce que je vais changer la couleur de cette icône T aussi, coller ici. Plutôt bien. Maintenant, ce bouton est actif. Maintenant, allons de l'avant et modifions notre espace réservé de profil. Nous allons ajouter une image à cela. Tout d'abord, nous devons supprimer cette icône de caméra comme ceci, puis choisissons ces carrés blancs. Maintenant, je vais choisir un plugin. Je vais utiliser le vrai plug-in contenu que je vous ai déjà montré comment vous pouvez utiliser. Je vais cliquer sur ce contenu ici, et allons dans les avatars, choisir femelle, et rafraîchissons jusqu'à ce que vous ayez une belle photo. Je pense que c'est plutôt bon, fantastique. Aussi, je vais ajouter une ombre portée à ces carrés, alors ajoutons des effets à cela. Je vais changer le réglage, donc réglons le flou sur 22 et le blanc sur 8 et réduisons l'opacité à 20 pour cent. Fantastique. Après cela, je vais sélectionner ces carrés bleus et violets, les déplacer hors de notre groupe d'images de profil. Mettons-les à l'échelle un peu comme ça. Je vais d'abord choisir le bleu, double-cliquez dessus pour entrer en mode d'édition. Après cela, je vais ajouter un nœud juste au milieu, comme ça, et puis je vais le déplacer vers le côté droit jusqu'à ce que j'obtienne une forme comme celle-ci. Plutôt bien. Déplaçons le vers la droite, cliquez sur « Terminé », et faisons la même chose à ce carré violet aussi. Je vais ajouter un nœud ici et le déplacer comme ça. Plutôt bien. Déplacez-le vers le haut. Faisons-le tourner un peu comme ça. Cependant, je vais le mettre à l'échelle pour le rendre plus grand, un peu plus. Mettons à l'échelle ce bleu aussi, faisons tourner un peu. Plutôt bien. Je vais le déplacer vers la droite jusqu'à ce que j'obtienne le meilleur emplacement possible. Maintenant, sélectionnons les deux. Je vais les déplacer juste en dessous de notre image de profil et aussi de notre barre d'état, qui est cette ligne. Plutôt bien. Déplace-les et c'est tout. C' est plutôt bon, n'est-ce pas ? La seule chose que j'ai remarqué est que nous n'avons pas aligné ces calques de texte complets au centre. Allons de l'avant et sélectionnez ces textes complets et ces coches icône, les regrouper et l'aligner au centre. Je vais faire la même chose à ces éléments aussi. Je vais les sélectionner, les regrouper, sélectionner le rectangle et les aligner au centre. Maintenant, tout est fait. Tu vois à quel point c'est beau ? C' est assez intéressant, n'est-ce pas ? Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu. Dans la prochaine vidéo, nous allons concevoir notre page d'accueil ensemble. Alors, à vous voir. 83. Page d'accueil: Bonjour tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons concevoir notre page d'accueil ensemble. Sans plus tarder, commençons par dupliquer ce profil terminé plan de travail comme ceci, alors je vais supprimer presque tout sauf l'arrière-plan. Essayons de supprimer tous ces éléments, cette flèche gauche aussi parce que je n'en ai plus besoin, et aussi cet indicateur d'accueil. Ensuite, nous allons utiliser ce calque Rectangle 4, qui est notre arrière-plan, et je vais changer la hauteur à 278, comme ceci. Après cela, je vais double-cliquer dessus. Maintenant, je suis en mode édition. Ensuite, sélectionnons ces deux nœuds inférieurs. Je vais choisir le premier et maintenir Maj, et choisir le second, et laisser définir le rayon de coin à 66 comme ça, fait. Assurez-vous d'utiliser le lissage des coins pour obtenir des coins lisses comme celui-ci. Fantastique. La prochaine chose dont nous avons besoin est l'icône du menu hamburger juste en haut. Allons de l'avant et plaçons une image. A partir des icônes, vous choisissez Menu Hamburger, placez-le ici. Maintenant, vérifions les rembourrages. Maintenant, réglons le cap supérieur à 27, comme ça, et un rembourrage à gauche va être 30. Fantastique. Ensuite, j'ai besoin de cette image de profil pour mettre en haut de cet en-tête. Allons-y et copions-le ici comme ça. Alors je vais le réduire. Utilisons l'outil Échelle. Allons le ramener à 50 par 50, comme ça. Je vais le mettre à 50 par 50 comme ça. Mettons-le juste là. Ensuite, j'ai besoin d'ajouter un indicateur d'état à cette image de profil pour indiquer si cet utilisateur est en ligne ou non. Ajoutons un cercle comme celui-ci. Je vais le mettre à 10 par 10, et changeons la couleur à 20C968 comme ça, et j'ai besoin d'un coup. Ajoutons un trait et changeons la couleur en blanc. Fantastique. Après ça, je vais l'aligner sur le côté droit. Remontons un peu comme ça. Comme vous pouvez le voir, cet indicateur est parfaitement aligné avec les bords de cette image de profil. Ensuite, mettons ce cercle à l'intérieur de ce groupe d'images de profil, et c'est tout. Après cela, nous devons vérifier les rembourrages. Le rembourrage supérieur sera de 24 pixels, comme ceci, et le droit devrait être de 30. Plutôt bien. La prochaine chose dont nous avons besoin, c'est un texte. Ajoutons un calque de texte et écrivons « Bonjour Emma. » Ensuite, je vais changer la police à Montserrat comme ceci, rendre régulière et la taille de la police devrait être de 24 points et la couleur évidemment blanche. Maintenant, vérifions les rembourrages. Le rembourrage gauche devrait être de 60 pixels, comme ceci, et un rembourrage supérieur devrait être de 80. Fantastique. Maintenant, de quoi avons-nous besoin ? Ici, je vais placer une carte, qui consiste en un graphique à barres qui montre le solde disponible de cet utilisateur spécifique. J' ai besoin d'ajouter un rectangle, comme ça. Pour l'instant, définissons la largeur et la hauteur à 315, comme ceci, alignez-le au centre et augmentez le rayon de coin à 40. Assurez-vous également que vous avez des coins lisses comme ceci. Alors je vais changer la couleur en blanc. Fantastique. Maintenant, ajoutons une ombre portée à cela. Je vais ajouter des effets et modifions les paramètres. Le flou sera 50, le X sera zéro, et le Y devrait être neuf dans ce cas. Diminons l'opacité à 10 pour cent. Plutôt bien. Je vais régler le rembourrage supérieur de cette carte à 16 pixels comme ça. Jusqu' à présent, si bon. Ensuite, nous avons besoin de la couche de texte ici, je vais écrire votre solde total. Plutôt bien. Permettez-moi de réduire la taille de la police à 16 points comme ceci. Son titre supérieur sera de 32 pixels, le remplissage gauche de 32 pixels, dupliquez-le. Maintenant, je vais changer le chemin en gras et une taille de police à 30 points. Ici, nous allons écrire le montant. Par exemple, écrivons 8 500$ comme ça, et je vais changer la couleur en 2D99FF, comme ceci. Le rembourrage supérieur va être huit huit comme maintenant. La prochaine chose dont nous avons besoin est une icône Plus. Allons de l'avant et plaçons une image. Ici, nous avons l'icône Plus, je vais la placer ici. Comme vous pouvez le voir, maintenant c'est invisible. Comme je l'ai déjà dit, c'est un bug. Afin de résoudre ce problème, vous pouvez facilement fermer votre fichier et l'ouvrir une fois de plus comme ceci, et maintenant il est visible. Utilisons cette icône. Je vais le déplacer sur le côté droit. Maintenant, nous allons l'aligner sur notre texte. Choisissons cette icône plus petite, et ce calque de texte et cliquez sur « Aligner verticalement ». Plutôt bien. Le bon rembourrage sera aussi de 32 pixels. Toutefois, n'oubliez pas de modifier la couleur de ce calque de texte. Je vais le régler sur 3A3A3A. Plutôt bien. Maintenant, il est temps de créer notre graphique à barres ensemble. Tout d'abord, nous avons besoin d'un rectangle pour créer nos barres. Je vais glisser et déposer comme ça. Réglons la largeur à neuf et la hauteur à 122, comme ceci. Je vais double-cliquer dessus et sélectionnons ces deux nœuds supérieurs parce que je vais augmenter le rayon de coin d'entre eux jusqu'à ce que j'obtienne une barre complètement arrondie comme celle-ci. Alors choisissons ceci. Je vais choisir le compte-gouttes et choisir le même bleu que notre texte de quantité, comme ceci. Je vais le déplacer un peu vers le bas, puis le dupliquer, le déplacer sur le côté droit. Je vais diminuer sa hauteur comme ça. Réglons-le sur 32 pixels. Plutôt bien. Ensuite, je vais faire un clic droit sur cela, et choisissons Flip Vertical. Comme vous pouvez le voir, il est retourné. Je vais le déplacer vers le bas et vérifions les rembourrages. Le remplissage gauche doit être de quatre pixels comme ceci. La dernière chose à faire est de changer la couleur. Je vais le mettre à A5F3FF. Plutôt bien. Regroupez-les. Je vais l'appeler Colonne 1, dupliquer, et réglons le remplissage gauche à 16 pixels comme ceci. Maintenant, je vais changer la hauteur de ces barres. Sélectionnez cette barre. Je vais le mettre à 100, comme ça. Maintenant, il est temps de diminuer la hauteur de cette barre aussi. Ajoutez-le à 23. Plutôt bien. Ensuite, nous allons le dupliquer encore une fois. Placez-le avec un rembourrage à gauche de 16 pixels. Je vais diminuer la hauteur à 89, comme ça, et pour celui-ci, diminuons à 15, assez bien. Nous allons le dupliquer encore une fois. Réglons la hauteur à 61, et diminuons la taille de cette plus petite aussi à sept. Ensuite, nous allons le dupliquer encore une fois. Cette fois, nous devons changer la place de ces deux barres. Tout d'abord, cliquez avec le bouton droit de la souris et choisissez Flip vertical. Je vais le déplacer comme ça. Après cela, diminuons sa hauteur à 44. Plutôt bon, et choisissez celui-ci aussi. Cliquez sur « Flip vertical » déplacez-le vers le haut, et maintenant augmentons sa hauteur à 27, comme ceci. Nous allons le dupliquer. Je vais réduire celui-ci à 15, comme ça. Augmentons le second à 70. Enfin, le dernier, je vais le dupliquer et diminuer un peu cette barre. Je vais le mettre à 10 et augmenter le suivant à 108, comme ça. Maintenant, sélectionnons-les tous, groupez-les, et je vais l'appeler des colonnes comme ça. Alignons ça avec ma carte. Je vais sélectionner ce rectangle, maintenez Maj et cliquez dessus, alignez-le au centre. Réglons le rembourrage supérieur à 26, comme ceci et un rembourrage inférieur va être 32 parce que le rembourrage supérieur ici est de 32 pixels, donc nous devons augmenter la hauteur de ce carré. Comme vous pouvez le voir, c'est 26. Je vais changer la hauteur. abord, dissocions cette hauteur et cette largeur, puis, écrivons plus six. Vérifions ça. On y va. Maintenant, nous avons un rembourrage de 32 pixels. Enfin, nous devons regrouper tous ces éléments. Sélectionnons-les tous, regroupez-les, et je vais l'appeler Balance Card. Maintenant, allons de l'avant et créons notre barre d'onglets. Nous devons placer une barre d'onglets en bas de cet écran. Au lieu d'utiliser une barre d'onglets pré-faite, je vais vous montrer comment vous pouvez concevoir votre onglet personnalisé qui est assez incroyable. Allons de l'avant et insérons un rectangle ici. Je vais glisser et déposer et changer la couleur en blanc. Plutôt bien. Je vais ajouter de l'ombre portée et changeons la quantité de flou à 20. Le Y va être deux. Nous devons également réduire l'opacité à 10 pour cent. Plutôt bien. Ensuite, diminuons la hauteur à 92 aussi. Je vais l'aligner sur le fond. Aussi, nous avons besoin de l'indicateur de la maison. Allons de l'avant et copions-le à partir d'un de nos écrans précédents comme ceci. Plutôt bien. Maintenant, il est temps de créer nos onglets. Fondamentalement, nous allons avoir trois onglets différents. Celui à l'onglet, l'onglet de notification et un onglet de profil. Allons de l'avant et plaçons une image. Dans le dossier Icônes, vous avez également un robinet ou un dossier avec trois icônes différentes. Je vais les placer tous un par un. Alors changeons leur place. Cette icône de notification va se trouver au milieu et le profil doit être sur le côté droit. Maintenant, réglons le rembourrage entre eux. Tout d'abord, je vais les sélectionner tous comme ceci et à partir de la section d'alignement, je vais cliquer sur distribuer l'espacement horizontal comme ceci. Après cela avec ces indicateurs, je peux facilement régler le rembourrage entre eux à 90. Plutôt bien. Ensuite, nous avons besoin d'un indicateur circulaire pour montrer que ces onglets sont actifs. Je vais créer un cercle. Faisons cinq par cinq. Je vais choisir la pipette pour sélectionner la même couleur que notre icône. Allons l'aligner au centre. Plutôt bien. C' est le rembourrage supérieur va être un pic de cellules. Comme ça. Maintenant, allons les regrouper, ça va être notre portefeuille. Plutôt bien. Nous avons également une notification et un profil. Sélectionnez-les tous, regroupez-les. Encore une fois, je vais l'appeler Onglets, et nous allons l'aligner au centre comme ça. Il rembourrage supérieur va être de 24 pixels comme ça. Maintenant, on a presque fini. Cependant, je vais créer quelques composants afin de vous rendre la vie beaucoup plus facile. Sélectionnez ce portefeuille de groupe et je vais cliquer sur « Créer une icône de composant ». On y va. Maintenant, nous venons de créer un composant. Ensuite, copions ceci et je vais créer une nouvelle page. Appelons ça des symboles, et je vais le coller ici. On y va. Ensuite, j'ai besoin de copier et coller ces deux icônes, alors sélectionnons-les, copions-les et collez-les dans la page des symboles juste ici. Fantastique. Fondamentalement pour chaque icône, nous avons besoin de deux états différents, l'état actif et l'état de désactivation. Ces bleus seront notre état actif et ces gris foncé seront notre état de désactivation. Ce que nous allons faire, c'est créer deux états différents ici. Maintenant, je vais le dupliquer. Détachons-le de son maître comme ça. Retirez le cercle et je vais changer la couleur pour ce gris foncé. Choisissons ces pipette et sélectionnons celle-ci. Le code couleur est 3A, 3A et 3A. Maintenant, je vais sélectionner ces cadres de portefeuille et cliquez sur « Créer un composant », comme ceci. Changons le nom en portefeuille/l'actif. Renommez-le en portefeuille/actif. Plutôt bien. En fait, comme vous pouvez le voir, il s' agit d'une instance des composants maîtres. Notre composant principal est là. Je vais couper ça. Collons ici pour que nous puissions avoir le composant maître. Je vais enlever celui-là, et on y va. Une fois de plus, nous allons le renommer en portefeuille/actif. Nous allons faire la même chose pour ces deux icônes aussi. Pour notification, je vais le dupliquer. Déplaçons-le sur le côté gauche. Changeons la couleur pour ce bleu, comme ça. J' ai aussi besoin de ce cercle, donc je vais le copier et le coller ici. Assurez-vous qu'il est totalement aligné. Sélectionnez ces deux couches, regroupez-les, et écrivez une notification/active, et cliquez sur « Créer un composant » comme ceci. La seconde sera notification/déactive. Pour le profil aussi, je vais le dupliquer. Changeons sa couleur pour celle bleue. Je vais copier et coller ce cercle aussi, les regrouper et appelons-le profil, actif. Cliquez sur « Créer un composant ». Le dernier doit être le profil désactif comme celui-ci et cliquer sur « Créer un composant ». Nous avons oublié de créer un composant de ceci, la notification active. Cliquez sur créer des composants pour celui-ci aussi. Comme vous pouvez le voir, nous avons un autre cadre ici, alors supprimons cela. On n'en a pas besoin. Plutôt bien. Nous avons six composants différents. Maintenant, comment peut-on les utiliser ? Revenons à notre Page 1, et maintenant nous devons remplacer nos icônes par nos composants. Allons aux actifs. Ici, nous avons trois composants différents. Placons le portefeuille actif ici, plutôt bien. Aussi, je vais les enlever tous les deux. Placons également la notification de désactivation. Plutôt bien. Aussi le profil désactif, sélectionnez-les tous, cliquez et répartissez l'espacement horizontal, alignez-les verticalement, et nous allons régler le rembourrage sur 90, comme ceci. Encore une fois, regroupez-les et je vais l'appeler onglets. Alignons ce groupe au centre. Plutôt bien. Maintenant, nous devons aligner ces deux icônes en haut de ce groupe. Sélectionnons-les tous et cliquez sur Aligner vers le haut. Plutôt bien. Je vais te montrer pourquoi on a fait ça. Supposons que vous allez en faire l'actif, au lieu de changer nos icônes encore et encore, maintenant nous pouvons facilement aller à la section de l'encens et à partir de ce menu déroulant, nous pouvons facilement choisir désactif ou actif. Plutôt bien. Regroupons maintenant nos éléments. Je vais sélectionner ces onglets et aussi notre rectangle et ces indicateurs d'accueil. Regroupez-les et je vais l'appeler barre d'onglets. La dernière chose que nous devons créer est une autre carte ici. Sélectionnez ces cartes de solde. Je vais maintenir la touche Commande et cliquer dessus. Copiez ceci, et collez-le ici. Changons la hauteur à 146, comme ça. Je vais le déplacer vers le bas et réglons le rembourrage supérieur à 24 pixels. Plutôt bien. Alors je vais choisir ce bouton. Je vais maintenir la touche Commande et sélectionner ce Rectangle 2. Ensuite, faisons un clic droit sur ce Rectangle 2 parce que je vais copier et coller les propriétés de ces boutons, j'ai besoin de ce dégradé. Cliquez sur « Copier les propriétés », et je vais sélectionner ces cartes et nous allons la coller ici. Plutôt bien. Cependant, n'oubliez pas de changer le rayon de coin également. Parce que nous collons que les propriétés de ces boutons, nous devons donc le changer à 40 une fois de plus. Plutôt bien. Après cela, je vais sélectionner ces cercles, les copier, les coller ici comme ça. Plutôt bien. Déplaçons ces violettes un peu vers le bas et celle bleue un peu vers le haut. Maintenant, je vais dupliquer ce rectangle comme ça le déplacer vers le bas et maintenant je peux facilement masquer ces cercles. Utilisons Rectangles 6, qui est le rectangle supérieur, et ces cercles et cliquez sur le masque. Cependant, n'oubliez pas de supprimer ces ombres portées. Je pense que c'est une bonne idée de changer la place de ces deux cercles. Je vais déplacer ces bleus vers le bas et cette violette pour obtenir quelque chose comme ça. Mettons-les un peu à l'échelle. Maintenant, ça a l'air génial. Ensuite, nous avons besoin d'un calque de texte, alors nous allons en insérer un. Écrivons vérifier vos comptes bancaires » comme ceci, et augmentons la taille de la police à 20 points. Je vais le rendre blanc. Changeons aussi le cadre de ceux-ci pour obtenir quelque chose comme ça. Alors je vais l'aligner sur ma carte. Nous devons choisir les deux, l' aligner verticalement et le rembourrage gauche devrait être de 32 pixels. On a presque fini. La seule chose que nous devons ajouter est une flèche droite plus petite. Placons une image. Utilisons une petite flèche et placez-la ici. Plutôt bien. Allons l'aligner verticalement. Fantastique. Rembourrage droit va être 32 aussi bien. Maintenant, il est temps de sélectionner tous nos éléments. Choisissons ces groupes de masse, ces Rectangle 7 aussi. Ces textes calque et cette petite flèche, les regrouper et appelons ça carte de comptes bancaires. C'est tout. Très bien les gars, c'était une vidéo alignée. Cependant, comme vous pouvez le voir, vous pouvez créer ces tableaux de bord incroyables et modernes pour notre application financière. La dernière chose à faire est de renommer notre tableau d'art en page d'accueil. Très bien les gars, merci beaucoup d'avoir regardé cette vidéo. J' espère que vous l'avez apprécié et je vous verrai dans la prochaine vidéo. 84. Le menu: Salut, tout le monde, et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons concevoir ensemble notre écran de menu. Fondamentalement, lorsque l'utilisateur clique sur cette icône de menu hamburger en haut de cet écran de page d'accueil, notre menu doit glisser dans le côté gauche de l'écran. Tout d'abord, je vais aller de l'avant et insérer un nouveau tableau d'art ici. Alors appuyez sur « A » et choisissons iPhone 11 Pro ou X. assez bon. Ensuite, je vais le renommer Menu comme ça. Après cela, nous devons aller de l'avant et exporter l'écran parce que nous allons en avoir besoin. Cependant, n'oubliez pas de masquer d'abord la barre d'état et cet indicateur d'accueil. Je vais vous dire pourquoi. D' abord, nous allons l'exporter. la section Exporter, vous pouvez choisir 2x afin d' obtenir une meilleure résolution et le format devrait être PNG. Vous pouvez également choisir JPG, mais PNG est très bien. Cliquez sur ce bouton « Exporter la page d'accueil ». Dans notre dossier Assets, je vais aller de l'avant et créer un nouveau dossier. Écrivons Exports et enregistrez-le ici. N' oubliez pas d'afficher votre barre d'état ainsi que votre indicateur d'accueil. Plutôt bien. Maintenant, il est temps de placer notre image exportée ici. Allons de l'avant et choisissez cela dans notre dossier Assets. Voilà, Exportations, Page d'accueil. Je vais le placer ici. Fantastique. La raison pour laquelle j'ai caché la barre d'état et aussi cet indicateur d'accueil était parce que maintenant nous devons déplacer l'écran sur le côté droit. Si on ne les cachait pas, leur place serait gâchée ici. Il n'est donc pas logique de déplacer la barre d'état et l'indicateur d'accueil vers le côté droit. Ce n'est pas possible. Maintenant, passons un peu sur le côté droit. Je vais mettre le X à 266 comme ça. Plutôt bien. Après cela, j'ai besoin de placer un calque de superposition afin de le rendre plus sombre. Allons de l'avant et créons un rectangle. Je vais glisser et déposer comme ça. Rendons-le un peu plus grand, mettons-le en noir, et diminuons l'opacité à 30 pour cent comme ça. C'est plutôt bon. Ensuite, nous devons créer notre menu. Créons un autre rectangle ici. Glisser-déposer. Parfois, lorsque vous créez un nouveau calque, il peut être placé à l'extérieur de votre tableau d'art. Comme vous pouvez le voir en ce moment, c'est en dehors de mes nombreux tableaux d'art, alors déplacons-le à l'intérieur. On y va. Ensuite, continuons et changeons la largeur à 281 comme ceci. La hauteur devrait être de 812, et je vais le rendre blanc. Plutôt bien. Ensuite, double-cliquez sur cela afin d'entrer dans le mode d'édition et je vais sélectionner ces deux nœuds, en haut à droite et en bas à droite comme ceci. Augmentons le rayon de coin à 20. Plutôt bien. Cependant, je vais le rendre lisse, alors augmentons ce montant à 60 pour cent. Plutôt sympa. Maintenant, nous pouvons copier et coller cet indicateur de maison comme ceci. Je vais le placer au centre et au bas. Plutôt bien. De quoi avons-nous besoin pour ce menu ? En fait, nous avons besoin de cette image de profil, donc je vais la copier et la coller ici, déplacer sur le côté gauche, et son remplissage gauche devrait être de 30 pixels comme ceci. Plutôt bien. Laisse-moi zoomer. L' autre chose que nous devons ajouter est le nom de l'utilisateur et le nom d'utilisateur. Insérez un texte ici. Je vais écrire à Emma Ashley comme ça. Je vais changer la police pour Montserrat. Plutôt bien. Mettons-le en gras et la taille de la police devrait être de 16 points et je vais changer la couleur du texte en 3A3A et 3A. Plutôt bien. Puis dupliquez-le, déplacez-le vers le bas, et ici je vais écrire le nom d'utilisateur. Écrivons @emma_ashley et puis je peux changer le chemin vers normal et aussi la taille de la police à 14 comme ceci. Le rembourrage supérieur doit être nul et maintenant sélectionnons les deux, regroupez-les et alignez-le avec notre image de profil comme ceci. Le remplissage gauche doit être de huit pixels. Plutôt bien. Maintenant, il est temps de créer nos sous-menus. Tout d'abord, insérons un texte. Le premier menu sera Paiements comme celui-ci et la taille de la police devrait être de 18 points, la police devrait être Montserrat, et le poids devrait être régulier. Cependant, j'ai besoin de changer la couleur pour être et FC comme ceci. Déplaçons un peu vers le haut. Ensuite, nous devons placer une icône pour cela. Allons de l'avant et plaçons une image. Ici, dans le dossier Icônes, vous avez le dossier Menu et nous avons six icônes. Pour l'instant, choisissons Paiements, placez-le ici. Plutôt bien. Sélectionnons-les les deux et alignons-les verticalement comme ceci et le remplissage gauche devrait être de huit pixels. Regroupez-les. Ensuite, je vais créer un arrière-plan pour cela parce que nous allons avoir différents états donc lorsque le sous-menu est sélectionné, son arrière-plan devrait être un peu plus sombre. Créons un rectangle ici. Je vais glisser et déposer comme ça et réglons la hauteur à 60. Je vais double-cliquer dessus et utilisons ces deux nœuds, haut à droite et en bas à droite, et définissez le rayon de coin à 14 comme ceci. N' oubliez pas de les rendre lisses. Plutôt bien. Après cela, je vais changer la couleur en F2F4 et F8 pour obtenir quelque chose comme ça et nous allons déplacer ce calque vers le bas. Plutôt bien. Alignons notre texte à notre arrière-plan verticalement. Jusqu'à présent, si bon. Ensuite, la prochaine chose dont nous avons besoin est une flèche droite, donc je vais aller de l'avant et placer une flèche, icônes, et ici nous avons cette petite flèche. Mettons-le ici. Alors je vais le déplacer comme ça. Enfin, changeons sa couleur. Je vais le sélectionner. Assurez-vous de ne pas sélectionner le cadre. Vous devez sélectionner la forme, alors appuyez et maintenez la touche « Commande » ou « Contrôle » de votre clavier et sélectionnez cela. Maintenant, nous sélectionnons la forme. Ensuite, je vais choisir le compte-gouttes et sélectionnons la même couleur que notre icône. Après cela, nous devons aligner cette petite flèche avec notre arrière-plan et notre texte. Comment pouvons-nous faire ça ? Tout d'abord, nous allons l'aligner avec le texte lu comme celui-ci. Parce que nous avons déjà aligné notre texte au centre, nous sommes donc sûrs que cette icône est également alignée sur notre arrière-plan. Son bon rembourrage va être de 32 pixels, comme ceci. Comme vous pouvez le voir, le remplissage supérieur et inférieur sont de 24 pixels et le remplissage gauche de notre groupe d'icônes et de texte devrait être de 34 pixels comme ceci et maintenant tout est fait. La prochaine chose que je vais faire est de sélectionner ce groupe et aussi la petite flèche. Encore une fois, regroupez-les et je vais le renommer Paiements. Plutôt bien. Dupliquez-le, déplacez-le vers le bas, et la distance entre le sous-menu suivant et le sous-menu précédent devrait être de 50 pixels comme ceci. Maintenant, je vais le changer en Transactions. Fantastique. Changeons aussi l'icône, donc je vais placer une nouvelle icône. Dans le dossier Menu, nous avons Transactions. Mettons-le ici et je vais supprimer celui-ci et le déplacer vers le bas, aligner avec votre texte. Plutôt bien. Nous devons également l'aligner avec notre icône de paiement. Choisissons les deux. Si vous voulez également sélectionner celui-ci, maintenez « Maj » et « Commande » ensemble ou « Maj » et « Contrôle ». cliquez dessus et nous y allons. Ils sont sélectionnés et je vais l'aligner au centre horizontalement comme ceci. Plutôt bien. Renommons ce groupe en Transactions et dupliquons une fois de plus. Le rembourrage supérieur devrait être de 50 pixels et ici je vais le changer Mes cartes et placer une autre icône. On y va. Nous avons Ma Carte ici. Supprimons l'icône précédente. Je vais le déplacer vers le bas, aligner sur notre texte verticalement, puis je vais le renommer en Mes cartes. Encore une fois, dupliquez-le, et maintenant nous devons le changer en Promotions et je vais supprimer cette icône. Mettons-en un nouveau. Nous avons les Promotions ici. Fantastique. Alignons-le avec notre groupe et alignons-le sur votre icône précédente, donc je vais sélectionner celui-ci, le cadre, et aussi celui-ci, aligner horizontalement. Plutôt bien. Comme vous pouvez le voir, cette icône est en dehors de ce dossier, donc je vais la mettre à l'intérieur et renommons ce dossier en Promotions. Plutôt bien. Dupliquez-le et voici notre dernier sous-menu. Appelons cela Économies, supprimez l'icône, et placez une nouvelle icône, économies. Alignez-le au centre et nous allons également l'aligner avec votre icône précédente comme celle-ci. N' oubliez pas de le mettre dans ce groupe et de renommer le groupe en Épargne et c'est tout. Avez-vous vu à quel point il est facile de créer votre menu ? La dernière chose que nous devons créer est un bouton de déconnexion. Ce que je vais faire, c'est trouver le bouton S'inscrire ici dans notre page d'accueil. Copiez ceci, collez-le ici. Je vais zoomer et nous allons d'abord changer ce texte pour se déconnecter. Plutôt bien. Je vais supprimer cette icône et sélectionnons ce Rectangle 2, pas le Rectangle 1. Rappelez-vous ce Rectangle 2 et le rendre plus petit comme ceci. Je vais régler la largeur à 221. Fantastique. Placons une icône. Nous avons déconnecté, placez-le ici, déplacez-le comme ça. Nous n'avons pas besoin de ce groupe de masques, donc vous pouvez le supprimer. Vérifions également le rembourrage de cette icône. Tout d'abord, je dois l'aligner sur mon texte. Sélectionnons les deux, alignons-les verticalement comme ceci, et le bon remplissage de cette icône devrait être de 24 pixels comme ceci. Plutôt bien. Last but not least, renommons le en bouton Se déconnecter. Plutôt bien. Le rembourrage inférieur doit être de 56 pixels comme ceci. C' est tout. D'accord, les gars. C' est tout pour cette vidéo. J' espère que vous l'avez apprécié et je vous verrai dans la prochaine vidéo. On se voit alors. 85. Page Cartes de crédit: Salut, tout le monde et bienvenue à une autre vidéo des partitions. Dans cette vidéo, nous allons concevoir notre écran de cartes ensemble. Sans plus tarder, commençons ça. Tout d'abord, je vais aller de l'avant et sélectionner ces pages d'accueil, le dupliquer, et je vais le déplacer juste en dessous de notre écran OTP, alors nous devons supprimer certains éléments. Tout d'abord, nous allons supprimer ces barres d'onglets, puis cette carte, ces cartes ainsi, ces images de profil, et aussi ces icônes de menu hamburger. Cependant, nous devons avoir ces indicateurs de maison noirs, alors copions-le et collons-le ici. Aussi nous devons avoir ces flèches gauche, donc je vais copier ceci et le coller ici avec la même position. En fait, Figma reconnaît automatiquement la position précédente de ces flèche gauche. Ensuite, nous allons zoomer un peu. Dans cet écran, nous avons besoin d'avoir autant d'éléments. D' abord, nous avons besoin d'un titre. Écrivons, vous pouvez vérifier vos cartes ici », comme ça. Ensuite, je vais le redimensionner assez bien, et après cela, je vais le changer en gras, et aussi définir le remplissage gauche à 30 pixels comme ceci. Le rembourrage supérieur va être de 80 pixels, jusqu'à présent, si bon. Ensuite, nous devons avoir deux cartes différentes, la carte primaire et une carte secondaire. Après cela, nous avons besoin de la section des transactions récentes. Tout d'abord, créons notre carte principale. Je vais créer un rectangle comme celui-ci. Réglons la largeur à 209, et la hauteur à 305 comme ça, et je vais changer le rayon de coin à 40. Rappelez-vous aussi de rendre ces coins lisses comme ça, et maintenant je vais vous montrer une très bonne technique. Nous allons créer un excellent arrière-plan pour notre carte principale en utilisant des dégradés radiaux. Je vais le mettre en blanc, c'est notre fond blanc, et après cela, nous devons créer nos gradients radiaux un par un. Je vais changer le gradient en radial, et définissons la première couleur sur 40D3 et F2 comme ceci. Copiez et collez ces codes de couleur pour la deuxième couleur également. Cependant, rappelez-vous de garder l'opacité de la deuxième couleur à zéro pour cent comme ceci, et maintenant je vais aller de l'avant et changer la direction de ces couleurs. Déplaçons ça comme ça. Maintenant, ajoutons un autre dégradé, il va être radial aussi, et définissons la couleur sur E100FF. Copions ceci et collez-le pour la deuxième couleur. Je vais changer la direction comme ça. Rendons-le plus grand, fantastique, et nous avons besoin d'un dégradé de plus. Allons de l'avant et ajoutons un autre dégradé radial, et je vais changer la couleur en 2B47 et FC comme ceci. Je vais copier ceci et le coller pour la deuxième couleur, et je vais changer la direction pour ici. Rallons-le plus grand. Maintenant, je vais modifier un peu les directions pour obtenir le meilleur résultat possible. Modifions ces bleu clair aussi. Pouvez-vous voir à quel point il est simple de créer ces arrière-plan ? Il est maintenant temps d'ajouter un calque de texte à cette carte. Je vais insérer un calque de texte et écrivons pour 4 500$ comme ceci. Je vais le rendre blanc. La taille de la police est correcte, donc je vais la déplacer sur le côté gauche. Laisse-moi zoomer. Son rembourrage supérieur va être de 38 pixels, et son remplissage gauche devrait être de 24 pixels comme ceci. Ensuite, dupliquons le, déplacez-le vers le bas, et ici je vais écrire le titre de cette carte. Disons que ces cartes sont pour un compte d'entreprise, donc je vais écrire compagnie, et réduisons la taille de police à 18 points. Plutôt bon, et le titre supérieur sera de trois pixels comme ça. Ensuite, nous allons ajouter un autre calque de texte pour la date d'expiration de cette carte, et je vais écrire 01/2020. Faisons un standard, et aussi je vais changer la taille de la police à 14 points, et changeons la couleur en blanc aussi. Maintenant, nous devons l'aligner. Son rembourrage à gauche doit être de 24 pixels et son rembourrage inférieur doit être de 72 pixels, comme ceci. Dupliquez-le, déplacez-le vers le bas, et ici nous devons écrire le numéro de carte. Je vais utiliser des étoiles pour les 12 premiers chiffres comme celui-ci, et pour les quatre derniers chiffres, écrivons 2204, et son rembourrage supérieur devrait être de 14 pixels comme ceci. La dernière chose que nous devons ajouter à ces cartes est le logo de la MasterCard. Je vais aller de l'avant et placer une image, et à partir du dossier logo, je vais choisir le logo MasterCard. Mettons-le ici, fantastique. Je vais le déplacer vers le bas, et son rembourrage inférieur devrait être de 32 pixels, et le bon rembourrage devrait être de 22 pixels, comme ceci. Maintenant, tout est génial. Allons de l'avant et sélectionnons tous ces éléments parce que nous devons les regrouper et appelons ça MasterCard. La dernière chose que nous devons faire est d'ajouter une ombre portée à ces cartes. Je vais l'ouvrir, et choisissons le rectangle qui est notre carte de base, et ajoutons des effets à cela. Ombre portée, je vais régler le montant à 49 et le blanc à neuf, puis changeons la couleur à 5988 et F8 comme ça, et diminuons l'opacité à 20 pour cent, fantastique. Comme vous pouvez le voir, nous venons de créer notre première carte, qui est la principale. Son rembourrage supérieur va être de 16 pixels, parfait, maintenant il est temps de créer notre carte secondaire. Je vais dupliquer celui-ci, puis je vais choisir l'outil d'échelle et je vais le réduire comme ça. Je pense que la largeur 177 est une dimension parfaite pour cela. Je vais le déplacer vers le côté droit, le rembourrage gauche devrait être de 24 pixels, et n'oubliez pas de les aligner verticalement comme ceci. Qu' est-ce qu'on va changer pour ces cartes ? La première chose qui est la plus importante est le contexte. Je vais supprimer tous ces dégradés parce que vous allez avoir une couleur blanche unie, puis sélectionnons tous les calques de texte, et je vais définir le code de couleur sur 3A3A et 3A. Ensuite, je vais changer ces montants à 4 000 comme ça, et aussi ces compagnies ramènent à la maison. La dernière chose à changer, c'est la couleur de notre ombre portée. Je vais sélectionner ce rectangle 14, et modifions la couleur en noir. Cependant, avec 10 pour cent d'opacité, maintenant il a l'air génial. Il est maintenant temps de créer notre section sur les transactions récentes. Tout d'abord, je vais avoir un titre. C' est l'écriture, les transactions récentes. Je vais augmenter la taille de la police à 22, ça va être chauve et la police devrait être Montserrat, donc tout est parfait sauf le code couleur. Je vais le changer en 3A3A et 3A, comme ça, puis nous allons l'aligner. Il est à gauche rembourrage devrait être de 30 pixels, comme ceci, et aussi nous avons oublié de vérifier le remplissage gauche de ces cartes alors sélectionnons les deux. Comme vous pouvez le voir, le rembourrage gauche est réglé sur 32 pixels, je vais le faire 30, maintenant c'est génial. De quoi avons-nous besoin ici ? Nous devons créer trois transactions différentes avec le titre, le prix et une icône. Tout d'abord, créons un autre calque de texte. Supposons que la première transaction soit liée au shopping. Je vais écrire du shopping, sélectionnons-le et je vais le rendre régulier, et aussi, diminuons la taille de la police à 18 points. Je vais changer le code couleur en 3A3A et 3A comme ça. Dupliquez-le et déplacez-le vers le bas, et maintenant nous devons écrire l'heure exacte et la date de cette transaction. Écrivons 15 mars 2019, et écrivons 20h20, puis diminuons la taille de la police à 16 points, et aussi le code couleur à BFBF et BF comme ceci. Je pense qu'il est préférable de réduire la taille de la police à 12 points peut-être. Oui, c'est génial, et le titre supérieur devrait être de quatre pixels, donc maintenant tout est génial. Alors de quoi d'autre avons-nous besoin ? Nous avons besoin d'une icône juste à gauche, donc je vais aller de l'avant et créer un cercle comme celui-ci. Il devrait être 48 par 48 pixels, puis changeons le code couleur en FFCF et 87, fantastique. Après cela, je vais apporter l'icône spécifique que j'ai déjà préparé pour vous, icônes. Ici les transactions, nous avons quatre icônes différentes, mais pour l'écran, nous avons seulement besoin de trois. Choisissons le shopping et placez-le ici. Je vais les aligner verticalement et horizontalement. Cependant, vous devez parfois aligner vos éléments manuellement afin d'obtenir un excellent équilibre visuel. Je vais le déplacer de deux pixels, et maintenant je pense que c'est génial. Alors allons le grouper, et je vais l'appeler icône du shopping. Ensuite, nous allons regrouper ces deux calques de texte et l'alignons verticalement avec votre icône. Le remplissage gauche de ces groupes de texte doit être de huit pixels comme ceci. De quoi d'autre avons-nous besoin ? Nous devons avoir le montant juste ici et aussi une petite flèche. Je vais sélectionner ces calques de texte, copier et le coller, puis je vais le déplacer en dehors de ce groupe, peut-être sur le côté droit. Changons la taille de la police à 16 points, et n'oubliez pas de l'aligner sur le côté droit, je vais vous montrer pourquoi. Écrivons moins 120$. Alignons ça avec votre groupe de texte comme celui-ci, et après cela, je vais avoir besoin d'une petite flèche. Mettons-le. Nous avons une petite flèche ici. Cependant, nous devons changer sa couleur en C7C7 et C7 comme ceci. Rappelez-vous quand vous voulez changer la couleur, vous devez sélectionner la forme pas ce pas. La forme est là. Si vous souhaitez accéder facilement à la forme, maintenez la touche Commande sur votre clavier ou la touche Ctrl si vous utilisez Windows. Ensuite, nous allons l'aligner avec ce texte. Il est bon rembourrage va être de 30 pixels, et le bon remplissage de ces montants devrait être de 16 pixels comme ceci. Tout est génial. Sélectionnons tous ces éléments, regroupez-les et appelons-le shopping. Le remplissage supérieur de cette transaction devrait être de 12 pixels comme ceci, puis dupliquons, déplacez-le vers le bas, et la distance entre eux devrait être de 16 pixels comme ceci. Renommons ça en Médecine, et celui-ci va être lié aux sons de la médecine. Changons ce titre en Médecine, et aussi nous devons changer l'heure. Je vais écrire le 13 mars 2019, et changons-le à 12:00 et 10:00. Le montant devrait être changé à 89,50$. La raison pour laquelle je vous ai dit que vous devez aligner ces textes calque le côté droit est parce que lorsque nous changeons la quantité, ces calques de texte devraient croître du côté gauche pas vers le côté droit. Puis enfin, choisissons le cercle et je vais changer la couleur en E09, et FFF. Supprimons cette icône, et je vais placer l'icône de médecine de ces dossiers de transactions, le mettre ici, et je vais l'aligner avec mon cercle, fois horizontalement et verticalement. N' oubliez pas de mettre ces icônes de médecine à l'intérieur de ces groupes de médicaments. Maintenant, nous allons dupliquer cette transaction, et je vais la changer en sport, puis nous allons changer l'heure au 10 mars 2019, et l'heure devrait être 18h50. Ensuite, changeons le montant à 99,90. Après cela, supprimons cette icône, choisissez ce cercle et changez la couleur d'arrière-plan à 87F0 et FF, et plaçons son icône spécifique, sport, placez-le ici et alignez-le avec votre cercle à la fois horizontalement et verticalement. Alors n'oubliez pas de renommer votre groupe en sport. Tout le monde, nous avons réussi à concevoir notre écran de cartes ensemble. La dernière chose à faire est de renommer ce tableau d'art en cartes, et c'est tout pour cette vidéo. J' espère que ça vous a plu, et je vous verrai dans la prochaine vidéo. 86. Page de transactions: Salut, tout le monde, et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons concevoir ensemble notre écran de transaction. Sans plus je, commençons. Tout d'abord, laissez-moi zoomer un peu et ensuite je vais insérer un nouveau plan de travail. Appuyez sur A sur mon clavier et utilisons l'iPhone 11 Pro ou X. assez bon. Laisse-moi le déplacer sur le côté gauche. Fantastique. De quoi avons-nous besoin pour cette page ? Tout d'abord, nous avons besoin d'un en-tête, avec une barre de navigation en haut, puis nous avons besoin de quelques couches de texte. Après cela, nous devons créer une carte flottante juste en bas pour nos transactions. Allons de l'avant et créons un rectangle. Je vais faire glisser et déposer, assurez-vous que ces rectangles sont à l'intérieur de votre plan de travail. Maintenant, renommons notre plan de travail en transactions. Plutôt bien. Ensuite, je vais sélectionner ce rectangle et réglons la hauteur à 245 comme ceci. Je vais double-cliquer dessus pour entrer dans le mode d'édition. Sélectionnons ces deux nœuds inférieurs parce que je vais augmenter le rayon de coin à 62. Cliquez sur « Terminé ». Après ça, je vais rendre ces coins lisses. Fantastique. Maintenant, allons de l'avant et changeons le remplissage. En fait, je vais utiliser le même gradient que ce rectangle. Allons de l'avant Copier, Propriétés, et je vais cliquer avec le bouton droit de la souris ici et le coller. Plutôt bien. Maintenant, copions et collez la barre d'état. Je vais copier ça, le coller ici, plutôt bien. Maintenant, il est temps de créer notre barre de navigation. Pour la navigation où nous avons besoin d'un titre, allons donc insérer une couche de texte et écrire des transactions. La police sera SF Pro Text et la taille de la police doit être de 17 points et gras. Ensuite, sélectionnons-le et rendons-le blanc comme ça. Alignez-le au centre. Aussi, nous allons l'aligner ici. En ce moment, vérifions les rembourrages. Il a arrêté le remplissage jusqu'à ce que ce cadre, qui est notre barre d'état, devrait être de cinq pixels comme ceci. La seule chose que nous devons ajouter pour terminer notre barre de navigation est une flèche de backlink. Allons de l'avant et plaçons une image. À partir des icônes, vous pouvez insérer cette icône Nav Flèche. Placez-le ici. Plutôt bien. Maintenant, nous allons l'aligner avec notre texte verticalement comme ceci. Encore une fois, nous devons définir le rembourrage supérieur à trois cette fois pas cinq, et le rembourrage gauche devrait être de 24 pixels, comme ceci. Plutôt bien. Je vais les regrouper et écrire la barre de navigation. Vous pouvez également créer un composant si vous souhaitez l'utiliser encore et encore. Comme vous pouvez le voir en ce moment, nous avons un composant de barre de navigation. Plutôt bien. Laisse-moi zoomer. Pour ces en-têtes de transactions, nous avons besoin d'un titre. Écrivons vos dépenses totales, et je vais changer la police à Montserrat et aussi la taille de la police à 22 points. Rendons ça régulier. Fantastique. Je vais l'aligner au centre. Changons la couleur de la police à 87F0FF comme ça, assez bien. Il est aligné sur le centre. Déplaçons un peu vers le haut. C' est le rembourrage supérieur jusqu'à ce que notre barre de navigation soit de 70 pixels comme ça, dupliquez-le, déplacez-le vers le bas. Ici, nous devons écrire le montant de nos dépenses. Tout d'abord, rendons ça audacieux. Aussi, je vais le rendre blanc, puis augmentons la taille de la police à 28 points. Assurez-vous qu'il est aligné sur le centre. Ici, nous allons écrire $1,063.30 comme ça. Le rembourrage supérieur de cette quantité devrait être de 16 pixels, comme ceci. Plutôt bien. De quoi d'autre avons-nous besoin ? Je vais aller de l'avant et dupliquer ce rectangle. Déplacez ce calque juste en dessous de notre rectangle principal. Je vais le déplacer de cinq pixels. Comme vous pouvez le voir que Y est réglé sur cinq maintenant, et changeons sa couleur en une couleur solide. Je vais définir le même bleu que nous avons utilisé pour ce calque de texte. Écrivons 87F0FF, assez bien. Notre en-tête est fait et tout est parfait. Maintenant, il est temps de concevoir notre carte. Je vais aller de l'avant et sélectionner ce rectangle, ce rectangle bleu, le dupliquer, le déplacer vers le bas. Ensuite, je vais faire un clic droit ici, et retournons verticalement comme ça. Plutôt bien. Réglons la hauteur à 541 comme ça et alignons-la vers le bas. Plutôt bien. La seule chose que je vais changer, c'est la direction de ces gradients. Je vais changer la place de ces deux couleurs comme ça. Maintenant, tout est génial. Ensuite, nous devons avoir un indicateur de maison, alors allons de l'avant et copions et collez ce blanc. Plutôt bien. Après cela, nous devons créer un indicateur qui montre que cette carte est mobile. Je vais aller de l'avant et créer un rectangle, glisser-déposer comme ça. Je vais régler la largeur à 47 et la hauteur à quatre, comme ça. Je vais le rendre complètement arrondi, le rendre blanc. Fantastique. Après cela, nous allons l'aligner au centre. Le rembourrage supérieur doit être de 16 pixels, exactement comme ceci. Ensuite, nous devons avoir une barre de recherche, donc au lieu d'utiliser des barres de recherche pré-faites, je vais vous montrer comment vous pouvez concevoir votre propre barre de recherche personnalisée. C' est si simple. Pour une barre de recherche, nous avons besoin d'un rectangle. Je vais glisser et déposer comme ça. Réglons la largeur à 315 et une hauteur à 53. Ensuite, je vais régler le rayon de coin à 16 comme ça et m'assurer qu'ils sont lisses. Fantastique. Alignez-le au centre, et changeons la couleur de remplissage à quelque chose de plus sombre que cet arrière-plan afin de créer un contraste. Écrivons 05199E. Plutôt bien. Son rembourrage supérieur devrait être de 24 pixels. Comme ça, et maintenant nous avons besoin d'un texte et d'une icône. Je vais aller de l'avant et placer une image. Choisissez « Recherche » placez-le ici, et je vais l'aligner avec notre barre de recherche verticalement. Plutôt bien. Son rembourrage gauche doit être de 16 pixels, comme les rembourrages du haut et du bas. Après cela, nous avons besoin d'un texte. Je vais écrire la recherche et la police sera SF Pro Arrondi. Changeons la couleur à la même couleur que notre icône de recherche avec l'aide de pipette, assez bon. Alignez-le verticalement avec notre barre de recherche et son remplissage gauche devrait être huit huit huit comme ça. Ensuite, sélectionnons-les tous, regroupez-les , et appelons-la barre de recherche. Fantastique. Maintenant, il est temps d'ajouter nos transactions. Afin de faciliter les choses, je vais aller de l'avant et sélectionner les transactions récentes que nous avons créées dans la vidéo précédente. Sélectionnons-les tous, copions-les, et collons-le dans l'écran, déplacons-les vers le haut. Plutôt bien. C'est le rembourrage supérieur devrait être de 24 pixels, comme ceci. Cependant, nous devons changer les couleurs afin de les rendre visibles. Je vais sélectionner tous ces titres, le shopping, médecine et le sport, et les rendre blancs comme ça. Maintenant, sélectionnons la date et l'heure, et définissons la couleur à 80E0FF comme ceci. Je vais copier cette couleur. Ensuite, sélectionnons ces flèches. Cependant, n'oubliez pas de sélectionner la forme, pas ces cadres. La forme est celle-là. Vous pouvez maintenir la touche Commande ou Ctrl sur votre clavier et cliquer dessus. Sélectionnons-les tous. Je vais coller le code couleur que nous venons de copier comme ça. Last but not least, nous devons sélectionner ces montants X et les rendre blancs. Maintenant, ça a l'air génial. Maintenant, nous devons ajouter d'autres transactions à cette carte. Allons de l'avant et sélectionnez cette transaction d'achat, dupliquez-la , déplacez-la comme ceci, et assurez-vous que son remplissage supérieur est réglé sur 16 pixels. Changer le jour au 5 Mars, comme ça, et le temps à quelque chose comme 7:20 et le montant à 255$, assez bon. Encore une fois, dupliquez-le, déplacez-le vers le bas, et cette fois je vais le rendre différent. Allons-y et renommons le pour voyager. Nous allons également changer ce titre pour voyager aussi, et le montant devrait être de 399$. Changons la date à Mars, 3 et l'heure à 5:50. Plutôt bien. La dernière chose que nous devons changer, c'est cette icône. Supprimons ces icônes d'achat, sélectionnez ce cercle et changez le champ en FF8787, comme ceci. Je vais placer une image de transactions. Ici, nous avons voyage, mettez-le ici et nous allons les aligner au centre comme ça. Renommons cette icône pour voyager. Plutôt bien. La dernière transaction devrait être le sport, donc je vais la dupliquer. Si tu veux les changer, c'est à toi de décider. Vous pouvez aller de l'avant et changer les commandes, les montants, les couleurs. Vous pouvez jouer avec cet écran afin de vous habituer à ce logiciel et au processus de conception d'un écran. Le montant devrait être le même, cependant, nous devons changer la date. Je vais le faire le 10 février, et le temps de 5h20 comme ça. Plutôt bien. Ensuite, allons de l'avant et sélectionnons toutes les transactions, regroupez-les, et appelons ça des transactions comme ceci. Maintenant, tout est fait. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. On se voit alors. 87. Page de transactions détaillées: Salut tout le monde. Bienvenue à une autre vidéo de cette section. Dans cette vidéo, nous allons concevoir ensemble notre écran de détail des transactions. Tout d'abord, je vais aller de l'avant et dupliquer ces transactions plan de travail. Ensuite, nous allons le renommer en détails de tiret de transactions. Plutôt bien. Ensuite, ce que nous allons faire est de faire glisser ces cartes vers le bas et de présenter quelques détails sur ces transactions. Ce que je vais faire, c'est d'abord de regrouper tous ces éléments. Sélectionnez ces indicateurs, la carte elle-même, barre de recherche, et ces groupes de transactions. Regroupez-les. Appelons la carte, déplacez-le juste en dessous de notre indicateur d'accueil. Alors réglons le y à 693, comme ça. Ici, nous allons placer nos coordonnées. Tout d'abord, allons de l'avant et sélectionnez ces transactions récentes prend. Je vais le copier, le coller ici. Déplaçons le haut et je vais le changer pour suivre vos dépenses. Son rembourrage supérieur va être de 32 pixels comme ça et son remplissage gauche devrait être de 30 pixels. Laissez-moi sélectionner cet écran, appuyez sur Maj et 2 comme ceci. De quoi d'autre avons-nous besoin ? En fait, nous avons quatre catégories différentes. Voyage, shopping, sport et médecine. Nous avons besoin de quatre cartes différentes avec quatre couleurs différentes pour certains jusqu'à ces montants. Allons de l'avant et créons un rectangle. Je vais glisser et déposer comme ça. Je vais régler la largeur à 153 et la hauteur à 103. Ensuite, augmentons le rayon de coin à 25 et rendons aussi lisse comme ceci. Fantastique. Enfin, nous devons changer la couleur. Je vais utiliser un gradient linéaire pour ceux-ci. Sélectionnez la première couleur et changez le code couleur en FF8787. Choisissons le second. Augmentez l'opacité à 100 pour cent. Je vais changer le code couleur en C16A6A, comme ça. Après cela, changeons la direction un peu comme ça. Maintenant, je pense que c'est plutôt bon. Que devons-nous inclure d'autre dans ces cartes ? Nous avons besoin de deux couches de texte. Le nom de cette carte qui va être Voyage et le montant total lié à cette catégorie. Tout d'abord, nous allons insérer un calque de texte et écrire voyage et je vais le rendre régulier. Diminons la taille de la police à 18 points comme ceci. Je vais changer la couleur à A73131 comme ça. Plutôt bien. Son rembourrage supérieur va être de 24 pixels et son remplissage gauche devrait être de 16 pixels comme ceci. Dupliquez-le, déplacez-le vers le bas. Rendons les choses audacieuses. Augmentons également la taille de la police à 24 points. Fantastique. Ici, nous devons écrire le montant total de toutes les transactions de voyages qui est $399. Plutôt bien. Maintenant, je vais ajouter plus de détails à cette carte afin de la rendre un peu mieux. Tout d'abord, allons de l'avant et créons un cercle comme celui-ci. Je vais régler la largeur et la hauteur à 112. Ensuite, choisissons un dégradé linéaire pour cela. Je vais choisir la première couleur et passons à F78C8C comme ceci, copiez ce coller pour la seconde. Cependant, cette fois, gardez l'opacité à zéro. Alors je vais changer la place de ces deux couleurs comme ça. Changeons la direction de cette couleur comme ceci et maintenant nous devons utiliser un masque. Cependant, comme je l'ai mentionné précédemment lorsque vous utilisez un masque, il est préférable de dupliquer ce rectangle une fois et je vais déplacer ce cercle juste en dessous de notre voyage. Choisissez le calque dupliqué et cliquez sur démasquer pour obtenir quelque chose comme celui-ci. Ensuite, allons de l'avant et sélectionnons le cercle et le déplacer un peu vers le bas comme ça. Regrouperons maintenant nos éléments. Je vais choisir ce groupe de masse, ce voyage et est le montant, et aussi notre rectangle. Regroupez-les, appelez le voyage, dupliquez-le, déplacez-le vers le côté droit et son remplissage à gauche devrait être de neuf pixels comme ceci. Ensuite, sélectionnons les deux, déplacez-les sur le côté gauche jusqu'à ce que vous obteniez un rembourrage à gauche de 30 pixels et un rembourrage à droite. Maintenant, allons de l'avant et choisissez ce Rectangle 20 et je vais changer sa couleur pour autre chose. Choisissons la première couleur. Je vais le mettre à FFCF87 comme ça. Le second sera CA9547. Plutôt bon Maintenant, nous allons choisir ce cercle et changer la couleur du dégradé ici aussi. Je vais sélectionner la première couleur et ce sera F6C57A. Copions ceci et collez-le pour votre deuxième couleur. Last but not least, nous devons sélectionner ces deux prises et changer leur code couleur à A27430. Permettez-moi de changer le titre pour faire du shopping et le montant sera de 375$. Enfin, n'oubliez pas de changer de nom. Je vais écrire des courses. Maintenant, je vais vous demander de mettre la vidéo en pause et aller de l'avant et de dupliquer une de ces cartes, de la poser ici, et je vais vous demander de la modifier pour notre carte sport. Le montant sera de 199,80. Je vais vous donner un indice qui est comme ça vous pouvez choisir ces couleurs. Il doit être quelque chose comme le bleu comme vous pouvez le voir pour cette icône de sport. Alors je vais vous montrer comment vous pouvez faire ça. Mettons-le en pause et faisons-le par vous-même. Je suis presque sûr que tu pourrais le faire tout seul. Cependant, maintenant, il est temps de le faire ensemble. Maintenant, allons de l'avant et dupliquons ces premières cartes. Je vais le déplacer vers le bas. C' est le rembourrage supérieur va être de neuf pixels. Sélectionnons ces Rectangle 20 qui est notre couche de base. Je vais changer le gradient. Choisissons la première couleur et mettez-la à 87F0FF, comme ceci. Choisissez le second et écrivez 3AA2B1. Je vais choisir ce cercle aussi. Changeons leur couleur. Je vais sélectionner le premier et nous allons le définir 73BCEB copier ceci et le coller pour la deuxième couleur aussi bien. Maintenant, je vais choisir nos calques de texte et changer le remplissage à 298693. Changons le titre en sport. Pouvez-vous voir que nous avons un grand contraste ici parce qu'avec ce cercle, nous avons créé un fond lumineux et nous utilisons une couleur plus foncée sur ce fond. Ce qui est un bon moyen de créer un bon rapport de contraste. Ensuite, changeons le montant à 199,80. Je vais renommer ce groupe en sport. Dupliquez-le, déplacez-le sur le côté droit, et je vais choisir ces Rectangle 20. Changeons la couleur. Je vais choisir le premier et écrire E09FFF et le second sera 8A46AB, comme ceci. Choisissons notre cercle et change-le aussi. Je vais choisir la première couleur et écrire D88FFF. Copions ceci et collez-le pour la deuxième couleur. Enfin, nous allons utiliser nos calques de texte et définir le code couleur sur 9137BC. Je vais changer le titre en médecine. Le montant sera de 89,50. Finalement, renommons le en médecine. Fantastique. Nous avons besoin d'une carte de plus, qui est notre carte de remboursement par carte de crédit. Allons de l'avant et choisissez ces vérifier votre carte de comptes bancaires. Copiez ceci, collez-le ici. Ensuite, je vais sélectionner ce rectangle, Rectangle 7, rappelez-vous cela et aussi Rectangle 6 qui est notre masque. Changeons la hauteur à 105 comme ça. Aussi, nous devons changer le rayon de coin à 25, ce qui est le même montant que nous avons utilisé pour ces cartes. Alors laisse-moi zoomer. Je vais aligner ce texte avec mon rectangle comme ceci. Aussi cette petite flèche va être au centre. Utilisons ces deux cercles et remontons-les pour obtenir quelque chose comme ça. Changeons ces textes en remboursement par carte de crédit, comme ceci. Renommez-le en remboursement par carte de crédit Rand nous allons le déplacer vers le bas. Il va avoir un rembourrage supérieur de 16 pixels. C' est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. On se voit alors. 88. Page de transfert: Salut tout le monde et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons concevoir ensemble notre écran de transfert. Sans plus tarder, commençons. Tout d'abord, je vais aller de l'avant et dupliquer ces détails de transactions comme ceci. Ensuite, renommons le pour transférer. Parfait. Après cela, je vais supprimer presque tous les éléments. Allons de l'avant et sélectionnons ces cartes, retirez-les, celle-ci aussi, ces deux calques de texte aussi. Cependant, nous avons besoin de l'indicateur de la maison. Nous allons copier et coller ces noirs. Copions-le et collons-le ici. Plutôt bien. Ensuite, nous devons aussi avoir notre barre de navigation. Ce que je vais faire, c'est sélectionner ces deux rectangles, les rectangles 15 et 16, les regrouper, et définissons le Y à moins 141. Fantastique. Changons ce titre en « Transférer ». Plutôt bien. De quoi d'autre avons-nous besoin pour ces pages ? En fait, nous avons besoin d'un calque de texte, alors insérons un calque de texte ici. Je vais écrire « Entrer le montant » comme ça. Ensuite, définissons la police à Montserrat. Fantastique. Je vais le rendre régulier. En outre, modifions la taille de la police à 18 points. Plutôt bien. Alignons au centre, puis changeons la couleur à 2743 et FD. Fantastique. C'est le rembourrage supérieur va être de 75 pixels comme ça. Ensuite, dupliquons le, déplacez-le vers le bas. Je vais zoomer. Ici, nous devons avoir le montant. Je vais écrire 0$ et nous allons le rendre audacieux. En outre, je vais changer la taille de la police à 36 points. Plutôt bien. Ensuite, nous devons changer la couleur de ce chiffre, car maintenant l'utilisateur n'a pas encore entré de montant. Changons-le en B6BFFF, fantastique. Alignez-le au centre et son rembourrage supérieur va être de 16 pixels, comme ceci. On a besoin d'un séparateur. Je vais aller de l'avant et créer une ligne comme celle-ci. Réglons la largeur à 224, alignons-la au centre. Changons le coup en DE, E1 et EF, comme ça, assez bien. Son rembourrage supérieur va être de 16 pixels, fantastique. Encore une fois, nous allons dupliquer cette couche de texte « Entrez le montant », déplacez-le vers le bas. Je vais écrire deux, et le rembourrage supérieur devrait être de 16 pixels. Ensuite, nous allons le dupliquer encore une fois. Ici, nous devons écrire le nom du récepteur. Écrivons Grace Addison et une taille de police devrait être de 16 points. Cependant, nous devons changer la couleur en 3A, 3A et 3A, assez bon. Nous devons également avoir une image de profil de cet utilisateur. Allons de l'avant et sélectionnez cette image de profil, copiez-la et collez-la ici. Plutôt bien. Bougez-le vers le bas. Ensuite, je vais choisir la balance aussi. Vous pouvez appuyer sur K sur votre clavier pour le sélectionner et le réduire pour obtenir une image de profil de 34 x 34 pixels. Je vais le faire 34 par 34. Fantastique. Laisse-moi le déplacer ici. Le bon rembourrage de cette photo va être de huit pixels. Ensuite, choisissons le calque de texte et je vais l'aligner verticalement. Plutôt bien. Cependant, nous devons changer cette photo. Je vais double-cliquer dessus pour choisir cette photo. Ensuite, nous allons de l'avant et exécutons notre contenu réel Plugin. Plutôt bien. Allons à Avatars et ici je vais cliquer sur Femelle, fantastique. Maintenant, nous allons regrouper notre calque de texte et notre image de profil, l' aligner au centre et son remplissage supérieur sera de 16 pixels. Plutôt bien. La prochaine chose que nous devons créer est notre pavé numérique. Je vais créer un rectangle et définissons la largeur à 89 et le haut à 70, comme ceci, et je vais changer le rayon de coin à 17. Cependant, assurez-vous de rendre ces coins lisses avec ce curseur. Fantastique. Après cela, nous devons changer la couleur de fond. Écrivons F5, F6 et F8. Plutôt bien. Laisse-moi zoomer. Ici, nous devons insérer un calque de texte, donc je vais en écrire un. Cependant, nous devons changer la police pour SF Pro Text, comme ceci, la rendre moyenne et une taille de police devrait être de 24 points. Enfin, changeons la couleur à 27, 43, et FD, assez bon. Je vais l'aligner au centre, à la fois verticalement et horizontalement, et m'assurer que votre calque de texte est aligné au centre également ici. Alors nous allons les regrouper. Je vais l'appeler un, le dupliquer, le déplacer sur le côté droit. La distance entre eux va être de 10 pixels. Dupliquons encore une fois, sélectionnez-les tous, dupliquez-les, déplacez-les vers le bas, assez bien, encore et encore une fois. Fantastique. Ensuite, nous allons de l'avant et modifions ces calques de texte un par un. Ça va être deux, trois, quatre, cinq, six, sept, huit, neuf. Celui-ci va être un point. Ici, nous allons avoir 0 et le dernier va être changé. Supprimons ce calque de texte. Je vais les sélectionner tous, les regrouper, et appelons ça le pavé numérique, fantastique. Alignez-le au centre et déplacons-le un peu vers le haut. Pour celui-ci d'abord, je vais changer sa couleur parce que c'est notre bouton Envoyer. Je vais utiliser le même gradient que nous avons utilisé pour notre en-tête. Choisissons ce rectangle, rectangle 15, cliquez avec le bouton droit sur cela et copiez les propriétés, comme ceci. Je vais le coller ici. Plutôt bien. Laisse-moi zoomer. Ensuite, nous devons insérer une icône de flèche droite. Placons une image. le dossier Icônes, je vais choisir la flèche droite. Placez-le ici. Plutôt bien. Alors, allons de l'avant et nous allons à l'échelle, comme ça. Je pense que c'est génial maintenant. Allons l'aligner au centre. Fantastique. Ensuite, renommons ce groupe en Send, plutôt bon. Le rembourrage inférieur de ces pavés numériques va être de 74 pixels, comme ceci, et le rembourrage droit à gauche va être de 44 pixels. Maintenant, tout est fait. C' est assez incroyable, n'est-ce pas ? Les gars, c'est tout pour cette vidéo. Nous avons créé avec succès notre page de transfert ensemble. J' espère que vous l'avez apprécié et je vous verrai dans la prochaine vidéo. 89. Page de confirmation: Salut, tout le monde, et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons concevoir ensemble notre écran de confirmation, donc sans plus tarder, commençons. Tout d'abord, je vais aller de l'avant et dupliquer ce plan de transfert, assez bien. Renommons le en Confirmation, fantastique. Ici, je vais le changer en Transaction, comme ça, et nous devons supprimer ce pavé numérique. Cependant, gardons cette photo parce que nous en avons besoin, et aussi je vais aller de l'avant et supprimer ce montant, ce séparateur et ce calque de texte aussi. Ensuite, modifions ce calque de texte en, « Vous avez envoyé avec succès 99$ à Grace Addison », comme ceci. Ensuite, je vais redimensionner un peu ce calque de texte, l' aligner au centre, rendre plus petit, assez bon, puis je vais aller de l'avant et changer la taille de la hauteur à 27. Encore une fois, alignez-le au centre. Je vais zoomer, assez bien, puis sélectionnons ce nom et le rendre audacieux, comme ça. Après cela, j'ai besoin d'une icône verte, alors allons de l'avant et plaçons une image. Ici, nous avons fait, plaçons ça. Je vais déplacer ce calque de texte vers le bas et le remplissage supérieur de cette icône Done sera 108, comme ceci, alors déplacons ces deux éléments vers le bas. Le remplissage supérieur de ce calque de texte sera de 16 pixels comme ceci. Après cela, je vais choisir cette image de profil et utiliser l'outil Échelle et l'échelle un peu et je vais définir la largeur et la hauteur à 78 x 78 pixels, fantastique. Ici, je vais avoir l'indicateur circulaire sur l'état de cet utilisateur, alors allons de l'avant et sélectionnez cet indicateur vert, copiez ceci, et je vais le coller ici, déplacer vers le bas, puis assurez-vous que vous avez a choisi l'échelle aussi, et je vais la mettre à l'échelle et mettons-le à 80 par 80 pixels comme ceci. Alignons-le avec votre image de profil, fantastique, groupez-les, et appelons-le image de profil. Je vais l'aligner au centre et son rembourrage supérieur sera de 40 pixels, comme ça, assez bon. Ensuite, nous devons placer deux boutons différents ici, le bouton Exécuter à nouveau et un bouton Confirmation. Continuons et copions et collez ce bouton Vérifier à partir de notre page de vérification OTP. Je vais copier ceci, coller ici, le déplacer vers le haut, et le changer pour Exécuter à nouveau, assez bien. Assurez-vous de renommer également ce groupe, Exécuter à nouveau. Son rembourrage supérieur sera de 100 pixels, comme ça et pour le bouton de confirmation, je vais choisir le bouton d'inscription de notre écran d'accueil, copier ceci, coller ici. Je vais le déplacer comme ça, puis retirons cette flèche droite. Après cela, je vais sélectionner ce calque de texte et notre groupe de masse, aligner au centre comme ceci et changeons ce texte en Confirmation, fantastique. Encore une fois, alignez-le au centre et ici aussi. Enfin, renommons le groupe Confirmation et le remplissage supérieur sera de 16 pixels, assez bon. Très bien, les gars, c'est tout pour cette vidéo. Nous avons créé avec succès notre page de confirmation ensemble. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 90. Page de notification: Bonjour tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons aller de l'avant et concevoir notre page de notification. Allons de l'avant et dupliquons cet écran de confirmation puis supprimez tous les éléments. Renommons le en notification. Plutôt bien. De quoi avons-nous besoin pour cette page ? Tout d'abord, nous devons avoir une barre d'état. Je vais aller de l'avant et choisir ce noir. Copions ceci et collez-le ici. Plutôt bien. Ensuite, nous avons besoin de ces tarauds aussi. Je vais copier celui-ci, sélectionner l'écran, le coller ici. Mais ici, nous devons le changer de ce portefeuille à cette icône de notification. Je vais sélectionner cette icône de portefeuille. Faites-le l'actif et choisissez cette icône de notification et la rendre active comme ceci. Assez simple, n'est-ce pas ? En haut, nous avons besoin d'une barre de recherche. Cependant, nous n'allons pas en créer un nouveau car nous avons déjà créé notre barre de recherche personnalisée. Je vais aller de l'avant et le choisir à partir de la page des transactions. Copiez ceci, collez-le ici, déplacez-le vers le haut. Cependant, nous devons changer la couleur d'arrière-plan de notre barre de recherche. Choisissons ce rectangle et je vais définir le code couleur sur F5, F6 et FA comme ceci. Maintenant, vérifions les rembourrages. Le rembourrage supérieur va être de 24 pixels comme ça et ici nous avons besoin d'un titre. Allons de l'avant et sélectionnez cette piste vos dépenses, Copiez ceci, collez-le ici. Je vais le déplacer vers le haut et nous allons le changer pour que vous pouvez vérifier vos notifications ici. Ensuite, redimensionnons pour obtenir quelque chose comme ça. Le rembourrage à gauche doit être de 30 pixels. C' est le titre supérieur qui va être 32 pixels comme ça. Alors de quoi d'autre avons-nous besoin ? Vous avez raison, nous avons besoin de nos messages ou de nos notifications. Pour chaque notification, nous allons avoir une image de profil, un nom et un court message. Allons de l'avant et choisissez cette image de profil à partir de notre page de confirmation. Je vais copier ceci et le coller ici. Ce sera notre modèle. Ensuite, je vais choisir l'outil d'échelle et nous allons le faire 40 par 40 comme ça. Plutôt bien. Déplaçons ça vers le haut. Je vais zoomer et ici, insérons un calque de texte et écrivons le nom. Je vais le rendre régulier et aussi diminuer la taille de la police à 14 points. Plutôt bien. Ensuite, nous allons l'aligner avec notre image de profil comme ça et le rembourrage gauche va être huit huit huit comme ça. Puis dupliquez-le, déplacez-le vers le bas et voici, écrivez un message. Nous allons le changer plus tard. Je vais définir la taille de la police à 16 points et nous allons l'aligner avec notre image de profil comme ceci. Ensuite, nous devons changer sa couleur à 27, 43, et FD comme ça. Nous avons aussi besoin d'une flèche droite. Je vais le placer à partir de notre fichier d'actifs, utilisons une petite flèche, placez-le ici. Ensuite, je vais changer sa couleur en B47 et FC comme ça. Je vais choisir ce cadre, qui est notre petite flèche et nous allons l'aligner avec notre image de profil comme ceci. Il est bon rembourrage va être de 30 pixels comme ça. Plutôt bien. En fait, nous avons besoin d'un séparateur ici aussi. Je vais créer une ligne comme celle-ci. Réglons la largeur à 315, alignez-le au centre, et changez sa couleur en DEE 1E et F. Son rembourrage supérieur va être de 16 pixels. Plutôt bien. Après cela, je vais sélectionner tous ces éléments, les regrouper, appelons-le message. Plutôt bon, puis je vais créer un composant. Cliquez sur cette icône. Plutôt bien. Puis dupliquez-le, déplacez-le vers le bas. Son rembourrage supérieur va être de 16 pixels. Ensuite, je vais le dupliquer encore une fois, jusqu'à ce que j'obtienne quelque chose comme ça. Maintenant, au lieu d'écrire l'information une par une, nous allons utiliser notre favori affligeant contenu libre. Allons-y et lançons, puis je vais vous montrer comment vous pouvez insérer réel plus tard dans une seconde. Sélectionnez ces images de profil en maintenant la touche Commande et en cliquant sur cette maintenez Maj ici et la touche Commande ensemble et sélectionnez toutes ces images. Plutôt bien. Allons dans les avatars et cliquez sur mâle ou femelle. On y va. Avez-vous vu à quel point il est facile d'ajouter du contenu réel à votre écran ? Si vous n'êtes pas satisfait des photos, vous pouvez facilement cliquer dessus et elles seront changées. Maintenant, nous devons ajouter nos noms. Cependant, parce que ces premiers sont notre composant maître, nous devons d' abord le dupliquer, pour en créer une instance, puis supprimons le composant maître comme ceci et ensuite utilisons la couche de nom des femelles. Je vais sélectionner celui-ci, maintenir Shift, celui-ci aussi et celui-ci. Puis allez-y et exécutez le plugin réel de contenu et dans la section nom, cliquez sur ces trois points et je vais changer le type de nom en femelle. Vous pouvez postuler et nous y allons. Pouvez-vous voir à quel point il est facile d'appliquer ces changements ? C' est assez incroyable. Maintenant, il est temps de sélectionner un [inaudible]. Sélectionnons-les et cliquez sur ces trois points. Cette fois, je vais le mettre à main et cliquez sur « Appliquer » et c'est tout. La seule chose que nous ne pouvons pas ajouter au hasard est ce message. Nous devons les changer un par un. Sélectionnez ces SMS et je vais écrire Arlene juste vous envoyer 20$ comme ça et la suivante Teresa vous a envoyé 99$. Fantastique. Afin de compléter cet écran, nous devons faire seulement une chose de plus et c'est changer ces statuts. Comme vous pouvez le voir maintenant, nous n'avons que le statut actif. Ce que je vais faire est, par exemple, sélectionner ce statut et de le changer en statut d'entreprise. Je vais écrire F7, A700 comme ça. Copions ces codes de couleur et je vais choisir celui-ci aussi et celui-ci. Collons-le ici et nous avons besoin d'un état de plus. Utilisons celui-ci et changeons-le en CE, CE et CE. Copiez ceci et collez-le pour le second. Plutôt bien. Celui-ci va être notre état hors ligne. Les gars, nous avons créé avec succès notre page de notification ensemble. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. On se voit alors. 91. Le profil utilisateur: Salut, tout le monde et bienvenue à une autre vidéo de cette section. Dans cette vidéo, nous allons concevoir ensemble notre écran de profil. Sans plus tarder, commençons par dupliquer ces écrans de notification. Je vais le renommer en profil. Ensuite, supprimons ces éléments et cette barre de recherche aussi. Cependant, nous allons garder notre barre d'onglets car nous devons désactiver ces icônes de notification. Activer ces icônes de profil. De quoi avons-nous besoin pour cette page ? Tout d'abord, nous avons besoin d'un titre, donc je vais insérer un texte. Écrivons, profil. Alors passons à Montserrat. Je vais le rendre en gras et changeons la taille de la police à 40 points. Je vais changer la couleur en 3A, 3A et 3A. Le remplissage supérieur doit être de 46 pixels et le remplissage gauche doit être de 30 pixels. Alors de quoi d'autre avons-nous besoin ? En fait, je vais aller à l'écran de profil ici, profil terminé. Laisse-moi zoomer. Ici, je vais copier et coller ces deux formes. Copiez ceci et collez-le ici. Déplaçons les tout en bas de la barre d'état. Je vais les déplacer du côté droit. Maintenant, c'est parfait. Nous avons également besoin de tous ces champs de texte, alors sélectionnons-les, et copions-les ici. Tout d'abord, je vais aller de l'avant et supprimer ces icônes de tiques. Ensuite, sélectionnons ces titres. Fantastique. Changons la couleur en 3A, 3A et 3A. En outre, nous devons sélectionner le nom d'utilisateur, le prénom, le nom et la date de naissance, et changeons leur couleur à 2743 et FD. Enfin, nous devons changer la couleur de nos lignes. Sélectionnons-les tous ici et je vais changer la couleur du trait à DEE1EF. Nous devons avoir un bouton de déconnexion en bas, donc je vais aller de l'avant, et copier et coller le bouton de déconnexion. Mettons-le ici et je vais l'agrandir. Sélectionnons ce rectangle 2 et définissons la largeur à 315. Sélectionnez ce bouton, alignez-le au centre. Je vais sélectionner cette icône, et nous allons la déplacer sur le côté droit jusqu'à ce que vous obteniez un rembourrage droit de 24 pixels. Fantastique. Son rembourrage inférieur, il va être de 30 pixels. Maintenant, sélectionnons nos champs de texte. Leur rembourrage inférieur va être de 42 pixels. Last but not least, nous devons aller de l'avant et sélectionner ces nom, et nom d'utilisateur, et cette image de profil, les copier et les coller ici, déplacer vers le bas. Sélectionnez ces images de profil. Je vais choisir l'outil de balance. Mettons-le à l'échelle jusqu'à ce que vous obteniez une image 64 x 64 pixels. Son rembourrage gauche sera de 30 pixels et son rembourrage supérieur sera de 32 pixels. Je vais déplacer ces textes sur le côté droit. Tout d'abord, je vais changer ces noms d'utilisateur pour le statut qui est en ligne. Je vais les sélectionner tous les deux parce que nous devons changer la couleur et la police. Tout d'abord, définissons la police sur SF Pro Text. La police de ce nom va être de 20 points et il devrait être moyen. Pour le statut, mettons-le à la lumière et il devrait être 16 points. Je vais descendre. Son rembourrage supérieur va être de huit pixels. Sélectionnez les deux, regroupez-les. Alignons l'image de votre profil. Maintenant, sélectionnons les deux et je vais changer leur couleur. C' est vrai, 2743 et FD. Très bien, les gars, c'est tout pour cette vidéo, j'espère que ça vous a plu. Je te verrai dans la prochaine vidéo. On se voit alors. 92. Onboarding des pages: Salut tout le monde et bienvenue à la dernière vidéo de cette section. Dans cette vidéo, nous allons concevoir ensemble nos pages d'intégration. En fait, nous devons concevoir trois pages différentes qui illustrent les caractéristiques les plus importantes de cette application. Sans plus tarder, commençons par insérer un nouveau plan de travail. Je vais appuyer sur « A » sur mon clavier, et choisissons un iPhone 11 Pro ou X. Je vais le placer ici, et nous allons le renommer en Onboarding 1. De quoi d'autre avons-nous besoin pour cet intégration ? En fait, nous devons placer le logo ou l'icône de cette application. D' abord, allons-y et amenons-le d'ici. Je vais copier ceci et le coller. Plutôt bien. Cependant, je vais supprimer ce titre. Je n'ai pas besoin de ça. Ensuite, nous allons le dégrouper pour obtenir un excellent cadre. Fantastique. Je vais l'aligner au centre. Son rembourrage supérieur sera de 84, alors déplacons-le vers le haut. Cependant, nous devons changer la valeur X à 167 et la valeur Y à 80. Maintenant, comme vous pouvez le voir, nous avons un rembourrage supérieur de 80 pixels. Faisons 84, comme ça. Maintenant, tout est génial. Ensuite, nous devons placer une illustration ici. Allons de l'avant et plaçons notre illustration. Le premier sera le Sauvage. Placez-le ici. Je vais l'aligner au centre et son rembourrage supérieur sera 45, comme ça. Alors ici, je vais placer un cercle, alors créons un. Je vais le glisser et le déposer, puis changeons le code couleur en F5F6 et FA, comme ceci. Cependant, assurez-vous que ce cercle se trouve à l'intérieur de votre plan de travail. Plutôt bien. Je veux changer la largeur et la hauteur à 470, et réglons le X à moins 125 et le Y à 423. Plutôt bien. Ensuite, nous devons avoir un titre, une description, un indicateur de page et un bouton Suivant. Insérez le texte ici et écrivez  : « Économisez votre argent commodément. » Ensuite, je vais changer la police pour Montserrat. Il va être gras, et la taille de la police devrait être de 24 points. Ensuite, je vais changer la couleur à 2743 et FD, puis redimensionnons pour obtenir quelque chose comme ça. Cependant, je vais définir la ligne de hauteur à 36 pour la rendre plus visible. Laisse-moi zoomer. Je vais régler le X sur le 30 pour obtenir un rembourrage à gauche de 30 pixels et le Y à 488. Plutôt bien. Puis dupliquez-le, déplacez-le vers le bas, et cette fois je vais changer la police en SF Pro Text, rendre régulière, et la taille de la police devrait être de 18 points. Ensuite, changeons la couleur en 7C2AFF, et puis je vais écrire, « Obtenez cinq pour cent de cashback pour chaque transaction et dépensez-la facilement. » Plutôt bien. Changons la hauteur de la ligne à 28. Je vais le déplacer vers le bas. Son rembourrage supérieur devrait être de 22 pixels comme ceci. Maintenant, il est temps de créer notre indicateur de page. Laisse-moi zoomer un peu. J' ai besoin d'un rectangle, alors glisser-déposer pour créer un rectangle. Sa largeur va être de 22 et sa hauteur devrait être de cinq, comme ceci. Faisons-le complètement arrondi. Je vais changer la couleur en 2A46 et FF. Plutôt bien. Dupliquez-le, déplacez-le vers le côté droit, et le remplissage entre eux devrait être de quatre pixels. Obtenez un cercle, cinq par cinq, puis changeons la couleur en B5BFF. Plutôt bien. Encore une fois, dupliquez-le, déplacez-le sur le côté gauche jusqu'à ce que vous obteniez un remplissage gauche de quatre pixels, regroupez-les et appelez-le Indicateurs. Plutôt bien. Réglons le X à 30 et le Y à 736. Fantastique. La dernière chose que nous devons créer est notre bouton Suivant. Espérons que nous pouvons aller de l'avant et copier le bouton de connexion. Je vais le copier et le coller ici. Je vais le déplacer vers le bas, puis changeons ces textes en suivant. Après ça, je vais ouvrir ce groupe de masques. Sélectionnons ce Rectangle 1 et Rectangle 2 en maintenant Maj, et je vais diminuer la largeur à 153, comme ceci, et le déplacer vers le côté droit. Fantastique. Ensuite, nous allons déplacer notre texte aussi, et nous allons obtenir un 24 pixels gauche, 24 pixels haut et bas. Déplaçons cette flèche droite sur le côté gauche aussi bien jusqu'à ce que vous obteniez un remplissage droit de 24 pixels. Plutôt bien. Je vais le renommer en Next. Ensuite, définissons son X à 192 et le Y à 702, et c'est tout. Comme vous pouvez le voir, nous avons également un rembourrage droit de 30 pixels. Je vais le dupliquer. Supprimons cette illustration. Je vais en placer un nouveau. Cette fois devrait être la Safety Box, placez-le. Allons l'aligner sur le centre, et maintenant, allons de l'avant et changeons ce titre en « Sécurisez votre argent gratuitement et obtenez des récompenses ». Redimensionnons ensuite ce calque de texte. Plutôt bien. Je vais changer cette description aussi, alors écrivons, « Obtenez l'application de paiement la plus sûre jamais et appréciez-la. » Plutôt bien. Évidemment, nous devons changer nos indicateurs. Sélectionnons ce bleu, déplacez-le vers le côté droit, comme ceci, et sélectionnez-le du milieu, déplacez-le vers le côté gauche avec le même rembourrage de quatre pixels. Plutôt bien. C'est tout pour cette page, et nous allons le dupliquer. Encore une fois, je vais supprimer cette illustration. Mettons-en un nouveau, Trading. Fantastique. Je vais l'aligner sur le centre, et voici, nous allons écrire, « Profitez du trading d'actions sans commission », comme ceci, et la description devrait être changée en «  Investir en ligne n'a jamais été aussi facile qu'il ne l'est en ce moment. » Changeons nos indicateurs. Je vais le déplacer sur le côté droit et déplacons ce dernier vers le milieu. Plutôt bien. Après cela, nous devons changer notre bouton parce que maintenant nous devons le changer de Next à Get Started. Tout d'abord, supprimons cette flèche droite. Ensuite, je vais sélectionner ce Rectangle 1 et Rectangle 2, puis augmentons sa largeur à 211. Plutôt bien. Je vais bouger un peu ces cercles pour obtenir quelque chose comme ça. Enfin, nous allons aligner ce texte au centre et écrire Get Started. Je vais bouger un peu ces cercles, et renommons ce bouton pour commencer. Les gars, c'est tout pour cet écran aussi. Nous avons créé avec succès 24 écrans différents et vous avez appris à appliquer toutes les techniques dont vous avez besoin pour créer une interface utilisateur moderne et fantaisie. J' espère que vous avez apprécié cette section. C' était un long voyage. Merci beaucoup de l'avoir regardé, et je vous verrai dans la prochaine vidéo. On se voit là-bas. 93. Introduction au projet de page d'accueil: Salut tout le monde, bienvenue dans une autre section du cours. Dans cette section, nous allons commencer à concevoir une page d'apprentissage moderne et belle, ou une application mobile fictive appelée brouillon. Nous commencerons par créer ensemble notre système de conception. Nous allons créer nos styles de texte, nos styles de couleur, puis nous allons passer au processus de filature. Nous allons créer une image filaire basse fidélité avec toutes les sections nécessaires telles que la section héros, la section fonctionnalité, puis nous aurons des plans d'adhésion comme vous pouvez le voir, et la section Q&R, et enfin, le pied de page. Après cela, nous allons commencer à concevoir notre page de destination ensemble, nous allons concevoir la section héros et ensuite nous allons concevoir une section de carte de crédit, la section de statistiques, la section de soutien, les plans d'adhésion, et ainsi de suite. Enfin, nous rendrons notre design interactif en ajoutant des interactions à nos éléments. Nous allons créer un prototype haute fidélité pour notre page de destination. Comme vous pouvez le voir, nous avons différentes animations, par exemple, ici nous avons une transition cool pour cette carte de crédit alors nous aurons cet effet accordéon comme celui-ci. La carte va se développer et vous apprendrez toutes ces techniques cool. Êtes-vous prêt à commencer à concevoir votre site web ? Je te vois dans la prochaine vidéo. 94. Qu'est-ce qu'une page d'accueil ?: Hé, bienvenue. Dans cette vidéo, nous allons parler des pages de destination. Nous allons apprendre ce qu'est une page de destination et comment elle doit être structurée. Qu' est-ce qu'une page de destination ? Une page de destination est une page Web conçue à des fins de marketing. C' est la page sur laquelle les visiteurs atterrent après avoir cliqué sur un lien dans une annonce Google, YouTube, Facebook, etc. Les pages Web sont généralement conçues pour une variété d'objectifs. Une page de destination est spécialement conçue pour les campagnes marketing, ou disons, convertir les visiteurs en clients. Quelle est la différence entre une page d'accueil et une page de destination ? Eh bien, sur une page d'accueil, vous pouvez trouver tant de distractions telles que des liens, des images, etc. autre côté, la page de destination est super concentrée car moins de distractions équivaut à un taux de conversion plus élevé. Quels sont les éléments essentiels d'une page de destination ? partie la plus importante d'une page de destination est la section héros. Une section de héros comprend un titre, un titre de soutien, un appel à l'action ou un CTA en bref, etc. Comme il s'agit de la partie la plus importante de votre page de destination, vous devez vous assurer de la concevoir parfaitement. Ensuite, nous pouvons avoir les fonctionnalités axées sur les avantages. C' est la section que nous présentons les caractéristiques les plus importantes du produit ou du service. Après cela, nous pouvons avoir des preuves sociales ou des témoignages sociaux. Enfin, nous pouvons avoir un argument final. C' est un bon endroit pour un autre CTA. Vous pouvez avoir différentes sections en fonction du type de votre page de destination. Jetons un coup d'oeil à une page de destination bien conçue sur Dribbble et analysons. Cette page de destination est conçue par Martin Strba, j'espère que je prononce son nom correctement. Comme vous pouvez le voir, cela commence par la section héros. Ici, nous avons un gros titre clair. En passant, vous devriez toujours utiliser le style de texte H1 pour notre titre principal. Nous en parlerons plus tard. Ensuite, nous avons un appel à l'action ou CTA, commencez par votre conseiller en risques. Nous avons également une barre de navigation en haut et nous avons une image ici. Si vous faites défiler un peu vers le bas, nous aurons les trois avantages les plus importants de ce produit : analyser, prédire, décider. Ensuite, nous aurons quelques solutions, comment cela fonctionne, quelques témoignages, un autre appel à l'action, et enfin un pied de page. C' est ainsi qu'une page de destination typique est structurée. D'accord, les gars. J' espère que vous avez une meilleure compréhension des pages de destination maintenant. J' espère que ça vous a plu, et je vous verrai dans la prochaine vidéo. 95. Configurer votre projet: Salut là. Dans cette vidéo, nous allons mettre en place notre projet et ensuite nous commencerons à concevoir notre page de destination ensemble. Tout d'abord, ouvrez Figma et je vais cliquer sur cette icône plus en haut à droite pour créer un nouveau fichier. Si vous ne voyez pas ces deux icônes, c'est parce que vous êtes dans une section Brouillons, et c'est tout à fait bien. n'y a pas de différence ici car en ce moment je fais partie d'une équipe de cours Design, c'est pourquoi j'ai ces deux icônes supplémentaires. Mais si vous êtes sous la section Brouillons ou la section Récents, vous suffit de cliquer sur cette icône plus pour créer un nouveau fichier. Cliquons sur ça. On y va. Je vais le nommer, page de destination. Plutôt bien. De quoi avons-nous besoin pour ce projet ? Tout d'abord, vous allez créer notre guide de conception. Il va inclure nos styles de typographie et nos styles de couleurs. Je vais appuyer sur « A » sur mon clavier pour créer un plan de travail. Lorsque j'appuie sur « A » sur mon clavier, cet outil de cadre sera sélectionné et je vais cliquer et faire glisser comme ceci pour créer un cadre. Je vais le rendre un peu plus grand. Maintenant, je vais changer le remplissage à F2F6FF pour obtenir ce bleu très clair comme fond. Alors je vais le nommer, guide de conception. Plutôt bien. Ce guide de conception va avoir deux sections différentes, la typographie et les couleurs. Je vais sélectionner l'outil « Rectangle » en haut et cliquer et faire glisser pour créer un rectangle comme celui-ci. Je vais le rendre blanc comme ça et je vais le faire arrondir. Je vais augmenter le rayon d'angle à 30. Fantastique. Maintenant, ajoutons de l'ombre portée. Ajoutons un effet à cela. On y va. Par défaut, il est défini sur Ombre portée. Je vais changer un peu ses paramètres. Tout d'abord, je vais changer la couleur à 16194F. Fantastique. Ensuite, je vais régler le montant de flou à 100 et Y à 50. Plutôt bien. Enfin, permettez-moi de réduire l'opacité de 25 % à 10 %. Ça a l'air incroyable, n'est-ce pas ? Maintenant, laissez-moi vous dire pourquoi j'ai choisi ces montants. Si vous ne savez pas comment définir ces montants, par exemple, le flou, le Y, vous pouvez toujours utiliser la formule que j'utilise et cela fonctionne presque tout le temps, et c'est si simple. Vous avez juste besoin de prendre la quantité de flou et de le diviser par 2. Par exemple, ici j'ai utilisé 100 et ici je peux même écrire 100/2 pour le diviser par 2. Dans ce cas, vous obtiendrez une très bonne et douce ombre portée. C' est exactement ce que je voulais. Laissez-moi le agrandir un peu, puis je vais sélectionner l'outil « Texte ». Je vais appuyer sur « T » sur mon clavier et cliquer ici. Permettez-moi de réduire un peu la taille pour l'instant aussi, par exemple, 36. Ici, je vais écrire la topographie, plutôt bien. Pour ce projet, je vais utiliser une police Google, qui s'appelle Roboto. Il est disponible par défaut dans Figma, vous n'avez donc pas besoin de l'installer. Permettez-moi de changer le poids de gras à moyen et je vais aussi diminuer la taille de la police de 36-24 points comme ceci. Maintenant, je vais le dupliquer, « Commande D » ou « Contrôle D » sur votre clavier. Je vais le déplacer vers le bas. Laisse-moi zoomer. Si vous voulez zoomer, vous pouvez maintenir la touche « Commande » ou « Contrôle » enfoncée, et en même temps, vous pouvez utiliser la roue de votre souris. Ici, nous allons écrire la rubrique H1 60 en gras. Je vais le sélectionner et le rendre audacieux. Pour cette rubrique H1, je vais choisir la taille de police de 60. Laisse-moi écrire 60 ici. Plutôt bien. Je vais zoomer un peu et m'assurer de changer la hauteur de la ligne. La hauteur de ligne ici par défaut est définie sur auto, mais assurez-vous d'écrire 150 pour cent. Vous ne verrez peut-être aucun changement ici en ce moment, mais laissez-moi vous montrer un exemple. Je vais ajouter un calque de texte et écrire quelque chose. Bonjour monde. Nous créons notre guide de conception. Je vais le rendre plus petit. Comme vous pouvez le voir ici, nous avons trois lignes. Ai-je raison ? Si je le mets à auto. La hauteur de la ligne est maintenant définie sur 70. Si vous cliquez sur cela, vous pouvez voir le numéro par défaut, et maintenant cela semble correct, mais si je le change à normal, et si je diminue cette taille de police à par exemple, 30 points. Maintenant, vous pouvez voir que cette ligne de texte n'est pas si lisible. Mais si je change cette hauteur de ligne de 35 qui est automatique à 150 pour cent, vous pouvez voir qu'elle est plus lisible, en particulier pour les paragraphes de ligne. Si crucial d'avoir suffisamment d'espace entre vos lignes. C' est la raison pour laquelle nous utilisons 150 pour cent. Qu'est-ce que ça veut dire ? Si je supprime cela, cela signifie que je multiplie la taille de police 30 par 1,5 et j'obtiens 45. Quand je le mets à 150 pour cent, cela signifie que ma hauteur de ligne est maintenant de 45. Maintenant, nous devons créer notre style de texte. Comment puis-je faire ça ? C'est si simple. Je vais sélectionner ce calque de texte et je vais cliquer sur ces quatre points icône. On y va. Cliquez sur cette icône plus « Créer un style ». Ici, laissez-moi écrire Heading/H1. Mais pourquoi ai-je utilisé une barre oblique entre ces deux mots ? Lorsque je souhaite créer une catégorie pour mes styles de texte ou mes styles de couleur, je peux utiliser une barre oblique entre eux. Je vais mettre ce H1 dans la catégorie de titre et nous allons créer un style. On y va. Ici, nous pouvons voir que le nom de cette catégorie est la rubrique, et sous cette rubrique j'ai H1. Chaque fois que vous voulez modifier ce style de texte, vous pouvez facilement cliquer sur cette icône, « Modifier le style », et modifier votre style de texte. Vous pouvez même ajouter une description ici. Vous pouvez modifier le nom, modifier les propriétés , etc. Maintenant, je vais agrandir un peu ce rectangle pour obtenir plus d'espace pour travailler. Ensuite, je vais le dupliquer, le déplacer vers le bas. Ici, nous allons créer notre deuxième style de texte. Mais avant de faire cela, nous devons nous assurer que nous détachons ce calque de texte de son style. Si je passe à cette section, vous pouvez voir que nous avons une icône appelée detach style. Je vais cliquer dessus et maintenant ce calque de texte n'est plus connecté au style que nous venons de créer. Laisse-moi changer ce H1 en H2 et ça va être 50. Je vais réduire la taille de la police à 50 points et c'est tout. N' oubliez pas de créer votre style de texte. On va écrire la rubrique H2. Plutôt bien. Encore une fois, laissez-moi le dupliquer, le déplacer vers le bas, le détacher de son style. Laissez-moi le changer en H3, et je vais le faire 40 et aussi laisser moi le changer ici. Enfin, nous allons créer un style Heading/H3. Nous devons créer six styles de texte supplémentaires. Je vais le dupliquer, le déplacer vers le bas, le détacher de son style. Ici, écrivons les rubriques H4 et 24. Permettez-moi de réduire la taille de la police à 24 points et de créer les styles de texte en-tête H4. Maintenant, laissez-moi le dupliquer encore une fois. Je sais que c'est un processus ennuyeux, mais croyez-moi, plus tard, ce processus sera payant. Laissez-moi le détacher de son style et cette fois, nous allons créer notre intro body. Je vais écrire le corps intro texte 24 régulier. Pour cette introduction du corps, je vais changer un poids de gras à régulier, et une taille de police sera de 24. Laissez-moi créer le style. Je vais écrire du corps/intro. Plutôt bien. Je vais le dupliquer, le déplacer vers le bas et le détacher de son style. Ici, nous allons écrire par main et la taille de la police va être de 20 points. Enfin, permettez-moi de réduire la taille de la police à 20 et de créer le style de texte, corps/main. Nous devons créer trois styles de texte supplémentaires pour terminer nos styles de typographie. Nous allons le dupliquer, le déplacer vers le bas, le détacher de son style, et nous allons écrire du texte moyen 17 régulier. Plutôt bien. Permettez-moi de changer la taille de police à 17 points et de créer le style. Maintenant, je ne veux pas créer de catégorie ici, donc je vais écrire du médium, je vais le dupliquer, le déplacer vers le bas, le détacher de son style. Maintenant, nous allons écrire du texte de légende et ça va faire 15 points. Laissez-moi créer le style et je vais l'appeler légende. Last but not least, je vais le dupliquer, détacher de son style, et laissez-moi écrire, petit texte et ça va faire 13 points. Laissez-moi créer le style. Je vais le nommer petit. C' est tout ce que nous avons fait avec nos styles de topographies. Je vais les organiser maintenant. Je vais maintenir la touche « Maj » enfoncée sur mon clavier et cliquer sur chaque calque pour les sélectionner en même temps. Ensuite, je peux aller à la section d'alignement, en haut à droite est l'inspecteur. En haut, vous pouvez voir cette section d'alignement et sur le côté droit, vous obtiendrez cette icône, Plus d'options. Je vais sélectionner « Distribuer l'espacement vertical », et si je fais un zoom avant, je peux voir ces poignées roses. Je peux cliquer et modifier l'espacement facilement. Je vais le mettre à, par exemple, 40. Je peux fixer le montant ici. On y va. Tout a l'air bien. Maintenant, vous pouvez vous demander, pourquoi ai-je besoin de créer ces styles de texte ? En fait, ce n'est pas une tâche obligatoire, mais si vous voulez devenir un très bon concepteur UI UX, et si vous voulez travailler pour une agence, par exemple, vous devez vous assurer d'utiliser des styles de texte et des styles de couleurs presque tout le temps, et nous devons nous assurer de garder tout organisé. Quels sont les avantages de l'utilisation d'un textile ? Laissez-moi vous le montrer en une seconde. Je vais créer un calque de texte et ici je vais écrire bonjour. C' est un texte normal. Si je veux appliquer l'un de ces styles de texte, je peux facilement sélectionner ce calque de texte et je peux me diriger vers cette section Texte dans l'inspecteur et me laisser cliquer sur l'icône de style. De là, vous pouvez trouver les styles que nous venons de créer. Nous avons corps, titre et ces trois styles de texte. Je vais le mettre à, par exemple, H3. Je vais zoomer et maintenant je vais créer un autre calque de texte et me laisser écrire monde. Parce que j'utilise un style de texte pour ce calque de texte précédent, et c'est exactement ce que je veux. J' ai donc deux calques de texte avec les mêmes styles de texte. Lorsque le projet est terminé, supposons que le client ou la société vous demande de modifier la taille de police de l'en-tête 3, si vous n'utilisez pas de styles de texte, vous devez aller modifier manuellement toutes vos couches de texte avec les mêmes propriétés. Mais lorsque vous utilisez un style de texte, vous pouvez facilement vous diriger vers ce style de texte et cliquer sur « Modifier le style de texte ». Par exemple, vous pouvez augmenter la taille de la police à 50. Maintenant, comme vous pouvez le voir, les modifications s'appliquent à ces deux calques de texte en même temps et si je monte un peu, vous pouvez voir que cette rubrique 3 a également été modifiée. Je vais annuler l'opération en maintenant « Commande Z » ou « Contrôle Z ». Parfait. C'est pourquoi nous utilisons un style de texte. Je vais les enlever. Lorsque vous concevez pour le web ou même pour mobile de nos jours, assurez-vous de ne pas utiliser une taille de police plus petite en bas de 13 points. Parce que ce sera trop difficile pour les utilisateurs de le lire. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 96. Créez vos styles de couleur: Hé, dans cette vidéo, nous allons commencer à créer nos styles de couleurs ensemble. Sans plus tarder, commençons. Permettez-moi d'agrandir ces plans de travail de guide de conception comme ceci. Enfin, je vais sélectionner tous ces calques et les regrouper en appuyant sur Commande G ou Ctrl G sur mon clavier. Laisse-moi appeler ça Typographie. Ensuite, je vais créer un autre rectangle ou je pourrais juste le dupliquer, mais laissez-moi vous montrer quelque chose. Je vais glisser et déposer quelque chose comme ça. En fait, je vais appliquer les mêmes effets et le même style que ceux utilisés pour ces rectangle. Si vous maintenez enfoncée la touche Commande ou Ctrl votre clavier et cliquez sur ce rectangle, il sera sélectionné. Vous pouvez également vous diriger vers la liste des calques et la choisir manuellement. Maintenant, je vais faire un clic droit sur cela, et en bas, je vais aller à Copier et Coller, et à partir d'ici, je vais copier les propriétés. Ensuite, je vais sélectionner ce rectangle que je viens de créer. Je vais faire un clic droit sur cela, allez dans les propriétés Copier et Coller et Coller. On y va. Nous avons aussi le même style pour ce rectangle. Ce rectangle est pour nos couleurs. Je vais l'agrandir comme ça, assez bien, et laissez-moi créer un carré. Je vais maintenir la touche Maj enfoncée, faire glisser et déposer comme ça. Réglons la largeur et la hauteur à 250 par 250, et enfin, augmentons le rayon de coin à 30. Plutôt bien. Pour ce projet, je vais créer six styles de couleurs différentes. La première couleur va être notre couleur primaire. Le code couleur est 554DDE. Plutôt bien. Ce violet va être notre couleur primaire. Comme les textiles, pour créer un style de couleur, vous pouvez facilement vous diriger vers la section Remplissage et cliquer sur l'icône de style et cliquer sur cette icône plus. Ici, je vais écrire la Primaire. On y va. Nous venons de créer notre premier style de couleur. Ensuite, je vais frapper Command D ou Control D sur mon clavier, déplaçant sur le côté droit, et je vais le détacher de son style et ensuite je vais définir le code couleur sur F44E77. Plutôt bien. Celui-ci sera notre couleur Accent, et nous allons l'utiliser pour, par exemple, les boutons d' appel à l'action, ou lorsque nous voulons mettre en évidence une partie spécifique du texte, nous utiliserons cette couleur. Laissez-moi créer un style de couleur, et je vais écrire Accent. Fantastique. Encore une fois, dupliquez-le. Je vais le déplacer vers le bas, je vais le détacher de son style, et laissez-moi changer le code couleur en 6A6D9E. Ce sera notre lumière secondaire, mais je vais l'appeler lumière secondaire, alors laissez-moi écrire Secondary/Light, parce que nous allons en avoir une aussi sombre. Je vais le dupliquer, le déplacer sur le côté droit, détacher de son style, et laissez-moi changer le code couleur en 16194F. Laissez-moi créer un style de couleur, Secondary/Dark. Fantastique. Nous devons en créer deux de plus. Je vais le dupliquer, le déplacer vers le haut. Celui-ci sera notre couleur neutre et nous l'utiliserons, par exemple, pour notre arrière-plan. Je vais le détacher de son style et me laisser changer le code couleur en F2F6FF. Plutôt bien. C' est une couleur bleu clair, c'est la même couleur que celle que nous avons utilisée pour notre fond ici. Je vais créer un style de couleur, laissez-moi l'appeler Neutre. Fantastique. Enfin, nous allons créer un style de couleur pour notre trait. Je vais le dupliquer, le déplacer vers le bas, laissez-moi le détacher de son style, retirer le remplissage et y ajouter un trait. Je vais régler le trait sur deux, l'épaisseur n'a pas d'importance maintenant, parce que plus tard nous pouvons le modifier lorsque nous appliquons ce style à nos formes, mais ce qui importe, c'est la couleur. Je vais définir le code couleur sur CAD6F1. Plutôt bien. Laissez-moi zoomer pour que vous puissiez le voir. Fantastique. Laissez-moi le sélectionner et ajouter un style de couleur. Je vais écrire Stroke. Je vais rendre ce rectangle un peu plus petit comme ça. Permettez-moi de sélectionner toutes ces formes, les regrouper, de maintenir la touche Maj enfoncée et de sélectionner ce rectangle. Enfin, dans l'inspecteur en haut, vous pouvez les aligner horizontalement et verticalement. Ce que nous voulons ajouter ici, c'est un titre. Laissez-moi agrandir un peu ce rectangle. Je vais déplacer ces couleurs vers le bas, et laissez-moi sélectionner ce texte typographique, copiez-le, Commande C ou Ctrl C, sélectionnez ce rectangle et collez-le, Commande V ou Ctrl V. Ici, je vais écrire Couleurs. Plutôt bien. Le rembourrage gauche va être de 65, et son rembourrage supérieur sera de 60. Nous avons créé avec succès notre guide de conception. En fait, vous pouvez ajouter plus d'éléments à vos guides de conception tels que logos, icônes, boutons, curseurs, etc. Mais pour l'instant, nous avons juste besoin de notre style typographique et de nos styles de couleurs. Les gars, c'est tout pour cette vidéo, j'espère que vous avez apprécié, et je vous verrai dans la prochaine vidéo. 97. L'encadrement de votre projet - Partie 1: Hé, là. Maintenant que notre guide de conception est prêt, il est temps de créer un filaire pour notre page de destination. Qu' est-ce que le filamage ? Wireframing est un moyen de concevoir un site Web ou une application mobile à un niveau structurel. En d'autres termes, c'est le schéma de notre conception et cela nous aide à concevoir notre projet facilement et plus commodément, donc sans plus tarder, commençons. Je vais ouvrir Figma et ici, juste à côté de ce guide de conception que nous avons créé, je vais créer un autre plan de travail. Je vais appuyer sur « A » sur mon clavier et sur le côté droit dans l'inspecteur, vous pouvez voir que nous avons des plans de travail pré-construits. Je vais choisir le bureau. La dimension est 1440 par 1024. On y va. Laisse-moi zoomer, plutôt bien. Nous avons créé notre plan de travail, mais comme vous pouvez le voir, il n'est pas assez grand pour mettre tous nos éléments sur. Tout d'abord, je vais aller de l'avant et le renommer. Double-cliquez sur son nom dans la liste de la couche et je vais le renommer en filaire. Parfait. Ensuite, dans l'inspecteur, je vais régler la hauteur à 6 100, pour l'instant. Si je fais un zoom arrière, vous pouvez voir que maintenant, nous avons beaucoup plus d'espace pour travailler. En fait, nous avons deux types de filature, un filaire à faible fidélité et un filaire à haute fidélité. Quelle est la différence ? Un filaire de faible fidélité ne comprend que les éléments nécessaires. Il n'a pas besoin d'avoir les couleurs des marques, ni d'espacement précis, ni même d'icônes. Nous essayons juste d'imaginer comment va être notre produit final. Nous utiliserons des formes simples telles que rectangle, cercle, etc, pour visualiser notre projet final à un niveau structurel. D' un autre côté, un filaire haute fidélité nécessite plus de contenu, comme la taille exacte de vos boutons, vos éléments, ou même vous pourriez inclure des couleurs. Mais pour l'instant, nous allons créer un filaire de faible fidélité ensemble. Commençons. Pour notre page de destination, nous avons besoin d'une section héros, haut de n'importe quelle page de destination ou de n'importe quel site Web, nous allons avoir besoin d'une section héros, qui est la partie la plus importante du site Web. Tu devrais y prêter tant d'attention. Je vais sélectionner l'outil rectangle dans la barre d'outils et me laisser cliquer et faire glisser pour créer un rectangle simple. Alors je vais aller de l'avant et changer notre remplissage. Permettez-moi de choisir l'un de nos styles de couleurs que nous avons déjà créés. Je vais choisir le secondaire, le sombre, plutôt bien. Ça va être notre section héros. Au sommet, nous allons avoir besoin d'une barre de navigation. Une barre de navigation va inclure un logo, puis quelques éléments de menu au milieu, et enfin un bouton de connexion sur le côté droit. Je vais aller de l'avant et créer un autre rectangle. Permettez-moi de maintenir la touche Maj enfoncée, cliquer et de faire glisser pour créer un carré. Je vais le mettre à 60 par 60. Rendons ça arrondi, plutôt bien. Alors je vais choisir une autre couleur. Laisse-moi choisir secondaire, la lumière. Cela va représenter notre logo, alors nous avons besoin de quelques éléments de menu. En fait, nous avons besoin de trois éléments de menu, mais plus tard si vous voulez, vous pouvez le changer et vous n'avez pas besoin de vous soucier des détails. Afin d'illustrer les éléments de menu, je vais aller de l'avant et créer un autre rectangle comme celui-ci. Je vais le faire arrondir. Permettez-moi d'augmenter le rayon d'angle de l'inspecteur. Fantastique. Laissez-moi changer de couleur, mais cette fois, je vais aller avec cette couleur neutre. Permettez-moi de le dupliquer deux fois, le déplacer sur le côté droit. Pour dupliquer la couche, vous pouvez appuyer sur « Commande D » ou « Contrôle D » si vous utilisez de nouveau Windows. Ces trois formes représentent nos éléments de menu. Ensuite, sur le côté droit, nous avons besoin d'un bouton de connexion. Laissez-moi créer un autre rectangle, un peu plus grand, et je vais le faire arrondir et laisser moi changer sa couleur pour cet accent. Vous pouvez utiliser, par exemple, cette couleur secondaire comme nous l'avons utilisé pour notre logo. Mais puisque nous allons utiliser la couleur accentuée pour le bouton Se connecter dans notre produit final, vous pouvez également l'utiliser. Ici, je vais écrire des choses. Laissez-moi créer un calque de texte et laissez-moi écrire bouton, fantastique. Permettez-moi de le sélectionner et d'augmenter sa taille de police à 17 pour l'instant. Pour l'instant, nous n'allons pas utiliser nos styles de texte parce que cela n'a vraiment pas d'importance pour cette étape. Mais si vous préférez, vous pouvez également utiliser vos styles de texte. Par exemple, vous pouvez utiliser celui-ci, moyen. Permettez-moi de sélectionner ces deux couches. Je vais maintenir la touche Maj enfoncée de mon clavier et cliquer sur les deux. Ensuite, je vais les aligner à la fois horizontalement et verticalement. Permettez-moi de le rendre un peu plus grand, afin que nous puissions utiliser nos styles de texte et par exemple, nous pourrions utiliser main 20. Laisse-moi l'aligner. Jusqu' à présent, si bon. Nous avons créé notre barre de navigation avec succès. Maintenant, laissez-moi sélectionner tous ces éléments de menu et les regrouper. Je vais l'appeler menu. Je vais appeler ce logo rectangle. Enfin, sélectionnons ces deux couches, regroupez-les, et appelons-le bouton. Enfin, vous pouvez sélectionner ces trois couches, puisque nous les avons regroupées. Encore une fois, regroupez-les et alignez ce dernier groupe horizontalement au centre. Vous pouvez lui donner un nom comme Nav Bar. Jusqu' à présent, si bon. Nous avons créé notre navbar. Ensuite, pour notre section héros, nous devons avoir une image sur le côté droit et un grand titre, une description et un appel à l'action. Un appel à l'action est en fait un bouton. Par exemple, un bouton d'inscription ou un bouton de connexion. Ça n'a pas d'importance pour le moment. Ce qui compte, c'est de créer des formes pour représenter notre titre, notre description et notre bouton. Je vais aller de l'avant et sélectionner l'outil rectangle, cliquez et faites glisser comme ceci. Je vais le faire arrondir. Laissez-moi l'agrandir un peu, puisque c'est notre titre et c'est parfait, alors je vais changer sa couleur à notre ligne secondaire, le dupliquer, le déplacer vers le bas. Je vais le rendre un peu plus petit pour montrer qu'il s'agit d'un texte. Encore une fois, dupliquez-le, faites-le un peu plus petit. Fantastique. Ce sera notre titre. Je vais les regrouper et appelons ça le titre. Ensuite, nous devons avoir une description. Pour notre description, nous pourrions utiliser la même technique et créer un rectangle comme celui-ci. Je vais le faire arrondir comme ça. Je vais choisir cette couleur neutre pour notre description, la déplacer vers le bas, rendre un peu plus petite, dupliquer, la rendre un peu plus petite. C' est tout. Notre description est également prête. Je vais sélectionner les trois éléments, les regrouper, « Command G » ou « Control G » sur votre clavier. Donnons-lui un nom de description. Fantastique. Enfin, nous avons besoin d'un bouton. Je vais aller de l'avant et double-cliquer sur ce bouton pour le sélectionner. Je vais le copier, « Commande C » ou « Contrôle C » sur votre clavier. Ensuite, sélectionnez ce grand rectangle, qui est notre arrière-plan, et appuyez sur « Commande V » ou « Contrôle V ». Maintenant, comme vous pouvez le voir, ce bouton n'est pas à l'intérieur de notre groupe de navbar, c'est à l'extérieur. Je vais le mettre ici. Le côté gauche de notre section héros est prêt. Mais qu'en est-il du bon côté ? Pour le bon côté, je vais utiliser une image très simple. Je vais choisir le rectangle, cliquer et faire glisser comme ça, le rendre arrondi. Je vais augmenter le rayon du coin. Mettons-le à 40. Enfin, changeons sa couleur en lumière secondaire. Plutôt bien. Maintenant, je vais sélectionner ces trois groupes et les déplacer un peu vers le bas. Permettez-moi de le rendre un peu plus petit et de le déplacer vers le bas. Comme vous pouvez le voir, notre section héros est terminée. Nous venons de créer une image filaire basse fidélité pour notre section héros. Dans la prochaine vidéo, nous poursuivrons notre parcours pour compléter cette page de destination. se voit dans la prochaine. 98. L'encadrement de votre projet - Partie 2: Hé, là. Après la section héros, je vais créer la section fonctionnalité. Pour ce service, qui est une application bancaire en ligne, nous allons créer trois sections de fonctionnalités. Qu' est-ce qu'une section de fonctionnalités ? Une section de fonctionnalité, comme vous pouvez le deviner, est une section qui fournit à l'utilisateur les fonctionnalités de ce service particulier ou de ce produit particulier, qui dans notre cas est l'application. Donc, pour chaque section de fonctionnalité, nous allons avoir besoin d'un titre, d'une description, et sur le côté droit, nous avons besoin d'une image. Je vais aller de l'avant et sélectionner ce titre. Dans cette description, je vais maintenir la touche Maj enfoncée pour les sélectionner tous les deux. Appuyez sur « Command C » ou « Control C » sur votre clavier, puis appuyez sur « Command V » ou « Control V » sur votre clavier et déplacez-le vers le bas, comme ceci. Plutôt bien. Laissez-moi les aligner sur le côté gauche. Comme vous pouvez le voir, notre description ici n'est pas assez lisible. Donc, ce que je vais faire, je vais aller de l'avant et sélectionner ce tableau d'art filaire et changer sa couleur d'arrière-plan. Comme vous pouvez le voir par défaut, il est réglé sur blanc, mais je vais le changer pour notre couleur neutre. Laisse-moi faire défiler. Maintenant, nous pouvons changer la couleur de notre description pour autre chose. Par exemple, lumière secondaire. Pour ce titre, on pourrait le changer en obscure secondaire. Fantastique. Maintenant, sur le côté droit, nous avons besoin d'une image et nous pouvons la copier et la coller. Pouvez-vous voir à quel point il est simple de créer un filaire à faible fidélité ? Je vais copier et coller. Bougez-le vers le bas. Mais je vais le rendre un peu plus petit, comme ça. Plutôt bien. En fait, dans cette section, nous allons présenter une carte de crédit sur le côté droit. C' est pour ça que je l'ai fait ressembler à une carte de crédit. Le rapport d'aspect illustre son objectif. Maintenant, nous avons besoin d'une autre section de fonctionnalité donc je vais sélectionner tous ces trois éléments et appuyer sur « Commande D » ou « Contrôle D » sur votre clavier pour les dupliquer, les déplacer un peu vers le bas comme ça. Mais cette fois, je vais changer la place de notre titre et de notre description avec notre image. Ce que je vais faire, je vais les sélectionner tous les deux, les regrouper, les déplacer vers le côté droit, et sélectionner notre image et la déplacer vers le côté gauche. Dans cette section, nous allons avoir quelques statistiques, par exemple, un graphique. Donc ce que je vais faire, je vais le rendre un peu plus petit. Ce rectangle va contenir notre tableau. Je vais le dupliquer, « Command D » ou « Control D » sur mon mot-clé, déplacer vers le haut, et le rendre un peu plus petit comme ça. Encore une fois dupliquez-le, déplacez-le vers le bas, mettez-le juste à côté de notre rectangle précédent, comme ceci. Plutôt bien. Permettez-moi de les sélectionner tous, de les regrouper et de les déplacer vers le bas. Mais pour cette fonctionnalité, je vais avoir besoin d'un bouton, d'un bouton « En savoir plus ». Ce que je vais faire, c'est déplacer un peu ce groupe de texte et faire de la place pour notre bouton. Allons de l'avant et copions ce bouton. Je vais frapper « Commande C » ou « Contrôle C. » Ici, je vais frapper « Command V » ou « Control V. » On y va. Maintenant, nous devons créer une section de fonctionnalité supplémentaire pour notre page d'apprentissage. Pour cette section de fonctionnalités, je vais avoir besoin, encore une fois, d'un titre, d'une description, ainsi que de petites images juste en dessous de la description. Permettez-moi de le copier et de le coller, « Command C » et « Command V. » Je vais le déplacer vers le bas. Ici, juste en dessous, j' ai besoin de quelques images circulaires. Laissez-moi créer un cercle. Je vais choisir l'ellipse, maintenez la touche Maj enfoncée, cliquez et faites glisser, assez bien, comme ceci. Je vais changer la couleur en lumière secondaire. Alors laissez-moi le dupliquer, déplacez-le sur le côté droit. Dupliquez-le encore et encore. Ce seront nos détenteurs d'images. Plutôt bien. Du côté droit, je vais avoir des images. Ce que je vais faire, c'est sélectionner un de ces rectangles ici. Je vais double-cliquer dessus. Laissez-moi le copier, « Commande C », « Commande V », comme ceci. Je vais le rendre un peu plus petit. Cette section va représenter la fonctionnalité de support de cette plate-forme. Du côté droit, je vais avoir besoin de bulles de chat. Laissez-moi le dupliquer, « Commande D » ou « Contrôle D », déplacez-le vers le bas. Encore une fois, dupliquez-le. Plutôt bien. Notre section de fonctionnalités est terminée. Maintenant, nous pouvons passer à la partie suivante, qui est nos plans d'adhésion. Laisse-moi zoomer. Ici, au milieu, on va avoir un titre. Juste en dessous de ça, nous allons avoir une très courte description. Permettez-moi de maintenir la touche Commande de mon clavier ou Ctrl enfoncée et de cliquer sur l'un de ces rectangles, comme celui-ci, pour ne sélectionner que celui-ci. Je vais le copier, « Command C », et le coller, « Command V. » Je vais le déplacer vers le bas. Laissez-moi l'aligner au centre horizontalement. Aussi, je vais le rendre plus grand, mais pas comme ça. En fait, je vais maintenir la touche Option ou Alt enfoncée sur mon clavier, puis essayer de l'agrandir des deux côtés. C' est exactement ce que je veux. Laisse-moi le dupliquer, le déplacer vers le bas. Puisque c'est une description, je vais la rendre un peu plus petit comme ça, et laissez-moi changer sa couleur en lumière secondaire. Enfin, je vais le rendre un peu plus petit comme ça. Fantastique. Nous avons notre titre, nous avons notre sous-titre, et ici nous avons besoin de deux plans différents, le plan gratuit et le plan premium. Chaque plan devrait avoir le prix, un appel à l'action, et aussi une image que l'utilisateur peut choisir la conception de ses cartes de débit ou de ses cartes de crédit, et enfin, quelques fonctionnalités courtes de ce plan particulier. Permettez-moi de sélectionner l'outil Rectangle. Je vais cliquer et faire glisser comme ça. Fantastique. Je vais le faire arrondir. Laisse-moi changer sa couleur pour notre lumière secondaire, comme ça. Comme je vous l'ai déjà dit, pour ce plan, nous avons besoin d'informations comme un titre. Je vais sélectionner ce rectangle, appuyez sur « Commande C », « Commande V », pour le coller, comme ceci. Fantastique. Ce sera notre titre. Je vais le dupliquer et le déplacer vers le bas. Laissez-moi l'agrandir un peu. Ce sera notre prix. Alors nous avons besoin d'un bouton. Je vais monter, sélectionner ce bouton, « Commande C », « Commande V », et le déplacer vers le bas, comme ceci. Mais dans la liste de la couche, nous devons la déplacer vers le haut, ici. Plutôt bien. Ici, nous avons le bouton. Ensuite, nous devons avoir une image alors créons une. Je vais sélectionner l'outil Rectangle, cliquez et faites glisser. Ce sera notre espace réservé pour carte de crédit ou carte de débit, rendre arrondi, et changeons la couleur en noir secondaire. Ensuite, nous avons besoin d'un texte. Sélectionnez ce titre, copiez-le et collez-le, « Command C », « Command V », ou « Control C », « Control V », et le rendre un peu plus petit. Allons le rendre un peu plus large. Fantastique. Finalement, changeons la couleur en neutre. Laisse-moi le dupliquer. Déplacez-le vers le bas, dupliquez-le. Nous avons créé avec succès notre premier plan. Je vais sélectionner tous ces éléments et les regrouper. Cliquez et faites glisser pour les sélectionner, comme ceci, et appuyez sur « Commande G » ou « Contrôle G » pour les regrouper. Alors appelons ça plan, et je vais le dupliquer, « Commande D » ou « Contrôle D », et le déplacer vers le côté droit. Ensuite, sélectionnez-les les deux, groupez-les, « Commande G » ou « Contrôle G », et appelez-les plans. Enfin, je vais l'aligner au centre horizontalement. Ça a l'air si joli. La section suivante sera une section Q&R. Pour cette section Q&R, encore une fois, nous avons besoin d'un titre, d'une description. Je vais donc sélectionner les deux, « Commande C », « Commande V », ou « Contrôle C », « Contrôle V. » Déplacez le vers le bas, comme ça. Ici, nous devons avoir quelques rectangles pour tenir nos questions alors laissez-moi créer un rectangle. On peut traîner, comme ça. Laisse-moi le faire arrondir. Enfin, je vais changer sa couleur pour notre lumière secondaire. Cet espace réservé va avoir un calque de texte alors laissez-moi sélectionner ce titre, « Commande C », « Commande V », déplacez-le vers le bas, et je vais le déplacer vers le haut dans la liste des calques ici. Plutôt bien. Laisse-moi le rendre un peu plus petit. Déplacez-le sur le côté gauche. C' est notre question. Sur le côté droit, nous allons avoir besoin d'une icône, qui est une image. Je vais créer un cercle, comme ça. Déplacez-le sur le côté droit et changez sa couleur en neutre. Plutôt bien. Ensuite, sélectionnons-les tous, regroupez-les , et nommons la question. Enfin, vous pouvez le dupliquer et le déplacer vers le bas pour notre deuxième question. Encore une fois, dupliquez-le pour obtenir 5 questions, comme ceci. Nous avons presque fini. La dernière chose dont nous avons besoin pour notre page de destination est un pied de page. Un pied de page est une section qui comprend tous les liens importants de votre site Web ainsi que la clause de non-responsabilité des droits d'auteur. Je vais sélectionner l'outil Rectangle, cliquer et faire glisser comme ceci, puis changer sa couleur en sombre secondaire. Ici, nous devons avoir un logo, puis la clause de non-responsabilité des droits d'auteur, puis 3 colonnes de liens. Créons un logo. C' est si simple. Il nous faut un rectangle. Maintenez la touche Maj enfoncée pour créer un carré. On y va. Je vais le faire arrondir. Laissez-moi choisir la lumière secondaire pour cela. C' est notre logo. Ensuite, nous devons avoir la clause de non-responsabilité des droits d'auteur juste en dessous cela alors créons une description comme celle-ci. Je vais le faire arrondir. Encore une fois, je vais choisir la lumière secondaire, comme ça, la dupliquer et la déplacer vers le bas. Fantastique. Le côté gauche de notre pied de page est prêt. Je vais sélectionner ces 2 couches, les regrouper, et aussi me laisser sélectionner ce logo et ce groupe, et encore une fois les regrouper, et je vais les déplacer vers le bas. Sur le côté droit, comme je l'ai déjà mentionné, nous devons avoir 3 colonnes de liens. Permettez-moi de créer un rectangle, mais petit et de le faire arrondir. Changons la couleur à cette couleur primaire. On ne l'a jamais utilisé. Puisque ceux-ci vont être des liens, il est préférable de choisir une autre couleur. Dupliquez-le, déplacez-le vers le bas. Encore une fois, dupliquez-le, comme ça. Chaque colonne va avoir 3 liens. Maintenant, je vais maintenir la touche Maj enfoncée de mon clavier et sélectionner les 3 liens, les regrouper, appuyer sur « Commande G » ou « Contrôle G », et je vais le nommer des liens. Ensuite, dans l'inspecteur, je peux changer l'espacement entre eux facilement, comme ça. Je vais le mettre à 70. Je pense que c'est plutôt bon. Pendant qu'il est sélectionné, dupliquons, « Commande D » ou « Contrôle D », et déplacez-le vers le côté droit. Encore une fois, dupliquez-le. On y va. Toutes nos 3 colonnes sont prêtes donc je vais le déplacer sur le côté gauche. D' accord les gars, vérifions notre filaire et voyons si nous devons faire des changements. Ici, permettez-moi de sélectionner toutes ces questions et de les déplacer un peu vers le haut. Je vais zoomer. On y va. Notre filaire est prêt. Je vais donc sélectionner ce plan de travail filaire et cliquer sur cette icône « Play » pour l'afficher en prévisualiser. Comme vous pouvez le voir, nous avons une section de héros avec une barre de navigation et tous les éléments nécessaires. Je vais descendre, et nous avons la fonctionnalité 1, la fonctionnalité 2, fonctionnalité 3, assez bonne, et la section Q&R, et le pied de page. Avez-vous vu à quel point il est facile de créer ce filaire à faible fidélité ? Dans la prochaine vidéo, nous commencerons à concevoir notre projet ensemble. J' espère que vous avez apprécié cette vidéo, et vous voir dans la prochaine. 99. Barre de navigation: Salut, bienvenue. Maintenant que notre filaire est prêt, nous allons commencer à concevoir notre page de destination ensemble. Es-tu prêt ? Allons-y. Tout d'abord, je vais créer un autre tableau d'art juste à côté de mon filaire. Je vais appuyer sur « A » sur mon clavier, puis sur le côté droit, je vais choisir Bureau. Parfait. Laisse-moi le déplacer, et je vais zoomer. Maintenant, laissez-moi le renommer en Landing Page. Assurez-vous de nommer correctement vos calques et vos tableaux d'art afin de garder votre projet organisé. Laisse-moi le rendre un peu plus long, comme ça. C' est assez pour l'instant. De quoi avons-nous besoin pour notre page de destination ? Comme vous pouvez le voir, nous avons un filaire que nous avons créé dans la vidéo précédente et nous savons où les éléments vont être placés. Cependant, pour cette page de destination, nous devons d'abord créer une grille de mise en page afin de nous guider où nous devrions placer nos éléments. Pendant que ce tableau d'art de la page de destination est sélectionné, dirigez-vous vers la grille de mise en page située à droite l'Inspecteur et cliquez sur cette icône plus. On y va. Maintenant, nous avons une grille. Mais si vous cliquez sur cette icône juste à côté de ces balises, vous pouvez modifier cette grille en colonnes. C' est exactement ce que nous voulons. Pour ce projet, nous allons utiliser une grille de mise en page à 12 colonnes, qui est populaire. Je vais régler le compte à 12. On y va. Maintenant, nous avons 12 colonnes. Ensuite, le type va être étiré. Vous pouvez le définir au centre et définir la largeur, mais je préfère le définir pour s'étirer. Je vais lui donner une marge de 150 pixels du côté droit et du côté gauche. Ensuite, nous allons changer la quantité de gouttière, qui est l'espace entre nos colonnes. Je vais le mettre à 16. Maintenant, notre grille de mise en page est prête, et nous pourrions commencer à concevoir notre page de destination. De quoi avons-nous besoin ? Tout d'abord, nous devons concevoir notre barre de navigation en haut. Notre barre de navigation va avoir un logo puis quelques éléments de menu et enfin un bouton. Veuillez ouvrir le dossier assets que vous avez téléchargé auparavant car nous aurons besoin du logo que nous avons déjà préparé pour vous. À partir du dossier logo, faites glisser et déposez le fichier logo.svg dans votre projet, comme ceci. Fantastique. Si vous voulez masquer votre grille de mise en page, vous pouvez facilement appuyer sur « Control G » sur votre clavier, et vous pouvez appuyer à nouveau pour l'activer. Parfait. Maintenant, je vais zoomer un peu, et je vais aligner ce logo sur le côté gauche de cette colonne, la deuxième colonne. Nous ne mettrons pas nos éléments dans la première colonne de gauche et de droite. On va les laisser vides. Plutôt bien. Ensuite, nous devons avoir quelques éléments de menu. Je vais appuyer sur « T » sur mon clavier et cliquer ici pour créer un calque de texte. Ensuite, laissez-moi écrire, par exemple, Accueil comme premier élément de menu. Maintenant, nous pourrions commencer à utiliser notre taille de texte. Si je me dirige vers la section Texte dans l'Inspecteur, je peux cliquer sur cette icône de style sur le côté droit, puis je vais choisir le moyen 17. C' est le style de texte que nous avons créé auparavant. On y va. Je vais le déplacer un peu vers le haut. Laissez-moi zoomer et le dupliquer en appuyant sur « Commande D » ou « Contrôle D » si vous utilisez Windows et déplacez-le vers le côté droit. Permettez-moi de le changer en fonctionnalités. Parfait. Encore une fois, je vais le dupliquer, « Commande D » ou « Contrôle D », déplacer vers le côté droit, et laissez-moi écrire la tarification. Maintenant, nous avons nos trois éléments de menu. Ce que je vais faire est de sélectionner ces trois éléments, et je vais appuyer sur « Maj » et « A » pour y ajouter la mise en page automatique. Comme vous pouvez le voir sur le côté droit, nous avons ajouté une mise en page automatique. A partir de maintenant, nous pourrions modifier l'espacement entre ces éléments en utilisant la section, comme ceci. Si vous voulez, par exemple, ajouter un nouvel élément, vous suffit de sélectionner l'un d'entre eux et d'appuyer sur « Commande D ». Comme vous pouvez le voir, ce cadre que nous venons de créer se développera horizontalement automatiquement car nous utilisons une mise en page automatique horizontale. Si nous changeons le mode de l'horizontale à la verticale, vous pouvez voir qu'ils s'empilent verticalement, mais nous voulons le garder horizontal, comme ceci. Permettez-moi de supprimer ces fonctionnalités. Plutôt bien. Je vais régler l'espacement entre eux à 70, comme ça, pour l'instant. Ensuite, laissez-moi l'aligner au centre horizontalement en utilisant la section d'alignement dans l'inspecteur, comme ceci. La dernière chose dont nous avons besoin pour notre barre de navigation est un bouton. Ce que je vais faire est de sélectionner cet outil rectangle dans la barre d'outils et de cliquer et de faire glisser pour créer un rectangle comme celui-ci. Je vais augmenter le rayon d'angle à 20 pour le faire arrondir. Laisse-moi zoomer. Je vais cacher ma grille de mise en page pour voir nos éléments un peu mieux. Permettez-moi de changer la largeur à, par exemple, 167 au lieu de 177. Je vais régler la hauteur à 56 pour l'instant. Maintenant, pour ce bouton, je vais utiliser l'un de nos styles de couleurs que nous avons déjà créés. Si je me dirige vers la section Remplir sur le côté droit et que je clique sur l'icône de ces quatre points, je peux choisir la couleur de l'accent. On y va. Pour ce bouton, je vais avoir besoin d'un texte. Permettez-moi d'appuyer sur « T » sur mon clavier et de cliquer ici pour créer un calque de texte. Je vais écrire l'inscription. Plutôt bien. Comme nous avons déjà utilisé un style de texte pour nos éléments de menu, Figma choisira automatiquement le même style de texte que notre style de texte par défaut lorsque nous créons un nouveau calque de texte. C' est tout à fait bien. Alors je vais mettre la couleur au blanc, comme ça. Enfin, nous devons aligner nos éléments ici. Si je zoome un peu pour que vous puissiez le voir mieux, comme vous pouvez le voir, mon texte est sélectionné. Je vais maintenir la touche « Maj » enfoncée et cliquer sur notre rectangle comme ça. Maintenant, si vous regardez la liste des calques, vous pouvez voir que deux couches sont sélectionnées en même temps. C' est exactement ce que nous voulons. Maintenant, laissez-moi les aligner à la fois horizontalement et verticalement, comme ceci. Encore une chose, ici nous pourrions créer un groupe ou nous pourrions ajouter une mise en page automatique à eux. Je préfère le plus tard. Laissez-moi appuyer sur « Maj » et « A », et maintenant ce bouton est dynamique. Qu' est-ce que je veux dire par là ? Comme il est défini sur horizontal, si j'essaie d'y ajouter du texte, il va grandir horizontalement. Essayons ça. Je vais changer d'inscription pour quelque chose comme l'inscription. Pouvez-vous voir comment il pousse horizontalement ? C'est parfait. Notre bouton est également prêt. Que devrions-nous faire d'autre ? Nous devons aligner tous ces trois éléments verticalement. Je vais les sélectionner tous en maintenant la touche « Maj » enfoncée, et je vais appuyer sur « Aligner le centre vertical ». Mais nous avons un autre problème. Permettez-moi d'afficher ma grille de mise en page. Ce que je vais faire, c'est déplacer ce bouton sur le côté droit pour toucher le côté droit de ma 2e colonne. Comme ça. Maintenant, je pense que ça a l'air bien. Cependant, nous pourrions améliorer la situation en ayant le même espacement entre notre logo et le côté gauche de nos éléments de menu et notre bouton et le côté droit de nos éléments de menu. Maintenant, si je maintiens la touche Alt ou Option enfoncée mon clavier et que je passe ma souris au-dessus des éléments qui l'entourent, je peux voir la marge que je rembourse. Sur le côté droit, j'en ai 154, et sur le côté gauche, j'en ai 274. Laisse-moi le déplacer un peu sur le côté gauche. Maintenant, comme vous pouvez le voir, j'ai 214 pixels à partir de la gauche et 214 pixels à partir de la droite. Ce cadre est exactement au milieu de ces deux éléments, et c'est exactement le résultat que je cherchais. Last but not least, sélectionnons-les tous, groupez-les, appuyez sur « Command G » ou « Control G » sur votre clavier, et je vais l'appeler Nav Bar. Comme vous pouvez le voir, sa marge supérieure est définie sur 79. Je vais le mettre à 80 pour que je puisse le déplacer vers le bas par la touche fléchée de mon clavier d'un pixel. Parfait. Très bien, les gars, c'est tout pour cette vidéo. Nous avons créé avec succès notre barre de navigation. Dans la vidéo suivante, nous commencerons à concevoir notre section de héros ensemble. On se voit alors. 100. Section de héros - Partie 1: Salut là, bienvenue. Dans cette vidéo, nous allons commencer à concevoir notre section héros. Sans plus tarder, commençons. De quoi avons-nous besoin pour notre section héros ? Jetons un coup d'oeil à notre filaire. Comme vous pouvez le voir notre section héros, a un arrière-plan, puis une ligne de tête, une description du bouton, et une image sur le côté droit. Je pense que c'est une bonne idée de commencer à concevoir notre contexte d'abord, puis de passer aux autres éléments. Afin de garder tout organisé, je vais appuyer sur « A » sur mon clavier, et je vais ajouter un nouveau plan de travail. Laissez-moi sélectionner Bureau et je vais le mettre juste à côté de ma page de destination. Laisse-moi zoomer. Pour ce fond, je vais utiliser différents dégradés et différentes couleurs, puis avec une technique cool, je vais vous montrer comment vous pouvez mélanger les couleurs ensemble pour obtenir un fond très cool, ce qui est tellement populaire de nos jours. Pour cet arrière-plan, je vais utiliser l'outil Plume, sélectionnez l'outil Plume dans la barre d'outils et je vais créer un nœud. Laissez-moi cliquer quelque part ici, et je vais déplacer ma souris vers le bas comme ceci, maintenez la touche « Maj » enfoncée pour obtenir une ligne droite comme celle-ci. Cliquez pour créer le deuxième nœud et déplacez-le vers le côté droit, cliquez comme ceci, et voici la partie délicate. Maintenant, je vais créer une ligne incurvée. Comment puis-je faire ça ? Comme vous pouvez le voir, si je clique juste quelque part, j'aurai une ligne droite, mais ce n'est pas ce que je veux. Pour obtenir une ligne incurvée, vous pouvez cliquer et faire glisser, comme ceci, cliquer et faire glisser pour obtenir quelque chose comme ceci, et enfin, fermer votre chemin, en cliquant sur votre premier nœud. Parfait. On a notre première forme, mais je vais la modifier un peu. Laissez-moi sélectionner l'outil de déplacement, et je vais cliquer sur ce nœud au milieu, et en utilisant ces poignées, je peux le modifier comme ceci. Je pense que maintenant ça a l'air bien. Maintenant, il est temps d'y ajouter une couleur, mais tout d'abord, je vais en retirer le trait en utilisant cette icône moins, puis ajouter un remplissage. Pour cette première forme, je vais utiliser notre couleur foncée secondaire comme ça, puis je vais dupliquer cette forme, déplacer un peu vers le haut comme ça, et enfin je vais la rendre un peu plus grand. Maintenez la touche « Maj » enfoncée et cliquez et faites glisser comme ceci. Mais vous ne pouvez rien voir parce que nos deux couches ont la même couleur. Maintenant, je vais le changer en accent, et puisque le deuxième calque est au-dessus de notre calque précédent, nous ne pouvons pas voir notre calque précédent, donc je vais le déplacer vers le bas comme ceci. On y va. Maintenant, les deux sont visibles. Jusqu'à présent, si bien. Laissez-moi tourner un peu pour obtenir quelque chose comme ça, et je vais le rendre plus grand. Vous pouvez jouer avec ces valeurs et déplacer vos formes comme vous le souhaitez. Maintenant, ça a l'air bien. Alors j'ai besoin d'une autre forme. Je vais sélectionner l'outil Plume et cliquer ici, déplacer vers le bas, cliquer ici, comme ceci, cliquer quelque part ici. Peu importe comment vous conduisez maintenant parce que cette forme va être sous nos couches précédentes, comme ceci, et je vais mettre la suivante ici et les relier ensemble comme ça. Plutôt bien. Maintenant, laissez-moi y ajouter un remplissage. Je vais choisir cette couleur primaire et je vais la déplacer comme ça pour la mettre sous nos couches précédentes. Jusqu' à présent si bon, on peut le rendre un peu plus grand. Maintenant, je vais ajouter plus de couleurs, alors laissez-moi sélectionner à nouveau l'outil de stylo. Cette fois, cliquez ici, déplacez-le ici et ici pour créer une ligne courbe comme celle-ci, et laissez-moi y ajouter une autre couleur. Probablement, vous pourriez utiliser une couleur différente de nos styles de couleurs, et c'est totalement bien puisque c'est un fond, ce que je vais choisir est une couleur bleu clair. Laisse-moi changer la teinte, quelque chose comme ça. Oui, ça a l'air bien et comme vous pouvez le voir, il a une très bonne harmonie avec nos autres couleurs. Le code couleur est 35ECEC. On y va. Enfin, nous avons besoin d'une autre couleur pour mettre juste derrière ces formes. Mais avant cela, comme vous pouvez le voir, cette forme est en dehors de mon plan de travail et c'est un problème. Si vous passez à la liste du calque, vous pouvez cliquer et le faire glisser et le mettre à l'intérieur de notre plan de travail, et laissez-moi renommer ce plan de travail en BG, qui représente l'arrière-plan et enfin, laissez-moi créer une autre forme pour remplir cette zone blanche. Parfait, plutôt bien. Je vais choisir quelque chose comme l'orange. Essayons et voyons si ça a l'air bien. Laisse-moi mettre cette couche à l'intérieur de notre plan de travail et la déplacer vers le bas. Fantastique. Comme vous pouvez le voir, nous avons une très bonne combinaison de couleurs. Cependant, cela n'a pas l'air bon pour nos antécédents. Comment pouvons-nous faire en sorte que ça paraisse bien ? Laissez-moi vous montrer une très bonne technique. Ce que je vais faire maintenant est de sélectionner ce BG, de le copier, cliquer sur « Commande C », et de sélectionner votre page de destination et de le coller, de cliquer sur « Commande V ». Je vais le mettre sous notre barre de navigation et le déplacer comme ça, et ensuite je vais y ajouter un effet. Si vous accédez à la section Effet et cliquez sur cette icône plus, vous pouvez y ajouter un effet, mais par défaut, il est défini sur l'ombre portée. Je vais le changer en Flou de couche comme ça. Ensuite, si je clique sur cette icône de soleil, je peux modifier cette quantité de flou à ce que je veux. Je vais utiliser ce curseur, comme ça, je vais l'augmenter pour mélanger toutes ces couleurs. Tu vois à quel point c'est beau maintenant ? Nous venons de créer un beau fond pour notre page de destination en utilisant cette technique simple et en utilisant des formes simples en fait. Maintenant, je vais modifier un peu mes couleurs pour obtenir un meilleur résultat. Tout d'abord, je vais changer cette orange en autre chose. Laissez-moi choisir ma couleur d'accent, ça a l'air bien, et aussi, je vais modifier un peu cette couleur bleue. Laisse-moi rendre plus sombre pour avoir quelque chose comme ça. Fantastique. Aussi, je vais changer un peu cette couleur secondaire. Ce que je vais faire, c'est sélectionner cet élément et le rendre un peu plus petit, et sélectionner ce calque Vector 2, déplacer un peu vers le haut, et aussi je pense que nous devons ajouter une autre couleur pour notre transition ici entre ces actes et la couleur et cette couleur bleue. Ce que je vais faire est de sélectionner ce calque Vector 5, copier et de le coller, déplacer sur le côté droit, ce n'est pas visible car c'est sous nos autres calques. Déplacez-le dans la liste des calques comme ceci et changez la couleur en autre chose, mais avant cela, nous devons le détacher de son style comme celui-ci, et laissez-moi le changer pour quelque chose comme ça. Le code couleur est 4EF4E0. Maintenant, je vais le faire tourner un peu. C' est de mieux en mieux comme vous pouvez le voir, plutôt bien. Finalement, changeons cette couleur bleue pour obtenir un meilleur résultat. Plutôt bien. Nous devons faire encore une chose. Comme vous pouvez le voir, maintenant que l'ajout de cet effet flou à notre arrière-plan, nous avons une couleur blanche sur les côtés, et je vais corriger ça. Comment puis-je faire ça ? Nous avons juste besoin de mettre à l'échelle ce contexte. Appuyez sur « K » sur votre clavier pour sélectionner l'outil d'échelle et maintenez la touche « Maj » enfoncée et essayez de l'échelle comme ceci des deux côtés, et maintenant il semble mieux. Comme vous pouvez le voir, bien que nous ayons ajouté cet effet flou à notre arrière-plan, nous pourrions reconnaître les frontières et les lignes entre ces couleurs et ce n'est pas bon. Nous devrions augmenter la quantité de flou de couche pour éliminer ces lignes comme celle-ci, et maintenant cela semble beaucoup, beaucoup plus lisse, assez bon. Nous avons créé avec succès notre expérience, mais nous n'avons pas fini. Il y a une autre étape à faire, c'est-à-dire masquer notre contexte. En fait, vous pouvez le laisser tel qu'il est et essayer d'ajouter votre élément de sections de héros ici. Cependant, je vais changer sa forme pour quelque chose de fantaisie. Laissez-moi sélectionner l'outil plume et je vais créer un nœud ici en haut à gauche, c'est en dehors de notre page de destination et je le sais, c'est très bien. On va le réparer dans une minute. Ensuite, cliquez ici pour créer un autre nœud, et maintenant je vais créer une ligne d'onde. Pour ce faire, je peux cliquer et faire glisser comme ça, puis je vais cliquer et faire glisser ici. Fantastique, déplacez-le vers le haut, cliquez ici, cliquez ici, et connectez-le à votre premier nœud. Ensuite, retirons le trait et ajoutez-y une couleur unie. Tout d'abord, permettez-moi de modifier cette courbe en utilisant ces poignées. Je vais sélectionner ce noeud, assez bien. Je pense que ça a l'air parfait. Maintenant, nous devrions déplacer cette forme que nous venons de créer et la placer juste en dessous de notre arrière-plan, notre BG, dans notre page de destination, assurez-vous qu'elle est à l'intérieur de notre page de destination. Maintenant c'est à l'intérieur, mais ce n'est pas visible parce que notre arrière-plan est plus grand que ça. Comme vous pouvez le voir, nous avons un cadre ici, mais pour le masquer correctement, d'abord, nous devons le changer de l'image en groupe, donc je peux appuyer sur « Command G » ou « Control G », et je vais l'appeler BG, puis maintenez la touche « Maj » enfoncée, sélectionnez Vector 7, la forme que nous venons de créer en arrière-plan, et appuyez sur l'icône « Masque » dans la barre d'outils. On y va. Nous avons juste masqué nos antécédents, et c'est exactement le résultat que je cherchais. Tu vois à quel point c'est beau ? Si nous y ajoutons du contenu, ça va paraître incroyable. Maintenant, on pourrait le modifier un peu. Si vous sélectionnez ce Vector 7 et appuyez sur « Entrée », maintenant vous êtes en mode édition et vous pouvez sélectionner ce nœud et le modifier. Je pense que si nous pouvions modifier un peu cette courbe, ce serait beaucoup mieux. La dernière chose que nous devons faire est de changer la couleur de nos éléments de menu. Comme vous pouvez le voir, nous n'avons pas un bon contraste puisque nous avons utilisé la couleur par défaut pour ces éléments. Je vais les sélectionner tous, maintenez la touche « Maj » enfoncée et cliquez dessus et changez le champ en blanc. Parfait. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu. Dans la vidéo suivante, nous finirons de concevoir notre section de héros ensemble. On se voit alors. 101. Section de héros - Partie 2: Hé, bienvenue. Dans cette vidéo, nous allons continuer à concevoir notre section de héros ensemble. Sans plus tarder, commençons. Jetons un coup d'oeil à notre filaire et voyons ce dont nous avons besoin d'autre. Nous avons besoin d'un titre, d'un sous-titre, et aussi d'un appel à l'action. Sur le côté droit, nous avons besoin d'une image. Tout d'abord, créons notre titre. Je vais appuyer sur T sur mon clavier et cliquer pour créer un calque de texte. Mais comme vous pouvez le voir, ce calque prend a été créé à l'intérieur de mon groupe d'arrière-plan. Je vais le déplacer en dehors de ça comme ça, plutôt bien. Laissez-moi écrire, banque intelligente pour les pigistes. Fantastique. Je vais le sélectionner et changeons le style de texte en titre H1, qui est le titre le plus grand que nous ayons. Maintenant, permettez-moi d'afficher ma grille de mise en page en appuyant sur Contrôle G sur mon clavier comme ceci. Je vais le déplacer sur le côté gauche, assurer qu'il est aligné avec le côté gauche de votre deuxième colonne, comme ceci. Alors je vais diminuer sa largeur comme ça. Ça a l'air plutôt bien. Maintenant, je vais changer sa couleur du noir au blanc pour obtenir un meilleur contraste. Laisse-moi le déplacer un peu. On y va. Parfait. Maintenant, ajoutons notre sous-titre. Laissez-moi le dupliquer, le déplacer vers le bas et je vais le changer de la rubrique H1 au corps principal. Ensuite, je vais juste copier et coller le texte que j'ai déjà préparé afin de gagner votre temps. Laisse-moi le coller. On y va. Le texte est, Draft est une application mobile révolutionnaire conçue pour vous aider à gérer votre entreprise facilement et vous faire économiser de l'argent. C'est intéressant. Maintenant, laissez-moi diminuer la largeur comme ça pour la rendre un peu plus petite. Parfait. Maintenant, ça a l'air incroyable. Permettez-moi de prendre la marge supérieure de ce calque de texte. Comme vous pouvez le voir, il est réglé sur 23. Je vais le mettre à 30, comme ça. Ensuite, nous devons créer un bouton. Laissez-moi sélectionner l'outil rectangle, cliquez et faites glisser pour créer un rectangle comme celui-ci. Encore une fois, c'est à l'intérieur de notre arrière-plan. Je vais le déplacer. Afin d'éviter que ce problème ne se reproduise encore et encore, je vais verrouiller ce groupe. Sélectionnez BG et cliquez sur cette icône de verrouillage. Pour ce bouton, je vais régler la largeur à 200, comme ceci et la hauteur 254. Gardons-le tel qu'il est. Alors je vais le faire arrondir. Mettons-le à 20. Last but not least, nous devons lui donner une couleur. Je vais choisir l'obscurité secondaire. Comme vous pouvez le voir, nous n'avons pas un bon contraste ici. Plus tard, nous pouvons modifier un peu notre arrière-plan, mais pour l'instant gardons cette couleur telle qu'elle est. Ensuite, pour ce bouton, nous avons besoin d'un texte, donc je vais appuyer sur T et laisser moi écrire, Inscrivez-vous maintenant. Plutôt bien. Je vais le rendre blanc. Pour ce bouton, je vais choisir le style de texte de légende comme celui-ci. zoom avant, assurez-vous de les aligner verticalement et horizontalement. Jusqu' à présent si bon, mais pour ce bouton, je vais y ajouter une icône. Une icône de flèche droite qui montre les utilisateurs s'ils cliquent sur ce bouton, ils vont aller de l'avant. Dans le dossier asset, je vais ouvrir des icônes et vous avez arrow-right.SVG. Faites glisser et déposez-le ici. On y va. Je vais le déplacer dans la liste des calques comme ça. Je vais sélectionner cette icône et maintenez la touche Alt enfoncée et voyons quel est le remplissage entre ces calque de texte et cette icône. Comme vous pouvez le voir, il est réglé à quatre, je vais le mettre à 10. Je vais le déplacer vers le côté droit, puis sélectionner les deux, les regrouper, appuyer sur la commande G ou Control G, sélectionner le rectangle et les aligner au centre horizontalement et verticalement. Maintenant, je vais sélectionner ce groupe et notre groupe rectangle puis une fois de plus et le nommer bouton Enregistrer. Plutôt bien. Quelle est la marge supérieure de cette marge ? La marge supérieure est fixée à 18. Je vais le mettre à 30 pixels comme ça. Je pense que c'est une bonne idée de diminuer un peu la hauteur de la ligne de ces titres. Par défaut, nous le définissons à 150 pour cent, mais je pense que c'est trop puisque cette taille de police est si grande. Nous pouvons le détacher de son style et nous pourrions le réduire à 130 pour cent comme ça. Maintenant, ça a l'air beaucoup mieux. Veillez à modifier la marge pour obtenir 30 pixels entre ces éléments. Parfait. Comme je l'ai mentionné précédemment, nous n'avons pas un bon contraste pour ces boutons, donc nous devrons peut-être modifier un peu notre arrière-plan pour obtenir un meilleur résultat. Je vais aller de l'avant et ouvrir ce groupe d'arrière-plan que nous avons verrouillé. Je vais le déverrouiller et sélectionnons ces couleurs secondaires sombres. C' est le vecteur 1. Dans mon cas, je vais le déplacer un peu vers le bas et le déplacer le côté gauche pour obtenir quelque chose comme ça. C' est le résultat que je cherchais. Parfait. Jusqu'à présent, si bien. Maintenant que nous avons créé notre contenu texte pour notre section héros, il est temps de se concentrer sur le bon côté. Puisque cette page de destination est pour une application mobile, disons application mobile bancaire. J' ai déjà conçu un écran mobile simple et vous l'avez dans le dossier des actifs, images, section héros, et ici vous avez téléphone et quelques formes. Si vous le faites glisser dans votre projet, vous pouvez voir l'écran. Je vais zoomer. C' est un écran simple que j'ai déjà conçu. Puisque cette section ne concerne pas la conception d'applications mobiles, je la prépare pour vous à l'avance, sorte que vous pouvez mettre n'importe quelle image que vous voulez sur le côté droit. Parfait. Maintenant, je vais le déplacer un peu. Je pense qu'ici, ça a l'air bien. Permettez-moi d'afficher ma grille de mise en page. Je vais m'assurer qu'il est aligné avec ma grille de mise en page assez bonne. Comme vous pouvez le voir, il a déjà l'air bien. Mais pour le rendre plus intéressant, je veux ajouter des formes 3D à cette page de destination et vous avez accès à ces formes 3D que j'ai déjà préparées. Si vous ouvrez la section héros, dans le dossier des actifs, images, héros, vous pouvez voir que j'ai préparé quatre formes différentes pour vous. Je vais sélectionner la forme 1 et la glisser et la déposer dans mon projet comme ceci, puis je la déplace vers le haut et la mets ici. Ça a l'air plutôt bien. Laisse-moi déplacer cette police un peu vers le bas. Ça a l'air bien mieux ici. Laissez-moi aussi faire glisser et déposer la deuxième forme ici. Je vais le mettre juste là. Vous pouvez modifier les couleurs facilement car ils sont des vecteurs et aussi la forme 3 Je vais le mettre juste là. Mais pour celui-ci, afin de créer l'effet de profondeur, je vais y ajouter un effet de flou. Je vais y ajouter l'effet, puis je vais le changer en flou de couche et augmenter la quantité de flou comme ceci. En utilisant cette technique, vous pouvez créer ces effets de profondeur de champ, et il semble beaucoup mieux, fantastique. Last but not least, glisser-déposer la forme 4 et mettez-la ici. Maintenant, je pense que c'est une bonne idée de sélectionner tous ces éléments sur le côté gauche et de les déplacer un peu vers le bas. Comme vous pouvez le voir, j'ai tellement d'espaces ici. Par espace, je ne veux pas dire la couleur blanche comme ce fond ici. L' espace blanc ou l'espace négatif est l'espace entre vos éléments. Il est si important d'avoir suffisamment d'espaces dans votre conception pour que votre design soit bref. Une des erreurs que je vois la plupart des débutants font, c'est qu'ils n'ont pas assez d'espace. Si vous essayez de déplacer ce titre vers le bas et de déplacer ce motif vers le haut, comme vous pouvez le voir, votre dessin ne peut pas respirer. Ou, par exemple, si vous les sélectionnez tous et les déplacez vers le côté droit comme ceci, vous pouvez voir que vous n'avez pas assez d'espaces ici. Vous allez modifier votre conception jusqu'à ce que vous soyez satisfait de l'espacement. Laisse-moi le déplacer un peu vers le bas, plutôt bien. Notre section de héros est prête. Tu vois à quel point c'est beau ? Permettez-moi de sélectionner mon plan de travail et de le prévisualiser. C'est incroyable. J' espère que ça vous plaira. D'accord, j'espère que vous avez apprécié cette vidéo et je vous verrai dans la prochaine. 102. Section des caractéristiques - Carte de crédit: Salut, bienvenue. Dans cette vidéo, nous allons commencer à concevoir notre première section, qui est la section carte de crédit. Tout d'abord, laissez-moi jeter un oeil à notre filaire. Comme vous pouvez le voir pour la première section, vous allez avoir une carte de crédit sur le côté droit et un titre et un sous-titre. Sans plus tarder, commençons. Tout d'abord, je vais afficher ma grille de mise en page. Je vais appuyer sur Ctrl G sur mon clavier, et maintenant mes grilles de mise en page sont visibles. Sur le côté gauche, nous avons besoin d'un titre et d'un sous-titre. Je vais créer un calque de texte comme celui-ci, et je vais changer le style de texte en H2 et ici laissez-moi écrire, une carte pour tous vos paiements. Je vais le déplacer sur le côté gauche et me laisser diminuer sa largeur à 366, donc il couvre quatre de nos colonnes comme ça. Ensuite, ce que je vais faire est de changer sa couleur, donc je vais choisir cette couleur primaire comme ça. Je vais le dupliquer, le déplacer vers le bas et ici nous avons besoin d'une description. Pour cette description, je vais aller de l'avant et changer le style de texte en Body Main, comme ceci, déplacer un peu vers le bas et j'ai déjà préparé un texte, donc je vais le copier et le coller à partir de mon presse-papiers. On y va. Comme vous pouvez le voir, la description va être celle-ci. Obtenez trois pour cent sur tout ce que vous achetez avec la carte Draft. Inscrivez-vous dès aujourd'hui et profitez de tous les aspects de votre entreprise. C' est cool, n'est-ce pas ? Maintenant, changeons la couleur. Je n'ai plus besoin de la couleur primaire, je vais avoir besoin de la lumière secondaire, comme ça. Je vais sélectionner cette description et maintenir la touche Option ou Alt enfoncée sur mon clavier et je vais passer ma souris au-dessus de mon titre pour voir la marge, mais je vais faire 30 pixels, donc je vais utiliser les touches fléchées de mon pour le déplacer un peu vers le bas. On y va, maintenant on a 30 pixels et ça a l'air assez bien. Tout est cool. Maintenant, nous pourrions aller de l'avant et créer notre carte de crédit sur le côté droit. Pour ce faire, je vais avoir besoin d'un rectangle. Laissez-moi cliquer sur Rectangle, cliquez et faites glisser pour dessiner un rectangle ici et comme vous pouvez le voir, la largeur est définie à 466 pixels et il couvre cinq colonnes, et la hauteur va être de 268 pixels comme ceci. Je pense que c'est cool, et laisse-moi augmenter le rayon d'angle à 24, comme ça. Je vais cacher mes grilles de mise en page pour l'instant parce que je n'en ai pas besoin. Je vais appuyer sur Ctrl G sur mon clavier. De quoi avons-nous besoin pour une carte de crédit ? On a besoin d'un nom en haut, on a besoin du numéro de carte de crédit, on a besoin du logo de l'émetteur de la carte de crédit, et c'est tout. Tout d'abord, je vais changer sa couleur pour notre sombre secondaire, comme ça, puis je vais y ajouter des formes simples afin de créer un si grand fond pour notre carte de crédit. Pour ce faire, je vais sélectionner l'outil Étoile comme ça, maintenir la touche Maj enfoncée, cliquer et faire glisser comme ceci, et comme vous pouvez le voir, nous avons une étoile, mais ce que je vais faire est de changer son nombre de 5 à 7 pour obtenir quelque chose comme ça et après je vais augmenter le rayon de coin comme ça. Vous pouvez maintenir la touche Maj enfoncée de votre clavier et cliquer sur ce petit cercle en haut et déplacer votre souris vers le bas. Alors je vais changer le rapport. Comme vous pouvez le voir ici, nous avons trois cercles différents. Le premier est le rayon de coin, le second est le rapport entre les bords, et le dernier est le nombre. Notre compte est déjà fixé, cependant, je vais changer le ratio. Je vais maintenir la touche Maj enfoncée, cliquer et faire glisser. Je vais l'augmenter à environ 74 ou 75 comme ça et ensuite je vais augmenter le rayon de coin un peu pour lisser ces coins. Vous pouvez jouer avec ces chiffres et valeurs pour obtenir la forme que vous cherchez, mais je pense que c'est une forme cool pour commencer. Si vous n'êtes pas satisfait de l'apparence de cette forme, vous pouvez facilement modifier ces valeurs et créer votre propre forme et c'est ce que je veux que vous fassiez. Ne vous contentez pas de copier et de coller ce que je fais, assurez-vous de créer votre propre version et d'utiliser votre propre créativité. C' est ainsi que vous allez devenir un bon designer. Maintenant, je vais changer sa couleur pour un violet clair. Mais je ne veux pas utiliser nos panneaux de couleurs, je vais mettre la couleur sur CAC7FF, voilà. C' est la couleur que je cherchais. Je vais le déplacer un peu vers le haut. Comme vous pouvez le voir, cette étoile est en dehors de cette carte de crédit, ce qui est un problème pour l'instant, mais nous devons la masquer d'une manière ou d'une autre. Si je les sélectionne tous les deux, si je maintiens la touche Maj enfoncée et que je les sélectionne tous les deux et que je clique sur Masque, notre rectangle disparaîtra. Essayons, on y va. Pour éviter cela, nous pourrions dupliquer notre rectangle. Je vais sélectionner le rectangle, je vais le dupliquer, commande D ou le contrôle D et comme vous pouvez le voir maintenant j'ai deux rectangles. Je vais sélectionner le haut et maintenez la touche Maj enfoncée et sélectionnez mon étoile et maintenant je vais cliquer sur Masque. On y va. Ici, nous utilisons ce rectangle pour masquer notre étoile, et ce rectangle reste comme nos limites de carte de crédit comme ceci. Laissez-moi sélectionner cette étoile et la déplacer comme ça. Plutôt bien. Je vais le rendre un peu plus grand. Ensuite, je vais le dupliquer, le déplacer sur le côté droit et aussi je vais le déplacer vers le bas, comme vous pouvez le voir, c'est au-dessus de notre première forme. Je vais le déplacer vers le bas. Rien n'a changé parce que les deux utilisent la même couleur. Je vais sélectionner ma deuxième forme, qui est maintenant en dessous de ma première forme et je vais lui donner un code de couleur de 9A94FF comme ça, assez bon. Je vais le déplacer sur le côté droit. De quoi d'autre avons-nous besoin ? Je vais à nouveau sélectionner ma première forme, la dupliquer, déplacer vers le bas comme ça, et laisser la mettre à l'échelle. Je vais appuyer sur K sur mon clavier et maintenir la touche Maj enfoncée, cliquer et faire glisser comme ça, déplacer vers le bas et maintenant je vais définir sa couleur mon sombre secondaire, quelque chose comme ça. Enfin, je vais lui donner une couleur d'accent aussi. Ce que je vais faire est de dupliquer cette dernière forme que nous venons de créer commande D ou le contrôle D et aussi je vais sélectionner ma première forme et la dupliquer également. Ensuite, je vais sélectionner cette Star 4 dans mon cas, si vous jetez un oeil à la liste des calques sur le côté gauche, et je vais changer sa couleur pour accentuer comme ceci. Cependant, je vais le masquer en utilisant cette Star 5 que nous venons dupliquer donc ce que je vais faire est de sélectionner les deux afin Star 5 celui-ci, maintenez la touche Maj enfoncée et cliquez sur cette Star 4 et puis je vais cliquer sur Masque, là nous Allez. Nous venons de créer un nouveau masque et il a l'air génial. Cependant, je vais modifier un peu la position de mes formes pour la rendre plus belle. Je vais sélectionner cette étoile 2, déplacer vers le bas comme ceci pour couvrir le côté droit de ma carte de crédit et aussi je vais sélectionner d'autres formes, Masque Group, Star 1 et Star 3, et les déplacer vers le côté gauche, comme ceci . Notre carte de crédit est superbe maintenant, nous avons donc créé un arrière-plan simple à l'aide de formes simples. Maintenant, nous devons ajouter les détails. Comme je l'ai déjà mentionné, pour ce courant de crédit, nous avons besoin d'un nom en haut donc je vais sélectionner l'outil de texte et créer un calque de texte et écrire un nom aléatoire tel que Ronald Richards, comme ceci. Je vais le sélectionner, et dans la liste des calques comme vous pouvez le voir, il est sous notre carte de crédit. Je vais le déplacer comme ça et je vais changer le style du texte en H4, comme ça et je vais définir la couleur sur blanc. Maintenant, ce que je vais faire est de sélectionner toutes les couches de notre carte de crédit qui est ce groupe de masques et ce rectangle. Il est si important que ce Rectangle 48 soit les limites de votre carte de crédit, vous devez donc vous assurer de le sélectionner également. Commande G ou Contrôle G pour créer un groupe et je vais l'appeler carte de crédit. Maintenant, je peux zoomer. Vérifions le rembourrage. Pour ce calque de texte, je vais définir un remplissage en haut de 40 pixels et à gauche. Je vais le déplacer sur le côté droit et le déplacer comme ça. On y va. Maintenant je vais le dupliquer, le déplacer vers le bas et ici nous devons avoir le numéro de la carte de crédit. Écrivons quelque chose comme cet espace 4242 maintenez la touche Maj enfoncée et appuyez sur huit, 1, 2, 3, 4 pour créer ces étoiles espace, encore une fois, 1, 2, 3, 4 espace 2456, quelque chose comme ça. Pour ce calque de texte, je vais changer le style de texte en Main, et il va avoir 40 pixels de remplissage gauche et un remplissage inférieur de 40 pixels comme ceci. Enfin, nous devons créer un logo. Vous pouvez facilement aller de l'avant et télécharger par exemple le logo de la carte Visa ou le logo MasterCard. Cependant, nous devons créer un logo MasterCard tout simplement par nous-mêmes, car il sera unique pour notre design. Comme nous le savons, le logo de MasterCard est composé de deux cercles simples combinés. Ce que je vais faire, je vais sélectionner l'ellipse, maintenir la touche Maj enfoncée, cliquer et faire glisser pour dessiner un cercle. Je vais régler la largeur et la hauteur à 35 comme ça. Faisons le blanc, et maintenant je vais le dupliquer, le déplacer vers le côté droit et dans la liste du calque, déplacer cette nouvelle forme, qui est le cercle droit vers le bas et la mettre sous notre premier cercle. Sélectionnez ensuite le second et diminuez l'opacité de 100 % à 75 %, comme ceci. Je vais le déplacer un peu sur le côté gauche et on y va. Je vais les regrouper, Command G ou Control G, les déplacer sur le côté droit, son rembourrage droit va être 40 et son rembourrage inférieur sera aussi 40. Je vais zoomer un peu, donc ça a l'air fantastique. Nous pourrions bien sûr modifier un peu notre arrière-plan pour le rendre encore meilleur. Je vais sélectionner mes formes, ce groupe de masques, ce groupe de masques, maintenez la touche Maj et Contrôle enfoncée de votre clavier ou Maj et Commande et sélectionnez Star 1 et Star 3 et déplacez-les vers le côté droit un peu et aussi vers le bas. Maintenant, je pense que ça a l'air mieux. Notre carte de crédit est prête. Je vais sélectionner toutes les couches. Encore une fois, regroupez-les et je vais l'appeler carte de crédit. La dernière chose que nous pouvons faire est d'y ajouter de l'ombre portée. Je vais aller de l'avant et ajouter des effets à cette carte. Je vais ouvrir les paramètres d'effets et pour sa couleur, je vais utiliser la pipette et choisir cette couleur foncée secondaire comme ça et je vais diminuer l'opacité à 15 pour cent et enfin, modifions la quantité de flou à 100 et le Y à 50. On y va. Nous venons de créer une très belle ombre portée pour cette carte de crédit. Ça a l'air incroyable. Je pense que la hauteur de ligne de ce titre sur le côté gauche est un peu trop. Ce que je vais faire est de sélectionner ce titre et je vais le détacher de son style et ensuite je vais diminuer la hauteur de la ligne de 150 pour cent à 120 pour cent comme ça. Je vais le déplacer vers le bas pour obtenir une marge inférieure de 30 pixels. Je vais maintenir la touche Maj enfoncée et sélectionner ma description, les regrouper, et je vais la nommer Feature 1 et maintenons la touche Maj enfoncée et sélectionnez notre carte de crédit, les aligner tous les deux verticalement. Tous les bons gars, maintenant sélectionnons ces deux groupes, groupez-les, Control G ou Command G et appelez la section Feature 1 et sa marge supérieure va être de 260 pixels. Je vais le déplacer comme ça. Merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu, et je vous verrai dans la prochaine. 103. Section des caractéristiques - Statistiques: Hé, bienvenue. Dans cette vidéo, nous allons commencer à concevoir notre deuxième section de fonctionnalités, juste en dessous de cette section de carte de crédit. Tout d'abord, laissez-moi jeter un oeil à notre cadre métallique et voir ce que nous avons besoin de concevoir. Comme vous pouvez le voir pour notre deuxième section, sur le côté gauche, nous avons besoin de quelques cartes, deux petites cartes en haut et une grande carte en bas. Sur le côté droit, nous devons avoir un en-tête, une description, et aussi un bouton. Ce que nous devons faire est de sélectionner le titre et la description que nous avons créés pour notre section Feature 1, donc je vais double-cliquer dessus. Comme vous pouvez le voir dans la liste des calques, fonction 1 est sélectionnée, je vais la copier, alors appuyez sur « Commande C » ou « Contrôle C » sur votre clavier et je vais la coller. Assurez-vous que ce nouveau calque que nous venons de coller se trouve en dehors de cette section de fonction 1. Si c'est à l'intérieur comme ça, assurez-vous de le déplacer, puis en utilisant ma touche fléchée, je peux le déplacer vers le bas comme ça. Maintenant, laissez-moi appuyer sur « Control G » sur mon clavier, et si vous ne connaissez pas ces raccourcis, vous pouvez facilement vous diriger vers ces icône de point d'interrogation en bas à droite, vous pouvez cliquer dessus, et il y a une option appelée « Raccourcis clavier ». Je vais cliquer dessus. Depuis maintenant, j'utilise macOS, il ne me montre que les raccourcis mac. Mais si vous utilisez Windows, ils peuvent être différents. Si je me dirige vers « View » ici, vous pouvez voir pour les grilles de mise en page, c'est écrit Control G, et vous pouvez vérifier tous les autres raccourcis ici. Je vais le fermer. Laisse-moi déplacer ce calque sur le côté droit ici, comme ça. Laisse-moi le mettre juste là. Parfait. Comme vous pouvez le voir, il couvre quatre colonnes, alors je vais le renommer fonctionnalité 2. Si vous double-cliquez sur son nom, vous pouvez facilement le renommer. Enfin, nous devons modifier le contenu. Je vais copier et coller le texte que j'ai déjà préparé à partir de mon presse-papiers. Pour le titre, je vais écrire, gérer vos finances comme un pro en un rien de temps. Laissez-moi déplacer cette description vers le bas pour obtenir une marge supérieure de 30 pixels comme celle-ci. Pour la description, je vais à nouveau copier et coller la description de mon presse-papiers, et voilà. La description est comme ça. Nous rédigeons la comptabilité, les opérations bancaires et les factures sont tous en un seul endroit. Vous saurez toujours où vous en êtes. Juste en dessous de cela, nous devons ajouter un bouton, un bouton en savoir plus. Ce que je vais faire est de sélectionner ces boutons « S'inscrire maintenant », de notre section héros, copiez-le, « Contrôle C » ou « Commande C » et collez-le et déplacez-le vers le bas. On y va. Je vais mettre sa marge supérieure à 30, pour garder tout cohérent. Enfin, nous devons changer le texte pour en savoir plus. Laissez-moi le déplacer sur le côté droit pour obtenir un rembourrage de 10 pixels à droite. Parfait. Afin de rendre ce bouton plus intéressant, je vais y ajouter quelques formes. Permettez-moi de masquer mes grilles de mise en page, puis je vais sélectionner l'outil Plume. Cliquez ici, une fois, cliquez ici et faites glisser comme ceci pour créer une ligne courbe. Cliquez une fois de plus et faites glisser et enfin, connectez vos nœuds ensemble. Maintenant que notre chemin est fermé, nous pouvons lui donner un remplissage. Permettez-moi d'enlever le trait et d'y ajouter du remplissage. Parfait. Ensuite, je vais ajouter un dégradé à celui-ci. Je vais aller cliquer dessus, puis je vais ouvrir ce menu déroulant haut et le changer de solide en linéaire. Maintenant, nous avons un gradient linéaire. Pour la première couleur, je sélectionne cela, je peux définir le code sur 554DDE, pour obtenir ce violet. La deuxième couleur va être la même. Je vais copier ce code de couleur et sélectionner la deuxième couleur et la coller ici comme ceci. Assurez-vous que l'opacité est définie sur zéro pour cent pour notre deuxième couleur. Fantastique. Maintenant, je dois masquer cette forme. Comment puis-je faire ça ? Tout d'abord, permettez-moi de sélectionner le rectangle, ce rectangle 47 dans mon cas. Ensuite, je vais le dupliquer, commande D ou Control D et sélectionner ce nouveau rectangle que nous venons de créer. Maintenez la touche Ctrl ou Commande enfoncée votre clavier et sélectionnez la forme que nous venons de créer. Celle-ci, celle-là, violette, comme ça. Maintenant que les deux sont sélectionnés, cliquez sur « Masque Icône » dans la barre d'outils. On y va. Maintenant, nous venons de masquer cette forme et nous pouvons facilement la déplacer comme ça. Parfait. Cependant, je vais le rendre un peu plus petit. Laissez-moi maintenir la touche « Maj » enfoncée et la réduire, et je vais la faire pivoter un peu. Plutôt bien. Fantastique. Maintenant, laissez-moi sélectionner cette forme, dupliquez-la, commande D ou Control D, déplacez-la vers le haut, faites un clic droit dessus et retournez-la verticalement. Comme ça. Ça a l'air incroyable, c'est plutôt cool. Enfin, nous devons modifier la couleur de cette nouvelle forme. Je vais changer le dégradé de couleur à F44E77 comme ça, et la même chose pour notre deuxième couleur comme celle-ci. Vous pouvez modifier le dégradé à l'aide de cette poignée. Parfait. Permettez-moi de le modifier pour la première forme aussi. Plutôt cool. C' est incroyable, n'est-ce pas ? Maintenant que le côté droit de notre deuxième section est prêt, nous pouvons commencer à concevoir la section gauche. Permettez-moi d'afficher les grilles de mise en page et nous devons commencer à créer nos cartes. Nous avons besoin de deux petites cartes et d'une grande carte. Je vais sélectionner l'outil rectangle dans la barre d'outils, cliquez et faites glisser. Maintenant, j'ai un rectangle. Cependant, je vais définir sa largeur à 223 pixels comme ceci, et c'est la hauteur à 180 comme ceci. Aussi, je vais changer le rayon de coin à 50. Tout a l'air super. La prochaine chose que je vais faire est de changer sa couleur. Je vais le changer en blanc. Cependant, comme vous pouvez le voir, il n'est pas visible car notre couleur d'arrière-plan est également définie sur le blanc, ce qui est un problème. Comment pouvons-nous réparer ça ? Nous pouvons facilement sélectionner le plan de travail de la page de destination. Alors comme vous pouvez le voir, le remplissage est réglé sur blanc et je vais le changer pour notre couleur neutre comme ceci. Maintenant, notre carte est visible, et elle crée un beau contraste. Cependant, afin de le rendre beaucoup mieux, nous y ajouterons de l'ombre portée et du trait. Laissez-moi y ajouter un coup. Je vais choisir le signe de couleur de trait que nous avons déjà préparé comme ça, puis laissez-moi modifier son épaisseur à 0,5. On y va. La dernière chose dont nous avons besoin est de l'ombre portée, donc je vais cliquer sur cette icône plus pour ajouter des effets et me permettre de le modifier. Pour le Blair, je vais le mettre à 50. Pour le Y, je vais le mettre à 25, donc 50 divisé par 2 est égal à 25. Pour la couleur, je vais écrire le code couleur 16194F comme ceci. Enfin, permettez-moi de réduire l'opacité à cinq pour cent. On y va. Tout est prêt, parfait. Permettez-moi d'afficher les grilles de mise en page et je vais y ajouter un calque de texte, et laissez-moi écrire l'équilibre. Il montre l'équilibre de l'utilisateur juste en dessous de ce calque de texte. Maintenant, je vais utiliser un autre style de texte. Utilisons principal, corps principal. Ça a l'air plutôt bien. Je vais régler son rembourrage supérieur à 40, et il reste aussi 40 rembourrage. Dupliquez-le, Commande D ou Contrôle D, déplacez-le vers le bas, et voici, essayons $5,600. Pour ce calque de texte, je vais utiliser H3 parce que nous avons besoin d'une bonne hiérarchie puisque ce montant, qui est le solde, est plus important que le titre lui-même, nous devons utiliser une police plus grande et aussi une police en gras. C' est pourquoi j'utilise H3 pour cela. Enfin, je vais mettre sa couleur à notre violet. On y va. Laissez-moi régler son rembourrage inférieur à 40, et maintenant il a l'air incroyable. De quoi d'autre avons-nous besoin ? Nous devons créer une autre carte juste à côté pour le montant de la dernière transaction. Cependant, avant de le faire, je veux que vous mettiez la vidéo en pause dès maintenant et essayez de la créer par vous-même. Vous n'avez pas besoin de faire autant, vous suffit de dupliquer les éléments que nous venons de créer et de modifier le contenu. Mettez en pause la vidéo et lorsque vous avez terminé, vous pouvez la lire à nouveau. J' espère que tu pourrais le faire tout seul, maintenant c'est mon tour. Tout d'abord, je vais sélectionner tous ces éléments. Laissez-moi les sélectionner, les regrouper, et je vais l'appeler Balance Card. On y va. Maintenant, je vais le dupliquer, commande D ou le contrôle D, déplacer vers le côté droit, assurez-vous qu'il touche votre sixième colonne. Comme vous pouvez le voir, la marge est définie sur 20. Maintenant, je vais double-cliquer sur mon calque de texte et laissez-moi le changer en Dernière transaction. Changeons le montant à 230$. Plutôt bien. Je vais zoomer et ça a l'air génial. La dernière chose dont nous avons besoin avant de terminer la conception notre deuxième section de fonctionnalités est une carte graphique. Mais avant cela, assurez-vous de renommer cette dernière carte de transaction pour garder tout organisé. Ça va être la dernière carte de transaction. Ensuite, je vais sélectionner une de ces cartes, la dupliquer, déplacer vers le bas comme ceci, et je vais la renommer en Graphique et sélectionner ces calques de texte et les supprimer. On n'en a plus besoin. Pour notre carte, nous avons besoin d'une grande carte, donc je vais la rendre plus grande. Sa largeur va être réglée à 466 pixels et sa hauteur va être réglée à 246 pixels. Nous pouvons le modifier ultérieurement si nous ne sommes pas satisfaits du résultat. Mais pour l'instant, ça a l'air génial. Laisse-moi zoomer. Parfait. En fait, nous allons concevoir un graphique à barres simple. Nous allons avoir lundi, mardi, mercredi, jeudi, vendredi, samedi et dimanche, et quelques bars. Laissez-moi commencer par les calques de texte. Je vais appuyer sur T sur mon clavier et cliquer ici. Je vais écrire M-O-N, qui signifie lundi. Quel style de texte convient à celui-ci ? Je pense que ce petit est génial. Aussi, je vais changer sa couleur en lumière secondaire. Cependant, nous avons un problème et c'est le poids de ce calque de texte. Ce que je vais faire, c'est le détacher de son style et changer c'est trop audacieux. Maintenant, ça a l'air beaucoup, beaucoup mieux. Déplacez-le un peu sur le côté gauche, dupliquez-le. Déplacez le sur le côté droit, et laissez-moi écrire T-U-E, dupliquez-le. Déplacez-le sur le côté droit, puis W-E-D. Encore une fois, dupliquez-le. On ne va pas régler le rembourrage pour l'instant parce que je vais d'abord créer les barres. Plus tard, nous traiterons de l'espacement. Pour chaque jour, nous devons avoir deux bars l'un à côté de l'autre. Je vais sélectionner l'outil Rectangle, cliquez et faites glisser comme ceci pour créer un rectangle haut, puis le rendre complètement arrondi. Vous pouvez le définir sur 20 pour vous assurer qu'il est arrondi et que sa largeur sera 14. Je vais régler le rayon d'angle à 25 pour m'assurer qu'il est arrondi. Pour ce bar, permettez-moi de régler la hauteur à quelque chose comme 134. C' est juste un nombre aléatoire. Ça ne veut rien dire. Vous pouvez le rendre plus court ou plus grand. C' est totalement à vous de voir. Mais je pense que 134 est un bon nombre. Ensuite, je vais changer la couleur à notre principale, la dupliquer, le contrôle D ou la commande D, déplacer vers le côté droit et la raccourcir et changer la couleur en Accent. Assurez-vous que vous avez un remplissage de quatre pixels entre eux, comme ceci. Plutôt bien. Notre premier jour est prêt. Cependant, je vais sélectionner ces deux barres. Maintenez la touche Maj enfoncée de votre clavier et cliquez sur chacun d'eux pour sélectionner les deux en même temps. Regroupez-les, Contrôle G ou Commande G, et appelons-ça Bars. Ensuite, je vais maintenir la touche Maj enfoncée et sélectionner « Lundi » et les aligner horizontalement comme ceci. Laisse-moi zoomer. Le rembourrage inférieur va être de 10 pixels, donc je vais les déplacer de deux pixels et on y va. Maintenant, je vais sélectionner les « Bars », le dupliquer, le déplacer vers le côté droit, comme ceci et je vais modifier leur hauteur un peu. Si vous maintenez enfoncée la touche Commande ou Ctrl votre clavier et cliquez sur l'une de ces barres, vous pouvez sélectionner ce calque particulier et vous pouvez facilement modifier sa hauteur comme ceci. Je vais le mettre à 98. La prochaine, je vais la mettre à quelque chose comme 40. Ça a l'air bien. Assurez-vous ensuite qu'il est aligné avec votre calque de texte au centre. Parfait. Sélectionnez-le, dupliquez-le, déplacez-le vers le côté droit. Je vais modifier leur hauteur à nouveau. Vous avez juste besoin de répéter ce processus encore et encore pour créer un graphique à barres très unique. Pouvez-vous voir à quel point il est simple de créer ces graphiques ? Je vais les aligner, parfait. Dupliquez-le, déplacez-le vers le côté droit comme ça. La dernière chose que nous devons faire est de regrouper ces barres avec son nom correspondant. Je vais les sélectionner, lundi, les regrouper, et je vais l'appeler M-O-N. Je vais accélérer ce processus pour gagner du temps. Maintenant que tous les groupes sont prêts, je peux sélectionner tous les groupes, maintenir la touche Maj enfoncée et les sélectionner un par un. Assurez-vous que tous sont sélectionnés et que je peux répartir un espace égal entre eux. Si vous accédez à la section d'alignement de l'Inspecteur, vous pouvez voir ce menu déroulant. Il suffit de cliquer sur cette icône, « Plus d'options » et de cliquer sur « Distribuer l'espacement horizontal ». On y va. Maintenant, il est réglé à 16. Je vais le mettre à 20 en utilisant cette poignée rose. Enfin, je vais les regrouper et je vais l'appeler Chart. On y va. Enfin, vous devez aligner ce graphique sur votre carte graphique. Je vais sélectionner cette carte graphique et ce graphique à barres même temps et les aligner horizontalement et verticalement. Vous pouvez également les regrouper et l'appeler Carte graphique. On y va. Notre carte graphique est prête. Laisse-moi vérifier son rembourrage supérieur. Il est fixé à 22. Je vais le mettre à 20 pour garder tout cohérent. Maintenant, nous pouvons sélectionner toutes ces cartes et les déplacer comme ça, regrouper et les appeler Cartes. Aussi, organisons tout sur le côté droit. Nous avons ce groupe de masques, qui inclut ces formes. Maintenez la touche Maj enfoncée et sélectionnez ce bouton « Enregistrer ». Nous pouvons le renommer à coup sûr, les regrouper et l'appeler, « bouton En savoir plus ». Ensuite, vous pouvez maintenir la touche Maj enfoncée et sélectionner vos textes. Encore une fois, groupez-les et appelez-le « Feature 2", et vous pouvez les aligner verticalement. Maintenez la touche Maj enfoncée, sélectionnez « Cartes » et le groupe « Feature 2" et alignez-les verticalement. On y va. Notre section Feature 2 est prête. Je vais maintenir la touche Maj enfoncée, sélectionner les deux, les regrouper, et appelons-le « Feature 2 - Section » comme ceci. Plutôt bien. Sa marge supérieure va être de 260 pixels. Je vais le déplacer vers le bas et on y va. Tout a l'air super. C' est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine. 104. Section des caractéristiques - Soutien: Salut tout le monde. Bienvenue de retour. Dans cette vidéo, nous allons concevoir notre dernière section de fonctionnalités, qui est la section de support. Laissez-moi jeter un oeil au filaire. Comme vous pouvez le voir sur le côté gauche, nous avons besoin de quelques calques de texte, comme d'habitude, comme nos sections précédentes. Nous avons donc besoin d'un titre, d'une description, et en plus de ces calques de texte, nous avons besoin de quelques images de profil, comme ceci. Sur le côté droit, nous devons concevoir des bulles de chat d'impression 3D, cela va présenter comment l'équipe de support répond aux questions de l'utilisateur. Tout d'abord, nous devons augmenter la taille de notre plan de travail de page d'apprentissage, donc je vais sélectionner cela et je vais augmenter la hauteur à, disons 4 000 pour l'instant, nous pouvons le modifier plus tard. Je vais zoomer, et ce dont j'ai besoin, ce sont des calques de texte, donc je vais aller de l'avant et double-cliquez sur ce contenu de la fonctionnalité 1, copiez-le et laissez-moi le coller ici. Je vais dévoiler mes grilles de mise en page, laissez-moi la mettre sur le côté gauche comme ça, et le titre sera  : « Nous vous soutenons dans cinq langues différentes. » Je vais le copier et le coller à partir de mon presse-papiers comme ceci. Permettez-moi de déplacer cette description vers le bas et de m'assurer que la marge supérieure est définie sur 30, comme ceci, et permettez-moi de copier et de coller la description également. Notre équipe de support est là pour vous aider en cinq langues : anglais, français, espagnol, polonais et allemand. En bas, nous avons besoin d'avoir quelques images de profil. Pour ce faire, nous devons créer un cercle, donc je vais cliquer et faire glisser, et je vais définir la largeur et la hauteur à 60 pixels, laissez-moi le déplacer vers le bas. Pour chaque cercle, nous devons avoir une image. Avant d'ajouter l'image à notre cercle, je vais y ajouter un trait, et changer l'épaisseur de 1-1,5, et modifier la couleur en blanc, comme ceci. Ensuite, je vais sélectionner cela et le dupliquer, commande D ou le contrôle D, déplacer vers le côté droit, encore une fois, dupliquer, et deux fois de plus, nous y allons. Au total, nous allons avoir cinq images différentes. Maintenant, comment pouvons-nous ajouter l'image à ces cercles ? Nous pouvons les sélectionner tous et cliquer sur ce menu hamburger en haut à gauche et aller dans les plugins, et ici je vais aller et cliquer sur Content Reel plugin. Si vous n'avez pas encore installé ce plugin, assurez-vous de cliquer sur Gérer les plugins, et sur le côté gauche vous pouvez voir tous les plugins installés. Si vous n'avez pas installé de plugin, vous pouvez facilement aller à la communauté, puis aller à l'onglet plugins, et à partir d'ici vous pouvez trouver Content Reel et cliquez sur le bouton Installer sur le côté droit. Alors que ces cercles sont sélectionnés, je vais aller de l'avant et exécuter ce plugin de bobine de contenu. Ensuite, en bas, nous avons deux options, My Content et Content Library. Je vais aller de l'avant et cliquer sur Bibliothèque de contenu, puis aller aux images. Ici vous avez beaucoup de bibliothèques, vous avez Avatars de Microsoft et d'autres bibliothèques. Laissez-moi choisir Avatars by Microsoft, qui comprend des images masculines et féminines, et je vais cliquer sur Appliquer tout. On y va. Maintenant, nous avons des images aléatoires coupées à nos cercles, et c'est exactement le résultat que nous recherchions. Cependant, si vous n'êtes pas satisfait des images, vous pouvez facilement cliquer à nouveau sur Appliquer tout pour obtenir le meilleur résultat possible. Assurez-vous de garder un équilibre afin que vous n'ayez pas seulement des photos masculines ou seulement des photos féminines. Bien sûr, cela dépend du but de votre conception et du but du produit. Je pense que nous avons maintenant un bon résultat. Je vais fermer le plugin, nos images sont prêtes, vous pouvez les sélectionner toutes, les regrouper, Commande G ou Control G, et appelons-ça Profile Images. Juste à côté de ces images, nous devons avoir un nombre, un calque de texte, donc je vais appuyer sur T sur mon clavier et créer un nouveau calque de texte, et je vais écrire plus 20, et cela indique qu'il y a 20 personnes de plus travaillant dans le service de support. Je vais le déplacer un peu vers le haut, assurez-vous qu'ils sont alignés verticalement. Réglons son rembourrage gauche à 10, et je vais choisir un style de texte pour cela. Je vais choisir principal et laissez-moi changer la couleur, utilisons nos styles de couleur, Secondary/Light. On y va. Ça a l'air incroyable. Le côté gauche est prêt. Et le bon côté ? Comme je l'ai déjà mentionné, nous devons créer trois bulles de chat différentes. Nous devons utiliser l'outil rectangle, je vais le sélectionner, cliquer et faire glisser, comme ceci, assurez-vous de définir la largeur à 370, puis je vais modifier le rayon de coin, laissez-moi le changer à 30. Mais je dois définir le rayon de coin de ce coin particulier, le coin inférieur gauche à zéro. Pour ce faire, vous pouvez facilement vous diriger vers l'inspecteur et cliquer sur cette icône de coins indépendants. Vous pouvez maintenant modifier le rayon d'angle indépendamment. Je vais mettre le bas à gauche à zéro, on y va, et enfin, on peut changer la couleur en blanc. Maintenant, nous devons ajouter une image de profil juste à côté de cette bulle de chat, donc nous devons créer un cercle, comme celui-ci, et je vais le rendre plus petit, donc réglons la largeur et la hauteur à 55 pixels. Déplacez-le vers le bas et assurez-vous qu'il est aligné avec votre bulle de chat, et que son remplissage droit sera réglé sur 20 pixels. Allons de l'avant et exécutons notre plugin Content Reel. Une fois de plus, accédez aux images de la bibliothèque de contenu, puis choisissez à nouveau Avatars. Mais cette fois, je vais choisir une femme, parce que je suis sûr que cette personne doit être une femme. Laisse-moi choisir celui-là, plutôt bien. Je vais le fermer et nous devons ajouter son nom et l'horodatage. Je vais écrire, par exemple, Claire, 12:35, et pour cela, je vais changer le style du texte en légende. Assurez-vous qu'il est aligné avec notre bulle de chat et que son rembourrage supérieur sera de 10 pixels. Enfin, permettez-moi de changer la couleur à Secondary/Light, fantastique. La dernière chose que nous devons faire est d'ajouter le message, donc je vais ajouter un calque de texte ici et laisser moi écrire, Salut Mike. Comment puis-je vous aider ? Une question de soutien typique, bien sûr. Je vais changer le style de texte par le principal comme ceci. Assurez-vous qu'il est aligné avec votre bulle de chat verticalement et qu'il est gauche rembourrage va être de 40 pixels, comme ceci. Comme vous pouvez le voir, le rembourrage supérieur est réglé à 30 et le rembourrage inférieur à 29. Pour en faire 30, je vais choisir notre bulle rectangle ou chat, et réglons la hauteur à 90 au lieu de 89. Maintenant, ça a l'air génial. Vous devez vous assurer d'aligner votre image de profil avec le rectangle. Encore une fois, ces calque de texte doivent être déplacés d'un pixel pour obtenir le remplissage supérieur de 10 pixels. Last but not least, nous devons changer sa couleur pour Secondary/Light, fantastique. Notre première bulle de chat est prête. Maintenant, sélectionnons d'abord ces deux couches, comme ceci. Je vais cliquer et faire glisser, et comme vous pouvez le voir, notre rectangle et cette question est sélectionné, groupez-les et appelons-le bulle de chat. Ensuite, sélectionnez cette bulle de chat avec d'autres éléments. Maintenez la touche Maj enfoncée et cliquez dessus. Regroupez-les, et maintenant nous allons écrire le Message 1. Maintenant, je vais le dupliquer, commande D ou le contrôle D, déplacer vers le bas comme ça. Le prochain message sera le message de nos utilisateurs, et la direction de ces bulles de chat devrait être modifiée. Qu'est-ce que je vais faire ? abord, je vais sélectionner ce rectangle, alors assurez-vous que votre rectangle est sélectionné, pas le groupe de bulles de chat, faites un clic droit dessus et retournez-le horizontalement,de sorte que et retournez-le horizontalement, sa direction est changée. Ensuite, je vais sélectionner à nouveau ce rectangle et modifier sa couleur. Pour celui-ci, je vais le définir Secondary/Light et sélectionner la question qui est ce calque de texte, détacher de son style, et le mettre en blanc. Ensuite, je vais double-cliquer sur ce calque de texte, déplacer vers le côté droit et m'assurer qu'il est aligné avec notre bulle de chat, et enfin, nous devons déplacer cette image de profil vers le côté droit. On a besoin d'un rembourrage de 20 pixels, fantastique. Maintenant, nous pouvons déplacer notre message vers le groupe vers le côté gauche. Je vais dévoiler mes grilles de mise en page comme ça, plutôt bien. N' oubliez pas de changer le nom et l'heure, je vais écrire Mike, et pour le temps, mettons-le à 12:36. Alignez-le, vous pouvez l'aligner sur le côté droit ici aussi, et la couche de texte va être changée en, ma carte de crédit est volée, comme ceci. Enfin et non des moindres, nous devons changer notre image. Sélectionnez ce cercle, assurez-vous que ce calque est sélectionné et exécutez le plugin Reel de contenu, une fois de plus, allez dans Bibliothèque de contenu, allez dans Images. Mais cette fois, je vais utiliser une autre bibliothèque, par exemple, celle-ci. Peu importe lequel, c' est à vous de décider. Mais laissez-moi choisir, par exemple, celui-là. Je pense que ça a l'air super, parfait. Notre Message 2 est également prêt. Nous avons besoin d'un message de plus, et maintenant c'est tellement facile parce que nous devons simplement sélectionner Message 1, dupliquer, Commande D ou Contrôle D, déplacer vers le bas comme ceci. Assurez-vous de régler votre espacement correctement. La marge supérieure de ce Message 2 va être de 40 pixels comme celui-ci pour celui-ci aussi. Parce que la cohérence est la clé de la conception. Écrivons, non, pas de problème. Nous allons nous occuper de cela. Vous pouvez également y ajouter un emoji, mais nous allons le laisser tel quel. Permettez-moi de diminuer sa largeur à 258, comme ceci, le déplacer vers le haut, et aussi nous devons agrandir cette bulle de chat parce que maintenant nous avons deux lignes. Assurez-vous de sélectionner ce rectangle, et je vais changer la hauteur de 90 à 110 pour avoir un peu d'espace ici. Encore une fois, alignez-les, assurez-vous de déplacer votre calque de texte vers le bas et également aligner cette image de profil, fantastique, tout est superbe. Maintenant, sélectionnons tous ces messages, groupez-les, et appelons-les Messages. Je vais sélectionner tout le contenu sur le côté gauche, les regrouper, et écrire Feature 3, maintenir la touche Maj enfoncée et sélectionner les Messages, les aligner verticalement, les regrouper, et appelons-la Feature 3 Section. Nous avons presque fini, cependant, laissez-moi déplacer cette Section 3 vers le bas pour obtenir une marge supérieure de 260 pixels. Comme vous pouvez le voir ici, nous avons des espaces vides. Afin de remplir ces espaces, nous pourrions ajouter des formes simples à notre arrière-plan. Cela n'a pas besoin d'être très compliqué, par exemple, nous pouvons ajouter quelques cercles. Laissez-moi choisir l'outil Ellipse, maintenez la touche Maj enfoncée, cliquez et faites glisser pour créer un cercle, et laissez-moi changer la largeur et la hauteur à 16 pixels, comme ceci. Ensuite, choisissons notre couleur Secondary/Light, détachez-la de son style, et diminuons détachez-la de son style, l'opacité à 10 pour cent pour obtenir ce cercle lumineux. Ensuite, je vais le dupliquer sur le côté droit, encore une fois, le dupliquer, la commande U ou le contrôle D, commande U ou le contrôle D, et répéter ce processus jusqu'à ce que vous obteniez six cercles d'affilée, sélectionnez-les tous, regroupez-les, dupliquez-le, déplacez-le vers le bas, assurez-vous que le remplissage entre eux et le remplissage entre ces lignes est le même, donc dans ce cas, il est réglé sur six pixels. Encore une fois, je vais le dupliquer, le déplacer vers le bas, et répéter ce processus jusqu'à ce que vous obteniez six lignes comme ceci. Ensuite, je vais sélectionner tous ces groupes, une fois de plus les regrouper, appelons-le BG. Je vais le déplacer un peu sur le côté gauche, quelque chose comme ça. Je pense que ça a l'air bien, dupliquons, déplacez-le vers le côté droit vers le bas et assurez-vous de déplacer ce calque vers le bas et placez-le sous votre section Feature 3. Ici, on y va. Je pense que maintenant ça a l'air super. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 105. Plans de adhésion: Hé, bienvenue. Dans cette vidéo, nous allons commencer à concevoir notre section sur le plan d'adhésion. Jetons un coup d'oeil à notre filaire. Comme vous pouvez le voir pour cette section, nous avons besoin d'un titre, d'un sous-titre et de deux grandes cartes. Chaque carte va avoir des informations sur cette adhésion particulière, comme le nom, le prix, un appel à l'action ou disons le bouton d'inscription, la carte de crédit et les avantages de cette adhésion particulière. Tout d'abord, nous devons créer une couche de texte pour notre titre. Je vais appuyer sur T sur mon clavier et cliquer ici et écrire un service exceptionnel au bon prix. Je vais sélectionner ce calque de texte et je vais choisir notre H3 ou notre titre trois comme ceci et je vais l'aligner au centre horizontalement. Parfait. Et la couleur ? Pour la couleur, je vais utiliser deux couleurs pour ces calques de texte. Je vais sélectionner au bon prix et choisir notre couleur d'accent pour cela et le reste va avoir notre couleur primaire. Parfait. Ça a l'air bien. Alors je vais le dupliquer. Commande V ou Contrôle V déplacez-le vers le bas. Pour le sous-titre, je vais écrire commencer avec notre plan gratuit et passer à prime au fur et à mesure que vous grandissez. Comme ça. Pour ces calque de texte, je vais choisir par l'intro comme ceci. Pour la couleur, nous pouvons choisir l'obscurité secondaire et nous assurer de l'aligner horizontalement au centre et sa marge supérieure va être de 20 pixels comme ceci. Parfait. Maintenant, nous devons créer nos cartes, mais avant cela, nous devons augmenter la hauteur de notre page d'apprentissage. Assurez-vous de sélectionner votre tableau d'art et augmentez-le à 6100 comme ceci. On a assez de place pour travailler. Je vais zoomer. abord, dessinons un rectangle pour notre carte comme celle-ci et je vais définir la largeur à 430 et la hauteur à 1131, comme ceci. Je l'ai déjà calculé parce que j'ai déjà conçu ce projet donc je sais la hauteur dont je vais avoir besoin, mais si vous voulez concevoir un projet et que vous ne savez pas comment le calculer, vous avez juste besoin de modifier ces montants plusieurs fois comme votre conception continue. Par exemple, supposons que vous ayez quelque chose comme ça et vous y ajoutez plus de contenu et que vous avez besoin de plus d'espace, alors vous augmenterez la hauteur encore et encore jusqu'à ce que vous obteniez la taille de hauteur dont vous avez besoin. Pour ces cartes, nous allons utiliser le même style que celui que nous avons utilisé pour ces cartes. Afin de copier le style, je vais maintenir enfoncée la touche Contrôle de mon clavier ou de la touche de commande et cliquer sur ces voitures pour sélectionner ces rectangle particulier. Alternativement, vous pouvez vous diriger vers la liste des calques sur le côté gauche et rechercher ce rectangle. Ensuite, faites un clic droit sur cela et allez à copier et coller et copier les propriétés. Je vais faire défiler vers le bas, sélectionner ce rectangle, clic droit sur cela et coller des propriétés et là nous allons. Vous venez de copier et coller tous les styles que nous avons ajoutés à nos cartes avant et c'est exactement ce que nous voulons. Nous avons le coup, nous avons l'ombre portée, tout a l'air génial. De quoi avons-nous besoin ? Tout d'abord en haut, nous avons besoin du nom. Je vais appuyer sur T sur mon clavier et ajouter un calque de texte et ici nous allons écrire gratuitement. Ensuite, je vais changer le style de texte à l'âge de trois ans cependant, nous n'avons pas besoin qu'il soit gras, donc je vais le détacher de son style et le changer à normal. Assurez-vous ensuite qu'il est aligné sur le centre de votre carte. Vous devez maintenir la touche Maj enfoncée, sélectionner ce calque de texte et votre carte et vous diriger vers la section d'alignement de l'inspecteur et l'aligner horizontalement comme ceci. Maintenant, c'est exactement au milieu. Son rembourrage supérieur va être de 60 pixels, dupliquez-le, commande D ou Contrôle D, déplacez-le vers le bas. ici, nous devons écrire le prix. Je vais écrire $0/m, ce qui signifie par mois. Pour ce montant $ et zéro, je vais définir la taille de la police à 60 et cette barre oblique et m vont utiliser la même taille de police 40. On n'a pas besoin de changer ça. Assurez-vous de l'aligner avec la carte au centre comme ceci. C' est le rembourrage supérieur va être de 50 pixels, comme ça. Quoi d'autre ? Après cela, nous devons avoir une description. Je vais le dupliquer, le déplacer vers le bas. Réglons l'alignement de notre calque de textes au centre. Il est plus facile de le modifier plus tard et ici je vais écrire, gérer votre entreprise avec un compte simple et efficace. Je vais juste le copier et le coller à partir de mon presse-papiers. Pour cela, je vais choisir par le principal et sa couleur va être la lumière secondaire comme celle-ci. Vous pouvez définir la largeur sur 340 et assurez-vous de l'aligner au centre horizontalement. Vous devez toujours sélectionner votre calque et votre carte, puis les aligner. Il est rembourrage supérieur va être de 30 pixels et jusqu'à présent si bon. Après cette description, nous avons besoin d'un bouton. Je vais créer un bouton de démarrage et je vais avoir besoin d'un rectangle. Cliquez et faites glisser comme ceci. La largeur de ce rectangle va être de 170 et la hauteur, je vais le mettre à quelque chose comme 54 pixels. Ensuite, je vais le faire arrondir, augmentons le rayon de coin à 20 et enfin, faisons un bouton de contour. Je vais enlever le remplissage et y ajouter un trait. Je vais régler l'épaisseur à 1,5 et la couleur va être sombre secondaire comme ça. Ensuite, ajoutez un calque de texte et écrivons, commençons. Pour ces calque de texte, je vais utiliser la légende et aussi pour sa couleur, je vais utiliser l'obscurité secondaire. Enfin, nous devons aligner ces rectangle avec notre calque de texte démarré à la fois horizontalement et verticalement les regrouper Commande G ou Control G. Appelons ça commencer et je vais l'aligner horizontalement avec ma carte. On y va. Son rembourrage supérieur va être de 30 pixels. Jusqu' à présent, si bien. Quelle est la prochaine ? Ensuite, nous avons besoin de notre carte de crédit, nous n'avons pas besoin de la concevoir une fois de plus puisque nous l'avons déjà conçue. Permettez-moi de sélectionner ces cartes de crédit, de la copier, et de faire défiler vers le bas et de la coller ici. Je vais appuyer sur K sur mon clavier pour sélectionner l'outil de mise à l'échelle et essayer de le réduire comme ceci. Je pense que ça a l'air bien. Alignez-le au centre. Son rembourrage supérieur va être de 40 pixels. Juste sous ces cartes, nous devons créer deux cercles différents pour permettre à l'utilisateur de choisir entre deux designs différents. Je vais sélectionner l'outil Ellipse, cliquer et faire glisser, et définissons la largeur et la hauteur à 30, comme ceci. Nous allons avoir deux modèles différents, la version sombre et la version légère. Pour indiquer la version foncée, nous allons utiliser deux couleurs différentes ici, notre couleur foncée secondaire et cette couleur violet clair que nous utilisons pour notre carte de crédit. Laisse-moi zoomer. Je vais choisir un rectangle, cliquer et faire glisser comme ça pour sentir la moitié de notre cercle et choisir notre couleur foncée secondaire. Assurez-vous de sélectionner ce cercle, dupliquez-le. Pendant que ce calque dupliqué est sélectionné, maintenez la touche Maj et sélectionnez ce rectangle que nous venons de créer et cliquez sur « Masque » comme ceci. Ensuite, choisissez votre cercle initial, qui est celui-ci, et changez sa couleur pour ce violet clair. Je vais choisir l'oeil là où on va. Notre groupe de masques est prêt. Vous devez vous assurer de sélectionner ces deux couches. Assurez-vous de sélectionner à la fois votre cercle initial et votre groupe de masques et de les regrouper. Appelons ça sombre, déplacez-le vers le haut, et son rembourrage supérieur va être de 20 pixels. Dupliquez-le, déplacez-le vers le côté droit, et maintenant nous devons modifier la couleur, alors laissez-moi zoomer. Je vais sélectionner ce rectangle sombre et changer sa couleur pour ce violet clair, puis sélectionner notre cercle initial et changer sa couleur pour cette couleur plus claire en haut. On y va. La dernière chose que nous devons faire est de mettre un coup autour de ce cercle sombre. Parce que nous devons indiquer en quelque sorte que cette version sombre est sélectionnée, et si l'utilisateur clique sur cette version légère, ce trait devrait apparaître autour de ce cercle. Tout d'abord, laissez-moi renommer ce groupe en lumière, puis je vais créer un autre cercle. Maintenez la touche Maj enfoncée, cliquez et faites glisser comme ceci, et placez-le juste sous le groupe sombre, supprimez un remplissage , ajoutez un trait, et nous devons l'aligner sur notre cercle intérieur. Je vais le rendre un peu plus petit. Si je le mets à 36 x 36 pixels et maintenez l'option ou la touche Alt enfoncée de mon clavier, vous pouvez voir que nous avons un rembourrage de trois pixels de tous les côtés. C' est exactement ce dont nous avons besoin. Regroupez-les, et je vais l'appeler veine sélectionnée. Le rembourrage gauche de ce thème lumineux va être de 10 pixels comme ceci. Plutôt bien. Mais ils ne sont pas alignés au centre de cette carte. Ce que nous devons faire est de maintenir la touche Maj enfoncée et de sélectionner les deux, comme ceci, de les regrouper, et ici je vais l'appeler thèmes, et maintenez la touche Maj enfoncée, cliquez sur notre carte de crédit et les aligner sur le centre horizontalement. Maintenant, ils sont au centre. La section suivante présente les avantages de cette adhésion. Nous devons avoir une icône sur le côté gauche et un calque de texte juste à côté. S' il vous plaît ouvrir le dossier assets et ouvrir le dossier icons, et ici vous avez quelques icônes. Choisissez l'icône de vérification et faites-la glisser dans votre projet. On y va. Je vais zoomer, appuyez sur T et créer un calque de texte. Pour le premier avantage, je vais écrire, 10 transferts locaux gratuits, puis je vais définir le style de texte à moyen comme ça. Laissez-moi l'aligner avec mon icône de vérification très rapidement, et le rembourrage gauche va être 10 pixels et la couleur devrait être sombre secondaire comme ceci. Maintenant, sélectionnons les deux. Maintenez la touche Maj enfoncée et cliquez sur votre icône de vérification , regroupez-les, et je vais le nommer avantage. Dupliquez-le, déplacez-le vers le bas. Ici pour la deuxième fonctionnalité, je vais écrire des retraits ATM gratuits en dollars jusqu'à 250$ par mois. Je vais le copier et le coller à partir de mon presse-papiers pour gagner du temps. On y va. Cependant, j'ai besoin de diminuer sa largeur de 400 pixels à 316 pixels pour obtenir quelque chose comme ça. Fantastique. Ensuite, je vais le dupliquer, déplacer vers le bas et ici je vais écrire des paiements gratuits sur d'autres comptes provisoires. Laisse-moi le coller. On y va. Assurez-vous de les aligner. Encore une fois dupliquez-le, déplacez-le ici. Je vais écrire des cartes de débit prépayées. Encore une fois, dupliquez-le, déplacez-le vers le bas. Ici, nous allons écrire des cartes visuelles. Fantastique. Encore une fois, dupliquez-le, déplacez-le vers le bas. Ici, je vais écrire le support de priorité 24-7 comme ceci. Nous devons écrire deux autres avantages. Pour celui-ci, je vais écrire échange 24 devises. Pour le dernier, je vais écrire l'accès multi-utilisateur. Plutôt bien. Maintenant, nous devons définir l'espacement entre eux. Je vais maintenir la touche Maj enfoncée et les sélectionner tous comme ceci, et distribuer l'espacement vertical. Je vais régler le rembourrage entre eux à 20 pixels comme ça. Regroupez-les et appelez ça des avantages. Sélectionnez votre rectangle, qui est votre carte, alignez-le au centre et sélectionnez votre groupe d'avantages, déplacez-le vers le haut. Son rembourrage supérieur va être de 40 pixels comme ça, et son rembourrage inférieur va être de 40 pixels aussi. Comme je l'ai déjà mentionné, vous pouvez modifier la hauteur quand vous le souhaitez. Comme vous pouvez le voir, maintenant il est réglé sur 41. Si je mets la hauteur à 1126, je peux obtenir un rembourrage de 40 pixels du bas comme ceci. Jusqu'à présent, si bon. La dernière chose que nous devons faire est de désactiver ces trois derniers avantages. Parce que cet abonnement gratuit va avoir toutes ces fonctionnalités à l'exception de ces trois derniers avantages. Ceux-ci sont disponibles dans l'abonnement Premium. J' ai juste besoin de changer leur couleur en gris clair. Je vais sélectionner ce calque de texte, détacher de son style et changer le code couleur en B7, B7, B7 comme ceci. Je vais copier ces codes de couleur et sélectionner mon icône de vérification, et dans la section de couleur de sélection, je vais le coller. On y va. Je vais répéter le même processus pour d'autres avantages comme celui-ci. Nous avons fini avec notre carte gratuite, mais une chose que je remarque est que nous avons réglé le rembourrage supérieur à 60 pixels, donc besoin d'avoir un rembourrage inférieur de 60 pixels ainsi. Cependant, comme vous pouvez le voir, il est défini sur 40. Ce que je vais faire est de sélectionner ce rectangle et je vais aller de l'avant et juste ajouter 20 pixels de plus à la hauteur. Ce que je peux faire, c'est écrire plus 20 comme ça. Maintenant, le rembourrage inférieur est réglé à 60. Et la carte premium ? abord, nous devons sélectionner tous ces éléments comme ceci. Cliquez et faites glisser pour les sélectionner tous, les regrouper, et ici nous allons écrire un plan gratuit. Ensuite, dupliquez-le, déplacez-le vers le côté droit. Le rembourrage entre eux va être de 30 pixels comme ceci. Nous devons modifier quelque chose ici. abord, nous devons modifier le nom du groupe avant d'oublier que, Modifions le plan premium. Ensuite, nous devons modifier le nom évidemment. Passons gratuitement à la prime. Mais avant cela, assurez-vous d'aligner le calque de texte au centre afin qu'il reste à la prime centrale. Le prix sera de $8. La description doit être modifiée. Je vais le changer pour un support prioritaire et accès multi-utilisateurs pour maximiser votre productivité. Laissez-moi le coller à partir de mon presse-papiers. On y va. Je vais faire défiler vers le bas, et maintenant nous devons rendre ces trois dernières options disponibles. Ce que nous devrions faire est de sélectionner tous ces calques de texte, maintenir la touche Maj enfoncée et de cliquer sur chacun d'eux et de choisir l'obscurité secondaire. Sélectionnez ensuite votre icône de vérification et changez sa couleur à votre couleur principale. Plutôt bien. C'est si simple, n'est-ce pas ? La carte premium est également prête. Nous avons presque terminé, mais nous devons nous rappeler d'aligner nos cartes au centre. Choisissons les deux, regroupez-les, et ici je vais appeler ça des plans. Il vous suffit de vous diriger vers la section d'alignement et de l'aligner horizontalement vers le centre. Fantastique. Sa marge supérieure va être de 120 pixels. C' est tout. Tu vois à quel point ils sont beaux ? J' espère que vous avez apprécié cette vidéo et je vous verrai dans la prochaine. 106. Section FAQ: Salut, bienvenue. Dans cette vidéo, Nous allons concevoir la section Foire aux questions. Pour cette section, Nous avons besoin d'avoir, encore une fois un titre, un sous-titre, et quelques cartes. Ces cartes vont être ouvertes et fermées à l'intérieur d'une carte en vigueur. Sans plus tarder, commençons. Tout d'abord, je vais aller de l'avant et sélectionner Ces deux calques de texte, dupliquez-les, Contrôle D ou Commande D. Déplacez les vers le bas comme ceci. Le rembourrage supérieur va être réglé à 260 pixels comme ceci. Le titre va être remplacé par la foire aux questions. Je vais changer cette section violette en Fréquemment et la section droite en Questions posées. Permettez-moi de changer la couleur à notre couleur d'accent comme ceci, et de l'aligner au centre. Le sous-titre va être changé en autre chose. Je vais le copier et le coller à partir de mon presse-papiers. Comme vous pouvez le voir, c'est un paragraphe de ligne. Je vais réduire la largeur à 600 pixels et aligner le texte au centre et aligner également un calque au centre horizontalement comme ceci. La dernière chose que nous devons changer ici, c'est la couleur. Je vais changer la couleur en lumière secondaire au lieu de sombre pour cette description. La description que vous pouvez voir est que si vous n'êtes pas sûr si Draft vous convient ou non, ne vous inquiétez pas. Nous sommes ici pour vous expliquer tout ce que vous voudrez savoir. Juste en dessous, nous avons besoin de nos cartes de questions. Pour notre carte de questions, Nous devons créer un rectangle. Cliquez et faites glisser comme Ceci. Je vais dévoiler mes grilles de mise en page. La deuxième colonne du côté gauche et la deuxième colonne du côté droit, laissez-moi zoomer. La largeur est réglée sur 948 et la hauteur, je vais la changer à 96 pixels. Ensuite, comme vous pouvez le deviner, Nous devons utiliser le même style que Nous avons utilisé pour ces cartes. Je vais sélectionner Ce « Rectangle' alors qu'il est sélectionné, faites un clic droit sur cela et « Copier les propriétés ». Sélectionnez Ce « Rectangle », faites un clic droit sur cela et « Coller les propriétés ». On y va. La seule chose que nous devons changer, c'est le rayon de coin. Comme vous pouvez le voir, il est réglé à 50. Cependant, c'est trop. Je vais le mettre à 27. Nous avons besoin d'un calque de texte et nous avons besoin d'une icône sur le côté droit. Laissez-moi créer un calque de texte et je vais coller la question à partir de mon presse-papiers. On y va. Voici une question. Quelle est la différence entre un compte bancaire traditionnel et un compte bancaire traditionnel ? Permettez-moi de changer le style de texte en H4. Ça a l'air bien. Assurez-vous qu'il est aligné avec notre carte verticalement, et qu'il est à gauche rembourrage va être de 30 pixels comme ceci. Sur le côté droit, comme je l'ai mentionné précédemment, Nous devons placer une icône plus. S' il vous plaît ouvrir le dossier assets, et dans le dossier de l'icône, vous pouvez trouver l'icône plus, glisser-déposer dans votre projet et le mettre juste là. Il est bon rembourrage va être de 30 pixels. Assurez-vous qu'il est aligné verticalement au centre de votre carte. Sélectionnez à la fois votre icône et votre carte et alignez-la verticalement. On y va. Notre carte est prête. C' était si simple, n'est-ce pas ? Maintenant, sélectionnons-les tous, regroupons-les , et je vais appeler ça question. Ensuite, je vais le dupliquer, le déplacer vers le bas. La marge entre eux va être de 20 pixels. Maintenant, je vais changer la question pour autre chose. Permettez-moi d'aligner Ce calque de texte sur le côté gauche, puis de coller la question à partir de mon presse-papiers. On y va. Qui peut ouvrir un compte brouillon ? Encore une fois, dupliquez-le et déplacez-le vers le bas, et je vais changer la question. Cette fois, la question est savoir si je retire de l'argent à l'étranger. Je vais le dupliquer une fois de plus, le déplacer vers le bas et changer la question en autre chose. Puis-je annuler mon abonnement ou passer à un autre forfait à tout moment ? Encore une fois, dupliquez-le, déplacez-le vers le bas, et c'est notre dernière question. Je vais le coller tout de suite. On y va. Que se passe-t-il si je retire plus de 250$ ? Bien sûr, vous pouvez aller de l'avant et modifier Ces calques de textes et ces questions. C' est totalement à toi de décider. Nos questions sont prêtes. Maintenant, je vais les sélectionner tous, les regrouper , et appelons ça des questions. Sa marge supérieure va être de 120 pixels comme ceci. C'est plutôt bon. Cependant, comme vous pouvez le voir ici, Nous avons tellement d'espace vide et ce n'est pas bon. Je vais ajouter un peu de contexte à cette section pour passer d'une manière ou d'une autre de cette section plans d'adhésion à cette section FAQ. Je vais vous montrer une technique très cool pour créer des milieux incroyables. Choisissez l'outil Plume. Cliquez quelque part comme ici. Maintenant, vous venez de créer une note, cliquez ailleurs et faites glisser. Assurez-vous de cliquer et de faire glisser comme Ceci pour créer une ligne courbe, et je vais cliquer et faire glisser comme Ceci. Parfait. Maintenant, je vais le déplacer vers le bas, et changeons sa couleur pour notre couleur de lumière secondaire, et ouvrez Ce menu, allez dans les plugins. Cette fois, je vais utiliser un plugin cool appelé Looper. Si vous ne l'avez pas encore installé, assurez-vous d'aller dans Gérer les plugins, puis allez dans Community, comme je vous l'ai déjà montré, et cherchez le plugin Looper, installez-le et maintenant vous pouvez l'exécuter. Ce plugin vous permet d'itérer vos objets. Par exemple, vous pouvez créer une forme telle que Cette ligne, puis vous pouvez définir des valeurs telles que les itérations, la position, l'échelle, l'opacité, même la couleur, puis créer des formes et des diagrammes sympas. Essayons ça. Pour l'instant, je vais garder les paramètres tels qu'ils sont. L' itération est définie sur 20, la position x est 0, y est 10 et l'angle est de cinq. L' échelle est de 10, l'opacité est de 80 pour cent. Cliquez sur « Créer ». Tu vois à quel point c'est génial ? Maintenant, vous pouvez facilement créer un fond très cool en utilisant Ce plugin. Appuyez sur « Commande Z » ou « Contrôle Z » pour annuler le processus. Je vais modifier ces valeurs. Je vais changer les itérations à 15 et aussi l'échelle à cinq. Ça a l'air bien. Comme vous pouvez le voir, il a créé un groupe pour nous. Je vais le nommer BG-2 et m'assurer de déplacer ces groupes BG-2 tout le chemin vers le bas, comme ça, le déplacer vers le bas, assez cool. Ensuite, je peux appuyer sur « K » sur mon clavier et le mettre à l'échelle un peu. Fantastique. Comme vous pouvez le voir, ici, Nous n'avons pas un bon rapport de contraste. Ce que je vais faire est de diminuer cette opacité dans la section de calque à 20 pour cent, comme ceci. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 107. Footer: Hé, bienvenue. Dans cette vidéo, nous allons terminer la conception de notre page d'apprentissage ensemble. La dernière chose que nous devons concevoir est le pied de page. Vous pouvez trouver un pied de page Web généralement au bas du site Web. Il se compose d'un avertissement de droit d'auteur, quelques ressources pertinentes, et aussi vous pourriez avoir un appel à l'action comme un abonnement à la newsletter et le logo de la société. On va rester si simple. Jetons un coup d'oeil à notre filaire. Comme vous pouvez le voir, nous avons neuf liens différents. Nous avons un logo et du texte, qui est notre avis de copyright. Sans plus tarder, commençons. Tout d'abord, nous devons créer un rectangle comme arrière-plan de notre pied de page, comme ceci. Je vais régler la hauteur à 440, puis je vais changer le code couleur en DC, E2 et F0, afin de créer un bon rapport de contraste avec la couleur de notre arrière-plan. Maintenant, nous devons placer notre logo ici. Je vais faire défiler vers le haut. On y va. Voici notre logo. Copiez-le, faites défiler vers le bas et collez-le ici. Je vais appuyer sur « K » sur mon clavier pour le mettre à l'échelle. Je pense que c'est trop. Faisons quelque chose comme ça. Je vais changer la largeur à 80. C' est cool. Laissez-moi dévoiler mes grilles de mise en page. Je vais le placer ici sur la deuxième colonne et juste en dessous, nous avons besoin de notre avis de copyright, donc je vais créer une couche de texte et écrire copyright et un signe de copyright 2020 Draft, LLC. Écrivons, tous droits réservés. Si vous ne savez pas comment taper ce signe de copyright, maintenez enfoncée la touche d'option de votre clavier si vous êtes un utilisateur Mac et appuyez sur « G ». Si vous êtes un utilisateur Windows, vous devez maintenir la touche Alt enfoncée et taper le numéro 0169. Si vous n'avez pas de clavier sur votre clavier, vous pouvez rechercher un signe de copyright dans Google et vous trouverez quelque chose comme ça, et vous pouvez le sélectionner, c' est une bonne technique, copier et venir ici et le coller. C' est tout. Ça fait la même chose. Maintenant, je vais changer le style de texte à acheter et je vais changer la couleur à la lumière secondaire. Enfin, je vais l'aligner. Comme vous pouvez le voir ici, j'ai 30,67. Le problème est avec la taille du cadre de mon logo. Depuis que je l'ai mis à l'échelle, je n'ai pas obtenu un nombre arrondi. Ne vous inquiétez pas pour ça. C' est très bien. Pour corriger cela, vous pouvez modifier la taille de votre image, mais pour l'instant, nous allons la laisser telle quelle. La prochaine chose que nous devons créer, c'est nos liens. Permettez-moi de créer un nouveau calque de texte. Ici, je vais écrire équipe et ça va être corps/main, donc c'est bien, et sa couleur va être sombre secondaire, comme ça. Laisse-moi le déplacer sur le côté gauche. Je vais le dupliquer, le déplacer vers le bas. Tiens, je vais écrire, presse. Encore une fois, dupliquez-le, déplacez-le vers le bas. Ici, je vais écrire des frais. Chacun d'eux est un lien. Le rembourrage entre eux va être de 44 pixels, comme ceci. Plutôt cool. Je vais les déplacer vers le haut, les dupliquer, les déplacer vers le côté droit et ici je vais écrire des services. Alors je vais écrire des projets. Le dernier, je vais écrire affilié. Encore une fois, nous devons les sélectionner, les dupliquer, les déplacer vers le côté droit et ici je vais écrire des conditions d'utilisation. Pour le second, je vais écrire la politique de confidentialité, et ensuite je vais écrire contactez-nous. Parfait. Sélectionnez ces trois premiers liens, regroupez-les, puis sélectionnez les liens de deuxième colonne. Une fois de plus les regrouper et le dernier, et maintenant sélectionner les trois groupes. Je vais aller de l'avant et distribuer espacement horizontal entre eux que je peux facilement modifier le rembourrage entre les deux. Le rembourrage entre eux va être de 110 pixels comme ceci. Vous pouvez également le modifier à partir de l'inspecteur. Ensuite, regroupez-les, appelons-les liens. Plutôt bien. Maintenant, laissez-moi le mettre sur le côté droit comme ça, et puis je vais sélectionner notre rectangle, cet arrière-plan, et l'aligner au centre verticalement et aussi, nous devons sélectionner cette notice de copyright, maintenez la touche « Maj » et sélectionnez notre logo, regroupez-les, sélectionnez notre rectangle et alignez-les verticalement. Plutôt bien. Enfin, nous devons sélectionner tous ces éléments, les regrouper, et nous allons l'appeler pied de page. Parfait. Nous avons un petit problème ici et c'est, nous n'avons pas autant d'espaces, donc nous devons le résoudre. Il est réglé sur 68 pixels, cependant, je vais le définir sur 160 pixels. Je vais sélectionner « Landing Page » et augmenter la hauteur comme ceci. Bougez-le vers le bas. Voyons voir. C'est trop. Je vais le diminuer. Maintenant, j'ai 169, donc je vais sélectionner la « Landing Page » et ici pour la hauteur, je vais écrire moins neuf comme ça, et déplacer ce pied de page vers le haut. On y va. Tous les bons gars. C' est tout pour cette vidéo. Notre page de destination est enfin prête, et maintenant nous allons en prévisualiser ensemble. Êtes-vous prêt ? Allons-y. Plutôt cool. Voici notre section héros. Je vais faire défiler vers le bas. Les gars, c'est tout pour cette vidéo. J' espère que vous l'avez apprécié et je vous verrai dans la prochaine vidéo. On se voit alors. 108. Prototyper votre page d'accueil: Hé, bienvenue. Maintenant que notre page de destination est prête, nous allons créer un prototype entièrement fonctionnel pour notre site Web. Sans plus tarder, commençons. Jetons un coup d'oeil à notre page d'accueil. En fait, nous allons ajouter de l'interactivité à certains de nos éléments. Si vous passez aux plans, je vais zoomer. Tout d'abord, je pense que c'est une bonne idée d'ajouter l'état du survol à ce bouton Démarrer. Lorsque l'utilisateur survolera ce bouton, il sera modifié. La prochaine chose que nous devons ajouter est la version légère de cette carte de crédit. Comme vous pouvez le voir ici, nous avons ajouté deux thèmes différents, et lorsque l'utilisateur clique sur le thème léger, cette carte de crédit doit être changée. Enfin, nous allons ajouter de l'interactivité à nos cartes Q&R. Comme vous pouvez le voir ici, nous voulons créer un effet accordéon. Lorsque l'utilisateur clique sur l'une de ces cartes, la hauteur de ces cartes doit s'agrandir et le texte lié à cette carte spécifique doit être affiché. C' est tout. Afin d'ajouter ces trois interactions à notre page de destination, tout d'abord, nous devons sélectionner notre page de destination, nous devons la dupliquer, la commande D ou le contrôle D. Fondamentalement ici, nous avons une copie de notre page de destination. Maintenant, je vais zoomer comme ceci, assurez-vous de sélectionner le groupe Démarrer, puis dirigez-vous vers l'inspecteur et allez dans l'onglet Prototype en haut. Comme vous pouvez le voir, si vous effectuez un zoom avant, un cercle apparaît sur vos éléments comme celui-ci avec une icône plus à l'intérieur. Ce que je veux que vous fassiez, c'est cliquer et faire glisser pour créer cette ligne de flèche et connecter cet élément à votre deuxième page d'atterrissage que nous venons de copier. Comme ça. Maintenant, ces deux pages d'atterrissage sont connectées ensemble. La gauche, qui est la première page d'atterrissage, est le début de l'animation. Ça fonctionne comme un déclencheur. Lorsque l'utilisateur clique sur ce bouton, l'animation démarre et la deuxième page de destination est la fin de cette animation, ok ? La dernière étape. Tout ce qui se passe entre les deux est géré automatiquement par Figma. Vous n'avez pas besoin de vous soucier de la création d'une animation spécifique. Tout est géré par Figma. Maintenant, je vais fermer ces détails d'interaction apparaissent. Je vais zoomer, et nous allons changer notre bouton. Je vais sélectionner cela, double-cliquer dessus, et je vais sélectionner le rectangle. Allons dans l'onglet Conception et je vais supprimer le contour et ajouter un remplissage à la place, et je vais choisir la même couleur, sombre secondaire. Assurez-vous de changer la couleur de votre calque de texte du noir secondaire au blanc, d'accord ? Plutôt bien. Maintenant, passons à Prototype et je vais sélectionner mon premier bouton dans la première page d'atterrissage. Comme vous pouvez le voir ici, nous avons la section Interactions. Si vous cliquez ici, cette fenêtre apparaît, et ici vous pouvez spécifier les paramètres de votre interaction et animation. Pour le déclencheur, qui est la première partie, je vais ouvrir ce menu déroulant. Par défaut, il est défini sur On Click. Vous avez différentes options telles que sur glisser-glisser, en survolant, en appuyant sur, etc. Je vais aller avec en survolant, et dans la section Animation, vous pouvez ouvrir ce menu déroulant et vous avez différentes options ainsi ici. Vous pouvez aller avec Instant, vous pouvez aller avec Dissolution, vous pouvez aller avec Smart Animate. Je suggère que vous devriez utiliser le Smart Animate. Ensuite, vous pouvez spécifier le type d'animation. Comme la facilité d'entrée, de sortie, d'entrée et de sortie. Ça n'a pas d'importance pour le moment. En outre, vous pouvez spécifier la durée de l'animation, et je vais la laisser telle quelle. Laisse-moi fermer cette fenêtre, et c'est tout. Présentons notre prototype. Je vais faire défiler vers le bas. Lorsque l'utilisateur survole ce bouton, vous pouvez voir que son apparence change immédiatement, comme ceci. C' est plutôt bon, n'est-ce pas ? Mais cela ne fonctionne pas avec l'autre bouton. Vous pouvez aller de l'avant et l'ajouter si vous le souhaitez. Mais pour ce tutoriel, je veux juste vous montrer comment fonctionnent les interactions. Allons maintenant et essayons d'animer notre section des cartes de crédit. Je vais zoomer ici. Qu'est-ce qu'on a ? Comme vous pouvez le voir, notre étape initiale est cette carte noire. Nous devons ajouter l'interaction à ce cercle lumineux. Maintenant, nous devons aller de l'avant et sélectionner notre page d'accueil initiale, qui est notre page d'accueil principale. Encore une fois le dupliquer, commande D ou contrôle D, assez bon, et puis je vais zoomer ici. Nous devons double-cliquer sur ce cercle lumineux et essayer de connecter ce cercle à la page de destination que nous venons de dupliquer. Comme ça, parfait. Pour cette interaction, je vais la définir sur On Click et Smart Animate. C'est tout. Que devrions-nous changer ici ? Nous devons changer deux choses. Tout d'abord, l'apparence de la carte de crédit parce qu'il devrait être léger. Deuxièmement, nous devrions déplacer ce coup sur le côté droit. Commençons par ce coup. Je vais sélectionner ça, déplacer sur le côté droit, et m'assurer qu'il est aligné avec votre cercle intérieur. Parfait. Ensuite, je vais modifier l'apparence de cette carte de crédit. Allons à l'onglet Design, abord, commençons par cette couleur foncée. Je vais sélectionner Star 3, comme ça, et je vais changer sa couleur en lumière secondaire. Ensuite, je vais sélectionner Star 4, et je vais changer cet accent en neutre, plutôt bon. Ensuite, je vais sélectionner mes calques de texte et changer leur couleur en noir secondaire, comme ceci, et nous avons terminé. Allons-y et essayons. Je vais sélectionner ma page de destination initiale et nous allons la prévisualiser. Défilons vers le bas. Notre bouton Démarrer fonctionne parfaitement. Alors je vais cliquer sur ce cercle lumineux. On y va. Tu as vu cette belle animation ? Cependant, nous ne pouvons pas revenir au premier état parce que nous n'avons pas encore ajouté cette interaction. Allons de l'avant et ajoutons ça. Ce que nous devons réaliser ici, c'est que si l'utilisateur clique sur ce thème sombre, tout ce que nous avons changé devrait être inversé. Nous devons relier ce cercle noir. Allons au Prototype. Nous devons le connecter à notre page d'atterrissage initiale comme ceci, et nous sommes prêts à partir. Prévisualisons une fois de plus. Je vais faire défiler vers le bas. Essayons. Je vais cliquer sur ce cercle lumineux, on y va, et sombre. Pouvez-vous voir à quel point il est beau et facile de créer ce genre d'interactions ? C' est incroyable. La dernière chose que nous devons faire est d'ajouter de l'interaction à nos cartes Q&R. Je vais ajouter l'interaction à la première carte seulement. Cependant, pour le produit final, vous pouvez aller de l'avant et ajouter l'interaction à tous si vous le souhaitez. Mais pour l'instant, je vais ajouter l'interaction à la première carte seulement. De quoi avons-nous besoin ? Tout d'abord, nous devons sélectionner notre page d'atterrissage initiale et nous devons la dupliquer, commande D ou le contrôle D, assez bon. Maintenant, je vais aller de l'avant et sélectionner notre première carte dans notre première page d'atterrissage. Pendant que nous sommes dans l'onglet Prototype, je vais sélectionner cette carte et la connecter à notre dernière page d'atterrissage que nous venons de dupliquer, comme ceci. Pour l'interaction, je vais choisir On Click et l'animation devrait être Smart Animate, donc nous n'avons pas besoin de changer quoi que ce soit. Ensuite, je vais zoomer et essayer de modifier notre dernière page d'atterrissage. Que devrions-nous changer ici ? Tout d'abord, nous devons modifier la hauteur de cette carte. Je vais aller dans l'onglet Conception et je vais sélectionner cette carte, vous pouvez maintenir la touche de commande ou de contrôle de votre clavier enfoncée et cliquer sur cette carte pour la sélectionner. Alternativement, vous pouvez aller de l'avant et essayer de le sélectionner dans la liste des calques. C' est totalement à toi de décider. Ensuite, je vais augmenter la hauteur de cette carte à 200 pixels. Enfin, je vais sélectionner toutes les autres questions et les déplacer vers le bas, et assurez-vous de maintenir le remplissage de 20 pixels entre eux comme ceci. Enfin, nous devons maintenir la marge supérieure de 160 pixels pour ce pied de page. Comme vous pouvez le voir maintenant, j'ai 56 pixels. Comment puis-je réparer ça ? C'est si simple. Nous devrions sélectionner notre page d'atterrissage, et ici pour la hauteur, je vais écrire plus, puisque j'ai 56 pixels et j'ai besoin d'obtenir 160, je vais écrire 104 comme ça, et enfin, vous sélectionnez votre pied de page et le déplacer vers le bas, et nous y allons. On a 160 pixels. Parfait. Quoi d'autre devrait être changé ici ? Lorsque cette carte est ouverte, cette icône plus doit être remplacée par une icône moins. Je vais aller de l'avant et sélectionner cette ligne verticale, et la supprimer. Last but not least, nous devons ajouter notre ligne de texte ici. Ici, nous avons une question et ensuite nous devons ajouter la réponse à cette question spécifique. Pour l'instant, je vais ajouter un calque de texte Lorem Ipsum parce que la réponse n'a pas d'importance. Mais si vous travaillez sur un projet de mot réel, assurez-vous d'ajouter de vraies réponses. Je vais appuyer sur « T » sur mon clavier et cliquer pour créer un calque de texte, puis je vais coller le texte de mon presse-papiers. Pour ce calque de texte, je vais utiliser Body/Main. Enfin, permettez-moi de changer le style de couleur en Secondary/Light. Plutôt bien. Permettez-moi de diminuer la largeur de ce calque de texte. Je vais zoomer comme ça, laisse-moi le déplacer. Assurez-vous de mettre ce calque de texte à l'intérieur de ce groupe de cartes, d'accord ? Voici notre carte de questions, et je vais déplacer ce calque de texte et le mettre à l'intérieur de ce groupe. Le rembourrage supérieur doit être de 10 pixels, le rembourrage de gauche doit être de 30. Nous avons presque fini. La dernière chose que nous devons faire est de connecter cette carte à notre page d'atterrissage initiale. Parce que lorsque l'utilisateur clique sur cette première carte ici, elle va être ouverte. Cependant, s'il veut le fermer, nous devons également le connecter à notre page d'accueil initiale. Je vais sélectionner cette fiche de questions, assurez-vous de sélectionner votre groupe de questions, allez dans l'onglet Prototype et en utilisant ce cercle, essayez de la connecter à votre première page de destination, et nous avons terminé. Sélectionnons notre première page de destination et essayons de la prévisualiser. D' accord, laisse-moi faire défiler vers le bas. Essayons. Je vais cliquer sur la première carte, On y va. Tu as vu à quel point cette interaction était belle ? Je peux le fermer comme ça. Figma vous permet de créer des interactions complexes et étonnantes en quelques minutes. Vous n'avez pas besoin de travailler avec des logiciels complexes pour créer un prototype haute fidélité. Très bien les gars, c'était un long voyage ensemble, j'espère que vous avez apprécié cette section et je vous y verrai. 109. Types de logo: Bonjour, tout le monde. Dans cette section, nous allons concevoir notre logo, et aussi, dans cette vidéo, nous allons parler de sept types différents de design de logo. Sans plus tarder, commençons. Le premier type de logo est appelé monogramme, ou vous pouvez dire lettermarks. Ici, nous avons différents logos comme exemples, tels que HBO, qui signifie Home Box Office. Comme vous pouvez le voir, ici nous n'avons que des lettres. Ils sont précisés et représentent leur entreprise. Le deuxième type est appelé mot-marks, ou disons logotypes. Ils sont en fait similaires à un lettermark. Cependant, un mot-symbole se concentre uniquement sur un nom d'entreprise, comme Google, Canon ou Jeep. Le type de logo suivant est appelé marques de logo abstraites, comme Pepsi, Nike ou BP comme vous pouvez le voir ici. En fait, une marque abstraite est un type de logo pictural. Le type de logo suivant est appelé marques picturales ou symboles de logo, comme le logo Apple, Twitter, et d'autres marques célèbres. En fait, une marque picturale est simplement une icône qui représente les caractéristiques de l'entreprise. Le type de logo suivant est les mascottes. Les logos de mascotte sont des logos qui impliquent un personnage illustré selon 99designs.com. Si vous voulez obtenir plus d'informations sur les logotypes et comment vous devriez les utiliser, vous pouvez consulter leur excellent article sur leur site Web. Le prochain type de logo est les marques de combinaison, et c'est le logotype que je vais vous apprendre comment vous pouvez créer. Dans ce type de logo, vous pouvez trouver une lettre combinée avec une illustration ou une forme spécifique. Enfin, les logos d'emblèmes. Un logo d'emblème se compose d'une police à l'intérieur d'un symbole ou d'une icône comme le logo de Starbuks. Merci beaucoup d'avoir regardé cette vidéo. Dans la prochaine série de vidéos, nous allons créer quatre logos différents ensemble. Assurez-vous de télécharger le projet de démarrage car j'ai déjà préparé les couleurs pour vous afin de gagner votre temps. Vous pouvez télécharger le fichier à partir de la section Ressources de la prochaine conférence. 110. Concevoir notre premier logo: Salut tout le monde ? Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons commencer à concevoir notre premier logo. Le logo que j'ai choisi pour ce tutoriel est le logo Figma, qui est assez intéressant et en même temps assez simple logo. Tout d'abord, nous avons besoin d'un plan de travail. Appuyez sur « A » et je vais choisir MacBook Pro, puis je vais augmenter la taille de mon plan de travail. Comme ça, plutôt bien. J' ai déjà préparé les actifs amende pour vous que vous pouvez télécharger à partir de la conférence sur les actifs de cette section. Tout d'abord, je vais placer le logo Figma comme vous pouvez le voir dans le dossier Assets, il y a le logo Figma, assez bon et ensuite nous allons concevoir le même logo ensemble. Comme vous pouvez le voir, ces logos se composent de différentes formes simples. Par exemple, ici, nous avons un carré avec deux coins arrondis, ici aussi. Ici, nous avons le même carré, cependant, avec trois coins arrondis, et ici nous avons un cercle simple. Tout d'abord, insérons un rectangle ici. Je vais maintenir Shift afin de créer un carré, puis je vais définir la largeur et la hauteur à 200. Comme ça, c'est plutôt bon, déplacons-le du côté droit. Maintenant, je dois arrondir ces deux coins. Je vais cliquer sur les coins indépendants comme ça, et nous allons définir le rayon du coin supérieur gauche à 100 et le rayon du coin inférieur gauche à 100 aussi, et comme vous pouvez le voir, nous avons la même forme que le logo de Figma. Maintenant, nous devons utiliser le compte-gouttes dans la section champs afin de choisir la même couleur, assez bon. Ensuite, nous devons le dupliquer, et je vais faire un clic droit sur cela, et nous allons cliquer sur flip horizontal comme ceci. Je vais le déplacer sur le côté droit, plutôt bien, alors on doit changer sa couleur comme ça, assez fantastique. Maintenant, utilisons notre premier rectangle. Dupliquez-le, je vais le déplacer vers le bas, plutôt génial. Encore une fois, je dois changer le grade de couleur, et maintenant nous avons besoin d'un cercle. Choisissez un cercle dans le menu des formes. Je vais tenir « Shift » et créons un cercle. Cependant, avec la même largeur et avec la même hauteur. Ça va faire 200 x 200 pixels comme ça, et je vais changer la couleur pour ce bleu. Encore une fois, dupliquons ce rectangle. Je vais le déplacer vers le bas, et maintenant je dois changer le rayon de ce coin inférieur droit. Ici, dans l'inspecteur, je vais le mettre à 100 aussi. Last but not least, changeons sa couleur. Fantastique. Avez-vous vu à quel point il est facile de concevoir un logo dans Figma ? Maintenant, je vais sélectionner nos couches, je vais les regrouper, et appelons-ça Figma nouveau. Vous pouvez supprimer celui-ci et c'est tout. Les gars, c'est tout pour cette vidéo, j'espère que vous l'avez apprécié et je vous verrai dans la prochaine vidéo. 111. Concevoir notre deuxième logo: Salut, tout le monde et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons concevoir ensemble notre deuxième logo, qui est pour une marque imaginaire appelée Clock. Sans plus tarder, commençons. Tout d'abord, je vais insérer un rectangle et je vais tenir « Shift » afin de créer un carré. Plutôt sympa. Mettons-le à 200 par 200, comme ça. Ensuite, je vais augmenter le rayon de coin de trois coins. Je dois changer le coin supérieur gauche à 100, le coin supérieur droit à 100 aussi, et le coin inférieur gauche à 100, comme ça. Après cela, je vais définir le code couleur sur 00D179, comme ceci. Laisse-moi zoomer. Maintenant, j'ai besoin d'insérer un cercle ici. Je vais tenir « Shift ». Plutôt sympa. Ensuite, je vais utiliser un gradient pour ça, le linéaire. Réglons la première couleur à la même couleur que nous avons pour notre carré principal. La deuxième couleur va être un peu plus foncée, alors essayons-la 038750, et je vais augmenter l'opacité à 100, comme ceci. Alors changeons la direction pour obtenir quelque chose comme ça. Plutôt sympa, n'est-ce pas ? Maintenant, je vais le mettre un peu à l'échelle. Cliquez sur ce « Move Tools » et ici je vais choisir Échelle. Vous pouvez également appuyer sur « K » sur votre clavier et je vais maintenir « Shift ». Allons le mettre à l'échelle. Plutôt sympa. Mettons-le à 176 par 176, et les paddings vont être 12, comme vous pouvez le voir. Ensuite, je vais cliquer sur ce cercle d'arc, et je vais tenir « Shift » comme ça. Plutôt sympa. Maintenant, je vais faire pivoter de 90 degrés. Comme vous pouvez le voir, j'ai quelque chose comme ça. Cependant, je dois changer la direction de mon gradient. Utilisons ces contrôleurs de poignée pour obtenir quelque chose comme ça. Tu vois que j'ai créé une horloge ici ? C' est plutôt génial, n'est-ce pas ? Ensuite, je vais ajouter un texte et la police est Roboto. Écrivons Clock. Ça va faire 80 points. Je vais changer la couleur pour le même vert. Allons l'aligner. Son rembourrage gauche va être de 16 pixels comme ça. Maintenant, je vais les regrouper. Appelons ça Clock. C'est tout. Avez-vous vu à quel point il est facile d'utiliser des formes simples pour créer des logos étonnants ? Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 112. Concevoir notre troisième logo: Salut, tout le monde, bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons concevoir ensemble notre troisième logo, qui est encore une fois, une marque imaginaire appelée Moon. Ça va être si intéressant et nous allons le créer si vite. Tout d'abord, j'ai besoin d'insérer un cercle. Je vais tenir Shift comme ça. Ensuite, je dois dupliquer ça, et passons un peu vers le côté droit, comme ça. Après cela, je vais les sélectionner tous les deux et je vais utiliser des opérations booléennes. Choisissons Soustraire la sélection et voilà. On vient de créer notre lune. Maintenant, je vais le faire tourner un peu vers le côté gauche, comme ça. Cependant, je vais le modifier. Pour modifier cela, je peux avoir accès aux sous-couches en ouvrant ce groupe et on y va. Je vais choisir le cercle supérieur, et déplaçons un peu sur le côté droit. Plutôt génial. Ensuite, changeons la couleur en noir. Après ça, je vais écrire Moon. Cependant, changeons la police à Montserrat et le poids va être régulier. Ça va faire 80 points. Je vais réduire ma lune comme ça. Réglons la largeur à 130 et je vais les aligner. Cependant, comme vous pouvez le voir, il semble qu'ils ne sont pas parfaitement alignés. Parce que parfois, vous devez les aligner manuellement afin d'obtenir un excellent équilibre visuel. Je vais déplacer un peu le texte de la lune vers le côté droit. Maintenant, je pense que c'est génial. Déplaçons ça vers le haut. Assez incroyable. Je vais les regrouper et je vais les appeler lune. Très bien, les gars, c'est tout pour cette vidéo. Vous avez appris comment créer votre propre logo simplement dans Figma en utilisant des formes simples. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 113. Introduction à Adobe Photoshop: Bonjour tout le monde. Bienvenue dans une autre section de ce cours. Dans cette section, nous allons parler d'Adobe Photoshop. Bien que j'ai déjà mentionné qu'Adobe Photoshop n'est pas un bon logiciel pour la conception d'interface utilisateur, il est bon de se familiariser avec l'environnement Adobe Photoshop et aussi les bases de Photoshop pour préparer nos images parfois ou même éditer nos fichiers. Dans la prochaine vidéo, nous allons commencer notre leçon avec les environnements d'Adobe Photoshop. On se voit alors. 114. Environnement d'Adobe Photoshop: Salut tout le monde. Dans cette vidéo, nous allons parler des environnements d'Adobe Photoshop. Sans plus tarder, ouvrons notre Adobe Photoshop. Comme vous pouvez le voir, j'utilise Adobe Photoshop version CS6. Peu importe la version que vous utilisez en ce moment , car nous allons nous concentrer uniquement sur les bases et je peux vous assurer que presque tous les éléments sont les mêmes dans toutes les versions, mais ce serait génial d'utiliser la dernière version aussi. Ici, dans Adobe Photoshop, nous pouvons diviser ces environnements en différentes sections. Par exemple, sur votre gauche, vous pouvez voir qu'il y a le panneau Outils et ici il y a tous les outils dont nous avons besoin pour éditer nos images ou même créer un design graphique. Sur votre droite, vous pouvez voir qu'il y a plus de panneaux, par exemple, ici nous avons le panneau des calques, qui est l'un des panneaux les plus importants dans Adobe Photoshop et nous avons aussi des réglages, des couleurs, etc. Mais le panneau le plus important ici est le panneau Outils. Très bien les gars, merci beaucoup d'avoir regardé cette vidéo. Dans la prochaine vidéo, nous allons parler des bases d' Adobe Photoshop et de la façon dont vous pouvez utiliser ces outils. se voit dans la vidéo suivante. 115. Les bases d'Adobe Photoshop: Salut tout le monde, bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons parler des bases d'Adobe Photoshop. Comme je l'ai mentionné dans la vidéo précédente, nous allons utiliser différents panneaux dans Adobe Photoshop tels que le panneau d'outils, le panneau calques, les couleurs, le réglage, etc Mais d'abord, nous avons besoin d'un canevas ou disons une page pour en commençant notre projet avec. Pour ce faire, Vous pouvez soit aller dans le fichier et cliquez sur nouveau, ou vous pouvez appuyer sur commande et N sur les systèmes Mac ou Contrôle et N sur Windows. Ici, comme vous pouvez le voir, il y a une fenêtre où vous pouvez choisir la dimension de votre plan de travail. Par exemple, ici, nous pouvons définir la largeur à 1920 et nous assurer qu'il est réglé sur les pixels et la hauteur à 1080, et comme vous pouvez le voir ses pixels. Je vais changer la résolution à 72 parce que c'est assez pour l'ordinateur et le mode couleur, nous devons le définir sur RVB parce que nous allons présenter ce projet sur ordinateur ou sur écran. CMJN est utilisé à des fins d'impression. Je peux aller de l'avant et cliquer sur OK. On y va. Votre plan de travail est prêt. Je n'ai pas défini de nom spécifique pour cela, mais assurez-vous de définir votre nom désiré. Maintenant, nous allons parler du panneau Outils. Comme vous pouvez le voir ici, nous avons différents outils et différentes sections. Celui-ci est appelé outil de déplacement, et il est destiné à déplacer des objets ou des éléments sur votre canevas ou vos plans de travail. Le suivant est l'outil de sélection. Par exemple, permettez-moi de créer une nouvelle couche ici. Si vous souhaitez créer un nouveau calque, vous pouvez facilement accéder à la section de calque et cliquer sur cette icône de calque. Comme vous pouvez le voir, nous venons de créer une nouvelle couche. Ensuite, je vais utiliser l'outil de sélection afin de sélectionner une zone spécifique comme celle-ci et je peux la remplir avec n'importe quelle couleur que je veux. Si je veux changer la couleur, je peux cliquer sur cette section et je peux choisir ce bleu. Laisse-moi choisir le pinceau pour le remplir. Maintenant, avec cet outil de déplacement, je peux facilement les déplacer. L' outil suivant est appelé outil de sélection. Chaque outil contient des outils cachés. Comme vous pouvez le voir, il y a une petite flèche dans le coin inférieur droit de chaque outil spécifique et vous pouvez voir qu'il y a quelques outils cachés ici que vous pouvez choisir. L' outil suivant est appelé lasso magnétique, et c'est aussi pour la sélection. Vous pouvez facilement sélectionner une zone spécifique et vous pouvez séparer la section souhaitée de cette image spécifique. Pour la désélection, vous pouvez appuyer sur Commande et D ou Contrôle D sous Windows. Ici aussi, vous avez différents outils de lasso, et c'est la baguette magique. C' est pour la sélection. Nous l'avons également dans le croquis, sorte qu'il peut sélectionner une zone spécifique par magie. L' outil suivant est recadrer. C' est pour recadrer vos plans de travail ou votre image. Le suivant, c'est le compte-gouttes. Vous pouvez choisir une couleur spécifique d'une photo ou d'un élément. Ces outils sont pour retoucher. Comme vous pouvez le voir, nous avons pinceau de guérison spot, outil de brosse de guérison, outil de patch, etc Ensuite, nous avons des pinceaux , par exemple, je peux choisir la couleur rouge ici. Comme vous pouvez le voir, je peux peindre librement ici, et si je clique avec le bouton droit de la souris, je peux changer la taille de cela et aussi la dureté de ma brosse. L' outil suivant est appelé outil de tampon de clone. C' est aussi pour retoucher. Nous ne travaillons pas beaucoup avec cela. Ensuite, nous avons l'historique pinceau outil et gomme que vous pouvez effacer votre peinture ou même une zone spécifique d'une image. Ensuite, nous avons un dégradé comme celui-ci et outil de flou pour flouter une image ou une partie spécifique d'une image. s'agit de l'outil esquiver et il sert à modifier la luminosité d'une zone spécifique d'une image. Ensuite, nous avons l'outil stylo, qui est un outil très important dans Adobe Photoshop. Avec l'outil Stylo, vous pouvez sélectionner une zone spécifique avec précision. Si je fais un clic droit ici, je peux cliquer sur faire la sélection, le rayon d'alimentation sera zéro, et cliquez sur, ok. On y va. Maintenant, si je choisis l'outil de brosse, je peux le remplir de couleur rouge comme ça. Le suivant est l'outil de type pour taper et créer du texte. Vous avez différentes options ici. Vous avez le type horizontal, l'outil de type vertical, l'outil de masque de type horizontal et l'outil de masque de type vertical. La plupart du temps, nous utilisons l'outil de type horizontal. Cet outil de sélection de chemin, nous ne l'utiliserons pas beaucoup. Ensuite, l'outil rectangle arrondi est pour créer différentes formes. Par exemple, je peux créer un objet arrondi comme Ceci, puis je peux faire une sélection avec un clic droit, et maintenant je peux le remplir avec n'importe quelle couleur que je veux, comme ceci. L' option suivante est l'outil à main, et c'est pour peindre autour. Vous pouvez également le présenter avec de l'espace de maintien sur votre clavier. Ensuite, nous avons l'outil de zoom, d'accord, pour zoomer et zoomer. Tous les bons gars. Maintenant, nous allons nous concentrer sur la section de calque pour voir ce que nous avons là. Comme vous pouvez le voir, nous venons de créer un nouveau calque et comme je l'ai mentionné précédemment, chaque fois que Vous voulez un nouveau calque, Vous pouvez facilement cliquer sur cette icône et il crée un nouveau calque pour vous. Vous pouvez changer le nom des calques en double-cliquant sur son nom et vous pouvez le changer à ce que vous voulez. Changons-le en interface utilisateur. Parfait. Maintenant, je vais créer une autre forme ici avec les outils de sélection. On y va, et je peux le déplacer. Si vous souhaitez masquer un calque, vous pouvez cliquer sur cette icône i, comme dans Sketch et n'oubliez pas que l'ordre de placement de vos calques est si important dans Adobe Photoshop. Ici, l'interface utilisateur est au-dessus de ces rectangles arrondis. Si je le déplace au-dessus de ce rectangle, vous pouvez voir la différence. Je vais changer la couleur pour la rendre plus claire comme ça. Nous pouvons également changer l'opacité ici de zéro à 100 pour cent. L' autre chose importante dans Adobe Photoshop est la fenêtre Style du calque. Double-cliquez sur ces couches d'interface utilisateur. Comme vous pouvez le voir, une fenêtre apparaît, qui est appelée côté calque. Ici, vous avez différentes options pour coiffer votre couche. Par exemple, ici, nous avons des options de fusion par défaut, par exemple, vous pouvez changer l'opacité et le mode de fusion ici. Vous avez ces options directement dans cette fenêtre ainsi que vous pouvez voir que vous avez beaucoup d'options ici, vous avez un accident vasculaire cérébral. Par exemple, je peux changer la couleur en rouge et augmenter la taille. Vous avez l'ombre intérieure, vous avez la lueur intérieure, superposition de couleur, le dégradé et bien plus encore. Vous avez aussi l'ombre portée ici comme ça. Très bien les gars, merci beaucoup d'avoir regardé cette vidéo. J' espère que vous l'avez apprécié et dans la prochaine vidéo, nous allons parler de l'utilisation d' Adobe Photoshop pour la conception UI UX. Alors, à vous voir. 116. Adobe Photoshop pour la conception UI/UX: Salut tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons parler de l'utilisation d'Adobe Photoshop pour la conception UI/UX. En tant que concepteur UI/UX, vous devrez peut-être modifier vos images afin de les utiliser correctement dans votre projet. Il y a quelques modifications que vous ne pouvez pas faire dans Figma et c'est une bonne idée de les traiter dans Adobe Photoshop. Dans cette vidéo, je vais vous apprendre comment utiliser Adobe Photoshop pour éditer vos images. Sans plus tarder, ouvrons notre Adobe Photoshop. Comme vous pouvez le voir, j'ai téléchargé une image de cette chaussure depuis unsplash.com afin de vous montrer comment vous pouvez séparer n'importe quel objet de son arrière-plan dans Adobe Photoshop. Supposons que vous concevez une application d'achat et que nous avons besoin d'avoir quelques chaussures dans notre liste d'achats. Dans ce cas, il est préférable de séparer cette chaussure de son arrière-plan, puis de l'enregistrer en tant que fichier Png, puis vous pouvez l'importer dans Figma. Il y a différentes façons de le faire. Vous pouvez utiliser différents outils de sélection. Par exemple, vous pouvez utiliser la baguette magique comme ceci. Cela fonctionne dans quelques exemples. Mais tout d'abord, laissez-moi vous montrer quelque chose. Comme vous pouvez le voir, cette couche s'appelle Arrière-plan. On ne peut rien faire quand il est verrouillé. Pour déverrouiller cela, vous pouvez double-cliquer sur cette couche, par exemple, définit un nom, peu importe ce que c'est. Vous pouvez le mettre à chaussures et maintenant il est déverrouillé. Vous pouvez apporter des modifications. Je vais cliquer sur « Supprimer » comme ça. Comme vous pouvez le voir, nous n'avons pas d'antécédents ici. Cependant, vous devez vous assurer que l'arrière-plan a été complètement supprimé. Par exemple, ici, comme vous pouvez le voir, vous avez quelques espaces blancs. Nous devons encore sélectionner cet espace blanc et cliquer sur « Supprimer » comme ceci. Maintenant, afin de vous montrer quelle est la différence ici, je vais créer un nouveau calque et appelons-le BG comme arrière-plan. Je vais la déplacer vers le bas, juste en dessous de notre couche de chaussures. Appuyez sur Commande A ou Contrôle A dans Windows. Ensuite, choisissons une couleur différente, par exemple, celle-ci et appuyez sur l'option « Supprimer » et là nous allons. Comme vous pouvez le voir, nous pourrions facilement changer la couleur de l'arrière-plan. Je peux également supprimer l'arrière-plan et l'enregistrer en tant que fichier Png, et l'importer dans Figma et l'utiliser. Vous pourriez avoir plus de possibilités de travailler avec cette image. Mais il y a certaines images que vous ne pouvez pas utiliser facilement la baguette magique pour séparer votre objet spécifique de l'arrière-plan. Permettez-moi d'annuler ces processus. Dans ce cas, vous pouvez utiliser d'autres outils. Par exemple, vous pouvez utiliser le Lasso Magnétique comme ceci, et vous pouvez sélectionner votre objet facilement et parfaitement. Vous pouvez également utiliser l'outil Plume, qui est la meilleure option possible car vous pouvez obtenir une sélection précise de votre objet. Cependant, cela prend plus de temps. Ici, après avoir sélectionné deux points différents, vous devez maintenir la touche Option et appuyer sur ce point comme celui-ci, et sélectionner un nouveau point, et ainsi de suite. Maintenant, je vais vous montrer un autre exemple d'utilisation d'Adobe Photoshop pour modifier vos images. Parfois, vous devrez changer la couleur de votre produit. Tout d'abord, laissez-moi sélectionner l'arrière-plan et supprimer cela comme ceci. Supposons que je vais changer la couleur de cette chaussure. C' est un peu difficile parce qu'il fait trop sombre. Cependant, je vais l'essayer. Tout d'abord, créons un nouveau calque. Ensuite, je vais sélectionner toute la chaussure. Comment pouvons-nous faire ça ? Nous pouvons maintenir la touche Commande et cliquer sur cette case ici. Comme vous pouvez le voir, il est déjà sélectionné. Ensuite, assurez-vous que vous avez sélectionné le nouveau calque et changez une couleur différente, par exemple, la couleur bleue. Ensuite, choisissez l'outil de brosse, comme ceci. Mettons tout ça comme ça. Maintenant, ça a l'air étrange, mais en une minute, vous pouvez voir à quel point cette technique est incroyable. Comme vous pouvez le voir ici, nous avons deux couches différentes. Ici, nous avons le mode de fusion et nous avons différentes options. Si vous sélectionnez « Couleur », vous pouvez voir que la couleur de nos objets a été parfaitement modifiée. C' est fantastique parce que parfois vous en tant que concepteur d'interface utilisateur, vous aussi avez différentes versions d'un produit spécifique, mais il n'est pas disponible sur Internet, de sorte que vous pouvez créer le vôtre. Maintenant, supposons que vous voulez changer sa couleur à autre chose et que vous voulez voir des centaines d'options. Au lieu de choisir chaque couleur un par un, j'ai une bonne solution pour vous. Si vous allez à Ajustements, vous pouvez voir que nous avons différentes options. Cependant, si vous cliquez sur « Teinte Saturation », vous pouvez changer la teinte facilement. Comme vous pouvez le voir, la couleur de nos chaussures change instantanément. C' est incroyable. N'est-ce pas ? Pour enregistrer votre fichier, vous pouvez simplement appuyer sur Command Shift et S, puis ici, vous pouvez définir un nom, par exemple, chaussure, puis vous pouvez choisir le format spécifique dont vous avez besoin. Ici, nous avons beaucoup de formats. Cependant, lorsque vous voulez utiliser cette image sans arrière-plan, vous devez choisir Png. Ensuite, cliquez sur « Enregistrer », et c'est fait. Maintenant, nous pouvons importer ce fichier Png dans votre projet Figma. Très bien les gars, merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu, et je vous verrai dans la prochaine vidéo. 117. Introduction à la modélisation 3D: Salut tout le monde, et bienvenue à une autre section de ce cours. Dans cette section, nous allons parler de la modélisation 3D. Vous vous demandez peut-être comment 3D Modeling va vous aider dans votre carrière en tant que concepteur UI/UX. Laissez-moi vous l'expliquer en un mot simple. Pour vous, en tant que concepteur UI/UX, il est bon d'en savoir un peu sur modélisation 3D parce que parfois vous voulez concevoir une page de destination créative, ou disons un écran pour une application qui a besoin de formes simples ou même un contexte 3D. Dans cette section, je vais vous apprendre comment vous pouvez utiliser ces techniques afin de créer des choses étonnantes pour votre design. Vous êtes peut-être familier avec les logiciels traditionnels de modélisation 3D tels que CINEMA 4D, 3ds Max, etc. Cependant, travailler avec ces logiciels traditionnels pourrait être assez redoutable pour les débutants. Au lieu de travailler avec ces logiciels, je vais vous montrer un autre excellent environnement. Il existe une application web qui s'appelle Vectary. C' est une application web incroyable et flambant neuf qui peut vous aider à créer des choses 3D étonnantes d'une manière rapide et facile. Au lieu de travailler avec des outils complexes, je vais vous apprendre comment vous pouvez utiliser Vectary pour obtenir les meilleurs résultats possibles. Si vous vous rendez sur vectary.com, comme vous pouvez le voir, il s'agit de la page de destination. On y va. Nous pouvons voir ces fonctionnalités et la bonne nouvelle est, quand vous terminez cette section, vous pouvez facilement créer ces choses et vous pouvez mettre le code sur votre site Web ou vous pouvez même le prévisualiser comme un modèle de réalité augmentée. La première chose que nous devons faire est de créer un compte. Il existe deux types de compte. Le premier type est gratuit. Si vous allez à la tarification, vous pouvez voir que nous avons deux types, gratuit et premium. Pour ce cours, vous pouvez utiliser le compte gratuit car nous allons nous concentrer uniquement sur les bases. Assurez-vous de créer votre compte, et dans la prochaine vidéo, nous commencerons ensemble notre premier projet de modélisation 3D. On se voit alors. 118. Créez votre premier modèle 3D: Salut tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons commencer à travailler avec le presbytère. Sans plus tarder, commençons. Tout d'abord, allons de l'avant et cliquez et commencez à créer. Ensuite, vous pouvez créer un nouveau projet ou au lieu de cela, vous pouvez utiliser des projets préfabriqués. Je vais aller de l'avant et cliquer sur ces projets. Comme vous pouvez le voir ici, nous avons un environnement 3D avec trois dimensions. On y va. Jusqu'à présent, nous travaillions sur un environnement 2D. Cependant, nous allons maintenant plonger dans un environnement 3D. C' est si intéressant. Tout d'abord, laissez-moi vous expliquer quelques rudiments. Si vous voulez vous déplacer dans ces canevas, vous pouvez facilement maintenir de l'espace sur votre clavier et vous déplacer. Si vous voulez effectuer un zoom avant ou un zoom arrière, vous pouvez faire défiler comme ceci et vous pouvez également faire un panoramique avec un clic gauche sur votre souris. Rectory est une application assez complexe, donc nous ne allons pas couvrir tous les outils. Cependant, je vais vous apprendre les exigences afin de vous faire savoir comment vous pouvez utiliser ces grandes applications. En haut, nous avons quelques modes. Comme vous pouvez le voir, nous avons objet, mode d' édition, bibliothèque et commentaires. Dans l'objet, nous avons aussi différentes options. Ici, nous avons des primitifs. Comme vous pouvez le voir, nous avons boîte, sphère, cylindre, tube, etc Vous pouvez facilement cliquer dans la boîte ici et là nous allons. Vous avez votre boîte. Allons zoomer. Plutôt génial. Sur votre droite, vous pouvez modifier certaines variables telles que la position, rotation, l'échelle, la taille, et même un matériau comme celui-ci. génial, n'est-ce pas ? Nous avons aussi des segments. Je vais en faire 10 pour l'instant. Comme vous pouvez le voir ici, nous avons un gadget. Il y a des flèches, des cubes et des arcs. Ce gadget vous permet de faire pivoter, de mettre à l'échelle et de déplacer votre objet. Si vous voulez déplacer votre objet, vous pouvez utiliser ces flèches comme celle-ci dans la direction que vous voulez. Si vous voulez mettre à l'échelle votre objet, vous pouvez utiliser ces cubes. Comme vous pouvez le voir, nous avons deux cubes différents. Le cube externe, nous allons utiliser l'échelle de votre objet dans une direction comme celle-ci et le cube intérieur, nous allons vous mettre à l'échelle votre objet proportionnellement. Si vous voulez faire pivoter votre objet, vous pouvez utiliser ces arcs. Fantastique. Maintenant, je vais supprimer cet objet. L' autre chose que vous pouvez utiliser est le texte. Chaque fois que vous cliquez sur ce texte 3D, vous pouvez voir ce vecteur que vous créez automatiquement un nouveau texte ici pour vous et si vous voulez changer ce texte, vous pouvez facilement vous diriger vers une section de texte 3D et nous allons le changer pour la conception UI UX. Plutôt génial et je peux le déplacer facilement ici. Je peux changer la profondeur. Parfait. Aussi, je peux changer le matériau ou disons la couleur dans ce cas. Assez génial et vous pouvez également changer la police. Cherchons Montserrat. On y va. Vous pouvez également modifier le poids, l'espacement des caractères et l'espacement des lignes. Lorsque vous travaillez avec un objet 3D, vous devez le rendre. Ici, en haut, vous pouvez voir qu'il y a un basculement de rendu et si vous passez votre souris au-dessus de cela, vous pouvez voir qu'il y a trois options différentes. De faible qualité, de moyenne qualité et de haute qualité. Je vais aller avec la qualité moyenne. On y va. Il a été rendu parfaitement. Bien sûr, il y a quelques filigranes en version gratuite. Si vous voulez les supprimer, vous pouvez utiliser la licence premium de vector. Arrêtons de rendre notre texte. Les gars, c'est tout pour cette vidéo. Merci beaucoup d'avoir regardé cette vidéo. J' espère que vous l'avez apprécié et dans la prochaine vidéo, nous allons parler de la caméra et de l'éclairage. On se voit là-bas. 119. Appareil photo et éclairages: Salut, tout le monde. Bienvenue sur une autre vidéo de ce cours. Dans cette vidéo, nous allons continuer à travailler sur notre projet précédent. Comme vous pouvez le voir, nous avons ces textes 3D. Cependant, il est maintenant temps d'ajouter une caméra à notre toile ou à notre vue. Cliquons sur cet appareil photo. Plutôt génial. Maintenant, si vous faites un tour, vous pouvez voir que la caméra est fixe et face à notre texte dans la vue spécifique que nous avons définie. Si vous cliquez sur cette vue de la caméra, liste des couches, là nous allons, vous obtiendrez votre vue de caméra concepteur. Une caméra nous aide à garder une vue spécifique chaque fois que nous voulons rendre notre projet. Maintenant, rendons notre texte une fois de plus. Comme vous pouvez le voir, cela ne semble pas réaliste, parce que nous n'avons pas de grandes ombres et un grand éclairage, alors réparons ça. Ce que nous allons faire, c'est choisir un plan d'ombre. Plutôt génial. Je vais le déplacer vers le bas. Comme vous pouvez le voir, maintenant nous avons un plan d'ombre. En fait, chaque fois que vous mettez un objet ou disons un texte 3D au-dessus d'un plan d'ombre, il créera automatiquement une ombre pour cela. Par exemple, permettez-moi de zoomer, comme vous pouvez le voir, notre texte n'est pas parfaitement au-dessus de notre plan d'ombre. Tout d'abord, sélectionnons notre texte 3D et appuyez sur A. Assez bon. Alors je vais le déplacer comme ça, assurer qu'il est au-dessus de ton plan d'ombre. Comme vous pouvez le voir, ce n'est pas le cas, donc je vais le remonter. Maintenant, c'est plutôt bon. Si vous effectuez le rendu de vos objets en ce moment, vous pouvez voir que nous avons une grande ombre. Tu vois ça ? En fait, vous pouvez également ajouter un peu de lumière. Par exemple, ici, je vais opter pour la lumière rectangle. Je vais le bouger un peu. Rendons notre scène une fois de plus. C' est trop lumineux. Maintenant, c'est mieux. Fantastique. D'accord, les gars. Merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu. Je te verrai dans la prochaine vidéo. 120. Matériaux et textures: Bonjour tout le monde. Bienvenue à une autre vidéo de cette section. Dans cette vidéo, nous allons parler de textures et de matériaux. Lorsque vous concevez un objet 3D, vous avez besoin d'une texture ou d'un matériau. Comme je l'ai déjà mentionné, vous avez une bibliothèque en haut, alors allons-y et cliquez dessus. Ici vous avez différentes options, ici nous avons des collections, nous avons une collection de différentes formes, comme vous pouvez le voir, ici nous pouvons utiliser ces formes comme celle-ci ou celle-ci, et nous avons d'autres options comme Eh bien, tels que les actifs. Vous avez beaucoup d'actifs 3D, et ensuite nous avons des matériaux. Supposons que nous voulons changer le matériel de notre texte ici. Ici, nous pouvons choisir un de ces matériaux, je vais aller pour celui-ci. Vous pouvez le faire glisser et le déposer sur votre texte 3D comme ceci. C' est plutôt cool, n'est-ce pas ? Rendons-le une fois de plus et nous pouvons voir la différence. Tu vois à quel point c'est génial ? Vous pouvez facilement changer le matériau comme vous le souhaitez. Changons-le à autre chose, par exemple, celui-là. Vous pouvez choisir votre texte et cliquer dessus, parfait, ou il est préférable de créer une autre forme ici. Créons une boîte ici. Je vais le réduire, le déplacer ici, parfait, et ensuite je vais changer son matériel pour autre chose, par exemple, celui-ci. C' est plutôt cool, n'est-ce pas ? Pouvez-vous reconnaître combien de possibilités il y a pour vous de créer des objets étonnants là-bas ? C' est fantastique. Très bien les gars, merci beaucoup d'avoir regardé cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 121. Créer une scène 3D: Bonjour à tous, et bienvenue à une autre vidéo de la section. Dans cette vidéo, nous allons commencer à concevoir ensemble notre première scène 3D. Qu' est-ce qu'une scène 3D ? Comme vous pouvez le deviner, une scène 3D est une scène qui se compose de différents objets 3D. Par exemple, nous avons ici une scène parce que nous avons au moins deux éléments ici. Cependant, nous allons créer ensemble une scène plus intéressante. Tout d'abord, enlevons ces deux objets, assez bien. Je vais garder l'avion Shadow. Je n'ai plus besoin de la caméra, alors enlevons ça. Ensuite, je vais créer un texte. Cliquez sur 3D Text là-bas, assez bon. Ensuite, je vais le changer en interface utilisateur comme ceci. Définissons cette couleur pour être, comme ça, plutôt génial. Ensuite, je vais le dupliquer, et changeons sa position. Changons-le en UX, comme ceci. Après cela, je vais changer la couleur à 3646ff. C' est plutôt génial. Laisse-moi zoomer. Alors je vais le faire tourner de 90 degrés comme ça, assez génial. Laissez-moi le déplacer vers le texte de l'interface utilisateur comme ceci. Encore une fois, je vais le faire tourner comme ça. Il semble que l'UX se trouve au-dessus de l'interface utilisateur. Ensuite, je vais diminuer la taille de l'UX par ce cube, comme ceci. Déplaçons le côté gauche, plutôt génial. Déplaçons un peu ces textes d'interface utilisateur vers le haut parce que nous avons besoin d'obtenir cette ombre. Si vous vous souvenez, lorsque vous utilisez un plan d'ombre, nous devons placer nos objets au-dessus afin d'obtenir une ombre. Fantastique. Ensuite, choisissons UX ici, et déplacez-le vers le côté gauche, comme ceci. C'est fantastique. Cependant, je vais rendre UX un peu plus petit, je pense que maintenant c'est mieux, plutôt bon. La prochaine chose que je vais faire est d'ajouter un mur derrière ça. Allons à la bibliothèque, puis allons à Zig-zag Shapes de Vectary, et ici nous avons un mur d'angle. Cliquons sur ça, plutôt génial. Je vais zoomer parce qu'il faut agrandir ce mur. Ici, assurez-vous que le mur est sélectionné, et utilisez ce cube pour l'agrandir, et ce cube aussi, assez génial. Alors ce que je vais faire, c'est changer de couleur. Changeons sa couleur pour quelque chose comme ça, c'est assez génial. Je vais zoomer. Ensuite, je vais aller à la bibliothèque, et cette fois je vais ouvrir des environnements comme celui-ci. nous avons ici des environnements différents. Par exemple, nous pouvons essayer celui-ci, vous pouvez le faire glisser et le déposer comme ceci. Rendons notre scène pour voir à quoi elle ressemble. C'est génial. Cependant, je vais le changer pour quelque chose d'autre comme celui-ci. Rappelez-vous que l'environnement que vous choisissez va affecter les reflets, ainsi que les ombres. Assurez-vous de choisir le meilleur environnement possible. Essayons celui-là aussi, je pense que c'est génial. Ensuite, ajoutons quelques éléments 3D à notre scène. Allons à la section Actifs, et voici chercher des livres, et je vais choisir celui-ci, assez génial. Agrandissons, fantastique. Je vais chercher autre chose, par exemple, une tasse de boisson comme ça. Rallons-le plus petit, déplaçons-le sur le côté droit, fantastique. Ensuite, nous pouvons également ajouter un beignet. Cherchons un beignet. On peut ajouter, par exemple, celui-là, c'est un donut faible en poly. Je vais le rendre plus petit, et le mettre à côté de notre tasse de boisson. Comme vous pouvez le voir, nous avons une lumière rectangulaire. Cependant, je vais ajouter une autre lumière à notre scène. Cherchons la lumière directionnelle, plutôt bien. Je vais zoomer, déplacer le côté droit, faire tourner un peu. Je pense que c'est mieux maintenant. Nous pouvons également ajouter différents objets à notre scène afin de la rendre plus professionnelle, mais aussi plus complexe. Cependant, pour le bien de ce cours, je vais garder les choses simples. Rendons notre scène pour voir à quoi elle ressemble. C' est plutôt génial, n'est-ce pas ? Vous pouvez également aller de l'avant et ajouter des objets à partir de Collections. Par exemple, nous pouvons aller de l'avant et ouvrir des formes organiques, et ici nous avons différents objets comme celui-ci. Mettons-le à l'échelle, ou vous pourriez utiliser d'autres objets, par exemple, des formes arrondies comme celui-ci. Cela dépend de vous et du projet sur lequel vous travaillez, alors assurez-vous de choisir de grands objets afin de créer la meilleure combinaison possible. Les gars, merci beaucoup d'avoir regardé cette vidéo, j'espère que ça vous a plu. Dans la vidéo suivante, nous allons parler du rendu et de l'exportation. On se voit alors. 122. Rendu et exporter: Bonjour tout le monde. Bienvenue sur une autre vidéo de la section. Dans cette vidéo, nous allons parler du rendu de votre scène. Comme je l'ai mentionné précédemment, chaque fois que vous travaillez sur un projet 3D, vous devez le rendre à la fin. Maintenant, je vais vous montrer comment vous pouvez modifier les paramètres de rendu, ainsi que comment vous pouvez utiliser l'option de visionneuse, et aussi comment vous pouvez exporter votre fichier. Avant de faire ça, je vais faire quelques ajustements à notre plan d'ombre. Allons sélectionner notre plan d'ombre, et je vais changer sa couleur pour quelque chose comme ça. Je vais choisir la couleur, sélecteur. Maintenant, rendons notre scène. C' est génial, n'est-ce pas ? Pour le rendu de votre scène, vous disposez de différentes options. Tout d'abord, allons de l'avant et ouvrons le menu de rendu juste en haut. La première section est comme ces bascule. Vous pouvez modifier la qualité, vous pouvez la définir à basse, moyenne ou élevée, et vous pouvez cliquer sur « Démarrer l'aperçu du rendu » comme ceci. Vous pouvez y ajouter des effets, vous pouvez modifier la saturation, le contraste, le filtre de couleur, ainsi que la balance des couleurs, etc. Enfin, vous pouvez exporter votre scène sous forme d'image. Cependant, vous devez mettre à niveau votre licence afin d'obtenir cette fonctionnalité, puis vous pouvez cliquer sur Télécharger l'image. La prochaine caractéristique importante de Vectary est le spectateur. Lorsque vous accédez à la section Visualiseur, vous avez différentes options ici que vous pouvez modifier, comme les textures, la cuisson, et il s'agit d'éclairages. Ici, nous pouvons choisir la vue de la caméra centrale, et cela signifie que la vue de la caméra sera centrée sur l'objet actuellement sélectionné. Si vous sélectionnez l'interface utilisateur, la vue de la caméra sera centrée sur cet objet et la réalité augmentée est activée, ce qui est génial car nous pouvons également obtenir une scène de réalité augmentée. Ensuite, nous générons notre code ici, et maintenant nous pouvons cliquer sur « Générer », cela prend du temps et c'est fait. Ici, vous pouvez obtenir le code. Comme vous pouvez le voir, vous pouvez copier et coller le code iframe dans votre code HTML, ou si vous ne développez pas votre site Web ou l'application, vous pouvez facilement le donner à votre développeur et il ou elle pourrait l'utiliser parfaitement. Cependant, si vous voulez l'afficher à vos clients à l'avance, vous pouvez changer le format de HTML iframe en lien, et vous pouvez copier ce lien dans votre presse-papiers et l'envoyer à vos clients ou à votre ami. Tout d'abord, vérifions ici. On y va, ça va ressembler à ça, n'est-ce pas génial ? Nous pouvons maintenir Commande et zoomer, c'est fantastique, n'est-ce pas ? Si vous ouvrez la scène sur votre téléphone, vous pouvez utiliser l'option de réalité augmentée afin d' augmenter la scène dans vos environnements, c'est assez génial. Assurez-vous de le vérifier. Vous pouvez utiliser à la fois les appareils Android et iOS pour faire cela, et c'est fantastique. L' option suivante est l'exportation. Ici vous pouvez exporter votre fichier avec n'importe quel format que vous voulez OBJ, DAE, USDZ, qui est le format de réalité augmentée pour iOS, et cetera. Cependant, pour utiliser ce type de fonctionnalité, vous devez obtenir une licence étendue pour cela. Les gars, c'est tout pour cette section. J' espère que vous avez apprécié cette vidéo et je vous verrai dans la prochaine vidéo. 123. Outils de prototypage: Salut, tout le monde. Bienvenue dans une autre section de ce cours. Dans cette section, nous allons parler du prototypage. Mais tout d'abord, je vais vous présenter quelques-uns des meilleurs outils pour prototyper vos projets. En fait, vous pouvez utiliser Figma pour créer un prototype, cependant, si vous voulez faire un prototype sophistiqué et complexe, je vous recommande d'utiliser d'autres sites Web et applications. Quels sont les meilleurs outils de prototypage ? Numéro 1, ProTopie, qui est mon application préférée aussi, parce qu'il est si facile de travailler avec et il y a une version d'essai, et vous pouvez l'essayer avant d'acheter une licence. Numéro 2, Zeplin. Numéro 3, Framer X, puis InVision Studio, Figma et Marvel. Dans la vidéo suivante, nous commencerons à prototyper l'un de nos précédents projets sur Figma. On se voit alors. 124. Prototyping dans Figma: Salut, tout le monde, et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, nous allons commencer à prototyper ensemble notre projet d'application financière dans Figma. Je vais vous montrer quelques techniques utiles pour créer un prototype très lisse et excellent. Tout d'abord, allons de l'avant et zoomons. Je vais rendre l'écran interactif. Voici notre page d'accueil, et comme vous pouvez le voir, elle se compose de deux boutons différents. abord, sélectionnons le bouton de connexion, puis cliquez sur le prototype dans l'inspecteur comme ceci. Comme vous pouvez le voir, un nœud circulaire apparaît. Cliquez dessus et faites-le glisser comme ceci pour vous connecter au signe dans l'écran. Ensuite, sur votre droite, vous avez différentes options à modifier. Nous n'avons pas besoin de changer quoi que ce soit dans l'interaction. Cependant, dans la section animation, je vais ouvrir ce menu déroulant et choisissons Smart Animate, qui est une très grande fonctionnalité. Vous pouvez créer des micro-interactions avec elle. Comme vous pouvez le voir, le type d'animation est défini pour faciliter l'utilisation. C' est plutôt bon. La durée est de 300 millisecondes. C' est bon. Que signifie Smart Animate ici ? Smart Animate reconnaîtra les calques des deux écrans portant le même nom. Par exemple, ici nous avons des formes et dans cet écran, dans le signe de l'écran, nous avons des formes avec la même orthographe. Rappelez-vous, l'orthographe compte beaucoup. Ils doivent être identiques. Lorsque l'utilisateur clique sur le bouton de connexion, car ici nous avons deux couches avec le même nom, Figma l'animera automatiquement pour nous. Allons de l'avant et cliquez sur l'icône d'affichage. Plutôt bien. Je vais cliquer sur la connexion. On y va. Tu as vu à quel point cette animation était lisse et belle ? C' est plutôt génial. Essayons encore une fois. C' est fantastique. Vous pouvez même modifier la durée si vous le souhaitez. Par exemple, mettons-le à 400, et je vais essayer. Fantastique. Maintenant, par exemple, faisons la même chose pour notre bouton d'inscription. Je vais le glisser et le déposer ici. Mettons-le sur Smart Animate, et c'est tout. Plutôt bien. La prochaine technique que je vais vous montrer est de glisser et de glisser. C' est très utile lorsque vous voulez animer votre menu hamburger. Ici, sur notre page d'accueil, sélectionnons notre icône de menu hamburger. Je vais faire glisser et déposer cette flèche pour créer une connexion avec notre écran de menu comme ceci. Alors ici, je vais le mettre pour pousser comme ça. Cependant, la flèche droite doit être sélectionnée comme ceci. Essayons maintenant. Mais avant cela, nous devons aller de l'avant et glisser et déposer cette icône de jeu et la mettre ici car cela indique que ce prototypage devrait commencer à partir de cette page d'accueil. Maintenant, allons de l'avant et cliquez sur cette icône de menu hamburger. On y va. Je pense que c'est une bonne idée de changer la durée à 200 millisecondes. Essayons ça. C' est plutôt bon, n'est-ce pas ? Maintenant, allons de l'avant et sélectionnez ce calque de superposition, ce calque sombre, et je vais créer une connexion d'ici à notre écran de page d'accueil. Mettons-le pour pousser. Cette fois, la flèche gauche doit être sélectionnée avec une durée de 200 millisecondes, et je vais sélectionner les calques correspondants Smart Animate. Parce que dans ces deux écrans, nous avons cette image de profil. Je vais le faire animer automatiquement. Essayons ça. On y va. Si je clique ici, vous pouvez voir que notre image de profil est animée. Bien sûr, vous pouvez également utiliser des animations simples. Par exemple, nous pouvons aller de l'avant et cliquer sur le bouton Se connecter. Faisons un lien avec notre vérification OTP. Plutôt bien. Je vais le mettre en instantané comme ça. Encore une fois, n'oubliez pas de déplacer cette icône de lecture sur cet écran. Essayons comme ça. C'est instantané. Vous pouvez également le changer pour le dissoudre et essayer. On y va. C'est le phasing. Comme vous pouvez le voir, créer un grand prototype n'est pas si difficile dans Figma. Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. On se voit alors. 125. Mocking une application dans Figma: Salut tout le monde et bienvenue à une autre vidéo de ce cours. Dans cette vidéo, je vais vous montrer comment vous pouvez créer un balisage dans Figma. Tout d'abord, je vais vous demander d'ouvrir le site FreeBiesUI. Quand tu l'as ouvert, cherchons Figma comme ça. Je vais faire défiler vers le bas et je pense que c'est un bon exemple. Cliquons sur ça. Plutôt bien. Je vais faire défiler vers le bas et ici vous pouvez cliquer sur Télécharger Freebie, et il sera ouvert dans votre Figma. Ici, vous avez différents exemples. Je vais aller de l'avant et choisir cet écran, copiez-le et collons-le dans notre projet ici. Fantastique. Je vais le déplacer sur le côté droit. Super. Laisse-moi zoomer. Comme vous pouvez le voir ici, vous avez différentes couches. Si vous ouvrez cet écran, ici vous avez votre design et voici l'image. Je vais sélectionner ça et placer une image. Si vous vous en souvenez, nous avons déjà exporté nos écrans de page d'accueil. Cependant, si vous ne l'avez pas fait, vous pourriez aller de l'avant et exporter n'importe lequel de ces articles. Ensuite, plaçons le ici et cliquez. Comme vous pouvez le voir, il a été retourné horizontalement. Je vais faire un clic droit sur cela et cliquez sur flip horizontal, c'est tout. Pouvez-vous voir à quel point il est facile de créer votre balisage dans Figma ? Les gars, c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine vidéo. 126. Comment créer votre propre portfolio en ligne ?: Salut tout le monde. Dans cette vidéo, nous allons parler de portfolio en ligne. En tant que concepteur UI/UX, vous avez absolument besoin d'un portefeuille en ligne pour montrer vos capacités et vos compétences en matière de conception. Il est extrêmement essentiel d'avoir un portefeuille exceptionnel pour vous permettre d'obtenir un bon travail, que ce soit en tant que designer à temps plein ou freelance. Comment créer votre propre portfolio en ligne sans écrire une seule ligne de code ? Pour ce faire, vous pouvez utiliser des sites Web tels que Dribbble ou Behance, qui sont conçus pour les designers et presque tous les employeurs besoin de consulter votre profil sur l'un de ces sites Web. Behance est une plateforme en ligne pour présenter et découvrir le travail créatif. Il appartient à Adobe et vous pouvez créer un excellent portfolio en l'utilisant gratuitement. Alternativement, vous pouvez utiliser Dribbble pour mettre en valeur votre illustration et il crée automatiquement un portfolio en ligne pour vous. Vous pouvez également personnaliser votre portefeuille comme vous le souhaitez, mais vous devez garder quelque chose dans votre esprit. Pour utiliser gratuitement les services Dribbble, vous devez être invité par d'autres designers. Sinon, vous pouvez acheter l'abonnement Premium. 127. Comment utiliser Dribbble ?: Salut, tout le monde. Dans cette vidéo, nous allons parler de la façon dont vous pouvez utiliser Dribbble. Pour utiliser les services Dribbble, vous devez d' abord avoir un compte. Une fois que vous avez créé votre compte, vous pouvez parcourir les œuvres d'autres créateurs pour trouver de l'inspiration ou télécharger vos propres illustrations créatives. Chaque mois, vous pouvez télécharger jusqu'à 48 tirs et vos tirs doivent respecter les directives du Dribbble. Vous pouvez télécharger des images haute résolution au format PNG, JPEG et GIF, ainsi que des GIF animés dans votre profil. En outre, si vous êtes membre pro, vous pouvez également télécharger des vidéos. Après avoir téléchargé votre illustration, vous pouvez définir un titre pour celle-ci. Vous pouvez également ajouter des balises relatives pour permettre aux autres utilisateurs de trouver plus facilement votre illustration. Last but not least, vous devriez écrire une brève description de votre photo, puis vous pouvez la publier immédiatement ou à l'avenir. 128. Comment utiliser le behance ?: Salut tout le monde. Dans cette vidéo, nous allons parler de la façon dont vous pouvez utiliser Behance. Tout comme pour utiliser Dribbble, pour utiliser les services Behance, vous devez d'abord avoir un compte. Ensuite, vous pouvez parcourir et consulter d'autres illustrations de designers, ou créer votre propre projet. La principale différence entre Dribbble et Behance est le rapport d'aspect de vos plans ou projets. Sur Dribbble, vous ne pouvez pas télécharger complètement un plan vertical comme une page de destination. Cependant, sur Behance, vous pouvez télécharger des images avec n'importe quel format pour mettre en valeur vos illustrations. Je recommande d'utiliser à la fois Behance et Dribbble en même temps et d' essayer d'utiliser leurs caractéristiques uniques pour présenter parfaitement votre design. Behance vous permet également de télécharger vos images et vidéos de haute qualité dans un seul projet, ce qui est une excellente fonctionnalité pour présenter un produit interactif en un rien de temps. 129. Comment obtenir votre premier client ?: Salut, tout le monde, et bienvenue dans une autre section de ce cours. Dans cette vidéo, nous allons parler des idées d'affaires et façon dont vous pouvez obtenir votre premier client et démarrer votre propre entreprise. En tant que concepteur d'interface utilisateur, vous vous demandez peut-être comment obtenir votre premier client. Eh bien, j'espère qu'il y a plein de façons de commencer. La première étape de la recherche de clients consiste à disposer d'un portefeuille solide. Si vous n'avez pas encore regardé la section portfolio, je vous suggère de regarder la section portfolio de ce cours. Après avoir créé votre portefeuille, vous devez vous demander quel type d'emplois aimez-vous avoir ? Voulez-vous travailler en tant que designer à temps plein ou vous voulez travailler en tant que freelance ? Si vous souhaitez travailler en tant que concepteur d'interface utilisateur à temps plein, vous devez préparer votre curriculum vitae et postuler pour les entreprises dans lesquelles vous souhaitez travailler. D' un autre côté, si vous voulez travailler en freelance, vous pouvez vous inscrire sur certains sites web et trouver facilement votre premier client. Il y a tellement de sites Web sur lesquels vous pouvez travailler. Par exemple, Freelancer.com, Fiverr, Upwork, 99designs, Dribbble, etc. Assurez-vous de les vérifier et de savoir quelle est l'option la plus appropriée pour vous. 130. Comment démarrer votre propre entreprise ?: Bonjour tout le monde. J'espère que tu vas bien. Dans cette vidéo, nous allons vous parler de la façon dont vous pouvez démarrer votre propre entreprise. Démarrer une entreprise est difficile, vous devez donc déterminer le niveau de votre motivation avant d'entrer dans ce processus. Lorsque vous envisagez de démarrer une entreprise, vous devez savoir qu'il faut beaucoup de temps, d'énergie et de patience pour atteindre vos objectifs. Si vous êtes au courant de tous ces aspects, vous êtes prêt à passer à l'étape suivante. Tout d'abord, vous devriez évaluer votre niveau de compétences et savoir quel type de services vous aimez offrir, puis vous devez savoir qui sont vos clients potentiels. En outre, vous devriez travailler sur votre tarification et analyser vos chiffres. Deuxièmement, vous devez enregistrer votre propre entreprise. À cet égard, je recommande d'obtenir des conseils d'un avocat et de m'assurer que vous comprenez toutes les exigences légales associées à l'enregistrement d'une entreprise. Après avoir enregistré votre entreprise, vous devez commencer à créer votre propre marque, concevoir un logo pour votre entreprise et choisir les couleurs de votre marque. Enfin, vous devriez certainement concevoir votre propre site Web parce que c'est la partie la plus cruciale de votre entreprise. Maintenant que votre site Web est prêt, il est temps de réfléchir à votre stratégie marketing. Si vous ne pouviez pas offrir vos services et compétences aux bonnes personnes, votre entreprise ne réussirait pas, peu importe le professionnalisme et l'utilité de vos compétences. Assurez-vous donc que vous avez un bon plan marketing et exécutez-le avec précision. 131. Comment améliorer votre entreprise ?: Salut tout le monde. J'espère que tu vas bien. Dans cette vidéo, nous allons vous parler de la façon dont vous pouvez faire évoluer votre entreprise. Maintenant que vous dirigez votre propre entreprise, vous vous demandez peut-être comment vous pouvez faire évoluer votre entreprise, ou en d'autres termes, comment vous pouvez augmenter considérablement le chiffre d'affaires de votre entreprise. En ce qui concerne les entreprises en ligne, la plupart des entrepreneurs se concentrent généralement sur une région géographique par souci de simplicité. C' est une excellente idée pour commencer votre voyage, cependant, ce n'est pas suffisant pour développer une entreprise rentable. Comme vous pouvez le deviner, la meilleure solution consiste à élargir vos options globales et à obtenir des clients du monde entier. L' étape suivante consiste à automatiser vos processus manuels qui peuvent éviter de perdre votre temps, car peu importe le nombre de clients que vous avez, il n'y a que 24 heures par jour. Vous pouvez utiliser le site tampon pour gérer automatiquement vos réseaux sociaux. Il y a aussi beaucoup d'autres outils pour rappeler à vos clients leurs factures en un rien de temps. Vous n'avez pas besoin de consacrer autant de temps à ces tâches qui peuvent être déléguées et exécutées automatiquement, mais vous devez plutôt vous concentrer sur votre contenu et le résultat de chaque projet. 132. Communiquer avec vos clients: Salut, tout le monde. Dans cette vidéo, nous allons parler de la communication avec vos clients. communication efficace avec les clients joue un rôle clé dans tout type d'entreprise, et pour les concepteurs, il n'y a pas d'exceptions. La façon dont vous interagissez avec vos clients est si importante si vous voulez être un entrepreneur prospère. Comment devriez-vous gérer la situation si quelque chose ne va pas ? Eh bien, dans n'importe quel genre d'affaires, il y a des moments où quelque chose ne va pas et c'est normal. Cependant, la façon dont vous faites face à ces difficultés est si importante. Supposons que vous définissiez une date limite pour remettre le projet final au client et qu'au milieu du processus de conception, vous comprenez que cela pourrait prendre plus de temps. Eh bien, dans ce cas, vous devez en informer votre client le plus tôt possible et essayer de trouver une bonne solution qui fonctionne pour vous deux. 133. Contrat: Salut, tout le monde. Dans cette vidéo, nous allons parler de contrats. Comme toutes les autres entreprises, vous devriez avoir un contrat approprié pour démarrer un projet. Peu importe la taille ou la taille de ce projet, fait d'avoir un contrat garde tout clair et protège les droits des deux parties. Qu' est-ce qui devrait être inclus dans l'accord ? chose la plus importante que vous devez ajouter au contrat est la déclaration de vos services d'une manière claire, et parfois aussi il est encore préférable de mentionner ce que vous ne ferez pas pour le client. Assurez-vous de mentionner la date limite de livraison du projet ainsi que le calendrier de paiement. Rappelez-vous, que le contrat ne devrait pas porter uniquement sur les choses qui pourraient mal tourner. Il est préférable de se concentrer sur ce qui devrait être fait correctement. En général, c'est une bonne idée d'obtenir des conseils juridiques d'un avocat à l'avance. 134. Où trouver une inspiration de conception des cours mondiaux ?: Salut, tout le monde. Dans cette vidéo, nous allons parler d'Inspiration et de Ressources. Être inspiré par d'autres designers est absolument beau et important. Cependant, vous devez vous assurer que vous ne copiez pas leurs œuvres. Si vous êtes intéressé par leurs conceptions et que vous souhaitez en utiliser des parties dans votre projet, vous devez d'abord demander l'autorisation. Comme vous vous en souvenez peut-être, nous avons parlé de Behance et Dribbble dans les sections précédentes de ce cours. Ces deux sites sont les endroits les plus populaires pour trouver une inspiration artistique. Il y a tellement de sites Web et pages Instagram que vous pouvez vous référer comme une source d'inspiration. Vous pouvez également montrer à vos clients ce que vous avez inspirer de connaître leurs attentes. 135. Ressources d'image: Bonjour, tout le monde. Dans cette vidéo, nous allons parler de ressources d'image. En tant que concepteurs, nous travaillons beaucoup avec les images. Il pourrait s'agir de n'importe quel type d'images sous la forme de profils, de produits, etc. Avoir des ressources efficaces est absolument essentiel, afin d'obtenir les images les plus appropriées pour nos projets. Il y a tellement de sites Web qui vous offrent une variété d'images. Certains d'entre eux sont payés et d'autres sont gratuits. Cependant, si vous cherchez des images libres de droits à utiliser dans vos projets sans aucun doute sur leur licence, je vous suggère d'utiliser Unsplash.com. C' est l'un des meilleurs sites Web là-bas, pour trouver presque n'importe quel type d'images dans différentes catégories. N' oubliez pas que vous devez vous assurer de la licence des images que vous souhaitez utiliser. Sinon, vous pourriez avoir des ennuis. 136. Quelle est votre prochaine étape ?: Bonjour tout le monde. Dans cette vidéo, nous allons parler la prochaine étape en tant que concepteur UX d'interface utilisateur. Maintenant que vous avez beaucoup appris sur la conception de l'interface utilisateur, il est temps de passer à l'étape suivante. Vous êtes maintenant prêt à commencer à concevoir des applications mobiles et des sites Web incroyables. En tant que designer, vous devez toujours être créatif. Essayez donc de vous lancer le défi chaque jour de découvrir secrets cachés de l' interface utilisateur et de la conception UX, vous avez probablement entendu dire que la pratique rend parfait, mais rappelez-vous que votre conception doit ne soit pas toujours parfaite. La seule chose qui compte, votre progression et vos améliorations. Je pense que c'est une bonne idée de changer cette fameuse phrase, s'entraîner, de progresser. Cela dit, vous devriez devenir chaque jour un meilleur designer. Si vous souhaitez en savoir plus sur conception UI UX et améliorer vos compétences en matière de conception. J'ai une bonne nouvelle pour toi. J'ai une chaîne YouTube où je mets des tonnes de trucs gratuits qui pourraient vous intéresser. Alors n'oubliez pas de vous abonner à ma chaîne pour ne pas manquer mes prochains tutoriels. Si vous souhaitez être informé des mises à jour des cours ou des nouveaux cours, vous pouvez également me suivre sur Skillshare. Beaucoup d'entre vous m'ont demandé de créer un cours qui vous aide à créer des sites Web modernes visuellement sans code. Et je tiens à annoncer que j'ai récemment publié un cours complet qui vous apprend tout ce que vous devez savoir pour devenir un concepteur et un développeur Web de classe mondiale, vous apprendrez à convertissez visuellement votre Figma conçu en sites Web personnalisés et devenez un pigiste performant si vous souhaitez en savoir plus sur la théorie des couleurs et comprendre comment créer superbes jeux de couleurs pour votre interface utilisateur UX projets de design. Vous pouvez consulter mon autre cours intitulé Créer des couleurs incroyables pour vos projets de conception UI UX. De plus, si vous souhaitez apprendre à créer des scènes et des illustrations 3D, vous pouvez consulter mon autre cours. Very vous apprend à devenir un illustrateur 3D en utilisant Blender. Enfin et surtout, je vous remercie d'avoir regardé ce tutoriel. voyage a été long pour nous deux et j' espère que cela vous a plu. Je vous souhaite la meilleure des chances, et j'ai hâte de voir vos œuvres d'art.