Créer un système de grille (Semaine 6 de Bootcamp d'UI)

1. Intro: Cette semaine, nous allons construire un système de réseau électrique. abord, nous examinerons les grilles historiques, examinerons les vieux livres, etc., puis nous examinerons comment certaines de ces règles peuvent s'appliquer aux sites Web. Surtout comment la grille verticale va tout dicter, surtout avec un design réactif. Sans nous soucier du codage, nous allons parler un peu du fonctionnement du modèle de boîte en CSS et de la façon fonctionnement du modèle de boîte en CSS et de la dont cela s'applique à CSS Flexbox et à la grille CSS. Encore une fois, ne vous inquiétez pas, nous ne regarderons aucun code. Nous utiliserons ces connaissances pour créer une grille de base élégante pour un article simple sur une page Web. Enfin, nous allons créer une grille légèrement plus compliquée qui peut être utilisée pour une application Web d' interface utilisateur moderne basée sur des composants. Nous examinerons comment la grille fonctionnerait pour les composants individuels qui seront ajoutés à ce site. L'utilisation des systèmes de grille pour la conception de l'interface utilisateur a beaucoup évolué ces dernières années, maintenant que nous construisons des composants individuels pour nos interfaces utilisateur. Il est donc très utile de savoir comment construire ce style de grille. Commençons donc. 2. Géométrie: Dans de nombreux pays vers le début du XXe siècle, les gens ont déménagé dans les villes à cause de l'industrialisation, il y avait plus d'emplois et de villes et ils ont abandonné les vieux systèmes aristocratiques ou féodaux qui existait dans de nombreux pays. Parallèlement à cela, nous avons abandonné les anciennes formes d'art classique et de design et nous avons examiné davantage des choses comme cubisme, le constructivisme et le futurisme. Nous avons commencé à créer des formes artistiques et des dessins un peu plus géométriques et un peu plus ordonnés que les générations précédentes. Bien sûr, en Perse, Arabie et en Asie centrale, ils utilisent des conceptions géométriques depuis des milliers d'années déjà. Parfois, ces styles sont attribués au fait que certains décors islamiques ne permettent pas de dessiner des humains ou des animaux parce qu'ils ne veulent rien idolâtrer. Mais en fait, beaucoup de ces formes ne sont pas conçues avant l'islam et beaucoup plus susceptibles d'être pertinentes parce que ce sont les domaines où les gens adoraient les mathématiques, les sciences et ingénierie. bien avant le reste du monde, nous avons déjà parlé un peu de géométrie lorsque nous avons parlé de typographie, dont nous avons parlé au début du XXe siècle, beaucoup de polices géométriques sont devenues plus populaires. Et les gens utilisent l'excuse qu' ils étaient plus faciles à lire comme s'il était plus rationnel ou logique d' avoir ces polices de caractères. Et en fait, nous savons maintenant qu'elles sont à peu près les plus difficiles à lire car les formes se ressemblent tellement. De même, lorsque nous ajoutons des grilles géométriques au reste de notre conception, il s'agit en fait un peu plus des tendances actuelles de ce montant, de leur utilisation. Nous aimerions dire qu'il a l'air propre et qu'il est donc plus facile à utiliser. Mais c'est vraiment parce que c'est ce à quoi les gens s'attendent à ce que les designs ressemblent actuellement. Lorsque nous examinons ces tendances artistiques comme le cubisme, futurisme du début du XXe siècle, nous réalisons que celles qui sont en réalité très accrocheuses et que nous aimons regarder ont un élément de chaos dans eux. Lorsque nous avons essayé de créer nos compositions dans le premier module, nous voulions créer un sens de l'ordre, mais nous devons tout gâcher avec un peu de chaos nos compositions dans le premier module, nous voulions créer un sens de l'ordre, mais nous devons tout gâcher avec un peu de chaos. créer quelque chose de raisonnablement agréable visuellement en utilisant des formes géométriques. Et nous parlerons davantage de la création d' images pour notre site Web un peu plus tard. Mais si nous devions l'utiliser pour une partie de notre site Web, nous voudrions nous assurer que cette grille est basée sur la grille que nous avons déjà créée pour notre typographie. Et remarquez que par le fait même d' avoir une typographie sur cette page, nous avons déjà créé par inadvertance un rythme horizontal avec toutes ces lignes verticales dans le texte. Si cette conception utilise une police de caractères plus large ou même une police monoespacée, elle donnera une impression très différente du rythme horizontal de la page. Et à la grille que nous créons devrait suivre ce sentiment. Si notre page contenait juste un bloc de texte, elle comporterait naturellement déjà une grille avec les lignes horizontales et verticales créées à partir du texte. Et le reste de notre page devrait suivre cette grille. Peut-être que ces formes géométriques à gauche pourraient être très différentes. Si nous avions une police de caractères plus large, elle serait peut-être meilleure avec des lignes plus larges vers la grille. Je suis raisonnablement satisfait de ce design que j'ai créé ici en utilisant une grille très simple, quelques formes géométriques basées sur ces choix typographiques. Mais comme les artistes révolutionnaires qui ont inventé le cubisme et le futurisme, les meilleures œuvres d'art avaient en fait un élément de chaos et semblables à façon dont vous avez créé les compositions que vous avez créées. le premier module, il y avait un élément de chaos qui les rendait plus intéressants. Notre design n'est pas vraiment une déchirure complète. Ce design semble un peu trop uniforme. Permettez-moi d'ajouter des formes organiques. Vous pouvez voir que j'ai ajouté sur une photo réelle, j'ai mis des lignes qui ne sont pas tout à fait alignées sur la grille. Et en bas à gauche, il y a une forme presque semblable une forme de fleur étrange l' exception de la photographie, ces formes ne correspondent pas à cette grille originale qui c'est le reste de ces formes géométriques. Ils franchissent les lignes de cette grille, mais ils lui donnent une sensation plus organique et cela attire un peu mieux notre attention. Maintenant, cela ressemble davantage à une composition complète. Si vous examinez les systèmes typographiques que vous avez créés dans les modules précédents, vous remarquerez que deux systèmes typographiques différents ont une sensation très différente pour eux, juste à cause de les rythmes horizontaux et verticaux créés par les grilles naturelles de différentes polices de caractères. Vous avez également pris des décisions concernant les hauteurs ou les chargements de Berline et le suivi ou l'espacement des lettres. Il s'agissait principalement de rendre la lecture facile et confortable. Mais remarquez comment si je prends ce système typographique et que je modifie massivement le suivi et la hauteur des lignes. Cela modifie complètement la sensation de la page et modifiera donc toutes les grilles que j'ai créées autour d'elle. Si j'ai fait un exercice similaire à celui que j'ai fait plus tôt, j' y ai ajouté des formes géométriques. J'ajouterais certains qui sont peut-être beaucoup grands et plus fins, beaucoup plus maigres. N'oubliez pas que dans le premier module, lorsque nous avons créé toutes ces compositions loufoques, essayez cela maintenant avec l'un de vos systèmes typographiques. Il suffit d'ajouter des formes loufoques aléatoires et de remarquer ce qu' elles vont ressentir ou paraître très différentes selon la grille naturelle déjà créée par votre police de caractères. Celui-ci que j'ai créé ici à l'écran est complètement illisible. Mais si vous aviez quelque chose avec cette hauteur de ligne élevée, ça va peut-être mal paraître. Avec quelques formes hautes et quelques lignes assez fines, il a été très à la mode depuis une centaine d'années d'avoir œuvres d'art et de design très géométriques. le reste de ce module, nous allons parler de la création d'une grille pour tous les éléments de votre conception s'intègrent parfaitement. Vous disposez déjà d'une grille naturelle provenant du système typographique que vous avez créé. Nous allons donc suivre cette grille naturelle lorsque nous créerons la grille pour notre site Web, nous ne voulons jamais que tout ce qui se trouve sur notre page Web s' intègre parfaitement dans cette grille et soit parfaitement géométrique, nous allons toujours vouloir ajouter formes organiques et des choses qui ne correspondent tout simplement pas à la grille pour le rendre plus intéressant visuellement. 3. Types de grille: Avant d'examiner les grilles sur les pages Web ou les applications Web, commençons par examiner les premières grilles jamais créées et commencer à les construire à partir de là. Les tout premiers livres ont eu une sorte de grille et on l' appelle une poignée manuscrite. On dirait ça. Toutes les lettres de la page s'intègrent confortablement dans cette jolie petite boîte soignée. Maintenant, vous remarquerez qu'il y a beaucoup de décoration autour d'une maison, beaucoup de formes organiques. C'est très classique. Mais il y a toujours cette zone désignée où vont les lettres, la grille réelle de cette page, elle ressemble à ceci, comme ces lignes rouges ici. Maintenant, au tout début, lorsque nous avons encadré la boîte, lorsque nous avons appris nos compositions, nous avons appris qu'avec une forme simple comme une boîte encadrée, il y a toutes sortes de variations. Vous pouvez encore vous amuser avec cela, et vous remarquerez que cette grille est décentrée comme une grande marge beaucoup plus grande en bas et à droite. Et c'est toujours créatif avant même ajouter toutes ces formes organiques et toutes les lettres, juste avec cette simple grille manuscrite, nous pourrions le rendre central. Nous pourrions avoir une marge de charge plus importante en bas, ou nous pouvons avoir une marge beaucoup plus spectaculaire sur l'un des côtés. Par exemple, après cela s'est produit la grille de colonnes où il se peut que nous ayons plus d'une zone de texte sur la page. Si nous devions continuer à penser à cela uniquement en termes de composition, cela nous donne une nouvelle mesure pour réfléchir à l'espace entre ces deux boîtes, nous appelons cela la gouttière. Cela doit évidemment être suffisamment grand pour faire la différence entre ces deux zones de texte. Et assez petit pour que nous n' utilisions pas trop d'espace page. Mais cela va également influer sur le ressenti de la page. Cette page contient en particulier une boîte supplémentaire en haut et une autre case en bas. Il s'agit bien sûr d' en-têtes et de pieds de page. Mais maintenant, vous remarquerez qu' il y a une gouttière entre eux aussi. Nous voulons probablement garder ce genre d' uniforme avec cet espace que nous avons déjà entre les autres boîtes, ou du moins ils sont dans un rapport confortable. Voici une page plus moderne. Ces deux colonnes ont exactement la même largeur. Il est bien plus évident que vous avez lu celui de gauche, puis le monomère à droite ? C'est nettement plus clair. Il a l'air plus moderne. Mais attendez une seconde. Il y a en fait ce petit peu de texte supplémentaire sur la gauche. Nous avons donc ici une troisième colonne d'une largeur complètement différente. Et cela le rend un peu plus intéressant. Rappelez-vous, d'après nos compositions, lorsque nous parlions de rendre les choses relationnelles, cette colonne plus étroite nous dit également que ce n'est pas la même chose. Nous pouvons tout de suite dire que cette autre colonne a un objectif légèrement différent. Comme nous voulons que nos colonnes et nos gouttières aient toujours l'impression d'appartenir ensemble. Il peut sembler étrange d' avoir une largeur différente, mais il y a une autre possibilité ne s'agisse pas de trois colonnes, qu'il ne s'agisse pas de trois colonnes, de cinq, certains éléments couvrant plus d'une. colonne. Vous voyez, lorsque nous créons notre grille sous-jacente, nous ne disons pas que tout ce qui s'y trouve aura une seule colonne. Supposons que cette grille ait été utilisée pour un magazine. Désormais, dans d'autres parties du magazine, la même grille peut être utilisée, mais il peut y avoir différentes zones couvrant différentes colonnes. Nous pouvons même utiliser des éléments qui couvrent toutes les colonnes ou aucune des colonnes. Nous pourrions avoir une zone qui vient de rester ouverte. Et c'est juste pour vous faire penser grilles d'une manière légèrement différente, Il est également possible qu'il s'agisse de cinq colonnes, mais elles ne sont pas de la même largeur, mais pas ce mais elles ne sont pas de la même largeur, que nous pensions à l'origine. Cela ne ferait aucune différence sur cette page exacte, mais cela ferait des différences intéressantes par rapport aux autres pages du même magazine. Et nous pouvons avoir des mises en page créatives un peu plus intéressantes à cause de cela. Et le prochain type de grille dont je veux parler est un réseau modulaire. C'est plutôt une table. Il contient des lignes ainsi que des colonnes de ce dont nous avons déjà parlé. Vous pouvez probablement déjà dire que cela se prête mieux aux sites Web et aux applications Web, car nous avons affaire à quelque chose que vous pouvez faire défiler vers le bas pour de nombreuses pages. Il est beaucoup plus long que large. Diviser les choses verticalement soudainement est beaucoup plus logique. Une page Web peut comporter différentes sections lorsque vous faites défiler la page vers le bas. Et en disposant d'une grille modulaire, nous veillons à ce qu' il y ait une certaine uniformité dans la hauteur de ces derniers et une sorte de rythme vertical. Au fur et à mesure que vous descendez la page. Vous avez peut-être remarqué sur la mise en page d'origine cette image et ces textes en bas à gauche de la page ne se séparent pas sur cette grille modulaire. Cette section possède sa propre grille à l'intérieur. Et c'est tout à fait correct. Nous allons souvent intégrer une grille à l'intérieur d'une autre. En fait, comme nous le verrons dans la vidéo suivante, une fois que nous commencerons à travailler sur des sites Web, nous avons très rarement une seule grille pour tout. En fait, si je vous montre ce dernier exemple de magazine un peu plus moderne , il ressemble peut-être même un magazine que vous pourriez encore reprendre aujourd'hui, vous verrez une image qui s'étend certains titres alignés centralement sur toute la largeur, certains titres alignés centralement et utilisent le même module à gauche et à droite, ces colonnes de texte, puis certains modules avec quelques notes de bas de page en bas de page en bas de page. Ces pages essaient clairement de contenir de nombreux types d'informations. Et il y a beaucoup de types de modules différents qui arrivent sur la page. Mais il y a une certaine uniformité, pas seulement d'une page à l'autre, mais aussi dans certains tripes sont des largeurs et des choses comme celle-ci qui donnent un sentiment d' uniformité lorsque vous descendez la page. encore. Je sais que les exemples de cette vidéo sont tous liés à la conception d'impression. Et évidemment, jusqu'à ce dernier ils sont tous assez démodés. Mais j'espère que cela nous permettra de préparer la prochaine vidéo. Lorsque nous concevons une application Web ou une page Web, nous utilisons généralement une forme de grille modulaire où elle comporte des lignes et des colonnes, une grille verticale et horizontale. Chaque élément de la page peut croiser plusieurs colonnes ou lignes. Ils lui donnent juste un aspect plus uniforme par la suite. Et normalement, en particulier avec la conception de sites Web, nous pouvons intégrer une grille à l'intérieur d'une autre. 4. Importation des grilles: Ici, nous avons un beau design simple pour peut-être une page d'accueil ou une bannière de héros sur un site Web. Maintenant, ces éléments, je ne les ai pas simplement mis n'importe où. J'ai veillé à ce qu'ils s'alignent un peu l'un sur l' autre d'une manière ou d'une autre. Si je devais tout sortir un peu de cette grille sous-jacente que je viens de vous montrer, vous remarquerez que cela semble instantanément bien pire. Il semble instantanément beaucoup moins professionnel. Vous y faites moins confiance, vous vous sentez un peu anxieux juste en le regardant. Pourtant, ce sont les mêmes couleurs, les mêmes polices de caractères, tout a le même rapport, la même illustration, c'est le même fond. Ils ne s' alignent tout simplement pas les uns sur les autres. À mon avis personnel, la meilleure chose, la plus importante qu' un designer puisse faire pour améliorer instantanément ses conceptions. rendre plus professionnels et plus dignes de confiance, c'est simplement s' assurer qu'ils alignent ces choses. Si nous examinons d' abord la topographie parce que nous sommes déjà experts en la matière, nous avons déjà créé une grille verticale pour nos polices de caractères. Tout ça a l'air bien ici déjà parce qu'il s'intègre bien dans cette grille verticale. Maintenant, nous savons que la plupart des choses sur notre page Web seront topographiques, et cela est déjà basé sur cette grille verticale. Nous devrions donc utiliser la grille verticale de notre typographie pour dicter tout le reste. Si nous ajoutons cette grille maintenant et que nous voulons que cet en-tête ait une couleur d'arrière-plan. Nous voulons nous assurer que cette zone est alignée sur la même grille verticale. Je viens donc de diviser cette page en trois sections verticales avec des arrière-plans de couleurs légèrement différents. Et ces trois sections s'alignent sur cette grille verticale initiale. Maintenant, je vais remplir cette page avec d' autres petits éléments que j'ai trouvés et les insérer sur cette grille, puis jetons un coup d'œil à endroit où nous pensons que cette grille pourrait être. Cette partie supérieure ressemble peut-être à deux colonnes, l' une avec le texte à gauche et l' autre avec cette image à droite. Mais si je fais défiler vers le bas et que vous voyez cette section, vous pourriez dire, en fait, il s'agit d'une grille à trois colonnes parce que regardez cette zone. Il a peut-être utilisé une grille à trois colonnes pour toute cette page. Maintenant, bien sûr, je déclare que l'évidence voulait spécifiquement quelque chose où nous pourrions utiliser cette section supérieure et inférieure. Nous pourrions avoir cette grille à six colonnes. Et ces éléments en haut peuvent simplement couvrir trois colonnes. Eh bien, en fait, à l'origine, avec design web quand j'ai commencé, tout le monde avait juste ce genre de grille de 12 colonnes, que nous mettions sur tout et alignerions tous les éléments. d'une manière ou d'une autre à ces 12 colonnes. Et en fait, certains cadres CSS plus anciens vous forçaient à penser ainsi. L'un des inconvénients d'avoir cette grille standard à 12 colonnes pour tout est que vous commencez à l'utiliser, vous réalisez que pour la rendre polyvalente, vous avez besoin de très grandes gouttières et cela ne fonctionne pas toujours. Donc, vous finissez par le pirater et avoir quelque chose qui n'est pas vraiment aligné à cause des progrès du CSS, nous pouvons maintenant travailler sur une page Web plus comme si nous travaillerions sur une mise en page de magazine moderne. Cette zone supérieure, peut-être n'est qu'une grille à deux colonnes, puis cette zone inférieure n'est qu'une grille à trois colonnes complètement séparée. Nous allons devoir comprendre une partie de la théorie CSS sous-jacente pour pouvoir concevoir nos grilles. Mais vous pouvez déjà voir les avantages d'avoir une grille qui ne comporte que deux colonnes, puis une grille complètement séparée composée de trois colonnes. Parce que maintenant, nous avons le contrôle de la gouttière. Nous pouvons rendre cette gouttière relative à notre grille verticale et au style que nous créons sur notre page. Et ce sera uniforme lorsque nous regardons les postes de travail mobiles et que toute la réactivité est entre les deux. Nous avons le contrôle de cette largeur. Nous pouvons l'adapter à notre joli design uniforme. S'assurer que les éléments de notre page sont alignés sur une sorte de grille est la chose la plus importante que nous puissions faire pour que nos designs soient confortables, professionnels et qu'ils soient fiables. Notre topographie va dicter la grille verticale initiale, donnant une certaine uniformité et un certain rythme aux hauteurs de chaque section. Mais chaque section va avoir une grille horizontale différente. largeur des pages Web varie occasionnellement en fonction l'appareil que nous examinons et pour d'autres raisons occasionnellement. La seule mesure que nous contrôlons est donc la gouttière entre les colonnes. Et nous pouvons fabriquer cet uniforme sur l'ensemble de notre site. 5. Modal de la boîte: Si vous ne connaissez rien du tout sur CSS, vous devrez connaître quelques concepts pour pouvoir créer des grilles. Mais si vous connaissez déjà bien ce qu'est le modèle CSS box, n'hésitez pas à ignorer cette vidéo. Chaque élément d'une page Web est potentiellement présent. Ces trois éléments sont la bordure, le rembourrage et les marges. Ne vous inquiétez pas si cela n'a aucun sens. Voyons un exemple tiré de la dernière conception que je vous ai montrée. Examinons ici cette zone de contenu que je présente actuellement sous forme de boîte violette. Cette boîte est dotée d'un rembourrage. Maintenant, c'est ce que je montre actuellement en vert sur l'écran ici. Il a une bordure que je montre actuellement en jaune, mais elle n'était pas bleu marine. Un moment à y aller. Maintenant, la bordure est la partie que vous pouvez réellement voir à l'écran. Et il y a une marge. C'est la zone que j'affiche actuellement en orange, le rembourrage, la bordure et la marge peuvent tous être de tailles différentes. Tout ce qu'ils peuvent être 0. Ils ne peuvent pas exister. Par exemple, s'il n'y avait pas de bordure, et que je viens de rendre l'arrière-plan noir ici pour rendre un peu évident où se situe la différence entre le rembourrage et la marge. Il se peut que nous ayons quelque chose qui ressemble à ça. Le contenu est affiché en violet, le rembourrage est affiché en vert et la marge est toujours affichée en orange. Juste pour vous aider à visualiser exactement comment cela fonctionnerait, examinons un autre exemple. Mais cette fois, nous n' avons pas de rembourrage. Sans rembourrage, il ressemblerait à ça. Au lieu de cela, la zone de contenu est violette. Nous avons maintenant la bordure en jaune et la marge est à nouveau en orange. Et pourquoi ne pas simplement terminer l'ensemble en vous montrant à quoi ressemblerait cette partie du dessin s'il n'y avait pas de marge. Encore une fois, permettez-moi de surligner la zone de contenu en violet et le rembourrage est vert et la bordure est jaune. J'espère que tout est incroyablement clair maintenant, mais n'hésitez pas à revenir en arrière et à jeter un autre coup d'œil. Si vous êtes encore un peu confus. Il est également tout à fait possible que la taille de la bordure supérieure, inférieure , gauche ou droite, marge ou du rembourrage soit complètement différente. Par exemple, ici même, j'ai rendu la bordure droite plus épaisse que les trois autres. Chaque élément de chaque page Web comporte ces trois éléments : le rembourrage, la bordure et la marge. Bien sûr, ils peuvent être réglés sur 0, vous ne pouvez donc pas les voir. Chacune de ces quatre sections ici, l'image et le texte, et c'est peut-être un bouton en bas. Ils ont chacun leurs propres boîtes avec rembourrage, marges et bordures. Ces quatre éléments que nous avons un nom pour le texte et les images de tous enveloppés dans cette boîte. Maintenant, vous entendrez peut-être que les développeurs utilisent beaucoup le mot div. C'est l'abréviation du séparateur de mots. C'est ce qu'on appelle une div. Il regroupe cette image et ce contenu texte à l'intérieur de celle-ci. Et comme nous l'avons vu plus tôt, il a son propre rembourrage, sa bordure et ses marges. Et nous pouvons avoir autant de divs invisibles que nous le voulons, divisant notre page Web en groupes pratiques. Nous allons maintenant revenir à parler de design sous peu. Mais tout d'abord, vous devez vous assurer que chaque élément d'une page, y compris les divs invisibles qui regroupent des éléments, ont des bordures, des marges et un remplissage. Il existe maintenant quelques très bonnes techniques que nous pouvons utiliser. Ces séparateurs séparent donc la page, comment nous voulons qu'elle soit séparée. L'un d'eux s'appelle Flexbox et l'un d'entre eux s'appelle grille. Et nous allons les regarder dans les deux prochaines vidéos. Il y aura donc un peu plus de CSS. Tout simplement, chaque élément d'une page Web a un rembourrage, une bordure et une marge. Il peut s'agir de largeurs différentes sur différentes tailles et elles peuvent même être des zéros afin qu'elles ne s'affichent pas du tout. Nous pouvons regrouper des éléments en div et ils auront également un rembourrage, des bordures et des marges. Pour contrôler facilement la taille de ces div, nous pouvons utiliser flexbox et grid, qui sont deux règles CSS que nous examinerons dans les deux prochaines vidéos. 6. Boîte flex: Si nous devions commencer à créer un site Web, nous allons peut-être créer quelque chose abord très simple comme celui-ci. Supposons que cette boîte en haut à gauche soit un logo. Et ces deux cases en haut à droite, des boutons géniaux, ces éléments eux-mêmes auront toujours la même largeur, quelle que soit la largeur de la fenêtre du navigateur. Il va être logique pour nous regrouper ces éléments dans l' un de ces éléments invisibles que j'ai mentionnés, appelé div. Cela serait logique ici parce que nous voulons que ce soit une largeur maximale que cette div peut être. Si nous l'avons regardé sur un très grand écran, nous ne voulons pas que le logo se trouve tout en haut à gauche du moniteur et en bas à droite en haut à droite, nous voudrions que cette div soit contrainte par une largeur maximale et pour qu'elle soit relativement centrale dans la page. Si je devais maintenant ajouter une deuxième section à la page, comme peut-être certains textes de titre. Il peut paraître bien aligné sur le logo simplement parce que la div environnante la même largeur maximale et possède le même rembourrage et les mêmes marges. J'ai montré ici la bordure de la div en jaune juste pour que vous puissiez la voir plus clairement, mais elle a aussi un peu de rembourrage. Les boutons ne s'adaptent pas tout à fait au bord du développement. Et il a également une certaine marge. La div ne touche pas le haut de l'écran ou l'élément en dessous. Si nous regardons cette page Web, par exemple, sur un iPad, cela signifie que le logo ne touche pas le côté de l'écran et les boutons non plus. Si nous simplifions cela maintenant et que nous regardons juste à l'intérieur de cette barre d'en-tête les éléments qui s'y trouvent, nous avons deux boutons d' un côté et un logo de l'autre côté. Et nous pourrions simplifier cela en disant que les deux boutons appartiennent simplement à un autre groupe. Maintenant, ces deux boîtes que nous avons maintenant à gauche et à droite, ces deux groupes ou éléments auront toujours la même taille. Cela signifie que l'espace entre les deux va augmenter et diminuer à mesure que la taille du navigateur augmente et diminue. Et c'est là que nous pouvons choisir d'utiliser Flexbox. C'est une règle assez simple, mais il est très important de comprendre en tant que concepteur, car vous réalisez rapidement que les mesures qui sont importantes pour nous pour créer un sentiment de l'uniformité et pour s'assurer que les choses sont bien alignées dans notre conception n'est probablement pas une grille sous-jacente et probablement davantage la largeur de ces rembourrages et marges autour de ces différents éléments. Lorsque nous ajoutons la règle flexbox à une div ou à un groupe, nous pouvons faire en sorte que l'espace soit égal autour de chaque élément. Nous pourrions étirer n'importe lequel des éléments à l'intérieur et l'aligner que tous les éléments soient écrasés au centre, à gauche ou à droite. Bien sûr, toutes ces règles peuvent fonctionner horizontalement comme verticalement. Revenons à ce design simple que j'ai créé il y a quelques vidéos. Et regardons comment faire le menu en haut ici, nous avons un logo à gauche, nous avons un bouton à droite et nous avons un petit menu au milieu. Nous ne pouvons pas contrôler le positionnement exact de ces éléments. Cela va dépendre de la largeur du navigateur. Et cela peut potentiellement dépendre de la façon dont l'utilisateur a défini sa taille de texte par défaut dans son navigateur. Lorsque nous développons cela ou que nous le transmettons à un développeur, il utilisera probablement une flexbox pour s'assurer que ce menu se trouve au centre. Et ces deux autres éléments se trouvent à l' extrême gauche et à l'extrême droite. Le dimensionnement sur lequel nous sommes un concepteur contrôle est le modèle de ce bouton et l'espacement entre ces éléments de menu. Nous pourrions créer un style uniforme et le rendre aligné en les rendant tous de même taille. Je veux dire que le remplissage de ce bouton et l'espacement entre ces éléments de menu correspondent exactement au même nombre de pixels. Maintenant, ça ne va pas marcher partout. Et je ne pense pas que cela fonctionne vraiment dans cette situation où les éléments du menu ont probablement besoin d'un peu plus d'espace autour d'eux. Comme nous avons déjà une échelle typographique. Et il n'y a qu' un nombre limité de tailles de police que nous utilisons tout au long de notre conception, nous n' aurons qu'une quantité limitée de rembourrages et de tailles de marge. Il est donc normal que l'espace entre ces éléments de menu et le rembourrage de ce bouton soit de différentes tailles. Mais idéalement, nous voulons qu'ils correspondent au même ratio. Dans l'exemple sur cet écran, je les ai mis en place dans le rapport d'or. Comme la typographie va presque toujours constituer la majeure partie de ce qu'il y a dans votre conception. Il est tout à fait logique que ce rapport soit basé sur le rapport hauteur-ligne que vous avez déjà dans l'exemple de conception que je montre sur mon écran, le rembourrage du bouton est exactement de la même taille que le hauteur de ligne de paragraphe. Et pour les éléments de menu où il y a un peu plus d'espace, j'ai utilisé la hauteur de ligne d'un de mes en-têtes. Cela signifie que dans l'ensemble, la conception a toujours cet élément de conformité, malgré le fait que la grille peut changer de façon assez spectaculaire. Flexbox nous permet de contrôler comment les éléments d'un groupe ou d'un DIV sont justifiés, espacés et alignés. Cela nous laisse les éléments de largeur fixe à l'intérieur de cette div, ainsi que les motifs sur les marges qui sont à l'intérieur de notre contrôle. Et nous voulons vraiment en profiter davantage afin de créer un sentiment d'uniformité dans nos conceptions, même s'ils peuvent être réactifs. Et il y a toutes sortes de choses qui peuvent changer. 7. Grille CSS: La grille Css nous donne beaucoup moins de contrôle que Flexbox, mais elle nous permet d'appliquer certaines règles sur plusieurs lignes. Si vous imaginez un tableau comme Excel ou quelque chose, vous avez des colonnes et des lignes, et c'est ce que vous avez dans la grille CSS. Si vous imaginez ce gâchis légèrement de pénalité de faculté de boîtes que j'ai actuellement à l' écran avec une grille CSS, nous pouvons les forcer à avoir la même largeur et les mêmes hauteurs. Cela va rapidement devenir plus utile lorsque vous réalisez que vous pouvez ensuite définir un élément sur deux lignes, par exemple. Cela rend la grille CSS beaucoup plus utile pour les mises sur l'ensemble du module ou du composant de notre application Web. Comme nous l'avons vu plus tôt, un dessin comme celui à l'écran en ce moment pourrait être une grille de sixième colonne ou de 12 avec différents éléments couvrant nombre de colonnes différent. Mais en fait, il serait beaucoup plus logique que chacun de ces composants soit simplement des grilles CSS différentes, la section centrale étant simplement une grille à deux colonnes et les sections supérieure et inférieure étant trois. -grille de colonnes. Chaque élément de la grille aura une largeur uniforme, ce qui peut changer au fur et à mesure que la taille du navigateur change toutes sortes de choses différentes. Encore une fois, la chose sur laquelle nous avons le contrôle est le rembourrage et la marge. C'est donc ce que nous allons utiliser pour créer un sentiment de conformité dans nos conceptions. Cela est non seulement très utile à réaliser en tant que designer, mais cela peut vous faciliter beaucoup la vie. La façon dont beaucoup de concepteurs Web pensent. Et la façon dont nous avions l' habitude de penser est d'avoir une grille standard de six ou 12 colonnes sur tout. Et pour le rendre polyvalent, il faudrait en fait lui donner une gouttière beaucoup plus grande que celle montrée à l'écran ici, ce qui, comme nous le savons, va enlever la seule variable. que nous nous soucions de rendre nos designs uniformes ou de nous faire ajouter un si grand rembourrage à chaque élément qui ne nous donne pas autant d'espace pour jouer avec la zone blanche à l'intérieur de chacun de ces éléments. ces éléments, par exemple, étaient tous basés sur la grille modulaire originale que nous avions auparavant dans la conception d'impression. Et juste pour vous rappeler un exemple, voici un exemple ici. Une chose que vous remarquerez avec ce design de magazine n'est pas tout. Les sections sont remplies. Certaines sections ou simplement blanc uni et autres ont juste un cap dans un coin supérieur quelque part. Nous utilisons la grille pour nous aider à aligner les éléments et à rendre les choses uniformes par la suite. Mais personne n'a jamais besoin de voir la grille ni de savoir qu'elle est là. Et nous ne voulons certainement pas nous forcer à remplir toutes les parties. La grille CSS rend également beaucoup plus agréable utilisation de la vue mobile ou de la vue tablette. Il suffit de dire qu'à des largeurs spécifiques, une chose va couvrir toutes les colonnes, alors qu'auparavant, elle ne couvrait que la moitié des colonnes. Cela signifie que nous n' avons plus à considérer nos conceptions comme une vue mobile ou une vue de bureau. Mais nous pouvons plutôt penser qu' un composant individuel se divise en une seule colonne à une largeur spécifique ou comme en une seule colonne à étant deux colonnes d'une autre largeur. Si nous regardons à nouveau une section de cette simple page que j'ai créée, cela ne fonctionne peut-être pas sur une seule grille. Il s'agit peut-être de deux composants différents qui ont chacun leur propre liste de colonnes et leurs propres marges et rembourrages. Ensuite, ce qui les rend plus uniformes, qui leur donne l'impression appartenir ensemble, ce sont les rembourrages, marges, l'espacement et les largeurs maximales. Maintenant, alors que nous réduisons la largeur globale du navigateur, ou peut-être que nous le regardons sur un iPad. Peut-être que le composant inférieur s'accroche simplement à une seule colonne, alors que le composant supérieur est en deux colonnes. Et alors que nous nous resserrons un peu plus ou que nous regardons un téléphone mobile, peut-être que le composant supérieur n' est qu'une seule colonne. La largeur exacte à laquelle ces changements se produisent est désormais entièrement sous notre contrôle. Et ils peuvent se produire à des largeurs complètement différentes. Nous ne voulons pas nécessairement penser qu' une grille est quelque chose que nous créons dès le début. Nous créons une grille pour chaque composant et ils ne doivent pas nécessairement être identiques. Ce que nous voulons créer en ce moment, c'est peut-être des règles uniformes sur ce que peuvent être ces marges et rembourrages et éventuellement une échelle pour différentes tailles. La grille Css nous permet de positionner certains éléments dans un tableau avec des lignes et des colonnes. Ils auront désormais tous une largeur uniforme et les rangées peuvent également avoir une hauteur uniforme. Nous pouvons ajouter des règles afin que le nombre de lignes larges et d'éléments puisse changer à une largeur de navigateur différente. Et il n'y a plus de raison logique pour que nous ayons un certain nombre de colonnes pour l'ensemble de notre page Web. Chaque composant peut fonctionner complètement séparément l'un de l'autre. Comme pour la Flexbox, nous pouvons à nouveau créer un sentiment de conformité uniforme en disposant d'une échelle pour nos marges et nos largeurs de rembourrage. Si vous n'avez aucune expérience du développement, ces dernières vidéos ont peut-être été un peu déroutantes, mais nous allons le faire ensuite. 8. Fluide réactif et réactif: Au fil des ans, il y a eu différentes façons de faire en sorte que vos sites Web s'adaptent à différentes tailles d'écrans d'appareils. À l'origine, les gens faisaient ce qu'ils appelaient un design adaptatif, où vous essayiez d'identifier ce qu' était l'appareil, puis chargeaient ce qu' était l'appareil, puis chargeaient une feuille de style CSS différente de sorte qu'un iPhone et un ordinateur de bureau aurait deux sites Web différents. C'était beaucoup de travail, et c'est devenu absolument impossible car nous avons eu plus d'appareils avec toutes sortes d'écrans de tailles différentes. Les deux dont nous parlons encore aujourd'hui sont fluides et réactifs. Nous avons déjà abordé la conception fluide. Nous avons parlé de la façon dont vous pouviez utiliser l'unité VW, la largeur de la fenêtre pour ajuster la taille de la police à mesure que la taille du navigateur s'ajuste. Cela signifie que lorsque la largeur de votre navigateur passe de 999 pixels de large à cent dix cents pixels de large, votre conception va s' ajuster légèrement. Pour chaque réglage de la largeur de la fenêtre, la conception sera légèrement différente. Et à mesure que nous augmentons la largeur, nous augmentons la taille de la police, nous augmentons la hauteur de ligne et nous augmentons la longueur de la ligne au fur et à mesure que nous créons nos conceptions et nous créons le code pour implémenter ces conceptions. nous voulons toujours être conscients de l'endroit où nous faisons des compromis. Maintenant, avec quelque chose comme la topographie, il y a plusieurs choses. Nous voulons toujours que notre site soit beau. À mon avis personnel, la partie la plus importante de l'expérience utilisateur, fait d'avoir un beau site a le plus grand effet sur l'expérience de l' utilisateur. Nous voulons bien sûr que l' utilisateur puisse lire le texte rapidement et efficacement. Et dans une certaine mesure, nous nous soucions de l'expérience de lecture car les gens peuvent avoir l'impression progresser davantage avec des textes dans des textes qu'ils lisent plus lentement. Nous en avons parlé plus tôt dans notre module sur la lisibilité. Maintenant, pour ces trois choses, à quel point c'est beau, l'expérience de lecture et la lisibilité. Nous allons faire des compromis à différents moments de notre conception. Cependant, avec cette idée de conception fluide, il n'est avantageux à aucun d'entre eux de créer un texte facile à lire pour quelqu'un. La seule variable qui nous intéresse, c'est quelle distance le texte se trouve de leur visage ? Nous avons déjà défini la taille de police parfaite, longueur de ligne parfaite et la hauteur de ligne parfaite pour que les gens puissent lire du texte ou la police exacte que nous avons utilisée à différentes distances. Nous avons donc un design réactif. C'est ici que nous avons essentiellement trois conceptions différentes de modifications légèrement différentes notre CSS pour des largeurs d'appareils légèrement différentes. Il suffit de décider quelle est la plus grande largeur d'un téléphone mobile, la plus grande largeur qu' un iPad pourrait être. Et nous pouvons définir des règles CSS à l'aide de ces chiffres. Mais il y a un problème ici, n'est-ce pas ? Parce qu'à un moment donné, quelqu'un pourrait simplement créer un très gros téléphone ou un très petit moniteur de bureau. Les utilisateurs peuvent commencer à utiliser leur téléviseur pour consulter des sites Web. Cependant, c'est la technique qui est généralement considérée comme une bonne pratique par de nombreuses personnes, y compris Google et Google l'utilisent pour décider s'il doit classer un site Web comme bon ou non dans son classement SEO. Donc, même si vous ne pensez pas que Responsive est un bon système pour faire fonctionner un site Web sur un téléphone mobile. Vous voudrez peut-être examiner comment cela va affecter le classement de votre site dans les moteurs de recherche. Ce que nous pouvons faire, c'est que nous pouvons créer du code réactif. Il change donc entre un téléphone, un iPad et un ordinateur de bureau. Mais nous pouvons permettre un certain niveau de fluidité entre peut-être un grand iPad et un petit iPad. Nous ne voulons jamais le faire avec notre texte de paragraphe, mais pour quelque chose comme notre titre, les textes affichent du texte ou même des images et d'autres parties du site comme celle-ci où ce n'est peut-être pas important à quel point il est facile à lire ou même à quel point il est beau, mais peut-être qu'il attire l'attention des gens est plus important que cela peut être une bonne technique. conception fluide est l'endroit où la conception s'ajuste au fur et à mesure que la largeur du navigateur change. Ce n'est pas trop utile pour nous en typographie car cela n' aide pas à la lisibilité. Tout le monde a l'air beau du site. Responsive est là où nous avons des points spécifiques dans le changement de largeur où les règles CSS mises à jour et cela modifiera le style du site. C'est beaucoup plus utile car nous essayons simplement de faire en sorte que notre site soit beau et fonctionne bien sur trois conceptions différentes pour certains éléments de notre CSS, nous voudrions peut-être utiliser un peu ces deux. Nous voudrions peut-être avoir la conception réactive où elle évolue entre le mobile et le bureau, mais avec un certain niveau de fluidité. Il s'ajuste donc légèrement en fonction de la taille du téléphone. Nous examinerons ces trois techniques dans les trois prochaines vidéos. 9. L'anatomie d'une grille - Partie 1: Notre grille, une fois créée, ne sera pas affichée sur nos sites terminés. Nous créons la grille pour vous aider à mettre en page les choses sur la page. Et nous ne les montrons jamais sur le site fini. Mais cela fait une énorme différence. Comme nous l'avons vu lorsque nous avons créé nos compositions, nous pouvons rendre les choses plus conformes et connectées. Si nous avons des règles sur l'endroit où elles peuvent apparaître sur la page. Parce qu'il s'agit de règles que nous avons au sein d'une équipe. On va finir par parler beaucoup de ça. Par conséquent, nous devons connaître la terminologie autour d'une grille et ce que les différentes choses sont appelées. Notre grille verticale est déjà affichée ici à l'écran. Et n'oubliez pas que nous ne voulons probablement pas appeler cela une grille de référence car c'est quelque chose utilisé dans la conception d'impression et c'est là que la topographie se trouve sur la ligne, nous ne pouvons pas faire avec CSS. Appelons cela la grille verticale. Il est assez courant que ces lignes soient divisées par incréments de quatre pixels. Mais si vous avez un site Web spécifiquement chargé de texte et que vous êtes très préoccupé par la lisibilité. Vous voudrez peut-être l'ajuster légèrement en fonction la police de caractères que vous utilisez, comme nous l'avons mentionné dans les modules précédents, tout comme avec une feuille de calcul Excel, les colonnes sont les éléments qui sépare notre page horizontalement. Cet espace entre chaque colonne s'appelle une gouttière, ou parfois un espace ou une allée, mais j'utiliserais le mot gouttière. Et nous ne voulons pas appeler ce rembourrage parce que nous allons utiliser le mot «  padding » plus tard, mais nous voulons toujours avoir de l'espace ici. La zone située sur le site de notre grille est appelée marge. Et nous n' allons pas forcément faire de cela la taille de la gouttière. En fait, nous le rendrions normalement un peu plus grand, peut-être deux fois la largeur de la gouttière. Nous allons utiliser la marge pour d'autres zones de notre réseau. Mais c'est très bien parce que nous entendons essentiellement la même chose lorsque nous utilisons ce mot. Si vous imaginez que cette boîte blanche est un site Web, mais nous la regardons sur un écran beaucoup plus grand à un moment donné, il y aura juste l'espace sur les deux côtés. Ces marges extérieures affichées en rouge sont des marges flexibles. Ils vont simplement grandir pour remplir l'espace une fois que nous aurons atteint la largeur maximale de notre site Web, bien sûr, comme Excel, les sections qui le divisent verticalement sont appelées colonnes. Et si nous voulons utiliser ces deux éléments qui séparent nos conceptions, nous voulons probablement que ces colonnes soient un multiple de cette grille verticale. Nous avons déjà créé ces boîtes que vous obtenez là où la ligne et la colonne se croisent. Nous appelons ces modules. Nous avons vu plus tôt le réseau modulaire. Ce n'est pas un grand nom car les développeurs utilisent le module Word pour signifier quelque chose de très différent, mais nous avons rarement à nous soucier de les nommer. On appelle parfois ces unités et c'est probablement un nom encore pire. Vous pouvez entendre des gens dire une grille de douze unités, auquel cas ils signifient des colonnes, mais le mot unité peut également signifier Rho ou module. Soyez donc conscient de ces deux mots, mais j'éviterais probablement de les utiliser vraiment. Un champ est un groupe de lignes, car il est utilisé pour rompre la monotonie visuelle idéalement, il ne s'agit pas du même nombre de lignes, mais nous voulons nous assurer qu'il correspond à notre grille. Je n'aime pas le champ nom, surtout quand nous parlons de conception Web, car il est évident qu'un champ est quelque chose qu'un formulaire de saisie possède également. Vous pouvez plutôt appeler cela un groupe de lignes ou une région verticale. Le mot région verticale est assez bon car un ensemble de colonnes est parfois appelé région. Encore une fois, j'éviterais de faire en sorte que ces régions aient le même nombre de colonnes, car cela rend les choses monotone. Enfin, c'est ce qu'on appelle une zone spatiale, mais nous parlons rarement de rompre les choses de cette façon dans la conception Web. Je ne m'inquièterais donc pas trop de me souvenir de celui-là. Il se peut que vous l'entendiez d' un imprimeur à un moment donné. Il y avait beaucoup de terminologie dans cette vidéo, mais le petit nombre dont vous devez absolument vous souvenir parce que vous allez les utiliser, c'est la grille verticale. Nous connaissons déjà les colonnes et les lignes similaires à celles que vous auriez dans une feuille de calcul. Les gouttières, l'espace entre les colonnes. La marge correspond à l' espace sur le côté. Marge variable lorsque la page est trop grande ou trop petite. Vos régions verticales et horizontales qui constituent un ensemble de lignes ou de colonnes. 10. L'anatomie d'une grille - Partie 2: J'ai une grille verticale, une grille de sixième colonne, et j'ai des régions horizontales, ou aussi appelées champs. Et j'ai cette grille verticale. Maintenant, je peux les cacher indépendamment pour qu'ils ne soient pas très distrayants. Et évidemment, je veux allumer et éteindre régulièrement certains d'entre eux pour voir à quoi ressemble mon design. Comme nous le verrons dans un instant. Un programme graphique comme Sketch, InVision Studio ou Figma nous permettra créer certaines de ces grilles afin que nous puissions les activer et les éteindre très rapidement avec les raccourcis clavier. Mais pour certains d'entre eux comme les régions nous allons devoir créer nos propres couches. Il est logique d'ajouter chacun d'entre eux à une couche différente afin que nous puissions les activer et les désactiver pour mieux voir notre conception. C'est très déroutant si toutes nos grilles sont allumées en même temps. Commençons par examiner certaines parties de la grille que vous pouvez voir visuellement d'une manière ou d'une autre. Une ligne de suspension est presque quelque chose que vous pouvez voir. C'est quelque chose qu'un concepteur de magazines utilisait lorsqu'une ligne spécifique sur la grille verticale affichée ici dans un rouge légèrement plus foncé est toujours utilisée pour mettre le titre. Même si le design d'une page est complètement différent, nous mettons toujours le titre sur cette ligne de suspension. Maintenant, dans un magazine, il est parfois utilisé pour un peu d'effet visuel, un peu de genre punch, si une page a un titre particulièrement important pour qu'elle ne soit pas sur la ligne de suspension. Et ensuite, cela va briser la convention et le faire ressortir davantage avec notre application Web. C'est bien de ne pas le faire car les gens naviguent au hasard et ils ont toujours besoin quelque chose quelque part sur la page. Ils savent toujours où ils se trouvent sur le site Web. J'encouragerais donc à avoir une ligne spécifique sur la grille verticale, qui est une ligne suspendue pour nos textes de rubrique. Nous avons déjà nos régions verticales et nous allons parfois les séparer, briser un peu la monotonie visuelle en leur donnant une couleur d' arrière-plan différente. Cela attire l'attention et nous aide à maintenir notre rythme vertical. Mais nous pourrions plutôt séparer nos sections à l'aide de lignes de flux comme celle-ci. Juste une ligne noire sur la page montrant physiquement l'une des lignes et notre grille verticale. Les lignes d'écoulement peuvent souvent être utilisées pour attirer l'attention des gens et beaucoup sur quelque chose juste au-dessus ou au-dessous de la ligne. Ils exigent beaucoup d'attention et ajoutent très facilement une grande complexité visuelle à un design. Je dirais donc que si vous n'avez pas vraiment besoin de quelque chose comme une de ces lignes de flux, je ne les mettrais pas souvent. Nous voulons normalement avoir beaucoup d' espaces blancs dans notre conception, autant plus que nous ne sommes pas limités à la quantité de papier que nous utilisons, comme le sont les imprimeurs. Pourquoi ne pas utiliser tout ce blanc ? Cela signifie que notre grille que nous avons pris tout ce soin de créer peut ne pas être évidente et pourrait donner au site un aspect un peu de marque. Eh bien, nous avons déjà équilibré nos compositions et proposons des modules. On peut donc parfois utiliser un peu de ça. Nous pourrions ajouter une petite croix ou un point dans le coin inférieur pour aider à équilibrer les éléments de la page. Lorsque nous le faisons, nous voudrions probablement placer cela quelque part à l'un des coins de notre grille. En réalité, lorsque nous assemblons nos grilles, nous voulons y penser comme si nous concevons où va notre espace blanc. Pensez-y plus comme une façon d' assurer une marge de respiration plutôt qu' une façon d'enfoncer le plus de contenu possible sur la page. Toutes les régions de notre page n' auront pas quelque chose dedans. Beaucoup d'entre eux vont juste être vides. Et c'est vraiment comme ça que nous voulons. Si nous avons une zone colorée autour d'une de nos régions et que nous voulons y ajouter du texte, vous devrez vous assurer qu'elle possède un rembourrage intérieur. Nous ne voulons pas que les textes soient placés dans des droits contre le bord de cette zone de limite. Mais malheureusement, nos textes de rubrique ne s'alignent pas bien avec notre corps de texte. Bien sûr, nous pourrions aligner les textes du titre sur ce corps de texte. Ou une autre option pourrait simplement être qu'il y a boîte colorée ne s'intègre pas parfaitement dans la grille. Il se trouve peut-être légèrement en dehors de l'informatique. Le problème avec cette technique peut être que nous avons dans les boîtes ici et ensuite ils vont se regarder très, très près l'un de l'autre. Il n'y a pas beaucoup d'espace entre ces deux boîtes. Il n'existe pas vraiment de solution parfaite à ce problème. Mais pour cet exemple précis, je dirais que vous voulez que les cases colorées s'étendent jusqu' aux bords des régions et que chaque région soit rembourrée. Ensuite, nous avons un design où tout semble aligné, mais rien n' est trop proche du point de se sentir trop mal à l'aise. Pour des exemples comme celui-ci, vous avez peut-être créé ces régions spécifiques que vous utilisez pour vos conceptions. Et vous voudrez peut-être simplement ajouter le rembourrage directement pour faciliter le travail. Votre programme graphique aura probablement un moyen d'activer et de désactiver les grilles, mais vous voudrez probablement placer vos régions verticales et horizontales dans un calque séparé pour que vous puissiez allumez-les et éteignez facilement. Une ligne de suspension est l'une des lignes de votre grille verticale laquelle vous placerez toujours votre en-tête pour votre page. ligne de flux sera là où vous affichez l'une des lignes de votre grille verticale pour attirer l'attention sur quelque chose. Et lorsque vous créez des régions horizontales et verticales et que vous les placez dans un calque séparé, vous pouvez également y ajouter du rembourrage, surtout si vous allez avoir une bordure. ou une couleur d'arrière-plan. 11. Résumé: Avec la typographie, la couleur, la composition ou les grilles, nous devons développer notre œil pour identifier quand il fonctionne bien. Nous devons être en mesure de voir intuitivement quand le design est beau et quand il ne le fait pas, et ce qui doit être fait. Nous avons fait nos exercices de construction d'intuition au début de ce cours lorsque nous avons joué avec des compositions. Maintenant, nous avons développé notre vocabulaire pour parler de grilles. Nous travaillons presque toujours en équipe ou avec un client. Et dans une équipe, nous devons bien communiquer. Nous avons besoin d'un vocabulaire partagé. Nous pouvons maintenant parler de l' anatomie et des types de grilles. Avec le développement Web moderne, les composants sont conçus comme des éléments de code individuels qui peuvent être réutilisés dans différentes parties d'une application et peuvent être maintenus et échangés indépendamment. Pour cette raison, chaque composant de notre page, nous aurons en fait sa propre grille. 12. Aligner la grille: À titre d'exemple pratique de certaines choses dont nous venons de parler. J'ai créé une grille de sixième colonne ici, et je vais l'utiliser pour certaines conceptions basées sur les six colonnes que j'ai créées trois régions verticales. Maintenant, chaque région a une largeur différente. Je vais essayer d'éviter d'utiliser autant que possible les colonnes d'origine parce que ces régions sont beaucoup plus intéressantes à travailler avec leurs largeurs variables tout en se sentant uniformes car ils sont basés sur la même structure de colonnes. Et je sais que ça va fonctionner avec CSS pour la même raison. Je sais que j'aurai besoin d' un peu de rembourrage pour ces régions verticales plus tard, donc je vais juste l' ajouter. Maintenant. J'ajoute dix pixels de rembourrage sur chacun d'eux, que nous utiliserons un peu plus tard. Voici une partie du texte que j'ai créé pour l'un de mes systèmes typographiques dans l' un des modules précédents, je l'ai fait couvrir deux régions verticales, qui comporte en fait trois colonnes d'origine. Et c'est tout à fait acceptable. Maintenant, je vais ajouter juste une boîte de couleurs. Je pense peut-être que cela aide à équilibrer mon design ou quelque chose comme ça. Il semble assez vide en ce moment. Je ne peux pas le faire. Ce que j'ai fait ici, c'est que j'ai aligné la boîte à l'extérieur de mes régions verticales. Je ne peux pas faire ça. Je ne peux l'aligner qu'à l'intérieur. Par exemple, le positionner ici serait tout à fait correct. De façon réaliste, je ne vais pas le poser ici. Un bon endroit pour le dire serait évidemment derrière le texte. Et c'est là ce rembourrage sera utile. Maintenant, j'ai un peu de rembourrage à gauche et à droite, sorte que le texte n'est pas vidé avec le bord de la boîte, ce qui, comme nous l'avons vu précédemment, est parfaitement adapté tant que nous nous assurons d'utiliser ce même rembourrage pour tout texte ultérieur dans d'autres parties de la page. heure actuelle, je pense que c' est plutôt sympa, mais il n' utilise pas vraiment trop notre réseau. J'ai utilisé deux des régions verticales ensemble, ce qui signifie que nous pourrions aussi bien avoir une grille à deux colonnes. Par exemple, je pourrais juste mettre une photo à droite ici. Et c'est une page assez bien mise en page, mais ce n'est pas vraiment intéressant. Nous pourrions améliorer légèrement le fonctionnement du réseau à notre avantage. Peut-être. Une chose que nous pourrions faire pour la rendre instantanément plus intéressante est d' aligner l'image sur la grille. Et c'est une technique et un design web assez couramment utilisés, mais il peut être assez difficile à réaliser techniquement dans cet exemple ici j'ai fait en sorte que les bateaux de cette image s'adaptent confortablement dans le caniveau entre mes deux régions. C'est un de mes étudiants de designer qui m'a montré récemment et je pensais que c'était vraiment, vraiment impressionnant, ce que vous ne remarquerez peut-être pas en premier, c' est que l'image à gauche et le texte de droite utilise presque exactement la même grille. Ils sont tous deux centralement alignés. Il y a une sorte de boîte aux limites des deux côtés. Et l'image comporte en fait quelques lignes en haut et en bas à peu près là où le remplissage entre une partie du texte commence et se termine. Cette page est presque complètement symétrique car la même grille est utilisée pour l'image et le texte, il peut être très, très difficile trouver ou de modifier des images pour s'adapter parfaitement à cela. Cependant, en revenant à mon design, je suis plutôt content la taille et du positionnement de l'image, mais il va rendre difficile la réinsertion de ce texte, en particulier le titre. Supposons un instant que je suis très heureux de rendre l'arrière-plan sombre et les textes s'allument et passons à l'autre. C'est une autre technique qui est tout à fait parfaite, mais vous ne voyez pas toujours trop souvent parce que vous devez vérifier que vos images vont bien fonctionner, mais vous pouvez absolument superposer du texte sur une image. Ici, mon corps de texte couvre l' une de mes régions verticales. Mon texte de titre s'étend sur deux, et mon image s'étend. Ce sont des régions verticales complètement différentes. C'est le même contenu, mais il est visuellement beaucoup plus intéressant que celui où je viens de le séparer de gauche à droite. Imaginons maintenant que je voulais déposer tout cela et mettre une icône bizarre d'un yacht ou quelque chose en haut ici. Parce qu'une icône est à elle seule et qu'elle est d'une forme obscure, il peut souvent être un peu plus difficile d' aligner le texte ou les images similaires à ce que nous avons vu lorsque nous regardions des compositions directement au début. Nous ne voulons pas que le point situé tout en haut de ce yacht touche le bord de cette ligne de grille. C'est une très petite petite partie de l'icône. Il peut se chevaucher un peu. Nous voudrions donc simplement le pousser au-dessus de la zone limite. Ou parce que c'est une forme un peu délicate à utiliser. Peut-être que si je voulais ajouter une icône ici, il serait préférable de l' aligner un peu au centre dans cette région verticale. Supposons plutôt que nous n' ayons pas d'image sur ce dessin et que nous utilisons le texte pour couvrir les deux régions verticales gauche comme nous l'avions déjà fait ici. Maintenant, peut-être voudrions-nous ajouter l'icône. Nous voudrions peut-être l'utiliser pour une sorte d' ancrage conçu pour essayer équilibrer le poids de haut en bas et de gauche à droite un peu. Nous pourrions positionner cette icône au centre de la ligne limite de notre grille afin que le maître de la faille soit juste sur cette ligne. Parce que cette icône est juste utilisée comme moyen d'ancrer un peu notre composition. C'est tout à fait correct s'il n'est pas exactement à l'intérieur de la grille. De plus, lorsque nous ajoutons la ponctuation typographique, comme nous l'avons dit dans un module antérieur, nous voulons que la ponctuation suspendue en dehors de notre réseau, comme cela. Malheureusement, ce n'est pas si facile à faire avec la programmation. Et vous voudrez peut-être simplement mettre retrait quelque chose comme des points de puces ne pas avoir le problème d' essayer de savoir quoi en faire. Avant de parler plus en profondeur des grilles, allez à cet exercice. Créez une grille simple à six colonnes. Assurez-vous qu'ils ont des longueurs égales et des gouttières égales. Regroupez certains d'entre eux en régions verticales. Ajoutez un peu de rembourrage sur les côtés de chacun d'entre eux, puis sur un calque séparé et votre programme graphique et quelques textes de votre système typographique que vous avez déjà créé. Essayez d'ajouter des images, des icônes et tout ce que vous pourriez voir sur une page. Et essayez de les aligner à l'intérieur de cette grille que vous avez créée. Et voyons à quoi ça ressemble. Pour relever un défi supplémentaire, essayez de conserver la grille verticale que vous avez déjà créée. Lorsque vous le créez, le système typographique. 13. Grille intégrée: J'espère que cet exercice a été relativement productif. Je vais bientôt vous demander de créer une grille et de mettre en page une page entière. Mais avant de le faire, examinons quelques exemples un peu plus complets. Ensuite, je vais vous montrer comment créer correctement la grille. Cette fois, je vais commencer par une grille à 12 colonnes, mais je vais encore une fois la simplifier en régions légèrement moins verticales, cinq régions verticales de tailles légèrement différentes. C'est à présent que des éléments potentiels tels que du texte ou des images peuvent être installés. Ils pourraient passer une région verticale deux ou trois comme suit. Comme vous pouvez le constater, cela nous donne potentiellement quelques options de mise en page à l' endroit où nos différents éléments pourraient s'asseoir. Cela nous donne beaucoup de façons différentes de positionner les choses sur notre page. Je vais prendre ce système typographique que j'ai créé dans un module antérieur, et je vais essayer de le transformer en page d'article de blog. Je vais le faire en ajoutant simplement des images et peut-être des formes colorées. Plus tard. J'ai l'intention d'utiliser ces cinq régions verticales que je viens de créer, mais je vais y ajouter ce texte et ces images. Et c'est ce que j'ai imaginé. La première chose à savoir, c'est que j'ai utilisé une grille différente pour cette section de titre avec un fond bleu foncé et une des images, je n'utilise en fait que ces cinq grille de région pour la zone de texte plus bas. L'en-tête de cette page est basé sur la même grille de 12 colonnes, mais elle utilise en fait deux régions verticales différentes, soit six à gauche et six à droite. Nous en parlerons un peu plus dans un instant. Mais tout d'abord, examinons le texte actuel basé sur ces cinq régions. Comme vous pouvez le constater, il a un sentiment de conformité car il n'y a que ces cinq régions sur lesquelles il est basé, mais il présente toujours un certain intérêt visuel car différents éléments couvrent différentes régions. Et comme vous pouvez le constater, j'ai utilisé la grille pour autoriser des zones d'espaces blancs, en particulier en haut à gauche de la zone blanche. Et j'ai essayé d'avoir un certain équilibre visuel avec la façon dont les images sont positionnées autour du texte. Supposons que nous ayons décidé que la longueur de la ligne de ce texte était un peu trop longue. Voici une autre mise en page avec une longueur de ligne légèrement plus limitée. Ensuite, il permet un peu plus d' espaces blancs autour du texte. Dans l'intérêt des exercices à venir que nous allons faire, je vous recommande de jouer et de voir quelles sont les différentes options qui s'offrent à vous. Essayez peut-être de créer quelques versions de chacune d'elles. Ensuite, je vais prendre ce système typographique que j'ai créé dans une vidéo précédente. Et cette fois, j'essaierai d' appliquer cela à un tableau de bord d'interface utilisateur avec des graphiques de données et des choses comme ça. Quelque chose d'un peu plus complexe. Cette fois, je vais avoir moins de colonnes. Je vais m'en tenir à six. Et il y a une bonne raison à cela, que nous verrons bientôt, c'est que je vais réellement intégrer différentes grilles. Je vais séparer cela en trois régions verticales et leur donner une certaine marge de rembourrage. Et nous allons coller notre contenu là-dedans. Pour le moment, j' utilise simplement des cases et des lignes pour représenter du texte et des images plutôt que d'y ajouter beaucoup de choses. Supposons que nous voulions maintenant ajouter d'autres éléments à cette page. Ce n'est pas assez compliqué. Nous voulons d'autres choses là-dessus. Eh bien, c'est ici que nous allons intégrer une grille plutôt que de nous fier à une grille plutôt que de nous fier la grille que nous avions pour toute la page qui décide où vont ces composants et essayant de travailler avec ces régions verticales, Je vais créer de nouvelles grilles ici. Cela nous donne un peu plus de contrôle, signifie que nous pouvons faire plus de choses, mais il est également beaucoup plus facile de développer le laser et fonctionne beaucoup mieux avec la façon dont nous développons actuellement des sites Web. De plus, juste parce que je peux, et je pense que cela fonctionne mieux avec le contenu que je suis sur le point de mettre en place. J'en ai fait une grille de sept colonnes, ne fait absolument rien de mal à en faire un nombre impair comme celui-ci. Je l'ai divisé en cinq septième et deux septième. Et maintenant, je peux ajouter mon nouveau contenu ici à côté du texte. Ce nouveau contenu et ces nouvelles régions verticales ne sont pas nécessairement liés à grille de corps principale que nous avons créée en premier lieu. Mais il a un sentiment d'uniformité car nous avons utilisé la même largeur de gouttière. Et si nous avions des marges là-dessus, nous avons utilisé des marges similaires. N'oubliez pas qu'avec un design réactif, ce sont les domaines sur lesquels nous avons le contrôle. Maintenant, je suis sûr que vous allez avoir hâte d'y aller. Nous parlons de grilles depuis des lustres et vous êtes probablement désespéré d' ouvrir un programme de conception et de commencer à créer quelque chose. Mais attendez-vous et regardez les prochaines vidéos. Je vais parler un peu aspects techniques de l'utilisation d'un logiciel de conception pour créer quelque chose comme celui-ci. Nous venons de voir deux exemples dans l'exemple d'article de blog, le titre des articles de blog utilisait un ensemble de régions verticales différent du corps du billet de blog. Et dans le type de mise en page plus de tableau de bord, nous avons vu comment vous pourriez simplement intégrer une grille séparée dans des parties de la conception. Ces jours-ci, nous allons presque toujours créer notre design en tant que composants individuels. Et ces composants vont fonctionner sur différentes grilles. La zone qui leur donnera un sentiment d' unité et de conformité sera qu'ils ont la même largeur de gouttière ou une largeur et des marges similaires. Ouvrons notre logiciel de conception et commençons à le créer maintenant. 14. Construire notre grille - Partie 1: Lorsque vous regardez autour de certaines galeries d'inspiration ou que vous voyez un travail de design vraiment incroyable. Malheureusement, beaucoup de choses ne fonctionnent pas réellement dans le monde réel. Donc, lorsque nous présentons cela dans Figma, nous voulons nous assurer que nous créons quelque chose qui, lorsque le développeur le récupère, il peut créer quelque chose de réel avec lui et il va réellement travail. Le développeur va toujours prendre des décisions de conception. Il y aura toujours des changements à ce stade parce qu' on ne peut pas créer un design qui fonctionne complètement dans toute la réactivité et tout. Il y a toujours des décisions prises par le développeur. Nous allons essayer de réduire le nombre de décisions que nous les avons forcées à prendre. Et je travaillerai à Figma. Je recommande encore une fois de l' utiliser comme logiciel de prédilection. Et il y a plusieurs raisons, encore une fois, lesquelles je ne vais pas entrer, mais ne vous inquiétez pas trop. Je ne le suis pas, cela ne va pas expliquer comment utiliser Figma, mais juste expliquer les choses que j' allume et que j'utilise pour aider à créer une grille. Donc, pour notre topographie, nous avons déjà créé une grille verticale comme celle-ci ici, j'ai une grille verticale de quatre pixels. Si nous sommes particulièrement préoccupés par la lisibilité, nous n' aurons probablement pas quelque chose exactement quatre pixels pour notre grille verticale, car cela sera basé sur la hauteur de ligne de notre idéal la hauteur du corps du texte, comme nous l'avons déjà parlé en longueur. Cependant, parce que certains logiciels de conception ne vont tout simplement pas nous permettre de travailler avec trois points cinq pixels ou quelque chose comme ça. Parfois, il peut être logique de simplement faire quatre pixels pendant que nous réalisons la conception et d'expliquer ensuite au développeur, tous les chiffres doivent être ajustés un peu lorsqu'ils le créent, car cela ne sera pas très différent si vous ne lisez pas un grand corps de texte dans votre dessin. Mais cela va faire une grande différence lorsque vous êtes, un utilisateur vient lire le texte. Donc, si dans le module de topographie pour une certaine police de caractères, vous avez décidé que la meilleure hauteur de ligne allait en fait vous donner une grille de 5,7 pixels ou quelque chose d'un peu obscur comme ça. Peut-être en faire six pour le design et dire ensuite au développeur que vous l'avez ajusté. Si nous ne sommes pas très préoccupés par la lisibilité, les gens ont tendance à aimer travailler avec quelque chose comme quatre pixels, car il est assez facile de la moitié à 2,5 à un au cas où ils en ont besoin et de le doubler et travaillez avec elle de cette façon. Parce que cette grille de mise en page à quatre pixels est destinée à des choses très, très granulaires. Je vais le transformer en grille comme dans les lignes et les colonnes complètes. Maintenant, j'utilise Figma. Donc, si je sélectionne un tableau d'art ou un composant, je peux revenir à l'endroit où il est écrit grille de disposition. Je peux en ajouter un et je peux basculer entre les lignes, les colonnes et le grain. Je vais avoir ce pixel plein comme grille. Maintenant, nous pouvons ajouter une grille verticale plus importante pour les multiples plus grands, disons 16 pixels, soit quatre fois quatre. La plupart des éléments vont maintenant s' aligner sur cette nouvelle grille de 16 pixels. Mais lorsque nous avons besoin de faire quelque chose comme de l'entraînement , la hauteur de la ligne de topographie et assurez-vous que des choses plus petites de ce type s'adaptent. Nous avons cette grille à quatre pixels que nous pouvons réactiver pour le design que je suis sur le point de créer en utilisant cette grille, toutes les marges, tous les motifs, ils seront tous multiples de quatre, mais idéalement des multiples de 16, ce qui va le rendre encore plus uniforme. Commençons maintenant à regarder quelques colonnes. Donc, notre exemple que nous venons de faire, nous avions une grille de colonnes comme celle-ci. Maintenant, historiquement, nous faisons ces 12 juste parce que c' était la restriction des frameworks CSS comme Twitter Bootstrap que nous devrions, mais d'après mon expérience, il est 12, un assez bon nombre. Maintenant, comme nous l'avons vu dans notre dernier exemple, nous allons y intégrer des grilles plus petites. En fait, nous allons simplement utiliser cette grille principale des 12 colonnes pour positionner nos principaux composants. Il ne s'agira pas de texte, d'images ou d'autres éléments du genre alignés directement sur cette grille. C'est très important à retenir parce que si jamais vous parlez à un imprimeur, ils penseront, eh bien, vous n'avez grille de 12 colonnes et vous y mettez tout. Et en fait, si vous parlez à un concepteur web d'il y a plus de quelques années, il pourrait penser la même chose. Mais la façon dont nous développons maintenant des sites Web et des applications signifie que les composants n'ont pas accès à cette grille. Ils ont en fait leurs propres grilles indépendantes, comme nous l'avons vu dans la dernière vidéo. Un dernier point à ce stade, avant de passer à autre chose , c'est que vous allez avoir beaucoup de grilles. clair que vous allez avoir des grilles dans différents composants. Vous avez cette grille verticale, vous avez cette grille granulaire, celle de quatre pixels. Et maintenant, vous avez ces colonnes. Il y a des grilles partout. Maintenant, j'utilise Figma. Si je maintiens le contrôle G, il va éteindre toutes les grilles. Et si je maintiens à nouveau le contrôle G, ça va tous les allumer. Si vous utilisez un logiciel de conception différent, il existe probablement une clé différente pour et désactiver rapidement la grille. C'est probablement la même chose. Bien sûr, je peux également masquer chaque grille indépendamment avec la petite icône d'œil à côté la grille où il y a des grilles de disposition sur le côté. C'est simple. Tout d'abord, prenez l'un des systèmes typographiques que vous avez déjà créés. Prenez la grille verticale que vous avez utilisée pour elle, puis multipliez-la par quatre pour créer une grille verticale plus grande qui alignera la plupart de vos éléments sur la page. Ensuite, créez également cette grille horizontale. Il s'agit généralement de 12 colonnes, mais ce n'est pas nécessaire. Et vous pouvez également revenir et changer cela plus tard si vous découvrez que cela n'a pas vraiment fonctionné à 12 ans. Une fois que vous commencez à traduire la page, votre exercice consiste simplement à créer une grille verticale plus grande et créer la grille horizontale initiale, potentiellement environ 12 colonnes. 15. Construire notre grille - Partie 2: Ce que j'ai ici, c'est une page avec une grille de 12 colonnes, qui a une marge de 48 pixels sur les côtés, 32 gouttières. Et c'est parce qu'il possède une grille verticale de 16 pixels. Cela ne sera utilisé que pour positionner ces deux composants majeurs. Cette ceinture à gauche, qui va évidemment être une sorte de menu ou quelque chose comme ça. Et il y a de l'ours à droite, qui va évidemment contenir des tableaux de bord et des choses comme ça. Il y a parfois des composants plus petits nous pouvons aligner directement sur cette grille à 12 colonnes. Par exemple, j'ai mis un logo et un en-tête de page ici. Mettons-les dedans. Pour les deux autres composants. Ce qui est évident que vous allez être un menu sur la gauche. Et ce qui est évident que vous allez avoir le contenu de la page sur la droite. J'en ai fait des composants. J'ai dessiné deux boîtes alignées sur la grille originale de 12 colonnes. J'en ai sélectionné l'un et j'ai cliqué sur le bouton Composant en haut. Et cela me donne maintenant la possibilité d'ajouter mes propres grilles de mise en page à chacun de ces composants individuels. Nous pourrions obtenir le même effet dans Figma en utilisant des plans de travail. Mais l'avantage d'un composant est qu'en fait, nous n'allons probablement pas réutiliser certains de ces éléments sur d'autres pages lorsque nous construirons le reste de nos conceptions. Maintenant, pour ces deux nouveaux composants, ils ont leurs propres colonnes rangées, marges et gouttières. Et rappelez-vous bien sûr les marges et les gouttières sont toutes des multiples de quatre et idéalement des multiples de 16 parce que c'est la chose sur laquelle nous avons le contrôle. C'est donc ce qui va le rendre uniforme. À ce stade actuel, il peut s'agir d'un modèle. Il peut s'agir d'un modèle que nous utilisons sur plusieurs pages pour garantir une mise en page similaire. Je pourrais mettre cela d'un côté et en faire une copie et appeler simplement cela le modèle maître de mon application. Maintenant, je vais diviser cette bonne section en différents composants. Et encore une fois, je vais leur faire des composants Figma pour pouvoir leur donner leurs propres marges et gouttières. Le nombre de colonnes ici peut être différent. Il n'a pas besoin d'être trois au sommet ici. Il peut être quatre, ça peut être n'importe quoi. Il n'a pas besoin de se rapporter de quelque façon que ce soit aux colonnes originales que nous avions sur la page. Dans cet exemple, j'en ai fait trois pour illustrer un point très important pour vous, à savoir que nous disposons d'un espace entre les composants en bas et d'une gouttière au niveau des composants du haut. Et ils ne sont pas parfaitement alignés. Nous ne pouvons pas les obtenir toujours parfaitement alignés. Ce n'est que l'une des victimes d'une grille réactive. Il n'y a pas la même quantité d' espace rigide et d'espace fluide. Nous ne pourrons donc jamais les faire correspondre parfaitement. Maintenant, je peux ajouter des éléments réels dans mon menu de gauche, m' assurer qu'ils s'alignent bien sur ma grille, certains textes, certaines icônes. Je peux aligner certaines choses dans ce composant supérieur et le bon et dans le bas. Et je vais mettre un autre sous-composant dans ce sous-composant ici aussi. Ce que nous avons maintenant, c'est qu'il y a une autre boîte à l'intérieur de cette boîte, qui aura également ses propres marges. C'est sa propre composante. Maintenant, le contenu des sous-composants ne correspond vraiment à rien d'autre sur la page, mais il semble toujours uniforme et il semble toujours conforme car nous avons utilisé des marges similaires autour de cette marge. est toujours un multiple de quatre. Il y a donc beaucoup de choses qui ne s'alignent pas. Mais dans l'ensemble, j'ai l' impression que le design a ce sentiment de conformité, mais il a aussi cette zone de marge de manœuvre. Il y a des zones de fluidité. Si je prends simplement le côté droit de l'ensemble du design, je peux l'étirer, je peux le rétrécir, et tout fonctionne toujours. Mais remarquez que je ne peux l' étirer et le rétrécir dans un petit espace confiné ici, c'est pourquoi j'ai mis cette boîte violette derrière le design. Pour cette deuxième étape de la création de votre grille, vous allez créer des grilles de composants. Placez certains composants dans les grilles, vous les créez dans la dernière vidéo, votre grille verticale et votre grille horizontale principale. Et donnez à chacun de ces composants sa propre grille avec ses propres marges et ses propres gouttières. Et essayez d'utiliser des mesures universelles pour ces gouttières et marges que vous avez déjà utilisées tout au long de votre conception. Idéalement, les multiples de cette grille verticale que vous avez créée à l'origine. Essayez d'expérimenter un peu la façon dont ces composants s' intègrent sur la page et le fonctionnement des grilles, puis ajoutez-y du contenu. Vous pouvez revenir à l'article original de Wikipédia que vous utilisez pour récupérer votre texte. Ou vous pouvez simplement ouvrir une application que vous utilisez assez régulièrement et copier simplement le texte que des images, des symboles et des trucs semblables. Ne vous inquiétez pas trop si le contenu n'a aucun sens. À ce stade, nous apprenons comment aligner les choses dans notre grille. Et nous apprenons également à utiliser les compétences que nous avons créées dans le premier module, créant une belle composition équilibrée et toutes ces autres choses. Alors s'il vous plaît, n'hésitez pas à amuser et à expérimenter cela. 16. Construire notre grille - Partie 3: Voyons comment nous pouvons rendre notre grille plus réactive afin de simplifier un peu cela et de la rendre plus facile à comprendre. Je viens d'en faire une grille à six colonnes cette fois. Mais ce que je vais aussi faire, c'est que je vais dire que lorsque c'est sur une tablette, ce sera en fait trois colonnes. Et quand il est sur un mobile, il ne s'agit que d'une colonne. Nous ne pouvons jamais vraiment dire avec certitude si quelqu'un est sur un téléphone portable, une tablette ou un ordinateur de bureau, et ce n'est pas vraiment la chose la plus importante. En fait, nous parlons simplement la largeur de la fenêtre du navigateur. Ces trois modèles sont en réalité de 600 à 900 pixels, neuf cent cent, dix cent deux cents pixels et 1201 à 1600 pixels. Pour tout ce qui est inférieur à 600 pixels, il n'y aura aucun changement. Et pour tout ce qui est supérieur à 1600, nous n'aurons que des marges variables plus grandes à gauche et à droite. Donc, en dessous de 600 ou plus de 1600, rien n'est fluide, tout est statique. Et ensuite, entre chacune de ces sections, c'est ici que nous avons le système d'écluse du canal. Nous en avons parlé. Il existe un certain élément de conception fluide entre six cent et neuf cents. Par exemple, nous ne voulons pas que notre typographie se développe et se rétrécit à mesure que la fenêtre du navigateur grandit et se rétrécit. car nous avons déjà minutieusement établi bons chiffres pour la lisibilité. Mais certaines choses sur notre page vont s'étirer et s'écraser. Pour que cela soit un peu plus facile à voir, j'ai ajouté une boîte violette derrière le côté droit de chacun de ces modèles afin que nous puissions voir la pièce dans laquelle il doit emménager. Ainsi, par exemple, sur le plus grand design, qui serait évidemment pour un écran de bureau d'où environ les marqueurs 1201 pixels jusqu'à l'endroit où les 1600 pixels marchent. Il y a cette boîte violette. De cette façon, je peux facilement étirer et rétrécir mon tableau d'art entre ces deux points d'arrêt et voir à quel point ces colonnes seront différentes. Et une fois que j'ai ajouté le contenu de la page, je peux voir à quel point ils seront différents avec des largeurs légèrement différentes. Pour chacune des cases que j'ai ajoutées à chacune de ces trois mises en page. J'ai sélectionné les contraintes à gauche et à droite. qui signifie que ces composants respecteront les contraintes de l'emplacement de cette grille de colonnes. Ces points d'arrêt que j'ai ajoutés à la grille principale à 900 pixels où il change entre 13 colonnes et 1200 pixels où il passe de trois à six colonnes. Il s'agit de positions relativement standard pour les freins pour le nombre de colonnes à changer. S'il est plus logique pour votre conception qu'ils rompent à un autre moment, hésitez pas à ne pas les mettre dans ces biens exacts. Et bien sûr, des pages potentiellement différentes de votre site peuvent également présenter des points d'arrêt à des endroits légèrement différents, si cela a du sens. Mais sachez que cela va ajouter d'autres complications au travail de développement et qu'il devra être communiqué et compris par le reste de l'équipe de conception. Si nous examinons la disposition des composants sur ces trois vues de largeur différentes, nous pouvons voir que certains composants sont passés de la moitié de la grille à toute la largeur de la grille et tout ce genre de choses à différentes largeurs. Jetons un coup d'œil à un composant spécifique. Nous avons ici un composant qui couvre la moitié de la largeur de la conception. Et il va avoir sa propre grille. J'ai activé une seule ligne et une seule colonne avec une marge de 16 pixels. 16 pixels étant assez uniformes tout au long du design que je crée. Maintenant, tout ce qui se trouve dans ce composant doit fonctionner dans cette grille. Ce composant peut également comporter plusieurs lignes ou plusieurs colonnes. Et si c'est le cas, il aurait une largeur de gouttière uniforme, soit un multiple de quatre pixels. J'ai laissé du texte aligné et j' ai des droits alignés sur un diagramme à secteurs. Et dans Figma dans les contraintes, le texte est défini pour contraindre la gauche et le diagramme à secteurs est défini sur contrainte, n'est-ce pas ? Cela signifie que je peux maintenant voir comment ce composant se situe dans les restrictions de fluides de cette conception actuelle. Le design large est fluide pour 400 pixels et c' est la moitié de la largeur. Il est donc fluide pour 200 pixels. Je veux juste vérifier que cela fonctionne dans cette plage de 200 pixels. Disons maintenant que lorsque notre page s'accroche à seulement trois colonnes, ce composant n'est qu'une de ces colonnes, donc c'est un tiers de la page. Cela réduira considérablement la largeur du composant. Donc, peut-être que la mise en page change, peut-être maintenant que tout le contenu est au-dessus de l' autre et il est aligné de manière centralisée. Cependant, il fonctionne bien sûr toujours dans les marges. Et puis disons que lorsque la largeur du navigateur est inférieure à 900 pixels, peut-être que ce composant est en pleine largeur car il n'y a pleine largeur car il n'y a qu'une seule colonne, comme nous le savons déjà. Maintenant, cela signifie en fait que la disposition de ce composant sera identique sur les murs mobiles et de bureau en fait légèrement différente sur les tablettes, ou je devrais dire légèrement différente, entre neuf cent et cent, dix cent, deux cents pixels. Mais la position réelle qu'il prend est quelque part entre ici et ici. Maintenant, il se peut que le point où la disposition de ce composant change se situe en fait entre 901 200 pixels, ce qui signifie le point où il s' enclenche de six colonnes dans trois colonnes pour la mise en page ne correspondent pas nécessairement la position exacte où la mise en page de ce composant individuel change. Cependant, encore une fois, pour faciliter le développement et faciliter communication avec d'autres concepteurs, j'essayerais normalement d'éviter cela. Notez également que j'ai réduit la topographie pour la version mobile du composant que pour la version de bureau du composant. Parce que, comme nous le savons déjà, je travaille dans un programme de conception sur l'écran de mon ordinateur. Cela signifie que je travaille avec les pixels de référence de l'écran de mon bureau. Je ne vois pas les concepteurs sur mon téléphone portable, qui aura bien sûr des pixels de référence plus petits. C'est un sujet un peu plus avancé et pas quelque chose que vous allez toujours faire souvent le développeur fera quelques appels de jugement au moment du développement sur la façon dont il fonctionne. différentes largeurs. Donc, tout peut s'intégrer. Cependant, nous voulons aider autant que possible en tant que concepteurs. Assurez-vous donc de créer au moins une autre version. Prenez le design que vous avez créé dans la dernière vidéo, et cette fois créez-en un nouveau, mais une vue beaucoup plus étroite. Il y a peut-être deux colonnes plutôt que les 12 premières. Maintenant, ajoutez les mêmes composants que ceux que vous avez transmis dans la dernière vidéo à cette nouvelle vue. Ils vont donc être des composants beaucoup plus étroits. Et vous voudrez peut-être penser à limiter tout ce qui se trouve dans ces composants à l'IVR à gauche, à droite ou à gauche, de sorte que vous puissiez ajuster légèrement le plan de travail et voir à quoi il ressemble, par exemple, un téléphone légèrement plus large ou un téléphone légèrement plus étroit. Si vous avez tout le temps et tout le budget dans le monde, vous pouvez faire ce que j'ai fait avec composants uniques dans cette vidéo où j'ai vérifié qu'elle fonctionne sur toutes les largeurs possibles. 17. Résumé: Une grille uniforme donnera instantanément à nos conceptions un sentiment de conformité. En alignant nos éléments sur une grille. Non seulement nous facilitons la vie de notre développeur, nous effectuons l'un des changements les plus simples designer puisse apporter pour améliorer radicalement l'esthétique globale d'un design. Nous sommes sur le point de créer notre propre grille à utiliser avec notre conception. Mais d'abord, nous devons comprendre quelques éléments sur le fonctionnement moderne du CSS. Et dans la section suivante, nous en apprendrons un peu plus sur façon dont le développement moderne basé sur des composants affectera la façon dont nous utilisons les grilles dans la conception. À mon avis, le monde du design et du développement est devenu trop compliqué pour que quiconque puisse maîtriser les deux. Mais pour concevoir à l'aide de grilles, nous devons comprendre la grille CSS Flexbox et CSS que nous avons examinées dans cette section. Vous êtes maintenant prêt à arrêter de créer une grille pour votre conception.