UI Figma / UX - Concevoir une application Web complète UI/UX. Apprenez la meilleure technique de Figma (Base de projets)

1. Introduction: Bienvenue dans ce cours Figma. Je m'appelle oui, deux ou trois. Et je serai votre instructeur dans ce cours. Dans ce cours Figma, votre cours AUX, vous allez apprendre à concevoir une application Web, vous êtes une UX. En utilisant Figma. Vous allez concevoir ce projet Web complet. Vous allez apprendre différents types d'outils et les meilleures pratiques du CDMA. Vous apprendrez comment créer un groupe, comment créer des couleurs de composants, différents types de blogs, et que vous venez de voir le plug-in et bien d'autres choses. Il s'agit du projet complet que vous allez concevoir dans ce cours. Permettez-moi de vous montrer toutes les fonctionnalités, tout le design que j'ai ajouté dans cette API Web où vous oeuvrez. Donc, en haut, nous avons notre barre de navigation, puis nous avons cette section principale de chauffage ici, puis nos options de carte de propriété ici. Vous pouvez voir que chaque carte existe depuis la même taille. Et c'est vraiment joli. Ensuite, nous avons cette pagination avec une icône différente, puis cette marque sélectionnée options. Après cela, nous avons une section À propos avec des fonctionnalités coopératives que vous alliez apprendre dans ce cours. Ensuite, nous avons cette section de conception de commentaires où nous avons ajouté au panier, puis cet indicateur et ce bouton Suivant et le bouton précédent. Après cela, nous avons notre système de substitution, et en bas, nous avons notre section de pied de page. Alors que vous allez concevoir cette application, vous allez apprendre à ajouter différents types de plug-in, à utiliser l'icône de ce plugin et à l' utiliser dans votre projet. Et après cela, vous allez apprendre à ajouter une nouvelle application. Sur une barre F, vous pouvez voir notre bouton de connexion et d'inscription. Donc, si je clique sur l'inscription, je suis maintenant dans la face de l'inscription. Et vous remarquez également qu'il y a une petite animation au moment du prototypage. Vous allez donc apprendre comment ajouter un prototype dans votre application Web avec des animations, différents types de fonctionnalités prototypes et bien d'autres choses. Maintenant, si je clique sur ce texte, ai déjà un compte, vous allez simplement m' envoyer sur la page de connexion. Et vous pouvez voir une petite animation ici. Et si je clique sur la page de connexion, je vais passer à la page d'accueil. Et maintenant, je peux accéder à cette page d'accueil. Ce projet va donc m'aider beaucoup à apprendre à concevoir une application Web à l'aide de Figma. Après avoir conçu et prototypé l'ensemble de l'application, vous apprendrez également à exporter votre conception, à exporter votre conception, puis à partager votre fichier avec d'autres membres de l'équipe afin que Les gens du monde entier peuvent accéder à votre conception, travailler en équipe. Ce sont donc les quelques équipes qui vont apprendre de ce cours. Ce cours va beaucoup vous aider à devenir un bon designer car j'ai essayé de suivre la meilleure pratique, la meilleure technique de Figma. Par conséquent, je vais vous cacher pour vous encourager à vous inscrire à ce cours. On se voit dans la classe. 2. Navigation de conception: Bienvenue dans cette conférence. Dans cette partie, nous allons commencer à travailler sur notre projet. Donc, avant tout, vous devrez vous connecter à Figma. Vous pouvez donc voir que je viens connecter à l'aide de mon compte. Si vous n'avez pas encore vos commentaires sur des années, vous pouvez simplement vous inscrire à l'aide de votre adresse e-mail. Et dès que vous vous connectez à votre compte Figma, vous pourrez voir ce type de tableau de bord si vous avez déjà travaillé sur un projet auparavant, vous pouvez voir ce type de projet de travail récent. Mais sinon, vous ne pourrez voir que cette chose. Donc maintenant ici, nous pouvons voir souvent appelé nouveau ressentiment puis nouveau fichier Figma, Faker Gem, puis nouveau fichier d'entrée. Pour nous, nous allons commencer par cliquer sur un nouveau fichier de conception car nous allons commencer à travailler sur notre projet dès le début. Je vais cliquer dessus, puis il va ouvrir un nouveau projet. Actuellement, nous n' avons pas de tableau d'art ici. C'est donc le tableau de bord de base ou Figma. Dans la barre supérieure, sur la barre d'outils, nous avons tous les outils capables de niveler dans Figma. Ensuite, nous avons cette option de cadre. Nous devons donc d'abord ajouter un cadre. Je vais donc cliquer sur le cadre et nous allons travailler sur un web. Vous pouvez voir qu'il y a quelques options. Taille d'affichage du téléphone. Si vous travaillez pour un téléphone, téléphone FU, une interface utilisateur d'application mobile, vous pouvez sélectionner n'importe lequel d'entre eux. Mais pour nous, nous allons concevoir nos applications Web. Je vais cliquer sur l'arrêt de pont. Et dans l' arrêt de pont, vous pourrez voir ce genre de vue. Je vais donc sélectionner l'indice 121440 de dix à quatre. Ensuite, ça va nous donner un tableau d'art. D'accord ? C'est donc notre principal résultat. Maintenant, nous avons notre tableau d' art et ici , nous devrons concevoir notre application. Nous allons donc réaliser ce type de design dans ce cours. Donc, si nous voulons avoir notre barre de navigation , nous aurons des e-mails, ces choses. Ensuite, nous aurons notre liste de propriétés, puis la pagination et notre option d'abonnement. Donc, plus ou moins, nous allons essayer de réaliser ce type de design. Et nous devrons également concevoir une approbation et assigner le rythme de notre application. Commençons donc à y travailler. Tellement vite, nous avons notre prochaine partie. Alors, comment ajouter notre assistant ? Ajoutez donc notre barre de navigation que nous allons créer, nous allons utiliser cet outil de rectangle. Et je vais dessiner un rectangle en haut. Et nous y voilà. Je vais dessiner un rectangle ici. Et si je regarde cette image ici, on peut voir qu' il s'agit d'une couleur blanche, arrière-plans, donc je vais changer la couleur. Ainsi, une fois que vous aurez sélectionné votre barre de navigation, vous aurez la possibilité d' ajouter cette couleur d'arrière-plan, cliquer sur le remplissage, puis vous aurez la possibilité de sélectionner la couleur blanche. Et maintenant, nous ne comprenons rien, car nos antécédents sont également vastes. Que puis-je faire ici ? Je veux ajouter, je veux ajouter notre effet ici. Donc, si vous cliquez sur l'effet, il nous donnera notre ombre portée. Il y a donc quelques ombres ici si vous le souhaitez, vous pouvez simplement jouer avec ça. Il vous donnera une ombre intérieure. Ensuite, il va nous donner de l'ombre de l'intérieur. Mais nous devons avoir une ombre portée ici. Et maintenant, permettez-moi de lancer l'application pour que nous puissions voir notre vie changer. Si nous effectuons des changements. Si je clique sur le bouton Exécuter, il s'ouvrira dans un nouvel onglet ici. Et nous y voilà. Nous pouvons voir que c'est notre bar de navigation. Nous devons maintenant ajouter un texte ici, puis notre élément de menu. Nous pouvons donc simplement utiliser cet outil de texte, cliquer sur le texte. Et ici, je vais écrire un texte intitulé Trouver la maison. Cool. Nous devons maintenant modifier la taille de la police ici. Donc c'est le formulaire dit par défaut 12e, mais je vais sélectionner 44, celui-ci. Et si vous voulez découper quelque chose, vous devez cliquer sur ce film pour pouvoir sélectionner une option, puis glisser-déposer. Et voilà. Nous avons cette maison maintenant ici, mais elle est beaucoup trop grande. Je vais donc sélectionner, l'ajouter à. Et puis à partir d'ici, j'aimerais ajouter différents types de design ici car une sorte de couleur normale, je vais choisir avec un moyen. Et ici, nous pouvons simplement sélectionner différents types de textes. Je veux dire, nom de famille de polices, c'est par défaut ici. Cela ne va pas paraître bien. Je vais en choisir un autre. Ok, donc ça ressemble à ça. Donc, ça ressemble à ça. Et peut-être celui-là, pas celui-là. Et cela n'a aucune chance. Et nous pouvons en donner un ou nous pouvons essayer d'en ajouter un autre. Bon, donc ça a l'air bien. Je pense que nous pouvons essayer quelques autres options et cela ne change rien. Bon, donc ça a l'air bien. J'aime bien celle-ci et ensuite je vais changer la couleur de celle-ci. Nous pouvons donc ajouter cette couleur par défaut pour celle-ci. Ok, donc maintenant nous avons cette option et ensuite nous devons ajouter notre Maintenant pour les articles, donc nous avons quatre éléments ici, propriété de la maison, de nouvelles listes, connexion et l'inscription. Je vais donc cliquer sur l'outil Texte. Et à partir de là, je vais commencer à ajouter celui-ci. Nous pouvons donc faire une autre chose ici, est-à-dire que nous devrons toujours le faire, alors je vais cliquer dessus. Et ici, nous pouvons ajouter notre système de réseau. Comment ajouter notre système de réseau ? Je vais donc sélectionner le cadre. Et dès que je sélectionne le cadre, il y a l'option appelée Grilles de mise en page. Si vous cliquez sur celui-ci, il va nous ajouter un système de grille. Donc maintenant, cela ressemble à ceci, mais nous pouvons certainement le changer. Nous pouvons donc maintenant, au lieu de la taille dix, en ajouter 60. Ensuite, ça va ressembler à ça. Et nous pouvons également sélectionner, si nous n'avons besoin que d'une colonne, il ne fera qu'ajouter une colonne. Mais si vous avez besoin de colonne et de ligne, et alors nous pouvons aussi, peut-être que nous avons besoin de trois colonnes. Vous pouvez également compter la colonne cinq colonnes. Ensuite, au lieu de 20, je peux en sélectionner cinq, ou peut-être que je peux en sélectionner deux. C'est donc l'espace là-dedans, super, mais nous avons besoin de colonne et de ligne. Nous avons besoin d'une grille de cette façon. Nous pouvons garder celle-ci et elle a l'air bien. Nous pouvons maintenant ajouter notre texte ici. Donc, d'abord, je vais commencer par ici. Je peux donc dire chez moi. Et maintenant, nous devrons changer la taille de notre police car nous n'avons pas besoin d'en avoir 32. Nous pouvons donc ajouter ici. Je pense que nous pouvons en ajouter 16 ici, et nous pouvons également le tester dans notre vue en direct en temps réel. Donc, ça a l'air bien. Nous pouvons donc rester avec 16. Maintenant, j'ai ajouté celui-ci. Maintenant, je n'ai plus besoin de cliquer ici encore et encore. Que puis-je faire ? Je peux appuyer sur, je peux sélectionner ce texte , puis appuyer sur Contrôle D pour faire un double. Et vous pouvez voir que nous avons deux articles ici. Maintenant, je peux faire glisser celui-ci ici, puis je peux simplement changer le nom du texte. Je peux simplement dire que je peux dire « propriété ». Et qu'est-ce que nous avons ici ? Nous avons notre nom, notre propriété, notre nouvelle liste. Et puis je vais le dupliquer. Et ensuite, je vais additionner la propriété. Je vais ajouter une nouvelle liste, une nouvelle liste. Ensuite, nous avons notre approbation, nous avons notre option de connexion, mais pour la connexion, nous avons ce contexte. Je vais donc prendre l'aide de cet outil rectangulaire Londres. Je vais dessiner ce rectangle ici. Et je dois ajouter un rayon de bordure pour ce rectangle. Pour ajouter un rayon de bordure, je vais devoir l'ajouter ici. Je vais sélectionner 20, puis modifier la couleur d'arrière-plan pour cette couleur. Et je dois l'ajuster. Vous pouvez en voir 18 de chaque article que nous gardions à distance. Je vais donc garder celui-ci ici. Et puis laissez-moi essayer à quoi ça ressemble ici, pour qu'il soit beau. Et alors, que puis-je faire ? Je peux ajouter du texte ici. Je peux simplement dire « Connexion ». Et puis, à partir d'ici, je peux simplement ajouter celui-ci ici et au centre. Et nous en avons un autre. Je vais faire un double. Et celui-ci va être le nôtre, celui-ci sera notre inscription. Celui-ci va donc être notre inscription. Inscrivez-vous. Très bien, donc, d'accord, cool. C'est vraiment génial. Maintenant, je peux faire une chose. Donc ceci, ce texte et cet arrière-plan, je devrais La Mecque grandir parce que lorsque nous ferons un prototype, nous n'avons pas besoin de le faire groove. Donc, lorsque nous ferons des prototypes pour que lorsque l'utilisateur clique sur l'une de ces zones, nous puissions afficher le prototype. Je vais donc le faire grouper. Donc, pour en faire un groupe, j'ai besoin d'appuyer sur le contrôle Z de mon clavier ou vous pouvez cliquer avec le bouton droit de la souris. Et ensuite, vous pouvez également dire où vous pouvez également cliquer dessus. On peut dire groupe. Maintenant, le groupe R est là. Et nous pouvons simplement renommer le nom du groupe ici ou Contrôler R. Je peux dire Connexion, bouton. Cool. C'est joli maintenant. Et d'accord, donc tout va bien. Une chose que je veux vous montrer maintenant, alors allons maintenant faire un groupe tout cela. Donc ce bouton, cette nouvelle liste propriétés sinus de la maison et du temps fini, je vais appuyer sur commande pour trouver la maison uniquement cet élément. Et je vais appuyer sur Command Z. Et maintenant je peux simplement faire glisser tout ça un peu si je le veux. Je n'aurai donc pas à faire ça. Et si je veux, même si je veux, je peux augmenter le blanc de celui-ci et ainsi tout va automatiquement ajouter la poitrine. Même si je le veux, disons que je veux changer le, disons que je veux changer la taille de la police. Supposons que je souhaite modifier la taille de la police de cet article. Supposons que je veuille modifier la taille de police de celle-ci ici. Ensuite, je peux aussi le changer à partir d'ici. De cette façon, nous pouvons simplement changer cela. Ensuite, sélectionnez-le, et ensuite je peux simplement changer 16 à 20, puis ça va grossir. Mais j'ai besoin d'en avoir 16 ici. Donc, ça a l'air vraiment génial maintenant. Parfait. Nous avons donc enfin ajouté notre barre de navigation. Je pense que nous devons ajouter cela un peu parce que les textes sont devenus un peu plus petits parce que nous augmentons la taille. Maintenant, ça a l'air vraiment joli. Nous avons donc réussi à ajouter notre panneau. Nous avons ajouté notre barre de navigation. Et dans la partie suivante, nous allons apprendre comment ajouter cet écran d'accueil. Je vais donc arrêter cette vidéo ici et vous voir lors de la prochaine conférence. Au revoir. 3. Image de couverture de maison et conception de cartes: Bienvenue encore une fois. Dans cette partie, nous allons essayer d' ajouter cette page d'accueil et ce design. Pour ce faire, je vais d'abord et avant tout dessiner notre rectangle ici. Sélectionnez donc ce rectangle et à partir d'ici, ou peut-être d'ici. Donc, à partir du milieu, je vais dessiner un rectangle ici, cette partie à cela. La hauteur sera donc un peu plus grande, je pense. Ok, laissez-moi vérifier à quoi ça ressemble ici. On dirait donc cette taille d'écran. Et je pense qu'il est normal d' avoir la taille de l'écran. Et je peux peut-être le faire glisser un peu vers le bas. Bon, maintenant, nous pouvons simplement faire glisser notre image depuis le fichier. J'ai donc déjà téléchargé ce EMS. Alors, laissez-moi essayer quel gâchis j'ai utilisé ici. Je l'ai donc utilisé ici. J'ai donc utilisé cette image. Je pense que celui-là, pas celui-là. Je l'ai utilisé dans celui-ci. Laissez-moi le faire glisser ici, puis le déposer ici. Et ensuite, si vous cliquez sur le côté droit, il va ajouter celui-ci. Donc, si vous allez faire cela de cette façon, au début, il affichera automatiquement la taille réelle de l'image. Ce n'est donc pas la meilleure approche. Je vais donc retirer celui-ci. Mais figma a cette option, alors veuillez envoyer un e-mail. Alors, que pouvons-nous faire ? Je vais sélectionner celui-ci ici , puis je vais aller dans mon répertoire ici. Et ensuite, si je clique dessus, disons que je veux ajouter cette image ici, puis l'ouvrir. Ça ne va pas se montrer ici. Maintenant, si je fais un clic droit, si je le fais maintenant, vous pouvez voir si je survole avec la souris, je peux voir cette image maintenant si je clique, cliquez avec le bouton droit de la souris. Donc maintenant, si je clique sur ma souris dans la partie gauche, il va ajouter cette image ici. Cool. Nous pouvons donc maintenant voir dans cette image sur, en plus des e-mails, nous avons un autre rectangle. Je vais donc dessiner ce rectangle ici, il va être de couleur blanche. Des rectangles si vite que je vais ajouter un peu de rayon de bordure ici, peut-être cinq pixels. Et puis je vais ajouter celui-ci ici. Et je peux voir ce truc. Laissez-moi voir ce que nous avons d'autre ici. Nous avons un bouton et nous avons un texte ici. Je vais donc ajouter du texte ici. Je vais cliquer dessus, puis je vais écrire le texte ici. Je peux dire trouver la maison de vos rêves. Cool. Donc je peux, oh, d' accord, pour que nous puissions augmenter la taille de la police rapidement. Nous avons peut-être besoin de 40. Et je vais l' ajouter de cette façon. Et maintenant, ça a l'air bien, mais on peut toujours l' ajuster de cette façon. Et ensuite, nous pouvons réduire la taille de la police à 36, ou cela semble bien, mais nous pouvons changer la couleur et ajouter un peu de design du texte afin que nous puissions choisir différentes types de textes. Famille de police. Ça a l'air bien. Je vais voir le hasard ou la couleur de celui-ci. Peut-être cette couleur, j' utilise juste une couleur aléatoire. Mais si vous avez votre couleur préférée ou si vous avez une couleur sélectionnée, vous pouvez certainement utiliser celle-ci ici. Et maintenant, après cela, je vais dessiner notre rectangle. Alors, comment faire un rectangle ? Cliquez sur l'outil Rectangle. Et puis je vais dessiner ce rectangle de cette façon. Et je vais devoir ajouter un rayon de frontière ici. Cliquez donc sur ce rayon de bordure. Et puis je vais changer la couleur de fond de celle-ci. Pas celui-là. Peut-être une couleur différente ou quelque chose de proche à lire. Peut-être cette couleur rouge. Et ici, je vais écrire un texte. Je peux dire prendre rendez-vous. Je ne suis donc pas en mesure de m'ajuster ici car la taille de la police est beaucoup trop importante. Je vais donc sélectionner 16, et ensuite tout devrait fonctionner. Et laissez-moi essayer. Pourquoi avons-nous ou nous pouvons simplement dire prendre rendez-vous au lieu de prendre rendez-vous , car cela prend un peu plus d'espace. Et maintenant, je peux le dire. Donc, ça a l'air tellement beau. Pas de problème avec ça. J'ai aimé ça et tout va bien jusqu'ici. Et je voulais vous montrer encore une chose. Donc, si vous souhaitez ajouter une bordure ici, comment pouvez-vous le faire ? Donc, vous pouvez vraiment le faire. Il existe une option appelée contour, et si vous cliquez sur le Contour, il va ajouter la bordure. Vous pouvez également modifier la couleur de la bordure en une couleur différente. Vous pouvez également modifier la taille de la bordure. Peut-être voulez-vous avoir une taille plus grande de Boehner. Vous pouvez donc choisir parmi ce modèle. Et si vous venez ici, nous pouvons voir cette frontière ici. Et même vous pouvez également sélectionner le style de bordure ici. Donc, on peut dire centre à l'extérieur. Et ensuite, si vous voulez ce type de bordure ou un autre type, vous pouvez également voir au lieu de solide, peut-être que vous avez besoin dans le tableau de bord et vous pouvez également voir que ces indels utilisent souvent APR ici. Il existe donc quelques options que vous pouvez appliquer en fonction de vos besoins. Mais pour l'instant, je n'ai pas besoin d'avoir cette frontière. Je vais le désactiver. Si vous cliquez sur l' option i va désactiver et elle va également activer de cette manière. Donc, si vous cliquez ici, il va faire le mur. Si vous cliquez ici, il va intercaler. Maintenant, si je viens ici, tout va bien. Mais j'aimerais ajouter un peu de dégradé linéaire ici. Donc, si je clique sur cette ligne, au lieu de cette façon, j' essaierai de l'ajouter de cette façon. Ou de cette façon, ça a l'air vraiment génial. Maintenant, je vais me rapprocher un peu plus. On y va. On peut encore voir un peu d'ombre en bas ici. Mais il y a quelques autres options. Peut-être pourriez-vous essayer ce chef angulaire. Ensuite, ça va ressembler à ça. Et peut-être que vous avez un chef au diamant et ensuite ça ressemblera à ça. Et peut-être que vous avez une forme radiale qui va ressembler à ça. Vous pouvez donc jouer avec celui-ci. Je vais donc simplement sélectionner celui qui est linéaire. Et ensuite, je peux simplement garder celui-ci ici. Très bien, je vais arrêter cette vidéo ici, et nous allons concevoir notre partie lors de la prochaine conférence. voit lors de la prochaine conférence. Au revoir. 4. Conception de carte de propriété: Bienvenue encore une fois. Dans cette partie, nous allons commencer à travailler là-dessus, sur ce système de cartes que nous avons pour notre propriété. Très bien, pour le faire, comment puis-je le faire ? Alors, que pouvons-nous faire ? Donc , avant tout, nous devons augmenter la taille du cadre. Je vais donc sélectionner le cadre. Et puis, en bas, je vais juste faire glisser un peu, peut-être ça. D'accord ? Et après cela, nous devrons le faire, maintenant nous avons ce regard. Ok, nous avons cette barre de navigation, nous avons cette boucle. Maintenant, nous allons ajouter cette carte. Donc, pour ajouter une carte, je vais d' abord et avant tout ajouter ce rectangle. Disons que nous allons commencer à partir de 123 et cet arbre, accord, nous allons commencer par là ou peut-être à partir d'ici. Commençons par ici. C'est donc la beauté de l'utilisation de ce système de grille pour que nous puissions facilement comprendre chaque élément. Nous allons donc commencer par là, et peut-être à partir d'ici, je l'ajouterai rapidement à partir d'ici, puis plus tard, nous le ferons. Très bien, une chose qui est perceptible est que nous avons design similaire pour chaque élément que nous avons normalement dans notre application Web. Pour cela d'abord, nous ne ferons toute cette partie qu'une seule fois, puis nous allons les regrouper et ensuite nous pourrons simplement la dupliquer. De cette façon. Nous n'aurons pas à faire la même chose encore et encore. Et c'est la meilleure approche. Donc, la plupart du temps, vous devrez travailler de cette façon. Par exemple, si vous affichez 100 données dans un panier, puis vous, et certainement nous ne ferons pas ces 100 cartes séparément. Quand cela ressemble exactement à la même chose, vous en gagnerez un, vous suffit de faire un double. Bon, maintenant, nous avons d'abord nos courriels en haut. Donc, pour ajouter un gâchis. Je vais donc prendre une autre carte pour l'EMS, un autre rectangle ici au-dessus de celui-ci. Nous pouvons donc simplement ajouter cette carte à partir de cette ligne. Et puis cette carte contiendra notre image jetée, principalement notre image. Je vais maintenant ajouter l'image rapidement. À partir d'ici, je vais cliquer sur cet endroit. Ensuite, je vais sélectionner cette image. Et ça va voir ici, ça prend du temps. Et dès que j'ai celui-ci, je peux survoler et voir cette image. Maintenant, cliquez sur la souris et vous avez obtenu cette image. Je vais ajouter un peu un rayon de bordure de cinq pixels également pour le panier principal et que nous avons, je vais ajouter un rayon de bordure, cinq pixels. Ok, donc maintenant nous avons ce système EMS et nous avons ce chariot. Cool, c'est vraiment joli. Maintenant, vite. Nous devons ajouter une ombre ici. Donc, pour ajouter de l'effet ici dans le panier principal, pas dans le rectangle. Le rectangle six, qui est notre carte principale, pas la carte EMS. D'accord. Notre sclérose en plaques rectangles de six heures. Il s'agit d'un rectangle. Une chose que vous pouvez également faire est que vous pouvez simplement changer le nom de la zone afin comprendre ce que vous faites. Nous pouvons simplement dire des courriels rectangle, rectangle, quel qu'il soit. Donc maintenant, de cette façon, nous pourrons vraiment comprendre et nous le pouvons, et celui-ci nous pouvons simplement dire chariot principal. On peut dire carte principale, ok, celle-ci, et de cette façon, vous pourrez vous identifier très facilement. Maintenant, je vais ajouter un effet ici, vais nous donner une ombre ici. Et encore une fois, vous pouvez jouer avec l'ombre, vous pouvez ajouter différents types d'ombres. Vous pouvez faire tellement de choses avec celle-ci de ce que nous avons dit de côté, peut-être que vous voulez flouter pour, peut-être que vous voulez un bloc huit. Ensuite, il va ressembler à ça. Ça va vous donner une option un peu plus floue en bas. OK, c'est cool. Nous devons maintenant changer la couleur de fond de celle-ci. Je vais donc ajouter cette couleur de paragon. Et ça ressemble à ça. Nous avons maintenant notre prix, notre emplacement et notre bouton ici. Je vais donc ajouter rapidement ce prix ici. Je vais donc cliquer sur cette technologie T. Et à partir de là, je vais commencer ce prix. On peut peut-être le dire , puis juste un texte aléatoire. Et je vais changer la couleur de celle-ci. Peut-être cette lumière claire ou verte , cette couleur claire. Il n'a pas l'air bien. Nous pouvons en choisir un autre. Oui, ça a l'air bien. Et maintenant, on peut peut-être le faire glisser un peu plus près de cette image. Et puis je peux ajouter, d'accord, donc maintenant pour ajuster celui-ci, que puis-je faire ici ? Principalement, vous pouvez voir que la taille de notre grille est vraiment plus grande. C'est la raison pour laquelle nous ne sommes pas en mesure de le comprendre. Alors, que puis-je faire ? Je peux simplement ajouter la grille. Cliquez donc sur le système de grille. Donc, au lieu de la taille 16, je peux ajouter 40. Bon, maintenant, j'ai une petite taille de grille. Je peux donc facilement comprendre à partir de murmure, je n'ai pas commencé. Dans ce texte. Je vais donc, au lieu de cela, nous pourrons également renommer le texte ici. Vous pouvez simplement dire prix de l'or. Maintenant, je peux faire un double, alors appuyez sur Commande D, puis je peux commencer par la même ligne. J'espère que vous comprenez pourquoi j'ai ajouté cette petite taille de grille. Nous pouvons voir que nous partons de cette ligne, celle-ci, vous pouvez voir cette ligne. Et je peux prendre un peu plus de place. Et puis je peux simplement changer le nom de celui-ci. Je peux simplement dire que l'emplacement va être ici. Donc, l'emplacement, on peut dire Londres. On peut dire que le lieu est Londres. Et certainement si vous le souhaitez, vous pouvez simplement changer la couleur de celui-ci. J'aimerais donc avoir une couleur différente pour celle-ci. Peut-être cette couleur. Et peut-être que j'aimerais ajouter une famille de polices différente pour le texte. Cool. Peut-être celui-là. Oui, on peut le faire. Et maintenant, nous pouvons ajouter un rectangle pour le bouton de réservation. Je vais donc commencer ce bouton de réservation d'ici à ici. Encore une fois, ajustez-le à partir du milieu et je ne pense pas à partir de là. Nous pouvons l'ajuster. Nous pouvons l'ajouter à partir de cette partie. Nous pouvons l'ajouter à partir d'ici. Oui, je pense que nous pouvons le faire de cette façon. Nous pouvons me laisser voir à quoi ça ressemble. Ça a l'air bien, mais on peut d'abord changer la couleur d' arrière-plan. Et pour l'ajouter, je vais choisir cette couleur d'arrière-plan et ajouter un rayon de bordure 20. Et maintenant, nous pouvons ajouter un texte ici. On peut dire réserver maintenant. Et c'est le bouton « livre maintenant » que nous venons de concevoir. Il n'est pas au centre. Rouge froid, ça a l'air vraiment joli maintenant. Et maintenant, nous pouvons dupliquer cette carte et le faire. Je peux donc dire rectangle, ce rectangle six est notre livre. Maintenant. Bouton. Si vite, que pouvons-nous faire ? Nous pouvons les créer en groupes. Donc ce livre maintenant et ce bouton livre maintenant sont ensemble. Nous allons donc faire d'eux un groupe en appuyant sur la commande G, puis nous pourrons dire, que pouvons-nous dire ? Nous pouvons les renommer et nous pouvons dire le bouton Livre appelé, nous avons Dissocié celui-ci. Maintenant, nous avons ce bouton Livre de groupe. Et puis ce sont la carte principale, ce prix et ce prix. Nous pouvons donc le modifier par ce texte. Nous pouvons simplement dire l'emplacement parce que c'est correct, donc je pense que nous l'avons fait différemment. D'accord. Laissez-moi le défaire. Okay, donc celui-ci devrait être un endroit. Je vais donc ajouter un emplacement ici. Donc, le rectangle cinq, le rectangle cinq n'est pas celui-ci. Donc, ce rendez-vous de livre. Nous repérons donc ce rendez-vous, ce bouton de livre ici, puis cette image, puis l'emplacement que le prix, puis le panier principal. Mais il y a un autre texte qui s'appelle rendez-vous au livre. Ce rendez-vous est donc ce bouton ici, ce texte. D'accord. C' est donc la principale chose qui contient cette carte. Je vais donc faire d' eux un groupe ensemble. Je vais donc appuyer sur Command Z. Et nous pouvons dire que nous pouvons le renommer, nous pouvons dire une propriété groupée, des objectifs principaux de la carte. Maintenant, cette chose maintient tout notre système, nous pouvons jockey ensemble. Nous pouvons le mettre n'importe où, où nous le voulons. Nous avons donc ces choses. Je vais appuyer sur la commande D, puis je vais appuyer sur cette chose ici. Et peut-être de cette façon. Et peut-être que nous pourrons appuyer une fois de plus et ensuite, une fois que vous avez été dupliqué, il va automatiquement l'ajuster pour vous quelques fois. Je peux donc maintenant l' ajuster de cette façon. Peut-être allons-nous commencer par ces deux-là et ensuite nous pourrons le faire de cette façon. Alors maintenant, lorsque nous glissons et déposons, nous pouvons voir que nous avons encore ce 20 par 20. Et puis, nous avons cette carte 2020. De chaque article, nous maintenons une distance de 20 sur 20. Bon, maintenant, laissez-moi voir à quel point c'est cool. C'est vraiment joli. Il a donc l'air vraiment beau des deux côtés. Nous avons le même design. Une autre chose que nous pouvons faire maintenant, nous pouvons refaire cela pour un article dans un groupe car en bas, nous aurons besoin d'un autre article pour celui-ci, n'est-ce pas ? Alors, comment pouvons-nous le faire ? Nous pouvons les faire en groupe, en groupe, en groupe. Ensuite, je vais appuyer de nouveau sur la commande G. Et ici, je peux simplement renommer celui-ci et je peux le dire, donc si je dois renommer celui-ci et je vais le dire. Article de garde à la première rangée. Cool. Maintenant que tous ces éléments font partie d' un groupe, que puis-je faire ? Je peux simplement les déplacer et ensuite je peux les ajuster de cette façon. Je peux les ajuster de cette façon. Maintenant, je pense que des deux côtés nous avons, de ce côté, nous avons le même espace, et de ce côté-ci, nous avons le même espace. Ok, cool, c'est vraiment joli. C'est ainsi que vous pouvez organiser votre fichier. Vous pouvez organiser votre document, n'importe quel type de conception que vous faites. Vous pouvez simplement le faire. Vous pouvez simplement suivre cette technique et vous pouvez certainement le faire. Maintenant, que puis-je faire ? Je peux donc, avant de les dupliquer, je pense que je dois augmenter taille de mon cadre principal, la hauteur du mainframe. Je vais donc l'augmenter de cette façon. Ajoutons-le de cette façon. Et maintenant, que puis-je faire ? Je peux simplement sélectionner celui-ci. Je vais faire un double commande D. Donc je vais appuyer sur, je vais le mettre ici juste au bas de cet article, peut-être une ligne. Et exactement la même chose que dans cette position. Ensuite, je vais appuyer à nouveau sur la commande D, et cela va en ajouter une autre pour. Maintenant. Laissez-moi voir à quoi ça ressemble ici. C'est vraiment joli. Maintenant, nous avons ces trois beaux designs que j'ai vraiment aimé. Cool. Nous avons donc conçu quelque chose de vraiment unique dans cette partie. Et je vais arrêter cette vidéo ici. Et nous continuerons avec la prochaine conférence. Nous allons essayer de corriger quelques autres choses et d'ajouter quelques fonctionnalités supplémentaires dans ce projet lors de la prochaine conférence. voit lors de la prochaine conférence. Au revoir. 5. Conception de pagination: Bienvenue encore une fois. Dans cette partie, nous allons essayer d'ajouter un peu de pagination dans notre candidat, dans notre application Web. Vous pouvez donc voir que celle-ci est vraiment belle, vraiment belle. Pas de problème avec ça. Mais ici d'abord, je vais ajouter notre pagination. Donc, pour ajouter une pagination. Nous allons donc essayer d'ajouter ce type de pagination ici, semblable à celle-ci. Pas celui-là. Mais juste pour une idée de base, nous allons ajouter à ce genre de pagination ici. Pour ajouter d'abord une pagination, je vais ajouter un rectangle ici. Et je vais commencer à concevoir ce rectangle. Ce rectangle exactement de ce côté, sorte qu'il corresponde exactement à la même chose. Et à partir de là, cela correspond exactement à la même chose. Ok, donc si elle correspond à la même ligne, alors vous pourrez voir ce genre de ligne. Cela signifie que nous sommes dans la même ligne ou que nous sommes dans la même ligne. D'accord ? Nous avons exactement la même chose ici. Et puis refroidir. Nous avons donc maintenant ce design et nous pouvons essayer d'ajouter une couleur différente, je pense, pour notre pagination. Ou peut-être que nous pouvons essayer cette couleur et cool. Nous pouvons donc absolument ajouter notre fond, notre rayon de bordure. Disons donc d'ajouter un rayon de bordure cinq. Et maintenant, ici, nous allons ajouter notre pagination. Alors, comment ajouter notre pagination ? Pour ajouter notre numéro de pagination ? Nous allons dessiner un cercle. Je vais donc cliquer sur cet outil d'ellipse ici. Commençons par la pagination à partir d'ici. Et pour faire exactement le cercle, nous devons nous assurer que la largeur et la hauteur sont identiques. Ok, donc on a Y 28, puis on a 28. Et puis, il ressemblera exactement à un cercle. Il aura l'air exactement en cercle. Et on peut aussi le rendre un peu plus grand et ensuite le faire 38 par 38. Et ceci et cette taille, nous avons celui-là et nous pouvons ajouter une couleur de fond pour celle-ci. C'est donc la couleur de fond de notre végétation. Et une autre chose que nous pouvons faire est avec cette pagination, nous pouvons ajouter une bordure. Laissez-moi voir à quoi ça ressemble. Bon, il faut donc ajouter une bordure un peu plus grande. Donc celui-là, et cela ne va pas paraître beau parce que nous avons déjà une couleur d' arrière-plan colorée, nous devons donc la rendre blanche et différentes couleurs pour que nous puissions voir celle-ci. Je vais donc augmenter la taille de la frontière à cinq. Nous pouvons maintenant le comprendre. Mais nous n'avons pas besoin d'avoir le VIH, je pense pour le bien, ou peut-être trois, le bon. Et essayons d'ajouter une couleur d'arrière-plan différente pour ce rayon de bordure et son apparence. Ok, ça n'a pas l'air bien, donc je pense que nous n'avons pas besoin d' ajouter une couleur de bordure ici car nous avons déjà cette couleur d' arrière-plan. La raison pour laquelle cette couleur d'arrière-plan et s'adapte ici. Maintenant, nous devons ajouter, nous devons concevoir quelques autres choses ici. Le premier sera donc notre numéro. Bon, commençons par ajouter un texte ici. Cette ellipse sera donc notre pagination, notre numéro de pagination. Ensuite, je vais ajouter un texte sur cette pagination. Et nous devons avoir, d' accord, alors laissez-moi d'abord ajuster ce texte ici. Ok, laissez-moi ajouter le tirage par le plus rapide ici. Si j'écris celui ici , je peux juste le mettre au milieu. Et pour cette pagination, nous n'avons pas besoin d'avoir cette taille de police car elle sera différente. Je vais donc plutôt choisir celui qui est habituel. Peut-être pourrons-nous choisir celle-ci aussi. Alors, où est le habituel ? Et cela aura par défaut. Donc, si quelque part dans notre récursif régulier, je n'ai pas la normale ici, c'est quelque part, ça devrait être régulier. Le texte est écrit de cette façon. Ou bien, c'est difficile de ne pas avoir l'idée. Nous pouvons donc simplement ajouter peut-être ceci, alors cela ne ressemblera pas. Nous pouvons simplement commencer à régler ici. Il n'arrive donc pas de cette façon. Nous pouvons le faire. Qu'en est-il de celui-ci ici ? Je pense que nous pouvons commencer ici. Rien ne vient avec celui-là. Donc, rien ne l'est. D'accord. Donc je pense que nous avons ces modèles réguliers ici. C'est le standard ou vous pouvez le choisir vous-même ou vous pouvez choisir n'importe quelle autre option. Je pense que nous ne l'avons pas compris, mais nous avons quelque chose de différent de celui-ci ici. Cool. Nous avons cette option ici à l'heure actuelle. Je vais donc voir celui-là. Ce style de texte n'est pas seulement agile ici car auparavant nous l'avons utilisé. Il y a une raison pour laquelle nous avons cette option ici. Nous pouvons donc choisir un nouveau texte ici. Et d'ici à ici. Et peut-être celui-là. Bon, donc c'est un peu plus gros. Je peux donc donner celui-ci ici et je peux le mettre au centre. Voyons maintenant à quoi ça ressemble. On dirait ça. Encore une fois, je pense que c'est maintenant au centre. Oh, exactement. Ce n'est pas au centre, il faut donc le mettre au centre. D'accord, il y a donc assez de centre. Maintenant, je vais en faire un groupe pour que nous puissions dire numéro de base, ce numéro. Donc, ce numéro et cette pagination, nous allons faire d' eux un groupe ensemble. Et nous pouvons dire, nous pouvons dire obtenir un article de pagination, nous pouvons dire l'article pg nation est un article, cool. Et puis je vais faire un double. Je vais le mettre ici. Maintenant. Laissez-moi essayer à quoi ça ressemble. Ça a l'air bien. Alors, que puis-je faire ? Je peux simplement appuyer sur dupliquer , dupliquer et dupliquer et dupliquer. Je pense. Pas de problème avec ça. Je peux maintenant avoir ce nombre de doublons. Donc, avant de faire quoi que ce soit d'autre rapide, je vais en faire un groupe, tout l' élément de pagination de sorte que si je dois réajouter et grainer ou si je dois le mettre ailleurs, alors je peux c'est simplement que je vais faire grandir. Et je vais le dire, des articles de pagination, je vais dire imagination, Origination. OK, c'est cool. Maintenant, que puis-je faire pour chaque article ? Je peux apporter des modifications ? Par exemple, ajoutons que celui-ci est deux. Je vais supprimer celui-ci et je vais en ajouter deux ici. Et parce que le premier va pouvoir icône. Je vais donc supprimer ce 1 premier 1, et je vais supprimer ceci, supprimer le dernier d'ici, car ici nous allons ajouter une icône de bouton suivante. Alors, comment pouvez-vous le faire ? J'ai installé R, installé un plugin appelé Feeder icon. Je vais prendre la moitié de cette icône. Donc, si vous ne savez pas comment installer l'icône, vous pouvez simplement cliquer sur Parcourir le branchement dans la communauté. Ensuite, à partir d'ici, vous pouvez simplement rechercher l'icône et ensuite vous pouvez simplement installer l'icône. Il va s'ouvrir. Vous pouvez donc voir qu'il y a beaucoup d' icônes ici. Il vous suffit de cliquer sur Installer, puis vous allez juste apparaître ici. Donc, lorsque vous cliquez dessus sous le plugin va montrer celui-ci. Je vais donc installer ces icônes de remplissage. J'ai déjà installé celui-ci. Je vais avoir quelques icônes d'ici, vais me montrer celui-là. Je peux donc voir cette flèche droite et gauche. Donc, celui-ci que je vais sélectionner, et je vais sélectionner cette flèche à gauche là où elle est tombée. Il est donc ici maintenant. Je vais donc simplement le faire glisser et ensuite je vais mettre ici. Et d'accord, donc l'autre chose est que c'est qu'il est passé en dehors de celui-ci. Donc, ce que je vais devoir faire, je vais devoir le faire glisser et le placer dans le numéro d'origine. On l'a compris dans la pagination. Celle-ci, d'accord. Maintenant, laissez-moi voir. Ok, on peut le voir ici. Et pour celui-là aussi, nous devons avoir la bonne icône. Bon, donc c'est ici maintenant. Et là où il se trouve, celui que nous avons dans celui-ci est ici au dernier. Je vais donc faire glisser celui-ci jusqu'au dernier ici. Ok, donc nous avons celui-ci ici et laissez-moi essayer celui-ci. Nous ne pouvons donc pas le voir ici. Laissez-moi voir ce qui s'est passé exactement ici. Donc, d'accord, il ne vient pas ici. Laissez-moi être enlevé. Ok, donc nous avons cette option d'outil ici. Je vais donc retirer toute cette partie d'ici. Je vais supprimer celui-ci. Ok, donc on peut, on peut, on peut le désactiver à partir de vite pour qu'il soit visible. Maintenant. Je vais maintenant ajouter cette icône ici. Et cette icône va s'ajouter ici. OK, c'est cool. Nous ne pourrons pas le voir car il est en dehors de nos cadres. Donc, ce que je vais faire, je vais le mettre ici. Ok, dès que nous l'avons mis ici, il n'est pas utilisable car le problème est là. Nous devrions donc le donner en dehors de celui-ci ici à partir de là. Je vais donc juste le décaler de celui-ci. Ou on peut simplement le mettre en bas, alors ça va encore marcher. Bon, donc nous pouvons avoir ces problèmes ici. Nous avons brisé tellement de choses pour celle-ci ici, même celle-ci va se bloquer à partir d'ici. Cool. Maintenant, il devrait regarder. Nous avons donc celui-là, mais cette flèche se trouve à l'intérieur de celui-ci. Donc, ce que nous pouvons faire ici, nous pouvons simplement glisser celui-ci à l'intérieur de ce texte dans le deck. Et oui, maintenant, il fonctionne donc vous n'avez pas besoin de le mettre à l'intérieur de cette végétation ici. Nous avons donc commis une erreur lorsque nous en avons besoin de cette façon. Il suffit donc de le mettre aussi longtemps qu' il se trouve dans le cadre de ce texte. Il peut également fonctionner ici. Vous ne mangez pas n'est pas obligatoire de le mettre à l'intérieur qui utilise un élément de pagination de cette façon. Nous pouvons donc certainement le faire ici. Mais quand nous avons essayé de le faire, nous avons cassé quelque chose. C'était une raison. Maintenant , il fonctionne parfaitement. Maintenant. Laissez-moi rapidement tenter le numéro de texte. Je vais donc appuyer sur ce bras deux 32 va être C, et ensuite celui-ci sera, car celui-ci sera cinq, et celui-ci sera six. Et après six ans, je vais ajouter un double point, triple point, puis j'en ajouterai sept. Celui-ci va avoir huit ans. Celui-ci va avoir neuf ans. Seulement neuf. Et celui-ci va être, alors celui-ci va être o of n. Celui-ci sera 12e. Cool. Alors, que puis-je faire maintenant ? Je peux simplement m'ajuster ici et celle-ci aussi au centre. Cool. Nous avons donc maintenant ce 1123456789101112. Nous avons cette belle pagination. Une autre chose que nous pouvons faire, c'est que nous devrons faire très bien. Nous devrons faire de markdown une option marquée. Je vais donc choisir celui-là. Vous pouvez peut-être sélectionner n'importe quelle option aléatoire. Alors, que pouvons-nous faire ? En gros, nous pouvons modifier la couleur de fond de cet article. Nous devrons ajouter une couleur d'arrière-plan différente pour celle-ci. Laissez-moi juste voir à quoi ça ressemble. Je suis content de cette couleur. Et puis je peux simplement choisir cette couleur blanche à partir d'ici. Et voilà. D'accord, mais ce rouge ne va pas bien paraître ici parce qu'on a quoi ? Nous avons déjà une couleur de fond. Ok, donc nous changeons celui-ci. Ce n'est pas bon. Nous devons changer cette couleur rouge par quelque chose de différent. Et je ne vais pas exactement celui-là. On peut essayer d'attacher le noir, je suppose. Oui, le noir va bien paraître parce que celui-ci est marqué. Encore. Je ne suis pas content de celui-ci. Un peu d'ombre de cet arrière-plan. Mais le problème est que nous avons déjà une couleur de fond. C'est la raison pour laquelle celle marquée va bien paraître directement. Nous avons donc celui-ci ou nous pouvons encore essayer une couleur un peu plus claire dans cette zone. Peut-être dans cette zone. Ok, donc ça va bien paraître et je vais changer la couleur du texte en noir. Cool. Maintenant, il est facile d'identifier lequel est intelligent ? Donc, trois sont marqués ici. C'est tellement sympa. Nous avons conçu quelque chose de vraiment sympa dans cette partie. Je vais arrêter cette vidéo ici. Dans la partie suivante, nous allons essayer d' ajouter quelques fonctionnalités supplémentaires dans cette application. voit lors de la prochaine conférence. Au revoir. 6. Conception de fonctionnalités de la section Collapse: Bienvenue encore une fois. Dans cette partie, nous allons essayer d' ajouter une autre section ici, qui portera sur la section à gauche, nous allons mettre notre EMS et le côté droit, nous allons ajouter un autre sexe. Permettez-moi de vous montrer comment nous pouvons le faire. Pour ce faire, nous devons d'abord et avant tout augmenter la taille de notre cadre principal, c' est-à-dire nos arrêts de pont. Je vais donc désactiver ce texte. Ensuite, je vais augmenter la taille de notre cadre principal. Je vais donc le faire glisser un peu plus de cette façon. Cool. Maintenant, si je regarde ici, nous pouvons voir que nous avons cet espace et que notre application a déjà fière allure. Nous avons des pixels parfaits. Et puis tout est vraiment superbe dans la position parfaite. Tout va bien ici. Et peut-être essayons-nous d'ajouter un peu de modification si c'est pour se reproduire. Mais pour l'instant, je vais ajouter une autre section ici, qui sera consacrée à la section. Et ici, nous allons avoir quelques détails. Nous allons donc ajouter celui-ci ici. Donc, d'abord je vais concevoir, je vais ajouter un rectangle ici. Nous venons de cette façon, cliquez sur le rectangle. Et peut-être à partir d'ici. On peut peut-être partir d'ici. Nous pouvons donc dessiner un rectangle. Et de ce côté à ce côté-ci, ou peut-être de ce côté-ci. Ce côté-ci. Et un peu plus gros. Et maintenant, permettez-moi de l'ajuster avec la même position afin que nous puissions voir cette marque rouge. Cela signifie donc que nous sommes dans la même position. Je vais donc mettre nos courriels ici. Je vais donc cliquer sur l'image de cet endroit, puis je vais sélectionner cette image ici. J'ai donc reçu cet e-mail d'Internet. Vous pouvez donc simplement télécharger n'importe quel e-mail ou utiliser n'importe quelle image ici. Maintenant, si je clique dessus, j'ai ces images ici. Et maintenant dans le côté droit, dans la barre latérale droite, on peut mettre, laissez-moi voir à quoi ça ressemble, à quel point il a l'air grand dans la taille réelle. Donc, ça ressemble à ça. Et nous pouvons essayer d'ajouter d'autres choses ici, d'autres choses. Ok, donc on peut ajouter à quoi, ce que je veux dire par celui-là. Je peux donc ajouter une autre section. Que puis-je dire pour ce rectangle ? Je peux dire à propos de Section. Et je vais dessiner un rectangle de plus ici, peut-être de ce côté à cette position. Maintenant, il va directement à cette taille. Ok, donc maintenant nous avons exactement la même taille du côté droit et dans la même position de cette image. Nous pouvons donc, cela augmente encore la taille de notre chariot. Et puis je peux ajouter un rayon de bordure de cinq pixels, peu d'ombre, un peu d' ombre, une ombre portée. Et puis je vais ajouter cette couleur de fond blanc. Nous avons donc maintenant ce genre de point de vue. En haut. Je vais d'abord ajouter à propos de nous. Alors, que puis-je dire ? Je peux simplement renommer celui-ci. Je peux en dire plus sur les détails. Ici. Je vais ajouter un texte, et le texte va s'ajouter ici, je vais parler de nous. Donc, à propos de nous, ça va ressembler à ça pour l'instant. Et dans la vue en direct va ressembler à ça, mais il devrait avoir une taille plus grande, peut-être 32. Et puis c'est toujours un, nous allons ajouter une couleur différente pour celle-ci, ni exactement pas la couleur noire. N'importe quelle couleur. Je sélectionne juste une sorte de, ou peut-être pourrais-je toujours sélectionner cette couleur car vous utilisez ce mode de couleur. Donc, pour ce style de texte, nous pouvons en choisir un autre. Nous pouvons choisir une couleur différente, un design différent. Et peut-être que celui-ci ou celui-ci, ou celui-ci, ou celui-ci ou cool, ça a l'air beau et mauvais. Nous pouvons donc utiliser celui-ci ici et nous pouvons simplement le mettre ici. Et après cela, nous allons ajouter une sorte d'effondrement de montré ici. Nous pouvons simplement ajouter une autre option de carte ici. Alors, que pouvons-nous faire pour cela ? Donc, ça a l'air vraiment joli. Je suis content de ça. Pas de problème avec ça. Mais je vais ajouter une voiture montrée ici. Donc, à propos de nous, je peux simplement dire. Nous allons rapidement renommer celui-ci à propos de Title. J'ai celui-là sur le titre. Toutes ces sections À propos. Je vais donc d'abord dessiner un rectangle de plus. Je vais prendre la moitié de ce rectangle. Je vais donc ajouter un texte détaillé ici. Nous pouvons simplement redimensionner celui-ci de cette façon. Nous avons donc ajouté le poids du Hamas plus grand que la taille moyenne de notre design. Nous pouvons donc ajouter celui-ci ici. Et puis nous avons ce design de Sean. Et nous pouvons ajouter la couleur de notre icône ici. Que pouvons-nous faire maintenant ? Ce que je voulais faire ici, je voulais ajouter un titre et une description pour cela. Je peux simplement Loren ipsum juste pour quelques textes aléatoires ou vous pouvez également utiliser un plug-in. Ce n'est pas un problème. Je peux donc simplement sélectionner Laura Nixon, ce titre ici. Ensuite, je peux sélectionner un texte ici. Je peux mettre ce texte ici, et ensuite je vais le changer à 14. Et nous y voilà. Nous avons ce 14. Et maintenant, je peux sélectionner 1619. Et nous pouvons l' ajuster de cette façon. Nous pouvons le dire, désolé, nous pouvons mettre notre texte au centre. Nous pouvons placer notre texte au centre. Je peux mettre notre texte au centre. Et puis on peut ajouter un rayon de bordure, cinq pixels ici, un peu de rayon de bordure. Et nous pouvons également le faire de cette façon. C'est donc le rectangle que nous pouvons dire à propos de l'article, de l'article. Et celui-ci va porter sur le texte de l'article. Donc, à propos de l'élément, du texte de l'élément. Et ici, nous devons d' abord changer la couleur de fond. Nous pouvons choisir cette couleur d'arrière-plan et pour le texte, nous pouvons choisir cette couleur de texte. Rapide. Nous avons donc cette couleur. Et ici, nous pouvons mettre une seule icône. Nous pouvons tirer sur une icône ici. Et nous y voilà. Nous pouvons mettre l'icône 21 ici. Encore une fois, nous pouvons prendre la santé de notre, ce plugin d'icônes que nous avons installé est appelé icône de filtre. Et je vais choisir ça. Je vais choisir cette icône ici. Et je vais le faire traîner jusqu'ici. Je vais le mettre ici. Et voilà. Je vais changer la couleur en blanc. Cool. Ça a l'air bien, mais je dois le mettre à l'intérieur du pont. Je vais donc mettre un glisser-déposer sur le bureau. Maintenant, il devrait pouvoir le faire. Maintenant, nous pouvons voir que cette icône est également ici. Que pouvons-nous faire maintenant ? Nous pouvons également renommer le nom de diachronique peut dire à leur sujet flèche vers le bas. Nous avons donc à peu près l'objet que l'atome prend et sur l'objet, celui-ci. Ce sont les trois choses que nous pouvons maintenant faire. Groupe Je vais appuyer sur la commande Z et je vais dire À propos de l'élément. On peut dire à propos de leur carte, cool. Nous avons donc cette carte d'article de l' aéroport, et maintenant nous pouvons l'ajouter à propos de la carte d'article ici. Et nous pouvons ajouter cette carte d'article de résidence ici. Nous allons ajouter plusieurs fois les rejets. Ou on peut faire une chose. Nous n'avons pas besoin d' avoir cette chose. Je pense que nous pouvons me laisser essayer de le dupliquer. À quoi ça ressemble. Maintenant, nous pouvons le dupliquer plusieurs fois. Maintenant, nous avons ce joli design de carte. Mais pour le premier, je veux avoir des choses différentes. Je veux l'ouvrir et je veux montrer notre texte, accord, c'est une option d'appel. Pour ce faire, laissez-moi d' abord le mettre ici. Laissez-moi essayer à quoi ça ressemble. C'est toujours à l'intérieur de celui-ci. Et puis on peut faire un peu plus de jogging ici. D'accord ? Et puis pour cet article seulement, nous pouvons le faire o, nous pouvons le nommer. Nous pouvons en faire un sur l'effondrement de l'article. D'accord, et je vais le rendre un peu plus gros pour cet article. D'accord ? Et puis je vais supprimer cette icône d'ici car nous aurons besoin d'un autre élément ici. Et ensuite, je vais mettre ce texte ici. Ensuite, je vais appuyer sur la commande D et faire glisser un peu vers le bas. Et je vais ajouter un texte différent ici avec d'autres éléments. Nous pouvons donc le faire. Vous pouvez copier et coller un peu plus de texte ici. Normalement, vous voyez ce type de conception dans une section sur l'absorption des appels ou la foire aux questions. Nous avons donc celui-ci maintenant, je vais réduire la taille de la police à la 12e place. Cool. Maintenant, c'est vraiment joli. OK, c'est cool. Une autre chose que nous pouvons faire est ici. Nous pouvons ajouter une autre icône, nous pouvons ajouter une icône différente, qui sera une icône d' application sur la carte objet. Et ici, nous pouvons ajouter, encore une fois, **** Santé technique de notre icône appelée icône du chargeur. À partir de là, nous pouvons simplement prendre cette icône, qui sera l'icône de l'application. Et cette icône que je vais copier. Et puis je vais poster, je vais le mettre ici. Je vais faire la goule blanche de couleur. Et encore une fois, il va à l'extérieur du cadre. Je vais le mettre ici. Nous pouvons donc dire que je peux renommer celui-ci ou vous pouvez dire, j'ai acheté un article effondré, flèche vers le haut. C'est ainsi que nous pouvons vérifier s'ils le doivent, si vous avez deux desserts, d'accord, donc une autre chose est perceptible que ce n' est pas dans la même ligne, donc nous pouvons le faire dans la même ligne. Alors, comment pouvons-nous le faire ? Nous pouvons simplement, maintenant c'est dans la même ligne. D'accord ? Donc, quand un utilisateur clique dessus , lorsque vous double-cliquez dessus, cela va s'ouvrir, puis nous allons également ouvrir celui-ci. C'est ainsi que nous avons conçu cette section À propos de nous. Très bien, et une autre chose que nous pouvons essayer. Dans la partie suivante, nous allons essayer d'ajouter notre, d' accord, afin que nous puissions ajouter une autre chose ici. Donc, s'il est ouvert, nous pouvons simplement marquer cet article également. Ce que je veux dire par là. Normalement, vous remarquerez que si cette carte est ouverte, nous allons également marquer celle-ci. Nous pouvons donc également le faire. Ce n'est pas un gros problème. Je vais essayer d'ajouter celui-ci. Avant cela, permettez-moi de vérifier ce que nous avons utilisé. Nous avons utilisé un rayon cinq plus élevé. OK, c'est cool. Je vais donc tracer une ligne ici, un autre rectangle et le mettre cinq. Et minimisez le, désolé, nous devons avoir celui-ci ici. Et puis nous pouvons simplement marquer cela. Allons-nous utiliser cette couleur ? OK, c'est cool. Nous avons donc celui-là ou nous pouvons simplement utiliser la couleur blanche va également être superbe ici. Mais non, ça ne va pas paraître très bien. Nous devons donc ajuster celle-ci de cette façon également. C'est en quelque sorte et on peut faire de la couleur. Peut-être cette couleur. Non, ça n'a pas l'air bien. Donc, nous pouvons le faire fondamentalement, nous pouvons choisir différentes couleurs. Oui, c'est peut-être bien, mais on peut aussi changer le blanc en sept. Excel. De plus, celui-ci est ouvert et celui-ci est marqué. Mais ce serait bien si nous pouvions choisir une très bonne couleur, couleur claire qui peut facilement être identifiable. Mais je comprends, peut-être que ce bloc va bien paraître. Bon, je vais sauter celui-ci ici. Très bien, nous avons finalement conçu cette section moyenne et elle a l'air vraiment agréable. Voici donc comment nous pouvons concevoir notre section À propos et cette option de réduction ici. Bon, donc je vais arrêter cette vidéo ici et nous continuerons à partir de la prochaine conférence. voit lors de la prochaine conférence. 7. Conception de curseurs de retour: Bienvenue dans cette vidéo. Dans cette partie, nous allons discuter de la section À propos et non pas exactement de la section, car dans notre partie précédente, nous avons conçu notre section À propos de cette partie. Et en gros, je veux ajouter une section de commentaires. Très bien ? Donc, à quoi cela ressemblera, c'est que ce sera une sorte d'options de curseur ou nous allons juste essayer de donner un aspect comme ça. Et ensuite, nous pouvons simplement concevoir celui-ci. D'accord ? Pour cela , permettez-moi d' abord de dessiner cette chose. OK, Cool. Nous devrons augmenter la taille de notre cadre, la hauteur de notre cadre. Alors, sélectionnez le cadre et ensuite nous le pouvons, nous pouvons l'augmenter à partir d'ici. Et puis refroidir. Maintenant, je vais ajouter notre section commentaires. Au milieu, je vais ajouter un commentaire sur le titre. Et après cela, nous aurons cette option ici. Très vite pour ajouter une section de commentaires. abord, je vais ajouter un texte ici. Et je vais ajouter des commentaires. Et vite, permettez-moi de changer la taille de la police en une taille plus grande, peut-être 36. Et nous pouvons le mettre ici exactement. Et laissez-moi voir à quoi ça ressemble. Il va donc bien paraître. Nous avons donc ces commentaires en bas, et ensuite nous avons ces commentaires, ok, cool. Nous avons cela en mer et nous pouvons simplement le dessiner au milieu de celui-ci. D'accord. Et nous pouvons simplement l'ajouter. Vous pouvez prendre un peu de place par le haut. Je peux juste faire un peu d'espace depuis le haut. Et après cela, que pouvons-nous faire ? En gros, nous pouvons à deux articles ici. L'un d'eux sera notre carte. Fondamentalement, nous devrons concevoir une carte sur le dessus de la carte, nous allons montrer la photo de l'élève, puis la photo de l'élève, puis le nom et le message. Sur les deux autres choses que nous voulons montrer si vite, je vais renommer le nom. Vous pouvez dire le titre du sac. OK, c'est cool. Donc ce titre de feedback. Et après cela, je vais concevoir notre rectangle. On peut peut-être commencer à partir d'ici. Nous pouvons commencer, je peux commencer par ici. Je veux donc montrer deux objets. Je vais prendre ce genre de taille, un peu de rayon de bordure, donc vous allez ajouter. Et puis cette option va s'ajouter ici. Je pense que ça va bien paraître. Alors, je vais me laisser voir à quoi ça ressemble. Donc, cette taille. Ensuite, nous allons mettre un bouton ici , puis un autre bouton sur le côté droit. Et ensuite, nous allons devoir choisir ici et en bas, nous ajouterons celui-ci. Ok, donc ça aura l'air bien et nous devrons le faire, je vais dire la partie principale des commentaires. Et je vais concevoir, je vais piocher une autre carte. En haut. Nous pouvons définir r. Nous pouvons définir notre option d'ellipse ici exactement. Celui-là. Nous devons faire la même hauteur et le blanc, un contre deux. Et puis, d'accord, nous aurons donc besoin d'un peu plus d'espace depuis le haut parce que nous avons notre texte ici. Nous pouvons donc simplement le faire glisser et nous pouvons prendre de cette rangée. Et ensuite, nous pourrons le prendre de cette façon, au milieu de celui-ci. D'accord, exactement. C'est le médial. Comment comprenez-vous que c'est le médial ? On y va, vous pouvez voir ce point ici. Et d'accord, c'est cool. Nous allons donc mettre l'image ici et ici nous allons ajouter l'ombre. Si vite, je vais ajouter cet effet. Je vais changer la couleur d'arrière-plan par cette couleur. Et maintenant, ça va ressembler à une carte. Et ne vous inquiétez pas, nous allons mettre celui-ci et nous devrons ajouter un nom ici. Donc, ce que je peux voir, je vais le renommer. Je peux dire « Feedback ». Utilisez notre photo de profil utilisateur MS. Et puis au bas de celui-ci, je vais mettre des étiquettes. Vous pouvez dire John Doe, par exemple, n'importe quel nom que nous avons. Bon, alors, on peut faire une chose. Nous pouvons tout simplement Ok, je pense que ce n'est pas au centre ou au centre, mais nous pouvons le placer au centre de celui-ci. D'accord. Maintenant, c'est au centre. Nous pouvons simplement modifier la conception du formulaire. Nous pouvons ajouter un design différent pour ce nom. Nous pouvons, peut-être que nous pouvons choisir, je ne fais que sélectionner des textes aléatoires. Donc, si vous avez une préférence, si vous souhaitez en utiliser une autre, vous pouvez certainement le faire ici. Cela ne va pas paraître bien. Nous pouvons donc ajouter celui-ci. Non, ça ne va pas ressembler à ça. Nous pouvons donc choisir que je ne vais pas aimer celle-ci. Pas celui-là. Ok, on peut aussi choisir celui-ci. Mais nous sommes Tomas Bolt. Celle-ci est bonne. Nous pouvons choisir celui-ci. Une chose que je peux faire, c' est que nous pouvons faire de ce texte un composant. Ainsi, encore et encore, nous n'avons pas besoin de copier depuis Loren Ipsum. Je vais donc sélectionner ce texte. Je vais cliquer avec le bouton droit de la souris, puis je vais en faire des composants. Vous pouvez donc voir Créer un composant. Que signifie donc ce composant ? Dès que celui-ci est devenu un composant, vous pouvez voir que cette icône a été modifiée et où il s' agit d'un composant, APR, cette société apparaît dans cet annuaire de ressources. Nous avons donc ceci. Maintenant, nous avons cette composante, d'accord, c'est ça. Et maintenant, si nous le voulons, nous pouvons utiliser ce composant autant de fois que vous le souhaitez. Alors, que puis-je faire ? Je peux simplement le faire glisser ici. Et puis je peux, je peux sélectionner celui-ci, et je peux simplement changer la couleur de fond ici aussi. Ok, donc de cette façon, je n'aurai pas à copier et coller encore et encore. Donc vous pouvez, de cette façon, vous pouvez faire n'importe quoi. Vous pouvez créer un composant même si vous le souhaitez, vous pouvez créer un composant de cet élément. Disons que composant oméga, créer un composant. C'est donc devenu une peur ici. Vous pouvez donc maintenant le réutiliser autant de fois que vous le souhaitez. D'accord ? C'est donc la beauté des composants. Vous avez donc appris à utiliser un composant, à créer un composant. Maintenant, si je regarde ici, je peux voir que j' ai ces options. Et ce sont les commentaires des utilisateurs, mais maintenant nous n'avons plus besoin d'avoir cette carte volumineuse. Alors, que pouvons-nous faire ? Je peux renommer celui-ci. Je peux dire que John Doe va l'être, on peut dire Renommer à nouveau, simplement dire feedback, nom d'utilisateur. Donc tout est une rétroaction est sous celui-ci pour qu'on puisse la laisser en faire un groupe. D'accord ? Donc maintenant, il s'agit de la voiture principale de retour de panier. Je vais juste minimiser un peu plus cette carte. Et maintenant, voyons à quoi ça ressemble. On dirait ça. Bon, donc nous voulons mettre nos courriels ici. Alors, que puis-je faire ? Je peux donc simplement télécharger quelques images, même photo de profil, puis je peux simplement la mettre ici. Maintenant, nous pouvons simplement placer nos images sur cette carte. Nous n'avons donc plus d'image jusqu'à présent. Que pouvons-nous faire ? Fondamentalement, nous pouvons simplement cliquer sur cette image de Sean. Et ensuite, je vais simplement sélectionner des e-mails aléatoires ici. Et maintenant, nous avons cette option. Maintenant, si je clique dessus, ça va s'ajouter ici. Et voilà, nous devrions pouvoir voir l'image ici. Le chargement de l'image prend un certain temps . Ou nous pouvons simplement ce qui s'est passé ici. Il est ici. Nous pouvons donc voir cette photo de profil, image de profil ici. Et maintenant, nous avons parfaitement préparé cette carte. D'accord ? Maintenant, ce que nous avons, c'est la première image, et c'est la photo de profil. Nous avons ces commentaires. Nous avons ce commentaire, nom d'utilisateur, carte de commentaires, feedback principal titre de la carte n'est pas sous celui-ci. Ce sont donc les quatre choses dont nous avons besoin pour former des groupes. Je vais donc appuyer sur la commande G et ensuite je peux simplement le renommer et je peux dire des commentaires, une carte méchante. Cool. Maintenant, nous pouvons simplement le faire de cette façon. Maintenant, nous avons cette chose. Je vais le faire dupliquer. Et à partir de là, nous pouvons ajouter celui-ci de cette façon. Nous avons cette carte affichée de cette façon, mais elle n'est pas au milieu. Tellement vite. Que pouvons-nous faire ? Nous avons ces deux charrettes principales. Nous pouvons maintenant en faire un groupe, puis nous pouvons le renommer. Et nous pouvons simplement dire ces commentaires. Tous les objets, vous pouvez donner n'importe quel nom. Et maintenant, nous pouvons le réorganiser. Ok, c'est peut-être le point médian , d' accord, donc on peut voir que cette ligne apparaît au milieu. C'est donc le point médian de celui-ci. Premièrement, et maintenant nous avons cet objet au milieu. Ok, donc nous avons celui-ci, au moins pas au milieu, mais est-ce que nous pouvons simplement être sur celui-ci, nous pouvons simplement le mettre au milieu de ce texte et c'est maintenant mieux. Et maintenant, au milieu de celui-ci, nous voulons ajouter une icône d'outil. D'accord, donc tout va bien et rapidement. Permettez-moi de modifier les e-mails de cet article. Je vais donc sélectionner une autre image que j'ai téléchargée. Et il va s' initialiser rapidement. Et dès qu'il a été initialisé , je peux simplement le remplacer par celui-ci. Encore une fois, vous allez prendre un peu de temps pour l'ajouter. Ce n'est pas un problème. Nous pouvons simplement le faire ici. Bon, donc maintenant nous devons ajouter, nous devons dessiner un cercle ici. Pour nos quatre heures. Cette option. Ou nous pouvons faire une autre modification ici. Je pense que j'ai oublié de l'ajouter. Nous pouvons ajouter une bordure de celle-ci. Ajoutons donc une bordure pour qu'elle soit bien meilleure. Je vais donc ajouter une bordure ici. On peut donc dire que l'AVC va être trois. Et puis, d'accord, donc ce que j'ai fait ici essentiellement, donc je pense que j'ai ajouté cette bordure pour cela, pour ce rectangle. Bon, nous avons ajouté notre rectangle ici par erreur. Je vais donc contrôler Chet. Nous devons le faire exactement avec les e-mails ici, ce MS principal, et ici je peux ajouter cette image. Je vais le mettre en C, puis je vais changer la couleur en blanc. Et nous y voilà. Je pense que le blanc n'est pas réalisable parce que notre fond est blanc. Nous pouvons donc choisir cet arrière-plan. Et puis ça va paraître, d'accord, donc nous avons le même design pour les deux articles. Cool, c'est vraiment joli. Et maintenant, que pouvons-nous faire ? Nous pouvons dessiner un bouton Notre vie pour avancer sur un cycle de vie, le bouton arrière. Et je peux juste le mettre au milieu. Et il semble utiliser la taille parfaite ici. Je vais donc faire en sorte que l' hydrogène les surveille. Il a donc déjà 36 ans sur 36. Et puis je vais rendre la couleur blanche. Et ensuite, je vais ajouter l'effet ici. Et puis je peux mettre cette icône de flèche ici. Nous avons donc notre icône de flèche dans notre plugin peck. Je vais donc ajouter celle-ci s'appelle icône de filtre, puis je vais choisir cette icône ici, apparaît ici. Donc moins que de le faire glisser ici, le mettre ici, puis de le faire glisser ici. Nous avons donc celui-là et celui-ci, tous les deux. Nous pouvons donc simplement faire d'eux un groupe. Vous pouvez dire flèche de rétroaction laissée froide. Maintenant, nous avons cette flèche de rétroaction laissée exactement dans la même taille. Je pense, je pense qu'il est dans la même position parce que, d'accord, laissez-moi y remédier. Est-ce que ce sera des statistiques avec 36. C'est donc maintenant dans le groupe. Alors, que pouvons-nous faire ? Nous pouvons simplement le mesurer de cette façon, donc c'est dans cette taille. Bon, d'accord, pour qu'on puisse faire un double. Je vais donc faire un double. Et ensuite, nous pourrons le mettre de la même façon. D'accord ? Je pense que nous sommes dans la même position maintenant, nous pouvons simplement pivoter au lieu d' utiliser une icône différente. D'accord ? Nous devons donc le faire pivoter de cette façon. Cool. Maintenant, cela ressemble exactement à la même chose, c' est la même image, la même icône que nous utilisons ici. Donc, ça a l'air vraiment joli. Et maintenant, que puis-je faire ? Ou nous pouvons ajouter notre point ci ici, en fait trois ellipses ici. Je vais donc prendre l' aide de cette ellipse, puis je vais dessiner cette ellipse ici. Et que puis-je faire ? Je peux simplement dire dix par dix et essayons. Voyons à quoi ça ressemble. Oui, ça a l'air bien, mais ce sera bien si nous pouvions en ajouter quelques autres, 151515 par 15. Et maintenant, que puis-je faire ? Je peux, d'accord, donc on peut, si vite qu'on peut ajouter une couleur différente. Tout d'abord, nous pouvons ajouter une couleur différente. Et pour la seconde, nous pouvons utiliser, et pour les deux autres couleurs, nous pouvons utiliser dans cette couleur. Bon, donc je vais ajouter celui-ci, puis je vais le dupliquer 234. Voyons à quoi ça ressemble. Nous avons donc couleurs pleines et pour la première, nous allons le changer en, nous allons le rendre actif. Cela signifie que nous pouvons lui donner des couleurs différentes, ce qui signifie que le premier est actif ici. Cool, c'est vraiment joli. Parfait. Nous avons donc ajouté cette section de commentaires et belle apparence. Alors, que pouvons-nous faire ? Nous pouvons donc simplement marquer tous ces éléments, puis nous pouvons simplement en faire un groupe. Ensuite, nous pourrons le renommer. Nous pouvons dire des points de commentaires. Ainsi, chaque fois que vous travaillez pour n'importe quel type de conception, vous suffit de vous assurer que vous faites une rainure afin pouvoir la réutiliser plus tard et de ne rien casser. Et vous ne cassez rien sur la droite. Je vais donc arrêter cette vidéo ici et nous continuerons à la prochaine conférence. voit lors de la prochaine conférence. Au revoir. 8. Section d'abonnement de conception: Bienvenue dans cette conférence. Dans cette partie, nous allons concevoir notre système de newsletter d'abonnement. Jusqu'à présent, nous avons conçu cette partie. J'ai donc vraiment aimé ce design. J'espère que ça vous a plu et que vous apprendrez beaucoup. Maintenant. Il est temps d'ajouter notre système d'abonnement ici. Alors, comment pouvez-vous le faire ? C'est donc un système de tissus mous très basiques que nous allons concevoir. Rien de fantaisiste et ce n'est pas une tâche difficile. Si vite, je vais ajouter notre cadre. Je vais créer un rectangle ici. Je vais ajouter un rectangle juste après celui-ci. Je pense que je vais dessiner un rectangle ici. Et laissez-moi voir à quoi ça ressemble ici. Donc ce rectangle et ici nous pouvons ajouter ou placer notre EMS, ou nous pouvons placer un MAS d'arrière-plan sont alors nous pouvons simplement ajouter notre champ d'entrée et ensuite le bas, nous pouvons ajouter. Et pour ce faire, que pouvons-nous faire ? Fondamentalement, ajoutons notre image d' arrière-plan ou nous pouvons simplement ajouter peut-être de la couleur ici au lieu de l'image d' arrière-plan. Et alors, nous pouvons simplement, que pouvons-nous faire ? Nous pouvons simplement ajouter celui-ci là où il se trouve. Nous pouvons donc simplement modifier un peu les APRN, ou peut-être 10%. Ensuite, ça va nous donner de l'ombre à ce genre d' érudits, mais peut-être 80 %. Et ensuite, nous pouvons essayer d' ajouter à nouveau car ils ont deux autres options. Par exemple, vous pouvez choisir cet écran. Vous pouvez choisir cette lumière et cette couleur. Vous pouvez choisir cette lumière dure et quelques autres options. Mais normalement, elle est transmise. Et puis, ici, on peut simplement sélectionner 20 % qui va nous donner ce genre de choses. OK, c'est cool. Nous avons donc ces options, mais au lieu de celle-ci, nous pouvons sélectionner cette couleur, peut-être une couleur linéaire. Alors, escalade, la couleur ne va pas bien paraître ici. Que puis-je faire ici ? Je suis désolé. J'en ai besoin, nous pouvons simplement ajouter que je peux simplement placer une image de fond ici. Nous pouvons donc simplement placer un arrière-plan humain, peut-être ces sommets. Et ça va arriver, je suis désolé. Je dois donc sélectionner celui-ci ici. Où est ce rectangle ? Huit. Cette aide au rectangle sera donc notre rectangle d'abonnement. Dans le rectangle d'abonnement, nous devrons ajouter notre image d'arrière-plan. Essayons donc celui-ci. Nous ne devrions donc pas le placer au-dessus de ce rectangle. Ok, donc je ne sais pas quoi, ce que nous avons fait ici essentiellement. Permettez-moi donc de supprimer celle-ci parce que nous avons apporté quelques modifications ici. Donc la raison pour laquelle cela crée des problèmes, je vais donc dessiner un rectangle ici. Et c'est notre premier rectangle ici. Je vais maintenant placer l'image. Je vais donc placer l'image, puis je vais placer cette image ici, cool. Donc, c'est vraiment joli. Et puis je vais vous enlever le nom. Nous pouvons dire « abonnement ». Le nom sera donc affiché en indice et sur. Laissez-moi voir à quoi ça ressemble. C'est vraiment joli. Et en plus, nous pouvons en ajouter une, cette option. Un champ de saisie. Nous pouvons dessiner notre champ de saisie à l'aide de notre rectangle. Ajoutons un rayon de bordure, puis peut-être un peu plus, peut-être 20 pixels. Et puis nous avons celui-là. Et puis nous avons celui-ci au centre. Nous avons cela. OK, c'est cool. Et que pouvons-nous faire ? Nous pouvons simplement ajouter celui-ci. Et peut-être pourrons-nous essayer d'ajouter une bordure. Nous pouvons ajouter une bordure qui va être C. Et nous pouvons changer la couleur de la bordure en blanc. Et maintenant, nous n'avons pas besoin de l'avoir. On peut le garder blanc, gris clair. Ou nous pouvons supprimer cette couleur d'arrière-plan. Nous pouvons garder celui-ci ici de cette façon. Et ajoutons d'abord un texte réservé ici. On peut donc dire que l'OMI, en fait, manger ne peut être visible ici que parce que nous avons une image de fond. Il faut donc ajouter, il faut ajouter une couleur de fond ici. Il faut donc ajouter une couleur de fond ici. Je vais donc activer cette couleur d'arrière-plan. Et puis ça, ce DX va se mettre au centre. Maintenant, nous pouvons identifier notre texte, mais que pouvons-nous faire ? Nous pouvons simplement augmenter la taille de notre police pour augmenter le texte , puis nous pouvons simplement réorganiser. C'est peut-être à partir d'ici, par e-mail. Ensuite, nous pourrons peut-être définir notre bouton Envoyer ici. Nous pouvons définir nos différents boutons. Donc, cette couleur est vraiment belle. Je ne veux plus changer cette couleur. Nous pouvons donc ajouter ici un bouton et la hauteur du bouton et ce qui va être pareil. Alors, que puis-je faire ? Je peux simplement dupliquer ce rectangle. Et je vais le mettre au même niveau, la même manière. Mais je vais minimiser. Je vais minimiser le poids de celui-ci. Et puis définitivement, nous devons changer la couleur en une couleur claire, cette couleur. Et ensuite, ça aura fière allure. Nous n'avons donc pas besoin d' avoir cet accident vasculaire cérébral ici. Nous n'avons pas besoin d' avoir cette frontière. La couleur de fond est ce rayon moderne pour celui-ci, cette bordure. Mais à quoi cela sert-il ? Je vais le supprimer appelé entrée du bouton S'abonner . Et ici, nous devrons mettre un texte. Ok, alors permettez-moi d'abord d'en faire un groupe, de m'abonner à l'entrée, remplir et de m'abonner à l'entrée du groupe McDermott, je vais dire souscrire une entrée. Et à partir de là, je vais ajouter nos textes. Vous pouvez dire s'abonner. Je peux mettre cet indice ici. Il s'agit du texte d'abonnement. Nous avons donc ce champ de saisie, puis nous avons ce texte. C'est vraiment joli. Je vais faire d'eux un groupe. Donc, ce bouton S'abonner, je vais en faire un groupe. Je vais le renommer. Je vais dire « bouton S'abonner ». On y va. Nous avons donc le bouton S'abonner et nous avons conçu ces abonnements. Parfaitement. Cool. Donc ça a l'air vraiment sympa, et j'ai vraiment aimé celui-là. Et dans la partie suivante, nous allons concevoir notre section de pied de page. Je vais donc arrêter cette vidéo ici et nous continuerons à partir de la prochaine conférence. voit lors de la prochaine conférence. Au revoir. 9. Conception de section de pied de page: Bienvenue dans cette conférence. Dans cette partie, nous allons commencer à concevoir notre section de pied de page. Nous avons donc fait tellement de choses jusqu'à présent. Mais il est maintenant temps de concevoir notre section de pied de page ici. Donc, pour le faire rapidement, je pense que nous n'avons pas besoin d'avoir cette masse d'espace dans notre pied de page. Nous pouvons donc simplement le minimiser un peu. Je vais sélectionner ce texte, puis je vais le minimiser un peu plus. Et puis, à partir de là, je pense pouvoir ajouter cette option de vente. Je vais donc prendre un rectangle à partir d'ici. Ensuite, je peux concevoir celui-ci ici. Cool. Et puis vite, je vais ajouter cette couleur de fond. Pas exactement cette couleur. Je pense à cette couleur. Laissez-moi voir à quoi ça ressemble. Je voulais utiliser cette couleur. Je pense que nous utilisons cette couleur est toujours, elle est vraiment grande. Nous n'avons pas besoin cette taille plus grande de notre pied de page. Nous pouvons le minimiser. Et puis je peux le goûter. Oui, c'est vrai. D'accord. Maintenant, c'est vraiment beau ou on peut peut-être utiliser une couleur différente. Laissez-moi essayer à quoi cela ressemble si j'utilise une couleur différente au lieu de cette couleur, qu'en est-il de cette couleur légèrement foncée. Je suppose. Ça n'a pas l'air mal. Ça a l'air bien. Je vais garder celui-là. Et maintenant, que puis-je faire ici ? En gros, nous pouvons ajouter deux parties différentes, deux sections différentes pour celle-ci. Je peux peut-être ajouter un titre ici. Et ensuite, nous pouvons simplement ajouter l'option Réduire, noter l'option Réduire ici. Alors, que puis-je faire en premier ? Commencez par Pied de page, Rectangle Pied de page, quel que soit le type que nous écrivons. Ensuite, je vais ajouter un texte ici. Nous allons donc arriver à la section. Nous allons commencer par cette grille. Je vais l'ajouter. Nous pouvons dire des services et le rendre un peu plus grand. Bon, donc au lieu de, on peut dire 24 peut-être, et ensuite on peut ajouter, d'accord, donc 26. Et puis, avant et ensuite, nous pouvons traduire pour ajuster la famille de polices de celle-ci. Nous pouvons choisir exactement cette couleur, celle-ci, je pense. Et, hum, mais en bas, on peut aussi ajouter une longueur inconnue. Alors, comment pouvons-nous concevoir cela souligné ? Je pense que nous pouvons en choisir un autre. Je pense que nous pouvons choisir celle-ci. Et je voulais obtenir quelque chose de vraiment audacieux ou vraiment unique. Et oui, ça a l'air bien, mais je vais devoir en faire une plus grande taille. Ok, alors gardez celui-ci. Alors maintenant, après cela, je vais ajouter notre souligné. Donc, pour dessiner un soulignement, normalement je préfère l'utiliser de cette façon plutôt que d' utiliser l'outil de ligne. Parce que l'outil de ligne est parfois un peu difficile à concevoir. Je vais donc ajouter le rayon de frontière 20, puis la hauteur sera de trois. Ensuite, nous pouvons sélectionner la couleur blanche ou exécuter cette couleur. Et puis je peux, je peux, je peux dessiner ça. Je peux faire glisser cette couleur juste au bas de ce service. Cool, ça a l'air bien. Je peux donc maintenant réduire la hauteur à deux pixels. Il a l'air bien. Maintenant, je peux ajouter quelques éléments ici. Des services que nous pouvons dire. Maintenant, je peux dire à partir d'ici que je peux commencer à écrire. Je peux dire, je peux dire nouvelle maison, mais certainement la taille de police sera très petite ici. Peut-être que 161616 est vraiment petit. Peut-être que 2424 sera bon. Donc, la maison va avoir 24 ans. Maintenant, je vais ajouter à partir d'ici et je vais le dupliquer. Je pense dans cet espace. Ça a l'air bien. Bon, donc je vais dupliquer encore deux fois. Froid. Nous avons donc celui-là. On peut dire une nouvelle maison de nouvelle ère. Propriétés de la propriété. Et je suis en train d'écrire des services aléatoires. Juste pour ajouter ici un texte appelé prêt bancaire de soutien. Vous pouvez ajouter à n'importe quel texte ce que vous voulez tactiquement, cela n'a pas d'importance. Ensuite, le prêt bancaire bancaire, puis nous pouvons ajouter une carte de crédit. Il devrait donc s'agir d'une banque, pas de L, d'un prêt bancaire. Et puis créer une carte de crédit, la faire gagner du capital. Très bien, donc c'est vraiment joli. Que pouvons-nous faire maintenant ? Nous pouvons les faire en groupe. Donc toute cette partie garde de porte, prêt bancaire appelé soutien et le nouveau groupe McDermott. Je vais en faire un groupe. Je vais en faire un groupe. Et puis je vais dire IT. Article de services. Alors je peux le faire. Ok, donc une autre chose que nous devons faire du groupe pour celui-ci et celui-là, désolé, pour en faire un groupe, nous pouvons aussi dire nourriture ou titre. Le titre et ensuite je vais faire un double. Et je peux juste le mettre ici. Et puis je peux le dupliquer également. Et nous y voilà. C'est donc la beauté de cette chose. Et maintenant, au lieu des services, nous pouvons simplement dire produit, services d' incident, nous pouvons dire produit. Et nous y voilà. Nous avons donc ces surfaces, nous avons ces caractéristiques du produit, nous avons cette option également produit, et ensuite nous pouvons changer quelque chose à partir de là, nous pouvons dire nous pourrons dire tout l'immobilier. L'immobilier, puis la partie D, puis s'habille. Et puis on peut dire « centre commercial ». Ensuite, le centre commercial et le haut. Ensuite, nous pourrons ajouter une carte. Et puis on peut dire téléphone et écrire juste un nom aléatoire, un téléphone de jardin. Donc, carte produit et téléphone. Et ici, nous pouvons ajouter une autre chose. Nous pouvons le faire. Que pouvons-nous faire ? Normalement, nous avons ce genre de choses sur la photo, mais nous pouvons ajouter 21 autres textes et une description de plus ici. Nous pouvons donc peut-être modifier du texte ici. Nous pouvons simplement ajouter un texte. Nous pouvons dire un objectif futur. Objectif futur. Ok, donc fondamentalement, au lieu de cela, nous pouvons simplement dupliquer le titre de ce dossier. Ok, donc nous avons ce titre de photo ici, donc nous pouvons simplement faire glisser celui-ci de cette façon. Et ensuite, je peux simplement dire objectif futur ou futur, objectif futur. Et puis à quoi ça ressemble, ça va être superbe, mais on n'a pas besoin de l' avoir, d'accord, c'est très bien. Nous pouvons simplement, pourquoi pouvons-nous simplement dire 80 ou peut-être 100 ? Ensuite, nous pourrons ajouter notre texte ici. Nous pouvons dire que notre objectif futur est que le Congrès soit décrit ici. Et alors, que puis-je faire ? En gros, je peux réduire la taille de la police à 40. Et comme je vous l'ai dit plus tôt que nous avons le nôtre, nous avons créé cet atout ici. Je vais donc faire glisser ça. Texte ici. Et je peux juste le mettre là. Cool. Nous avons donc maintenant ces trois options. Nous pouvons donc simplement le faire ou simplement ajouter quelques autres textes, mais je pense que nous n'avons pas besoin d' ajouter d'autres textes ici. Mais la seule chose que nous pouvons faire ici, nous pouvons certainement ajouter quelques icônes ici. Qu'est-ce que je veux dire par là ? Donc nous avons ceci, nous avons ceci, notre, nous avons notre plugin ici. Icône de filtre donc. Nous pouvons donc simplement dire Facebook. Ensuite, on peut dire Installer, puis on peut dire Twitter, LinkedIn. Bon, donc nous avons cette icône ici. Pour ajouter ces icônes. Que puis-je faire ? Je peux simplement obtenir de l'aide à partir des outils Ellipse, puis je peux dessiner cette icône. Alors, assurez-vous que cela ressemble. Il va donc être très tardif. Ensuite, il devrait commencer par la même taille et ensuite à quoi il ressemble maintenant. Ce n'est donc pas tardide. Ajoutons un 35 par 35. On y va. Donc, au lieu de cela, je vais choisir cette couleur blanche pour qu'elle soit vraiment belle et que nous ayons celle-ci. Que voulez-vous dire par là ? Essayons maintenant d'ajouter ce plugin, cette icône rapidement. Nous avons donc cette icône. Et on peut dire vite, Facebook. Et je vais le mettre ici. Et laissez-moi essayer. Je vais le faire glisser à l'intérieur de la boîte. Je peux donc voir que cette icône Facebook est ici. Maintenant que nous avons notre icône, nous avons notre ellipse. Faisons d'eux un groupe. On peut donc dire icône sociale. Maintenant, dupliquez-le. Donc, Commande D, et je vais le mettre dans cet espace. Avant ça. Laissez-moi voir à quoi ça ressemble. Maintenant, je peux le dupliquer quatre fois de plus, donc nous en avons besoin pour Facebook, Instagram, Twitter et LinkedIn. Maintenant, permettez-moi de supprimer rapidement cette icône. Je vais donc ajouter maintenant une icône Instagram. Donc ce plug-in, ces icônes de remplissage. Je vais donc ajouter Instagram. Je vais donc ajouter Instagram. Son Instagram va donc apparaître ici. Et je vais le mettre ici. Et puis je vais supprimer cette icône rapidement. Ensuite, je vais ajouter Twitter. Je suppose qu'il y en a ici. Je peux donc simplement faire glisser ce Twitter. Et à partir de là, je peux également supprimer celui-ci. Il y a donc un tuteur sur LinkedIn. Et je peux aussi le faire sur Linkedin ici. Ok, donc on peut voir n'importe lequel d'entre eux parce que tout est épi ou en dehors de ce cadre. Donc, ce que je dois faire, j'ai juste besoin de faire glisser tout ce qui se trouve à l'intérieur de ce cadre. Maintenant, nous devrions pouvoir voir notre icône. Cool, c'est vraiment joli. J'ai aimé ça. Très bien, nous avons implémenté avec succès cette section de pied de page, et elle a fière allure. Et dans la partie suivante, nous allons concevoir notre connexion et nous inscrire au rythme. Ensuite, nous devrons ajouter la section prototypage. Je vais donc arrêter cette vidéo ici et nous continuerons avec la prochaine conférence. 10. Créer une page: Bon, bienvenue encore une fois. Dans cette partie, nous commencerons à concevoir notre identifiant qui vous paie une expérience utilisateur. Normalement, nous allons concevoir cette chose. Donc, sur notre page d'inscription, nous allons avoir trois spectacles. Et sur la page de connexion, nous aurons deux options. Donc, avant tout, ce que j'aimerais avoir, j'adorerais le faire. Laissez-moi écrouler celui-là. Nous aurons donc besoin d'un cadre de plus. Permettez-moi de l'essayer, jeter un coup d'œil, sur celui-ci, notre conception principale, s' manque quelque chose ici, tout va bien. Nous n'avons pas besoin de faire quoi que ce soit ici. Tout est superbe. Nous ne voulons rien changer. Parfait. Et maintenant, cliquez sur le cadre. Nous devons en ajouter un autre, appelé Index TO 14 par 14. Et vous y voilà. Ici. D'abord je vais traîner, je vais, je vais dessiner, je vais prendre un rectangle sain. Je vais donc ajouter un rectangle de ce côté. Donc, mais avant cela, laissez-moi essayer. Je pense que nous devons aller un peu de ce côté-ci voir que la moyenne est la pâte. Donc, au lieu de 47 %, faisons 70 % pour que nous ayons un écran plus grand et plus grand. Ou nous pouvons simplement exécuter celui-ci. Donc, je veux juste courir à nouveau simplement. Bon, changeons le nom. On peut dire s'inscrire. Tout cela va être un rythme d'inscription. Je vais donc suivre le rythme des concepteurs afin que nous puissions voir exactement la taille de notre rectangle dans notre pâte d'inscription. Bon, ça prend du temps. Ok, donc on a pris plus de place pour celui-là. Je vais donc, je vais, ce que je vais faire, je vais sélectionner ce rectangle. D'accord, nous allons d'abord cliquer sur le bas. Je vais faire ce truc de cette façon. Nous avons donc plus d' espace sur le côté droit. Maintenant, pour ce rectangle, je vais ajouter à nos MA, accord, donc je vais ajouter une image pour celle-ci. Je peux choisir celui-là. Laissez-moi essayer qui veut bien paraître ? Maintenant, nous avons celui-ci. Je vais appuyer sur celui-là. Ok, ça n'a pas l'air bien. Je vais donc retirer celui-ci. Peut-être l'autre. Nous pouvons choisir celle-ci ou peut-être essayer celle-ci. Que s'est-il passé ici ? Alors pourquoi nous pressons ça ? Ok, donc j'ai enlevé l'immense au lieu d'immense, j'ai tout enlevé, donc je ne devrais pas le faire de cette façon. Laissez-moi remplacer le gâchis. Je vais donc remplacer ça par celui-ci. Donc, ça a l'air joli. Maintenant, je pense que c'est mieux que le précédent, mais cela crée un peu d'ombre. Mais nous pouvons choisir une autre image, qui est le désordre DC. On peut peut-être essayer ce TMS ou l'autre. L'autre est également bon. Peut-être que celle-ci s'insère exactement dans ce petit écran. Oui, ça va convenir. Je vais donc garder celui-là. Et maintenant, je vais prendre l' aide de ce rectangle, accord, il faut d'abord avoir un texte ici. Je vais donc mettre un texte ici. On peut dire « approbation ». On peut dire « signer ». Permettez-moi d'augmenter la taille de police de celle-ci. Nous devrons donc l'ajouter, peut-être 2032, pas là. Et ici, nous pouvons l'ajouter ici. Ok, donc si nous le voulons, nous pouvons aussi changer la couleur de celui-ci, peut-être de cette façon. Maintenant, que pouvons-nous faire ? Nous pouvons simplement ajouter un rectangle ici. Et nous pouvons le changer à 20. Un peu plus. C'est peut-être copieux. Et ensuite, nous pourrons ajouter notre frontière ici. Et nous pouvons changer l' arrière-plan en blanc. Cool, ça a l'air bien. Que puis-je faire maintenant ici ? Nous pouvons simplement ajouter un nom ici qui va être nommé est une sorte de texte réservé. Je vais donc le faire glisser ici. Et pour cet espace réservé, nous n'avons pas besoin de l'ajouter. Il faut peut-être en avoir 16. Et nous y voilà. Nous avons celui-là. Maintenant, je vais leur faire une commande de groupe G. On peut dire que le nom du groupe est, on peut dire nom, entrée, float, entrée, filtre. Et je veux faire quelque chose de plus. Je veux y arriver. faire un composant, car pour la même conception, nous avons besoin de notre phase de connexion afin de pouvoir le réutiliser. Donc, faites-en un excellent composant ou contrôle ultra k, il va faire des composants. L'icône a donc été colorée, icône a été modifiée et dans la ressource, nous pourrons également le voir. Alors maintenant, laissez-moi dupliquer cette nouvelle chose dont nous aurons besoin. Donc, celui-ci est pour nom et celui-ci sera pour notre e-mail que nous allons prendre de quoi ? Utilisateur ? E-mail. Et puis nous allons prendre, pour celui-ci, nous allons dire mot de passe. Ok, donc nous allons prendre le mot de passe et nous pouvons également ajouter une case à cocher ici si nous voulons cocher la case, pourquoi pas ? Pour cela, permettez-moi d'activer rapidement cette grille de mise en page. Cette disposition de grille va donc être de 50. Et nous pouvons ajouter notre case à cocher ici. Je peux donc simplement dessiner la case à cocher juste en dessous. Peut-être que nous pouvons ici. Je peux dessiner une case à cocher ici. Et puis je peux l' associer à la même taille. Je veux dire, au point de départ, on peut le faire correspondre. Maintenant, cela ressemble à ça, mais il devrait avoir la même taille et le même poids. Nous avons donc commencé à 30 ans. Il est de 30 sur 30. On peut peut-être ajouter une bordure. Laissez-moi attacher à quoi ça ressemble. Si j'ajoute une bordure ici et que ça ressemble à D. Nous pourrons peut-être changer la taille de la bordure et changer la couleur en blanc. Et à quoi ça ressemble. On dirait ça. Mais le gris a l'air bien. Et je vais donner un peu de rayon frontalier ici. Cool, c'est joli. Ici. Nous devrons ajouter un texte. Peut-être pourrions-nous simplement dire que nous sommes d'accord avec les termes et services, les conditions générales. Donc, acceptez les termes et conditions. Je vais le mettre par la poste. Et voyons à quoi ça ressemble. Donc, acceptez les termes et conditions. C'est bien que nous l'ayons commencé depuis le point de départ de celui-ci. Et cool. Bon, donc maintenant, nous devons ajouter un bouton supplémentaire. Alors pourquoi ne pas ajouter à partir de notre composant, de notre composant, de notre composant que nous avons créé ? Parce que nous, nous, je veux, parce que je veux avoir la même chose, parce que je veux avoir le même bouton de taille. Donc, au lieu de ce nom. Et d'abord, je pense que je n'ai pas besoin d'être rapide. Permettez-moi de changer l' arrière-plan de celui-ci. Je vais ajouter ce contexte. Je n'ai pas besoin de l'avoir Je n'ai pas besoin d'avoir cette frontière ici, donc je vais enlever la frontière. Je n'ai pas besoin de cette frontière. Laissez-moi voir comment puis-je voir ici ? Il semble que j'ai toujours cette frontière. Je ne sais pas pourquoi. J'ai cette frontière. Il a été supprimé maintenant. Oui. D'accord. Ce coup va donc les supprimer maintenant. D'accord. Je n' ai donc plus de frontière maintenant. Que puis-je faire maintenant ? Je peux peut-être essayer de changer la couleur du bouton, un peu de cette couleur. Oui, on peut essayer. Vous pouvez garder celui-ci et ensuite je vais modifier le texte ici et l'éclairage du milieu, nous pouvons dire, m'inscrire. Cool. Nous allons donc ajouter ces textes d'inscription au centre. Et nous devrons ajouter ce texte un peu plus grand, peut-être 24. Et nous y voilà. Nous pouvons voir la signature dans cet espace. C'est vraiment sympa que nous ayons conçu notre rythme d'inscription. Maintenant, que pouvons-nous faire ici ? Nous pouvons également ajouter quelques éléments supplémentaires, sorte que nous pouvons simplement dupliquer celle-ci et ensuite conserver la même chose pour notre connexion, accord, et nous ferons quelques modifications. Alors, que puis-je faire ? Je vais dupliquer tout ça, je vais dupliquer toute cette image. Commande D. Cool. Ensuite, je vais changer le nom pour me connecter à cette page de connexion. Je vais donc apporter les changements. Donc, au lieu de m'inscrire, je vais me connecter et je n'ai pas besoin de Nim dans ma page de connexion ou je suis désolé. Je n'ai pas besoin d' avoir un nom renseigné. Que puis-je faire maintenant ? Je vais juste le rapprocher un peu plus de celui-ci. Et nous n'avons pas non plus besoin d' avoir cette case à cocher ici. Et au lieu de cela. Je pense que je ne l'ai pas fait. Celui-ci et celui-là juste pour en faire un groupe en pause. Je peux dire que je pourrais le faire dans la page d'inscription, mais j'ai oublié de le faire. Vous pouvez donc le regrouper afin que nous puissions le suivre facilement. Maintenant, connectez-vous. Il ne s'agit donc pas encore d'un groupe. Donc, cette connexion inférieure et cette platine de connexion et ce côté inférieur ne sont pas dégroupés. Maintenant, je pense que c'est le cas. Ok, donc maintenant on peut juste le rapprocher un peu et ça devrait être dans la même ligne. Ensuite, nous pouvons également l' ajuster de cette façon. Bon, voyons ce que nous pouvons voir maintenant ? Cool. Nous devrions pouvoir le voir ici. Mais je ne sais pas exactement ce qui se passe. C'est donc notre collage de connexion et nous avons nos courriels, et celui-ci était notre page d'inscription. Nous avons donc notre connexion paie, notre base d'inscription, et nous avons notre texte. Ce ne sera pas des decks pour moi au lieu d'un bureau, je vais changer le nom pour, on peut dire à la maison. Très bien, je vais donc apporter une petite modification à celle-ci. Cela devrait donc être dans le nœud central en haut, sur celui-ci. D'accord, donc peut-être de cette façon. Laissez-moi exécuter celui-ci et voyons à quoi ça ressemble. Je vais choisir celui-là. Et si nous gérons celui-ci, nous devrions pouvoir le voir. Nous pouvons maintenant évoluer vers rythme différent parce que nous n'avons pas encore le prototypage, mais j'espère que nous pourrons le faire. Donc, dans la partie suivante, ça a l'air bien. Alors connectez-vous. Et une autre chose que j'ai oublié d'ajouter ici, c'est que nous pouvons ajouter un texte ici. Je peux dire que j'ai oublié de l'ajouter. Nous devrions donc avoir un texte ici et ajouter un texte ici. Et nous pouvons dire que vous avez déjà une connexion au compte, connectez-vous ici. Nous pouvons donc simplement commencer par ce côté-ci et je vais le faire dupliquer. Ensuite, je vais passer à la prochaine partie du rythme de connexion , car nous aurons besoin d'un autre texte ici. Nous pouvons dire que je n' ai pas de compte, inscris ici et j'ai juste besoin de modifier le texte. On peut dire que je n'ai pas de compte. Je peux dire que ne venez jamais vous inscrire ici. Très bien, parfait. Je vais donc arrêter cette vidéo ici, et nous continuerons avec la prochaine conférence. voit lors de la prochaine conférence. Au revoir. 11. Prototypage avec une animation: Bienvenue dans cette conférence. Dans cette partie, nous allons commencer à travailler sur notre section prototypes. Jusqu'à présent, nous l'avons conçu. Il y en a trois. Recadrer ou elle paie. L'une est la page d'accueil, donc l'une est notre page d'inscription, puis l'autre est notre connexion par paires. Maintenant, nous pouvons passer de cet endroit à cette connexion ou nous inscrire à coller. Par conséquent, nous devons ajouter notre prototype ici et je vais le faire dans cette partie. Ainsi, pour ajouter un prototype, vous pouvez voir ici, juste à côté ce design, nous avons un onglet appelé prototype. Je vais donc cliquer sur ce prototype. Dès que vous cliquez sur ce prototype, vous aurez maintenant la possibilité d' ajouter un prototype, d'accord ? Ainsi, lorsque l'utilisateur clique sur le rythme de connexion, lorsque l'utilisateur clique sur la page d'inscription, nous voulons l' envoyer au rythme d'inscription. Lorsqu'ils cliquent sur la page de connexion, nous voulons les envoyer à la page de connexion. Ajoutons donc un prototype pour l'inscription si rapidement que vous devez cliquer exactement sur ce texte d'inscription et vous pouvez voir que la coche a été sélectionnée dans le côté gauche également, ne sélectionnez pas tout le groupe, d'accord. Seuls les textes, uniquement le groupe ou le bouton que vous souhaitez le faire pour nous. Ici, nous avons cette signature textuelle. Donc maintenant, si je clique dessus, je pourrai le faire glisser, peut-être ici ou d'autres composants. Donc, si je voulais aller à la pâte d'inscription, je peux simplement le faire. Et dès que je laisserai tomber celui-ci, un petit pop-up va se détacher ici. Et ici, nous pouvons sélectionner notre option prototype. Ok, par exemple, quel type de prototype nous voulons avoir OnClick ou sur la drogue, ou déplacer la souris sur la souris, laisser la souris vers le bas et quelques autres options. Donc, pour nous, nous voulons maintenant décliquer. Cela signifie que l'utilisateur cliquera sur la page d'inscription. Nous allons les envoyer à la pâte d'inscription. Par conséquent, nous devons sélectionner en cliquant. Si vous voulez ajouter un Jagger et faire glisser et déposer, vous devrez faire ce genre de choses, accord, selon vos besoins. Je vais donc cliquer sur le bouton onclick. Et puis ici, nous devons sélectionner naviguer vers elle parce que nous allons naviguer d'une image à une autre. Nous sommes à domicile, mais nous voulons progresser pour nous inscrire au rythme. Par conséquent, nous devons ajouter cette navigation et ils ont deux autres options. Par exemple, ouvrez les superpositions, recouvrez un tampon, fermez ouvertement la superposition et quelques autres options. Donc ouvrir les superpositions de type boîte de modèle. Nous n'allons pas en discuter ici maintenant. Je vais donc cliquer sur ce bouton pour accéder à l'endroit où nous voulons aller. Nous avons déjà sélectionné cette inscription. La raison pour laquelle ils sont signataires sont sélectionnés. Mais ici, vous pouvez aussi le déplacer. Vous pouvez également sélectionner Connexion. Ensuite, il va sélectionner notre page de connexion. Mais nous voulons y retourner, nous voulons passer à la pâte d'inscription. Et maintenant, juste après cela, nous avons nos ennemis et notre section. Donc, quand, alors que notre utilisateur clique sur le rythme d'inscription, si nous voulons afficher n'importe quel type d'animation, nous pouvons le faire en cliquant ici, vous pouvez voir cet instant plutôt que instantané, nous pouvons simplement dire « bouger » entrer, sortir, glisser vers l'intérieur, glisser vers l'extérieur. Je vais donc sélectionner, ou je peux aussi, je vais sélectionner la glissière. Ça va ressembler à ça. Et nous pouvons également sélectionner celle-ci ici de gauche, de bas en haut, de haut en bas. Et qu'en est-il de ces petites animations ? Nous aurons également cette option pour voir cela. Cela va nous donner ce genre d'idée. Et dissoudre, c'est comme ça. Et déménager, c'est comme ça et ça. Bon, donc nous avons ces options ici. Et puis, Push va ressembler à ça. Ok, donc vous pouvez aussi voir à quoi ça va ressembler. Je vais donc utiliser cette diapositive. Et maintenant, je vais voir ce que l'on peut voir ici ? C'est donc notre base et nous avons notre inscription. Et si je clique sur ce signe, nous pourrons voir notre base d'inscription. Cool. C'est vraiment joli. Je viens de remarquer que nous devrions ajouter une autre chose ici. abord, terminons le prototypage de Sean. Ok, donc maintenant nous devons nous assurer que, d'accord, et encore une chose que lorsque l'utilisateur clique sur la connexion, nous devrions les envoyer à la page de connexion. Donc, si je clique dessus, maintenant, nous pouvons les envoyer à notre rythme de connexion , puis décliquer pour coller la connexion. Permettez-moi donc de venir ici de la signature à la connexion, et nous pouvons également l'ajouter ici. Nous allons donc signer la connexion. Et à partir d'ici, au lieu de glisser, je vais dire léger ou peut, nous pouvons donner un glissement ici, aussi la même animation. Essayons maintenant. Nous devons le faire rapidement. Et nous devrons également ajouter le prototypage à partir d'ici. Donc, si vous avez déjà un compte, nous pouvons simplement les envoyer au rythme de la signature. D'accord. Je vais donc m'assurer que vous pouvez voir celui-ci maintenant, je vais cliquer sur la connexion. Nous sommes donc en train de concevoir du collage, nous devons maintenant ajouter du prototypage pour ces deux textes. Si, s'il y a un rythme de connexion, nous les enverrons. D'accord. Ensuite, nous vous les enverrons qui sont dans J'ai déjà un compte. Cela signifie que l'un ou l'autre dispose déjà d'un compte, sorte qu'ils peuvent simplement se connecter. Nous allons donc passer pour accéder à la connexion. Ensuite, nous allons ajouter ce glissement. Et si à partir des paires affectées, si vous n'avez pas de compte, nous pouvons les envoyer pour s'inscrire à la base. Bon, maintenant, nous devrions pouvoir cliquer dessus. Vous n'avez donc pas de compte pour vous inscrire ici. Je vais cliquer. Nous sommes donc au rythme de l'inscription et avons déjà un compte, puis nous connectons ici, puis nous connectons. Alors, que pouvons-nous faire lorsque l'utilisateur clique sur le bouton de connexion ? Nous leur donnerons accès à notre domicile. Bon, alors quand un utilisateur clique sur le bouton Se connecter, nous allons lui donner accès. Nous allons leur donner accès à notre page d'accueil. Nous pouvons donc cliquer sur celui-ci. Et puis on peut dire onclick, puis ne jamais arriver d' ici à la page d'accueil. C'est ainsi que nous pouvons également ajouter notre navigation. Par exemple, vous avez peut-être 50 ou 60 pages. Il sera donc très difficile pour vous de faire glisser celui-ci d'ici à là , vers l'écran souhaité. Ainsi, dans l'interaction, vous pouvez simplement ajouter votre, vous pouvez simplement tout ajouter . Je veux dire, vous êtes une option de prototypage. Vous pouvez simplement sélectionner, cliquer, naviguer jusqu'à l'écran, puis l'instant présent. Donc, pour celui-là, l'animation que je vais faire, je vais sélectionner. Laissez-moi essayer à quoi ça va ressembler. Je vais donc sélectionner Dissoudre. Voyons à quoi ça ressemble. Donc, si je clique sur cette connexion, et voilà. Nous sommes donc maintenant dans ce cool à domicile. C'est vraiment joli. Nous avons donc réussi à ajouter notre prototypage. Maintenant, laissez-moi réessayer. Nous sommes en train de signer le rythme. Je n'ai pas de compte pour vous inscrire ici. Nous sommes sur une page d'inscription et nous avons déjà un compte connecté ici. Puis connectez-vous, déconnectez-vous ici. Vous disposez déjà d'une connexion au compte. Et à partir de là, nous affectons et nous devons ajouter une autre option ici. Donc, si je clique sur le bouton S'inscrire, cela ne fera rien. Donc, ce que je veux avoir lorsque vous double-cliquez sur l'inscription, cela signifie qu'ils l'ont fait avec succès. Ensuite, nous pouvons les envoyer à la connexion paie pour se connecter. Nous pouvons donc ajouter un autre prototypage ici dans notre base d'inscription. Je vais faire glisser celle-ci. Et puis montré indirectement. Donc, la clique, alors cliquez sur puis naviguez jusqu'à et au lieu d'aucune, je vais dire connectez-vous. Et puis, au lieu d'un instant, que puis-je dire ? Je peux dire que je glisse. OK, c'est cool. Donc, si je clique sur ce signe, nous sommes en train de signer. Et si je clique sur la connexion, nous sommes dans notre base d'attache. Nous avons donc ajouté ces clés de section de prototypage. Alors, que reste-t-il d'autre ? Je pense que nous avons fait tout ce que nous voulions avoir dans notre projet. Et j'espère que vous avez beaucoup appris de ce cours parce que nous avons conçu notre web complet. Et ça va beaucoup vous aider. Il va ajouter votre prochaine version disponible dans votre portefeuille. C'est donc notre interface utilisateur de conception complète entièrement fonctionnelle que nous venons de terminer. Et notre prototypage fonctionne également. Et tout fonctionne parfaitement. Pas de problème du tout. Très bien, merci de vous être inscrit à ce cours. Adieu. 12. Exportez votre conception et partagez un lien: Bienvenue encore une fois. Dans cette partie, je vais vous montrer comment exporter et partager notre design. Nous avons terminé notre projet, nous avons tout conçu. Nous avons fait notre prototype. Il est maintenant temps de partager notre conception avec l'équipe ou les gens du monde entier. Ou peut-être travaillez-vous en équipe. Vous devrez donc partager le lien ou partager conception avec l'équipe de développement afin qu'elle puisse créer l'application et écrire sa programmation et ses trucs. Bon, alors maintenant comment cela peut-il faire ? n'y a rien à l' aura est très facile. Je vais maintenant passer à cette partie design. C'est donc notre application et tout fonctionne parfaitement. Rien de trop tôt. Nous avons donc tout fait, puis nous nous sommes connectés, puis tout. Nous avons donc trois cadres, donc nous pouvons maintenant l'exporter par exemple, au début, je vais exporter cette page d'accueil. Alors, comment puis-je le faire ? Sélectionnez donc le cadre, puis en bas, vous aurez l'option Exporter. À partir de là, vous pouvez sélectionner des options d'exportation. Alors quel type de format unique, peut-être PNG JPEG ou SPC. Disons que je veux un JPG. Ensuite, je vais cliquer sur Exporter la maison. Ensuite, il va être téléchargé. Maintenant, si je clique dessus , je pourrai voir le dessin. Ok, c'est le format et je peux simplement zoomer, puis je peux simplement voir tout le design au format JPEG. Vous pouvez également essayer d'autres formats. Et c'est vraiment joli. Ok, donc de cette façon, vous pouvez télécharger chaque image que vous avez conçue. Maintenant, téléchargeons le cadre d'inscription, donc le cadre d'approbation lisse. Et en bas, vous pouvez simplement dire Exporter à nouveau, JPEG, puis exporter, vous inscrire au rythme. Maintenant, si je clique sur la page d'inscription, nous pouvons maintenant voir que notre page d'inscription a été téléchargée. Nous avons téléchargé notre page d'inscription. Cliquez maintenant sur la page de connexion et cela se passe de la même manière. Donc, peu importe le nombre que vous en avez. Vous pouvez simplement sélectionner votre cadre, puis vous pouvez simplement le télécharger. Et vous pouvez également télécharger deux fois, trois fois, quatre fois, peut-être que vous avez besoin de fichier et vous pouvez simplement sélectionner, vous pouvez ajouter plusieurs fois, puis il va télécharger trois fois. J'ai donc besoin d'un seul. Je vais donc sélectionner JPEG, puis exporter la connexion. Laissez-moi le vérifier pour que nous puissions voir notre page de connexion ici. Maintenant, le plus important est que de partager ce fichier avec n'importe qui. Vous pourrez donc voir l' option Share, cliquez dessus. Et puis, ici, vous pouvez voir quelques instructions. Il suffit donc de le lire attentivement. Ici, ils disent que pour ajouter des éditeurs, déplacez rapidement ce fichier des tâches vers un projet. Vous pouvez le faire dans un fichier de projet , puis ajouter un type différent. Vous pouvez donc ajouter l'adresse e-mail des personnes et recevoir ensuite une invitation. Et ici, vous pouvez voir Définir le rôle de celui-ci. Par exemple, vous pouvez simplement leur donner l'autorisation de voir. Vous ne voulez pas leur donner l'autorisation de modifier. Ok, donc maintenant si vous sélectionnez peut le manger et si vous mettez l'Emulab et que si vous envoyez l'invitation, la personne va recevoir l'invitation aura accès à votre, ce cadre pour tous les fichiers de ce projet à modifier et à mettre à jour. D'accord ? Si vous voulez simplement les afficher, vous pouvez simplement cliquer sur peut afficher. Ensuite, vous pouvez également le sélectionner. N'importe qui écoute, seules les personnes invitées à ce fichier et beaucoup d'options de sécurité qu'ils ont. Et, en général, vous pouvez également cliquer sur le lien Copier. Ensuite, pour terminer avec ce lien, vous pouvez partager et n'importe qui peut accéder à ce lien. Par exemple, si je l'ajoute ici, j'aurai une option. Je suis déjà dans ce navigateur. Donc définitivement, ils auront une option, mais ouvrons notre d'oiseaux ouvert dans le navigateur cognitif. Et ici, je vais le coller. Et voyons ce que nous pouvons voir ici. Il va donc charger la pièce. Et j'espère que nous pourrons voir notre projet ici. Et cela prend encore du temps. OK, c'est cool. Voici donc notre dossier complet. Vous pouvez voir qu'il s'agit de notre dossier complet. Nous ne sommes pas enfermés. Figma nous demande ce que nous pouvons toujours accéder à notre conception, accéder à notre fichier, puis nous pouvons le voir, mais nous n'avons aucun accès pour le modifier. Nous pouvons apporter tous les changements ici. Nous pouvons changer n'importe quoi ici. Nous pouvons simplement le voir ici. On peut juste le voir ici. Cool. Et ensuite, je peux le faire. C'est la page d'accueil, c'est le rythme d'inscription, et c'est le signe par paires. D'accord ? Et c'est à ça que ça va ressembler. C'est ainsi que vous pouvez partager votre projet. Vous conceverez avec n'importe qui, vous pourrez télécharger, donner accès à votre projet à n'importe qui. Et c'est ainsi que cela fonctionne principalement. J'espère que vous avez planté et je vous remercie de vous être inscrit à ce cours.