Maîtriser les grilles de mise en page (Figma, Adobe XD et Sketch)

1. 1 - Introduction: Hey, bienvenue dans ce nouveau tutoriel façon dont nous allons parler de Super comment faire vos notes de couche pour le produit numérique. Tu verras un peu la théorie ? À propos de quoi ? Nos colonnes, les gouttières de Rose, tout Martin et nous verrons et les salutations les plus utilisées partout dans le monde qui sont grains d' appoint et huit pixels. Donc, nous allons l'appeler comment les faire. Comment ? Toe Utilisez-les et je vais vous montrer comment utiliser. Je veux dire, figment dans un croquis. Et si vous voulez tout apprendre sur, hum, hum, Layer Greece m'a rejoint. Orteil ce cours. en passant, je vais ux designer 20 ans d'expérience dans toutes sortes de graphiques et centrés sur l'utilisateur. Hum, signe. Alors suivez-moi et allez à ça. Pourquoi maintenant ? On est bien sûr. Alors venez, rejoignez-moi et à plus tard. Sur le reste 2. 2 - Qu'est-ce sont les grilles de mise en page (théorie): Hé, bienvenue dans ces cours. On va tout voir sur Les mises à niveau. Eh bien, ils le sont. Donc, quand tu ne sais rien à propos de la re à te regarder, qu'est-ce que les joueurs sont avec ? Bon, c'est quoi des menteurs ? Super. Eh bien, les salutations sont des instructeurs invisibles qui nous permettent de faire plus équilibrés sur des décisions cohérentes et donc de prendre des décisions moins aveugles tout en prenant n'importe quel produit qui, disons, apporte physique numérique. Donc, ils sont basés sur les affaires de verticalité. Ils sont appelés colonnes sur aucune division ressemblent, que nous les appelons habituellement Rose. Et après que toutes ces rangées aient sur une scène, c'est ce qu'on appelle la ligne de base. Droit ? Nous avons donc, genre, une brève introduction à ce sujet ici. On peut voir des échantillons gourmands pour n'importe quel sens, ce genre de magazine ou de journal pour voir ici ces divisions de soupe, les subdivisions verticales ici. Oui. Donc, dans ce cas particulier, nous avons 123456789 10 11 et 12 colonnes. Très bien, donc c'est la mise en page de 12 colonnes, cupidité pour ce magazine ou journal en particulier. Et ici, nous avons, genre, une publicité Adidas où vous pouvez voir qu'ils ont divisé le pâté en travers en six. Les colonnes. Donc, nous les avons ici et ils ont aussi le par le débat en trois rangées. Désolé, en six rangées. Vous pouvez les voir ici, non ? Donc, même si nous ne pouvons pas le voir ici dans le design qu'ils sont. Ils ont des haricots. Tous les modèles ont été conçus avec une certaine nuance de mise en page derrière. Donc, même si c'est en BC audacieux, vous pouvez avoir un sens hors ordre, une sorte de structure derrière. Donc, ici, vous pouvez l'apprécier à nouveau afin que la position du texte soit si ce n'est pas aléatoire. Disons que tout est ajusté à la grille de mise en page. Dans ce cas, l'opposition des destins ici en ce que dans cette partie de l'appât, droite, par exemple, dans des manifestations physiques, la même chose que vous pouvez voir ici nous avons comme, oui, Comme, tu sais, je ne connais pas leur nom en anglais, mais disons que tu sais, garde-robe ou quelque chose comme ça. Et comme vous pouvez le voir, c'est le signe de la victoire accepté. Donc, ils vous commencez par la forme, puis vous divisez verticalement et horizontalement. Ils vous espacent à moitié bien, donc vous faites une mise en page cohérente sur la même chose s'applique aux sites Web. Comme vous pouvez le voir, voici une mise en page très typique est divisé par 12 colonnes. Et comme vous pouvez le voir, même si c'est ah, c'est un signe précoce de particules ici vous pouvez voir que ce n'est pas le texte, par exemple, n' est pas attaché à la première rangée. Certaines choses commencent dans la première rangée, comme la bruyère sur cette finition ainsi que dans la dernière colonne, et ce texte commence ici. La même chose ici. La même chose s'approvisionne ici. Et comme vous pouvez voir la photo aussi, elle suit cette colonne. Ok, alors voyons quelques concepts. Donc tu as réglé tout ça. La chose importante. Il faut que tu saches. Pourquoi se mettre d'accord sont ces termes colonnes, rose, gouttières et marges. Certaines personnes se sont levées utilement. Ne les utilise pas. OK, toi aussi. La plupart vont le travail des orteils avec des colonnes gouttières sur Martin. Mais c'est un peu important. Nous verrons plus tard pourquoi, mais nous allons voir quelques exemples de ces un peu plus hors théorie. Ok, donc basé sur ces dessins aurait sur leur droite, voyons, avec nous savons déjà ce que sont chez Coram. Donc je ne vais pas trop expliquer ça. Mais les colonnes, comme nous l'avons vu avant, diviser la boussole, l'ARB ou les débats de votre physique a provoqué tout en vertical et hors de la même chose avec voleur semble tout droit. Et comme vous pouvez le voir entre ces colonnes, il y a des espaces, ok ? Et ces entretoises sont ce qu'on appelle des gouttières. D' accord ? Ces gouttières sont l'espacement entre les colonnes. Ok, si vous suivez n'importe quelle sorte, revenons aux orteils. Ouais, est revenu orteil sont fondamentalement si vous suivez n'importe quelle sorte de cupidité ou, vous savez, vous savez, il y a ce chagrin typique à propos d'un pic de ventes, tout. Ce que cela signifie est tous eux toutes les colonnes dans l'espacement sur la Martine sur leur séparé dans sur la séparation entre les Allemands sont multiples de ce nombre huit pixels est le plus couramment utilisé dans le mur dans la conception Web et sur obligation conception. Si vous parlez de magazines ou de journaux de cette taille, c'est différent. Habituellement, c'est d'avoir des photos. Ok, 12 14. Quelque chose autour de ce que certains journaux qui ont des polices de caractères super minuscules qu'ils utilisaient, euh, comme 10 pixels avec ok, mais généralement dans des produits numériques. Ce que vous allez utiliser ce post de film hors mangé quelques personnes. Il devient orteil obtenir des chiffres plus bas afin de gagner un peu plus de polyvalence, comme ils descendent à quatre pixels ou à l'excès, comme Google ou IBM avec leur système Carbone conçu. Ils diminuent parce qu'ils se rendent compte qu'ils ont besoin de plus de souplesse. Et parfois un pixel peut être un peu serré. OK, alors qu'est-ce qui est de retour ? Lignes de base ? Les lignes de base sont principalement des divisions horizontales, et, comme vous pouvez le voir ici, nous avons comme la même est face à ces genre hors Bink cousu et ce blanc . Donc, comme vous pouvez le voir, nous avons comme des colonnes horizontales. Disons ça comme ça. Donc nous avons, comme la largeur de la colonne, qui est de huit semaines L. Et puis nous avons la gouttière horizontale ou un espace entre les colonnes. Dans ce cas, Rose. C' est huit pixels pour donc Chaque pas qu'il est fait de huit semaines est donc je pense que c'est important parce que si vous suivez une façon super stricte de faire super, je suis comme, dans ce cas, ou si vous suivez ces dans ce cas, Il y a un pixel. Super ce que vous obtenez. C' est Ah, super rôti et bon rythme vertical. Donc tous les éléments sont séparés par la même quantité d'un espace, ou c'est une victoire est toujours va être comme un destin multiple, disons huit ou 16 ou 32 ou 24. Et donc si vous rendez ces espaces cohérents, vous allez avoir, comme un bon rythme vertical. Et c'est important aussi, aussi, parce que si plus tard, nous le verrons plus en détail. Mais il est important que si vous êtes vous mettez vos polices de caractères avec certaines tailles et tout, il est super important que quand vous avez dit qu'ils couché la hauteur de l'ordre de votre typographie est avec vos téléphones. Il est important qu'ils soient multiples un orteil du destin, par exemple. Vous êtes assis comme une taille de téléphone de 14 pixels, mais la hauteur couchée devrait être multiple sur huit. Donc pour ce cas, vous voulez aller pour peut-être 16 va être trop serré. Peut-être, mais peut-être que vous voulez passer à 24. Pourquoi c'est ça ? On verra plus tard, mais c'est bon orteil. Obtenez correcte sur une bonne verticale brillante dans vos conceptions. Ok, donc allons avec un concept comme ici. Comme je l'ai dit, les gouttières sont les espaces. Faites vos colonnes. D' accord. Les fournitures appliquées à votre rose sont les espaces entre chaque rangée. Donc, vous avez certains est basing et d'autres aussi bien. Doit être cohérent en deux tailles. Idem avec Et si vous êtes attaqué en remorquage, pixel. Super. Disons des photos. Notre fils. Exemple. Vous pouvez l'utiliser comme 16 pixels pour mobile la science et aller pour 24 32 pour le bureau sur la conception de la tablette . Ok, donc les marges sont les espaces que l'espace qui sont en dehors de nos colonnes. Ok, donc nos colonnes, toutes les colonnes font de notre travail pratique dans un espace à l'extérieur. On ne travaille pas. On ne met aucun élément. Ah, eh bien, ils en ont. Si vous mettez comme une image de héros ou quelque chose, vous pouvez aller pour la voie pour l'échantillon. Mais le reste de votre contenu va être attaché à votre disons, travail, travail, cousu ou à votre zone de sécurité où vous mettez votre test Et cet endroit est ce que vous mettez vos colonnes de sorte à l'extérieur que les colonnes l'espace que vous avez vide C'est ce qu'on appelle les marges. Ok pour plus largement signer. Habituellement, il est entre 16 choix, vend 20. Pick vend quelque chose autour de ça. Ok, quelque chose que quelqu'un va plein avec. Mais la plupart du temps, vous allez vous voir travailler avec 16 pixels. Ils ont 16 ans. 14 dépendants, en fonction de quoi ? Ton genre de pixel lu que tu fais. Peut-être que tu travailles avec un combat, Pixel. Attendez. Alors, tu vas pour cinq. Donc c'est à vous de décider. Mais rappelez-vous, il est important que vous laissiez un peu d'espace à l'extérieur, selon votre conception. Sur ce, c'est le travail Ce que nous appelons des marges. Ok, donc c'est toute la fureur que tu dois connaître Eso maintenant. Allons impactés. Pratiquez quelques mises en page le plus souvent que vous allez découvrir là-bas. Allez, allons voir les gagnants. Écouter 3. 3 - Grille de mise en page Bootstrap: Donc nous allons à ces leçons dans cette leçon. Nous allons orteils appris à faire la cupidité de mise en page bootstrap. Et vous direz Qu'est-ce que bootstrap et pourquoi nous avons besoin d'apprendre le bootstrap. Super. Eh bien, en fait. Vous n'avez pas besoin de le savoir, mais c'est un bon point de départ pour atterrir le vol après. Pourquoi c'est ça ? Bootstrap ? C' est un cadre pour le développement rapide des sites Web dans East Basin Esteem, L. CSS et JavaScript. Et il a tous les composants dont vous pourriez avoir besoin. Nous sommes ici pour venir la documentation des orteils. Vous verrez qu'il a beaucoup de composants comme les fonds et tout. Donc c'est génial parce que, euh, nous pouvons prendre nos décisions. Et les développeurs frontaux peuvent le coder super rapidement parce qu'ils ont déjà les fonds faits et les cartes, les alertes et tout. Et, bien sûr, plus tard, plus tard sur le front, les développeurs peuvent changer à ce sujet. Ces bouteilles orteils notre design, mais ils les ont déjà fait pour qu'ils n'aient pas à écrire toutes ces lunettes, mettre tout en place pour qu'ils n'aient qu'à écraser notre nouveau design esthétique you I . Droit ? Et puis il y a une chose importante ici dans la documentation de bootstrap que c'est tous ces types de points de rupture qu'ils mettent des points de rupture sont quand ? Lorsque la taille de l'écran. Donc, pour les écrans de plus de 1200 pixels, vous allez travailler avec le conteneur. Nous pensons, disons un lieu de travail et sur 1000 140 pixels. D' accord. Et revenons à la maison. Je veux te montrer quelque chose d'intéressant ici. Si nous inspectons la maison hors Bootstrap, vous verrez que post op est évidemment construit sur boost sous bootstrap. Et si si je sélectionne ce conteneur ici, nous pouvons voir ici quelque chose de vraiment cool, nous pouvons voir les marges ici comme nous pouvons le voir en orange, puis près de lui ici sur la droite. Nous avons comme la barre verte, que ce serait notre gouttière extérieure qui booster abus. Mais nous le verrons plus tard. Mais la chose importante ici que je veux que vous voyez est que nous travaillons avec une zone de travail réelle de 100 sur 1110 pixels. Vous pouvez le voir ici que nous avons ici au milieu. On a toutes ces valeurs, OK ? Même s'ils sont filtrés, c'est moi qui le rend plus grand. Vous pouvez voir que ces zones de travail sont toujours les mêmes ici. Nous avons, genre, un bouillonnement à l'extérieur, repoussant 15 pizzas Fit Big Sells pour son côté. Ok, donc maintenant si on va à la pointe Sigma et qu'on va à nos notes, j'ai préparé toutes les salutations viables en ce moment. Booster en place. Une personne stable est 4.5, mais ils sont sur le point de libérer Bootstrap cinq. Puisque c'est le plus commun, nous allons le répliquer. Ok, ce boost emballé pour la mise en page, mais pas les cinq. Je ne fais que vivre ici pour que vous puissiez jeter un coup d'oeil parce que je vais servir ces documents avec vous . Donc, vous pouvez Vous pouvez copier et coller et dupliquer et faire ce que vous voulez avec. D' accord ? Et plus tard, nous allons travailler sur nos huit pixels, amorcer leur documentation, mettre ces points de rupture, conteneurs et toutes ces choses. Ok, Donc voici le disons, les paramètres qui démarrent mis par défaut. Et ce sont les paramètres que nous allons appliquer la mise en page des orteils ici. Ok, alors voyons. De quoi s'agit-il ? Donc, nous avons le coup de pouce de 44 paramètres de mise en page sont 12 colonnes par défaut. Ils l'ont eue. Tu te souviens ? Ils ont obtenu là est l'espace entre les colonnes est de 30 pixels, et il y a une chose articulaire qui a été abandonné. , comme nous l'avons vu ici, est qu'il a Il a une séparation dehors, qui est la moitié, comme vous pouvez le voir, est 15 et 15 avec des sommes 30. Donc, ce qu'il fait, c'est qu'il prend la caniveau et met une fille à l'extérieur sur une fille à l'autre à l'extérieur, loin de la grande. D' accord. Et aussi nous pouvons voir ici. On va les faire. Eh bien, peut-être que nous verrons combien nous en faisons, mais ici nous avons la taille X l. Le point de rupture pour Excel est 1000. Donc nous allons créer ici comme Ann Arbor à partir de cette capacité de viande créée à partir de zéro. Donc pour ça, on va et on va le faire. C' est pour créer sur notre planche hors. Ah, 1200. Mon 7 20 C'est bon. L' important ici est le avec ok. Au large de la tonnelle. Plus en bas. Il est Vous pouvez le préciser plus tard, mais nous sommes plus intéressés par la division verticale ici. Alors faisons un couple avec des angles. Ici. Le 1er 1 change de couleur ici, un discours suisse. On veut le conteneur. Nous allons créer le premier conteneur, qui est 1140. Ok, donc on a ça. Ça et on l'a envoyée. Ensuite, on vous l'a mis ici. Et puis je vais répliquer celui-ci et ce que nous allons faire son repose-orteil 30 pixels . Parce que rappelez-vous que nous avons vu avant est que par défaut, Bootstrap met 15 pixels sur la gauche et 15 pixels sur la droite en dehors des colonnes. Donc nous n'avons pas tous ces 1140 pixels pour que nous puissions travailler. C' est moins de 30 ? Ok, donc ça semble appeler. Donc nous pouvons voir que la différence est ici, et je suis évident au centre. Ok, donc ça va être voyons la couleur. Donc c'est notre conteneur principal sur ce va être juste comme ça. Ok, alors laisse-moi écrire ça un peu. Vite ici. Donc, nous avons notre vraiment ou dans un conteneur mineurs. 15 picks sont à partir de leur gauche de la colonne et moins 50 pixels à partir de la droite. Donc ça nous donne 100 1000 110 grosses cellules. Agir travail sauvage dans l'espace. Bon, donc on l'a presque. Maintenant quoi ? Nous avons besoin de la cupidité du lion du juge Goto et nous avons un mensonge. D' accord. Ici, dans la marque des pieds, vous devez choisir des colonnes et puis ils comptent, comme nous l'avons vu, il a 12 ans dans ces paramètres et ils se réunissent va être 30. Ok, alors laissez-moi les augmenter un peu. D' accord ? Donc, nous avons cette partie. Nous avons nos réglages. Est 12 colonnes et 30 mais il a dit à un tronçon, je veux dire, si je fais ces cadres plus grands, tout va aux pieds. Comme vous pouvez le voir, les colonnes un étirement cela va c'est bon orteil le signe. Ah, 100% comme plein avec les signes ou signes plus réactifs. Mais généralement ce que vous aurez besoin ou ce que vous vous trouvez en utilisant Plus que sa menace. Si vous voulez suivre ces bootstrap. Super. Est-ce que vous mettez cela au centre, et maintenant vous devez entrer une semaine pour la colonne. Ok, alors augmentons ça jusqu'à ce qu'on atteigne notre point. Et maintenant, si nous supposons dire, nous voyons que notre cupidité de couche est parfaitement en ligne OK à notre espace de travail. Donc nous avons déjà notre première avidité mensongère. D' accord. Pour le bootstrap, cela pourrait être la taille d'expiration pour Busta. Répliquons. Oui, d'autant plus que, euh, le coup de boost mobile a conçu les paramètres de configuration. Ok, je l'ai déjà là. Ok, donc je vais contre d'aller répliquer ceci et juste comme ça, supprimer tous les éléments. Eh bien, dans ce cas particulier et je vais juste partir, je vais juste me débarrasser de ça et ici. Oui, nous l'avons fait. Comme je l'ai, j'ai choisi un 3 60 pixels avec un appareil Android type, mais vous pouvez choisir ce que vous voulez. Rappelez-vous juste que la largeur de la colonne n'est pas si importante en termes de off. Ajuster un orteil comme sur un chagrin pixel. Parce que quelque chose à cause des signes sont sensibles. Donc, vous ne pouvez pas contrôler le avec hors de la colonne autant. Mais c'est important plus que l'espace vertical. On va le voir maintenant. Alors imaginez qu'on veut avoir, comme 15 ans. Imaginez que nous ayons une marge ici, comme 15 cellules de cochon à gauche et 15 photos à droite, comme nous l'avons dit avant. une marge ici, comme 15 cellules de cochon à gauche et 15 photos à droite, comme nous l' Et c'est une bonne pratique dans les appareils mobiles, donc nous avons, genre, 330 boîtes avec ici pour notre conteneur. Alors allons-y et mentions-nous d'accord. Cela dit, nos colonnes et ce que nous allons faire ici. On dit qu'ils comptent jusqu'à trois. Ici, c'est plus gratuit. Je veux dire, vous pouvez juste mettre 635 ce que vous voulez et la marge pour être cohérent avec la mise en page de Muestra, et ça va aller avec trois et l'autre. Souviens-toi, il était 30. D' accord ? Et le marketing. Ici, il est 15. C' est sur sa taille. Ok, Parfois, dans la conception mobile, je recommande de changer les orteils pour faire un point de rupture beaucoup d'équité. Donc, vous changez ici les valeurs et peut-être chèvre avec 24 ou même moins peut-être 15 ou 16 selon votre propre côté Georgie. Allons pouvoir Strapped pour ici dans la conception mobile est un peu plus, um, um, plus détendu pour ces booster particulier pour ce que je recommande est dit qu'ils ont obtenu leur à 15 aussi bien. Ok, 15 ou 20 multiples de cinq. Boost pour est plus basé sur des multiples de cinq. Donc parce que comme vous pouvez le voir, si nous jetons ici comme un rectangle, nous pouvons voir que ces colonnes ont 65 la séparation est 30. Donc tout est multiple de cinq. Ok, donc je te recommande de faire ça. Et voyons ici. Qu' est-ce que tu as ? C' est une colonne de 97 ah. Mais si vous voulez être plus précis, vous pouvez changer ces orteils, vous continuez la gouttière et faites ces, je ne sais pas, peut-être 95. Ou, vous savez, pour que vous puissiez jouer avec ces invités. Tu as ça et ce que tu fais, c'est que tu viens ici et que tu essayes la justice des orteils qu'on a là. Oui. Donc, si vous mettez comme un rassemblement de 22 ce que vous obtenez, c'est une colonne de 95 et c'est à vous de décider dans ce cas particulier. Mais j'ai mis ici les valeurs par défaut. OK, pour moi, 30 pixels dans la séparation mobile, c'est trop, mais c'est ce que dit Bootstrap. Ok, donc nous avons terminé notre première mise en page pour leur arrêt et pour mobile. Mais formez un moment. On va faire quelque chose avec ça. Rose est là, ce qui l'est ? Je ne vais pas le faire avec Bootstrap. Nous allons voir comment comment Rose et le rythme vertical avec notre personnaliser un pixel avec dans la prochaine leçon. Ok, donc vous avez ces fichiers pour pouvoir regarder autour et copier toutes ces salutations. Ils sont déjà là. Nous avons basé le style. Donc tu peux oui. Copier. Collez-les, faites ce que vous voulez avec eux. Ok, donc le syndicat est moins actif. Et parlons des huit semaines convenues. 4. 4 - expliqué 4 de la grille 8px (et les paramètres de Figma): Hé, bienvenue à cette leçon. Écoute, on va parler d'un gros accord de vente et comment je le fais. Donc sans délai, je vais juste mettre orteil ici, comme par défaut. Michael Bro assis avec ce 1140 par lui. Je n'aime pas cette séance. Je préfère oui, prendre mes 100. C' est plus paysage, d'accord. Quoi qu'il en soit, l'important ici, c'est qu'avec Donc tu travailles pour les grands écrans, tu pourrais devenir gros. Vous pourriez aller plus grand, comme, je ne sais pas, 100 1920 par vous savez, les valeurs par défaut. Mais je préfère généralement travailler orteil un plus petit comme quelque chose autour de cela Ce sont mes valeurs par défaut pour le réglage. Il y a des sangliers. Ok, alors allons-y. Et un Grec ici. Eh bien, c'est plus d'accord ? Nous sommes des colonnes. Bon, donc pour le compte, la valeur par défaut, rappelez-vous, est 12 pour cet arrêt. Et ce que nous voulons ici, c'est juste de centrer nos 12 colonnes ici et le rassemblement. Puisque nous travaillons avec un deuil de huit pixels, nous devons prendre une décision si nous le voulons sur 24 ou 32. Ok, Laissons-le maintenant avec 24 dans le compte , sur les colonnes à 12 et nous voulons contrôler le avec. Vous pourriez penser que vous voulez faire le deuil super parfait avec un grand dit Tout est multiple un fondu même les colonnes avec son multiple off huit Donc, nous pourrions commencer avec 80 avec est la valeur la plus surutilisée pour commencer. Droit. Et ça a l'air plutôt bien. On peut voir que l'autre est 24 avec ce 80. Donc, nous sommes à l'arrière dans notre lieu de travail. Ce n'est pas des bootstraps, donc on n'a pas besoin de faire des sommes, euh, Repose mes nouvelles. Peu importe. Donc ce serait notre boussole de travail, OK ? Oui. Laisse-moi juste, euh, valeur de Co Pd ici. Donc ça va être notre conteneur principal. Si nous aimons cela avec du conteneur, nous sommes bons à travailler. C' est comme ça que tu fais sortir une dame. Tu n'as pas besoin d'orteils. Soulignez-le plus. Ok, donc votre centre, vos valeurs d'entrée de mensonge, qui sont des multiples sur huit. Donc nous l'avons. Ok, donc les colonnes sont 80. Comme vous pouvez le voir, toutes les colonnes sont 80 sur l'espace entre elles est de 24. Ok, et maintenant sortons de nos routes. Ok, donc on presse ici dans la figue MMA vers un autre genre de grand dans la rose. Dans ce cas particulier, nous ne voulons pas 12 parce que 12 avec nous ne ferait qu'avoir, euh, Rose. Et nous verrons que nous étions plus à nouveau au lieu d'un tronçon. Dans ce cas, nous voulons l'alliance des orteils. Nos séparations ont augmenté sur le dessus. Ok, et pour ce cas particulier, ce que nous avons, ce que nous voulons c'est l'espace entre les colonnes avec nous les voulons sur huit grandes ventes hauteur. Nous voulons nous réunir pour être aussi, huit. Alors maintenant, nous avons notre colonne. Huit semaines, c'est notre rassemblement. Huit semaines, donc nous avons toutes ces séparations sont huit semaines de séparations dans le compte . Ce que je fais d'habitude. Il en a mis un grand nombre ici, comme 800. Pourquoi c'est ça ? Parce que vous habituellement votre lorsque vous concevez, vous concevez généralement des choses plus grandes que cela. Donc, quand vous faites ces, quand vous êtes notre conseil et que vous faites la page de destination, par exemple, ou votre portefeuille ou la conception d'un bloc ou Quoi que vous concevez, vous êtes probablement sûr besoin de beaucoup de cachette pendant des jours . Droit ? Donc si tu as de la chance si tu grandisses ici, tu dis que je ne sais pas, 200. Désolé, genre, 50. Que se passe-t-il ? C' est Ah, quand tu es en taille, tu dois revenir ici. Rappelez-vous que nous avons 900 ici. Oui, tu n'as pas la Rose nécessaire ici. Donc, puisque nous voulons avoir beaucoup de rose ici, vous pouvez aller avec 1000 et tout va bien. Donc tu as toujours de la place et ça a assez augmenté pour ça. Ok, donc c'est nos 8 premières semaines de parfait. Excellent pour ça. Faisons pour quatre formes. Ok, donc nous allons enlever cette semaine que nous avons créé avant et nous allons nous débarrasser de ça parce que nous voulons créer leur Ce sera là, un gros formulaire de vente un moment et ce que nous voulons ici, c'est faire la même chose. On a bien entendu ou tout ce qui est dans les multiples du destin qui est sorti. Colonnes convenues dans ce cas, nous allons aller avec la couleur. Encore un compte de trois. Centrer les. D' accord. Eh bien, dans ce cas particulier, ce que vous pouvez faire est de le mettre dans un tronçon dans la marge pour qu'on puisse contrôler. Il y a 16 cellules de pointe dans la gouttière. Vous pouvez jouer avec 6 16 aussi. Pour 24. J' irais avec ce truc pour ça. Et puis nous avons notre Nous avons nos huit pixels avec ce qui se passe ici que, hum , vous savez, vous pouvez concevoir pour Android plus de femmes comme celles-ci pour 3 360 ou vous pouvez concevoir pour Prenons d'autres valeurs ici comme je ne connais pas iPhone huit plus ici et faire une sorte de la même configuration. Faisons-le ici trop grand. C' est fini, comme convenu et ensuite nos colonnes. Disons trois colonnes. C' est un six, et puis notre marketing sera 16 sur notre marché. Il va y avoir 24 OK, ou le ramener à 16 à nouveau. Alors voyons comment va la colonne avec. Donc c'est 50. Comme vous pouvez le voir, ce n'est pas possible. Ou allons-y avec trois pour que nous puissions faire comme un même design. Ici. Vous pouvez voir que ce n'est même pas son 117 donc ils l'appellent la colonne avec n'est pas si important pour vraiment le lendemain. Grille de pixels, ils pizza avidité. Il s'agit plus des gouttières, l'espace des gouttières et de la façon dont vous mettez en place votre rose. Donc, dans ce cas, nous avons fait veste parfaite huit choix, un grand, et c'est parfaitement bien. Il fonctionne dans les téléphones mobiles ne sera pas si possible d'avoir les colonnes que vous voulez, est-ce pas ? Et c' est pour ça qu'on en a parlé. Par exemple, iPhone 11 Pro X. C'est 375 avec Donc nous ne pouvons pas diviser par huit va nous donner les Simoes et va nous faire différents types de colonnes. Donc, mais ce qu'on peut contrôler et c'est ce que je veux dire. Beaucoup de fois, même si je suis un peu jumelles à ce sujet, c'est quand on crée. C' est la chose importante pour créer la rose afin que vous puissiez mettre ici à nouveau. La chose importante ici n'est pas le compte. Nous l'avons mis dans le haut, l'épaisseur que nous allons l'augmenter à 500 est bonne. Et rappelez-vous que la hauteur ici va être de huit pixels et le rassemblement va à nouveau être huit semaines est donc maintenant nous avons, genre, une cupidité parfaite. Même si nos colonnes ne sont pas une image, la colonne n'est pas importante. important, c'est qu'ils ont les leurs et que ces roses espacent. Voyons un exemple Imaginez que je veux dire de définir une photo ici. Et l'important est que cette photo en hauteur va être multiple sur huit avec ça ,ce , qui est bon. Mais l'important aussi, c'est quand nous mettons en place un texte. Ah, mais la chose importante ici à la place , dans ce genre de valeurs, je ne sais pas ce qu'elles sont, ce qu'on peut faire. Il a dit des multiples sur huit dans ce cas, comme 32. Et que se passe-t-il ? C' est ça. Laisse-moi deviner la justice. Si j'avais les Estes, vous pouvez voir que ça va s'aligner. Il commence ici, et cette ligne commence là. Ok, mais le plus important, c'est que maintenant tu peux voir mon texte reposer ici. Ok, tu peux le voir, non ? Alors maintenant la séparation Eh bien, voyons qu'ils sont donc maintenant la séparation entre ces éléments sur ce est 16 et imaginez. Je veux orteil off comme un texte Ici, laissez-moi de ma merveille Loose Lord et bientôt générateur. Donc nous allons apporter ces 2 14 et ça va être, genre, genre, 24 notre pour notre copie. Allons avec notre Seigneur et Epsom générateur. Donc, nous allons dans un rayon fixé. D' accord ? Parfois, vous pouvez lutter pour positionner les choses, mais avec ça, vous ne mettez pas vos éléments ici, ok ? Et dans cet élément ici, si vous voulez être super puriste, ce que vous pouvez faire et ce qui est une bonne pratique est de configurer ce texte dans la ligne de base est ce qu' on appelle la ligne de base. C' est là où la sortie, vous pouvez le voir ici. Vous pouvez sentir bien que c'est le Texas assis dans chaque ligne, chaque espace de visite, il est en train de manger, OK. Et c'est bien parce que nous pouvons mettre, par exemple, nous pouvons dire, Ok, nous partons comme, Eh bien, nous vous aimons ça ? Nous pouvons dire entre le texte et le titre va être 24 pixels avec ses gens de foi été entre ceci et ceci est 16. Ou peut-être que nous pouvons dire que nous voulons dire maintenant je juste ce que je veux tout le destiné au grand avec le même est de baser. Donc, vous avez 20 pixels ici vous avez 26. Désolé. 16 picks sont sur la gauche. 16 pièces à droite et 24 nous choisissent ici et tout. C' est Justin ? Parfaitement bien. Et ça devrait être une plaisanterie, en fait. Si vous le savez, outils de prototypage ne nourrissent généralement pas parfaitement leur réalité. Ou ce que vous verrez plus tard, ils signent, OK, parce que ça devrait rester là et c'est oui, le pixel que ça me rend fou, mais c'est un allié parfait là-dedans, OK, mais il va dépendre de votre sur votre sur vos téléphones. Mais ce qui est important ici, c'est cette valeur, d'accord ? Parce que je peux changer la taille et comme vous le pouvez. Et comme vous pouvez le voir, cela va continuer à être sur le sur le sur le chagrin parce que nombre important est un 30 à la vie huit. Alors que la chose humaine que ce comme la haine comme dans les multiples du destin, vous êtes bon d'aller. Donc, c'est à peu près un pixel grand et comment il aide à concevoir des choses. Et laissez-moi demander, Laissez-moi juste faire un design rapide ici pour que nous puissions voir comment nous voyons est vers avec des paillettes orteils faire le système. Alors imaginez. Nous avons ici, comme trois éléments. Donc, il suffit de le diviser ici pour prendre quatre colonnes et juste là. Et si vous voyez les éléments ici et là sur la ligne de base, tout va être organique et hop a le même espace, et vous pouvez jouer avec vos salutations plus si vous voulez. Comme on le sait, ce genre au large de la place de Montréal, le signe qu'il est fait de cubes. Mais c'est là qu'il s'agit. C' est cohérent, c'est vif. Vous n'avez pas à prendre des décisions Si vous essayez de concevoir aveuglément, imaginez votre contribution et d'accord sur elle. Laisse-moi juste me débarrasser de ça. Comment je sais qu'on va procéder. Certaines choses que je pourrais mettre ces là et mettre cela là et est là et mettre ce texte ici et essayer d'aligner besoin par moi ou avec des outils. Mais ce genre de hasard, vous savez, et orteil donner cohérence à l'approche. Ce dont vous avez besoin, c'est de faire tout cet ajustement. OK, donc c' est à peu près la prise de l'image. Rappelez-vous que Vous pouvez modifier les valeurs qui vous sont demandées. S' il vous plaît ici. Imaginez que vous voulez travailler avec elle puis choisit convenu Cette valeur serait bien. Peut-être que tu peux ici. Ou cinq pixels rip. Alors tu es bon ici. Orteil. Euh, vous pouvez y aller avec 30. Tu y es arrivé. Mettez le avec multiple de cinq ou huit ou 10. Quel que soit le salut que tu décides d'aller, c'est bien. C' est bon pour toi. D' accord, mais n'oubliez pas de garder la hauteur de la ligne. Toujours cohérent. Voyons donc comment répliquer cela. Un pixel. Les grands en évasion, Andi en x'd adulte. Si vous n'êtes pas intéressé par cela dans le logiciel, vous pouvez simplement l'ignorer et aller à la fin de la classe. Ok, Eso à la prochaine leçon. 5. 5 - 5 de 8px dans l'ébauche: Hé, bienvenue dans ces bénédictions. Nous allons voir comment faire les huit semaines convenues et échappées à quelques colonnes sur la drogue. Ok, donc pour ça, nous allons juste insérer un r 4. Ou vous pouvez appuyer sur un puis sélectionner ici à Tech Stop HD notre guerre, et ici imbues Nous allons montrer mise en page. Donc nous avons, genre, quatre colonnes ici. Et voyons comment cela est configuré par défaut avec elle qui sont avec off dans les 160 pixels . Rappelez-vous que nous voulons bien sûr avec des colonnes que nous ne voulons pas obtenir autour de l'extérieur. C' est bon si vous faites de la couche de bootstrap une grande qualité. Mais dans ce cas, nous faisons juste sur huit parce que son grand simple Donc nous n'avons pas besoin de rassemble sur l'ancien plateau. Vous pouvez voir qu'il bouge. On veut qu'ils le fassent avec 24 heures. Et nous aimerions avoir, genre, 8 80 pixels pour la colonne avec ce qui s'est passé ici dans un croquis. Lorsque vous mettez ces valeurs ici, il y a le total avec ici. Donc c'est un peu délicat parce que vous avez orteil ou orteil augmenter le par je sens que vous obtenez les valeurs que vous voulez ou vous devez faire. Je ne sais pas, leur multiplication est dehors. Ok, donc vous devez d'abord connaître le total avec vous allez obtenir donc ce n'est pas si facile de faire accepter votre couche ici. Eso pour la mort. Ce que je vais faire, c'est qu'il copie cette valeur que nous avons en pieds avant qu'il soit 1200 2024 . Donc je vais juste copier ça ici et maintenant. Centre-jours. Et maintenant nous avons ces paramètres, non ? Tout ce qu'on veut 24 picks, c'est pour la gouttière. Non. Rassemblez dès le départ vers les colonnes et appelez avec 80 pixels désactivés. Centre de presse ici. Donc votre disposition, cupidité et votre conteneur sont au centre et nous l'avons. Ok, maintenant on a une demi-heure de notre conteneur. Quel instructeur ? Nous pouvons voir ici la valeur. D' accord. Et on nous veut. Revenons à nos réglages de menteurs. Nous voulons aussi qu'il y ait Rose installé dans huit grandes cellules. Nous voulons donc la hauteur du rôle, la distance multipliée par la hauteur de la gouttière. Donc, dans un cas particulier, nous voulons qu'il y ait plus à jouer par un. Donc c'est la même chose chez nous. Huit pièces. Ok, pour que tu puisses dessiner les lignes des Ori, mais je le trouve trop. Donc, avec ce réglage, je me sens assez confiant, ok ? Et nous allons y aller. Je veux dire, maintenant, tout ce que nous positionnons ici va être multiple sur huit. Et nous sommes prêts à y aller. Donc c'est notre installation. Et dans le cas où les kits de bureau est bon parce qu'il crée toute la rose nécessaire. Donc, vous ne serez jamais à court de Rose Light peut arriver dans la figure. Ok, alors nous allons insérer un autre sont pour quatre ou plus tandis que l'appareil. Dans ce cas, nous pouvons aller avec ces mobiles, le 320 baht avant de juste mettre en place l'androïde. Alors allons-y avec l'androïde. Comme nous l'avons vu dans l'autre leçon, ça n'a pas vraiment d'importance. Euh, quel type ? Assez d'appareil, vous aussi. Parce que la chose importante n'est pas la colonne de l'avec important. L' important est les gouttières sur la séparation. Ok, donc pour ces ce qu'on veut, c'est le soutien que nous sommes arrivés là, te souviens ? Vous avez une autre fois ? Nous sommes allés pour 16 choisir vend le nombre de colonnes dans ce cas particulier va être trois. Commençons à voir ce qu'il fait. A Donc, vous pouvez voir le poids total est trop. Donc ce que nous voulons ici, c'est rappeler, c' est, euh, c'est 36 60 moins 32 parce que nous voulons, genre, 16 pièces à gauche et 16 pixels à droite pour que nous puissions le faire comme ça. Donc ça nous a donné 328 plutôt cool. Et maintenant, ils ont leur herbe. On peut juste y aller avec 16 et ensuite les encourager et la venue avec ça va nous donner 93 non ? Donc, oui, c' est à peu près hors. Nos sont mis en place, mais quelque chose quelque chose. Nous avons ces rassemblés à nouveau à l'extérieur. On n'en veut pas. Je me demandais pourquoi tant d'espace ici, mais ouais, tu dois enlever la gouttière au départ. Nous ne le voulons pas sauf si nous faisons ce genre de conception bootstrap. D' accord. Et pour la route, même chose. Oui, ils sont arrivés là. Kate va avoir huit ans. Et la hauteur du rôle, rappelez-vous en multiplie par l'autre haine. Donc, dans ce cas particulier, nous voulions par un Donc nous avons, genre, huit correctifs cohérents, rassemblés et levés ici. Et pourtant, nous sommes prêts à y aller. Donc, si nous buissons et maintenant éléments ici et désolé, parce que pour cela je ne veux pas 24. Je veux 16 à l'intérieur. Tu as bien compris. Donc, ici, nous avons nos colonnes et nous pouvons commencer à décider. Tu te souviens ? Encore une fois, comme nous l'avons vu dans le passé. Écoute, que la chose importante ici c'est de travailler avec la position, tous les éléments séparés par la même quantité d'espace. Habituellement, vous voulez orteil la plupart des fois que vous voulez le séparer. La même chose avec cette distance va être la même que la gouttière. Et d'autres fois. Peut-être que vous voulez le séparer plus. Mais gardez votre espace est cohérent. D' accord ? Si vous vous séparez ici comme 56 grandes cellules ici, c'est une bonne pratique de le séparer aussi. En 56 pixels ou tout ce dont vous avez besoin, rappelez-vous aussi la hauteur couchée ou droite. Donc ici dans le croquis, même chose, , vous avez les orteils mis ici dans la ligne dans la section Heights et le destin multiple. Ok, donc pour ce particulier, je ne sais pas. Vous pouvez aller avec 72 et si nous le voyons ici, vous pouvez voir qu'il touche presque la ligne de base. Ce serait comme si un pixel se produisait. La même chose que la stigmatisation. Pensée comme vous pouvez le voir, va être orteil être tout assis sur la base et va vous donner plus cohérente science. Alors allons pour Dennis Lesson, où nous allons voir comment créer une grande cupidité de vente chez les adultes X'd. 6. 6 - 8px dans Adobe XD: Hé, bienvenue dans l'utérus. Notre dernière leçon ici, nous allons voir comment créer une lecture de pixel au de l'OPEP pour ces particules sont un. Je vais juste appuyer ici, et comme vous pouvez le voir, nous avons tout le off par mauvais modèles par défaut pour ceux-ci et allons choisir à nouveau. André More Wild One et nous. Eh bien, prenons Allons-y et ce sac à main à nouveau dans Select a whip, hum, par défaut. Autre X'd fait comme une sorte de taille différente pour l'arriver pour ce sont des sangliers restés hors 1000 440. Ils vont avec ça. M. Ça n'a pas vraiment d'importance. Vous avez contesté ici. Si vous voulez ou laissez ceux-ci par défaut, c'est OK. Une chose importante. C' est notre C'est notre grand Donc, pour voir le grand, vous allez juste voir le panneau et vous pouvez simplement appuyer ici surligneur avidité ou si elle est éteinte, vous pouvez venir ici pour être vous et donc laisser sortir vert aussi bien. Lorsque vous sélectionnez le cadre, vous pouvez appuyer ici sur la cupidité et deux vont juste faire apparaître cela. Ok, donc commençons sans qu'ils arrêtent le panneau donc pour cette affaire. Je veux juste avoir quelques valeurs précédentes est assez facile à faire. Ici, dans Adobe 60 est morceau de gâteau, Je dois dire le rassemblé avec nous avons été en utilisant 24 pixels pour notre séparation entre les colonnes et la colonne avec nous avons utilisé 80. Ok, c'est un comportement bizarre pour moi, je dois dire, parce que si j'essaie de mettre ces valeurs, ça joue toujours avec le caniveau et le conduit. Donc, vous avez le calcul de remorquage ainsi. Combien ? Combien de Martine veux-tu ici  ? Donc pour moi, c'est un peu ennuyeux si je veux mettre mes valeurs mêmes comme 24 ici je veux mettre 80. Il devrait, vous savez, respecter mes décisions. Mais c'est comme la chose importante ici. Ça me rend un peu nerveux. Donc pour ces ce que je dois faire, c'est calculer Apportez la calculatrice. Donc nous avons nos ceux-là. C' est le nombre que nous voulons être. Nos Toby sont super assis notre ou notre conteneur. Donc, nous l'avons basé ici et ce que nous faisons, c'est ah, juste faire ça reposer et sur. Ça va être la marge orbitale. On a besoin d'orteil pour diviser par deux. Donc 71 va être notre marketing ici. Donc nous devons aller ici 71 et maintenant, comme vous pouvez le voir appeler avec il est 80. Alors maintenant, ça marche. D' accord. Donc vous devez amener leurs calculatrices optiques genre Messi et le point raisonnable que je n'aime pas vraiment adopter X'd tout en faisant des lectures est que je ne peux pas avoir les deux en même temps parce que parce que je ne dépasse pas ne me permet pas de mettre comme lignes horizontales. Ok, donc bien, c'est pour moi. Un manque d'un pied. Euh, allons-y avec la mise en place de mobile. OK, donc pour ce cas particulier, comme nous le savons, nous voulons 16 pixels de l'extérieur, hors marges et la gouttière avec Remember, nous utilisons 16 16 16 aussi. Je ne sais pas ce que Donc 16 ok, Et les colonnes. Tu en veux un trois, donc c'est assez arrangé. C' est assez facile de le faire ici parce que vous devez contrôler tous ces paramètres et vous êtes prêt à y aller. Donc, c'est que nous avons ici les mêmes valeurs que nous avions avant, mais encore une fois, c'est un peu ennuyeux que je ne puisse pas m'installer comme Rose et que je dois passer dans ce genre d'un carré et, ouais, vous devez mettre votre taille carrée en huit. Donc c'est à nous, mais je ne peux pas les avoir tous les deux en même temps. Dans ce cas particulier, si vous voulez orteil, euh, pour faire votre comme une cupidité de base honorée, parfois vous devez commencer à mettre comme sont comme des guides. Ok, donc c'est tellement, euh, pour moi, il manque quelque chose ici. Une chose importante. Si vous voulez utiliser, genre, un super serré, il le choisit avec. Mais c'est ainsi que vous faites le gros salaire qu'Adobe 60. Et j'espère que vous apprécierez ces tutoriels. Alors passons à la dernière vidéo et où je vais vous féliciter pour avoir fini. Alors on se voit dans la prochaine vidéo. Merci. 7. 7 - Félicitation: Hé, là. Alors félicitations. Vous finissez votre mise en page. Bien sûr. Donc, j'espère que vous avez tout appris orteil afin que vous puissiez développer votre joueur. De grandes compétences. Nous avons donc couvert les mises à jour d'affiches et les photos. Arrêtez. Et si vous aimez ces vidéos, j'espère que vous me suivez. Donc tu es debout aujourd'hui. Toe nouveaux tutoriels. Et si vous l'aimez, puis examen du foie Donc d'autres personnes peuvent trouver leur cours plus facilement. Et oui, merci de vous être joint. Et j'espère que vous avez eu une grande expérience. Merci.