Apprendre la création d'applications mobiles dans Figma : projet complet

1. Bienvenue dans ce cours !: Salut, je suis Chris. Dans ce cours, je vais vous apprendre tout ce que vous devez savoir sur la conception de lacunes dans Figma. Figma est un programme de conception gratuit et je vais vous apprendre tout ce que vous devez savoir à ce sujet à partir de zéro sans aucune expérience ni connaissance préalable. Donc, ce que je vais faire, c'est vous montrer comment concevoir de belles applications Android et iOS. Deuxièmement, je vais vous montrer comment les prototyper, ce qui signifie que nous allons les rendre interactifs. Ils vont avoir l'air d' avoir déjà été codés. Et troisièmement, les principes qui confèrent à toute conception d'application une belle apparence. Maintenant, ces trois parties sont absolument énormes, mais je vais les décomposer en concepts faciles à comprendre. Vous pouvez immédiatement utiliser Figma et tout ordinateur de bureau ou portable dont vous avez besoin. C'est ça. Rien d'autre. Permettez-moi de vous dire quelques choses à mon sujet. Je suis un professeur certifié Adobe. Cela signifie que je suis un excellent professeur, mais un diplôme n'est rien sans expérience pratique, sans compétences pratiques. À cette fin, j'ai fondé une entreprise de design AB très prospère en 2013-2018. J'avais une équipe d'environ 25 personnes. La conception de ce Coders Desk attire chefs de produit, tous aussi géniaux. Et nous avons réussi à obtenir plus de 200 millions de téléchargements sur l'ensemble de notre portefeuille. Cela signifie donc que j'ai une expérience pratique et tout ce que vous êtes sur le point d'entendre. Ce sont des techniques et des principes que vous pouvez utiliser immédiatement. Nous ne nous concentrons pas sur la théorie de l' intégration uniquement sur les éléments que vous pouvez appliquer à vos propres projets et gagner de l'argent. Et croyez-moi, les projets de design AB sont très bien rémunérés. D'après mon expérience, un concepteur d'applications gagne au moins trois fois plus qu'un concepteur Web. Et cela s'explique par le fait que les entreprises qui ont besoin applications disposent généralement d'un budget très important. Le minimum absolu de 20 000$ par projet. Maintenant qu'il y a encore beaucoup à dire. Mais en bref, il s'agit d'un domaine très lucratif. Et vous n'avez pas besoin de savoir coder. C'est ce qu'il y a de bien là-dedans. Vous pouvez le mettre en banque et passer au projet suivant. Maintenant, les enfants, ce que je veux de vous, que vous vous engagez, non ? Je veux que vous travailliez avec moi, que vous réfléchissiez, que vous posiez des questions, que vous fassiez les exercices et que vous interagissiez avec la communauté d'étudiants qui vous ressemblent. Ne doutez pas de vous, s'il vous plaît. Soyez indulgent lorsque vous faites une erreur parce que vous allez vous tromper. Ce sera parfois difficile, mais continuez. Faites de votre mieux et n'abandonnez pas les quelques fois où vous allez vous faire renverser. Si tu continues, tu finiras par y arriver. J'ai un dicton : travaillez dur, travaillez intelligemment, travaillez assez longtemps, et les résultats suivront. C'est la seule promesse que je t'ai faite. Et avec ça, commençons. J'espère que tu pourras rester avec moi jusqu'à la fin et que nous pourrons construire quelque chose de génial. Pour l'instant, ouvrez Google, recherchez Figma, créez un compte gratuit totalement gratuit et téléchargez-le. Je ne vais pas aborder ces étapes car c'est comme si l' inscription à Gmail était très simple. Nous venons de saisir votre e-mail, votre mot de passe, et c'est tout. Alors téléchargez Figma, installez-le et c'est tout. Je te verrai au prochain cours. Merci beaucoup. 2. Concevez votre premier écran d'application: Bienvenue à nouveau. Commençons. Ouvrez Figma. Vous devriez l'avoir installé. Mais si vous ne le faites pas, mettez la vidéo en pause, accédez à la recherche Google ou à Figma, puis installez-la sur votre ordinateur. Lorsque vous êtes prêt, lancez l'application de bureau. Juste comme ça, nous n' allons pas travailler dans notre navigateur, même s'il fonctionne dans un autre navigateur, nous allons nous en tenir au programme. OK, voici à quoi ça ressemble. Et nous allons chercher le fichier d'importation. C'est ce que nous recherchons. Vous avez joint ce projet au cours. Maintenant, voici le truc. Notre travail consiste à concevoir ce vert pour l'une de mes applications. Et nous pouvons nous inspirer de cette capture d'écran. Il s'agit en fait d'un véritable projet. Donc, même si cela peut sembler simple, va t'apprendre beaucoup de choses. Regardez cette vidéo deux fois. Une fois, juste pour comprendre ce qui se passe. Et puis la deuxième fois, tu pourras travailler avec moi en faisant une pause aussi souvent que tu le souhaites. Répéter. S'il vous plaît, n'essayez pas de travailler en même temps lors de votre première visite. Cela vaut pour l'ensemble du cours. OK, passons au mot. C'est ce qu'on appelle le cadre et tout ce qui se trouve à l'intérieur du cadre constitue un écran, un seul écran. heure actuelle, nous n' avons qu'une chose, le logo de l'application, l'atlas des claviers. La première chose que nous allons faire est d' envoyer le rouge, veuillez cliquer dessus pour le sélectionner. Ou la deuxième chose que vous pouvez faire est de cliquer et de faire glisser une case pour que tout ce qui se trouve dans cette boîte soit sélectionné. Encore une fois, nous pouvons utiliser cette commande pour l' aligner au centre de l'écran, comme ça. Des trucs géniaux. Ensuite, j'ai besoin de quelque chose qui fasse office de fond. Prenons donc cet outil, l'outil ellipse, le raccourci clavier est 0. 0 pour les lèvres n'a pas beaucoup de sens, mais c'est bon. Il s'agit de l'icône en forme de cercle en haut à gauche de l'écran. En général, vous verrez l'outil rectangle, mais vous pouvez appuyer sur 0 et vous l'obtiendrez directement. Ou vous pouvez utiliser cette flèche ici pour afficher tous les outils. Il faut faire un petit zoom arrière. Alors faisons-le. Maintenez la touche Ctrl enfoncée, c'est la touche Commande du Mac, puis utilisez le défilement de votre souris. C'est ainsi que vous zoomez ou dézoomez. Veuillez prendre un moment pour vous familiariser avec ce concept. Encore une fois, maintenez la touche Contrôle enfoncée, puis faites défiler l'écran. Au fait, lorsque vous zoomez, Figma va vous concentrer sur votre souris. Donc, si vous le déplacez vers la droite, c'est là que vous allez zoomer. En gros, il va suivre votre souris, déplacer vers la gauche. Même chose. Maintenant que l' outil Ellipse est sélectionné, dessinons une forme qui ressemble à ceci. Encore une fois, remarquez que le logo a disparu. C'est parce que nous sommes en train de le masquer, de récupérer le fixateur, d'accéder au panneau Calques sur le côté gauche, et vous allez trouver la couche appelée ellipse. Un. Cliquez dessus et faites-le glisser sous le logo. Si vos lèvres sont trop grandes, maman pourrait les placer derrière votre écran. Le fixe qui le déplace simplement avant en arrière sur le cadre. Si vous n'y arrivez pas, créez simplement une ellipse plus petite. OK, revenons à Atlas. Changez la couleur du gris à peu près n'importe quoi d'autre. Pour cela, nous allons devoir cliquer sur cette case à côté de Phil, cette fenêtre apparaîtra et vous pourrez choisir à peu près n'importe quelle couleur. Je cherche quelque chose de brillant, saturé, d'une couleur très moderne, peut-être un violet quelconque, quelque chose comme ça. Encore une fois, j'en suis content. Encore une fois, nous allons devoir le centrer. Utilisons donc exactement la même commande ici. Si vous passez votre souris dessus, vous verrez le message Aligner le centre horizontal. Génial. OK, maintenant maintenons la touche Contrôle enfoncée et zoomons un peu plus pour mieux voir sur quoi nous travaillons. Le logo noir ne fonctionne pas vraiment très bien. Passons donc à l'outil de déplacement. Le raccourci clavier est V, mais vous pouvez cliquer ici, déplacer V. Encore une fois, cela n'a pas vraiment de sens, mais assurez-vous de le sélectionner. OK, maintenant, attrapez le logo en cliquant dessus, puis rendons-le blanc. Croyez-le ou non, c'est une bonne avancée. Pour certains. Cela peut être difficile pour certains, cela peut sembler très simple, mais continuons. Prochaine. Je voulais ajouter une sorte de graphisme, mais remontons le logo, juste le lit. Lorsque vous utilisez l'outil de déplacement, cliquez dessus pour le sélectionner , puis faites-le glisser vers haut tant que vous ne lâchez pas le clic de votre souris, vous verrez que cette fausse maman vous aidera à rester centré. C'est ce que vous montre cette ligne rouge. Figma nous aide vraiment. OK, maintenant je veux ajouter la capture d'écran, mais d'abord, ajoutons un rectangle qui nous aidera beaucoup. Le rectangle fonctionne, et vous pouvez appuyer sur R. Où se trouvent ? Enfin signifie rectangle. Cliquez et faites-en glisser un vers l'extérieur. Pas de taille précise en tête, juste quelque chose d'assez large et assez court. D'accord, nous pouvons toujours ajuster cela si nécessaire. Comme toujours, veuillez vous concentrer exactement sur la même commande. s'agit d'une étape importante dans presque tous les projets de conception. Ensuite, dans votre dossier de ressources, vous aurez le choix entre quelques modèles. Ils sont tous fabriqués par mon équipe. Au fait, nous allons placer l'un d' entre eux à l'intérieur de ce rectangle. Voici donc comment cela va se passer. Cliquez ici à côté de l'outil rectangulaire pour voir tous les outils. Nous recherchons une image de lieu et même un raccourci. Control Shift K. Cela ouvrira une fenêtre de navigateur et vous pourrez trouver le dossier contenant toutes ces captures d'écran. OK, génial. Je vais en choisir un au hasard. Une fois l'image chargée, vous verrez une mini-version à côté du curseur. Cela signifie qu'il est prêt à être placé dans le projet. Donc, ce que nous allons faire, c'est parcourir le rectangle et cliquer dessus. Et c'est du travail, bravo. Une chose que je n'aime pas ces bords carrés avec le rectangle est toujours sélectionnée. Vous allez voir ce champ ici. C'est donc ici que nous allons le changer de 0 à 30 pixels. Cela va nous donner beaucoup plus de chance. Et j'en suis très content. Maintenant, pour que l'image ressorte un peu plus, cliquons dessus à côté de fx. Ça va nous donner une belle ombre. Pour régler les ombres, regardez Passons sur cette icône où vous verrez apparaître les paramètres des effets. Je vais donc utiliser des valeurs élevées pour que vous puissiez vraiment le voir à travers l'enregistrement. C'est 15 pour le champ Y et 15 pour le flou. Ça fait 15. Nous parlerons de tout en détail un peu plus tard. Pour l'instant, suivez simplement mes étapes et la partie supérieure est terminée. Ajoutons maintenant notre premier bouton. Obtenez le raccourci clavier t. Le premier message sera « Choisissez moins de clavier ». Choisissez le clavier. Maintenant, lorsque vous avez fini de l'écrire, appuyez simplement sur la touche Escape pour terminer. Changeons ensuite la police depuis le côté droit. Cette police n'est donc pas très belle. Nous allons donc modifier à la base cette zone appelée texte. Changeons la police en une police très basique. Disons Arial Bold 24. Prends ton temps avec. Tu n'as pas à te précipiter. Comme je l'ai dit, mettez la vidéo en pause aussi souvent que nécessaire lorsque vous êtes prêt, centrez-la sur le canevas, comme ça. L'étape la plus importante est celle-ci : déplacez votre souris au-dessus et cliquez avec le bouton droit pour accéder à cette liste. Choisissez Ajouter, mise en page automatique. C'est quelque part près du centre. Si vous n'y arrivez pas, utilisez simplement cette touche de raccourci et déplacez la touche a. Cela fait la même chose. Il ne semble pas que rien se soit passé, mais maintenant nous avons cette zone sur le côté droit qui s'appelle Fell. Appuyez sur l'icône plus. Et encore une fois, rien ne semble avoir changé. Mais remarquez que nous avons du blanc ici. Nous adorons le blanc et la plupart des projets de design AB, mais nous devons maintenant le remplacer par autre chose. Cliquons donc ici pour obtenir le sélecteur de couleurs. Nous pouvons maintenant sélectionner à peu près n'importe quelle couleur, mais utilisons la précédente. Et puis nous disons : « C'est maintenant verbal également. Échappez-vous pour le fermer. Maintenant, le noir et le violet ne fonctionnent pas vraiment. Mais notez cette zone appelée couleurs de sélection. Cela nous aide donc à changer ce noir en blanc pur. Il suffit de cliquer sur le carré noir et tu sauras quoi faire, le rendre blanc. N'oubliez pas d'utiliser la touche Escape pour fermer la fenêtre. Et cela prend forme. Le bouton est un peu trop petit, apportons quelques modifications. En haut à droite. Inversons le rayon de coordonnées deux pour le, c'est ce champ juste ici. Ensuite, un champ vers le bas et trouvez ces deux champs entre 80,20 et c'est tout. Maintenant, 80 signifie que nous allons avoir 80 pixels de chaque côté de ce texte. Et ce sont les bords des boutons , essentiellement horizontalement. Et cette partie est pour l'autre côté. Maintenant, appuyez encore une fois sur le bouton, et nous les avons à peu près. Faites-en une copie. Utilisez le contrôle maintenant, encore une fois, il semble que rien ne s'est passé. Mais si vous l'utilisez, avec votre souris, cliquez et faites glisser, vous verrez que nous en avons fait une copie. Donc Control D ou Command D, D en double. Des trucs géniaux. Changeons les textes et ensuite nous pourrons passer à autre chose. Doubleclick veut entrer dans le bouton. Maintenant, double-cliquez à nouveau pour modifier ce message. Modifiez-le pour activer le clavier. Activez donc le clavier. Une fois que vous aurez terminé, passez à la vidéo suivante où je vais expliquer pourquoi nous travaillons comme nous l'avons fait. Pour l'instant. C'est votre premier écran de conception d'application, félicitations, et je vous verrai dans une seconde. Merci. 3. La chose la plus importante dans la conception d'applications: Bienvenue à nouveau. Voyons si nous pouvons améliorer légèrement le design. Peut-être changer la taille des boutons, peut-être ajouter quelques détails supplémentaires comme ajouter le site Web en bas. Maintenant, la faune travaille en arrière-plan. C'est la même chose que dans la vidéo précédente, les mêmes techniques. Permettez-moi de vous dire quelques mots sur la conception d'applications. Maintenant, au cours des cinq années que j'ai passées dans ce domaine, j'ai découvert que la simplicité était essentielle. Ce que vous voyez ici n' est pas difficile à faire d'un point de vue technique. Ce n'est pas complètement avancé. Comme vous l'avez vu, nous utilisons quelques formes. Nous avons centré les quelques éléments, nous avons choisi des effets très basiques, comme une ombre en forme de goutte. Il s'agit d'une véritable conception de laboratoire. Il s'agit d'un véritable projet et la plupart ressemblent exactement à ce que vous voyez ici. Times 100, non ? Maintenant, simple n'est pas un mauvais mot ici. La simplicité est essentielle dans toute conception AB en raison de leur nature même. Les applications mobiles, les meilleures, n' ont au moins qu'une ou deux fonctionnalités de base. Par exemple, l'Uber classique vous appelle une voiture, et c'est tout. L'interface n'a pas beaucoup de décorations ni de boutons. Vous ne verrez aucune créativité. Vous ne verrez pas beaucoup de choses qui le distinguent incroyablement. Ce n'est donc pas le problème. L'application doit être intuitive, non ? L'idée est de donner à l' application une apparence telle qu'un enfant de quatre ans avec une tablette puisse gérer l'utilisateur. Encore une fois, il s'agit d'un véritable écran provenant d'une véritable application. Ce n'est pas compliqué, ce n'est pas chic, ce n'est pas impressionnant. Cela ne vous permettra pas d'obtenir une tonne de likes sur les réseaux sociaux, mais c'est ce dont les entreprises ont besoin. épurés, modernes Des designs épurés, modernes et précis qui aident l'utilisateur à atteindre ses objectifs. Photo, mais cela vous donne une voiture pour ce green, il s'agit de s'assurer que l'utilisateur active le clavier. fait, si vous regardez les galeries de design comme Dribble , The Hands ou autre, vous trouverez des designs magnifiques et incroyables. Mais la plupart d'entre eux sont faux. Ils sont conçus pour les designers et parfaits pour les likes et les commentaires. La vérité est que c'est en fait ce dont les entreprises ont besoin. Maintenant, ne pensez pas que c'est facile à faire. Il y a une différence entre facile et simple. aussi simple que lorsque vous prenez une bouteille d'eau, par exemple, C'est aussi simple que lorsque vous prenez une bouteille d'eau, par exemple, si vous savez que si vous voulez avoir de gros bras au gymnase, vous devrez utiliser haltères de plus en plus lourds. Ou si vous voulez un pack de six que vous devez suivre un régime. Le processus est simple à comprendre. Prenez plus de poids au fil du temps, mangez moins, non ? Mais soulever ces haltères lourds est loin d'être facile. C'est donc la différence entre une cymbale et une cymbale. Une autre façon de voir les choses est comme si vous regardiez un chef expérimenté cuisiner, il le fait avec grâce. Cela semble si simple, si facile. Mais derrière tout cela, il y a beaucoup de complexité. Il y a une tonne d'expérience. C'est donc la même chose ici dans AB Design. En arriver à ce point où vous pouvez donner une belle apparence à quelques éléments. C'est assez difficile, mais c'est ce que vous allez apprendre dans ce cours. Je vais vous présenter tous les principes de conception qui vous aideront à créer des applications modernes et magnifiques. Je vais vous apprendre le contraste, symétrie, l'espacement, la hiérarchie et bien plus encore. Vous ne les voyez pas, mais ce sont les principes de toute application réussie. Enfin, pourquoi la plupart des entreprises ne proposent-elles superbes applications comme celles que vous voyez sur Behance et durables, car elles sont incroyablement chères ? Les EPS de base, les plus simples, nécessitent un budget d' au moins 10 000$. Et cela semblait très, très bas de gamme. La plupart des applications nécessitent un budget d'au moins 50 000$. Mais disons-le autrement. Supposons qu'une heure de création d'une application coûte au total 200 dollars, 200 dollars. Passeriez-vous plus de temps à assurer que l'application fonctionne correctement ? Ou le choix des couleurs, des effets, des animations fantaisistes et la loi. Comme vous pouvez l'imaginer, la plupart des entreprises souhaitent que l' application fonctionne correctement. La fonctionnalité d'abord, non ? Le design est toujours une priorité secondaire. C'est pourquoi vous ne verrez aucune de ces animations incroyables, de ces transitions incroyables et de ces effets sur tous les Bois, du prix d'un bras et d'une jambe. Cela coûte beaucoup trop cher et ne vaut pas la peine. Alors, quelle est la conclusion ? Eh bien, vous devez apprendre à concevoir comme ça. Simple, moderne et efficace, ce que vous voyez sur Design Galleries ressemble beaucoup à ce que vous voyez sur Instagram. C'est pour la plupart faux. Les gens ne ressemblent pas vraiment à ça. Et les rechutes ne ressemblent pas à ça non plus. La simplicité exige beaucoup de connaissances, pratique et, en bref, une tonne d'expérience. Je vais t'aider avec tout ça. Poursuivez le cours et vous apprendrez tout ce que vous devez savoir sur ce domaine. En ce qui concerne plus particulièrement ce design, j'ai choisi de faire ressortir le premier bouton en ajoutant une ombre. J'ai fait en sorte que le deuxième bouton soit gris pour montrer qu'il n'est pas prêt à être cliqué. Il n'est pas non plus aussi large. Maintenant, c'est le principe de la hiérarchie. Vous avez l'impression de devoir cliquer sur ce bouton, le violet, et non sur cet autre. Enfin, j'ai ajouté la couche de texte en bas pour équilibrer le design. Maintenant, après avoir suivi ce cours, vous serez même en mesure de faire beaucoup plus de choses avec beaucoup de confiance. Mais maintenant, continuons. 4. Deux compétences fondamentales à posséder dans Figma: Créons un tout nouveau fichier pour contrôler les terres, quelle que soit la méthode que vous préférez. Et mettons-nous au travail. Au début, je sais que tout semble si vide. Tout projet commence par un cadre. C'est la première chose dont tu dois te souvenir. Un cadre est comme un tableau d'art ou une toile, mais il est légèrement différent de Figma c'est un endroit où vous ajoutez tous vos textes, vos images, en gros votre contenu tout à l'intérieur du cadre. Ne vous inquiétez pas pour la définition. Au fur et à mesure que nous travaillons, vous l'aurez bientôt. Pour ajouter le cadre. Appuyez sur F pour activer l'outil de cadrage ou cliquez simplement ici. Au fait, il propose un autre outil appelé l'outil Slice, mais nous ne le voulons pas. D'accord. L'outil Frame est sélectionné et le panneau de droite vient d'être modifié. Vous avez de nombreuses options très bien organisées. Téléphone, tablette ou ordinateur de bureau et ainsi de suite. Vous pouvez cliquer sur les noms pour les ouvrir ou les fermer. Et si vous cliquez sur l'un d'entre eux, exemple iPad Mini, le cadre est automatiquement ajouté. Vous pouvez également le voir dans le panneau des couches. Voyez ici ce symbole qui ressemble en quelque sorte à un hashtag. C'est un cadre pour le supprimer. Appuyez simplement sur la touche Supprimer et c'est tout. D'accord, passons à la section bureau et choisissons le premier élément de cette liste , également appelé bureau. Nous pouvons voir la taille ici. C'est 14, 40 sur 1024. y est, tu l'as. Maintenant, le problème est que plupart des projets de conception Web devraient commencer par un cadre de 1920 x 1080. C'est ce que je recommande vivement. La meilleure façon de le redimensionner est d'utiliser cette partie ici. W représente la largeur et H représente la hauteur au lieu de 14, 40. Cliquez ici. Et maintenant, vous pouvez taper 1920. Même chose pour la hauteur que nous recherchons alors AD. Maintenant, le cadre s'est agrandi et on le voit très bien. Voici ce que vous devez faire pour zoomer ou dézoomer. Maintenez la touche Ctrl enfoncée et utilisez la molette de votre souris. Si vous faites défiler la page vers l'arrière, vous effectuerez un zoom arrière. Si vous faites défiler l'écran vers l'avant, vous zoomerez avant après l'avoir fait plusieurs fois Cela vous semblera naturel. Utilisez votre main gauche, s'il vous plaît. Idéalement, vous devez maintenir le petit doigt enfoncé sur la touche de contrôle gauche de votre clavier. Utilisez maintenant votre parchemin. Procédez comme suit. Déplacez votre souris dans les coordonnées du cadre et zoomez. Comme vous pouvez le constater, cela vous aide vraiment à vous concentrer sur ce domaine. Maintenant, dézoomez et passez à un autre coin. Je sais que cela semble très basique, mais croyez-moi, il est essentiel que vous vous entraîniez. Vous ne pouvez pas avancer tant que vous ne maîtrisez pas ce genre de choses. Il y a encore une chose que vous devez savoir utiliser, et c'est la touche de la barre d'espace. Supposons que nous soyons zoomés dans un coin et que nous soyons très satisfaits du niveau de zoom. Mais maintenant, nous voulons passer à l'autre coin. C'est ce qu'on appelle le panoramique. En train de faire un tour. Maintenez la touche de la barre d'espace enfoncée et le curseur de votre souris se transformera en main. Si vous relâchez la touche de la barre d'espace, reviendrez aux données standard, à l'outil de déplacement. Encore une fois, maintenez la barre d'espace, cliquez sur Maintenir et déplacez-vous d'une coordonnée à l'autre d'un côté à l'autre, de haut en bas. En maîtrisant ces deux techniques simples, vous créez une base très solide. C'est ton alphabet. Ce sont vos calculs de base. S'il vous plaît, apprenez-le. n'y a pas moyen de le contourner. Pour récapituler, maintenez la touche Ctrl enfoncée et utilisez défilement de votre souris pour zoomer en avant ou en arrière et maintenez la touche de la barre d'espace enfoncée, cliquez et maintenez le bouton enfoncé pour vous déplacer côté à l'autre afin de vous déplacer. 5. Figma vs Adobe XD vs Sketch vs Photoshop: Bienvenue à nouveau. Dans cette conférence, je souhaite faire une comparaison rapide entre ces programmes de conception AB. Tout d'abord, la conclusion, Figma, semble être la norme de l'industrie et le meilleur programme de conception pour l'avenir. Dans cet esprit, vous pouvez passer à la conférence suivante si tous les détails ne vous intéressent pas. D'accord, en supposant que vous soyez toujours là, je regarde le marché ou le marché du design et je vois quatre grandes colonnes est Photoshop, Adobe XD, Sketch et Figma. Parlons d'abord de Sketch. C'est un programme de conception d'applications décent qui est assez connu. Cela coûte 9$ par mois, mais cela ne m'intéresse pas pour une raison simple. Il n'est pas disponible sous Windows, je ne peux donc pas l'utiliser. D'après ce que j'ai compris, l'équipe qui l'a créée n'a pas l'intention de le faire fonctionner sous Windows. Donc, pour cette raison, c'est hors de question pour moi. Qui plus est, il n'a pas une grande communauté. Dans cet esprit, Sketch perd donc du terrain assez rapidement. Il existe depuis de nombreuses années, mais il perd du terrain. Parlons maintenant de Photoshop par rapport à Adobe XD. Maintenant, c'est comme comparer des pommes à des arbres. Ce sont des programmes totalement différents qui ont des objectifs différents. Adobe XD a été conçu dès le départ pour les projets de conception Web, ainsi que pour les projets de conception. C'est donc l'un des principaux avantages d'Adobe XD. Il fonctionne avec des vecteurs. Il est très léger, très rapide et possède des fonctionnalités impressionnantes qui peuvent sérieusement accélérer votre processus de conception. Jetez un coup d'œil à cet exemple où je peux remplir une liste en quelques clics, ce qui vous permet de travailler plus rapidement et plus intelligemment. Ce n'est pas qu'un gadget. Je l'utilise tout le temps dans tous mes projets. La rapidité est le maître mot ici. Maintenant, l'inconvénient est qu' Adobe XD est toujours en plein développement. Adobe y travaille constamment et il s' améliore de plus en plus. Mais certaines personnes disent que les mises à jour arrivent assez rapidement. Des éléments de base tels qu' une interface sombre ou la possibilité de modifier votre mise en page, par exemple , ne sont pas disponibles. Enfin, pas au moment de cet enregistrement en tout cas. Un autre inconvénient. Auparavant, Adobe XD était un programme gratuit. Maintenant, c'est dix dollars par mois. Dans l'ensemble, il y a donc un sentiment de frustration à propos d'Adobe XD, surtout si on le compare à Figma. Maintenant, nous y reviendrons dans une seconde. Pour l'instant, parlons de Photoshop. Photoshop est génial. Il possède des tonnes de fonctionnalités. Il est prévisible, confortable et vous pouvez créer de superbes applications avec lui. C'est l'un des programmes de design les plus connus au monde. Maintenant, je pourrais continuer encore et encore à ce sujet, sur ses aspects positifs. Mais voici l' éléphant dans la pièce. Le plus gros problème de Photoshop pour le travail de conception AB est la performance. Lorsque vous travaillez sur un projet de moyenne à grande envergure, Photoshop ralentit considérablement. Dans la plupart des projets de design AB, même avec le meilleur ordinateur, j'ai toujours du mal à me déplacer. Il est agité, ne répond pas et c'est assez ennuyeux. Et c'est une machine à 7 000 dollars, n' est pas la meilleure au monde, mais elle coûte quand même 7 000 dollars. Maintenant, quand j'ai essayé d'ajouter la nouvelle couche de texte Photoshop, est-ce que c'est la bague ? C'est lent comme ****, il s'arrête et il réfléchit pendant quelques secondes, en ajoutant une simple couche de texte, c'est frustrant et c'est de loin le plus gros inconvénient par rapport aux autres, aux autres également. Mais c'est ce qui me touche vraiment tous les jours. Et c'est simple. Photoshop n'a pas été conçu pour ce genre de choses. Si le projet ne comporte que quelques écrans au total, c'est très bien. Vous pouvez très bien utiliser Photoshop. Mais après dix ou 20 écrans, cela devient tout simplement trop lent. Donc, pour résumer, entre Adobe XD et Photoshop, cela n'a aucun contexte pour un projet de conception d' application décent. L'un est incroyablement rapide, tandis que l'autre est le géant du monde du design. Mais c'est aussi terriblement lent. Jet ski, Adobe XD contre bateau de croisière. Revenons maintenant à Figma, cela a été lancé en 2012 et en 2018 également, il a vraiment commencé à prendre de l'ampleur. Les prochaines années. Il se répand incroyablement rapidement dans la communauté du design. tel point qu'Adobe, la grande entreprise à l' origine de programmes tels Photoshop, Illustrator, Premiere Pro et, bien sûr, Adobe XD, a opté pour Figma pour 20 milliards de dollars. Oui, un milliard. C'est donc arrivé fin 2022 et cela a surpris tout le monde. La somme est incroyable, mais voici pourquoi vous devriez vous y intéresser. Adobe XD était donc un concurrent direct de Figma, un débutant, ils pouvaient même se ressembler. Adobe XD a été conçu pour les projets de conception de sites Web et d'applications, exactement comme Figma. Mais un avantage évident qui me tenait à cœur était son prix. C'était totalement gratuit. départ, Adobe XD était gratuit, mais ils gagnaient dix dollars par mois. Et cela peut sembler peu, mais la plupart des entreprises détestent mettre en place un nouveau système de facturation. S'il s'agit de designers qui pouvaient simplement s'inscrire rapidement sans aucun problème, ce serait le cas idéal. Figma est donc un excellent choix pour la plupart des entreprises et des designers de toutes sortes, qui aiment travailler dans Figma, non pas parce que c'est gratuit, mais aussi parce que cela fonctionne dans votre navigateur. Oui, un programme de conception complet qui fonctionne dans votre navigateur. Dans l'ensemble, Figma est devenu programme de design que tout le monde réclamait. Adobe a essayé d' améliorer Adobe XD, mais dans l'ensemble, Figma semblait imparable. Je pense donc que c'est pourquoi ils ont décidé l' acheter pour une telle somme. Ils devaient faire quelque chose. Figma devenait de plus en plus forte et les acheter était la solution la plus simple. Maintenant, la principale question après l'achat de la Figma par Adobe était si elle resterait gratuite ? Et la réponse est oui. Mais la question la plus importante est celle-ci. Que va faire Adobe ? XD et Figma feront exactement la même chose. Cela n'a aucun sens. Les deux principaux programmes de conception, c'est tout simplement trop cher. La plupart des gens pensent donc qu' Adobe va carrément tuer Figma puisqu'elle était autrefois un concurrent. Mais je pense qu' Adobe XD est beaucoup plus susceptible d'être résilié. Le temps nous le dira. Mais pour l'instant, il vaut mieux que vous appreniez Figma et que vous compreniez pourquoi de nombreux designers ont commencé à l'utiliser. Et ils ne sont jamais revenus à Adobe XD ni à aucun autre programme de conception. Avant de terminer, j'aimerais mentionner quelque chose. Adobe va très probablement mettre à jour Figma à plusieurs reprises. Cela signifie que vous pourriez voir légères modifications d'interface ici et là. Mais l'avantage de ce cours est que les principes, les principes de conception que nous abordons sont universels. Donc, même si vous constatez un léger changement de phase, ne vous inquiétez pas, vous pouvez toujours suivre sans problème. Et si vous êtes bloqué, demandez simplement de l'aide et je serai là pour intervenir pour le moment. Continuons et je te verrai dans une seconde. Merci 6. Améliorer notre vitesse: Bienvenue à nouveau. Je sais qu'il y a beaucoup de choses à discuter à propos l'interface de Figma et des bases mêmes du programme C'est ce que je propose, améliorons notre vitesse. rapidité est l'un des principaux facteurs qui déterminent votre succès au fil des ans J'ai trouvé que le volume était extrêmement important. Pour le dire simplement, c'est une chose si vous concevez, puis les boutons en sont une autre. Si vous en créez 1 000, la simple répétition vous rend meilleur. Il ne s'agit pas seulement d'être plus rapide, il s'agit d'être confiant dans l'exécution des principes de base. C'est pourquoi nous commençons par un autre exercice. Même si vous ne connaissez pas le programme, vous n'êtes pas sûr de son interface , etc. Pas de soucis. Emmenez-moi, lancez le Sigma et nous allons créer un nouveau projet en cliquant ici. Au début, vous allez avoir un écran totalement vide et c'est normal. Utilisez l'outil de cadre, touche de raccourci F. Vous pouvez utiliser l'un de ces préréglages, mais il est tout simplement plus facile de cliquer et de faire glisser une case vers l'extérieur. C'est un cadre, c'est-à-dire un écran. Bien sûr, la taille est totalement fausse. Nous allons donc résoudre ce problème en travaillant avec ce panneau de propriétés ici, sur le côté droit. En bref, W représente la bande et h représente la hauteur. Nous voulons 720 x 12, 80, un excellent point de départ pour la plupart des applications. Entrez ces valeurs et appuyez sur Entrée. Ensuite, vous pouvez maintenir la touche Contrôle enfoncée et effectuer un zoom arrière sur le lit à l'aide de la molette de la souris. Maintenant, voici tous les objectifs. Je veux que vous créiez rapidement une grille de six photos avec six dipôles. Cela signifie deux colonnes pour être celles-ci. L'objectif est de le faire le plus rapidement possible. Et à cette fin, je vais vous demander de le faire trois fois. Chaque fois que vous le faites, veuillez enregistrer l'heure. Utilisez un chronomètre sur votre téléphone. Je voulais voir comment tu t'améliorais chaque fois que tu franchis ces étapes. Voici comment cela se passe. Saisissez l'outil rectangle, les touches de raccourci sont et dessinez une forme comme celle-ci. Il n'y a pas de taille précise à l'esprit, mais elle doit être inférieure à cent 30 pixels. Il est donc facile de le supprimer. Vous avez donc de la place pour deux d'entre eux côte à côte. Placez-le en haut à gauche, et c'est prêt. Ensuite, saisissez l'outil de saisie, raccourci d, pour le type de texte. Et écrivons quelque chose. Cela peut être n'importe quoi à ce stade. Je vais juste utiliser le nom de la photo 1, juste quelque chose au hasard. Appuyez sur Escape lorsque vous en avez terminé. Maintenant, le fun commence. Sélectionnez à la fois le rectangle et la couche de texte en dessinant une zone comme celle-ci. Maintenant, vous l'avez deviné, il va falloir les centrer. Maintenant. Tout cela est très bien, mais la couche de texte est assez basique. Eh bien, cliquons dessus et allons sur le côté droit de l'écran, et changeons son orientation. Tout d'abord, nous allons passer de alignement gauche à l'alignement central. Et pourquoi ? Parce que nous allons augmenter la taille. Nous allons faire beaucoup de choses, mais ça va rester. Mais par exemple ici, comme vous pouvez le voir, il reste centré même si j'ai changé la taille. De plus, nous pouvons également modifier la police en utilisant ce champ ici. J'en ai plein installé. Je vais donc opter pour l'un d'entre eux, par exemple Poppins, bold 24, non ? Et comme nous changeons l'orientation de gauche au centre, le texte reste centré par un rectangle. Je vais vous apprendre à installer des polices plus tard, mais maintenant nous allons continuer. Pour l'instant, vous pouvez utiliser n'importe quelle autre police qui vous semble intéressante. Il suffit de parcourir cette liste ici. OK, ensuite, sélectionnez les deux couches et créez une copie, contrôlez la largeur de la copie sur le bureau Command D sur un Mac, D comme en double. Et comme toujours, rien ne semble s'être passé. Mais le panneau des couches nous montre la copie à l'écran, cliquez et faites-la glisser sur le côté. Il est important de l' aligner au mieux, non ? Voilà donc ce que cela signifie. Imaginez une ligne horizontale qui passe juste ici. Vous n' avez pas vraiment besoin de l'imaginer car Figma vous aide. D'accord ? Donc, une ligne qui fonctionne correctement et laisse un peu de place de chaque côté. Si nécessaire, sélectionnez tout et déplacez-le. OK, c'est une bonne chose. Maintenant, faisons-le. Sélectionnons les deux entrées en faisant glisser vers l'extérieur case encore plus grande qui englobe tout, n'est-ce pas ? Maintenant, dupliquez à nouveau avec Ctrl D et faites glisser les copies vers le bas. Veuillez laisser suffisamment d'espace entre les rangées. Donc quelque chose comme ça. Ce que je veux éviter, c'est quelque chose qui semble bondé comme celui-ci. Ce n'est pas une bonne chance. Encore une fois, assurez-vous de laisser suffisamment d'espace respiratoire, 0. N'oubliez pas de zoomer et dézoomer si nécessaire, c'est contrôlé et votre souris défilera. OK, maintenant, recommencez si nécessaire, jusqu'à ce que vous obteniez six photos. Et même si elles sont géniales. En parlant de photos, allons sur unsplash.com. Et vous trouverez ici une énorme bibliothèque d'images gratuites. Maintenant, je te conseille de me montrer quelque chose d'intéressant à propos de ton pays. Vous pouvez mettre en valeur différentes villes, différentes parties de votre nature. Assurez-vous simplement que les photos vont bien ensemble et que les noms sont clairement marqués. Donc, après avoir téléchargé six images depuis Unsplash, il est temps de les intégrer au projet. Pour cela, utilisons Control Shift K pour placer les images. Ou si vous n'aimez pas le raccourci clavier, accédez à l'outil rectangle et cliquez ici sur cette flèche vers le bas, recherchez, placez des images et sélectionnez ces six fichiers. Sachez que unsplash.com vous offre de grandes images. Donc, lorsque vous les rechargez, Figma vous remercie pendant un moment, juste quelques secondes Vous devez donc être patient. OK, super. Cliquez maintenant rapidement sur tous les rectangles pour insérer ces images à l'intérieur. Lorsque vous aurez terminé, je veux que vous renommiez toutes ces couches de texte de manière plus appropriée. Encore une fois, il peut s'agir de noms de villes et votre pays ou autre chose. Vous n'avez pas besoin d'une longue description, soyez juste courte et concise. Bien entendu, vous pouvez réduire ce texte à une taille différente. Vous avez le contrôle total du look. Agrandissez-le, changez la police, peu importe ce que vous voulez faire quand vous avez terminé, sélectionnez le cadre entier. Accédez ensuite à Exporter et cliquez sur cette icône plus. Et vous allez voir quelques options et celles par défaut conviennent parfaitement. PNG à la taille que vous avez configurée. Cliquez sur ce bouton pour ouvrir une fenêtre de navigation, enregistrez-la sur votre bureau, puis téléchargez-la sur la plateforme. Je veux encore voir, c'est ton design. Maintenant, ce que je veux que tu fasses, c'est VP. Ils font de l'exercice encore quelques fois, trois fois au total. Cela signifie donc créer un rectangle au centime du titre de deux manières. Une fois avec un rectangle , puis la deuxième fois, changez l'orientation du côté gauche vers le centre. Recherchez ensuite les titres, copies éventuelles, ajoutez des photos et explorez. Découvrez comment vous pouvez améliorer votre temps. Mais une chose, ne pensez pas au temps que vous passez sur Unsplash à chercher les photos. C'est donc exclu, non ? Mettez le chronomètre en pause. Ce que vous recherchez, la vitesse dans Figma, vous devriez pouvoir ajouter rectangles et des couches de texte les yeux fermés. Insérez les photos, assurez-vous que tout est centré. Déplacez-les, zoomez en avant et en arrière. C'est ce que j'attends de toi. Bonne chance et faites-moi connaître vos horaires. Dites-moi comment vous vous améliorez à chaque fois. 7. Corriger cette conception d'applications mobiles: Bienvenue à nouveau. Veuillez démarrer Figma et important dans le fichier suivant. Réparez ce problème de figure à points dans l'application. Ceci est joint au cours. L'objectif est désormais simple. Nous devons améliorer ce design. Et cela nous aidera beaucoup à apprendre comment concevoir une application. Maintenant, voici la première erreur. Vous avez remarqué que nous avons beaucoup centré nos articles. Remarquez ce côté gauche. Maintenant, vous devriez immédiatement imaginer la ligne verticale passant par tous ces éléments. Si vous les sélectionnez tous, vous remarquerez qu'ils sont partout. Ils ne sont pas alignés. Cela donne donc à l' application un aspect désordonné. C'est une intuition qui vous dit que quelque chose ne va pas. Donc, avec tous ces éléments sélectionnés, nous allons utiliser cette ligne de commande d'alignement à gauche. Et c'est bien plus comme ça. Pour être honnête, l'écart sur la droite est plus grand, en tête-à-tête contre 82 sur la gauche. Ce n'est pas correct. Eh bien, tout d'abord, si vous essayez d'utiliser cette icône en forme de ligne centrale, Figma ne nous donnera pas ce que nous recherchons maintenant, pour être honnête, cela n'a pas l'air si mal, mais restons sur la bonne voie. Maintenant, nous voulons égaliser l'écart du côté gauche avec celui du côté droit, n'est-ce pas ? Nous voulons le même écart. Nous pouvons tout cliquer, faire glisser et déplacer jusqu'à ce que nous voyions cette ligne. s'agit de la méthode manuelle et ce n'est pas la méthode la plus rapide pour faire le travail. Permettez-moi donc d'annuler le contrôle Z, c'est la commande Z sur un Mac. Maintenant, avec tous les éléments, sélectionnez que vous pouvez utiliser Control G, G en groupe. C'est Command G sur Mac. Concentrez-vous maintenant sur le panneau des couches. Nous avons ici quelque chose qui s'appelle le groupe ou le dossier. En bref, Figma traite désormais tous ces éléments comme un seul et même élément. Et à cause de cela, nous pouvons utiliser la commande centrale comme ça, et nous obtenons le même écart de part et d'autre. Alors, tu as obtenu tout ça ? Nous avons regroupé toutes les couches. Figma les considérerait donc tous comme un seul objet. Ensuite, nous pouvons maintenant utiliser la commande centrale pour dissocier les groupes, il suffit de cliquer avec le bouton droit ici ou dans le panneau des couches. Et nous recherchons le Ungroup. Ou même si vous pouvez utiliser les touches de raccourci Control Shift G, mais j'aime bien cliquer avec le bouton droit de la souris. Encore une fois, c'est la première erreur de ne pas aligner correctement les choses. C'était dans deux cas, alignant à gauche les objets puis en les déplaçant au centre. Maintenant, la deuxième erreur est juste là, avec cette perturbation Ce gris est beaucoup trop clair, il est trop délavé, donc il est trop difficile à lire. Imaginez que vous êtes sur votre téléphone et votre luminosité est de 20 %. Pour économiser l'autonomie de votre batterie, vous ne pourrez pas lire cela. Cliquez donc dessus pour le sélectionner , puis remplacez le remplissage par un remplissage un peu plus foncé. La lisibilité est essentielle. L'éligibilité est ce dont vous avez besoin pour lire facilement les couches de texte. Une couleur très délavée est donc interdite. L'erreur suivante est l' action principale sur cet écran de connexion. C'est un élément si petit qu'il est facile de le rater. Pourquoi ne pas avoir un gros bouton d' une surface généreuse pour obliger l'utilisateur à être très précis dans les étapes. Cela n'a aucun sens. Sélectionnez donc le texte, puis utilisez Shift a. C'est la méthode standard pour créer un bouton dans Figma. Plus que cela, mais dernier point, ajoutons maintenant un remplissage en cliquant sur cette icône plus. En ce qui concerne les couleurs d'action, utilisez quelque chose de brillant et saturé. Par exemple, disons que nous voulons utiliser un vert. Vous ne devriez jamais opter pour quelque chose comme ça, par exemple si terne, ennuyeux et délavé. Cela doit se démarquer. autre côté, vous ne voulez pas utiliser de couleurs fluo, n'est-ce pas ? Donc, aller jusqu'en haut à droite est généralement une erreur. Au lieu de cela, vous voulez rester dans cette zone. Il s'agit d'une couleur moderne qui plaira à la plupart des clients. Bien sûr, le noir ne fonctionne pas. Maintenant, pourriez-vous potentiellement le lire ? Oui, bien sûr, mais est-ce que ça a l'air génial ? Non. Alors n'oubliez pas que nous pouvons contrôler le texte à partir d'ici, en sélectionnant les couleurs. Maintenant, mon conseil, optez toujours, toujours pour le blanc pur. Rien d'autre, ni jaune, ni bleu sarcelle, ni gris, NAB, doré. Rien ne vaut le blanc pur. OK, pour ce qui est des nerfs centraux, carrés ont l'air un peu dépassés. Ce n'est pas une erreur, mais ce n'est pas agréable. On est un peu en 2010. Donc ce bec. Utilisons donc une valeur élevée, quelque chose comme 60. Vous pouvez saisir n'importe quelle valeur très élevée ici, Figma n'utilisera que la valeur maximale possible pour la largeur et la hauteur du bouton, utilisons 160,20. Maintenant, je vous conseille créer le bouton comme pourquoi les champs, ou de le réduire considérablement. Comme toujours, centrez-le horizontalement. Les valeurs à éviter sont celles qui semblent être à peu près les mêmes, mais différentes. 200 en est un excellent exemple. C'est à peu près aussi large que les champs, mais pas tout à fait. C'est moins esthétique. Alors mon conseil, éloignez-vous de tout cela. Soit vous êtes précis, soit vous ne l'avez pas du tout. Maintenant, pour en revenir à l' esprit de l'exercice, nous pouvons faire beaucoup plus, non ? Déplaçons le mot de passe oublié à un endroit différent, appuyons le bouton de connexion, etc. Maintenant, ce ne sont que des détails de réglage et vous pouvez les suivre ou les laisser facultatives, n'est-ce pas ? Il s'agit davantage de préférences personnelles que de corriger les erreurs, qu'est-ce qui est clair ? Le problème est celui-ci, la dernière issue de cet exercice ? style du mot de passe God n'est pas correct. Vous voyez, se connecter est clairement une action, non ? Inscrivez-vous en bas de la page. Encore une fois, il s'agit clairement d'une action. Vous pouvez voir qu'il est d' une couleur différente et qu'il est même en gras. Il se démarque donc un peu plus car le mot de passe divin ne semble en aucun cas spécial et c'est évidemment une erreur. Alors sélectionnez-le et modifiez-le, mettez-le en gras et remplacez sa couleur par une couleur existante, par exemple ce bleu. Maintenant, pourquoi le bleu ? Parce que c'est une réaction secondaire similaire à l'inscription. Maintenant, l'action principale ou la réaction principale est de se connecter, qui est verte. Le second est bleu. Maintenant, voici le genre de choses que vous allez apprendre dans ce cours. Pour l'instant, résumons cela. Nous avons donc tout laissé de côté. Parce que la précision est essentielle dans tout projet de conception d'application, nous changeons la couleur de la description pour en améliorer la lisibilité et la facilité de lecture. Nous avons ajouté le rectangle pour l'action de connexion afin de la rendre plus facile à utiliser. Enfin, nous avons opté pour le mot de passe divin, en gras et en bleu. Cela se distingue donc en tant qu'action, en tant que chose que vous pouvez toucher. Et avec ça, avec good to go, nous réparons cette application. Merci 8. Introduction au projet: Bienvenue à nouveau. Dans la prochaine section, nous allons concevoir une application de livraison de nourriture qui sera un véritable projet. L'objectif est de se familiariser avec tous les composants d'une application mobile et de créer quelque chose de beau. Regardez chaque vidéo deux fois. Une fois pour comprendre ce qui se passe. Ne travaillez pas en même temps, observez et voyez ce qui se passe. Et puis une deuxième fois. Faites une pause aussi souvent que nécessaire pour travailler. OK, maintenant, en parcourant chaque écran, je vais vous donner mon avis. Je vais vous donner mon processus de réflexion sur la façon dont je prends rapidement des décisions en matière de conception. Cela dit, vous devez être conscient que certains principes qui s'appliquent ici nécessitent une analyse approfondie. Nous parlerons de toutes ces choses un peu plus tard. instant, je veux que vous travailliez autant que possible et que vous laissiez la majeure partie de la théorie pour plus tard. Maintenant, tu peux demander à Chris d'autres choses que nous devons apprendre. Pourquoi nous lançons-nous dans un projet de conception d'application à part entière, un projet réel ? Et c'est parce que rien ne vaut l'expérience. C'est pourquoi, qu'il s'agisse de vous égarer puis de passer à autre chose, je souhaite également que vous conceviez des mises en page standard car c'est ce que vous allez rencontrer dans vos projets quotidiens. Bien sûr. Il existe des tonnes de designs prêts à l'emploi super créatifs sur les mains avec dribble. Mais le fait est que la plupart de vos clients n'ont pas la chance de dépenser pour le développement d'applications, pour les codons. Ainsi, nous allons créer quelque chose qui soit en fait un projet du monde réel. Quelque chose qui est basé sur mon expérience de plus de cinq ans de travail avec des développeurs 24 avec des développeurs . Cela signifie qu'en appliquant les meilleures pratiques et en utilisant des mises en page assez standard, vous devez être conscient que chaque décision de conception que vous prenez peut augmenter ou diminuer les coûts de développement et les coûts de codage. Même si quelque chose peut sembler impressionnant, il y a de fortes chances que le développeur ait beaucoup de travail pour y parvenir et que le client doive payer beaucoup plus cher. J'ai emprunté cette voie de nombreuses fois. Mais voici le truc. J'ai également occupé siège du client où j'ai dû approuver des paiements supplémentaires car la version finale nécessite plus de travail que ce que nous avions initialement prévu. Maintenant, encore une fois, je vais intégrer toutes ces connaissances dans ce cours et je vais vous apprendre à choisir vos batailles avec soin, concevant quelque chose de génial qui ne vous ruinera pas. Pour l'instant Je veux que vous restiez curieux et que vous fassiez de votre mieux pour regarder les citations dans leur intégralité jusqu'à la fin. Avant de partir, je dois vous demander votre compréhension concernant certaines parties qui seront accélérées. Tout projet de conception d'application décent prendra des jours, voire des semaines. J'essaie de le condenser dans son essence, réduire afin que vous puissiez bénéficier d'une excellente expérience d'apprentissage en quelques heures. Cela signifie que je dois modifier certaines choses. Des actions répétitives que vous m'avez vue faire 100 fois ou des choses comme rechercher quelque chose sur Google, vous savez, trouver un jeu d'icônes, trouver une police, des choses de cette nature, choses qui concernent le temps... consommant, mais ils n'ont rien de spécial. Si vous avez des questions, n'hésitez pas à les poser. Je suis là pour t'aider. S'il y a quelque chose que vous ne comprenez pas, postez simplement un message et je répondrai aussi vite que possible. D'accord, amusons-nous avec notre premier projet sérieux. S'il te plaît, sois patient avec toi-même au cas où tu auras parfois des difficultés et reste avec moi jusqu'à la fin. Allons-y à. 9. Explorer le bref: Bienvenue à nouveau. Il s'agit de notre premier projet d'application sérieux. Ce sera une application de livraison de nourriture. Et nous allons profiter de cette occasion pour parcourir de nombreux écrans et scénarios différents. Ce projet a un brief d'environ huit sur dix. Pas étonnant, mais ce ne sont certainement pas quelques croquis sur une serviette. C'est double comme il se doit. D'une part, nous avons le wireframe, qui nous montre les écrans les plus importants et le contenu à inclure. l'autre côté, nous avons un document qui décrit ce qui se passe dans l'application, au cas où cela ne serait pas clair d'après le wireframe. Idéalement, vous devriez toujours avoir les deux lorsque vous démarrez un nouveau projet. Ce n'est pas à toi de les inventer. Mais si le client le souhaite, vous devriez augmenter votre devis de manière très significative, en facturant plus cher, je dirais au moins au minimum, 1 000 dollars supplémentaires. OK. en pièce jointe au cours Vous trouverez en pièce jointe au cours le lien vers le wireframe, le logo et la documentation. Maintenant, cette entreprise s'appelle Live, abréviation de livraison, et il s'agit essentiellement d'une application qui livre de la nourriture. Et dans quelques villes, nous devons répertorier tous les restaurants proposant des plats à emporter, mais uniquement ceux qui ont leur propre personnel de livraison. OK, c'est bon à savoir. Maintenant, l'entreprise gauche ne s'occupe pas de la livraison proprement dite. Maintenant, cette partie du brief est très courante. C'est l'essence du projet et c'est un bon point de départ pour avoir une idée générale de ce que vous allez concevoir. La phase suivante est cruciale : le public cible. Et cela va déterminer l'apparence de l'application. Et c'est agréable d'avoir au moins une inflammation. Désormais, cette application est destinée aux personnes actives avec un revenu disponible. Les deux sexes, probablement célibataire, pas marié, travail de bureau, peu probable, cadre supérieur. Nous devons payer les points, la qualité de la nourriture et le délai de livraison. Maintenant, ce sont des points utiles car ils peuvent nous aider à déterminer l'apparence de l'application. Comment devons-nous styliser le LEP ? Tout est dans le contexte. J'aimerais maintenant avoir quelques détails supplémentaires, mais comme je l'ai dit, il s'agit d'un huit hors bande. Une autre chose que vous devriez trouver dans ces briefs est la valeur de l'application. Nous avons maintenant les principaux problèmes Nous savons donc ce qui doit être corrigé, mais comment s'y prend l'application ? Comment l'application rend-elle les gens heureux ? Ici, l'application présente quelques points forts. Ce sont les vues, le délai de livraison exceptionnel et les vraies photos des produits. OK, plutôt bien, raisonnable. Dans les prochains paragraphes, vous trouverez des informations clés qui façonneront l'ensemble du flux de l'application. Maintenant, je vais sauter cette partie, mais veuillez tout lire vous-même après cette conférence, d'après ce que je vois, je pense que l'utilisateur peut ignorer le processus d'inscription et il en va de même pour l'adresse, il peut simplement l'ignorer. Désormais, l'enregistrement est généralement la toute première étape. Mais ici, le client, alias le propriétaire de l'entreprise, a fait un choix judicieux. Il ne veut pas que l' utilisateur se retrouve coincé remplir des formulaires sans voir la valeur de l'application. C'est pourquoi nous donnons à l'utilisateur la possibilité d' interagir avec l'application, d'en utiliser réellement. Et qu'il est convaincu de pouvoir s' inscrire pendant le processus de paiement. C'est un bon signe. Cela montre que le propriétaire, le chef de projet ou le propriétaire de l'entreprise, quel que soit le responsable de l'émission, a pensé aux choses à faire. Nous devons analyser tout cela car cela nous indique notre position dans le projet. Devons-nous partager nos propres idées ? Est-ce que nous nous permettons de faire voix et de remettre en question certaines décisions ? Eh bien, cela dépend de la qualité du projet et, bien sûr, de votre rôle, de votre travail. Dans ce cas, c'est un bon signe. Les choses sont sous contrôle et nous n'avons pas besoin de remettre en question le brief. Parfois, les clients n'en ont aucune idée. ne s'agit pas d'un de ces cas. Si l'utilisateur est connecté et que l'emplacement pas renseigné, il indiquera simplement la ville qui compte le plus de restaurants. Mais il peut utiliser une liste déroulante pour changer cela rapidement. Encore une fois, cela sonne bien, tout à fait raisonnable. Désormais, si l' utilisateur est enregistré, la liste déroulante indiquera évidemment sa ville. Désormais, le système de notation est basé sur des pourcentages, 1 à 100 % au lieu d'une note de cinq étoiles, ce qui est pour nous un bon endroit pour ajouter de la personnalité. Nous voyons que ce sont nos quatre catégories de notation. Nous devrons donc concevoir quelque chose d'un peu créatif et intéressant. Maintenant, faisons une nouvelle pause. C'est un autre signe encourageant que les choses ont été analysées en détail par les cerveaux de l'opération. systèmes de notation utilisent l'approche standard à cinq étoiles, mais certaines des plus grandes entreprises de la planète ont opté pour un système « J'aime et n'aime pas ». Cela inclut YouTube, Netflix et, dans certaines régions du monde, Facebook. Désormais, la liste est l'écran fondamental de l'application. Nous avons donc besoin de bien comprendre ce qui doit être inclus et ce qui peut être affiché à un autre endroit. Maintenant, nous voyons que nous avons besoin de la photo, d'un titre, d'une note, du type de cuisine, du type de nourriture et du délai de livraison. Sans cette inflammation, nous pouvons passer à autre chose. Le fait est que nous pourrions inclure par exemple une commande minimum, non ? Ou les frais de livraison. Nous pourrions inclure la distance en miles ou kilomètres entre le restaurant et l'utilisateur. Tout cela modifierait complètement la structure du design. Encore une fois, je suis très heureuse que nous ayons toutes ces informations et que nous sachions ce qui doit être inclus et ce qui est facultatif. Nous avons encore quelques bribes ici et là, mais passons aux wireframes. Nous devons être conscients que le nombre d' écrans affichés ici n'est pas vraiment exact. Le wireframe affiche généralement les écrans les plus importants et nous devons remplir les espaces vides en utilisant la documentation, par exemple les fenêtres contextuelles, les écrans intermédiaires, etc. De toute évidence, ils ne sont pas inclus dans la plupart des situations. Vous n'allez pas les trouver si vous les avez. Bonne nouvelle, mais dans ce cas, je ne pense pas que nous les ayons. Revenons-y maintenant. Les choses sont plutôt bien agencées. Je pense donc que nous allons passer un bon moment avec ça. Noms simplifiés. Elles sont numérotées, ce qui est génial. Nous pourrions donc parler de l'écran de localisation, par exemple, mais il serait peut-être plus rapide de simplement l'appeler écran 1. Si vous souhaitez faire un commentaire, veuillez inclure le numéro. C'est la meilleure approche. Revenons-y maintenant. Je vois que nous devons inclure à la fois le menu de gauche et le menu de droite, ce que Google ne recommande pas. Mais je pense que cela est nécessaire en raison de ces filtres qui aideront l'utilisateur à trouver un restaurant spécifique. Enfin, il faut faire attention aux différents flux de l'application. Nous avons de multiples possibilités. R, lorsque l'utilisateur est enregistré, c'est important. C'est lorsqu'il n'a pas compte et qu'il ignore la localisation, donc nous n'avons pas d'adresse et voyons s'il n'est pas enregistré, mais qu'il fournit une adresse. Cela ne nous affectera pas trop dans les premières étapes de conception, mais lors de la phase de prototypage, nous devrons régler tous ces scénarios. Nous allons devoir créer l'application et la directive. Ce sera donc assez délicat, mais nous verrons à ce stade la phase de prototypage. Dans l'ensemble, nous pouvons commencer le processus de conception examinant la concurrence dans ce créneau, nous avons pour trouver l'inspiration. Nous devons voir ce que font les autres. Continuons donc dans le clip suivant. 10. Analyser les concurrents de l'application – Partie 1: Bienvenue à nouveau. À ce stade, le brief ne devrait pas rester un mystère. Si vous n'en avez pas encore parlé, mettez la vidéo en pause et analysez-la . La prochaine étape consiste à vérifier la concurrence de l'application pour voir ce qui se passe dans ce secteur en particulier. Nous avons ici un créneau assez bien établi, de livraison de nourriture qui sont applications de livraison de nourriture qui sont largement suffisantes pour être analysées. Ensuite, aidez-vous à mieux comprendre les exigences du projet et à vous inspirer pour le style général. Veuillez noter que ces applications sont basées sur la localisation. Ce que je vais vous montrer n'est peut-être pas disponible dans votre pays, mais vous avez plusieurs captures d'écran de chaque application jointes au cours. La gamme inclut toutefois The Liver, Food Panda, the Live, une application qui porte exactement le même nom, mais ce n'est qu'une coïncidence. À emporter, puis appuyez sur Menu. Désormais, tous les laboratoires sont constamment mis à jour, sorte que les versions en direct peuvent être différentes. En fait, je suis sûr que c'est différent. Néanmoins, les captures d'écran seront le point de référence. OK, commençons par le live pour pouvoir nous en sortir. Maintenant, l' écran initial est en désordre. Nous avons du jaune banque, du bleu marine et, curieusement, le bouton principal est également jaune. L'arrière-plan semble être une image de la ville, mais il est bloqué par ce rectangle plein, qui n'a aucun sens. Lorsque vous effectuez une recherche, même si vous ne comprenez pas ma langue, le roumain, vous pouvez constater que ce texte est de mauvaise qualité, très pixelisé et quelque peu déformé. Et c'est parce qu'ils ne contiennent pas réellement de couches de texte, officiellement appelées chaînes par codons. Il s'agit plutôt d'une image qui est étirée. C'est une mauvaise pratique et ce n'est pas du tout une bonne idée. OK, passons maintenant à la page de liste. Ici, on voit tout de suite le peu d'attention portée aux détails. n'y a aucun espace vide de chaque côté. Donc, si nous faisons glisser quelques lignes, vous pouvez voir que l'alignement n'est pas correct. La topographie est modeste, les polices sont ennuyeuses. n'y a aucune diversité dans cette région. Aucune hiérarchie particulière n' est facile à repérer. Au total, quatre sur dix. Et je suis généreux. Lorsque nous entrons dans le restaurant, nous pouvons voir que les onglets comportent ces séparateurs verticaux, ce que je n'ai pas souvent vu dans les applications Android. En plus de cela, il n'y a aucune élévation nulle part. Vous pouvez repérer n'importe quelle ombre. Ce n'est pas vraiment une mauvaise chose, mais cela n'a pas été le cas dans le département de design. Pire encore, le geste de balayage qui est souvent utilisé pour modifier rapidement les touches. Eh bien, ça ne marche pas vraiment. C'est un véritable choc. Au lieu de cela, vous devez appuyer manuellement sur ces éléments, ou nous pourrions utiliser ces flèches, qui datent de l'époque de Windows XP. Maintenant, honnêtement, je n'ai aucune idée de ce que ces gars pensaient. Il s'agit d'un excellent exemple d'application créée par des développeurs et des hommes d'affaires qui développeurs et des hommes d'affaires connaissent des designers impliqués Je vous promets qu' en haut à droite, envie de deviner ce que fait cette icône. S'agit-il d'informations supplémentaires sur le restaurant, peut-être d'une fonction de partage, d'un ajout aux favoris ? Et la réponse est : je ne sais pas. Quand je tape dessus, rien ne se passe. Il n'y a pas de Downstate, donc je ne suis pas sûr que cela fonctionne réellement. Mais en passant à autre chose, la caisse est également risible. Tout est assemblé au hasard. Je pense qu'ils voulaient centrer ces couches de textes, mais tout est faux. Quoi que vous fassiez, vous ne trouverez pas beaucoup de lignes imaginaires. Rien n'est aligné. Oh, et celui-ci livre l' icône et remporte le gâteau. J'ai changé d'avis. C'est deux sur dix, encore quatre. OK. Passons à Takeaway.com, une entreprise qui achète des applications de livraison de gauche à droite et ne nous bloque rien. Comme dans l'affaire Lives où vous ne pouviez rien voir à moins de saisir une adresse avec un S pour la position, pour obtenir l'autorisation GPS. Donc, l'application veut essentiellement savoir où nous et une liste de restaurants apparaîtra immédiatement. Maintenant, j'ai personnellement commandé beaucoup de plats, donc je suis une grande utilisatrice de ces applications. Takeaway n'en fait pas partie. Je n'aime pas ça et je vais te dire pourquoi. Tout est confus. Rien n'est ce à quoi je m'attendais. Bien sûr. La liste des restaurants est charmante. Jolis logos épurés sur la gauche. Effacez les titres en gras sur la droite. Des icônes intéressantes en dessous. Mais c'est là que s'arrête le Happy Train. Pouvez-vous me dire lequel de ces deux restaurants a la meilleure note ? Parce que si vous avez déjà utilisé booking.com, je pense que vous savez qu'il y a une énorme différence de qualité. Entre un hôtel 8,0 et un hôtel 8,9. Ou qu'en est-il d'IMDB ? Si vous aimez les films, optez pour un film 6,1 contre 6,91, jour et nuit. Ce que j'essaie de dire, c'est que 4,5 étoiles pour deux restaurants ne me dit rien. J'ai besoin de plus d'informations pour prendre une décision. N'oubliez pas que j'ai plus de 50 restaurants dans ma région. Ce système stellaire, sans aucune autre information, n' est donc sans aucune autre information, pas suffisant. Mais revenons au design pour le moment. J'ai adoré l'orange. Il brille vraiment et contient un bon zinc à ajouter. C'est frais. C'est saisir les icônes de Again, nice and lovely. Et nous avons un interrupteur intéressant qui modifie le fonctionnement de l'application, soit en mode Liberty ou en mode pick-up. C'est bien exécuté. Les polices utilisées ne sont pas extraordinaires. Et on peut en dire autant de leurs icônes, décentes, mais pas géniales. À l'intérieur du restaurant, tout est bien espacé. Mais curieusement, ils ont opté pour cette teinte bizarre pour la couleur Call to Action. C'est assez étrange. Il existe désormais un système d'onglets qui vous permet de passer d'une catégorie à l'autre comme le souhaite n'importe quel utilisateur mobile. Certains plats ont une description, d'autres non. En ce qui concerne les photos du plat. Même histoire. Maintenant, la caisse est vraiment terne. Beaucoup de séparateurs, beaucoup de gris, peu d'attention portée aux détails concernant la typographie. Mais faisons une pause sur le côté design. Ce serait un 6/7 sur dix dans mon livre, le problème, comme je l'ai dit au début, c'est la fonctionnalité. Il suffit de jeter un œil au système de cartes. C'est quelque part en haut à droite, mais pas dans la barre d'action. Non, c'est en fait un fabuleux bouton d'action flottant, donc il survole. C'est assez inhabituel. Le système Deb a des polices bien trop grandes, ce qui m'empêche de savoir ce qui est disponible dans le restaurant. Le menu de gauche se trouve en fait sur le côté droit. Il est également entièrement personnalisé. Maintenant, je ne dis pas que c'est une mauvaise chose, mais c'en est une autre à laquelle je dois m'habituer. Ces quatre icônes au-dessus de la liste des restaurants. Encore une fois, assez étrange. C'est une application qui n'a même pas compte les directives officielles de la conception des matériaux. Ils ne s'en souciaient pas du tout. Et j'ai l'impression que dans l'ensemble, l'application entre mes mains, c'est maladroit. C'est difficile à exprimer avec des mots, mais ça ne me convient tout simplement pas. Dans l'ensemble, il s'agit d'un bien meilleur design AB que le précédent. Mais je ne pense pas que je lui donnerais plus de cinq sur dix, peut-être six si je suis très généreux. Passons maintenant au menu d'aide, qui a une approche totalement différente. Tout d'abord, j'ai adoré le processus d'intégration, c'est-à-dire les premiers écrans qui vous renseignent sur l'application. Design élégant et épuré. Et une fois que vous entrez dans l'application, elle m'affiche une liste de restaurants en fonction de l'adresse que j'ai saisie. Maintenant, la liste est très facile à regarder. Mais il y a un problème de fonctionnalité. Vous n'avez aucun moyen de trier ces restaurants. Vous devez saisir chacun d'eux et voir de quoi il s'agit. Et c'est l'ambiance qui règne dans toute l'application. Vous devez appuyer beaucoup pour atteindre la ligne d'arrivée. Bref, beaucoup de clics, où certaines applications vous demandent d'arriver à la phase de paiement avec quatre onglets ou moins. Ici, ce chiffre est facilement doublé. Il faut beaucoup de travail. Lorsque vous appuyez sur une entrée, voici ce que vous obtenez. Encore une fois, joli design. C'est un huit et mon livre du point de vue du design. Voici le menu du restaurant. Nous avons une approche en deux colonnes, mais je ne suis pas sûr que ce soit le meilleur choix. Devrions-nous voir plus d'articles ? Mais la chance n'est pas si grande à cause de cette taille. C'est trop petit. Cela ne semble pas naturel. J'ai l'impression que quelque chose ne va pas. Et les polices ne sont pas encore prêtes. Tout semble assemblé. Maintenant, lorsque les plats sont accompagnés de photos, c'est un peu d'expérience, mais dans l'ensemble, c' est un mélange. Le bouton d'action flottant prête également à confusion. Je ne sais pas trop ce qui se passe avec ce bouton. Après quelques recherches, je pense que cela me permet de former un groupe, peu importe ce que c'est. En gros, il s'agit de commander avec vos amis. Mais pourquoi le placer si au premier plan ? Bref, le fond est un peu trop fort, le gris un peu trop foncé à mon goût. Il se démarque trop. Le système Dapp est assez beau et les icônes de l'ActionBar sont également intéressantes. C'est difficile à évaluer dans certains domaines, c'est un sept, peut-être même une aide. Dans les autres obligations, est-ce que ce sont les quatre autres pieds ? Maintenant, donnons-lui 6,5 et passons au foie. Mais nous allons le faire dans le prochain clip. Merci. 11. Analyser les concurrents de l'application – partie 2: Bienvenue à nouveau. Nous en sommes maintenant au foie. Alors, analysons-le et voyons si c'est une source d'inspiration. La première impression est excellente. La topographie est parfaite, elle a du caractère, elle ajoute de la valeur au design. C'est facile à lire. La prochaine chose que je remarque est le système de cartes horizontal utilisé pour mettre en valeur les restaurants. L'ombre est assez forte, étant donné que le fond semble être d'un blanc pur, mais je l'aime bien. En haut. Nous avons un certain type d'annonce, mais remarquez à quel point elle se place bien au-dessus de cette ligne diagonale. J'apprécie également la façon dont ils ont utilisé cette petite icône dans la zone de la barre d'action. Bien sûr, c'est de l'espace perdu, mais cela montre qu'ils s'en soucient. Tout est une question de marque et de s'assurer que vous savez que vous êtes dans leur application. Mais tu es alors le foie. En ce qui concerne l'annonce elle-même, j'adore la façon dont le délai de livraison est inscrit sur la photo. J'apprécie la hiérarchie de la liste. Je pense que c'est très bien exécuté. Nous avons le titre en gras, différentes balises dans une couleur délavée plus petite. Le délai de livraison est mis de côté et beaucoup de biens immobiliers ont été attribués en raison de son importance. Enfin, nous avons le système de notation et les pourcentages. Mais ce que j'adore vraiment, c'est cette touche de couleur sur les emojis. Maintenant, voici une autre façon de traduire le principe de hiérarchie dans la liste. Vous savez, avec la chance, vous pouvez facilement parcourir différents domaines et savoir ce qui est important et ce qui ne l'est pas. C'est le principe de la hiérarchie. Le contenu se distingue facilement , ce qui en fait une expérience inoubliable. Cela se sent sans effort. Maintenant, si nous revenons au live, nous pouvons voir que tout est pratiquement regroupé. Cela semble bondé et fondamentalement fade, ennuyeux sans aucun goût, même s'il contient peu près la même quantité d'éléments. Maintenant, pour en revenir au foie, cette application ne semble pas suivre les directives de conception des matériaux. En haut, il n'y a pas de système d'onglets, la barre d'action n'est pas irrégulière. Au lieu de cela, nous accédons à des listes déroulantes, qui sont très rares. Dans la dernière mise à jour. Ils s'en sont débarrassés et je suis heureuse qu'ils aient apporté ce changement. La taille des cartes est assez généreuse. Eh bien, cela améliore l' impact de l'application. Vous ne pouvez placer que des restaurants sur un seul écran. Et le second est un peu coupé. Maintenant, pour la petite ville, cela a du sens, non ? Mais pour les grandes villes qui regorgent de restaurants, ça va être assez difficile. En gros, après les six ou sept annonces, tu vas juste t'ennuyer. Maintenant, les photos font forte impression et c'est certainement la plus belle pièce du lot. Mais j'adorerais que cet espace soit un peu utilisé. verrons ce qui est possible lorsque nous commencerons à concevoir. Nous voyons également une barre inférieure, qui inclut la fonction de recherche. Maintenant, d'accord, plutôt bien. Ce qui est intéressant, c'est la palette de couleurs, blanc et Thiel, rien d'autre. Le contenu est laissé de l'éclat, probablement parce que les photos sont assez détaillées. C'est très intelligent. Et nous allons probablement faire de même dans notre propre design. D'autant plus que la plupart des restaurants ne proposent pas de belles photos de la nourriture. Dans la plupart des cas, les photos sont sombres, les planches sont occupées et les couleurs ne sont généralement pas flatteuses. Encore une fois, vous pouvez le voir en direct. La différence, c'est le jour et la nuit. Pour revenir à l'écran initial, nous avons un bouton d'action flottant étendu qui vous aide à le remplir. C'est bien exécuté, mais une fois que vous l'aurez appuyé, vous verrez un autre signe qui portera cette application à neuf icônes sur dix, sinon plus, qui correspondent à l'ambiance des abdos. Nous obtenons de belles icônes qui correspondent aux applications de Vibe. Jolies images en dessous avec un excellent contraste pour le texte. Effacer le bouton d'appel à l'action. Il n'y a pas grand-chose à dire sur le côté négatif. entrant dans la liste, En entrant dans la liste, nous voyons la photo du restaurant en haut et tous les éléments du menu se trouvent dans la liste déroulante. Pas de système de tabulation à proprement parler. Les polices utilisées sont agréables à regarder, vous pouvez donc facilement savoir de quoi il s'agit. Je n'aime pas Le fait qu'il n'y ait pas de vignettes pour les plats, autant plus qu'il y a assez de place sur le côté gauche. D'un autre côté, cela le rend assez aéré. ai l'impression qu'il y a suffisamment d'espace de lecture. OK, ajoutons maintenant quelque chose à notre panier et voyons comment cela se passe. OK, nous avons une barre autocollante en bas qui nous montre le panier actuel, et elle est séparée par une ombre en haut. C'est curieux que le bouton ait également une ombre. Je ne suis pas sûr d' être d'accord avec cela. Quoi qu'il en soit, le paiement est un autre point fort. Tout est facile à suivre et ils ont utilisé ces cartes intelligemment, un peu trop fort sur ce coup, mais bon travail quand même. l'ensemble, l'application est belle et c'est parce que ses éléments sont bien espacés. Leurs polices sont belles et intéressantes et le contenu est laissé à l'honneur. Neuf sur dix. Passons à Food Panda pour voir un autre article sur le même sujet. Ici, je reconnais immédiatement le même style coloré, et celui-ci est utilisé pour attirer l'attention de l'utilisateur. Si vous pouvez appuyer dessus, c'est une barre oblique rose rouge. J'aime bien ce style car il guide l'utilisateur sans le faire réfléchir. La première impression est qu'il s' agit de l'application la mieux conçue du lot, 9,5 sur dix. La principale différence entre celui-ci et le niveau réside dans l'atmosphère. C'est un peu plus convivial, même si c'est un peu plus professionnel, concentrons-nous sur la liste. Il se passe d'autres choses sous la photo. Cela semble donc un peu plus occupé que le foie des polices utilisées, accord, mais il leur manquait ce nœud spécial qui les distingue. Revenons rapidement au foie et vérifions le délai de livraison. Remarquez à quel point ces chiffres se démarquent, en particulier ceux. Idéalement, c'est le type de personnalité que je recherche dans mes polices de caractères. Food Panda possède également un bouton d'action flottant, probablement pour vous aider à payer. C'est assez clair. L'ActionBar est un élément essentiel de la façon dont cela doit être fait. Il est bien défini, il possède une hiérarchie appropriée, bien espacé. S'il y a une chose que j'aimerais ajouter, c'est que je n'aurais pas aimé que l'icône de recherche soit alignée à gauche sur le menu des hamburgers. Cela l'aurait rendu parfait. Pourtant, dans l'ensemble, c'est l'un des meilleurs que j'ai vus jusqu'à présent. Passons à la page de liste des restaurants. Ici, nous obtenons des onglets placés sous la photo principale du restaurant. Ça a l'air sympa. Il est fonctionnel, mais je n'aime pas le système stellaire tel qu' il est illustré ici. Je pense qu'il se perd. En ce qui concerne les articles réels, ce ratio de spécifications est un peu étrange. Les photos sont bien trop hautes et cela va poser problème dans la plupart des restaurants. Quand cette autre antenne apparaît. C'est autre chose, mais on pourrait dire qu'il s'agit d'en avion deux de base. Nous allons devoir trouver une bonne solution dans notre conception en fin de compte, aucune de ces options ne fonctionne pour moi. Livrer cela revenait simplement à abandonner l'idée de montrer une photo du plat. Mais dans d'autres Wireframe, nous le considérons comme une exigence. Dans l'ensemble. Cependant, il est attaché ou peut-être légèrement en arrière du foie. Disons que c'est le 9, peut-être un 8,5. Maintenant, je pourrais facilement continuer, mais je veux que vous exploriez vous-même certaines de ces applications ou que vous en trouviez des similaires. L'objectif est de comprendre comment ils ont essayé de résoudre divers problèmes. Je veux que tu me dises ce que tu aimes et ce que tu n'aimes pas chez eux. En résumé, les conclusions de cette conférence sont les suivantes. Nous devons utiliser une seule belle couleur dans notre application et laisser le contenu briller. Nous devons faire attention au rapport hauteur/largeur des photos dans la liste des restaurants. Nous avons besoin d'une belle police qui ajoute une touche de personnalité au design. Enfin, nous devons faire de notre mieux pour inclure au moins deux restaurants complets dans l'écran de liste initiale. Conseil : plus vous verrez d'applications, plus vous aurez d'inflammation. Ce processus devrait vous prendre au moins 2 heures, mais pour des raisons de temps, j'ai dû le raccourcir. prie. N'ayez pas peur d'être impitoyable dans vos commentaires. Votre objectif est de séparer chaque composant et de voir si c'est quelque chose que vous devez éviter. Ou au contraire, utilisez-le comme source d'inspiration. Prenez de nombreuses captures d'écran et mettez-les côte à côte pour pouvoir facilement faire des allers-retours. OK, continuons. 12. Créez la mise en page pour le premier écran: Bienvenue à nouveau. Avez-vous découvert la compétition par vous-même ? J'espère que vous avez parcouru plusieurs laboratoires sur votre propre téléphone, ou du moins vous avez regardé les captures d'écran que j'ai jointes à la conférence précédente. Maintenant, il est temps de démarrer Figma et créer un nouveau projet en cliquant ici Nous allons y aller plus bas, mais si cela vous pose toujours des difficultés, j'ai un cours plus adapté aux débutants sur Figma. Si vous ne parvenez pas à suivre votre deuxième visionnage, il vaut peut-être mieux suivre ce cours. OK, cliquons ici où il est écrit Sans titre et renommons le nom pour ajouter la livraison. Maintenant, procurez-vous le Frame Tool, touche de raccourci f, afin que nous puissions configurer le premier écran. Maintenant, les paramètres sont basés sur la conception du matériau jusqu' à la saisie, pour simplifier les choses, optez pour 720 par 12, 80, si ces valeurs proviennent de, eh bien, en gros, je double les valeurs de l'ancienne Samsung Galaxy S Alors. Maintenant, pourquoi Doublet ? Il sera donc plus beau lorsque vous le réviserez, lorsque vous l'enverrez à votre client, à votre client, avec l' autre code qui s'y trouve. Ainsi, vous pouvez tout voir bien et net sans avoir de lunettes dorées. C'est donc la seule raison pour laquelle nous doublons. Cela n'a pas vraiment d'importance pour le codeur ou pour le client. Ce n'est qu'une question visuelle, non ? Le processus de codage n'est en aucun cas affecté. Nous y reviendrons plus tard, mais croyez-moi, cela n' affecte rien. C'est juste une préférence visuelle pour 2020, 320-20-4720 par 12 80 c'est tout à fait correct. Ensuite, trouvez un cadre plus large attaché au cours et faites-le glisser dedans, importez cette commande Shift K ou ce que vous voulez faire. Placez-le sur le côté du premier écran. Idéalement, vous devriez toujours afficher sur le deuxième écran, mais je vais le conserver ici au cours de notre processus étape par étape. OK, alors quel est le but ? Eh bien, nous voulons mettre en place notre aménagement, la base de notre projet, sans aucun détail. Je ne répète aucun détail. Nous voulons que les rectangles et les couches de texte soient dans leur forme la plus simple après les premiers écrans, puis nous commencerons à expérimenter différentes couleurs, polices et détails. Commençons donc par le premier où nous aurons besoin du logo de l'application. Et bien sûr, il est rattaché à celui des Gore. L'icône n'est pas stylisée et ne contient aucun texte. Cela va donc nous aider à le maintenir en phase avec le reste du design. C'est donc une bonne chose. Je vais le centrer et le placer dans aucune position particulière en haut de l'écran. Ensuite, nous allons ajouter le champ de localisation pour créer un rectangle. raccourci, cliquez et faites glisser. Lorsque nous recherchons des tailles spécifiques, utilisez le panneau des propriétés sur le côté droit. Pour celui-ci, disons 600 pour la largeur, quelque chose comme ça. C'est le W ici. Et pour la hauteur, prenons 80 pixels, quelque chose comme ça, des estimations approximatives. Ce n'est donc pas la taille finale, car elle intervient plus tard dans la phase de coiffage. OK, je vais toujours centrer tout ce qui se trouve dans le cadre selon la commande aligner les centres horizontaux. Ça y est, juste ici. S'il te plaît, habitue-toi. Et ces autres, ici, sont tes nouveaux meilleurs amis. Nous allons les utiliser beaucoup à peu près chaque fois que nous faisons quelque chose dans le cadre. Pensez donc à les utiliser. Transformez le rectangle en gris très clair en utilisant la zone de remplissage du panneau des propriétés. Nous voulons un excellent contraste pour la couche de texte. Si vous utilisez un ordinateur portable ou un appareil à basse résolution, n'oubliez pas que ce panneau est défilable. OK, prenez le raccourci clavier D de l' outil et écrivez entrez votre position. C'est donc entrer votre position. Pouvons-nous maintenant utiliser fonctionnalités plus avancées que Figma a à offrir ? Bien sûr, totalement. Mais encore une fois, ce n'est pas la bonne scène pour ces choses sophistiquées. Nous allons garder la police de base, la taille. Réglons ce paramètre sur 20 et centrons-le dans ce champ. En gros, l'idée est que nous créons réellement le wireframe, mais que nous pouvons modifier tous ces champs. Sur le côté droit. Ajoutons un autre texte qui dit GPS. Utilisez le contrôle D pour créer un doublon. Placez-le sur le côté droit. Maintenant, pourquoi pas une icône ? Parce que nous ne voulons pas interrompre ce flux. Une icône est un petit détail de design. Et ce n'est pas ce sur quoi nous travaillons en ce moment. D'accord, nous avons besoin d'un bouton d'envoi, alors saisissons juste cet envoi. Utilisons Shift a pour ajouter une mise en page automatique cette fois-ci avec au moins une fonctionnalité sophistiquée, non ? Je vais activer n'importe quel remplissage gris. Maintenant, vous vous demandez peut-être si nous aurions pu utiliser le cadre pour le champ de localisation sur la mise en page automatique ? Oui, bien sûr. Mais il y a encore un peu plus à déballer là-bas. Je préfère le garder sous forme de rectangle standard afin que nous puissions nous concentrer sur l'ensemble de la taille du bouton. Changeons ce champ à 90. Cela le rendra beaucoup plus large. Et pour la hauteur 20, lorsque vous en aurez terminé, centrez-la à l'intérieur de l'écran. Je vois que sauter cette étape est la suivante, mais nous pouvons avoir une simple couche de texte pour cela. N'oubliez pas de cliquer sur Escape pour terminer de modifier votre couche de texte, cet élément n'aura pas de bouton, il n'aura pas de rectangle car nous avons un ordinateur portable nous en avons besoin d'un autre pour le compte Creighton. Passez au-dessus du bouton d'envoi, maintenez la touche Alt enfoncée et faites glisser la copie vers l'extérieur. Une chose cependant , recherchez ce symbole sur votre curseur, pas celui-ci. Cela ne va pas aider. C'est donc ce que tu cherches. Maintenant, faites-le glisser vers le bas et modifiez le texte pour créer un compte slash login. Il s'agit donc de créer un compte Slash Login. Et comme d'habitude, vous allez devoir sélectionner le cadre et le centrer, pas les textes. Au fait, le texte fait partie du cadre et il est déjà centré. Non. Au lieu de cela, vous voulez que ce cadre centré dans le grand cadre, que j' appellerai généralement un écran. Maintenant, si vous ne l' obtenez pas à 100 %, ne vous inquiétez pas, c'est très bien. La chose est assez simple. Si vous cliquez avec le bouton droit de la souris sur la couche, vous ne pourrez pas utiliser ces outils d'alignement. C'est donc un signe clair que vous n'avez pas sélectionné le cadre. Mais maintenant, quand je fais ça, ils sont allumés. Nous pouvons les utiliser. Génial Donc, dans l'ensemble, il s'agit de notre premier écran géré. Continuons après une courte pause. 13. Configurer la base de l'écran d'accueil: Bienvenue à nouveau. Vous pouvez appeler le deuxième écran, l'écran d'accueil, car c'est ce obtenez généralement lorsque vous ouvrez l'application, en supposant que vous vous connectez, puis en effectuant un zoom arrière en maintenant la touche Ctrl enfoncée et en utilisant le défilement de la souris, puis faites de la place et dupliquez l'intégralité de cet écran. S'il y a de la place, Figma le placera automatiquement sur le côté droit lorsque vous utiliserez Control the Awesome. Supprimez maintenant tout ce qu'il contient , sauf le champ de localisation. C'est une bonne occasion de se souvenir de nos proportions. La barre d'état, selon Google Material Design, doit donc être de 720 sur 48. Alors, procurez-vous l' outil rectangle et ajoutez-le. Encore une fois, 720 est la largeur standard doublée, et 48 provient du guide officiel. C'est 24 dB, mais encore une fois, nous l'avons doublé, donc c'est là que nous avons quoi ? Nous allons le laisser vide, recadrer n'importe quelle couleur aléatoire et le positionner correctement en haut. Pour le champ de localisation, nous pouvons utiliser celui-ci pour créer la barre d'action, faire glisser vers le haut avec ces couches de texte, et nous allons le redimensionner à 720, bien sûr, par 112. Cela fait donc 112 pixels. Assurez-vous de changer la couleur si nécessaire. Nous voulons les voir comme deux choses distinctes. Même si à la fin, nous pouvons les avoir de la même couleur, nous voulons qu'ils soient séparés pour le moment. OK, maintenant nous allons gérer les couches de texte. Nous allons donc avoir besoin du filtre et de la recherche par ville. Donc, filtrez et recherchez par ville. Le premier est pour le côté gauche, tandis que les deux autres pour le côté droit. C'est une situation dans laquelle vous vous trouvez, la vitesse est très importante. Tu vois, il n'y a rien de trop difficile ici, mais cela prend du temps. C'est pourquoi vous devez vous entraîner et prendre ces mesures au sérieux. Vous ne pouvez pas faire des choses avancées si vous ne maîtrisez pas les bases comme celles-ci ici. Pour la liste déroulante, utilisons l'outil polygone. L'un des rares cas où vous pouvez réellement le faire fonctionner, maintenez la touche Shift enfoncée et commencez à faire glisser le pointeur. Maintenant, cela va vous donner un rectangle parfait en maintenant la touche Shift enfoncée. Déplacez ensuite votre curseur sur le côté pour le faire pivoter. En gros, nous voulons que le point soit pointé vers le bas. Je n'ai pas de taille particulière en tête, juste assez petite. Maintenant, ok, ça a l'air bien. Maintenant, ça devient intéressant. N'oubliez pas que nous voulons afficher autant de restaurants que possible sans surcharger et encombrer tous les éléments. Commençons donc par un rectangle de 600 x 400 pixels. Comme cela couvrira la majeure partie de la largeur de l'écran. Et nous aurons également un rapport hauteur/largeur décent pour commencer. Maintenant, la taille réelle sera définie plus tard. OK, placez-le juste en dessous de la barre d'action. Pour le contenu. Nous allons en utiliser un faux, mais pas du Lorem Ipsum. C'est donc un texte latin. Lorem ipsum ne fait que remplir des textes latins. Je vais donc trouver moi-même quelque chose pour le titre, avec le dessert à côté. Jouons quelque chose comme ça. Délai de livraison, peu importe, 30 min. Hein ? En ce qui concerne la catégorie, le brief indique qu'elle est double. Il y en a donc un pour le type de nourriture , puis un autre pour le type de cuisine. Je ne suis pas sûr que cela ait du sens pour moi, mais c'est ce que c'est. Donc, le premier devrait être Desert et le second international, je suppose. Encore une fois, cela n'a pas vraiment d'importance. Nous voulons simplement fournir quelques informations. Nous avons donc quelque chose sur lequel travailler pour la notation. Allons-y avec n'importe quoi, 92 % des 24 votes. Cela va donc couvrir tous les éléments en fonction du wireframe et du brief. Veuillez donc tout sélectionner comme ça et voir si nous pouvons en placer au moins deux sur un seul écran. N'oubliez pas qu'il s'agit d'une exigence importante. Et en effet, dans ce cas, nous pouvons accueillir deux restaurants entiers, même s'il ne s'agit que d'un brouillon. Rien à ce sujet, c'est précis. Il faut donc le prendre avec un grain de sel. Maintenant, résumons les choses. Jusqu'à présent, nous avons recréé les deux premiers écrans à partir du wireframe dans le but d'avoir quelque chose avec lequel travailler. Au cours des prochaines conférences, nous avons parlé de la prise de conscience de l'impact de nos décisions. Plus précisément, sur ce à quoi ressemblera l'ensemble de l'application lorsque nous aurons des bacs d' écrans avec une sortie puissante. Je te verrai dans une seconde. 14. Décrivez l'écran de détails du restaurant: Bienvenue à nouveau. Nous devons passer à l' écran détaillé du restaurant étiqueté numéro trois, où tous les plats sont répertoriés. Alors, sans plus attendre, mettons-nous au travail. Donc, Copy les a filtrés, mais fais-le. Et commençons par une approche de haut en bas en remplaçant le titre par n'importe quel nom de restaurant aléatoire. Disons que c'est principalement la livraison de pizzas. Cela semble assez italien, non ? La plupart des pizzas livrées, le menu déroulant et le filtre doivent être supprimés, mais nous conserverons le dernier et le renommerons. Cela devrait indiquer une inflammation. Ce sera aussi une icône, mais ce sera plus tard. Lorsque vous cliquez dessus, vous obtiendrez l' écran 15 de l'adresse du restaurant et l'écran 16 des vues. C'est donc ce qui va se passer lorsque vous cliquez sur l'inflammation. Comme je l'ai dit, nous n'avons pas besoin d'une icône pour le moment car nous n' en sommes qu'à ses débuts. D'accord, si nous examinons le wireframe, nous pouvons voir que nous avons quelques onglets, mais on ne sait pas s'ils sont fixes ou défilables. Nous allons commencer par une version fixe et je vais utiliser quelque chose comme le petit déjeuner, le déjeuner et le dîner comme principaux articles. Maintenant, cela signifie que la conception de l'onglet, donc un rectangle de 240 pouces de large , sera nécessaire pour l'élément actif, car encore une fois, cela fait deux pour t fois 3720. OK, copions la barre d'action et réduisons sa taille à 96 pixels. Bien sûr, veuillez changer sa couleur pour que nous puissions voir ce qui se passe maintenant pour revenir à la taille pour le moment. Le 96 est donc assez grand du point de vue de la convivialité, mais suffisamment petit pour ne pas prendre trop de place. Il s'agit également de la valeur recommandée et du guide officiel, 48 dB. Supprimons les listes ci-dessous car nous n'en avons pas besoin. Nous créerons la première couche de texte après avoir défini notre rectangle qui indique l'élément de menu actif. Alors, saisissez l'outil rectangle, cliquez sur une entrée de 40 x quatre pixels. Utilisez le panneau des propriétés pour cela. Vous pouvez donc le laisser vide pour l'instant, totalement noir, mais assurez-vous de le placer correctement en bas de l'arrière-plan de l'onglet, sur le côté gauche, bien sûr. Maintenant, comme il s'agit d'un onglet fixe, nous allons devoir intégrer des couches de textes visuels. Donc, pas un seul avec trois , mais des repas individuels, et le premier sera le petit déjeuner. Il doit être écrit dans la police par défaut. Peu importe son apparence. Mais si nécessaire, vous pouvez changer la couleur pour voir ce qui se passe. Nous pouvons maintenant l' aligner rapidement en le sélectionnant côté de la couche située en dessous. Cela gère donc l'alignement horizontal. Juste comme ça. La couche verticale désélectionne puis saisit la couche de texte avec l'arrière-plan principal, puis utilise la commande d'alignement vertical, comme ça. Cela va donc nous donner un résultat parfait au pixel près, même si vous ne pouvez pas vraiment le voir. Le truc, c'est que je n'ai jamais décalé la couche de texte à cause de cette quatrième couche de pixels ici, qui gâcherait beaucoup les choses, alors s'il te plaît, ne le fais jamais. OK, maintenant, les autres objets seront un jeu d'enfant, dupliqués avec Alt et Shift, puis réétiquetés en tant que centre déjeuner à l'intérieur de l' écran avec des centres horizontaux alignés. Génial. Enfin, pour le dîner, nous devons répéter le processus, mais voici ce que nous allons faire. Nous allons maintenant déplacer temporairement l'onglet actif vers la droite. Nous allons l'aligner ainsi. C'est donc là que le cadre est vraiment utile. Nous pouvons déplacer rapidement ce type sans aucun problème, sans avoir à sélectionner quoi que ce soit d'autre. OK, maintenant nous pouvons évidemment le déplacer puis l'aligner de manière soyeuse. Jusqu'à présent. N'oubliez évidemment pas de travailler votre deuxième visionnage pour une meilleure expérience d'apprentissage. Il y a beaucoup à faire. Et si nous ne maintenons pas une base décente, ce seront des jauges. OK, remets-le sur le côté gauche et on pourra continuer. Regardons une fois de plus le wireframe. Gardez à l'esprit que ce n' est pas la fin de notre conception. Nous pouvons expérimenter différents journaux si nous avons des idées. Mais pour l'instant, nous allons faire preuve simplicité dès le premier essai. Dans cet écran spécifique, cela signifie une mise en page d'une seule carte. Si cela ne nous satisfait pas, nous pouvons essayer une approche différente. Bien que. Je n'ai vraiment pas aimé le design à deux colonnes que nous avons vu dans la vidéo précédente. Nous devons maintenant créer un dossier d'images. Commençons par cela. Un support d'image ou une vignette pour chaque élément. Je pense que cette forme doit être un peu carrée, probablement un peu large. Commençons donc par un rectangle normal dont la taille est, disons, 225 x 1AD. Comme je l'ai dit, il n'est pas carré, mais il n'est pas trop haut parce que nous l'avons vu, il n'est pas très beau. Placez-le à 30 pixels des touches. L'essentiel de cette image est le rapport hauteur/largeur. N'utilisez pas quelque chose d' extrême qui oblige les restaurants à vous proposer des photos très grandes ou très grandes. Ça va poser problème. Mais souvenez-vous que le foie et Food Panda n'avaient pas un bon système en place. Attendez le titre et la description. J'ai quelque chose préparé dans un bloc-notes. Le titre peut être un airbag. Eh bien, pour l'instant, encore une fois, cela n'a pas vraiment d'importance, mais utiliser quelque chose d'authentique a un peu plus de sens. La description doit être une couche de texte de paragraphe. Alors cliquez et faites glisser. Parce que nous voudrions peut-être modifier le contenu rapidement. Les lignes devraient suffire mais nous pourrions les réutiliser uniquement pour le faire. Nous verrons si vous souhaitez utiliser un texte factice. Je recommande lipson.com. C'est le meilleur endroit pour cela. Ce sont de faux textes latins qui ne font que remplir cette zone. D'accord. Pour en revenir à la liste, nous devons avoir un prix, disons 14 dollars. Ce sera la troisième ligne de cette liste. Nous avons donc le titre, la description, puis le prix. À côté du prix, mettons le poids du produit, qui est mentionné dans le brief. Écrivons donc les 150 g, accord, et juste à côté, nous aurons besoin d' un texte d'ajout au panier. Mais ce sera probablement un bouton, peut-être une icône. OK, donne-moi une seconde pour tout régler. J'aime tout aligner avec précision, même si ce n'est pas absolument nécessaire pour le moment. Idéalement, nous voulons suivre un chemin imaginaire clair. Ce que l'utilisateur va faire, c'est regarder la vignette plutôt que le prix, puis le titre, puis le poids du produit, puis il va cliquer sur Ajouter au panier. Sûrement quelque chose dans ce sens. Nous allons donc essayer de faire en sorte que cela se produise en termes de taille et de couleur. Même si les choses sont à peu près regroupées. Enveloppons les choses avec un séparateur. Nous pouvons utiliser le raccourci L de l' outil linéaire La largeur doit être de 656. Vous allez beaucoup entendre cette valeur. Et j'expliquerai pourquoi c'est le cas un peu plus tard. Hauteur en pixels. Il doit être placé à 30 pixels de la photo, à partir de la miniature. Ok, c'est fait. Regroupons-le donc et nous allons en faire de nombreuses copies. L'idée est de remplir tout l'écran de clones pour voir où nous en sommes. Nous avons une meilleure idée des choses en cherchant simplement à voir combien nous pouvons en contenir. Idéalement, nous voulons des sous-produits, mais avec environ quatre produits et un peu, maintenant, je peux vivre avec ça. De plus, nous pourrons peut-être gagner plus d'espace lorsque nous commencerons à affiner la mise en page. En attendant, faisons une petite pause. Merci. 15. Concepts de conception pour l'écran de localisation (1): Bienvenue à nouveau. Il est temps de passer à la conception d'une application de livraison de nourriture . Nous avons quelques écrans solides qui attendent votre attention. Commençons donc par l'écran de localisation intitulé numéro un dans le wireframe. Et la première idée que je veux essayer en tant qu'image d'arrière-plan complète, qui est un choix populaire dans ce créneau. Pour trouver de superbes photos, totalement gratuites, utilisez unsplash.com. Si le projet dispose d'un budget décent, vous pouvez également utiliser Adobe Stock, ce qui est absolument fantastique. Mais restons-en à la version gratuite. Ici. Nous cherchons de la nourriture et nous allons télécharger tout ce qui suscite ou intéresse. Idéalement, une image vue de dessus sera probablement plus belle, mais je vais garder l'esprit ouvert à ce sujet. Une fois que je vois quelque chose d'intéressant, je vais appuyer sur le bouton Télécharger. Le processus est donc simple. Choisissez plusieurs photos et enregistrez-les sur votre ordinateur. J'en ai déjà sélectionnés, donc je ne vais pas vous faire perdre votre temps, mais je vous promets que je les ai choisis exactement comme je vous l'ai dit. Je les ai étiquetés de 1 à 6, afin que nous puissions facilement travailler à nouveau ensemble lors de votre deuxième visionnage. Maintenant, tu peux les intégrer dans Figma, mais il y en aura beaucoup, ce n'est pas une bonne façon de travailler. C'est donc ce que je propose. Prenez l'outil rectangulaire et ajoutez-en un au cadre, taille aléatoire, rien de particulier. Ensuite, à partir du panneau des propriétés, rendez-le aussi grand que le cadre, 720 x 12 x 80, alignez-le à gauche et en haut de manière à ce qu'il couvre tout. Maintenant, c'est parce qu'il se trouve au-dessus de toutes les autres couches. Les effets qui s'affichent dans le panneau Calques surlignés, ce qui permet de cliquer dessus et déplacer vers le bas à la dernière position. Nous allons utiliser ce rectangle pour placer nos images à l'intérieur. Pour cela, nous allons utiliser Control Shift K. Mais si vous n'aimez pas ce raccourci, cliquez ici. C'est ici, contrôle de Place Image changera de porte. Cela va ouvrir une fenêtre de navigateur et vous pourrez rechercher les photos téléchargées. Je les sauvegarde toujours sur mon bureau pour pouvoir les retrouver rapidement. OK, essayons l' image numéro un. C'est là que la magie commence à opérer lorsqu'il s'agit de rechercher une image intéressante offrant un bon contraste entre le logo et toutes les autres actions disponibles à l'écran. Rappelez-vous donc que le mot montre plusieurs assiettes de spaghettis et quelques verres de vin. C'est donc conforme à l'application, à l'ambiance. Maintenant, la première question est si le logo serait blanc ou de couleur unie ? Si nous optons pour le blanc, va falloir assombrir cette image. Si nous voulons en faire une couleur unie par rapport à l'arrière-plan, il faut que ce soit aussi simple que possible. Voyons donc de quoi il s'agit. Nous allons d'abord faire une superposition de couleurs, pour ainsi dire, pour l'opacité, je suppose que 50 % environ, cela devrait nous donner un contraste décent. N'oubliez pas que l'idée est de tester les choses, pas d'avoir une chance parfaite. Maintenant, rendons le logo blanc. Il s'agit d'un autre PNG, plutôt d'un SVG. En bref, cela signifie que nous pouvons redimensionner sans perte de qualité. De plus, nous pouvons modifier le remplissage directement depuis le panneau Propriétés. S'il s'agissait d'un PNG, nous ne pourrions pas le faire. Donc c'est sympa. OK, c'est plutôt bien. Maintenant, ce que la plupart des débutants ne comprennent pas, c'est que logos n'ont pas besoin de vous frapper en pleine figure comme un sac de briques. Il suffit de penser à ce que nous avons fait, même si sur l'écran initial de la liste, ils utilisent la mini-version de leur logo. OK, revenons à notre design. Un arrière-plan sombre est logique, autant plus que le champ de texte d' autant plus que le champ de texte sera probablement blanc. C'est logique. Faisons en sorte que cela se produise. Nous allons augmenter le rayon des coordonnées du rectangle à cinq pixels pour le rendre un peu plus beau. Un carré un peu plus moderne, les coordonnées sont très 2005. Maintenant, pour les boutons, nous allons faire les mêmes cinq pixels, mais nous allons leur donner peut-être un vert vif, quelque chose comme ça. Juste pour voir à quoi ressemblerait un appel à l'action irrégulier. Prenez votre temps et essayez de découper quelques coordonnées en échantillonnant des couleurs ici et là, tout en utilisant le panneau des propriétés sur plusieurs couches. L'idée est d'être le plus rapide possible, accord, avec les nouvelles couleurs, nous devons changer les couches de texte en blanc. Et n' oubliez pas de sauter cette étape. Il est là, mais vous ne le verrez peut-être pas très bien. Il change donc également de couleur, peut-être sa position ou les deux. Et qu'en bas de l'écran, ça pourrait être un peu plus beau. Essayons donc ça. L'idée est donc que nous ne pouvons pas juger de cette chance parce que nous devons la comparer à autre chose. Sans oublier qu'il ne s' agit que de grands traits sans faire encore de petits détails, juste des mouvements rapides. Nous cherchons donc la direction générale. Et une fois que nous avons quelque chose en tête, après avoir constaté que cela a l'air plutôt bien, nous pouvons revenir et l' affiner à la perfection. Il se peut donc que le logo doive être légèrement surélevé, mais pas trop pour qu'il touche le bord supérieur. Utilisez le Type Tool et écrivons le live directement sous la Fed afin d'avoir une meilleure idée du formatage. Conservez la police standard, mais mettez-la en gras. Voyons voir, 60 ans. Donc assez sac. D'accord, cela peut fonctionner, mais centrons-le et essayons d'autres images dans cette version. N'oubliez pas que le raccourci clavier est Control Shift gay. Mais vous pouvez d'abord sélectionner le rectangle inférieur, maintenir la touche contrôle et cliquer dessus. Juste comme ça. Nous pouvons maintenant utiliser touche Control Shift pour sélectionner la deuxième image. OK, mettons la deuxième photo et vous remarquerez que la superposition noire va disparaître. Pas de soucis. Nous pouvons toujours avoir une idée de ce qui se passe. Nous pourrons le remettre en place plus tard. Donc, la photo numéro deux est un peu trop vide pour fonctionner. Nous avons besoin de quelque chose de riche, d' extravagant et d' intéressant à regarder. Cet écart en bas à gauche ne va pas disparaître, ce n'est pas une bonne chose. Passons donc à la photo numéro trois. OK, jetons un coup d'œil. C'est ce que certains amis mangent ensemble. C'est donc un très bon concept. Mais le rapport hauteur/largeur n'est pas très bon. Nous perdons donc une grande partie de la photo. Ce qui se passe n'est pas très clair. Cela pourrait fonctionner, mais je n'en suis pas certain. Essayons l'image numéro quatre. Voyons donc de quoi il s'agit. Cela fonctionne vraiment. Et je pense qu'il coche toutes les bonnes cases. Je pense que c'est un bon choix et qu'il se démarque immédiatement. Elle offre une vue de dessus. Il propose une nourriture multicolore intéressante. La table en bois a une agréable sensation de confort. Plutôt bien, plutôt bien. Mais ne nous arrêtons pas encore. Continuons. Donc, photo numéro 5. D'accord. Cela fonctionne bien. Encore une fois, c'est plutôt bien, mais je pense que le précédent est un peu meilleur. Le principal problème ici est la nourriture présentée. C'est une salade aux œufs, où une grande partie du public attend une nourriture de bonne qualité. Nous ne parlons pas de rencontres avec direction, nous ne parlerions pas de cuisine raffinée. Cette salade aux œufs n'est donc pas le bon look pour ça. que les hamburgers me conviennent un peu mieux. Ensuite, l'image numéro six. Cela a l'air riche et copieux, mais je n'aime pas la nourriture elle-même. C'est trop axé sur les desserts. Nous voyons quelques œufs sur la face supérieure, mais il semble que l'on penche davantage vers les desserts que vers les sucreries. Nous pouvons le conserver en tant que sauvegarde, mais option pour semble la meilleure jusqu'à présent. Ramenons-le donc. OK, lorsque vous êtes prêt, veuillez ajouter la superposition noire en appuyant sur le symbole plus. Encore une fois, 50 %. Je pense que c'est très bien. Nous avons ici un assez beau contraste. Maintenant, cela soulève la question suivante : que pourrions-nous faire d'autre ici ? Eh bien, la seule idée qui me vient à l'esprit est un fond blanc pur ou peut-être un motif subtil. C'est peut-être une couleur blanc cassé, peut-être un gris clair. Maintenant, je ne vais pas le faire parce que les applications qui sont abondantes et blanches sont généralement haut de gamme. Pensez au restaurant étoilé Michelin avec un grand nom de la mode, des produits similaires. Ce sont les marques qui peuvent proposer un design minimaliste avec beaucoup de blanc et juste une touche de couleur. En conclusion, pour l'instant, nous allons nous en tenir à cette quatrième photo conceptuelle , puis à la superposition de 50  % En fonction de ce qui se passera sur les prochains écrans, nous pouvons revenir et l' affiner design. Je te vois dans une seconde. 16. Concepts de conception pour l'inscription de restaurant (2): Bienvenue à nouveau. Passons à l'écran de liste des restaurants, qui est la deuxième chose qu'ils utilisent vont voir que c'est l'un des écrans les plus importants de l'application. Nous devons donc expérimenter différents looks. Dès le départ. Je veux voir une version sans fond, d'un blanc pur et d'un gris clair qui contrastera bien avec notre annonce. J'ai eu ces idées en faisant des recherches sur la concurrence. Et ce sont deux styles très courants. Donc, en gros, blanc et gris clair. Commençons par le contenu réel. J'ai préparé cette image d'œufs de banque pour l'image de couverture du restaurant. Je vais le placer dans ce rectangle en utilisant Control Shift K, mais nous devons parler de chiffres ici. Les directives officielles de conception des matériaux indiquent que nous avons besoin de 16 dB de chaque côté, soit 32 pexels dans notre cas. Faisons le calcul. 720, la largeur du cadre -64, les deux de chaque côté, soit 656 pixels. Voici donc nos rectangles avec les mêmes que nos séparateurs après l'UE. Les tailles indiquées dans le panneau des propriétés, tailles indiquées dans le panneau des propriétés veuillez vous concentrer une fois de plus, c'est toujours une étape très nécessaire. Il sera probablement plus beau avec des coordonnées légèrement arrondies. Nous allons donc utiliser cinq pixels pour le rayon des coordonnées. Appuyons sur Shift R pour pouvoir ajouter des guides. Ils ne sont pas absolument nécessaires, mais je pense qu'ils pourraient aider. Nous pouvons maintenant faire glisser les guides depuis le côté gauche de l'écran. Juste comme ça. Pendant que nous y sommes, supprimons la deuxième entrée. Nous n'en avons pas besoin. D'accord, parlons donc de hiérarchie. Nous avons pas mal d'articles ici. Et la question est : laquelle est la plus importante ? Maintenant, je vais devoir dire le titre, mais la note est très proche, car c' est la principale valeur de l'application. Vient ensuite le délai de livraison, qui est certainement un facteur décisif. Enfin, à la quatrième place, nous aurons probablement les étiquettes liées au type d'aliment. Ils peuvent donc être rapidement utilisés pour filtrer des types d'aliments et des cuisines similaires. L'utilisateur peut appuyer dessus sur l'un ou l'autre d'entre eux, et la liste se rechargera probablement avec ce filtre particulier appliqué en parlant de l'importance, car c'est ainsi que ces éléments doivent être stylisés et placé, cela l'impacte vraiment. C'est donc la hiérarchie. Donc, pour la première version, et je voulais mettre l' accent sur la première version, je vais placer le titre et la note sur la même ligne en raison de ce dont nous venons de parler, raison de leur importance. Les étiquettes peuvent occuper la deuxième ligne. Et j'aimerais essayer de placer le délai de livraison quelque part sur la photo, comme nous l'avons vu dans l'application Food Bandar's. Déplaçons également cet élément entier de 32 pixels depuis la barre d'action. C'est si vous ne l'avez pas déjà fait. Désormais, chaque fois que l'on cherche la symétrie, cela donne au design un aspect encore plus raffiné. Clients, je ne vous dirai jamais : « Hé, vous savez, la distance de chaque côté est de 44, mais en partant du haut ». Mais croyez-moi, le client le saura. OK, maintenant pour le titre, faisons en sorte qu'il soit de quatre pixels d et en gras, la police par défaut convient parfaitement si vous recherchez une idée approximative. Ce ne sera pas la police principale. Je peux vous assurer que j'essaie juste de voir si cette importance a du sens. Alignez donc le titre avec le guide de gauche et laissez environ 20 pixels entre celui-ci et l'image de couverture. Pour le délai de livraison, je pense que je vais placer un rectangle noir en haut à gauche de l'image de couverture. Sa taille ? Eh bien, quelque chose comme 140 x 50 parce que je n'ai pas l'intention de garder cette couche de texte telle quelle. C'est bien trop large, trop long. C'est donc un endroit où nous pouvons changer les choses pour améliorer un peu notre vie. Je vais le réduire à 30 minutes au lieu de quelques minutes. Et je pourrais même ajouter l'icône de l'horloge à côté ultérieurement. Nous pouvons maintenant nous assurer qu'il est bien positionné et trié. Nous devons changer les choses dans le panneau des couches afin d' avoir le bon ordre. Mais c'est assez facile à faire. Une fois que vous vous serez habitué un peu plus à Figma, vous pourrez commencer à jouer avec les raccourcis clavier. Et cela va beaucoup t' aider. Pour l'instant. faire manuellement est tout à fait normal. Ensuite, diminuons l'opacité des rectangles à 30 %, disons. Cela va vraiment nous aider. Mais la question est de savoir si cela doit rester blanc avec un texte noir dessus ou vice versa. Maintenant, je pense à un rectangle noir où c'est un peu mieux Essayons-le. Passons donc du blanc au noir, évidemment sans bordure. Et puis passons à la couche de texte. Il doit être blanc, mais changez-le en demi-gras pour qu'il ressorte un peu plus. Lorsque vous avez terminé, sélectionnez-les tous les deux, encouragez-les si vous ne l'avez pas déjà fait horizontalement et verticalement, cet objet doit être placé en haut à gauche, droite, Mais pourquoi là et pas ailleurs ? Eh bien, j'ai vu d'innombrables applications utiliser cet emplacement, donc je vais simplement suivre cette ligne. est facile, ça n'a rien d'extraordinaire. Si la plupart des étapes consistent à procéder de cette façon, faisons de même. Maintenant, les balises peuvent rester telles quelles, mais nous allons les aligner à gauche avec le titre. C'est assez facile car nous avons ce guide pour la distance, encore une fois, de 20 pixels entre eux. Je pense que c'est très bien. En fait, faisons-en un gris moyen , un peu comme le 777. Maintenant, un code hexadécimal comporte six caractères, mais si vous renseignez les trois premiers, le programme saisira automatiquement les trois. Pour ce qui est de la note, je veux quelque chose de similaire à Deliver Drew. Un smiley est de mise. Lab icon.com est maintenant le meilleur endroit pour les icônes. Mais sachez que la plupart des icônes nécessitent un abonnement. Je ne vais pas vous montrer comment je recherche le Smiley car il n'y a rien de spécial, mais vous l'avez attaché au portail. Voici le résultat final. Vous voudrez peut-être savoir comment choisir de superbes icônes, mais nous y reviendrons plus tard. Pour la taille, 40 x 40 est une bonne solution. D'habitude, j'opte pour la taille la plus petite, mais c'est un Eigen plutôt content. J'aime bien ça. Alors pourquoi ne pas le mettre en valeur ? Ils ont dit qu'ils étaient à dix pixels du texte. Au fait, je pense qu'il vaut mieux mettre le pourcentage en gras et vert parce que c'est la partie la plus importante et la liste, elle entre dedans plutôt que la ligne, tout bien. Conservez ces deux éléments sur la même ligne que le titre, mais faites en sorte que l'élément touche le côté droit. D'accord, nous faisons de grands progrès. Mais il n'y a rien à redire pour l'instant. N'oubliez pas qu'il ne s'agit que de la première version. Mais occupons-nous de la partie supérieure, parce que ça me dérange vraiment. Je veux juger du design de la carte sans aucune distraction. Et ces rectangles gris ne sont pas très beaux. Nous allons donc traiter cela dans la vidéo suivante. 17. Configurer la barre d'état et la barre d'action: Bienvenue à nouveau. J'ai aimé le juge du design dans son contexte. Maintenant, pourrions-nous tout isoler et nous concentrer uniquement sur cette carte, le prêt sur cette annonce ? Bien sûr. C'est possible, mais pourquoi le ferions-nous ? C'est pourquoi je souhaite gérer la barre d'action et la barre d'état afin de tout voir dans contexte et de pouvoir juger du design dans son intégralité. La première option est un look très épuré. Les deux rectangles doivent être blancs, mais nous devrons ajouter l'ombre à la barre d'action pour qu' elle ne soit pas perdue. C'est bien mieux que d'utiliser le trait, alors n'y pensez même pas. Maintenant, pour activer une ombre projetée, allez dans la zone des effets et cliquez sur ce symbole plus. Utilisez ensuite cette icône pour modifier l'apparence. Passons maintenant aux paramètres 2.4, mais je pense que l' opacité par défaut de 25 est un peu élevée. Laissons cela à 15 % et c'est tout. C'est bon d'y aller. Rien de spécial. Maintenant, en avançant, il nous manque des éléments importants dans la barre d'état. Voici donc un fichier qui peut nous aider. Cette ressource est jointe et je m' attends à ce que vous l'utilisiez dans tous vos projets. L'idée est la suivante barre d'état n' a rien de spécial . C'est basique et super simple. Nous ne devrions pas perdre leur temps à simplement le copier-coller et en avoir fini avec. OK, remplaçons la couche City Texts par San Francisco, écrite en gras, 40 pixels, en noir pur. C'est le mythe du nom du restaurant. Cela devrait avoir la même apparence. Centrez-le avec une barre d'action. Gauche. Alignez cela avec notre guide et nous pourrons continuer. Au fur et à mesure que vous vous familiariserez avec Figma, je vous suggère d'apprendre les commandes pour aligner horizontalement et verticalement. Ils m'aident vraiment. Oh, déplacez l'icône déroulante vers si ce n' est pas déjà fait. Enfin, pour gagner du temps, je vais passer à l'étape suivante et je vais vous montrer les icônes que j'ai sélectionnées pour ce côté droit. Ceux-ci devraient également être de 40 pixels. Centrez-les à l'intérieur du rectangle. Comme j'espère que vous le verrez, utiliser ces outils d'alignement revient à boire de l'eau. Vous devez le faire assez souvent si vous voulez vous sentir bien. Donc, les deux icônes sont pour les pixels et centrées, mais qu'en est-il entre les deux ? Eh bien, repartons avec 40, pour que les gros doigts ne soient pas un problème. Les clics accidentels sont assez ennuyeux. Oh, au fait, nous avons oublié le menu des hamburgers sur le côté gauche. Donne-moi une seconde pendant que je m'occupe de ça. Pourquoi est-ce qu'on l'appelle le menu des hamburgers ? Il y a trois lignes l' une sur l'autre. Donc je suppose que ça ressemble à un hamburger. Aucune idée. Maintenant, pour faire la magie du montage, il y ajoute une jolie icône. Tout provient de flap icon.com et vous les avez joints, mais veuillez ne pas les utiliser pour vos projets réels. Je les joins à des fins pédagogiques afin que vous puissiez suivre. Vous aurez besoin d'un abonnement pour utiliser l'icône du laboratoire pour vos clients. Maintenant, je vais utiliser mon guide pour le positionner correctement et je vais laisser 30 pixels entre celui-ci et San Francisco. Encore une fois, assurez-vous d'utiliser des centres verticaux alignés dessus. Vous vous demandez peut-être pourquoi je n'ai pas utilisé les pixels entre ces deux éléments pour refléter l'espace sur la droite. Et c'est parce que le brief m' indique que l'adresse de l'utilisateur s' affichera lorsqu'il sera connecté. Je vais donc avoir besoin d' autant d'espace que possible. Nous avons une dernière chose qui doit être triée. La flèche déroulante doit être redimensionnée à environ 20 x 10. Et je pense que nous devrions le placer le plus près possible de la ville. Maintenant, 30 pixels seraient plus beaux, mais je vais m' en tenir à dix pixels. Oui, j'en suis très content. Maintenant, une fois que tout est dit et fait, veuillez sélectionner tous ces éléments et les centrer dans la barre d'action. Si tout est en ordre, rien ne doit bouger. Eh bien, peut-être un ou deux pixels. Hein ? Maintenant, il s'agit de notre premier design. allons sélectionner la voiture, puis nous en ferons quelques copies. Comme je l'ai dit, je voulais le juger dans son contexte. J'aimerais donc voir toute la hauteur occupée par les restaurants. Dans l'ensemble. C'est un brouillon, mais il contient tous les éléments requis et nous pouvons commencer à jouer avec eux et créer au moins deux variantes. Je vous verrai lors de la prochaine conférence où nous allons faire exactement cela. 18. alternatives pour l'inscription de restaurants (2): Bienvenue à nouveau. Dans cette vidéo, nous allons explorer plusieurs options pour cette carte. Nous allons dupliquer la totalité de l'écran, donc nous allons garder les choses propres et en ordre. Cela nous aidera également à comparer toutes les versions. Avant de commencer, il y a beaucoup de choses avancées que nous pouvons faire dans Figma. Des éléments tels que les composants, la variance, mise en page automatique peuvent nous apporter une flexibilité et une puissance incroyables. Le problème avec eux est si déroutant pour les débutants. Alors que nous pourrions passer quelques heures à en parler et à faire divers petits exercices qui retarderaient sérieusement le projet d'application. Mon conseil est donc le suivant. Concentrons-nous sur les principes de conception essentiels. Plus tard dans le cours, nous parlerons de ces fonctionnalités plus avancées. Ça a l'air bien. Allons-y. OK, la première chose que nous devrions essayer est un fond gris très clair. Et j'ai en fait extrait la couleur de Dribble qui contient une teinte bleue. Et le code couleur est f, z, F1, F huit. Et c'est très subtil. Veuillez noter qu'aucun rectangle n'est défini comme arrière-plan. Il s'agit de la couleur de l'ensemble du cadre. Le texte n'est pas beau sur ce fond gris. Créons donc le rectangle de base pour cette carte. Voici le processus, sélectionnez l'image en cliquant dessus. Suivant Copie plus grande en utilisant les touches Contrôle D, D comme en double. Accédez au panneau Calques et sélectionnez celui du bas. OK, maintenant augmentons la hauteur à 500. Pour le moment, cela n'a pas beaucoup de sens. Mais voici le truc. Supprimez l' image d'arrière-plan en tant qu' échec en utilisant le symbole moins. Lorsque c'est fait, nous pouvons ajouter la couleur normale, la couleur de remplissage, en faire du blanc pur, bien sûr. Et en gros, c'est tout. Nous avons maintenant une carte et le contraste est bien meilleur. Maintenant, assurez-vous que le texte ne correspond pas et que vous avez fait quelques autres corrections, mais c'est le processus. Encore une fois, dupliquez, sélectionnez la couche inférieure, augmentez la hauteur, puis jouez avec la couleur de remplissage. OK, retour au travail. Nous allons sélectionner l' image et modifier le rayon des coordonnées en bas. Nous avons déjà utilisé ce champ ici, mais pour contrôler les coins individuels, nous devons cliquer ici. Mon conseil est de cliquer sur le premier et de vérifier l'icône. Cela vous racontera l'histoire de votre logistique. Bref, nous voulons 5500. Nous pouvons maintenant repositionner les couches de texte, sélectionner ces deux éléments et les déplacer de 30 pixels vers l'intérieur. Quant à la distance sur l'axe vertical, cela n'a pas beaucoup d'importance pour le moment. Mais essayez de les placer quelque part au milieu de cette garde. Sur le côté droit, pareil, 30 pixels, mais gardez cela en ligne avec le titre qui n'a jamais été envoyé. Dans cette situation, il s'agit de savoir comment utiliser Control and Shift. Laisse-moi clarifier les choses. Maintenez le contrôle et cliquez sur le titre. Maintenant, évidemment, c'est sélectionné En supposant que nous voulions également saisir le désert, nous devons maintenir Control et Shift enfoncés, puis consulter le panneau des couches pour cela. N'oubliez donc pas que le clic en maintenant la touche Ctrl enfoncée vous permet de sélectionner une seule couche. Si vous souhaitez ensuite sélectionner plusieurs couches, utilisez la touche Ctrl Shift Click. Juste comme ça. N'oubliez pas que nous allons refaire tous ces derniers ajustements lorsque nous aborderons la conférence sur la typographie, lorsque nous choisirons les polices. OK, après quelques bricolages, c'est notre première cicatrice, c'est la première alternative. Maintenant, en les regardant côte à côte, je pense que c'est une amélioration, mais dans l'ensemble, je ne suis pas content de cette taille. Dupliquons donc à nouveau l'écran et essayons autre chose. Assurez-vous d'avoir suffisamment de place. À Figma, il n'y a pas de limites. Disons maintenant que nous réduisons la taille de la voiture par exemple, pour les Pexels. Cela signifie que le rectangle de base doit être de 60 et le rectangle intérieur de seulement 360. Donnez-moi un moment pour utiliser le panneau des propriétés. Je suis rapide, mais je ne le suis pas si vite. OK, nous sommes prêts à partir. Prochaine. Nous devons gérer ces couches de textes. Et c'est là que votre dextérité entre vraiment en jeu. Si vite, sélectionnez-les et déplacez-les de 40 pixels vers le haut. Il s'agit donc de quatre types de touches, la flèche vers le haut, si vous maintenez également la touche Shift enfoncée. Maintenant, pendant que nous y sommes, ajoutons une touche de couleur à ces balises. Ils ont l'air ennuyeux tels quels , et vous ne le sauriez pas, vous pouvez cliquer dessus. Voyons donc ce que nous pouvons faire. N'importe quelle couleur conviendrait, mais je préférerais ne pas utiliser le même vert que celui du classement. J'aimerais éviter toute confusion et les faire ressortir un peu plus. Le rouge ou l'orange est tout le contraire du vert. Alors allons-y avec quelque chose comme ça. Maintenant, le code couleur exact n'a pas vraiment d'importance car nous allons configurer la palette de couleurs du lit plus tard. Nous avons toujours la première option concernant l'en-tête. D'accord ? C'est vrai. Je suis content de la nouvelle carte. Et je dois dire que je suis plutôt content du nouveau format de la photo. Il n'est plus aussi grand qu'avant, mais il est toujours généreux et il a l'air très joli. Souvenez-vous du niveau où nous avons eu la meilleure ambiance. Et je pense que c'est en grande partie dû à cette sensation étrange. Tout semblait avoir plus qu'assez d'espace. Rien n'était encombré, rien n'était occupé. Je pense donc que nous allons laisser les choses comme ça. Maintenant, réfléchissons à ce que nous pouvons faire d'autre ? Faisons une copie et moins. Maintenant, nous pourrions donner aux balises couleur de fond unie pour montrer que vous pouvez réellement les toucher. Vous pouvez cliquer dessus. Cela signifie qu'une action est disponible pour l'utilisateur. Mais comme ils veulent la note reçoive sa juste part d'attention, je pense que je vais la placer au-dessus de la photo. Alors allons-y. Déplacez la note et la coordonnée en bas à droite de la photo. Quelque chose comme ça. Évidemment, nous ne pouvons pas le voir, mais nous pouvons ajouter un remplissage en utilisant le changement automatique de mise en page. Ils écrivent le texte et l' émoji et sélectionnent le bon. Utilisez Shift a pour créer une mise en page automatique. Puis, comme précédemment, activez le remplissage. Le blanc pur, bien sûr, n' a pas l'air beau, mais nous pouvons changer cela en y ajoutant une grande valeur. Ajoutons ensuite le rembourrage, disons, la fois horizontalement et verticalement. Cela devrait faire l'affaire. Mise en page automatique facile et pratique. Et si jamais vous modifiez le texte, le raccourcissez ou le rallongez, le champ change également. C'est une technique et Figma qui en valent vraiment la peine ici. Et d'ailleurs, avec un fond blanc, c'est l'un des moyens les plus simples d'obtenir une grande lisibilité sans faire de compromis. Laissez 30 pixels par rapport aux bords inférieur et droit. Comme vous pouvez le voir, une fois que j' ai défini une valeur dans mon esprit, 30, dans ce cas, je la garde. D'accord. Appelez cela une évaluation dans le panneau des couches au cas où vous voudriez rester organisé. C'est un peu difficile à faire pendant le tournage. Je m'en excuse donc. Je me concentrais vraiment sur l'enseignement certaines choses et mon panneau de couches n'est pas très bon. Faisons une petite pause et nous reprendrons dans un instant. Merci. 19. Plus de variations pour la carte: Bienvenue à nouveau. Nous allons gérer les tags. Nous allons utiliser la mise en page automatique. Encore une fois, la largeur va varier en fonction de la longueur du mot. Mais nous voulons au moins 20 pixels de chaque côté. Soyons donc généreux. C'est un raccourci clavier que j'adore. Assurez-vous donc de vous en souvenir. OK, ça devrait être une barre oblique orange. Mais ne vous inquiétez pas trop pour l'ombre. Assurez-vous simplement que le texte blanc pur va vraiment apparaître. Il va vraiment se démarquer. Maintenant, je vais agir assez vite parce que ce sont des trucs standard. Tu devrais être capable de suivre. Mais bien sûr, vous devez souvent mettre la vidéo en pause. Les coordonnées doivent être arrondies au maximum pour correspondre à la note. Je commence à prendre de la vitesse, mais j'espère que vous pourrez suivre sans problème. Maintenant, voici le truc. La hauteur de la carte n' est pas suffisante. Nous ne pouvons tout simplement pas faire en sorte que cela fonctionne. Même si nous augmentons légèrement le titre, je suggère de le modifier. Maintenant, pour ce qui est de la taille des objets, je pense que je vais laisser 20 pixels entre les balises. Et après tout ce qui a été dit et fait, je pense que c'est censé ressembler à ça. Le fait est que toutes vos idées ne seront pas géniales et c'est très bien. L'essentiel est de les créer aussi vite que possible , puis de les juger en les regardant côte à côte. Supprimons le délai de livraison dans le coin supérieur gauche. Il doit être placé sur la même ligne que le titre du restaurant pour cette variante. Écrivons le foie, la fin 30 min. La police par défaut convient parfaitement pour le moment, ce que nous recherchons, c'est l'équilibre. Ça, cette carte est superbe. Maintenant, je peux dire que j'adore les diamants. Je peux dire que cette note sur le côté droit est parfaite. À la fin de la journée, zoomons en arrière et voyons toutes les options. Maintenant, pour lui donner la cinquième chance, assurez-vous que tout est bien boutonné. Si vous consacrez beaucoup plus de temps à notre design, vous serez évidemment plus enclin à l'aimer davantage. Mais nous avons commencé ici sans arrière-plan et avec de très grandes cartes. C'est clairement la pire. La deuxième version est jolie, mais la troisième est nettement meilleure en raison de la taille de la carte plus petite. J'ai aussi aimé cette touche d'orange. Mais quand je compare les deux, je pense que les tags solides sont une erreur, c'est trop chargé et déséquilibré. Cela valait quand même la peine de le faire, mais maintenant je ne vais pas poursuivre. Je suis sûr que ça ne va pas. J'aime bien la notation flottante, mais il va falloir y travailler un peu plus. Faisons donc une pause et nous continuerons avec nos variations et juste quelques instants. 20. Variantes d'inscription du restaurant final (2): Bienvenue à nouveau. J'espère que tu t'amuses bien et que tu travailles avec moi. Mais bien entendu, lors de votre deuxième visionnage, à ce stade, nous avons essayé différentes options et nous savons avec certitude que nous voulons nous en tenir à cette version, mais sans les balises. Alors faisons-le. Créez une autre copie de la dernière planche d'art et retirez les rectangles oranges. Le moyen le plus simple consiste à cliquer avec le bouton droit de la souris et à choisir Supprimer la mise en page automatique. Ou tu peux simplement le refaire comme tu veux. Mais c'est une bonne occasion pour vous de savoir que vous pouvez toujours supprimer tout ou mise en page. j'aime bien cette couleur, alors appliquons-la à ces couches de texte. Nous avons supprimé la mise en page automatique, mais il reste un cadre supplémentaire dans le panneau des couches pour le supprimer. Cliquez avec le bouton droit de la souris et choisissez Dissocier. Cela vaut pour les deux. Maintenant, nous allons les diviser par un tiret et nettoyer les choses. Ce séparateur peut être noir ou quelque chose comme ça. Quant à la distance qui les sépare, eh bien, je dis entre 15 et 20 pixels. La question est de savoir si nous devons conserver cette position. Je pense que nous pouvons jouer un peu plus avec. Voici donc mon idée. Déplaçons le délai de livraison sous le titre, car le brief indique qu'il s'agit d'un facteur très important pour les applications des utilisateurs. Maintenant, cela signifie que les œufs seront placés sur le côté droit comme auparavant, 30 pixels du bord. Très bientôt, je commencerai à choisir des polices et cela aura une bien meilleure apparence. Maintenant, pendant la pause, j'ai pris le temps de trouver l'icône de l'horloge qui correspondait à toutes les autres. Voici les leurs et vous pouvez opter pour 30 sur 30 ou 40 sur 40, selon ce qui vous convient le mieux. La plus petite taille convient car ce n'est pas une action, vous ne pouvez pas vraiment la toucher. 40 pixels, c'est ce que nous avons utilisé dans la barre d'action. Mais c'est plus approprié car vous pouvez réellement cliquer dessus. Tu peux les toucher. Dans l'ensemble, je vais opter pour la valeur la plus faible à cause de cela. Alors, prenez un moment et arrangez tout entre l'horloge et l'heure de dix pixels, s'il vous plaît. Tout doit être centré verticalement. L'icône de l'horloge, le diamant de livraison , enfin, les catégories. Et en option, nous pouvons raccourcir le délai de livraison des SMS de 30 minutes si vous ne l' avez pas déjà fait. Je pense qu'il est clair aujourd'hui que c'est une excellente option. C'est beaucoup plus court, c'est bien mieux. Et nous pourrions même supprimer la livraison car nous avons cette icône d'horloge. Je pense que c'est toujours logique. Une seule icône d'horloge et 30 minutes, je pense que cela fait passer le message, mais nous allons le laisser dans cette version. Enfin, le design du classement est plutôt sympa, mais il couvre une partie importante de la photo. Voici donc ce que je propose. J'ai été inspirée par le foie due. Je veux donc que la note soit à ce point. Cela devrait également équilibrer les choses. Le fait est que nous allons avoir besoin de l'ombre en forme de goutte parce qu' elle est blanche sur blanc. Au fait, on l'appelle le bouton de la pilule, soit dit en passant, PEL, comme en médecine, parce qu'il est assez rond. C'est le moment de le placer à 30 pixels du bord droit. Mais voici le truc. Même si ce n'est pas la police finale, je pense que nous devons jouer avec le rembourrage. Je n'ai rien de précis en tête. C'est une méthode pour essayer des choses probablement un peu plus large, probablement un peu plus courte. Découvrez ce que vous aimez, jouez avec et découvrez ce qui vous convient le mieux. Je pense qu'il y a trop d'espace vide de chaque côté. Redimensionnons-le donc, l'enchère, ils n' ont pas non plus apprécié. Dans la version idéale, cette forme est aussi large que ces deux étiquettes. Mais bien sûr, les balises vont changer en fonction des mots réels affichés ici. International est assez long, mais les autres catégories peuvent y être courtes. Mais oui, ce serait la situation idéale avec la même largeur. Dans l'ensemble, je pense qu'il s'agit d'une amélioration merveilleuse par rapport au design précédent. C'est bien mieux. L'ombre, cependant, est peut-être un peu trop forte, mais une fois qu'on ne l'aura pas abaissée, elle sera très jolie. Je pense qu'une opacité de 6 % est très bien. Sachez que l'opacité est contrôlée depuis cet endroit. Vous pouvez également utiliser cette zone, mais je préfère cette zone. C'est plus facile. Maintenant, en regardant les choses, en faisant un zoom arrière, je pense que c'est loin la meilleure version. Qu'est-ce que tu en penses ? Faites-le moi savoir dans la section des commentaires. Et bien sûr, vous pouvez toujours créer votre propre version. Maintenant, pensez qu'une fois que cela sera peaufiné, vous aurez une bonne note de 8,5 sur dix, et c'est largement suffisant. Faisons une pause. 21. Créer des options pour la barre d'action: Bienvenue à nouveau. Revenons à la partie supérieure. Pour le moment, nous avons créé quelque chose de très propre. Mais est-ce la bonne voie à suivre ? Nous sommes passés à la largeur assez rapidement parce que nous voulions analyser les cartes situées en dessous sans nous faire jeter. Mais je pense que nous pouvons explorer certaines options. Faisons une copie, faisons de la place et commençons. La première chose qui me vient à l'esprit, et c'est très créatif, c'est d'utiliser une photo pour l'ensemble, leur idée de barre d'action. Et cela peut être une photo de San Francisco puisque c' est la ville actuelle. Supprimons donc la barre d'état tombée et élargissons la barre d'action et cette région. Maintenant, pourquoi devons-nous le supprimer ? Parce qu'il est beaucoup plus facile d'ajouter une photo à l'intérieur d'un seul rectangle. Et si cela nous plaît, nous pouvons parler à un codeur et voir quels efforts il faudrait pour y parvenir. Je sais qu'il est possible que je l'aie déjà fait, mais je ne sais pas à quel point cela va être difficile. Maintenant, nous aurons cette discussion, si nous l'aimons pour l'instant Regardons-la en action. J'ai donc suspendu l' enregistrement et je suis allée Unsplash pour prendre plusieurs photos du pont. Les voici, et nous allons répéter le processus dès le premier écran. N'oubliez pas le raccourci clavier Shift pour insérer la photo dans le rectangle. Voici donc le premier. Nous avons un certain nombre d'éléments qui ne fonctionnent pas sur un fond coloré. Donc, dans ce cas, nous allons devoir les rendre tous blancs, s'il vous plaît. Rien d'autre. Juste à côté du jaune, orange, du vert citron, rien de tel. Ce sont les pires lits du diable. Maintenant, je suis juste en train de jouer, mais je prends ce conseil très au sérieux. Utilisez uniquement du blanc. Maintenant, ça n'a pas l' air si mal. Nous pouvons évidemment ajouter un autre remplissage avec une faible opacité pour améliorer la lisibilité de ce texte et obtenir un excellent contraste. Mais pour l'instant, continuons à parcourir les photos. Au fait, si vous souhaitez effectuer des modifications rapides, vous pouvez le faire à partir de cet endroit. Cliquez simplement sur la vignette et vous aurez accès à de nombreuses options ou double-cliquez sur la photo. Ce n'est pas le but de cette conférence, donc je ne vais pas m'attarder là-dessus, mais non, c'est une option. Encore une fois, pour modifier la photo, vous pouvez tout désélectionner, puis sélectionner la photo et vérifier le remplissage. Cliquez sur l'image. Et puis tu auras tous ces paramètres. Bref, vous avez beaucoup de liberté. Ce n'est pas Photoshop. Nous avons encore pas mal d'options. OK, allons-y brièvement. En gros, je vais utiliser l'image numéro six, mais vous pouvez consulter les autres par vous-même. Mais il faut réfléchir à la stratégie. Voulons-nous vraiment attirer l'attention sur l'ActionBar ? Le truc, c'est que nous aimons la simplicité du foie, non ? Cela nous éloigne de cela. Je ne pense pas que cela en vaille la peine. Certaines de ces photos semblent correctes. Mais c'est tout. Ils ne sont ni incroyables, ni fantastiques. Je pense donc que nous ne devons pas compliquer les choses. Détruisons cette idée. Supprimons-le parce que nous voulons que l'accent soit maintenu en dessous, n'est-ce pas ? Pas en haut, mais en dessous. Mais essayons quand même. Une autre option peut être d'utiliser une Heather solide, écrire quelque chose de différent, pas en blanc. Donc, sur un nouvel exemplaire, je vais commencer à expérimenter avec des couleurs vives et audacieuses, quelque chose de vif. En haut de ma liste, j'ai le vert, orange, le violet et le bleu. Maintenant, je vais les empiler côte à côte que nous puissions donner à chacun une chance équitable. Maintenant, laisse-moi un moment pendant que je fais un zoom sur toutes ces versions. Je vais beaucoup accélérer. Mais en gros, il ne se passe rien de spécial ici. De plus, je n'ai aucun code couleur particulier en tête. Ce que j'ai, c'est une place dans le sélecteur de couleurs, un peu plus bas, dans le coin supérieur droit. Donc pas complètement dans le coordinateur parce que c'est un territoire néon. Donc pas de couleurs fluo, mais juste un peu plus bas. Les voici. Maintenant, la question est : avez-vous un favori ? Pensez-vous que l'adoption d'une couleur est meilleure que celle du blanc pur ? Parce que vu de mon point de vue, je pense qu' il vaut mieux le garder blanc. Les photos sont riches en couleurs. Et en gros, pour ce qui est de poser des problèmes ici, ce n'est pas que je ne les aime pas, mais je me demande pourquoi une bien meilleure option ? Je pense que c'est un peu plus raffiné et qu'il correspond parfaitement à l'esprit de l'application. Maintenant, si vous pensez le contraire, continuez, vous avez le choix et montrez-moi votre résultat final. Il s'agit d'une méthode gustative, mais aussi de la façon dont nous interprétons le brief. Ceci conclut la conférence. Prends une pause et je te verrai dans une minute. 22. Concepts de conception pour l'écran de détails du restaurant (3): Bienvenue à nouveau. Nous sommes prêts à passer à la conception détaillée du restaurant. Voyons quelle variation nous pouvons proposer pour ce vert. Mais d'abord, mettons-le à jour. Ces rectangles doivent être blancs. Et celui qui tient nos doigts, nos genoux qui laissent tomber de l'ombre. N'oubliez pas que nous avons des paramètres spécifiques pour le partage, à savoir 2.4. Pour ce qui est de l'opacité, 15 %, mais vous devriez peut-être jouer avec. C'est très important lorsqu' il s'agit d'ombres, car elles peuvent apparaître en haut du rectangle si vous ne faites pas attention. Assurez-vous donc de vérifier les paramètres. OK, passons à la barre d'état. Dans le passé, j'ai utilisé des PNG, donc de vraies photos pour la barre d'état, mais il vaut mieux utiliser un élément ajustable. Le format que vous attendez avec impatience sous forme de SVG. Ou vous pouvez simplement copier, coller cet article à partir de n' importe quel cadeau sur le Web. OK, maintenant, passons à autre chose, nous allons avoir besoin d'ajouter quelques icônes. J'ai mis un peu de temps à trouver la flèche arrière correspondante et une information TOUTES, et elles doivent être placées exactement comme sur l'écran numéro deux, toutes sur la même ligne avec une quantité appropriée de marge. Je pense que nous avons peut-être oublié d' ajouter le guide à ce tableau d'art. Alors, réglons ce problème. Ajoutez n'importe quel rectangle d'une largeur de 656 pixels. Comme d'habitude, le panneau des propriétés est la meilleure solution lorsque vous recherchez la taille spécifique. Ensuite, faites glisser vos guides. Si vous ne voyez pas cette partie, veuillez autoriser votre Lula à utiliser cette touche de raccourci. OK, maintenant enlève cette couche supplémentaire. C'est aussi simple que ça. C'est l'une de ces astuces que j'adore absolument. C'est assez simple, mais ça marche. Cette technique est née de la nécessité et seul un freelance qui valorise réellement son temps a ce type d'approche. Si vous voyez quelqu'un déplacer un guide pixel par pixel avec cette souris, vers la gauche, la droite, la gauche, la droite. Alors tu sais, il est bien trop détendu. Où les affaires. Placez cette icône d'information à côté du guide. D'accord, lorsque vous aurez terminé, répétez l'opération pour l'autre côté, mais prenez votre temps et assurez-vous de le faire correctement. Bien entendu, le moyen le plus simple de les disposer est de faire sécher la grande boîte qui les contient tous. Appuyez ensuite sur la commande Alignement et vous avez franchi une étape importante. Laissez 30 pixels entre la flèche et le titre. C'est donc agréable et aéré. La police par défaut ne remportera aucun prix. Nous allons apporter les touches finales lors de la prochaine conférence. C'est un peu risqué en faire autant, mais nous allons tout régler assez tôt. Maintenant, l'idée principale ici est de rester cohérent. Je n'aime pas utiliser des valeurs différentes sur différents écrans. Enfin, pour les onglets, c'est ce que nous allons faire. Sélectionnez-les tous en même temps car c'est la façon la plus intelligente de travailler. Changez ensuite l' orientation en centre. Cela les fait rester en place car mon plan est d' augmenter cette taille à 24 pixels. De plus, nous allons changer le poids de normal à gras. Pour la couleur, pour le moment, noir convient parfaitement. Nous avons passé beaucoup de temps à les organiser à l'aide de cette ligne qui montre l'onglet actif. Je ne veux pas que cet effort soit vain. C'est pourquoi nous avons changé d'orientation. OK, passons à autre chose. Sélectionnez la première protection et faites-en quelques copies. Cela semble donc un peu plus réaliste. Prenons la ligne à titre d'exemple. Si ce n'est pas la bonne taille, c'est-à-dire 656 de large, nous pouvons le modifier rapidement avec précision. Sélectionnez-le et utilisez le panneau des propriétés, tapez dans la colonne 656 et mettez-le en place. Au fait, c' est une excellente occasion d'utiliser également le champ x. Donc x est l'accès horizontal. Donc, si nous saisissons 32 pixels ici, cela signifie que la couche sera placée 32 pixels du bord gauche de l'écran. Donc x part du côté gauche, y part du haut. Encore une fois, c'est ici que nous devons effectuer quelques modifications manuelles. heure actuelle, Figma ne possède pas la fonctionnalité intéressante d'Adobe XD. Et c'est Repeat Grid. Eh bien, pas au moment de cet enregistrement. Donc, pour modifier rapidement tout ce contenu, nous allons devoir le faire manuellement. Donne-moi une seconde pendant que je m'occupe de ça. C'est une excellente occasion de pratiquer votre vitesse. plaît, ne vous montrez jamais un design avec le même contenu encore et encore. Ni pour moi, ni pour ton client, ni pour personne. Cela montre que vous êtes paresseux et croyez-moi, vous ne voulez pas cette étiquette. Ce n'est pas difficile à faire. Il s'agit de suivre les mouvements. Prenez donc le temps de remplacer à peu près tout. Et une fois cela réglé , nous pouvons continuer. Par exemple, nous pouvons nous concentrer sur Ajouter au panier, qui est l' action principale dans ce vert. J'ai longuement cherché et j'ai décidé d'utiliser ce symbole plus. Cela provient également d'une icône plate. je comprends bien, lorsque vous appuyez sur toute cette région, c'est-à-dire sur toute cette zone, le produit est automatiquement ajouté au panier. Bien que nous n'en soyons pas encore à la phase de coiffage, veuillez changer la couleur du séparateur pour qu'il ne soit pas aussi gênant qu' un gris clair modèles comme ddd devraient très bien fonctionner en tant que solution temporaire . Et oui, d'ailleurs, vous pouvez ajouter cuirs dans cette zone, un HEXACO, le code couleur peut contenir non seulement des chiffres, mais aussi des lettres. DDD est donc un véritable code couleur. Maintenant, la hiérarchie depuis le filtrage mais le faire doit également être affichée ici. Je vais donc mettre le titre, le prix et le poids en gras. Nous pouvons les régler à 30 pixels. Mais cela peut être un peu difficile. Une fois que nous aurons commencé, nous pourrons avoir une meilleure idée de tous les espacements. Déplacez le titre vers le bas d'ailleurs, si nécessaire, mais c'est une étape facultative. Idéalement, le titre doit être aligné en haut avec la photo, avec la vignette sur la gauche. Le prix attend, une icône doit être alignée en bas de la vignette, mais en tant qu'unité entière, sorte que tout se trouve sur la même ligne. En attendant, je voulais vous rappeler que j'aimerais voir deux designs de votre part. Premièrement, une réplique parfaite avec exactement les mêmes icônes, tailles de police et couleurs que celles que vous voyez dans le cours. Et une autre qui ne tient qu'à toi. Cela signifie de nouvelles photos, de nouvelles polices, nouvelles icônes, une nouvelle mise en page, des œuvres. Je souhaite également voir un contenu différent. Ne publiez pas votre travail exactement comme vous le voyez ici. Choisissez différents noms de restaurants, leurs œufs, leurs prix, leurs recettes, etc. Maintenant, avant de continuer, veuillez créer ces deux éléments de menu. grade 777 est ce que nous utilisons jusqu'à présent. C'est parce que nous voulions montrer qu'ils ne sont pas actifs, qu'ils ne sont pas cliquables. OK, voyons maintenant ce que nous pouvons faire ici. J'ai deux grandes directions. La première consiste donc à utiliser une photo au lieu de la barre d'action, ce qui pourrait mieux fonctionner que sur l' écran numéro deux avec le pont de San Francisco. Et la deuxième chose est de fournir au client une version de balise défilante au lieu d'un design fixe à trois onglets. C'est ce que nous allons faire dans la vidéo suivante. Après une courte pause. 23. Variation pour les détails du restaurant: Bienvenue à nouveau. Créons une copie et commençons à travailler sur la première variante de cet écran. Supprimons le rectangle de la barre d' état et augmentons la barre d'action. Et c'est parce que nous voulons ajouter une image dans cette région. Mais voici le truc. Nous pouvons agrandir cette zone encore, même si ce n'est pas aussi courant. Nous avons cette option. D'après mes tests. Une hauteur de 270 pixels fonctionnera assez bien. Cela fait donc 270. Les languettes devront bien entendu être déplacées en dessous avec tous nos plats. N'oubliez pas de travailler intelligemment pour mieux voir sur quoi nous travaillons. Changez la couleur d'arrière-plan en quelque chose comme du gris. De cette façon, nous saurons par où les onglets doivent commencer. L'idée est de créer quelque chose de similaire à Food Panda. Ils peuvent prendre du temps car il y a beaucoup de couches. Je vous recommande toujours de zoomer et dézoomer pour avoir une meilleure idée de ce que vous faites. Avec ce changement, je ne pourrai plus contenir cinq plats complets, mais je pense que quatre suffisent. Maintenant que nous pouvons commencer à construire au-dessus de cette couche dans la barre d'action, nous allons ajouter les restaurants à la couverture de la photo. Dans ce cas, il s'agit d'une image d'une version bêta. J'ai déjà préparé quelque chose. La touche de raccourci contrôle Shift K ou utilisez la commande Placer l'image sous l'outil rectangle. Tout ce qui se trouve dans cette zone doit être blanc, y compris les icônes de la barre d'état. Cela me prendra une minute, mais j'ai la magie du montage de mon côté. OK, maintenant, évidemment, nous ne pouvons pas lire le texte, mais ajoutons un autre remplissage. noir pur joue bien sûr avec l'opacité, peut-être 40 %, plus ou moins 50 %. Vois ce que tu aimes. Et voilà. Génial. Ça a l' air plutôt sympa. N'oubliez pas qu'en ce moment, en mode itération, il suffit de supprimer des versions, créer version après version. Bien que la barre d'action ne soit pas présente en soi, nous avons toujours besoin de deux couches, à savoir la flèche arrière et le dipôle. Maintenant, supprimons l'icône d'information car elle se perd dans le mix. Et déplaçons les éléments de notation quelque part au milieu de cette partie. Ce n'est pas obligatoire à 100 %. Mais je pense que c'est une bonne idée, non ? Parce que c'est la photo du placard du restaurant. Je pense donc qu'il est logique d'avoir la note ici. Consultez la note sur l'un des écrans précédents que nous avons créés. L'ombre projetée devra peut-être être intensifiée, mais cela ne fera pas beaucoup de différence. Même si vous atteignez 50 % l'opacité de l'ombre, elle sera à peine visible. Et n'oubliez pas que nous utilisons notre ordinateur, nous pouvons zoomer sur un téléphone. Tu ne le remarqueras pas. Croyez-moi, quand tout sera dit et fait. Voici à quoi ressemblera la variation . Personnellement, je l'aime plus que la version épurée, mais tout est une question de goût. J'aime laisser le client décider qu'il s'agit vraiment d'un tirage au sort. Je vais donc garder les deux versions dans ma poche et nous pourrons passer à l'option Dab défilante. Utilisons le concept initial pour cela. L'onglet déroulant provient donc de Google Material Design. C'est essentiellement l'une des deux options, fixe, que nous avons déjà. Alors maintenant, nous allons passer à la deuxième. Lorsque vous faites des copies, elles doivent toutes être côte à côte. Ici, la principale différence est que les éléments du menu sont placés sur une seule couche de texte, puis poussés vers la droite. Supprimez ces deux catégories et créez cinq ou six catégories d'aliments. J'ai quelque chose de mal préparé dans le nœud, mais tu peux trouver quelque chose par toi-même. Je vais juste coller. Voici, il y a, maintenant il y a deux options concernant les touches déroulantes. Vous pourriez simplement vous en approximer, l'agiter et simplement tout aligner comme bon vous semble. Ou vous pouvez le faire en utilisant les mesures officielles, et c'est ce que je vais faire. abord, je vais réduire la largeur du rectangle à un AD, ce qui est le minimum selon le guide. C'était donc 240. Maintenant, ce sera 1AD. Ensuite, il faut le placer à 140 pixels du bord gauche, soit 10 pixels. Pour savoir comment procéder, vous pouvez utiliser le champ x du panneau des propriétés. Encore une fois, pourquoi E104 ? Cela provient des directives de conception des matériaux. Excellent. Maintenant, en ce qui concerne mon premier onglet, il doit être aligné horizontalement avec le rectangle. Mais bien sûr, cela pose problème car la couche contient de nombreux éléments de menu. Donc, dans ce cas, nous allons juste avoir à peu près cela. Nous pouvons maintenant être précis en ajoutant un rectangle chaque côté et en effectuant des allers-retours manuels. Mais c'est bien de le regarder. J'ai beaucoup d'expérience, donc je vais très bien m'en sortir. Maintenant, lorsque vous aurez terminé, veuillez changer la couleur, la Volga, les onglets en gris délavé. Nous devons montrer qu'il est inactif. Le code couleur que nous avons choisi est 777. Maintenant, il y a une chose que j'aimerais aborder. Vous serez peut-être curieux de connaître l'arrière-plan et pourquoi je l'ai laissé blanc. Nous pourrions essayer une couleur blanc cassé. Nous avons déjà une couleur, le code, mais j'ai finalement décidé de ne pas l'inclure. Je l'ai essayé hors caméra quand je n'enregistrais pas et ça n'avait pas l'air correct. Juste pour qu'il n'y ait pas de secrets. Voici à quoi cela ressemblerait. C'est boueux, sale, bondé, loin de l'apparence audiovisuelle que nous voulons créer. Maintenant, nous pourrions éventuellement ajouter un fond, le fond blanc, une carte pour chaque plat. Mais c'est une autre chose que j'ai décidé de ne pas faire. Le raisonnement est simple. Donc, tout d'abord, ce serait soit de l'espace de pression. Mais deux choses plus importantes encore, c'est qu'il s' agit d'une liste, donc les cartes n'ont pas leur place ici. Selon le guide officiel de conception des matériaux, tous ces éléments vont ensemble. C'est pourquoi nous n'allons pas les diviser en cartes distinctes. En fin de compte, voici les options concernant l'écran numéro trois. Nous devons choisir une police ou une palette de couleurs et apporter quelques touches finales. Je n'ai pas d'autres idées, variantes pour ce vert. Je pense qu'il est temps de passer à autre chose. Je te verrai dans un instant. 24. Choisir la meilleure police: Bienvenue à nouveau. Il est temps de parler topographie et nous allons utiliser le même processus itératif sur ces quelques écrans. Sélectionnez donc les meilleures versions et mettez-les côte à côte afin que nous puissions rapidement faire des allers-retours entre elles. Si vous êtes indécis à la fin, c'est très bien, mais choisissez trois écrans différents afin que nous puissions explorer chaque lien dans un certain nombre de situations. J'ai déjà séparé les miens ici et nous allons travailler sur des copies. Nous allons faire preuve de simplicité avec une seule police de caractères comportant au moins deux épaisseurs. C'est donc régulier et audacieux. S'il y en a plus, c'est génial. Mais un autre facteur est la taille. Ce que nous voulons, c'est la police soit aussi petite que possible. Et je parle de kilo-octets ici. Donc, si nous sommes indécis à propos de deux polices similaires, nous opterons pour la plus petite. Donc 600 ko contre 200, clairement 200. Ce que nous recherchons, c'est une police sans empattement parce que nous voulons avoir de la chance. Enfin, le point de recherche le plus important est la personnalité. Nous voulons donc quelque chose de similaire à celui qui a livré, qui soit arrondi, intéressant et doté d'une petite personnalité qui ajoute de la valeur au design. Maintenant, vous vous grattez peut-être la tête à ce sujet. Qu'est-ce que la personnalité ? Eh bien, disons-le de cette façon. Si nous utilisons Arial, nous ne gagnerons aucun prix. Dans mon livre, j'ai développé un amour pour les polices de caractères qui passent inaperçues. Ils sont très simples, ils n'attirent en aucun cas l'attention. Voilà, le fade, l'ennuyeux. Et c'est pour cette raison qu'ils sont polyvalents. Ils peuvent être utilisés en toutes circonstances. Dans le cadre d'un design AB. Nous voulons que notre texte ressorte un peu. Les choix que nous faisons en termes de topographie peuvent donc influencer ou défaire le design. J'ai donc déjà mentionné Ariel, Leto, certains poids du robot Open Sans , bien que Source Sans Pro et bien d'autres entrent dans cette catégorie ennuyeuse. Ouvrons donc Google Fonts. Je vais désactiver le sirop et l'écriture manuscrite. Et nous pouvons descendre. Maintenant, nous recherchons au moins quatre ou cinq choix. La première qui attire mon attention est Montserrat, qui est l'une de mes préférées. Donc, c'en est une. Le second est Ubunto. Il a beaucoup de couches. Donc ça fait deux. Le nouveau Nieto est très beau et je vais l'ajouter aussi, mais il dit que c'est un mauvais éclairage, mais il a beaucoup de poids. C'est donc très sympa. Je vais le garder. Maintenant. Quicksand en est un autre qui est très intéressant et j'adore. Maintenant, pour faire court, je vais m'arrêter ici. Mais si vous le faites vous-même, utilisez d'autres polices de caractères. Je n'y reviendrais pas à l'époque, mais au moins cinq. Au fur et à mesure que vous vous entraînez, vous allez commencer à développer une base de données mentale contenant de superbes polices. Et vous aurez des listes de mots beaucoup plus restreintes pour votre prochain projet. C'est pourquoi je n'ai pas perdu de temps à le parcourir. Je savais déjà ce que je cherchais. D'accord. Téléchargez l'archive extraite. Je vais vous montrer comment je les trie rapidement par taille, surtout si vous en avez sélectionné beaucoup. Donc, dans ce dossier, recherchez ce TDF et vous en obtiendrez un tas. Ensuite, vous pouvez modifier le mode d'affichage pour les détails. Et vous allez obtenir la taille dans une colonne séparée. Ensuite, vous pouvez immédiatement voir qu'Ubuntu est beaucoup plus lourd que les sables mouvants, par exemple, je ne vais pas le rayer de ma liste pour l'instant. Je veux le supprimer, mais il doit être absolument fantastique pour le garder en option. Tous ceux qui développent des applications veulent une taille d'application très petite. La taille du fichier doit être aussi faible que possible. Cela vous apporte plus que des stands et c'est génial. Dans mon entreprise, c' était très important. Nous couperions absolument tout, même si c'était 20 ko. Revenons maintenant à Figma et voyons de quoi il s'agit. les ai donc copiés. Les polices sont installées. Jetons donc un coup d'œil aux sables mouvants. Maintenant, il n'y a pas de magie ici, juste la magie du montage. Vous devez sélectionner toutes les couches de texte et les modifier. Nous pourrions maintenant utiliser une fonctionnalité plus avancée, mais c'est exprès. Je le fais manuellement parce que je veux que vous le fassiez également manuellement. Ensuite, dans la deuxième partie du cours, je vais vous montrer comment vous pouvez le faire automatiquement. Eh bien, aussi automatique que possible. Ce processus prend beaucoup de temps, mais vous devrez être patient lorsque vous modifiez autant de couches. Maintenant, quelle est ta première impression ? Regardez-y de plus près et réfléchissez-y. Maintenant, une chose est que lorsque vous changez une police de caractères, vous allez ruiner votre alignement précédent. Vous pourriez donc avoir une action de débordement. Certains pods vont sortir des limites, ce n' est pas un problème. Nous allons devoir tout aligner une fois de plus. Mais, euh, oui, ça a l'air plutôt solide étant donné qu'il faut le parcourir assez rapidement. Maintenant, nous pourrions travailler avec une plus grande précision, mais là encore, ce n'est pas le but de cette étape. Passons maintenant à la police de caractères suivante en créant d'autres copies. Maintenant, Nieto, voyons voir, non ? Sachez qu'il existe également une autre version appelée Nieto Sands. Maintenant, voici à quoi cela ressemble. Ma première impression est qu'il ressemble beaucoup aux sables mouvants, mais qu'il est légèrement plus rond. Vous pouvez le constater, notamment en ce qui concerne les délais de livraison, mais la course est serrée. Cela dépend vraiment de vos goûts. OK, maintenant je vais zoomer en avant pour tout voir correctement. N'oubliez pas que vous devez le faire vous-même et autre niveau selon les visages disponibles sur les polices Google, il n'y a pas d'alternative au dur labeur. Essayez d'être aussi efficace que possible. Vous pouvez sélectionner des couches de texte en gras et modifier la police directement à cette épaisseur. Cela signifie que vous allez devoir être très rapide avec votre technique de clic contrôlé. Maintenant, peu importe comment vous le faites, il est important que vous le fassiez. De plus, vous devez disposer d'un bon nombre de couches de texte. Si nous avions fait cette étape sur l'écran de localisation, au début, cela ne serait pas pertinent. C'est comme demander aux gens de la rue pour qui ils votent. On dit candidat X, non ? Et puis vous dites, hé, vous savez, une étude montre que 100  % des personnes qui souhaitaient voter pour le candidat X ne sont que deux personnes. Ne te fais pas d'illusions. Utilisez plusieurs types de textes, des calques, des titres corsés x des sous-titres, chiffres, un fond blanc, un sac mixte, des ronds, etc. Mais bien sûr, si vous incluez dix écrans, la difficulté augmente considérablement. C'est pourquoi nous n'avons pas créé tous les écrans et avons laissé cette étape à la fin. Bien que cela soit faisable, il est préférable de décider du style d'une application dès le début. Et trois écrans, c'est l' idéal dans mon livre. OK, ils sont là. Toutes les polices que je sélectionne contiennent ce fichier en pièce jointe et je vous suggère de l'ouvrir. Mais Figma pourrait vous donner quelques avertissements. Si vous ne possédez pas ces polices, cela peut vous donner des avertissements. Pas de soucis. D'accord, chaque police a ses propres atouts. Mais ce que je peux clairement dire dès le départ, c'est qu'Ubunto n'en vaut pas la peine. Bien sûr, il est beau, mais pas 34 fois plus beau que les autres. N'oubliez pas qu'il était beaucoup plus volumineux en termes de taille. Monster AB est également très beau, mais dans l'ensemble, je trouve que le plus beau est le nouveau Nieto. Il a beaucoup de poids. Il est assez petit, il ne fera donc pas augmenter la taille de l'application. Et il a cette particularité qui le distingue, surtout lorsque vous l'utilisez dans la variante noire. Le noir signifie donc simplement temps audacieux pour quelque chose de cette nature. Maintenant, compte tenu du public cible, je pense que c'est un excellent premier choix. Au cas où quelque chose apparaîtrait ultérieurement dans la conception AB, nous pouvons facilement remplacer la police par l'une de ces alternatives, et en explorer d' autres. Mais oui, c'est la fin de cette conférence. Nous avons fait de grands progrès et je tiens à vous féliciter d'être restés avec moi jusqu'à présent. Je te verrai dans un instant. 25. Définir et affiner l'apparence de notre application avec des styles: Bienvenue à nouveau. Il est temps de réserver quelques minutes pour définir le style AP. Nous recherchons les couleurs, les tailles de police, la hauteur de ligne, etc. Et nous allons appliquer tout cela au reste des écrans. Je sais que cela peut faire peur, mais nous avons une technique qui nous sauve la vie en utilisant des styles. Commençons donc par le plus simple d'entre eux, la palette de couleurs, non ? Le processus se déroule comme suit. Nous choisissons un titre, disons San Francisco, non ? Nous avons ouvert le sélecteur de couleurs et nous jouons avec différentes nuances. C'était génial de pouvoir voir le changement en temps réel, non ? Nous jouons donc avec. Et finalement, j'ai décidé d'utiliser le 212f. Quel neuf, qui est une nuance de bleu foncé. Faites donc 12 f49. Je vous donne les codes couleurs exacts pour que vous puissiez suivre, mais honnêtement, jouez simplement avec le sélecteur de couleurs jusqu'à ce que vous soyez satisfait. Maintenant, c'est presque noir, mais c'est idéal pour de nombreuses couches de texte. Maintenant, comment l'appliquer à de nombreuses couches de texte ? Tout d'abord, nous devons le configurer comme un style coloré. Cliquez ici sur ces quatre points, juste à côté pour remplir à gauche du signe plus. Cela dit des styles colorés, mais nous n'en avons pas, ce qui est très bien. Cliquez sur cet avantage et nous allons voir apparaître une fenêtre contextuelle nous demandant le nom. Appelez-le comme vous voulez, comme titre, couleur, couleur principale, couleur primaire, peu importe. La tête crée du style. Pour vous montrer la palette de styles de couleurs. Voici un exemple rapide. Choisissez donc le titre Desert Heaven, qui est actuellement noir. Cliquez maintenant sur ces quatre points à côté de Phil et vous trouverez le bleu que nous venons d'ajouter. Voilà, un clic et c'est tout. Maintenant, vous pouvez dire : OK Chris, alors, et voici le truc. Désélectionnons tout, n'est-ce pas ? Remarquez quelque chose en haut à droite, nous avons des couleurs, des styles avec une seule entrée. Nous pouvons cliquer dessus avec le bouton droit de la souris et, bien sûr, le supprimer, mais nous pouvons également le modifier. Donc, à partir de ce nouveau panneau, nous voulons changer la couleur depuis les Propriétés. Cliquez ici pour ouvrir le sélecteur de couleurs et nous pouvons aller en ville. Je vais le rendre rouge ou vert ou quelque chose comme ça. Et remarquez comment les deux titres changent. C'est le pouvoir des styles. C'est ainsi que vous pouvez modifier rapidement l'ensemble d'un design en quelques clics. Les clients veulent toujours voir plus d'options ou peut-être ont-ils changé d' avis avec cette fonctionnalité. Tu n'as pas à t'inquiéter. Je vais appuyer sur Control Z parce que j'aime bien cette teinte bleue. Désormais, lorsque vous souhaitez séparer une couleur et un style, il vous suffit de sélectionner la couche de texte et d'utiliser cette icône en forme de chaîne brisée qui conserve la même couleur bleue, mais qui n'est plus liée au style de couleur. Encore une fois, je vais annuler ce Control Z parce que je veux que deux couches ne soient pas un gros problème. Mais imaginez que si nous avons 100 écrans et près de 1 000 couches de texte, c'est là que le style de couleur est absolument indispensable. Pour continuer, veuillez sélectionner les écrans V et les déplacer séparément. Nous devons juste nettoyer un peu les choses. Mes choix se portent sur l'écran de localisation, l'écran principal de la liste où la note flotte sur le bord, en haut à droite. Et enfin, la Vierge où nous avons des onglets déroulants, trois écrans au total, nous pouvons créer nos styles. Concentrons-nous sur le second. Le titre est donc bleu, illustré dans un nouveau noir Nieto pour la taille que nous pourrions pour D. Mais je pense que le 34 est un meilleur choix. Cela fait donc trois pour cette numérotation soit également appliquée au dipôle du restaurant. Mais voici le truc. Nous proposons également des styles de texte. Donc, plutôt que d'échouer, vous allez voir que nous avons les mêmes quatre points à côté du texte. Cliquez et vous verrez des styles de texte dans ce processus, exactement de la même manière. Cliquez sur le symbole plus pour l'ajouter, donnez-lui un nom, comme vous le souhaitez. Assurez-vous simplement que cela a du sens, comme une grande marée. Ensuite, nous pouvons l'appliquer. Ctrl, cliquez sur Desert Heaven, puis cliquez sur cette entrée pour la tester. Procédons à un changement radical. Nous allons donc désélectionner , puis appuyer sur Modifier. Ensuite, nous allons lui donner une hauteur de 50 pixels ou quelque chose comme ça. Et oui, cela fonctionne comme prévu. Il s'échappe puis Control Z. Maintenant, partons du haut. Le titre est terminé. Qu'en est-il de toutes ces icônes ? J'aime bien cette orange, alors essayons-la. Prenez le menu des hamburgers et réglons-le sur la couleur dorée suivante. Mais voici le truc. Cette icône se trouve à l'intérieur du cadre. Les détails n'ont pas vraiment d'importance. Mais voici le sens. Si vous changez le rembourrage de haut en haut, qui est actuellement blanc, il ne sera pas beau. Au lieu de cela, nous allons devoir modifier les couleurs de sélection. Il est actuellement noir. C'est ce que nous devons changer. Fdd voyez des zéros non plus, qui est un joli orange intense, puis ajoutez-le comme style. Mon plan est de l'appliquer à toutes ces autres icônes. La liste déroulante, le filtre et la recherche. Utilisez la touche Contrôle pour sélectionner la première option, puis ajoutez Shift à la sélection multiple. Et ça y est, l'orange, des trucs adorables. Veuillez appliquer le même changement de couleur aux étiquettes en bas à droite. Comme vous pouvez le constater, avec un minimum d'effort pour modifier le design en un rien de temps. Et l'horloge ? Je pense que le même bleu convient. Tu vois, j'ai fait une bêtise. J'ai sélectionné le cadre et je modifie le remplissage par erreur. Il y a beaucoup de choses à dire, mais discutons des détails dans la deuxième partie du cours. Pour l'instant, concentrez-vous sur l'essence, les couleurs de sélection modifiées. Si vous avez une icône dans le cadre, c'est la meilleure façon de procéder pour le moment. Juste une petite remarque, nous aurions pu le faire tôt en essayant différentes polices de caractères. Je sais, mais je voulais que tu travailles manuellement. Gagner en vitesse est la chose la plus importante en tant que designer à ce stade du jeu. OK, pour y revenir, qu' est-il du délai de livraison ? Eh bien, cela doit être affiché dans les 24 nouveaux pixels normaux de Nieto dans un gris assez foncé. Allons-y avec le 777. Nous pouvons ajouter la couleur ainsi que le style du personnage. Je pense qu'il est très probable que nous l' utilisions comme corps de texte principal, c'est-à-dire la description de chaque plat. Alors appelons-le corps. Je tiens à souligner que je n'en suis pas sûr à 100 %. Il se peut que je change d'avis. Nous verrons au fur et à mesure. Mais comme nous avons des styles, nous pouvons le faire rapidement. Nous pouvons rapidement changer d'avis. Pour la lecture. Passons au nouveau Need TO 20, donc assez petit. On peut le rendre gris, c'est le code couleur 777. Ensuite, sélectionnez la partie à 92  % et rendez-la noire. Noir en termes de poids. En ce qui concerne la couleur, nous pouvons échantillonner les emojis car nous avons changé la police L'alignement n'est peut-être pas parfait, mais c'est un fait rapide. Maintenant, tu as peut-être une question, Chris Comment avez-vous décidé du 34e décalage pour les titres ? Pourquoi pas 30 ? Pourquoi pas 36 ? Pourquoi ne pas en être digne ? La réponse est simple. Je les ai essayés. J'ai téléchargé le design sur mon téléphone. J'ai examiné le design de mon téléphone et je les ai d'abord comparés entre eux , puis de nombreuses applications que j'ai analysées précédemment. Cela semblait être le meilleur choix avant. Il en va de même pour tous les autres. Ce n'est pas quelque chose que Google Material Design a mis en place, c'est quelque chose que j'ai décidé. OK, avance vite, alors voici notre résultat. Voici à quoi devrait ressembler votre projet à ce stade du jeu. Faisons une petite pause. 26. Pratiquez votre vitesse: Bienvenue à nouveau. Nous les filtrons tout le temps, mais nous le faisons et je voudrais remplacer ce contenu factice. Voici toutes les ressources que j'ai préparées pour cet écran. Tout d'abord, les photos, assez simples, console Shift Gay. Je sais que dans certains autres programmes, vous pouvez simplement glisser-déposer des images dans des rectangles, mais pas dans Figma. Ils passent un bon moment avec ça. Et puis, lorsque vous utilisez de grandes photos, soyez un peu plus patient. Figma peut prendre quelques secondes pour les traiter. OK, ensuite, nous allons créer les titres un par un, facilement et facilement. Les votes vont suivre. Maintenant, tu pourrais te demander, Chris, pourquoi fais-tu tout ça ? Pourquoi le montrez-vous ? C'est simple d'une part, c'est une excellente pratique. Tu dois faire de l'exercice. Ils FINISSENT et soyez prêts. La paresse ne me décrira jamais. Ensuite, il est important de montrer au client et au développeur quelque chose dont nous sommes fiers, quelque chose qui semble réel. L'effort requis pour réaliser un aérodrome est minime, mais cela améliore considérablement l'impact de l'application. Je me sens beaucoup mieux. Maintenant, imaginez ça. Vous invitez des invités , des amis, non ? Et puis tu as des chaussettes sales au milieu de la pièce. Tout le reste est beau et propre, tout est mis en place. Mais ces chaussettes sales, mec, les ruines, tout. Même s'il y a une si petite partie de la pièce, ils concentrent toute votre attention sur eux. Ce n'est donc pas une bonne chose, il en va de même pour le design. Avoir du faux contenu répétitif, beaucoup de Lorem Ipsum, ça brise tout simplement la magie. C'est pourquoi nous devons le faire. Et juste pour le ramener à la maison, diminuons la taille de la photo de 40 pixels. Alors, cliquez dessus avec Control et regardons-les. 360, passons au 20. Et pour la carte de 470, passons à 430. Bien sûr, rien n' est plus aligné, mais nous savons que Shift nous aide à déplacer les objets par incréments de dix pixels. Donc, si vous avez besoin de profondeurs, sélectionnez tous ces types comme n'oubliez pas de cliquer sur le premier, puis de maintenir la touche Shift enfoncée pour effectuer une sélection multiple. Et maintenant, nous pouvons utiliser la flèche vers le haut quatre fois tout en maintenant la touche Shift enfoncée. Maintenant, ce redimensionnement est-il absolument nécessaire ? Non. Mais comme je l'ai dit, je veux travailler dur et voir si je peux améliorer le design. Et je pense que ça marche. Précédemment. J'hésitais un peu, mais maintenant je pense que ça a l'air bien. Maintenant que vous êtes prêt à partir, passons à l'écran numéro trois. Commencez par le titre, sélectionnez-le et appliquez le style de caractère qui s'appelle exactement ce titre. Pour la flèche de retour et l'icône d'information, celles-ci doivent être oranges. déplacez les onglets actifs vers le bas, vous devez être orange. Vous savez donc ce que vous devez faire avec ce rectangle. Et maintenant, les tampons ? Eh bien, pour être honnête, je ne suis pas sûr. Commençons par le style du titre. Il est évidemment trop grand, mais nous pouvons le réduire à 26 pixels. Par exemple, comme auparavant, les onglets inactifs nécessitent un traitement différent. Alors réglons ce problème. Maintenant. Sélectionnez tous les autres éléments et définissez-les dans une couche de texte séparée. Je pense que c'est mieux. Il suffit donc d'utiliser le copier-coller Control X. OK. Celui-ci doit donc être défini dans Neonatal 26 comme auparavant, mais dans sa forme normale, vous ne devez jamais modifier la taille de la police même si elle est inactive n'est pas une bonne pratique. Quant à l'actif, il devrait être orange. Encore une fois, voici un conseil. Vous ne savez peut-être pas combien d'espace vous devez laisser entre les dernières pizzas. Après tout, nous voulons libérer l' espace entre la pizza et le résultat. accord ? Mais comme il s' agit d'une seule couche, vous ne pouvez pas connaître la distance réelle. Eh bien, voici la pointe du rectangle entre les deux et regardez la largeur. Une fois que nous avons cette valeur en tête, c'est assez simple avec cette couche sélectionnée, maintenez la touche Alt enfoncée et vérifiez la mesure existante. Ensuite, ajustez-le avec les touches fléchées et vous êtes prêt à partir. OK, passons aux noms des plats. Eh bien, je pense que ceux-ci devraient être les mêmes que les onglets. Donc Nieto black, 26 pixels, mais cette fois-ci en bleu, il faut l'appliquer à toutes les entrées. Fais donc ce que tu as à faire pour que cela se produise. Maintenant, évidemment, le style chimique est la meilleure façon de procéder. Veillez donc à en faire bon usage. J'essaie d'aller le plus vite possible, mais je veux que tu comprennes ce qui se passe. Pour la description. Nous allons devoir utiliser le body styling. Nieto est une police plus grande, mais je veux conserver les lignes de texte, donc redimensionnez-la si nécessaire. Mais imaginez ensuite que nous appliquons des styles à absolument tout au cas où nous voudrions changer quelque chose, peu importe ce que c'est, la taille, la police, la hauteur de ligne, quelle que soit la couleur. Nous allons avoir un moment facile où ce prix et ce poids appliquaient le style des 26 titres et vérifiaient la position. Vous voulez qu'il soit aligné en bas avec la vignette, même si vous devrez peut-être le regarder. Cette police a beaucoup d' espace supplémentaire en haut et en bas. Et tu ne peux rien y faire. Lorsque vous cliquez dessus, vous pouvez voir le surlignage. Il est assez grand. Maintenant, je pense que le prix devrait être affiché en orange. Oui, en effet, c' est bien mieux. Enfin, l'ajout au panier doit également être orange. Croyez-le ou non, je pense que nous en avons fini avec ce vert. S'il y a quoi que ce soit que vous souhaitiez activer sur un bouton, c'est le moment. Je ne suis pas sûre que ça doive être si gros. Ce n'est pas si important. Réduisons-le donc en gras plutôt qu'en noir. Ce sont des styles absolument fabuleux et vous pourriez faire une entrée pour à peu près tout. Comme vous l'avez peut-être remarqué, je n'ai pas ajouté tous les styles , et c'est intentionnel. Je ne veux pas en ajouter trop et me perdre avec ça. C'est l'heure de la pause. 27. Terminer le premier écran: Bienvenue à nouveau. OK, passons à l'écran de localisation. Partons du haut et veillons à ce que nous soyons sur la même longueur d'onde. L'icône doit être 18180 et être d'un blanc pur. Il doit être placé à des pixels à partir du bord supérieur. C'est une bonne occasion d'utiliser le champ y. N'oubliez pas que y est l'axe vertical et qu'il part du haut. X est l'horizontale et elle part de la gauche. Maintenant, le nom de l'application, le live juste là. Alors si vous ne l'avez pas, stylisons-le. Je pense que tu as besoin d'une version entièrement noire. 70, blanc pur. Oh, je ne pense pas avoir ajouté le blanc comme style. Le fait est que si nous déplaçons constamment notre souris sur cette région, il est préférable d'avoir du blanc ici également. Centrez-le maintenant sur la toile et placez-le à dizaine de pixels de l' eigon, plus ou moins. OK, maintenant c'est fait. Prochaine. Je pense que l'on peut dire sans risque de se tromper que l' orange sera la principale couleur d'action. Appliquons-le donc à ces deux boutons. Gardez à l'esprit que lorsque vous utilisez des boutons, il est préférable de les utiliser sur la mise en page automatique et non sur un rectangle et la couche de texte C'est simplement la meilleure pratique dans Figma. Qu'en est-il du texte ? Eh bien, changeons cela pour afficher les restaurants. Commençons par 26 titres et voyons ce qui en vaut la peine. Maintenant, la taille elle-même est correcte, mais elle est un peu trop grosse, alors mettons-la en gras. Cela fait une grande différence. Si vous ne le voyez pas dans la vidéo, faites-moi confiance. Vérifiez-le sur votre téléphone et je pense que vous serez d'accord avec moi. Le problème que j'ai ici, c'est la hiérarchie. Ce n'est pas clair. Alors réfléchissons-y. Nous avons trois actions disponibles. Nous avons saisi un lieu à l' aide d'un bouton d'envoi, sautez cette étape et passez à l'écran suivant ou créez un compte avec un identifiant de connexion. En général, la création d'un compte ou connexion peuvent être considérées comme deux choses distinctes . Mais je vais les combiner pour simplifier les choses. Alors, comment devons-nous nous y prendre ? Bien que ce soit bien d'avoir deux boutons ayant le même niveau d'importance, je pense qu'il vaut mieux appliquer style différent pour créer un compte. D'après ce que j'ai compris du brief, le processus d'inscription n'est pas très important. Cela signifie que le bouton Afficher les restaurants est le bouton le plus important de cet écran. Ainsi, agrandissons-le à 656 pixels. Nous devrions également changer la hauteur à 90 pixels, juste pour qu'elle ressorte un peu plus. Maintenant, cela représente beaucoup de literie, mais ce n'est pas grave. Concentrez-vous simplement sur ce qui est important et ne vous laissez pas emporter par trop de techniques qui apparaissent pour le moment. Les champs doivent correspondre aux boutons, le moment. Les champs doivent correspondre aux boutons où se trouvent 656 pixels, puis les choses changent rapidement, mais n'oubliez pas de faire une pause aussi souvent que nécessaire pour mettre le texte. C'est ce qu'on appelle officiellement la main. Veuillez appliquer le body styling. Lorsque l'utilisateur touche le champ, la main disparaît. Maintenant, voici la technique pour créer un champ pour effectuer une mise en page automatique. Tout d'abord, sélectionnez le texte et utilisez Shift a, facilement et facilement. Ajoutez ensuite le blanc de remplissage. Sympa et simple. Changez le rayon des coordonnées à cinq pixels pour une meilleure apparence. Je pourrais changer cela à dix pixels plus tard, mais pour l'instant, c'est bon. Oh, au fait, nous avons besoin l'icône GPS et vous avez quelque chose attaché au parcours. Je vais simplement le faire glisser dans ce cadre. Lorsque vous faites cela, vous remarquerez que la mise en page par défaut n'est pas correcte car le texte n'est pas centré. Mais ce n'est pas le problème. Désélectionnez l'icône et cliquez sur le cadre. Déplacez votre regard vers la droite. C'est là le problème. Nous devons modifier l' alignement et c'est parti. D'accord, nous voulons qu'il fasse 656 pixels de large, pour qu'il corresponde à tout. Mais notez que la largeur et la hauteur sont grisées. Et c'est à cause de ces paramètres, ces bouleversements liés au contenu. Et cela signifie que la forme grandira en fonction de ce qu'elle contient. Parce que nous savons que nous avons besoin d'une certaine taille. Passons d'une largeur standard à une largeur fixe. Maintenant, nous pouvons taper 656 et c'est génial. La hauteur n'est toujours pas disponible, mais vous savez maintenant comment la rétablir à l' endroit où nous devons déplacer l'icône de recherche vers la droite. faire glisser ne fonctionnera pas. Et c'est parce que nous devons modifier un paramètre. Cliquez sur ces trois points et vous obtiendrez un nouveau panneau. Ici. Nous voulons remplacer le mode d' espacement par pacte, ce qui signifie « rapprochés ». Nous voulons créer un espace d' options entre les deux. Et juste comme ça, ils s'effondrent. Si vous n'aimez pas le rembourrage de chaque côté, vous pouvez le changer depuis cet endroit. 20. Je pense que c'est un excellent choix. Au fait, si vous ne comprenez pas ce que je viens de faire avec le contenu des câlins, c'est très bien. Vous n'êtes pas obligé d' utiliser la mise en page automatique. Tu n'as pas besoin de compliquer les choses. Mais à ce stade, j'ai pensé que ce serait bien d'avoir un aperçu de la façon dont cela fonctionne. Oh, au fait, veuillez faire en sorte que l'icône GPS orange parce que vous pouvez appuyer dessus, soit orange parce que vous pouvez appuyer dessus, vous pouvez cliquer dessus pour obtenir automatiquement votre adresse IP. OK, pensons maintenant que c'est la partie la plus importante de cet écran. Quelle est la prochaine étape ? Et ce truc, créer un compte vient en second. Maintenant, nous pourrions également lui donner un bouton orange, mais il concurrencerait les restaurants de spectacle. Je pense qu'il vaut mieux le déplacer en bas de l'écran. Mais d'abord, passons à côté de cette étape pour le style. Faisons ça. Augmentez la hauteur à 100 pixels pour ne pas la négliger. Ce n'est pas vraiment énorme, mais c'est légèrement plus important que le principal appel à l'action. Faites-en un noir pur, mais réduisez son opacité à 60 %. Pas de bordure pour cela, l'idée est de lui donner un espace généreux, mais sans trop le mettre en valeur. C'est pourquoi j'ai choisi le noir. Faites-le couvrir sur toute la largeur de l'écran. Cela signifie 720 pixels. Alignez-le correctement. Et vous devriez maintenant voir ce que j'essaie de faire. Lorsque vous avez terminé, modifiez le texte pour créer un compte ou connectez-vous avec un C. En fin de compte, les petites choses comptent vraiment. Dans l'ensemble, il s'agit d'une bonne conception pour la deuxième année d'action. Pourrions-nous également utiliser la mise en page automatique ici ? Bien sûr, vous pouvez le faire vous-même. Maintenant, jetons un coup d'œil à notre design lors d'un petit Greg. Merci 28. Un nouveau style de bouton pour avoir un grand flux: Bienvenue à nouveau. Il nous reste un article principal. Ignorez cette étape. Je vais utiliser quelque chose de nouveau, appelé le bouton fantôme. Commencez donc par modifier la mise en page automatiquement, mais au lieu d'ajouter un remplissage comme nous l'avons toujours fait, nous allons ajouter la bordure afin de ne pas remplir uniquement le tableau, le blanc étant assez épais. Je pense à trois pixels. Vous devez toujours éviter les traits d'un pixel. Ils ont l'air super flous et de mauvaise qualité. s'agit donc d'un bouton fantôme et on l' appelle ainsi parce qu' il n'a ni corps, ni remplissage, ni corps. C'est pourquoi c'est un fantôme, non ? Maintenant. Au fait, assurez-vous que l'orthographe est correcte et que vous mettez la première lettre en majuscule. Assurez-vous évidemment que tout est centré. Mais voici le truc. Il se peut que le contraste par rapport à l'image d'arrière-plan soit insuffisant en fonction de ce que vous avez sélectionné. Devrions-nous avoir une superposition de couleur, mais cela ne suffira peut-être pas. De plus, lorsque vous n'avez pas de remplissage, il est assez difficile de sélectionner ces boutons. Voici donc ce que je propose, activer le remplissage et le rendre noir pur, puis réduire l'opacité à environ 30 %. Je pense que cela va nous aider beaucoup, à fois en termes de contraste et de largeur en sélectionnant ce bouton. Maintenant, analysons les choses. Le logo se trouve en haut. Vous y jetez un coup d'œil et vous vous déplacez vers le bas, juste au milieu, vous avez cette zone principale où vous devez inscrire votre adresse, votre position. Génial. Il est grand, il est lumineux, il se démarque. Maintenant, la question est : pouvons-nous ajouter des détails supplémentaires ? Et je pense que nous pourrions ajouter une icône à l'intérieur du bouton orange. Mais voici ce que je propose à la place : un effet de saignement. Sélectionnez donc le rectangle orange et activez une ombre au cas où vous auriez désactivé une bordure. Pour la couleur. Nous ne voulons pas de noir. Au lieu de cela, nous allons opter pour l'orange. Pour les réglages. J'ai utilisé cet effet de nombreuses fois. Et voici ce qui fonctionne le mieux. Cinq pour le champ y, cinq pour B. Et enfin, une opacité fixée à 30 %. Tu pourrais en utiliser plus. N'oubliez pas de zoomer et dézoomer. Dans. Une fois que vous aurez désélectionné le bouton, vous verrez ce que j'entends par effet de saignement. Il se démarque beaucoup. C'est comme si c'était brillant et c'est un détail supplémentaire que certains clients pourraient adorer. Maintenant, voyons quoi d'autre. Oh, le rayon des coordonnées, bien sûr cinq pixels comme précédemment, vous pouvez essayer une valeur plus grande comme dix ou 15. Le fait est que je n'aime pas la position de sauter cette étape. Il ne fait que flotter. Nous pourrions le rapprocher, mais je préfèrerais ne pas avoir de clics accidentels dessus. Alors faisons-le. Utilisez l'outil de saisie et le bon, ou utilisez le nouveau Nieto Bold 26 pixels, blanc pur, bien sûr. Maintenant, centrez-vous horizontalement et déplacez-le d'environ 50 pixels par rapport au bouton orange. Maintenant, voici ce que nous voulons : symétrie est quelque chose que vous devriez toujours viser. Donc, si nous avons 50 pixels en haut, nous avons besoin de 50 pixels entre les deux. Ignorez cette étape et cet élément ici. Maintenez la touche Alt et mesurez les choses. Ensuite, si nécessaire, utilisez les touches fléchées de votre clavier. D'accord, génial, mais ce n'est pas fini. Trouvez la ligne qui mène à toutes les touches de raccourci L, et faisons quelques calculs. Nous savons que ces gars ont une largeur de 656 pixels. Et nous voulons y diviser, mais sans passer par le mot, cela n'a aucun sens. Je pense donc que 50 pixels suffisent pour cela. Alors faisons-le. 656 -50, c'est 606/2, c'est 303. D'accord. Faisons glisser une ligne et redimensionnons-la. Utilisez le panneau des propriétés pour la profondeur et lorsque vous ajoutez la ligne, maintenez la touche Shift enfoncée pour obtenir un blanc parfait. Lignes. il n'y a pas de remplissage, ne le cherchez pas. Changez plutôt l'épaisseur à partir d'ici en escarres. OK, maintenant nous allons le dupliquer et le placer de l'autre côté. Il devrait être assez facile à aligner. Vous avez ce bouton orange en haut, veuillez donc l'utiliser. Lorsque vous êtes prêt, placez le mot en rouge au centre et regroupez-le peut-être utilisant le Contrôle G. En option je trouve que c'est génial. C'est intéressant et cela aide réellement l'utilisateur à naviguer dans ses options. Faisons une pause et nous ferons un bilan complet par la suite. Merci beaucoup. 29. Aperçu du projet jusqu'à ce point: Bienvenue et félicitations, vous venez de terminer la première partie sur l' application de livraison de nourriture. Je sais que cela a été un long voyage, mais j'espère que vous en êtes arrivé là en vous rongant les ongles, en jurant et en vous grattant la tête le moins possible jurant et en vous grattant la tête Le processus est un peu difficile au début, très similaire à un puzzle de 1 000 pièces. Mais au fur et à mesure que vous avez du mal à progresser pièce par pièce, l'image entière devient parent et vous pouvez prendre de la vitesse. Je ne saurais trop insister sur la valeur des patients et du dévouement. Cette application de livraison est un projet réel, que vous pourriez rencontrer dans votre travail. Que ce soit dans une agence de design ou sur n'importe quelle plateforme indépendante. Ce n'est pas moi qui me vante, mais la plupart des tutoriels conçus ne vous montrent pas de rechute. Ce ne sont que de jolies photos et c'est tout. n'y a aucune idée de fonctionnalité derrière eux. Et c'est comme apprendre à faire du vélo alors que le monde est rempli de monster trucks. Donc, même si vous apprenez peut être difficile, je suis fermement convaincue que plus l'entraînement est difficile, plus le combat est facile. Cela signifie que lorsque vous décrochez le poste, vous pouvez vraiment briller. C'est pourquoi ce cours est tel qu'il est. Il nous reste encore un long chemin à parcourir. Mais regardez par où commencer une structure plus simple que la mise en page ? Ensuite, quelques expériences de design, nous avons choisi une police de caractères plutôt qu'une palette de couleurs. Et nous résolvons les problèmes réels essayant d'intégrer autant de restaurants et plats que possible sur un seul écran sans donner l'impression qu'il y a beaucoup de monde et sans trop le faire défiler. Nous avons parlé du rapport hauteur/largeur , du bon rapport hauteur/largeur pour ces photos, la chaîne de commande, c' est-à-dire de l'écran Kino de haut niveau. Nous utilisons des cartes, des icônes, diverses techniques de topographie et nous avons appris à utiliser le panneau des ressources. Encore une fois, du fond du cœur, félicitations pour être arrivée jusqu'ici. Reste avec moi et tu feras encore mieux. Mais le premier Green était probablement le plus délicat. Et c'est parce que vous pouvez saisir votre position dans le champ, mais vous pouvez également utiliser GPS de votre téléphone et votre adresse sera automatiquement renseignée. Vous pouvez également ignorer cette étape. Et puis l'application va vous montrer un restaurant de la plus grande ville. Toutes ces informations se trouvent maintenant dans le dossier, et j'espère que vous le lirez. Enfin, vous pouvez vous inscrire ou vous connecter. Le tout est donc le savoir comment structurer ces quatre actions différentes n'est pas une blague. Nous les avons triés en fonction de leur importance et nous avons pris des décisions de conception en conséquence. C'est pourquoi, par exemple nous utilisons le bouton fantôme. C'est pourquoi nous avons réduit l' opacité de ce rectangle. OK, dans l'ensemble, excellent travail. Encore une fois, félicitations pour votre arrivée. Si vous voulez tout terminer , vous devrez continuer à regarder. Merci beaucoup. C'est Chris qui se déconnecte pour le moment. Merci. 30. Créez les écrans de connexion et d'enregistrement: Bienvenue à nouveau. Commençons par une copie de l'écran initial, maintenez la touche Alt enfoncée et faites-en glisser une copie en dessous. C'est ce que nous allons utiliser pour afficher les champs de connexion et d'enregistrement. En gros, nous allons vous montrer ce qui va se passer lorsque vous cliquez sur ce bouton en bas de l'écran. Supprimons maintenant quelques éléments ou ignorons cette étape, puis créons un compte, désélectionnons-la et jetons un coup d'œil sur le côté droit pour voir tous les styles disponibles jusqu'à présent. C'est donc ce que vous devriez également avoir de votre côté. Mais les textiles ne sont pas gravés dans le marbre. Tu pourrais en avoir plus, tu pourrais en avoir moins. OK, maintenant, faites glisser le champ et le bouton un peu plus bas pour afficher un peu la connexion à la salle et enregistrement à l'aide d'onglets. Alors, saisissez le raccourci L de l'outil de ligne et faites-en glisser un vers l'extérieur. Si vous recherchez le sixième, cinq ou six en termes de Web, utilisez le côté supérieur droit pour cela. Cela fait donc 656, blanc pur avec une épaisseur de deux. N'oubliez pas de maintenir la touche Shift enfoncée lorsque vous faites glisser la ligne vers le bas si vous voulez qu'elle soit parfaitement droite. Maintenant, au-dessus de cette ligne, écrivons le registre. Nous avons plusieurs styles, mais nous allons faire cette partie manuellement. Cela devrait être démontré dans les nouveaux Nieto Bold et leur époque. C'est quelque chose que l'on retrouve assez souvent dans notre projet. D'accord, cliquez sur ces trois points pour obtenir de nombreuses options supplémentaires. Maintenant, je veux que toutes mes lettres soient en majuscules, et c'est cette option ici. La raison de ce choix est assez simple, c' à cause de la hiérarchie. Maintenant, cela aide les utilisateurs à accéder à l'écran. Plus de détails à ce sujet un peu plus tard. Cela doit être placé à 20 pixels de la ligne, plus ou moins. Bien sûr, nous aurons besoin d'un autre onglet qui s'appellera login. Alors, s'il vous plaît, écrivez-le comme avant, faites-en une copie et remplacez les éléments. Pour que les choses restent intuitives, nous allons réduire le poids du gras au poids normal. Maintenant, nous pourrions utiliser un gris très clair, comme ddd pour montrer que ce n'est pas l'onglet actif, mais en fait j'ai une meilleure solution. Prenez donc la ligne existante cet écran, puis dupliquez-la, contrôlant D. Ensuite, nous allons en faire un jeu de quatre pixels, ce qui est la norme selon Google Material Design. Maintenant, pour la couleur, je vais utiliser ce qui suit. C'est f, d, d, d, z, ces sept, qui est une nuance de jaune, en fait doré, ce que j'aime bien. Maintenant, cela se démarque, mais dans la bonne quantité, il n'y a pas de néon, mais c'est parfaitement bien. OK, enfin, nous pouvons le redimensionner en utilisant quelques calculs dans le champ W. Ajoutez simplement la barre oblique due à la fin de celui-ci, puis appuyez sur Entrée. Et ça va nous donner 328 pixels, ça fait 328. Et avec cet élément, nous pouvons maintenant aligner les dipôles. Tu te souviens comment c'est fait ? Sélectionnez le registre avec la barre jaune et la ligne horizontalement, celui-ci ici. Ensuite, déplacez la connexion quelque part au milieu de la barre blanche restante , quelque chose comme ceci. Vous souhaiterez peut-être zoomer pour la prochaine étape. OK, prenez la barre active avec la barre blanche, de sorte que deux éléments soient sélectionnés, puis réalignez-les à nouveau avec la droite. Nous pouvons maintenant sélectionner la connexion avec la barre jaune. Donc, en gros, nous saisissons constamment deux objets à la fois et nous les alignons. Rincez et répétez l'envoi à ces gars également. Enfin, sélectionnez les deux barres et remettez-les en place. Déplacez le doré vers la gauche à sa place d'origine. Et en gros, il s'agit du système DAB Nous avons besoin de beaucoup d'espace en dessous pour les autres champs. Placez-le donc à environ 60 à 70 pixels du logo. Nous aurons un e-mail, un mot de passe, un numéro de téléphone, une ville, etc. Nous allons donc avoir besoin d' autant d'espace que possible. Et c'est là que nous aurons besoin de composants. Tout contenu répétitif, tel qu'un champ, doit être transformé en composant une raison simple. Maintenant, imaginez que nous allons avoir 50 ou 100 champs dans ce projet. Ensuite, nous décidons : « Hé, vous savez quoi, nous pourrions avoir besoin d'un autre look, peut-être d'un rayon de coordonnées différent, d'un style différent. » Que dire alors de 100 champs. Imagine ça. Maintenant, comme je l'ai dit, nous pourrions potentiellement les mettre à jour manuellement, écran par écran, mais j'utilise un composant beaucoup plus intelligent. Désormais, en général, vous trouverez les composants en haut à gauche lorsque vous cliquez sur les actifs. Nous n'en avons pas pour le moment, mais nous y reviendrons dans une minute. Toujours ici, nous pouvons voir notre numéro de page, c'est le numéro un. Désormais, en général, les composants sont conservés dans une page différente. Et pourquoi ? Parce qu'il vaut mieux voir tous vos actifs séparément. Mais comme je veux que vous suiviez cela le plus facilement possible, nous allons le faire, prendre l'outil de cadrage, hockey F, et en faire glisser un ici sur le côté gauche. Aucune taille spécifique en tête, juste une taille aléatoire. Puis change, passez du blanc pur à peut-être un gris très clair. C'est parce que les champs seront très probablement blancs. Et nous allons avoir du blanc sur blanc, nous avons donc besoin d'un contraste décent. D'où le fond gris clair. Maintenant, vous pouvez renommer ce cadre et pour le remplacer par des ressources, des cadres de ressources comme vous le souhaitez, juste pour qu'il ressorte un peu et que nous puissions l'identifier. Enfin, nous pouvons ajouter le premier élément ici, le logo. Sélectionnez les deux couches et déplacez-les dans ce nouveau cadre, le cadre Ressources. Regardez ensuite la partie supérieure de la stigmatisation au milieu de cette barre. Il s'agit de l'icône représentant la recherche d'un composant. Et vous pouvez savoir qu'il s'agit d'un composant en regardant dans le panneau des couches. Il s'agit du symbole du composant principal. Un composant massif signifie simplement l'original. Et parce que nous voulons conserver l' original en bon état, nous l'avons déplacé ici dans le cadre Ressources. Bien entendu, nous aurons besoin du logo sur ces écrans. Faites donc glisser une copie avec tout ce que vous voulez faire glisser comme ça. Maintenant, ce clone, cette copie s'appelle une instance. Et encore une fois, vous pouvez le considérer comme une copie du composant d'origine. Remarquez cette icône dans le panneau des couches. C'est un peu différent. Ici, c'est la mer déserte. Mais si nous cliquons sur le composant d'origine, la masse du composant rempli, il s'agit d'une icône différente. Maintenant, si ce cadre Ressources est trop éloigné, vous pouvez toujours le faire. Passez à l'onglet Ressources. À partir de là, vous aurez des composants locaux. Et puis, sous le nom du cadre, il y a des ressources dans mon cas. Maintenant, à partir de là, vous pouvez simplement en faire glisser une copie. Pas d'autre raccourci, il suffit de cliquer et de faire glisser. N'oubliez pas de toujours leur envoyer le logo. Ensuite, nous pouvons utiliser le champ y, situé à 80 pixels du haut de l'écran. Donc, c'est bien z. Et en gros, nous utilisons maintenant des composants. Maintenant, vous pouvez vous demander pourquoi, Chris, pourquoi devrions-nous le faire ? Parce que nous pouvons changer d' avis et faire en sorte que le logo soit jaune, par exemple , non ? Oh, en fait, je pense que nous n'avons pas ajouté cette couleur aux styles de couleurs. Alors, gérons ça. Ce n'est pas grave. Sélectionnez l'onglet actif, utilisez-le pour les portes pour ouvrir la couleur du menu des styles, puis ajoutez cette entrée, appelez-la surlignée ou comme vous souhaitez, or, jaune, n'importe où. Et puis nous pouvons revenir à Ajouter un composant. Comme je l'ai dit, c'est très utile car nous pouvons modifier de nombreuses instances, c' est-à-dire des copies, en jouant avec le composant principal d'origine. Juste comme ça, change de couleur et tout est mis à jour. Mais évidemment, il nous en fallait une large. Annulons donc avec Control Z. Maintenant, vous pouvez bien sûr jouer avec le texte en dessous, peut-être modifier le poids, l'alignement, la distance, voire la police elle-même. C'est donc la puissance des composants. Nous allons beaucoup les utiliser. Donc, ne vous inquiétez pas si vous ne voulez pas 100 %, obtenez-le. Pour l'instant, continuons. 31. Utiliser des composants – guide étape par étape: Bienvenue à nouveau. Nous devons ajouter un grand nombre de champs pour ce formulaire d'inscription. Commencez maintenant par déplacer l'existant dans le cadre Ressources. Passons également au panneau des couches afin de voir sur quoi nous travaillons. Il s'agit donc d'une mise en page automatique. Nous avons 20 pixels de chaque côté en termes de rembourrage et 15 en haut et en bas. La largeur est fixe et la hauteur est réglée pour s'adapter au contenu. OK, c'est notre point de départ. Tout d'abord, nous allons avoir besoin de la plupart des champs de l'étiquette, mais étiquettes, afin que vous sachiez de quoi il s'agit. Entrez votre position est un indice. C'est quelque chose pour vous aider à mettre en forme, mais ce n'est pas l'étiquette elle-même. Alors, saisissez l'outil de saisie, raccourci D, et ajoutons cette étiquette. Maintenant, pour le style, il va être placé sur un fond sombre. Alors faisons-le. Nouveau Nieto, mais 30 en blanc pur. Et la plupart de ces champs seront obligatoires. Je dis donc que nous ajoutons ce symbole décalé de huit sur votre clavier. Il s'agit d'une étoile ou d'un astérisque, comme on l'appelle officiellement. Et cela indique à l'utilisateur que ce champ est obligatoire. Il doit le remplir. Maintenant, pour le faire ressortir, nous allons utiliser notre couleur d'accent, est-à-dire notre couleur de surbrillance, et c'est le jaune dans ce cas. Sachez maintenant que je n'ai sélectionné que l'étoile, pas la couche entière. C'est ainsi que je vais appliquer ce type de couleur. Maintenant, l'étiquette doit être alignée à gauche avec le champ. Mais pour conserver les choses, sélectionnons tout et appuyons sur Shift a. Nous en avons donc ajouté une autre, la mise en page automatique. Cela nous aidera à garder l'étiquette alignée à gauche, mais nous pouvons également modifier rapidement l'espacement entre l'étiquette et le champ en utilisant cette partie ici. Génial. Maintenant, allons-y avec eux pour le moment. Cela nous sauvera la vie si jamais nous changeons d'avis Souvenez-vous de 2050, 100 champs, cela va vraiment nous aider. Maintenant, continuons. Cette icône GPS peut être remplacée par autre chose, non ? Voici donc ce que je propose. Tout d'abord, nous devons sélectionner ces deux méthodes. Le plus rapide est de maintenir la touche Contrôle enfoncée, de la survoler et de cliquer dessus. Consultez le panneau des couches pour cela. Nous avons exploré le plus bas possible ou moins, il suffit de désélectionner et de faire ceci. Double-cliquez une fois, puis double-cliquez à nouveau. Et maintenant, nous avons notre GPS, Saigon Dragon, loin de ce VL car il y a de fortes chances que nous l'utilisions de nombreuses fois. Et nous pouvons le changer avec une icône remplie ou autre chose, une icône multicolore. Maintenant qu'il est séparé, transformons-le en composant comme d'habitude en cliquant ici. Des trucs géniaux. Je vais maintenant faire glisser une instance dans cette mise en page automatique à l'intérieur du champ. Et pourquoi ? Parce que nous allons ensuite transformer le tout, tout le champ, en un composant. Juste comme ça. Ne t'inquiète pas si tu ne comprends pas tout de suite, fais-moi confiance, continuons. Pour l'instant, nous avons donc trois composantes au total. Nous avons le logo, le GPS et ce champ. Il est maintenant temps de faire glisser une instance dans ce premier écran au-dessus des restaurants , mais nous n'avons pas besoin de l'étiquette à cet endroit. Qu'allons-nous faire ? Alors dans le formulaire d'inscription ? Bien sûr. Nous avons besoin d'une étiquette, mais pas au-dessus. C'est donc ce que nous faisons. Contrôlons. Cliquez sur l'étiquette. Concentrez-vous ici sur le côté droit de l'écran au milieu, où il est écrit « couche ». Remarquez que nous avons un symbole ici. Il dit créer une propriété booléenne. Maintenant, le booléen signifie simplement que c'est un choix oui ou non, vrai ou faux, un ou un z, binaire. Cliquez dessus et vous obtiendrez cette nouvelle fenêtre. La valeur par défaut doit être vraie. Et c'est ce que sonne à peu près correctement le nom de l'émission . Créez une propriété et eh bien, rien ne semble s'être passé. Nous voyons ce surlignage violet ici. Et si nous désélectionnons, cliquez sur le composant dans la graine, cette région de propriétés, puis affichez à nouveau l'étiquette. Mais à quoi ça sert ? Eh bien, laissez-moi vous montrer. Vous devriez maintenant voir cette option ici, afficher l'étiquette. Et bien sûr, nous pouvons le désactiver et il disparaît ou il revient. Il s'agit d'une propriété booléenne. Nous avons dit à Figma que nous voulions contrôler l'étiquette, qu'elle apparaisse ou non. Mais remarquez que si vous cliquez sur le composant d'origine, vous n'avez pas cette option. Et c'est normal. Le bouton n'apparaît que par exemple dans les eaux de Cologne, en copies. L'énorme composant ne l'a pas. Celui-ci, ici. Enfin, vous serez peut-être déçu que ce champ apparaisse lorsque l'étiquette est masquée. Après tout, nous voulons 20 pixels entre le champ et le bouton, n'est-ce pas ? Eh bien, allons-y. Sélectionnez Copier puis déplacez-vous ici, deux contraintes. Ici, la valeur par défaut est définie sur la gauche et le haut. Nous voulons qu'il soit placé à gauche et en bas. Pour modifier cela, il suffit de cliquer ici. C'est aussi simple que ça. Et maintenant, vous pouvez masquer l' étiquette qui va rester, mais regardez à nouveau cette conférence. Et lorsque vous serez prêt, nous pourrons continuer avec l'icône et les champs d'inscription. Merci beaucoup. Et n'oubliez pas que le bouton n'apparaît que dans la copie, pas dans le composant principal d'origine. D'accord. Bonne chance. 32. Utiliser un échange d'instance pour changer rapidement les icônes: Bienvenue à nouveau. J'espère que tu arriveras à arriver ici. Maintenant, nous avons besoin de nombreux champs pour ce formulaire, mais nous avons ici cette icône dont nous n'avons vraiment pas besoin. Nous avons vu la propriété de texte booléen pour les textes évidemment, mais appliquons-la également ici. À l'intérieur du composant principal, veuillez sélectionner l'icône GPS. Remarquez qu'il s'agit d'une copie. L'original se trouve au-dessus. Nous ne toucherons pas à celui-ci. OK, concentrez-vous à nouveau sur la couche. C'est ce que nous recherchons. Appliquez une propriété booléenne. Pourquoi n'est-il pas écrit « Créer » ? Parce que nous en avons déjà un pour le label, mais ne vous inquiétez pas. Nous allons cliquer ici pour en créer un nouveau. Appelez ça « afficher l'icône », même si le nom n'a pas vraiment d'importance. En ce qui concerne la valeur par défaut, nous allons la remplacer par false. Et c'est parce que la plupart des champs n'auront pas d'icône. Revenons à leur en sélectionner une et vérifions-la. Voilà, aucune icône. Et avec un bon préavis, il y a un petit problème et je ne veux pas perdre de temps là-dessus. Maintenant, dans le composant principal, l'indice est maintenant centré et ce n'est pas bon. Alors voici de quoi il s'agit. Nous devons maintenant modifier la chose suivante. Sélectionnez le cerveau de mise en page automatique pour le champ, celui-ci ici, et modifiez son paramètre sur Pack. Cela aura bien sûr une incidence sur leur écran, mais si vous copiez depuis l'écran numéro un, l'icône GPS sera trop proche de la main. n'est donc pas une bonne chose. Ici. Je suis allé trop vite et j'ai sélectionné le champ d'instance. Remarquez le panneau des couches, c'est une erreur. Je peux toujours le remplacer par un espace entre les deux, mais ce n'est pas ce que nous voulons. Utilisez donc Control Z et sélectionnez la mise en page automatique depuis l'intérieur de l'instance. C'est ce que nous voulons. OK, il est maintenant temps d' ajouter des tas de champs. Faites donc glisser le premier et centrez-le horizontalement, à environ 40 pixels de la barre jaune, plus ou moins. Bien sûr. Le premier champ doit s'appeler FullName. Remplacez cette étiquette. Et je pense que nous devons faire la même chose pour la main. Cela peut y dire John Doe ou Christian. Quand tu veux, tu as un nom, peu importe, clique sur Escape et avec eux, nous aurons pas mal de champs, et celui-ci n'a pas besoin d'être aussi large. Voici donc ce que je propose. Comme l'instance, celle-ci ici, elle devrait être réglée pour être corrigée ici. Nous allons donc donner accès au Web, le diviser par deux en ajoutant une barre oblique dans ce champ, et c'est le 28. Maintenant, le fait est que nous avons également besoin d'un espace vide entre les champs. Supprimons donc 20. Voilà, OH, maintenant vous pouvez ajouter -20 dans le champ ou simplement taper 308. Maintenant, vous serez peut-être surpris de voir que ce champ ne change pas. Et c'est parce que nous avons la mise en page automatique dans cette instance. Donc, l'instance elle-même n'est ni l'une ni l'autre où vous pouvez voir le surlignage violet ici. Maintenant, nous devons sélectionner la mise en page automatique, celle-ci ici. Au lieu de le réparer, nous allons devoir le changer pour remplir le conteneur. Maintenant, vous pouvez demander à Chris, pourquoi Phil Container ? Eh bien, l'instance est le conteneur, le surlignage bleu. Tu te souviens ? Nous disons donc : « Hé, ce champ doit être aussi large que l'instance. Si l'instance du clone est 308, champ droit devrait en être de même. Maintenant, si l'instance s' agrandit, suivez cette valeur. La seule autre option est son contenu. Et cela signifie simplement, hé, Figma, que le champ indique pourquoi le contenu lui-même. Et le contenu de cette affaire est Christian Barren. Cela n'aurait aucun sens dans cette situation spécifique. Il est donc évident que nous n'allons pas l'utiliser. Faisons une autre copie et plaçons-la sur la droite. L'étiquette doit également indiquer ville, l'indice, passons à quelque chose de basique, comme sélectionner une ville. Sur Sélectionnez une ville. Je pense que c'est Select City. Maintenant, cela signifie que nous allons avoir besoin de la liste déroulante. Nous en avons déjà un à l'écran, mais il y en a un à côté de San Francisco. Alors sélectionnez-le et déplacez-le vers la pluie de ressources. Transformons-en ensuite un composant. S'il vous plaît, prenez votre temps. Lorsque vous êtes prêt, ramenez une copie à San Francisco. Maintenant, comme il est assez petit, vous pouvez utiliser le panneau des ressources pour cela, selon ce qui vous convient le mieux. Quand tu seras prêt, réfléchissons-y. Revenez au champ de la ville et activez une icône avec le cadre sélectionné Vous devrez modifier l'espacement en choisissant un espace plein entre les deux. Mais pour le moment, nous n'avons qu'une option d'activation ou de désactivation pour l'icône. Et en gros, cela ne suffit pas. Nous devons donc être en mesure de remplacer ces icônes pour les changer. Heureusement, nous pouvons le faire à Figma. Revenez donc au composant principal. Le moyen le plus simple de travailler est d'utiliser le panneau des couches et de trouver le GPS Saigon. Ici, c'est légèrement grisé. OK, maintenant, concentrez-vous sur le côté droit. Ici, nous avons un autre symbole, juste à cette position à côté de l'endroit où il est écrit GPS. Cliquez dessus et nous allons procéder à un échange d'instance. Un échange d'instance signifie simplement que nous pouvons modifier l'icône. Si nous la désélectionnons puis sélectionnons le composant principal, vous devriez avoir trois propriétés au total. Il s'agit donc d'afficher ou de masquer l'étiquette. Échangez l'icône, celle-ci ici, et enfin, montrez ce qu'est une icône à indice élevé. Revenons à la sélection de la ville. Les deux boutons sont là, et entre eux, nous décrochons ce poste. Nous n'avons donc que deux composants iconiques dans ce projet. Cliquez donc ici et vous devriez constater que les données seront disponibles assez rapidement. C'est aussi simple que ça. Mais voici le truc. La différence de taille casse l'icône et ce n'est pas une bonne chose. Mais nous avons une solution simple. Revenons donc au composant principal, la flèche, puis nous allons utiliser un décalage automatique de mise en page a. Maintenant, la taille est parfaitement correcte. Maintenant, je ne veux pas vous ennuyer avec différentes explications, mais souvenez-vous de ceci : si vous êtes, les icônes ont une taille différente et vous voulez pouvoir les échanger. Utilisez simplement le jour de travail dans le cadre Ressources sur la masse du composant. Récapitulons. Ainsi, dans le composant de champ, nous avons sélectionné l' icône GPS et nous utilisons la fonctionnalité appelée propriété d'échange d' instance. Une fois cela appliqué, nous pouvons passer à un clone. Par exemple, nous pouvons modifier les icônes en fonction des composants disponibles dans ce projet. Dans notre cas, il n'y a que deux icônes, donc c'est évidemment assez simple. Maintenant, si l' icône ne convient pas, nous devons utiliser Shift a sur l'icône d'origine, c' est-à-dire le composant principal ou principal. OK, continuons. 33. Concentrez-vous sur votre vitesse: Bienvenue à nouveau. De temps en temps, vous allez avoir ces sessions intenses où la seule chose qui compte, c'est votre vitesse, par exemple , ici, où avons-nous besoin d'un grand nombre de champs. Mettons-nous au travail en faisant une copie du champ de nom et en le faisant glisser vers le bas, en modifiant la largeur à 656 et le champ devrait s'agrandir sans aucun autre paramètre. Déplacez l'appel à l'action principal bas, faites de la place et faites de votre mieux pour suivre ces étapes . Pendant que je travaille en arrière-plan, laissez-moi vous dire quelques mots sur mon processus de réflexion. Cela fait donc partie du jeu. Maintenant, peu importe le nombre d' astuces que vous utilisez dans Figma, cela en fait partie. Désormais, l' objectif est de travailler de la manière intelligente et la plus efficace possible. Mais à la fin de la journée, vous aurez des tâches répétitives et fastidieuses, des tâches ennuyeuses, et celle-ci en fait partie. Donc, plutôt que de s'en plaindre, ils considèrent que c'est un exercice, une chance d' améliorer vos compétences C ne fait rien de difficile ici, mais cela doit être fait. Donc, de mon point de vue, j'aime me lancer le défi de le faire aussi vite que possible. En tant que PDG de mon entreprise de conception d'applications, cinq ans au total, j'ai interviewé des centaines de designers et je leur ai toujours donné des compétences. Bien sûr, je voulais qu'ils connaissent les raccourcis clavier et aient une bonne connaissance de la conception du programme. Mais j'ai toujours cherché la vitesse. La vitesse me montre que tu valorises ton temps. La vitesse me dit que même si vous ne savez pas quelque chose, une fois que vous aurez appris qu'une fois rattrapé, vous ferez un excellent travail. C'est l'un de ces rares indicateurs que les employeurs recherchent souvent. Bien que votre CV soit beau, il ne suffit pas pour obtenir un excellent travail. Il s'agit généralement d' une sorte de test de compétences. Et il est facile de comprendre pourquoi. Parce que certains designers peuvent mettre 20 minutes à effectuer ce travail répétitif, est-ce qu'ils le font et ont peut-être encore moins de dettes, n'est-ce pas ? Cela seul vous en dit long sur ce designer en particulier. Concentrez-vous donc sur votre vitesse, vous ferez ainsi une bonne première impression. Password web et ces champs sont remplis. Mais voici quelque chose que vous avez peut-être remarqué. La sélection de ces champs de texte n'était pas géniale pour faciliter l'utilisation, vous pouviez le faire. Revenons donc au composant principal et sélectionnons l'étiquette. Sur le côté droit. Vous allez trouver cette partie qui dit contenu. Et vous pouvez voir qu'il s'agit d'un champ où il nous montre le texte actuel. Et c'est évidemment une étiquette. Juste au-dessus. Nous avons cette icône indique créer une propriété de texte. Cliquez dessus, et vous obtiendrez une nouvelle fenêtre pour le texte du nom qui convient parfaitement, et la valeur est également correcte. Maintenant, à quoi ça sert ? Eh bien, sélectionnez n'importe quel champ. Et sur le côté droit, outre Afficher l'étiquette, Afficher l'icône, vous souhaiterez également avoir cette option pour modifier le texte directement à partir de cet endroit. Maintenant, est-ce que cela vous fait gagner beaucoup de temps ? Eh bien, c'est sujet à discussion. Je vous ai intentionnellement montré cette fonctionnalité après avoir réétiqueté manuellement tous ces champs. Parce que la vitesse demande de la pratique. C'est une chose de le comprendre, mais c'en est une autre revenir au composant principal. Si nous pouvons modifier l'étiquette, nous pouvons sûrement faire la même chose pour la main. suffit donc de cliquer dessus avec la touche Ctrl pour la sélectionner et de rechercher le contenu sur le côté droit. Cliquez sur la même icône et créez une nouvelle propriété. Cette fois-ci, il faudrait l'appeler ainsi. Par conséquent, le nom compte parce que nous devons rester organisés. Nous avons maintenant la poignée, le bouton, mais nous allons avoir besoin du composant. Maintenant, faites-le glisser depuis l'écran enregistré. Nous devons le placer dans le cadre Ressources. À partir de là, transformons-en un composant comme celui-ci. Sélectionnez ensuite le texte et nous ferons de même. Nous allons rendre le texte modifiable. Pas besoin de quoi que ce soit d'autre. OK. Maintenant, faites glisser une copie et conservez le texte tel quel. Créez un compte. Attention cependant à l'orthographe. La distance entre le dernier champ doit être la même que depuis le premier champ, la barre jaune. Je recommande 40 pixels. Mais c'est pour le Z, donnez de l'absorption, bien sûr. Lorsque vous êtes prêt à passer à autre chose, faites une copie de ce vert et agissez le plus efficacement possible. Maintenant, je vais commencer par le bas. Le texte devrait donc dire, entrez votre compte. Encore une fois, veuillez faire attention à votre orthographe. C'est très important. Supprimez les champs du nom, du CD et du numéro de téléphone. Augmentez les champs d'adresse e-mail et de mot de passe et assurez-vous qu'ils correspondent à la distance par rapport à l'écran précédent. J'ai dit inverser les pixels, alors utilisons-en ici également. Ensuite, soulevez également le bouton orange. Travaillons sur le DAB. Déplacez la barre jaune vers la droite pour modifier le poids de ces couches. Alors inscrivez-vous, cela devrait être affiché régulièrement. Et puis connectez-vous. faut évidemment faire preuve d'audace. Pour terminer, nous avons besoin d'une nouvelle couche appelée mot de passe oublié. Faites donc une copie de l'étiquette et placez-la sur le côté droit si vous le souhaitez Vous pouvez également modifier l'alignement du texte de gauche à droite, au cas où nous le modifierions plus tard. Maintenant, vous remarquerez peut-être que cette nouvelle couche sera au-dessus de l'instance, ce qui est tout à fait normal, alors ne vous inquiétez pas, c'est très bien. OK. Fais-le jaune. Et en gros, je pense qu'une fois que nous avons presque terminé, non seulement nous avons deux magnifiques écrans, mais nous avons également beaucoup appris sur l'utilisation composants et de diverses propriétés telles que le booléen, swap d' icônes ou le x propriété. OK, voyez s'il y a autre chose. Et si ce n'est pas le cas, continuons. Merci beaucoup. 34. Utilisez les propriétés de composants - comme un professionnel !: Bienvenue à nouveau. Nous savons maintenant très bien utiliser les composants. J'aimerais donc continuer à m' appuyer sur ces connaissances. Concentrons-nous donc sur la barre d'action. Cela doit également être transformé en composant. Voici donc ce que je propose. Sélectionnez tous les éléments comme ça. Maintenant, utilisez Control C, Control V pour les coller dans le cadre Ressources. Ou vous pouvez simplement en faire glisser une copie, selon ce qui vous convient le mieux. Maintenant, supprimez le rectangle car nous n'en avons pas besoin. Maintenant, faisons-le. Sélectionnez ces trois icônes, le menu des hamburgers, le filtre et la recherche. Ils doivent tous être transformés en composants. Et nous avons une option ici qui nous permet de créer plusieurs composants. Bonjour, un seul clic. Juste comme ça. Génial. Maintenant, pourquoi pas le menu déroulant ? Parce que nous l'avons déjà ici, au cas où vous ne le feriez pas, s'il vous plaît. OK, élevons-les pour voir tous les composants d'origine en haut. OK, maintenant, sors-en quelques copies. Tout d'abord, le menu des hamburgers plutôt que les deux autres. OK, il est temps de procéder à des mises en page automatiques. Déplacez donc un pointeur vers la droite pour être sur le côté gauche, puis deux icônes sur le côté droit, encore une fois, déplacez a. En parlant de cela, pensez à utiliser Shift a sur la masse originale des composants des icônes eux-mêmes. C'est très important. Maintenant, nous allons rester simples. Il faut donc 40 entre les icônes de droite et 20 pour celles de gauche. Pourrions-nous maintenant définir différentes marges, par exemple dix pixels entre la liste déroulante et le nom de la ville entre guillemets. Ces types de détails rendent les choses un peu plus compliquées qu' elles ne devraient l'être. Je vais donc toujours choisir la simplicité chaque fois que je le peux. Bon arrière-plan, nous allons devoir sélectionner les deux mises en page automatiques , puis utiliser Shift. Encore une fois, en gros, il ne s'agit plus que d'un seul élément. Et à cause de cela, nous pouvons bien sûr ajouter le remplissage. Sinon, s'il vous plaît, nous devrons modifier le rembourrage. Les réglages sont cependant assez simples. 32 pixels de chaque côté. En ce qui concerne la hauteur, vous pouvez cependant la maintenir réglée sur z. Et voici pourquoi. Déplacez-vous en haut. Maintenant, ici, ces deux listes déroulantes doivent être réglées comme fixes. Maintenant, pourquoi réparer ? Parce que nous n'avons pas besoin de flexibilité. Nous voulons 720 pour la largeur et 112 pour la hauteur. Maintenant, pourrions-nous le rendre souple, réactif, bref ? Nous le pourrions, mais comme je l'ai dit, restons simples, car ce n'est pas nécessaire. Enfin, nous devons modifier la position du contenu pour le centrer. Cela se fait en cliquant ici, c'est assez simple. Et encore une chose, nous devons modifier l' arrangement pour que l'espace entre les faits ne nous aide pas vraiment à le changer. En gros, c'est fait et nous pouvons en faire un composant. OK, des trucs géniaux. Maintenant, rendons-le modifiable, comme nous venons de l'apprendre. Commencez donc par le contrôle de texte. Cliquez pour le sélectionner à côté du contenu. Cliquez sur cette flèche pour le texte du nom, c'est très bien. Et pour la valeur par défaut qui peut rester San Francisco. Ensuite, la liste déroulante. C'est là que je veux que vous fassiez une pause, voir si vous contrôlez, cliquez dessus. Vous pouvez obtenir cette couche, le vecteur réel. Et vous pourriez vous mettre en colère parce qu'il n'y a aucun paramètre ici. La seule chose que vous voyez est cette icône qui indique Sélectionner une instance. Et c'est une façon célèbre de te dire : « Hé, tu n'as pas choisi la bonne chose ». Je ne pense pas que tu doives être là. Vous ne pouvez rien faire au vecteur réel. Vous devez travailler sur l'instance. Vous pouvez donc cliquer ici ou simplement utiliser le panneau des couches pour sélectionner l'instance. Vous pouvez le reconnaître grâce à cette icône en forme de losange vide. OK, de bonnes choses. Appliquons maintenant un booléen car il se peut que nous souhaitions le désactiver. Cela se fait en utilisant cette icône la section de la couche. Changeons le nom pour qu'il affiche la liste déroulante. Maintenant, devons-nous appliquer une propriété d'instance d'échange ? Je ne pense pas vraiment que pour celui-ci, nous allons probablement conserver cette icône. Mais qu'en est-il du reste ? que nous voulons à 100 %. Commencez donc par le menu des hamburgers. Cliquez ici pour créer un échange d'instance. Et quand cette fois, nommez-le, disons ICAM-1. Sélectionnez ensuite le filtre, pas la mise en page automatique, mais l' instance du filtre, créez-en un nouveau et appelons-le Icone pour finalement l'icône de recherche, une nouvelle propriété appelée Icône 3. Et nous avons terminé, mais nous devons l'essayer. Faisons donc une copie de cette barre d'action et essayons de remplacer une icône. Passons au menu des hamburgers. Par exemple, disons que nous voulons le remplacer par l'icône GPS. Alors, est-ce que ça marche ? Et oui, c'est le cas. Maintenant, voici le truc. Si l' icône GPS est déformée, recherchez la masse du composant, puis utilisez Shift. Eux, je l'ai déjà fait. Maintenant, jouez avec et voyez si tout fonctionne bien. Lorsque vous échangez une icône, vous remarquerez peut-être une liste déroulante à cet endroit. Vous avez des composants locaux et vous préférez. Ce second est utile si vous souhaitez importer l' énorme bibliothèque d'icônes, des centaines d'icônes, peut-être même des milliers. Donc, ce que tu ne veux pas faire, c'est défiler comme un fou. Donc, vous choisissez quelques icônes qui sont plus susceptibles d'être utilisées pour modifier la liste des préférences. Veuillez le faire, sélectionnez le composant principal, puis rendez-vous ici et cliquez sur ce symbole pour le modifier. À partir de là, vous obtiendrez des valeurs préférées. Et maintenant, vous pouvez appuyer sur cette icône Plus. En gros, vous pouvez vérifier les composants dont vous pourriez avoir besoin le plus souvent. Si vous n'y parvenez pas, utilisez simplement ce bouton pour changer le mode d'affichage. Et parce que nous en avons ici, changeons quelque chose parce que j'en compte 123, cela n'a aucun sens. Vous pouvez donc double-cliquer ici pour les renommer. Par exemple, l'icône de gauche a beaucoup plus de sens que l'icône droite un puis l'icône de droite deux. Et c'est bien mieux avec à peu près fini. Je pense que nous avons oublié quelque chose de très important. Et s'il n'y a pas de titre ? Sélectionnez-le donc dans le composant principal, et appliquons également une propriété booléenne à cela, car cela peut se produire. Donc, cette fois-ci, appelez-le show title, par exemple parce que les textes réels peuvent changer. Mais qu'en est-il des deux icônes sur le côté droit ? aurons-nous toujours besoin ? Je ne crois pas. Faisons donc la même chose. Afficher l'icône, à droite, une. Et puis nous aurons également l' icône d'affichage à droite. Ils peuvent donc être définis sur true par défaut. Et lorsque vous avez terminé, retournez au clone, à l'instance. Et ce qui s'est démarqué, nous n'allons pas appliquer de booléen au menu des hamburgers, car dans la plupart des applications, l'icône de retour est toujours présente. D'accord, vous pouvez supprimer le titre, vous pouvez supprimer les bonnes icônes. Maintenant, pour être honnête, je suis très fière que tu sois arrivée si loin. Croyez-moi, lorsque j'ai commencé à me renseigner sur ces propriétés, ces composants, etc., j'ai eu du mal à m'y intéresser. Je l'ai appris étape par étape. C'était frustrant au début. Je ne trouvais pas les bonnes propriétés, mais je suis très heureuse de dire qu' avec les patients et la pratique, je l'ai finalement obtenue. Et vous aussi. Faisons une pause pour vous rattraper. Merci. 35. C'est ainsi que vous utilisez les variantes: Bienvenue à nouveau. Parlons de la variance des composantes. Prenons donc la barre d'état. Nous devons le réutiliser encore et encore. Mais que se passerait-il si nous avions 200 écrans et que le client disait : « Je ne veux pas qu'il soit en blanc » ? Nous devons donc nous y préparer. Faites-le donc glisser depuis le deuxième écran vers le cadre Ressources, et c'est parti. Je ne vais donc pas m' amuser avec mise en page automatique pour le côté droit. Je vais le garder tel quel. Au lieu de cela, je vais directement en faire un composant. Maintenant, je veux que vous remarquiez quelque chose en haut où le Create Component est généralement révolu. Ce n'est pas différent. Il dit créer une variante. Utilisons-la donc. Nous pouvons maintenant nommer celui-ci trop foncé ou trop coloré ou quelque chose comme ça. Passez à l'autre et appelez-le clair ou blanc ou autre. Cela va nous aider à les reconnaître. Remarquez qu'il y a une ligne pointillée autour de ces deux gars. Cela nous montre donc que nous avons affaire à de la variance. Quelles variations ? Maintenant, pour la seconde, utilisons les couleurs de sélection et rendons toutes les icônes blanches. Ensuite, pour le fond, rendons-le orange avec n'importe quelle autre couleur. Voyez ce que cela signifie. En gros, nous créons des options, est-à-dire une variance pour la même chose, pour le même élément. Donc, si le client change d'avis, nous pouvons actionner un interrupteur et en finir avec ça. Revenons au deuxième écran et passons au panneau Actifs. Je vais le faire pour que vous puissiez voir comment cela se passe généralement. Vous pouvez faire glisser la barre d'état vers l'extérieur comme n'importe quel autre composant, le raccourci clavier ne se contente pas de cliquer et de faire glisser. Bien sûr, vous devez l'aligner, mais regardez du côté droit et vous pouvez choisir entre le clair et le foncé. Et c'est vraiment génial. glisser un autre pour l' écran numéro trois. Et voici maintenant une autre situation concernant la variance. Supposons que vous n'ayez pas saisi de mot de passe sur l'écran de connexion. Nous pourrions montrer que le bouton est désactivé, non ? Nous allons donc sélectionner le composant principal et créer le variant. Disons que c'est désactivé, ce qui est un terme très courant. Alors changeons le style. Supprimons donc complètement l'ombre , puis changeons la couleur de l'orange vif n'importe quel grade que vous avez défini dans le panneau Styles. OK, passons maintenant à cette instance et sortons de l'état par défaut. Maintenant, la dénomination de l'état par défaut n'a pas beaucoup de sens. Alors, renommons-le. Passons-la en active, par exemple , et maintenant vous savez quelle propriété ne sonne pas très bien non plus. Nous allons donc le renommer en État. Donc, l'état du bouton, actif ou désactivé. Ensuite, vous vous familiariserez avec tous ces termes au fil du temps. Les développeurs et les codeurs les connaissent également très bien. Et juste comme ça en faisant de grands progrès avec la variance. Avant de terminer, passons au troisième écran. Voici mon approche. Sélectionnez ces deux icônes, la flèche de retour et la flèche d'information, puis déplacez-les dans le cadre Ressources. Vous pouvez le redimensionner à tout moment, au cas où vous le voudriez plus grand, plutôt que d'utiliser des mises en page automatiques pour chacun d'entre eux, juste pour faire bonne mesure. Génial. Faites-en un composant. Maintenant, revenez à l'écran numéro trois et sachez que vous pouvez faire glisser une copie de cette autre barre d'action. Vous n'êtes pas obligé d'utiliser le panneau des ressources ou le cadre Ressources. C'est exactement la même chose, peu importe ce sur quoi vous choisissez de compter. Étape par étape, désactivez la flèche déroulante, nous n'en avons pas besoin. A remplacé la largeur du titre, fait mûrir leur livraison de pizza. Des trucs géniaux. Pour l'icône de gauche, nous voulons la flèche de retour. Prends ton temps avec. Vous ne l'avez peut-être pas dans votre liste préférée, mais nous pouvons l' y ajouter en une seconde. Prends juste ton temps, alors tu devrais être prêt à partir. Bonjour L'icône, à droite, numéro un, car nous n'avons besoin que de l'icône d'information. Configurez ça et je pense que c'est terminé. Oui, dans l'ensemble, c'est un excellent progrès et je suis très enthousiaste. Bien sûr, tu dois t'entraîner. Bien sûr. C'est peut-être totalement nouveau et peut-être un peu confus, mais après l'avoir fait plusieurs fois, vous allez l'avoir compris. Crois-moi, je te le promets, tu vas y arriver. Il suffit de s'y tenir. Comme je l'ai dit, allez au composant principal et modifiez l'icône de gauche sur le backend pour accéder à la liste des préférences, car il est fort probable que nous l'utiliserons beaucoup. Et avec ça, faisons une pause. Merci beaucoup. 36. Accéder à la vitesse: Bienvenue à nouveau. Jetons un coup d'œil et voyons comment nous pouvons améliorer le design. Tout d'abord, passons de l' écran au système de notation. Faites-le glisser dans le cadre Ressources et déplacez l'icône à côté des autres. OK, c'est parfait. Maintenant, faites-en un composant. Et quand ce sera fait, Lee en sortira une copie. Maintenant, remettre l'emoji dans le cadre de mise en page automatique peut être un peu délicat sur le canevas lui-même. Mais si vous n'y parvenez pas, utilisez simplement le panneau des couches. Glissez-le et déposez-le. Maintenant, d'accord, souvenez-vous, ne mettez jamais un composant principal dans un autre, cela ne fonctionne pas. OK, transformons-en un composant, puis nous ajouterons la toute fin. Maintenant, nous pourrions potentiellement en faire trois. C'est ce que dit le brief, mais je vais être un peu plus simple. Alors, insérez un autre MOG, un MOG en colère, et vous en aurez un attaché et il s'appelle exactement comme ça en colère. Cela doit être 40 x 40 et la couleur clairement mauvaise. Maintenant, je n'ai pas de couleur spécifique. Golden mind, opte simplement pour quelque chose qui a l'air suffisamment différent de notre orange. Certaines personnes peuvent confondre l'orange ou le rouge, alors assurez-vous d'utiliser quelque chose de suffisamment différent. OK, créons également l' emoji ou le composant énervé. Ensuite, évidemment, sortez-en une copie. Au fait, je suis toujours favorable à une chose. Chaque fois que vous transformez une icône en composant, assurez-vous d'activer la mise en page automatique. C'est donc un changement, chaque icône ici a besoin de ce changement, d'un traitement. Sinon, ça ne va pas être beau. Maintenant, voyons de quoi il s'agit. Maintenant, c'est peut-être un peu difficile, mais je veux vraiment que tu le fasses de cette façon. Donc, une fois que vous aurez obtenu une variante de la carte d'origine, supprimez l'emoji vert et échangeons-le manuellement par un emoji en colère. Encore une fois, vous devez utiliser votre panneau Calques pour cela. C'est la façon la plus difficile de le faire, mais je pense vraiment que c'est un lit mouillé. N'oubliez pas de toujours travailler avec des eaux de Cologne et non avec des composants d'origine. Je vais le répéter encore et encore parce que c'est très important. D'accord ? Vous pouvez également remplacer les pourcentages et le nombre de votes si vous ne l'avez pas déjà fait, pour que cela semble réel. Et une fois que tout est terminé, vous pouvez en extraire une copie depuis le panneau des ressources ou n'importe où ailleurs et la tester. Vous pouvez nommer la propriété, l'état ou le statut, ou quelque chose comme ça. Quant à la variance elle-même, bonne ou mauvaise, positive ou négative, verte ou rouge, quel que soit le mot , elle vous convient le mieux. Je le répète, personne ne s'en soucie vraiment. C'est juste pour toi. Le plus important, c'est garder les choses simples et intuitives. Prenez votre temps et ajoutez des clones à l'écran numéro deux. Après cela, je pense que nous en avons presque fini. Maintenant, aurions-nous pu utiliser la mise en page automatique et divers autres éléments pour l'entrée au restaurant ? Je suis sûr à 100 % que nous pourrions transformer le tout en un composant, peut-être créer quelques variantes pour les cas où le restaurant est fermé pour la journée, par exemple, mais maintenant nous parlons de peaufiner des choses cela se fait généralement à la fin d'un projet coûteux. En gros, ce sont plutôt les mêmes techniques. Je vais donc sauter ça et appeler celui-ci. Alors. Faisons plutôt cela pour améliorer ma vitesse. Je vais refaire le login et enregistrer les verbes, mais avec un fond blanc, propre. Alors faisons-le. Commençons par une copie de l'écran numéro trois. Voyons maintenant à quelle vitesse nous pouvons gérer les choses. Pour l'échange de titres. Veuillez le remplacer par, veuillez vous connecter ou vous inscrire, puis aucune icône d'information sur le côté droit. Nous n'en avons pas besoin. Et en gros, c'est fait pour la partie supérieure. maintenant aux onglets, redimensionnons la barre à la sixième année. C'est la moitié de 720 car nous n'avons qu'à pondre des œufs. C'est un registre. Et puis connectez-vous. Veuillez remplacer le texte, mais nous pouvons conserver le style tel quel, orange et gras, puis normal et gris pour l'autre, pour le style inactif. Mais ce que je vais faire , c'est activer la transformation en majuscules. C'est un peu caché dans Figma, mais c'est très bien. OK, ça va aller N'oubliez pas d'envoyer la barre active V comme avant, mais avant cela, vous souhaiterez peut-être modifier le texte pour qu' il centre le texte au lieu de le laisser à gauche. Cela va nous aider dans tout l'alignement. D'accord. Maintenant, les onglets eux-mêmes ne prennent qu'une minute, mais bon, je me suis occupé de ça. Pense aux champs. Ils sont blancs et c'est un fond blanc qui va poser problème. Réfléchissons donc. Nous pouvons maintenant activer une ombre projetée. Mais je n'en veux vraiment pas une moche. Je préfère les ombres douces qui ne ressortent pas. Ceux qui sont vraiment visibles sont assez moches. C'est pourquoi je pense que nous allons utiliser un fond de couleur. Nous allons le modifier. Donc d'ici là, supprimez toutes les entrées. Voici le moyen le plus rapide de travailler. Récupérez tous les champs de l'autre version de ce vert, puis faites-en glisser une copie ici. Maintenant, placez le tout à 30 pixels du haut et vous devriez être prêt à partir. J'espère que vous voyez le problème avec le blanc sur blanc. Ça ne marchera pas. Maintenant, l'ensemble fixe, sélectionnez le tableau d'art, puis échantillonnons la couleur de l'écran avec du. Maintenant, le code couleur au cas où vous suiviez est f z, F11, F8. Mais il est plus simple et plus rapide de l'échantillonner. C'est donc à cela que sert l'outil compte-gouttes. Alors faisons-en bon usage, non ? Mais même en arrière-plan, les champs ne se démarquent toujours pas. De plus, l'étiquette est également blanche. Alors, que devons-nous faire ? Eh bien, cela touche à la fin. Revenons au cadre Ressources et voyons ce que nous pouvons faire. Prenez toujours le temps de bien arranger tous ces gars. En général, vous les auriez sur une page séparée avec un espace infini, mais je voulais les garder proches pour que vous les voyiez constamment. OK, créons la variante et appelons-la pour le simple BG, pour un arrière-plan simple ou quelque chose comme ça, qui a du sens pour vous. Maintenant, l'étiquette doit être bleue, même poids, mais de couleur différente. Ça devrait être joli. Maintenant, pour ce qui est de l'astérisque, il apparaîtra très bien en orange, je crois qu'il va ressortir. Maintenant. Nous verrons dans une minute s'il est vraiment beau. Passons maintenant au champ lui-même, passons à une ombre basique. Je vais en fait conserver les paramètres par défaut. Maintenant, voici le truc. Nous pourrions également utiliser un tableau. Eh bien, l'essai, diverses autres choses. Mais dans l'ensemble, je suis plutôt content jusqu'à présent. Maintenant, allons-y et essayons-le. Alors. Tu vas voir quelque chose. Lorsque vous remplacez tous ces champs sans la variante par le nouveau, seule l'ombre s'applique. La couleur de l'étiquette ne change pas réellement. Voici pourquoi. Retournez à la toute fin. Si vous voulez pouvoir modifier votre niveau de poules plutôt que changer d'état, particulier changer de couleur, vous devrez utiliser un échec. Ici, nous avons deux couleurs. Mais pour vous faciliter la tâche, nous allons le faire. Je vais supprimer l'astérisque pour que le remplissage ne soit plus mélangé. C'est ce qui cause les problèmes. Maintenant, ce devrait être le bleu, la couleur principale. Alors maintenant, si nous allons l'essayer, vous verrez que cela fonctionne très bien. Nous pouvons même modifier le contenu de l'étiquette, puis passer d'un état à l'autre. Nous sommes donc en train de modifier les textes actuels. Et puis, en appliquant le nouvel état et en le faisant fonctionner, tout va bien. C'est tout va bien. C'est le problème que nous avions mélangé sous remplissage et qui gâchait les choses pour la Figma. Mais qu'en est-il des hommes qui voyaient le symbole du risque ? Eh bien, l'astérisque doit être défini comme une autre couche de texte. Faisons en sorte que cela se produise. Donc, une fois que vous l'avez, assurez-vous qu'il est correctement rangé, puis configurez le remplissage. Maintenant, pour le premier, faut bien sûr qu'il soit jaune, car c'est pour un fond de couleur. Sélectionnez-le avec l' étiquette, puis utilisez Shift. Par défaut, ils seront empilés. Mais vous pouvez changer l' orientation à partir d'ici, de verticale à horizontale. Et en gros, nous sommes prêts à partir. Répétez la même chose sur la variante. Ajoutez l'étoile, changez de couleur en orange, puis utilisez une mise en page automatique avec l'étiquette. OK, maintenant j'ai changé d'orientation. Et en gros, nous sommes prêts à partir. Permettez-moi de récapituler, car nous avions deux couleurs différentes sur l' étiquette lorsque nous changeons de variance, lorsque nous changeons d'état, l'étiquette est restée blanche. Figma commençait à s'embrouiller. Nous avons séparé les figues par l'astérisque et nous avons appliqué une couleur pour l'étiquette et une autre pour l'étoile. De plus, une chose que vous pouvez faire est de créer un textile, appeler étiquette ou quoi que ce soit autre, je trouve que c'est très bien. Juste au cas où vous auriez une double étoile sur les écrans précédents. C'est juste parce que je l'ai tapé manuellement, vous avez probablement fait la même chose. Donc, ce que vous allez devoir faire, c'est supprimer un par un. Une chose à noter est que je n'ai pas transformé l'astérisque en composant. Ce n'est pas nécessaire, du moins pas pour le moment. D'accord. Je pense que nous sommes plutôt bons. Assurez-vous de regarder cette conférence au moins deux fois. Je voulais vraiment inclure cela dans le cours parce que c'est une erreur que j'ai commise moi-même lorsque j'ai commencé à étudier la variance. Et je pense qu'il vaut mieux que vous le sachiez , car je travaille en arrière-plan, laissez-moi vous dire ce qu'il faut retenir. Lorsque vous avez affaire à des boutons ou à des champs. Pensez toujours aux États-Unis dès le départ et créez-les dès que possible. Vous savez, la plupart des boutons doivent être désactivés. Vous savez, la plupart des champs nécessiteront une étiquette activée ou désactivée. C'est donc de l'expérience pour vous. Ainsi, dans le prochain projet, vous pouvez les créer immédiatement. Et bien sûr, vous pouvez aller encore plus loin. Vous pouvez penser aux états de survol. S'il s'agit d'un site Web ou d'états actifs pour le champ, peut-être une validation, peut-être un trait rouge lorsque vous entrez le mauvais format pour le mot de passe. Peut-être que le mot de passe est trop court, des choses comme ça. Peut-être un trait vert sur le terrain si tout va bien. Maintenant, il vaut mieux gérer toutes ces choses dès le début. Sinon, vous pourriez rencontrer des problèmes comme celui que nous venons de rencontrer. Maintenant, avant de terminer, j'aimerais changer la position des boutons en bas, à 32 pixels du bord. Je l'ai fait avant d'autres projets, et je pense que cela a vraiment du sens pour l'utilisateur. En gros, on s' habitue à cette position et c'est plus facile pour l'utilisateur. Tu sais qu'il est toujours là en bas. Sont homosexuels. Avec ça. Continuons. 37. Utiliser les champs de la bonne façon: Bienvenue à nouveau. Travaillons sur l'ajout d'une nouvelle adresse et mon inflammation, qui sont deux écrans basés sur des champs. Et c'est à peu près tout. Commencez donc par une copie du dernier écran et repartons du haut. Remplaçons la largeur de la Bible, ajoutons la nouvelle adresse. Vous pouvez supprimer les onglets car nous n'en avons pas besoin. Mais cela nous montre qu'il n'y a pas de séparation claire à cet égard. Nous devons donc faire quelque chose. En gros, ajoutons l' ombre d'Effects. C'est le moyen le plus simple de le gérer. Maintenant, les réglages devraient concerner le flou. Et deux pour le y. C'est une ombre très, très douce, mais c'est ainsi que vous devez généralement les aborder. Si vous pouvez clairement voir une ombre, c'est probablement terminé. OK, maintenant, ajoutons quelques nouveaux champs dont nous avons besoin pour l'anecdote. J'ai adoré le fait qu'une fois le copieur terminé , Figma se rende compte que vous en voulez plus. Ainsi, lorsque vous appuyez sur Ctrl D, il place automatiquement correctement la copie suivante. Ce sont des trucs adorables. Bon travail. Figma. Lorsque vous êtes prêt, mettez-vous au travail et remplacez toutes ces étiquettes. Par conséquent, j'ai mon wireframe sur l'autre écran, ce qui me permet de les lire assez facilement. C'est pourquoi il vaut vraiment la peine d'avoir deux présentoirs, sa ville. Et puis la main est, sélectionnez la ville. Ensuite, nous avons le nom de la rue et ils ont choisi un indice qui dit Market Street. Pour autant que je sache, c'est une vraie rue de San Francisco. Si le client vient de là, cela va donner l'impression que c'est plus réel. Maintenant, le numéro de rue, disons 548 avec un indice. Enfin, le code postal que j'ai googlé, c'est le jeu 94104 Dash 5401. Ils s' y prennent et ne les abandonnent jamais à leurs défauts. contenu répétitif est probablement la pire chose que vous puissiez faire en tant que designer. Eh bien, au moins l'un d'entre eux. Maintenant, pour la ville, nous allons avoir besoin de l'icône déroulante. Veuillez donc l'activer à partir de ce commutateur , puis utilisez la liste déroulante pour sélectionner le triangle. L'espacement doit être modifié par rapport à l'espace plein entre les deux, mais nous l'avons déjà fait dix fois. Je pense donc que tu peux te débrouiller. Maintenant, pour le bouton, il devrait indiquer Créer une adresse. Et je pense que c'est à peu près tout. Maintenant, je vais zoomer l'autre écran, mes informations, car il s'agit essentiellement de la même chose, des mêmes techniques. En attendant, je pense que la fonctionnalité à venir la plus excitante est la grille de contenu. Il s'agit d'une fonctionnalité d' Adobe XD qui vous permet d'intégrer facilement de nombreux contenus. Supposons, par exemple, que vous ayez 20 vignettes et que vous souhaitiez 20 images différentes. Eh bien, plutôt que de les insérer un par un, il suffit de les faire glisser. Et c'est ce que fait le programme. De plus, il en va de même pour les couches de texte. C'est l'un des aspects les plus impressionnants d'Adobe XD. Et maintenant qu'Adobe a racheté Figma, j'espère que ce n'est qu'une question de temps avant que nous n'obtenions cette fonctionnalité. Maintenant, connaissant Adobe, cela peut prendre des semaines ou des années. Bref, il y en aura pour vous en un mot. C'est une entreprise énorme et puissante, mais certaines choses sont incroyablement lentes, en particulier certaines fonctionnalités. Quoi qu'il en soit, ce sont tous des champs joliment boutonnés. Assurez-vous de tout gérer de votre côté, puis passez à la prochaine conférence qu'après avoir effectué cette étape. Merci beaucoup et je te verrai dans une seconde. 38. Créer le menu gauche: Bienvenue à nouveau. Concevons un beau menu de gauche selon les directives de conception matérielle, commençant par une copie de l'écran précédent, mais vous devrez tout supprimer à peu près. Seule la barre d'état est utile. Nous allons donc créer ce menu à partir de zéro. Si vous ne connaissez pas le menu de gauche, en cliquant sur le menu des hamburgers, vous accédez à vos paramètres, vos modes de paiement, etc. Commençons par un rectangle pour la partie supérieure. Cela doit être de 720 x 288 x 288 pixels. C'est la norme doublée de 144 dpi. Nous allons maintenant le rendre orange, même s'il peut s'agir d'un dégradé ou même d'une photo. C'est pourquoi j'aime bien cette mise en page même si elle provient de Google Material Design pour la placer correctement. Et ensuite, plaçons le logo au-dessus. Désormais, le logo peut être remplacé par un avatar. Et encore une fois, c'est une fonctionnalité intéressante du menu de gauche. Cela le rend plus intéressant. Mais voici le truc avec le logo. Nous ne voulons pas le texte, juste l'icône. Nous pourrions maintenant créer une propriété booléenne, mais restons simples. Dans le cadre Ressources, faites simplement glisser l'icône vers l'extérieur. Comme vous pouvez le voir comme un vecteur autonome, aucun composant, rien. C'est très bien. Installez-le dans un nouvel écran et nous allons le redimensionner. Je pense qu'un à cinq sur un à cinq convient parfaitement à ce rectangle spécifique. Et c'est parce que cela nous laissera suffisamment de place pour ajouter quelques détails tels que le nom de l'utilisateur et son adresse e-mail. Maintenant, vous vous demandez peut-être, Chris, pourrions-nous utiliser une mise en page automatique ici ? 100 % ? Bien sûr. Maintenant, devons-nous ajouter une mise en page automatique ? Non, pas vraiment. C'est pourquoi je vais rester simple. Affiche le logo à 32 pixels depuis le côté gauche. Et vous pouvez utiliser le champ x pour cela. Ou vous pourriez simplement maintenir la touche Alt enfoncée et mesurer les choses, puis appuyer sur les touches qui vous conviennent et c'est très bien. Maintenant, la distance par rapport au sommet n'a pas d'importance à ce moment précis. En dessous, écrivons mon nom, Christian Baron Quest Barron. En termes de style, un titre plus petit devrait convenir. Alignez-le à gauche avec l'icône et laissez-en une dizaine de pixels, plus ou moins. Bien sûr. Enfin, l'adresse e-mail, Chris baron@yahoo.com. Ce n'est pas mon véritable e-mail, donc s'il vous plaît, ne l'utilisez pas. En fait, ne m'envoyez pas d'e-mail en général, utilisez la plateforme pour vous connecter rapidement ou, bien sûr, le serveur Discourse. Je suis toujours là. D'accord ? Cela devrait être montré dans le style de la carrosserie, mais en blanc pur. Et une fois ces trois éléments sélectionnés, nous pouvons maintenant les déplacer vers le haut ou vers le bas pour les placer au centre du rectangle orange. Encore une fois, pourrions-nous utiliser une mise en page automatique ? Bien sûr, mais je suis d' accord dans l'état actuel des choses. À partir de maintenant, nous aurons besoin de quelques icônes et d'une couche de texte. Maintenant, le fond lui-même doit être d'un blanc pur. Sélectionnez le cadre et remplacez le remplissage par du blanc pur. Une chose que je n'ai pas mentionnée est le fait que le menu de gauche fait en fait les deux tiers de la largeur de l'écran. Mais nous y sommes allés fond car cela n'a aucun impact pour le moment. Nous pouvons donc continuer comme ça. Maintenant. C'est l'heure des icônes. J'ai déjà préparé quelque chose. Ils proviennent de flat icon.com. J'ai passé beaucoup de temps à les chercher. Vous les avez attachés puis numérotés de haut en bas pour que vous puissiez les utiliser plus facilement. S'il te plaît. Cependant, ne les utilisez pas à des fins commerciales. Vous les avez juste pour pouvoir travailler ensemble. Si vous voulez les utiliser pour vos propres projets, nous devons les payer. D'accord ? Maintenant, lorsque vous faites glisser de nombreuses icônes à l'intérieur, elles peuvent vous poser des problèmes. Par exemple, si j'essaie de sélectionner les cinq premiers , regardez ce qui se passe. La cinquième icône n'est pas sélectionnée pour le moment. Je dois faire une boîte beaucoup plus grande pour le récupérer. Cela peut donc être un peu frustrant d'avoir plus de facilité avec eux. Je te suggère de le faire. Ainsi, une fois que vous avez réussi à les sélectionner tous les cinq pour sélectionner une case, utilisez Shift a, puis changez le mode de mise en page en passant de horizontal, le mode par défaut dans ce cas deux à la verticale. Maintenant, il ne reste plus qu'à régler la distance. Je vais dire environ 60 ou quelque chose comme ça. Et c'est parce que nous voulons éviter les clics accidentels. Nous devons donc être généreux sans espacement. Bien sûr, les icônes sont toujours centrées. C'est un must absolu. Vous pourriez être tenté de les aligner à gauche, mais veuillez utiliser le centre. Vous pouvez le faire en cliquant ici. OK, en termes d'espace vide, d2 pixels comme avant, restons cohérents. N'hésitez pas à utiliser le champ x pendant que nous avons configuré la mise en page automatique. L'avantage est que vous pouvez toujours supprimer la mise en page automatique. Il suffit de cliquer ici sur le côté négatif, en gros, et ensuite avec. Désormais, par défaut, ils seront regroupés, mais pas de soucis, cliquez simplement avec le bouton droit de la souris et choisissez Dissocier. Maintenant, pourquoi voudriez-vous faire ça ? Parce que nous voulons ajouter des couches de texte et que nous pourrions avoir du mal à les aligner correctement si nous les regroupons. OK. Maintenant, permettez-moi d'ajouter le premier objet ou l' escouade juste les commandes en général. Je veux que cela soit affiché dans le style de l'étiquette. Cela signifie donc un nouveau Nieto 30, audacieux. Si vous ne l'avez pas, veuillez le configurer en tant que textile. C'est pour cela que la couleur bleue est tout à fait correcte. Veuillez l'aligner verticalement et Figma devrait vous aider à franchir ces lignes rouges. Mais voici le problème. Les icônes ne se trouvent pas à l'intérieur de cet écran. L'écran est appelé cadre pour le, mais les icônes elles-mêmes sont beaucoup plus hautes. En gros, je les fais glisser dans Figma, mais je n'avais probablement pas de cadre pour les désélectionner. Figma ne les a donc pas placés dedans. Pas de soucis. Sélectionnez-les tous et faites-les glisser dans le cadre 40. Cela va régler le problème. OK. C'est plutôt bien. Génial. Je vais avancer rapidement pendant que je fais toutes les autres dans l'ordre, nous allons avoir ce qui suit. Donc, le premier, mes ordres, puis Inflammation, adresse à quelle adresse ? Modes de paiement et contactez-nous. Ces icônes sont belles et élégantes, mais elles sont assez sérieuses. Vous pourriez chercher ceux qui sont un peu plus intéressants, peut-être un peu plus ludiques. Maintenant, les couleurs peuvent être tentantes, mais vous devez vous assurer qu' elles ne donnent pas à l'application un aspect enfantin car la police est déjà ludique. Vous devez donc vous assurer de rester à l'écart de cela. Se rendre dans un territoire adapté aux enfants peut être dangereux. Vous voulez rester semi-professionnel. OK, ça a l'air bien. Disons qu'en bas nous allons avoir un bouton de déconnexion. Faisons en sorte que cela se produise. Ajoutez donc une autre couche de texte. Et nous allons faire quelque chose comme ça. Le texte lui-même n'a rien de spécial. Nous allons avoir une icône séparée pour cela. Maintenant, juste à titre de remarque, nous aurions pu utiliser quelques mises en page automatiques ici et là. Nous avons donc pu ajuster l'espacement entre les icônes et le texte ainsi qu'entre chaque ligne. Mais vous savez quoi, en fait, je vais vous laisser vous occuper cela parce que cela devrait être assez facile à faire. Maintenant, pour terminer la conception, séparons la zone de déconnexion en ajoutant un séparateur. Utilisez donc le raccourci L de l'outil de ligne et dessinez-en un, 720 avec un seul pixel pour l'épaisseur. Maintenant, choisissez la couleur grise du corps. Vous devriez avoir enregistré un style coloré. Et le truc avec tous ceux qui sont prêts à partir. Voilà le truc. Il s'agit d'un menu de gauche moderne, épuré et professionnel. Nous pourrions faire quelque chose d'un peu plus intéressant. Mais encore une fois, je vais te laisser faire parce que je veux te voir vierge et je voulais te donner de nombreuses options. Encore une fois, vous allez devoir trouver quelque chose d'un peu plus intéressant. Pour l'instant, nous pouvons continuer. 39. Créer des cases à cocher interactives: Bienvenue à nouveau. Nous devons gérer le bon menu. Commencez par une copie de celle de gauche. Supprimez l'icône et le texte de déconnexion ainsi que toutes les autres icônes. Nous pouvons maintenant conserver le séparateur et les couches de texte. Ce sera un système de filtrage qui permettra à l'utilisateur de modifier la liste des résultats. C'est ce que vous obtenez lorsque vous cliquez sur cette icône en haut à droite à l'écran, mais que vous le faites. Maintenant, pour le premier lot de choix, nous allons saisir ces catégories. Nous allons donc avoir l'espagnol, l' américain, l'international, l'indien. Et enfin, c'est Valiant, pas de portail, prenez votre temps avec. Vous pouvez éventuellement en ajouter quelques autres ou en supprimer certains, assurez-vous simplement qu'ils correspondent. Passons maintenant à l'outil rectangle qui cherche à créer une case à cocher. 48 feuilles sur 48 pour le rayon des coordonnées par rapport aux pixels, c'est très bien. OK, jetons un coup d' œil aux paramètres. Désactivons le remplissage. Nous n'en avons pas besoin. Et activons le trait ou le panneau, le portail. Maintenant, la couleur de la bordure est très importante. L'épaisseur, trois pixels s'il vous plaît. Passons maintenant à la couleur, donc le fait est que si elle est trop claire, elle peut sembler désactivée ou inactive. Le noir peut être perçu comme trop sur votre visage. J'ai donc opté pour ce code couleur, C3, C3, C3. Maintenant, n'hésitez pas à le sauvegarder. Ensuite, vous allez colorer les styles en gris clair ou quelque chose comme cette couleur de case à cocher. Maintenant, je pense que le gris fonctionne un peu mieux. Maintenant, cela va en fait être un composant. Convertissons donc cela en cliquant ici. Lorsque vous êtes prêt, déplacez-le vers le cadre Ressources. Ils passent un bon moment avec ça. Tu vas devoir te déplacer un peu. N'oubliez pas de faire un zoom arrière, d'appuyer sur Contrôle, d'utiliser le défilement de la souris, d' utiliser la touche Spacewalk pour vous déplacer. Ici, nous voulons créer la variante. Vous devriez déjà connaître le processus . Voilà le truc. Supprimons la bordure et rendons tout le rectangle orange. Encore une fois, prenez votre temps. Ne vous précipitez pas. OK. Lorsque vous serez prêt, nous devrons ajouter la coche. Et comme toujours, j'ai préparé quelque chose. Vous avez cette icône, le lot, faites-la glisser dedans, mais voici le truc. Lorsque vous souhaitez l'aligner à l'intérieur de ce carré, assurez-vous de regarder le panneau des couches. C'est parce qu'il est assez facile d'être désorienté. Et vous ne savez peut-être pas pourquoi les outils d'alignement ne fonctionnent pas comme prévu. C'est ce que tu veux. D'accord ? Au fait, assurez-vous de renommer la propriété. Et en fait, les deux variantes également. Appelez-les cochés et non cochés comme s'il s' agissait de la propriété elle-même. C'est probablement un état, je pense que c'est bien. Statut d'État, selon ce qui vous convient le mieux. Encore une fois, c'est coché et désélectionné. OK, revenons à l'écran. Nous devons faire glisser cette case à cocher depuis le panneau des ressources et effectuer plusieurs mouvements pour les aligner correctement. Maintenant que je travaille en arrière-plan, je tiens à dire que j' aime beaucoup enseigner le design AB. Ce processus repose lui-même sur quelques principes et techniques. Une fois que vous les avez maîtrisés, vous pouvez vraiment vous concentrer sur ce qui est important. Et c'est ainsi que l'application s' affiche, fonctionne et fonctionne. Comme je l'ai dit, des millions de fois, personne ne se soucie de la façon dont vous avez créé l'application. Ce n'est pas leur affaire de créer des composants, des variantes et des mises en page automatiques. Le résultat final est ce qui compte, son apparence, son fonctionnement. C'est ce qui compte. Peu importe que vous l'ayez fait dans Photoshop, Figma et Adobe XD. Maintenant, il est évident que vous voulez utiliser les meilleurs outils pour le travail et les techniques les plus avancées. Mais encore une fois, l'accent mis sur ce qui est important. OK, revenons-y. Juste au cas où vous auriez besoin d'une certaine flexibilité, cochez chaque case et marquez ensemble , puis utilisez Shift a. Vous le faites pour chaque option. Nous allons tous les sélectionner. Et puis vous l'avez deviné, nous allons en faire une autre, la mise en page automatique. Et voici le truc. Nous en avons besoin car le premier contrôle la distance entre la case et le texte, la case à cocher dans le texte. Supposons que nous en voulions 20, eh bien, il suffit de sélectionner tous ces cadres et vous pourrez rapidement modifier cet espacement assez simple. Et puis le plus grand nous aide à modifier la distance verticale. Nous en voulons 40, par exemple non ? Encore une fois, il suffit de le saisir. Génial. Maintenant, pour donner un peu de contexte à l'utilisateur, ajoutons un texte indiquant Afficher uniquement. Cela change un peu la mise en page, mais je pense que c'est bien. Il a besoin du style du corps du texte et du gris pour le code couleur. Nous ne voulons pas qu'il se démarque trop. N'oubliez pas qu'il ne s'agit que d'une petite partie du menu. Nous avons en fait deux types de filtres. Nous avons donc le type de cuisine, puis le type de nourriture. Lorsque vous êtes prêt, remontez le séparateur depuis le bas. Nous voulons environ 30 pixels entre la dernière case à cocher et le séparateur jusqu'à la ligne. Génial. L'idée est maintenant de montrer au client et au développeur à quoi ce panneau est censé ressembler. Veillez donc à modifier l'état de deux ou trois cases à cocher. Faites-les en orange, puis faites de même pour le texte associé. Faites-les simplement oranges. Lorsque vous êtes prêt à passer à autre chose, prenez simplement tout ce qui se trouve ici et faites-en une copie en bas. Maintenant, permettez-moi d'accélérer les choses à mesure que je change de type d'aliment. Il y aura donc des pizzas, tacos, des hamburgers, du café, etc. Certains éléments peuvent ne pas rentrer dans l'écran, mais ce n'est pas grave. En fait. C'est génial parce que nous devons montrer qu'il est possible de le faire défiler. OK, maintenant voici le truc. La zone supérieure est inchangée et ce n'est pas cool. Maintenant, en général, lorsque vous avez affaire à des filtres, vous devriez avoir un moyen de les effacer. Donc, par exemple, si nous avons quatre cases à cocher, il serait assez ennuyeux de les décocher manuellement. Alors faisons-le. Supprimons le logo et l'adresse e-mail. Avec la couche de texte restante, changeons-la en quatre filtres actifs. Et sur le côté droit, j'aimerais utiliser une icône. Mais je pense que cette couche de texte pourrait fonctionner un peu mieux. Il sera un peu plus utile d' être plus large. Tapez donc en clair en majuscules, même police bien sûr. Une chose cependant, veuillez également laisser 32 pixels sur le côté droit. Sur la gauche. C'est assez facile à faire car nous avons le champ x qui nous aide beaucoup. Maintenant, nous aurions pu utiliser des guides, mais dans l'ensemble, c'est bien. OK, redimensionnons le rectangle. 2112 pixels, 112 pixels, la hauteur standard. OK, quand tu seras prêt, tu pourras centrer le texte et je pense que nous en avons fini. Eh bien, pas à 100 % avec l'écran Intel, mais nous allons le terminer après la pause rapide. Assurez-vous de rattraper votre retard. Merci beaucoup. 40. Créer des commutateurs à bascule: Bienvenue à nouveau. Le menu de droite a l'air sympa, mais nous avons quelques options à créer. Tout cela est basé sur le brief. Je ne le montre pas pendant l'enregistrement car cela ralentit toute progression. Mais assurez-vous que je le vérifie constamment et vous devriez faire de même. D'accord. Permettez-moi de faire une copie de l'émission télévisée ainsi que trois entrées. Fais-le. Faites une copie de cette mise en page automatique, la plus importante. Et puis tu vas devoir le retirer. N'oubliez pas d'utiliser le symbole moins sur le côté droit, celui-ci. Lorsque cela sera fait, vous aurez un cadre par défaut. Je peux dire que j'adore Figma, mais c'est ce que c'est. Nous allons devoir cliquer avec le bouton droit de , puis choisir Dissocier. Maintenant, vous êtes libre de faire ces copies. Maintenant, aurions-nous pu saisir manuellement de nouvelles couches de texte ? Oui, bien sûr. Mais je pense que nous devons être à l'aise avec le fait de nous salir les mains. Même chose ici pour ce qui est de l'organisation des choses. Vous allez voir, vous allez devoir déplacer des tas de couches. Il s'agit d'un véritable projet qui vous oblige à réfléchir. Si vous n'êtes pas à l'aise pour déplacer des objets comme ça, vous allez avoir un gros problème. La plupart des projets ne sont ni beaux ni soignés. Ensuite, plus ils sont désordonnés, ils sont maladroits. Le plus souvent, ce que vous voyez dans un cours est une version très soignée qui a été préparée plutôt que répétée. Dans ce cas précis, j'ai déjà créé ce projet dans Photoshop et Adobe XD. Je le connais bien, mais je fais tout de même de mon mieux pour vous faire une expérience authentique en incluant quelques erreurs et des lits en désordre. OK, nous y voilà. J'ai supprimé les cases et toutes les couches de textes doivent être bleues et alignées à gauche avec tout le reste, bien propres. Créons maintenant un interrupteur à bascule. Commencez par un rectangle de 72 x 33 z. Maintenant, pourquoi cette taille spécifique, 72 x 30 ? Eh bien, j'ai mesuré les autres obstacles et cela semble être dû à l'argent. Rendez-le très arrondi. J'aime utiliser des valeurs très élevées. Passons maintenant à la couleur, utilisons C3. C3, C3. Vous devriez l'avoir alors vous verrez le panneau Styles. OK, maintenant, alignez-le sur le côté droit. Vous pouvez utiliser la couche de texte clair pour cela. Ensuite, sur la liste, nous allons devoir saisir l'outil ellipse et créer un cercle parfait. Le raccourci clavier est 0, 0 depuis le cercle. Je pense que c'est logique. Vous pouvez maintenir la touche Shift enfoncée ou utiliser le panneau des propriétés. Je cherche le 48 x 48, de la même taille que les cases à cocher. Cela doit être blanc, mais bien sûr, nous pouvons voir ce qui se passe avec le fond blanc. Pour cela, nous allons activer un drop shadow. Maintenant, les paramètres que j'ai trouvés fonctionnent le mieux comme suit. C'est six pour le flou, puis deux pour le champ Y, 25 % d'opacité. Maintenant, le cercle doit être placé sur le côté gauche pour indiquer qu'il est éteint. Bien sûr, assurez-vous qu'il est centré verticalement. Lorsque vous êtes prêt, déplacez-le vers le cadre Ressources. N'oubliez pas que tout est bien structuré fonctionne très bien. L'idée avec les pages est que vous pouvez faire une très belle présentation afin que tout le monde puisse facilement exploiter votre projet. Dans ce cas précis, je le fais à des fins d'apprentissage. Je ne vais donc pas le diviser en pages car ce n'est pas idéal. Pour la toute fin. C'est en fait assez simple. Faisons ça. Maintenant. Déplacez le cercle vers la droite et remplacez le rectangle par le bas en orange. Maintenant, la dénomination doit être simple à activer ou à désactiver. Et vous pouvez renommer la propriété si vous le souhaitez. Encore une fois, état de statut, quelque chose comme ça. Maintenant, les touches finales sont revenues à l'écran, et ajoutons trois d'entre elles en haut de l'écran. Écrivons-leur donc la ligne en clair. Mais voici le truc. Ça va être difficile de les arranger correctement. Lorsque vous essayez de les aligner verticalement avec le texte, le texte peut bouger pour différentes raisons. Je ne vais pas entrer dans le vif du sujet. Donc, en gros, vous ne vous faites aucune faveur de cette façon. C'est pourquoi nous allons appliquer une mise en page automatique pour chaque ligne. Ensuite, nous allons faire une grande mise en page automatique, juste comme ça. Et nous allons mesurer l' espacement par le dessous. Je pense que nous l'avons fixé à 40. Oui. Cela semble à peu près correct. S'il vous plaît, activez et c'est celle qui est désactivée. Je pense que cela semble plus intéressant de cette façon. Mais les étiquettes elles-mêmes, eh bien, le brief disait quelque chose sur la pré-livraison. Acceptez les cartes de crédit et les cartes de crédit de 60 minutes ou moins. Oh, au fait, c'est un excellent moment d'enseignement. Lorsque vous modifiez le texte, la mise en page automatique peut vous donner quelques maux de tête. Pas de soucis. Voici les faits. Changez la largeur en fixe. Cela va ouvrir le champ de largeur. Et ici, vous pouvez en mettre 656. Vous pouvez mémoriser cette valeur à partir du diviseur. C'est la taille totale de l'écran -32 de chaque côté, donc c'est 64. Alors au total. Enfin, la mise en page automatique a été modifiée passant d'une mise en page compacte à une disposition intermédiaire. Et en fait, c'est du travail, bravo. L'ensemble de cet écran doit être configuré. Même si cela ne semblait pas si compliqué. Ces deux menus nous ont poussés à faire du bon travail. Si vous parvenez à arriver ici, mes félicitations, cela n'a pas été facile. Mais maintenant, faisons une petite pause et nous allons continuer dans une seconde. Merci 41. Cartes de conception avec composants: Bienvenue à nouveau. Il est temps de créer mes modes de paiement et je pense que nous devrions utiliser une carte pour cela. Et comme je sais qu'il existe un autre écran qui utilisera le même design de carte, ce sont mes adresses. Ensuite, nous devrions en faire un composant. OK, commençons par une copie de mon inflammation. Supprimons tous les champs, mais nous allons conserver le bouton. Maintenant, cela devrait indiquer « ajouter une nouvelle carte ». Dans le passé, j'utilisais un bouton d'action flottant et un FAB, mais je tiens à ce que l'utilisateur se sente très à l'aise avec la position de ce bouton. Donc, en gros, il devrait toujours être en bas. Nous allons donc nous en tenir à cette position. maintenant à la barre d'actions, changeons le titre en modes de paiement. Au fait, vous pourriez même avoir une icône plus dans la barre d'action pour ajouter une nouvelle carte de crédit. C'est vraiment à toi de décider. Ces décisions doivent être basées sur ce qui convient le mieux à l'utilisateur. Un avantage dans la barre d'action n' est probablement pas idéal. Mais étant donné que vous ne l'utiliserez pas si souvent, vous pourriez potentiellement tout utiliser dans son ensemble. Je suis content du bouton orange qui se trouve ici. Maintenant, avant de faire quoi que ce soit de fantaisiste, ajoutons simplement les couches de texte, la base. La première sera donc la carte principale, ce qui aidera l'utilisateur à savoir quelle est la carte par défaut, le cas échéant. Maintenant, pour être honnête, nous devrions inclure l'écran lorsqu'aucun mode de paiement n'est sélectionné. Mais nous en reparlerons plus tard. Bref, nous allons ignorer un certain nombre d'écrans de base dans les écrans multimédia car ils n'ont rien de spécial. Nous pourrions ajouter au moins dix écrans supplémentaires. Mais encore une fois, ce ne sera pas nœud aussi intéressant qui soit utile. OK, ensuite, ajoutons une modification qui est épaisse. Maintenant, pour le numéro des cartes, je vais utiliser un noir créé en utilisant alt Z, celui B9. Encore une fois, c'est en utilisant alt et les touches numériques de votre clavier, 0139. Et une fois que vous avez un point, copiez-le simplement plusieurs fois. N'oubliez pas quatre personnages par groupe, soit quatre au total. Si vous ne pouvez pas vous débrouiller avec un point, utilisez simplement une étoile. C'est Shift Eight. OK, pour le dernier groupe, cela devrait être visible afin que vous puissiez identifier la carte. Génial Maintenant, aucune discussion sur le style pour le moment. Terminons avec la date d'expiration zéro pour la barre oblique 28, par exemple, et nous pouvons maintenant parler de la transformation de cette carte en une carte réutilisable. OK, alors faisons-le pour la première ligne. Utilisons le style de titre plus petit au cas où vous ne l'auriez pas. Cela signifie une nouvelle aiguille noire de 26 pixels. Mais la deuxième ligne , utilisons le body styling. Nouveau Nieto, 24 pixels irréguliers. Maintenant, en termes de couleur, édition doit être orange puisqu'il s'agit d'une action, elle doit montrer que vous pouvez cliquer dessus. Pour le reste. Nous allons simplement utiliser le bleu. C'est super basique. Pourrions-nous éventuellement utiliser du gris pour la deuxième ligne ? Oui, je pense que ça marche aussi. C'est vraiment à toi de décider. Mais je vais m'en tenir au bleu. Maintenant, pour ce qui est de la carte elle-même, nous allons avoir besoin de plusieurs mises en page automatiques pour faciliter les choses. Je vais ajouter une autre action, en faire une action principale. Ce n'est pas utile ici, mais nous allons en avoir besoin pour les cartes secondaires. Hein ? Maintenant, allons-y un à la fois. Sélectionnez ces deux actions et configurez le changement automatique de mise en page. Parce que nous voulons pouvoir contrôler la distance qui les sépare. Disons dans ce cas probablement 50. D'accord, alors les trois couches de texte doivent former une seule ligne. Encore une fois, saisissez-les puis utilisez Shift a. Nous pouvons maintenant changer le mode d' espacement depuis pack, qui est l' espace par défaut entre les deux, car il est évident qu'ils doivent être divisés. Maintenant, rien ne s'est passé, mais c'est très bien. Maintenant, pour la deuxième rangée, saisissez les deux couches et appuyez sur Shift. C'est la même chose que nous voulons les placer dans un espace entre les deux plutôt qu'en arrière. J'espère que tout aura du sens jusqu'à présent. Enfin, pour pouvoir ajouter un seul champ pour tous ces gars, nous allons tout sélectionner comme ça, puis utiliser Shift une dernière fois. Cela nous donne non seulement la possibilité créer rapidement un fond blanc, mais nous pouvons également contrôler la distance verticale qui les sépare. Dans ce cas, disons par exemple que nous recherchons 32 de chaque côté et 16 en haut et en bas. C'est notre rembourrage. Bien entendu, nous ne conserverons pas les bords carrés. Ce n'est pas le cas, changez-le en dix pixels, par exemple et je pense que cela devrait être une bonne chose. OK, centrez-le à l'intérieur de l'écran si ce n'est pas déjà fait. Maintenant, nous pourrions rendre cela aussi flexible que possible, mais j'essaie toujours de garder les choses aussi simples que possible. Sélectionnez donc le plus grand cadre, celui qui a le remplissage blanc et remplacez-le par une largeur fixe. Et cela va ouvrir le champ W. Mettez-en 656. 656 pixels, et ça devrait être tout. Mais, vous voyez ce que j'ai à dire, 40 pixels entre ces deux lignes n'ont pas beaucoup de sens étant donné que nous avons une si petite literie. Donc, en fait, baissons-le à 20, mais augmentons le rembourrage à 32 pour les bords supérieur et inférieur. Si vous pensez que c'est trop , vous pouvez le refuser. Mais dans l'ensemble, j'en suis content. OK, transformons-en un composant. Je n'aime pas le raccourci clavier. J'ai toujours ma souris au centre de l'écran. est donc plus facile pour moi de cliquer sur l'icône en haut. OK, maintenant faisons glisser une copie vers l'extérieur et la centrons horizontalement. Je n'en ai pas parlé. Mais gardez 32 ou 32 pixels de l'ActionBar. Vous devez vraiment rester constant, car cela aide vraiment. OK, maintenant, pour la carte sélectionnée, principale doit être supprimée car il est évident que c'est déjà la carte principale. Et pour montrer qu'il est actuellement sélectionné, nous allons procéder comme suit. Nous pouvons ajouter la planche d'une planche épaisse. Les pixels pour la couleur orange seraient un peu trop importants. Allons-y avec le bleu et le jaune. Je ne pense pas que ce serait assez contrasté et cela pourrait être un peu difficile dans cette situation. OK, maintenant faisons glisser la deuxième carte depuis les actifs. Celui-ci aurait dû être conservé tel quel. Et pour que cela semble réel, veuillez modifier les quatre derniers chiffres de la carte de crédit ainsi que la date d'expiration. J'ai adoré cette stigmatisation et sais que je suis en mode édition de texte. Je n'ai donc qu'à cliquer une seule fois pour modifier ces couches de textes. Des trucs géniaux. OK, quand tu seras prête , passe à mes adresses. Je vais zoomer assez rapidement sur le mouillé. Et comme je travaille en arrière-plan, permettez-moi de vous parler un peu de Figma. Quels autres programmes de design étaient sur le marché il y a quelques années, par exemple Affinity ou Sketch, Figma, le monde du design d'assaut. Ils produisent du contenu qualité et ils ont vraiment réussi à créer une communauté avec toutes les petites choses que les gens demandaient. Eh bien, Figma a tenu ses promesses même si Figma était une toute petite entreprise, elle l' a fait par rapport à Adobe, qui a essentiellement de l'argent illimité, des bénéfices illimités, un nombre illimité de personnes, de talents. En fait, ils se sont déplacés assez lentement. C'est pourquoi j'ai inclus certaines personnes. Nous sommes un peu déçus par l'état d'Adobe XD. Les mises à jour n' arrivaient tout simplement pas assez vite. Je ne suis pas sûr à 100 %, mais si je me souviens bien, Adobe XD était en version bêta depuis au moins deux ans, au moins plus que cela, la version Windows, la première est sortie, je crois que c'était après un an, peut-être un an et demi après la version Mac, j'étais furieuse. J'étais tellement en colère. vois, j'ai toujours aimé Windows, mais j'envisage sérieusement de me procurer un Mac juste pour utiliser Adobe XD. Et puis quand j'ai vu qu' Adobe ne proposait tout simplement pas les mises à jour assez rapidement , la frustration s'est accrue. Et encore une fois, je ne pense pas être le seul à ressentir cela. C'est pourquoi Figma fait essentiellement appel comme un feu. Et avec cela, nous sommes prêts à passer à autre chose. Nous avons terminé ces deux écrans en un temps record. De plus, nous pouvons toujours revenir et ajuster l' utilisation des composants. Merci Je te verrai dans une seconde. 42. Voici comment créer un beau écran de carte de crédit: Bienvenue à nouveau. J'ai indiqué que nous ne concevrons pas tous les écrans intermédiaires, exemple lorsque vous n' avez pas d'adresse ou aucune carte de crédit n'a été enregistrée dans le système. Mais nous devrions tirer le meilleur parti de ces quelques écrans un utilisateur pourrait changer avis s'il risque de déposer, par exemple écran de la carte de crédit lorsqu' il en ajoute un à l'application. Commençons par faire une copie du dernier écran. Supprimez ces deux cartes car nous n'en aurons pas besoin. Un peu de ménage supplémentaire. Changeons l'appel à l'action pour enregistrer carte de crédit qui fera probablement l'action principale. Quant à la barre d'action elle-même, cela devrait indiquer ajouter un mode de paiement. Au fait, si vous voulez être intelligent, vous pourriez ajouter des titres plus chics, comme comment allez-vous payer ? Les jeunes apprécient vraiment cela. Maintenant, si le client vous présente un brief destiné à un public plus jeune, n'ayez pas peur de pimenter votre texte. pire des cas, le client n'aime pas ça et vous retournez aux choses ennuyeuses. Mais s'il l'aime, vous pourriez obtenir un bonus ou au moins faire bonne impression. Alors, pimentez les choses chaque fois que vous le pouvez. OK, gérons les champs. Au fait, saviez-vous que vous pouvez modifier le mode d'affichage dans le panneau des ressources. Je préfère donc la version miniature, mais il existe également une liste qui me montre à quel point je suis confuse dans mon nommage. Je lirais donc l'interrupteur pour cacher cet embarras. OK, ajoutons les champs dans, même s'ils se souviendront qu'ils les ont centrés sur le canevas. Le premier doit le battre en pixels par rapport à la barre d'action. Remplacez l'état par la version BG simple. N'oubliez pas d'ajouter un titre et une main appropriés. Maintenant, cela prend un certain temps, mais c'est tout à fait normal. Maintenant, dans les deux premiers champs, je vais être le numéro de carte de crédit, puis le nom de la voiture. Maintenant, pour le numéro de carte de crédit, j'ai trouvé préférable d'utiliser 12345678 et ainsi de suite. écraser la touche Z TO Franchement, écraser la touche Z TO n'a pas l'air génial. Maintenant, les deux autres champs doivent être une date d'expiration et le v. V. Maintenant, le code CVD est le numéro abrégé au dos de la carte. Étant donné que ces deux champs n'ont pas besoin d' être de pleine largeur car ils sont assez petits. C'est une bonne occasion de nous rappeler comment nous les fabriquons ni l'un ni l'autre. Et cela en utilisant une largeur fixe sur l'instance. Ensuite, descendez d'un niveau et configurez le champ lui-même pour remplir le conteneur. OK, j'espère que cela commence à avoir du sens. Le champ est à l'intérieur de quelque chose. Si c'est quelque chose de plus grand et que le champ est rempli, il est évident que le champ s'agrandira en conséquence et vice versa. Mais le paramètre par défaut dans notre cas est que le champ est défini sur fixe. Maintenant, peu importe à quel point nous modifions la largeur du conteneur principal, le champ lui-même, il fait son propre travail. n'est pas ce que nous voulons. C'est pourquoi nous le changeons pour qu'il remplisse le récipient. Génial Maintenant, tout va bien avec ces quatre champs. Mais il n'y a rien de nouveau ou de spécial dans ce vert. C'est pourquoi nous allons prendre le temps de concevoir quelque chose qui dépasse tous ces domaines. Alors saisissez-les tous et déplacez-les vers le bas. Commencez par un rectangle de 656 x, disons 350 ou quelque chose comme ça. Centrez-le et faites-le d'un blanc pur. L'idée est de créer un design de carte de crédit qui montre ce que vous mettez dans ces champs depuis le bas. Ainsi, lorsque vous tapez le texte, vous voyez la voiture changer. C'est très sympa. Je l'ai fait par le passé et c'est une bonne idée. Maintenant, est-ce nécessaire ? Non, ça ne l'est pas. Mais cela rend l'écran plus intéressant et il n'est pas difficile à coder, donc c'est assez bon marché. Maintenant, arrondissez le rayon des coordonnées en ajoutant dix pixels, puis ajoutons la norme, l'ombre. Ce sera donc la base de notre garde. Récupérons l'outil de saisie et écrivons une carte de crédit. Configurez-le comme un grand dipôle, puis changez-le en orange. Maintenant, nous pourrions potentiellement écrire Visa ou MasterCard, mais restons génériques. Ensuite, veuillez utiliser cette icône que vous avez jointe. C'est ce qu'on appelle une puce. Il est déjà jaune doré et il est assez bien dimensionné. Il suffit de le placer à 32 pixels des deux bords. Le côté gauche et le haut. Pour cela, maintenez la touche Alt enfoncée et appuyez sur les touches fléchées. Je suis sûr que c'est devenu une seconde nature mesure que vous travaillez ensemble. Maintenant, pour le nombre, nous allons utiliser exactement le même format. Il suffit donc d'en faire glisser une copie. Maintenant, voici le truc. Nous devons mesurer la main depuis le terrain. Mais c'est un excellent moment d'enseignement. Maintenant, vous voudrez peut-être copier-coller, non ? Mais si tu fais ça, tu auras ce style spécifique et Figma. Et évidemment, ce n'est pas ce que nous voulons. C'est pourquoi nous avons fait la copie. Nous voulons le formatage précédent, non ? La meilleure façon de vous débarrasser de tout formatage, même lorsque vous êtes confronté à un élément Microsoft Word provenant d' un autre site Web, est donc le suivant. Utilisez un programme de bloc-notes standard. Collez-le donc là-bas , copiez-le à nouveau et collez-le dans Word ou en mode Big, peu importe. Et si vous faites cela, vous conserverez le formatage précédent, dans ce cas, ce format fractionné. Encore une fois, je vais toujours sur Notepad lorsque je copie-colle des informations dans des e-mails ou dans des éditeurs de texte. Et maintenant, vous savez que cela s'applique également à Figma. Revenons à l'endroit où nous devons laisser beaucoup d' espace vide entre chaque groupe. La méthode la plus simple, la méthode manuelle, consiste donc à appuyer sur la touche de la barre d'espace, puis utiliser le copier-coller entre chaque groupe. Maintenant, la question est : pourrions-nous utiliser une mise en page automatique ? Bien sûr, à 100 %, mais c'est ainsi que nous le faisions à l'époque de Photoshop. Maintenant, ce que je vais faire dans cette version manuelle, je vais utiliser Alt pour vérifier la distance sur le côté droit. Et tant que tu n' as pas une énorme différence, ça me convient. Encore une fois, nous pourrions créer cette carte entière avec mise en page automatique, mais je sais que certaines personnes détestent la mise en page automatique. C'est pourquoi de temps en temps, je vais simplifier les choses. En termes de densité, 20 pixels devraient être bons entre la puce et cette couche. Mais la couleur orange ne fonctionne pas. Optons plutôt pour le bleu. Le jaune peut également fonctionner, mais nous devrions remplacer le rectangle blanc par un autre rectangle un peu plus foncé. Et puis je pense que ce serait trop de travail, autant plus que nous avons un fond principal coloré. Ce serait donc un peu difficile. OK, maintenant pour la date d'expiration, ajoutons la couche de texte. Cela devrait être indiqué dans le style corporel. Et puis pour la couleur, passons au gris. Pour ce qui est du nom, je suis franchement indécis. Je pense que l'étiquette est probablement la meilleure solution. Maintenant, le plus délicat, c'est que nous avons des tonnes de couches de texte. Nous devons donc nous assurer qu'ils ne se heurtent pas. Mais oui, je pense que c'est à peu près tout. Oh, quelque chose que j'ai presque oublié. Nous avons une autre icône sur le côté droit. Jetez un œil aux mauvaises choses avant de terminer. Et bien sûr, surélevez les champs situés en dessous. Mais oui, c'est le genre de chose que les clients apprécient lorsque vous faites un effort supplémentaire. Ce n'était pas dans le brief, ce n'était pas dans les wireframes. Je viens de le trouver. Parfois, le client peut rejeter l'idée. Il n'aime peut-être pas ça. Mais voilà, 10 minutes de travail, peut-être 20 minutes si vous n'avez pas d'icônes. Mais si elle est levée pour les clients qui veulent vraiment quelque chose de spécial avec un peu de zinc, je pense, oui, au fait, vous-même, refaites cette carte avec mise en page automatique et faites-en un composant et partagez-le avec moi. J'aimerais voir comment tu t'en sors, mais pour être honnête, ça ne devrait pas être si difficile. Faites-le moi savoir dans la section des commentaires. Mais oui, avec ça, on peut continuer. Merci beaucoup. 43. Concevoir une page d'avis magnifiques: Bienvenue à nouveau. Nous devons créer une belle page pour les avis. Mettons-nous donc au travail. Le filaire me montre que cela doit être partagé avec l'adresse du restaurant. Faisons donc une copie de l'écran de connexion. Supprimez les champs car nous n'en avons pas besoin. Et ils ne pensent pas que nous devrions avoir un bouton ici poser une question sur la manière dont les avis sont censés être rédigés. S'il n'y a pas de bouton. Par exemple, dans ma propre entreprise, j'envoie des e-mails personnalisés d'une longueur spécifique à chaque client. Peut-être que c'est le même processus ici. Bref, revenons au mouillé. Renommons le titre pour faire mûrir la livraison de leur pizza, le nom du restaurant, les onglets. Eh bien, pour le texte, assurez-vous qu'il est réglé au centre pour ne pas avoir à le repositionner moyen le plus rapide est de cliquer dessus en maintenant le contrôle. Tout est bon, tout est prêt. La première devrait donc être une critique, puis la seconde, évidemment, une adresse. Maintenant, cette dernière option est utile si vous voulez voir à quelle distance se trouve le restaurant ou si vous souhaitez récupérer la commande vous-même. C'est donc logique. Passons maintenant à ces deux guides. C'est donc noir et orange. Et puis pour l'inactif, ça devrait être normal et le gris. Cela ressemble à une chanson hip hop qui, je crois, était en noir et jaune. Bref, revenons-y. Ajoutons donc le design de la puce qui contient le nombre d'avis et le pourcentage. Bien qu' il soit rempli, nous pouvons toujours le supprimer. De plus, nous pouvons nous débarrasser de ce rembourrage. Pour être honnête, nous n'avons pas vraiment besoin de le faire, mais je voulais vous montrer autant de situations que possible, c'est pourquoi je l'ai fait. OK, maintenant, assurons-nous qu'il est correctement aligné. En parlant de choses inutiles, ce vert est en fait une fenêtre contextuelle. Ne me demandez pas pourquoi. Croyez-moi, nous avons donc besoin d'une icône X, pas de la flèche de retour. Profitons donc de cette occasion pour l'échanger. Si vous sélectionnez la barre d'action, nous avons une liste déroulante ici, un échange d'icônes, mais il n'y a pas de x dans notre liste. Pas de soucis. Comme d'habitude, j'ai préparé quelque chose. Il s'appelle x et il est attaché. Maintenant, faites glisser ce type dans le cadre Ressources et transformez-le en composant. N'oubliez pas d' ajouter une mise en page automatique, pour qu'elle soit belle. Lorsque vous aurez terminé, nous pourrons revenir à la barre d'action. Par défaut, il va nous montrer les icônes préférées, mais nous pouvons les modifier. Mais remarquez à quel point cela a du sens. Nous commençons à avoir pas mal de composants ici, et nous devons faire défiler la page un peu. C'est pourquoi Preferred est très utile. OK, revenons-y. Nous avons besoin de quelques autres choses. Tout d'abord, certains textes saisissent huit, positif puis négatif. Ils doivent se trouver sur des couches de texte individuelles. Et comme nous avons 8,2, changeons le texte à l'étage supérieur à 80 % des votes. Et c'est parce que je veux que cela soit aussi réel que possible. Pour le style. Allons-y avec le corps. Nous allons essayer le vert de l'emoji pour le positif, pour les votes positifs. Ensuite, pour les votes négatifs. Eh bien, nous pouvons échantillonner les couleurs à partir du panneau des ressources. Donc je suppose que nous allons devoir ajouter un emoji énervé. Ensuite, nous pouvons l'échantillonner, et maintenant je peux le retirer. L'une des choses que j'ai adorées à propos de Photoshop, c'est qu'il était possible de prélever des échantillons de couleurs sur Absolument. N'importe où, même en dehors du programme, tant que vous disposiez de l' outil pipette, sélectionnez-le ici Au moins dans cette version de Figma, après avoir ouvert le Color Picker, vous devez cliquer manuellement sur outil pipette , puis choisissez une couleur provenant d'un autre programme de conception. Ce clic supplémentaire semble un peu étrange. De plus, vous pouvez échantillonner depuis n' importe où , par exemple sur l'interface. Quoi qu'il en soit, revenons-y. Ajoutons un autre rectangle d' environ 400 pixels de large pour la hauteur, disons 20 pixels. Par exemple, ce sera la barre qui nous indiquera visuellement le nombre de bons votes. Rendez-le très arrondi. Et pour la couleur verte, bien sûr, vous voudrez peut-être ajouter cette couleur à vos styles. Sois mon invité. Maintenant, continuons. Assurez-vous donc d'en avoir envoyé un peu avec la couche de texte. Ensuite, lorsque vous aurez terminé, veuillez faire de même pour les votes négatifs. Mais cette fois à partir de 400. Divisons cela par quatre et cela fait 100. Maintenant, pourquoi l'avons-nous divisée ? Parce que j'ai un vote positif et deux votes négatifs. Alors, accordez-vous un ratio pour les cent 101 choses qui me dérangent. Et voilà à quoi cela ressemble sur ce fond coloré. Revenons donc au blanc, autant plus que nous avons beaucoup de textes en bas. Oh, au fait, entre les emojis et les votes positifs, laissons environ 20 pixels. Il s'agit essentiellement d'un résumé de tous les votes qui seront affichés ci-dessous. À ce propos, séparons cette zone avec un diviseur, obtenons un outil d'alignement et ajoutons 720 pixels. Centrez-le, si nécessaire, et faites-le en gris clair. En fait, je pense que nous devons parcourir notre panneau de styles en passant par le séparateur, celui-ci devrait être le plus léger. Mais voici le truc. Si nous décidons que c'est à cela que devrait ressembler un séparateur, nous devons revenir en arrière et réparer les autres écrans de tous les écrans précédents. Maintenant, voici le truc. Je ne vais pas y consacrer trop de temps. Je ne vais en faire que quelques-unes. Mais n'oubliez pas que nous avons un écran à vaisselle où se trouvent de nombreux séparateurs. C'est là qu'un composant aurait été très intéressant. Mais c'est un bon moment d'enseignement lorsque vous apprenez à vos dépens, vous avez tendance à vous en souvenir. Assurez-vous donc de réparer tous ces séparateurs. Pour terminer, je vais ajouter les quelques couches de textes, qui constitueront les éléments de base des critiques proprement dites. Et lors de la prochaine conférence, nous allons tout styliser. Tout d'abord, intitulé quelque chose qui dit, je ne sais pas, « excellente nourriture » ou quelque chose comme ça. Puis la date, le 14 octobre 2023. Puis le nom de l'auteur par Chris Barron dans cette affaire. Alors peut-être quelques mots. L'essentiel de la critique, c' est j'ai adoré tout ce qui concerne ce restaurant et le processus de livraison. Génial et facile, très professionnel. Et ça a l'air plutôt bien. OK, faisons une pause. Et dans la prochaine vidéo, nous allons terminer. 44. Comment créer une carte d'avis: Bienvenue à nouveau. Commençons par styliser cette critique. Maintenant, la principale chose à laquelle nous devons réfléchir est savoir comment l'utilisateur va accéder à l'évaluation. Maintenant, je dis que le titre est le plus important. Passons donc au format LDL plus petit en termes de mise en forme de police. En ce qui concerne la couleur, le bleu est le seul choix car l'orange impliquerait un type d' action disponible ici et ce n'est pas le cas. Ensuite, la date et le nom de la fille ne sont pas si importants. Je pense donc que nous pouvons opter pour le corps en termes de style de police et pour la couleur grise. fait, alignez-les en bas, si vous ne l'avez pas déjà fait. Maintenant, l'essentiel, c'est la critique elle-même. Maintenant, je dis que cela peut aussi être stylisé comme un corps, mais faisons en sorte qu'il soit bleu parce que les gens voudront peut-être le lire plutôt que la date et le prénom de la fille, qui sont à la base de la décoration finalités. Eh bien, ce n'est pas vraiment décoratif, mais les gens s'en fichent vraiment. sont là que pour renforcer la crédibilité, non ? Vous pouvez donc voir qu'il s' agit d'une personne réelle. Nous avons besoin de quelque chose de visuel car il y a tout simplement trop de texte. Et je dis « pouce levé » ou quelque chose comme ça. Maintenant, nous pourrions utiliser le même emoji, celui qui sourit. Mais je pense que c'est un peu trop répétitif. Alors prenons le risque. Voici ce que j'ai préparé. Mais tu sais quoi ? Plutôt que de le faire glisser cet écran plutôt que de le déplacer vers la gauche. Faisons-le réellement. Maintenant. Concentrons-nous en fait sur le cadre Ressources et faisons glisser l'icône directement à cet endroit, car cela a beaucoup plus de sens, comme d'habitude. Transformez-en un composant, puis ajoutons une mise en page automatique. Comme d'habitude. Cependant, vous devez savoir que s'il y a une icône positive, doit toujours être négative. Et en effet, vous en avez un attaché. Maintenant, je le répète, c' est un peu risqué. Nous pourrions simplement utiliser les mêmes smiley, mais vous oui. Ici, j'essaie de m'écarter, ça rend quelque chose d'un peu plus intéressant. D'accord, lorsque vous aurez terminé avec ces ressources, revenons à l'écran de révision. Faites glisser un vote positif à l'intérieur. Et réfléchissons-y. Tout d'abord, je pense que nous avons besoin d'un tas de mises en page automatiques et vous savez combien ? Si ce n'est pas le cas, examinons cela ensemble étape par étape, ligne par ligne. C'est donc le premier, non ? Et puis c'est le second. Maintenant, avons-nous besoin du troisième pour ce corps de texte ? Non, pas nécessairement. Alors maintenant, saisissons tout comme ça. Et puis Shift a et c'est tout. Nous en avons donc trois au total pour les 21 premières de chaque ligne. De toute évidence, nous allons avoir besoin de connaître les paramètres principaux, de laisser un espace entre les deux, puis de le configurer pour remplir le conteneur. Maintenant. OK, Génial. Merci pour le temps que vous y consacrez. Au fait, ne vous précipitez pas. Je vais évidemment plus vite, mais tu peux toujours faire une pause. Maintenant, nous voulons beaucoup de flexibilité Il est donc tout à fait logique d'opter pour le récipient de remplissage, qui a l' air beau jusqu'à présent. Nous allons maintenant sélectionner le grand cadre, le mainframe, et modifier sa largeur pour qu' il soit fixe afin de pouvoir le régler à 656 pixels. 656 pixels. Et en gros, oui, c'est du travail bien fait. Pour être honnête, nous avons besoin d'un peu plus de travail pour terminer. Nous devons principalement remplir l' écran avec d'autres entrées. Faisons donc une copie de ce séparateur de haut en haut et plaçons-la vers le bas. Pas d'espacement spécifique à l'esprit, car nous allons également créer une mise en page automatique ici. Et cela va nous permettre de saisir une valeur spécifique. Alors allons-y avec 20 pour le moment. Cela nous aide également à ajouter ou à supprimer les lignes supplémentaires tout en maintenant ce diviseur exactement à la même distance. Et avec cela, transformons-en un composant. Comme toujours, nous allons devoir utiliser le cadre Ressources distinct. Vous souhaiterez peut-être le redimensionner d'ailleurs ou le rapprocher de l'écran. Maintenant, c'est vraiment à vous de décider comment vous le configurez, mais assurez-vous de passer un bon moment à faire des allers-retours. L'essentiel est que vous ayez assez de place à l'intérieur. Parce qu'une fois que nous en avons fait un composant, nous pouvons créer une variante juste pour le coup. La seule chose que je suis prête à changer pour l' instant est de remplacer l'icône, mais il y a beaucoup plus de potentiel ici. Assurez-vous donc d'avoir essayé d' explorer les autres choix de design. Comme peut-être une couleur différente pour le titre, peut-être un fond de couleur différente. Diverses autres choses que vous pouvez faire ici. Mais pour l'instant, revenons à notre écran et sortons-en quelques copies. Je pense que nous pouvons parler de Ford et de Total, même si le dernier est peut-être un peu décalé, mais c'est très bien. Vous pouvez remplacer l'une d'entre elles par la variante négative, juste pour que nous ayons de la variété. Mais avant de modifier le contenu réel du texte, gardez à l'esprit une chose : le diviseur change de position en fonction du texte ci-dessus, n'est-ce pas ? Donc, s'il est plus long ou plus petit, cela divise les mouvements, mais il ne bouge pas selon la prochaine révision. Comme vous pouvez le constater, cela ne fonctionne pas. Et c'est parce que nous n'avons donné aucune instruction à ce sujet. Mais voici le truc. Si vous sélectionnez toutes ces entrées , puis que vous les ajoutez dans une mise en page automatique. C'est du travail, bravo. Maintenant, n'hésitez pas à ajouter ou à supprimer des lignes de texte, et vous devriez voir que cela fonctionne correctement. Et en effet, c'est correct. Maintenant, voici le truc. Nous pourrions utiliser un booléen pour le titre. Nous pouvons faire une variante sans commentaire, options, options, options. Mais pour l'instant, pour cet enregistrement, je suis très content de cette flexibilité. Vous pouvez faire beaucoup plus, mais oui, cela va prendre un peu plus de temps. Donc, pour le moment, je pense que nous devrions simplement continuer. Merci beaucoup. 45. Mon aperçu en allant au kilomètre supplémentaire: Bienvenue à nouveau. Permettez-moi de gérer rapidement l'onglet adresse pendant que je travaille en arrière-plan Je pense qu'il est essentiel que je vous dise ce que je considère comme la perle, le fait que je vous dise ce que je considère comme la perle, de faire un effort supplémentaire. Certains clients peuvent vous dire que dans l'onglet Affichage, nous aurions pu passer un peu plus de temps créer diverses propriétés pour ce composant. Mettre la Bible en mode roll-off, ajouter un booléen, ajouter une variante pour les cas où il n'y a qu'un titre mais aucun corps de texte, des choses de cette nature. Maintenant, je ne pense pas que cela aille nécessairement plus loin, pas dans le sens où les clients apprécieraient cela. vois, c'est une chose de travailler dur. Et la récompense, c'est qu'à l'avenir, vous n'aurez plus à travailler aussi dur. Votre entraînement est difficile, mais le véritable combat ne l'est pas si dur. C'est donc ce que nous aurions pu faire pour soutenir ces invariants et ainsi de suite. Mais créer ce design de carte de crédit, par exemple, ou créer une jolie copie, un joli texte à l'intérieur du projet en est une toute autre design de carte de crédit, par exemple, ou créer une jolie copie, un joli texte à . Maintenant, ce sont des choses que le client apprécierait. Donc, s' il vous plaît, assurez-vous de ne pas mélanger ces deux choses. Je suis donc favorable à tout mettre en œuvre, ne pas être traité de paresseux, mais il faut toujours en tenir compte. Qui est-ce que cela aide ? Cela aide-t-il mon ego ? Est-ce que cela m'aide à mettre en pratique mes compétences ? Est-ce que cela aide le développeur ou est-ce que cela aide le client ? Parce que si vous êtes le point d'apprentissage où vous avez l' impression d'avoir besoin de toute la pratique possible pour obtenir de l'assuré, pour créer toutes les variantes, rendre flexibles, réactives, peu importe. Fais tout. Mais la déception survient lorsque l'on s'attend à ce que le client apprécie toutes ces variantes, cette réactivité et ainsi de suite, alors qu'en fait il n'en a aucune idée. Même si vous l'expliquez en détail, je m'en fous. y a de fortes chances que les choses se passent ainsi. Vous savez, le client a d'autres choses à régler pendant que vous suivez ce cours. J'espère que tu te rends compte, j'espère que tu commences au moins à comprendre pourquoi je t' ai dit ça au début, non ? Peu importe à quel point vous avez travaillé dur chez Figma, vous auriez pu créer votre propre police de caractères à partir de zéro, lettre par lettre, caractère par caractère. Personne ne s'en soucie vraiment. Ce qui les intéresse, c'est la présentation générale et c'est tout. Vos efforts ne justifient pas votre nœud de valeur. Vous êtes le mot, la véritable valeur que vous pouvez apporter en tant que designer vient de bien d'autres choses. Commençons maintenant par les bases, en étant capable de communiquer efficacement à fois avec le client et avec l'équipe de développement. Être ponctuel, tout livrer à temps. Et après toutes ces notions de base, vous avez une véritable valeur en tant que designer, car un concepteur d'applications vient de votre expérience en matière de rationalisation de l'application rendre plus efficace. Des choses comme la hiérarchie dans le premier écran où il y a beaucoup d'actions. Vous devez donc avoir de l'expérience et savoir comment fermer votre système informatique. Maintenant, pour le dire simplement, si vous, en déplaçant un bouton et en coiffant un autre différemment, le faites mal tourner. Et si cela augmente les taux de conversion de dix pour cent, c'est absolument énorme. Dix pour cent jour après jour, semaines et des mois. C'est ce qui va vraiment aider l'entreprise à se développer. Mais la compétence elle-même, déplacer un bouton ou faire un bouton fantôme, déplacer un bouton en bas de l'écran. Ce n'est rien. La compétence n'a pas de valeur. J'espère donc que vous vous rendez compte que la valeur maximale que vous pouvez apporter au client ne dépend pas nécessairement de choses sophistiquées dans Figma, des propriétés et des composants de variance, etc. D'après mon expérience, j'ai réussi à faire passer ma propre boutique de commerce électronique de 20 000$ par mois à 50 000$ par mois. Il suffit de modifier le design de base , par exemple en déplaçant le titre vers le haut, réduisant les espaces, en modifiant la taille des vignettes. Elles sont extrêmement basiques. Vous pourriez suivre ce cours sur Photoshop et vous pourriez probablement encore atteindre ces objectifs. Donc, d'un point de vue plus technique, ce n'est pas difficile. Les techniques elles-mêmes ne sont pas la valeur que vous avez de l'expérience pour suggérer ces changements. C'est vous et le fait de savoir que, si nous avons toujours un bouton en bas de l'écran, cela aide l'utilisateur et le stagiaire à générer plus de revenus, plus que des ventes en disant « Hé, en faisant le bouton gris » et désactivée et allumée lorsque tous les champs ont été remplis. Cela améliore l'expérience de paiement et génère plus de ventes. C'est donc ce que vous devez apporter à la table. Pas super fou, les prototypes sont des mises en page super flexibles. Ils peuvent t'aider. Je ne dis pas que ce n'est pas le cas, mais le plus souvent, ils vous aideront, pas le client. Alors tu te demandes peut-être, Chris, comment puis-je vivre cette expérience ? Vous l'obtenez en travaillant, en réalisant autant de projets que possible. Il existe de nombreux sites Web comme celui-ci que vous pouvez vraiment utiliser. Mais, euh, si vous voulez vraiment avoir 20 ou 30 000 dollars de projets pour vous, vous devez commencer par ceux de 501 000 dollars , puis vérifier les statistiques, vérifier leurs analyses. Après avoir livré ce projet, restez en contact avec le client, lui avez demandé de voir ses analyses, puis suggérez des modifications, les avez conçues, demandez à ses développeurs de les implémenter, puis Vérifiez le design. Dans deux semaines. Par exemple, sur l'écran d'accueil, nous avons une photo de 360 pixels de haut. À titre d'exemple aléatoire, essayez-le à 300 pixels, non ? Alors, réduis-le. Vérifiez ensuite les taux de conversion. Si c'est compris entre 2 % et 2,4 %. C'est incroyable, non ? Et puis vous rincez et répétez jusqu'à ce que l'entreprise se développe. Et toutes ces petites choses que tu as testées, tu dois t'en souvenir. Et puis, lorsque vous aurez votre prochain projet, toutes ces pistes peuvent vous aider à gagner beaucoup plus. C'est donc la valeur que vous pouvez apporter. Il ne s'agit pas de techniques avancées et de Figma, mais de ce que vous savez. Merci et bonne chance. 46. 18 caisse p1Créer l'écran de caisse – étape 1: Bienvenue à nouveau. Réglons l'écran de paiement, commençons par la copie de l'écran du mode de paiement et supprimons à peu près tout ce qu'il contient. Eh bien, sauf pour le bouton en bas. maintenant au titre dans la barre d'action, restons simples et appelons ça « check out ». Restez simple et agréable, car cette version va en fait nous compliquer la vie afin d'aider le client. Maintenant, dans cette phase, nous allons créer un écran de paiement où l'utilisateur n'est pas connecté. Si vous vous en souvenez, Screen1 a la possibilité d' ignorer l'enregistrement. Mais si vous souhaitez passer une commande, vous aurez évidemment besoin d'un compte. Faisons ça. Faites une copie de ce bouton et élevez-le de 32 pixels à partir de la barre d'action pour les textes. Écrivons quelque chose comme s'il vous plaît, Écrivons quelque chose comme s'il vous plaît connectez-vous ou enregistrez-vous pour continuer. Maintenant, cela va à l'encontre du fait que nous ayons un bouton en bas, mais voici ce que je propose. Gardons celui du bas, mais changeons-le en l'état désactivé. Alors fais-le gris. Ensuite, changeons le texte avec dentelle ou le mot Thin Bucks. Maintenant, l'idée est la suivante, le bouton principal reste en bas. Rien n'a changé à cet égard. Maintenant, l'utilisateur s'attend toujours à ce qu'il le voie là, mais comme vous n'êtes pas connecté, un nouveau bouton apparaît en haut. Ce n'est donc qu'une autre façon de procéder. Maintenant, pourrions-nous utiliser un seul bouton en bas indiquant la connexion ? Bien sûr. Mais je pense que le fait de voir ce bouton Commander contribue à encourager l'utilisation d'un long. En gros, ça dit, oh, tu es si proche, vas-y. montrer incite l' utilisateur à continuer. C'est donc mon processus de réflexion. Maintenant, nous devons également afficher les articles dans le panier. Alors faisons-le. Saisissez le raccourci clavier D de l'outil de saisie et écrivez à ma mâchoire leur livraison de pizzas, car vous devez savoir quel restaurant vous avez sélectionné. Choisissez le plus petit di Belle dans le panneau Styles. Maintenant, en termes de couleur, bleu convient parfaitement, même si nous pourrions le rendre orange pour indiquer que vous pourriez y retourner et commander d'autres plats. Je pense qu'en fait, cela a beaucoup plus de sens. OK, allons-y, faisons-le réellement. OK, ensuite, ajoutons quelques plats. J'ai donc quelque chose de mal préparé dans le nœud. Je vais donc simplement les coller. Au total, ce que nous voulons obtenir, trois couches, les couches de textes, donc la quantité, le nom du plat et enfin le prix. Vous pouvez désormais masquer la quantité et utiliser simplement les boutons plus et moins classiques pour ajuster le nombre de pièces que vous souhaitez. Mais malheureusement, cela prend beaucoup de place. C'est ce que je pense. Vous pouvez appuyer sur l'entrée et la fenêtre contextuelle vous permettra d'ajouter ou de supprimer des plats. Et c'est parce que je pense qu'il est peu probable que vous l' utilisiez aussi souvent. Passons maintenant au style en lui-même, passons au body pour les trois. Cependant, le prix devrait se démarquer un peu plus. C'est l'approche classique. Brisons donc la chaîne et changeons-la en gras plutôt qu'en gras. Maintenant, voici le truc. Je n'aime jamais mélanger les tailles. Donc, si ceux de gauche sont de 26 pixels, de droite devraient être identiques. Vous pouvez modifier le poids ou la couleur, mais pas la taille. Pour une raison ou une autre, vous vous sentez mal à l'aise quand vous faites cela. OK, ça a l'air bien. Maintenant, nous allons avoir besoin du diviseur. Vous pouvez en voler un sur l'écran d'affichage, qui est très brillant. Ou tu peux en créer un nouveau, comme tu veux. À vrai dire, je n' en ai pas fait un composant, mais vous pouvez certainement le faire. Cela peut être utile. OK, six pixels sur six pour la largeur des feuilles. Et maintenant, il est temps d'ajouter des mises en page automatiques afin que nous puissions avoir un peu de flexibilité. Donc, tout d'abord, la quantité et le nom du plat changent de jour pour les deux. Maintenant, d'accord, maintenant, changez la distance à 20 pixels. Ensuite, sur la mise en page automatique avec le prix, d' accord, changez la mise en page pour espacer le temps passé avec elle. Je vais évidemment assez vite, mais tu n'as pas besoin de t'en souvenir. Vous avez la barre d'espace à portée de main, alors utilisez-la chaque fois que vous en avez besoin. Ensuite, un autre avec le diviseur décalé, je vais dire que je vais avoir besoin d'environ 30 pixels ici. C'est si facile quand même. Maintenant, l'idée est que vous devriez avoir suffisamment d'espace pour cliquer individuellement sur ces plats. D'accord, nous n'en avons qu'un, mais cela va changer dans une seconde. C'est pourquoi nous utilisons mise en page automatique, car nous ne sommes pas sûrs du dimensionnement. Il vaut donc mieux faire preuve de beaucoup de flexibilité dès maintenant. Maintenant, le diviseur peut forcer le contenu se placer au centre parce qu'il est plus large. Maintenant, si cela se produit, veuillez utiliser cette partie pour aligner les choses à gauche. C'est donc la première étape sur deux. La seconde consiste à sélectionner la mise en page automatique avec les deux éléments. Celui-ci est là, et maintenant, configurez-le pour remplir le récipient. Cela devrait vous donner un bon résultat. C'est notre première inscription, mais nous en voulons trois et nous en faisons quelques copies. Il suffit de les faire glisser vers l'extérieur avec Alt et Shift ou d'utiliser la touche Ctrl D. Pas d'écart particulier à l'esprit. Placez-les simplement où vous le souhaitez. Maintenant, récupérez tout, les trois couches et le titre, et utilisez un dernier décalage horaire. Ils ont gagné moins d'Auto Layout. Et maintenant, nous pouvons contrôler à peu près tout. Par exemple, allons-y avec D, pour la distance verticale entre ces gars. Maintenant, la question est si nous ajoutons un remplissage blanc ? Je pense que oui. Je pense que oui, mais cela signifie que nous allons devoir changer certaines choses. je n'ai pas peur, alors allons-y. Ajoutez donc ce rembourrage, le rembourrage blanc, et pour le rembourrage, prenons 32 pour chaque côté, puis 16 pour le haut et le bas. Oh, au fait, veuillez arrondir les coordonnées à dix pixels. C'est une évidence, d'accord ? Cela ira évidemment d'un côté à l'autre, sur toute la largeur. Mais est-ce quelque chose que nous voulons garder tel quel ? Je pense que c'est possible, mais je pense qu'un hard classique est peut-être un peu meilleur. De plus, ce sont d'excellents moments d'enseignement. Passons donc en revue ce scénario. Comment y remédier ? Alors, tout d'abord, sélectionnons le grand cadre et changeons-le en fixe. Avec cela, nous pouvons maintenant le changer en 656. Encore une fois, c'est la façon la plus simple de procéder. Cela ne garantit pas une flexibilité maximale, mais c'est tout à fait normal, selon moi, les prix et les séparateurs traînent. Et si vous souhaitez les réparer, il vous suffit de sélectionner les trois séparateurs avec Control Shift. En gros, ce sont eux les coupables. Ils forcent la voiture à être plus large. Donc, si nous changeons la taille 2592, ce que je connais par cœur parce que j'ai déjà occupé cette position, nous devrions avoir une carte équilibrée. Donc cinq neuvièmes, et en effet, ça marche. Au fait, nous n' avons pas de composant ici, mais nous en aurons peut-être besoin plus tard. Nous verrons pour l'instant, allons-y étape par étape. fait, j'aime bien la voiture telle qu'elle est en ce moment. Mais je pense que pour 40, c'est un peu trop. Passons donc à 30 pour l'espace vertical, je veux dire, mais vous savez quoi, le dernier diviseur ne me convient pas. Cela n'a pas beaucoup de sens. Ctrl, cliquons dessus et supprimez-le. Mais ça n'a pas l' air bien non plus. n'y a pas assez de rembourrage. Nous en avions donc 16 auparavant, mais il va falloir augmenter le nombre. Il y aura donc suffisamment de hauteur pour que l'utilisateur puisse facilement cliquer sur la dernière entrée. Certains pensent que 32 devrait bien fonctionner, et je pense que nous en avons presque fini avec cela. Placez-le très près du bouton supérieur où se trouvent les deux pixels pour être précis. Et je pense que nous en avons fini. Maintenant. Pouvons-nous jouer avec elle encore un peu ? Devrions-nous le rendre 20 % plus qu'intéressant ? Mais vous savez quoi, faisons une dernière chose. Ajoutons une ombre en forme de goutte juste pour le plaisir. Mais je te promets que c'est tout pour le moment. Mais dans ce cas précis, nous passerons aux autres cas où vous serez connecté, dans un instant. C'est tout pour le moment. Je te verrai dans une seconde. Merci. 47. Créer l'écran de paiement - étape 2: Bienvenue à nouveau. Il s'agit de la deuxième étape du processus. Disons que vous venez de vous inscrire, non ? Vous avez créé un compte. À quoi ressemble la voiture ? Eh bien, tout d'abord, faisons une copie. Le bouton situé en haut disparaît. Mais disons que vous n'avez pas saisi toutes vos informations, comme votre adresse, votre carte de crédit, etc., n'est-ce pas ? Nous allons donc encore avoir quelques flèches, quelques avertissements. Commençons par le haut, car vous êtes connecté, vous aurez votre total et la possibilité d' ajouter le coupon. Sélectionnez donc la marée, mûrir leur livraison de pizza et faites-en une copie en contrôlant, et faites-en une copie en contrôlant veillant à sélectionner le texte et non le grand cadre d'ailleurs, car il s'agit d'une mise en page automatique, la copie est placée en dessous. L'avantage, c'est que vous pouvez appuyer sur les touches fléchées, la flèche vers le bas, et la mise en page va changer comme ça. C'est totalement génial. OK, maintenant j'ai quelque chose préparé dans mon bloc-notes, alors laisse-moi juste le copier-coller. En bref, il s'agit du sous-total des frais de livraison. Disposez-vous d'un bon cadeau et du montant total ? Ils sont donc tous assez courants dans la plupart des applications de livraison. Le style est évidemment incorrect, alors corrigeons-le. Veuillez supprimer à la fois la couleur et le formatage. Voici mon point de vue. Nous pouvons commencer avec un nouveau Nieto standard de 26 pixels, s'il vous plaît. Pour ce qui est du total général, en gras et en bleu. Donc, en gros, trois choses sur quatre sont bleues. Le coupon doit être orange car vous pouvez cliquer dessus localement. Vous pouvez le faire dans Figma, vous pouvez choisir différents styles de couleurs. Maintenant, prenez votre temps. Le plus important, c'est que vous indiquiez l'utilisateur tous ces paramètres et que vous les preniez petit à petit. une étape, vous pourriez obtenir un noir en termes de poids, le rendre plus gros. OK, quand vous aurez terminé, faites une copie avec Control D. Encore une fois, elle sera placée en dessous, mais sélectionnez-les tous les deux et utilisez Shift a pour une mise en page automatique, vous aurez la possibilité de changez l'orientation. D'accord ? Ce n'est pas facile pour l' instant , car nous devons le remplacer espace entre les deux, l'alignement du texte doit être réglé pour écrire une ligne. Il a l'air un peu plus attrayant visuellement. Naviguez dans l'espace entre le texte aligné à droite. Et si nécessaire, vous devrez peut-être modifier ce paramètre depuis hug content, puis « fill container », au cas où vous ne sauriez toujours pas comment cela fonctionne. Essayez simplement tout et voyez comment vous vous en sortez, ou essayez simplement cet accord et demandez de l'aide. Mais s'il vous plaît, publiez toujours captures d'écran pour que je puisse voir ce qui se passe. Mais oui, c'est tout pour la barre supérieure, 0, en tant qu'étape facultative, sélectionnez le dernier produit. Ce cadre spécifique ici. C'est très important. Maintenant, faites glisser un autre séparateur à l'aide de l'outil linéaire. Faites une largeur de 59 à 592 pixels et changez la couleur en gris clair spécifique. Je sais que c'est peut-être un peu difficile à faire. Donc, si vous ne pouvez pas suivre cette étape précise, si vous ne pouvez pas suivre cette étape précise, ou si vous pouvez supprimer la dernière entrée et dupliquer celle du milieu qui a un diviseur, ne jamais niveler une petite chose, vous retenir qui sont toujours options. OK, passons à la dernière carte, gentiment et simplement. Commencez par une simple couche de textes, vos coordonnées. Le prochain mouillage, écrivons un avertissement. Veuillez ajouter vos informations dans l'Info. Tout cela est régulièrement écrit en Nieto. Au fait, celui de gauche doit être bleu et celui de droite, puisqu' il s'agit d'un avertissement, il faut lire pour s'assurer que c' est aussi clair que le jour. Ajoutons le chevron. Vous pouvez également l'appeler un adulte, mais vous ne devez pas le confondre avec la flèche arrière. C'est autre chose. D'accord ? Maintenant, vous devriez immédiatement vous rendre compte que nous devons en faire un composant, non ? Permettez-moi donc de passer à l'étape suivante pendant que je le déplace vers le cadre Ressources et que je passe en revue les étapes. N'oubliez pas que cela doit être lu et qu'il doit s' agir d'une mise en page automatique. OK, revenons à l'écran. Mais le côté droit utilise Shift a sur ces deux gars. Laissez 20 pixels entre eux. Mais nous pouvons toujours changer d'avis. Ajoutez-en ensuite une autre, la mise en page automatique pour toute la ligne. Remplacez-le par un espace entre les deux. Ajoutons ensuite un fond blanc. Ils devraient tous arriver à une cadence de tir rapide. OK, blanc pur. Ajoutez ensuite votre rembourrage. 32.16. Des trucs géniaux. J'espère que tu t'amuses bien. Centrez-le et modifiez la largeur à 656. Et croyez-le ou non, c'est notre composante. Maintenant, évidemment, il nous reste encore quelques petites choses à faire, mais ne vous inquiétez pas, nous allons nous mettre à l'eau. D'accord. Pour la partie inférieure, voyons ce que c'est, quoi. Il nous reste encore quelques choses à faire, mais changeons un paramètre important au sommet. Compressons donc cette carte en changeant cette valeur à 20. Et c'est parce que nous avons besoin de plus d'espace en bas. a encore une grande salle de lecture, y a encore une grande salle de lecture, mais maintenant nous avons vraiment l'amour de l'espace ici. Pour plus de chance, augmentez la hauteur de ligne de ces deux dernières couches de texte. Nous avons besoin de quelque chose d'un peu plus généreux. Maintenant, pour terminer cette conférence, veuillez ajouter un trait gris très clair à la nouvelle entrée que nous venons de créer. Tu devrais avoir cette sauvegarde grise. OK, il nous reste encore quelques minutes et nous en aurons fini avec ce design. Faisons une petite pause et nous allons terminer en un clin d'œil. Merci et félicitations d'être arrivés jusqu'ici. Merci beaucoup. 48. Utiliser des variantes dans l'écran de caisse: Bienvenue à nouveau. C'est là que nous avons laissé les choses de côté. Créons la propriété de texte. D'abord. Pour le texte de gauche, il s' agit de l'icône que vous recherchez. Appelle ça exactement comme ça à gauche. Et sur le côté droit, vous avez deviné la même chose, non ? Texte. Nous pouvons maintenant créer une variante dans laquelle nous modifierons simplement la couleur du texte. Maintenant, pour être honnête, ce n'est pas absolument nécessaire, mais la variante ouvre de nombreuses possibilités. Vous pouvez ajouter une couleur de fond pour le côté droit, peut-être un point d' exclamation ou une icône. Il y a plein de choses que vous pourriez faire, mais je vais rester simple pour des raisons de temps. J'ai appelé ça normal, puis l'autre probablement jamais. Maintenant, cela devrait être assez facile à suivre à ce stade. Revenons à notre design et voyons Wordsworth. Tout d'abord, depuis le panneau des ressources, nous allons insérer quatre entrées au total. Naviguez. Maintenant, je vais prendre le temps de remplacer le contenu si nécessaire. Je vais avoir besoin de quelques secondes pour gérer cela, alors s'il vous plaît, soyez patient. Voilà le truc. Je crois que j'ai oublié de modifier le poids des textes sur le côté droit parce que voilà, ils doivent être en gras pour qu'ils ressortent du lot. C'est là que l'attention de l' utilisateur va se diriger par défaut. L'idée ici est donc que nous ayons le délai de livraison défini par défaut. Encore une fois, c'est très important, il est défini par défaut sur SAP, ce qui signifie dès que possible dès que possible. Et avec la mention, cela fait à nouveau 60 minutes, c'est très utile. Plus bas, nous avons l'adresse de livraison , puis les coordonnées car nous avons évidemment besoin du numéro de téléphone et enfin du numéro de carte de crédit, du paiement. L'idée est donc que l'utilisateur soit enregistré, non ? Mais souvenez-vous des champs de cette étape. Il ne s' agissait pas de son numéro de téléphone, son adresse ou de son inflammation des paiements. C'est pourquoi nous le montrons ici. Maintenant. Aurions-nous pu ajouter tout cela dans le processus d'inscription ? Oui, bien sûr, mais ce n'est pas une bonne pratique. Un client potentiel souhaite donc d'abord voir l'application, voir tous les restaurants. Et une fois que nous avons son attention, nous avons ses intérêts, nous pouvons lui demander plus d'informations. Mais si tu dormais 12 champs devant lui sans même lui montrer l'application, les restaurants, les plats. Eh bien, c'est frustrant et la plupart des gens abandonneront l' essence d'une application. Il s'agit de guider l'utilisateur avec le moins de friction possible. Les gens ne sont pas obligés d'acheter quoi que ce soit. Ils ont des dizaines de raisons de renoncer. Et ce n'est pas nécessairement à cause de votre design. Il se peut qu'il soit en retard au travail. Peut-être qu'ils ont quelque chose sur la cuisinière, ce que l'enfant pleure, ou quelqu'un à la porte, etc. Donc, une fois que vous comprenez que les personnes qui utilisent ces applications sont de vraies personnes avec de vrais problèmes, alors tout commence à avoir du sens. C'est pourquoi en rendant tout si intuitif, si simple. Vous pouvez donc utiliser cette application même si vous êtes à moitié endormi car personne n'a besoin d'une fraction supplémentaire dans sa vie. C'est pourquoi nous demandons uniquement que l'Occident nécessaire à 100 % au bon moment. Celui, le registre, pas de problème. Vous n'avez pas votre carte en main. Pas de problème. Mais oui, dans l'ensemble, c'est le design. Au cas où vous voudriez ajouter de l'ombre, je vous suggère d'abord d' intégrer tous ces gars, tous les quatre, dans une mise en page automatique. Et voici le truc qui évitera la double frontière. Vous pouvez utiliser ici une valeur négative moins un. C'est vraiment génial, non ? Et si vous voulez vraiment être Becky, après avoir activé une ombre, vous pouvez sélectionner la première et la dernière entrée et modifier le rayon des coordonnées manuellement. N'oubliez pas que vous pouvez les configurer individuellement. Veuillez noter que je n'ai pas défini le rayon des coordonnées dans mon composant principal ou dans ma variante. Cela aurait posé un problème pour les entrées intermédiaires. Au lieu de cela, j'ai décidé de contrôler cela, pour contrôler le rayon de coordonnées individuel à partir de cet endroit. OK, faisons une petite pause. 49. Pensez à l'avance pour le prototype: Bienvenue à nouveau. Je vais y revenir directement et créer quelques copies de cet écran. Et je vais changer l'état de la variante étape par étape. Je vais également modifier le texte sur le côté droit pour un texte qui semble un peu plus raisonnable. Maintenant, l'idée est de réfléchir au prototype. Nous pourrions le rendre interactif afin que le client et le développeur puissent l'utiliser plus facilement. L'idée est de cliquer sur l'un de ces avertissements, puis d' accéder à cet écran spécifique, le paiement, une adresse, etc., qui révélera également tout défaut ou lacune. Par exemple, les écrans que nous n'avons pas inclus, nous avons simplement oublié de les inclure. Des fenêtres contextuelles ou divers états qui n'étaient pas inclus dans le brief ou dans le wireframe. Maintenant, au cas où vous voudriez créer un prototype complet, vous devrez utiliser cette approche étape par étape que nous adoptons ici, en vous guidant à travers chaque État. Maintenant, voici le truc, des prototypes complexes et très avancés. Fais. Je les recommande ? Je dis que ça dépend de quoi ? ce qui concerne le budget, en fait, si vous êtes payé environ 500 dollars, non, je ne créerais probablement pas prototype interactif complet, n'est-ce pas ? Au lieu de cela, je ferais les interactions les plus élémentaires juste pour montrer le flux standard de l'application. Mais s'il s'agit de 423 ou 5 000 dollars et que vous voulez impressionner le client, ils s'assurent d'y aller. Mais il y a un autre cas que vous pourriez envisager. C'est peut-être pour votre portefeuille, non ? Alors, oui, totalement. Vous pourriez faire quelque chose de spécial C, il s'agit de réfléchir sur le long terme, non ? S'il s'agit d'un projet de 500 dollars, bien sûr, cela ne vaut pas la peine, vous savez, faire quelque chose d' impressionnant, créer un prototype impressionnant pour le client. Ça n'en vaut pas la peine. Mais s'il s'agit de l'une des rares entrées de votre portfolio, profitez-en pour créer quelque chose qui puisse mettre en valeur vos compétences, n'est-ce pas ? Le client reçoit quelque chose en plus. Bien sûr. Il n'apprécie peut-être pas cela. Il ne vous paiera peut-être pas pour ce supplément. Mais le plus important ici, c'est que vous ayez une stratégie. Lorsque quelqu'un visite votre portfolio, que voulez-vous qu'il voie ? Devriez-vous vouloir être payé ? Ce sont les mots, bien sûr, mais au début de votre carrière, c'est toujours une question. Vous devriez donc vous sentir à l'aise en sachant que vous dépassez d' un kilomètre un assez bon prototype d' un kilomètre un assez bon prototype à utiliser sur tous ces écrans, toutes ces étapes supplémentaires. Mais voici le truc. Lorsque vous avez de grandes attentes, les choses s'effondrent. Par exemple, lorsque vous avez accepté 500 dollars, mais que vous vous retrouviez avec beaucoup plus de travail que ne le suggérait le wireframe. Et vous pensez : « Hé, j'ai fait plein d'autres écrans ». Je suis sûr qu'il va me payer plus cher. Ou, hé, tu sais, ce prototype m' a demandé plus que des mots. Mais en vérité, ce n'est pas le cas. Le client s'en fichera. Le client ne vous paiera pas plus. Peut-être qu'il pourrait te donner un petit bonus, mais oui, en gros, tu as accepté 500 dollars. Et quand tu as des attentes, quand tu t'énerves, c' est là que ça va devenir un cauchemar. Maintenant, si vous l' inversez, si vous comprenez que vous allez faire tous ces investissements supplémentaires pour investir dans votre portefeuille futur. Ils s'assurent que cela a du sens. Dans ce cas précis, agit d'un cours sur AB Design et Figma, non sur la gestion de votre carrière en tant que designer, mais je pense quand même que je devrais partager ces informations avec vous. Maintenant plus que tout, je veux que tu sois heureuse, et cela peut arriver si tu ne te lances pas dans cette carrière les yeux ouverts. Encore une fois, assurez-vous de bien réfléchir à votre portefeuille. Vous pensez au long terme, non ? OK, laissez-moi terminer l'autre écran, mes commandes pendant que nous discutons de ceci et de cela. Voilà le truc. Après avoir passé une commande, vous aurez besoin de l'écran qui le confirme, n'est-ce pas ? Mais vous voudrez peut-être aussi passer nouvelle commande le lendemain ou quelque chose comme ça. Donc, ce que je vais faire, c'est gérer ces deux situations ici. J'espère que vous serez surpris voir à quelle vitesse nous pouvons créer un écran en quelques secondes en réutilisant tout ce que nous avons construit jusqu'à présent. S'il y a un dernier conseil vous donner concernant ces projets, je dirais que c'est celui-ci, assurez-vous de leur consacrer suffisamment de temps. Regardez cette partie où nous travaillons seuls avec la bonne musique en arrière-plan avec une bonne tasse de café. Ce n'est pas la partie la plus difficile. Devriez-vous apprendre à utiliser la variance des composants, mais aussi les mises en page, ceci et cela. Mais ce n'est pas la partie la plus difficile. C'est ce qu'il y a de bien. Je pourrais probablement terminer tout ce projet en moins d'une journée, peut-être même une demi-journée. Qui sait ? Mais le plus délicat, c'est traiter avec le client ou le chef de projet. Ce sont eux qui ne vous donnent pas assez d'informations pour continuer. C'est alors devenu indécis à propos de ceci et cela a fait de Figma ce qu'elle est aujourd'hui. C'est pourquoi les designers intègrent une telle flexibilité dans leurs conceptions parce qu'ils en ont assez voir les clients changer d'avis. La principale chose que vous voulez en tant que designer est de passer au projet suivant. Vous avez les compétences nécessaires pour terminer n'importe quel projet en un rien de temps. Si vous vous retrouvez seul avec un document complet, bref et/ou un bon schéma. Mais ce n' est pas comme ça dans le monde réel. Imaginez si le client dit : «  nous voulons plus d'espace entre chaque ligne, nous voulons plus d'espace entre chaque ligne champs plus grands ou des boutons arrondis », une police de caractères différente, une palette de couleurs différente. Eh bien, c'est pourquoi nous utilisons toutes ces fonctionnalités avancées de Figma pour nous protéger contre cela. Bien sûr, dans ce cas précis, changer de police serait quand même un peu pénible ici et là , car nous n'avons pas tout défini en tant que style. Mais à mesure que vous acquérez de l'expérience, vous pouvez vous assurer contre tout. C'est le truc, c'est ce dont tu dois t'occuper. OK. Faisons une petite pause. 50. Réflexions finales sur le projet: Bienvenue à nouveau. J'ai encore la page Contactez-nous à créer, mais il s'agit d'une copie très basique de ma commande. Je vais donc prendre quelques minutes pour passer en revue les motions. Maintenant que je travaille en arrière-plan, laissez-moi vous dire à quel point je suis heureuse que vous soyez arrivée ici. Je voulais inclure un projet sérieux dans ce cours, pas un projet simple basé sur quelques écrans. Par exemple, nous aurions pu nous arrêter pendant la première moitié du cours avec les trois premiers écrans. Je voulais vraiment que cela soit réel, pour te préparer au monde réel. Maintenant, la vérité est que c'est beaucoup de travail répétitif. C'est beaucoup de préparation. Mais une fois que vous avez configuré vos composants, une fois que vous savez quelles polices vous souhaitez utiliser, quelles couleurs, etc., tout se met en place et écoutez certains de mes choix. Je ne suis pas satisfait à 100 % de la taille des champs. a un peu d'espacement ici et là, mais nous pouvons toujours prendre le temps de jouer avec. À partir de ce moment, il n' y a plus de limites. Vous pouvez améliorer ce projet de 20 %, peut-être 50 % en 30 minutes environ. Fais juste un travail solide. Il vous faut par exemple 10 h pour construire les fondations. Mais après cela, en quelques minutes, vous pouvez transformer le design en quelque chose de bien meilleur. Prenez le temps de créer votre propre version en fonction de ce que vous voyez ici J'aimerais voir de nouvelles mises en page, nouvelles polices, de meilleures icônes de différents styles d'icônes qui créent une ambiance différente une palette de couleurs différente. Peut-être le rendre plus professionnel, plus ludique, peu importe ce que vous pouvez trouver, allez-y. Maintenant, en supposant que vous en avez complètement terminé avec le projet et que vous souhaitez le partager, veuillez ne pas exporter d' écrans au format PNG. Cliquez le bouton de partage depuis cet endroit. La vue, les détails ici, tous ceux qui ont le lien peuvent consulter, c'est la norme et je vous recommande de le conserver ainsi. Vous pourriez éventuellement inviter quelqu'un en saisissant cet e-mail. Mais j'aime utiliser cette fonctionnalité Copier le lien , puis l'envoyer à qui vous voulez. Lorsque vous souhaitez me montrer votre version, veuillez utiliser ce bouton et m'envoyer votre lien. Pour terminer cette partie, vous vous demandez peut-être si c'est à 100 %, alors sachez qu'il y a toujours des choses que vous pouvez faire. Mais pour l'instant, nous pouvons terminer le design avec le sourire aux lèvres. J'espère que tu es fière de toi. C'est vraiment génial et je vous remercie d'être restée avec moi jusqu'à la fin. J'ai hâte de voir ta propre version. Merci et continuez à regarder. Il y en aura d'autres à venir.