WEBVTT 1 00:02.976 --> 00:08.380 Déterminer comment les éléments seront placés sur le site Web est l’une des parties les plus importantes lors de la conception, 2 00:08.560 --> 00:09.500 et l'un des plus durs. 3 00:09.900 --> 00:13.760 La mise en page d’un site Web joue un rôle énorme dans la définition de son ambiance générale. 4 00:14.500 --> 00:15.400 Tout comme le choix des polices, 5 00:15.640 --> 00:21.220 il est important de penser à ce que ressentiront les utilisateurs et à ce dont le projet a besoin lors du choix d'une mise en page. 6 00:21.840 --> 00:26.840 Une mise en page en grille plus structurée peut donner à un site Web un aspect professionnel et organisé, 7 00:27.360 --> 00:30.980 parfait pour les sites de commerce électronique ou d'actualités avec beaucoup d'informations. 8 00:31.920 --> 00:39.260 Mais une disposition en grille déconstruite peut apporter une ambiance plus créative et artistique, idéale pour mettre en valeur le caractère unique des produits ou des services. 9 00:41.170 --> 00:45.480 La mise en page que vous décidez de créer doit vraiment correspondre à l’image de la marque. 10 00:45.840 --> 00:46.600 Par exemple, 11 00:46.640 --> 00:51.620 si nous revenons aux deux exemples que nous avions plus tôt ici pour le site Web Edifice et le 12 00:51.780 --> 00:54.760 Site Manana, nous avons deux grilles complètement différentes. 13 00:54.880 --> 00:56.760 Montrons la grille ici. 14 00:56.900 --> 00:58.976 Je vais juste appuyer sur Shift G. 15 00:59.440 --> 01:02.600 Si nous regardons la grille de l'Edifice pour commencer, 16 01:02.760 --> 01:04.920 nous avons une conception très structurée. 17 01:05.220 --> 01:07.520 Tout est parfaitement aligné sur la grille. 18 01:07.780 --> 01:09.080 Je vais le cacher ici. 19 01:09.540 --> 01:12.360 Cela semble très fort, très structuré, 20 01:12.960 --> 01:17.580 et un aspect très industriel car tout est parfaitement droit. 21 01:18.000 --> 01:21.680 Vous obtenez ce sentiment qui complète vraiment l'image de marque de 22 01:22.100 --> 01:22.260 Édifice. 23 01:22.560 --> 01:22.660 Bien, 24 01:24.540 --> 01:27.080 si nous regardons le site Web de Manana ici, 25 01:27.280 --> 01:30.920 oui, les éléments sont toujours alignés sur la grille autant que possible, 26 01:31.080 --> 01:34.600 où nous avons des éléments qui peuvent être alignés sur la grille. 27 01:34.760 --> 01:40.240 Mais nous avons aussi ces moments ici où nous avons juste du texte qui flotte, 28 01:40.520 --> 01:43.380 des éléments qui brisent complètement la grille, 29 01:43.660 --> 01:44.880 beaucoup de courbes, 30 01:45.140 --> 01:48.720 et nous avons quelque chose de complètement différent en termes de mise en page. 31 01:48.840 --> 01:51.600 Et c'est parce que nous essayons vraiment toujours de 32 01:51.780 --> 01:53.500 adapter la mise en page à la marque. 33 01:53.700 --> 01:55.760 Ici, nous avons une version plus amusante et colorée, 34 01:56.180 --> 01:57.376 marque de mouvement. 35 01:57.620 --> 01:59.300 Et là, nous avons quelque chose de très structuré. 36 01:59.460 --> 02:00.020 C'est un bâtiment. 37 02:00.140 --> 02:02.560 C'est une entreprise de construction de bâtiments industriels. 38 02:02.720 --> 02:04.780 Il faut donc qu'il soit parfaitement bien fait. 39 02:05.020 --> 02:09.460 Et l'agencement ne consiste pas seulement à allier tout ce qui se trouve sur la grille. 40 02:09.620 --> 02:12.240 Il s’agit aussi de cet espacement entre les éléments. 41 02:12.440 --> 02:18.624 J'aime ajouter beaucoup d'espace vide à ma conception afin que tout ne semble pas trop à l'étroit. 42 02:18.820 --> 02:20.440 Nous avons ici deux exemples différents. 43 02:20.660 --> 02:21.240 Nous avons le 44 02:21.780 --> 02:22.140 Site Web malais. 45 02:22.520 --> 02:24.060 Ceci est pour un portfolio. 46 02:24.480 --> 02:25.300 Donc dans ce cas, 47 02:25.380 --> 02:31.280 Je voulais vraiment quelque chose pour donner un look minimaliste et vraiment laisser briller les projets eux-mêmes. 48 02:31.500 --> 02:36.720 J'ai donc décidé d'opter pour une grille déconstruite avec beaucoup d'espace vide, 49 02:37.000 --> 02:38.460 pas trop chargé visuellement. 50 02:38.800 --> 02:42.260 Ainsi, nous pouvons vraiment nous concentrer sur chaque projet à la fois. 51 02:42.340 --> 02:45.840 Et j'ai l'impression qu'il flotte un peu. 52 02:46.160 --> 02:51.440 Alors qu'un autre site Web ici pour le site Web cool Good is New, 53 02:51.780 --> 02:53.000 dans ce cas particulier, 54 02:53.120 --> 02:55.140 c'est un blog avec beaucoup d'articles. 55 02:55.400 --> 02:57.080 Le but est différent. 56 02:57.320 --> 03:00.060 Ici, je voulais un peu moins d'espace vide. 57 03:00.280 --> 03:02.640 Tout est un peu plus proche, 58 03:02.860 --> 03:03.960 un peu plus aligné. 59 03:04.260 --> 03:06.240 Il me reste encore quelques espaces vides 60 03:06.980 --> 03:08.840 autour de certains de ces articles. 61 03:09.180 --> 03:11.080 Ceci est la page de liste des articles. 62 03:11.260 --> 03:18.720 Je veux toujours avoir de l'espace libre et ne pas simplement encombrer quatre colonnes partout. 63 03:19.480 --> 03:21.660 Cela paraîtrait un peu trop chargé, je pense. 64 03:22.020 --> 03:24.020 Mais la conception est dans ce cas, 65 03:24.020 --> 03:28.100 bien plus adapté à ce projet particulier où nous avons beaucoup d'articles. 66 03:28.280 --> 03:29.660 Le but est différent. 67 03:29.860 --> 03:33.660 Au lieu de simplement découvrir une partie du travail de ce réalisateur, 68 03:34.040 --> 03:36.980 nous examinons vraiment différents articles. 69 03:37.060 --> 03:38.976 Nous voulons donc pouvoir les retrouver rapidement. 70 03:39.200 --> 03:41.300 Nous ne voulons donc pas trop de défilement. 71 03:41.520 --> 03:42.660 Et en parlant de parchemin, 72 03:42.760 --> 03:43.960 N'ayez pas peur du parchemin. 73 03:44.220 --> 03:51.712 Souvent, ce que je vois chez les designers qui débutent, c'est qu'ils essaient de mettre trop de choses au même endroit. 74 03:52.100 --> 03:55.860 Alors n'ayez pas peur de laisser défiler beaucoup de choses entre vos éléments. 75 03:56.100 --> 03:59.420 Ce n’est pas grave si l’utilisateur doit faire défiler la page pendant longtemps. 76 03:59.540 --> 04:01.340 Les utilisateurs sont habitués à faire défiler les pages en ligne. 77 04:01.600 --> 04:04.900 Alors n'hésitez pas à laisser beaucoup d'espace vide. 78 04:05.220 --> 04:10.700 Cela rendra le design moins lourd visuellement et rendra le contenu plus facile à digérer. 79 04:11.060 --> 04:18.840 Un excellent outil pour créer une mise en page bien équilibrée est d'avoir une belle grille sur laquelle aligner le contenu, 80 04:19.080 --> 04:21.440 en s'assurant que les éléments sont comme sur les photos, 81 04:21.780 --> 04:26.380 le texte et les graphiques bien alignés rendront non seulement le site Web plus beau, 82 04:26.480 --> 04:35.360 mais cela le rendra également plus organisé et améliorera l'expérience utilisateur en facilitant la navigation et la compréhension des informations présentées sur chaque page. 83 04:35.900 --> 04:43.320 Revenons à l’exemple de C2 Montréal ici et regardons comment nous utilisons la grille pour aligner tout sur la conception. 84 04:43.500 --> 04:45.040 Voici donc le fichier de travail, 85 04:45.160 --> 04:48.160 le fichier Figma pour le site web C2 Montréal. 86 04:48.580 --> 04:51.300 Et si je montre à nouveau la grille ici, 87 04:51.780 --> 04:52.820 c'est Shift G. 88 04:54.320 --> 04:56.420 Alors, en regardant ça, 89 04:56.580 --> 04:59.240 on voit que tout est parfaitement aligné sur la grille. 90 04:59.380 --> 05:00.800 Nous avons une grille de 12 colonnes. 91 05:01.060 --> 05:07.180 Personnellement, je pense qu'une grille de 12 colonnes est la voie à suivre pour mes grilles pour les sites Web que je crée habituellement. 92 05:07.440 --> 05:13.300 La raison pour laquelle j'aime une grille à 12 colonnes est que vous pouvez diviser 12 par 2, 93 05:13.460 --> 05:15.712 3, 4, 6, 12. 94 05:16.100 --> 05:21.300 C'est donc très utile si vous souhaitez créer quelque chose avec trois colonnes, quatre colonnes, 95 05:21.780 --> 05:21.900 deux colonnes. 96 05:22.520 --> 05:24.420 12 est un nombre idéal pour cela. 97 05:24.560 --> 05:26.640 Donc, généralement, les sites Web que je fais, 98 05:26.760 --> 05:29.880 J'aurai une grille de 12 colonnes avec quelques gouttières, 99 05:29.900 --> 05:30.580 une certaine marge. 100 05:30.860 --> 05:32.740 C'est l'une des grilles que je crée. 101 05:32.900 --> 05:33.940 Dans ce cas, 102 05:33.980 --> 05:35.020 comme vous pouvez le voir, 103 05:35.080 --> 05:37.720 J'ai une grille horizontale et une grille verticale. 104 05:38.020 --> 05:40.600 Je n'ai pas toujours la grille horizontale. 105 05:41.760 --> 05:46.020 La grille horizontale peut être utile pour aligner les éléments et avoir le bon espacement verticalement également. 106 05:46.340 --> 05:50.980 Mais j'ai toujours la grille verticale pour tous les projets que je fais. 107 05:51.840 --> 05:53.460 Et ici, comme nous pouvons le voir, 108 05:53.520 --> 05:56.840 J'ai des colonnes et nous pouvons voir la séparation entre les colonnes. 109 05:57.020 --> 05:59.500 C'est utile dans un projet comme C2 Montréal, 110 05:59.920 --> 06:01.260 où nous avons beaucoup de blocs. 111 06:01.460 --> 06:03.840 Et je veux pouvoir aligner ces blocs, 112 06:04.020 --> 06:05.540 pas avec les colonnes elles-mêmes, 113 06:05.860 --> 06:07.680 mais au centre de la colonne. 114 06:07.840 --> 06:11.100 Nous verrons dans quelques secondes comment créer une grille comme celle-ci. 115 06:11.220 --> 06:11.840 Et ouais, 116 06:11.880 --> 06:13.680 si nous parcourons simplement la conception, 117 06:13.840 --> 06:18.060 nous pouvons voir que presque tout sur la conception est parfaitement aligné sur la grille. 118 06:18.200 --> 06:20.080 Tout le texte que nous voyons, 119 06:20.240 --> 06:24.560 toutes les colonnes, toutes les images sont alignées sur notre grille. 120 06:24.720 --> 06:27.820 Et cela donne lieu à une conception très structurée. 121 06:28.060 --> 06:33.260 Et cela permet également aux développeurs de prendre plus facilement votre conception, de la développer et de la rendre réactive. 122 06:33.480 --> 06:35.620 Ce n’est donc pas seulement une question visuelle. 123 06:35.780 --> 06:40.180 Il s’agit également de rendre le site Web plus facile à développer et à rendre réactif. 124 06:40.420 --> 06:41.900 Et si nous revenons ici, 125 06:42.020 --> 06:42.840 comme vous pouvez le voir, 126 06:42.940 --> 06:45.664 tout est parfaitement aligné sur la grille. 127 06:45.940 --> 06:49.060 Et c'est le cas pour toutes les pages du site. 128 06:49.340 --> 06:51.660 Et il est également important d’aligner les 129 06:51.780 --> 06:55.520 éléments avec l'intérieur de la colonne et non l'extérieur. 130 06:55.800 --> 06:59.260 Parfois je vois des gens qui s'alignent, 131 06:59.420 --> 07:01.400 disons cette colonne de texte ici, 132 07:01.600 --> 07:04.040 comprendre qu'il est aligné sur la grille, 133 07:04.180 --> 07:05.100 il est aligné sur cette colonne, 134 07:05.300 --> 07:06.120 donc ça devrait aller. 135 07:06.260 --> 07:09.200 Mais en fait, vous êtes aligné ici sur le caniveau, 136 07:09.220 --> 07:11.040 vous n'êtes pas aligné à l'intérieur des colonnes. 137 07:11.200 --> 07:14.220 Ce n’est donc pas vraiment ainsi que fonctionne une grille. 138 07:14.360 --> 07:17.280 Et cela ne sera pas non plus utile pour les développeurs. 139 07:17.500 --> 07:18.860 Et ici, 140 07:19.008 --> 07:20.800 presque tout est parfaitement aligné. 141 07:21.020 --> 07:21.200 Mais 142 07:21.780 --> 07:24.880 ce n'est pas grave si tout dans votre conception n'est pas aligné sur la grille. 143 07:25.080 --> 07:26.100 Si par exemple, 144 07:26.140 --> 07:27.880 Je pense qu'ici dans le pied de page, 145 07:27.900 --> 07:30.160 nous avons ce compte à rebours ici, 146 07:30.360 --> 07:34.440 les nombres que nous avons ne sont alignés sur aucune grille. 147 07:34.600 --> 07:35.420 Et c'est bien, 148 07:35.540 --> 07:39.620 la grille est utile pour aligner la plupart des éléments de la page. 149 07:39.760 --> 07:41.860 Mais parfois, pour une raison quelconque, 150 07:41.900 --> 07:43.720 vous préférez ne pas aligner un élément, 151 07:43.940 --> 07:47.360 Parfois, vous voulez simplement briser la grille pour la rendre un peu plus dynamique. 152 07:47.640 --> 07:51.460 Il est donc normal de placer les éléments qui ne sont pas parfaitement sur la grille, ne le faites pas. 153 07:51.780 --> 07:52.064 force-le. 154 07:52.288 --> 07:56.300 Parfois, il est préférable de le placer hors de la grille pour que cela ait une belle apparence. 155 07:56.560 --> 08:01.080 C'est vraiment super facile de créer une grille dans Figma. 156 08:01.280 --> 08:03.800 Voyons comment créer une grille de 12 colonnes. 157 08:04.060 --> 08:06.380 J'ai ici une planche vide. 158 08:06.640 --> 08:09.664 Je vais donc ici sur la grille de mise en page de droite, 159 08:10.200 --> 08:11.620 J'ai un petit signe plus. 160 08:11.860 --> 08:16.360 Donc, vous voulez appuyer sur le plus ici pour créer automatiquement une grille carrée comme celle-ci, 161 08:16.500 --> 08:19.020 Je préfère avoir des colonnes. 162 08:19.296 --> 08:21.440 Maintenant, j'ai une grille de cinq 163 08:22.080 --> 08:22.380 colonnes. 164 08:22.380 --> 08:23.060 C'est vraiment aussi simple que ça, 165 08:23.240 --> 08:25.520 Je peux changer le nombre de colonnes dans mon cas, 166 08:25.520 --> 08:27.820 comme je le mentionnais, j'avais une grille de 12 colonnes. 167 08:28.120 --> 08:35.168 Et j'aime aussi avoir des marges pour que mon dessin n'aille pas jusqu'au bord de la page. 168 08:35.460 --> 08:38.320 J'aurai donc 20 points de marge. 169 08:38.520 --> 08:43.180 Et généralement, j'essaie d'avoir exactement la même marge que mon cutter. 170 08:43.340 --> 08:44.740 La raison pour laquelle il en est ainsi, 171 08:44.840 --> 08:49.120 est-ce que disons que je veux avoir un design où j'ai trois colonnes, 172 08:49.440 --> 08:52.224 comme ça, je vais le faire rapidement ici, 173 08:52.640 --> 08:55.456 où j'ai trois images, 174 08:55.920 --> 08:57.632 peut-être de cette façon, 175 08:57.960 --> 08:59.900 Je peux vraiment encore être aligné sur ma grille, 176 09:00.020 --> 09:03.420 et j'ai juste fait en sorte que les images s'étendent jusqu'au bord. 177 09:03.520 --> 09:05.400 Mais si j'avais une très grande marge, 178 09:05.720 --> 09:08.240 par exemple, si je mets ceci à 100, 179 09:08.520 --> 09:12.380 maintenant, je ne pouvais pas vraiment ajuster ces éléments comme ça. 180 09:12.480 --> 09:13.760 Parce que si j'ai du texte, 181 09:13.960 --> 09:15.840 J'aurais probablement le texte ici. 182 09:16.020 --> 09:19.000 Cela détruirait donc complètement notre réseau. 183 09:19.260 --> 09:21.472 Mais avec le même 184 09:21.780 --> 09:27.740 des marges comme celles-ci, je peux toujours aligner le titre de chaque colonne sur ma grille, 185 09:27.920 --> 09:28.940 ça fonctionnera toujours. 186 09:29.320 --> 09:32.080 Voilà une grille assez simple, 187 09:32.520 --> 09:33.840 c'est généralement celui que je prends, 188 09:33.880 --> 09:36.460 Honnêtement, ça n'a pas besoin d'être plus compliqué que ça. 189 09:36.680 --> 09:42.080 Mais si vous voulez un peu comme la grille C2 Montréal que nous regardions plus tôt, 190 09:42.300 --> 09:45.880 si vous souhaitez également avoir peut-être le centre de la colonne visible, 191 09:46.180 --> 09:47.900 c'est quelque chose que tu peux ajouter, 192 09:48.040 --> 09:49.840 vous pouvez simplement créer une autre grille, 193 09:49.980 --> 09:51.980 Je vais cliquer sur le signe plus ici, 194 09:52.320 --> 09:54.380 ajouter à nouveau quelques colonnes. 195 09:54.680 --> 09:56.060 Mais dans ce cas, 196 09:56.100 --> 09:59.232 je vais partir avec la richesse sans caniveau, 197 09:59.300 --> 10:01.740 Je veux avoir des marges. 198 10:02.220 --> 10:11.960 J'ai presque oublié une autre chose que vous voudriez peut-être voir pour votre grille, c'est un peu comme la grille C2 Montréal que nous avions plus tôt, 199 10:12.140 --> 10:15.120 où nous avions un menu qui était à droite. 200 10:15.240 --> 10:21.344 Nous avons donc un menu collant qui reste à droite tout au long de la page. 201 10:21.860 --> 10:24.460 Nous ne voulons pas que ce menu fasse partie de la grille, 202 10:24.540 --> 10:29.600 nous voulons que la grille soit le reste de la page ce que nous avons à gauche de ce menu ici. 203 10:29.780 --> 10:31.808 Donc la façon de faire cela est assez simple, 204 10:32.140 --> 10:35.100 Je vais juste ajouter ces deux autres grilles ici. 205 10:35.280 --> 10:37.880 Et si nous revenons à notre grille ici, 206 10:38.140 --> 10:40.560 au lieu d'avoir l'option d'étirement, 207 10:40.820 --> 10:42.800 Je vais les aligner à gauche. 208 10:42.960 --> 10:46.520 Donc maintenant mes 12 colonnes sont alignées à gauche ici. 209 10:46.680 --> 10:50.304 Et je peux régler manuellement la largeur de ces colonnes. 210 10:50.600 --> 10:51.760 C'est un peu 211 10:51.860 --> 10:52.500 trop. 212 10:52.580 --> 10:58.460 Je pense que 100 ça a l'air bien comme ça, 213 10:58.816 --> 10:59.840 peut-être un peu moins. 214 11:00.060 --> 11:01.480 Allons-y avec 99. 215 11:01.760 --> 11:06.160 Maintenant, j'ai ma grille à gauche de mon menu, 216 11:06.280 --> 11:08.620 mon menu un peu plus petit pour avoir la même marge, 217 11:08.760 --> 11:15.180 pour que tout ce que j'ai aligné dans ma conception dans ma page ne prenne pas en compte le menu, 218 11:15.260 --> 11:17.700 ça va être pour le reste de la page pour ma grille. 219 11:17.920 --> 11:18.560 Finalement, 220 11:21.440 --> 11:24.680 une bonne disposition apporte ordre, harmonie et équilibre. 221 11:25.020 --> 11:28.380 Qu'un site Web utilise une grille structurée ou déconstruite, 222 11:28.640 --> 11:31.180 beaucoup d'espace vide ou un agencement chargé, 223 11:31.440 --> 11:39.400 la clé est de choisir un agencement qui s'aligne sur la personnalité et les valeurs de la marque afin de laisser une impression forte et mémorable à ses visiteurs. 224 11:39.680 --> 11:40.840 Dans la prochaine leçon, 225 11:40.980 --> 11:47.900 nous parlerons de l'essence de la narration et du design et de la manière de créer un concept cohérent qui relie l'ensemble de votre site.